tavern-harness 0.1.18 → 0.1.20

package/CHANGELOG.md

@@ -3,6 +3,66 @@
 > 本文件由 `scripts/changelog.mjs` 从 `changelog/v*.md` 生成，请勿手动编辑。
 > 版本对比链接见文末；源文件位于仓库 `changelog/` 目录。
 
+## [0.1.20] - 2026-10-26
+
+### 中文
+
+#### 新增
+
+- 新增「纯净模式」：只显示消息正文，隐藏思考过程和工具调用；没有正文的消息也会一并隐藏，实际的思考和工具执行不受影响（在「设置 → 工具执行」中开启）
+- HTML 预览可以在新页面打开，方便全屏查看和调试交互式页面
+
+#### 改进
+
+- 长会话加载明显更快：消息列表不再携带每次请求的原始日志，改为打开「查看原始日志」时按需读取；切回已加载过的会话时直接复用内存中的内容，不再重复拉取
+- 长会话下持久化服务更稳定：响应启用 brotli / gzip 压缩，服务繁忙时刷新页面不再误报会话加载失败
+- HTML 预览的缩放按钮移到底部说明栏，不再占用顶部工具栏，预览区域更宽敞
+
+#### 修复
+
+- 会话标题过长时不再挤压右侧按钮：标题限制最大宽度并在末尾渐隐
+
+### English
+
+#### Added
+
+- New "Pure mode": shows only message bodies, hiding reasoning and tool calls; messages without body text are hidden too, while actual reasoning and tool execution keep running (enable it in Settings → Tool execution)
+- HTML previews can be opened in a new page for full-screen viewing and debugging interactive pages
+
+#### Changed
+
+- Long conversations load noticeably faster: message lists no longer carry per-request raw logs — they're fetched only when you open "View raw log" — and switching back to a session you've already loaded reuses the in-memory copy instead of fetching it again
+- The persistence service holds up better with long conversations: responses are brotli / gzip compressed, and a busy service no longer triggers false "failed to load session" errors after a page refresh
+- HTML preview zoom buttons moved to the bottom note bar, freeing the top toolbar and giving the preview more room
+
+#### Fixed
+
+- Long session titles no longer squeeze the header buttons: the title is capped in width and fades out at the end
+
+## [0.1.19] - 2026-10-25
+
+### 中文
+
+#### 新增
+
+- 新增四项「首次行动」成就：首次导出游戏（独乐乐不如众乐乐）、首次导入游戏（发现者）、首次创建角色卡或世界书（创造者）、首次创建自定义技能（探索者）
+
+#### 改进
+
+- 聊天标题栏更简洁：副标题只保留上下文用量，不再重复显示会话模式
+- 手机端标题栏按钮区支持横向滑动，按钮较多时不再被挤出屏幕或误触页面
+
+### English
+
+#### Added
+
+- Four new first-action achievements: export a game (Sharing Is Caring), import a game (Discoverer), create a character card or Lorebook (Creator), and create a custom skill (Explorer)
+
+#### Changed
+
+- The chat header is cleaner: the subtitle now shows only context usage instead of repeating the session mode
+- On mobile, the header action row scrolls horizontally, so buttons are no longer pushed off screen or trigger page gestures
+
 ## [0.1.18] - 2026-10-25
 
 ### 中文
@@ -528,6 +588,8 @@
 - Vite + React + Zustand + Dexie stack with browser-side local persistence
 
 <!-- 链接定义 -->
+[0.1.20]: https://github.com/Rannichan/Tavern-Harness/compare/v0.1.19...v0.1.20
+[0.1.19]: https://github.com/Rannichan/Tavern-Harness/compare/v0.1.18...v0.1.19
 [0.1.18]: https://github.com/Rannichan/Tavern-Harness/compare/v0.1.17...v0.1.18
 [0.1.17]: https://github.com/Rannichan/Tavern-Harness/compare/v0.1.16...v0.1.17
 [0.1.16]: https://github.com/Rannichan/Tavern-Harness/compare/v0.1.15...v0.1.16

package/package.json

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

package/persistence-server.mjs

@@ -4,6 +4,7 @@
 
 import { createServer } from 'node:http';
 import { randomBytes, timingSafeEqual } from 'node:crypto';
+import { brotliCompressSync, constants as zlibConstants, gzipSync } from 'node:zlib';
 import { mkdirSync } from 'node:fs';
 import { homedir } from 'node:os';
 import { dirname, join, resolve } from 'node:path';
@@ -72,11 +73,26 @@ function setWriteLock(lock) {
 }
 
 function json(res, status, body) {
-  res.writeHead(status, {
+  const payload = Buffer.from(JSON.stringify(body));
+  const acceptedEncodings = String(res.req.headers['accept-encoding'] || '').toLowerCase();
+  const headers = {
     'Content-Type': 'application/json; charset=utf-8',
     'Cache-Control': 'no-store',
-  });
-  res.end(JSON.stringify(body));
+    'Vary': 'Accept-Encoding',
+  };
+  let encoded = payload;
+  if (payload.length >= 1024 && /\bbr\b/.test(acceptedEncodings)) {
+    encoded = brotliCompressSync(payload, {
+      params: { [zlibConstants.BROTLI_PARAM_QUALITY]: 4 },
+    });
+    headers['Content-Encoding'] = 'br';
+  } else if (payload.length >= 1024 && /\bgzip\b/.test(acceptedEncodings)) {
+    encoded = gzipSync(payload, { level: 6 });
+    headers['Content-Encoding'] = 'gzip';
+  }
+  headers['Content-Length'] = String(encoded.length);
+  res.writeHead(status, headers);
+  res.end(encoded);
 }
 
 function readJson(req, maxBytes) {
@@ -152,6 +168,12 @@ function saveRecord(collection, key, value) {
 
 const getRecord = database.prepare('SELECT value_json, updated_at FROM app_records WHERE collection = ? AND record_key = ?');
 const listRecords = database.prepare('SELECT record_key, value_json, updated_at FROM app_records WHERE collection = ? ORDER BY record_key');
+const getMessageRawLog = database.prepare(`
+  SELECT json_extract(value_json, '$.rawRequestBody') AS raw_request_body,
+         json_extract(value_json, '$.rawResponseBody') AS raw_response_body
+  FROM app_records
+  WHERE collection = 'messages' AND record_key = ?
+`);
 const listRecordsByJsonField = database.prepare(`
   SELECT record_key, value_json, updated_at
   FROM app_records
@@ -268,6 +290,21 @@ const server = createServer(async (req, res) => {
       return;
     }
 
+    if (pathname === '/records/message-raw-log') {
+      if (collection !== 'messages' || !validKey(body.key)) {
+        json(res, 400, { ok: false, message: 'A valid message key is required' });
+        return;
+      }
+      const record = getMessageRawLog.get(body.key);
+      json(res, 200, {
+        ok: true,
+        rawLog: record ? {
+          rawRequestBody: record.raw_request_body ?? null,
+          rawResponseBody: record.raw_response_body ?? null,
+        } : null,
+      });
+      return;
+    }
     if (pathname === '/records/list' || pathname === '/records/list-by-field') {
       let rows;
       if (pathname === '/records/list-by-field') {
@@ -284,11 +321,16 @@ const server = createServer(async (req, res) => {
       } else {
         rows = listRecords.all(collection);
       }
-      const records = rows.map((row) => ({
-        key: row.record_key,
-        value: JSON.parse(row.value_json),
-        updatedAt: row.updated_at,
-      }));
+      const records = rows.map((row) => {
+        const value = JSON.parse(row.value_json);
+        // 原始请求与响应只在用户显式打开日志时按消息 id 获取，避免长会话重复传输大字段。
+        if (collection === 'messages') {
+          value.rawLogAvailable = Boolean(value.rawRequestBody || value.rawResponseBody);
+          value.rawRequestBody = null;
+          value.rawResponseBody = null;
+        }
+        return { key: row.record_key, value, updatedAt: row.updated_at };
+      });
       json(res, 200, { ok: true, records });
       return;
     }

package/src/App.tsx

@@ -24,6 +24,27 @@ function formatContextTokens(tokens: number): string {
   return `${(tokens / 1_000).toFixed(1)}K`;
 }
 
+function ChatLoadingPlaceholder({ session }: { session: import('./types/models').ChatSession }) {
+  const npcs = useStore((s) => s.npcs);
+  const t = useT();
+  const npc = session.associatedId != null ? npcs.find((item) => item.id === session.associatedId) : null;
+
+  return (
+    <div className="chat-scroll" aria-busy="true">
+      <div className="chat-col">
+        <div className="empty-state fade-up">
+          <div className="big">🫖</div>
+          <div>
+            {session.mode === 'STANDARD' && <><b>{t('chat.emptyStandardTitle')}</b><br />{t('chat.emptyStandardSub')}</>}
+            {session.mode === 'NPC' && <><b>{t('chat.emptyNpcTitle', { name: npc?.name ?? t('chat.speakerChar') })}</b><br />{npc?.greeting}</>}
+            {session.mode === 'GROUP' && <><b>{t('chat.emptyGroupTitle')}</b><br />{t('chat.emptyGroupSub')}</>}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 export default function App() {
   const [takingControl, setTakingControl] = useState(false);
   const initStatus = useStore((s) => s.initStatus);
@@ -39,6 +60,7 @@ export default function App() {
     setMountedViews([...mountedViews, activeView]);
   }
   const activeSessionId = useStore((s) => s.activeSessionId);
+  const [renderedSessionId, setRenderedSessionId] = useState<number | null>(activeSessionId);
   const sessions = useStore((s) => s.sessions);
   const messages = useStore((s) => s.messages);
   const contextCompressions = useStore((s) => s.contextCompressions);
@@ -75,10 +97,19 @@ export default function App() {
   }, [isStreaming]);
 
   const activeSession = sessions.find((s) => s.id === activeSessionId) ?? null;
-  const sessionMessages = activeSessionId != null ? (messages[activeSessionId] ?? []) : [];
   const sessionParticipants = activeSessionId != null ? (participants[activeSessionId] ?? []) : [];
   const isStreamingSession = useStore((s) => s.streaming.sessionId === activeSessionId);
 
+  useEffect(() => {
+    if (activeSessionId == null || messages[activeSessionId] !== undefined) {
+      setRenderedSessionId(activeSessionId);
+    }
+  }, [activeSessionId, messages]);
+
+  const renderedSession = sessions.find((s) => s.id === renderedSessionId) ?? null;
+  const renderedSessionMessages = renderedSessionId != null ? (messages[renderedSessionId] ?? []) : [];
+  const renderedSessionParticipants = renderedSessionId != null ? (participants[renderedSessionId] ?? []) : [];
+
   const handleTakeOverControl = async () => {
     setTakingControl(true);
     try {
@@ -150,14 +181,18 @@ export default function App() {
                 <SessionHeader session={activeSession} participants={sessionParticipants} />
                 <div className="chat-main-row">
                   <div className="chat-main-col">
-                    <ChatView
-                      session={activeSession}
-                      messages={sessionMessages}
-                      participants={sessionParticipants}
-                      compressions={contextCompressions[activeSession.id!] ?? []}
-                      streaming={isStreamingSession}
-                      active={activeView === 'chat'}
-                    />
+                    {renderedSession != null && renderedSession.id === activeSession.id ? (
+                      <ChatView
+                        session={renderedSession}
+                        messages={renderedSessionMessages}
+                        participants={renderedSessionParticipants}
+                        compressions={contextCompressions[renderedSession.id!] ?? []}
+                        streaming={isStreamingSession}
+                        active={activeView === 'chat'}
+                      />
+                    ) : (
+                      <ChatLoadingPlaceholder session={activeSession} />
+                    )}
                     <ChatInput sessionId={activeSession.id!} />
                   </div>
                   <TurnQueuePanel session={activeSession} participants={sessionParticipants} />
@@ -293,7 +328,6 @@ function SessionHeader({
   const [exportOpen, setExportOpen] = useState(false);
   const [showWorkspace, setShowWorkspace] = useState(false);
 
-  const modeLabel = session.mode === 'STANDARD' ? t('header.modeStandard') : session.mode === 'NPC' ? t('header.modeNpc') : t('header.modeGroup');
   const messages = useStore((s) => s.messages[session.id!] ?? []);
   const contextTokens = useMemo(() => {
     const assistantMessages = messages.filter((message) => message.role === 'assistant' && message.totalTokens > 0);
@@ -321,15 +355,11 @@ function SessionHeader({
       <SessionVisual mode={session.mode} npcName={npcRef?.name ?? undefined} hue={npcRef?.avatarColorOrdinal ?? 0} imageUrl={npcRef?.avatarDataUrl} members={session.mode === 'GROUP' ? groupMemberAvatars : undefined} size="lg" />
       <div className="tinfo">
         <div className="ttitle">{session.title}</div>
-        <div className="tsub">
-          <span className="tsub-mode">{modeLabel}</span>
-          {contextTokens != null && (
-            <span className="tsub-context-group">
-              <span>·</span>
-              <span className="tsub-mode">{t('nav.contextUsage', { tokens: formatContextTokens(contextTokens) })}</span>
-            </span>
-          )}
-        </div>
+        {contextTokens != null && (
+          <div className="tsub">
+            <span className="tsub-mode">{t('nav.contextUsage', { tokens: formatContextTokens(contextTokens) })}</span>
+          </div>
+        )}
       </div>
       <div className="chat-actions">
         <button className="btn-ghost icon-tooltip" title={t(usesPublicWorkspace ? 'header.workspaceRootHint' : 'header.workspaceHint')} onClick={() => setShowWorkspace(true)}>

package/src/components/CharactersView.tsx

@@ -29,6 +29,7 @@ import { textPreview } from '../core/textPreview';
 import { AVATAR_STORAGE_SIZE, shrinkAvatarDataUrl } from '../core/avatarThumbnail';
 import { ALL_BUILTIN_TOOL_NAMES } from '../core/toolDefinitions';
 import { useT } from '../core/i18n';
+import { unlockAchievement } from '../core/achievements';
 
 const CharacterBookEditor = lazy(() => import('./CharacterBookEditor'));
 
@@ -297,6 +298,7 @@ function CharacterEditorModal({ npc, isNew, onClose, onSaved }: { npc: NpcCharac
         ...npc,
         ...npcData,
       });
+      await unlockAchievement('creator');
       addToast(t('toast.charCreated', { name }));
     } else {
       await db.npcs.update(npc.id!, npcData);
@@ -517,6 +519,7 @@ function WorldBookList({ books, onChanged }: {
       addToast(t('toast.wbUpdated'));
     } else {
       await db.worldBooks.add({ ...data, imageUri: null, createdAt: Date.now() });
+      await unlockAchievement('creator');
       addToast(t('toast.wbCreated'));
     }
     setEditing(null);

package/src/components/ChatView.tsx

@@ -1,5 +1,6 @@
 import { Fragment, lazy, Suspense, useEffect, useLayoutEffect, useMemo, useRef, useState, type ReactNode, type UIEvent } from 'react';
 import { useStore } from '../store/store';
+import { db } from '../db/database';
 import { type ChatMessage, type ChatParticipant, type ChatSession, type ContextCompression, type ToolCallRecord, displayModelName } from '../types/models';
 import { Avatar, Icon, Markdown, Collapse, Modal, AttachCard } from './shared';
 import { FileDisplayViewButton, parseStoredDisplayRef } from './FileDisplayModal';
@@ -119,6 +120,39 @@ export function ChatView({
     () => new Map(compressions.map((compression) => [compression.endMessageId, compression])),
     [compressions],
   );
+  const parsedToolCallsCache = useRef(new Map<number, { source: string; calls: ToolCallRecord[] }>());
+  const toolMessageData = useMemo(() => {
+    const resultsByCallId = new Map<string, ChatMessage[]>();
+    const displayedCallIds = new Set<string>();
+
+    for (const message of messages) {
+      if (message.role === 'tool' && message.toolCallId) {
+        const results = resultsByCallId.get(message.toolCallId);
+        if (results) results.push(message);
+        else resultsByCallId.set(message.toolCallId, [message]);
+        continue;
+      }
+      if (message.role !== 'assistant' || !message.toolCallsJson) continue;
+
+      const cached = message.id != null ? parsedToolCallsCache.current.get(message.id) : undefined;
+      let calls: ToolCallRecord[];
+      if (cached?.source === message.toolCallsJson) {
+        calls = cached.calls;
+      } else {
+        try {
+          calls = JSON.parse(message.toolCallsJson) as ToolCallRecord[];
+        } catch {
+          calls = [];
+        }
+        if (message.id != null) {
+          parsedToolCallsCache.current.set(message.id, { source: message.toolCallsJson, calls });
+        }
+      }
+      for (const call of calls) if (call.id) displayedCallIds.add(call.id);
+    }
+
+    return { resultsByCallId, displayedCallIds };
+  }, [messages]);
 
   useEffect(() => {
     const el = scrollRef.current;
@@ -275,33 +309,6 @@ export function ChatView({
     return personaId != null ? s.npcs.find((npc) => npc.id === personaId)?.name ?? null : null;
   });
 
-  // 工具调用结果按 toolCallId 分组；已由 assistant 消息工具卡片展示的调用 id，其结果并入卡片内部渲染
-  const toolResultsByCallId = useMemo(() => {
-    const map = new Map<string, ChatMessage[]>();
-    for (const m of messages) {
-      if (m.role === 'tool' && m.toolCallId) {
-        const arr = map.get(m.toolCallId);
-        if (arr) arr.push(m);
-        else map.set(m.toolCallId, [m]);
-      }
-    }
-    return map;
-  }, [messages]);
-  const displayedToolCallIds = useMemo(() => {
-    const ids = new Set<string>();
-    for (const m of messages) {
-      if (m.role !== 'assistant') continue;
-      try {
-        for (const tc of JSON.parse(m.toolCallsJson || '[]') as ToolCallRecord[]) {
-          if (tc.id) ids.add(tc.id);
-        }
-      } catch {
-        /* ignore */
-      }
-    }
-    return ids;
-  }, [messages]);
-
   const handleScroll = (event: UIEvent<HTMLDivElement>) => {
     const el = event.currentTarget;
     // 隐藏过程中浏览器会把滚动位置夹到 0 并派发一次 scroll 事件，
@@ -354,8 +361,8 @@ export function ChatView({
               userPersonaName={userPersonaName}
               loopIndex={isGroup ? (m.loopIndex ?? 0) : null}
               streaming={streaming && m.id === lastMsgId(messages)}
-              toolResultsByCallId={toolResultsByCallId}
-              suppressedResultIds={displayedToolCallIds}
+              toolResultsByCallId={toolMessageData.resultsByCallId}
+              suppressedResultIds={toolMessageData.displayedCallIds}
             />
             {compressionsByEndMessageId.has(m.id!) && (
               <div className="compression-banner-wrap">
@@ -422,6 +429,7 @@ function MessageBubble({
 }) {
   const t = useT();
   const providers = useStore((s) => s.providers);
+  const pureMode = useStore((s) => s.settings?.pureMode === true);
   const turnStreaming = useStore((s) => s.streaming.sessionId === session.id);
   const longPressProps = useMessageLongPress(msg, session);
   // System 消息（/new 标记）
@@ -434,6 +442,7 @@ function MessageBubble({
 
   // 工具消息
   if (msg.role === 'tool') {
+    if (pureMode) return null;
     // 该结果已并入发起它的工具调用卡片内部 → 不再独立渲染
     if (msg.toolCallId && suppressedResultIds.has(msg.toolCallId)) return null;
     const isError = msg.content.startsWith('ERROR:') || msg.content.startsWith('CANCELLED:');
@@ -486,6 +495,8 @@ function MessageBubble({
     return <UserBubble msg={msg} session={session} userPersonaName={userPersonaName} loopIndex={loopIndex} />;
   }
 
+  if (pureMode && !displayContent && msg.attachments.length === 0) return null;
+
   // 用于「点击队列发言 → 对话定位」：NPC 用 participantId，玩家/未知用 null（定位到循环首条）
   const speakerKey = msg.speakerParticipantId != null ? String(msg.speakerParticipantId) : null;
 
@@ -510,7 +521,7 @@ function MessageBubble({
           {msg.modelUsed && !msg.modelUsed.startsWith('scheduled:') && <span className="msg-model" title={msg.modelUsed}>{displayModelName(providers, msg.modelUsed)}</span>}
           <span className="msg-time">{fmtTime(msg.timestamp)}</span>
         </div>
-        {msg.thinkingContent && (
+        {!pureMode && msg.thinkingContent && (
           <Collapse
             title={t('chat.thinking')}
             icon="🧠"
@@ -521,7 +532,7 @@ function MessageBubble({
             <Markdown text={msg.thinkingContent} mathEnabled={false} />
           </Collapse>
         )}
-        {toolCalls.length > 0 && (
+        {!pureMode && toolCalls.length > 0 && (
           <div className="tool-calls">
             {toolCalls.map((tc, i) => (
               <ToolCallCard
@@ -1411,16 +1422,21 @@ export function MessageMenu() {
       },
     });
   }
-  if (msg.rawRequestBody || msg.rawResponseBody) {
+  if (msg.rawRequestBody || msg.rawResponseBody || msg.rawLogAvailable) {
     actions.push({
       label: t('chat.viewRaw'),
       icon: 'file',
-      onClick: () => {
-        setRawLog({
-          data: msg,
-          title: t('chat.rawLogTitle', { id: msg.id ?? '' }),
-          filename: `raw-log-${msg.id}.txt`,
-        });
+      onClick: async () => {
+        const rawLog = msg.rawRequestBody || msg.rawResponseBody
+          ? msg
+          : await db.messages.getRawLog(msg.id!);
+        if (rawLog) {
+          setRawLog({
+            data: { ...rawLog, id: msg.id, role: msg.role },
+            title: t('chat.rawLogTitle', { id: msg.id ?? '' }),
+            filename: `raw-log-${msg.id}.txt`,
+          });
+        }
         closeMsgMenu();
       },
     });

package/src/components/FileDisplayModal.tsx

@@ -79,6 +79,7 @@ export function FileDisplayModal() {
   const [loadState, setLoadState] = useState<'loading' | 'ok' | 'error'>('loading');
   const [imgError, setImgError] = useState(false);
   const [htmlZoom, setHtmlZoom] = useState(1);
+  const lastModalHtmlZoomRef = useRef(1);
   const [textWrap, setTextWrap] = useState(true);
   const [isPictureInPicture, setIsPictureInPicture] = useState(true);
   const [pipRect, setPipRect] = useState<PipRect>(createPipRect);
@@ -124,11 +125,14 @@ export function FileDisplayModal() {
     setImgError(false);
     setZoom(1);
     setPan({ x: 0, y: 0 });
-    setHtmlZoom(1);
     setTextWrap(true);
     if (isNewDisplay) {
+      const opensInPictureInPicture = active.presentation === 'pip' || active.presentation == null;
+      setHtmlZoom(opensInPictureInPicture ? lastModalHtmlZoomRef.current : 1);
       setPipRect(createPipRect());
-      setIsPictureInPicture(active.presentation === 'pip' || active.presentation == null);
+      setIsPictureInPicture(opensInPictureInPicture);
+    } else {
+      setHtmlZoom(1);
     }
   }, [active]);
 
@@ -276,6 +280,11 @@ export function FileDisplayModal() {
     setIsPictureInPicture(false);
   };
 
+  const openHtmlInNewPage = () => {
+    if (!active || !workspaceDir) return;
+    window.open(previewUrl(active.path, workspaceDir), '_blank', 'noopener,noreferrer');
+  };
+
   const startResize = (edge: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right') => (e: ReactPointerEvent<HTMLButtonElement>) => {
     pipGestureRef.current = {
       type: 'resize',
@@ -312,8 +321,16 @@ export function FileDisplayModal() {
 
   const zoomIn = () => setZoom((z) => Math.min(8, +(z * 1.3).toFixed(2)));
   const zoomOut = () => setZoom((z) => Math.max(0.1, +(z / 1.3).toFixed(2)));
-  const htmlZoomIn = () => setHtmlZoom((z) => Math.min(2, +(z + 0.1).toFixed(1)));
-  const htmlZoomOut = () => setHtmlZoom((z) => Math.max(0.5, +(z - 0.1).toFixed(1)));
+  const updateHtmlZoom = (update: (zoom: number) => number) => {
+    setHtmlZoom((zoom) => {
+      const nextZoom = update(zoom);
+      if (!isPictureInPicture) lastModalHtmlZoomRef.current = nextZoom;
+      return nextZoom;
+    });
+  };
+  const htmlZoomIn = () => updateHtmlZoom((z) => Math.min(2, +(z + 0.1).toFixed(1)));
+  const htmlZoomOut = () => updateHtmlZoom((z) => Math.max(0.5, +(z - 0.1).toFixed(1)));
+  const resetHtmlZoom = () => updateHtmlZoom(() => 1);
   const resetView = () => {
     setZoom(1);
     setPan({ x: 0, y: 0 });
@@ -393,7 +410,16 @@ export function FileDisplayModal() {
               }}
             />
           </div>
-          <div className="display-html-note">{t('display.htmlSandboxNote')}</div>
+          <div className="display-html-note">
+            <span>{t('display.htmlSandboxNote')}</span>
+            {!isPictureInPicture && (
+              <span className="display-html-zoom-group">
+                <button className="icon-btn" title={t('display.htmlZoomOut')} onClick={htmlZoomOut}><Icon name="zoom-out" size={15} /></button>
+                <button className="icon-btn" title={t('display.resetHtmlZoom')} onClick={resetHtmlZoom}>{Math.round(htmlZoom * 100)}%</button>
+                <button className="icon-btn" title={t('display.htmlZoomIn')} onClick={htmlZoomIn}><Icon name="zoom-in" size={15} /></button>
+              </span>
+            )}
+          </div>
         </div>
       );
     }
@@ -451,13 +477,6 @@ export function FileDisplayModal() {
               <button className="icon-btn" title={t('display.zoomIn')} onClick={zoomIn}><Icon name="zoom-in" size={15} /></button>
             </span>
           )}
-          {active.kind === 'html' && loadState === 'ok' && (
-            <span className="display-zoom-group">
-              <button className="icon-btn" title={t('display.htmlZoomOut')} onClick={htmlZoomOut}><Icon name="zoom-out" size={15} /></button>
-              <button className="icon-btn" title={t('display.resetHtmlZoom')} onClick={() => setHtmlZoom(1)}>{Math.round(htmlZoom * 100)}%</button>
-              <button className="icon-btn" title={t('display.htmlZoomIn')} onClick={htmlZoomIn}><Icon name="zoom-in" size={15} /></button>
-            </span>
-          )}
           {active.kind === 'text' && !MD_EXTS.has(ext) && loadState === 'ok' && (
             <button
               className={`icon-btn ${textWrap ? 'active' : ''}`}
@@ -469,6 +488,16 @@ export function FileDisplayModal() {
               <Icon name="text-wrap" size={17} />
             </button>
           )}
+          {active.kind === 'html' && loadState === 'ok' && workspaceDir && (
+            <button
+              className="icon-btn"
+              title={t('display.openHtmlInNewPage')}
+              aria-label={t('display.openHtmlInNewPage')}
+              onClick={openHtmlInNewPage}
+            >
+              <Icon name="open-in-new" size={17} />
+            </button>
+          )}
           <button
             className="icon-btn"
             title={t(isPictureInPicture ? 'display.exitPictureInPicture' : 'display.pictureInPicture')}

package/src/components/GameplayDialogs.tsx

@@ -3,6 +3,7 @@ import { useStore } from '../store/store';
 import { Icon, Modal } from './shared';
 import { useT } from '../core/i18n';
 import { exportGameplay, importGameplay } from '../core/gameplay';
+import { unlockAchievement } from '../core/achievements';
 
 // ============================================================
 // 游戏导出 / 导入
@@ -35,6 +36,7 @@ export function GameplayExportModal({
       if (result === 'canceled') {
         addToast(t('toast.exportCanceled'));
       } else {
+        await unlockAchievement('game-exporter');
         addToast(t('toast.gameplayExported'));
       }
       onClose();
@@ -125,6 +127,7 @@ export function GameplayImportModal({
     setBusy(true);
     try {
       const result = await importGameplay(pendingData.current);
+      await unlockAchievement('game-importer');
       pendingData.current = null;
       setSelectedName(null);
       addToast(

package/src/components/SettingsView.tsx

@@ -82,6 +82,22 @@ export const SettingsView = memo(function SettingsView() {
               <span className="switch-slider" />
             </label>
           </div>
+          <div className="set-row settings-tool-row">
+            <div>
+              <div className="s-label" id="pure-mode-label">{t('settings.pureMode')}</div>
+              <div className="s-desc" id="pure-mode-desc">{t('settings.pureModeDesc')}</div>
+            </div>
+            <label className="switch">
+              <input
+                type="checkbox"
+                aria-labelledby="pure-mode-label"
+                aria-describedby="pure-mode-desc"
+                checked={settings.pureMode === true}
+                onChange={(e) => setSettings({ pureMode: e.target.checked })}
+              />
+              <span className="switch-slider" />
+            </label>
+          </div>
         </div>
 
         {/* 生成参数 */}

package/src/components/shared.tsx

@@ -403,6 +403,7 @@ const ICONS: Record<string, React.ReactNode> = {
   cancel: <path d="M18 6 6 18M6 6l12 12" />,
   x: <path d="M18 6 6 18M6 6l12 12" />,
   share: <><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8" /><path d="m16 6-4-4-4 4M12 2v13" /></>,
+  'open-in-new': <><path d="M14 3h7v7M21 3l-9 9" /><path d="M19 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h6" /></>,
   sort: <><path d="M11 5h10M11 9h7M11 13h4" /><path d="m3 17 3 3 3-3M6 20V4" /></>,
   pencil: <><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5l-5 1 1-5Z" /><path d="m15 5 4 4" /></>,
   upload: <><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /><path d="m17 8-5-5-5 5M12 3v12" /></>,

package/src/core/achievements.ts

@@ -22,6 +22,10 @@ export const ACHIEVEMENTS: AchievementDef[] = [
   { id: 'night-owl', name: '午夜不归人', icon: '🌙', threshold: 1_000_000, description: '累计使用 1,000,000 Token' },
   { id: 'legend', name: '酒馆传奇', icon: '🏆', threshold: 100_000_000, description: '累计使用 100,000,000 Token' },
   { id: 'th-shareholder', name: 'TH股东', icon: '📈', iconUrl: '/tavern-harness-logo.png', description: '连续点击首页图标 5 次' },
+  { id: 'game-exporter', name: '独乐乐不如众乐乐', icon: '📤', description: '首次导出游戏' },
+  { id: 'game-importer', name: '发现者', icon: '📥', description: '首次导入游戏' },
+  { id: 'creator', name: '创造者', icon: '🎨', description: '首次创建角色卡或世界书' },
+  { id: 'explorer', name: '探索者', icon: '🧩', description: '首次创建自定义技能' },
 ];
 
 /** 生涯总 token（输入 + 输出） */

package/src/core/i18n.ts

@@ -195,6 +195,8 @@ const MESSAGES: Record<LangKey, Record<string, string>> = {
     'settings.title': '设置',
     'settings.sub': '模型 API 配置、超参数与主题',
     'settings.toolExecution': '🛠️ 工具执行',
+    'settings.pureMode': '纯净模式',
+    'settings.pureModeDesc': '仅影响前端展示：隐藏对话中的思考和工具调用；没有正文的消息会一并隐藏，不影响实际思考和工具调用。',
     'settings.yoloMode': 'YOLO 模式',
     'settings.yoloModeDesc': '自动批准工具修改和 Shell 执行，无需逐次确认。仅在信任角色和技能时开启。',
     'settings.genParams': '🎛 生成参数',
@@ -384,6 +386,14 @@ const MESSAGES: Record<LangKey, Record<string, string>> = {
     'ach.legend.desc': '累计使用 100,000,000 Token',
     'ach.thShareholder.name': 'TH股东',
     'ach.thShareholder.desc': '5 秒内连续点击首页图标 5 次',
+    'ach.gameExporter.name': '独乐乐不如众乐乐',
+    'ach.gameExporter.desc': '首次导出游戏',
+    'ach.gameImporter.name': '发现者',
+    'ach.gameImporter.desc': '首次导入游戏',
+    'ach.creator.name': '创造者',
+    'ach.creator.desc': '首次创建角色卡或世界书',
+    'ach.explorer.name': '探索者',
+    'ach.explorer.desc': '首次创建自定义技能',
 
     // ---- 成就解锁弹窗 ----
     'achModal.title': '🎉 成就解锁！',
@@ -525,6 +535,7 @@ const MESSAGES: Record<LangKey, Record<string, string>> = {
     'display.exitPictureInPicture': '退出画中画',
     'display.resizePictureInPicture': '调整画中画大小',
     'display.htmlSandboxNote': 'HTML 应用在受限沙箱中运行，并可加载同目录资源',
+    'display.openHtmlInNewPage': '在新页面打开 HTML',
 
     // ---- 系统提示词 ----
     'prompt.worldBook': '=== 世界书 ===',
@@ -705,6 +716,8 @@ const MESSAGES: Record<LangKey, Record<string, string>> = {
     'settings.title': '設定',
     'settings.sub': '模型 API 設定、超參數與主題',
     'settings.toolExecution': '🛠️ 工具執行',
+    'settings.pureMode': '純淨模式',
+    'settings.pureModeDesc': '僅影響前端顯示：隱藏對話中的思考和工具呼叫；沒有正文的訊息會一併隱藏，不影響實際思考和工具呼叫。',
     'settings.yoloMode': 'YOLO 模式',
     'settings.yoloModeDesc': '自動批准工具修改和 Shell 執行，無需逐次確認。僅在信任角色和技能時開啟。',
     'settings.genParams': '🎛 產生參數',
@@ -891,6 +904,14 @@ const MESSAGES: Record<LangKey, Record<string, string>> = {
     'ach.legend.desc': '累計使用 100,000,000 Token',
     'ach.thShareholder.name': 'TH股東',
     'ach.thShareholder.desc': '5 秒內連續點擊首頁圖示 5 次',
+    'ach.gameExporter.name': '獨樂樂不如眾樂樂',
+    'ach.gameExporter.desc': '首次匯出遊戲',
+    'ach.gameImporter.name': '發現者',
+    'ach.gameImporter.desc': '首次匯入遊戲',
+    'ach.creator.name': '創造者',
+    'ach.creator.desc': '首次建立角色卡或世界書',
+    'ach.explorer.name': '探索者',
+    'ach.explorer.desc': '首次建立自訂技能',
 
     'achModal.title': '🎉 成就解鎖！',
     'achModal.total': '生涯已累計 {n} Tokens',
@@ -1027,6 +1048,7 @@ const MESSAGES: Record<LangKey, Record<string, string>> = {
     'display.exitPictureInPicture': '退出畫中畫',
     'display.resizePictureInPicture': '調整畫中畫大小',
     'display.htmlSandboxNote': 'HTML 應用程式在受限沙箱中執行，並可載入同目錄資源',
+    'display.openHtmlInNewPage': '在新頁面開啟 HTML',
 
     'prompt.worldBook': '=== 世界書 ===',
     'prompt.userInfo': '=== USER INFO (用戶扮演的角色) ===',
@@ -1206,6 +1228,8 @@ const MESSAGES: Record<LangKey, Record<string, string>> = {
     'settings.title': 'Settings',
     'settings.sub': 'Model API config, hyperparameters and theme',
     'settings.toolExecution': '🛠️ Tool execution',
+    'settings.pureMode': 'Pure mode',
+    'settings.pureModeDesc': 'Front-end display only: hide reasoning and tool calls in chats; messages without body content are hidden too. Actual reasoning and tool calls still run.',
     'settings.yoloMode': 'YOLO mode',
     'settings.yoloModeDesc': 'Automatically approve tool changes and Shell commands without asking each time. Only enable for trusted characters and skills.',
     'settings.genParams': '🎛 Generation parameters',
@@ -1392,6 +1416,14 @@ const MESSAGES: Record<LangKey, Record<string, string>> = {
     'ach.legend.desc': 'Cumulatively used 100,000,000 tokens',
     'ach.thShareholder.name': 'TH Shareholder',
     'ach.thShareholder.desc': 'Clicked the home icon 5 times within 5 seconds',
+    'ach.gameExporter.name': 'Sharing Is Caring',
+    'ach.gameExporter.desc': 'Exported a game for the first time',
+    'ach.gameImporter.name': 'Discoverer',
+    'ach.gameImporter.desc': 'Imported a game for the first time',
+    'ach.creator.name': 'Creator',
+    'ach.creator.desc': 'Created a character card or Lorebook for the first time',
+    'ach.explorer.name': 'Explorer',
+    'ach.explorer.desc': 'Created a custom skill for the first time',
 
     'achModal.title': '🎉 Achievement unlocked!',
     'achModal.total': 'Lifetime total {n} tokens',
@@ -1528,6 +1560,7 @@ const MESSAGES: Record<LangKey, Record<string, string>> = {
     'display.exitPictureInPicture': 'Exit picture in picture',
     'display.resizePictureInPicture': 'Resize picture in picture',
     'display.htmlSandboxNote': 'HTML application runs in a restricted sandbox with same-directory resources available',
+    'display.openHtmlInNewPage': 'Open HTML in a new page',
 
     'prompt.worldBook': '=== LOREBOOK ===',
     'prompt.userInfo': '=== USER INFO (role played by the user) ===',

package/src/core/tools/toolExecutor.ts

@@ -9,6 +9,7 @@ import type {
 } from '../../types/models';
 import { BUILTIN_TOOL_NAMES } from '../toolDefinitions';
 import { translate } from '../i18n';
+import { unlockAchievement } from '../achievements';
 import { rollDice } from './builtinTools';
 import {
   createSessionWorkspaceDir,
@@ -409,6 +410,7 @@ async function handleCreateSkill(args: Record<string, unknown>): Promise<string>
   if (exists) return `ERROR: Skill ${name} already exists`;
   const tool = await createSkillTool(name, String(args.description ?? ''), (args.parameters as Record<string, unknown>) ?? {}, args.execution);
   await db.tools.add(tool);
+  await unlockAchievement('explorer');
   return translate('tool.skillCreated', { name });
 }
 
@@ -493,6 +495,7 @@ async function handleCreateCharacter(args: Record<string, unknown>): Promise<str
     isBuiltIn: false,
     createdAt: Date.now(),
   });
+  await unlockAchievement('creator');
   return translate('tool.characterCreated', { name });
 }
 
@@ -638,6 +641,7 @@ async function handleCreateLorebook(args: Record<string, unknown>): Promise<stri
   if (!name || !content) return 'ERROR: name and content are required';
   if (await db.worldBooks.where('name').equals(name).first()) return `ERROR: Lorebook ${name} already exists`;
   await db.worldBooks.add({ name, content: content.slice(0, 10_000), imageUri: null, createdAt: Date.now() });
+  await unlockAchievement('creator');
   return translate('tool.lorebookCreated', { name });
 }
 

package/src/db/database.ts

@@ -282,40 +282,52 @@ let hasWriteLock = false;
 let lockHeartbeat: number | null = null;
 
 const PERSISTENCE_REQUEST_TIMEOUT_MS = 8_000;
+const PERSISTENCE_STARTUP_RETRY_DELAY_MS = 250;
 
 async function persistenceRequest<T>(path: string, body: Record<string, unknown> = {}): Promise<T> {
-  const controller = new AbortController();
-  const timeout = globalThis.setTimeout(() => controller.abort(), PERSISTENCE_REQUEST_TIMEOUT_MS);
-  let response: Response;
-  try {
-    response = await fetch(`/api-v3${path}`, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ ...body, clientId }),
-      signal: controller.signal,
-    });
-  } catch (error) {
-    if (error instanceof DOMException && error.name === 'AbortError') {
-      throw new Error(`Persistence request ${path} timed out`);
+  for (let attempt = 0; attempt < 2; attempt++) {
+    const controller = new AbortController();
+    const timeout = globalThis.setTimeout(() => controller.abort(), PERSISTENCE_REQUEST_TIMEOUT_MS);
+    let response: Response;
+    try {
+      response = await fetch(`/api-v3${path}`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ ...body, clientId }),
+        signal: controller.signal,
+      });
+    } catch (error) {
+      if (attempt === 0) {
+        await new Promise((resolve) => globalThis.setTimeout(resolve, PERSISTENCE_STARTUP_RETRY_DELAY_MS));
+        continue;
+      }
+      if (error instanceof DOMException && error.name === 'AbortError') {
+        throw new Error(`Persistence request ${path} timed out`);
+      }
+      throw new Error('Unable to reach the persistence service');
+    } finally {
+      globalThis.clearTimeout(timeout);
     }
-    throw new Error('Unable to reach the persistence service');
-  } finally {
-    globalThis.clearTimeout(timeout);
-  }
-  let payload: T & { ok?: boolean; message?: string };
-  try {
-    payload = await response.json() as T & { ok?: boolean; message?: string };
-  } catch {
-    throw new Error(`Persistence service returned an invalid response (${response.status})`);
-  }
-  if (!response.ok || payload.ok === false) {
-    if (response.status === 423) {
-      hasWriteLock = false;
-      markControlReadOnly();
+    let payload: T & { ok?: boolean; message?: string };
+    try {
+      payload = await response.json() as T & { ok?: boolean; message?: string };
+    } catch {
+      throw new Error(`Persistence service returned an invalid response (${response.status})`);
+    }
+    if (response.status === 503 && payload.message === 'Persistence server not running' && attempt === 0) {
+      await new Promise((resolve) => globalThis.setTimeout(resolve, PERSISTENCE_STARTUP_RETRY_DELAY_MS));
+      continue;
     }
-    throw new Error(`Persistence request ${path} failed: ${payload.message || `HTTP ${response.status}`}`);
+    if (!response.ok || payload.ok === false) {
+      if (response.status === 423) {
+        hasWriteLock = false;
+        markControlReadOnly();
+      }
+      throw new Error(`Persistence request ${path} failed: ${payload.message || `HTTP ${response.status}`}`);
+    }
+    return payload;
   }
-  return payload;
+  throw new Error(`Persistence request ${path} failed after retry`);
 }
 
 async function requireWriteLock(): Promise<void> {
@@ -497,6 +509,14 @@ class RemoteTable<T extends object> {
     const result = await persistenceRequest<{ record: { value: T } | null }>('/records/get', { collection: this.collection, key: Array.isArray(key) ? key.join(':') : String(key) });
     return result.record?.value;
   }
+  async getRawLog(key: number): Promise<Pick<ChatMessage, 'rawRequestBody' | 'rawResponseBody'> | null> {
+    if (this.collection !== 'messages') throw new Error('Raw logs are only available for messages');
+    const result = await persistenceRequest<{ rawLog: Pick<ChatMessage, 'rawRequestBody' | 'rawResponseBody'> | null }>('/records/message-raw-log', {
+      collection: this.collection,
+      key: String(key),
+    });
+    return result.rawLog;
+  }
   async count(): Promise<number> { return (await this.toArray()).length; }
   async add(value: T): Promise<number> {
     await requireWriteLock();
@@ -651,6 +671,7 @@ export const DEFAULT_SETTINGS: AppSettings = {
   isThinkingModeEnabled: true,
   isToolCallsEnabled: true,
   yoloMode: false,
+  pureMode: false,
   statsResetTime: null,
 };
 
@@ -697,6 +718,9 @@ export async function initDatabase(): Promise<void> {
     if (settings && settings.yoloMode === undefined) {
       await db.settings.update(1, { yoloMode: false });
     }
+    if (settings && settings.pureMode === undefined) {
+      await db.settings.update(1, { pureMode: false });
+    }
     if (settings && (settings.language !== null || settings.themeMode !== 'system')) {
       await db.settings.update(1, { language: null, themeMode: 'system' });
     }

package/src/generated/changelog.json

@@ -1,7 +1,99 @@
 {
-  "latest": "0.1.18",
+  "latest": "0.1.20",
   "repo": "https://github.com/Rannichan/Tavern-Harness",
   "entries": [
+    {
+      "version": "0.1.20",
+      "date": "2026-10-26",
+      "breaking": false,
+      "compare": "v0.1.19...v0.1.20",
+      "groups": {
+        "zh-CN": [
+          {
+            "kind": "added",
+            "items": [
+              "新增「纯净模式」：只显示消息正文，隐藏思考过程和工具调用；没有正文的消息也会一并隐藏，实际的思考和工具执行不受影响（在「设置 → 工具执行」中开启）",
+              "HTML 预览可以在新页面打开，方便全屏查看和调试交互式页面"
+            ]
+          },
+          {
+            "kind": "changed",
+            "items": [
+              "长会话加载明显更快：消息列表不再携带每次请求的原始日志，改为打开「查看原始日志」时按需读取；切回已加载过的会话时直接复用内存中的内容，不再重复拉取",
+              "长会话下持久化服务更稳定：响应启用 brotli / gzip 压缩，服务繁忙时刷新页面不再误报会话加载失败",
+              "HTML 预览的缩放按钮移到底部说明栏，不再占用顶部工具栏，预览区域更宽敞"
+            ]
+          },
+          {
+            "kind": "fixed",
+            "items": [
+              "会话标题过长时不再挤压右侧按钮：标题限制最大宽度并在末尾渐隐"
+            ]
+          }
+        ],
+        "en": [
+          {
+            "kind": "added",
+            "items": [
+              "New \"Pure mode\": shows only message bodies, hiding reasoning and tool calls; messages without body text are hidden too, while actual reasoning and tool execution keep running (enable it in Settings → Tool execution)",
+              "HTML previews can be opened in a new page for full-screen viewing and debugging interactive pages"
+            ]
+          },
+          {
+            "kind": "changed",
+            "items": [
+              "Long conversations load noticeably faster: message lists no longer carry per-request raw logs — they're fetched only when you open \"View raw log\" — and switching back to a session you've already loaded reuses the in-memory copy instead of fetching it again",
+              "The persistence service holds up better with long conversations: responses are brotli / gzip compressed, and a busy service no longer triggers false \"failed to load session\" errors after a page refresh",
+              "HTML preview zoom buttons moved to the bottom note bar, freeing the top toolbar and giving the preview more room"
+            ]
+          },
+          {
+            "kind": "fixed",
+            "items": [
+              "Long session titles no longer squeeze the header buttons: the title is capped in width and fades out at the end"
+            ]
+          }
+        ]
+      }
+    },
+    {
+      "version": "0.1.19",
+      "date": "2026-10-25",
+      "breaking": false,
+      "compare": "v0.1.18...v0.1.19",
+      "groups": {
+        "zh-CN": [
+          {
+            "kind": "added",
+            "items": [
+              "新增四项「首次行动」成就：首次导出游戏（独乐乐不如众乐乐）、首次导入游戏（发现者）、首次创建角色卡或世界书（创造者）、首次创建自定义技能（探索者）"
+            ]
+          },
+          {
+            "kind": "changed",
+            "items": [
+              "聊天标题栏更简洁：副标题只保留上下文用量，不再重复显示会话模式",
+              "手机端标题栏按钮区支持横向滑动，按钮较多时不再被挤出屏幕或误触页面"
+            ]
+          }
+        ],
+        "en": [
+          {
+            "kind": "added",
+            "items": [
+              "Four new first-action achievements: export a game (Sharing Is Caring), import a game (Discoverer), create a character card or Lorebook (Creator), and create a custom skill (Explorer)"
+            ]
+          },
+          {
+            "kind": "changed",
+            "items": [
+              "The chat header is cleaner: the subtitle now shows only context usage instead of repeating the session mode",
+              "On mobile, the header action row scrolls horizontally, so buttons are no longer pushed off screen or trigger page gestures"
+            ]
+          }
+        ]
+      }
+    },
     {
       "version": "0.1.18",
       "date": "2026-10-25",

package/src/store/store.ts

@@ -478,8 +478,16 @@ export const useStore = create<AppState>((set, get) => ({
       return { activeSessionId: id, activeView: 'chat', activitySessionIds };
     });
     if (id != null) {
-      get().loadMessages(id);
-      get().refreshLiveQueue(id);
+      const state = get();
+      // 已加载的会话切回时复用内存快照，避免重复传输、解析并覆盖整段历史。
+      // 生成中的会话仍强制刷新，以合并其他写入路径持久化的最新字段。
+      if (state.messages[id] === undefined || state.streaming.sessionId === id) {
+        void state.loadMessages(id).catch((error) => {
+          console.error(`Failed to load session ${id}`, error);
+          state.addToast(translate('toast.genFailed', { msg: error instanceof Error ? error.message : String(error) }), 'error');
+        });
+      }
+      void state.refreshLiveQueue(id).catch((error) => console.error(`Failed to load queue for session ${id}`, error));
     }
   },
 

package/src/theme/global.css

@@ -1045,12 +1045,15 @@ body.resizing .sidebar-resizer {
   min-width: 0;
 }
 .chat-header .ttitle {
+  position: relative;
+  max-width: min(36vw, 420px);
+  overflow: hidden;
   font-family: var(--font-serif);
   font-weight: 700;
   font-size: 17px;
   white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
+  mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
 }
 .chat-header .tsub {
   font-size: 12px;
@@ -1082,6 +1085,7 @@ body.resizing .sidebar-resizer {
 /* ---------- 聊天头部右侧动作按钮 ---------- */
 .chat-actions {
   display: flex;
+  flex: 0 0 auto;
   align-items: center;
   gap: 4px;
 }
@@ -1096,6 +1100,7 @@ body.resizing .sidebar-resizer {
   background: transparent;
   color: var(--text-dim);
   transition: background 0.15s ease, color 0.15s ease;
+  flex-shrink: 0;
   cursor: pointer;
 }
 .chat-actions .icon-tooltip:hover {
@@ -1794,6 +1799,7 @@ hr.sep {
   }
 
   .chat-header .ttitle {
+    max-width: min(28vw, 180px);
     font-size: 15px;
   }
 
@@ -1802,17 +1808,8 @@ hr.sep {
   }
 
   .chat-actions {
-    display: flex;
-    flex: 0 1 auto;
-    justify-content: flex-end;
+    flex: 0 0 auto;
     gap: 0;
-    max-width: none;
-    overflow-x: auto;
-    scrollbar-width: none;
-  }
-
-  .chat-actions::-webkit-scrollbar {
-    display: none;
   }
 
   .chat-actions .icon-tooltip {

package/src/theme/views.css

@@ -1614,11 +1614,38 @@
   opacity: 1;
 }
 .display-html-note {
-  padding: 7px 14px;
+  min-height: 29px;
+  box-sizing: border-box;
+  padding: 2px 14px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
   font-size: 11.5px;
   color: var(--text-faint);
   border-top: 1px solid var(--border-soft);
 }
+.display-html-note > span:first-child {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.display-html-zoom-group {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 2px;
+}
+.display-html-zoom-group .icon-btn {
+  width: 24px;
+  height: 24px;
+  border-radius: 6px;
+}
+.display-html-zoom-group .icon-btn:nth-child(2) {
+  width: 42px;
+  font-size: 11px;
+}
 
 /* 文本 / 代码 / 纯文本 */
 .display-md-scroll,

package/src/types/models.ts

@@ -55,6 +55,8 @@ export interface AppSettings {
   isToolCallsEnabled: boolean;
   /** 自动批准工具执行确认（YOLO）；默认关闭。 */
   yoloMode: boolean;
+  /** 隐藏对话中的思考与工具调用，仅保留消息正文；默认关闭。 */
+  pureMode: boolean;
   statsResetTime: number | null;
 }
 
@@ -218,6 +220,8 @@ export interface ChatMessage {
   displayRef: string | null;
   rawRequestBody: string | null;
   rawResponseBody: string | null;
+  /** 列表加载时仅标记原始日志可用；正文在用户打开日志时按需读取。 */
+  rawLogAvailable?: boolean;
 }
 
 /** 保留原始消息的上下文压缩记录，仅用于构建后续 LLM 请求。 */

package/vite.config.ts

@@ -179,8 +179,10 @@ function persistenceProxyPlugin(): Plugin {
   const ensurePersistence = async (): Promise<number | null> => {
     if (starting) return starting;
     starting = (async () => {
-      if (childPort != null && (await portOpen(childPort)) && (await serviceReady(childPort))) return childPort;
-      if (persistenceChild) return null;
+      // 已经由本 Vite 实例拉起的子进程无需在每个请求前探活：服务忙于压缩或读取长会话时，
+      // 400 ms 健康检查会误判它已离线，导致刷新后会话请求收到伪 503。
+      if (persistenceChild && childPort != null && persistenceChild.exitCode == null) return childPort;
+      if (persistenceChild) stopPersistence();
       for (let port = DEFAULT_PORT; port < DEFAULT_PORT + 20; port++) {
         if (await portOpen(port)) continue;
         childPort = port;
@@ -240,6 +242,11 @@ function persistenceProxyPlugin(): Plugin {
             proxyRes.pipe(res);
           });
           proxyReq.once('error', (error: Error) => {
+            // 连接错误才说明端口失效；下一个请求会清理并重新拉起服务。
+            if (childPort === port) {
+              persistenceChild = null;
+              childPort = null;
+            }
             res.writeHead(502, { 'Content-Type': 'application/json' });
             res.end(JSON.stringify({ ok: false, message: `Persistence proxy error: ${error.message}` }));
           });