agentxchain 2.155.73 → 2.156.0

package/bin/agentxchain.js

@@ -87,6 +87,7 @@ import { auditCommand } from '../src/commands/audit.js';
 import { restoreCommand } from '../src/commands/restore.js';
 import { restartCommand } from '../src/commands/restart.js';
 import { reportCommand } from '../src/commands/report.js';
+import { ciReportCommand } from '../src/commands/ci-report.js';
 import {
   pluginInstallCommand,
   pluginListCommand,
@@ -131,6 +132,7 @@ import { chainLatestCommand, chainListCommand, chainShowCommand } from '../src/c
 import { missionAttachChainCommand, missionBindCoordinatorCommand, missionListCommand, missionPlanApproveCommand, missionPlanAutopilotCommand, missionPlanCommand, missionPlanLaunchCommand, missionPlanListCommand, missionPlanShowCommand, missionShowCommand, missionStartCommand } from '../src/commands/mission.js';
 import { workflowKitDescribeCommand } from '../src/commands/workflow-kit.js';
 import { serveMcpCommand } from '../src/commands/serve-mcp.js';
+import { serveCommand } from '../src/commands/serve.js';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const pkg = JSON.parse(readFileSync(join(__dirname, '..', 'package.json'), 'utf8'));
@@ -193,6 +195,13 @@ program
   .option('--format <format>', 'Output format: text, json, markdown, or html', 'text')
   .action(reportCommand);
 
+program
+  .command('ci-report')
+  .description('Report governed run results in CI-native formats (GitHub Actions annotations, JUnit XML)')
+  .option('--input <path>', 'Export artifact path, or use current project if omitted')
+  .option('--format <format>', 'Output format: auto, github-actions, junit-xml, json', 'auto')
+  .action(ciReportCommand);
+
 program
   .command('start')
   .description('Launch legacy v3 agents in your IDE')
@@ -607,6 +616,7 @@ verifyCmd
   .description('Replay a staged turn\'s declared machine-evidence commands and compare exit codes')
   .option('-j, --json', 'Output as JSON')
   .option('--timeout <ms>', 'Per-command replay timeout in milliseconds', '30000')
+  .option('--execute', 'Execute the agent-declared machine-evidence commands (operator opt-in; default is fail-safe — commands are not executed)')
   .action(verifyTurnCommand);
 
 verifyCmd
@@ -643,6 +653,7 @@ replayCmd
   .description('Replay an accepted turn\'s declared machine-evidence commands from history')
   .option('-j, --json', 'Output as JSON')
   .option('--timeout <ms>', 'Per-command replay timeout in milliseconds', '30000')
+  .option('--execute', 'Execute the agent-declared machine-evidence commands (operator opt-in; default is fail-safe — commands are not executed)')
   .action(replayTurnCommand);
 
 replayCmd
@@ -749,6 +760,7 @@ program
   .option('--verbose', 'Stream local_cli subprocess output while the turn is running')
   .option('--stream', 'Stream live subprocess output to terminal (alias for --verbose)')
   .option('--auto-reject', 'Auto-reject and retry on validation failure')
+  .option('--no-checkpoint', 'Skip git checkpoint after acceptance (workspace stays dirty)')
   .action(stepCommand);
 
 program
@@ -803,6 +815,15 @@ program
   .option('--root <path>', 'Project root directory (default: cwd)')
   .action(serveMcpCommand);
 
+program
+  .command('serve')
+  .description('Start hosted runner HTTP server')
+  .option('--port <number>', 'Server port', '4100')
+  .option('--host <address>', 'Bind address', '127.0.0.1')
+  .option('--project <path>', 'Project root')
+  .option('--projects <paths>', 'Additional project roots (comma-separated)')
+  .action(serveCommand);
+
 program
   .command('dashboard')
   .description('Open the live governance dashboard for the current repo/workspace')
@@ -1022,6 +1043,7 @@ intakeCmd
   .option('--intent <id>', 'Intent ID to approve')
   .option('--approver <name>', 'Name of the approving authority', 'operator')
   .option('--reason <text>', 'Reason for approval')
+  .option('--force-scope', 'Bypass scope overlap guard')
   .option('-j, --json', 'Output as JSON')
   .action(intakeApproveCommand);
 

package/dashboard/app.js

@@ -22,6 +22,10 @@ import { render as renderRunHistory } from './components/run-history.js';
 import { render as renderTimeouts } from './components/timeouts.js';
 import { render as renderCoordinatorTimeouts } from './components/coordinator-timeouts.js';
 import { render as renderWatch } from './components/watch.js';
+import { render as renderOrgOverview } from './components/org-overview.js';
+import { render as renderOrgRuns } from './components/org-runs.js';
+import { render as renderOrgHistory } from './components/org-history.js';
+import { render as renderOrgAuditTrail } from './components/org-audit-trail.js';
 import {
   buildLiveMeta,
   createLiveEventFromMessage,
@@ -29,6 +33,10 @@ import {
 } from './live-observer.js';
 
 const VIEWS = {
+  'org-overview': { fetch: ['orgOverview'], render: renderOrgOverview },
+  'org-runs': { fetch: ['orgRuns'], render: renderOrgRuns },
+  'org-history': { fetch: ['orgHistory'], render: renderOrgHistory },
+  'org-audit-trail': { fetch: ['orgAuditTrail'], render: renderOrgAuditTrail },
   timeline: { fetch: ['state', 'continuity', 'history', 'events', 'audit', 'annotations', 'connectors', 'coordinatorAudit', 'coordinatorAnnotations'], render: renderTimeline },
   delegations: { fetch: ['state', 'history'], render: renderDelegations },
   ledger: { fetch: ['state', 'ledger', 'coordinatorState', 'coordinatorLedger', 'repoDecisionsSummary'], render: renderLedger },
@@ -77,9 +85,15 @@ const API_MAP = {
   coordinatorTimeouts: '/api/coordinator/timeouts',
   gateActions: '/api/gate-actions',
   events: '/api/events?type=turn_conflicted&limit=10',
+  orgOverview: '/v1/org/overview',
+  orgRuns: '/v1/org/runs',
+  orgHistory: '/v1/org/history',
+  orgAuditTrail: '/v1/org/audit-trail',
 };
 
 const viewState = {
+  'org-runs': { project: 'all', phase: 'all', status: 'all' },
+  'org-audit-trail': { project: 'all', severity: 'all', source: 'all' },
   ledger: {
     agent: 'all',
     query: '',
@@ -193,6 +207,20 @@ function buildRenderData(viewName, data) {
       liveMeta,
     };
   }
+  if (viewName === 'org-runs') {
+    return {
+      ...data,
+      filter: viewState['org-runs'],
+      liveMeta,
+    };
+  }
+  if (viewName === 'org-audit-trail') {
+    return {
+      ...data,
+      filter: viewState['org-audit-trail'],
+      liveMeta,
+    };
+  }
   return {
     ...data,
     liveMeta,
@@ -455,6 +483,32 @@ document.addEventListener('change', (event) => {
       renderView('hooks', activeViewData);
     }
   }
+
+  if (view === 'org-runs') {
+    if (control === 'org-runs-project') {
+      viewState['org-runs'].project = event.target.value;
+      renderView('org-runs', activeViewData);
+    } else if (control === 'org-runs-phase') {
+      viewState['org-runs'].phase = event.target.value;
+      renderView('org-runs', activeViewData);
+    } else if (control === 'org-runs-status') {
+      viewState['org-runs'].status = event.target.value;
+      renderView('org-runs', activeViewData);
+    }
+  }
+
+  if (view === 'org-audit-trail') {
+    if (control === 'audit-trail-project') {
+      viewState['org-audit-trail'].project = event.target.value;
+      renderView('org-audit-trail', activeViewData);
+    } else if (control === 'audit-trail-severity') {
+      viewState['org-audit-trail'].severity = event.target.value;
+      renderView('org-audit-trail', activeViewData);
+    } else if (control === 'audit-trail-source') {
+      viewState['org-audit-trail'].source = event.target.value;
+      renderView('org-audit-trail', activeViewData);
+    }
+  }
 });
 
 // ── Turn expand toggle ──────────────────────────────────────────────────

package/dashboard/components/org-audit-trail.js

@@ -0,0 +1,161 @@
+/**
+ * Org Audit Trail component — renders unified governance audit trail timeline.
+ *
+ * Pure render function: takes data from /v1/org/audit-trail, returns HTML string.
+ * Follows ledger.js and hooks.js patterns for filter bars and severity badges.
+ */
+
+function esc(str) {
+  if (str == null) 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 severityBadge(severity) {
+  switch (severity) {
+    case 'high': return badge('HIGH', 'var(--red)');
+    case 'medium': return badge('MED', 'var(--yellow)');
+    case 'low': return badge('LOW', 'var(--text-dim)');
+    default: return badge(severity || '?', 'var(--text-dim)');
+  }
+}
+
+function sourceBadge(source) {
+  switch (source) {
+    case 'decision_ledger': return badge('ledger', 'var(--accent)');
+    case 'hook_audit': return badge('hook', '#38bdf8');
+    case 'events': return badge('event', 'var(--text-dim)');
+    default: return badge(source || '?', 'var(--text-dim)');
+  }
+}
+
+function formatTimestamp(iso) {
+  if (!iso) return '—';
+  try {
+    const d = new Date(iso);
+    return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' })
+      + ', ' + d.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' });
+  } catch {
+    return esc(iso);
+  }
+}
+
+function severityBorderColor(severity) {
+  switch (severity) {
+    case 'high': return 'var(--red)';
+    case 'medium': return 'var(--yellow)';
+    default: return 'var(--text-dim)';
+  }
+}
+
+function renderFilterBar(events, filter) {
+  const projectSet = new Set(events.map(e => e.project_name).filter(Boolean));
+  const projectOptions = ['all', ...Array.from(projectSet).sort()];
+  const severityOptions = ['all', 'high', 'medium', 'low'];
+  const sourceOptions = ['all', 'decision_ledger', 'hook_audit', 'events'];
+
+  function options(list, selected) {
+    return list.map(v =>
+      `<option value="${esc(v)}"${v === selected ? ' selected' : ''}>${esc(v)}</option>`
+    ).join('');
+  }
+
+  return `<div class="filter-bar">
+    <label class="filter-control">
+      Project
+      <select data-view-control="audit-trail-project">
+        ${options(projectOptions, filter?.project || 'all')}
+      </select>
+    </label>
+    <label class="filter-control">
+      Severity
+      <select data-view-control="audit-trail-severity">
+        ${options(severityOptions, filter?.severity || 'all')}
+      </select>
+    </label>
+    <label class="filter-control">
+      Source
+      <select data-view-control="audit-trail-source">
+        ${options(sourceOptions, filter?.source || 'all')}
+      </select>
+    </label>
+  </div>`;
+}
+
+function applyFilter(events, filter) {
+  let filtered = events;
+  if (filter?.project && filter.project !== 'all') {
+    filtered = filtered.filter(e => e.project_name === filter.project);
+  }
+  if (filter?.severity && filter.severity !== 'all') {
+    filtered = filtered.filter(e => e.severity === filter.severity);
+  }
+  if (filter?.source && filter.source !== 'all') {
+    filtered = filtered.filter(e => e.source === filter.source);
+  }
+  return filtered;
+}
+
+function renderEventEntry(event) {
+  const borderColor = severityBorderColor(event.severity);
+  const contextParts = [];
+  if (event.phase) contextParts.push(`Phase: ${esc(event.phase)}`);
+  if (event.role) contextParts.push(`Role: ${esc(event.role)}`);
+  if (event.run_id) contextParts.push(`Run: ${esc(event.run_id.length > 16 ? event.run_id.slice(0, 16) + '…' : event.run_id)}`);
+  const contextLine = contextParts.length > 0
+    ? `<div style="font-size:11px;color:var(--text-dim);margin-top:2px">${contextParts.join('  ')}</div>`
+    : '';
+
+  return `<div class="turn-card" style="border-left:3px solid ${borderColor};padding:10px 14px">
+    <div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap">
+      ${severityBadge(event.severity)}
+      ${badge(event.event_type, 'var(--text-dim)')}
+      <span style="font-size:12px;color:var(--accent)">${esc(event.project_name)}</span>
+      <span style="font-size:11px;color:var(--text-dim);margin-left:auto">${formatTimestamp(event.timestamp)}</span>
+    </div>
+    <div style="font-size:13px;color:var(--text);margin-top:4px">${esc(event.summary)}</div>
+    ${contextLine}
+  </div>`;
+}
+
+/**
+ * @param {{ orgAuditTrail: { data: object[], total: number }, liveMeta: object, filter?: object }} data
+ * @returns {string} HTML string
+ */
+export function render(data) {
+  const auditData = data?.orgAuditTrail;
+  const events = auditData?.data || [];
+  const total = auditData?.total ?? events.length;
+  const filter = data?.filter || {};
+
+  if (!events.length && !filter.project && !filter.severity && !filter.source) {
+    return `<div class="placeholder">
+      <h2>Governance Audit Trail</h2>
+      <p>No governance events found across registered projects. Events appear when policy violations, hook blocks, escalations, or gate transitions occur.</p>
+    </div>`;
+  }
+
+  const filtered = applyFilter(events, filter);
+
+  let html = `<div class="section">`;
+  html += `<h3>Governance Audit Trail (${total} events)</h3>`;
+  html += renderFilterBar(events, filter);
+  html += `<div class="turn-list">`;
+  for (const event of filtered) {
+    html += renderEventEntry(event);
+  }
+  if (filtered.length === 0) {
+    html += `<div style="text-align:center;color:var(--text-dim);padding:20px">No events match filters</div>`;
+  }
+  html += `</div>`;
+  html += `</div>`;
+  return html;
+}

package/dashboard/components/org-history.js

@@ -0,0 +1,140 @@
+/**
+ * Org Run History component — renders full-fidelity cross-project run history.
+ *
+ * Pure render function: takes data from /v1/org/history, returns HTML string.
+ * Follows run-history.js patterns for badges, duration, cost formatting.
+ */
+
+function esc(str) {
+  if (str == null) 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 statusBadge(status) {
+  switch (status) {
+    case 'completed': return badge('completed', 'var(--green)');
+    case 'blocked': return badge('blocked', 'var(--yellow)');
+    case 'failed': return badge('failed', 'var(--red)');
+    default: return badge(status || 'unknown', 'var(--text-dim)');
+  }
+}
+
+function formatDuration(ms) {
+  if (ms == null) return '—';
+  if (ms < 1000) return `${ms}ms`;
+  const seconds = Math.floor(ms / 1000);
+  if (seconds < 60) return `${seconds}s`;
+  const minutes = Math.floor(seconds / 60);
+  const remainingSeconds = seconds % 60;
+  if (minutes < 60) return `${minutes}m ${remainingSeconds}s`;
+  const hours = Math.floor(minutes / 60);
+  const remainingMinutes = minutes % 60;
+  return `${hours}h ${remainingMinutes}m`;
+}
+
+function formatCost(usd) {
+  if (usd == null) return '—';
+  return `$${Number(usd).toFixed(2)}`;
+}
+
+function formatDate(iso) {
+  if (!iso) return '—';
+  try {
+    const d = new Date(iso);
+    return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' })
+      + ' ' + d.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' });
+  } catch {
+    return esc(iso);
+  }
+}
+
+function truncateId(id, len = 16) {
+  if (!id) return '—';
+  return id.length > len ? id.slice(0, len) + '…' : id;
+}
+
+function renderGateResults(gateResults) {
+  if (!gateResults || typeof gateResults !== 'object') return '';
+  const entries = Object.entries(gateResults);
+  if (entries.length === 0) return '';
+  return entries.map(([gate, status]) => {
+    const icon = status === 'passed' ? '✓' : 'pending';
+    const color = status === 'passed' ? 'var(--green)' : 'var(--text-dim)';
+    return `<span style="color:${color};margin-right:8px">${esc(gate)} ${icon}</span>`;
+  }).join('');
+}
+
+function renderRunCard(entry) {
+  const phases = Array.isArray(entry.phases_completed) && entry.phases_completed.length > 0
+    ? entry.phases_completed.map(p => esc(p)).join(' → ')
+    : '—';
+
+  const headline = entry.retrospective?.headline
+    ? `<div style="font-style:italic;color:var(--text-dim);margin-top:4px;font-size:12px">"${esc(entry.retrospective.headline)}"</div>`
+    : '';
+
+  const gates = renderGateResults(entry.gate_results);
+  const gatesRow = gates
+    ? `<div style="margin-top:4px;font-size:12px">Gates: ${gates}</div>`
+    : '';
+
+  const borderColor = entry.status === 'blocked' ? 'var(--yellow)' : entry.status === 'completed' ? 'var(--border)' : 'var(--border)';
+
+  return `<div class="turn-card" style="border-left:3px solid ${borderColor}">
+    <div class="turn-header">
+      <span class="mono" style="font-size:12px;color:var(--text-dim)" title="${esc(entry.run_id)}">${esc(truncateId(entry.run_id))}</span>
+      <span style="color:var(--accent);font-size:12px">${esc(entry.project_name)}</span>
+      ${statusBadge(entry.status)}
+      <span style="font-size:12px;color:var(--text-dim)">${formatDuration(entry.duration_ms)}</span>
+      <span style="font-size:12px;color:var(--text-dim)">${formatCost(entry.total_cost_usd)}</span>
+    </div>
+    <div style="font-size:12px;color:var(--text-dim);margin-top:4px">Phases: ${phases}</div>
+    ${headline}
+    ${gatesRow}
+  </div>`;
+}
+
+/**
+ * @param {{ orgHistory: { data: object[], total: number }, liveMeta: object }} data
+ * @returns {string} HTML string
+ */
+export function render(data) {
+  const historyData = data?.orgHistory;
+  const records = historyData?.data || [];
+  const total = historyData?.total ?? records.length;
+
+  if (!records.length) {
+    return `<div class="placeholder">
+      <h2>Org Run History</h2>
+      <p>No cross-project run history available. Complete governed runs to see full-fidelity history.</p>
+    </div>`;
+  }
+
+  const completed = records.filter(r => r.status === 'completed').length;
+  const blocked = records.filter(r => r.status === 'blocked').length;
+
+  let html = `<div class="section">`;
+  html += `<h3>Org Run History</h3>`;
+  html += `<div class="run-header"><div class="run-meta">`;
+  html += `<span class="turn-count">Total: ${total} run${total !== 1 ? 's' : ''}</span>`;
+  if (completed > 0) html += badge(`${completed} completed`, 'var(--green)');
+  if (blocked > 0) html += badge(`${blocked} blocked`, 'var(--yellow)');
+  html += `</div></div>`;
+
+  html += `<div class="turn-list">`;
+  for (const entry of records) {
+    html += renderRunCard(entry);
+  }
+  html += `</div>`;
+  html += `</div>`;
+  return html;
+}

package/dashboard/components/org-overview.js

@@ -0,0 +1,145 @@
+/**
+ * Org Overview component — renders organization-level metrics and project cards.
+ *
+ * Pure render function: takes data, returns HTML string.
+ * Follows the same pattern as timeline.js and run-history.js.
+ */
+
+function esc(str) {
+  if (str == null) 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 statusBadge(status) {
+  switch (status) {
+    case 'active': return badge('active', 'var(--green)');
+    case 'blocked': return badge('blocked', 'var(--yellow)');
+    case 'completed': return badge('completed', 'var(--green)');
+    case 'failed': return badge('failed', 'var(--red)');
+    default: return badge(status || 'none', 'var(--text-dim)');
+  }
+}
+
+function phaseBadge(phase) {
+  switch (phase) {
+    case 'planning': return badge('planning', 'var(--accent)');
+    case 'implementation': return badge('implementation', '#38bdf8');
+    case 'qa': return badge('qa', 'var(--yellow)');
+    default: return badge(phase || 'none', 'var(--text-dim)');
+  }
+}
+
+function formatUsd(amount) {
+  return '$' + (amount || 0).toFixed(2);
+}
+
+function renderMetricCard(value, label) {
+  return `<div class="org-metric-card">
+    <div class="org-metric-value">${esc(String(value))}</div>
+    <div class="org-metric-label">${esc(label)}</div>
+  </div>`;
+}
+
+function renderProjectCard(project) {
+  const s = project.state || {};
+  const hasRun = s.run_id != null;
+  const gateList = (project.pending_gates || []).map(g => esc(g)).join(', ');
+
+  return `<div class="turn-card${s.status === 'active' ? ' active' : ''}">
+    <div class="turn-header">
+      <strong>${esc(project.name)}</strong>
+      ${s.status ? statusBadge(s.status) : ''}
+      ${s.phase ? phaseBadge(s.phase) : ''}
+    </div>
+    ${hasRun
+      ? `<div class="turn-status">
+          <span class="mono">${esc(s.run_id)}</span>
+        </div>
+        <div class="turn-detail">
+          <span class="detail-label">Turns:</span> ${s.active_turns || 0}
+          &nbsp;&middot;&nbsp;
+          <span class="detail-label">Cost:</span> ${formatUsd(s.budget_spent_usd)}
+        </div>`
+      : `<div class="turn-status">No active run</div>`
+    }
+    ${gateList
+      ? `<div class="turn-detail"><span class="detail-label">Pending gates:</span> ${gateList}</div>`
+      : ''
+    }
+    ${project.error
+      ? `<div class="turn-detail risks">${esc(project.error)}</div>`
+      : ''
+    }
+  </div>`;
+}
+
+/**
+ * @param {{ orgOverview: object, liveMeta: object }} data
+ * @returns {string} HTML string
+ */
+export function render(data) {
+  const overview = data?.orgOverview?.data || data?.orgOverview || null;
+
+  if (!overview) {
+    return `<div class="placeholder">
+      <h2>Org Overview</h2>
+      <p>No organization data available. Start the hosted runner with <code>--projects</code> to register multiple projects.</p>
+    </div>`;
+  }
+
+  const projects = overview.projects || [];
+
+  const css = `<style>
+.org-metrics {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  gap: 12px;
+  margin-bottom: 20px;
+}
+.org-metric-card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 16px;
+  text-align: center;
+}
+.org-metric-value { font-size: 24px; font-weight: 700; color: var(--text); }
+.org-metric-label { font-size: 12px; color: var(--text-dim); margin-top: 4px; }
+.org-projects-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 12px;
+}
+</style>`;
+
+  const metricsHtml = `<div class="org-metrics">
+    ${renderMetricCard(overview.total_projects, 'Projects')}
+    ${renderMetricCard(overview.active_runs, 'Active Runs')}
+    ${renderMetricCard(overview.pending_gates, 'Pending Gates')}
+    ${renderMetricCard(overview.total_decisions, 'Total Decisions')}
+    ${renderMetricCard(formatUsd(overview.total_cost_usd), 'Total Cost')}
+  </div>`;
+
+  const projectsHtml = projects.length > 0
+    ? `<div class="org-projects-grid">${projects.map(renderProjectCard).join('')}</div>`
+    : `<div class="placeholder compact"><p>No projects registered.</p></div>`;
+
+  return `${css}
+<div class="section">
+  <h3>Org Overview</h3>
+  ${metricsHtml}
+</div>
+<div class="section">
+  <h3>Projects (${projects.length})</h3>
+  ${projectsHtml}
+</div>`;
+}