generated from coulomb/repo-seed
Live dashboard: replace data loaders with client-side polling
CORS: add CORSMiddleware to FastAPI for localhost:3000 so browser fetch works across ports without errors. All four pages now use async generator cells that call the API directly and re-yield every 15 s — no data loader cache, no manual cache clearing. Each page shows a live status bar (● green/red · last updated time). Offline state shows the `make api` hint inline. index.md: add "Registered Projects" section — polls /progress/?event_type=milestone&limit=500 and filters for "Project registered with State Hub:" events; shows project name, domain, path, and registration timestamp. workstreams.md: fix broken domain column — now fetches /workstreams/ and /topics/ in parallel and joins on topic_id client-side. Previously the domain column showed "unknown" for all rows because WorkstreamRead schema doesn't include domain. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -2,67 +2,131 @@
|
||||
title: Overview
|
||||
---
|
||||
|
||||
# Custodian State Hub
|
||||
|
||||
```js
|
||||
const summary = await FileAttachment("data/summary.json").json();
|
||||
const totals = summary.totals ?? {};
|
||||
const ws = totals.workstreams ?? {};
|
||||
const tasks = totals.tasks ?? {};
|
||||
const decisions = totals.decisions ?? {};
|
||||
const topics = totals.topics ?? {};
|
||||
const API = "http://127.0.0.1:8000";
|
||||
const POLL = 15_000;
|
||||
```
|
||||
|
||||
```js
|
||||
if (summary.error) display(html`<div class="warning">⚠️ API unreachable: ${summary.error}. Run <code>make api</code>.</div>`);
|
||||
// Live polling — yields {data, ok, ts} every POLL ms
|
||||
const summaryState = (async function*() {
|
||||
while (true) {
|
||||
let data, ok = false;
|
||||
try {
|
||||
const r = await fetch(`${API}/state/summary`);
|
||||
ok = r.ok;
|
||||
data = ok ? await r.json() : {error: `HTTP ${r.status}`};
|
||||
} catch (e) {
|
||||
data = {error: "API unreachable"};
|
||||
}
|
||||
yield {data, ok, ts: new Date()};
|
||||
await new Promise(res => setTimeout(res, POLL));
|
||||
}
|
||||
})();
|
||||
```
|
||||
|
||||
```js
|
||||
const summary = summaryState.data ?? {};
|
||||
const _ok = summaryState.ok ?? false;
|
||||
const _ts = summaryState.ts;
|
||||
const totals = summary.totals ?? {};
|
||||
const ws = totals.workstreams ?? {};
|
||||
const tasks = totals.tasks ?? {};
|
||||
const decisions = totals.decisions ?? {};
|
||||
```
|
||||
|
||||
```js
|
||||
// Registered projects — milestone events tagged with registration
|
||||
const regsState = (async function*() {
|
||||
while (true) {
|
||||
let rows = [];
|
||||
try {
|
||||
const r = await fetch(`${API}/progress/?event_type=milestone&limit=500`);
|
||||
if (r.ok) {
|
||||
const all = await r.json();
|
||||
rows = all.filter(e => e.summary?.startsWith("Project registered with State Hub:"));
|
||||
}
|
||||
} catch {}
|
||||
yield rows;
|
||||
await new Promise(res => setTimeout(res, POLL));
|
||||
}
|
||||
})();
|
||||
```
|
||||
|
||||
# Custodian State Hub
|
||||
|
||||
```js
|
||||
display(html`<div class="live-bar">
|
||||
<span style="color:${_ok ? 'var(--theme-foreground-focus)' : 'red'}">●</span>
|
||||
${_ok
|
||||
? `Live · updated ${_ts?.toLocaleTimeString()}`
|
||||
: `<span style="color:red">Offline — run: <code>cd ~/the-custodian/state-hub && make api</code></span>`}
|
||||
</div>`);
|
||||
```
|
||||
|
||||
```js
|
||||
if (summary.error) display(html`<div class="warning">⚠️ ${summary.error}</div>`);
|
||||
```
|
||||
|
||||
## Status
|
||||
|
||||
```js
|
||||
display(html`<div class="grid grid-cols-4" style="gap:1rem; margin-bottom:1.5rem;">
|
||||
display(html`<div class="grid grid-cols-4" style="gap:1rem;margin-bottom:1.5rem">
|
||||
<div class="card">
|
||||
<h3>Active Workstreams</h3>
|
||||
<p class="big-number">${ws.active ?? 0}</p>
|
||||
<p class="big-num">${ws.active ?? 0}</p>
|
||||
<small>${ws.blocked ?? 0} blocked</small>
|
||||
</div>
|
||||
<div class="card ${(decisions.open + decisions.escalated) > 0 ? 'warn' : ''}">
|
||||
<h3>Blocking Decisions</h3>
|
||||
<p class="big-number">${(decisions.open ?? 0) + (decisions.escalated ?? 0)}</p>
|
||||
<p class="big-num">${(decisions.open ?? 0) + (decisions.escalated ?? 0)}</p>
|
||||
<small>${decisions.escalated ?? 0} escalated</small>
|
||||
</div>
|
||||
<div class="card ${(tasks.blocked ?? 0) > 0 ? 'warn' : ''}">
|
||||
<h3>Blocked Tasks</h3>
|
||||
<p class="big-number">${tasks.blocked ?? 0}</p>
|
||||
<p class="big-num">${tasks.blocked ?? 0}</p>
|
||||
<small>of ${tasks.total ?? 0} total</small>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Progress Events Today</h3>
|
||||
<p class="big-number">${(summary.recent_progress ?? []).filter(e => e.created_at?.startsWith(new Date().toISOString().slice(0,10))).length}</p>
|
||||
<h3>Events Today</h3>
|
||||
<p class="big-num">${(summary.recent_progress ?? []).filter(e =>
|
||||
e.created_at?.startsWith(new Date().toISOString().slice(0,10))).length}</p>
|
||||
<small>last 20 shown below</small>
|
||||
</div>
|
||||
</div>`);
|
||||
```
|
||||
|
||||
## Tasks by Domain
|
||||
## Registered Projects
|
||||
|
||||
```js
|
||||
const regs = regsState ?? [];
|
||||
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}));
|
||||
}
|
||||
```
|
||||
|
||||
## Open Workstreams by Domain
|
||||
|
||||
```js
|
||||
import * as Plot from "npm:@observablehq/plot";
|
||||
|
||||
const tasksByDomain = [];
|
||||
for (const topic of (summary.topics ?? [])) {
|
||||
for (const ws of (topic.workstreams ?? [])) {
|
||||
// workstream stubs don't include tasks in summary — show per-topic WS count as proxy
|
||||
}
|
||||
tasksByDomain.push({ domain: topic.domain, status: topic.status, count: (topic.workstreams ?? []).length });
|
||||
}
|
||||
const wsData = (summary.topics ?? []).map(t => ({
|
||||
domain: t.domain,
|
||||
count: (t.workstreams ?? []).length,
|
||||
}));
|
||||
|
||||
display(Plot.plot({
|
||||
title: "Open Workstreams by Domain",
|
||||
x: { label: "Domain" },
|
||||
y: { label: "Count", grid: true },
|
||||
x: {label: "Domain"},
|
||||
y: {label: "Open workstreams", grid: true},
|
||||
marks: [
|
||||
Plot.barY(tasksByDomain, { x: "domain", y: "count", fill: "domain", tip: true }),
|
||||
Plot.barY(wsData, {x: "domain", y: "count", fill: "domain", tip: true}),
|
||||
Plot.ruleY([0]),
|
||||
],
|
||||
marginBottom: 80,
|
||||
@@ -78,9 +142,9 @@ if (blocking.length === 0) {
|
||||
display(html`<p style="color:green">✓ No blocking decisions.</p>`);
|
||||
} else {
|
||||
display(Inputs.table(blocking.map(d => ({
|
||||
Title: d.title,
|
||||
Status: d.status,
|
||||
Deadline: d.deadline ? new Date(d.deadline).toLocaleDateString() : "—",
|
||||
Title: d.title,
|
||||
Status: d.status,
|
||||
Deadline: d.deadline ? new Date(d.deadline).toLocaleDateString() : "—",
|
||||
Escalated: d.escalation_note ? "⚠️" : "",
|
||||
}))));
|
||||
}
|
||||
@@ -89,16 +153,15 @@ if (blocking.length === 0) {
|
||||
## Decisions Due Within 7 Days
|
||||
|
||||
```js
|
||||
const now = new Date();
|
||||
const in7 = new Date(now.getTime() + 7*24*60*60*1000);
|
||||
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,
|
||||
Title: d.title,
|
||||
Deadline: new Date(d.deadline).toLocaleString(),
|
||||
Status: d.status,
|
||||
Status: d.status,
|
||||
}))));
|
||||
}
|
||||
```
|
||||
@@ -107,16 +170,17 @@ if (due.length === 0) {
|
||||
|
||||
```js
|
||||
display(Inputs.table((summary.recent_progress ?? []).map(e => ({
|
||||
Time: new Date(e.created_at).toLocaleString(),
|
||||
Type: e.event_type,
|
||||
Author: e.author ?? "—",
|
||||
Time: new Date(e.created_at).toLocaleString(),
|
||||
Type: e.event_type,
|
||||
Author: e.author ?? "—",
|
||||
Summary: e.summary,
|
||||
})), { maxWidth: 900 }));
|
||||
})), {maxWidth: 900}));
|
||||
```
|
||||
|
||||
<style>
|
||||
.live-bar { font-size: 0.8rem; color: gray; text-align: right; margin-bottom: 0.5rem; }
|
||||
.card { background: var(--theme-background-alt); border-radius: 8px; padding: 1rem; }
|
||||
.card.warn { border: 2px solid orange; }
|
||||
.big-number { font-size: 2.5rem; font-weight: bold; margin: 0.25rem 0; }
|
||||
.big-num { font-size: 2.5rem; font-weight: bold; margin: 0.25rem 0; }
|
||||
.warning { background: #fff3cd; border: 1px solid #ffc107; border-radius: 4px; padding: 0.75rem; }
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user