fix(chat): wire sidebar resize handle

Author: Aparencia

app/src/components/ChatSidebar.test.tsx

@@ -13,20 +13,28 @@
  *      （J1-3 死局形态：只翻 setManualFolded 则自动折叠下点了不展开 ⇒ 红）；
  *   ④ 手动折叠记忆 + 页面不注入任何 prop 时仍然自足（缺省不回落 240）。
  *
+ * ⑤⑥⑦（2026-09-12 · T9 评审 I-1 修正 / 控制方裁决 e）：**拖拽手柄**。此前页面只
+ *   散传宽度/折叠态/展开回调 ⇒ `resizeBy` 到不了 UI，注册表承诺的 200..320 是
+ *   规格 §6.2 逐字点名的「假可调」；现改为列状态**整体**注入 + 手柄在本组件内渲染：
+ *   ⑤ 手柄在（`data-testid="column-resizer"`，见 `ColumnResizer.tsx:60`）；
+ *   ⑥ **拖拽真的改宽**（pointer 增量 → `resizeBy` → DOM `style.width`，含 max 夹取）；
+ *   ⑦ 折叠态下手柄仍在（与 `notes/NotesGroupsColumn` 同款：手柄在折叠三元之外）；
+ *   ⑧ 宽度与 `resizeBy` 都取自**注入的那个对象**（防「注入了却被忽略」的假接线）。
+ *
  * ⚠️ 仪器边界：jsdom **不排版** —— 只判 `style.width` 与元素有无，**不判像素**（像素归 T14 探针）；
  *   且组件测试底座全局 `environment: "node"` ⇒ 首行必须是指令行（本行之上不得有注释）。
  *   本仓未装 jest-dom / user-event ⇒ 断言用原生 API、交互用 `fireEvent`；无 `globals`
  *   ⇒ 必须显式 `afterEach(cleanup)`（先例 `NoteColorPicker.test.tsx:11`）。
  */
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { cleanup, fireEvent, render, screen } from "@testing-library/react";
-import { useColumnLayout } from "../hooks/useColumnLayout";
+import { useColumnLayout, type ColumnLayout } from "../hooks/useColumnLayout";
 import { columnSpec } from "../shell/columnRegistry";
 import ChatSidebar from "./ChatSidebar";
 import type { ChatSidebarProps } from "./ChatSidebar";
 
 const KEY = "chat-sidebar";
-const base: Omit<ChatSidebarProps, "width" | "folded" | "onExpand"> = {
+const base: Omit<ChatSidebarProps, "col"> = {
   sessions: [], tasks: [], activeChatId: null, activeTaskId: null,
   onSelectChat: vi.fn(), onSelectTask: vi.fn(), onNewChat: vi.fn(),
   onRenameChat: vi.fn(), onDeleteChat: vi.fn(),
@@ -36,7 +44,7 @@ const base: Omit<ChatSidebarProps, "width" | "folded" | "onExpand"> = {
 /** 页面形态的宿主：真 hook + 真注册表规格（= `ChatPage.tsx` 的那一行 + props 注入） */
 function Harness() {
   const chatCol = useColumnLayout(KEY, columnSpec(KEY));
-  return <ChatSidebar {...base} width={chatCol.width} folded={chatCol.folded} onExpand={chatCol.expand} />;
+  return <ChatSidebar {...base} col={chatCol} />;
 }
 
 /** 展开态的根元素宽度（折叠态根元素是 ColumnBar 窄条，无 width 样式） */
@@ -84,9 +92,61 @@ describe("ChatSidebar 列接线（规格 §6.2）", () => {
     const folded = render(<Harness />);
     expect(screen.getByTestId("column-bar")).toBeTruthy();
     folded.unmount();
+    // 2026-09-12（I-1 修正）：组件现在**自持**同 key 的列状态 ⇒ 上面写进去的手动折叠
+    // 记忆会被兜底实例读回（渲染成窄条）。本条的判据是「宽度缺省来自注册表」，
+    // 折记忆另由 ③⑦ 覆盖，故先清掉折叠记忆再验缺省宽度。
+    window.localStorage.removeItem(`layout:col-fold:${KEY}`);
     const bare = render(<ChatSidebar {...base} />);
     expect(rootWidth(bare.container.firstElementChild as HTMLElement)).toBe(
       `${columnSpec(KEY).default}px`,
     );
   });
+
+  it("⑤ 拖拽手柄接在侧栏上（I-1「假可调」修正：注册表承诺的 200..320 可达）", () => {
+    window.localStorage.setItem(`layout:col-width:${KEY}`, "300");
+    render(<Harness />);
+    // 有且仅有一个手柄（页面不再自己渲染第二个——列随组件走）
+    const handle = screen.getByTestId("column-resizer");
+    expect(handle.getAttribute("role")).toBe("separator");
+  });
+
+  it("⑥ 拖手柄真的改宽（pointer 增量 → resizeBy → DOM 宽度；max 由 hook 夹取）", () => {
+    const { container } = render(<Harness />);
+    const handle = screen.getByTestId("column-resizer");
+    expect(rootWidth(container.firstElementChild as HTMLElement)).toBe("260px");
+    fireEvent.pointerDown(handle, { clientX: 100 });
+    fireEvent.pointerMove(handle, { clientX: 140 }); // +40 ⇒ 300（增量语义：不是累计位移）
+    fireEvent.pointerUp(handle);
+    expect(rootWidth(container.firstElementChild as HTMLElement)).toBe("300px");
+    // 注册表 max=320：再拖 +100 必须被 useColumnLayout 夹回 320（手柄旁路不了规格）
+    fireEvent.pointerDown(handle, { clientX: 100 });
+    fireEvent.pointerMove(handle, { clientX: 200 });
+    fireEvent.pointerUp(handle);
+    expect(rootWidth(container.firstElementChild as HTMLElement)).toBe("320px");
+  });
+
+  it("⑦ 折叠态下手柄仍在（与 notes/NotesGroupsColumn 同款：手柄在折叠三元之外）", () => {
+    window.localStorage.setItem(`layout:col-fold:${KEY}`, "1");
+    render(<Harness />);
+    expect(screen.getByTestId("column-bar")).toBeTruthy();
+    expect(screen.getByTestId("column-resizer")).toBeTruthy();
+  });
+
+  it("⑧ **注入的那个对象**就是真源（宽度与 resizeBy 都取自页面传的 col）", () => {
+    // Why 造一个假对象（与 ①–⑦ 的「真 hook」口径互补）：Harness 与页面的 hook 同 key、
+    // 同规格 ⇒ 它分不清「用了注入对象」与「自己另开了一份状态」。若要防
+    // `const col = ownCol`（页面注入了却被忽略）这类假接线，必须让注入值**可区分**。
+    const resizeBy = vi.fn();
+    const injected: ColumnLayout = {
+      width: 205, folded: false, manuallyFolded: false,
+      resizeBy, resetWidth: vi.fn(), setManualFolded: vi.fn(), expand: vi.fn(),
+    };
+    const { container } = render(<ChatSidebar {...base} col={injected} />);
+    expect(rootWidth(container.firstElementChild as HTMLElement)).toBe("205px");
+    const handle = screen.getByTestId("column-resizer");
+    fireEvent.pointerDown(handle, { clientX: 10 });
+    fireEvent.pointerMove(handle, { clientX: 30 });
+    fireEvent.pointerUp(handle);
+    expect(resizeBy.mock.calls.map((c) => c[0])).toEqual([20]);
+  });
 });

app/src/components/ChatSidebar.tsx

@@ -4,15 +4,22 @@
  * @ai-context: 两段式："💬 对话"（自由聊天会话 CRUD）+ "🤖 AI 任务"
  *              （refine/enrich 任务对话入口——只读轨迹视图数据源）。
  *              全部数据由 ChatPage 加载后透传（本组件纯展示 + 事件回调）。
+ * @ai-context: 批 3 · T9 评审 I-1：列状态**整体**注入（`col`）且拖拽手柄由本组件
+ *              渲染。此前页面只散传宽度/折叠态/展开回调 ⇒ `resizeBy`/`resetWidth`
+ *              在 UI 上不可达，注册表承诺的 200..320 成了规格 §6.2 逐字点名的
+ *              「假可调」。形态与 `notes/NotesGroupsColumn` 同款：顶层 fragment、
+ *              手柄在**折叠三元之外**（折叠态也渲染），且是页面根 flex 的直接子元素。
  */
 import type { AiTaskRecord, ChatSession } from "../types";
 // 2026-09-09 批 1：任务标题统一按类别解析（taskRefLabel——会话级/笔记级
 // 精修 ref_id 语义不同；enrich 恒笔记级），侧栏与对话页/dock 同口径
 import { taskRefLabel } from "../utils/entityLabel";
-// 批 3（规格 §6.2「AI 对话侧栏：接入列基础设施」）：列宽不再写死 240——
+// 批 3（规格 §6.2「AI 对话侧栏：接入列基础设施」）：列宽不再写死——
 // 规格住在 shell/columnRegistry，运行时由页面里的 useColumnLayout 执行
 import { columnSpec } from "../shell/columnRegistry";
+import { useColumnLayout, type ColumnLayout } from "../hooks/useColumnLayout";
 import ColumnBar from "./ColumnBar";
+import ColumnResizer from "./ColumnResizer";
 
 /** 任务类型标签（refine/enrich → 中文 + 图标；模块内消费——审查修复：原
  *  export 无外部消费方，收窄为非导出） */
@@ -22,18 +29,15 @@ const OP_LABEL: Record<string, string> = {
 };
 
 /**
- * 批 3（规格 §6.2）：本列已接入列基础设施。两个新 prop 均为可选 ⇒ 组件在
- * 没有页面注入时行为自足（宽度回落到注册表默认值），但**折叠态必须注入
- * onExpand**——否则 26px 窄条点了不展开（正是 J1-3 那类交互死局的形态）。
+ * 批 3（规格 §6.2）：本列已接入列基础设施；**T9 评审 I-1 修正**——列状态由页面
+ * **整体**注入（`col`），三个散 prop（生效宽度 / 折叠态 / 展开回调）已收敛掉：
+ * 散传时 `resizeBy` / `resetWidth` 到不了 UI ⇒ 注册表承诺的 200..320 不可达。
  */
 export interface ChatSidebarProps {
-  /** 生效列宽（`useColumnLayout("chat-sidebar", …).width`，已按 200..320 夹取）；
-   *  缺省 = 注册表默认 260（接线前本组件写死 240，见 columnRegistry 的 M3 注） */
-  width?: number;
-  /** 生效折叠态（自动折叠或手动折叠任一成立）——为真时整列收成 26px 窄条 */
-  folded?: boolean;
-  /** 点窄条展开（`useColumnLayout.expand`：同时清自动/手动折叠态） */
-  onExpand?: () => void;
+  /** 页面注入的列状态（`useColumnLayout("chat-sidebar", columnSpec("chat-sidebar"))`，
+   *  宽度已按 200..320 夹取）。缺省 ⇒ 本组件按**同一注册表规格**自持一份（页面
+   *  零注入时行为自足，缺省宽度仍是注册表默认值，不是接线前的写死值）。 */
+  col?: ColumnLayout;
   sessions: ChatSession[];
   tasks: AiTaskRecord[];
   /** 当前选中（chat 段会话 id / task 段任务 id） */
@@ -59,16 +63,15 @@ function fmtTime(unix: number): string {
 
 export default function ChatSidebar(props: ChatSidebarProps) {
   const {
-    width = columnSpec("chat-sidebar").default,
-    folded = false,
-    onExpand,
+    col: injectedCol,
     sessions, tasks, activeChatId, activeTaskId,
     onSelectChat, onSelectTask, onNewChat, onNewKbChat, onRenameChat, onDeleteChat,
     sessionTitles, noteTitles,
   } = props;
-  // 批 3：折叠态与其它列同款——整列换成 ColumnBar 窄条（26px，点击走 expand()）。
-  // 顶层仍是**恰好一个**元素（不是 Fragment）：根 flex 的子元素数不变 ⇒ 不改 flex 分配。
-  if (folded) return <ColumnBar icon="💬" title="对话" onClick={() => onExpand?.()} />;
+  // 单行写法是刻意的：`columnRegistry.test.ts` ⑤ 逐行捕获
+  // `useColumnLayout("键", columnSpec("键"))`，换行写法会让那条判据静默空转。
+  const ownCol = useColumnLayout("chat-sidebar", columnSpec("chat-sidebar"));
+  const col = injectedCol ?? ownCol;
   const itemBase: React.CSSProperties = {
     padding: "6px 8px",
     borderRadius: 6,
@@ -83,8 +86,9 @@ export default function ChatSidebar(props: ChatSidebarProps) {
     textAlign: "left",
     color: "#374151",
   };
-  return (
-    <div style={{ width, flexShrink: 0, borderRight: "1px solid #e5e7eb", display: "flex", flexDirection: "column", minHeight: 0 }}>
+  // 批 3：折叠态与其它列同款——整列换成 ColumnBar 窄条（26px，点击走 expand()）
+  const panel = (
+    <div style={{ width: col.width, flexShrink: 0, borderRight: "1px solid #e5e7eb", display: "flex", flexDirection: "column", minHeight: 0 }}>
       <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "10px 8px 4px" }}>
         <span style={{ fontSize: 12, fontWeight: 600, color: "#6b7280" }}>💬 对话</span>
         <div style={{ display: "flex", gap: 2 }}>
@@ -180,4 +184,13 @@ export default function ChatSidebar(props: ChatSidebarProps) {
       </div>
     </div>
   );
+  // T9 评审 I-1：手柄由本组件渲染，且在**折叠三元之外**（折叠态也在）——与
+  // `notes/NotesGroupsColumn` 同款。顶层 fragment 的两个子元素都是页面根 flex 的
+  // 直接子元素（多包一层会改变宽度分配；`ColumnResizer` 恒 5px / flexShrink 0）。
+  return (
+    <>
+      {col.folded ? <ColumnBar icon="💬" title="对话" onClick={col.expand} /> : panel}
+      <ColumnResizer onResize={col.resizeBy} onReset={col.resetWidth} />
+    </>
+  );
 }

app/src/pages/ChatPage.tsx

@@ -407,7 +407,7 @@ export default function ChatPage(props: Props) {
   return (
     <div style={{ height: "100%", display: "flex", minHeight: 0 }}>
       <ChatSidebar
-        width={chatCol.width} folded={chatCol.folded} onExpand={chatCol.expand}
+        col={chatCol}
         sessions={sessions}
         tasks={tasks}
         activeChatId={activeChatId}

app/src/shell/columnConsumption.test.ts

@@ -14,9 +14,16 @@
  *   ③ **扫描域自检**：四个文件都读得到且够长（防路径写错 ⇒ 0 命中 ⇒ 假绿），
  *      剥注释器与三个旧字面量正则各带正/负样本自检（不能失败的判据不算判据）。
  *
+ * 2026-09-12（T9 评审 I-1 · 控制方裁决 e）：① 与 ④ 按「列状态**整体**注入（`col`）+
+ *   手柄在 `ChatSidebar` 内渲染」改写——旧断言逐字绑在散 prop 形态上，与裁决后的实现
+ *   不相容（`ChatPage` 只有 1 行余量，散 prop 与对象不能并存）。改写**同强度不降**：
+ *   新增 `onResize={col.resizeBy}`（手柄真接线）与「散 prop 不得复辟」「页面不得重复
+ *   渲染手柄」三条判据，`it` 数 6 → 6 不变。
+ *
  * ⚠️ 仪器局限（诚实边界）：本文件**只看源码文本**——看不到「列实际渲染了多宽」。
- *   `ChatSidebar` / `GoalsPage` / `SettingsPage` / `ChatPage` 今日**都没有组件测试**，
- *   故宽度与折叠的真实行为在本批**没有自动化覆盖**：像素证据归 T14 的探针，
+ *   `ChatPage` 今日**没有组件测试**（页面级接线只有本文件的文本判据），故宽度与折叠的
+ *   真实行为在本批仍无自动化覆盖：像素证据归 T14 的探针；`ChatSidebar` 的行为层现在
+ *   由 `components/ChatSidebar.test.tsx`（jsdom，⑤⑥⑦ = 手柄/拖拽改宽/折叠态手柄）承担。
  *   本文件跑在 vitest 全局 `node` 环境（纯文本判定，刻意不加 jsdom 头）。
  */
 import { readFileSync } from "node:fs";
@@ -48,15 +55,20 @@ const LEGACY: readonly (readonly [string, RegExp])[] = [
 ] as const;
 
 describe("T9 · 未接入三处的列接线（规格 §6.2）", () => {
-  it("① ChatSidebar 不再写死列宽，且接受 width/folded/onExpand", () => {
+  it("① ChatSidebar 不再写死列宽；列状态整体注入 + 手柄在组件内（I-1 修正）", () => {
     const c = code("components/ChatSidebar.tsx");
     expect(/width:\s*240\b/.test(c), "ChatSidebar 代码里仍硬编码 240").toBe(false);
     expect(c.includes("export interface ChatSidebarProps")).toBe(true);
-    expect(c.includes("width?: number")).toBe(true);
-    expect(c.includes("folded?: boolean")).toBe(true);
+    // 2026-09-12 T9 评审 I-1（控制方裁决 e）：三个散 prop 收敛为**整对象** col
+    expect(c.includes("col?: ColumnLayout"), "列状态未收敛为一个对象").toBe(true);
+    expect(c.includes("col.folded"), "折叠态未取自列状态").toBe(true);
     expect(c.includes('columnSpec("chat-sidebar")'), "宽度缺省值未取注册表").toBe(true);
-    // 折叠态必须整列换成窄条（与其它列同款），且是「早返回」而非藏在某分支里
-    expect(/if\s*\(folded\)\s*return\s*<ColumnBar/.test(c), "折叠态未渲染 ColumnBar 窄条").toBe(true);
+    // 「假可调」的机器判据：注册表承诺 200..320 ⇒ 必须真有一个手柄，且它**接到列状态上**
+    // （只判「文件里出现 ColumnResizer」会被「渲染了但没接 onResize」的形态骗过）
+    expect(c.includes("<ColumnResizer"), "侧栏没有拖拽手柄 ⇒ 注册表承诺的区间不可达").toBe(true);
+    expect(c.includes("onResize={col.resizeBy}"), "手柄未接 resizeBy（拖了不改宽）").toBe(true);
+    // 折叠态必须整列换成窄条（与其它列同款）
+    expect(c.includes("<ColumnBar"), "折叠态未渲染 ColumnBar 窄条").toBe(true);
   });
 
   it("② GoalsPage 不再写死 380，且可拖拽 + 可折叠", () => {
@@ -82,9 +94,14 @@ describe("T9 · 未接入三处的列接线（规格 §6.2）", () => {
     const c = code("pages/ChatPage.tsx");
     expect(c.includes('useColumnLayout("chat-sidebar", columnSpec("chat-sidebar"))'), "页面未从注册表取规格").toBe(true);
     const usage = c.slice(c.indexOf("<ChatSidebar"));
-    expect(usage.includes("width={chatCol.width}"), "未把列宽注入 ChatSidebar").toBe(true);
-    expect(usage.includes("folded={chatCol.folded}"), "未把折叠态注入 ChatSidebar").toBe(true);
-    expect(usage.includes("onExpand={chatCol.expand}"), "未注入 expand（窄条点不开）").toBe(true);
+    // 2026-09-12 T9 评审 I-1（控制方裁决 e）：改为**一次对象传递**。散传 width/folded/
+    // onExpand 时 resizeBy 到不了 UI（=§6.2 的「假可调」），故加**反向判据**防复辟。
+    expect(usage.includes("col={chatCol}"), "未把列状态整体注入 ChatSidebar").toBe(true);
+    for (const scattered of ["width={chatCol.width}", "folded={chatCol.folded}", "onExpand={chatCol.expand}"]) {
+      expect(usage.includes(scattered), `散 prop ${scattered} 复辟（手柄拿不到 resizeBy）`).toBe(false);
+    }
+    // 手柄只有一处渲染（在 ChatSidebar 内）——页面不得再渲染第二个
+    expect(c.includes("<ColumnResizer"), "手柄应由 ChatSidebar 渲染，页面不得重复渲染").toBe(false);
   });
 
   it("⑤ 第二仪器（原始文本 · 刻意更严）：旧字面量连注释里都不许残留", () => {