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
2026-09-01 20:17:36 +01:00
parent 2d92759ae9
commit 0a5b30ab63
14 changed files with 1492 additions and 8 deletions
@@ -0,0 +1,87 @@
+import { html, useHashRoute, useState, usePoll, num, ago } from './core.js';
+import { Toast, Dot } from './ui.js';
+import { Overview } from './overview.js';
+import { Controls } from './controls.js';
+import { Articles, Events, Intelligence } from './explore.js';
+import { Sql } from './sql.js';
+
+// The d3 force graph is a big specialised visualisation that already works. It is
+// mounted in a frame rather than rewritten, because porting it would risk breaking
+// something valuable to gain nothing the operator can see.
+const Graph = () => html`
+  <section class="card" style="padding:0; overflow:hidden">
+    <iframe src="/admin/intelligence/graph" title="Intelligence graph"
+      style="width:100%; height:calc(100vh - 150px); border:0; display:block"></iframe>
+  </section>`;
+
+const ROUTES = [
+  { id: 'overview', label: 'Overview', view: Overview },
+  { id: 'controls', label: 'Controls', view: Controls },
+  { id: 'articles', label: 'Articles', view: Articles },
+  { id: 'events', label: 'Events', view: Events },
+  { id: 'intelligence', label: 'Intelligence', view: Intelligence },
+  { id: 'graph', label: 'Graph', view: Graph },
+  { id: 'sql', label: 'SQL', view: Sql },
+];
+
+function Nav({ route, health }) {
+  return html`
+    <nav class="side">
+      <div class="brand">DURIIN</div>
+      ${ROUTES.map((r) => html`
+        <a key=${r.id} class=${`nav-item ${route === r.id ? 'active' : ''}`} href=${`#/${r.id}`}>
+          <span>${r.label}</span>
+          ${r.id === 'controls' && health.deadTotal > 0
+            && html`<span class="pill bad">${num(health.deadTotal)}</span>`}
+          ${r.id === 'overview' && health.halted && html`<${Dot} tone="bad" />`}
+        </a>`)}
+      <div class="nav-spacer"></div>
+      <div class="muted small mono" style="padding:8px 10px; line-height:1.7">
+        <div class="row" style="gap:7px">
+          <${Dot} tone=${health.tone} live />
+          <span>${health.label}</span>
+        </div>
+        <div>ingest ${ago(health.ingestMinutes)}</div>
+      </div>
+    </nav>`;
+}
+
+function App() {
+  const route = useHashRoute('overview');
+  const [toast, setToast] = useState(null);
+
+  // A single cheap poll drives the sidebar so every view does not need its own.
+  const { data } = usePoll('/admin/api/ops/overview', 10000);
+  const controls = (data && data.controls) || {};
+  const deadTotal = ((data && data.deadLetters) || [])
+    .reduce((sum, row) => sum + Number(row.n || 0), 0);
+  const ingestMinutes = data && data.freshness ? data.freshness.ingestMinutes : null;
+
+  const halted = Boolean(controls.killSwitch);
+  const health = {
+    deadTotal,
+    halted,
+    ingestMinutes,
+    tone: halted ? 'bad' : (deadTotal > 0 ? 'warn' : 'ok'),
+    label: halted ? 'trading halted' : (controls.mode ? `${controls.mode} mode` : 'connecting…'),
+  };
+
+  const active = ROUTES.find((r) => r.id === route) || ROUTES[0];
+  const View = active.view;
+
+  return html`
+    <div class="shell">
+      <${Nav} route=${active.id} health=${health} />
+      <main class="main">
+        <header class="topbar">
+          <h1>${active.label}</h1>
+          <span class="grow"></span>
+          ${halted && html`<span class="pill bad">kill switch engaged</span>`}
+        </header>
+        <${View} notify=${setToast} />
+      </main>
+      <${Toast} toast=${toast} />
+    </div>`;
+}
+
+ReactDOM.createRoot(document.getElementById('root')).render(html`<${App} />`);