agentxchain 2.104.0 → 2.106.0

package/dashboard/components/blockers.js

@@ -9,6 +9,13 @@
  * server-side gate evaluators used by `multi step` and `multi approve-gate`.
  */
 
+import {
+  getCoordinatorAttentionStatusCard,
+  getCoordinatorBlockerDetails,
+} from '../../src/lib/coordinator-blocker-presentation.js';
+import { buildCoordinatorGateEvaluationPresentation } from '../../src/lib/coordinator-gate-evaluation-presentation.js';
+import { getCoordinatorPendingGateDetails } from '../../src/lib/coordinator-pending-gate-presentation.js';
+
 function esc(str) {
   if (!str) return '';
   return String(str)
@@ -41,6 +48,7 @@ function blockerColor(code) {
 function renderBlockerRow(blocker) {
   const code = blocker.code || 'unknown';
   const color = blockerColor(code);
+  const details = getCoordinatorBlockerDetails(blocker);
   let html = `<div class="turn-card" style="border-left: 3px solid ${color}">
     <div class="turn-header">
       ${badge(code, color)}
@@ -50,62 +58,55 @@ function renderBlockerRow(blocker) {
     html += `<div class="turn-summary">${esc(blocker.message)}</div>`;
   }
 
-  if (code === 'repo_run_id_mismatch' && blocker.repo_id) {
-    html += `<dl class="detail-list">
-      <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 (details.length > 0) {
+    html += `<dl class="detail-list">`;
+    for (const detail of details) {
+      html += `<dt>${esc(detail.label)}</dt><dd${detail.mono ? ' class="mono"' : ''}>${esc(detail.value)}</dd>`;
     }
     html += `</dl>`;
   }
 
-  if (code === 'repo_not_ready' && blocker.repo_id) {
-    html += `<dl class="detail-list">
-      <dt>Repo</dt><dd class="mono">${esc(blocker.repo_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>`;
+  return html;
+}
+
+function renderDetailRows(details) {
+  if (!Array.isArray(details) || details.length === 0) {
+    return '';
   }
 
-  html += `</div>`;
+  let html = '';
+  for (const detail of details) {
+    html += `<dt>${esc(detail.label)}</dt><dd${detail.mono ? ' class="mono"' : ''}>${esc(detail.value)}</dd>`;
+  }
   return html;
 }
 
-function renderActiveGate(active) {
+function renderActiveGate(active, coordinatorBlockers = null) {
   if (!active) return '';
 
+  const pendingGateDetails = active.pending === true
+    ? getCoordinatorPendingGateDetails({
+        pendingGate: coordinatorBlockers?.pending_gate,
+        active,
+      })
+    : [];
+  const evaluationPresentation = active.pending === true
+    ? null
+    : buildCoordinatorGateEvaluationPresentation({
+        gateType: active.gate_type,
+        evaluation: active,
+        includeReady: true,
+        includeBlockerCount: false,
+      });
   let html = `<div class="gate-card">
     <h3>Active Gate</h3>
-    <dl class="detail-list">
-      <dt>Type</dt><dd>${esc(active.gate_type)}</dd>`;
-
-  if (active.gate_id) {
-    html += `<dt>Gate</dt><dd class="mono">${esc(active.gate_id)}</dd>`;
-  }
-  if (active.current_phase) {
-    html += `<dt>Current Phase</dt><dd>${esc(active.current_phase)}</dd>`;
-  }
-  if (active.target_phase) {
-    html += `<dt>Target Phase</dt><dd>${esc(active.target_phase)}</dd>`;
-  }
-  if (typeof active.ready === 'boolean') {
-    html += `<dt>Ready</dt><dd>${active.ready ? 'Yes' : 'No'}</dd>`;
-  }
-  if (active.pending === true) {
-    html += `<dt>Pending Approval</dt><dd>Yes</dd>`;
-  }
-  if (Array.isArray(active.required_repos) && active.required_repos.length > 0) {
-    html += `<dt>Required Repos</dt><dd>${esc(active.required_repos.join(', '))}</dd>`;
-  }
-  if (Array.isArray(active.human_barriers) && active.human_barriers.length > 0) {
-    html += `<dt>Human Barriers</dt><dd>${esc(active.human_barriers.join(', '))}</dd>`;
+    <dl class="detail-list">`;
+  if (pendingGateDetails.length > 0) {
+    html += renderDetailRows(pendingGateDetails);
+  } else {
+    html += `<dt>Type</dt><dd>${esc(active.gate_type)}</dd>`;
+    html += renderDetailRows(evaluationPresentation?.details || []);
   }
 
   html += `</dl>`;
@@ -124,24 +125,27 @@ function renderActiveGate(active) {
 }
 
 function renderRecoveryCommand(data) {
-  if (data.mode === 'pending_gate') {
-    return `<div class="section"><h3>Recovery</h3>
-      <p class="recovery-hint">Approve the pending gate:</p>
-      <pre class="recovery-command mono" data-copy="agentxchain multi approve-gate">agentxchain multi approve-gate</pre>
-    </div>`;
+  const nextActions = Array.isArray(data.next_actions) ? data.next_actions : [];
+  if (nextActions.length === 0) {
+    return '';
   }
 
-  const hasRunIdMismatch = Array.isArray(data.active?.blockers)
-    && data.active.blockers.some(b => b.code === 'repo_run_id_mismatch');
-
-  if (hasRunIdMismatch) {
-    return `<div class="section"><h3>Recovery</h3>
-      <p class="recovery-hint">Run identity drift detected. Investigate child repos before resuming:</p>
-      <pre class="recovery-command mono" data-copy="agentxchain multi resume">agentxchain multi resume</pre>
-    </div>`;
+  let html = `<div class="section"><h3>Next Actions</h3><ol class="action-list">`;
+  for (const action of nextActions) {
+    html += `<li class="turn-card">
+      <div class="turn-header">
+        <span class="mono">${esc(action.command || 'n/a')}</span>
+      </div>`;
+    if (action.reason) {
+      html += `<div class="turn-summary">${esc(action.reason)}</div>`;
+    }
+    if (action.command) {
+      html += `<pre class="recovery-command mono" data-copy="${esc(action.command)}">${esc(action.command)}</pre>`;
+    }
+    html += `</li>`;
   }
-
-  return '';
+  html += `</ol></div>`;
+  return html;
 }
 
 export function render({ coordinatorBlockers }) {
@@ -156,6 +160,7 @@ export function render({ coordinatorBlockers }) {
   const data = coordinatorBlockers;
   const blockers = data.active?.blockers || [];
   const hasBlockers = blockers.length > 0 && !blockers.every(b => b.code === 'no_next_phase');
+  const statusCard = getCoordinatorAttentionStatusCard(data);
 
   let html = `<div class="blockers-view">`;
 
@@ -188,16 +193,13 @@ export function render({ coordinatorBlockers }) {
   }
 
   // Status summary
-  if (!hasBlockers && data.mode === 'pending_gate') {
-    html += `<div class="gate-card"><h3>Awaiting Approval</h3>
-      <p class="turn-summary">All prerequisites are satisfied. The coordinator is waiting for human gate approval.</p></div>`;
-  } else if (!hasBlockers) {
-    html += `<div class="gate-card"><h3>No Blockers</h3>
-      <p class="turn-summary">The coordinator gate has no outstanding blockers.</p></div>`;
+  if (!hasBlockers && statusCard) {
+    html += `<div class="gate-card"><h3>${esc(statusCard.title)}</h3>
+      <p class="turn-summary">${esc(statusCard.message)}</p></div>`;
   }
 
   // Active gate detail
-  html += renderActiveGate(data.active);
+  html += renderActiveGate(data.active, data);
 
   // Recovery
   html += renderRecoveryCommand(data);
@@ -208,21 +210,20 @@ export function render({ coordinatorBlockers }) {
     const { phase_transition, run_completion } = data.evaluations;
 
     if (phase_transition) {
+      const phasePresentation = buildCoordinatorGateEvaluationPresentation({
+        gateType: 'phase_transition',
+        evaluation: phase_transition,
+      });
       html += `<div class="turn-card" data-turn-expand>
         <div class="turn-header">
-          <span>Phase Transition</span>
-          ${badge(phase_transition.ready ? 'ready' : 'not ready', phase_transition.ready ? 'var(--green)' : 'var(--yellow)')}
+          <span>${esc(phasePresentation.title)}</span>
+          ${badge(phasePresentation.statusLabel, phase_transition.ready ? 'var(--green)' : 'var(--yellow)')}
         </div>
         <div class="turn-detail-panel">
-          <dl class="detail-list">`;
-      if (phase_transition.current_phase) html += `<dt>Current</dt><dd>${esc(phase_transition.current_phase)}</dd>`;
-      if (phase_transition.target_phase) html += `<dt>Target</dt><dd>${esc(phase_transition.target_phase)}</dd>`;
-      if (phase_transition.gate_id) html += `<dt>Gate</dt><dd class="mono">${esc(phase_transition.gate_id)}</dd>`;
-      html += `<dt>Blockers</dt><dd>${phase_transition.blockers?.length || 0}</dd>`;
-      html += `</dl>`;
-      if (phase_transition.blockers?.length > 0) {
+          <dl class="detail-list">${renderDetailRows(phasePresentation.details)}</dl>`;
+      if (phasePresentation.blockers.length > 0) {
         html += `<div class="annotation-list" style="margin-top:8px">`;
-        for (const b of phase_transition.blockers) {
+        for (const b of phasePresentation.blockers) {
           html += `<div class="annotation-card">
             <span class="mono">${esc(b.code || 'unknown')}</span>
             <span>${esc(b.message || '')}</span>
@@ -234,22 +235,20 @@ export function render({ coordinatorBlockers }) {
     }
 
     if (run_completion) {
+      const completionPresentation = buildCoordinatorGateEvaluationPresentation({
+        gateType: 'run_completion',
+        evaluation: run_completion,
+      });
       html += `<div class="turn-card" data-turn-expand>
         <div class="turn-header">
-          <span>Run Completion</span>
-          ${badge(run_completion.ready ? 'ready' : 'not ready', run_completion.ready ? 'var(--green)' : 'var(--yellow)')}
+          <span>${esc(completionPresentation.title)}</span>
+          ${badge(completionPresentation.statusLabel, run_completion.ready ? 'var(--green)' : 'var(--yellow)')}
         </div>
         <div class="turn-detail-panel">
-          <dl class="detail-list">`;
-      if (run_completion.gate_id) html += `<dt>Gate</dt><dd class="mono">${esc(run_completion.gate_id)}</dd>`;
-      html += `<dt>Blockers</dt><dd>${run_completion.blockers?.length || 0}</dd>`;
-      if (typeof run_completion.requires_human_approval === 'boolean') {
-        html += `<dt>Human Approval</dt><dd>${run_completion.requires_human_approval ? 'Required' : 'Not required'}</dd>`;
-      }
-      html += `</dl>`;
-      if (run_completion.blockers?.length > 0) {
+          <dl class="detail-list">${renderDetailRows(completionPresentation.details)}</dl>`;
+      if (completionPresentation.blockers.length > 0) {
         html += `<div class="annotation-list" style="margin-top:8px">`;
-        for (const b of run_completion.blockers) {
+        for (const b of completionPresentation.blockers) {
           html += `<div class="annotation-card">
             <span class="mono">${esc(b.code || 'unknown')}</span>
             <span>${esc(b.message || '')}</span>

package/dashboard/components/coordinator-timeouts.js

@@ -152,6 +152,18 @@ function renderEventTable(events, title) {
   return html;
 }
 
+function renderDetailRows(details) {
+  if (!Array.isArray(details) || details.length === 0) {
+    return '';
+  }
+
+  let html = '';
+  for (const detail of details) {
+    html += `<dt>${esc(detail.label)}</dt><dd${detail.mono ? ' class="mono"' : ''}>${esc(detail.value)}</dd>`;
+  }
+  return html;
+}
+
 function renderRepoCard(repo) {
   let html = `<div class="turn-card">
     <div class="turn-header">
@@ -168,6 +180,7 @@ function renderRepoCard(repo) {
   if (repo.phase) {
     html += `<dt>Phase</dt><dd>${esc(repo.phase)}</dd>`;
   }
+  html += renderDetailRows(repo.details);
   html += `</dl>`;
 
   if (repo.error) {

package/dashboard/components/cross-repo.js

@@ -1,3 +1,6 @@
+import { renderLiveStatus } from './live-status.js';
+import { summarizeCoordinatorEvent } from '../../src/lib/coordinator-event-narrative.js';
+
 function esc(str) {
   if (!str) return '';
   return String(str)
@@ -26,57 +29,57 @@ function describeEvent(entry) {
     case 'run_initialized':
       return {
         title: 'Coordinator Initialized',
-        detail: `${Object.keys(entry.repo_runs || {}).length} repo runs linked or initialized`,
+        detail: summarizeCoordinatorEvent(entry),
       };
     case 'turn_dispatched':
       return {
         title: 'Turn Dispatched',
-        detail: `${entry.role || 'agent'} dispatched to ${entry.repo_id} for ${entry.workstream_id}`,
+        detail: summarizeCoordinatorEvent(entry),
       };
     case 'acceptance_projection':
       return {
         title: 'Acceptance Projected',
-        detail: entry.summary || `${entry.repo_id} accepted ${entry.repo_turn_id || 'a turn'}`,
+        detail: summarizeCoordinatorEvent(entry),
       };
     case 'context_generated':
       return {
         title: 'Context Generated',
-        detail: `${entry.target_repo_id} received cross-repo context from ${(entry.upstream_repo_ids || []).join(', ') || 'no upstream repos'}`,
+        detail: summarizeCoordinatorEvent(entry),
       };
     case 'phase_transition_requested':
       return {
         title: 'Phase Gate Requested',
-        detail: `${entry.from || 'unknown'} -> ${entry.to || 'unknown'} (${entry.gate || 'gate'})`,
+        detail: summarizeCoordinatorEvent(entry),
       };
     case 'phase_transition_approved':
       return {
         title: 'Phase Gate Approved',
-        detail: `${entry.from || 'unknown'} -> ${entry.to || 'unknown'}`,
+        detail: summarizeCoordinatorEvent(entry),
       };
     case 'run_completion_requested':
       return {
         title: 'Completion Gate Requested',
-        detail: entry.gate || 'initiative_ship',
+        detail: summarizeCoordinatorEvent(entry),
       };
     case 'run_completed':
       return {
         title: 'Initiative Completed',
-        detail: entry.gate || 'completion approved',
+        detail: summarizeCoordinatorEvent(entry),
       };
     case 'state_resynced':
       return {
         title: 'Coordinator Resynced',
-        detail: `${(entry.resynced_repos || []).length} repos updated`,
+        detail: summarizeCoordinatorEvent(entry),
       };
     default:
       return {
         title: entry?.type || 'Unknown Event',
-        detail: entry?.repo_id || entry?.workstream_id || 'Coordinator history event',
+        detail: summarizeCoordinatorEvent(entry),
       };
   }
 }
 
-export function render({ coordinatorState, coordinatorHistory = [] }) {
+export function render({ coordinatorState, coordinatorHistory = [], liveMeta = null }) {
   if (!coordinatorState) {
     return `<div class="placeholder"><h2>No Cross-Repo Timeline</h2><p>No coordinator run found. Start one with <code class="mono">agentxchain multi init</code></p></div>`;
   }
@@ -86,7 +89,9 @@ export function render({ coordinatorState, coordinatorHistory = [] }) {
     return `<div class="placeholder"><h2>Cross-Repo Timeline</h2><p>No coordinator history recorded yet.</p></div>`;
   }
 
-  let html = `<div class="timeline-view"><div class="section"><h3>Cross-Repo Timeline</h3><div class="turn-list">`;
+  let html = `<div class="timeline-view">`;
+  html += renderLiveStatus(liveMeta);
+  html += `<div class="section"><h3>Cross-Repo Timeline</h3><div class="turn-list">`;
   for (const entry of events) {
     const event = describeEvent(entry);
     const repoId = entry.repo_id || entry.target_repo_id || null;

package/dashboard/components/gate.js

@@ -5,6 +5,8 @@
  * Shows a narrow local approve action plus the exact CLI fallback command.
  */
 
+import { getCoordinatorPendingGateDetails } from '../../src/lib/coordinator-pending-gate-presentation.js';
+
 function esc(str) {
   if (!str) return '';
   return String(str)
@@ -126,6 +128,18 @@ function renderApproveControls({ buttonLabel, cliCommand }) {
       </div>`;
 }
 
+function renderDetailRows(details) {
+  if (!Array.isArray(details) || details.length === 0) {
+    return '';
+  }
+
+  let html = '';
+  for (const detail of details) {
+    html += `<dt>${esc(detail.label)}</dt><dd${detail.mono ? ' class="mono"' : ''}>${esc(detail.value)}</dd>`;
+  }
+  return html;
+}
+
 export { findPostGateTurns, aggregateEvidence };
 
 function findCoordinatorGateRequest(history, pendingGate) {
@@ -227,13 +241,20 @@ export function render({
     const evidence = isCoordinator
       ? aggregateCoordinatorEvidence(postGateTurns)
       : aggregateEvidence(postGateTurns);
+    const coordinatorDetails = isCoordinator
+      ? getCoordinatorPendingGateDetails({ pendingGate: pendingTransition, includeHumanBarriers: false })
+      : [];
     html += `<div class="gate-card">
       <h3>Phase Transition Gate</h3>
-      <dl class="detail-list">
-        <dt>From</dt><dd>${esc(pendingTransition.from || state?.phase || coordinatorState?.phase)}</dd>
+      <dl class="detail-list">`;
+    if (isCoordinator) {
+      html += renderDetailRows(coordinatorDetails);
+    } else {
+      html += `<dt>From</dt><dd>${esc(pendingTransition.from || state?.phase || coordinatorState?.phase)}</dd>
         <dt>To</dt><dd>${esc(pendingTransition.to)}</dd>`;
-    if (pendingTransition.gate) {
-      html += `<dt>Gate</dt><dd class="mono">${esc(pendingTransition.gate)}</dd>`;
+      if (pendingTransition.gate) {
+        html += `<dt>Gate</dt><dd class="mono">${esc(pendingTransition.gate)}</dd>`;
+      }
     }
     if (pendingTransition.requested_by_turn) {
       html += `<dt>Requested By</dt><dd class="mono">${esc(pendingTransition.requested_by_turn)}</dd>`;
@@ -241,9 +262,6 @@ export function render({
     if (postGateTurns.length > 0) {
       html += `<dt>Evidence Turns</dt><dd>${postGateTurns.length} turn${postGateTurns.length !== 1 ? 's' : ''}</dd>`;
     }
-    if (isCoordinator && Array.isArray(pendingTransition.required_repos) && pendingTransition.required_repos.length > 0) {
-      html += `<dt>Required Repos</dt><dd>${esc(pendingTransition.required_repos.join(', '))}</dd>`;
-    }
     html += `</dl>`;
     if (evidence.summaries.length > 0) {
       html += `<div class="gate-evidence"><h4>Agent Summaries</h4><ul>`;
@@ -280,10 +298,15 @@ export function render({
     const evidence = isCoordinator
       ? aggregateCoordinatorEvidence(postGateTurns)
       : aggregateEvidence(postGateTurns);
+    const coordinatorDetails = isCoordinator
+      ? getCoordinatorPendingGateDetails({ pendingGate: pendingCompletion, includeHumanBarriers: false })
+      : [];
     html += `<div class="gate-card">
       <h3>Run Completion Gate</h3>
       <dl class="detail-list">`;
-    if (pendingCompletion.gate) {
+    if (isCoordinator) {
+      html += renderDetailRows(coordinatorDetails);
+    } else if (pendingCompletion.gate) {
       html += `<dt>Gate</dt><dd class="mono">${esc(pendingCompletion.gate)}</dd>`;
     }
     if (pendingCompletion.requested_by_turn) {
@@ -292,9 +315,6 @@ export function render({
     if (postGateTurns.length > 0) {
       html += `<dt>Evidence Turns</dt><dd>${postGateTurns.length} turn${postGateTurns.length !== 1 ? 's' : ''}</dd>`;
     }
-    if (isCoordinator && Array.isArray(pendingCompletion.required_repos) && pendingCompletion.required_repos.length > 0) {
-      html += `<dt>Required Repos</dt><dd>${esc(pendingCompletion.required_repos.join(', '))}</dd>`;
-    }
     html += `</dl>`;
     if (evidence.summaries.length > 0) {
       html += `<div class="gate-evidence"><h4>Agent Summaries</h4><ul>`;