feat(notes): 时间码芯片三链可点并补卡片流毫秒跳转

Author: Aparencia

app/src/components/NotePreviewView.render.test.ts

@@ -8,7 +8,7 @@
  *   （组件级取数/状态/交互不在本文件）；② 串里文本的 `"`/`'` 经解析往返为字面量，属性的 `"` 仍见 `"`。
  */
 import { createElement } from "react";
-import { act, cleanup, render } from "@testing-library/react";
+import { act, cleanup, fireEvent, render } from "@testing-library/react";
 import { afterEach, describe, expect, it, vi } from "vitest";
 
 const { invokeMock, convertMock } = vi.hoisted(() => ({
@@ -211,4 +211,24 @@ describe("NotePreviewView.renderMarkdown 表征（钉住今天的行渲染行为
     expect(out).toBe(P(long));
     expect(out.split("<p ").length).toBe(2);
   });
+
+  /**
+   * 批 7 T17（C10.2）的**唯一新增用例**（上面 34 条一字未改 = 迁移的回归网）。
+   * @ai_context 芯片是串渲染产物 ⇒ 点击只能在**容器上委托**（`closest("[data-ts-ms]")`）：
+   *   判据 = 点 `[data-ts-ms]` ⇒ `onOpenSessionAt(sessionId, ms)`（ms 来自 marker，sessionId 由容器补）。
+   *   缺省不注入该回调 ⇒ 芯片不可点（与迁移前逐字相同；上一条的属性表用例即该形态）。
+   */
+  it("T17 容器侧委托：点 [data-ts-ms] ⇒ onOpenSessionAt 收到 (sessionId, ms)", async () => {
+    const onOpenSessionAt = vi.fn();
+    convertMock.mockClear();
+    installInvoke("[⏱ 00:05]([[ts:5000]]) 尾巴");
+    let container!: HTMLElement;
+    await act(async () => {
+      ({ container } = render(createElement(NotePreviewView, { sessionId: 7, onOpenSessionAt })));
+    });
+    const chip = container.querySelector<HTMLElement>("[data-ts-ms]");
+    expect(chip, "芯片未渲染 ⇒ 委托无目标（T15 的 marker 或迁移落点坏了）").toBeTruthy();
+    fireEvent.click(chip as HTMLElement);
+    expect(onOpenSessionAt, "预览侧的芯片不可点（C10.2 的容器侧委托未兑现）").toHaveBeenCalledWith(7, 5000);
+  });
 });

app/src/components/NotePreviewView.tsx

@@ -72,13 +72,17 @@ function renderMarkdown(md: string, imageBaseUrl: string, dataDir: string): stri
 }
 
 export default function NotePreviewView({
-  sessionId, autoTaskId, onTaskStarted,
+  sessionId, autoTaskId, onTaskStarted, onOpenSessionAt,
 }: {
   sessionId: number;
   /** v0.16.1：工作台深链任务 id（透传 AiRefineCard——对话页任务视图跳转） */
   autoTaskId?: number | null;
   /** v0.16.1：精修任务启动回调（会话页 → 跳 AI 对话页） */
   onTaskStarted?: (sessionId: number, taskId: number) => void;
+  /** 批 7 T17（C10.2）：`[[ts:ms]]` 芯片的**容器侧事件委托**出口（串渲染的芯片没有 React 上下文
+   *  ⇒ 只能在容器上监听）。缺省 ⇒ 芯片不可点（与今天逐字相同：不新增任何导航行为）。
+   *  ⚠️ 生产调用点（`views/session/SessionNotePreview` 适配器）**本任务不接线**（见报告「诚实边界」）。 */
+  onOpenSessionAt?: (sessionId: number, ms: number) => void;
 }) {
   const [preview, setPreview] = useState<NoteFilterResult | null>(null);
   const [status, setStatus] = useState("");
@@ -193,6 +197,17 @@ export default function NotePreviewView({
     }
   };
 
+  /**
+   * 批 7 T17（C10.2）：**容器侧事件委托** —— 芯片是 `dangerouslySetInnerHTML` 的字符串产物
+   * （没有 React 上下文，无法给它挂 `onClick`），故在容器上按 C10.2 逐字给的形态取目标：
+   * `closest("[data-ts-ms]")`（marker 由 `utils/html.ts` 的 `renderTimestampAnchors` 写）。
+   * 未注入回调 ⇒ 直接返回（**不新增任何行为**，与今天的预览逐字相同）。
+   */
+  const openChip = (e: React.MouseEvent<HTMLDivElement>) => {
+    const el = (e.target as HTMLElement).closest("[data-ts-ms]");
+    if (el && onOpenSessionAt) onOpenSessionAt(sessionId, Number(el.getAttribute("data-ts-ms")));
+  };
+
   if (!preview) {
     // 批 4 T14：加载态改由 L1 原语承载（`role="status"` + 探针 + 逐字文案）。`status` 是
     // 可读信息（可能是"载入失败"之类的说明），故仍作 label；排版权威留在原语的 `Text` 里。
@@ -205,7 +220,7 @@ export default function NotePreviewView({
 
   const stats = preview.stats;
   return (
-    <div>
+    <div onClick={openChip}>
       {/* 过滤统计卡（v0.7.5：口头禅/净化计数——REQ-162~164/171 口径） */}
       <div style={{ display: "flex", gap: 8, flexWrap: "wrap", margin: "8px 0" }}>
         {[

app/src/components/RefineWorkbench.test.tsx

@@ -272,3 +272,25 @@ describe("RefineWorkbench 行级染色与差异视图（批 3 / 问题11）", ()
     expect(screen.getByRole("button", { name: "差异" })).toBeTruthy();
   });
 });
+
+/** 批 7 T17（C10.2）：工作台侧的 `[[ts:ms]]` 芯片靠**容器委托**可点（芯片是 `dangerouslySetInnerHTML`
+ *  的串产物，没有 React 上下文）⇒ 判据 = 点 `[data-ts-ms]` ⇒ `onOpenSessionAt(sessionId, ms)`。 */
+describe("RefineWorkbench · [[ts:ms]] 芯片可点（T17 的容器侧委托）", () => {
+  const CHIP_MD = "跳转 [⏱ 00:05]([[ts:5000]]) 处";
+  it("点 [data-ts-ms] ⇒ onOpenSessionAt(42, 5000)", async () => {
+    // 两栏文本来自行级 ops（只读透传的 ruleMd 仅在 ops 缺席时兜底）⇒ 夹具必须放进 ops
+    invokeMock.mockImplementation(async (cmd: string) =>
+      cmd === "diff_markdown_ops"
+        ? { ops: [{ unchanged: "# 标题" }, { unchanged: CHIP_MD }], added: 0, removed: 0 }
+        : cmd === "diff_markdown_sections" ? [] : wbStub);
+    const onOpenSessionAt = vi.fn();
+    render(<RefineWorkbench sessionId={42} readonly ruleMd={CHIP_MD} refinedMd={CHIP_MD} onClose={vi.fn()} onOpenSessionAt={onOpenSessionAt} />);
+    const chip = await waitFor(() => {
+      const el = document.querySelector<HTMLElement>("[data-ts-ms]");
+      expect(el, "芯片未渲染（markdownLine 的时间码链缺席）").toBeTruthy();
+      return el as HTMLElement;
+    });
+    fireEvent.click(chip);
+    expect(onOpenSessionAt, "工作台侧芯片仍不可点（C10.2「不再算残余」未兑现）").toHaveBeenCalledWith(42, 5000);
+  });
+});

app/src/components/RefineWorkbench.tsx

@@ -120,6 +120,7 @@ export default function RefineWorkbench({
   onRegenerate,
   ruleMd: propRuleMd,
   refinedMd: propRefinedMd,
+  onOpenSessionAt,
 }: {
   /** 会话级目标（规则草稿基线；与 noteMode 二选一） */
   sessionId?: number;
@@ -140,6 +141,10 @@ export default function RefineWorkbench({
   ruleMd?: string;
   /** 只读模式透传精修版 markdown */
   refinedMd?: string;
+  /** 批 7 T17（C10.2）：`[[ts:ms]]` 芯片的**容器侧事件委托**出口（双栏/差异三处阅读面共用）。
+   *  @ai-context 缺省 ⇒ 芯片不可点（与今天逐字相同）。生产接线见 `VersionPanel`（笔记页版本对比）；
+   *  `AiRefineCard` / `NoteAiDialog` 两处调用点未接线（理由见 T17 报告「诚实边界」）。 */
+  onOpenSessionAt?: (sessionId: number, ms: number) => void;
 }) {
   const [data, setData] = useState<WorkbenchData | null>(null);
   const [status, setStatus] = useState<"loading" | "ready" | "error">("loading");
@@ -324,6 +329,12 @@ export default function RefineWorkbench({
   const leftHtml = renderSideHtml(baseRows);
   const rightHtml = hasRefined ? decorateRefined(renderSideHtml(refinedRows), sections) : "";
   const diffHtml = renderDiffColumnHtml(diffRows);
+  /** 批 7 T17（C10.2）：容器侧事件委托（三处阅读面都是 `dangerouslySetInnerHTML` 的串产物，
+   *  芯片没有 React 上下文）⇒ 按 C10.2 逐字给的 `closest("[data-ts-ms]")` 取目标。 */
+  const openChip = (e: React.MouseEvent<HTMLDivElement>) => {
+    const el = (e.target as HTMLElement).closest("[data-ts-ms]");
+    if (el && sessionId && onOpenSessionAt) onOpenSessionAt(sessionId, Number(el.getAttribute("data-ts-ms")));
+  };
   // 差异视图仅在两版可比时展示（精修版缺失时保持并排占位——单侧无 diff 语义）
   const showDiff = view === "diff" && hasRefined;
 
@@ -436,7 +447,7 @@ export default function RefineWorkbench({
             <span style={{ margin: "0 8px" }}>/</span>
             <span>灰 = 两版共有</span>
           </div>
-          <div style={{ flex: 1, overflowY: "auto", padding: 12 }}>
+          <div style={{ flex: 1, overflowY: "auto", padding: 12 }} onClick={openChip}>
             <Surface
               level="surface"
               radius="panel"
@@ -455,6 +466,7 @@ export default function RefineWorkbench({
           <div
             ref={leftRef}
             onScroll={() => onScroll("left")}
+            onClick={openChip}
             style={{ flex: 1, overflowY: "auto", padding: 12, fontSize: 12, lineHeight: 1.6 }}
             dangerouslySetInnerHTML={{ __html: leftHtml }}
           />
@@ -468,6 +480,7 @@ export default function RefineWorkbench({
             <div
               ref={rightRef}
               onScroll={() => onScroll("right")}
+              onClick={openChip}
               style={{ flex: 1, overflowY: "auto", padding: 12, fontSize: 12, lineHeight: 1.6 }}
               dangerouslySetInnerHTML={{ __html: rightHtml }}
             />

app/src/components/VersionPanel.tsx

@@ -36,7 +36,13 @@ function DiffLine({ op }: { op: DiffOp }) {
   return <div style={{ color: "#6b7280", padding: "2px 6px" }}>  {("unchanged" in op ? op.unchanged : "").replace(/^#+\s*/, "") || " "}</div>;
 }
 
-export default function VersionPanel({ noteId, onChanged }: { noteId: number; onChanged?: () => void }) {
+/** 批 7 T17（C10.2）：版本对比工作台的 `[[ts:ms]]` 芯片出口 —— 容器（`NotesReadingColumn`）注入，
+ *  转交只读 `RefineWorkbench`；缺省 ⇒ 芯片不可点（与本任务之前逐字相同）。 */
+export default function VersionPanel({ noteId, onChanged, onOpenSessionAt }: {
+  noteId: number;
+  onChanged?: () => void;
+  onOpenSessionAt?: (sessionId: number, ms: number) => void;
+}) {
   const [open, setOpen] = useState(false);
   const [versions, setVersions] = useState<NoteVersion[]>([]);
   const [usage, setUsage] = useState<AiUsageRecord[]>([]);
@@ -206,6 +212,7 @@ export default function VersionPanel({ noteId, onChanged }: { noteId: number; on
           ruleMd={compareData.ruleMd}
           refinedMd={compareData.refinedMd}
           onClose={() => setCompareData(null)}
+          onOpenSessionAt={onOpenSessionAt}
         />
       )}
 

app/src/components/noteMarkdownComponents.tsx

@@ -226,6 +226,10 @@ export function noteMarkdownComponents({
         const secStr = String(sec % 60).padStart(2, "0");
         return (
           <span
+            // 批 7 T17（§C37.1 · Y9）：与串渲染链（`utils/html.ts` 的芯片）**同名**的定名 marker。
+            // Why：三条链共用一个 marker ⇒ ① 容器侧委托一处可读（`closest("[data-ts-ms]")`）
+            // ② `pages/NotesPage.test.tsx` 的脆选择器（`span[title*="跳转到会话"]`）可换成定名选择器。
+            data-ts-ms={ms}
             style={{ cursor: "pointer", color: "#0d9488", borderBottom: "1px dashed #14b8a6", background: "#f0fdfa", borderRadius: 3, padding: "0 4px" }}
             onClick={() => {
               if (!note.session_id) return;

app/src/components/notes/NotesReadingColumn.tsx

@@ -51,7 +51,7 @@
  *              `StatusLine` 原语 · 间距走 `--ed-space-*`），`style` 只承载布局（ADR-033 §4）。
  */
 import { Suspense, createElement, lazy, useCallback, useMemo, useState } from "react";
-import type { RefObject } from "react";
+import type { ComponentType, RefObject } from "react";
 import type { Note, NoteGroup } from "../../types";
 import type { NoteEditHandle } from "../NoteEditView";
 import type { ColumnLayout } from "../../hooks/useColumnLayout";
@@ -68,6 +68,11 @@ import { StatusLine, Text, ViewSwitcher } from "../../ui/primitives";
 /** `views` 缺席时的空清单：**模块级常量**（稳定引用 ⇒ 下面的 `useMemo` 不每渲染重算） */
 const NO_VIEWS: readonly ViewSpec<NoteViewSlot>[] = [];
 
+/** 卡片流键（= 注册表的 `NOTE_VIEWS[1]`；本件不 import 注册表 —— C1①）与其**带 seek 包装件**加载器
+ *  （T17/C10.3：该视图槽缺 `onOpenSessionAt`）；仍经 `lazy()` ⇒ 模块级惰性不变。 */
+const CARD_FLOW_KEY = "cardflow";
+const CARD_FLOW_LOAD = (): Promise<{ default: ComponentType<NoteViewSlot> }> => import("../../views/note/NoteCardFlowWithSeek");
+
 interface Props {
   /** 当前选中笔记（null=空态占位） */
   selected: Note | null;
@@ -123,7 +128,7 @@ export default function NotesReadingColumn({
   // v0.17.0 REQ-246：阅读态独立面板移除，用 AI 直接进入编辑态）
   const auxPanels = selected ? (
     <>
-      <VersionPanel key={`version-${selected.id}`} noteId={selected.id} onChanged={() => void onChanged()} />
+      <VersionPanel key={`version-${selected.id}`} noteId={selected.id} onChanged={() => void onChanged()} onOpenSessionAt={onOpenSessionAt} />
     </>
   ) : null;
 
@@ -162,15 +167,16 @@ export default function NotesReadingColumn({
   /**
    * 惰性映射：**默认视图无 `load` ⇒ 值为 `null`**，永不进 `React.lazy`（§7.3② 的构造性证据）。
    * `lazy()` 只按 `specs` 引用建一次 —— 每渲染新建会让子树恒重挂（F5 的挂载计数会当场红）。
+   * T17：**卡片流**经包装件加载（键漂移会让它静默失效 ⇒ F11 用例即守卫）。
    */
   const lazyOf = useMemo(
-    () => new Map(specs.map((spec) => [spec.key, spec.load ? lazy(spec.load) : null])),
+    () => new Map(specs.map((spec) => [spec.key, spec.load ? lazy(spec.key === CARD_FLOW_KEY ? CARD_FLOW_LOAD : spec.load) : null])),
     [specs],
   );
   const isDefault = viewKey === defaultKey;
   const LazyView = isDefault ? null : lazyOf.get(viewKey) ?? null;
-  /** 非默认视图的槽（数据全在这里，视图自身零取数 —— C14②）；空态 ⇒ `null`（连卡片流都不挂） */
-  // ⚠️ T26：`onOpenSessionAt` **不进** NoteViewSlot（该槽类型属批 6 T24 的规范面，本任务不改）⇒ 卡片流视图的时间码回链仍无 ms，已登记为残余
+  /** 非默认视图的槽（数据全在这里，视图自身零取数 —— C14②）；空态 ⇒ `null`（连卡片流都不挂）。
+   *  T17：`onOpenSessionAt` 仍不进 `NoteViewSlot`（批 6 已裁）⇒ 卡片流的 ms 由包装件补齐。 */
   const slot: NoteViewSlot | null = selected
     ? { note: selected, onTaskToggle, onOpenSession, onImageOpen }
     : null;

app/src/components/notes/NotesReadingColumn.views.test.tsx

@@ -79,10 +79,13 @@ interface HarnessProps {
   readonly editing?: boolean;
   readonly selected?: Note | null;
   readonly handle?: NoteEditHandle | null;
+  /** 批 7 T17：卡片流那条链的 ms 出口（F11 用；缺省 = 今天的形态） */
+  readonly onOpenSession?: (sessionId: number) => void;
+  readonly onOpenSessionAt?: (sessionId: number, ms: number) => void;
 }
 
 /** 页面形态的宿主：真 `useColumnLayout` + 真注册表清单（与 `NotesPage` 的那一行同源） */
-function Harness({ views = viewsFor("note"), editing = false, selected = note, handle = null }: HarnessProps) {
+function Harness({ views = viewsFor("note"), editing = false, selected = note, handle = null, onOpenSession, onOpenSessionAt }: HarnessProps) {
   const outlineCol = useColumnLayout("notes-outline", columnSpec("notes-outline"));
   const editorRef = useRef<NoteEditHandle | null>(handle);
   return (
@@ -104,6 +107,8 @@ function Harness({ views = viewsFor("note"), editing = false, selected = note, h
       onDelete={noop}
       onTaskToggle={noop}
       onTagClick={noop}
+      onOpenSession={onOpenSession}
+      onOpenSessionAt={onOpenSessionAt}
       onImageOpen={noop}
       onCleanNotice={noop}
       views={views}
@@ -277,4 +282,19 @@ describe("笔记视图宿主（批 5 T14 · C4 阻断 / §7.3 三条硬约束 /
     await act(async () => {});
     expect(invokeMock.mock.calls.length).toBe(before);
   });
+
+  /** F11（T17 · C10.3）：卡片流必须经**带 seek 包装件**加载 —— 点真芯片看回调（包装件未生效 / 键改名 ⇒ 命中单参分支 ⇒ `at` 收不到）。 */
+  it("F11 卡片流芯片带毫秒：点 [data-ts-ms] ⇒ onOpenSessionAt(42, 5000)，单参回调不被调", async () => {
+    const plain = vi.fn(); const at = vi.fn();
+    const { container } = render(<Harness selected={{ ...note, content: "跳转 [⏱ 00:05]([[ts:5000]]) 处" }} onOpenSession={plain} onOpenSessionAt={at} />);
+    await clickSegment("卡片流");
+    const chip = await waitFor(() => {
+      const el = container.querySelector<HTMLElement>("[data-ts-ms]");
+      expect(el, "卡片流没渲染出回链芯片").toBeTruthy();
+      return el as HTMLElement;
+    });
+    fireEvent.click(chip);
+    expect(at, "包装件没生效 —— 检查 CARD_FLOW_KEY 是否与注册表一致").toHaveBeenCalledWith(42, 5000);
+    expect(plain).not.toHaveBeenCalled();
+  });
 });

app/src/pages/NotesPage.test.tsx

@@ -162,7 +162,10 @@ describe("NotesPage [[ts:ms]] 带上毫秒（批 6 T26）", () => {
     fireEvent.click(await screen.findByText("带时间码"));
 
     const chip = await waitFor(() => {
-      const el = container.querySelector<HTMLElement>('span[title*="跳转到会话"]');
+      // 批 7 T17（Y9 · C37.1/§C10.2）：原选择器 `span[title*="跳转到会话"]` 依赖 **title 文案**，
+      // 而三条链（`noteMarkdownComponents` / `utils/html.ts`）今天共用同名定名 marker ⇒
+      // 改读 `[data-ts-ms="5000"]`：比原来**更强**（不再依赖文案，且顺带钉住 ms 载体本身）。
+      const el = container.querySelector<HTMLElement>('[data-ts-ms="5000"]');
       expect(el, "回链芯片未渲染（阅读栏未进入阅读态？）").toBeTruthy();
       return el as HTMLElement;
     });