generated from coulomb/repo-seed
29 KiB
29 KiB
title
| title |
|---|
| Overview |
import {API, POLL_HEAVY, apiFetch, pollDelay, waitForVisible} from "./components/config.js";
import {
WORKSTREAM_STATUSES,
isClosedWorkstream,
isStalledWorkstream,
needsReviewWorkstream,
normalizeWorkstreamStatus,
} from "./components/workplan-status.js";
// Single polling loop — fetches all data in one Promise.all batch, backs off uniformly.
const pageState = (async function*() {
let failures = 0;
while (true) {
let summary = {}, snapshots = [], totalPkgs = 0, milestones = [], wsAll = [], ok = false;
try {
const loadJson = async (name, path, options = {}) => {
const response = await apiFetch(path, options);
if (!response.ok) throw new Error(`${name} HTTP ${response.status}`);
return response.json();
};
const [
summaryData,
snapList,
allEvents,
wsList,
taskList,
topicList,
repoList,
workplanIndex,
] = await Promise.all([
loadJson("summary", "/state/summary", {timeout: 20_000}),
loadJson("sbom snapshots", "/sbom/snapshots/"),
loadJson("milestones", "/progress/?event_type=milestone&limit=500"),
loadJson("workstreams", "/workstreams/"),
loadJson("tasks", "/tasks/?limit=2000"),
loadJson("topics", "/topics/"),
loadJson("repos", "/repos/"),
loadJson("workplan index", "/workstreams/workplan-index").catch(() => ({workstreams: {}})),
]);
ok = true;
summary = summaryData;
snapshots = snapList;
totalPkgs = snapshots.reduce((s, sn) => s + (sn.entry_count ?? 0), 0);
milestones = allEvents.filter(e => e.summary?.startsWith("Project registered with State Hub:"));
const workplanMap = workplanIndex.workstreams ?? {};
const topicMap = Object.fromEntries(topicList.map(t => [t.id, t]));
const repoMap = Object.fromEntries(repoList.map(r => [r.id, r]));
const counts = {};
for (const t of taskList) {
const wid = t.workstream_id;
if (!counts[wid]) counts[wid] = {done: 0, in_progress: 0, blocked: 0, todo: 0, total: 0};
counts[wid].total++;
if (t.status === "done") counts[wid].done++;
else if (t.status === "in_progress") counts[wid].in_progress++;
else if (t.status === "blocked") counts[wid].blocked++;
else if (t.status === "todo") counts[wid].todo++;
}
wsAll = wsList.map(w => {
const repo = repoMap[w.repo_id];
const topic = topicMap[w.topic_id];
const workplan = workplanMap[w.id] ?? {};
return {
...w,
status: normalizeWorkstreamStatus(w.status),
domain: repo?.domain_slug ?? topic?.domain_slug ?? "unknown",
repo_label: repo?.slug ?? workplan.repo_slug ?? "unassigned",
workplan_filename: workplan.filename ?? null,
workplan_relative_path: workplan.relative_path ?? null,
workplan_archived: workplan.archived ?? false,
health_labels: workplan.health_labels ?? [],
href: `./workstreams/${w.id}`,
...(counts[w.id] ?? {done: 0, in_progress: 0, blocked: 0, todo: 0, total: 0}),
};
});
} catch (e) {
summary = {error: `Dashboard data load failed: ${e?.message ?? String(e)}`};
}
failures = ok ? 0 : failures + 1;
yield {summary, snapshots, totalPkgs, milestones, wsAll, ok, ts: new Date()};
await waitForVisible(pollDelay({ok, base: POLL_HEAVY, failures}));
}
})();
const summary = pageState.summary ?? {};
const _ok = pageState.ok ?? false;
const _ts = pageState.ts;
const totals = summary.totals ?? {};
const ws = totals.workstreams ?? {};
const tasks = totals.tasks ?? {};
const decisions = totals.decisions ?? {};
const wsAll = pageState.wsAll ?? [];
// Blocking decisions — fetched once on load, refreshed only after a resolve action.
// Kept separate from the main poll so in-progress form inputs aren't wiped every 60 s.
const blockingDecisions = Mutable([]);
const refreshDecisions = async () => {
const r = await fetch(`${API}/decisions/?decision_type=pending`).catch(() => null);
const all = r?.ok ? await r.json() : [];
blockingDecisions.value = all.filter(d => ["open", "escalated"].includes(d.status));
};
refreshDecisions();
Custodian State Hub
import {injectTocTop} from "./components/toc-sidebar.js";
import {withDocHelp} from "./components/doc-overlay.js";
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>cd ~/state-hub && make api</code></span>`}
</div>`;
withDocHelp(_liveEl, "/docs/live-data");
injectTocTop("live-indicator", _liveEl);
const _h1 = document.querySelector("#observablehq-main h1");
if (_h1) { _h1.style.position = "relative"; withDocHelp(_h1, "/docs/overview"); }
display(html`<div class="warning" style="display:${summary.error ? '' : 'none'}">⚠️ ${summary.error ?? ''}</div>`);
Workstreams by Repository
// view() is the idiomatic Observable Framework reactive input:
// it displays the element AND returns a reactive value that re-runs dependent blocks.
const _chartMode = view(html`<select class="ws-mode-select">
<optgroup label="Lifecycle">
<option value="ready">ready</option>
<option value="active" selected>active</option>
<option value="blocked">blocked</option>
<option value="proposed">proposed</option>
<option value="backlog">backlog</option>
<option value="finished">finished</option>
<option value="archived">archived</option>
</optgroup>
<optgroup label="Health">
<option value="needs_review">needs review</option>
<option value="stalled">stalled</option>
</optgroup>
<optgroup label="Recently Changed">
<option value="1h">last 1 hour</option>
<option value="1d">last 24 hours</option>
<option value="7d">last 7 days</option>
<option value="30d">last 30 days</option>
<option value="today">today</option>
<option value="week">this week</option>
<option value="month">this month</option>
</optgroup>
</select>`);
import * as Plot from "npm:@observablehq/plot";
// ── Filter workstreams by selected mode ───────────────────────────────────────
// Lifecycle modes match stored canonical status values.
// Health modes are derived labels; they are not stored lifecycle states.
// Time modes filter by updated_at / created_at.
const _STATUS_MODES = new Set(WORKSTREAM_STATUSES);
const _HEALTH_MODES = new Set(["needs_review", "stalled"]);
function _timeCutoff(mode) {
const now = new Date();
if (mode === "1h") return new Date(now - 60 * 60 * 1000);
if (mode === "1d") return new Date(now - 24 * 60 * 60 * 1000);
if (mode === "7d") return new Date(now - 7 * 24 * 60 * 60 * 1000);
if (mode === "30d") return new Date(now - 30 * 24 * 60 * 60 * 1000);
if (mode === "today") return new Date(now.getFullYear(), now.getMonth(), now.getDate());
if (mode === "week") {
const d = new Date(now.getFullYear(), now.getMonth(), now.getDate());
d.setDate(d.getDate() - ((d.getDay() + 6) % 7)); // back to Monday
return d;
}
if (mode === "month") return new Date(now.getFullYear(), now.getMonth(), 1);
return null;
}
const _chartWsFiltered = (
_STATUS_MODES.has(_chartMode)
? wsAll.filter(w => normalizeWorkstreamStatus(w.status) === _chartMode)
: _chartMode === "needs_review"
? wsAll.filter(needsReviewWorkstream)
: _chartMode === "stalled"
? wsAll.filter(isStalledWorkstream)
: (() => {
const since = _timeCutoff(_chartMode);
return wsAll.filter(w =>
new Date(w.updated_at) >= since || new Date(w.created_at) >= since
);
})()
);
// Sort by domain, then repository, then most recently updated workstream.
// The axis labels show each domain/repo group once.
const chartWs = [..._chartWsFiltered].sort((a, b) => {
const domainCompare = (a.domain ?? "").localeCompare(b.domain ?? "");
if (domainCompare !== 0) return domainCompare;
const repoCompare = (a.repo_label ?? "").localeCompare(b.repo_label ?? "");
if (repoCompare !== 0) return repoCompare;
return new Date(b.updated_at) - new Date(a.updated_at);
});
// ── Status weight: bold for notable statuses in mixed-status modes ─────────────
// Color is NOT used for status — avoids green-on-green when finished bars fill the row.
const _isTimeBased = !_STATUS_MODES.has(_chartMode) && !_HEALTH_MODES.has(_chartMode);
function _wsWeight(s) { return (isClosedWorkstream(s) || normalizeWorkstreamStatus(s) === "blocked") ? "bold" : "normal"; }
// ── y-axis: domain/repo label for first workstream per repository only ────────
const _yLabels = {};
const _seen = new Set();
for (const w of chartWs) {
const group = `${w.domain} / ${w.repo_label}`;
_yLabels[w.id] = _seen.has(group) ? "" : group;
_seen.add(group);
}
const statusOrder = ["done", "in progress", "blocked", "todo"];
const statusColors = ["#4caf50", "steelblue", "#ff7043", "#e0e0e0"];
const _taskRows = chartWs.flatMap(w => [
{id: w.id, title: w.title, status: "done", count: w.done ?? 0, domain: w.domain, repo: w.repo_label, workplan: w.workplan_filename, href: w.href},
{id: w.id, title: w.title, status: "in progress", count: w.in_progress ?? 0, domain: w.domain, repo: w.repo_label, workplan: w.workplan_filename, href: w.href},
{id: w.id, title: w.title, status: "blocked", count: w.blocked ?? 0, domain: w.domain, repo: w.repo_label, workplan: w.workplan_filename, href: w.href},
{id: w.id, title: w.title, status: "todo", count: w.todo ?? 0, domain: w.domain, repo: w.repo_label, workplan: w.workplan_filename, href: w.href},
]).filter(d => d.count > 0);
function _wsTitle(d) {
return [
d.title,
`Repo: ${d.repo ?? "unassigned"}`,
`Domain: ${d.domain ?? "unknown"}`,
`Workplan: ${d.workplan ?? "not file-backed"}`,
`${d.status}: ${d.count}`,
].join("\n");
}
// ── Render ────────────────────────────────────────────────────────────────────
if (chartWs.length === 0) {
const _emptyMsg = {
proposed: "No proposed workstreams.",
ready: "No ready workstreams.",
active: "No active workstreams.",
blocked: "No blocked workstreams.",
backlog: "No backlog workstreams.",
finished: "No finished workstreams.",
archived: "No archived workstreams.",
needs_review: "No ready workstreams need review.",
stalled: "No stalled workstreams — everything is moving.",
"1h": "No workstreams changed in the last hour.",
"1d": "No workstreams changed in the last 24 hours.",
"7d": "No workstreams changed in the last 7 days.",
"30d": "No workstreams changed in the last 30 days.",
today: "No workstreams changed today.",
week: "No workstreams changed this week.",
month: "No workstreams changed this month.",
};
display(html`<p style="color:gray">${_emptyMsg[_chartMode] ?? "No workstreams."}</p>`);
} else {
display(Plot.plot({
y: {
label: null, tickSize: 0,
domain: chartWs.map(w => w.id),
tickFormat: t => _yLabels[t] ?? "",
},
x: {label: "Tasks", grid: true},
color: {domain: statusOrder, range: statusColors, legend: true},
marks: [
Plot.barX(_taskRows, {
y: "id", x: "count", fill: "status",
title: _wsTitle,
href: "href",
target: "_self",
tip: true,
}),
// Title label — pushed to lower half of bar row (dy: +7) to separate from count
Plot.text(chartWs.filter(w => w.total > 0), {
y: "id", x: 0, dx: 6, dy: 7,
text: d => d.title.length > 72 ? d.title.slice(0, 70) + "…" : d.title,
textAnchor: "start", fontSize: 10, fill: "#1e293b",
fontWeight: d => _isTimeBased ? _wsWeight(d.status) : "normal",
title: d => [
d.title,
`Repo: ${d.repo_label ?? "unassigned"}`,
`Domain: ${d.domain ?? "unknown"}`,
`Workplan: ${d.workplan_filename ?? "not file-backed"}`,
].join("\n"),
href: "href",
target: "_self",
}),
Plot.text(chartWs.filter(w => w.total === 0), {
y: "id", x: 0, dx: 6, dy: 7,
text: d => `${d.title.length > 48 ? d.title.slice(0, 46) + "…" : d.title} — no tasks yet`,
textAnchor: "start", fontSize: 10, fill: "#94a3b8",
title: d => [
d.title,
`Repo: ${d.repo_label ?? "unassigned"}`,
`Domain: ${d.domain ?? "unknown"}`,
`Workplan: ${d.workplan_filename ?? "not file-backed"}`,
].join("\n"),
href: "href",
target: "_self",
}),
// Count label — pushed to upper half of bar row (dy: -7) to separate from title
Plot.text(chartWs.filter(w => w.total > 0), {
y: "id", x: "total",
text: d => ` ${d.done}/${d.total}`,
dx: 4, dy: -7, textAnchor: "start", fontSize: 11, fill: "gray",
title: d => `${d.title}\nWorkplan: ${d.workplan_filename ?? "not file-backed"}`,
href: "href",
target: "_self",
}),
Plot.ruleX([0]),
],
marginLeft: 220,
marginRight: 70,
height: Math.max(80, chartWs.length * 44 + 50),
width: 700,
}));
}
Contribution & SBOM Health
const contribCounts = summary.contribution_counts ?? {};
const licenceRisk = summary.licence_risk_count ?? 0;
const totalContribs = ["br","fr","ep","upr"].reduce((s, t) => s + (contribCounts[t] ?? 0), 0);
const needsFollowUp = (contribCounts["submitted"] ?? 0) + (contribCounts["acknowledged"] ?? 0);
const sbomSnaps = pageState.snapshots ?? [];
const totalPkgs = pageState.totalPkgs ?? 0;
display(html`<div class="grid grid-cols-3" style="gap:1rem;margin-bottom:1.5rem">
<a class="card card-link" href="./contributions">
<h3>Contributions</h3>
<p class="big-num">${totalContribs}</p>
<small>${needsFollowUp > 0 ? html`<span style="color:orange">${needsFollowUp} awaiting upstream response</span>` : "all up to date"}</small>
</a>
<a class="card card-link ${licenceRisk > 0 ? 'warn' : ''}" href="./sbom">
<h3>Licence Risk</h3>
<p class="big-num">${licenceRisk}</p>
<small>${licenceRisk === 0 ? html`<span style="color:green">✓ no copyleft in direct deps</span>` : html`<span style="color:red">copyleft in direct prod deps</span>`}</small>
</a>
<a class="card card-link ${licenceRisk > 0 ? 'warn' : ''}" href="./sbom">
<h3>SBOM</h3>
<p class="big-num">${totalPkgs.toLocaleString()}</p>
<small>${sbomSnaps.length} repo${sbomSnaps.length !== 1 ? "s" : ""} tracked · ${licenceRisk > 0 ? html`<span style="color:red">${licenceRisk} copyleft risks</span>` : html`<span style="color:green">✓ no copyleft</span>`}</small>
</a>
</div>`);
Status
const blockedTasks = summary.blocked_tasks ?? [];
const wsById = Object.fromEntries((summary.open_workstreams ?? []).map(w => [w.id, w]));
const todayCount = (summary.recent_progress ?? []).filter(e =>
e.created_at?.startsWith(new Date().toISOString().slice(0, 10))).length;
const decCount = (decisions.open ?? 0) + (decisions.escalated ?? 0);
const statusEl = html`<div>
<div class="grid grid-cols-4" style="gap:1rem;margin-bottom:0.75rem">
<a class="card card-link" href="./workstreams">
<h3>Active Workstreams</h3>
<p class="big-num">${ws.active ?? 0}</p>
<small>${ws.blocked ?? 0} blocked</small>
</a>
<a class="card card-link ${decCount > 0 ? 'warn' : ''}" href="#blocking-decisions">
<h3>Blocking Decisions</h3>
<p class="big-num">${decCount}</p>
<small>${decisions.escalated ?? 0} escalated</small>
</a>
<div class="card card-link ${blockedTasks.length > 0 ? 'warn' : ''}" data-toggle="blocked-panel">
<h3>Blocked Tasks</h3>
<p class="big-num">${blockedTasks.length}</p>
<small>of ${tasks.total ?? 0} total · click to expand</small>
</div>
<a class="card card-link" href="#recent-activity">
<h3>Events Today</h3>
<p class="big-num">${todayCount}</p>
<small>last 20 shown below</small>
</a>
</div>
<div id="blocked-panel" style="display:none;margin-bottom:1rem">
${blockedTasks.length === 0
? html`<p class="dim" style="padding:0.5rem 0">No tasks currently blocked.</p>`
: html`<div class="bt-list">${blockedTasks.map(t => {
const wsName = wsById[t.workstream_id]?.title ?? t.workstream_id?.slice(0,8) ?? "—";
return html`<div class="bt-row">
<div class="bt-meta">${wsName}</div>
<div class="bt-title">${t.title}</div>
${t.blocking_reason ? html`<div class="bt-reason">⊘ ${t.blocking_reason}</div>` : ""}
</div>`;
})}</div>`
}
</div>
</div>`;
statusEl.querySelector('[data-toggle="blocked-panel"]').addEventListener('click', () => {
const panel = statusEl.querySelector('#blocked-panel');
const isOpen = panel.style.display !== 'none';
panel.style.display = isOpen ? 'none' : 'block';
statusEl.querySelector('[data-toggle="blocked-panel"] small').textContent =
isOpen ? `of ${tasks.total ?? 0} total · click to expand` : `of ${tasks.total ?? 0} total · click to collapse`;
});
display(statusEl);
What's next?
// next_steps comes from the summary poll (derived, never persisted)
const nextSteps = summary.next_steps ?? [];
const typeLabel = {
resolved_decision: "Decision resolved",
dependency_cleared: "Dependency cleared",
unblocked_task: "Task unblocked",
};
const typeBadgeClass = {
resolved_decision: "ns-badge-decision",
dependency_cleared: "ns-badge-dep",
unblocked_task: "ns-badge-task",
};
if (nextSteps.length === 0) {
display(html`<p class="ns-empty">No actionable suggestions right now — all open workstreams are making progress or waiting on decisions.</p>`);
} else {
display(html`<div class="ns-grid">${nextSteps.map(s => html`
<div class="ns-card">
<div class="ns-card-header">
<span class="ns-badge ${typeBadgeClass[s.type] ?? ''}">${typeLabel[s.type] ?? s.type}</span>
<span class="ns-domain">${s.domain ?? "—"}</span>
</div>
<div class="ns-ws">${s.workstream_title ?? "—"}</div>
<div class="ns-task">${s.task_title ? html`→ <strong>${s.task_title}</strong>` : ""}</div>
<div class="ns-msg">${s.message}</div>
</div>
`)}</div>`);
}
Registered Projects
const regs = pageState.milestones ?? [];
if (regs.length === 0) {
display(html`<p style="color:gray">No projects registered yet. Run <code>custodian register-project</code> inside a repo.</p>`);
} else {
display(Inputs.table(regs.map(e => ({
Project: e.detail?.project_path?.split("/").at(-1) ?? "—",
Domain: e.detail?.domain ?? "—",
Path: e.detail?.project_path ?? "—",
Registered: new Date(e.created_at).toLocaleString(),
})), {maxWidth: 900}));
}
// Registered domains with no workstreams yet — show a getting-started hint
const regs = pageState.milestones ?? [];
const registeredDomains = new Set(regs.map(e => e.detail?.domain).filter(Boolean));
const emptyRegistered = (summary.topics ?? []).filter(t =>
registeredDomains.has(t.domain_slug) && (t.workstreams ?? []).length === 0
);
if (emptyRegistered.length > 0) {
display(html`<div class="hint-box">
<strong>💡 Getting started</strong>
<p>These registered projects have no workstreams yet:</p>
<ul>${emptyRegistered.map(t => html`<li>
<strong>${t.domain_slug}</strong> — open repo in Claude Code and say <em>"Hi!"</em> to kick off first session, or run <code>custodian create-workstream --domain ${t.domain_slug} --title "My first workstream"</code> manually
</li>`)}</ul>
</div>`);
}
Blocking Decisions
// Uses blockingDecisions (Mutable) — only re-renders when refreshDecisions() is called,
// not on every summary poll, so in-progress form input is preserved between polls.
const blocking = blockingDecisions ?? [];
if (blocking.length === 0) {
display(html`<p style="color:green">✓ No blocking decisions.</p>`);
} else {
for (const d of blocking) {
const card = html`<div class="dec-card ${d.escalation_note ? 'dec-escalated' : ''}">
<div class="dec-header">
<span class="dec-title">${d.title}</span>
<span class="dec-meta">
${d.escalation_note ? html`<span class="dec-warn-badge">⚠ escalated</span>` : ""}
${d.deadline ? html`<span>Due ${new Date(d.deadline).toLocaleDateString()}</span>` : ""}
<button class="r-copy" title="Copy decision to clipboard">Copy</button>
</span>
</div>
${d.description ? html`<p class="dec-desc">${d.description}</p>` : ""}
${d.rationale ? html`<p class="dec-context"><strong>Context:</strong> ${d.rationale}</p>` : ""}
${d.escalation_note ? html`<p class="dec-context dec-warn-text">${d.escalation_note}</p>` : ""}
<details class="dec-resolve">
<summary>Resolve this decision →</summary>
<div class="dec-resolve-inner">
<label>Your decision & rationale</label>
<textarea class="r-text" rows="4" placeholder="State the chosen option and your reasoning…"></textarea>
<label>Decided by</label>
<input class="r-by" type="text" value="human">
<div class="dec-resolve-actions">
<button class="r-submit">Record & close</button>
<span class="r-msg"></span>
</div>
</div>
</details>
</div>`;
// Copy to clipboard
const copyBtn = card.querySelector(".r-copy");
copyBtn.addEventListener("click", () => {
const parts = [
`# ${d.title}`,
"",
d.description ?? "",
d.rationale ? `\n**Context:** ${d.rationale}` : "",
d.escalation_note ? `\n**⚠ Escalated:** ${d.escalation_note}` : "",
`\n**Status:** ${d.status} | **Created:** ${new Date(d.created_at).toLocaleDateString()}`,
d.deadline ? `**Due:** ${new Date(d.deadline).toLocaleDateString()}` : "",
].filter(Boolean).join("\n");
navigator.clipboard.writeText(parts).then(() => {
copyBtn.textContent = "✓ Copied";
setTimeout(() => { copyBtn.textContent = "Copy"; }, 1500);
}).catch(() => { copyBtn.textContent = "⚠ Failed"; setTimeout(() => { copyBtn.textContent = "Copy"; }, 2000); });
});
// Resolve
const btn = card.querySelector(".r-submit");
const msg = card.querySelector(".r-msg");
btn.addEventListener("click", async () => {
const rationale = card.querySelector(".r-text").value.trim();
const decidedBy = card.querySelector(".r-by").value.trim() || "human";
if (!rationale) { msg.textContent = "⚠ Please enter a rationale."; return; }
btn.disabled = true; btn.textContent = "Saving…";
try {
const r = await fetch(`${API}/decisions/${d.id}/resolve`, {
method: "POST",
headers: {"Content-Type": "application/json"},
body: JSON.stringify({rationale, decided_by: decidedBy}),
});
if (r.ok) {
await refreshDecisions(); // re-fetches list — resolved decision won't appear
} else {
const err = await r.json().catch(() => ({}));
msg.textContent = `Error ${r.status}: ${err.detail ?? "unknown"}`;
btn.disabled = false; btn.textContent = "Record & close";
}
} catch (e) {
msg.textContent = `Network error: ${e.message}`;
btn.disabled = false; btn.textContent = "Record & close";
}
});
display(card);
}
}
Decisions Due Within 7 Days
const in7 = new Date(Date.now() + 7*24*60*60*1000);
const due = (summary.blocking_decisions ?? []).filter(d => d.deadline && new Date(d.deadline) <= in7);
if (due.length === 0) {
display(html`<p>No decisions due in next 7 days.</p>`);
} else {
display(Inputs.table(due.map(d => ({
Title: d.title,
Deadline: new Date(d.deadline).toLocaleString(),
Status: d.status,
}))));
}
Recent Activity
display(Inputs.table((summary.recent_progress ?? []).map(e => ({
Time: new Date(e.created_at).toLocaleString(),
Type: e.event_type,
Author: e.author ?? "—",
Summary: e.summary,
})), {maxWidth: 900}));