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

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();
+  }
+})();