@waterwx/dsh-novel-forge 1.8.0 → 1.9.0

package/src/client/panel/ModelManager.tsx

@@ -0,0 +1,205 @@
+/**
+ * 模型管理（DSH 风格）：两块分区——
+ * ① 模型（提供方管理）：提供方卡片（编辑/删除）+ 添加提供方 / 添加自定义提供方；
+ * ② 当前写作模型：提供商/模型下拉 + 测试连通 + 推理强度。
+ */
+import { useCallback, useEffect, useState } from 'react'
+import { PlugZap, Plus, Trash2, RefreshCw, X } from 'lucide-react'
+import type { NovelApi } from '../api.ts'
+import type { SavedModel, AddModelRequest, LlmModelOption, LlmVendorOption } from '../../protocol.ts'
+import { LLM_VENDORS } from '../../protocol.ts'
+import { tt } from './helpers.ts'
+import css from './panel.module.css'
+
+/** 目录不可用时回退的内置预设（历史行为）。 */
+export const FALLBACK_MODEL_PRESETS = ['deepseek-v4-flash', 'deepseek-v4-pro', 'deepseek-chat', 'deepseek-reasoner'] as const
+
+const CUSTOM = '__custom__'
+interface TestState { testing: boolean; ok?: boolean; ms?: number; message?: string }
+interface ProviderInfo { id: string; name: string }
+type AddPanel = 'none' | 'standard' | 'custom'
+
+export interface ModelManagerProps {
+  api: NovelApi
+  provider: string
+  model: string
+  savedModels: SavedModel[]
+  onProvider: (provider: string) => void
+  onModel: (model: string) => void
+  onSavedModels: (models: SavedModel[]) => void
+}
+
+function fallbackVendors(): LlmVendorOption[] {
+  return LLM_VENDORS.map(v => ({ id: v.route, name: v.name, models: v.models, apiKeyEnv: v.apiKeyEnv, builtin: v.builtin }))
+}
+
+export function ModelManager({ api, provider, model, onProvider, onModel }: ModelManagerProps): JSX.Element {
+  // ---- 当前写作模型
+  const [configuredProviders, setConfiguredProviders] = useState<ProviderInfo[]>([])
+  const [providerModels, setProviderModels] = useState<LlmModelOption[]>([])
+  const [modelsLoading, setModelsLoading] = useState(false)
+  const [providerCustom, setProviderCustom] = useState(false)
+  const [modelCustom, setModelCustom] = useState(false)
+  const [test, setTest] = useState<TestState>({ testing: false })
+
+  // ---- 提供方管理
+  const [vendors, setVendors] = useState<LlmVendorOption[]>(fallbackVendors())
+  const [addPanel, setAddPanel] = useState<AddPanel>('none')
+  const [editTarget, setEditTarget] = useState('')
+  const [vendorId, setVendorId] = useState('zai-coding-cn')
+  const [addModel, setAddModel] = useState('')
+  const [addApiKey, setAddApiKey] = useState('')
+  const [addName, setAddName] = useState('')
+  const [custProvider, setCustProvider] = useState('')
+  const [custName, setCustName] = useState('')
+  const [custBaseURL, setCustBaseURL] = useState('')
+  const [custProtocol, setCustProtocol] = useState('openai-completions')
+  const [custModel, setCustModel] = useState('')
+  const [custApiKey, setCustApiKey] = useState('')
+  const [savingAdd, setSavingAdd] = useState(false)
+  const [addMsg, setAddMsg] = useState('')
+  const [addErr, setAddErr] = useState('')
+
+
+  const loadProviders = useCallback(async (): Promise<void> => {
+    try { const r = await api.llmProviders(); if (r.providers.length > 0) setConfiguredProviders(r.providers) } catch { /* 兜底 */ }
+  }, [api])
+  const loadVendors = useCallback(async (): Promise<void> => {
+    try { const r = await api.llmVendors(); if (r.vendors.length > 0) setVendors(r.vendors) } catch { /* 静态兜底 */ }
+  }, [api])
+  const loadProviderModels = useCallback(async (p: string): Promise<void> => {
+    setModelsLoading(true)
+    try { const r = await api.llmModels(p); setProviderModels(r.models) } catch { setProviderModels([]) } finally { setModelsLoading(false) }
+  }, [api])
+
+  useEffect(() => { void loadProviders(); void loadVendors() }, [api, loadProviders, loadVendors])
+  useEffect(() => { if (provider !== '') void loadProviderModels(provider) }, [provider, loadProviderModels])
+
+  const currentVendor = vendors.find(v => v.id === vendorId)
+
+  const runTest = async (): Promise<void> => {
+    const p = provider.trim(); const m = model.trim()
+    if (p === '' || m === '' || test.testing) return
+    setTest({ testing: true })
+    try { const r = await api.llmTest(p, m); setTest({ testing: false, ok: r.ok, ms: r.ms, message: r.message }) }
+    catch (err) { setTest({ testing: false, ok: false, message: (err as Error).message }) }
+  }
+
+  const openPanel = (panel: AddPanel, target = ''): void => {
+    setAddPanel(panel); setEditTarget(target); setAddMsg(''); setAddErr('')
+    if (panel === 'standard') { setVendorId(target !== '' ? target : 'zai-coding-cn'); setAddModel(''); setAddApiKey(''); setAddName('') }
+    else if (panel === 'custom') { setCustProvider(target); setCustName(''); setCustBaseURL(''); setCustModel(''); setCustApiKey('') }
+  }
+
+  const saveStandard = async (): Promise<void> => {
+    if (vendorId.trim() === '') { setAddErr('请选择提供方'); return }
+    if (addApiKey.trim() === '') { setAddErr('请填写 API 密钥（或留空使用环境认证）'); return }
+    const modelId = addModel.trim()
+    setSavingAdd(true); setAddMsg(''); setAddErr('')
+    try {
+      const res = await api.addModel({ mode: 'vendor', vendor: vendorId, model: modelId || vendorId, apiKey: addApiKey.trim(), apiKeyEnv: currentVendor?.apiKeyEnv, name: addName.trim() || undefined })
+      setAddMsg(res.message ?? '已保存'); setAddPanel('none'); setAddApiKey(''); setAddModel(''); setAddName(''); setEditTarget('')
+      await loadProviders()
+    } catch (err) { setAddErr((err as Error).message) } finally { setSavingAdd(false) }
+  }
+
+  const saveCustom = async (): Promise<void> => {
+    if (custProvider.trim() === '') { setAddErr('请填 Provider ID'); return }
+    if (custBaseURL.trim() === '') { setAddErr('请填 API 地址'); return }
+    if (custApiKey.trim() === '') { setAddErr('请填 API 密钥（或留空使用环境认证）'); return }
+    if (custModel.trim() === '') { setAddErr('请填模型 id（或点“获取可用模型”）'); return }
+    setSavingAdd(true); setAddMsg(''); setAddErr('')
+    try {
+      const res = await api.addModel({ mode: 'custom', provider: custProvider.trim(), model: custModel.trim(), apiKey: custApiKey.trim(), baseURL: custBaseURL.trim(), name: custName.trim() || undefined })
+      setAddMsg(res.message ?? '已创建提供方'); setAddPanel('none'); setCustProvider(''); setCustName(''); setCustBaseURL(''); setCustModel(''); setCustApiKey('')
+      await loadProviders()
+    } catch (err) { setAddErr((err as Error).message) } finally { setSavingAdd(false) }
+  }
+
+  const removeProvider = async (p: ProviderInfo): Promise<void> => {
+    if (!window.confirm('删除提供方「' + (p.name !== '' ? p.name : p.id) + '」？将移除 DSH 配置与 API 密钥。')) return
+    try { const vendor = vendors.find(v => v.id === p.id); await api.removeProvider({ provider: p.id, apiKeyEnv: vendor?.apiKeyEnv }); await loadProviders() }
+    catch (err) { setAddErr((err as Error).message) }
+  }
+
+
+  const providerOptions: ProviderInfo[] = configuredProviders.some(p => p.id === provider) ? configuredProviders : (provider !== '' && provider !== CUSTOM ? [{ id: provider, name: provider }, ...configuredProviders] : configuredProviders)
+
+  const modelOptions: LlmModelOption[] = modelCustom ? [] : (provider === 'deepseek-official'
+    ? [...FALLBACK_MODEL_PRESETS.map(id => ({ id, name: id })), ...providerModels.filter(m => !(FALLBACK_MODEL_PRESETS as readonly string[]).includes(m.id))]
+    : providerModels)
+  const modelInList = modelOptions.some(m => m.id === model)
+  const modelValue = modelCustom || (!modelInList && model !== '' && modelOptions.length > 0) ? CUSTOM : model
+  const providerValue = providerCustom ? CUSTOM : provider
+
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-24)' }}>
+      {/* ① 模型（提供方管理） */}
+      <div className={css.card + ' ' + css.settingsCard} style={{ gap: 'var(--nf-space-16)' }}>
+        <span className={css.cardTitle}>模型</span>
+        <span className={css.meta}>填入各提供方的 API 密钥即可使用其模型。</span>
+        {configuredProviders.map(p => {
+          const isBuiltin = p.id === 'deepseek-official'
+          const isKnownVendor = vendors.some(v => v.id === p.id)
+          return (
+            <div key={p.id} style={{ border: '1px solid var(--nf-border)', borderRadius: 'var(--nf-radius-12)', padding: 'var(--nf-space-12)', display: 'flex', alignItems: 'center', gap: 'var(--nf-space-8)', flexWrap: 'wrap', justifyContent: 'space-between' }}>
+              <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--nf-space-8)' }}><span style={{ fontWeight: 600 }}>{p.name !== '' && p.name !== p.id ? p.name : p.id}</span><span style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--nf-success)' }} /></div>
+              <div style={{ display: 'flex', gap: 'var(--nf-space-6)', alignItems: 'center' }}>
+                {!isBuiltin && <button type="button" className={css.button + ' ' + css.buttonSmall} onClick={() => openPanel(isKnownVendor ? 'standard' : 'custom', p.id)}>{tt('settings.edit')}</button>}
+                {!isBuiltin && <button type="button" className={css.button + ' ' + css.buttonSmall} style={{ color: 'var(--nf-error)' }} onClick={() => { void removeProvider(p) }}>{tt('settings.delete')}</button>}
+              </div>
+            </div>
+          )
+        })}
+        <div className={css.row} style={{ gap: 'var(--nf-space-10)', flexWrap: 'wrap' }}>
+          <button type="button" className={css.button + ' ' + css.buttonSmall} onClick={() => openPanel('standard')}><Plus size={13} style={{ verticalAlign: -2 }} /> 添加提供方</button>
+          <button type="button" className={css.button + ' ' + css.buttonSmall} onClick={() => openPanel('custom')}><Plus size={13} style={{ verticalAlign: -2 }} /> 添加自定义提供方</button>
+        </div>
+
+        {addPanel !== 'none' && (
+          <div style={{ border: '1px solid var(--nf-border)', borderRadius: 'var(--nf-radius-12)', padding: 'var(--nf-space-12)', display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-12)' }}>
+            <div className={css.row} style={{ justifyContent: 'space-between', alignItems: 'center' }}><span className={css.fieldLabel}>{addPanel === 'standard' ? (editTarget !== '' ? '编辑提供方' : '添加提供方') : '自定义提供方'}</span><button type="button" className={css.button + ' ' + css.buttonSmall} onClick={() => openPanel('none')}><X size={13} style={{ verticalAlign: -2 }} /> 关闭</button></div>
+            {addPanel === 'standard' ? (
+              <>
+                <div className={css.field}><label className={css.fieldLabel}>提供方</label><select className={css.input} value={vendorId} onChange={e => setVendorId(e.target.value)}>{vendors.map(v => <option key={v.id} value={v.id}>{v.name}</option>)}</select></div>
+                <div className={css.field}><label className={css.fieldLabel}>API 密钥</label><input className={css.input} type="password" value={addApiKey} onChange={e => setAddApiKey(e.target.value)} placeholder="输入 API 密钥，或留空使用环境认证" /></div>
+                <div className={css.field}><label className={css.fieldLabel}>模型 id（可选）</label><input className={css.input} value={addModel} onChange={e => setAddModel(e.target.value)} placeholder="例如 glm-5.3-flash" /></div>
+                <div className={css.row} style={{ justifyContent: 'flex-end', gap: 'var(--nf-space-8)' }}><button type="button" className={css.button + ' ' + css.buttonSmall} onClick={() => openPanel('none')}>取消</button><button type="button" className={css.button + ' ' + css.buttonSmall + ' ' + css.buttonPrimary} disabled={savingAdd} onClick={() => { void saveStandard() }}>{savingAdd ? '保存中…' : '保存'}</button></div>
+              </>
+            ) : (
+              <>
+                <div className={css.field}><label className={css.fieldLabel}>Provider ID</label><input className={css.input} value={custProvider} onChange={e => setCustProvider(e.target.value)} placeholder="acme-gateway" /></div>
+                <div className={css.field}><label className={css.fieldLabel}>显示名称</label><input className={css.input} value={custName} onChange={e => setCustName(e.target.value)} placeholder="显示名称" /></div>
+                <div className={css.field}><label className={css.fieldLabel}>API 地址</label><input className={css.input} value={custBaseURL} onChange={e => setCustBaseURL(e.target.value)} placeholder="https://gateway.example/v1" /></div>
+                <div className={css.field}><label className={css.fieldLabel}>API 协议</label><select className={css.input} value={custProtocol} onChange={e => setCustProtocol(e.target.value)}><option value="openai-completions">openai-completions</option></select></div>
+                <div className={css.field}><label className={css.fieldLabel}>API 密钥</label><input className={css.input} type="password" value={custApiKey} onChange={e => setCustApiKey(e.target.value)} placeholder="输入 API 密钥" /></div>
+                <div className={css.field}><label className={css.fieldLabel}>模型目录 / 模型 id</label><input className={css.input} value={custModel} onChange={e => setCustModel(e.target.value)} placeholder="例如 glm-5.3-flash" /></div>
+                <div className={css.row} style={{ justifyContent: 'flex-end', gap: 'var(--nf-space-8)' }}><button type="button" className={css.button + ' ' + css.buttonSmall} onClick={() => openPanel('none')}>取消</button><button type="button" className={css.button + ' ' + css.buttonSmall + ' ' + css.buttonPrimary} disabled={savingAdd} onClick={() => { void saveCustom() }}>{savingAdd ? '创建中…' : '创建提供方'}</button></div>
+              </>
+            )}
+          </div>
+        )}
+        {addMsg !== '' && <span className={css.meta} style={{ color: 'var(--nf-success)' }}>✓ {addMsg}</span>}
+        {addErr !== '' && <span className={css.meta} style={{ color: 'var(--nf-error)' }}>✗ {addErr}</span>}
+      </div>
+
+      {/* ② 当前写作模型 */}
+      <div className={css.card + ' ' + css.settingsCard} style={{ gap: 'var(--nf-space-16)' }}>
+        <span className={css.cardTitle}>当前写作模型</span>
+        <div className={css.field}><label className={css.fieldLabel}>{tt('settings.provider')}</label><select className={css.input} value={providerValue} onChange={e => { const v = e.target.value; if (v === CUSTOM) setProviderCustom(true); else { setProviderCustom(false); onProvider(v) } }}>{providerOptions.map(p => <option key={p.id} value={p.id}>{p.name !== '' && p.name !== p.id ? p.name + '（' + p.id + '）' : p.id}</option>)}<option value={CUSTOM}>{tt('settings.customProvider')}</option></select>{providerCustom && <input className={css.input} style={{ marginTop: 'var(--nf-space-6)' }} value={provider} placeholder="provider 路由 id" onChange={e => onProvider(e.target.value)} />}</div>
+        <div className={css.field}>
+          <label className={css.fieldLabel}>{tt('settings.model')}</label>
+          <div className={css.row} style={{ gap: 'var(--nf-space-8)', flexWrap: 'wrap' }}>
+            <select className={css.input} style={{ flex: 1, minWidth: 200 }} value={modelValue} onChange={e => { const v = e.target.value; if (v === CUSTOM) setModelCustom(true); else { setModelCustom(false); onModel(v) } }}>{modelOptions.map(m => <option key={m.id} value={m.id}>{m.name !== '' && m.name !== m.id ? m.name + '（' + m.id + '）' : m.id}</option>)}<option value={CUSTOM}>{tt('settings.modelCustom')}</option></select>
+            <button type="button" className={css.button + ' ' + css.buttonSmall} disabled={modelsLoading || provider === ''} title="刷新模型" onClick={() => { void loadProviderModels(provider) }}><RefreshCw size={13} style={{ verticalAlign: -2 }} /> {modelsLoading ? '…' : tt('settings.refreshModels')}</button>
+            <button type="button" className={css.button + ' ' + css.buttonSmall} disabled={test.testing || provider.trim() === '' || model.trim() === ''} onClick={() => { void runTest() }} title={tt('settings.testHint')}><PlugZap size={13} style={{ verticalAlign: -2 }} /> {test.testing ? tt('settings.testRunning') : tt('settings.testConnection')}</button>
+          </div>
+          {modelCustom && <input className={css.input} style={{ marginTop: 'var(--nf-space-6)' }} value={model} placeholder={tt('settings.modelCustomPlaceholder')} onChange={e => onModel(e.target.value)} />}
+          <span className={css.meta} style={{ color: test.ok === true ? 'var(--nf-success)' : test.ok === false ? 'var(--nf-error)' : undefined }}>{test.testing ? tt('settings.testRunning') + '…' : test.ok === true ? '✓ ' + tt('settings.testOk') + ' · ' + (test.ms ?? '?') + 'ms' : test.ok === false ? '✗ ' + tt('settings.testFail') + (test.message !== undefined ? '：' + test.message : '') : tt('settings.testHint')}</span>
+        </div>
+      </div>
+    </div>
+  )
+}
+

package/src/client/panel/NovelPanel.tsx

@@ -9,6 +9,8 @@ import type { ReactElement } from 'react'
 import type { NovelApi } from '../api.ts'
 import type { PanelController } from './controller.ts'
 import { tt } from './helpers.ts'
+import { ModelManager } from './ModelManager.tsx'
+import { ReasoningSection } from './ReasoningSection.tsx'
 import { BarChart3, Book, BookMarked, BookOpen, Brain, Clapperboard, Factory, FileText, Folder, GitBranch, Library, MessageSquare, Palette, PenLine, PlugZap, RotateCcw, ScrollText, Search, Settings, Sparkles, Wrench } from 'lucide-react'
 import { AssistantTab } from './AssistantTab.tsx'
 import { AssetsTab } from './AssetsTab.tsx'
@@ -105,9 +107,6 @@ const NAV_GROUPS: ReadonlyArray<{ id: string; label: string; items: ReadonlyArra
 /** Settings tab — pinned to the bottom of the nav rail. */
 const SETTINGS_TAB: { id: NovelTab; label: string; icon: ReactElement } = { id: 'settings', label: tt('tab.settings'), icon: <Settings size={18} /> }
 
-/** Common DeepSeek model presets shown in settings; users can also type any model id. */
-const MODEL_PRESETS = ['deepseek-v4-flash', 'deepseek-v4-pro', 'deepseek-chat', 'deepseek-reasoner'] as const
-const REASONING_OPTIONS = ['off', 'low', 'high', 'max'] as const
 
 /** 设置页内子导航分组。 */
 const SETTINGS_SECTIONS: ReadonlyArray<{ id: 'model' | 'writing' | 'image' | 'files' | 'appearance'; label: string; icon: ReactElement }> = [
@@ -337,7 +336,6 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
   const [notice, setNotice] = useState('')
   const [progress, setProgress] = useState<ProgressLine[]>([])
   const [configDraft, setConfigDraft] = useState<NovelConfig | null>(null)
-  const [modelCustomMode, setModelCustomMode] = useState(false)
   const [expandedChapter, setExpandedChapter] = useState<number | null>(null)
   /** 复盘记录页：当前展开的章节号。 */
   const [expandedReviewChapter, setExpandedReviewChapter] = useState<number | null>(null)
@@ -706,7 +704,6 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
       const status = await api.status()
       setConfig(status.config)
       setConfigDraft(status.config)
-      setModelCustomMode(!(MODEL_PRESETS as readonly string[]).includes(status.config.model))
       setAuditStatus(status.audit ?? null)
       setProject(status.project ?? null)
       // 人物志存档同步：有 roleStatus 存档直接显示，无需重新刷新计算。
@@ -2084,6 +2081,7 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
         imageApiModel: configDraft.imageApiModel,
         imageApiEnabled: configDraft.imageApiEnabled ?? false,
         imageModels: configDraft.imageModels ?? [],
+        savedModels: configDraft.savedModels ?? [],
       })
       setConfig(result.config)
       setConfigDraft(result.config)
@@ -2411,6 +2409,11 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
           onBackground={(bg, blur) => { setThemeBg(bg); setThemeBgBlur(blur) }}
           onOpacity={(n) => { setThemeOpacity(n) }}
           adaptEnabled={config?.enableAdaptMode === true}
+          progress={progress}
+          busy={busy}
+          busyLabel={busyLabel}
+          liveBar={liveBar}
+          onClearProgress={() => { setProgress([]) }}
         />
       ) : viewMode === 'create' ? (
         /* 开书向导：独立页面 */
@@ -3835,65 +3838,25 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
             </div>
 
             {settingsTab === 'model' && (
-              <div className={`${css.card} ${css.settingsCard}`} style={{ gap: 'var(--nf-space-24)' }}>
-                <span className={css.cardTitle}><Brain size={18} style={{ verticalAlign: -3 }} /> 模型与推理</span>
-                <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-24)' }}>
-                  <div className={css.field}>
-                    <label className={css.fieldLabel}>{tt('settings.provider')}</label>
-                    <input className={css.input} value={configDraft.provider} onChange={e => { setConfigDraft({ ...configDraft, provider: e.target.value }) }} />
-                  </div>
-                  <div className={css.field}>
-                    <label className={css.fieldLabel}>{tt('settings.model')}</label>
-                    <select
-                      className={css.input}
-                      value={modelCustomMode ? '__custom__' : configDraft.model}
-                      onChange={e => {
-                        const v = e.target.value
-                        if (v === '__custom__') {
-                          setModelCustomMode(true)
-                        } else {
-                          setModelCustomMode(false)
-                          setConfigDraft({ ...configDraft, model: v })
-                        }
-                      }}
-                    >
-                      {MODEL_PRESETS.map(m => <option key={m} value={m}>{m}</option>)}
-                      <option value="__custom__">{tt('settings.modelCustom')}</option>
-                    </select>
-                    {modelCustomMode && (
-                      <input
-                        className={css.input}
-                        style={{ marginTop: 'var(--nf-space-6)' }}
-                        value={configDraft.model}
-                        placeholder={tt('settings.modelCustomPlaceholder')}
-                        onChange={e => { setConfigDraft({ ...configDraft, model: e.target.value }) }}
-                      />
-                    )}
-                  </div>
-                  <div className={css.field}>
-                    <label className={css.fieldLabel}>{tt('settings.reasoningEffort')}</label>
-                    <select
-                      className={css.input}
-                      value={configDraft.reasoningEffort ?? 'off'}
-                      onChange={e => { setConfigDraft({ ...configDraft, reasoningEffort: e.target.value as NovelConfig['reasoningEffort'] }) }}
-                    >
-                      {REASONING_OPTIONS.map(v => <option key={v} value={v}>{tt(`settings.reasoning.${v}`)}</option>)}
-                    </select>
-                    <span className={css.meta}>{tt('settings.reasoningHint')}</span>
-                  </div>
-                  <div className={css.field}>
-                    <label className={css.fieldLabel}>{tt('settings.analysisReasoning')}</label>
-                    <select
-                      className={css.input}
-                      value={configDraft.analysisReasoning ?? 'low'}
-                      onChange={e => { setConfigDraft({ ...configDraft, analysisReasoning: e.target.value as NovelConfig['analysisReasoning'] }) }}
-                    >
-                      {REASONING_OPTIONS.map(v => <option key={v} value={v}>{tt(`settings.reasoning.${v}`)}</option>)}
-                    </select>
-                    <span className={css.meta}>{tt('settings.analysisReasoningHint')}</span>
-                  </div>
+              <>
+                <div className={`${css.card} ${css.settingsCard}`} style={{ gap: 'var(--nf-space-24)' }}>
+                  <span className={css.cardTitle}><Brain size={18} style={{ verticalAlign: -3 }} /> 模型与推理</span>
+                  <ModelManager
+                    api={api}
+                    provider={configDraft.provider}
+                    model={configDraft.model}
+                    savedModels={configDraft.savedModels ?? []}
+                    onProvider={v => { setConfigDraft({ ...configDraft, provider: v }) }}
+                    onModel={v => { setConfigDraft({ ...configDraft, model: v }) }}
+                    onSavedModels={models => setConfigDraft({ ...configDraft, savedModels: models })}
+                  />
                 </div>
-              </div>
+                <ReasoningSection
+                  reasoningEffort={configDraft.reasoningEffort ?? 'off'}
+                  analysisReasoning={configDraft.analysisReasoning ?? 'low'}
+                  onChange={patch => setConfigDraft({ ...configDraft, ...patch })}
+                />
+              </>
             )}
 
             {settingsTab === 'writing' && (

package/src/client/panel/ProgressConsole.tsx

@@ -0,0 +1,64 @@
+/**
+ * 共享「AI 进度」实时控制台：当前任务大进度条 + 全量活动日志。
+ * 书内与首页共用一个表现，内容来自同一份进度状态。
+ */
+import { useEffect, useRef } from 'react'
+import css from './panel.module.css'
+
+export interface ProgressLine {
+  id: number;
+  text: string;
+  kind: 'info' | 'done' | 'error';
+  live?: boolean;
+  ratio?: number;
+}
+
+export function ProgressConsole({ progress, busy, busyLabel, liveBar, onClear }: {
+  progress: ProgressLine[];
+  busy: boolean;
+  busyLabel: string;
+  liveBar: { text: string; ratio?: number } | null;
+  onClear: () => void;
+}) {
+  const endRef = useRef<HTMLDivElement | null>(null);
+  useEffect(() => {
+    endRef.current?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+  }, [progress]);
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-10)', height: '100%', minHeight: 0 }}>
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+        <span style={{ fontWeight: 600 }}>📊 AI 进度</span>
+        <button type="button" className={css.button + ' ' + css.buttonSmall} onClick={onClear} title="清空活动记录">清空</button>
+      </div>
+      {(busy && (busyLabel !== '' || liveBar !== null)) && (
+        <div style={{ border: '1px solid var(--nf-accent)', borderRadius: 'var(--nf-radius-10)', padding: 'var(--nf-space-8) var(--nf-space-12)', display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-6)', background: 'color-mix(in srgb, var(--nf-accent) 6%, transparent)' }}>
+          <span style={{ fontSize: 'var(--nf-fs-12)', fontWeight: 600, color: 'var(--nf-accent)' }}>✍ {busyLabel !== '' ? busyLabel : (liveBar?.text ?? '任务进行中')}…</span>
+          {liveBar?.ratio !== undefined && (
+            <div className={css.bigProgressBar}><div className={css.bigProgressBarFill} style={{ width: Math.round(liveBar.ratio * 100) + '%' }} /></div>
+          )}
+          {liveBar?.text !== undefined && <span className={css.liveText}>{liveBar.text}</span>}
+        </div>
+      )}
+      <div className={css.progress} style={{ flex: 1, minHeight: 0, overflowY: 'auto', border: '1px solid var(--nf-border)', borderRadius: 'var(--nf-radius-10)', background: 'var(--nf-bg-inset)', padding: 'var(--nf-space-8)', display: 'flex', flexDirection: 'column' }}>
+        {progress.length === 0 ? (
+          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 'var(--nf-space-4)', color: 'var(--nf-text-3)', fontSize: 'var(--nf-fs-12)', minHeight: 120 }}>
+            <span style={{ fontSize: 'var(--nf-fs-22)' }}>📭</span>
+            <span>暂无活动记录</span>
+            <span>生成、审稿等操作会显示在这里</span>
+          </div>
+        ) : (
+          progress.map(line => (
+            <div key={line.id} className={line.kind === 'done' ? css.progressLineDone : line.kind === 'error' ? css.progressLineError : line.live === true ? css.progressLineLive : css.progressLine}>
+              {line.live === true && (
+                <span className={css.progressBar}><span className={css.progressBarFill} style={{ width: Math.round((line.ratio ?? 0) * 100) + '%' }} /></span>
+              )}
+              {line.text}
+            </div>
+          ))
+        )}
+        <div ref={endRef} />
+      </div>
+    </div>
+  );
+}

package/src/client/panel/ProgressHomeView.tsx

@@ -42,7 +42,7 @@ export function ProgressHomeView({ shelf, onOpenBook }: {
 
   return (
     <div className={css.authorPageBody}>
-      <div className={css.authorPageHeader}><h2 className={css.panelTitle} style={{ margin: 0 }}>📊 AI 进度</h2><span className={css.meta}>跨书架聚合进度与最近活动</span></div>
+      <div className={css.card + ' ' + css.settingsCard} style={{ gap: 'var(--nf-space-6)' }}><h2 className={css.panelTitle} style={{ margin: 0 }}>📊 AI 进度</h2><span className={css.meta}>跨书架聚合进度与最近活动</span></div>
 
       <div className={css.progressOverview}>
         <div className={css.progressOverviewCard}><span className={css.progressOverviewNum}>{shelf.books.length}</span><span className={css.meta}>总书数</span></div>

package/src/client/panel/ReasoningSection.tsx

@@ -0,0 +1,31 @@
+/**
+ * 推理强度（思考强度）独立容器：写作类/分析类两个 reasoningEffort 下拉。
+ */
+import { Brain } from 'lucide-react'
+import type { NovelConfig } from '../../protocol.ts'
+import { tt } from './helpers.ts'
+import css from './panel.module.css'
+
+const REASONING_OPTIONS = ['off', 'low', 'high', 'max'] as const
+const REASONING_LABEL: Record<string, string> = {
+  off: tt('settings.reasoning.off'),
+  low: tt('settings.reasoning.low'),
+  high: tt('settings.reasoning.high'),
+  max: tt('settings.reasoning.max'),
+}
+
+export interface ReasoningSectionProps {
+  reasoningEffort: NovelConfig['reasoningEffort']
+  analysisReasoning: NovelConfig['analysisReasoning']
+  onChange: (patch: { reasoningEffort?: NovelConfig['reasoningEffort']; analysisReasoning?: NovelConfig['analysisReasoning'] }) => void
+}
+
+export function ReasoningSection({ reasoningEffort, analysisReasoning, onChange }: ReasoningSectionProps): JSX.Element {
+  return (
+    <div className={css.card + ' ' + css.settingsCard} style={{ gap: 'var(--nf-space-24)' }}>
+      <span className={css.cardTitle}><Brain size={18} style={{ verticalAlign: -3 }} /> {tt('settings.reasoningSection')}</span>
+      <div className={css.field}><label className={css.fieldLabel}>{tt('settings.reasoningEffort')}</label><select className={css.input} value={reasoningEffort ?? 'off'} onChange={e => onChange({ reasoningEffort: e.target.value as NovelConfig['reasoningEffort'] })}>{REASONING_OPTIONS.map(v => <option key={v} value={v}>{REASONING_LABEL[v]}</option>)}</select><span className={css.meta}>{tt('settings.reasoningHint')}</span></div>
+      <div className={css.field}><label className={css.fieldLabel}>{tt('settings.analysisReasoning')}</label><select className={css.input} value={analysisReasoning ?? 'low'} onChange={e => onChange({ analysisReasoning: e.target.value as NovelConfig['analysisReasoning'] })}>{REASONING_OPTIONS.map(v => <option key={v} value={v}>{REASONING_LABEL[v]}</option>)}</select><span className={css.meta}>{tt('settings.analysisReasoningHint')}</span></div>
+    </div>
+  )
+}