tavern-harness 0.1.24 → 0.1.26

package/CHANGELOG.md

@@ -3,6 +3,46 @@
 > 本文件由 `scripts/changelog.mjs` 从 `changelog/v*.md` 生成，请勿手动编辑。
 > 版本对比链接见文末；源文件位于仓库 `changelog/` 目录。
 
+## [0.1.26] - 2026-10-27
+
+### 中文
+
+#### 改进
+
+- 角色卡与世界书的知识库编辑器现在支持 JSON 语法高亮，键名、字符串、数字等用不同颜色区分，长内容更容易扫读
+- 知识库 JSON 格式有误时，提示会指出具体出错的第几行，方便直接定位修改
+
+#### 修复
+
+- 修复手机上编辑角色时，切换「角色 / 知识库」标签会收起键盘、底部按钮随之闪烁跳动的问题
+- 修复技能卡片里过长的工具名在手机上撑出屏幕、把操作按钮挤到看不见的问题
+
+### English
+
+#### Changed
+
+- The character-card and world-book knowledge editors now highlight JSON syntax, coloring keys, strings, and numbers so long entries are easier to scan
+- When knowledge-base JSON is invalid, the error now names the exact line, so the problem can be found and fixed directly
+
+#### Fixed
+
+- Fixed an issue on mobile where switching between the Character and Knowledge tabs while editing a character dismissed the keyboard and made the bottom buttons flicker
+- Fixed overly long tool names in skill cards overflowing the screen on mobile and pushing the action buttons out of view
+
+## [0.1.25] - 2026-10-27
+
+### 中文
+
+#### 内部
+
+- 统一了标题、对话框、工具卡片等界面文字的字体排印样式，改用共享的排版类和样式变量，后续调整字号、字重只需改一处
+
+### English
+
+#### Internal
+
+- Unified the typography of headings, dialogs, tool cards, and other interface text behind shared classes and style variables, so future font-size and weight changes happen in one place
+
 ## [0.1.24] - 2026-10-27
 
 ### 中文
@@ -702,6 +742,8 @@
 - Vite + React + Zustand + Dexie stack with browser-side local persistence
 
 <!-- 链接定义 -->
+[0.1.26]: https://github.com/Rannichan/Tavern-Harness/compare/v0.1.25...v0.1.26
+[0.1.25]: https://github.com/Rannichan/Tavern-Harness/compare/v0.1.24...v0.1.25
 [0.1.24]: https://github.com/Rannichan/Tavern-Harness/compare/v0.1.23...v0.1.24
 [0.1.23]: https://github.com/Rannichan/Tavern-Harness/compare/v0.1.22...v0.1.23
 [0.1.22]: https://github.com/Rannichan/Tavern-Harness/compare/v0.1.21...v0.1.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tavern-harness",
-  "version": "0.1.24",
+  "version": "0.1.26",
   "description": "Tavern Harness — 酒馆模式下的本地 AI Agent 助手（MyAgent-Android 的 Web 复刻）",
   "private": false,
   "type": "module",

package/src/App.tsx

@@ -165,7 +165,8 @@ export default function App() {
               type="button"
               disabled={takingControl}
               onClick={() => void handleTakeOverControl()}
-              style={{ padding: '10px 18px', border: 0, borderRadius: 8, cursor: takingControl ? 'wait' : 'pointer', fontWeight: 700, background: 'color-mix(in srgb, var(--primary) 25%, transparent)', color: 'var(--primary)' }}
+              className="control-takeover-btn"
+              style={{ cursor: takingControl ? 'wait' : 'pointer' }}
             >
               {t('control.takeOverHere')}
             </button>
@@ -448,7 +449,7 @@ function SessionHeader({
       {confirmReset && (
         <Modal onClose={() => setConfirmReset(false)} size="compact">
           <div className="modal-head">
-            <span style={{ fontWeight: 800, fontSize: 15 }}>{t('header.resetSessionTitle')}</span>
+            <span className="typo-dialog-title">{t('header.resetSessionTitle')}</span>
             <button className="icon-btn" onClick={() => setConfirmReset(false)}><Icon name="x" /></button>
           </div>
           <div className="modal-body">
@@ -473,7 +474,7 @@ function SessionHeader({
       {confirmDelete && (
         <Modal onClose={() => setConfirmDelete(false)} size="compact">
           <div className="modal-head">
-            <span style={{ fontWeight: 800, fontSize: 15 }}>{t('header.deleteTitle')}</span>
+            <span className="typo-dialog-title">{t('header.deleteTitle')}</span>
             <button className="icon-btn" onClick={() => setConfirmDelete(false)}><Icon name="x" /></button>
           </div>
           <div className="modal-body">

package/src/components/CharacterBookEditor.tsx

@@ -1,7 +1,17 @@
 import { memo, useEffect, useRef } from 'react';
 import { Compartment, EditorState } from '@codemirror/state';
 import { EditorView, lineNumbers } from '@codemirror/view';
+import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
 import { json } from '@codemirror/lang-json';
+import { tags } from '@lezer/highlight';
+
+const characterBookJsonHighlight = syntaxHighlighting(HighlightStyle.define([
+  { tag: tags.propertyName, color: 'var(--primary-dim)', fontWeight: '600' },
+  { tag: tags.string, color: 'var(--success)' },
+  { tag: [tags.number, tags.bool, tags.null], color: 'var(--think)' },
+  { tag: tags.keyword, color: 'var(--primary)' },
+  { tag: tags.punctuation, color: 'var(--text-dim)' },
+]));
 
 const CharacterBookEditor = memo(function CharacterBookEditor({
   value,
@@ -37,6 +47,7 @@ const CharacterBookEditor = memo(function CharacterBookEditor({
         extensions: [
           lineNumbers(),
           json(),
+          characterBookJsonHighlight,
           wrappingRef.current.of(lineWrapping ? EditorView.lineWrapping : []),
           readOnlyRef.current.of(readOnly ? [EditorState.readOnly.of(true), EditorView.editable.of(false)] : []),
           EditorView.updateListener.of((update) => {

package/src/components/CharactersView.tsx

@@ -35,6 +35,19 @@ const CharacterBookEditor = lazy(() => import('./CharacterBookEditor'));
 
 type WorkshopTab = 'characters' | 'worldbooks' | 'skills';
 
+function invalidJsonLine(value: string): number | null {
+  const trimmed = value.trim();
+  if (!trimmed) return null;
+  try {
+    JSON.parse(trimmed);
+    return null;
+  } catch (error) {
+    const position = /position (\d+)/i.exec(String(error))?.[1];
+    if (!position) return 1;
+    return trimmed.slice(0, Number(position)).split('\n').length;
+  }
+}
+
 // 内置角色「酒馆老板」默认启用所有技能
 const ALL_DEFAULT_SKILLS = [...ALL_BUILTIN_TOOL_NAMES];
 
@@ -274,13 +287,10 @@ function CharacterEditorModal({ npc, isNew, onClose, onSaved }: { npc: NpcCharac
       addToast(t('toast.nameRequired'), 'error');
       return;
     }
-    if (characterBook.trim()) {
-      try {
-        JSON.parse(characterBook);
-      } catch {
-        addToast(t('toast.characterBookInvalidJson'), 'error');
-        return;
-      }
+    const characterBookInvalidLine = invalidJsonLine(characterBook);
+    if (characterBookInvalidLine != null) {
+      addToast(t('toast.characterBookInvalidJson', { line: characterBookInvalidLine }), 'error');
+      return;
     }
     // 清理空白/重复项：第一项作为主开场白，其余作为备用
     const cleaned = greetings.map((g) => g.trim()).filter((g, i, arr) => g && arr.indexOf(g) === i);
@@ -316,11 +326,12 @@ function CharacterEditorModal({ npc, isNew, onClose, onSaved }: { npc: NpcCharac
   return (
     <Modal onClose={onClose} className="modal-editor editor-modal-with-tabs character-editor-modal">
       <div className="modal-head">
-            <span style={{ fontWeight: 800, fontSize: 15 }}>{isNew ? t('workshop.newCharTitle') : t('workshop.editCharTitle')}</span>
+            <span className="typo-dialog-title">{isNew ? t('workshop.newCharTitle') : t('workshop.editCharTitle')}</span>
             <div className="raw-tabs">
-              <button className={`raw-tab ${editorTab === 'character' ? 'active' : ''}`} onClick={() => setEditorTab('character')}>{t('workshop.characterTab')}</button>
+              <button className={`raw-tab ${editorTab === 'character' ? 'active' : ''}`} onPointerDown={(event) => event.preventDefault()} onClick={() => setEditorTab('character')}>{t('workshop.characterTab')}</button>
               <button
                 className={`raw-tab ${editorTab === 'knowledge' ? 'active' : ''}`}
+                onPointerDown={(event) => event.preventDefault()}
                 onClick={() => setEditorTab('knowledge')}
               >
                 {t('workshop.knowledgeTab')}
@@ -337,8 +348,8 @@ function CharacterEditorModal({ npc, isNew, onClose, onSaved }: { npc: NpcCharac
               <button className="icon-btn" onClick={onClose}><Icon name="x" /></button>
             </div>
           </div>
-          <div className={`modal-body character-editor-body ${editorTab === 'knowledge' ? 'knowledge-tab' : ''}`}>
-            {editorTab === 'character' && <>
+          <div className="modal-body character-editor-body">
+            <div className={`character-editor-tab-panel ${editorTab === 'character' ? 'active' : ''}`}>
             <div style={{ display: 'flex', gap: 14, alignItems: 'center' }}>
               <Avatar name={name || t('chat.speakerChar')} colorOrdinal={npc.avatarColorOrdinal} imageUrl={avatarDataUrl} size="sm" />
               <div style={{ display: 'flex', gap: 8 }}>
@@ -371,7 +382,7 @@ function CharacterEditorModal({ npc, isNew, onClose, onSaved }: { npc: NpcCharac
                 <textarea className="textarea grow-textarea" value={prompt} onChange={(e) => setPrompt(e.target.value)} placeholder={t('workshop.promptPh')} />
               ) : (
                 <div className="bubble preview-scroll wb-render-pane char-prompt-render-pane">
-                  {prompt ? <Markdown text={prompt} /> : <span style={{ color: 'var(--text-faint)', fontSize: 13 }}>{t('workshop.promptPh')}</span>}
+                  {prompt ? <Markdown text={prompt} /> : <span className="typo-label text-muted">{t('workshop.promptPh')}</span>}
                 </div>
               )}
             </div>
@@ -391,7 +402,7 @@ function CharacterEditorModal({ npc, isNew, onClose, onSaved }: { npc: NpcCharac
                     />
                   ) : (
                     <div className="bubble preview-scroll wb-render-pane greeting-render-pane">
-                      {g ? <Markdown text={g} /> : <span style={{ color: 'var(--text-faint)', fontSize: 13 }}>{t('workshop.greetingPh')}</span>}
+                      {g ? <Markdown text={g} /> : <span className="typo-label text-muted">{t('workshop.greetingPh')}</span>}
                     </div>
                   )}
                   {!renderMarkdown && (
@@ -415,7 +426,7 @@ function CharacterEditorModal({ npc, isNew, onClose, onSaved }: { npc: NpcCharac
             <div className="field" style={{ flexShrink: 0 }}>
               <label>{t('workshop.enableSkills', { a: enabledToolNames.filter((s) => tools.some((t) => t.name === s)).length, b: tools.length })}</label>
               {tools.length === 0 ? (
-                <div style={{ fontSize: 12, color: 'var(--text-faint)' }}>{t('workshop.noSkills')}</div>
+                <div className="typo-label text-muted">{t('workshop.noSkills')}</div>
               ) : (
                 <div className="skill-list-scroll">
                   {tools.map((t) => (
@@ -427,8 +438,8 @@ function CharacterEditorModal({ npc, isNew, onClose, onSaved }: { npc: NpcCharac
                 </div>
               )}
             </div>
-            </>}
-            {editorTab === 'knowledge' && (
+            </div>
+            <div className={`character-editor-tab-panel knowledge-tab ${editorTab === 'knowledge' ? 'active' : ''}`}>
               <div className="field prompt-field character-book-field">
                 <label>{t('workshop.characterBookLabel')}</label>
                 <Suspense fallback={<div className="character-book-editor-loading" />}>
@@ -439,7 +450,7 @@ function CharacterEditorModal({ npc, isNew, onClose, onSaved }: { npc: NpcCharac
                   />
                 </Suspense>
               </div>
-            )}
+            </div>
           </div>
           <div className="modal-foot">
             {npc.isBuiltIn && (
@@ -448,7 +459,7 @@ function CharacterEditorModal({ npc, isNew, onClose, onSaved }: { npc: NpcCharac
               </button>
             )}
             <button className="btn" onClick={onClose}>{t('common.cancel')}</button>
-            <button className="btn btn-primary" onClick={save}>{t('common.save')}</button>
+            <button className="btn btn-primary" type="button" onPointerDown={(event) => event.preventDefault()} onClick={save}>{t('common.save')}</button>
           </div>
     </Modal>
   );
@@ -501,13 +512,10 @@ function WorldBookList({ books, onChanged }: {
       addToast(t('toast.wbNameContentRequired'), 'error');
       return;
     }
-    if (knowledge) {
-      try {
-        JSON.parse(knowledge);
-      } catch {
-        addToast(t('toast.knowledgeInvalidJson'), 'error');
-        return;
-      }
+    const knowledgeInvalidLine = invalidJsonLine(knowledge);
+    if (knowledgeInvalidLine != null) {
+      addToast(t('toast.knowledgeInvalidJson', { line: knowledgeInvalidLine }), 'error');
+      return;
     }
     const data = {
       name: name.trim(),
@@ -595,7 +603,7 @@ function WorldBookList({ books, onChanged }: {
           return (
             <div key={b.id} className="char-card wb-card fade-up">
               <div className="cname">
-                <span style={{ fontSize: 16 }}>📖</span>
+                <span className="character-book-icon">📖</span>
                 <ScrollingCardName name={b.name} />
                 {isBuiltin && <span className="tag">{t('common.builtin')}</span>}
               </div>
@@ -712,7 +720,7 @@ function WorldBookForm({
   return (
     <>
       <div className="modal-head">
-        <span style={{ fontWeight: 800, fontSize: 15 }}>
+        <span className="typo-dialog-title">
           {isEditing ? t('workshop.editWbTitle') : t('workshop.newWbTitle')}
         </span>
         <div className="raw-tabs">
@@ -755,7 +763,7 @@ function WorldBookForm({
               <textarea className="textarea grow-textarea" value={content} onChange={(e) => setContent(e.target.value)} placeholder={t('workshop.wbContentPh')} />
             ) : (
               <div className="bubble preview-scroll wb-render-pane">
-                {content ? <Markdown text={content} /> : <span style={{ color: 'var(--text-faint)', fontSize: 13 }}>{t('workshop.wbContentPh')}</span>}
+                {content ? <Markdown text={content} /> : <span className="typo-label text-muted">{t('workshop.wbContentPh')}</span>}
               </div>
             )}
           </div>
@@ -791,7 +799,7 @@ function WorldBookForm({
           </button>
         )}
         <button className="btn" onClick={onClose}>{t('common.cancel')}</button>
-        <button className="btn btn-primary" onClick={() => onSave(name, content, characterBook)}>{t('common.save')}</button>
+        <button className="btn btn-primary" type="button" onPointerDown={(event) => event.preventDefault()} onClick={() => onSave(name, content, characterBook)}>{t('common.save')}</button>
       </div>
     </>
   );
@@ -960,14 +968,14 @@ function SkillSortItem({
       {...attributes}
       {...listeners}
     >
-      <div style={{ fontSize: 18 }}>{tool.isBuiltIn ? '🧰' : '⚙️'}</div>
+      <div className="tool-type-icon">{tool.isBuiltIn ? '🧰' : '⚙️'}</div>
       <div className="l-main">
         <div className="l-title">
           <span className="skill-card-name">{tool.name}</span>
           {tool.isBuiltIn && <span className="tag">{t('common.builtin')}</span>}
         </div>
         <div className="l-sub">{desc}</div>
-        {tool.isBuiltIn && impl !== 'native' && <div style={{ fontSize: 10.5, marginTop: 2, color: 'var(--warn)' }}>{t('workshop.implType', { t: impl })}</div>}
+        {tool.isBuiltIn && impl !== 'native' && <div className="tool-implementation-type">{t('workshop.implType', { t: impl })}</div>}
       </div>
       <div className="skill-item-actions">
         <button className="btn btn-sm" onClick={(e) => { e.stopPropagation(); onDetail(); }} title={t('workshop.viewDetails')}>
@@ -1063,7 +1071,7 @@ function SkillDetailModal({ tool, onClose }: { tool: McpTool; onClose: () => voi
   return (
     <Modal onClose={onClose}>
       <div className="modal-head">
-        <span style={{ fontWeight: 800, fontSize: 15 }}>
+        <span className="typo-dialog-title">
           {t('workshop.skillDetails')}
           {tool.isBuiltIn && <span className="tag" style={{ marginLeft: 8 }}>{t('common.builtin')}</span>}
           {!tool.isBuiltIn && execType !== 'native' && <span className="tag" style={{ marginLeft: 8 }}>{t('workshop.implType', { t: execType })}</span>}
@@ -1081,17 +1089,17 @@ function SkillDetailModal({ tool, onClose }: { tool: McpTool; onClose: () => voi
         </div>
         <div className="field">
           <label>{t('workshop.skillParameters')}</label>
-          {editable ? <textarea className="textarea mono skill-detail-textarea" value={parametersText} wrap="soft" spellCheck={false} onChange={(e) => setParametersText(e.target.value)} /> : parametersText ? <pre className="skill-detail-json">{parametersText}</pre> : <div className="skill-detail-text" style={{ color: 'var(--text-faint)' }}>{t('workshop.skillNoParams')}</div>}
+          {editable ? <textarea className="textarea mono skill-detail-textarea" value={parametersText} wrap="soft" spellCheck={false} onChange={(e) => setParametersText(e.target.value)} /> : parametersText ? <pre className="skill-detail-json">{parametersText}</pre> : <div className="skill-detail-text text-muted">{t('workshop.skillNoParams')}</div>}
         </div>
         <div className="field">
           <label>{t('workshop.skillExecution')}</label>
-          {exec ? <pre className="skill-detail-json">{JSON.stringify(exec, null, 2)}</pre> : <div className="skill-detail-text" style={{ color: 'var(--text-faint)' }}>{t('workshop.skillNoExecution')}</div>}
+          {exec ? <pre className="skill-detail-json">{JSON.stringify(exec, null, 2)}</pre> : <div className="skill-detail-text text-muted">{t('workshop.skillNoExecution')}</div>}
         </div>
         <div className="field">
           <label>{t('workshop.skillRawJson')}</label>
           <pre className={`skill-detail-json${rawJson ? '' : ' err'}`}>{rawJson ?? schema.error}</pre>
         </div>
-        {error && <div className="field-hint" style={{ color: 'var(--danger)' }}>{error}</div>}
+        {error && <div className="field-hint text-danger">{error}</div>}
       </div>
       <div className="modal-foot">
         <button className="btn" onClick={onClose}>{t('common.cancel')}</button>

package/src/components/ChatView.tsx

@@ -1465,7 +1465,7 @@ export function MessageMenu() {
           <Icon name={a.icon} size={13} /> {a.label}
         </button>
       ))}
-      {actions.length === 0 && <div style={{ padding: 10, fontSize: 12, color: 'var(--text-faint)' }}>{t('chat.noActions')}</div>}
+      {actions.length === 0 && <div className="chat-no-actions">{t('chat.noActions')}</div>}
     </PopoverMenu>
   );
 }

package/src/components/ConfirmationDialog.tsx

@@ -23,16 +23,16 @@ export function ConfirmationDialog() {
       <div className="modal-root">
         <div className="modal card confirm fade-up">
           <div className="modal-head">
-            <span style={{ fontWeight: 800, fontSize: 14, display: 'flex', alignItems: 'center', gap: 8 }}>
+            <span className="typo-dialog-title dialog-title-inline dialog-title-compact">
               <Icon name="settings" size={15} /> {isLimit ? pending.title : t('confirm.title')}
             </span>
           </div>
           <div className="modal-body" style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
-            {!isLimit && <div style={{ fontSize: 13, fontWeight: 700 }}>{t('confirm.tool')}<span className="mono" style={{ color: 'var(--primary)' }}>{pending.toolName}</span></div>}
+            {!isLimit && <div className="confirmation-tool-name">{t('confirm.tool')}<span className="mono text-accent">{pending.toolName}</span></div>}
             {!pending.inlineCode && <pre className="confirm-args mono">{argsText}</pre>}
             <div className={isLimit ? undefined : 'confirm-reason'}>
               {!isLimit && <div className="confirm-reason-title">{pending.title}</div>}
-              <div style={{ fontSize: 13, color: 'var(--text-dim)', lineHeight: 1.6, whiteSpace: 'pre-line' }}>
+              <div className="typo-confirm-reason">
                 {pending.inlineCode && <code className="confirm-inline-code">{pending.inlineCode}</code>}
                 {pending.message || (isLimit ? '' : t('confirm.modify'))}
               </div>

package/src/components/DeleteConfirmDialog.tsx

@@ -25,7 +25,7 @@ export function DeleteConfirmDialog({
   return (
     <Modal onClose={onCancel} size="compact">
       <div className="modal-head">
-        <span style={{ fontWeight: 800, fontSize: 15 }}>{title}</span>
+        <span className="typo-dialog-title">{title}</span>
         <button className="icon-btn" onClick={onCancel}><Icon name="x" /></button>
       </div>
       <div className="modal-body">

package/src/components/FileDisplayModal.tsx

@@ -466,7 +466,7 @@ export function FileDisplayModal() {
       >
         <span className="display-modal-title">
           <Icon name="file" size={15} />
-          <span className="mono" style={{ fontSize: 12.5, color: 'var(--text-dim)' }}>{active.path}</span>
+          <span className="mono typo-body-sm text-secondary">{active.path}</span>
           <span className="display-title-text">{title}</span>
         </span>
         <div className="display-head-actions">

package/src/components/GameplayDialogs.tsx

@@ -50,7 +50,7 @@ export function GameplayExportModal({
   return (
     <Modal onClose={onClose} size="compact">
       <div className="modal-head">
-        <span style={{ fontWeight: 800, fontSize: 15, display: 'flex', alignItems: 'center', gap: 8 }}>
+        <span className="typo-dialog-title dialog-title-inline">
           <Icon name="share" size={15} /> {t('gameplay.exportTitle')}
         </span>
         <button className="icon-btn" onClick={onClose}><Icon name="x" /></button>
@@ -155,7 +155,7 @@ export function GameplayImportModal({
   return (
     <Modal onClose={onClose} size="compact">
       <div className="modal-head">
-        <span style={{ fontWeight: 800, fontSize: 15, display: 'flex', alignItems: 'center', gap: 8 }}>
+        <span className="typo-dialog-title dialog-title-inline">
           <Icon name="import" size={15} /> {t('gameplay.importTitle')}
         </span>
         <button className="icon-btn" onClick={onClose}><Icon name="x" /></button>

package/src/components/NewSessionMenu.tsx

@@ -160,7 +160,7 @@ export function NewSessionMenu({ onClose, editingSession }: { onClose: () => voi
   return (
     <Modal onClose={onClose} className="new-session-modal">
       <div className="modal-head">
-        <span style={{ fontWeight: 800, fontSize: 15 }}>{isEditing ? t('nav.editSession') : t('newSession.title')}</span>
+        <span className="typo-dialog-title">{isEditing ? t('nav.editSession') : t('newSession.title')}</span>
         <button className="icon-btn" onClick={onClose}><Icon name="x" /></button>
       </div>
       <div className="modal-body" style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
@@ -203,7 +203,7 @@ export function NewSessionMenu({ onClose, editingSession }: { onClose: () => voi
               </SortableContext>
             </DndContext>
             {npcs.length === 0 ? (
-              <div style={{ fontSize: 12.5, color: 'var(--warn)', background: 'var(--warn-soft)', padding: '8px 12px', borderRadius: 9 }}>
+              <div className="new-session-warning">
                 {t('newSession.noNpcWarn')}
               </div>
             ) : (

package/src/components/SettingsView.tsx

@@ -323,7 +323,7 @@ export const SettingsView = memo(function SettingsView() {
       {showResetConfirm && (
         <Modal onClose={() => !resetting && setShowResetConfirm(false)} size="compact">
           <div className="modal-head">
-            <span style={{ fontWeight: 800, fontSize: 15 }}>{t('settings.resetConfirmTitle')}</span>
+            <span className="typo-dialog-title">{t('settings.resetConfirmTitle')}</span>
             <button className="icon-btn" disabled={resetting} onClick={() => setShowResetConfirm(false)}><Icon name="x" /></button>
           </div>
           <div className="modal-body">{t('settings.resetConfirm')}</div>
@@ -435,7 +435,7 @@ function ProviderManager({ providers, onChanged }: { providers: ApiProvider[]; o
     <div className="set-section">
       <h3>{t('settings.providerTitle')}</h3>
       <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
-        {providers.length === 0 && <div style={{ color: 'var(--text-faint)', fontSize: 12.5 }}>{t('settings.noProvider')}</div>}
+        {providers.length === 0 && <div className="typo-body-sm text-muted">{t('settings.noProvider')}</div>}
         {providers.map((p) => {
           const aliases = modelAliases(p);
           const enabledModels = enabledModelIds(p);
@@ -457,7 +457,7 @@ function ProviderManager({ providers, onChanged }: { providers: ApiProvider[]; o
                 </div>
               </div>
               <div className="p-url">{p.baseUrl}</div>
-              <div style={{ fontSize: 11.5, color: 'var(--text-faint)', maxHeight: 60, overflow: 'auto' }}>
+              <div className="provider-inline-detail">
                 <b>{t('settings.models')}</b>
                 {visibleModels.length > 0
                   ? visibleModels.slice(0, 12).map((model) => aliases[model]?.trim() || model).join(', ')
@@ -475,7 +475,7 @@ function ProviderManager({ providers, onChanged }: { providers: ApiProvider[]; o
       {editing && (
         <Modal onClose={() => setEditing(null)}>
           <div className="modal-head">
-            <span style={{ fontWeight: 800, fontSize: 15 }}>{editing.id != null ? t('settings.editProvider') : t('settings.addProvider')}</span>
+            <span className="typo-dialog-title">{editing.id != null ? t('settings.editProvider') : t('settings.addProvider')}</span>
             <button className="icon-btn" onClick={() => setEditing(null)}><Icon name="x" /></button>
           </div>
           <ProviderForm

package/src/components/Sidebar.tsx

@@ -527,13 +527,13 @@ export function Sidebar() {
       {confirmDelete && (
         <Modal onClose={() => setConfirmDelete(null)} size="compact">
           <div className="modal-head">
-            <span style={{ fontWeight: 800, fontSize: 15, display: 'flex', alignItems: 'center', gap: 8 }}>
+            <span className="typo-dialog-title dialog-title-inline">
               <Icon name="trash" size={15} /> {t('nav.deleteSession')}
             </span>
             <button className="icon-btn" onClick={() => setConfirmDelete(null)}><Icon name="x" /></button>
           </div>
           <div className="modal-body">
-            <div style={{ fontSize: 13.5, lineHeight: 1.7 }}>
+            <div className="sidebar-import-description">
               {t('nav.deleteSessionConfirm', { title: confirmDelete.title })}
             </div>
           </div>

package/src/components/StatsView.tsx

@@ -134,18 +134,18 @@ function StatCards({ data }: { data: StatsData }) {
             {(() => {
               const mostActive = [...data.npcStats].sort((a, b) => b.rounds - a.rounds)[0];
               return (
-                <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
-                  <div style={{ fontSize: 26 }}>🎭</div>
+                <div className="stats-most-active">
+                  <div className="stats-most-active-icon">🎭</div>
                   <div>
-                    <div style={{ fontWeight: 800 }}>{mostActive.npcName}</div>
-                    <div style={{ fontSize: 12, color: 'var(--text-faint)' }}>{t('stats.roundsCount', { n: mostActive.rounds })}</div>
+                    <div className="stats-most-active-name">{mostActive.npcName}</div>
+                    <div className="stats-most-active-rounds">{t('stats.roundsCount', { n: mostActive.rounds })}</div>
                   </div>
                 </div>
               );
             })()}
           </>
         ) : (
-          <div style={{ color: 'var(--text-faint)', fontSize: 13 }}>{t('stats.noData')}</div>
+          <div className="stats-no-data">{t('stats.noData')}</div>
         )}
       </div>
 

package/src/components/VersionHistoryModal.tsx

@@ -93,7 +93,7 @@ export function VersionHistoryModal({ onClose }: { onClose: () => void }) {
   return (
     <Modal onClose={onClose} size="wide">
       <div className="modal-head">
-        <span style={{ fontWeight: 800, fontSize: 15 }}>{t('changelog.title')}</span>
+        <span className="typo-dialog-title">{t('changelog.title')}</span>
         <button className="icon-btn" onClick={onClose} aria-label={t('common.close')}>
           <Icon name="x" />
         </button>

package/src/components/WorkspaceFileManagerModal.tsx

@@ -241,7 +241,7 @@ export function WorkspaceFileManagerModal({ sessionId, onClose }: { sessionId: n
         <div className="ws-fm-delete-layer" role="dialog" aria-modal="true" aria-labelledby="ws-fm-delete-title">
           <div className="ws-fm-delete-dialog card fade-up">
             <div className="modal-head">
-              <span id="ws-fm-delete-title" style={{ fontWeight: 800, fontSize: 15 }}>{t('header.fileManagerDeleteTitle')}</span>
+              <span id="ws-fm-delete-title" className="typo-dialog-title">{t('header.fileManagerDeleteTitle')}</span>
               <button className="icon-btn" onClick={() => setPendingDelete(null)} disabled={deleting} title={t('common.close')}>
                 <Icon name="x" />
               </button>

package/src/core/i18n.ts

@@ -471,13 +471,13 @@ const MESSAGES: Record<LangKey, Record<string, string>> = {
     'toast.importFailed': '导入失败: {msg}',
     'toast.charDeleted': '已删除角色「{name}」',
     'toast.nameRequired': '名称不能为空',
-    'toast.characterBookInvalidJson': 'Character Book 必须是有效的 JSON',
+    'toast.characterBookInvalidJson': '角色卡知识库 JSON 格式无效（第 {line} 行），请修改后再保存',
     'toast.charCreated': '已创建角色「{name}」',
     'toast.charUpdated': '已更新角色「{name}」',
     'toast.wbDraftImported': '已解析角色卡内的世界书「{name}」，请确认后保存',
     'toast.wbNameRequired': '世界书名不能为空',
     'toast.wbNameContentRequired': '世界书名不能为空，且内容与知识库至少填写一项',
-    'toast.knowledgeInvalidJson': '知识库必须是有效的 JSON',
+    'toast.knowledgeInvalidJson': '世界书知识库 JSON 格式无效（第 {line} 行），请修改后再保存',
     'toast.wbImported': '已导入世界书「{name}」（{total} 条知识，{enabled} 条启用），请确认后保存',
     'toast.wbImportFailed': '世界书 JSON 导入失败: {msg}',
     'toast.wbUpdated': '已更新世界书',
@@ -989,13 +989,13 @@ const MESSAGES: Record<LangKey, Record<string, string>> = {
     'toast.importFailed': '匯入失敗: {msg}',
     'toast.charDeleted': '已刪除角色「{name}」',
     'toast.nameRequired': '名稱不能為空',
-    'toast.characterBookInvalidJson': 'Character Book 必須是有效的 JSON',
+    'toast.characterBookInvalidJson': 'Character Book JSON 格式無效（第 {line} 行），請修改後再儲存',
     'toast.charCreated': '已建立角色「{name}」',
     'toast.charUpdated': '已更新角色「{name}」',
     'toast.wbDraftImported': '已解析角色卡內的世界書「{name}」，請確認後儲存',
     'toast.wbNameRequired': '世界書名不能為空',
     'toast.wbNameContentRequired': '世界書名不能為空，且內容與知識庫至少填寫一項',
-    'toast.knowledgeInvalidJson': '知識庫必須是有效的 JSON',
+    'toast.knowledgeInvalidJson': '世界書知識庫 JSON 格式無效（第 {line} 行），請修改後再儲存',
     'toast.wbImported': '已匯入世界書「{name}」（{total} 條知識，{enabled} 條啟用），請確認後儲存',
     'toast.wbImportFailed': '世界書 JSON 匯入失敗: {msg}',
     'toast.wbUpdated': '已更新世界書',
@@ -1505,13 +1505,13 @@ const MESSAGES: Record<LangKey, Record<string, string>> = {
     'toast.importFailed': 'Import failed: {msg}',
     'toast.charDeleted': 'Deleted character "{name}"',
     'toast.nameRequired': 'Name cannot be empty',
-    'toast.characterBookInvalidJson': 'Character Book must be valid JSON',
+    'toast.characterBookInvalidJson': 'Character Book JSON is invalid (line {line}). Correct it before saving.',
     'toast.charCreated': 'Created character "{name}"',
     'toast.charUpdated': 'Updated character "{name}"',
     'toast.wbDraftImported': 'Parsed the Lorebook "{name}" from the character card — review and save',
     'toast.wbNameRequired': 'Lorebook name cannot be empty',
     'toast.wbNameContentRequired': 'Lorebook name is required, and content or knowledge base must be filled in',
-    'toast.knowledgeInvalidJson': 'Knowledge base must be valid JSON',
+    'toast.knowledgeInvalidJson': 'Lorebook knowledge-base JSON is invalid (line {line}). Correct it before saving.',
     'toast.wbImported': 'Imported world book "{name}" ({total} entries, {enabled} enabled) — review and save',
     'toast.wbImportFailed': 'World book JSON import failed: {msg}',
     'toast.wbUpdated': 'Lorebook updated',