hyperhive/frontend/packages/dashboard/src/logs.js
iris e797b75ca9 dashboard: stream the running rebuild's build log inline in the queue
The C0R3 rebuild queue only linked out to the logs page (logs →). Add an
inline live-log panel under the queue that streams the currently-running
rebuild's build output, so the operator watches progress without leaving the
page.

Extract the build-log SSE streaming logic (append stdout/stderr, sticky-bottom
scroll, stderr separator, reconnect-replay reset, done/error handling) into a
shared `openBuildLogStream(id, pre, {onDone, onError})` in common.js, and use it
from BOTH the L0GS page BUILD tab (logs.js, previously inline) and the new C0R3
panel (core.js) — one implementation, no duplication.

The panel is one persistent instance keyed to the running entry's build_log_id
(the queue runs one build at a time), in its own container (#rebuild-live-log)
outside rebuild-queue-section so the queue's per-row re-render — rows rebuild as
the build step advances — never tears down the open stream; it reconnects only
when the running build_log_id changes and won't reopen a stream that already
sent done. Collapsible, live/ok/fail badge, raw download. Hidden when nothing
is building; each row keeps its logs → link for full history.

Frontend-only — no backend change (endpoint + build_log_id already existed).
Closes #1860.
2026-06-22 01:55:38 +02:00

515 lines
21 KiB
JavaScript

// /logs.html entry point: log viewer with four sub-tabs (BUILD, AGENT,
// SYSTEM, AUDIT).
// BUILD — all-agents build log history, backed by GET /api/build-logs
// AGENT — per-container journald viewer, backed by GET /api/journal/{name}
// SYSTEM — host service logs, backed by GET /api/journal-host
// AUDIT — agent-initiated privileged-action trail, GET /api/audit-log;
// live-appends via the `audit_entry_added` /dashboard/stream event
//
// Tab routing via URL hash (#build, #agent, #system, #audit). Default: #build.
//
// Live improvements:
// - Live build output auto-scrolls to the bottom (sticky-bottom) unless
// the operator has manually scrolled up.
// - Running builds show an elapsed-time counter in the row header that
// ticks every second.
// - The build list auto-refreshes (debounced 2s) when rebuild_queue_changed
// fires from the dashboard SSE stream, so new log entries appear without
// a manual page refresh.
//
// URL params `?agent=name` and `?unit=svc` pre-select the agent + unit on
// the AGENT tab (deep-link from other pages, e.g. the per-agent ⋮ menu).
// Last-fetched timestamp is shown next to the refresh button on AGENT +
// SYSTEM tabs so the operator knows how stale the output is.
import {
$, el, fmtAgeSecs, openStream, openBuildLogStream, initServerWarnings,
} from './common.js';
import { createTabStrip } from '@hive/shared/tabs.js';
(() => {
initServerWarnings();
// ─── tab routing ──────────────────────────────────────────────────────
// The shared hash-routed tab strip (@hive/shared/tabs.js) handles the
// active toggle + aria-selected + pane visibility + the SYSTEM lazy
// fetch via onShow. Constructed in the init block below (after the
// fetch fns + element refs it depends on exist). `logTabs.active()`
// replaces the old `activeTab()`.
let logTabs;
// ─── helpers ──────────────────────────────────────────────────────────
// started_at / finished_at are unix seconds (i64), not milliseconds.
function fmtTs(unixSecs) {
if (!unixSecs) return '';
const age = Math.floor(Date.now() / 1000) - unixSecs;
return fmtAgeSecs(Math.max(0, age)) + ' ago';
}
function fmtDuration(secs) {
if (secs < 60) return secs + 's';
const m = Math.floor(secs / 60), s = secs % 60;
return m + 'm ' + s + 's';
}
// ─── BUILD tab ────────────────────────────────────────────────────────
const buildList = $('build-list');
const buildRefresh = $('build-refresh');
async function fetchBuild() {
if (!buildList) return;
buildList.replaceChildren();
buildList.append(el('p', { class: 'meta' }, 'loading…'));
try {
const resp = await fetch('/api/build-logs?limit=30');
if (!resp.ok) throw new Error('http ' + resp.status);
const rows = await resp.json();
buildList.replaceChildren();
if (!rows || rows.length === 0) {
buildList.append(el('p', { class: 'meta' }, '(no build logs yet)'));
return;
}
const ul = el('ul', { class: 'build-logs-list' });
for (const h of rows) {
const li = el('li', { class: 'build-logs-item', 'data-log-id': String(h.id) });
// status is null while running, 'ok'/'fail' when finished.
const live = !h.status;
const ok = h.status === 'ok';
const statusClass = live ? 'badge badge-running' : ok ? 'badge badge-ok' : 'badge badge-fail';
const statusLabel = live ? 'live' : ok ? 'ok' : 'fail';
const age = h.finished_at ? fmtTs(h.finished_at) : (live ? '' : fmtTs(h.started_at));
const runtime = h.runtime_secs != null
? el('span', { class: 'build-logs-runtime meta' }, fmtDuration(Math.max(0, h.runtime_secs)))
: live
? el('span', { class: 'build-logs-runtime meta build-logs-live-dur' }, '…')
: el('span', { class: 'build-logs-runtime meta' }, '');
// For live builds, start an elapsed-time ticker immediately in the
// row header so the operator can see how long the build has been
// running without opening the log detail.
let durTimer = null;
if (live && h.started_at) {
const updateDur = () => {
const elapsed = Math.floor(Date.now() / 1000) - h.started_at;
runtime.textContent = fmtDuration(Math.max(0, elapsed));
};
updateDur(); // show initial value right away
durTimer = setInterval(updateDur, 1000);
}
const rowBtn = el('button', {
type: 'button',
class: 'build-logs-row-btn',
'aria-expanded': 'false',
},
el('span', { class: statusClass }, statusLabel),
el('span', { class: 'build-logs-agent' }, h.agent),
runtime,
el('span', { class: 'build-logs-kind' }, h.kind),
el('span', { class: 'build-logs-age meta' }, age),
el('span', { class: 'build-logs-cmdline meta' }, h.cmdline),
);
const detail = el('div', { class: 'build-logs-detail' });
detail.hidden = true;
let streamEs = null;
rowBtn.addEventListener('click', async () => {
const expanded = rowBtn.getAttribute('aria-expanded') === 'true';
rowBtn.setAttribute('aria-expanded', String(!expanded));
detail.hidden = expanded;
if (expanded) {
if (streamEs) { streamEs.close(); streamEs = null; }
return;
}
// already loaded?
if (detail.dataset.loaded) return;
detail.replaceChildren();
detail.append(
el('a', {
href: '/api/build-logs/id/' + h.id + '/raw',
download: 'build-log-' + h.id + '.txt',
class: 'build-logs-dl',
}, '↓ download raw'),
);
if (live) {
const pre = el('pre', { class: 'build-logs-output build-logs-live' }, '');
const badge = el('span', { class: 'build-logs-live-badge badge badge-running' }, 'live');
detail.append(badge, pre);
// Stream via the shared helper (also used by the C0R3 rebuild-queue
// live-log panel); it owns the append / sticky-scroll /
// stderr-separator / reconnect-replay logic. We wire the badge +
// the row's elapsed-time ticker here.
streamEs = openBuildLogStream(h.id, pre, {
onDone: (status) => {
if (durTimer) { clearInterval(durTimer); durTimer = null; }
if (h.started_at) {
const elapsed = Math.floor(Date.now() / 1000) - h.started_at;
runtime.textContent = fmtDuration(Math.max(0, elapsed));
}
badge.className = status === 'ok' ? 'badge badge-ok' : 'badge badge-fail';
badge.textContent = status;
streamEs = null;
detail.dataset.loaded = '1';
},
onError: () => {
if (durTimer) { clearInterval(durTimer); durTimer = null; }
badge.textContent = 'stream error';
badge.className = 'badge badge-fail';
streamEs = null;
},
});
} else {
const pre = el('pre', { class: 'build-logs-output' }, 'fetching…');
detail.append(pre);
try {
const r2 = await fetch('/api/build-logs/id/' + h.id);
if (!r2.ok) {
pre.textContent = 'error ' + r2.status;
} else {
const full = await r2.json();
const out = [full.stdout, full.stderr].filter(Boolean).join('\n--- stderr ---\n');
pre.textContent = out || '(empty)';
}
detail.dataset.loaded = '1';
} catch (err) {
pre.textContent = 'fetch failed: ' + err;
}
}
});
li.append(rowBtn, detail);
ul.append(li);
}
buildList.append(ul);
// Deep-link: if the URL contains ?id=N, auto-expand that log entry
// so a `logs →` link from the rebuild-queue panel drops the operator
// straight into the live output without extra clicks.
const deepId = new URLSearchParams(location.search).get('id');
if (deepId) {
const target = ul.querySelector('[data-log-id="' + deepId + '"]');
if (target) {
const btn = target.querySelector('.build-logs-row-btn');
if (btn) {
btn.click();
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
}
}
} catch (err) {
buildList.replaceChildren();
buildList.append(el('p', { class: 'meta' }, 'fetch failed: ' + err));
}
}
if (buildRefresh) buildRefresh.addEventListener('click', fetchBuild);
// Auto-refresh the build list when the dashboard SSE stream signals that
// the rebuild queue changed — this surfaces new log entries and status
// changes without needing a manual page refresh. Debounce 2s so a burst
// of rapid queue mutations only triggers one fetch.
{
let buildRefreshTimer = null;
const debouncedRefreshBuild = () => {
if (logTabs.active() !== 'build') return;
if (buildRefreshTimer) clearTimeout(buildRefreshTimer);
buildRefreshTimer = setTimeout(fetchBuild, 2000);
};
const es = openStream('/api/dashboard/stream');
if (es) {
es.onmessage = (e) => {
let ev;
try { ev = JSON.parse(e.data); } catch { return; }
if (ev.kind === 'rebuild_queue_changed') debouncedRefreshBuild();
else if (ev.kind === 'audit_entry_added') onAuditEntryAdded(ev);
};
}
}
// ─── AGENT tab ────────────────────────────────────────────────────────
const agentSelect = $('agent-select');
const agentUnitSelect = $('agent-unit-select');
const agentRefresh = $('agent-refresh');
const agentOutput = $('agent-output');
const agentFetchTs = $('agent-fetch-ts');
// Format a last-fetched timestamp: "fetched just now" / "fetched 3m ago".
function fmtFetchTs(fetchedAt) {
const ageSecs = Math.floor((Date.now() - fetchedAt) / 1000);
return 'fetched ' + (ageSecs < 5 ? 'just now' : fmtAgeSecs(ageSecs) + ' ago');
}
// Populate agent selector from /api/state, then honour any `?agent=` /
// `?unit=` URL params (used by the per-agent ⋮ menu's deep-link).
async function loadAgentList() {
try {
const resp = await fetch('/api/state');
if (!resp.ok) return;
const state = await resp.json();
if (!agentSelect) return;
agentSelect.replaceChildren();
agentSelect.append(el('option', { value: '' }, '— select agent —'));
for (const c of (state.containers || [])) {
agentSelect.append(el('option', { value: c.name }, c.name));
}
// Deep-link: honour ?agent= and ?unit= URL params.
const urlAgent = new URLSearchParams(location.search).get('agent');
const urlUnit = new URLSearchParams(location.search).get('unit');
if (urlAgent) {
const found = Array.from(agentSelect.options).some((o) => o.value === urlAgent);
if (found) {
agentSelect.value = urlAgent;
if (urlUnit && agentUnitSelect) {
const unitFound = Array.from(agentUnitSelect.options)
.some((o) => o.value === urlUnit);
if (unitFound) agentUnitSelect.value = urlUnit;
}
fetchAgent();
}
}
} catch { /**/ }
}
let agentFetching = false;
let agentLastFetch = 0;
async function fetchAgent() {
if (!agentSelect || !agentOutput) return;
const name = agentSelect.value;
if (!name) { agentOutput.textContent = 'select an agent above'; return; }
if (agentFetching) return;
agentFetching = true;
agentOutput.textContent = 'fetching…';
if (agentFetchTs) agentFetchTs.hidden = true;
const unit = agentUnitSelect ? agentUnitSelect.value : '';
const params = new URLSearchParams({ lines: '500' });
if (unit) params.set('unit', unit);
try {
const resp = await fetch('/api/journal/' + encodeURIComponent(name) + '?' + params);
const text = await resp.text();
agentOutput.textContent = resp.ok ? (text || '(empty)') : 'error ' + resp.status + '\n' + text;
agentOutput.scrollTop = agentOutput.scrollHeight;
if (resp.ok) {
agentLastFetch = Date.now();
if (agentFetchTs) {
agentFetchTs.textContent = fmtFetchTs(agentLastFetch);
agentFetchTs.hidden = false;
}
}
} catch (err) {
agentOutput.textContent = 'fetch failed: ' + err;
} finally {
agentFetching = false;
}
}
if (agentSelect) agentSelect.addEventListener('change', fetchAgent);
if (agentUnitSelect) agentUnitSelect.addEventListener('change', fetchAgent);
if (agentRefresh) agentRefresh.addEventListener('click', fetchAgent);
// ─── SYSTEM tab ───────────────────────────────────────────────────────
const systemUnitSelect = $('system-unit-select');
const systemRefresh = $('system-refresh');
const systemOutput = $('system-output');
const systemFetchTs = $('system-fetch-ts');
let systemFetching = false;
let systemLastFetch = 0;
async function fetchSystem() {
if (!systemOutput) return;
if (systemFetching) return;
systemFetching = true;
systemOutput.textContent = 'fetching…';
if (systemFetchTs) systemFetchTs.hidden = true;
const unit = systemUnitSelect ? systemUnitSelect.value : 'hive-c0re.service';
const params = new URLSearchParams({ lines: '500' });
if (unit) params.set('unit', unit);
try {
const resp = await fetch('/api/journal-host?' + params);
const text = await resp.text();
systemOutput.textContent = resp.ok ? (text || '(empty)') : 'error ' + resp.status + '\n' + text;
systemOutput.scrollTop = systemOutput.scrollHeight;
if (resp.ok) {
systemLastFetch = Date.now();
if (systemFetchTs) {
systemFetchTs.textContent = fmtFetchTs(systemLastFetch);
systemFetchTs.hidden = false;
}
}
} catch (err) {
systemOutput.textContent = 'fetch failed: ' + err;
} finally {
systemFetching = false;
}
}
if (systemUnitSelect) systemUnitSelect.addEventListener('change', fetchSystem);
if (systemRefresh) systemRefresh.addEventListener('click', fetchSystem);
// ─── AUDIT tab ──────────────────────────────────────────────────────
// Operator-visible trail of agent-initiated privileged actions, backed
// by GET /api/audit-log → { entries: [...], total: N } (entries
// newest-first, server-clamped to 500; `total` drives "latest 500 of N").
// Per-entry: { id, ts_unix (secs), agent, action, target, outcome, detail }.
// outcome is 'ok' | 'err'; a capability denial is 'err' with detail
// starting "denied:" — coloured amber to read apart from an execution
// failure. Lazy-fetched on tab show (like SYSTEM); filter is a
// client-side substring on the cached rows.
const auditList = $('audit-list');
const auditFilter = $('audit-filter');
const auditRefresh = $('audit-refresh');
const auditCount = $('audit-count');
let auditEntries = [];
let auditTotal = 0;
let auditFetching = false;
// ts_unix is unix seconds — fmtAgeSecs wants an age in seconds.
function auditFmtWhen(tsUnix) {
if (!tsUnix) return '';
const age = Math.floor(Date.now() / 1000) - tsUnix;
return fmtAgeSecs(Math.max(0, age)) + ' ago';
}
// outcome → badge. 'ok' green; an 'err' whose detail starts "denied:" is a
// capability refusal (amber, labelled "denied"); other 'err' red. The
// literal outcome is the fallback label so a new value still renders.
function auditOutcomeBadge(outcome, detail) {
const denied = outcome === 'err'
&& typeof detail === 'string' && detail.startsWith('denied:');
const cls = outcome === 'ok'
? 'audit-outcome audit-outcome-ok'
: denied
? 'audit-outcome audit-outcome-denied'
: 'audit-outcome audit-outcome-err';
return el('span', { class: cls }, denied ? 'denied' : (outcome || '?'));
}
function auditMatches(e, q) {
if (!q) return true;
return `${e.agent || ''} ${e.action || ''} ${e.target || ''} ${e.detail || ''}`
.toLowerCase().includes(q);
}
function renderAudit() {
if (!auditList) return;
const q = (auditFilter ? auditFilter.value : '').trim().toLowerCase();
const rows = auditEntries.filter((e) => auditMatches(e, q));
if (auditCount) {
const shown = auditEntries.length;
const clamped = auditTotal > shown;
let txt = clamped
? `latest ${shown} of ${auditTotal}`
: `${shown} entr${shown === 1 ? 'y' : 'ies'}`;
if (q) txt += ` · ${rows.length} match${rows.length === 1 ? '' : 'es'}`;
auditCount.textContent = txt;
}
auditList.replaceChildren();
if (rows.length === 0) {
auditList.append(el('p', { class: 'meta' },
q ? '(no matching entries)' : '(no privileged actions recorded yet)'));
return;
}
const table = el('table', { class: 'audit-table' });
table.append(el('thead', {},
el('tr', {},
el('th', { class: 'audit-when-th' }, 'when'),
el('th', {}, 'agent'),
el('th', {}, 'action'),
el('th', {}, 'target'),
el('th', { class: 'audit-outcome-th' }, 'outcome'),
el('th', {}, 'detail'),
)));
const tbody = el('tbody', {});
for (const e of rows) {
tbody.append(el('tr', {},
el('td', {
class: 'audit-when meta',
title: e.ts_unix ? new Date(e.ts_unix * 1000).toISOString() : '',
}, auditFmtWhen(e.ts_unix)),
el('td', { class: 'audit-agent' }, e.agent || ''),
el('td', { class: 'audit-action' }, e.action || ''),
el('td', { class: 'audit-target' }, e.target || ''),
el('td', { class: 'audit-outcome-td' }, auditOutcomeBadge(e.outcome, e.detail)),
el('td', { class: 'audit-detail meta' }, e.detail || ''),
));
}
table.append(tbody);
const wrap = el('div', { class: 'audit-table-wrap' });
wrap.append(table);
auditList.append(wrap);
}
async function fetchAudit() {
if (!auditList || auditFetching) return;
auditFetching = true;
try {
const resp = await fetch('/api/audit-log');
if (!resp.ok) throw new Error('http ' + resp.status);
const data = await resp.json();
auditEntries = Array.isArray(data.entries) ? data.entries : [];
auditTotal = typeof data.total === 'number' ? data.total : auditEntries.length;
renderAudit();
} catch (err) {
auditList.replaceChildren();
auditList.append(el('p', { class: 'meta' }, 'fetch failed: ' + err));
} finally {
auditFetching = false;
}
}
if (auditRefresh) auditRefresh.addEventListener('click', fetchAudit);
if (auditFilter) auditFilter.addEventListener('input', renderAudit);
// Live-append: an `audit_entry_added` event on /dashboard/stream carries a
// new row flattened at the top level ({ kind, seq, id, ts_unix, agent,
// action, target, outcome, detail }). Prepend it (newest-first), de-duped
// by id against whatever the cold fetch already returned, and bump the
// total so the "latest N of M" header stays right. Re-render only while
// the AUDIT tab is in view; otherwise the next tab-show fetch is
// authoritative anyway. Wired into the shared stream onmessage above.
function onAuditEntryAdded(ev) {
if (auditEntries.some((e) => e.id === ev.id)) return;
auditEntries.unshift({
id: ev.id, ts_unix: ev.ts_unix, agent: ev.agent, action: ev.action,
target: ev.target, outcome: ev.outcome, detail: ev.detail,
});
auditTotal += 1;
if (logTabs.active() === 'audit') renderAudit();
}
// ─── init ─────────────────────────────────────────────────────────────
// Wire the shared tab strip now that fetchSystem + the element refs it
// needs are defined. Its initial show() paints the active pane and, if
// the deep-linked tab is SYSTEM, kicks off the lazy fetch via onShow.
logTabs = createTabStrip(document.getElementById('logs-tabbar'), {
defaultId: 'build',
onShow: (id) => {
if (id === 'system') fetchSystem();
else if (id === 'audit') fetchAudit();
},
});
loadAgentList();
fetchBuild();
// Tick the last-fetched timestamps every 30s so "fetched 1m ago" stays
// accurate without a manual refresh.
setInterval(() => {
if (agentLastFetch && agentFetchTs && !agentFetchTs.hidden) {
agentFetchTs.textContent = fmtFetchTs(agentLastFetch);
}
if (systemLastFetch && systemFetchTs && !systemFetchTs.hidden) {
systemFetchTs.textContent = fmtFetchTs(systemLastFetch);
}
// Keep the audit "ago" column honest while that tab is in view.
if (auditEntries.length && logTabs.active() === 'audit') renderAudit();
}, 30_000);
})();