npm - declare-cc - Versions diffs - 1.0.8 → 2.0.0 - Mend

declare-cc 1.0.8 → 2.0.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 (75) hide show

package/README.md +153 -187
package/dist/client/assets/index-BVuhr02G.css +1 -0
package/dist/client/assets/index-DujGXAYw.js +9 -0
package/dist/client/index.html +23 -0
package/dist/index.js +17459 -0
package/package.json +38 -45
package/src/agents/prompts/00-research.md +90 -0
package/src/agents/prompts/01-vision.md +38 -0
package/src/agents/prompts/02-declarations.md +47 -0
package/src/agents/prompts/03-milestones.md +43 -0
package/src/agents/prompts/04-actions.md +90 -0
package/src/agents/prompts/05-execution.md +63 -0
package/src/agents/prompts/06-verification.md +104 -0
package/LICENSE +0 -21
package/agents/declare-codebase-mapper.md +0 -761
package/agents/declare-debugger.md +0 -1198
package/agents/declare-executor.md +0 -353
package/agents/declare-integration-checker.md +0 -440
package/agents/declare-plan-checker.md +0 -608
package/agents/declare-planner.md +0 -1015
package/agents/declare-research-synthesizer.md +0 -309
package/agents/declare-researcher.md +0 -484
package/agents/declare-roadmapper.md +0 -639
package/agents/declare-verifier.md +0 -555
package/bin/declare.js +0 -16
package/bin/install.js +0 -1907
package/commands/declare/actions.md +0 -113
package/commands/declare/add-todo.md +0 -41
package/commands/declare/audit.md +0 -76
package/commands/declare/check-todos.md +0 -125
package/commands/declare/complete-milestone.md +0 -215
package/commands/declare/dashboard.md +0 -65
package/commands/declare/debug.md +0 -162
package/commands/declare/discuss.md +0 -65
package/commands/declare/execute.md +0 -521
package/commands/declare/future.md +0 -72
package/commands/declare/health.md +0 -92
package/commands/declare/help.md +0 -31
package/commands/declare/init.md +0 -39
package/commands/declare/map-codebase.md +0 -149
package/commands/declare/milestones.md +0 -98
package/commands/declare/new-cycle.md +0 -172
package/commands/declare/new-project.md +0 -565
package/commands/declare/pause.md +0 -138
package/commands/declare/plan.md +0 -320
package/commands/declare/prioritize.md +0 -65
package/commands/declare/progress.md +0 -116
package/commands/declare/quick.md +0 -119
package/commands/declare/reapply-patches.md +0 -178
package/commands/declare/research.md +0 -267
package/commands/declare/resume.md +0 -146
package/commands/declare/set-profile.md +0 -66
package/commands/declare/settings.md +0 -119
package/commands/declare/status.md +0 -65
package/commands/declare/trace.md +0 -81
package/commands/declare/update.md +0 -251
package/commands/declare/verify.md +0 -65
package/commands/declare/visualize.md +0 -74
package/dist/declare-tools.cjs +0 -9439
package/dist/public/app.js +0 -8331
package/dist/public/index.html +0 -3939
package/hooks/declare-activity.js +0 -106
package/hooks/declare-check-update.js +0 -62
package/hooks/declare-server.js +0 -116
package/hooks/declare-statusline.js +0 -91
package/scripts/build-hooks.js +0 -42
package/scripts/release.js +0 -50
package/templates/future.md +0 -4
package/templates/milestones.md +0 -11
package/workflows/actions.md +0 -89
package/workflows/discuss.md +0 -476
package/workflows/future.md +0 -185
package/workflows/milestones.md +0 -87
package/workflows/scope.md +0 -94
package/workflows/verify.md +0 -504

package/dist/public/index.html DELETED Viewed

@@ -1,3939 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Declare — Dashboard</title>
-  <style>
-    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-    :root {
-      /* ── Mesh/Deco-inspired dark palette ── */
-      --bg: #111111;
-      --surface: #1a1a1a;
-      --surface2: #222222;
-      --surface3: #2a2a2a;
-      --border: rgba(255,255,255,0.08);
-      --border-strong: rgba(255,255,255,0.14);
-      --text: #d4d4d4;
-      --text-dim: #999999;
-      --text-bright: #f5f5f5;
-      --text-muted: #6b6b6b;
-      /* Brand accent — deco lime green */
-      --accent: #d0ec1a;
-      --accent-dim: rgba(208, 236, 26, 0.12);
-      --accent-border: rgba(208, 236, 26, 0.25);
-      --decl-color: #93c5fd;
-      --decl-bg: rgba(147, 197, 253, 0.06);
-      --decl-border: rgba(147, 197, 253, 0.15);
-      --mile-color: #a595ff;
-      --mile-bg: rgba(165, 149, 255, 0.06);
-      --mile-border: rgba(165, 149, 255, 0.15);
-      --act-color: #86efac;
-      --act-bg: rgba(134, 239, 172, 0.06);
-      --act-border: rgba(134, 239, 172, 0.15);
-      /* done tones */
-      --decl-done-color: #6b96c8;
-      --decl-done-bg: rgba(107, 150, 200, 0.05);
-      --decl-done-border: rgba(107, 150, 200, 0.10);
-      --mile-done-color: #8878c0;
-      --mile-done-bg: rgba(136, 120, 192, 0.05);
-      --mile-done-border: rgba(136, 120, 192, 0.10);
-      --act-done-color: #5cb88a;
-      --act-done-bg: rgba(92, 184, 138, 0.05);
-      --act-done-border: rgba(92, 184, 138, 0.10);
-      /* workflow progress tones */
-      --planned-color:   #93c5fd;
-      --planned-bg:      rgba(147, 197, 253, 0.06);
-      --planned-border:  rgba(147, 197, 253, 0.15);
-      --executing-color: #fbbf24;
-      --executing-bg:    rgba(251, 191, 36, 0.06);
-      --executing-border: rgba(251, 191, 36, 0.18);
-      --broken-color: #f87171;
-      --broken-bg: rgba(248, 113, 113, 0.06);
-      --broken-border: rgba(248, 113, 113, 0.18);
-      /* integrity wholeness indicators */
-      --integrity-whole: #86efac;
-      --integrity-whole-glow: rgba(134, 239, 172, 0.2);
-      --integrity-partial: #fbbf24;
-      --integrity-partial-glow: rgba(251, 191, 36, 0.2);
-      --integrity-broken: #f87171;
-      --integrity-broken-glow: rgba(248, 113, 113, 0.2);
-      --wholeness-whole: #86efac;
-      --wholeness-partial: #fbbf24;
-      --wholeness-broken: #f87171;
-      --renegotiated-color: #fbbf24;
-      --renegotiated-bg: rgba(251, 191, 36, 0.06);
-      --renegotiated-border: rgba(251, 191, 36, 0.18);
-      --panel-width: 360px;
-      --status-bar-height: 48px;
-      --topbar-height: 0px;
-      --radius: 6px;
-      --radius-lg: 10px;
-    }
-    body {
-      background: var(--bg);
-      color: var(--text);
-      font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-      font-size: 16px;
-      line-height: 1.5;
-      height: 100vh;
-      display: flex;
-      flex-direction: column;
-      overflow: hidden;
-      -webkit-font-smoothing: antialiased;
-      -moz-osx-font-smoothing: grayscale;
-    }
-    /* ── Status bar ── */
-    #status-bar {
-      height: var(--status-bar-height);
-      background: var(--surface);
-      border-bottom: 1px solid var(--border);
-      display: flex;
-      align-items: center;
-      gap: 0;
-      padding: 0 20px;
-      flex-shrink: 0;
-      position: relative;
-      z-index: 10;
-    }
-    #status-bar .project-name {
-      font-weight: 600;
-      font-size: 14px;
-      color: var(--text-bright);
-      letter-spacing: -0.01em;
-      cursor: pointer;
-      transition: color 0.15s;
-    }
-    #status-bar .project-name:hover { color: var(--accent); }
-    /* Breadcrumb inline in status bar */
-    #status-breadcrumb {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      margin-left: 0;
-      font-size: 13px;
-    }
-    #status-breadcrumb .bc-sep {
-      color: var(--text-muted);
-      font-size: 11px;
-    }
-    #status-breadcrumb .bc-link {
-      color: var(--text-dim);
-      cursor: pointer;
-      font-weight: 500;
-      transition: color 0.15s;
-    }
-    #status-breadcrumb .bc-link:hover { color: var(--text-bright); }
-    #status-breadcrumb .bc-current {
-      color: var(--text-bright);
-      font-weight: 600;
-    }
-    #status-breadcrumb .bc-title {
-      color: var(--text-dim);
-      font-size: 12px;
-      font-weight: 400;
-    }
-    .stat-group {
-      display: flex;
-      align-items: center;
-      gap: 6px;
-      color: var(--text-dim);
-      font-size: 12px;
-    }
-    .stat-group .value {
-      font-weight: 600;
-      color: var(--text);
-    }
-    .health-badge {
-      padding: 2px 10px;
-      border-radius: 12px;
-      font-size: 11px;
-      font-weight: 600;
-      text-transform: uppercase;
-      letter-spacing: 0.06em;
-    }
-    .health-healthy { background: #0a2018; color: #34d399; border: 1px solid #1a4d34; }
-    .health-warnings { background: #251400; color: #ffa040; border: 1px solid #5a3000; }
-    .health-errors   { background: #2a0a10; color: #ff4d6d; border: 1px solid #5a1520; }
-    .health-unknown  { background: var(--surface2); color: var(--text-dim); border: 1px solid var(--border); }
-    .status-pill {
-      font-size: 11px;
-      font-weight: 500;
-      padding: 2px 10px;
-      border-radius: 99px;
-      border: 1px solid var(--border);
-      color: var(--text-dim);
-      white-space: nowrap;
-    }
-    .status-pill .pill-value {
-      font-weight: 600;
-    }
-    .status-pill.integrity-ok .pill-value { color: var(--integrity-whole); }
-    .status-pill.integrity-warn .pill-value { color: var(--integrity-partial); }
-    .status-pill.integrity-bad .pill-value { color: var(--integrity-broken); }
-    .spacer { flex: 1; }
-    /* Status bar uses margin-left:auto on .status-right instead of spacer */
-    #last-updated {
-      color: var(--text-dim);
-      font-size: 11px;
-      white-space: nowrap;
-    }
-    /* Right side: integrity + next/execute */
-    .status-right {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      margin-left: auto;
-      flex-shrink: 0;
-    }
-    #execute-main-btn {
-      background: var(--accent-dim);
-      border: 1px solid var(--accent-border);
-      color: var(--accent);
-      padding: 6px 18px;
-      border-radius: var(--radius);
-      cursor: pointer;
-      font-size: 13px;
-      font-weight: 600;
-      transition: all 0.15s ease;
-      white-space: nowrap;
-    }
-    #execute-main-btn:hover { background: rgba(208, 236, 26, 0.18); border-color: rgba(208, 236, 26, 0.4); }
-    #execute-main-btn:active { transform: scale(0.97); }
-    #execute-main-btn:disabled { opacity: 0.4; cursor: not-allowed; }
-    #execute-main-btn kbd {
-      background: rgba(255,255,255,0.08);
-      border: 1px solid rgba(255,255,255,0.12);
-      border-radius: 3px;
-      padding: 1px 5px;
-      font-size: 10px;
-      margin-right: 3px;
-      vertical-align: baseline;
-    }
-    #execute-main-btn.btn-next {
-      background: var(--surface2);
-      border-color: var(--border-strong);
-      color: var(--text);
-    }
-    #execute-main-btn.btn-next:hover { background: var(--surface3); }
-    #execute-main-btn.btn-plan {
-      background: var(--accent-dim);
-      border-color: var(--accent-border);
-      color: var(--accent);
-    }
-    #execute-main-btn.btn-plan:hover { background: rgba(208, 236, 26, 0.18); border-color: rgba(208, 236, 26, 0.4); }
-    #execute-main-btn.btn-done {
-      background: rgba(134, 239, 172, 0.08);
-      border-color: rgba(134, 239, 172, 0.2);
-      color: #86efac;
-    }
-    /* ── Main layout ── */
-    #main {
-      flex: 1;
-      overflow: hidden;
-      display: flex;
-      flex-direction: column;
-    }
-    /* Integrity wholeness dot */
-    .integrity-dot {
-      display: inline-block;
-      width: 7px;
-      height: 7px;
-      border-radius: 50%;
-      margin-left: 6px;
-      vertical-align: middle;
-      position: relative;
-      top: -0.5px;
-    }
-    .integrity-dot.integrity-whole {
-      background: var(--integrity-whole);
-      box-shadow: 0 0 6px var(--integrity-whole-glow);
-    }
-    .integrity-dot.integrity-partial {
-      background: var(--integrity-partial);
-      box-shadow: 0 0 6px var(--integrity-partial-glow);
-    }
-    .integrity-dot.integrity-broken {
-      background: var(--integrity-broken);
-      box-shadow: 0 0 6px var(--integrity-broken-glow);
-    }
-    /* ── Side panel — always visible, fixed right column ── */
-    #side-panel {
-      position: fixed;
-      top: calc(var(--topbar-height) + var(--status-bar-height));
-      right: 0;
-      width: var(--panel-width);
-      height: calc(100vh - var(--topbar-height) - var(--status-bar-height));
-      background: var(--surface);
-      border-left: 1px solid var(--border);
-      display: flex;
-      flex-direction: column;
-      overflow: hidden;
-      z-index: 20;
-    }
-    #panel-header {
-      padding: 16px 20px 12px;
-      border-bottom: 1px solid var(--border);
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      flex-shrink: 0;
-    }
-    #panel-title {
-      font-size: 12px;
-      font-weight: 700;
-      letter-spacing: 0.08em;
-      text-transform: uppercase;
-      color: var(--text-dim);
-    }
-    #panel-close {
-      background: none;
-      border: none;
-      color: var(--text-dim);
-      cursor: pointer;
-      font-size: 18px;
-      line-height: 1;
-      padding: 0 4px;
-      transition: color 0.12s;
-    }
-    #panel-close:hover { color: var(--text-bright); }
-    #panel-body {
-      flex: 1;
-      overflow-y: auto;
-      padding: 20px;
-    }
-    #panel-body::-webkit-scrollbar { width: 4px; }
-    #panel-body::-webkit-scrollbar-track { background: transparent; }
-    #panel-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
-    .detail-id {
-      font-size: 11px;
-      font-weight: 700;
-      letter-spacing: 0.08em;
-      opacity: 0.6;
-      margin-bottom: 6px;
-    }
-    .detail-title {
-      font-size: 16px;
-      font-weight: 600;
-      color: var(--text-bright);
-      line-height: 1.4;
-      margin-bottom: 16px;
-    }
-    .detail-badge {
-      display: inline-block;
-      padding: 3px 12px;
-      border-radius: 10px;
-      font-size: 11px;
-      font-weight: 700;
-      letter-spacing: 0.06em;
-      text-transform: uppercase;
-      margin-bottom: 20px;
-    }
-    /* Wholeness badge in detail panel */
-    .wholeness-badge {
-      display: inline-block;
-      padding: 2px 10px;
-      border-radius: 10px;
-      font-size: 11px;
-      font-weight: 600;
-      letter-spacing: 0.04em;
-      text-transform: uppercase;
-    }
-    .wholeness-badge.wb-whole   { background: #0a2018; color: var(--wholeness-whole); border: 1px solid #1a4d34; }
-    .wholeness-badge.wb-partial { background: #1a1200; color: var(--wholeness-partial); border: 1px solid #3d2c00; }
-    .wholeness-badge.wb-broken  { background: #2a0a10; color: var(--wholeness-broken); border: 1px solid #5a1520; }
-    .detail-section {
-      margin-bottom: 20px;
-    }
-    .detail-label {
-      font-size: 10px;
-      font-weight: 700;
-      letter-spacing: 0.1em;
-      text-transform: uppercase;
-      color: var(--text-dim);
-      margin-bottom: 6px;
-    }
-    .detail-value {
-      color: var(--text);
-      font-size: 13px;
-      line-height: 1.55;
-    }
-    .detail-tag-list {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 6px;
-    }
-    .detail-tag {
-      padding: 3px 10px;
-      border-radius: 6px;
-      font-size: 11px;
-      font-weight: 500;
-      background: var(--surface2);
-      border: 1px solid var(--border);
-      color: var(--text-dim);
-      cursor: pointer;
-      transition: border-color 0.12s, color 0.12s;
-    }
-    .detail-tag:hover { border-color: var(--text-dim); color: var(--text); }
-    /* ── Loading & error overlays ── */
-    #overlay {
-      position: fixed;
-      inset: 0;
-      background: rgba(14, 14, 18, 0.92);
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      gap: 16px;
-      z-index: 100;
-    }
-    #overlay.hidden { display: none; }
-    .spinner {
-      width: 36px;
-      height: 36px;
-      border: 3px solid var(--border);
-      border-top-color: var(--decl-color);
-      border-radius: 50%;
-      animation: spin 0.7s linear infinite;
-    }
-    @keyframes spin { to { transform: rotate(360deg); } }
-    #overlay-message {
-      color: var(--text-dim);
-      font-size: 14px;
-    }
-    #overlay-error {
-      color: var(--broken-color);
-      font-size: 13px;
-      text-align: center;
-      max-width: 400px;
-    }
-    #overlay-retry {
-      display: none;
-      background: var(--surface2);
-      border: 1px solid var(--border);
-      color: var(--text);
-      padding: 8px 20px;
-      border-radius: 8px;
-      cursor: pointer;
-      font-size: 13px;
-      margin-top: 4px;
-    }
-    #overlay-retry:hover { border-color: var(--text-dim); }
-    /* ── Activity feed ── */
-    /* ── Activity sidebar (right panel in drill-body) ── */
-    #activity-feed {
-      width: 280px;
-      flex-shrink: 0;
-      background: var(--surface);
-      border-left: 1px solid var(--border);
-      display: flex;
-      flex-direction: column;
-      overflow: hidden;
-    }
-    #activity-toggle {
-      flex-shrink: 0;
-      padding: 12px 16px 8px;
-      font-size: 10px;
-      font-weight: 700;
-      letter-spacing: 0.06em;
-      text-transform: uppercase;
-      color: var(--text-dim);
-      display: flex;
-      align-items: center;
-      gap: 6px;
-    }
-    #activity-pulse {
-      width: 6px; height: 6px;
-      border-radius: 50%;
-      background: var(--act-color);
-      opacity: 0;
-      transition: opacity 0.3s;
-    }
-    #activity-pulse.live { opacity: 1; animation: pulse 1.5s ease-in-out infinite; }
-    @keyframes pulse {
-      0%, 100% { opacity: 1; }
-      50%       { opacity: 0.3; }
-    }
-    #activity-tabs {
-      display: flex;
-      gap: 4px;
-      align-items: center;
-      flex: 1;
-    }
-    .activity-tab {
-      font-size: 10px;
-      font-weight: 700;
-      letter-spacing: 0.06em;
-      text-transform: uppercase;
-      color: var(--text-muted);
-      cursor: pointer;
-      padding: 2px 6px;
-      border-radius: 3px;
-      transition: color 0.15s, background 0.15s;
-    }
-    .activity-tab:hover { color: var(--text-dim); }
-    .activity-tab.active { color: var(--text-bright); background: var(--surface3); }
-    .activity-tab-content { display: none; }
-    .activity-tab-content.active { display: flex; flex-direction: column; flex: 1; overflow: hidden; }
-    #activity-cards.active { overflow-y: auto; padding: 8px; gap: 8px; }
-    #activity-cards-active { display: flex; flex-direction: column; gap: 6px; }
-    #activity-cards-recent { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
-    #activity-cards-recent:empty { display: none; }
-    #activity-cards::-webkit-scrollbar { width: 4px; }
-    #activity-cards::-webkit-scrollbar-track { background: transparent; }
-    #activity-cards::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 2px; }
-    #activity-list {
-      flex: 1;
-      overflow-y: auto;
-      overflow-x: hidden;
-      padding: 8px 0;
-      font-size: 12px;
-      display: flex;
-      flex-direction: column;
-      gap: 0;
-    }
-    #activity-list::-webkit-scrollbar { width: 4px; }
-    #activity-list::-webkit-scrollbar-track { background: transparent; }
-    #activity-list::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 2px; }
-    .activity-event {
-      padding: 8px 16px;
-      color: var(--text-dim);
-      display: flex;
-      flex-direction: column;
-      gap: 3px;
-      flex-shrink: 0;
-      border-bottom: 1px solid rgba(255,255,255,0.03);
-      transition: background 0.15s;
-    }
-    .activity-event:hover { background: var(--surface2); cursor: default; }
-    .activity-event.clickable { cursor: pointer; }
-    .activity-event.clickable:hover { background: var(--surface3); }
-    .activity-event:last-child { border-bottom: none; }
-    .activity-event.is-new {
-      animation: activity-flash 1.5s ease-out;
-    }
-    @keyframes activity-flash {
-      0% { background: rgba(134, 239, 172, 0.08); }
-      100% { background: transparent; }
-    }
-    .ae-top {
-      display: flex;
-      align-items: center;
-      gap: 6px;
-    }
-    .ae-time { opacity: 0.5; font-size: 11px; flex-shrink: 0; font-family: 'SF Mono', 'Fira Code', monospace; }
-    .ae-icon { flex-shrink: 0; font-size: 12px; }
-    .ae-label {
-      font-size: 12px;
-      font-weight: 600;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-    .ae-label.agent-start { color: var(--act-color); }
-    .ae-label.agent-done  { color: var(--mile-color); }
-    .ae-label.bash        { color: var(--text); }
-    .ae-label.write       { color: var(--decl-color); }
-    .ae-label.review      { color: var(--accent); }
-    .ae-desc {
-      font-size: 12px;
-      color: var(--text-dim);
-      line-height: 1.4;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      padding-left: 18px;
-    }
-    /* ── Execute/Stop button ── */
-    .exec-btn {
-      background: var(--act-bg);
-      border: 1px solid var(--act-border);
-      color: var(--act-color);
-      padding: 6px 16px;
-      border-radius: 6px;
-      font-size: 12px;
-      font-weight: 600;
-      cursor: pointer;
-      display: inline-flex;
-      align-items: center;
-      gap: 6px;
-      transition: background 0.15s, border-color 0.15s;
-    }
-    .exec-btn:hover { background: #0d2818; border-color: #2a6a48; }
-    .exec-btn:disabled { opacity: 0.5; cursor: not-allowed; }
-    .exec-btn.stop {
-      background: var(--broken-bg);
-      border-color: var(--broken-border);
-      color: var(--broken-color);
-    }
-    .exec-btn.stop:hover { background: #3a0e18; border-color: #7a2035; }
-    /* ── Output log panel ── */
-    .output-log {
-      background: #0a0a0e;
-      border: 1px solid var(--border);
-      border-radius: 6px;
-      padding: 10px 12px;
-      margin-top: 12px;
-      max-height: 300px;
-      overflow-y: auto;
-      font-family: monospace;
-      font-size: 11px;
-      line-height: 1.5;
-      color: var(--text-dim);
-      white-space: pre-wrap;
-      word-break: break-all;
-    }
-    .output-log::-webkit-scrollbar { width: 4px; }
-    .output-log::-webkit-scrollbar-track { background: transparent; }
-    .output-log::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
-    .output-log .exit-code {
-      display: block;
-      margin-top: 8px;
-      padding-top: 8px;
-      border-top: 1px solid var(--border);
-      font-weight: 700;
-    }
-    .output-log .exit-code.success { color: var(--act-color); }
-    .output-log .exit-code.failure { color: var(--broken-color); }
-    /* ── Drill browser — 3-panel layout ── */
-    #drill-browser {
-      display: none;
-      width: 100%;
-      flex: 1;
-      min-height: 0;
-      flex-direction: column;
-    }
-    #drill-browser.active {
-      display: flex;
-    }
-    #drill-breadcrumb {
-      display: none; /* breadcrumb now lives in status bar */
-    }
-    /* 3-panel body: left detail + center list + right activity */
-    #drill-body {
-      flex: 1;
-      display: flex;
-      overflow: hidden;
-    }
-    /* Left detail panel — shown at level 2+ */
-    #drill-detail {
-      width: 280px;
-      flex-shrink: 0;
-      overflow-y: auto;
-      background: var(--surface);
-      border-right: 1px solid var(--border);
-      padding: 20px;
-      display: none;
-      flex-direction: column;
-      gap: 16px;
-    }
-    #drill-detail.visible { display: flex; }
-    #drill-detail[data-node-type="declaration"] {
-      background: linear-gradient(180deg, rgba(134, 239, 172, 0.04) 0%, var(--surface) 40%);
-      border-right-color: rgba(134, 239, 172, 0.12);
-    }
-    #drill-detail[data-node-type="declaration"] .detail-id { color: var(--act-color); }
-    #drill-detail[data-node-type="milestone"] {
-      background: linear-gradient(180deg, rgba(165, 149, 255, 0.04) 0%, var(--surface) 40%);
-      border-right-color: rgba(165, 149, 255, 0.12);
-    }
-    #drill-detail[data-node-type="milestone"] .detail-id { color: var(--mile-color); }
-    #drill-detail[data-node-type="action"] {
-      background: linear-gradient(180deg, rgba(147, 197, 253, 0.04) 0%, var(--surface) 40%);
-      border-right-color: rgba(147, 197, 253, 0.12);
-    }
-    #drill-detail[data-node-type="action"] .detail-id { color: var(--decl-color); }
-    #drill-detail::-webkit-scrollbar { width: 4px; }
-    #drill-detail::-webkit-scrollbar-track { background: transparent; }
-    #drill-detail::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 2px; }
-    .detail-id {
-      font-size: 11px;
-      font-weight: 700;
-      letter-spacing: 0.04em;
-      text-transform: uppercase;
-      color: var(--text-dim);
-    }
-    .detail-title {
-      font-size: 18px;
-      font-weight: 700;
-      color: var(--text-bright);
-      line-height: 1.35;
-      letter-spacing: -0.01em;
-    }
-    .detail-desc {
-      font-size: 13px;
-      color: var(--text);
-      line-height: 1.6;
-    }
-    .detail-desc:empty { display: none; }
-    .detail-badges {
-      display: flex;
-      align-items: center;
-      gap: 6px;
-      flex-wrap: wrap;
-    }
-    .detail-section-label {
-      font-size: 11px;
-      font-weight: 600;
-      letter-spacing: 0.04em;
-      text-transform: uppercase;
-      color: var(--text-dim);
-      margin-top: 4px;
-    }
-    .detail-meta {
-      font-size: 12px;
-      color: var(--text);
-      line-height: 1.5;
-    }
-    .detail-actions {
-      display: flex;
-      gap: 8px;
-      margin-top: auto;
-      padding-top: 12px;
-      border-top: 1px solid var(--border);
-    }
-    /* Center list panel */
-    #drill-center {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      overflow: hidden;
-      min-width: 0;
-    }
-    #drill-context {
-      padding: 12px 24px;
-      font-size: 13px;
-      color: var(--text-dim);
-      line-height: 1.6;
-      flex-shrink: 0;
-      background: var(--bg);
-    }
-    #drill-context:empty { display: none; padding: 0; }
-    #drill-list {
-      flex: 1;
-      overflow-y: auto;
-      padding: 16px 24px 32px;
-      background: var(--bg);
-    }
-    #drill-list::-webkit-scrollbar { width: 5px; }
-    #drill-list::-webkit-scrollbar-track { background: transparent; }
-    #drill-list::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
-    /* ── Lifecycle stage sections ── */
-    .lifecycle-stages {
-      display: flex;
-      flex-direction: column;
-      gap: 24px;
-    }
-    .lifecycle-section {
-      display: flex;
-      flex-direction: column;
-      gap: 10px;
-    }
-    .lifecycle-section.collapsed .lifecycle-cards { display: none; }
-    .lifecycle-header {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      padding: 6px 0;
-      user-select: none;
-    }
-    .lifecycle-icon {
-      font-size: 14px;
-      width: 20px;
-      text-align: center;
-    }
-    .lifecycle-label {
-      font-size: 13px;
-      font-weight: 600;
-      color: var(--text-dim);
-      text-transform: uppercase;
-      letter-spacing: 0.05em;
-    }
-    .lifecycle-count {
-      font-size: 11px;
-      font-weight: 700;
-      padding: 1px 7px;
-      border-radius: 10px;
-    }
-    .lifecycle-toggle {
-      font-size: 10px;
-      color: var(--text-muted);
-      margin-left: 4px;
-    }
-    .lifecycle-header-spacer { flex: 1; }
-    .lifecycle-stage-btn {
-      font-size: 12px;
-      font-weight: 600;
-      padding: 4px 14px;
-      border-radius: 14px;
-      border: 1px solid var(--border-strong);
-      background: var(--surface2);
-      color: var(--text);
-      cursor: pointer;
-      font-family: inherit;
-      transition: all 0.15s ease;
-    }
-    .lifecycle-stage-btn:hover {
-      background: var(--surface3);
-      border-color: var(--accent-border);
-      color: var(--text-bright);
-    }
-    .lifecycle-stage-btn + .lifecycle-stage-btn {
-      margin-left: 4px;
-    }
-    /* ── Card derivation progress ── */
-    .drill-card-deriving {
-      border-color: var(--executing-border) !important;
-      background: var(--executing-bg) !important;
-    }
-    .derive-card-indicator {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      padding: 8px 12px;
-      font-size: 12px;
-      color: var(--executing-color);
-      font-weight: 600;
-    }
-    .derive-spinner {
-      display: inline-block;
-      width: 14px;
-      height: 14px;
-      border: 2px solid var(--executing-border);
-      border-top-color: var(--executing-color);
-      border-radius: 50%;
-      animation: derive-spin 0.8s linear infinite;
-    }
-    @keyframes derive-spin {
-      to { transform: rotate(360deg); }
-    }
-    #version-label {
-      position: fixed;
-      bottom: 6px;
-      left: 8px;
-      font-size: 10px;
-      color: #555;
-      pointer-events: none;
-      z-index: 1;
-    }
-    .derive-card-status {
-      display: inline-flex;
-      align-items: center;
-      gap: 4px;
-      font-size: 11px;
-      color: var(--executing-color);
-      font-weight: 600;
-      margin-left: 4px;
-    }
-    .derive-card-status .derive-spinner {
-      width: 10px;
-      height: 10px;
-      border-width: 1.5px;
-    }
-    /* ── Filter chips ── */
-    .lifecycle-filter-chips {
-      display: flex;
-      gap: 6px;
-      flex-wrap: wrap;
-    }
-    .lifecycle-chip {
-      font-size: 12px;
-      padding: 4px 12px;
-      border-radius: 14px;
-      border: 1px solid var(--border);
-      background: transparent;
-      color: var(--text-dim);
-      cursor: pointer;
-      transition: all 0.15s ease;
-      font-family: inherit;
-    }
-    .lifecycle-chip:hover {
-      border-color: var(--border-strong);
-      color: var(--text);
-    }
-    .lifecycle-chip.active {
-      background: var(--chip-color, var(--accent));
-      border-color: var(--chip-color, var(--accent));
-      color: var(--bg);
-      font-weight: 600;
-    }
-    .chip-count {
-      font-weight: 700;
-      margin-left: 2px;
-    }
-    /* ── Type badge ── */
-    .lifecycle-type-badge {
-      font-size: 10px;
-      font-weight: 700;
-      padding: 1px 6px;
-      border-radius: 4px;
-      text-transform: uppercase;
-      letter-spacing: 0.04em;
-    }
-    .lifecycle-type-badge.type-declaration {
-      background: rgba(134, 239, 172, 0.12);
-      color: #86efac;
-    }
-    .lifecycle-type-badge.type-milestone {
-      background: rgba(165, 149, 255, 0.12);
-      color: #a595ff;
-    }
-    .lifecycle-type-badge.type-action {
-      background: rgba(147, 197, 253, 0.12);
-      color: #93c5fd;
-    }
-    .lifecycle-cards {
-      max-width: none;
-      margin: 0;
-    }
-    /* ── Empty state / Onboarding ── */
-    .onboarding-empty {
-      max-width: 560px;
-      margin: 60px auto 0;
-      text-align: center;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: 16px;
-    }
-    .onboarding-project {
-      font-size: 28px;
-      font-weight: 700;
-      color: var(--text-bright);
-      letter-spacing: -0.02em;
-    }
-    .onboarding-heading {
-      font-size: 18px;
-      font-weight: 600;
-      color: var(--accent);
-    }
-    .onboarding-desc {
-      font-size: 14px;
-      color: var(--text-dim);
-      line-height: 1.6;
-      max-width: 380px;
-    }
-    .onboarding-form {
-      width: 100%;
-      display: flex;
-      flex-direction: column;
-      gap: 10px;
-      margin-top: 8px;
-    }
-    .onboarding-input, .onboarding-textarea {
-      width: 100%;
-      padding: 10px 14px;
-      font-size: 14px;
-      font-family: inherit;
-      background: var(--surface);
-      border: 1px solid var(--border);
-      border-radius: var(--radius);
-      color: var(--text);
-      outline: none;
-      transition: border-color 0.15s ease;
-    }
-    .onboarding-input:focus, .onboarding-textarea:focus {
-      border-color: var(--accent-border);
-    }
-    .onboarding-textarea { resize: vertical; min-height: 240px; }
-    .onboarding-btn {
-      padding: 10px 24px;
-      font-size: 14px;
-      font-weight: 600;
-      font-family: inherit;
-      background: var(--accent);
-      color: var(--bg);
-      border: none;
-      border-radius: var(--radius);
-      cursor: pointer;
-      transition: opacity 0.15s ease;
-    }
-    .onboarding-btn:hover { opacity: 0.9; }
-    .onboarding-btn:disabled { opacity: 0.5; cursor: default; }
-    .onboarding-error {
-      font-size: 13px;
-      color: var(--broken-color);
-      min-height: 18px;
-    }
-    /* ── Onboarding flow (vision → questions → proposals) ── */
-    .onboard-container {
-      width: 100%;
-      padding: 16px 0;
-    }
-    .onboard-stream {
-      font-family: 'SF Mono', 'Fira Code', monospace;
-      font-size: 11px;
-      line-height: 1.5;
-      color: var(--text-muted);
-      max-height: 160px;
-      overflow-y: auto;
-      white-space: pre-wrap;
-      word-break: break-word;
-      margin: 0 0 12px 0;
-      padding: 10px 12px;
-      background: var(--surface);
-      border-radius: var(--radius);
-      border: 1px solid var(--border);
-    }
-    .onboard-stream.streaming {
-      border-color: var(--accent-border);
-    }
-    .onboard-phase-label {
-      font-size: 13px;
-      font-weight: 600;
-      color: var(--accent);
-      text-transform: uppercase;
-      letter-spacing: 0.05em;
-      margin-bottom: 12px;
-    }
-    .onboard-questions {
-      display: flex;
-      flex-direction: column;
-      gap: 10px;
-    }
-    .onboard-question {
-      background: var(--surface);
-      border: 1px solid transparent;
-      border-radius: var(--radius-lg);
-      padding: 18px 20px;
-      display: flex;
-      flex-direction: column;
-      gap: 10px;
-      transition: border-color 0.15s ease;
-    }
-    .onboard-question:focus-within {
-      border-color: var(--accent-border);
-    }
-    .onboard-question .oq-number {
-      font-size: 11px;
-      font-weight: 700;
-      color: var(--accent);
-      letter-spacing: 0.04em;
-    }
-    .onboard-question label {
-      font-size: 15px;
-      font-weight: 600;
-      color: var(--text-bright);
-      line-height: 1.4;
-    }
-    .onboard-question .oq-context {
-      font-size: 13px;
-      color: var(--text-dim);
-      line-height: 1.5;
-    }
-    .onboard-question .oq-options {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 8px;
-    }
-    .onboard-question .oq-option {
-      padding: 6px 14px;
-      font-size: 13px;
-      background: var(--surface2);
-      border: 1px solid var(--border);
-      border-radius: 14px;
-      color: var(--text);
-      cursor: pointer;
-      transition: all 0.15s;
-    }
-    .onboard-question .oq-option:hover { border-color: var(--accent); color: var(--accent); }
-    .onboard-question .oq-option.selected { background: var(--accent); color: var(--bg); border-color: var(--accent); }
-    .onboard-question textarea {
-      width: 100%;
-      padding: 10px 14px;
-      font-size: 14px;
-      font-family: inherit;
-      background: var(--surface2);
-      border: 1px solid var(--border);
-      border-radius: var(--radius);
-      color: var(--text);
-      outline: none;
-      resize: vertical;
-      min-height: 48px;
-      line-height: 1.5;
-    }
-    .onboard-question textarea::placeholder { color: var(--text-dim); }
-    .onboard-question textarea:focus { border-color: var(--accent-border); background: var(--surface); }
-    .onboard-actions {
-      display: flex;
-      gap: 10px;
-      margin-top: 16px;
-      padding-top: 8px;
-    }
-    .onboard-actions button {
-      padding: 10px 24px;
-      font-size: 14px;
-      font-weight: 600;
-      font-family: inherit;
-      border-radius: var(--radius-lg);
-      cursor: pointer;
-      transition: all 0.15s;
-    }
-    .onboard-btn-primary {
-      background: var(--accent);
-      color: var(--bg);
-      border: none;
-    }
-    .onboard-btn-primary:hover { opacity: 0.9; }
-    .onboard-btn-secondary {
-      background: transparent;
-      color: var(--text-dim);
-      border: 1px solid var(--border);
-    }
-    .onboard-btn-secondary:hover { border-color: var(--text-dim); color: var(--text); }
-    .onboard-proposal {
-      background: var(--surface);
-      border: 1px solid transparent;
-      border-radius: var(--radius-lg);
-      padding: 18px 20px;
-      margin-bottom: 10px;
-      transition: all 0.2s;
-    }
-    .onboard-proposal:hover {
-      background: var(--surface2);
-    }
-    .onboard-proposal.current {
-      border-color: var(--accent);
-      background: linear-gradient(135deg, rgba(134, 239, 172, 0.03) 0%, var(--surface) 60%);
-    }
-    .onboard-proposal.approved {
-      border-left: 3px solid var(--done-color);
-      opacity: 0.65;
-    }
-    .onboard-proposal .op-header {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      margin-bottom: 8px;
-    }
-    .onboard-proposal .op-check {
-      font-size: 18px;
-      color: var(--done-color);
-    }
-    .onboard-proposal .op-index {
-      font-size: 12px;
-      font-weight: 700;
-      color: var(--text-dim);
-      min-width: 20px;
-    }
-    .onboard-proposal .op-id {
-      font-size: 12px;
-      font-weight: 600;
-      color: var(--accent);
-    }
-    .onboard-title {
-      width: 100%;
-      padding: 8px 14px;
-      font-size: 15px;
-      font-weight: 600;
-      font-family: inherit;
-      background: var(--surface2);
-      border: 1px solid var(--border);
-      border-radius: var(--radius);
-      color: var(--text-bright);
-      outline: none;
-    }
-    .onboard-title:focus { border-color: var(--accent-border); background: var(--surface); }
-    .onboard-statement {
-      width: 100%;
-      padding: 8px 14px;
-      font-size: 14px;
-      font-family: inherit;
-      background: var(--surface2);
-      border: 1px solid var(--border);
-      border-radius: var(--radius);
-      color: var(--text);
-      outline: none;
-      resize: vertical;
-      min-height: 44px;
-      margin-top: 8px;
-      line-height: 1.5;
-    }
-    .onboard-statement:focus { border-color: var(--accent-border); background: var(--surface); }
-    .onboard-reason {
-      font-size: 13px;
-      color: var(--text-dim);
-      margin-top: 8px;
-      font-style: italic;
-      line-height: 1.4;
-    }
-    .onboard-progress {
-      font-size: 14px;
-      color: var(--text-dim);
-      margin-bottom: 12px;
-      font-weight: 600;
-    }
-    /* ── Reconnecting banner ── */
-    #reconnect-banner {
-      position: fixed;
-      top: 0;
-      left: 50%;
-      transform: translateX(-50%) translateY(-100%);
-      background: var(--executing-color);
-      color: var(--bg);
-      padding: 6px 20px;
-      font-size: 13px;
-      font-weight: 600;
-      border-radius: 0 0 var(--radius) var(--radius);
-      z-index: 9999;
-      transition: transform 0.3s ease;
-    }
-    #reconnect-banner.visible {
-      transform: translateX(-50%) translateY(0);
-    }
-    /* ── Lifecycle card transitions (disabled — instant render) ── */
-    /* ── Loading skeleton ── */
-    .skeleton-card {
-      background: var(--surface);
-      border-radius: var(--radius-lg);
-      padding: 18px 20px;
-      animation: skeletonPulse 1.5s ease-in-out infinite;
-    }
-    .skeleton-line {
-      height: 12px;
-      background: var(--surface3);
-      border-radius: 4px;
-      margin-bottom: 8px;
-    }
-    .skeleton-line.short { width: 40%; }
-    .skeleton-line.medium { width: 70%; }
-    .skeleton-line.long { width: 90%; }
-    @keyframes skeletonPulse {
-      0%, 100% { opacity: 0.6; }
-      50% { opacity: 1; }
-    }
-    /* ── Lifecycle progress bar ── */
-    .lifecycle-progress {
-      display: flex;
-      gap: 2px;
-      height: 4px;
-      border-radius: 2px;
-      overflow: hidden;
-      margin-top: 4px;
-    }
-    .lifecycle-progress-segment {
-      height: 100%;
-      transition: width 0.3s ease;
-    }
-    .drill-cards {
-      max-width: 640px;
-      margin: 0 auto;
-      display: flex;
-      flex-direction: column;
-      gap: 10px;
-    }
-    /* ── Card item ── */
-    .drill-card {
-      background: var(--surface);
-      border: 1px solid transparent;
-      border-radius: var(--radius-lg);
-      padding: 18px 20px;
-      cursor: pointer;
-      transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.2s ease;
-      display: flex;
-      flex-direction: column;
-      gap: 10px;
-    }
-    .drill-card:hover {
-      background: var(--surface2);
-      border-color: var(--border-strong);
-      box-shadow: 0 2px 12px rgba(0,0,0,0.15);
-    }
-    .drill-card.needs-review {
-      /* No border — blends into background until focused */
-    }
-    .drill-card.focused {
-      background: var(--surface2);
-      border-color: var(--card-tint-border, var(--border-strong));
-      box-shadow: inset 2px 0 0 var(--card-tint, var(--accent));
-    }
-    /* ── Node-type tint colors on cards ── */
-    .drill-cards[data-node-type="declaration"] .drill-card {
-      --card-tint: #86efac;
-      --card-tint-border: rgba(134, 239, 172, 0.25);
-      --card-tint-glow: rgba(134, 239, 172, 0.08);
-      background: linear-gradient(135deg, rgba(134, 239, 172, 0.03) 0%, var(--surface) 60%);
-    }
-    .drill-cards[data-node-type="declaration"] .drill-card .drill-card-id {
-      color: var(--act-color);
-    }
-    .drill-cards[data-node-type="milestone"] .drill-card {
-      --card-tint: #a595ff;
-      --card-tint-border: rgba(165, 149, 255, 0.25);
-      --card-tint-glow: rgba(165, 149, 255, 0.08);
-      background: linear-gradient(135deg, rgba(165, 149, 255, 0.03) 0%, var(--surface) 60%);
-    }
-    .drill-cards[data-node-type="milestone"] .drill-card .drill-card-id {
-      color: var(--mile-color);
-    }
-    .drill-cards[data-node-type="action"] .drill-card {
-      --card-tint: #93c5fd;
-      --card-tint-border: rgba(147, 197, 253, 0.25);
-      --card-tint-glow: rgba(147, 197, 253, 0.08);
-      background: linear-gradient(135deg, rgba(147, 197, 253, 0.03) 0%, var(--surface) 60%);
-    }
-    .drill-cards[data-node-type="action"] .drill-card .drill-card-id {
-      color: var(--decl-color);
-    }
-    /* Hover state preserves tint gradient */
-    .drill-cards[data-node-type="declaration"] .drill-card:hover {
-      background: linear-gradient(135deg, rgba(134, 239, 172, 0.06) 0%, var(--surface2) 60%);
-    }
-    .drill-cards[data-node-type="milestone"] .drill-card:hover {
-      background: linear-gradient(135deg, rgba(165, 149, 255, 0.06) 0%, var(--surface2) 60%);
-    }
-    .drill-cards[data-node-type="action"] .drill-card:hover {
-      background: linear-gradient(135deg, rgba(147, 197, 253, 0.06) 0%, var(--surface2) 60%);
-    }
-    /* Focused card gets stronger tint background */
-    .drill-cards[data-node-type="declaration"] .drill-card.focused {
-      background: linear-gradient(135deg, rgba(134, 239, 172, 0.06) 0%, var(--surface2) 60%);
-    }
-    .drill-cards[data-node-type="milestone"] .drill-card.focused {
-      background: linear-gradient(135deg, rgba(165, 149, 255, 0.06) 0%, var(--surface2) 60%);
-    }
-    .drill-cards[data-node-type="action"] .drill-card.focused {
-      background: linear-gradient(135deg, rgba(147, 197, 253, 0.06) 0%, var(--surface2) 60%);
-    }
-    .drill-card .drill-review-btn.approve-btn {
-      background: rgba(134, 239, 172, 0.10);
-      border-color: rgba(134, 239, 172, 0.35);
-      color: #86efac;
-    }
-    .drill-card .drill-review-btn.revision-btn {
-      background: rgba(248, 113, 113, 0.06);
-      border-color: rgba(248, 113, 113, 0.2);
-      color: #f87171;
-    }
-    .drill-card-top {
-      display: flex;
-      align-items: flex-start;
-      gap: 12px;
-    }
-    .drill-card-id {
-      font-size: 12px;
-      font-weight: 700;
-      letter-spacing: 0.03em;
-      flex-shrink: 0;
-      padding-top: 2px;
-      color: var(--text-dim);
-    }
-    .drill-card-body {
-      flex: 1;
-      min-width: 0;
-    }
-    .drill-card-title {
-      font-size: 16px;
-      font-weight: 600;
-      color: var(--text-bright);
-      line-height: 1.4;
-      letter-spacing: -0.01em;
-      margin-bottom: 4px;
-    }
-    .drill-card-desc {
-      font-size: 13px;
-      color: var(--text);
-      line-height: 1.5;
-      margin-bottom: 8px;
-    }
-    .drill-card-desc:empty { display: none; margin: 0; }
-    .drill-card-badges {
-      display: flex;
-      align-items: center;
-      gap: 6px;
-      flex-wrap: wrap;
-    }
-    .drill-card-stat {
-      font-size: 12px;
-      color: var(--text);
-      font-weight: 400;
-    }
-    .drill-card-stat strong {
-      color: var(--accent);
-      font-weight: 600;
-    }
-    /* Inline action list on milestone cards */
-    .drill-card-action-list {
-      list-style: none;
-      padding: 0;
-      margin: 6px 0 0 0;
-      display: flex;
-      flex-direction: column;
-      gap: 2px;
-    }
-    .drill-card-action-list li {
-      font-size: 11px;
-      color: var(--text-dim);
-      display: flex;
-      align-items: baseline;
-      gap: 6px;
-    }
-    .drill-card-action-list li .al-icon {
-      width: 10px;
-      text-align: center;
-      flex-shrink: 0;
-      font-size: 10px;
-    }
-    .drill-card-action-list li.done { color: var(--text-muted); text-decoration: line-through; }
-    .drill-card-action-list li.done .al-icon { color: var(--done-color, #86efac); }
-    .drill-card-action-list li.planned .al-icon { color: var(--accent); }
-    .drill-card-action-list li.unplanned .al-icon { color: var(--text-muted); }
-    .drill-card-no-actions {
-      font-size: 11px;
-      color: var(--text-muted);
-      font-style: italic;
-      margin-top: 6px;
-    }
-    /* Card-level status pill */
-    .drill-status-pill {
-      display: inline-block;
-      padding: 3px 10px;
-      border-radius: 99px;
-      font-size: 11px;
-      font-weight: 600;
-      letter-spacing: 0.03em;
-      text-transform: uppercase;
-      background: rgba(255,255,255,0.04);
-      border: 1px solid var(--border);
-      color: var(--text-dim);
-    }
-    .drill-status-pill.s-done     { background: var(--act-bg); border-color: var(--act-border); color: var(--act-color); }
-    .drill-status-pill.s-executing { background: var(--executing-bg); border-color: var(--executing-border); color: var(--executing-color); }
-    .drill-status-pill.s-planned  { background: var(--planned-bg); border-color: var(--planned-border); color: var(--planned-color); }
-    .drill-status-pill.s-pending  { background: rgba(255,255,255,0.03); color: var(--text-dim); }
-    /* ── Card review actions (centered below content) ── */
-    .drill-card-actions {
-      display: flex;
-      gap: 8px;
-      padding-top: 8px;
-      border-top: 1px solid var(--border);
-    }
-    .drill-review-btn {
-      flex: 1;
-      padding: 8px 14px;
-      border-radius: var(--radius);
-      font-size: 13px;
-      font-weight: 600;
-      cursor: pointer;
-      border: 1px solid var(--border-strong);
-      background: transparent;
-      color: var(--text);
-      transition: all 0.15s ease;
-      text-align: center;
-    }
-    .drill-review-btn kbd, .drill-action-btn kbd {
-      display: inline-block;
-      padding: 0 5px;
-      border: 1px solid var(--border-strong);
-      border-radius: 3px;
-      font-size: 10px;
-      font-family: inherit;
-      font-weight: 700;
-      color: var(--text-dim);
-      background: var(--surface2);
-      margin-right: 2px;
-      vertical-align: baseline;
-    }
-    .drill-review-btn:hover, .drill-action-btn:hover {
-      background: var(--surface2);
-      border-color: var(--border-strong);
-      color: var(--text);
-    }
-    .drill-review-btn.approve-btn:hover {
-      background: rgba(134, 239, 172, 0.08);
-      border-color: rgba(134, 239, 172, 0.3);
-      color: #86efac;
-    }
-    /* ── Flat action bar buttons ── */
-    .drill-action-btn {
-      padding: 6px 12px;
-      border-radius: var(--radius);
-      font-size: 12px;
-      font-weight: 500;
-      cursor: pointer;
-      border: 1px solid var(--border);
-      background: transparent;
-      color: var(--text-dim);
-      transition: all 0.15s ease;
-    }
-    .drill-action-btn:hover {
-      background: var(--surface2);
-      border-color: var(--border-strong);
-      color: var(--text);
-    }
-    .drill-action-btn.drill-action-primary {
-      background: var(--accent-dim);
-      border-color: var(--accent-border);
-      color: var(--accent);
-      font-weight: 600;
-    }
-    .drill-action-btn.drill-action-primary:hover {
-      background: var(--accent-border);
-    }
-    .drill-action-btn.drill-action-danger {
-      color: var(--text-dim);
-    }
-    .drill-action-btn.drill-action-danger:hover {
-      background: rgba(248,113,113,0.08);
-      border-color: rgba(248,113,113,0.3);
-      color: #f87171;
-    }
-    /* ── Refine suggestion inline area ── */
-    .refine-area {
-      margin-top: 8px;
-      padding: 10px;
-      border: 1px solid var(--accent-border);
-      border-radius: var(--radius);
-      background: rgba(208,236,26,0.03);
-      font-size: 13px;
-      line-height: 1.5;
-      color: var(--text);
-    }
-    .refine-area .refine-streaming {
-      white-space: pre-wrap;
-      min-height: 24px;
-    }
-    .refine-area .refine-actions {
-      display: flex;
-      gap: 8px;
-      margin-top: 8px;
-    }
-    .refine-area .refine-accept {
-      padding: 5px 12px;
-      border-radius: var(--radius);
-      font-size: 12px;
-      font-weight: 600;
-      cursor: pointer;
-      border: 1px solid rgba(134,239,172,0.3);
-      background: rgba(134,239,172,0.08);
-      color: #86efac;
-    }
-    .refine-area .refine-discard {
-      padding: 5px 12px;
-      border-radius: var(--radius);
-      font-size: 12px;
-      font-weight: 600;
-      cursor: pointer;
-      border: 1px solid var(--border-strong);
-      background: transparent;
-      color: var(--text-dim);
-    }
-    .refine-write-input {
-      width: 100%;
-      padding: 8px;
-      border: 1px solid var(--border-strong);
-      border-radius: var(--radius);
-      background: var(--surface2);
-      color: var(--text);
-      font-size: 13px;
-      font-family: inherit;
-      resize: vertical;
-      min-height: 40px;
-      margin-bottom: 6px;
-    }
-    .refine-write-input:focus {
-      outline: none;
-      border-color: var(--accent-border);
-    }
-    /* Expandable plan preview */
-    .drill-plan-toggle {
-      font-size: 11px;
-      color: var(--text-muted);
-      cursor: pointer;
-      padding: 2px 0;
-      user-select: none;
-      font-weight: 500;
-      transition: color 0.12s;
-    }
-    .drill-plan-toggle:hover { color: var(--text); }
-    .drill-plan-content {
-      display: none;
-      margin-top: 6px;
-      padding: 12px 14px;
-      background: var(--bg);
-      border: 1px solid var(--border);
-      border-radius: var(--radius);
-      font-size: 11px;
-      line-height: 1.6;
-      color: var(--text-dim);
-      max-height: 200px;
-      overflow-y: auto;
-    }
-    .drill-plan-content.open { display: block; }
-    /* ── Bottom prompt bar ── */
-    #drill-prompt {
-      padding: 14px 24px;
-      background: var(--surface);
-      border-top: 1px solid var(--border);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: 12px;
-      flex-shrink: 0;
-      font-size: 13px;
-    }
-    .drill-prompt-text {
-      color: var(--text);
-    }
-    .drill-prompt-text .drill-prompt-target {
-      color: var(--accent);
-      font-weight: 600;
-      cursor: pointer;
-    }
-    .drill-prompt-text .drill-prompt-target:hover { text-decoration: underline; }
-    .drill-prompt-complete {
-      color: var(--accent);
-      font-weight: 600;
-    }
-    /* Command card in agents panel */
-    #command-card {
-      background: var(--surface2);
-      border: 1px solid var(--border);
-      border-radius: 18px;
-      padding: 8px 14px;
-      cursor: default;
-      transition: all 0.15s ease;
-      margin-bottom: 4px;
-    }
-    #command-card:hover, #command-card:focus-within { border-color: var(--accent-border); }
-    #command-card .cmd-label {
-      display: none;
-    }
-    #command-card .cmd-key {
-      display: none;
-    }
-    #command-card .cmd-row {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-    }
-    #command-card .cmd-shortcut {
-      background: var(--surface3);
-      border: 1px solid var(--border);
-      border-radius: 4px;
-      padding: 1px 6px;
-      font-size: 10px;
-      font-weight: 700;
-      color: var(--text-dim);
-      font-family: 'SF Mono', 'Fira Code', monospace;
-      flex-shrink: 0;
-      line-height: 1.6;
-    }
-    #command-card:focus-within .cmd-shortcut { display: none; }
-    #command-card.editing {
-      border-color: var(--accent);
-      border-style: solid;
-      cursor: default;
-    }
-    #command-card-input {
-      display: block;
-      width: 100%;
-      background: transparent;
-      border: none;
-      color: var(--text);
-      font-size: 13px;
-      padding: 2px 0;
-      outline: none;
-      font-family: inherit;
-      resize: none;
-      line-height: 1.4;
-      min-width: 0;
-      flex: 1;
-    }
-    #command-card-hint {
-      display: none;
-      font-size: 10px;
-      color: var(--text-dim);
-      margin-top: 4px;
-    }
-    #command-card.editing #command-card-hint { display: block; }
-    #command-card.running { border-color: var(--executing-color); border-style: solid; }
-    #command-card.running .cmd-label { display: none; }
-    #command-card.running #command-card-input { display: none; }
-    #command-card.running #command-card-hint { display: none; }
-    .command-output-stream {
-      font-family: 'SF Mono', 'Fira Code', monospace;
-      font-size: 11px;
-      line-height: 1.5;
-      color: var(--text-muted);
-      max-height: 200px;
-      overflow-y: auto;
-      white-space: pre-wrap;
-      word-break: break-word;
-      margin: 0;
-      padding: 0;
-    }
-    .command-output-stream.streaming { color: var(--executing-color); }
-    .drill-next-btn {
-      background: var(--accent-dim);
-      border: 1px solid var(--accent-border);
-      color: var(--accent);
-      padding: 6px 16px;
-      border-radius: var(--radius);
-      cursor: pointer;
-      font-size: 13px;
-      font-weight: 600;
-      margin-left: 12px;
-      transition: all 0.15s ease;
-    }
-    .drill-next-btn:hover { background: rgba(208, 236, 26, 0.18); }
-    .drill-next-btn kbd {
-      display: inline-block;
-      padding: 0 5px;
-      border: 1px solid var(--accent-border);
-      border-radius: 3px;
-      font-size: 10px;
-      font-family: inherit;
-      font-weight: 700;
-      color: var(--accent);
-      background: rgba(208, 236, 26, 0.08);
-      margin-right: 2px;
-    }
-    .drill-approve-all-btn {
-      background: rgba(134, 239, 172, 0.08);
-      border: 1px solid rgba(134, 239, 172, 0.3);
-      color: #86efac;
-      padding: 6px 16px;
-      border-radius: var(--radius);
-      cursor: pointer;
-      font-size: 13px;
-      font-weight: 600;
-      margin-left: 12px;
-      transition: all 0.15s ease;
-    }
-    .drill-approve-all-btn:hover { background: rgba(134, 239, 172, 0.15); }
-    .drill-approve-all-btn kbd {
-      display: inline-block;
-      padding: 0 5px;
-      border: 1px solid rgba(134, 239, 172, 0.3);
-      border-radius: 3px;
-      font-size: 10px;
-      font-family: inherit;
-      font-weight: 700;
-      color: #86efac;
-      background: rgba(134, 239, 172, 0.08);
-      margin-right: 2px;
-    }
-    .col-empty {
-      padding: 40px 20px;
-      color: var(--text-muted);
-      font-size: 13px;
-      text-align: center;
-    }
-    .col-empty-invite {
-      padding: 60px 32px;
-      text-align: center;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: 12px;
-    }
-    .empty-invite-title {
-      color: var(--text);
-      font-size: 15px;
-      font-weight: 600;
-    }
-    .empty-invite-desc {
-      color: var(--text-muted);
-      font-size: 13px;
-      max-width: 320px;
-      line-height: 1.5;
-    }
-    .empty-invite-input {
-      width: 100%;
-      max-width: 320px;
-      background: var(--surface2);
-      border: 1px solid var(--border);
-      border-radius: 6px;
-      color: var(--text);
-      font-size: 12px;
-      padding: 8px 10px;
-      resize: vertical;
-      font-family: inherit;
-    }
-    .empty-invite-input:focus {
-      outline: none;
-      border-color: var(--accent-border);
-    }
-    .empty-invite-input::placeholder {
-      color: var(--text-muted);
-      opacity: 0.6;
-    }
-    .empty-invite-btn {
-      background: var(--accent-dim);
-      border: 1px solid var(--accent-border);
-      color: var(--accent);
-      padding: 8px 20px;
-      border-radius: 6px;
-      font-size: 13px;
-      font-weight: 600;
-      cursor: pointer;
-      transition: all 0.15s ease;
-    }
-    .empty-invite-btn:hover {
-      background: rgba(208, 236, 26, 0.18);
-      border-color: rgba(208, 236, 26, 0.4);
-    }
-    .empty-invite-btn kbd {
-      background: rgba(255,255,255,0.08);
-      border: 1px solid rgba(255,255,255,0.12);
-      border-radius: 3px;
-      padding: 1px 5px;
-      font-size: 11px;
-      margin-right: 4px;
-    }
-    .col-empty-invite .output-log {
-      width: 100%;
-      max-width: 560px;
-      text-align: left;
-      max-height: 200px;
-      overflow-y: auto;
-      font-size: 12px;
-      line-height: 1.6;
-      color: var(--text-dim);
-      padding: 12px 16px;
-      border-radius: var(--radius);
-      background: var(--surface);
-      border: 1px solid var(--border);
-    }
-    .col-empty-invite .output-log .derive-log-line {
-      opacity: 0.5;
-      transition: opacity 0.3s;
-    }
-    .col-empty-invite .output-log .derive-log-line:last-child {
-      opacity: 1;
-      color: var(--text);
-    }
-    .col-empty-invite .derivation-checklist {
-      text-align: left;
-      width: 100%;
-      max-width: 560px;
-    }
-    .col-empty-invite #derivation-proposals {
-      width: 100%;
-      max-width: 560px;
-      text-align: left;
-    }
-    .derivation-progress {
-      width: 100%;
-      max-width: 560px;
-      margin-top: 16px;
-      padding: 14px 18px;
-      background: var(--surface);
-      border: 1px solid var(--border);
-      border-radius: var(--radius-lg);
-    }
-    .derive-phase {
-      display: flex;
-      align-items: center;
-      gap: 10px;
-      animation: derive-phase-in 0.4s ease;
-    }
-    .derive-phase-icon {
-      font-size: 18px;
-      flex-shrink: 0;
-    }
-    .derive-phase-text {
-      font-size: 13px;
-      color: var(--text);
-      font-weight: 500;
-    }
-    @keyframes derive-phase-in {
-      from { opacity: 0; transform: translateY(4px); }
-      to { opacity: 1; transform: translateY(0); }
-    }
-    .derive-stream-output {
-      margin-top: 10px;
-      padding: 10px 12px;
-      background: var(--bg);
-      border: 1px solid var(--border);
-      border-radius: var(--radius);
-      font-size: 12px;
-      line-height: 1.5;
-      color: var(--text-dim);
-      max-height: 160px;
-      overflow-y: auto;
-      white-space: pre-wrap;
-      word-break: break-word;
-      font-family: 'SF Mono', 'Fira Code', monospace;
-    }
-    .derive-spinner {
-      display: inline-block;
-      width: 12px;
-      height: 12px;
-      border: 2px solid rgba(208,236,26,0.3);
-      border-top-color: var(--accent);
-      border-radius: 50%;
-      animation: derive-spin 0.8s linear infinite;
-      vertical-align: middle;
-      margin-right: 4px;
-    }
-    @keyframes derive-spin {
-      to { transform: rotate(360deg); }
-    }
-    .derive-elapsed {
-      opacity: 0.5;
-      font-size: 11px;
-      font-weight: 400;
-    }
-    /* ── Declaration form ── */
-    .decl-form-trigger {
-      background: none;
-      border: 1px solid var(--decl-border);
-      color: var(--decl-color);
-      width: 22px;
-      height: 22px;
-      border-radius: 4px;
-      cursor: pointer;
-      font-size: 14px;
-      line-height: 1;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      transition: background 0.15s, border-color 0.15s;
-      flex-shrink: 0;
-      margin-left: auto;
-    }
-    .decl-form-trigger:hover {
-      background: var(--decl-bg);
-      border-color: var(--decl-color);
-    }
-    .decl-form-overlay {
-      padding: 12px 16px;
-      border-bottom: 1px solid var(--border);
-      background: var(--surface2);
-    }
-    .decl-form {
-      display: flex;
-      flex-direction: column;
-      gap: 8px;
-    }
-    .decl-form input,
-    .decl-form textarea {
-      background: var(--surface);
-      border: 1px solid var(--border);
-      color: var(--text);
-      border-radius: 4px;
-      padding: 8px 12px;
-      width: 100%;
-      font-size: 13px;
-      font-family: inherit;
-      outline: none;
-      transition: border-color 0.15s;
-    }
-    .decl-form input:focus,
-    .decl-form textarea:focus {
-      border-color: var(--decl-color);
-    }
-    .decl-form textarea {
-      resize: vertical;
-      min-height: 54px;
-    }
-    .decl-form-actions {
-      display: flex;
-      gap: 8px;
-      align-items: center;
-    }
-    .decl-form-actions .decl-submit-btn {
-      background: var(--decl-color);
-      color: #fff;
-      border: none;
-      border-radius: 4px;
-      padding: 6px 16px;
-      cursor: pointer;
-      font-size: 12px;
-      font-weight: 600;
-      transition: opacity 0.15s;
-    }
-    .decl-form-actions .decl-submit-btn:hover { opacity: 0.9; }
-    .decl-form-actions .decl-submit-btn:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-    .decl-form-actions .decl-cancel-btn {
-      background: transparent;
-      border: 1px solid var(--border);
-      color: var(--text-dim);
-      border-radius: 4px;
-      padding: 6px 16px;
-      cursor: pointer;
-      font-size: 12px;
-      transition: border-color 0.15s, color 0.15s;
-    }
-    .decl-form-actions .decl-cancel-btn:hover {
-      border-color: var(--text-dim);
-      color: var(--text);
-    }
-    .decl-form .form-error {
-      color: var(--broken-color);
-      font-size: 12px;
-      margin-top: 4px;
-      min-height: 0;
-    }
-    /* Status bar new-decl button */
-    .new-decl-btn {
-      background: var(--decl-bg);
-      border: 1px solid var(--decl-border);
-      color: var(--decl-color);
-      padding: 5px 14px;
-      border-radius: 6px;
-      cursor: pointer;
-      font-size: 12px;
-      font-weight: 600;
-      transition: background 0.15s, border-color 0.15s;
-    }
-    .new-decl-btn:hover { background: #0f2d50; border-color: var(--decl-color); }
-    /* Play All button */
-    .play-btn {
-      background: #0a2018;
-      border: 1px solid var(--act-border);
-      color: var(--act-color);
-      padding: 5px 14px;
-      border-radius: 6px;
-      cursor: pointer;
-      font-size: 12px;
-      font-weight: 600;
-      transition: background 0.15s, border-color 0.15s;
-    }
-    .play-btn:hover { background: #0f3020; border-color: var(--act-color); }
-    .play-btn:disabled { opacity: 0.4; cursor: not-allowed; }
-    .play-btn.playing {
-      background: var(--executing-bg);
-      border-color: var(--executing-border);
-      color: var(--executing-color);
-      animation: pulse-play 1.5s ease-in-out infinite;
-    }
-    @keyframes pulse-play {
-      0%, 100% { opacity: 1; }
-      50% { opacity: 0.7; }
-    }
-    /* Play progress banner */
-    #play-banner {
-      display: none;
-      background: var(--surface);
-      border-bottom: 1px solid var(--executing-border);
-      padding: 8px 20px;
-      font-size: 12px;
-      color: var(--text);
-      align-items: center;
-      gap: 12px;
-      flex-shrink: 0;
-    }
-    #play-banner.visible { display: flex; }
-    #play-banner .play-wave-label {
-      color: var(--executing-color);
-      font-weight: 600;
-    }
-    #play-banner .play-actions-list {
-      display: flex;
-      gap: 6px;
-      flex-wrap: wrap;
-    }
-    #play-banner .play-action-tag {
-      background: var(--surface2);
-      border: 1px solid var(--border);
-      border-radius: 4px;
-      padding: 2px 8px;
-      font-size: 11px;
-    }
-    #play-banner .play-action-tag.active {
-      border-color: var(--executing-border);
-      color: var(--executing-color);
-    }
-    #play-banner .play-action-tag.done {
-      border-color: var(--act-border);
-      color: var(--act-color);
-    }
-    #play-banner .play-action-tag.failed {
-      border-color: var(--broken-border);
-      color: var(--broken-color);
-    }
-    .play-stop-btn {
-      background: var(--broken-bg);
-      border: 1px solid var(--broken-border);
-      color: var(--broken-color);
-      padding: 3px 10px;
-      border-radius: 4px;
-      cursor: pointer;
-      font-size: 11px;
-      margin-left: auto;
-    }
-    .play-stop-btn:hover { background: #3a0a10; }
-    /* Scrollbar for column panels */
-    .col-panel::-webkit-scrollbar { width: 4px; }
-    .col-panel::-webkit-scrollbar-track { background: transparent; }
-    .col-panel::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
-    /* ── File Viewer Modal ── */
-    #file-viewer-modal {
-      display: none;
-      position: fixed;
-      inset: 0;
-      z-index: 2000;
-      background: rgba(0, 0, 0, 0.75);
-      backdrop-filter: blur(4px);
-      justify-content: center;
-      align-items: center;
-      padding: 40px;
-    }
-    #file-viewer-modal.open {
-      display: flex;
-    }
-    .file-viewer-container {
-      background: var(--surface);
-      border: 1px solid var(--border);
-      border-radius: 12px;
-      width: 100%;
-      max-width: 820px;
-      max-height: 85vh;
-      display: flex;
-      flex-direction: column;
-      overflow: hidden;
-      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
-    }
-    .file-viewer-header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: 12px 16px;
-      border-bottom: 1px solid var(--border);
-      background: var(--surface2);
-      flex-shrink: 0;
-    }
-    .file-viewer-path {
-      font-family: 'SF Mono', 'Fira Code', monospace;
-      font-size: 12px;
-      color: var(--text-bright);
-      font-weight: 600;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-    .file-viewer-close {
-      background: none;
-      border: 1px solid var(--border);
-      color: var(--text-dim);
-      cursor: pointer;
-      border-radius: 6px;
-      width: 28px;
-      height: 28px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 14px;
-      flex-shrink: 0;
-      margin-left: 12px;
-    }
-    .file-viewer-close:hover {
-      color: var(--text-bright);
-      border-color: var(--text-dim);
-    }
-    .file-viewer-body {
-      overflow-y: auto;
-      padding: 20px 24px;
-      flex: 1;
-      font-size: 13px;
-      line-height: 1.65;
-      color: var(--text);
-    }
-    /* Markdown rendered content */
-    .file-viewer-body.markdown h1 { font-size: 1.6em; font-weight: 700; color: var(--text-bright); margin: 0 0 0.6em; padding-bottom: 0.3em; border-bottom: 1px solid var(--border); }
-    .file-viewer-body.markdown h2 { font-size: 1.3em; font-weight: 700; color: var(--text-bright); margin: 1.2em 0 0.4em; padding-bottom: 0.25em; border-bottom: 1px solid var(--border); }
-    .file-viewer-body.markdown h3 { font-size: 1.1em; font-weight: 700; color: var(--text-bright); margin: 1em 0 0.3em; }
-    .file-viewer-body.markdown h4, .file-viewer-body.markdown h5, .file-viewer-body.markdown h6 { font-size: 1em; font-weight: 700; color: var(--text-bright); margin: 0.8em 0 0.2em; }
-    .file-viewer-body.markdown p { margin: 0 0 0.8em; }
-    .file-viewer-body.markdown ul, .file-viewer-body.markdown ol { margin: 0 0 0.8em; padding-left: 1.5em; }
-    .file-viewer-body.markdown li { margin-bottom: 0.3em; }
-    .file-viewer-body.markdown li > ul, .file-viewer-body.markdown li > ol { margin-top: 0.3em; margin-bottom: 0; }
-    .file-viewer-body.markdown code { font-family: 'SF Mono', 'Fira Code', monospace; background: var(--surface2); border: 1px solid var(--border); border-radius: 3px; padding: 1px 5px; font-size: 0.9em; color: var(--act-color); }
-    .file-viewer-body.markdown pre { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; overflow-x: auto; margin: 0 0 1em; }
-    .file-viewer-body.markdown pre code { background: none; border: none; padding: 0; color: var(--text); font-size: 12px; line-height: 1.5; }
-    .file-viewer-body.markdown blockquote { border-left: 3px solid var(--border); padding: 0.2em 0 0.2em 1em; margin: 0 0 0.8em; color: var(--text-dim); }
-    .file-viewer-body.markdown a { color: var(--decl-color); text-decoration: none; }
-    .file-viewer-body.markdown a:hover { text-decoration: underline; }
-    .file-viewer-body.markdown hr { border: none; border-top: 1px solid var(--border); margin: 1.2em 0; }
-    .file-viewer-body.markdown table { border-collapse: collapse; margin: 0 0 1em; width: 100%; }
-    .file-viewer-body.markdown th, .file-viewer-body.markdown td { border: 1px solid var(--border); padding: 6px 10px; text-align: left; font-size: 12px; }
-    .file-viewer-body.markdown th { background: var(--surface2); font-weight: 700; color: var(--text-bright); }
-    .file-viewer-body.markdown img { max-width: 100%; }
-    .file-viewer-body.markdown strong { color: var(--text-bright); font-weight: 700; }
-    /* Preformatted (non-markdown) */
-    .file-viewer-body.preformatted {
-      font-family: 'SF Mono', 'Fira Code', monospace;
-      font-size: 12px;
-      line-height: 1.5;
-      white-space: pre-wrap;
-      word-break: break-all;
-      color: var(--text);
-    }
-    /* Clickable file links in plan detail */
-    .file-link {
-      cursor: pointer;
-      transition: border-color 0.15s;
-    }
-    .file-link:hover {
-      border-color: var(--act-color) !important;
-      text-decoration: underline;
-    }
-    /* ── Declaration edit mode ── */
-    .decl-edit-mode input,
-    .decl-edit-mode textarea {
-      background: var(--surface);
-      border: 1px solid var(--border);
-      color: var(--text);
-      border-radius: 4px;
-      padding: 8px 12px;
-      width: 100%;
-      font-size: 13px;
-      font-family: inherit;
-      outline: none;
-      transition: border-color 0.15s;
-    }
-    .decl-edit-mode input:focus,
-    .decl-edit-mode textarea:focus {
-      border-color: var(--decl-color);
-    }
-    .decl-edit-mode textarea {
-      resize: vertical;
-      min-height: 54px;
-    }
-    .decl-edit-mode label {
-      font-size: 10px;
-      font-weight: 700;
-      letter-spacing: 0.1em;
-      text-transform: uppercase;
-      color: var(--text-dim);
-      margin-bottom: 4px;
-      margin-top: 12px;
-      display: block;
-    }
-    .decl-edit-mode label:first-child {
-      margin-top: 0;
-    }
-    .decl-edit-actions {
-      display: flex;
-      gap: 8px;
-      align-items: center;
-      margin-top: 14px;
-    }
-    .decl-edit-actions .btn-save {
-      background: var(--decl-color);
-      color: #fff;
-      border: none;
-      border-radius: 4px;
-      padding: 6px 16px;
-      cursor: pointer;
-      font-size: 12px;
-      font-weight: 600;
-      transition: opacity 0.15s;
-    }
-    .decl-edit-actions .btn-save:hover { opacity: 0.9; }
-    .decl-edit-actions .btn-save:disabled { opacity: 0.5; cursor: not-allowed; }
-    .decl-edit-actions .btn-cancel {
-      background: transparent;
-      border: 1px solid var(--border);
-      color: var(--text-dim);
-      border-radius: 4px;
-      padding: 6px 16px;
-      cursor: pointer;
-      font-size: 12px;
-      transition: border-color 0.15s, color 0.15s;
-    }
-    .decl-edit-actions .btn-cancel:hover { border-color: var(--text-dim); color: var(--text); }
-    .delete-confirm {
-      margin-top: 12px;
-      padding: 10px 12px;
-      background: var(--broken-bg);
-      border: 1px solid var(--broken-border);
-      border-radius: 6px;
-      font-size: 12px;
-      color: var(--broken-color);
-    }
-    .delete-confirm p {
-      margin-bottom: 8px;
-    }
-    .delete-confirm .delete-confirm-actions {
-      display: flex;
-      gap: 8px;
-    }
-    .delete-confirm .btn-confirm-delete {
-      background: var(--broken-color);
-      color: #fff;
-      border: none;
-      border-radius: 4px;
-      padding: 5px 14px;
-      cursor: pointer;
-      font-size: 12px;
-      font-weight: 600;
-    }
-    .delete-confirm .btn-confirm-cancel {
-      background: transparent;
-      border: 1px solid var(--broken-border);
-      color: var(--broken-color);
-      border-radius: 4px;
-      padding: 5px 14px;
-      cursor: pointer;
-      font-size: 12px;
-    }
-    .decl-status-select {
-      background: var(--surface2);
-      color: var(--text);
-      border: 1px solid var(--border);
-      border-radius: 4px;
-      padding: 8px 12px;
-      width: 100%;
-      font-size: 13px;
-      font-family: inherit;
-      outline: none;
-      cursor: pointer;
-      transition: border-color 0.15s;
-    }
-    .decl-status-select:focus {
-      border-color: var(--decl-color);
-    }
-    .decl-panel-actions {
-      display: flex;
-      gap: 8px;
-      margin-top: 16px;
-    }
-    .decl-panel-actions .btn-edit {
-      background: var(--decl-bg);
-      border: 1px solid var(--decl-border);
-      color: var(--decl-color);
-      border-radius: 4px;
-      padding: 5px 14px;
-      cursor: pointer;
-      font-size: 12px;
-      font-weight: 600;
-      transition: background 0.15s, border-color 0.15s;
-    }
-    .decl-panel-actions .btn-edit:hover { background: #0f2d50; border-color: var(--decl-color); }
-    .decl-panel-actions .btn-panel-delete {
-      background: transparent;
-      color: var(--broken-color);
-      border: 1px solid var(--broken-border);
-      border-radius: 4px;
-      padding: 5px 14px;
-      cursor: pointer;
-      font-size: 12px;
-      font-weight: 600;
-      transition: background 0.15s;
-    }
-    .decl-panel-actions .btn-panel-delete:hover { background: var(--broken-bg); }
-    /* Workability path section */
-    .workability-path { margin-top: 4px; }
-    .workability-path .wp-header {
-      font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
-      text-transform: uppercase; color: var(--text-dim); margin-bottom: 8px;
-    }
-    .wp-step {
-      display: flex; align-items: flex-start; gap: 10px;
-      padding: 8px 10px; border-radius: 6px;
-      background: var(--surface2); border: 1px solid var(--border);
-      margin-bottom: 6px; font-size: 12px;
-    }
-    .wp-step-action {
-      font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
-      color: var(--act-color); cursor: pointer; white-space: nowrap;
-      flex-shrink: 0;
-    }
-    .wp-step-action:hover { text-decoration: underline; }
-    .wp-step-body { flex: 1; min-width: 0; }
-    .wp-step-title {
-      color: var(--text-bright); font-size: 12px; font-weight: 500;
-      line-height: 1.35; margin-bottom: 3px;
-    }
-    .wp-step-milestone {
-      font-size: 10px; color: var(--text-dim); opacity: 0.7;
-    }
-    .wp-impact {
-      display: inline-block; padding: 1px 7px; border-radius: 8px;
-      font-size: 9px; font-weight: 700; letter-spacing: 0.04em;
-      text-transform: uppercase; flex-shrink: 0; margin-top: 1px;
-    }
-    .wp-impact.impact-high   { background: #2a0a10; color: var(--broken-color); border: 1px solid #5a1520; }
-    .wp-impact.impact-medium { background: #1a1200; color: var(--integrity-partial); border: 1px solid #3d2c00; }
-    .wp-impact.impact-low    { background: #0a2018; color: var(--integrity-whole); border: 1px solid #1a4d34; }
-    /* ── Derivation panel ── */
-    .derivation-panel {
-      margin-top: 12px;
-      border: 1px solid var(--border);
-      border-radius: 6px;
-      padding: 12px;
-      background: var(--bg);
-    }
-    .derivation-panel .output-log {
-      max-height: 200px;
-      overflow-y: auto;
-      font-family: 'SF Mono', Monaco, monospace;
-      font-size: 11px;
-      padding: 8px;
-      background: #1a1a2e;
-      color: #ccc;
-      border-radius: 4px;
-      white-space: pre-wrap;
-      margin-bottom: 12px;
-    }
-    .derivation-checklist { list-style: none; padding: 0; margin: 8px 0; }
-    .derivation-checklist li {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      padding: 6px 0;
-      border-bottom: 1px solid var(--border);
-    }
-    .derivation-checklist li:last-child { border-bottom: none; }
-    .derivation-checklist input[type="checkbox"] { flex-shrink: 0; }
-    .derivation-checklist input[type="text"] {
-      flex: 1;
-      background: var(--bg);
-      color: var(--fg, var(--text));
-      border: 1px solid var(--border);
-      border-radius: 3px;
-      padding: 4px 6px;
-      font-size: 13px;
-    }
-    .derivation-checklist .reason {
-      font-size: 11px;
-      color: #888;
-      margin-left: 28px;
-      display: block;
-    }
-    .derive-btn {
-      background: var(--accent, #4a6cf7);
-      color: #fff;
-      border: none;
-      padding: 6px 14px;
-      border-radius: 4px;
-      cursor: pointer;
-      font-size: 13px;
-    }
-    .derive-btn:hover { opacity: 0.85; }
-    .derive-btn:disabled { opacity: 0.4; cursor: not-allowed; }
-    .derive-accept-btn {
-      background: #2ea043;
-      color: #fff;
-      border: none;
-      padding: 6px 14px;
-      border-radius: 4px;
-      cursor: pointer;
-      font-size: 13px;
-      margin-right: 8px;
-    }
-    .derive-cancel-btn {
-      background: transparent;
-      color: var(--text);
-      border: 1px solid var(--border);
-      padding: 6px 14px;
-      border-radius: 4px;
-      cursor: pointer;
-      font-size: 13px;
-    }
-    /* ── Workflow next-step banner ── */
-    #workflow-banner {
-      display: none;
-      align-items: center;
-      gap: 16px;
-      padding: 12px 20px;
-      background: var(--surface);
-      border-bottom: 1px solid var(--border);
-      flex-shrink: 0;
-    }
-    #workflow-banner.visible { display: flex; }
-    .wf-progress-bar {
-      width: 120px;
-      height: 6px;
-      background: rgba(255,255,255,0.06);
-      border-radius: 3px;
-      overflow: hidden;
-      flex-shrink: 0;
-    }
-    .wf-progress-fill {
-      height: 100%;
-      border-radius: 3px;
-      background: var(--act-color);
-      transition: width 0.4s ease;
-    }
-    .wf-progress-fill.state-empty { background: var(--text-dim); }
-    .wf-progress-fill.state-declarations_only { background: var(--decl-color); }
-    .wf-progress-fill.state-milestones_pending { background: var(--mile-color); }
-    .wf-progress-fill.state-actions_pending { background: var(--act-color); }
-    .wf-progress-fill.state-executing { background: var(--executing-color); }
-    .wf-progress-fill.state-complete { background: var(--integrity-whole); }
-    .wf-state-label {
-      font-size: 10px;
-      font-weight: 700;
-      letter-spacing: 0.08em;
-      text-transform: uppercase;
-      color: var(--text-dim);
-      flex-shrink: 0;
-    }
-    .wf-next-label {
-      font-size: 13px;
-      color: var(--text);
-      flex: 1;
-    }
-    .wf-action-btn {
-      background: var(--act-bg);
-      border: 1px solid var(--act-border);
-      color: var(--act-color);
-      padding: 6px 16px;
-      border-radius: 6px;
-      font-size: 12px;
-      font-weight: 600;
-      cursor: pointer;
-      flex-shrink: 0;
-      transition: background 0.15s, border-color 0.15s;
-      white-space: nowrap;
-    }
-    .wf-action-btn:hover { background: #0d2818; border-color: #2a6a48; }
-    .wf-action-btn.state-empty,
-    .wf-action-btn.state-declarations_only {
-      background: var(--decl-bg);
-      border-color: var(--decl-border);
-      color: var(--decl-color);
-    }
-    .wf-action-btn.state-empty:hover,
-    .wf-action-btn.state-declarations_only:hover {
-      background: #0f2d50;
-      border-color: var(--decl-color);
-    }
-    .wf-action-btn.state-milestones_pending {
-      background: var(--mile-bg);
-      border-color: var(--mile-border);
-      color: var(--mile-color);
-    }
-    .wf-action-btn.state-milestones_pending:hover {
-      background: #220e44;
-      border-color: var(--mile-color);
-    }
-    .wf-action-btn.state-executing {
-      background: var(--executing-bg);
-      border-color: var(--executing-border);
-      color: var(--executing-color);
-    }
-    .wf-action-btn.state-complete {
-      background: #0a2018;
-      border-color: #1a4d34;
-      color: var(--integrity-whole);
-    }
-    .wf-pct {
-      font-size: 12px;
-      font-weight: 600;
-      color: var(--text-dim);
-      flex-shrink: 0;
-    }
-    /* ── Reference badges ── */
-    .ref-link-badge {
-      display: inline-block;
-      padding: 3px 10px;
-      border-radius: 6px;
-      font-size: 11px;
-      font-weight: 500;
-      text-decoration: none;
-      transition: border-color 0.12s, color 0.12s;
-      max-width: 100%;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-    .ref-url-badge {
-      background: var(--decl-bg);
-      border: 1px solid var(--decl-border);
-      color: var(--decl-color);
-      cursor: pointer;
-    }
-    .ref-url-badge:hover { border-color: var(--decl-color); text-decoration: underline; }
-    .ref-path-badge {
-      background: var(--surface2);
-      border: 1px solid var(--border);
-      color: var(--text-dim);
-      font-family: 'SF Mono', 'Fira Code', monospace;
-      font-size: 10px;
-    }
-    .ref-input {
-      background: var(--surface);
-      border: 1px solid var(--border);
-      color: var(--text);
-      border-radius: 4px;
-      padding: 6px 10px;
-      width: 100%;
-      font-size: 12px;
-      font-family: inherit;
-      outline: none;
-      transition: border-color 0.15s;
-    }
-    .ref-input:focus { border-color: var(--decl-color); }
-    .ref-save-btn {
-      background: var(--decl-color);
-      color: #fff;
-      border: none;
-      border-radius: 4px;
-      padding: 5px 14px;
-      cursor: pointer;
-      font-size: 12px;
-      font-weight: 600;
-      transition: opacity 0.15s;
-    }
-    .ref-save-btn:hover { opacity: 0.9; }
-    .ref-save-btn:disabled { opacity: 0.5; cursor: not-allowed; }
-    /* ── Activity pinned operation (at top of activity feed) ── */
-    .activity-pinned {
-      padding: 10px 16px;
-      background: var(--executing-bg);
-      border-bottom: 1px solid var(--executing-border);
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      font-size: 12px;
-      color: var(--executing-color);
-      font-weight: 600;
-      letter-spacing: 0.02em;
-      flex-shrink: 0;
-    }
-    .activity-pinned .pinned-spinner {
-      width: 10px;
-      height: 10px;
-      border: 2px solid var(--border);
-      border-top-color: var(--executing-color);
-      border-radius: 50%;
-      animation: spin 0.7s linear infinite;
-      flex-shrink: 0;
-    }
-    /* ── Agent activity cards ── */
-    .agent-card {
-      background: var(--surface2);
-      border: 1px solid var(--border);
-      border-radius: var(--radius);
-      padding: 10px 12px;
-      display: flex;
-      flex-direction: column;
-      gap: 6px;
-      transition: background 0.15s;
-    }
-    .agent-card:hover { background: var(--surface3); }
-    .agent-card.status-running  { border-left: 3px solid var(--executing-color); }
-    .agent-card.status-complete,
-    .agent-card.status-done     { border-left: 3px solid var(--act-color); opacity: 0.8; }
-    .agent-card.status-failed   { border-left: 3px solid var(--broken-color); opacity: 0.8; }
-    .agent-card-header {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-    }
-    .agent-card-icon {
-      font-size: 14px;
-      flex-shrink: 0;
-      width: 20px;
-      text-align: center;
-    }
-    .agent-card-target {
-      font-size: 12px;
-      font-weight: 600;
-      color: var(--text-bright);
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      flex: 1;
-    }
-    .agent-card-badge {
-      font-size: 10px;
-      font-weight: 700;
-      letter-spacing: 0.04em;
-      text-transform: uppercase;
-      padding: 2px 6px;
-      border-radius: 3px;
-      flex-shrink: 0;
-    }
-    .agent-card-badge.badge-running  { color: var(--executing-color); background: var(--executing-bg); }
-    .agent-card-badge.badge-complete,
-    .agent-card-badge.badge-done     { color: var(--act-color); background: var(--act-bg); }
-    .agent-card-badge.badge-failed   { color: var(--broken-color); background: var(--broken-bg); }
-    .agent-card-meta {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      font-size: 11px;
-      color: var(--text-dim);
-    }
-    .agent-card-type { text-transform: capitalize; }
-    .agent-card-timer {
-      font-family: 'SF Mono', 'Fira Code', monospace;
-      font-size: 11px;
-      color: var(--text-dim);
-    }
-    .status-running .agent-card-timer { color: var(--executing-color); }
-    .agent-card-error {
-      font-size: 11px;
-      color: var(--broken-color);
-      margin-top: 2px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-    .agent-card-summary {
-      font-size: 12px;
-      color: var(--text-dim);
-      margin-top: 4px;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-    .agent-card-view-result {
-      display: inline-block;
-      margin-top: 6px;
-      padding: 3px 10px;
-      font-size: 11px;
-      font-weight: 500;
-      color: var(--act-color);
-      background: transparent;
-      border: 1px solid var(--act-color);
-      border-radius: 4px;
-      cursor: pointer;
-      transition: background 0.15s, color 0.15s;
-      align-self: flex-start;
-    }
-    .agent-card-view-result:hover {
-      background: var(--act-color);
-      color: var(--surface1);
-    }
-    /* ── Discuss (interview) flow ── */
-    .discuss-container {
-      margin-top: 8px;
-      border: 1px solid var(--border);
-      border-radius: var(--radius);
-      padding: 10px;
-      background: var(--surface2);
-    }
-    .discuss-loading { display: flex; flex-direction: column; gap: 8px; }
-    .discuss-streaming {
-      font-family: 'SF Mono', 'Fira Code', monospace;
-      font-size: 11px;
-      color: var(--executing-color);
-      max-height: 120px;
-      overflow-y: auto;
-      white-space: pre-wrap;
-      word-break: break-word;
-      margin: 0;
-    }
-    .discuss-header {
-      font-size: 12px;
-      font-weight: 600;
-      color: var(--text-bright);
-      margin-bottom: 8px;
-    }
-    .discuss-q {
-      margin-bottom: 10px;
-      padding-bottom: 8px;
-      border-bottom: 1px solid var(--border);
-    }
-    .discuss-q:last-of-type { border-bottom: none; }
-    .discuss-q-label {
-      font-size: 12px;
-      font-weight: 600;
-      color: var(--text-bright);
-      display: block;
-      margin-bottom: 4px;
-    }
-    .discuss-q-context {
-      font-size: 11px;
-      color: var(--text-dim);
-      margin-bottom: 6px;
-      font-style: italic;
-    }
-    .discuss-q-options {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 4px;
-      margin-bottom: 6px;
-    }
-    .discuss-option-btn {
-      padding: 3px 10px;
-      font-size: 11px;
-      border: 1px solid var(--border);
-      border-radius: 4px;
-      background: var(--surface3);
-      color: var(--text-muted);
-      cursor: pointer;
-    }
-    .discuss-option-btn:hover {
-      border-color: var(--accent);
-      color: var(--accent);
-    }
-    .discuss-q-input {
-      width: 100%;
-      background: var(--surface1);
-      border: 1px solid var(--border);
-      border-radius: 4px;
-      color: var(--text-bright);
-      font-size: 12px;
-      padding: 6px 8px;
-      resize: vertical;
-      font-family: inherit;
-    }
-    .discuss-q-input:focus {
-      outline: none;
-      border-color: var(--accent);
-    }
-    .discuss-actions {
-      display: flex;
-      gap: 8px;
-      margin-top: 10px;
-    }
-    .discuss-error {
-      font-size: 12px;
-      color: var(--text-muted);
-      margin-bottom: 8px;
-    }
-    .agent-timer-final {
-      color: var(--text-muted);
-    }
-    /* ── Classification toggle buttons ── */
-    .classify-btn {
-      background: var(--surface2);
-      border: 1px solid var(--border);
-      color: var(--text-dim);
-      padding: 4px 12px;
-      border-radius: 6px;
-      font-size: 11px;
-      font-weight: 600;
-      cursor: pointer;
-      transition: background 0.15s, border-color 0.15s, color 0.15s;
-    }
-    .classify-btn:hover { background: #252535; border-color: #3a3a50; color: var(--text); }
-    .classify-btn.active {
-      background: var(--mile-bg);
-      border-color: var(--mile-border);
-      color: var(--mile-color);
-    }
-    /* ── Classification icon on nodes ── */
-    .class-icon {
-      font-size: 10px;
-      margin-right: 4px;
-      vertical-align: middle;
-    }
-    /* ── Readiness badges on milestone nodes ── */
-    .readiness-badge {
-      display: inline-block;
-      font-size: 9px;
-      font-weight: 600;
-      letter-spacing: 0.5px;
-      padding: 1px 6px;
-      border-radius: 8px;
-      margin-left: 4px;
-      vertical-align: middle;
-    }
-    .readiness-ready {
-      background: rgba(52, 211, 153, 0.15);
-      color: #34d399;
-      border: 1px solid rgba(52, 211, 153, 0.3);
-    }
-    .readiness-blocked {
-      background: rgba(255, 77, 109, 0.15);
-      color: #ff4d6d;
-      border: 1px solid rgba(255, 77, 109, 0.3);
-    }
-    .readiness-no-actions {
-      background: rgba(110, 110, 136, 0.15);
-      color: #6e6e88;
-      border: 1px solid rgba(110, 110, 136, 0.3);
-    }
-    /* ── Dependency indicator on nodes ── */
-    .dep-indicator {
-      font-size: 9px;
-      margin-left: 5px;
-      padding: 1px 5px;
-      border-radius: 8px;
-      background: rgba(255,255,255,0.06);
-      color: var(--text-dim);
-      vertical-align: middle;
-    }
-    /* ── Dependency tags in detail panel ── */
-    .dep-tag {
-      display: inline-flex;
-      align-items: center;
-      gap: 4px;
-      padding: 3px 8px;
-      border-radius: 6px;
-      font-size: 11px;
-      font-weight: 500;
-      background: var(--mile-bg);
-      border: 1px solid var(--mile-border);
-      color: var(--mile-color);
-      cursor: pointer;
-      transition: border-color 0.12s;
-    }
-    .dep-tag:hover { border-color: var(--mile-color); }
-    .dep-remove {
-      font-size: 13px;
-      line-height: 1;
-      opacity: 0.5;
-      cursor: pointer;
-      transition: opacity 0.12s;
-    }
-    .dep-remove:hover { opacity: 1; color: var(--broken-color); }
-    /* ── Review state badges ── */
-    .review-badge {
-      display: inline-block;
-      padding: 2px 7px;
-      border-radius: 99px;
-      font-size: 10px;
-      font-weight: 600;
-      letter-spacing: 0.02em;
-      text-transform: uppercase;
-      cursor: pointer;
-      user-select: none;
-      transition: opacity 0.15s;
-    }
-    .review-badge:hover { opacity: 0.8; }
-    .review-draft           { background: rgba(255,255,255,0.05); color: var(--text-dim); border: 1px solid var(--border); }
-    .review-in_review       { background: rgba(147,197,253,0.1); color: #93c5fd; border: 1px solid rgba(147,197,253,0.25); }
-    .review-revision_needed { background: rgba(251,191,36,0.1); color: #fbbf24; border: 1px solid rgba(251,191,36,0.25); }
-    .review-approved        { background: rgba(134,239,172,0.1); color: #86efac; border: 1px solid rgba(134,239,172,0.25); }
-    /* ── Annotation panel ── */
-    .annotation-panel {
-      margin-top: 20px;
-      border-top: 1px solid var(--border);
-      padding-top: 16px;
-    }
-    .annotation-count {
-      font-size: 10px;
-      color: var(--text-dim);
-      font-weight: 400;
-    }
-    .annotation-lines {
-      font-family: 'SF Mono', 'Fira Code', monospace;
-      font-size: 11px;
-      line-height: 1.6;
-      background: var(--bg);
-      border: 1px solid var(--border);
-      border-radius: 6px;
-      padding: 8px 0;
-      max-height: 400px;
-      overflow-y: auto;
-    }
-    .ann-line {
-      display: flex;
-      padding: 0 10px;
-    }
-    .ann-line:hover {
-      background: var(--surface2);
-    }
-    .ann-line-num {
-      color: var(--text-dim);
-      opacity: 0.5;
-      min-width: 32px;
-      text-align: right;
-      padding-right: 10px;
-      cursor: pointer;
-      user-select: none;
-    }
-    .ann-line-num:hover {
-      opacity: 1;
-      color: #60a5fa;
-    }
-    .ann-line-text {
-      white-space: pre;
-      overflow-x: auto;
-      flex: 1;
-    }
-    .ann-line.has-annotation {
-      background: rgba(234, 179, 8, 0.08);
-      border-left: 2px solid #eab308;
-    }
-    .ann-comment {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      padding: 4px 10px 4px 42px;
-      background: rgba(234, 179, 8, 0.06);
-      border-left: 2px solid #eab308;
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-      font-size: 11px;
-    }
-    .ann-comment-text {
-      flex: 1;
-      color: #eab308;
-    }
-    .ann-comment-meta {
-      font-size: 9px;
-      color: var(--text-dim);
-      opacity: 0.6;
-    }
-    .ann-resolve-btn {
-      background: none;
-      border: none;
-      color: var(--text-dim);
-      cursor: pointer;
-      font-size: 14px;
-      padding: 0 4px;
-      opacity: 0.5;
-    }
-    .ann-resolve-btn:hover {
-      opacity: 1;
-      color: var(--broken-color);
-    }
-    .ann-input-row {
-      display: flex;
-      gap: 6px;
-      padding: 4px 10px 4px 42px;
-      background: rgba(96, 165, 250, 0.06);
-    }
-    .ann-input {
-      flex: 1;
-      background: var(--surface);
-      border: 1px solid var(--border);
-      color: var(--text);
-      border-radius: 4px;
-      padding: 4px 8px;
-      font-size: 11px;
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-    }
-    .ann-input:focus {
-      outline: none;
-      border-color: #60a5fa;
-    }
-    .ann-submit-btn {
-      background: #60a5fa;
-      color: #000;
-      border: none;
-      border-radius: 4px;
-      padding: 4px 10px;
-      font-size: 10px;
-      font-weight: 700;
-      cursor: pointer;
-    }
-    .ann-submit-btn:hover {
-      background: #93bbfd;
-    }
-    .ann-show-more-btn {
-      display: block;
-      width: 100%;
-      background: none;
-      border: none;
-      border-top: 1px solid var(--border);
-      color: var(--text-dim);
-      padding: 6px;
-      font-size: 10px;
-      cursor: pointer;
-      text-align: center;
-    }
-    .ann-show-more-btn:hover {
-      color: var(--text);
-      background: var(--surface2);
-    }
-    .ann-no-artifact {
-      color: var(--text-dim);
-      font-size: 11px;
-      opacity: 0.5;
-      font-style: italic;
-      padding: 8px 0;
-    }
-    .ann-approve-section {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      margin-top: 12px;
-      padding: 10px 12px;
-      background: rgba(34, 197, 94, 0.08);
-      border: 1px solid rgba(34, 197, 94, 0.3);
-      border-radius: 6px;
-    }
-    .ann-approve-msg {
-      flex: 1;
-      font-size: 11px;
-      color: #22c55e;
-      font-weight: 500;
-    }
-    .ann-approve-btn {
-      background: #22c55e;
-      color: #000;
-      border: none;
-      border-radius: 4px;
-      padding: 6px 16px;
-      font-size: 11px;
-      font-weight: 700;
-      cursor: pointer;
-      text-transform: uppercase;
-      letter-spacing: 0.05em;
-    }
-    .ann-approve-btn:hover {
-      background: #4ade80;
-    }
-    /* ── Revision round badge ── */
-    .revision-round-badge {
-      background: #e8e0ff;
-      color: #5b21b6;
-      font-size: 11px;
-      padding: 2px 8px;
-      border-radius: 10px;
-      font-weight: 600;
-      margin-left: 8px;
-    }
-    /* ── Revision request button and output panel ── */
-    .ann-revise-section {
-      padding: 12px 8px;
-      border-top: 1px solid #e5e7eb;
-      margin-top: 8px;
-    }
-    .ann-revise-btn {
-      background: #7c3aed;
-      color: white;
-      border: none;
-      padding: 8px 16px;
-      border-radius: 6px;
-      cursor: pointer;
-      font-weight: 600;
-      width: 100%;
-      font-size: 12px;
-    }
-    .ann-revise-btn:hover {
-      background: #6d28d9;
-    }
-    .ann-revise-btn:disabled {
-      opacity: 0.6;
-      cursor: not-allowed;
-    }
-    .ann-revise-hint {
-      font-size: 11px;
-      color: #6b7280;
-      margin-top: 4px;
-      text-align: center;
-    }
-    #revision-panel {
-      background: #1e1b2e;
-      border-radius: 8px;
-      padding: 12px;
-      margin-top: 12px;
-    }
-    .revision-panel-header {
-      color: #c4b5fd;
-      font-weight: 600;
-      margin-bottom: 8px;
-      font-size: 13px;
-    }
-    #revision-output {
-      background: #0f0d1a;
-      color: #e2e8f0;
-      font-size: 11px;
-      font-family: monospace;
-      padding: 8px;
-      border-radius: 4px;
-      max-height: 300px;
-      overflow-y: auto;
-      white-space: pre-wrap;
-      word-break: break-word;
-    }
-    .revision-stop-btn {
-      background: #ef4444;
-      color: white;
-      border: none;
-      padding: 4px 12px;
-      border-radius: 4px;
-      cursor: pointer;
-      margin-top: 8px;
-      font-size: 12px;
-    }
-    .revision-stop-btn:hover {
-      background: #dc2626;
-    }
-    /* ── Diff view ── */
-    .ann-diff-toggle {
-      background: transparent;
-      border: 1px solid #7c3aed;
-      color: #7c3aed;
-      font-size: 11px;
-      padding: 2px 8px;
-      border-radius: 4px;
-      cursor: pointer;
-      margin-left: 8px;
-    }
-    .ann-diff-toggle:hover {
-      background: #7c3aed;
-      color: white;
-    }
-    .diff-view {
-      font-family: 'SF Mono', 'Fira Code', monospace;
-      font-size: 11px;
-      overflow-x: auto;
-      max-height: 500px;
-      overflow-y: auto;
-      border-radius: 4px;
-      border: 1px solid var(--border);
-    }
-    .diff-header {
-      padding: 8px 12px;
-      background: var(--surface2);
-      border-bottom: 1px solid var(--border);
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      font-weight: 600;
-      font-size: 12px;
-      color: var(--text-bright);
-    }
-    .diff-line {
-      display: flex;
-      padding: 0 8px;
-      min-height: 20px;
-      line-height: 20px;
-    }
-    .diff-line.diff-add {
-      background: rgba(34, 197, 94, 0.12);
-    }
-    .diff-line.diff-remove {
-      background: rgba(239, 68, 68, 0.12);
-    }
-    .diff-line.diff-same {
-      background: transparent;
-    }
-    .diff-gutter {
-      width: 35px;
-      text-align: right;
-      padding-right: 8px;
-      color: var(--text-dim);
-      user-select: none;
-      flex-shrink: 0;
-      font-size: 10px;
-      opacity: 0.5;
-    }
-    .diff-gutter-old {}
-    .diff-gutter-new {}
-    .diff-text {
-      flex: 1;
-      white-space: pre-wrap;
-      word-break: break-all;
-    }
-    .diff-prefix {
-      width: 16px;
-      text-align: center;
-      flex-shrink: 0;
-      font-weight: bold;
-    }
-    .diff-prefix.diff-add {
-      color: #22c55e;
-    }
-    .diff-prefix.diff-remove {
-      color: #ef4444;
-    }
-    .diff-close-btn {
-      background: transparent;
-      border: 1px solid var(--text-dim);
-      color: var(--text-dim);
-      font-size: 11px;
-      padding: 2px 8px;
-      border-radius: 4px;
-      cursor: pointer;
-    }
-    .diff-close-btn:hover {
-      border-color: var(--text-bright);
-      color: var(--text-bright);
-    }
-    /* ── Readiness banner ── */
-    #readiness-banner {
-      display: none;
-      padding: 8px 16px;
-      background: var(--surface);
-      border-bottom: 1px solid var(--border);
-      font-size: 13px;
-      gap: 8px;
-      align-items: center;
-      flex-wrap: wrap;
-      flex-shrink: 0;
-    }
-    #readiness-banner.active { display: flex; }
-    .rb-progress { font-weight: 600; color: var(--text); }
-    .rb-remaining { color: var(--text-dim); }
-    .rb-complete { color: var(--act-color); font-weight: 600; }
-    .rb-link {
-      color: var(--act-color);
-      cursor: pointer;
-      text-decoration: underline;
-      margin: 0 2px;
-      font-size: 12px;
-    }
-    .rb-link:hover { opacity: 0.8; }
-    .rb-more { color: var(--text-dim); font-size: 12px; }
-    .enter-exec-btn {
-      margin-left: 8px;
-      padding: 7px 20px;
-      border: none;
-      border-radius: var(--radius);
-      font-weight: 600;
-      font-size: 13px;
-      cursor: pointer;
-      background: var(--accent);
-      color: #111;
-      transition: opacity 0.15s, transform 0.1s;
-    }
-    .enter-exec-btn:hover:not(:disabled) { opacity: 0.9; transform: translateY(-1px); }
-    .enter-exec-btn:active:not(:disabled) { transform: scale(0.98); }
-    .enter-exec-btn:disabled {
-      opacity: 0.3;
-      cursor: not-allowed;
-    }
-    /* ── Review action buttons ── */
-    .review-actions {
-      display: flex; gap: 8px; align-items: center;
-      margin: 12px 0; padding: 10px;
-      background: var(--surface1, var(--surface));
-      border-radius: 6px;
-      border: 1px solid var(--border);
-    }
-    .ra-btn {
-      padding: 6px 14px; border-radius: 4px; border: 1px solid var(--border);
-      cursor: pointer; font-size: 13px; font-weight: 500;
-      background: var(--surface2, var(--surface)); color: var(--text);
-      transition: background 0.15s, border-color 0.15s;
-    }
-    .ra-btn:hover { opacity: 0.85; }
-    .ra-approve.ra-active { background: var(--done-bg); color: var(--done-color); border-color: var(--done-border); }
-    .ra-revision.ra-active { background: var(--broken-bg); color: var(--broken-color); border-color: var(--broken-border); }
-    .ra-state { font-size: 12px; color: var(--text-dim); margin-left: auto; }
-    /* ── Execution pipeline view ── */
-    #execution-view {
-      display: none;
-      width: 100%;
-      height: 100%;
-      background: var(--bg);
-      padding-right: var(--panel-width);
-    }
-    #execution-view.active { display: flex; flex-direction: column; }
-    .exec-content { display: flex; flex-direction: row; flex: 1; overflow: hidden; }
-    .exec-left-panel {
-      width: 340px;
-      flex-shrink: 0;
-      overflow-y: auto;
-      border-right: 1px solid var(--border);
-      padding: 16px;
-    }
-    .exec-pipeline { }
-    .exec-output-panel {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      overflow: hidden;
-    }
-    .exec-output-header {
-      height: 36px;
-      flex-shrink: 0;
-      display: flex;
-      align-items: center;
-      padding: 0 16px;
-      background: var(--surface);
-      border-bottom: 1px solid var(--border);
-      font-size: 12px;
-      color: var(--text-dim);
-    }
-    .exec-output-log {
-      flex: 1;
-      overflow-y: auto;
-      padding: 12px 16px;
-      font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
-      font-size: 12px;
-      line-height: 1.6;
-      color: var(--text);
-      white-space: pre-wrap;
-      word-break: break-all;
-      background: var(--bg);
-      margin: 0;
-    }
-    .exec-output-empty {
-      color: var(--text-dim);
-      font-size: 13px;
-      padding: 40px;
-      text-align: center;
-    }
-    .exec-wave-label {
-      font-size: 11px;
-      color: var(--text-dim);
-      margin-bottom: 4px;
-      padding-left: 4px;
-      margin-top: 16px;
-    }
-    .exec-wave-label:first-child { margin-top: 0; }
-    .exec-milestone-group {
-      margin-bottom: 16px;
-    }
-    .exec-milestone-header {
-      font-weight: 600;
-      color: var(--mile-color);
-      padding: 8px 12px;
-      background: var(--mile-bg);
-      border: 1px solid var(--mile-border);
-      border-radius: 6px;
-      font-size: 14px;
-      display: flex;
-      align-items: center;
-      gap: 8px;
-    }
-    .exec-milestone-header .exec-milestone-status {
-      font-size: 10px;
-      font-weight: 700;
-      letter-spacing: 0.05em;
-      text-transform: uppercase;
-      padding: 2px 8px;
-      border-radius: 8px;
-      background: rgba(255,255,255,0.06);
-      margin-left: auto;
-      flex-shrink: 0;
-    }
-    .exec-action-list {
-      margin-left: 20px;
-      border-left: 2px solid var(--border);
-      padding-left: 16px;
-    }
-    .exec-action-item {
-      display: flex;
-      align-items: center;
-      gap: 10px;
-      padding: 8px 12px;
-      margin: 4px 0;
-      background: var(--surface);
-      border: 1px solid var(--border);
-      border-radius: 4px;
-      cursor: pointer;
-      font-size: 13px;
-      transition: background 0.15s, border-color 0.15s;
-    }
-    .exec-action-item:hover { background: var(--surface2); }
-    .exec-action-item.active {
-      border-color: var(--executing-border);
-      background: var(--executing-bg);
-    }
-    .exec-status-dot {
-      width: 10px;
-      height: 10px;
-      border-radius: 50%;
-      flex-shrink: 0;
-      transition: background 0.3s ease, box-shadow 0.3s ease;
-    }
-    .exec-status-dot.queued  { background: #555; }
-    .exec-status-dot.running { background: var(--planned-color); animation: exec-pulse 1.5s ease-in-out infinite; }
-    .exec-status-dot.done    { background: var(--act-color); animation: dotComplete 0.3s ease; }
-    .exec-status-dot.failed  { background: var(--broken-color); animation: dotComplete 0.3s ease; }
-    @keyframes exec-pulse {
-      0%, 100% { opacity: 1; }
-      50%      { opacity: 0.3; }
-    }
-    @keyframes dotComplete {
-      0%   { transform: scale(1); }
-      50%  { transform: scale(1.3); }
-      100% { transform: scale(1); }
-    }
-    .exec-action-title {
-      flex: 1;
-      color: var(--text);
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-    .exec-action-status-label {
-      font-size: 11px;
-      color: var(--text-dim);
-      text-transform: uppercase;
-      flex-shrink: 0;
-    }
-    /* ── Execution mode: hide all edit controls ── */
-    body.exec-mode #new-decl-btn { display: none; }
-    body.exec-mode #play-btn { display: none; }
-    body.exec-mode #workflow-banner { display: none; }
-    body.exec-mode #readiness-banner { display: none; }
-    body.exec-mode #side-panel { display: none; }
-    body.exec-mode #activity-feed { display: none; }
-    body.exec-mode #execution-view { padding-right: 0; }
-    /* ── Execution topbar ── */
-    .exec-topbar {
-      display: none;
-      align-items: center;
-      gap: 12px;
-      padding: 0 16px;
-      height: 36px;
-      background: var(--surface);
-      border-bottom: 1px solid var(--border);
-      flex-shrink: 0;
-    }
-    body.exec-mode .exec-topbar { display: flex; }
-    body:not(.exec-mode) .exec-topbar { display: none; }
-    .exec-topbar-title {
-      font-size: 13px;
-      font-weight: 600;
-      color: var(--text-bright);
-      flex-shrink: 0;
-    }
-    .exec-exit-btn {
-      padding: 4px 12px;
-      border-radius: 4px;
-      border: 1px solid var(--border);
-      background: var(--surface2);
-      color: var(--text);
-      cursor: pointer;
-      font-size: 12px;
-    }
-    .exec-exit-btn:hover { background: var(--border); }
-    .exec-stop-btn {
-      padding: 4px 12px;
-      border-radius: 4px;
-      border: 1px solid var(--broken-border);
-      background: var(--broken-bg);
-      color: var(--broken-color);
-      cursor: pointer;
-      font-size: 12px;
-      font-weight: 600;
-    }
-    .exec-stop-btn:hover { opacity: 0.85; }
-    /* ── Execution progress bar ── */
-    .exec-progress-container {
-      height: 6px;
-      background: var(--bg);
-      border-radius: 3px;
-      flex: 1;
-      margin: 0 16px;
-      min-width: 120px;
-    }
-    .exec-progress-fill {
-      height: 100%;
-      background: var(--decl-color);
-      border-radius: 3px;
-      transition: width 0.3s ease;
-      width: 0;
-    }
-    .exec-progress-pct {
-      font-size: 13px;
-      color: var(--text-dim);
-      min-width: 40px;
-      text-align: right;
-    }
-    /* ── Pre-execution wave order view ── */
-    .exec-preorder-list {
-      list-style: none;
-      padding: 0;
-      margin: 0;
-      counter-reset: wave-counter;
-    }
-    .exec-preorder-wave {
-      border-left: 3px solid var(--planned-color);
-      padding: 12px 16px;
-      margin-bottom: 16px;
-    }
-    .exec-preorder-wave-header {
-      font-size: 13px;
-      font-weight: 700;
-      color: var(--text);
-      margin-bottom: 8px;
-    }
-    .exec-preorder-milestone {
-      padding: 6px 12px;
-      font-size: 13px;
-      color: var(--mile-color);
-    }
-    .exec-preorder-action {
-      padding: 4px 12px 4px 24px;
-      font-size: 12px;
-      color: var(--text-dim);
-      display: flex;
-      align-items: center;
-      gap: 8px;
-    }
-    .exec-confirm-btn {
-      background: var(--act-color);
-      color: white;
-      border: none;
-      padding: 10px 24px;
-      border-radius: 6px;
-      font-size: 14px;
-      font-weight: 600;
-      cursor: pointer;
-      margin-top: 20px;
-      width: 100%;
-    }
-    .exec-confirm-btn:hover { opacity: 0.9; }
-    /* ── Drag-to-reorder feedback ── */
-    .exec-dragging { opacity: 0.4; outline: 2px dashed var(--planned-color); }
-    .exec-drop-valid { outline: 2px solid var(--act-color); background: rgba(52, 211, 153, 0.08); }
-    .exec-drop-invalid { outline: 2px solid var(--broken-color); opacity: 0.5; cursor: no-drop; }
-    .exec-preorder-milestone[draggable="true"],
-    .exec-preorder-action[draggable="true"] { cursor: grab; }
-    .exec-preorder-milestone[draggable="true"]:active,
-    .exec-preorder-action[draggable="true"]:active { cursor: grabbing; }
-    .exec-preorder-milestone[draggable="true"]::before,
-    .exec-preorder-action[draggable="true"]::before {
-      content: "\22EE\22EE";
-      color: var(--text-dim);
-      margin-right: 6px;
-      font-size: 11px;
-      letter-spacing: -3px;
-    }
-    /* ── Failure modal ── */
-    .exec-failure-overlay {
-      position: fixed;
-      inset: 0;
-      background: rgba(0,0,0,0.6);
-      z-index: 1000;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-    .exec-failure-modal {
-      background: var(--bg-card, #1e1e1e);
-      border: 1px solid var(--border, #333);
-      border-radius: 8px;
-      padding: 24px;
-      max-width: 420px;
-      width: 90%;
-      box-shadow: 0 8px 32px rgba(0,0,0,0.4);
-    }
-    .exec-failure-title {
-      font-size: 16px;
-      font-weight: 600;
-      color: #ff6b6b;
-      margin-bottom: 12px;
-    }
-    .exec-failure-details {
-      font-size: 13px;
-      color: var(--text-dim);
-      margin-bottom: 20px;
-      font-family: monospace;
-      white-space: pre-line;
-    }
-    .exec-failure-actions {
-      display: flex;
-      gap: 10px;
-      flex-wrap: wrap;
-    }
-    .exec-failure-btn {
-      padding: 8px 16px;
-      border-radius: 4px;
-      border: none;
-      cursor: pointer;
-      font-size: 13px;
-      font-weight: 500;
-    }
-    .exec-failure-btn.view-output {
-      background: transparent;
-      color: var(--accent, #4a9eff);
-      border: 1px solid var(--accent, #4a9eff);
-    }
-    .exec-failure-btn.skip {
-      background: #e8a838;
-      color: #000;
-    }
-    .exec-failure-btn.stop {
-      background: #ff4444;
-      color: #fff;
-    }
-    .exec-failure-btn:hover { opacity: 0.85; }
-  </style>
-</head>
-<body>
-<!-- Status bar — project name + breadcrumb + nav | integrity + next/execute -->
-<div id="status-bar">
-  <span class="project-name" id="project-name">Declare</span>
-  <div id="status-breadcrumb"></div>
-  <div class="status-right">
-    <span class="status-pill" id="integrity-pill"><span class="pill-value">–</span></span>
-    <button id="execute-main-btn">Next</button>
-  </div>
-  <button id="new-decl-btn" class="new-decl-btn" style="display:none">+ Declaration</button>
-  <button id="play-btn" class="play-btn" title="Execute all ready agent milestones in dependency order" style="display:none">Play All</button>
-</div>
-<!-- Hidden stat/compat elements -->
-<span id="stat-decls" style="display:none">0</span>
-<span id="stat-miles" style="display:none">0</span>
-<span id="stat-acts" style="display:none">0</span>
-<span id="health-badge" style="display:none"></span>
-<span id="last-updated" style="display:none"></span>
-<!-- Legacy workflow banner (hidden, rendered inside status bar now) -->
-<div id="workflow-banner" style="display:none">
-  <span class="wf-state-label" id="wf-state-label"></span>
-  <div class="wf-progress-bar"><div class="wf-progress-fill" id="wf-progress-fill"></div></div>
-  <span class="wf-pct" id="wf-pct"></span>
-  <span class="wf-next-label" id="wf-next-label"></span>
-  <button class="wf-action-btn" id="wf-action-btn"></button>
-</div>
-<!-- Play progress banner -->
-<div id="play-banner">
-  <span class="play-wave-label" id="play-wave-label">Wave 0/0</span>
-  <div class="play-actions-list" id="play-actions-list"></div>
-  <button class="play-stop-btn" id="play-stop-btn">Stop</button>
-</div>
-<!-- Main -->
-<div id="main">
-  <!-- Readiness banner — hidden, replaced by drill prompts -->
-  <div id="readiness-banner"></div>
-  <!-- Drill browser — 3-panel drill-down: detail | list | activity -->
-  <div id="drill-browser" class="active">
-    <div id="drill-breadcrumb"></div>
-    <div id="drill-body">
-      <div id="drill-detail"></div>
-      <div id="drill-center">
-        <div id="drill-context"></div>
-        <div id="drill-list"></div>
-        <div id="drill-prompt"></div>
-      </div>
-    </div>
-  </div>
-  <div id="decl-form-container" style="display:none"></div>
-  <button id="col-decl-add-btn" style="display:none"></button>
-  <!-- Execution view — CI pipeline layout with live output panel -->
-  <div id="execution-view">
-    <div class="exec-topbar">
-      <span class="exec-topbar-title" id="exec-topbar-title">Execution Mode</span>
-      <span id="exec-wave-status" style="font-size:12px;color:var(--text-dim)"></span>
-      <div class="exec-progress-container"><div class="exec-progress-fill" id="exec-progress-fill"></div></div>
-      <span class="exec-progress-pct" id="exec-progress-pct"></span>
-      <button class="exec-stop-btn" id="exec-stop-btn">Stop</button>
-      <button class="exec-exit-btn" id="exec-exit-btn">Exit</button>
-    </div>
-    <div class="exec-content">
-      <div class="exec-left-panel">
-        <div class="exec-pipeline" id="exec-pipeline"></div>
-      </div>
-      <div class="exec-output-panel">
-        <div class="exec-output-header" id="exec-output-header">No action selected</div>
-        <pre class="exec-output-log" id="exec-output-log"></pre>
-      </div>
-    </div>
-    <div class="exec-failure-overlay" id="exec-failure-overlay" style="display:none;">
-      <div class="exec-failure-modal">
-        <div class="exec-failure-title">Action Failed</div>
-        <div class="exec-failure-details" id="exec-failure-details"></div>
-        <div class="exec-failure-actions">
-          <button class="exec-failure-btn view-output" id="exec-failure-view">View Output</button>
-          <button class="exec-failure-btn skip" id="exec-failure-skip">Skip &amp; Continue</button>
-          <button class="exec-failure-btn stop" id="exec-failure-stop">Stop Pipeline</button>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-<!-- Side panel — always visible fixed right column -->
-<div id="side-panel">
-  <div id="panel-header">
-    <span id="panel-title">Details</span>
-  </div>
-  <div id="panel-body">
-    <div id="panel-empty" style="color:var(--text-dim);font-size:12px;padding:8px 0;line-height:1.7">
-      Click any node to see details.<br>
-      Click a declaration or milestone<br>to focus its subtree.
-    </div>
-  </div>
-</div>
-<!-- Activity feed placeholder (moved into drill-body via JS) -->
-<div id="activity-feed">
-  <div id="activity-toggle">
-    <div id="activity-pulse"></div>
-    <div id="activity-tabs">
-      <span class="activity-tab active" data-tab="cards">Agents</span>
-      <span class="activity-tab" data-tab="log">Log</span>
-    </div>
-  </div>
-  <div id="activity-cards" class="activity-tab-content active">
-    <div id="command-card" class="editing" tabindex="0">
-      <div class="cmd-label"><span class="cmd-key">C</span> Chat</div>
-      <div class="cmd-row">
-        <textarea id="command-card-input" rows="1" placeholder="Ask anything..."></textarea>
-        <kbd class="cmd-shortcut">C</kbd>
-      </div>
-      <div id="command-card-hint">Enter to send &middot; Esc to cancel</div>
-    </div>
-    <div id="activity-cards-active"></div>
-    <div id="activity-cards-recent"></div>
-  </div>
-  <div id="activity-list" class="activity-tab-content">
-    <div style="padding:16px;color:var(--text-muted);font-size:11px;text-align:center;">No activity yet</div>
-  </div>
-</div>
-<!-- Loading/error overlay -->
-<div id="overlay">
-  <div class="spinner"></div>
-  <div id="overlay-message">Loading graph…</div>
-  <div id="overlay-error"></div>
-  <button id="overlay-retry">Retry</button>
-</div>
-<!-- File Viewer Modal -->
-<div id="file-viewer-modal">
-  <div class="file-viewer-container">
-    <div class="file-viewer-header">
-      <span class="file-viewer-path" id="file-viewer-path"></span>
-      <button class="file-viewer-close" id="file-viewer-close">&times;</button>
-    </div>
-    <div class="file-viewer-body" id="file-viewer-body"></div>
-  </div>
-</div>
-<div id="version-label"></div>
-<script src="/public/app.js?v=28"></script>
-</body>
-</html>