tavern-harness 0.1.10 → 0.1.12

package/README.md

@@ -10,6 +10,10 @@
   <a href="https://www.npmjs.com/package/tavern-harness"><img alt="npm" src="https://img.shields.io/npm/v/tavern-harness?style=flat-square" /></a>
 </p>
 
+<p align="center">
+  <strong>English</strong> | <a href="README.zh.md">简体中文</a>
+</p>
+
 # Tavern Harness · An AI-Native Role-Playing Sandbox
 
 <a id="demo"></a>
@@ -74,9 +78,11 @@ After starting the app, open **Settings → Model Service Provider**:
 2. **Test the connection**: the app fetches the model list automatically. If the target service does not expose CORS headers, requests are forwarded through the built-in same-origin proxy for private-network or LAN addresses. On success, the Base URL is rewritten to its proxy form and saved.
 3. **Select a model**: click the model name at the top of the chat page, then return to the conversation and start chatting.
 
-### Automatic Tool Approval (YOLO Mode)
+### Import a Gameplay and Start Playing
 
-Enable **Settings → Tool execution → YOLO mode** to automatically approve tool changes and Shell commands during conversations. It is off by default, is saved locally, and can be disabled at any time. Only enable it for characters and skills you trust. Agent execution limits still require manual continuation.
+Download the gameplay file below. Click **Import** in the upper-left corner, then import the file you downloaded to create a complete game environment—including characters, lorebooks, skills, and more—and start playing right away:
+
+[th-demo-affinity-gameplay-en.json](./docs/assets/gameplay/th-demo-affinity-gameplay-en.json)
 
 ### Data Privacy
 
@@ -110,11 +116,13 @@ Compatible with the **Tavern ecosystem**, including one-click PNG character-card
 
 You can also export and share an entire game: recipients can import it and play immediately without manually creating characters, skills, or conversation settings.
 
-### 🍃 Fully Local and Clean
+### 🍃 Fully Local / High Cache Hit Rates / Clean
 
 The app supports **OpenAI-format APIs**. Use a hosted API plan or run a model locally; your data remains on your device.
 
-The project has no external harness dependency, and its UI is designed for a clean, focused experience.
+Tavern Harness is optimized to improve cache hit rates, significantly reducing token costs.
+
+Tavern Harness has no external harness dependency, and its UI is designed for a clean, focused experience.
 
 <a id="feedback"></a>
 ## 4 · Community and Feedback

package/README.zh.md

@@ -10,6 +10,10 @@
   <a href="https://www.npmjs.com/package/tavern-harness"><img alt="npm" src="https://img.shields.io/npm/v/tavern-harness?style=flat-square" /></a>
 </p>
 
+<p align="center">
+  <a href="README.md">English</a> | <strong>简体中文</strong>
+</p>
+
 # Tavern Harness · AI 原生的角色扮演沙盒
 
 <a id="demo"></a>
@@ -75,9 +79,11 @@ npm run dev      # 开发服务器默认端口 5173，被占用时自动顺延
 2. **测试连接**：自动拉取模型列表。若目标服务未开 CORS 头，会自动经内置同源代理转发（仅限内网 / 局域网地址），成功后 Base URL 自动改写为代理形式保存
 3. **选模型**：聊天页顶部点击模型名即可，回到对话开聊！
 
-### 自动审批工具（YOLO 模式）
+### 导入游戏并开始
 
-在「**设置 → 工具执行 → YOLO 模式**」开启后，对话中的工具修改和 Shell 执行会自动批准，无需逐次确认。默认关闭，设置保存在本地，可随时关闭。仅在信任角色和技能时开启；Agent 执行限额仍需手动确认继续。
+下载以下游戏文件，点击左上角的「导入」按钮，然后导入刚刚下载的文件，即可创建一整套游戏环境（包括角色、世界书、技能等），直接体验：
+
+[小咕嘎-gameplay.json](./docs/assets/gameplay/小咕嘎-gameplay.json)
 
 ### 数据隐私须知
 
@@ -111,11 +117,13 @@ npm run dev      # 开发服务器默认端口 5173，被占用时自动顺延
 
 同时支持**游戏一键打包分享**：对方直接导入即可游玩，无需手动创建角色、技能、配置对话。
 
-### 🍃 完全本地 / 简洁干净
+### 🍃 完全本地 / 高缓存命中率 / 简洁干净
 
 目前支持 **OpenAI 格式的 API 接口**：你可以使用你的 token plan，也可以自己本地部署模型，一切数据都保存在本地。
 
-项目不依赖任何外部 harness，UI 也经过了精细打磨，提供简洁干净的体验。
+Tavern Harness 针对提高缓存命中率进行了优化，显著降低了 Token 成本。
+
+并且 Tavern Harness 不依赖任何外部 harness，UI 也经过了精细打磨，提供简洁干净的体验。
 
 <a id="feedback"></a>
 ## 4 · 交流反馈

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tavern-harness",
-  "version": "0.1.10",
+  "version": "0.1.12",
   "description": "Tavern Harness — 酒馆模式下的本地 AI Agent 助手（MyAgent-Android 的 Web 复刻）",
   "private": false,
   "type": "module",
@@ -23,6 +23,8 @@
   "scripts": {
     "start": "vite",
     "dev": "vite",
+    "test": "node --test *.test.mjs",
+    "test:character-book": "node --test character-book.test.mjs",
     "test:command-service": "node sandbox-server.test.mjs",
     "test:yolo-mode": "node yolo-mode.test.mjs",
     "test:tool-arguments": "node tool-arguments.test.mjs",
@@ -30,6 +32,9 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@codemirror/lang-json": "^6.0.2",
+    "@codemirror/state": "^6.7.6",
+    "@codemirror/view": "^6.43.14",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",

package/src/components/CharacterBookEditor.tsx

@@ -0,0 +1,77 @@
+import { memo, useEffect, useRef } from 'react';
+import { Compartment, EditorState } from '@codemirror/state';
+import { EditorView, lineNumbers } from '@codemirror/view';
+import { json } from '@codemirror/lang-json';
+
+const CharacterBookEditor = memo(function CharacterBookEditor({
+  value,
+  onChange,
+  placeholder,
+  readOnly = false,
+  lineWrapping = true,
+  className,
+}: {
+  value: string;
+  onChange?: (value: string) => void;
+  placeholder: string;
+  readOnly?: boolean;
+  lineWrapping?: boolean;
+  className?: string;
+}) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const viewRef = useRef<EditorView | null>(null);
+  const onChangeRef = useRef(onChange);
+  const wrappingRef = useRef(new Compartment());
+  const readOnlyRef = useRef(new Compartment());
+
+  useEffect(() => {
+    onChangeRef.current = onChange;
+  }, [onChange]);
+
+  useEffect(() => {
+    if (!containerRef.current) return;
+
+    const view = new EditorView({
+      state: EditorState.create({
+        doc: value,
+        extensions: [
+          lineNumbers(),
+          json(),
+          wrappingRef.current.of(lineWrapping ? EditorView.lineWrapping : []),
+          readOnlyRef.current.of(readOnly ? [EditorState.readOnly.of(true), EditorView.editable.of(false)] : []),
+          EditorView.updateListener.of((update) => {
+            if (update.docChanged) onChangeRef.current?.(update.state.doc.toString());
+          }),
+        ],
+      }),
+      parent: containerRef.current,
+    });
+    viewRef.current = view;
+
+    return () => view.destroy();
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    const view = viewRef.current;
+    if (view) view.dispatch({ effects: wrappingRef.current.reconfigure(lineWrapping ? EditorView.lineWrapping : []) });
+  }, [lineWrapping]);
+
+  useEffect(() => {
+    const view = viewRef.current;
+    if (view) view.dispatch({
+      effects: readOnlyRef.current.reconfigure(readOnly ? [EditorState.readOnly.of(true), EditorView.editable.of(false)] : []),
+    });
+  }, [readOnly]);
+
+  useEffect(() => {
+    const view = viewRef.current;
+    if (view && value !== view.state.doc.toString()) {
+      view.dispatch({ changes: { from: 0, to: view.state.doc.length, insert: value } });
+    }
+  }, [value]);
+
+  return <div ref={containerRef} className={`character-book-editor ${className ?? ''}`.trim()} aria-label={placeholder} />;
+});
+
+export default CharacterBookEditor;

package/src/components/CharactersView.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { lazy, Suspense, useEffect, useMemo, useRef, useState } from 'react';
 import {
   DndContext,
   PointerSensor,
@@ -26,16 +26,18 @@ import {
 import type { NpcCharacter, WorldBook, McpTool } from '../types/models';
 import { Avatar, Icon, MasonryGrid, Markdown, Modal } from './shared';
 import { DeleteConfirmDialog } from './DeleteConfirmDialog';
-import { parseSillyTavernCardFile, type ParsedSillyTavernCard } from '../core/sillyTavernImporter';
+import { parseSillyTavernCardFile } from '../core/sillyTavernImporter';
 import { ALL_BUILTIN_TOOL_NAMES } from '../core/toolDefinitions';
 import { useT } from '../core/i18n';
 
+const CharacterBookEditor = lazy(() => import('./CharacterBookEditor'));
+
 // 内置角色「酒馆老板」默认启用所有技能
 const ALL_DEFAULT_SKILLS = [...ALL_BUILTIN_TOOL_NAMES];
 
 // ============================================================
 // 角色工坊（NPC 管理 / Lorebook / 技能表 / PNG 导入）
-// 说明：PNG 导入只解析不落库，打开「新建角色 / 新建Lorebook」表单预填，
+// 说明：PNG 导入只解析不落库，打开「新建角色」表单预填，
 //       由用户手动点保存
 // ============================================================
 
@@ -47,8 +49,6 @@ export function CharactersView() {
   const [tab, setTab] = useState<'characters' | 'worldbooks' | 'skills'>('characters');
   const [editing, setEditing] = useState<NpcCharacter | null>(null);
   const [isNew, setIsNew] = useState(false);
-  // PNG 解析出的草稿：角色 + 内嵌Lorebook
-  const [importDraft, setImportDraft] = useState<ParsedSillyTavernCard | null>(null);
   const fileRef = useRef<HTMLInputElement>(null);
 
   const openFilePicker = () => fileRef.current?.click();
@@ -68,18 +68,10 @@ export function CharactersView() {
   const handleImport = async (file: File) => {
     try {
       const draft = await parseSillyTavernCardFile(file);
-      setImportDraft(draft);
-      if (tab === 'characters' || tab === 'skills') {
-        // 角色卡 tab：预填新建角色表单，由用户确认后保存
-        setEditing({ ...draft.character, id: undefined });
-        setIsNew(true);
-        addToast(t('toast.importedChar', { name: draft.character.name, version: draft.version }));
-      } else {
-        // Lorebook tab：草稿交给 WorldBookList，由 useEffect 打开预填表单（含提示）
-        if (!draft.worldBook) {
-          addToast(t('toast.noEmbeddedWb', { name: draft.character.name }), 'error');
-        }
-      }
+      // 预填新建角色表单，由用户确认后保存
+      setEditing({ ...draft.character, id: undefined });
+      setIsNew(true);
+      addToast(t('toast.importedChar', { name: draft.character.name, version: draft.version }));
     } catch (e) {
       addToast(t('toast.importFailed', { msg: (e as Error).message }), 'error');
     }
@@ -110,20 +102,11 @@ export function CharactersView() {
             onEdit={(n, isNew) => {
               setEditing(n);
               setIsNew(isNew);
-              setImportDraft(null);
             }}
             onImportPng={openFilePicker}
           />
         )}
-        {tab === 'worldbooks' && (
-          <WorldBookList
-            books={worldBooks}
-            onChanged={refreshWb}
-            onImportPng={openFilePicker}
-            importDraft={tab === 'worldbooks' ? importDraft : null}
-            onImportDraftConsumed={() => setImportDraft(null)}
-          />
-        )}
+        {tab === 'worldbooks' && <WorldBookList books={worldBooks} onChanged={refreshWb} />}
         {tab === 'skills' && <SkillList />}
       </div>
       <input
@@ -144,10 +127,8 @@ export function CharactersView() {
           isNew={isNew}
           onClose={() => {
             setEditing(null);
-            setImportDraft(null);
           }}
           onSaved={() => {
-            setImportDraft(null);
             refresh();
             setEditing(null);
           }}
@@ -217,7 +198,7 @@ function CharacterGrid({ npcs, onEdit, onImportPng }: { npcs: NpcCharacter[]; on
               ))}
             </div>
             <div className="cactions">
-              <button className="btn btn-sm" onClick={() => onEdit(n, false)}><Icon name="settings" size={12} /> {t('common.edit')}</button>
+              <button className="btn btn-sm" onClick={() => onEdit(n, false)}><Icon name="settings" size={12} /> {t('workshop.browseEdit')}</button>
               <button className="btn btn-sm btn-danger" onClick={() => setPendingDelete(n)} disabled={n.isBuiltIn} title={n.isBuiltIn ? t('workshop.protectedTip') : t('common.delete')}>
                 <Icon name="trash" size={12} />
               </button>
@@ -243,6 +224,9 @@ function CharacterEditorModal({ npc, isNew, onClose, onSaved }: { npc: NpcCharac
   const t = useT();
   const [name, setName] = useState(npc.name);
   const [prompt, setPrompt] = useState(npc.prompt);
+  const [characterBook, setCharacterBook] = useState(npc.characterBook ?? '');
+  const [editorTab, setEditorTab] = useState<'character' | 'knowledge'>('character');
+  const [renderMarkdown, setRenderMarkdown] = useState(false);
   // 多个开场白：第一个保存在 greeting，其余保存在 alternateGreetings
   const [greetings, setGreetings] = useState<string[]>([npc.greeting, ...(npc.alternateGreetings ?? [])]);
   const [avatarDataUrl, setAvatarDataUrl] = useState<string | null>(npc.avatarDataUrl ?? null);
@@ -273,11 +257,20 @@ function CharacterEditorModal({ npc, isNew, onClose, onSaved }: { npc: NpcCharac
       addToast(t('toast.nameRequired'), 'error');
       return;
     }
+    if (characterBook.trim()) {
+      try {
+        JSON.parse(characterBook);
+      } catch {
+        addToast(t('toast.characterBookInvalidJson'), 'error');
+        return;
+      }
+    }
     // 清理空白/重复项：第一项作为主开场白，其余作为备用
     const cleaned = greetings.map((g) => g.trim()).filter((g, i, arr) => g && arr.indexOf(g) === i);
     const npcData = {
       name: npc.isBuiltIn ? npc.name : name.trim(),
       prompt,
+      characterBook: characterBook.trim() || undefined,
       greeting: cleaned[0] ?? '',
       alternateGreetings: cleaned.slice(1),
       avatarDataUrl,
@@ -303,14 +296,31 @@ function CharacterEditorModal({ npc, isNew, onClose, onSaved }: { npc: NpcCharac
   };
 
   return (
-    <div className="overlay" onClick={onClose}>
-      <div className="modal-root" onClick={(e) => e.stopPropagation()}>
-        <div className="modal card modal-editor">
-          <div className="modal-head">
+    <Modal onClose={onClose} className="modal-editor character-editor-modal">
+      <div className="modal-head">
             <span style={{ fontWeight: 800, fontSize: 15 }}>{isNew ? t('workshop.newCharTitle') : t('workshop.editCharTitle', { name: npc.name })}</span>
-            <button className="icon-btn" onClick={onClose}><Icon name="x" /></button>
+            <div className="raw-tabs">
+              <button className={`raw-tab ${editorTab === 'character' ? 'active' : ''}`} onClick={() => setEditorTab('character')}>{t('workshop.characterTab')}</button>
+              <button
+                className={`raw-tab ${editorTab === 'knowledge' ? 'active' : ''}`}
+                onClick={() => setEditorTab('knowledge')}
+              >
+                {t('workshop.knowledgeTab')}
+              </button>
+            </div>
+            <div className="modal-head-actions">
+              <div className="raw-wrap-toggle">
+                <span className="raw-wrap-label">{t('workshop.wbMarkdownRender')}</span>
+                <label className="switch">
+                  <input type="checkbox" checked={renderMarkdown} onChange={(e) => setRenderMarkdown(e.target.checked)} />
+                  <span className="switch-slider" />
+                </label>
+              </div>
+              <button className="icon-btn" onClick={onClose}><Icon name="x" /></button>
+            </div>
           </div>
-          <div className="modal-body">
+          <div className={`modal-body character-editor-body ${editorTab === 'knowledge' ? 'knowledge-tab' : ''}`}>
+            {editorTab === 'character' && <>
             <div style={{ display: 'flex', gap: 14, alignItems: 'center' }}>
               <Avatar name={name || t('chat.speakerChar')} colorOrdinal={npc.avatarColorOrdinal} imageUrl={avatarDataUrl} size="sm" />
               <div style={{ display: 'flex', gap: 8 }}>
@@ -336,33 +346,49 @@ function CharacterEditorModal({ npc, isNew, onClose, onSaved }: { npc: NpcCharac
             </div>
             <div className="field prompt-field">
               <label>{t('workshop.promptLabel')}</label>
-              <textarea className="textarea grow-textarea" value={prompt} onChange={(e) => setPrompt(e.target.value)} placeholder={t('workshop.promptPh')} />
+              {!renderMarkdown ? (
+                <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>}
+                </div>
+              )}
             </div>
             <div className="field" style={{ flexShrink: 0 }}>
               <label>
                 {t('workshop.greetingLabel')}
-                <span className="field-hint"> {t('workshop.greetingRandomHint')}</span>
+                <span> {t('workshop.greetingRandomHint')}</span>
               </label>
               {greetings.map((g, i) => (
                 <div key={i} className="greeting-input">
-                  <textarea
-                    className="textarea grow-textarea greeting-grow"
-                    value={g}
-                    onChange={(e) => setGreetings((prev) => prev.map((x, j) => (j === i ? e.target.value : x)))}
-                    placeholder={t('workshop.greetingPh')}
-                  />
-                  <button
-                    className="icon-btn greeting-del"
-                    title={t('common.delete')}
-                    onClick={() => setGreetings((prev) => prev.filter((_, j) => j !== i))}
-                  >
-                    <Icon name="x" size={13} />
-                  </button>
+                  {!renderMarkdown ? (
+                    <textarea
+                      className="textarea grow-textarea greeting-grow"
+                      value={g}
+                      onChange={(e) => setGreetings((prev) => prev.map((x, j) => (j === i ? e.target.value : x)))}
+                      placeholder={t('workshop.greetingPh')}
+                    />
+                  ) : (
+                    <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>}
+                    </div>
+                  )}
+                  {!renderMarkdown && (
+                    <button
+                      className="icon-btn greeting-del"
+                      title={t('common.delete')}
+                      onClick={() => setGreetings((prev) => prev.filter((_, j) => j !== i))}
+                    >
+                      <Icon name="x" size={13} />
+                    </button>
+                  )}
                 </div>
               ))}
-              <button className="btn btn-sm btn-ghost" style={{ alignSelf: 'flex-start' }} onClick={() => setGreetings((prev) => [...prev, ''])}>
-                <Icon name="plus" size={12} /> {t('workshop.addAltGreeting')}
-              </button>
+              {!renderMarkdown && (
+                <button className="btn btn-sm btn-ghost" style={{ alignSelf: 'flex-start' }} onClick={() => setGreetings((prev) => [...prev, ''])}>
+                  <Icon name="plus" size={12} /> {t('workshop.addAltGreeting')}
+                </button>
+              )}
             </div>
             {/* 启用技能：从卡片移入编辑页 */}
             <div className="field" style={{ flexShrink: 0 }}>
@@ -380,6 +406,19 @@ function CharacterEditorModal({ npc, isNew, onClose, onSaved }: { npc: NpcCharac
                 </div>
               )}
             </div>
+            </>}
+            {editorTab === 'knowledge' && (
+              <div className="field prompt-field character-book-field">
+                <label>{t('workshop.characterBookLabel')}</label>
+                <Suspense fallback={<div className="character-book-editor-loading" />}>
+                  <CharacterBookEditor
+                    value={characterBook}
+                    onChange={setCharacterBook}
+                    placeholder={t('workshop.characterBookPh')}
+                  />
+                </Suspense>
+              </div>
+            )}
           </div>
           <div className="modal-foot">
             {npc.isBuiltIn && (
@@ -390,40 +429,24 @@ function CharacterEditorModal({ npc, isNew, onClose, onSaved }: { npc: NpcCharac
             <button className="btn" onClick={onClose}>{t('common.cancel')}</button>
             <button className="btn btn-primary" onClick={save}>{t('common.save')}</button>
           </div>
-        </div>
-      </div>
-    </div>
+    </Modal>
   );
 }
 
 // ---------------- Lorebook ----------------
 
-function WorldBookList({ books, onChanged, onImportPng, importDraft, onImportDraftConsumed }: {
+function WorldBookList({ books, onChanged }: {
   books: WorldBook[];
   onChanged: () => void;
-  onImportPng: () => void;
-  /** PNG 解析出的角色卡草稿（含内嵌Lorebook） */
-  importDraft: ParsedSillyTavernCard | null;
-  /** 草稿已被消费（保存/取消）后通知父组件清空 */
-  onImportDraftConsumed: () => void;
 }) {
   const addToast = useStore((s) => s.addToast);
   const t = useT();
   const [editing, setEditing] = useState<WorldBook | { name: string; content: string; imageUri: null; createdAt: number } | null>(null);
+  const [renderMarkdown, setRenderMarkdown] = useState(false);
   const [pendingDelete, setPendingDelete] = useState<WorldBook | null>(null);
 
-  // PNG 导入产生草稿后：预填「新建Lorebook」表单（不落库，由用户手动保存）
-  useEffect(() => {
-    if (!importDraft) return;
-    if (importDraft.worldBook) {
-      setEditing({ ...importDraft.worldBook, imageUri: null, createdAt: Date.now() });
-      addToast(t('toast.wbDraftImported', { name: importDraft.worldBook.name }));
-    }
-  }, [importDraft]); // eslint-disable-line react-hooks/exhaustive-deps
-
   const closeEditor = () => {
     setEditing(null);
-    onImportDraftConsumed();
   };
 
   const saveWb = async (name: string, content: string) => {
@@ -440,7 +463,6 @@ function WorldBookList({ books, onChanged, onImportPng, importDraft, onImportDra
     }
     setEditing(null);
     onChanged();
-    onImportDraftConsumed();
   };
 
   const deleteWb = async (b: WorldBook) => {
@@ -455,9 +477,6 @@ function WorldBookList({ books, onChanged, onImportPng, importDraft, onImportDra
       <div style={{ display: 'flex', justifyContent: 'space-between', 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={onImportPng} title={t('workshop.pngImportWbTip')}>
-            <Icon name="import" size={13} /> {t('workshop.pngImport')}
-          </button>
           <button className="btn btn-primary btn-sm" onClick={() => setEditing({ name: '', content: '', imageUri: null, createdAt: Date.now() })}>
             <Icon name="plus" size={13} /> {t('workshop.newWb')}
           </button>
@@ -507,17 +526,22 @@ function WorldBookList({ books, onChanged, onImportPng, importDraft, onImportDra
       )}
 
       {editing && (
-        <div className="overlay" onClick={closeEditor}>
-          <div className="modal-root" onClick={(e) => e.stopPropagation()}>
-            <div className="modal card modal-editor">
-              <div className="modal-head">
-                <span style={{ fontWeight: 800, fontSize: 15 }}>{'id' in editing && editing.id != null ? t('workshop.editWbTitle') : t('workshop.newWbTitle')}</span>
-                <button className="icon-btn" onClick={closeEditor}><Icon name="x" /></button>
+        <Modal onClose={closeEditor} className="modal-editor">
+          <div className="modal-head">
+            <span style={{ fontWeight: 800, fontSize: 15 }}>{'id' in editing && editing.id != null ? t('workshop.editWbTitle') : t('workshop.newWbTitle')}</span>
+            <div className="modal-head-actions">
+              <div className="raw-wrap-toggle">
+                <span className="raw-wrap-label">{t('workshop.wbMarkdownRender')}</span>
+                <label className="switch">
+                  <input type="checkbox" checked={renderMarkdown} onChange={(e) => setRenderMarkdown(e.target.checked)} />
+                  <span className="switch-slider" />
+                </label>
               </div>
-              <WorldBookForm initial={editing} onSave={saveWb} onCancel={closeEditor} />
+              <button className="icon-btn" onClick={closeEditor}><Icon name="x" /></button>
             </div>
           </div>
-        </div>
+          <WorldBookForm initial={editing} renderMarkdown={renderMarkdown} onSave={saveWb} onCancel={closeEditor} />
+        </Modal>
       )}
     </div>
   );
@@ -546,11 +570,10 @@ function ScrollingCardName({ name }: { name: string }) {
   );
 }
 
-function WorldBookForm({ initial, onSave, onCancel }: { initial: WorldBook | { name: string; content: string; imageUri: null; createdAt: number }; onSave: (n: string, c: string) => void; onCancel: () => void }) {
+function WorldBookForm({ initial, renderMarkdown, onSave, onCancel }: { initial: WorldBook | { name: string; content: string; imageUri: null; createdAt: number }; renderMarkdown: boolean; onSave: (n: string, c: string) => void; onCancel: () => void }) {
   const t = useT();
   const [name, setName] = useState(initial.name);
   const [content, setContent] = useState(initial.content);
-  const [renderMarkdown, setRenderMarkdown] = useState(false);
   const isBuiltin = isBuiltinTavernHandbook(initial);
 
   const resetToDefault = () => {
@@ -572,16 +595,7 @@ function WorldBookForm({ initial, onSave, onCancel }: { initial: WorldBook | { n
               />}
         </div>
         <div className="field" style={{ display: 'flex', flexDirection: 'column', flex: 1, minHeight: 0 }}>
-          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10 }}>
-            <label>{t('workshop.wbContentLabel')}</label>
-            <div className="raw-wrap-toggle">
-              <span className="raw-wrap-label">{t('workshop.wbMarkdownRender')}</span>
-              <label className="switch">
-                <input type="checkbox" checked={renderMarkdown} onChange={(e) => setRenderMarkdown(e.target.checked)} />
-                <span className="switch-slider" />
-              </label>
-            </div>
-          </div>
+          <label>{t('workshop.wbContentLabel')}</label>
           {!renderMarkdown ? (
             <textarea className="textarea grow-textarea" value={content} onChange={(e) => setContent(e.target.value)} placeholder={t('workshop.wbContentPh')} />
           ) : (