dsh-data-domain-knowledge 0.1.0-alpha.2 → 0.1.0-alpha.4

package/src/client/attribution/StageChrome.tsx

@@ -1,5 +1,6 @@
 import {
-  ChevronDown, CircleHelp, Maximize2, Minimize2, RotateCcw, Search, SlidersHorizontal, X,
+  CircleHelp, ChevronDown, ChevronRight, Maximize2, Minimize2, RotateCcw, Search,
+  SlidersHorizontal, X,
 } from '@tita-data-agent/ui/icons'
 import type { ReactNode } from 'react'
 import { Badge, Button, Input, cn } from '@tita-data-agent/ui/components'
@@ -7,9 +8,10 @@ import {
   EDGE_LEGEND, type GraphLayout,
 } from './graph-options.ts'
 import {
-  FAILURE_MODE_STYLE, FILTERABLE_KINDS, NODE_KIND_LABEL, PROBLEM_CLASSES, PROBLEM_CLASS_LABEL,
-  symptomCountByProblemClass,
-  type AttributionNode, type AttributionNodeKind, type AttributionStats, type FailureMode, type ProblemClassId,
+  CHECK_COST_BANDS, FAILURE_REASON_STYLE, FILTERABLE_KINDS, LANES, NODE_KIND_LABEL,
+  PROBLEM_CLASSES, PROBLEM_CLASS_LABEL,
+  type AttributionNode, type AttributionNodeKind, type AttributionStats, type FailureReason,
+  type LaneId, type ProblemClassId,
 } from './model.ts'
 
 /**
@@ -19,6 +21,12 @@ import {
  * 不读数据、不算分数、不改状态。这样「浮层放在哪个角」这种纯排版决定可以随时改，
  * 而不会牵动任何业务逻辑 —— 而这恰恰是这一轮改动的主要内容。
  *
+ * **四角分区（0021 §7.1）**，一条视线：
+ * - 画布左上「改这张图」：四组按动线顺序 —— ① 布局 → ② 问题定义 → ③ 问题假设 → ④ 检查点；
+ * - 画布右上「怎么看这张图」：图例 · 全景 / 聚焦 · 保留 1 跳邻居 · 全屏，**四个同排**；
+ * - 画布左下「这张图现在多大」：统计 + 数据来源；
+ * - 画布底中「在图里找东西」：只剩文本搜索与命中数。
+ *
  * 每条浮层都走同一个面板原语 `ChromePanel`：半透明白底 + 细描边 + 轻阴影。
  * 之所以不各写一套边框，是因为它们都盖在画布上，**任何一条比别的更重都会把注意力
  * 从图上偷走**。统一是这里唯一正确的风格决定。
@@ -40,7 +48,7 @@ export function ChromePanel({ className, children }: { className?: string; child
 /** 浮层里的小按钮：比标准 `sm` 再矮 4px，否则一条 380px 宽的浮层会被按钮撑到两行。 */
 const MINI = 'h-[26px] min-h-[26px] px-2 text-[11px] font-[600]'
 
-/** 可多选的切面 chip。选中态用描边而不是填色：填色会把失败模式的语义色盖掉。 */
+/** 可多选的切面 chip。选中态用描边而不是填色：填色会把失败原因的语义色盖掉。 */
 export function Chip({ active, color, onClick, children, title }: {
   active: boolean
   color?: string
@@ -65,68 +73,172 @@ export function Chip({ active, color, onClick, children, title }: {
   >{children}</button>
 }
 
-/* ───────────────────────────────────────────────── 左上：分层 + 类型 ── */
+/** 组标题。四组各有一行 —— 顺序本身就是读法，所以标题不能被省掉。 */
+function GroupLabel({ children, index }: { children: ReactNode; index: string }): ReactNode {
+  return <span className="flex shrink-0 items-center gap-1 pt-0.5 text-[9.5px] font-[650] text-tita-ink-faint">
+    <span className="font-mono">{index}</span>{children}
+  </span>
+}
+
+function Group({ index, label, children }: { index: string; label: string; children: ReactNode }): ReactNode {
+  return <div className="flex items-start gap-1.5 text-[10px] text-tita-ink-muted">
+    <GroupLabel index={index}>{label}</GroupLabel>
+    <div className="flex min-w-0 flex-wrap gap-1">{children}</div>
+  </div>
+}
+
+/* ─────────────────────────────────────────────── 画布左上：操作（四组切面） ── */
+
+/** 布局的两种读法。**只有两个** —— 「分层」已撤销（§7.2）。 */
+const LAYOUT_OPTIONS: Array<[GraphLayout, string, string]> = [
+  ['line', '动线', '动线：五段泳道 + 点亮一条链，回答「下一步查什么、这条链断在哪」'],
+  ['force', '关系', '关系：浮动节点、可拖拽，关系靠聚簇与距离表达，回答「哪块密、哪里空」'],
+]
+
+export const LAYOUT_LABEL: Record<GraphLayout, string> = { line: '动线', force: '关系' }
 
 /**
- * 左上角工具条：**布局**（这张图怎么摆）与**类型切面**（看哪些节点）。
+ * 画布左上角工具条：**四组按动线顺序的切面**。
+ *
+ * 顺序不是排版偏好，是动线本身：先决定这张图怎么画（① 布局），再按
+ * 「问题 → 假设 → 检查点」逐段收窄（② ③ ④）。§7.1 把这条顺序写进了规格，
+ * 所以组标题带序号，而且**不提供另一种排列**。
  *
- * 两件事放在一起是因为它们都是「改变我看到的这张图」，而失败模式/文本筛选是
- * 「在图里找东西」—— 后者留在底部，前者贴住左上，动线上就不互相打架。
+ * 「类型切面」被这三组吸收（§7.3）：节点可见性由它所属的那一段承担，
+ * 关掉「检查点」= 第三段整段不画。同时存在两套说法只会让人犹豫点哪个。
  *
  * 宽度钉在 240px：它是**这一行左侧能拿到的全部预算**（380px 侧栏减内边距、
- * 再减右上角那对图标按钮）。不写成自适应是因为自适应在窄容器里会先压扁
- * 「力导向 / 分层」这两个按钮，正好是最不该被压的两个。
+ * 再减右上角那排读法开关）。不写成自适应是因为自适应在窄容器里会先压扁
+ * 最不该被压的那两个布局按钮。
  */
-export function ToolRail({ layout, onLayout, onReset, kinds, onToggleKind, problems, onToggleProblem, symptomCounts, hint, onCollapse }: {
+export function OperationsRail({
+  layout, onLayout, onReset, kinds, onToggleKind, problems, onToggleProblem,
+  subclasses, onToggleSubclass, symptomCounts, failureReasons, onToggleFailureReason,
+  gapOnly, onGapOnly, costBands, onToggleCostBand, automations, onToggleAutomation,
+  laneCounts, lanesOff, onToggleLane, hint, onCollapse,
+}: {
   layout: GraphLayout
   onLayout: (layout: GraphLayout) => void
   onReset: () => void
+  /** 生效的段（= 节点种类）切面。 */
   kinds: ReadonlySet<AttributionNodeKind>
   onToggleKind: (kind: AttributionNodeKind) => void
-  /** 问题大类切面。它排在类型之前 —— 「哪类问题」比「哪些节点」更靠前。 */
   problems: ReadonlySet<ProblemClassId>
   onToggleProblem: (id: ProblemClassId) => void
+  subclasses: ReadonlySet<string>
+  onToggleSubclass: (id: string) => void
   symptomCounts: Record<ProblemClassId, number>
+  failureReasons: ReadonlySet<FailureReason>
+  onToggleFailureReason: (id: FailureReason) => void
+  gapOnly: boolean
+  onGapOnly: () => void
+  costBands: ReadonlySet<string>
+  onToggleCostBand: (id: string) => void
+  automations: ReadonlySet<string>
+  onToggleAutomation: (id: string) => void
+  /** 每段当前画了几个 / 一共几个。段头读数。 */
+  laneCounts: Record<LaneId, { shown: number; total: number }>
+  /** 被关掉的段。它是 `kinds` 的投影，用来给段 chip 标选中态。 */
+  lanesOff: ReadonlySet<LaneId>
+  onToggleLane: (id: LaneId) => void
   hint: string
   onCollapse: () => void
 }): ReactNode {
+  const activeProblems = PROBLEM_CLASSES.filter(item => problems.has(item.id))
   return <ChromePanel className="flex w-[min(240px,100%)] flex-col gap-1.5 p-2">
     <div className="flex items-center gap-1">
-      <span className="mr-0.5 text-[10px] font-[650] text-tita-ink-faint">布局</span>
-      {([['force', '力导向'], ['layered', '分层']] as Array<[GraphLayout, string]>).map(([id, label]) =>
-        <Button
-          key={id}
-          size="sm"
-          variant={layout === id ? 'default' : 'outline'}
-          className={MINI}
-          onClick={() => onLayout(id)}
-        >{label}</Button>)}
-      <Button size="icon" variant="outline" className="ml-auto h-[26px] w-[26px] min-w-[26px]" title="重新布局" aria-label="重新布局" onClick={onReset}>
-        <RotateCcw size={12} />
-      </Button>
       <Button size="icon" variant="ghost" className="h-[26px] w-[26px] min-w-[26px]" title="收起工具条" aria-label="收起工具条" onClick={onCollapse}>
         <ChevronDown size={12} />
       </Button>
+      <span className="text-[9.5px] font-[650] text-tita-ink-faint">按动线顺序</span>
+      <Button size="icon" variant="outline" className="ml-auto h-[26px] w-[26px] min-w-[26px]" title="重新布局" aria-label="重新布局" onClick={onReset}>
+        <RotateCcw size={12} />
+      </Button>
     </div>
 
-    <div className="flex items-start gap-1.5 text-[10px] text-tita-ink-muted">
-      <span className="shrink-0 pt-0.5 font-[650] text-tita-ink-faint">问题</span>
-      <div className="flex flex-wrap gap-1">
-        {PROBLEM_CLASSES.map(item => <Chip
-          key={item.id}
-          active={problems.has(item.id)}
-          title={`${item.cue} · ${symptomCounts[item.id]} 个现象`}
-          onClick={() => onToggleProblem(item.id)}
-        >{item.label}<span className="ml-1 font-mono text-[9.5px] opacity-70">{symptomCounts[item.id]}</span></Chip>)}
+    {/* ① 布局 */}
+    <Group index="①" label="布局">
+      {LAYOUT_OPTIONS.map(([id, label, title]) => <Button
+        key={id}
+        size="sm"
+        variant={layout === id ? 'default' : 'outline'}
+        className={MINI}
+        title={title}
+        onClick={() => onLayout(id)}
+      >{label}</Button>)}
+    </Group>
+
+    {/* ② 问题定义：大类（子图选择器）→ 子类（只在选中的大类内出现） */}
+    <Group index="②" label="问题定义">
+      {PROBLEM_CLASSES.map(item => <Chip
+        key={item.id}
+        active={problems.has(item.id)}
+        title={`${item.cue} · ${symptomCounts[item.id]} 个现象`}
+        onClick={() => onToggleProblem(item.id)}
+      >{item.label}<span className="ml-1 font-mono text-[9.5px] opacity-70">{symptomCounts[item.id]}</span></Chip>)}
+    </Group>
+    {/* 子类行只在选了大类之后出现：没选大类时摊开 15 个子类，是把「两级切面」
+        又变回了一张目录。选了大类才收窄，这才是 §4.5 说的随大类收窄。 */}
+    {activeProblems.length > 0 && <div className="flex items-start gap-1.5 pl-[13px] text-[10px] text-tita-ink-muted">
+      <div className="flex min-w-0 flex-wrap gap-1">
+        {activeProblems.flatMap(item => item.subclasses).map(sub => <Chip
+          key={sub.id}
+          active={subclasses.has(sub.id)}
+          title={`${sub.label} · 形态 ${sub.shape}${sub.timePattern ? ` · ${sub.timePattern}` : ''}`}
+          onClick={() => onToggleSubclass(sub.id)}
+        >{sub.label}</Chip>)}
       </div>
-    </div>
+    </div>}
 
-    <div className="flex items-start gap-1.5 text-[10px] text-tita-ink-muted">
-      <span className="shrink-0 pt-0.5 font-[650] text-tita-ink-faint">类型</span>
-      <div className="flex flex-wrap gap-1">
-        {FILTERABLE_KINDS.map(kind => <Chip key={kind} active={kinds.has(kind)} onClick={() => onToggleKind(kind)}>
-          {NODE_KIND_LABEL[kind]}
-        </Chip>)}
+    {/* ③ 问题假设：失败原因 + 空区 */}
+    <Group index="③" label="问题假设">
+      {Object.entries(FAILURE_REASON_STYLE).map(([key, tone]) => <Chip
+        key={key}
+        active={failureReasons.has(key as FailureReason)}
+        color={tone.stroke}
+        onClick={() => onToggleFailureReason(key as FailureReason)}
+      >{tone.label}</Chip>)}
+      <Chip
+        active={gapOnly}
+        color="var(--tita-danger)"
+        title="只留空区：有假设、一条检查点都没有 —— 它是「这张图哪里还没建完」的读数"
+        onClick={onGapOnly}
+      >空区</Chip>
+    </Group>
+
+    {/* ④ 检查点：成本 + 自动 / 人工 */}
+    <Group index="④" label="检查点">
+      {CHECK_COST_BANDS.map(band => <Chip
+        key={band.id}
+        active={costBands.has(band.id)}
+        onClick={() => onToggleCostBand(band.id)}
+      >{band.label}</Chip>)}
+      {([['auto', '自动'], ['manual', '人工']] as Array<[string, string]>).map(([id, label]) => <Chip
+        key={id}
+        active={automations.has(id)}
+        onClick={() => onToggleAutomation(id)}
+      >{label}</Chip>)}
+    </Group>
+
+    {/* 段开关：它就是「类型切面」的归位处（§7.3）。段名 + 实时计数，
+        空的或不画的那一段要能一眼看出来，而不是点进去才发现是 0。 */}
+    <div className="flex items-start gap-1.5 border-t border-tita-line pt-1.5 text-[10px] text-tita-ink-muted">
+      <span className="shrink-0 pt-0.5 text-[9.5px] font-[650] text-tita-ink-faint">段</span>
+      <div className="flex min-w-0 flex-wrap gap-1">
+        {LANES.map(lane => {
+          const counts = laneCounts[lane.id]
+          const off = lanesOff.has(lane.id)
+          return <Chip
+            key={lane.id}
+            active={!off}
+            title={off ? `已关掉：这${lane.instance ? '一' : '一'}段整段不画` : `${lane.label} · ${lane.orderHint}`}
+            onClick={() => onToggleLane(lane.id)}
+          >
+            <span className={cn(off && 'line-through')}>{lane.ordinal} {lane.label}</span>
+            <span className="ml-1 font-mono text-[9.5px] opacity-70">{counts?.shown ?? 0}</span>
+            {counts && counts.total !== counts.shown && <span className="ml-0.5 font-mono text-[9.5px] opacity-60">/{counts.total}</span>}
+          </Chip>
+        })}
       </div>
     </div>
 
@@ -134,63 +246,99 @@ export function ToolRail({ layout, onLayout, onReset, kinds, onToggleKind, probl
   </ChromePanel>
 }
 
-/** 收起来之后留下的那颗药丸。收起不等于隐藏 —— 数字还在上面。 */
-export function ToolPill({ layout, kinds, problems, onClick }: {
+/** 收起来之后留下的那颗药丸。收起不等于隐藏 —— 布局与生效筛选数还在上面。 */
+export function ToolPill({ layout, filterCount, laneCount, onClick }: {
   layout: GraphLayout
-  kinds: ReadonlySet<AttributionNodeKind>
-  problems: ReadonlySet<ProblemClassId>
+  /** 生效的切面数（不含文本）。 */
+  filterCount: number
+  /** 会被画出来的节点数。 */
+  laneCount: number
   onClick: () => void
 }): ReactNode {
-  const active = kinds.size + problems.size
+  /**
+   * 0044：原来这里挂着一枚「N 条待确认的卡片提议」角标，现在没有它了。
+   *
+   * 那枚角标的紧迫感来自**确认门**：未确认的提议不落 `02_wiki/`，没人点头，
+   * 一次排查就等于白跑。门撤掉之后卡片直接入库、已经能召回，review 只是给它抬分 ——
+   * 「有 N 张还没人看过」不再是需要从归因图谱上催的事，它属于「知识库 → Wiki」那一屏。
+   * 留一枚不再紧急的角标，只会教人忽略角标。
+   */
   return <ChromePanel className="p-[3px]">
-    <Button size="sm" variant="ghost" className={MINI} onClick={onClick} title="展开问题大类、布局与类型筛选">
+    <span className="flex items-center gap-1">
+    <Button
+      size="sm"
+      variant="ghost"
+      className={MINI}
+      onClick={onClick}
+      title="展开四组切面：布局 → 问题定义 → 问题假设 → 检查点"
+    >
       <SlidersHorizontal size={12} />
-      {layout === 'force' ? '力导向' : '分层'}
-      {active > 0 && <span className="rounded-[4px] bg-tita-primary-soft px-1 font-mono text-[9.5px] text-tita-primary">{active}</span>}
+      {LAYOUT_LABEL[layout]}
+      {filterCount > 0 && <span className="rounded-[4px] bg-tita-primary-soft px-1 font-mono text-[9.5px] text-tita-primary">{filterCount} 项</span>}
+      <span className="font-mono text-[9.5px] text-tita-ink-faint">{laneCount}</span>
     </Button>
+    </span>
   </ChromePanel>
 }
 
-/* ───────────────────────────────────────────────── 右上：图例 + 全屏 ── */
+/* ─────────────────────────────────────────────── 画布右上：读法（四个同排） ── */
 
 /**
- * 右上角的一对图标按钮：展开图例、进出全屏。
+ * 右上角：**四个读法开关同排**（§7.1 的 v1.4 调整）。
  *
- * 为什么图例不直接摊开在右上角：**380px 的一行放不下两块面板**（工具条内容
- * 约 240px，图例配色至少 200px）。硬挤的结果是两块都变形 —— 所以这里只留
- * 「图例」这一个入口，展开的正文落到下一行右侧（`GraphStage` 的 `side` 槽），
- * 那里是整行宽度，放得下 9 种边和 4 条说明。
+ * 图例 · 全景 / 聚焦 · 保留 1 跳邻居 · 全屏 —— 这四个都是「怎么看这张图」，
+ * 既不是筛选也不是内容，所以集中在一处。原来「全景 / 聚焦」在右侧中部、
+ * 「保留 1 跳邻居」在底中，四件事散在三个角上，扫一遍要来回跳。
  *
- * 这也是「图例在右上角」的正确读法：**入口在右上角，正文跟着入口展开**，
- * 而不是把正文钉死在角上、盖住半张图。
+ * 全屏按钮**任何子视图都留着**：换个视图就丢掉出口，是这一轮最不该犯的错。
  */
-export function LegendToggle({ open, onToggle, full, onToggleFull, showLegend = true }: {
-  open: boolean
-  onToggle: () => void
+export function ReadBar({ legendOpen, onToggleLegend, showLegend, overview, onOverview,
+  includeNeighbors, onIncludeNeighbors, full, onToggleFull, showScope = true }: {
+  legendOpen: boolean
+  onToggleLegend: () => void
+  /** 案例 / 排查视图里没有图可读，图例、全景与邻居开关就没有对象。 */
+  showLegend: boolean
+  overview: boolean
+  onOverview: (value: boolean) => void
+  includeNeighbors: boolean
+  onIncludeNeighbors: (value: boolean) => void
   full: boolean
   onToggleFull: () => void
-  /**
-   * 案例 / 排查视图里没有图可读，图例就没有对象。
-   *
-   * 但**全屏按钮必须留下来**：全屏是「这一整块（含三个视图）占满视口」，
-   * 换个视图就丢掉出口，是这一轮最不该犯的错。
-   */
-  showLegend?: boolean
+  showScope?: boolean
 }): ReactNode {
-  return <ChromePanel className="flex items-center gap-1 p-[3px]">
+  return <ChromePanel className="flex items-center gap-[3px] p-[3px]">
     {showLegend && <Button
       size="sm"
-      variant={open ? 'default' : 'ghost'}
-      className="h-[22px] min-h-[22px] gap-1 px-1.5 text-[10.5px]"
-      aria-label={open ? '隐藏图例' : '显示图例'}
-      aria-expanded={open}
-      title={open ? '隐藏图例' : '显示图例：配色、九种边、空区与僵尸边'}
-      onClick={onToggle}
+      variant={legendOpen ? 'default' : 'ghost'}
+      className="h-[24px] min-h-[24px] gap-1 px-1.5 text-[10.5px]"
+      aria-label={legendOpen ? '隐藏图例' : '显示图例'}
+      aria-expanded={legendOpen}
+      title={legendOpen ? '隐藏图例' : '显示图例：配色、十种边、空区与僵尸边'}
+      onClick={onToggleLegend}
     ><CircleHelp size={12} />图例</Button>}
+
+    {showLegend && showScope && <Button
+      size="sm"
+      variant="ghost"
+      className="h-[24px] min-h-[24px] px-1.5 text-[10.5px]"
+      aria-pressed={!overview}
+      title={overview ? '聚焦：只看选中节点的 1 跳邻域' : '全景：看整张图'}
+      onClick={() => onOverview(!overview)}
+    >{overview ? '全景' : '聚焦'}</Button>}
+
+    {showLegend && showScope && <Button
+      size="sm"
+      variant="ghost"
+      className="h-[24px] min-h-[24px] px-1.5 text-[10.5px]"
+      aria-pressed={includeNeighbors}
+      title="保留 1 跳邻居：只留命中节点会让图散成孤点，边的语义一起丢"
+      onClick={() => onIncludeNeighbors(!includeNeighbors)}
+    >1 跳邻居</Button>}
+
     <Button
       size="icon"
-      variant="outline"
-      className="h-[22px] w-[22px] min-w-[22px]"
+      variant={full ? 'default' : 'outline'}
+      className="h-[24px] w-[24px] min-w-[24px]"
       aria-label={full ? '退出全屏' : '全屏查看'}
       title={full ? '退出全屏（Esc）' : '全屏查看：整个视口都用来放这块内容'}
       onClick={onToggleFull}
@@ -205,18 +353,18 @@ export function LegendToggle({ open, onToggle, full, onToggleFull, showLegend =
  * 用户会以为「图例已经开着」，而真正说明含义的那半仍然是藏着的。要么整块在，
  * 要么整块不在，状态才可读。
  *
- * **两个分组必须分开写。** 这里的五种颜色**全部是原因侧**（失败模式，挂在假设上），
+ * **两个分组必须分开写。** 这里的五种颜色**全部是原因侧**（失败原因，挂在假设上），
  * 一份只画颜色的图例会让人以为它在说「问题有哪几类」—— 这正是最常被看错的一处。
- * 所以原因侧明写「失败模式 · 原因侧」，问题侧（现象）单独一段、并且把
+ * 所以原因侧明写「失败原因 · 原因侧」，问题侧（现象）单独一段、并且把
  * 「现象节点有几个、有没有分类」如实报出来：**分类还没建的地方要看得见，而不是留白。**
  */
 export function LegendBody({ stats }: { stats: AttributionStats }): ReactNode {
   return <ChromePanel className="flex flex-col gap-1.5 p-2">
     <div className="text-[9.5px] leading-[14px] text-tita-ink-faint">
-      <span className="font-[650] text-tita-ink-muted">失败模式</span> · 原因侧（挂在假设上）
+      <span className="font-[650] text-tita-ink-muted">失败原因</span> · 原因侧（挂在假设上）
     </div>
     <div className="flex flex-wrap gap-1">
-      {Object.entries(FAILURE_MODE_STYLE).map(([key, tone]) => <span
+      {Object.entries(FAILURE_REASON_STYLE).map(([key, tone]) => <span
         key={key}
         className="flex items-center gap-1 rounded-md border px-1.5 py-0.5 text-[10px] leading-[15px]"
         style={{ borderColor: tone.stroke, background: tone.fill, color: tone.text }}
@@ -237,8 +385,8 @@ export function LegendBody({ stats }: { stats: AttributionStats }): ReactNode {
         >{item.label}</span>)}
       </div>
       <p className="text-[9.5px] leading-relaxed text-tita-ink-muted">
-        问题大类刻意不给颜色：颜色通道已经被失败模式占用。问题侧走文字 —— 现象节点下方的
-        徽标写着它属于哪个大类，左上的「问题」切面按大类收窄，并把它的检查一起带出来。
+        问题大类刻意不给颜色：颜色通道已经被失败原因占用。问题侧走文字 —— 现象节点下方的
+        徽标写着它属于哪个大类，左上的「问题定义」切面按大类收窄，并把它的检查一起带出来。
       </p>
     </div>
 
@@ -253,78 +401,59 @@ export function LegendBody({ stats }: { stats: AttributionStats }): ReactNode {
         </span>)}
       </div>
       <ul className="flex flex-col gap-0.5 text-[9.5px] leading-relaxed text-tita-ink-muted">
-        <li>圆的大小 = 复用次数；圆里是节点 id，标题挂在圆下方</li>
-        <li><span className="text-tita-danger">红色虚环 + 空区徽标</span> = 有假设但一条检查都没有（当前 {stats.gaps} 个）</li>
+        <li>圆的大小 = 复用次数（关系视图）；动线视图里每个节点都读得出名字</li>
+        <li><span className="text-tita-danger">红色虚环 + 空区徽标</span> = 有假设但一条检查点都没有（当前 {stats.gaps} 个）。动线视图里它就是「② 段右边没有线」</li>
         <li><span className="text-tita-ink-faint">灰色虚线</span> = 僵尸边，90 天未走（当前 {stats.zombies} 条）</li>
-        <li>实例层默认折叠 —— 它随每次排查线性增长，展开会把类型层挤成小点</li>
+        <li>⑤ 段（实际查询与结果）默认折叠 —— 它随每次排查线性增长；被点亮的那条链例外</li>
       </ul>
     </div>
   </ChromePanel>
 }
 
-/* ───────────────────────────────────────────── 底部中间：其余筛选 ── */
+/* ─────────────────────────────────────────────── 画布底中：只剩搜索 ── */
 
 /**
- * 底部中间的筛选条：文本、失败模式、邻居展开、清除。
+ * 底中：**只剩文本搜索 + 命中数**（§7.1 的 v1.4 调整）。
  *
- * 放在底部而不是顶部，是因为它是**读图之后的动作**：先看到形状，再收窄。
- * 而顶部的分层与类型是「决定这张图怎么画」，顺序相反。
+ * 失败原因切面上移到了左栏第 ③ 组，「保留 1 跳邻居」上移到了右上读法排。
+ * 搜索留在底中，因为它是**跨全图**的动作，不属于任何一段。
  */
-export function FilterBar({ query, onQuery, modes, onToggleMode, includeNeighbors, onIncludeNeighbors, filtering, onClear, hit, total }: {
+export function FilterBar({ query, onQuery, filtering, onClear, hit, total }: {
   query: string
   onQuery: (value: string) => void
-  modes: ReadonlySet<FailureMode>
-  onToggleMode: (mode: FailureMode) => void
-  includeNeighbors: boolean
-  onIncludeNeighbors: (value: boolean) => void
   filtering: boolean
   onClear: () => void
   hit: number
   total: number
 }): ReactNode {
-  return <ChromePanel className="flex w-[min(520px,100%)] flex-col gap-1.5 p-2">
-    <div className="flex items-center gap-1.5">
-      <div className="relative min-w-0 flex-1">
-        <Search size={12} className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 text-tita-ink-faint" />
-        <Input
-          value={query}
-          onChange={event => onQuery(event.target.value)}
-          placeholder="筛选节点：id / 标题 / 判据…"
-          className="h-[26px] min-h-[26px] pl-6 text-[11px]"
-        />
-      </div>
-      <span className="shrink-0 text-[10px] tabular-nums text-tita-ink-faint">命中 {hit}/{total}</span>
-      {filtering && <Button size="sm" variant="ghost" className={MINI} onClick={onClear}><X size={11} />清除</Button>}
-    </div>
-
-    <div className="flex items-start gap-1.5 text-[10px] text-tita-ink-muted">
-      <span className="shrink-0 pt-0.5 font-[650] text-tita-ink-faint">切面</span>
-      <div className="flex flex-wrap gap-1">
-        {Object.entries(FAILURE_MODE_STYLE).map(([key, tone]) => <Chip
-          key={key}
-          active={modes.has(key as FailureMode)}
-          color={tone.stroke}
-          onClick={() => onToggleMode(key as FailureMode)}
-        >{tone.label}</Chip>)}
-      </div>
-      <Chip active={includeNeighbors} onClick={() => onIncludeNeighbors(!includeNeighbors)} title="只留命中节点会让图散成孤点">
-        保留 1 跳邻居
-      </Chip>
+  return <ChromePanel className="flex w-[min(520px,100%)] items-center gap-1.5 p-2">
+    <div className="relative min-w-0 flex-1">
+      <Search size={12} className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 text-tita-ink-faint" />
+      <Input
+        value={query}
+        onChange={event => onQuery(event.target.value)}
+        placeholder="筛选节点：id / 标题 / 判据…"
+        className="h-[26px] min-h-[26px] pl-6 text-[11px]"
+      />
     </div>
+    <span className="shrink-0 text-[10px] tabular-nums text-tita-ink-faint">命中 {hit}/{total}</span>
+    {filtering && <Button size="sm" variant="ghost" className={MINI} onClick={onClear}><X size={11} />清除</Button>}
   </ChromePanel>
 }
 
-/* ───────────────────────────────────────────────── 右下：统计 ── */
+/* ─────────────────────────────────────────────── 画布左下：读数 ── */
 
 /**
- * 右下角统计。
+ * 左下角统计：**从右下搬来**（§7.1 的 v1.4 调整）。
+ *
+ * 搬家的理由是左列因此形成「上面改、下面读」的一列，而右下让给图例 / 详情的展开正文。
  *
  * 只放**随筛选变化**的数：它回答的是「我现在看的这张图有多大、缺多少」。
- * 图例里已经写了空区/僵尸的含义，这里只给数，不重复解释。
+ * 图例里已经写了空区 / 僵尸边的含义，这里只给数，不重复解释。
  *
- * 数据来源徽标（`05_diagnosis` / `seed 数据`）也挂在这里：它和这些数一样是
- * 「这份内容从哪来」的事实，而且它必须始终可见 —— 看到的是真数据还是兜底样例，
- * 不能靠猜。
+ * 数据来源徽标（`02_wiki/diagnosis` / `05_diagnosis（旧格式）`）也挂在这里：它和这些数
+ * 一样是「这份内容从哪来」的事实，而且它必须始终可见 —— 看到的是卡片还是旧格式的
+ * jsonl，不能靠猜。
  */
 export function StatsStrip({ stats, source, problems }: {
   stats: AttributionStats
@@ -332,7 +461,7 @@ export function StatsStrip({ stats, source, problems }: {
   /** 编译 / 迁移过程中发现的问题。空数组表示一切正常。 */
   problems: string[]
 }): ReactNode {
-  return <ChromePanel className="flex flex-wrap items-center gap-x-2 gap-y-0.5 px-2 py-1">
+  return <ChromePanel className="flex w-[min(200px,100%)] flex-wrap items-center gap-x-2 gap-y-0.5 px-2 py-1">
     <Stat label="类型" value={stats.typeNodes} />
     <Divider />
     <Stat label="引用" value={stats.referenceNodes} />
@@ -348,24 +477,23 @@ export function StatsStrip({ stats, source, problems }: {
       title={problems.join('\n')}
     >{problems.length} 个问题</span>}
     <span
-      className="ml-auto shrink-0 rounded-[4px] bg-tita-surface-muted px-1 font-mono text-[9.5px] text-tita-ink-faint"
-      title={SOURCE_HINT[source] ?? SOURCE_HINT['seed 数据']}
-    >{source}</span>
+      className="w-full shrink-0 truncate font-mono text-[9.5px] text-tita-ink-faint"
+      title={SOURCE_HINT[source] ?? source}
+    >来源 {source}</span>
   </ChromePanel>
 }
 
 /**
  * 数据来源的说明。
  *
- * 这里必须能分清三种形态，因为它们意味着不同的可信度：卡片是当前真相，
- * `05_diagnosis` 是**旧格式**（迁移没能无损生效），`seed 数据` 是宿主没就绪时的兜底示例。
- * 一句笼统的「05_diagnosis」会把它们混成一种，而这正是最不该让人猜的地方。
+ * 这里必须能分清两种形态，因为它们意味着不同的可信度：`02_wiki/diagnosis` 是当前真相
+ * （卡片），`05_diagnosis（旧格式）` 意味着迁移没能无损生效。一句笼统的「05_diagnosis」
+ * 会把它们混成一种，而这正是最不该让人猜的地方。
  */
 const SOURCE_HINT: Record<string, string> = {
   '02_wiki/diagnosis': '来自 wiki 卡片（诊断卡片是当前唯一的真相）',
   '05_diagnosis（旧格式）': '旧格式 jsonl：迁移会丢知识，因此仍按原样读',
-  '05_diagnosis': '来自 05_diagnosis 目录',
-  'seed 数据': '宿主未就绪，当前展示的是内置示例',
+  '还没有排查知识': '这个知识库还没有排查知识',
 }
 
 function Divider(): ReactNode {
@@ -382,9 +510,9 @@ function Stat({ label, value, tone }: { label: string; value: number; tone?: 'wa
   </span>
 }
 
-/* ───────────────────────────────────────────── 选中节点详情卡 ── */
+/* ─────────────────────────────────────────────── 画布右侧：选中节点详情 ── */
 
-export function NodeDetailCard({ node }: { node: AttributionNode }): ReactNode {
+export function NodeDetailCard({ node, onClear }: { node: AttributionNode; onClear?: () => void }): ReactNode {
   return <ChromePanel className="flex flex-col gap-1.5 p-2">
     <div className="flex items-start justify-between gap-2">
       <span className="text-[11.5px] font-semibold leading-snug">{node.title}</span>
@@ -393,11 +521,23 @@ export function NodeDetailCard({ node }: { node: AttributionNode }): ReactNode {
     {node.summary && <p className="text-[10.5px] leading-relaxed text-tita-ink-muted">{node.summary}</p>}
     <div className="flex flex-wrap gap-1">
       <Badge tone="neutral">{NODE_KIND_LABEL[node.kind]}</Badge>
-      {node.failureMode && <Badge tone="violet">{FAILURE_MODE_STYLE[node.failureMode].label}</Badge>}
+      {node.failureReason && <Badge tone="violet">{FAILURE_REASON_STYLE[node.failureReason].label}</Badge>}
+      {node.problemClass && <Badge tone="neutral">{PROBLEM_CLASS_LABEL[node.problemClass]}</Badge>}
       {node.reuseCount !== undefined && <Badge tone="neutral">复用 {node.reuseCount}</Badge>}
       {node.costMinutes !== undefined && <Badge tone={node.automation === 'auto' ? 'success' : 'warning'}>
         {node.costMinutes} min · {node.automation === 'auto' ? '自动' : '人工'}
       </Badge>}
     </div>
+    {/* 检查点的查询依据：它落在 `queries` 边上，从节点本身读不出来。 */}
+    {node.assets && node.assets.length > 0 && <p className="text-[10px] leading-snug text-tita-ink-faint">
+      要去查：{node.assets.join(' · ')}
+    </p>}
+    {node.discriminator && <p className="text-[10px] leading-snug text-tita-ink-muted">判据：{node.discriminator}</p>}
+    {node.why && <p className="text-[10px] leading-snug text-tita-ink-muted">为什么算数：{node.why}</p>}
+    {onClear && <button
+      type="button"
+      onClick={onClear}
+      className="mt-0.5 flex items-center gap-1 self-start rounded-md px-1 py-0.5 text-[10px] text-tita-ink-faint hover:text-tita-ink focus-visible:outline-[3px] focus-visible:outline-offset-1 focus-visible:outline-tita-focus-ring"
+    ><ChevronRight size={10} />取消点亮，回到全亮</button>}
   </ChromePanel>
 }