feat(web): live step list, option choice card and inline approval card; drop run mode switch

- session page shows the agent.plan TodoList (drawer: one-line progress); options and approval
  cards sit at their step; composer has a "先看方案再执行" toggle instead of the mode switch
- settings expose option timeout, timeout action and approval validity; quick goals follow glossary

Co-Authored-By: Claude Opus 5.5 <[email protected]>

apps/web/app/components/agent/mock.ts

@@ -1,5 +1,5 @@
-import type { AgentRunEvent, AgentRunEventBody, AgentUsageTotals } from "@umt/contracts";
-import type { AgentMode, AgentRunView, GoalReport, RunMessage, RunSnapshot } from "~/api/agent.ts";
+import type { AgentPlanStep, AgentRunEvent, AgentRunEventBody, AgentUsageTotals } from "@umt/contracts";
+import type { AgentRunView, AgentSessionOptions, GoalReport, RunMessage, RunSnapshot } from "~/api/agent.ts";
 
 // Agent 会话 mock(W2-D 端点就绪前开发用;?mock=1 打开)。事件按时间逐步"到达",模拟流式输出。
 
@@ -33,7 +33,11 @@ function chunks(text: string, size = 6): string[] {
   return out;
 }
 
-function script(goal: string, mode: AgentMode): Step[] {
+const MOCK_DECISION = "00000000-0000-4000-8000-00000000d001";
+const MOCK_APPROVAL = "00000000-0000-4000-8000-00000000a001";
+const MOCK_PLAN = "00000000-0000-4000-8000-00000000b001";
+
+function script(goal: string, opts: AgentSessionOptions): Step[] {
   const s: Step[] = [];
   let t = 0;
   const push = (dt: number, body: AgentRunEventBody) => {
@@ -43,7 +47,22 @@ function script(goal: string, mode: AgentMode): Step[] {
   const say = (text: string) => {
     for (const c of chunks(text)) push(60, { type: "text_delta", delta: c });
   };
+  const steps: AgentPlanStep[] = [
+    { id: "s1", title: "查本地库存和版本目标", status: "running", note: null },
+    { id: "s2", title: "在站点搜 4K 候选", status: "pending", note: null },
+    { id: "s3", title: "选资源并生成下载计划", status: "pending", note: null },
+    { id: "s4", title: "提交下载", status: "pending", note: null },
+  ];
+  let revision = 0;
+  const plan = (id: string, status: AgentPlanStep["status"], next?: string) => {
+    for (const st of steps) {
+      if (st.id === id) st.status = status;
+      if (next && st.id === next) st.status = "running";
+    }
+    push(150, { type: "plan_updated", steps: steps.map((x) => ({ ...x })), revision: ++revision });
+  };
   push(0, { type: "run_started", goal, resumed: false });
+  push(100, { type: "plan_updated", steps: steps.map((x) => ({ ...x })), revision: ++revision });
   say("先确认本地库存与版本目标，再去站点找候选。");
   push(400, {
     type: "tool_call_start",
@@ -60,6 +79,7 @@ function script(goal: string, mode: AgentMode): Step[] {
     outputSummary: "作品 沙丘：第二部 (2024):已有 1080p WEB-DL(已核验);Slot「archival」缺 2160p;无下载中任务",
     recovery: false,
   });
+  plan("s1", "done", "s2");
   push(300, {
     type: "tool_call_start",
     toolCallId: "t2",
@@ -79,53 +99,102 @@ function script(goal: string, mode: AgentMode): Step[] {
   push(300, { type: "compaction", phase: "start", reason: "threshold" });
   push(700, { type: "compaction", phase: "end", reason: "threshold", status: "completed" });
   say("①符合 archival 的硬条件(REMUX、HDR),免费截止时间在 6 小时后。");
-  if (mode === "execute") {
+  plan("s2", "done", "s3");
+  if (opts.proposeFirst) {
     push(300, {
-      type: "tool_call_start",
-      toolCallId: "t3",
-      capabilityId: "download.plan",
-      inputSummary: '{"sourceReleaseId":"…c3f1","slot":"archival"}',
-      recovery: false,
+      type: "options_proposed",
+      invocationId: "mock-options",
+      decisionId: MOCK_DECISION,
+      question: "收哪一个 4K 版本？",
+      options: [
+        {
+          id: "a",
+          title: "① REMUX 78.4 GB",
+          summary: "画质最好，符合 archival 的硬条件；免费还剩 6 小时。",
+          risks: ["缓存卷使用率会到 86%"],
+          estimatedCost: "78.4 GB",
+        },
+        {
+          id: "b",
+          title: "② WEB-DL 24.1 GB",
+          summary: "体积小三分之二，不满足 archival 的 REMUX 条件。",
+          risks: ["之后可能还要升级"],
+          estimatedCost: "24.1 GB",
+        },
+      ],
+      recommendedId: "a",
+      stepId: "s3",
+      expiresAt: iso(Date.now() + 1_800_000),
+      timeoutAction: "recommended",
     });
-    push(800, {
-      type: "tool_call_end",
-      toolCallId: "t3",
-      capabilityId: "download.plan",
-      isError: false,
-      outputSummary: "计划已预留:78.4 GB,缓存卷 cache-a 使用率 71% → 预计 86%(硬阈值 90%)",
-      recovery: false,
-    });
-    push(300, {
-      type: "tool_call_rejected",
-      toolCallId: "t4",
-      toolName: "qb_delete_torrent",
-      capabilityId: "download.cleanup",
-      reason: "未授权:删除下载器任务不在本次委托范围内(需要显式授权)",
-    });
-    push(300, {
-      type: "tool_call_start",
-      toolCallId: "t5",
-      capabilityId: "download.submit",
-      inputSummary: '{"planId":"…9a2e"}',
-      recovery: false,
-    });
-    push(1000, {
-      type: "tool_call_end",
-      toolCallId: "t5",
-      capabilityId: "download.submit",
-      isError: false,
-      outputSummary: "已提交到 qb-main,标签 umt-managed,任务 ID …41d0",
-      recovery: false,
-    });
-    say("已提交 4K REMUX 下载。完成后会自动核验并 Copy 入库，原 1080p 保留。");
-  } else {
-    say("只要方案：建议提交①，预计占用缓存 78.4 GB，完成后 Copy 入库、保留 1080p。未执行任何写操作。");
+    push(200, { type: "run_completed", finalText: "", usage: USAGE });
+    return s;
   }
+  push(300, {
+    type: "tool_call_start",
+    toolCallId: "t3",
+    capabilityId: "download.plan",
+    inputSummary: '{"sourceReleaseId":"…c3f1","slot":"archival"}',
+    recovery: false,
+  });
+  push(800, {
+    type: "tool_call_end",
+    toolCallId: "t3",
+    capabilityId: "download.plan",
+    isError: false,
+    outputSummary: "计划已预留:78.4 GB,缓存卷 cache-a 使用率 71% → 预计 86%(硬阈值 90%)",
+    recovery: false,
+  });
+  plan("s3", "done", "s4");
+  push(300, {
+    type: "tool_call_rejected",
+    toolCallId: "t4",
+    toolName: "qb_delete_torrent",
+    capabilityId: "download.cleanup",
+    reason: "未授权:删除下载器任务不在本次委托范围内(需要显式授权)",
+  });
+  push(300, {
+    type: "tool_call_start",
+    toolCallId: "t5",
+    capabilityId: "download.submit",
+    inputSummary: '{"planId":"…9a2e"}',
+    recovery: false,
+  });
+  push(1000, {
+    type: "tool_call_end",
+    toolCallId: "t5",
+    capabilityId: "download.submit",
+    isError: false,
+    outputSummary: '{"error":{"code":"unauthorized","message":"已在步骤处发起审批,等待管理员批准"}}',
+    recovery: false,
+  });
+  push(200, {
+    type: "approval_requested",
+    approvalId: MOCK_APPROVAL,
+    decisionId: null,
+    invocationId: "mock-submit",
+    capabilityId: "download.submit",
+    planType: "acquisition_plan",
+    planId: MOCK_PLAN,
+    payloadHash: "sha256:9a2e…",
+    expectedRevision: 1,
+    riskLevel: "high",
+    summary: "下载《沙丘：第二部》:Dune.Part.Two.2024.2160p.UHD.BluRay.REMUX(78.4 GB)",
+    stepId: "s4",
+    expiresAt: iso(Date.now() + 86_400_000),
+  });
+  say("提交下载需要审批，已在「提交下载」这一步发起。批准后继续。");
   push(200, { type: "run_completed", finalText: "", usage: USAGE });
   return s;
 }
 
-function baseRun(id: string, goal: string, mode: AgentMode, createdAt: number, status: AgentRunView["status"]) {
+function baseRun(
+  id: string,
+  goal: string,
+  opts: AgentSessionOptions,
+  createdAt: number,
+  status: AgentRunView["status"],
+) {
   return {
     id,
     createdAt: iso(createdAt),
@@ -138,7 +207,7 @@ function baseRun(id: string, goal: string, mode: AgentMode, createdAt: number, s
     provider: "anthropic",
     model: "claude-sonnet",
     thinkingLevel: "medium",
-    scope: { mode },
+    scope: { proposeFirst: opts.proposeFirst, interactive: true },
     budget: { maxToolCalls: 20, maxTokens: 200_000, maxDurationSec: 600, maxCostUsd: 1 },
     usage: {},
     evidenceVersion: null,
@@ -151,18 +220,17 @@ function baseRun(id: string, goal: string, mode: AgentMode, createdAt: number, s
     startedAt: iso(createdAt),
     finishedAt: null,
     createdBy: "admin",
-    mode,
     dedupeKey: null,
     depth: 0,
     spawnReason: null,
   } satisfies AgentRunView;
 }
 
-function add(goal: string, mode: AgentMode, startedAt: number, n: number): Entry {
+function add(goal: string, opts: AgentSessionOptions, startedAt: number, n: number): Entry {
   const id = uuid(n);
   const e: Entry = {
-    run: baseRun(id, goal, mode, startedAt, "running"),
-    steps: script(goal, mode),
+    run: baseRun(id, goal, opts, startedAt, "running"),
+    steps: script(goal, opts),
     startedAt,
     abortedAt: null,
     appended: [],
@@ -175,9 +243,9 @@ function seed() {
   if (seeded) return;
   seeded = true;
   const now = Date.now();
-  add("把 沙丘：第二部 的 4K 收进来", "execute", now - 3_600_000, 1);
-  add("对比一下 奥本海默 现有版本和站点上的 4K,只给方案", "plan_only", now - 7_200_000, 2);
-  const failed = add("检查 qb-main 为什么占满磁盘", "execute", now - 86_400_000, 3);
+  add("把 沙丘：第二部 的 4K 收进来", { proposeFirst: false }, now - 3_600_000, 1);
+  add("对比一下 奥本海默 现有版本和站点上的 4K", { proposeFirst: true }, now - 7_200_000, 2);
+  const failed = add("检查 qb-main 为什么占满磁盘", { proposeFirst: false }, now - 86_400_000, 3);
   failed.steps = [
     { delayMs: 0, body: { type: "run_started", goal: failed.run.goal, resumed: false } },
     {
@@ -356,8 +424,8 @@ export function mockEventsAfter(id: string, after: number): AgentRunEvent[] {
   return revealed(e).filter((x) => x.seq > after);
 }
 
-export function mockCreateRun(goal: string, mode: AgentMode): AgentRunView {
+export function mockCreateRun(goal: string, opts: AgentSessionOptions): AgentRunView {
   seed();
-  const e = add(goal, mode, Date.now(), store.size + 1);
+  const e = add(goal, opts, Date.now(), store.size + 1);
   return view(e);
 }