npm - opencastle - Versions diffs - 0.3.2 → 0.4.1 - Mend

opencastle 0.3.2 → 0.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (44) hide show

package/bin/cli.mjs +0 -0
package/dist/cli/dashboard.d.ts.map +1 -1
package/dist/cli/dashboard.js +3 -2
package/dist/cli/dashboard.js.map +1 -1
package/dist/cli/init.d.ts.map +1 -1
package/dist/cli/init.js +6 -2
package/dist/cli/init.js.map +1 -1
package/dist/cli/mcp.d.ts.map +1 -1
package/dist/cli/mcp.js +21 -0
package/dist/cli/mcp.js.map +1 -1
package/package.json +13 -6
package/src/cli/dashboard.ts +3 -2
package/src/cli/init.ts +7 -2
package/src/cli/mcp.ts +30 -1
package/src/dashboard/dist/_astro/index.CWVzbF4T.css +1 -0
package/src/dashboard/dist/icon-192.png +0 -0
package/src/dashboard/dist/index.html +992 -0
package/src/dashboard/node_modules/.vite/deps/_metadata.json +31 -0
package/src/dashboard/node_modules/.vite/deps/astro___aria-query.js +6776 -0
package/src/dashboard/node_modules/.vite/deps/astro___aria-query.js.map +7 -0
package/src/dashboard/node_modules/.vite/deps/astro___axobject-query.js +3754 -0
package/src/dashboard/node_modules/.vite/deps/astro___axobject-query.js.map +7 -0
package/src/dashboard/node_modules/.vite/deps/astro___cssesc.js +99 -0
package/src/dashboard/node_modules/.vite/deps/astro___cssesc.js.map +7 -0
package/src/dashboard/node_modules/.vite/deps/chunk-BUSYA2B4.js +8 -0
package/src/dashboard/node_modules/.vite/deps/chunk-BUSYA2B4.js.map +7 -0
package/src/dashboard/node_modules/.vite/deps/package.json +3 -0
package/src/dashboard/src/env.d.ts +1 -0
package/src/dashboard/src/pages/index.astro +163 -59
package/src/dashboard/src/styles/dashboard.css +261 -0
package/src/dashboard/tsconfig.json +1 -1
package/src/orchestrator/agents/release-manager.agent.md +1 -1
package/src/orchestrator/agents/team-lead.agent.md +13 -1
package/src/orchestrator/customizations/stack/notifications-config.md +57 -0
package/src/orchestrator/instructions/general.instructions.md +31 -2
package/src/orchestrator/mcp.json +12 -6
package/src/orchestrator/skills/agent-hooks/SKILL.md +13 -7
package/src/orchestrator/skills/session-checkpoints/SKILL.md +12 -0
package/src/orchestrator/skills/slack-notifications/SKILL.md +139 -39
package/src/dashboard/package-lock.json +0 -5455
package/src/dashboard/package.json +0 -14
/package/src/dashboard/{public/data → seed-data}/delegations.ndjson +0 -0
/package/src/dashboard/{public/data → seed-data}/panels.ndjson +0 -0
/package/src/dashboard/{public/data → seed-data}/sessions.ndjson +0 -0

package/src/dashboard/dist/index.html ADDED Viewed

@@ -0,0 +1,992 @@
+<!DOCTYPE html><html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Observability Dashboard — OpenCastle</title><meta name="description" content="Real-time observability for OpenCastle multi-agent orchestration — sessions, delegations, model tiers, and quality gates."><meta name="theme-color" content="#0a0a0f"><link rel="icon" type="image/png" sizes="192x192" href="/icon-192.png"><link rel="stylesheet" href="/_astro/index.CWVzbF4T.css"></head> <body>   <header class="dash-header"> <div class="dash-header__inner"> <div class="dash-header__brand"> <img class="dash-header__icon" src="/icon-192.png" alt="OpenCastle" width="32" height="32"> <h1 class="dash-header__title">Observability Dashboard</h1> </div> </div> </header> <div class="dash-layout"> <!-- Sidebar Navigation --> <nav class="dash-sidebar" id="dash-sidebar"> <ul class="dash-sidebar__list"> <li><a class="dash-sidebar__link dash-sidebar__link--active" href="#kpi-row" data-section="kpi-row">Overview</a></li> <li><a class="dash-sidebar__link" href="#pipeline-section" data-section="pipeline-section">Pipeline</a></li> <li><a class="dash-sidebar__link" href="#agent-section" data-section="agent-section">Agents</a></li> <li><a class="dash-sidebar__link" href="#tier-section" data-section="tier-section">Tiers</a></li> <li><a class="dash-sidebar__link" href="#delegation-section" data-section="delegation-section">Delegations</a></li> <li><a class="dash-sidebar__link" href="#timeline-section" data-section="timeline-section">Timeline</a></li> <li><a class="dash-sidebar__link" href="#model-section" data-section="model-section">Models</a></li> <li><a class="dash-sidebar__link" href="#execution-section" data-section="execution-section">Exec Log</a></li> <li><a class="dash-sidebar__link" href="#panel-section" data-section="panel-section">Panels</a></li> <li><a class="dash-sidebar__link" href="#sessions-section" data-section="sessions-section">Sessions</a></li> </ul> </nav> <main class="dash-main"> <!-- KPI Row --> <section class="kpi-row" id="kpi-row" data-nav-section> <div class="kpi-card" id="kpi-sessions"> <span class="kpi-card__label">Total Sessions</span> <span class="kpi-card__value">&mdash;</span> <span class="kpi-card__sub"></span> </div> <div class="kpi-card" id="kpi-success"> <span class="kpi-card__label">Success Rate</span> <span class="kpi-card__value">&mdash;</span> <span class="kpi-card__sub"></span> </div> <div class="kpi-card" id="kpi-delegations"> <span class="kpi-card__label">Total Delegations</span> <span class="kpi-card__value">&mdash;</span> <span class="kpi-card__sub"></span> </div> <div class="kpi-card" id="kpi-duration"> <span class="kpi-card__label">Avg Duration</span> <span class="kpi-card__value">&mdash;</span> <span class="kpi-card__sub"></span> </div> <div class="kpi-card" id="kpi-retries"> <span class="kpi-card__label">Total Retries</span> <span class="kpi-card__value">&mdash;</span> <span class="kpi-card__sub"></span> </div> <div class="kpi-card" id="kpi-lessons"> <span class="kpi-card__label">Lessons Added</span> <span class="kpi-card__value">&mdash;</span> <span class="kpi-card__sub"></span> </div> </section> <!-- Pipeline View (Steroids-inspired) --> <section class="chart-card" id="pipeline-section" data-nav-section> <div class="chart-card__header"> <h2 class="chart-card__title">Task Pipeline</h2> <p class="chart-card__desc">Delegation flow across execution phases</p> </div> <div class="chart-card__body" id="pipeline-view"> <div class="loading-skeleton"></div> </div> </section> <!-- Charts Row 1 --> <div class="charts-row" id="agent-section" data-nav-section> <section class="chart-card"> <div class="chart-card__header"> <h2 class="chart-card__title">Sessions by Agent</h2> <p class="chart-card__desc">Stacked by outcome</p> </div> <div class="chart-card__body" id="agent-chart"> <div class="loading-skeleton"></div> </div> </section> <section class="chart-card" id="tier-section" data-nav-section> <div class="chart-card__header"> <h2 class="chart-card__title">Tier Distribution</h2> <p class="chart-card__desc">Delegation model tiers</p> </div> <div class="chart-card__body" id="tier-chart"> <div class="loading-skeleton"></div> </div> </section> </div> <!-- Charts Row: Delegation Insights --> <div class="charts-row" id="delegation-section" data-nav-section> <section class="chart-card"> <div class="chart-card__header"> <h2 class="chart-card__title">Delegation Mechanism</h2> <p class="chart-card__desc">Sub-agent vs background split</p> </div> <div class="chart-card__body" id="mechanism-chart"> <div class="loading-skeleton"></div> </div> </section> <section class="chart-card"> <div class="chart-card__header"> <h2 class="chart-card__title">Delegation Outcomes</h2> <p class="chart-card__desc">Success rate by delegation</p> </div> <div class="chart-card__body" id="delegation-outcome-chart"> <div class="loading-skeleton"></div> </div> </section> </div> <!-- Charts Row 2 --> <div class="charts-row" id="timeline-section" data-nav-section> <section class="chart-card"> <div class="chart-card__header"> <h2 class="chart-card__title">Timeline</h2> <p class="chart-card__desc">Sessions and delegations over time</p> </div> <div class="chart-card__body" id="timeline-chart"> <div class="loading-skeleton"></div> </div> </section> <section class="chart-card" id="model-section" data-nav-section> <div class="chart-card__header"> <h2 class="chart-card__title">Model Usage</h2> <p class="chart-card__desc">Sessions by model</p> </div> <div class="chart-card__body" id="model-chart"> <div class="loading-skeleton"></div> </div> </section> </div> <!-- Execution Log (Duvo-inspired) --> <section class="chart-card" id="execution-section" data-nav-section> <div class="chart-card__header"> <h2 class="chart-card__title">Execution Log</h2> <p class="chart-card__desc">Recent agent activity, step by step</p> </div> <div class="chart-card__body" id="execution-log"> <div class="loading-skeleton"></div> </div> </section> <!-- Panel Results --> <section class="chart-card" id="panel-section" data-nav-section> <div class="chart-card__header"> <h2 class="chart-card__title">Panel Reviews</h2> <p class="chart-card__desc">Quality gate verdicts and fix items</p> </div> <div class="chart-card__body" id="panel-chart"> <div class="loading-skeleton"></div> </div> </section> <!-- Sessions Table --> <section class="chart-card" id="sessions-section" data-nav-section> <div class="chart-card__header"> <h2 class="chart-card__title">Recent Sessions</h2> <p class="chart-card__desc">Last 15 sessions by timestamp</p> </div> <div class="chart-card__body chart-card__body--table" id="sessions-table"> <div class="loading-skeleton"></div> </div> </section> </main> </div>  </body></html> <script>(function(){const base = "/";
+  // ── Data Loading ──────────────────────────────────────────
+  async function loadNdjson(path) {
+    try {
+      const res = await fetch(path);
+      if (!res.ok) return [];
+      const text = await res.text();
+      return text
+        .trim()
+        .split('\n')
+        .filter(Boolean)
+        .map((line) => JSON.parse(line));
+    } catch {
+      return [];
+    }
+  }
+  // ── Helpers ───────────────────────────────────────────────
+  const TIER_COLORS = {
+    premium: '#f59e0b',
+    standard: '#a78bfa',
+    utility: '#3b82f6',
+    economy: '#64748b',
+  };
+  const MODEL_COLORS = {
+    'claude-opus-4-6': '#a78bfa',
+    'gpt-5-mini': '#64748b',
+    'gpt-5.3-codex': '#3b82f6',
+    'gemini-3.1-pro': '#f59e0b',
+  };
+  const OUTCOME_ICONS = {
+    success: '\u2713',
+    partial: '\u25CB',
+    failed: '\u2717',
+  };
+  function formatTime(ts) {
+    const d = new Date(ts);
+    return d.toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+    });
+  }
+  function formatShortDate(dateKey) {
+    const d = new Date(dateKey + 'T00:00:00Z');
+    return d.toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      timeZone: 'UTC',
+    });
+  }
+  function escapeHtml(str) {
+    const div = document.createElement('div');
+    div.textContent = str;
+    return div.innerHTML;
+  }
+  // ── SVG Icon Library (empty states) ────────────────────
+  const EMPTY_ICONS = {
+    welcome: '<svg width="48" height="48" viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M24 4L6 14v20l18 10 18-10V14L24 4z" opacity="0.3"/><path d="M24 4L6 14v20l18 10 18-10V14L24 4z"/><path d="M24 24v20"/><path d="M6 14l18 10 18-10"/><rect x="18" y="18" width="12" height="14" rx="1" opacity="0.5"/><path d="M21 32v-6h6v6"/></svg>',
+    agents: '<svg width="40" height="40" viewBox="0 0 40 40" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="20" cy="14" r="6"/><path d="M8 34c0-6.627 5.373-12 12-12s12 5.373 12 12"/><circle cx="32" cy="12" r="4" opacity="0.4"/><path d="M36 26c0-3.5-2-6-4-7" opacity="0.4"/></svg>',
+    tiers: '<svg width="40" height="40" viewBox="0 0 40 40" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><ellipse cx="20" cy="10" rx="14" ry="5"/><path d="M6 10v8c0 2.761 6.268 5 14 5s14-2.239 14-5v-8"/><path d="M6 18v8c0 2.761 6.268 5 14 5s14-2.239 14-5v-8" opacity="0.5"/></svg>',
+    mechanism: '<svg width="40" height="40" viewBox="0 0 40 40" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="20" cy="20" r="6"/><path d="M20 6v6M20 28v6M6 20h6M28 20h6"/><path d="M10.1 10.1l4.2 4.2M25.7 25.7l4.2 4.2M10.1 29.9l4.2-4.2M25.7 14.3l4.2-4.2" opacity="0.5"/></svg>',
+    outcomes: '<svg width="40" height="40" viewBox="0 0 40 40" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="6" y="6" width="28" height="28" rx="4"/><polyline points="12 22 18 28 28 14" opacity="0.5"/><line x1="12" y1="16" x2="18" y2="16" opacity="0.3"/><line x1="12" y1="12" x2="24" y2="12" opacity="0.3"/></svg>',
+    timeline: '<svg width="40" height="40" viewBox="0 0 40 40" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="6" y="8" width="28" height="26" rx="3"/><line x1="6" y1="16" x2="34" y2="16"/><line x1="14" y1="8" x2="14" y2="12"/><line x1="26" y1="8" x2="26" y2="12"/><circle cx="14" cy="24" r="2" opacity="0.4"/><circle cx="20" cy="28" r="2" opacity="0.4"/><circle cx="26" cy="22" r="2" opacity="0.4"/></svg>',
+    models: '<svg width="40" height="40" viewBox="0 0 40 40" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="8" y="8" width="24" height="24" rx="4"/><circle cx="20" cy="20" r="4"/><path d="M20 12v4M20 24v4M12 20h4M24 20h4" opacity="0.5"/><circle cx="14" cy="14" r="1.5" opacity="0.3"/><circle cx="26" cy="14" r="1.5" opacity="0.3"/><circle cx="14" cy="26" r="1.5" opacity="0.3"/><circle cx="26" cy="26" r="1.5" opacity="0.3"/></svg>',
+    execLog: '<svg width="40" height="40" viewBox="0 0 40 40" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M14 8h18a2 2 0 0 1 2 2v20a2 2 0 0 1-2 2H14"/><circle cx="10" cy="14" r="3"/><circle cx="10" cy="24" r="3" opacity="0.4"/><line x1="10" y1="17" x2="10" y2="21" opacity="0.3"/><line x1="18" y1="14" x2="28" y2="14" opacity="0.5"/><line x1="18" y1="24" x2="26" y2="24" opacity="0.3"/><line x1="18" y1="19" x2="24" y2="19" opacity="0.2"/></svg>',
+    panels: '<svg width="40" height="40" viewBox="0 0 40 40" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6l2 4h4l-3 3 1 5-4-2.5L16 18l1-5-3-3h4l2-4z"/><rect x="8" y="22" width="24" height="12" rx="3" opacity="0.4"/><line x1="14" y1="28" x2="26" y2="28" opacity="0.3"/><line x1="14" y1="31" x2="22" y2="31" opacity="0.2"/></svg>',
+    sessions: '<svg width="40" height="40" viewBox="0 0 40 40" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="6" y="6" width="28" height="28" rx="3"/><line x1="6" y1="14" x2="34" y2="14"/><line x1="14" y1="6" x2="14" y2="34" opacity="0.3"/><line x1="6" y1="22" x2="34" y2="22" opacity="0.2"/><line x1="6" y1="30" x2="34" y2="30" opacity="0.2"/></svg>',
+    pipeline: '<svg width="40" height="40" viewBox="0 0 40 40" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="14" width="8" height="12" rx="2" opacity="0.3"/><rect x="16" y="14" width="8" height="12" rx="2" opacity="0.3"/><rect x="28" y="14" width="8" height="12" rx="2" opacity="0.3"/><path d="M12 20h4M24 20h4" opacity="0.4"/></svg>',
+  };
+  function emptyStateHtml(iconKey, title, description) {
+    return '<div class="empty-state empty-state--enhanced">' +
+      '<div class="empty-state__icon-wrap">' + EMPTY_ICONS[iconKey] + '</div>' +
+      '<p class="empty-state__title">' + title + '</p>' +
+      '<p class="empty-state__desc">' + description + '</p>' +
+      '</div>';
+  }
+  // ── Welcome Banner (all data empty) ────────────────────
+  function renderWelcomeBanner() {
+    const existing = document.getElementById('welcome-banner');
+    if (existing) existing.remove();
+    const banner = document.createElement('section');
+    banner.id = 'welcome-banner';
+    banner.className = 'welcome-banner';
+    banner.innerHTML =
+      '<div class="welcome-banner__glow"></div>' +
+      '<div class="welcome-banner__content">' +
+        '<div class="welcome-banner__icon">' + EMPTY_ICONS.welcome + '</div>' +
+        '<h2 class="welcome-banner__title">Welcome to your Observability Dashboard</h2>' +
+        '<p class="welcome-banner__subtitle">Agent sessions, delegations, and quality reviews will appear here as your team completes work.</p>' +
+        '<div class="welcome-banner__steps">' +
+          '<div class="welcome-step">' +
+            '<span class="welcome-step__num">1</span>' +
+            '<div class="welcome-step__text">' +
+              '<strong>Configure agents</strong>' +
+              '<span>Set up your orchestrator and specialist agents</span>' +
+            '</div>' +
+          '</div>' +
+          '<div class="welcome-step">' +
+            '<span class="welcome-step__num">2</span>' +
+            '<div class="welcome-step__text">' +
+              '<strong>Run a session</strong>' +
+              '<span>Delegate tasks — session logs are captured automatically</span>' +
+            '</div>' +
+          '</div>' +
+          '<div class="welcome-step">' +
+            '<span class="welcome-step__num">3</span>' +
+            '<div class="welcome-step__text">' +
+              '<strong>Watch insights flow in</strong>' +
+              '<span>Charts, metrics, and trends populate in real time</span>' +
+            '</div>' +
+          '</div>' +
+        '</div>' +
+      '</div>';
+    const main = document.querySelector('.dash-main');
+    if (main) main.prepend(banner);
+  }
+  function removeWelcomeBanner() {
+    const existing = document.getElementById('welcome-banner');
+    if (existing) existing.remove();
+  }
+  // ── KPI Rendering ────────────────────────────────────────
+  function renderKpis(sessions, delegations) {
+    const total = sessions.length;
+    const isEmpty = total === 0;
+    const successCount = sessions.filter((s) => s.outcome === 'success').length;
+    const rate = total > 0 ? Math.round((successCount / total) * 100) : 0;
+    const durSessions = sessions.filter((s) => s.duration_min != null);
+    const avgDur =
+      durSessions.length > 0
+        ? Math.round(
+            durSessions.reduce((sum, s) => sum + (s.duration_min || 0), 0) /
+              durSessions.length
+          )
+        : 0;
+    const uniqueAgents = new Set(delegations.map((d) => d.agent)).size;
+    // Toggle ghost class on KPI row
+    const kpiRow = document.querySelector('.kpi-row');
+    if (kpiRow) kpiRow.classList.toggle('kpi-row--empty', isEmpty);
+    const kpiSessions = document.getElementById('kpi-sessions');
+    const kpiSuccess = document.getElementById('kpi-success');
+    const kpiDelegations = document.getElementById('kpi-delegations');
+    const kpiDuration = document.getElementById('kpi-duration');
+    if (kpiSessions) {
+      kpiSessions.querySelector('.kpi-card__value').textContent = isEmpty ? '0' : total;
+      kpiSessions.querySelector('.kpi-card__sub').innerHTML = isEmpty
+        ? '<span class="kpi-card__hint">No sessions yet</span>'
+        : '<span class="kpi-trend kpi-trend--up">\u2191</span> ' + successCount + ' successful';
+    }
+    if (kpiSuccess) {
+      if (isEmpty) {
+        kpiSuccess.querySelector('.kpi-card__value').textContent = '\u2014';
+        kpiSuccess.querySelector('.kpi-card__sub').innerHTML =
+          '<span class="kpi-card__hint">No sessions yet</span>';
+      } else {
+        const trendClass =
+          rate >= 80 ? 'up' : rate >= 60 ? 'neutral' : 'down';
+        kpiSuccess.querySelector('.kpi-card__value').textContent = rate + '%';
+        kpiSuccess.querySelector('.kpi-card__sub').innerHTML =
+          '<span class="kpi-trend kpi-trend--' +
+          trendClass +
+          '">' +
+          (trendClass === 'up' ? '\u2191' : trendClass === 'down' ? '\u2193' : '\u2192') +
+          '</span> across all sessions';
+      }
+    }
+    if (kpiDelegations) {
+      kpiDelegations.querySelector('.kpi-card__value').textContent =
+        delegations.length === 0 ? '0' : delegations.length;
+      kpiDelegations.querySelector('.kpi-card__sub').innerHTML = isEmpty
+        ? '<span class="kpi-card__hint">No delegations yet</span>'
+        : uniqueAgents + ' unique agents';
+    }
+    if (kpiDuration) {
+      kpiDuration.querySelector('.kpi-card__value').textContent = isEmpty ? '\u2014' : avgDur + 'm';
+      kpiDuration.querySelector('.kpi-card__sub').innerHTML = isEmpty
+        ? '<span class="kpi-card__hint">No duration yet</span>'
+        : '<span class="kpi-trend kpi-trend--neutral">\u2192</span> per session';
+    }
+    // Retries KPI
+    const totalRetries = sessions.reduce((sum, s) => sum + (s.retries || 0), 0);
+    const kpiRetries = document.getElementById('kpi-retries');
+    if (kpiRetries) {
+      kpiRetries.querySelector('.kpi-card__value').textContent = isEmpty ? '0' : totalRetries;
+      const retriedSessions = sessions.filter((s) => (s.retries || 0) > 0).length;
+      kpiRetries.querySelector('.kpi-card__sub').innerHTML = isEmpty
+        ? '<span class="kpi-card__hint">No retries yet</span>'
+        : retriedSessions + ' sessions with retries';
+    }
+    // Lessons KPI
+    const totalLessons = sessions.reduce(
+      (sum, s) => sum + (s.lessons_added ? s.lessons_added.length : 0),
+      0
+    );
+    const kpiLessons = document.getElementById('kpi-lessons');
+    if (kpiLessons) {
+      kpiLessons.querySelector('.kpi-card__value').textContent = isEmpty ? '0' : totalLessons;
+      const discoveryCount = sessions.reduce(
+        (sum, s) => sum + (s.discoveries ? s.discoveries.length : 0),
+        0
+      );
+      kpiLessons.querySelector('.kpi-card__sub').innerHTML = isEmpty
+        ? '<span class="kpi-card__hint">No lessons yet</span>'
+        : discoveryCount + ' issues discovered';
+    }
+  }
+  // ── Pipeline View ─────────────────────────────────────────
+  function renderPipeline(delegations) {
+    const el = document.getElementById('pipeline-view');
+    if (!el) return;
+    if (delegations.length === 0) {
+      el.innerHTML = emptyStateHtml('pipeline', 'No pipeline activity yet', 'Delegation phases appear here as tasks flow through Foundation, Integration, Validation, and QA stages.');
+      return;
+    }
+    const phases = { 1: 0, 2: 0, 3: 0, 4: 0 };
+    delegations.forEach((d) => {
+      const p = d.phase || 1;
+      if (phases[p] !== undefined) phases[p]++;
+    });
+    const stageConfig = [
+      {
+        label: 'Foundation',
+        phase: 1,
+        iconClass: 'pending',
+        icon: '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="16" height="16" rx="2"/><line x1="8" y1="10" x2="16" y2="10"/><line x1="8" y1="14" x2="13" y2="14"/></svg>',
+      },
+      {
+        label: 'Integration',
+        phase: 2,
+        iconClass: 'active',
+        icon: '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>',
+      },
+      {
+        label: 'Validation',
+        phase: 3,
+        iconClass: 'review',
+        icon: '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>',
+      },
+      {
+        label: 'QA Gate',
+        phase: 4,
+        iconClass: 'done',
+        icon: '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>',
+      },
+    ];
+    el.innerHTML =
+      '<div class="pipeline">' +
+      stageConfig
+        .map(
+          (stage, i) =>
+            (i > 0 ? '<div class="pipeline-arrow">\u2192</div>' : '') +
+            '<div class="pipeline-stage">' +
+            '<div class="pipeline-stage__icon pipeline-stage__icon--' +
+            stage.iconClass +
+            '">' +
+            stage.icon +
+            '</div>' +
+            '<span class="pipeline-stage__count">' +
+            (phases[stage.phase] || 0) +
+            '</span>' +
+            '<span class="pipeline-stage__label">' +
+            stage.label +
+            '</span>' +
+            '</div>'
+        )
+        .join('') +
+      '</div>';
+  }
+  // ── Agent Chart ───────────────────────────────────────────
+  function renderAgentChart(sessions) {
+    const el = document.getElementById('agent-chart');
+    if (!el) return;
+    if (sessions.length === 0) {
+      el.innerHTML = emptyStateHtml('agents', 'No agent sessions yet', 'A breakdown of sessions per agent will appear here — stacked by outcome (success, partial, failed).');
+      return;
+    }
+    const agentMap = {};
+    sessions.forEach((s) => {
+      if (!agentMap[s.agent])
+        agentMap[s.agent] = { success: 0, partial: 0, failed: 0, total: 0 };
+      agentMap[s.agent][s.outcome] = (agentMap[s.agent][s.outcome] || 0) + 1;
+      agentMap[s.agent].total++;
+    });
+    const agents = Object.entries(agentMap).sort(
+      (a, b) => b[1].total - a[1].total
+    );
+    const maxTotal = Math.max(...agents.map(([, d]) => d.total));
+    el.innerHTML = agents
+      .map(
+        ([name, data]) =>
+          '<div class="bar-row">' +
+          '<span class="bar-label">' +
+          escapeHtml(name) +
+          '</span>' +
+          '<div class="bar-track">' +
+          (data.success > 0
+            ? '<div class="bar-segment bar--success" style="width: ' +
+              ((data.success / maxTotal) * 100).toFixed(1) + '%"></div>'
+            : '') +
+          (data.partial > 0
+            ? '<div class="bar-segment bar--partial" style="width: ' +
+              ((data.partial / maxTotal) * 100).toFixed(1) + '%"></div>'
+            : '') +
+          (data.failed > 0
+            ? '<div class="bar-segment bar--failed" style="width: ' +
+              ((data.failed / maxTotal) * 100).toFixed(1) + '%"></div>'
+            : '') +
+          '</div>' +
+          '<span class="bar-value">' +
+          data.total +
+          '</span>' +
+          '</div>'
+      )
+      .join('');
+  }
+  // ── Tier Donut Chart ──────────────────────────────────────
+  function renderTierChart(delegations) {
+    const el = document.getElementById('tier-chart');
+    if (!el) return;
+    if (delegations.length === 0) {
+      el.innerHTML = emptyStateHtml('tiers', 'No tier data yet', 'Model tier distribution (Premium, Standard, Utility, Economy) will be visualized as a donut chart.');
+      return;
+    }
+    const tierCounts = {};
+    delegations.forEach((d) => {
+      tierCounts[d.tier] = (tierCounts[d.tier] || 0) + 1;
+    });
+    const order = ['premium', 'standard', 'utility', 'economy'];
+    const tiers = order
+      .filter((t) => tierCounts[t])
+      .map((t) => ({ name: t, count: tierCounts[t] }));
+    const total = delegations.length;
+    const r = 70;
+    const circumference = 2 * Math.PI * r;
+    let cumOffset = 0;
+    const circles = tiers.map((t) => {
+      const pct = t.count / total;
+      const dashLen = pct * circumference;
+      // Skip round linecap for single-segment donuts to avoid overlap artifact
+      const linecap = tiers.length === 1 ? 'butt' : 'round';
+      const segment =
+        '<circle cx="90" cy="90" r="' +
+        r +
+        '" fill="none" ' +
+        'stroke="' +
+        (TIER_COLORS[t.name] || '#64748b') +
+        '" stroke-width="18" ' +
+        'stroke-dasharray="' +
+        dashLen.toFixed(2) +
+        ' ' +
+        (circumference - dashLen).toFixed(2) +
+        '" ' +
+        'stroke-dashoffset="' +
+        (-cumOffset).toFixed(2) +
+        '" ' +
+        'transform="rotate(-90 90 90)" ' +
+        'stroke-linecap="' + linecap + '"/>';
+      cumOffset += dashLen;
+      return segment;
+    });
+    const legend = tiers
+      .map(
+        (t) =>
+          '<div class="legend-item">' +
+          '<span class="legend-dot" style="background: ' +
+          (TIER_COLORS[t.name] || '#64748b') +
+          '"></span>' +
+          '<span class="legend-name">' +
+          t.name +
+          '</span>' +
+          '<span class="legend-count">' +
+          t.count +
+          ' (' +
+          Math.round((t.count / total) * 100) +
+          '%)</span>' +
+          '</div>'
+      )
+      .join('');
+    el.innerHTML =
+      '<div class="donut-container">' +
+      '<div class="donut-wrap">' +
+      '<svg viewBox="0 0 180 180" class="donut-svg">' +
+      circles.join('') +
+      '</svg>' +
+      '<div class="donut-center">' +
+      '<span class="donut-total">' +
+      total +
+      '</span>' +
+      '<span class="donut-total-label">total</span>' +
+      '</div>' +
+      '</div>' +
+      '<div class="donut-legend">' +
+      legend +
+      '</div>' +
+      '</div>';
+  }
+  // ── Mechanism Donut Chart ─────────────────────────────────
+  function renderMechanismChart(delegations) {
+    const el = document.getElementById('mechanism-chart');
+    if (!el) return;
+    if (delegations.length === 0) {
+      el.innerHTML = emptyStateHtml('mechanism', 'No delegation data yet', 'The split between sub-agent (inline) and background (worktree) delegations will be shown here.');
+      return;
+    }
+    const mechCounts = {};
+    delegations.forEach((d) => {
+      const mech = d.mechanism || 'unknown';
+      mechCounts[mech] = (mechCounts[mech] || 0) + 1;
+    });
+    var MECH_COLORS = {
+      'sub-agent': '#3b82f6',
+      'background': '#a78bfa',
+      'unknown': '#64748b',
+    };
+    var MECH_LABELS = {
+      'sub-agent': 'Sub-agent (inline)',
+      'background': 'Background (worktree)',
+      'unknown': 'Unknown',
+    };
+    var mechOrder = ['sub-agent', 'background', 'unknown'];
+    var mechs = mechOrder
+      .filter(function (m) { return mechCounts[m]; })
+      .map(function (m) { return { name: m, count: mechCounts[m] }; });
+    var total = delegations.length;
+    var r = 70;
+    var circumference = 2 * Math.PI * r;
+    var cumOffset = 0;
+    var circles = mechs.map(function (m) {
+      var pct = m.count / total;
+      var dashLen = pct * circumference;
+      // Skip round linecap for single-segment donuts to avoid overlap artifact
+      var linecap = mechs.length === 1 ? 'butt' : 'round';
+      var segment =
+        '<circle cx="90" cy="90" r="' + r + '" fill="none" ' +
+        'stroke="' + (MECH_COLORS[m.name] || '#64748b') + '" stroke-width="18" ' +
+        'stroke-dasharray="' + dashLen.toFixed(2) + ' ' + (circumference - dashLen).toFixed(2) + '" ' +
+        'stroke-dashoffset="' + (-cumOffset).toFixed(2) + '" ' +
+        'transform="rotate(-90 90 90)" stroke-linecap="' + linecap + '"/>';
+      cumOffset += dashLen;
+      return segment;
+    });
+    var legend = mechs
+      .map(function (m) {
+        return '<div class="legend-item">' +
+          '<span class="legend-dot" style="background: ' + (MECH_COLORS[m.name] || '#64748b') + '"></span>' +
+          '<span class="legend-name">' + (MECH_LABELS[m.name] || m.name) + '</span>' +
+          '<span class="legend-count">' + m.count + ' (' + Math.round((m.count / total) * 100) + '%)</span>' +
+          '</div>';
+      })
+      .join('');
+    el.innerHTML =
+      '<div class="donut-container">' +
+      '<div class="donut-wrap">' +
+      '<svg viewBox="0 0 180 180" class="donut-svg">' +
+      circles.join('') +
+      '</svg>' +
+      '<div class="donut-center">' +
+      '<span class="donut-total">' + total + '</span>' +
+      '<span class="donut-total-label">total</span>' +
+      '</div>' +
+      '</div>' +
+      '<div class="donut-legend">' +
+      legend +
+      '</div>' +
+      '</div>';
+  }
+  // ── Delegation Outcome Chart ──────────────────────────────
+  function renderDelegationOutcomeChart(delegations) {
+    var el = document.getElementById('delegation-outcome-chart');
+    if (!el) return;
+    if (delegations.length === 0) {
+      el.innerHTML = emptyStateHtml('outcomes', 'No outcome data yet', 'Delegation results — success, partial, failed, redirected — will be tracked and compared here.');
+      return;
+    }
+    var OUTCOME_COLORS = {
+      success: '#22c55e',
+      partial: '#f59e0b',
+      failed: '#ef4444',
+      redirected: '#64748b',
+    };
+    var outcomeCounts = {};
+    delegations.forEach(function (d) {
+      var outcome = d.outcome || 'unknown';
+      outcomeCounts[outcome] = (outcomeCounts[outcome] || 0) + 1;
+    });
+    var outcomes = Object.entries(outcomeCounts).sort(function (a, b) { return b[1] - a[1]; });
+    var maxCount = Math.max.apply(null, outcomes.map(function (o) { return o[1]; }));
+    el.innerHTML = outcomes
+      .map(function (entry) {
+        var name = entry[0];
+        var count = entry[1];
+        return '<div class="bar-row">' +
+          '<span class="bar-label">' + escapeHtml(name) + '</span>' +
+          '<div class="bar-track">' +
+          '<div class="bar-segment" style="width: ' + ((count / maxCount) * 100).toFixed(1) + '%; background: ' + (OUTCOME_COLORS[name] || '#64748b') + '"></div>' +
+          '</div>' +
+          '<span class="bar-value">' + count + '</span>' +
+          '</div>';
+      })
+      .join('');
+  }
+  // ── Timeline Chart ────────────────────────────────────────
+  function renderTimelineChart(sessions, delegations) {
+    const el = document.getElementById('timeline-chart');
+    if (!el) return;
+    const dateMap = {};
+    sessions.forEach((s) => {
+      const key = s.timestamp.slice(0, 10);
+      if (!dateMap[key]) dateMap[key] = { sessions: 0, delegations: 0 };
+      dateMap[key].sessions++;
+    });
+    delegations.forEach((d) => {
+      const key = d.timestamp.slice(0, 10);
+      if (!dateMap[key]) dateMap[key] = { sessions: 0, delegations: 0 };
+      dateMap[key].delegations++;
+    });
+    const dates = Object.entries(dateMap).sort(([a], [b]) =>
+      a.localeCompare(b)
+    );
+    if (dates.length === 0) {
+      el.innerHTML = emptyStateHtml('timeline', 'No timeline data yet', 'A daily activity chart will build here as sessions and delegations accumulate over time.');
+      return;
+    }
+    const maxVal = Math.max(
+      ...dates.map(([, d]) => Math.max(d.sessions, d.delegations))
+    );
+    const w = 500;
+    const h = 180;
+    const pad = { top: 10, right: 10, bottom: 28, left: 10 };
+    const plotW = w - pad.left - pad.right;
+    const plotH = h - pad.top - pad.bottom;
+    // Prevent sparse layout when there are very few dates
+    const groupWidth = dates.length <= 3
+      ? Math.min(100, plotW / dates.length)
+      : plotW / dates.length;
+    const barWidth = Math.min(dates.length <= 3 ? 24 : 16, groupWidth * 0.35);
+    // Center the bars when there are few dates
+    const timelineStartX = dates.length <= 3
+      ? pad.left + (plotW - dates.length * groupWidth) / 2
+      : pad.left;
+    let rects = '';
+    let labels = '';
+    dates.forEach(([date, data], i) => {
+      const x = timelineStartX + i * groupWidth + groupWidth / 2;
+      const sH = maxVal > 0 ? (data.sessions / maxVal) * plotH : 0;
+      const dH = maxVal > 0 ? (data.delegations / maxVal) * plotH : 0;
+      rects +=
+        '<rect x="' +
+        (x - barWidth - 1).toFixed(1) +
+        '" y="' +
+        (pad.top + plotH - sH).toFixed(1) +
+        '" width="' +
+        barWidth.toFixed(1) +
+        '" height="' +
+        sH.toFixed(1) +
+        '" fill="#3b82f6" rx="3" opacity="0.85"/>';
+      rects +=
+        '<rect x="' +
+        (x + 1).toFixed(1) +
+        '" y="' +
+        (pad.top + plotH - dH).toFixed(1) +
+        '" width="' +
+        barWidth.toFixed(1) +
+        '" height="' +
+        dH.toFixed(1) +
+        '" fill="#a78bfa" rx="3" opacity="0.65"/>';
+      labels +=
+        '<text x="' +
+        x.toFixed(1) +
+        '" y="' +
+        (h - 6) +
+        '" text-anchor="middle" fill="#5a5a6e" font-size="10">' +
+        formatShortDate(date) +
+        '</text>';
+    });
+    el.innerHTML =
+      '<svg viewBox="0 0 ' +
+      w +
+      ' ' +
+      h +
+      '" class="timeline-svg" preserveAspectRatio="xMidYMid meet">' +
+      rects +
+      labels +
+      '</svg>' +
+      '<div class="timeline-legend">' +
+      '<div class="timeline-legend__item">' +
+      '<span class="timeline-legend__dot" style="background: #3b82f6"></span>' +
+      'Sessions</div>' +
+      '<div class="timeline-legend__item">' +
+      '<span class="timeline-legend__dot" style="background: #a78bfa"></span>' +
+      'Delegations</div>' +
+      '</div>';
+  }
+  // ── Model Chart ───────────────────────────────────────────
+  function renderModelChart(sessions) {
+    const el = document.getElementById('model-chart');
+    if (!el) return;
+    if (sessions.length === 0) {
+      el.innerHTML = emptyStateHtml('models', 'No model data yet', 'Model utilization across sessions — Claude Opus, GPT-5, Gemini, etc. — will be compared here.');
+      return;
+    }
+    const modelCounts = {};
+    sessions.forEach((s) => {
+      modelCounts[s.model] = (modelCounts[s.model] || 0) + 1;
+    });
+    const models = Object.entries(modelCounts).sort((a, b) => b[1] - a[1]);
+    const maxCount = Math.max(...models.map(([, c]) => c));
+    el.innerHTML = models
+      .map(
+        ([name, count]) =>
+          '<div class="bar-row">' +
+          '<span class="bar-label">' +
+          escapeHtml(name) +
+          '</span>' +
+          '<div class="bar-track">' +
+          '<div class="bar-segment" style="width: ' +
+          ((count / maxCount) * 100).toFixed(1) +
+          '%; background: ' +
+          (MODEL_COLORS[name] || '#64748b') +
+          '"></div>' +
+          '</div>' +
+          '<span class="bar-value">' +
+          count +
+          '</span>' +
+          '</div>'
+      )
+      .join('');
+  }
+  // ── Execution Log ─────────────────────────────────────────
+  function renderExecutionLog(sessions) {
+    const el = document.getElementById('execution-log');
+    if (!el) return;
+    const sorted = sessions
+      .slice()
+      .sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp))
+      .slice(0, 10);
+    if (sorted.length === 0) {
+      el.innerHTML = emptyStateHtml('execLog', 'No execution history yet', 'A step-by-step trace of agent activity — with outcomes, durations, and metadata — will appear here.');
+      return;
+    }
+    el.innerHTML =
+      '<div class="exec-log">' +
+      sorted
+        .map(
+          (s, i) =>
+            '<div class="exec-step">' +
+            '<div class="exec-step__indicator">' +
+            '<div class="exec-step__dot exec-step__dot--' +
+            s.outcome +
+            '">' +
+            (OUTCOME_ICONS[s.outcome] || '') +
+            '</div>' +
+            (i < sorted.length - 1
+              ? '<div class="exec-step__line"></div>'
+              : '') +
+            '</div>' +
+            '<div class="exec-step__content">' +
+            '<div class="exec-step__header">' +
+            '<span class="exec-step__agent">' +
+            escapeHtml(s.agent) +
+            '</span>' +
+            '<span class="exec-step__badge exec-step__badge--' +
+            s.outcome +
+            '">' +
+            s.outcome +
+            '</span>' +
+            '</div>' +
+            '<div class="exec-step__task">' +
+            escapeHtml(s.task) +
+            '</div>' +
+            '<div class="exec-step__meta">' +
+            '<span class="exec-step__meta-item">\uD83D\uDD52 ' +
+            formatTime(s.timestamp) +
+            '</span>' +
+            (s.duration_min != null
+              ? '<span class="exec-step__meta-item">\u23F1 ' +
+                s.duration_min +
+                'm</span>'
+              : '') +
+            (s.files_changed != null
+              ? '<span class="exec-step__meta-item">\uD83D\uDCC1 ' +
+                s.files_changed +
+                ' files</span>'
+              : '') +
+            (s.model
+              ? '<span class="exec-step__meta-item">\uD83E\uDD16 ' +
+                escapeHtml(s.model) +
+                '</span>'
+              : '') +
+            (s.retries > 0
+              ? '<span class="exec-step__meta-item">\uD83D\uDD04 ' +
+                s.retries +
+                ' retries</span>'
+              : '') +
+            (s.lessons_added && s.lessons_added.length > 0
+              ? '<span class="exec-step__meta-item">\uD83D\uDCA1 ' +
+                s.lessons_added.length +
+                ' lessons</span>'
+              : '') +
+            (s.discoveries && s.discoveries.length > 0
+              ? '<span class="exec-step__meta-item">\uD83D\uDD0D ' +
+                s.discoveries.length +
+                ' discoveries</span>'
+              : '') +
+            '</div>' +
+            '</div>' +
+            '</div>'
+        )
+        .join('') +
+      '</div>';
+  }
+  // ── Panel Chart ───────────────────────────────────────────
+  function renderPanelChart(panels) {
+    const el = document.getElementById('panel-chart');
+    if (!el) return;
+    if (panels.length === 0) {
+      el.innerHTML = emptyStateHtml('panels', 'No panel reviews yet', 'Quality gate verdicts from majority-vote panels — with pass/block counts and must-fix items — will be shown here.');
+      return;
+    }
+    el.innerHTML =
+      '<div class="panel-grid">' +
+      panels
+        .map(
+          (p) =>
+            '<div class="panel-item">' +
+            '<div class="panel-item__header">' +
+            '<span class="panel-item__key">' +
+            escapeHtml(p.panel_key) +
+            '</span>' +
+            '<span class="panel-item__verdict panel-item__verdict--' +
+            p.verdict +
+            '">' +
+            p.verdict +
+            '</span>' +
+            '</div>' +
+            '<div class="panel-item__votes">' +
+            Array.from({ length: p.pass_count })
+              .map(
+                () =>
+                  '<div class="panel-item__vote panel-item__vote--pass">\u2713</div>'
+              )
+              .join('') +
+            Array.from({ length: p.block_count })
+              .map(
+                () =>
+                  '<div class="panel-item__vote panel-item__vote--block">\u2717</div>'
+              )
+              .join('') +
+            '</div>' +
+            '<div class="panel-item__fixes">' +
+            (p.must_fix > 0
+              ? '<strong>' + p.must_fix + ' must-fix</strong>'
+              : '') +
+            (p.must_fix > 0 && p.should_fix > 0 ? ' \u00B7 ' : '') +
+            (p.should_fix > 0 ? p.should_fix + ' should-fix' : '') +
+            (p.must_fix === 0 && p.should_fix === 0 ? 'Clean' : '') +
+            '</div>' +
+            '<div class="panel-item__meta">' +
+            '<span class="panel-item__meta-item">\uD83E\uDD16 ' + escapeHtml(p.reviewer_model || 'unknown') + '</span>' +
+            (p.attempt > 1 ? '<span class="panel-item__meta-item">\uD83D\uDD04 attempt ' + p.attempt + '</span>' : '') +
+            (p.artifacts_count ? '<span class="panel-item__meta-item">\uD83D\uDCC4 ' + p.artifacts_count + ' artifacts</span>' : '') +
+            '</div>' +
+            '</div>'
+        )
+        .join('') +
+      '</div>';
+  }
+  // ── Sessions Table ────────────────────────────────────────
+  function renderSessionsTable(sessions) {
+    const el = document.getElementById('sessions-table');
+    if (!el) return;
+    const sorted = sessions
+      .slice()
+      .sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp))
+      .slice(0, 15);
+    if (sorted.length === 0) {
+      el.innerHTML = emptyStateHtml('sessions', 'No session records yet', 'A detailed table of recent sessions — with timestamps, agents, tasks, outcomes, and linked issues — will populate here.');
+      return;
+    }
+    el.innerHTML =
+      '<table class="sessions-table">' +
+      '<thead><tr>' +
+      '<th>Timestamp</th>' +
+      '<th>Agent</th>' +
+      '<th>Task</th>' +
+      '<th>Outcome</th>' +
+      '<th>Duration</th>' +
+      '<th>Files</th>' +
+      '<th>Retries</th>' +
+      '<th>Issue</th>' +
+      '</tr></thead>' +
+      '<tbody>' +
+      sorted
+        .map(
+          (s) =>
+            '<tr>' +
+            '<td>' +
+            formatTime(s.timestamp) +
+            '</td>' +
+            '<td class="td-agent">' +
+            escapeHtml(s.agent) +
+            '</td>' +
+            '<td class="td-task">' +
+            escapeHtml(s.task) +
+            '</td>' +
+            '<td><span class="outcome-badge outcome-badge--' +
+            s.outcome +
+            '">' +
+            s.outcome +
+            '</span></td>' +
+            '<td class="td-num">' +
+            (s.duration_min != null ? s.duration_min + 'm' : '\u2014') +
+            '</td>' +
+            '<td class="td-num">' +
+            (s.files_changed != null ? s.files_changed : '\u2014') +
+            '</td>' +
+            '<td class="td-num">' +
+            (s.retries != null ? s.retries : '\u2014') +
+            '</td>' +
+            '<td class="td-issue">' +
+            (s.linear_issue ? escapeHtml(s.linear_issue) : '\u2014') +
+            '</td>' +
+            '</tr>'
+        )
+        .join('') +
+      '</tbody></table>';
+  }
+  // ── Main ──────────────────────────────────────────────────
+  async function main() {
+    const [sessions, delegations, panels] = await Promise.all([
+      loadNdjson(base + 'data/sessions.ndjson'),
+      loadNdjson(base + 'data/delegations.ndjson'),
+      loadNdjson(base + 'data/panels.ndjson'),
+    ]);
+    // Show/hide welcome banner
+    const allEmpty = sessions.length === 0 && delegations.length === 0 && panels.length === 0;
+    if (allEmpty) {
+      renderWelcomeBanner();
+    } else {
+      removeWelcomeBanner();
+    }
+    renderKpis(sessions, delegations);
+    renderPipeline(delegations);
+    renderAgentChart(sessions);
+    renderTierChart(delegations);
+    renderMechanismChart(delegations);
+    renderDelegationOutcomeChart(delegations);
+    renderTimelineChart(sessions, delegations);
+    renderModelChart(sessions);
+    renderExecutionLog(sessions);
+    renderPanelChart(panels);
+    renderSessionsTable(sessions);
+    // ── Sidebar Navigation ────────────────────────────────
+    initSidebarNav();
+  }
+  function initSidebarNav() {
+    const links = document.querySelectorAll('.dash-sidebar__link');
+    const sections = document.querySelectorAll('[data-nav-section]');
+    // Intersection observer for active state
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            const id = entry.target.id;
+            links.forEach((link) => {
+              link.classList.toggle(
+                'dash-sidebar__link--active',
+                link.dataset.section === id
+              );
+            });
+          }
+        });
+      },
+      { rootMargin: '-20% 0px -70% 0px', threshold: 0 }
+    );
+    sections.forEach((s) => observer.observe(s));
+    // Smooth scroll on click
+    links.forEach((link) => {
+      link.addEventListener('click', (e) => {
+        e.preventDefault();
+        const target = document.getElementById(link.dataset.section);
+        if (target) {
+          target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        }
+      });
+    });
+  }
+  main();
+})();</script>