@youtyan/code-viewer 0.9.2 → 0.10.0

package/web/app.js

@@ -574,7 +574,6 @@ ${lines.join(`
   var MOON_16_PATH = "M9.598 1.591a.749.749 0 0 1 .785-.175 7.001 7.001 0 1 1-8.967 8.967.75.75 0 0 1 .961-.96 5.5 5.5 0 0 0 7.046-7.046.75.75 0 0 1 .175-.786Zm1.616 1.945a7 7 0 0 1-7.678 7.678 5.499 5.499 0 1 0 7.678-7.678Z";
   var QUESTION_16_PATH = "M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z";
   var MARK_GITHUB_16_PATH = "M6.766 11.328c-2.063-.25-3.516-1.734-3.516-3.656 0-.781.281-1.625.75-2.188-.203-.515-.172-1.609.063-2.062.625-.078 1.468.25 1.968.703.594-.187 1.219-.281 1.985-.281.765 0 1.39.094 1.953.265.484-.437 1.344-.765 1.969-.687.218.422.25 1.515.046 2.047.5.593.766 1.39.766 2.203 0 1.922-1.453 3.375-3.547 3.64.531.344.89 1.094.89 1.954v1.625c0 .468.391.734.86.547C13.781 14.359 16 11.53 16 8.03 16 3.61 12.406 0 7.984 0 3.563 0 0 3.61 0 8.031a7.88 7.88 0 0 0 5.172 7.422c.422.156.828-.125.828-.547v-1.25c-.219.094-.5.156-.75.156-1.031 0-1.64-.562-2.078-1.609-.172-.422-.36-.672-.719-.719-.187-.015-.25-.093-.25-.187 0-.188.313-.328.625-.328.453 0 .844.281 1.25.86.313.452.64.655 1.031.655s.641-.14 1-.5c.266-.265.47-.5.657-.656";
-  var BOOK_16_PATH = "M0 1.75A.75.75 0 0 1 .75 1h4.253c1.227 0 2.317.59 3 1.501A3.743 3.743 0 0 1 11.006 1h4.245a.75.75 0 0 1 .75.75v10.5a.75.75 0 0 1-.75.75h-4.507a2.25 2.25 0 0 0-1.591.659l-.622.621a.75.75 0 0 1-1.06 0l-.622-.621A2.25 2.25 0 0 0 5.258 13H.75a.75.75 0 0 1-.75-.75Zm7.251 10.324.004-5.073-.002-2.253A2.25 2.25 0 0 0 5.003 2.5H1.5v9h3.757a3.75 3.75 0 0 1 1.994.574ZM8.755 4.75l-.004 7.322a3.752 3.752 0 0 1 1.992-.572H14.5v-9h-3.495a2.25 2.25 0 0 0-2.25 2.25Z";
   var SEARCH_16_PATH = "M10.68 11.74a6 6 0 0 1-7.917-8.984 6 6 0 0 1 8.997 7.905l3.05 3.05a.75.75 0 1 1-1.06 1.06l-3.07-3.03ZM11.5 7a4.499 4.499 0 1 1-8.997 0A4.499 4.499 0 0 1 11.5 7Z";
   var DOWNLOAD_16_PATHS = [
     "M2.75 14A1.75 1.75 0 0 1 1 12.25v-2.5a.75.75 0 0 1 1.5 0v2.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25v-2.5a.75.75 0 0 1 1.5 0v2.5A1.75 1.75 0 0 1 13.25 14Z",
@@ -875,6 +874,19 @@ ${lines.join(`
     return { url: `${target}${lineHash}`, provider: "github" };
   }
 
+  // web-src/core/tools.ts
+  var TOOL_IDS = [
+    "markdown",
+    "mermaid",
+    "json"
+  ];
+  var DEFAULT_TOOL_ID = "markdown";
+  var MIN_TOOLS_SHEET_WIDTH = 480;
+  var MAX_TOOLS_SHEET_WIDTH = 4000;
+  function isToolId(value) {
+    return TOOL_IDS.includes(value);
+  }
+
   // web-src/core/routes.ts
   function assertNever(value) {
     throw new Error(`unhandled route: ${JSON.stringify(value)}`);
@@ -1145,18 +1157,28 @@ ${lines.join(`
     const params = new URLSearchParams(search);
     return params.get("doctor") === "open";
   }
-  function withDoctorOverlay(url, open) {
+  function withQueryParam(url, key, value) {
     const queryIdx = url.indexOf("?");
     const base = queryIdx >= 0 ? url.slice(0, queryIdx) : url;
     const query = queryIdx >= 0 ? url.slice(queryIdx + 1) : "";
     const params = new URLSearchParams(query);
-    if (open)
-      params.set("doctor", "open");
+    if (value === null)
+      params.delete(key);
     else
-      params.delete("doctor");
+      params.set(key, value);
     const qs = params.toString();
     return qs ? `${base}?${qs}` : base;
   }
+  function withDoctorOverlay(url, open) {
+    return withQueryParam(url, "doctor", open ? "open" : null);
+  }
+  function parseToolsOverlay(search) {
+    const raw = new URLSearchParams(search).get("tools");
+    return isToolId(raw) ? raw : null;
+  }
+  function withToolsOverlay(url, tool) {
+    return withQueryParam(url, "tools", tool);
+  }
 
   // web-src/views/media-embed.ts
   var MEDIA_RE = /\.(png|jpe?g|gif|webp|svg|avif|bmp|ico|mp4|webm|mov|mp3|wav|ogg|flac|m4a|aac|opus)(\?.*)?$/i;
@@ -7606,6 +7628,19 @@ ${lines.join(`
   }
 
   // web-src/core/shiki-loader.ts
+  function highlightToInnerHtml(code2, lang, highlighter) {
+    if (!highlighter || !code2)
+      return "";
+    const html = highlighter.codeToHtml(code2, {
+      lang,
+      themes: { light: "github-light", dark: "github-dark" },
+      defaultColor: false
+    });
+    const template = document.createElement("template");
+    template.innerHTML = html;
+    const pre = template.content.querySelector("pre");
+    return pre ? pre.innerHTML : "";
+  }
   var cache = new Map;
   function loadShikiHighlighter(options) {
     const key = JSON.stringify({
@@ -7992,7 +8027,9 @@ ${frontmatter.yaml}
         else
           break;
       }
-      if (window.innerHeight + scrollRoot.scrollTop >= scrollRoot.scrollHeight - 4) {
+      const container = scrollableAncestor(root);
+      const atBottom = container ? container.scrollTop + container.clientHeight >= container.scrollHeight - 4 : window.innerHeight + scrollRoot.scrollTop >= scrollRoot.scrollHeight - 4;
+      if (atBottom) {
         active = entries[entries.length - 1];
       }
       entries.forEach((entry) => {
@@ -8004,8 +8041,9 @@ ${frontmatter.yaml}
       if (!raf)
         raf = requestAnimationFrame(update);
     };
-    window.addEventListener("scroll", schedule, {
+    document.addEventListener("scroll", schedule, {
       passive: true,
+      capture: true,
       signal: controller.signal
     });
     window.addEventListener("resize", schedule, { signal: controller.signal });
@@ -8028,7 +8066,21 @@ ${frontmatter.yaml}
   function decodeHashFragment(hash) {
     return decodeUriComponentSafe(hash.startsWith("#") ? hash.slice(1) : hash);
   }
+  function scrollableAncestor(element) {
+    for (let node = element.parentElement;node; node = node.parentElement) {
+      const style = getComputedStyle(node);
+      if (/(auto|scroll)/.test(style.overflowY) && node.scrollHeight > node.clientHeight)
+        return node;
+    }
+    return null;
+  }
   function scrollMarkdownSectionIntoView(section, behavior) {
+    const container = scrollableAncestor(section);
+    if (container) {
+      const top2 = section.getBoundingClientRect().top - container.getBoundingClientRect().top + container.scrollTop - 12;
+      container.scrollTo({ top: Math.max(0, top2), behavior });
+      return;
+    }
     const top = section.getBoundingClientRect().top + window.scrollY - markdownAnchorOffset() - 12;
     window.scrollTo({ top: Math.max(0, top), behavior });
   }
@@ -13165,6 +13217,75 @@ ${frontmatter.yaml}
     };
   }
 
+  // web-src/core/diagram-viewport.ts
+  var MIN_SCALE = 0.2;
+  var MAX_SCALE = 3;
+  var BUTTON_STEP = 0.2;
+  var WHEEL_STEP = 0.1;
+  function clampScale(value) {
+    return Math.max(MIN_SCALE, Math.min(MAX_SCALE, value));
+  }
+  function createDiagramViewport(options) {
+    const container = document.createElement("div");
+    container.className = options.containerClassName;
+    const content = document.createElement("div");
+    content.className = options.contentClassName;
+    container.appendChild(content);
+    let scale = 1;
+    function applyZoom(next) {
+      scale = clampScale(next);
+      content.style.transform = `scale(${scale})`;
+      content.style.transformOrigin = "top left";
+    }
+    let dragState = null;
+    container.addEventListener("mousedown", (event) => {
+      if (event.button !== 0)
+        return;
+      dragState = {
+        x: event.clientX,
+        y: event.clientY,
+        sl: container.scrollLeft,
+        st: container.scrollTop
+      };
+      container.style.cursor = "grabbing";
+      event.preventDefault();
+    });
+    const onWindowMouseMove = (event) => {
+      if (!dragState)
+        return;
+      container.scrollLeft = dragState.sl - (event.clientX - dragState.x);
+      container.scrollTop = dragState.st - (event.clientY - dragState.y);
+    };
+    const onWindowMouseUp = () => {
+      if (!dragState)
+        return;
+      dragState = null;
+      container.style.cursor = "";
+    };
+    window.addEventListener("mousemove", onWindowMouseMove);
+    window.addEventListener("mouseup", onWindowMouseUp);
+    container.addEventListener("wheel", (event) => {
+      if (!event.ctrlKey && !event.metaKey)
+        return;
+      event.preventDefault();
+      applyZoom(scale + (event.deltaY > 0 ? -WHEEL_STEP : WHEEL_STEP));
+    }, { passive: false });
+    applyZoom(1);
+    return {
+      container,
+      content,
+      zoomIn: () => applyZoom(scale + BUTTON_STEP),
+      zoomOut: () => applyZoom(scale - BUTTON_STEP),
+      reset: () => applyZoom(1),
+      dispose() {
+        dragState = null;
+        container.style.cursor = "";
+        window.removeEventListener("mousemove", onWindowMouseMove);
+        window.removeEventListener("mouseup", onWindowMouseUp);
+      }
+    };
+  }
+
   // web-src/views/database/er-diagram.ts
   function mermaidType(sqlType) {
     const upper = sqlType.toUpperCase();
@@ -13255,30 +13376,17 @@ ${frontmatter.yaml}
     copyBtn.textContent = text3().er.copyMermaid;
     copyBtn.title = text3().er.copyMermaidTitle;
     toolbar.append(zoomIn, zoomOut, zoomReset, copyBtn);
-    const container = document.createElement("div");
-    container.className = "db-er-container";
-    const svgWrap = document.createElement("div");
-    svgWrap.className = "db-er-svg-wrap";
-    container.appendChild(svgWrap);
+    const viewport = createDiagramViewport({
+      containerClassName: "db-er-container",
+      contentClassName: "db-er-svg-wrap"
+    });
+    const container = viewport.container;
+    const svgWrap = viewport.content;
     el.append(toolbar, container);
-    let scale = 1;
     let lastMarkup = "";
-    function applyZoom() {
-      svgWrap.style.transform = `scale(${scale})`;
-      svgWrap.style.transformOrigin = "top left";
-    }
-    zoomIn.addEventListener("click", () => {
-      scale = Math.min(3, scale + 0.2);
-      applyZoom();
-    });
-    zoomOut.addEventListener("click", () => {
-      scale = Math.max(0.2, scale - 0.2);
-      applyZoom();
-    });
-    zoomReset.addEventListener("click", () => {
-      scale = 1;
-      applyZoom();
-    });
+    zoomIn.addEventListener("click", () => viewport.zoomIn());
+    zoomOut.addEventListener("click", () => viewport.zoomOut());
+    zoomReset.addEventListener("click", () => viewport.reset());
     copyBtn.addEventListener("click", () => {
       if (lastMarkup) {
         navigator.clipboard.writeText(lastMarkup).then(() => {
@@ -13291,46 +13399,10 @@ ${frontmatter.yaml}
         });
       }
     });
-    let dragState = null;
-    container.addEventListener("mousedown", (e2) => {
-      if (e2.button !== 0)
-        return;
-      dragState = {
-        x: e2.clientX,
-        y: e2.clientY,
-        sl: container.scrollLeft,
-        st: container.scrollTop
-      };
-      container.style.cursor = "grabbing";
-      e2.preventDefault();
-    });
-    const onWindowMouseMove = (e2) => {
-      if (!dragState)
-        return;
-      container.scrollLeft = dragState.sl - (e2.clientX - dragState.x);
-      container.scrollTop = dragState.st - (e2.clientY - dragState.y);
-    };
-    const onWindowMouseUp = () => {
-      if (dragState) {
-        dragState = null;
-        container.style.cursor = "";
-      }
-    };
-    window.addEventListener("mousemove", onWindowMouseMove);
-    window.addEventListener("mouseup", onWindowMouseUp);
-    container.addEventListener("wheel", (e2) => {
-      if (e2.ctrlKey || e2.metaKey) {
-        e2.preventDefault();
-        const delta = e2.deltaY > 0 ? -0.1 : 0.1;
-        scale = Math.max(0.2, Math.min(3, scale + delta));
-        applyZoom();
-      }
-    }, { passive: false });
     async function render(schema, columnsMap) {
       el.hidden = false;
       svgWrap.innerHTML = "";
-      scale = 1;
-      applyZoom();
+      viewport.reset();
       const tables = schema.tables.filter((t2) => t2.type === "table");
       if (tables.length === 0) {
         svgWrap.textContent = text3().er.noTables;
@@ -13357,13 +13429,10 @@ ${frontmatter.yaml}
       el.hidden = true;
       svgWrap.innerHTML = "";
       lastMarkup = "";
-      dragState = null;
-      container.style.cursor = "";
     }
     function dispose() {
       clear();
-      window.removeEventListener("mousemove", onWindowMouseMove);
-      window.removeEventListener("mouseup", onWindowMouseUp);
+      viewport.dispose();
     }
     function localize() {
       const t2 = text3().er;
@@ -13651,17 +13720,7 @@ ${frontmatter.yaml}
 
   // web-src/views/database/shiki-sql.ts
   function highlightSqlToInnerHtml(code2, highlighter) {
-    if (!highlighter || !code2)
-      return "";
-    const html = highlighter.codeToHtml(code2, {
-      lang: "sql",
-      themes: { light: "github-light", dark: "github-dark" },
-      defaultColor: false
-    });
-    const template = document.createElement("template");
-    template.innerHTML = html;
-    const pre = template.content.querySelector("pre");
-    return pre ? pre.innerHTML : "";
+    return highlightToInnerHtml(code2, "sql", highlighter);
   }
 
   // web-src/views/database/query-editor.ts
@@ -26455,6 +26514,19 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
                 }
               ]
             },
+            {
+              title: "Scratch on pasted text",
+              blocks: [
+                {
+                  kind: "paragraph",
+                  text: "The Tools item in the header menu opens a drawer for text you paste, without leaving the screen you are on. It holds a Markdown preview (the same renderer as the file preview, so the table of contents, task lists, frontmatter, code highlighting and ```mermaid fences all work), a Mermaid preview with zoom and drag-pan, and a JSON / YAML tool that reads either format and re-emits it as formatted JSON or YAML — a validator and a converter in one."
+                },
+                {
+                  kind: "paragraph",
+                  text: "Each tool keeps its own draft in .code-viewer/tools.json, so the drawer reopens where you left it. The open tool is part of the URL (?tools=markdown), which makes it shareable and survives a reload, and the drawer width is draggable from the grip on its left edge."
+                }
+              ]
+            },
             {
               title: "Environment doctor",
               blocks: [
@@ -26513,6 +26585,10 @@ code-viewer doctor --bin git=/opt/bin/git --bin docker=/opt/bin/docker --bin gh=
                       "db-ui.json",
                       "Datastore UI preferences — column widths per (DB, table, column) and toggle states such as Rails FK inference and the S3 tooltip."
                     ],
+                    [
+                      "tools.json",
+                      "Tools drawer state — the pasted draft for each tool (Markdown, Mermaid, JSON / YAML), the tool you used last, and the drawer width."
+                    ],
                     [
                       "annotations.json",
                       "AI annotation walkthroughs — sessions with their ordered steps (file, line range, title, body), used by the annotation panel and synced live to open tabs over SSE."
@@ -27150,6 +27226,19 @@ code-viewer query agent-help`
                 }
               ]
             },
+            {
+              title: "貼り付けたテキストを扱う",
+              blocks: [
+                {
+                  kind: "paragraph",
+                  text: "ヘッダメニューの Tools は、いま見ている画面を離れずに使える貼り付け用のドロワーを開きます。Markdown プレビュー（ファイルプレビューと同じ描画なので、目次・タスクリスト・frontmatter・コードハイライト・```mermaid フェンスがそのまま効きます）、ズームとドラッグ移動ができる Mermaid プレビュー、JSON と YAML のどちらでも読み取って整形し直す JSON / YAML ツール（検証と相互変換を兼ねます）が入っています。"
+                },
+                {
+                  kind: "paragraph",
+                  text: "各ツールの入力は .code-viewer/tools.json に保存されるので、開き直すと続きから使えます。開いているツールは URL（?tools=markdown）に載るので共有もリロードもでき、ドロワーの幅は左端のグリップをドラッグして変えられます。"
+                }
+              ]
+            },
             {
               title: "環境ドクター",
               blocks: [
@@ -27208,6 +27297,10 @@ code-viewer doctor --bin git=/opt/bin/git --bin docker=/opt/bin/docker --bin gh=
                       "db-ui.json",
                       "データストア UI の設定 — (DB, テーブル, カラム) ごとの列幅、Rails FK 推測や S3 ツールチップなどのトグル状態。"
                     ],
+                    [
+                      "tools.json",
+                      "ツールドロワーの状態 — 各ツール（Markdown / Mermaid / JSON・YAML）に貼り付けた下書き、最後に使ったツール、ドロワーの幅。"
+                    ],
                     [
                       "annotations.json",
                       "AI 注釈のウォークスルー — セッションと順序付きステップ（ファイル、行範囲、タイトル、本文）。注釈パネルが読み、SSE で開いているタブへもライブ同期されます。"
@@ -36195,6 +36288,1017 @@ code-viewer query agent-help`
     };
   }
 
+  // web-src/views/tools/i18n.ts
+  var TEXT2 = {
+    en: {
+      title: "Tools",
+      open: "tools (Markdown / Mermaid / JSON)",
+      close: "Close",
+      resizeSheet: "Resize the tools drawer",
+      saveFailed: "could not save this draft",
+      loadFailed: "could not load saved drafts",
+      tabs: {
+        markdown: "Markdown",
+        mermaid: "Mermaid",
+        json: "JSON / YAML"
+      },
+      pane: {
+        input: "Input",
+        clear: "clear",
+        clearTitle: "Clear the input",
+        copy: "copy",
+        copyTitle: "Copy the output",
+        copied: "copied",
+        copyFailed: "copy failed",
+        resize: "Resize input and output panes",
+        emptyInput: "Paste something on the left to see it rendered here."
+      },
+      markdown: {
+        output: "Preview",
+        placeholder: "Paste Markdown here…"
+      },
+      mermaid: {
+        output: "Diagram",
+        placeholder: `Paste Mermaid source here, for example:
+graph TD
+  A --> B`,
+        zoomIn: "Zoom in",
+        zoomOut: "Zoom out",
+        zoomReset: "Reset zoom",
+        loadError: "Failed to load the Mermaid renderer.",
+        renderError: "Could not render this diagram. Check the syntax."
+      },
+      json: {
+        output: "Output",
+        placeholder: "Paste JSON or YAML here…",
+        outputFormat: "output format",
+        asJson: "JSON",
+        asYaml: "YAML",
+        minify: "minify",
+        minifyTitle: "Emit JSON on a single line",
+        minifyYamlTitle: "Minify applies to JSON output only",
+        parsedAsJson: "read as JSON",
+        parsedAsYaml: "read as YAML",
+        invalid: (message) => `Invalid input: ${message}`,
+        loadError: "Failed to load the YAML parser."
+      }
+    },
+    ja: {
+      title: "ツール",
+      open: "ツール (Markdown / Mermaid / JSON)",
+      close: "閉じる",
+      resizeSheet: "ツールの幅を変える",
+      saveFailed: "この下書きを保存できません",
+      loadFailed: "保存済みの下書きを読み出せません",
+      tabs: {
+        markdown: "Markdown",
+        mermaid: "Mermaid",
+        json: "JSON / YAML"
+      },
+      pane: {
+        input: "入力",
+        clear: "クリア",
+        clearTitle: "入力を空にする",
+        copy: "コピー",
+        copyTitle: "出力をコピーする",
+        copied: "コピーしました",
+        copyFailed: "コピーできません",
+        resize: "入力と出力の幅を変える",
+        emptyInput: "左に貼り付けると、ここに結果が出ます。"
+      },
+      markdown: {
+        output: "プレビュー",
+        placeholder: "Markdown を貼り付け…"
+      },
+      mermaid: {
+        output: "図",
+        placeholder: `Mermaid の記法を貼り付け。例:
+graph TD
+  A --> B`,
+        zoomIn: "拡大",
+        zoomOut: "縮小",
+        zoomReset: "等倍に戻す",
+        loadError: "Mermaid の読み込みに失敗しました。",
+        renderError: "この図を描けませんでした。記法を確認してください。"
+      },
+      json: {
+        output: "出力",
+        placeholder: "JSON か YAML を貼り付け…",
+        outputFormat: "出力形式",
+        asJson: "JSON",
+        asYaml: "YAML",
+        minify: "1行化",
+        minifyTitle: "JSON を1行で出力する",
+        minifyYamlTitle: "1行化は JSON 出力のときだけ効きます",
+        parsedAsJson: "JSON として解釈",
+        parsedAsYaml: "YAML として解釈",
+        invalid: (message) => `解釈できません: ${message}`,
+        loadError: "YAML パーサの読み込みに失敗しました。"
+      }
+    }
+  };
+  function toolsText(lang) {
+    return TEXT2[lang];
+  }
+
+  // web-src/core/drag-resizer.ts
+  var DEFAULT_KEYBOARD_STEP = 16;
+  function attachDragResizer(options) {
+    const { handle } = options;
+    const step = options.keyboardStep ?? DEFAULT_KEYBOARD_STEP;
+    let pointerId = null;
+    let startX = 0;
+    let startSize = 0;
+    function setActive(active) {
+      if (!options.activeClassTarget || !options.activeClassName)
+        return;
+      options.activeClassTarget.classList.toggle(options.activeClassName, active);
+    }
+    const onPointerDown = (event) => {
+      if (event.button !== 0)
+        return;
+      pointerId = event.pointerId;
+      startX = event.clientX;
+      startSize = options.getSize();
+      try {
+        handle.setPointerCapture?.(event.pointerId);
+      } catch {}
+      setActive(true);
+      event.preventDefault();
+    };
+    const onPointerMove = (event) => {
+      if (pointerId !== event.pointerId)
+        return;
+      options.applySize(startSize + (event.clientX - startX) * options.direction);
+    };
+    const onPointerEnd = (event) => {
+      if (pointerId !== event.pointerId)
+        return;
+      pointerId = null;
+      setActive(false);
+      options.onEnd?.();
+    };
+    const onKeyDown = (event) => {
+      if (event.key !== "ArrowLeft" && event.key !== "ArrowRight")
+        return;
+      const delta = (event.key === "ArrowRight" ? 1 : -1) * options.direction;
+      options.applySize(options.getSize() + delta * step * (event.shiftKey ? 4 : 1));
+      event.preventDefault();
+      options.onEnd?.();
+    };
+    handle.addEventListener("pointerdown", onPointerDown);
+    handle.addEventListener("pointermove", onPointerMove);
+    handle.addEventListener("pointerup", onPointerEnd);
+    handle.addEventListener("pointercancel", onPointerEnd);
+    handle.addEventListener("keydown", onKeyDown);
+    return () => {
+      handle.removeEventListener("pointerdown", onPointerDown);
+      handle.removeEventListener("pointermove", onPointerMove);
+      handle.removeEventListener("pointerup", onPointerEnd);
+      handle.removeEventListener("pointercancel", onPointerEnd);
+      handle.removeEventListener("keydown", onKeyDown);
+      pointerId = null;
+      setActive(false);
+    };
+  }
+
+  // web-src/core/yaml-loader.ts
+  var yamlPromise = null;
+  function loadYaml() {
+    if (!yamlPromise) {
+      yamlPromise = import("/yaml.js").then((mod) => mod).catch(() => null);
+    }
+    return yamlPromise;
+  }
+
+  // web-src/views/tools/scratchpad-pane.ts
+  var RENDER_DEBOUNCE_MS = 200;
+  var STATUS_CLEAR_MS = 1800;
+  function createPaneAction(label, title) {
+    const button = document.createElement("button");
+    button.type = "button";
+    button.className = "tools-pane-action";
+    button.textContent = label;
+    button.title = title;
+    return button;
+  }
+  function createHead(title) {
+    const head = document.createElement("header");
+    head.className = "tools-pane-head";
+    const titleEl = document.createElement("span");
+    titleEl.className = "tools-pane-title";
+    titleEl.textContent = title;
+    head.appendChild(titleEl);
+    return { head, titleEl };
+  }
+  function createScratchpadPane(text3, outputTitle, placeholder, options) {
+    let currentText = text3;
+    const el = document.createElement("div");
+    el.className = `tools-pane ${options.toolClassName}`;
+    const inputSide = document.createElement("section");
+    inputSide.className = "tools-pane-side tools-pane-input";
+    const { head: inputHead, titleEl: inputTitle } = createHead(text3.pane.input);
+    const clearBtn = document.createElement("button");
+    clearBtn.type = "button";
+    clearBtn.className = "tools-pane-action";
+    clearBtn.textContent = text3.pane.clear;
+    clearBtn.title = text3.pane.clearTitle;
+    inputHead.appendChild(clearBtn);
+    const input2 = document.createElement("textarea");
+    input2.className = "tools-textarea";
+    input2.spellcheck = false;
+    input2.placeholder = placeholder;
+    input2.value = options.initialText;
+    inputSide.append(inputHead, input2);
+    const resizer = document.createElement("div");
+    resizer.className = "tools-pane-resizer";
+    resizer.role = "separator";
+    resizer.tabIndex = 0;
+    resizer.setAttribute("aria-orientation", "vertical");
+    resizer.setAttribute("aria-label", text3.pane.resize);
+    const outputSide = document.createElement("section");
+    outputSide.className = "tools-pane-side tools-pane-output";
+    const { head: outputHead, titleEl: outputTitleEl } = createHead(outputTitle);
+    const actions = document.createElement("div");
+    actions.className = "tools-pane-actions";
+    for (const action of options.outputActions ?? [])
+      actions.appendChild(action);
+    const status = document.createElement("span");
+    status.className = "tools-pane-status";
+    status.role = "status";
+    outputHead.append(actions, status);
+    const output = document.createElement("div");
+    output.className = "tools-pane-body";
+    outputSide.append(outputHead, output);
+    el.append(inputSide, resizer, outputSide);
+    let statusTimer = null;
+    let pinnedStatus = null;
+    let normalStatus = { message: "", tone: "info" };
+    function applyStatus(state) {
+      status.textContent = state.message;
+      status.classList.toggle("tools-pane-status-error", state.tone === "error");
+    }
+    function clearStatusTimer() {
+      if (!statusTimer)
+        return;
+      clearTimeout(statusTimer);
+      statusTimer = null;
+    }
+    function setStatus(message, tone = "info") {
+      clearStatusTimer();
+      normalStatus = { message, tone };
+      if (pinnedStatus)
+        return;
+      applyStatus(normalStatus);
+    }
+    function flashStatus(message, tone = "info") {
+      clearStatusTimer();
+      if (pinnedStatus)
+        return;
+      applyStatus({ message, tone });
+      statusTimer = setTimeout(() => {
+        statusTimer = null;
+        applyStatus(pinnedStatus ?? normalStatus);
+      }, STATUS_CLEAR_MS);
+    }
+    function setPinnedStatus(message, tone = "error") {
+      clearStatusTimer();
+      pinnedStatus = message ? { message, tone } : null;
+      applyStatus(pinnedStatus ?? normalStatus);
+    }
+    let renderController = null;
+    let debounceTimer = null;
+    function renderNow() {
+      renderController?.abort();
+      const controller = new AbortController;
+      renderController = controller;
+      const value = input2.value;
+      if (!value.trim()) {
+        const empty = document.createElement("p");
+        empty.className = "tools-pane-empty";
+        empty.textContent = currentText.pane.emptyInput;
+        output.replaceChildren(empty);
+        setStatus("");
+        return;
+      }
+      (async () => {
+        try {
+          await options.render(value, output, controller.signal);
+        } catch (err) {
+          if (controller.signal.aborted)
+            return;
+          const message = err instanceof Error ? err.message : String(err);
+          setStatus(message, "error");
+        }
+      })();
+    }
+    function scheduleRender() {
+      if (debounceTimer)
+        clearTimeout(debounceTimer);
+      debounceTimer = setTimeout(() => {
+        debounceTimer = null;
+        renderNow();
+      }, RENDER_DEBOUNCE_MS);
+    }
+    input2.addEventListener("input", () => {
+      options.onInput(input2.value);
+      renderController?.abort();
+      renderController = null;
+      scheduleRender();
+    });
+    clearBtn.addEventListener("click", () => {
+      if (!input2.value)
+        return;
+      input2.value = "";
+      options.onInput("");
+      input2.focus();
+      renderNow();
+    });
+    const MIN_SIDE_WIDTH = 220;
+    function applyInputWidth(width) {
+      const total = el.getBoundingClientRect().width;
+      const max = Math.max(MIN_SIDE_WIDTH, total - MIN_SIDE_WIDTH);
+      const clamped = Math.max(MIN_SIDE_WIDTH, Math.min(max, width));
+      el.style.setProperty("--tools-input-width", `${Math.round(clamped)}px`);
+    }
+    const detachResizer = attachDragResizer({
+      handle: resizer,
+      getSize: () => inputSide.getBoundingClientRect().width,
+      applySize: applyInputWidth,
+      direction: 1,
+      activeClassTarget: el,
+      activeClassName: "tools-pane-resizing"
+    });
+    return {
+      el,
+      input: input2,
+      output,
+      setStatus,
+      flashStatus,
+      setPinnedStatus,
+      refresh: renderNow,
+      setText(next) {
+        input2.value = next;
+      },
+      getText: () => input2.value,
+      localize(nextText, nextOutputTitle, nextPlaceholder) {
+        currentText = nextText;
+        inputTitle.textContent = nextText.pane.input;
+        clearBtn.textContent = nextText.pane.clear;
+        clearBtn.title = nextText.pane.clearTitle;
+        resizer.setAttribute("aria-label", nextText.pane.resize);
+        outputTitleEl.textContent = nextOutputTitle;
+        input2.placeholder = nextPlaceholder;
+      },
+      focus: () => input2.focus(),
+      dispose() {
+        detachResizer();
+        renderController?.abort();
+        renderController = null;
+        if (debounceTimer)
+          clearTimeout(debounceTimer);
+        debounceTimer = null;
+        if (statusTimer)
+          clearTimeout(statusTimer);
+        statusTimer = null;
+      }
+    };
+  }
+
+  // web-src/views/tools/structured-text.ts
+  var JSON_INDENT = 2;
+  function parseStructuredText(text3, yaml) {
+    const trimmed = text3.trim();
+    if (!trimmed)
+      return { status: "error", message: "empty input" };
+    let jsonMessage = "";
+    try {
+      return { status: "ok", source: "json", value: JSON.parse(trimmed) };
+    } catch (err) {
+      jsonMessage = err instanceof Error ? err.message : String(err);
+    }
+    if (!yaml)
+      return { status: "error", message: jsonMessage };
+    try {
+      const doc = yaml.parseDocument(text3);
+      if (doc.errors.length > 0)
+        return {
+          status: "error",
+          message: doc.errors.map((issue) => issue.message).join(`
+
+`)
+        };
+      const warnings = doc.warnings.map((issue) => issue.message);
+      return {
+        status: "ok",
+        source: "yaml",
+        value: doc.toJS(),
+        ...warnings.length ? { warnings } : {}
+      };
+    } catch (err) {
+      return {
+        status: "error",
+        message: err instanceof Error ? err.message : String(err)
+      };
+    }
+  }
+  function formatStructured(value, format2, minify, yaml) {
+    if (format2 === "yaml") {
+      if (!yaml)
+        return null;
+      return yaml.stringify(value, { indent: JSON_INDENT });
+    }
+    return JSON.stringify(value, null, minify ? 0 : JSON_INDENT) ?? "";
+  }
+
+  // web-src/views/tools/json-tool.ts
+  async function resolveInput(value, format2, signal) {
+    const direct = parseStructuredText(value, null);
+    if (direct.status === "ok" && format2 === "json")
+      return { parsed: direct, yaml: null };
+    const yaml = await loadYaml();
+    if (signal.aborted)
+      return null;
+    return {
+      parsed: direct.status === "ok" ? direct : parseStructuredText(value, yaml),
+      yaml
+    };
+  }
+  function createJsonTool(text3, initialText, onInput) {
+    let currentText = text3;
+    let format2 = "json";
+    let minify = false;
+    let lastOutput = "";
+    const seg = document.createElement("div");
+    seg.className = "seg";
+    seg.role = "group";
+    seg.setAttribute("aria-label", text3.json.outputFormat);
+    const jsonBtn = document.createElement("button");
+    jsonBtn.type = "button";
+    jsonBtn.textContent = text3.json.asJson;
+    jsonBtn.classList.add("active");
+    const yamlBtn = document.createElement("button");
+    yamlBtn.type = "button";
+    yamlBtn.textContent = text3.json.asYaml;
+    seg.append(jsonBtn, yamlBtn);
+    const minifyBtn = createPaneAction(text3.json.minify, text3.json.minifyTitle);
+    const copyBtn = createPaneAction(text3.pane.copy, text3.pane.copyTitle);
+    function syncActionState() {
+      jsonBtn.classList.toggle("active", format2 === "json");
+      yamlBtn.classList.toggle("active", format2 === "yaml");
+      minifyBtn.classList.toggle("active", minify);
+      minifyBtn.setAttribute("aria-pressed", String(minify));
+      minifyBtn.disabled = format2 === "yaml";
+      minifyBtn.title = format2 === "yaml" ? currentText.json.minifyYamlTitle : currentText.json.minifyTitle;
+    }
+    const pane = createScratchpadPane(text3, text3.json.output, text3.json.placeholder, {
+      toolClassName: "tools-pane-json",
+      initialText,
+      onInput,
+      outputActions: [seg, minifyBtn, copyBtn],
+      render: async (value, output, signal) => {
+        const resolved = await resolveInput(value, format2, signal);
+        if (!resolved)
+          return;
+        const { parsed, yaml } = resolved;
+        if (parsed.status === "error") {
+          lastOutput = "";
+          const error2 = document.createElement("p");
+          error2.className = "tools-pane-error";
+          error2.textContent = currentText.json.invalid(parsed.message);
+          output.replaceChildren(error2);
+          pane.setStatus("");
+          return;
+        }
+        const formatted = formatStructured(parsed.value, format2, minify, yaml);
+        if (formatted === null) {
+          lastOutput = "";
+          const error2 = document.createElement("p");
+          error2.className = "tools-pane-error";
+          error2.textContent = currentText.json.loadError;
+          output.replaceChildren(error2);
+          pane.setStatus("");
+          return;
+        }
+        lastOutput = formatted;
+        const highlighter = await loadShikiHighlighter({
+          themes: ["github-light", "github-dark"],
+          langs: ["json", "yaml"]
+        });
+        if (signal.aborted)
+          return;
+        const pre = document.createElement("pre");
+        pre.className = "tools-code";
+        const html = highlightToInnerHtml(formatted, format2, highlighter);
+        if (html)
+          pre.innerHTML = html;
+        else
+          pre.textContent = formatted;
+        if (parsed.warnings?.length) {
+          const warning = document.createElement("p");
+          warning.className = "tools-pane-warning";
+          warning.textContent = parsed.warnings.join(`
+
+`);
+          output.replaceChildren(warning, pre);
+        } else {
+          output.replaceChildren(pre);
+        }
+        pane.setStatus(parsed.source === "json" ? currentText.json.parsedAsJson : currentText.json.parsedAsYaml);
+      }
+    });
+    jsonBtn.addEventListener("click", () => {
+      if (format2 === "json")
+        return;
+      format2 = "json";
+      syncActionState();
+      pane.refresh();
+    });
+    yamlBtn.addEventListener("click", () => {
+      if (format2 === "yaml")
+        return;
+      format2 = "yaml";
+      syncActionState();
+      pane.refresh();
+    });
+    minifyBtn.addEventListener("click", () => {
+      minify = !minify;
+      syncActionState();
+      pane.refresh();
+    });
+    copyBtn.addEventListener("click", () => {
+      if (!lastOutput)
+        return;
+      navigator.clipboard.writeText(lastOutput).then(() => pane.flashStatus(currentText.pane.copied), () => pane.flashStatus(currentText.pane.copyFailed, "error"));
+    });
+    syncActionState();
+    return {
+      ...pane,
+      localizeActions(nextText) {
+        currentText = nextText;
+        seg.setAttribute("aria-label", nextText.json.outputFormat);
+        jsonBtn.textContent = nextText.json.asJson;
+        yamlBtn.textContent = nextText.json.asYaml;
+        minifyBtn.textContent = nextText.json.minify;
+        copyBtn.textContent = nextText.pane.copy;
+        copyBtn.title = nextText.pane.copyTitle;
+        syncActionState();
+      }
+    };
+  }
+
+  // web-src/views/tools/markdown-tool.ts
+  var SCRATCHPAD_TARGET = { path: "scratchpad.md", ref: "worktree" };
+  function createMarkdownTool(text3, initialText, onInput) {
+    return createScratchpadPane(text3, text3.markdown.output, text3.markdown.placeholder, {
+      toolClassName: "tools-pane-markdown",
+      initialText,
+      onInput,
+      render: async (value, output, signal) => {
+        const rendered = await renderMarkdownPreview(value, SCRATCHPAD_TARGET, {
+          syntaxHighlight: true,
+          signal
+        });
+        if (signal.aborted)
+          return;
+        output.replaceChildren(rendered);
+      }
+    });
+  }
+
+  // web-src/views/tools/mermaid-tool.ts
+  function createMermaidTool(text3, initialText, onInput) {
+    let currentText = text3;
+    const viewport = createDiagramViewport({
+      containerClassName: "tools-mermaid-container",
+      contentClassName: "tools-mermaid-canvas"
+    });
+    const zoomIn = createPaneAction("+", text3.mermaid.zoomIn);
+    const zoomOut = createPaneAction("−", text3.mermaid.zoomOut);
+    const zoomReset = createPaneAction("1:1", text3.mermaid.zoomReset);
+    zoomIn.addEventListener("click", () => viewport.zoomIn());
+    zoomOut.addEventListener("click", () => viewport.zoomOut());
+    zoomReset.addEventListener("click", () => viewport.reset());
+    const pane = createScratchpadPane(text3, text3.mermaid.output, text3.mermaid.placeholder, {
+      toolClassName: "tools-pane-mermaid",
+      initialText,
+      onInput,
+      outputActions: [zoomIn, zoomOut, zoomReset],
+      render: async (value, output, signal) => {
+        const mermaid = await loadMermaid();
+        if (signal.aborted)
+          return;
+        if (!mermaid) {
+          pane.setStatus(currentText.mermaid.loadError, "error");
+          return;
+        }
+        const node = document.createElement("div");
+        node.className = "mermaid";
+        node.textContent = value;
+        viewport.content.replaceChildren(node);
+        viewport.reset();
+        output.replaceChildren(viewport.container);
+        try {
+          await mermaid.run({ nodes: [node], suppressErrors: true });
+        } catch {
+          if (signal.aborted)
+            return;
+          pane.setStatus(currentText.mermaid.renderError, "error");
+          return;
+        }
+        if (signal.aborted)
+          return;
+        if (node.querySelector("svg"))
+          pane.setStatus("");
+        else
+          pane.setStatus(currentText.mermaid.renderError, "error");
+      }
+    });
+    const disposePane = pane.dispose;
+    return {
+      ...pane,
+      localizeActions(nextText) {
+        currentText = nextText;
+        zoomIn.title = nextText.mermaid.zoomIn;
+        zoomOut.title = nextText.mermaid.zoomOut;
+        zoomReset.title = nextText.mermaid.zoomReset;
+      },
+      dispose() {
+        disposePane();
+        viewport.dispose();
+      }
+    };
+  }
+
+  // web-src/views/tools/tools-view.ts
+  var SAVE_DEBOUNCE_MS = 800;
+  var SAVE_RETRY_MS = 1500;
+  var SAVE_RETRY_LIMIT = 3;
+  var KEEPALIVE_BODY_LIMIT_BYTES = 64 * 1024;
+  function createToolsView(deps) {
+    let panes = null;
+    let tabs = null;
+    let titleEl = null;
+    let closeBtn = null;
+    let activeTool = DEFAULT_TOOL_ID;
+    let stateLoaded = false;
+    let savedActiveTool = null;
+    const drafts = {};
+    let saveTimer = null;
+    let saveRetryTimer = null;
+    let dirty = false;
+    let saveInFlight = false;
+    let saveController = null;
+    let saveFailed = false;
+    let saveRetries = 0;
+    let loadFailed = false;
+    let disposed = false;
+    let sheetWidth = null;
+    let toolTouched = false;
+    let widthTouched = false;
+    let generation = 0;
+    function text3() {
+      return toolsText(deps.getLanguage());
+    }
+    function getMount() {
+      return deps.$("#tools-sheet");
+    }
+    function getOverlay() {
+      return deps.$("#tools-sheet-overlay");
+    }
+    function isPermanentSaveFailure(status) {
+      return status >= 400 && status < 500;
+    }
+    function syncFailureStatus() {
+      if (!panes)
+        return;
+      const current = text3();
+      const message = loadFailed ? current.loadFailed : saveFailed ? current.saveFailed : null;
+      for (const id of TOOL_IDS)
+        panes[id].setPinnedStatus(message);
+    }
+    function reportSaveFailure() {
+      saveFailed = true;
+      syncFailureStatus();
+    }
+    function clearSaveFailure() {
+      saveRetries = 0;
+      if (!saveFailed)
+        return;
+      saveFailed = false;
+      syncFailureStatus();
+    }
+    function reportLoadFailure() {
+      loadFailed = true;
+      syncFailureStatus();
+    }
+    function save(options = {}) {
+      if (saveTimer) {
+        clearTimeout(saveTimer);
+        saveTimer = null;
+      }
+      if (disposed)
+        return;
+      if (!options.keepalive && saveRetries > SAVE_RETRY_LIMIT)
+        return;
+      const pending = dirty || options.keepalive === true && saveInFlight;
+      if (!pending)
+        return;
+      if (saveInFlight && !options.keepalive)
+        return;
+      if (options.keepalive)
+        saveController?.abort();
+      dirty = false;
+      const body = JSON.stringify({
+        activeTool,
+        drafts,
+        ...sheetWidth === null ? {} : { width: sheetWidth }
+      });
+      const keepalive = options.keepalive === true && new TextEncoder().encode(body).length <= KEEPALIVE_BODY_LIMIT_BYTES;
+      const controller = new AbortController;
+      if (!options.keepalive) {
+        saveInFlight = true;
+        saveController = controller;
+      }
+      deps.trackLoad(fetch("/_state/tools", {
+        method: "PATCH",
+        headers: deps.actionHeaders(),
+        body,
+        keepalive,
+        signal: controller.signal
+      })).then((res) => {
+        if (res.ok) {
+          clearSaveFailure();
+          return;
+        }
+        if (isPermanentSaveFailure(res.status)) {
+          reportSaveFailure();
+          return;
+        }
+        throw new Error(`HTTP ${res.status}`);
+      }).catch(() => {
+        if (disposed)
+          return;
+        dirty = true;
+        saveRetries += 1;
+        if (saveRetries > SAVE_RETRY_LIMIT) {
+          reportSaveFailure();
+          return;
+        }
+        if (options.keepalive || saveRetryTimer)
+          return;
+        saveRetryTimer = setTimeout(() => {
+          saveRetryTimer = null;
+          save();
+        }, SAVE_RETRY_MS);
+      }).finally(() => {
+        if (options.keepalive)
+          return;
+        saveInFlight = false;
+        if (saveController === controller)
+          saveController = null;
+        if (disposed)
+          return;
+        if (dirty && !saveRetryTimer)
+          save();
+      });
+    }
+    function scheduleSave() {
+      dirty = true;
+      saveRetries = 0;
+      if (saveTimer)
+        clearTimeout(saveTimer);
+      saveTimer = setTimeout(() => {
+        saveTimer = null;
+        save();
+      }, SAVE_DEBOUNCE_MS);
+    }
+    function onDraftInput(tool, value) {
+      drafts[tool] = value;
+      toolTouched = true;
+      scheduleSave();
+    }
+    function createPanes(current) {
+      return {
+        markdown: createMarkdownTool(current, drafts.markdown ?? "", (value) => onDraftInput("markdown", value)),
+        mermaid: createMermaidTool(current, drafts.mermaid ?? "", (value) => onDraftInput("mermaid", value)),
+        json: createJsonTool(current, drafts.json ?? "", (value) => onDraftInput("json", value))
+      };
+    }
+    function setActiveTool(tool, notify) {
+      activeTool = tool;
+      if (!panes || !tabs)
+        return;
+      for (const id of TOOL_IDS) {
+        tabs[id].classList.toggle("active", id === tool);
+        tabs[id].setAttribute("aria-pressed", String(id === tool));
+        panes[id].el.hidden = id !== tool;
+      }
+      panes[tool].refresh();
+      panes[tool].focus();
+      if (notify)
+        deps.onToolChange?.(tool);
+      if (savedActiveTool === tool)
+        return;
+      savedActiveTool = tool;
+      scheduleSave();
+    }
+    function applySheetWidth(host, width) {
+      const clamped = Math.round(Math.max(MIN_TOOLS_SHEET_WIDTH, Math.min(MAX_TOOLS_SHEET_WIDTH, width)));
+      sheetWidth = clamped;
+      host.style.setProperty("--tools-sheet-width", `${clamped}px`);
+    }
+    function mount(host) {
+      if (panes)
+        return;
+      const current = text3();
+      host.replaceChildren();
+      const sheetResizer = document.createElement("div");
+      sheetResizer.className = "tools-sheet-resizer";
+      sheetResizer.role = "separator";
+      sheetResizer.tabIndex = 0;
+      sheetResizer.setAttribute("aria-orientation", "vertical");
+      sheetResizer.setAttribute("aria-label", current.resizeSheet);
+      attachDragResizer({
+        handle: sheetResizer,
+        getSize: () => host.getBoundingClientRect().width,
+        applySize: (width) => {
+          widthTouched = true;
+          applySheetWidth(host, width);
+        },
+        direction: -1,
+        onEnd: scheduleSave,
+        activeClassTarget: host,
+        activeClassName: "tools-sheet-resizing"
+      });
+      const header = document.createElement("header");
+      header.className = "tools-header";
+      titleEl = document.createElement("h1");
+      titleEl.textContent = current.title;
+      const tabList = document.createElement("div");
+      tabList.className = "seg tools-tabs";
+      tabList.role = "group";
+      tabList.setAttribute("aria-label", current.title);
+      closeBtn = document.createElement("button");
+      closeBtn.type = "button";
+      closeBtn.className = "tools-close";
+      closeBtn.textContent = "×";
+      closeBtn.title = current.close;
+      closeBtn.setAttribute("aria-label", current.close);
+      closeBtn.addEventListener("click", (event) => {
+        event.preventDefault();
+        deps.onCloseRequest?.();
+      });
+      header.append(titleEl, tabList, closeBtn);
+      panes = createPanes(current);
+      tabs = {};
+      const body = document.createElement("div");
+      body.className = "tools-body";
+      for (const id of TOOL_IDS) {
+        const tab = document.createElement("button");
+        tab.type = "button";
+        tab.textContent = current.tabs[id];
+        tab.addEventListener("click", () => {
+          toolTouched = true;
+          setActiveTool(id, true);
+        });
+        tabs[id] = tab;
+        tabList.appendChild(tab);
+        panes[id].el.hidden = id !== activeTool;
+        tab.classList.toggle("active", id === activeTool);
+        body.appendChild(panes[id].el);
+      }
+      host.append(sheetResizer, header, body);
+    }
+    async function loadState(myGen) {
+      if (stateLoaded)
+        return;
+      try {
+        const res = await deps.trackLoad(fetch("/_state/tools"));
+        if (myGen !== generation)
+          return;
+        if (!res.ok) {
+          reportLoadFailure();
+          return;
+        }
+        const data = await res.json();
+        if (myGen !== generation)
+          return;
+        stateLoaded = true;
+        if (loadFailed) {
+          loadFailed = false;
+          syncFailureStatus();
+        }
+        if (!toolTouched)
+          savedActiveTool = data.activeTool ?? null;
+        const host = getMount();
+        if (host && !widthTouched && typeof data.width === "number")
+          applySheetWidth(host, data.width);
+        for (const id of TOOL_IDS) {
+          const draft = data.drafts?.[id];
+          if (typeof draft !== "string")
+            continue;
+          if (id in drafts)
+            continue;
+          drafts[id] = draft;
+          panes?.[id].setText(draft);
+        }
+      } catch {
+        if (myGen === generation)
+          reportLoadFailure();
+      }
+    }
+    function isOpen() {
+      const host = getMount();
+      return host ? !host.hidden : false;
+    }
+    async function open(tool) {
+      const host = getMount();
+      if (!host)
+        return;
+      const myGen = ++generation;
+      mount(host);
+      host.hidden = false;
+      host.setAttribute("aria-hidden", "false");
+      host.removeAttribute("inert");
+      const overlay = getOverlay();
+      if (overlay) {
+        overlay.hidden = false;
+        overlay.setAttribute("aria-hidden", "false");
+      }
+      document.body.classList.add("tools-sheet-open");
+      await loadState(myGen);
+      if (myGen !== generation || !isOpen())
+        return;
+      setActiveTool(tool ?? savedActiveTool ?? DEFAULT_TOOL_ID, !tool);
+    }
+    function close() {
+      const host = getMount();
+      if (!host)
+        return;
+      host.hidden = true;
+      host.setAttribute("aria-hidden", "true");
+      host.setAttribute("inert", "");
+      const overlay = getOverlay();
+      if (overlay) {
+        overlay.hidden = true;
+        overlay.setAttribute("aria-hidden", "true");
+      }
+      document.body.classList.remove("tools-sheet-open");
+      generation += 1;
+      save();
+    }
+    function localize() {
+      if (!panes || !tabs)
+        return;
+      const current = text3();
+      if (titleEl)
+        titleEl.textContent = current.title;
+      if (closeBtn) {
+        closeBtn.title = current.close;
+        closeBtn.setAttribute("aria-label", current.close);
+      }
+      for (const id of TOOL_IDS)
+        tabs[id].textContent = current.tabs[id];
+      panes.markdown.localize(current, current.markdown.output, current.markdown.placeholder);
+      panes.mermaid.localize(current, current.mermaid.output, current.mermaid.placeholder);
+      panes.json.localize(current, current.json.output, current.json.placeholder);
+      for (const id of TOOL_IDS)
+        panes[id].localizeActions?.(current);
+      panes[activeTool].refresh();
+      syncFailureStatus();
+    }
+    const onBeforeUnload = () => {
+      if (dirty || saveInFlight)
+        save({ keepalive: true });
+    };
+    window.addEventListener("beforeunload", onBeforeUnload);
+    return {
+      open,
+      close,
+      isOpen,
+      getActiveTool: () => activeTool,
+      localize,
+      dispose() {
+        disposed = true;
+        generation += 1;
+        saveController?.abort();
+        saveController = null;
+        window.removeEventListener("beforeunload", onBeforeUnload);
+        if (saveTimer)
+          clearTimeout(saveTimer);
+        saveTimer = null;
+        if (saveRetryTimer)
+          clearTimeout(saveRetryTimer);
+        saveRetryTimer = null;
+        if (!panes)
+          return;
+        for (const id of TOOL_IDS)
+          panes[id].dispose();
+      }
+    };
+  }
+
   // web-src/app.ts
   window.GdpExpandLogic = GdpExpandLogic;
   (() => {
@@ -37029,6 +38133,7 @@ code-viewer query agent-help`
           history: "History",
           journal: "Work Log",
           database: "Datastores",
+          tools: "Tools",
           help: "Help"
         },
         global: {
@@ -37322,6 +38427,7 @@ code-viewer query agent-help`
           history: "履歴",
           journal: "ワークログ",
           database: "データストア",
+          tools: "ツール",
           help: "ヘルプ"
         },
         global: {
@@ -37636,11 +38742,6 @@ code-viewer query agent-help`
         if (route && text3.nav[route])
           link2.textContent = text3.nav[route];
       });
-      const helpLink = document.querySelector(".global-icon-link[data-route='help']");
-      if (helpLink) {
-        helpLink.title = text3.nav.help;
-        helpLink.setAttribute("aria-label", text3.nav.help);
-      }
       const repoWebLink = document.querySelector("#repo-web-link");
       if (repoWebLink) {
         repoWebLink.title = text3.global.repoWebLink;
@@ -37676,6 +38777,12 @@ code-viewer query agent-help`
         doctorBtn.setAttribute("aria-label", doctorTitle);
       }
       document.querySelector("#doctor-sheet")?.setAttribute("aria-label", doctorTitle);
+      const toolsChrome = toolsText(STATE.language);
+      const toolsBtn = document.querySelector("#tools-btn");
+      if (toolsBtn)
+        toolsBtn.title = toolsChrome.open;
+      document.querySelector("#tools-sheet")?.setAttribute("aria-label", toolsChrome.title);
+      relocalizeTools?.();
       const copyAiContext = document.querySelector("#copy-ai-context");
       if (copyAiContext) {
         copyAiContext.title = text3.global.copyAiContext;
@@ -37837,6 +38944,7 @@ code-viewer query agent-help`
     }
     let relocalizeHistory = null;
     let relocalizeJournal = null;
+    let relocalizeTools = null;
     let relocalizeDatabase = null;
     let QUICK_HELP = null;
     function setViewerLanguage(language, persist = true) {
@@ -38297,8 +39405,11 @@ code-viewer query agent-help`
     function withAnnotationSessionParam(rawUrl) {
       return ANNOTATIONS_UI ? ANNOTATIONS_UI.withSessionParam(rawUrl) : rawUrl;
     }
+    function withOverlayState(url) {
+      return withToolsOverlay(withDoctorOverlay(url, parseDoctorOverlay(window.location.pathname, window.location.search)), parseToolsOverlay(window.location.search));
+    }
     function urlForRoute(route) {
-      return withDoctorOverlay(withAnnotationSessionParam(buildRoute(route)), parseDoctorOverlay(window.location.pathname, window.location.search));
+      return withOverlayState(withAnnotationSessionParam(buildRoute(route)));
     }
     function historyStateForRoute(route) {
       return route.screen === "file" ? {
@@ -38309,8 +39420,7 @@ code-viewer query agent-help`
       } : { view: route.screen };
     }
     function replaceUrlWithCurrentRoute() {
-      const base2 = withAnnotationSessionParam(buildRoute(STATE.route));
-      const url = withDoctorOverlay(base2, parseDoctorOverlay(window.location.pathname, window.location.search));
+      const url = urlForRoute(STATE.route);
       const current = window.location.pathname + window.location.search;
       if (url !== current) {
         history.replaceState(historyStateForRoute(STATE.route), "", url + window.location.hash);
@@ -38458,51 +39568,57 @@ code-viewer query agent-help`
       applyHideTests();
     }
     function syncHeaderMenu() {
-      document.querySelectorAll(".app-menu-item, .global-icon-link").forEach((link2) => {
+      const toolsBtn = document.querySelector("#tools-btn");
+      if (toolsBtn) {
+        const open = parseToolsOverlay(window.location.search) !== null;
+        toolsBtn.classList.toggle("active", open);
+        toolsBtn.setAttribute("aria-pressed", String(open));
+      }
+      document.querySelectorAll("a.app-menu-item, a.global-icon-link").forEach((link2) => {
         const fileRouteOwner = STATE.route.screen === "file" && (STATE.route.view === "blob" || STATE.route.view === "blame" || STATE.route.view === "history") ? "repo" : "diff";
         const active = link2.dataset.route === STATE.route.screen || STATE.route.screen === "file" && link2.dataset.route === fileRouteOwner;
         link2.classList.toggle("active", active);
         link2.setAttribute("aria-current", active ? "page" : "false");
         if (link2.dataset.route === "repo") {
-          link2.href = buildRoute({
+          link2.href = withOverlayState(buildRoute({
             screen: "repo",
             ref: STATE.repoRef || "worktree",
             path: "",
             range: currentRange()
-          });
+          }));
         }
         if (link2.dataset.route === "diff") {
-          link2.href = buildRoute({
+          link2.href = withOverlayState(buildRoute({
             screen: "diff",
             range: preHistoryRange ?? currentRange()
-          });
+          }));
         }
         if (link2.dataset.route === "history") {
-          link2.href = buildRoute({
+          link2.href = withOverlayState(buildRoute({
             screen: "history",
             ref: "HEAD",
             range: currentRange()
-          });
+          }));
         }
         if (link2.dataset.route === "journal") {
-          link2.href = buildRoute({
+          link2.href = withOverlayState(buildRoute({
             screen: "journal",
             range: currentRange()
-          });
+          }));
         }
         if (link2.dataset.route === "database") {
-          link2.href = buildRoute({
+          link2.href = withOverlayState(buildRoute({
             screen: "database",
             range: currentRange()
-          });
+          }));
         }
         if (link2.dataset.route === "help") {
-          link2.href = buildRoute({
+          link2.href = withOverlayState(buildRoute({
             screen: "help",
             lang: STATE.route.screen === "help" ? helpLanguageFromRoute(STATE.route) : STATE.language,
             section: helpSectionFromRoute(STATE.route),
             range: currentRange()
-          });
+          }));
         }
       });
     }
@@ -38712,10 +39828,6 @@ code-viewer query agent-help`
       if (quickHelpIcon) {
         quickHelpIcon.innerHTML = iconSvg("octicon-question", QUESTION_16_PATH);
       }
-      const helpLinkIcon = document.querySelector(".global-icon-link[data-route='help'] .goi-icon");
-      if (helpLinkIcon) {
-        helpLinkIcon.innerHTML = iconSvg("octicon-book", BOOK_16_PATH);
-      }
       const branchIcon = document.querySelector("#project-branch .goi-icon");
       if (branchIcon) {
         branchIcon.innerHTML = iconSvg("octicon-git-branch", GIT_BRANCH_16_PATH);
@@ -38757,6 +39869,10 @@ code-viewer query agent-help`
       event.preventDefault();
       toggleDoctorSheet();
     });
+    $("#tools-btn")?.addEventListener("click", (event) => {
+      event.preventDefault();
+      toggleToolsSheet();
+    });
     let copyAiContextFeedbackTimer = null;
     $("#copy-ai-context")?.addEventListener("click", async (event) => {
       const button = event.currentTarget;
@@ -39440,6 +40556,7 @@ code-viewer query agent-help`
         load();
       syncLineRefPill();
       syncDoctorSheetFromUrl();
+      syncToolsSheetFromUrl();
     });
     function syncRefInputs() {
       const fi = $("#ref-from"), ti = $("#ref-to");
@@ -39615,6 +40732,57 @@ code-viewer query agent-help`
       event.preventDefault();
       closeDoctorSheet();
     });
+    const TOOLS_VIEW = createToolsView({
+      $: (sel) => document.querySelector(sel),
+      trackLoad,
+      getLanguage: () => STATE.language,
+      actionHeaders,
+      onCloseRequest: () => closeToolsSheet(),
+      onToolChange: (tool) => updateUrlForToolsOverlay(tool)
+    });
+    relocalizeTools = () => TOOLS_VIEW.localize();
+    function openToolsOverlay() {
+      return parseToolsOverlay(window.location.search);
+    }
+    function updateUrlForToolsOverlay(tool) {
+      const current = window.location.pathname + window.location.search;
+      const next = withToolsOverlay(current, tool);
+      if (next !== current) {
+        history.replaceState(history.state, "", next + window.location.hash);
+      }
+      syncHeaderMenu();
+    }
+    function openToolsSheet(tool) {
+      updateUrlForToolsOverlay(tool ?? TOOLS_VIEW.getActiveTool());
+      TOOLS_VIEW.open(tool);
+    }
+    function closeToolsSheet() {
+      TOOLS_VIEW.close();
+      updateUrlForToolsOverlay(null);
+    }
+    function toggleToolsSheet() {
+      if (openToolsOverlay() || TOOLS_VIEW.isOpen())
+        closeToolsSheet();
+      else
+        openToolsSheet();
+    }
+    function syncToolsSheetFromUrl() {
+      const tool = openToolsOverlay();
+      const open = TOOLS_VIEW.isOpen();
+      if (tool && (!open || TOOLS_VIEW.getActiveTool() !== tool))
+        TOOLS_VIEW.open(tool);
+      else if (!tool && open)
+        TOOLS_VIEW.close();
+    }
+    document.getElementById("tools-sheet-overlay")?.addEventListener("click", () => closeToolsSheet());
+    document.addEventListener("keydown", (event) => {
+      if (event.key !== "Escape")
+        return;
+      if (!TOOLS_VIEW.isOpen())
+        return;
+      event.preventDefault();
+      closeToolsSheet();
+    });
     JOURNAL_VIEW = createJournalView({
       getRoute: () => STATE.route,
       setRoute,
@@ -39692,6 +40860,7 @@ code-viewer query agent-help`
       syncHeaderMenu();
       syncLineRefPill();
       syncDoctorSheetFromUrl();
+      syncToolsSheetFromUrl();
       if (isSameBlobFileRoute(previousRoute, STATE.route) && routeBlobPreview(previousRoute) !== routeBlobPreview(STATE.route) && switchSourceTab(routeBlobPreview(STATE.route) ? "preview" : "code", {
         updateRoute: false
       })) {
@@ -39752,7 +40921,7 @@ code-viewer query agent-help`
     }
     window.addEventListener("popstate", applyRouteFromLocation);
     window.addEventListener("pagehide", () => flushViewStatePatch(true));
-    document.querySelectorAll(".app-menu-item, .global-icon-link").forEach((link2) => {
+    document.querySelectorAll("a.app-menu-item, a.global-icon-link").forEach((link2) => {
       if (link2.target === "_blank")
         return;
       link2.addEventListener("click", (e2) => {