@ai-setting/roy-plugin-task-show 2.6.3 → 2.6.5

package/dist/server.js

@@ -1825,7 +1825,7 @@ export function renderTaskPage(session, opts = {}) {
 
     <div class="task-v2-main">
       <section class="panel panel-lifecycle" data-lifecycle-root data-task-id="${session.taskId}">
-        <h2>Task lifecycle + tools <span class="lifecycle-hint">click any tool node to highlight its row below</span> <button type="button" class="collapse-toggle" data-lifecycle-toggle aria-expanded="true" aria-label="Collapse lifecycle diagram"><span class="toggle-icon">▼</span></button></h2>
+        <h2>Task lifecycle + tools <span class="lifecycle-hint">click any tool node to highlight its row below · URL auto-updates as <code>?tool=N</code> for sharing</span> <button type="button" class="collapse-toggle" data-lifecycle-toggle aria-expanded="true" aria-label="Collapse lifecycle diagram"><span class="toggle-icon">▼</span></button></h2>
         <div data-lifecycle-body><div class="mermaid" data-mermaid-lifecycle>${initialMermaid}</div></div>
       </section>
 

package/package.json

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

package/public/app.js

@@ -741,12 +741,61 @@ if (typeof window !== "undefined") {
  *   3. Scrolls the row into view (smooth, centered).
  *   4. Adds the `highlight` class for 2 seconds so the user sees a
  *      yellow flash pointing at the row.
+ *   5. (v2.6.4 / Task #3190) Persists the current tool id to the URL
+ *      via `history.replaceState` so the user can share / bookmark
+ *      the link (`?tool=N` / `?tool_index=N`) and the page boots
+ *      straight onto that row. The query-param name is `tool`
+ *      (alias `tool_index` accepted for the user-task wording).
  *
  * If the page has no `table.toolcalls` (e.g. the index page), the
  * function is a no-op. We also defensively no-op on invalid IDs so
  * Mermaid can never break the page by firing a stale callback.
  */
 (function attachToolClickBridge() {
+  // v2.6.4 (Task #3190): shared URL helpers. We keep them inside the
+  // IIFE so the global namespace stays clean, but `scrollAndHighlight`
+  // and `initFromUrl` both go through `setToolInUrl` so the param
+  // name + value format is in exactly one place.
+  const TOOL_PARAM = "tool";
+  const TOOL_INDEX_ALIAS = "tool_index";
+
+  function getCurrentToolIdFromUrl() {
+    try {
+      const sp = new URLSearchParams(window.location.search);
+      // Accept both `?tool=N` (canonical) and `?tool_index=N`
+      // (user-task wording). `tool_index` wins if both are present.
+      const raw = sp.get(TOOL_INDEX_ALIAS) || sp.get(TOOL_PARAM);
+      if (!raw) return "";
+      const trimmed = String(raw).trim();
+      // Accept only positive integers — defends against injection.
+      if (!/^[1-9][0-9]*$/.test(trimmed)) return "";
+      return trimmed;
+    } catch (_) {
+      return "";
+    }
+  }
+
+  function setToolInUrl(toolId) {
+    try {
+      const id = String(toolId ?? "").trim();
+      const url = new URL(window.location.href);
+      if (!/^[1-9][0-9]*$/.test(id)) {
+        url.searchParams.delete(TOOL_PARAM);
+        url.searchParams.delete(TOOL_INDEX_ALIAS);
+      } else {
+        url.searchParams.set(TOOL_PARAM, id);
+        // Keep both names in sync — `tool_index` mirrors `tool` so
+        // either spelling resolves when the page is reloaded.
+        url.searchParams.set(TOOL_INDEX_ALIAS, id);
+      }
+      // replaceState (not pushState) so the browser back button does
+      // not fill up with one history entry per mermaid click.
+      window.history.replaceState(null, "", url.toString());
+    } catch (_) {
+      // URL APIs unavailable — silently noop.
+    }
+  }
+
   function scrollAndHighlight(toolId) {
     const id = String(toolId ?? "").trim();
     if (!id) return;
@@ -770,6 +819,9 @@ if (typeof window !== "undefined") {
     setTimeout(() => {
       row.classList.remove("highlight");
     }, 2000);
+    // v2.6.4 (Task #3190): persist the chosen tool id in the URL so
+    // it survives reload + can be shared / bookmarked.
+    setToolInUrl(id);
   }
 
   // Expose the global callback. Mermaid emits `click t1 __toolClick("1")`,
@@ -785,6 +837,55 @@ if (typeof window !== "undefined") {
     }
   };
 
+  // v2.6.4 (Task #3190): boot-time hydration. If the URL carries a
+  // `?tool=N` (or `?tool_index=N`) query param we scroll + highlight
+  // the matching row on load. This makes mermaid click → share-link
+  // → page reload a round-trippable flow.
+  function initFromUrl() {
+    const toolId = getCurrentToolIdFromUrl();
+    if (!toolId) return;
+    // Defer to next frame so the table layout is settled and
+    // scrollIntoView measures correct coordinates. Without this the
+    // scroll can land on the wrong spot on slow browsers.
+    const run = () => {
+      try {
+        // Prefer calling window.__toolClick so any wrapper installed
+        // later by tool-call-detail.js (panel render + file-tree
+        // highlight) picks up the click for free. Fall back to the
+        // bare `scrollAndHighlight` if the global hasn't been wired
+        // yet — the wrapper is installed synchronously when this
+        // module loads, so this branch is mainly a safety net.
+        if (typeof window.__toolClick === "function") {
+          window.__toolClick(toolId);
+        } else {
+          scrollAndHighlight(toolId);
+        }
+      } catch (err) {
+        // eslint-disable-next-line no-console
+        console.warn("[task-show] initFromUrl failed:", err && err.message || err);
+      }
+    };
+    if (typeof window.requestAnimationFrame === "function") {
+      window.requestAnimationFrame(() => window.setTimeout(run, 0));
+    } else {
+      window.setTimeout(run, 0);
+    }
+  }
+
+  // v2.6.4 (Task #3190): handle back/forward navigation — when the
+  // user pops to a previous tool id via the browser history we want
+  // the table to follow.
+  window.addEventListener("popstate", () => {
+    initFromUrl();
+  });
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", initFromUrl, { once: true });
+  } else {
+    // Script loaded after DOM is ready (rare for this page but safe).
+    initFromUrl();
+  }
+
   /**
    * v0.8.0+ Mermaid re-render hook. When `task-operations.js` finishes
    * a fetch it fires `task-show:lifecycle-ops-loaded`. We re-build the