agentxchain 2.103.0 → 2.105.0

package/dashboard/components/initiative.js

@@ -1,3 +1,9 @@
+import {
+  buildCoordinatorAttentionSnapshotPresentation,
+  summarizeCoordinatorAttention,
+} from '../../src/lib/coordinator-blocker-presentation.js';
+import { buildCoordinatorRepoStatusRows } from '../../src/lib/coordinator-repo-status-presentation.js';
+
 function esc(str) {
   if (!str) return '';
   return String(str)
@@ -37,73 +43,126 @@ function summarizeBarriers(barriers) {
   return counts;
 }
 
-function renderCoordinatorAttentionSnapshot(coordinatorBlockers) {
-  if (!coordinatorBlockers || coordinatorBlockers.ok === false) {
-    return '';
+function summarizeDecisionConstraints(barriers) {
+  const entries = Object.entries(barriers || {});
+  const pendingRequirementSets = [];
+  let barrierCount = 0;
+  let repoRequirementCount = 0;
+  let requiredDecisionCount = 0;
+  let satisfiedRequirementCount = 0;
+
+  for (const [barrierId, barrier] of entries) {
+    const decisionIdsByRepo = barrier?.required_decision_ids_by_repo || barrier?.alignment_decision_ids || null;
+    if (!decisionIdsByRepo || typeof decisionIdsByRepo !== 'object' || Array.isArray(decisionIdsByRepo)) {
+      continue;
+    }
+
+    const repoEntries = Object.entries(decisionIdsByRepo)
+      .filter(([, ids]) => Array.isArray(ids) && ids.length > 0);
+    if (repoEntries.length === 0) {
+      continue;
+    }
+
+    barrierCount += 1;
+    const satisfiedRepos = new Set(Array.isArray(barrier?.satisfied_repos) ? barrier.satisfied_repos : []);
+    for (const [repoId, ids] of repoEntries) {
+      repoRequirementCount += 1;
+      requiredDecisionCount += ids.length;
+      if (satisfiedRepos.has(repoId)) {
+        satisfiedRequirementCount += 1;
+      } else {
+        pendingRequirementSets.push({ barrierId, repoId, decisionIds: ids });
+      }
+    }
   }
 
-  const active = coordinatorBlockers.active || {};
-  const blockers = Array.isArray(active.blockers)
-    ? active.blockers.filter((blocker) => blocker?.code !== 'no_next_phase')
-    : [];
-  const hasBlockers = blockers.length > 0;
-  const title = coordinatorBlockers.mode === 'pending_gate' ? 'Approval Snapshot' : 'Blocker Snapshot';
+  if (barrierCount === 0) {
+    return null;
+  }
 
-  let html = `<div class="gate-card">
-    <h3>${title}</h3>
-    <dl class="detail-list">`;
-  if (coordinatorBlockers.mode) {
-    html += `<dt>Mode</dt><dd>${esc(coordinatorBlockers.mode)}</dd>`;
+  return {
+    barrier_count: barrierCount,
+    repo_requirement_count: repoRequirementCount,
+    required_decision_count: requiredDecisionCount,
+    satisfied_requirement_count: satisfiedRequirementCount,
+    pending_requirement_count: pendingRequirementSets.length,
+    first_pending_requirement: pendingRequirementSets[0] || null,
+    additional_pending_requirement_count: Math.max(0, pendingRequirementSets.length - 1),
+  };
+}
+
+function renderPrimaryAction(action) {
+  if (!action || typeof action !== 'object') {
+    return '';
   }
-  if (active.gate_type) {
-    html += `<dt>Type</dt><dd>${esc(active.gate_type)}</dd>`;
+
+  let html = `<div class="turn-card">
+    <div class="turn-header"><span>Primary Action</span></div>`;
+  if (action.reason) {
+    html += `<div class="turn-summary">${esc(action.reason)}</div>`;
   }
-  if (active.gate_id) {
-    html += `<dt>Gate</dt><dd class="mono">${esc(active.gate_id)}</dd>`;
+  if (action.command) {
+    html += `<pre class="recovery-command mono" data-copy="${esc(action.command)}">${esc(action.command)}</pre>`;
   }
-  if (active.current_phase) {
-    html += `<dt>Current</dt><dd>${esc(active.current_phase)}</dd>`;
+  html += `</div>`;
+  return html;
+}
+
+function renderDetailRows(details) {
+  if (!Array.isArray(details) || details.length === 0) {
+    return '';
   }
-  if (active.target_phase) {
-    html += `<dt>Target</dt><dd>${esc(active.target_phase)}</dd>`;
+
+  let html = '';
+  for (const detail of details) {
+    html += `<dt>${esc(detail.label)}</dt><dd${detail.mono ? ' class="mono"' : ''}>${esc(detail.value)}</dd>`;
   }
-  if (hasBlockers) {
-    html += `<dt>Blockers</dt><dd>${blockers.length}</dd>`;
+  return html;
+}
+
+function renderCoordinatorAttentionSnapshot(coordinatorBlockers) {
+  const presentation = buildCoordinatorAttentionSnapshotPresentation(coordinatorBlockers);
+  if (!presentation) {
+    return '';
   }
-  html += `</dl>`;
 
-  if (coordinatorBlockers.mode === 'pending_gate') {
-    html += `<p class="turn-summary">All coordinator prerequisites are satisfied. Human approval is the remaining action.</p>`;
-  } else if (hasBlockers) {
-    html += `<div class="turn-list">`;
-    for (const blocker of blockers) {
-      html += `<div class="turn-card">
-        <div class="turn-header"><span class="mono">${esc(blocker.code || 'unknown')}</span></div>`;
-      if (blocker.message) {
-        html += `<div class="turn-summary">${esc(blocker.message)}</div>`;
-      }
-      if (blocker.repo_id || blocker.expected_run_id || blocker.actual_run_id) {
-        html += `<dl class="detail-list">`;
-        if (blocker.repo_id) html += `<dt>Repo</dt><dd class="mono">${esc(blocker.repo_id)}</dd>`;
-        if (blocker.expected_run_id) html += `<dt>Expected</dt><dd class="mono">${esc(blocker.expected_run_id)}</dd>`;
-        if (blocker.actual_run_id) html += `<dt>Actual</dt><dd class="mono">${esc(blocker.actual_run_id)}</dd>`;
-        if (blocker.current_phase) html += `<dt>Current Phase</dt><dd>${esc(blocker.current_phase)}</dd>`;
-        if (blocker.required_phase) html += `<dt>Required Phase</dt><dd>${esc(blocker.required_phase)}</dd>`;
-        html += `</dl>`;
-      }
-      html += `</div>`;
+  const summary = summarizeCoordinatorAttention(coordinatorBlockers);
+  const { primaryBlocker, primaryAction } = presentation;
+  const { blockers } = summary;
+  const hasBlockers = blockers.length > 0;
+
+  let html = `<div class="gate-card">
+    <h3>${presentation.title}</h3>
+    <p class="section-subtitle">${presentation.subtitle}</p>
+    <dl class="detail-list">${renderDetailRows(presentation.details)}</dl>`;
+
+  if (presentation.summaryMessage) {
+    html += `<p class="turn-summary">${esc(presentation.summaryMessage)}</p>`;
+  } else if (primaryBlocker) {
+    html += `<div class="turn-card">
+      <div class="turn-header"><span class="mono">${esc(primaryBlocker.code || 'unknown')}</span></div>`;
+    if (primaryBlocker.message) {
+      html += `<div class="turn-summary">${esc(primaryBlocker.message)}</div>`;
+    }
+    if (presentation.primaryBlockerDetails.length > 0) {
+      html += `<dl class="detail-list">${renderDetailRows(presentation.primaryBlockerDetails)}</dl>`;
+    }
+    html += `</div>`;
+    if (presentation.additionalBlockerCount > 0) {
+      html += `<p class="turn-detail">${presentation.additionalBlockerCount} additional blocker${presentation.additionalBlockerCount !== 1 ? 's are' : ' is'} summarized in <a href="#blockers">Blockers</a>.</p>`;
+    }
+  }
+
+  if (primaryAction) {
+    html += `<div class="section" style="margin-top:12px">${renderPrimaryAction(primaryAction)}`;
+    if (presentation.additionalActionCount > 0) {
+      html += `<p class="turn-detail">${presentation.additionalActionCount} additional action${presentation.additionalActionCount !== 1 ? 's remain' : ' remains'} in <a href="#blockers">Blockers</a>.</p>`;
     }
     html += `</div>`;
-  } else if (coordinatorBlockers.blocked_reason) {
-    html += `<p class="turn-summary">${esc(
-      typeof coordinatorBlockers.blocked_reason === 'string'
-        ? coordinatorBlockers.blocked_reason
-        : JSON.stringify(coordinatorBlockers.blocked_reason)
-    )}</p>`;
   }
 
   html += `<div class="gate-action">
-    <p>Inspect full diagnostics:</p>
+    <p>Inspect full blocker diagnostics and ordered recovery steps:</p>
     <p><a href="#blockers">Open Blockers view</a></p>
   </div>
 </div>`;
@@ -111,20 +170,43 @@ function renderCoordinatorAttentionSnapshot(coordinatorBlockers) {
   return html;
 }
 
+function getCoordinatorRepoRows(coordinatorState, coordinatorRepoStatusRows) {
+  if (Array.isArray(coordinatorRepoStatusRows) && coordinatorRepoStatusRows.length > 0) {
+    return coordinatorRepoStatusRows;
+  }
+
+  return buildCoordinatorRepoStatusRows({
+    config: null,
+    coordinatorRepoRuns: coordinatorState?.repo_runs || {},
+  });
+}
+
+function renderRepoRowDetails(details) {
+  if (!Array.isArray(details) || details.length === 0) {
+    return '-';
+  }
+
+  return details.map((detail) => (
+    `<div><span class="detail-label">${esc(detail.label)}:</span> <span${detail.mono ? ' class="mono"' : ''}>${esc(detail.value)}</span></div>`
+  )).join('');
+}
+
 export function render({
   coordinatorState,
   coordinatorBarriers = {},
   barrierLedger = [],
   coordinatorBlockers = null,
+  coordinatorRepoStatusRows = null,
 }) {
   if (!coordinatorState) {
     return `<div class="placeholder"><h2>No Initiative</h2><p>No coordinator run found. Start one with <code class="mono">agentxchain multi init</code></p></div>`;
   }
 
-  const repoRuns = Object.entries(coordinatorState.repo_runs || {});
+  const repoRows = getCoordinatorRepoRows(coordinatorState, coordinatorRepoStatusRows);
   const barriers = Object.entries(coordinatorBarriers || {});
   const pendingGate = coordinatorState.pending_gate || null;
   const barrierCounts = summarizeBarriers(coordinatorBarriers);
+  const decisionConstraintSummary = summarizeDecisionConstraints(coordinatorBarriers);
   const recentBarrierTransitions = Array.isArray(barrierLedger)
     ? barrierLedger.slice(-5).reverse()
     : [];
@@ -135,30 +217,12 @@ export function render({
       <span class="mono run-id">${esc(coordinatorState.super_run_id)}</span>
       ${badge(coordinatorState.status || 'unknown', statusColor(coordinatorState.status))}
       <span class="phase-label">Phase: <strong>${esc(coordinatorState.phase || 'unknown')}</strong></span>
-      <span class="turn-count">${repoRuns.length} repo${repoRuns.length !== 1 ? 's' : ''}</span>
+      <span class="turn-count">${repoRows.length} repo${repoRows.length !== 1 ? 's' : ''}</span>
     </div>
   </div>`;
 
   if (pendingGate || coordinatorState.blocked_reason) {
     html += `<div class="section"><h3>Coordinator Attention</h3><div class="initiative-grid">`;
-    if (pendingGate) {
-      html += `<div class="gate-card">
-        <h3>Pending Gate</h3>
-        <dl class="detail-list">
-          <dt>Type</dt><dd>${esc(pendingGate.gate_type)}</dd>
-          <dt>Gate</dt><dd class="mono">${esc(pendingGate.gate)}</dd>`;
-      if (pendingGate.from) html += `<dt>From</dt><dd>${esc(pendingGate.from)}</dd>`;
-      if (pendingGate.to) html += `<dt>To</dt><dd>${esc(pendingGate.to)}</dd>`;
-      if (Array.isArray(pendingGate.required_repos) && pendingGate.required_repos.length > 0) {
-        html += `<dt>Repos</dt><dd>${esc(pendingGate.required_repos.join(', '))}</dd>`;
-      }
-      html += `</dl>
-        <div class="gate-action">
-          <p>Approve with:</p>
-          <pre class="recovery-command mono" data-copy="agentxchain multi approve-gate">agentxchain multi approve-gate</pre>
-        </div>
-      </div>`;
-    }
     const blockerSnapshot = renderCoordinatorAttentionSnapshot(coordinatorBlockers);
     if (blockerSnapshot) {
       html += blockerSnapshot;
@@ -175,14 +239,45 @@ export function render({
     html += `</div></div>`;
   }
 
+  if (decisionConstraintSummary) {
+    html += `<div class="section"><h3>Cross-Run Constraints</h3><div class="initiative-grid">`;
+    html += `<div class="gate-card">
+      <h3>Decision Constraints</h3>
+      <p class="section-subtitle">First-glance coordinator carryover only. Full per-barrier decision requirements stay in Barrier Snapshot.</p>
+      <dl class="detail-list">
+        <dt>Barriers</dt><dd>${decisionConstraintSummary.barrier_count}</dd>
+        <dt>Repo Requirements</dt><dd>${decisionConstraintSummary.repo_requirement_count}</dd>
+        <dt>Required IDs</dt><dd>${decisionConstraintSummary.required_decision_count}</dd>
+        <dt>Pending</dt><dd>${decisionConstraintSummary.pending_requirement_count}</dd>
+      </dl>`;
+
+    if (decisionConstraintSummary.first_pending_requirement) {
+      const pending = decisionConstraintSummary.first_pending_requirement;
+      html += `<div class="turn-card">
+        <div class="turn-header"><span>Next Pending Requirement</span></div>
+        <div class="turn-detail"><span class="detail-label">Barrier:</span> <span class="mono">${esc(pending.barrierId)}</span></div>
+        <div class="turn-detail"><span class="detail-label">Repo:</span> <span class="mono">${esc(pending.repoId)}</span></div>
+        <div class="turn-detail"><span class="detail-label">Decision IDs:</span> <span class="mono">${esc(pending.decisionIds.join(', '))}</span></div>
+      </div>`;
+      if (decisionConstraintSummary.additional_pending_requirement_count > 0) {
+        html += `<p class="turn-detail">${decisionConstraintSummary.additional_pending_requirement_count} additional pending requirement${decisionConstraintSummary.additional_pending_requirement_count !== 1 ? 's remain' : ' remains'} in Barrier Snapshot.</p>`;
+      }
+    } else {
+      html += `<p class="turn-summary">All declared coordinator decision requirements are currently satisfied.</p>`;
+    }
+
+    html += `</div></div></div>`;
+  }
+
   html += `<div class="section"><h3>Repo Runs</h3><table class="data-table">
-    <thead><tr><th>Repo</th><th>Run</th><th>Status</th><th>Phase</th></tr></thead><tbody>`;
-  for (const [repoId, repoRun] of repoRuns) {
+    <thead><tr><th>Repo</th><th>Run</th><th>Status</th><th>Phase</th><th>Details</th></tr></thead><tbody>`;
+  for (const row of repoRows) {
     html += `<tr>
-      <td class="mono">${esc(repoId)}</td>
-      <td class="mono">${esc(repoRun.run_id || '-')}</td>
-      <td>${badge(repoRun.status || 'unknown', statusColor(repoRun.status))}</td>
-      <td>${esc(repoRun.phase || '-')}</td>
+      <td class="mono">${esc(row.repo_id || '-')}</td>
+      <td class="mono">${esc(row.run_id || '-')}</td>
+      <td>${badge(row.status || 'unknown', statusColor(row.status))}</td>
+      <td>${esc(row.phase || '-')}</td>
+      <td>${renderRepoRowDetails(row.details)}</td>
     </tr>`;
   }
   html += `</tbody></table></div>`;

package/dashboard/components/ledger.js

@@ -160,6 +160,31 @@ function renderLedgerTable(entries, filter) {
   return { html, filteredCount: filtered.length };
 }
 
+function renderRepoDecisionSummary(summary) {
+  if (!summary) return '';
+
+  const operatorSummary = summary.operator_summary || {};
+  const categories = Array.isArray(operatorSummary.active_categories) && operatorSummary.active_categories.length > 0
+    ? operatorSummary.active_categories.join(', ')
+    : 'none active';
+  const highestAuthority = typeof operatorSummary.highest_active_authority_level === 'number'
+    ? `${operatorSummary.highest_active_authority_level} (${operatorSummary.highest_active_authority_role || 'unknown'})`
+    : '—';
+  const lineage = `${operatorSummary.superseding_active_count || 0} active superseding earlier decision${operatorSummary.superseding_active_count === 1 ? '' : 's'} · ${operatorSummary.overridden_with_successor_count || 0} overridden with recorded successor${operatorSummary.overridden_with_successor_count === 1 ? '' : 's'}`;
+
+  return `<div class="section">
+    <h3>Repo Decision Carryover</h3>
+    <p class="section-subtitle">Cross-run repo-level decisions that remain binding outside the turn ledger</p>
+    <div class="run-meta">
+      <span class="turn-count">${summary.active_count || 0} active</span>
+      <span class="badge">${summary.overridden_count || 0} overridden</span>
+      <span class="badge">categories: ${esc(categories)}</span>
+      <span class="badge">highest authority: ${esc(highestAuthority)}</span>
+      <span class="badge">${esc(lineage)}</span>
+    </div>
+  </div>`;
+}
+
 function buildSections({ ledger, coordinatorLedger, state, coordinatorState }) {
   const sections = [];
   const hasRepoContext = Boolean(state) || (Array.isArray(ledger) && ledger.length > 0);
@@ -187,6 +212,7 @@ function buildSections({ ledger, coordinatorLedger, state, coordinatorState }) {
 export function render({
   ledger,
   coordinatorLedger = null,
+  repoDecisionsSummary = null,
   state = null,
   coordinatorState = null,
   filter = {},
@@ -203,6 +229,8 @@ export function render({
     ${renderFilterBar(combinedLedger, filter)}
     </div>`;
 
+  html += renderRepoDecisionSummary(repoDecisionsSummary);
+
   for (const section of sections) {
     const { html: tableHtml, filteredCount } = renderLedgerTable(section.entries, filter);
     html += `<div class="section"><h3>${section.title}</h3>

package/dashboard/components/live-status.js

@@ -0,0 +1,39 @@
+function esc(str) {
+  if (!str) return '';
+  return String(str)
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+}
+
+function badgeTone(state) {
+  switch (state) {
+    case 'live':
+      return 'var(--green)';
+    case 'stale':
+      return 'var(--yellow)';
+    case 'disconnected':
+      return 'var(--red)';
+    default:
+      return 'var(--text-dim)';
+  }
+}
+
+export function renderLiveStatus(liveMeta) {
+  if (!liveMeta) return '';
+
+  const tone = badgeTone(liveMeta.freshness_state);
+  return `<div class="live-status-banner live-status-${esc(liveMeta.freshness_state)}">
+    <div class="turn-header">
+      <strong>${esc(liveMeta.title || 'Live Feed')}</strong>
+      <span class="badge" style="color:${tone};border-color:${tone}">${esc(liveMeta.freshness_label || 'Unknown')}</span>
+    </div>
+    <div class="live-status-grid">
+      <span><strong>Freshness:</strong> ${esc(liveMeta.refresh_detail || 'unknown')}</span>
+      <span><strong>Connection:</strong> ${esc(liveMeta.connection_detail || 'unknown')}</span>
+      <span><strong>Event:</strong> ${esc(liveMeta.event_detail || 'unknown')}</span>
+    </div>
+  </div>`;
+}

package/dashboard/components/run-history.js

@@ -34,6 +34,21 @@ function statusBadge(status) {
   }
 }
 
+function outcomeBadge(outcome) {
+  switch (outcome?.label) {
+    case 'clean':
+      return badge('clean', 'var(--green)');
+    case 'follow-on':
+      return badge('follow-on', '#38bdf8');
+    case 'operator':
+      return badge('operator', 'var(--yellow)');
+    case 'blocked':
+      return badge('blocked', 'var(--yellow)');
+    default:
+      return badge(outcome?.label || 'unknown', 'var(--text-dim)');
+  }
+}
+
 function formatDuration(ms) {
   if (ms == null) return '—';
   if (ms < 1000) return `${ms}ms`;
@@ -75,6 +90,49 @@ function truncateHeadline(headline, len = 40) {
   return normalized.slice(0, len - 1) + '…';
 }
 
+function truncateLine(value, len = 68) {
+  if (!value) return '—';
+  const normalized = String(value).replace(/\s+/g, ' ').trim();
+  if (normalized.length <= len) return normalized;
+  return normalized.slice(0, len - 1) + '…';
+}
+
+function normalizeSingleLine(value) {
+  if (typeof value !== 'string') return null;
+  const normalized = value.replace(/\s+/g, ' ').trim();
+  return normalized.length > 0 ? normalized : null;
+}
+
+function buildOutcomeSummary(entry) {
+  const status = typeof entry?.status === 'string' ? entry.status : 'unknown';
+  const nextAction = normalizeSingleLine(
+    entry?.retrospective?.next_operator_action
+    || entry?.retrospective?.follow_on_hint
+    || null
+  );
+
+  if (status === 'blocked' && nextAction) {
+    return { label: 'operator', next_action: nextAction };
+  }
+  if (status === 'blocked') {
+    return { label: 'blocked', next_action: null };
+  }
+  if (status === 'completed' && nextAction) {
+    return { label: 'follow-on', next_action: nextAction };
+  }
+  if (status === 'completed') {
+    return { label: 'clean', next_action: null };
+  }
+  return { label: 'unknown', next_action: nextAction };
+}
+
+function getTriggerLabel(provenance) {
+  const trigger = typeof provenance?.trigger === 'string' && provenance.trigger.trim()
+    ? provenance.trigger.trim()
+    : null;
+  return trigger || 'legacy';
+}
+
 function isInheritable(entry) {
   const snap = entry?.inheritance_snapshot;
   if (!snap) return false;
@@ -84,6 +142,7 @@ function isInheritable(entry) {
 }
 
 function renderRow(entry, index) {
+  const outcome = buildOutcomeSummary(entry);
   const rowClass = entry.status === 'blocked'
     ? ' style="border-left:3px solid var(--yellow)"'
     : entry.status === 'failed'
@@ -102,17 +161,23 @@ function renderRow(entry, index) {
     ? `<span title="Has inheritance snapshot — usable by child runs" style="color:var(--green)">✓</span>`
     : `<span style="color:var(--text-dim)">—</span>`;
 
+  const nextAction = outcome.next_action
+    ? `<div class="next-hint" style="font-size:0.82em;color:var(--text-dim);margin-top:4px">next: ${esc(truncateLine(outcome.next_action))}</div>`
+    : '';
+
   return `<tr${rowClass}>
     <td style="color:var(--text-dim)">${index + 1}</td>
     <td class="mono" title="${esc(entry.run_id)}">${esc(truncateId(entry.run_id))}</td>
     <td>${statusBadge(entry.status)}${blockedInfo}</td>
+    <td>${outcomeBadge(outcome)}</td>
+    <td>${esc(getTriggerLabel(entry.provenance))}</td>
     <td>${ctxIndicator}</td>
     <td>${phases}</td>
     <td>${entry.total_turns ?? '—'}</td>
     <td>${formatCost(entry.total_cost_usd)}</td>
     <td>${formatDuration(entry.duration_ms)}</td>
     <td>${formatDate(entry.recorded_at || entry.completed_at)}</td>
-    <td title="${esc(entry.retrospective?.headline || '')}">${esc(truncateHeadline(entry.retrospective?.headline))}</td>
+    <td title="${esc(entry.retrospective?.headline || '')}">${esc(truncateHeadline(entry.retrospective?.headline))}${nextAction}</td>
   </tr>`;
 }
 
@@ -128,6 +193,11 @@ export function render({ runHistory }) {
   const total = runHistory.length;
   const completed = runHistory.filter(e => e.status === 'completed').length;
   const blocked = runHistory.filter(e => e.status === 'blocked').length;
+  const outcomeCounts = runHistory.reduce((counts, entry) => {
+    const outcome = buildOutcomeSummary(entry).label;
+    counts[outcome] = (counts[outcome] || 0) + 1;
+    return counts;
+  }, {});
 
   let html = `<div class="run-history-view">`;
 
@@ -136,6 +206,9 @@ export function render({ runHistory }) {
   html += `<span class="turn-count">${total} run${total !== 1 ? 's' : ''} recorded</span>`;
   if (completed > 0) html += badge(`${completed} completed`, 'var(--green)');
   if (blocked > 0) html += badge(`${blocked} blocked`, 'var(--yellow)');
+  if (outcomeCounts.clean > 0) html += badge(`${outcomeCounts.clean} clean`, 'var(--green)');
+  if (outcomeCounts['follow-on'] > 0) html += badge(`${outcomeCounts['follow-on']} follow-on`, '#38bdf8');
+  if (outcomeCounts.operator > 0) html += badge(`${outcomeCounts.operator} operator`, 'var(--yellow)');
   html += `</div></div>`;
 
   // Table
@@ -146,6 +219,8 @@ export function render({ runHistory }) {
           <th>#</th>
           <th>Run ID</th>
           <th>Status</th>
+          <th>Outcome</th>
+          <th>Trigger</th>
           <th>Ctx</th>
           <th>Phases</th>
           <th>Turns</th>

package/dashboard/components/timeline.js

@@ -4,6 +4,8 @@
  * Pure render function: takes data, returns HTML string. Testable in Node.js.
  */
 
+import { renderLiveStatus } from './live-status.js';
+
 function esc(str) {
   if (!str) return '';
   return String(str)
@@ -304,7 +306,7 @@ function renderConnectorHealthPanel(connectorsPayload) {
 
 export { formatDuration, computeElapsed, formatTimestamp };
 
-export function render({ state, continuity, history, annotations, audit, connectors, coordinatorAudit = null, coordinatorAnnotations = null }) {
+export function render({ state, continuity, history, annotations, audit, connectors, coordinatorAudit = null, coordinatorAnnotations = null, liveMeta = null }) {
   if (!state) {
     return `<div class="placeholder"><h2>No Run</h2><p>No governed run found. Start one with <code class="mono">agentxchain init --governed</code></p></div>`;
   }
@@ -314,6 +316,8 @@ export function render({ state, continuity, history, annotations, audit, connect
 
   let html = `<div class="timeline-view">`;
 
+  html += renderLiveStatus(liveMeta);
+
   // Run header
   html += `<div class="run-header">
     <div class="run-meta">

package/dashboard/index.html

@@ -143,6 +143,27 @@
     .section { margin-bottom: 24px; }
     .section h3 { font-size: 14px; font-weight: 600; margin-bottom: 8px; color: var(--text); }
     .section-subtitle { font-size: 12px; color: var(--text-dim); margin-bottom: 12px; }
+    .live-status-banner {
+      margin-bottom: 16px;
+      padding: 12px 14px;
+      border-radius: 6px;
+      border: 1px solid var(--border);
+      background: rgba(99, 102, 241, 0.08);
+    }
+    .live-status-live { border-color: rgba(34, 197, 94, 0.35); }
+    .live-status-stale { border-color: rgba(234, 179, 8, 0.35); }
+    .live-status-disconnected { border-color: rgba(239, 68, 68, 0.35); }
+    .live-status-connecting { border-color: rgba(136, 136, 160, 0.35); }
+    .live-status-grid {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px 14px;
+      margin-top: 8px;
+      font-size: 12px;
+      color: var(--text-dim);
+      line-height: 1.45;
+    }
+    .live-status-grid strong { color: var(--text); }
 
     /* Turn cards */
     .turn-list { display: flex; flex-direction: column; gap: 8px; }