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

"use client";

import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import {
  ArrowDownToLine,
  ArrowUpFromLine,
  Braces,
  Check,
  ChevronRight,
  CircleDot,
  Database,
  FileCode2,
  LoaderCircle,
  RefreshCw,
  Search,
  X,
} from "lucide-react";
import { fetchExecution, fetchRuns, fetchTaskDetail } from "@/lib/api";
import { buildTaskForest, statusLabel, taskKindLabel, type TaskBranch } from "@/lib/task-tree";
import type { AttemptDetail, ExecutionView, PlannerTurn, RunSummary, TaskDetail, TaskNode } from "@/lib/types";

type DetailTab = "lifecycle" | "attempt" | "data" | "code";

function shortId(value: string | null) {
  return value ? `${value.slice(0, 8)}…` : "—";
}

function formatTime(value: string) {
  if (!value) return "—";
  const parsed = new Date(value);
  return Number.isNaN(parsed.valueOf()) ? value : parsed.toLocaleTimeString("zh-CN", { hour: "2-digit", minute: "2-digit", second: "2-digit" });
}

function JsonBlock({ value }: { value: unknown }) {
  return <pre className="json-block">{JSON.stringify(value, null, 2)}</pre>;
}

function Empty({ children }: { children: React.ReactNode }) {
  return <p className="empty-copy">{children}</p>;
}

function StatusMark({ status }: { status: string }) {
  const complete = ["completed", "passed", "accept", "submitted", "succeeded"].includes(status);
  return <span className={`status-mark status-${status}`}>{complete ? <Check size={11} /> : <CircleDot size={10} />}{statusLabel(status)}</span>;
}

function Header({ runs, view, selectedId, onSelect, onRefresh, refreshing }: {
  runs: RunSummary[];
  view: ExecutionView;
  selectedId: number;
  onSelect: (id: number) => void;
  onRefresh: () => void;
  refreshing: boolean;
}) {
  return <header className="mission-header">
    <div className="mission-kicker">
      <span>REAL EXECUTION OBSERVER</span>
      <span>TaskLedger revision {view.run.revision}</span>
      <span>每 15 秒只读刷新</span>
    </div>
    <div className="mission-title-row">
      <div>
        <p>创作总目标</p>
        <h1>{view.run.title}</h1>
      </div>
      <div className="run-actions">
        <label>
          <span>真实 Script Build</span>
          <select value={selectedId} onChange={(event) => onSelect(Number(event.target.value))}>
            {runs.map((run) => <option key={run.script_build_id} value={run.script_build_id}>#{run.script_build_id} · {run.task_count} Tasks</option>)}
          </select>
        </label>
        <button onClick={onRefresh} aria-label="刷新真实运行" title="刷新真实运行"><RefreshCw className={refreshing ? "spin" : ""} size={17} /></button>
      </div>
    </div>
    <div className="mission-state">
      <span><b>{view.run.checkpoint}</b></span>
      <span>当前缺口：{view.run.current_gap}</span>
      <span>{view.run.task_count} Tasks / {view.run.attempt_count} Attempts / {view.run.planner_turn_count} Planner moves</span>
    </div>
  </header>;
}

function PlannerAxis({ turns, selectedId, tasks, onSelect }: {
  turns: PlannerTurn[];
  selectedId: string | null;
  tasks: TaskNode[];
  onSelect: (id: string) => void;
}) {
  const selectedRef = useRef<HTMLButtonElement | null>(null);
  const taskById = useMemo(() => new Map(tasks.map((task) => [task.task_id, task])), [tasks]);
  useEffect(() => {
    selectedRef.current?.scrollIntoView({ block: "nearest" });
  }, [selectedId]);
  return <section className="planner-panel" aria-label="全局 Planner 主轴">
    <div className="panel-heading">
      <div><span>01 / GLOBAL PLANNER</span><h2>全局 Planner 在树上移动焦点</h2></div>
      <small>选择一步，右侧回看当时已经长出的 Task</small>
    </div>
    <div className="planner-equation">
      <b>PLAN</b><i>→</i><b>EXECUTE</b><i>→</i><b>VALIDATE</b><i>→</i><b>DECIDE</b><i>↻</i>
    </div>
    <ol className="planner-turns">
      {turns.map((turn) => {
        const focus = turn.focus_task_id ? taskById.get(turn.focus_task_id) : null;
        const active = turn.turn_id === selectedId;
        return <li key={turn.turn_id}>
          <button ref={active ? selectedRef : undefined} className={active ? "active" : ""} onClick={() => onSelect(turn.turn_id)}>
            <span className="turn-index">{String(turn.order).padStart(2, "0")}</span>
            <span className="turn-copy">
              <small>{turn.phase.toUpperCase()} · {formatTime(turn.created_at)}</small>
              <strong>{turn.action_label}</strong>
              <em>{focus ? `${focus.display_path} ${taskKindLabel(focus.task_kind)}` : "创作总目标"}</em>
            </span>
            <ChevronRight size={14} />
          </button>
        </li>;
      })}
    </ol>
  </section>;
}

function TaskRecord({ task, selected, focused, changed, onSelect }: {
  task: TaskNode;
  selected: boolean;
  focused: boolean;
  changed: boolean;
  onSelect: (task: TaskNode) => void;
}) {
  return <button
    className={`task-record ${task.task_kind === "root" ? "root-task" : ""} ${selected ? "selected" : ""} ${focused ? "focused" : ""} ${changed ? "changed" : ""}`}
    onClick={() => onSelect(task)}
  >
    <span className="task-path">{task.display_path}</span>
    <span className="task-body">
      <small>{taskKindLabel(task.task_kind)}</small>
      <strong>{task.objective}</strong>
      <em>{task.attempt_count ? `${task.attempt_count} Attempt` : "尚未执行"}{task.validation_count ? ` · ${task.validation_count} Validation` : ""}</em>
    </span>
    <StatusMark status={task.status} />
  </button>;
}

function TaskBranchView({ branch, selectedTaskId, focusedId, changedIds, onSelect }: {
  branch: TaskBranch;
  selectedTaskId: string | null;
  focusedId: string | null;
  changedIds: Set<string>;
  onSelect: (task: TaskNode) => void;
}) {
  return <li className="task-branch">
    <TaskRecord
      task={branch.task}
      selected={selectedTaskId === branch.task.task_id}
      focused={focusedId === branch.task.task_id}
      changed={changedIds.has(branch.task.task_id)}
      onSelect={onSelect}
    />
    {branch.children.length ? <ol className="task-children">{branch.children.map((child) => <TaskBranchView
      key={child.task.task_id}
      branch={child}
      selectedTaskId={selectedTaskId}
      focusedId={focusedId}
      changedIds={changedIds}
      onSelect={onSelect}
    />)}</ol> : null}
  </li>;
}

function PlannerTurnNote({ turn, taskById }: { turn: PlannerTurn; taskById: Map<string, TaskNode> }) {
  const focus = turn.focus_task_id ? taskById.get(turn.focus_task_id) : null;
  return <article className="turn-note">
    <div><span>Planner move {turn.order}</span><StatusMark status={turn.status} /></div>
    <h3>{turn.action_label}{focus ? `：${focus.display_path} ${taskKindLabel(focus.task_kind)}` : ""}</h3>
    <p>{turn.summary}</p>
    <details>
      <summary>查看这一步的可观察说明与工具输入</summary>
      <h4>模型主动输出的说明（不是隐藏思维链）</h4>
      <pre>{turn.observable_reasoning || "本步没有输出文字说明。"}</pre>
      <h4>{turn.tool_name} arguments</h4>
      <JsonBlock value={turn.tool_arguments} />
      <h4>工具结果摘要</h4>
      <pre>{turn.result_summary}</pre>
    </details>
  </article>;
}

function TaskTreePanel({ view, turn, query, onQuery, selectedTaskId, onSelect }: {
  view: ExecutionView;
  turn: PlannerTurn | null;
  query: string;
  onQuery: (value: string) => void;
  selectedTaskId: string | null;
  onSelect: (task: TaskNode) => void;
}) {
  const allVisible = useMemo(() => new Set(turn?.visible_task_ids ?? view.tasks.map((task) => task.task_id)), [turn, view.tasks]);
  const matching = useMemo(() => {
    if (!query.trim()) return allVisible;
    const needle = query.trim().toLowerCase();
    const matches = new Set<string>();
    const byId = new Map(view.tasks.map((task) => [task.task_id, task]));
    for (const task of view.tasks) {
      if (!allVisible.has(task.task_id)) continue;
      if (`${task.display_path} ${task.task_kind} ${task.objective}`.toLowerCase().includes(needle)) {
        let current: TaskNode | undefined = task;
        while (current) {
          matches.add(current.task_id);
          current = current.parent_task_id ? byId.get(current.parent_task_id) : undefined;
        }
      }
    }
    return matches;
  }, [allVisible, query, view.tasks]);
  const forest = useMemo(() => buildTaskForest(view.tasks, matching), [matching, view.tasks]);
  const changedIds = useMemo(() => new Set(turn?.affected_task_ids ?? []), [turn]);
  const taskById = useMemo(() => new Map(view.tasks.map((task) => [task.task_id, task])), [view.tasks]);
  return <section className="tree-panel" aria-label="动态 Task 树">
    <div className="panel-heading tree-heading">
      <div><span>02 / DYNAMIC TASK TREE</span><h2>围绕创作总目标动态生长</h2></div>
      <label className="tree-search"><Search size={15} /><input value={query} onChange={(event) => onQuery(event.target.value)} placeholder="搜索 Task…" />{query ? <button onClick={() => onQuery("")}><X size={13} /></button> : null}</label>
    </div>
    {turn ? <PlannerTurnNote turn={turn} taskById={taskById} /> : null}
    <div className="tree-key"><span><i className="key-focus" />Planner 当前焦点</span><span><i className="key-change" />本步涉及</span><span><i />当前 ledger 状态</span></div>
    <div className="tree-scroll">
      {forest.length ? <ol className="task-tree">{forest.map((branch) => <TaskBranchView
        key={branch.task.task_id}
        branch={branch}
        selectedTaskId={selectedTaskId}
        focusedId={turn?.focus_task_id ?? null}
        changedIds={changedIds}
        onSelect={onSelect}
      />)}</ol> : <Empty>没有符合条件的 Task。</Empty>}
    </div>
  </section>;
}

function LifecycleView({ detail }: { detail: TaskDetail }) {
  return <div className="detail-section">
    <div className="loop-line"><b>Planner</b><i>创建 / 决定</i><b>Worker</b><i>提交</i><b>Validator</b><i>验收</i><b>Planner</b><i>↻</i></div>
    <ol className="lifecycle-list">{detail.lifecycle.map((event) => <li key={event.event_id}>
      <span className={`event-glyph event-${event.kind}`} />
      <div><small>{formatTime(event.created_at)} · {event.kind}</small><strong>{event.title}</strong><p>{event.summary || "无补充说明"}</p></div>
      <StatusMark status={event.status} />
    </li>)}</ol>
  </div>;
}

function AttemptLoop({ attempt }: { attempt: AttemptDetail | null }) {
  if (!attempt) return <Empty>这个 Task 还没有 Attempt。</Empty>;
  return <div className="detail-section">
    <div className="attempt-meta"><span>{attempt.worker_preset}</span><span>{attempt.total_tokens.toLocaleString()} tokens</span><span>¥/cost {attempt.total_cost.toFixed(4)}</span><StatusMark status={attempt.status} /></div>
    <ol className="worker-loop">{attempt.steps.map((step, index) => <li key={`${step.sequence}-${step.step_kind}-${index}`} className={`step-${step.step_kind}`}>
      <span>{String(index + 1).padStart(2, "0")}</span>
      <div><small>{step.role} · seq {step.sequence}</small><strong>{step.title}</strong>{step.text ? <pre>{step.text}</pre> : null}{step.tool_arguments ? <JsonBlock value={step.tool_arguments} /> : null}</div>
    </li>)}</ol>
  </div>;
}

function DataView({ detail }: { detail: TaskDetail }) {
  const groups = [
    { icon: ArrowDownToLine, title: "进入 Task 的数据", note: "在冻结输入闭包中，不代表 Worker 一定逐项读取", values: detail.data_usage.inherited_inputs },
    { icon: Database, title: "Worker 确认读取", note: "来自真实 worker_trace 的 read/get/search/query 工具调用", values: detail.data_usage.confirmed_reads },
    { icon: ArrowUpFromLine, title: "Task 产生的数据", note: "来自 Attempt submission 的 Artifact 引用", values: detail.data_usage.produced_outputs },
    { icon: Check, title: "采用与回退", note: "来自 PlannerDecision 持久化记录", values: detail.data_usage.adoption },
  ];
  return <div className="data-groups">{groups.map((group) => <section key={group.title}>
    <header><group.icon size={16} /><div><h3>{group.title}</h3><p>{group.note}</p></div><b>{group.values.length}</b></header>
    {group.values.length ? group.values.map((value, index) => <JsonBlock key={index} value={value} />) : <Empty>没有对应记录。</Empty>}
  </section>)}</div>;
}

function CodePromptView({ detail, attempt }: { detail: TaskDetail; attempt: AttemptDetail | null }) {
  const explanations = attempt?.steps.filter((step) => step.step_kind === "explanation") ?? [];
  return <div className="detail-section code-view">
    <section><h3><Braces size={16} /> Process / Contract</h3><p>Task 的执行边界与输入输出约束。</p>{detail.contract ? <JsonBlock value={detail.contract} /> : <Empty>Root Task 没有独立 ScriptTaskContract。</Empty>}</section>
    <section><h3><FileCode2 size={16} /> Prompt</h3><p>当前 Attempt 实际持久化的 Worker system prompt。</p><pre>{attempt?.prompt || "尚无 Worker Prompt。"}</pre></section>
    <section><h3><CircleDot size={16} /> Observable reasoning</h3><p>只展示模型主动输出文字、工具动作和验收理由；不把它命名为隐藏思维链。</p>{explanations.length ? explanations.map((step, index) => <pre key={index}>{step.text}</pre>) : <Empty>这个 Attempt 没有主动输出说明文字。</Empty>}</section>
  </div>;
}

function TaskInspector({ detail, loading, tab, onTab, attemptId, onAttempt, onClose }: {
  detail: TaskDetail | null;
  loading: boolean;
  tab: DetailTab;
  onTab: (tab: DetailTab) => void;
  attemptId: string | null;
  onAttempt: (id: string) => void;
  onClose: () => void;
}) {
  if (loading || !detail) return <aside className="task-inspector"><div className="drawer-loading"><LoaderCircle className="spin" /><span>读取真实 Task Trace…</span><button onClick={onClose}><X /></button></div></aside>;
  const attempt = detail.attempts.find((item) => item.attempt_id === attemptId) ?? detail.attempts.at(-1) ?? null;
  return <aside className="task-inspector">
    <header className="drawer-header">
      <div><span>{detail.task.display_path} / {taskKindLabel(detail.task.task_kind)}</span><h2>{detail.task.objective}</h2></div>
      <button onClick={onClose} aria-label="关闭 Task 详情"><X size={18} /></button>
    </header>
    <div className="drawer-facts"><StatusMark status={detail.task.status} /><code>{shortId(detail.task.task_id)}</code><span>返回给 {shortId(detail.task.parent_task_id)}</span></div>
    {detail.attempts.length ? <div className="attempt-switch"><span>Attempt</span>{detail.attempts.map((item, index) => <button key={item.attempt_id} className={item.attempt_id === attempt?.attempt_id ? "active" : ""} onClick={() => onAttempt(item.attempt_id)}>{index + 1} · {statusLabel(item.status)}</button>)}</div> : null}
    <nav className="drawer-tabs">
      {([ ["lifecycle", "Task 生命周期"], ["attempt", "Worker Loop"], ["data", "Data 使用"], ["code", "Code / Prompt"] ] as Array<[DetailTab, string]>).map(([id, label]) => <button key={id} className={tab === id ? "active" : ""} onClick={() => onTab(id)}>{label}</button>)}
    </nav>
    <div className="drawer-scroll">
      {tab === "lifecycle" ? <LifecycleView detail={detail} /> : null}
      {tab === "attempt" ? <AttemptLoop attempt={attempt} /> : null}
      {tab === "data" ? <DataView detail={detail} /> : null}
      {tab === "code" ? <CodePromptView detail={detail} attempt={attempt} /> : null}
    </div>
  </aside>;
}

function LoadingState() {
  return <main className="center-state"><LoaderCircle className="spin" /><h1>正在读取真实 E2E 持久化数据</h1><p>TaskLedger · Planner Trace · Worker Attempt</p></main>;
}

function ErrorState({ message, retry }: { message: string; retry: () => void }) {
  return <main className="center-state"><h1>真实运行数据暂时不可读</h1><p>{message}</p><button onClick={retry}><RefreshCw size={15} />重试</button></main>;
}

export function MissionControl() {
  const [runs, setRuns] = useState<RunSummary[]>([]);
  const [selectedRunId, setSelectedRunId] = useState(900031);
  const [view, setView] = useState<ExecutionView | null>(null);
  const [selectedTurnId, setSelectedTurnId] = useState<string | null>(null);
  const [selectedTaskId, setSelectedTaskId] = useState<string | null>(null);
  const [detail, setDetail] = useState<TaskDetail | null>(null);
  const [detailLoading, setDetailLoading] = useState(false);
  const [detailTab, setDetailTab] = useState<DetailTab>("lifecycle");
  const [attemptId, setAttemptId] = useState<string | null>(null);
  const [query, setQuery] = useState("");
  const [loading, setLoading] = useState(true);
  const [refreshing, setRefreshing] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const loadExecution = useCallback(async (runId: number, quiet = false) => {
    if (!quiet) setLoading(true);
    else setRefreshing(true);
    try {
      const execution = await fetchExecution(runId);
      setView(execution);
      setSelectedTurnId((current) => current && execution.planner_turns.some((turn) => turn.turn_id === current) ? current : execution.planner_turns.at(-1)?.turn_id ?? null);
      setError(null);
    } catch (reason) {
      setError(reason instanceof Error ? reason.message : String(reason));
    } finally {
      setLoading(false);
      setRefreshing(false);
    }
  }, []);

  useEffect(() => {
    const controller = new AbortController();
    fetchRuns(controller.signal).then((available) => {
      setRuns(available);
      const preferred = available.find((run) => run.script_build_id === 900031) ?? available[0];
      if (!preferred) throw new Error("没有发现真实持久化 Run");
      setSelectedRunId(preferred.script_build_id);
      return loadExecution(preferred.script_build_id);
    }).catch((reason) => {
      if (reason instanceof DOMException && reason.name === "AbortError") return;
      setError(reason instanceof Error ? reason.message : String(reason));
      setLoading(false);
    });
    return () => controller.abort();
  }, [loadExecution]);

  useEffect(() => {
    const timer = window.setInterval(() => void loadExecution(selectedRunId, true), 15_000);
    return () => window.clearInterval(timer);
  }, [loadExecution, selectedRunId]);

  useEffect(() => {
    if (!selectedTaskId) {
      setDetail(null);
      return;
    }
    const controller = new AbortController();
    setDetailLoading(true);
    fetchTaskDetail(selectedRunId, selectedTaskId, controller.signal).then((value) => {
      setDetail(value);
      setAttemptId(value.attempts.at(-1)?.attempt_id ?? null);
    }).catch((reason) => {
      if (!(reason instanceof DOMException && reason.name === "AbortError")) setError(reason instanceof Error ? reason.message : String(reason));
    }).finally(() => setDetailLoading(false));
    return () => controller.abort();
  }, [selectedRunId, selectedTaskId]);

  const changeRun = (id: number) => {
    setSelectedRunId(id);
    setSelectedTaskId(null);
    setDetail(null);
    setSelectedTurnId(null);
    void loadExecution(id);
  };
  const selectedTurn = view?.planner_turns.find((turn) => turn.turn_id === selectedTurnId) ?? null;
  if (loading && !view) return <LoadingState />;
  if (error && !view) return <ErrorState message={error} retry={() => void loadExecution(selectedRunId)} />;
  if (!view) return null;
  return <main className={`execution-observer ${selectedTaskId ? "with-drawer" : ""}`}>
    <Header runs={runs} view={view} selectedId={selectedRunId} onSelect={changeRun} onRefresh={() => void loadExecution(selectedRunId, true)} refreshing={refreshing} />
    <div className="observer-grid">
      <PlannerAxis turns={view.planner_turns} selectedId={selectedTurnId} tasks={view.tasks} onSelect={setSelectedTurnId} />
      <TaskTreePanel view={view} turn={selectedTurn} query={query} onQuery={setQuery} selectedTaskId={selectedTaskId} onSelect={(task) => { setSelectedTaskId(task.task_id); setDetailTab("lifecycle"); }} />
    </div>
    <footer className="observer-foot"><span>{view.snapshot_basis}</span><span>root trace {shortId(view.run.root_trace_id)}</span><span>真实数据 · 只读</span></footer>
    {selectedTaskId ? <TaskInspector detail={detail} loading={detailLoading} tab={detailTab} onTab={setDetailTab} attemptId={attemptId} onAttempt={setAttemptId} onClose={() => setSelectedTaskId(null)} /> : null}
  </main>;
}