@ai-setting/roy-plugin-task-show 0.4.0 → 0.5.1

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>

package/public/style.css

@@ -11,6 +11,7 @@
   --accent: #60a5fa;
   --good: #22c55e;
   --bad: #ef4444;
+  --warn: #f59e0b;
   --code-bg: #0f172a;
   --border: #1e293b;
   --link: #38bdf8;
@@ -89,6 +90,47 @@ pre {
   margin-bottom: 8px;
 }
 
+/* ---------- Connection status indicator ---------- */
+.connection-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  margin: 8px 0 0 !important;
+  padding: 4px 10px;
+  border-radius: 999px;
+  background: rgba(148, 163, 184, 0.1);
+  border: 1px solid var(--border);
+  font-size: 12px !important;
+  color: var(--muted) !important;
+}
+.conn-dot {
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  display: inline-block;
+  flex-shrink: 0;
+  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.04);
+  transition: background 0.2s, box-shadow 0.2s;
+}
+.conn-connected {
+  background: var(--good);
+  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.25), 0 0 8px rgba(34, 197, 94, 0.4);
+  animation: pulse 1.6s ease-in-out infinite;
+}
+.conn-fallback {
+  background: var(--warn);
+  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.25);
+}
+.conn-disconnected {
+  background: var(--bad);
+  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.25);
+}
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.55; }
+}
+
+/* ---------- Status badges ---------- */
 .badge {
   display: inline-block;
   padding: 2px 9px;
@@ -114,11 +156,16 @@ pre {
   background: rgba(148, 163, 184, 0.25);
   color: #cbd5e1;
 }
+.badge-paused {
+  background: rgba(245, 158, 11, 0.25);
+  color: #fcd34d;
+}
 .badge-unknown {
   background: rgba(148, 163, 184, 0.18);
   color: #cbd5e1;
 }
 
+/* ---------- Panels ---------- */
 .panel {
   margin: 22px 28px;
   padding: 18px 22px;
@@ -134,6 +181,7 @@ pre {
   color: #c7d2fe;
 }
 
+/* ---------- Tables ---------- */
 table {
   width: 100%;
   border-collapse: collapse;
@@ -237,4 +285,4 @@ details summary {
     padding: 14px 14px;
     margin: 14px 10px;
   }
-}
+}