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

package/src/client/ExtractionTasksPage.tsx

@@ -1,103 +1,95 @@
 /**
- * 知识处理与运行记录 —— 一整页。
+ * 知识处理 —— 一整页。它回答四个问题，按阅读顺序排：
  *
- * ## 这一页回答三个问题，按顺序，只有三层
+ * 1. **现在什么状态**：顶部一句实时结论（在跑哪一段、几分之几；或者「没有在跑」）。
+ * 2. **五段各走到哪**：一条阶段轨。每格只放三样 —— 段名、最近一次的结论、还有多少待办。
+ * 3. **这一段有哪些文档、抽出了什么**：主栏是文档列表（或分组 / 索引），每行是
+ *    「它是什么 + 抽到了多少 + 跑过几次」。
+ * 4. **这一份的轨迹**：侧栏。轨迹是过程记录，不是主结论；放在旁边，点主栏一行就换成那一份的。
  *
- * 1. **现在什么状态**：顶部一行实时结论（在跑哪一段、跑了几分之几；或者「没有在跑」）。
- * 2. **四段各差多少**：一条步骤轨。每格只放三样东西 —— 段名、最近一次的结论、还有多少待办。
- * 3. **这一段的细节**：输入范围、结果摘要、抽取报告、原始输出；右边一栏是「处理范围」与「运行记录」。
+ * ## 2026-10-28 为什么重排
  *
- * ## 2026-10-18 为什么重排
+ * 上一版把「输入范围 / 结果摘要 / 抽取报告 / 原始日志」全塞进主栏，而**真正要处理的对象**
+ * （文档）缩在右栏一个 260px 的小列表里。于是这一页看起来像「任务详情」，不像「处理台」：
+ * 人找不到「哪些文档还没抽」，也看不出「这份文档抽出了多少内容」。
  *
- * 原来的版式把所有东西压在同一条竖线里，同一件事被说了三遍：段页签上是「部分失败」，
- * 段头再说一次，结果摘要的第一行又是「状态：部分失败」，下面再写一遍「完成 0/1 · 失败 1」。
- * 而真正要紧的「还剩多少待办」缩成一行 10.5px 的灰字挤在页签上方，模型原始日志却占着一屏。
+ * 这一版把主次换回来：
  *
- * 所以这一版守四条：
+ * - **主栏是对象**：文档 / 分组 / 索引，按当前阶段给。每行第二、三行就是抽取产出与轨迹次数。
+ * - **侧栏是过程**：轨迹、运行记录两个页签。轨迹按选中那一份文档过滤，不选就是这一段的最近记录。
+ * - **编译设置**也住这一页（视图切换），模型选择改成对话框里的可选列表：它要容纳
+ *   provider、模型说明、思考强度，一行一个扁平下拉读不出来。
+ * - **解析内核**的入口在这一页：它把文件变成 Markdown，是这条流水线的上游。
  *
- * - **一个事实只出现一次。** 阶段状态只在步骤轨上；段名只在段头；待办计数只在轨上那一格。
- * - **步骤轨横贯整页**，不再缩在左栏里 —— 它是这一页的骨架（有方向的流水线），不是左栏的页签头。
- * - **原始输出默认收起。** 它是排查用的底料，不是结论；任务在跑时自动展开。
- * - **左右两栏各自回答一类问题**：左栏「这一段跑了什么」，右栏「我要跑哪些」+「以前跑过什么」。
- *
- * 分页在服务端（`limit` / `offset`）：每跑一次都会往里加，整份在手迟早会变成整份传一遍。
- * 页码状态走 `ListPager`，与知识库其余列表同一个 `PAGE_SIZE`。
+ * 分页仍在服务端（`limit` / `offset`）：每跑一次都会往任务表里加，整份在手迟早会变成
+ * 整份传一遍。页码状态走 `ListPager`，与知识库其余列表同一个 `PAGE_SIZE`。
  */
 
-import { Fragment, useCallback, useEffect, useRef, useState, type ReactNode } from 'react'
+import { Fragment, useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from 'react'
 import { Badge, Button, Tabs, TabsContent, TabsList, TabsTrigger } from '@tita-agent/ui/components'
-import { ArrowRight, Check, ChevronDown, ExternalLink, Pause, Play, RefreshCw, X } from '@tita-agent/ui/icons'
+import { AlertCircle, ArrowRight, Check, ChevronDown, ExternalLink, FileUp, History, Pause, Play, RefreshCw, X } from '@tita-agent/ui/icons'
 import { openAppPath } from '@tita-agent/ui/overlays'
-import { PIPELINE_ACTIVE_STATES, PIPELINE_STAGE_LABEL, type PipelineEvent, type PipelineStage, type PipelineState, type PipelineStatus, type PipelineTask } from '../pipeline/types.js'
+import { PIPELINE_ACTIVE_STATES, PIPELINE_STAGE_LABEL, type PipelineStage, type PipelineStatus, type PipelineTask } from '../pipeline/types.js'
 import { formatDateTime } from './format.ts'
 import { ListPager, PAGE_SIZE } from './ListPager.tsx'
 import { requestJson } from './request.ts'
 import { requestExtractionRuns, trajectoryStageOf, type ExtractionRunSummary } from './wiki-trial.ts'
-import { TRAJECTORY_STAGE_LABEL, type TrajectoryStage } from '../trajectory-types.js'
+import type { TrajectoryStage } from '../trajectory-types.js'
+import { CompileSettingsView } from './CompileSettingsView.tsx'
+import { PIPELINE_STATE_LABEL as STATES, observeTaskStage, orderActiveTasks } from '../pipeline/progress.js'
+import { PIPELINE_STAGE_ORDER } from '../pipeline/types.js'
+import { RawTaskOutput, RunActivity, RunSummary, useTaskFeed } from './PipelineRunView.tsx'
 
-const STATES: Record<PipelineState, string> = { queued: '排队中', running: '进行中', pausing: '暂停中', paused: '已暂停', cancelling: '停止中', succeeded: '已完成', partial: '部分完成', failed: '失败', cancelled: '已停止', interrupted: '已中断' }
-const SOURCE_STATES = { pending: '待抽取', extracted: '待归一', normalized: '已归一', outdated: '来源已更新' }
 const GROUP_STATES = { new: '待新建', changed: '待更新', current: '已物化', withdrawn: '待停用', blocked: '先归一来源' }
-interface History { tasks: PipelineTask[]; total: number }
+const DOC_STATES: Record<PipelineStatus['sources'][number]['state'], { label: string; tone: 'neutral' | 'success' | 'warning' }> = {
+  pending: { label: '待抽取', tone: 'neutral' },
+  extracted: { label: '待归一', tone: 'neutral' },
+  normalized: { label: '已归一', tone: 'success' },
+  outdated: { label: '来源已更新', tone: 'warning' },
+}
+interface History { tasks: PipelineTask[]; total: number; activeTasks?: PipelineTask[] }
+interface DocumentMeta { docId: string; title: string; sourceFormat: string; ext: string; bytes: number; updatedAt: string; versionCount: number }
+interface DocumentPage { documents?: DocumentMeta[]; total?: number; extractionRuns?: Record<string, number> }
+interface DocumentRow extends DocumentMeta {
+  id: string
+  version: number
+  state: PipelineStatus['sources'][number]['state']
+  runs: ExtractionRunSummary[]
+  trailCount: number
+}
 const toggle = (ids: string[], id: string): string[] => ids.includes(id) ? ids.filter(value => value !== id) : [...ids, id]
 type StageId = Exclude<PipelineStage, 'all'>
 interface StageObservation { label: string; tone: 'neutral' | 'success' | 'warning' | 'blue'; detail: string; task?: PipelineTask }
 
-const STAGE_ORDER: readonly StageId[] = ['extract', 'normalize', 'derive', 'materialize', 'build']
+/**
+ * 阶段顺序就是流水线的方向。**`derive` 在 `materialize` 之前**：Procedure 是知识，
+ * 卡片是按坐标把它们组织起来的产物；先有方法才谈得上组织。
+ */
+const STAGE_ORDER = PIPELINE_STAGE_ORDER
 
-function completedStageObservation(stage: StageId, task: PipelineTask, result: NonNullable<NonNullable<PipelineTask['results']>[StageId]>): StageObservation {
-  if (result.failed > 0) return { label: '部分失败', tone: 'warning', detail: `完成 ${Math.max(0, result.done - result.failed)}/${result.total} · 失败 ${result.failed}${result.reused ? ` · 复用 ${result.reused}` : ''}`, task }
-  if (stage === 'build' && result.skipped) return { label: '无变化', tone: 'neutral', detail: result.summary ?? '检索索引未变化，无需重建。', task }
-  if (result.total === 0) {
-    const detail = stage === 'materialize' ? '没有待物化的卡片分组。' : stage === 'normalize' ? '没有来源需要归一。' : stage === 'extract' ? '没有来源可抽取。' : result.summary ?? '没有需要更新的索引内容。'
-    return { label: stage === 'materialize' ? '无待办' : stage === 'build' ? '无变化' : '无来源', tone: 'neutral', detail, task }
-  }
-  if (stage !== 'build' && result.reused === result.total) return { label: '全部复用', tone: 'success', detail: `复用 ${result.reused}/${result.total} 项已有结果。`, task }
-  const detail = result.summary ?? (stage === 'build'
-    ? `检索索引已更新。`
-    : `处理 ${result.done}/${result.total}${result.reused ? ` · 复用 ${result.reused}` : ''}。`)
-  return { label: '已完成', tone: 'success', detail, task }
+const STAGE_DETAIL: Record<StageId, string> = {
+  extract: '从来源原文抽取 Knowledge、Event 与 Case，保留引文。',
+  normalize: '合并同指实体，把对象 / 动作 / 场景统一成坐标。',
+  derive: '只从有过程证据的 Case 提炼 Procedure；没有证据就不生成方法。',
+  materialize: '按完整坐标把知识与事件组织成 WikiCard。',
+  build: '从已物化卡片构建全文、向量与图谱索引，然后统一发布。',
 }
 
-function stageObservation(stage: StageId, tasks: PipelineTask[], status?: PipelineStatus): StageObservation {
-  const active = (task: PipelineTask): boolean => PIPELINE_ACTIVE_STATES.includes(task.state)
-  const progress = (task: PipelineTask): StageObservation => ({
-    label: STATES[task.state],
-    tone: task.state === 'paused' ? 'neutral' : 'blue',
-    detail: stage === 'build'
-      ? '正在构建并发布检索索引。'
-      : task.total > 0
-        ? `处理 ${task.done}/${task.total} · 复用 ${task.reused}${task.failed ? ` · 失败 ${task.failed}` : ''}`
-        : '正在读取本阶段的待处理项。',
-    task,
-  })
-  const running = tasks.find(task => active(task) && task.currentStage === stage)
-  if (running) return progress(running)
-  const queued = tasks.find(task => active(task) && task.stage === stage)
-  if (queued) return { label: STATES[queued.state], tone: 'blue', detail: queued.summary, task: queued }
-
-  const activeAll = tasks.find(task => active(task) && task.stage === 'all')
-  if (activeAll) {
-    const result = activeAll.results?.[stage]
-    if (result) return completedStageObservation(stage, activeAll, result)
-    if (!activeAll.currentStage) return stage === 'extract'
-      ? { label: STATES[activeAll.state], tone: 'blue', detail: '全链路排队后将从来源抽取开始。', task: activeAll }
-      : { label: '等待执行', tone: 'neutral', detail: '全链路到达此阶段后会自动运行。', task: activeAll }
-    const currentIndex = STAGE_ORDER.indexOf(activeAll.currentStage)
-    const stageIndex = STAGE_ORDER.indexOf(stage)
-    if (stageIndex > currentIndex) return { label: '等待执行', tone: 'neutral', detail: '全链路到达此阶段后会自动运行。', task: activeAll }
-  }
-
-  const completed = tasks.find(task => task.results?.[stage])
-  const result = completed?.results?.[stage]
-  if (completed && result) return completedStageObservation(stage, completed, result)
+/** 侧栏叫「轨迹」而不是「报告」：它是过程记录，不是结论。 */
+const TRAJECTORY_TITLE: Record<TrajectoryStage, string> = {
+  extract: '抽取轨迹',
+  normalize: '归一轨迹',
+  materialize: '物化轨迹',
+}
 
-  const interrupted = tasks.find(task => !active(task) && (task.currentStage === stage || task.stage === stage))
-  if (interrupted) {
-    const tone = ['failed', 'partial', 'interrupted'].includes(interrupted.state) ? 'warning' : 'neutral'
-    return { label: STATES[interrupted.state], tone, detail: interrupted.summary, task: interrupted }
-  }
+function bytesText(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`
+  if (bytes < 1024 * 1024) return `${Math.round(bytes / 1024)} KB`
+  return `${(bytes / 1024 / 1024).toFixed(1)} MB`
+}
 
+function stageObservation(stage: StageId, task?: PipelineTask, status?: PipelineStatus): StageObservation {
+  if (task) return { ...observeTaskStage(task, stage), task }
   if (!status) return { label: '读取中', tone: 'neutral', detail: '正在读取当前处理状态。' }
   if (stage === 'extract') {
     const count = status.sources.length
@@ -127,13 +119,9 @@ function stageObservation(stage: StageId, tasks: PipelineTask[], status?: Pipeli
 }
 
 /**
- * 这一步**还差多少活** —— 步骤轨上那一格的第二行。
+ * 这一步**还差多少活** —— 阶段轨上那一格的第二行。
  *
- * 它与 `stageObservation` 的两个字段刻意分开：`label` 说的是**上一次跑成什么样**
- * （已完成 / 部分失败），这一行说的是**现在还剩什么**。原来这两件事被挤在同一行
- * 10.5px 的灰字里（「0 张待新建 · 58 张待更新 · …」），既没有主语也没有和阶段对上。
- *
- * 数字全部来自 `status`，算不出来就说算不出来，不补 0。
+ * 仅在没有查看任务时使用；不与任务状态混在同一格。
  */
 function stagePending(stage: StageId, status?: PipelineStatus): string {
   if (!status) return '读取中'
@@ -147,152 +135,281 @@ function stagePending(stage: StageId, status?: PipelineStatus): string {
     const waiting = status.sources.filter(source => source.state === 'pending' || source.state === 'outdated').length
     return waiting ? `等待 ${waiting} 份抽取` : '无待归一'
   }
+  // 提炼按 Case 运行，不按文档计数；这里不编一个「可读 Case」的数。
+  if (stage === 'derive') return '按 Case 运行'
   if (stage === 'materialize') {
     const pending = status.groups.filter(group => group.state !== 'current').length
     return pending ? `${pending} 个分组待处理` : '无待物化'
   }
-  return status.indexPending ? '索引待更新' : '索引已最新'
+  return status.indexPending ? '索引有变化' : '已发布'
 }
 
-function TaskOutput({ kb, id, onTask, onOpenFailed, stageFilter, taskStage }: { kb: string; id: string; onTask: (task: PipelineTask) => void; onOpenFailed: (message: string) => void; stageFilter?: StageId; taskStage?: PipelineStage }) {
-  const [events, setEvents] = useState<PipelineEvent[]>([])
-  const [failure, setFailure] = useState('')
-  const callback = useRef(onTask)
-  callback.current = onTask
-  useEffect(() => {
-    let active = true
-    let busy = false
-    let cursor = 0
-    let terminal = false
-    setFailure('')
-    setEvents([])
-    const read = async (): Promise<void> => {
-      if (busy || terminal) return
-      busy = true
-      try {
-        let more = true
-        while (active && more) {
-          const result = await requestJson<{ task: PipelineTask; events: PipelineEvent[]; next: number; hasMore: boolean }>(`/knowledge/pipeline-task?${new URLSearchParams({ kb, id, after: String(cursor) })}`)
-          if (!active || !result.data) return
-          const page = result.data
-          cursor = page.next
-          more = page.hasMore
-          terminal = !more && !PIPELINE_ACTIVE_STATES.includes(page.task.state)
-          callback.current(page.task)
-          setEvents(current => [...current, ...page.events].slice(-600))
-          setFailure('')
-        }
-      } catch (cause) { if (active) setFailure(cause instanceof Error ? cause.message : String(cause)) }
-      finally { busy = false }
-    }
-    void read()
-    const timer = window.setInterval(() => { void read() }, 1200)
-    return () => { active = false; window.clearInterval(timer) }
-  }, [kb, id])
-  const stageEvents = events.filter(event => !stageFilter || event.stage === stageFilter || (!event.stage && taskStage === stageFilter))
-  const hasUnscopedLegacyEvents = Boolean(stageFilter && taskStage === 'all' && events.some(event => !event.stage))
-  const output = stageEvents.filter(event => event.kind !== 'report').map(event => event.kind === 'output' ? event.text : `\n${event.text}\n`).join('').slice(-200000)
-  const reports = events.filter(event => event.kind === 'report' && (!stageFilter || event.stage === stageFilter || (!event.stage && (taskStage === stageFilter || stageFilter === 'extract' && taskStage === 'all'))))
-  return <div className="extractTasksOutputBody">
-    <p>{stageFilter ? hasUnscopedLegacyEvents ? '旧版全链路日志没有阶段标记；完整输出仍可在运行记录中查看。' : '这里只显示当前阶段的进度、模型输出和警告。' : '模型正式输出持续返回；刷新后可以补读。预览保留最近内容，完整返回保存在报告中。'}</p>
-    {failure && <p className="extractTasksError" role="alert">{failure}</p>}
-    <pre className="extractTasksPre" tabIndex={0} aria-label={stageFilter ? `${PIPELINE_STAGE_LABEL[stageFilter]}运行输出` : '实时输出'}>{output || (hasUnscopedLegacyEvents ? '这条历史记录没有可按阶段筛选的日志。' : '等待本阶段返回内容…')}</pre>
-    {/*
-      * 应用内路径不能用裸 `<a href>` 开（见 `KnowledgeBaseTab` 顶栏那条注释）：桌面壳里
-      * `/knowledge/pages/...` 会被解析成 `dsh-app://` 地址，而壳的 `setWindowOpenHandler`
-      * 只放行 http/https —— 表现是「点了没有任何反应，也不报错」。走 `openAppPath()`
-      * 才是同一枚按钮在两种外壳下各自成立的那件事。
-      */}
-    <div className="extractTasksReportsInline">{reports.map(event => <Button
-      key={event.seq}
-      variant="ghost"
-      size="sm"
-      className="extractTasksLink"
-      onClick={() => { void openAppPath(`/knowledge/pages/run?${new URLSearchParams({ kb, run: event.text })}`).then(opened => { if (!opened) onOpenFailed('打不开抽取报告：当前外壳下拿不到它的地址。') }) }}
-    >查看抽取报告 <ExternalLink size={11} className="inline" /></Button>)}</div>
-  </div>
+/** Raw output is optional detail; observation stays mounted in the page. */
+function StageOutput({ children }: { children: ReactNode }): ReactNode {
+  const [open, setOpen] = useState(false)
+  return <section className="ktOutput">
+    <Button variant="ghost" size="sm" className="ktOutputToggle" aria-expanded={open} onClick={() => setOpen(current => !current)}>
+      <ChevronDown size={13} />原始模型输出<span>{open ? '收起' : '按需展开'}</span>
+    </Button>
+    {open && children}
+  </section>
 }
 
 /**
- * 这一段跑过的轨迹，只列**这一段自己的**。
+ * 主栏的文档列表。
  *
- * 2026-10-18 之前这一格叫「抽取报告」，而且读的是 `/knowledge/pipeline-tasks` 里那份
- * 跟**任务分页共用一个 offset** 的窗口 —— 翻到第 2 页时会空掉，而标题还写着「共 N 份」。
- * 现在三段各有自己的轨迹（`stage` 列），这一格改成单取一次列表、按阶段分。
- *
- * 每段最多露 8 条：这一页的主线是「现在什么状态」，历史该去整页翻（点开就是整页）。
+ * 一行三件事，从上到下：**它是谁**（标题）、**它是什么**（格式 / 体积 / 版本 / 更新时间）、
+ * **抽出了多少**（最近一次抽取的规模描述）。左侧方框是**下一次运行的范围**，行本身是
+ * **查看这一份的轨迹** —— 两件事各有各的命中区，不互相代替。
  */
-const STAGE_TRAJECTORY_CAP = 8
+function itemObservation(task: PipelineTask | undefined, stage: StageId, id: string, kind: 'source' | 'group'): StageObservation | undefined {
+  if (!task) return undefined
+  if (task.stage !== 'all' && task.stage !== stage) return { label: '本次未运行', tone: 'neutral', detail: '' }
+  const scope = kind === 'source' ? task.selection.sourceIds : task.selection.groupKeys
+  if (scope && !scope.includes(id)) return { label: '不在本次范围', tone: 'neutral', detail: '' }
+  const item = task.items?.[stage]?.[id]
+  if (item) {
+    if (item.state === 'processing' && !PIPELINE_ACTIVE_STATES.includes(task.state)) return { label: STATES[task.state], tone: 'warning', detail: '此项尚未完成。' }
+    const labels = { processing: '正在处理', succeeded: '本次完成', reused: '本次复用', failed: '本次失败' }
+    return { label: item.state === 'processing' && task.state === 'paused' ? '已暂停' : labels[item.state], tone: item.state === 'failed' ? 'warning' : item.state === 'processing' ? 'blue' : 'success', detail: item.summary ?? '' }
+  }
+  const stageState = observeTaskStage(task, stage)
+  if (task.results?.[stage]) return { label: task.items?.[stage] ? '本次未处理' : '逐项状态未记录', tone: 'neutral', detail: '' }
+  return { label: PIPELINE_ACTIVE_STATES.includes(task.state) ? '等待处理' : stageState.label === '未执行' ? '未执行' : '尚未完成', tone: 'neutral', detail: '' }
+}
+
+function DocumentList({ rows, selected, onSelect, selectedIds, onToggle, stage, task, currentSourceId }: {
+  rows: DocumentRow[]
+  selected: string
+  onSelect: (id: string) => void
+  selectedIds: string[]
+  onToggle: (id: string) => void
+  stage: StageId
+  task?: PipelineTask
+  currentSourceId?: string
+}): ReactNode {
+  if (rows.length === 0) return <p className="ktEmpty">这个库还没有来源。先在来源栏导入文档，再回来抽取。</p>
+  return <ul className="ktDocs" aria-label="文档列表">
+    {rows.map(row => {
+      const state = DOC_STATES[row.state]
+      const current = task && !task.items && task.currentStage === stage && currentSourceId === row.id && PIPELINE_ACTIVE_STATES.includes(task.state)
+        ? { label: task.state === 'running' ? '正在处理' : STATES[task.state], tone: 'blue' as const, detail: '' }
+        : itemObservation(task, stage, row.id, 'source')
+      const picked = selectedIds.includes(row.id)
+      const inspecting = selected === row.id
+      const latest = row.runs
+        .filter(run => run.stage === stage)
+        .sort((left, right) => right.createdAt.localeCompare(left.createdAt))[0]
+      return <li key={row.id} className="ktDoc" data-object-id={row.id} data-selected={inspecting || undefined}>
+        <button
+          type="button"
+          className="ktDocPick"
+          aria-pressed={picked}
+          aria-label={picked ? `把 ${row.title} 移出下次运行范围` : `把 ${row.title} 加入下次运行范围`}
+          onClick={() => onToggle(row.id)}
+        ><span className="ktDocPickBox" aria-hidden="true">{picked && <Check size={11} />}</span></button>
+        <button
+          type="button"
+          className="ktDocMain"
+          aria-current={inspecting ? 'true' : undefined}
+          onClick={() => onSelect(row.id)}
+        >
+          <span className="ktDocTitle">{row.title}</span>
+          <span className="ktDocMeta">
+            {row.ext !== '' || row.sourceFormat !== ''
+              ? (row.ext || row.sourceFormat).replace(/^\./, '').toUpperCase()
+              : '来源'}
+            {row.bytes > 0 && <><i aria-hidden="true">·</i>{bytesText(row.bytes)}</>}
+            <i aria-hidden="true">·</i>v{row.version}
+            <i aria-hidden="true">·</i>共 {row.trailCount} 条轨迹
+            <i aria-hidden="true">·</i>{latest ? '上次轨迹 ' : '来源更新 '}{formatDateTime(latest?.createdAt ?? row.updatedAt)}
+            <i aria-hidden="true">·</i>库内状态：{state.label}
+          </span>
+          <span className="ktDocFacts">
+            {latest
+              ? `历史记录：${latest.summary}`
+              : stage === 'extract' ? '还没有抽取记录。' : '还没有归一记录。'}
+          </span>
+        </button>
+        <span className="ktDocSide">
+          <Badge tone={current?.tone ?? state.tone} title={current?.detail}>{current?.label ?? state.label}</Badge>
+        </span>
+      </li>
+    })}
+  </ul>
+}
 
-function StageTrajectories({ kb, stage, runs, onOpenFailed }: { kb: string; stage: TrajectoryStage; runs: ExtractionRunSummary[]; onOpenFailed: (message: string) => void }): ReactNode {
-  const own = runs.filter(run => trajectoryStageOf(run) === stage)
-  if (own.length === 0) return null
-  const shown = own.slice(0, STAGE_TRAJECTORY_CAP)
-  return <section className="extractTasksReports" aria-labelledby={`trajectory-${stage}`}>
-    <div className="extractTasksSubhead">
+/** 物化阶段的对象是**分组**，不是文档：同坐标的知识与事件一起成卡。 */
+function GroupList({ groups, selectedKeys, onToggle, task, inspectingKey }: {
+  groups: PipelineStatus['groups']
+  selectedKeys: string[]
+  onToggle: (key: string) => void
+  task?: PipelineTask
+  inspectingKey?: string
+}): ReactNode {
+  if (groups.length === 0) return <p className="ktEmpty">还没有可物化的分组。先抽取并归一文档内容。</p>
+  return <ul className="ktDocs" aria-label="卡片分组列表">
+    {groups.map(group => {
+      const picked = selectedKeys.includes(group.key)
+      const current = task?.selection.sourceIds && !group.sourceIds.some(id => task.selection.sourceIds!.includes(id))
+        ? { label: '不在本次范围', tone: 'neutral' as const }
+        : itemObservation(task, 'materialize', group.key, 'group')
+      return <li key={group.key} className="ktDoc" data-object-id={group.key} data-selected={picked || inspectingKey === group.key || undefined}>
+        <button type="button" className="ktDocPick" aria-pressed={picked} aria-label={picked ? `取消选择 ${group.title}` : `选择 ${group.title}`} onClick={() => onToggle(group.key)}>
+          <span className="ktDocPickBox" aria-hidden="true">{picked && <Check size={11} />}</span>
+        </button>
+        <div className="ktDocMain ktDocMainStatic">
+          <span className="ktDocTitle">{group.title}</span>
+          <span className="ktDocMeta">
+            {group.knowledgeCount} 条 Knowledge<i aria-hidden="true">·</i>{group.eventCount} 个 Event<i aria-hidden="true">·</i>{group.sourceIds.length} 份来源
+            <i aria-hidden="true">·</i>库内：{GROUP_STATES[group.state]}
+          </span>
+          {group.reason !== undefined && group.reason !== '' && <span className="ktDocFacts ktDocReason">{group.reason}</span>}
+        </div>
+        <span className="ktDocSide"><Badge tone={current?.tone ?? (group.state === 'current' ? 'success' : group.state === 'blocked' ? 'warning' : 'neutral')}>{current?.label ?? GROUP_STATES[group.state]}</Badge></span>
+      </li>
+    })}
+  </ul>
+}
+
+/** 侧栏的轨迹列表。按**当前阶段 + 选中文档**过滤；不选文档时列这一段的全部最近记录。 */
+function TrajectoryPanel({ kb, stage, selectedDoc, docTitle, runs, onClearDoc, onOpenFailed }: {
+  kb: string
+  stage: StageId
+  selectedDoc: string
+  docTitle: string
+  runs: ExtractionRunSummary[]
+  onClearDoc: () => void
+  onOpenFailed: (message: string) => void
+}): ReactNode {
+  if (stage === 'derive') {
+    return <div className="ktSideEmpty">
+      <strong>提炼 Procedure 没有独立轨迹</strong>
+      <p>它读 Case 的检查与动作，产出记在 Case 的派生结果里；运行详情在「运行记录」里看。</p>
+    </div>
+  }
+  if (stage === 'build') {
+    return <div className="ktSideEmpty">
+      <strong>构建索引不留轨迹</strong>
+      <p>它的产物是可重建的检索索引，不是一次判断；跑成什么样在「运行记录」和索引状态里看。</p>
+    </div>
+  }
+  const own = runs.filter(run => trajectoryStageOf(run) === stage && (selectedDoc === '' || run.docId === selectedDoc))
+  return <>
+    <div className="ktTrailHead">
       <div>
-        <h3 id={`trajectory-${stage}`}>{TRAJECTORY_STAGE_LABEL[stage]}</h3>
-        <p>每次运行的过程记录；点开在新窗口读完整轨迹。</p>
+        <h3>{TRAJECTORY_TITLE[stage as TrajectoryStage]}</h3>
+        <p>{selectedDoc === '' ? '这一段最近的运行记录；点开在整页读全文。' : '只看选中这一份。'}</p>
       </div>
-      <span className="extractTasksCount">{own.length > shown.length ? `${shown.length} / ${own.length} 条` : `${own.length} 条`}</span>
+      <span className="ktTrailCount">{own.length} 条</span>
     </div>
-    {shown.map(run => <button
-      key={run.id}
-      type="button"
-      className="extractReportRow"
-      onClick={() => { void openAppPath(`/knowledge/pages/run?${new URLSearchParams({ kb, run: run.id })}`).then(opened => { if (!opened) onOpenFailed('打不开轨迹：当前外壳下拿不到它的地址。') }) }}
-    >
-      <span className="extractReportMain"><strong>{run.title || '（没有标题）'}</strong><span>{run.summary}</span></span>
-      <span className="extractReportMeta">{formatDateTime(run.createdAt)}<ExternalLink size={13} /></span>
-    </button>)}
-  </section>
+    {selectedDoc !== '' && <div className="ktTrailFilter">
+      <span title={docTitle}>只看：{docTitle || selectedDoc}</span>
+      <Button variant="ghost" size="sm" className="ktLink" onClick={onClearDoc}>看全部<X size={11} /></Button>
+    </div>}
+    {own.length === 0
+      ? <p className="ktSideEmptyText">{selectedDoc === '' ? '这一段还没有轨迹。运行一次就有了。' : '这份文档在这一段还没有轨迹。'}</p>
+      : <ul className="ktTrailList">{own.slice(0, 20).map(run => <li key={run.id}>
+        <button
+          type="button"
+          className="ktTrailRow"
+          onClick={() => { void openAppPath(`/knowledge/pages/run?${new URLSearchParams({ kb, run: run.id })}`).then(opened => { if (!opened) onOpenFailed('打不开轨迹：当前外壳下拿不到它的地址。') }) }}
+        >
+          <span className="ktTrailRowTitle">{run.title || '（没有标题）'}{!run.modelOk && <Badge tone="warning">模型未接通</Badge>}</span>
+          <span className="ktTrailRowSummary">{run.summary}</span>
+          <span className="ktTrailRowMeta">{formatDateTime(run.createdAt)}<ExternalLink size={12} /></span>
+        </button>
+      </li>)}</ul>}
+  </>
 }
 
-/**
- * 运行输出**默认收起**。
- *
- * 它是模型原始返回（几百行），而这一页的主线是「哪一段还剩多少活、跑完是什么结果」。
- * 此前它是常驻展开的 `<pre>`：一屏高的灰块压在报告下面，日志和结论挤在同一层，
- * 两样都读不成。收起来之后它仍在原地 —— 点一下展开，任务在跑时自动展开（那时日志是唯一在变的东西）。
- */
-function StageOutput({ active, children }: { active: boolean; children: ReactNode }): ReactNode {
-  const [open, setOpen] = useState(active)
-  useEffect(() => { if (active) setOpen(true) }, [active])
-  return <section className="extractTasksOutput">
-    <Button variant="ghost" size="sm" className="extractTasksOutputToggle" aria-expanded={open} onClick={() => setOpen(current => !current)}>
-      <ChevronDown size={13} />运行输出<span>{open ? '收起原始日志' : '展开原始日志'}</span>
-    </Button>
-    {open && children}
-  </section>
+/** 侧栏的运行记录：暂停 / 继续 / 停止与历史输出。 */
+function RunHistoryPanel({ tasks, orderedTasks, total, page, onPage, activeCount, selectedTask, onToggleTask, busy, onAct }: {
+  tasks: PipelineTask[]
+  orderedTasks: PipelineTask[]
+  total: number
+  page: number
+  onPage: (page: number) => void
+  activeCount: number
+  selectedTask: string
+  onToggleTask: (id: string) => void
+  busy: boolean
+  onAct: (id: string, action: string) => void
+}): ReactNode {
+  const pageCount = Math.max(1, Math.ceil(total / PAGE_SIZE))
+  return <div className="ktRuns">
+    <p className="ktRunsNote">{activeCount ? '暂停在安全点生效，停止会保留已保存的结果。' : '选择一条任务查看它自己的阶段与活动记录。'}</p>
+    {tasks.length === 0 && <p className="ktEmpty">还没有阶段任务。选好范围后运行一段就有了。</p>}
+    {orderedTasks.map(task => <article key={task.id} className="ktRunRow">
+      <div className="ktRunTitle">
+        <strong>{PIPELINE_STAGE_LABEL[task.stage]}</strong>
+        <Badge tone={task.state === 'succeeded' ? 'success' : ['failed', 'partial', 'interrupted'].includes(task.state) ? 'warning' : PIPELINE_ACTIVE_STATES.includes(task.state) ? 'blue' : 'neutral'}>{STATES[task.state]}</Badge>
+      </div>
+      <p className="ktRunSummary">{task.summary}</p>
+      <p className="ktRunTime">{formatDateTime(task.queuedAt)}{task.model.model ? ` · ${task.model.provider ?? ''} / ${task.model.model}` : ''}{task.model.reasoningEffort ? ` · ${task.model.reasoningEffort}` : ''}</p>
+      <div className="ktRunControls">
+        <Button size="sm" variant="ghost" className="ktRunToggle" aria-pressed={selectedTask === task.id} onClick={() => onToggleTask(task.id)}>{selectedTask === task.id ? '正在查看此任务' : '查看此任务'}</Button>
+        {PIPELINE_ACTIVE_STATES.includes(task.state) ? <>
+          <Button size="sm" variant="outline" disabled={busy || task.state === 'cancelling' || task.state === 'pausing'} onClick={() => onAct(task.id, task.state === 'paused' ? 'resume' : 'pause')}>{task.state === 'paused' ? <Play size={12} /> : <Pause size={12} />}{task.state === 'paused' ? '继续' : '暂停'}</Button>
+          <Button size="sm" variant="ghost" disabled={busy || task.state === 'cancelling'} onClick={() => onAct(task.id, 'cancel')}><X size={12} />停止</Button>
+        </> : task.state === 'succeeded'
+          // 跑完的任务没有「未完成部分」。再跑一次是主栏那个阶段动作的事，
+          // 不在这里放一枚读起来像「上次没跑完」的按钮。
+          ? null
+          : <Button size="sm" variant="outline" disabled={busy} onClick={() => onAct(task.id, 'retry')}>继续未完成部分</Button>}
+      </div>
+    </article>)}
+    <ListPager page={page} pageCount={pageCount} total={total} onChange={onPage} />
+  </div>
 }
 
 export function ExtractionTasksPage({ kb }: { kb: string }): ReactNode {
   const params = new URLSearchParams(typeof window === 'undefined' ? '' : window.location.search)
+  const [view, setView] = useState<'run' | 'settings'>(params.get('view') === 'settings' ? 'settings' : 'run')
+  const [stage, setStage] = useState<StageId>('extract')
   const [status, setStatus] = useState<PipelineStatus>()
+  const [documents, setDocuments] = useState<DocumentMeta[]>([])
+  /** 服务端给的「每份文档有几条轨迹」；比按当前这 100 条轨迹数更准。 */
+  const [runCounts, setRunCounts] = useState<Record<string, number>>({})
   const [history, setHistory] = useState<History>()
   const [sourceIds, setSourceIds] = useState<string[]>(() => params.get('source') ? [params.get('source')!] : [])
   const [groupKeys, setGroupKeys] = useState<string[]>([])
+  const [selectedDoc, setSelectedDoc] = useState('')
+  /** 侧栏的页签：点主栏一行要能自动带出「轨迹」，否则人点了文档却看不到它的轨迹。 */
+  const [sideTab, setSideTab] = useState('activity')
+  /** 刷新要连编译设置一起重读（它是另一个视图自己的数据），所以用 key 让它重挂一次。 */
+  const [settingsKey, setSettingsKey] = useState(0)
   const [selectedTask, setSelectedTask] = useState(() => params.get('task') ?? '')
-  const [failure, setFailure] = useState('')
+  const selectedTaskRef = useRef(selectedTask)
+  selectedTaskRef.current = selectedTask
+  const [pinnedTask, setPinnedTask] = useState(Boolean(params.get('task')))
+  useEffect(() => {
+    const url = new URL(window.location.href)
+    if (pinnedTask && selectedTask) url.searchParams.set('task', selectedTask)
+    else url.searchParams.delete('task')
+    window.history.replaceState(null, '', url)
+  }, [pinnedTask, selectedTask])
+  const [followRun, setFollowRun] = useState(true)
+  const [activeTasks, setActiveTasks] = useState<PipelineTask[]>([])
+  const [notice, setNotice] = useState<{ tone: 'success' | 'error'; text: string } | null>(null)
   const [busy, setBusy] = useState(false)
   /** 1-based：与 `ListPager` 同一个口径。 */
   const [page, setPage] = useState(1)
   const refreshSequence = useRef(0)
-  /**
-   * 四段步轨的阶段结论读这里，而不是当前这一页任务。
-   *
-   * 任务列表是服务端分页的（一页 `PAGE_SIZE` 条）：某个阶段的最新结论一旦翻出第一页，
-   * 直接搜当前页会让那一段悄悄退回「待运行」—— 屏幕上看起来像从来没跑过。
-   * 所以按 id 累积见过的状态，只留最近 200 条（这只是阶段结论的缓存，完整历史在服务端）。
-   */
+  /** Cache viewed executions independently of the paginated history. */
   const [stageTasks, setStageTasks] = useState<PipelineTask[]>([])
-  /** 三段轨迹的列表（不含报告本体）。与任务分页**无关** —— 它按 stage 分，各自取最近若干条。 */
+  /** 三段轨迹的列表（不含报告本体）。与任务分页**无关**。 */
   const [trajectories, setTrajectories] = useState<ExtractionRunSummary[]>([])
   const seenTasks = useRef(new Map<string, PipelineTask>())
   const rememberTasks = useCallback((rows: PipelineTask[]): void => {
-    for (const task of rows) seenTasks.current.set(task.id, task)
+    for (const task of rows) {
+      const previous = seenTasks.current.get(task.id)
+      const stamp = (value: PipelineTask): string => value.finishedAt ?? value.activity?.at ?? value.startedAt ?? value.queuedAt
+      if (!previous || stamp(task) >= stamp(previous)) seenTasks.current.set(task.id, task)
+    }
     if (seenTasks.current.size > 200) {
-      const ordered = [...seenTasks.current.values()].sort((left, right) => right.queuedAt.localeCompare(left.queuedAt)).slice(0, 200)
+      const priority = (task: PipelineTask): number => Number(task.id === selectedTaskRef.current) * 2 + Number(PIPELINE_ACTIVE_STATES.includes(task.state))
+      const ordered = [...seenTasks.current.values()].sort((left, right) => priority(right) - priority(left) || right.queuedAt.localeCompare(left.queuedAt)).slice(0, 200)
       seenTasks.current = new Map(ordered.map(task => [task.id, task]))
     }
     setStageTasks([...seenTasks.current.values()].sort((left, right) => right.queuedAt.localeCompare(left.queuedAt)))
@@ -301,278 +418,295 @@ export function ExtractionTasksPage({ kb }: { kb: string }): ReactNode {
     if (!kb) return
     const sequence = ++refreshSequence.current
     try {
-      const [nextStatus, nextHistory, nextTrajectories] = await Promise.all([
+      const [nextStatus, nextHistory, nextTrajectories, nextDocuments] = await Promise.all([
         requestJson<PipelineStatus>(`/knowledge/pipeline?kb=${encodeURIComponent(kb)}`),
         requestJson<History>(`/knowledge/pipeline-tasks?${new URLSearchParams({ kb, limit: String(PAGE_SIZE), offset: String((page - 1) * PAGE_SIZE) })}`),
         // 轨迹库不可用时返回 `available: false` 而不是报错：这一段没有轨迹，不该让整页红一下。
-        requestExtractionRuns({ kb, limit: 40 }).catch(() => null),
+        requestExtractionRuns({ kb, limit: 100 }).catch(() => null),
+        requestJson<DocumentPage>(`/knowledge/documents?${new URLSearchParams({ kb, limit: '500' })}`).catch(() => null),
       ])
       if (sequence !== refreshSequence.current) return
       if (nextStatus.data) setStatus(nextStatus.data)
-      if (nextHistory.data) { setHistory(nextHistory.data); rememberTasks(nextHistory.data.tasks) }
+      if (nextHistory.data) {
+        setHistory(nextHistory.data)
+        const active = nextHistory.data.activeTasks ?? nextHistory.data.tasks.filter(task => PIPELINE_ACTIVE_STATES.includes(task.state))
+        setActiveTasks(active)
+        rememberTasks([...active, ...nextHistory.data.tasks])
+      }
       if (nextTrajectories) setTrajectories(nextTrajectories.runs)
-      setFailure('')
-    } catch (cause) { if (sequence === refreshSequence.current) setFailure(cause instanceof Error ? cause.message : String(cause)) }
+      if (nextDocuments?.data?.documents) {
+        setDocuments(nextDocuments.data.documents)
+        setRunCounts(nextDocuments.data.extractionRuns ?? {})
+      }
+    } catch (cause) {
+      if (sequence === refreshSequence.current) setNotice({ tone: 'error', text: cause instanceof Error ? cause.message : String(cause) })
+    }
   }, [kb, page, rememberTasks])
-  const activeCount = history?.tasks.filter(task => PIPELINE_ACTIVE_STATES.includes(task.state)).length ?? 0
+  const activeCount = activeTasks.length
   useEffect(() => {
     void refresh()
     const focus = (): void => { void refresh() }
     window.addEventListener('focus', focus)
-    const timer = activeCount ? window.setInterval(focus, 2500) : undefined
-    return () => { if (timer) window.clearInterval(timer); window.removeEventListener('focus', focus) }
+    const timer = window.setInterval(focus, activeCount ? 2500 : 5000)
+    return () => { window.clearInterval(timer); window.removeEventListener('focus', focus) }
   }, [refresh, activeCount])
-  const start = async (stage: PipelineStage, force = false): Promise<void> => {
-    setBusy(true); setFailure('')
+
+  const start = async (next: PipelineStage, force = false): Promise<void> => {
+    setBusy(true)
+    setNotice(null)
     try {
-      const sourceScope = stage === 'all' || stage === 'extract' || stage === 'normalize' || stage === 'derive'
-      const groupScope = stage === 'all' || stage === 'materialize'
-      const result = await requestJson<{ task: PipelineTask }>('/knowledge/pipeline', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ kb, stage, ...(sourceScope && sourceIds.length ? { sourceIds } : {}), ...(groupScope && groupKeys.length ? { groupKeys } : {}), force }) })
-      if (result.data?.task) { setSelectedTask(result.data.task.id); setPage(1) }
+      const sourceScope = next === 'all' || next === 'extract' || next === 'normalize' || next === 'derive'
+      const groupScope = next === 'all' || next === 'materialize'
+      const result = await requestJson<{ task: PipelineTask }>('/knowledge/pipeline', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ kb, stage: next, ...(sourceScope && sourceIds.length ? { sourceIds } : {}), ...(groupScope && groupKeys.length ? { groupKeys } : {}), force }) })
+      if (result.data?.task) {
+        rememberTasks([result.data.task]); setSelectedTask(result.data.task.id); setPinnedTask(true); setFollowRun(true)
+        setSideTab('activity'); setPage(1); setStage(next === 'all' ? 'extract' : next)
+      }
       await refresh()
-    } catch (cause) { setFailure(cause instanceof Error ? cause.message : String(cause)) }
-    finally { setBusy(false) }
+    } catch (cause) {
+      setNotice({ tone: 'error', text: cause instanceof Error ? cause.message : String(cause) })
+    } finally { setBusy(false) }
   }
   const act = async (id: string, action: string): Promise<void> => {
     setBusy(true)
     try {
       const result = await requestJson<{ task: PipelineTask }>('/knowledge/pipeline-task', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ kb, id, action }) })
-      if (result.data?.task) setSelectedTask(result.data.task.id)
+      if (result.data?.task) { rememberTasks([result.data.task]); setSelectedTask(result.data.task.id); setPinnedTask(true); setFollowRun(true); setSideTab('activity') }
       await refresh()
-    } catch (cause) { setFailure(cause instanceof Error ? cause.message : String(cause)) }
-    finally { setBusy(false) }
+    } catch (cause) {
+      setNotice({ tone: 'error', text: cause instanceof Error ? cause.message : String(cause) })
+    } finally { setBusy(false) }
   }
   const replaceTask = useCallback((task: PipelineTask) => {
     setHistory(current => current ? { ...current, tasks: current.tasks.map(row => row.id === task.id ? task : row) } : current)
+    setActiveTasks(current => PIPELINE_ACTIVE_STATES.includes(task.state)
+      ? [...current.filter(row => row.id !== task.id), task]
+      : current.filter(row => row.id !== task.id))
     rememberTasks([task])
   }, [rememberTasks])
-  if (!kb) return <p className="extractTasksError" role="alert">缺少知识库，请从知识库工具栏打开知识处理。</p>
-  /**
-   * 分页器分的是**任务**，所以页数只能用任务自己的总数。
-   *
-   * 原来取的是 `max(任务数, 抽取报告数)`：抽取报告是**另一个集合**（一次任务可能产出
-   * 好几份，历史累积到几百份），把它算进分母会让分页器凭空多出十几页，而点「下一页」
-   * 落到的是一片空白 —— 那个空页看起来像「记录丢了」。抽取报告的数量已经有自己的落点
-   * （「抽取报告」那一行右侧的「N 份」），不在这里重复。
-   */
+
+  const docIndex = useMemo(() => new Map(documents.map(doc => [doc.docId, doc])), [documents])
+  const trailCounts = useMemo(() => {
+    const counts = new Map<string, number>()
+    for (const run of trajectories) counts.set(run.docId, (counts.get(run.docId) ?? 0) + 1)
+    return counts
+  }, [trajectories])
+  /** 主栏的行：文档状态来自 pipeline，格式 / 体积来自文档列表，规模描述来自最近一条轨迹。 */
+  const documentRows = useMemo<DocumentRow[]>(() => (status?.sources ?? []).map(source => {
+    const meta = docIndex.get(source.id)
+    return {
+      id: source.id,
+      docId: source.id,
+      title: source.title,
+      version: source.version,
+      state: source.state,
+      sourceFormat: meta?.sourceFormat ?? '',
+      ext: meta?.ext ?? '',
+      bytes: meta?.bytes ?? 0,
+      updatedAt: meta?.updatedAt ?? '',
+      versionCount: meta?.versionCount ?? source.version,
+      runs: trajectories.filter(run => run.docId === source.id),
+      trailCount: runCounts[source.id] ?? trailCounts.get(source.id) ?? 0,
+    }
+  }), [status, trajectories, docIndex, trailCounts, runCounts])
+
   const total = history?.total ?? 0
-  const pageCount = Math.max(1, Math.ceil(total / PAGE_SIZE))
   const orderedTasks = [...(history?.tasks ?? [])].sort((left, right) => {
     const activeOrder = Number(PIPELINE_ACTIVE_STATES.includes(right.state)) - Number(PIPELINE_ACTIVE_STATES.includes(left.state))
     return activeOrder || right.queuedAt.localeCompare(left.queuedAt)
   })
-  const stages = [
-    { id: 'extract', detail: '从 Source Raw 抽取 Fact、Procedure 与 Case。' },
-    { id: 'normalize', detail: '合并实体，并整理知识坐标。' },
-    { id: 'derive', detail: '从 Case 的检查与动作提炼可复用 Procedure，保留证据与版本。' },
-    { id: 'materialize', detail: '按完整坐标生成 WikiCard。' },
-    { id: 'build', detail: '构建并发布检索索引。' },
-  ] as const
-  const inputRows = (stage: StageId, task?: PipelineTask): Array<[string, string]> => {
-    const selection = task?.selection ?? {}
-    const sourceSelection = task ? selection.sourceIds : sourceIds.length ? sourceIds : undefined
-    const groupSelection = task ? selection.groupKeys : groupKeys.length ? groupKeys : undefined
-    const names = (ids: string[], resolve: (id: string) => string): string => {
-      const values = ids.map(resolve)
-      return `${ids.length} 项${values.length <= 3 ? `：${values.join('、')}` : `：${values.slice(0, 3).join('、')} 等`}`
-    }
-    const sourceRange = sourceSelection
-      ? names(sourceSelection, id => status?.sources.find(source => source.id === id)?.title ?? id)
-      : `全部来源（${status?.sources.length ?? '当前'} 份）`
-    const rows: Array<[string, string]> = []
-    if (stage === 'extract' || stage === 'normalize' || stage === 'derive') {
-      rows.push(['来源范围', sourceRange])
-      rows.push(['强制处理', selection.force ? '是，忽略可复用结果' : '否，复用未变化结果'])
-    } else if (stage === 'materialize') {
-      const groupRange = groupSelection
-        ? names(groupSelection, id => status?.groups.find(group => group.key === id)?.title ?? id)
-        : task?.stage === 'all' && selection.sourceIds
-          ? `全部待办分组中关联所选来源的分组（${sourceSelection?.length ?? 0} 份来源）`
-          : '全部待处理分组'
-      rows.push(['分组范围', groupRange])
-      if (task?.stage === 'all' && selection.sourceIds) rows.push(['来源限制', sourceRange])
-      rows.push(['强制处理', selection.force ? '是，重新物化所选分组' : '否，只处理有变化的分组'])
-    } else {
-      rows.push(['索引范围', '整个知识库；会按当前知识内容构建'])
-      rows.push(['选择范围', '来源与分组选择不缩小索引范围'])
-    }
-    if (stage !== 'build') {
-      const model = task?.model
-      rows.push(['模型配置', model?.model ? `${model.provider ? `${model.provider} / ` : ''}${model.model}${model.reasoningEffort ? ` · ${model.reasoningEffort}` : ''}` : '运行时读取当前模型设置'])
-    }
-    return rows
-  }
-  /**
-   * 结果摘要**不再重复「状态」**：那枚徽标在步骤轨上，是这一段的身份，不是结果的第二行。
-   * 这里只放「跑了多少、什么时候跑的」—— 一个问题一个答案。
-   */
-  const outputRows = (stage: StageId, observation: StageObservation): Array<[string, string]> => {
-    const task = observation.task
-    const result = task?.results?.[stage]
-    const activeStage = task && PIPELINE_ACTIVE_STATES.includes(task.state) && task.currentStage === stage
-    const liveResult = activeStage ? task : task?.stage === stage && !result ? task : undefined
-    const counts = result ?? liveResult
-    const summary = result?.summary ?? (activeStage ? task?.summary : observation.detail) ?? observation.detail
-    return [
-      ['摘要', summary],
-      ...(counts ? [['已处理', `${counts.done}/${counts.total} 项`] as [string, string]] : []),
-      ...(counts?.reused ? [['复用', `${counts.reused} 项`] as [string, string]] : []),
-      ...(counts?.failed ? [['失败', `${counts.failed} 项`] as [string, string]] : []),
-      ...(task ? [['最近运行', formatDateTime(task.finishedAt ?? task.startedAt ?? task.queuedAt)] as [string, string]] : []),
-    ]
-  }
-  const runningTask = orderedTasks.find(task => PIPELINE_ACTIVE_STATES.includes(task.state))
+  const runningTask = orderActiveTasks(activeTasks)[0]
+  const focusedTask = pinnedTask ? stageTasks.find(task => task.id === selectedTask) : runningTask ?? stageTasks.find(task => task.id === selectedTask) ?? orderedTasks[0]
+  const feed = useTaskFeed(kb, pinnedTask ? selectedTask || undefined : focusedTask?.id, replaceTask)
+  const currentSourceId = focusedTask?.activity?.objectId ?? feed.events.filter(event => event.sourceId).at(-1)?.sourceId
+  const currentObjectTitle = documentRows.find(row => row.id === currentSourceId)?.title
+  useEffect(() => { if (!pinnedTask && focusedTask) setSelectedTask(focusedTask.id) }, [pinnedTask, focusedTask?.id])
+  useEffect(() => {
+    if (followRun && focusedTask?.currentStage) setStage(focusedTask.currentStage)
+  }, [followRun, focusedTask?.id, focusedTask?.currentStage])
+  useEffect(() => {
+    if (!selectedDoc) return
+    const target = [...document.querySelectorAll<HTMLElement>('[data-object-id]')].find(element => element.dataset.objectId === selectedDoc)
+    target?.scrollIntoView({ block: 'nearest' })
+  }, [selectedDoc, stage])
   const headline = runningTask
-    ? `正在运行「${PIPELINE_STAGE_LABEL[runningTask.stage]}」${runningTask.total > 0 ? ` · ${runningTask.done}/${runningTask.total}` : ''}${runningTask.failed ? ` · 失败 ${runningTask.failed}` : ''}。暂停与停止在当前文档处理完后生效。`
+    ? `当前任务${STATES[runningTask.state]}；本次进度与控制在下方。`
     : history
-      ? '当前没有运行中的任务。选好处理范围后按阶段运行；未变化的结果会自动复用。'
+      ? '当前没有运行中的任务。选好范围后按阶段运行；未变化的结果会自动复用。'
       : '正在读取这个库的处理状态…'
-  return <div className="extractTasksPage">
-    <div className="extractTasksHead">
-      <p className="extractTasksHeadline" role="status">{headline}</p>
-      <div className="extractTasksHeadActions">
-        <Button variant="ghost" size="sm" onClick={() => { void refresh() }}><RefreshCw size={13} />刷新</Button>
-        <Button size="sm" title="按顺序运行全部四个阶段：抽取 → 归一 → 物化 → 构建索引" disabled={busy || !status?.sources.length} onClick={() => { void start('all') }}><Play size={13} />全链路运行</Button>
+  const stageObservationOf = (id: StageId): StageObservation => stageObservation(id, focusedTask, status)
+  const selectedDocTitle = documentRows.find(row => row.id === selectedDoc)?.title ?? ''
+  const chooseTask = (id: string): void => { setSelectedTask(id); setPinnedTask(true); setFollowRun(true); setSideTab('activity') }
+  const followCurrent = (): void => { setFollowRun(true); if (focusedTask?.currentStage) setStage(focusedTask.currentStage) }
+  if (!kb) return <p className="ktError" role="alert"><AlertCircle size={13} />缺少知识库，请从知识库工具栏打开知识处理。</p>
+
+  const openKernel = (): void => {
+    void openAppPath('/convert/').then(opened => {
+      if (!opened) setNotice({ tone: 'error', text: '打不开解析内核控制台：当前外壳下拿不到它的地址。' })
+    })
+  }
+
+  const renderStageBody = (id: StageId): ReactNode => {
+    const observation = stageObservationOf(id)
+    const result = observation.task?.results?.[id]
+    const scopeText = id === 'materialize'
+      ? groupKeys.length ? `已选 ${groupKeys.length} 个分组` : `全部待处理分组（${status?.groups.length ?? 0} 个）`
+      : sourceIds.length ? `已选 ${sourceIds.length} 份文档` : `全部来源（${status?.sources.length ?? 0} 份）`
+    const model = observation.task?.model
+    const modelText = model?.model
+      ? `${model.provider ? `${model.provider} / ` : ''}${model.model}${model.reasoningEffort ? ` · ${model.reasoningEffort}` : ''}`
+      : '运行时读取编译设置'
+    const runLabel = activeCount ? '加入队列' : id === 'materialize' && groupKeys.length > 0
+      ? `物化选中 ${groupKeys.length} 个分组`
+      : sourceIds.length > 0 && id !== 'materialize' && id !== 'build'
+        ? `运行选中 ${sourceIds.length} 份`
+        : '运行此阶段'
+    return <div className="ktStage">
+      <div className="ktStageHead">
+        <div className="ktStageIntro">
+          <h2>{PIPELINE_STAGE_LABEL[id]}</h2>
+          <p>{STAGE_DETAIL[id]}</p>
+        </div>
+        <div className="ktStageActions">
+          {sourceIds.length > 0 && <Button size="sm" variant="ghost" disabled={busy} onClick={() => setSourceIds([])}>清除选择</Button>}
+          {groupKeys.length > 0 && <Button size="sm" variant="ghost" disabled={busy} onClick={() => setGroupKeys([])}>清除选择</Button>}
+          {(id === 'extract' || id === 'normalize') && sourceIds.length > 0 && <Button size="sm" variant="ghost" disabled={busy} onClick={() => { void start(id, true) }}>强制重跑</Button>}
+          <Button size="sm" variant="outline" disabled={busy || !status || ((id === 'extract' || id === 'normalize') && !status.sources.length)} onClick={() => { void start(id) }}>{runLabel}</Button>
+        </div>
       </div>
+      <p className="ktStageMeta">
+        <span>下次运行范围：{scopeText}</span>
+        <i aria-hidden="true">·</i><span>模型：{modelText}</span>
+        {result && <><i aria-hidden="true">·</i><span>已处理 {result.done}/{result.total}{result.reused ? ` · 复用 ${result.reused}` : ''}{result.failed ? ` · 失败 ${result.failed}` : ''}</span></>}
+        {observation.task && <><i aria-hidden="true">·</i><span>查看任务 {formatDateTime(observation.task.finishedAt ?? observation.task.startedAt ?? observation.task.queuedAt)}</span></>}
+      </p>
+
+      {id === 'extract' || id === 'normalize'
+        ? <DocumentList
+          rows={documentRows}
+          selected={selectedDoc}
+          onSelect={next => { setSelectedDoc(current => current === next ? '' : next); setSideTab('trail') }}
+          selectedIds={sourceIds}
+          onToggle={next => setSourceIds(current => toggle(current, next))}
+          stage={id}
+          task={focusedTask}
+          currentSourceId={currentSourceId}
+        />
+        : null}
+      {id === 'derive' && <div className="ktDerive">
+        <div>
+          <h3>从 Case 提炼可复用的方法</h3>
+          <p>这一段的对象是 Case，不是文档：只有带检查与动作证据的 Case 才会产出 Procedure。没有证据就不生成，这是刻意的。</p>
+        </div>
+        <dl>
+          <div><dt>处理对象</dt><dd>Case（带检查与动作证据的那些），不是文档。</dd></div>
+          <div><dt>{focusedTask ? '本次结论' : '库内状态'}</dt><dd>{observation.label} · {observation.detail}</dd></div>
+        </dl>
+      </div>}
+      {id === 'materialize' && <GroupList groups={status?.groups ?? []} selectedKeys={groupKeys} onToggle={key => setGroupKeys(current => toggle(current, key))} task={focusedTask} inspectingKey={selectedDoc} />}
+      {id === 'build' && <div className="ktIndex">
+        <div className="ktIndexState">
+          {status?.indexPending ? <Badge tone="warning">索引待更新</Badge> : <Badge tone="success">索引已最新</Badge>}
+          <p>{observation.detail}</p>
+        </div>
+        <dl>
+          <div><dt>索引范围</dt><dd>整个知识库。构建会读已物化卡片，不重新抽取文档。</dd></div>
+          <div><dt>换向量模型</dt><dd>只需重新构建索引，文档不用再抽一遍。</dd></div>
+        </dl>
+      </div>}
+
+      {focusedTask && <StageOutput key={`${focusedTask.id}:${id}`}><RawTaskOutput kb={kb} task={focusedTask} events={feed.events} stage={id} onOpenFailed={message => setNotice({ tone: 'error', text: message })} /></StageOutput>}
     </div>
-    {failure && <p className="extractTasksError" role="alert">{failure}</p>}
+  }
 
-    <Tabs defaultValue="extract" className="extractTasksWork">
-      {/* 步骤轨横贯整页：它是这一页的骨架（有方向的流水线），所以不能被左边那一栏框住。
-          每格两行 —— 名字、以及「最近结论 + 还剩多少」；两件事不同色，因为它们是两个问题。 */}
-      <TabsList aria-label="知识处理阶段" className="extractTasksRailList">
-        {stages.map((stage, index) => {
-          const observation = stageObservation(stage.id, stageTasks, status)
-          return <Fragment key={stage.id}>
-            {index > 0 && <span className="extractTasksRailArrow" aria-hidden="true"><ArrowRight size={16} /></span>}
-            <TabsTrigger value={stage.id} className="extractTasksRailStep" title={observation.detail}>
-              <span className="extractTasksRailName">{PIPELINE_STAGE_LABEL[stage.id]}</span>
-              <span className="extractTasksRailFacts">
-                <Badge tone={observation.tone}>{observation.label}</Badge>
-                <span className="extractTasksRailPending">{stagePending(stage.id, status)}</span>
-              </span>
-            </TabsTrigger>
-          </Fragment>
-        })}
-      </TabsList>
+  return <div className="ktPage">
+    <div className="ktTop">
+      <div className="ktTopLead">
+        <div className="ktViews" role="group" aria-label="知识处理视图">
+          <Button variant="ghost" aria-pressed={view === 'run'} className="ktView" onClick={() => setView('run')}>处理</Button>
+          <Button variant="ghost" aria-pressed={view === 'settings'} className="ktView" onClick={() => setView('settings')}>编译设置</Button>
+        </div>
+        <p className="ktHeadline" role="status">{view === 'run' ? headline : '编译模型、提取备注与坐标实体决定这个库怎么把文档变成知识。'}</p>
+      </div>
+      <div className="ktTopActions">
+        <Button variant="ghost" size="sm" onClick={() => { void refresh(); setSettingsKey(current => current + 1) }}><RefreshCw size={13} />刷新</Button>
+        <Button variant="outline" size="sm" title="打开解析内核控制台：文件 / 链接 → 知识就绪 Markdown" onClick={openKernel}><FileUp size={13} />解析内核</Button>
+        {view === 'run' && <Button size="sm" title="按顺序运行全部阶段：抽取 → 归一 → 提炼 → 物化 → 构建索引" disabled={busy || !status?.sources.length} onClick={() => { void start('all') }}><Play size={13} />{activeCount ? '全链路加入队列' : '全链路运行'}</Button>}
+      </div>
+    </div>
 
-      <div className="extractTasksBody">
-        <div className="extractTasksMain">
-          {stages.map(stage => {
-            const observation = stageObservation(stage.id, stageTasks, status)
-            const live = Boolean(observation.task && PIPELINE_ACTIVE_STATES.includes(observation.task.state) && observation.task.currentStage === stage.id)
-            return <TabsContent key={stage.id} value={stage.id} className="extractTasksStage">
-              <div className="extractTasksStageIntro">
-                <div>
-                  <h2>{PIPELINE_STAGE_LABEL[stage.id]}</h2>
-                  <p>{stage.detail}</p>
-                </div>
-                <Button size="sm" variant="outline" disabled={busy || !status || ((stage.id === 'extract' || stage.id === 'normalize') && !status.sources.length)} onClick={() => { void start(stage.id) }}>运行此阶段</Button>
-              </div>
-              <div className="extractTasksFacts">
-                <section aria-labelledby={`stage-input-${stage.id}`}>
-                  <h3 id={`stage-input-${stage.id}`}>输入范围</h3>
-                  <dl>{inputRows(stage.id, observation.task).map(([label, value]) => <div key={label}><dt>{label}</dt><dd>{value}</dd></div>)}</dl>
-                </section>
-                <section aria-labelledby={`stage-output-${stage.id}`}>
-                  <h3 id={`stage-output-${stage.id}`}>结果摘要</h3>
-                  <dl>{outputRows(stage.id, observation).map(([label, value]) => <div key={label}><dt>{label}</dt><dd>{value}</dd></div>)}</dl>
-                </section>
-              </div>
-              {/* 构建索引那一段没有轨迹：它的产出是检索产物（可重建），不是「一次判断」。
-                  所以这里只在前三段渲染；`build` 留空而不是硬塞一份假记录。 */}
-              {stage.id !== 'build' && <StageTrajectories kb={kb} stage={stage.id as TrajectoryStage} runs={trajectories} onOpenFailed={setFailure} />}
-              {observation.task && <StageOutput active={live}><TaskOutput kb={kb} id={observation.task.id} onTask={replaceTask} onOpenFailed={setFailure} stageFilter={stage.id} taskStage={observation.task.stage} /></StageOutput>}
-            </TabsContent>
+    {notice && <p className={notice.tone === 'error' ? 'ktError' : 'ktNotice'} role={notice.tone === 'error' ? 'alert' : 'status'}>
+      {notice.tone === 'error' ? <AlertCircle size={13} /> : <Check size={13} />}
+      <span>{notice.text}</span>
+      <Button variant="ghost" size="icon" className="ktNoticeClose" aria-label="关闭提示" onClick={() => setNotice(null)}><X size={13} /></Button>
+    </p>}
+
+    {view === 'settings'
+      ? <CompileSettingsView key={settingsKey} kb={kb} onNotice={(tone, text) => setNotice({ tone, text })} />
+      : <Tabs value={stage} onValueChange={next => { setStage(next as StageId); setSelectedDoc(''); setFollowRun(false) }} className="ktWork">
+        {focusedTask && <RunSummary task={focusedTask} events={feed.events} failure={feed.failure} busy={busy} onAct={(id, action) => { void act(id, action) }} onFollow={followCurrent} onRecovery={chooseTask} following={followRun && stage === focusedTask.currentStage} queueCount={activeTasks.filter(task => task.state === 'queued' && task.id !== focusedTask.id).length} queuePosition={orderActiveTasks(activeTasks).filter(task => task.state === 'queued').findIndex(task => task.id === focusedTask.id) + 1} objectTitle={currentObjectTitle} />}
+        {runningTask && focusedTask?.id !== runningTask.id && <p className="ktNotice"><span>正在查看历史或排队任务；另有任务{STATES[runningTask.state]}。</span><Button onClick={() => { setPinnedTask(false); setFollowRun(true); setSideTab('activity') }}>查看当前运行</Button></p>}
+        {pinnedTask && selectedTask && !focusedTask && <p className="ktHint">{feed.failure ? `指定任务读取失败：${feed.failure}` : '正在读取指定任务…'}{feed.failure && <Button variant="ghost" onClick={() => setPinnedTask(false)}>查看最近任务</Button>}</p>}
+        <div className="ktRailHeading"><strong>{focusedTask ? '本次任务阶段' : '知识库待处理状态'}</strong><span>点击阶段查看详情；带「进行中」标记的阶段正在执行。</span></div>
+        <TabsList aria-label="知识处理阶段" className="ktRail">
+          {STAGE_ORDER.map((id, index) => {
+            const observation = stageObservationOf(id)
+            return <Fragment key={id}>
+              {index > 0 && <span className="ktRailArrow" aria-hidden="true"><ArrowRight size={15} /></span>}
+              <TabsTrigger value={id} className="ktRailStep" data-running={focusedTask?.currentStage === id && PIPELINE_ACTIVE_STATES.includes(focusedTask.state) || undefined} title={observation.detail}>
+                <span className="ktRailTop"><span className="ktRailIndex" aria-hidden="true">{index + 1}</span><span className="ktRailName">{PIPELINE_STAGE_LABEL[id]}</span></span>
+                <span className="ktRailFacts">
+                  <Badge tone={observation.tone}>{observation.label}</Badge>
+                  <span className="ktRailPending">{focusedTask ? focusedTask.results?.[id] ? `${focusedTask.results[id]!.done}/${focusedTask.results[id]!.total} 已处理` : focusedTask.currentStage === id && focusedTask.total ? `${focusedTask.done}/${focusedTask.total} 已处理` : '' : stagePending(id, status)}</span>
+                </span>
+              </TabsTrigger>
+            </Fragment>
           })}
-        </div>
+        </TabsList>
 
-        <aside className="extractTasksSide">
-          <section className="extractTasksPanel" aria-labelledby="scope-title">
-            <div className="extractTasksPanelHead">
-              <div>
-                <h2 id="scope-title">处理范围</h2>
-                <p>不选就是全部；点一行选中它。</p>
-              </div>
-            </div>
-            <div className="extractTasksPanelBody">
-              <Tabs defaultValue="sources">
-                <TabsList><TabsTrigger value="sources">来源</TabsTrigger><TabsTrigger value="groups">卡片分组</TabsTrigger></TabsList>
-                <TabsContent value="sources" className="extractTasksScopeTab">
-                  <p className="extractTasksScopeNote">{sourceIds.length ? `已选 ${sourceIds.length} 份文档。` : '未选择时处理全部来源，未变化的结果自动复用。'}</p>
-                  {!status && <p className="extractTasksEmpty">正在读取来源…</p>}
-                  {status?.sources.length === 0 && <p className="extractTasksEmpty">当前没有来源。添加来源后即可开始处理。</p>}
-                  <ul className="extractTasksChoiceList" aria-label="来源选择">{status?.sources.map(source => {
-                    const on = sourceIds.includes(source.id)
-                    return <li key={source.id}>
-                      <button type="button" className="extractTasksPick" aria-pressed={on} onClick={() => setSourceIds(current => toggle(current, source.id))}>
-                        <span className="extractTasksPickBox" aria-hidden="true">{on && <Check size={11} />}</span>
-                        <span className="extractTasksChoiceName">{source.title}<span>v{source.version}</span></span>
-                        <Badge tone="neutral">{SOURCE_STATES[source.state]}</Badge>
-                      </button>
-                    </li>
-                  })}</ul>
-                  {sourceIds.length > 0 && <div className="extractTasksScopeActions">
-                    <Button size="sm" variant="outline" disabled={busy} onClick={() => { void start('extract', true) }}>强制重抽 {sourceIds.length} 份</Button>
-                    <Button size="sm" variant="ghost" onClick={() => setSourceIds([])}>清除选择</Button>
-                  </div>}
-                </TabsContent>
-                <TabsContent value="groups" className="extractTasksScopeTab">
-                  <p className="extractTasksScopeNote">{groupKeys.length ? `已选 ${groupKeys.length} 个完整卡片分组。` : '未选择时物化全部待办；同坐标的知识与事件一起处理。'}</p>
-                  {!status && <p className="extractTasksEmpty">正在读取分组…</p>}
-                  {status?.groups.length === 0 && <p className="extractTasksEmpty">还没有可物化分组。先抽取并归一文档内容。</p>}
-                  <ul className="extractTasksChoiceList extractTasksGroupList" aria-label="卡片分组选择">{status?.groups.map(group => {
-                    const on = groupKeys.includes(group.key)
-                    return <li key={group.key}>
-                      <button type="button" className="extractTasksPick" aria-pressed={on} onClick={() => setGroupKeys(current => toggle(current, group.key))}>
-                        <span className="extractTasksPickBox" aria-hidden="true">{on && <Check size={11} />}</span>
-                        <span className="extractTasksChoiceName"><strong>{group.title}</strong><span>{group.knowledgeCount} 条 Knowledge · {group.eventCount} 个 Event · {group.sourceIds.length} 份来源</span>{group.reason && <span className="extractTasksGroupReason">{group.reason}</span>}</span>
-                        <Badge tone={group.state === 'current' ? 'success' : 'neutral'}>{GROUP_STATES[group.state]}</Badge>
-                      </button>
-                    </li>
-                  })}</ul>
-                  {groupKeys.length > 0 && <div className="extractTasksScopeActions">
-                    <Button size="sm" variant="outline" disabled={busy} onClick={() => { void start('materialize') }}>物化选中的 {groupKeys.length} 个分组</Button>
-                    <Button size="sm" variant="ghost" onClick={() => setGroupKeys([])}>清除选择</Button>
-                  </div>}
-                </TabsContent>
-              </Tabs>
-            </div>
-          </section>
+        <div className="ktBody">
+          <div className="ktMain">
+            {STAGE_ORDER.map(id => <TabsContent key={id} value={id} className="ktStageTab">{renderStageBody(id)}</TabsContent>)}
+          </div>
 
-          {/* `id="history"` 保留：旧链接（`…#history`）还能落到这一块上。 */}
-          <section id="history" className="extractTasksPanel" aria-labelledby="pipeline-history">
-            <div className="extractTasksPanelHead">
-              <div>
-                <h2 id="pipeline-history">运行记录</h2>
-                <p>{activeCount ? '暂停与停止会在当前文档或卡片处理完成后生效。' : '运行状态会自动更新。'}</p>
-              </div>
-              <Badge tone={activeCount ? 'blue' : 'neutral'}>{activeCount ? `进行中 ${activeCount}` : '无运行任务'}</Badge>
-            </div>
-            <div className="extractTasksPanelBody">
-              {!history && <p className="extractTasksEmpty">正在读取任务记录…</p>}
-              {history?.tasks.length === 0 && <p className="extractTasksEmpty">还没有阶段任务。抽取报告保留在抽取阶段。</p>}
-              {orderedTasks.map(task => <article key={task.id} className="extractTaskRow">
-                <div className="extractTaskTitle">
-                  <strong>{PIPELINE_STAGE_LABEL[task.stage]}</strong>
-                  <Badge tone={task.state === 'succeeded' ? 'success' : ['failed', 'partial', 'interrupted'].includes(task.state) ? 'warning' : PIPELINE_ACTIVE_STATES.includes(task.state) ? 'blue' : 'neutral'}>{STATES[task.state]}</Badge>
-                </div>
-                <p className="extractTaskSummary">{task.summary}</p>
-                <p className="extractTaskTime">{formatDateTime(task.queuedAt)}{task.model.model ? ` · ${task.model.provider ?? ''} / ${task.model.model}` : ''}{task.model.reasoningEffort ? ` · ${task.model.reasoningEffort}` : ''}</p>
-                <div className="extractTaskControls">
-                  <Button size="sm" variant="ghost" className="extractTaskStepToggle" aria-expanded={selectedTask === task.id} onClick={() => setSelectedTask(current => current === task.id ? '' : task.id)}>{selectedTask === task.id ? '收起输出' : '查看输出'}<ChevronDown size={13} /></Button>
-                  {PIPELINE_ACTIVE_STATES.includes(task.state) ? <>
-                    <Button size="sm" variant="outline" disabled={busy || task.state === 'cancelling' || task.state === 'pausing'} onClick={() => { void act(task.id, task.state === 'paused' ? 'resume' : 'pause') }}>{task.state === 'paused' ? <Play size={12} /> : <Pause size={12} />}{task.state === 'paused' ? '继续' : '暂停'}</Button>
-                    <Button size="sm" variant="ghost" disabled={busy || task.state === 'cancelling'} onClick={() => { void act(task.id, 'cancel') }}><X size={12} />停止</Button>
-                  </> : <Button size="sm" variant="outline" disabled={busy} onClick={() => { void act(task.id, 'retry') }}>重新运行</Button>}
-                </div>
-                {selectedTask === task.id && <div className="extractTaskSteps"><TaskOutput kb={kb} id={task.id} onTask={replaceTask} onOpenFailed={setFailure} /></div>}
-              </article>)}
-              <ListPager page={page} pageCount={pageCount} total={total} onChange={setPage} />
-            </div>
-          </section>
-        </aside>
-      </div>
-    </Tabs>
+          <aside className="ktSide" aria-label="这一段的轨迹与运行记录">
+            <Tabs value={sideTab} onValueChange={setSideTab} className="ktSideTabs">
+              <TabsList className="ktSideTabsList">
+                <TabsTrigger value="activity">本次活动</TabsTrigger>
+                <TabsTrigger value="trail"><History size={12} />历史轨迹</TabsTrigger>
+                <TabsTrigger value="history">历史任务{total ? <span className="ktSideBadge">{total}</span> : null}</TabsTrigger>
+              </TabsList>
+              <TabsContent value="activity" className="ktSidePanel">
+                {focusedTask ? <RunActivity key={focusedTask.id} task={focusedTask} events={feed.events} onInspect={(id, nextStage) => { setSelectedDoc(id); if (nextStage) setStage(nextStage); setFollowRun(false) }} /> : <p className="ktSideEmptyText">运行任务后，在这里查看保存、重试和完成记录。</p>}
+              </TabsContent>
+              <TabsContent value="trail" className="ktSidePanel">
+                <TrajectoryPanel
+                  kb={kb}
+                  stage={stage}
+                  selectedDoc={selectedDoc}
+                  docTitle={selectedDocTitle}
+                  runs={trajectories}
+                  onClearDoc={() => setSelectedDoc('')}
+                  onOpenFailed={message => setNotice({ tone: 'error', text: message })}
+                />
+              </TabsContent>
+              <TabsContent value="history" className="ktSidePanel">
+                <RunHistoryPanel
+                  tasks={history?.tasks ?? []}
+                  orderedTasks={orderedTasks}
+                  total={total}
+                  page={page}
+                  onPage={setPage}
+                  activeCount={activeCount}
+                  selectedTask={focusedTask?.id ?? ''}
+                  onToggleTask={chooseTask}
+                  busy={busy}
+                  onAct={(id, action) => { void act(id, action) }}
+                />
+              </TabsContent>
+            </Tabs>
+          </aside>
+        </div>
+      </Tabs>}
   </div>
 }