dsh-data-domain-knowledge 0.1.0-alpha.1

package/src/client/convert/ConvertPanel.tsx

@@ -0,0 +1,594 @@
+import { useCallback, useEffect, useMemo, useState, type ChangeEvent, type ReactNode } from 'react'
+import {
+  AlertCircle, Check, Copy, Download, ExternalLink, FileText, FileUp, Inbox,
+  Package, RefreshCw, RotateCcw, ScanEye, X,
+} from '@tita-data-agent/ui/icons'
+import type { LucideIcon } from '@tita-data-agent/ui/icons'
+import { Badge, Button, Input, Label, SelectMenu, Switch, Tabs, TabsContent, TabsList, TabsTrigger, cn } from '@tita-data-agent/ui/components'
+import { styles } from './styles.ts'
+import '@tita-data-agent/ui/styles.css'
+// The panel ships its own `tdc-*` stylesheet; without this import the class names
+// resolve to nothing and the panel renders unstyled.
+import './styles.css'
+
+/**
+ * The conversion kernel is mounted by the knowledge plugin at `/convert`.
+ * Frozen contract — see spec/VERSION-MATRIX.md.
+ */
+const BASE = '/convert'
+
+interface TaskSummary {
+  id: string
+  state: 'queued' | 'running' | 'succeeded' | 'failed' | 'cancelled'
+  inputKind: string
+  title: string
+  sourceFormat: string
+  parser?: string
+  progress: number | null
+  stage: string
+  message?: string
+  error?: { code: string; message: string; suggestion?: string } | null
+  warnings: Array<{ code: string; message: string }>
+  assetCount: number
+  wordCount: number
+  contentHash?: string
+  externalId?: string
+  deliveryDir?: string
+  sourceTypeCandidates: string[]
+}
+
+interface AdapterCapability {
+  id: string
+  description: string
+  kinds: string[]
+  extensions: string[]
+  availability: { available: boolean; reason?: string; suggestion?: string }
+}
+
+interface CapabilityReport {
+  adapters: AdapterCapability[]
+  supportedExtensions: string[]
+  runtime: Record<string, { available: boolean; version?: string; error?: string }>
+  rootDir: string
+  outDir: string
+  knowledgeRoot: string
+  knowledgeRootSource: string
+  ingestEnabled: boolean
+}
+
+/** Plugin-level facts served by `/convert/api/plugin` (the kernel cannot know them). */
+interface PluginInfo {
+  rootDir: string
+  outDir: string
+  mountPath: string
+  knowledgeRoot: string
+  knowledgeRootSource: string
+  knowledgeBaseUrl: string
+  ingestEnabled: boolean
+}
+
+interface IngestResult {
+  taskId: string
+  sourceId?: string
+  sourcePath?: string
+  knowledgeRoot: string
+  externalId: string
+  contentHash: string
+  sourceFormat: string
+  parser: string
+  sourceType: string
+  sourceTypeCandidates: string[]
+  assets: Array<{ rel: string; target: string; bytes: number }>
+  cardHints: { entityTypes: string[]; sourceRefs: string[]; title: string; summary: string; contentWithImages: string; imageRefs: string[] }
+  notes: string[]
+  knowledgeRootSource?: string
+}
+
+interface Envelope<T> { ok?: boolean; data?: T; warnings?: string[]; error?: { code?: string; message?: string; suggestion?: string } }
+
+async function requestJson<T>(url: string, init?: RequestInit): Promise<Envelope<T>> {
+  const response = await fetch(url, init)
+  const text = await response.text()
+  if (!text.trim()) throw new Error(`服务端返回空响应（HTTP ${response.status}）`)
+  let payload: Envelope<T>
+  try {
+    payload = JSON.parse(text) as Envelope<T>
+  } catch {
+    throw new Error(`服务端返回了无效响应（HTTP ${response.status}）`)
+  }
+  if (!response.ok || payload.ok === false) {
+    const error = new Error([payload.error?.code, payload.error?.message].filter(Boolean).join(' · ') || `请求失败（${response.status}）`)
+    ;(error as Error & { suggestion?: string }).suggestion = payload.error?.suggestion
+    throw error
+  }
+  return payload
+}
+
+function describe(cause: unknown): string {
+  if (!(cause instanceof Error)) return String(cause)
+  const suggestion = (cause as Error & { suggestion?: string }).suggestion
+  return suggestion ? `${cause.message} — 建议：${suggestion}` : cause.message
+}
+
+const STATE_META: Record<TaskSummary['state'], { label: string; tone: 'neutral' | 'success' | 'warning' | 'blue' }> = {
+  queued: { label: '排队', tone: 'warning' },
+  running: { label: '进行中', tone: 'blue' },
+  succeeded: { label: '已交付', tone: 'success' },
+  failed: { label: '失败', tone: 'neutral' },
+  cancelled: { label: '已取消', tone: 'neutral' },
+}
+
+const KIND_META: Record<string, { label: string; icon: LucideIcon }> = {
+  file: { label: '文件', icon: FileText },
+  text: { label: '文本', icon: FileUp },
+}
+
+function formatBytes(bytes: number | undefined): string {
+  if (!bytes) return '0 B'
+  const units = ['B', 'KB', 'MB', 'GB']
+  let value = bytes
+  let unit = 0
+  while (value >= 1024 && unit < units.length - 1) { value /= 1024; unit += 1 }
+  return `${value.toFixed(value >= 10 || unit === 0 ? 0 : 1)} ${units[unit]}`
+}
+
+export interface ConvertPanelProps {
+  visible: boolean
+  /** Settings scope handed in by the client shell; the panel reads live values from the plugin API. */
+  settings?: { convert?: unknown }
+}
+
+export function ConvertPanel({ visible }: ConvertPanelProps): ReactNode {
+  const [view, setView] = useState('tasks')
+  const [tasks, setTasks] = useState<TaskSummary[]>([])
+  const [capabilities, setCapabilities] = useState<CapabilityReport | null>(null)
+  const [selected, setSelected] = useState<TaskSummary | null>(null)
+  const [markdown, setMarkdown] = useState('')
+  const [ingest, setIngest] = useState<IngestResult | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const [notice, setNotice] = useState<string | null>(null)
+  const [busy, setBusy] = useState(false)
+  const [form, setForm] = useState({ kind: 'upload', path: '', text: '', title: '', sourceType: '', adapter: '' })
+  const [uploadFile, setUploadFile] = useState<File | null>(null)
+  const [ingestForm, setIngestForm] = useState({ sourceType: '', title: '', planOnly: false })
+
+  const load = useCallback(async () => {
+    try {
+      const [tasksPayload, capabilityPayload, pluginPayload] = await Promise.all([
+        requestJson<{ tasks: TaskSummary[] }>(`${BASE}/api/tasks`),
+        requestJson<CapabilityReport>(`${BASE}/api/capabilities`),
+        requestJson<PluginInfo>(`${BASE}/api/plugin`),
+      ])
+      setTasks(tasksPayload.data?.tasks ?? [])
+      setCapabilities(capabilityPayload.data ? { ...capabilityPayload.data, ...pluginPayload.data } as CapabilityReport : null)
+      setError(null)
+    } catch (cause) {
+      setError(describe(cause))
+    }
+  }, [])
+
+  useEffect(() => { void load() }, [load, visible])
+
+  useEffect(() => {
+    if (!visible) return undefined
+    const timer = setInterval(() => { void load() }, 4000)
+    return () => clearInterval(timer)
+  }, [load, visible])
+
+  const selectedId = selected?.id ?? ''
+
+  const openTask = useCallback(async (task: TaskSummary) => {
+    setSelected(task)
+    setIngest(null)
+    setMarkdown('')
+    setIngestForm({ sourceType: '', title: task.title ?? '', planOnly: false })
+    try {
+      const detail = await requestJson<TaskSummary>(`${BASE}/api/tasks/${encodeURIComponent(task.id)}`)
+      if (detail.data) setSelected(detail.data)
+      if (task.state === 'succeeded') {
+        const body = await fetch(`${BASE}/api/tasks/${encodeURIComponent(task.id)}/markdown`)
+        if (body.ok) setMarkdown(await body.text())
+      }
+    } catch (cause) {
+      setError(describe(cause))
+    }
+  }, [])
+
+  const submit = useCallback(async () => {
+    setBusy(true)
+    setError(null)
+    setNotice(null)
+    try {
+      const common = {
+        title: form.title.trim() || undefined,
+        source_type: form.sourceType.trim() || undefined,
+        adapter: form.adapter.trim() || undefined,
+      }
+      let payload: Envelope<{ id?: string }>
+      if (form.kind === 'upload') {
+        // The kernel owns multipart parsing, staging and cleanup, so the browser
+        // hands it the bytes directly instead of a path only the server can see.
+        if (!uploadFile) throw new Error('请先选择一个文件。')
+        const body = new FormData()
+        body.append('file', uploadFile, uploadFile.name)
+        if (common.title) body.append('title', common.title)
+        if (common.source_type) body.append('source_type', common.source_type)
+        if (common.adapter) body.append('adapter', common.adapter)
+        payload = await requestJson(`${BASE}/api/tasks`, { method: 'POST', body })
+      } else if (form.kind === 'file') {
+        if (!form.path.trim()) throw new Error('本机路径转换需要一个绝对路径（供 Agent 或本机脚本使用）。')
+        payload = await requestJson(`${BASE}/api/tasks`, {
+          method: 'POST',
+          headers: { 'content-type': 'application/json' },
+          body: JSON.stringify({ kind: 'file', local_path: form.path.trim(), ...common }),
+        })
+      } else {
+        payload = await requestJson(`${BASE}/api/tasks`, {
+          method: 'POST',
+          headers: { 'content-type': 'application/json' },
+          body: JSON.stringify({ kind: 'text', text: form.text, ...common }),
+        })
+      }
+      setNotice(`任务已受理：${payload.data?.id ?? ''}`)
+      setUploadFile(null)
+      setView('tasks')
+      await load()
+    } catch (cause) {
+      setError(describe(cause))
+    } finally {
+      setBusy(false)
+    }
+  }, [form, load, uploadFile])
+
+  const act = useCallback(async (taskId: string, action: 'cancel' | 'retry') => {
+    try {
+      await requestJson(`${BASE}/api/tasks/${encodeURIComponent(taskId)}/${action}`, { method: 'POST' })
+      await load()
+    } catch (cause) {
+      setError(describe(cause))
+    }
+  }, [load])
+
+  const runIngest = useCallback(async () => {
+    if (!selectedId) return
+    setBusy(true)
+    setError(null)
+    setNotice(null)
+    try {
+      const result = await requestJson<IngestResult>(`${BASE}/api/ingest`, {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({
+          task_id: selectedId,
+          source_type: ingestForm.sourceType.trim() || undefined,
+          title: ingestForm.title.trim() || undefined,
+          plan_only: ingestForm.planOnly,
+        }),
+      })
+      setIngest(result.data ?? null)
+      setNotice(ingestForm.planOnly ? '已完成入库预演（未写入）' : `已写入知识库：${result.data?.sourceId ?? ''}`)
+    } catch (cause) {
+      setError(describe(cause))
+    } finally {
+      setBusy(false)
+    }
+  }, [ingestForm, selectedId])
+
+  const copy = useCallback((value: string) => {
+    void navigator.clipboard?.writeText(value).then(() => setNotice('已复制到剪贴板')).catch(() => setError('复制失败'))
+  }, [])
+
+  const cardPrompt = useMemo(() => {
+    if (!ingest) return ''
+    const hints = ingest.cardHints
+    return [
+      `请为刚录入的来源 ${ingest.sourceId ?? ''} 写一张 wiki 卡片，让图片进入多模态召回：`,
+      `- entity_type 建议：${hints.entityTypes.join(' / ')}（当前知识 schema 只接受这些）`,
+      `- source_refs：${hints.sourceRefs.join(', ')}`,
+      `- 标题：${hints.title}`,
+      `- 正文必须使用下面这些图片相对路径（相对 02_wiki/<entity_type>/ 解析）：`,
+      ...hints.imageRefs.map(ref => `  - ${ref}`),
+      '调用 write_knowledge_card 时把图片引用原样写进 content。',
+    ].join('\n')
+  }, [ingest])
+
+  const runningCount = tasks.filter(task => task.state === 'running' || task.state === 'queued').length
+
+  return (
+    <div className={styles.panel}>
+      <div className={styles.header}>
+        <div className={styles.headerCopy}>
+          <h3 className={styles.headerTitle}>格式转换</h3>
+          <p className={styles.headerSubtitle}>
+            PDF / Office / 链接 / 视频 → 知识就绪 Markdown + 本地图片
+          </p>
+        </div>
+        <div className={styles.headerActions}>
+          <a className="tita-uiButton" href={`${BASE}/`} target="_blank" rel="noreferrer" title="打开内核控制台（Vue3）">
+            <ExternalLink size={14} />
+          </a>
+          <Button variant="ghost" size="sm" onClick={() => void load()} title="刷新">
+            <RefreshCw size={14} />
+          </Button>
+        </div>
+      </div>
+
+      <div className={styles.body}>
+        {error && <p className={cn(styles.small, styles.error)}><AlertCircle size={12} /> {error}</p>}
+        {notice && <p className={cn(styles.small, styles.notice)}><Check size={12} /> {notice}</p>}
+
+        <Tabs value={view} onValueChange={setView}>
+          <TabsList>
+            <TabsTrigger value="tasks">任务{runningCount > 0 ? ` (${runningCount})` : ''}</TabsTrigger>
+            <TabsTrigger value="new">新转换</TabsTrigger>
+            <TabsTrigger value="ingest">知识入库</TabsTrigger>
+            <TabsTrigger value="caps">能力</TabsTrigger>
+          </TabsList>
+
+          {/* ---------------------------------------------------------- tasks */}
+          <TabsContent value="tasks">
+            {tasks.length === 0 && <p className={styles.empty}>还没有转换任务。</p>}
+            <div className={styles.taskList}>
+              {tasks.map(task => {
+                const meta = STATE_META[task.state]
+                const kind = KIND_META[task.inputKind] ?? KIND_META.file!
+                const KindIcon = kind.icon
+                return (
+                  <div key={task.id} className={cn(styles.task, selectedId === task.id && styles.taskActive)}>
+                    <div className={styles.taskMain}>
+                      <div className={styles.taskTitle}>
+                        <KindIcon size={12} /> {task.title}
+                      </div>
+                      <div className={styles.taskMeta}>
+                        {task.parser ?? task.inputKind} · {task.assetCount} 图 / {task.wordCount} 字 · {task.stage}
+                        {task.message ? ` · ${task.message}` : ''}
+                      </div>
+                      {task.state === 'running' && (
+                        <div className={styles.progress}>
+                          <div className={styles.progressBar} style={{ width: task.progress === null ? '100%' : `${Math.round(task.progress * 100)}%` }} />
+                        </div>
+                      )}
+                      {task.error && (
+                        <div className={cn(styles.taskMeta, styles.error)}>
+                          {task.error.code} · {task.error.message}
+                          {task.error.suggestion ? ` — ${task.error.suggestion}` : ''}
+                        </div>
+                      )}
+                    </div>
+                    <div className={styles.taskSide}>
+                      <Badge tone={meta.tone}>{meta.label}</Badge>
+                      <div className={styles.taskActions}>
+                        <Button variant="ghost" size="sm" title="详情" onClick={() => void openTask(task)}><ScanEye size={13} /></Button>
+                        {task.state === 'running' || task.state === 'queued'
+                          ? <Button variant="ghost" size="sm" title="取消" onClick={() => void act(task.id, 'cancel')}><X size={13} /></Button>
+                          : <Button variant="ghost" size="sm" title="重试" onClick={() => void act(task.id, 'retry')}><RotateCcw size={13} /></Button>}
+                        {task.state === 'succeeded' && (
+                          <a className="tita-uiButton" href={`${BASE}/api/tasks/${encodeURIComponent(task.id)}/files/index.md`} target="_blank" rel="noreferrer" title="打开 index.md">
+                            <Download size={13} />
+                          </a>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                )
+              })}
+            </div>
+          </TabsContent>
+
+          {/* ------------------------------------------------------------ new */}
+          <TabsContent value="new">
+            <div className={styles.field}>
+              <span className={styles.fieldLabel}>输入类型</span>
+              <SelectMenu
+                value={form.kind}
+                onValueChange={next => setForm({ ...form, kind: next })}
+                aria-label="输入类型"
+                options={[
+                  { value: 'upload', label: '上传文件' },
+                  { value: 'file', label: '文档（本机路径）' },
+                  { value: 'text', label: '内联文本' },
+                ]}
+              />
+            </div>
+
+            {form.kind === 'upload' && (
+              <label className={styles.field}>
+                <span className={styles.fieldLabel}>文件</span>
+                <input
+                  className={styles.fileInput}
+                  type="file"
+                  accept={(capabilities?.supportedExtensions ?? ['.docx', '.pdf', '.pptx', '.xlsx', '.csv', '.epub', '.rtf']).join(',')}
+                  onChange={(event: ChangeEvent<HTMLInputElement>) => setUploadFile(event.target.files?.[0] ?? null)}
+                />
+                <span className={styles.fieldHint}>
+                  支持 {(capabilities?.supportedExtensions ?? []).map(item => item.replace('.', '')).join(' ')}；文件由内核直接接收，不需要先放到本机某个路径。
+                </span>
+                {uploadFile && <span className={styles.fieldHint}>已选择：{uploadFile.name}（{formatBytes(uploadFile.size)}）</span>}
+              </label>
+            )}
+
+            {form.kind === 'file' && (
+              <label className={styles.field}>
+                <span className={styles.fieldLabel}>本机绝对路径</span>
+                <Input value={form.path} spellCheck={false} placeholder="/Users/you/Documents/spec.docx" onChange={(event: ChangeEvent<HTMLInputElement>) => setForm({ ...form, path: event.target.value })} />
+                <span className={styles.fieldHint}>
+                  给 Agent 或本机脚本用的入口：文件必须已经在运行 DSH 的这台机器上。
+                </span>
+              </label>
+            )}
+
+            {form.kind === 'text' && (
+              <label className={styles.field}>
+                <span className={styles.fieldLabel}>文本</span>
+                <textarea className={styles.pre} rows={8} value={form.text} onChange={(event: ChangeEvent<HTMLTextAreaElement>) => setForm({ ...form, text: event.target.value })} />
+              </label>
+            )}
+
+            <div className={styles.grid2}>
+              <label className={styles.field}>
+                <span className={styles.fieldLabel}>标题（可选）</span>
+                <Input value={form.title} onChange={(event: ChangeEvent<HTMLInputElement>) => setForm({ ...form, title: event.target.value })} />
+              </label>
+              <label className={styles.field}>
+                <span className={styles.fieldLabel}>source_type（可选）</span>
+                <Input value={form.sourceType} placeholder="article / document" onChange={(event: ChangeEvent<HTMLInputElement>) => setForm({ ...form, sourceType: event.target.value })} />
+              </label>
+            </div>
+
+            <div className={styles.field}>
+              <span className={styles.fieldLabel}>adapter（可选）</span>
+              <SelectMenu
+                value={form.adapter}
+                onValueChange={next => setForm({ ...form, adapter: next })}
+                aria-label="adapter（可选）"
+                options={[
+                  { value: '', label: '自动选择' },
+                  ...(capabilities?.adapters ?? []).map(adapter => ({
+                    value: adapter.id,
+                    label: `${adapter.id}${adapter.availability.available ? '' : '（不可用）'}`,
+                  })),
+                ]}
+              />
+            </div>
+
+            <Button variant="default" disabled={busy} onClick={() => void submit()}>
+              <FileUp size={14} /> {busy ? '提交中…' : '开始转换'}
+            </Button>
+          </TabsContent>
+
+          {/* --------------------------------------------------------- ingest */}
+          <TabsContent value="ingest">
+            {!selectedId && <p className={styles.empty}>先在「任务」里选择一个已交付的任务。</p>}
+            {selectedId && (
+              <>
+                <dl className={styles.kv}>
+                  <div><dt>任务</dt><dd><span className={styles.code}>{selectedId}</span></dd></div>
+                  <div><dt>标题</dt><dd>{selected?.title}</dd></div>
+                  <div><dt>交付目录</dt><dd><span className={styles.code}>{selected?.deliveryDir}</span></dd></div>
+                  <div><dt>content_hash</dt><dd><span className={styles.code}>{selected?.contentHash}</span></dd></div>
+                  <div><dt>source_type 候选</dt><dd>{(selected?.sourceTypeCandidates ?? []).join(' / ') || '—'}</dd></div>
+                  <div><dt>知识库根目录</dt><dd><span className={styles.code}>{capabilities?.knowledgeRoot}</span> <span className={styles.muted}>({capabilities?.knowledgeRootSource})</span></dd></div>
+                </dl>
+
+                <div className={styles.grid2}>
+                  <label className={styles.field}>
+                    <span className={styles.fieldLabel}>source_type</span>
+                    <Input value={ingestForm.sourceType} placeholder="document" onChange={(event: ChangeEvent<HTMLInputElement>) => setIngestForm({ ...ingestForm, sourceType: event.target.value })} />
+                    <span className={styles.fieldHint}>0013 的分类注册表落地前，知识库只接受内置分类；填错会被它拒绝并返回可选值。</span>
+                  </label>
+                  <label className={styles.field}>
+                    <span className={styles.fieldLabel}>标题覆盖（可选）</span>
+                    <Input value={ingestForm.title} onChange={(event: ChangeEvent<HTMLInputElement>) => setIngestForm({ ...ingestForm, title: event.target.value })} />
+                  </label>
+                </div>
+
+                <div className={cn(styles.row, styles.section)}>
+                  <Switch checked={ingestForm.planOnly} onCheckedChange={checked => setIngestForm({ ...ingestForm, planOnly: checked })} />
+                  <Label>仅预演（plan_only，不写入）</Label>
+                </div>
+
+                <Button variant="default" disabled={busy || !capabilities?.ingestEnabled} onClick={() => void runIngest()}>
+                  <Package size={14} /> {ingestForm.planOnly ? '预演入库' : '写入知识库'}
+                </Button>
+                {capabilities && !capabilities.ingestEnabled && (
+                  <p className={styles.fieldHint}>插件设置里关闭了「允许一键入库」。</p>
+                )}
+
+                {ingest && (
+                  <div className={styles.section}>
+                    <h4 className={styles.sectionTitle}>入库结果</h4>
+                    <dl className={styles.kv}>
+                      <div><dt>source_id</dt><dd><span className={styles.code}>{ingest.sourceId ?? '（预演）'}</span></dd></div>
+                      <div><dt>来源路径</dt><dd><span className={styles.code}>{ingest.sourcePath ?? '—'}</span></dd></div>
+                      <div><dt>图片资产</dt><dd>{ingest.assets.length} 个</dd></div>
+                    </dl>
+
+                    {ingest.assets.length > 0 && (
+                      <div className={styles.assetGrid}>
+                        {ingest.assets.map(asset => (
+                          <figure key={asset.rel} className={styles.assetCard}>
+                            <img src={`${BASE}/api/tasks/${encodeURIComponent(selectedId)}/files/${asset.rel}`} alt={asset.rel} loading="lazy" />
+                            <figcaption>{formatBytes(asset.bytes)}</figcaption>
+                          </figure>
+                        ))}
+                      </div>
+                    )}
+
+                    {ingest.notes.length > 0 && (
+                      <ul className={cn(styles.small, styles.muted)}>
+                        {ingest.notes.map(note => <li key={note}>{note}</li>)}
+                      </ul>
+                    )}
+
+                    <h4 className={styles.sectionTitle}>给 Agent 的卡片提示</h4>
+                    <pre className={styles.pre}>{cardPrompt}</pre>
+                    <div className={cn(styles.row, styles.section)}>
+                      <Button variant="ghost" size="sm" onClick={() => copy(cardPrompt)}><Copy size={13} /> 复制</Button>
+                      <Button variant="ghost" size="sm" onClick={() => copy(ingest.cardHints.contentWithImages)}><Copy size={13} /> 复制卡片正文</Button>
+                    </div>
+                    <p className={styles.fieldHint}>
+                      图片必须在 wiki 卡片里被引用才会进入多模态向量（编译段每个单元只取第一张图），所以这一步不能省。
+                    </p>
+                  </div>
+                )}
+              </>
+            )}
+          </TabsContent>
+
+          {/* ----------------------------------------------------------- caps */}
+          <TabsContent value="caps">
+            {!capabilities && <p className={styles.empty}>能力信息不可用。</p>}
+            {capabilities && (
+              <>
+                <ul className={styles.capList}>
+                  {capabilities.adapters.map(adapter => (
+                    <li key={adapter.id} className={styles.capItem}>
+                      <span className={adapter.availability.available ? styles.dotOn : styles.dotOff} />
+                      <div>
+                        <strong>{adapter.id}</strong>
+                        <div className={styles.taskMeta}>{adapter.description}</div>
+                        {!adapter.availability.available && adapter.availability.reason && (
+                          <div className={cn(styles.taskMeta, styles.error)}>{adapter.availability.reason}</div>
+                        )}
+                        {adapter.availability.suggestion && <div className={styles.taskMeta}>{adapter.availability.suggestion}</div>}
+                      </div>
+                    </li>
+                  ))}
+                </ul>
+
+                <h4 className={styles.sectionTitle}>支持的输入格式</h4>
+                <p className={styles.taskMeta}>{(capabilities.supportedExtensions ?? []).join(' ')}</p>
+
+                <h4 className={styles.sectionTitle}>引擎</h4>
+                <ul className={styles.capList}>
+                  {Object.entries(capabilities.runtime).map(([name, probe]) => (
+                    <li key={name} className={styles.capItem}>
+                      <span className={probe.available ? styles.dotOn : styles.dotOff} />
+                      <div>
+                        <strong>{name}</strong>
+                        <div className={styles.taskMeta}>{probe.available ? probe.version : probe.error}</div>
+                      </div>
+                    </li>
+                  ))}
+                </ul>
+
+                <h4 className={styles.sectionTitle}>路径</h4>
+                <dl className={styles.kv}>
+                  <div><dt>交付根目录</dt><dd><span className={styles.code}>{capabilities.outDir}</span></dd></div>
+                  <div><dt>知识库根目录</dt><dd><span className={styles.code}>{capabilities.knowledgeRoot}</span></dd></div>
+                </dl>
+              </>
+            )}
+          </TabsContent>
+        </Tabs>
+
+        {selected && markdown && (
+          <div className={styles.section}>
+            <h4 className={styles.sectionTitle}><Inbox size={12} /> 交付预览 · {selected.title}</h4>
+            <pre className={styles.pre}>{markdown.slice(0, 6000)}</pre>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}