agentxchain 0.8.8 → 2.2.0

package/dashboard/components/gate.js

@@ -0,0 +1,311 @@
+/**
+ * Gate Review view — renders pending phase transitions and run completion gates.
+ *
+ * Pure render function: takes data, returns HTML string. Testable in Node.js.
+ * Per DEC-DASH-002: read-only. Shows the exact CLI command to approve, no buttons.
+ */
+
+function esc(str) {
+  if (!str) return '';
+  return String(str)
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+}
+
+function isPhaseBoundaryEntry(entry) {
+  if (!entry || typeof entry !== 'object') {
+    return false;
+  }
+
+  if (entry.phase_transition === true) {
+    return true;
+  }
+
+  return typeof entry.phase_transition_request === 'string' && entry.phase_transition_request.trim().length > 0;
+}
+
+function findPostGateTurns(history, requestedByTurn) {
+  if (!Array.isArray(history) || history.length === 0) {
+    return [];
+  }
+
+  if (!requestedByTurn) {
+    return history.slice();
+  }
+
+  const requestedIdx = history.findIndex((entry) => entry.turn_id === requestedByTurn);
+  if (requestedIdx === -1) {
+    return history.slice();
+  }
+
+  // Include the requesting turn and all turns after the most recent accepted
+  // phase-transition request. history.jsonl persists phase_transition_request,
+  // not a synthetic phase_transition marker.
+  let startIdx = 0;
+  for (let i = requestedIdx - 1; i >= 0; i--) {
+    if (isPhaseBoundaryEntry(history[i])) {
+      startIdx = i + 1;
+      break;
+    }
+  }
+
+  return history.slice(startIdx, requestedIdx + 1);
+}
+
+function aggregateEvidence(turns) {
+  const summaries = [];
+  const allObjections = [];
+  const allRisks = [];
+  const allDecisions = [];
+  const allFiles = [];
+
+  for (const turn of turns) {
+    if (turn.summary) {
+      const role = turn.assigned_role || turn.role || turn.agent || 'agent';
+      summaries.push({ role, summary: turn.summary, turn_id: turn.turn_id });
+    }
+    if (Array.isArray(turn.objections)) {
+      for (const obj of turn.objections) {
+        allObjections.push(obj);
+      }
+    }
+    if (Array.isArray(turn.risks)) {
+      for (const risk of turn.risks) {
+        allRisks.push(risk);
+      }
+    }
+    if (Array.isArray(turn.decisions)) {
+      for (const dec of turn.decisions) {
+        allDecisions.push(dec);
+      }
+    }
+    const files = turn.observed_artifact?.files_changed || turn.files_changed || [];
+    for (const f of files) {
+      if (!allFiles.includes(f)) {
+        allFiles.push(f);
+      }
+    }
+  }
+
+  return { summaries, objections: allObjections, risks: allRisks, decisions: allDecisions, files: allFiles };
+}
+
+function renderList(title, items, formatter = (item) => item) {
+  if (!Array.isArray(items) || items.length === 0) {
+    return '';
+  }
+
+  const rows = items
+    .map((item) => formatter(item))
+    .filter(Boolean)
+    .map((item) => `<li>${esc(item)}</li>`)
+    .join('');
+
+  if (!rows) {
+    return '';
+  }
+
+  return `<div class="gate-support">
+    <p><strong>${esc(title)}:</strong></p>
+    <ul>${rows}</ul>
+  </div>`;
+}
+
+export { findPostGateTurns, aggregateEvidence };
+
+function findCoordinatorGateRequest(history, pendingGate) {
+  if (!Array.isArray(history) || !pendingGate?.gate) {
+    return null;
+  }
+
+  const requestedType = pendingGate.gate_type === 'phase_transition'
+    ? 'phase_transition_requested'
+    : 'run_completion_requested';
+
+  for (let i = history.length - 1; i >= 0; i -= 1) {
+    const entry = history[i];
+    if (entry?.type === requestedType && entry.gate === pendingGate.gate) {
+      return { entry, index: i };
+    }
+  }
+
+  return null;
+}
+
+function findCoordinatorGateEvidence(history, pendingGate) {
+  if (!Array.isArray(history) || history.length === 0 || !pendingGate) {
+    return [];
+  }
+
+  const gateRequest = findCoordinatorGateRequest(history, pendingGate);
+  const endIndex = gateRequest ? gateRequest.index : history.length;
+  let startIndex = 0;
+
+  for (let i = endIndex - 1; i >= 0; i -= 1) {
+    if (history[i]?.type === 'phase_transition_approved') {
+      startIndex = i + 1;
+      break;
+    }
+  }
+
+  return history
+    .slice(startIndex, endIndex)
+    .filter((entry) => entry?.type === 'acceptance_projection');
+}
+
+function aggregateCoordinatorEvidence(entries) {
+  const summaries = [];
+  const decisions = [];
+  const files = [];
+
+  for (const entry of entries) {
+    summaries.push({
+      role: entry.repo_id || 'repo',
+      summary: entry.summary || 'Accepted turn projected',
+      turn_id: entry.repo_turn_id || entry.projection_ref || '-',
+    });
+
+    if (Array.isArray(entry.decisions)) {
+      for (const decision of entry.decisions) {
+        decisions.push(decision);
+      }
+    }
+
+    for (const file of entry.files_changed || []) {
+      if (!files.includes(file)) {
+        files.push(file);
+      }
+    }
+  }
+
+  return { summaries, decisions, objections: [], risks: [], files };
+}
+
+export function render({
+  state,
+  history = [],
+  coordinatorState = null,
+  coordinatorHistory = [],
+  coordinatorBarriers = {},
+}) {
+  const repoPendingTransition = state?.pending_phase_transition || null;
+  const repoPendingCompletion = state?.pending_run_completion || null;
+  const coordinatorPendingGate = coordinatorState?.pending_gate || null;
+  const pendingTransition = repoPendingTransition || (coordinatorPendingGate?.gate_type === 'phase_transition' ? coordinatorPendingGate : null);
+  const pendingCompletion = repoPendingCompletion || (coordinatorPendingGate?.gate_type === 'run_completion' ? coordinatorPendingGate : null);
+  const isCoordinator = Boolean(!repoPendingTransition && !repoPendingCompletion && coordinatorPendingGate);
+
+  if (!pendingTransition && !pendingCompletion) {
+    const status = state?.status || coordinatorState?.status || 'unknown';
+    if (status === 'paused') {
+      return `<div class="placeholder"><h2>Gate Review</h2><p>Run is paused. A human gate approval may be pending. Check <code class="mono">agentxchain status</code> for details.</p></div>`;
+    }
+    return `<div class="placeholder"><h2>Gate Review</h2><p>No pending gates. The run will pause when a human approval is required.</p></div>`;
+  }
+
+  let html = `<div class="gate-view">`;
+
+  if (pendingTransition) {
+    const postGateTurns = isCoordinator
+      ? findCoordinatorGateEvidence(coordinatorHistory, pendingTransition)
+      : findPostGateTurns(history, pendingTransition.requested_by_turn);
+    const evidence = isCoordinator
+      ? aggregateCoordinatorEvidence(postGateTurns)
+      : aggregateEvidence(postGateTurns);
+    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>
+        <dt>To</dt><dd>${esc(pendingTransition.to)}</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>`;
+    }
+    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>`;
+      for (const s of evidence.summaries) {
+        html += `<li><strong>${esc(s.role)}</strong> (${esc(s.turn_id)}): ${esc(s.summary)}</li>`;
+      }
+      html += `</ul></div>`;
+    }
+    html += renderList('Objections', evidence.objections, (item) => item?.statement || item);
+    html += renderList('Risks', evidence.risks, (item) => item?.statement || item);
+    html += renderList('Decisions', evidence.decisions, (item) => item?.statement || item);
+    if (evidence.files.length > 0) {
+      html += `<div class="gate-support"><p><strong>Files Changed:</strong></p><ul>${evidence.files.map(f => `<li class="mono">${esc(f)}</li>`).join('')}</ul></div>`;
+    }
+    if (isCoordinator) {
+      const pendingBarriers = Object.entries(coordinatorBarriers || {}).filter(([, barrier]) => barrier?.status !== 'satisfied');
+      if (pendingBarriers.length > 0) {
+        html += `<div class="gate-support"><p><strong>Coordinator Barriers:</strong></p><ul>${pendingBarriers.map(([barrierId, barrier]) => (
+          `<li>${esc(`${barrierId}: ${barrier.status}`)}</li>`
+        )).join('')}</ul></div>`;
+      }
+    }
+    html += `
+      <div class="gate-action">
+        <p>Approve with:</p>
+        <pre class="recovery-command mono" data-copy="${isCoordinator ? 'agentxchain multi approve-gate' : 'agentxchain approve-transition'}">${isCoordinator ? 'agentxchain multi approve-gate' : 'agentxchain approve-transition'}</pre>
+      </div>
+    </div>`;
+  }
+
+  if (pendingCompletion) {
+    const postGateTurns = isCoordinator
+      ? findCoordinatorGateEvidence(coordinatorHistory, pendingCompletion)
+      : findPostGateTurns(history, pendingCompletion.requested_by_turn);
+    const evidence = isCoordinator
+      ? aggregateCoordinatorEvidence(postGateTurns)
+      : aggregateEvidence(postGateTurns);
+    html += `<div class="gate-card">
+      <h3>Run Completion Gate</h3>
+      <dl class="detail-list">`;
+    if (pendingCompletion.gate) {
+      html += `<dt>Gate</dt><dd class="mono">${esc(pendingCompletion.gate)}</dd>`;
+    }
+    if (pendingCompletion.requested_by_turn) {
+      html += `<dt>Requested By</dt><dd class="mono">${esc(pendingCompletion.requested_by_turn)}</dd>`;
+    }
+    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>`;
+      for (const s of evidence.summaries) {
+        html += `<li><strong>${esc(s.role)}</strong> (${esc(s.turn_id)}): ${esc(s.summary)}</li>`;
+      }
+      html += `</ul></div>`;
+    }
+    html += renderList('Objections', evidence.objections, (item) => item?.statement || item);
+    html += renderList('Risks', evidence.risks, (item) => item?.statement || item);
+    html += renderList('Decisions', evidence.decisions, (item) => item?.statement || item);
+    if (evidence.files.length > 0) {
+      html += `<div class="gate-support"><p><strong>Files Changed:</strong></p><ul>${evidence.files.map(f => `<li class="mono">${esc(f)}</li>`).join('')}</ul></div>`;
+    }
+    html += `
+      <div class="gate-action">
+        <p>Approve with:</p>
+        <pre class="recovery-command mono" data-copy="${isCoordinator ? 'agentxchain multi approve-gate' : 'agentxchain approve-completion'}">${isCoordinator ? 'agentxchain multi approve-gate' : 'agentxchain approve-completion'}</pre>
+      </div>
+    </div>`;
+  }
+
+  html += `</div>`;
+  return html;
+}

package/dashboard/components/hooks.js

@@ -0,0 +1,177 @@
+/**
+ * Hook Audit view — renders hook-audit.jsonl entries.
+ *
+ * Pure render function: takes data, returns HTML string. Testable in Node.js.
+ */
+
+function esc(str) {
+  if (!str) return '';
+  return String(str)
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+}
+
+function getHookPhase(entry) {
+  return entry?.hook_phase || entry?.phase || '';
+}
+
+function getHookName(entry) {
+  return entry?.hook_name || entry?.hook || entry?.name || '';
+}
+
+function formatAnnotations(entry) {
+  if (Array.isArray(entry?.annotations) && entry.annotations.length > 0) {
+    return entry.annotations
+      .map((annotation) => annotation && typeof annotation === 'object'
+        ? `${annotation.key}: ${annotation.value}`
+        : null)
+      .filter(Boolean)
+      .join(', ');
+  }
+
+  return entry?.annotation || entry?.message || '';
+}
+
+function verdictBadge(verdict) {
+  const colors = {
+    allow: 'var(--green)',
+    warn: 'var(--yellow)',
+    block: 'var(--red)',
+  };
+  const color = colors[verdict] || 'var(--text-dim)';
+  return `<span class="badge" style="color:${color};border-color:${color}">${esc(verdict)}</span>`;
+}
+
+export function filterAudit(audit, filters = {}) {
+  if (!Array.isArray(audit)) return [];
+
+  const phase = String(filters.phase || 'all').trim().toLowerCase();
+  const verdict = String(filters.verdict || 'all').trim().toLowerCase();
+  const hookName = String(filters.hookName || 'all').trim().toLowerCase();
+
+  return audit.filter((entry) => {
+    if (phase !== 'all') {
+      const entryPhase = String(getHookPhase(entry)).trim().toLowerCase();
+      if (entryPhase !== phase) return false;
+    }
+
+    if (verdict !== 'all') {
+      const entryVerdict = String(entry.verdict || '').trim().toLowerCase();
+      if (entryVerdict !== verdict) return false;
+    }
+
+    if (hookName !== 'all') {
+      const entryHookName = String(getHookName(entry)).trim().toLowerCase();
+      if (entryHookName !== hookName) return false;
+    }
+
+    return true;
+  });
+}
+
+function collectHookPhases(audit) {
+  const unique = new Set();
+  for (const entry of audit) {
+    const phase = getHookPhase(entry);
+    if (phase) unique.add(phase);
+  }
+  return Array.from(unique).sort();
+}
+
+function collectHookNames(audit) {
+  const unique = new Set();
+  for (const entry of audit) {
+    const name = getHookName(entry);
+    if (name) unique.add(name);
+  }
+  return Array.from(unique).sort();
+}
+
+export function render({ audit, annotations, filter = {} }) {
+  const hasAudit = Array.isArray(audit) && audit.length > 0;
+  const hasAnnotations = Array.isArray(annotations) && annotations.length > 0;
+
+  if (!hasAudit && !hasAnnotations) {
+    return `<div class="placeholder"><h2>Hook Audit</h2><p>No hook activity recorded.</p></div>`;
+  }
+
+  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>
+      <div class="filter-bar">
+        <label class="filter-control">
+          <span>Phase</span>
+          <select data-view-control="hooks-phase">
+            <option value="all"${selectedPhase === 'all' ? ' selected' : ''}>All phases</option>
+            ${phases.map((p) => `<option value="${esc(p)}"${selectedPhase === p ? ' selected' : ''}>${esc(p)}</option>`).join('')}
+          </select>
+        </label>
+        <label class="filter-control">
+          <span>Verdict</span>
+          <select data-view-control="hooks-verdict">
+            <option value="all"${selectedVerdict === 'all' ? ' selected' : ''}>All verdicts</option>
+            <option value="allow"${selectedVerdict === 'allow' ? ' selected' : ''}>allow</option>
+            <option value="warn"${selectedVerdict === 'warn' ? ' selected' : ''}>warn</option>
+            <option value="block"${selectedVerdict === 'block' ? ' selected' : ''}>block</option>
+          </select>
+        </label>
+        <label class="filter-control">
+          <span>Hook</span>
+          <select data-view-control="hooks-hookname">
+            <option value="all"${selectedHookName === 'all' ? ' selected' : ''}>All hooks</option>
+            ${hookNames.map((n) => `<option value="${esc(n)}"${selectedHookName === n ? ' selected' : ''}>${esc(n)}</option>`).join('')}
+          </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>`;
+    }
+
+    html += `</tbody></table></div>`;
+  }
+
+  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>`;
+    }
+
+    html += `</div></div>`;
+  }
+
+  html += `</div>`;
+  return html;
+}

package/dashboard/components/initiative.js

@@ -0,0 +1,147 @@
+function esc(str) {
+  if (!str) return '';
+  return String(str)
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+}
+
+function badge(label, color = 'var(--text-dim)') {
+  return `<span class="badge" style="color:${color};border-color:${color}">${esc(label)}</span>`;
+}
+
+function statusColor(status) {
+  const colors = {
+    active: 'var(--green)',
+    running: 'var(--green)',
+    paused: 'var(--yellow)',
+    blocked: 'var(--red)',
+    completed: 'var(--accent)',
+    linked: 'var(--text-dim)',
+    initialized: 'var(--accent)',
+    satisfied: 'var(--green)',
+    partially_satisfied: 'var(--yellow)',
+    pending: 'var(--text-dim)',
+  };
+  return colors[status] || 'var(--text-dim)';
+}
+
+function summarizeBarriers(barriers) {
+  const counts = { pending: 0, partially_satisfied: 0, satisfied: 0, other: 0 };
+  for (const barrier of Object.values(barriers || {})) {
+    const key = counts[barrier?.status] != null ? barrier.status : 'other';
+    counts[key] += 1;
+  }
+  return counts;
+}
+
+export function render({ coordinatorState, coordinatorBarriers = {}, barrierLedger = [] }) {
+  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 barriers = Object.entries(coordinatorBarriers || {});
+  const pendingGate = coordinatorState.pending_gate || null;
+  const barrierCounts = summarizeBarriers(coordinatorBarriers);
+  const recentBarrierTransitions = Array.isArray(barrierLedger)
+    ? barrierLedger.slice(-5).reverse()
+    : [];
+
+  let html = `<div class="initiative-view">`;
+  html += `<div class="run-header">
+    <div class="run-meta">
+      <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>
+    </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>`;
+    }
+    if (coordinatorState.blocked_reason) {
+      html += `<div class="gate-card">
+        <h3>Blocked State</h3>
+        <p class="turn-summary">${esc(
+          typeof coordinatorState.blocked_reason === 'string'
+            ? coordinatorState.blocked_reason
+            : JSON.stringify(coordinatorState.blocked_reason)
+        )}</p>
+      </div>`;
+    }
+    html += `</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) {
+    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>
+    </tr>`;
+  }
+  html += `</tbody></table></div>`;
+
+  html += `<div class="section"><h3>Barrier Snapshot</h3>
+    <p class="section-subtitle">Pending ${barrierCounts.pending}, partial ${barrierCounts.partially_satisfied}, satisfied ${barrierCounts.satisfied}</p>`;
+  if (barriers.length === 0) {
+    html += `<div class="placeholder compact"><p>No barriers recorded.</p></div>`;
+  } else {
+    html += `<div class="turn-list">`;
+    for (const [barrierId, barrier] of barriers) {
+      html += `<div class="turn-card">
+        <div class="turn-header">
+          <span class="mono">${esc(barrierId)}</span>
+          ${badge(barrier.status || 'unknown', statusColor(barrier.status))}
+        </div>
+        <div class="turn-detail"><span class="detail-label">Workstream:</span> ${esc(barrier.workstream_id || '-')}</div>
+        <div class="turn-detail"><span class="detail-label">Type:</span> ${esc(barrier.type || '-')}</div>`;
+      if (Array.isArray(barrier.required_repos) && barrier.required_repos.length > 0) {
+        html += `<div class="turn-detail"><span class="detail-label">Required Repos:</span> ${esc(barrier.required_repos.join(', '))}</div>`;
+      }
+      if (Array.isArray(barrier.satisfied_repos) && barrier.satisfied_repos.length > 0) {
+        html += `<div class="turn-detail"><span class="detail-label">Satisfied Repos:</span> ${esc(barrier.satisfied_repos.join(', '))}</div>`;
+      }
+      html += `</div>`;
+    }
+    html += `</div>`;
+  }
+  html += `</div>`;
+
+  if (recentBarrierTransitions.length > 0) {
+    html += `<div class="section"><h3>Recent Barrier Transitions</h3><div class="annotation-list">`;
+    for (const entry of recentBarrierTransitions) {
+      html += `<div class="annotation-card">
+        <span class="mono">${esc(entry.barrier_id || '-')}</span>
+        <span>${esc(`${entry.previous_status || 'unknown'} -> ${entry.new_status || 'unknown'}`)}</span>
+      </div>`;
+    }
+    html += `</div></div>`;
+  }
+
+  html += `</div>`;
+  return html;
+}