nlm-memory 0.4.0

package/src/ui/pages/Live.tsx

@@ -0,0 +1,229 @@
+import { useEffect, useRef, useState } from "react";
+import { usePolledEndpoint, relativeTime } from "../lib/api.js";
+import type { PolledResult, RecentMarker, RecentRead, RecentWrite } from "../lib/api.js";
+import { SessionDrawer } from "../components/SessionDrawer.js";
+
+const POLL_MS = 3000;
+/** Past this many ms with no successful fetch, the board is treated as stale. */
+const STALE_MS = POLL_MS * 3;
+
+interface ReadsResponse { entries: RecentRead[] }
+interface WritesResponse { writes: RecentWrite[] }
+interface MarkersResponse { markers: RecentMarker[] }
+
+/**
+ * Tracks which row keys are newly arrived so they can flash once. The first
+ * populated render seeds the seen-set silently — only genuinely new rows
+ * after that are reported fresh, for ~1.2s each.
+ */
+function useFreshKeys(keys: string[]): Set<string> {
+  const seen = useRef<Set<string> | null>(null);
+  const [fresh, setFresh] = useState<Set<string>>(new Set());
+  const signature = keys.join("|");
+
+  useEffect(() => {
+    if (keys.length === 0) return;
+    if (seen.current === null) {
+      seen.current = new Set(keys);
+      return;
+    }
+    const added = keys.filter((k) => !seen.current!.has(k));
+    for (const k of keys) seen.current!.add(k);
+    if (added.length === 0) return;
+    setFresh((prev) => new Set([...prev, ...added]));
+    const t = setTimeout(() => {
+      setFresh((prev) => {
+        const next = new Set(prev);
+        for (const k of added) next.delete(k);
+        return next;
+      });
+    }, 1200);
+    return () => clearTimeout(t);
+    // signature captures the ordered key list; keys identity is unstable.
+  }, [signature]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return fresh;
+}
+
+export function LivePage() {
+  const reads = usePolledEndpoint<ReadsResponse>("/api/recall/recent?limit=50", POLL_MS, { entries: [] });
+  const writes = usePolledEndpoint<WritesResponse>("/api/live/recent-writes?limit=50", POLL_MS, { writes: [] });
+  const markers = usePolledEndpoint<MarkersResponse>("/api/live/recent-markers?limit=50", POLL_MS, { markers: [] });
+
+  const [sessionId, setSessionId] = useState<string | null>(null);
+
+  const readKeys = reads.data.entries.map((r) => `${r.ts}|${r.source}|${r.query ?? ""}`);
+  const writeKeys = writes.data.writes.map((w) => w.id);
+  const markerKeys = markers.data.markers.map((m) => `${m.sessionId}|${m.kind}|${m.text}`);
+  const freshReads = useFreshKeys(readKeys);
+  const freshWrites = useFreshKeys(writeKeys);
+  const freshMarkers = useFreshKeys(markerKeys);
+
+  return (
+    <div className="live-page">
+      <ConnectionBar reads={reads} writes={writes} markers={markers} />
+
+      <div className="live-board">
+        <Column
+          title="Reads"
+          count={reads.data.entries.length}
+          loading={reads.loading}
+          emptyLabel="no recent recall"
+        >
+          {reads.data.entries.map((r, i) => {
+            const key = readKeys[i]!;
+            return (
+              <div className={`live-row${freshReads.has(key) ? " is-new" : ""}`} key={key}>
+                <span className="live-tag">{r.source}</span>
+                <span className="label">{r.query ?? "(no query)"}</span>
+                <div className="body">{r.mode} · {r.nResults} hit{r.nResults === 1 ? "" : "s"}</div>
+                <div className="meta">{relativeTime(r.ts)}</div>
+              </div>
+            );
+          })}
+        </Column>
+
+        <Column
+          title="Writes"
+          count={writes.data.writes.length}
+          loading={writes.loading}
+          emptyLabel="no recent writes"
+        >
+          {writes.data.writes.map((w) => (
+            <Row
+              key={w.id}
+              fresh={freshWrites.has(w.id)}
+              onOpen={() => setSessionId(w.id)}
+            >
+              <span className="live-tag">{w.runtime.split("/")[0]}</span>
+              <span className="label">{w.label}</span>
+              <div className="body">{w.summary}</div>
+              <div className="meta">{relativeTime(w.createdAt)} · {w.id}</div>
+            </Row>
+          ))}
+        </Column>
+
+        <Column
+          title="Markers"
+          count={markers.data.markers.length}
+          loading={markers.loading}
+          emptyLabel="no recent markers"
+        >
+          {markers.data.markers.map((m, i) => {
+            const key = markerKeys[i]!;
+            return (
+              <Row
+                key={key}
+                fresh={freshMarkers.has(key)}
+                onOpen={() => setSessionId(m.sessionId)}
+              >
+                <span className="live-tag" data-kind={m.kind}>{m.kind}</span>
+                <span className="label">{m.text}</span>
+                <div className="body">{m.label}</div>
+                <div className="meta">{relativeTime(m.createdAt)}</div>
+              </Row>
+            );
+          })}
+        </Column>
+      </div>
+
+      {sessionId && (
+        <SessionDrawer sessionId={sessionId} onClose={() => setSessionId(null)} />
+      )}
+    </div>
+  );
+}
+
+function ConnectionBar({
+  reads,
+  writes,
+  markers,
+}: {
+  reads: PolledResult<unknown>;
+  writes: PolledResult<unknown>;
+  markers: PolledResult<unknown>;
+}) {
+  const all = [reads, writes, markers];
+  const loading = all.every((p) => p.loading);
+  const stamps = all.map((p) => p.lastUpdated).filter((t): t is number => t !== null);
+  const freshest = stamps.length > 0 ? Math.max(...stamps) : null;
+  const anyError = all.some((p) => p.error !== null);
+  const stale = freshest !== null && Date.now() - freshest > STALE_MS;
+
+  let status: "connecting" | "live" | "reconnecting";
+  if (loading) status = "connecting";
+  else if (stale || anyError) status = "reconnecting";
+  else status = "live";
+
+  const label =
+    status === "connecting" ? "Connecting…"
+    : status === "reconnecting" ? "Reconnecting…"
+    : "Live";
+
+  return (
+    <div className="live-status">
+      <span className={`live-status-dot live-status-${status}`} aria-hidden="true" />
+      <span className="live-status-label">{label}</span>
+      {freshest !== null && (
+        <span className="muted small">
+          updated {relativeTime(new Date(freshest).toISOString())}
+        </span>
+      )}
+      <span className="header-spacer" />
+      <span className="muted small mono">polling every {POLL_MS / 1000}s</span>
+    </div>
+  );
+}
+
+function Column({
+  title,
+  count,
+  loading,
+  emptyLabel,
+  children,
+}: {
+  title: string;
+  count: number;
+  loading: boolean;
+  emptyLabel: string;
+  children: React.ReactNode;
+}) {
+  const isEmpty = count === 0;
+  return (
+    <section className="live-col">
+      <header className="live-col-head">
+        <span className="live-col-title">{title}</span>
+        <span className="live-col-count">{count}</span>
+      </header>
+      <div className="live-col-body">
+        {isEmpty
+          ? <div className="live-empty">{loading ? "loading…" : emptyLabel}</div>
+          : children}
+      </div>
+    </section>
+  );
+}
+
+function Row({
+  fresh,
+  onOpen,
+  children,
+}: {
+  fresh: boolean;
+  onOpen: () => void;
+  children: React.ReactNode;
+}) {
+  return (
+    <div
+      className={`live-row clickable${fresh ? " is-new" : ""}`}
+      onClick={onOpen}
+      role="button"
+      tabIndex={0}
+      onKeyDown={(e) => {
+        if (e.key === "Enter" || e.key === " ") { e.preventDefault(); onOpen(); }
+      }}
+    >
+      {children}
+    </div>
+  );
+}

package/src/ui/pages/Pulse.tsx

@@ -0,0 +1,415 @@
+import { useEffect, useMemo, useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { useDataset, relativeAge } from "../lib/dataset.js";
+import type { DatasetAlert, DatasetEntity, DatasetRuntime, DatasetSession } from "../lib/dataset.js";
+import { postAction } from "../lib/actions.js";
+import { SessionDrawer } from "../components/SessionDrawer.js";
+import { PromoteOpenButton } from "../components/PromoteOpenButton.js";
+import { PulseSkeleton } from "../components/Skeleton.js";
+
+type SeverityFilter = "all" | "high" | "medium";
+type AlertSort = "oldest" | "recent";
+
+export function PulsePage() {
+  const { data, loading, error, refetch } = useDataset();
+  const [severity, setSeverity] = useState<SeverityFilter>("all");
+  const [sort, setSort] = useState<AlertSort>("oldest");
+  const [detailId, setDetailId] = useState<string | null>(null);
+  const [sessionId, setSessionId] = useState<string | null>(null);
+
+  const filteredAlerts = useMemo(() => {
+    if (!data) return [];
+    const filtered = severity === "all" ? data.alerts : data.alerts.filter((a) => a.severity === severity);
+    return [...filtered].sort((a, b) => (sort === "oldest" ? b.age_days - a.age_days : a.age_days - b.age_days));
+  }, [data, severity, sort]);
+
+  const dismissAlert = async (alertId: string) => {
+    await postAction({ kind: "dismiss", subject_type: "alert", subject_id: alertId });
+    await refetch();
+  };
+  const snoozeAlert = async (alertId: string, days: number) => {
+    const until = new Date(Date.now() + days * 86_400_000).toISOString();
+    await postAction({
+      kind: "snooze",
+      subject_type: "alert",
+      subject_id: alertId,
+      payload: { snoozed_until: until },
+    });
+    await refetch();
+  };
+
+  const recent = useMemo(() => {
+    if (!data) return [];
+    return [...data.sessions]
+      .sort((a, b) => (b.started_at ?? "").localeCompare(a.started_at ?? ""))
+      .slice(0, 20);
+  }, [data]);
+
+  if (loading && !data) return <PulseSkeleton />;
+  if (error && !data) return <div className="page-pad"><div className="muted error">{error}</div></div>;
+  if (!data) return null;
+
+  const detailAlert = detailId ? data.alerts.find((a) => a.id === detailId) ?? null : null;
+
+  return (
+    <div className="page-pad">
+      <div className="kpi-row">
+        <Kpi label="This week" value={data.metrics.this_week} hint={`${data.metrics.last_week} last week`} />
+        <Kpi label="Sessions" value={data.meta.sessions_total} hint="total" />
+        <Kpi label="Entities" value={data.meta.entities_total} hint="catalogued" />
+        <Kpi label="Decisions" value={data.metrics.closed_decisions} hint="non-superseded" />
+        <KpiSparkline values={data.metrics.sparkline} />
+      </div>
+
+      <div className="pulse-grid">
+        <section className="card pulse-area-coherence">
+          <header className="card-head"><h3>Coherence</h3></header>
+          <CoherenceBars metrics={data.metrics} />
+        </section>
+
+        <section className="card pulse-area-runtimes">
+          <header className="card-head"><h3>Runtimes</h3></header>
+          <RuntimesPanel runtimes={data.runtimes} />
+        </section>
+
+        <section className="card pulse-scroll-card pulse-area-recent">
+          <header className="card-head"><h3>Recent sessions</h3></header>
+          <div className="pulse-scroll-body">
+            <ul className="session-list">
+              {recent.map((s) => (
+                <li
+                  key={s.id}
+                  className="session-row clickable"
+                  onClick={() => setSessionId(s.id)}
+                  role="button"
+                  tabIndex={0}
+                  onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); setSessionId(s.id); } }}
+                >
+                  <span className={`chip-inline status-${s.status}`}>{s.status}</span>
+                  <span className="session-label">{s.label}</span>
+                  <span className="session-meta">{relativeAge(s.started_at)} · {s.entities.slice(0, 3).join(", ")}{s.entities.length > 3 ? ` +${s.entities.length - 3}` : ""}</span>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </section>
+
+        <section className="card pulse-scroll-card pulse-area-stale">
+          <header className="card-head card-head-stack">
+            <div className="card-head-row">
+              <h3>Stale alerts</h3>
+              <span className="muted small">
+                {filteredAlerts.length}{filteredAlerts.length !== data.alerts.length ? ` / ${data.alerts.length}` : ""}
+              </span>
+            </div>
+            <div className="card-filters">
+              <div className="filter-group" role="group" aria-label="Severity">
+                {(["all", "high", "medium"] as const).map((s) => (
+                  <button
+                    key={s}
+                    type="button"
+                    className={`chip${severity === s ? " active" : ""}`}
+                    data-severity={s === "all" ? undefined : s}
+                    onClick={() => setSeverity(s)}
+                  >{s}</button>
+                ))}
+              </div>
+              <div className="filter-group" role="group" aria-label="Sort">
+                <button type="button" className={`chip${sort === "oldest" ? " active" : ""}`} onClick={() => setSort("oldest")}>oldest</button>
+                <button type="button" className={`chip${sort === "recent" ? " active" : ""}`} onClick={() => setSort("recent")}>recent</button>
+              </div>
+            </div>
+          </header>
+          <div className="pulse-scroll-body">
+            <ul className="alert-list">
+              {filteredAlerts.map((a) => (
+                <li
+                  key={a.id}
+                  className="alert-row clickable"
+                  onClick={() => setDetailId(a.id)}
+                  role="button"
+                  tabIndex={0}
+                  onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); setDetailId(a.id); } }}
+                >
+                  <span className={`chip-inline severity-${a.severity}`}>{a.severity}</span>
+                  <span className="alert-entity">{a.entity}</span>
+                  <span className="alert-summary">{a.summary}</span>
+                  <div className="alert-actions" onClick={(e) => e.stopPropagation()}>
+                    <button type="button" className="chip" onClick={() => void snoozeAlert(a.id, 7)}>snooze 7d</button>
+                    <button type="button" className="chip" onClick={() => void dismissAlert(a.id)}>dismiss</button>
+                  </div>
+                </li>
+              ))}
+              {filteredAlerts.length === 0 && (
+                <li className="muted alert-row-empty">
+                  {data.alerts.length === 0 ? "No stale alerts." : "No alerts match the current filters."}
+                </li>
+              )}
+            </ul>
+          </div>
+        </section>
+      </div>
+
+      {detailAlert && (
+        <AlertDrawer
+          alert={detailAlert}
+          entity={data.entities.find((e) => e.canonical === detailAlert.entity) ?? null}
+          entityColor={data.entity_colors[detailAlert.entity] ?? "#666"}
+          sessions={data.sessions}
+          onClose={() => setDetailId(null)}
+          onDismiss={async () => { await dismissAlert(detailAlert.id); setDetailId(null); }}
+          onSnooze={async (days) => { await snoozeAlert(detailAlert.id, days); setDetailId(null); }}
+          onPromoted={refetch}
+        />
+      )}
+
+      {sessionId && (
+        <SessionDrawer
+          sessionId={sessionId}
+          onClose={() => setSessionId(null)}
+          entityColor={(() => {
+            const s = data.sessions.find((x) => x.id === sessionId);
+            const e = s?.entities[0];
+            return e ? data.entity_colors[e] : undefined;
+          })()}
+        />
+      )}
+    </div>
+  );
+}
+
+interface AlertDrawerProps {
+  alert: DatasetAlert;
+  entity: DatasetEntity | null;
+  entityColor: string;
+  sessions: DatasetSession[];
+  onClose: () => void;
+  onDismiss: () => Promise<void> | void;
+  onSnooze: (days: number) => Promise<void> | void;
+  onPromoted: () => Promise<void> | void;
+}
+
+const DRAWER_PAGE_SIZES = [10, 25, 50] as const;
+
+function AlertDrawer({ alert, entity, entityColor, sessions, onClose, onDismiss, onSnooze, onPromoted }: AlertDrawerProps) {
+  const navigate = useNavigate();
+  const [pageSize, setPageSize] = useState<number>(10);
+  const [page, setPage] = useState(0);
+
+  const related = useMemo(() => {
+    return sessions
+      .filter((s) => s.entities.includes(alert.entity))
+      .sort((a, b) => (b.started_at ?? "").localeCompare(a.started_at ?? ""));
+  }, [sessions, alert.entity]);
+
+  // Reset page when alert changes (drawer opened for a different entity) or page size changes.
+  useEffect(() => { setPage(0); }, [alert.id, pageSize]);
+
+  const pageCount = Math.max(1, Math.ceil(related.length / pageSize));
+  const currentPage = Math.min(page, pageCount - 1);
+  const start = currentPage * pageSize;
+  const sessionSlice = related.slice(start, start + pageSize);
+
+  const openQuestions = useMemo(
+    () => related.flatMap((s) => s.open_questions.map((q) => ({ id: q.id, text: q.text, sid: s.id, when: s.started_at }))),
+    [related],
+  );
+
+  const decisions = useMemo(
+    () => related.flatMap((s) => s.decisions.map((d) => ({ text: d, sid: s.id, when: s.started_at }))),
+    [related],
+  );
+
+  useEffect(() => {
+    const onEsc = (e: KeyboardEvent) => { if (e.key === "Escape") onClose(); };
+    window.addEventListener("keydown", onEsc);
+    return () => window.removeEventListener("keydown", onEsc);
+  }, [onClose]);
+
+  return (
+    <>
+      <div className="drawer-backdrop" onClick={onClose} />
+      <aside className="session-drawer" role="dialog" aria-modal="true" aria-label={`Alert detail: ${alert.entity}`}>
+        <header className="drawer-head">
+          <span className="dot lg" style={{ background: entityColor }} />
+          <h3 className="drawer-title">{alert.entity}</h3>
+          <span className={`chip-inline severity-${alert.severity}`}>{alert.severity}</span>
+          <button type="button" className="drawer-close" onClick={onClose} aria-label="Close">×</button>
+        </header>
+        <div className="drawer-body">
+          <p className="drawer-paragraph">{alert.summary}</p>
+
+          <dl className="kv-list">
+            <dt className="kv-label">Last touch</dt>
+            <dd className="kv-value">{alert.age_days} day{alert.age_days === 1 ? "" : "s"} ago</dd>
+            <dt className="kv-label">Last session</dt>
+            <dd className="kv-value mono small">{alert.last_touch_at ?? "—"}</dd>
+            {entity && (
+              <>
+                <dt className="kv-label">Entity type</dt>
+                <dd className="kv-value">{entity.type}</dd>
+                <dt className="kv-label">Total sessions</dt>
+                <dd className="kv-value mono">{entity.session_count}</dd>
+              </>
+            )}
+          </dl>
+
+          <div className="drawer-actions">
+            <button type="button" className="btn btn-accent" onClick={() => navigate(`/thread?entity=${encodeURIComponent(alert.entity)}`)}>
+              Open thread
+            </button>
+            <button type="button" className="btn" onClick={() => void onSnooze(7)}>Snooze 7d</button>
+            <button type="button" className="btn" onClick={() => void onSnooze(30)}>Snooze 30d</button>
+            <button type="button" className="btn btn-danger" onClick={() => void onDismiss()}>Dismiss</button>
+          </div>
+
+          {openQuestions.length > 0 && (
+            <>
+              <h4 className="drawer-section">Open questions ({openQuestions.length})</h4>
+              <ul className="drawer-list">
+                {openQuestions.slice(0, 12).map((q, i) => (
+                  <li key={`${q.id}-${i}`} className="marker-row-promotable">
+                    <span className="live-tag" data-kind="open">open</span>
+                    <span className="marker-text">{q.text}</span>
+                    <PromoteOpenButton openId={q.id} defaultText={q.text} onPromoted={onPromoted} />
+                    <span className="muted small">{relativeAge(q.when)}</span>
+                  </li>
+                ))}
+              </ul>
+              {openQuestions.length > 12 && <p className="muted small">Showing first 12 of {openQuestions.length}.</p>}
+            </>
+          )}
+
+          {decisions.length > 0 && (
+            <>
+              <h4 className="drawer-section">Decisions ({decisions.length})</h4>
+              <ul className="drawer-list">
+                {decisions.slice(0, 8).map((d, i) => (
+                  <li key={`${d.sid}-${i}`}>
+                    <span className="live-tag" data-kind="decision">decision</span>
+                    <span className="marker-text">{d.text}</span>
+                    <span className="muted small">{relativeAge(d.when)}</span>
+                  </li>
+                ))}
+              </ul>
+              {decisions.length > 8 && <p className="muted small">Showing first 8 of {decisions.length}.</p>}
+            </>
+          )}
+
+          <h4 className="drawer-section">Recent sessions ({related.length})</h4>
+          <ul className="session-list">
+            {sessionSlice.map((s) => (
+              <li key={s.id} className="session-row">
+                <span className={`chip-inline status-${s.status}`}>{s.status}</span>
+                <div className="session-row-main">
+                  <Link to={`/thread?entity=${encodeURIComponent(alert.entity)}&session=${encodeURIComponent(s.id)}`} className="session-label">{s.label}</Link>
+                  <span className="session-meta">{s.summary}</span>
+                </div>
+                <span className="muted small mono">{relativeAge(s.started_at)}</span>
+              </li>
+            ))}
+          </ul>
+          {related.length > 0 && (
+            <div className="pagination pagination-compact">
+              <div className="page-size">
+                <label className="form-label">Per page</label>
+                <select
+                  className="form-input form-input-inline"
+                  value={pageSize}
+                  onChange={(e) => setPageSize(Number.parseInt(e.target.value, 10))}
+                >
+                  {DRAWER_PAGE_SIZES.map((n) => <option key={n} value={n}>{n}</option>)}
+                </select>
+              </div>
+              <span className="header-spacer" />
+              <span className="muted small">
+                {start + 1}–{Math.min(start + pageSize, related.length)} of {related.length}
+              </span>
+              <div className="page-nav">
+                <button type="button" className="chip" disabled={currentPage === 0} onClick={() => setPage(0)}>«</button>
+                <button type="button" className="chip" disabled={currentPage === 0} onClick={() => setPage((p) => Math.max(0, p - 1))}>‹</button>
+                <span className="page-indicator mono">{currentPage + 1} / {pageCount}</span>
+                <button type="button" className="chip" disabled={currentPage >= pageCount - 1} onClick={() => setPage((p) => Math.min(pageCount - 1, p + 1))}>›</button>
+                <button type="button" className="chip" disabled={currentPage >= pageCount - 1} onClick={() => setPage(pageCount - 1)}>»</button>
+              </div>
+            </div>
+          )}
+        </div>
+      </aside>
+    </>
+  );
+}
+
+function Kpi({ label, value, hint }: { label: string; value: number; hint?: string }) {
+  return (
+    <div className="kpi">
+      <span className="kpi-label">{label}</span>
+      <span className="kpi-value">{value.toLocaleString()}</span>
+      {hint && <span className="kpi-hint">{hint}</span>}
+    </div>
+  );
+}
+
+function KpiSparkline({ values }: { values: number[] }) {
+  const max = Math.max(1, ...values);
+  return (
+    <div className="kpi kpi-sparkline">
+      <span className="kpi-label">Last 7 days</span>
+      <div className="sparkline">
+        {values.map((v, i) => (
+          <span key={i} className="spark-bar" style={{ height: `${(v / max) * 100}%` }} title={`${v} sessions`} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function CoherenceBars({ metrics }: { metrics: { healthy: number; sparse: number; stale: number } }) {
+  const total = metrics.healthy + metrics.sparse + metrics.stale;
+  const pct = (v: number) => (total > 0 ? (v / total) * 100 : 0);
+  return (
+    <div className="bar-stack">
+      <Bar tone="active" label="Healthy" value={metrics.healthy} pct={pct(metrics.healthy)} />
+      <Bar tone="warn"   label="Sparse"  value={metrics.sparse}  pct={pct(metrics.sparse)} />
+      <Bar tone="danger" label="Stale"   value={metrics.stale}   pct={pct(metrics.stale)} />
+    </div>
+  );
+}
+
+function RuntimesPanel({ runtimes }: { runtimes: DatasetRuntime[] }) {
+  if (runtimes.length === 0) {
+    return <div className="muted small" style={{ padding: "8px 12px" }}>No runtime activity yet.</div>;
+  }
+  return (
+    <ul className="runtime-list">
+      {runtimes.map((r) => (
+        <li key={r.name} className="runtime-row">
+          <span className={`runtime-dot runtime-${r.status}`} title={r.status} />
+          <span className="runtime-name mono">{r.name}</span>
+          <span className="runtime-counts muted small">
+            {r.this_week}<span className="runtime-counts-sep">·</span><span className="runtime-counts-prev">{r.last_week} prev</span>
+          </span>
+          <span className="muted small mono runtime-age">{relativeAge(r.last_session_at)}</span>
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+function Bar({ tone, label, value, pct }: {
+  tone: "active" | "warn" | "danger";
+  label: string;
+  value: number;
+  pct: number;
+}) {
+  const rounded = Math.round(pct);
+  return (
+    <div className="bar-item">
+      <span className="bar-label">{label}</span>
+      <div className="bar-track" title={`${value.toLocaleString()} entit${value === 1 ? "y" : "ies"} · ${rounded}% of total`}>
+        <div className={`bar-fill tone-${tone}`} style={{ width: `${pct}%` }} />
+      </div>
+      <span className="bar-value mono">{value.toLocaleString()}<span className="bar-pct muted small"> · {rounded}%</span></span>
+    </div>
+  );
+}