@ai-setting/roy-plugin-task-show 1.2.0 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ai-setting/roy-plugin-task-show",
-  "version": "1.2.0",
+  "version": "2.0.0",
   "description": "roy-agent plugin: visualize task solving process via tool call flow on a local web service",
   "type": "module",
   "main": "dist/index.js",

package/plugin.json

@@ -1,8 +1,8 @@
 {
   "name": "@ai-setting/roy-plugin-task-show",
-  "version": "1.2.0",
+  "version": "2.0.0",
   "type": "tool-plugin",
-  "description": "v1.2.0: CSS context & packaged release hotfix. The plugin's public assets (notably `public/style.css`) and runtime adapters now correctly resolve relative to the installed package directory even when consumed via the published npm tarball. The session-scoped `TaskSessionStore` now preserves the full host session context (parent-child task links, plugin-handle id, env scope) across render cycles — previously the session was collapsed to its `sessionId` on first load and never refreshed, so the home page lost the 「session ancestors」 chain and external tasks from outside the current session silently disappeared from the tree. Adds `src/task-metadata.ts` as the single source of truth for the public `Task` shape exposed by `/api/tasks` + `/api/tasks/:id`, including the v1.0.0+ `processDescription` field, and re-exports it through the CLI adapters (`cli-tasks-adapter.ts` + `cli-tasks-tree-adapter.ts`) so the home page tree + the per-task page render against the same metadata contract. Bundles 244-line regression test (`test/context-and-packed-release.test.ts`) that boots the plugin from the **npm-pack** directory (not the repo working tree), spawns `roy-agent tasks get <id> --json`, and asserts (a) `public/style.css` is present and ≥ 64 lines, (b) the `/api/events` SSE endpoint survives a reload, and (c) `task.session` survives a render cycle. v1.1.0: Full Server-Sent Events realtime subscription across 3 event classes (task.created / operation.updated / tool.called) on both the home page and the per-task /task/<id> page. The per-task pipeline now subscribes to /api/events and patches the DOM in place on operation.updated — no more 5s-poll delay before the user sees a new milestone. The 'Task lifecycle pipeline' header badge is replaced by a 5-state SSE-aware badge (stale / connecting / live / reconnecting / error) so the user can tell at a glance whether real-time updates are flowing, the connection dropped, or 3+ consecutive errors triggered the polling fallback. Legacy boolean `stale` cache-TTL pill and `tool.recorded` event name are preserved for back-compat with v0.9.x / v1.0.0 clients. v1.0.0: First stable release. Replaces the v0.9.x fixture-based verify scripts (which built fake TaskOperationsEnvelope and never invoked the real `roy-agent` CLI, masking regressions in the public-schema `processDescription` field) with a real-CLI scenario test + verify (`test/process-description-real-scenario.test.ts` + `scripts/verify-v100-real-scenario.ts`) that spawns `roy-agent tasks get <id> --operations --json` via `defaultRunner` and asserts the API response carries `processDescription` end-to-end. The 0.9.9 processDescription fix is preserved verbatim — this release only swaps the verify surface. Visualize the tool call chain of a task on a local web service with real-time SSE updates. v0.9.9: Task lifecycle pipeline on /task/<id> now exposes BOTH the milestone badge AND the 「过程描述」 column at a glance — the server-side `/api/tasks/:id/operations` endpoint exposes `processDescription` on every operation (no longer stripped from the public schema), the client-side `renderPipelineHtml` mirrors the server's `.op-desc-block` + `.op-proc-block` block layout so SSR ↔ CSR stay in sync, and a long-standing CSS right-side text-truncation bug in the pipeline timeline (long CJK titles overflowing the panel edge) is fixed via `min-width: 0` on `.op-row1` + `overflow-wrap: anywhere` on `.op-title`. v0.9.0: Session-scoped home page (only show tasks created after plugin load + their external ancestors), with per-row 「显示全部栏位」 toggle and lazy-loaded operations timeline; per-task Mermaid labels now correctly render CJK / mixed-Latin / emoji text (encoded as \\uXXXX before emission, decoded by the browser); detail page layout reordered to lifecycle → pipeline → stats → toolcalls → rawjson. v0.5.0+: page refreshes stream over GET /api/events (Server-Sent Events). Subscribes to tool:before.execute, tool:after.execute, task:before.create, task:after.create, task:after.complete (preferred, 2026-07-10+), and task:after.update (legacy fallback). v0.6.11: Mermaid re-rendering is delegated to a self-contained controller (public/mermaid-renderer.js) that prevents the SVG→raw-source regression on async updates and surfaces recoverable .mermaid-error states. v0.6.12: Task lifecycle pipeline (operations timeline) server now emits data-task-id on the pipeline section; client preserves it on swap, so the page actually fetches /api/tasks/<id>/operations and renders the 7-op timeline (previously silently bailed). v0.7.0: Home page redesigned as a hierarchical task tree (driven by `roy-agent tasks tree --json`); new /api/tasks/tree endpoint with status / priority / type / root-id filters, expand/collapse UI, search, and live 30s polling. v0.8.0: per-task page Mermaid area now renders the hierarchical 'Task lifecycle + tools' view — each operation record owns a subgraph that nests its tool calls, with click callbacks (`window.__toolClick`) that scroll-into-view + highlight + auto-expand the matching row in the tool-call table below. Operation record descriptions (`description` + `processDescription`) are now always rendered inline (no `<details>` collapse) so the user sees the lifecycle state at a glance; a fallback `<details>` kicks in only for descriptions longer than 600 chars. v0.8.1: hotfix for two pre-existing bugs in v0.8.0 (browser smoke test surfaced after merge). (a) Mermaid click directives were emitted as `click t1 __toolClick(1)` (missing `call` keyword) — Mermaid 10's parser rejects this with `got 'PS'`. Fixed to `click t1 call __toolClick(1)` (the v10 grammar requires `call` to invoke a callback with arguments). (b) `buildMermaidSource` lived inside the `attachTaskPageTimeline` IIFE but was also called from a listener in the `attachToolClickBridge` IIFE — sibling IIFEs cannot see each other's locals, so the listener threw `ReferenceError: buildMermaidSource is not defined` and the Mermaid diagram silently failed to re-render after `task-show:lifecycle-ops-loaded`. Fixed by hoisting the function (and its three helpers) to script top-level so both IIFEs can see it via the script-wide closure; the function is also exposed on `window.buildMermaidSource` for tests + tooling. v0.8.3: tree-display fix (Task #2426). The home page used to look like a flat list of root tasks because `autoExpandFirstLevels(..., 2)` only opened the first 2 levels — 30/47 roots were leaf nodes and the remaining 17 collapsed to one level so grandchildren were never visible. Default expand depth is now 3 (root + child + grandchild + great-grandchild are visible on first paint), the summary line now shows per-depth count pills (root / child / grandchild / great-grandchild / level-N), each `tree-row` carries a `data-depth` attribute so CSS can paint coloured left rails per level, and the duplicated 'Live tool-call sessions (legacy view)' panel that made the page look like both a flat table AND a tree is now hidden behind `#legacy-sessions[hidden]` (kept for future debug-toggle restoration). v0.8.10: bug-fix release (Task #2537 + Task #2534). (a) Heap-bounded plugin caches: OperationsCache and TasksTreeCache now enforce a hard maxEntries cap (default 256 / 64). Oldest stale entries are evicted before inserting a new one, so long-lived roy-agent sessions (BackgroundTaskManager + MemorySessionStore) no longer leak Map entries through the plugin's per-task caches — see Task #2537 for the heap-unbounded-state RED→GREEN repro. (b) Mermaid CJK font-family: server.ts renderTaskPage now configures mermaid.initialize({ themeVariables: { fontFamily: '\"PingFang SC\", \"Microsoft YaHei\", \"Noto Sans CJK SC\", \"Source Han Sans CN\", \"WenQuanYi Micro Hei\", sans-serif' } }) so Chinese node labels render correctly in browsers that have at least one of those fonts installed (see Task #2534).",
+  "description": "v2.0.0: Major visual overhaul of the per-task detail page — VS Code-style tool-call browser powered by Monaco Editor + LCS-based diff + project file tree with mermaid-driven navigation. The detail page now renders a 2-column layout: a sticky left sidebar with the project's git-tracked file tree (chevron-toggle directories, `is-affected` highlight for files touched by the current task), and a main column with the existing Mermaid + stats + toolcalls table + a new dedicated `<section id=\"tool-call-detail-panel\">` that hosts the LCS diff body + Monaco container for the currently-selected tool call. The legacy inline `<details class=\"diff-panel\">` (naive split-and-filter, prone to mis-tagging context lines) is replaced by `<ol class=\"diff-body\">` with proper added/removed/context markers driven by a real LCS dynamic-programming table (`computeDiff()` in `src/tool-call-detail.ts`). Tool calls with a file path get a Monaco Editor placeholder (`<div class=\"monaco-editor\" data-file-path=\"...\" data-language=\"...\">`) which the client-side `public/tool-call-detail.js` lazy-loads from `cdn.jsdelivr.net/npm/monaco-editor@0.45.0` the first time the user clicks a tool row. The Mermaid `__toolClick(toolId)` callback now drives THREE things: (a) the existing row scroll + highlight (preserved from v1.x), (b) the dedicated detail panel re-renders with the matching call, (c) the file-tree sidebar highlights the corresponding file (when `data-file-path` is present). New `GET /api/task/:id/file-tree` endpoint serves the git-tracked file list (`{ files: string[] }`) with a 30-second in-memory TTL + 8-entry FIFO bound. New modules: `src/file-tree.ts` (pure data layer: `buildFileTree / extractAffectedPaths / findNodeByPath / collectAllPaths / gitLsFiles / parseLsFiles`), `src/tool-call-detail.ts` (SSR + LCS diff + HTML escaping), `public/file-tree.js` (vanilla JS hydrator with chevron toggle + keyboard navigation + scrollIntoView), `public/tool-call-detail.js` (Monaco AMD loader + `__toolClick` wrapper + file-content fetch). New tests: `test/file-tree.test.ts` (21 cases — empty/single/nested/dedup/sort/depth/parseLsFiles/gitLsFiles), `test/tool-call-detail.test.ts` (22 cases — LCS diff edges, HTML escape, path aliases, summary stats), `test/tool-call-detail-server-integration.test.ts` (7 cases — SSR HTML contracts + endpoint), `test/tool-call-detail-jsdom.test.ts` (7 cases — client-side hydrators). v1.2.0: CSS context & packaged release hotfix. The plugin's public assets (notably `public/style.css`) and runtime adapters now correctly resolve relative to the installed package directory even when consumed via the published npm tarball. The session-scoped `TaskSessionStore` now preserves the full host session context (parent-child task links, plugin-handle id, env scope) across render cycles — previously the session was collapsed to its `sessionId` on first load and never refreshed, so the home page lost the 「session ancestors」 chain and external tasks from outside the current session silently disappeared from the tree. Adds `src/task-metadata.ts` as the single source of truth for the public `Task` shape exposed by `/api/tasks` + `/api/tasks/:id`, including the v1.0.0+ `processDescription` field, and re-exports it through the CLI adapters (`cli-tasks-adapter.ts` + `cli-tasks-tree-adapter.ts`) so the home page tree + the per-task page render against the same metadata contract. Bundles 244-line regression test (`test/context-and-packed-release.test.ts`) that boots the plugin from the **npm-pack** directory (not the repo working tree), spawns `roy-agent tasks get <id> --json`, and asserts (a) `public/style.css` is present and ≥ 64 lines, (b) the `/api/events` SSE endpoint survives a reload, and (c) `task.session` survives a render cycle. v1.1.0: Full Server-Sent Events realtime subscription across 3 event classes (task.created / operation.updated / tool.called) on both the home page and the per-task /task/<id> page. The per-task pipeline now subscribes to /api/events and patches the DOM in place on operation.updated — no more 5s-poll delay before the user sees a new milestone. The 'Task lifecycle pipeline' header badge is replaced by a 5-state SSE-aware badge (stale / connecting / live / reconnecting / error) so the user can tell at a glance whether real-time updates are flowing, the connection dropped, or 3+ consecutive errors triggered the polling fallback. Legacy boolean `stale` cache-TTL pill and `tool.recorded` event name are preserved for back-compat with v0.9.x / v1.0.0 clients. v1.0.0: First stable release. Replaces the v0.9.x fixture-based verify scripts (which built fake TaskOperationsEnvelope and never invoked the real `roy-agent` CLI, masking regressions in the public-schema `processDescription` field) with a real-CLI scenario test + verify (`test/process-description-real-scenario.test.ts` + `scripts/verify-v100-real-scenario.ts`) that spawns `roy-agent tasks get <id> --operations --json` via `defaultRunner` and asserts the API response carries `processDescription` end-to-end. The 0.9.9 processDescription fix is preserved verbatim — this release only swaps the verify surface. Visualize the tool call chain of a task on a local web service with real-time SSE updates. v0.9.9: Task lifecycle pipeline on /task/<id> now exposes BOTH the milestone badge AND the 「过程描述」 column at a glance — the server-side `/api/tasks/:id/operations` endpoint exposes `processDescription` on every operation (no longer stripped from the public schema), the client-side `renderPipelineHtml` mirrors the server's `.op-desc-block` + `.op-proc-block` block layout so SSR ↔ CSR stay in sync, and a long-standing CSS right-side text-truncation bug in the pipeline timeline (long CJK titles overflowing the panel edge) is fixed via `min-width: 0` on `.op-row1` + `overflow-wrap: anywhere` on `.op-title`. v0.9.0: Session-scoped home page (only show tasks created after plugin load + their external ancestors), with per-row 「显示全部栏位」 toggle and lazy-loaded operations timeline; per-task Mermaid labels now correctly render CJK / mixed-Latin / emoji text (encoded as \\uXXXX before emission, decoded by the browser); detail page layout reordered to lifecycle → pipeline → stats → toolcalls → rawjson. v0.5.0+: page refreshes stream over GET /api/events (Server-Sent Events). Subscribes to tool:before.execute, tool:after.execute, task:before.create, task:after.create, task:after.complete (preferred, 2026-07-10+), and task:after.update (legacy fallback). v0.6.11: Mermaid re-rendering is delegated to a self-contained controller (public/mermaid-renderer.js) that prevents the SVG→raw-source regression on async updates and surfaces recoverable .mermaid-error states. v0.6.12: Task lifecycle pipeline (operations timeline) server now emits data-task-id on the pipeline section; client preserves it on swap, so the page actually fetches /api/tasks/<id>/operations and renders the 7-op timeline (previously silently bailed). v0.7.0: Home page redesigned as a hierarchical task tree (driven by `roy-agent tasks tree --json`); new /api/tasks/tree endpoint with status / priority / type / root-id filters, expand/collapse UI, search, and live 30s polling. v0.8.0: per-task page Mermaid area now renders the hierarchical 'Task lifecycle + tools' view — each operation record owns a subgraph that nests its tool calls, with click callbacks (`window.__toolClick`) that scroll-into-view + highlight + auto-expand the matching row in the tool-call table below. Operation record descriptions (`description` + `processDescription`) are now always rendered inline (no `<details>` collapse) so the user sees the lifecycle state at a glance; a fallback `<details>` kicks in only for descriptions longer than 600 chars. v0.8.1: hotfix for two pre-existing bugs in v0.8.0 (browser smoke test surfaced after merge). (a) Mermaid click directives were emitted as `click t1 __toolClick(1)` (missing `call` keyword) — Mermaid 10's parser rejects this with `got 'PS'`. Fixed to `click t1 call __toolClick(1)` (the v10 grammar requires `call` to invoke a callback with arguments). (b) `buildMermaidSource` lived inside the `attachTaskPageTimeline` IIFE but was also called from a listener in the `attachToolClickBridge` IIFE — sibling IIFEs cannot see each other's locals, so the listener threw `ReferenceError: buildMermaidSource is not defined` and the Mermaid diagram silently failed to re-render after `task-show:lifecycle-ops-loaded`. Fixed by hoisting the function (and its three helpers) to script top-level so both IIFEs can see it via the script-wide closure; the function is also exposed on `window.buildMermaidSource` for tests + tooling. v0.8.3: tree-display fix (Task #2426). The home page used to look like a flat list of root tasks because `autoExpandFirstLevels(..., 2)` only opened the first 2 levels — 30/47 roots were leaf nodes and the remaining 17 collapsed to one level so grandchildren were never visible. Default expand depth is now 3 (root + child + grandchild + great-grandchild are visible on first paint), the summary line now shows per-depth count pills (root / child / grandchild / great-grandchild / level-N), each `tree-row` carries a `data-depth` attribute so CSS can paint coloured left rails per level, and the duplicated 'Live tool-call sessions (legacy view)' panel that made the page look like both a flat table AND a tree is now hidden behind `#legacy-sessions[hidden]` (kept for future debug-toggle restoration). v0.8.10: bug-fix release (Task #2537 + Task #2534). (a) Heap-bounded plugin caches: OperationsCache and TasksTreeCache now enforce a hard maxEntries cap (default 256 / 64). Oldest stale entries are evicted before inserting a new one, so long-lived roy-agent sessions (BackgroundTaskManager + MemorySessionStore) no longer leak Map entries through the plugin's per-task caches — see Task #2537 for the heap-unbounded-state RED→GREEN repro. (b) Mermaid CJK font-family: server.ts renderTaskPage now configures mermaid.initialize({ themeVariables: { fontFamily: '\"PingFang SC\", \"Microsoft YaHei\", \"Noto Sans CJK SC\", \"Source Han Sans CN\", \"WenQuanYi Micro Hei\", sans-serif' } }) so Chinese node labels render correctly in browsers that have at least one of those fonts installed (see Task #2534).",
   "main": "dist/index.js",
   "hooks": [
     {

package/public/file-tree.js

@@ -0,0 +1,210 @@
+/* v2.0.0: file-tree sidebar hydrator.
+ *
+ * Loads the project file list from the data-files JSON attribute on the
+ * SSR-rendered `<ul id="file-tree">` and wires up:
+ *   - chevron toggle (▶ / ▼) for directories
+ *   - "expand all / collapse all" controls
+ *   - click-to-highlight a file node (calls window.setActiveToolCallFile)
+ *   - scrolling a node into view when window.__toolClick is fired
+ *
+ * Designed to be loaded AFTER app.js (so it can hook __toolClick) but
+ * BEFORE tool-call-detail.js (so that hydrator can call our
+ * setActiveToolCallFile when a Mermaid node is clicked).
+ *
+ * No dependencies — pure vanilla JS, no module loader, no JSX.
+ */
+
+(function attachFileTreeHydrator() {
+  const SIDEBAR_SELECTOR = "#file-tree";
+
+  // -----------------------------------------------------------------------
+  // State
+  // -----------------------------------------------------------------------
+  /** @type {HTMLElement|null} */
+  let root = null;
+  /** @type {Set<string>} */
+  let affectedSet = new Set();
+  /** @type {string|null} */
+  let activePath = null;
+
+  // -----------------------------------------------------------------------
+  // Helpers
+  // -----------------------------------------------------------------------
+
+  /**
+   * Toggle visibility of a directory's children.
+   * @param {HTMLElement} li
+   */
+  function toggleDir(li) {
+    const isOpen = li.getAttribute("aria-expanded") === "true";
+    const next = !isOpen;
+    li.setAttribute("aria-expanded", String(next));
+    const chev = li.querySelector(".file-tree-chevron");
+    if (chev) chev.textContent = next ? "▼" : "▶";
+    // Update descendant visibility by toggling the `data-collapsed` flag on
+    // every sibling immediately under this directory.
+    const depth = Number(li.getAttribute("data-depth") || "0");
+    let sibling = li.nextElementSibling;
+    while (sibling) {
+      const sDepth = Number(sibling.getAttribute("data-depth") || "0");
+      if (sDepth <= depth) break;
+      if (!next) {
+        sibling.setAttribute("data-collapsed", "true");
+      } else {
+        sibling.removeAttribute("data-collapsed");
+      }
+      sibling = sibling.nextElementSibling;
+    }
+  }
+
+  /**
+   * Set the active (highlighted) file path. Called by the tool-call
+   * detail hydrator when the user clicks a Mermaid tool node.
+   * @param {string|null} path
+   */
+  function setActive(path) {
+    if (!root) return;
+    if (activePath) {
+      const prev = root.querySelector(`[data-path="${cssEscape(activePath)}"]`);
+      if (prev) prev.classList.remove("is-active");
+    }
+    activePath = path;
+    if (path) {
+      const next = root.querySelector(`[data-path="${cssEscape(path)}"]`);
+      if (next) {
+        next.classList.add("is-active");
+        // Expand parent directories so the active node is visible.
+        expandAncestors(next);
+        // Scroll into view (block: 'center') — but only if it's not
+        // already on-screen so we don't fight the user mid-scroll.
+        try {
+          next.scrollIntoView({ behavior: "smooth", block: "center" });
+        } catch {
+          try {
+            next.scrollIntoView();
+          } catch (_) {
+            /* noop */
+          }
+        }
+      }
+    }
+  }
+
+  /**
+   * Walk up the DOM expanding every ancestor directory so the given
+   * node becomes visible. Cheap because the tree is at most ~10 levels
+   * deep in practice.
+   * @param {HTMLElement} leaf
+   */
+  function expandAncestors(leaf) {
+    let cur = leaf.previousElementSibling;
+    let targetDepth = Number(leaf.getAttribute("data-depth") || "0");
+    while (cur) {
+      const d = Number(cur.getAttribute("data-depth") || "0");
+      if (d < targetDepth) {
+        if (cur.getAttribute("aria-expanded") === "false") {
+          toggleDir(cur);
+        }
+        targetDepth = d; // keep walking
+      }
+      cur = cur.previousElementSibling;
+    }
+  }
+
+  /**
+   * CSS.escape polyfill — older browsers / jsdom may lack it.
+   * @param {string} s
+   */
+  function cssEscape(s) {
+    if (typeof CSS !== "undefined" && typeof CSS.escape === "function") {
+      return CSS.escape(s);
+    }
+    return String(s).replace(/([^a-zA-Z0-9_-])/g, "\\$1");
+  }
+
+  // -----------------------------------------------------------------------
+  // Wiring
+  // -----------------------------------------------------------------------
+
+  /**
+   * Build the affected set from `[data-affected="true"]` nodes the SSR
+   * already flagged. Re-runs on each hydration so SSE-inserted nodes
+   * stay highlighted.
+   */
+  function rebuildAffectedSet() {
+    if (!root) return;
+    affectedSet = new Set();
+    root.querySelectorAll('[data-affected="true"]').forEach((el) => {
+      const p = el.getAttribute("data-path");
+      if (p) affectedSet.add(p);
+    });
+  }
+
+  /**
+   * Initial hydration: bind click handlers + collect the affected set.
+   * Idempotent — safe to call multiple times.
+   */
+  function hydrate() {
+    root = document.querySelector(SIDEBAR_SELECTOR);
+    if (!root) return;
+    rebuildAffectedSet();
+    root.addEventListener("click", (ev) => {
+      const target = ev.target;
+      // jsdom's eval'd scripts don't have `Element` in scope; use a
+      // duck-type check instead of `instanceof Element`.
+      if (!target || typeof target.getAttribute !== "function") return;
+      const li = target.closest && target.closest(".file-tree-node");
+      if (!li || typeof li.getAttribute !== "function") return;
+      const path = li.getAttribute("data-path") || null;
+      const type = li.getAttribute("data-type");
+      if (type === "directory") {
+        toggleDir(li);
+        // Suppress the subsequent active-path switch — directories
+        // aren't files, just containers.
+        return;
+      }
+      if (path) setActive(path);
+    });
+    // Auto-hydrate on DOMContentLoaded if the DOM is already ready.
+    if (document.readyState === "loading") {
+      document.addEventListener("DOMContentLoaded", hydrate, { once: true });
+    }
+  }
+  hydrate();
+
+  /**
+   * Expand every directory in the tree (used by the "expand all" button).
+   */
+  function expandAll() {
+    if (!root) return;
+    root.querySelectorAll('.file-tree-node[data-type="directory"]').forEach((li) => {
+      if (li.getAttribute("aria-expanded") === "false") toggleDir(li);
+    });
+  }
+
+  /**
+   * Collapse every directory (used by "collapse all").
+   */
+  function collapseAll() {
+    if (!root) return;
+    root.querySelectorAll('.file-tree-node[data-type="directory"]').forEach((li) => {
+      if (li.getAttribute("aria-expanded") === "true") toggleDir(li);
+    });
+  }
+
+  // Expose a tiny global API so other scripts (app.js, tool-call-detail.js)
+  // can drive the sidebar.
+  /** @type {any} */
+  const w = window;
+  w.__fileTree = {
+    setActive,
+    expandAll,
+    collapseAll,
+    /** Refresh affected-set from the current DOM (called by SSE handlers). */
+    refreshAffected: rebuildAffectedSet,
+    /** Return the currently-highlighted file path, or null. */
+    getActive() {
+      return activePath;
+    },
+  };
+})();

package/public/style.css

@@ -1154,3 +1154,505 @@ details summary {
     margin-bottom: 8px;
   }
 }
+
+/* ============================================================================
+ * v2.0.0: Monaco Editor + File Tree + Diff + Mermaid jump
+ *
+ * Sections (search for the header to navigate):
+ *   - .task-v2-layout        — sidebar + main grid
+ *   - .file-tree-panel       — left sidebar
+ *   - .file-tree             — collapsible nested list
+ *   - .file-tree-node        — individual rows
+ *   - .file-tree-chevron     — directory expand/collapse
+ *   - .tool-call-detail      — right-hand detail panel
+ *   - .monaco-editor         — Monaco container
+ *   - .diff-body / .diff-line — LCS diff rendering
+ *   - .v2-hint               — small inline hints
+ * ========================================================================== */
+
+/* ---------- v2.0.0 layout (sidebar + main) ---------- */
+.task-v2-layout {
+  display: grid;
+  grid-template-columns: minmax(220px, 280px) 1fr;
+  gap: 16px;
+  margin: 0 auto;
+  max-width: 1400px;
+  padding: 0 16px;
+}
+.task-v2-layout > .task-v2-main {
+  min-width: 0; /* allow grid item to shrink */
+}
+.file-tree-panel {
+  position: sticky;
+  top: 12px;
+  align-self: start;
+  max-height: calc(100vh - 24px);
+  overflow: auto;
+  border: 1px solid var(--border, #e5e7eb);
+  border-radius: 6px;
+  padding: 12px 14px;
+  background: var(--bg-panel, #fafafa);
+}
+.file-tree-panel h2 {
+  font-size: 14px;
+  margin: 0 0 6px;
+  letter-spacing: 0.02em;
+}
+.file-tree-summary {
+  font-size: 11px;
+  color: var(--fg-muted, #6b7280);
+  margin: 0 0 8px;
+}
+@media (max-width: 900px) {
+  .task-v2-layout {
+    grid-template-columns: 1fr;
+  }
+  .file-tree-panel {
+    position: static;
+    max-height: none;
+  }
+}
+
+/* ---------- file tree sidebar ---------- */
+.file-tree {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  font-family: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, monospace;
+  font-size: 12px;
+  line-height: 1.5;
+}
+.file-tree-node {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 1px 4px 1px calc(4px + var(--depth, 0) * 12px);
+  border-radius: 3px;
+  cursor: pointer;
+  user-select: none;
+}
+.file-tree-node[data-collapsed="true"] {
+  display: none;
+}
+.file-tree-node:hover {
+  background: rgba(99, 102, 241, 0.08);
+}
+.file-tree-node.is-active {
+  background: rgba(99, 102, 241, 0.18);
+  outline: 1px solid rgba(99, 102, 241, 0.45);
+  font-weight: 600;
+}
+.file-tree-node.is-affected .file-tree-name::after {
+  content: " ●";
+  color: rgba(220, 38, 38, 0.8);
+  font-size: 10px;
+}
+.file-tree-chevron {
+  display: inline-block;
+  width: 12px;
+  text-align: center;
+  font-size: 9px;
+  color: var(--fg-muted, #6b7280);
+  flex: 0 0 12px;
+}
+.file-tree-spacer {
+  display: inline-block;
+  width: 12px;
+  flex: 0 0 12px;
+}
+.file-tree-name {
+  flex: 1 1 auto;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.file-tree-empty {
+  list-style: none;
+  color: var(--fg-muted, #6b7280);
+  font-style: italic;
+  padding: 4px;
+}
+
+/* ---------- tool-call detail panel ---------- */
+.tool-call-detail-panel {
+  border-left: 4px solid rgba(99, 102, 241, 0.55);
+  padding-left: 14px;
+  margin-top: 18px;
+}
+.tool-call-detail-panel .v2-hint {
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--fg-muted, #6b7280);
+  margin-left: 8px;
+}
+.tool-call-detail {
+  border: 1px solid var(--border, #e5e7eb);
+  border-radius: 6px;
+  padding: 10px 12px;
+  margin-top: 8px;
+  background: #ffffff;
+}
+.tool-call-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 13px;
+  margin-bottom: 6px;
+}
+.tool-call-header .tool-name code {
+  background: rgba(99, 102, 241, 0.08);
+  padding: 1px 6px;
+  border-radius: 3px;
+}
+.tool-call-header .tool-path {
+  color: var(--fg-muted, #6b7280);
+  font-family: ui-monospace, Menlo, monospace;
+  font-size: 11px;
+  margin-left: auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1 1 auto;
+}
+.tool-call-detail-empty {
+  color: var(--fg-muted, #6b7280);
+  font-style: italic;
+  padding: 8px 0;
+}
+
+/* ---------- Monaco container ---------- */
+.monaco-editor {
+  width: 100%;
+  height: 280px;
+  border: 1px solid var(--border, #d1d5db);
+  border-radius: 4px;
+  margin: 6px 0 0;
+  position: relative;
+  background: #fafafa;
+  overflow: hidden;
+}
+.monaco-editor .monaco-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: var(--fg-muted, #6b7280);
+  font-family: ui-monospace, Menlo, monospace;
+  font-size: 12px;
+}
+.monaco-editor .monaco-error {
+  color: rgba(220, 38, 38, 0.9);
+  background: rgba(254, 226, 226, 0.5);
+}
+.monaco-editor .monaco-truncation-note {
+  position: absolute;
+  bottom: 4px;
+  right: 8px;
+  font-size: 10px;
+  color: var(--fg-muted, #6b7280);
+  background: rgba(255, 255, 255, 0.85);
+  padding: 1px 6px;
+  border-radius: 3px;
+}
+
+/* ---------- LCS diff body ---------- */
+.diff-body {
+  list-style: none;
+  margin: 6px 0 0;
+  padding: 6px 8px;
+  border: 1px solid var(--border, #e5e7eb);
+  border-radius: 4px;
+  background: #fafafa;
+  font-family: ui-monospace, "SF Mono", Menlo, monospace;
+  font-size: 12px;
+  line-height: 1.5;
+  max-height: 320px;
+  overflow: auto;
+}
+.diff-line {
+  display: flex;
+  gap: 8px;
+  padding: 0 4px;
+  white-space: pre;
+}
+.diff-line .diff-gutter {
+  flex: 0 0 14px;
+  text-align: center;
+  font-weight: 600;
+}
+.diff-line.diff-line-added {
+  background: rgba(220, 252, 231, 0.6);
+}
+.diff-line.diff-line-added .diff-gutter {
+  color: #15803d;
+}
+.diff-line.diff-line-removed {
+  background: rgba(254, 226, 226, 0.6);
+}
+.diff-line.diff-line-removed .diff-gutter {
+  color: #b91c1c;
+}
+.diff-line.diff-line-context .diff-gutter {
+  color: var(--fg-muted, #9ca3af);
+}
+.diff-line .diff-text {
+  flex: 1 1 auto;
+  white-space: pre;
+}
+
+/* ---------- v2 small inline hint ---------- */
+.v2-hint {
+  font-size: 11px;
+  color: var(--fg-muted, #6b7280);
+}
+
+/* ============================================================================
+ * v2.0.0: Monaco Editor + File Tree + Diff + Mermaid jump
+ *
+ * Sections (search for the header to navigate):
+ *   - .task-v2-layout        — sidebar + main grid
+ *   - .file-tree-panel       — left sidebar
+ *   - .file-tree             — collapsible nested list
+ *   - .file-tree-node        — individual rows
+ *   - .file-tree-chevron     — directory expand/collapse
+ *   - .tool-call-detail      — right-hand detail panel
+ *   - .monaco-editor         — Monaco container
+ *   - .diff-body / .diff-line — LCS diff rendering
+ *   - .v2-hint               — small inline hints
+ * ========================================================================== */
+
+/* ---------- v2.0.0 layout (sidebar + main) ---------- */
+.task-v2-layout {
+  display: grid;
+  grid-template-columns: minmax(220px, 280px) 1fr;
+  gap: 16px;
+  margin: 0 auto;
+  max-width: 1400px;
+  padding: 0 16px;
+}
+.task-v2-layout > .task-v2-main {
+  min-width: 0; /* allow grid item to shrink */
+}
+.file-tree-panel {
+  position: sticky;
+  top: 12px;
+  align-self: start;
+  max-height: calc(100vh - 24px);
+  overflow: auto;
+  border: 1px solid var(--border, #e5e7eb);
+  border-radius: 6px;
+  padding: 12px 14px;
+  background: var(--bg-panel, #fafafa);
+}
+.file-tree-panel h2 {
+  font-size: 14px;
+  margin: 0 0 6px;
+  letter-spacing: 0.02em;
+}
+.file-tree-summary {
+  font-size: 11px;
+  color: var(--fg-muted, #6b7280);
+  margin: 0 0 8px;
+}
+@media (max-width: 900px) {
+  .task-v2-layout {
+    grid-template-columns: 1fr;
+  }
+  .file-tree-panel {
+    position: static;
+    max-height: none;
+  }
+}
+
+/* ---------- file tree sidebar ---------- */
+.file-tree {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  font-family: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, monospace;
+  font-size: 12px;
+  line-height: 1.5;
+}
+.file-tree-node {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 1px 4px 1px calc(4px + var(--depth, 0) * 12px);
+  border-radius: 3px;
+  cursor: pointer;
+  user-select: none;
+}
+.file-tree-node[data-collapsed="true"] {
+  display: none;
+}
+.file-tree-node:hover {
+  background: rgba(99, 102, 241, 0.08);
+}
+.file-tree-node.is-active {
+  background: rgba(99, 102, 241, 0.18);
+  outline: 1px solid rgba(99, 102, 241, 0.45);
+  font-weight: 600;
+}
+.file-tree-node.is-affected .file-tree-name::after {
+  content: " ●";
+  color: rgba(220, 38, 38, 0.8);
+  font-size: 10px;
+}
+.file-tree-chevron {
+  display: inline-block;
+  width: 12px;
+  text-align: center;
+  font-size: 9px;
+  color: var(--fg-muted, #6b7280);
+  flex: 0 0 12px;
+}
+.file-tree-spacer {
+  display: inline-block;
+  width: 12px;
+  flex: 0 0 12px;
+}
+.file-tree-name {
+  flex: 1 1 auto;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.file-tree-empty {
+  list-style: none;
+  color: var(--fg-muted, #6b7280);
+  font-style: italic;
+  padding: 4px;
+}
+
+/* ---------- tool-call detail panel ---------- */
+.tool-call-detail-panel {
+  border-left: 4px solid rgba(99, 102, 241, 0.55);
+  padding-left: 14px;
+  margin-top: 18px;
+}
+.tool-call-detail-panel .v2-hint {
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--fg-muted, #6b7280);
+  margin-left: 8px;
+}
+.tool-call-detail {
+  border: 1px solid var(--border, #e5e7eb);
+  border-radius: 6px;
+  padding: 10px 12px;
+  margin-top: 8px;
+  background: #ffffff;
+}
+.tool-call-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 13px;
+  margin-bottom: 6px;
+}
+.tool-call-header .tool-name code {
+  background: rgba(99, 102, 241, 0.08);
+  padding: 1px 6px;
+  border-radius: 3px;
+}
+.tool-call-header .tool-path {
+  color: var(--fg-muted, #6b7280);
+  font-family: ui-monospace, Menlo, monospace;
+  font-size: 11px;
+  margin-left: auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1 1 auto;
+}
+.tool-call-detail-empty {
+  color: var(--fg-muted, #6b7280);
+  font-style: italic;
+  padding: 8px 0;
+}
+
+/* ---------- Monaco container ---------- */
+.monaco-editor {
+  width: 100%;
+  height: 280px;
+  border: 1px solid var(--border, #d1d5db);
+  border-radius: 4px;
+  margin: 6px 0 0;
+  position: relative;
+  background: #fafafa;
+  overflow: hidden;
+}
+.monaco-editor .monaco-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: var(--fg-muted, #6b7280);
+  font-family: ui-monospace, Menlo, monospace;
+  font-size: 12px;
+}
+.monaco-editor .monaco-error {
+  color: rgba(220, 38, 38, 0.9);
+  background: rgba(254, 226, 226, 0.5);
+}
+.monaco-editor .monaco-truncation-note {
+  position: absolute;
+  bottom: 4px;
+  right: 8px;
+  font-size: 10px;
+  color: var(--fg-muted, #6b7280);
+  background: rgba(255, 255, 255, 0.85);
+  padding: 1px 6px;
+  border-radius: 3px;
+}
+
+/* ---------- LCS diff body ---------- */
+.diff-body {
+  list-style: none;
+  margin: 6px 0 0;
+  padding: 6px 8px;
+  border: 1px solid var(--border, #e5e7eb);
+  border-radius: 4px;
+  background: #fafafa;
+  font-family: ui-monospace, "SF Mono", Menlo, monospace;
+  font-size: 12px;
+  line-height: 1.5;
+  max-height: 320px;
+  overflow: auto;
+}
+.diff-line {
+  display: flex;
+  gap: 8px;
+  padding: 0 4px;
+  white-space: pre;
+}
+.diff-line .diff-gutter {
+  flex: 0 0 14px;
+  text-align: center;
+  font-weight: 600;
+}
+.diff-line.diff-line-added {
+  background: rgba(220, 252, 231, 0.6);
+}
+.diff-line.diff-line-added .diff-gutter {
+  color: #15803d;
+}
+.diff-line.diff-line-removed {
+  background: rgba(254, 226, 226, 0.6);
+}
+.diff-line.diff-line-removed .diff-gutter {
+  color: #b91c1c;
+}
+.diff-line.diff-line-context .diff-gutter {
+  color: var(--fg-muted, #9ca3af);
+}
+.diff-line .diff-text {
+  flex: 1 1 auto;
+  white-space: pre;
+}
+
+/* ---------- v2 small inline hint ---------- */
+.v2-hint {
+  font-size: 11px;
+  color: var(--fg-muted, #6b7280);
+}

package/public/tool-call-detail.js

@@ -0,0 +1,311 @@
+/* v2.0.0: tool-call detail panel hydrator.
+ *
+ * Wires up the dedicated `<section id="tool-call-detail-panel">`:
+ *
+ *   1. Hooks `window.__toolClick(toolId)` (set by mermaid-renderer.js
+ *      + app.js) so a Mermaid click scrolls the panel into view AND
+ *      re-renders its content with the clicked call's Monaco + diff.
+ *
+ *   2. Lazy-loads Monaco Editor from a CDN the first time the user
+ *      clicks any tool row. Subsequent clicks reuse the same Monaco
+ *      model — no extra network round-trips.
+ *
+ *   3. Fetches the file content for `data-file-path` via
+ *      `/api/file-content` and feeds it into Monaco. If the path is
+ *      outside the server's sandbox (403), shows a graceful
+ *      "file not accessible" placeholder rather than a broken editor.
+ *
+ *   4. Re-renders the inline `<details class="tool-detail">` block for
+ *      the active tool row so the diff/Monaco surfaces both in the
+ *      detail panel AND in the original table position.
+ *
+ * Loaded AFTER app.js + file-tree.js.
+ *
+ * The Monaco loader is loaded from jsDelivr (per design doc §2.1)
+ * and exposes the AMD `require` to set language workers.
+ */
+
+(function attachToolCallDetailHydrator() {
+  const PANEL_SELECTOR = "#tool-call-detail-panel";
+  /** @type {HTMLElement|null} */
+  let panel = null;
+  /** @type {any} */
+  let monaco = null;
+  /** @type {boolean} */
+  let monacoLoading = false;
+  /** @type {Array<() => void>} */
+  const monacoWaiters = [];
+  /** @type {string|null} */
+  let currentToolId = null;
+  /** @type {string|null} */
+  let currentFilePath = null;
+
+  // -----------------------------------------------------------------------
+  // Monaco loader (CDN, AMD)
+  // -----------------------------------------------------------------------
+  const MONACO_VERSION = "0.45.0";
+  const MONACO_BASE = `https://cdn.jsdelivr.net/npm/monaco-editor@${MONACO_VERSION}/min/vs`;
+
+  /**
+   * Inject the AMD loader script and resolve once `require` is ready.
+   * The script is idempotent — calling twice is a no-op the second time.
+   */
+  function loadMonaco() {
+    if (monaco) return Promise.resolve(monaco);
+    if (monacoLoading) return new Promise((r) => monacoWaiters.push(() => r(monaco)));
+    monacoLoading = true;
+    return new Promise((resolve, reject) => {
+      /** @type {any} */
+      const w = window;
+      const onReady = () => {
+        try {
+          // eslint-disable-next-line no-undef
+          require.config({ paths: { vs: MONACO_BASE } });
+          // eslint-disable-next-line no-undef
+          require(["vs/editor/editor.main"], () => {
+            monaco = w.monaco;
+            monacoLoading = false;
+            for (const waiter of monacoWaiters) waiter();
+            monacoWaiters.length = 0;
+            resolve(monaco);
+          });
+        } catch (err) {
+          monacoLoading = false;
+          reject(err);
+        }
+      };
+      if (typeof w.require === "function" && w.require.config) {
+        onReady();
+        return;
+      }
+      const s = document.createElement("script");
+      s.src = `${MONACO_BASE}/loader.js`;
+      s.onload = () => onReady();
+      s.onerror = () => {
+        monacoLoading = false;
+        reject(new Error("Failed to load Monaco loader script"));
+      };
+      document.head.appendChild(s);
+    });
+  }
+
+  // -----------------------------------------------------------------------
+  // File fetch
+  // -----------------------------------------------------------------------
+
+  /**
+   * Fetch the file content via the server's sandboxed endpoint. Returns
+   * `null` when the file isn't accessible (404/403/network). We surface
+   * a graceful "not accessible" placeholder rather than blowing up the
+   * page.
+   * @param {string} path
+   * @returns {Promise<{content: string, truncated: boolean, byteSize: number} | null>}
+   */
+  async function fetchFileContent(path) {
+    try {
+      const res = await fetch(
+        `/api/file-content?path=${encodeURIComponent(path)}&max=${64 * 1024}`,
+      );
+      if (!res.ok) return null;
+      const data = await res.json();
+      if (typeof data.content !== "string") return null;
+      return {
+        content: data.content,
+        truncated: Boolean(data.truncated),
+        byteSize: Number(data.byteSize) || data.content.length,
+      };
+    } catch (_) {
+      return null;
+    }
+  }
+
+  // -----------------------------------------------------------------------
+  // Render
+  // -----------------------------------------------------------------------
+
+  /**
+   * Replace the panel contents with the detail for a given tool call.
+   *
+   * We can read the existing `<section class="tool-call-detail">` from
+   * the SSR-rendered table row (the same `data-tool-id`) and reuse it
+   * verbatim — the LCS diff is already computed server-side. The
+   * Monaco container is the only thing that needs lazy-loading.
+   *
+   * @param {string} toolId
+   */
+  async function renderDetailForTool(toolId) {
+    if (!panel) return;
+    currentToolId = toolId;
+    // Find the SSR-rendered detail (from the toolcalls table). There
+    // may be several `<section class="tool-call-detail">` blocks — one
+    // per row. Pick the one matching toolId.
+    const source = document.querySelector(
+      `section.tool-call-detail[data-tool-id="${cssEscape(toolId)}"]`,
+    );
+    if (!source) {
+      // Fallback: empty placeholder
+      panel.innerHTML = `<div class="tool-call-detail-empty">No detail available for tool call #${escapeHtml(toolId)}.</div>`;
+      return;
+    }
+    // Move the SSR block into the panel (clone so we don't tear it
+    // out of the row — the row's "show args" <details> still references
+    // it for diff display).
+    const cloned = source.cloneNode(true);
+    panel.innerHTML = "";
+    panel.appendChild(cloned);
+    panel.setAttribute("data-current-call", toolId);
+
+    const monacoContainer = cloned.querySelector(".monaco-editor");
+    if (!monacoContainer) return;
+    const filePath = monacoContainer.getAttribute("data-file-path");
+    if (!filePath) return;
+    currentFilePath = filePath;
+    monacoContainer.innerHTML = `<div class="monaco-placeholder">Loading ${escapeHtml(filePath)}…</div>`;
+    try {
+      const [file] = await Promise.all([fetchFileContent(filePath), loadMonaco()]);
+      if (!monaco) return; // loadMonaco() rejected; placeholder stays
+      if (!file) {
+        monacoContainer.innerHTML = `<div class="monaco-placeholder monaco-error">File not accessible (sandboxed or missing): <code>${escapeHtml(filePath)}</code></div>`;
+        return;
+      }
+      const language = monacoContainer.getAttribute("data-language") || "plaintext";
+      // eslint-disable-next-line no-undef
+      const editor = monaco.editor.create(monacoContainer, {
+        value: file.content,
+        language,
+        readOnly: true,
+        minimap: { enabled: false },
+        fontSize: 13,
+        lineNumbers: "on",
+        scrollBeyondLastLine: false,
+        automaticLayout: true,
+        theme: "vs",
+      });
+      // Dispose when the panel is cleared (next render or page unload).
+      const dispose = () => {
+        try {
+          editor.dispose();
+        } catch (_) {
+          /* noop */
+        }
+      };
+      monacoContainer.addEventListener("monaco-dispose", dispose, { once: true });
+      // Annotate with truncation notice if needed.
+      if (file.truncated) {
+        const note = document.createElement("div");
+        note.className = "monaco-truncation-note";
+        note.textContent = `(truncated — first ${file.content.length} bytes of ${file.byteSize})`;
+        monacoContainer.appendChild(note);
+      }
+    } catch (err) {
+      monacoContainer.innerHTML = `<div class="monaco-placeholder monaco-error">Monaco failed to load: ${escapeHtml(String((err && err.message) || err))}</div>`;
+    }
+  }
+
+  // -----------------------------------------------------------------------
+  // Hooks
+  // -----------------------------------------------------------------------
+
+  /**
+   * Replace the existing `window.__toolClick` (set by app.js) with our
+   * wrapper that ALSO updates the panel. We preserve the original
+   * scroll-into-view + highlight behaviour so the table row still
+   * flashes — we just add: panel render + file-tree highlight.
+   */
+  function attachToolClickHook() {
+    /** @type {any} */
+    const w = window;
+    const existing = w.__toolClick;
+    w.__toolClick = function (toolId) {
+      try {
+        if (typeof existing === "function") existing(toolId);
+      } catch (err) {
+        // eslint-disable-next-line no-console
+        console.warn("[task-show] prior __toolClick failed:", err);
+      }
+      try {
+        renderDetailForTool(String(toolId));
+        // Highlight the corresponding file-tree node (when the call
+        // has a file_path).
+        const detail = document.querySelector(
+          `section.tool-call-detail[data-tool-id="${cssEscape(String(toolId))}"]`,
+        );
+        const filePath = detail && detail.querySelector(".monaco-editor")
+          ? detail.querySelector(".monaco-editor").getAttribute("data-file-path")
+          : null;
+        if (filePath && w.__fileTree && typeof w.__fileTree.setActive === "function") {
+          w.__fileTree.setActive(filePath);
+        }
+        // Scroll the panel into view (block: 'start' so the heading
+        // is at the top of the viewport).
+        if (panel) {
+          try {
+            panel.scrollIntoView({ behavior: "smooth", block: "start" });
+          } catch (_) {
+            try {
+              panel.scrollIntoView();
+            } catch (_) {
+              /* noop */
+            }
+          }
+        }
+      } catch (err) {
+        // eslint-disable-next-line no-console
+        console.warn("[task-show] tool-call-detail render failed:", err);
+      }
+    };
+  }
+
+  /**
+   * Initial hydration: find the panel + install the __toolClick hook.
+   * Idempotent.
+   */
+  function hydrate() {
+    panel = document.querySelector(PANEL_SELECTOR);
+    if (!panel) return;
+    attachToolClickHook();
+    // If the SSR rendered an initial detail (first tool call), pre-fill
+    // Monaco for it so the user sees the editor immediately on page load.
+    const initialMonaco = panel.querySelector(".monaco-editor");
+    const initialFilePath = initialMonaco && initialMonaco.getAttribute("data-file-path");
+    if (initialMonaco && initialFilePath) {
+      // Defer to next microtask so we don't block the first paint.
+      Promise.resolve().then(() => {
+        renderDetailForTool(currentToolId || panel.getAttribute("data-current-call") || "");
+      });
+    }
+  }
+
+  /**
+   * CSS.escape polyfill for older browsers + jsdom.
+   * @param {string} s
+   */
+  function cssEscape(s) {
+    if (typeof CSS !== "undefined" && typeof CSS.escape === "function") {
+      return CSS.escape(s);
+    }
+    return String(s).replace(/([^a-zA-Z0-9_-])/g, "\\$1");
+  }
+
+  /**
+   * Tiny HTML escape for the placeholders we inject via innerHTML.
+   * @param {unknown} s
+   */
+  function escapeHtml(s) {
+    return String(s ?? "")
+      .replace(/&/g, "&amp;")
+      .replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;")
+      .replace(/"/g, "&quot;")
+      .replace(/'/g, "&#39;");
+  }
+
+  // -----------------------------------------------------------------------
+  // Boot
+  // -----------------------------------------------------------------------
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", hydrate, { once: true });
+  } else {
+    hydrate();
+  }
+})();