Files
state-hub/dashboard/src/tasks.md
tegwick 2d0ce8f943 feat(api): CUST-WP-0018 — API hardening & code quality
T01: Fix datetime.utcnow() → datetime.now(tz=timezone.utc) in MCP server
T02: Wrap _get/_post/_patch/_delete with try/except; return error dicts
T03: Log warnings when write_log skips missing project path
T04: Add priority + due_date_before filters to GET /tasks/
T05: Add owner + slug filters to GET /workstreams/
T06: Add offset param to GET /progress/ for proper pagination
T07: Low-severity bundle:
  - CORS origins from CORS_ORIGINS env var (TD-017)
  - seed.py upsert domains+topics on re-run (TD-011)
  - normalise filter bar CSS → filter-text-input everywhere (TD-016)
  - add 30.5 avg-days-per-month comment in decisions.md (TD-019)
  - TD-009, TD-018 already resolved by existing code

Closes CUST-WP-0018.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-18 02:17:04 +01:00

11 KiB

title
title
Tasks
import {API, POLL} from "./components/config.js";
const taskState = (async function*() {
  while (true) {
    let data = [], ok = false;
    try {
      const [rt, rw, rto, rr] = await Promise.all([
        fetch(`${API}/tasks/?limit=500`),
        fetch(`${API}/workstreams/`),
        fetch(`${API}/topics/`),
        fetch(`${API}/repos/`),
      ]);
      ok = rt.ok && rw.ok && rto.ok && rr.ok;
      if (ok) {
        const [taskList, wsList, topicList, repoList] = await Promise.all([rt.json(), rw.json(), rto.json(), rr.json()]);
        const topicMap = Object.fromEntries(topicList.map(t => [t.id, t]));
        const repoMap  = Object.fromEntries(repoList.map(r => [r.id, r]));
        const wsMap = Object.fromEntries(wsList.map(w => [w.id, {
          ...w,
          domain: repoMap[w.repo_id]?.domain_slug ?? topicMap[w.topic_id]?.domain_slug ?? "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));
  }
})();
const data = taskState.data ?? [];
const _ok  = taskState.ok   ?? false;
const _ts  = taskState.ts;
import {MultiSelect} from "./components/multiselect.js";

const STATUSES   = ["todo", "in_progress", "blocked", "done", "cancelled"];
const PRIORITIES = ["critical", "high", "medium", "low"];
const _domainsResp = await fetch(`${API}/domains/?status=active`).catch(() => null);
const DOMAINS = _domainsResp?.ok
  ? (await _domainsResp.json()).map(d => d.slug)
  : ["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-text-input">${assignee}</div>
    </div>`,
  }
);
const filters = Generators.input(_filtersForm);
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

import {injectTocTop}    from "./components/toc-sidebar.js";
import {withDocHelp}     from "./components/doc-overlay.js";
import {openEntityModal, buildEntityTable} from "./components/entity-modal.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");

const _h1 = document.querySelector("#observablehq-main h1");
if (_h1) { _h1.style.position = "relative"; withDocHelp(_h1, "/docs/tasks"); }

// ── Inject into TOC sidebar ───────────────────────────────────────────────────
injectTocTop("task-kpi-box", _kpiBox);
injectTocTop("live-indicator", _liveEl);

Status Distribution

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

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 entity-row" onclick=${() => openEntityModal(t, "task")}>
      <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

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(buildEntityTable(
  sorted,
  [
    {label: "Status",     key: "status"},
    {label: "Priority",   key: "priority"},
    {label: "Title",      key: "title",            cls: "et-title-col et-title-cell"},
    {label: "Domain",     key: "domain"},
    {label: "Workstream", key: "workstream_title",  cls: "et-ws-col et-ws-cell"},
    {label: "Assignee",   render: t => t.assignee ?? "—"},
    {label: "Due",        render: t => t.due_date  ?? "—"},
  ],
  t => openEntityModal(t, "task"),
));
<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-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 ──────────────────────────────────────────────────────────────── */ /* ── 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>