generated from coulomb/repo-seed
tegwick
166aedfa8d
Adds preferred workplan REST/event surfaces, legacy-meter telemetry and weekly review summaries, documentation/dashboard terminology updates, dashboard API loading fixes, and close-out sync for STATE-WP-0052 and STATE-WP-0054.
11 KiB
11 KiB
title
| title |
|---|
| Tasks |
import {API, POLL_HEAVY, apiFetch, pollDelay, waitForVisible} from "./components/config.js";
const taskState = (async function*() {
let failures = 0;
while (true) {
let data = [], ok = false;
try {
const [rt, rw, rto, rr] = await Promise.all([
apiFetch("/tasks/?limit=500"),
apiFetch("/workplans/"),
apiFetch("/topics/"),
apiFetch("/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 {}
failures = ok ? 0 : failures + 1;
yield {data, ok, ts: new Date()};
await waitForVisible(pollDelay({ok, base: POLL_HEAVY, failures}));
}
})();
const data = taskState.data ?? [];
const _ok = taskState.ok ?? false;
const _ts = taskState.ts;
import {MultiSelect} from "./components/multiselect.js";
const STATUSES = ["wait", "todo", "progress", "done", "cancel"];
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";
import {statusControl, TASK_STATUSES} from "./components/status-control.js";
// ── KPI sidebar card ─────────────────────────────────────────────────────────
const _open = data.filter(t => ["wait", "todo", "progress"].includes(t.status));
const _waiting = data.filter(t => t.status === "wait");
const _inProg = data.filter(t => t.status === "progress");
const _done = data.filter(t => t.status === "done");
const _total = data.filter(t => t.status !== "cancel").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">waiting</span>
<div class="kpi-row-right">
<div class="kpi-row-value" style="color:${_waiting.length > 0 ? '#d97706' : 'inherit'}">${_waiting.length}</div>
</div>
</div>
<div class="kpi-row">
<span class="kpi-row-label">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 = {
wait: "#f59e0b",
todo: "#94a3b8",
progress: "#8b5cf6",
done: "#22c55e",
cancel: "#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,
})
);
Waiting Tasks
const _waitingInFilter = filtered.filter(t => t.status === "wait");
if (_waitingInFilter.length === 0) {
display(html`<p class="dim">No waiting tasks in current filter. ✓</p>`);
} else {
display(html`<div class="task-waiting-list">${_waitingInFilter.map(t => html`
<div class="task-waiting-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-wait-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 = {wait: 0, progress: 1, todo: 2, done: 3, cancel: 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", render: t => statusControl({entity: t, type: "task", statuses: TASK_STATUSES})},
{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"),
));