dsh-data-domain-knowledge 0.1.0-alpha.13 → 0.1.0-alpha.15

package/src/client/ExtractionTasksPage.tsx

@@ -1,189 +1,576 @@
-import { useEffect, useRef, useState, type ReactNode } from 'react'
-import { ChevronDown, CircleX, Clock3, ListOrdered, Pause, Play, RefreshCw } from '@tita-agent/ui/icons'
-import { Badge, Button } from '@tita-agent/ui/components'
-import { CompileStepList, type CompileStepView } from './CompileDialogs.tsx'
+/**
+ * 知识处理与运行记录 —— 一整页。
+ *
+ * ## 这一页回答三个问题，按顺序，只有三层
+ *
+ * 1. **现在什么状态**：顶部一行实时结论（在跑哪一段、跑了几分之几；或者「没有在跑」）。
+ * 2. **四段各差多少**：一条步骤轨。每格只放三样东西 —— 段名、最近一次的结论、还有多少待办。
+ * 3. **这一段的细节**：输入范围、结果摘要、抽取报告、原始输出；右边一栏是「处理范围」与「运行记录」。
+ *
+ * ## 2026-10-18 为什么重排
+ *
+ * 原来的版式把所有东西压在同一条竖线里，同一件事被说了三遍：段页签上是「部分失败」，
+ * 段头再说一次，结果摘要的第一行又是「状态：部分失败」，下面再写一遍「完成 0/1 · 失败 1」。
+ * 而真正要紧的「还剩多少待办」缩成一行 10.5px 的灰字挤在页签上方，模型原始日志却占着一屏。
+ *
+ * 所以这一版守四条：
+ *
+ * - **一个事实只出现一次。** 阶段状态只在步骤轨上；段名只在段头；待办计数只在轨上那一格。
+ * - **步骤轨横贯整页**，不再缩在左栏里 —— 它是这一页的骨架（有方向的流水线），不是左栏的页签头。
+ * - **原始输出默认收起。** 它是排查用的底料，不是结论；任务在跑时自动展开。
+ * - **左右两栏各自回答一类问题**：左栏「这一段跑了什么」，右栏「我要跑哪些」+「以前跑过什么」。
+ *
+ * 分页在服务端（`limit` / `offset`）：每跑一次都会往里加，整份在手迟早会变成整份传一遍。
+ * 页码状态走 `ListPager`，与知识库其余列表同一个 `PAGE_SIZE`。
+ */
+
+import { Fragment, useCallback, useEffect, 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 { 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 { 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'
 
-type TaskState = 'queued' | 'running' | 'pausing' | 'paused' | 'cancelling' | 'succeeded' | 'failed' | 'cancelled'
-type TaskAction = 'pause' | 'resume' | 'cancel'
-
-interface ExtractionTask {
-  runId: string
-  only: string
-  state: TaskState
-  queuedAt: string
-  startedAt: string
-  finishedAt?: string
-  queued?: boolean
-  sourcesTotal: number
-  sourcesDone: number
-  steps: CompileStepView[]
-  outcome?: string
-  failed?: boolean
-}
+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 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 STATE_LABEL: Record<TaskState, string> = {
-  queued: '排队中', running: '进行中', pausing: '暂停中', paused: '已暂停',
-  cancelling: '停止中', succeeded: '已完成', failed: '失败', cancelled: '已停止',
-}
+const STAGE_ORDER: readonly StageId[] = ['extract', 'normalize', 'materialize', 'build']
 
-const STATE_TONE: Record<TaskState, 'neutral' | 'success' | 'warning' | 'blue'> = {
-  queued: 'neutral', running: 'blue', pausing: 'warning', paused: 'warning',
-  cancelling: 'warning', succeeded: 'success', failed: 'warning', cancelled: 'neutral',
+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 TASK_LABEL: Record<string, string> = {
-  all: '全量重编', wiki: '增量编译', schema: 'Schema 更新', embeddings: '向量重建',
-}
+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 }
 
-async function loadTasks(kb: string): Promise<ExtractionTask[]> {
-  const params = new URLSearchParams({ kb })
-  const envelope = await requestJson<{ tasks: ExtractionTask[] }>(`/knowledge/extraction-tasks?${params}`)
-  return envelope.data?.tasks ?? []
-}
+  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 }
+  }
 
-async function updateTask(kb: string, runId: string, action: TaskAction): Promise<ExtractionTask> {
-  const envelope = await requestJson<{ task: ExtractionTask }>('/knowledge/extraction-task', {
-    method: 'POST',
-    headers: { 'content-type': 'application/json' },
-    body: JSON.stringify({ kb, run_id: runId, action }),
-  })
-  if (!envelope.data?.task) throw new Error('任务状态没有返回')
-  return envelope.data.task
-}
+  const completed = tasks.find(task => task.results?.[stage])
+  const result = completed?.results?.[stage]
+  if (completed && result) return completedStageObservation(stage, completed, result)
 
-function stateOf(task: ExtractionTask): TaskState {
-  return task.state ?? (task.finishedAt ? (task.failed ? 'failed' : 'succeeded') : task.queued ? 'queued' : 'running')
+  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 }
+  }
+
+  if (!status) return { label: '读取中', tone: 'neutral', detail: '正在读取当前处理状态。' }
+  if (stage === 'extract') {
+    const count = status.sources.length
+    return count
+      ? { label: '待运行', tone: 'neutral', detail: `当前 ${count} 份来源；运行时会按内容复用未变化的结果。` }
+      : { label: '无来源', tone: 'neutral', detail: '当前没有来源可抽取。' }
+  }
+  if (stage === 'normalize') {
+    const ready = status.sources.filter(source => source.state === 'extracted').length
+    const waiting = status.sources.filter(source => source.state === 'pending' || source.state === 'outdated').length
+    return ready
+      ? { label: '待运行', tone: 'neutral', detail: `待归一 ${ready} 份来源${waiting ? ` · 另有 ${waiting} 份待抽取` : ''}。` }
+      : waiting
+        ? { label: '等待来源', tone: 'neutral', detail: `${waiting} 份来源尚未完成抽取。` }
+        : { label: '无待办', tone: 'neutral', detail: '当前没有来源需要归一。' }
+  }
+  if (stage === 'materialize') {
+    const pending = status.groups.filter(group => group.state !== 'current').length
+    return pending
+      ? { label: '待运行', tone: status.blocked ? 'warning' : 'neutral', detail: `待处理 ${pending} 个卡片分组${status.blocked ? ` · 暂不可物化 ${status.blocked} 个` : ''}。` }
+      : { label: '无待办', tone: 'neutral', detail: '当前没有需要新建、更新或停用的卡片分组。' }
+  }
+  return status.indexPending
+    ? { label: '待更新', tone: 'neutral', detail: '索引内容有变化，等待构建。' }
+    : { label: '无变化', tone: 'neutral', detail: '当前索引已是最新，无需重建。' }
 }
 
-function taskDetail(task: ExtractionTask): string {
-  const state = stateOf(task)
-  if (state === 'queued') return '等待前面的任务结束'
-  const step = task.steps.find(item => item.state === 'running')
-  const progress = task.sourcesTotal > 0 ? `文档 ${task.sourcesDone}/${task.sourcesTotal}` : ''
-  if (state === 'running' || state === 'pausing' || state === 'paused' || state === 'cancelling') {
-    return [step?.facts[0] ?? step?.id, progress].filter(Boolean).join(' · ') || '正在准备编译'
+/**
+ * 这一步**还差多少活** —— 步骤轨上那一格的第二行。
+ *
+ * 它与 `stageObservation` 的两个字段刻意分开：`label` 说的是**上一次跑成什么样**
+ * （已完成 / 部分失败），这一行说的是**现在还剩什么**。原来这两件事被挤在同一行
+ * 10.5px 的灰字里（「0 张待新建 · 58 张待更新 · …」），既没有主语也没有和阶段对上。
+ *
+ * 数字全部来自 `status`，算不出来就说算不出来，不补 0。
+ */
+function stagePending(stage: StageId, status?: PipelineStatus): string {
+  if (!status) return '读取中'
+  if (stage === 'extract') {
+    const count = status.sources.filter(source => source.state === 'pending' || source.state === 'outdated').length
+    return count ? `${count} 份待抽取` : '无待抽取'
+  }
+  if (stage === 'normalize') {
+    const ready = status.sources.filter(source => source.state === 'extracted').length
+    if (ready) return `${ready} 份待归一`
+    const waiting = status.sources.filter(source => source.state === 'pending' || source.state === 'outdated').length
+    return waiting ? `等待 ${waiting} 份抽取` : '无待归一'
   }
-  return task.outcome ?? (state === 'succeeded' ? '任务完成' : state === 'cancelled' ? '任务已停止' : '任务失败')
+  if (stage === 'materialize') {
+    const pending = status.groups.filter(group => group.state !== 'current').length
+    return pending ? `${pending} 个分组待处理` : '无待物化'
+  }
+  return status.indexPending ? '索引待更新' : '索引已最新'
 }
 
-function TaskActions({ task, kb, onChange }: {
-  task: ExtractionTask
-  kb: string
-  onChange: (task: ExtractionTask) => void
-}): ReactNode {
-  const [busy, setBusy] = useState(false)
+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 state = stateOf(task)
-  const active = ['queued', 'running', 'pausing', 'paused', 'cancelling'].includes(state)
-  const act = async (action: TaskAction): Promise<void> => {
-    setBusy(true)
+  const callback = useRef(onTask)
+  callback.current = onTask
+  useEffect(() => {
+    let active = true
+    let busy = false
+    let cursor = 0
+    let terminal = false
     setFailure('')
-    try { onChange(await updateTask(kb, task.runId, action)) }
-    catch (cause) { setFailure(cause instanceof Error ? cause.message : String(cause)) }
-    finally { setBusy(false) }
-  }
-  if (!active) return null
-  return <span className="extractTaskActions">
-    {failure && <span className="extractTaskActionError" role="alert">{failure}</span>}
-    {state !== 'cancelling' && <>
-      {state === 'paused'
-        ? <Button size="sm" variant="outline" disabled={busy} onClick={() => void act('resume')}><Play size={13} />继续</Button>
-        : <Button size="sm" variant="outline" disabled={busy || state === 'pausing'} onClick={() => void act('pause')}><Pause size={13} />暂停</Button>}
-      <Button size="sm" variant="destructive" disabled={busy} onClick={() => void act('cancel')}><CircleX size={13} />停止</Button>
-    </>}
-  </span>
+    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>
 }
 
-function TaskRow({ task, kb, onChange }: {
-  task: ExtractionTask
-  kb: string
-  onChange: (task: ExtractionTask) => void
-}): ReactNode {
-  const [stepsOpen, setStepsOpen] = useState(() => ['queued', 'running', 'pausing', 'paused', 'cancelling'].includes(stateOf(task)))
-  const state = stateOf(task)
-  return <article className="extractTaskRow">
-    <div className="extractTaskMain">
-      <div className="extractTaskTitle">
-        <strong>{TASK_LABEL[task.only] ?? '编译任务'}</strong>
-        <Badge tone={STATE_TONE[state]}>{STATE_LABEL[state]}</Badge>
+/**
+ * 这一段跑过的轨迹，只列**这一段自己的**。
+ *
+ * 2026-10-18 之前这一格叫「抽取报告」，而且读的是 `/knowledge/pipeline-tasks` 里那份
+ * 跟**任务分页共用一个 offset** 的窗口 —— 翻到第 2 页时会空掉，而标题还写着「共 N 份」。
+ * 现在三段各有自己的轨迹（`stage` 列），这一格改成单取一次列表、按阶段分。
+ *
+ * 每段最多露 8 条：这一页的主线是「现在什么状态」，历史该去整页翻（点开就是整页）。
+ */
+const STAGE_TRAJECTORY_CAP = 8
+
+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">
+      <div>
+        <h3 id={`trajectory-${stage}`}>{TRAJECTORY_STAGE_LABEL[stage]}</h3>
+        <p>每次运行的过程记录；点开在新窗口读完整轨迹。</p>
       </div>
-      <p>{taskDetail(task)}</p>
-      <span className="extractTaskTime"><Clock3 size={12} />{formatDateTime(task.startedAt || task.queuedAt)}</span>
-    </div>
-    <div className="extractTaskControls">
-      <Button size="sm" variant="ghost" className="extractTaskStepToggle" aria-expanded={stepsOpen}
-        onClick={() => setStepsOpen(value => !value)}>
-        {stepsOpen ? '收起步骤' : '查看步骤'}<ChevronDown size={13} />
-      </Button>
-      <TaskActions task={task} kb={kb} onChange={onChange} />
+      <span className="extractTasksCount">{own.length > shown.length ? `${shown.length} / ${own.length} 条` : `${own.length} 条`}</span>
     </div>
-    {stepsOpen && <div className="extractTaskSteps"><CompileStepList steps={task.steps} /></div>}
-  </article>
+    {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>
+}
+
+/**
+ * 运行输出**默认收起**。
+ *
+ * 它是模型原始返回（几百行），而这一页的主线是「哪一段还剩多少活、跑完是什么结果」。
+ * 此前它是常驻展开的 `<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>
 }
 
 export function ExtractionTasksPage({ kb }: { kb: string }): ReactNode {
-  const [tasks, setTasks] = useState<ExtractionTask[] | null>(null)
-  const [kbName, setKbName] = useState('')
+  const params = new URLSearchParams(typeof window === 'undefined' ? '' : window.location.search)
+  const [status, setStatus] = useState<PipelineStatus>()
+  const [history, setHistory] = useState<History>()
+  const [sourceIds, setSourceIds] = useState<string[]>(() => params.get('source') ? [params.get('source')!] : [])
+  const [groupKeys, setGroupKeys] = useState<string[]>([])
+  const [selectedTask, setSelectedTask] = useState(() => params.get('task') ?? '')
   const [failure, setFailure] = useState('')
-  const [refreshing, setRefreshing] = useState(false)
-  const busyRef = useRef(false)
-
+  const [busy, setBusy] = useState(false)
+  /** 1-based：与 `ListPager` 同一个口径。 */
+  const [page, setPage] = useState(1)
+  const refreshSequence = useRef(0)
+  /**
+   * 四段步轨的阶段结论读这里，而不是当前这一页任务。
+   *
+   * 任务列表是服务端分页的（一页 `PAGE_SIZE` 条）：某个阶段的最新结论一旦翻出第一页，
+   * 直接搜当前页会让那一段悄悄退回「待运行」—— 屏幕上看起来像从来没跑过。
+   * 所以按 id 累积见过的状态，只留最近 200 条（这只是阶段结论的缓存，完整历史在服务端）。
+   */
+  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)
+    if (seenTasks.current.size > 200) {
+      const ordered = [...seenTasks.current.values()].sort((left, right) => 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)))
+  }, [])
+  const refresh = useCallback(async (): Promise<void> => {
+    if (!kb) return
+    const sequence = ++refreshSequence.current
+    try {
+      const [nextStatus, nextHistory, nextTrajectories] = 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),
+      ])
+      if (sequence !== refreshSequence.current) return
+      if (nextStatus.data) setStatus(nextStatus.data)
+      if (nextHistory.data) { setHistory(nextHistory.data); rememberTasks(nextHistory.data.tasks) }
+      if (nextTrajectories) setTrajectories(nextTrajectories.runs)
+      setFailure('')
+    } catch (cause) { if (sequence === refreshSequence.current) setFailure(cause instanceof Error ? cause.message : String(cause)) }
+  }, [kb, page, rememberTasks])
+  const activeCount = history?.tasks.filter(task => PIPELINE_ACTIVE_STATES.includes(task.state)).length ?? 0
   useEffect(() => {
-    if (!kb) return undefined
-    let active = true
-    const load = async (): Promise<void> => {
-      if (busyRef.current) return
-      busyRef.current = true
-      try {
-        const [nextTasks, basesResponse] = await Promise.all([
-          loadTasks(kb),
-          requestJson<{ bases?: Array<{ id: string; name: string }> }>('/knowledge/bases'),
-        ])
-        if (!active) return
-        setTasks(nextTasks)
-        setKbName(basesResponse.data?.bases?.find(base => base.id === kb)?.name ?? kb)
-        setFailure('')
-      } catch (cause) {
-        if (active) setFailure(cause instanceof Error ? cause.message : String(cause))
-      } finally {
-        busyRef.current = false
-        if (active) setRefreshing(false)
-      }
+    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) }
+  }, [refresh, activeCount])
+  const start = async (stage: PipelineStage, force = false): Promise<void> => {
+    setBusy(true); setFailure('')
+    try {
+      const sourceScope = stage === 'all' || stage === 'extract' || stage === 'normalize'
+      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) }
+      await refresh()
+    } catch (cause) { setFailure(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)
+      await refresh()
+    } catch (cause) { setFailure(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)
+    rememberTasks([task])
+  }, [rememberTasks])
+  if (!kb) return <p className="extractTasksError" role="alert">缺少知识库，请从知识库工具栏打开知识处理。</p>
+  /**
+   * 分页器分的是**任务**，所以页数只能用任务自己的总数。
+   *
+   * 原来取的是 `max(任务数, 抽取报告数)`：抽取报告是**另一个集合**（一次任务可能产出
+   * 好几份，历史累积到几百份），把它算进分母会让分页器凭空多出十几页，而点「下一页」
+   * 落到的是一片空白 —— 那个空页看起来像「记录丢了」。抽取报告的数量已经有自己的落点
+   * （「抽取报告」那一行右侧的「N 份」），不在这里重复。
+   */
+  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: '从来源生成 Knowledge 与 Event。' },
+    { id: 'normalize', detail: '合并实体，并整理知识坐标。' },
+    { 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('、')} 等`}`
     }
-    void load()
-    const timer = window.setInterval(() => { void load() }, 2000)
-    return () => { active = false; window.clearInterval(timer) }
-  }, [kb])
-
-  const replaceTask = (task: ExtractionTask): void => {
-    setTasks(current => current?.map(item => item.runId === task.runId ? task : item) ?? [task])
+    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') {
+      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
   }
-
-  if (!kb) return <section className="page-state"><h2>缺少知识库</h2><p>从知识库工具栏打开抽取任务页。</p></section>
-
-  const activeCount = tasks?.filter(task => ['queued', 'running', 'pausing', 'paused', 'cancelling'].includes(stateOf(task))).length ?? 0
-  return <>
+  /**
+   * 结果摘要**不再重复「状态」**：那枚徽标在步骤轨上，是这一段的身份，不是结果的第二行。
+   * 这里只放「跑了多少、什么时候跑的」—— 一个问题一个答案。
+   */
+  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 headline = runningTask
+    ? `正在运行「${PIPELINE_STAGE_LABEL[runningTask.stage]}」${runningTask.total > 0 ? ` · ${runningTask.done}/${runningTask.total}` : ''}${runningTask.failed ? ` · 失败 ${runningTask.failed}` : ''}。暂停与停止在当前文档处理完后生效。`
+    : history
+      ? '当前没有运行中的任务。选好处理范围后按阶段运行；未变化的结果会自动复用。'
+      : '正在读取这个库的处理状态…'
+  return <div className="extractTasksPage">
     <div className="extractTasksHead">
-      <div>
-        <h2>抽取任务</h2>
-        <p>{kbName || kb} · {activeCount > 0 ? `${activeCount} 项未结束` : '当前没有进行中的任务'}</p>
+      <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>
       </div>
-      <Button size="sm" variant="outline" disabled={refreshing} onClick={() => {
-        setRefreshing(true)
-        void loadTasks(kb).then(setTasks).catch(cause => setFailure(cause instanceof Error ? cause.message : String(cause))).finally(() => setRefreshing(false))
-      }}><RefreshCw size={13} className={refreshing ? 'extractTaskSpin' : undefined} />刷新</Button>
     </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>
 
-    <p className="extractTasksNote">暂停会在当前文档或阶段处理完成后生效。停止不会回滚已写入的内容。</p>
-    {failure && <p className="page-notice" role="alert">读取任务失败：{failure}</p>}
-    {tasks === null
-      ? <p className="page-loading" role="status">正在读取任务…</p>
-      : tasks.length === 0
-        ? <div className="extractTasksEmpty"><ListOrdered size={17} /><span>还没有编译任务。导入文档或重新编译后，任务会显示在这里。</span></div>
-        : <div className="extractTaskList">
-          {tasks.map(task => <TaskRow key={task.runId} task={task} kb={kb} onChange={replaceTask} />)}
-        </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>
+          })}
+        </div>
+
+        <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>
+
+          {/* `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>
+  </div>
 }