dsh-data-domain-knowledge 0.1.0-alpha.13 → 0.1.0-alpha.15

package/src/client/graph/palette.ts

@@ -0,0 +1,165 @@
+/**
+ * 画布上用的**颜色字面量**，只有这一份。
+ *
+ * ## 为什么是字面量，不是 CSS 变量
+ *
+ * G6 的 canvas 渲染器读不到 CSS 自定义属性：`var(--tita-primary)` 会被 `parseColor`
+ * 解析成全透明黑 —— 表现是「节点边框凭空消失」，而且不报错。所以这些值必须以
+ * `#rrggbb` 的形式交给画布。
+ *
+ * ## 为什么集中到一个模块
+ *
+ * 它们原来是三份互不相干的字面量：`attribution/graph-options.ts`（边与徽标）、
+ * `attribution/model.ts`（节点取色）、`ExpansionGraph.tsx`（扩展图的圆点）。三份各自
+ * 演化，于是同一个「中性文字」在三处的灰度不同，而**没有任何一处能看出它们本该相同**。
+ * 现在三处都从这里取，改一次就三处一起改。
+ *
+ * ## 必须守住的对比度
+ *
+ * 画布没有 CSS 的兜底，所以这里的值**由测量决定**，不是由手感决定。背景按
+ * `--tita-surface` = `#ffffff` 算（深浅主题下画布底色都由外层容器给，浅色是默认）：
+ *
+ * - 标签墨色（`LABEL_INK` / `LABEL_FAINT` / `BADGE_INK`）：≥ 4.5:1（正文级）。
+ *   它们画的是 9–11px 的字，比大字号更需要余量。
+ * - 静音描边（`OUTLINE_MUTED`）：≥ 3:1（非文字 UI 的门槛）。
+ * - 引用层描边（`NODE_REFERENCE_STROKE`）与它的底色（`NODE_REFERENCE_FILL`）之间：
+ *   ≥ 3:1。这一对原来只有 1.64:1 —— 边和填充几乎同色，节点看起来是一块平色。
+ * - 命中色（`HIT_FILL`）：≥ 3:1；它同时是圆点填充和它的描边。
+ *
+ * 改动任何一个值之前先算一遍：`(L1 + 0.05) / (L2 + 0.05)`，`L` 是 WCAG 的相对亮度。
+ * 这条注释留在文件里的理由很具体 —— 「颜色慢慢漂到不达标」这件事没有编译期检查，
+ * 只有某个人真的去量。2026-10-18 量过一轮，下面每个值都过了。
+ */
+
+/* ─────────────────────────────────────────────────────────── 画布底色上的文字与描边 */
+
+/** 画布主文字色（节点标题、命中圆点的标签）。白底 7.7:1。 */
+export const LABEL_INK = '#101828'
+
+/** 次级文字色（扩展图里「预算外」邻居的标签、边的计数标签底色）。白底 4.9:1。 */
+export const LABEL_FAINT = '#667085'
+
+/** 静音描边：预算外的邻居、僵尸边。白底 5.0:1（原 `#98a2b3` 只有 2.58:1，不达标）。 */
+export const OUTLINE_MUTED = '#667085'
+
+/** 滑块式的圆角底：边标签垫在它上面。它是**底色**不是文字，所以浅。 */
+export const LABEL_PLATE = '#f6f8fb'
+
+/* ───────────────────────────────────────────────────────────── 扩展图的命中 / 邻居 */
+
+/** 命中卡片：填充与描边同色（它是一个实心点，不是带框的卡片）。白底 5.4:1。 */
+export const HIT_FILL = '#4868b2'
+
+/** 预算内邻居：白底 + 命中色描边，靠描边区分「这是邻居」。 */
+export const NEIGHBOR_FILL = '#ffffff'
+
+/** 节点被选中的那一圈。白底 5.2:1。 */
+export const SELECTION_RING = '#2563eb'
+
+/* ───────────────────────────────────────────────────────────────────── 节点的取色 */
+
+/** 中性节点（没有分类、没有失败模式的那一类）：白底、浅描边、静音文字。 */
+export const NEUTRAL_NODE = { fill: '#ffffff', stroke: '#d6dce6', text: LABEL_FAINT }
+
+/**
+ * 引用层节点：**底色与描边必须分得开**。
+ *
+ * 原来是 `#eef4ff` 配 `#9ec2ff`（1.64:1），几乎是一块平色；描边提到 `#2563eb`
+ * 之后是 4.68:1，白底上也有 5.17:1。
+ */
+export const NODE_REFERENCE_FILL = '#eef4ff'
+export const NODE_REFERENCE_STROKE = '#2563eb'
+export const NODE_REFERENCE_TEXT = '#1d4ed8'
+
+/** 现象节点：琥珀。 */
+export const NODE_SYMPTOM = { fill: '#fff7ea', stroke: '#b96d14', text: '#96580f' }
+
+/** 检查点节点：紫。 */
+export const NODE_CHECK_POINT = { fill: '#f5f1ff', stroke: '#c9b8ff', text: '#5b45be' }
+
+/** 空区假设：描边是虚线，颜色与失败原因里的红同一档（它要人来看一眼）。 */
+export const GAP_STROKE = '#b42318'
+
+/** 僵尸边（90 天没走过）：灰、虚线。与 `OUTLINE_MUTED` 分开命名是因为它还会变淡。 */
+export const ZOMBIE_STROKE = '#9aa4b2'
+
+/** 失败模式的取色。与 `model.ts` 的 `FAILURE_REASON_LABEL` 一一对应，顺序也一致。 */
+export const FAILURE_REASON_FILL = {
+  'upstream-missing': '#eef4ff',
+  'spec-change': '#f3f0ff',
+  'data-processing': '#eafaf2',
+  consumption: '#fff7ea',
+  permission: '#fdecea',
+} as const
+
+export const FAILURE_REASON_STROKE = {
+  'upstream-missing': '#2563eb',
+  'spec-change': '#6b54cf',
+  'data-processing': '#12875f',
+  consumption: '#b96d14',
+  permission: '#b42318',
+} as const
+
+export const FAILURE_REASON_TEXT = {
+  'upstream-missing': '#1d4ed8',
+  'spec-change': '#5b45be',
+  'data-processing': '#0f6b4d',
+  consumption: '#96580f',
+  permission: '#98200f',
+} as const
+
+/* ─────────────────────────────────────────────────────────────────────────── 边 */
+
+/**
+ * 十二种边各自的外观色。
+ *
+ * 这里只有**颜色**；线宽与线型留在 `graph-options.ts` 的 `EDGE_STYLE` 里 —— 那些是
+ * 几何，不是调色板的一部分。名字与 `AttributionEdgeKind` 逐字相同，漏一种在类型上
+ * 就报错。
+ */
+export const EDGE_STROKE = {
+  may_be_caused_by: '#93b4f8',
+  verified_by: '#6b54cf',
+  categorized_as: '#c9b8ff',
+  queries: '#9ec2ff',
+  produces: '#b96d14',
+  supports: '#12875f',
+  refutes: '#b42318',
+  confirmed_as: '#0f766e',
+  instance_of: '#b96d14',
+  /**
+   * 反查索引。原来是 `#9ec2ff`（白底 1.8:1）—— 与「要去查」那条边的颜色完全相同，
+   * 两条语义不同的边在画布上分不出来。现在深一档（4.68:1），与引用层节点描边同色：
+   * 它画的正是「这张表被哪条假设引用」。
+   */
+  indexed_from: '#2563eb',
+} as const
+
+/* ─────────────────────────────────────────────────────────────────────────── 徽标 */
+
+/**
+ * 节点徽标（挂在节点上沿 / 下沿的小字牌）。
+ *
+ * `fontSize: 9` 是最小可读档，所以它的墨色必须比正文更保守：`#748091` 在白底上
+ * 只有 4.01:1（不达 4.5），换成 `#475467`（7.7:1）。
+ */
+export const BADGE_INK = '#475467'
+export const BADGE_PLATE = '#ffffff'
+export const BADGE_PLATE_STROKE = '#e5e9f0'
+
+/** 空区徽标的红：与 `GAP_STROKE` 同色，浅红描边把它从白底上托起来。 */
+export const BADGE_GAP_STROKE = '#f0b7ad'
+
+/** 问题分类徽标：琥珀文字 + 浅琥珀描边。 */
+export const BADGE_PROBLEM_INK = '#96580f'
+export const BADGE_PROBLEM_STROKE = '#f2ddb8'
+
+/** 「N min · 自动 / 人工」徽标：自动走绿、人工走琥珀（同一档语义色）。 */
+export const BADGE_AUTO_INK = '#12875f'
+export const BADGE_MANUAL_INK = '#b96d14'
+
+/** 边上的「N 例」计数标签：琥珀。 */
+export const EDGE_COUNT_INK = '#b96d14'
+
+/** 边上的「僵尸边 N 天未走」标签：静音灰。 */
+export const EDGE_ZOMBIE_INK = '#9aa4b2'

package/src/client/pages.css

@@ -50,6 +50,7 @@ body {
 .page-column { width: 100%; margin-inline: auto; }
 .page-column-help { max-width: 860px; }
 .page-column-trial { max-width: 1080px; }
+.page-column-tasks { max-width: 1220px; }
 /* 架构说明页是**一块画布**，不是一栏正文：画布设计宽 1172px，再加右列 400px，
    窄于 1560 就只能靠缩字把图塞进来（实测 0.55 倍，卡片上的字读不出）。 */
 .page-column-guide { max-width: 1560px; }
@@ -90,36 +91,228 @@ body {
 }
 .page-loading { margin: 0; color: var(--tita-ink-muted); font-size: 12px; }
 
-.extractTasksHead { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--tita-line); padding: 2px 0 17px; }
-.extractTasksHead h2 { margin: 0; color: var(--tita-ink); font-size: 18px; font-weight: 730; letter-spacing: -.02em; }
-.extractTasksHead p { margin: 3px 0 0; color: var(--tita-ink-muted); font-size: 11.5px; }
-.extractTasksNote { margin: 12px 0 6px; color: var(--tita-ink-muted); font-size: 11px; }
-.extractTasksEmpty { display: flex; align-items: center; gap: 9px; border-bottom: 1px solid var(--tita-line); padding: 22px 0; color: var(--tita-ink-muted); font-size: 12px; }
-.extractTasksEmpty svg { flex: 0 0 auto; color: var(--tita-ink-faint); }
-.extractTaskList { display: grid; }
-.extractTaskRow { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 22px; border-bottom: 1px solid var(--tita-line); padding: 15px 0; }
-.extractTaskMain { display: grid; min-width: 0; gap: 4px; }
-.extractTaskTitle { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
-.extractTaskTitle strong { color: var(--tita-ink); font-size: 12px; font-weight: 710; }
-.extractTaskMain > p { margin: 0; color: var(--tita-ink-muted); font-size: 11.5px; overflow-wrap: anywhere; }
-.extractTaskTime { display: inline-flex; align-items: center; gap: 5px; color: var(--tita-ink-faint); font-size: 10.5px; font-variant-numeric: tabular-nums; }
-.extractTaskActions { display: flex; flex: 0 0 auto; align-items: center; gap: 7px; }
-.extractTaskControls { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
-.extractTaskStepToggle { min-height: 30px; gap: 4px; padding-inline: 7px; color: var(--tita-ink-muted); font-size: 10.5px; }
+/* ---------------------------------------------------------- 知识处理与运行记录
+ *
+ * 2026-10-18 重排。这一页只有三层，而每一层回答一个问题：
+ *
+ * 1. **页头** —— 现在什么状态（一行实时结论）+ 两个动作。**没有标题**：标题在常驻窄条上，
+ *    内容区再写一遍就是同一句话说两次。
+ * 2. **步骤轨** —— 四段各差多少。它横贯整页而不是缩在左栏里：这一页的骨架是一条有方向的
+ *    流水线，把骨架塞进左栏，右栏就变成了「第二根柱子」。
+ * 3. **两栏** —— 左栏「这一段跑了什么」，右栏「我要跑哪些」+「以前跑过什么」。
+ *
+ * 上一版的问题是**同一件事说了三遍**（页签徽标 / 段头 / 结果摘要的第一行都是「部分失败」），
+ * 而真正有用的「还剩多少待办」被压成一行 10.5px 的灰字，模型原始日志却占着一屏。
+ * 所以这里守一条：**一个事实只出现一次**。阶段状态只住在步骤轨上，待办计数只住在同一格的
+ * 第二行，段名只住在段头。
+ */
+.extractTasksPage { display: grid; min-width: 0; gap: 15px; color: var(--tita-ink); }
+
+.extractTasksHead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; }
+/* 结论行：12.5px 而不是 13px —— 它是一句状态，不是正文。宽度上限 76ch：
+   整页 1220px 时这一句会独占一整行，读起来像标题。 */
+.extractTasksHeadline { max-width: 76ch; margin: 0; color: var(--tita-ink-muted); font-size: 12.5px; line-height: 1.6; }
+.extractTasksHeadActions { display: flex; flex: 0 0 auto; align-items: center; gap: 6px; }
+.extractTasksError { margin: 0; border: 1px solid color-mix(in srgb, var(--tita-danger) 32%, var(--tita-surface)); border-radius: 8px; background: color-mix(in srgb, var(--tita-danger) 8%, var(--tita-surface)); padding: 9px 12px; color: var(--tita-danger); font-size: 12px; }
+
+/* ---- 步骤轨
+ *
+ * 复用 `KnowledgeStepRail` 那一套语言（节点 + 箭头 + 当前步描边），因为它们是同一件事：
+ * 一条流水线上「你现在站在哪一段」。区别只有一处 —— 这里的节点是 Radix 的 trigger，
+ * 所以键盘、`aria-controls`、方向键切换都是现成的。
+ *
+ * 默认的 `TabsList` 是「一排等宽按钮」（等宽 pill + 32px 高）：它表达的是「几选一」，
+ * 而这里是「谁接谁」。所以把 pill 的底、内边距、固定高全部收掉，节点自己长成带描边的一格。
+ */
+.extractTasksWork { display: flex; min-width: 0; flex-direction: column; gap: 14px; }
+.extractTasksRailList {
+  display: flex;
+  width: 100%;
+  height: auto;
+  align-items: stretch;
+  gap: 6px;
+  border-radius: 0;
+  background: transparent;
+  padding: 0;
+}
+.extractTasksRailArrow { display: inline-flex; flex: 0 0 auto; align-self: center; align-items: center; color: var(--tita-ink-faint); }
+.extractTasksRailStep {
+  display: grid;
+  flex: 1 1 0;
+  box-sizing: border-box;
+  min-width: 0;
+  height: auto;
+  align-content: start;
+  justify-items: start;
+  gap: 7px;
+  border: 1px solid var(--tita-line);
+  border-radius: 9px;
+  background: var(--tita-surface);
+  padding: 10px 12px;
+  color: var(--tita-ink-muted);
+  text-align: left;
+  white-space: normal;
+  transition: border-color 120ms ease-out, background-color 120ms ease-out;
+}
+.extractTasksRailStep:hover { border-color: var(--tita-line-strong); background: var(--tita-surface-muted); color: var(--tita-ink); }
+.extractTasksRailStep:focus-visible { outline: 2px solid var(--tita-focus-ring); outline-offset: 1px; }
+/* 当前步不是「已选中」，而是「你站在哪一段」。用主色描边 + 浅底，不用左侧色条 ——
+   色条会把这一格读成一条「提示卡」，而它不是提示。两个属性都写上：Radix 给的是
+   `data-state="active"`，新版 shadcn 的类名等的是 `data-active`。 */
+.extractTasksRailStep[data-state="active"],
+.extractTasksRailStep[data-active] {
+  border-color: var(--tita-primary);
+  background: var(--tita-primary-soft);
+  box-shadow: inset 0 0 0 1px var(--tita-primary);
+  color: var(--tita-ink);
+}
+.extractTasksRailName { min-width: 0; color: inherit; font-size: 12.5px; font-weight: 680; line-height: 1.4; letter-spacing: -.01em; }
+.extractTasksRailFacts { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: 6px; }
+/* 待办计数：等宽数字，**比徽标轻** —— 徽标说的是「上次跑成什么样」（结论），
+   这一句说的是「现在还剩多少」（读数）。两件事不同重，才读得出哪句是结论。 */
+.extractTasksRailPending { color: var(--tita-ink-faint); font-size: 10.5px; line-height: 1.4; white-space: nowrap; font-variant-numeric: tabular-nums; }
+
+/* ---- 两栏 */
+.extractTasksBody { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(316px, 1fr); align-items: start; gap: 18px; }
+.extractTasksMain { min-width: 0; }
+.extractTasksSide { display: grid; min-width: 0; gap: 14px; }
+
+/* ---- 阶段卡
+ *
+ * 卡里**不再套卡**：输入范围 / 结果摘要 / 抽取报告 / 运行输出 都是这张卡里的**分节**，
+ * 用一条发丝线分开，不各长一圈描边。卡片套卡片读起来是四个同级的东西，
+ * 而它们其实是同一件事的四段。
+ */
+.extractTasksStage { min-width: 0; border: 1px solid var(--tita-line); border-radius: 10px; background: var(--tita-surface); padding: 15px 17px 17px; }
+.extractTasksStageIntro { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
+.extractTasksStageIntro > div { min-width: 0; }
+.extractTasksStageIntro h2 { margin: 0; color: var(--tita-ink); font-size: 14.5px; font-weight: 700; line-height: 1.4; letter-spacing: -.015em; }
+.extractTasksStageIntro p { margin: 3px 0 0; color: var(--tita-ink-muted); font-size: 11.5px; line-height: 1.55; }
+
+.extractTasksFacts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; border-top: 1px solid var(--tita-line); margin-top: 13px; }
+.extractTasksFacts > section { min-width: 0; padding-top: 13px; }
+.extractTasksFacts > section + section { border-left: 1px solid var(--tita-line); padding-left: 20px; }
+.extractTasksFacts h3 { margin: 0 0 9px; color: var(--tita-ink-muted); font-size: 10.5px; font-weight: 700; letter-spacing: .02em; }
+.extractTasksFacts dl { display: grid; gap: 7px; margin: 0; }
+.extractTasksFacts dl > div { display: grid; grid-template-columns: 68px minmax(0, 1fr); align-items: start; gap: 10px; }
+.extractTasksFacts dt { color: var(--tita-ink-faint); font-size: 10.5px; line-height: 1.55; }
+.extractTasksFacts dd { min-width: 0; margin: 0; color: var(--tita-ink); font-size: 11px; line-height: 1.55; overflow-wrap: anywhere; }
+
+/* ---- 抽取报告 */
+.extractTasksReports { border-top: 1px solid var(--tita-line); margin-top: 15px; padding-top: 13px; }
+.extractTasksSubhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
+.extractTasksSubhead > div { min-width: 0; }
+.extractTasksSubhead h3 { margin: 0; color: var(--tita-ink); font-size: 11.5px; font-weight: 700; }
+.extractTasksSubhead p { margin: 3px 0 0; color: var(--tita-ink-faint); font-size: 10.5px; line-height: 1.5; }
+.extractTasksCount { flex: 0 0 auto; color: var(--tita-ink-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
+.extractTasksEmpty { margin: 0; padding: 14px 0; color: var(--tita-ink-muted); font-size: 11.5px; }
+/* 这一行是一个 `<button>`：应用内路径不能靠 `<a href>` 开（见 `ExtractionTasksPage`
+   里那段注释）。所以要把裸按钮的浏览器默认样式复位掉，外观保持原样。 */
+.extractReportRow { display: flex; width: 100%; min-width: 0; align-items: flex-start; justify-content: space-between; gap: 14px; border: 0; border-bottom: 1px solid var(--tita-line); border-radius: 0; background: none; padding: 11px 0; color: var(--tita-ink); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
+.extractReportRow:last-child { border-bottom: 0; padding-bottom: 2px; }
+.extractReportRow:hover .extractReportMain strong { color: var(--tita-primary); text-decoration: underline; text-underline-offset: 3px; }
+.extractReportRow:focus-visible { outline: 2px solid var(--tita-focus-ring); outline-offset: 2px; border-radius: 6px; }
+.extractReportMain { display: grid; min-width: 0; gap: 3px; }
+.extractReportMain strong { font-size: 12px; font-weight: 650; line-height: 1.5; overflow-wrap: anywhere; }
+.extractReportMain > span { color: var(--tita-ink-muted); font-size: 11px; line-height: 1.55; overflow-wrap: anywhere; }
+.extractReportMeta { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; color: var(--tita-ink-faint); font-size: 10.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
+
+/* ---- 运行输出（默认收起） */
+.extractTasksOutput { border-top: 1px solid var(--tita-line); margin-top: 15px; padding-top: 4px; }
+.extractTasksOutputToggle { gap: 5px; padding-inline: 2px 6px; color: var(--tita-ink-muted); font-size: 11px; font-weight: 650; }
+.extractTasksOutputToggle:hover { color: var(--tita-ink); }
+/* 第二段是「展开 / 收起」的补充说明：它是提示，不是按钮名，所以更轻。 */
+.extractTasksOutputToggle > span { color: var(--tita-ink-faint); font-size: 10.5px; font-weight: 500; }
+.extractTasksOutputToggle svg { transition: transform 140ms ease-out; }
+.extractTasksOutputToggle[aria-expanded="true"] svg { transform: rotate(180deg); }
+.extractTasksOutputBody { display: grid; gap: 8px; margin-top: 6px; }
+.extractTasksOutputBody > p { margin: 0; color: var(--tita-ink-muted); font-size: 11px; line-height: 1.55; }
+/* 模型原始返回：等宽、可滚、限高。**限高 320px** —— 它是底料，不是结论，
+   但也不能矮到看不见上下文。 */
+.extractTasksPre { margin: 0; max-height: 320px; overflow: auto; border-radius: 8px; background: var(--tita-surface-muted); padding: 11px 13px; color: var(--tita-ink); font-family: var(--tita-mono); font-size: 11.5px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 2; }
+.extractTasksReportsInline { display: flex; flex-wrap: wrap; gap: 14px; }
+.extractTasksLink { height: auto; padding-inline: 0; color: var(--tita-primary); font-size: 11px; font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
+.extractTasksLink:hover { background: transparent; color: var(--tita-primary); }
+
+/* ---- 右侧两栏：面板 */
+.extractTasksPanel { min-width: 0; overflow: hidden; border: 1px solid var(--tita-line); border-radius: 10px; background: var(--tita-surface); }
+.extractTasksPanelHead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--tita-line); padding: 13px 15px 11px; }
+.extractTasksPanelHead > div { min-width: 0; }
+.extractTasksPanelHead h2 { margin: 0; color: var(--tita-ink); font-size: 13px; font-weight: 700; letter-spacing: -.01em; }
+.extractTasksPanelHead p { margin: 3px 0 0; color: var(--tita-ink-muted); font-size: 11px; line-height: 1.5; }
+.extractTasksPanelBody { min-width: 0; padding: 0 15px; }
+
+/* ---- 处理范围
+ *
+ * 每一行原来是一枚「选择」按钮 + 名字 + 徽标：N 行就有 N 枚写着同一个词的按钮，
+ * 而真正要读的是那一行的名字。现在整行就是按钮，前面一枚方框表示选中
+ * （`aria-pressed` 与视觉同时成立，键盘 Tab 也走得通）。
+ */
+.extractTasksScopeTab { margin-top: 12px; }
+.extractTasksScopeNote { margin: 0 0 2px; color: var(--tita-ink-muted); font-size: 11px; line-height: 1.5; }
+.extractTasksChoiceList { display: grid; max-height: 260px; overflow: auto; margin: 0; padding: 0; list-style: none; scrollbar-color: var(--tita-line-strong) transparent; scrollbar-width: thin; }
+.extractTasksChoiceList > li { border-bottom: 1px solid var(--tita-line); }
+.extractTasksChoiceList > li:last-child { border-bottom: 0; }
+.extractTasksPick { display: flex; width: 100%; min-width: 0; align-items: center; gap: 9px; border: 0; border-radius: 7px; background: none; padding: 9px 4px 9px 2px; color: inherit; font: inherit; text-align: left; cursor: pointer; }
+.extractTasksPick:hover { background: var(--tita-surface-muted); }
+.extractTasksPick:focus-visible { outline: 2px solid var(--tita-focus-ring); outline-offset: 1px; }
+.extractTasksPickBox { display: inline-flex; width: 14px; height: 14px; flex: 0 0 auto; align-items: center; justify-content: center; border: 1px solid var(--tita-line-strong); border-radius: 4px; background: var(--tita-surface); color: var(--tita-primary); }
+.extractTasksPick[aria-pressed="true"] .extractTasksPickBox { border-color: var(--tita-primary); background: var(--tita-primary-soft); }
+.extractTasksChoiceName { display: grid; min-width: 0; flex: 1 1 auto; gap: 2px; color: var(--tita-ink); font-size: 11.5px; line-height: 1.5; overflow-wrap: anywhere; }
+.extractTasksChoiceName > span { color: var(--tita-ink-muted); font-size: 10.5px; }
+.extractTasksChoiceName > span.extractTasksGroupReason { color: var(--tita-warning); }
+.extractTasksChoiceName > strong { font-weight: 620; }
+.extractTasksGroupList { max-height: 330px; }
+.extractTasksScopeActions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; border-top: 1px solid var(--tita-line); margin-top: 4px; padding: 10px 0 11px; }
+
+/* ---- 运行记录
+ *
+ * 一行一条，不设左右两列：这一栏只有 316–420px，右侧再挂一排动作会把摘要压成三行。
+ * 所以身份 / 摘要 / 时间 / 动作四行顺着写下来，动作在最下面一行左对齐 ——
+ * 视线从「哪一段、跑成什么样」自然落到「还能对它做什么」。
+ */
+.extractTaskRow { display: grid; gap: 5px; border-bottom: 1px solid var(--tita-line); padding: 12px 0; }
+.extractTaskRow:last-of-type { border-bottom: 0; }
+.extractTaskTitle { display: flex; min-width: 0; align-items: center; flex-wrap: wrap; gap: 7px; }
+.extractTaskTitle strong { color: var(--tita-ink); font-size: 12px; font-weight: 680; }
+.extractTaskSummary { margin: 0; color: var(--tita-ink-muted); font-size: 11px; line-height: 1.55; overflow-wrap: anywhere; }
+.extractTaskTime { margin: 0; color: var(--tita-ink-faint); font-size: 10.5px; line-height: 1.5; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
+.extractTaskControls { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 2px; }
+.extractTaskStepToggle { gap: 4px; padding-inline: 6px; color: var(--tita-ink-muted); font-size: 10.5px; }
 .extractTaskStepToggle[aria-expanded="true"] svg { transform: rotate(180deg); }
 .extractTaskStepToggle svg { transition: transform 120ms ease-out; }
-.extractTaskSteps { grid-column: 1 / -1; min-width: 0; border-top: 1px solid var(--tita-line); margin-top: 2px; padding-top: 3px; }
-.extractTaskSteps .tita-compileSteps { margin-top: 8px; }
-.extractTaskActionError { max-width: 210px; color: var(--tita-danger); font-size: 10.5px; }
-.extractTaskActions .tita-uiButton { min-height: 30px; padding-inline: 9px; font-size: 11px; }
-.extractTaskSpin { animation: extractTaskSpin .9s linear infinite; }
-@keyframes extractTaskSpin { to { transform: rotate(360deg); } }
-@media (max-width: 680px) {
+.extractTaskSteps { min-width: 0; }
+
+/* ---- 窄屏 */
+@media (max-width: 1080px) {
+  /* 两栏并排需要约 950px 才站得住（左栏 560 + 右栏 316 + 间隔）。再窄就把右栏落到下面 ——
+     硬挤的结果是左栏的结论被压成一行两个字。 */
+  .extractTasksBody { grid-template-columns: minmax(0, 1fr); }
+}
+
+@media (max-width: 720px) {
   .page-main { padding: 18px 16px 70px; }
   .page-bar { padding-inline: 16px; }
-  .extractTaskRow { grid-template-columns: minmax(0, 1fr); gap: 10px; }
-  .extractTaskControls { justify-content: flex-end; }
-  .extractTaskSteps { grid-column: 1; }
+  .extractTasksHead { align-items: flex-start; }
+  /* 窄屏把步骤轨排成 2×2：四个节点横排时每个不到 90px，段名会被折成三行。
+     箭头在这一档去掉 —— 网格的阅读顺序已经是 1→2→3→4，再画箭头只会插在两行之间空转。 */
+  .extractTasksRailList { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
+  .extractTasksRailArrow { display: none; }
+  .extractTasksStageIntro { flex-direction: column; }
+  .extractTasksFacts { grid-template-columns: minmax(0, 1fr); }
+  .extractTasksFacts > section + section { border-top: 1px solid var(--tita-line); border-left: 0; margin-top: 13px; padding-left: 0; }
+  .extractReportRow { flex-direction: column; gap: 4px; }
+  .extractReportMeta { white-space: normal; }
+  .extractTaskStepToggle { padding-inline: 0 4px; }
+}
+
+@media (max-width: 420px) {
+  .extractTasksFacts dl > div { grid-template-columns: 62px minmax(0, 1fr); gap: 8px; }
+  .extractTasksRailStep { padding: 9px 10px; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .extractTasksRailStep, .extractTaskStepToggle svg, .extractTasksOutputToggle svg { transition: none; }
 }
 
 /* ---------------------------------------------------------- attribution event guide
@@ -144,7 +337,9 @@ body {
 .attributionGuideSectionHead p:last-child { max-width: 72ch; margin: 0; color: var(--tita-ink-muted); font-size: 12px; line-height: 1.7; }
 .attributionGuidePipeline { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.25fr) auto minmax(0, 1fr); align-items: center; gap: 9px; border: 1px solid var(--tita-line); border-radius: 14px; background: var(--tita-surface); padding: 18px 16px; }
 .attributionGuideBranches { display: grid; gap: 10px; border: 1px dashed var(--tita-line-strong); border-radius: 12px; background: var(--tita-surface-muted); padding: 10px; }
-.attributionGuideNode { display: grid; min-width: 0; gap: 3px; border-left: 3px solid var(--tita-line-strong); padding: 2px 0 2px 11px; }
+/* 1px 发丝线，不是 3px 色条：这一页其余的分隔全是发丝线，一条 3px 的竖条会把它读成
+   另一个东西（而且那是模板的记号）。段位身份色仍然在下面那枚小徽标上，没有丢。 */
+.attributionGuideNode { display: grid; min-width: 0; gap: 3px; border-left: 1px solid var(--tita-line-strong); padding: 2px 0 2px 11px; }
 .attributionGuideNode-source { border-left-color: var(--tita-tone-blue); }
 .attributionGuideNode-event { border-left-color: var(--tita-tone-green); }
 .attributionGuideNode-knowledge { border-left-color: var(--tita-tone-violet); }
@@ -162,7 +357,8 @@ body {
 .attributionGuideRelations { display: flex; flex-wrap: wrap; gap: 8px 18px; border-top: 1px solid var(--tita-line); padding-top: 11px; color: var(--tita-ink-muted); font-size: 10.5px; }
 .attributionGuideRelations span { display: inline-flex; align-items: center; gap: 5px; }
 .attributionGuideRelations svg { color: var(--tita-primary); }
-.attributionGuideCaseIntro { display: flex; align-items: center; justify-content: space-between; gap: 14px; border-left: 3px solid var(--tita-tone-green); background: var(--tita-tone-green-tint); padding: 10px 13px; }
+/* 底色留着（它说的是「这一块是案例」），竖条收成 1px。 */
+.attributionGuideCaseIntro { display: flex; align-items: center; justify-content: space-between; gap: 14px; border-left: 1px solid var(--tita-tone-green); background: var(--tita-tone-green-tint); padding: 10px 13px; }
 .attributionGuideCaseIntro > div { display: grid; gap: 3px; }
 .attributionGuideLabel { color: var(--tita-ink-faint); font-family: var(--tita-mono); font-size: 9.5px; }
 .attributionGuideCaseIntro p { margin: 0; color: var(--tita-ink-muted); font-size: 10.5px; }

package/src/client/pages.tsx

@@ -45,8 +45,11 @@ import { TabGuidePage } from './TabGuide.tsx'
 import { WikiFlowPanel } from './WikiFlowPanel.tsx'
 import { WikiTrialRun, type TrialDocumentOption } from './WikiTrialRun.tsx'
 import { TrialReport } from './TrialReportView.tsx'
+import { NormalizeTrajectory } from './NormalizeTrajectoryView.tsx'
+import { MaterializeTrajectory } from './MaterializeTrajectoryView.tsx'
 import { ExtractionTasksPage } from './ExtractionTasksPage.tsx'
-import { requestExtractionRun, type ExtractionRunRecord } from './wiki-trial.ts'
+import { requestExtractionRun, type ExtractionRunRecord, type TrajectoryReportView } from './wiki-trial.ts'
+import { TRAJECTORY_STAGE_LABEL, type MaterializeTrajectoryReport, type NormalizeTrajectoryReport } from '../trajectory-types.js'
 import { formatDateTime } from './format.ts'
 
 /** 宿主把这一族页面都挂在这个前缀下。 */
@@ -98,7 +101,7 @@ async function getJson<T>(url: string): Promise<T> {
 function PageShell({ title, meta, column, children }: {
   title: string
   meta?: string
-  column: 'help' | 'trial' | 'guide'
+  column: 'help' | 'trial' | 'tasks' | 'guide'
   children: ReactNode
 }): ReactNode {
   return <>
@@ -168,12 +171,18 @@ function TrialPage({ kb }: { kb: string }): ReactNode {
 }
 
 /**
- * 一次抽取的完整报告（2026-10-06）。
+ * 一次运行的完整轨迹（2026-10-06；2026-10-18 起三段共用这一页）。
  *
- * 它是 SourceRaw 详情里「抽取轨迹」那一行的落点：点一行就开在这里。
+ * 它是 SourceRaw 详情与任务页里「轨迹」那一行的落点：点一行就开在这里。
  * 此前报告是**就地展开在抽屉里**的 —— 报告几十 KB，400px 的栏里滚动着读不了它，
  * 而这份页面有整页宽度、常驻标题条、能 Cmd+F（与「新页面打开」读原文是同一条路）。
  *
+ * ## 为什么一页装三段
+ *
+ * 三段轨迹的形状不同（见 `trajectory-types.ts`），但**看它们的方式相同**：点开一条记录，
+ * 在浏览器里读它的全过程。所以地址只有一种（`?kb=&run=`），标题与正文按记录自己的
+ * `stage` 分派 —— 三个地址等于让人先学会三套入口规则，而收益只是 URL 好看一点。
+ *
  * 页面自己按 `?kb=&run=` 取数，与面板共用同一条 `/knowledge/extraction-run` 接口。
  */
 function RunPage({ kb, runId }: { kb: string; runId: string }): ReactNode {
@@ -207,20 +216,33 @@ function RunPage({ kb, runId }: { kb: string; runId: string }): ReactNode {
   }
 
   if (run === null) {
-    return <PageShell title="抽取轨迹" meta="正在读取…" column="trial">
-      <p className="page-loading" role="status">正在读取这次抽取的报告…</p>
+    return <PageShell title="轨迹" meta="正在读取…" column="trial">
+      <p className="page-loading" role="status">正在读取这次运行的轨迹…</p>
     </PageShell>
   }
 
   return <PageShell
-    title="抽取轨迹"
-    meta={`${formatDateTime(run.createdAt)} · ${run.actor === 'agent' ? 'Agent 发起' : '面板发起'}`}
+    title={TRAJECTORY_STAGE_LABEL[run.stage]}
+    meta={`${run.title ? `${run.title} · ` : ''}${formatDateTime(run.createdAt)} · ${run.actor === 'agent' ? 'Agent 发起' : '面板发起'}`}
     column="trial"
   >
-    <TrialReport report={run.report} />
+    {trajectoryBody(run.stage, run.report)}
   </PageShell>
 }
 
+/**
+ * 按 `stage` 分派正文。
+ *
+ * 三个 payload 的形状不同，而列表接口只给「这是一条什么记录」，所以这里的收窄是**断言**：
+ * 服务端在落库时用的就是这套形状（`stage` 与 `report` 由同一个调用点一起写），
+ * 而不是两个互不相干的字段。断言集中在这一个函数里，别的组件拿到的都是具体类型。
+ */
+function trajectoryBody(stage: ExtractionRunRecord['stage'], report: TrajectoryReportView): ReactNode {
+  if (stage === 'normalize') return <NormalizeTrajectory report={report as NormalizeTrajectoryReport} />
+  if (stage === 'materialize') return <MaterializeTrajectory report={report as MaterializeTrajectoryReport} />
+  return <TrialReport report={report as Parameters<typeof TrialReport>[0]['report']} />
+}
+
 function App(): ReactNode {
   const route = routeOf(window.location)
 
@@ -228,7 +250,7 @@ function App(): ReactNode {
 
   if (route.kind === 'run') return <RunPage kb={route.kb} runId={route.run} />
 
-  if (route.kind === 'tasks') return <PageShell title="抽取任务" column="trial"><ExtractionTasksPage kb={route.kb} /></PageShell>
+  if (route.kind === 'tasks') return <PageShell title="知识处理" column="tasks"><ExtractionTasksPage kb={route.kb} /></PageShell>
 
   if (route.kind === 'help') {
     if (route.topic === 'overview') {
@@ -248,7 +270,7 @@ function App(): ReactNode {
     <p>整页的地址只有这几种：</p>
     <p><code>/knowledge/pages/trial?kb=&lt;知识库 id&gt;</code> · 抽取试跑<br />
       <code>/knowledge/pages/run?kb=&lt;知识库 id&gt;&amp;run=&lt;轨迹 id&gt;</code> · 一次抽取的报告<br />
-      <code>/knowledge/pages/tasks?kb=&lt;知识库 id&gt;</code> · 抽取任务<br />
+      <code>/knowledge/pages/tasks?kb=&lt;知识库 id&gt;</code> · 知识处理与运行记录<br />
       <code>/knowledge/pages/help/compile</code> · 编译和召回链路<br />
       <code>/knowledge/pages/help/intent</code> · 意图的逻辑<br />
       <code>/knowledge/pages/help/attribution</code> · 智能归因事件<br />