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

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;
@@ -437,6 +495,51 @@ details summary {
   font-weight: normal;
 }
 
+/* ------------------------------------------------------------------------- */
+/* v2.0.9: collapse/expand toggle for pipeline + lifecycle sections         */
+/* ------------------------------------------------------------------------- */
+
+.collapse-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  margin-left: 8px;
+  padding: 0;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  background: var(--panel-2);
+  color: var(--text);
+  font-size: 12px;
+  line-height: 1;
+  cursor: pointer;
+  vertical-align: middle;
+  transition: background 0.15s ease, border-color 0.15s ease;
+}
+
+.collapse-toggle:hover {
+  background: var(--bg);
+  border-color: var(--muted);
+}
+
+.collapse-toggle:focus-visible {
+  outline: 2px solid var(--accent, #4a9);
+  outline-offset: 1px;
+}
+
+.toggle-icon {
+  display: inline-block;
+  font-size: 10px;
+  line-height: 1;
+}
+
+/* When a section has the `collapsed` class, hide its body container. */
+[data-pipeline-root].collapsed [data-pipeline-body],
+[data-lifecycle-root].collapsed [data-lifecycle-body] {
+  display: none;
+}
+
 .op-timeline {
   list-style: none;
   margin: 0;

package/public/task-operations.js

@@ -79,6 +79,15 @@
    * length of description + processDescription exceeds 600 chars
    * (long descriptions should not blow the panel up vertically).
    */
+  /**
+   * v2.0.9: render the collapse/expand toggle button. Matches the
+   * server-side `renderPipelineToggle()` output so swapIn re-renders
+   * stay consistent.
+   */
+  function renderPipelineToggle() {
+    return ' <button type="button" class="collapse-toggle" data-pipeline-toggle aria-expanded="true" aria-label="Collapse pipeline"><span class="toggle-icon">▼</span></button>';
+  }
+
   function renderPipelineHtml(ops, stale, taskId) {
     var nodes = (ops || []).map(function (op) {
       var label = statusLabel(op.milestoneType);
@@ -123,19 +132,20 @@
     }).join("");
 
     var badge = renderSseBadge(stale, currentSseState);
+    var toggle = renderPipelineToggle();
     var idAttr = taskId ? ' data-task-id="' + esc(taskId) + '"' : "";
     if (!ops || ops.length === 0) {
       return (
         '<section class="panel panel-pipeline"' + idAttr + ' data-pipeline-root>' +
-          '<h2>Task lifecycle pipeline' + badge + '</h2>' +
-          '<p class="empty">No operations recorded yet.</p>' +
+          '<h2>Task lifecycle pipeline' + badge + toggle + '</h2>' +
+          '<div data-pipeline-body><p class="empty">No operations recorded yet.</p></div>' +
         '</section>'
       );
     }
     return (
       '<section class="panel panel-pipeline"' + idAttr + ' data-pipeline-root>' +
-        '<h2>Task lifecycle pipeline' + badge + '</h2>' +
-        '<ol class="op-timeline" role="list">' + nodes + '</ol>' +
+        '<h2>Task lifecycle pipeline' + badge + toggle + '</h2>' +
+        '<div data-pipeline-body><ol class="op-timeline" role="list">' + nodes + '</ol></div>' +
       '</section>'
     );
   }
@@ -168,10 +178,11 @@
 
   function renderErrorHtml(code, taskId) {
     var idAttr = taskId ? ' data-task-id="' + esc(taskId) + '"' : "";
+    var toggle = renderPipelineToggle();
     return (
       '<section class="panel panel-pipeline"' + idAttr + ' data-pipeline-error="' + esc(code) + '" data-pipeline-root>' +
-        '<h2>Task lifecycle pipeline</h2>' +
-        '<div class="pipeline-error">' +
+        '<h2>Task lifecycle pipeline' + toggle + '</h2>' +
+        '<div class="pipeline-error" data-pipeline-body>' +
           '<p>Could not load operations: <code>' + esc(code) + '</code></p>' +
           '<button type="button" class="btn btn-retry" data-pipeline-retry>Retry</button>' +
         '</div>' +
@@ -184,16 +195,31 @@
     return document.querySelector('[data-pipeline-root]');
   }
 
-  /** Replace the placeholder with new HTML, preserving the scroll position. */
+  /** Replace the placeholder with new HTML, preserving the scroll position.
+   *
+   * v2.0.9: also restores the collapsed state from localStorage so
+   * SSE re-renders don't lose the user's collapse/expand preference.
+   */
   function swapIn(newHtml) {
     var root = findRoot();
     if (!root) return;
+    var wasCollapsed = root.classList.contains("collapsed");
     var scrollY = window.scrollY;
     var tmp = document.createElement("div");
     tmp.innerHTML = newHtml;
     var newEl = tmp.firstElementChild;
     if (!newEl) return;
     root.parentNode.replaceChild(newEl, root);
+    // Restore collapsed state after swap-in
+    if (wasCollapsed) {
+      newEl.classList.add("collapsed");
+      var btn = newEl.querySelector("[data-pipeline-toggle]");
+      if (btn) {
+        btn.setAttribute("aria-expanded", "false");
+        var icon = btn.querySelector(".toggle-icon");
+        if (icon) icon.textContent = "▶";
+      }
+    }
     // Don't restore scrollY unless the user has actually scrolled
     if (scrollY > 0) window.scrollTo(0, scrollY);
   }
@@ -431,6 +457,118 @@
     if (this.timer) clearTimeout(this.timer);
   };
 
+  // ─── v2.0.9: collapse/expand toggle ──────────────────────────────
+
+  /** localStorage keys for persisting collapse state. */
+  var PIPELINE_COLLAPSE_KEY = "roy-task-show:pipeline-collapsed";
+  var LIFECYCLE_COLLAPSE_KEY = "roy-task-show:lifecycle-collapsed";
+
+  /**
+   * v2.0.9: Apply the collapsed/expanded state to a section element.
+   * Toggles the `collapsed` CSS class, updates `aria-expanded` on the
+   * toggle button, and swaps the ▼/▶ icon.
+   */
+  function applyCollapseState(section, toggleBtn, collapsed) {
+    if (!section || !toggleBtn) return;
+    var icon = toggleBtn.querySelector(".toggle-icon");
+    if (collapsed) {
+      section.classList.add("collapsed");
+      toggleBtn.setAttribute("aria-expanded", "false");
+      if (icon) icon.textContent = "▶";
+    } else {
+      section.classList.remove("collapsed");
+      toggleBtn.setAttribute("aria-expanded", "true");
+      if (icon) icon.textContent = "▼";
+    }
+  }
+
+  /**
+   * v2.0.9: Wire up the collapse/expand toggle for a section.
+   *
+   * @param {string} sectionSelector  — e.g. '[data-pipeline-root]'
+   * @param {string} toggleSelector   — e.g. '[data-pipeline-toggle]'
+   * @param {string} storageKey       — localStorage key for persistence
+   */
+  function wireCollapseToggle(sectionSelector, toggleSelector, storageKey) {
+    var sections = document.querySelectorAll(sectionSelector);
+    for (var i = 0; i < sections.length; i++) {
+      (function (section) {
+        var toggleBtn = section.querySelector(toggleSelector);
+        if (!toggleBtn) return;
+        // Restore saved preference on load
+        var saved = null;
+        try {
+          saved = localStorage.getItem(storageKey);
+        } catch (_) { /* localStorage may be unavailable */ }
+        if (saved === "true") {
+          applyCollapseState(section, toggleBtn, true);
+        }
+        // Click handler
+        toggleBtn.addEventListener("click", function (e) {
+          e.preventDefault();
+          e.stopPropagation();
+          var collapsed = !section.classList.contains("collapsed");
+          applyCollapseState(section, toggleBtn, collapsed);
+          try {
+            localStorage.setItem(storageKey, String(collapsed));
+          } catch (_) { /* ignore quota / privacy errors */ }
+        });
+      })(sections[i]);
+    }
+  }
+
+  /**
+   * v2.0.9: Initialize collapse toggles. Pipeline uses event delegation
+   * (initPipelineToggleDelegation) because swapIn replaces it on every
+   * SSE update. Lifecycle section is never re-rendered by swapIn, so
+   * direct binding is fine. This function also restores saved
+   * preferences for BOTH sections on initial load.
+   */
+  function initCollapseToggles() {
+    // Restore pipeline saved state (the delegation handler manages
+    // clicks, but initial state restoration must happen here).
+    var pipelineRoot = document.querySelector("[data-pipeline-root]");
+    if (pipelineRoot) {
+      var pipelineToggle = pipelineRoot.querySelector("[data-pipeline-toggle]");
+      if (pipelineToggle) {
+        var pipelineSaved = null;
+        try { pipelineSaved = localStorage.getItem(PIPELINE_COLLAPSE_KEY); } catch (_) {}
+        if (pipelineSaved === "true") {
+          applyCollapseState(pipelineRoot, pipelineToggle, true);
+        }
+      }
+    }
+    // Lifecycle section: direct binding + restore
+    wireCollapseToggle("[data-lifecycle-root]", "[data-lifecycle-toggle]", LIFECYCLE_COLLAPSE_KEY);
+  }
+
+  /**
+   * v2.0.9: Document-level event delegation for pipeline toggle clicks.
+   * Since swapIn replaces the pipeline section on every SSE update,
+   * per-element listeners are lost. This delegated handler catches
+   * clicks on any current or future [data-pipeline-toggle] button.
+   */
+  function initPipelineToggleDelegation() {
+    document.addEventListener("click", function (e) {
+      var t = e.target;
+      // Walk up to find the toggle button (click may hit the icon span)
+      while (t && t !== document) {
+        if (t.matches && t.matches("[data-pipeline-toggle]")) break;
+        t = t.parentNode;
+      }
+      if (!t || !t.matches || !t.matches("[data-pipeline-toggle]")) return;
+      e.preventDefault();
+      e.stopPropagation();
+      var section = t.closest("[data-pipeline-root]");
+      if (!section) return;
+      var collapsed = !section.classList.contains("collapsed");
+      applyCollapseState(section, t, collapsed);
+      try {
+        localStorage.setItem(PIPELINE_COLLAPSE_KEY, String(collapsed));
+      } catch (_) { /* ignore */ }
+    });
+  }
+
   function boot() {
     var root = findRoot();
     if (!root) return;
@@ -448,6 +586,11 @@
     // tool.called events patch the pipeline DOM in place without
     // waiting for the next polling tick.
     window.__pipelineController.attachSse();
+    // v2.0.9: wire collapse/expand toggles for pipeline + lifecycle.
+    // Pipeline uses event delegation (survives swapIn re-renders);
+    // lifecycle uses direct binding (never re-rendered by swapIn).
+    initPipelineToggleDelegation();
+    initCollapseToggles();
   }
 
   // v0.9.0: expose renderPipelineHtml to the global scope so other

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");
     }
   }