---
title: Overview
---

```js
import {API, POLL} from "./components/config.js";
```

```js
// 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
// Blocking decisions — fetched once on load, refreshed only after a resolve action.
// Kept separate from the summary poll so in-progress form inputs aren't wiped every 15 s.
const blockingDecisions = Mutable([]);
const refreshDecisions = async () => {
  const r = await fetch(`${API}/decisions/?decision_type=pending`).catch(() => null);
  const all = r?.ok ? await r.json() : [];
  blockingDecisions.value = all.filter(d => ["open", "escalated"].includes(d.status));
};
refreshDecisions();
```

```js
// SBOM snapshots — repo coverage and total package count
const sbomSnapState = (async function*() {
  while (true) {
    let snapshots = [], totalPkgs = 0;
    try {
      const r = await fetch(`${API}/sbom/snapshots/`);
      if (r.ok) {
        snapshots = await r.json();
        totalPkgs = snapshots.reduce((s, sn) => s + (sn.entry_count ?? 0), 0);
      }
    } catch {}
    yield {snapshots, totalPkgs};
    await new Promise(res => setTimeout(res, POLL));
  }
})();
```

```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));
  }
})();
```

```js
// All-workstreams + all-tasks poll — drives the multi-mode chart
const wsChartState = (async function*() {
  while (true) {
    let wsAll = [], ok = false;
    try {
      const [rw, rt, rto, rr] = await Promise.all([
        fetch(`${API}/workstreams/`),
        fetch(`${API}/tasks/?limit=2000`),
        fetch(`${API}/topics/`),
        fetch(`${API}/repos/`),
      ]);
      ok = rw.ok && rt.ok && rto.ok && rr.ok;
      if (ok) {
        const [wsList, taskList, topicList, repoList] = await Promise.all([
          rw.json(), rt.json(), rto.json(), rr.json(),
        ]);
        const topicMap = Object.fromEntries(topicList.map(t => [t.id, t]));
        const repoMap  = Object.fromEntries(repoList.map(r => [r.id, r]));
        // Aggregate task counts per workstream
        const counts = {};
        for (const t of taskList) {
          const wid = t.workstream_id;
          if (!counts[wid]) counts[wid] = {done: 0, in_progress: 0, blocked: 0, todo: 0, total: 0};
          counts[wid].total++;
          if      (t.status === "done")        counts[wid].done++;
          else if (t.status === "in_progress") counts[wid].in_progress++;
          else if (t.status === "blocked")     counts[wid].blocked++;
          else if (t.status === "todo")        counts[wid].todo++;
        }
        wsAll = wsList.map(w => ({
          ...w,
          domain: repoMap[w.repo_id]?.domain_slug ?? topicMap[w.topic_id]?.domain_slug ?? "unknown",
          ...(counts[w.id] ?? {done: 0, in_progress: 0, blocked: 0, todo: 0, total: 0}),
        }));
      }
    } catch {}
    yield {wsAll, ok};
    await new Promise(res => setTimeout(res, POLL));
  }
})();
```

```js
const wsAll = wsChartState.wsAll ?? [];
```

# Custodian State Hub

```js
import {injectTocTop} from "./components/toc-sidebar.js";
import {withDocHelp}   from "./components/doc-overlay.js";

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>cd ~/the-custodian/state-hub && make api</code></span>`}
</div>`;
withDocHelp(_liveEl, "/docs/live-data");
injectTocTop("live-indicator", _liveEl);

const _h1 = document.querySelector("#observablehq-main h1");
if (_h1) { _h1.style.position = "relative"; withDocHelp(_h1, "/docs/overview"); }
```

```js
display(html`<div class="warning" style="display:${summary.error ? '' : 'none'}">⚠️ ${summary.error ?? ''}</div>`);
```

## Workstreams by Domain

```js
// view() is the idiomatic Observable Framework reactive input:
// it displays the element AND returns a reactive value that re-runs dependent blocks.
const _chartMode = view(html`<select class="ws-mode-select">
  <optgroup label="By Status">
    <option value="active" selected>active</option>
    <option value="accepted">accepted</option>
    <option value="finished">finished</option>
    <option value="blocked">blocked</option>
    <option value="stalled">stalled</option>
    <option value="oldies">oldies</option>
  </optgroup>
  <optgroup label="Recently Changed">
    <option value="1h">last 1 hour</option>
    <option value="1d">last 24 hours</option>
    <option value="7d">last 7 days</option>
    <option value="30d">last 30 days</option>
    <option value="today">today</option>
    <option value="week">this week</option>
    <option value="month">this month</option>
  </optgroup>
</select>`);
```

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

// ── Filter workstreams by selected mode ───────────────────────────────────────
// "active" matches the DB status field directly.
// "accepted" = DB status "completed" (explicitly reviewed and signed off).
// "finished" = no open tasks remaining (derived from task counts).
// "blocked" = has ≥1 blocked task; "stalled" / "oldies" = activity-based.
// Time modes filter by updated_at / created_at.
const _STATUS_MODES = new Set(["active"]);

function _timeCutoff(mode) {
  const now = new Date();
  if (mode === "1h")    return new Date(now - 60 * 60 * 1000);
  if (mode === "1d")    return new Date(now - 24 * 60 * 60 * 1000);
  if (mode === "7d")    return new Date(now - 7  * 24 * 60 * 60 * 1000);
  if (mode === "30d")   return new Date(now - 30 * 24 * 60 * 60 * 1000);
  if (mode === "today") return new Date(now.getFullYear(), now.getMonth(), now.getDate());
  if (mode === "week")  {
    const d = new Date(now.getFullYear(), now.getMonth(), now.getDate());
    d.setDate(d.getDate() - ((d.getDay() + 6) % 7)); // back to Monday
    return d;
  }
  if (mode === "month") return new Date(now.getFullYear(), now.getMonth(), 1);
  return null;
}

const _chartWsFiltered = (
  _STATUS_MODES.has(_chartMode)
    ? wsAll.filter(w => w.status === _chartMode)
  : _chartMode === "accepted"
    ? wsAll.filter(w => w.status === "completed")
  : _chartMode === "finished"
    ? wsAll.filter(w => (w.todo ?? 0) + (w.in_progress ?? 0) + (w.blocked ?? 0) === 0)
  : _chartMode === "blocked"
    ? wsAll.filter(w => (w.blocked ?? 0) > 0)
  : _chartMode === "stalled"
    ? wsAll.filter(w => {
        const staleAt = new Date(Date.now() - 7 * 24 * 60 * 60 * 1000);
        return new Date(w.updated_at) < staleAt
          && (w.done ?? 0) > 0
          && (w.todo ?? 0) + (w.in_progress ?? 0) + (w.blocked ?? 0) > 0;
      })
  : _chartMode === "oldies"
    ? wsAll.filter(w => {
        const oldAt = new Date(Date.now() - 7 * 24 * 60 * 60 * 1000);
        return new Date(w.created_at) < oldAt
          && (w.done ?? 0) === 0
          && (w.todo ?? 0) + (w.in_progress ?? 0) + (w.blocked ?? 0) > 0;
      })
  : (() => {
      const since = _timeCutoff(_chartMode);
      return wsAll.filter(w =>
        new Date(w.updated_at) >= since || new Date(w.created_at) >= since
      );
    })()
);

// Sort domains top-to-bottom by most recent workstream update (most active domain first).
// Within a domain, most recently updated workstream comes first.
const _domainLatest = {};
for (const w of _chartWsFiltered) {
  const t = new Date(w.updated_at).getTime();
  if (!_domainLatest[w.domain] || t > _domainLatest[w.domain]) _domainLatest[w.domain] = t;
}
const chartWs = [..._chartWsFiltered].sort((a, b) => {
  const dd = (_domainLatest[b.domain] ?? 0) - (_domainLatest[a.domain] ?? 0);
  if (dd !== 0) return dd;
  return new Date(b.updated_at) - new Date(a.updated_at);
});

// ── Status weight: bold for notable statuses in mixed-status modes ─────────────
// Color is NOT used for status — avoids green-on-green when completed bars fill the row.
const _isTimeBased = !_STATUS_MODES.has(_chartMode);
function _wsWeight(s) { return (s === "accepted" || s === "blocked" || s === "stalled") ? "bold" : "normal"; }

// ── y-axis: domain label for first workstream per group only ──────────────────
const _yLabels = {};
const _seen = new Set();
for (const w of chartWs) {
  _yLabels[w.title] = _seen.has(w.domain) ? "" : w.domain;
  _seen.add(w.domain);
}

const statusOrder  = ["done", "in progress", "blocked", "todo"];
const statusColors = ["#4caf50", "steelblue", "#ff7043", "#e0e0e0"];

const _taskRows = chartWs.flatMap(w => [
  {label: w.title, status: "done",        count: w.done        ?? 0},
  {label: w.title, status: "in progress", count: w.in_progress ?? 0},
  {label: w.title, status: "blocked",     count: w.blocked     ?? 0},
  {label: w.title, status: "todo",        count: w.todo        ?? 0},
]).filter(d => d.count > 0);

// ── Render ────────────────────────────────────────────────────────────────────
if (chartWs.length === 0) {
  const _emptyMsg = {
    active: "No active workstreams.", accepted: "No accepted workstreams.",
    finished: "No finished workstreams.", blocked: "No blocked workstreams.",
    stalled: "No stalled workstreams — everything is moving.",
    oldies:  "No oldies — all older workstreams have at least one task done.",
    "1h": "No workstreams changed in the last hour.",
    "1d": "No workstreams changed in the last 24 hours.",
    "7d": "No workstreams changed in the last 7 days.",
    "30d": "No workstreams changed in the last 30 days.",
    today: "No workstreams changed today.",
    week:  "No workstreams changed this week.",
    month: "No workstreams changed this month.",
  };
  display(html`<p style="color:gray">${_emptyMsg[_chartMode] ?? "No workstreams."}</p>`);
} else {
  display(Plot.plot({
    y: {
      label: null, tickSize: 0,
      domain: chartWs.map(w => w.title),
      tickFormat: t => _yLabels[t] ?? "",
    },
    x: {label: "Tasks", grid: true},
    color: {domain: statusOrder, range: statusColors, legend: true},
    marks: [
      Plot.barX(_taskRows, {y: "label", x: "count", fill: "status", tip: true}),
      // Title label — pushed to lower half of bar row (dy: +7) to separate from count
      Plot.text(chartWs.filter(w => w.total > 0), {
        y: "title", x: 0, dx: 6, dy: 7,
        text: d => d.title.length > 72 ? d.title.slice(0, 70) + "…" : d.title,
        textAnchor: "start", fontSize: 10, fill: "#1e293b",
        fontWeight: d => _isTimeBased ? _wsWeight(d.status) : "normal",
      }),
      Plot.text(chartWs.filter(w => w.total === 0), {
        y: "title", x: 0, dx: 6, dy: 7,
        text: d => `${d.title.length > 48 ? d.title.slice(0, 46) + "…" : d.title} — no tasks yet`,
        textAnchor: "start", fontSize: 10, fill: "#94a3b8",
      }),
      // Count label — pushed to upper half of bar row (dy: -7) to separate from title
      Plot.text(chartWs.filter(w => w.total > 0), {
        y: "title", x: "total",
        text: d => ` ${d.done}/${d.total}`,
        dx: 4, dy: -7, textAnchor: "start", fontSize: 11, fill: "gray",
      }),
      Plot.ruleX([0]),
    ],
    marginLeft: 160,
    marginRight: 70,
    height: Math.max(80, chartWs.length * 44 + 50),
    width: 700,
  }));
}
```

## Contribution & SBOM Health

```js
const contribCounts = summary.contribution_counts ?? {};
const licenceRisk   = summary.licence_risk_count   ?? 0;
const totalContribs = ["br","fr","ep","upr"].reduce((s, t) => s + (contribCounts[t] ?? 0), 0);
const needsFollowUp = (contribCounts["submitted"] ?? 0) + (contribCounts["acknowledged"] ?? 0);
const sbomSnaps     = sbomSnapState.snapshots ?? [];
const totalPkgs     = sbomSnapState.totalPkgs ?? 0;

display(html`<div class="grid grid-cols-3" style="gap:1rem;margin-bottom:1.5rem">
  <a class="card card-link" href="./contributions">
    <h3>Contributions</h3>
    <p class="big-num">${totalContribs}</p>
    <small>${needsFollowUp > 0 ? html`<span style="color:orange">${needsFollowUp} awaiting upstream response</span>` : "all up to date"}</small>
  </a>
  <a class="card card-link ${licenceRisk > 0 ? 'warn' : ''}" href="./sbom">
    <h3>Licence Risk</h3>
    <p class="big-num">${licenceRisk}</p>
    <small>${licenceRisk === 0 ? html`<span style="color:green">✓ no copyleft in direct deps</span>` : html`<span style="color:red">copyleft in direct prod deps</span>`}</small>
  </a>
  <a class="card card-link ${licenceRisk > 0 ? 'warn' : ''}" href="./sbom">
    <h3>SBOM</h3>
    <p class="big-num">${totalPkgs.toLocaleString()}</p>
    <small>${sbomSnaps.length} repo${sbomSnaps.length !== 1 ? "s" : ""} tracked · ${licenceRisk > 0 ? html`<span style="color:red">${licenceRisk} copyleft risks</span>` : html`<span style="color:green">✓ no copyleft</span>`}</small>
  </a>
</div>`);
```

## Status

```js
const blockedTasks = summary.blocked_tasks ?? [];
const wsById = Object.fromEntries((summary.open_workstreams ?? []).map(w => [w.id, w]));
const todayCount = (summary.recent_progress ?? []).filter(e =>
  e.created_at?.startsWith(new Date().toISOString().slice(0, 10))).length;
const decCount = (decisions.open ?? 0) + (decisions.escalated ?? 0);

const statusEl = html`<div>
  <div class="grid grid-cols-4" style="gap:1rem;margin-bottom:0.75rem">
    <a class="card card-link" href="./workstreams">
      <h3>Active Workstreams</h3>
      <p class="big-num">${ws.active ?? 0}</p>
      <small>${ws.blocked ?? 0} blocked</small>
    </a>
    <a class="card card-link ${decCount > 0 ? 'warn' : ''}" href="#blocking-decisions">
      <h3>Blocking Decisions</h3>
      <p class="big-num">${decCount}</p>
      <small>${decisions.escalated ?? 0} escalated</small>
    </a>
    <div class="card card-link ${blockedTasks.length > 0 ? 'warn' : ''}" data-toggle="blocked-panel">
      <h3>Blocked Tasks</h3>
      <p class="big-num">${blockedTasks.length}</p>
      <small>of ${tasks.total ?? 0} total · click to expand</small>
    </div>
    <a class="card card-link" href="#recent-activity">
      <h3>Events Today</h3>
      <p class="big-num">${todayCount}</p>
      <small>last 20 shown below</small>
    </a>
  </div>

  <div id="blocked-panel" style="display:none;margin-bottom:1rem">
    ${blockedTasks.length === 0
      ? html`<p class="dim" style="padding:0.5rem 0">No tasks currently blocked.</p>`
      : html`<div class="bt-list">${blockedTasks.map(t => {
          const wsName = wsById[t.workstream_id]?.title ?? t.workstream_id?.slice(0,8) ?? "—";
          return html`<div class="bt-row">
            <div class="bt-meta">${wsName}</div>
            <div class="bt-title">${t.title}</div>
            ${t.blocking_reason ? html`<div class="bt-reason">⊘ ${t.blocking_reason}</div>` : ""}
          </div>`;
        })}</div>`
    }
  </div>
</div>`;

statusEl.querySelector('[data-toggle="blocked-panel"]').addEventListener('click', () => {
  const panel = statusEl.querySelector('#blocked-panel');
  const isOpen = panel.style.display !== 'none';
  panel.style.display = isOpen ? 'none' : 'block';
  statusEl.querySelector('[data-toggle="blocked-panel"] small').textContent =
    isOpen ? `of ${tasks.total ?? 0} total · click to expand` : `of ${tasks.total ?? 0} total · click to collapse`;
});

display(statusEl);
```

## What's next?

```js
// next_steps comes from the summary poll (derived, never persisted)
const nextSteps = summary.next_steps ?? [];

const typeLabel = {
  resolved_decision: "Decision resolved",
  dependency_cleared: "Dependency cleared",
  unblocked_task: "Task unblocked",
};
const typeBadgeClass = {
  resolved_decision: "ns-badge-decision",
  dependency_cleared: "ns-badge-dep",
  unblocked_task: "ns-badge-task",
};

if (nextSteps.length === 0) {
  display(html`<p class="ns-empty">No actionable suggestions right now — all open workstreams are making progress or waiting on decisions.</p>`);
} else {
  display(html`<div class="ns-grid">${nextSteps.map(s => html`
    <div class="ns-card">
      <div class="ns-card-header">
        <span class="ns-badge ${typeBadgeClass[s.type] ?? ''}">${typeLabel[s.type] ?? s.type}</span>
        <span class="ns-domain">${s.domain ?? "—"}</span>
      </div>
      <div class="ns-ws">${s.workstream_title ?? "—"}</div>
      <div class="ns-task">${s.task_title ? html`→ <strong>${s.task_title}</strong>` : ""}</div>
      <div class="ns-msg">${s.message}</div>
    </div>
  `)}</div>`);
}
```

## 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}));
}
```

```js
// Registered domains with no workstreams yet — show a getting-started hint
const regs = regsState ?? [];
const registeredDomains = new Set(regs.map(e => e.detail?.domain).filter(Boolean));
const emptyRegistered = (summary.topics ?? []).filter(t =>
  registeredDomains.has(t.domain_slug) && (t.workstreams ?? []).length === 0
);

if (emptyRegistered.length > 0) {
  display(html`<div class="hint-box">
    <strong>💡 Getting started</strong>
    <p>These registered projects have no workstreams yet:</p>
    <ul>${emptyRegistered.map(t => html`<li>
      <strong>${t.domain_slug}</strong> — open repo in Claude Code and say <em>"Hi!"</em> to kick off first session, or run <code>custodian create-workstream --domain ${t.domain_slug} --title "My first workstream"</code> manually
    </li>`)}</ul>
  </div>`);
}
```

## Blocking Decisions

```js
// Uses blockingDecisions (Mutable) — only re-renders when refreshDecisions() is called,
// not on every summary poll, so in-progress form input is preserved between polls.
const blocking = blockingDecisions ?? [];
if (blocking.length === 0) {
  display(html`<p style="color:green">✓ No blocking decisions.</p>`);
} else {
  for (const d of blocking) {
    const card = html`<div class="dec-card ${d.escalation_note ? 'dec-escalated' : ''}">
      <div class="dec-header">
        <span class="dec-title">${d.title}</span>
        <span class="dec-meta">
          ${d.escalation_note ? html`<span class="dec-warn-badge">⚠ escalated</span>` : ""}
          ${d.deadline ? html`<span>Due ${new Date(d.deadline).toLocaleDateString()}</span>` : ""}
          <button class="r-copy" title="Copy decision to clipboard">Copy</button>
        </span>
      </div>
      ${d.description ? html`<p class="dec-desc">${d.description}</p>` : ""}
      ${d.rationale   ? html`<p class="dec-context"><strong>Context:</strong> ${d.rationale}</p>` : ""}
      ${d.escalation_note ? html`<p class="dec-context dec-warn-text">${d.escalation_note}</p>` : ""}
      <details class="dec-resolve">
        <summary>Resolve this decision →</summary>
        <div class="dec-resolve-inner">
          <label>Your decision &amp; rationale</label>
          <textarea class="r-text" rows="4" placeholder="State the chosen option and your reasoning…"></textarea>
          <label>Decided by</label>
          <input class="r-by" type="text" value="human">
          <div class="dec-resolve-actions">
            <button class="r-submit">Record &amp; close</button>
            <span class="r-msg"></span>
          </div>
        </div>
      </details>
    </div>`;

    // Copy to clipboard
    const copyBtn = card.querySelector(".r-copy");
    copyBtn.addEventListener("click", () => {
      const parts = [
        `# ${d.title}`,
        "",
        d.description ?? "",
        d.rationale        ? `\n**Context:** ${d.rationale}` : "",
        d.escalation_note  ? `\n**⚠ Escalated:** ${d.escalation_note}` : "",
        `\n**Status:** ${d.status}  |  **Created:** ${new Date(d.created_at).toLocaleDateString()}`,
        d.deadline         ? `**Due:** ${new Date(d.deadline).toLocaleDateString()}` : "",
      ].filter(Boolean).join("\n");
      navigator.clipboard.writeText(parts).then(() => {
        copyBtn.textContent = "✓ Copied";
        setTimeout(() => { copyBtn.textContent = "Copy"; }, 1500);
      }).catch(() => { copyBtn.textContent = "⚠ Failed"; setTimeout(() => { copyBtn.textContent = "Copy"; }, 2000); });
    });

    // Resolve
    const btn = card.querySelector(".r-submit");
    const msg = card.querySelector(".r-msg");

    btn.addEventListener("click", async () => {
      const rationale = card.querySelector(".r-text").value.trim();
      const decidedBy = card.querySelector(".r-by").value.trim() || "human";
      if (!rationale) { msg.textContent = "⚠ Please enter a rationale."; return; }
      btn.disabled = true; btn.textContent = "Saving…";
      try {
        const r = await fetch(`${API}/decisions/${d.id}/resolve`, {
          method: "POST",
          headers: {"Content-Type": "application/json"},
          body: JSON.stringify({rationale, decided_by: decidedBy}),
        });
        if (r.ok) {
          await refreshDecisions(); // re-fetches list — resolved decision won't appear
        } else {
          const err = await r.json().catch(() => ({}));
          msg.textContent = `Error ${r.status}: ${err.detail ?? "unknown"}`;
          btn.disabled = false; btn.textContent = "Record & close";
        }
      } catch (e) {
        msg.textContent = `Network error: ${e.message}`;
        btn.disabled = false; btn.textContent = "Record & close";
      }
    });

    display(card);
  }
}
```

## Decisions Due Within 7 Days

```js
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,
    Deadline: new Date(d.deadline).toLocaleString(),
    Status:   d.status,
  }))));
}
```

## Recent Activity

```js
display(Inputs.table((summary.recent_progress ?? []).map(e => ({
  Time:    new Date(e.created_at).toLocaleString(),
  Type:    e.event_type,
  Author:  e.author ?? "—",
  Summary: e.summary,
})), {maxWidth: 900}));
```

<style>
.live-indicator { font-size: 0.8rem; color: gray; position: relative; padding: 0.55rem 1.8rem 0.55rem 0.7rem; margin-bottom: 0.75rem; }
.ws-mode-bar { margin-bottom: 0.75rem; }
.card { background: var(--theme-background-alt); border-radius: 8px; padding: 1rem; }
.card.warn { border: 2px solid orange; }
.card-link { cursor: pointer; transition: box-shadow 0.15s, transform 0.1s; text-decoration: none; color: inherit; display: block; }
.card-link:hover { box-shadow: 0 3px 10px rgba(0,0,0,0.13); transform: translateY(-1px); }
.bt-list { display: flex; flex-direction: column; gap: 0.5rem; }
.bt-row { background: var(--theme-background-alt); border-radius: 6px; padding: 0.6rem 0.9rem; border-left: 3px solid #ff7043; }
.bt-meta { font-size: 0.7rem; color: gray; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.15rem; }
.bt-title { font-weight: 600; font-size: 0.9rem; }
.bt-reason { font-size: 0.8rem; color: #b45309; margin-top: 0.25rem; }
.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; }
.hint-box { background: var(--theme-background-alt); border-left: 3px solid steelblue; border-radius: 4px; padding: 0.75rem 1rem; margin-top: 0.75rem; font-size: 0.9rem; }
.hint-box code { background: var(--theme-background); padding: 0.15rem 0.4rem; border-radius: 3px; font-size: 0.85rem; }
.dec-card { background: var(--theme-background-alt); border-radius: 8px; padding: 1rem 1.25rem; margin-bottom: 1rem; border-left: 4px solid steelblue; }
.dec-card.dec-escalated { border-left-color: orange; }
.dec-header { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.dec-title { font-weight: 600; font-size: 1rem; }
.dec-meta { font-size: 0.8rem; color: gray; display: flex; gap: 0.5rem; align-items: center; }
.dec-warn-badge { background: orange; color: white; border-radius: 3px; padding: 0.1rem 0.35rem; font-size: 0.75rem; }
.dec-desc { font-size: 0.9rem; margin: 0.4rem 0 0.25rem; white-space: pre-wrap; line-height: 1.5; }
.dec-context { font-size: 0.85rem; color: gray; margin: 0.25rem 0; }
.dec-warn-text { color: #b45309; }
.dec-resolve { margin-top: 0.75rem; }
.dec-resolve summary { cursor: pointer; font-size: 0.85rem; color: steelblue; user-select: none; }
.dec-resolve-inner { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.6rem; }
.dec-resolve-inner label { font-size: 0.8rem; font-weight: 600; color: gray; }
.dec-resolve-inner textarea { width: 100%; box-sizing: border-box; padding: 0.4rem; border-radius: 4px; border: 1px solid var(--theme-foreground-faint); background: var(--theme-background); font-family: inherit; font-size: 0.875rem; resize: vertical; }
.dec-resolve-inner input[type=text] { width: 220px; padding: 0.3rem 0.5rem; border-radius: 4px; border: 1px solid var(--theme-foreground-faint); background: var(--theme-background); font-family: inherit; font-size: 0.875rem; }
.dec-resolve-actions { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.25rem; }
.dec-resolve-actions button { padding: 0.35rem 0.9rem; border-radius: 4px; border: none; background: steelblue; color: white; cursor: pointer; font-size: 0.875rem; }
.dec-resolve-actions button:disabled { opacity: 0.5; cursor: default; }
.r-msg { font-size: 0.8rem; color: #b45309; }
.r-copy { padding: 0.15rem 0.55rem; border-radius: 3px; border: 1px solid var(--theme-foreground-faint); background: var(--theme-background); color: var(--theme-foreground-muted); cursor: pointer; font-size: 0.75rem; }
.r-copy:hover { background: var(--theme-background-alt); }
/* What's next */
.ns-empty { color: gray; font-style: italic; }
.ns-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0.75rem; }
.ns-card { background: var(--theme-background-alt); border-radius: 8px; padding: 0.85rem 1rem; border-left: 4px solid #555; }
.ns-card-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; }
.ns-badge { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.15rem 0.45rem; border-radius: 10px; font-weight: 600; }
.ns-badge-decision { background: #d4edda; color: #155724; }
.ns-badge-dep      { background: #cce5ff; color: #004085; }
.ns-badge-task     { background: #fff3cd; color: #856404; }
.ns-domain { font-size: 0.75rem; color: gray; }
.ns-ws  { font-weight: 600; font-size: 0.9rem; margin-bottom: 0.2rem; }
.ns-task { font-size: 0.85rem; margin-bottom: 0.35rem; }
.ns-msg  { font-size: 0.78rem; color: #555; line-height: 1.4; }
</style>