tegwick
2bf952321d
New entity types (DB tables, API routers, Pydantic schemas, Alembic migration a3f1c2d4e5b6): - extension_points: ep_id, domain, title, ep_type, status, priority, location, description, topic_id, workstream_id - technical_debt: td_id, domain, title, debt_type, severity, status, location, description, topic_id, workstream_id MCP server: 6 new tools — register_extension_point, list_extension_points, update_ep_status, register_technical_debt, list_technical_debt, update_td_status (each write emits a progress_event) Dashboard: two new pages (extensions.md, techdept.md) with KPI sidebar, charts, urgent-items section, and filterable card lists. Both added to nav in observablehq.config.js. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
12 KiB
12 KiB
title
| title |
|---|
| Extension Points |
const API = "http://127.0.0.1:8000";
const POLL = 15_000;
const epState = (async function*() {
while (true) {
let data = [], ok = false;
try {
const [re, rw, rt] = await Promise.all([
fetch(`${API}/extension-points/`),
fetch(`${API}/workstreams/`),
fetch(`${API}/topics/`),
]);
ok = re.ok && rw.ok && rt.ok;
if (ok) {
const [epList, wsList, topicList] = await Promise.all([re.json(), rw.json(), rt.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 = epList.map(e => ({
...e,
workstream_title: wsMap[e.workstream_id]?.title ?? null,
})).sort((a, b) => {
const pr = {critical: 0, high: 1, medium: 2, low: 3};
const st = {open: 0, in_progress: 1, deferred: 2, addressed: 3, wont_fix: 4};
const sd = (st[a.status] ?? 9) - (st[b.status] ?? 9);
return sd !== 0 ? sd : (pr[a.priority] ?? 9) - (pr[b.priority] ?? 9);
});
}
} catch {}
yield {data, ok, ts: new Date()};
await new Promise(res => setTimeout(res, POLL));
}
})();
const data = epState.data ?? [];
const _ok = epState.ok ?? false;
const _ts = epState.ts;
import {MultiSelect} from "./components/multiselect.js";
const STATUSES = ["open", "in_progress", "addressed", "deferred", "wont_fix"];
const PRIORITIES = ["critical", "high", "medium", "low"];
const DOMAINS = ["custodian", "railiance", "markitect", "coulomb_social", "personhood", "foerster_capabilities"];
const EP_TYPES = ["api", "schema", "mcp", "dashboard", "architecture", "integration", "other"];
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"}),
ep_type: MultiSelect(EP_TYPES, {label: "Type", placeholder: "All types"}),
},
{
template: ({status, priority, domain, ep_type}) => html`<div class="filter-bar">
${status}${priority}${domain}${ep_type}
</div>`,
}
);
const filters = Generators.input(_filtersForm);
const filtered = data.filter(e =>
(filters.status.length === 0 || filters.status.includes(e.status)) &&
(filters.priority.length === 0 || filters.priority.includes(e.priority)) &&
(filters.domain.length === 0 || filters.domain.includes(e.domain)) &&
(filters.ep_type.length === 0 || filters.ep_type.includes(e.ep_type))
);
Extension Points
import {injectTocTop} from "./components/toc-sidebar.js";
import {withDocHelp} from "./components/doc-overlay.js";
// ── KPI sidebar ───────────────────────────────────────────────────────────────
const _open = data.filter(e => e.status === "open" || e.status === "in_progress");
const _addressed = data.filter(e => e.status === "addressed");
const _byType = EP_TYPES.map(t => [t, data.filter(e => e.ep_type === t && e.status === "open").length])
.filter(([,n]) => n > 0);
const _kpiBox = html`<div class="kpi-infobox">
<div class="kpi-infobox-title">Extension Points</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">addressed</span>
<div class="kpi-row-right"><div class="kpi-row-value">${_addressed.length}</div></div>
</div>
${_byType.length > 0 ? html`
<div class="kpi-type-breakdown">
${_byType.map(([t, n]) => html`<div class="kpi-type-row">
<span class="ep-type-badge ep-type-${t}">${t}</span>
<span class="kpi-type-count">${n}</span>
</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");
injectTocTop("ep-kpi-box", _kpiBox);
injectTocTop("live-indicator", _liveEl);
const _h1 = document.querySelector("#observablehq-main h1");
if (_h1) _h1.style.position = "relative";
By Type & Status
import * as Plot from "npm:@observablehq/plot";
const TYPE_COLOR = {
api: "#3b82f6", schema: "#8b5cf6", mcp: "#ec4899",
dashboard: "#f59e0b", architecture: "#10b981", integration: "#6366f1", other: "#94a3b8",
};
const STATUS_COLOR = {
open: "#3b82f6", in_progress: "#f59e0b", addressed: "#22c55e", deferred: "#94a3b8", wont_fix: "#e2e8f0",
};
const byType = EP_TYPES
.map(t => ({type: t, count: filtered.filter(e => e.ep_type === t).length}))
.filter(d => d.count > 0);
const byStatus = STATUSES
.map(s => ({status: s, count: filtered.filter(e => e.status === s).length}))
.filter(d => d.count > 0);
if (filtered.length === 0) {
display(html`<p class="dim">No extension points match the current filter.</p>`);
} else {
display(html`<div class="chart-row">
${Plot.plot({
marks: [
Plot.barX(byType, {y: "type", x: "count", fill: d => TYPE_COLOR[d.type] ?? "#94a3b8", tip: true}),
Plot.ruleX([0]),
],
marginLeft: 100, width: 340, title: "By type",
})}
${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: 300, title: "By status",
})}
</div>`);
}
All Extension Points
display(_filtersForm);
display(html`<p><strong>${filtered.length}</strong> extension points shown.</p>`);
display(html`<div class="ep-list">${filtered.map(ep => html`
<div class="ep-item ep-status-${ep.status}">
<div class="ep-item-header">
${ep.ep_id ? html`<span class="ep-ref">${ep.ep_id}</span>` : ""}
<span class="ep-type-badge ep-type-${ep.ep_type}">${ep.ep_type}</span>
<span class="ep-badge ep-badge-${ep.status}">${ep.status.replace("_", " ")}</span>
<span class="ep-badge ep-priority-${ep.priority}">${ep.priority}</span>
<span class="ep-domain">${ep.domain}</span>
${ep.workstream_title ? html`<span class="ep-ws">${ep.workstream_title}</span>` : ""}
</div>
<div class="ep-title">${ep.title}</div>
${ep.description ? html`<div class="ep-desc">${ep.description.slice(0, 240)}${ep.description.length > 240 ? "…" : ""}</div>` : ""}
${ep.location ? html`<div class="ep-location"><code>${ep.location}</code></div>` : ""}
</div>
`)}
</div>`);