Add Tasks dashboard page

New page with: - Data fetch: /tasks/ + /workstreams/ + /topics/ in parallel, enriched with domain and workstream_title per task - Task Overview KPI card in TOC sidebar: open / blocked (red if >0) / in progress / done with % of total - Status Distribution chart (horizontal bar, colour-coded by status) - Blocked Tasks section: cards with priority badge, domain, workstream, blocking_reason highlighted in amber - All Tasks: filterable table (status, priority, domain, assignee multiselect + text), sorted blocked→in_progress→todo→done, 25 rows Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-02-27 01:04:19 +01:00
parent 8decb6a4df
commit c0f6f01bff
2 changed files with 261 additions and 0 deletions
--- a/dashboard/observablehq.config.js
+++ b/dashboard/observablehq.config.js
@@ -4,6 +4,7 @@ export default {
  pages: [
    { name: "Overview", path: "/" },
    { name: "Workstreams", path: "/workstreams" },
+    { name: "Tasks", path: "/tasks" },
    { name: "Decisions", path: "/decisions" },
    { name: "Progress", path: "/progress" },
    {
--- a/dashboard/src/tasks.md
+++ b/dashboard/src/tasks.md
@@ -0,0 +1,260 @@
+---
+title: Tasks
+---
+
+```js
+const API  = "http://127.0.0.1:8000";
+const POLL = 15_000;
+```
+
+```js
+const taskState = (async function*() {
+  while (true) {
+    let data = [], ok = false;
+    try {
+      const [rt, rw, rto] = await Promise.all([
+        fetch(`${API}/tasks/?limit=500`),
+        fetch(`${API}/workstreams/`),
+        fetch(`${API}/topics/`),
+      ]);
+      ok = rt.ok && rw.ok && rto.ok;
+      if (ok) {
+        const [taskList, wsList, topicList] = await Promise.all([rt.json(), rw.json(), rto.json()]);
+        const topicMap = Object.fromEntries(topicList.map(t => [t.id, t]));
+        const wsMap = Object.fromEntries(wsList.map(w => [w.id, {
+          ...w,
+          domain: topicMap[w.topic_id]?.domain ?? "unknown",
+        }]));
+        data = taskList.map(t => ({
+          ...t,
+          workstream_title: wsMap[t.workstream_id]?.title ?? "—",
+          domain:           wsMap[t.workstream_id]?.domain ?? "unknown",
+        }));
+      }
+    } catch {}
+    yield {data, ok, ts: new Date()};
+    await new Promise(res => setTimeout(res, POLL));
+  }
+})();
+```
+
+```js
+const data = taskState.data ?? [];
+const _ok  = taskState.ok   ?? false;
+const _ts  = taskState.ts;
+```
+
+```js
+import {MultiSelect} from "./components/multiselect.js";
+
+const STATUSES   = ["todo", "in_progress", "blocked", "done", "cancelled"];
+const PRIORITIES = ["critical", "high", "medium", "low"];
+const DOMAINS    = ["custodian", "railiance", "markitect", "coulomb_social", "personhood", "foerster_capabilities"];
+
+const _filtersForm = Inputs.form(
+  {
+    status:   MultiSelect(STATUSES,   {label: "Status",   placeholder: "All statuses"}),
+    priority: MultiSelect(PRIORITIES, {label: "Priority", placeholder: "All priorities"}),
+    domain:   MultiSelect(DOMAINS,    {label: "Domain",   placeholder: "All domains"}),
+    assignee: Inputs.text({placeholder: "Assignee…", style: "width:120px"}),
+  },
+  {
+    template: ({status, priority, domain, assignee}) => html`<div class="filter-bar">
+      ${status}${priority}${domain}
+      <div class="filter-owner">${assignee}</div>
+    </div>`,
+  }
+);
+```
+
+```js
+const filters = Generators.input(_filtersForm);
+```
+
+```js
+const filtered = data.filter(t =>
+  (filters.status.length   === 0 || filters.status.includes(t.status)) &&
+  (filters.priority.length === 0 || filters.priority.includes(t.priority)) &&
+  (filters.domain.length   === 0 || filters.domain.includes(t.domain)) &&
+  (!filters.assignee || (t.assignee ?? "").toLowerCase().includes(filters.assignee.toLowerCase()))
+);
+```
+
+# Tasks
+
+```js
+import {injectTocTop} from "./components/toc-sidebar.js";
+import {withDocHelp}   from "./components/doc-overlay.js";
+
+// ── KPI sidebar card ─────────────────────────────────────────────────────────
+const _open    = data.filter(t => ["todo", "in_progress", "blocked"].includes(t.status));
+const _blocked = data.filter(t => t.status === "blocked");
+const _inProg  = data.filter(t => t.status === "in_progress");
+const _done    = data.filter(t => t.status === "done");
+const _total   = data.filter(t => t.status !== "cancelled").length;
+const _donePct = _total > 0 ? Math.round(_done.length / _total * 100) : 0;
+
+const _kpiBox = html`<div class="kpi-infobox">
+  <div class="kpi-infobox-title">Task Overview</div>
+  <div class="kpi-row">
+    <span class="kpi-row-label">open</span>
+    <div class="kpi-row-right">
+      <div class="kpi-row-value">${_open.length}</div>
+    </div>
+  </div>
+  <div class="kpi-row">
+    <span class="kpi-row-label">blocked</span>
+    <div class="kpi-row-right">
+      <div class="kpi-row-value" style="color:${_blocked.length > 0 ? '#dc2626' : 'inherit'}">${_blocked.length}</div>
+    </div>
+  </div>
+  <div class="kpi-row">
+    <span class="kpi-row-label">in progress</span>
+    <div class="kpi-row-right">
+      <div class="kpi-row-value">${_inProg.length}</div>
+    </div>
+  </div>
+  <div class="kpi-row" style="border-top:1px solid var(--theme-foreground-faint,#eee)">
+    <span class="kpi-row-label">done</span>
+    <div class="kpi-row-right">
+      <div class="kpi-row-value">${_done.length}</div>
+      <div class="kpi-row-sub">${_donePct}% of total</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");
+
+// ── Inject into TOC sidebar ───────────────────────────────────────────────────
+injectTocTop("task-kpi-box", _kpiBox);
+injectTocTop("live-indicator", _liveEl);
+
+const _h1 = document.querySelector("#observablehq-main h1");
+if (_h1) _h1.style.position = "relative";
+```
+
+## Status Distribution
+
+```js
+import * as Plot from "npm:@observablehq/plot";
+
+const STATUS_COLOR = {
+  todo:        "#94a3b8",
+  in_progress: "#3b82f6",
+  blocked:     "#ef4444",
+  done:        "#22c55e",
+  cancelled:   "#cbd5e1",
+};
+
+const byStatus = STATUSES
+  .map(s => ({status: s, count: filtered.filter(t => t.status === s).length}))
+  .filter(d => d.count > 0);
+
+display(byStatus.length === 0
+  ? html`<p class="dim">No tasks match the current filter.</p>`
+  : Plot.plot({
+      marks: [
+        Plot.barX(byStatus, {y: "status", x: "count", fill: d => STATUS_COLOR[d.status] ?? "#94a3b8", tip: true}),
+        Plot.ruleX([0]),
+      ],
+      marginLeft: 90,
+      width: 500,
+    })
+);
+```
+
+## Blocked Tasks
+
+```js
+const _blockedInFilter = filtered.filter(t => t.status === "blocked");
+
+if (_blockedInFilter.length === 0) {
+  display(html`<p class="dim">No blocked tasks in current filter. ✓</p>`);
+} else {
+  display(html`<div class="task-blocked-list">${_blockedInFilter.map(t => html`
+    <div class="task-blocked-item">
+      <div class="task-item-header">
+        <span class="task-badge task-priority-${t.priority}">${t.priority}</span>
+        <span class="task-context">${t.domain}</span>
+        <span class="task-context task-ws-name">${t.workstream_title}</span>
+        ${t.due_date ? html`<span class="task-due">${new Date(t.due_date) < new Date() ? "⚠ overdue" : "due"} ${t.due_date}</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>`);
+}
+```
+
+## All Tasks
+
+```js
+display(_filtersForm);
+display(html`<p><strong>${filtered.length}</strong> tasks shown.</p>`);
+
+const PRIORITY_ORDER = {critical: 0, high: 1, medium: 2, low: 3};
+const STATUS_ORDER   = {blocked: 0, in_progress: 1, todo: 2, done: 3, cancelled: 4};
+
+const sorted = [...filtered].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);
+});
+
+display(Inputs.table(sorted.map(t => ({
+  Status:     t.status,
+  Priority:   t.priority,
+  Title:      t.title,
+  Domain:     t.domain,
+  Workstream: t.workstream_title,
+  Assignee:   t.assignee ?? "—",
+  Due:        t.due_date ?? "—",
+})), {rows: 25}));
+```
+
+<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; padding-right: 1.6rem; }
+.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; }
+.kpi-row-sub { font-size: 0.68rem; color: var(--theme-foreground-faint, #aaa); line-height: 1.2; }
+
+/* ── Filters ──────────────────────────────────────────────────────────────── */
+.filter-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 1rem; }
+.filter-owner { display: flex; align-items: center; }
+.filter-owner input { height: 30px; font-size: 0.85rem; padding: 0.25rem 0.5rem; border-radius: 6px; border: 1px solid var(--theme-foreground-faint, #ccc); background: var(--theme-background, #fff); font-family: inherit; color: inherit; }
+
+/* ── Blocked task cards ───────────────────────────────────────────────────── */
+.task-blocked-list { display: flex; flex-direction: column; gap: 0.5rem; }
+.task-blocked-item { border-left: 3px solid #ef4444; border-radius: 0 6px 6px 0; background: var(--theme-background-alt); padding: 0.65rem 0.9rem; }
+.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-context  { color: var(--theme-foreground-muted, #666); }
+.task-ws-name  { font-style: italic; }
+.task-due      { color: #dc2626; font-weight: 600; }
+.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; }
+
+/* ── Utility ──────────────────────────────────────────────────────────────── */
+.dim { color: gray; font-style: italic; }
+</style>