state-hub/dashboard/src/workstreams.md

---
title: Workstreams
---

```js
const API = "http://127.0.0.1:8000";
const POLL = 15_000;
```

```js
// Fetch workstreams + topics + summary (for dep graph) in parallel
const wsState = (async function*() {
  while (true) {
    let data = [], openWs = [], ok = false;
    try {
      const [rw, rt, rs] = await Promise.all([
        fetch(`${API}/workstreams/`),
        fetch(`${API}/topics/`),
        fetch(`${API}/state/summary`),
      ]);
      ok = rw.ok && rt.ok && rs.ok;
      if (ok) {
        const [wsList, topicList, summary] = await Promise.all([rw.json(), rt.json(), rs.json()]);
        const topicMap = Object.fromEntries(topicList.map(t => [t.id, t]));
        data = wsList.map(w => ({
          ...w,
          domain: topicMap[w.topic_id]?.domain ?? "unknown",
          topic_title: topicMap[w.topic_id]?.title ?? "—",
        }));
        // open_workstreams from summary carry depends_on / blocks lists
        openWs = summary.open_workstreams ?? [];
      }
    } catch {}
    yield {data, openWs, ok, ts: new Date()};
    await new Promise(res => setTimeout(res, POLL));
  }
})();
```

```js
const data   = wsState.data   ?? [];
const openWs = wsState.openWs ?? [];
const _ok    = wsState.ok     ?? false;
const _ts    = wsState.ts;
```

# Workstreams

```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>make api</code></span>`}
</div>`);
```

```js
// Static options — no dependency on `data`, so selections survive polls
const DOMAINS  = ["custodian", "railiance", "markitect", "coulomb_social", "personhood", "foerster_capabilities"];
const STATUSES = ["active", "blocked", "completed", "archived"];

const filters = view(Inputs.form(
  {
    domain: Inputs.checkbox(DOMAINS,  {label: "Domain"}),
    status: Inputs.checkbox(STATUSES, {label: "Status"}),
    owner:  Inputs.text({label: "Owner contains", placeholder: "filter by owner…"}),
  },
  {
    template: ({domain, status, owner}) => html`<div class="filter-bar">
      <div class="filter-group">${domain}</div>
      <div class="filter-group">${status}</div>
      <div class="filter-group filter-group-text">${owner}</div>
    </div>`,
  }
));
```

```js
// Empty array = no filter applied (show all)
const filtered = data.filter(w =>
  (filters.domain.length === 0 || filters.domain.includes(w.domain)) &&
  (filters.status.length === 0 || filters.status.includes(w.status)) &&
  (!filters.owner || (w.owner ?? "").toLowerCase().includes(filters.owner.toLowerCase()))
);

display(Inputs.table(filtered.map(w => ({
  Title:   w.title,
  Domain:  w.domain,
  Status:  w.status,
  Owner:   w.owner ?? "—",
  Due:     w.due_date ?? "—",
  Updated: new Date(w.updated_at).toLocaleDateString(),
})), {rows: 20}));
```

## Status Distribution

```js
import * as Plot from "npm:@observablehq/plot";

const byStatus = Object.entries(
  filtered.reduce((acc, w) => { acc[w.status] = (acc[w.status] ?? 0) + 1; return acc; }, {})
).map(([status, count]) => ({status, count}));

display(Plot.plot({
  marks: [
    Plot.barX(byStatus, {y: "status", x: "count", fill: "status", tip: true}),
    Plot.ruleX([0]),
  ],
  marginLeft: 80,
  width: 500,
}));
```

## Dependencies

```js
// Build dep cards from the enriched open_workstreams in the summary
const wsWithDeps = openWs.filter(w => {
  const domain = data.find(d => d.id === w.id)?.domain ?? "unknown";
  return (filters.domain.length === 0 || filters.domain.includes(domain)) &&
    (filters.status.length === 0 || filters.status.includes(w.status)) &&
    (w.depends_on.length > 0 || w.blocks.length > 0);
});

if (wsWithDeps.length === 0) {
  display(html`<p class="dim">No dependency edges recorded for the current filter. Use <code>create_dependency()</code> via the MCP server to link workstreams.</p>`);
} else {
  display(html`<div class="dep-grid">${wsWithDeps.map(w => {
    const depRows = w.depends_on.map(d =>
      html`<div class="dep-row dep-on">↳ depends on <strong>${d.workstream_title}</strong>${d.description ? html` <span class="dep-desc">— ${d.description}</span>` : ""}</div>`
    );
    const blockRows = w.blocks.map(d =>
      html`<div class="dep-row dep-block">⊳ blocks <strong>${d.workstream_title}</strong>${d.description ? html` <span class="dep-desc">— ${d.description}</span>` : ""}</div>`
    );
    return html`<div class="dep-card">
      <div class="dep-title">${w.title}</div>
      <div class="dep-status dep-status-${w.status}">${w.status}</div>
      ${depRows}${blockRows}
    </div>`;
  })}</div>`);
}
```

<style>
.live-bar { font-size: 0.8rem; color: gray; text-align: right; margin-bottom: 0.5rem; }
.dim { color: gray; font-style: italic; }
.filter-bar { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-start; padding: 0.75rem 1rem; background: var(--theme-background-alt); border-radius: 8px; margin-bottom: 1rem; }
.filter-group { min-width: 140px; }
.filter-group-text { align-self: flex-end; }
.dep-grid { display: flex; flex-direction: column; gap: 0.75rem; }
.dep-card { border: 1px solid #e0e0e0; border-radius: 6px; padding: 0.75rem 1rem; background: var(--theme-background-alt, #fafafa); }
.dep-title { font-weight: 600; margin-bottom: 0.25rem; }
.dep-status { display: inline-block; font-size: 0.7rem; padding: 1px 6px; border-radius: 10px; margin-bottom: 0.5rem; text-transform: uppercase; }
.dep-status-active   { background: #d4edda; color: #155724; }
.dep-status-blocked  { background: #f8d7da; color: #721c24; }
.dep-status-completed { background: #cce5ff; color: #004085; }
.dep-row { font-size: 0.85rem; margin: 0.2rem 0 0 0.5rem; color: #444; }
.dep-on    { color: #1a5276; }
.dep-block { color: #6e2f00; }
.dep-desc  { color: #888; font-size: 0.8rem; }
</style>