@ai-setting/roy-plugin-task-show 1.0.0 → 1.2.0

package/public/style.css

@@ -598,6 +598,47 @@ details summary {
   margin-left: 8px;
 }
 
+/* ---------- v1.1.0+ SSE state badge (5 states) ---------- */
+/* All `.pipeline-badge` variants share the same shape so the header
+ * stays balanced; only the colour + animation differ. */
+.pipeline-badge {
+  display: inline-block;
+  padding: 1px 8px;
+  border-radius: 8px;
+  font-size: 11px;
+  margin-left: 8px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+}
+.pipeline-stale {
+  /* legacy alias — same orange as the v0.9.x pill */
+  background: var(--warn);
+  color: #1f2937;
+}
+.pipeline-connecting {
+  background: #fde68a;
+  color: #78350f;
+  animation: badge-pulse 1.4s ease-in-out infinite;
+}
+.pipeline-live {
+  background: #22c55e;
+  color: #052e16;
+  animation: badge-pulse 1.8s ease-in-out infinite;
+}
+.pipeline-reconnecting {
+  background: #fde68a;
+  color: #78350f;
+  animation: badge-pulse 0.9s ease-in-out infinite;
+}
+.pipeline-error {
+  background: var(--bad);
+  color: #fff5f5;
+}
+@keyframes badge-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.55; }
+}
+
 .pipeline-error {
   background: rgba(239, 68, 68, 0.08);
   border: 1px solid var(--bad);
@@ -1049,3 +1090,67 @@ details summary {
   border: 1px solid rgba(148, 163, 184, 0.4);
 }
 
+/* ---------- Session forest metadata ---------- */
+.session-forest > ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.session-row {
+  min-width: 0;
+  margin: 8px 0;
+  padding: 10px 12px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: rgba(24, 36, 66, 0.45);
+}
+.session-row .session-title {
+  display: inline-block;
+  font-weight: 600;
+  overflow-wrap: anywhere;
+}
+.session-toggle {
+  margin-left: 10px;
+}
+.session-details {
+  margin-top: 8px;
+}
+.session-details dl {
+  display: grid;
+  grid-template-columns: minmax(10rem, 15rem) minmax(0, 1fr);
+  gap: 6px 12px;
+  margin: 10px 0 0;
+}
+.session-details dt {
+  color: var(--muted);
+  font-weight: 600;
+  overflow-wrap: anywhere;
+}
+.session-details dd {
+  min-width: 0;
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+.session-details pre.metadata-json,
+.session-details pre.metadata-text {
+  max-height: 24rem;
+  margin: 0;
+  white-space: pre-wrap;
+  overflow: auto;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+.session-operations {
+  list-style: none;
+  margin: 12px 0 0;
+  padding: 0;
+}
+@media (max-width: 700px) {
+  .session-details dl {
+    grid-template-columns: 1fr;
+    gap: 2px;
+  }
+  .session-details dd {
+    margin-bottom: 8px;
+  }
+}

package/public/task-operations.js

@@ -22,6 +22,12 @@
   var TERMINAL_STATUSES = { completed: 1, failed: 1, cancelled: 1 };
   var POLL_MS = 5000;
   var MAX_BACKOFF_MS = 30000;
+  /** v1.1.0+ SSE state — drives the pipeline header badge. */
+  var currentSseState = "stale";
+  /** v1.1.0+ SSE instance, owned by the controller. */
+  var pipelineSse = null;
+  /** v1.1.0+ consecutive SSE error count (3+ → "error" state). */
+  var sseErrorCount = 0;
 
   /** HTML escape — keep in sync with server-side `htmlEscape`. */
   function esc(s) {
@@ -116,24 +122,50 @@
       );
     }).join("");
 
-    var staleBadge = stale ? ' <span class="pipeline-stale" data-pipeline-stale>stale</span>' : "";
+    var badge = renderSseBadge(stale, currentSseState);
     var idAttr = taskId ? ' data-task-id="' + esc(taskId) + '"' : "";
     if (!ops || ops.length === 0) {
       return (
         '<section class="panel panel-pipeline"' + idAttr + ' data-pipeline-root>' +
-          '<h2>Task lifecycle pipeline' + staleBadge + '</h2>' +
+          '<h2>Task lifecycle pipeline' + badge + '</h2>' +
           '<p class="empty">No operations recorded yet.</p>' +
         '</section>'
       );
     }
     return (
       '<section class="panel panel-pipeline"' + idAttr + ' data-pipeline-root>' +
-        '<h2>Task lifecycle pipeline' + staleBadge + '</h2>' +
+        '<h2>Task lifecycle pipeline' + badge + '</h2>' +
         '<ol class="op-timeline" role="list">' + nodes + '</ol>' +
       '</section>'
     );
   }
 
+  /**
+   * v1.1.0+: render the SSE state badge (5-state) when SSE is wired,
+   * otherwise fall back to the legacy orange `pipeline-stale` pill for
+   * cache-TTL staleness.
+   */
+  function renderSseBadge(stale, sseState) {
+    if (sseState) {
+      var labels = {
+        stale: "stale",
+        connecting: "connecting…",
+        live: "live",
+        reconnecting: "reconnecting…",
+        error: "error",
+      };
+      return (
+        ' <span class="pipeline-badge pipeline-' + sseState + '" data-sse-state="' + sseState + '">' +
+        esc(labels[sseState] || sseState) +
+        '</span>'
+      );
+    }
+    if (stale) {
+      return ' <span class="pipeline-stale" data-pipeline-stale>stale</span>';
+    }
+    return "";
+  }
+
   function renderErrorHtml(code, taskId) {
     var idAttr = taskId ? ' data-task-id="' + esc(taskId) + '"' : "";
     return (
@@ -250,6 +282,7 @@
         notifyMermaidRebuild();
         if (r.terminal) {
           self.stopped = true;
+          self.teardownSse();
           return;
         }
         self.scheduleNext();
@@ -257,6 +290,7 @@
         swapIn(renderErrorHtml(r.code || "error", self.taskId));
         if (r.terminal) {
           self.stopped = true;
+          self.teardownSse();
           return;
         }
         self.scheduleNext(true);
@@ -268,6 +302,103 @@
     });
   };
 
+  /**
+   * v1.1.0+: subscribe to /api/events and react to operation.updated /
+   * tool.called / task.* events for THIS task id. The handler updates
+   * `currentSseState` (drives the header badge) and patches the
+   * pipeline DOM in place — no full re-fetch needed.
+   *
+   * EventSource auto-reconnects; we just track the error count so
+   * 3+ consecutive failures flip the badge to `error`.
+   */
+  PipelineController.prototype.attachSse = function () {
+    var self = this;
+    if (typeof EventSource === "undefined") return;
+    if (pipelineSse) return; // idempotent
+    setSseState("connecting");
+    try {
+      pipelineSse = new EventSource("/api/events");
+    } catch (_) {
+      setSseState("error");
+      return;
+    }
+    pipelineSse.addEventListener("open", function () {
+      setSseState("live");
+      sseErrorCount = 0;
+    });
+
+    pipelineSse.addEventListener("operation.updated", function (ev) {
+      var payload;
+      try { payload = JSON.parse(ev.data); } catch (_) { return; }
+      if (!payload || payload.taskId !== self.taskId) return;
+      var ops = (payload.data && payload.data.operations) || [];
+      var merged = mergeNodes(self.lastOps, ops);
+      self.lastOps = merged;
+      swapIn(renderPipelineHtml(merged, !!payload.data.stale, self.taskId));
+      window.__lifecycleOps = {
+        taskId: self.taskId,
+        operations: merged,
+        fetchedAt: Date.now(),
+      };
+      notifyMermaidRebuild();
+    });
+
+    ["task.created", "task.updated", "task.completed"].forEach(function (type) {
+      pipelineSse.addEventListener(type, function (ev) {
+        // For task.completed, stop the controller — no more polling needed.
+        var payload;
+        try { payload = JSON.parse(ev.data); } catch (_) { return; }
+        if (!payload) return;
+        var sid = payload.data && payload.data.session && payload.data.session.taskId;
+        if (sid !== self.taskId) return;
+        if (type === "task.completed") {
+          self.stopped = true;
+          if (self.timer) { clearTimeout(self.timer); self.timer = null; }
+        }
+      });
+    });
+
+    pipelineSse.addEventListener("tool.called", function (ev) {
+      // tool.called doesn't change the pipeline timeline, but the
+      // Mermaid re-render hook listens for any data refresh — dispatch
+      // a synthetic ops-loaded event so the diagram reflects the new
+      // tool call. The timeline itself is patched via operation.updated.
+      notifyMermaidRebuild();
+    });
+
+    pipelineSse.addEventListener("error", function () {
+      sseErrorCount += 1;
+      if (sseErrorCount >= 3) {
+        setSseState("error");
+      } else {
+        setSseState("reconnecting");
+      }
+    });
+  };
+
+  PipelineController.prototype.teardownSse = function () {
+    if (pipelineSse) {
+      try { pipelineSse.close(); } catch (_) {}
+      pipelineSse = null;
+    }
+    setSseState("stale");
+  };
+
+  /**
+   * v1.1.0+ Update the SSE state and re-render the badge in place.
+   * Idempotent — safe to call multiple times for the same state.
+   */
+  function setSseState(state) {
+    if (currentSseState === state) return;
+    currentSseState = state;
+    // Re-render the pipeline header with the new state.
+    var root = findRoot();
+    if (!root) return;
+    var pipeline = window.__pipelineController;
+    if (!pipeline) return;
+    swapIn(renderPipelineHtml(pipeline.lastOps, false, pipeline.taskId));
+  }
+
   /**
    * Fire a CustomEvent the app.js Mermaid re-renderer listens to.
    * We don't import a global helper to keep this file standalone.
@@ -313,6 +444,10 @@
     }
     // Expose for tests
     window.__pipelineController = new PipelineController(root);
+    // v1.1.0+: wire the SSE subscriber so operation.updated /
+    // tool.called events patch the pipeline DOM in place without
+    // waiting for the next polling tick.
+    window.__pipelineController.attachSse();
   }
 
   // v0.9.0: expose renderPipelineHtml to the global scope so other