agentxchain 2.72.0 → 2.74.0

package/dashboard/app.js

@@ -21,7 +21,7 @@ import { render as renderCoordinatorTimeouts } from './components/coordinator-ti
 const VIEWS = {
   timeline: { fetch: ['state', 'continuity', 'history', 'audit', 'annotations', 'connectors'], render: renderTimeline },
   ledger: { fetch: ['state', 'ledger', 'coordinatorState', 'coordinatorLedger'], render: renderLedger },
-  hooks: { fetch: ['audit', 'annotations'], render: renderHooks },
+  hooks: { fetch: ['audit', 'annotations', 'coordinatorAudit', 'coordinatorAnnotations'], render: renderHooks },
   blocked: { fetch: ['state', 'audit', 'coordinatorState', 'coordinatorAudit'], render: renderBlocked },
   gate: { fetch: ['state', 'history', 'coordinatorState', 'coordinatorHistory', 'coordinatorBarriers'], render: renderGate },
   initiative: { fetch: ['coordinatorState', 'coordinatorBarriers', 'barrierLedger', 'coordinatorBlockers'], render: renderInitiative },
@@ -46,6 +46,7 @@ const API_MAP = {
   coordinatorBarriers: '/api/coordinator/barriers',
   barrierLedger: '/api/coordinator/barrier-ledger',
   coordinatorAudit: '/api/coordinator/hooks/audit',
+  coordinatorAnnotations: '/api/coordinator/hooks/annotations',
   coordinatorBlockers: '/api/coordinator/blockers',
   workflowKitArtifacts: '/api/workflow-kit-artifacts',
   connectors: '/api/connectors',

package/dashboard/components/hooks.js

@@ -2,6 +2,7 @@
  * Hook Audit view — renders hook-audit.jsonl entries.
  *
  * Pure render function: takes data, returns HTML string. Testable in Node.js.
+ * Supports both repo-local and coordinator hook audit/annotation data.
  */
 
 function esc(str) {
@@ -90,26 +91,82 @@ function collectHookNames(audit) {
   return Array.from(unique).sort();
 }
 
-export function render({ audit, annotations, filter = {} }) {
+function renderAuditTable(entries, filter) {
+  const filtered = filterAudit(entries, filter);
+  let html = `<p class="section-subtitle">${filtered.length} of ${entries.length} hook execution${entries.length !== 1 ? 's' : ''}</p>
+    <table class="data-table">
+      <thead><tr><th>Time</th><th>Phase</th><th>Hook</th><th>Verdict</th><th>Action</th><th>Duration</th></tr></thead>
+      <tbody>`;
+
+  for (const entry of filtered) {
+    const duration = entry.duration_ms != null ? `${entry.duration_ms}ms` : '-';
+    const action = entry.orchestrator_action || entry.action || 'continued';
+    html += `<tr>
+      <td class="mono">${esc(entry.timestamp || '-')}</td>
+      <td class="mono">${esc(getHookPhase(entry))}</td>
+      <td>${esc(getHookName(entry))}</td>
+      <td>${verdictBadge(entry.verdict)}</td>
+      <td class="mono">${esc(action)}</td>
+      <td class="mono">${esc(duration)}</td>
+    </tr>`;
+  }
+
+  html += `</tbody></table>`;
+  return html;
+}
+
+function renderAnnotationList(entries) {
+  let html = `<p class="section-subtitle">${entries.length} annotation${entries.length !== 1 ? 's' : ''}</p>
+    <div class="annotation-list">`;
+
+  for (const entry of entries) {
+    const annotationText = formatAnnotations(entry);
+    html += `<div class="annotation-card">
+      <span class="mono">${esc(entry.turn_id || '-')}</span>
+      <span class="mono">${esc(getHookName(entry))}</span>
+      <span>${esc(annotationText || JSON.stringify(entry))}</span>
+    </div>`;
+  }
+
+  html += `</div>`;
+  return html;
+}
+
+export function render({
+  audit,
+  annotations,
+  coordinatorAudit = null,
+  coordinatorAnnotations = null,
+  filter = {},
+}) {
   const hasAudit = Array.isArray(audit) && audit.length > 0;
   const hasAnnotations = Array.isArray(annotations) && annotations.length > 0;
+  const hasCoordinatorAudit = Array.isArray(coordinatorAudit) && coordinatorAudit.length > 0;
+  const hasCoordinatorAnnotations = Array.isArray(coordinatorAnnotations) && coordinatorAnnotations.length > 0;
+  const hasAnyData = hasAudit || hasAnnotations || hasCoordinatorAudit || hasCoordinatorAnnotations;
+  const hasCoordinatorData = hasCoordinatorAudit || hasCoordinatorAnnotations;
 
-  if (!hasAudit && !hasAnnotations) {
+  if (!hasAnyData) {
     return `<div class="placeholder"><h2>Hook Audit</h2><p>No hook activity recorded.</p></div>`;
   }
 
+  // Build combined audit for shared filter bar
+  const combinedAudit = [
+    ...(Array.isArray(audit) ? audit : []),
+    ...(Array.isArray(coordinatorAudit) ? coordinatorAudit : []),
+  ];
+  const phases = collectHookPhases(combinedAudit);
+  const hookNames = collectHookNames(combinedAudit);
+  const selectedPhase = filter.phase || 'all';
+  const selectedVerdict = filter.verdict || 'all';
+  const selectedHookName = filter.hookName || 'all';
+
   let html = `<div class="hooks-view">`;
 
-  if (hasAudit) {
-    const filtered = filterAudit(audit, filter);
-    const phases = collectHookPhases(audit);
-    const hookNames = collectHookNames(audit);
-    const selectedPhase = filter.phase || 'all';
-    const selectedVerdict = filter.verdict || 'all';
-    const selectedHookName = filter.hookName || 'all';
-
-    html += `<div class="section"><h3>Hook Audit Log</h3>
-      <p class="section-subtitle">${filtered.length} of ${audit.length} hook execution${audit.length !== 1 ? 's' : ''}</p>
+  // Shared filter bar (covers both repo-local and coordinator data)
+  if (hasAudit || hasCoordinatorAudit) {
+    html += `<div class="section"><h3>Hook Audit</h3>
+      <p class="section-subtitle">${hasCoordinatorData ? 'Repo-local and coordinator hook audit surfaces' : 'Hook audit surface'}</p>
       <div class="filter-bar">
         <label class="filter-control">
           <span>Phase</span>
@@ -135,41 +192,37 @@ export function render({ audit, annotations, filter = {} }) {
           </select>
         </label>
       </div>
-      <table class="data-table">
-        <thead><tr><th>Time</th><th>Phase</th><th>Hook</th><th>Verdict</th><th>Action</th><th>Duration</th></tr></thead>
-        <tbody>`;
-
-    for (const entry of filtered) {
-      const duration = entry.duration_ms != null ? `${entry.duration_ms}ms` : '-';
-      const action = entry.orchestrator_action || entry.action || 'continued';
-      html += `<tr>
-        <td class="mono">${esc(entry.timestamp || '-')}</td>
-        <td class="mono">${esc(getHookPhase(entry))}</td>
-        <td>${esc(getHookName(entry))}</td>
-        <td>${verdictBadge(entry.verdict)}</td>
-        <td class="mono">${esc(action)}</td>
-        <td class="mono">${esc(duration)}</td>
-      </tr>`;
-    }
+    </div>`;
+  }
 
-    html += `</tbody></table></div>`;
+  // Repo-local audit section
+  if (hasAudit) {
+    const sectionTitle = hasCoordinatorData ? 'Repo Hook Audit Log' : 'Hook Audit Log';
+    html += `<div class="section"><h3>${sectionTitle}</h3>`;
+    html += renderAuditTable(audit, filter);
+    html += `</div>`;
+  }
+
+  // Coordinator audit section
+  if (hasCoordinatorAudit) {
+    html += `<div class="section"><h3>Coordinator Hook Audit Log</h3>`;
+    html += renderAuditTable(coordinatorAudit, filter);
+    html += `</div>`;
   }
 
+  // Repo-local annotations section
   if (hasAnnotations) {
-    html += `<div class="section"><h3>Hook Annotations</h3>
-      <p class="section-subtitle">${annotations.length} annotation${annotations.length !== 1 ? 's' : ''}</p>
-      <div class="annotation-list">`;
-
-    for (const entry of annotations) {
-      const annotationText = formatAnnotations(entry);
-      html += `<div class="annotation-card">
-        <span class="mono">${esc(entry.turn_id || '-')}</span>
-        <span class="mono">${esc(getHookName(entry))}</span>
-        <span>${esc(annotationText || JSON.stringify(entry))}</span>
-      </div>`;
-    }
+    const sectionTitle = hasCoordinatorData ? 'Repo Hook Annotations' : 'Hook Annotations';
+    html += `<div class="section"><h3>${sectionTitle}</h3>`;
+    html += renderAnnotationList(annotations);
+    html += `</div>`;
+  }
 
-    html += `</div></div>`;
+  // Coordinator annotations section
+  if (hasCoordinatorAnnotations) {
+    html += `<div class="section"><h3>Coordinator Hook Annotations</h3>`;
+    html += renderAnnotationList(coordinatorAnnotations);
+    html += `</div>`;
   }
 
   html += `</div>`;

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)',
@@ -230,6 +263,8 @@ function renderConnectorHealthPanel(connectorsPayload) {
   return html;
 }
 
+export { formatDuration, computeElapsed, formatTimestamp };
+
 export function render({ state, continuity, history, annotations, audit, connectors }) {
   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 +292,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 +319,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) {

package/package.json

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