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

package/public/task-operations.js

@@ -0,0 +1,263 @@
+/**
+ * @fileoverview Client-side controller for the "Task lifecycle pipeline" panel.
+ *
+ * - Fetches /api/tasks/:id/operations on load.
+ * - Replaces the server-rendered placeholder with the real timeline.
+ * - Polls every `POLL_MS` while the task is not yet in a terminal state.
+ *   Stops polling once we see status: completed/failed/cancelled.
+ * - Deduplicates nodes by `data-op-id` so incremental updates don't
+ *   double-render existing operations.
+ * - On error, shows the retry button and stops polling until the user
+ *   clicks it.
+ * - Never modifies the rest of the page (Mermaid section, etc.).
+ *
+ * Vanilla JS — no framework dependency. Runs in any modern browser.
+ */
+(function () {
+  "use strict";
+
+  /** @typedef {{id:number, sequence:number, milestoneType:string, title:string, description:string, timestamp:string, sessionShort:string}} OperationViewModel */
+
+  /** Status values for which polling stops. */
+  var TERMINAL_STATUSES = { completed: 1, failed: 1, cancelled: 1 };
+  var POLL_MS = 5000;
+  var MAX_BACKOFF_MS = 30000;
+
+  /** HTML escape — keep in sync with server-side `htmlEscape`. */
+  function esc(s) {
+    return String(s == null ? "" : s)
+      .replace(/&/g, "&")
+      .replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;")
+      .replace(/"/g, "&quot;")
+      .replace(/'/g, "&#39;");
+  }
+
+  function fmtTs(ts) {
+    if (!ts) return "—";
+    var d = new Date(ts);
+    if (isNaN(d.getTime())) return ts;
+    return d.toISOString().replace("T", " ").replace(/\.\d+Z$/, "Z");
+  }
+
+  function statusLabel(t) {
+    switch (t) {
+      case "create": return "Created";
+      case "progress": return "In progress";
+      case "milestone": return "Milestone";
+      case "problem": return "Problem";
+      case "solution": return "Solution";
+      case "decision": return "Decision";
+      case "review": return "Review";
+      case "completed": return "Completed";
+      default: return "Unknown";
+    }
+  }
+
+  function statusClass(t) {
+    var known = ["create","progress","milestone","problem","solution","decision","review","completed"];
+    return "op-status-" + (known.indexOf(t) >= 0 ? t : "unknown");
+  }
+
+  /** Build the section HTML from operations. Pure function. */
+  function renderPipelineHtml(ops, stale, taskId) {
+    var nodes = (ops || []).map(function (op) {
+      var label = statusLabel(op.milestoneType);
+      var klass = statusClass(op.milestoneType);
+      var ts = fmtTs(op.timestamp);
+      var title = op.title || label;
+      var hasDesc = !!(op.description);
+      return (
+        '<li class="op-node ' + klass + '" data-op-id="' + esc(op.id) + '" data-sequence="' + esc(op.sequence) + '">' +
+          '<div class="op-bullet" aria-hidden="true"></div>' +
+          '<div class="op-body">' +
+            '<div class="op-row1">' +
+              '<span class="op-seq">#' + esc(op.sequence) + '</span>' +
+              '<span class="op-badge ' + klass + '">' + esc(label) + '</span>' +
+              '<span class="op-title">' + esc(title) + '</span>' +
+              '<span class="op-time" title="' + esc(op.timestamp) + '">' + esc(ts) + '</span>' +
+            '</div>' +
+            (hasDesc ? '<details class="op-details"><summary>Details</summary><div class="op-desc">' + esc(op.description) + '</div></details>' : '') +
+          '</div>' +
+        '</li>'
+      );
+    }).join("");
+
+    var staleBadge = stale ? ' <span class="pipeline-stale" data-pipeline-stale>stale</span>' : "";
+    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>' +
+          '<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>' +
+        '<ol class="op-timeline" role="list">' + nodes + '</ol>' +
+      '</section>'
+    );
+  }
+
+  function renderErrorHtml(code, taskId) {
+    var idAttr = taskId ? ' data-task-id="' + esc(taskId) + '"' : "";
+    return (
+      '<section class="panel panel-pipeline"' + idAttr + ' data-pipeline-error="' + esc(code) + '" data-pipeline-root>' +
+        '<h2>Task lifecycle pipeline</h2>' +
+        '<div class="pipeline-error">' +
+          '<p>Could not load operations: <code>' + esc(code) + '</code></p>' +
+          '<button type="button" class="btn btn-retry" data-pipeline-retry>Retry</button>' +
+        '</div>' +
+      '</section>'
+    );
+  }
+
+  /** Find the placeholder section by its data attribute. */
+  function findRoot() {
+    return document.querySelector('[data-pipeline-root]');
+  }
+
+  /** Replace the placeholder with new HTML, preserving the scroll position. */
+  function swapIn(newHtml) {
+    var root = findRoot();
+    if (!root) return;
+    var scrollY = window.scrollY;
+    var tmp = document.createElement("div");
+    tmp.innerHTML = newHtml;
+    var newEl = tmp.firstElementChild;
+    if (!newEl) return;
+    root.parentNode.replaceChild(newEl, root);
+    // Don't restore scrollY unless the user has actually scrolled
+    if (scrollY > 0) window.scrollTo(0, scrollY);
+  }
+
+  /** Idempotent node merge: keep existing nodes, append new ones. */
+  function mergeNodes(prevOps, nextOps) {
+    var seen = Object.create(null);
+    var merged = [];
+    for (var i = 0; i < prevOps.length; i++) {
+      seen[prevOps[i].id] = 1;
+      merged.push(prevOps[i]);
+    }
+    for (var j = 0; j < nextOps.length; j++) {
+      if (!seen[nextOps[j].id]) merged.push(nextOps[j]);
+    }
+    return merged;
+  }
+
+  /** Fetch + update once. Resolves to { ok: boolean, terminal: boolean, ops }. */
+  function fetchOnce(taskId) {
+    return fetch("/api/tasks/" + encodeURIComponent(taskId) + "/operations", {
+      headers: { Accept: "application/json" },
+      credentials: "same-origin",
+    }).then(function (resp) {
+      if (resp.status === 404) {
+        return { ok: false, code: "not_found", terminal: true, ops: null };
+      }
+      if (resp.status === 503) {
+        return { ok: false, code: "cli_failed", terminal: false, ops: null };
+      }
+      if (!resp.ok) {
+        return { ok: false, code: "http_" + resp.status, terminal: false, ops: null };
+      }
+      return resp.json().then(function (body) {
+        return {
+          ok: true,
+          terminal: !!(body.task && TERMINAL_STATUSES[body.task.status]),
+          ops: body.operations || [],
+          stale: !!body.stale,
+        };
+      });
+    });
+  }
+
+  /** The controller — one per page. */
+  function PipelineController(rootEl) {
+    this.taskId = rootEl.getAttribute("data-task-id");
+    this.rootEl = rootEl;
+    this.lastOps = [];
+    this.timer = null;
+    this.backoff = POLL_MS;
+    this.stopped = false;
+    this.bindRetry();
+    this.update();
+  }
+
+  PipelineController.prototype.bindRetry = function () {
+    var self = this;
+    document.addEventListener("click", function (e) {
+      var t = e.target;
+      if (t && t.matches && t.matches("[data-pipeline-retry]")) {
+        e.preventDefault();
+        self.backoff = POLL_MS;
+        self.update();
+      }
+    });
+  };
+
+  PipelineController.prototype.update = function () {
+    if (this.stopped) return;
+    var self = this;
+    return fetchOnce(this.taskId).then(function (r) {
+      if (r.ok) {
+        var merged = mergeNodes(self.lastOps, r.ops);
+        self.lastOps = merged;
+        swapIn(renderPipelineHtml(merged, r.stale, self.taskId));
+        if (r.terminal) {
+          self.stopped = true;
+          return;
+        }
+        self.scheduleNext();
+      } else {
+        swapIn(renderErrorHtml(r.code || "error", self.taskId));
+        if (r.terminal) {
+          self.stopped = true;
+          return;
+        }
+        self.scheduleNext(true);
+      }
+    }).catch(function (err) {
+      // Network failure — exponential-ish backoff, retry
+      swapIn(renderErrorHtml("network", self.taskId));
+      self.scheduleNext(true);
+    });
+  };
+
+  PipelineController.prototype.scheduleNext = function (failed) {
+    var self = this;
+    if (this.timer) clearTimeout(this.timer);
+    var delay = failed ? this.backoff : POLL_MS;
+    this.backoff = Math.min(MAX_BACKOFF_MS, this.backoff * (failed ? 1.5 : 1));
+    this.timer = setTimeout(function () {
+      self.update();
+    }, delay);
+  };
+
+  PipelineController.prototype.destroy = function () {
+    this.stopped = true;
+    if (this.timer) clearTimeout(this.timer);
+  };
+
+  function boot() {
+    var root = findRoot();
+    if (!root) return;
+    if (!root.hasAttribute("data-task-id")) {
+      // index page — nothing to do, unless the body carries a task-id
+      // (some embedded viewports re-use the placeholder inside a frame
+      // whose body holds the canonical task id).
+      var bodyId = document.body && document.body.dataset ? document.body.dataset.taskId : "";
+      if (!bodyId) return;
+      root.setAttribute("data-task-id", bodyId);
+    }
+    // Expose for tests
+    window.__pipelineController = new PipelineController(root);
+  }
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", boot);
+  } else {
+    boot();
+  }
+})();