tavern-harness 0.1.13 → 0.1.14

package/CHANGELOG.md

@@ -3,6 +3,70 @@
 > 本文件由 `scripts/changelog.mjs` 从 `changelog/v*.md` 生成，请勿手动编辑。
 > 版本对比链接见文末；源文件位于仓库 `changelog/` 目录。
 
+## [0.1.14] - 2026-10-24
+
+### 中文
+
+#### 新增
+
+- 设置 → 生成参数新增「重置」按钮，一键恢复温度、Top P、Top K 等默认值；已是默认值时按钮不可用
+
+#### 改进
+
+- 启动体验：界面先于数据加载显示，启动期间展示加载动画而非空白页；启动数据合并为一次快照请求，长列表通过增量渲染与缓存保持流畅
+- 成就页重新排版：奖杯陈列柜置顶，生涯统计与「重置统计」分区展示
+- 统一弹窗尺寸（紧凑 / 标准 / 宽屏三档）并适配移动端；弹窗不再响应点击遮罩关闭，避免编辑内容时误触丢失
+- 流式生成更稳定：自动跟随最新内容，向上回看历史时不会被拉回底部；键盘弹出时思考与回复内容不再被输入框遮挡
+- 移动端消息编辑器：键盘开合过渡更平滑，消息操作与编辑时的附件按钮更易用
+- 聊天附件、思考面板与工具卡片的样式更清晰，浅色主题配色更柔和统一
+
+#### 修复
+
+- 修复生成失败或模型返回空内容时界面停留在「生成中」的问题：现在会回滚本轮并提示；已收到的部分正文会保留并标注「生成已中断」
+- 修复通过局域网地址（侧栏二维码）在手机上打开时，回合可能一直卡住没有回复的问题；连接超时会自动改用同源代理，全部失败时明确提示网络错误
+- 修复刷新或切换标签页时短暂闪出错误主题的问题，首帧即应用正确的深浅色背景
+- 修复首页角色卡片不显示自定义头像的问题
+- 修复移动端消息操作按钮、编辑附件动作与聊天附件样式的问题
+- 修复启动时模型服务列表可能为空、旧会话消息加载较慢的问题
+
+#### 内部
+
+- 持久化服务新增启动快照与按字段查询接口，减少启动请求数量，并补充相应测试
+- 新增头像缩略图与行指纹缓存，降低长列表重复渲染开销
+- 统一弹窗组件与尺寸定义，移除重复的遮罩点击逻辑
+- 补全 yolo 集成测试所需的持久化接口 mock
+
+### English
+
+#### Added
+
+- New "Reset" button in Settings → Generation parameters restores the default temperature, Top P, Top K, and related values; it is disabled when everything is already at defaults
+
+#### Changed
+
+- Startup: the UI mounts before data loads and shows a loading indicator instead of a blank page; startup data is fetched in a single snapshot request, and long lists stay smooth through incremental rendering and caching
+- Achievements page reorganized: the trophy shelf comes first, with career stats and a separate "Reset stats" section below
+- Modals now share three sizes (compact, standard, wide) and adapt to mobile; clicking the backdrop no longer dismisses them, preventing accidental loss of edits
+- Streaming is more stable: the view follows new content automatically but stops following when you scroll up to read history, and the keyboard no longer covers thinking or reply content
+- Mobile message editor: smoother keyboard transitions and easier access to attachment actions while editing
+- Clearer styling for chat attachments, thinking panels, and tool cards, with softer, more consistent light-theme colors
+
+#### Fixed
+
+- Fixed the UI getting stuck in "generating" when generation failed or the model returned no content: the turn now rolls back with a clear message, while partial text is kept and marked as interrupted
+- Fixed turns occasionally hanging without a reply when the app is opened on a phone through its LAN address (sidebar QR code); connection timeouts now fall back to the same-origin proxy and report a network error when every candidate fails
+- Fixed a brief flash of the wrong theme when refreshing or switching tabs; the correct light/dark background is applied on the first frame
+- Fixed character cards on the home page not showing custom avatars
+- Fixed mobile message action buttons, attachment actions while editing, and chat attachment styling
+- Fixed the model provider list sometimes being empty at startup and slow loading of older session messages
+
+#### Internal
+
+- Added startup snapshot and list-by-field persistence endpoints to reduce startup requests, with tests
+- Added avatar thumbnail and row fingerprint caches to cut repeated rendering work in long lists
+- Unified the modal component and sizing, removing duplicate backdrop-click logic
+- Filled in the persistence endpoint mocks required by the yolo integration test
+
 ## [0.1.13] - 2026-10-21
 
 ### 中文
@@ -330,6 +394,7 @@
 - Vite + React + Zustand + Dexie stack with browser-side local persistence
 
 <!-- 链接定义 -->
+[0.1.14]: https://github.com/Rannichan/Tavern-Harness/compare/v0.1.13...v0.1.14
 [0.1.13]: https://github.com/Rannichan/Tavern-Harness/compare/v0.1.12...v0.1.13
 [0.1.12]: https://github.com/Rannichan/Tavern-Harness/compare/v0.1.11...v0.1.12
 [0.1.11]: https://github.com/Rannichan/Tavern-Harness/compare/v0.1.10...v0.1.11

package/index.html

@@ -14,7 +14,7 @@
           const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
           const dark = mode === 'dark' || (mode !== 'light' && systemDark);
           const root = document.documentElement;
-          const background = dark ? '#20160E' : '#F7F2E9';
+          const background = dark ? '#20160E' : '#F7F0E4';
           root.dataset.theme = dark ? 'dark' : 'light';
           root.style.colorScheme = dark ? 'dark' : 'light';
           root.style.backgroundColor = background;

package/package.json

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

package/persistence-server.mjs

@@ -152,6 +152,18 @@ 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 listRecordsByJsonField = database.prepare(`
+  SELECT record_key, value_json, updated_at
+  FROM app_records
+  WHERE collection = ? AND json_extract(value_json, ?) = ?
+  ORDER BY record_key
+`);
+const listStartupRecords = database.prepare(`
+  SELECT collection, record_key, value_json, updated_at
+  FROM app_records
+  WHERE collection IN ('settings', 'providers', 'npcs', 'sessions', 'worldBooks', 'tools', 'achievementUnlocks')
+  ORDER BY collection, record_key
+`);
 const deleteRecord = database.prepare('DELETE FROM app_records WHERE collection = ? AND record_key = ?');
 const clearCollection = database.prepare('DELETE FROM app_records WHERE collection = ?');
 const nextNumericRecordKey = database.prepare(`
@@ -220,6 +232,31 @@ const server = createServer(async (req, res) => {
       json(res, 200, { ok: true, leaseId: writeLock.leaseId, lock: lockState(clientId) });
       return;
     }
+    if (pathname === '/startup/snapshot') {
+      if (!clientId || clientId.length > 255) {
+        json(res, 400, { ok: false, message: 'A valid clientId is required' });
+        return;
+      }
+      if (!writeLock) setWriteLock({ clientId, leaseId: randomBytes(24).toString('base64url') });
+      const collections = {
+        settings: [],
+        providers: [],
+        npcs: [],
+        sessions: [],
+        worldBooks: [],
+        tools: [],
+        achievementUnlocks: [],
+      };
+      for (const row of listStartupRecords.all()) {
+        collections[row.collection].push({
+          key: row.record_key,
+          value: JSON.parse(row.value_json),
+          updatedAt: row.updated_at,
+        });
+      }
+      json(res, 200, { ok: true, lock: lockState(clientId), collections });
+      return;
+    }
     if (!pathname.startsWith('/records/')) {
       json(res, 404, { ok: false, message: `Unknown persistence endpoint: ${pathname}` });
       return;
@@ -231,8 +268,23 @@ const server = createServer(async (req, res) => {
       return;
     }
 
-    if (pathname === '/records/list') {
-      const records = listRecords.all(collection).map((row) => ({
+    if (pathname === '/records/list' || pathname === '/records/list-by-field') {
+      let rows;
+      if (pathname === '/records/list-by-field') {
+        const { field, value } = body;
+        if (typeof field !== 'string' || !/^[A-Za-z][A-Za-z0-9_]{0,63}$/.test(field)) {
+          json(res, 400, { ok: false, message: 'Invalid record field' });
+          return;
+        }
+        if (typeof value !== 'string' && typeof value !== 'number' && typeof value !== 'boolean') {
+          json(res, 400, { ok: false, message: 'Invalid record field value' });
+          return;
+        }
+        rows = listRecordsByJsonField.all(collection, `$.${field}`, value);
+      } else {
+        rows = listRecords.all(collection);
+      }
+      const records = rows.map((row) => ({
         key: row.record_key,
         value: JSON.parse(row.value_json),
         updatedAt: row.updated_at,

package/src/App.tsx

@@ -1,5 +1,5 @@
-import { useEffect, useState } from 'react';
-import { useStore } from './store/store';
+import { useEffect, useLayoutEffect, useRef, useState, type ReactNode } from 'react';
+import { useStore, type ActiveView } from './store/store';
 import { Sidebar } from './components/Sidebar';
 import { ChatView, ChatInput, MessageMenu, TurnQueuePanel } from './components/ChatView';
 import { CharactersView } from './components/CharactersView';
@@ -30,6 +30,10 @@ export default function App() {
   const syncControlState = useStore((s) => s.syncControlState);
   const takeOverControl = useStore((s) => s.takeOverControl);
   const activeView = useStore((s) => s.activeView);
+  const [mountedViews, setMountedViews] = useState<ActiveView[]>([activeView]);
+  if (!mountedViews.includes(activeView)) {
+    setMountedViews([...mountedViews, activeView]);
+  }
   const activeSessionId = useStore((s) => s.activeSessionId);
   const sessions = useStore((s) => s.sessions);
   const messages = useStore((s) => s.messages);
@@ -84,7 +88,11 @@ export default function App() {
   };
 
   if (initStatus === 'loading') {
-    return <div className="tav-bg" />;
+    return (
+      <div className="startup-loading" role="status" aria-label={t('init.loading')} aria-busy="true">
+        <span className="spinner" aria-hidden="true" />
+      </div>
+    );
   }
 
   if (initStatus === 'error') {
@@ -132,28 +140,44 @@ export default function App() {
       <div className="app-shell">
         <Sidebar />
         <main className="main-area">
-          {activeView === 'chat' && activeSession && (
-            <>
-              <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}
-                  />
-                  <ChatInput sessionId={activeSession.id!} />
+          <ViewSlot active={activeView === 'chat'}>
+            {activeSession ? (
+              <>
+                <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'}
+                    />
+                    <ChatInput sessionId={activeSession.id!} />
+                  </div>
+                  <TurnQueuePanel session={activeSession} participants={sessionParticipants} />
                 </div>
-                <TurnQueuePanel session={activeSession} participants={sessionParticipants} />
-              </div>
-            </>
+              </>
+            ) : (
+              <Dashboard />
+            )}
+          </ViewSlot>
+          {mountedViews.includes('characters') && (
+            <ViewSlot active={activeView === 'characters'}>
+              <CharactersView active={activeView === 'characters'} />
+            </ViewSlot>
+          )}
+          {mountedViews.includes('settings') && (
+            <ViewSlot active={activeView === 'settings'}>
+              <SettingsView />
+            </ViewSlot>
+          )}
+          {mountedViews.includes('stats') && (
+            <ViewSlot active={activeView === 'stats'}>
+              <StatsView active={activeView === 'stats'} />
+            </ViewSlot>
           )}
-          {activeView === 'chat' && !activeSession && <Dashboard />}
-          {activeView === 'characters' && <CharactersView />}
-          {activeView === 'settings' && <SettingsView />}
-          {activeView === 'stats' && <StatsView />}
         </main>
       </div>
           <ConfirmationDialog />
@@ -167,6 +191,48 @@ export default function App() {
   );
 }
 
+/** 保持已访问的视图挂载，并隔离隐藏视图的焦点与辅助功能。 */
+function ViewSlot({ active, children }: { active: boolean; children: ReactNode }) {
+  const ref = useRef<HTMLDivElement>(null);
+  const lastTheme = useRef<string | undefined>();
+  const revealFrame = useRef<number | null>(null);
+
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    if (active) {
+      const theme = document.documentElement.dataset.theme;
+      const themeChanged = lastTheme.current !== undefined && lastTheme.current !== theme;
+      if (themeChanged) {
+        // 隐藏视图在 content-visibility 下会延后解析变量；显示的首帧禁用过渡，
+        // 避免旧主题颜色被补绘并动画到新主题。
+        el.dataset.themeReveal = 'true';
+        revealFrame.current = window.requestAnimationFrame(() => {
+          revealFrame.current = window.requestAnimationFrame(() => {
+            delete el.dataset.themeReveal;
+            revealFrame.current = null;
+          });
+        });
+      }
+      lastTheme.current = theme;
+      el.removeAttribute('inert');
+      el.removeAttribute('aria-hidden');
+      return () => {
+        if (revealFrame.current != null) window.cancelAnimationFrame(revealFrame.current);
+      };
+    }
+    const focused = document.activeElement;
+    if (focused instanceof HTMLElement && el.contains(focused)) focused.blur();
+    el.setAttribute('inert', '');
+    el.setAttribute('aria-hidden', 'true');
+  }, [active]);
+  return (
+    <div ref={ref} className="view-slot" data-active={active ? 'true' : 'false'}>
+      {children}
+    </div>
+  );
+}
+
 /** 全局注册的游戏导出/导入弹窗（供 Sidebar 与 SessionHeader 之外的入口使用） */
 function GameplayEntryDialogs() {
   const [exportTarget, setExportTarget] = useState<{ sessionId: number; includeHistory: boolean } | null>(null);
@@ -278,7 +344,7 @@ function SessionHeader({
       )}
 
       {confirmReset && (
-        <Modal onClose={() => setConfirmReset(false)} width="min(400px, calc(100vw - 32px))">
+        <Modal onClose={() => setConfirmReset(false)} size="compact">
           <div className="modal-head">
             <span style={{ fontWeight: 800, fontSize: 15 }}>{t('header.resetSessionTitle')}</span>
             <button className="icon-btn" onClick={() => setConfirmReset(false)}><Icon name="x" /></button>
@@ -303,7 +369,7 @@ function SessionHeader({
       )}
 
       {confirmDelete && (
-        <Modal onClose={() => setConfirmDelete(false)} width="min(400px, calc(100vw - 32px))">
+        <Modal onClose={() => setConfirmDelete(false)} size="compact">
           <div className="modal-head">
             <span style={{ fontWeight: 800, fontSize: 15 }}>{t('header.deleteTitle')}</span>
             <button className="icon-btn" onClick={() => setConfirmDelete(false)}><Icon name="x" /></button>

package/src/components/AchievementModal.tsx

@@ -111,7 +111,7 @@ function CelebrationOverlay({ item }: { item: QueueItem }) {
 
   return createPortal(
     <>
-      <div className="ach-overlay" onClick={() => dismiss(true)} />
+      <div className="ach-overlay" />
       <div className="ach-celebration">
         <div className={`ach-rain ${leaving ? 'leave' : ''}`}>
           {confetti.map((c) => (
@@ -132,7 +132,9 @@ function CelebrationOverlay({ item }: { item: QueueItem }) {
           ))}
         </div>
         <div className={`ach-trophy ${leaving ? 'leave' : ''}`}>
-          <div className="ach-trophy-badge">{item.ach.icon}</div>
+          <div className="ach-trophy-badge">
+            {item.ach.iconUrl ? <img className="ach-trophy-image" src={item.ach.iconUrl} alt="" /> : item.ach.icon}
+          </div>
           <div className="ach-trophy-glow" />
         </div>
         <div className={`ach-caption ${leaving ? 'leave' : ''}`}>

package/src/components/CharactersView.tsx

@@ -1,4 +1,4 @@
-import { lazy, Suspense, useEffect, useMemo, useRef, useState } from 'react';
+import { lazy, memo, Suspense, useEffect, useMemo, useRef, useState } from 'react';
 import {
   DndContext,
   closestCenter,
@@ -25,11 +25,15 @@ import { DeleteConfirmDialog } from './DeleteConfirmDialog';
 import { parseSillyTavernCardFile } from '../core/sillyTavernImporter';
 import { parseSillyTavernWorldInfoFile } from '../core/sillyTavernWorldInfo';
 import { characterBookEntryStats } from '../core/characterBook';
+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';
 
 const CharacterBookEditor = lazy(() => import('./CharacterBookEditor'));
 
+type WorkshopTab = 'characters' | 'worldbooks' | 'skills';
+
 // 内置角色「酒馆老板」默认启用所有技能
 const ALL_DEFAULT_SKILLS = [...ALL_BUILTIN_TOOL_NAMES];
 
@@ -39,12 +43,22 @@ const ALL_DEFAULT_SKILLS = [...ALL_BUILTIN_TOOL_NAMES];
 //       由用户手动点保存
 // ============================================================
 
-export function CharactersView() {
+export const CharactersView = memo(function CharactersView({ active = true }: { active?: boolean }) {
   const npcs = useStore((s) => s.npcs);
   const worldBooks = useStore((s) => s.worldBooks);
   const addToast = useStore((s) => s.addToast);
   const t = useT();
-  const [tab, setTab] = useState<'characters' | 'worldbooks' | 'skills'>('characters');
+  const [tab, setTab] = useState<WorkshopTab>('characters');
+  // 懒挂载 + 常驻（与 App.tsx 的 ViewSlot 同一思路）：tab 一旦打开过就不再卸载。
+  // 角色卡 / 世界书卡片带着大段文本和头像背景图，反复重建会把排版和解码
+  // 成本重复付一遍，表现就是每次切换都卡一下。
+  const [mountedTabs, setMountedTabs] = useState<ReadonlySet<WorkshopTab>>(
+    () => new Set<WorkshopTab>(['characters']),
+  );
+  const selectTab = (next: WorkshopTab) => {
+    setTab(next);
+    setMountedTabs((prev) => (prev.has(next) ? prev : new Set(prev).add(next)));
+  };
   const [editing, setEditing] = useState<NpcCharacter | null>(null);
   const [isNew, setIsNew] = useState(false);
   const fileRef = useRef<HTMLInputElement>(null);
@@ -55,19 +69,19 @@ export function CharactersView() {
   const refreshWb = useStore((s) => s.refreshWorldBooks);
   const refreshTools = useStore((s) => s.refreshTools);
 
-  // 每次进入角色工坊都刷新一次，确保聊天中通过技能创建/修改的数据即时可见
+  // 视图常驻时按激活状态刷新。
   useEffect(() => {
-    refresh();
-    refreshWb();
-    refreshTools();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+    if (!active) return;
+    void refresh();
+    void refreshWb();
+    void refreshTools();
+  }, [active, refresh, refreshWb, refreshTools]);
 
   const handleImport = async (file: File) => {
     try {
       const draft = await parseSillyTavernCardFile(file);
-      // 预填新建角色表单，由用户确认后保存
-      setEditing({ ...draft.character, id: undefined });
+      const avatarDataUrl = await shrinkAvatarDataUrl(draft.character.avatarDataUrl, AVATAR_STORAGE_SIZE);
+      setEditing({ ...draft.character, avatarDataUrl, id: undefined });
       setIsNew(true);
       addToast(t('toast.importedChar', { name: draft.character.name, version: draft.version }));
     } catch (e) {
@@ -83,18 +97,18 @@ export function CharactersView() {
           <p className="view-sub">{t('workshop.sub')}</p>
         </div>
         <div className="side-nav" data-hscroll>
-          <button className={`nav-chip ${tab === 'characters' ? 'active' : ''}`} onClick={() => setTab('characters')}>
+          <button className={`nav-chip ${tab === 'characters' ? 'active' : ''}`} onClick={() => selectTab('characters')}>
             {t('workshop.tabCharacters')}
           </button>
-          <button className={`nav-chip ${tab === 'worldbooks' ? 'active' : ''}`} onClick={() => setTab('worldbooks')}>
+          <button className={`nav-chip ${tab === 'worldbooks' ? 'active' : ''}`} onClick={() => selectTab('worldbooks')}>
             {t('workshop.tabWorldbooks')}
           </button>
-          <button className={`nav-chip ${tab === 'skills' ? 'active' : ''}`} onClick={() => setTab('skills')}>
+          <button className={`nav-chip ${tab === 'skills' ? 'active' : ''}`} onClick={() => selectTab('skills')}>
             {t('workshop.tabSkills')}
           </button>
         </div>
 
-        {tab === 'characters' && (
+        <div className="workshop-tab-panel" data-active={tab === 'characters' ? 'true' : 'false'}>
           <CharacterGrid
             npcs={npcs}
             onEdit={(n, isNew) => {
@@ -103,9 +117,13 @@ export function CharactersView() {
             }}
             onImportPng={openFilePicker}
           />
-        )}
-        {tab === 'worldbooks' && <WorldBookList books={worldBooks} onChanged={refreshWb} />}
-        {tab === 'skills' && <SkillList />}
+        </div>
+        <div className="workshop-tab-panel" data-active={tab === 'worldbooks' ? 'true' : 'false'}>
+          {mountedTabs.has('worldbooks') && <WorldBookList books={worldBooks} onChanged={refreshWb} />}
+        </div>
+        <div className="workshop-tab-panel" data-active={tab === 'skills' ? 'true' : 'false'}>
+          {mountedTabs.has('skills') && <SkillList />}
+        </div>
       </div>
       <input
         ref={fileRef}
@@ -134,7 +152,7 @@ export function CharactersView() {
       )}
     </div>
   );
-}
+});
 
 // ---------------- 角色网格 ----------------
 
@@ -188,7 +206,7 @@ function CharacterGrid({ npcs, onEdit, onImportPng }: { npcs: NpcCharacter[]; on
               <ScrollingCardName name={n.name} />
               {n.isBuiltIn && <span className="tag">{t('common.builtin')}</span>}
             </div>
-            <div className="cgreet">{n.greeting || t('workshop.noGreeting')}</div>
+            <div className="cgreet">{textPreview(n.greeting) || t('workshop.noGreeting')}</div>
             {/* 技能区固定渲染（哪怕无技能），保证所有卡片高度一致 */}
             <div className="cskil">
               {n.enabledToolNames.map((s) => (
@@ -328,7 +346,10 @@ function CharacterEditorModal({ npc, isNew, onClose, onSaved }: { npc: NpcCharac
                     const f = e.target.files?.[0];
                     if (f) {
                       const reader = new FileReader();
-                      reader.onload = () => setAvatarDataUrl(reader.result as string);
+                      reader.onload = () => {
+                        const raw = reader.result as string;
+                        void shrinkAvatarDataUrl(raw, AVATAR_STORAGE_SIZE).then((url) => setAvatarDataUrl(url));
+                      };
                       reader.readAsDataURL(f);
                     }
                   }} />
@@ -451,6 +472,13 @@ function WorldBookList({ books, onChanged }: {
   const [editorTab, setEditorTab] = useState<'worldbook' | 'knowledge'>('worldbook');
   const [pendingDelete, setPendingDelete] = useState<WorldBook | null>(null);
   const jsonFileRef = useRef<HTMLInputElement>(null);
+  const statsByBook = useMemo(() => {
+    const map = new Map<number, { total: number; enabled: number }>();
+    for (const book of books) {
+      if (book.id != null) map.set(book.id, characterBookEntryStats(book.characterBook));
+    }
+    return map;
+  }, [books]);
 
   const closeEditor = () => {
     setEditing(null);
@@ -556,7 +584,7 @@ function WorldBookList({ books, onChanged }: {
       <MasonryGrid>
         {books.map((b) => {
           const isBuiltin = isBuiltinTavernHandbook(b);
-          const knowledge = characterBookEntryStats(b.characterBook);
+          const knowledge = (b.id != null ? statsByBook.get(b.id) : undefined) ?? { total: 0, enabled: 0 };
           const meta = [
             b.content ? t('workshop.wbChars', { n: b.content.length }) : '',
             knowledge.total > 0 ? t('workshop.wbKnowledgeMeta', { enabled: knowledge.enabled, total: knowledge.total }) : '',
@@ -568,7 +596,7 @@ function WorldBookList({ books, onChanged }: {
                 <ScrollingCardName name={b.name} />
                 {isBuiltin && <span className="tag">{t('common.builtin')}</span>}
               </div>
-              <div className="wcontent">{b.content || t('workshop.wbNoContent')}</div>
+              <div className="wcontent">{textPreview(b.content) || t('workshop.wbNoContent')}</div>
               <div className="cmeta">{meta}</div>
               <div className="cactions">
                 <button className="btn btn-sm" onClick={() => openEditor(b)}><Icon name="settings" size={12} /> {t('workshop.browseEdit')}</button>
@@ -652,7 +680,7 @@ function WorldBookForm({
   const [characterBook, setCharacterBook] = useState(initial.characterBook ?? '');
   const [renderMarkdown, setRenderMarkdown] = useState(false);
   const isBuiltin = isBuiltinTavernHandbook(initial);
-  const knowledge = characterBookEntryStats(characterBook);
+  const knowledge = useMemo(() => characterBookEntryStats(characterBook), [characterBook]);
   const isEditing = 'id' in initial && initial.id != null;
 
   const resetToDefault = () => {
@@ -1030,7 +1058,7 @@ function SkillDetailModal({ tool, onClose }: { tool: McpTool; onClose: () => voi
   };
 
   return (
-    <Modal onClose={onClose} width={620}>
+    <Modal onClose={onClose}>
       <div className="modal-head">
         <span style={{ fontWeight: 800, fontSize: 15 }}>
           {t('workshop.skillDetails')}