tavern-harness 0.1.24 → 0.1.25

package/CHANGELOG.md

@@ -3,6 +3,20 @@
 > 本文件由 `scripts/changelog.mjs` 从 `changelog/v*.md` 生成，请勿手动编辑。
 > 版本对比链接见文末；源文件位于仓库 `changelog/` 目录。
 
+## [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 +716,7 @@
 - Vite + React + Zustand + Dexie stack with browser-side local persistence
 
 <!-- 链接定义 -->
+[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.25",
   "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/CharactersView.tsx

@@ -316,7 +316,7 @@ 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
@@ -371,7 +371,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 +391,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 +415,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) => (
@@ -595,7 +595,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 +712,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 +755,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>
@@ -960,14 +960,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 +1063,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 +1081,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/generated/changelog.json

@@ -1,7 +1,31 @@
 {
-  "latest": "0.1.24",
+  "latest": "0.1.25",
   "repo": "https://github.com/Rannichan/Tavern-Harness",
   "entries": [
+    {
+      "version": "0.1.25",
+      "date": "2026-10-27",
+      "breaking": false,
+      "compare": "v0.1.24...v0.1.25",
+      "groups": {
+        "zh-CN": [
+          {
+            "kind": "internal",
+            "items": [
+              "统一了标题、对话框、工具卡片等界面文字的字体排印样式，改用共享的排版类和样式变量，后续调整字号、字重只需改一处"
+            ]
+          }
+        ],
+        "en": [
+          {
+            "kind": "internal",
+            "items": [
+              "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"
+            ]
+          }
+        ]
+      }
+    },
     {
       "version": "0.1.24",
       "date": "2026-10-27",