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

package/src/client/TrialReportView.tsx

@@ -30,19 +30,19 @@
 
 import { useMemo, useState, type ReactNode } from 'react'
 import {
-  Bot, ChevronDown, Copy, FileText, Layers3, Quote, Settings2, ShieldCheck,
+  Bot, ChevronDown, Copy, Settings2,
   TriangleAlert, UserRound,
 } from '@tita-agent/ui/icons'
-import { cn } from '@tita-agent/ui/components'
+import { Tabs, TabsContent, TabsList, TabsTrigger, cn } from '@tita-agent/ui/components'
 import type {
-  TrialActor, TrialKnowledge, TrialMatrix, TrialMatrixGroup, TrialReportView, TrialSource,
+  TrialActor, TrialEvent, TrialEventStepKind, TrialKnowledge, TrialMatrix, TrialMatrixGroup, TrialReportView, TrialSource, TrialTokenUsage,
 } from './wiki-trial.ts'
 import { AxisMatrix, coordLabel, sceneLabel, type MatrixPick, type MatrixView } from './AxisMatrix.tsx'
 import { styles } from './styles.ts'
 
 /** 执行人 → 图标 + 说明。三档固定，不再多分。 */
 const ACTOR: Record<TrialActor, { icon: typeof Bot; hint: string }> = {
-  模型: { icon: Bot, hint: '抽取 Knowledge 与三个轴候选；判不动就标出来' },
+  模型: { icon: Bot, hint: '抽取 Knowledge 与坐标；编译时可对候选歧义补判' },
   系统: { icon: Settings2, hint: '确定性规则，每次结果一致：归一、绑定、物化、建索引' },
   人: { icon: UserRound, hint: '只看规则与模型都覆盖不到的：同义裁决、冲突裁决、editorial' },
 }
@@ -53,6 +53,212 @@ const ITEM_CAP = 24
 /** 知识是平铺清单，给得比步骤宽一点，但也要有上限。 */
 const LIST_CAP = 60
 
+function tokenCount(value: number | undefined): string {
+  return value === undefined ? '—' : value.toLocaleString('zh-CN')
+}
+
+function usageSummary(usage?: TrialTokenUsage): string {
+  if (!usage) return '用量未返回'
+  const hasInput = usage.inputTokens !== undefined || usage.cacheReadTokens !== undefined || usage.cacheWriteTokens !== undefined
+  const input = hasInput
+    ? (usage.inputTokens ?? 0) + (usage.cacheReadTokens ?? 0) + (usage.cacheWriteTokens ?? 0)
+    : undefined
+  const total = usage.totalTokens ?? (input !== undefined && usage.outputTokens !== undefined ? input + usage.outputTokens : undefined)
+  return `输入 ${tokenCount(input)} · 输出 ${tokenCount(usage.outputTokens)} · 合计 ${tokenCount(total)} tokens`
+}
+
+function totalTokensOf(usage?: TrialTokenUsage): number | undefined {
+  if (!usage) return undefined
+  if (usage.totalTokens !== undefined) return usage.totalTokens
+  if (usage.outputTokens === undefined) return undefined
+  const hasInput = usage.inputTokens !== undefined || usage.cacheReadTokens !== undefined || usage.cacheWriteTokens !== undefined
+  if (!hasInput) return undefined
+  return (usage.inputTokens ?? 0) + (usage.cacheReadTokens ?? 0) + (usage.cacheWriteTokens ?? 0) + usage.outputTokens
+}
+
+const EVENT_STEP_LABEL: Record<TrialEventStepKind, string> = {
+  observation: '观察', check: '核对', action: '操作', result: '结果', conclusion: '结论',
+}
+
+/**
+ * 区块导航。
+ *
+ * 这份报告可以有七步、几十条知识、几百 KB —— 打开它的人第一件事是「跳到我要看的那一段」，
+ * 而不是从上往下读。所以顶上放一条**锚点条**：它是这一页的目录，不是第二个流程说明。
+ *
+ * 用 `<a href>` 而不是按钮：这一页就是一份文档，锚点带来的是「复制链接给同事」这种
+ * 浏览器本来就有的能力（`#steps` 直接落到处理步骤）。
+ */
+const SECTIONS: Array<{ id: string; label: string }> = [
+  { id: 'trial-overview', label: '概览' },
+  { id: 'trial-output', label: '抽取内容' },
+  { id: 'trial-steps', label: '处理步骤' },
+  { id: 'trial-requests', label: '模型请求' },
+  { id: 'trial-review', label: '核验结果' },
+]
+
+function SectionNav({ items }: { items: typeof SECTIONS }): ReactNode {
+  return <nav className={styles.trialNav} aria-label="报告区块">
+    {items.map(section => <a key={section.id} href={`#${section.id}`}>{section.label}</a>)}
+  </nav>
+}
+
+function InlineDisclosure({ summary, children }: { summary: string; children: ReactNode }): ReactNode {
+  const [expanded, setExpanded] = useState(false)
+  return <>
+    <button type="button" className={styles.trialDetailToggle} aria-expanded={expanded}
+      onClick={() => setExpanded(value => !value)}>
+      <ChevronDown size={11} className={cn(styles.trialChevron, expanded && styles.trialChevronOpen)} />{summary}
+    </button>
+    {expanded && <div className={styles.trialDetailBody}>{children}</div>}
+  </>
+}
+
+function KnowledgeOutputItem({ item }: { item: TrialKnowledge }): ReactNode {
+  return <li className={styles.trialOutputItem}>
+    <div className={styles.trialCandHead}>
+      <span className={cn(styles.trialCandName, item.noCoordinate && styles.trialCandBad)}>{item.text}</span>
+      <span className={styles.trialCandMeta}>{item.id}</span>
+    </div>
+    <div className={styles.trialOutputMeta}>
+      {coordLabel(item.object, item.action, item.scene)} · {item.section} 第 {item.order} 位 · {item.sources.length} 处来源
+      {item.noCoordinate && <strong>缺少坐标</strong>}
+    </div>
+    {item.sources.length > 0 && <InlineDisclosure summary={`查看 ${item.sources.length} 处来源`}>
+      <ul className={styles.trialSources}>{item.sources.map((source, index) => <SourceLine key={index} source={source} />)}</ul>
+    </InlineDisclosure>}
+  </li>
+}
+
+function EventOutputItem({ event }: { event: TrialEvent }): ReactNode {
+  const coordinate = coordLabel(event.object, event.action, event.scene)
+  const sourceCount = event.sources.length + event.timeline.reduce((sum, step) => sum + step.sources.length, 0)
+  return <li className={styles.trialOutputItem}>
+    <div className={styles.trialCandHead}>
+      <span className={styles.trialCandName}>{event.title || '未命名 Event'}</span>
+      <span className={styles.trialCandMeta}>{event.occurredAt ?? '时间未记录'}</span>
+    </div>
+    <p className={styles.trialOutputText}>{event.summary || event.symptom || '没有摘要'}</p>
+    <div className={styles.trialOutputMeta}>
+      {coordinate} · {event.timeline.length} 个步骤 · {sourceCount} 处来源
+      {event.noCoordinate && <strong>缺少坐标</strong>}
+    </div>
+    <InlineDisclosure summary="查看事件过程与结论">
+      {event.symptom && <p className={styles.trialOutputText}><b>现象：</b>{event.symptom}</p>}
+      {event.timeline.length > 0 && <ol className={styles.trialEventTimeline}>
+        {event.timeline.map(step => <li key={step.id}>
+          <span>{EVENT_STEP_LABEL[step.type] ?? step.type}</span>
+          <div>{step.description}{step.result ? ` · ${step.result}` : ''}</div>
+          {step.sources.length > 0 && <ul className={styles.trialSources}>{step.sources.map((source, index) => <SourceLine key={index} source={source} />)}</ul>}
+        </li>)}
+      </ol>}
+      {event.rootCause && <p className={styles.trialOutputText}><b>原因：</b>{event.rootCause}{event.rootCauseStatus === 'suspected' ? '（待确认）' : ''}</p>}
+      {event.outcome && <p className={styles.trialOutputText}><b>结果：</b>{event.outcome}</p>}
+      {event.missing.length > 0 && <p className={styles.trialOutputMeta}>待补信息：{event.missing.join('、')}</p>}
+      {event.sources.length > 0 && <ul className={styles.trialSources}>{event.sources.map((source, index) => <SourceLine key={index} source={source} />)}</ul>}
+    </InlineDisclosure>
+  </li>
+}
+
+function WikiCardOutputItem({ card, report }: { card: TrialReportView['wikiCards'][number]; report: TrialReportView }): ReactNode {
+  const eventNames = card.events.map(id => report.events?.find(event => event.id === id)?.title ?? id)
+  return <li className={styles.trialOutputItem}>
+    <div className={styles.trialCandHead}>
+      <span className={styles.trialCandName}>{card.name}</span>
+      <span className={styles.trialCandMeta}>{card.placements.length} Knowledge · {card.events.length} Event</span>
+    </div>
+    <div className={styles.trialOutputMeta}>{coordLabel(card.object, card.action, card.scene)}</div>
+    {(card.placements.length > 0 || eventNames.length > 0) && <InlineDisclosure summary="查看卡片内容">
+      {card.placements.length > 0 && <ul className={styles.trialSources}>
+        {card.placements.map(placement => <li key={placement.item} className={styles.trialSource}>
+          <span className={styles.trialSourceQuote}>{placement.section} 第 {placement.order} 位</span>
+          <span className={styles.trialSourceWhere}>{report.knowledge.find(item => item.id === placement.item)?.text ?? placement.item}</span>
+        </li>)}
+      </ul>}
+      {eventNames.length > 0 && <ul className={styles.trialCardEvents}>{eventNames.map((name, index) => <li key={`${card.events[index]}-${index}`}>{name}</li>)}</ul>}
+    </InlineDisclosure>}
+  </li>
+}
+
+/** 一条模型请求的输入、输出和用量放在同一个默认折叠区块里。 */
+function ModelRequestDisclosure({
+  title,
+  status,
+  request,
+  prompt,
+  response,
+  responseLabel,
+  usage,
+  why,
+  onCopy,
+  copied,
+}: {
+  title: string
+  status: string
+  request?: NonNullable<TrialReportView['model']['request']>
+  prompt: { system: string; user: string }
+  response?: string
+  responseLabel: string
+  usage?: TrialTokenUsage
+  why?: string
+  onCopy?: () => void
+  copied?: string
+}): ReactNode {
+  const [expanded, setExpanded] = useState(false)
+  const usageText = usageSummary(usage)
+  const usageDetails = usage ? [
+    usage.inputTokens !== undefined ? `普通输入 ${tokenCount(usage.inputTokens)}` : undefined,
+    usage.cacheReadTokens !== undefined ? `缓存读 ${tokenCount(usage.cacheReadTokens)}` : undefined,
+    usage.cacheWriteTokens !== undefined ? `缓存写 ${tokenCount(usage.cacheWriteTokens)}` : undefined,
+    usage.reasoningTokens !== undefined ? `推理 ${tokenCount(usage.reasoningTokens)}` : undefined,
+  ].filter(Boolean).join(' · ') : ''
+
+  return <>
+    <button type="button" className={cn(styles.trialToggle, styles.trialRequestToggle)} aria-expanded={expanded}
+      onClick={() => setExpanded(value => !value)}>
+      <span className={styles.trialRequestTitle}>
+        <ChevronDown size={12} className={cn(styles.trialChevron, expanded && styles.trialChevronOpen)} />
+        <strong>{title}</strong><span>{status}</span>
+      </span>
+      <span className={styles.trialRequestUsage}>{usageText}</span>
+    </button>
+    {expanded && <div className={styles.trialPrompt}>
+      {request && <div className={styles.trialPromptHead}>
+        <span>
+          {[request.provider, request.model].filter(Boolean).join(' / ') || '未记录模型路由'}
+          {request.reasoningEffort ? ` · ${request.reasoningEffort}` : ''}
+          {request.sessionId ? ` · ${request.sessionId}` : ''}
+        </span>
+      </div>}
+      {why && <div className={styles.trialCandWhy}>{why}</div>}
+      {usage && <div className={styles.trialPromptHead}>
+        <span>{usageText}{usageDetails ? `（${usageDetails}）` : ''}</span>
+      </div>}
+      <div className={styles.trialPromptHead}>
+        <span>System 输入 · {prompt.system.length} 字</span>
+        {onCopy && <button type="button" className={styles.trialCopy} onClick={onCopy}>
+          <Copy size={11} />{copied || '复制输入'}
+        </button>}
+      </div>
+      <pre className={styles.trialPromptText} tabIndex={0} role="region" aria-label={`${title} system 输入`}>
+        {prompt.system}
+      </pre>
+      <div className={styles.trialPromptHead}>
+        <span>User 输入 · {prompt.user.length} 字</span>
+      </div>
+      <pre className={styles.trialPromptText} tabIndex={0} role="region" aria-label={`${title} user 输入`}>
+        {prompt.user}
+      </pre>
+      <div className={styles.trialPromptHead}>
+        <span>{responseLabel}{response === undefined ? '' : ` · ${response.length} 字`}</span>
+      </div>
+      <pre className={styles.trialPromptText} tabIndex={0} role="region" aria-label={`${title} 输出`}>
+        {response ?? '这次没有保存模型返回内容。'}
+      </pre>
+    </div>}
+  </>
+}
+
 /** 一处出处：引文 + 定位 + 核验结果。 */
 function SourceLine({ source }: { source: TrialSource }): ReactNode {
   return <li className={cn(styles.trialSource, !source.found && styles.trialSourceBad)}>
@@ -206,12 +412,17 @@ function Matrix({ report }: { report: TrialReportView }): ReactNode {
  * 例外**。反过来读的话，人得先读完七个步骤才看得到「这次到底抽出了什么」。
  */
 export function TrialReport({ report }: { report: TrialReportView }): ReactNode {
-  const [open, setOpen] = useState('')
-  const [showKnowledge, setShowKnowledge] = useState(false)
-  const [showCards, setShowCards] = useState(false)
-  const [showPrompt, setShowPrompt] = useState(false)
-  const [showAudit, setShowAudit] = useState(false)
+  const [openStep, setOpenStep] = useState('')
   const [copied, setCopied] = useState('')
+  const events = report.events ?? []
+  const recordedUsage = [report.model.usage, report.model.axisResolution?.usage]
+    .filter((usage): usage is TrialTokenUsage => usage !== undefined)
+  const totals = recordedUsage.map(totalTokensOf).filter((value): value is number => value !== undefined)
+  const recordedTokens = totals.length > 0 ? totals.reduce((sum, value) => sum + value, 0) : undefined
+  const usageLabel = recordedTokens === undefined ? '未返回' : `${recordedTokens.toLocaleString('zh-CN')} tokens`
+  const usageNote = recordedUsage.length === 0
+    ? '模型未返回用量'
+    : `${recordedUsage.length} 次调用有用量`
 
   const actorChip = (actor: TrialActor): ReactNode => {
     const Icon = ACTOR[actor].icon
@@ -220,12 +431,6 @@ export function TrialReport({ report }: { report: TrialReportView }): ReactNode
     </span>
   }
 
-  /**
-   * 复制提示词。
-   *
-   * 人要拿它去改文档、贴到别处试。剪贴板会被权限或非安全上下文挡住，所以失败也要出声 ——
-   * 按钮点了没反应，比报错更难查。
-   */
   const copyPrompt = async (): Promise<void> => {
     const text = `# system\n${report.prompt.system}\n\n# user\n${report.prompt.user}`
     let label = '已复制'
@@ -238,212 +443,184 @@ export function TrialReport({ report }: { report: TrialReportView }): ReactNode
     window.setTimeout(() => setCopied(''), 2000)
   }
 
-  return <>
-    {!report.model.ok && <p className={styles.trialError} role="alert">
-      <TriangleAlert size={12} />
-      {report.model.why ?? '模型没有参与'} —— 知识、坐标和卡片都为空，但四条核验与发出去的提示词仍然是真的。
-    </p>}
+  const defaultTab = report.knowledge.length > 0 ? 'knowledge' : events.length > 0 ? 'events' : 'cards'
+  /**
+   * 「这一次什么都没抽出来」。
+   *
+   * 一次模型没跑通的运行会有五行 0、一个三个空页签的内容区、一条空列表 —— 一屏全是
+   * 「没有」。而这时真正有信息的只有两样：**为什么失败**，以及**发出去的提示词**。
+   * 所以这种记录把概览压成一行、整段跳过内容区，直接把位置让给模型请求与核验。
+   */
+  const empty = !report.model.ok && report.knowledge.length === 0 && events.length === 0 && report.wikiCards.length === 0
+  /** 流水线的抽取阶段落下的记录：报告里的 ②③④ 段只是试跑顺带算的预览。 */
+  const extractOnly = report.scope === 'extract-only'
 
-    {/* 矩阵排在最前面。它是概览，不是明细 —— 第一眼看的就是它。
-        两条轴都空说明模型没给出东西，这时候画一张空表只是噪音，上面的告警已经说清了。*/}
-    {(report.matrix.objects.length > 0 || report.matrix.actions.length > 0) && <Matrix report={report} />}
-
-    {/* 四条本地核验。报出来，不阻塞 —— 它们回答"这次抽出来的东西值不值得信"。*/}
-    <section className={styles.trialChecks}>
-      <h4><ShieldCheck size={12} />四条本地核验</h4>
-      <ul>
-        {report.checks.map(check => <li key={check.name} className={cn(styles.trialCheck, check.hits > 0 && styles.trialCheckHit)}>
-          <span className={styles.trialCheckName}>{check.name}</span>
-          <span className={styles.trialCheckHits}>{check.hits > 0 ? `${check.hits} 条` : '通过'}</span>
-          <span className={styles.trialCheckWhat}>{check.what}</span>
-          <span className={styles.trialCheckNote}>{check.note}</span>
-        </li>)}
-      </ul>
+  return <div className={styles.trialReport}>
+    {/* 只列真的会渲染出来的区块：空运行的「抽取内容」整段被跳过，留着就是一个点了没反应的锚点。 */}
+    <SectionNav items={empty ? SECTIONS.filter(section => section.id !== 'trial-output') : SECTIONS} />
+    <section id="trial-overview" className={styles.trialOverview} aria-labelledby="trial-overview-title">
+      <div className={styles.trialSectionHead}>
+        <h2 id="trial-overview-title">结果概览</h2>
+        <span>{report.model.ok ? '已完成' : '需检查'}</span>
+      </div>
+      {/* 空运行不排五行 0：那五行没有一个数字是结论，而失败原因在上面那一条里。 */}
+      {empty
+        // 一行平话，不是虚线空态框：框会在红色报错上方再压一层「这里什么都没有」，
+        // 而真正该被读到的是下面那句失败原因。
+        ? <p className={styles.trialOverviewEmpty}>这一次没有形成任何 Knowledge、Event 或 WikiCard。</p>
+        : <dl className={styles.trialOverviewStats}>
+          <div><dt>Knowledge</dt><dd>{report.knowledge.length}</dd></div>
+          <div><dt>Event</dt><dd>{events.length}</dd></div>
+          <div><dt>坐标</dt><dd>{report.objects.length} / {report.actions.length} / {report.scenes.length}<small>对象 / 动作 / 场景</small></dd></div>
+          {!extractOnly && <div><dt>WikiCard</dt><dd>{report.wikiCards.length}</dd></div>}
+          <div><dt>已报告 Token</dt><dd>{usageLabel}<small>{usageNote}</small></dd></div>
+        </dl>}
+      <p className={styles.trialOverviewTitle}>
+        <strong>{report.title}</strong><span>{report.lines} 行 · {report.chars.toLocaleString('zh-CN')} 字</span>
+      </p>
+      {report.subject && report.subject !== report.title && <p className={styles.trialOverviewSubject}>主题：{report.subject}</p>}
     </section>
 
-    {/* 知识层。**只有 text 是知识**，下面那行全是索引与出处 —— 这个区分是整个方案的重心。*/}
-    {report.knowledge.length > 0 && <>
-      <button type="button" className={styles.trialToggle} aria-expanded={showKnowledge}
-        onClick={() => setShowKnowledge(value => !value)}>
-        <ChevronDown size={12} className={cn(styles.trialChevron, showKnowledge && styles.trialChevronOpen)} />
-        <Quote size={11} />知识清单（{report.knowledge.length}）
-      </button>
-      {showKnowledge && <ul className={styles.trialCandidates}>
-        {report.knowledge.slice(0, LIST_CAP).map(item => <li key={item.id}>
-          <div className={styles.trialCandHead}>
-            <span className={cn(styles.trialCandName, item.noCoordinate && styles.trialCandBad)}>{item.text}</span>
-            <span className={styles.trialCandMeta}>{item.id}</span>
-          </div>
-          <div className={styles.trialCandWhy}>
-            坐标：{coordLabel(item.object, item.action, item.scene)}
-            {' · '}位置：{item.section} 第 {item.order} 位
-          </div>
-          {item.sources.length > 0
-            ? <ul className={styles.trialSources}>{item.sources.map((source, index) => <SourceLine key={index} source={source} />)}</ul>
-            : <div className={styles.trialCandWhy}>没有出处 —— 没有原文依据的判断不可信</div>}
-        </li>)}
-        {report.knowledge.length > LIST_CAP && <p className={styles.trialMore}>
-          另有 {report.knowledge.length - LIST_CAP} 条知识。
-        </p>}
-      </ul>}
-    </>}
-
-    <div className={styles.kbSubHead}><h4>四个阶段，七个动作</h4><span className={styles.trialLegend}>
-      {(['系统', '模型', '人'] as TrialActor[]).map(actor => <span key={actor}>{actorChip(actor)}</span>)}
-    </span></div>
-
-    <ol className={styles.trialSteps}>
-      {report.steps.map((step, index) => {
-        const expanded = open === step.id
-        // 前端刷新可能先于服务端重启。旧服务端不带 `items`，这里兜一下，
-        // 免得整块面板白屏 —— 那种失败最难查。
-        const items = step.items ?? []
-        const phaseStart = index === 0 || report.steps[index - 1]!.phase !== step.phase
-        return <li key={step.id} className={styles.trialStepWrap}>
-          {/* 阶段头只在阶段变化时出现。七个动作是四段里的，不是并列的七件事。*/}
-          {phaseStart && <p className={styles.trialPhaseHead}>{step.phase}</p>}
-          <div className={cn(styles.trialStep, step.needsHuman && styles.trialStepWarn)}>
-            <button
-              type="button"
-              className={styles.trialStepHead}
-              onClick={() => setOpen(expanded ? '' : step.id)}
-              aria-expanded={expanded}
-            >
-              <span className={styles.trialStepOrder}>{step.order}</span>
-              <span className={styles.trialStepName}>{step.name}</span>
-              {actorChip(step.actor)}
-              <ChevronDown size={12} className={cn(styles.trialChevron, expanded && styles.trialChevronOpen)} />
-              <span className={styles.trialStepSum}>{step.summary}</span>
-            </button>
-            {expanded && <div className={styles.trialStepBody}>
-              {/* 产出在前，判据在后：review 时先看"判出了什么"，再看"按什么判"。*/}
-              <section className={styles.trialProduce}>
-                <h5 className={styles.trialProduceHead}>
-                  产出{items.length > 0 ? ` · ${items.length} 条` : ''}
-                </h5>
-                {items.length === 0
-                  ? <p className={styles.trialItemsNone}>
-                    {report.model.ok ? '这一步没有产出。' : '模型没参与，这一步没有判定。'}
-                  </p>
-                  : <>
-                    <ul className={styles.trialItems}>
-                      {items.slice(0, ITEM_CAP).map((entry, itemIndex) => <li
-                        key={`${step.id}-${itemIndex}`}
-                        className={cn(styles.trialItem, entry.flag === 'warn' && styles.trialItemWarn)}
-                      >
-                        <span className={styles.trialItemRef}>{entry.ref}</span>
-                        <span className={styles.trialItemArrow} aria-hidden="true">→</span>
-                        <span className={styles.trialItemValue}>{entry.value}</span>
-                        {entry.note && <span className={styles.trialItemNote}>（{entry.note}）</span>}
-                      </li>)}
-                    </ul>
-                    {items.length > ITEM_CAP && <p className={styles.trialItemsMore}>
-                      另有 {items.length - ITEM_CAP} 条，是这一步的同类判定。
-                    </p>}
-                  </>}
-              </section>
-              {step.rows.length > 0 && <dl className={styles.trialRows}>
-                {step.rows.map(row => <div className={styles.trialRow} key={`${step.id}-${row.label}`}>
-                  <dt>{row.label}</dt><dd>{row.value}</dd>
-                </div>)}
-              </dl>}
-            </div>}
-          </div>
-        </li>
-      })}
-    </ol>
-
-    {report.exceptions.length > 0 && <div className={styles.trialExceptions}>
-      <h4><TriangleAlert size={12} />{report.exceptions.length} 处要人看</h4>
-      <ul>
-        {report.exceptions.slice(0, 6).map((item, index) => <li key={`${item.step}-${index}`}>
-          <span className={styles.trialExcStep}>{item.step}</span>
-          <span>{item.message}</span>
-        </li>)}
-      </ul>
-      {report.exceptions.length > 6 && <p className={styles.trialMore}>
-        另有 {report.exceptions.length - 6} 处同类，规则调好之后会一起消失。
-      </p>}
-    </div>}
-
-    <button type="button" className={styles.trialToggle} onClick={() => setShowCards(value => !value)} aria-expanded={showCards}>
-      <ChevronDown size={12} className={cn(styles.trialChevron, showCards && styles.trialChevronOpen)} />
-      <Layers3 size={11} />WikiCard 明细（{report.wikiCards.length}）—— 每张卡引用了哪些知识
-    </button>
+    {!report.model.ok && <p className={styles.trialError} role="alert">
+      <TriangleAlert size={12} />{report.model.why ?? '模型没有参与'} · 本次没有形成有效 Knowledge 或 Event。
+    </p>}
 
-    {showCards && (report.wikiCards.length > 0
-      ? <ul className={styles.trialCandidates}>
-        {report.wikiCards.map((card, index) => <li key={`${card.name}-${index}`}>
-          <div className={styles.trialCandHead}>
-            <span className={styles.trialCandName}>{card.name}</span>
-            <span className={styles.trialCandMeta}>
-              {coordLabel(card.object, card.action, card.scene)} · {card.placements.length} 条知识
-            </span>
-          </div>
-          <div className={styles.trialCandWhy}>
-            标题由坐标生成，先说清对象、场景和动作；坐标是主键，模型不参与命名。
-          </div>
-          <ul className={styles.trialSources}>
-            {card.placements.map(placement => <li key={placement.item} className={styles.trialSource}>
-              <span className={styles.trialSourceQuote}>
-                {placement.section} 第 {placement.order} 位
-              </span>
-              <span className={styles.trialSourceWhere}>
-                {placement.item} · {report.knowledge.find(item => item.id === placement.item)?.text ?? '（引用了不存在的知识）'}
-              </span>
-            </li>)}
-          </ul>
-          <div className={styles.trialCandWhy}>
-            人写的内容进 Wiki Card Note，不进这张卡的正文 —— 卡片只由编译器生成。
-          </div>
-        </li>)}
-      </ul>
-      : <p className={styles.trialEmpty}>
-        没有成卡。一个坐标 + 至少一条知识才天然要建一张卡 —— 知识可能一条坐标都没挂上。
-      </p>)}
-
-    {/* 提示词摊在这里。显示的必须是**真发出去的那条** —— 文档写一套、代码跑另一套
-        而没人发现，是最贵的错。模型没参与时也照给：那正是"本来会发出去什么"。*/}
-    <button type="button" className={styles.trialToggle} aria-expanded={showPrompt}
-      onClick={() => setShowPrompt(value => !value)}>
-      <ChevronDown size={12} className={cn(styles.trialChevron, showPrompt && styles.trialChevronOpen)} />
-      给模型的提示词（一次调用，system + user 全文）
-    </button>
+    {!empty && <section id="trial-output" className={styles.trialSection} aria-labelledby="trial-output-title">
+      <div className={styles.trialSectionHead}>
+        <h2 id="trial-output-title">抽取内容</h2>
+        <span>按类型查看抽取结果</span>
+      </div>
+      <Tabs defaultValue={defaultTab} className={styles.trialOutputTabs}>
+        <TabsList variant="segmented" aria-label="抽取结果类型">
+          <TabsTrigger value="knowledge">Knowledge · {report.knowledge.length}</TabsTrigger>
+          <TabsTrigger value="events">Event · {events.length}</TabsTrigger>
+          <TabsTrigger value="cards">WikiCard · {report.wikiCards.length}</TabsTrigger>
+        </TabsList>
+        <TabsContent value="knowledge">
+          {(report.matrix.objects.length > 0 || report.matrix.actions.length > 0) && <Matrix report={report} />}
+          {report.knowledge.length > 0
+            ? <ul className={styles.trialOutputList}>{report.knowledge.slice(0, LIST_CAP).map(item => <KnowledgeOutputItem key={item.id} item={item} />)}</ul>
+            : <p className={styles.trialEmpty}>这次没有抽取到 Knowledge。</p>}
+          {report.knowledge.length > LIST_CAP && <p className={styles.trialMore}>另有 {report.knowledge.length - LIST_CAP} 条 Knowledge 未展开。</p>}
+        </TabsContent>
+        <TabsContent value="events">
+          {events.length > 0
+            ? <ul className={styles.trialOutputList}>{events.slice(0, LIST_CAP).map(event => <EventOutputItem key={event.id} event={event} />)}</ul>
+            : <p className={styles.trialEmpty}>这次没有抽取到 Event。</p>}
+          {events.length > LIST_CAP && <p className={styles.trialMore}>另有 {events.length - LIST_CAP} 个 Event 未展开。</p>}
+        </TabsContent>
+        <TabsContent value="cards">
+          {report.wikiCards.length > 0
+            ? <ul className={styles.trialOutputList}>{report.wikiCards.map((card, index) => <WikiCardOutputItem key={`${card.name}-${index}`} card={card} report={report} />)}</ul>
+            : <p className={styles.trialEmpty}>没有可物化的 WikiCard。</p>}
+        </TabsContent>
+      </Tabs>
+    </section>}
 
-    {showPrompt && <div className={styles.trialPrompt}>
-      <div className={styles.trialPromptHead}>
-        <span>system · {report.prompt.system.length} 字 · 框里可滚动</span>
-        <button type="button" className={styles.trialCopy} onClick={() => void copyPrompt()}>
-          <Copy size={11} />{copied || '复制两段'}
-        </button>
+    <section id="trial-steps" className={styles.trialSection} aria-labelledby="trial-steps-title">
+      <div className={styles.trialSectionHead}>
+        <h2 id="trial-steps-title">处理步骤</h2>
+        <span>{extractOnly ? '1 个阶段 · 抽取' : `4 个阶段 · ${report.steps.length} 步`}</span>
       </div>
-      <pre className={styles.trialPromptText} tabIndex={0} role="region" aria-label="system 提示词">
-        {report.prompt.system}
-      </pre>
-      <div className={styles.trialPromptHead}>
-        <span>user · {report.prompt.user.length} 字 · 框里可滚动</span>
+      {/* 只在流水线的抽取记录上说明：旧的全链路编译里这四段是真跑过的，说了反而错。 */}
+      {extractOnly && <p className={styles.trialNote}>
+        这里只列<b>抽取</b>这一步。② 归一、③ 物化、④ 建索引在这个库里是独立阶段，
+        各有自己的轨迹与任务；下面是抽取时按机械规则顺带算的预览，不代表库里的现状。
+      </p>}
+      <ol className={styles.trialSteps}>
+        {(extractOnly ? report.steps.filter(step => step.id === 'extract') : report.steps).map((step, index, list) => {
+          const expanded = openStep === step.id
+          const items = step.items ?? []
+          const phaseStart = index === 0 || list[index - 1]!.phase !== step.phase
+          return <li key={step.id} className={styles.trialStepWrap}>
+            {phaseStart && <p className={styles.trialPhaseHead}>{step.phase}</p>}
+            <div className={cn(styles.trialStep, step.needsHuman && styles.trialStepWarn)}>
+              <button type="button" className={styles.trialStepHead}
+                onClick={() => setOpenStep(expanded ? '' : step.id)} aria-expanded={expanded}>
+                <span className={styles.trialStepOrder}>{step.order}</span>
+                <span className={styles.trialStepName}>{step.name}</span>
+                {actorChip(step.actor)}
+                <ChevronDown size={12} className={cn(styles.trialChevron, expanded && styles.trialChevronOpen)} />
+                <span className={styles.trialStepSum}>{step.summary}</span>
+              </button>
+              {expanded && <div className={styles.trialStepBody}>
+                <section className={styles.trialProduce}>
+                  <h3 className={styles.trialProduceHead}>产出{items.length > 0 ? ` · ${items.length} 条` : ''}</h3>
+                  {items.length === 0
+                    ? <p className={styles.trialItemsNone}>{report.model.ok ? '这一步没有产出。' : '模型没有形成有效结果。'}</p>
+                    : <ul className={styles.trialItems}>{items.slice(0, ITEM_CAP).map((entry, itemIndex) => <li
+                      key={`${step.id}-${itemIndex}`} className={cn(styles.trialItem, entry.flag === 'warn' && styles.trialItemWarn)}>
+                      <span className={styles.trialItemRef}>{entry.ref}</span>
+                      <span className={styles.trialItemArrow} aria-hidden="true">→</span>
+                      <span className={styles.trialItemValue}>{entry.value}</span>
+                      {entry.note && <span className={styles.trialItemNote}>{entry.note}</span>}
+                    </li>)}</ul>}
+                  {items.length > ITEM_CAP && <p className={styles.trialItemsMore}>另有 {items.length - ITEM_CAP} 条同类产出。</p>}
+                </section>
+                {step.rows.length > 0 && <dl className={styles.trialRows}>
+                  {step.rows.map(row => <div className={styles.trialRow} key={`${step.id}-${row.label}`}>
+                    <dt>{row.label}</dt><dd>{row.value}</dd>
+                  </div>)}
+                </dl>}
+              </div>}
+            </div>
+          </li>
+        })}
+      </ol>
+    </section>
+
+    <section id="trial-requests" className={styles.trialSection} aria-labelledby="trial-requests-title">
+      <div className={styles.trialSectionHead}>
+        <h2 id="trial-requests-title">模型请求</h2>
+        <span>逐次查看输入、输出和 Token 用量</span>
       </div>
-      <pre className={styles.trialPromptText} tabIndex={0} role="region" aria-label="user 提示词">
-        {report.prompt.user}
-      </pre>
-    </div>}
+      <ModelRequestDisclosure
+        title="Knowledge & Event 抽取"
+        status={report.model.response === undefined ? '未收到完整响应' : report.model.ok ? '有有效结果' : '无有效结果'}
+        request={report.model.request}
+        prompt={report.prompt}
+        response={report.model.response ?? report.model.raw}
+        responseLabel={report.model.response !== undefined ? '输出' : report.model.raw ? '失败摘录' : '输出'}
+        usage={report.model.usage}
+        why={report.model.why}
+        onCopy={() => void copyPrompt()}
+        copied={copied}
+      />
+      {report.model.axisResolution && <ModelRequestDisclosure
+        title="坐标候选补判"
+        status={report.model.axisResolution.ok ? '完成' : '未完成'}
+        request={report.model.axisResolution.request}
+        prompt={report.model.axisResolution.prompt}
+        response={report.model.axisResolution.response}
+        responseLabel="输出"
+        usage={report.model.axisResolution.usage}
+        why={report.model.axisResolution.why}
+      />}
+    </section>
 
-    {/* 抽取轨迹。它是**审计**，不是知识模型的一部分（0063 §5.5）—— 所以它排在最后，
-        而且标题里就写明它不进模型。*/}
-    {report.audit.dropped.length > 0 && <>
-      <button type="button" className={styles.trialToggle} aria-expanded={showAudit}
-        onClick={() => setShowAudit(value => !value)}>
-        <ChevronDown size={12} className={cn(styles.trialChevron, showAudit && styles.trialChevronOpen)} />
-        <FileText size={11} />被丢弃的片段（{report.audit.dropped.length} 段）—— 审计，不进知识模型
-      </button>
-      {showAudit && <ul className={styles.trialCandidates}>
-        {report.audit.dropped.map((item, index) => <li key={index}>
-          <div className={styles.trialCandHead}>
-            <span className={styles.trialCandName}>{item.quote}</span>
-          </div>
-          <div className={styles.trialCandWhy}>{item.why}</div>
+    <section id="trial-review" className={styles.trialSection} aria-labelledby="trial-review-title">
+      <div className={styles.trialSectionHead}>
+        <h2 id="trial-review-title">核验结果</h2>
+        <span>{report.exceptions.length > 0 ? `${report.exceptions.length} 项需检查` : '本地核验已完成'}</span>
+      </div>
+      <ul className={styles.trialCheckList}>
+        {report.checks.map(check => <li key={check.name}>
+          <div><strong>{check.name}</strong><span>{check.what}</span></div>
+          <b data-hit={check.hits > 0}>{check.hits > 0 ? `${check.hits} 项` : '通过'}</b>
+          {check.hits > 0 && <small>{check.note}</small>}
         </li>)}
-      </ul>}
-    </>}
-  </>
+      </ul>
+      {report.exceptions.length > 0 && <div className={styles.trialReviewIssues}>
+        <h3><TriangleAlert size={12} />需人工检查</h3>
+        <ul>{report.exceptions.map((item, index) => <li key={`${item.step}-${index}`}>
+          <span>{item.step}</span><p>{item.message}</p>
+        </li>)}</ul>
+      </div>}
+      {report.audit.dropped.length > 0 && <InlineDisclosure summary={`被丢弃的片段 · ${report.audit.dropped.length}`}>
+        <ul className={styles.trialCandidates}>{report.audit.dropped.map((item, index) => <li key={index}>
+          <strong>{item.quote}</strong><span>{item.why}</span>
+        </li>)}</ul>
+      </InlineDisclosure>}
+    </section>
+  </div>
 }