generated from coulomb/repo-seed
tegwick
90c5ea50f7
T4: workstreams.md and dependencies.md now call /state/deps instead of the
full /state/summary — removes 2 heavy 10-table queries per 60 s cycle.
T5: index.md's 4 independent polling loops (summaryState, sbomSnapState,
regsState, wsChartState) consolidated into a single pageState generator
with one Promise.all batch and a shared backoff counter.
T6: config.js gains waitForVisible(ms) — pauses polling entirely while the
tab is hidden and fires immediately on visibilitychange. pollDelay()
simplified (hidden-tab POLL_HIDDEN logic removed). All 16 polling pages
migrated from await sleep(pollDelay(...)) to await waitForVisible(pollDelay(...)).
CUST-WP-0039 complete — all 6 tasks done.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
276 lines
12 KiB
Markdown
276 lines
12 KiB
Markdown
---
|
|
title: Todo
|
|
---
|
|
|
|
```js
|
|
import {API, POLL_HEAVY, apiFetch, pollDelay, waitForVisible} from "./components/config.js";
|
|
const THIS_REPO = "the-custodian";
|
|
```
|
|
|
|
```js
|
|
// Live poll: tasks + workstreams + topics + contributions
|
|
const todoState = (async function*() {
|
|
let failures = 0;
|
|
while (true) {
|
|
let tasks = [], contribs = [], improvements = [], wsMap = {}, ok = false;
|
|
try {
|
|
const [rt, rw, rto, rr, rc, ri] = await Promise.all([
|
|
apiFetch("/tasks/?limit=500"),
|
|
apiFetch("/workstreams/"),
|
|
apiFetch("/topics/"),
|
|
apiFetch("/repos/"),
|
|
apiFetch("/contributions/"),
|
|
apiFetch("/technical-debt/?debt_type=dashboard-improvement"),
|
|
]);
|
|
ok = rt.ok && rw.ok && rto.ok && rr.ok && rc.ok;
|
|
if (ok) {
|
|
const [taskList, wsList, topicList, repoList, contribList] = await Promise.all([
|
|
rt.json(), rw.json(), rto.json(), rr.json(), rc.json(),
|
|
]);
|
|
const topicMap = Object.fromEntries(topicList.map(t => [t.id, t]));
|
|
const repoMap = Object.fromEntries(repoList.map(r => [r.id, r]));
|
|
wsMap = Object.fromEntries(wsList.map(w => [w.id, {
|
|
...w,
|
|
domain: repoMap[w.repo_id]?.domain_slug ?? topicMap[w.topic_id]?.domain_slug ?? "unknown",
|
|
}]));
|
|
tasks = taskList.map(t => ({
|
|
...t,
|
|
workstream_title: wsMap[t.workstream_id]?.title ?? "—",
|
|
domain: wsMap[t.workstream_id]?.domain ?? "unknown",
|
|
}));
|
|
contribs = contribList;
|
|
const CLOSED = new Set(["finished", "wont_fix", "resolved", "deferred"]);
|
|
improvements = ri.ok ? (await ri.json()).filter(t => t.debt_type === "dashboard-improvement" && !CLOSED.has(t.status)) : [];
|
|
}
|
|
} catch {}
|
|
failures = ok ? 0 : failures + 1;
|
|
yield {tasks, contribs, improvements, ok, ts: new Date()};
|
|
await waitForVisible(pollDelay({ok, base: POLL_HEAVY, failures}));
|
|
}
|
|
})();
|
|
```
|
|
|
|
```js
|
|
const tasks = todoState.tasks ?? [];
|
|
const contribs = todoState.contribs ?? [];
|
|
const improvements = todoState.improvements ?? [];
|
|
const _ok = todoState.ok ?? false;
|
|
const _ts = todoState.ts;
|
|
```
|
|
|
|
```js
|
|
// ── Classify tasks ────────────────────────────────────────────────────────────
|
|
const OPEN_STATUSES = new Set(["todo", "in_progress", "blocked"]);
|
|
|
|
// Internal: custodian domain, open, no [repo:] routing prefix
|
|
const internal = tasks.filter(t =>
|
|
OPEN_STATUSES.has(t.status) &&
|
|
t.domain === "custodian" &&
|
|
!t.title.includes("[repo:")
|
|
);
|
|
|
|
// Ecosystem inbound: tasks routed to this repo from any domain
|
|
const ecosystem = tasks.filter(t =>
|
|
OPEN_STATUSES.has(t.status) &&
|
|
t.title.toLowerCase().includes(`[repo:${THIS_REPO}]`)
|
|
);
|
|
|
|
// Third-party: open contributions (outbound work for upstream repos)
|
|
const thirdParty = contribs.filter(c =>
|
|
["draft", "submitted", "acknowledged"].includes(c.status)
|
|
);
|
|
```
|
|
|
|
# Todo
|
|
|
|
```js
|
|
import {injectTocTop} from "./components/toc-sidebar.js";
|
|
import {withDocHelp} from "./components/doc-overlay.js";
|
|
|
|
// ── KPI sidebar card ──────────────────────────────────────────────────────────
|
|
const _kpiBox = html`<div class="kpi-infobox">
|
|
<div class="kpi-infobox-title">Todo Summary</div>
|
|
<div class="kpi-row">
|
|
<span class="kpi-row-label">internal</span>
|
|
<div class="kpi-row-right">
|
|
<div class="kpi-row-value">${internal.length}</div>
|
|
</div>
|
|
</div>
|
|
<div class="kpi-row">
|
|
<span class="kpi-row-label">ecosystem (inbound)</span>
|
|
<div class="kpi-row-right">
|
|
<div class="kpi-row-value">${ecosystem.length}</div>
|
|
</div>
|
|
</div>
|
|
<div class="kpi-row">
|
|
<span class="kpi-row-label">third-party (outbound)</span>
|
|
<div class="kpi-row-right">
|
|
<div class="kpi-row-value">${thirdParty.length}</div>
|
|
</div>
|
|
</div>
|
|
<div class="kpi-row">
|
|
<span class="kpi-row-label">suggestions (open)</span>
|
|
<div class="kpi-row-right">
|
|
<div class="kpi-row-value" style="color:${improvements.length > 0 ? '#6366f1' : 'inherit'}">${improvements.length}</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");
|
|
|
|
injectTocTop("todo-kpi-box", _kpiBox);
|
|
injectTocTop("live-indicator", _liveEl);
|
|
|
|
const _h1 = document.querySelector("#observablehq-main h1");
|
|
if (_h1) { _h1.style.position = "relative"; withDocHelp(_h1, "/docs/todo"); }
|
|
```
|
|
|
|
---
|
|
|
|
## Internal
|
|
|
|
Work fully addressable within this repo. Open tasks in custodian workstreams
|
|
without a cross-repo routing prefix.
|
|
|
|
```js
|
|
const PRIORITY_ORDER = {critical: 0, high: 1, medium: 2, low: 3};
|
|
const STATUS_ORDER = {blocked: 0, in_progress: 1, todo: 2};
|
|
|
|
function sortTasks(arr) {
|
|
return [...arr].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);
|
|
});
|
|
}
|
|
|
|
function renderTaskList(arr) {
|
|
if (arr.length === 0) return html`<p class="dim">No open todos in this category. ✓</p>`;
|
|
return html`<div class="task-list">${sortTasks(arr).map(t => html`
|
|
<div class="task-item status-${t.status}">
|
|
<div class="task-item-header">
|
|
<span class="task-badge task-priority-${t.priority}">${t.priority}</span>
|
|
<span class="task-status-chip status-chip-${t.status}">${t.status.replace("_", " ")}</span>
|
|
<span class="task-context task-ws-name">${t.workstream_title}</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>`;
|
|
}
|
|
|
|
display(renderTaskList(internal));
|
|
```
|
|
|
|
---
|
|
|
|
## Ecosystem
|
|
|
|
Inbound tasks routed to this repo by other agents via the
|
|
`[repo:${THIS_REPO}]` prefix convention.
|
|
|
|
```js
|
|
display(renderTaskList(ecosystem));
|
|
```
|
|
|
|
---
|
|
|
|
## Third-Party
|
|
|
|
Outbound work for upstream repos — open contribution artifacts
|
|
(bug reports, feature requests, extension points, upstream PRs).
|
|
|
|
```js
|
|
const TYPE_LABEL = {br: "Bug Report", fr: "Feature Request", ep: "Extension Point", upr: "Upstream PR"};
|
|
const STATUS_COLOR_C = {draft: "#94a3b8", submitted: "#3b82f6", acknowledged: "#f59e0b"};
|
|
|
|
if (thirdParty.length === 0) {
|
|
display(html`<p class="dim">No open outbound contributions. ✓</p>`);
|
|
} else {
|
|
display(html`<div class="task-list">${thirdParty.map(c => html`
|
|
<div class="task-item">
|
|
<div class="task-item-header">
|
|
<span class="task-badge" style="background:#f1f5f9;color:#475569">${TYPE_LABEL[c.type] ?? c.type}</span>
|
|
<span class="task-status-chip" style="background:${STATUS_COLOR_C[c.status] ?? '#ccc'}20;color:${STATUS_COLOR_C[c.status] ?? '#666'}">${c.status}</span>
|
|
${c.target_org ? html`<span class="task-context">${c.target_org}</span>` : ""}
|
|
${c.target_repo ? html`<span class="task-context task-ws-name">${c.target_repo}</span>` : ""}
|
|
</div>
|
|
<div class="task-title">${c.title}</div>
|
|
${c.body_path ? html`<div class="task-blocking-reason" style="background:#f0fdf4;color:#166534">↗ ${c.body_path}</div>` : ""}
|
|
</div>
|
|
`)}</div>`);
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## Suggestions
|
|
|
|
Dashboard suggestions submitted via Shift+click. Review and action on the
|
|
[UI Feedback](/ui-feedback) page; open items shown here for visibility.
|
|
|
|
```js
|
|
if (improvements.length === 0) {
|
|
display(html`<p class="dim">No open suggestions. Shift+click any widget to submit one.</p>`);
|
|
} else {
|
|
display(html`<div class="task-list">${improvements.map(t => html`
|
|
<div class="task-item impr-item">
|
|
<div class="task-item-header">
|
|
<span class="task-badge" style="background:#ede9fe;color:#4c1d95">improvement</span>
|
|
<span class="task-context">${t.location ?? ""}</span>
|
|
<a class="impr-review-link" href="/ui-feedback">review →</a>
|
|
</div>
|
|
<div class="task-title">${t.title.replace(/^UI:\s*/, "")}</div>
|
|
${t.description ? html`<div class="impr-desc">${t.description.slice(0, 200)}${t.description.length > 200 ? " …" : ""}</div>` : ""}
|
|
</div>
|
|
`)}</div>`);
|
|
}
|
|
```
|
|
|
|
<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; }
|
|
|
|
/* ── Task list ────────────────────────────────────────────────────────────── */
|
|
.task-list { display: flex; flex-direction: column; gap: 0.5rem; }
|
|
.task-item { border-left: 3px solid var(--theme-foreground-faint, #ccc); border-radius: 0 6px 6px 0; background: var(--theme-background-alt); padding: 0.65rem 0.9rem; }
|
|
.task-item.status-blocked { border-left-color: #ef4444; }
|
|
.task-item.status-in_progress { border-left-color: #3b82f6; }
|
|
.task-item.status-todo { border-left-color: #94a3b8; }
|
|
.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-status-chip { display: inline-block; padding: 0.1rem 0.45rem; border-radius: 10px; font-size: 0.7rem; font-weight: 500; }
|
|
.status-chip-blocked { background: #fee2e2; color: #991b1b; }
|
|
.status-chip-in_progress { background: #dbeafe; color: #1e40af; }
|
|
.status-chip-todo { background: #f1f5f9; color: #475569; }
|
|
.task-context { color: var(--theme-foreground-muted, #666); }
|
|
.task-ws-name { font-style: italic; }
|
|
.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; }
|
|
.dim { color: gray; font-style: italic; }
|
|
.task-item.impr-item { border-left-color: #6366f1; }
|
|
.impr-desc { font-size: 0.8rem; color: var(--theme-foreground-muted); margin-top: 0.2rem; line-height: 1.45; }
|
|
.impr-review-link { margin-left: auto; font-size: 0.75rem; color: #6366f1; text-decoration: none; }
|
|
.impr-review-link:hover { text-decoration: underline; }
|
|
</style>
|