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

package/public/mermaid-renderer.js

@@ -0,0 +1,321 @@
+/* ------------------------------------------------------------------------- */
+/* roy-plugin-task-show — Mermaid renderer controller (v0.6.11)              */
+/* ------------------------------------------------------------------------- */
+/**
+ * Self-contained controller that wraps Mermaid rendering for the per-task
+ * visualization page. Replaces the brittle `mermaid.run({nodes})` approach
+ * that caused the v0.6.10 regression where the SVG was replaced with raw
+ * `flowchart TD` source on every async update.
+ *
+ * Public API (browser global `window.MermaidRenderer` and ES module export):
+ *
+ *   createMermaidController({
+ *     getMermaid?: () => any,         // optional override for tests
+ *     idPrefix?: string,              // default "mmr"
+ *     onStateChange?: (container, state) => void,
+ *   }) -> {
+ *     mount(container, source): Promise<void>  // initial render (idempotent)
+ *     update(container, source): Promise<void> // re-render with new source
+ *     showError(container, source, error): void // user-visible error fallback
+ *     getState(container): "rendered" | "error" | "idle" | "loading"
+ *     destroy(): void                          // cancel all pending renders
+ *   }
+ *
+ * Why this exists
+ * ---------------
+ * `mermaid.run({nodes})` does NOT reliably re-process an already-rendered
+ * node. Once Mermaid has replaced the `.mermaid` container with SVG, calling
+ * `run()` on that node again can silently no-op (or worse, leave the
+ * container holding the raw source we just wrote with `innerHTML`). The fix
+ * is to (1) call `mermaid.render(id, source)` per update with a unique id,
+ * (2) swap the *outer* container's child with the freshly produced SVG,
+ * (3) catch async rejections so the user sees an error block instead of raw
+ * text, and (4) drop the result of any render that completes after a newer
+ * update has superseded it.
+ *
+ * The controller is intentionally framework-free and is loaded by
+ * `public/app.js` via a regular `<script>` tag. It also exports its factory
+ * for unit tests.
+ */
+
+(function (root, factory) {
+  const api = factory();
+  if (typeof module === "object" && module.exports) {
+    module.exports = api;
+  }
+  if (typeof root === "object" && root) {
+    root.MermaidRenderer = api;
+  }
+  // ESM export path — Bun / Rollup / esbuild pick this up.
+  if (typeof exports !== "undefined") {
+    exports.createMermaidController = api.createMermaidController;
+  }
+})(typeof window !== "undefined" ? window : typeof globalThis !== "undefined" ? globalThis : this, function () {
+  "use strict";
+
+  const DEFAULT_ID_PREFIX = "mmr";
+
+  function escapeHtml(s) {
+    return String(s)
+      .replace(/&/g, "&amp;")
+      .replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;")
+      .replace(/"/g, "&quot;")
+      .replace(/'/g, "&#39;");
+  }
+
+  function getMermaidFromGlobal() {
+    if (typeof window !== "undefined" && window.mermaid) return window.mermaid;
+    if (typeof globalThis !== "undefined" && globalThis.mermaid) return globalThis.mermaid;
+    return undefined;
+  }
+
+  function setState(container, state) {
+    if (!container) return;
+    if (container.__mermaidRendererState !== state) {
+      container.__mermaidRendererState = state;
+      container.setAttribute("data-mermaid-state", state);
+    }
+  }
+
+  function getState(container) {
+    return (container && container.__mermaidRendererState) || "idle";
+  }
+
+  function clearChildren(container) {
+    // happy-dom and jsdom both support `replaceChildren()`; fall back to
+    // manual removal for older runtimes.
+    if (typeof container.replaceChildren === "function") {
+      container.replaceChildren();
+      return;
+    }
+    while (container.firstChild) container.removeChild(container.firstChild);
+  }
+
+  function renderErrorBlock(container, source, message) {
+    clearChildren(container);
+    const wrap = container.ownerDocument.createElement("div");
+    wrap.className = "mermaid-error";
+    wrap.setAttribute("role", "alert");
+    wrap.innerHTML =
+      `<div class="mermaid-error-header">⚠️ Mermaid render failed</div>` +
+      `<div class="mermaid-error-msg">${escapeHtml(message || "Unknown error")}</div>` +
+      `<details class="mermaid-error-source">` +
+        `<summary>Show source</summary>` +
+        `<pre>${escapeHtml(source || "")}</pre>` +
+      `</details>`;
+    container.appendChild(wrap);
+    setState(container, "error");
+  }
+
+  function renderUnavailable(container, source) {
+    renderErrorBlock(
+      container,
+      source,
+      "Mermaid library not loaded (window.mermaid is undefined).",
+    );
+  }
+
+  /**
+   * Build the controller.
+   *
+   * @param {object} [opts]
+   * @param {() => any} [opts.getMermaid] - returns the mermaid library or undefined.
+   * @param {string} [opts.idPrefix] - prefix used to make render IDs unique.
+   * @param {(container, state) => void} [opts.onStateChange]
+   */
+  function createMermaidController(opts) {
+    const cfg = opts || {};
+    const idPrefix = cfg.idPrefix || DEFAULT_ID_PREFIX;
+    const getMermaid = cfg.getMermaid || getMermaidFromGlobal;
+    const onStateChange = typeof cfg.onStateChange === "function" ? cfg.onStateChange : null;
+
+    // Track every container this controller has touched so destroy() can
+    // iterate and mark each as destroyed. We use a Set so containers can be
+    // garbage-collected after they leave the DOM (we also drop them on
+    // destroy()).
+    const containers = new Set();
+    let controllerDestroyed = false;
+
+    // Per-container state: latest requested source, in-flight render token,
+    // sequence counter for unique IDs. We keep this in a WeakMap so we don't
+    // leak references after the container is removed.
+    const inflight = new WeakMap(); // container -> { token: number, source: string, destroyed: boolean, lastRenderedSource: string }
+    const seq = new WeakMap();      // container -> number
+
+    function nextSeq(container) {
+      const cur = seq.get(container) || 0;
+      const next = cur + 1;
+      seq.set(container, next);
+      return next;
+    }
+
+    function beginRender(container) {
+      const cur = inflight.get(container) || { token: 0, source: "", destroyed: false, lastRenderedSource: null };
+      const token = cur.token + 1;
+      inflight.set(container, { token, source: cur.source, destroyed: cur.destroyed, lastRenderedSource: cur.lastRenderedSource });
+      return token;
+    }
+
+    function getToken(container) {
+      const cur = inflight.get(container);
+      return cur ? cur.token : 0;
+    }
+
+    function markDestroyed(container) {
+      const cur = inflight.get(container);
+      if (cur) inflight.set(container, { token: cur.token, source: cur.source, destroyed: true, lastRenderedSource: cur.lastRenderedSource });
+    }
+
+    function isDestroyed(container) {
+      const cur = inflight.get(container);
+      return !!(cur && cur.destroyed);
+    }
+
+    function rememberRenderedSource(container, source) {
+      const cur = inflight.get(container);
+      if (cur) inflight.set(container, { token: cur.token, source: cur.source, destroyed: cur.destroyed, lastRenderedSource: source });
+    }
+
+    function getLastRenderedSource(container) {
+      const cur = inflight.get(container);
+      return cur ? cur.lastRenderedSource : null;
+    }
+
+    /**
+     * Render `source` into `container`. Returns a Promise that resolves when
+     * the container reflects the latest source (either an SVG or an error
+     * block). If a newer call supersedes this one before the mermaid.render
+     * Promise resolves, the result is dropped (no DOM mutation).
+     */
+    async function renderInternal(container, source) {
+      // Idempotency: if the controller was destroyed or the container has
+      // already successfully rendered this exact source, skip work entirely.
+      if (controllerDestroyed) return;
+      if (isDestroyed(container)) return;
+      if (typeof source !== "string") source = String(source == null ? "" : source);
+      if (getLastRenderedSource(container) === source && getState(container) === "rendered") {
+        // Same source, already rendered — nothing to do.
+        return;
+      }
+      containers.add(container);
+
+      const mermaid = getMermaid();
+      if (!mermaid || typeof mermaid.render !== "function") {
+        renderUnavailable(container, source);
+        if (onStateChange) onStateChange(container, "error");
+        return;
+      }
+
+      const myToken = beginRender(container);
+      setState(container, "loading");
+      const seqNum = nextSeq(container);
+      const id = `${idPrefix}-${seqNum}`;
+      let result;
+      try {
+        result = await mermaid.render(id, source);
+      } catch (err) {
+        // Only surface this error if the user hasn't superseded us.
+        if (controllerDestroyed || isDestroyed(container) || getToken(container) !== myToken) return;
+        renderErrorBlock(
+          container,
+          source,
+          (err && err.message) || String(err),
+        );
+        if (onStateChange) onStateChange(container, "error");
+        return;
+      }
+      // Drop stale results: a newer render has already happened, the
+      // container was destroyed, or the controller was torn down.
+      if (controllerDestroyed || isDestroyed(container) || getToken(container) !== myToken) return;
+      const svg = result && result.svg;
+      if (!svg) {
+        renderErrorBlock(container, source, "mermaid.render returned no svg");
+        if (onStateChange) onStateChange(container, "error");
+        return;
+      }
+      // Insert the new SVG. We use a wrapper so happy-dom/jsdom see a single
+      // child swap and so subsequent state checks (querySelector("svg"))
+      // remain correct.
+      clearChildren(container);
+      const doc = container.ownerDocument;
+      const range = doc.createRange
+        ? doc.createRange()
+        : null;
+      let frag;
+      try {
+        if (range) {
+          range.selectNodeContents(doc.createElement("div"));
+          frag = range.createContextualFragment(svg);
+        } else {
+          // Last resort: parse as HTML via DOMParser.
+          const parser = new (doc.defaultView.DOMParser || (doc.defaultView && doc.defaultView.DOMParser))(
+            "text/html",
+          );
+          const doc2 = parser.parseFromString(`<body>${svg}</body>`, "text/html");
+          frag = doc.createDocumentFragment
+            ? doc.createDocumentFragment()
+            : null;
+          if (frag && doc2 && doc2.body) {
+            while (doc2.body.firstChild) frag.appendChild(doc2.body.firstChild);
+          }
+        }
+      } catch (_) {
+        frag = null;
+      }
+      if (frag && frag.childNodes && frag.childNodes.length > 0) {
+        // Defensive: cap to 4 nodes to avoid pathological growth.
+        const nodes = Array.from(frag.childNodes).slice(0, 4);
+        for (const n of nodes) container.appendChild(n);
+      } else {
+        // Fallback: write innerHTML directly (acceptable in real browsers).
+        container.innerHTML = svg;
+      }
+      setState(container, "rendered");
+      rememberRenderedSource(container, source);
+      if (onStateChange) onStateChange(container, "rendered");
+      // Bind functions if mermaid provided any (e.g., for click handlers).
+      if (typeof result.bindFunctions === "function") {
+        try {
+          result.bindFunctions(container);
+        } catch (_) {
+          // ignore — bind failures are non-fatal
+        }
+      }
+    }
+
+    return {
+      mount(container, source) {
+        // Idempotent: calling mount twice on the same container should not
+        // duplicate SVG. We treat mount and update identically from the
+        // rendering pipeline's perspective; the contract difference is only
+        // intent (mount for first paint, update for re-renders).
+        return renderInternal(container, source);
+      },
+      update(container, source) {
+        return renderInternal(container, source);
+      },
+      showError(container, source, error) {
+        renderErrorBlock(container, source, error && error.message ? error.message : String(error));
+        if (onStateChange) onStateChange(container, "error");
+      },
+      getState,
+      destroy() {
+        controllerDestroyed = true;
+        // Mark every known container as destroyed so any in-flight render
+        // for them is dropped. We can't iterate WeakMaps, but we *can*
+        // iterate the Set we maintain.
+        const list = Array.from(containers);
+        for (const c of list) markDestroyed(c);
+        containers.clear();
+      },
+      /** Destroy state for a single container. */
+      destroyContainer(container) {
+        markDestroyed(container);
+        containers.delete(container);
+      },
+    };
+  }
+
+  return { createMermaidController };
+});

package/public/style.css

@@ -252,6 +252,51 @@ table.toolcalls .result {
   overflow-x: auto;
 }
 
+/* v0.6.11: error fallback when Mermaid rendering fails (or Mermaid library
+   is unavailable). The error block replaces the bare raw `flowchart TD`
+   source so the user always sees a clear, actionable state. */
+.mermaid-error {
+  background: #fef2f2;
+  border: 1px solid #fca5a5;
+  border-radius: 6px;
+  padding: 12px 14px;
+  color: #7f1d1d;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+}
+
+.mermaid-error-header {
+  font-weight: 600;
+  margin-bottom: 6px;
+}
+
+.mermaid-error-msg {
+  font-size: 13px;
+  margin-bottom: 8px;
+  word-break: break-word;
+}
+
+.mermaid-error-source {
+  margin-top: 6px;
+}
+
+.mermaid-error-source summary {
+  cursor: pointer;
+  font-size: 12px;
+  color: #991b1b;
+}
+
+.mermaid-error-source pre {
+  background: #fff;
+  border: 1px solid #fca5a5;
+  border-radius: 4px;
+  padding: 8px;
+  font-size: 11px;
+  color: #1f2937;
+  max-height: 240px;
+  overflow: auto;
+  white-space: pre-wrap;
+}
+
 .hint {
   margin-top: 8px;
   font-size: 12px;
@@ -285,4 +330,198 @@ details summary {
     padding: 14px 14px;
     margin: 14px 10px;
   }
-}
+}
+/* ------------------------------------------------------------------------- */
+/* Task lifecycle pipeline (v0.7.0+)                                         */
+/* ------------------------------------------------------------------------- */
+
+.panel-pipeline {
+  /* keeps the existing panel rhythm */
+}
+
+.op-timeline {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  position: relative;
+}
+
+.op-timeline::before {
+  content: "";
+  position: absolute;
+  left: 11px;
+  top: 6px;
+  bottom: 6px;
+  width: 2px;
+  background: var(--border);
+}
+
+.op-node {
+  position: relative;
+  padding: 6px 0 14px 36px;
+  list-style: none;
+}
+
+.op-bullet {
+  position: absolute;
+  left: 4px;
+  top: 12px;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--panel-2);
+  border: 2px solid var(--border);
+  box-shadow: 0 0 0 3px var(--bg);
+}
+
+.op-body {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.op-row1 {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.op-seq {
+  color: var(--muted);
+  font-variant-numeric: tabular-nums;
+  min-width: 2.5em;
+}
+
+.op-time {
+  margin-left: auto;
+  color: var(--muted);
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+}
+
+.op-title {
+  font-weight: 600;
+}
+
+.op-badge {
+  display: inline-block;
+  font-size: 11px;
+  padding: 2px 8px;
+  border-radius: 10px;
+  border: 1px solid var(--border);
+  background: var(--panel-2);
+  color: var(--text);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.op-details {
+  background: var(--panel-2);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 8px 10px;
+}
+
+.op-details summary {
+  cursor: pointer;
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.op-desc {
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-size: 13px;
+  line-height: 1.5;
+  margin-top: 6px;
+}
+
+.op-proc {
+  margin-top: 6px;
+  font-size: 12px;
+  color: var(--muted);
+}
+
+.op-proc-label {
+  display: inline-block;
+  background: var(--panel);
+  border: 1px solid var(--border);
+  padding: 0 6px;
+  border-radius: 4px;
+  margin-right: 4px;
+}
+
+/* Status colors per canonical milestone type */
+.op-status-create .op-bullet { background: #1e40af; border-color: #3b82f6; }
+.op-status-create .op-badge { background: #1e3a8a; color: #dbeafe; border-color: #3b82f6; }
+
+.op-status-progress .op-bullet { background: #0e7490; border-color: #06b6d4; }
+.op-status-progress .op-badge { background: #164e63; color: #cffafe; border-color: #06b6d4; }
+
+.op-status-milestone .op-bullet { background: #15803d; border-color: #22c55e; }
+.op-status-milestone .op-badge { background: #14532d; color: #dcfce7; border-color: #22c55e; }
+
+.op-status-problem .op-bullet { background: #b91c1c; border-color: #ef4444; }
+.op-status-problem .op-badge { background: #7f1d1d; color: #fee2e2; border-color: #ef4444; }
+
+.op-status-solution .op-bullet { background: #a16207; border-color: #f59e0b; }
+.op-status-solution .op-badge { background: #78350f; color: #fef3c7; border-color: #f59e0b; }
+
+.op-status-decision .op-bullet { background: #6d28d9; border-color: #8b5cf6; }
+.op-status-decision .op-badge { background: #4c1d95; color: #ede9fe; border-color: #8b5cf6; }
+
+.op-status-review .op-bullet { background: #0f766e; border-color: #14b8a6; }
+.op-status-review .op-badge { background: #134e4a; color: #ccfbf1; border-color: #14b8a6; }
+
+.op-status-completed .op-bullet { background: #166534; border-color: #22c55e; }
+.op-status-completed .op-badge { background: #14532d; color: #dcfce7; border-color: #22c55e; }
+
+.op-status-unknown .op-bullet { background: #475569; border-color: #94a3b8; }
+.op-status-unknown .op-badge { background: #334155; color: #e2e8f0; border-color: #94a3b8; }
+
+.pipeline-stale {
+  display: inline-block;
+  background: var(--warn);
+  color: #1f2937;
+  padding: 1px 8px;
+  border-radius: 8px;
+  font-size: 11px;
+  margin-left: 8px;
+}
+
+.pipeline-error {
+  background: rgba(239, 68, 68, 0.08);
+  border: 1px solid var(--bad);
+  border-radius: 6px;
+  padding: 10px 12px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.btn {
+  background: var(--panel-2);
+  color: var(--text);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 6px 12px;
+  cursor: pointer;
+  font-size: 13px;
+}
+
+.btn-retry:hover {
+  border-color: var(--accent);
+  color: var(--accent);
+}
+
+@media (max-width: 800px) {
+  .op-row1 {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 4px;
+  }
+  .op-time {
+    margin-left: 0;
+  }
+}