dsh-data-domain-knowledge 0.1.0-alpha.9 → 0.1.1-alpha.2

package/src/client/attribution/StageChrome.tsx

@@ -5,12 +5,12 @@ import {
 import type { ReactNode } from 'react'
 import { Badge, Button, Input, cn } from '@tita-agent/ui/components'
 import {
-  EDGE_LEGEND, type GraphLayout,
+  EDGE_KIND_LABEL, EDGE_LEGEND, type GraphLayout,
 } from './graph-options.ts'
 import {
   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 AttributionEdge, type AttributionNode, type AttributionNodeKind, type AttributionStats, type FailureReason,
   type LaneId, type ProblemClassId,
 } from './model.ts'
 
@@ -512,7 +512,16 @@ function Stat({ label, value, tone }: { label: string; value: number; tone?: 'wa
 
 /* ─────────────────────────────────────────────── 画布右侧：选中节点详情 ── */
 
-export function NodeDetailCard({ node, onClear }: { node: AttributionNode; onClear?: () => void }): ReactNode {
+export function NodeDetailCard({ node, nodes = [], edges = [], onSelect, onClear }: {
+  node: AttributionNode
+  nodes?: readonly AttributionNode[]
+  edges?: readonly AttributionEdge[]
+  onSelect?: (id: string) => void
+  onClear?: () => void
+}): ReactNode {
+  const byId = new Map(nodes.map(item => [item.id, item]))
+  const related = edges.filter(edge => edge.source === node.id || edge.target === node.id)
+
   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>
@@ -534,6 +543,28 @@ export function NodeDetailCard({ node, onClear }: { node: AttributionNode; onCle
     </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>}
+    {related.length > 0 && <section className="flex flex-col gap-0.5 border-t border-tita-line pt-1.5" aria-label="关联关系">
+      <p className="text-[9.5px] font-semibold text-tita-ink-muted">关联关系 · {related.length}</p>
+      {related.slice(0, 5).map(edge => {
+        const outgoing = edge.source === node.id
+        const otherId = outgoing ? edge.target : edge.source
+        const other = byId.get(otherId)
+        const relation = EDGE_KIND_LABEL[edge.kind] ?? edge.kind
+        return <Button
+          key={edge.id}
+          size="sm"
+          variant="ghost"
+          className="h-auto min-h-0 w-full justify-start gap-1 rounded px-1 py-1 text-left text-[9.5px] leading-snug"
+          disabled={!other || !onSelect}
+          title={other?.title ?? otherId}
+          onClick={() => { if (other) onSelect?.(other.id) }}
+        >
+          <span className="shrink-0 text-tita-ink-faint">{outgoing ? `${relation} →` : `← ${relation}`}</span>
+          <span className="min-w-0 truncate text-tita-ink">{other?.title ?? otherId}</span>
+        </Button>
+      })}
+      {related.length > 5 && <p className="px-1 text-[9px] text-tita-ink-faint">另有 {related.length - 5} 条关系，可在图中查看</p>}
+    </section>}
     {onClear && <button
       type="button"
       onClick={onClear}

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) {
@@ -305,7 +312,8 @@ export function edgeStyleFor(edge: AttributionEdge, options: { labels?: boolean
   const base = zombie ? ZOMBIE_STYLE : EDGE_STYLE[edge.kind]
   const style: Record<string, unknown> = {
     ...base,
-    endArrow: edge.kind === 'instance_of' || edge.kind === 'indexed_from',
+    // 归因图的边都是有向关系。全量关系视图必须保留箭头，否则只能靠节点距离猜方向。
+    endArrow: true,
     endArrowType: 'triangle',
     endArrowSize: 6,
     zIndex: 0,
@@ -313,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],
   }
@@ -323,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
 }
@@ -688,16 +696,16 @@ const ROW_NODE_GAP = 8
 const EMPTY_ROW_HEIGHT = 24
 
 /**
- * 布局种类。**只有两种，而且默认是动线。**
+ * 布局种类。**只有两种，默认显示关系全景。**
  *
- * `line`（动线）是默认读法：五段泳道，位置完全由段位与段内排序决定（§7.7）。
- * 它回答的是值班同学打开这一栏真正要问的那句 ——「下一步查什么、这条链断在哪」。
- * `force`（关系）是自由读法：浮动节点、可拖拽，关系靠聚簇与距离表达。
- * 它回答「这张图长什么样、哪块密哪里空」，那是维护者的问题。
+ * `force`（关系）是默认读法：浮动节点、可拖拽，关系靠聚簇、方向箭头与距离表达。
+ * 它回答「有哪些现象、原因、检查点，它们如何连接」。
+ * `line`（动线）是五段泳道，位置完全由段位与段内排序决定（§7.7）。
+ * 它回答值班同学「下一步查什么、这条链断在哪」。
  *
  * **v1.4 撤销了「分层」（`layered`）。** 原来留它是因为「方向本身是语义」——
- * 而动线就是这件事的语义版：分层只按入度分列，动线按这五个阶段分列，且每段带段头
- * 与计数。两个都能画方向时，留那个说得清「这一段是什么」的（§7.2）。
+ * 两种布局都能画方向；分层只按入度分列，而动线按这五个阶段分列，且每段带段头与计数。
+ * 因此保留更能表达排查阶段的动线作为按步骤阅读方式（§7.2）。
  */
 export type GraphLayout = 'line' | 'force'
 
@@ -875,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），两处不同步就会一半亮一半暗。
@@ -888,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,11 +8,15 @@ 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 {
   AssetType,
-  AttributionEdge, AttributionGraphData, AttributionNode, AttributionNodeKind,
+  AttributionEdge, AttributionEvent, AttributionGraphData, AttributionNode, AttributionNodeKind,
   AttributionEdgeKind, AttributionStats, FailureReason, NodeLayer,
   AttributionCase, CaseSection, CasePathStep,
 } from '../../diagnosis/types.js'
@@ -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
 }
 

package/src/client/config-scope.ts

@@ -6,8 +6,8 @@
  *
  * 0.1.7 删掉了 `ctx.settingsScope.bind({ namespace })` 这套客户端设置 API，换成
  * `ctx.configForms.get(entryId)`：**设置不再是按命名空间分的独立文档，而是一个
- * 插件 entry 自己的 config**。本插件把两块设置合并进同一个 entry（`knowledge` /
- * `convert` 两个组），但下层的编辑器（`NodeSettings`、`KnowledgeBaseTab`
+ * 插件 entry 自己的 config**。本插件把设置合并进同一个 entry（`knowledge` /
+ * `convert` / `behaviorRules` 三个组），但下层的编辑器（`NodeSettings`、`KnowledgeBaseTab`
  * …）是按「一个平铺的设置组」写的，它们读 `snapshot.value.recallTopK`、
  * 写 `scope.set('recallTopK', 20)`。
  *
@@ -20,7 +20,7 @@
  *
  * `ConfigForm.set(field, …)` 的契约是「**命名空间 section 里的标量字段**」——只认
  * 顶层的键。分组之后的字段都在第二层，所以一律走按路径寻址的 `mutate`。`group`
- * 省略时（`agent-preset-registry` 那条 DSH 自己的 entry）路径就只有字段名本身，
+ * 省略分组时路径只有字段名本身，
  * 与 `set` 等价。
  *
  * @module

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'