adispatchd 0.0.0-stage → 0.1.0

package/dist/ui/public/js/client/pages/run.js

@@ -0,0 +1,367 @@
+/**
+ * Run detail (Spec §16): all run fields, paged logs with tail/follow, events,
+ * lifecycle actions, cancel / recovery retry.
+ */
+import { api, qs, seg } from '../api.js';
+import { h, replaceChildren, rerender } from '../dom.js';
+import { buildHash } from '../../shared/route.js';
+import { createRefresher } from '../../shared/throttle.js';
+import { LogWindow } from '../../shared/logs.js';
+import { EventList } from '../../shared/events.js';
+import { eventSummary, formatBytes, formatDuration, stateTone } from '../../shared/format.js';
+import { messageRunId } from '../page.js';
+import { act, badge, button, confirmDialog, errorBox, externalLink, jsonBlock, kv, loading, routeLink, runLink, runOutcomeBadges, section, table, text, time } from '../ui.js';
+import { cancelRunButton } from './dashboard.js';
+const TABS = ['overview', 'logs', 'events', 'actions'];
+/** Lifecycle action table (shared with Failed Actions). */
+export function actionButtons(a, after) {
+    if (a.status !== 'failed')
+        return null;
+    const retry = button('Retry', () => void act(retry, () => api.post(`/api/v1/actions/${a.id}/retry`), 'Retry started').then(after), { kind: 'primary', disabled: a.busy === true, title: a.busy ? 'The lifecycle chain of this run is busy' : 'Run the action again (fresh attempt budget)' });
+    const skip = button('Skip', () => {
+        void (async () => {
+            const r = await confirmDialog({
+                title: 'Skip lifecycle action?',
+                message: h('p', null, `Action #${a.id} (${a.hook} › ${a.name ?? a.type}) is marked as skipped and the hook chain continues with the next action.`),
+                confirmLabel: 'Skip action',
+                danger: true,
+            });
+            if (r.ok)
+                await act(skip, () => api.post(`/api/v1/actions/${a.id}/skip`), 'Action skipped');
+            after();
+        })();
+    }, { disabled: a.busy === true });
+    return h('span', { class: 'actions' }, retry, skip);
+}
+function errorText(e) {
+    if (e === null || e === undefined)
+        return null;
+    if (typeof e === 'string')
+        return e;
+    if (typeof e === 'object' && typeof e.message === 'string')
+        return e.message;
+    return JSON.stringify(e);
+}
+export function actionsTable(actions, after, opts = {}) {
+    return table([...(opts.showRun ? ['Run'] : []), 'Hook', '#', 'Action', 'State', 'Attempts', 'Last error', 'Updated', ''], actions.map((a) => [
+        ...(opts.showRun ? [a.run ? h('span', null, runLink(a.runId), h('br'), h('small', { class: 'muted' }, a.run.workflowName ?? a.run.workflowId)) : runLink(a.runId)] : []),
+        a.hook,
+        String(a.ordinal + 1),
+        h('span', null, a.name ?? a.type, a.name ? h('small', { class: 'muted' }, ` (${a.type})`) : null),
+        badge(a.status, stateTone(a.status)),
+        a.attemptsDetail && a.attemptsDetail.length > 0
+            ? h('details', null, h('summary', null, String(a.attempts)), h('ol', { class: 'attempts' }, a.attemptsDetail.map((t) => h('li', null, time(t.startedAt), ' ', badge(t.outcome ?? 'running', stateTone(t.outcome ?? 'running')), errorText(t.error) ? h('div', { class: 'error-text' }, errorText(t.error)) : null))))
+            : String(a.attempts),
+        errorText(a.lastError) ? h('div', { class: 'error-text' }, errorText(a.lastError)) : text(null),
+        time(a.updatedAt),
+        actionButtons(a, after),
+    ]), { empty: 'No lifecycle actions.' });
+}
+export const runPage = (ctx, runId) => {
+    ctx.setTitle(`Run ${runId}`);
+    const tab = TABS.includes(ctx.route.query.tab) ? ctx.route.query.tab : 'overview';
+    const header = h('div', { class: 'run-header' }, loading());
+    const tabs = h('nav', { class: 'tabs', 'aria-label': 'Run sections' }, TABS.map((t) => h('a', { href: buildHash(['runs', runId], { tab: t }), class: t === tab ? 'active' : null, 'aria-current': t === tab ? 'page' : null }, t[0].toUpperCase() + t.slice(1))));
+    const body = h('div', null);
+    const el = h('div', { class: 'page' }, h('p', { class: 'crumbs' }, routeLink(['runs'], '← Runs')), header, tabs, body);
+    let detail = null;
+    // ---------------------------------------------------------------- header
+    const renderHeader = (d) => {
+        const btns = h('div', { class: 'actions' });
+        const cancel = cancelRunButton(d, () => refresher.trigger());
+        if (cancel)
+            btns.appendChild(cancel);
+        if (d.status === 'recovery_pending') {
+            const b = button('Retry recovery', () => {
+                void (async () => {
+                    const r = await confirmDialog({
+                        title: 'Retry recovery?',
+                        message: h('p', null, 'Recovery checks again whether the worker process is still running. Only tick the box if you have verified that the process is gone.'),
+                        confirmLabel: 'Retry recovery',
+                        checkbox: { label: 'I verified the process is gone (assumeGone)' },
+                    });
+                    if (r.ok)
+                        await act(b, () => api.post(`/api/v1/runs/${seg(d.id)}/recovery/retry`, { assumeGone: r.checked }), 'Recovery retry started');
+                    refresher.trigger();
+                })();
+            }, { kind: 'primary' });
+            btns.appendChild(b);
+        }
+        rerender(header, h('h1', null, d.workflowName ?? d.workflowId, ' ', h('small', { class: 'muted' }, h('code', null, d.id))), h('div', { class: 'run-status' }, runOutcomeBadges(d), d.statusMessage && d.active ? h('span', { class: 'status-message' }, d.statusMessage) : null), btns);
+    };
+    // -------------------------------------------------------------- overview
+    const renderOverview = (d) => {
+        const cmd = d.command ? [d.command.command ?? '', ...(Array.isArray(d.command.args) ? d.command.args.map((a) => String(a)) : [])].join(' ') : null;
+        rerender(body, h('div', { class: 'grid' }, section('Run', kv([
+            ['Name', text(d.workflowName)],
+            ['Run ID', h('code', null, d.id)],
+            ['Workflow', routeLink(['workflows', d.workflowId], d.workflowId)],
+            ['Identity / role', text(d.identity)],
+            ['Trigger', h('span', null, d.triggerType, d.scheduledFor ? ` (slot ${d.scheduledFor})` : '')],
+            ['Source item', d.sourceUrl ? externalLink(d.sourceUrl) : text(d.sourceItemKey)],
+            ['Technical state', badge(d.status, d.active ? 'info' : 'muted')],
+            ['Business result', d.businessResult ? badge(d.businessResult, d.businessResult === 'success' ? 'ok' : 'warn') : text(null)],
+            ['Final reason', text(d.finalReason)],
+            ['Lifecycle', d.lifecycleStatus ? (d.lifecycleFailed ? badge('lifecycle failed', 'error') : badge(d.lifecycleStatus, stateTone(d.lifecycleStatus))) : text(null)],
+            ['Exit code', text(d.exitCode)],
+        ])), section('Timing & process', kv([
+            ['Created', time(d.createdAt)],
+            ['Started', time(d.startedAt)],
+            ['Finished', time(d.finishedAt)],
+            ['Duration', formatDuration(d.durationMs ?? (d.startedAt && d.active ? Date.now() - Date.parse(d.startedAt) : null))],
+            ['Working directory', d.workingDirectory ? h('code', null, d.workingDirectory) : text(null)],
+            ['Command', cmd ? h('code', { class: 'wrap' }, cmd) : text(null)],
+            ['PID', text(d.pid)],
+            ['Lock', text(d.lockKey)],
+            ['Config', d.configVersion !== null ? `v${d.configVersion}${d.configHash ? ` (${d.configHash.slice(0, 12)})` : ''}` : text(null)],
+            ['Logs', `stdout ${formatBytes(d.logs.stdout.size)}${d.logs.stdout.truncated ? ' (truncated)' : ''}, stderr ${formatBytes(d.logs.stderr.size)}${d.logs.stderr.truncated ? ' (truncated)' : ''}`],
+        ])), d.block
+            ? h('section', { class: 'card span-all' }, h('h2', null, 'Active retry block'), h('p', null, `Internal retry block #${d.block.id} of this scope (${d.block.failureCount} technical failures): ${d.block.reason} `, routeLink(['blocked'], 'Blocked →')))
+            : null, d.error ? h('section', { class: 'card span-all' }, h('h2', null, 'Technical diagnosis'), jsonBlock(d.error)) : null, h('section', { class: 'card span-all' }, h('h2', null, 'Parameters'), jsonBlock(d.parameters && Object.keys(d.parameters).length ? d.parameters : null)), h('section', { class: 'card span-all' }, h('h2', null, 'Result (result file)'), d.resultFileError ? h('div', { class: 'alert alert-warn' }, `Result file unreadable: ${d.resultFileError}`) : null, jsonBlock(d.resultFile ?? d.result)), h('section', { class: 'card span-all' }, h('details', null, h('summary', null, h('strong', null, 'Input JSON (context.json)')), d.inputError ? h('div', { class: 'alert alert-warn' }, d.inputError) : null, jsonBlock(d.input)))));
+    };
+    // ------------------------------------------------------------------ logs
+    let stream = ctx.route.query.stream === 'stderr' ? 'stderr' : 'stdout';
+    const win = new LogWindow();
+    let follow = true;
+    /** Generation of the log window (bumped on stream switch / reset); in-flight responses of older generations are dropped. */
+    let logGen = 0;
+    /** Generation with a load in flight (-1 = none). */
+    let logBusyGen = -1;
+    const logPre = h('pre', { class: 'log', tabindex: 0, 'aria-label': 'Log output' });
+    const logInfo = h('div', { class: 'log-info muted' });
+    const logButtons = h('div', { class: 'actions' });
+    let pollTimer = null;
+    const logUrl = (query) => `/api/v1/runs/${seg(runId)}/logs${qs({ stream, ...query })}`;
+    const atBottom = () => logPre.scrollHeight - logPre.scrollTop - logPre.clientHeight < 30;
+    const renderLog = (scrollToEnd) => {
+        logPre.textContent = win.text || (win.exists ? '' : '(no log output yet)');
+        if (scrollToEnd)
+            logPre.scrollTop = logPre.scrollHeight;
+        logInfo.textContent = `bytes ${win.start.toLocaleString()}–${win.end.toLocaleString()} of ${win.size.toLocaleString()} (${formatBytes(win.size)})${win.trimmed ? ' · view trimmed to keep the page responsive' : ''}`;
+        rerender(logButtons, h('span', { class: 'segmented' }, ['stdout', 'stderr'].map((s) => button(s, () => switchStream(s), { kind: s === stream ? 'primary' : 'plain' }))), button('⇤ Start', () => void loadLog('start'), { disabled: win.start === 0 && !win.trimmed }), button('Load earlier', () => void loadLog('earlier'), { disabled: !win.hasEarlier }), button('Load newer', () => void loadLog('later'), { disabled: !win.hasLater }), button('End ⇥', () => void loadLog('tail')), h('label', { class: 'check' }, (() => {
+            const cb = h('input', { type: 'checkbox', checked: follow, on: { change: () => { follow = cb.checked; if (follow)
+                        void loadLog('tail'); } } });
+            return cb;
+        })(), ' Follow'));
+    };
+    const switchStream = (s) => {
+        if (s === stream)
+            return;
+        stream = s;
+        void loadLog('tail');
+    };
+    /**
+     * Load a log range. All requests are bounded pages (LOG_PAGE_BYTES).
+     * `tail`/`start` (and a stream switch) start a new generation: responses of
+     * older generations are discarded, so bytes of one stream never end up in
+     * the window of another or of a newer range.
+     */
+    const loadLog = async (mode) => {
+        if (mode === 'tail' || mode === 'start')
+            logGen++;
+        const gen = logGen;
+        if (logBusyGen === gen)
+            return; // same generation already loading (follow/earlier/later)
+        logBusyGen = gen;
+        const get = async (query) => {
+            const page = await api.get(logUrl(query));
+            return gen === logGen ? page : null;
+        };
+        try {
+            if (mode === 'tail') {
+                const page = await get(win.tailQuery());
+                if (!page)
+                    return;
+                win.reset(page);
+                renderLog(true);
+            }
+            else if (mode === 'start') {
+                follow = false;
+                const page = await get({ offset: 0, limit: win.pageBytes });
+                if (!page)
+                    return;
+                win.reset(page);
+                renderLog(false);
+                logPre.scrollTop = 0;
+            }
+            else if (mode === 'earlier') {
+                const q = win.earlierQuery();
+                if (!q)
+                    return;
+                const before = logPre.scrollHeight;
+                const page = await get(q);
+                if (!page)
+                    return;
+                if (!win.prepend(page))
+                    win.reset(page);
+                if (win.hasLater)
+                    follow = false;
+                renderLog(false);
+                logPre.scrollTop += logPre.scrollHeight - before;
+            }
+            else {
+                // later / follow: read on from `end` (several pages at most per call)
+                const stick = atBottom();
+                for (let i = 0; i < 4; i++) {
+                    const page = await get(win.laterQuery());
+                    if (!page)
+                        return;
+                    if (!win.append(page)) {
+                        const tail = await get(win.tailQuery());
+                        if (!tail)
+                            return;
+                        win.reset(tail);
+                        break;
+                    }
+                    if (page.eof || page.length === 0)
+                        break;
+                }
+                renderLog(mode === 'follow' ? stick : false);
+            }
+        }
+        catch (err) {
+            if (gen !== logGen)
+                return;
+            logInfo.textContent = '';
+            logInfo.appendChild(errorBox(err));
+        }
+        finally {
+            if (logBusyGen === gen)
+                logBusyGen = -1;
+        }
+    };
+    const followRefresher = createRefresher(() => (follow && tab === 'logs' ? loadLog('follow') : undefined), 1000);
+    const renderLogs = () => {
+        replaceChildren(body, h('section', { class: 'card' }, logButtons, logInfo, logPre));
+        renderLog(false);
+        void loadLog('tail');
+        // Safety net: poll while the run is active and following (SSE triggers are the primary signal).
+        pollTimer = setInterval(() => {
+            if (detail?.active && follow)
+                followRefresher.trigger();
+        }, 5000);
+    };
+    // ---------------------------------------------------------------- events
+    // Contiguous REST cursor + live events (see shared/events.ts): live events are appended only if they
+    // continue the loaded range; otherwise "newer events" are offered and loaded via REST from the cursor.
+    let evList = new EventList();
+    let evBusy = false;
+    const eventsBody = h('tbody');
+    const eventsMore = h('div');
+    const eventsDropped = h('div');
+    const eventRow = (e) => h('tr', null, h('td', null, String(e.sequence)), h('td', null, time(e.timestamp)), h('td', null, badge(e.origin, e.origin === 'worker' ? 'info' : 'muted')), h('td', null, h('code', null, e.type)), h('td', { class: 'event-message' }, eventSummary(e)), h('td', null, Object.keys(e.payload ?? {}).length ? h('details', null, h('summary', null, 'payload'), jsonBlock(e.payload, 50_000)) : null));
+    const applyEvents = (change) => {
+        if (change) {
+            for (const e of change.append)
+                eventsBody.appendChild(eventRow(e));
+            for (let i = 0; i < change.drop && eventsBody.firstElementChild; i++)
+                eventsBody.firstElementChild.remove();
+        }
+        replaceChildren(eventsDropped, evList.dropped > 0 ? h('p', { class: 'hint' }, `${evList.dropped} older event(s) are not shown (at most ${evList.maxRows} rows are kept).`) : null);
+        replaceChildren(eventsMore, evList.pending
+            ? h('div', { class: 'alert alert-info' }, 'Newer events are available. ', button(evBusy ? 'Loading…' : 'Load newer events', () => void loadMoreEvents(), { kind: 'primary', disabled: evBusy }))
+            : null);
+    };
+    const loadMoreEvents = async () => {
+        if (evBusy)
+            return;
+        evBusy = true;
+        const list = evList;
+        const q = list.nextQuery(1000);
+        applyEvents(null);
+        try {
+            const res = await api.get(`/api/v1/runs/${seg(runId)}/events${qs(q)}`);
+            if (list === evList)
+                applyEvents(list.page(res.events, res.hasMore, q.after));
+        }
+        catch (err) {
+            replaceChildren(eventsMore, errorBox(err), button('Retry', () => void loadMoreEvents()));
+            return;
+        }
+        finally {
+            evBusy = false;
+        }
+        applyEvents(null);
+    };
+    const renderEvents = (d) => {
+        evList = new EventList();
+        eventsBody.replaceChildren();
+        applyEvents(evList.page(d.events, d.eventsTruncated, 0));
+        rerender(body, h('section', { class: 'card' }, h('p', { class: 'hint' }, 'Structured events (worker @@ADISPATCH_EVENT lines and orchestrator events). Events are informational only. Live updates append here.'), eventsDropped, h('div', { class: 'table-wrap' }, h('table', { class: 'events' }, h('thead', null, h('tr', null, ['#', 'Time', 'Origin', 'Type', 'Message', ''].map((x) => h('th', { scope: 'col' }, x)))), eventsBody)), eventsMore));
+    };
+    // --------------------------------------------------------------- actions
+    const renderActions = (d) => {
+        rerender(body, h('section', { class: 'card' }, d.lifecycleFailed ? h('div', { class: 'alert alert-error' }, 'Lifecycle failed: a hook chain stopped at a failed action. Retry or skip it below.') : null, actionsTable(d.actions, () => refresher.trigger())));
+    };
+    // ------------------------------------------------------------------ load
+    let first = true;
+    const load = async () => {
+        try {
+            const d = await api.get(`/api/v1/runs/${seg(runId)}`);
+            const wasActive = detail?.active ?? true;
+            detail = d;
+            renderHeader(d);
+            if (tab === 'overview')
+                renderOverview(d);
+            else if (tab === 'actions')
+                renderActions(d);
+            else if (tab === 'events') {
+                if (first)
+                    renderEvents(d);
+            }
+            else if (tab === 'logs') {
+                if (first)
+                    renderLogs();
+                else if (wasActive && !d.active)
+                    followRefresher.trigger(); // final bytes after the run ended
+            }
+            first = false;
+        }
+        catch (err) {
+            replaceChildren(header, errorBox(err));
+            if (first)
+                body.replaceChildren();
+        }
+    };
+    const refresher = createRefresher(load, 1000);
+    void load();
+    return {
+        el,
+        onLive: (msg) => {
+            if (msg.type === 'system.status') {
+                refresher.trigger();
+                return;
+            }
+            if (messageRunId(msg) !== runId)
+                return;
+            if (msg.type === 'run.output') {
+                if (tab === 'logs' && msg.payload.stream === stream)
+                    followRefresher.trigger();
+                return;
+            }
+            if (msg.type === 'run.event' && tab === 'events') {
+                applyEvents(evList.live(msg.payload));
+                const t = msg.payload.type;
+                if (t !== 'run.status' && t !== 'status' && t !== 'lifecycle.chain')
+                    return;
+            }
+            refresher.trigger();
+        },
+        onResync: () => {
+            void refresher.now();
+            if (tab === 'events') {
+                // Events may have been missed while disconnected: continue from the contiguous cursor.
+                evList.markPending();
+                void loadMoreEvents();
+            }
+            if (tab === 'logs' && follow)
+                void loadLog('tail');
+        },
+        dispose: () => {
+            refresher.dispose();
+            followRefresher.dispose();
+            if (pollTimer)
+                clearInterval(pollTimer);
+        },
+    };
+};

package/dist/ui/public/js/client/pages/runs.js

@@ -0,0 +1,72 @@
+/** Runs list (Spec §16): active and historical runs with paging and simple filters. */
+import { api, qs } from '../api.js';
+import { h, replaceChildren } from '../dom.js';
+import { buildHash } from '../../shared/route.js';
+import { createRefresher } from '../../shared/throttle.js';
+import { formatDuration } from '../../shared/format.js';
+import { isStateChange } from '../page.js';
+import { errorBox, externalLink, loading, runLink, runOutcomeBadges, table, text, time } from '../ui.js';
+import { cancelRunButton } from './dashboard.js';
+const PAGE_SIZE = 50;
+export const runsPage = (ctx) => {
+    ctx.setTitle('Runs');
+    const q = ctx.route.query;
+    const scope = q.scope === 'active' || q.scope === 'history' ? q.scope : 'all';
+    const workflow = q.workflow ?? '';
+    const trigger = q.trigger ?? '';
+    const result = q.result === 'success' || q.result === 'failure' ? q.result : '';
+    const offset = Math.max(0, Number.parseInt(q.offset ?? '0', 10) || 0);
+    const go = (patch) => {
+        ctx.navigate(buildHash(['runs'], { scope, workflow, trigger, result, offset: 0, ...patch }));
+    };
+    const tabs = h('nav', { class: 'tabs', 'aria-label': 'Run scope' }, ['all', 'active', 'history'].map((s) => h('a', { href: buildHash(['runs'], { scope: s, workflow, trigger, result }), class: s === scope ? 'active' : null, 'aria-current': s === scope ? 'page' : null }, s === 'all' ? 'All' : s === 'active' ? 'Active' : 'History')));
+    const wfSelect = h('select', { class: 'input', 'aria-label': 'Workflow', on: { change: () => go({ workflow: wfSelect.value }) } }, h('option', { value: '' }, 'All workflows'));
+    const trSelect = h('select', { class: 'input', 'aria-label': 'Trigger', on: { change: () => go({ trigger: trSelect.value }) } }, [['', 'All triggers'], ['source', 'source'], ['schedule', 'schedule'], ['manual', 'manual']].map(([v, l]) => h('option', { value: v, selected: v === trigger }, l)));
+    const resSelect = h('select', { class: 'input', 'aria-label': 'Business result', on: { change: () => go({ result: resSelect.value }) } }, [['', 'Any result'], ['success', 'result: success'], ['failure', 'result: failure (business)']].map(([v, l]) => h('option', { value: v, selected: v === result }, l)));
+    const filters = h('div', { class: 'filters' }, wfSelect, trSelect, resSelect);
+    const body = h('div', null, loading());
+    const el = h('div', { class: 'page' }, h('h1', null, 'Runs'), tabs, filters, body);
+    void api
+        .get('/api/v1/workflows')
+        .then((res) => {
+        for (const wf of res.workflows)
+            wfSelect.appendChild(h('option', { value: wf.id, selected: wf.id === workflow }, `${wf.name} (${wf.id})`));
+        if (workflow && !res.workflows.some((w) => w.id === workflow))
+            wfSelect.appendChild(h('option', { value: workflow, selected: true }, workflow));
+    })
+        .catch(() => undefined);
+    const load = async () => {
+        try {
+            const res = await api.get(`/api/v1/runs${qs({ active: scope === 'active' ? 'true' : scope === 'history' ? 'false' : null, workflow, trigger, result, limit: PAGE_SIZE, offset })}`);
+            const rows = res.runs.map((r) => [
+                runLink(r.id),
+                h('span', null, r.workflowName ?? r.workflowId, h('br'), h('small', { class: 'muted' }, r.workflowId)),
+                r.triggerType,
+                r.sourceUrl ? externalLink(r.sourceUrl, r.sourceItemKey ?? undefined) : text(r.sourceItemKey ?? (r.scheduledFor ? `slot ${r.scheduledFor}` : null)),
+                runOutcomeBadges(r),
+                time(r.startedAt ?? r.createdAt),
+                formatDuration(r.durationMs),
+                text(r.active ? r.statusMessage : (r.resultMessage ?? r.finalReason)),
+                cancelRunButton(r, () => refresher.trigger()),
+            ]);
+            const from = res.total === 0 ? 0 : res.offset + 1;
+            const to = res.offset + res.runs.length;
+            const pager = h('div', { class: 'pager' }, h('span', null, `${from}–${to} of ${res.total}`), offset > 0 ? h('a', { href: buildHash(['runs'], { scope, workflow, trigger, result, offset: Math.max(0, offset - PAGE_SIZE) }) }, '← Newer') : null, to < res.total ? h('a', { href: buildHash(['runs'], { scope, workflow, trigger, result, offset: offset + PAGE_SIZE }) }, 'Older →') : null);
+            replaceChildren(body, table(['Run', 'Workflow', 'Trigger', 'Item', 'Outcome', 'Started', 'Duration', 'Message', ''], rows, { empty: 'No runs match.' }), pager);
+        }
+        catch (err) {
+            replaceChildren(body, errorBox(err));
+        }
+    };
+    const refresher = createRefresher(load, 1500);
+    void load();
+    return {
+        el,
+        onLive: (msg) => {
+            if (isStateChange(msg) && (msg.type !== 'run.event' || msg.payload.type === 'run.status' || msg.payload.type === 'status'))
+                refresher.trigger();
+        },
+        onResync: () => void refresher.now(),
+        dispose: () => refresher.dispose(),
+    };
+};

package/dist/ui/public/js/client/pages/views.js

@@ -0,0 +1,80 @@
+/** Views (Spec §17): read-only tables from YAML, sorting in the browser only. */
+import { api, seg } from '../api.js';
+import { h, replaceChildren } from '../dom.js';
+import { cellText, nextSort, sortRows } from '../../shared/sort.js';
+import { button, errorBox, externalLink, loading, routeLink, runLink, table, time } from '../ui.js';
+export const viewsListPage = (ctx) => {
+    ctx.setTitle('All Views');
+    const body = h('div', null, loading());
+    const el = h('div', { class: 'page' }, h('h1', null, 'All Views'), body);
+    void api
+        .get('/api/v1/views')
+        .then((res) => replaceChildren(body, table(['View', 'Sources', 'File'], res.views.map((v) => [routeLink(['views', v.id], v.title), v.sources.join(', '), v.file ? h('code', null, v.file) : '—']), { empty: 'No views configured (views/*.yaml).' })))
+        .catch((err) => replaceChildren(body, errorBox(err)));
+    return { el };
+};
+export const viewPage = (ctx, id) => {
+    ctx.setTitle(`View ${id}`);
+    const title = h('h1', null, id);
+    const meta = h('div', { class: 'muted' });
+    const body = h('div', null, loading());
+    let data = null;
+    let sort = null;
+    const refreshBtn = button('Refresh', () => void load(true));
+    const el = h('div', { class: 'page' }, h('p', { class: 'crumbs' }, routeLink(['views'], '← All Views')), title, h('div', { class: 'actions' }, refreshBtn, meta), body);
+    const cellNode = (c, field) => {
+        if (!c.known)
+            return h('span', { class: 'unknown', title: 'Field not available for this item' }, '—');
+        const t = cellText(c);
+        if (field === 'run.last_id' && typeof c.value === 'string')
+            return runLink(c.value);
+        if (c.link)
+            return externalLink(c.link, t || c.link);
+        if (/(_at|^run\.last_(started|finished)_at)$/.test(field) && typeof c.value === 'string' && !Number.isNaN(Date.parse(c.value)))
+            return time(c.value);
+        return document.createTextNode(t);
+    };
+    const renderTable = () => {
+        if (!data)
+            return;
+        const d = data;
+        const rows = sort ? sortRows(d.rows, sort.column, d.columns[sort.column]?.type ?? 'string', sort.direction) : d.rows;
+        const headers = d.columns.map((c, i) => {
+            const active = sort?.column === i;
+            const dir = active ? sort.direction : null;
+            const btn = h('button', {
+                type: 'button',
+                class: 'sort',
+                title: 'Sort (in the browser only)',
+                on: {
+                    click: () => {
+                        sort = nextSort(sort, i);
+                        renderTable();
+                    },
+                },
+            }, c.label, dir ? (dir === 'asc' ? ' ▲' : ' ▼') : '');
+            // aria-sort belongs on the column header (<th>), not on the button inside it.
+            return { cell: btn, attrs: { 'aria-sort': dir === 'asc' ? 'ascending' : dir === 'desc' ? 'descending' : 'none' } };
+        });
+        replaceChildren(body, d.errors.length ? h('div', { class: 'alert alert-error' }, d.errors.map((e) => h('div', null, `Source ${e.sourceId}: ${e.message}`))) : null, d.filterUnknown > 0 ? h('div', { class: 'alert alert-info' }, `${d.filterUnknown} item(s) not shown because the filter could not be evaluated (unknown).`) : null, d.truncated ? h('div', { class: 'alert alert-warn' }, 'Result truncated.') : null, table([...headers, ''], rows.map((r) => [...r.cells.map((c, i) => cellNode(c, d.columns[i]?.field ?? '')), r.lastRunId ? runLink(r.lastRunId, 'last run') : '']), { empty: 'No items match this view.' }));
+    };
+    const load = async (refresh = false) => {
+        refreshBtn.disabled = true;
+        try {
+            data = await api.get(`/api/v1/views/${seg(id)}/items${refresh ? '?refresh=true' : ''}`);
+            title.textContent = data.view.title;
+            ctx.setTitle(data.view.title);
+            meta.textContent = `${data.rows.length} item(s) · sources ${data.view.sources.join(', ')} · fetched ${new Date(data.fetchedAt).toLocaleTimeString()}${data.cached ? ' (cached)' : ''}`;
+            renderTable();
+        }
+        catch (err) {
+            replaceChildren(body, errorBox(err));
+        }
+        finally {
+            refreshBtn.disabled = false;
+        }
+    };
+    void load();
+    // Views are loaded on open/refresh only (source API calls); no live auto-refresh.
+    return { el, onResync: () => void load() };
+};