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
@@ -0,0 +1,156 @@
|
||||
import { html, usePoll, useState, num, compact, ago } from './core.js';
|
||||
import { Card, Stat, Pill, Skeleton, Empty } from './ui.js';
|
||||
|
||||
const PAGE = 50;
|
||||
|
||||
function shortUrl(url) {
|
||||
try { return new URL(url).hostname.replace(/^www\./, ''); }
|
||||
catch (error) { return String(url || '').slice(0, 40); }
|
||||
}
|
||||
|
||||
function statusTone(status) {
|
||||
if (status === 'ready') return 'ok';
|
||||
if (status === 'failed') return 'bad';
|
||||
if (status === 'pending') return 'warn';
|
||||
return '';
|
||||
}
|
||||
|
||||
// One list component behind both Articles and Events. They differ only in columns
|
||||
// and endpoint, and having two near-identical files is how they drift apart.
|
||||
function ListView({ title, path, columns, searchable }) {
|
||||
const [offset, setOffset] = useState(0);
|
||||
const [query, setQuery] = useState('');
|
||||
const [applied, setApplied] = useState('');
|
||||
|
||||
const url = `${path}?limit=${PAGE}&offset=${offset}${applied ? `&q=${encodeURIComponent(applied)}` : ''}`;
|
||||
const { data, error, loading } = usePoll(url, 20000);
|
||||
|
||||
const rows = (data && data.rows) || [];
|
||||
const total = data && data.total;
|
||||
|
||||
return html`
|
||||
<div class="grid" style="gap:14px">
|
||||
<${Card} title=${title}
|
||||
right=${html`<span class="muted small">${total === undefined ? '' : `${num(total)} total`}</span>`}>
|
||||
${searchable && html`
|
||||
<form class="row" style="gap:8px; margin-bottom:12px"
|
||||
onSubmit=${(e) => { e.preventDefault(); setOffset(0); setApplied(query.trim()); }}>
|
||||
<input style="flex:1" placeholder="search title…" value=${query}
|
||||
onInput=${(e) => setQuery(e.target.value)} />
|
||||
<button class="sm" type="submit">search</button>
|
||||
${applied && html`<button class="sm" type="button"
|
||||
onClick=${() => { setQuery(''); setApplied(''); setOffset(0); }}>clear</button>`}
|
||||
</form>`}
|
||||
|
||||
${error && html`<div class="muted small" style="color:var(--bad); margin-bottom:10px">${error}</div>`}
|
||||
|
||||
${loading && !data
|
||||
? html`<${Skeleton} rows=${6} />`
|
||||
: !rows.length
|
||||
? html`<${Empty}>Nothing here.<//>`
|
||||
: html`
|
||||
<div class="table-scroll">
|
||||
<table>
|
||||
<thead><tr>${columns.map((c) => html`
|
||||
<th key=${c.key} class=${c.num ? 'num' : ''}>${c.label}</th>`)}</tr></thead>
|
||||
<tbody>
|
||||
${rows.map((row) => html`
|
||||
<tr key=${row.id}>
|
||||
${columns.map((c) => html`
|
||||
<td key=${c.key} class=${c.num ? 'num' : ''}>${c.render(row)}</td>`)}
|
||||
</tr>`)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>`}
|
||||
|
||||
<div class="row spread" style="margin-top:12px">
|
||||
<span class="muted small mono">
|
||||
${rows.length ? `${num(offset + 1)}–${num(offset + rows.length)}` : '—'}
|
||||
</span>
|
||||
<span class="row" style="gap:8px">
|
||||
<button class="sm" disabled=${offset === 0}
|
||||
onClick=${() => setOffset(Math.max(0, offset - PAGE))}>prev</button>
|
||||
<button class="sm" disabled=${!(data && data.hasMore)}
|
||||
onClick=${() => setOffset(offset + PAGE)}>next</button>
|
||||
</span>
|
||||
</div>
|
||||
<//>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
export const Articles = () => html`<${ListView}
|
||||
title="Articles" path="/admin/api/articles" searchable
|
||||
columns=${[
|
||||
{ key: 'title', label: 'title', render: (r) => html`
|
||||
<a href=${r.url} target="_blank" rel="noopener noreferrer"
|
||||
style="color:var(--ink); text-decoration:none">${r.title || '(untitled)'}</a>
|
||||
<div class="muted small mono" style="margin-top:3px">${shortUrl(r.url)}</div>` },
|
||||
{ key: 'source', label: 'source', render: (r) => html`<span class="small">${r.source}</span>` },
|
||||
{ key: 'status', label: 'content', render: (r) => html`
|
||||
<${Pill} tone=${statusTone(r.content_status)}>${r.content_status || 'unfetched'}<//>` },
|
||||
{ key: 'pub', label: 'published', render: (r) => html`
|
||||
<span class="mono small nowrap">${String(r.pub_date_effective || r.pub_date || '').slice(0, 16)}</span>` },
|
||||
]} />`;
|
||||
|
||||
export const Events = () => html`<${ListView}
|
||||
title="Events" path="/admin/api/events"
|
||||
columns=${[
|
||||
{ key: 'title', label: 'title', render: (r) => r.title || '(untitled)' },
|
||||
{ key: 'articles', label: 'articles', num: true, render: (r) => num(r.article_count) },
|
||||
{ key: 'created', label: 'created', render: (r) => html`
|
||||
<span class="mono small nowrap">${String(r.created_at || '').slice(0, 16)}</span>` },
|
||||
]} />`;
|
||||
|
||||
export function Intelligence() {
|
||||
const summary = usePoll('/admin/api/stats/summary', 15000);
|
||||
const intel = usePoll('/admin/api/intelligence/stats', 15000);
|
||||
|
||||
const s = summary.data || {};
|
||||
const i = intel.data || {};
|
||||
|
||||
return html`
|
||||
<div class="grid" style="gap:14px">
|
||||
<div class="grid cols-3">
|
||||
<${Stat} label="Articles" value=${compact(s.total)}
|
||||
sub=${`${compact(s.withContent)} with content · ${compact(s.withEmbedding)} embedded`} />
|
||||
<${Stat} label="Events" value=${compact(s.eventCount)} sub="clustered" />
|
||||
<${Stat} label="Knowledge rows" value=${compact(i.knowledge)}
|
||||
sub=${`${compact(i.companies)} companies tracked`} />
|
||||
</div>
|
||||
|
||||
<div class="grid cols-2">
|
||||
<${Card} title="Worker rates" right=${html`<span class="muted small">rows written</span>`}>
|
||||
${!(i.workerRates || []).length
|
||||
? html`<${Empty}>No worker activity recorded.<//>`
|
||||
: html`
|
||||
<table>
|
||||
<thead><tr><th>worker</th><th class="num">last 1m</th><th class="num">last 5m</th></tr></thead>
|
||||
<tbody>
|
||||
${i.workerRates.map((w) => html`
|
||||
<tr key=${w.worker}>
|
||||
<td class="mono">${w.worker}</td>
|
||||
<td class="num">${num(w.n1m)}</td>
|
||||
<td class="num">${num(w.n5m)}</td>
|
||||
</tr>`)}
|
||||
</tbody>
|
||||
</table>`}
|
||||
<//>
|
||||
|
||||
<${Card} title="Article queue">
|
||||
${!(i.queue || []).length
|
||||
? html`<${Empty}>Queue is empty.<//>`
|
||||
: html`
|
||||
<table>
|
||||
<thead><tr><th>status</th><th class="num">n</th></tr></thead>
|
||||
<tbody>
|
||||
${i.queue.map((q) => html`
|
||||
<tr key=${q.status}>
|
||||
<td><${Pill} tone=${statusTone(q.status)}>${q.status}<//></td>
|
||||
<td class="num">${num(q.n)}</td>
|
||||
</tr>`)}
|
||||
</tbody>
|
||||
</table>`}
|
||||
<//>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
Reference in New Issue
Block a user