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

package/public/tasks-tree.js

@@ -0,0 +1,449 @@
+/* ------------------------------------------------------------------------- */
+/* roy-plugin-task-show — tasks tree controller                              */
+/* ------------------------------------------------------------------------- */
+/* eslint-disable no-undef */
+
+/**
+ * Renders the hierarchical task list served by `/api/tasks/tree`.
+ *
+ * Responsibilities:
+ *   - Fetch the tree on page load and whenever a filter / refresh action
+ *     changes.
+ *   - Render an accessible tree with collapse / expand.
+ *   - Filter by status, priority and free-text query.
+ *   - Click a task row to open its per-task detail page (`/task/:id`).
+ *
+ * Storage: a single in-memory `state` object holds the latest envelope
+ * + filter selections. The DOM is fully re-rendered on each fetch, which
+ * keeps the code path linear (no diff/patch gymnastics) and lets us swap
+ * data sources in a single place.
+ */
+
+(function attachTasksTreeController() {
+  const body = document.body;
+  if (!body || body.getAttribute("data-view") !== "tasks-tree") return;
+
+  const root = document.querySelector("[data-tasks-tree]");
+  if (!root) return;
+
+  const summaryEl = document.querySelector("[data-tree-summary]");
+  const searchInput = document.querySelector("[data-tree-search]");
+  const statusButtons = Array.from(document.querySelectorAll("[data-tree-status]"));
+  const priorityButtons = Array.from(document.querySelectorAll("[data-tree-priority]"));
+  const actionButtons = Array.from(document.querySelectorAll("[data-tree-action]"));
+
+  // Per-node expanded state. Survives re-renders so the user doesn't have
+  // to re-open branches every time they tweak a filter.
+  /** @type {Map<number, boolean>} */
+  const expanded = new Map();
+
+  // Filter state.
+  /** @type {{status: string, priority: string, query: string, stale: number}} */
+  const filter = {
+    status: "",
+    priority: "",
+    query: "",
+    stale: 0, // 0 = allow stale cache, >0 forces refresh each call
+  };
+
+  // Latest envelope.
+  /** @type {{total: number, rootCount: number, tree: any[], filter: any, fetchedAt: string, stale: boolean} | null} */
+  let envelope = null;
+  let inflight = false;
+  let inflightPromise = null;
+
+  // -------------------------------------------------------------------------
+  // Filter wiring
+  // -------------------------------------------------------------------------
+
+  function setActiveButton(buttons, attr, value) {
+    for (const btn of buttons) {
+      const v = btn.getAttribute(attr) ?? "";
+      btn.classList.toggle("is-active", v === value);
+      btn.setAttribute("aria-pressed", v === value ? "true" : "false");
+    }
+  }
+
+  statusButtons.forEach((btn) => {
+    btn.addEventListener("click", () => {
+      filter.status = btn.getAttribute("data-tree-status") ?? "";
+      setActiveButton(statusButtons, "data-tree-status", filter.status);
+      void refetch();
+    });
+  });
+  priorityButtons.forEach((btn) => {
+    btn.addEventListener("click", () => {
+      filter.priority = btn.getAttribute("data-tree-priority") ?? "";
+      setActiveButton(priorityButtons, "data-tree-priority", filter.priority);
+      void refetch();
+    });
+  });
+  actionButtons.forEach((btn) => {
+    btn.addEventListener("click", () => {
+      const action = btn.getAttribute("data-tree-action");
+      if (action === "expand") {
+        for (const id of expanded.keys()) expanded.set(id, true);
+        // Also auto-expand any node with children so the first paint
+        // shows the full tree after a user-driven "expand all".
+        if (envelope) collectExpandable(envelope.tree, true);
+        render();
+      } else if (action === "collapse") {
+        expanded.clear();
+        render();
+      } else if (action === "refresh") {
+        filter.stale = Date.now();
+        void refetch(true).finally(() => { filter.stale = 0; });
+      }
+    });
+  });
+
+  if (searchInput) {
+    let t = null;
+    searchInput.addEventListener("input", () => {
+      const v = searchInput.value ?? "";
+      if (t) clearTimeout(t);
+      t = setTimeout(() => {
+        filter.query = v.trim();
+        // Pure client-side filter — no refetch needed. But we should
+        // auto-expand any branch that contains a hit, so the user sees
+        // their match without manually clicking.
+        autoExpandMatches(envelope?.tree ?? []);
+        render();
+      }, 180);
+    });
+  }
+
+  // -------------------------------------------------------------------------
+  // Data fetch
+  // -------------------------------------------------------------------------
+
+  function buildUrl() {
+    const params = new URLSearchParams();
+    if (filter.status) params.set("status", filter.status);
+    if (filter.priority) params.set("priority", filter.priority);
+    if (filter.stale) params.set("stale", "0");
+    return "/api/tasks/tree" + (params.toString() ? "?" + params.toString() : "");
+  }
+
+  async function refetch(force = false) {
+    if (!force && inflight) return inflightPromise;
+    inflight = true;
+    setBusy(true);
+    inflightPromise = (async () => {
+      try {
+        const url = buildUrl();
+        const res = await fetch(url, { headers: { accept: "application/json" } });
+        if (!res.ok) {
+          await renderError(res.status, await safeReadText(res));
+          return;
+        }
+        const json = await res.json();
+        envelope = json;
+        // v0.8.3: auto-expand the first 3 levels (root + child +
+        // grandchild) so the hierarchical nature is visible the moment
+        // the page loads — a 1- or 2-level expansion left many roots
+        // looking like a flat list. The default is overridable via the
+        // expanded map (e.g. by search / filter handlers).
+        autoExpandFirstLevels(json.tree || [], 3);
+        render();
+      } catch (err) {
+        await renderError(0, String(err && err.message || err));
+      } finally {
+        inflight = false;
+        setBusy(false);
+      }
+    })();
+    return inflightPromise;
+  }
+
+  async function safeReadText(res) {
+    try { return await res.text(); } catch { return ""; }
+  }
+
+  function setBusy(busy) {
+    root.setAttribute("aria-busy", busy ? "true" : "false");
+    if (summaryEl) {
+      // v0.8.3: only overwrite textContent when we are entering the
+      // busy state. When we leave busy, `render()` has already filled
+      // in the HTML (visible / total / per-depth pills / fetch
+      // timestamp) — overwriting textContent with itself would strip
+      // the inner `<span>` elements that `renderSummary` emits.
+      if (busy) summaryEl.textContent = "Loading…";
+    }
+  }
+
+  // -------------------------------------------------------------------------
+  // Rendering
+  // -------------------------------------------------------------------------
+
+  function render() {
+    if (!envelope) return;
+    const tree = envelope.tree || [];
+    const filtered = applyFilters(tree, filter);
+    if (filtered.length === 0) {
+      root.innerHTML = renderEmpty(filter, envelope);
+      renderSummary(filtered.length, envelope, filter);
+      return;
+    }
+    const html = filtered
+      .map((node) => renderNode(node, 0, { hasSiblingAfter: false }))
+      .join("");
+    root.innerHTML = `<ul class="tree-list" role="group">${html}</ul>`;
+    attachRowHandlers();
+    renderSummary(filtered.length, envelope, filter);
+  }
+
+  function renderEmpty(f, env) {
+    if (env && env.total === 0) {
+      return `<p class="empty">No tasks recorded yet. Create a task with <code>roy-agent task_create</code> and refresh.</p>`;
+    }
+    return `<p class="empty">No tasks match the current filter (status=<code>${escapeHtml(f.status || "any")}</code>, priority=<code>${escapeHtml(f.priority || "any")}</code>${f.query ? `, query=<code>${escapeHtml(f.query)}</code>` : ""}).</p>`;
+  }
+
+  function renderSummary(visibleCount, env, f) {
+    if (!summaryEl) return;
+    const totalRoots = env.rootCount ?? 0;
+    const total = env.total ?? 0;
+    const stale = env.stale ? " <span class='stale-pill'>stale</span>" : "";
+    const fetched = env.fetchedAt ? new Date(env.fetchedAt).toISOString().replace("T", " ").slice(0, 19) : "";
+    // v0.8.3: include a per-depth breakdown so the user can see at a
+    // glance how the hierarchy is distributed (root / child /
+    // grandchild / great-grandchild / …). Recursion is bounded by the
+    // tree depth, which is tiny in practice.
+    const depthCounts = collectDepthCounts(env.tree || []);
+    const breakdown = depthCounts.length === 0
+      ? ""
+      : ` · <span class="tree-depth-breakdown">${depthCounts
+          .map((d, i) => `<span class="tree-depth-pill" data-depth="${i}">${escapeHtml(String(d))} ${i === 0 ? "root" : i === 1 ? "child" : i === 2 ? "grandchild" : i === 3 ? "great-grandchild" : "level " + i}</span>`)
+          .join(" ")}</span>`;
+    const parts = [
+      `<strong>${escapeHtml(String(visibleCount))}</strong> visible / <strong>${escapeHtml(String(total))}</strong> total (${escapeHtml(String(totalRoots))} root task${totalRoots === 1 ? "" : "s"})${breakdown}`,
+    ];
+    if (f.query) parts.push(`query="<code>${escapeHtml(f.query)}</code>"`);
+    if (f.status) parts.push(`status=<code>${escapeHtml(f.status)}</code>`);
+    if (f.priority) parts.push(`priority=<code>${escapeHtml(f.priority)}</code>`);
+    parts.push(`fetched ${escapeHtml(fetched)}${stale}`);
+    summaryEl.innerHTML = parts.join(" · ");
+  }
+
+  /**
+   * Walk the tree and count how many nodes live at each depth.
+   * Returns an array indexed by depth: depthCounts[0] = roots,
+   * depthCounts[1] = children, etc. The array length is one greater
+   * than the deepest level encountered.
+   */
+  function collectDepthCounts(tree) {
+    const counts = [];
+    function walk(nodes, depth) {
+      if (depth >= counts.length) counts.push(0);
+      for (const n of nodes) {
+        counts[depth]++;
+        if ((n.children || []).length > 0) walk(n.children, depth + 1);
+      }
+    }
+    walk(tree, 0);
+    return counts;
+  }
+
+  function renderNode(node, depth, ctx) {
+    const task = node.task;
+    const children = node.children || [];
+    const id = task.id;
+    const hasChildren = children.length > 0;
+    const isOpen = expanded.get(id) === true;
+    const matches = matchesFilter(task);
+    const tagsHtml = (task.tags || [])
+      .slice(0, 4)
+      .map((t) => `<span class="tree-tag">${escapeHtml(t)}</span>`)
+      .join(" ");
+    const indentPx = depth * 22;
+    const progress = typeof task.progress === "number"
+      ? `<span class="tree-progress" title="${task.progress}%">
+           <span class="tree-progress-bar" style="width:${task.progress}%"></span>
+           <span class="tree-progress-label">${task.progress}%</span>
+         </span>`
+      : "";
+    const toggler = hasChildren
+      ? `<button type="button" class="tree-toggler" data-tree-toggle="${id}" aria-expanded="${isOpen ? "true" : "false"}" aria-label="${isOpen ? "Collapse" : "Expand"} task #${id}">
+           <span class="tree-toggler-icon">${isOpen ? "▼" : "▶"}</span>
+         </button>`
+      : `<span class="tree-toggler tree-toggler-leaf" aria-hidden="true">·</span>`;
+    const status = escapeHtml(task.status || "unknown");
+    const priority = escapeHtml(task.priority || "medium");
+    const title = escapeHtml(task.title || "(no title)");
+    const currentStatus = task.current_status
+      ? `<span class="tree-current-status">${escapeHtml(task.current_status)}</span>`
+      : "";
+    const updatedAt = task.updatedAt
+      ? `<span class="tree-updated" title="${escapeHtml(task.updatedAt)}">${escapeHtml(formatShortDate(task.updatedAt))}</span>`
+      : "";
+    const dataAttrs = [
+      `data-tree-id="${id}"`,
+      `data-tree-depth="${depth}"`,
+      `data-tree-status="${status}"`,
+      `data-tree-priority="${priority}"`,
+    ].join(" ");
+    const childrenHtml = hasChildren && isOpen
+      ? `<ul class="tree-list tree-children" role="group">
+           ${children.map((c, i) => renderNode(c, depth + 1, { hasSiblingAfter: i < children.length - 1 })).join("")}
+         </ul>`
+      : "";
+    return `
+      <li class="tree-item ${matches ? "" : "tree-item-hidden"} ${hasChildren ? "tree-item-branch" : "tree-item-leaf"} ${isOpen ? "is-open" : "is-closed"}" ${dataAttrs}>
+        <div class="tree-row" data-depth="${depth}" style="padding-left:${indentPx}px">
+          ${toggler}
+          <a class="tree-id" href="/task/${id}" title="Open task #${id}">#${id}</a>
+          <span class="badge badge-${status}" title="${status}">${status}</span>
+          <span class="badge badge-priority-${priority}" title="priority: ${priority}">${priority}</span>
+          <span class="tree-type-badge" title="type">${escapeHtml(task.type || "normal")}</span>
+          <a class="tree-title" href="/task/${id}" title="${title}">${title}</a>
+          ${tagsHtml ? `<span class="tree-tags">${tagsHtml}</span>` : ""}
+          ${progress}
+          ${updatedAt}
+        </div>
+        ${currentStatus ? `<div class="tree-row-meta" style="padding-left:${indentPx + 32}px">${currentStatus}</div>` : ""}
+        ${childrenHtml}
+      </li>
+    `;
+  }
+
+  function attachRowHandlers() {
+    const togglers = root.querySelectorAll("[data-tree-toggle]");
+    togglers.forEach((btn) => {
+      btn.addEventListener("click", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        const id = Number(btn.getAttribute("data-tree-toggle"));
+        if (!Number.isFinite(id)) return;
+        const current = expanded.get(id) === true;
+        expanded.set(id, !current);
+        render();
+      });
+    });
+  }
+
+  function applyFilters(tree, f) {
+    if (!f.status && !f.priority && !f.query) return tree;
+    const visit = (node) => {
+      const childHits = (node.children || []).map(visit).filter(Boolean);
+      const selfHit = matchesFilter(node.task);
+      if (selfHit || childHits.length > 0) {
+        // Auto-expand parents when a child hits.
+        if (!selfHit && childHits.length > 0) expanded.set(node.task.id, true);
+        return { ...node, children: childHits };
+      }
+      return null;
+    };
+    return tree.map(visit).filter(Boolean);
+  }
+
+  function matchesFilter(task) {
+    if (filter.status && task.status !== filter.status) return false;
+    if (filter.priority && task.priority !== filter.priority) return false;
+    if (filter.query) {
+      const q = filter.query.toLowerCase();
+      const idMatch = String(task.id).includes(q);
+      const titleMatch = (task.title || "").toLowerCase().includes(q);
+      if (!idMatch && !titleMatch) return false;
+    }
+    return true;
+  }
+
+  function autoExpandFirstLevels(tree, maxDepth) {
+    if (maxDepth <= 0) return;
+    const walk = (nodes, depth) => {
+      if (depth >= maxDepth) return;
+      for (const n of nodes) {
+        if ((n.children || []).length > 0) {
+          expanded.set(n.task.id, true);
+          walk(n.children, depth + 1);
+        }
+      }
+    };
+    walk(tree, 0);
+  }
+
+  function autoExpandMatches(tree) {
+    if (!filter.query) return;
+    const q = filter.query.toLowerCase();
+    const walk = (nodes, ancestors) => {
+      for (const n of nodes) {
+        const idMatch = String(n.task.id).includes(q);
+        const titleMatch = (n.task.title || "").toLowerCase().includes(q);
+        if (idMatch || titleMatch) {
+          for (const a of ancestors) expanded.set(a, true);
+          expanded.set(n.task.id, true);
+        }
+        if ((n.children || []).length > 0) {
+          walk(n.children, [...ancestors, n.task.id]);
+        }
+      }
+    };
+    walk(tree, []);
+  }
+
+  function collectExpandable(tree, val) {
+    const walk = (nodes) => {
+      for (const n of nodes) {
+        if ((n.children || []).length > 0) {
+          expanded.set(n.task.id, val);
+          walk(n.children);
+        }
+      }
+    };
+    walk(tree);
+  }
+
+  // -------------------------------------------------------------------------
+  // Error rendering
+  // -------------------------------------------------------------------------
+
+  async function renderError(status, body) {
+    let hint = "";
+    if (status === 503) {
+      hint = "The plugin's <code>roy-agent</code> CLI is not configured (or not on PATH). Set <code>royAgentCliPath</code> in plugin config or place the CLI at one of the resolved locations.";
+    } else if (status === 502 || status === 0) {
+      hint = "Spawning <code>roy-agent tasks tree --json</code> failed. Is the CLI installed and on PATH?";
+    } else {
+      hint = `Unexpected status ${status}.`;
+    }
+    root.innerHTML = `<p class="empty">Failed to load task tree. ${hint}</p>`;
+    if (summaryEl) {
+      summaryEl.innerHTML = `error: <code>${escapeHtml(String(status))}</code>${body ? ` — ${escapeHtml(body.slice(0, 200))}` : ""}`;
+    }
+  }
+
+  // -------------------------------------------------------------------------
+  // Helpers
+  // -------------------------------------------------------------------------
+
+  function escapeHtml(s) {
+    return String(s ?? "")
+      .replace(/&/g, "&amp;")
+      .replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;")
+      .replace(/"/g, "&quot;")
+      .replace(/'/g, "&#39;");
+  }
+
+  function formatShortDate(iso) {
+    try {
+      const d = new Date(iso);
+      const now = new Date();
+      const sameDay = d.toDateString() === now.toDateString();
+      if (sameDay) return d.toISOString().slice(11, 16); // HH:MM
+      return d.toISOString().slice(5, 10); // MM-DD
+    } catch {
+      return iso;
+    }
+  }
+
+  // -------------------------------------------------------------------------
+  // Boot
+  // -------------------------------------------------------------------------
+
+  // Auto-refresh every 30s while the page is open so newly created /
+  // updated tasks show up without a manual reload.
+  setInterval(() => { void refetch(); }, 30000);
+  void refetch();
+})();