tavern-harness 0.1.23 → 0.1.25

package/CHANGELOG.md

@@ -3,6 +3,66 @@
 > 本文件由 `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
+
+### 中文
+
+#### 改进
+
+- 工作区文件管理器现在可以直接进入 public 目录，并预览其中的网页、图片等文件
+- 文件管理器的路径导航移到文件列表上方，窄屏下标题栏不再换行，右侧按钮也不会被挤掉
+- 手机上点击顶部导航的「聊天 / 角色 / 成就 / 设置」或返回首页后，侧边栏会自动收起
+- 手机端的工具调用卡片改用等宽字体并加粗，长工具名和参数更容易看清
+- 输入框提示精简为「输入消息...」，不再把指令说明塞进占位文字
+- 技能列表与原文编辑器的字体、名称截断和「内置」标签对齐统一
+- 工具返回给模型的结果统一使用英文，切换界面语言不再影响模型读取；工具卡片中的结果行也随之显示英文
+
+#### 修复
+
+- 删除会话与会话设置保存改为事务写入，中途出错不会再留下只删了一半的数据
+- 连续点击「删除」「保存」不会再重复提交，也不会卡在加载状态
+- 创建、编辑、删除会话失败时会提示具体原因，而不是静默失败
+
+#### 内部
+
+- 清理工具执行路径中不再需要的界面文案依赖
+
+### English
+
+#### Changed
+
+- The workspace file manager can now browse into `public` and preview pages, images, and other files stored there
+- The file manager's path breadcrumb now sits above the file list, and the header no longer wraps on narrow screens or pushes its buttons aside
+- On mobile, tapping a top navigation tab (Chat, Characters, Achievements, Settings) or going home now closes the sidebar
+- Tool call cards on mobile use a monospace, bolder typeface, so long tool names and arguments are easier to read
+- The composer placeholder is now simply "Type a message..." instead of packing command hints into it
+- The skill list and raw log editor now share consistent typography, name truncation, and Built-in tag alignment
+- Tool results returned to the model are always English now, so switching the UI language no longer affects what the model reads; the result rows in tool cards show English as well
+
+#### Fixed
+
+- Deleting a session and saving session settings are now transactional, so a failure can no longer leave half-deleted data behind
+- Repeatedly clicking delete or save no longer sends duplicate requests or leaves the dialog stuck loading
+- Creating, editing, or deleting a session now reports the actual error instead of failing silently
+
+#### Internal
+
+- Removed the no-longer-needed UI string dependency from the tool execution path
+
 ## [0.1.23] - 2026-10-26
 
 ### 中文
@@ -656,6 +716,8 @@
 - 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
 [0.1.21]: https://github.com/Rannichan/Tavern-Harness/compare/v0.1.20...v0.1.21

package/package.json

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

package/sandbox-server.mjs

@@ -596,10 +596,11 @@ const server = createServer(async (req, res) => {
       const payload = JSON.parse(body);
       const base = resolveSessionBase(payload?.session);
       const rel = sanitizeWorkspaceRelativePath(payload?.path);
-      if (resolvesOutsideSession(rel, base)) throw new Error('Path is outside the workspace');
+      const readingPublicLink = base !== PUBLIC_WORKSPACE && (rel === 'public' || rel.startsWith('public/'));
+      if (!readingPublicLink && resolvesOutsideSession(rel, base)) throw new Error('Path is outside the workspace');
       const file = resolve(base, rel);
       if (!existsSync(file) || !lstatSync(file).isFile()) throw new Error('File not found');
-      assertInside(base, realpathSync(file));
+      assertInside(readingPublicLink ? PUBLIC_WORKSPACE : base, realpathSync(file));
       const content = await readFilePromise(file);
       if (content.length > 8 * 1024 * 1024) throw new Error('Preview file exceeds the 8MB limit');
       res.end(JSON.stringify({ ok: true, content: content.toString('base64') }));

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>
@@ -325,6 +326,7 @@ function SessionHeader({
   const [showEdit, setShowEdit] = useState(false);
   const [confirmReset, setConfirmReset] = useState(false);
   const [confirmDelete, setConfirmDelete] = useState(false);
+  const [deletingSession, setDeletingSession] = useState(false);
   const [exportOpen, setExportOpen] = useState(false);
   const [showWorkspace, setShowWorkspace] = useState(false);
   const [showMobileActions, setShowMobileActions] = useState(false);
@@ -447,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">
@@ -472,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">
@@ -482,10 +484,19 @@ function SessionHeader({
             <button className="btn" onClick={() => setConfirmDelete(false)}>{t('common.cancel')}</button>
             <button
               className="btn btn-danger"
+              disabled={deletingSession}
               onClick={async () => {
-                await deleteSession(session.id!);
-                setConfirmDelete(false);
-                addToast(t('toast.sessionDeleted'));
+                if (deletingSession) return;
+                setDeletingSession(true);
+                try {
+                  await deleteSession(session.id!);
+                  setConfirmDelete(false);
+                  addToast(t('toast.sessionDeleted'));
+                } catch (error) {
+                  addToast(t('toast.sessionDeleteFailed', { msg: (error as Error).message }), 'error');
+                } finally {
+                  setDeletingSession(false);
+                }
               }}
             >
               <Icon name="trash" size={13} /> {t('common.delete')}

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) => (
@@ -556,7 +556,7 @@ function WorldBookList({ books, onChanged }: {
 
   return (
     <div>
-      <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 12 }}>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
         <span className="group-label" style={{ margin: 0 }}>{t('workshop.wbCount', { n: books.length })}</span>
         <div style={{ display: 'flex', gap: 8 }}>
           <button className="btn btn-sm" onClick={() => jsonFileRef.current?.click()} title={t('workshop.jsonImportTip')}>
@@ -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">
-          {tool.name}
-          {tool.isBuiltIn && <span className="tag" style={{ marginLeft: 8 }}>{t('common.builtin')}</span>}
+          <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

@@ -52,6 +52,7 @@ export function NewSessionMenu({ onClose, editingSession }: { onClose: () => voi
   const [turnOrderMode, setTurnOrderMode] = useState<'PRESET' | 'RANDOM'>(editingSession?.turnOrderMode ?? 'PRESET');
   const [mentionOnlyMode, setMentionOnlyMode] = useState(editingSession?.mentionOnlyMode === true);
   const [enableGreeting, setEnableGreeting] = useState(editingSession?.enableGreeting !== false);
+  const [saving, setSaving] = useState(false);
   const selectedNpcIds = participantOrder.filter((id) => id !== -1);
   const modeLabel = selectedNpcIds.length === 0 ? t('newSession.notSelected') : selectedNpcIds.length === 1 ? t('newSession.npcChat') : t('newSession.groupChat', { n: selectedNpcIds.length });
   const sensors = useSortableSensors();
@@ -77,55 +78,59 @@ export function NewSessionMenu({ onClose, editingSession }: { onClose: () => voi
   }, [editingSession?.id]);
 
   const create = async () => {
+    if (saving) return;
     if (selectedNpcIds.length === 0) {
       addToast(t('toast.pickOneNpc'), 'error');
       return;
     }
-    const finalTitle = title.trim() || selectedNpcIds.map((id) => npcs.find((n) => n.id === id)?.name).filter(Boolean).join('、');
-    if (isEditing && editingSession?.id) {
-      await updateSessionSettings(editingSession.id, {
-        title: finalTitle,
-        npcIds: selectedNpcIds,
-        worldBookId,
-        userPersonaNpcId,
-        turnOrderMode,
-        participantOrder,
-        mentionOnlyMode,
-        enableGreeting,
-      });
+    setSaving(true);
+    try {
+      const finalTitle = title.trim() || selectedNpcIds.map((id) => npcs.find((n) => n.id === id)?.name).filter(Boolean).join('、');
+      if (isEditing && editingSession?.id) {
+        await updateSessionSettings(editingSession.id, {
+          title: finalTitle,
+          npcIds: selectedNpcIds,
+          worldBookId,
+          userPersonaNpcId,
+          turnOrderMode,
+          participantOrder,
+          mentionOnlyMode,
+          enableGreeting,
+        });
+        addToast(t('toast.sessionUpdated'));
+        onClose();
+        return;
+      }
+      const sid = selectedNpcIds.length === 1
+        ? await createSession('NPC', {
+          associatedId: selectedNpcIds[0],
+          title: finalTitle,
+          worldBookId,
+          userPersonaNpcId,
+          turnOrderMode,
+          participantOrder,
+          mentionOnlyMode,
+          enableGreeting,
+        })
+        : await createSession('GROUP', {
+          npcIds: selectedNpcIds,
+          title: finalTitle,
+          worldBookId,
+          userPersonaNpcId,
+          turnOrderMode,
+          participantOrder,
+          mentionOnlyMode,
+          enableGreeting,
+        });
       await useStore.getState().refreshSessions();
-      useStore.getState().setActiveSession(editingSession.id);
-      addToast(t('toast.sessionUpdated'));
+      useStore.getState().setActiveSession(sid);
       onClose();
-      return;
-    }
-    let sid: number;
-    if (selectedNpcIds.length === 1) {
-      sid = await createSession('NPC', {
-        associatedId: selectedNpcIds[0],
-        title: finalTitle,
-        worldBookId,
-        userPersonaNpcId,
-        turnOrderMode,
-        participantOrder,
-        mentionOnlyMode,
-        enableGreeting,
-      });
-    } else {
-      sid = await createSession('GROUP', {
-        npcIds: selectedNpcIds,
-        title: finalTitle,
-        worldBookId,
-        userPersonaNpcId,
-        turnOrderMode,
-        participantOrder,
-        mentionOnlyMode,
-        enableGreeting,
-      });
+    } catch (error) {
+      if (isEditing) addToast(t('toast.sessionSaveFailed', { msg: (error as Error).message }), 'error');
+      else addToast(t('toast.genFailed', { msg: (error as Error).message }), 'error');
+    } finally {
+      setSaving(false);
     }
-    await useStore.getState().refreshSessions();
-    useStore.getState().setActiveSession(sid);
-    onClose();
   };
 
   const addParticipant = (npcId: number) => {
@@ -155,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 }}>
@@ -198,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>
             ) : (
@@ -273,7 +278,7 @@ export function NewSessionMenu({ onClose, editingSession }: { onClose: () => voi
       </div>
       <div className="modal-foot">
         <button className="btn" onClick={onClose}>{t('common.cancel')}</button>
-        <button className="btn btn-primary" disabled={!canCreate} onClick={create}>{isEditing ? t('common.save') : t('common.ok')}</button>
+        <button className="btn btn-primary" disabled={!canCreate || saving} onClick={create}>{isEditing ? t('common.save') : t('common.ok')}</button>
       </div>
     </Modal>
   );

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

@@ -62,6 +62,7 @@ export function Sidebar() {
 
   const [showNew, setShowNew] = useState(false);
   const [confirmDelete, setConfirmDelete] = useState<ChatSession | null>(null);
+  const [deletingSession, setDeletingSession] = useState(false);
   const [editTarget, setEditTarget] = useState<ChatSession | null>(null);
   const [sessionMenu, setSessionMenu] = useState<{ session: ChatSession; x: number; y: number } | null>(null);
   const [query, setQuery] = useState('');
@@ -178,11 +179,17 @@ export function Sidebar() {
   const npcById = (id: number | null) => (id != null ? npcs.find((n) => n.id === id) : null);
 
   const handleDelete = async () => {
-    if (!confirmDelete) return;
-    const sid = confirmDelete.id!;
-    await deleteSession(sid);
-    addToast(t('toast.sessionDeleted'));
-    setConfirmDelete(null);
+    if (!confirmDelete || deletingSession) return;
+    setDeletingSession(true);
+    try {
+      await deleteSession(confirmDelete.id!);
+      addToast(t('toast.sessionDeleted'));
+      setConfirmDelete(null);
+    } catch (error) {
+      addToast(t('toast.sessionDeleteFailed', { msg: (error as Error).message }), 'error');
+    } finally {
+      setDeletingSession(false);
+    }
   };
 
   const openEdit = (session: ChatSession) => {
@@ -281,6 +288,7 @@ export function Sidebar() {
     }));
 
   const returnHome = () => {
+    setMobileOpen(false);
     const now = Date.now();
     homeClickTimes.current = [...homeClickTimes.current, now]
       .filter((time) => now - time <= SHAREHOLDER_CLICK_WINDOW_MS)
@@ -315,16 +323,16 @@ export function Sidebar() {
           >
             <img src="/tavern-harness-logo.png" alt="" />
           </button>
-          <button className={`nav-chip ${activeView === 'chat' ? 'active' : ''}`} onClick={() => setActiveView('chat')}>
+          <button className={`nav-chip ${activeView === 'chat' ? 'active' : ''}`} onClick={() => { setActiveView('chat'); setMobileOpen(false); }}>
             <Icon name="send" size={15} /> <span>{t('nav.chat')}</span>
           </button>
-          <button className={`nav-chip ${activeView === 'characters' ? 'active' : ''}`} onClick={() => setActiveView('characters')}>
+          <button className={`nav-chip ${activeView === 'characters' ? 'active' : ''}`} onClick={() => { setActiveView('characters'); setMobileOpen(false); }}>
             <Icon name="users" size={15} /> <span>{t('nav.characters')}</span>
           </button>
-          <button className={`nav-chip ${activeView === 'stats' ? 'active' : ''}`} onClick={() => setActiveView('stats')}>
+          <button className={`nav-chip ${activeView === 'stats' ? 'active' : ''}`} onClick={() => { setActiveView('stats'); setMobileOpen(false); }}>
             <Icon name="trophy" size={15} /> <span>{t('nav.achievements')}</span>
           </button>
-          <button className={`nav-chip ${activeView === 'settings' ? 'active' : ''}`} onClick={() => setActiveView('settings')}>
+          <button className={`nav-chip ${activeView === 'settings' ? 'active' : ''}`} onClick={() => { setActiveView('settings'); setMobileOpen(false); }}>
             <Icon name="settings" size={15} /> <span>{t('nav.settings')}</span>
             {hasUnseenVersion && <span className="unseen-dot" title={t('changelog.unseen')} />}
           </button>
@@ -519,19 +527,19 @@ 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>
           <div className="modal-foot">
             <button className="btn" onClick={() => setConfirmDelete(null)}>{t('common.cancel')}</button>
-            <button className="btn btn-danger" onClick={handleDelete}>
+            <button className="btn btn-danger" disabled={deletingSession} onClick={handleDelete}>
               <Icon name="trash" size={13} /> {t('common.delete')}
             </button>
           </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>