agentxchain 0.8.8 → 2.2.0

package/dashboard/app.js

@@ -0,0 +1,305 @@
+/**
+ * Dashboard app — router, data fetching, and component mounting.
+ *
+ * Loaded as an ES module from index.html. Fetches state from the bridge
+ * server API and delegates rendering to view components.
+ */
+
+import { render as renderTimeline } from './components/timeline.js';
+import { render as renderLedger } from './components/ledger.js';
+import { render as renderHooks } from './components/hooks.js';
+import { render as renderBlocked } from './components/blocked.js';
+import { render as renderGate } from './components/gate.js';
+import { render as renderInitiative } from './components/initiative.js';
+import { render as renderCrossRepo } from './components/cross-repo.js';
+
+const VIEWS = {
+  timeline: { fetch: ['state', 'history', 'audit', 'annotations'], render: renderTimeline },
+  ledger: { fetch: ['ledger'], render: renderLedger },
+  hooks: { fetch: ['audit', 'annotations'], render: renderHooks },
+  blocked: { fetch: ['state', 'audit', 'coordinatorState', 'coordinatorAudit'], render: renderBlocked },
+  gate: { fetch: ['state', 'history', 'coordinatorState', 'coordinatorHistory', 'coordinatorBarriers'], render: renderGate },
+  initiative: { fetch: ['coordinatorState', 'coordinatorBarriers', 'barrierLedger'], render: renderInitiative },
+  'cross-repo': { fetch: ['coordinatorState', 'coordinatorHistory'], render: renderCrossRepo },
+};
+
+const API_MAP = {
+  state: '/api/state',
+  history: '/api/history',
+  ledger: '/api/ledger',
+  audit: '/api/hooks/audit',
+  annotations: '/api/hooks/annotations',
+  coordinatorState: '/api/coordinator/state',
+  coordinatorHistory: '/api/coordinator/history',
+  coordinatorBarriers: '/api/coordinator/barriers',
+  barrierLedger: '/api/coordinator/barrier-ledger',
+  coordinatorAudit: '/api/coordinator/hooks/audit',
+};
+
+const viewState = {
+  ledger: {
+    agent: 'all',
+    query: '',
+    phase: 'all',
+    dateFrom: '',
+    dateTo: '',
+  },
+  hooks: {
+    phase: 'all',
+    verdict: 'all',
+    hookName: 'all',
+  },
+};
+
+let activeViewName = null;
+let activeViewData = null;
+
+function escapeHtml(str) {
+  if (str == null) return '';
+  return String(str)
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+}
+
+async function fetchData(keys) {
+  const results = {};
+  await Promise.all(keys.map(async (key) => {
+    try {
+      const res = await fetch(API_MAP[key]);
+      results[key] = res.ok ? await res.json() : null;
+    } catch {
+      results[key] = null;
+    }
+  }));
+  return results;
+}
+
+function currentView() {
+  return (location.hash || '#timeline').slice(1);
+}
+
+async function pickInitialView() {
+  if (location.hash) {
+    return currentView();
+  }
+
+  const [stateResult, coordinatorResult] = await Promise.all([
+    fetchData(['state']).catch(() => ({ state: null })),
+    fetchData(['coordinatorState']).catch(() => ({ coordinatorState: null })),
+  ]);
+
+  if (!stateResult.state && coordinatorResult.coordinatorState) {
+    location.hash = '#initiative';
+    return 'initiative';
+  }
+
+  return currentView();
+}
+
+function buildRenderData(viewName, data) {
+  if (viewName === 'ledger') {
+    return {
+      ...data,
+      filter: viewState.ledger,
+    };
+  }
+  if (viewName === 'hooks') {
+    return {
+      ...data,
+      filter: viewState.hooks,
+    };
+  }
+  return data;
+}
+
+function renderView(viewName, data) {
+  const container = document.getElementById('view-container');
+  const view = VIEWS[viewName];
+  if (!view) {
+    container.innerHTML = `<div class="placeholder"><h2>Unknown View</h2><p>View "${escapeHtml(viewName)}" not found.</p></div>`;
+    return;
+  }
+
+  container.innerHTML = view.render(buildRenderData(viewName, data));
+}
+
+async function loadView(viewName, { refresh = true } = {}) {
+  const view = VIEWS[viewName];
+  if (!view) {
+    renderView(viewName, null);
+    return;
+  }
+
+  const shouldRefetch = refresh || activeViewName !== viewName || !activeViewData;
+  activeViewName = viewName;
+  if (shouldRefetch) {
+    activeViewData = await fetchData(view.fetch);
+  }
+
+  renderView(viewName, activeViewData);
+}
+
+// ── WebSocket connection ──────────────────────────────────────────────────
+
+let ws = null;
+let reconnectDelay = 1000;
+
+function connect() {
+  const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
+  ws = new WebSocket(`${protocol}//${location.host}/ws`);
+
+  const statusDot = document.getElementById('ws-status');
+  const statusLabel = document.getElementById('ws-label');
+
+  ws.onopen = () => {
+    statusDot.classList.remove('disconnected');
+    statusLabel.textContent = 'Connected';
+    reconnectDelay = 1000;
+    loadView(currentView());
+  };
+
+  ws.onmessage = (event) => {
+    try {
+      const msg = JSON.parse(event.data);
+      if (msg.type === 'invalidate') {
+        loadView(currentView());
+      }
+    } catch {}
+  };
+
+  ws.onclose = () => {
+    statusDot.classList.add('disconnected');
+    statusLabel.textContent = 'Disconnected';
+    setTimeout(() => {
+      reconnectDelay = Math.min(reconnectDelay * 2, 30000);
+      connect();
+    }, reconnectDelay);
+  };
+
+  ws.onerror = () => ws.close();
+}
+
+// ── Router ─────────────────────────────────────────────────────────────────
+
+function updateNav() {
+  const view = currentView();
+  document.querySelectorAll('nav a').forEach(a => {
+    a.classList.toggle('active', a.getAttribute('href') === '#' + view);
+  });
+}
+
+window.addEventListener('hashchange', () => {
+  updateNav();
+  loadView(currentView());
+});
+
+document.addEventListener('input', (event) => {
+  const view = currentView();
+  if (!activeViewData) return;
+
+  const control = event.target?.dataset?.viewControl;
+  if (!control) return;
+
+  if (view === 'ledger') {
+    if (control === 'ledger-query') {
+      viewState.ledger.query = event.target.value;
+      renderView('ledger', activeViewData);
+    } else if (control === 'ledger-date-from') {
+      viewState.ledger.dateFrom = event.target.value;
+      renderView('ledger', activeViewData);
+    } else if (control === 'ledger-date-to') {
+      viewState.ledger.dateTo = event.target.value;
+      renderView('ledger', activeViewData);
+    }
+  }
+});
+
+document.addEventListener('change', (event) => {
+  const view = currentView();
+  if (!activeViewData) return;
+
+  const control = event.target?.dataset?.viewControl;
+  if (!control) return;
+
+  if (view === 'ledger') {
+    if (control === 'ledger-agent') {
+      viewState.ledger.agent = event.target.value;
+      renderView('ledger', activeViewData);
+    } else if (control === 'ledger-phase') {
+      viewState.ledger.phase = event.target.value;
+      renderView('ledger', activeViewData);
+    } else if (control === 'ledger-date-from') {
+      viewState.ledger.dateFrom = event.target.value;
+      renderView('ledger', activeViewData);
+    } else if (control === 'ledger-date-to') {
+      viewState.ledger.dateTo = event.target.value;
+      renderView('ledger', activeViewData);
+    }
+  }
+
+  if (view === 'hooks') {
+    if (control === 'hooks-phase') {
+      viewState.hooks.phase = event.target.value;
+      renderView('hooks', activeViewData);
+    } else if (control === 'hooks-verdict') {
+      viewState.hooks.verdict = event.target.value;
+      renderView('hooks', activeViewData);
+    } else if (control === 'hooks-hookname') {
+      viewState.hooks.hookName = event.target.value;
+      renderView('hooks', activeViewData);
+    }
+  }
+});
+
+// ── Turn expand toggle ──────────────────────────────────────────────────
+
+document.addEventListener('click', (event) => {
+  const turnCard = event.target.closest('[data-turn-expand]');
+  if (!turnCard) return;
+  // Don't toggle if clicking inside the detail panel itself
+  if (event.target.closest('.turn-detail-panel')) return;
+  turnCard.toggleAttribute('data-expanded');
+});
+
+// ── Copy to clipboard ────────────────────────────────────────────────────
+
+document.addEventListener('click', (event) => {
+  const target = event.target.closest('[data-copy]');
+  if (!target) return;
+
+  const text = target.getAttribute('data-copy');
+  if (!text) return;
+
+  if (navigator.clipboard && navigator.clipboard.writeText) {
+    navigator.clipboard.writeText(text).then(() => {
+      target.classList.add('copied');
+      target.setAttribute('data-copied', 'Copied!');
+      setTimeout(() => {
+        target.classList.remove('copied');
+        target.removeAttribute('data-copied');
+      }, 1500);
+    }).catch(() => {
+      fallbackSelect(target);
+    });
+  } else {
+    fallbackSelect(target);
+  }
+});
+
+function fallbackSelect(el) {
+  const range = document.createRange();
+  range.selectNodeContents(el);
+  const sel = window.getSelection();
+  sel.removeAllRanges();
+  sel.addRange(range);
+}
+
+// ── Init ───────────────────────────────────────────────────────────────────
+
+pickInitialView().finally(() => {
+  updateNav();
+  connect();
+});

package/dashboard/components/blocked.js

@@ -0,0 +1,145 @@
+/**
+ * Blocked State view — renders current blocked state with recovery info.
+ *
+ * Pure render function: takes data, returns HTML string. Testable in Node.js.
+ * Per DEC-DASH-002: read-only. Shows copyable CLI recovery commands, no write actions.
+ */
+
+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 selectRelevantAuditEntries(state, audit) {
+  if (!Array.isArray(audit) || audit.length === 0) {
+    return [];
+  }
+
+  const blocked = state?.blocked_reason || state?.blocked_state || {};
+  const blockedOn = String(state?.blocked_on || '');
+  const hookMatch = blockedOn.match(/^hook:([^:]+):(.+)$/);
+
+  if (hookMatch) {
+    const [, hookPhase, hookName] = hookMatch;
+    const matchingEntries = audit.filter((entry) => (
+      getHookPhase(entry) === hookPhase && getHookName(entry) === hookName
+    ));
+    if (matchingEntries.length > 0) {
+      return matchingEntries.slice(-3);
+    }
+  }
+
+  const category = String(blocked.category || blocked.reason || '').toLowerCase();
+  if (category.includes('validation') || blockedOn.startsWith('validator:')) {
+    const validationEntries = audit.filter((entry) => (
+      getHookPhase(entry).includes('validation')
+    ));
+    if (validationEntries.length > 0) {
+      return validationEntries.slice(-3);
+    }
+  }
+
+  return audit.slice(-3);
+}
+
+export function render({ state, audit = [], coordinatorState = null, coordinatorAudit = [] }) {
+  const activeState = state?.status === 'blocked' ? state : coordinatorState;
+  const activeAudit = activeState === state ? audit : coordinatorAudit;
+  const isCoordinator = activeState === coordinatorState;
+
+  if (!activeState || activeState.status !== 'blocked') {
+    return `<div class="placeholder"><h2>Blocked State</h2><p>Run is not currently blocked.</p></div>`;
+  }
+
+  const blocked = activeState.blocked_reason || activeState.blocked_state || {};
+  const recovery = blocked.recovery || {};
+  const reason = blocked.category || blocked.reason || activeState.blocked_on || blocked || 'Unknown';
+  const detail = recovery.detail || blocked.detail || null;
+  const recoveryAction = recovery.recovery_action || blocked.recovery_action || blocked.recovery_command || null;
+  const blockedBy = activeState.blocked_on || blocked.blocked_by || blocked.source || null;
+  const turnId = blocked.turn_id || null;
+  const owner = recovery.owner || null;
+  const typedReason = recovery.typed_reason || null;
+  const turnRetained = typeof recovery.turn_retained === 'boolean' ? recovery.turn_retained : null;
+  const blockedAt = blocked.blocked_at || null;
+  const relevantAudit = selectRelevantAuditEntries(activeState, activeAudit);
+
+  let html = `<div class="blocked-view">
+    <div class="blocked-banner">
+      <div class="blocked-icon">BLOCKED</div>
+      <div class="blocked-reason">${esc(reason)}</div>
+    </div>`;
+
+  // Metadata
+  html += `<div class="section"><h3>Block Details</h3><dl class="detail-list">`;
+  if (blockedBy) html += `<dt>Blocked By</dt><dd>${esc(blockedBy)}</dd>`;
+  if (typedReason) html += `<dt>Recovery Type</dt><dd>${esc(typedReason)}</dd>`;
+  if (owner) html += `<dt>Owner</dt><dd>${esc(owner)}</dd>`;
+  if (turnId) html += `<dt>Turn</dt><dd class="mono">${esc(turnId)}</dd>`;
+  if (blocked.phase) html += `<dt>Phase</dt><dd>${esc(blocked.phase)}</dd>`;
+  if (blocked.hook) html += `<dt>Hook</dt><dd class="mono">${esc(blocked.hook)}</dd>`;
+  if (detail) html += `<dt>Detail</dt><dd>${esc(detail)}</dd>`;
+  if (turnRetained != null) html += `<dt>Turn Retained</dt><dd>${turnRetained ? 'yes' : 'no'}</dd>`;
+  if (blockedAt) html += `<dt>Blocked At</dt><dd class="mono">${esc(blockedAt)}</dd>`;
+  html += `</dl></div>`;
+
+  // Recovery command
+  if (recoveryAction) {
+    html += `<div class="section"><h3>Recovery</h3>
+      <p class="recovery-hint">Run this command to recover:</p>
+      <pre class="recovery-command mono" data-copy="${esc(recoveryAction)}">${esc(recoveryAction)}</pre>
+    </div>`;
+  }
+
+  if (isCoordinator && activeState.pending_gate) {
+    html += `<div class="section"><h3>Pending Gate</h3>
+      <dl class="detail-list">
+        <dt>Gate</dt><dd class="mono">${esc(activeState.pending_gate.gate || '-')}</dd>
+        <dt>Type</dt><dd>${esc(activeState.pending_gate.gate_type || '-')}</dd>
+      </dl>
+      <pre class="recovery-command mono" data-copy="agentxchain multi approve-gate">agentxchain multi approve-gate</pre>
+    </div>`;
+  }
+
+  if (isCoordinator && activeState.repo_runs && Object.keys(activeState.repo_runs).length > 0) {
+    html += `<div class="section"><h3>Repo Status</h3><div class="annotation-list">`;
+    for (const [repoId, repoRun] of Object.entries(activeState.repo_runs)) {
+      html += `<div class="annotation-card">
+        <span class="mono">${esc(repoId)}</span>
+        <span>${esc(`${repoRun.status || 'unknown'}${repoRun.phase ? ` [${repoRun.phase}]` : ''}`)}</span>
+      </div>`;
+    }
+    html += `</div></div>`;
+  }
+
+  if (relevantAudit.length > 0) {
+    html += `<div class="section"><h3>Recent Audit Context</h3><div class="annotation-list">`;
+    for (const entry of relevantAudit) {
+      const duration = entry.duration_ms != null ? `${entry.duration_ms}ms` : '-';
+      const verdict = entry.verdict || 'unknown';
+      const action = entry.orchestrator_action || entry.action || 'continued';
+      html += `<div class="annotation-card">
+        <span class="mono">${esc(getHookPhase(entry) || '-')}</span>
+        <span class="mono">${esc(getHookName(entry) || '-')}</span>
+        <span>${esc(`${verdict} -> ${action} (${duration})`)}</span>
+      </div>`;
+    }
+    html += `</div></div>`;
+  }
+
+  html += `</div>`;
+  return html;
+}

package/dashboard/components/cross-repo.js

@@ -0,0 +1,126 @@
+function esc(str) {
+  if (!str) return '';
+  return String(str)
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+}
+
+function hashColor(seed) {
+  const palette = ['#38bdf8', '#fb7185', '#34d399', '#f59e0b', '#a78bfa', '#f97316'];
+  let hash = 0;
+  for (const char of String(seed || 'repo')) {
+    hash = ((hash << 5) - hash + char.charCodeAt(0)) | 0;
+  }
+  return palette[Math.abs(hash) % palette.length];
+}
+
+function badge(label, color) {
+  return `<span class="badge" style="color:${color};border-color:${color}">${esc(label)}</span>`;
+}
+
+function describeEvent(entry) {
+  switch (entry?.type) {
+    case 'run_initialized':
+      return {
+        title: 'Coordinator Initialized',
+        detail: `${Object.keys(entry.repo_runs || {}).length} repo runs linked or initialized`,
+      };
+    case 'turn_dispatched':
+      return {
+        title: 'Turn Dispatched',
+        detail: `${entry.role || 'agent'} dispatched to ${entry.repo_id} for ${entry.workstream_id}`,
+      };
+    case 'acceptance_projection':
+      return {
+        title: 'Acceptance Projected',
+        detail: entry.summary || `${entry.repo_id} accepted ${entry.repo_turn_id || 'a turn'}`,
+      };
+    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'}`,
+      };
+    case 'phase_transition_requested':
+      return {
+        title: 'Phase Gate Requested',
+        detail: `${entry.from || 'unknown'} -> ${entry.to || 'unknown'} (${entry.gate || 'gate'})`,
+      };
+    case 'phase_transition_approved':
+      return {
+        title: 'Phase Gate Approved',
+        detail: `${entry.from || 'unknown'} -> ${entry.to || 'unknown'}`,
+      };
+    case 'run_completion_requested':
+      return {
+        title: 'Completion Gate Requested',
+        detail: entry.gate || 'initiative_ship',
+      };
+    case 'run_completed':
+      return {
+        title: 'Initiative Completed',
+        detail: entry.gate || 'completion approved',
+      };
+    case 'state_resynced':
+      return {
+        title: 'Coordinator Resynced',
+        detail: `${(entry.resynced_repos || []).length} repos updated`,
+      };
+    default:
+      return {
+        title: entry?.type || 'Unknown Event',
+        detail: entry?.repo_id || entry?.workstream_id || 'Coordinator history event',
+      };
+  }
+}
+
+export function render({ coordinatorState, coordinatorHistory = [] }) {
+  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>`;
+  }
+
+  const events = Array.isArray(coordinatorHistory) ? [...coordinatorHistory].reverse() : [];
+  if (events.length === 0) {
+    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">`;
+  for (const entry of events) {
+    const event = describeEvent(entry);
+    const repoId = entry.repo_id || entry.target_repo_id || null;
+    const workstreamId = entry.workstream_id || null;
+    const repoColor = hashColor(repoId || workstreamId || entry.type);
+
+    html += `<div class="turn-card">
+      <div class="turn-header">
+        <strong>${esc(event.title)}</strong>`;
+    if (repoId) {
+      html += badge(repoId, repoColor);
+    }
+    if (workstreamId) {
+      html += badge(workstreamId, 'var(--accent)');
+    }
+    if (entry.timestamp) {
+      html += `<span class="turn-status mono">${esc(entry.timestamp)}</span>`;
+    }
+    html += `</div>
+      <div class="turn-summary">${esc(event.detail)}</div>`;
+
+    if (entry.repo_turn_id) {
+      html += `<div class="turn-detail"><span class="detail-label">Repo Turn:</span> <span class="mono">${esc(entry.repo_turn_id)}</span></div>`;
+    }
+    if (entry.context_ref) {
+      html += `<div class="turn-detail"><span class="detail-label">Context Ref:</span> <span class="mono">${esc(entry.context_ref)}</span></div>`;
+    }
+    if (Array.isArray(entry.barrier_changes) && entry.barrier_changes.length > 0) {
+      html += `<div class="turn-detail"><span class="detail-label">Barrier Changes:</span><ul>${entry.barrier_changes.map((change) => (
+        `<li>${esc(`${change.barrier_id}: ${change.previous_status} -> ${change.new_status}`)}</li>`
+      )).join('')}</ul></div>`;
+    }
+    html += `</div>`;
+  }
+  html += `</div></div></div>`;
+  return html;
+}