adispatchd 0.0.0-stage → 0.1.0

package/dist/ui/public/app.css

@@ -0,0 +1,239 @@
+/* Agent Dispatch Daemon (adispatchd) web UI – plain CSS, light/dark via prefers-color-scheme. */
+:root {
+  --bg: #f6f7f9;
+  --surface: #ffffff;
+  --surface-2: #f0f2f5;
+  --text: #1c2330;
+  --muted: #5d6878;
+  --border: #d9dee6;
+  --accent: #2563eb;
+  --accent-text: #ffffff;
+  --ok: #157f3b;
+  --ok-bg: #e3f5e9;
+  --warn: #8a5a00;
+  --warn-bg: #fff3d6;
+  --error: #b42318;
+  --error-bg: #fde8e7;
+  --info: #1d4ed8;
+  --info-bg: #e5edff;
+  --muted-bg: #eceff3;
+  --code-bg: #f3f4f6;
+  --shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
+  --radius: 8px;
+  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
+  color-scheme: light dark;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #0f1218;
+    --surface: #171b23;
+    --surface-2: #1f2430;
+    --text: #e5e9f0;
+    --muted: #9aa4b2;
+    --border: #2c3341;
+    --accent: #5b8cff;
+    --accent-text: #0b1020;
+    --ok: #5fd38a;
+    --ok-bg: #12301f;
+    --warn: #f5c062;
+    --warn-bg: #352812;
+    --error: #ff8a80;
+    --error-bg: #3a1716;
+    --info: #8fb0ff;
+    --info-bg: #19254a;
+    --muted-bg: #252b37;
+    --code-bg: #11151c;
+    --shadow: none;
+  }
+}
+
+* { box-sizing: border-box; }
+html, body { margin: 0; padding: 0; }
+body {
+  background: var(--bg);
+  color: var(--text);
+  font: 14px/1.45 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+}
+a { color: var(--accent); text-decoration: none; }
+a:hover { text-decoration: underline; }
+code, pre, .mono { font-family: var(--mono); font-size: 12.5px; }
+code { overflow-wrap: anywhere; }
+small { font-size: 12px; }
+h1 { font-size: 22px; margin: 4px 0 14px; overflow-wrap: anywhere; }
+h1 small { font-weight: normal; }
+h2 { font-size: 16px; margin: 0 0 10px; }
+h3 { font-size: 14px; margin: 16px 0 6px; }
+:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+
+/* ---------- header / nav ---------- */
+.top {
+  position: sticky; top: 0; z-index: 10;
+  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px;
+  padding: 8px 16px; background: var(--surface); border-bottom: 1px solid var(--border);
+}
+.brand { font-weight: 700; color: var(--text); white-space: nowrap; }
+#nav { flex: 1 1 auto; min-width: 0; }
+.menu { list-style: none; display: flex; flex-wrap: wrap; gap: 2px; margin: 0; padding: 0; }
+.menu > li { position: relative; }
+.menu a, .menu summary {
+  display: inline-flex; align-items: center; gap: 4px;
+  padding: 6px 10px; border-radius: 6px; color: var(--text); cursor: pointer; white-space: nowrap;
+}
+.menu summary { list-style: none; }
+.menu summary::-webkit-details-marker { display: none; }
+.menu summary::after { content: '▾'; font-size: 10px; color: var(--muted); }
+.menu a:hover, .menu summary:hover { background: var(--surface-2); text-decoration: none; }
+.menu a.active, .menu summary.active { background: var(--info-bg); color: var(--info); }
+.submenu {
+  list-style: none; margin: 4px 0 0; padding: 6px; position: absolute; left: 0; top: 100%;
+  min-width: 200px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); z-index: 20;
+}
+.submenu a { display: block; }
+.count .badge { margin-left: 2px; }
+.live { font-size: 12px; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
+.live::before { content: '●'; margin-right: 4px; }
+.live-open { color: var(--ok); background: var(--ok-bg); }
+.live-connecting, .live-reconnecting { color: var(--warn); background: var(--warn-bg); }
+.live-closed { color: var(--error); background: var(--error-bg); }
+
+/* ---------- layout ---------- */
+main { padding: 16px; max-width: 1400px; margin: 0 auto; outline: none; }
+.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; align-items: start; }
+.span-all { grid-column: 1 / -1; }
+.card {
+  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
+  padding: 14px; box-shadow: var(--shadow); min-width: 0; margin-bottom: 14px;
+}
+.grid > .card { margin-bottom: 0; }
+.crumbs { margin: 0 0 4px; }
+.hint { color: var(--muted); font-size: 12.5px; margin: 8px 0; }
+.muted { color: var(--muted); }
+.empty { color: var(--muted); font-style: italic; }
+.unknown { color: var(--muted); }
+.error-text { color: var(--error); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12.5px; }
+.wrap { white-space: pre-wrap; word-break: break-all; }
+
+/* ---------- key/value ---------- */
+.kv { display: grid; grid-template-columns: minmax(110px, max-content) 1fr; gap: 6px 14px; margin: 0; }
+.kv dt { color: var(--muted); }
+.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
+
+/* ---------- tables ---------- */
+.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
+table { width: 100%; border-collapse: collapse; }
+th, td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
+th { font-weight: 600; color: var(--muted); font-size: 12.5px; white-space: nowrap; }
+tbody tr:hover { background: var(--surface-2); }
+td { overflow-wrap: anywhere; }
+.event-message { white-space: pre-wrap; }
+button.sort { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; font-weight: 600; }
+button.sort:hover { color: var(--text); }
+ul.plain, ul.issues, ul.checks { list-style: none; padding: 0; margin: 0; }
+ul.issues li, ul.checks li { margin: 4px 0; }
+ul.trace { list-style: none; margin: 2px 0 2px 8px; padding-left: 10px; border-left: 2px solid var(--border); }
+ul.trace li { margin: 3px 0; }
+ol.attempts { margin: 4px 0; padding-left: 18px; }
+
+/* ---------- badges ---------- */
+.badges { display: inline-flex; flex-wrap: wrap; gap: 4px; }
+.badge {
+  display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600;
+  white-space: nowrap; border: 1px solid transparent; line-height: 18px; margin-right: 2px;
+}
+.badge-ok { color: var(--ok); background: var(--ok-bg); }
+.badge-warn { color: var(--warn); background: var(--warn-bg); }
+.badge-error { color: var(--error); background: var(--error-bg); }
+.badge-info { color: var(--info); background: var(--info-bg); }
+.badge-muted { color: var(--muted); background: var(--muted-bg); }
+
+/* ---------- alerts / toasts ---------- */
+.alert { padding: 10px 12px; border-radius: var(--radius); margin: 8px 0; border: 1px solid transparent; overflow-wrap: anywhere; }
+.alert-ok { background: var(--ok-bg); color: var(--ok); }
+.alert-warn { background: var(--warn-bg); color: var(--warn); }
+.alert-error { background: var(--error-bg); color: var(--error); }
+.alert-info { background: var(--info-bg); color: var(--info); }
+.alert pre { color: var(--text); }
+.toasts { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 100; max-width: min(420px, calc(100vw - 32px)); }
+.toast { padding: 10px 14px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18); overflow-wrap: anywhere; }
+.toast-ok { border-left: 4px solid var(--ok); }
+.toast-error { border-left: 4px solid var(--error); }
+.toast-info, .toast-warn, .toast-muted { border-left: 4px solid var(--info); }
+
+/* ---------- buttons / forms ---------- */
+.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; }
+.btn {
+  font: inherit; padding: 6px 12px; border-radius: 6px; border: 1px solid var(--border);
+  background: var(--surface-2); color: var(--text); cursor: pointer; white-space: nowrap;
+}
+.btn:hover:not(:disabled) { filter: brightness(0.96); }
+.btn:disabled { opacity: 0.5; cursor: not-allowed; }
+.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
+.btn-danger { background: var(--error-bg); border-color: var(--error); color: var(--error); }
+.segmented { display: inline-flex; }
+.segmented .btn { border-radius: 0; }
+.segmented .btn:first-child { border-radius: 6px 0 0 6px; }
+.segmented .btn:last-child { border-radius: 0 6px 6px 0; }
+.input {
+  font: inherit; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--border);
+  background: var(--surface); color: var(--text); min-width: 0; max-width: 100%;
+}
+.input-narrow { width: 7em; }
+.form { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
+.field { display: flex; flex-direction: column; gap: 4px; }
+.field > span { font-weight: 600; font-size: 12.5px; }
+.check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
+.inline-form { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
+.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
+.pager { display: flex; gap: 16px; align-items: center; margin: 10px 0; color: var(--muted); }
+.tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--border); margin: 10px 0 14px; }
+.tabs a { padding: 7px 12px; border-bottom: 2px solid transparent; color: var(--muted); }
+.tabs a.active { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }
+.tabs a:hover { text-decoration: none; color: var(--text); }
+.meter-wrap { display: inline-flex; align-items: center; gap: 6px; }
+meter { width: 120px; height: 12px; }
+
+/* ---------- run ---------- */
+.run-status { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
+.status-message { color: var(--muted); font-style: italic; overflow-wrap: anywhere; }
+pre.log, pre.json, pre.yaml {
+  background: var(--code-bg); border: 1px solid var(--border); border-radius: 6px;
+  padding: 10px; margin: 6px 0; overflow: auto; white-space: pre-wrap; word-break: break-all;
+}
+pre.log { height: 60vh; min-height: 240px; white-space: pre; word-break: normal; }
+pre.json { max-height: 420px; }
+pre.yaml { max-height: 70vh; white-space: pre; word-break: normal; }
+.log-info { font-size: 12px; }
+details > summary { cursor: pointer; }
+details.file { border-bottom: 1px solid var(--border); padding: 6px 0; }
+
+/* ---------- dialog ---------- */
+.dialog {
+  border: 1px solid var(--border); border-radius: 10px; padding: 18px; width: min(520px, calc(100vw - 24px));
+  background: var(--surface); color: var(--text); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
+}
+.dialog::backdrop { background: rgba(0, 0, 0, 0.45); }
+.dialog h2 { margin-top: 0; }
+.dialog-body { margin: 6px 0 12px; overflow-wrap: anywhere; }
+.dialog .field { margin: 10px 0; }
+.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
+
+/* ---------- narrow screens ---------- */
+@media (max-width: 640px) {
+  main { padding: 10px; }
+  .top { padding: 6px 10px; }
+  .grid { grid-template-columns: 1fr; }
+  .kv { grid-template-columns: 1fr; gap: 2px; }
+  .kv dt { margin-top: 6px; }
+  h1 { font-size: 19px; }
+  .menu a, .menu summary { padding: 5px 8px; }
+  .submenu { position: static; box-shadow: none; }
+  pre.log { height: 50vh; }
+  .table-wrap > table { min-width: 640px; }
+  .table-wrap td code { overflow-wrap: normal; white-space: nowrap; }
+}
+
+/* events table: keep type and payload columns compact */
+table.events td:nth-child(4) code, table.events td:nth-child(2) { white-space: nowrap; overflow-wrap: normal; }
+table.events td:last-child { white-space: nowrap; }

package/dist/ui/public/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" rx="6" fill="#2563eb"/><circle cx="10" cy="16" r="4" fill="#fff"/><circle cx="22" cy="9" r="3" fill="#fff"/><circle cx="22" cy="23" r="3" fill="#fff"/><path d="M13 14l6-4M13 18l6 4" stroke="#fff" stroke-width="2"/></svg>

package/dist/ui/public/index.html

@@ -0,0 +1,27 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta
+      http-equiv="Content-Security-Policy"
+      content="default-src 'none'; script-src 'self'; style-src 'self'; img-src 'self'; connect-src 'self'; font-src 'self'; base-uri 'none'; form-action 'none'; object-src 'none'"
+    />
+    <meta name="referrer" content="no-referrer" />
+    <meta name="color-scheme" content="light dark" />
+    <title>Agent Dispatch Daemon</title>
+    <link rel="icon" href="favicon.svg" type="image/svg+xml" />
+    <link rel="stylesheet" href="app.css" />
+    <script type="module" src="js/client/app.js"></script>
+  </head>
+  <body>
+    <header class="top">
+      <a class="brand" href="#/" title="Agent Dispatch Daemon">adispatchd</a>
+      <nav id="nav" aria-label="Main"></nav>
+      <span id="live" class="live live-connecting" role="status" aria-live="polite">connecting…</span>
+    </header>
+    <main id="main" tabindex="-1">
+      <noscript><p>This interface needs JavaScript.</p></noscript>
+    </main>
+  </body>
+</html>

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

@@ -0,0 +1,68 @@
+/**
+ * HTTP client for `/api/v1` (docs/api.md). Mutating requests always carry
+ * the CSRF header `X-Adispatch-Request: 1` and a JSON body.
+ */
+/** Error returned by the API (`{error:{code,message,details}}`) or the network. */
+export class ApiError extends Error {
+    status;
+    code;
+    details;
+    constructor(status, code, message, details = null) {
+        super(message);
+        this.status = status;
+        this.code = code;
+        this.details = details;
+    }
+}
+async function request(method, path, body) {
+    const headers = { accept: 'application/json' };
+    const mutating = method !== 'GET' && method !== 'HEAD';
+    if (mutating) {
+        headers['x-adispatch-request'] = '1';
+        headers['content-type'] = 'application/json';
+    }
+    let res;
+    try {
+        res = await fetch(path, {
+            method,
+            headers,
+            credentials: 'same-origin',
+            cache: 'no-store',
+            ...(mutating ? { body: JSON.stringify(body ?? {}) } : {}),
+        });
+    }
+    catch (err) {
+        throw new ApiError(0, 'network_error', `Network error: ${err instanceof Error ? err.message : String(err)}`);
+    }
+    let json = null;
+    const text = await res.text();
+    if (text) {
+        try {
+            json = JSON.parse(text);
+        }
+        catch {
+            json = null;
+        }
+    }
+    if (!res.ok) {
+        const e = json?.error;
+        throw new ApiError(res.status, typeof e?.code === 'string' ? e.code : `http_${res.status}`, typeof e?.message === 'string' ? e.message : `HTTP ${res.status}`, e?.details ?? null);
+    }
+    return json;
+}
+/** Query string from an object (empty values omitted). */
+export function qs(params) {
+    const p = new URLSearchParams();
+    for (const [k, v] of Object.entries(params))
+        if (v !== null && v !== undefined && v !== '')
+            p.set(k, String(v));
+    const s = p.toString();
+    return s ? `?${s}` : '';
+}
+export const api = {
+    get: (path) => request('GET', path),
+    post: (path, body) => request('POST', path, body),
+    patch: (path, body) => request('PATCH', path, body),
+};
+/** Encode one path segment. */
+export const seg = (s) => encodeURIComponent(String(s));

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

@@ -0,0 +1,146 @@
+/**
+ * Entry point of the web UI (WI-11, Spec §16): navigation, hash router, one
+ * shared SSE connection with reconnect + REST resync.
+ */
+import { api } from './api.js';
+import { h, replaceChildren, $ } from './dom.js';
+import { parseHash } from '../shared/route.js';
+import { LiveConnection } from '../shared/sse.js';
+import { createRefresher } from '../shared/throttle.js';
+import { badge, errorBox } from './ui.js';
+import { dashboardPage } from './pages/dashboard.js';
+import { runsPage } from './pages/runs.js';
+import { runPage } from './pages/run.js';
+import { workflowPage, workflowsPage } from './pages/workflows.js';
+import { blockedPage } from './pages/blocked.js';
+import { failedActionsPage } from './pages/actions.js';
+import { viewPage, viewsListPage } from './pages/views.js';
+import { configPage } from './pages/config.js';
+/** Views listed directly in the menu up to this count (more → only "All Views"). */
+const MAX_DIRECT_VIEWS = 8;
+const main = $('#main');
+const nav = $('#nav');
+const liveIndicator = $('#live');
+let current = null;
+// ------------------------------------------------------------------ nav
+const counters = { blocks: h('span', { class: 'count' }), actions: h('span', { class: 'count' }) };
+const viewsMenu = h('ul', { class: 'submenu' });
+const navItem = (key, href, label, extra) => h('li', null, h('a', { href, 'data-nav': key }, label, extra ?? null));
+replaceChildren(nav, h('ul', { class: 'menu' }, navItem('', '#/', 'Dashboard'), navItem('runs', '#/runs', 'Runs'), navItem('workflows', '#/workflows', 'Workflows'), navItem('blocked', '#/blocked', 'Blocked', counters.blocks), navItem('actions', '#/actions', 'Failed Actions', counters.actions), h('li', { class: 'has-sub' }, h('details', { class: 'views-menu' }, h('summary', { 'data-nav': 'views' }, 'Views'), viewsMenu)), navItem('config', '#/config', 'Configuration')));
+const renderCount = (el, n, tone) => {
+    replaceChildren(el, n > 0 ? badge(String(n), tone) : null);
+};
+const loadNav = async () => {
+    try {
+        const [status, views] = await Promise.all([api.get('/api/v1/status'), api.get('/api/v1/views')]);
+        renderCount(counters.blocks, status.counts.activeBlocks, 'warn');
+        renderCount(counters.actions, status.counts.failedActions, 'error');
+        const direct = views.views.length <= MAX_DIRECT_VIEWS ? views.views : [];
+        replaceChildren(viewsMenu, direct.map((v) => h('li', null, h('a', { href: `#/views/${encodeURIComponent(v.id)}`, 'data-nav': `views/${v.id}` }, v.title))), h('li', null, h('a', { href: '#/views', 'data-nav': 'views' }, 'All Views')));
+        markActiveNav();
+    }
+    catch {
+        // shown by the live indicator / pages
+    }
+};
+const navRefresher = createRefresher(loadNav, 2000);
+const markActiveNav = () => {
+    const r = parseHash(location.hash);
+    const top = r.segments[0] ?? '';
+    const full = r.segments.slice(0, 2).join('/');
+    nav.querySelectorAll('[data-nav]').forEach((a) => {
+        const key = a.getAttribute('data-nav') ?? '';
+        const active = key === full || (key === top && !(top === 'views' && r.segments.length > 1 && a.tagName === 'A'));
+        a.classList.toggle('active', active);
+        if (a.tagName === 'A') {
+            if (active)
+                a.setAttribute('aria-current', 'page');
+            else
+                a.removeAttribute('aria-current');
+        }
+    });
+};
+// --------------------------------------------------------------- router
+const ctxFor = (route) => ({
+    route,
+    navigate: (hash) => {
+        if (location.hash === hash)
+            render();
+        else
+            location.hash = hash;
+    },
+    refreshNav: () => navRefresher.trigger(),
+    setTitle: (title) => {
+        document.title = `${title} · adispatchd`;
+    },
+});
+function pageFor(route, ctx) {
+    const [a, b] = route.segments;
+    switch (a) {
+        case undefined:
+            return dashboardPage(ctx);
+        case 'runs':
+            return b ? runPage(ctx, b) : runsPage(ctx);
+        case 'workflows':
+            return b ? workflowPage(ctx, b) : workflowsPage(ctx);
+        case 'blocked':
+            return blockedPage(ctx);
+        case 'actions':
+            return failedActionsPage(ctx);
+        case 'views':
+            return b ? viewPage(ctx, b) : viewsListPage(ctx);
+        case 'config':
+            return configPage(ctx);
+        default:
+            return { el: h('div', { class: 'page' }, h('h1', null, 'Not found'), h('p', null, 'Unknown page. ', h('a', { href: '#/' }, 'Go to the dashboard'))) };
+    }
+}
+function render() {
+    current?.dispose?.();
+    current = null;
+    const route = parseHash(location.hash);
+    try {
+        current = pageFor(route, ctxFor(route));
+        replaceChildren(main, current.el);
+    }
+    catch (err) {
+        replaceChildren(main, errorBox(err));
+    }
+    nav.querySelectorAll('details').forEach((d) => {
+        d.open = false;
+    });
+    markActiveNav();
+    main.focus({ preventScroll: true });
+    window.scrollTo(0, 0);
+}
+window.addEventListener('hashchange', render);
+// ----------------------------------------------------------------- live
+const STATE_LABEL = { connecting: 'connecting…', open: 'live', reconnecting: 'reconnecting…', closed: 'offline' };
+const live = new LiveConnection({
+    url: '/api/v1/events',
+    // The DOM EventSource is structurally compatible (handler parameter types differ only nominally).
+    create: (url) => new EventSource(url),
+    onMessage: (msg) => {
+        if (msg.type === 'block.created' || msg.type === 'block.cleared' || msg.type === 'run.action' || msg.type === 'config.reloaded' || msg.type === 'system.status')
+            navRefresher.trigger();
+        try {
+            current?.onLive?.(msg);
+        }
+        catch (err) {
+            console.error('live handler failed', err);
+        }
+    },
+    onResync: () => {
+        navRefresher.trigger();
+        current?.onResync?.();
+    },
+    onState: (state) => {
+        liveIndicator.textContent = STATE_LABEL[state];
+        liveIndicator.className = `live live-${state}`;
+        liveIndicator.title = state === 'open' ? 'Live updates via SSE' : 'Live updates interrupted; data is reloaded after reconnecting';
+    },
+});
+window.addEventListener('online', () => live.reconnectNow());
+render();
+void loadNav();
+live.start();

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

@@ -0,0 +1,34 @@
+/**
+ * Browser binding of the safe element builder (see shared/dom.ts). All
+ * rendering goes through `h()`; untrusted strings therefore always end up in
+ * text nodes. `innerHTML` is never used in the UI.
+ */
+import { createH } from '../shared/dom.js';
+/** Element builder bound to `document`. */
+export const h = createH(document);
+/** Remove all children of `el` and append `children`. */
+export function replaceChildren(el, ...children) {
+    el.replaceChildren();
+    const tmp = h('div', null, ...children);
+    while (tmp.firstChild)
+        el.appendChild(tmp.firstChild);
+}
+/**
+ * Like {@link replaceChildren}, but keeps the open state of `<details>`
+ * elements (matched by position) across live re-renders.
+ */
+export function rerender(el, ...children) {
+    const open = [...el.querySelectorAll('details')].map((d) => d.open);
+    replaceChildren(el, ...children);
+    el.querySelectorAll('details').forEach((d, i) => {
+        if (open[i])
+            d.open = true;
+    });
+}
+/** Typed `querySelector` that throws if missing. */
+export function $(selector, root = document) {
+    const el = root.querySelector(selector);
+    if (!el)
+        throw new Error(`element ${selector} not found`);
+    return el;
+}

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

@@ -0,0 +1,9 @@
+/** True for live messages that change run/system state (used for coalesced refreshes). */
+export function isStateChange(msg) {
+    return msg.type !== 'run.output' && msg.type !== 'stream.open' && msg.type !== 'retention.finished';
+}
+/** Run ID a live message refers to, if any. */
+export function messageRunId(msg) {
+    const p = msg.payload;
+    return typeof p.runId === 'string' ? p.runId : null;
+}

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

@@ -0,0 +1,35 @@
+/** Failed Actions (Spec §10, §16): errors, attempts, manual retry / skip. */
+import { api } from '../api.js';
+import { h, replaceChildren, rerender } from '../dom.js';
+import { createRefresher } from '../../shared/throttle.js';
+import { errorBox, loading } from '../ui.js';
+import { actionsTable } from './run.js';
+export const failedActionsPage = (ctx) => {
+    ctx.setTitle('Failed Actions');
+    const body = h('div', null, loading());
+    const el = h('div', { class: 'page' }, h('h1', null, 'Failed Actions'), h('p', { class: 'hint' }, 'Lifecycle actions whose attempts are exhausted ("lifecycle failed"). Retry starts a fresh attempt budget; the hook chain continues afterwards in the background.'), body);
+    const after = () => {
+        ctx.refreshNav();
+        refresher.trigger();
+    };
+    const load = async () => {
+        try {
+            const res = await api.get('/api/v1/actions/failed');
+            rerender(body, res.actions.length ? actionsTable(res.actions, after, { showRun: true }) : h('p', { class: 'empty' }, 'No failed lifecycle actions.'));
+        }
+        catch (err) {
+            replaceChildren(body, errorBox(err));
+        }
+    };
+    const refresher = createRefresher(load, 1000);
+    void load();
+    return {
+        el,
+        onLive: (msg) => {
+            if (msg.type === 'run.action' || (msg.type === 'run.event' && String(msg.payload.type).startsWith('lifecycle.')))
+                refresher.trigger();
+        },
+        onResync: () => void refresher.now(),
+        dispose: () => refresher.dispose(),
+    };
+};

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

@@ -0,0 +1,58 @@
+/**
+ * Blocked (Spec §11, §16): internal retry blocks of the orchestrator after
+ * repeated technical failures – explicitly NOT GitHub "blocked by" or labels.
+ */
+import { api } from '../api.js';
+import { h, replaceChildren, rerender } from '../dom.js';
+import { createRefresher } from '../../shared/throttle.js';
+import { act, button, confirmDialog, errorBox, externalLink, loading, routeLink, runLink, table, time } from '../ui.js';
+export const blockedPage = (ctx) => {
+    ctx.setTitle('Blocked');
+    const body = h('div', null, loading());
+    const el = h('div', { class: 'page' }, h('h1', null, 'Blocked'), h('div', { class: 'alert alert-info' }, h('strong', null, 'Internal retry blocks only. '), 'A block is created by the orchestrator after too many consecutive technical failures (crashed, start error, timeout) of a workflow/item. ', 'This is unrelated to GitHub "blocked by" dependencies or GitHub labels. Removing a block starts a new counting period; history is kept.'), body);
+    const clear = async (b, btn) => {
+        const r = await confirmDialog({
+            title: 'Remove retry block?',
+            message: h('div', null, h('p', null, `Block #${b.id} for workflow ${b.workflowId}${b.itemKey ? `, item ${b.itemKey}` : ' (whole workflow)'} is removed.`), h('p', null, 'The scheduler may start the item again in the next planning step. The failure counter starts a new period.')),
+            confirmLabel: 'Remove block',
+            danger: true,
+        });
+        if (!r.ok)
+            return;
+        await act(btn, () => api.post(`/api/v1/blocks/${b.id}/clear`, { clearedBy: 'ui' }), 'Block removed');
+        ctx.refreshNav();
+        await refresher.now();
+    };
+    const load = async () => {
+        try {
+            const res = await api.get('/api/v1/blocks');
+            rerender(body, table(['Block key', 'Reason', 'Failures', 'Created', 'Runs', 'Source item', ''], res.blocks.map((b) => {
+                const btn = button('Remove Block', () => void clear(b, btn), { kind: 'danger' });
+                const runs = [...new Set([...(b.runId ? [b.runId] : []), ...b.affectedRunIds])];
+                return [
+                    h('span', null, routeLink(['workflows', b.workflowId], b.workflowName ?? b.workflowId), h('br'), h('code', null, b.itemKey ?? '(workflow scope)')),
+                    b.reason,
+                    String(b.failureCount),
+                    time(b.createdAt),
+                    runs.length ? h('ul', { class: 'plain' }, runs.slice(0, 10).map((id) => h('li', null, runLink(id))), runs.length > 10 ? h('li', { class: 'muted' }, `+${runs.length - 10} more`) : null) : '—',
+                    externalLink(b.sourceUrl),
+                    btn,
+                ];
+            }), { empty: 'No active retry blocks.' }));
+        }
+        catch (err) {
+            replaceChildren(body, errorBox(err));
+        }
+    };
+    const refresher = createRefresher(load, 1000);
+    void load();
+    return {
+        el,
+        onLive: (msg) => {
+            if (msg.type === 'block.created' || msg.type === 'block.cleared')
+                refresher.trigger();
+        },
+        onResync: () => void refresher.now(),
+        dispose: () => refresher.dispose(),
+    };
+};