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

package/src/client/attribution/CaseView.tsx

@@ -1,7 +1,7 @@
 import { ChevronDown, CircleDot, FileText, TriangleAlert } from '@tita-data-agent/ui/icons'
 import type { ReactNode } from 'react'
 import { Badge, Button, Card, cn } from '@tita-data-agent/ui/components'
-import { SEED_CASES } from '../../diagnosis/seed.js'
+import type { AttributionCase } from './model.ts'
 
 /**
  * 案例视图：**wiki 定义 + 排查节点**。
@@ -13,21 +13,26 @@ import { SEED_CASES } from '../../diagnosis/seed.js'
  * 所以这里不做「文档里嵌一张图」那种合成视图，而是把两段并排放在同一张卡里 ——
  * 读者能同时看到叙述和结构，而两者的数据源仍然各自独立。
  *
+ * 案例**由调用方传入**（服务端的 `/diagnosis/graph` 给的那一份）。这一层原来直接
+ * import `SEED_CASES`，于是不管你的库里有没有案例，这一页画的都是内置示例。
+ *
  * 红色底边与绿色底没有共享的 Tailwind 工具类（工具类只在 packages/ui 构建时按用到的类
  * 生成，而插件不能改 packages/ui），所以这两处走行内 `style`，取值仍是共享令牌。
  */
 /** 被否定的一步 / 误导段共用的红色底与边（见文件头）。 */
 const REFUTED_WASH = { borderColor: 'var(--ddk-danger-line)', background: 'var(--ddk-danger-tint)' }
 
-export function CaseView({ activeId, onActiveChange }: {
+export function CaseView({ cases, activeId, onActiveChange }: {
+  cases: AttributionCase[]
   activeId: string
   onActiveChange: (id: string) => void
 }): ReactNode {
-  const active = SEED_CASES.find(item => item.id === activeId) ?? SEED_CASES[0]!
+  const active = cases.find(item => item.id === activeId) ?? cases[0]
+  if (!active) return <p className="text-[11px] text-tita-ink-muted">这个知识库还没有排查案例。</p>
 
   return <div className="flex flex-col gap-3">
     <div className="flex flex-wrap gap-1.5">
-      {SEED_CASES.map(item => <Button
+      {cases.map(item => <Button
         key={item.id}
         variant={item.id === active.id ? 'default' : 'outline'}
         size="sm"
@@ -88,15 +93,5 @@ export function CaseView({ activeId, onActiveChange }: {
       </footer>
     </Card>
 
-    <details className="group rounded-lg border border-tita-line bg-tita-surface p-2.5">
-      <summary className="flex cursor-pointer list-none items-center gap-1.5 text-[11.5px] font-medium">
-        <ChevronDown size={13} className="transition-transform group-open:rotate-180" />
-        为什么案例要分「wiki 段」和「节点段」两段
-      </summary>
-      <p className="mt-1.5 text-[10.5px] leading-relaxed text-tita-ink-muted">
-        wiki 段是给人读、给向量召回的散文；节点段是给归并与剪枝读的结构。把「序」和「枚举」写进散文，
-        归并算法就再也读不到它们了 —— 这也是案例不能只存成一篇文档的原因。
-      </p>
-    </details>
   </div>
 }

package/src/client/attribution/GraphStage.tsx

@@ -10,19 +10,24 @@ export interface GraphStageProps {
   /**
    * 覆盖层（案例 / 排查视图）。
    *
-   * 给了它，画布**不卸载**，只是被盖住。理由是位置记忆：力导向图被拖动过之后，
+   * 给了它，画布**不卸载**，只是被盖住。理由是位置记忆：被拖动过之后，
    * 切到案例再切回来应该还是原来的形状；卸载重建会让每次切页都把图重新吹散。
    */
   layer?: ReactNode
-  /** 左上：布局切换 + 类型切面。 */
+  /** 画布左上：操作（按动线顺序的四组切面）。 */
   topLeft?: ReactNode
-  /** 右上：图例 + 全屏。 */
+  /** 画布右上：读法（图例 · 全景 / 聚焦 · 保留 1 跳邻居 · 全屏，四个同排）。 */
   topRight?: ReactNode
-  /** 底部中间：其余筛选。 */
+  /** 画布底中：文本搜索 + 命中数。 */
   bottomCenter?: ReactNode
-  /** 右下：统计。 */
-  bottomRight?: ReactNode
-  /** 右侧副栏，贴在顶部那一行之下（图例正文、选中节点详情）。 */
+  /**
+   * 画布左下：读数（统计 + 数据来源）。
+   *
+   * v1.4 从右下搬来（0021 §7.1）：左列因此形成「上面改、下面读」的一列，
+   * 右下让给图例与选中节点详情的展开正文。
+   */
+  bottomLeft?: ReactNode
+  /** 画布右侧副栏，贴在右上那一行之下（图例正文、选中节点详情）。 */
   side?: ReactNode
   className?: string
 }
@@ -32,19 +37,20 @@ export interface GraphStageProps {
  *
  * **它存在的唯一理由是「图谱占满内容区」。** 改版前，筛选、统计、图例都是图谱的
  * 兄弟节点，从上到下堆成一列 —— 在 380px 宽的右栏里，图谱被自己的控件挤到只剩
- * 一半高度。改版后所有这些控件变成**浮在画布上的四条边**（左上 / 右上 / 底中 /
- * 右下），画布本身吃掉整块面积。这是「打开就是一张大图」在结构上的实现方式：
- * 不是把图放大，而是把其它东西从它的高度里拿走。
+ * 一半高度。改版后所有这些控件变成**浮在画布上的四条边**（左上操作 / 右上读法 /
+ * 左下读数 / 底中搜索），画布本身吃掉整块面积。这是「打开就是一张大图」在结构上的
+ * 实现方式：不是把图放大，而是把其它东西从它的高度里拿走。
  *
  * 两套排布分开写，而不是用一套 `absolute` 加条件：
  * - **画布模式**（无明显层）：四条边浮在画布上，画布铺满，节点在浮层下面继续延展。
  * - **内容模式**（案例 / 排查）：内容要滚动，浮层浮在滚动内容上会遮住正文，
  *   所以顶部控件改为正常流里的一行，内容占满其余高度。
  *
- * 浮层容器整体 `pointer-events-none`、只给面板本身打开命中 —— 否则四条边的
- * 空档会把画布的拖拽和滚轮缩放吞掉。
+ * 浮层容器整体 `pointer-events-none`、只给面板本身打开命中（§7.4 第 10 条）——
+ * 否则四条边的空档会把画布的拖拽和滚轮缩放吞掉。左右两条因此可以同处一行：
+ * 它们之间的空档不属于任何一条，事件直接落到画布上。
  */
-export function GraphStage({ mode, canvas, layer, topLeft, topRight, bottomCenter, bottomRight, side, className }: GraphStageProps): ReactNode {
+export function GraphStage({ mode, canvas, layer, topLeft, topRight, bottomCenter, bottomLeft, side, className }: GraphStageProps): ReactNode {
   const frame = cn(
     'relative min-h-0 w-full flex-1 overflow-hidden rounded-xl border border-tita-line bg-tita-surface',
     className,
@@ -65,9 +71,10 @@ export function GraphStage({ mode, canvas, layer, topLeft, topRight, bottomCente
 
   return <div className={frame}>
     <div className="absolute inset-0">{canvas}</div>
-    <div className="pointer-events-none relative flex h-full flex-col gap-1.5 p-2">
+    {/* 四条浮层容器的这一层不吃事件，事件只在各自的面板上被接住。 */}
+    <div className="pointer-events-none absolute inset-0 flex flex-col gap-1.5 p-2">
       <div className="flex items-start gap-1.5">
-        {topLeft && <div className="pointer-events-auto min-w-0 max-w-full">{topLeft}</div>}
+        {topLeft && <div className="pointer-events-auto min-w-0 max-w-[calc(100%-128px)]">{topLeft}</div>}
         {topRight && <div className="pointer-events-auto ml-auto shrink-0">{topRight}</div>}
       </div>
       {side && <div className={cn(
@@ -78,9 +85,9 @@ export function GraphStage({ mode, canvas, layer, topLeft, topRight, bottomCente
       )}>
         {side}
       </div>}
-      <div className="mt-auto flex flex-col gap-1.5">
-        {bottomCenter && <div className="pointer-events-auto mx-auto w-full">{bottomCenter}</div>}
-        {bottomRight && <div className="pointer-events-auto ml-auto">{bottomRight}</div>}
+      <div className="mt-auto flex items-end gap-1.5">
+        {bottomLeft && <div className="pointer-events-auto min-w-0 shrink">{bottomLeft}</div>}
+        {bottomCenter && <div className="pointer-events-auto mx-auto w-full min-w-0">{bottomCenter}</div>}
       </div>
     </div>
   </div>

package/src/client/attribution/RunView.tsx

@@ -3,9 +3,8 @@ 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,
+  type AttributionCase, type AttributionGraphData, type AttributionNode,
 } from './model.ts'
-import { SEED_CASES } from '../../diagnosis/seed.js'
 
 /**
  * 本文件里凡是没有共享 Tailwind 工具类的颜色（tone 墨色、强调环、红色底边）都走行内
@@ -19,8 +18,10 @@ import { SEED_CASES } from '../../diagnosis/seed.js'
  *
  * 排序与优先分全部来自 `candidatesOf()`，界面不自己再算一遍「哪个该先查」。
  */
-export function RunView({ data, symptoms, symptomId, onSymptomChange, onSelectNode }: {
+export function RunView({ data, cases, symptoms, symptomId, onSymptomChange, onSelectNode }: {
   data: AttributionGraphData
+  /** 案例清单（服务端那一份）。用来回答「这次排序把哪几个案例的路径算进去了」。 */
+  cases: AttributionCase[]
   /** 可选的现象清单。**必须能切**：不同现象共享同一批假设，候选排序也各不相同。 */
   symptoms: AttributionNode[]
   symptomId: string
@@ -32,7 +33,7 @@ export function RunView({ data, symptoms, symptomId, onSymptomChange, onSelectNo
 
   /** 来源归因：这次排序把哪些案例的路径算进去了。锚定风险靠它显式可见。 */
   const sourcesOf = (hypothesisId: string): string[] =>
-    SEED_CASES.filter(item => item.path.some(step => step.nodeId === hypothesisId) || item.misleading?.nodeId === hypothesisId)
+    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)
@@ -54,7 +55,7 @@ export function RunView({ data, symptoms, symptomId, onSymptomChange, onSelectNo
       <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 天）
+          优先分 = 根因占比 ÷ 检查成本 · 分母取示例样本量 {SAMPLE_SIZE}（`prior` 尚未由系统回填）
         </p>
       </div>
       <Badge tone="blue">{candidates.length + (gapCandidate ? 1 : 0)} 个候选</Badge>
@@ -93,7 +94,7 @@ export function RunView({ data, symptoms, symptomId, onSymptomChange, onSelectNo
 
           {/* 来源归因：把「这次排序被谁影响」摊开，否则锚定是无声的。 */}
           <p className="text-[10px] text-tita-ink-faint">
-            来源：{sourcesOf(candidate.hypothesis.id).join(' · ') || '切面先验'} · 切面 {candidate.hypothesis.failureMode ?? '未标注'}
+            来源：{sourcesOf(candidate.hypothesis.id).join(' · ') || '切面先验'} · 切面 {candidate.hypothesis.failureReason ?? '未标注'}
           </p>
 
           <div className="flex flex-col gap-1">
@@ -132,10 +133,18 @@ export function RunView({ data, symptoms, symptomId, onSymptomChange, onSelectNo
       <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>
+        <Badge tone="warning">待实现</Badge>
       </div>
       <p className="text-[10.5px] leading-snug text-tita-ink-muted">
-        近 30 天 8 次 · 占比 20% —— 它是重量抽象的触发器，不是兜底话术。
+        它是**登记新假设**的触发器，不是兜底话术：候选剪空时不该返回空列表，
+        而应该在这里落一条「这个现象我们还没有对应的假设」。
+      </p>
+      {/* 这里原来写「近 30 天 8 次 · 占比 20%」—— 那是编出来的数字，与产品第一条
+          品牌承诺（不编造数字、未实现必须标出）直接冲突。真实计数要等 `unknown`
+          节点与它的统计落地之后才有；在那之前如实标「待实现」，不填占位数字。 */}
+      <p className="text-[10px] leading-snug text-tita-ink-faint">
+        登记入口在「知识库 → Wiki」的待办区：Agent 用 <b>propose_wiki_cards</b> 提一条
+        假设草案，人确认之后才落卡（未确认的提议不上图）。这一屏目前只读。
       </p>
     </Card>
 
@@ -163,7 +172,16 @@ export function RunView({ data, symptoms, symptomId, onSymptomChange, onSelectNo
         <TriangleAlert size={10} className="mr-1 inline align-[-1px]" />
         被否定，记为误导边 —— 否定也是要写回的内容。
       </p>
-      <Button className="w-full" size="sm">写回图谱（记录本次路径）</Button>
+      {/*
+        写回**不从这一屏发起**。这一屏渲染的是一份已有的知识（案例路径 + 候选集），
+        不是一次进行中的排查 —— 没有「本次跑了哪些检查点、看到什么」的现场状态，
+        按一个按钮只能编出一份路径来，而那正好是这个产品最不该做的事。
+        真实的写回发生在排查进行时：Agent 调 `POST /diagnosis/run` 落一条
+        `agent_diagnosis_case` 的 SourceRaw，顺手提一张案例卡片等人确认。
+      */}
+      <Button className="w-full" size="sm" disabled title="写回发生在排查进行时：Agent 用 POST /diagnosis/run 落一条诊断日志并提议案例卡片。这一屏是只读的复盘视图。">
+        写回由排查进行时完成（这一屏只读）
+      </Button>
     </Card>
   </div>
 }