adispatchd 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,291 @@
+/**
+ * Workflows (Spec §16): status, priority, limits, usage; detail with runtime
+ * overrides, manual start (source item + parameter form from the schema) and
+ * dry-run (`unknown / not evaluated` for unexecuted checks).
+ */
+import { ApiError, api, qs, seg } from '../api.js';
+import { h, replaceChildren, rerender } from '../dom.js';
+import { createRefresher } from '../../shared/throttle.js';
+import { buildRuntimeBody, buildStartBody } from '../../shared/params.js';
+import { checkValueLabel, decisionTone, formatDuration } from '../../shared/format.js';
+import { buildHash } from '../../shared/route.js';
+import { isStateChange } from '../page.js';
+import { act, badge, button, errorBox, externalLink, isEditing, jsonBlock, kv, loading, routeLink, runLink, runOutcomeBadges, section, table, text, time, toast } from '../ui.js';
+function timeoutText(t) {
+    const o = (t ?? {});
+    const fmt = (v) => (typeof v === 'number' ? formatDuration(v) : 'none');
+    return `max ${fmt(o.maxDurationMs)}, idle ${fmt(o.idleTimeoutMs)}`;
+}
+function triggerText(wf) {
+    const t = wf.trigger;
+    if (t.type === 'source')
+        return `source: ${t.source ?? '?'}`;
+    if (t.type === 'schedule')
+        return `schedule: ${t.cron ?? '?'} (${t.timezone ?? 'UTC'})`;
+    return t.type;
+}
+function overridden(wf, key) {
+    if (wf.overrides[key] === undefined)
+        return null;
+    return badge('override', 'info', `YAML value: ${String(wf.configured[key])} (runtime overrides are lost on restart/reload)`);
+}
+function enabledBadge(wf) {
+    return h('span', null, wf.enabled ? badge('active', 'ok') : badge('inactive', 'muted'), overridden(wf, 'enabled'));
+}
+export const workflowsPage = (ctx) => {
+    ctx.setTitle('Workflows');
+    const body = h('div', null, loading());
+    const el = h('div', { class: 'page' }, h('h1', null, 'Workflows'), body);
+    const load = async () => {
+        try {
+            const res = await api.get('/api/v1/workflows');
+            rerender(body, table(['Workflow', 'Trigger', 'Status', 'Priority', 'Active / max', 'Blocks', 'Last planning / next slot'], res.workflows.map((wf) => [
+                h('span', null, routeLink(['workflows', wf.id], wf.name), h('br'), h('small', { class: 'muted' }, wf.id)),
+                triggerText(wf),
+                enabledBadge(wf),
+                h('span', null, String(wf.priority), overridden(wf, 'priority')),
+                h('span', null, `${wf.activeRuns} / ${wf.maxConcurrent}`, overridden(wf, 'maxConcurrent')),
+                wf.activeBlocks > 0 ? routeLink(['blocked'], badge(String(wf.activeBlocks), 'warn')) : '0',
+                wf.cron
+                    ? h('span', null, 'next ', time(wf.cron.nextSlot))
+                    : wf.lastPlanning
+                        ? h('span', null, time(wf.lastPlanning.at), ` ${wf.lastPlanning.status}`, wf.lastPlanning.error ? h('div', { class: 'error-text' }, wf.lastPlanning.error) : ` · ${wf.lastPlanning.polled} polled, ${wf.lastPlanning.started} started`)
+                        : text(null),
+            ]), { empty: 'No workflows configured.' }));
+        }
+        catch (err) {
+            replaceChildren(body, errorBox(err));
+        }
+    };
+    const refresher = createRefresher(load, 2000);
+    void load();
+    return {
+        el,
+        onLive: (msg) => {
+            if (isStateChange(msg) && (msg.type !== 'run.event' || msg.payload.type === 'run.status'))
+                refresher.trigger();
+        },
+        onResync: () => void refresher.now(),
+        dispose: () => refresher.dispose(),
+    };
+};
+// ---------------------------------------------------------------------------
+// Dry-run rendering
+function checkRow(c) {
+    const v = checkValueLabel(c.value);
+    const what = c.kind === 'shell_filter' ? 'shell filter' : `${c.kind.replace('_', ' ')} #${c.index + 1}`;
+    return h('li', null, badge(v.label, v.tone), ' ', what, ': ', h('code', null, c.command), c.error ? h('span', { class: 'error-text' }, ` – ${c.error}`) : null);
+}
+export function traceNode(t) {
+    const v = checkValueLabel(t.value);
+    switch (t.kind) {
+        case 'all':
+        case 'any':
+            return h('li', null, badge(v.label, v.tone), ` ${t.kind}`, h('ul', { class: 'trace' }, t.children.map(traceNode)));
+        case 'not':
+            return h('li', null, badge(v.label, v.tone), ' not', h('ul', { class: 'trace' }, traceNode(t.child)));
+        case 'predicate':
+            return h('li', null, badge(v.label, v.tone), ' ', h('code', null, `${t.field} ${t.operator} ${JSON.stringify(t.expected)}`), t.actual !== undefined ? h('span', { class: 'muted' }, ` (actual ${JSON.stringify(t.actual)})`) : null, t.reason ? h('span', { class: 'muted' }, ` – ${t.reason}`) : null);
+        case 'invalid':
+            return h('li', null, badge(v.label, v.tone), ` invalid rule – ${t.reason}`);
+    }
+}
+export function renderDryRun(r) {
+    const parts = [];
+    parts.push(kv([
+        ['Generated', time(r.generatedAt)],
+        ['Enabled', r.enabled ? badge('yes', 'ok') : badge('no', 'muted')],
+        ['Workflow priority', String(r.workflowPriority)],
+        ['Capacity', `workflow ${r.capacity.workflow.active}/${r.capacity.workflow.max} · global ${r.capacity.global.active}/${r.capacity.global.max}`],
+        ['Automatic starts', r.gate ? (r.gate.canStartAutomatically ? badge('possible', 'ok') : badge(`not possible (${r.gate.reason ?? 'unknown'})`, 'warn')) : text(null)],
+    ]));
+    parts.push(h('p', { class: 'hint' }, 'Dry-run: no workers, no lifecycle actions, no shell filters/conditions. Checks that were not executed are shown as "unknown / not evaluated", never as pass.'));
+    if (r.conditions.length)
+        parts.push(h('h3', null, 'Workflow conditions'), h('ul', { class: 'checks' }, r.conditions.map(checkRow)));
+    if (r.source) {
+        parts.push(h('h3', null, `Source ${r.source.sourceId}: ${r.source.polled} item(s) polled`));
+        if (r.source.error)
+            parts.push(h('div', { class: 'alert alert-error' }, `Source error: ${r.source.error}`));
+        parts.push(h('p', null, `${r.summary.candidates} candidate(s): ${r.summary.wouldStart} would start, ${r.summary.pendingChecks} pending checks, ${r.summary.notStartable} not startable`), table(['Item', 'Priority', 'Decision', 'Details'], r.candidates.map((c) => [
+            h('span', null, externalLink(c.url, c.itemKey), c.title ? h('div', null, c.title) : null),
+            `${c.workflowPriority} / ${c.itemPriority}${c.matchedPriorityRule !== null ? ` (rule ${c.matchedPriorityRule + 1})` : ''}`,
+            h('span', null, badge(c.decision, decisionTone(c.decision)), c.reason ? h('div', { class: 'muted' }, c.reason) : null, c.runId ? h('div', null, runLink(c.runId)) : null),
+            c.filter || c.shellFilter || c.itemConditions.length
+                ? h('details', null, h('summary', null, 'checks'), c.filter ? h('ul', { class: 'trace' }, traceNode(c.filter)) : null, c.shellFilter || c.itemConditions.length ? h('ul', { class: 'checks' }, c.shellFilter ? checkRow(c.shellFilter) : null, c.itemConditions.map(checkRow)) : null)
+                : text(null),
+        ]), { empty: 'No candidates.' }));
+    }
+    if (r.cron) {
+        parts.push(h('h3', null, `Schedule ${r.cron.cron} (${r.cron.timezone})`), kv([
+            ['Next slot', h('span', null, badge(r.cron.nextSlotForecast, decisionTone(r.cron.nextSlotForecast)), r.cron.forecastReason ? ` – ${r.cron.forecastReason}` : '')],
+            ['Next slots', r.cron.nextSlots.length ? h('ul', { class: 'plain' }, r.cron.nextSlots.map((s) => h('li', null, time(s)))) : text(null)],
+        ]), r.cron.recentFirings.length
+            ? table(['Slot', 'Decision', 'Run', 'Reason'], r.cron.recentFirings.map((f) => [time(f.scheduledFor), badge(f.decision, decisionTone(f.decision)), f.runId ? runLink(f.runId) : text(null), text(f.reason)]))
+            : h('p', { class: 'muted' }, 'No recent slots.'));
+    }
+    if (r.notes.length)
+        parts.push(h('h3', null, 'Notes'), h('ul', null, r.notes.map((n) => h('li', null, n))));
+    return h('div', { class: 'dry-run' }, parts);
+}
+// ---------------------------------------------------------------------------
+// Detail
+export const workflowPage = (ctx, id) => {
+    ctx.setTitle(`Workflow ${id}`);
+    const header = h('div', null, loading());
+    const info = h('div', { class: 'grid' });
+    const overridesBox = h('section', { class: 'card' }, h('h2', null, 'Runtime overrides'));
+    const startBox = h('section', { class: 'card' }, h('h2', null, 'Manual start'));
+    const dryRunOut = h('div');
+    const dryBtn = button('Run dry-run', () => void dryRun(), { kind: 'primary' });
+    const dryBox = h('section', { class: 'card span-all' }, h('h2', null, 'Dry-run'), h('div', { class: 'actions' }, dryBtn), dryRunOut);
+    const runsBox = h('section', { class: 'card span-all' }, h('h2', null, 'Recent runs'), loading());
+    const configBox = h('section', { class: 'card span-all' });
+    const el = h('div', { class: 'page' }, h('p', { class: 'crumbs' }, routeLink(['workflows'], '← Workflows')), header, h('div', { class: 'grid' }, info, overridesBox, startBox, dryBox, runsBox, configBox));
+    let formsBuilt = false;
+    const dryRun = async () => {
+        replaceChildren(dryRunOut, loading());
+        const res = await act(dryBtn, () => api.post(`/api/v1/workflows/${seg(id)}/dry-run`));
+        replaceChildren(dryRunOut, res ? renderDryRun(res) : h('p', { class: 'muted' }, 'Dry-run failed.'));
+    };
+    const buildOverrides = (wf) => {
+        const enabled = h('select', { class: 'input', id: 'ov-enabled' }, h('option', { value: '', selected: wf.overrides.enabled === undefined }, `YAML (${wf.configured.enabled ? 'active' : 'inactive'})`), h('option', { value: 'true', selected: wf.overrides.enabled === true }, 'active'), h('option', { value: 'false', selected: wf.overrides.enabled === false }, 'inactive'));
+        const priority = h('input', { class: 'input input-narrow', id: 'ov-priority', type: 'number', step: 'any', value: wf.overrides.priority ?? '', placeholder: String(wf.configured.priority) });
+        const maxC = h('input', { class: 'input input-narrow', id: 'ov-max', type: 'number', min: 1, step: 1, value: wf.overrides.maxConcurrent ?? '', placeholder: String(wf.configured.maxConcurrent) });
+        const errors = h('div');
+        const save = button('Apply', () => {
+            const res = buildRuntimeBody({ enabled: enabled.value, priority: priority.value, maxConcurrent: maxC.value });
+            if (!res.ok) {
+                replaceChildren(errors, h('div', { class: 'alert alert-error' }, res.errors.map((e) => h('div', null, `${e.field}: ${e.message}`))));
+                return;
+            }
+            errors.replaceChildren();
+            void act(save, () => api.patch(`/api/v1/workflows/${seg(id)}/runtime`, res.body), 'Overrides applied').then(() => refresher.now());
+        }, { kind: 'primary' });
+        const reset = button('Reset all to YAML', () => {
+            enabled.value = '';
+            priority.value = '';
+            maxC.value = '';
+            void act(reset, () => api.patch(`/api/v1/workflows/${seg(id)}/runtime`, { enabled: null, priority: null, maxConcurrent: null }), 'Overrides removed').then(() => refresher.now());
+        });
+        overridesBox.append(h('div', { class: 'form' }, h('label', { class: 'field', for: 'ov-enabled' }, h('span', null, 'Enabled'), enabled), h('label', { class: 'field' }, h('span', null, 'Priority'), priority), h('label', { class: 'field' }, h('span', null, 'Max parallel'), maxC)), errors, h('div', { class: 'actions' }, save, reset), h('p', { class: 'hint' }, 'Empty = YAML value. Overrides are not persistent: they are lost on restart, and a configuration reload resets affected overrides to the YAML values.'));
+    };
+    const buildStart = (wf) => {
+        const fields = {};
+        const item = h('input', { class: 'input', type: 'text', id: 'start-item', placeholder: 'https://github.com/owner/repo/issues/7 or #7', maxlength: 2000 });
+        const rows = [];
+        if (wf.trigger.type === 'source')
+            rows.push(h('label', { class: 'field' }, h('span', null, 'Source item (required)'), item));
+        for (const [name, def] of Object.entries(wf.parameters)) {
+            let input;
+            const dflt = def.default === null || def.default === undefined ? null : String(def.default);
+            if (def.type === 'enum' || def.type === 'boolean') {
+                const values = def.type === 'enum' ? (def.values ?? []) : ['true', 'false'];
+                input = h('select', { class: 'input' }, h('option', { value: '' }, dflt !== null ? `default (${dflt})` : def.required ? '— choose —' : '(none)'), values.map((v) => h('option', { value: v }, v)));
+            }
+            else {
+                input = h('input', { class: 'input', type: def.type === 'number' ? 'number' : 'text', step: def.type === 'number' ? 'any' : null, placeholder: dflt ?? '' });
+            }
+            fields[name] = input;
+            rows.push(h('label', { class: 'field' }, h('span', null, name, def.required ? ' *' : '', h('small', { class: 'muted' }, ` ${def.type}`)), input, def.description ? h('small', { class: 'muted' }, def.description) : null));
+        }
+        const errors = h('div');
+        const startBtn = button('Start run', () => {
+            const values = {};
+            for (const [k, f] of Object.entries(fields))
+                values[k] = f.value;
+            const res = buildStartBody(wf.trigger.type, item.value, wf.parameters, values);
+            if (!res.ok) {
+                replaceChildren(errors, h('div', { class: 'alert alert-error' }, res.errors.map((e) => h('div', null, `${e.field}: ${e.message}`))));
+                return;
+            }
+            errors.replaceChildren();
+            void (async () => {
+                startBtn.disabled = true;
+                try {
+                    const r = await api.post(`/api/v1/workflows/${seg(id)}/start`, res.body);
+                    toast(`Run ${r.run.id} started`, 'ok');
+                    ctx.navigate(buildHash(['runs', r.run.id], { tab: 'logs' }));
+                }
+                catch (err) {
+                    const parts = [errorBox(err)];
+                    if (err instanceof ApiError && err.code === 'lock_conflict') {
+                        const holder = err.details?.holderRunId;
+                        if (typeof holder === 'string')
+                            parts.push(h('p', null, 'Active run: ', runLink(holder)));
+                    }
+                    replaceChildren(errors, parts);
+                }
+                finally {
+                    startBtn.disabled = false;
+                }
+            })();
+        }, { kind: 'primary' });
+        startBox.append(h('p', { class: 'hint' }, 'A manual start bypasses filters, conditions, limits, blocks and pause – but not the active lock of an item.'), rows.length ? h('div', { class: 'form' }, rows) : h('p', { class: 'muted' }, 'No parameters.'), errors, h('div', { class: 'actions' }, startBtn));
+    };
+    const load = async () => {
+        if (isEditing(el)) {
+            setTimeout(() => refresher.trigger(), 2000);
+            return;
+        }
+        try {
+            const [wf, runs] = await Promise.all([
+                api.get(`/api/v1/workflows/${seg(id)}`),
+                api.get(`/api/v1/runs${qs({ workflow: id, limit: 10 })}`),
+            ]);
+            replaceChildren(header, h('h1', null, wf.name, ' ', h('small', { class: 'muted' }, wf.id)));
+            rerender(info, section('Status', kv([
+                ['Status', enabledBadge(wf)],
+                ['Trigger', triggerText(wf)],
+                ['Priority', h('span', null, String(wf.priority), overridden(wf, 'priority'))],
+                ['Max parallel', h('span', null, String(wf.maxConcurrent), overridden(wf, 'maxConcurrent'))],
+                ['Current usage', `${wf.activeRuns} active`],
+                ['Active blocks', wf.activeBlocks > 0 ? routeLink(['blocked'], badge(String(wf.activeBlocks), 'warn')) : '0'],
+                ['Identity', text(wf.identity)],
+                ['Command', h('code', { class: 'wrap' }, [wf.execute.command, ...wf.execute.args.map(String)].join(' '))],
+                ['Timeout', timeoutText(wf.execute.timeout)],
+                ['Secrets', wf.execute.secrets.length ? wf.execute.secrets.join(', ') : text(null)],
+                ['Filter', `${wf.hasFilter ? 'declarative' : 'none'}${wf.hasShellFilter ? ' + shell filter' : ''}; conditions: ${wf.conditions.workflow} workflow, ${wf.conditions.item} item`],
+                ['Max technical failures', String(wf.maxTechnicalFailures)],
+                ['File', h('code', null, wf.file)],
+                ...(wf.cron
+                    ? [
+                        ['Next slot', time(wf.cron.nextSlot)],
+                        ['Last slot', wf.cron.lastFiring ? h('span', null, time(wf.cron.lastFiring.scheduledFor), ' ', badge(wf.cron.lastFiring.decision, decisionTone(wf.cron.lastFiring.decision))) : text(null)],
+                    ]
+                    : []),
+                ...(wf.lastPlanning
+                    ? [['Last planning', h('span', null, time(wf.lastPlanning.at), ` ${wf.lastPlanning.status} · ${wf.lastPlanning.polled} polled · ${wf.lastPlanning.candidates} candidates · ${wf.lastPlanning.started} started`, wf.lastPlanning.error ? h('div', { class: 'error-text' }, wf.lastPlanning.error) : null)]]
+                    : []),
+            ])));
+            if (!formsBuilt) {
+                formsBuilt = true;
+                buildOverrides(wf);
+                buildStart(wf);
+                replaceChildren(configBox, h('h2', null, 'Configuration'), h('details', null, h('summary', null, 'Declarative filter'), jsonBlock(wf.filter ?? null)), h('details', null, h('summary', null, 'Lifecycle hooks'), jsonBlock(wf.hooks ?? null)), h('details', null, h('summary', null, 'Last planning diagnosis'), jsonBlock(wf.diagnosis ?? null)));
+            }
+            rerender(runsBox, h('h2', null, `Recent runs (${runs.total})`), table(['Run', 'Trigger', 'Outcome', 'Started', 'Duration', 'Message'], runs.runs.map((r) => [runLink(r.id), r.triggerType, runOutcomeBadges(r), time(r.startedAt ?? r.createdAt), formatDuration(r.durationMs), text(r.active ? r.statusMessage : (r.resultMessage ?? r.finalReason))]), { empty: 'No runs yet.' }), runs.total > runs.runs.length ? h('p', null, routeLink(['runs'], 'All runs of this workflow →', { workflow: id })) : null);
+        }
+        catch (err) {
+            replaceChildren(header, errorBox(err));
+        }
+    };
+    const refresher = createRefresher(load, 1500);
+    void load();
+    return {
+        el,
+        onLive: (msg) => {
+            if (msg.type === 'config.reloaded') {
+                // Parameter schema/overrides may have changed: rebuild the forms.
+                formsBuilt = false;
+                overridesBox.replaceChildren(h('h2', null, 'Runtime overrides'));
+                startBox.replaceChildren(h('h2', null, 'Manual start'));
+                refresher.trigger();
+                return;
+            }
+            if (isStateChange(msg) && (msg.type !== 'run.event' || msg.payload.type === 'run.status'))
+                refresher.trigger();
+        },
+        onResync: () => void refresher.now(),
+        dispose: () => refresher.dispose(),
+    };
+};

package/dist/ui/public/js/client/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,152 @@
+/**
+ * Shared UI widgets: badges, links, tables, JSON blocks, toasts and the
+ * custom confirmation dialog (no `alert`/`confirm`/`prompt`).
+ */
+import { h } from './dom.js';
+import { ApiError } from './api.js';
+import { buildHash } from '../shared/route.js';
+import { formatDateTime, formatRelative, prettyJson, runBadges, safeHttpUrl } from '../shared/format.js';
+/** Small colored label. */
+export function badge(label, tone = 'muted', title) {
+    return h('span', { class: `badge badge-${tone}`, title: title ?? null }, label);
+}
+/** Badges of a run outcome (business failure / technical error / cancelled / lifecycle failed). */
+export function runOutcomeBadges(run) {
+    return h('span', { class: 'badges' }, runBadges(run).map((b) => badge(b.label, b.tone, b.title)));
+}
+/** Link to an internal route. */
+export function routeLink(segments, text, query = {}) {
+    return h('a', { href: buildHash(segments, query) }, text);
+}
+/** Link to a run detail. */
+export function runLink(id, text) {
+    return routeLink(['runs', id], h('code', null, text ?? id));
+}
+/** External link (only http(s); otherwise plain text). */
+export function externalLink(url, text) {
+    const safe = safeHttpUrl(url);
+    if (!safe)
+        return h('span', { class: 'muted' }, text ?? url ?? '—');
+    return h('a', { href: safe, target: '_blank', rel: 'noopener noreferrer' }, text ?? safe);
+}
+/** Timestamp with absolute time and relative tooltip. */
+export function time(iso) {
+    if (!iso)
+        return h('span', { class: 'muted' }, '—');
+    return h('time', { datetime: iso, title: `${iso} (${formatRelative(iso, Date.now())})` }, formatDateTime(iso));
+}
+/** Plain text or a muted dash. */
+export function text(value) {
+    if (value === null || value === undefined || value === '')
+        return h('span', { class: 'muted' }, '—');
+    return h('span', null, typeof value === 'string' ? value : typeof value === 'number' || typeof value === 'boolean' ? String(value) : JSON.stringify(value));
+}
+/** JSON in a scrollable pre block. */
+export function jsonBlock(value, maxChars) {
+    if (value === null || value === undefined)
+        return h('span', { class: 'muted' }, '—');
+    return h('pre', { class: 'json' }, prettyJson(value, maxChars));
+}
+/** Key/value list. */
+export function kv(rows) {
+    return h('dl', { class: 'kv' }, rows.map(([k, v]) => [h('dt', null, k), h('dd', null, v)]));
+}
+/** Card section with title. */
+export function section(title, ...children) {
+    return h('section', { class: 'card' }, h('h2', null, title), ...children);
+}
+function isHeaderCell(x) {
+    return typeof x === 'object' && x !== null && 'cell' in x && 'attrs' in x;
+}
+/** Table with header and rows (cells are already safe nodes/strings). */
+export function table(headers, rows, opts = {}) {
+    if (rows.length === 0)
+        return h('p', { class: 'empty' }, opts.empty ?? 'Nothing here.');
+    return h('div', { class: 'table-wrap' }, h('table', { class: opts.className ?? null }, h('thead', null, h('tr', null, headers.map((x) => (isHeaderCell(x) ? h('th', { scope: 'col', ...x.attrs }, x.cell) : h('th', { scope: 'col' }, x))))), h('tbody', null, rows.map((r) => h('tr', null, r.map((c) => h('td', null, c)))))));
+}
+/** Button. */
+export function button(label, onClick, opts = {}) {
+    return h('button', { type: 'button', class: `btn btn-${opts.kind ?? 'plain'}`, disabled: opts.disabled ?? false, title: opts.title ?? null, on: { click: () => onClick() } }, label);
+}
+/** Error message box. */
+export function errorBox(err) {
+    const msg = err instanceof ApiError ? `${err.message} (${err.code})` : err instanceof Error ? err.message : String(err);
+    const details = err instanceof ApiError && err.details ? jsonBlock(err.details, 20_000) : null;
+    return h('div', { class: 'alert alert-error', role: 'alert' }, h('strong', null, 'Error: '), msg, details);
+}
+/** True while the user edits a form control inside `root` (live refreshes are postponed). */
+export function isEditing(root) {
+    const a = document.activeElement;
+    return !!a && root.contains(a) && (a.tagName === 'INPUT' || a.tagName === 'TEXTAREA' || a.tagName === 'SELECT');
+}
+/** Loading placeholder. */
+export function loading() {
+    return h('p', { class: 'muted loading' }, 'Loading…');
+}
+// ---------------------------------------------------------------------------
+// Toasts
+let toastHost = null;
+/** Show a short message (auto-hides). */
+export function toast(message, tone = 'info') {
+    if (!toastHost) {
+        toastHost = h('div', { class: 'toasts', role: 'status', 'aria-live': 'polite' });
+        document.body.appendChild(toastHost);
+    }
+    const el = h('div', { class: `toast toast-${tone}` }, message);
+    toastHost.appendChild(el);
+    setTimeout(() => el.remove(), tone === 'error' ? 8000 : 4000);
+}
+/** Toast for an error (API error text included). */
+export function toastError(err) {
+    const msg = err instanceof ApiError ? `${err.message} (${err.code})` : err instanceof Error ? err.message : String(err);
+    toast(msg, 'error');
+}
+/** Modal confirmation built on `<dialog>`; resolves when closed. */
+export function confirmDialog(opts) {
+    return new Promise((resolve) => {
+        const input = opts.input
+            ? h('input', { type: 'text', class: 'input', placeholder: opts.input.placeholder ?? null, maxlength: 500, 'aria-label': opts.input.label })
+            : null;
+        const checkbox = opts.checkbox ? h('input', { type: 'checkbox' }) : null;
+        const dialog = h('dialog', { class: 'dialog', 'aria-labelledby': 'dialog-title' });
+        let result = { ok: false, value: '', checked: false };
+        const close = (ok) => {
+            result = { ok, value: input?.value.trim() ?? '', checked: checkbox?.checked ?? false };
+            dialog.close();
+        };
+        const form = h('form', { method: 'dialog', on: { submit: (ev) => { ev.preventDefault(); close(true); } } }, h('h2', { id: 'dialog-title' }, opts.title), h('div', { class: 'dialog-body' }, opts.message), input ? h('label', { class: 'field' }, h('span', null, opts.input.label), input) : null, checkbox ? h('label', { class: 'check' }, checkbox, ' ', opts.checkbox.label) : null, h('div', { class: 'dialog-actions' }, h('button', { type: 'button', class: 'btn btn-plain', on: { click: () => close(false) } }, 'Cancel'), h('button', { type: 'submit', class: `btn ${opts.danger ? 'btn-danger' : 'btn-primary'}` }, opts.confirmLabel)));
+        dialog.appendChild(form);
+        dialog.addEventListener('close', () => {
+            dialog.remove();
+            resolve(result);
+        });
+        dialog.addEventListener('cancel', () => {
+            result = { ok: false, value: '', checked: false };
+        });
+        document.body.appendChild(dialog);
+        dialog.showModal();
+        (input ?? form.querySelector('button.btn-plain'))?.focus();
+    });
+}
+/**
+ * Run a mutating action with an in-flight-disabled button and toast feedback.
+ * Returns the API result or `undefined` on error.
+ */
+export async function act(btn, fn, success) {
+    if (btn)
+        btn.disabled = true;
+    try {
+        const res = await fn();
+        if (success)
+            toast(success, 'ok');
+        return res;
+    }
+    catch (err) {
+        toastError(err);
+        return undefined;
+    }
+    finally {
+        if (btn)
+            btn.disabled = false;
+    }
+}

package/dist/ui/public/js/shared/dom.js

@@ -0,0 +1,77 @@
+/**
+ * Minimal, XSS-safe element builder (Spec §20.5). Works against a structural
+ * `DocLike` so it runs in the browser (`document`) and in unit tests (fake
+ * document) alike.
+ *
+ * Rules:
+ * - String/number children always become text nodes (`createTextNode`), never HTML.
+ * - Attribute values are set via `setAttribute` only; event-handler attributes
+ *   (`on*`), `style`, `srcdoc` and friends are rejected.
+ * - URL attributes (`href`, `src`, `action`, …) accept only absolute
+ *   `http(s)` URLs or internal hash routes (`#/…`); anything else is dropped.
+ * - Event listeners are attached with `addEventListener` via the `on` option.
+ */
+import { isInternalHref, safeHttpUrl } from './format.js';
+const URL_ATTRS = new Set(['href', 'src', 'action', 'formaction', 'xlink:href', 'poster', 'cite', 'data', 'background', 'ping']);
+const FORBIDDEN_ATTRS = new Set(['style', 'srcdoc', 'srcset', 'is']);
+const ATTR_NAME = /^[a-z][a-z0-9-]*(:[a-z][a-z0-9-]*)?$/;
+/** Tags the builder refuses to create (script execution / embedding). */
+const FORBIDDEN_TAGS = new Set(['script', 'iframe', 'object', 'embed', 'frame', 'frameset', 'base', 'meta', 'link', 'style']);
+/**
+ * Decide whether an attribute may be set and with which value.
+ * Returns `null` if the attribute must be dropped.
+ */
+export function sanitizeAttribute(name, value) {
+    const n = name.toLowerCase();
+    if (!ATTR_NAME.test(n) || n.startsWith('on') || FORBIDDEN_ATTRS.has(n))
+        return null;
+    if (URL_ATTRS.has(n)) {
+        if (isInternalHref(value))
+            return value;
+        return safeHttpUrl(value);
+    }
+    return value;
+}
+/** Create an element builder for `doc`. */
+export function createH(doc) {
+    const append = (parent, child) => {
+        if (child === null || child === undefined || child === false)
+            return;
+        if (Array.isArray(child)) {
+            for (const c of child)
+                append(parent, c);
+            return;
+        }
+        if (typeof child === 'string' || typeof child === 'number') {
+            parent.appendChild(doc.createTextNode(String(child)));
+            return;
+        }
+        parent.appendChild(child);
+    };
+    return (tag, opts, ...children) => {
+        const t = tag.toLowerCase();
+        if (!/^[a-z][a-z0-9-]*$/.test(t) || FORBIDDEN_TAGS.has(t))
+            throw new Error(`h(): tag <${tag}> is not allowed`);
+        const el = doc.createElement(t);
+        if (opts) {
+            for (const [name, raw] of Object.entries(opts)) {
+                if (name === 'on')
+                    continue;
+                if (raw === null || raw === undefined || raw === false)
+                    continue;
+                if (typeof raw === 'object' || typeof raw === 'function')
+                    continue;
+                const value = raw === true ? '' : String(raw);
+                const safe = sanitizeAttribute(name === 'className' ? 'class' : name, value);
+                if (safe !== null)
+                    el.setAttribute(name === 'className' ? 'class' : name.toLowerCase(), safe);
+            }
+            if (opts.on)
+                for (const [type, listener] of Object.entries(opts.on))
+                    el.addEventListener(type, listener);
+        }
+        for (const c of children)
+            append(el, c);
+        return el;
+    };
+}

package/dist/ui/public/js/shared/events.js

@@ -0,0 +1,88 @@
+/**
+ * Event list of the run detail: a contiguous REST cursor over the run's
+ * events (`sequence` 1, 2, 3, …) plus live events from SSE.
+ *
+ * - The detail endpoint returns only the first 500 events (`eventsTruncated`);
+ *   further pages come from `GET /runs/:id/events?after=<cursor>`.
+ * - A live event is appended only if it directly continues the loaded range
+ *   (`sequence === cursor + 1`) and nothing is pending on the server. Otherwise
+ *   the list is marked as having newer events and the user loads them via REST
+ *   from the cursor – so no range is ever skipped.
+ * - At most `maxRows` events are kept; the oldest are dropped (counted).
+ */
+/** Default cap of rows kept in the view. */
+export const EVENT_ROWS_MAX = 5000;
+/** See module comment. */
+export class EventList {
+    maxRows;
+    /** Highest sequence of the contiguous loaded range (0 = none). */
+    cursor = 0;
+    /** True if the server may have events after `cursor` that are not loaded. */
+    pending = false;
+    /** Number of oldest events dropped from the view. */
+    dropped = 0;
+    rows = 0;
+    /** Highest sequence seen live (also while not appended). */
+    liveMax = 0;
+    constructor(maxRows = EVENT_ROWS_MAX) {
+        this.maxRows = maxRows;
+    }
+    /** Number of rows currently kept. */
+    get size() {
+        return this.rows;
+    }
+    /** Query for the next REST page. */
+    nextQuery(limit = 1000) {
+        return { after: this.cursor, limit };
+    }
+    /**
+     * Apply a REST page that was requested with `after = cursor` (initial
+     * detail events: `after = 0`). Events must be ordered by sequence.
+     * A page that does not start at the cursor (stale response) is ignored.
+     */
+    page(events, hasMore, after) {
+        if (after !== this.cursor)
+            return { append: [], drop: 0 };
+        const append = [];
+        for (const e of events) {
+            if (e.sequence <= this.cursor)
+                continue;
+            append.push(e);
+            this.cursor = e.sequence;
+        }
+        // Live events seen beyond the loaded range (e.g. while this page was in flight) keep `pending`.
+        this.pending = hasMore || this.liveMax > this.cursor;
+        return this.add(append);
+    }
+    /**
+     * Apply a live event. Returns `null` if it was not appended: either a
+     * duplicate, or it does not continue the loaded range (then `pending` is set
+     * and the view should offer "load newer events").
+     */
+    live(e) {
+        if (e.sequence > this.liveMax)
+            this.liveMax = e.sequence;
+        if (e.sequence <= this.cursor)
+            return null;
+        if (this.pending || e.sequence !== this.cursor + 1) {
+            this.pending = true;
+            return null;
+        }
+        this.cursor = e.sequence;
+        return this.add([e]);
+    }
+    /** Mark that events may have been missed (e.g. after an SSE reconnect). */
+    markPending() {
+        this.pending = true;
+    }
+    add(append) {
+        this.rows += append.length;
+        let drop = 0;
+        if (this.rows > this.maxRows) {
+            drop = this.rows - this.maxRows;
+            this.rows = this.maxRows;
+            this.dropped += drop;
+        }
+        return { append, drop };
+    }
+}