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

package/src/client/NodeSettings.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useRef, useState, useSyncExternalStore, type ReactNode } from 'react'
-import { Button, Input, SelectMenu, Switch, cn } from '@tita-data-agent/ui/components'
+import { Button, Field, Input, SelectMenu, Switch, cn } from '@tita-data-agent/ui/components'
 import { AlertCircle, Check, LoaderCircle, SlidersHorizontal } from '@tita-data-agent/ui/icons'
 import { DirectoryPickerField } from './DirectoryPicker.tsx'
 import { InfoHint } from './InfoHint.tsx'
@@ -203,9 +203,13 @@ function needsDebounce(spec: FieldSpec): boolean {
 }
 
 function TextField({ spec, value, onChange, disabled, resolved }: { spec: FieldSpec; value: string; onChange: (value: string) => void; disabled: boolean; resolved?: string }) {
-  return <label className="tita-settingField">
-    <span>{spec.label}</span>
+  /* 两条说明各自成行：`Field` 的说明位是一个 span，两条挤在一行会读成一句。 */
+  const hint = <>
+    {spec.hint ? <span className="block">{spec.hint}</span> : null}
     {/* 留空 = 自动。占位符显示**解析后**的真实路径 —— 否则「自动」等于没说。 */}
+    {resolved ? <span className="block">留空 = 自动：<code>{resolved}</code></span> : null}
+  </>
+  return <Field label={spec.label} hint={hint}>
     <Input
       type={spec.kind === 'number' ? 'number' : 'text'}
       value={value}
@@ -213,23 +217,20 @@ function TextField({ spec, value, onChange, disabled, resolved }: { spec: FieldS
       {...(resolved ? { placeholder: resolved } : {})}
       onChange={event => onChange(event.target.value)}
     />
-    {/* 说明跟在它解释的那个字段下面，不是攒成一堆放在面板底部 ——
-        底部那行「字段名：说明；字段名：说明」是把标签和说明各念一遍。 */}
-    {spec.hint && <small className="tita-settingHint">{spec.hint}</small>}
-    {resolved && <small className="tita-settingHint">留空 = 自动：<code>{resolved}</code></small>}
-  </label>
+  </Field>
 }
 
 /**
- * A dropdown field. The wrapper is a `<div>`, not the `<label>` the text and
- * toggle fields use: the control is a `<button>` now (Radix's trigger), and a
- * `<label>` around a button makes the visible field name an ambiguous second
- * name. The name travels on the trigger's `aria-label` instead, and the visible
- * `<span>` stays the thing a person reads.
+ * A dropdown field.
+ *
+ * `as="div"`, not the `<label>` the text and toggle fields use: the control is a
+ * `<button>` now (Radix's trigger), and a `<label>` around a button makes the
+ * visible field name an ambiguous second name — clicking the caption would also
+ * open the menu. The name travels on the trigger's `aria-label` instead, and the
+ * visible caption stays the thing a person reads.
  */
 function SelectField({ spec, value, onChange, disabled }: { spec: FieldSpec; value: string; onChange: (value: string) => void; disabled: boolean }) {
-  return <div className="tita-settingField">
-    <span>{spec.label}</span>
+  return <Field as="div" label={spec.label} hint={spec.hint}>
     <SelectMenu
       value={value}
       disabled={disabled}
@@ -237,25 +238,22 @@ function SelectField({ spec, value, onChange, disabled }: { spec: FieldSpec; val
       options={spec.options ?? []}
       aria-label={spec.label}
     />
-    {spec.hint && <small className="tita-settingHint">{spec.hint}</small>}
-  </div>
+  </Field>
 }
 
 /**
  * 开关字段。
  *
- * 它现在和文本 / 下拉 / 目录选择**共用同一套结构**：标签在上、控件在中、说明在下。
+ * 它和文本 / 下拉 / 目录选择**共用同一套结构**：标签在上、控件在中、说明在下。
  *
  * 原来它是「带边框和底色的整行」，另外三种是无边框的堆叠 —— 四种字段两种长相，而且
  * 标签用 `<strong>`、说明塞在标签里，对齐方式也对不上。更实际的问题是那个边框：
  * 小节本身已经是一张卡片，字段再包一层就是**卡片套卡片**。
  */
 function ToggleField({ spec, value, onChange, disabled }: { spec: FieldSpec; value: boolean; onChange: (value: boolean) => void; disabled: boolean }) {
-  return <label className="tita-settingField">
-    <span>{spec.label}</span>
+  return <Field label={spec.label} hint={spec.hint}>
     <Switch checked={value} disabled={disabled} onCheckedChange={onChange} />
-    {spec.hint && <small className="tita-settingHint">{spec.hint}</small>}
-  </label>
+  </Field>
 }
 
 /** 写入状态。`saved` 只短暂出现，`error` 留到下一次改动。 */

package/src/client/PreviewSections.tsx

@@ -1,18 +1,29 @@
 /**
- * 预览抽屉的三个公共分块（0035）：**元信息 → 内容 → 版本**。
+ * 预览抽屉的公共分块（0035 起）：**元信息 → 内容 → 版本**。
  *
  * SourceRaw 的原文预览与 wiki 卡片的预览必须是**同一种形态**。两处各写一遍结构，
  * 就会出现「一个把元信息放最上面、一个放最下面」「一个能给文本预览、另一个不能」
  * 这类漂移 —— 而它们回答的是同一个问题：这份东西是什么、写了什么、改过几次。
  *
- * 这一层只定义**顺序与分块**（小节标题 + 计数 + 内容），字段仍由调用方给：原文有
+ * 这一层只定义**顺序与分块**（小节头 + 计数 + 内容），字段仍由调用方给：原文有
  * `content_hash`，卡片有 `entity_id`，本来就不一样，硬凑成同一张表只会两处都别扭。
  * 时间也由调用方格式化（见 `format.ts`）—— 元信息用标准格式，列表行用紧凑格式。
+ *
+ * 0042 重排了三件事，理由都是「三种层级要一眼分得开」：
+ *
+ * 1. **小节头换了字号**（`drawerSubHead` 13px/700，上加分隔线）。此前小节头是
+ *    12px/700、正文 12px/400 —— 同字号只差一个字重，于是「内容」两个字和它下面的
+ *    正文在视觉上是同一段文字的第 0 行与第 1 行。
+ * 2. **视图切换离开小节头那一行。** 它被压到 20px 高站在 12px 的小节标题旁边，与
+ *    小节名、字符数、（曾经的）出口按钮四种东西共享一行。现在它有自己的「读法工具栏」。
+ * 3. **正文块锁高度、自己滚。** 此前整条抽屉体是一根长滚动条：正文有多长，「版本」
+ *    就被推到多远，而版本是要动手的地方（回滚）。现在正文块有上限、块内滚动，
+ *    下面的分块位置不再随正文长度漂移。
  */
 
 import { useState, type ReactNode } from 'react'
-import { FileCode2, FileText, History, Image, ListTree } from '@tita-data-agent/ui/icons'
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@tita-data-agent/ui/components'
+import { ChevronDown, ChevronUp, FileCode2, FileText, History, Image, ListTree } from '@tita-data-agent/ui/icons'
+import { Button, Tabs, TabsContent, TabsList, TabsTrigger, cn } from '@tita-data-agent/ui/components'
 import { VersionManager, type VersionManagerProps } from '@tita-data-agent/ui/versions'
 // 平台提供的 Markdown 原子（DSH 的模块表里有它，本插件的 client bundle 也已把它列为
 // external）。原文与卡片正文本身就是 Markdown，用 `<pre>` 显示等于把标题、表格、链接
@@ -35,8 +46,17 @@ const MARKDOWN_LABELS: MarkdownLabels = {
   footnotes: '脚注',
 }
 
-/** 正文只渲染前 2 万字符：更长的原文在抽屉里没有阅读意义，也会拖慢 Markdown 渲染。 */
-const PREVIEW_CHARS = 20000
+/**
+ * 正文在抽屉里最多渲染这么多字符。**与服务端 `SOURCE_PREVIEW_CHARS` 同值。**
+ *
+ * 服务端在传输层就把原文封顶了，前端再取同一个数，是为了让「界面上写出来的那个数」
+ * 与「服务端封顶的那个数」不可能是两个：0042 之前客户端另有一个 20000，
+ * 于是同一份材料有两个上限，而界面上一个都没写。
+ *
+ * wiki 卡片没有独立整页出口，所以卡片正文超过它时给**本地展开**（见 `PreviewContent`
+ * 的「展开全部」），不是只截断不给出路。
+ */
+const PREVIEW_CHARS = 4000
 
 export interface PreviewRow {
   label: string
@@ -45,13 +65,21 @@ export interface PreviewRow {
   code?: boolean
 }
 
+/**
+ * 抽屉里的小节头 —— 三种层级里的中间那层（标题 15px / 小节头 13px / 正文 12px）。
+ * 分隔线在 `.tita-drawerSection` 上（小节与上一块之间），所以这里只管内容。
+ */
+function SectionHead({ icon, title, children }: { icon: ReactNode; title: string; children?: ReactNode }): ReactNode {
+  return <div className={styles.drawerSubHead}>
+    <h4>{icon}{title}</h4>
+    {children}
+  </div>
+}
+
 /** 元信息：一张两列的事实表。标签列宽固定，所以标签要短且彼此对齐。 */
 export function PreviewMeta({ rows }: { rows: PreviewRow[] }): ReactNode {
-  // 每一块都包一层 `drawerSection`：标题与它自己的内容是一块，块与块之间的间距由
-  // 外层 `drawerStack` 给。不包的话「元信息」标题和它下面那张表是两个同级节点，
-  // 外层 gap 会把标题和自己的表也拉开。
   return <section className={styles.drawerSection}>
-    <div className={styles.kbSubHead}><h4><ListTree size={13} />元信息</h4></div>
+    <SectionHead icon={<ListTree size={13} />} title="元信息" />
     <dl className={styles.kbKv}>
       {rows.map(row => <div key={row.label}>
         <dt>{row.label}</dt>
@@ -64,33 +92,55 @@ export function PreviewMeta({ rows }: { rows: PreviewRow[] }): ReactNode {
 export interface PreviewAsset { rel: string; url: string; bytes: number }
 
 /**
- * 内容：小节标题 + 视图切换 + 正文。
+ * 内容：小节头 + 读法工具栏 + 正文（锁高内滚）。
  *
  * 两个视图是**同一份内容**的两种读法：Markdown 是阅读态（默认），文本是源码态，
  * 用于逐字核对 —— 与版本 diff 是同一种读法。切换不重新取数，也不改内容。
  * 图片素材排在这一块的末尾：它也是内容，只是渲染器没能就地展开的那部分。
+ *
+ * `totalChars` 说全文有多少字符（服务端按 `SOURCE_PREVIEW_CHARS` 封顶，
+ * `content.length` 已经不是全文长度了）。读全文的出口在**抽屉头**上，不在这一块里：
+ * 它是「这份东西还能去哪看」，位置要固定，不该随正文是否被截断而出现或消失。
  */
-export function PreviewContent({ content, assets = [] }: { content: string; assets?: PreviewAsset[] }): ReactNode {
+export function PreviewContent({ content, assets = [], totalChars }: {
+  content: string
+  assets?: PreviewAsset[]
+  /** 全文总字符数。省略时按 `content.length` 算（它本来就是全文）。 */
+  totalChars?: number
+}): ReactNode {
   const [view, setView] = useState<'md' | 'text'>('md')
-  const shown = content.slice(0, PREVIEW_CHARS)
-  const clipped = shown.length < content.length
-  return <section className={styles.drawerSection}><Tabs value={view} onValueChange={next => setView(next as 'md' | 'text')}>
-    <div className={styles.kbSubHead}>
-      <h4><FileText size={13} />内容</h4>
-      <TabsList className={`${styles.tabsList} ${styles.kbViewTabs}`}>
-        <TabsTrigger value="md">Markdown</TabsTrigger>
-        <TabsTrigger value="text"><FileCode2 size={11} />文本</TabsTrigger>
-      </TabsList>
-      <span>{content.length} 字符{clipped ? ` · 只渲染前 ${shown.length}` : ''}</span>
-    </div>
-    <TabsContent value="md">
-      <div className={styles.kbMarkdown}><MarkdownText text={shown} labels={MARKDOWN_LABELS} /></div>
-    </TabsContent>
-    <TabsContent value="text">
-      <pre className={styles.kbPre}>{shown}</pre>
-    </TabsContent>
+  /** 卡片正文超过上限时的本地展开：卡片没有整页出口，只能在这里给出路。 */
+  const [expanded, setExpanded] = useState(false)
+  const shown = expanded ? content : content.slice(0, PREVIEW_CHARS)
+  const total = totalChars ?? content.length
+  const clipped = shown.length < total
+  const canExpand = content.length > PREVIEW_CHARS
+  return <section className={styles.drawerSection}>
+    <SectionHead icon={<FileText size={13} />} title="内容">
+      <span className={styles.drawerHeadFact}>{total} 字符{clipped ? ` · 这里显示前 ${shown.length}` : ''}</span>
+    </SectionHead>
+    {/* 读法工具栏：这个分块的**两种读法**是它自己的事，不再挤进小节标题那一行。 */}
+    <Tabs value={view} onValueChange={next => setView(next as 'md' | 'text')}>
+      <div className={styles.drawerToolbar}>
+        <TabsList className={cn(styles.tabsList, styles.kbViewTabs)}>
+          <TabsTrigger value="md">Markdown</TabsTrigger>
+          <TabsTrigger value="text"><FileCode2 size={11} />文本</TabsTrigger>
+        </TabsList>
+        {canExpand && <Button
+          variant="ghost" size="sm" className={styles.drawerMore}
+          onClick={() => setExpanded(value => !value)}
+        >{expanded ? <ChevronUp size={11} /> : <ChevronDown size={11} />}
+          {expanded ? '收起' : `展开全部（还有 ${content.length - PREVIEW_CHARS} 字符）`}</Button>}
+      </div>
+      <TabsContent value="md">
+        <div className={styles.drawerBody}><div className={styles.kbMarkdown}><MarkdownText text={shown} labels={MARKDOWN_LABELS} /></div></div>
+      </TabsContent>
+      <TabsContent value="text">
+        <div className={styles.drawerBody}><pre className={styles.kbPre}>{shown}</pre></div>
+      </TabsContent>
+    </Tabs>
     {assets.length > 0 && <>
-      <div className={styles.kbSubHead}><h4><Image size={13} />图片素材</h4><span>{assets.length} 张</span></div>
+      <SectionHead icon={<Image size={13} />} title="图片素材"><span className={styles.drawerHeadFact}>{assets.length} 张</span></SectionHead>
       <div className={styles.kbAssets}>
         {assets.map(asset => <figure key={asset.rel} className={styles.kbAsset}>
           <img src={asset.url} alt={asset.rel} loading="lazy" />
@@ -98,18 +148,22 @@ export function PreviewContent({ content, assets = [] }: { content: string; asse
         </figure>)}
       </div>
     </>}
-  </Tabs></section>
+  </section>
 }
 
 /**
- * 版本：小节标题 + 计数 + 一句「什么时候会留快照」+ 时间线。
+ * 版本：小节头 + 计数 + 一句「什么时候会留快照」+ 时间线。
  *
  * `hint` 不是可有可无的装饰：两种产物的快照触发条件不同（原文是内容变化，卡片是
  * 正文变化 —— 只改状态不造版本），不写清楚，用户会以为「我改过它，为什么没有版本」。
+ *
+ * 0042 没有把它降级成抽屉头的一枚按钮，理由有两条：它是当前**唯一**的回滚入口
+ * （`setRestoreTarget` 只在它这里被调用），而且正文块锁高之后它已经在一屏之内 ——
+ * 降级要新造一层状态，收益只是省一块高度。
  */
 export function PreviewVersions({ hint, ...manager }: { hint?: string } & VersionManagerProps): ReactNode {
   return <section className={styles.drawerSection}>
-    <div className={styles.kbSubHead}><h4><History size={13} />版本</h4><span>{manager.entries?.length ?? 0} 个</span></div>
+    <SectionHead icon={<History size={13} />} title="版本"><span className={styles.drawerHeadFact}>{manager.entries?.length ?? 0} 个</span></SectionHead>
     {hint && <p className={styles.kbHint}>{hint}</p>}
     <VersionManager {...manager} />
   </section>

package/src/client/ProposalReview.tsx

@@ -0,0 +1,313 @@
+/**
+ * 「待确认的卡片提议」—— 0021 §6.1 那道门的**人这一侧**。
+ *
+ * ## 它为什么长在这里
+ *
+ * review 界面**不在归因图谱上**，而在「知识库 → Wiki」这一屏：它与 Pass 0 的候选草案、
+ * lint 待补清单是同一处，不新造第二套 review 界面（PRD §7.1 的明确要求）。
+ * 智能归因那边只挂一个「N 条待确认」角标，点它跳过来。
+ *
+ * ## 这一屏要回答的三个问题
+ *
+ * 1. **这是什么、从哪来** —— 触发它的那条来源（`source_ref`）与触发方式（编译抽取 /
+ *    Agent 主动提议 / 一次排查结束）。没有这一行，人只能凭卡片标题猜它该不该存在。
+ * 2. **它合不合格** —— 提议阶段跑出来的三层校验问题（缺小节 / 缺字段 / 图断了 /
+ *    这条知识没用）逐条列出来。**校验是确认的前置**：不看清就通过，等于把校验器绕过去。
+ * 3. **通过之后会变成什么** —— 卡片正文的原文（只读呈现，不是输入框：它是待审内容，
+ *    不是可编辑表单）。
+ *
+ * ## 为什么没有「全部通过」
+ *
+ * 有的话它一定会被当成默认动作，而这道门的全部价值就在于**逐条看过**。
+ * 批量通过等于把「人确认」退化成一个仪式。
+ *
+ * ## 三个动作的边界
+ *
+ * | 动作 | 做什么 | 什么时候用 |
+ * | --- | --- | --- |
+ * | **通过并写入** | 确认 + 立刻落卡 | 默认。这一步之后卡片就进编译、进图、能被召回 |
+ * | **仅确认** | 只确认，不落卡 | 想让 Agent 用 `write_knowledge_card` 落卡时（那条路要求一条已确认且尚未落卡的提议） |
+ * | **拒绝** | 留原因、不落卡 | 这条不算知识。**原因必须写** —— 它同时是「下次不要再提同一条」的判据 |
+ */
+
+import { useCallback, useEffect, useState, type ReactNode } from 'react'
+import { AlertCircle, Check, RefreshCw, ShieldCheck, Sparkles, Trash2 } from '@tita-data-agent/ui/icons'
+import { Badge, Button, Input, cn } from '@tita-data-agent/ui/components'
+import { requestJson } from './request.ts'
+
+/** 服务端返回的一条提议（`/knowledge/card-proposals`）。字段与 `proposals.ts` 同形。 */
+export interface CardProposalView {
+  id: string
+  sourceRef: string
+  trigger: 'extraction' | 'agent' | 'diagnosis-run'
+  action: 'create' | 'update' | 'merge'
+  entityType: string
+  entityId: string
+  title: string
+  summary?: string
+  content: string
+  sourceRefs: string[]
+  status: 'pending' | 'confirmed' | 'rejected'
+  issues: Array<{ level: string; field?: string; message: string }>
+  createdAt: string
+  updatedAt: string
+  confirmedBy?: string
+  writtenAt?: string
+  reviewedBy?: string
+  reason?: string
+}
+
+const TRIGGER_LABEL: Record<CardProposalView['trigger'], string> = {
+  extraction: '编译时自动抽取',
+  agent: 'Agent 主动提议',
+  'diagnosis-run': '一次排查结束',
+}
+
+const ACTION_LABEL: Record<CardProposalView['action'], string> = {
+  create: '新建卡片',
+  update: '更新已有卡片',
+  merge: '并入已有卡片',
+}
+
+/**
+ * 校验问题的三层标签。
+ *
+ * 三层分开报不是洁癖（0021 §6.5）：**格式错说明卡片没填完，引用错说明图断了，
+ * 语义错说明这条知识本身没用**。三者对应的动作完全不同（补字段 / 修边 / 重写），
+ * 混成同一个「校验失败」人就学不会怎么写卡片。
+ */
+const LEVEL_LABEL: Record<string, { label: string; tone: 'warning' | 'violet' | 'neutral' }> = {
+  format: { label: '格式', tone: 'warning' },
+  reference: { label: '引用', tone: 'violet' },
+  semantic: { label: '语义', tone: 'neutral' },
+}
+
+export function ProposalReview({ kbId, onApplied, onOpenWikiTypes }: {
+  kbId: string
+  /** 落卡之后通知父级刷新卡片列表与统计 —— 卡片数变了。 */
+  onApplied?: () => void
+  /** 「去类型定义」的入口。提议里的类型问题要在那一屏改。 */
+  onOpenWikiTypes?: () => void
+}): ReactNode {
+  const [pending, setPending] = useState<CardProposalView[]>([])
+  const [rejected, setRejected] = useState<CardProposalView[]>([])
+  const [phase, setPhase] = useState<'loading' | 'ready' | 'error'>('loading')
+  const [busy, setBusy] = useState<string | null>(null)
+  const [notice, setNotice] = useState<{ tone: 'success' | 'error'; text: string } | null>(null)
+  /** 拒绝原因：按提议 id 存，因为每一条要写的原因不一样。 */
+  const [reasons, setReasons] = useState<Record<string, string>>({})
+  /** 展开的正文：默认收起，否则一条提议就吃掉整屏。 */
+  const [open, setOpen] = useState<ReadonlySet<string>>(new Set())
+
+  const load = useCallback(async (): Promise<void> => {
+    setPhase('loading')
+    try {
+      const [waiting, refused] = await Promise.all([
+        requestJson<{ proposals: CardProposalView[] }>(`/knowledge/card-proposals?kb=${encodeURIComponent(kbId)}&status=pending`),
+        requestJson<{ proposals: CardProposalView[] }>(`/knowledge/card-proposals?kb=${encodeURIComponent(kbId)}&status=rejected`),
+      ])
+      setPending(waiting.data?.proposals ?? [])
+      setRejected(refused.data?.proposals ?? [])
+      setPhase('ready')
+    } catch {
+      setPhase('error')
+    }
+  }, [kbId])
+
+  useEffect(() => { void load() }, [load])
+
+  const review = async (item: CardProposalView, action: 'confirm-and-write' | 'confirm' | 'reject'): Promise<void> => {
+    setBusy(item.id)
+    setNotice(null)
+    try {
+      await requestJson('/knowledge/card-proposals/review', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({
+          kb: kbId,
+          proposal_id: item.id,
+          action,
+          ...(action === 'reject' ? { reason: reasons[item.id] ?? '' } : {}),
+        }),
+      })
+      setNotice({
+        tone: 'success',
+        text: action === 'reject'
+          ? `已拒绝「${item.title}」，原因留档 —— 内容不变就不会再提同一条`
+          : action === 'confirm'
+            ? `已确认「${item.title}」。它还没落卡：Agent 可以用 write_knowledge_card 落它`
+            : `「${item.title}」已落卡，下一次编译就会进 wikiNotes 与图`,
+      })
+      if (action !== 'confirm') onApplied?.()
+      await load()
+    } catch (error) {
+      setNotice({ tone: 'error', text: error instanceof Error ? error.message : String(error) })
+    } finally {
+      setBusy(null)
+    }
+  }
+
+  const toggle = (id: string): void => {
+    const next = new Set(open)
+    if (next.has(id)) next.delete(id); else next.add(id)
+    setOpen(next)
+  }
+
+  /**
+   * 一条提议都没有时**整块不出现**。
+   *
+   * 它不是空态该占的位置：这一屏的主体是 wiki 卡片列表，提议是插在它前面的待办。
+   * 没有待办时留一块「暂无待办」的框，等于每次打开都先读一句废话。
+   */
+  if (phase === 'ready' && pending.length === 0 && rejected.length === 0) return null
+
+  return <section
+    aria-labelledby="tita-proposal-title"
+    className="flex flex-col gap-1.5 rounded-xl border border-tita-line bg-tita-surface-muted p-2.5"
+  >
+    <div className="flex flex-wrap items-center gap-2">
+      <h3 id="tita-proposal-title" className="flex items-center gap-1.5 text-[12px] font-semibold text-tita-ink">
+        <ShieldCheck size={13} />待确认的卡片提议
+      </h3>
+      <span className="text-[10.5px] text-tita-ink-muted">
+        {phase === 'loading' ? '正在读取…' : phase === 'error' ? '读取失败' : `${pending.length} 条待确认`}
+      </span>
+      <span className="ml-auto flex items-center gap-1">
+        <Button
+          variant="ghost" size="icon"
+          className="h-[26px] w-[26px] min-w-[26px]"
+          title="重新读取待办队列" aria-label="重新读取待办队列"
+          onClick={() => void load()}
+        ><RefreshCw size={13} /></Button>
+      </span>
+    </div>
+
+    {/* 这一屏的规矩要写在明面上：**未确认的提议不落 `02_wiki/`**。它不参与编译、
+        不参与召回、不在图上出现 —— 因为它连一张卡片都还不是。 */}
+    <p className="text-[10.5px] leading-relaxed text-tita-ink-muted">
+      Agent 与编译只会**提议**，不会写卡片。未确认的提议不落 <b>02_wiki/</b>，
+      因此不进编译、不参与召回、不在归因图上出现。通过之后才落卡。
+    </p>
+
+    {notice && <p
+      role="status"
+      className={cn('flex items-start gap-1.5 text-[10.5px] leading-relaxed', notice.tone === 'error' ? 'text-tita-danger' : 'text-tita-ink-muted')}
+    >
+      <AlertCircle size={12} className="mt-0.5 shrink-0" />
+      <span className="min-w-0 flex-1">{notice.text}</span>
+    </p>}
+
+    {phase === 'error' && <p className="text-[10.5px] leading-relaxed text-tita-danger">
+      读不到这个知识库的待办队列。宿主刚起来、或知识库根目录暂时读不到时会这样。
+    </p>}
+
+    {pending.length > 0 && <ul className="flex flex-col gap-1.5">
+      {pending.map(item => <li
+        key={item.id}
+        className="flex flex-col gap-1.5 rounded-lg border border-tita-line bg-tita-surface p-2"
+      >
+        <div className="flex flex-wrap items-center gap-1.5">
+          <span className="min-w-0 flex-1 truncate text-[11.5px] font-semibold text-tita-ink" title={item.title}>{item.title}</span>
+          <code className="shrink-0 font-mono text-[9.5px] text-tita-ink-faint">{item.entityId}</code>
+        </div>
+
+        <div className="flex flex-wrap items-center gap-1">
+          <Badge tone="neutral">{item.entityType}</Badge>
+          <Badge tone="neutral">{ACTION_LABEL[item.action]}</Badge>
+          <Badge tone="violet">{TRIGGER_LABEL[item.trigger]}</Badge>
+        </div>
+
+        {/* 出处：没有它，人只能凭卡片标题猜这条提议该不该存在。 */}
+        <p className="truncate text-[10px] text-tita-ink-faint" title={item.sourceRefs.join(' · ')}>
+          出处 {item.sourceRefs.join(' · ') || item.sourceRef}
+        </p>
+
+        {/* 三层校验的问题清单。**校验是确认的前置**：不看清就通过，等于把校验器绕过去。 */}
+        {item.issues.length > 0 && <ul className="flex flex-col gap-0.5">
+          {item.issues.map((issue, index) => {
+            const level = LEVEL_LABEL[issue.level] ?? { label: issue.level, tone: 'neutral' as const }
+            return <li key={index} className="flex items-start gap-1.5 text-[10px] leading-relaxed text-tita-ink-muted">
+              <Badge tone={level.tone}>{level.label}</Badge>
+              <span className="min-w-0 flex-1">{issue.field ? `${issue.field}：` : ''}{issue.message}</span>
+            </li>
+          })}
+        </ul>}
+
+        <div className="flex items-center gap-1">
+          <Button
+            variant="ghost" size="sm"
+            className="h-[26px] min-h-[26px] px-2 text-[10.5px]"
+            aria-expanded={open.has(item.id)}
+            onClick={() => toggle(item.id)}
+          >{open.has(item.id) ? '收起正文' : '看正文'}</Button>
+          {item.issues.length > 0 && onOpenWikiTypes && <Button
+            variant="ghost" size="sm"
+            className="h-[26px] min-h-[26px] px-2 text-[10.5px]"
+            onClick={onOpenWikiTypes}
+          >去改类型定义</Button>}
+        </div>
+
+        {/* 正文用**只读呈现**（等宽块），不是 `<textarea>`：它是待审内容，不是可编辑表单。
+            用输入框展示等于告诉人「这里能改」，试两次才发现点不动。 */}
+        {open.has(item.id) && <pre className="max-h-[220px] overflow-auto overscroll-contain whitespace-pre-wrap break-words rounded-lg border border-tita-line bg-tita-canvas p-2 font-mono text-[10px] leading-relaxed text-tita-ink-muted">{item.content}</pre>}
+
+        <div className="flex flex-wrap items-center gap-1.5">
+          <Button
+            variant="default" size="sm"
+            className="h-[26px] min-h-[26px] px-2 text-[10.5px]"
+            disabled={busy !== null}
+            title="确认并立刻落卡：这一步之后它进编译、进图、能被召回"
+            onClick={() => void review(item, 'confirm-and-write')}
+          ><Check size={12} />通过并写入</Button>
+          <Button
+            variant="outline" size="sm"
+            className="h-[26px] min-h-[26px] px-2 text-[10.5px]"
+            disabled={busy !== null}
+            title="只确认、不落卡：交给 Agent 用 write_knowledge_card 落它"
+            onClick={() => void review(item, 'confirm')}
+          ><ShieldCheck size={12} />仅确认</Button>
+          <span className="ml-auto flex min-w-0 flex-1 items-center gap-1">
+            <Input
+              value={reasons[item.id] ?? ''}
+              placeholder="拒绝原因（必写：它决定下次还会不会再提同一条）"
+              className="h-[26px] min-h-[26px] text-[10.5px]"
+              onChange={event => setReasons({ ...reasons, [item.id]: event.target.value })}
+            />
+            <Button
+              variant="ghost" size="sm"
+              className="h-[26px] min-h-[26px] shrink-0 px-2 text-[10.5px]"
+              disabled={busy !== null}
+              onClick={() => void review(item, 'reject')}
+            ><Trash2 size={12} />拒绝</Button>
+          </span>
+        </div>
+      </li>)}
+    </ul>}
+
+    {rejected.length > 0 && <details className="rounded-lg border border-tita-line bg-tita-surface px-2 py-1.5">
+      <summary className="cursor-pointer text-[10.5px] text-tita-ink-muted">
+        已拒绝 {rejected.length} 条 —— 原因留档，内容不变就不会再提同一条
+      </summary>
+      <ul className="mt-1.5 flex flex-col gap-1">
+        {rejected.map(item => <li key={item.id} className="flex flex-col gap-0.5 text-[10px] leading-relaxed text-tita-ink-muted">
+          <span className="flex items-center gap-1.5">
+            <code className="font-mono text-[9.5px] text-tita-ink-faint">{item.entityId}</code>
+            <span className="min-w-0 flex-1 truncate">{item.title}</span>
+            {item.reviewedBy && <span className="shrink-0 text-tita-ink-faint">{item.reviewedBy}</span>}
+          </span>
+          <span className="text-tita-danger">{item.reason}</span>
+        </li>)}
+      </ul>
+    </details>}
+
+    {pending.length === 0 && rejected.length > 0 && phase === 'ready' && <p className="flex items-center gap-1.5 text-[10.5px] text-tita-ink-muted">
+      <Sparkles size={12} />待办清空了。
+    </p>}
+  </section>
+}
+
+/** 待确认条数的角标：智能归因那一栏用它，点了跳到这里。 */
+export function ProposalBadge({ count }: { count: number }): ReactNode {
+  if (count <= 0) return null
+  return <Badge tone="warning">{count} 条待确认</Badge>
+}