feat(dashboard): nav restructure, full context-help coverage, 11 new ref docs

Navigation: - New order: Overview · Todo · Domains · Repos · Workstreams (collapsible, open:false, with atomic sub-entries: Decisions, Tasks, Debt, Extends, Dependencies) · Contributions · SBOM · Progress · Reference (collapsible) - Reference section gains path:/reference landing page; all 18 doc pages listed in nav (alphabetical) and in reference.md table New pages: - todo.md — Internal / Ecosystem / Third-party todo classification - dependencies.md — dependency edge table derived from state/summary - reference.md — Reference landing page with full doc index New reference doc pages (11): contributions, debt, dependencies, domains, extensions, overview, repos, tasks, todo + reference (meta) already added previously doc-overlay.js — lazy bubblehelp tooltip: - _titleCache Map + _fetchDocTitle(docPath): on first hover of any ? button, fetches the target doc page, parses <h1>, sets btn.title - Native browser tooltip appears exactly on the ? circle on subsequent hover Context-help wired on all 14 dashboard pages: - h1 withDocHelp added to: index, todo, domains, repos, tasks, techdept, extensions, dependencies (contributions/workstreams/decisions/sbom/ progress/reference were already wired) - domains.md + repos.md: added missing withDocHelp import and live-data link - tasks/techdept/extensions: removed duplicate _h1 const that caused SyntaxError: Identifier '_h1' has already been declared Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-01 23:46:26 +01:00
parent 70c8e3cd51
commit 947c2e8824
22 changed files with 1468 additions and 25 deletions
--- a/dashboard/src/todo.md
+++ b/dashboard/src/todo.md
@@ -0,0 +1,235 @@
+---
+title: Todo
+---
+
+```js
+const API  = "http://127.0.0.1:8000";
+const POLL = 15_000;
+const THIS_REPO = "the-custodian";
+```
+
+```js
+// Live poll: tasks + workstreams + topics + contributions
+const todoState = (async function*() {
+  while (true) {
+    let tasks = [], contribs = [], wsMap = {}, ok = false;
+    try {
+      const [rt, rw, rto, rc] = await Promise.all([
+        fetch(`${API}/tasks/?limit=500`),
+        fetch(`${API}/workstreams/`),
+        fetch(`${API}/topics/`),
+        fetch(`${API}/contributions/`),
+      ]);
+      ok = rt.ok && rw.ok && rto.ok && rc.ok;
+      if (ok) {
+        const [taskList, wsList, topicList, contribList] = await Promise.all([
+          rt.json(), rw.json(), rto.json(), rc.json(),
+        ]);
+        const topicMap = Object.fromEntries(topicList.map(t => [t.id, t]));
+        wsMap = Object.fromEntries(wsList.map(w => [w.id, {
+          ...w,
+          domain: topicMap[w.topic_id]?.domain_slug ?? "unknown",
+        }]));
+        tasks   = taskList.map(t => ({
+          ...t,
+          workstream_title: wsMap[t.workstream_id]?.title ?? "—",
+          domain:           wsMap[t.workstream_id]?.domain ?? "unknown",
+        }));
+        contribs = contribList;
+      }
+    } catch {}
+    yield {tasks, contribs, ok, ts: new Date()};
+    await new Promise(res => setTimeout(res, POLL));
+  }
+})();
+```
+
+```js
+const tasks   = todoState.tasks   ?? [];
+const contribs = todoState.contribs ?? [];
+const _ok      = todoState.ok      ?? false;
+const _ts      = todoState.ts;
+```
+
+```js
+// ── Classify tasks ────────────────────────────────────────────────────────────
+const OPEN_STATUSES = new Set(["todo", "in_progress", "blocked"]);
+
+// Internal: custodian domain, open, no [repo:] routing prefix
+const internal = tasks.filter(t =>
+  OPEN_STATUSES.has(t.status) &&
+  t.domain === "custodian" &&
+  !t.title.includes("[repo:")
+);
+
+// Ecosystem inbound: tasks routed to this repo from any domain
+const ecosystem = tasks.filter(t =>
+  OPEN_STATUSES.has(t.status) &&
+  t.title.toLowerCase().includes(`[repo:${THIS_REPO}]`)
+);
+
+// Third-party: open contributions (outbound work for upstream repos)
+const thirdParty = contribs.filter(c =>
+  ["draft", "submitted", "acknowledged"].includes(c.status)
+);
+```
+
+# Todo
+
+```js
+import {injectTocTop} from "./components/toc-sidebar.js";
+import {withDocHelp}  from "./components/doc-overlay.js";
+
+// ── KPI sidebar card ──────────────────────────────────────────────────────────
+const _kpiBox = html`<div class="kpi-infobox">
+  <div class="kpi-infobox-title">Todo Summary</div>
+  <div class="kpi-row">
+    <span class="kpi-row-label">internal</span>
+    <div class="kpi-row-right">
+      <div class="kpi-row-value">${internal.length}</div>
+    </div>
+  </div>
+  <div class="kpi-row">
+    <span class="kpi-row-label">ecosystem (inbound)</span>
+    <div class="kpi-row-right">
+      <div class="kpi-row-value">${ecosystem.length}</div>
+    </div>
+  </div>
+  <div class="kpi-row">
+    <span class="kpi-row-label">third-party (outbound)</span>
+    <div class="kpi-row-right">
+      <div class="kpi-row-value">${thirdParty.length}</div>
+    </div>
+  </div>
+</div>`;
+
+// ── Live indicator ────────────────────────────────────────────────────────────
+const _liveEl = html`<div class="live-indicator">
+  <span style="color:${_ok ? 'var(--theme-foreground-focus)' : 'red'}">●</span>
+  ${_ok
+    ? `Live · updated ${_ts?.toLocaleTimeString()}`
+    : html`<span style="color:red">Offline — run: <code>make api</code></span>`}
+</div>`;
+withDocHelp(_liveEl, "/docs/live-data");
+
+injectTocTop("todo-kpi-box", _kpiBox);
+injectTocTop("live-indicator", _liveEl);
+
+const _h1 = document.querySelector("#observablehq-main h1");
+if (_h1) { _h1.style.position = "relative"; withDocHelp(_h1, "/docs/todo"); }
+```
+
+---
+
+## Internal
+
+Work fully addressable within this repo. Open tasks in custodian workstreams
+without a cross-repo routing prefix.
+
+```js
+const PRIORITY_ORDER = {critical: 0, high: 1, medium: 2, low: 3};
+const STATUS_ORDER   = {blocked: 0, in_progress: 1, todo: 2};
+
+function sortTasks(arr) {
+  return [...arr].sort((a, b) => {
+    const sd = (STATUS_ORDER[a.status] ?? 9) - (STATUS_ORDER[b.status] ?? 9);
+    if (sd !== 0) return sd;
+    return (PRIORITY_ORDER[a.priority] ?? 9) - (PRIORITY_ORDER[b.priority] ?? 9);
+  });
+}
+
+function renderTaskList(arr) {
+  if (arr.length === 0) return html`<p class="dim">No open todos in this category. ✓</p>`;
+  return html`<div class="task-list">${sortTasks(arr).map(t => html`
+    <div class="task-item status-${t.status}">
+      <div class="task-item-header">
+        <span class="task-badge task-priority-${t.priority}">${t.priority}</span>
+        <span class="task-status-chip status-chip-${t.status}">${t.status.replace("_", " ")}</span>
+        <span class="task-context task-ws-name">${t.workstream_title}</span>
+        ${t.assignee ? html`<span class="task-assignee">@${t.assignee}</span>` : ""}
+      </div>
+      <div class="task-title">${t.title}</div>
+      ${t.blocking_reason ? html`<div class="task-blocking-reason">⊘ ${t.blocking_reason}</div>` : ""}
+    </div>
+  `)}</div>`;
+}
+
+display(renderTaskList(internal));
+```
+
+---
+
+## Ecosystem
+
+Inbound tasks routed to this repo by other agents via the
+`[repo:${THIS_REPO}]` prefix convention.
+
+```js
+display(renderTaskList(ecosystem));
+```
+
+---
+
+## Third-Party
+
+Outbound work for upstream repos — open contribution artifacts
+(bug reports, feature requests, extension points, upstream PRs).
+
+```js
+const TYPE_LABEL = {br: "Bug Report", fr: "Feature Request", ep: "Extension Point", upr: "Upstream PR"};
+const STATUS_COLOR_C = {draft: "#94a3b8", submitted: "#3b82f6", acknowledged: "#f59e0b"};
+
+if (thirdParty.length === 0) {
+  display(html`<p class="dim">No open outbound contributions. ✓</p>`);
+} else {
+  display(html`<div class="task-list">${thirdParty.map(c => html`
+    <div class="task-item">
+      <div class="task-item-header">
+        <span class="task-badge" style="background:#f1f5f9;color:#475569">${TYPE_LABEL[c.type] ?? c.type}</span>
+        <span class="task-status-chip" style="background:${STATUS_COLOR_C[c.status] ?? '#ccc'}20;color:${STATUS_COLOR_C[c.status] ?? '#666'}">${c.status}</span>
+        ${c.target_org  ? html`<span class="task-context">${c.target_org}</span>` : ""}
+        ${c.target_repo ? html`<span class="task-context task-ws-name">${c.target_repo}</span>` : ""}
+      </div>
+      <div class="task-title">${c.title}</div>
+      ${c.body_path ? html`<div class="task-blocking-reason" style="background:#f0fdf4;color:#166534">↗ ${c.body_path}</div>` : ""}
+    </div>
+  `)}</div>`);
+}
+```
+
+<style>
+/* ── Live indicator ───────────────────────────────────────────────────────── */
+.live-indicator { font-size: 0.8rem; color: gray; position: relative; padding: 0.55rem 1.8rem 0.55rem 0.7rem; margin-bottom: 0.75rem; }
+
+/* ── KPI infobox ──────────────────────────────────────────────────────────── */
+.kpi-infobox { background: var(--theme-background-alt, #f9f9f9); border: 1px solid var(--theme-foreground-faint, #e0e0e0); border-radius: 10px; padding: 0.75rem 1rem; position: relative; box-shadow: 0 1px 6px rgba(0,0,0,0.07); margin-bottom: 1.25rem; }
+.kpi-infobox-title { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--theme-foreground-muted, #888); margin-bottom: 0.55rem; }
+.kpi-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.3rem 0; }
+.kpi-row + .kpi-row { border-top: 1px solid var(--theme-foreground-faint, #eee); }
+.kpi-row-label { font-size: 0.8rem; color: var(--theme-foreground-muted, #666); white-space: nowrap; }
+.kpi-row-right { text-align: right; }
+.kpi-row-value { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
+
+/* ── Task list ────────────────────────────────────────────────────────────── */
+.task-list { display: flex; flex-direction: column; gap: 0.5rem; }
+.task-item { border-left: 3px solid var(--theme-foreground-faint, #ccc); border-radius: 0 6px 6px 0; background: var(--theme-background-alt); padding: 0.65rem 0.9rem; }
+.task-item.status-blocked     { border-left-color: #ef4444; }
+.task-item.status-in_progress { border-left-color: #3b82f6; }
+.task-item.status-todo        { border-left-color: #94a3b8; }
+.task-item-header { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-bottom: 0.3rem; font-size: 0.75rem; }
+.task-badge { display: inline-block; padding: 0.1rem 0.45rem; border-radius: 10px; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
+.task-priority-critical { background: #fee2e2; color: #991b1b; }
+.task-priority-high     { background: #ffedd5; color: #9a3412; }
+.task-priority-medium   { background: #dbeafe; color: #1e40af; }
+.task-priority-low      { background: #f1f5f9; color: #475569; }
+.task-status-chip { display: inline-block; padding: 0.1rem 0.45rem; border-radius: 10px; font-size: 0.7rem; font-weight: 500; }
+.status-chip-blocked     { background: #fee2e2; color: #991b1b; }
+.status-chip-in_progress { background: #dbeafe; color: #1e40af; }
+.status-chip-todo        { background: #f1f5f9; color: #475569; }
+.task-context  { color: var(--theme-foreground-muted, #666); }
+.task-ws-name  { font-style: italic; }
+.task-assignee { color: var(--theme-foreground-muted, #888); }
+.task-title    { font-weight: 600; font-size: 0.95rem; margin-bottom: 0.15rem; }
+.task-blocking-reason { font-size: 0.8rem; color: #b45309; background: #fef3c7; border-radius: 4px; padding: 0.2rem 0.5rem; margin-top: 0.25rem; }
+.dim { color: gray; font-style: italic; }
+</style>