refactor(chat): extract launch menu from chat page

Author: Aparencia

app/src/components/chat/ChatLaunchMenu.test.tsx

@@ -0,0 +1,79 @@
+// @vitest-environment jsdom
+/**
+ * @ai-context ChatLaunchMenu.test.tsx —— T13-b「拆件」提交的**行为等价性证据**（B7）。
+ *
+ * Why（这条判据为什么必须在拆件提交里）：`ChatPage.tsx` 只有间接覆盖，而拆件动的是可交互的
+ * JSX（开合状态 + 两处回调 + 三个 testid）。若拆件与迁移合并成一个提交，「行为等价」就只能靠
+ * 读 diff 断言 —— B7 的裁决理由逐字就是这一点。故本文件在**拆件提交**里落地，并把拆件前的
+ * 三条可观察行为（开合 / 选中 / 点空白收起）钉成判据。
+ *
+ * 五条判据：
+ *   ① 初始**收起**：面板与两个条目都不在树上（`queryByTestId` 为 null），只有触发钮；
+ *   ② 点触发钮 ⇒ 面板出现，且**两个条目都在**、`data-app-menu` 标记保留（拆件前逐字有）；
+ *   ③ 点「AI 精修」⇒ `onLaunch("refine")` **恰好一次**，且面板**自行收起**；
+ *   ④ 点「AI 知识补充」⇒ `onLaunch("enrich")` **恰好一次**，且面板**自行收起**；
+ *   ⑤ 点透明点击层 ⇒ `onLaunch` **零次**（它不是选中），面板收起。
+ *
+ * 副作用：只挂 React 树（jsdom），不读 store、不发 IPC。边界：本仓未装 jest-dom ⇒ 只用原生 DOM API。
+ */
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import ChatLaunchMenu from "./ChatLaunchMenu";
+
+afterEach(cleanup);
+
+const OPEN = "task-launch-open";
+const MENU = "task-launch-menu";
+const REFINE = "task-launch-refine";
+const ENRICH = "task-launch-enrich";
+
+describe("ChatLaunchMenu：拆件后的行为与拆件前逐条一致", () => {
+  it("① 初始收起：只有触发钮在树上，面板与两个条目都不存在", () => {
+    render(<ChatLaunchMenu onLaunch={() => undefined} />);
+    expect(screen.getByTestId(OPEN).textContent).toBe("✨ 发起任务 ▾");
+    expect(screen.queryByTestId(MENU)).toBeNull();
+    expect(screen.queryByTestId(REFINE)).toBeNull();
+    expect(screen.queryByTestId(ENRICH)).toBeNull();
+  });
+
+  it("② 点触发钮 ⇒ 面板打开；两个条目都在；`data-app-menu` 标记保留", () => {
+    render(<ChatLaunchMenu onLaunch={() => undefined} />);
+    fireEvent.click(screen.getByTestId(OPEN));
+    const menu = screen.getByTestId(MENU);
+    expect(menu.getAttribute("data-app-menu")).toBe("");
+    expect(screen.getByTestId(REFINE).textContent).toBe("✨ AI 精修（会话 → 精修成笔记）");
+    expect(screen.getByTestId(ENRICH).textContent).toBe("📚 AI 知识补充（笔记 → 补外部知识）");
+  });
+
+  it("③ 点「AI 精修」⇒ 回调恰一次 refine，且面板自行收起", () => {
+    const onLaunch = vi.fn();
+    render(<ChatLaunchMenu onLaunch={onLaunch} />);
+    fireEvent.click(screen.getByTestId(OPEN));
+    fireEvent.click(screen.getByTestId(REFINE));
+    expect(onLaunch.mock.calls).toEqual([["refine"]]);
+    expect(screen.queryByTestId(MENU)).toBeNull();
+  });
+
+  it("④ 点「AI 知识补充」⇒ 回调恰一次 enrich，且面板自行收起", () => {
+    const onLaunch = vi.fn();
+    render(<ChatLaunchMenu onLaunch={onLaunch} />);
+    fireEvent.click(screen.getByTestId(OPEN));
+    fireEvent.click(screen.getByTestId(ENRICH));
+    expect(onLaunch.mock.calls).toEqual([["enrich"]]);
+    expect(screen.queryByTestId(MENU)).toBeNull();
+  });
+
+  it("⑤ 点透明点击层 ⇒ 不触发选中，面板收起", () => {
+    const onLaunch = vi.fn();
+    const { container } = render(<ChatLaunchMenu onLaunch={onLaunch} />);
+    fireEvent.click(screen.getByTestId(OPEN));
+    // 点击层是根节点的**首个子节点的首个子节点**（`relative` 壳 → 触发钮 / 点击层 / 面板）：
+    // 用结构定位而不是类名 —— 拆件后没有类名，testid 也不该为点击层新造（原来就没有）。
+    const scrim = container.firstElementChild?.children[1] as HTMLElement | undefined;
+    expect(scrim, "点击层不在预期位置（结构变了，判据要跟着改）").toBeTruthy();
+    expect(scrim?.getAttribute("data-testid")).toBeNull();
+    fireEvent.click(scrim as HTMLElement);
+    expect(onLaunch.mock.calls).toEqual([]);
+    expect(screen.queryByTestId(MENU)).toBeNull();
+  });
+});

app/src/components/chat/ChatLaunchMenu.tsx

@@ -0,0 +1,77 @@
+/**
+ * ChatLaunchMenu — 对话页工具条上的「发起任务」锚定菜单（v0.16.1 任务对话化）。
+ *
+ * @ai-context: Why 独立成件：它原先是 `pages/ChatPage.tsx` 内联的一段 JSX（含自己的
+ *              开合状态、透明点击层与锚定面板）。`ChatPage.tsx` 当时 **599/600 行**
+ *              （本批的贴边文件之一），按控制方裁决 **B7「先拆件、再迁移」** 必须先把它
+ *              摘出来，才允许动 `ChatPage.tsx` 的其它部分 —— 否则「拆件」与「迁移」会
+ *              混在一个提交里，行为等价性无法用测试证明。
+ *              本件是**纯展示 + 一个开合状态**：不读 store、不发 IPC、不写磁盘，
+ *              唯一的对外语义是「用户选了 refine 还是 enrich」（`onLaunch`）。
+ * @ai-context: 语义边界（与 `Modal` 的分工，ADR-033 §7）：它是**锚定菜单**而不是对话框 ——
+ *              没有对话框语义（无标题、无焦点陷阱、无 ESC 栈），所以按 B1 只把层级落
+ *              `zIndex("popover")`(200)，**不迁 `<Modal>`**。
+ * @ai-context: 层级：透明点击层与锚定面板**同档 200**（原为两个裸数字 30 / 31）。
+ *              面板「在点击层之上」由 **DOM 序**保证（同档位下后者胜），不靠更大的数字 ——
+ *              这正是六档标尺要消灭的「17 个各不相同的值」。行内 `style` 只承载**布局与层级**
+ *              （ADR-033 §4 允许），本件没有可被覆盖的原语语义（不是 `Button`/`Surface`/`Text`）。
+ */
+import { useState } from "react";
+import { zIndex } from "../../ui/zIndex";
+
+export interface ChatLaunchMenuProps {
+  /** 选中一个任务种类（父层据此打开发起对话框并清空目标预选） */
+  onLaunch: (kind: "refine" | "enrich") => void;
+}
+
+/**
+ * 渲染发起任务的锚菜单。
+ *
+ * 开合状态**留在本件内部**（父层不需要知道菜单开没开）：`ChatPage` 原来的
+ * `launchMenuOpen` 只在「选中/点空白」两处被置 false，且这两处的另一动作分别由本回调和
+ * 点击层自身完成 ⇒ 状态上行只会多一份跨层耦合，不改变任何可观察行为。
+ */
+export default function ChatLaunchMenu({ onLaunch }: ChatLaunchMenuProps) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div style={{ position: "relative" }}>
+      <button
+        type="button"
+        data-testid="task-launch-open"
+        onClick={() => setOpen((v) => !v)}
+        style={{ fontSize: 12, cursor: "pointer", padding: "3px 10px", borderRadius: 6, border: "1px solid #d1d5db", background: "#fff", color: "#374151" }}
+        title="在对话中发起 AI 任务（也支持 '/refine' '/enrich'）"
+      >
+        ✨ 发起任务 ▾
+      </button>
+      {open && (
+        <>
+          <div onClick={() => setOpen(false)} style={{ position: "fixed", inset: 0, zIndex: zIndex("popover"), background: "transparent" }} />
+          <div
+            data-testid="task-launch-menu"
+            data-app-menu=""
+            style={{ position: "absolute", top: "100%", left: 0, zIndex: zIndex("popover"), background: "#fff", border: "1px solid #e5e7eb", borderRadius: 6, padding: 4, boxShadow: "0 4px 12px rgba(0,0,0,0.12)", minWidth: 180 }}
+          >
+            <button
+              type="button"
+              data-testid="task-launch-refine"
+              style={{ display: "block", width: "100%", textAlign: "left", border: "none", background: "none", borderRadius: 6, padding: "6px 10px", fontSize: 12.5, cursor: "pointer", color: "#374151" }}
+              onClick={() => { setOpen(false); onLaunch("refine"); }}
+            >
+              ✨ AI 精修（会话 → 精修成笔记）
+            </button>
+            <button
+              type="button"
+              data-testid="task-launch-enrich"
+              style={{ display: "block", width: "100%", textAlign: "left", border: "none", background: "none", borderRadius: 6, padding: "6px 10px", fontSize: 12.5, cursor: "pointer", color: "#374151" }}
+              onClick={() => { setOpen(false); onLaunch("enrich"); }}
+            >
+              📚 AI 知识补充（笔记 → 补外部知识）
+            </button>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}

app/src/pages/ChatPage.tsx

@@ -28,6 +28,8 @@ import { buildConversationMarkdown } from "../utils/chatTranscript";
 // v0.16.1：任务对话化——对话内发起任务（按钮 + '/' 命令）+ 线程任务卡 + 追问预填
 import TaskLaunchDialog, { type LaunchTargetRow } from "../components/TaskLaunchDialog";
 import TaskThreadCard from "../components/TaskThreadCard";
+// 批 4 T13-b（B7）：发起工具条拆件到 components/chat/（本页 599/600 贴边，动它必须先拆）
+import ChatLaunchMenu from "../components/chat/ChatLaunchMenu";
 import { buildTaskFollowUpPrompt } from "../utils/taskFollowUp";
 // 2026-09-09 批 1：任务标题统一按类别解析（taskRefLabel——笔记级精修
 // ref_id=笔记 id，仅按 opType 会错查会话标题表；enrich 恒笔记级）
@@ -88,7 +90,6 @@ export default function ChatPage(props: Props) {
   const [noteGroups, setNoteGroups] = useState<NoteGroup[]>([]);
   const [saveDialog, setSaveDialog] = useState<{ initialTitle: string; content: string } | null>(null);
   // v0.16.1：任务对话化——发起面板（工具条下拉）/ 启动对话框 / 目标清单
-  const [launchMenuOpen, setLaunchMenuOpen] = useState(false);
   const [launchDialog, setLaunchDialog] = useState<"refine" | "enrich" | null>(null);
   const [launchTargetId, setLaunchTargetId] = useState<number | null>(null);
   const [sessionRows, setSessionRows] = useState<LaunchTargetRow[]>([]);
@@ -229,7 +230,6 @@ export default function ChatPage(props: Props) {
   const onTaskLaunched = useCallback((taskId: number) => {
     setLaunchDialog(null);
     setLaunchTargetId(null);
-    setLaunchMenuOpen(false);
     void reloadTasks();
     // 启动后切到任务对话视图（进度/轨迹即时可见；聊天视图内有同款线程卡）
     void selectTask(taskId);
@@ -488,31 +488,10 @@ export default function ChatPage(props: Props) {
         {/* 内容区 */}
         {activeChatId !== null && activeSession && (
           <>
-            {/* v0.16.1：任务对话化——发起工具条（按钮）/ '-' 命令同义 */}
+            {/* v0.16.1：任务对话化——发起工具条（按钮）/ '/' 命令同义。
+                批 4 T13-b：菜单（含透明点击层与锚定面板）已拆到 ChatLaunchMenu。 */}
             <div style={{ display: "flex", alignItems: "center", gap: 6, padding: "0 16px", flexShrink: 0 }}>
-              <div style={{ position: "relative" }}>
-                <button
-                  data-testid="task-launch-open"
-                  onClick={() => setLaunchMenuOpen((v) => !v)}
-                  style={{ fontSize: 12, cursor: "pointer", padding: "3px 10px", borderRadius: 6, border: "1px solid #d1d5db", background: "#fff", color: "#374151" }}
-                  title="在对话中发起 AI 任务（也支持 '/refine' '/enrich'）"
-                >
-                  ✨ 发起任务 ▾
-                </button>
-                {launchMenuOpen && (
-                  <>
-                    <div onClick={() => setLaunchMenuOpen(false)} style={{ position: "fixed", inset: 0, zIndex: 30, background: "transparent" }} />
-                    <div data-testid="task-launch-menu" data-app-menu="" style={{ position: "absolute", top: "100%", left: 0, zIndex: 31, background: "#fff", border: "1px solid #e5e7eb", borderRadius: 6, padding: 4, boxShadow: "0 4px 12px rgba(0,0,0,0.12)", minWidth: 180 }}>
-                      <button data-testid="task-launch-refine" style={{ display: "block", width: "100%", textAlign: "left", border: "none", background: "none", borderRadius: 6, padding: "6px 10px", fontSize: 12.5, cursor: "pointer", color: "#374151" }} onClick={() => { setLaunchDialog("refine"); setLaunchTargetId(null); setLaunchMenuOpen(false); }}>
-                        ✨ AI 精修（会话 → 精修成笔记）
-                      </button>
-                      <button data-testid="task-launch-enrich" style={{ display: "block", width: "100%", textAlign: "left", border: "none", background: "none", borderRadius: 6, padding: "6px 10px", fontSize: 12.5, cursor: "pointer", color: "#374151" }} onClick={() => { setLaunchDialog("enrich"); setLaunchTargetId(null); setLaunchMenuOpen(false); }}>
-                        📚 AI 知识补充（笔记 → 补外部知识）
-                      </button>
-                    </div>
-                  </>
-                )}
-              </div>
+              <ChatLaunchMenu onLaunch={(kind) => { setLaunchDialog(kind); setLaunchTargetId(null); }} />
               <span style={{ fontSize: 11, color: "#9ca3af" }}>试试 '/refine' '/enrich' 快捷命令</span>
             </div>
             {/* v0.16.1：线程任务卡（进行中实时 + 完成可追问）；v0.17.0 精修