npm - opencastle - Versions diffs - 0.28.0 → 0.29.0 - Mend

opencastle 0.28.0 → 0.29.0

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 (85) hide show

package/README.md +12 -3
package/dist/cli/convoy/engine.d.ts.map +1 -1
package/dist/cli/convoy/engine.js +0 -9
package/dist/cli/convoy/engine.js.map +1 -1
package/dist/cli/convoy/engine.test.js +1 -0
package/dist/cli/convoy/engine.test.js.map +1 -1
package/dist/cli/convoy/export.d.ts +1 -3
package/dist/cli/convoy/export.d.ts.map +1 -1
package/dist/cli/convoy/export.js +9 -88
package/dist/cli/convoy/export.js.map +1 -1
package/dist/cli/convoy/export.test.js +7 -186
package/dist/cli/convoy/export.test.js.map +1 -1
package/dist/cli/convoy/pipeline.d.ts.map +1 -1
package/dist/cli/convoy/pipeline.js +0 -21
package/dist/cli/convoy/pipeline.js.map +1 -1
package/dist/cli/convoy/pipeline.test.js +0 -21
package/dist/cli/convoy/pipeline.test.js.map +1 -1
package/dist/cli/dashboard.d.ts.map +1 -1
package/dist/cli/dashboard.js +32 -8
package/dist/cli/dashboard.js.map +1 -1
package/dist/cli/destroy.d.ts.map +1 -1
package/dist/cli/destroy.js +13 -0
package/dist/cli/destroy.js.map +1 -1
package/dist/cli/dispute.d.ts +3 -0
package/dist/cli/dispute.d.ts.map +1 -0
package/dist/cli/dispute.js +25 -0
package/dist/cli/dispute.js.map +1 -0
package/dist/cli/doctor.d.ts +1 -1
package/dist/cli/doctor.d.ts.map +1 -1
package/dist/cli/doctor.js +14 -1
package/dist/cli/doctor.js.map +1 -1
package/dist/cli/eject.d.ts.map +1 -1
package/dist/cli/eject.js +14 -0
package/dist/cli/eject.js.map +1 -1
package/dist/cli/init.d.ts.map +1 -1
package/dist/cli/init.js +14 -0
package/dist/cli/init.js.map +1 -1
package/dist/cli/log.d.ts +0 -11
package/dist/cli/log.d.ts.map +1 -1
package/dist/cli/log.js +2 -114
package/dist/cli/log.js.map +1 -1
package/dist/cli/pipeline.js +21 -5
package/dist/cli/pipeline.js.map +1 -1
package/dist/cli/run.js +2 -2
package/dist/cli/run.js.map +1 -1
package/dist/cli/update.d.ts.map +1 -1
package/dist/cli/update.js +16 -0
package/dist/cli/update.js.map +1 -1
package/dist/cli/watch.d.ts.map +1 -1
package/dist/cli/watch.js +1 -3
package/dist/cli/watch.js.map +1 -1
package/package.json +1 -1
package/src/cli/convoy/engine.test.ts +1 -0
package/src/cli/convoy/engine.ts +0 -3
package/src/cli/convoy/export.test.ts +7 -224
package/src/cli/convoy/export.ts +10 -106
package/src/cli/convoy/pipeline.test.ts +0 -25
package/src/cli/convoy/pipeline.ts +0 -19
package/src/cli/dashboard.ts +33 -8
package/src/cli/destroy.ts +15 -0
package/src/cli/dispute.ts +28 -0
package/src/cli/doctor.ts +16 -1
package/src/cli/eject.ts +16 -0
package/src/cli/init.ts +16 -0
package/src/cli/log.ts +2 -120
package/src/cli/pipeline.ts +24 -5
package/src/cli/run.ts +2 -2
package/src/cli/update.ts +18 -0
package/src/cli/watch.ts +1 -3
package/src/dashboard/dist/_astro/index.Je1YjU_y.css +1 -0
package/src/dashboard/dist/index.html +141 -1391
package/src/dashboard/node_modules/.vite/deps/_metadata.json +6 -6
package/src/dashboard/scripts/etl.test.ts +4 -62
package/src/dashboard/scripts/etl.ts +13 -33
package/src/dashboard/src/pages/index.astro +204 -1630
package/src/dashboard/src/styles/dashboard.css +473 -7
package/src/orchestrator/prompts/brainstorm.prompt.md +1 -0
package/src/orchestrator/prompts/generate-convoy.prompt.md +7 -0
package/src/orchestrator/prompts/generate-prd.prompt.md +6 -0
package/dist/cli/convoy/log-merge.test.d.ts +0 -2
package/dist/cli/convoy/log-merge.test.d.ts.map +0 -1
package/dist/cli/convoy/log-merge.test.js +0 -147
package/dist/cli/convoy/log-merge.test.js.map +0 -1
package/src/cli/convoy/log-merge.test.ts +0 -179
package/src/dashboard/dist/_astro/index.6L3_HsPT.css +0 -1

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

@@ -1,10 +1,10 @@
-<!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.6L3_HsPT.css"></head> <body>  <script>(function(){const overallStats = {"convoyCounts":{"total":7,"running":1,"done":5,"failed":0,"gate_failed":0},"durationStats":{"avg_sec":2950.0000052154064,"p95_sec":3720.000019669533,"max_sec":5879.9999713897705},"tokenCostTotals":{"total_tokens":226750,"total_cost_usd":22.67},"topAgents":[{"agent":"Developer","task_count":6,"total_tokens":70100},{"agent":"Reviewer","task_count":5,"total_tokens":16250},{"agent":"UI/UX Expert","task_count":3,"total_tokens":32300},{"agent":"Testing Expert","task_count":3,"total_tokens":28800},{"agent":"DevOps Expert","task_count":3,"total_tokens":6400}],"topModels":[{"model":"claude-sonnet-4-6","task_count":21,"total_tokens":177650},{"model":"claude-haiku-3-5","task_count":5,"total_tokens":17700},{"model":"claude-opus-4-6","task_count":4,"total_tokens":40700}],"dlqSummary":{"count":3,"top_failure_types":[{"type":"timeout","count":1},{"type":"review_blocked","count":1},{"type":"gate_failed","count":1}]}};
+<!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.Je1YjU_y.css"></head> <body>  <script>(function(){const overallStats = {"convoyCounts":{"total":7,"running":1,"done":5,"failed":0,"gate_failed":0},"durationStats":{"avg_sec":2950.0000052154064,"p95_sec":3720.000019669533,"max_sec":5879.9999713897705},"tokenCostTotals":{"total_tokens":226750,"total_cost_usd":22.67},"topAgents":[{"agent":"Developer","task_count":6,"total_tokens":70100},{"agent":"Reviewer","task_count":5,"total_tokens":16250},{"agent":"UI/UX Expert","task_count":3,"total_tokens":32300},{"agent":"Testing Expert","task_count":3,"total_tokens":28800},{"agent":"DevOps Expert","task_count":3,"total_tokens":6400}],"topModels":[{"model":"claude-sonnet-4-6","task_count":21,"total_tokens":177650},{"model":"claude-haiku-3-5","task_count":5,"total_tokens":17700},{"model":"claude-opus-4-6","task_count":4,"total_tokens":40700}],"dlqSummary":{"count":3,"top_failure_types":[{"type":"timeout","count":1},{"type":"review_blocked","count":1},{"type":"gate_failed","count":1}]}};
 const convoyList = [{"id":"demo-deploy-ci","name":"CI/CD Pipeline Setup","status":"running","created_at":"2026-03-11T08:00:00.000Z","finished_at":null,"total_tokens":null,"total_cost_usd":null},{"id":"demo-docs-update","name":"Documentation Refresh","status":"done","created_at":"2026-02-28T15:00:00.000Z","finished_at":"2026-02-28T15:22:00.000Z","total_tokens":14800,"total_cost_usd":1.48},{"id":"demo-data-pipeline","name":"Analytics ETL Pipeline","status":"done","created_at":"2026-02-22T13:00:00.000Z","finished_at":"2026-02-22T13:38:00.000Z","total_tokens":28900,"total_cost_usd":2.89},{"id":"demo-perf-opt","name":"Frontend Performance Boost","status":"done","created_at":"2026-02-17T10:00:00.000Z","finished_at":"2026-02-17T11:02:00.000Z","total_tokens":37200,"total_cost_usd":3.72},{"id":"demo-api-v2","name":"REST API v2 Migration","status":"gate_failed","created_at":"2026-02-12T16:00:00.000Z","finished_at":"2026-02-12T16:28:00.000Z","total_tokens":24600,"total_cost_usd":2.46},{"id":"demo-dashboard-ui","name":"Observability Dashboard UI","status":"done","created_at":"2026-02-07T14:00:00.000Z","finished_at":"2026-02-07T15:38:00.000Z","total_tokens":78400,"total_cost_usd":7.84},{"id":"demo-auth-revamp","name":"Auth System Revamp","status":"done","created_at":"2026-02-03T09:00:00.000Z","finished_at":"2026-02-03T09:47:00.000Z","total_tokens":42850,"total_cost_usd":4.28}];
   window.__DASHBOARD_DATA__ = { overallStats, convoyList }
-})();</script>  <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 class="dash-header__actions"> <div class="convoy-selector"> <label class="convoy-selector__label" for="convoy-select">Convoy</label> <select class="convoy-selector__select" id="convoy-select" aria-label="Select a convoy to view its details"> <option value="">Select convoy…</option> </select> </div> <button class="dash-btn dash-btn--ghost" id="export-btn" type="button" title="Export data as JSON" aria-label="Export dashboard data as JSON"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>
+})();</script>  <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 class="dash-header__actions"> <button class="dash-btn dash-btn--ghost" id="export-btn" type="button" title="Export data as JSON" aria-label="Export dashboard data as JSON"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>
 Export
-</button> </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="#overall-section" data-section="overall-section" aria-label="Overview section">Overview</a></li> <li><a class="dash-sidebar__link" href="#tasks-section" data-section="tasks-section" aria-label="Tasks section">Tasks</a></li> <li><a class="dash-sidebar__link" href="#quality-section" data-section="quality-section" aria-label="Quality section">Quality</a></li> <li><a class="dash-sidebar__link" href="#reliability-section" data-section="reliability-section" aria-label="Reliability section">Reliability</a></li> <li><a class="dash-sidebar__link" href="#drift-section" data-section="drift-section" aria-label="Drift section">Drift</a></li> <li><a class="dash-sidebar__link" href="#outputs-section" data-section="outputs-section" aria-label="Outputs section">Outputs</a></li> <li><a class="dash-sidebar__link" href="#event-timeline-section" data-section="event-timeline-section" aria-label="Event Log section">Event Log</a></li> <li><a class="dash-sidebar__link" href="#convoy-section" data-section="convoy-section" aria-label="Convoy section">Convoy</a></li> </ul> </nav> <main class="dash-main"> <!-- Overall Stats Section --> <section class="overall-stats" id="overall-section" data-nav-section> <div class="overall-stats__header"> <h2 class="overall-stats__title">Overall Stats</h2> <span class="tooltip-trigger" tabindex="0" role="button" aria-label="Info: How all runs behave across your project." data-tooltip="How all runs behave across your project."><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg></span> </div> <div class="overall-stats__grid"> <div class="overall-kpi" id="overall-total-runs"> <span class="overall-kpi__label">Total Runs <span class="tooltip-trigger" tabindex="0" role="button" aria-label="Info: Number of convoy runs executed" data-tooltip="Number of convoy runs executed"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg></span></span> <span class="overall-kpi__value">&mdash;</span> </div> <div class="overall-kpi" id="overall-running"> <span class="overall-kpi__label">Running Now</span> <span class="overall-kpi__value">&mdash;</span> </div> <div class="overall-kpi" id="overall-success-rate"> <span class="overall-kpi__label">Success Rate</span> <span class="overall-kpi__value">&mdash;</span> </div> <div class="overall-kpi" id="overall-avg-duration"> <span class="overall-kpi__label">Avg Duration</span> <span class="overall-kpi__value">&mdash;</span> </div> <div class="overall-kpi" id="overall-total-tokens"> <span class="overall-kpi__label">Total Tokens</span> <span class="overall-kpi__value">&mdash;</span> </div> <div class="overall-kpi" id="overall-total-cost"> <span class="overall-kpi__label">Total Cost</span> <span class="overall-kpi__value">&mdash;</span> </div> </div> </section> <!-- Selected Convoy Header --> <section class="convoy-detail-header" id="convoy-detail-header"> <div class="convoy-detail-header__top"> <h2 class="convoy-detail-header__name" id="selected-convoy-name">No convoy selected</h2> <span class="status-badge" id="selected-convoy-status" role="status"></span> <span class="tooltip-trigger" tabindex="0" role="button" aria-label="Info: A convoy is a set of AI tasks working together on one goal." data-tooltip="A convoy is a set of AI tasks working together on one goal."><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg></span> </div> <p class="convoy-status-explanation" id="convoy-status-explanation" role="status" aria-live="polite"></p> <div class="convoy-detail-header__meta" id="selected-convoy-meta"> <!-- Populated by JS: branch, timestamps, duration, tokens, cost --> </div> </section> <!-- Tasks Section --> <section class="chart-card" id="tasks-section" data-nav-section style="display:none"> <div class="chart-card__header"> <h2 class="chart-card__title">Tasks</h2> <span class="tooltip-trigger" tabindex="0" role="button" aria-label="Info: Individual units of work in this convoy." data-tooltip="Individual units of work in this convoy."><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg></span> <p class="chart-card__desc" id="tasks-section-desc">Task breakdown for the selected convoy</p> </div> <div class="chart-card__body" id="tasks-section-body"> <div id="task-summary-cards" class="task-summary-cards"></div> <div id="phase-breakdown" class="phase-breakdown"></div> <div id="task-table-wrap" class="task-table-wrap"></div> </div> </section> <!-- Quality Section --> <section class="chart-card" id="quality-section" data-nav-section style="display:none"> <div class="chart-card__header"> <h2 class="chart-card__title">Quality / Review</h2> <span class="tooltip-trigger" tabindex="0" role="button" aria-label="Info: Code review results and dispute resolution." data-tooltip="Code review results and dispute resolution."><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg></span> <p class="chart-card__desc">Code review results and quality gate outcomes for the selected convoy</p> </div> <div class="chart-card__body"> <div id="quality-cards" class="task-summary-cards"></div> <div id="quality-review-table"></div> </div> </section> <!-- Reliability Section --> <section class="chart-card" id="reliability-section" data-nav-section style="display:none"> <div class="chart-card__header"> <h2 class="chart-card__title">Reliability</h2> <span class="tooltip-trigger" tabindex="0" role="button" aria-label="Info: Errors, retry attempts, and safety mechanisms." data-tooltip="Errors, retry attempts, and safety mechanisms."><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg></span> <p class="chart-card__desc">Retry queue and error overview for the selected convoy</p> </div> <div class="chart-card__body"> <div id="reliability-dlq-card"></div> <div id="reliability-dlq-table"></div> <div style="margin-top:24px"> <h3 style="font-size:1rem;font-weight:600;color:var(--text-secondary);margin:0 0 12px">Error Overview</h3> <div id="reliability-error-overview"></div> </div> </div> </section> <!-- Drift Section --> <section class="chart-card" id="drift-section" data-nav-section style="display:none"> <div class="chart-card__header"> <h2 class="chart-card__title">Drift</h2> <span class="tooltip-trigger" tabindex="0" role="button" aria-label="Info: How far the actual work deviated from the original plan." data-tooltip="How far the actual work deviated from the original plan."><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg></span> <p class="chart-card__desc">Plan adherence and deviation metrics for the selected convoy</p> </div> <div class="chart-card__body"> <div id="drift-cards" class="task-summary-cards"></div> <div id="drift-secret-banner" style="display:none"></div> </div> </section> <!-- Outputs Section --> <section class="chart-card" id="outputs-section" data-nav-section style="display:none"> <div class="chart-card__header"> <h2 class="chart-card__title">Outputs &amp; Artifacts</h2> <span class="tooltip-trigger" tabindex="0" role="button" aria-label="Info: Files, data, and summaries produced by this convoy." data-tooltip="Files, data, and summaries produced by this convoy."><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg></span> <p class="chart-card__desc">Files, summaries, and structured data produced by tasks in this convoy</p> </div> <div class="chart-card__body"> <div id="outputs-cards" class="task-summary-cards"></div> <div id="artifact-table-wrap"></div> </div> </section> <!-- Event Timeline Section --> <section class="chart-card" id="event-timeline-section" data-nav-section style="display:none"> <div class="chart-card__header"> <h2 class="chart-card__title">Event Timeline</h2> <span class="tooltip-trigger" tabindex="0" role="button" aria-label="Info: Chronological log of everything that happened during this run." data-tooltip="Chronological log of everything that happened during this run."><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg></span> <p class="chart-card__desc">Convoy events in reverse chronological order</p> </div> <div class="chart-card__body"> <div id="event-timeline-filters" class="timeline-filters"></div> <div id="event-timeline-list"></div> <div id="event-timeline-load-more" style="display:none;text-align:center;padding:16px"> <button class="dash-btn dash-btn--ghost" id="event-timeline-more-btn" type="button">Load more</button> </div> </div> </section> <!-- Filter Bar --> <div class="filter-bar" id="filter-bar"> <div class="filter-group"> <label class="filter-label" for="filter-date-from">From</label> <input class="filter-input" type="date" id="filter-date-from"> </div> <div class="filter-group"> <label class="filter-label" for="filter-date-to">To</label> <input class="filter-input" type="date" id="filter-date-to"> </div> <div class="filter-group"> <label class="filter-label" for="filter-agent">Agent</label> <select class="filter-select" id="filter-agent"> <option value="">All agents</option> </select> </div> <div class="filter-group"> <label class="filter-label" for="filter-outcome">Outcome</label> <select class="filter-select" id="filter-outcome"> <option value="">All outcomes</option> <option value="success">Success</option> <option value="partial">Partial</option> <option value="failed">Failed</option> </select> </div> <div class="filter-group"> <label class="filter-label" for="filter-convoy">Convoy</label> <select class="filter-select" id="filter-convoy"> <option value="">All convoys</option> </select> </div> <div class="filter-group"> <label class="filter-label" for="filter-pipeline">Pipeline</label> <select class="filter-select" id="filter-pipeline"> <option value="">All</option> </select> </div> <button class="dash-btn dash-btn--ghost filter-reset" id="filter-reset" type="button">Reset</button> </div> <!-- Convoy Status Section --> <section class="chart-card convoy-status" id="convoy-section" data-nav-section style="display:none"> <div class="chart-card__header"> <h2 class="chart-card__title">Convoy Status</h2> <p class="chart-card__desc" id="convoy-desc">Select a convoy to view details</p> </div> <div class="chart-card__body" id="convoy-body"></div> </section> <!-- Convoy Pipeline (Chaining) Section --> <section class="chart-card" id="convoy-pipeline-section" data-nav-section style="display:none"> <div class="chart-card__header"> <h2 class="chart-card__title">Convoy Pipeline</h2> <p class="chart-card__desc" id="convoy-pipeline-desc">Pipeline convoy chain progress</p> </div> <div class="chart-card__body" id="convoy-pipeline-body"></div> </section> <!-- 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> <!-- Fast Reviews --> <section class="chart-card" id="reviews-section" data-nav-section> <div class="chart-card__header"> <h2 class="chart-card__title">Fast Reviews</h2> <p class="chart-card__desc">Single-reviewer quality gate results</p> </div> <div class="chart-card__body chart-card__body--table" id="reviews-table"> <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 = "/";
+</button> </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="#overall-section" data-section="overall-section" data-view="home" aria-label="Overview section">Overview</a></li> <li><a class="dash-sidebar__link" href="#convoy-list-section" data-section="convoy-list-section" data-view="home" aria-label="Convoys section">Convoys</a></li> <li><a class="dash-sidebar__link" href="#tasks-section" data-section="tasks-section" data-view="detail" aria-label="Tasks section">Tasks</a></li> <li><a class="dash-sidebar__link" href="#quality-section" data-section="quality-section" data-view="detail" aria-label="Quality section">Quality</a></li> <li><a class="dash-sidebar__link" href="#reliability-section" data-section="reliability-section" data-view="detail" aria-label="Reliability section">Reliability</a></li> <li><a class="dash-sidebar__link" href="#drift-section" data-section="drift-section" data-view="detail" aria-label="Drift section">Drift</a></li> <li><a class="dash-sidebar__link" href="#outputs-section" data-section="outputs-section" data-view="detail" aria-label="Outputs section">Outputs</a></li> <li><a class="dash-sidebar__link" href="#event-timeline-section" data-section="event-timeline-section" data-view="detail" aria-label="Event Log section">Event Log</a></li> </ul> </nav> <main class="dash-main"> <nav class="breadcrumbs" id="breadcrumbs" data-view-hidden> <a class="breadcrumbs__link" href="#" id="breadcrumbs-home">Observability</a> <span class="breadcrumbs__separator">/</span> <span class="breadcrumbs__current" id="breadcrumbs-convoy"></span> </nav> <div class="view-home" id="view-home"> <!-- Overall Stats Section --> <section class="overall-stats" id="overall-section" data-nav-section> <div class="overall-stats__header"> <h2 class="overall-stats__title">Overall Stats</h2> <span class="tooltip-trigger" tabindex="0" role="button" aria-label="Info: How all runs behave across your project." data-tooltip="How all runs behave across your project."><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg></span> </div> <div class="overall-stats__grid"> <div class="overall-kpi" id="overall-total-runs"> <span class="overall-kpi__label">Total Runs <span class="tooltip-trigger" tabindex="0" role="button" aria-label="Info: Number of convoy runs executed" data-tooltip="Number of convoy runs executed"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg></span></span> <span class="overall-kpi__value">&mdash;</span> </div> <div class="overall-kpi" id="overall-running"> <span class="overall-kpi__label">Running Now</span> <span class="overall-kpi__value">&mdash;</span> </div> <div class="overall-kpi" id="overall-success-rate"> <span class="overall-kpi__label">Success Rate</span> <span class="overall-kpi__value">&mdash;</span> </div> <div class="overall-kpi" id="overall-avg-duration"> <span class="overall-kpi__label">Avg Duration</span> <span class="overall-kpi__value">&mdash;</span> </div> <div class="overall-kpi" id="overall-total-tokens"> <span class="overall-kpi__label">Total Tokens</span> <span class="overall-kpi__value">&mdash;</span> </div> <div class="overall-kpi" id="overall-total-cost"> <span class="overall-kpi__label">Total Cost</span> <span class="overall-kpi__value">&mdash;</span> </div> </div> </section> <!-- Convoy List Section --> <section class="convoy-list-section" id="convoy-list-section"> <div class="convoy-list-section__header"> <h2>Convoys</h2> <p class="convoy-list-section__desc">All convoy runs across your project</p> </div> <div class="convoy-list-filters" id="convoy-list-filters"> <div class="convoy-list-filters__group"> <label for="cl-filter-search">Search</label> <input class="convoy-list-filters__input" type="text" id="cl-filter-search" placeholder="Convoy name…"> </div> <div class="convoy-list-filters__group"> <label for="cl-filter-status">Status</label> <select class="convoy-list-filters__select" id="cl-filter-status"> <option value="">All</option> <option value="done">Done</option> <option value="running">Running</option> <option value="failed">Failed</option> <option value="gate-failed">Gate Failed</option> <option value="pending">Pending</option> </select> </div> <div class="convoy-list-filters__group"> <label for="cl-filter-from">From</label> <input class="convoy-list-filters__date" type="date" id="cl-filter-from"> </div> <div class="convoy-list-filters__group"> <label for="cl-filter-to">To</label> <input class="convoy-list-filters__date" type="date" id="cl-filter-to"> </div> <button class="convoy-list-filters__reset" type="button" id="cl-filter-reset">Reset</button> </div> <div id="convoy-list-table-wrap"></div> <div class="convoy-list-empty" id="convoy-list-empty" style="display:none"> <div class="convoy-list-empty__icon"> <svg width="40" height="40" viewBox="0 0 40 40" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="6" y="6" width="28" height="28" rx="4"></rect><line x1="14" y1="20" x2="26" y2="20" opacity="0.5"></line></svg> </div> <p class="convoy-list-empty__text">No convoys match your filters</p> </div> </section> </div><!-- .view-home --> <div class="view-convoy-detail" id="view-convoy-detail" data-view-hidden> <section class="convoy-detail-hero" id="convoy-detail-hero"> <div class="convoy-detail-hero__title" id="detail-hero-title"></div> <span class="convoy-detail-hero__status" id="detail-hero-status"></span> <div class="convoy-detail-hero__meta" id="detail-hero-meta"></div> </section> <!-- Tasks Section --> <section class="chart-card" id="tasks-section" data-nav-section> <div class="chart-card__header"> <h2 class="chart-card__title">Tasks</h2> <span class="tooltip-trigger" tabindex="0" role="button" aria-label="Info: Individual units of work in this convoy." data-tooltip="Individual units of work in this convoy."><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg></span> <p class="chart-card__desc" id="tasks-section-desc">Task breakdown for the selected convoy</p> </div> <div class="chart-card__body" id="tasks-section-body"> <div id="task-summary-cards" class="task-summary-cards"></div> <div id="phase-breakdown" class="phase-breakdown"></div> <div id="task-table-wrap" class="task-table-wrap"></div> </div> </section> <!-- Quality Section --> <section class="chart-card" id="quality-section" data-nav-section> <div class="chart-card__header"> <h2 class="chart-card__title">Quality / Review</h2> <span class="tooltip-trigger" tabindex="0" role="button" aria-label="Info: Code review results and dispute resolution." data-tooltip="Code review results and dispute resolution."><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg></span> <p class="chart-card__desc">Code review results and quality gate outcomes for the selected convoy</p> </div> <div class="chart-card__body"> <div id="quality-cards" class="task-summary-cards"></div> <div id="quality-review-table"></div> </div> </section> <!-- Reliability Section --> <section class="chart-card" id="reliability-section" data-nav-section> <div class="chart-card__header"> <h2 class="chart-card__title">Reliability</h2> <span class="tooltip-trigger" tabindex="0" role="button" aria-label="Info: Errors, retry attempts, and safety mechanisms." data-tooltip="Errors, retry attempts, and safety mechanisms."><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg></span> <p class="chart-card__desc">Retry queue and error overview for the selected convoy</p> </div> <div class="chart-card__body"> <div id="reliability-dlq-card"></div> <div id="reliability-dlq-table"></div> <div style="margin-top:24px"> <h3 style="font-size:1rem;font-weight:600;color:var(--text-secondary);margin:0 0 12px">Error Overview</h3> <div id="reliability-error-overview"></div> </div> </div> </section> <!-- Drift Section --> <section class="chart-card" id="drift-section" data-nav-section> <div class="chart-card__header"> <h2 class="chart-card__title">Drift</h2> <span class="tooltip-trigger" tabindex="0" role="button" aria-label="Info: How far the actual work deviated from the original plan." data-tooltip="How far the actual work deviated from the original plan."><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg></span> <p class="chart-card__desc">Plan adherence and deviation metrics for the selected convoy</p> </div> <div class="chart-card__body"> <div id="drift-cards" class="task-summary-cards"></div> <div id="drift-secret-banner" style="display:none"></div> </div> </section> <!-- Outputs Section --> <section class="chart-card" id="outputs-section" data-nav-section> <div class="chart-card__header"> <h2 class="chart-card__title">Outputs &amp; Artifacts</h2> <span class="tooltip-trigger" tabindex="0" role="button" aria-label="Info: Files, data, and summaries produced by this convoy." data-tooltip="Files, data, and summaries produced by this convoy."><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg></span> <p class="chart-card__desc">Files, summaries, and structured data produced by tasks in this convoy</p> </div> <div class="chart-card__body"> <div id="outputs-cards" class="task-summary-cards"></div> <div id="artifact-table-wrap"></div> </div> </section> <!-- Event Timeline Section --> <section class="chart-card" id="event-timeline-section" data-nav-section> <div class="chart-card__header"> <h2 class="chart-card__title">Event Timeline</h2> <span class="tooltip-trigger" tabindex="0" role="button" aria-label="Info: Chronological log of everything that happened during this run." data-tooltip="Chronological log of everything that happened during this run."><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg></span> <p class="chart-card__desc">Convoy events in reverse chronological order</p> </div> <div class="chart-card__body"> <div id="event-timeline-filters" class="timeline-filters"></div> <div id="event-timeline-list"></div> <div id="event-timeline-load-more" style="display:none;text-align:center;padding:16px"> <button class="dash-btn dash-btn--ghost" id="event-timeline-more-btn" type="button">Load more</button> </div> </div> </section> </div><!-- .view-convoy-detail --> </main> </div>  </body></html> <script>(function(){const base = "/";
   // ── Data Loading ──────────────────────────────────────────
@@ -176,1257 +176,95 @@ Export
     if (existing) existing.remove();
   }
-  // ── KPI Rendering ────────────────────────────────────────
-  function renderKpis(sessions, delegations, reviews) {
-    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>';
+  // ── View Management ─────────────────────────────────────
+  function showHomeView() {
+    const home = document.getElementById('view-home');
+    const detail = document.getElementById('view-convoy-detail');
+    const breadcrumbs = document.getElementById('breadcrumbs');
+    if (home) delete home.dataset.viewHidden;
+    if (detail) detail.dataset.viewHidden = '';
+    if (breadcrumbs) breadcrumbs.dataset.viewHidden = '';
+    document.querySelectorAll('.dash-sidebar__link[data-view="detail"]').forEach(el => el.closest('li').style.display = 'none');
+    document.querySelectorAll('.dash-sidebar__link[data-view="home"]').forEach(el => el.closest('li').style.display = '');
+    const url = new URL(window.location);
+    url.searchParams.delete('convoy');
+    history.pushState({}, '', url);
   }
-  // ── 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>';
+  function showConvoyDetailView(convoyId, convoyName) {
+    const home = document.getElementById('view-home');
+    const detail = document.getElementById('view-convoy-detail');
+    const breadcrumbs = document.getElementById('breadcrumbs');
+    if (home) home.dataset.viewHidden = '';
+    if (detail) delete detail.dataset.viewHidden;
+    if (breadcrumbs) delete breadcrumbs.dataset.viewHidden;
+    document.querySelectorAll('.dash-sidebar__link[data-view="home"]').forEach(el => el.closest('li').style.display = 'none');
+    document.querySelectorAll('.dash-sidebar__link[data-view="detail"]').forEach(el => el.closest('li').style.display = '');
+    const crumbText = document.getElementById('breadcrumbs-convoy');
+    if (crumbText) crumbText.textContent = convoyName || convoyId;
+    const url = new URL(window.location);
+    url.searchParams.set('convoy', convoyId);
+    history.pushState({}, '', url);
+    loadConvoyDetail(convoyId);
+    window.scrollTo({ top: 0, behavior: 'smooth' });
   }
-  // ── Delegation Outcome Chart ──────────────────────────────
-  function renderDelegationOutcomeChart(delegations) {
-    var el = document.getElementById('delegation-outcome-chart');
-    if (!el) return;
+  // ── Convoy List ─────────────────────────────────────────
+  function renderConvoyList() {
+    const data = window.__DASHBOARD_DATA__;
+    const list = data?.convoyList ?? [];
+    const wrap = document.getElementById('convoy-list-table-wrap');
+    const emptyEl = document.getElementById('convoy-list-empty');
+    if (!wrap) return;
+    const search = (document.getElementById('cl-filter-search')?.value || '').toLowerCase();
+    const status = document.getElementById('cl-filter-status')?.value || '';
+    const fromDate = document.getElementById('cl-filter-from')?.value || '';
+    const toDate = document.getElementById('cl-filter-to')?.value || '';
+    let filtered = list;
+    if (search) filtered = filtered.filter(c => (c.name || c.id || '').toLowerCase().includes(search));
+    if (status) filtered = filtered.filter(c => c.status === status);
+    if (fromDate) filtered = filtered.filter(c => c.created_at && c.created_at >= fromDate);
+    if (toDate) filtered = filtered.filter(c => c.created_at && c.created_at.slice(0, 10) <= toDate);
-    if (delegations.length === 0) {
-      el.innerHTML = emptyStateHtml('outcomes', 'No outcome data yet', 'Delegation results — success, partial, failed, redirected — will be tracked and compared here.');
+    if (filtered.length === 0) {
+      wrap.innerHTML = '';
+      if (emptyEl) emptyEl.style.display = '';
       return;
     }
+    if (emptyEl) emptyEl.style.display = 'none';
-    var OUTCOME_COLORS = {
-      success: '#22c55e',
-      partial: '#f59e0b',
-      failed: '#ef4444',
-      redirected: '#64748b',
+    const statusBadgeClass = (s) => {
+      const map = { done: '--done', running: '--running', failed: '--failed', 'gate-failed': '--gate-failed', pending: '--pending' };
+      return 'status-badge ' + (map[s] || '');
     };
-    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.tracker_issue ? escapeHtml(s.tracker_issue) : '\u2014') +
-            '</td>' +
-            '</tr>'
-        )
-        .join('') +
-      '</tbody></table>';
-  }
-  // ── Main ──────────────────────────────────────────────────
-  // Store raw data globally for filtering/export
-  let rawSessions = [];
-  let rawDelegations = [];
-  let rawPanels = [];
-  let rawReviews = [];
-  let rawConvoys = [];
-  let rawPipelines = [];
-  function applyFilters() {
-    const dateFrom = document.getElementById('filter-date-from').value;
-    const dateTo = document.getElementById('filter-date-to').value;
-    const agentFilter = document.getElementById('filter-agent').value;
-    const outcomeFilter = document.getElementById('filter-outcome').value;
-    const convoyFilter = document.getElementById('filter-convoy').value;
-    const pipelineFilter = document.getElementById('filter-pipeline')?.value || '';
-    function matchDate(ts) {
-      const date = ts.slice(0, 10);
-      if (dateFrom && date < dateFrom) return false;
-      if (dateTo && date > dateTo) return false;
-      return true;
-    }
-    let sessions = rawSessions.filter((s) => {
-      if (!matchDate(s.timestamp)) return false;
-      if (agentFilter && s.agent !== agentFilter) return false;
-      if (outcomeFilter && s.outcome !== outcomeFilter) return false;
-      return true;
-    });
-    let delegations = rawDelegations.filter((d) => {
-      if (!matchDate(d.timestamp)) return false;
-      if (agentFilter && d.agent !== agentFilter) return false;
-      if (outcomeFilter && d.outcome !== outcomeFilter) return false;
-      return true;
-    });
-    let panels = rawPanels.filter((p) => matchDate(p.timestamp));
-    let reviews = rawReviews.filter((r) => {
-      if (!matchDate(r.timestamp)) return false;
-      if (agentFilter && r.agent !== agentFilter) return false;
-      return true;
-    });
-    // Pipeline filter: restrict events to convoy_ids within the selected pipeline
-    if (pipelineFilter) {
-      const activePipeline = rawPipelines.find((p) => p.id === pipelineFilter);
-      const pipelineConvoyIds = new Set((activePipeline && activePipeline.convoy_ids) || []);
-      if (pipelineConvoyIds.size > 0) {
-        sessions = sessions.filter((s) => !s.convoy_id || pipelineConvoyIds.has(s.convoy_id));
-        delegations = delegations.filter((d) => !d.convoy_id || pipelineConvoyIds.has(d.convoy_id));
-        panels = panels.filter((p2) => !p2.convoy_id || pipelineConvoyIds.has(p2.convoy_id));
-        reviews = reviews.filter((r) => !r.convoy_id || pipelineConvoyIds.has(r.convoy_id));
-      }
-    }
-    if (convoyFilter) {
-      sessions = sessions.filter((s) => s.convoy_id === convoyFilter);
-      delegations = delegations.filter((d) => d.convoy_id === convoyFilter);
-      panels = panels.filter((p) => p.convoy_id === convoyFilter);
-      reviews = reviews.filter((r) => r.convoy_id === convoyFilter);
-    }
-    const convoySection = document.getElementById('convoy-section');
-    if (convoySection) {
-      convoySection.style.display = convoyFilter ? '' : 'none';
-      if (convoyFilter) {
-        const convoy = rawConvoys.find((c) => c.id === convoyFilter);
-        renderConvoyStatus(convoy);
-      }
-    }
-    // Show/hide convoy pipeline section based on pipeline filter
-    const pipelineSectionEl = document.getElementById('convoy-pipeline-section');
-    if (pipelineSectionEl) {
-      if (pipelineFilter) {
-        const activePipeline = rawPipelines.find((p) => p.id === pipelineFilter);
-        renderConvoyPipeline(activePipeline, rawConvoys);
-      } else {
-        pipelineSectionEl.style.display = 'none';
-      }
-    }
-    renderAll(sessions, delegations, panels, reviews);
-  }
-  function populateAgentFilter(sessions, delegations, reviews) {
-    const agents = new Set();
-    sessions.forEach((s) => agents.add(s.agent));
-    delegations.forEach((d) => agents.add(d.agent));
-    reviews.forEach((r) => agents.add(r.agent));
-    const select = document.getElementById('filter-agent');
-    if (!select) return;
-    // Keep the "All agents" option, remove old dynamic options
-    while (select.options.length > 1) select.remove(1);
-    Array.from(agents).sort().forEach((a) => {
-      const opt = document.createElement('option');
-      opt.value = a;
-      opt.textContent = a;
-      select.appendChild(opt);
-    });
-  }
-  function renderAll(sessions, delegations, panels, reviews) {
-    const allEmpty = sessions.length === 0 && delegations.length === 0 && panels.length === 0 && reviews.length === 0;
-    if (allEmpty) {
-      renderWelcomeBanner();
-    } else {
-      removeWelcomeBanner();
-    }
-    renderKpis(sessions, delegations, reviews);
-    renderPipeline(delegations);
-    renderAgentChart(sessions);
-    renderTierChart(delegations);
-    renderMechanismChart(delegations);
-    renderDelegationOutcomeChart(delegations);
-    renderTimelineChart(sessions, delegations);
-    renderModelChart(sessions);
-    renderExecutionLog(sessions);
-    renderPanelChart(panels);
-    renderReviewsTable(reviews);
-    renderSessionsTable(sessions);
-  }
-  // ── Reviews Table ─────────────────────────────────────────
-  function renderReviewsTable(reviews) {
-    const el = document.getElementById('reviews-table');
-    if (!el) return;
-    const sorted = reviews
-      .slice()
-      .sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp))
-      .slice(0, 20);
-    if (sorted.length === 0) {
-      el.innerHTML = emptyStateHtml('panels', 'No fast reviews yet', 'Single-reviewer quality gate results — with verdicts, issue counts, and escalation status — will be listed here.');
-      return;
-    }
-    el.innerHTML =
-      '<table class="sessions-table">' +
-      '<thead><tr>' +
-      '<th>Timestamp</th>' +
-      '<th>Agent</th>' +
-      '<th>Verdict</th>' +
-      '<th>Critical</th>' +
-      '<th>Major</th>' +
-      '<th>Minor</th>' +
-      '<th>Confidence</th>' +
-      '<th>Attempt</th>' +
-      '<th>Escalated</th>' +
-      '<th>Issue</th>' +
-      '</tr></thead>' +
-      '<tbody>' +
-      sorted
-        .map(
-          (r) =>
-            '<tr>' +
-            '<td>' + formatTime(r.timestamp) + '</td>' +
-            '<td class="td-agent">' + escapeHtml(r.agent || '') + '</td>' +
-            '<td><span class="outcome-badge outcome-badge--' + (r.verdict === 'pass' ? 'success' : 'failed') + '">' + r.verdict + '</span></td>' +
-            '<td class="td-num">' + (r.issues_critical ?? 0) + '</td>' +
-            '<td class="td-num">' + (r.issues_major ?? 0) + '</td>' +
-            '<td class="td-num">' + (r.issues_minor ?? 0) + '</td>' +
-            '<td class="td-num">' + (r.confidence || '\u2014') + '</td>' +
-            '<td class="td-num">' + (r.attempt ?? 1) + '</td>' +
-            '<td class="td-num">' + (r.escalated ? '\u26A0' : '\u2014') + '</td>' +
-            '<td class="td-issue">' + (r.tracker_issue ? escapeHtml(r.tracker_issue) : '\u2014') + '</td>' +
-            '</tr>'
-        )
-        .join('') +
-      '</tbody></table>';
-  }
-  // ── Export ─────────────────────────────────────────────────
-  function exportData() {
-    const events = [
-      ...rawSessions,
-      ...rawDelegations,
-      ...rawPanels,
-      ...rawReviews,
-    ].sort((a, b) => a.timestamp.localeCompare(b.timestamp));
-    const blob = new Blob([events.map((e) => JSON.stringify(e)).join('\n') + '\n'], { type: 'application/x-ndjson' });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = 'opencastle-events-' + new Date().toISOString().slice(0, 10) + '.ndjson';
-    a.click();
-    URL.revokeObjectURL(url);
-  }
-  function populateConvoyFilter(convoys) {
-    const select = document.getElementById('filter-convoy');
-    if (!select) return;
-    while (select.options.length > 1) select.remove(1);
-    const sorted = convoys.slice().sort((a, b) => b.created_at.localeCompare(a.created_at));
-    sorted.forEach((c) => {
-      const opt = document.createElement('option');
-      opt.value = c.id;
-      opt.textContent = c.name + ' (' + c.status + ')';
-      select.appendChild(opt);
-    });
-  }
-  function renderConvoyStatus(convoy) {
-    const descEl = document.getElementById('convoy-desc');
-    const bodyEl = document.getElementById('convoy-body');
-    if (!descEl || !bodyEl) return;
-    if (!convoy) {
-      bodyEl.innerHTML = emptyStateHtml('pipeline', 'Convoy not found', 'No matching convoy data available.');
-      return;
+    let html = '<table class="convoy-list-table"><thead><tr>' +
+      '<th>Name</th><th>Status</th><th>Tasks</th><th>Created</th><th>Duration</th>' +
+      '</tr></thead><tbody>';
+    for (const c of filtered) {
+      const name = escapeHtml(c.name || c.id);
+      const dateStr = c.created_at ? formatTime(c.created_at) : '\u2014';
+      const duration = c.started_at && c.finished_at ? formatDuration(c.started_at, c.finished_at) : (c.status === 'running' ? 'In progress' : '\u2014');
+      const taskCount = c.task_count ?? c.taskCount ?? '\u2014';
+      html += '<tr data-convoy-id="' + escapeHtml(c.id) + '" class="task-row--clickable">' +
+        '<td><strong>' + name + '</strong></td>' +
+        '<td><span class="' + statusBadgeClass(c.status) + '">' + escapeHtml(c.status || 'unknown') + '</span></td>' +
+        '<td>' + taskCount + '</td>' +
+        '<td>' + dateStr + '</td>' +
+        '<td>' + (duration || '\u2014') + '</td>' +
+        '</tr>';
     }
+    html += '</tbody></table>';
+    wrap.innerHTML = html;
-    descEl.textContent = convoy.name + ' — ' + (convoy.branch || 'no branch');
-    const s = convoy.summary || {};
-    const total = s.total || (convoy.tasks ? convoy.tasks.length : 0);
-    const done = s.done || 0;
-    const pct = total > 0 ? Math.round((done / total) * 100) : 0;
-    const statusClass = convoy.status === 'done' ? 'success'
-      : (convoy.status === 'failed' || convoy.status === 'gate-failed') ? 'failed'
-      : convoy.status === 'running' ? 'partial' : '';
-    let html = '';
-    html += '<div class="convoy-overview">';
-    html += '<div class="convoy-stat"><span class="convoy-stat__label">Status</span><span class="outcome-badge outcome-badge--' + statusClass + '">' + escapeHtml(convoy.status) + '</span></div>';
-    html += '<div class="convoy-stat"><span class="convoy-stat__label">Branch</span><span class="convoy-stat__value">' + escapeHtml(convoy.branch || '\u2014') + '</span></div>';
-    html += '<div class="convoy-stat"><span class="convoy-stat__label">Tasks</span><span class="convoy-stat__value">' + done + '/' + total + '</span></div>';
-    html += '<div class="convoy-stat"><span class="convoy-stat__label">Events</span><span class="convoy-stat__value">' + (convoy.events_count || 0) + '</span></div>';
-    html += '<div class="convoy-stat"><span class="convoy-stat__label">Started</span><span class="convoy-stat__value">' + (convoy.started_at ? formatTime(convoy.started_at) : '\u2014') + '</span></div>';
-    if (convoy.total_tokens != null) {
-      html += '<div class="convoy-stat"><span class="convoy-stat__label">Tokens</span><span class="convoy-stat__value">' + formatTokens(convoy.total_tokens) + '</span></div>';
-    }
-    if (convoy.finished_at) {
-      html += '<div class="convoy-stat"><span class="convoy-stat__label">Finished</span><span class="convoy-stat__value">' + formatTime(convoy.finished_at) + '</span></div>';
-    }
-    const convoyDur = formatDuration(convoy.started_at, convoy.finished_at);
-    if (convoyDur) {
-      html += '<div class="convoy-stat"><span class="convoy-stat__label">Duration</span><span class="convoy-stat__value">' + convoyDur + '</span></div>';
-    }
-    if (convoy.total_cost_usd != null && convoy.total_cost_usd > 0) {
-      html += '<div class="convoy-stat"><span class="convoy-stat__label">Cost</span><span class="convoy-stat__value">$' + convoy.total_cost_usd.toFixed(2) + '</span></div>';
-    }
-    const failedCount = (s.failed || 0) + (s.timedOut || 0);
-    if (failedCount > 0) {
-      html += '<div class="convoy-stat"><span class="convoy-stat__label">Failed</span><span class="convoy-stat__value convoy-stat__value--error">' + failedCount + '</span></div>';
-    }
-    html += '</div>';
-    html += '<div class="convoy-progress">';
-    html += '<div class="convoy-progress__bar"><div class="convoy-progress__fill" style="width:' + pct + '%"></div></div>';
-    html += '<span class="convoy-progress__label">' + pct + '% complete</span>';
-    html += '</div>';
-    if (convoy.tasks && convoy.tasks.length > 0) {
-      html += '<table class="sessions-table convoy-tasks">';
-      html += '<thead><tr><th>Task</th><th>Phase</th><th>Agent</th><th>Adapter</th><th>Status</th><th>Retries</th><th>Tokens</th><th>Duration</th></tr></thead>';
-      html += '<tbody>';
-      convoy.tasks.forEach(function(t) {
-        const tStatus = t.status === 'done' ? 'success'
-          : (t.status === 'failed' || t.status === 'timed-out') ? 'failed'
-          : t.status === 'running' ? 'partial' : '';
-        html += '<tr>';
-        html += '<td>' + escapeHtml(t.id) + '</td>';
-        html += '<td class="td-num">' + t.phase + '</td>';
-        html += '<td class="td-agent">' + escapeHtml(t.agent) + '</td>';
-        html += '<td>' + escapeHtml(t.adapter || '\u2014') + '</td>';
-        html += '<td><span class="outcome-badge outcome-badge--' + tStatus + '">' + escapeHtml(t.status) + '</span></td>';
-        html += '<td class="td-num">' + (t.retries || 0) + '</td>';
-        html += '<td class="td-num">' + (t.total_tokens != null ? formatTokens(t.total_tokens) : '\u2014') + '</td>';
-        html += '<td class="td-num">' + (formatDuration(t.started_at, t.finished_at) || '\u2014') + '</td>';
-        html += '</tr>';
-      });
-      html += '</tbody></table>';
-    }
-    bodyEl.innerHTML = html;
-  }
-  // ── Pipeline Filter Population ───────────────────────────
-  function populatePipelineFilter(pipelines) {
-    const select = document.getElementById('filter-pipeline');
-    if (!select) return;
-    while (select.options.length > 1) select.remove(1);
-    const sorted = pipelines.slice().sort((a, b) =>
-      (b.created_at || '').localeCompare(a.created_at || '')
-    );
-    sorted.forEach((p) => {
-      const opt = document.createElement('option');
-      opt.value = p.id;
-      opt.textContent = (p.name || p.id) + ' (' + (p.status || 'unknown') + ')';
-      select.appendChild(opt);
-    });
-  }
-  // ── Convoy Pipeline (Chaining) Render ────────────────────
-  function renderConvoyPipeline(pipeline, convoys) {
-    const sectionEl = document.getElementById('convoy-pipeline-section');
-    const descEl = document.getElementById('convoy-pipeline-desc');
-    const bodyEl = document.getElementById('convoy-pipeline-body');
-    if (!sectionEl || !bodyEl) return;
-    if (!pipeline) {
-      sectionEl.style.display = 'none';
-      return;
-    }
-    sectionEl.style.display = '';
-    if (descEl) {
-      descEl.textContent =
-        (pipeline.name || pipeline.id) + ' \u2014 ' + (pipeline.branch || 'no branch');
-    }
-    const convoyIds = pipeline.convoy_ids || [];
-    const pipelineConvoys = convoyIds
-      .map((id) => convoys.find((c) => c.id === id))
-      .filter(Boolean);
-    const total = pipelineConvoys.length;
-    const done = pipelineConvoys.filter((c) => c.status === 'done').length;
-    const failed = pipelineConvoys.filter(
-      (c) => c.status === 'failed' || c.status === 'gate-failed'
-    ).length;
-    const totalTasks = pipelineConvoys.reduce((sum, c) => {
-      const s = c.summary || {};
-      return sum + (s.total || (c.tasks ? c.tasks.length : 0));
-    }, 0);
-    const doneTasks = pipelineConvoys.reduce((sum, c) => {
-      const s = c.summary || {};
-      return sum + (s.done || 0);
-    }, 0);
-    const totalTokens = pipelineConvoys.reduce((sum, c) => sum + (c.total_tokens || 0), 0);
-    const pct =
-      totalTasks > 0
-        ? Math.round((doneTasks / totalTasks) * 100)
-        : total > 0
-          ? Math.round((done / total) * 100)
-          : 0;
-    const statusClass =
-      pipeline.status === 'done'
-        ? 'success'
-        : pipeline.status === 'failed' || pipeline.status === 'gate-failed'
-          ? 'failed'
-          : pipeline.status === 'running'
-            ? 'partial'
-            : '';
-    let html = '<div class="convoy-overview">';
-    html +=
-      '<div class="convoy-stat"><span class="convoy-stat__label">Status</span>' +
-      '<span class="outcome-badge outcome-badge--' + statusClass + '">' +
-      escapeHtml(pipeline.status || 'unknown') + '</span></div>';
-    html +=
-      '<div class="convoy-stat"><span class="convoy-stat__label">Branch</span>' +
-      '<span class="convoy-stat__value">' + escapeHtml(pipeline.branch || '\u2014') + '</span></div>';
-    html +=
-      '<div class="convoy-stat"><span class="convoy-stat__label">Convoys</span>' +
-      '<span class="convoy-stat__value">' + done + '/' + total + '</span></div>';
-    if (totalTasks > 0) {
-      html +=
-        '<div class="convoy-stat"><span class="convoy-stat__label">Tasks</span>' +
-        '<span class="convoy-stat__value">' + doneTasks + '/' + totalTasks + '</span></div>';
-    }
-    if (totalTokens > 0) {
-      html +=
-        '<div class="convoy-stat"><span class="convoy-stat__label">Tokens</span>' +
-        '<span class="convoy-stat__value">' + formatTokens(totalTokens) + '</span></div>';
-    }
-    html +=
-      '<div class="convoy-stat"><span class="convoy-stat__label">Started</span>' +
-      '<span class="convoy-stat__value">' +
-      (pipeline.started_at ? formatTime(pipeline.started_at) : '\u2014') + '</span></div>';
-    if (pipeline.finished_at) {
-      html +=
-        '<div class="convoy-stat"><span class="convoy-stat__label">Finished</span>' +
-        '<span class="convoy-stat__value">' + formatTime(pipeline.finished_at) + '</span></div>';
-    }
-    const pipelineDur = formatDuration(pipeline.started_at, pipeline.finished_at);
-    if (pipelineDur) {
-      html +=
-        '<div class="convoy-stat"><span class="convoy-stat__label">Duration</span>' +
-        '<span class="convoy-stat__value">' + pipelineDur + '</span></div>';
-    }
-    if (pipeline.total_cost_usd != null && pipeline.total_cost_usd > 0) {
-      html +=
-        '<div class="convoy-stat"><span class="convoy-stat__label">Cost</span>' +
-        '<span class="convoy-stat__value">$' + pipeline.total_cost_usd.toFixed(2) + '</span></div>';
-    }
-    html += '</div>';
-    // Convoy chain visualization
-    html += '<div class="convoy-chain">';
-    pipelineConvoys.forEach((convoy, i) => {
-      const cs = convoy.summary || {};
-      const cDone = cs.done || 0;
-      const cTotal = cs.total || (convoy.tasks ? convoy.tasks.length : 0);
-      const cTokens = convoy.total_tokens || 0;
-      const isActive =
-        (pipeline.current_convoy_id && pipeline.current_convoy_id === convoy.id) ||
-        convoy.status === 'running';
-      const nodeStatusClass =
-        convoy.status === 'done'
-          ? 'done'
-          : convoy.status === 'failed' || convoy.status === 'gate-failed'
-            ? 'failed'
-            : isActive
-              ? 'active'
-              : 'pending';
-      const badgeClass =
-        convoy.status === 'done'
-          ? 'success'
-          : convoy.status === 'failed' || convoy.status === 'gate-failed'
-            ? 'failed'
-            : convoy.status === 'running'
-              ? 'partial'
-              : '';
-      if (i > 0) {
-        html += '<div class="convoy-chain__connector">\u2192</div>';
-      }
-      html +=
-        '<div class="convoy-chain__node convoy-chain__node--' + nodeStatusClass +
-        '" data-convoy-id="' + escapeHtml(convoy.id) + '" title="Click to filter to this convoy">';
-      html += '<div class="convoy-chain__node-name">' + escapeHtml(convoy.name || convoy.id) + '</div>';
-      html +=
-        '<span class="outcome-badge outcome-badge--' + badgeClass + '">' +
-        escapeHtml(convoy.status) + '</span>';
-      if (cTotal > 0) {
-        html += '<div class="convoy-chain__node-meta">' + cDone + '/' + cTotal + ' tasks</div>';
-      }
-      if (cTokens > 0) {
-        html += '<div class="convoy-chain__node-meta">' + formatTokens(cTokens) + ' tokens</div>';
-      }
-      html += '</div>';
-    });
-    html += '</div>';
-    // Progress bar
-    html += '<div class="convoy-progress">';
-    html +=
-      '<div class="convoy-progress__bar">' +
-      '<div class="convoy-progress__fill" style="width:' + pct + '%"></div></div>';
-    html +=
-      '<span class="convoy-progress__label">' + pct + '% complete' +
-      (failed > 0 ? ' \u00B7 ' + failed + ' failed' : '') + '</span>';
-    html += '</div>';
-    bodyEl.innerHTML = html;
-    // Click handlers for convoy drill-down
-    bodyEl.querySelectorAll('.convoy-chain__node').forEach((node) => {
-      node.addEventListener('click', () => {
-        const convoyId = node.dataset.convoyId;
-        const sel = document.getElementById('filter-convoy');
-        if (sel && convoyId) {
-          sel.value = convoyId;
-          applyFilters();
-        }
+    wrap.querySelectorAll('tr[data-convoy-id]').forEach(row => {
+      row.addEventListener('click', () => {
+        const id = row.dataset.convoyId;
+        const nameCell = row.querySelector('td strong');
+        showConvoyDetailView(id, nameCell ? nameCell.textContent : id);
       });
     });
   }
@@ -1473,30 +311,6 @@ Export
     return hr + 'h ' + remMin + 'm';
   }
-  // ── Convoy Selector ──────────────────────────────────────
-  function populateConvoySelector() {
-    const data = window.__DASHBOARD_DATA__;
-    const select = document.getElementById('convoy-select');
-    if (!select || !data || !data.convoyList) return;
-    select.innerHTML = '<option value="">Select convoy\u2026</option>';
-    const list = data.convoyList;
-    for (const c of list) {
-      const opt = document.createElement('option');
-      opt.value = c.id;
-      const dateStr = c.created_at ? c.created_at.slice(0, 10) : '';
-      opt.textContent = (c.name || c.id) + ' \u2014 ' + c.status + ' (' + dateStr + ')';
-      select.appendChild(opt);
-    }
-    // Default: select latest (first in list)
-    if (list.length > 0) {
-      select.value = list[0].id;
-      loadConvoyDetail(list[0].id);
-    }
-  }
   async function loadConvoyDetail(convoyId) {
     if (!convoyId) {
       renderConvoyDetailHeader(null);
@@ -1533,9 +347,9 @@ Export
   }
   function renderConvoyDetailHeader(detail) {
-    const nameEl = document.getElementById('selected-convoy-name');
-    const statusEl = document.getElementById('selected-convoy-status');
-    const metaEl = document.getElementById('selected-convoy-meta');
+    const nameEl = document.getElementById('detail-hero-title');
+    const statusEl = document.getElementById('detail-hero-status');
+    const metaEl = document.getElementById('detail-hero-meta');
     if (!detail || !detail.convoy) {
       if (nameEl) nameEl.textContent = 'No convoy selected';
@@ -1562,11 +376,6 @@ Export
       'gate-failed': 'This run stopped because a quality check failed.',
       'hook-failed': 'This run stopped because a lifecycle script failed.',
     };
-    const explanationEl = document.getElementById('convoy-status-explanation');
-    if (explanationEl) {
-      explanationEl.textContent = statusExplanations[c.status] || '';
-      explanationEl.style.display = statusExplanations[c.status] ? '' : 'none';
-    }
     if (metaEl) {
       let html = '';
       if (c.branch) html += '<span class="convoy-meta__item">🌿 ' + escapeHtml(c.branch) + '</span>';
@@ -2108,57 +917,22 @@ Export
   }
   async function main() {
-    const events = await loadNdjson(base + 'data/events.ndjson');
-    const pipelines = await loadNdjson(base + 'data/pipelines.ndjson');
     const convoys = window.__DASHBOARD_DATA__?.convoyList ?? [];
-    const sessions = events.filter((e) => e.type === 'session');
-    const delegations = events.filter((e) => e.type === 'delegation');
-    const panels = events.filter((e) => e.type === 'panel');
-    const reviews = events.filter((e) => e.type === 'review');
-    rawSessions = sessions;
-    rawDelegations = delegations;
-    rawPanels = panels;
-    rawReviews = reviews;
-    rawConvoys = convoys;
-    rawPipelines = pipelines;
-    populateAgentFilter(sessions, delegations, reviews);
-    populateConvoyFilter(convoys);
-    populatePipelineFilter(pipelines);
-    // ── Read URL params ───────────────────────────────────
     const urlParams = new URLSearchParams(window.location.search);
     const convoyParam = urlParams.get('convoy');
     if (convoyParam === 'active') {
-      const running = rawConvoys.find((c) => c.status === 'running');
-      const latest = rawConvoys.slice().sort((a, b) => b.created_at.localeCompare(a.created_at))[0];
+      const running = convoys.find((c) => c.status === 'running');
+      const latest = convoys.slice().sort((a, b) => b.created_at.localeCompare(a.created_at))[0];
       const target = running || latest;
-      if (target) {
-        const sel = document.getElementById('filter-convoy');
-        if (sel) sel.value = target.id;
-      }
+      if (target) showConvoyDetailView(target.id, target.name || target.id);
     } else if (convoyParam) {
-      const sel = document.getElementById('filter-convoy');
-      if (sel) sel.value = convoyParam;
+      showConvoyDetailView(convoyParam, convoyParam);
     }
-    renderAll(sessions, delegations, panels, reviews);
-    // Apply convoy param after initial render (shows convoy section if needed)
-    if (convoyParam) applyFilters();
-    // ── Overall stats + convoy selector ──────────────────
     renderOverallStats();
-    populateConvoySelector();
-    const convoySelectEl = document.getElementById('convoy-select');
-    if (convoySelectEl) {
-      convoySelectEl.addEventListener('change', function() {
-        loadConvoyDetail(this.value);
-      });
-    }
+    renderConvoyList();
     var loadMoreBtn = document.getElementById('event-timeline-more-btn');
     if (loadMoreBtn) {
@@ -2168,66 +942,47 @@ Export
       });
     }
-    // ── Filter event listeners ────────────────────────────
-    document.getElementById('filter-date-from')?.addEventListener('change', applyFilters);
-    document.getElementById('filter-date-to')?.addEventListener('change', applyFilters);
-    document.getElementById('filter-agent')?.addEventListener('change', applyFilters);
-    document.getElementById('filter-outcome')?.addEventListener('change', applyFilters);
-    document.getElementById('filter-convoy')?.addEventListener('change', applyFilters);
-    document.getElementById('filter-pipeline')?.addEventListener('change', applyFilters);
-    document.getElementById('filter-reset')?.addEventListener('click', () => {
-      document.getElementById('filter-date-from').value = '';
-      document.getElementById('filter-date-to').value = '';
-      document.getElementById('filter-agent').value = '';
-      document.getElementById('filter-outcome').value = '';
-      document.getElementById('filter-convoy').value = '';
-      document.getElementById('filter-pipeline').value = '';
-      applyFilters();
+    document.getElementById('breadcrumbs-home')?.addEventListener('click', (e) => {
+      e.preventDefault();
+      showHomeView();
     });
-    // ── Auto-refresh for live convoy monitoring ───────────
-    let refreshInterval = null;
-    function startAutoRefresh() {
-      if (refreshInterval) return;
-      refreshInterval = setInterval(async () => {
-        const freshEvents = await loadNdjson(base + 'data/events.ndjson');
-        const freshConvoys = await loadJson(base + 'data/convoy-list.json');
-        const freshPipelines = await loadNdjson(base + 'data/pipelines.ndjson');
-        rawSessions = freshEvents.filter((e) => e.type === 'session');
-        rawDelegations = freshEvents.filter((e) => e.type === 'delegation');
-        rawPanels = freshEvents.filter((e) => e.type === 'panel');
-        rawReviews = freshEvents.filter((e) => e.type === 'review');
-        rawConvoys = freshConvoys;
-        rawPipelines = freshPipelines;
-        const currentValue = document.getElementById('filter-convoy')?.value;
-        const currentPipelineValue = document.getElementById('filter-pipeline')?.value;
-        populateConvoyFilter(freshConvoys);
-        populatePipelineFilter(freshPipelines);
-        const sel = document.getElementById('filter-convoy');
-        if (sel && currentValue) sel.value = currentValue;
-        const pSel = document.getElementById('filter-pipeline');
-        if (pSel && currentPipelineValue) pSel.value = currentPipelineValue;
-        applyFilters();
-      }, 5000);
-    }
-    const selectedConvoy = rawConvoys.find((c) => c.id === document.getElementById('filter-convoy')?.value);
-    if (convoyParam === 'active' || (selectedConvoy && selectedConvoy.status === 'running')) {
-      startAutoRefresh();
-    }
+    document.getElementById('cl-filter-search')?.addEventListener('input', renderConvoyList);
+    document.getElementById('cl-filter-status')?.addEventListener('change', renderConvoyList);
+    document.getElementById('cl-filter-from')?.addEventListener('change', renderConvoyList);
+    document.getElementById('cl-filter-to')?.addEventListener('change', renderConvoyList);
+    document.getElementById('cl-filter-reset')?.addEventListener('click', () => {
+      const s = document.getElementById('cl-filter-search'); if (s) s.value = '';
+      const st = document.getElementById('cl-filter-status'); if (st) st.value = '';
+      const f = document.getElementById('cl-filter-from'); if (f) f.value = '';
+      const t = document.getElementById('cl-filter-to'); if (t) t.value = '';
+      renderConvoyList();
+    });
-    // ── Export button ─────────────────────────────────────
-    document.getElementById('export-btn')?.addEventListener('click', exportData);
+    window.addEventListener('popstate', () => {
+      const params = new URLSearchParams(window.location.search);
+      const c = params.get('convoy');
+      if (c) {
+        loadConvoyDetail(c);
+        const home = document.getElementById('view-home');
+        const detail = document.getElementById('view-convoy-detail');
+        const breadcrumbs = document.getElementById('breadcrumbs');
+        if (home) home.dataset.viewHidden = '';
+        if (detail) delete detail.dataset.viewHidden;
+        if (breadcrumbs) delete breadcrumbs.dataset.viewHidden;
+        document.querySelectorAll('.dash-sidebar__link[data-view="home"]').forEach(el => el.closest('li').style.display = 'none');
+        document.querySelectorAll('.dash-sidebar__link[data-view="detail"]').forEach(el => el.closest('li').style.display = '');
+      } else {
+        showHomeView();
+      }
+    });
-    // ── Sidebar Navigation ────────────────────────────────
     initSidebarNav();
   }
   function initSidebarNav() {
-    const links = document.querySelectorAll('.dash-sidebar__link');
-    const sections = document.querySelectorAll('[data-nav-section]');
+    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) => {
@@ -2235,55 +990,50 @@ Export
             const id = entry.target.id;
             links.forEach((link) => {
               link.classList.toggle(
-                'dash-sidebar__link--active',
+                "dash-sidebar__link--active",
                 link.dataset.section === id
               );
             });
           }
         });
       },
-      { rootMargin: '-20% 0px -70% 0px', threshold: 0 }
+      { rootMargin: "-20% 0px -70% 0px", threshold: 0 }
     );
     sections.forEach((s) => observer.observe(s));
-    // Convoy-detail sections that start hidden and need a convoy selected first
-    const CONVOY_DETAIL_SECTIONS = ['tasks-section', 'quality-section', 'reliability-section', 'drift-section', 'outputs-section', 'event-timeline-section'];
+    const CONVOY_DETAIL_SECTIONS = ["tasks-section", "quality-section", "reliability-section", "drift-section", "outputs-section", "event-timeline-section"];
-    // Smooth scroll on click
     links.forEach((link) => {
-      link.addEventListener('click', async (e) => {
+      link.addEventListener("click", async (e) => {
         e.preventDefault();
         const sectionId = link.dataset.section;
         if (CONVOY_DETAIL_SECTIONS.includes(sectionId)) {
-          // Auto-select and load convoy detail if none selected yet
-          const convoySelectEl = document.getElementById('convoy-select');
-          if (convoySelectEl && !convoySelectEl.value && convoySelectEl.options.length > 1) {
-            convoySelectEl.value = convoySelectEl.options[1].value;
-            await loadConvoyDetail(convoySelectEl.value);
-          }
-        } else if (sectionId === 'convoy-section') {
-          const convoyFilterEl = document.getElementById('filter-convoy');
-          if (convoyFilterEl && !convoyFilterEl.value && convoyFilterEl.options.length > 1) {
-            convoyFilterEl.value = convoyFilterEl.options[1].value;
-            applyFilters();
-          }
-        } else if (sectionId === 'convoy-pipeline-section') {
-          const pipelineSelect = document.getElementById('filter-pipeline');
-          if (pipelineSelect && !pipelineSelect.value && pipelineSelect.options.length > 1) {
-            pipelineSelect.value = pipelineSelect.options[1].value;
-            applyFilters();
+          const convoyList = window.__DASHBOARD_DATA__?.convoyList ?? [];
+          if (!window.__SELECTED_CONVOY__ && convoyList.length > 0) {
+            showConvoyDetailView(convoyList[0].id, convoyList[0].name || convoyList[0].id);
           }
         }
         const target = document.getElementById(sectionId);
         if (target) {
-          target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+          target.scrollIntoView({ behavior: "smooth", block: "start" });
         }
       });
     });
+    // Set initial nav visibility based on current view
+    const initialParams = new URLSearchParams(window.location.search);
+    if (initialParams.get('convoy')) {
+      document.querySelectorAll('.dash-sidebar__link[data-view="home"]').forEach(el => el.closest('li').style.display = 'none');
+      document.querySelectorAll('.dash-sidebar__link[data-view="detail"]').forEach(el => el.closest('li').style.display = '');
+    } else {
+      document.querySelectorAll('.dash-sidebar__link[data-view="detail"]').forEach(el => el.closest('li').style.display = 'none');
+      document.querySelectorAll('.dash-sidebar__link[data-view="home"]').forEach(el => el.closest('li').style.display = '');
+    }
   }
   main();
 })();</script>