npm - selftune - Versions diffs - 0.2.0 → 0.2.2 - Mend

selftune 0.2.0 → 0.2.2

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

package/.claude/agents/diagnosis-analyst.md +20 -10
package/.claude/agents/evolution-reviewer.md +14 -1
package/.claude/agents/integration-guide.md +18 -6
package/.claude/agents/pattern-analyst.md +18 -5
package/CHANGELOG.md +12 -4
package/README.md +43 -35
package/apps/local-dashboard/dist/assets/geist-cyrillic-wght-normal-CHSlOQsW.woff2 +0 -0
package/apps/local-dashboard/dist/assets/geist-latin-ext-wght-normal-DMtmJ5ZE.woff2 +0 -0
package/apps/local-dashboard/dist/assets/geist-latin-wght-normal-Dm3htQBi.woff2 +0 -0
package/apps/local-dashboard/dist/assets/index-C4EOTFZ2.js +15 -0
package/apps/local-dashboard/dist/assets/index-bl-Webyd.css +1 -0
package/apps/local-dashboard/dist/assets/vendor-react-U7zYD9Rg.js +60 -0
package/apps/local-dashboard/dist/assets/vendor-table-B7VF2Ipl.js +26 -0
package/apps/local-dashboard/dist/assets/vendor-ui-D7_zX_qy.js +346 -0
package/apps/local-dashboard/dist/favicon.png +0 -0
package/apps/local-dashboard/dist/index.html +17 -0
package/apps/local-dashboard/dist/logo.png +0 -0
package/apps/local-dashboard/dist/logo.svg +9 -0
package/cli/selftune/badge/badge-data.ts +1 -1
package/cli/selftune/badge/badge.ts +4 -8
package/cli/selftune/canonical-export.ts +183 -0
package/cli/selftune/constants.ts +28 -0
package/cli/selftune/contribute/contribute.ts +1 -1
package/cli/selftune/cron/setup.ts +17 -17
package/cli/selftune/dashboard-contract.ts +202 -0
package/cli/selftune/dashboard-server.ts +653 -186
package/cli/selftune/dashboard.ts +41 -176
package/cli/selftune/eval/baseline.ts +5 -4
package/cli/selftune/eval/composability-v2.ts +273 -0
package/cli/selftune/eval/hooks-to-evals.ts +34 -15
package/cli/selftune/eval/unit-test-cli.ts +1 -1
package/cli/selftune/evolution/evidence.ts +26 -0
package/cli/selftune/evolution/evolve-body.ts +105 -11
package/cli/selftune/evolution/evolve.ts +371 -25
package/cli/selftune/evolution/extract-patterns.ts +87 -29
package/cli/selftune/evolution/rollback.ts +2 -2
package/cli/selftune/grading/auto-grade.ts +200 -0
package/cli/selftune/grading/grade-session.ts +448 -97
package/cli/selftune/grading/results.ts +42 -0
package/cli/selftune/hooks/prompt-log.ts +172 -2
package/cli/selftune/hooks/session-stop.ts +123 -3
package/cli/selftune/hooks/skill-eval.ts +119 -3
package/cli/selftune/index.ts +395 -116
package/cli/selftune/ingestors/claude-replay.ts +140 -114
package/cli/selftune/ingestors/codex-rollout.ts +345 -46
package/cli/selftune/ingestors/codex-wrapper.ts +207 -39
package/cli/selftune/ingestors/openclaw-ingest.ts +141 -8
package/cli/selftune/ingestors/opencode-ingest.ts +193 -17
package/cli/selftune/init.ts +227 -14
package/cli/selftune/last.ts +14 -5
package/cli/selftune/localdb/db.ts +63 -0
package/cli/selftune/localdb/materialize.ts +428 -0
package/cli/selftune/localdb/queries.ts +376 -0
package/cli/selftune/localdb/schema.ts +204 -0
package/cli/selftune/monitoring/watch.ts +66 -15
package/cli/selftune/normalization.ts +682 -0
package/cli/selftune/observability.ts +19 -44
package/cli/selftune/orchestrate.ts +1073 -0
package/cli/selftune/quickstart.ts +203 -0
package/cli/selftune/repair/skill-usage.ts +576 -0
package/cli/selftune/schedule.ts +561 -0
package/cli/selftune/status.ts +48 -26
package/cli/selftune/sync.ts +627 -0
package/cli/selftune/types.ts +148 -0
package/cli/selftune/utils/canonical-log.ts +45 -0
package/cli/selftune/utils/hooks.ts +41 -0
package/cli/selftune/utils/html.ts +27 -0
package/cli/selftune/utils/llm-call.ts +78 -20
package/cli/selftune/utils/math.ts +10 -0
package/cli/selftune/utils/query-filter.ts +139 -0
package/cli/selftune/utils/skill-discovery.ts +340 -0
package/cli/selftune/utils/skill-log.ts +68 -0
package/cli/selftune/utils/skill-usage-confidence.ts +18 -0
package/cli/selftune/utils/transcript.ts +272 -26
package/cli/selftune/workflows/discover.ts +254 -0
package/cli/selftune/workflows/skill-md-writer.ts +288 -0
package/cli/selftune/workflows/workflows.ts +188 -0
package/package.json +21 -8
package/packages/telemetry-contract/README.md +11 -0
package/packages/telemetry-contract/fixtures/golden.json +87 -0
package/packages/telemetry-contract/fixtures/golden.test.ts +42 -0
package/packages/telemetry-contract/index.ts +1 -0
package/packages/telemetry-contract/package.json +19 -0
package/packages/telemetry-contract/src/index.ts +2 -0
package/packages/telemetry-contract/src/types.ts +163 -0
package/packages/telemetry-contract/src/validators.ts +109 -0
package/skill/SKILL.md +84 -53
package/skill/Workflows/AutoActivation.md +17 -16
package/skill/Workflows/Badge.md +6 -0
package/skill/Workflows/Baseline.md +46 -23
package/skill/Workflows/Composability.md +12 -5
package/skill/Workflows/Contribute.md +17 -14
package/skill/Workflows/Cron.md +56 -79
package/skill/Workflows/Dashboard.md +45 -34
package/skill/Workflows/Doctor.md +30 -17
package/skill/Workflows/Evals.md +64 -40
package/skill/Workflows/EvolutionMemory.md +2 -0
package/skill/Workflows/Evolve.md +102 -47
package/skill/Workflows/EvolveBody.md +6 -6
package/skill/Workflows/Grade.md +36 -31
package/skill/Workflows/ImportSkillsBench.md +11 -5
package/skill/Workflows/Ingest.md +43 -36
package/skill/Workflows/Initialize.md +44 -30
package/skill/Workflows/Orchestrate.md +139 -0
package/skill/Workflows/Replay.md +39 -18
package/skill/Workflows/Rollback.md +3 -3
package/skill/Workflows/Schedule.md +61 -0
package/skill/Workflows/Sync.md +88 -0
package/skill/Workflows/UnitTest.md +34 -22
package/skill/Workflows/Watch.md +14 -4
package/skill/Workflows/Workflows.md +129 -0
package/skill/assets/activation-rules-default.json +26 -0
package/skill/assets/multi-skill-settings.json +63 -0
package/skill/assets/single-skill-settings.json +57 -0
package/skill/references/invocation-taxonomy.md +2 -2
package/skill/references/logs.md +164 -2
package/skill/references/setup-patterns.md +65 -0
package/skill/references/version-history.md +40 -0
package/skill/settings_snippet.json +1 -1
package/templates/multi-skill-settings.json +7 -7
package/templates/single-skill-settings.json +6 -6
package/dashboard/index.html +0 -1680

package/dashboard/index.html DELETED Viewed

@@ -1,1680 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>selftune — Dashboard</title>
-  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>
-  <style>
-    :root {
-      --bg: #faf9f5;
-      --surface: #ffffff;
-      --border: #e8e6dc;
-      --text: #141413;
-      --text-muted: #b0aea5;
-      --text-secondary: #6b6961;
-      --accent: #d97757;
-      --accent-hover: #c4613f;
-      --green: #788c5d;
-      --green-bg: #eef2e8;
-      --red: #c44;
-      --red-bg: #fceaea;
-      --blue: #4a7fd4;
-      --blue-bg: #e8f0fa;
-      --amber: #c49133;
-      --amber-bg: #fdf4e3;
-      --header-bg: #141413;
-      --header-text: #faf9f5;
-      --radius: 6px;
-      --mono: 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
-    }
-    * { box-sizing: border-box; margin: 0; padding: 0; }
-    body {
-      font-family: 'Lora', Georgia, serif;
-      background: var(--bg);
-      color: var(--text);
-      height: 100vh;
-      display: flex;
-      flex-direction: column;
-    }
-    /* ---- Header ---- */
-    .header {
-      background: var(--header-bg);
-      color: var(--header-text);
-      padding: 1rem 2rem;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      flex-shrink: 0;
-    }
-    .header-left { display: flex; align-items: center; gap: 1rem; }
-    .header h1 {
-      font-family: 'Poppins', sans-serif;
-      font-size: 1.25rem;
-      font-weight: 600;
-      letter-spacing: -0.01em;
-    }
-    .header h1 span { color: var(--accent); }
-    .header .version {
-      font-family: var(--mono);
-      font-size: 0.6875rem;
-      opacity: 0.5;
-      padding: 0.15rem 0.5rem;
-      border: 1px solid rgba(255,255,255,0.15);
-      border-radius: 9999px;
-    }
-    .header .status {
-      font-size: 0.8rem;
-      opacity: 0.7;
-      font-family: 'Poppins', sans-serif;
-    }
-    .header .status .count {
-      color: var(--accent);
-      font-weight: 600;
-    }
-    /* ---- Main ---- */
-    .main {
-      flex: 1;
-      overflow-y: auto;
-      padding: 1.5rem 2rem;
-      display: flex;
-      flex-direction: column;
-      gap: 1.25rem;
-    }
-    /* ---- Drop zone ---- */
-    .drop-zone {
-      border: 2px dashed var(--border);
-      border-radius: var(--radius);
-      padding: 3rem 2rem;
-      text-align: center;
-      transition: all 0.2s;
-      cursor: pointer;
-      background: var(--surface);
-    }
-    .drop-zone:hover, .drop-zone.drag-over {
-      border-color: var(--accent);
-      background: rgba(217, 119, 87, 0.04);
-    }
-    .drop-zone h2 {
-      font-family: 'Poppins', sans-serif;
-      font-size: 1.125rem;
-      font-weight: 600;
-      margin-bottom: 0.5rem;
-    }
-    .drop-zone p {
-      color: var(--text-muted);
-      font-size: 0.875rem;
-      margin-bottom: 1rem;
-    }
-    .drop-zone .file-types {
-      display: flex;
-      justify-content: center;
-      gap: 0.5rem;
-      flex-wrap: wrap;
-    }
-    .file-tag {
-      display: inline-block;
-      padding: 0.2rem 0.625rem;
-      border-radius: 9999px;
-      font-family: var(--mono);
-      font-size: 0.6875rem;
-      font-weight: 500;
-      background: var(--bg);
-      color: var(--text-secondary);
-      border: 1px solid var(--border);
-    }
-    .file-tag.loaded {
-      background: var(--green-bg);
-      color: var(--green);
-      border-color: var(--green);
-    }
-    .drop-zone input[type="file"] { display: none; }
-    /* ---- KPI row ---- */
-    .kpi-row {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-      gap: 1rem;
-    }
-    .kpi-card {
-      background: var(--surface);
-      border: 1px solid var(--border);
-      border-radius: var(--radius);
-      padding: 1.25rem;
-    }
-    .kpi-label {
-      font-family: 'Poppins', sans-serif;
-      font-size: 0.6875rem;
-      font-weight: 500;
-      text-transform: uppercase;
-      letter-spacing: 0.05em;
-      color: var(--text-muted);
-      margin-bottom: 0.5rem;
-    }
-    .kpi-value {
-      font-family: 'Poppins', sans-serif;
-      font-size: 2rem;
-      font-weight: 700;
-      line-height: 1;
-    }
-    .kpi-sub {
-      font-size: 0.75rem;
-      color: var(--text-muted);
-      margin-top: 0.375rem;
-    }
-    /* ---- Section cards ---- */
-    .section {
-      background: var(--surface);
-      border: 1px solid var(--border);
-      border-radius: var(--radius);
-    }
-    .section-header {
-      font-family: 'Poppins', sans-serif;
-      padding: 0.75rem 1rem;
-      font-size: 0.75rem;
-      font-weight: 500;
-      text-transform: uppercase;
-      letter-spacing: 0.05em;
-      color: var(--text-muted);
-      border-bottom: 1px solid var(--border);
-      background: var(--bg);
-      border-radius: var(--radius) var(--radius) 0 0;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    }
-    .section-body { padding: 1rem; }
-    /* ---- Chart containers ---- */
-    .chart-container {
-      position: relative;
-      height: 280px;
-      width: 100%;
-    }
-    /* ---- Badges ---- */
-    .badge {
-      display: inline-block;
-      padding: 0.125rem 0.5rem;
-      border-radius: 9999px;
-      font-family: 'Poppins', sans-serif;
-      font-size: 0.6875rem;
-      font-weight: 600;
-    }
-    .badge-green { background: var(--green-bg); color: var(--green); }
-    .badge-red { background: var(--red-bg); color: var(--red); }
-    .badge-blue { background: var(--blue-bg); color: var(--blue); }
-    .badge-amber { background: var(--amber-bg); color: var(--amber); }
-    /* ---- Skill Health Grid ---- */
-    .skill-health-grid {
-      width: 100%;
-    }
-    .skill-health-row {
-      display: grid;
-      grid-template-columns: 180px 1fr 50px 80px 100px;
-      align-items: center;
-      gap: 0.75rem;
-      padding: 0.625rem 1rem;
-      border-bottom: 1px solid var(--border);
-      cursor: pointer;
-      transition: background 0.1s;
-    }
-    .skill-health-row:hover {
-      background: var(--bg);
-    }
-    .skill-health-row.selected {
-      background: var(--blue-bg);
-      border-left: 3px solid var(--blue);
-    }
-    .skill-health-header {
-      display: grid;
-      grid-template-columns: 180px 1fr 50px 80px 100px;
-      gap: 0.75rem;
-      padding: 0.5rem 1rem;
-      font-family: 'Poppins', sans-serif;
-      font-size: 0.6875rem;
-      font-weight: 500;
-      text-transform: uppercase;
-      letter-spacing: 0.04em;
-      color: var(--text-muted);
-      background: var(--bg);
-      border-bottom: 1px solid var(--border);
-    }
-    .skill-name {
-      font-family: var(--mono);
-      font-size: 0.75rem;
-      font-weight: 500;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-    .pass-rate-bar {
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-    }
-    .pass-rate-track {
-      flex: 1;
-      height: 18px;
-      background: var(--bg);
-      border-radius: 3px;
-      overflow: hidden;
-    }
-    .pass-rate-fill {
-      height: 100%;
-      border-radius: 3px;
-      transition: width 0.4s ease;
-    }
-    .pass-rate-fill.healthy { background: var(--green); }
-    .pass-rate-fill.drifting { background: var(--amber); }
-    .pass-rate-fill.warning { background: var(--amber); }
-    .pass-rate-fill.regressed { background: var(--red); }
-    .pass-rate-fill.critical { background: var(--red); }
-    .pass-rate-fill.unknown { background: #ccc; }
-    .pass-rate-label {
-      font-family: 'Poppins', sans-serif;
-      font-size: 0.75rem;
-      font-weight: 600;
-      min-width: 42px;
-      text-align: right;
-    }
-    .trend-arrow {
-      font-size: 1rem;
-      text-align: center;
-    }
-    .trend-up { color: var(--green); }
-    .trend-down { color: var(--red); }
-    .trend-flat { color: var(--text-muted); }
-    .missed-count {
-      font-family: 'Poppins', sans-serif;
-      font-size: 0.75rem;
-      text-align: center;
-    }
-    /* ---- Drill-down panel ---- */
-    .drill-down-panel {
-      display: none;
-      background: var(--surface);
-      border: 1px solid var(--border);
-      border-radius: var(--radius);
-    }
-    .drill-down-panel.visible {
-      display: block;
-    }
-    .drill-down-header {
-      font-family: 'Poppins', sans-serif;
-      padding: 0.75rem 1rem;
-      font-size: 0.875rem;
-      font-weight: 600;
-      border-bottom: 1px solid var(--border);
-      background: var(--bg);
-      border-radius: var(--radius) var(--radius) 0 0;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    }
-    .drill-down-close {
-      font-family: 'Poppins', sans-serif;
-      font-size: 0.75rem;
-      padding: 0.25rem 0.75rem;
-      border: 1px solid var(--border);
-      border-radius: var(--radius);
-      background: var(--surface);
-      color: var(--text-secondary);
-      cursor: pointer;
-    }
-    .drill-down-close:hover { border-color: var(--accent); color: var(--accent); }
-    .drill-down-content {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: 1rem;
-      padding: 1rem;
-    }
-    @media (max-width: 900px) {
-      .drill-down-content { grid-template-columns: 1fr; }
-    }
-    .drill-down-section { min-height: 200px; }
-    /* ---- Table ---- */
-    .data-table {
-      width: 100%;
-      border-collapse: collapse;
-      font-size: 0.8125rem;
-    }
-    .data-table th, .data-table td {
-      padding: 0.625rem 0.75rem;
-      text-align: left;
-      border-bottom: 1px solid var(--border);
-    }
-    .data-table th {
-      font-family: 'Poppins', sans-serif;
-      font-weight: 500;
-      font-size: 0.6875rem;
-      text-transform: uppercase;
-      letter-spacing: 0.04em;
-      color: var(--text-muted);
-      background: var(--bg);
-      position: sticky;
-      top: 0;
-    }
-    .data-table tr:hover { background: var(--bg); }
-    .data-table td.mono { font-family: var(--mono); font-size: 0.75rem; }
-    /* ---- Timeline ---- */
-    .timeline-item {
-      display: flex;
-      gap: 1rem;
-      padding: 0.75rem 0;
-      border-bottom: 1px solid var(--border);
-      font-size: 0.8125rem;
-    }
-    .timeline-item:last-child { border-bottom: none; }
-    .timeline-date {
-      font-family: var(--mono);
-      font-size: 0.6875rem;
-      color: var(--text-muted);
-      min-width: 140px;
-      flex-shrink: 0;
-    }
-    .timeline-action { font-weight: 500; }
-    /* ---- Empty state ---- */
-    .empty-state {
-      color: var(--text-muted);
-      font-style: italic;
-      padding: 2rem;
-      text-align: center;
-    }
-    /* ---- Table scroll wrapper ---- */
-    .table-scroll {
-      max-height: 400px;
-      overflow-y: auto;
-    }
-    /* ---- Export button ---- */
-    .export-btn {
-      font-family: 'Poppins', sans-serif;
-      font-size: 0.75rem;
-      font-weight: 500;
-      padding: 0.4rem 1rem;
-      border: 1px solid var(--border);
-      border-radius: var(--radius);
-      background: var(--surface);
-      color: var(--text-secondary);
-      cursor: pointer;
-      transition: all 0.15s;
-    }
-    .export-btn:hover {
-      border-color: var(--accent);
-      color: var(--accent);
-    }
-    /* ---- Live indicator ---- */
-    .live-indicator {
-      display: inline-flex;
-      align-items: center;
-      gap: 0.375rem;
-      font-family: var(--mono);
-      font-size: 0.6875rem;
-      color: var(--green);
-    }
-    .live-dot {
-      width: 6px;
-      height: 6px;
-      border-radius: 50%;
-      background: var(--green);
-      animation: pulse 2s ease-in-out infinite;
-    }
-    @keyframes pulse {
-      0%, 100% { opacity: 1; }
-      50% { opacity: 0.4; }
-    }
-    /* ---- Action buttons ---- */
-    .action-btn {
-      font-family: 'Poppins', sans-serif;
-      font-size: 0.6875rem;
-      font-weight: 500;
-      padding: 0.3rem 0.75rem;
-      border: 1px solid var(--border);
-      border-radius: var(--radius);
-      background: var(--surface);
-      color: var(--text-secondary);
-      cursor: pointer;
-      transition: all 0.15s;
-      white-space: nowrap;
-    }
-    .action-btn:hover:not(:disabled) {
-      border-color: var(--accent);
-      color: var(--accent);
-    }
-    .action-btn:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-    .action-btn.loading {
-      position: relative;
-      color: transparent;
-    }
-    .action-btn.loading::after {
-      content: '';
-      position: absolute;
-      inset: 0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: var(--accent);
-      font-size: 0.625rem;
-    }
-    .action-btn-group {
-      display: flex;
-      gap: 0.375rem;
-      flex-wrap: wrap;
-    }
-    .action-result {
-      font-family: var(--mono);
-      font-size: 0.6875rem;
-      padding: 0.5rem 0.75rem;
-      margin-top: 0.375rem;
-      border-radius: var(--radius);
-      max-height: 120px;
-      overflow-y: auto;
-      display: none;
-    }
-    .action-result.visible { display: block; }
-    .action-result.success { background: var(--green-bg); color: var(--green); }
-    .action-result.error { background: var(--red-bg); color: var(--red); }
-    /* ---- Evolution timeline ---- */
-    .evo-timeline {
-      position: relative;
-      padding-left: 1.5rem;
-    }
-    .evo-timeline::before {
-      content: '';
-      position: absolute;
-      left: 0.375rem;
-      top: 0;
-      bottom: 0;
-      width: 2px;
-      background: var(--border);
-    }
-    .evo-timeline-item {
-      position: relative;
-      padding: 0.625rem 0;
-      padding-left: 0.75rem;
-      border-bottom: none;
-    }
-    .evo-timeline-item::before {
-      content: '';
-      position: absolute;
-      left: -1.125rem;
-      top: 1rem;
-      width: 8px;
-      height: 8px;
-      border-radius: 50%;
-      background: var(--border);
-      border: 2px solid var(--surface);
-    }
-    .evo-timeline-item.action-evolved::before { background: var(--green); }
-    .evo-timeline-item.action-rolled-back::before { background: var(--red); }
-    .evo-timeline-item.action-watched::before { background: var(--blue); }
-    .evo-timeline-meta {
-      font-family: var(--mono);
-      font-size: 0.6875rem;
-      color: var(--text-muted);
-      margin-bottom: 0.25rem;
-    }
-    .evo-timeline-body {
-      font-size: 0.8125rem;
-      color: var(--text);
-    }
-    .evo-timeline-rationale {
-      font-size: 0.75rem;
-      color: var(--text-secondary);
-      margin-top: 0.125rem;
-    }
-    /* ---- Search/Filter ---- */
-    .search-filter {
-      font-family: var(--mono);
-      font-size: 0.8125rem;
-      padding: 0.5rem 0.75rem;
-      border: 1px solid var(--border);
-      border-radius: var(--radius);
-      background: var(--surface);
-      color: var(--text);
-      width: 100%;
-      max-width: 320px;
-      outline: none;
-      transition: border-color 0.15s;
-    }
-    .search-filter:focus {
-      border-color: var(--accent);
-    }
-    .search-filter::placeholder {
-      color: var(--text-muted);
-    }
-    /* ---- Time Period Selector ---- */
-    .time-period-selector {
-      display: inline-flex;
-      gap: 0;
-      border: 1px solid var(--border);
-      border-radius: var(--radius);
-      overflow: hidden;
-    }
-    .time-period-selector .period-btn {
-      font-family: 'Poppins', sans-serif;
-      font-size: 0.6875rem;
-      font-weight: 500;
-      padding: 0.3rem 0.75rem;
-      border: none;
-      background: var(--surface);
-      color: var(--text-secondary);
-      cursor: pointer;
-      transition: all 0.15s;
-      border-right: 1px solid var(--border);
-    }
-    .time-period-selector .period-btn:last-child {
-      border-right: none;
-    }
-    .time-period-selector .period-btn:hover {
-      background: var(--bg);
-      color: var(--accent);
-    }
-    .time-period-selector .period-btn.active {
-      background: var(--accent);
-      color: #fff;
-    }
-    /* ---- Eval Feed ---- */
-    .eval-feed {
-      width: 100%;
-      border-collapse: collapse;
-      font-size: 0.8125rem;
-    }
-    .eval-feed th, .eval-feed td {
-      padding: 0.5rem 0.75rem;
-      text-align: left;
-      border-bottom: 1px solid var(--border);
-    }
-    .eval-feed th {
-      font-family: 'Poppins', sans-serif;
-      font-weight: 500;
-      font-size: 0.6875rem;
-      text-transform: uppercase;
-      letter-spacing: 0.04em;
-      color: var(--text-muted);
-      background: var(--bg);
-      position: sticky;
-      top: 0;
-    }
-    .eval-feed tr:hover { background: var(--bg); }
-    .eval-feed td.mono { font-family: var(--mono); font-size: 0.75rem; }
-    /* ---- 4-state badge colors ---- */
-    .badge-warning { background: var(--amber-bg); color: var(--amber); }
-    .badge-critical { background: var(--red-bg); color: var(--red); }
-    .badge-healthy { background: var(--green-bg); color: var(--green); }
-    .badge-unknown { background: #f0f0ee; color: #999; }
-  </style>
-</head>
-<body>
-<!-- ===== Header ===== -->
-<div class="header">
-  <div class="header-left">
-    <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 250 250" fill="none" style="flex-shrink:0" aria-hidden="true">
-      <path d="M 190.16,31.49 C 187.91,29.88 184.51,32.19 185.88,35.16 C 186.31,36.11 187.08,36.54 187.71,37.01 C 218.75,59.86 237.63,92.71 237.63,128.82 C 237.63,175.99 205.12,218.56 153.82,234.69 C 149.89,235.93 150.91,241.71 154.91,240.66 C 205.98,226.96 243.01,181.94 243,128.45 C 242.99,90.87 223.47,56.18 190.16,31.49 Z" fill="currentColor"/>
-      <path d="M 125.19,243.91 C 138.08,243.91 147.18,236.44 151.21,225.01 C 193.72,217.79 226.98,184.02 226.98,140.81 C 226.98,121.17 219.82,103.78 209.93,87.04 C 191.42,55.45 165.15,34.72 117.71,28.65 C 112.91,28.04 113.77,34.35 117.19,34.82 C 161.67,39.33 185.84,56.71 203.76,86.42 C 213.87,103.68 220.68,119.61 220.68,140.81 C 220.68,179.96 190.81,211.95 148.71,219.16 C 147.11,219.47 146.27,220.32 145.92,221.8 C 142.95,231.11 135.72,238.02 125.19,237.66 C 64.48,237.66 11.67,191.61 11.67,127.51 C 11.67,79.61 44.82,36.38 93.89,27.77 L 94.11,27.73 L 94.38,26.64 C 97.04,16.61 104.57,11.82 114.19,11.82 C 134.12,13.36 152.91,18.15 170.48,26.08 C 171.92,26.78 173.81,27.09 174.76,25.59 C 176.05,23.72 175.31,21.07 173.01,20.34 C 154.78,11.96 137.21,7.17 114.47,6 H 113.52 C 101.91,6 93.46,12.16 89.49,21.78 C 42.36,31.26 6.17,74.76 6.17,128.08 C 6.17,190.05 57.92,243.91 125.19,243.91 Z" fill="currentColor"/>
-      <path d="M 93.67,40.64 C 100.51,52.07 109.54,51.33 114.05,52.17 C 128.72,53.91 141.48,55.78 157.38,62.16 C 162.72,64.47 162.29,58.19 159.18,57.01 C 145.11,51.33 132.48,49.79 111.31,47.48 C 101.83,46.29 95.45,41.18 93.75,32.81 C 55.21,39.46 22.06,72.17 22.06,112.48 C 22.06,131.98 30.36,149.82 43.26,164.49 C 46.23,167.59 50.19,164.13 48.32,161.02 C 36.21,145.54 28.42,129.78 28.42,112.4 C 28.42,79.11 54.91,48.36 89.91,40.36 C 90.76,40.15 91.04,39.87 91.62,40.01 C 92.62,40.01 93.04,39.65 93.67,40.64 Z" fill="currentColor"/>
-      <path d="M 152.72,82.77 C 126.61,82.77 113.07,99.44 103.01,119.33 C 100.56,123.36 103.74,125.03 105.61,123.92 C 107.15,123.22 107.89,121.05 108.73,119.61 C 118.22,102.16 130.33,88.56 152.72,88.56 C 181.62,88.56 201.91,116.01 201.91,147.31 C 201.91,175.12 183.47,199.96 152.51,205.75 C 151.84,205.96 151.63,206.03 151.56,205.54 C 147.74,195.37 139.36,188.15 128.07,186.48 C 113.2,184.24 101.23,182.36 83.8,176.81 C 79.3,175.48 77.91,182.36 82.41,183.09 C 97.21,187.46 108.09,189.47 126.25,192.65 C 136.78,194.31 145.41,201.71 147.11,210.95 C 147.74,213.05 149.13,213.41 150.15,213.26 C 183.75,208.61 208.26,180.93 208.26,147.24 C 208.26,115.06 186.94,82.77 152.72,82.77 Z" fill="currentColor"/>
-      <path d="M 129.77,105.21 C 122.93,112.05 118.97,122.73 113.77,130.41 C 111.31,133.45 114.56,136.63 117.46,134.46 C 123.75,126.23 127.43,115.62 135.15,108.71 C 138.22,105.81 134.73,101.09 129.77,105.21 Z" fill="currentColor"/>
-      <path d="M 136.78,120.31 C 127.71,136.71 120.12,154.91 93.74,154.91 C 66.07,154.91 47.76,128.53 47.76,104.78 C 47.76,84.47 58.57,66.08 77.66,56.25 C 82.23,54.21 79.85,47.76 75.34,49.93 C 54.77,59.72 42.01,80.11 42.01,104.71 C 42.01,131.77 61.86,161.31 93.67,161.31 C 114.77,161.31 128.91,147.24 139.86,124.06 C 142.76,120.45 139.15,117.73 136.78,120.31 Z" fill="currentColor"/>
-      <path d="M 30.73,154.7 C 27.76,152.97 23.87,155.93 25.41,158.76 C 41.73,188.36 68.94,199.79 105.75,206.41 C 112.25,207.66 122.07,208.75 123.46,209.03 C 128.07,209.95 128.07,220.18 121.78,220.18 C 107.64,218.94 92.06,215.98 76.23,211.33 C 72.13,210.24 71.04,216.69 75.27,217.64 C 90.41,222.22 103.95,224.74 120.47,226.54 C 133.73,226.54 136.56,209.03 126.03,203.38 C 123.75,202.13 122.73,202.56 112.04,200.76 C 78.09,195.04 54.06,188.98 32.12,155.65 C 31.77,155.23 31.28,154.91 30.73,154.7 Z" fill="currentColor"/>
-    </svg>
-    <h1>self<span>tune</span></h1>
-    <span class="version">v0.1.4</span>
-  </div>
-  <div class="status" id="headerStatus">Drop log files to get started</div>
-</div>
-<!-- ===== Content ===== -->
-<div class="main" id="mainContent">
-  <!-- Drop zone (shown when no data) -->
-  <div class="drop-zone" id="dropZone" role="button" tabindex="0" aria-label="Load log files by clicking or dragging">
-    <h2>Load Your Data</h2>
-    <p>Drag &amp; drop your JSONL log files here, or click to browse.<br>
-       Files are processed locally &mdash; nothing leaves your machine.</p>
-    <div class="file-types">
-      <span class="file-tag" id="tag-telemetry">session_telemetry_log.jsonl</span>
-      <span class="file-tag" id="tag-skill">skill_usage_log.jsonl</span>
-      <span class="file-tag" id="tag-query">all_queries_log.jsonl</span>
-      <span class="file-tag" id="tag-evolution">evolution_audit_log.jsonl</span>
-    </div>
-    <input type="file" id="fileInput" multiple accept=".jsonl,.json">
-  </div>
-  <!-- ===== SYSTEM HEALTH SUMMARY ===== -->
-  <div id="healthSummary" style="display:none;">
-    <div class="kpi-row" id="kpiRow">
-      <div class="kpi-card">
-        <div class="kpi-label">Skills Monitored</div>
-        <div class="kpi-value" id="kpi-skills-monitored">0</div>
-        <div class="kpi-sub" id="kpi-skills-sub"></div>
-      </div>
-      <div class="kpi-card">
-        <div class="kpi-label">Avg Pass Rate</div>
-        <div class="kpi-value" id="kpi-avg-pass-rate">--</div>
-        <div class="kpi-sub" id="kpi-pass-rate-sub"></div>
-      </div>
-      <div class="kpi-card">
-        <div class="kpi-label">Regressions</div>
-        <div class="kpi-value" id="kpi-regressions">0</div>
-        <div class="kpi-sub" id="kpi-regressions-sub"></div>
-      </div>
-      <div class="kpi-card">
-        <div class="kpi-label">Unmatched Queries</div>
-        <div class="kpi-value" id="kpi-unmatched">0</div>
-        <div class="kpi-sub" id="kpi-unmatched-sub"></div>
-      </div>
-      <div class="kpi-card">
-        <div class="kpi-label">Sessions</div>
-        <div class="kpi-value" id="kpi-sessions">0</div>
-        <div class="kpi-sub" id="kpi-sessions-sub"></div>
-      </div>
-      <div class="kpi-card">
-        <div class="kpi-label">Pending Proposals</div>
-        <div class="kpi-value" id="kpi-pending">0</div>
-        <div class="kpi-sub" id="kpi-pending-sub"></div>
-      </div>
-    </div>
-  </div>
-  <!-- ===== SKILL HEALTH GRID ===== -->
-  <input id="skillSearchInput" placeholder="Filter skills..." class="search-filter" aria-label="Filter skills by name" style="margin-bottom:0.5rem;display:none;">
-  <div class="section" id="skillHealthSection" style="display:none;">
-    <div class="section-header">
-      <span>Skill Health Grid</span>
-      <button class="export-btn" id="exportCsvBtn">Export CSV</button>
-    </div>
-    <div class="skill-health-header">
-      <span>Skill</span>
-      <span>Pass Rate</span>
-      <span>Trend</span>
-      <span>Missed</span>
-      <span>Status</span>
-    </div>
-    <div class="section-body skill-health-grid" id="skillHealthGrid">
-      <div class="empty-state">Load data to see skill health</div>
-    </div>
-  </div>
-  <!-- ===== DRILL-DOWN PANEL ===== -->
-  <div class="drill-down-panel" id="drillDownPanel">
-    <div class="drill-down-header">
-      <span id="drillDownTitle">Skill Details</span>
-      <button class="drill-down-close" id="drillDownClose">Close</button>
-    </div>
-    <div class="drill-down-content">
-      <div class="drill-down-section">
-        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:0.75rem;">
-          <h4 style="font-family:'Poppins',sans-serif;font-size:0.75rem;font-weight:500;text-transform:uppercase;letter-spacing:0.04em;color:var(--text-muted);">Pass Rate Over Time</h4>
-          <div class="time-period-selector" id="timePeriodSelector">
-            <button class="period-btn" data-days="7">7d</button>
-            <button class="period-btn" data-days="30">30d</button>
-            <button class="period-btn" data-days="90">90d</button>
-            <button class="period-btn active" data-days="0">All</button>
-          </div>
-        </div>
-        <div class="chart-container"><canvas id="chartDrillPassRate"></canvas></div>
-      </div>
-      <div class="drill-down-section">
-        <h4 style="font-family:'Poppins',sans-serif;font-size:0.75rem;font-weight:500;text-transform:uppercase;letter-spacing:0.04em;color:var(--text-muted);margin-bottom:0.75rem;">Missed Queries</h4>
-        <div class="table-scroll" style="max-height:260px;">
-          <table class="data-table" id="drillMissedTable">
-            <thead><tr><th>Timestamp</th><th>Session</th><th>Query</th></tr></thead>
-            <tbody></tbody>
-          </table>
-        </div>
-      </div>
-      <div class="drill-down-section">
-        <h4 style="font-family:'Poppins',sans-serif;font-size:0.75rem;font-weight:500;text-transform:uppercase;letter-spacing:0.04em;color:var(--text-muted);margin-bottom:0.75rem;">Evolution History</h4>
-        <div id="drillEvoTimeline" class="table-scroll" style="max-height:260px;">
-          <div class="empty-state">No evolution history</div>
-        </div>
-      </div>
-      <div class="drill-down-section">
-        <h4 style="font-family:'Poppins',sans-serif;font-size:0.75rem;font-weight:500;text-transform:uppercase;letter-spacing:0.04em;color:var(--text-muted);margin-bottom:0.75rem;">Sessions</h4>
-        <div class="table-scroll" style="max-height:260px;">
-          <table class="data-table" id="drillSessionsTable">
-            <thead><tr><th>Timestamp</th><th>Tools</th><th>Skills</th><th>Errors</th></tr></thead>
-            <tbody></tbody>
-          </table>
-        </div>
-      </div>
-      <div class="drill-down-section">
-        <h4 style="font-family:'Poppins',sans-serif;font-size:0.75rem;font-weight:500;text-transform:uppercase;letter-spacing:0.04em;color:var(--text-muted);margin-bottom:0.75rem;">Evaluation Feed</h4>
-        <div class="table-scroll" style="max-height:260px;">
-          <table class="eval-feed" id="drillEvalFeed">
-            <thead><tr><th>Time</th><th>Query</th><th>Triggered</th><th>Type</th></tr></thead>
-            <tbody></tbody>
-          </table>
-        </div>
-      </div>
-      <div class="drill-down-section">
-        <h4 style="font-family:'Poppins',sans-serif;font-size:0.75rem;font-weight:500;text-transform:uppercase;letter-spacing:0.04em;color:var(--text-muted);margin-bottom:0.75rem;">Invocation Breakdown</h4>
-        <div class="chart-container"><canvas id="chartInvocationBreakdown"></canvas></div>
-      </div>
-    </div>
-  </div>
-  <!-- ===== UNMATCHED QUERIES ===== -->
-  <div class="section" id="unmatchedSection" style="display:none;">
-    <div class="section-header">Unmatched Queries</div>
-    <div class="section-body">
-      <div class="table-scroll">
-        <table class="data-table" id="unmatchedTable">
-          <thead><tr><th>Timestamp</th><th>Session</th><th>Query</th></tr></thead>
-          <tbody></tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-  <!-- ===== PENDING PROPOSALS ===== -->
-  <div class="section" id="pendingSection" style="display:none;">
-    <div class="section-header">Pending Proposals</div>
-    <div class="section-body" id="pendingProposals">
-      <div class="empty-state">No pending proposals</div>
-    </div>
-  </div>
-  <!-- ===== SKILL ACTIONS (live mode only) ===== -->
-  <div class="section" id="actionsSection" style="display:none;">
-    <div class="section-header">
-      <span>Skill Actions</span>
-      <span class="live-indicator" id="liveIndicator"><span class="live-dot"></span> LIVE</span>
-    </div>
-    <div class="section-body" id="actionsBody">
-      <div class="empty-state">Select a skill from the health grid to see actions</div>
-    </div>
-  </div>
-  <!-- ===== EVOLUTION TIMELINE (live mode only) ===== -->
-  <div class="section" id="evoTimelineSection" style="display:none;">
-    <div class="section-header">Evolution Timeline</div>
-    <div class="section-body">
-      <div class="evo-timeline" id="evoTimeline">
-        <div class="empty-state">No evolution decisions recorded</div>
-      </div>
-    </div>
-  </div>
-</div>
-<script>
-// ========================================================================
-// State
-// ========================================================================
-const state = {
-  telemetry: [],   // SessionTelemetryRecord[]
-  skills: [],      // SkillUsageRecord[]
-  queries: [],     // QueryLogRecord[]
-  evolution: [],   // EvolutionAuditEntry[]
-  computed: null,  // Pre-computed monitoring data (from CLI)
-};
-const charts = {};
-let selectedSkill = null;
-let selectedPeriodDays = 0; // 0 = All
-// ========================================================================
-// File identification
-// ========================================================================
-function identifyFile(name, firstLine) {
-  if (name.includes('session_telemetry')) return 'telemetry';
-  if (name.includes('skill_usage')) return 'skills';
-  if (name.includes('all_queries')) return 'queries';
-  if (name.includes('evolution_audit')) return 'evolution';
-  if (firstLine) {
-    try {
-      const obj = JSON.parse(firstLine);
-      if ('total_tool_calls' in obj || 'transcript_path' in obj) return 'telemetry';
-      if ('skill_name' in obj && 'triggered' in obj) return 'skills';
-      if ('query' in obj && !('skill_name' in obj)) return 'queries';
-      if ('proposal_id' in obj && 'action' in obj) return 'evolution';
-    } catch {}
-  }
-  return null;
-}
-function parseJSONL(text) {
-  return text.trim().split('\n').filter(Boolean).map(line => {
-    try { return JSON.parse(line); }
-    catch { return null; }
-  }).filter(Boolean);
-}
-// ========================================================================
-// Client-side computed data generation (for drag-drop mode)
-// ========================================================================
-const REGRESSION_THRESHOLD = 0.4;
-const DEFAULT_BASELINE_PASS_RATE = 0.5;
-function computeClientSide() {
-  const skillNames = [...new Set(state.skills.map(r => r.skill_name))];
-  const triggeredQueries = new Set(
-    state.skills.filter(r => r.triggered).map(r => r.query.toLowerCase().trim())
-  );
-  // Per-skill snapshots
-  const snapshots = {};
-  for (const name of skillNames) {
-    const skillRecords = state.skills.filter(r => r.skill_name === name);
-    const triggered = skillRecords.filter(r => r.triggered).length;
-    const total = state.queries.length;
-    const passRate = total === 0 ? 1.0 : triggered / total;
-    const falseNegatives = skillRecords.filter(r => !r.triggered).length;
-    const fnRate = skillRecords.length === 0 ? 0 : falseNegatives / skillRecords.length;
-    snapshots[name] = {
-      timestamp: new Date().toISOString(),
-      skill_name: name,
-      window_sessions: state.telemetry.length,
-      pass_rate: passRate,
-      false_negative_rate: fnRate,
-      regression_detected: passRate < REGRESSION_THRESHOLD,
-      baseline_pass_rate: DEFAULT_BASELINE_PASS_RATE,
-    };
-  }
-  // Unmatched queries
-  const unmatched = state.queries.filter(q =>
-    !triggeredQueries.has(q.query.toLowerCase().trim())
-  ).map(q => ({ timestamp: q.timestamp, session_id: q.session_id, query: q.query }));
-  // Pending proposals
-  const proposalStatus = {};
-  for (const e of state.evolution) {
-    if (!proposalStatus[e.proposal_id]) proposalStatus[e.proposal_id] = [];
-    proposalStatus[e.proposal_id].push(e.action);
-  }
-  const seenProposals = new Set();
-  const pendingProposals = state.evolution.filter(e => {
-    if (e.action !== 'created' && e.action !== 'validated') return false;
-    const actions = proposalStatus[e.proposal_id] || [];
-    if (actions.includes('deployed') || actions.includes('rejected') || actions.includes('rolled_back')) return false;
-    if (seenProposals.has(e.proposal_id)) return false;
-    seenProposals.add(e.proposal_id);
-    return true;
-  });
-  return { snapshots, unmatched, pendingProposals };
-}
-// ========================================================================
-// File loading
-// ========================================================================
-async function handleFiles(files) {
-  for (const file of files) {
-    const text = await file.text();
-    const lines = text.trim().split('\n').filter(Boolean);
-    if (!lines.length) continue;
-    const type = identifyFile(file.name, lines[0]);
-    if (!type) { console.warn('Unknown file type:', file.name); continue; }
-    state[type] = parseJSONL(text);
-    const tag = document.getElementById(`tag-${type === 'skills' ? 'skill' : type}`);
-    if (tag) tag.classList.add('loaded');
-  }
-  state.computed = computeClientSide();
-  refreshAll();
-}
-// ========================================================================
-// Drag & drop + click
-// ========================================================================
-const dropZone = document.getElementById('dropZone');
-const fileInput = document.getElementById('fileInput');
-dropZone.addEventListener('click', () => fileInput.click());
-dropZone.addEventListener('keydown', e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); fileInput.click(); } });
-fileInput.addEventListener('change', e => handleFiles(e.target.files));
-dropZone.addEventListener('dragover', e => {
-  e.preventDefault();
-  dropZone.classList.add('drag-over');
-});
-dropZone.addEventListener('dragleave', () => dropZone.classList.remove('drag-over'));
-dropZone.addEventListener('drop', e => {
-  e.preventDefault();
-  dropZone.classList.remove('drag-over');
-  handleFiles(e.dataTransfer.files);
-});
-// ========================================================================
-// Data loading from embedded JSON (when served by CLI)
-// ========================================================================
-function loadEmbeddedData() {
-  const el = document.getElementById('embedded-data');
-  if (!el) return false;
-  try {
-    const data = JSON.parse(el.textContent);
-    if (data.telemetry) state.telemetry = data.telemetry;
-    if (data.skills) state.skills = data.skills;
-    if (data.queries) state.queries = data.queries;
-    if (data.evolution) state.evolution = data.evolution;
-    if (data.computed) {
-      state.computed = data.computed;
-    } else {
-      state.computed = computeClientSide();
-    }
-    return state.telemetry.length || state.skills.length || state.queries.length || state.evolution.length;
-  } catch { return false; }
-}
-// ========================================================================
-// Helpers
-// ========================================================================
-function toDate(ts) { return new Date(ts); }
-function formatDate(ts) {
-  const d = toDate(ts);
-  return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
-}
-function toDayKey(ts) { return new Date(ts).toISOString().slice(0, 10); }
-function formatTimestamp(ts) {
-  const d = toDate(ts);
-  return d.toLocaleString('en-US', {
-    month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit'
-  });
-}
-function truncate(s, max = 60) {
-  if (!s) return '\u2014';
-  return s.length > max ? s.slice(0, max) + '...' : s;
-}
-function escapeHtml(s) {
-  if (!s) return '';
-  return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
-}
-function groupByDay(records) {
-  const map = {};
-  for (const r of records) {
-    const day = toDayKey(r.timestamp);
-    map[day] = (map[day] || 0) + 1;
-  }
-  return map;
-}
-function getSkillStatus(passRate, regressionDetected) {
-  if (passRate === null || passRate === undefined) return 'unknown';
-  if (regressionDetected || passRate < 0.4) return 'critical';
-  if (passRate < 0.7) return 'warning';
-  return 'healthy';
-}
-function getStatusBadge(status) {
-  const map = {
-    healthy: '<span class="badge badge-healthy">Healthy</span>',
-    warning: '<span class="badge badge-warning">Warning</span>',
-    critical: '<span class="badge badge-critical">Critical</span>',
-    unknown: '<span class="badge badge-unknown">Unknown</span>',
-  };
-  return map[status] || '';
-}
-const CHART_COLORS = [
-  '#d97757', '#788c5d', '#4a7fd4', '#c49133', '#9b6bb0',
-  '#5ba3a3', '#d46a9f', '#7b8fa1', '#c47a5a', '#6b9b6b'
-];
-// ========================================================================
-// Refresh all views
-// ========================================================================
-function refreshAll() {
-  const hasData = state.telemetry.length || state.skills.length ||
-                  state.queries.length || state.evolution.length;
-  if (hasData) {
-    dropZone.style.display = 'none';
-    document.getElementById('healthSummary').style.display = 'block';
-    document.getElementById('skillHealthSection').style.display = 'block';
-    document.getElementById('skillSearchInput').style.display = 'block';
-  }
-  updateHeader();
-  updateHealthSummary();
-  updateSkillHealthGrid();
-  updateUnmatched();
-  updatePending();
-}
-// ========================================================================
-// Header
-// ========================================================================
-function updateHeader() {
-  const parts = [];
-  if (state.telemetry.length) parts.push(`<span class="count">${state.telemetry.length}</span> sessions`);
-  if (state.skills.length) parts.push(`<span class="count">${state.skills.length}</span> skill events`);
-  if (state.queries.length) parts.push(`<span class="count">${state.queries.length}</span> queries`);
-  if (state.evolution.length) parts.push(`<span class="count">${state.evolution.length}</span> evolution actions`);
-  document.getElementById('headerStatus').innerHTML = parts.length ? parts.join(' &middot; ') : 'Drop log files to get started';
-}
-// ========================================================================
-// Health Summary KPIs
-// ========================================================================
-function updateHealthSummary() {
-  const computed = state.computed;
-  if (!computed) return;
-  const snapshots = computed.snapshots || {};
-  const skillNames = Object.keys(snapshots);
-  const regressions = skillNames.filter(n => snapshots[n].regression_detected);
-  document.getElementById('kpi-skills-monitored').textContent = skillNames.length;
-  document.getElementById('kpi-skills-sub').textContent =
-    regressions.length ? `${regressions.length} need attention` : 'all stable';
-  if (skillNames.length > 0) {
-    const avgPR = skillNames.reduce((sum, n) => sum + snapshots[n].pass_rate, 0) / skillNames.length;
-    document.getElementById('kpi-avg-pass-rate').textContent = (avgPR * 100).toFixed(0) + '%';
-    const status = getSkillStatus(avgPR, false);
-    document.getElementById('kpi-pass-rate-sub').textContent =
-      status === 'healthy' ? 'system healthy' : status === 'warning' ? 'needs monitoring' : status === 'critical' ? 'action required' : 'no data';
-  }
-  document.getElementById('kpi-regressions').textContent = regressions.length;
-  document.getElementById('kpi-regressions-sub').textContent =
-    regressions.length ? regressions.join(', ') : 'none detected';
-  const unmatched = computed.unmatched || [];
-  document.getElementById('kpi-unmatched').textContent = unmatched.length;
-  document.getElementById('kpi-unmatched-sub').textContent =
-    unmatched.length ? 'queries not matched to any skill' : 'all queries matched';
-  document.getElementById('kpi-sessions').textContent = state.telemetry.length;
-  if (state.telemetry.length) {
-    const sorted = [...state.telemetry].sort((a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime());
-    const first = formatDate(sorted[0].timestamp);
-    const last = formatDate(sorted[sorted.length - 1].timestamp);
-    document.getElementById('kpi-sessions-sub').textContent = first + ' \u2014 ' + last;
-  }
-  const pending = computed.pendingProposals || [];
-  document.getElementById('kpi-pending').textContent = pending.length;
-  document.getElementById('kpi-pending-sub').textContent =
-    pending.length ? 'awaiting deployment' : 'none pending';
-}
-// ========================================================================
-// Skill Health Grid
-// ========================================================================
-function updateSkillHealthGrid() {
-  const computed = state.computed;
-  if (!computed) return;
-  const snapshots = computed.snapshots || {};
-  const skillNames = Object.keys(snapshots);
-  if (!skillNames.length) return;
-  // Sort worst-first
-  const sorted = skillNames.sort((a, b) => {
-    const sa = snapshots[a];
-    const sb = snapshots[b];
-    if (sa.regression_detected && !sb.regression_detected) return -1;
-    if (!sa.regression_detected && sb.regression_detected) return 1;
-    return sa.pass_rate - sb.pass_rate;
-  });
-  const grid = document.getElementById('skillHealthGrid');
-  grid.innerHTML = sorted.map(name => {
-    const snap = snapshots[name];
-    const status = getSkillStatus(snap.pass_rate, snap.regression_detected);
-    const pct = (snap.pass_rate * 100).toFixed(0);
-    const missed = state.skills.filter(r => r.skill_name === name && !r.triggered).length;
-    const trend = snap.regression_detected ? '\u2193' : (snap.pass_rate >= snap.baseline_pass_rate ? '\u2191' : '\u2192');
-    const trendClass = snap.regression_detected ? 'trend-down' : (snap.pass_rate >= snap.baseline_pass_rate ? 'trend-up' : 'trend-flat');
-    const safeName = escapeHtml(name);
-    return `<div class="skill-health-row" data-skill="${safeName}" role="button" tabindex="0" aria-label="View details for skill ${safeName}">
-      <div class="skill-name" title="${safeName}">${safeName}</div>
-      <div class="pass-rate-bar">
-        <div class="pass-rate-track">
-          <div class="pass-rate-fill ${status}" style="width:${pct}%"></div>
-        </div>
-        <div class="pass-rate-label">${pct}%</div>
-      </div>
-      <div class="trend-arrow ${trendClass}">${trend}</div>
-      <div class="missed-count">${missed}</div>
-      <div>${getStatusBadge(status)}</div>
-    </div>`;
-  }).join('');
-  // Click + keyboard handlers for drill-down
-  grid.querySelectorAll('.skill-health-row').forEach(row => {
-    const handler = () => {
-      const skillName = row.dataset.skill;
-      grid.querySelectorAll('.skill-health-row').forEach(r => r.classList.remove('selected'));
-      row.classList.add('selected');
-      openDrillDown(skillName);
-    };
-    row.addEventListener('click', handler);
-    row.addEventListener('keydown', e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handler(); } });
-  });
-  // Reapply search filter after grid rebuild
-  const searchInput = document.getElementById('skillSearchInput');
-  if (searchInput && searchInput.value) {
-    const query = searchInput.value.toLowerCase();
-    grid.querySelectorAll('.skill-health-row').forEach(row => {
-      const name = (row.dataset.skill || '').toLowerCase();
-      row.style.display = name.includes(query) ? '' : 'none';
-    });
-  }
-}
-// ========================================================================
-// Drill-down panel
-// ========================================================================
-function openDrillDown(skillName) {
-  selectedSkill = skillName;
-  const panel = document.getElementById('drillDownPanel');
-  panel.classList.add('visible');
-  document.getElementById('drillDownTitle').textContent = `Skill: ${skillName}`;
-  // Pass rate over time chart
-  updateDrillPassRateChart(skillName);
-  updateDrillMissedQueries(skillName);
-  updateDrillEvolution(skillName);
-  updateDrillSessions(skillName);
-  updateDrillEvalFeed(skillName);
-  updateDrillInvocationBreakdown(skillName);
-}
-document.getElementById('drillDownClose').addEventListener('click', () => {
-  document.getElementById('drillDownPanel').classList.remove('visible');
-  document.getElementById('skillHealthGrid').querySelectorAll('.skill-health-row').forEach(r => r.classList.remove('selected'));
-  selectedSkill = null;
-});
-function updateDrillPassRateChart(skillName) {
-  // Group skill records by day and compute daily pass rate
-  const allRecords = state.skills.filter(r => r.skill_name === skillName);
-  const records = filterByPeriod(allRecords, selectedPeriodDays);
-  const byDay = {};
-  for (const r of records) {
-    const day = toDayKey(r.timestamp);
-    if (!byDay[day]) byDay[day] = { triggered: 0, total: 0 };
-    byDay[day].total++;
-    if (r.triggered) byDay[day].triggered++;
-  }
-  const dayKeys = Object.keys(byDay).sort();
-  const labels = dayKeys.map(d => formatDate(d + "T00:00:00Z"));
-  const data = dayKeys.map(d => ((byDay[d].triggered / byDay[d].total) * 100).toFixed(1));
-  // Deploy events as annotations
-  const deployDays = new Set(
-    state.evolution
-      .filter(e => e.action === 'deployed' && (e.details || '').toLowerCase().includes(skillName.toLowerCase()))
-      .map(e => toDayKey(e.timestamp))
-  );
-  const pointColors = dayKeys.map(d => deployDays.has(d) ? '#d97757' : '#788c5d');
-  const pointSizes = dayKeys.map(d => deployDays.has(d) ? 8 : 3);
-  if (charts.drillPassRate) charts.drillPassRate.destroy();
-  charts.drillPassRate = new Chart(document.getElementById('chartDrillPassRate'), {
-    type: 'line',
-    data: {
-      labels,
-      datasets: [{
-        label: 'Pass Rate %',
-        data,
-        borderColor: '#788c5d',
-        backgroundColor: 'rgba(120, 140, 93, 0.1)',
-        fill: true,
-        tension: 0.3,
-        pointRadius: pointSizes,
-        pointBackgroundColor: pointColors,
-      }]
-    },
-    options: {
-      responsive: true,
-      maintainAspectRatio: false,
-      plugins: { legend: { display: false } },
-      scales: {
-        y: { min: 0, max: 100, ticks: { callback: v => v + '%' } },
-        x: { grid: { display: false } }
-      }
-    }
-  });
-}
-function updateDrillMissedQueries(skillName) {
-  const missed = state.skills.filter(r => r.skill_name === skillName && !r.triggered);
-  const tbody = document.querySelector('#drillMissedTable tbody');
-  tbody.innerHTML = missed.slice(0, 50).map(r => `<tr>
-    <td class="mono">${escapeHtml(formatTimestamp(r.timestamp))}</td>
-    <td class="mono">${escapeHtml((r.session_id || '').slice(0, 8))}</td>
-    <td>${escapeHtml(truncate(r.query, 50))}</td>
-  </tr>`).join('') || '<tr><td colspan="3" class="empty-state">No missed queries</td></tr>';
-}
-function updateDrillEvolution(skillName) {
-  const needle = skillName.toLowerCase();
-  const entries = state.evolution.filter(e => (e.details || '').toLowerCase().includes(needle));
-  const container = document.getElementById('drillEvoTimeline');
-  const actionBadge = {
-    created: 'badge-blue', validated: 'badge-amber', deployed: 'badge-green',
-    rolled_back: 'badge-red', rejected: 'badge-red',
-  };
-  if (entries.length) {
-    const sorted = [...entries].sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp));
-    container.innerHTML = sorted.map(r => `<div class="timeline-item">
-      <div class="timeline-date">${escapeHtml(formatTimestamp(r.timestamp))}</div>
-      <div><span class="badge ${actionBadge[r.action] || 'badge-blue'}">${escapeHtml(r.action)}</span>
-        <span class="timeline-action" style="margin-left:0.5rem">${escapeHtml(r.proposal_id.slice(0, 8))}</span>
-      </div>
-      <div style="flex:1;color:var(--text-secondary);font-size:0.8125rem;">${escapeHtml(truncate(r.details, 60))}</div>
-    </div>`).join('');
-  } else {
-    container.innerHTML = '<div class="empty-state">No evolution history for this skill</div>';
-  }
-}
-function updateDrillSessions(skillName) {
-  const sessionIds = new Set(
-    state.skills.filter(r => r.skill_name === skillName).map(r => r.session_id)
-  );
-  const sessions = state.telemetry.filter(r => sessionIds.has(r.session_id));
-  const tbody = document.querySelector('#drillSessionsTable tbody');
-  const sorted = [...sessions].sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp));
-  tbody.innerHTML = sorted.slice(0, 30).map(r => {
-    const skills = (r.skills_triggered || []).join(', ') || '\u2014';
-    const errorCount = Number.isFinite(Number(r.errors_encountered)) ? Number(r.errors_encountered) : 0;
-    const totalToolCalls = Number.isFinite(Number(r.total_tool_calls)) ? Number(r.total_tool_calls) : 0;
-    const errorBadge = errorCount > 0
-      ? `<span class="badge badge-red">${errorCount}</span>`
-      : '<span class="badge badge-green">0</span>';
-    return `<tr>
-      <td class="mono">${escapeHtml(formatTimestamp(r.timestamp))}</td>
-      <td>${totalToolCalls}</td>
-      <td>${escapeHtml(truncate(skills, 30))}</td>
-      <td>${errorBadge}</td>
-    </tr>`;
-  }).join('') || '<tr><td colspan="4" class="empty-state">No sessions</td></tr>';
-}
-// ========================================================================
-// Unmatched queries section
-// ========================================================================
-function updateUnmatched() {
-  const computed = state.computed;
-  if (!computed) return;
-  const unmatched = computed.unmatched || [];
-  if (!unmatched.length) return;
-  document.getElementById('unmatchedSection').style.display = 'block';
-  const tbody = document.querySelector('#unmatchedTable tbody');
-  tbody.innerHTML = unmatched.slice(0, 100).map(q => `<tr>
-    <td class="mono">${escapeHtml(formatTimestamp(q.timestamp))}</td>
-    <td class="mono">${escapeHtml((q.session_id || '').slice(0, 8))}</td>
-    <td>${escapeHtml(truncate(q.query, 60))}</td>
-  </tr>`).join('');
-}
-// ========================================================================
-// Pending proposals section
-// ========================================================================
-function updatePending() {
-  const computed = state.computed;
-  if (!computed) return;
-  const pending = computed.pendingProposals || [];
-  if (!pending.length) return;
-  document.getElementById('pendingSection').style.display = 'block';
-  const container = document.getElementById('pendingProposals');
-  const actionBadge = {
-    created: 'badge-blue', validated: 'badge-amber',
-  };
-  container.innerHTML = pending.map(r => `<div class="timeline-item">
-    <div class="timeline-date">${escapeHtml(formatTimestamp(r.timestamp))}</div>
-    <div><span class="badge ${actionBadge[r.action] || 'badge-blue'}">${escapeHtml(r.action)}</span>
-      <span class="timeline-action" style="margin-left:0.5rem">${escapeHtml(r.proposal_id.slice(0, 8))}</span>
-    </div>
-    <div style="flex:1;color:var(--text-secondary);font-size:0.8125rem;">${escapeHtml(truncate(r.details, 80))}</div>
-  </div>`).join('');
-}
-// ========================================================================
-// CSV export
-// ========================================================================
-document.getElementById('exportCsvBtn').addEventListener('click', () => {
-  if (!state.computed || !state.computed.snapshots) return;
-  const snapshots = state.computed.snapshots;
-  const headers = ['skill_name','pass_rate','regression_detected','baseline_pass_rate','window_sessions','false_negative_rate'];
-  const rows = Object.keys(snapshots).map(name => {
-    const s = snapshots[name];
-    return headers.map(h => {
-      const v = s[h];
-      if (typeof v === 'boolean') return v ? 'true' : 'false';
-      if (typeof v === 'number') return v.toFixed(4);
-      if (typeof v === 'string' && (v.includes(',') || v.includes('"')))
-        return '"' + v.replace(/"/g, '""') + '"';
-      return v ?? '';
-    }).join(',');
-  });
-  const csv = [headers.join(','), ...rows].join('\n');
-  const blob = new Blob([csv], { type: 'text/csv' });
-  const a = document.createElement('a');
-  a.href = URL.createObjectURL(blob);
-  a.download = 'selftune-skill-health.csv';
-  a.click();
-});
-// ========================================================================
-// Live mode: SSE client + action buttons + evolution timeline
-// ========================================================================
-let sseSource = null;
-function isLiveMode() {
-  return window.__SELFTUNE_LIVE__ === true;
-}
-function startSSE() {
-  if (!isLiveMode()) return;
-  if (sseSource) { sseSource.close(); sseSource = null; }
-  sseSource = new EventSource('/api/events');
-  sseSource.addEventListener('data', (e) => {
-    try {
-      const data = JSON.parse(e.data);
-      if (data.telemetry) state.telemetry = data.telemetry;
-      if (data.skills) state.skills = data.skills;
-      if (data.queries) state.queries = data.queries;
-      if (data.evolution) state.evolution = data.evolution;
-      if (data.decisions) state.decisions = data.decisions;
-      if (data.computed) {
-        state.computed = data.computed;
-      } else {
-        state.computed = computeClientSide();
-      }
-      refreshAll();
-      updateEvolutionTimeline();
-    } catch (err) { console.warn('[selftune] SSE parse error:', err); }
-  });
-  sseSource.onerror = () => {
-    // Reconnect after 3 seconds on error
-    setTimeout(() => { if (isLiveMode()) startSSE(); }, 3000);
-  };
-}
-// Decisions state (populated from server in live mode)
-if (!state.decisions) state.decisions = [];
-function updateEvolutionTimeline() {
-  if (!isLiveMode()) return;
-  const decisions = state.decisions || [];
-  const section = document.getElementById('evoTimelineSection');
-  if (!section) return;
-  section.style.display = 'block';
-  const container = document.getElementById('evoTimeline');
-  if (!decisions.length) {
-    container.innerHTML = '<div class="empty-state">No evolution decisions recorded</div>';
-    return;
-  }
-  // Show most recent first
-  const sorted = [...decisions].reverse();
-  container.innerHTML = sorted.slice(0, 50).map(d => {
-    const actionClass = 'action-' + escapeHtml(d.action || '');
-    return `<div class="evo-timeline-item ${actionClass}">
-      <div class="evo-timeline-meta">${escapeHtml(formatTimestamp(d.timestamp))} &middot; ${escapeHtml(d.skillName)}</div>
-      <div class="evo-timeline-body">
-        <span class="badge ${d.action === 'evolved' ? 'badge-green' : d.action === 'rolled-back' ? 'badge-red' : 'badge-blue'}">${escapeHtml(d.action)}</span>
-        <span style="margin-left:0.375rem;">${escapeHtml(d.actionType)}</span>
-      </div>
-      <div class="evo-timeline-rationale">${escapeHtml(truncate(d.rationale, 100))}</div>
-    </div>`;
-  }).join('');
-}
-function showActionButtons(skillName) {
-  if (!isLiveMode()) return;
-  const section = document.getElementById('actionsSection');
-  const body = document.getElementById('actionsBody');
-  if (!section || !body) return;
-  section.style.display = 'block';
-  // Find skill path from skill records
-  const skillRecord = state.skills.find(r => r.skill_name === skillName);
-  const skillPath = skillRecord ? skillRecord.skill_path : '';
-  const safeSkill = escapeHtml(skillName);
-  const safeSkillPath = escapeHtml(skillPath);
-  body.innerHTML = `
-    <div style="margin-bottom:0.5rem;font-family:'Poppins',sans-serif;font-size:0.8125rem;font-weight:600;">${safeSkill}</div>
-    <div class="action-btn-group">
-      <button class="action-btn" id="btn-watch" data-skill="${safeSkill}" data-path="${safeSkillPath}">Watch</button>
-      <button class="action-btn" id="btn-evolve" data-skill="${safeSkill}" data-path="${safeSkillPath}">Evolve</button>
-      <button class="action-btn" id="btn-rollback" data-skill="${safeSkill}" data-path="${safeSkillPath}">Rollback</button>
-    </div>
-    <div class="action-result" id="action-result"></div>
-  `;
-  // Bind action handlers
-  document.getElementById('btn-watch').addEventListener('click', () => runSkillAction('watch', skillName, skillPath));
-  document.getElementById('btn-evolve').addEventListener('click', () => runSkillAction('evolve', skillName, skillPath));
-  document.getElementById('btn-rollback').addEventListener('click', () => runSkillAction('rollback', skillName, skillPath));
-}
-async function runSkillAction(action, skill, skillPath) {
-  const btn = document.getElementById('btn-' + action);
-  const resultEl = document.getElementById('action-result');
-  if (!btn || !resultEl) return;
-  // Set loading state
-  btn.classList.add('loading');
-  btn.disabled = true;
-  btn.textContent = '...';
-  resultEl.className = 'action-result';
-  resultEl.style.display = 'none';
-  try {
-    const payload = { skill, skillPath };
-    if (action === 'rollback') {
-      // For rollback, find the latest pending proposal
-      const pending = (state.computed && state.computed.pendingProposals) || [];
-      const needle = skill.toLowerCase();
-      const match = pending.find(p => (p.details || '').toLowerCase().includes(needle));
-      if (match) payload.proposalId = match.proposal_id;
-    }
-    const res = await fetch('/api/actions/' + action, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(payload),
-    });
-    const data = await res.json();
-    resultEl.style.display = 'block';
-    if (data.success) {
-      resultEl.className = 'action-result visible success';
-      resultEl.textContent = data.output || 'Action completed successfully';
-    } else {
-      resultEl.className = 'action-result visible error';
-      resultEl.textContent = data.error || data.output || 'Action failed';
-    }
-  } catch (err) {
-    resultEl.style.display = 'block';
-    resultEl.className = 'action-result visible error';
-    resultEl.textContent = 'Network error: ' + (err.message || err);
-  } finally {
-    btn.classList.remove('loading');
-    btn.disabled = false;
-    btn.textContent = action.charAt(0).toUpperCase() + action.slice(1);
-  }
-}
-// ========================================================================
-// Search filter
-// ========================================================================
-document.getElementById('skillSearchInput').addEventListener('input', function() {
-  const query = this.value.toLowerCase();
-  document.querySelectorAll('.skill-health-row').forEach(row => {
-    const name = (row.dataset.skill || '').toLowerCase();
-    row.style.display = name.includes(query) ? '' : 'none';
-  });
-});
-// ========================================================================
-// Evaluation Feed
-// ========================================================================
-function updateDrillEvalFeed(skillName) {
-  const records = state.skills.filter(r => r.skill_name === skillName);
-  const sorted = [...records].sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp));
-  const tbody = document.querySelector('#drillEvalFeed tbody');
-  tbody.innerHTML = sorted.slice(0, 50).map(r => {
-    const triggeredBadge = r.triggered
-      ? '<span class="badge badge-healthy">Yes</span>'
-      : '<span class="badge badge-critical">No</span>';
-    const sourceType = escapeHtml(r.source || r.type || 'implicit');
-    return `<tr>
-      <td class="mono">${escapeHtml(formatTimestamp(r.timestamp))}</td>
-      <td>${escapeHtml(truncate(r.query, 50))}</td>
-      <td>${triggeredBadge}</td>
-      <td class="mono">${sourceType}</td>
-    </tr>`;
-  }).join('') || '<tr><td colspan="4" class="empty-state">No evaluations</td></tr>';
-}
-// ========================================================================
-// Invocation Breakdown
-// ========================================================================
-function updateDrillInvocationBreakdown(skillName) {
-  const computed = state.computed;
-  const snapshot = computed && computed.snapshots ? computed.snapshots[skillName] : null;
-  const byType = (snapshot && snapshot.by_invocation_type) || {};
-  // If no invocation type data, compute from skill records
-  let labels, values;
-  if (Object.keys(byType).length > 0) {
-    labels = Object.keys(byType);
-    values = Object.values(byType);
-  } else {
-    // Fallback: count source/type fields from skill records
-    const records = state.skills.filter(r => r.skill_name === skillName);
-    const counts = {};
-    for (const r of records) {
-      const t = r.source || r.type || 'implicit';
-      counts[t] = (counts[t] || 0) + 1;
-    }
-    labels = Object.keys(counts);
-    values = Object.values(counts);
-  }
-  if (charts.invocationBreakdown) charts.invocationBreakdown.destroy();
-  if (!labels.length) return;
-  charts.invocationBreakdown = new Chart(document.getElementById('chartInvocationBreakdown'), {
-    type: 'doughnut',
-    data: {
-      labels,
-      datasets: [{
-        data: values,
-        backgroundColor: CHART_COLORS.slice(0, labels.length),
-        borderWidth: 1,
-        borderColor: '#fff',
-      }]
-    },
-    options: {
-      responsive: true,
-      maintainAspectRatio: false,
-      plugins: {
-        legend: {
-          position: 'right',
-          labels: {
-            font: { family: "'Poppins', sans-serif", size: 11 },
-            padding: 12,
-          }
-        }
-      }
-    }
-  });
-}
-// ========================================================================
-// Time period filtering
-// ========================================================================
-function filterByPeriod(records, days) {
-  if (!days || days === 0) return records;
-  // Anchor cutoff to latest timestamp in dataset, not viewer's clock,
-  // so archived/historical datasets filter correctly.
-  const latest = records.reduce((max, r) => {
-    const t = new Date(r.timestamp).getTime();
-    return t > max ? t : max;
-  }, 0);
-  if (!latest) return records;
-  const cutoff = new Date(latest);
-  cutoff.setDate(cutoff.getDate() - days);
-  return records.filter(r => new Date(r.timestamp) >= cutoff);
-}
-document.getElementById('timePeriodSelector').addEventListener('click', function(e) {
-  const btn = e.target.closest('.period-btn');
-  if (!btn) return;
-  this.querySelectorAll('.period-btn').forEach(b => b.classList.remove('active'));
-  btn.classList.add('active');
-  selectedPeriodDays = parseInt(btn.dataset.days, 10);
-  if (selectedSkill) {
-    updateDrillPassRateChart(selectedSkill);
-  }
-});
-// Hook into drill-down to show action buttons in live mode
-const origOpenDrillDown = typeof openDrillDown === 'function' ? openDrillDown : null;
-openDrillDown = function(skillName) {
-  if (origOpenDrillDown) origOpenDrillDown(skillName);
-  showActionButtons(skillName);
-};
-function initLiveMode() {
-  if (!isLiveMode()) return;
-  // Show live sections
-  document.getElementById('actionsSection').style.display = 'block';
-  startSSE();
-  updateEvolutionTimeline();
-}
-// ========================================================================
-// Init: try loading embedded data
-// ========================================================================
-if (loadEmbeddedData()) {
-  refreshAll();
-}
-initLiveMode();
-</script>
-</body>
-</html>