dsh-data-domain-knowledge 0.1.0-alpha.1

package/src/client/attribution/RunView.tsx

@@ -0,0 +1,184 @@
+import { CircleHelp, CircleX, Lightbulb, PenLine, Play, TriangleAlert } from '@tita-data-agent/ui/icons'
+import { useMemo, type ReactNode } from 'react'
+import { Badge, Button, Card, cn } from '@tita-data-agent/ui/components'
+import {
+  candidatesOf, problemBadgeOf, PROBLEM_CLASS_LABEL, SAMPLE_SIZE,
+  type AttributionGraphData, type AttributionNode,
+} from './model.ts'
+import { SEED_CASES } from '../../diagnosis/seed.js'
+
+/**
+ * 本文件里凡是没有共享 Tailwind 工具类的颜色（tone 墨色、强调环、红色底边）都走行内
+ * `style`：工具类只在 packages/ui 构建时按「源码里出现过的类」生成，而插件不能改
+ * packages/ui。行内值仍然是共享令牌，所以主题照常跟着 `body[data-ds-dark-theme]` 翻。
+ *
+ * 排查视图：把候选假设按优先分排出来，每个候选挂上它的检查。
+ *
+ * 一条硬约束：**每个检查必须有一个主操作**（自动 → 执行；人工 → 派单）。
+ * 只展示文本不给操作，等于把这张图变回了一篇文档 —— 那正是 0021 §7.2 要挡掉的东西。
+ *
+ * 排序与优先分全部来自 `candidatesOf()`，界面不自己再算一遍「哪个该先查」。
+ */
+export function RunView({ data, symptoms, symptomId, onSymptomChange, onSelectNode }: {
+  data: AttributionGraphData
+  /** 可选的现象清单。**必须能切**：不同现象共享同一批假设，候选排序也各不相同。 */
+  symptoms: AttributionNode[]
+  symptomId: string
+  onSymptomChange: (id: string) => void
+  onSelectNode: (id: string) => void
+}): ReactNode {
+  const candidates = useMemo(() => candidatesOf(data, symptomId), [data, symptomId])
+  const symptom = data.nodes.find(node => node.id === symptomId)
+
+  /** 来源归因：这次排序把哪些案例的路径算进去了。锚定风险靠它显式可见。 */
+  const sourcesOf = (hypothesisId: string): string[] =>
+    SEED_CASES.filter(item => item.path.some(step => step.nodeId === hypothesisId) || item.misleading?.nodeId === hypothesisId)
+      .map(item => item.id.replace('CASE-', '#'))
+
+  const gapCandidate = candidates.find(candidate => candidate.gap)
+  const ranked = candidates.filter(candidate => !candidate.gap)
+
+  return <div className="flex flex-col gap-3">
+    {/* 现象切换：三个不同的现象会得到三份不同的排序 —— 这正是「共享假设空间」的证据。 */}
+    {symptoms.length > 1 && <div className="flex flex-wrap gap-1.5">
+      {symptoms.map(item => <Button
+        key={item.id}
+        size="sm"
+        variant={item.id === symptomId ? 'default' : 'outline'}
+        onClick={() => onSymptomChange(item.id)}
+        title={problemBadgeOf(item) ?? '未分类'}
+      >{item.problemClass ? PROBLEM_CLASS_LABEL[item.problemClass] : '未分类'} · {item.title}</Button>)}
+    </div>}
+
+    <header className="flex items-start justify-between gap-2">
+      <div className="min-w-0">
+        <h3 className="text-[12.5px] font-semibold">{symptom?.title ?? symptomId}</h3>
+        <p className="mt-0.5 text-[10.5px] leading-snug text-tita-ink-muted">
+          优先分 = 根因占比 ÷ 检查成本 · 样本量 {SAMPLE_SIZE} 次（近 30 天）
+        </p>
+      </div>
+      <Badge tone="blue">{candidates.length + (gapCandidate ? 1 : 0)} 个候选</Badge>
+    </header>
+
+    <ol className="flex flex-col gap-2">
+      {ranked.map((candidate, index) => <li key={candidate.hypothesis.id}>
+        <Card
+          className={cn('gap-2 p-2.5', index === 0 && 'border-tita-primary')}
+          style={index === 0 ? { boxShadow: '0 0 0 1px var(--tita-primary-wash)' } : undefined}
+        >
+          <div className="flex items-start gap-2">
+            <span className={cn(
+              'mt-0.5 inline-flex h-[20px] w-[20px] shrink-0 items-center justify-center rounded-full text-[10.5px] font-semibold',
+              index === 0 ? 'bg-tita-primary-soft text-tita-primary' : 'bg-tita-canvas text-tita-ink-muted',
+            )}>{index + 1}</span>
+            <div className="min-w-0 flex-1">
+              <button type="button" className="border-0 bg-transparent p-0 text-left font-[inherit] text-[12px] font-semibold hover:underline" onClick={() => onSelectNode(candidate.hypothesis.id)}>
+                {candidate.hypothesis.title}
+              </button>
+              <p className="mt-0.5 text-[10.5px] leading-snug text-tita-ink-muted">{candidate.hypothesis.summary}</p>
+            </div>
+            <span className={cn('shrink-0 text-[12px] font-semibold', index === 0 ? 'text-tita-primary' : 'text-tita-ink-muted')}>
+              {candidate.score.toFixed(1)}
+            </span>
+          </div>
+
+          <div className="flex flex-wrap gap-1">
+            <Chip>根因占比 {Math.round(candidate.prior * 100)}%</Chip>
+            <Chip>成本 {candidate.costMinutes ?? '?'} min</Chip>
+            <Chip tone={candidate.checks[0]?.automation === 'auto' ? 'green' : 'amber'}>
+              {candidate.checks[0]?.automation === 'auto' ? '自动可执行' : '需人工'}
+            </Chip>
+            <Chip>{candidate.hypothesis.reuseCount ?? 0} 个案例</Chip>
+          </div>
+
+          {/* 来源归因：把「这次排序被谁影响」摊开，否则锚定是无声的。 */}
+          <p className="text-[10px] text-tita-ink-faint">
+            来源：{sourcesOf(candidate.hypothesis.id).join(' · ') || '切面先验'} · 切面 {candidate.hypothesis.failureMode ?? '未标注'}
+          </p>
+
+          <div className="flex flex-col gap-1">
+            {candidate.checks.map(check => <div key={check.id} className="flex items-center gap-2 rounded-md bg-tita-surface-muted px-2 py-1">
+              <Play size={12} className="shrink-0" style={{ color: 'var(--tita-tone-violet)' }} />
+              <button type="button" className="min-w-0 flex-1 truncate border-0 bg-transparent p-0 text-left font-mono text-[10.5px] hover:underline" onClick={() => onSelectNode(check.id)}>
+                {check.id} {check.title}
+              </button>
+              <Button size="sm" variant="outline" onClick={() => onSelectNode(check.id)}>
+                {check.automation === 'auto' ? '执行' : '派单'}
+              </Button>
+            </div>)}
+          </div>
+        </Card>
+      </li>)}
+    </ol>
+
+    {/* 空区候选：有假设、无检查。它不是「其他」，是「这张图还没建完」。 */}
+    {gapCandidate && <Card className="gap-1.5 border-dashed p-2.5">
+      <div className="flex items-center gap-2">
+        <Lightbulb size={14} className="shrink-0" style={{ color: 'var(--tita-tone-amber)' }} />
+        <button type="button" className="min-w-0 flex-1 border-0 bg-transparent p-0 text-left font-[inherit] text-[12px] font-semibold hover:underline" onClick={() => onSelectNode(gapCandidate.hypothesis.id)}>
+          {gapCandidate.hypothesis.title}
+        </button>
+        <Badge tone="warning">空区 · 无检查</Badge>
+      </div>
+      <p className="text-[10.5px] leading-snug text-tita-ink-muted">
+        {gapCandidate.hypothesis.summary}
+      </p>
+      <p className="text-[10px] text-tita-ink-faint">
+        它拿不出任何可执行的检查，所以进不了排序 —— 图谱视图里的红虚环就是它。
+      </p>
+    </Card>}
+
+    <Card className="gap-1.5 border-dashed p-2.5">
+      <div className="flex items-center gap-2">
+        <CircleHelp size={14} className="shrink-0" style={{ color: 'var(--tita-tone-amber)' }} />
+        <span className="flex-1 text-[12px] font-semibold">未归类（假设空间之外）</span>
+        <Button size="sm">登记新假设</Button>
+      </div>
+      <p className="text-[10.5px] leading-snug text-tita-ink-muted">
+        近 30 天 8 次 · 占比 20% —— 它是重量抽象的触发器，不是兜底话术。
+      </p>
+    </Card>
+
+    {/* 路径条：一次点击写回，否定边与误导边同样是要写回的内容。 */}
+    <Card className="gap-2 p-2.5">
+      <div className="flex items-center gap-1.5 text-[10px] tracking-wide text-tita-ink-muted">
+        <PenLine size={12} />本次路径
+      </div>
+      <div className="flex flex-wrap items-center gap-1">
+        {['S1', 'H1', 'T1.1', 'E1', 'C1'].map((id, index, all) => <span key={id} className="flex items-center gap-1">
+          <span className="rounded-md border border-tita-line bg-tita-surface-muted px-1.5 py-0.5 font-mono text-[10px]">{id}</span>
+          {index < all.length - 1 && <span className="text-[10px] text-tita-ink-faint">→</span>}
+        </span>)}
+        <span className="flex items-center gap-1">
+          <span className="text-[10px] text-tita-ink-faint">+</span>
+          <span
+            className="flex items-center gap-1 rounded-md border border-dashed px-1.5 py-0.5 font-mono text-[10px] text-tita-danger"
+            style={{ borderColor: 'var(--ddk-danger-line)', background: 'var(--ddk-danger-tint)' }}
+          >
+            <CircleX size={10} />H7
+          </span>
+        </span>
+      </div>
+      <p className="text-[10px] text-tita-ink-faint">
+        <TriangleAlert size={10} className="mr-1 inline align-[-1px]" />
+        被否定，记为误导边 —— 否定也是要写回的内容。
+      </p>
+      <Button className="w-full" size="sm">写回图谱（记录本次路径）</Button>
+    </Card>
+  </div>
+}
+
+function Chip({ children, tone }: { children: ReactNode; tone?: 'green' | 'amber' }): ReactNode {
+  const toneStyle = tone === 'green'
+    ? { borderColor: 'var(--tita-tone-green-line)', background: 'var(--tita-tone-green-tint)', color: 'var(--tita-tone-green)' }
+    : tone === 'amber'
+      ? { borderColor: 'var(--tita-tone-amber-line)', background: 'var(--tita-tone-amber-tint)', color: 'var(--tita-tone-amber)' }
+      : undefined
+  return <span
+    className={cn(
+      'rounded-md border px-1.5 py-0.5 text-[10px]',
+      !tone && 'border-tita-line bg-tita-surface-muted text-tita-ink-muted',
+    )}
+    style={toneStyle}
+  >{children}</span>
+}

package/src/client/attribution/StageChrome.tsx

@@ -0,0 +1,403 @@
+import {
+  ChevronDown, CircleHelp, 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'
+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,
+} from './model.ts'
+
+/**
+ * 图谱四周的浮层组件。
+ *
+ * 这一层只做**呈现**：所有状态和判定都在 `AttributionTab` / `model.ts` 里，组件本身
+ * 不读数据、不算分数、不改状态。这样「浮层放在哪个角」这种纯排版决定可以随时改，
+ * 而不会牵动任何业务逻辑 —— 而这恰恰是这一轮改动的主要内容。
+ *
+ * 每条浮层都走同一个面板原语 `ChromePanel`：半透明白底 + 细描边 + 轻阴影。
+ * 之所以不各写一套边框，是因为它们都盖在画布上，**任何一条比别的更重都会把注意力
+ * 从图上偷走**。统一是这里唯一正确的风格决定。
+ *
+ * 半透明底与 tone 墨色走行内 `style`：`bg-tita-surface/95`、`text-tita-tone-*` 这类
+ * 工具类在 packages/ui 的构建产物里不存在（工具类只按「源码里出现过的类」生成，而
+ * 插件不能改 packages/ui），所以这里直接给共享令牌。阴影仍是字面量（见仓库约定）。
+ */
+export function ChromePanel({ className, children }: { className?: string; children: ReactNode }): ReactNode {
+  return <div
+    className={cn(
+      'rounded-[10px] border border-tita-line shadow-[0_2px_10px_rgb(15_23_42_/_0.08)] backdrop-blur-[2px]',
+      className,
+    )}
+    style={{ background: 'color-mix(in srgb, var(--tita-surface) 95%, transparent)' }}
+  >{children}</div>
+}
+
+/** 浮层里的小按钮：比标准 `sm` 再矮 4px，否则一条 380px 宽的浮层会被按钮撑到两行。 */
+const MINI = 'h-[26px] min-h-[26px] px-2 text-[11px] font-[600]'
+
+/** 可多选的切面 chip。选中态用描边而不是填色：填色会把失败模式的语义色盖掉。 */
+export function Chip({ active, color, onClick, children, title }: {
+  active: boolean
+  color?: string
+  onClick: () => void
+  children: ReactNode
+  title?: string
+}): ReactNode {
+  return <button
+    type="button"
+    onClick={onClick}
+    aria-pressed={active}
+    title={title}
+    className={cn(
+      'rounded-md border px-1.5 py-0.5 text-[10px] leading-[15px]',
+      active
+        // 选中态必须**显式**给边框色：没有 preflight 时 <button> 的 border-color 会退回
+        // 浏览器的 ButtonBorder（近黑），于是「选中」看起来比「未选中」还脏。
+        ? 'border-tita-primary bg-tita-primary-soft font-medium text-tita-primary'
+        : 'border-tita-line bg-tita-surface text-tita-ink-muted hover:border-tita-line-strong',
+    )}
+    style={active && color ? { borderColor: color, color } : undefined}
+  >{children}</button>
+}
+
+/* ───────────────────────────────────────────────── 左上：分层 + 类型 ── */
+
+/**
+ * 左上角工具条：**布局**（这张图怎么摆）与**类型切面**（看哪些节点）。
+ *
+ * 两件事放在一起是因为它们都是「改变我看到的这张图」，而失败模式/文本筛选是
+ * 「在图里找东西」—— 后者留在底部，前者贴住左上，动线上就不互相打架。
+ *
+ * 宽度钉在 240px：它是**这一行左侧能拿到的全部预算**（380px 侧栏减内边距、
+ * 再减右上角那对图标按钮）。不写成自适应是因为自适应在窄容器里会先压扁
+ * 「力导向 / 分层」这两个按钮，正好是最不该被压的两个。
+ */
+export function ToolRail({ layout, onLayout, onReset, kinds, onToggleKind, problems, onToggleProblem, symptomCounts, hint, onCollapse }: {
+  layout: GraphLayout
+  onLayout: (layout: GraphLayout) => void
+  onReset: () => void
+  kinds: ReadonlySet<AttributionNodeKind>
+  onToggleKind: (kind: AttributionNodeKind) => void
+  /** 问题大类切面。它排在类型之前 —— 「哪类问题」比「哪些节点」更靠前。 */
+  problems: ReadonlySet<ProblemClassId>
+  onToggleProblem: (id: ProblemClassId) => void
+  symptomCounts: Record<ProblemClassId, number>
+  hint: string
+  onCollapse: () => void
+}): ReactNode {
+  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>
+    </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>)}
+      </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>)}
+      </div>
+    </div>
+
+    <p className="text-[9.5px] leading-snug text-tita-ink-faint">{hint}</p>
+  </ChromePanel>
+}
+
+/** 收起来之后留下的那颗药丸。收起不等于隐藏 —— 数字还在上面。 */
+export function ToolPill({ layout, kinds, problems, onClick }: {
+  layout: GraphLayout
+  kinds: ReadonlySet<AttributionNodeKind>
+  problems: ReadonlySet<ProblemClassId>
+  onClick: () => void
+}): ReactNode {
+  const active = kinds.size + problems.size
+  return <ChromePanel className="p-[3px]">
+    <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>}
+    </Button>
+  </ChromePanel>
+}
+
+/* ───────────────────────────────────────────────── 右上：图例 + 全屏 ── */
+
+/**
+ * 右上角的一对图标按钮：展开图例、进出全屏。
+ *
+ * 为什么图例不直接摊开在右上角：**380px 的一行放不下两块面板**（工具条内容
+ * 约 240px，图例配色至少 200px）。硬挤的结果是两块都变形 —— 所以这里只留
+ * 「图例」这一个入口，展开的正文落到下一行右侧（`GraphStage` 的 `side` 槽），
+ * 那里是整行宽度，放得下 9 种边和 4 条说明。
+ *
+ * 这也是「图例在右上角」的正确读法：**入口在右上角，正文跟着入口展开**，
+ * 而不是把正文钉死在角上、盖住半张图。
+ */
+export function LegendToggle({ open, onToggle, full, onToggleFull, showLegend = true }: {
+  open: boolean
+  onToggle: () => void
+  full: boolean
+  onToggleFull: () => void
+  /**
+   * 案例 / 排查视图里没有图可读，图例就没有对象。
+   *
+   * 但**全屏按钮必须留下来**：全屏是「这一整块（含三个视图）占满视口」，
+   * 换个视图就丢掉出口，是这一轮最不该犯的错。
+   */
+  showLegend?: boolean
+}): ReactNode {
+  return <ChromePanel className="flex items-center gap-1 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}
+    ><CircleHelp size={12} />图例</Button>}
+    <Button
+      size="icon"
+      variant="outline"
+      className="h-[22px] w-[22px] min-w-[22px]"
+      aria-label={full ? '退出全屏' : '全屏查看'}
+      title={full ? '退出全屏（Esc）' : '全屏查看：整个视口都用来放这块内容'}
+      onClick={onToggleFull}
+    >{full ? <Minimize2 size={12} /> : <Maximize2 size={12} />}</Button>
+  </ChromePanel>
+}
+
+/**
+ * 图例正文：**整块由 `open` 控制**。
+ *
+ * 不做「配色常显、说明可折」的分层 —— 那样关掉图例时角上仍留着一排颜色块，
+ * 用户会以为「图例已经开着」，而真正说明含义的那半仍然是藏着的。要么整块在，
+ * 要么整块不在，状态才可读。
+ *
+ * **两个分组必须分开写。** 这里的五种颜色**全部是原因侧**（失败模式，挂在假设上），
+ * 一份只画颜色的图例会让人以为它在说「问题有哪几类」—— 这正是最常被看错的一处。
+ * 所以原因侧明写「失败模式 · 原因侧」，问题侧（现象）单独一段、并且把
+ * 「现象节点有几个、有没有分类」如实报出来：**分类还没建的地方要看得见，而不是留白。**
+ */
+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> · 原因侧（挂在假设上）
+    </div>
+    <div className="flex flex-wrap gap-1">
+      {Object.entries(FAILURE_MODE_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 }}
+      >
+        <span className="inline-block h-2 w-2 rounded-full" style={{ background: tone.stroke }} />{tone.label}
+      </span>)}
+    </div>
+
+    <div className="flex flex-col gap-1 border-t border-tita-line pt-1.5">
+      <div className="text-[9.5px] leading-[14px] text-tita-ink-faint">
+        <span className="font-[650] text-tita-ink-muted">问题</span> · 现象侧（{stats.symptoms} 个现象节点 / {stats.problemClasses} 个大类）
+      </div>
+      <div className="flex flex-wrap gap-1">
+        {PROBLEM_CLASSES.map(item => <span
+          key={item.id}
+          className="rounded-md border border-tita-line bg-tita-surface-muted px-1.5 py-0.5 text-[10px] leading-[15px] text-tita-ink-muted"
+          title={item.cue}
+        >{item.label}</span>)}
+      </div>
+      <p className="text-[9.5px] leading-relaxed text-tita-ink-muted">
+        问题大类刻意不给颜色：颜色通道已经被失败模式占用。问题侧走文字 —— 现象节点下方的
+        徽标写着它属于哪个大类，左上的「问题」切面按大类收窄，并把它的检查一起带出来。
+      </p>
+    </div>
+
+    <div className="flex flex-col gap-1.5 border-t border-tita-line pt-1.5">
+      <div className="flex flex-wrap gap-x-2 gap-y-1">
+        {EDGE_LEGEND.map(edge => <span key={edge.kind} className="flex items-center gap-1 text-[9.5px] text-tita-ink-muted">
+          <svg width="16" height="6" aria-hidden="true"><line
+            x1="0" y1="3" x2="16" y2="3"
+            stroke={edge.stroke} strokeWidth={edge.lineWidth}
+            strokeDasharray={edge.lineDash?.join(' ')}
+          /></svg>{edge.label}
+        </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><span className="text-tita-ink-faint">灰色虚线</span> = 僵尸边，90 天未走（当前 {stats.zombies} 条）</li>
+        <li>实例层默认折叠 —— 它随每次排查线性增长，展开会把类型层挤成小点</li>
+      </ul>
+    </div>
+  </ChromePanel>
+}
+
+/* ───────────────────────────────────────────── 底部中间：其余筛选 ── */
+
+/**
+ * 底部中间的筛选条：文本、失败模式、邻居展开、清除。
+ *
+ * 放在底部而不是顶部，是因为它是**读图之后的动作**：先看到形状，再收窄。
+ * 而顶部的分层与类型是「决定这张图怎么画」，顺序相反。
+ */
+export function FilterBar({ query, onQuery, modes, onToggleMode, includeNeighbors, onIncludeNeighbors, 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>
+    </div>
+  </ChromePanel>
+}
+
+/* ───────────────────────────────────────────────── 右下：统计 ── */
+
+/**
+ * 右下角统计。
+ *
+ * 只放**随筛选变化**的数：它回答的是「我现在看的这张图有多大、缺多少」。
+ * 图例里已经写了空区/僵尸的含义，这里只给数，不重复解释。
+ *
+ * 数据来源徽标（`05_diagnosis` / `seed 数据`）也挂在这里：它和这些数一样是
+ * 「这份内容从哪来」的事实，而且它必须始终可见 —— 看到的是真数据还是兜底样例，
+ * 不能靠猜。
+ */
+export function StatsStrip({ stats, source, problems }: {
+  stats: AttributionStats
+  source: string
+  /** 编译 / 迁移过程中发现的问题。空数组表示一切正常。 */
+  problems: string[]
+}): ReactNode {
+  return <ChromePanel className="flex 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} />
+    <Divider />
+    <Stat label="复用" value={stats.reuseTotal} />
+    <Divider />
+    <Stat label="空区" value={stats.gaps} tone={stats.gaps > 0 ? 'warning' : undefined} />
+    <Divider />
+    <Stat label="僵尸边" value={stats.zombies} tone={stats.zombies > 0 ? 'muted' : undefined} />
+    {problems.length > 0 && <span
+      className="shrink-0 rounded-[4px] border px-1 text-[9.5px] text-tita-danger"
+      style={{ borderColor: 'var(--ddk-danger-line)', background: 'var(--ddk-danger-tint)' }}
+      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>
+  </ChromePanel>
+}
+
+/**
+ * 数据来源的说明。
+ *
+ * 这里必须能分清三种形态，因为它们意味着不同的可信度：卡片是当前真相，
+ * `05_diagnosis` 是**旧格式**（迁移没能无损生效），`seed 数据` 是宿主没就绪时的兜底示例。
+ * 一句笼统的「05_diagnosis」会把它们混成一种，而这正是最不该让人猜的地方。
+ */
+const SOURCE_HINT: Record<string, string> = {
+  '02_wiki/diagnosis': '来自 wiki 卡片（诊断卡片是当前唯一的真相）',
+  '05_diagnosis（旧格式）': '旧格式 jsonl：迁移会丢知识，因此仍按原样读',
+  '05_diagnosis': '来自 05_diagnosis 目录',
+  'seed 数据': '宿主未就绪，当前展示的是内置示例',
+}
+
+function Divider(): ReactNode {
+  return <span aria-hidden="true" className="h-3 w-px shrink-0 bg-tita-line" />
+}
+
+function Stat({ label, value, tone }: { label: string; value: number; tone?: 'warning' | 'muted' }): ReactNode {
+  return <span className="flex shrink-0 items-baseline gap-1" title={label}>
+    <span className="text-[9.5px] text-tita-ink-faint">{label}</span>
+    <span
+      className={cn('text-[12px] font-[700] tabular-nums', !tone && 'text-tita-ink')}
+      style={tone ? { color: tone === 'warning' ? 'var(--tita-tone-amber)' : 'var(--tita-ink-faint)' } : undefined}
+    >{value}</span>
+  </span>
+}
+
+/* ───────────────────────────────────────────── 选中节点详情卡 ── */
+
+export function NodeDetailCard({ node }: { node: AttributionNode }): 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>
+      <span className="shrink-0 font-mono text-[9.5px] text-tita-ink-faint">{node.id}</span>
+    </div>
+    {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.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>
+  </ChromePanel>
+}