npm - @waterwx/dsh-novel-forge - Versions diffs - 0.1.0 - Mend

@waterwx/dsh-novel-forge 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (50) hide show

package/LICENSE +202 -0
package/README.md +180 -0
package/cordis.patch.yml +13 -0
package/lib/client.js +3924 -0
package/lib/client.js.map +1 -0
package/lib/index.js +3120 -0
package/lib/index.js.map +1 -0
package/lib/types/assets.d.ts +35 -0
package/lib/types/assistant.d.ts +43 -0
package/lib/types/bookshelf.d.ts +35 -0
package/lib/types/client/api.d.ts +68 -0
package/lib/types/client/docx.d.ts +15 -0
package/lib/types/client/index.d.ts +14 -0
package/lib/types/client/locales.d.ts +139 -0
package/lib/types/client/mount.d.ts +9 -0
package/lib/types/client/panel/AssetsTab.d.ts +7 -0
package/lib/types/client/panel/AssistantTab.d.ts +7 -0
package/lib/types/client/panel/BookshelfBar.d.ts +11 -0
package/lib/types/client/panel/NovelPanel.d.ts +13 -0
package/lib/types/client/panel/controller.d.ts +19 -0
package/lib/types/client/panel/helpers.d.ts +8 -0
package/lib/types/client/sidebar-entry.d.ts +13 -0
package/lib/types/docx.d.ts +19 -0
package/lib/types/engine.d.ts +95 -0
package/lib/types/index.d.ts +55 -0
package/lib/types/protocol.d.ts +521 -0
package/lib/types/routes.d.ts +29 -0
package/package.json +105 -0
package/src/assets.ts +518 -0
package/src/assistant.ts +547 -0
package/src/bookshelf.ts +137 -0
package/src/client/api.ts +254 -0
package/src/client/css-modules.d.ts +8 -0
package/src/client/docx.ts +69 -0
package/src/client/index.ts +34 -0
package/src/client/locales.ts +271 -0
package/src/client/mount.tsx +97 -0
package/src/client/panel/AssetsTab.tsx +341 -0
package/src/client/panel/AssistantTab.tsx +188 -0
package/src/client/panel/BookshelfBar.tsx +116 -0
package/src/client/panel/NovelPanel.tsx +990 -0
package/src/client/panel/controller.ts +45 -0
package/src/client/panel/helpers.ts +17 -0
package/src/client/panel/panel.module.css +894 -0
package/src/client/sidebar-entry.ts +122 -0
package/src/docx.ts +83 -0
package/src/engine.ts +1019 -0
package/src/index.ts +184 -0
package/src/protocol.ts +539 -0
package/src/routes.ts +955 -0

package/src/client/mount.tsx ADDED Viewed

@@ -0,0 +1,97 @@
+/**
+ * Panel view mounting — mirrors the family plugins: a container appended
+ * inside the conversation grid item, hidden while inactive; toggling is a
+ * data attribute on <html>, with cross-plugin activation events.
+ */
+import { createRoot, type Root } from 'react-dom/client'
+import type { NovelApi } from './api.ts'
+import type { PanelController } from './panel/controller.ts'
+import { NovelPanel } from './panel/NovelPanel.tsx'
+import css from './panel/panel.module.css'
+/** The injected panel container. */
+export const PANEL_VIEW_SELECTOR = '[data-dsh-novelforge-view]'
+const CONVERSATION_COLUMN_SELECTOR = '[data-pane="conversation"]'
+const ACTIVE_ATTR = 'data-dsh-novelforge-active'
+/** Sibling panels' activation attributes (evicted when this panel opens). */
+const OTHER_ACTIVE_ATTRS = ['data-dsh-taskboard-active', 'data-dsh-ssh-active']
+/** Cross-plugin activation event; detail is the activating panel name. */
+const ACTIVATE_EVENT = 'dsh-panel-activate'
+const PANEL_NAME = 'novelforge'
+/** Find the center column, or undefined while the frame is not mounted. */
+function conversationColumn(): HTMLElement | undefined {
+  return document.querySelector<HTMLElement>(CONVERSATION_COLUMN_SELECTOR) ?? undefined
+}
+/**
+ * Mount the panel React tree into the center column and bind visibility to
+ * the controller.
+ */
+export function mountPanel(controller: PanelController, api: NovelApi): () => void {
+  let root: Root | undefined
+  let container: HTMLDivElement | undefined
+  const ensure = (): void => {
+    if (container !== undefined) {
+      if (container.isConnected) return
+      root?.unmount()
+      root = undefined
+      container.remove()
+      container = undefined
+    }
+    const column = conversationColumn()
+    if (column === undefined) return
+    container = document.createElement('div')
+    container.dataset.dshNovelforgeView = 'true'
+    container.className = css.view
+    column.appendChild(container)
+    root = createRoot(container)
+    root.render(<NovelPanel controller={controller} api={api} />)
+  }
+  const waitObserver = new MutationObserver(() => { ensure() })
+  waitObserver.observe(document.body, { childList: true, subtree: true })
+  const applyActive = (): void => {
+    if (controller.getSnapshot().panelOpen) {
+      for (const attr of OTHER_ACTIVE_ATTRS) document.documentElement.removeAttribute(attr)
+      document.documentElement.setAttribute(ACTIVE_ATTR, '')
+      document.dispatchEvent(new CustomEvent(ACTIVATE_EVENT, { detail: PANEL_NAME }))
+    } else {
+      document.documentElement.removeAttribute(ACTIVE_ATTR)
+    }
+  }
+  const onOtherActivate = (event: Event): void => {
+    const detail = (event as CustomEvent).detail
+    if ((detail === 'taskboard' || detail === 'ssh') && controller.getSnapshot().panelOpen) {
+      controller.close()
+    }
+  }
+  // Jump out on sidebar context clicks.
+  const SIDEBAR_ROW_SELECTOR = '[class*="sessionRow"], [class*="projectRow"], [class*="searchResultRow"], [class*="searchResultWorkspace"], [class*="newSession"]'
+  const onClickSidebarRow = (event: MouseEvent): void => {
+    if (!controller.getSnapshot().panelOpen) return
+    const target = event.target as HTMLElement | null
+    if (target === null) return
+    if (target.closest(SIDEBAR_ROW_SELECTOR) !== null) controller.close()
+  }
+  document.addEventListener('click', onClickSidebarRow, true)
+  document.addEventListener(ACTIVATE_EVENT, onOtherActivate)
+  const unsubscribe = controller.subscribe(applyActive)
+  applyActive()
+  ensure()
+  return () => {
+    document.removeEventListener('click', onClickSidebarRow, true)
+    document.removeEventListener(ACTIVATE_EVENT, onOtherActivate)
+    waitObserver.disconnect()
+    unsubscribe()
+    document.documentElement.removeAttribute(ACTIVE_ATTR)
+    root?.unmount()
+    root = undefined
+    container?.remove()
+    container = undefined
+  }
+}

package/src/client/panel/AssetsTab.tsx ADDED Viewed

@@ -0,0 +1,341 @@
+/**
+ * 写作资产页签：题材基底库 / 推进模式库 / 反 AI 规则 / 写法引擎。
+ * 学习自 AI-Novel-Writing-Assistant 的四大资产模块，注入到生成与审稿提示词中。
+ */
+import { useCallback, useEffect, useRef, useState } from 'react'
+import type { NovelApi } from '../api.ts'
+import { tt } from './helpers.ts'
+import type { AntiAiRule, AssetsResponse, GenreNode, ProgressionMode, StyleAsset, StyleTemplate } from '../../protocol.ts'
+import css from './panel.module.css'
+/** Props. */
+export interface AssetsTabProps {
+  api: NovelApi
+}
+/** 渲染题材树（带勾选当前题材）。 */
+function GenreTree({ node, selected, onSelect }: { node: GenreNode; selected: string; onSelect: (node: GenreNode) => void }) {
+  return (
+    <div>
+      <label style={{ display: 'flex', alignItems: 'flex-start', gap: 6, cursor: 'pointer' }}>
+        <input type="radio" name="genre" checked={selected === node.name} onChange={() => { onSelect(node) }} />
+        <span>
+          <b>{node.name}</b>
+          {node.description !== '' && <span className={css.meta}> — {node.description}</span>}
+        </span>
+      </label>
+      {node.children.length > 0 && (
+        <div style={{ marginLeft: 22, display: 'flex', flexDirection: 'column', gap: 4 }}>
+          {node.children.map(child => (
+            <GenreTree key={child.name} node={child} selected={selected} onSelect={onSelect} />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+/** 写作资产子页签。 */
+type AssetSubTab = 'genre' | 'progression' | 'templates' | 'rules' | 'style'
+/** 子页签定义。 */
+const SUB_TABS: ReadonlyArray<{ id: AssetSubTab; label: string }> = [
+  { id: 'genre', label: '题材基底' },
+  { id: 'progression', label: '推进模式' },
+  { id: 'templates', label: '预置写法' },
+  { id: 'rules', label: '反 AI 规则' },
+  { id: 'style', label: '自定义写法' },
+]
+/** 写作资产页签。 */
+export function AssetsTab({ api }: AssetsTabProps) {
+  const [assetTab, setAssetTab] = useState<AssetSubTab>('genre')
+  const [data, setData] = useState<AssetsResponse | null>(null)
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState('')
+  const [notice, setNotice] = useState('')
+  const [sampleText, setSampleText] = useState('')
+  const [styleName, setStyleName] = useState('')
+  const [newRule, setNewRule] = useState('')
+  const [newProgression, setNewProgression] = useState('')
+  const loadId = useRef(0)
+  /** Load assets (or reset from a new call). */
+  const refresh = useCallback(async () => {
+    try {
+      const result = await api.assets()
+      setData(result)
+    } catch (err) {
+      setError((err as Error).message)
+    }
+  }, [api])
+  useEffect(() => {
+    void refresh()
+  }, [refresh])
+  /** Patch assets and refresh. */
+  const patch = async (patch: Parameters<NovelApi['patchAssets']>[0]): Promise<void> => {
+    setBusy(true)
+    setError('')
+    try {
+      const result = await api.patchAssets(patch)
+      setData(result)
+      setNotice('已保存')
+    } catch (err) {
+      setError((err as Error).message)
+    } finally {
+      setBusy(false)
+    }
+  }
+  /** 提取写法资产。 */
+  const handleExtractStyle = async (): Promise<void> => {
+    if (sampleText.trim().length < 50) {
+      setError(tt('settings.exported') === '' ? '样本文本过短' : '样本文本过短（<50 字符）')
+      return
+    }
+    setBusy(true)
+    setError('')
+    try {
+      const result = await api.styleEngine({ sampleText, name: styleName })
+      setData(prev => prev === null ? prev : {
+        ...prev,
+        projectAssets: {
+          ...prev.projectAssets,
+          styleAssets: [...(prev.projectAssets.styleAssets ?? []), result.styleAsset],
+          updatedAt: new Date().toISOString(),
+        },
+      })
+      setNotice(`写法资产「${result.styleAsset.name}」已提取并绑定`)
+      setSampleText('')
+      setStyleName('')
+    } catch (err) {
+      setError((err as Error).message)
+    } finally {
+      setBusy(false)
+    }
+  }
+  /** 添加自定义反 AI 规则（一行 "名称：要避免的" 简单格式由用户填写 JSON）。 */
+  const handleAddRule = async (): Promise<void> => {
+    const text = newRule.trim()
+    if (text === '') return
+    let rule: AntiAiRule
+    try {
+      const parsed = JSON.parse(text) as AntiAiRule
+      rule = { name: parsed.name ?? '自定义规则', avoid: parsed.avoid ?? '', fix: parsed.fix ?? '' }
+    } catch {
+      // Fallback: treat as "避免什么" text.
+      rule = { name: `自定义规则 ${(data?.projectAssets.antiAiRules ?? []).length + 1}`, avoid: text, fix: '' }
+    }
+    if (rule.avoid === '' && rule.fix === '') return
+    const next = [...(data?.projectAssets.antiAiRules ?? []), rule]
+    await patch({ antiAiRules: next })
+    setNewRule('')
+  }
+  /** 设置题材。 */
+  const handleSelectGenre = (node: GenreNode): void => {
+    void patch({ genre: node })
+  }
+  /** 添加推进模式（从内置库选择）。 */
+  const handleAddProgression = async (mode: ProgressionMode): Promise<void> => {
+    const current = data?.projectAssets
+    const isPrimary = (data?.projectAssets.primaryProgression ?? undefined) === undefined
+    if (isPrimary) {
+      await patch({ primaryProgression: { ...mode, primary: true } })
+    } else {
+      await patch({ auxiliaryProgressions: [...(current?.auxiliaryProgressions ?? []), { ...mode, primary: false }] })
+    }
+  }
+  if (data === null) {
+    return <div className={css.card}><span className={css.meta}>{tt('common.loading')}</span></div>
+  }
+  const assets = data.projectAssets
+  const builtinRules = data.antiAiLibrary
+  const customRules = assets.antiAiRules ?? []
+  const genreLibrary = data.genreLibrary
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+      {error !== '' && <div className={css.card} style={{ borderColor: 'var(--nf-error)' }}><span style={{ color: 'var(--nf-error)' }}>{tt('common.error')}: {error}</span></div>}
+      {notice !== '' && <div className={css.card}><span style={{ color: 'var(--nf-success)' }}>{notice}</span></div>}
+      {/* 子页签栏 */}
+      <div className={css.tabBar} role="tablist" style={{ padding: '0 0 8px', borderBottom: '1px solid var(--nf-border)' }}>
+        {SUB_TABS.map(tab => (
+          <button
+            key={tab.id}
+            type="button"
+            role="tab"
+            aria-selected={assetTab === tab.id}
+            data-active={assetTab === tab.id ? '' : undefined}
+            className={css.tab}
+            onClick={() => { setAssetTab(tab.id) }}
+          >
+            {tab.label}
+          </button>
+        ))}
+      </div>
+      {/* 题材基底库 */}
+      {assetTab === 'genre' && (
+        <div className={css.card}>
+          <span className={css.cardTitle}>题材基底库</span>
+          <span className={css.meta}>这本书属于哪个阅读市场？题材定位会注入章节生成与审稿提示词。</span>
+          {assets.genre !== undefined && (
+            <div style={{ border: '1px solid var(--nf-border)', borderRadius: 6, padding: '6px 10px', fontSize: 12 }}>
+              <b>当前题材：{assets.genre.name}</b> — {assets.genre.description}
+            </div>
+          )}
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 8, maxHeight: 340, overflowY: 'auto' }}>
+            {genreLibrary.map(root => <GenreTree key={root.name} node={root} selected={assets.genre?.name ?? ''} onSelect={handleSelectGenre} />)}
+          </div>
+        </div>
+      )}
+      {/* 推进模式库 */}
+      {assetTab === 'progression' && (
+        <div className={css.card}>
+          <span className={css.cardTitle}>推进模式库</span>
+          <span className={css.meta}>读者为什么继续看下一章？主模式 + 辅助模式注入卷规划与章节生成。</span>
+          {assets.primaryProgression !== undefined && (
+            <div style={{ border: '1px solid var(--nf-accent)', borderRadius: 6, padding: '6px 10px', fontSize: 12, color: 'var(--nf-accent)' }}>
+              <b>主推进：{assets.primaryProgression.name}</b> — {assets.primaryProgression.driver}
+            </div>
+          )}
+          {assets.auxiliaryProgressions.map(mode => (
+            <div key={mode.name} style={{ border: '1px solid var(--nf-border)', borderRadius: 6, padding: '6px 10px', fontSize: 12 }}>
+              <b>{mode.name}</b> — {mode.driver}
+            </div>
+          ))}
+          <span className={css.meta}>从内置推进模式库选择添加（第一个设为主推进）：</span>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 6, maxHeight: 260, overflowY: 'auto' }}>
+            {data.progressionLibrary.map(mode => {
+              const alreadyPrimary = assets.primaryProgression?.name === mode.name
+              const alreadyAux = assets.auxiliaryProgressions.some(m => m.name === mode.name)
+              if (alreadyPrimary || alreadyAux) return null
+              return (
+                <button key={mode.name} className={css.button} disabled={busy} onClick={() => { void handleAddProgression(mode) }}>
+                  ＋ {assets.primaryProgression === undefined ? `主推进：` : '辅助：'}{mode.name} — {mode.driver.slice(0, 40)}…
+                </button>
+              )
+            })}
+          </div>
+        </div>
+      )}
+      {/* 预置写法模板（一键绑定） */}
+      {assetTab === 'templates' && (
+        <div className={css.card}>
+          <span className={css.cardTitle}>预置写法模板</span>
+          <span className={css.meta}>从内置 8 套叙事风格模板中一键选用（来自 AI-Novel-Writing-Assistant 写法引擎），无需样本文本；绑定后生成与润色都遵循该风格。</span>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 8, maxHeight: 420, overflowY: 'auto' }}>
+            {data.styleTemplates.map(template => {
+              const bound = assets.styleAssets.some(s => s.name === template.name)
+              return (
+                <div key={template.key} style={{ border: `1px solid ${bound ? 'var(--nf-accent)' : 'var(--nf-border)'}`, borderRadius: 6, padding: '8px 10px', fontSize: 12 }}>
+                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
+                    <span><b>{template.name}</b> <span className={css.badge} style={{ borderColor: 'var(--nf-text-3)', color: 'var(--nf-text-3)' }}>{template.category}</span></span>
+                    <button
+                      className={`${css.button} ${css.buttonSmall} ${bound ? '' : css.buttonPrimary}`}
+                      disabled={busy || bound}
+                      onClick={() => {
+                        const styleAsset: StyleAsset = {
+                          name: template.name,
+                          proseRules: [...template.proseRules, ...template.rhythmRules.map(r => `节奏：${r}`)],
+                          dialogueRules: template.dialogueRules,
+                          descriptionRules: template.languageRules,
+                          boundaries: [`模板「${template.name}」适用题材：${template.applicableGenres.join('、')}`, '不要违背模板的叙事单元结构与节奏约束'],
+                          createdAt: new Date().toISOString(),
+                        }
+                        void patch({ styleAssets: [...(data.projectAssets.styleAssets ?? []), styleAsset] })
+                      }}
+                    >
+                      {bound ? '✓ 已绑定' : '＋ 绑定'}
+                    </button>
+                  </div>
+                  <div className={css.meta}>{template.description}</div>
+                  <div className={css.meta}>叙述：{template.proseRules.slice(0, 2).join('；')}</div>
+                  <div className={css.meta}>台词：{template.dialogueRules.slice(0, 1).join('；')}</div>
+                </div>
+              )
+            })}
+          </div>
+        </div>
+      )}
+      {/* 反 AI 规则 */}
+      {assetTab === 'rules' && (
+        <div className={css.card}>
+        <span className={css.cardTitle}>反 AI 规则</span>
+        <span className={css.meta}>写作时必须遵守的表达边界（内置全局 + 项目自定义），生成与审稿都会检查。</span>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 6, maxHeight: 280, overflowY: 'auto' }}>
+          {builtinRules.map(rule => (
+            <div key={rule.name} style={{ border: '1px solid var(--nf-border)', borderRadius: 6, padding: '6px 10px', fontSize: 12 }}>
+              <b>{rule.name}</b> <span className={css.badge} style={{ borderColor: 'var(--nf-text-3)', color: 'var(--nf-text-3)' }}>内置</span>
+              <div className={css.meta}>避免：{rule.avoid}</div>
+              <div className={css.meta}>修正：{rule.fix}</div>
+            </div>
+          ))}
+          {customRules.map(rule => (
+            <div key={rule.name} style={{ border: '1px solid var(--nf-accent)', borderRadius: 6, padding: '6px 10px', fontSize: 12 }}>
+              <b>{rule.name}</b> <span className={css.badge} style={{ borderColor: 'var(--nf-accent)', color: 'var(--nf-accent)' }}>自定义</span>
+              <div className={css.meta}>避免：{rule.avoid}</div>
+              {rule.fix !== '' && <div className={css.meta}>修正：{rule.fix}</div>}
+            </div>
+          ))}
+        </div>
+        <div className={css.row}>
+          <input
+            className={css.input}
+            style={{ flex: 1 }}
+            placeholder='新增规则（格式：{"name":"规则名","avoid":"要避免的","fix":"修正方向"}；或直接填要避免的问题）'
+            value={newRule}
+            onChange={e => { setNewRule(e.target.value) }}
+          />
+          <button className={`${css.button} ${css.buttonPrimary}`} disabled={busy || newRule.trim() === ''} onClick={() => { void handleAddRule() }}>＋ 添加</button>
+        </div>
+      </div>
+      )}
+      {/* 自定义写法引擎 */}
+      {assetTab === 'style' && (
+        <div className={css.card}>
+          <span className={css.cardTitle}>自定义写法引擎</span>
+          <span className={css.meta}>粘贴一段你喜欢的样本文本，AI 提取叙事风格规则并绑定到本书，后续章节保持同一味道。</span>
+          {assets.styleAssets.map(style => (
+            <div key={style.name} style={{ border: '1px solid var(--nf-border)', borderRadius: 6, padding: '6px 10px', fontSize: 12 }}>
+              <b>{style.name}</b>
+              <div className={css.meta}>叙述：{style.proseRules.slice(0, 3).join('；')}</div>
+              {style.dialogueRules.length > 0 && <div className={css.meta}>台词：{style.dialogueRules.slice(0, 2).join('；')}</div>}
+            </div>
+          ))}
+          <textarea
+            className={css.textarea}
+            style={{ minHeight: 90 }}
+            placeholder="粘贴样本文本（一段能代表目标风格的文字，50 字以上）…"
+            value={sampleText}
+            onChange={e => { setSampleText(e.target.value) }}
+          />
+          <div className={css.row}>
+            <input
+              className={css.input}
+              style={{ flex: 1 }}
+              placeholder="写法资产名（可选）"
+              value={styleName}
+              onChange={e => { setStyleName(e.target.value) }}
+            />
+            <button className={`${css.button} ${css.buttonPrimary}`} disabled={busy || sampleText.trim().length < 50} onClick={() => { void handleExtractStyle() }}>
+              提取并绑定
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/client/panel/AssistantTab.tsx ADDED Viewed

@@ -0,0 +1,188 @@
+/**
+ * AI 助手页签：与 AI 编辑对话讨论剧情，助手可通过动作指令直接修改
+ * 大纲 / 设定圣经 / 章节。流式渲染回复，工具调用以事件行展示。
+ */
+import { useCallback, useEffect, useRef, useState } from 'react'
+import type { NovelApi } from '../api.ts'
+import { tt } from './helpers.ts'
+import type { AssistantFrame, AssistantMessage } from '../../protocol.ts'
+import css from './panel.module.css'
+/** One chat bubble (either side). */
+interface ChatLine {
+  id: number
+  role: 'user' | 'assistant'
+  text: string
+  /** Tool events interleaved with the assistant reply. */
+  tools: Array<{ name: string; status: 'start' | 'done' | 'error'; detail?: string }>
+  /** Live output while a tool runs (generated text streamed into the bubble). */
+  live?: string
+}
+/** Props. */
+export interface AssistantTabProps {
+  api: NovelApi
+}
+/** The assistant conversation tab. */
+export function AssistantTab({ api }: AssistantTabProps) {
+  const [lines, setLines] = useState<ChatLine[]>([])
+  const [input, setInput] = useState('')
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState('')
+  const idRef = useRef(0)
+  const scrollRef = useRef<HTMLDivElement | null>(null)
+  /** Append a bubble (or extend the current assistant bubble). */
+  const pushLine = useCallback((line: Omit<ChatLine, 'id'>) => {
+    setLines(prev => {
+      const last = prev[prev.length - 1]
+      // Extend the live assistant bubble while streaming.
+      if (line.role === 'assistant' && last !== undefined && last.role === 'assistant' && last.tools.length === 0) {
+        return [...prev.slice(0, -1), { ...last, text: last.text + line.text }]
+      }
+      return [...prev, { ...line, id: idRef.current++ }]
+    })
+  }, [])
+  /** Push a tool event onto the current assistant bubble. */
+  const pushTool = useCallback((tool: ChatLine['tools'][number]) => {
+    setLines(prev => {
+      const last = prev[prev.length - 1]
+      if (last === undefined || last.role !== 'assistant') {
+        return [...prev, { id: idRef.current++, role: 'assistant', text: '', tools: [tool] }]
+      }
+      return [...prev.slice(0, -1), { ...last, tools: [...last.tools, tool], live: undefined }]
+    })
+  }, [])
+  /** Append live tool output onto the current assistant bubble. */
+  const pushToolDelta = useCallback((text: string) => {
+    setLines(prev => {
+      const last = prev[prev.length - 1]
+      if (last === undefined || last.role !== 'assistant') return prev
+      return [...prev.slice(0, -1), { ...last, live: (last.live ?? '') + text }]
+    })
+  }, [])
+  /** Load persisted history on mount. */
+  useEffect(() => {
+    let cancelled = false
+    void (async () => {
+      try {
+        const history = await api.assistantHistory()
+        if (cancelled) return
+        const restored: ChatLine[] = []
+        for (const entry of history) {
+          if (entry.role === 'user') {
+            restored.push({ id: idRef.current++, role: 'user', text: entry.content, tools: [] })
+          } else if (entry.role === 'assistant') {
+            restored.push({ id: idRef.current++, role: 'assistant', text: entry.content, tools: [] })
+          } else if (entry.role === 'tool') {
+            const last = restored[restored.length - 1]
+            if (last !== undefined && last.role === 'assistant') {
+              last.tools.push({ name: entry.tool ?? 'tool', status: 'done', detail: entry.content.slice(0, 120) })
+            }
+          }
+        }
+        setLines(restored)
+      } catch (err) {
+        if (!cancelled) setError((err as Error).message)
+      }
+    })()
+    return () => { cancelled = true }
+  }, [api])
+  /** Auto-scroll to the newest line. */
+  useEffect(() => {
+    scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight })
+  }, [lines])
+  /** Send one message. */
+  const handleSend = async (): Promise<void> => {
+    const message = input.trim()
+    if (message === '' || busy) return
+    setInput('')
+    setError('')
+    pushLine({ role: 'user', text: message, tools: [] })
+    // Start an empty assistant bubble.
+    setLines(prev => [...prev, { id: idRef.current++, role: 'assistant', text: '', tools: [] }])
+    setBusy(true)
+    try {
+      await api.assistant(message, (frame: AssistantFrame) => {
+        if (frame.type === 'delta') {
+          pushLine({ role: 'assistant', text: frame.text, tools: [] })
+        } else if (frame.type === 'tool') {
+          pushTool({
+            name: frame.name,
+            status: frame.status,
+            detail: frame.detail,
+          })
+        } else if (frame.type === 'toolDelta') {
+          pushToolDelta(frame.text)
+        } else if (frame.type === 'error') {
+          pushTool({ name: 'error', status: 'error', detail: frame.message })
+        }
+      })
+    } catch (err) {
+      setError((err as Error).message)
+    } finally {
+      setBusy(false)
+    }
+  }
+  return (
+    <div className={css.card} style={{ flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column' }}>
+      <span className={css.cardTitle}>{tt('tab.assistant')}</span>
+      <span className={css.meta}>{tt('assistant.hint')}</span>
+      {error !== '' && <span style={{ color: 'var(--nf-error)', fontSize: 12 }}>{tt('common.error')}: {error}</span>}
+      <div
+        ref={scrollRef}
+        className={css.chatScroll}
+      >
+        {lines.length === 0 && <span className={css.meta}>{tt('assistant.empty')}</span>}
+        {lines.map(line => (
+          <div key={line.id} className={line.role === 'user' ? css.chatBubbleUser : css.chatBubbleAssistant}>
+            {line.role === 'user' && <div className={css.chatRole}>你</div>}
+            {line.text !== '' && <div style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>{line.text}</div>}
+            {line.live !== undefined && line.live !== '' && (
+              <div className={css.toolLive}>{line.live}</div>
+            )}
+            {line.tools.length > 0 && (
+              <div style={{ display: 'flex', flexDirection: 'column', gap: 2, marginTop: 4, fontSize: 11 }}>
+                {line.tools.map((tool, i) => (
+                  <span key={i} style={{ color: tool.status === 'error' ? 'var(--nf-error)' : tool.status === 'start' ? 'var(--nf-accent)' : 'var(--nf-success)' }}>
+                    {tool.status === 'start'
+                      ? tt('assistant.toolStart', { name: tool.name })
+                      : tool.status === 'done'
+                        ? tt('assistant.toolDone', { name: tool.name, detail: tool.detail ?? '' })
+                        : tt('assistant.toolError', { name: tool.name, detail: tool.detail ?? '' })}
+                  </span>
+                ))}
+              </div>
+            )}
+          </div>
+        ))}
+        {busy && <span className={css.meta} style={{ color: 'var(--nf-accent)' }}>…</span>}
+      </div>
+      <div className={css.row} style={{ marginTop: 8 }}>
+        <textarea
+          className={css.textarea}
+          style={{ minHeight: 64, flex: 1 }}
+          placeholder={tt('assistant.placeholder')}
+          value={input}
+          onChange={e => { setInput(e.target.value) }}
+          onKeyDown={e => {
+            if (e.key === 'Enter' && !e.shiftKey) {
+              e.preventDefault()
+              void handleSend()
+            }
+          }}
+        />
+        <button type="button" className={`${css.button} ${css.buttonPrimary}`} disabled={busy || input.trim() === ''} onClick={() => { void handleSend() }}>
+          {tt('assistant.send')}
+        </button>
+      </div>
+    </div>
+  )
+}