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

package/src/client/attribution/AttributionTab.tsx

@@ -2,8 +2,8 @@ import {
   CircleDot, Database, GitBranch, History, Sparkles, Stethoscope, X,
 } from '@tita-agent/ui/icons'
 import { useCallback, useEffect, useMemo, useState, type ReactNode } from 'react'
-import { createPortal } from 'react-dom'
 import { Button } from '@tita-agent/ui/components'
+import { Dialog, DialogContent, DialogTitle } from '@tita-agent/ui/overlays'
 import { AttributionGraph } from './AttributionGraph.tsx'
 import { CaseView } from './CaseView.tsx'
 import { EventView } from './EventView.tsx'
@@ -37,8 +37,9 @@ interface DiagnosisPayload {
 
 /** 服务端的三种来源 → 徽标上那句人话。 */
 function sourceLabelOf(source: string | undefined): string {
-  if (source === 'cards') return '02_wiki/diagnosis'
-  if (source === 'jsonl') return '05_diagnosis（旧格式）'
+  if (source === 'cards') return '可复用诊断卡片'
+  if (source === 'records') return 'Event 与排查记录'
+  if (source === 'jsonl') return '旧格式历史快照'
   return '还没有排查知识'
 }
 
@@ -224,10 +225,9 @@ export function AttributionTab({ visible, activeQuestion, onOpenKnowledge }: {
   }, [visible, reloadToken, applyPayload])
 
   /**
-   * 载入内置示例：**显式的一次写**，写进的是这个库自己的 `01_source_raw/` 与 `02_wiki/`。
+   * 载入内置示例：**显式的一次写**，将来源记录与可复用诊断卡写入当前知识库。
    *
-   * 载完重新读一次，让图、案例、来源徽标全部换成真实数据 —— 载入之后它们就是普通卡片，
-   * 可以照常改、照常删，所以说明里必须把这件事讲清楚。
+   * 载完重新读一次，让图、只读排查视图、来源徽标全部换成当前库的数据。
    */
   const loadSample = async (): Promise<void> => {
     setSampleBusy(true); setSampleError(null)
@@ -236,7 +236,7 @@ export function AttributionTab({ visible, activeQuestion, onOpenKnowledge }: {
       const body = await response.json() as { ok?: boolean; data?: DiagnosisPayload; error?: { message?: string } }
       if (!response.ok || body.ok === false) throw new Error(body.error?.message ?? `HTTP ${response.status}`)
       applyPayload(body.data ?? {})
-      setSampleNotice('已载入内置示例：4 份来源写进 01_source_raw/，26 张卡片写进 02_wiki/diagnosis/。它们就是普通来源与卡片，可以照常改或删。')
+      setSampleNotice('已载入内置示例：7 条来源记录、23 张可复用诊断卡；3 条排查记录以只读案例视图呈现。')
     } catch (error) {
       setSampleError(error instanceof Error ? error.message : String(error))
     } finally {
@@ -245,22 +245,21 @@ export function AttributionTab({ visible, activeQuestion, onOpenKnowledge }: {
   }
 
   /**
-   * 全屏期间锁住宿主页面的滚动。
+   * 全屏期间的滚动锁。
    *
    * 只把浮层铺满视口是不够的：滚轮落在浮层的非画布区域上时，事件会冒泡给宿主，
    * 背后的页面照样滚。锁 `body` 是这里唯一简单可靠的做法（宿主用的是文档级滚动），
    * 退出时按原值还原而不是写死 `''`。
+   *
+   * 焦点**不在这里管**：全屏那一层现在是共享的 Radix `Dialog`，它自带焦点移入、
+   * 焦点圈定与关闭后还原。原来这一层只有 Escape + 滚动锁 —— 焦点留在面板里，Tab
+   * 一路走到背后的按钮上，而背景既没有 inert 也没有读屏的边界。
    */
   useEffect(() => {
     if (!full) return
     const previous = document.body.style.overflow
     document.body.style.overflow = 'hidden'
-    const onKeyDown = (event: KeyboardEvent): void => { if (event.key === 'Escape') setFull(false) }
-    window.addEventListener('keydown', onKeyDown)
-    return () => {
-      document.body.style.overflow = previous
-      window.removeEventListener('keydown', onKeyDown)
-    }
+    return () => { document.body.style.overflow = previous }
   }, [full])
 
   const filter = useMemo(
@@ -636,12 +635,21 @@ export function AttributionTab({ visible, activeQuestion, onOpenKnowledge }: {
   }
 
   if (full) {
-    return createPortal(
-      <div
-        role="dialog"
-        aria-modal="true"
-        aria-label="智能归因全屏视图"
-        className="fixed inset-0 z-[900] flex flex-col gap-2 overscroll-contain bg-tita-surface-muted p-3"
+    /*
+     * 全屏 = 共享 `Dialog` 铺满视口，而不是自己写一层 `role="dialog"`。
+     *
+     * 为什么必须借这一层：自写的那一层只有 Escape + 滚动锁，焦点既不进也不出 ——
+     * 打开全屏之后 Tab 会一路走到背后面板的按钮上，读屏也读不出「这是一个模态」
+     * （没有 inert，背景照旧可读）。Radix 给的是焦点圈定、初始焦点、关闭后还原，
+     * 以及 Escape / 点遮罩两种关闭。
+     *
+     * 尺寸与底色用 className 覆盖（`cn` 走的是 tailwind-merge，后面的同名工具类赢）：
+     * 默认那张 420px 的板子在这里要变成整个视口，而 `bg-tita-surface-muted` /
+     * `bg-tita-surface` 是同一组里的类，所以底色也跟着换。
+     */
+    return <Dialog open onOpenChange={next => { if (!next) setFull(false) }}>
+      <DialogContent
+        className="inset-0 top-0 left-0 z-[900] flex h-full max-h-none w-full max-w-none translate-x-0 translate-y-0 flex-col gap-2 overscroll-contain rounded-none border-0 bg-tita-surface-muted p-3 shadow-none"
       >
         {/* 全屏只有一行页头：标题 + 页面切换 + 当前页说明 + 出口。全屏是「同一块内容
             换成整个视口」，所以这一行就是面板里那两行（页头 + 切换行）压成一行。 */}
@@ -652,7 +660,10 @@ export function AttributionTab({ visible, activeQuestion, onOpenKnowledge }: {
           >
             <Stethoscope size={14} />
           </span>
-          <h2 className="shrink-0 text-[14px] font-[750] tracking-[-0.02em]">智能归因</h2>
+          {/* 可见的 h2 **就是**这一层的标题：`asChild` 让它带上 Radix 要求的可达名，
+              不必再写一份收起来的副标题（插件没有自建 Tailwind，`sr-only` 在这里
+              并不可用 —— 用了就是一条永远不生效的类名）。 */}
+          <DialogTitle asChild><h2 className="shrink-0 text-[14px] font-[750] tracking-[-0.02em]">智能归因</h2></DialogTitle>
           {switcher}
           <p className="min-w-0 flex-1 truncate text-[11px] text-tita-ink-muted">{viewHint}</p>
           <Button
@@ -663,9 +674,8 @@ export function AttributionTab({ visible, activeQuestion, onOpenKnowledge }: {
           ><X size={12} />退出全屏（Esc）</Button>
         </header>
         {stage}
-      </div>,
-      document.body,
-    )
+      </DialogContent>
+    </Dialog>
   }
 
   return <div className="flex min-h-0 flex-1 flex-col gap-1.5">
@@ -677,12 +687,8 @@ export function AttributionTab({ visible, activeQuestion, onOpenKnowledge }: {
     >
       <Sparkles size={12} className="mt-0.5 shrink-0" />
       <span className="min-w-0 flex-1">{sampleNotice}</span>
-      <button
-        type="button"
-        aria-label="关闭提示"
-        className="shrink-0 rounded-sm focus-visible:outline-[3px] focus-visible:outline-offset-1 focus-visible:outline-tita-focus-ring"
-        onClick={() => setSampleNotice(null)}
-      ><X size={12} /></button>
+      {/* 共享的 ghost 图标按钮：原来的手写 `<button>` 命中区只有 12px，焦点圈还是自己写的一条。 */}
+      <Button variant="ghost" size="icon" className="shrink-0" aria-label="关闭提示" title="关闭提示" onClick={() => setSampleNotice(null)}><X size={13} /></Button>
     </div>}
     {helpError && <AttributionHelpNotice message={helpError} onDismiss={() => setHelpError(null)} />}
     <div className="flex min-w-0 items-center gap-2">
@@ -721,12 +727,7 @@ function AttributionHelpNotice({ message, onDismiss }: { message: string; onDism
     className="flex items-start gap-1.5 rounded-lg border border-tita-line bg-tita-surface-muted p-2 text-[10.5px] leading-relaxed text-tita-danger"
   >
     <span className="min-w-0 flex-1">{message}</span>
-    <button
-      type="button"
-      aria-label="关闭提示"
-      className="shrink-0 rounded-sm focus-visible:outline-[3px] focus-visible:outline-offset-1 focus-visible:outline-tita-focus-ring"
-      onClick={onDismiss}
-    ><X size={12} /></button>
+    <Button variant="ghost" size="icon" className="shrink-0" aria-label="关闭提示" title="关闭提示" onClick={onDismiss}><X size={13} /></Button>
   </div>
 }
 

package/src/client/attribution/CaseView.tsx

@@ -46,7 +46,9 @@ export function CaseView({ cases, activeId, onActiveChange }: {
           <h3 className="text-[13px] font-semibold leading-snug">{active.title}</h3>
           <p className="mt-0.5 text-[10.5px] text-tita-ink-muted">{active.id} · 耗时 {active.durationMinutes} min</p>
         </div>
-        <Badge tone="success">已确认根因</Badge>
+        <Badge tone={active.rootCauseStatus === 'unconfirmed' ? 'warning' : 'success'}>
+          {active.rootCauseStatus === 'unconfirmed' ? '根因未确认' : '已确认根因'}
+        </Badge>
       </header>
 
       {/* ── wiki 段 ── */}

package/src/client/attribution/EventView.tsx

@@ -1,5 +1,5 @@
 import { CircleDot, FileText, GitBranch, Search } from '@tita-agent/ui/icons'
-import type { ReactNode } from 'react'
+import { useEffect, type ReactNode } from 'react'
 import { Badge, Card } from '@tita-agent/ui/components'
 import type { AttributionEvent } from './model.ts'
 
@@ -15,7 +15,12 @@ function identityLabel(event: AttributionEvent): string {
   return '来源内独立记录'
 }
 
-export function EventView({ events }: { events: AttributionEvent[] }): ReactNode {
+export function EventView({ events, focusEventId }: { events: AttributionEvent[]; focusEventId?: string }): ReactNode {
+  useEffect(() => {
+    if (!focusEventId) return
+    const target = document.getElementById(`knowledge-event-${focusEventId}`)
+    target?.scrollIntoView({ block: 'center', behavior: 'smooth' })
+  }, [events, focusEventId])
   if (events.length === 0) return <p className="py-5 text-center text-[11px] text-tita-ink-muted">还没有从文档中提取 Event。</p>
 
   const groups = new Map<string, { label: string; events: AttributionEvent[] }>()
@@ -40,7 +45,12 @@ export function EventView({ events }: { events: AttributionEvent[] }): ReactNode
         <GitBranch size={12} className="mt-0.5 shrink-0 text-tita-primary" />
         {group.label}
       </h3>
-      {group.events.map(event => <Card key={event.id} className="gap-2 p-2.5">
+      {group.events.map(event => <article
+        key={event.id}
+        id={`knowledge-event-${event.id}`}
+        className={event.id === focusEventId ? 'rounded-lg ring-2 ring-tita-primary ring-offset-2 ring-offset-tita-surface' : undefined}
+        aria-label={event.id === focusEventId ? `已定位 Event：${event.title}` : undefined}
+      ><Card className="gap-2 p-2.5">
         <header className="flex items-start gap-2">
           <div className="min-w-0 flex-1">
             <h4 className="text-[12px] font-semibold leading-snug text-tita-ink">{event.title}</h4>
@@ -92,7 +102,7 @@ export function EventView({ events }: { events: AttributionEvent[] }): ReactNode
             : <span className="text-[9.5px] text-tita-ink-faint">暂无可显示的引文</span>}
           {event.missing.length > 0 && <p className="text-[9.5px] leading-relaxed text-tita-warning">待补：{event.missing.join('、')}</p>}
         </footer>
-      </Card>)}
+      </Card></article>)}
     </section>)}
   </div>
 }

package/src/client/attribution/RunView.tsx

@@ -177,9 +177,9 @@ export function RunView({ data, cases, symptoms, symptomId, onSymptomChange, onS
         不是一次进行中的排查 —— 没有「本次跑了哪些检查点、看到什么」的现场状态，
         按一个按钮只能编出一份路径来，而那正好是这个产品最不该做的事。
         真实的写回发生在排查进行时：Agent 调 `POST /diagnosis/run` 落一条
-        `agent_diagnosis_case` 的 SourceRaw，顺手提一张案例卡片等人确认。
+        `agent_diagnosis_case` 的 SourceRaw；Case 由这条记录只读派生，Knowledge / Event 由独立链路抽取和归一。
       */}
-      <Button className="w-full" size="sm" disabled title="写回发生在排查进行时：Agent 用 POST /diagnosis/run 落一条诊断日志并提议案例卡片。这一屏是只读的复盘视图。">
+      <Button className="w-full" size="sm" disabled title="Agent 在排查结束时用 POST /diagnosis/run 落 SourceRaw；Case 只读派生，Knowledge / Event 由知识链路处理。">
         写回由排查进行时完成（这一屏只读）
       </Button>
     </Card>

package/src/client/attribution/ViewSwitch.tsx

@@ -20,6 +20,20 @@ export interface ViewSwitchItem<T extends string> {
  * 而分段的轨道 + 会滑动的白色胶囊把「同一组、选一个」直接画了出来 ——
  * 位置本身就是状态，不需要读颜色。
  *
+ * ## 语义是 `group` + `aria-pressed`，不是 tablist
+ *
+ * 它原来是 `role="tablist"` / `role="tab"` / `aria-selected` / roving `tabIndex`。
+ * 那是**冒充**：这一组只换内容，被换掉的那一块渲染在树的别处（调用方自己的
+ * `stage`/`subView` 分支），没有 `tabpanel`、没有 `aria-controls`、也没有 id。
+ * 读屏会念出「选项卡，4 个中的第 2 个」，然后按 tab 语义去找一个不存在的面板 ——
+ * 那不是「少写了一层」，那是把一句假话说给不会看到的用户听。
+ *
+ * 要把它改成真的 tab 就得让被换的内容成为这一组的 `tabpanel` 并互相对上 id：那要求
+ * 调用方把舞台搬进这个组件，或者把 id 一路传出去。**这一组承载的是「同一个视图的几种
+ * 画法」，不是「几个并列的内容面板」** —— 所以诚实的做法是退掉 tab 语义：一组
+ * 互斥按钮（`group` + `aria-pressed`），键盘用方向键在同一组里走。这一层没有丢
+ * 可达性，丢掉的是一句假的角色声明。
+ *
  * 滑块的位移用纯 CSS 算：轨道是 `auto-cols-fr` 的等宽栅格，滑块宽度取
  * `(100% - 内边距) / 页数`，位移取 `index × 100%`（百分比是相对滑块自身宽度）。
  * 这样**不需要测量 DOM**，也就不存在「测量时机不对导致滑块错位」这一类 bug ——
@@ -54,20 +68,20 @@ export function ViewSwitch<T extends string>({ items, value, onChange, ariaLabel
     if (!target) return
     onChange(target.id)
     // 焦点必须跟着走，否则键盘用户的下一次左右键会从旧位置继续算。
-    const nodes = event.currentTarget.querySelectorAll<HTMLElement>('[role="tab"]')
+    const nodes = event.currentTarget.querySelectorAll<HTMLElement>('button')
     nodes[next]?.focus()
   }
 
   return <div className={cn('flex min-w-0 flex-col gap-1', className)}>
     <div
-      role="tablist"
+      role="group"
       aria-label={ariaLabel}
       onKeyDown={onKeyDown}
       // 轨道刻意与面板自己的标签条（`.tita-tabsList`）用同一组颜色与圆角：
       // 同屏出现两个分段控件时，它们要么明显是同一套，要么明显是两套 —— 差一点点最难看。
       className="relative inline-grid grid-flow-col auto-cols-fr self-start rounded-[9px] border border-tita-line bg-tita-surface-muted p-[3px]"
     >
-      {/* 滑块：装饰性元素，语义由 `aria-selected` 承载。 */}
+      {/* 滑块：装饰性元素，语义由 `aria-pressed` 承载。 */}
       <span
         aria-hidden="true"
         className="pointer-events-none absolute bottom-[3px] left-[3px] top-[3px] rounded-[7px] bg-tita-surface shadow-[0_1px_3px_rgb(15_23_42_/_0.16),inset_0_0_0_1px_var(--tita-primary-shadow)] transition-transform duration-200 ease-[cubic-bezier(0.22,0.61,0.36,1)]"
@@ -79,8 +93,9 @@ export function ViewSwitch<T extends string>({ items, value, onChange, ariaLabel
         return <button
           key={item.id}
           type="button"
-          role="tab"
-          aria-selected={on}
+          aria-pressed={on}
+          // 整个控件是一个 tab 停靠点，组内用方向键走 —— 与 shadcn 的 Tabs 同一条纪律，
+          // 只是角色换成了诚实的 `group`。
           tabIndex={on ? 0 : -1}
           data-state={on ? 'active' : 'inactive'}
           onClick={() => onChange(item.id)}

package/src/client/attribution/graph-options.ts

@@ -5,6 +5,11 @@ import {
   visibleEdges, visibleNodes,
   type AttributionEdge, type AttributionGraphData, type AttributionNode, type AttributionEdgeKind,
 } from './model.ts'
+import {
+  BADGE_AUTO_INK, BADGE_GAP_STROKE, BADGE_INK, BADGE_MANUAL_INK, BADGE_PLATE, BADGE_PLATE_STROKE,
+  BADGE_PROBLEM_INK, BADGE_PROBLEM_STROKE, EDGE_COUNT_INK, EDGE_STROKE, EDGE_ZOMBIE_INK,
+  GAP_STROKE, LABEL_PLATE, SELECTION_RING, ZOMBIE_STROKE,
+} from '../graph/palette.ts'
 
 /**
  * 我的模型 → G6 v5 的数据与配置。
@@ -47,19 +52,19 @@ const FONT = '"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-
 
 /** 十种边各自的外观。层内边实线、跨层边点线，`refutes` 一律红色虚线（一等公民）。 */
 const EDGE_STYLE: Record<AttributionEdgeKind, { stroke: string; lineWidth: number; lineDash?: number[] }> = {
-  may_be_caused_by: { stroke: '#93b4f8', lineWidth: 1.6 },
-  verified_by: { stroke: '#6b54cf', lineWidth: 1.3 },
-  categorized_as: { stroke: '#c9b8ff', lineWidth: 1.2, lineDash: [5, 4] },
+  may_be_caused_by: { stroke: EDGE_STROKE.may_be_caused_by, lineWidth: 1.6 },
+  verified_by: { stroke: EDGE_STROKE.verified_by, lineWidth: 1.3 },
+  categorized_as: { stroke: EDGE_STROKE.categorized_as, lineWidth: 1.2, lineDash: [5, 4] },
   // `queries`（检查点 → 资产）与 `indexed_from`（资产 → 假设）是两条边，两端与回答的
   // 问题都不同，所以外观也要能分开：同色同线型的话，图上分不清「这条假设落在哪张表上」
   // 与「这条检查要去查哪张表」。
-  queries: { stroke: '#9ec2ff', lineWidth: 1.3, lineDash: [1, 3] },
-  produces: { stroke: '#b96d14', lineWidth: 1.2, lineDash: [2, 3] },
-  supports: { stroke: '#12875f', lineWidth: 1.4 },
-  refutes: { stroke: '#b42318', lineWidth: 1.6, lineDash: [5, 4] },
-  confirmed_as: { stroke: '#0f766e', lineWidth: 1.6 },
-  instance_of: { stroke: '#b96d14', lineWidth: 1.2, lineDash: [2, 3] },
-  indexed_from: { stroke: '#9ec2ff', lineWidth: 1.2, lineDash: [2, 3] },
+  queries: { stroke: EDGE_STROKE.queries, lineWidth: 1.3, lineDash: [1, 3] },
+  produces: { stroke: EDGE_STROKE.produces, lineWidth: 1.2, lineDash: [2, 3] },
+  supports: { stroke: EDGE_STROKE.supports, lineWidth: 1.4 },
+  refutes: { stroke: EDGE_STROKE.refutes, lineWidth: 1.6, lineDash: [5, 4] },
+  confirmed_as: { stroke: EDGE_STROKE.confirmed_as, lineWidth: 1.6 },
+  instance_of: { stroke: EDGE_STROKE.instance_of, lineWidth: 1.2, lineDash: [2, 3] },
+  indexed_from: { stroke: EDGE_STROKE.indexed_from, lineWidth: 1.2, lineDash: [2, 3] },
 }
 
 /** 边的中文读法。**十种必须全有** —— 图例是通过遍历这个表生成的，漏一种就是漏一段语义。 */
@@ -90,15 +95,17 @@ export const EDGE_LEGEND: Array<{ kind: AttributionEdgeKind; label: string; stro
     ...EDGE_STYLE[kind],
   }))
 
-const ZOMBIE_STYLE = { stroke: '#9aa4b2', lineWidth: 1.2, lineDash: [5, 4] }
-const GAP_STROKE = '#b42318'
+// 画布侧的颜色全部来自 `graph/palette.ts`：canvas 读不到 CSS 变量（那条理由写在那个
+// 模块头上），所以值只能以字面量给，但**只给一份**。三处各写一份的代价是同一个
+// 「中性文字」在三处慢慢漂成三个灰度，而没有任何一处能看出它们本该相同。
+const ZOMBIE_STYLE = { stroke: ZOMBIE_STROKE, lineWidth: 1.2, lineDash: [5, 4] }
 
 const BADGE_BASE = {
-  fill: '#748091',
+  fill: BADGE_INK,
   fontSize: 9,
   fontFamily: FONT,
-  backgroundFill: '#ffffff',
-  backgroundStroke: '#e5e9f0',
+  backgroundFill: BADGE_PLATE,
+  backgroundStroke: BADGE_PLATE_STROKE,
   backgroundLineWidth: 1,
   backgroundRadius: 6,
   // 动线视角里徽标画在**胶囊内部**（见 `laneNodeStyleFor`），所以它越矮越好：
@@ -162,8 +169,8 @@ export function nodeStyleFor(
     lineDash: isGap ? [4, 3] : undefined,
     zIndex: node.layer === 'instance' ? 0 : 1,
     // 圆里放 id（直径由复用次数决定，中文标题塞不进）；胶囊放标题。
-    // 案例例外：它的标题来自案例卡片、不含 id，而案例要靠 id 才能在复盘里被指认 ——
-    // 所以由画布把 id 拼回去，标题本身保持单一份来源。
+    // Case 是排查 SourceRaw 的只读投影，不是 WikiCard。视图用症状标题；画布补上稳定的
+    // Case id，方便在复盘里指认这次排查。
     labelText: shape === 'circle' ? node.id : node.kind === 'case' ? `${node.id} ${node.title}` : node.title,
     labelPlacement: 'center',
     labelFill: palette.text,
@@ -179,12 +186,12 @@ export function nodeStyleFor(
   if (shape === 'rect') style.radius = 8
 
   const badges: Array<Record<string, unknown>> = []
-  const gapBadge = { ...BADGE_BASE, text: '空区 · 无检查', placement: 'top', offsetY: -10, fill: GAP_STROKE, backgroundStroke: '#f0b7ad' }
+  const gapBadge = { ...BADGE_BASE, text: '空区 · 无检查', placement: 'top', offsetY: -10, fill: GAP_STROKE, backgroundStroke: BADGE_GAP_STROKE }
   if (node.kind === 'symptom') {
     // 问题侧的层次必须能在**画布上**读到，而不是只能靠筛选器猜。
     // 用文字徽标而不是颜色：颜色通道已经被失败模式占满（见 model.ts 的 PROBLEM_CLASS_ORDER）。
     const problem = problemBadgeOf(node)
-    if (problem) badges.push({ ...BADGE_BASE, text: problem, placement: 'bottom', offsetY: 12, fill: '#96580f', backgroundStroke: '#f2ddb8' })
+    if (problem) badges.push({ ...BADGE_BASE, text: problem, placement: 'bottom', offsetY: 12, fill: BADGE_PROBLEM_INK, backgroundStroke: BADGE_PROBLEM_STROKE })
   } else if (node.kind === 'hypothesis') {
     badges.push({ ...BADGE_BASE, text: node.title, placement: 'bottom', offsetY: 12, fill: palette.text, backgroundStroke: palette.stroke })
     // 空区徽标必须和「复用 N」**互斥地**占用顶部位置，而不是写成 else-if ——
@@ -192,7 +199,7 @@ export function nodeStyleFor(
     // 而空区恰恰总是假设节点。
     badges.push(isGap ? gapBadge : { ...BADGE_BASE, text: `复用 ${node.reuseCount ?? 0}`, placement: 'top', offsetY: -10 })
   } else if (node.kind === 'check_point') {
-    badges.push({ ...BADGE_BASE, text: `${node.costMinutes ?? '?'} min · ${node.automation === 'auto' ? '自动' : '人工'}`, placement: 'bottom', offsetY: 10, fill: node.automation === 'auto' ? '#12875f' : '#b96d14' })
+    badges.push({ ...BADGE_BASE, text: `${node.costMinutes ?? '?'} min · ${node.automation === 'auto' ? '自动' : '人工'}`, placement: 'bottom', offsetY: 10, fill: node.automation === 'auto' ? BADGE_AUTO_INK : BADGE_MANUAL_INK })
   } else if (isGap) {
     badges.push(gapBadge)
   }
@@ -269,18 +276,18 @@ export function laneNodeStyleFor(node: AttributionNode, gapIds: ReadonlySet<stri
   // 都堆上去的话，44px 高的胶囊会被三个徽标切成碎片。
   if (node.kind === 'symptom') {
     const problem = problemBadgeOf(node)
-    if (problem) badges.push({ ...BADGE_BASE, text: problem, placement: 'bottom', offsetY: BADGE_GAP, fill: '#96580f', backgroundStroke: '#f2ddb8' })
+    if (problem) badges.push({ ...BADGE_BASE, text: problem, placement: 'bottom', offsetY: BADGE_GAP, fill: BADGE_PROBLEM_INK, backgroundStroke: BADGE_PROBLEM_STROKE })
   } else if (node.kind === 'hypothesis') {
     badges.push(isGap
-      ? { ...BADGE_BASE, text: '空区 · 无检查点', placement: 'bottom', offsetY: BADGE_GAP, fill: GAP_STROKE, backgroundStroke: '#f0b7ad' }
+      ? { ...BADGE_BASE, text: '空区 · 无检查点', placement: 'bottom', offsetY: BADGE_GAP, fill: GAP_STROKE, backgroundStroke: BADGE_GAP_STROKE }
       : { ...BADGE_BASE, text: `复用 ${node.reuseCount ?? 0}`, placement: 'bottom', offsetY: BADGE_GAP, fill: palette.text, backgroundStroke: palette.stroke })
   } else if (node.kind === 'check_point') {
-    badges.push({ ...BADGE_BASE, text: `${node.costMinutes ?? '?'} min · ${node.automation === 'auto' ? '自动' : '人工'}`, placement: 'bottom', offsetY: BADGE_GAP, fill: node.automation === 'auto' ? '#12875f' : '#b96d14' })
+    badges.push({ ...BADGE_BASE, text: `${node.costMinutes ?? '?'} min · ${node.automation === 'auto' ? '自动' : '人工'}`, placement: 'bottom', offsetY: BADGE_GAP, fill: node.automation === 'auto' ? BADGE_AUTO_INK : BADGE_MANUAL_INK })
   } else if (node.kind === 'evidence') {
     const verdict = node.verdict === 'refutes' ? '否定' : node.verdict === 'supports' ? '支持' : '给不出结论'
-    badges.push({ ...BADGE_BASE, text: verdict, placement: 'bottom', offsetY: BADGE_GAP, fill: node.verdict === 'refutes' ? GAP_STROKE : '#12875f' })
+    badges.push({ ...BADGE_BASE, text: verdict, placement: 'bottom', offsetY: BADGE_GAP, fill: node.verdict === 'refutes' ? GAP_STROKE : BADGE_AUTO_INK })
   } else if (isGap) {
-    badges.push({ ...BADGE_BASE, text: '空区 · 无检查点', placement: 'bottom', offsetY: BADGE_GAP, fill: GAP_STROKE, backgroundStroke: '#f0b7ad' })
+    badges.push({ ...BADGE_BASE, text: '空区 · 无检查点', placement: 'bottom', offsetY: BADGE_GAP, fill: GAP_STROKE, backgroundStroke: BADGE_GAP_STROKE })
   }
   if (badges.length > 0) style.badges = badges
   if (options.dimmed) {
@@ -314,7 +321,7 @@ export function edgeStyleFor(edge: AttributionEdge, options: { labels?: boolean
     labelAutoRotate: false,
     labelFontFamily: FONT,
     labelBackground: true,
-    labelBackgroundFill: '#f6f8fb',
+    labelBackgroundFill: LABEL_PLATE,
     labelBackgroundRadius: 4,
     labelPadding: [2, 4, 2, 4],
   }
@@ -324,11 +331,11 @@ export function edgeStyleFor(edge: AttributionEdge, options: { labels?: boolean
   if (zombie) {
     style.labelText = `僵尸边 ${edge.staleDays} 天未走`
     style.labelFontSize = 9
-    style.labelFill = '#9aa4b2'
+    style.labelFill = EDGE_ZOMBIE_INK
   } else if (edge.count !== undefined) {
     style.labelText = `${edge.count} 例`
     style.labelFontSize = 9
-    style.labelFill = '#b96d14'
+    style.labelFill = EDGE_COUNT_INK
   }
   return style
 }
@@ -876,8 +883,8 @@ export function buildGraphOptions(
     layout: layoutOf(layout, rankdir),
     node: {
       state: {
-        selected: { lineWidth: 3, stroke: '#2563eb' },
-        active: { lineWidth: 2.6, stroke: '#2563eb' },
+        selected: { lineWidth: 3, stroke: SELECTION_RING },
+        active: { lineWidth: 2.6, stroke: SELECTION_RING },
         // 「其余节点透明度降到 0.35」（§7.4 第 9 条）。状态的样式值走 `var()` 共享
         // 令牌，`DIM_OPACITY` 是它的数值孪生 —— 节点数据在纯函数里算出来时也要用同一
         // 个数（node:test 里读不到 CSS），两处不同步就会一半亮一半暗。
@@ -889,7 +896,7 @@ export function buildGraphOptions(
       type: line ? 'polyline' : 'quadratic',
       style: line ? { radius: 6 } : { curveOffset: 22 },
       state: {
-        selected: { lineWidth: 2.4, stroke: '#2563eb' },
+        selected: { lineWidth: 2.4, stroke: SELECTION_RING },
         dim: { strokeOpacity: DIM_OPACITY, labelOpacity: DIM_OPACITY },
       },
     },

package/src/client/attribution/model.ts

@@ -8,6 +8,10 @@ import type {
   AttributionEdge, AttributionEdgeKind, AttributionGraphData, AttributionNode, AttributionNodeKind,
   AttributionStats, FailureReason, NodeLayer,
 } from '../../diagnosis/types.js'
+import {
+  FAILURE_REASON_FILL, FAILURE_REASON_STROKE, FAILURE_REASON_TEXT,
+  NEUTRAL_NODE, NODE_CHECK_POINT, NODE_REFERENCE_FILL, NODE_REFERENCE_STROKE, NODE_REFERENCE_TEXT, NODE_SYMPTOM,
+} from '../graph/palette.ts'
 
 export { ZOMBIE_EDGE_DAYS, PROBLEM_CLASSES, PROBLEM_CLASS_LABEL, problemClassIds, problemSubclassOf }
 export type {
@@ -35,13 +39,16 @@ export const LAYER_TONES: Record<NodeLayer, 'blue' | 'violet' | 'amber'> = {
 /**
  * 失败原因 → 颜色。分类在图谱视图里是**着色**而不是分区，所以它只影响一眼扫过的
  * 分组感，不影响节点位置 —— 位置由布局按边的方向决定。
+ *
+ * 五个色值来自 `graph/palette.ts`（画布色只有那一份）。这里只是把它们按
+ * `FailureReason` 装配起来，标签留在本地 —— 标签是文案，不是调色板。
  */
 export const FAILURE_REASON_STYLE: Record<FailureReason, { label: string; fill: string; stroke: string; text: string }> = {
-  'upstream-missing': { label: '上游未产出', fill: '#eef4ff', stroke: '#2563eb', text: '#1d4ed8' },
-  'spec-change': { label: '口径变更', fill: '#f3f0ff', stroke: '#6b54cf', text: '#5b45be' },
-  'data-processing': { label: '数据处理', fill: '#eafaf2', stroke: '#12875f', text: '#0f6b4d' },
-  consumption: { label: '消费与展示', fill: '#fff7ea', stroke: '#b96d14', text: '#96580f' },
-  permission: { label: '权限与过滤', fill: '#fdecea', stroke: '#b42318', text: '#98200f' },
+  'upstream-missing': { label: '上游未产出', fill: FAILURE_REASON_FILL['upstream-missing'], stroke: FAILURE_REASON_STROKE['upstream-missing'], text: FAILURE_REASON_TEXT['upstream-missing'] },
+  'spec-change': { label: '口径变更', fill: FAILURE_REASON_FILL['spec-change'], stroke: FAILURE_REASON_STROKE['spec-change'], text: FAILURE_REASON_TEXT['spec-change'] },
+  'data-processing': { label: '数据处理', fill: FAILURE_REASON_FILL['data-processing'], stroke: FAILURE_REASON_STROKE['data-processing'], text: FAILURE_REASON_TEXT['data-processing'] },
+  consumption: { label: '消费与展示', fill: FAILURE_REASON_FILL.consumption, stroke: FAILURE_REASON_STROKE.consumption, text: FAILURE_REASON_TEXT.consumption },
+  permission: { label: '权限与过滤', fill: FAILURE_REASON_FILL.permission, stroke: FAILURE_REASON_STROKE.permission, text: FAILURE_REASON_TEXT.permission },
 }
 
 /**
@@ -76,7 +83,7 @@ export function symptomCountByProblemClass(nodes: AttributionNode[]): Record<Pro
 }
 
 /** 无失败模式的节点（现象、资产、检查）用中性色。 */
-export const NEUTRAL_STYLE = { fill: '#ffffff', stroke: '#d6dce6', text: '#748091' }
+export const NEUTRAL_STYLE = { fill: NEUTRAL_NODE.fill, stroke: NEUTRAL_NODE.stroke, text: NEUTRAL_NODE.text }
 
 export const NODE_KIND_LABEL: Record<AttributionNodeKind, string> = {
   symptom: '现象',
@@ -564,9 +571,9 @@ export function nodeShapeOf(node: AttributionNode): 'circle' | 'rect' {
 /** 节点的取色：假设跟着失败模式走，其余走层色。 */
 export function nodeStyleOf(node: AttributionNode): { fill: string; stroke: string; text: string } {
   if (node.failureReason) return FAILURE_REASON_STYLE[node.failureReason]
-  if (node.layer === 'reference') return { fill: '#eef4ff', stroke: '#9ec2ff', text: '#1d4ed8' }
-  if (node.kind === 'symptom') return { fill: '#fff7ea', stroke: '#b96d14', text: '#96580f' }
-  if (node.kind === 'check_point') return { fill: '#f5f1ff', stroke: '#c9b8ff', text: '#5b45be' }
+  if (node.layer === 'reference') return { fill: NODE_REFERENCE_FILL, stroke: NODE_REFERENCE_STROKE, text: NODE_REFERENCE_TEXT }
+  if (node.kind === 'symptom') return { fill: NODE_SYMPTOM.fill, stroke: NODE_SYMPTOM.stroke, text: NODE_SYMPTOM.text }
+  if (node.kind === 'check_point') return { fill: NODE_CHECK_POINT.fill, stroke: NODE_CHECK_POINT.stroke, text: NODE_CHECK_POINT.text }
   return NEUTRAL_STYLE
 }