state-hub/dashboard/src/decisions.md

---
title: Decisions
---

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

```js
const decState = (async function*() {
  while (true) {
    let data = [], ok = false;
    try {
      const r = await fetch(`${API}/decisions/?limit=500`);
      ok = r.ok;
      data = ok ? await r.json() : [];
    } catch {}
    yield {data, ok, ts: new Date()};
    await new Promise(res => setTimeout(res, POLL));
  }
})();
```

```js
const data    = decState.data ?? [];
const _ok     = decState.ok   ?? false;
const _ts     = decState.ts;
const pending = data.filter(d => d.decision_type === "pending");
const made    = data.filter(d => d.decision_type === "made");
```

# Decisions

```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
const tab = view(Inputs.select(["Pending", "Made"], {label: "View"}));
```

```js
const shown = tab === "Pending" ? pending : made;

display(Inputs.table(shown.map(d => ({
  Title:       d.title,
  Status:      d.status + (d.escalation_note ? " ⚠️" : ""),
  Decided_by:  d.decided_by ?? "—",
  Deadline:    d.deadline ? new Date(d.deadline).toLocaleDateString() : "—",
  Rationale:   (d.rationale ?? "").slice(0, 80),
  Updated:     new Date(d.updated_at).toLocaleDateString(),
})), {rows: 30}));
```

```js
if (tab === "Pending" && pending.filter(d => d.escalation_note).length > 0) {
  display(html`<div class="escalation-box">
    <strong>⚠️ Escalated decisions require human approval before any action is taken (constitution §4).</strong>
    <ul>${pending.filter(d => d.escalation_note).map(d =>
      html`<li><b>${d.title}</b>: ${d.escalation_note}</li>`)}</ul>
  </div>`);
}
```

## Resolution Velocity

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

const resolved = made.filter(d => d.decided_at);
const byMonth = Object.entries(
  resolved.reduce((acc, d) => {
    const m = d.decided_at.slice(0, 7);
    acc[m] = (acc[m] ?? 0) + 1;
    return acc;
  }, {})
).map(([month, count]) => ({month, count}));

display(byMonth.length === 0
  ? html`<p style="color:gray">No resolved decisions yet.</p>`
  : Plot.plot({
      title: "Decisions resolved per month",
      x: {label: "Month", tickRotate: -30},
      y: {label: "Count", grid: true},
      marks: [
        Plot.barY(byMonth, {x: "month", y: "count", fill: "steelblue", tip: true}),
        Plot.ruleY([0]),
      ],
      marginBottom: 60,
      width: 700,
    })
);
```

<style>
.live-bar { font-size: 0.8rem; color: gray; text-align: right; margin-bottom: 0.5rem; }
.escalation-box { background: #fff3cd; border: 2px solid orange; border-radius: 8px; padding: 1rem; margin-top: 1rem; }
</style>