feat: new ops console for the admin surface

The old admin was five separate html pages, so every navigation was a full
reload and the operational picture was scattered across all of them. Worth
saying: the api was never the problem, every endpoint answers in under 200ms.
It felt slow because of the architecture, not the backend.

This is a single page console. React and htm from a cdn, no bundler and no
babel-in-the-browser, because a runtime transpiler on every load is exactly the
slowness we are trying to get rid of. Hash routing, polling that keeps the last
good payload on screen instead of flashing a spinner, and stale responses are
dropped so a slow request cannot overwrite a newer one.

/admin/api/ops/overview answers the whole dashboard in one call rather than
making the browser fan out and stitch. It carries the things that actually
matter and were not visible anywhere before: when live evidence matures, why a
cohort does or does not clear the trade gate, which stage of the pipeline has
gone quiet, and what is sitting in dead letters.

Controls, all of which change production and all of which ask twice:
- requeue dead letters, which only ever moves dead_letter back to pending
- execution mode and a kill switch, now read from autonomy_settings on every
  poll instead of only from AUTONOMY_EXECUTION_MODE, so halting no longer needs
  a redeploy first
- run the reaction analysis and read its output

The d3 graph is framed rather than ported. It works, and rewriting it would risk
something valuable for nothing the operator can see.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01WnNxwxfXSbeNtjvtz5gayb
This commit is contained in:
ImBenji
2026-09-01 20:17:36 +01:00
co-authored by Claude Opus 5
parent 2d92759ae9
commit 0a5b30ab63
14 changed files with 1492 additions and 8 deletions
+111
View File
@@ -0,0 +1,111 @@
// Shared plumbing: htm binding, hash router, polling fetch, formatters.
const { createElement, useState, useEffect, useRef, useCallback } = React;
export const html = htm.bind(createElement);
export { useState, useEffect, useRef, useCallback };
export async function api(path, options = {}) {
const response = await fetch(path, {
...options,
headers: { 'Content-Type': 'application/json', ...(options.headers || {}) },
body: options.body ? JSON.stringify(options.body) : undefined,
});
const text = await response.text();
let parsed = null;
try { parsed = text ? JSON.parse(text) : null; } catch (error) {
// A non JSON body from an API that always speaks JSON means something upstream
// failed, so surface the raw text rather than a parse error nobody can act on.
console.error('[ops] non-JSON response from', path, error.message);
throw new Error(text.slice(0, 200) || `HTTP ${response.status}`);
}
if (!response.ok) throw new Error((parsed && parsed.error) || `HTTP ${response.status}`);
return parsed;
}
// Poll without the spinner flash: keep showing the previous payload while the next
// one is in flight, and never let a slow response overwrite a newer one.
export function usePoll(path, intervalMs = 5000) {
const [state, setState] = useState({ data: null, error: null, loading: true, at: null });
const seq = useRef(0);
const alive = useRef(true);
const refresh = useCallback(async () => {
const mine = ++seq.current;
try {
const data = await api(path);
if (!alive.current || mine !== seq.current) return;
setState({ data, error: null, loading: false, at: Date.now() });
} catch (error) {
if (!alive.current || mine !== seq.current) return;
console.error('[ops] poll failed for', path, error.message);
setState((prev) => ({ ...prev, error: error.message, loading: false }));
}
}, [path]);
useEffect(() => {
alive.current = true;
refresh();
const timer = setInterval(refresh, intervalMs);
const onVisible = () => { if (!document.hidden) refresh(); };
document.addEventListener('visibilitychange', onVisible);
return () => {
alive.current = false;
clearInterval(timer);
document.removeEventListener('visibilitychange', onVisible);
};
}, [refresh, intervalMs]);
return { ...state, refresh };
}
export function useHashRoute(fallback) {
const read = () => (location.hash || '').replace(/^#\/?/, '') || fallback;
const [route, setRoute] = useState(read);
useEffect(() => {
const onHash = () => setRoute(read());
addEventListener('hashchange', onHash);
return () => removeEventListener('hashchange', onHash);
}, []);
return route;
}
/* ---------- formatting ---------- */
export const num = (value) => (value === null || value === undefined || Number.isNaN(Number(value))
? '—' : Number(value).toLocaleString());
export function compact(value) {
const n = Number(value);
if (!Number.isFinite(n)) return '—';
if (Math.abs(n) >= 1e9) return (n / 1e9).toFixed(2) + 'B';
if (Math.abs(n) >= 1e6) return (n / 1e6).toFixed(2) + 'M';
if (Math.abs(n) >= 1e3) return (n / 1e3).toFixed(1) + 'k';
return String(n);
}
export const pct = (value, digits = 1) => (Number.isFinite(Number(value))
? `${(Number(value) * 100).toFixed(digits)}%` : '—');
export function ago(minutes) {
if (minutes === null || minutes === undefined || !Number.isFinite(Number(minutes))) return 'unknown';
const m = Number(minutes);
if (m < 1) return 'just now';
if (m < 60) return `${Math.round(m)}m ago`;
if (m < 60 * 24) return `${(m / 60).toFixed(1)}h ago`;
return `${(m / 1440).toFixed(1)}d ago`;
}
export function whenDate(value) {
if (!value) return '—';
const stamp = String(value).slice(0, 10);
const days = Math.round((Date.parse(`${stamp}T00:00:00Z`) - Date.now()) / 86400000);
if (!Number.isFinite(days)) return stamp;
if (days === 0) return `${stamp} (today)`;
return days > 0 ? `${stamp} (in ${days}d)` : `${stamp} (${-days}d ago)`;
}
export function health(minutes, threshold) {
if (minutes === null || minutes === undefined) return 'idle';
if (!Number.isFinite(Number(threshold))) return 'ok';
const m = Number(minutes);
if (m <= threshold) return 'ok';
return m <= threshold * 3 ? 'warn' : 'bad';
}