@waterwx/dsh-novel-forge 1.3.1 → 1.3.2-alpha

package/src/client/panel/ImportModal.tsx

@@ -0,0 +1,303 @@
+/**
+ * 导入小说弹窗：两种模式 ——
+ *  A) 已有项目目录（含 novel-project.json）→ 登记/激活书架（粘贴服务器本地路径）；
+ *  B) txt/md 全本 → 点击选择文件，浏览器读取内容 → 服务器拆章预览 → 确认后导入。
+ *  Mode B 也保留「服务器本地路径」高级选项（大文件或服务器端已有文件时用）。
+ */
+import { useEffect, useRef, useState } from 'react'
+import type { NovelApi } from '../api.ts'
+import type { BookImportTextPreviewResponse } from '../../protocol.ts'
+import { readFileTextSmart } from '../text.ts'
+import css from './panel.module.css'
+
+type ImportMode = 'dir' | 'text'
+
+/** 导入结果（成功态展示）。 */
+interface ImportResult {
+  kind: 'dir' | 'text'
+  bookName: string
+  existed?: boolean
+  chapters?: number
+  skipped?: string[]
+}
+
+export function ImportModal({
+  api,
+  onClose,
+  onImported,
+}: {
+  api: NovelApi
+  onClose: () => void
+  /** 导入成功并已激活该书后回调（刷新书架）。 */
+  onImported: () => void | Promise<void>
+}) {
+  const [mode, setMode] = useState<ImportMode>('dir')
+  // Mode A
+  const [dir, setDir] = useState('')
+  // Mode B：文件选择 + 预览
+  const fileInputRef = useRef<HTMLInputElement | null>(null)
+  const [fileName, setFileName] = useState('')
+  const [fileText, setFileText] = useState<string | null>(null)
+  const [previewing, setPreviewing] = useState(false)
+  const [preview, setPreview] = useState<BookImportTextPreviewResponse | null>(null)
+  // Mode B：服务器本地路径（高级）
+  const [showPath, setShowPath] = useState(false)
+  const [filePath, setFilePath] = useState('')
+  // 通用
+  const [outDir, setOutDir] = useState('')
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState('')
+  const [result, setResult] = useState<ImportResult | null>(null)
+
+  /** 选择文件 → 读取内容 → 调服务器预览拆章。 */
+  const onPickFile = async (file: File | undefined) => {
+    if (file === undefined) return
+    setError('')
+    setResult(null)
+    setPreview(null)
+    setFileName(file.name)
+    setPreviewing(true)
+    try {
+      const text = await readFileTextSmart(file)
+      setFileText(text)
+      const p = await api.bookImportTextPreview(text, file.name)
+      setPreview(p)
+    } catch (err) {
+      setError((err as Error).message)
+    } finally {
+      setPreviewing(false)
+    }
+  }
+
+  const runImport = async () => {
+    setError('')
+    setResult(null)
+    if (mode === 'dir') {
+      const d = dir.trim()
+      if (d === '') { setError('请输入项目目录（含 novel-project.json 的文件夹）'); return }
+      setBusy(true)
+      try {
+        const r = await api.bookImportDir(d)
+        setResult({ kind: 'dir', bookName: r.book.bookName, existed: r.existed })
+        await onImported()
+      } catch (err) {
+        setError((err as Error).message)
+      } finally {
+        setBusy(false)
+      }
+      return
+    }
+    // Mode B：优先上传内容；未选文件时退回服务器路径
+    if (fileText !== null && fileText.length > 0) {
+      setBusy(true)
+      try {
+        const o = outDir.trim()
+        const r = await api.bookImportTextContent(fileText, fileName, o !== '' ? o : undefined)
+        setResult({ kind: 'text', bookName: r.bookName, chapters: r.chapters, skipped: r.skipped })
+        await onImported()
+      } catch (err) {
+        setError((err as Error).message)
+      } finally {
+        setBusy(false)
+      }
+      return
+    }
+    const f = filePath.trim()
+    if (f === '') { setError('请先选择文件，或输入服务器本地文件路径'); return }
+    setBusy(true)
+    try {
+      const o = outDir.trim()
+      const r = await api.bookImportText(f, o !== '' ? o : undefined)
+      setResult({ kind: 'text', bookName: r.bookName, chapters: r.chapters, skipped: r.skipped })
+      await onImported()
+    } catch (err) {
+      setError((err as Error).message)
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  const switchMode = (m: ImportMode) => { setMode(m); setError(''); setResult(null); setPreview(null) }
+
+  // Esc 关闭弹窗。
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent): void => {
+      if (e.key === 'Escape') onClose()
+    }
+    window.addEventListener('keydown', onKey)
+    return () => { window.removeEventListener('keydown', onKey) }
+  }, [onClose])
+
+  return (
+    <div className={css.importModalOverlay} role="dialog" aria-modal="true" aria-label="导入小说" onClick={e => { if (e.target === e.currentTarget) onClose() }}>
+      <div className={css.importModal}>
+        <div className={css.importModalHead}>
+          <span className={css.panelTitle} style={{ margin: 0 }}> 导入小说</span>
+          <button type="button" className={`${css.button} ${css.buttonSmall}`} onClick={onClose} title="关闭">✕</button>
+        </div>
+
+        <div className={css.importModalTabs} role="tablist">
+          <button
+            type="button"
+            role="tab"
+            aria-selected={mode === 'dir'}
+            className={`${css.button} ${mode === 'dir' ? css.buttonPrimary : ''}`}
+            onClick={() => { switchMode('dir') }}
+          >
+             A · 已有项目目录
+          </button>
+          <button
+            type="button"
+            role="tab"
+            aria-selected={mode === 'text'}
+            className={`${css.button} ${mode === 'text' ? css.buttonPrimary : ''}`}
+            onClick={() => { switchMode('text') }}
+          >
+             B · txt/md 全本
+          </button>
+        </div>
+
+        <div className={css.importModalBody}>
+          {mode === 'dir' ? (
+            <>
+              <label className={css.importField}>
+                <span>项目目录（绝对路径）</span>
+                <input
+                  className={css.input}
+                  type="text"
+                  placeholder="例如 D:\novels\我的小说"
+                  value={dir}
+                  onChange={e => { setDir(e.target.value) }}
+                />
+              </label>
+              <div className={css.importHint}>
+                目录需含 novel-project.json。已在书架中的目录会直接切换激活，不会重复登记。
+              </div>
+            </>
+          ) : (
+            <>
+              {/* 文件选择 + 预览 */}
+              <input
+                ref={fileInputRef}
+                type="file"
+                accept=".txt,.md,text/plain,text/markdown"
+                style={{ display: 'none' }}
+                onChange={e => { void onPickFile(e.target.files?.[0]); e.target.value = '' }}
+              />
+              <div className={css.importField}>
+                <span>全本文本文件（txt / md）</span>
+                <button
+                  type="button"
+                  className={`${css.button} ${css.buttonPrimary}`}
+                  onClick={() => { fileInputRef.current?.click() }}
+                >
+                   选择文件
+                </button>
+              </div>
+              {fileName !== '' && (
+                <div className={css.importFileInfo}>
+                  <span>已选择：{fileName}</span>
+                  {previewing && <span className={css.meta}>正在拆章预览…</span>}
+                </div>
+              )}
+              {preview !== null && (
+                <div className={css.importPreview}>
+                  <span> 《{preview.bookName}》 · 识别到 {preview.chapters.length} 章</span>
+                  {preview.chapters.length > 0 && (
+                    <ul className={css.importPreviewList}>
+                      {preview.chapters.slice(0, 5).map(c => (
+                        <li key={c.no}>第{c.no}章 {c.title}（{c.chars} 字）</li>
+                      ))}
+                      {preview.chapters.length > 5 && <li className={css.meta}>… 共 {preview.chapters.length} 章</li>}
+                    </ul>
+                  )}
+                  {preview.skipped.length > 0 && (
+                    <span className={css.meta}>
+                      跳过 {preview.skipped.length} 个过短章节：{preview.skipped.slice(0, 5).join('、')}
+                      {preview.skipped.length > 5 ? ' 等' : ''}
+                    </span>
+                  )}
+                </div>
+              )}
+
+              {/* 输出目录 + 高级路径选项 */}
+              <label className={css.importField}>
+                <span>输出目录（可选，默认 ~/.dsh/novels/书名）</span>
+                <input
+                  className={css.input}
+                  type="text"
+                  placeholder="留空使用默认目录"
+                  value={outDir}
+                  onChange={e => { setOutDir(e.target.value) }}
+                />
+              </label>
+              <button
+                type="button"
+                className={`${css.button} ${css.buttonSmall}`}
+                onClick={() => { setShowPath(!showPath) }}
+              >
+                {showPath ? '▾ 收起高级选项' : '▸ 高级：使用服务器本地文件路径'}
+              </button>
+              {showPath && (
+                <label className={css.importField}>
+                  <span>服务器本地文件绝对路径（大文件或服务器端已有文件时用）</span>
+                  <input
+                    className={css.input}
+                    type="text"
+                    placeholder="例如 D:\novels\全本.txt"
+                    value={filePath}
+                    onChange={e => { setFilePath(e.target.value) }}
+                  />
+                </label>
+              )}
+              <div className={css.importHint}>
+                服务器按「第X章/第X回/第X节/第X卷」、中文数字章节（一、二、三…）、序章/楔子/尾声、英文 Chapter N 拆章；正文过短（&lt;50 字）的章节会跳过并列出。
+              </div>
+            </>
+          )}
+
+          {error !== '' && <div className={css.importError}>{error}</div>}
+
+          {result !== null && (
+            <div className={css.importResult}>
+              {result.kind === 'dir' ? (
+                <>
+                  <span> 已{result.existed === true ? '重新激活' : '登记'}《{result.bookName}》</span>
+                  <span className={css.meta}>
+                    {result.existed === true
+                      ? '该目录已在书架中，现已切换为当前书；工作台数据按该书目录加载。'
+                      : '已加入书架并设为当前书，进入工作台即可看到全部模块。'
+                    }
+                  </span>
+                </>
+              ) : (
+                <>
+                  <span> 《{result.bookName}》导入完成：{result.chapters} 章</span>
+                  {(result.skipped ?? []).length > 0 && (
+                    <span className={css.meta}>
+                      跳过 {result.skipped!.length} 个过短章节：{result.skipped!.slice(0, 8).join('、')}
+                      {result.skipped!.length > 8 ? ` 等 ${result.skipped!.length} 个` : ''}
+                    </span>
+                  )}
+                  <span className={css.meta}>章节已按「written」登记，进入工作台后逐章审稿/补设定即可。</span>
+                </>
+              )}
+            </div>
+          )}
+        </div>
+
+        <div className={css.importModalActions}>
+          <button type="button" className={`${css.button} ${css.buttonSmall}`} onClick={onClose}>关闭</button>
+          <button
+            type="button"
+            className={`${css.button} ${css.buttonPrimary}`}
+            disabled={busy}
+            onClick={runImport}
+          >
+            {busy ? '导入中…' : '开始导入'}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/client/panel/KnowledgeBaseView.tsx

@@ -0,0 +1,125 @@
+/**
+ * 书内知识库：添加/删除参考资料，生成/规划时自动检索注入。
+ * T2 主从布局：左列文档列表 + 新建入口，右侧文档详情 / 新建表单。
+ */
+import { useEffect, useState } from 'react'
+import type { NovelApi } from '../api.ts'
+import type { KnowledgeDoc } from '../../protocol.ts'
+import css from './panel.module.css'
+
+export default function KnowledgeBaseView({ api }: { api: NovelApi }): JSX.Element {
+  const [docs, setDocs] = useState<KnowledgeDoc[]>([])
+  const [title, setTitle] = useState('')
+  const [content, setContent] = useState('')
+  const [busy, setBusy] = useState(false)
+  const [notice, setNotice] = useState('')
+  const [error, setError] = useState('')
+  /** 左列选中的文档 id；null 且 addMode=false 时显示空态。 */
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  /** 新建模式：右栏显示添加表单。 */
+  const [addMode, setAddMode] = useState(false)
+
+  const load = async (): Promise<void> => {
+    try {
+      const r = await api.knowledgeList()
+      setDocs(r.docs)
+    } catch (e) { setError((e as Error).message) }
+  }
+  useEffect(() => { void load() }, [])
+
+  const add = async (): Promise<void> => {
+    if (title.trim() === '') { setError('标题不能为空'); return }
+    setBusy(true); setError(''); setNotice('')
+    try {
+      const r = await api.knowledgeAdd({ title: title.trim(), content: content.trim() })
+      setDocs(r.docs); setTitle(''); setContent(''); setNotice(' 已添加')
+      setAddMode(false)
+      const added = r.docs[r.docs.length - 1]
+      if (added !== undefined) setSelectedId(added.id)
+    } catch (e) { setError((e as Error).message) } finally { setBusy(false) }
+  }
+
+  const remove = async (id: string): Promise<void> => {
+    setBusy(true); setError('')
+    try {
+      const r = await api.knowledgeRemove(id)
+      setDocs(r.docs)
+      if (selectedId === id) setSelectedId(null)
+    } catch (e) { setError((e as Error).message) } finally { setBusy(false) }
+  }
+
+  const selected = docs.find(d => d.id === selectedId)
+
+  return (
+    <div className={css.authorPageBodyFlow}>
+      <div className={css.card} style={{ padding: 0, overflow: 'hidden' }}>
+        <div className={css.t2Master} style={{ minHeight: 420 }}>
+          <aside className={css.t2Rail} aria-label="知识库文档">
+            <div className={css.t2RailHead}> 书内知识库</div>
+            <button
+              type="button"
+              className={css.t2RailBtn}
+              data-active={addMode ? '' : undefined}
+              onClick={() => { setAddMode(true); setSelectedId(null) }}
+              title="添加一篇参考文档（生成时按章节检索注入）"
+            >
+              <span aria-hidden>＋</span><span>新建文档</span>
+            </button>
+            <div className={css.t2RailSep} />
+            {docs.length === 0 ? (
+              <div className={css.t2RailMeta}>暂无文档</div>
+            ) : docs.map(d => (
+              <button
+                key={d.id}
+                type="button"
+                role="tab"
+                aria-selected={!addMode && selectedId === d.id}
+                className={css.t2RailBtn}
+                data-active={!addMode && selectedId === d.id ? '' : undefined}
+                title={d.content.slice(0, 80)}
+                onClick={() => { setAddMode(false); setSelectedId(d.id) }}
+              >
+                <span aria-hidden></span>
+                <span style={{ flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{d.title}</span>
+              </button>
+            ))}
+            <div className={css.t2RailSep} />
+            <div className={css.t2RailMeta}>共 {docs.length} 篇 · 正文生成时按当前章节检索注入</div>
+          </aside>
+          <div className={css.t2Content}>
+            {addMode ? (
+              <>
+                <span className={css.cardTitleLg}>＋ 新建文档</span>
+                <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-6)', maxWidth: 'var(--nf-measure, 720px)' }}>
+                  <input className={css.input} value={title} onChange={e => setTitle(e.target.value)} placeholder="标题（如：天机锁设定 / 止水驿关系表）" />
+                  <textarea className={css.input} style={{ minHeight: 160, resize: 'vertical' }} value={content} onChange={e => setContent(e.target.value)} placeholder="内容（将被检索注入生成提示）" />
+                  <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--nf-space-8)' }}>
+                    <button type="button" className={`${css.button} ${css.buttonPrimary}`} disabled={busy} onClick={() => { void add() }}>添加</button>
+                    <button type="button" className={css.button} onClick={() => { setAddMode(false) }}>取消</button>
+                    {notice !== '' && <span style={{ fontSize: 'var(--nf-fs-12)', color: 'var(--nf-success)' }}>{notice}</span>}
+                  </div>
+                </div>
+              </>
+            ) : selected !== undefined ? (
+              <>
+                <div className={css.row} style={{ justifyContent: 'space-between', flexWrap: 'wrap' }}>
+                  <span className={css.cardTitleLg}> {selected.title}</span>
+                  <button type="button" className={`${css.button} ${css.buttonSmall}`} disabled={busy} onClick={() => { void remove(selected.id) }}>删除</button>
+                </div>
+                <div className={`${css.planBeats} ${css.docsSurface}`}>
+                  <div style={{ fontSize: 'var(--nf-fs-14)', lineHeight: 1.7, whiteSpace: 'pre-wrap' }}>{selected.content !== '' ? selected.content : '（空文档）'}</div>
+                </div>
+              </>
+            ) : (
+              <div className={css.planDetailEmpty} style={{ minHeight: 300 }}>
+                <span className={css.meta}>← 从左侧选择文档，或「＋ 新建文档」添加参考资料。</span>
+              </div>
+            )}
+            {error !== '' && <div style={{ color: 'var(--nf-error)', fontSize: 'var(--nf-fs-14)' }}> {error}</div>}
+          </div>
+        </div>
+      </div>
+      <span className={css.meta}>自由参考文档：零散设定/资料/碎片放这里；结构化设定（世界观/角色/境界/红线）请放「本书设定」。</span>
+    </div>
+  )
+}

package/src/client/panel/LiveFeedLog.tsx

@@ -0,0 +1,204 @@
+/**
+ * 「实时调用 / LIVE」—— 内嵌到 AI 进度窗的下半区（详情层），不再独立浮窗。
+ * 连接 /llm-live/stream，按 LLM 调用分组展示模型实时输出。
+ *
+ * 除实时输出外，这里还承担两件与「花了多少」有关的事：
+ *   1) 每次调用显示 token 用量（输入↑ / 输出↓ / 思考）与耗时、首字耗时；
+ *   2) 「查看 Prompt」按 sessionId 拉取这次调用**实际发送**的 system / user。
+ * 顶部另有一条「本次运行」累计条（进程内，重启归零）。
+ *
+ * 状态色全部走 panel.module.css 的 .lfPill / .lfDot（主题令牌 + --nf-streaming），
+ * 不再内联硬编码色；布局性 inline style 保留（均为令牌引用或动态值）。
+ */
+
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useLlmLiveFeed, type LlmLiveSession } from '../llmLive.ts'
+import { NOVEL_API, type LlmPromptRecord, type LlmUsageSummary } from '../../protocol.ts'
+import css from './panel.module.css'
+
+/** 毫秒 → 紧凑可读（840ms / 1.2s）。 */
+function fmtMs(ms: number | undefined): string {
+  if (ms === undefined || ms <= 0) return ''
+  return ms < 1000 ? Math.round(ms) + 'ms' : (ms / 1000).toFixed(1) + 's'
+}
+
+/** token 数 → 紧凑（12.3k）。 */
+function fmtTokens(n: number | undefined): string {
+  if (n === undefined || n <= 0) return '0'
+  return n < 1000 ? String(n) : (n / 1000).toFixed(1) + 'k'
+}
+
+/** 一次调用的用量摘要（输入↑ / 输出↓ / 思考 / 缓存）。 */
+function usageText(s: LlmLiveSession): string {
+  const u = s.usage
+  if (u === undefined) return '用量未上报'
+  const parts = ['↑' + fmtTokens(u.inputTokens), '↓' + fmtTokens(u.outputTokens)]
+  if ((u.reasoningTokens ?? 0) > 0) parts.push('思考 ' + fmtTokens(u.reasoningTokens))
+  if ((u.cacheReadTokens ?? 0) > 0) parts.push('缓存 ' + fmtTokens(u.cacheReadTokens))
+  return parts.join(' · ')
+}
+
+function PhasePill({ s }: { s: LlmLiveSession }): JSX.Element {
+  return (
+    <span className={css.lfPill} data-phase={s.phase}>
+      {s.phase === 'requesting' ? '请求中' : s.phase === 'streaming' ? '生成中' : s.phase === 'failed' ? '失败' : '完成'}
+    </span>
+  )
+}
+
+/** 「查看 Prompt」弹层：拉取这次调用实际发送的 system + user。 */
+function PromptDialog({ sessionId, onClose }: { sessionId: string; onClose: () => void }): JSX.Element {
+  const [record, setRecord] = useState<LlmPromptRecord | null>(null)
+  const [error, setError] = useState('')
+  const [tab, setTab] = useState<'user' | 'system'>('user')
+  useEffect(() => {
+    let cancelled = false
+    void (async () => {
+      try {
+        const res = await fetch(NOVEL_API.llmPrompt + '?sessionId=' + encodeURIComponent(sessionId))
+        if (!res.ok) {
+          const body = await res.json().catch(() => ({})) as { error?: string }
+          throw new Error(body.error ?? 'HTTP ' + res.status)
+        }
+        const data = await res.json() as LlmPromptRecord
+        if (!cancelled) setRecord(data)
+      } catch (err) {
+        if (!cancelled) setError((err as Error).message)
+      }
+    })()
+    return () => { cancelled = true }
+  }, [sessionId])
+  const text = record === null ? '' : (tab === 'user' ? (record.user ?? '') : (record.system ?? ''))
+  return (
+    <div
+      style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,.45)', zIndex: 60, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20 }}
+      onClick={onClose}
+    >
+      <div
+        onClick={e => e.stopPropagation()}
+        style={{ background: 'var(--nf-bg)', border: '1px solid var(--nf-border)', borderRadius: 10, width: 'min(880px, 96vw)', maxHeight: '86vh', display: 'flex', flexDirection: 'column', padding: 12, gap: 8 }}
+      >
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+          <b style={{ flex: 1, fontSize: 13 }}>实际发送的 Prompt{record?.label !== undefined ? ' · ' + record.label : ''}</b>
+          {record !== null && <span className={css.meta}>共 {record.chars.toLocaleString()} 字符{record.truncated === true ? '（记录已截断）' : ''}</span>}
+          <button type="button" className={css.iconButton} title="关闭" onClick={onClose}>×</button>
+        </div>
+        <div style={{ display: 'flex', gap: 6 }}>
+          <button type="button" className={css.button + (tab === 'user' ? ' ' + css.buttonPrimary : '')} onClick={() => setTab('user')}>User / 输入</button>
+          <button type="button" className={css.button + (tab === 'system' ? ' ' + css.buttonPrimary : '')} onClick={() => setTab('system')}>System / 系统提示</button>
+        </div>
+        {error !== '' && <span style={{ color: 'var(--nf-error)', fontSize: 12 }}>{error}</span>}
+        {record === null && error === '' && <span className={css.meta}>加载中…</span>}
+        {record !== null && (
+          <pre style={{ flex: 1, minHeight: 0, overflow: 'auto', whiteSpace: 'pre-wrap', wordBreak: 'break-word', fontSize: 11, lineHeight: 1.55, background: 'var(--nf-bg-inset)', borderRadius: 8, padding: 8, margin: 0 }}>
+            {text === '' ? '（空）' : text}
+          </pre>
+        )}
+      </div>
+    </div>
+  )
+}
+
+function SessionCard({ s, brief, onShowPrompt }: { s: LlmLiveSession; brief: boolean; onShowPrompt: (sessionId: string) => void }): JSX.Element {
+  const active = s.phase === 'requesting' || s.phase === 'streaming'
+  const dotState = active ? 'streaming' : s.phase
+  return (
+    <div style={{ borderBottom: '1px solid var(--nf-border)', padding: '7px 6px' }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12 }}>
+        <span className={css.lfDot} data-state={dotState} />
+        <b style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{s.label}</b>
+        {s.model !== undefined && <span style={{ color: 'var(--nf-text-2)', fontSize: 10, maxWidth: 130, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{s.model}</span>}
+        <PhasePill s={s} />
+      </div>
+      <div style={{ fontSize: 10, color: 'var(--nf-text-2)', marginTop: 2, display: 'flex', gap: 8, flexWrap: 'wrap', alignItems: 'center' }}>
+        <span>{s.totalChars} 字符</span>
+        <span title="输入 / 输出 token">{usageText(s)}</span>
+        {s.elapsedMs !== undefined && <span title="总耗时">用时 {fmtMs(s.elapsedMs)}</span>}
+        {s.firstTokenMs !== undefined && <span title="首个字返回耗时">首字 {fmtMs(s.firstTokenMs)}</span>}
+        {s.phaseMessage !== '' && <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{s.phaseMessage}</span>}
+        {s.hasPrompt === true && (
+          <button
+            type="button"
+            title="查看这次调用实际发送的 Prompt"
+            onClick={() => onShowPrompt(s.sessionId)}
+            style={{ border: '1px solid var(--nf-border)', background: 'var(--nf-bg)', color: 'var(--nf-text)', borderRadius: 6, fontSize: 10, padding: '0 5px', cursor: 'pointer' }}
+          >查看 Prompt</button>
+        )}
+      </div>
+      {!brief && s.preview !== '' && (
+        <pre style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word', fontSize: 11, lineHeight: 1.5, color: 'var(--nf-text)', backgroundColor: 'var(--nf-bg-inset)', borderRadius: 8, padding: 6, marginTop: 6, marginBottom: 0 }}>{s.preview}</pre>
+      )}
+    </div>
+  )
+}
+
+export default function LiveFeedLog(): JSX.Element {
+  const [brief, setBrief] = useState(true)
+  const [cleared, setCleared] = useState(false)
+  const [promptId, setPromptId] = useState<string | null>(null)
+  const { connected, sessions } = useLlmLiveFeed(true)
+  const active = sessions.filter(s => s.phase === 'requesting' || s.phase === 'streaming').length
+  const shown = useMemo(() => (cleared ? sessions.slice(-8) : sessions), [sessions, cleared])
+
+  // 本次运行用量（进程内累计，来自 /status.usage）。
+  const [usage, setUsage] = useState<LlmUsageSummary | null>(null)
+  const loadUsage = useCallback(async () => {
+    try {
+      const res = await fetch(NOVEL_API.status + '?slim=1')
+      if (!res.ok) return
+      const data = await res.json() as { usage?: LlmUsageSummary }
+      setUsage(data.usage ?? null)
+    } catch { /* 用量是尽力而为，不影响实况 */ }
+  }, [])
+  useEffect(() => {
+    void loadUsage()
+    const timer = window.setInterval(() => { void loadUsage() }, 15_000)
+    return () => { window.clearInterval(timer) }
+  }, [loadUsage])
+
+  const resetUsage = useCallback(async (): Promise<void> => {
+    try {
+      await fetch(NOVEL_API.usageReset, { method: 'POST', headers: { 'content-type': 'application/json' }, body: '{}' })
+      await loadUsage()
+    } catch { /* ignore */ }
+  }, [loadUsage])
+
+  return (
+    <div style={{ borderTop: '1px solid var(--nf-border)', marginTop: 8, paddingTop: 6, flex: '1 1 auto', minHeight: 140, display: 'flex', flexDirection: 'column' }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12, padding: '2px 4px' }}>
+        <span className={css.lfDot} data-size="lg" data-state={connected ? 'ok' : 'idle'} />
+        <b style={{ flex: 1 }}>实时调用 / LIVE</b>
+        <span className={css.lfPill} data-phase={active > 0 ? 'streaming' : 'requesting'}>
+          {active > 0 ? `${active} 项进行中` : connected ? '等待生成' : '正在连接'}
+        </span>
+        <button type="button" title={brief ? '详细' : '简略'} onClick={() => setBrief(b => !b)} style={{ border: '1px solid var(--nf-border)', background: 'var(--nf-bg)', color: 'var(--nf-text)', borderRadius: 6, fontSize: 10, padding: '1px 6px', cursor: 'pointer' }}>{brief ? '详细' : '简略'}</button>
+        <button type="button" title="清空当前窗口" onClick={() => setCleared(true)} style={{ border: '1px solid var(--nf-border)', background: 'var(--nf-bg)', color: 'var(--nf-text)', borderRadius: 6, fontSize: 10, padding: '1px 6px', cursor: 'pointer' }}>清空</button>
+      </div>
+      {usage !== null && usage.calls > 0 && (
+        <div
+          title="本次运行累计（进程内，重启归零）"
+          style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap', fontSize: 10, color: 'var(--nf-text-2)', padding: '3px 4px', borderTop: '1px dashed var(--nf-border)' }}
+        >
+          <span>本次运行：{usage.calls} 次调用{usage.failed > 0 ? `（失败 ${usage.failed}）` : ''}</span>
+          <span>↑{fmtTokens(usage.inputTokens)}</span>
+          <span>↓{fmtTokens(usage.outputTokens)}</span>
+          {usage.reasoningTokens > 0 && <span>思考 {fmtTokens(usage.reasoningTokens)}</span>}
+          <span>用时 {fmtMs(usage.elapsedMs)}</span>
+          {usage.callsWithoutUsage > 0 && <span>（{usage.callsWithoutUsage} 次未上报用量）</span>}
+          <button
+            type="button"
+            title="清零本次运行用量"
+            onClick={() => { void resetUsage() }}
+            style={{ marginLeft: 'auto', border: '1px solid var(--nf-border)', background: 'var(--nf-bg)', color: 'var(--nf-text)', borderRadius: 6, fontSize: 10, padding: '1px 6px', cursor: 'pointer' }}
+          >重新计数</button>
+        </div>
+      )}
+      <div style={{ flex: 1, minHeight: 0, overflowY: 'auto', display: 'flex', flexDirection: 'column' }}>
+        {shown.length === 0 ? (
+          <div style={{ padding: 10, fontSize: 12, color: 'var(--nf-text-2)' }}>{connected ? '暂无实时调用。开始一次生成/审稿/计划即可看到。' : '正在连接 AI 实况服务…'}</div>
+        ) : shown.map(s => <SessionCard key={s.sessionId} s={s} brief={brief} onShowPrompt={setPromptId} />)}
+      </div>
+      {promptId !== null && <PromptDialog sessionId={promptId} onClose={() => setPromptId(null)} />}
+    </div>
+  )
+}