@yemi33/minions 0.1.2100 → 0.1.2102

package/dashboard/slim/js/command-send.js

@@ -0,0 +1,190 @@
+  function describeAction(action) {
+    if (!action || !action.type) return 'action';
+    var t = action.type;
+    var label = action.title || action.id || action.file || action.agent || '';
+    return label ? t + ': ' + label : t;
+  }
+  function renderActionResults(actions, results) {
+    if (!actions || !actions.length) return;
+    for (var i = 0; i < actions.length; i++) {
+      var action = actions[i];
+      var r = (results && results[i]) || null;
+      var label = describeAction(action);
+      var severity = 'ok';
+      var symbol = '✓';
+      var detail = '';
+      if (r && r.error) { severity = 'err'; symbol = '✗'; detail = ' — ' + r.error; }
+      else if (r && r.warning) { severity = 'warn'; symbol = 'ℹ'; detail = ' — ' + r.warning; }
+      else if (r && r.duplicate) { severity = 'warn'; symbol = '↺'; detail = ' (already exists)'; }
+      var text = symbol + ' ' + label + detail;
+      appendActionStatus(severity, text);
+      messages.push({ role: 'action', severity: severity, text: text });
+    }
+    saveState();
+  }
+
+  async function sendMessage() {
+    if (sending) return;
+    var text = inputEl.value.trim();
+    if (!text) return;
+
+    appendBubble('user', text);
+    messages.push({ role: 'user', text: text });
+    saveState();
+
+    inputEl.value = '';
+    inputEl.style.height = 'auto';
+    setSending(true);
+
+    var stream = buildStreamBubble();
+    var streamedText = '';
+    abortController = new AbortController();
+    var userAborted = false;
+    var timeoutSignal = null;
+    try { timeoutSignal = AbortSignal.timeout(STREAM_TIMEOUT_MS); } catch (_e) { /* old browsers */ }
+    var signal = timeoutSignal && AbortSignal.any
+      ? AbortSignal.any([abortController.signal, timeoutSignal])
+      : abortController.signal;
+
+    try {
+      var res = await fetch('/api/command-center/stream', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ message: text, tabId: tabId, sessionId: sessionId, currentProject: currentProject || undefined }),
+        signal: signal,
+      });
+      if (!res.ok) {
+        var errBody = await res.text().catch(function() { return ''; });
+        throw new Error('HTTP ' + res.status + (errBody ? ': ' + errBody.slice(0, 200) : ''));
+      }
+      if (!res.body || !res.body.getReader) {
+        throw new Error('Streaming not supported by this browser.');
+      }
+
+      var reader = res.body.getReader();
+      var decoder = new TextDecoder();
+      var buf = '';
+      var doneEvt = null;
+      var errorEvt = null;
+
+      while (true) {
+        var r = await reader.read();
+        if (r.done) break;
+        buf += decoder.decode(r.value, { stream: true });
+        var lines = buf.split('\n');
+        buf = lines.pop();
+        for (var i = 0; i < lines.length; i++) {
+          var line = lines[i];
+          if (!line.startsWith('data: ')) continue;
+          var evt;
+          try { evt = JSON.parse(line.slice(6)); } catch (_e) { continue; }
+          if (evt.type === 'chunk') {
+            streamedText = mergeStreamText(streamedText, evt.text || '');
+            stream.setText(streamedText);
+          } else if (evt.type === 'tool') {
+            stream.addTool(evt.name, evt.input || {});
+          } else if (evt.type === 'heartbeat') {
+            /* server keep-alive — ignored on purpose */
+          } else if (evt.type === 'done') {
+            doneEvt = evt;
+          } else if (evt.type === 'error') {
+            errorEvt = evt;
+          }
+        }
+      }
+
+      if (errorEvt) {
+        stream.replaceWithError(errorEvt.error || 'Error');
+        messages.push({ role: 'error', text: errorEvt.error || 'Error' });
+        saveState();
+        return;
+      }
+
+      if (doneEvt) {
+        var finalText = mergeStreamText(streamedText, doneEvt.text || '');
+        stream.finalize(finalText || '(no response)');
+        messages.push({ role: 'assistant', text: finalText || '(no response)', toolCalls: stream.getToolList() });
+        if (doneEvt.sessionId !== undefined) sessionId = doneEvt.sessionId || null;
+        saveState();
+        if (doneEvt.actionParseError) {
+          var pe = '⚠️ Actions block emitted but JSON could not be parsed — no actions executed.';
+          appendActionStatus('err', pe);
+          messages.push({ role: 'action', severity: 'err', text: pe });
+          saveState();
+        }
+        if (doneEvt.actions && doneEvt.actions.length > 0) {
+          renderActionResults(doneEvt.actions, doneEvt.actionResults || []);
+        }
+        // Refresh status + history opportunistically — actions probably
+        // changed something.
+        scheduleStatusRefresh(800);
+      } else {
+        stream.finalize(streamedText || '(stream ended before completion)');
+        messages.push({ role: 'assistant', text: streamedText || '(stream ended before completion)', toolCalls: stream.getToolList() });
+        saveState();
+      }
+    } catch (e) {
+      if (e && (e.name === 'AbortError' || /aborted/i.test(String(e.message || '')))) {
+        userAborted = true;
+        if (streamedText) {
+          stream.finalize(streamedText);
+          messages.push({ role: 'assistant', text: streamedText, toolCalls: stream.getToolList() });
+        } else {
+          stream.replaceWithError('Stopped.');
+          messages.push({ role: 'error', text: 'Stopped.' });
+        }
+        saveState();
+      } else {
+        var msg = 'Send failed: ' + (e && e.message ? e.message : e);
+        stream.replaceWithError(msg);
+        messages.push({ role: 'error', text: msg });
+        saveState();
+      }
+    } finally {
+      setSending(false);
+      abortController = null;
+      if (!userAborted) inputEl.focus();
+    }
+  }
+
+  function abortInFlight() {
+    if (!sending || !abortController) return;
+    try {
+      fetch('/api/command-center/abort', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ tabId: tabId }),
+      }).catch(function() {});
+    } catch (_e) { /* ignore */ }
+    try { abortController.abort(); } catch (_e) { /* ignore */ }
+  }
+
+  async function slimChatNew() {
+    if (sending) abortInFlight();
+    sessionId = null;
+    messages = [];
+    saveState();
+    rerenderHistory();
+    try {
+      fetch('/api/cc-sessions/' + encodeURIComponent(tabId), { method: 'DELETE' }).catch(function() {});
+    } catch (_e) { /* ignore */ }
+    inputEl.focus();
+  }
+
+  var newChatBtn = document.getElementById('slim-new-chat-btn');
+  if (newChatBtn) newChatBtn.addEventListener('click', slimChatNew);
+  sendBtn.addEventListener('click', sendMessage);
+  stopBtn.addEventListener('click', abortInFlight);
+  inputEl.addEventListener('keydown', function(ev) {
+    if (ev.key === 'Enter' && !ev.shiftKey) {
+      ev.preventDefault();
+      sendMessage();
+    }
+  });
+  inputEl.addEventListener('input', function() {
+    inputEl.style.height = 'auto';
+    inputEl.style.height = Math.min(inputEl.scrollHeight, 130) + 'px';
+  });
+
+  inputEl.focus();
+

package/dashboard/slim/js/helpers.js

@@ -0,0 +1,26 @@
+
+  // ── Helpers ────────────────────────────────────────────────────
+  function escHtml(s) {
+    return String(s == null ? '' : s)
+      .replace(/&/g, '&')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&#39;');
+  }
+
+  function relTime(iso) {
+    if (!iso) return '';
+    var t = typeof iso === 'number' ? iso : Date.parse(iso);
+    if (isNaN(t)) return '';
+    var s = Math.floor((Date.now() - t) / 1000);
+    if (s < 0) s = 0;
+    if (s < 60) return s + 's ago';
+    var m = Math.floor(s / 60);
+    if (m < 60) return m + 'm ago';
+    var h = Math.floor(m / 60);
+    if (h < 24) return h + 'h ago';
+    var d = Math.floor(h / 24);
+    return d + 'd ago';
+  }
+

package/dashboard/slim/js/history.js

@@ -0,0 +1,442 @@
+  // Completions Card helpers (W-betterHistory) — see the CSS block of the
+  // same name in dashboard/slim.html for the component layout reference.
+  // ─────────────────────────────────────────────────
+  // The type chip is a single emoji glyph. Map covers every value the
+  // engine can emit (14 WORK_TYPE constants + the synthetic 'qa-validate'
+  // routed via routing.md). Unknown types fall back to a generic marker
+  // and still get the raw type name in the hover tooltip.
+  var COMPLETION_TYPE_EMOJI = {
+    'implement':       '🔧',
+    'implement:large': '🛠️',
+    'fix':             '🐛',
+    'review':          '👀',
+    'verify':          '✅',
+    'test':            '🧪',
+    'plan':            '📋',
+    'plan-to-prd':     '📐',
+    'decompose':       '🪓',
+    'meeting':         '💬',
+    'explore':         '🔍',
+    'ask':             '❓',
+    'docs':            '📝',
+    'setup':           '⚙️',
+    'qa-validate':     '🎯',
+  };
+  function typeEmoji(t) {
+    if (!t) return '•';
+    return COMPLETION_TYPE_EMOJI[t] || '•';
+  }
+
+  // Pick the title for a completion card. Uses the dispatch description
+  // (c.task) — that's what the agent was actually told to do — falling back
+  // to the linked WI title only when no task description is present.
+  function completionTitle(c) {
+    var item = (c.meta && c.meta.item) || {};
+    return c.task || item.title || c.title || c.workItemTitle || c.id || '(untitled)';
+  }
+
+  // Status: 'ok' (success) | 'fail' (error) | 'warn' (partial managed-spawn).
+  function completionStatus(c) {
+    if (c._managedSpawnPartial) return 'warn';
+    if (c.result === 'success' || c.status === 'done') return 'ok';
+    return 'fail';
+  }
+
+  // Build one lineage chip with a fixed kind label + value (or "-" when
+  // absent). DOM-built (no innerHTML) so the SEC-03 baseline stays clean.
+  function buildLineageChip(kindLabel, value, tooltip) {
+    var chip = document.createElement('span');
+    chip.className = 'completions-card-chip';
+    chip.title = tooltip || kindLabel;
+    var labelEl = document.createElement('span');
+    labelEl.className = 'completions-card-chip-label';
+    labelEl.textContent = kindLabel + ':';
+    var valueEl = document.createElement('span');
+    valueEl.className = 'completions-card-chip-value';
+    valueEl.textContent = value == null || value === '' ? '-' : String(value);
+    chip.appendChild(labelEl);
+    chip.appendChild(valueEl);
+    return chip;
+  }
+
+  // Render a single completion card (DOM node). Returns the .history-item
+  // element with attached click handlers. Used by renderHistoryFeed.
+  function renderCompletionCard(c) {
+    var status = completionStatus(c);
+    var ts = c.completed_at || c.completedAt || c.endedAt || c.started_at || c.startedAt || c._ts;
+    var title = completionTitle(c);
+    var item = (c.meta && c.meta.item) || {};
+    var pr = (c.meta && c.meta.pr) || null;
+
+    var card = document.createElement('div');
+    card.className = 'history-item completions-card kind-' + (status === 'fail' ? 'failure' : 'completion');
+    card.setAttribute('role', 'button');
+    card.setAttribute('tabindex', '0');
+    card.title = title;
+
+    // Left rail: two rows. Top 70% = type emoji alone (prominent);
+    // bottom 30% = `<status-icon> · <relative-time>`, all in muted gray.
+    var rail = document.createElement('div');
+    rail.className = 'completions-card-rail';
+    var railTop = document.createElement('div');
+    railTop.className = 'completions-card-rail-top';
+    var chip = document.createElement('div');
+    chip.className = 'completions-card-type-chip';
+    chip.textContent = typeEmoji(c.type);
+    if (c.type) chip.title = c.type;
+    railTop.appendChild(chip);
+
+    var railBottom = document.createElement('div');
+    railBottom.className = 'completions-card-rail-bottom';
+    var icon = document.createElement('span');
+    icon.className = 'completions-card-status-icon ' + status;
+    icon.textContent = status === 'ok' ? '✓' : (status === 'warn' ? '⚠' : '✕');
+    icon.title = status === 'ok' ? 'Success' : (status === 'warn' ? 'Partial' : 'Failure');
+    var sep = document.createElement('span');
+    sep.className = 'completions-card-rail-sep';
+    sep.textContent = '·';
+    sep.setAttribute('aria-hidden', 'true');
+    var when = document.createElement('span');
+    when.className = 'completions-card-time';
+    when.textContent = ts ? relTime(ts) : '';
+    if (ts) when.title = new Date(ts).toLocaleString();
+    railBottom.appendChild(icon);
+    railBottom.appendChild(sep);
+    railBottom.appendChild(when);
+    rail.appendChild(railTop);
+    rail.appendChild(railBottom);
+
+    // Body-top — title + optional failure line. Lives in grid cell (col 2,
+    // row 1); rail-top centers vertically against this block via subgrid.
+    var bodyTop = document.createElement('div');
+    bodyTop.className = 'completions-card-body-top';
+    var titleEl = document.createElement('div');
+    titleEl.className = 'completions-card-title';
+    titleEl.textContent = title;
+    bodyTop.appendChild(titleEl);
+
+    if (status === 'fail' && (c.failureClass || c.reason)) {
+      var failLine = document.createElement('div');
+      failLine.className = 'completions-card-fail-line';
+      var truncatedReason = c.reason ? String(c.reason).slice(0, 120) : '';
+      if (c.failureClass) {
+        var fc = document.createElement('span');
+        fc.className = 'completions-card-fail-class';
+        fc.textContent = c.failureClass;
+        failLine.appendChild(fc);
+        if (truncatedReason) failLine.appendChild(document.createTextNode(' — ' + truncatedReason));
+      } else {
+        failLine.textContent = truncatedReason;
+      }
+      if (c.reason && c.reason.length > 120) failLine.title = c.reason;
+      bodyTop.appendChild(failLine);
+    }
+
+    // Bottom row: fixed 3-column lineage grid (WI / Plan / PR). Lives in
+    // grid cell (col 2, row 2); rail-bottom sits in the same parent row
+    // so the status·time line aligns with this chip row.
+    var lineage = document.createElement('div');
+    lineage.className = 'completions-card-lineage';
+    lineage.appendChild(buildLineageChip('WI', item.id || null,
+      item.id ? 'Work item: ' + item.id + (item.title ? ' — ' + item.title : '') : 'Work item: none'));
+    var planValue = item.sourcePlan ? String(item.sourcePlan).replace(/\.(md|json)$/i, '') : null;
+    lineage.appendChild(buildLineageChip('Plan', planValue,
+      item.sourcePlan ? 'Source plan: ' + item.sourcePlan : 'Source plan: none'));
+    var prRef = pr && (pr.id || pr.number) ? String(pr.id || pr.number) : null;
+    var prChip = buildLineageChip('PR', prRef ? '!' + prRef : null,
+      prRef ? 'Pull request: !' + prRef + (pr.url ? ' (' + pr.url + ')' : '') : 'Pull request: none');
+    if (prRef && pr && pr.url) {
+      prChip.classList.add('completions-card-chip-pr');
+      prChip.addEventListener('click', function(ev) {
+        ev.stopPropagation();
+        window.open(pr.url, '_blank', 'noopener');
+      });
+    }
+    lineage.appendChild(prChip);
+
+    // Three direct children of the 2x2 card grid: rail (spans both rows
+    // via subgrid), bodyTop (cell 2,1), lineage (cell 2,2).
+    card.appendChild(rail);
+    card.appendChild(bodyTop);
+    card.appendChild(lineage);
+
+    // Whole-card click → completion details modal.
+    card.addEventListener('click', function() { showCompletionDetails(c); });
+    card.addEventListener('keydown', function(ev) {
+      if (ev.key === 'Enter' || ev.key === ' ') {
+        ev.preventDefault();
+        showCompletionDetails(c);
+      }
+    });
+
+    return card;
+  }
+
+  // Modal: full task, resultSummary, linked WI, completion report contents.
+  // Closes on backdrop click or × button (wired below).
+  var _completionReportCache = {};
+  function showCompletionDetails(c) {
+    var modal = document.getElementById('slim-completions-modal');
+    var body = document.getElementById('slim-completions-body');
+    var titleEl = document.getElementById('slim-completions-title');
+    if (!modal || !body) return;
+
+    var status = completionStatus(c);
+    var statusText = status === 'ok' ? 'Success' : (status === 'warn' ? 'Partial' : 'Failure');
+    titleEl.textContent = statusText + ' · ' + (c.type || 'completion');
+
+    // Build modal body as DOM nodes (no innerHTML — keeps SEC-03 baseline happy).
+    body.replaceChildren();
+
+    var addSection = function(label, valueNode) {
+      var section = document.createElement('div');
+      section.className = 'completions-modal-section';
+      var lab = document.createElement('div');
+      lab.className = 'completions-modal-label';
+      lab.textContent = label;
+      section.appendChild(lab);
+      section.appendChild(valueNode);
+      body.appendChild(section);
+    };
+    var textValue = function(text) {
+      var v = document.createElement('div');
+      v.className = 'completions-modal-value';
+      v.textContent = text;
+      return v;
+    };
+
+    var title = completionTitle(c);
+    if (title) addSection('Task', textValue(title));
+
+    var taskFull = c.task && c.task !== title ? c.task : null;
+    if (taskFull) addSection('Dispatch description', textValue(taskFull));
+
+    var agentLine = (c.agentName || c.agent || '?') +
+      (c.agentRole ? ' (' + c.agentRole + ')' : '') +
+      (c.runtimeName ? ' · ' + c.runtimeName : '');
+    addSection('Agent', textValue(agentLine));
+
+    var startedAt = c.started_at || c.startedAt;
+    var completedAt = c.completed_at || c.completedAt;
+    if (startedAt || completedAt) {
+      var lines = [];
+      if (startedAt) lines.push('Started: ' + new Date(startedAt).toLocaleString());
+      if (completedAt) lines.push('Completed: ' + new Date(completedAt).toLocaleString());
+      if (startedAt && completedAt) {
+        var dur = Date.parse(completedAt) - Date.parse(startedAt);
+        if (dur > 0) lines.push('Duration: ' + formatDuration(dur));
+      }
+      addSection('Timing', textValue(lines.join('\n')));
+    }
+
+    if (status === 'fail' && (c.failureClass || c.reason)) {
+      var failBlock = c.failureClass ? (c.failureClass + (c.reason ? '\n\n' + c.reason : '')) : c.reason;
+      addSection('Failure', textValue(failBlock));
+    }
+
+    if (c.resultSummary) addSection('Result summary', textValue(c.resultSummary));
+
+    // Lineage: WI, source plan, PR.
+    var item = (c.meta && c.meta.item) || {};
+    var pr = (c.meta && c.meta.pr) || null;
+    if (item.id || item.sourcePlan || pr) {
+      var lineageWrap = document.createElement('div');
+      lineageWrap.className = 'completions-modal-value';
+      var lines2 = [];
+      if (item.id) lines2.push('Work item: #' + item.id + (item.title ? ' — ' + item.title : ''));
+      if (item.sourcePlan) lines2.push('Source plan: ' + item.sourcePlan);
+      if (pr) {
+        var prLine = 'PR: !' + (pr.id || pr.number || '?');
+        if (pr.url) prLine += ' (' + pr.url + ')';
+        if (pr.branch) prLine += '\n  branch: ' + pr.branch;
+        if (pr.buildStatus) prLine += '\n  build: ' + pr.buildStatus;
+        if (pr.reviewStatus) prLine += '\n  review: ' + pr.reviewStatus;
+        lines2.push(prLine);
+      }
+      lineageWrap.textContent = lines2.join('\n');
+      addSection('Lineage', lineageWrap);
+    }
+
+    // Completion report: lazy-fetch from meta.completionReportPath when present.
+    var reportPath = c.meta && c.meta.completionReportPath;
+    if (reportPath) {
+      var reportSection = document.createElement('div');
+      reportSection.className = 'completions-modal-section';
+      var reportLab = document.createElement('div');
+      reportLab.className = 'completions-modal-label';
+      reportLab.textContent = 'Completion report';
+      reportSection.appendChild(reportLab);
+      var reportBox = document.createElement('div');
+      reportBox.className = 'completions-modal-report';
+      reportBox.textContent = 'Loading…';
+      reportSection.appendChild(reportBox);
+      body.appendChild(reportSection);
+      var cacheKey = c.id || reportPath;
+      if (_completionReportCache[cacheKey]) {
+        reportBox.textContent = _completionReportCache[cacheKey];
+      } else if (!c.id) {
+        reportBox.textContent = '(report unavailable — no dispatch id)';
+      } else {
+        fetch('/api/dispatch/' + encodeURIComponent(c.id) + '/completion-report', {
+          headers: { 'Accept': 'application/json' },
+        }).then(function(r) {
+          if (!r.ok) throw new Error('HTTP ' + r.status);
+          return r.json();
+        }).then(function(payload) {
+          var pretty = JSON.stringify(payload, null, 2);
+          _completionReportCache[cacheKey] = pretty;
+          reportBox.textContent = pretty;
+        }).catch(function() {
+          reportBox.textContent = '(report unavailable — ' + reportPath + ')';
+        });
+      }
+    }
+
+    modal.classList.add('open');
+  }
+
+  function formatDuration(ms) {
+    if (ms < 1000) return ms + 'ms';
+    var s = Math.floor(ms / 1000);
+    if (s < 60) return s + 's';
+    var m = Math.floor(s / 60);
+    var rs = s % 60;
+    if (m < 60) return m + 'm ' + rs + 's';
+    var h = Math.floor(m / 60);
+    var rm = m % 60;
+    return h + 'h ' + rm + 'm';
+  }
+
+  // Bind completions-modal close handlers once (shared helper above).
+  bindModalClose('slim-completions-modal', 'slim-completions-close');
+
+  function renderHistoryFeed(input) {
+    var listEl = document.getElementById('history-list');
+    if (!listEl) return;
+    var events = [];
+
+    // Active dispatches (blue) — at the top so users know what's running.
+    (input.active || []).forEach(function(d) {
+      var ts = d.startedAt || d.dispatchedAt || d.createdAt || d._ts;
+      events.push({
+        kind: 'dispatch',
+        kindLabel: 'Dispatch',
+        title: describeDispatch(d),
+        meta: 'started ' + relTime(ts) + (d.workItemId ? ' · ' + d.workItemId : ''),
+        ts: ts ? Date.parse(ts) || Date.now() : Date.now(),
+      });
+    });
+
+    // Recent completions (green or red) — last 12 most recent first.
+    // Carry the raw record on the event so the new card renderer has access
+    // to lineage / failure / report fields without re-flattening.
+    (input.completed || []).slice().reverse().slice(0, 12).forEach(function(c) {
+      var ok = completionStatus(c) === 'ok';
+      var ts = c.completed_at || c.completedAt || c.endedAt || c.started_at || c.startedAt || c._ts;
+      events.push({
+        kind: ok ? 'completion' : 'failure',
+        raw: c,
+        ts: ts ? Date.parse(ts) || 0 : 0,
+      });
+    });
+
+    // PR events (amber) — shows PRs we're tracking, anchored on updatedAt.
+    // `metaUrl` carries the optional "open PR" link so the renderer can build
+    // it as a real <a> node instead of splicing raw HTML into innerHTML.
+    (input.prs || []).slice(0, 6).forEach(function(p) {
+      var ts = p.updatedAt || p.createdAt;
+      events.push({
+        kind: 'pr',
+        kindLabel: 'PR',
+        title: '#' + (p.prNumber || p.id || '?') + ' — ' + (p.title || '(untitled PR)'),
+        meta: (p.buildStatus || 'no-build') + ' · ' + (p.reviewStatus || 'no-review'),
+        metaUrl: p.url || null,
+        ts: ts ? Date.parse(ts) || 0 : 0,
+      });
+    });
+
+    events.sort(function(a, b) { return (b.ts || 0) - (a.ts || 0); });
+    events = events.slice(0, 20);
+
+    if (events.length === 0) {
+      var empty = document.createElement('div');
+      empty.className = 'history-empty';
+      empty.textContent = 'Nothing has happened yet — Command Center will fill this in.';
+      listEl.replaceChildren(empty);
+      return;
+    }
+    // Build the feed as DOM nodes so SEC-03's .innerHTML ratchet stays happy
+    // (test/unit.test.js DYNAMIC_INNERHTML_BASELINE). Completion / failure
+    // events use renderCompletionCard (meta-rail layout); dispatch / PR
+    // events keep the legacy .history-head + .history-title + .history-meta
+    // shape since the user-facing redesign is scoped to completions for now.
+    var frag = document.createDocumentFragment();
+    for (var i = 0; i < events.length; i++) {
+      var e = events[i];
+      if ((e.kind === 'completion' || e.kind === 'failure') && e.raw) {
+        frag.appendChild(renderCompletionCard(e.raw));
+        continue;
+      }
+      var item = document.createElement('div');
+      item.className = 'history-item kind-' + e.kind;
+      var head = document.createElement('div');
+      head.className = 'history-head';
+      var kind = document.createElement('span');
+      kind.className = 'history-kind';
+      kind.textContent = e.kindLabel;
+      var when = document.createElement('span');
+      when.className = 'history-time';
+      when.textContent = e.ts ? relTime(e.ts) : '';
+      head.appendChild(kind);
+      head.appendChild(when);
+      var titleEl = document.createElement('div');
+      titleEl.className = 'history-title';
+      titleEl.textContent = e.title;
+      var metaEl = document.createElement('div');
+      metaEl.className = 'history-meta';
+      metaEl.appendChild(document.createTextNode(e.meta || ''));
+      if (e.metaUrl) {
+        metaEl.appendChild(document.createTextNode(' · '));
+        var a = document.createElement('a');
+        a.href = e.metaUrl;
+        a.target = '_blank';
+        a.rel = 'noopener';
+        a.textContent = 'open';
+        metaEl.appendChild(a);
+      }
+      item.appendChild(head);
+      item.appendChild(titleEl);
+      item.appendChild(metaEl);
+      frag.appendChild(item);
+    }
+    listEl.replaceChildren(frag);
+  }
+
+  async function pollStatusOnce() {
+    try {
+      var res = await fetch('/api/status', { headers: { 'Accept': 'application/json' } });
+      if (!res.ok) throw new Error('HTTP ' + res.status);
+      var data = await res.json();
+      applyStatus(data);
+    } catch (e) {
+      // Soft failure — leave previous values, surface in stamp
+      var stamp = document.getElementById('cockpit-stamp');
+      if (stamp) stamp.textContent = 'status fetch failed: ' + (e.message || e);
+    }
+  }
+
+  function startStatusPolling() {
+    pollStatusOnce();
+    if (pollTimer) clearInterval(pollTimer);
+    pollTimer = setInterval(pollStatusOnce, STATUS_POLL_MS);
+  }
+  // Pause polling when the tab is hidden; resume when it's visible again.
+  // Saves us 12 fetches/min on background tabs.
+  document.addEventListener('visibilitychange', function() {
+    if (document.hidden) {
+      if (pollTimer) { clearInterval(pollTimer); pollTimer = null; }
+    } else {
+      startStatusPolling();
+    }
+  });
+  startStatusPolling();