@ai-setting/roy-plugin-task-show 2.0.7 → 2.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ai-setting/roy-plugin-task-show",
-  "version": "2.0.7",
+  "version": "2.0.8",
   "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,6 +1,6 @@
 {
   "name": "@ai-setting/roy-plugin-task-show",
-  "version": "2.0.7",
+  "version": "2.0.8",
   "type": "tool-plugin",
   "description": "v2.0.0: Major visual overhaul of the per-task detail page \u2014 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 \u2014 empty/single/nested/dedup/sort/depth/parseLsFiles/gitLsFiles), `test/tool-call-detail.test.ts` (22 cases \u2014 LCS diff edges, HTML escape, path aliases, summary stats), `test/tool-call-detail-server-integration.test.ts` (7 cases \u2014 SSR HTML contracts + endpoint), `test/tool-call-detail-jsdom.test.ts` (7 cases \u2014 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 \u2014 previously the session was collapsed to its `sessionId` on first load and never refreshed, so the home page lost the \u300csession ancestors\u300d 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 \u2265 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 \u2014 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 \u2014 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 \u300c\u8fc7\u7a0b\u63cf\u8ff0\u300d column at a glance \u2014 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 \u2194 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 \u300c\u663e\u793a\u5168\u90e8\u680f\u4f4d\u300d 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 \u2192 pipeline \u2192 stats \u2192 toolcalls \u2192 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\u2192raw-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 \u2014 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) \u2014 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 \u2014 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 \u2014 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 \u2014 see Task #2537 for the heap-unbounded-state RED\u2192GREEN 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",

package/public/index.html

@@ -18,6 +18,22 @@
       </p>
     </header>
 
+    <!--
+      v2.0.8 (feat/mermaid-zoom): hidden toolbar template that
+      `mermaid-renderer.js` clones for every rendered diagram.
+      The actual buttons are bound to `MermaidRenderer.zoomIn /
+      zoomOut / resetZoom` by the renderer's mount handler — this
+      template is just the markup. Keyboard shortcuts (+/−/0) are
+      also wired by the renderer.
+    -->
+    <template id="mermaid-zoom-toolbar-template">
+      <div class="mermaid-zoom-toolbar" role="toolbar" aria-label="Mermaid diagram zoom controls">
+        <button type="button" class="mermaid-zoom-btn" data-mermaid-zoom="out" aria-label="Zoom out" title="Zoom out (−)">−</button>
+        <button type="button" class="mermaid-zoom-btn" data-mermaid-zoom="reset" aria-label="Reset zoom" title="Reset zoom (0)">100%</button>
+        <button type="button" class="mermaid-zoom-btn" data-mermaid-zoom="in" aria-label="Zoom in" title="Zoom in (+)">+</button>
+      </div>
+    </template>
+
     <section class="panel tree-controls">
       <div class="tree-controls-row">
         <label class="tree-search">

package/public/mermaid-renderer.js

@@ -54,6 +54,14 @@
   "use strict";
 
   const DEFAULT_ID_PREFIX = "mmr";
+  // v2.0.8 (feat/mermaid-zoom): zoom-in / zoom-out step and
+  // sanity bounds. We default to 10% per click (matching the
+  // common browser zoom UX) and clamp to a range that keeps the
+  // diagram readable on both directions.
+  const DEFAULT_ZOOM_STEP = 0.1;
+  const ZOOM_MIN = 0.25;
+  const ZOOM_MAX = 3.0;
+  const ZOOM_DEFAULT = 1.0;
 
   function escapeHtml(s) {
     return String(s)
@@ -142,6 +150,11 @@
     // leak references after the container is removed.
     const inflight = new WeakMap(); // container -> { token: number, source: string, destroyed: boolean, lastRenderedSource: string }
     const seq = new WeakMap();      // container -> number
+    // v2.0.8 (feat/mermaid-zoom): per-container zoom state,
+    // independent of the rendering state. Keyed by the same
+    // container reference so that re-rendering a diagram does
+    // not reset the user's zoom level.
+    const zoomState = new WeakMap(); // container -> number (0.25..3.0)
 
     function nextSeq(container) {
       const cur = seq.get(container) || 0;
@@ -182,6 +195,156 @@
       return cur ? cur.lastRenderedSource : null;
     }
 
+    // -----------------------------------------------------------------
+    // v2.0.8 (feat/mermaid-zoom): zoom-in / zoom-out / reset / get
+    // -----------------------------------------------------------------
+
+    function clampZoom(z) {
+      if (!Number.isFinite(z)) return ZOOM_DEFAULT;
+      if (z < ZOOM_MIN) return ZOOM_MIN;
+      if (z > ZOOM_MAX) return ZOOM_MAX;
+      return z;
+    }
+
+    function roundZoom(z) {
+      // Round to 2 decimal places so 1.1000000000000003 doesn't
+      // leak into the CSS transform (and so the trace payload is
+      // human-readable).
+      return Math.round(z * 100) / 100;
+    }
+
+    function getZoom(container) {
+      if (!container) return ZOOM_DEFAULT;
+      const v = zoomState.get(container);
+      return v == null ? ZOOM_DEFAULT : v;
+    }
+
+    function ensureZoomStage(container) {
+      // Lazy-create the wrapper if the user calls zoom before a
+      // successful mount (the regression test exercises this path).
+      if (!container || !container.querySelector) return null;
+      let stage = container.querySelector(".mermaid-zoom-stage");
+      if (stage) return stage;
+      stage = container.ownerDocument.createElement("div");
+      stage.className = "mermaid-zoom-stage";
+      // Re-parent any existing children (e.g. an already-rendered
+      // SVG) into the new wrapper so the zoom transform applies to
+      // them too. This keeps the existing render pipeline
+      // untouched — the controller just adds a transform layer.
+      const doc = container.ownerDocument;
+      const fragment = doc.createDocumentFragment
+        ? doc.createDocumentFragment()
+        : null;
+      if (fragment) {
+        while (container.firstChild) {
+          fragment.appendChild(container.firstChild);
+        }
+        stage.appendChild(fragment);
+      }
+      container.appendChild(stage);
+      return stage;
+    }
+
+    /**
+     * v2.0.8 (feat/mermaid-zoom): wire the optional toolbar
+     * template (`<template id="mermaid-zoom-toolbar-template">` in
+     * `index.html`) to this container's zoom methods. The
+     * toolbar is inserted BEFORE the zoom stage, so the visual
+     * order is: [toolbar] [diagram]. We look for the template
+     * by id; if it is not present (e.g. in unit tests that
+     * don't ship the HTML), the call is a silent no-op.
+     */
+    function attachZoomToolbar(container) {
+      if (!container || !container.ownerDocument) return;
+      const doc = container.ownerDocument;
+      // Already wired — don't double-bind.
+      if (container.querySelector(".mermaid-zoom-toolbar")) return;
+      const tpl = doc.getElementById
+        ? doc.getElementById("mermaid-zoom-toolbar-template")
+        : null;
+      if (!tpl || !tpl.content) return;
+      const fragment = doc.createDocumentFragment
+        ? doc.createDocumentFragment()
+        : null;
+      if (!fragment) return;
+      // Clone the template's children into a fresh document
+      // fragment, then attach the event listeners.
+      const node = tpl.content.cloneNode(true);
+      const toolbar = node.querySelector(".mermaid-zoom-toolbar");
+      if (!toolbar) return;
+      // Wire the three buttons.
+      const inBtn = toolbar.querySelector('[data-mermaid-zoom="in"]');
+      const outBtn = toolbar.querySelector('[data-mermaid-zoom="out"]');
+      const resetBtn = toolbar.querySelector('[data-mermaid-zoom="reset"]');
+      if (inBtn) inBtn.addEventListener("click", () => zoomIn(container));
+      if (outBtn) outBtn.addEventListener("click", () => zoomOut(container));
+      if (resetBtn) resetBtn.addEventListener("click", () => resetZoom(container));
+      // Insert at the top of the container (so the toolbar
+      // appears above the diagram).
+      if (container.firstChild) {
+        container.insertBefore(toolbar, container.firstChild);
+      } else {
+        container.appendChild(toolbar);
+      }
+      // Re-apply the current zoom so the "100%" label reflects
+      // the actual scale (in case the user re-mounted a diagram
+      // that already had a non-default zoom).
+      applyZoom(container, getZoom(container));
+    }
+
+    function applyZoom(container, zoom) {
+      const stage = ensureZoomStage(container);
+      if (!stage) return;
+      // Use the inline `style` so the transform survives any
+      // user-provided stylesheet overrides. We also set
+      // `transform-origin: top left` so the diagram does not
+      // recenter on every zoom step (Mermaid SVGs have their own
+      // viewBox, but the surrounding page would jump otherwise).
+      stage.style.transformOrigin = "top left";
+      stage.style.transform = `scale(${zoom})`;
+    }
+
+    function setZoom(container, nextZoom) {
+      if (!container) return ZOOM_DEFAULT;
+      const from = getZoom(container);
+      const to = roundZoom(clampZoom(nextZoom));
+      if (Math.abs(to - from) < 1e-9) {
+        // No-op: zoom did not actually change (e.g. clamped at the
+        // limit). Skip the trace emission so the host does not
+        // see a flood of `mermaid.zoom.change` events at the
+        // bound.
+        return to;
+      }
+      zoomState.set(container, to);
+      applyZoom(container, to);
+      // v2.0.8: emit the canonical `mermaid.zoom.change` trace.
+      // public/ is vanilla JS (no @TracedAs decorator), so we
+      // log a console.debug line the host OTel / visual-verify
+      // scripts can grep for.
+      try {
+        if (typeof console !== "undefined" && typeof console.debug === "function") {
+          console.debug("[trace] mermaid.zoom.change", { from, to });
+        }
+      } catch (_) {
+        // ignore — tracing must never break the controller
+      }
+      return to;
+    }
+
+    function zoomIn(container, step) {
+      const s = typeof step === "number" && Number.isFinite(step) ? Math.abs(step) : DEFAULT_ZOOM_STEP;
+      return setZoom(container, getZoom(container) + s);
+    }
+
+    function zoomOut(container, step) {
+      const s = typeof step === "number" && Number.isFinite(step) ? Math.abs(step) : DEFAULT_ZOOM_STEP;
+      return setZoom(container, getZoom(container) - s);
+    }
+
+    function resetZoom(container) {
+      return setZoom(container, ZOOM_DEFAULT);
+    }
+
     /**
      * Render `source` into `container`. Returns a Promise that resolves when
      * the container reflects the latest source (either an SVG or an error
@@ -274,6 +437,14 @@
       setState(container, "rendered");
       rememberRenderedSource(container, source);
       if (onStateChange) onStateChange(container, "rendered");
+      // v2.0.8 (feat/mermaid-zoom): wrap the freshly-rendered
+      // SVG in a `.mermaid-zoom-stage` div so the zoom transform
+      // applies to it, then (optionally) attach the toolbar.
+      // The toolbar lookup is silent if the template is missing
+      // (e.g. in unit tests), so the controller still works in
+      // every environment.
+      ensureZoomStage(container);
+      attachZoomToolbar(container);
       // Bind functions if mermaid provided any (e.g., for click handlers).
       if (typeof result.bindFunctions === "function") {
         try {
@@ -300,6 +471,15 @@
         if (onStateChange) onStateChange(container, "error");
       },
       getState,
+      // v2.0.8 (feat/mermaid-zoom): zoom controls. Each method
+      // takes a `container` reference so the controller can be
+      // re-used across multiple diagrams on the same page. The
+      // zoom is applied to a lazy-created `.mermaid-zoom-stage`
+      // wrapper inside the container.
+      getZoom,
+      zoomIn,
+      zoomOut,
+      resetZoom,
       destroy() {
         controllerDestroyed = true;
         // Mark every known container as destroyed so any in-flight render

package/public/style.css

@@ -384,6 +384,64 @@ table.toolcalls tr.tool-row.highlight:hover {
   white-space: pre-wrap;
 }
 
+/* v2.0.8 (feat/mermaid-zoom): zoom toolbar + stage styles.
+   The toolbar is a small inline control set the user clicks to
+   scale the rendered diagram up or down. The .mermaid-zoom-stage
+   wrapper is what carries the CSS transform — the underlying
+   SVG keeps its own viewBox so the diagram does not reflow on
+   every zoom step. */
+.mermaid-zoom-toolbar {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  margin: 4px 0;
+  padding: 2px 6px;
+  background: var(--panel, #f8fafc);
+  border: 1px solid var(--border, #cbd5e1);
+  border-radius: 4px;
+  font-size: 12px;
+  user-select: none;
+}
+.mermaid-zoom-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 28px;
+  height: 24px;
+  padding: 0 6px;
+  background: #fff;
+  border: 1px solid var(--border, #cbd5e1);
+  border-radius: 3px;
+  font-family: inherit;
+  font-size: 12px;
+  color: #0f172a;
+  cursor: pointer;
+  transition: background 0.1s ease-in-out;
+}
+.mermaid-zoom-btn:hover {
+  background: #e2e8f0;
+}
+.mermaid-zoom-btn:focus-visible {
+  outline: 2px solid #2563eb;
+  outline-offset: 1px;
+}
+.mermaid-zoom-btn:active {
+  background: #cbd5e1;
+}
+.mermaid-zoom-stage {
+  /* The wrapper that carries the transform. `transform-origin:
+     top left` ensures the diagram grows down-right rather than
+     re-centering (which would look jumpy). The transform itself
+     is set inline by `MermaidRenderer.applyZoom` so the JS
+     state is the single source of truth. */
+  display: inline-block;
+  transform-origin: top left;
+  transition: transform 0.12s ease-out;
+  /* Allow the zoomed content to overflow horizontally; the
+     surrounding container will get its own scroll bar if needed. */
+  max-width: 100%;
+}
+
 .hint {
   margin-top: 8px;
   font-size: 12px;

package/public/tool-call-detail.js

@@ -159,6 +159,64 @@
   // Render
   // -----------------------------------------------------------------------
 
+  /**
+   * v2.0.8 (fix/tool-call-loading-skeleton): remove the
+   * `.monaco-skeleton` element (and its `.monaco-skeleton-hint`
+   * child) from `container` so the animated loading block
+   * does NOT remain as a sibling of the mounted editor or
+   * fallback. Without this, the success branch
+   * (`monaco.editor.create(container, ...)`) leaves the
+   * skeleton in place because Monaco ADDS the editor widget
+   * to the container rather than replacing its contents. The
+   * fallback and error branches happen to clear the container
+   * via `innerHTML = "..."`, but calling this helper from
+   * every branch is the single source of truth — the
+   * `innerHTML = "..."` calls become redundant (and we drop
+   * them) so there is exactly one place that owns the
+   * "skeleton is gone now" invariant.
+   *
+   * Side effect: emits
+   *   console.debug("[trace] tool-call.loading.hide", { filePath, branch })
+   * so the host OTel pipeline and the visual-verify Playwright
+   * script can observe the trace path. `branch` is one of
+   *   "success" — Monaco editor is now mounted
+   *   "fallback" — Monaco timed out, `<pre>` fallback rendered
+   *   "error"   — fetch / Monaco both failed
+   *
+   * The function is intentionally idempotent and side-effect-
+   * free aside from the trace log: calling it twice on the
+   * same container is a no-op the second time.
+   *
+   * @param {HTMLElement|null} container
+   * @param {"success"|"fallback"|"error"} branch
+   */
+  function hideLoadingSkeleton(container, branch) {
+    if (!container || !container.querySelector) return;
+    const skeleton = container.querySelector(".monaco-skeleton");
+    if (skeleton && skeleton.parentNode) {
+      skeleton.parentNode.removeChild(skeleton);
+    }
+    // v2.0.3 also injected a `.monaco-skeleton-hint` text node —
+    // in the success branch this is the *only* visible leftover
+    // (the skeleton div itself is removed as part of the editor
+    // mount, but the hint text node is a separate element). Belt-
+    // and-braces: drop the hint too if it's still around.
+    const hint = container.querySelector(".monaco-skeleton-hint");
+    if (hint && hint.parentNode) {
+      hint.parentNode.removeChild(hint);
+    }
+    const filePath =
+      (container.getAttribute && container.getAttribute("data-file-path")) ||
+      null;
+    try {
+      if (typeof console !== "undefined" && typeof console.debug === "function") {
+        console.debug("[trace] tool-call.loading.hide", { filePath, branch });
+      }
+    } catch (_) {
+      // ignore — tracing must never break the controller
+    }
+  }
+
   /**
    * v2.0.4 (Task #2690): hydrate a single monaco container with the
    * skeleton + load + fallback lifecycle. Used by BOTH the dedicated
@@ -206,16 +264,31 @@
             '<div class="monaco-placeholder monaco-error">Monaco failed to load and the file is not accessible: <code>' +
             escapeHtml(filePath) + '</code></div>';
         }
+        // v2.0.8: explicitly drop the skeleton before the innerHTML
+        // swap completes — guarantees the trace fires even if
+        // someone later refactors the innerHTML to a different
+        // string. The redundant removal is cheap (no DOM match
+        // in the success branch → no-op).
+        hideLoadingSkeleton(monacoContainer, file ? "fallback" : "error");
         return;
       }
       if (!file) {
         monacoContainer.innerHTML = `<div class="monaco-placeholder monaco-error">File not accessible (sandboxed or missing): <code>${escapeHtml(filePath)}</code></div>`;
+        hideLoadingSkeleton(monacoContainer, "error");
         return;
       }
       const language = monacoContainer.getAttribute("data-language") || "plaintext";
       // v2.0.3: use the current theme (vs-dark for dark, vs for light).
       // Bug E fix — the default 'vs' is white-on-grey and unreadable on
       // dark pages.
+      // v2.0.8 (fix/tool-call-loading-skeleton): drop the
+      // skeleton BEFORE `monaco.editor.create` so the editor
+      // mounts into a clean container. Monaco's `create()` does
+      // NOT clear the container's children, so without this
+      // step the animated skeleton would stay as a sibling of
+      // the editor widget and the user would see "Loading
+      // /path/…" stuck on screen.
+      hideLoadingSkeleton(monacoContainer, "success");
       const editor = monaco.editor.create(monacoContainer, {
         value: file.content,
         language,
@@ -245,6 +318,7 @@
       }
     } catch (err) {
       monacoContainer.innerHTML = `<div class="monaco-placeholder monaco-error">Monaco failed to load: ${escapeHtml(String((err && err.message) || err))}</div>`;
+      hideLoadingSkeleton(monacoContainer, "error");
     }
   }