unfold-deploy 0.0.0-stage → 0.2.0

package/dist/ui/app.js

@@ -0,0 +1,332 @@
+function h(tag, attrs = {}, ...children) {
+    const el = document.createElement(tag);
+    for (const [k, v] of Object.entries(attrs)) {
+        if (typeof v === 'function')
+            el.addEventListener(k.slice(2), v);
+        else if (v === true)
+            el.setAttribute(k, '');
+        else if (v !== false)
+            el.setAttribute(k, v);
+    }
+    for (const c of children)
+        if (c !== null && c !== undefined && c !== false)
+            el.append(c);
+    return el;
+}
+function fill(el, ...children) {
+    el.replaceChildren(...children.filter((c) => c !== null && c !== undefined && c !== false));
+}
+const SVG_NS = 'http://www.w3.org/2000/svg';
+function icon(path) {
+    const svg = document.createElementNS(SVG_NS, 'svg');
+    svg.setAttribute('viewBox', '0 0 24 24');
+    svg.setAttribute('aria-hidden', 'true');
+    const p = document.createElementNS(SVG_NS, 'path');
+    p.setAttribute('d', path);
+    svg.append(p);
+    return svg;
+}
+const ICONS = {
+    check: 'M5 12.5l4.5 4.5L19 7.5',
+    x: 'M6 6l12 12M18 6L6 18',
+    eye: 'M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12zm10 3a3 3 0 100-6 3 3 0 000 6z',
+    book: 'M4 5a2 2 0 012-2h13v16H6a2 2 0 00-2 2zm0 0v16M8 7h7',
+    ext: 'M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 01-1 1H5a1 1 0 01-1-1V7a1 1 0 011-1h5',
+};
+const STATUS_LABEL = {
+    pending: 'Waiting',
+    active: 'In progress',
+    confirmed: 'Confirmed',
+    failed: 'Failed',
+    unverified: 'Unverified',
+};
+const $ = (id) => document.getElementById(id);
+let state;
+const logs = new Map();
+const logEls = new Map();
+let selected; // stage id chosen by the user; undefined = follow the run
+let logsOpen = false;
+let fixAgent = 'claude';
+let fixPromptOpen = false;
+// ---------- rendering ----------
+function rel(at) {
+    if (!state)
+        return '';
+    const s = Math.max(0, (at - state.startedAt) / 1000);
+    return s < 60 ? `+${s.toFixed(1)}s` : `+${Math.floor(s / 60)}m${Math.round(s % 60)}s`;
+}
+function autoStage(s) {
+    if (s.failedStage)
+        return s.failedStage;
+    const active = [...s.stages].reverse().find((st) => st.status === 'active');
+    if (active)
+        return active.id;
+    if (s.outcome === 'success')
+        return s.stages.at(-1).id;
+    if (s.outcome === 'interrupted') {
+        // Show where the run stopped: the first stage after the last confirmed one.
+        const i = s.stages.findIndex((st) => st.id === s.lastConfirmed);
+        return (s.stages[i + 1] ?? s.stages[0]).id;
+    }
+    return s.lastConfirmed ?? s.stages[0].id;
+}
+function stageIcon(st) {
+    const el = h('span', { class: `icon ${st.status}` });
+    if (st.status === 'confirmed')
+        el.append(icon(ICONS.check));
+    else if (st.status === 'failed')
+        el.append(icon(ICONS.x));
+    else if (st.status === 'unverified')
+        el.append('?');
+    return el;
+}
+function renderHeader(s) {
+    $('cmd').textContent = s.command.join(' ');
+    $('cmd').title = `${s.command.join(' ')}\nin ${s.cwd}`;
+    const mode = $('mode');
+    mode.textContent = s.mode === 'demo' ? 'Demo replay' : s.mode === 'replay' ? 'Saved run' : 'Live';
+    mode.className = `badge ${s.mode}`;
+    const status = $('status');
+    status.className = `pill ${s.outcome}`;
+    status.textContent = { running: 'Running', success: s.stages.at(-1)?.status === 'confirmed' ? (s.notes?.success ?? 'Done') : 'Exited 0', failure: 'Failed', interrupted: 'Stopped' }[s.outcome];
+    $('saved').replaceChildren(...(s.savedTo ? ['Saved to ', h('code', {}, s.savedTo)] : s.mode === 'demo' ? ['Demo data: recorded output, nothing is sent anywhere.'] : []));
+    document.title = `${status.textContent} · Unfold`;
+}
+function renderElapsed() {
+    if (!state)
+        return;
+    const end = state.endedAt ?? Date.now();
+    const s = Math.max(0, (end - state.startedAt) / 1000);
+    $('elapsed').textContent = s < 60 ? `${s.toFixed(1)}s` : `${Math.floor(s / 60)}m ${Math.round(s % 60)}s`;
+}
+function fact(s, key) {
+    return s.facts.find((f) => f.key === key);
+}
+function primaryError(s) {
+    return s.errors.find((e) => e.severity === 'fatal') ?? s.errors.at(-1);
+}
+function causes(s, stage) {
+    const fatal = primaryError(s);
+    return s.errors
+        .filter((e) => e.severity === 'cause' && (!stage || e.stage === stage) && e.message !== fatal?.message)
+        .sort((a, b) => (b.priority ?? 1) - (a.priority ?? 1) || a.seq - b.seq)
+        .slice(0, 6);
+}
+function extLink(href, label) {
+    const a = h('a', { class: 'btn', href, target: '_blank', rel: 'noreferrer noopener' }, label);
+    a.append(icon(ICONS.ext));
+    a.querySelector('svg').setAttribute('style', 'width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2');
+    return a;
+}
+function renderBanner(s) {
+    const el = $('banner');
+    const title = (id) => s.stages.find((st) => st.id === id)?.title ?? 'none';
+    const inspect = fact(s, 'inspectUrl') ?? fact(s, 'logsUrl');
+    if (s.outcome === 'running') {
+        el.hidden = true;
+        return;
+    }
+    el.hidden = false;
+    el.className = `banner ${s.outcome}`;
+    if (s.outcome === 'failure') {
+        const err = primaryError(s);
+        const cause = causes(s)[0];
+        fill(el, h('h2', {}, `Failed during ${title(s.failedStage)}`), h('p', {}, `Last confirmed stage: ${title(s.lastConfirmed)}. Exit code ${s.exitCode ?? s.exitSignal ?? 'unknown'}.`), err ? h('div', { class: 'err' }, err.message) : h('p', {}, 'The command failed without printing a recognizable error. Check the logs.'), cause ? h('p', {}, 'Most relevant output: ', h('code', {}, cause.message)) : null, h('div', { class: 'actions' }, h('button', { class: 'btn primary', onclick: () => jumpTo((cause ?? err)?.seq) }, 'Jump to the error in the logs'), h('button', { class: 'btn', onclick: () => select(s.failedStage) }, `Open the ${title(s.failedStage)} stage`), inspect && inspect.href ? extLink(inspect.href, `Open ${inspect.label}`) : null), s.fix ? fixPanel(s) : null);
+    }
+    else if (s.outcome === 'success') {
+        const url = fact(s, 'alias') ?? fact(s, 'deploymentUrl');
+        const live = s.stages.at(-1)?.status === 'confirmed';
+        fill(el, h('h2', {}, live ? (s.notes?.successHeadline ?? 'Finished') : 'Command finished, but its output never confirmed the last stage'), live ? null : h('p', {}, "The command exited with code 0, but its output never confirmed the deployment went live."), url?.href ? h('a', { class: 'live-url', href: url.href, target: '_blank', rel: 'noreferrer noopener' }, url.value) : h('p', {}, 'The command succeeded.'), fact(s, 'protection') ? h('p', {}, 'Deployment Protection is on, so visitors may need to sign in to Vercel.') : null, h('div', { class: 'actions' }, url?.value ? h('button', { class: 'btn', onclick: (e) => copy(url.value, e.currentTarget) }, 'Copy URL') : null, inspect?.href ? extLink(inspect.href, `Open ${inspect.label}`) : null));
+    }
+    else {
+        fill(el, h('h2', {}, 'Stopped with Ctrl+C'), h('p', {}, `Last confirmed stage: ${title(s.lastConfirmed)}. ${s.stages.find((st) => st.status === 'unverified' && st.note)?.note ?? ''}`), h('div', { class: 'actions' }, inspect?.href ? extLink(inspect.href, `Open ${inspect.label}`) : null, h('button', { class: 'btn', onclick: () => openLogs(true) }, 'View logs')));
+    }
+}
+/** A ready-made prompt so a coding agent can pick up the failure. */
+function fixPanel(s) {
+    const fix = s.fix;
+    const name = fixAgent === 'claude' ? 'Claude Code' : 'Codex';
+    const command = fix.commands?.[fixAgent];
+    const seg = (agent, label) => h('button', { class: 'seg-btn', 'aria-pressed': String(fixAgent === agent), onclick: () => ((fixAgent = agent), render()) }, label);
+    return h('div', { class: 'fix' }, h('div', { class: 'fix-head' }, h('strong', {}, 'Fix it with an AI agent'), h('span', { class: 'seg', role: 'group', 'aria-label': 'Agent' }, seg('claude', 'Claude Code'), seg('codex', 'Codex'))), h('p', {}, 'Unfold wrote a prompt from this run: the error, the likely cause, a redacted log excerpt and hints about this stage. ', command ? `Run this in your project folder to start ${name} with it:` : `Copy it into ${name}.`), command ? h('div', { class: 'cmdline' }, h('code', {}, command), h('button', { class: 'btn', onclick: (e) => copy(command, e.currentTarget, 'Copy command') }, 'Copy command')) : null, h('div', { class: 'actions' }, h('button', { class: 'btn', onclick: (e) => copy(fix.prompt, e.currentTarget, 'Copy prompt') }, 'Copy prompt'), h('button', { class: 'btn', 'aria-expanded': String(fixPromptOpen), onclick: () => ((fixPromptOpen = !fixPromptOpen), render()) }, fixPromptOpen ? 'Hide prompt' : 'Show prompt')), fixPromptOpen ? h('pre', { class: 'prompt' }, fix.prompt) : null, h('p', { class: 'fine' }, 'Tip: ', h('code', {}, `unfold vercel --fix ${fixAgent}`), ` starts ${name} automatically when a deploy fails.`));
+}
+function renderFlow(s) {
+    const nav = $('flow');
+    nav.style.setProperty('--n', String(s.stages.length));
+    const current = selected ?? autoStage(s);
+    nav.replaceChildren(...s.stages.map((st, i) => h('button', {
+        class: `stage ${st.status}${i > 0 && s.stages[i - 1].status === 'confirmed' ? ' prev-confirmed' : ''}`,
+        role: 'tab',
+        id: `tab-${st.id}`,
+        'aria-selected': String(st.id === current),
+        'aria-controls': 'detail',
+        tabindex: st.id === current ? '0' : '-1',
+        onclick: () => select(st.id),
+    }, h('span', { class: 'stage-head' }, stageIcon(st), h('span', { class: 'stage-title' }, st.title), h('span', { class: 'stage-num' }, `${i + 1}/${s.stages.length}`)), h('span', { class: 'stage-status' }, STATUS_LABEL[st.status]), h('span', { class: 'stage-note' }, st.note ?? st.summary))));
+}
+// Build log lines carry an ISO timestamp; the relative time column already says when.
+const stripStamp = (text) => text.replace(/^\d{4}-\d{2}-\d{2}T[\d:.]+Z\s*/, '');
+function evidenceItem(seq, at, note, rawText) {
+    const text = stripStamp(rawText);
+    return h('li', {}, h('span', { class: 'ev-time' }, rel(at)), h('span', { class: 'ev-note' }, note), h('span', { class: 'ev-line' }, h('code', { title: text }, text), h('button', { class: 'jump', onclick: () => jumpTo(seq) }, `line ${seq} →`)));
+}
+function renderDetail(s) {
+    const id = selected ?? autoStage(s);
+    const st = s.stages.find((x) => x.id === id) ?? s.stages[0];
+    const facts = s.facts.filter((f) => f.stage === st.id);
+    const stageCauses = st.status === 'failed' ? causes(s, st.id) : [];
+    const fatal = st.status === 'failed' ? s.errors.find((e) => e.severity === 'fatal' && e.stage === st.id) : undefined;
+    const statusText = st.status === 'pending' ? 'Not started yet. Nothing about this stage has appeared in the output.' : st.note ?? STATUS_LABEL[st.status];
+    const observed = h('div', { class: 'card observed' }, h('div', { class: 'kicker observed' }, icon(ICONS.eye), "Observed in this run"), h('h3', {}, stageIcon(st), st.title, h('span', { class: 'stage-status' }, STATUS_LABEL[st.status])), h('div', { class: `status-line ${st.status}` }, statusText), fatal ? h('div', { class: 'causes' }, h('div', { class: 'sub' }, 'Error'), h('span', { class: 'ev-line' }, h('code', { title: fatal.message }, fatal.message), h('button', { class: 'jump', onclick: () => jumpTo(fatal.seq) }, `line ${fatal.seq} →`))) : null, stageCauses.length
+        ? h('div', { class: 'causes' }, h('div', { class: 'sub' }, 'Lines that look like the cause'), ...stageCauses.map((c) => h('span', { class: 'ev-line' }, h('code', { title: c.message }, c.message), h('button', { class: 'jump', onclick: () => jumpTo(c.seq) }, `line ${c.seq} →`))))
+        : null, facts.length
+        ? h('dl', { class: 'facts' }, ...facts.flatMap((f) => [h('dt', {}, f.label), h('dd', {}, f.href ? h('a', { href: f.href, target: '_blank', rel: 'noreferrer noopener' }, f.value) : f.value)]))
+        : null, st.evidence.length
+        ? h('div', { class: 'sub' }, 'Evidence from the output')
+        : null, st.evidence.length
+        ? h('ul', { class: 'evidence' }, ...st.evidence.map((e) => evidenceItem(e.seq, e.at, e.note, logs.get(e.seq)?.text ?? e.text)))
+        : h('p', { class: 'empty' }, 'No output from this run relates to this stage.'));
+    const explain = h('div', { class: 'card explain' }, h('div', { class: 'kicker' }, icon(ICONS.book), 'How this stage works · general, not from this run'), h('p', { class: 'summary' }, st.summary), ...st.explanation.map((p) => h('p', {}, p)), h('p', { class: 'confirm' }, h('b', {}, 'What would confirm it: '), st.confirmedBy), st.docsUrl ? h('a', { href: st.docsUrl, target: '_blank', rel: 'noreferrer noopener' }, s.notes?.docsLabel ?? 'Docs') : null);
+    $('detail').setAttribute('aria-labelledby', `tab-${st.id}`);
+    $('detail').replaceChildren(observed, explain);
+}
+function render() {
+    if (!state)
+        return;
+    renderHeader(state);
+    renderBanner(state);
+    renderFlow(state);
+    renderDetail(state);
+    renderElapsed();
+    markLogLines();
+}
+// ---------- logs ----------
+function evidenceSeqs() {
+    const ev = new Set();
+    const err = new Set();
+    state?.stages.forEach((st) => st.evidence.forEach((e) => ev.add(e.seq)));
+    state?.errors.forEach((e) => err.add(e.seq));
+    return { ev, err };
+}
+function markLogLines() {
+    const { ev, err } = evidenceSeqs();
+    for (const [seq, li] of logEls) {
+        li.classList.toggle('ev', ev.has(seq) && !err.has(seq));
+        li.classList.toggle('err', err.has(seq));
+    }
+    applyFilter();
+}
+function upsertLogs(lines) {
+    const list = $('log-lines');
+    const atBottom = list.scrollTop + list.clientHeight >= list.scrollHeight - 30;
+    for (const line of lines) {
+        logs.set(line.seq, line);
+        let li = logEls.get(line.seq);
+        if (!li) {
+            li = h('li', { id: `L${line.seq}` }, h('span', { class: 'ln' }, String(line.seq)), h('span', { class: 'lt' }), h('span', { class: 'tx' }));
+            logEls.set(line.seq, li);
+            list.append(li);
+        }
+        li.querySelector('.lt').textContent = rel(line.at);
+        li.querySelector('.tx').textContent = line.text;
+    }
+    $('log-count').textContent = `${logs.size} lines`;
+    if ($('follow').checked && atBottom)
+        list.scrollTop = list.scrollHeight;
+}
+function applyFilter() {
+    const q = $('log-filter').value.toLowerCase();
+    const errorsOnly = $('errors-only').checked;
+    for (const [seq, li] of logEls) {
+        const text = logs.get(seq)?.text.toLowerCase() ?? '';
+        li.hidden = (q !== '' && !text.includes(q)) || (errorsOnly && !li.classList.contains('err'));
+    }
+}
+function openLogs(open) {
+    logsOpen = open;
+    $('log-lines').hidden = !open;
+    $('logs-toggle').setAttribute('aria-expanded', String(open));
+}
+function jumpTo(seq) {
+    openLogs(true);
+    $('log-filter').value = '';
+    $('errors-only').checked = false;
+    $('follow').checked = false;
+    applyFilter();
+    const li = seq !== undefined ? logEls.get(seq) : undefined;
+    $('logs').scrollIntoView({ behavior: 'smooth', block: 'start' });
+    if (!li)
+        return;
+    const list = $('log-lines');
+    list.scrollTop = li.offsetTop - list.offsetTop - list.clientHeight / 3;
+    li.classList.remove('flash');
+    void li.offsetWidth;
+    li.classList.add('flash');
+}
+// ---------- interaction ----------
+function select(id) {
+    selected = id;
+    render();
+    if (id)
+        document.getElementById(`tab-${id}`)?.focus();
+}
+async function copy(text, btn, label = 'Copy URL') {
+    try {
+        await navigator.clipboard.writeText(text);
+        btn.textContent = 'Copied';
+    }
+    catch {
+        btn.textContent = 'Copy failed';
+    }
+    setTimeout(() => (btn.textContent = label), 1500);
+}
+$('flow').addEventListener('keydown', (e) => {
+    if (!state || !['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(e.key))
+        return;
+    e.preventDefault();
+    const ids = state.stages.map((s) => s.id);
+    const i = ids.indexOf(selected ?? autoStage(state));
+    const next = e.key === 'ArrowLeft' || e.key === 'ArrowUp' ? Math.max(0, i - 1) : Math.min(ids.length - 1, i + 1);
+    select(ids[next]);
+});
+$('logs-toggle').addEventListener('click', () => openLogs(!logsOpen));
+$('log-filter').addEventListener('input', applyFilter);
+$('errors-only').addEventListener('change', applyFilter);
+document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape' && selected) {
+        selected = undefined; // go back to following the run
+        render();
+    }
+});
+// ---------- connection ----------
+function reset() {
+    logs.clear();
+    logEls.clear();
+    $('log-lines').replaceChildren();
+    selected = undefined;
+}
+const es = new EventSource('/api/events');
+es.addEventListener('snapshot', (e) => {
+    const data = JSON.parse(e.data);
+    reset();
+    state = data.state;
+    upsertLogs(data.logs);
+    if (state.outcome === 'failure')
+        openLogs(true);
+    render();
+});
+es.addEventListener('reset', () => reset());
+es.addEventListener('logs', (e) => upsertLogs(JSON.parse(e.data)));
+es.addEventListener('state', (e) => {
+    const prev = state?.outcome;
+    state = JSON.parse(e.data);
+    if (prev === 'running' && state.outcome === 'failure')
+        openLogs(true);
+    render();
+});
+es.addEventListener('error', () => {
+    if (state && state.outcome !== 'running')
+        es.close(); // the run is over and Unfold exited; keep the last view
+});
+setInterval(() => state?.outcome === 'running' && renderElapsed(), 250);
+export {};

package/dist/ui/index.html

@@ -0,0 +1,60 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Unfold</title>
+    <link rel="stylesheet" href="/styles.css" />
+  </head>
+  <body>
+    <header class="top">
+      <div class="brand">
+        <svg class="mark" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 6h6l2 3h8M4 12h10l2 3h4M4 18h14" /></svg>
+        <span class="name">Unfold</span>
+        <span class="tagline">Watch what happens after you hit Enter.</span>
+      </div>
+      <div class="run-meta">
+        <span id="mode" class="badge"></span>
+        <code id="cmd" class="cmd"></code>
+        <span id="status" class="pill"></span>
+        <span id="elapsed" class="elapsed"></span>
+      </div>
+    </header>
+
+    <main>
+      <section id="banner" class="banner" hidden></section>
+
+      <section class="flow-wrap" aria-label="Deploy flow">
+        <nav id="flow" class="flow" role="tablist"></nav>
+        <div class="legend">
+          <span><i class="dot confirmed"></i>Confirmed by this run's output</span>
+          <span><i class="dot active"></i>In progress</span>
+          <span><i class="dot failed"></i>Failed</span>
+          <span><i class="dot unverified"></i>Unverified: output didn't confirm it</span>
+        </div>
+      </section>
+
+      <section id="detail" class="detail" role="tabpanel"></section>
+
+      <section id="logs" class="logs">
+        <div class="logs-bar">
+          <button id="logs-toggle" class="logs-toggle" aria-expanded="false">
+            <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 6l6 6-6 6" /></svg>
+            Logs <span id="log-count" class="count"></span>
+          </button>
+          <input id="log-filter" type="search" placeholder="Filter lines" aria-label="Filter log lines" />
+          <label class="check"><input id="errors-only" type="checkbox" /> Errors only</label>
+          <label class="check"><input id="follow" type="checkbox" checked /> Follow</label>
+        </div>
+        <ol id="log-lines" class="log-lines" hidden></ol>
+      </section>
+    </main>
+
+    <footer class="foot">
+      <span>Captured locally. Secrets are redacted before anything is shown or saved. Environment variables are never recorded.</span>
+      <span id="saved"></span>
+    </footer>
+
+    <script type="module" src="/app.js"></script>
+  </body>
+</html>

package/dist/ui/styles.css

@@ -0,0 +1,220 @@
+:root {
+  --bg: #fafafa;
+  --surface: #ffffff;
+  --surface-2: #f4f4f5;
+  --border: #e4e4e7;
+  --text: #18181b;
+  --muted: #71717a;
+  --faint: #a1a1aa;
+  --accent: #2563eb;
+  --accent-soft: #dbeafe;
+  --ok: #16a34a;
+  --ok-soft: #dcfce7;
+  --bad: #dc2626;
+  --bad-soft: #fee2e2;
+  --warn: #b45309;
+  --warn-soft: #fef3c7;
+  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  --sans: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+  --radius: 10px;
+  color-scheme: light;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #0b0b0d;
+    --surface: #141417;
+    --surface-2: #1c1c20;
+    --border: #2a2a30;
+    --text: #f4f4f5;
+    --muted: #a1a1aa;
+    --faint: #71717a;
+    --accent: #60a5fa;
+    --accent-soft: #172554;
+    --ok: #4ade80;
+    --ok-soft: #052e16;
+    --bad: #f87171;
+    --bad-soft: #3b0a0a;
+    --warn: #fbbf24;
+    --warn-soft: #3a2a05;
+    color-scheme: dark;
+  }
+}
+
+* { box-sizing: border-box; }
+html, body { margin: 0; }
+body {
+  background: var(--bg);
+  color: var(--text);
+  font: 14px/1.5 var(--sans);
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+a { color: var(--accent); }
+code, .mono { font-family: var(--mono); font-size: 12.5px; }
+button { font: inherit; color: inherit; }
+[hidden] { display: none !important; }
+
+/* Header */
+.top {
+  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
+  padding: 14px 24px; border-bottom: 1px solid var(--border); background: var(--surface);
+}
+.brand { display: flex; align-items: baseline; gap: 10px; }
+.mark { width: 18px; height: 18px; align-self: center; fill: none; stroke: var(--text); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
+.name { font-weight: 650; letter-spacing: -0.01em; }
+.tagline { color: var(--muted); font-size: 13px; }
+.run-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
+.cmd { background: var(--surface-2); border: 1px solid var(--border); padding: 3px 8px; border-radius: 6px; max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.cmd::before { content: '$ '; color: var(--faint); }
+.badge { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; }
+.badge.demo { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
+.pill { font-size: 12px; font-weight: 600; padding: 2px 10px; border-radius: 999px; background: var(--surface-2); }
+.pill.running { background: var(--accent-soft); color: var(--accent); }
+.pill.success { background: var(--ok-soft); color: var(--ok); }
+.pill.failure { background: var(--bad-soft); color: var(--bad); }
+.pill.interrupted { background: var(--warn-soft); color: var(--warn); }
+.elapsed { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 13px; }
+
+main { width: 100%; max-width: 1120px; margin: 0 auto; padding: 24px; display: flex; flex-direction: column; gap: 20px; flex: 1; }
+
+/* Banner */
+.banner { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; background: var(--surface); display: grid; gap: 8px; }
+.banner h2 { margin: 0; font-size: 16px; }
+.banner p { margin: 0; color: var(--muted); }
+.banner.failure { border-color: color-mix(in srgb, var(--bad) 45%, var(--border)); background: color-mix(in srgb, var(--bad-soft) 55%, var(--surface)); }
+.banner.success { border-color: color-mix(in srgb, var(--ok) 40%, var(--border)); background: color-mix(in srgb, var(--ok-soft) 50%, var(--surface)); }
+.banner.interrupted { border-color: color-mix(in srgb, var(--warn) 45%, var(--border)); background: color-mix(in srgb, var(--warn-soft) 55%, var(--surface)); }
+.banner .err { font-family: var(--mono); font-size: 12.5px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; white-space: pre-wrap; word-break: break-word; }
+.banner .live-url { font-family: var(--mono); font-size: 14px; word-break: break-all; }
+.actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
+.btn { border: 1px solid var(--border); background: var(--surface); padding: 5px 12px; border-radius: 7px; cursor: pointer; font-size: 13px; text-decoration: none; color: var(--text); display: inline-flex; align-items: center; gap: 6px; }
+.btn:hover { border-color: var(--faint); }
+.btn.primary { background: var(--text); color: var(--bg); border-color: var(--text); }
+
+/* Fix with an agent */
+.fix { margin-top: 6px; border-top: 1px solid color-mix(in srgb, var(--bad) 25%, var(--border)); padding-top: 12px; display: grid; gap: 8px; }
+.fix-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
+.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--surface); }
+.seg-btn { border: 0; background: none; padding: 4px 12px; font-size: 13px; cursor: pointer; color: var(--muted); }
+.seg-btn[aria-pressed='true'] { background: var(--text); color: var(--bg); }
+.cmdline { display: flex; gap: 8px; align-items: center; min-width: 0; }
+.cmdline code { flex: 1; min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; overflow-x: auto; white-space: nowrap; }
+.prompt { margin: 0; max-height: 320px; overflow: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; font-family: var(--mono); font-size: 12px; white-space: pre-wrap; word-break: break-word; }
+.fine { font-size: 12.5px; }
+.fine code { font-size: 12px; }
+
+/* Flow */
+.flow-wrap { display: grid; gap: 10px; }
+.flow { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: 0; }
+.stage {
+  position: relative; text-align: left; border: 1px solid var(--border); background: var(--surface);
+  border-radius: var(--radius); padding: 14px 14px 12px; cursor: pointer; margin: 0 10px; min-width: 0;
+  display: grid; gap: 6px; transition: border-color .15s, box-shadow .15s, transform .15s;
+}
+.stage:first-child { margin-left: 0; }
+.stage:last-child { margin-right: 0; }
+.stage:hover { border-color: var(--faint); }
+.stage:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.stage[aria-selected='true'] { border-color: var(--text); box-shadow: 0 1px 0 var(--text), 0 6px 20px -12px rgb(0 0 0 / .35); }
+.stage + .stage::before {
+  content: ''; position: absolute; left: -21px; top: 27px; width: 20px; height: 2px; background: var(--border);
+}
+.stage.prev-confirmed::before { background: var(--ok); }
+.stage-head { display: flex; align-items: center; gap: 10px; }
+.stage-num { color: var(--faint); font-size: 12px; font-variant-numeric: tabular-nums; margin-left: auto; }
+.stage-title { font-weight: 600; }
+.stage-note { color: var(--muted); font-size: 12.5px; line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 2.8em; }
+.stage-status { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
+.stage.confirmed .stage-status { color: var(--ok); }
+.stage.failed .stage-status { color: var(--bad); }
+.stage.active .stage-status { color: var(--accent); }
+.stage.unverified .stage-status { color: var(--warn); }
+.stage.failed { border-color: color-mix(in srgb, var(--bad) 50%, var(--border)); }
+.stage.unverified { border-style: dashed; }
+
+.icon { width: 22px; height: 22px; flex: none; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--border); }
+.icon svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
+.icon.confirmed { background: var(--ok); border-color: var(--ok); color: var(--surface); }
+.icon.failed { background: var(--bad); border-color: var(--bad); color: var(--surface); }
+.icon.active { border-color: var(--accent); border-top-color: transparent; animation: spin 0.9s linear infinite; }
+.icon.unverified { border-style: dashed; border-color: var(--warn); color: var(--warn); font-size: 12px; font-weight: 700; }
+@keyframes spin { to { transform: rotate(360deg); } }
+@media (prefers-reduced-motion: reduce) { .icon.active { animation: none; border-top-color: var(--accent); } }
+
+.legend { display: flex; gap: 16px; flex-wrap: wrap; color: var(--muted); font-size: 12px; }
+.legend span { display: inline-flex; align-items: center; gap: 6px; }
+.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; border: 2px solid var(--border); }
+.dot.confirmed { background: var(--ok); border-color: var(--ok); }
+.dot.active { border-color: var(--accent); }
+.dot.failed { background: var(--bad); border-color: var(--bad); }
+.dot.unverified { border-style: dashed; border-color: var(--warn); }
+
+/* Detail */
+.detail { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; align-items: start; }
+.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; display: grid; gap: 12px; min-width: 0; }
+.card.explain { background: var(--surface-2); border-style: dashed; }
+.kicker { display: flex; align-items: center; gap: 8px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 600; color: var(--muted); }
+.kicker svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
+.kicker.observed { color: var(--text); }
+.card h3 { margin: 0; font-size: 17px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
+.card p { margin: 0; }
+.explain p { color: var(--muted); }
+.explain .summary { color: var(--text); font-weight: 500; }
+.confirm { font-size: 13px; border-top: 1px solid var(--border); padding-top: 10px; color: var(--muted); }
+.confirm b { color: var(--text); font-weight: 600; }
+.status-line { padding: 10px 12px; border-radius: 8px; background: var(--surface-2); font-size: 13.5px; }
+.status-line.failed { background: var(--bad-soft); color: var(--bad); }
+.status-line.unverified { background: var(--warn-soft); color: var(--warn); }
+.status-line.confirmed { background: var(--ok-soft); color: var(--ok); }
+.status-line.active { background: var(--accent-soft); color: var(--accent); }
+.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 0; font-size: 13px; }
+.facts dt { color: var(--muted); }
+.facts dd { margin: 0; font-family: var(--mono); font-size: 12.5px; word-break: break-all; }
+.evidence { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
+.evidence li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 4px 10px; align-items: start; }
+.ev-time { color: var(--faint); font-size: 12px; font-variant-numeric: tabular-nums; padding-top: 1px; }
+.ev-note { font-size: 13px; }
+.ev-line { grid-column: 2; display: flex; align-items: baseline; gap: 8px; min-width: 0; }
+.ev-line code { background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px; padding: 2px 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
+.jump { border: 0; background: none; color: var(--accent); cursor: pointer; font-size: 12px; padding: 0; white-space: nowrap; }
+.jump:hover { text-decoration: underline; }
+.empty { color: var(--muted); font-size: 13px; }
+.causes { display: grid; gap: 6px; }
+.causes .ev-line { grid-column: auto; }
+.sub { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 4px; }
+
+/* Logs */
+.logs { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
+.logs-bar { display: flex; align-items: center; gap: 12px; padding: 8px 12px; flex-wrap: wrap; }
+.logs-toggle { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; font-weight: 600; cursor: pointer; padding: 4px 0; }
+.logs-toggle svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.5; transition: transform .15s; }
+.logs-toggle[aria-expanded='true'] svg { transform: rotate(90deg); }
+.count { color: var(--muted); font-weight: 400; }
+#log-filter { margin-left: auto; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); border-radius: 6px; padding: 4px 8px; font: inherit; font-size: 13px; width: 200px; max-width: 100%; }
+.check { display: inline-flex; gap: 5px; align-items: center; color: var(--muted); font-size: 13px; }
+.log-lines { list-style: none; margin: 0; padding: 6px 0; max-height: 420px; overflow: auto; border-top: 1px solid var(--border); background: var(--surface-2); font-family: var(--mono); font-size: 12px; line-height: 1.6; }
+.log-lines li { display: grid; grid-template-columns: 48px 60px minmax(0, 1fr); padding: 0 12px; white-space: pre-wrap; word-break: break-word; }
+.log-lines li.ev { box-shadow: inset 2px 0 0 var(--ok); }
+.log-lines li.err { color: var(--bad); box-shadow: inset 2px 0 0 var(--bad); }
+.log-lines li.flash { animation: flash 1.6s ease-out; }
+@keyframes flash { from { background: color-mix(in srgb, var(--accent) 30%, transparent); } to { background: transparent; } }
+.ln { color: var(--faint); text-align: right; padding-right: 12px; user-select: none; }
+.lt { color: var(--faint); user-select: none; }
+
+.foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 12px 24px; color: var(--faint); font-size: 12px; border-top: 1px solid var(--border); }
+.foot code { font-size: 11.5px; }
+
+.connecting { color: var(--muted); padding: 40px; text-align: center; }
+
+@media (max-width: 820px) {
+  main { padding: 16px; }
+  .top { padding: 12px 16px; }
+  .flow { grid-template-columns: 1fr; gap: 10px; }
+  .stage, .stage:first-child, .stage:last-child { margin: 0; }
+  .stage + .stage::before { left: 25px; top: -11px; width: 2px; height: 10px; }
+  .detail { grid-template-columns: 1fr; }
+  .log-lines li { grid-template-columns: 36px minmax(0, 1fr); }
+  .lt { display: none; }
+}