agentxchain 2.73.0 → 2.75.0

package/dashboard/app.js

@@ -19,7 +19,7 @@ import { render as renderTimeouts } from './components/timeouts.js';
 import { render as renderCoordinatorTimeouts } from './components/coordinator-timeouts.js';
 
 const VIEWS = {
-  timeline: { fetch: ['state', 'continuity', 'history', 'audit', 'annotations', 'connectors'], render: renderTimeline },
+  timeline: { fetch: ['state', 'continuity', 'history', 'audit', 'annotations', 'connectors', 'coordinatorAudit', 'coordinatorAnnotations'], render: renderTimeline },
   ledger: { fetch: ['state', 'ledger', 'coordinatorState', 'coordinatorLedger'], render: renderLedger },
   hooks: { fetch: ['audit', 'annotations', 'coordinatorAudit', 'coordinatorAnnotations'], render: renderHooks },
   blocked: { fetch: ['state', 'audit', 'coordinatorState', 'coordinatorAudit'], render: renderBlocked },

package/dashboard/components/timeline.js

@@ -55,6 +55,39 @@ function renderList(items, type) {
     .join('');
 }
 
+function formatDuration(ms) {
+  if (ms == null || ms < 0 || !Number.isFinite(ms)) return null;
+  const totalSeconds = Math.floor(ms / 1000);
+  const hours = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor((totalSeconds % 3600) / 60);
+  const seconds = totalSeconds % 60;
+  if (hours > 0) return `${hours}h ${minutes}m`;
+  if (minutes > 0) return `${minutes}m ${seconds}s`;
+  return `${seconds}s`;
+}
+
+function computeElapsed(startedAt) {
+  if (!startedAt) return null;
+  try {
+    const start = new Date(startedAt).getTime();
+    if (Number.isNaN(start)) return null;
+    return Math.max(0, Date.now() - start);
+  } catch {
+    return null;
+  }
+}
+
+function formatTimestamp(iso) {
+  if (!iso) return null;
+  try {
+    const d = new Date(iso);
+    if (Number.isNaN(d.getTime())) return null;
+    return d.toLocaleString();
+  } catch {
+    return null;
+  }
+}
+
 function statusBadge(status) {
   const colors = {
     running: 'var(--green)',
@@ -81,52 +114,74 @@ function roleBadge(role) {
   return `<span class="badge" style="color:${color};border-color:${color}">${esc(role)}</span>`;
 }
 
-function renderTurnDetailPanel(turnId, annotations, audit) {
+function renderAuditSection(title, auditEntries) {
+  if (auditEntries.length === 0) return '';
+  let html = `<div class="turn-detail"><span class="detail-label">${esc(title)} (${auditEntries.length}):</span>
+    <table class="data-table">
+      <thead><tr><th>Phase</th><th>Hook</th><th>Verdict</th></tr></thead>
+      <tbody>`;
+  for (const entry of auditEntries) {
+    const phase = entry.hook_phase || entry.phase || '';
+    const hook = entry.hook_name || entry.hook || entry.name || '';
+    html += `<tr>
+      <td class="mono">${esc(phase)}</td>
+      <td>${esc(hook)}</td>
+      <td>${esc(entry.verdict || '')}</td>
+    </tr>`;
+  }
+  html += `</tbody></table></div>`;
+  return html;
+}
+
+function renderAnnotationSection(title, annotationEntries) {
+  if (annotationEntries.length === 0) return '';
+  let html = `<div class="turn-detail"><span class="detail-label">${esc(title)} (${annotationEntries.length}):</span><ul>`;
+  for (const ann of annotationEntries) {
+    const hookName = ann.hook_name || ann.hook || ann.name || '';
+    if (Array.isArray(ann.annotations)) {
+      for (const a of ann.annotations) {
+        html += `<li>${esc(hookName)}: ${esc(a.key || '')} = ${esc(a.value || '')}</li>`;
+      }
+    } else {
+      const text = ann.annotation || ann.message || '';
+      html += `<li>${esc(hookName)}: ${esc(text)}</li>`;
+    }
+  }
+  html += `</ul></div>`;
+  return html;
+}
+
+function renderTurnDetailPanel(turnId, annotations, audit, coordinatorAnnotations, coordinatorAudit) {
   const turnAnnotations = Array.isArray(annotations)
     ? annotations.filter((a) => a.turn_id === turnId)
     : [];
   const turnAudit = Array.isArray(audit)
     ? audit.filter((a) => a.turn_id === turnId)
     : [];
+  const turnCoordAnnotations = Array.isArray(coordinatorAnnotations)
+    ? coordinatorAnnotations.filter((a) => a.turn_id === turnId)
+    : [];
+  const turnCoordAudit = Array.isArray(coordinatorAudit)
+    ? coordinatorAudit.filter((a) => a.turn_id === turnId)
+    : [];
+
+  const hasRepo = turnAnnotations.length > 0 || turnAudit.length > 0;
+  const hasCoord = turnCoordAnnotations.length > 0 || turnCoordAudit.length > 0;
 
-  if (turnAnnotations.length === 0 && turnAudit.length === 0) {
+  if (!hasRepo && !hasCoord) {
     return `<div class="turn-detail-panel"><p class="turn-detail">No hook evidence for this turn.</p></div>`;
   }
 
+  const dual = hasRepo && hasCoord;
   let html = `<div class="turn-detail-panel">`;
 
-  if (turnAudit.length > 0) {
-    html += `<div class="turn-detail"><span class="detail-label">Hook Audit (${turnAudit.length}):</span>
-      <table class="data-table">
-        <thead><tr><th>Phase</th><th>Hook</th><th>Verdict</th></tr></thead>
-        <tbody>`;
-    for (const entry of turnAudit) {
-      const phase = entry.hook_phase || entry.phase || '';
-      const hook = entry.hook_name || entry.hook || entry.name || '';
-      html += `<tr>
-        <td class="mono">${esc(phase)}</td>
-        <td>${esc(hook)}</td>
-        <td>${esc(entry.verdict || '')}</td>
-      </tr>`;
-    }
-    html += `</tbody></table></div>`;
-  }
+  // Repo-local hook evidence
+  html += renderAuditSection(dual ? 'Repo Hook Audit Log' : 'Hook Audit Log', turnAudit);
+  html += renderAnnotationSection(dual ? 'Repo Hook Annotations' : 'Hook Annotations', turnAnnotations);
 
-  if (turnAnnotations.length > 0) {
-    html += `<div class="turn-detail"><span class="detail-label">Annotations (${turnAnnotations.length}):</span><ul>`;
-    for (const ann of turnAnnotations) {
-      const hookName = ann.hook_name || ann.hook || ann.name || '';
-      if (Array.isArray(ann.annotations)) {
-        for (const a of ann.annotations) {
-          html += `<li>${esc(hookName)}: ${esc(a.key || '')} = ${esc(a.value || '')}</li>`;
-        }
-      } else {
-        const text = ann.annotation || ann.message || '';
-        html += `<li>${esc(hookName)}: ${esc(text)}</li>`;
-      }
-    }
-    html += `</ul></div>`;
-  }
+  // Coordinator hook evidence
+  html += renderAuditSection(dual ? 'Coordinator Hook Audit Log' : 'Hook Audit Log', turnCoordAudit);
+  html += renderAnnotationSection(dual ? 'Coordinator Hook Annotations' : 'Hook Annotations', turnCoordAnnotations);
 
   html += `</div>`;
   return html;
@@ -230,7 +285,9 @@ function renderConnectorHealthPanel(connectorsPayload) {
   return html;
 }
 
-export function render({ state, continuity, history, annotations, audit, connectors }) {
+export { formatDuration, computeElapsed, formatTimestamp };
+
+export function render({ state, continuity, history, annotations, audit, connectors, coordinatorAudit = null, coordinatorAnnotations = 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>`;
   }
@@ -257,11 +314,14 @@ export function render({ state, continuity, history, annotations, audit, connect
   if (activeTurns.length > 0) {
     html += `<div class="section"><h3>Active Turns</h3><div class="turn-list">`;
     for (const turn of activeTurns) {
+      const elapsedMs = computeElapsed(turn.started_at);
+      const elapsedStr = formatDuration(elapsedMs);
       html += `<div class="turn-card active">
         <div class="turn-header">
           ${roleBadge(getRole(turn))}
           <span class="mono">${esc(turn.turn_id)}</span>
           <span class="turn-status">${esc(turn.status || 'assigned')}</span>
+          ${elapsedStr ? `<span class="turn-timing">Elapsed: ${esc(elapsedStr)}</span>` : ''}
         </div>
       </div>`;
     }
@@ -281,10 +341,14 @@ export function render({ state, continuity, history, annotations, audit, connect
         || entry.verification?.evidence_summary
         || null;
 
+      const durationStr = formatDuration(entry.duration_ms);
+      const acceptedStr = formatTimestamp(entry.accepted_at);
       html += `<div class="turn-card" data-turn-expand="${esc(entry.turn_id)}">
         <div class="turn-header">
           ${roleBadge(getRole(entry))}
           <span class="mono">${esc(entry.turn_id)}</span>
+          ${durationStr ? `<span class="turn-timing">${esc(durationStr)}</span>` : ''}
+          ${acceptedStr ? `<span class="turn-timestamp">${esc(acceptedStr)}</span>` : ''}
         </div>`;
 
       if (entry.summary) {
@@ -311,7 +375,7 @@ export function render({ state, continuity, history, annotations, audit, connect
         html += `<div class="turn-detail"><span class="detail-label">Verification:</span> ${esc(verificationSummary)}</div>`;
       }
 
-      html += renderTurnDetailPanel(entry.turn_id, annotations, audit);
+      html += renderTurnDetailPanel(entry.turn_id, annotations, audit, coordinatorAnnotations, coordinatorAudit);
 
       html += `</div>`;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentxchain",
-  "version": "2.73.0",
+  "version": "2.75.0",
   "description": "CLI for AgentXchain — governed multi-agent software delivery",
   "type": "module",
   "bin": {