@hanzlaa/rcode 4.4.4 → 4.6.0

package/server/lib/html/css.js

@@ -1,7 +1,7 @@
 /* CLAUDE.md exemption: pure CSS data file, no logic — 1000-line limit does not apply */
 /**
- * Dashboard CSS — Linear design system.
- * Dark-first (Linear-style). rcode accent: #5e6ad2 (Aether Blue).
+ * Dashboard CSS — Diwan design system.
+ * Dark-first. rcode accent: #22b6cf (Diwan Teal).
  */
 function renderCss() {
   return `<style>
@@ -10,56 +10,72 @@ function renderCss() {
 /* ── Design tokens ─────────────────────────────────────────────── */
 :root {
   /* Surfaces */
-  --bg-page:    #08090a;
-  --bg-elev-1:  #0f1011;
-  --bg-elev-2:  #161718;
-  --bg-elev-3:  #1c1d1f;
-  --bg-hover:   #23252a;
-  --bg-input:   #1a1b1d;
-  --bg-active:  #2c2d31;
+  --bg-page:    #0b0d0f;
+  --bg-elev-1:  #131619;
+  --bg-elev-2:  #1a1e22;
+  --bg-elev-3:  #222831;
+  --bg-hover:   #1e2329;
+  --bg-input:   #1a1e22;
+  --bg-active:  #262d35;
+  --bg-sunken:  #070809; /* wells/terminal chrome — one step below bg-page */
 
   /* Borders */
   --border-subtle:  rgba(255,255,255,0.06);
-  --border-default: #23252a;
-  --border-strong:  #323334;
+  --border-default: rgba(255,255,255,0.10);
+  --border-strong:  #2f373f;
 
   /* Text */
-  --text-primary:   #f7f8f8;
-  --text-secondary: #b4bcd0;
-  --text-tertiary:  #8a8f98;
-  --text-muted:     #62666d;
-
-  /* Brand — rcode keeps Aether Blue */
-  --accent-primary: #5e6ad2;
-  --accent-hover:   #7170ff;
-  --accent-active:  #4853bb;
-  --accent-bg:      rgba(94,106,210,0.12);
-  --accent-border:  rgba(94,106,210,0.35);
+  --text-primary:   #e8edf1;
+  --text-secondary: #a6b2bd;
+  --text-tertiary:  #717d88;
+  --text-muted:     #4c565f;
+
+  /* Brand — Diwan accent (teal) */
+  --accent-primary: #22b6cf;
+  --accent-hover:   #46cde3;
+  --accent-active:  #178ea3;
+  --accent-bg:      rgba(34,182,207,0.12);
+  --accent-border:  rgba(34,182,207,0.35);
+  --accent-fg:      #04222a;
 
   /* Semantic */
-  --green:   #4cb782;
-  --amber:   #f2c94c;
-  --red:     #eb5757;
-  --blue:    #26b5ce;
+  --green:   #3cb98a;
+  --amber:   #e0a63a;
+  --red:     #ec6a5e;
+  --blue:    #4d9fe8;
   --violet:  #bf7af0;
 
   /* Status */
-  --status-todo:     #e2e2e2;
-  --status-progress: #f2c94c;
-  --status-blocked:  #eb5757;
-  --status-done:     #4cb782;
+  --status-todo:     #7f8ea0;
+  --status-progress: #e0a63a;
+  --status-blocked:  #ec6a5e;
+  --status-done:     #3cb98a;
+
+  /* Per-status wash + border (badge/pill treatment) */
+  --st-planned:          #7f8ea0;
+  --st-planned-wash:     rgba(127,142,160,0.14);
+  --st-planned-border:   rgba(127,142,160,0.36);
+  --st-executing-wash:   rgba(224,166,58,0.15);
+  --st-executing-border: rgba(224,166,58,0.40);
+  --st-complete-wash:    rgba(60,185,138,0.15);
+  --st-complete-border:  rgba(60,185,138,0.40);
+  --st-blocked-wash:     rgba(236,106,94,0.15);
+  --st-blocked-border:   rgba(236,106,94,0.42);
+  --st-info-wash:        rgba(77,159,232,0.14);
+  --st-info-border:      rgba(77,159,232,0.40);
+  --chart-track: rgba(255,255,255,0.07);
 
   /* Type */
   --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-  --font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
+  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace;
 
   /* Size scale */
   --text-xl:  20px;
-  --text-lg:  17px;
-  --text-md:  15px;
-  --text-sm:  14px;
-  --text-xs:  13px;
-  --text-2xs: 11px;
+  --text-lg:  16px;
+  --text-md:  14px;
+  --text-sm:  12px;
+  --text-xs:  11px;
+  --text-2xs: 10px;
   --text-stat: 28px;  /* stat card value — large metric numeral */
 
   /* Component dimensions */
@@ -67,21 +83,21 @@ function renderCss() {
   --size-icon-btn: 32px; /* square icon button (hamburger, etc.) */
 
   /* Spacing (4px base) */
-  --space-1: 2px;
-  --space-2: 4px;
-  --space-3: 8px;
-  --space-4: 12px;
-  --space-5: 16px;
-  --space-6: 20px;
-  --space-7: 24px;
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 24px;
+  --space-6: 32px;
+  --space-7: 48px;
   --space-8: 32px;
   --space-10: 64px;
 
   /* Radius */
-  --radius-1: 2px;
-  --radius-2: 4px;
-  --radius-3: 6px;
-  --radius-4: 8px;
+  --radius-1: 4px;
+  --radius-2: 6px;
+  --radius-3: 9px;
+  --radius-4: 14px;
   --radius-5: 12px;
   --radius-full: 9999px;
 
@@ -89,9 +105,9 @@ function renderCss() {
   --shadow-lg:    0 16px 32px rgba(0,0,0,0.6);
 
   /* Motion */
-  --ease: cubic-bezier(0.4,0,0.2,1);
-  --t-fast: 120ms;
-  --t-base: 200ms;
+  --ease: cubic-bezier(0.32,0.72,0,1);
+  --t-fast: 90ms;
+  --t-base: 160ms;
   --t-menu: 240ms;
 
   /* Legacy compat aliases */
@@ -105,51 +121,81 @@ function renderCss() {
   --accent-red: var(--red);
   --accent-blue: var(--blue);
 
-  /* ── Dashboard redesign (mockup) tokens ──────────────────────────
-     Exact values from .planning/campaign/MOCKUP-SPEC.md. Namespaced
-     --dash-* so the Overview redesign can adopt the deep-navy mockup
-     palette without disturbing the existing Linear theme above. */
-  --dash-bg:         #0F1729; /* deep navy page base */
-  --dash-card:       #111A2E; /* card surface */
-  --dash-border:     #1E2A44; /* 1px hairline border */
-  --dash-teal:       #2DD4BF;
-  --dash-purple:     #A78BFA;
-  --dash-blue:       #3B82F6;
-  --dash-amber:      #F59E0B;
-  --dash-sev-high:   #F87171; /* red   — High   */
-  --dash-sev-medium: #FBBF24; /* amber — Medium */
-  --dash-sev-low:    #9CA3AF; /* gray  — Low    */
-  --dash-text:       #E6EDF7; /* primary text */
-  --dash-text-muted: #8595AD; /* muted text   */
-  --dash-hover:      rgba(255, 255, 255, 0.04); /* row/button hover wash */
+  /* ── Dashboard chrome tokens ──────────────────────────────────────
+     --dash-* aliases onto the Diwan design tokens above so the Overview
+     card grid, sidebar, and topbar share one palette with the rest of
+     the app — no independent hex values, single source of truth. */
+  --dash-bg:         var(--bg-page);
+  --dash-card:       var(--bg-elev-1);
+  --dash-border:     var(--border-subtle);
+  --dash-teal:       var(--accent-primary);
+  --dash-purple:     var(--accent-primary); /* was lavender; aliases accent teal now */
+  --dash-blue:       var(--status-progress); /* was blue; "in progress" amber now */
+  --dash-amber:      var(--amber);
+  --dash-sev-high:   var(--red);
+  --dash-sev-medium: var(--amber);
+  --dash-sev-low:    var(--text-tertiary);
+  --dash-text:       var(--text-primary);
+  --dash-text-muted: var(--text-tertiary);
+  --dash-hover:      var(--bg-hover);
 }
 
 /* Light mode */
 [data-theme="light"] {
-  --bg-page:    #f5f5f7;
+  --bg-page:    #f3f5f8;
   --bg-elev-1:  #ffffff;
-  --bg-elev-2:  #f0f0f2;
-  --bg-elev-3:  #e8e8ec;
-  --bg-hover:   #e2e2e8;
-  --bg-input:   #f8f8fa;
-  --bg-active:  #dcdce4;
-  --border-subtle:  rgba(0,0,0,0.06);
-  --border-default: #d8d8e0;
-  --border-strong:  #c0c0cc;
-  --text-primary:   #0f0f11;
-  --text-secondary: #4a4a58;
-  --text-tertiary:  #72727e;
-  --text-muted:     #9898a4;
-  --accent-bg: rgba(94,106,210,0.08);
-
-  /* Dashboard mockup tokens — light theme. Surfaces/text flip to light;
-     teal/purple/blue/amber accents and severity colors stay the same. */
-  --dash-bg:         #F4F6FB;
-  --dash-card:       #FFFFFF;
-  --dash-border:     #E2E8F0;
-  --dash-text:       #1A2233;
-  --dash-text-muted: #5B6B82;
-  --dash-hover:      rgba(15, 23, 41, 0.05);
+  --bg-elev-2:  #ffffff;
+  --bg-elev-3:  #eef2f6;
+  --bg-hover:   #edf1f5;
+  --bg-input:   #ffffff;
+  --bg-active:  #e4eaf0;
+  --bg-sunken:  #e7ecf1;
+  --border-subtle:  rgba(15,25,35,0.08);
+  --border-default: rgba(15,25,35,0.13);
+  --border-strong:  #ccd5de;
+  --text-primary:   #0f161c;
+  --text-secondary: #45525d;
+  --text-tertiary:  #6b7883;
+  --text-muted:     #a3adb6;
+
+  --accent-primary: #0f97b0;
+  --accent-hover:   #0c8299;
+  --accent-active:  #0a6d80;
+  --accent-bg:      rgba(15,151,176,0.10);
+  --accent-border:  rgba(15,151,176,0.34);
+  --accent-fg:      #ffffff;
+
+  --green:   #178a5f;
+  --amber:   #b0741a;
+  --red:     #d1443a;
+  --blue:    #2679c9;
+
+  --status-todo:     #62707d;
+  --status-progress: #b0741a;
+  --status-blocked:  #d1443a;
+  --status-done:     #178a5f;
+
+  --st-planned:          #62707d;
+  --st-planned-wash:     rgba(98,112,125,0.11);
+  --st-planned-border:   rgba(98,112,125,0.34);
+  --st-executing-wash:   rgba(176,116,26,0.12);
+  --st-executing-border: rgba(176,116,26,0.36);
+  --st-complete-wash:    rgba(23,138,95,0.12);
+  --st-complete-border:  rgba(23,138,95,0.36);
+  --st-blocked-wash:     rgba(209,68,58,0.11);
+  --st-blocked-border:   rgba(209,68,58,0.36);
+  --st-info-wash:        rgba(38,121,201,0.11);
+  --st-info-border:      rgba(38,121,201,0.36);
+  --chart-track: rgba(15,25,35,0.09);
+
+  /* Dashboard chrome tokens — light theme. Same alias approach; flips
+     automatically with the base tokens above. */
+  --dash-bg:         var(--bg-page);
+  --dash-card:       var(--bg-elev-1);
+  --dash-border:     var(--border-subtle);
+  --dash-text:       var(--text-primary);
+  --dash-text-muted: var(--text-tertiary);
+  --dash-hover:      var(--bg-hover);
 }
 
 /* ── Reset ─────────────────────────────────────────────────────── */
@@ -233,6 +279,7 @@ html, body {
 .nav-section:first-child { margin-top: 0; }
 
 .nav-link {
+  position: relative;
   display: flex;
   align-items: center;
   gap: var(--space-3);
@@ -252,7 +299,17 @@ html, body {
   transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
 }
 .nav-link:hover { background: var(--bg-hover); color: var(--text-secondary); }
-.nav-link.active { background: var(--bg-elev-2); color: var(--text-primary); }
+.nav-link.active { background: var(--accent-bg); color: var(--text-primary); font-weight: 600; }
+.nav-link.active::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 7px;
+  bottom: 7px;
+  width: 2px;
+  border-radius: 2px;
+  background: var(--accent-primary);
+}
 .nav-count {
   margin-left: auto;
   font-size: 10px;
@@ -308,7 +365,7 @@ html, body {
 
 /* ── Topbar / header ───────────────────────────────────────────── */
 header {
-  background: rgba(8,9,10,0.8); /* intentional: frosted glass tied to --bg-page exact value; alpha can't be expressed as a theme token */
+  background: rgba(11,13,15,0.8); /* intentional: frosted glass tied to --bg-page exact value; alpha can't be expressed as a theme token */
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   border-bottom: 1px solid var(--border-subtle);
@@ -323,7 +380,7 @@ header {
 }
 
 [data-theme="light"] header {
-  background: rgba(245,245,247,0.85); /* intentional: light frosted glass; alpha channel can't be expressed as a theme token */
+  background: rgba(243,245,248,0.85); /* intentional: light frosted glass; alpha channel can't be expressed as a theme token */
 }
 
 .brand {
@@ -418,6 +475,11 @@ header {
 /* ── Views ─────────────────────────────────────────────────────── */
 .view { display: none; }
 .view.active { display: block; }
+/* Orchestration's 2-column grid needs display:grid, not the block above.
+   Three classes (0,3,0) beats .view.active's (0,2,0) regardless of source
+   order, so this wins without touching the shared .view/.view.active rules
+   every other view relies on. */
+.view.active.orch-layout { display: grid; }
 
 .view-title {
   font-size: var(--text-xl);
@@ -658,7 +720,7 @@ section .body {
 /* ── Progress bar ───────────────────────────────────────────────── */
 .progress-bar {
   height: 4px;
-  background: var(--bg-elev-3);
+  background: var(--chart-track);
   border-radius: 2px;
   overflow: hidden;
   width: 100%;
@@ -688,7 +750,7 @@ section .body {
 .velocity-bar-track {
   flex: 1;
   height: 6px;
-  background: var(--bg-elev-3);
+  background: var(--chart-track);
   border-radius: 3px;
   overflow: hidden;
 }
@@ -946,7 +1008,7 @@ section .body {
 }
 .inline-file-entry:last-child { border-bottom: none; }
 .inline-file-entry:hover { background: var(--bg-hover); color: var(--text-primary); }
-.inline-file-entry.selected { background: rgba(94,106,210,0.1); color: var(--accent-primary); }
+.inline-file-entry.selected { background: rgba(34,182,207,0.1); color: var(--accent-primary); }
 .inline-file-group { margin-bottom: var(--space-3); }
 .inline-subgroup { padding-left: var(--space-4); }
 .file-path-header {
@@ -1073,7 +1135,7 @@ section .body {
   font-weight: 500;
   padding: 1px 5px;
   border-radius: var(--radius-full);
-  background: rgba(94,106,210,0.15);
+  background: rgba(34,182,207,0.15);
   color: var(--accent-hover);
   text-transform: uppercase;
   letter-spacing: 0.04em;
@@ -1121,8 +1183,8 @@ section .body {
   align-items: center;
   gap: var(--space-4);
   padding: var(--space-3) var(--space-5);
-  background: rgba(235,87,87,0.1);
-  border-bottom: 1px solid rgba(235,87,87,0.25);
+  background: rgba(236,106,94,0.1);
+  border-bottom: 1px solid rgba(236,106,94,0.25);
   font-size: var(--text-xs);
   flex-shrink: 0;
 }
@@ -1130,7 +1192,7 @@ section .body {
 .banner-list { color: var(--text-secondary); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .banner-dismiss {
   background: none;
-  border: 1px solid rgba(235,87,87,0.4);
+  border: 1px solid rgba(236,106,94,0.4);
   border-radius: var(--radius-2);
   color: var(--red);
   font-size: var(--text-2xs);
@@ -1139,12 +1201,12 @@ section .body {
   cursor: pointer;
   white-space: nowrap;
 }
-.banner-dismiss:hover { background: rgba(235,87,87,0.15); }
+.banner-dismiss:hover { background: rgba(236,106,94,0.15); }
 
 #parse-warning {
   padding: var(--space-3) var(--space-5);
-  background: rgba(242,201,76,0.08);
-  border-bottom: 1px solid rgba(242,201,76,0.2);
+  background: rgba(224,166,58,0.08);
+  border-bottom: 1px solid rgba(224,166,58,0.2);
   font-size: var(--text-xs);
   color: var(--amber);
 }
@@ -1234,7 +1296,7 @@ footer {
 }
 
 .kanban-col {
-  background: var(--bg-elev-1);
+  background: var(--bg-sunken);
   border: 1px solid var(--border-subtle);
   border-radius: var(--radius-4);
   min-height: 200px;
@@ -1317,10 +1379,10 @@ footer {
   box-shadow: 0 0 0 1px var(--accent-border);
 }
 .kanban-card.done {
-  border-color: rgba(76,183,130,0.3);
+  border-color: rgba(60,185,138,0.3);
 }
 .kanban-card.blocked-state {
-  border-color: rgba(235,87,87,0.3);
+  border-color: rgba(236,106,94,0.3);
 }
 
 /* Drag-over highlight */
@@ -1368,10 +1430,10 @@ footer {
   padding: 1px 5px;
   border-radius: var(--radius-1);
 }
-.s-todo     .kanban-card-status { background: rgba(226,226,226,0.1); color: var(--status-todo); }
-.s-in_progress .kanban-card-status { background: rgba(242,201,76,0.12); color: var(--status-progress); }
-.s-blocked  .kanban-card-status { background: rgba(235,87,87,0.12); color: var(--status-blocked); }
-.s-done     .kanban-card-status { background: rgba(76,183,130,0.12); color: var(--status-done); }
+.s-todo     .kanban-card-status { background: var(--st-planned-wash); color: var(--status-todo); border: 1px solid var(--st-planned-border); }
+.s-in_progress .kanban-card-status { background: var(--st-executing-wash); color: var(--status-progress); border: 1px solid var(--st-executing-border); }
+.s-blocked  .kanban-card-status { background: var(--st-blocked-wash); color: var(--status-blocked); border: 1px solid var(--st-blocked-border); }
+.s-done     .kanban-card-status { background: var(--st-complete-wash); color: var(--status-done); border: 1px solid var(--st-complete-border); }
 
 /* Running indicator on card */
 .card-run-indicator {
@@ -1428,17 +1490,17 @@ footer {
 .kanban-run-btn:hover {
   background: var(--accent-primary);
   border-color: var(--accent-primary);
-  color: white;
+  color: var(--accent-fg);
 }
 .kanban-run-btn:active { transform: scale(0.97); }
 
 .kanban-stop-btn {
-  background: rgba(235,87,87,0.1);
-  border-color: rgba(235,87,87,0.3);
+  background: rgba(236,106,94,0.1);
+  border-color: rgba(236,106,94,0.3);
   color: var(--red);
 }
 .kanban-stop-btn:hover {
-  background: rgba(235,87,87,0.2);
+  background: rgba(236,106,94,0.2);
 }
 .kanban-stop-btn:active { transform: scale(0.97); }
 
@@ -1514,7 +1576,7 @@ footer {
 }
 .orch-panel-resize:hover,
 .orch-panel-resize.dragging {
-  background: var(--accent, #5865f2);
+  background: var(--accent-primary, #22b6cf);
   opacity: 0.35;
 }
 .orch-panel.open {
@@ -1636,7 +1698,7 @@ footer {
   flex: 1;
   overflow-y: auto;
   padding: var(--space-4) var(--space-5);
-  background: #050507;
+  background: var(--bg-sunken);
   font-family: var(--font-mono);
   font-size: 12px;
   line-height: 1.6;
@@ -1756,11 +1818,11 @@ footer {
 }
 .orch-footer-btn:hover { background: var(--bg-active); color: var(--text-primary); }
 .orch-footer-btn.stop {
-  background: rgba(235,87,87,0.1);
-  border-color: rgba(235,87,87,0.3);
+  background: rgba(236,106,94,0.1);
+  border-color: rgba(236,106,94,0.3);
   color: var(--red);
 }
-.orch-footer-btn.stop:hover { background: rgba(235,87,87,0.2); }
+.orch-footer-btn.stop:hover { background: rgba(236,106,94,0.2); }
 
 /* ── Old kanban inline terminals (hidden) ────────────────────── */
 .kanban-log-panel { display: none !important; }
@@ -1800,9 +1862,9 @@ footer {
   padding: 1px 5px;
   border-radius: var(--radius-1);
 }
-.phase-status.done    { background: rgba(76,183,130,0.12); color: var(--green); }
-.phase-status.planned { background: rgba(94,106,210,0.12); color: var(--accent-hover); }
-.phase-status.active  { background: rgba(242,201,76,0.12); color: var(--amber); }
+.phase-status.done    { background: var(--st-complete-wash); color: var(--green); border: 1px solid var(--st-complete-border); }
+.phase-status.planned { background: var(--accent-bg); color: var(--accent-hover); border: 1px solid var(--accent-border); }
+.phase-status.active  { background: var(--st-executing-wash); color: var(--amber); border: 1px solid var(--st-executing-border); }
 
 /* Sprint / tasks */
 .sprint-card {
@@ -1854,7 +1916,7 @@ footer {
   font-size: 9px;
   color: var(--green);
 }
-.task-check.done { border-color: var(--green); background: rgba(76,183,130,0.12); }
+.task-check.done { border-color: var(--green); background: var(--st-complete-wash); }
 .task-id {
   font-family: var(--font-mono);
   font-size: var(--text-2xs);
@@ -1899,10 +1961,10 @@ footer {
   display: inline-flex;
   align-self: flex-start;
 }
-.memory-type.user    { background: rgba(94,106,210,0.12); color: var(--accent-hover); }
-.memory-type.feedback { background: rgba(242,201,76,0.12); color: var(--amber); }
-.memory-type.project { background: rgba(76,183,130,0.12); color: var(--green); }
-.memory-type.reference { background: rgba(38,181,206,0.12); color: var(--blue); }
+.memory-type.user    { background: var(--accent-bg); color: var(--accent-hover); border: 1px solid var(--accent-border); }
+.memory-type.feedback { background: var(--st-executing-wash); color: var(--amber); border: 1px solid var(--st-executing-border); }
+.memory-type.project { background: var(--st-complete-wash); color: var(--green); border: 1px solid var(--st-complete-border); }
+.memory-type.reference { background: var(--st-info-wash); color: var(--blue); border: 1px solid var(--st-info-border); }
 .memory-name {
   font-size: var(--text-xs);
   font-weight: 600;
@@ -2024,7 +2086,7 @@ footer {
   right: 0;
   height: 55vh;
   min-height: 300px;
-  background: #0c0c0e;
+  background: var(--bg-sunken);
   border-top: 2px solid var(--accent-primary);
   z-index: 201;
   flex-direction: column;
@@ -2126,7 +2188,7 @@ footer {
   flex: 1;
   overflow: hidden;
   padding: 6px 8px;
-  background: #0c0c0e;
+  background: var(--bg-sunken);
 }
 .term-hint {
   padding: var(--space-2) var(--space-3);
@@ -2146,7 +2208,7 @@ footer {
   background: var(--accent-primary);
   border: 1px solid rgba(255,255,255,0.1);
   border-radius: var(--radius-3);
-  color: white;
+  color: var(--accent-fg);
   font-size: var(--text-xs);
   font-weight: 500;
   font-family: var(--font-sans);
@@ -2232,7 +2294,7 @@ footer {
 .orch-card.orch-running { border-left-color: var(--accent-green); }
 .orch-card.orch-waiting {
   border-left-color: var(--accent-amber);
-  background: rgba(245,158,11,0.05);
+  background: rgba(224,166,58,0.05);
 }
 .orch-card.orch-waiting .orch-card-badge { color: var(--accent-amber); }
 .orch-card.orch-error,
@@ -2274,6 +2336,312 @@ footer {
   gap: var(--space-2);
 }
 
+/* ── Orchestration view — 2-column Diwan layout ──────────────────
+   .orch-layout replaces the old single-column stack (header → banner →
+   command runner → orch-grid → history). Left rail is fixed 300px; right
+   column hosts the docked xterm terminal (XtermPanel docked=true) + run
+   history beneath it. Reuses the existing bg-elev/border/st-*-wash
+   tokens — no new colors introduced. */
+.orch-layout {
+  display: grid;
+  grid-template-columns: 300px 1fr;
+  gap: var(--space-4);
+  height: 100%;
+  padding: var(--space-5) var(--space-6);
+  box-sizing: border-box;
+}
+.orch-left-rail {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  min-height: 0;
+}
+.orch-h1 {
+  margin: 0 0 2px;
+  font-size: var(--text-xl);
+  font-weight: 660;
+  letter-spacing: -0.01em;
+  color: var(--text-primary);
+}
+.orch-header-sub {
+  font-size: var(--text-sm);
+  color: var(--text-tertiary);
+}
+.orch-card-label {
+  padding: var(--space-3) var(--space-4);
+  border-bottom: 1px solid var(--border-subtle);
+  font-size: var(--text-2xs);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-tertiary);
+}
+
+/* Agents card — live rows for sessions the orchestrator is currently running. */
+.orch-runner-card {
+  background: var(--bg-elev-1);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-3);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+.orch-runner-list {
+  padding: var(--space-2);
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  overflow-y: auto;
+}
+.orch-runner-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 9px 10px;
+  border-radius: var(--radius-2);
+  cursor: pointer;
+  border: 1px solid transparent;
+  background: transparent;
+  transition: background var(--t-fast) var(--ease);
+}
+.orch-runner-row:hover { background: var(--bg-hover); }
+.orch-runner-row.selected { background: var(--accent-bg); border-color: var(--accent-border); }
+.orch-runner-row.attached { border-color: var(--accent-primary); }
+.orch-runner-abbr {
+  width: 26px;
+  height: 26px;
+  border-radius: var(--radius-2);
+  background: var(--bg-elev-3);
+  display: grid;
+  place-items: center;
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  color: var(--accent-primary);
+  flex-shrink: 0;
+}
+.orch-runner-info { flex: 1; min-width: 0; }
+.orch-runner-name {
+  font-size: var(--text-md);
+  color: var(--text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.orch-runner-role {
+  font-family: var(--font-mono);
+  font-size: var(--text-2xs);
+  color: var(--text-tertiary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.orch-runner-glance {
+  font-size: var(--text-2xs);
+  color: var(--text-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-top: 1px;
+}
+.orch-runner-status {
+  font-size: var(--text-xs);
+  font-weight: 600;
+  color: var(--text-muted);
+  white-space: nowrap;
+}
+.orch-runner-status.running { color: var(--green); }
+.orch-agent-status {
+  font-size: var(--text-2xs);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  padding: 2px 7px;
+  border-radius: var(--radius-1);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+.orch-agent-status.running { background: var(--st-executing-wash); color: var(--status-progress); border: 1px solid var(--st-executing-border); }
+.orch-agent-status.blocked { background: var(--st-blocked-wash); color: var(--status-blocked); border: 1px solid var(--st-blocked-border); }
+.orch-agent-status.exited  { background: transparent; color: var(--text-tertiary); border: 1px solid var(--border-subtle); }
+.orch-runner-empty { padding: var(--space-2) var(--space-1); }
+.orch-runner-card-footer {
+  padding: var(--space-3) var(--space-4);
+  border-top: 1px solid var(--border-subtle);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+.orch-runner-hint { font-size: var(--text-2xs); color: var(--text-tertiary); }
+.orch-run-cmd-field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+/* Pipeline card — live sessions, or a history-status summary fallback. */
+.orch-pipeline-card {
+  background: var(--bg-elev-1);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-3);
+  padding: var(--space-4);
+  overflow-y: auto;
+}
+.orch-pipeline-label {
+  font-size: var(--text-2xs);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-tertiary);
+  margin-bottom: var(--space-3);
+}
+.orch-pipeline-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 6px 8px;
+  margin: 0 -8px;
+  border-radius: var(--radius-2);
+  cursor: pointer;
+}
+.orch-pipeline-row.active { background: var(--accent-bg); }
+.orch-pipeline-glyph {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  font-size: 11px;
+  flex-shrink: 0;
+}
+.orch-pipeline-glyph.running,
+.orch-pipeline-glyph.stopped { background: var(--st-executing-wash); border: 1px solid var(--st-executing-border); color: var(--amber); }
+.orch-pipeline-glyph.blocked,
+.orch-pipeline-glyph.waiting,
+.orch-pipeline-glyph.exited,
+.orch-pipeline-glyph.error   { background: var(--st-blocked-wash); border: 1px solid var(--st-blocked-border); color: var(--red); }
+.orch-pipeline-glyph.done    { background: var(--st-complete-wash); border: 1px solid var(--st-complete-border); color: var(--green); }
+.orch-pipeline-label-text {
+  flex: 1;
+  font-size: var(--text-md);
+  color: var(--text-secondary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-transform: capitalize;
+}
+.orch-pipeline-count {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  color: var(--text-tertiary);
+  white-space: nowrap;
+}
+.orch-pipeline-actions { display: flex; gap: 4px; margin-left: 6px; }
+.orch-pipeline-action-btn {
+  background: transparent;
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-1);
+  color: var(--text-tertiary);
+  font-size: 10px;
+  line-height: 1;
+  padding: 3px 6px;
+  cursor: pointer;
+}
+.orch-pipeline-action-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
+.orch-pipeline-action-btn.danger { color: var(--red); border-color: rgba(236,106,94,0.4); }
+.orch-pipeline-action-btn.danger:hover { background: rgba(236,106,94,0.12); }
+
+/* Right column — docked terminal + run history beneath it. */
+.orch-right-col {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  height: 100%;
+  min-height: 0;
+}
+.orch-term-dock {
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius-3);
+  overflow: hidden;
+  background: var(--bg-sunken);
+  box-shadow: var(--shadow-lg);
+  display: flex;
+  flex-direction: column;
+  min-height: 320px;
+  flex: 1 1 auto;
+}
+.orch-term-dock-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  background: var(--bg-elev-2);
+  border-bottom: 1px solid var(--border-subtle);
+  flex-shrink: 0;
+}
+.orch-term-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
+.orch-term-dot.red   { background: var(--red); }
+.orch-term-dot.amber { background: var(--amber); }
+.orch-term-dot.green { background: var(--green); }
+.orch-term-dock-label {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  color: var(--text-tertiary);
+  margin-left: 6px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.orch-term-dock-live {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  margin-left: auto;
+  font-size: var(--text-2xs);
+  color: var(--green);
+  font-family: var(--font-mono);
+  white-space: nowrap;
+}
+.orch-term-dock-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
+.orch-term-dock-stop {
+  height: 22px;
+  padding: 0 10px;
+  border-radius: var(--radius-1);
+  font-size: var(--text-2xs);
+  font-weight: 600;
+  color: var(--red);
+  background: var(--st-blocked-wash);
+  border: 1px solid var(--st-blocked-border);
+  cursor: pointer;
+  font-family: var(--font-sans);
+  margin-left: var(--space-2);
+}
+.orch-term-dock-stop:hover { opacity: 0.85; }
+.orch-term-dock-body {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+.orch-term-dock-container {
+  flex: 1;
+  overflow: hidden;
+  padding: 14px;
+}
+.orch-term-dock-empty {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-6);
+  text-align: center;
+  color: var(--text-tertiary);
+  font-size: var(--text-sm);
+}
+.orch-hist-dock {
+  flex: 0 0 auto;
+  max-height: 240px;
+  overflow-y: auto;
+}
+.orch-hist-dock .hist-panel { margin-top: 0; }
+
 /* ── Run history panel ── */
 .hist-panel { margin-top: var(--space-6); }
 .hist-panel-title { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-md); color: var(--text-primary); margin-bottom: var(--space-4); }
@@ -2281,6 +2649,9 @@ footer {
 .hist-group-title { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); margin-bottom: var(--space-2); }
 .hist-date { font-size: var(--text-2xs); color: var(--text-muted); margin: var(--space-3) 0 var(--space-2); }
 .hist-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); background: var(--bg-elev-2); border: 1px solid var(--border-subtle); border-radius: var(--radius-2); margin-bottom: var(--space-2); }
+.hist-row.clickable { cursor: pointer; }
+.hist-row.clickable:hover { background: var(--bg-hover); }
+.hist-row.active { border-color: var(--accent-primary); background: var(--accent-bg); }
 .hist-row-id { font-weight: 600; font-size: var(--text-sm); color: var(--text-primary); }
 .hist-row-cmd { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-secondary); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .hist-row-duration { display: flex; align-items: center; gap: var(--space-1); font-size: var(--text-2xs); color: var(--text-muted); white-space: nowrap; }
@@ -2393,8 +2764,8 @@ footer {
 .sb-logo-badge {
   width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
   display: flex; align-items: center; justify-content: center;
-  font-weight: 800; font-size: 16px; color: #06121f;
-  background: linear-gradient(135deg, var(--dash-teal), var(--dash-blue));
+  font-weight: 800; font-size: 16px; color: var(--dash-ink);
+  background: linear-gradient(135deg, var(--accent-primary), var(--accent-hover));
 }
 .sb-logo-word { font-size: 16px; font-weight: 700; color: var(--dash-text); letter-spacing: -0.01em; }
 
@@ -2423,7 +2794,7 @@ footer {
   transition: background 0.15s, color 0.15s;
 }
 .sb-nav-link:hover { background: rgba(255, 255, 255, 0.04); color: var(--dash-text); }
-.sb-nav-link.active { background: rgba(45, 212, 191, 0.12); color: var(--dash-text); font-weight: 600; }
+.sb-nav-link.active { background: rgba(34, 182, 207, 0.12); color: var(--dash-text); font-weight: 600; }
 .sb-nav-link.active .sb-nav-ic { color: var(--dash-teal); }
 .sb-nav-ic { display: inline-flex; color: var(--dash-text-muted); }
 .sb-nav-label { flex: 1; }
@@ -2442,16 +2813,16 @@ footer {
 .phealth-pct { font-size: 26px; font-weight: 800; line-height: 1; color: var(--dash-text); }
 .phealth-pct-sign { font-size: 14px; font-weight: 700; margin-left: 1px; color: var(--dash-text-muted); }
 .phealth-label { font-size: 12px; font-weight: 600; }
-.phealth--good .phealth-label { color: var(--dash-teal); }
+.phealth--good .phealth-label { color: var(--status-done); }
 .phealth--warn .phealth-label { color: var(--dash-sev-medium); }
 .phealth--risk .phealth-label { color: var(--dash-sev-high); }
 .phealth-spark { width: 100%; height: 36px; display: block; }
 .phealth-spark-line { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
-.phealth--good .phealth-spark-line { stroke: var(--dash-teal); }
+.phealth--good .phealth-spark-line { stroke: var(--status-done); }
 .phealth--warn .phealth-spark-line { stroke: var(--dash-sev-medium); }
 .phealth--risk .phealth-spark-line { stroke: var(--dash-sev-high); }
 .phealth-spark-area { stroke: none; opacity: 0.14; }
-.phealth--good .phealth-spark-area { fill: var(--dash-teal); }
+.phealth--good .phealth-spark-area { fill: var(--status-done); }
 .phealth--warn .phealth-spark-area { fill: var(--dash-sev-medium); }
 .phealth--risk .phealth-spark-area { fill: var(--dash-sev-high); }
 
@@ -2463,8 +2834,8 @@ footer {
 .sb-avatar {
   width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
   display: flex; align-items: center; justify-content: center;
-  font-size: 12px; font-weight: 700; color: #06121f;
-  background: linear-gradient(135deg, var(--dash-purple), var(--dash-blue));
+  font-size: 12px; font-weight: 700; color: var(--dash-ink);
+  background: linear-gradient(135deg, var(--accent-primary), var(--accent-hover));
 }
 .sb-profile-meta { display: flex; flex-direction: column; min-width: 0; }
 .sb-profile-name { font-size: 13px; font-weight: 600; color: var(--dash-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@@ -2490,8 +2861,8 @@ footer {
   font-size: 12px; color: var(--dash-text-muted);
 }
 .tb-synced:hover { color: var(--dash-text); }
-.tb-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dash-teal); box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.18); flex-shrink: 0; }
-.tb-synced--busy .tb-dot { background: var(--dash-blue); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18); animation: tb-pulse 0.8s ease-in-out infinite; }
+.tb-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--status-done); box-shadow: 0 0 0 3px rgba(60, 185, 138, 0.18); flex-shrink: 0; }
+.tb-synced--busy .tb-dot { background: var(--dash-blue); box-shadow: 0 0 0 3px rgba(224, 166, 58, 0.18); animation: tb-pulse 0.8s ease-in-out infinite; }
 @keyframes tb-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
 .tb-btn {
   display: inline-flex; align-items: center; gap: 7px;
@@ -2503,8 +2874,8 @@ footer {
 }
 .tb-btn:hover { border-color: var(--dash-teal); }
 .tb-btn--primary {
-  background: linear-gradient(135deg, var(--dash-teal), var(--dash-blue));
-  border-color: transparent; color: #06121f;
+  background: linear-gradient(135deg, var(--accent-primary), var(--accent-hover));
+  border-color: transparent; color: var(--dash-ink);
 }
 .tb-btn--primary:hover { filter: brightness(1.05); border-color: transparent; }
 .tb-btn--icon { padding: 8px 11px; }
@@ -2759,7 +3130,7 @@ footer {
   border-radius: 50%;
   display: inline-block;
 }
-.donut-dot--done { background: var(--dash-teal); }
+.donut-dot--done { background: var(--status-done); }
 .donut-dot--prog { background: var(--dash-blue); }
 .donut-dot--idle { background: var(--dash-sev-low); }
 .donut-legend-label {
@@ -2806,8 +3177,8 @@ footer {
   justify-content: center;
   font-size: 20px;
   border-radius: 10px;
-  background: rgba(167, 139, 250, 0.12);
-  border: 1px solid rgba(167, 139, 250, 0.25);
+  background: var(--accent-bg);
+  border: 1px solid var(--accent-border);
 }
 .cp-headtext { min-width: 0; }
 .cp-titlerow {
@@ -2830,8 +3201,8 @@ footer {
   padding: 2px 9px;
   border-radius: 999px;
   color: var(--dash-purple);
-  background: rgba(167, 139, 250, 0.12);
-  border: 1px solid rgba(167, 139, 250, 0.3);
+  background: rgba(34, 182, 207, 0.12);
+  border: 1px solid rgba(34, 182, 207, 0.3);
   white-space: nowrap;
 }
 .cp-sub {
@@ -2887,14 +3258,14 @@ footer {
   z-index: 1;
 }
 .cp-done .cp-node {
-  background: var(--dash-teal);
-  border-color: var(--dash-teal);
+  background: var(--status-done);
+  border-color: var(--status-done);
   color: var(--dash-bg);
 }
 .cp-active .cp-node {
   background: var(--dash-card);
   border-color: var(--dash-purple);
-  box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.2);
+  box-shadow: 0 0 0 4px rgba(34, 182, 207, 0.2);
 }
 .cp-label {
   font-size: 10px;
@@ -3009,7 +3380,7 @@ footer {
   padding: 4px 9px;
   border-radius: 999px;
   color: var(--dash-blue);
-  background: rgba(59, 130, 246, 0.15);
+  background: rgba(224, 166, 58, 0.15);
 }
 
 /* ── Blockers — icon + title/desc + severity pill (Row 2, Card 3) ── */
@@ -3051,16 +3422,16 @@ footer {
 .bk-sev-medium { color: var(--dash-sev-medium); }
 .bk-sev-low    { color: var(--dash-sev-low);    }
 .bk-pill.bk-sev-high {
-  background: rgba(248, 113, 113, 0.12);
-  border-color: rgba(248, 113, 113, 0.35);
+  background: rgba(236, 106, 94, 0.12);
+  border-color: rgba(236, 106, 94, 0.35);
 }
 .bk-pill.bk-sev-medium {
-  background: rgba(251, 191, 36, 0.12);
-  border-color: rgba(251, 191, 36, 0.35);
+  background: rgba(224, 166, 58, 0.12);
+  border-color: rgba(224, 166, 58, 0.35);
 }
 .bk-pill.bk-sev-low {
-  background: rgba(156, 163, 175, 0.12);
-  border-color: rgba(156, 163, 175, 0.35);
+  background: rgba(113, 125, 136, 0.12);
+  border-color: rgba(113, 125, 136, 0.35);
 }
 
 /* ── RecentDecisions — title + status badge + date (Row 3, Card 1) ── */
@@ -3087,16 +3458,16 @@ footer {
   white-space: nowrap;
 }
 .rd-badge--approved {
-  color: var(--dash-teal);
-  background: rgba(45, 212, 191, 0.12);
+  color: var(--status-done);
+  background: var(--st-complete-wash);
 }
 .rd-badge--rejected {
   color: var(--dash-sev-high);
-  background: rgba(248, 113, 113, 0.12);
+  background: rgba(236, 106, 94, 0.12);
 }
 .rd-badge--proposed {
-  color: var(--dash-purple);
-  background: rgba(167, 139, 250, 0.12);
+  color: var(--status-todo);
+  background: var(--st-planned-wash);
 }
 .rd-date {
   flex: none;
@@ -3130,7 +3501,7 @@ footer {
   border-top: 3px solid var(--dash-sev-low);
   background: rgba(255, 255, 255, 0.02);
 }
-.pt-seg--done   { border-top-color: var(--dash-teal); }
+.pt-seg--done   { border-top-color: var(--status-done); }
 .pt-seg--active { border-top-color: var(--dash-purple); }
 .pt-seg--todo   { border-top-color: var(--dash-sev-low); }
 .pt-seg-name {
@@ -3149,7 +3520,7 @@ footer {
   padding: 4px 9px;
   border-radius: 999px;
   color: var(--dash-blue);
-  background: rgba(59, 130, 246, 0.15);
+  background: rgba(224, 166, 58, 0.15);
 }
 .bk-desc {
   margin: 2px 0 0;
@@ -3172,16 +3543,16 @@ footer {
 .bk-sev-medium { color: var(--dash-sev-medium); }
 .bk-sev-low    { color: var(--dash-sev-low);    }
 .bk-pill.bk-sev-high {
-  background: rgba(248, 113, 113, 0.12);
-  border-color: rgba(248, 113, 113, 0.35);
+  background: rgba(236, 106, 94, 0.12);
+  border-color: rgba(236, 106, 94, 0.35);
 }
 .bk-pill.bk-sev-medium {
-  background: rgba(251, 191, 36, 0.12);
-  border-color: rgba(251, 191, 36, 0.35);
+  background: rgba(224, 166, 58, 0.12);
+  border-color: rgba(224, 166, 58, 0.35);
 }
 .bk-pill.bk-sev-low {
-  background: rgba(156, 163, 175, 0.12);
-  border-color: rgba(156, 163, 175, 0.35);
+  background: rgba(113, 125, 136, 0.12);
+  border-color: rgba(113, 125, 136, 0.35);
 }
 .pt-seg-range {
   font-size: 11px;
@@ -3195,15 +3566,15 @@ footer {
   border-radius: 999px;
   align-self: flex-start;
   color: var(--dash-sev-low);
-  background: rgba(156, 163, 175, 0.14);
+  background: rgba(113, 125, 136, 0.14);
 }
 .pt-seg--done .pt-seg-badge {
-  color: var(--dash-teal);
-  background: rgba(45, 212, 191, 0.12);
+  color: var(--status-done);
+  background: var(--st-complete-wash);
 }
 .pt-seg--active .pt-seg-badge {
   color: var(--dash-purple);
-  background: rgba(167, 139, 250, 0.12);
+  background: rgba(34, 182, 207, 0.12);
 }
 @media (max-width: 700px) {
   .pt-track { flex-direction: column; }
@@ -3233,7 +3604,7 @@ footer {
   width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
   display: flex; align-items: center; justify-content: center;
   font-weight: 800; font-size: 16px; color: var(--dash-ink);
-  background: linear-gradient(135deg, var(--dash-teal), var(--dash-blue));
+  background: linear-gradient(135deg, var(--accent-primary), var(--accent-hover));
 }
 .sb-logo-word { font-size: 16px; font-weight: 700; color: var(--dash-text); letter-spacing: -0.01em; }
 
@@ -3262,7 +3633,7 @@ footer {
   transition: background 0.15s, color 0.15s;
 }
 .sb-nav-link:hover { background: var(--dash-hover); color: var(--dash-text); }
-.sb-nav-link.active { background: rgba(45, 212, 191, 0.12); color: var(--dash-text); font-weight: 600; }
+.sb-nav-link.active { background: rgba(34, 182, 207, 0.12); color: var(--dash-text); font-weight: 600; }
 .sb-nav-link.active .sb-nav-ic { color: var(--dash-teal); }
 .sb-nav-ic { display: inline-flex; color: var(--dash-text-muted); }
 .sb-nav-label { flex: 1; }
@@ -3281,16 +3652,16 @@ footer {
 .phealth-pct { font-size: 26px; font-weight: 800; line-height: 1; color: var(--dash-text); }
 .phealth-pct-sign { font-size: 14px; font-weight: 700; margin-left: 1px; color: var(--dash-text-muted); }
 .phealth-label { font-size: 12px; font-weight: 600; }
-.phealth--good .phealth-label { color: var(--dash-teal); }
+.phealth--good .phealth-label { color: var(--status-done); }
 .phealth--warn .phealth-label { color: var(--dash-sev-medium); }
 .phealth--risk .phealth-label { color: var(--dash-sev-high); }
 .phealth-spark { width: 100%; height: 36px; display: block; }
 .phealth-spark-line { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
-.phealth--good .phealth-spark-line { stroke: var(--dash-teal); }
+.phealth--good .phealth-spark-line { stroke: var(--status-done); }
 .phealth--warn .phealth-spark-line { stroke: var(--dash-sev-medium); }
 .phealth--risk .phealth-spark-line { stroke: var(--dash-sev-high); }
 .phealth-spark-area { stroke: none; opacity: 0.14; }
-.phealth--good .phealth-spark-area { fill: var(--dash-teal); }
+.phealth--good .phealth-spark-area { fill: var(--status-done); }
 .phealth--warn .phealth-spark-area { fill: var(--dash-sev-medium); }
 .phealth--risk .phealth-spark-area { fill: var(--dash-sev-high); }
 
@@ -3303,7 +3674,7 @@ footer {
   width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
   display: flex; align-items: center; justify-content: center;
   font-size: 12px; font-weight: 700; color: var(--dash-ink);
-  background: linear-gradient(135deg, var(--dash-purple), var(--dash-blue));
+  background: linear-gradient(135deg, var(--accent-primary), var(--accent-hover));
 }
 .sb-profile-meta { display: flex; flex-direction: column; min-width: 0; }
 .sb-profile-name { font-size: 13px; font-weight: 600; color: var(--dash-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@@ -3329,8 +3700,8 @@ footer {
   font-size: 12px; color: var(--dash-text-muted);
 }
 .tb-synced:hover { color: var(--dash-text); }
-.tb-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dash-teal); box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.18); flex-shrink: 0; }
-.tb-synced--busy .tb-dot { background: var(--dash-blue); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18); animation: tb-pulse 0.8s ease-in-out infinite; }
+.tb-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--status-done); box-shadow: 0 0 0 3px rgba(60, 185, 138, 0.18); flex-shrink: 0; }
+.tb-synced--busy .tb-dot { background: var(--dash-blue); box-shadow: 0 0 0 3px rgba(224, 166, 58, 0.18); animation: tb-pulse 0.8s ease-in-out infinite; }
 @keyframes tb-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
 .tb-btn {
   display: inline-flex; align-items: center; gap: 7px;
@@ -3342,7 +3713,7 @@ footer {
 }
 .tb-btn:hover { border-color: var(--dash-teal); }
 .tb-btn--primary {
-  background: linear-gradient(135deg, var(--dash-teal), var(--dash-blue));
+  background: linear-gradient(135deg, var(--accent-primary), var(--accent-hover));
   border-color: transparent; color: var(--dash-ink);
 }
 .tb-btn--primary:hover { filter: brightness(1.05); border-color: transparent; }
@@ -3361,44 +3732,41 @@ footer {
    ════════════════════════════════════════════════════════════════════ */
 
 :root {
-  /* Sidebar surface — darker sibling of --dash-card per mockup spec
-     ("Card surface: #0E1626 / #111A2E"); kept separate so the sidebar
-     reads one step below the page base. */
-  --dash-sidebar: #0E1626;
+  /* Sidebar surface — same value as --dash-card; the Diwan design uses
+     one surface-1 for sidebar, topbar, and cards alike. */
+  --dash-sidebar: var(--bg-elev-1);
   /* Ink on accent-filled surfaces (logo badge, avatar, primary button,
-     offline banner) — dark navy reads on the teal/blue gradient in both
-     themes, so it has no light override. */
-  --dash-ink: #06121F;
-  /* Subtle hover overlay for nav items — theme-dependent direction
-     (lighten on dark, darken on light). */
-  --dash-hover: rgba(255, 255, 255, 0.04);
-  /* Plain-text log view (OrchPanel) + xterm panel surround. The xterm
-     canvas itself keeps its own dark JS theme — these style the chrome. */
-  --dash-term-bg:   #050507;
+     offline banner) — aliases the design's accent-fg contrast color. */
+  --dash-ink: var(--accent-fg);
+  /* Subtle hover overlay for nav items. */
+  --dash-hover: var(--bg-hover);
+  /* Sunken surface for the plain-text log view (OrchPanel) + xterm panel
+     surround. The xterm canvas itself keeps its own dark JS theme — these
+     style the chrome only. */
+  --dash-term-bg:   var(--bg-sunken);
   --dash-term-text: #C8D8C8;
   --dash-term-line: #A0C4A0;
   --dash-term-tool: #7CB8FF;
 }
 
-/* Light theme — same --dash-* tokens, light values. The chrome (and any
-   card CSS built on these tokens) flips with the existing data-theme
-   toggle; accents (teal/purple/blue/amber/severity) stay identical. */
+/* Light theme — same alias approach; flips automatically with the base
+   tokens above. */
 [data-theme="light"] {
-  --dash-bg:         #F4F6FB;
-  --dash-card:       #FFFFFF;
-  --dash-border:     #E2E8F0;
-  --dash-text:       #1A2233;
-  --dash-text-muted: #5B6B82;
-  --dash-sidebar:    #FFFFFF;
-  --dash-hover:      rgba(15, 23, 41, 0.05);
-  --dash-term-bg:    #F1F5F9;
+  --dash-bg:         var(--bg-page);
+  --dash-card:       var(--bg-elev-1);
+  --dash-border:     var(--border-subtle);
+  --dash-text:       var(--text-primary);
+  --dash-text-muted: var(--text-tertiary);
+  --dash-sidebar:    var(--bg-elev-1);
+  --dash-hover:      var(--bg-hover);
+  --dash-term-bg:    var(--bg-sunken);
   --dash-term-text:  #334155;
   --dash-term-line:  #166534;
-  --dash-term-tool:  #1D4ED8;
+  --dash-term-tool:  var(--blue);
 }
 
-/* Frame: deep-navy base behind chrome AND content so the mockup palette
-   is continuous (legacy body bg is near-black #08090a). */
+/* Frame: Diwan canvas base behind chrome AND content so the palette is
+   continuous across the app shell and scroll area. */
 .app-shell,
 .main-scroll { background: var(--dash-bg); }
 
@@ -3450,7 +3818,7 @@ header.topbar {
 }
 .statusbar-dot {
   width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
-  background: var(--dash-teal);
+  background: var(--status-done);
 }
 .statusbar-dot--offline { background: var(--dash-sev-high); }
 .statusbar-dot--busy { animation: pulse-dot 1s ease-in-out infinite; }
@@ -3677,7 +4045,7 @@ header.topbar {
   font-size: 24px;
   font-weight: 800;
   color: #fff;
-  background: linear-gradient(135deg, var(--dash-teal), var(--dash-purple));
+  background: linear-gradient(135deg, var(--accent-primary), var(--accent-hover));
 }
 .firstrun-title { margin: 0; font-size: 18px; font-weight: 700; color: var(--dash-text); }
 .firstrun-sub { margin: 0; font-size: 13px; color: var(--dash-text-muted); max-width: 440px; line-height: 1.5; }
@@ -3725,7 +4093,7 @@ select:focus-visible,
 input:focus-visible,
 summary:focus-visible,
 [role="button"]:focus-visible {
-  outline: 2px solid var(--dash-teal, #2DD4BF);
+  outline: 2px solid var(--dash-teal, #22b6cf);
   outline-offset: 2px;
   border-radius: 4px;
 }
@@ -3751,8 +4119,8 @@ summary:focus-visible,
   gap: var(--space-3);
   padding: var(--space-2) var(--space-4);
   margin-bottom: var(--space-3);
-  background: var(--accent-amber, #F59E0B);
-  color: var(--dash-ink, #06121F);
+  background: var(--accent-amber, #e0a63a);
+  color: var(--dash-ink, #04222a);
   font-size: var(--text-sm);
   font-weight: 600;
   border-radius: 8px;
@@ -3799,6 +4167,11 @@ summary:focus-visible,
   /* Slide-in sidebar sits above the backdrop; backdrop above content. */
   .sidebar { z-index: 30; }
   #sidebar-backdrop { z-index: 25; }
+  /* Orchestration's 300px/1fr grid has no room to breathe on narrow
+     viewports — stack left rail above the terminal/history column. */
+  .orch-layout { grid-template-columns: 1fr; height: auto; }
+  .orch-left-rail { min-height: auto; }
+  .orch-term-dock { min-height: 260px; }
 }
 
 /* ══════════════════════════════════════════════════════════════════
@@ -4379,11 +4752,11 @@ summary:focus-visible,
 .runner-picker-btn--run {
   background: var(--accent-primary);
   border-color: var(--accent-primary);
-  color: #fff;
+  color: var(--accent-fg);
 }
 .runner-picker-btn--run:hover {
   background: var(--accent-hover);
-  color: #fff;
+  color: var(--accent-fg);
 }
 .runner-picker-btn--run:disabled {
   opacity: 0.5;
@@ -4477,9 +4850,9 @@ summary:focus-visible,
 }
 .filter-chip:hover { border-color: var(--accent-primary); }
 .filter-chip.active {
-  background: var(--accent-primary);
-  color: #fff;
-  border-color: var(--accent-primary);
+  background: var(--accent-bg);
+  color: var(--text-primary);
+  border-color: var(--accent-border);
 }
 .filter-chip-clear {
   font-size: var(--text-2xs);
@@ -4964,8 +5337,8 @@ summary:focus-visible,
    Status colors are --pg-* tokens scoped to the panel so both themes flip
    them without touching the global token block. */
 .pg-panel {
-  --pg-done:    #2dd4bf; /* teal   */
-  --pg-active:  #a78bfa; /* purple */
+  --pg-done:    var(--status-done);
+  --pg-active:  var(--accent-primary);
   --pg-todo:    var(--text-muted);
   --pg-blocked: var(--amber);
   margin-bottom: var(--space-4);
@@ -4973,10 +5346,6 @@ summary:focus-visible,
   border-radius: var(--radius-4);
   background: var(--bg-elev-1);
 }
-[data-theme="light"] .pg-panel {
-  --pg-done:   #0d9488;
-  --pg-active: #7c3aed;
-}
 .pg-panel summary {
   padding: var(--space-3) var(--space-5);
   font-size: var(--text-xs);