@ai-setting/roy-plugin-task-show 0.3.0 → 0.5.0

package/dist/url-injector.js.map

@@ -1 +1 @@
-{"version":3,"file":"url-injector.js","sourceRoot":"","sources":["../src/url-injector.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAIH;;;GAGG;AACH,MAAM,UAAU,qBAAqB,CACnC,GAA0C,EAC1C,MAAuB;IAEvB,qDAAqD;IACrD,MAAM,IAAI,GAAG,GAAG,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC;IAC7D,OAAO,UAAU,IAAI,IAAI,GAAG,CAAC,IAAI,SAAS,kBAAkB,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC;AACjF,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,aAAa,CAC3B,GAA0C;IAE1C,MAAM,IAAI,GAAG,GAAG,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC;IAC7D,OAAO,UAAU,IAAI,IAAI,GAAG,CAAC,IAAI,GAAG,CAAC;AACvC,CAAC;AAeD;;;;;;;GAOG;AACH,MAAM,UAAU,sBAAsB,CAAC,IAItC;IACC,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;IAElC,IAAI,CAAC,GAAG,CAAC,gBAAgB;QAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;IACrD,IAAI,CAAC,GAAG;QAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;IAEpC,MAAM,MAAM,GAAG,GAAG,EAAE,MAAM,IAAI,GAAG,EAAE,UAAU,IAAI,IAAI,CAAC;IACtD,IAAI,CAAC,MAAM,IAAI,OAAO,MAAM,CAAC,MAAM,KAAK,QAAQ,EAAE,CAAC;QACjD,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;IAC5B,CAAC;IAED,MAAM,GAAG,GAAG,qBAAqB,CAAC,GAAG,EAAE,MAAM,CAAC,CAAC;IAC/C,MAAM,MAAM,GACV,+BAA+B,GAAG,KAAK;QACvC,2CAA2C,CAAC;IAC9C,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,GAAG,MAAM,CAAC;IACzC,MAAM,CAAC,MAAM,GAAG,SAAS,CAAC;IAE1B,qEAAqE;IACrE,qDAAqD;IACrD,IAAI,OAAO,MAAM,CAAC,QAAQ,KAAK,QAAQ,IAAI,MAAM,CAAC,QAAQ,KAAK,IAAI,EAAE,CAAC;QACnE,MAAM,CAAC,QAAoC,CAAC,sBAAsB,GAAG,GAAG,CAAC;IAC5E,CAAC;IAED,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC;AACnD,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,yBAAyB,CACvC,MAAc,EACd,GAA0C,EAC1C,MAAuB,EACvB,aAAuB,EAAE;IAEzB,MAAM,GAAG,GAAG,qBAAqB,CAAC,GAAG,EAAE,MAAM,CAAC,CAAC;IAC/C,MAAM,MAAM,GACV,+BAA+B,GAAG,GAAG;QACrC,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IAC/E,OAAO,MAAM,GAAG,MAAM,CAAC;AACzB,CAAC"}
+{"version":3,"file":"url-injector.js","sourceRoot":"","sources":["../src/url-injector.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAIH;;;GAGG;AACH,MAAM,UAAU,qBAAqB,CACnC,GAA0C,EAC1C,MAAuB;IAEvB,qDAAqD;IACrD,MAAM,IAAI,GAAG,GAAG,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC;IAC7D,OAAO,UAAU,IAAI,IAAI,GAAG,CAAC,IAAI,SAAS,kBAAkB,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC;AACjF,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,aAAa,CAC3B,GAA0C;IAE1C,MAAM,IAAI,GAAG,GAAG,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC;IAC7D,OAAO,UAAU,IAAI,IAAI,GAAG,CAAC,IAAI,GAAG,CAAC;AACvC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ai-setting/roy-plugin-task-show",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "roy-agent plugin: visualize task solving process via tool call flow on a local web service",
   "type": "module",
   "main": "dist/index.js",
@@ -15,6 +15,7 @@
   "scripts": {
     "build": "tsc -p tsconfig.json",
     "dev": "tsc -p tsconfig.json --watch",
+    "typecheck": "tsc --noEmit -p tsconfig.json",
     "test": "bun test",
     "start:demo": "bun run scripts/run-demo.ts",
     "verify": "bun run scripts/verify-service.ts",

package/plugin.json

@@ -1,8 +1,8 @@
 {
   "name": "@ai-setting/roy-plugin-task-show",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "type": "tool-plugin",
-  "description": "Visualize the tool call chain of a task on a local web service and inject the URL into tool results. Subscribes to tool:before.execute (for self-managed timing), tool:after.execute, task:after.complete (preferred, 2026-07-10+) and task:after.update (legacy fallback).",
+  "description": "Visualize the tool call chain of a task on a local web service with real-time SSE updates. 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).",
   "main": "dist/index.js",
   "hooks": [
     {
@@ -11,15 +11,23 @@
     },
     {
       "point": "tool:after.execute",
-      "purpose": "Collect every tool invocation: tool name, args, result, timing, success"
+      "purpose": "Collect every tool invocation: tool name, args, result, timing, success. Broadcasts a `tool.recorded` SSE event so the frontend timeline + progress bar update live."
+    },
+    {
+      "point": "task:before.create",
+      "purpose": "Open a fresh TaskSession before the task runs (v0.5.0+). Mints the visualization URL and broadcasts a `task.created` SSE event so the UI can render the card immediately, even if no tool call fires."
+    },
+    {
+      "point": "task:after.create",
+      "purpose": "Mark the session ready for tracking (v0.5.0+). For hosts that emit only this hook (no `task:before.create`), the plugin opens the session here. Broadcasts a `task.created` SSE event when the session is newly minted."
     },
     {
       "point": "task:after.complete",
-      "purpose": "PREFERRED hook point (roy-agent 2026-07-10+). When a task transitions to a terminal status (completed/failed/cancelled/timeout), finalize the session and inject the visualization URL into the last tool result. terminalStatus field is explicit \u2014 no status filtering required."
+      "purpose": "PREFERRED hook point (roy-agent 2026-07-10+). When a task transitions to a terminal status (completed/failed/cancelled), finalize the session and broadcast a `task.completed` SSE event. terminalStatus field is explicit — no status filtering required. The handler dedupes against any `task:after.update` that may also fire on the same transition."
     },
     {
       "point": "task:after.update",
-      "purpose": "LEGACY fallback. Hosts predating the AFTER_COMPLETE hook point only expose AFTER_UPDATE; the plugin filters for terminal status internally and dedupes against any AFTER_COMPLETE that might also fire on the new code path."
+      "purpose": "GENERIC status update hook (v0.5.0+). Used for non-terminal transitions (running → paused → running) AND as a legacy fallback for hosts predating the AFTER_COMPLETE hook point. Broadcasts `task.updated` for non-terminal status, `task.completed` for terminal status. The internal dedup set guarantees at most one terminal broadcast per task even if both hooks fire."
     }
   ],
   "commands": [
@@ -49,17 +57,31 @@
       "default": 50,
       "description": "Maximum number of completed tasks to keep in memory (older ones are evicted)"
     },
-    "urlInjectEnabled": {
-      "type": "boolean",
-      "default": true,
-      "description": "Append a \ud83d\udcca visualization URL to the last tool result when a task completes"
-    },
     "publicDir": {
       "type": "string",
       "default": "public",
       "description": "Directory holding the static visualization frontend (HTML/JS/CSS)"
     }
   },
+  "endpoints": {
+    "index": "GET / — index of recent task sessions",
+    "taskDetail": "GET /task/:taskId — detail page (mermaid flow + tables)",
+    "apiSessions": "GET /api/sessions — JSON list of sessions",
+    "apiSessionDetail": "GET /api/sessions/:taskId — JSON detail of one session",
+    "apiEvents": "GET /api/events — Server-Sent Events stream (real-time push)",
+    "static": "GET /static/* — static frontend assets (CSS/JS)"
+  },
+  "sse": {
+    "events": [
+      "snapshot — initial state dump on connect",
+      "task.created — new task session opened",
+      "task.updated — non-terminal status change",
+      "task.completed — task transitioned to a terminal status",
+      "tool.recorded — tool call appended to a session"
+    ],
+    "heartbeatMs": 15000,
+    "snapshotFrame": "event: snapshot\ndata: {type:'snapshot', data:{sessions:[...]}}\n\n"
+  },
   "roy-agent": {
     "minVersion": "1.6.0",
     "extends": "BasePlugin",
@@ -67,4 +89,4 @@
   },
   "repository": "github:ai-setting/roy-plugin-task-visualize",
   "bugs": "https://github.com/ai-setting/roy-plugin-task-visualize/issues"
-}
+}

package/public/app.js

@@ -1,27 +1,49 @@
 /* ------------------------------------------------------------------------- */
-/* roy-plugin-task-show — small progressive enhancements                     */
+/* roy-plugin-task-show — frontend with SSE real-time updates                 */
 /* ------------------------------------------------------------------------- */
 
 /**
- * Allow each <tr data-args="..."> to expand a JSON dialog on click.
- * `data-args` carries a single-line JSON string; we pretty-print it on demand.
+ * Lightweight in-browser state for the index page:
+ *   - map of taskId → session
+ *   - simple debounce/throttle for re-render
+ *
+ * The page renders:
+ *   - a "connection" indicator (green when SSE is up, red when on fallback)
+ *   - a stats summary (total sessions, running, completed, failed)
+ *   - a task grid (one card per task with status badge + progress bar)
+ *   - a live timeline (most recent tool calls across all tasks)
+ *
+ * Update path:
+ *   1. Open an EventSource on /api/events
+ *   2. On `snapshot`: replace local state with the server's snapshot
+ *   3. On `task.created` / `task.updated` / `task.completed`:
+ *        replace or insert the session in state, then re-render
+ *   4. On `tool.recorded`:
+ *        append the tool call to the session, update progress, re-render
+ *   5. If the SSE connection drops, fall back to a 3-second poll of
+ *      /api/sessions (the legacy behavior)
  */
+
 (function attachArgsExpander() {
-  const rows = document.querySelectorAll('tr[data-args]');
-  rows.forEach((row) => {
-    row.style.cursor = "zoom-in";
-    row.addEventListener("click", () => {
-      const raw = row.getAttribute("data-args") || "";
-      let parsed;
-      try {
-        parsed = JSON.parse(raw);
-      } catch {
-        parsed = raw;
-      }
-      openDialog({
-        title: row.querySelector("td:nth-child(2)")?.textContent?.trim() || "Tool call",
-        body: JSON.stringify(parsed, null, 2),
-      });
+  /**
+   * Allow each <tr data-args="..."> to expand a JSON dialog on click.
+   * `data-args` carries a single-line JSON string; we pretty-print it on demand.
+   */
+  document.addEventListener("click", (e) => {
+    const target = e.target;
+    if (!(target instanceof Element)) return;
+    const row = target.closest("tr[data-args]");
+    if (!row) return;
+    const raw = row.getAttribute("data-args") || "";
+    let parsed;
+    try {
+      parsed = JSON.parse(raw);
+    } catch {
+      parsed = raw;
+    }
+    openDialog({
+      title: row.querySelector("td:nth-child(2)")?.textContent?.trim() || "Tool call",
+      body: JSON.stringify(parsed, null, 2),
     });
   });
 
@@ -83,51 +105,381 @@
 })();
 
 /**
- * Poll the session summary every 3 seconds while a task is running so the
- * index page (and the per-task page when status changes) updates without a
- * manual refresh. Lightweight: single GET, no debouncing.
+ * 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.
  */
-(function attachLiveRefresh() {
-  const banner = document.querySelector('[data-live-refresh]');
+(function attachTaskPageTimeline() {
+  const banner = document.querySelector("[data-live-refresh][data-task-id]");
   if (!banner) return;
-  const taskId = banner.getAttribute('data-task-id') || '';
-  const initialStatus = banner.getAttribute('data-status') || 'running';
+  const taskId = Number(banner.getAttribute("data-task-id"));
+  if (!Number.isFinite(taskId)) return;
+
+  // Subscribe to SSE for this task only.
+  try {
+    const es = new EventSource(`/api/events`);
+    es.addEventListener("snapshot", (ev) => {
+      const data = JSON.parse((ev).data);
+      const session = (data.data?.sessions || []).find((s) => s.taskId === taskId);
+      if (session) applyTaskUpdate(session);
+    });
+    ["task.created", "task.updated", "task.completed"].forEach((type) => {
+      es.addEventListener(type, (ev) => {
+        const data = JSON.parse((ev).data);
+        const session = data.data?.session;
+        if (session && session.taskId === taskId) applyTaskUpdate(session);
+      });
+    });
+    es.addEventListener("tool.recorded", (ev) => {
+      const data = JSON.parse((ev).data);
+      const session = data.data?.session;
+      if (session && session.taskId === taskId) applyTaskUpdate(session);
+    });
+    es.onerror = () => {
+      // EventSource will auto-reconnect; nothing to do here.
+    };
+  } catch {
+    // ignore — the page will still render statically
+  }
+
+  function applyTaskUpdate(session) {
+    // Update status badge.
+    const badge = document.querySelector(".badge");
+    if (badge) {
+      const cls = `badge badge-${session.status}`;
+      badge.className = cls;
+      badge.textContent = session.status;
+    }
+    // Update meta line.
+    const meta = document.querySelector(".topbar .meta");
+    if (meta) {
+      const totalMs = session.toolCalls.reduce((a, c) => a + c.durationMs, 0);
+      const ok = session.toolCalls.filter((c) => c.success).length;
+      const fail = session.toolCalls.length - ok;
+      meta.innerHTML =
+        `<span class="badge badge-${session.status}">${session.status}</span>` +
+        ` · ${session.toolCalls.length} tool call(s)` +
+        ` · ${totalMs} ms total` +
+        ` · ${ok} ok / ${fail} fail` +
+        ` · started ${new Date(session.startedAt).toISOString().replace("T", " ").slice(0, 19)}` +
+        (session.endedAt ? ` · ended ${new Date(session.endedAt).toISOString().replace("T", " ").slice(0, 19)}` : "");
+    }
+    // Re-render tool calls table in place.
+    const tbody = document.querySelector("table.toolcalls tbody");
+    if (tbody) {
+      tbody.innerHTML = session.toolCalls
+        .map((c) => renderToolCallRow(c))
+        .join("");
+    }
+    // Re-render stats table.
+    const statsTbody = document.querySelector("table.stats tbody");
+    if (statsTbody) {
+      const aggregate = aggregateStats(session.toolCalls);
+      statsTbody.innerHTML =
+        Object.entries(aggregate)
+          .sort((a, b) => b[1].count - a[1].count)
+          .map(
+            ([tool, s]) =>
+              `<tr><td><code>${escapeHtmlAttr(tool)}</code></td>` +
+              `<td>${s.count}</td><td>${s.success}</td><td>${s.fail}</td><td>${s.totalMs} ms</td></tr>`,
+          )
+          .join("") || `<tr><td colspan="5" class="empty">No tool calls recorded.</td></tr>`;
+    }
+    // Re-render mermaid diagram.
+    const mermaidDiv = document.querySelector(".mermaid");
+    if (mermaidDiv && window.mermaid) {
+      mermaidDiv.innerHTML = buildMermaidSource(session);
+      try {
+        window.mermaid.run({ nodes: [mermaidDiv] });
+      } catch {
+        // ignore — re-render is best-effort
+      }
+    }
+  }
+
+  function renderToolCallRow(call) {
+    const argsJson = JSON.stringify(redactArgs(call.args || {}));
+    const preview = call.error
+      ? (call.error.slice(0, 200) + (call.error.length > 200 ? "…" : ""))
+      : (call.outputPreview.slice(0, 240) + (call.outputPreview.length > 240 ? "…" : ""));
+    const status = call.success ? "ok" : "fail";
+    const attach = call.hasAttachment ? ' <span class="attach">📎</span>' : "";
+    return (
+      `<tr class="row-${status}" 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>` +
+      `</tr>`
+    );
+  }
+
+  function aggregateStats(calls) {
+    const out = {};
+    for (const c of calls) {
+      const cur = out[c.toolName] ?? { count: 0, success: 0, fail: 0, totalMs: 0 };
+      cur.count += 1;
+      if (c.success) cur.success += 1;
+      else cur.fail += 1;
+      cur.totalMs += c.durationMs;
+      out[c.toolName] = cur;
+    }
+    return out;
+  }
 
-  async function poll() {
+  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 {
-      const url = taskId ? `/api/sessions/${encodeURIComponent(taskId)}` : '/api/sessions';
-      const res = await fetch(url, { headers: { accept: 'application/json' } });
-      if (!res.ok) return;
-      const data = await res.json();
-      if (Array.isArray(data)) {
-        // Index page — refresh the table cells without losing scroll position.
-        const tbody = document.querySelector('.sessions tbody');
-        if (!tbody) return;
-        tbody.innerHTML = data
-          .map((s) => {
-            const tools = Array.from(new Set((s.toolCalls || []).map((c) => c.toolName))).map((t) => `<code>${t}</code>`).join(' ');
-            return (
-              '<tr>' +
-              `<td><a href="/task/${s.taskId}">#${s.taskId}</a></td>` +
-              `<td><span class="badge badge-${s.status}">${s.status}</span></td>` +
-              `<td>${(s.toolCalls || []).length} calls · ${(s.toolCalls || []).reduce((a, c) => a + c.durationMs, 0)} ms</td>` +
-              `<td>${(s.title || '(no title)')}</td>` +
-              `<td>${new Date(s.startedAt).toISOString().replace('T', ' ').slice(0, 19)}</td>` +
-              `<td class="tools">${tools}</td>` +
-              '</tr>'
-            );
-          })
-          .join('');
-      } else if (data && data.taskId != null) {
-        if (data.status !== initialStatus) {
-          // Reload to pick up the new status badge & flow chart.
-          location.reload();
-        }
+      return new Date(ms).toISOString().replace("T", " ").slice(0, 19);
+    } catch {
+      return String(ms);
+    }
+  }
+
+  function redactArgs(args) {
+    const clone = {};
+    for (const [k, v] of Object.entries(args || {})) {
+      const lk = k.toLowerCase();
+      if (/(api[_-]?key|token|password|pass|secret)/.test(lk)) {
+        clone[k] = "***REDACTED***";
+      } else {
+        clone[k] = v;
       }
-    } catch (e) {
-      // network blip — try again next tick
     }
+    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;")
+      .replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;")
+      .replace(/"/g, "&quot;")
+      .replace(/'/g, "&#39;");
   }
 
-  setInterval(poll, 3000);
+  function escapeHtmlAttr(s) {
+    return escapeHtml(s);
+  }
 })();
+
+/**
+ * Index page: subscribe to SSE and keep the table + cards in sync. Falls
+ * back to a 3-second poll if EventSource is unavailable (very old browsers)
+ * or if the connection is dropped.
+ */
+(function attachIndexLiveRefresh() {
+  const banner = document.querySelector("[data-live-refresh]");
+  if (!banner) return;
+  // Per-task page also has data-live-refresh; skip if it has data-task-id.
+  if (banner.hasAttribute("data-task-id")) return;
+
+  const tbody = document.querySelector(".sessions tbody");
+  if (!tbody) return;
+
+  // Local state.
+  const sessions = new Map();
+
+  let usePollingFallback = typeof EventSource === "undefined";
+  let pollTimer = null;
+  let source = null;
+
+  // ---------------------------------------------------------------------
+  // Helpers
+  // ---------------------------------------------------------------------
+
+  function setConnectionStatus(state, label) {
+    const el = document.querySelector("[data-connection]");
+    if (!el) return;
+    const dot = el.querySelector(".conn-dot");
+    const text = el.querySelector(".conn-label");
+    if (dot) {
+      dot.className =
+        "conn-dot " +
+        (state === "connected"
+          ? "conn-connected"
+          : state === "fallback"
+          ? "conn-fallback"
+          : "conn-disconnected");
+    }
+    if (text) text.textContent = label;
+  }
+
+  function renderIndex() {
+    const arr = Array.from(sessions.values()).sort(
+      (a, b) => b.startedAt - a.startedAt,
+    );
+    if (arr.length === 0) {
+      tbody.innerHTML =
+        `<tr><td colspan="6" class="empty">No tasks recorded yet. Trigger a tool call (e.g. send a message in <code>interactive</code> mode) and watch this page update live.</td></tr>`;
+      return;
+    }
+    tbody.innerHTML = arr.map(renderSessionRow).join("");
+  }
+
+  function renderSessionRow(s) {
+    const tools = new Set((s.toolCalls || []).map((c) => c.toolName));
+    const totalMs = (s.toolCalls || []).reduce((a, c) => a + c.durationMs, 0);
+    const status = s.status || "running";
+    return (
+      `<tr>` +
+      `<td><a href="/task/${s.taskId}">#${s.taskId}</a></td>` +
+      `<td><span class="badge badge-${status}">${escapeHtml(status)}</span></td>` +
+      `<td>${(s.toolCalls || []).length} calls · ${totalMs} ms</td>` +
+      `<td>${escapeHtml(s.title || "(no title)")}</td>` +
+      `<td>${formatTs(s.startedAt)}</td>` +
+      `<td class="tools">${Array.from(tools).map((t) => `<code>${escapeHtml(t)}</code>`).join(" ")}</td>` +
+      `</tr>`
+    );
+  }
+
+  function upsertSession(session) {
+    if (!session || typeof session.taskId !== "number") return;
+    sessions.set(session.taskId, session);
+    renderIndex();
+  }
+
+  // ---------------------------------------------------------------------
+  // SSE path
+  // ---------------------------------------------------------------------
+
+  function openSSE() {
+    if (typeof EventSource === "undefined") {
+      startPollingFallback();
+      return;
+    }
+    try {
+      source = new EventSource("/api/events");
+    } catch {
+      startPollingFallback();
+      return;
+    }
+
+    source.addEventListener("open", () => {
+      setConnectionStatus("connected", "Live (SSE)");
+      // If we were polling, stop now.
+      if (pollTimer) {
+        clearInterval(pollTimer);
+        pollTimer = null;
+      }
+    });
+
+    source.addEventListener("snapshot", (ev) => {
+      const data = JSON.parse(ev.data);
+      const list = data.data?.sessions || [];
+      sessions.clear();
+      for (const s of list) sessions.set(s.taskId, s);
+      renderIndex();
+    });
+
+    ["task.created", "task.updated", "task.completed"].forEach((type) => {
+      source.addEventListener(type, (ev) => {
+        const data = JSON.parse(ev.data);
+        const session = data.data?.session;
+        if (session) upsertSession(session);
+      });
+    });
+
+    source.addEventListener("tool.recorded", (ev) => {
+      const data = JSON.parse(ev.data);
+      const session = data.data?.session;
+      if (session) upsertSession(session);
+    });
+
+    source.addEventListener("error", () => {
+      // EventSource auto-reconnects, but if it stays down for too long
+      // we kick in the polling fallback.
+      setConnectionStatus("disconnected", "Reconnecting…");
+      if (!pollTimer) {
+        setTimeout(() => {
+          if (source && source.readyState === EventSource.CLOSED) {
+            startPollingFallback();
+          }
+        }, 3000);
+      }
+    });
+  }
+
+  // ---------------------------------------------------------------------
+  // Polling fallback (3s) — the legacy v0.1.0–v0.4.0 behavior
+  // ---------------------------------------------------------------------
+
+  function startPollingFallback() {
+    usePollingFallback = true;
+    setConnectionStatus("fallback", "Polling (3s fallback)");
+    pollTimer = setInterval(pollOnce, 3000);
+    pollOnce();
+  }
+
+  async function pollOnce() {
+    try {
+      const res = await fetch("/api/sessions", { headers: { accept: "application/json" } });
+      if (!res.ok) return;
+      const list = await res.json();
+      sessions.clear();
+      for (const s of list) sessions.set(s.taskId, s);
+      renderIndex();
+    } catch {
+      // network blip — try again next tick
+    }
+  }
+
+  // ---------------------------------------------------------------------
+  // Initial paint
+  // ---------------------------------------------------------------------
+
+  setConnectionStatus("disconnected", "Connecting…");
+  if (!usePollingFallback) {
+    openSSE();
+  } else {
+    startPollingFallback();
+  }
+
+  function formatTs(ms) {
+    try {
+      return new Date(ms).toISOString().replace("T", " ").slice(0, 19);
+    } catch {
+      return String(ms);
+    }
+  }
+
+  function escapeHtml(s) {
+    return String(s)
+      .replace(/&/g, "&amp;")
+      .replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;")
+      .replace(/"/g, "&quot;")
+      .replace(/'/g, "&#39;");
+  }
+})();

package/public/index.html

@@ -12,23 +12,41 @@
         Standalone landing page served by the visualization service. The plugin
         replaces the index when sessions exist.
       </p>
+      <p class="meta connection-status" data-connection>
+        <span class="conn-dot conn-disconnected"></span>
+        <span class="conn-label">Connecting…</span>
+      </p>
     </header>
     <section class="panel">
       <h2>No sessions yet</h2>
       <p class="empty">
         The <code>roy-agent</code> host process has not recorded any tool
         calls yet. Trigger a session — for example by sending a message in
-        <code>interactive</code> mode — and refresh this page.
-      </p>
-      <p>
-        Useful endpoints while you wait:
-        <ul>
-          <li><a href="/api/sessions">/api/sessions</a> — JSON list of recorded sessions.</li>
-          <li><a href="/static/style.css">/static/style.css</a> — bundled CSS.</li>
-          <li><a href="/static/app.js">/static/app.js</a> — bundled JS.</li>
-        </ul>
+        <code>interactive</code> mode — and the page will update live via
+        Server-Sent Events.
       </p>
+      <table class="sessions">
+        <thead>
+          <tr><th>Task ID</th><th>Status</th><th>Stats</th><th>Title</th><th>Started</th><th>Tools</th></tr>
+        </thead>
+        <tbody></tbody>
+      </table>
+    </section>
+    <section class="panel">
+      <h2>How to read this page</h2>
+      <ul>
+        <li>The page subscribes to <code>/api/events</code> (SSE) for real-time updates.</li>
+        <li>If the SSE connection fails, a 3-second polling fallback keeps the page fresh.</li>
+        <li>Useful endpoints:
+          <ul>
+            <li><a href="/api/sessions">/api/sessions</a> — JSON list of recorded sessions.</li>
+            <li><a href="/api/events">/api/events</a> — SSE event stream.</li>
+            <li><a href="/static/style.css">/static/style.css</a> — bundled CSS.</li>
+            <li><a href="/static/app.js">/static/app.js</a> — bundled JS.</li>
+          </ul>
+        </li>
+      </ul>
     </section>
     <script src="/static/app.js"></script>
   </body>
-</html>
+</html>