@ai-setting/roy-plugin-task-show 0.6.11 → 0.8.4

package/public/app.js

@@ -104,6 +104,510 @@
   }
 })();
 
+/* ------------------------------------------------------------------------- */
+/* v0.8.1+ Mermaid source builder (top-level — shared by both IIFEs)        */
+/* ------------------------------------------------------------------------- */
+/**
+ * Build a Mermaid `flowchart TD` source string for the per-task page.
+ *
+ * v0.8.0 kept this function inside the `attachTaskPageTimeline` IIFE,
+ * but the `attachToolClickBridge` IIFE's `lifecycle-ops-loaded`
+ * listener also calls it. IIFE-local bindings are NOT visible across
+ * sibling IIFEs, so the listener threw `ReferenceError:
+ * buildMermaidSource is not defined` and the Mermaid diagram silently
+ * failed to re-render. The fix is to hoist the function (and the three
+ * helpers it uses) to script top-level so both IIFEs can see them via
+ * the script-wide closure. We also attach the function to `window` so
+ * tests + any future tooling can call it directly.
+ *
+ * Behaviour unchanged from v0.8.0: when `operations` is empty we
+ * emit a linear tool chain (matching the server's initial render);
+ * when operations are present we nest each tool under its owning
+ * operation subgraph + attach click callbacks.
+ */
+function buildMermaidSource(session, operations) {
+    const lines = [`flowchart TD`];
+    lines.push(`  classDef ok fill:#dcfce7,stroke:#16a34a,color:#064e3b`);
+    lines.push(`  classDef fail fill:#fee2e2,stroke:#dc2626,color:#7f1d1d`);
+    lines.push(`  classDef op fill:#dbeafe,stroke:#2563eb,color:#1e3a8a`);
+    lines.push(`  classDef runtime fill:#ede9fe,stroke:#6d28d9,color:#3b0764`);
+    lines.push(`  classDef bookend fill:#f1f5f9,stroke:#475569,color:#0f172a`);
+    lines.push(`  task_start([Task #${session.taskId} start]):::runtime`);
+
+    const ops = Array.isArray(operations) ? operations.slice().sort((a, b) => (a.sequence || 0) - (b.sequence || 0)) : [];
+    const toolCalls = session.toolCalls || [];
+
+    if (ops.length === 0) {
+      // No operation data yet — fall back to a single linear chain
+      // matching the server's initial render.
+      let prev = "task_start";
+      if (toolCalls.length === 0) {
+        lines.push(`  task_end([end]):::runtime`);
+        lines.push(`  ${prev} --> task_end`);
+        return lines.join("\n");
+      }
+      toolCalls.forEach((call) => {
+        const nodeId = `t${call.sequence}`;
+        const head = escapeMermaid(`${call.sequence}. ${call.toolName}${call.hasAttachment ? " \ud83d\udcce" : ""}`);
+        const status = call.success ? "ok" : "FAIL";
+        lines.push(`  ${nodeId}["${head}<br/><small>${call.durationMs}ms \u00b7 ${status}</small>"]`);
+        lines.push(`  class ${nodeId} ${call.success ? "ok" : "fail"}`);
+        lines.push(`  click ${nodeId} call __toolClick("${call.sequence}")`);
+        lines.push(`  ${prev} --> ${nodeId}`);
+        prev = nodeId;
+      });
+      const endLabel = session.status === "failed" ? `\u274c Task ${session.status}` : (session.status === "completed" ? `\u2705 Task ${session.status}` : "end");
+      lines.push(`  task_end([${endLabel}]):::runtime`);
+      lines.push(`  ${prev} --> task_end`);
+      return lines.join("\n");
+    }
+
+    // With operations: bucket tools by op and render subgraphs.
+    // (Same heuristic as `assignToolsToOps` in the server module.)
+    const sortedOps = ops.slice().sort((a, b) => String(a.timestamp).localeCompare(String(b.timestamp)));
+    const opMs = sortedOps.map((o) => ({ op: o, ms: parseIsoToMs(o.timestamp) }));
+    const buckets = { pre: [], post: [], in: {} };
+    for (const t of toolCalls) {
+      if (opMs.length === 0 || t.timestamp < opMs[0].ms) {
+        buckets.pre.push(t);
+      } else if (t.timestamp >= opMs[opMs.length - 1].ms) {
+        buckets.post.push(t);
+      } else {
+        let owner = null;
+        for (const o of opMs) {
+          if (o.ms <= t.timestamp) owner = o.op;
+          else break;
+        }
+        const key = owner ? owner.sequence : "_";
+        if (!buckets.in[key]) buckets.in[key] = [];
+        buckets.in[key].push(t);
+      }
+    }
+    let prev = "task_start";
+    if (buckets.pre.length > 0) {
+      lines.push(`  subgraph pre_task["pre-task"]`);
+      for (const t of buckets.pre) {
+        const id = `t${t.sequence}`;
+        const label = toolLabel(t);
+        lines.push(`    ${id}["${label}"]`);
+        lines.push(`    class ${id} ${t.success ? "ok" : "fail"}`);
+        lines.push(`    click ${id} call __toolClick("${t.sequence}")`);
+      }
+      lines.push(`  end`);
+      lines.push(`  ${prev} --> pre_task`);
+      prev = "pre_task";
+    }
+    for (const o of opMs) {
+      const sub = `op${o.op.sequence}`;
+      // v0.8.2 (fix/mermaid-readable-labels): replace the raw
+      // `<seq>. <title>` label (which leaked technical details like
+      // `plan_doc: docs/.../plan.md - 485 - worktree: HEAD <hash> from
+      // main`) with the concise emoji + friendly-name + short-desc
+      // label produced by getPhaseLabel(). The same logic is in
+      // `src/task-detail-mermaid.ts` (server side) so the initial
+      // server-rendered label and the client-side re-rendered label
+      // stay in sync.
+      lines.push(`  subgraph ${sub}["${getPhaseLabel(o.op)}"]`);
+      lines.push(`    direction TB`);
+      const own = buckets.in[o.op.sequence] || [];
+      if (own.length === 0) {
+        lines.push(`    ${sub}_body["\uff08\u65e0\u5de5\u5177\u8c03\u7528\uff09"]:::bookend`);
+      } else {
+        for (const t of own) {
+          const id = `t${t.sequence}`;
+          const label = toolLabel(t);
+          lines.push(`    ${id}["${label}"]`);
+          lines.push(`    class ${id} ${t.success ? "ok" : "fail"}`);
+          lines.push(`    click ${id} call __toolClick("${t.sequence}")`);
+        }
+      }
+      lines.push(`  end`);
+      lines.push(`  ${prev} --> ${sub}`);
+      prev = sub;
+    }
+    if (buckets.post.length > 0) {
+      lines.push(`  subgraph post_task["post-task"]`);
+      for (const t of buckets.post) {
+        const id = `t${t.sequence}`;
+        const label = toolLabel(t);
+        lines.push(`    ${id}["${label}"]`);
+        lines.push(`    class ${id} ${t.success ? "ok" : "fail"}`);
+        lines.push(`    click ${id} call __toolClick("${t.sequence}")`);
+      }
+      lines.push(`  end`);
+      lines.push(`  ${prev} --> post_task`);
+      prev = "post_task";
+    }
+    const endLabel = session.status === "failed" ? `\u274c Task ${session.status}` : (session.status === "completed" ? `\u2705 Task ${session.status}` : "end");
+    lines.push(`  task_end([${endLabel}]):::runtime`);
+    lines.push(`  ${prev} --> task_end`);
+    return lines.join("\n");
+}
+
+// Top-level helpers used by buildMermaidSource. Kept here so both
+// IIFEs can call them via the script-wide closure.
+function toolLabel(t) {
+    const head = escapeMermaid(`${t.sequence}. ${t.toolName}${t.hasAttachment ? " \ud83d\udcce" : ""}`);
+    return `${head}<br/><small>${t.success ? "ok" : "FAIL"} \u00b7 ${t.durationMs}ms</small>`;
+}
+
+function parseIsoToMs(s) {
+    if (!s) return 0;
+    const d = new Date(s);
+    if (!isNaN(d.getTime())) return d.getTime();
+    const n = Number(s);
+    return Number.isFinite(n) ? n : 0;
+}
+
+function escapeMermaid(s) {
+    return String(s).replace(/[<>"#]/g, "").replace(/[^A-Za-z0-9_.\-]/g, "_");
+}
+
+// ---------------------------------------------------------------------------
+// v0.8.2 (fix/mermaid-readable-labels) — human-readable Mermaid
+// phase labels. This block mirrors `src/task-detail-mermaid.ts` so
+// the client-side Mermaid re-render emits the same labels the
+// server-rendered HTML initially shows.
+//
+// When the two implementations drift, the diagram will visibly
+// "snap" between the two label formats on the first re-render. To
+// detect this in tests, we expose `getPhaseLabel` on `window` and
+// also assert label consistency in `test/mermaid-phase-labels.test.ts`.
+// ---------------------------------------------------------------------------
+
+const PHASE_LABELS_CLIENT = {
+  "init-task":       { emoji: "\ud83d\udccb", name: "\u4efb\u52a1\u7ba1\u7406", description: "task_search + task_create" },
+  "setup-worktree":  { emoji: "\ud83c\udf3f", name: "Worktree \u9694\u79bb", description: "git worktree add" },
+  "plan":            { emoji: "\ud83d\udcdd", name: "Plan", description: "brainstorming + writing-plans" },
+  "tdd-implement":   { emoji: "\ud83e\uddea", name: "TDD \u5faa\u73af", description: "RED \u2192 GREEN \u2192 REFACTOR" },
+  "code-review":     { emoji: "\ud83d\udd0d", name: "Code Review", description: "BLOCKING/IMPORTANT/MINOR/NIT" },
+  "cli-e2e-test":    { emoji: "\u2699\ufe0f", name: "CLI E2E", description: "build + test + cli smoke" },
+  "final-verify":    { emoji: "\u2705", name: "\u6700\u7ec8\u9a8c\u8bc1", description: "8 \u9879 checklist" },
+  "merge-to-main":   { emoji: "\ud83d\udd00", name: "Merge", description: "auto_merge \u94c1\u5f8b" },
+  "summary-report":  { emoji: "\ud83d\udcca", name: "\u603b\u7ed3\u62a5\u544a", description: "reports/ summary" },
+  "task-complete":   { emoji: "\ud83c\udfc1", name: "\u4efb\u52a1\u95ed\u73af", description: "task_complete" },
+};
+
+const PHASE_ALIASES_CLIENT = {
+  // init-task
+  "init-task": "init-task", "init_task": "init-task", "inittask": "init-task",
+  "\u4efb\u52a1\u7ba1\u7406": "init-task", "\u4efb\u52a1\u521b\u5efa": "init-task",
+  "task create": "init-task", "task-create": "init-task", "create task": "init-task",
+  // setup-worktree
+  "setup-worktree": "setup-worktree", "setup_worktree": "setup-worktree",
+  "setupworktree": "setup-worktree", "worktree": "setup-worktree",
+  "worktree \u9694\u79bb": "setup-worktree", "worktree\u9694\u79bb": "setup-worktree",
+  "worktree isolation": "setup-worktree",
+  // plan
+  "plan": "plan", "planning": "plan", "\u8ba1\u5212": "plan",
+  "\u8bbe\u8ba1\u4e0e\u8ba1\u5212": "plan", "plan/design": "plan",
+  "plan doc": "plan", "planner": "plan",
+  // tdd-implement
+  "tdd": "tdd-implement", "tdd-implement": "tdd-implement",
+  "tdd_implement": "tdd-implement", "tddimplement": "tdd-implement",
+  "tdd \u5faa\u73af": "tdd-implement", "tdd cycle": "tdd-implement",
+  "red \u2192 green \u2192 refactor": "tdd-implement",
+  "red green refactor": "tdd-implement",
+  "red\u2192green\u2192refactor": "tdd-implement",
+  "implement": "tdd-implement",
+  // code-review
+  "code-review": "code-review", "code_review": "code-review",
+  "codereview": "code-review", "code review": "code-review",
+  "review": "code-review", "\u5ba1\u67e5": "code-review",
+  // cli-e2e-test
+  "cli-e2e-test": "cli-e2e-test", "cli_e2e_test": "cli-e2e-test",
+  "clie2etest": "cli-e2e-test", "cli e2e": "cli-e2e-test",
+  "cli e2e test": "cli-e2e-test", "e2e": "cli-e2e-test",
+  "e2e test": "cli-e2e-test", "smoke": "cli-e2e-test",
+  // final-verify
+  "final-verify": "final-verify", "final_verify": "final-verify",
+  "finalverify": "final-verify", "verify": "final-verify",
+  "\u6700\u7ec8\u9a8c\u8bc1": "final-verify", "verification": "final-verify",
+  // merge-to-main
+  "merge-to-main": "merge-to-main", "merge_to_main": "merge-to-main",
+  "mergetomain": "merge-to-main", "merge": "merge-to-main",
+  "merge to main": "merge-to-main", "merge-to-main.": "merge-to-main",
+  // summary-report
+  "summary-report": "summary-report", "summary_report": "summary-report",
+  "summaryreport": "summary-report", "summary": "summary-report",
+  "\u603b\u7ed3": "summary-report", "\u603b\u7ed3\u62a5\u544a": "summary-report",
+  "report": "summary-report",
+  // task-complete
+  "task-complete": "task-complete", "task_complete": "task-complete",
+  "taskcomplete": "task-complete", "\u5b8c\u6210": "task-complete",
+  "\u95ed\u73af": "task-complete", "done": "task-complete",
+  "completed": "task-complete",
+};
+
+const NOISE_FIELD_MARKERS_CLIENT = [
+  "plan_doc", "plan_doc:", "plan_doc ", "worktree:", "worktree ", "worktree \u5df2",
+  "commits:", "commits_reviewed", "commits reviewed", "commit ", "duration",
+  "files_changed", "files changed", "tests_passed", "tests_pass",
+  "tests/cli/", "tests/", "test_hello_world", "baseline",
+  "modified:", "modified ", "new:",
+  "tdd-implement", "tdd_implement", "tdd ", "tdd-",
+  "code-review", "code review", "code-review:",
+  "(test_", "scripts/", "verify-installed", "verify-installed:",
+  "HEAD=", "HEAD:",
+];
+
+/** Normalise a phase-name string for alias lookup. */
+function normaliseAliasKeyClient(raw) {
+  return String(raw || "")
+    .toLowerCase()
+    .replace(/[\u2014\u2013_]+/g, "-")
+    .replace(/[()\uFF08\uFF09\u3010\u3011\u3010\u3010\u300C\u300D\u3001,,\.\u3002::;;\uFF1B]/g, " ")
+    .replace(/\s+/g, " ")
+    .trim();
+}
+
+/** Extract `Phase N` + name from a title (matches anywhere in the string). */
+function extractPhaseInfoClient(title) {
+  if (!title) return null;
+  const m = String(title).match(/phase\s+(\d+)\s*[:\uFF1A(\s]*\s*([^\n:\uFF1A(\)\u3001,\uFF0C]+?)(?=$|\s*(?:[:\uFF1A(\)\u3001,\uFF0C]|\u5b8c\u6210|pass|fail|running|pending|[\r\n]))/i);
+  if (!m) return null;
+  let rawName = (m[2] || "").trim();
+  if (!rawName) return null;
+  // Defensive trailing-stop strip.
+  for (const stop of ["\u5b8c\u6210", "pass", "fail", "pending", "running", ":", "\uFF1A", "\u2014", "-", "\uFF0C", ",", "\u3002"]) {
+    const i = rawName.toLowerCase().lastIndexOf(stop.toLowerCase());
+    if (i >= 2 && i >= rawName.length - stop.length - 1) {
+      rawName = rawName.substring(0, i).trim();
+    }
+  }
+  if (!rawName) return null;
+  const cleaned = rawName.replace(/\s*(\u5b8c\u6210|pass|fail|pending|running)\s*$/i, "").trim();
+  return { num: m[1], name: cleaned || rawName };
+}
+
+/** Resolve a phase-name string to a canonical phaseId. */
+function resolvePhaseIdClient(phaseName) {
+  if (!phaseName) return null;
+  if (PHASE_ALIASES_CLIENT[phaseName]) return PHASE_ALIASES_CLIENT[phaseName];
+  const norm = normaliseAliasKeyClient(phaseName);
+  if (!norm) return null;
+  if (PHASE_ALIASES_CLIENT[norm]) return PHASE_ALIASES_CLIENT[norm];
+  for (const key of Object.keys(PHASE_ALIASES_CLIENT)) {
+    if (normaliseAliasKeyClient(key) === norm) return PHASE_ALIASES_CLIENT[key];
+  }
+  return null;
+}
+
+/** Sanitise a noisy title by cutting at the first known noise marker. */
+function sanitiseTitleForLabelClient(title) {
+  if (!title) return "";
+  let s = String(title);
+  const limit = Math.min(s.length, 80);
+  let cutAt = -1;
+  // 1. Cut at ": commit " / " commit " (common milestone suffix).
+  for (const m of [": commit ", " commit "]) {
+    const idx = s.indexOf(m);
+    if (idx > 0 && idx < limit && (cutAt < 0 || idx < cutAt)) cutAt = idx;
+  }
+  // 2. Cut at the first noise-marker after a known separator.
+  const seps = [" - ", " \u2014 ", " | ", " (", ": "];
+  for (const marker of NOISE_FIELD_MARKERS_CLIENT) {
+    for (const sep of seps) {
+      const idx = s.indexOf(sep + marker, 0);
+      if (idx > 0 && idx < limit && (cutAt < 0 || idx < cutAt)) cutAt = idx;
+    }
+  }
+  // 3. Cut at the first " <commit-hash>" or ": <commit-hash>".
+  const hashMatch = s.match(/[:\s]\s*[a-f0-9]{7,}\b/i);
+  if (hashMatch && hashMatch.index != null && hashMatch.index < limit && (cutAt < 0 || hashMatch.index < cutAt)) {
+    cutAt = hashMatch.index + (hashMatch[0].startsWith(":") ? 1 : 0);
+  }
+  if (cutAt > 0) s = s.substring(0, cutAt);
+  return escapeMermaid(s);
+}
+
+/**
+ * Build a human-readable Mermaid label for one operation. Mirrors
+ * `getPhaseLabel()` in `src/task-detail-mermaid.ts`. The two
+ * implementations must stay in sync — drift is detected by
+ * `test/mermaid-phase-labels.test.ts`'s renderAndParse round-trip.
+ */
+function getPhaseLabel(op) {
+  const title = (op && op.title != null ? String(op.title) : "");
+  const milestoneType = (op && op.milestoneType != null ? String(op.milestoneType) : "op");
+  // 1. Structured "Phase N: <name>" path.
+  const info = extractPhaseInfoClient(title);
+  if (info) {
+    const phaseId = resolvePhaseIdClient(info.name);
+    if (phaseId && PHASE_LABELS_CLIENT[phaseId]) {
+      const meta = PHASE_LABELS_CLIENT[phaseId];
+      return `${meta.emoji} Phase ${info.num}: ${meta.name}<br/>${meta.description}`;
+    }
+    return `\u2699\ufe0f Phase ${info.num}: ${escapeMermaid(info.name)}`;
+  }
+  // 2. Try matching the entire (short) title as a phase alias.
+  if (title.length <= 60) {
+    const fullId = resolvePhaseIdClient(title);
+    if (fullId && PHASE_LABELS_CLIENT[fullId]) {
+      const meta = PHASE_LABELS_CLIENT[fullId];
+      return `${meta.emoji} ${meta.name}<br/>${meta.description}`;
+    }
+  }
+  // 3. Substring scan: only when the title STARTS with a phase keyword.
+  const lowerStart = title.toLowerCase();
+  const startsWithPhaseHits = [
+    ["init-task", "init-task"], ["\u4efb\u52a1\u7ba1\u7406", "init-task"],
+    ["setup-worktree", "setup-worktree"], ["worktree", "setup-worktree"],
+    ["plan", "plan"], ["\u8ba1\u5212", "plan"], ["\u8bbe\u8ba1\u4e0e\u8ba1\u5212", "plan"],
+    ["tdd", "tdd-implement"], ["tdd-implement", "tdd-implement"],
+    ["review", "code-review"], ["code review", "code-review"], ["code-review", "code-review"],
+    ["cli e2e", "cli-e2e-test"], ["cli-e2e-test", "cli-e2e-test"], ["smoke", "cli-e2e-test"],
+    ["verify", "final-verify"], ["\u6700\u7ec8\u9a8c\u8bc1", "final-verify"],
+    ["merge-to-main", "merge-to-main"], ["merge to main", "merge-to-main"], ["merge", "merge-to-main"],
+    ["summary", "summary-report"], ["\u603b\u7ed3\u62a5\u544a", "summary-report"],
+    ["\u603b\u7ed3", "summary-report"], ["\u62a5\u544a", "summary-report"],
+    ["\u5b8c\u6210", "task-complete"], ["\u95ed\u73af", "task-complete"],
+  ];
+  for (const [needle, phaseId] of startsWithPhaseHits) {
+    if (lowerStart.startsWith(needle.toLowerCase())) {
+      const meta = PHASE_LABELS_CLIENT[phaseId];
+      return `${meta.emoji} ${meta.name}<br/>${meta.description}`;
+    }
+  }
+  // 4. Last resort: sanitise + neutral ⚙️.
+  const sanitised = sanitiseTitleForLabelClient(title);
+  if (sanitised) return `\u2699\ufe0f ${sanitised}`;
+  // 5. Absolute fallback: milestoneType.
+  return `\u2699\ufe0f ${escapeMermaid(milestoneType || "op")}`;
+}
+
+// Expose for tests + any tooling that wants to render the Mermaid
+// source on demand.
+if (typeof window !== "undefined") {
+    window.buildMermaidSource = buildMermaidSource;
+    window.getPhaseLabel = getPhaseLabel;
+}
+/**
+ * v0.8.0+ Mermaid ↔ tool-table bridge.
+ *
+ * The Mermaid diagram emits `click tN __toolClick("N")` callbacks for
+ * every tool node. We expose a single global `window.__toolClick` that:
+ *   1. Locates the row in `table.toolcalls` with `data-tool-id="N"`.
+ *   2. If the row is collapsed, opens the input/result <details>.
+ *   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.
+ *
+ * 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() {
+  function scrollAndHighlight(toolId) {
+    const id = String(toolId ?? "").trim();
+    if (!id) return;
+    const row = document.querySelector(`table.toolcalls tr[data-tool-id="${CSS.escape(id)}"]`);
+    if (!row) return;
+    // Expand the row's input/result <details> so the user can see the
+    // payload without an extra click.
+    row.querySelectorAll("details.tool-detail").forEach((d) => {
+      d.open = true;
+    });
+    // Scroll into view (smooth, centered). Use block:'center' so the
+    // row is roughly in the middle of the viewport.
+    try {
+      row.scrollIntoView({ behavior: "smooth", block: "center" });
+    } catch {
+      // Old browsers — try the synchronous variant.
+      try { row.scrollIntoView(); } catch (_) { /* noop */ }
+    }
+    // Flash highlight.
+    row.classList.add("highlight");
+    setTimeout(() => {
+      row.classList.remove("highlight");
+    }, 2000);
+  }
+
+  // Expose the global callback. Mermaid emits `click t1 __toolClick("1")`,
+  // so the function name is fixed and the string is the tool sequence id.
+  window.__toolClick = function (toolId) {
+    try {
+      scrollAndHighlight(toolId);
+    } catch (err) {
+      // Never let a click callback throw — Mermaid would log the error
+      // and the user would see a broken interaction.
+      // eslint-disable-next-line no-console
+      console.warn("[task-show] __toolClick failed:", err && err.message || err);
+    }
+  };
+
+  /**
+   * 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
+   * Mermaid source with the freshly-loaded operations so the diagram
+   * goes from the linear placeholder to the hierarchical view.
+   *
+   * We don't have direct access to the live `session` here (the SSE
+   * controller owns that), so we trigger a re-render via the same code
+   * path the SSE handler uses. If the SSE handler hasn't run yet (no
+   * tool calls), we still update the diagram from the operations-only
+   * path so the user immediately sees the hierarchy.
+   */
+  window.addEventListener("task-show:lifecycle-ops-loaded", () => {
+    const mermaidDiv = document.querySelector(".mermaid");
+    if (!mermaidDiv) return;
+    const ops = (window.__lifecycleOps && window.__lifecycleOps.operations) || [];
+    // Build a minimal session stub from the operations cache (we don't
+    // have the live tool calls here, but for a freshly-loaded page the
+    // server-rendered Mermaid is already in the DOM, so the SSE path
+    // will reconcile later). For the "operations-only" rebuild we
+    // synthesise a tiny session so buildMermaidSource can be called.
+    const banner = document.querySelector("[data-live-refresh][data-task-id]");
+    const taskId = banner ? Number(banner.getAttribute("data-task-id")) : 0;
+    if (!Number.isFinite(taskId) || taskId <= 0) return;
+    // Trigger SSE's applyTaskUpdate by dispatching a fake "snapshot"
+    // event with the operations (we don't have one, so just re-render
+    // directly with an empty session — the SSE handler will replace
+    // this on the first real event).
+    // Simplest: directly call the controller's update path.
+    const session = (window.__pipelineController && window.__pipelineController.lastSession) || {
+      taskId,
+      toolCalls: [],
+      status: "running",
+    };
+    if (!session.toolCalls || session.toolCalls.length === 0) {
+      // No SSE has fired yet — fetch /api/sessions/:taskId so we know
+      // what tools belong to the diagram.
+      fetch(`/api/sessions/${taskId}`, { headers: { Accept: "application/json" } })
+        .then((r) => (r.ok ? r.json() : null))
+        .then((s) => {
+          if (!s) return;
+          const source = buildMermaidSource(s, ops);
+          if (window.MermaidRenderer && window.MermaidRenderer.createMermaidController) {
+            if (!window.__mermaidController) {
+              window.__mermaidController = window.MermaidRenderer.createMermaidController({
+                idPrefix: "lifecycle-" + taskId,
+              });
+            }
+            window.__mermaidController.update(mermaidDiv, source);
+          } else {
+            mermaidDiv.textContent = source;
+          }
+        })
+        .catch(() => {
+          // Network down — leave the current diagram in place.
+        });
+      return;
+    }
+    const source = buildMermaidSource(session, ops);
+    if (window.MermaidRenderer && window.MermaidRenderer.createMermaidController) {
+      if (!window.__mermaidController) {
+        window.__mermaidController = window.MermaidRenderer.createMermaidController({
+          idPrefix: "lifecycle-" + taskId,
+        });
+      }
+      window.__mermaidController.update(mermaidDiv, source);
+    } else {
+      mermaidDiv.textContent = source;
+    }
+  });
+})();
+
 /**
  * Initialize a live timeline on the per-task page (when `data-task-id` is
  * present). We re-render the timeline on every `tool.recorded` event.
@@ -142,6 +646,15 @@
   }
 
   function applyTaskUpdate(session) {
+    // Expose the latest session for the Mermaid re-render hook
+    // (task-show:lifecycle-ops-loaded). The hook can use this to
+    // re-build the diagram with both the latest tool calls and the
+    // latest operations.
+    if (window.__pipelineController) {
+      window.__pipelineController.lastSession = session;
+    } else {
+      window.__pipelineController = { lastSession: session };
+    }
     // Update status badge.
     const badge = document.querySelector(".badge");
     if (badge) {
@@ -187,7 +700,12 @@
     // Re-render mermaid diagram.
     const mermaidDiv = document.querySelector(".mermaid");
     if (mermaidDiv) {
-      const source = buildMermaidSource(session);
+      // v0.8.0+: prefer the latest operations fetched by
+      // task-operations.js (window.__lifecycleOps) so the Mermaid shows
+      // the hierarchical view. Falls back to the linear chain when no
+      // operations are loaded yet.
+      const ops = (window.__lifecycleOps && window.__lifecycleOps.operations) || null;
+      const source = buildMermaidSource(session, ops);
       // The controller handles mermaid availability, async race protection,
       // error fallback, and idempotency. If Mermaid hasn't loaded yet
       // (window.MermaidRenderer is undefined), we fall back to writing the
@@ -250,15 +768,27 @@
       : (call.outputPreview.slice(0, 240) + (call.outputPreview.length > 240 ? "…" : ""));
     const status = call.success ? "ok" : "fail";
     const attach = call.hasAttachment ? ' <span class="attach">📎</span>' : "";
+    // v0.8.0: `data-tool-id` lets the Mermaid `__toolClick` callback
+    // scroll-into-view + highlight the right row. Default state is
+    // `collapsed` (input/output `<details>` are closed) so long-running
+    // tasks don't drown the page.
     return (
-      `<tr class="row-${status}" data-args="${escapeHtmlAttr(argsJson)}">` +
+      `<tr class="tool-row row-${status} collapsed" data-tool-id="${call.sequence}" data-args="${escapeHtmlAttr(argsJson)}">` +
         `<td class="seq">${call.sequence}</td>` +
         `<td><code>${escapeHtml(call.toolName)}</code>${attach}</td>` +
         `<td class="status status-${status}">${status}</td>` +
         `<td>${call.durationMs}</td>` +
         `<td>${escapeHtml(formatTs(call.timestamp))}</td>` +
-        `<td class="args">${escapeHtml(argsJson)}</td>` +
-        `<td class="result">${escapeHtml(preview)}</td>` +
+        `<td class="args-cell">` +
+          `<details class="tool-detail"><summary>show args</summary>` +
+            `<pre class="json">${escapeHtml(argsJson)}</pre>` +
+          `</details>` +
+        `</td>` +
+        `<td class="result-cell">` +
+          `<details class="tool-detail"><summary>show result</summary>` +
+            `<pre class="json">${escapeHtml(preview)}</pre>` +
+          `</details>` +
+        `</td>` +
       `</tr>`
     );
   }
@@ -276,32 +806,6 @@
     return out;
   }
 
-  function buildMermaidSource(session) {
-    const lines = [`flowchart TD`];
-    lines.push(`  classDef ok fill:#dcfce7,stroke:#16a34a,color:#064e3b`);
-    lines.push(`  classDef fail fill:#fee2e2,stroke:#dc2626,color:#7f1d1d`);
-    lines.push(`  classDef runtime fill:#dbeafe,stroke:#2563eb,color:#1e3a8a`);
-    lines.push(`  Start([Task #${session.taskId} start]):::runtime`);
-    let prev = "Start";
-    if (session.toolCalls.length === 0) {
-      lines.push(`  End([end]):::runtime`);
-      lines.push(`  Start --> End`);
-      return lines.join("\n");
-    }
-    session.toolCalls.forEach((call) => {
-      const nodeId = `n${call.sequence}`;
-      const label = `${call.sequence}. ${escapeMermaid(call.toolName)}${call.hasAttachment ? " 📎" : ""}`;
-      lines.push(`  ${nodeId}["${label}<br/><small>${call.durationMs}ms · ${call.success ? "ok" : "FAIL"}</small>"]`);
-      lines.push(`  class ${nodeId} ${call.success ? "ok" : "fail"}`);
-      lines.push(`  ${prev} --> ${nodeId}`);
-      prev = nodeId;
-    });
-    const endLabel = session.status === "failed" ? `❌ Task ${session.status}` : `✅ Task ${session.status}`;
-    lines.push(`  End([${endLabel}]):::runtime`);
-    lines.push(`  ${prev} --> End`);
-    return lines.join("\n");
-  }
-
   function formatTs(ms) {
     try {
       return new Date(ms).toISOString().replace("T", " ").slice(0, 19);
@@ -323,10 +827,6 @@
     return clone;
   }
 
-  function escapeMermaid(s) {
-    return String(s).replace(/[<>"#]/g, "").replace(/[^A-Za-z0-9_.\-]/g, "_");
-  }
-
   function escapeHtml(s) {
     return String(s)
       .replace(/&/g, "&amp;")