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

package/src/client/CompileDialogs.tsx

@@ -49,6 +49,8 @@ export interface CompileProgressView {
    * 那里才同时看得到两种类型。
    */
   runId: string
+  state?: 'queued' | 'running' | 'pausing' | 'paused' | 'cancelling' | 'succeeded' | 'failed' | 'cancelled'
+  queuedAt?: string
   only: string
   startedAt: string
   finishedAt?: string
@@ -82,6 +84,26 @@ export const COMPILE_STEP_TITLE: Record<string, string> = {
   build: '构建（向量 + 图谱）',
 }
 
+/** 编译弹窗与任务页共用同一份步骤展示。 */
+export function CompileStepList({ steps }: { steps: CompileStepView[] }): ReactNode {
+  return <ul className={styles.compileSteps}>
+    {steps.map((step, index) => <li key={step.id} className={cn(styles.compileStep, step.state === 'done' && styles.compileStepDone)}>
+      <span className={cn(styles.compileDot, step.state === 'done' && styles.compileDotDone, step.state === 'running' && styles.compileDotRunning)} aria-hidden="true">
+        {step.state === 'done' ? <Check size={12} /> : step.state === 'running' ? <RefreshCw size={11} className={styles.compileSpin} /> : index + 1}
+      </span>
+      <span className={styles.compileStepBody}>
+        <span className={styles.compileStepTitle}>step{index + 1} · {COMPILE_STEP_TITLE[step.id] ?? step.id}</span>
+        <span className={styles.compileFacts}>
+          {step.facts.map((fact, at) => <span key={at}>{fact}</span>)}
+        </span>
+      </span>
+      <span className={styles.compileState}>
+        {step.state === 'done' ? '已完成' : step.state === 'running' ? '进行中' : '待执行'}
+      </span>
+    </li>)}
+  </ul>
+}
+
 /** `00:42` / `01:12`。超过一小时也只是多两位，不做「1 小时 2 分」。 */
 function elapsed(from: string, to: number): string {
   const ms = to - new Date(from).getTime()
@@ -99,8 +121,16 @@ function elapsed(from: string, to: number): string {
  * 条形只是让人一眼看出「大概到哪了」，精确的账在文字里。没有这一行文字，那条按阶段均分
  * 的进度条就会被当成精确值，而在「抽取」这一段特别慢的库里它会显得长期不动。
  */
-function overallRatio(progress: CompileProgressView): number {
-  if (progress.finishedAt !== undefined) return 1
+/**
+ * 编译进度 → 0..1 的比例。**这是唯一一份**（0070）。
+ *
+ * 曾经有两个副本，而它们对「已结束」的处理不一致：一个只要 `finishedAt` 存在就返回
+ * 满格（把 failed / cancelled 也画成「完成」），另一个排除了这两种状态。同一个失败在
+ * 导入对话框里是满格主色、在编译对话框里是红色未完成 —— 两屏说两件事。
+ * 所以导出它，让两个消费者用同一份判断。
+ */
+export function compileRatio(progress: CompileProgressView): number {
+  if (progress.finishedAt !== undefined && progress.state !== 'cancelled' && progress.state !== 'failed') return 1
   const total = progress.steps.length || 1
   const done = progress.steps.filter(step => step.state === 'done').length
   const running = progress.steps.find(step => step.state === 'running')
@@ -134,7 +164,7 @@ export function CompileProgressDialog({ open, onOpenChange, progress, mine, queu
    * 不是「从这个框出现开始算」。跑完之后停表，不再继续跳。
    */
   const [now, setNow] = useState(() => Date.now())
-  const running = progress !== null && progress.finishedAt === undefined
+  const running = progress !== null && progress.finishedAt === undefined && progress.state !== 'paused'
   useEffect(() => {
     if (!open || !running) return undefined
     const timer = window.setInterval(() => setNow(Date.now()), 1000)
@@ -143,7 +173,10 @@ export function CompileProgressDialog({ open, onOpenChange, progress, mine, queu
 
   if (!open) return null
   const done = progress?.finishedAt !== undefined
-  const ratio = progress === null ? 0 : overallRatio(progress)
+  const completed = done && progress?.state !== 'cancelled' && progress?.state !== 'failed'
+  const stopped = progress?.state === 'cancelled'
+  const failed = progress?.state === 'failed'
+  const ratio = progress === null ? 0 : compileRatio(progress)
   const doneSteps = progress?.steps.filter(step => step.state === 'done').length ?? 0
   const finishedText = progress?.outcome
     ?? (progress === null ? (queued === true ? '排在前面那一次编译之后，轮到它就会开始。' : '正在建立编译任务…') : '编译结束。')
@@ -152,7 +185,7 @@ export function CompileProgressDialog({ open, onOpenChange, progress, mine, queu
     <DialogContent className={styles.compileDialog}>
       <DialogHeader>
         <div className={styles.compileHead}>
-          <DialogTitle>{done ? '编译完成' : '全量重新编译'}</DialogTitle>
+        <DialogTitle>{stopped ? '任务已停止' : failed ? '编译失败' : done ? '编译完成' : '全量重新编译'}</DialogTitle>
           {/* 钟与控制点同一行：用时是这一屏唯一的「长了多久」，它不该另占一行。 */}
           <span className={styles.compileClock}>
             <Clock3 size={13} aria-hidden="true" />
@@ -169,38 +202,20 @@ export function CompileProgressDialog({ open, onOpenChange, progress, mine, queu
 
       <div className={styles.compileBar} role="progressbar" aria-valuemin={0} aria-valuemax={100}
         aria-valuenow={Math.round(ratio * 100)} aria-label="编译总进度">
-        <span style={{ inlineSize: `${Math.round(ratio * 100)}%` }} className={done ? styles.compileBarDone : undefined} />
+        <span style={{ inlineSize: `${Math.round(ratio * 100)}%` }} className={completed ? styles.compileBarDone : undefined} />
       </div>
       <p className={styles.compileRatio}>
         已完成 {doneSteps} / {progress?.steps.length ?? 5} 段
         {progress !== null && progress.sourcesTotal > 0 && !done && <> · 读取文档 {progress.sourcesDone}/{progress.sourcesTotal}</>}
       </p>
 
-      <ul className={styles.compileSteps}>
-        {(progress?.steps ?? []).map((step, index) => <li key={step.id} className={cn(styles.compileStep, step.state === 'done' && styles.compileStepDone)}>
-          <span className={cn(styles.compileDot, step.state === 'done' && styles.compileDotDone, step.state === 'running' && styles.compileDotRunning)} aria-hidden="true">
-            {step.state === 'done' ? <Check size={12} /> : step.state === 'running' ? <RefreshCw size={11} className={styles.compileSpin} /> : index + 1}
-          </span>
-          <span className={styles.compileStepBody}>
-            <span className={styles.compileStepTitle}>
-            step{index + 1} · {COMPILE_STEP_TITLE[step.id] ?? step.id}
-            </span>
-            {/* 子事实一行一条：它们回答的是「这一段现在是多少」，是这一步唯一的账。
-                逐条显示而不是连成一句 —— 连成一句之后，窄栏下会被截断，而截断的正好是末尾
-                那个最该看的数。 */}
-            <span className={styles.compileFacts}>
-              {step.facts.map((fact, at) => <span key={at}>{fact}</span>)}
-            </span>
-          </span>
-          <span className={styles.compileState}>
-            {step.state === 'done' ? '已完成' : step.state === 'running' ? '进行中' : '待执行'}
-          </span>
-        </li>)}
-        {progress === null && <li className={styles.compileStep}>
+      <CompileStepList steps={progress?.steps ?? []} />
+      {progress === null && <ul className={styles.compileSteps}>
+        <li className={styles.compileStep}>
           <span className={cn(styles.compileDot, styles.compileDotRunning)} aria-hidden="true"><RefreshCw size={11} className={styles.compileSpin} /></span>
           <span className={styles.compileStepBody}><span className={styles.compileStepTitle}>正在建立编译任务…</span></span>
-        </li>}
-      </ul>
+        </li>
+      </ul>}
 
       {done && <p className={cn(styles.compileOutcome, progress?.failed === true && styles.compileOutcomeBad)}>
         {progress?.failed === true ? '编译失败：' : ''}{finishedText}

package/src/client/DeleteDocumentDialog.tsx

@@ -31,7 +31,7 @@
  */
 
 import type { ReactNode } from 'react'
-import { FileText, Layers3, LoaderCircle, Quote, TriangleAlert, Trash2 } from '@tita-agent/ui/icons'
+import { CircleDot, FileText, Layers3, LoaderCircle, Quote, TriangleAlert, Trash2 } from '@tita-agent/ui/icons'
 import { Button } from '@tita-agent/ui/components'
 import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@tita-agent/ui/overlays'
 import type { DocumentDeleteImpact } from './wiki-trial.ts'
@@ -86,8 +86,10 @@ export function DeleteDocumentDialog({
   const knowledgeKept = impact?.knowledge.items.filter(item => !item.exclusive).slice(0, ITEM_CAP) ?? []
   const cardsDoomed = impact?.cards.items.filter(item => item.exclusive).slice(0, ITEM_CAP) ?? []
   const cardsKept = impact?.cards.items.filter(item => !item.exclusive).slice(0, ITEM_CAP) ?? []
+  const eventsDoomed = impact?.events.items.filter(item => item.exclusive).slice(0, ITEM_CAP) ?? []
+  const eventsKept = impact?.events.items.filter(item => !item.exclusive).slice(0, ITEM_CAP) ?? []
   const nothing = impact !== null
-    && impact.knowledge.total === 0 && impact.cards.total === 0 && impact.extractionRuns === 0
+    && impact.knowledge.total === 0 && impact.cards.total === 0 && impact.events.total === 0 && impact.extractionRuns === 0
 
   return <Dialog open={open} onOpenChange={onOpenChange}>
     <DialogContent className={styles.delDialog}>
@@ -109,15 +111,15 @@ export function DeleteDocumentDialog({
           <TriangleAlert size={14} aria-hidden="true" />
           <div className={styles.delWarningBody}>
             <b>这项操作不可撤销</b>
-            <span>将删除原始文档，以及只依赖它的知识和 WikiCard。</span>
-            <small>重新编译也无法恢复已经删除的知识或卡片。</small>
+            <span>将删除原始文档，以及只依赖它的 Knowledge、Event 和 WikiCard。</span>
+            <small>重新编译也无法恢复已经删除的 Knowledge 或 Event。</small>
           </div>
         </div>
 
         <div className={styles.delScroll}>
         {nothing
           ? <p className={styles.delNothing}>
-            这份文档没有生成知识、WikiCard 或抽取记录。删除后只会移除原始文档。
+            这份文档没有生成 Knowledge、Event、WikiCard 或抽取记录。删除后只会移除原始文档。
           </p>
           : <>
             <section className={styles.delSection}>
@@ -145,6 +147,35 @@ export function DeleteDocumentDialog({
                 </>}
             </section>
 
+            <section className={styles.delSection}>
+              <h4 className={styles.delSectionHead}>
+                <span><CircleDot size={12} />Event</span>
+                <small className={styles.delSectionTotal}>共 {impact.events.total} 条</small>
+              </h4>
+              {impact.events.total === 0
+                ? <p className={styles.delEmpty}>没有 Event 引用这份文档。</p>
+                : <>
+                  <Tier tone="danger" count={impact.events.exclusive}
+                    unit="条" label="只由这份文档支撑" description="文档删除后 Event 一并删除"
+                    items={<ul className={styles.delItems}>
+                      {eventsDoomed.map(event => <li key={event.id}>
+                        {event.title}<span className={styles.delItemMeta}>{event.occurredAt ?? event.id}</span>
+                      </li>)}
+                      {impact.events.exclusive > eventsDoomed.length
+                        && <li className={styles.delMore}>另有 {impact.events.exclusive - eventsDoomed.length} 条同类。</li>}
+                    </ul>} />
+                  <Tier tone="keep" count={impact.events.shared}
+                    unit="条" label="还有其他来源" description="保留 Event，只移除这份来源记录"
+                    items={<ul className={styles.delItems}>
+                      {eventsKept.map(event => <li key={event.id}>
+                        {event.title}<span className={styles.delItemMeta}>{event.occurredAt ?? event.id}</span>
+                      </li>)}
+                      {impact.events.shared > eventsKept.length
+                        && <li className={styles.delMore}>另有 {impact.events.shared - eventsKept.length} 条同类。</li>}
+                    </ul>} />
+                </>}
+            </section>
+
             <section className={styles.delSection}>
               <h4 className={styles.delSectionHead}>
                 <span><Layers3 size={12} />WikiCard</span>

package/src/client/DirectoryPicker.tsx

@@ -89,16 +89,6 @@ export interface AgentLayoutView {
    */
   settingsError?: string
   pickerKind: string | null
-  /**
-   * preset 的**真源目录**（`<包根>/preset/tita-data-agent/`）。
-   *
-   * 提示词的唯一真源就在这个目录里的 `agent.cordis.yml`。0.1.7 起 DSH 那边 preset
-   * 不再是一个目录（它是组合里的一条声明行），所以「打开 preset 目录」打开的是
-   * 这个随插件分发的真源目录 —— 服务端算好给出来，客户端不拼路径。
-   */
-  presetDir?: string
-  /** 真源目录在不在。不在时界面如实说，而不是给一个弹空目录的按钮。 */
-  presetDirExists?: boolean
 }
 
 interface MigrationView {

package/src/client/EnvironmentSetup.tsx

@@ -0,0 +1,243 @@
+import { useCallback, useEffect, useRef, useState, type ReactNode } from 'react'
+import { Button, cn, Select, SelectContent, SelectItem, SelectLabel, SelectGroup, SelectTrigger, SelectValue } from '@tita-agent/ui/components'
+import { AlertCircle, Check, ChevronDown, Download, LoaderCircle, RefreshCw } from '@tita-agent/ui/icons'
+import { downloadBytes, formatBytes, type ModelSelection, type ModelOptionView } from '../environment/model-catalog.js'
+import type { EnvironmentCurrentModel, EnvironmentView } from '../environment/types.js'
+
+async function environmentRequest(init?: RequestInit): Promise<EnvironmentView> {
+  const response = await fetch(init?.method ? '/knowledge/environment/prepare' : '/knowledge/environment', { ...init, signal: init?.signal ?? AbortSignal.timeout(20_000) })
+  const text = await response.text()
+  let payload: { ok?: boolean; data?: EnvironmentView; error?: { message?: string } }
+  try { payload = JSON.parse(text) }
+  catch { throw new Error(`环境服务未返回有效数据（HTTP ${response.status}），请确认知识插件已加载。`) }
+  if (!response.ok || !payload.ok || !payload.data) throw new Error(payload.error?.message ?? `环境服务响应失败（${response.status}）`)
+  return payload.data
+}
+
+export function useKnowledgeEnvironment(visible: boolean, revision: number) {
+  const [view, setView] = useState<EnvironmentView>()
+  const [error, setError] = useState<string>()
+  const [submitting, setSubmitting] = useState(false)
+  const sequence = useRef(0)
+  const mounted = useRef(true)
+  const mutation = useRef(false)
+  const reading = useRef(false)
+  useEffect(() => { mounted.current = true; return () => { mounted.current = false; sequence.current++ } }, [])
+  const refresh = useCallback(async (): Promise<void> => {
+    if (mutation.current || reading.current) return
+    reading.current = true
+    const ticket = ++sequence.current
+    try {
+      const next = await environmentRequest()
+      if (mounted.current && ticket === sequence.current) { setView(next); setError(undefined) }
+    } catch (cause) {
+      if (mounted.current && ticket === sequence.current) setError(cause instanceof Error ? cause.message : String(cause))
+    } finally { reading.current = false }
+  }, [])
+  const busy = submitting || view?.job?.state === 'running' || view?.report.state === 'checking'
+  useEffect(() => {
+    if (!visible) return
+    void refresh()
+    const onFocus = (): void => { void refresh() }
+    window.addEventListener('focus', onFocus)
+    const timer = busy ? setInterval(() => { void refresh() }, 1500) : undefined
+    return () => { if (timer) clearInterval(timer); window.removeEventListener('focus', onFocus) }
+  }, [visible, revision, busy, refresh])
+  const prepare = useCallback(async (action: 'install' | 'check' | 'cancel', selection?: ModelSelection): Promise<void> => {
+    if (mutation.current) return
+    mutation.current = true
+    const ticket = ++sequence.current
+    setSubmitting(true)
+    try {
+      const next = await environmentRequest({ method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ action, ...(selection ? { selection } : {}) }) })
+      if (mounted.current && ticket === sequence.current) { setView(next); setError(undefined) }
+    } catch (cause) {
+      if (mounted.current && ticket === sequence.current) setError(cause instanceof Error ? cause.message : String(cause))
+    } finally {
+      mutation.current = false
+      if (mounted.current) setSubmitting(false)
+    }
+  }, [])
+  return { view, error, busy, prepare, refresh }
+}
+
+export type EnvironmentController = ReturnType<typeof useKnowledgeEnvironment>
+
+function ModelSelect({ id, label, value, options, currentModel, disabled, onChange }: {
+  id: string
+  label: string
+  value: string
+  options: ModelOptionView[]
+  currentModel: EnvironmentCurrentModel
+  disabled: boolean
+  onChange: (value: string) => void
+}): ReactNode {
+  const chosen = options.find(option => option.id === value)
+  return <div className="grid min-w-0 gap-1.5">
+    <label htmlFor={id} className="text-xs font-medium text-tita-ink">{label}</label>
+    <Select value={value} onValueChange={onChange} disabled={disabled}>
+      <SelectTrigger id={id} className="w-full"><SelectValue>{chosen?.label ?? '请选择模型'}</SelectValue></SelectTrigger>
+      <SelectContent position="popper" align="start" className="max-h-64">
+        <SelectGroup>
+          {!currentModel.id && <>
+            <SelectLabel>当前运行</SelectLabel>
+            <SelectItem value={`${id}-current`} disabled className="h-auto items-start py-1.5">
+              {currentModel.state === 'active' ? `当前使用：${currentModel.label}` : '当前未启用'}
+            </SelectItem>
+          </>}
+          <SelectLabel>模型选项 · 按资源占用从低到高</SelectLabel>
+          {options.map(option => <SelectItem key={option.id} value={option.id} className="h-auto items-start py-2">
+            <span className="flex min-w-0 flex-1 flex-col gap-0.5">
+              <span className="flex min-w-0 items-center gap-2">
+                <span className="min-w-0 flex-1 truncate font-medium">{option.label}</span>
+                {/* 下载状态：不知道就不标（服务端没给资源目录时 `installed` 是 undefined）。 */}
+                {option.installed === true && <span className="shrink-0 rounded-md border border-tita-tone-green-line bg-tita-tone-green-tint px-1.5 py-0.5 text-[10px] font-medium leading-none text-tita-tone-green">已下载</span>}
+                {option.installed === false && <span className="shrink-0 rounded-md border border-tita-line bg-tita-surface-muted px-1.5 py-0.5 text-[10px] font-medium leading-none text-tita-ink-muted">需下载</span>}
+                {option.id === currentModel.id && <span className="shrink-0 rounded-md border border-tita-line bg-tita-surface-muted px-1.5 py-0.5 text-[10px] font-medium leading-none text-tita-ink">当前使用</span>}
+              </span>
+              <span className="line-clamp-2 text-[11px] leading-snug text-tita-ink-muted">
+                {option.download}{option.dimension ? ` · ${option.dimension} 维` : ''} · {option.description}
+              </span>
+            </span>
+          </SelectItem>)}
+        </SelectGroup>
+      </SelectContent>
+    </Select>
+    {chosen?.modelCardUrl && <a href={chosen.modelCardUrl} target="_blank" rel="noreferrer" className="w-fit text-xs text-tita-ink underline underline-offset-2">查看模型卡与许可</a>}
+  </div>
+}
+
+/**
+ * 这次点「安装」会下多少。
+ *
+ * 模型列表里每个选项自己标了「已下载 / 需下载」，但人真正要判断的是**这一次的总量**：
+ * 两个模型都可能已下载（那就只是补依赖 + 自检），也可能只差一个。所以把所选的两个加起来，
+ * 已下载的不重复计 —— 已下载的模型不会重新下载（HF 缓存 + 目标目录都在）。
+ */
+function DownloadSummary({ embedding, rerank, chosen }: { embedding: ModelOptionView[]; rerank: ModelOptionView[]; chosen: ModelSelection }): ReactNode {
+  const pick = (options: ModelOptionView[], id: string): ModelOptionView | undefined => options.find(option => option.id === id)
+  const pending = [pick(embedding, chosen.embedding), pick(rerank, chosen.rerank)]
+    .filter((option): option is ModelOptionView => option !== undefined && option.installed === false)
+  if (pending.length === 0) {
+    return <p className="m-0 text-xs leading-relaxed text-tita-ink-muted" role="status">
+      {pick(embedding, chosen.embedding)?.installed === true && pick(rerank, chosen.rerank)?.installed === true
+        ? '所选模型都已下载，安装只需补齐推理依赖并重新自检。'
+        : '无法读取模型下载状态，安装会按需要补齐。'}
+    </p>
+  }
+  const bytes = pending.reduce((sum, option) => sum + (downloadBytes(option.download) ?? 0), 0)
+  // 两个以上才报合计：一个模型时合计与它自己那句是同一个数，纯重复。
+  const total = pending.length > 1 && bytes > 0 ? `，合计${formatBytes(bytes)}` : ''
+  return <p className="m-0 text-xs leading-relaxed text-tita-ink" role="status">
+    本次需下载{pending.map(option => `${option.label}（${option.download}）`).join('、')}{total}；已下载的不会重下。
+  </p>
+}
+
+export function EnvironmentNotice({ controller, onOpen }: { controller: EnvironmentController; onOpen: () => void }): ReactNode {
+  const { view, error, busy } = controller
+  if (!error && (!view || view.report.state === 'ready')) return null
+  const items = view?.report.items ?? []
+  const failed = items.some(item => item.state === 'failed')
+  const missing = items.some(item => item.state === 'missing')
+  const previouslyChecked = Boolean(view?.report.checkedAt)
+  const message = error ? '环境状态读取失败'
+    : busy ? view?.job?.stage ?? '正在检查运行环境'
+      : failed ? '模型推理自检未通过，请查看原因并修复'
+        : missing ? '请准备或启用向量与重排模型，再运行自检'
+          : previouslyChecked ? '模型配置或资源已变化，请重新自检' : '首次使用前，请准备并自检向量与重排模型'
+  return <div className="mx-3 mt-2 flex shrink-0 items-center gap-2 border-b border-tita-line pb-2 text-xs text-tita-ink" role="status">
+    {busy ? <LoaderCircle size={14} className="tita-spin shrink-0" /> : <AlertCircle size={14} className="shrink-0 text-tita-warning" />}
+    <span className="min-w-0 flex-1">{message}</span>
+    <Button variant="outline" size="sm" onClick={onOpen}>环境准备</Button>
+  </div>
+}
+
+export function EnvironmentSetup({ controller }: { controller: EnvironmentController }): ReactNode {
+  const { view, error, busy, prepare, refresh } = controller
+  const [details, setDetails] = useState(false)
+  const [selection, setSelection] = useState<ModelSelection>()
+  useEffect(() => {
+    if (view) setSelection(view.selection)
+  }, [view?.selection.embedding, view?.selection.rerank])
+  const ready = view?.report.state === 'ready'
+  const job = view?.job
+  const running = job?.state === 'running'
+  const failure = job?.state === 'failed' ? job.error : undefined
+  const chosen = selection ?? view?.selection
+  /** 已下载、但当前选择没用到的那些：只报出来，不替人删。 */
+  const unusedModels = view ? [
+    ...view.models.embedding.filter(option => option.installed === true && option.id !== view.selection.embedding),
+    ...view.models.rerank.filter(option => option.installed === true && option.id !== view.selection.rerank),
+  ] : []
+  const selectionChanged = Boolean(chosen && view && (chosen.embedding !== view.selection.embedding || chosen.rerank !== view.selection.rerank))
+  const checks = view?.report.items ?? []
+  const issues = checks.filter(item => item.state !== 'ready')
+  const checkItems = (items: typeof checks): ReactNode => <ul className="m-0 grid list-none gap-3 p-0" aria-label="运行环境检查项">
+    {items.map(item => <li key={item.id} className="flex min-w-0 items-start gap-2">
+      {item.state === 'ready' ? <Check size={14} className="mt-0.5 shrink-0 text-tita-success" /> : item.state === 'checking'
+        ? <LoaderCircle size={14} className="tita-spin mt-0.5 shrink-0" /> : <AlertCircle size={14} className="mt-0.5 shrink-0 text-tita-warning" />}
+      <div className="min-w-0 flex-1 text-xs leading-relaxed">
+        <span className="font-medium text-tita-ink">{item.label}</span>
+        <p className="m-0 break-words text-tita-ink-muted">{item.message}</p>
+        {item.recovery && <p className="m-0 break-words text-tita-ink">{item.recovery}</p>}
+      </div>
+    </li>)}
+  </ul>
+
+  return <section id="tita-environment" tabIndex={-1} aria-labelledby="tita-environment-title" className="tita-settingsSection">
+    <div className="tita-settingsSectionHeader">
+      <h3 id="tita-environment-title">本地运行环境</h3>
+      <span className={cn('shrink-0 text-xs', ready && !error ? 'text-tita-success' : 'text-tita-ink-muted')} role="status" aria-live="polite">
+        {error ? '读取失败' : busy ? '进行中' : ready ? '已就绪' : view ? '待准备' : '读取中'}
+      </span>
+    </div>
+    <p className="mb-4 mt-0 text-xs leading-relaxed text-tita-ink-muted">选择向量与重排模型，安装后自动自检并启用。首次安装需要联网下载模型和推理依赖。</p>
+    {view?.capabilities && <ul className="mb-4 grid list-none gap-1 p-0 text-xs" aria-label="功能可用状态">
+      {view.capabilities.map(capability => <li key={capability.id} className="flex flex-wrap gap-x-2 gap-y-1">
+        <span className={capability.ready ? 'text-tita-success' : 'text-tita-warning'}>{capability.label} · {capability.ready ? '可用' : '待准备'}</span>
+        <span className="text-tita-ink-muted">{capability.message}</span>
+      </li>)}
+    </ul>}
+    {!ready && issues.length > 0 && <div className="mb-4">{checkItems(issues)}</div>}
+    {view && chosen && <div className="grid gap-4" aria-label="模型选择">
+      <ModelSelect id="tita-embedding-model" label="向量模型" value={chosen.embedding} currentModel={view.current.embedding} options={view.models.embedding} disabled={busy}
+        onChange={value => setSelection(current => ({ ...(current ?? view.selection), embedding: value as ModelSelection['embedding'] }))} />
+      <ModelSelect id="tita-rerank-model" label="重排模型" value={chosen.rerank} currentModel={view.current.rerank} options={view.models.rerank} disabled={busy}
+        onChange={value => setSelection(current => ({ ...(current ?? view.selection), rerank: value as ModelSelection['rerank'] }))} />
+      <DownloadSummary embedding={view.models.embedding} rerank={view.models.rerank} chosen={chosen} />
+      {(selectionChanged || Boolean(view && (!view.current.embedding.id || !view.current.rerank.id))) && <p className="m-0 text-xs leading-relaxed text-tita-warning" role="status">
+        安装将启用所选本地模型，并替换高级模型设置中的自定义路径。自检失败会恢复原设置。更改向量模型后，请构建检索索引。
+      </p>}
+    </div>}
+    {!view && !error && <p className="text-xs text-tita-ink-muted" role="status">正在读取环境状态…</p>}
+    {running && <p className="my-3 text-xs text-tita-ink" role="status" aria-live="polite">{job.stage}。你可以离开此面板，任务会继续。</p>}
+    {error && <div className="my-3 flex flex-wrap items-start gap-2 text-xs leading-relaxed text-tita-danger" role="alert">
+      <span className="min-w-0 flex-1 break-words">{error}</span>
+      <Button variant="outline" size="sm" onClick={() => { void refresh() }}>重新读取</Button>
+    </div>}
+    {failure && <p className="my-3 break-words text-xs text-tita-danger" role="alert">{failure}</p>}
+    {job?.state === 'cancelled' && <p className="my-3 text-xs text-tita-ink-muted" role="status">{job.error}</p>}
+    {view && <div className="mt-4 flex flex-wrap gap-2">
+      <Button size="sm" variant={ready ? 'outline' : 'default'} disabled={busy || Boolean(error)} onClick={() => { void prepare('install', chosen) }}>
+        <Download size={13} />{selectionChanged ? '安装所选模型' : ready ? '修复当前环境' : job?.state === 'failed' || job?.state === 'cancelled' ? '重试准备' : '安装并启用'}
+      </Button>
+      <Button variant="outline" size="sm" disabled={busy || selectionChanged} onClick={() => { void prepare('check') }}><RefreshCw size={13} />重新自检</Button>
+      {running && <Button variant="ghost" size="sm" onClick={() => { void prepare('cancel') }}>停止</Button>}
+    </div>}
+    {ready && <p className="mb-0 mt-3 text-xs text-tita-ink-muted">向量模型变更后需构建检索索引，文档无需重新抽取。</p>}
+    {(view || job) && <>
+      <Button variant="ghost" size="sm" className="-ml-2 mt-3" aria-expanded={details} aria-controls="tita-environment-details" onClick={() => setDetails(value => !value)}>
+        <ChevronDown size={13} className={details ? 'rotate-180' : ''} />检查详情与日志
+      </Button>
+      {details && <div id="tita-environment-details" className="mt-3 grid gap-3 text-xs leading-relaxed text-tita-ink-muted">
+        {checkItems(checks)}
+        {view?.report.checkedAt && <p className="m-0">最近自检：{new Date(view.report.checkedAt).toLocaleString()}</p>}
+        {unusedModels.length > 0 && <p className="m-0">
+          已下载但未启用：{unusedModels.map(option => `${option.label}（${option.download}）`).join('、')}。它们留在资源目录里，不会被重新下载。
+        </p>}
+        {checks.map(item => item.path && <p key={item.id} className="m-0 break-all">{item.label}：{item.path}</p>)}
+        {job?.logs.length ? <pre className="m-0 max-h-40 overflow-auto whitespace-pre-wrap break-all rounded-tita-control bg-tita-surface-muted p-2 font-mono">{job.logs.join('\n')}</pre> : null}
+      </div>}
+    </>}
+  </section>
+}

package/src/client/ExpansionGraph.tsx

@@ -33,6 +33,10 @@ import { ExternalLink } from '@tita-agent/ui/icons'
 import { layoutGraph, type PlacedGraph, type PlacedNode } from './graph/layout.ts'
 import { cardKey, expansionGraphData, radiusOf, type ExpansionHit, type ExpansionNeighbor } from './graph/expansion.ts'
 import { edgeStyleOf } from './graph/edges.ts'
+import {
+  HIT_FILL as PALETTE_HIT_FILL, LABEL_FAINT as PALETTE_LABEL_FAINT, LABEL_INK as PALETTE_LABEL_INK,
+  NEIGHBOR_FILL as PALETTE_NEIGHBOR_FILL, OUTLINE_MUTED as PALETTE_OUTLINE_MUTED,
+} from './graph/palette.ts'
 import { styles } from './styles.ts'
 
 export type { ExpansionHit, ExpansionNeighbor } from './graph/expansion.ts'
@@ -62,14 +66,16 @@ const EXPANSION_METRICS = { nodeW: 104, nodeH: 26, linkDistance: 72, stage: 300,
 /*
  * 画布侧的颜色都是**字面量**：canvas 渲染器不认 CSS 变量，写 `var(--tita-primary)`
  * 会被解析成全透明黑（`parseColor` 的兜底）。图例上的色块必须与画布上的圆点同色，
- * 所以它在 CSS 里写了一份，并在注释里点名这里。
+ * 所以它在 CSS 里写了一份，并在注释里点名这里 —— 画布这一侧的值全部来自
+ * `graph/palette.ts`（三处各写一份正是它们漂开的真正原因）。
  */
-const HIT_FILL = '#4868b2'
-const NEIGHBOR_FILL = '#ffffff'
-const OUTLINE = '#4868b2'
-const OUTLINE_MUTED = '#98a2b3'
-const LABEL_INK = '#101828'
-const LABEL_FAINT = '#667085'
+const HIT_FILL = PALETTE_HIT_FILL
+const NEIGHBOR_FILL = PALETTE_NEIGHBOR_FILL
+/** 命中点的描边与填充同色：它是一个实心点，靠邻居的「空心」来区分两者。 */
+const OUTLINE = PALETTE_HIT_FILL
+const OUTLINE_MUTED = PALETTE_OUTLINE_MUTED
+const LABEL_INK = PALETTE_LABEL_INK
+const LABEL_FAINT = PALETTE_LABEL_FAINT
 /** 标签用的字面量字族：同上，canvas 读不到 `--font-tita`。 */
 const LABEL_FONT = '-apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif'