script-build-and-framework-tmp/visualization/frontend/components/workbench/MobileTimeline.tsx

import { ChevronDown, ChevronRight, FileText, Maximize2 } from "lucide-react";
import { branchFlow, branchSummaryItem, finalResultItem, multipathDecisionItem, multipathReviewItem, queryAttemptItem, retrievalAgentItem, retrievalDirectItem, retrievalStageItem, roundSummaryItem, storyItem } from "@/lib/layout";
import type { AgentDecisionProjection, BranchStory, CanvasItem, ExecutionViewV8, OpenTarget, RoundStoryV8, StoryNode } from "@/lib/types";
import { runResultFallback } from "@/lib/status-copy";
import { StatusBadge } from "@/components/ui/Badges";
import { CardFields } from "@/components/flow/CardFields";
import { authorityLabel, decisionTypeLabel } from "@/components/decision/AgentDecisionCard";

interface Props { view: ExecutionViewV8; expandedRounds: Set<number>; expandedBranches: Set<string>; expandedRetrievalAgents: Set<string>; onToggleRound: (round: number) => void; onToggleBranch: (round: number, branchId: number) => void; onToggleRetrievalAgent: (agentId: string) => void; onOpen: (item: CanvasItem, target: OpenTarget) => void; onCanvas: () => void; }

export function MobileTimeline({ view, expandedRounds, expandedBranches, expandedRetrievalAgents, onToggleRound, onToggleBranch, onToggleRetrievalAgent, onOpen, onCanvas }: Props) {
  const objective = storyItem(view.objective);
  const final = finalResultItem(view);
  const objectiveLabel = "创作目标";
  return <section className="mobileTimeline">
    <header><div><h2>这次构建经历了什么</h2><p>按时间从上到下阅读</p></div><button className="quietButton" type="button" onClick={onCanvas}><Maximize2 size={15} />横向画布</button></header>
    {view.planning ? <ol className="mobileSteps mobilePrelude"><StoryItem story={view.planning} onOpen={onOpen} /></ol> : null}
    <MobileDecision item={objective} decision={view.objective.decision} fallbackLabel={objectiveLabel} fallbackCard={view.objective.card} onOpen={onOpen} />
    <ol className="roundList">{view.rounds.map((round) => <RoundItem key={round.id} round={round} expanded={expandedRounds.has(round.roundIndex)} expandedBranches={expandedBranches} expandedRetrievalAgents={expandedRetrievalAgents} onToggle={() => onToggleRound(round.roundIndex)} onToggleBranch={onToggleBranch} onToggleRetrievalAgent={onToggleRetrievalAgent} onOpen={onOpen} />)}</ol>
    <article className="mobileStory mobileFinal"><button className="mobileFinalSummary" data-focus-return={`${final.id}:mobile`} type="button" onClick={() => onOpen(final, "business")}><span>最终结果</span><StatusBadge status={view.finalResult.status} /><strong>{view.finalResult.title}</strong><p>{view.finalResult.summary || view.finalResult.errorMessage || runResultFallback(view.finalResult.status, view.finalResult.terminal)}</p></button><button type="button" className="nodeAction" data-focus-return={`${final.id}:artifact-mobile`} onClick={() => onOpen(final, "artifact")}>查看完整主脚本</button></article>
  </section>;
}

function RoundItem({ round, expanded, expandedBranches, expandedRetrievalAgents, onToggle, onToggleBranch, onToggleRetrievalAgent, onOpen }: { round: RoundStoryV8; expanded: boolean; expandedBranches: Set<string>; expandedRetrievalAgents: Set<string>; onToggle: () => void; onToggleBranch: Props["onToggleBranch"]; onToggleRetrievalAgent: Props["onToggleRetrievalAgent"]; onOpen: Props["onOpen"] }) {
  const summary = roundSummaryItem(round);
  return <li>
    <div className="mobileRoundSummary">
      <button type="button" className="roundExpand" aria-label={`${expanded ? "折叠" : "展开"}第 ${round.roundIndex} 轮`} onClick={onToggle}>{expanded ? <ChevronDown size={18} /> : <ChevronRight size={18} />}</button>
      <button type="button" className="roundSummaryOpen" data-focus-return={`${summary.id}:mobile`} onClick={() => onOpen(summary, "business")}><span>第 {round.roundIndex} 轮</span><StatusBadge status={round.state} /><strong>{round.summary.title}</strong><SummarySequence round={round} /></button>
      <button type="button" className="candidateExpand artifactAction" data-focus-return={`${summary.id}:artifact-mobile`} onClick={() => onOpen(summary, "artifact")}><FileText size={14} />查看本轮产出脚本表</button>
    </div>
    {expanded ? <ol className="mobileSteps">
      <StoryItem story={round.goal} roundIndex={round.roundIndex} onOpen={onOpen} />
      <StoryItem story={round.plan.node} roundIndex={round.roundIndex} onOpen={onOpen} />
      {round.branches.map((branch) => {
        const key = `${round.roundIndex}:${branch.branchId}`;
        const item = branchSummaryItem(branch, round.roundIndex);
        return <li className="mobileCandidate" key={branch.id}><button type="button" data-focus-return={`${item.id}:mobile`} onClick={() => onOpen(item, "business")}><span>候选方案 {branch.branchId}</span><StatusBadge status={branch.status} /><strong>{branch.title}</strong><p>{branch.summary.task || branch.summary.output || "未记录方案摘要"}</p></button><div className="mobileCandidateActions"><button type="button" className="candidateExpand" onClick={() => onToggleBranch(round.roundIndex, branch.branchId)}>{expandedBranches.has(key) ? "收起方案过程" : "展开方案过程"}</button>{branch.output.type === "script-artifact" && branch.output.snapshotRef ? <button type="button" className="candidateExpand artifactAction" data-focus-return={`${item.id}:artifact-mobile`} onClick={() => onOpen(item, "artifact")}><FileText size={14} />查看完整候选脚本</button> : null}</div>{expandedBranches.has(key) ? <BranchProcess branch={branch} roundIndex={round.roundIndex} expandedRetrievalAgents={expandedRetrievalAgents} onToggleRetrievalAgent={onToggleRetrievalAgent} onOpen={onOpen} /> : null}</li>;
      })}
      {round.convergenceBatches.map((batch) => <li className="mobileConvergence" key={batch.id}>
        <ol className="mobileConvergenceSteps">
          {batch.review ? <li><MobileDecision item={multipathReviewItem(batch.review, round.roundIndex)} decision={batch.review.decisionProjection} fallbackLabel="多方案评审" fallbackCard={{ primary: { value: batch.review.conclusion || "查看评审结论" }, secondary: [] }} onOpen={onOpen} /></li> : batch.missingReview ? <StoryItem story={batch.missingReview} roundIndex={round.roundIndex} onOpen={onOpen} /> : null}
          {batch.decision ? <li><MobileDecision item={multipathDecisionItem(batch.decision, round.roundIndex)} decision={batch.decision.decisionProjection} fallbackLabel="主 Agent 多路决策" fallbackCard={{ primary: { value: batch.decision.decision }, secondary: [] }} onOpen={onOpen} /></li> : batch.missingDecision ? <StoryItem story={batch.missingDecision} roundIndex={round.roundIndex} onOpen={onOpen} /> : null}
        </ol>
      </li>)}
      <StoryItem story={round.overallEvaluation} roundIndex={round.roundIndex} onOpen={onOpen} />
      <StoryItem story={round.result} roundIndex={round.roundIndex} onOpen={onOpen} />
    </ol> : null}
  </li>;
}

function SummarySequence({ round }: { round: RoundStoryV8 }) {
  const fields = [
    ["目标", round.summary.goal.headline],
    ["尝试", `${round.summary.approach.mode || "方式未记录"} · ${round.summary.approach.candidateCount} 个实现方案`],
    ["决策", round.summary.decision.batchCount ? `${round.summary.decision.batchCount} 个决策批次` : round.summary.decision.summary],
    ["产出", round.summary.output.summary],
  ] as const;
  return <div className="mobileSummarySequence">{fields.map(([label, value]) => <p key={label}><b>{label}</b>{value || "未记录"}</p>)}</div>;
}

function BranchProcess({ branch, roundIndex, expandedRetrievalAgents, onToggleRetrievalAgent, onOpen }: { branch: BranchStory; roundIndex: number; expandedRetrievalAgents: Set<string>; onToggleRetrievalAgent: Props["onToggleRetrievalAgent"]; onOpen: Props["onOpen"] }) {
  const stage = retrievalStageItem(branch.retrievalStage, roundIndex, branch.branchId);
  const [task, ...tail] = branchFlow(branch);
  return <ol className="mobileBranchProcess">
    <StoryItem story={task} roundIndex={roundIndex} branchId={branch.branchId} onOpen={onOpen} />
    <li className="mobileRetrievalStage">
      <button type="button" data-focus-return={`${stage.id}:mobile`} onClick={() => onOpen(stage, "business")}><span>取数阶段</span><strong>{modeLabel(branch.retrievalStage.observedMode)}</strong><p>工具取数和 Agent 取数属于同一阶段</p></button>
      <ol>
        {branch.retrievalStage.directToolGroups.map((group) => { const item = retrievalDirectItem(group, roundIndex, branch.branchId); return <li key={item.id}><button type="button" onClick={() => onOpen(item, "business")}><span>工具取数</span><strong>{group.sources.map((source) => source.businessLabel).join("、") || "相关信息"}</strong><p>{group.callCount} 次读取</p></button></li>; })}
        {branch.retrievalStage.agentRuns.map((run) => {
          const item = retrievalAgentItem(run, roundIndex, branch.branchId);
          const expanded = expandedRetrievalAgents.has(run.id);
          const queryListId = `mobile-query-list-${run.eventId}`;
          return <li key={run.id} className="mobileRetrievalAgent"><button type="button" onClick={() => onOpen(item, "business")}><span>Agent 取数</span><strong>{run.businessLabel}</strong><p>{run.querySummary.total} 次查询 · {run.querySummary.hit} 次命中 · {run.querySummary.empty} 次无结果{run.querySummary.failure ? ` · ${run.querySummary.failure} 次失败` : ""}{run.querySummary.interrupted ? ` · ${run.querySummary.interrupted} 次中断` : ""}{run.querySummary.unknown ? ` · ${run.querySummary.unknown} 次结果待确认` : ""}</p><p>{run.screening.preview || "初筛整理未记录"}</p></button>{run.attempts.length ? <button type="button" className="candidateExpand" aria-expanded={expanded} aria-controls={queryListId} onClick={() => onToggleRetrievalAgent(run.id)}>{expanded ? "收起查询" : `展开 ${run.attempts.length} 次查询`}</button> : null}{expanded ? <ol id={queryListId}>{run.attempts.map((attempt, index) => { const query = queryAttemptItem(attempt, roundIndex, branch.branchId); return <li key={attempt.id}><button type="button" onClick={() => onOpen(query, "business")}><span>{String(index + 1).padStart(2, "0")}</span><strong>{attempt.queryLabel}</strong><p>{attempt.resultCount && attempt.resultCount > 0 ? `${attempt.resultCount} 条` : attempt.status === "empty" ? "无结果" : attempt.status === "failure" ? "失败" : attempt.status === "interrupted" ? "构建中断" : "查看结果"}</p></button></li>; })}</ol> : null}</li>;
        })}
      </ol>
    </li>
    {tail.map((story) => <StoryItem key={story.id} story={story} roundIndex={roundIndex} branchId={branch.branchId} onOpen={onOpen} />)}
  </ol>;
}

function StoryItem({ story, roundIndex, branchId, onOpen }: { story: StoryNode; roundIndex?: number; branchId?: number; onOpen: Props["onOpen"] }) {
  const item = storyItem(story, roundIndex, branchId);
  const card = story.card.primary || story.card.secondary.length ? story.card : { primary: { value: "查看详情" }, secondary: [] };
  const label = roleLabel(story.role);
  if (story.decision) return <li className="mobileDecisionItem"><MobileDecision item={item} decision={story.decision} fallbackLabel={label} fallbackCard={card} onOpen={onOpen} /></li>;
  return <li><button type="button" data-focus-return={`${story.id}:mobile`} onClick={() => onOpen(item, "business")}><span>{label}</span>{story.title !== label ? <strong>{story.title}</strong> : null}<CardFields card={card} /></button>{story.artifactRef ? <button type="button" className="candidateExpand artifactAction" data-focus-return={`${story.id}:artifact-mobile`} onClick={() => onOpen(item, "artifact")}><FileText size={14} />{story.role === "round-result" ? "查看本轮产出脚本表" : "查看完整候选脚本"}</button> : null}</li>;
}

function MobileDecision({ item, decision, fallbackLabel, fallbackCard, onOpen }: { item: CanvasItem; decision?: AgentDecisionProjection; fallbackLabel: string; fallbackCard: StoryNode["card"]; onOpen: Props["onOpen"] }) {
  const card = decision?.card || fallbackCard;
  const artifactRef = item.itemType === "story" ? item.artifactRef : undefined;
  return <div className="mobileDecision"><button type="button" data-focus-return={`${item.id}:mobile`} onClick={() => onOpen(item, "business")}><span>{decision ? `${decision.actor.label} · ${decisionTypeLabel(decision.decisionType)}` : fallbackLabel}</span>{decision ? <em>{authorityLabel(decision.authority)}</em> : null}<strong>{item.title}</strong><CardFields card={card} /></button>{artifactRef ? <button type="button" className="candidateExpand artifactAction" data-focus-return={`${item.id}:artifact-mobile`} onClick={() => onOpen(item, "artifact")}><FileText size={14} />查看完整候选脚本</button> : null}</div>;
}

function roleLabel(role: StoryNode["role"]) {
  return ({ "planning-analysis": "创作规划解析", goal: "本轮目标", plan: "实现规划", "multipath-review": "多方案评审", "multipath-decision": "主 Agent 多路决策", "round-evaluation": "主脚本整体评审", "round-result": "本轮产出", "branch-task": "实现任务", "data-decision": "数据取舍", "candidate-output": "候选脚本", "domain-output": "领域事实" } as Partial<Record<StoryNode["role"], string>>)[role] || "运行步骤";
}

function modeLabel(mode: BranchStory["retrievalStage"]["observedMode"]) { return ({ single: "单项取数", sequential: "依次取数", parallel: "并行取数", mixed: "混合执行", unknown: "执行先后未确认" } as const)[mode]; }