@waterwx/dsh-novel-forge 1.7.3 → 1.9.0

package/src/client/panel/NovelPanel.tsx

@@ -9,10 +9,13 @@ 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'
 import { ShelfView } from './ShelfView.tsx'
+import { AuthorHome } from './AuthorHome.tsx'
 import { ReaderView } from './ReaderView.tsx'
 import { RunPanel } from './RunPanel.tsx'
 import { CreateBookView } from './CreateBookView.tsx'
@@ -73,40 +76,37 @@ const NAV_GROUPS: ReadonlyArray<{ id: string; label: string; items: ReadonlyArra
     id: 'create',
     label: '创作',
     items: [
-      { id: 'workflow', label: tt('tab.workflow'), icon: <Wrench size={16} /> },
-      { id: 'overview', label: tt('tab.overview'), icon: <FileText size={16} /> },
-      { id: 'blurb', label: '简介 / 封面', icon: <BookOpen size={16} /> },
-      { id: 'plan', label: tt('tab.plan'), icon: <BookMarked size={16} /> },
-      { id: 'plotlines', label: '长线管理', icon: <ScrollText size={16} /> },
-      { id: 'book', label: '本书设定', icon: <Library size={16} /> },
+      { id: 'workflow', label: tt('tab.workflow'), icon: <Wrench size={18} /> },
+      { id: 'overview', label: tt('tab.overview'), icon: <FileText size={18} /> },
+      { id: 'blurb', label: '简介 / 封面', icon: <BookOpen size={18} /> },
+      { id: 'plan', label: tt('tab.plan'), icon: <BookMarked size={18} /> },
+      { id: 'plotlines', label: '长线管理', icon: <ScrollText size={18} /> },
+      { id: 'book', label: '本书设定', icon: <Library size={18} /> },
     ],
   },
   {
     id: 'tools',
     label: '工具',
     items: [
-      { id: 'assistant', label: tt('tab.assistant'), icon: <MessageSquare size={16} /> },
-      { id: 'progress', label: 'AI 进度', icon: <BarChart3 size={16} /> },
-      { id: 'breakdown', label: '拆书分析', icon: <Search size={16} /> },
-      { id: 'manhua', label: '漫剧工作台', icon: <Clapperboard size={16} /> },
-      { id: 'run', label: '生产单', icon: <Factory size={16} /> },
+      { id: 'assistant', label: tt('tab.assistant'), icon: <MessageSquare size={18} /> },
+      { id: 'progress', label: 'AI 进度', icon: <BarChart3 size={18} /> },
+      { id: 'breakdown', label: '拆书分析', icon: <Search size={18} /> },
+      { id: 'manhua', label: '漫剧工作台', icon: <Clapperboard size={18} /> },
+      { id: 'run', label: '生产单', icon: <Factory size={18} /> },
     ],
   },
   {
     id: 'assets',
     label: '资产',
     items: [
-      { id: 'assets', label: '创作资产', icon: <Wrench size={16} /> },
+      { id: 'assets', label: '创作资产', icon: <Wrench size={18} /> },
     ],
   },
 ]
 
 /** 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={16} /> }
+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 }> = [
@@ -316,6 +316,12 @@ function DiffList({ original, draft, fontSize }: { original: string; draft: stri
 export function NovelPanel({ controller, api }: NovelPanelProps) {
   const [activeTab, setActiveTab] = useState<NovelTab>('workflow')
   const [config, setConfig] = useState<NovelConfig | null>(null)
+  /** 自定义背景（URL / dataURL），覆盖主题默认背景。 */
+  const [themeBg, setThemeBg] = useState<string | undefined>(undefined)
+  /** 自定义背景遮罩/模糊强度 0-80。 */
+  const [themeBgBlur, setThemeBgBlur] = useState(0)
+  /** 玻璃透明度 0-100（100=主题原样）。 */
+  const [themeOpacity, setThemeOpacity] = useState(100)
   const [project, setProject] = useState<ProjectState | null>(null)
   const [generatedFiles, setGeneratedFiles] = useState<string[]>([])
   const [outlineText, setOutlineText] = useState('')
@@ -330,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)
@@ -699,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 存档直接显示，无需重新刷新计算。
@@ -748,6 +752,17 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
     }
   }, [api, refresh, refreshShelf])
 
+  /** 首页「设置」与书内设置同入口：激活当前/首选书并跳到设置页。 */
+  const openSettingsFromHome = async (): Promise<void> => {
+    const targetId = shelf?.activeBookId ?? shelf?.books[0]?.id ?? null
+    if (targetId === null || targetId === undefined) {
+      setError('请先在书架开一本书；设置页以书籍工作台为入口')
+      return
+    }
+    await activateBook(targetId, 'workspace')
+    setActiveTab('settings')
+  }
+
   /** Handle a docx file (pick or drag): parse locally, save outline. */
   const handleDocxFile = useCallback(async (file: File) => {
     setBusy(true)
@@ -2066,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)
@@ -2364,12 +2380,20 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
     n += assets?.antiAiRules?.length ?? 0
     return n
   })()
+  /** 自定义背景：优先用户显式选择（themeBg），否则用 config 里的持久化值。 */
+  const effectiveBg = themeBg !== undefined && themeBg !== '' ? themeBg : (config?.themeBackground ?? '')
+  const effectiveBgBlur = themeBgBlur > 0 ? themeBgBlur : (config?.themeBackgroundBlur ?? 0)
+  const effectiveOpacity = themeOpacity > 0 ? themeOpacity : (config?.themeOpacity ?? 100)
+  const panelBgStyle: Record<string, string> = {}
+  if (effectiveBg !== '') panelBgStyle['--nf-glass-bg-image' as string] = 'url(' + effectiveBg + ')'
+  if (effectiveBgBlur > 0) panelBgStyle['--nf-glass-bg-dim' as string] = String(effectiveBgBlur)
+  panelBgStyle['--nf-glass-opacity' as string] = String(effectiveOpacity) + '%'
 
   return (
-    <div className={css.panel} data-nf-theme={panelTheme} data-nf-mode={themeMode === 'system' ? undefined : themeMode} data-nf-density={themeDensity}>
+    <div className={css.panel} data-nf-theme={panelTheme} data-nf-mode={themeMode === 'system' ? undefined : themeMode} data-nf-density={themeDensity} style={panelBgStyle}>
       {viewMode === 'shelf' ? (
-        /* 书架首页：默认视图，选择一本书进入工作台或阅读页 */
-        <ShelfView
+        /* 书架首页：作者级左侧导航 + 书架/改编/资产库/设置 */
+        <AuthorHome
           api={api}
           shelf={shelf ?? { books: [], activeBookId: null }}
           onOpenBook={async (id) => {
@@ -2380,6 +2404,16 @@ export function NovelPanel({ controller, api }: NovelPanelProps) {
           }}
           onAddBook={() => { setViewMode('create') }}
           onImportBook={() => { setShowImport(true) }}
+          onOpenSettings={() => { void openSettingsFromHome() }}
+          onTheme={(t, m, d) => { changePanelTheme(t); changeThemeMode(m); changeThemeDensity(d) }}
+          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' ? (
         /* 开书向导：独立页面 */
@@ -3804,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

@@ -0,0 +1,87 @@
+/**
+ * 首页 AI 进度视图：书架级聚合进度——总览 + 每本书进度条 + 进行中高亮。
+ * 读取 BookshelfSnapshot，不依赖打开某本书。
+ */
+import { useMemo } from 'react'
+import { BarChart3, BookOpen, PenLine, CheckCircle2, Clock, RefreshCw } from 'lucide-react'
+import type { BookshelfSnapshot } from '../../protocol.ts'
+import css from './panel.module.css'
+
+function relativeTime(iso: string): string {
+  const t = new Date(iso).getTime()
+  if (!Number.isFinite(t)) return '—'
+  const diff = Date.now() - t
+  if (diff < 60_000) return '刚刚'
+  if (diff < 3_600_000) return Math.floor(diff / 60_000) + ' 分钟前'
+  if (diff < 86_400_000) return Math.floor(diff / 3_600_000) + ' 小时前'
+  if (diff < 7 * 86_400_000) return Math.floor(diff / 86_400_000) + ' 天前'
+  return new Date(t).toLocaleDateString('zh-CN', { month: 'numeric', day: 'numeric' })
+}
+
+function bookStatus(book: BookshelfSnapshot['books'][number]): 'none' | 'done' | 'active' {
+  if (!book.hasProject) return 'none'
+  return book.total > 0 && book.done >= book.total ? 'done' : 'active'
+}
+
+export function ProgressHomeView({ shelf, onOpenBook }: {
+  shelf: BookshelfSnapshot;
+  onOpenBook: (id: string) => void;
+}) {
+  const stats = useMemo(() => {
+    let active = 0, done = 0, none = 0, chapters = 0, written = 0;
+    for (const b of shelf.books) {
+      const s = bookStatus(b)
+      if (s === 'none') none++; else if (s === 'done') done++; else active++;
+      chapters += b.total;
+      written += b.done;
+    }
+    return { active, done, none, chapters, written }
+  }, [shelf.books]);
+
+  const progressPct = stats.chapters > 0 ? Math.round((stats.written / stats.chapters) * 100) : 0;
+
+  return (
+    <div className={css.authorPageBody}>
+      <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>
+        <div className={css.progressOverviewCard}><span className={css.progressOverviewNum}>{stats.active}</span><span className={css.meta}>进行中</span></div>
+        <div className={css.progressOverviewCard}><span className={css.progressOverviewNum}>{stats.done}</span><span className={css.meta}>已完结</span></div>
+        <div className={css.progressOverviewCard}><span className={css.progressOverviewNum}>{stats.written}/{stats.chapters}</span><span className={css.meta}>已完成章节</span></div>
+      </div>
+
+      <div className={css.progressTotalBar}><div className={css.progressTotalFill} style={{ width: progressPct + '%' }} /><span className={css.meta}>全书架整体进度 {progressPct}%</span></div>
+
+      {shelf.books.length === 0 ? (
+        <div className={css.shelfEmpty} style={{ minHeight: 160 }}>
+          <span className={css.shelfEmptyIcon}><BarChart3 size={30} /></span>
+          <span className={css.shelfEmptyTitle}>还没有书</span>
+          <span className={css.meta}>去书架开一本书或导入全文后，这里会显示进度。</span>
+        </div>
+      ) : (
+        <div className={css.progressBookList}>
+          {shelf.books.map(book => {
+            const s = bookStatus(book)
+            const ratio = book.total > 0 ? Math.min(book.done / book.total, 1) : 0;
+            const statusLabel = s === 'none' ? '未开书' : s === 'done' ? '已完结' : '进行中';
+            return (
+              <div key={book.id} className={css.progressBook + (s === 'active' ? ' ' + css.progressBookActive : '')}>
+                <div className={css.progressBookHead}>
+                  <span className={css.progressBookName} title={book.bookName}>{book.bookName}</span>
+                  <span className={css.badge + (s === 'done' ? ' ' + css.badgeDone : s === 'active' ? ' ' + css.badgeWritten : ' ' + css.badgePending)}>{statusLabel}</span>
+                  {s === 'active' && <span className={css.meta + ' ' + css.progressLive}><RefreshCw size={12} style={{ verticalAlign: -2 }} /> 创作中</span>}
+                </div>
+                <div className={css.progressBookBar}><div className={css.progressBookFill} style={{ width: Math.round(ratio * 100) + '%' }} /></div>
+                <div className={css.rowEnd} style={{ justifyContent: 'space-between' }}>
+                  <span className={css.meta}>{book.total > 0 ? '已完成 ' + book.done + ' / ' + book.total + ' 章' : '尚未规划章节'} · 更新于 {relativeTime(book.updatedAt)}</span>
+                  <button type="button" className={css.button + ' ' + css.buttonSmall} onClick={() => onOpenBook(book.id)}><PenLine size={12} style={{ verticalAlign: -2 }} /> 进入</button>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </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>
+  )
+}