spectoflow 0.16.4 → 0.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spectoflow",
-  "version": "0.16.4",
+  "version": "0.17.0",
   "description": "Agent-agnostic spec-driven development framework + real-time local control plane. Markdown artifacts, intent router, workflow-by-scope.",
   "keywords": [
     "spec-driven-development",

package/templates/config.json

@@ -6,6 +6,7 @@
   "plansDir": null,
   "specsDir": null,
   "dashboard": { "autostart": true },
+  "design": "console",
   "runners": {
     "claude": "claude -p --permission-mode acceptEdits",
     "codex": "codex exec"

package/templates/dashboard/public/app.js

@@ -672,7 +672,7 @@ function setLangSelect(lang){
   sel.value=lang;
 }
 // ---- design skins (data-design) — switchable, persisted per viewer + as the project default ----
-function currentDesign(){ return document.documentElement.getAttribute('data-design')||'control-room'; }
+function currentDesign(){ return document.documentElement.getAttribute('data-design')||'console'; }
 function applyDesign(id){ document.documentElement.setAttribute('data-design',id); try{ localStorage.setItem('spf-design',id); }catch{} }
 async function saveDesign(id){ applyDesign(id); if(P) render(); /* re-read token colours into the SVG charts */ flash(); try{ await fetch('/api/settings',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({design:id})}); }catch{} }
 

package/templates/dashboard/public/designs/console.css

@@ -0,0 +1,193 @@
+/* Spectral Console — dark-first bento control room. Amber accent (--signal), cyan flow (--cool).
+   Scoped entirely under html[data-design="console"] so other designs are untouched.
+   Fonts (self-hosted, declared once in ../styles.css @font-face rules — reused here by family name):
+   Sora (display), IBM Plex Sans (sans), JetBrains Mono (mono). No external font requests. */
+
+/* ============ TOKENS ============ */
+html[data-design="console"] {
+  --bg:#0b1220; --surface:#111a2b; --surface-2:#172236; --surface-3:#1d2a42;
+  --line:#223049; --line-2:#2c3c5a;
+  --ink:#e8eef8; --muted:#8a9bb5; --faint:#5f6f8a;
+  --signal:#e6a54b; --cool:#38c5d9; --on-accent:#1a1206;
+  --s-todo:#6b7a90; --s-in_progress:#4f8cff; --s-to_validate:#ff9b3d; --s-to_analyze:#ff5fd2;
+  --s-done:#3fbf7f; --s-blocked:#ff5c5c;
+  --radius:14px; --shadow:0 12px 40px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.04) inset;
+  --display:'Sora',var(--sans); --sans:'IBM Plex Sans',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
+  --cx-glow-signal:0 0 0 1px rgba(230,165,75,.35), 0 0 32px rgba(230,165,75,.18);
+  --cx-glow-cool:0 0 0 1px rgba(56,197,217,.35), 0 0 32px rgba(56,197,217,.16);
+  --cx-grid:rgba(255,255,255,.035);
+  --cx-rail-w:72px;
+}
+html[data-design="console"][data-theme="light"] {
+  --bg:#f3f5f9; --surface:#ffffff; --surface-2:#eef2f8; --surface-3:#e4eaf4;
+  --line:#dbe2ee; --line-2:#c9d3e3;
+  --ink:#0f1728; --muted:#55657f; --faint:#8593ab;
+  --signal:#b8781f; --cool:#0e8fa3; --on-accent:#fff8ec;
+  --s-todo:#7c8aa3; --s-in_progress:#2f6fe0; --s-to_validate:#d97a17; --s-to_analyze:#c93fae;
+  --s-done:#1f9c5c; --s-blocked:#d93a3a;
+  --shadow:0 10px 30px rgba(20,30,60,.10), 0 1px 0 rgba(255,255,255,.6) inset;
+  --cx-glow-signal:0 0 0 1px rgba(184,120,31,.35), 0 0 28px rgba(184,120,31,.14);
+  --cx-glow-cool:0 0 0 1px rgba(14,143,163,.35), 0 0 28px rgba(14,143,163,.14);
+  --cx-grid:rgba(15,23,40,.06);
+}
+
+/* ============ AMBIENT BACKDROP ============ */
+html[data-design="console"] body { background:var(--bg); position:relative; }
+html[data-design="console"] body::before {
+  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
+  background:
+    radial-gradient(900px 500px at 10% -10%, color-mix(in srgb,var(--signal) 14%,transparent), transparent 60%),
+    radial-gradient(800px 500px at 100% 0%, color-mix(in srgb,var(--cool) 14%,transparent), transparent 60%),
+    linear-gradient(var(--cx-grid) 1px, transparent 1px), linear-gradient(90deg, var(--cx-grid) 1px, transparent 1px);
+  background-size:auto,auto,32px 32px,32px 32px;
+}
+html[data-design="console"] .topbar,
+html[data-design="console"] .stage { position:relative; z-index:1; }
+
+/* ============ LEFT ICON RAIL ============ */
+html[data-design="console"] nav.tabs#tabs {
+  position:fixed; left:0; top:0; bottom:0; z-index:30; width:var(--cx-rail-w);
+  display:flex; flex-direction:column; align-items:center; gap:6px;
+  padding:16px 10px; overflow-y:auto; overflow-x:hidden; max-width:none;
+  background:color-mix(in srgb,var(--surface) 84%,transparent); backdrop-filter:blur(10px);
+  border-right:1px solid var(--line); border-bottom:0;
+}
+html[data-design="console"] .topbar { padding-left:calc(var(--cx-rail-w) + 16px); }
+html[data-design="console"] .stage { margin-left:var(--cx-rail-w); }
+html[data-design="console"] nav.tabs#tabs .tab {
+  position:relative; flex-direction:column; justify-content:center; gap:0;
+  width:52px; height:48px; padding:0; border-radius:12px; flex-shrink:0;
+  transition:background .18s,color .18s,transform .18s;
+}
+html[data-design="console"] nav.tabs#tabs .tab:hover { transform:translateY(-1px); }
+html[data-design="console"] nav.tabs#tabs .tab.is-active {
+  color:var(--signal); background:var(--surface-2);
+  box-shadow:inset 3px 0 0 var(--signal);
+}
+html[data-design="console"] nav.tabs#tabs .tab-ico { width:19px; height:19px; }
+html[data-design="console"] nav.tabs#tabs .tab-label {
+  position:absolute; left:60px; top:50%; transform:translateY(-50%) translateX(-4px);
+  background:var(--surface-3); color:var(--ink); padding:5px 9px; border-radius:7px;
+  font-size:12px; font-weight:500; white-space:nowrap; border:1px solid var(--line-2);
+  opacity:0; pointer-events:none; transition:opacity .15s,transform .15s; z-index:5;
+  display:block !important; box-shadow:var(--shadow);
+}
+html[data-design="console"] nav.tabs#tabs .tab:hover .tab-label,
+html[data-design="console"] nav.tabs#tabs .tab:focus-visible .tab-label {
+  opacity:1; transform:translateY(-50%) translateX(0);
+}
+html[data-design="console"] nav.tabs#tabs .tab-badge {
+  position:absolute; top:2px; right:4px; margin-left:0; min-width:15px; height:15px; font-size:9.5px;
+}
+
+/* ============ REVEAL + HOVER LIFT (bento tiles / cards) ============ */
+html[data-design="console"] .kpi,
+html[data-design="console"] .ocard,
+html[data-design="console"] .acard,
+html[data-design="console"] .card {
+  animation:cx-rise .5s cubic-bezier(.2,.7,.2,1) both;
+  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
+}
+html[data-design="console"] .kpi:hover,
+html[data-design="console"] .ocard:hover,
+html[data-design="console"] .acard:hover,
+html[data-design="console"] .card:hover {
+  transform:translateY(-2px); border-color:var(--line-2); box-shadow:var(--shadow);
+}
+html[data-design="console"] .kpi-row .kpi:nth-child(1){animation-delay:.02s}
+html[data-design="console"] .kpi-row .kpi:nth-child(2){animation-delay:.06s}
+html[data-design="console"] .kpi-row .kpi:nth-child(3){animation-delay:.1s}
+html[data-design="console"] .kpi-row .kpi:nth-child(4){animation-delay:.14s}
+html[data-design="console"] .overview-top .ocard:nth-child(1){animation-delay:.08s}
+html[data-design="console"] .overview-top .ocard:nth-child(2){animation-delay:.14s}
+@keyframes cx-rise { from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }
+
+/* status color square before KPI eyebrow labels */
+html[data-design="console"] .kpi-label { display:flex; align-items:center; gap:7px; }
+html[data-design="console"] .kpi-label::before { content:""; width:8px; height:8px; border-radius:2px; background:var(--faint); flex-shrink:0; }
+html[data-design="console"] .kpi:nth-child(1) .kpi-label::before { background:var(--s-done); }
+html[data-design="console"] .kpi:nth-child(2) .kpi-label::before { background:var(--s-in_progress); }
+html[data-design="console"] .kpi:nth-child(3) .kpi-label::before { background:var(--s-to_validate); }
+html[data-design="console"] .kpi:nth-child(4) .kpi-label::before { background:var(--s-blocked); }
+html[data-design="console"] .kpi-num { font-family:var(--display); font-weight:800; letter-spacing:-.02em; }
+html[data-design="console"] .panel-title { font-family:var(--display); }
+
+/* running agent — pulsing cyan ring (the sidebar "running" list is the only running-state row
+   this codebase renders: li.run-live inside .flatlist#running) */
+html[data-design="console"] .flatlist li.run-live {
+  position:relative; border-color:var(--cool); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cool) 30%,transparent);
+}
+html[data-design="console"] .flatlist li.run-live::before {
+  content:""; position:absolute; left:6px; top:50%; width:7px; height:7px; margin-top:-3px;
+  border-radius:50%; background:var(--cool); box-shadow:0 0 0 0 color-mix(in srgb,var(--cool) 55%,transparent);
+  animation:cx-ripple 1.8s ease-out infinite;
+}
+html[data-design="console"] .flatlist li.run-live { padding-left:18px; }
+@keyframes cx-ripple {
+  0% { box-shadow:0 0 0 0 color-mix(in srgb,var(--cool) 55%,transparent); }
+  70% { box-shadow:0 0 0 7px transparent; }
+  100% { box-shadow:0 0 0 0 transparent; }
+}
+
+/* sync dot pulse (reinforces the base pulse with a cyan tint on this design) */
+html[data-design="console"] .sync-dot { box-shadow:0 0 0 0 color-mix(in srgb,var(--cool) 45%,transparent); }
+
+/* ============ WORKFLOW PIPELINE — flowing particles on enabled connectors ============ */
+html[data-design="console"] .wf-link { position:relative; overflow:visible; }
+html[data-design="console"] .wf-link.on { background:linear-gradient(90deg,color-mix(in srgb,var(--signal) 55%,var(--line)),var(--line)); }
+html[data-design="console"] .wf-link.on::after {
+  content:""; position:absolute; top:-2px; left:0; width:6px; height:6px; border-radius:50%;
+  background:var(--cool); box-shadow:0 0 8px var(--cool); opacity:0;
+  animation:cx-travel 2.2s linear infinite;
+}
+html[data-design="console"] .wf-strip .wf-arrow:not(.off) { position:relative; overflow:visible; }
+html[data-design="console"] .wf-strip .wf-arrow:not(.off)::after {
+  content:""; position:absolute; top:50%; left:0; width:5px; height:5px; margin-top:-2.5px; border-radius:50%;
+  background:var(--cool); box-shadow:0 0 6px var(--cool); opacity:0; animation:cx-travel 2s linear infinite;
+}
+@keyframes cx-travel { 0%{ left:0; opacity:0; } 10%{ opacity:1; } 90%{ opacity:1; } 100%{ left:100%; opacity:0; } }
+
+/* ============ COMMAND PALETTE (injected by console.js) ============ */
+.cx-search-btn {
+  display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:8px;
+  border:1px solid var(--line-2); background:var(--surface); color:var(--muted);
+  font:inherit; font-size:12px; cursor:pointer; transition:border-color .18s,box-shadow .18s;
+}
+.cx-search-btn:hover { border-color:var(--cool); box-shadow:var(--cx-glow-cool); color:var(--ink); }
+.cx-search-btn kbd { font:500 10.5px var(--mono); padding:1px 5px; border-radius:5px; background:var(--surface-2); border:1px solid var(--line-2); color:var(--muted); }
+.cx-cmdk { position:fixed; inset:0; z-index:80; display:grid; place-items:start center; padding-top:12vh;
+  background:rgba(3,8,18,.55); backdrop-filter:blur(6px); }
+html[data-design="console"][data-theme="light"] .cx-cmdk { background:rgba(15,23,40,.35); }
+.cx-cmdk .cx-panel { width:min(560px,92vw); background:var(--surface); border:1px solid var(--line-2); border-radius:16px;
+  box-shadow:0 30px 80px rgba(0,0,0,.5); overflow:hidden; animation:cx-pop .16s cubic-bezier(.2,.7,.2,1); }
+@keyframes cx-pop { from{ opacity:0; transform:translateY(-6px) scale(.985);} to{ opacity:1; transform:none;} }
+.cx-cmdk input { width:100%; border:0; background:transparent; color:var(--ink); font:500 15px var(--sans);
+  padding:15px 18px; outline:none; border-bottom:1px solid var(--line); }
+.cx-cmdk .cx-list { max-height:50vh; overflow:auto; padding:8px; }
+.cx-cmdk .cx-item { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:9px; cursor:pointer; font-size:13px; color:var(--ink-2,var(--ink)); }
+.cx-cmdk .cx-item:hover, .cx-cmdk .cx-item.is-sel { background:var(--surface-2); }
+.cx-cmdk .cx-item .cx-tag { margin-left:auto; font:500 10px var(--mono); text-transform:uppercase; letter-spacing:.06em; color:var(--faint); }
+.cx-cmdk .cx-empty { padding:18px; text-align:center; color:var(--faint); font-size:12.5px; }
+.cx-cmdk .cx-foot { display:flex; gap:14px; padding:8px 14px; border-top:1px solid var(--line); font:400 11px var(--mono); color:var(--faint); }
+
+/* ============ RESPONSIVE — rail collapses to a bottom bar ============ */
+@media (max-width:820px) {
+  html[data-design="console"] nav.tabs#tabs {
+    left:0; right:0; top:auto; bottom:0; width:auto; height:auto;
+    flex-direction:row; justify-content:space-around; overflow-x:auto; overflow-y:hidden;
+    border-right:0; border-top:1px solid var(--line); padding:6px 4px;
+  }
+  html[data-design="console"] .topbar { padding-left:16px; }
+  html[data-design="console"] .stage { margin-left:0; margin-bottom:64px; }
+  html[data-design="console"] nav.tabs#tabs .tab-label { display:none !important; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html[data-design="console"] .kpi,
+  html[data-design="console"] .ocard,
+  html[data-design="console"] .acard,
+  html[data-design="console"] .card { animation:none; }
+  html[data-design="console"] .wf-link.on::after,
+  html[data-design="console"] .wf-strip .wf-arrow::after,
+  html[data-design="console"] .flatlist li.run-live::before { animation:none; display:none; }
+}

package/templates/dashboard/public/designs/console.js

@@ -0,0 +1,144 @@
+/* Spectral Console — command palette (Ctrl/Cmd+K). Only active while
+   document.documentElement.dataset.design === 'console'; watches for live design switches. */
+(function () {
+  'use strict';
+  var active = false;
+  var searchBtn = null;
+  var overlay = null;
+  var items = [];
+  var filtered = [];
+  var selIdx = 0;
+
+  function buildItems() {
+    var out = [];
+    document.querySelectorAll('#tabs .tab').forEach(function (tab) {
+      var label = tab.querySelector('.tab-label');
+      var text = label ? label.textContent.trim() : (tab.dataset.tab || 'tab');
+      out.push({ text: 'Go to ' + text, tag: 'nav', run: function () { tab.click(); } });
+    });
+    var runBtn = document.getElementById('runQuickBtn');
+    if (runBtn) out.push({ text: 'Run · open chat', tag: 'action', run: function () { runBtn.click(); } });
+    var themeBtn = document.getElementById('themeToggle');
+    if (themeBtn) out.push({ text: 'Toggle theme', tag: 'action', run: function () { themeBtn.click(); } });
+    return out;
+  }
+
+  function renderList(q) {
+    var list = overlay.querySelector('.cx-list');
+    filtered = !q ? items : items.filter(function (it) { return it.text.toLowerCase().indexOf(q.toLowerCase()) !== -1; });
+    selIdx = 0;
+    list.innerHTML = '';
+    if (!filtered.length) {
+      var empty = document.createElement('div');
+      empty.className = 'cx-empty';
+      empty.textContent = 'No matches';
+      list.appendChild(empty);
+      return;
+    }
+    filtered.forEach(function (it, i) {
+      var row = document.createElement('div');
+      row.className = 'cx-item' + (i === 0 ? ' is-sel' : '');
+      row.innerHTML = '<span>' + it.text.replace(/</g, '&lt;') + '</span><span class="cx-tag">' + it.tag + '</span>';
+      row.addEventListener('click', function () { runItem(i); });
+      list.appendChild(row);
+    });
+  }
+
+  function highlight() {
+    overlay.querySelectorAll('.cx-item').forEach(function (row, i) {
+      row.classList.toggle('is-sel', i === selIdx);
+    });
+    var sel = overlay.querySelector('.cx-item.is-sel');
+    if (sel) sel.scrollIntoView({ block: 'nearest' });
+  }
+
+  function runItem(i) {
+    var it = filtered[i];
+    if (!it) return;
+    close();
+    try { it.run(); } catch (e) { /* no-op: target control may not exist in this view */ }
+  }
+
+  function open() {
+    if (overlay || !active) return;
+    items = buildItems();
+    overlay = document.createElement('div');
+    overlay.className = 'cx-cmdk';
+    overlay.innerHTML =
+      '<div class="cx-panel">' +
+      '<input type="text" placeholder="Go to a tab, run, toggle theme…" autocomplete="off" spellcheck="false" />' +
+      '<div class="cx-list"></div>' +
+      '<div class="cx-foot"><span>↑↓ navigate</span><span>↵ select</span><span>esc close</span></div>' +
+      '</div>';
+    document.body.appendChild(overlay);
+    renderList('');
+    var input = overlay.querySelector('input');
+    input.focus();
+    input.addEventListener('input', function () { renderList(input.value); });
+    overlay.addEventListener('mousedown', function (e) { if (e.target === overlay) close(); });
+    overlay.addEventListener('keydown', function (e) {
+      if (e.key === 'Escape') { close(); }
+      else if (e.key === 'ArrowDown') { e.preventDefault(); selIdx = Math.min(selIdx + 1, filtered.length - 1); highlight(); }
+      else if (e.key === 'ArrowUp') { e.preventDefault(); selIdx = Math.max(selIdx - 1, 0); highlight(); }
+      else if (e.key === 'Enter') { e.preventDefault(); runItem(selIdx); }
+    });
+  }
+
+  function close() {
+    if (overlay) { overlay.remove(); overlay = null; }
+  }
+
+  function onKeydown(e) {
+    if (!active) return;
+    var k = e.key === 'k' || e.key === 'K';
+    if (k && (e.metaKey || e.ctrlKey)) { e.preventDefault(); overlay ? close() : open(); }
+  }
+
+  function injectButton() {
+    if (searchBtn || document.getElementById('cxSearchBtn')) return;
+    var host = document.querySelector('.top-right');
+    if (!host) return;
+    searchBtn = document.createElement('button');
+    searchBtn.id = 'cxSearchBtn';
+    searchBtn.className = 'cx-search-btn';
+    searchBtn.type = 'button';
+    searchBtn.title = 'Command palette';
+    searchBtn.innerHTML =
+      '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M20 20l-3.5-3.5"/></svg>' +
+      '<span>Search…</span><kbd>⌘K</kbd>';
+    searchBtn.addEventListener('click', open);
+    host.insertBefore(searchBtn, host.firstChild);
+  }
+
+  function removeButton() {
+    if (searchBtn) { searchBtn.remove(); searchBtn = null; }
+  }
+
+  function activate() {
+    if (active) return;
+    active = true;
+    injectButton();
+    document.addEventListener('keydown', onKeydown);
+  }
+
+  function deactivate() {
+    if (!active) return;
+    active = false;
+    close();
+    removeButton();
+    document.removeEventListener('keydown', onKeydown);
+  }
+
+  function sync() {
+    if (document.documentElement.dataset.design === 'console') activate();
+    else deactivate();
+  }
+
+  sync();
+  var mo = new MutationObserver(sync);
+  mo.observe(document.documentElement, { attributes: true, attributeFilter: ['data-design'] });
+  // .top-right may not exist yet on first paint in some load orders — retry once shortly after.
+  if (document.documentElement.dataset.design === 'console' && !document.getElementById('cxSearchBtn')) {
+    setTimeout(injectButton, 300);
+  }
+})();

package/templates/dashboard/public/designs/orbit.css

@@ -0,0 +1,207 @@
+/* ============================================================================================
+ * Orbit — light-first, airy, circular design skin. Teal signal + amber accent, dotted ground,
+ * Space Grotesk display / IBM Plex Sans body / JetBrains Mono numerics (all self-hosted, see the
+ * @font-face rules already declared in styles.css). Navigation is NOT the tab bar — the tab bar is
+ * hidden and replaced by a round "hub" button in the header that opens a full-screen radial menu
+ * (orbit.js builds it from the very same #tabs buttons, so routing logic is fully reused).
+ * ============================================================================================ */
+
+/* ---- tokens: light (default) ---- */
+html[data-design="orbit"] {
+  --bg:#f2f6f7; --surface:#ffffff; --surface-2:#eaf1f2; --line:#d6e1e4;
+  --ink:#0e1d21; --muted:#5d7379; --faint:#8ea1a6;
+  --signal:#0f8b8d; --cool:#e6a54b; --on-accent:#ffffff;
+  --s-todo:#8194a0; --s-in_progress:#2f6fe0; --s-to_validate:#d97a17; --s-to_analyze:#c93fae;
+  --s-done:#1f9c5c; --s-blocked:#d93a3a;
+  --radius:20px; --shadow:0 14px 40px rgba(14,29,33,.12);
+  --sans:'IBM Plex Sans',ui-sans-serif,system-ui,sans-serif;
+  --display:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
+  --mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
+  --ob-dot: rgba(14,29,33,.07);
+}
+
+/* ---- tokens: dark ---- */
+html[data-design="orbit"][data-theme="dark"] {
+  --bg:#0c1516; --surface:#121d1f; --surface-2:#182629; --line:#233639;
+  --ink:#e7f0f1; --muted:#8aa0a5; --faint:#5f7479;
+  --signal:#2fc3c5; --cool:#e6a54b; --on-accent:#06191a;
+  --s-todo:#6f838c; --s-in_progress:#5b93ff; --s-to_validate:#ff9b3d; --s-to_analyze:#ff5fd2;
+  --s-done:#3fbf7f; --s-blocked:#ff5c5c;
+  --shadow:0 14px 40px rgba(0,0,0,.45);
+  --ob-dot: rgba(255,255,255,.06);
+}
+
+/* ---- base feel ---- */
+html[data-design="orbit"] body {
+  font-family:var(--sans);
+  background-image: radial-gradient(var(--ob-dot) 1.2px, transparent 1.2px);
+  background-size: 22px 22px;
+}
+html[data-design="orbit"] .kpi-num,
+html[data-design="orbit"] .card .ct,
+html[data-design="orbit"] .panel-title,
+html[data-design="orbit"] .brand-name { font-family:var(--display); letter-spacing:-.01em; }
+html[data-design="orbit"] .kpi-num { font-weight:700; }
+
+/* navigation is the radial menu — the tab bar is hidden, content runs full width */
+html[data-design="orbit"] nav.tabs { display:none; }
+html[data-design="orbit"] .topbar { grid-template-columns:auto 1fr auto; }
+
+/* pills + rounder cards */
+html[data-design="orbit"] .btn,
+html[data-design="orbit"] .run-btn,
+html[data-design="orbit"] .theme-toggle,
+html[data-design="orbit"] .mode-chip,
+html[data-design="orbit"] .meta-chip { border-radius:999px; }
+html[data-design="orbit"] .kpi,
+html[data-design="orbit"] .card,
+html[data-design="orbit"] .flatlist li,
+html[data-design="orbit"] .journal-row { border-radius:var(--radius); }
+html[data-design="orbit"] .card:hover,
+html[data-design="orbit"] .kpi:hover { transform:translateY(-2px); box-shadow:var(--shadow); transition:transform .2s,box-shadow .2s; }
+
+/* running-agent avatars ripple (best-effort; harmless if the class isn't present) */
+html[data-design="orbit"] .avatar.running,
+html[data-design="orbit"] .av.running { position:relative; }
+html[data-design="orbit"] .avatar.running::after,
+html[data-design="orbit"] .av.running::after {
+  content:""; position:absolute; inset:-5px; border-radius:50%; border:2px solid var(--signal);
+  animation: ob-ripple 1.6s ease-out infinite;
+}
+@keyframes ob-ripple { 0%{ transform:scale(.9); opacity:.8; } 100%{ transform:scale(1.3); opacity:0; } }
+
+/* flowing teal particles along the workflow pipeline connectors */
+html[data-design="orbit"] .wf-arrow::after { background:linear-gradient(90deg,transparent,var(--signal),transparent); }
+html[data-design="orbit"] .wf-conn { position:relative; overflow:hidden; background:linear-gradient(90deg,var(--cool),var(--signal)); }
+html[data-design="orbit"] .wf-conn::after {
+  content:""; position:absolute; top:-2px; left:0; width:6px; height:6px; border-radius:50%;
+  background:var(--signal); box-shadow:0 0 8px var(--signal); animation: ob-flow 2.4s linear infinite;
+}
+@keyframes ob-flow { 0%{ left:-6px; opacity:0; } 10%{ opacity:1; } 90%{ opacity:1; } 100%{ left:100%; opacity:0; } }
+
+/* card reveal on load (reuses the existing body.booting convention) */
+html[data-design="orbit"] body.booting .kpi,
+html[data-design="orbit"] body.booting .card { animation: ob-rise .45s cubic-bezier(.2,.8,.2,1) both; }
+@keyframes ob-rise { from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
+
+/* ============================================================================================
+ * THE HUB — round brand button in the header; shows live global progress %, doubles as the
+ * radial-menu trigger. Injected by orbit.js as the first child of .brand.
+ * ============================================================================================ */
+html[data-design="orbit"] .ob-hub {
+  position:relative; width:46px; height:46px; border-radius:50%; flex-shrink:0;
+  background:var(--signal); color:var(--on-accent); display:grid; place-items:center;
+  box-shadow:0 8px 20px color-mix(in srgb, var(--signal) 40%, transparent);
+  transition:transform .18s; cursor:pointer; border:0; font:inherit;
+}
+html[data-design="orbit"] .ob-hub:hover { transform:scale(1.06); }
+html[data-design="orbit"] .ob-hub .ob-pct { font-family:var(--display); font-size:12px; font-weight:700; letter-spacing:-.02em; }
+html[data-design="orbit"] .ob-hub::after {
+  content:""; position:absolute; inset:-5px; border-radius:50%; border:2px solid var(--signal); opacity:.35;
+  animation: ob-breathe 2.6s ease-in-out infinite;
+}
+@keyframes ob-breathe { 0%,100%{ transform:scale(1); opacity:.35; } 50%{ transform:scale(1.08); opacity:.12; } }
+
+/* ---- fixed bottom-left FAB on small screens ---- */
+@media (max-width:900px) {
+  html[data-design="orbit"] .ob-hub { position:fixed; left:16px; bottom:18px; z-index:42; width:56px; height:56px; }
+  html[data-design="orbit"] .ob-hub .ob-pct { font-size:14px; }
+}
+
+/* ============================================================================================
+ * THE OVERLAY + DIAL
+ * ============================================================================================ */
+html[data-design="orbit"] .ob-ov {
+  position:fixed; inset:0; z-index:80; display:grid; place-items:center;
+  background:rgba(14,29,33,.42); backdrop-filter:blur(6px); animation: ob-fade .18s ease;
+}
+html[data-design="orbit"][data-theme="dark"] .ob-ov { background:rgba(0,0,0,.55); }
+html[data-design="orbit"] .ob-ov.ob-closing { animation: ob-fadeout .15s ease forwards; }
+@keyframes ob-fade { from{ opacity:0; } to{ opacity:1; } }
+@keyframes ob-fadeout { to{ opacity:0; } }
+
+html[data-design="orbit"] .ob-dial {
+  position:relative; width:284px; height:284px; flex:none; user-select:none;
+  animation: ob-dialpop .28s cubic-bezier(.2,.8,.2,1);
+}
+@keyframes ob-dialpop { from{ transform:scale(.7); opacity:0; } to{ transform:none; opacity:1; } }
+@media (max-width:900px) { html[data-design="orbit"] .ob-dial { width:210px; height:210px; } }
+
+html[data-design="orbit"] .ob-dial .ob-ring { position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); }
+html[data-design="orbit"] .ob-dial .ob-track { fill:none; stroke:var(--surface-2); stroke-width:16; }
+html[data-design="orbit"] .ob-dial .ob-prog { fill:none; stroke:var(--signal); stroke-width:16; transition:stroke-dasharray 1s cubic-bezier(.2,.7,.2,1); }
+html[data-design="orbit"] .ob-dial .ob-marker { fill:none; stroke:var(--cool); stroke-width:16; transition:transform .5s cubic-bezier(.3,.8,.3,1); transform-origin:142px 142px; }
+@media (max-width:900px) { html[data-design="orbit"] .ob-dial .ob-marker { transform-origin:105px 105px; } }
+
+html[data-design="orbit"] .ob-chev {
+  position:absolute; width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
+  color:var(--on-accent); background:var(--signal); box-shadow:var(--shadow); border:0; cursor:pointer;
+  transition:transform .18s,background .18s;
+}
+html[data-design="orbit"] .ob-chev svg { width:14px; height:14px; }
+html[data-design="orbit"] .ob-chev:hover { transform:scale(1.12); filter:brightness(1.08); }
+html[data-design="orbit"] .ob-chev.ob-up { left:50%; top:-4px; transform:translateX(-50%); }
+html[data-design="orbit"] .ob-chev.ob-up:hover { transform:translateX(-50%) scale(1.12); }
+html[data-design="orbit"] .ob-chev.ob-down { left:50%; bottom:-4px; transform:translateX(-50%); }
+html[data-design="orbit"] .ob-chev.ob-down:hover { transform:translateX(-50%) scale(1.12); }
+html[data-design="orbit"] .ob-chev.ob-left { top:50%; left:-4px; transform:translateY(-50%); }
+html[data-design="orbit"] .ob-chev.ob-left:hover { transform:translateY(-50%) scale(1.12); }
+html[data-design="orbit"] .ob-chev.ob-right { top:50%; right:-4px; transform:translateY(-50%); }
+html[data-design="orbit"] .ob-chev.ob-right:hover { transform:translateY(-50%) scale(1.12); }
+
+html[data-design="orbit"] .ob-center {
+  position:absolute; left:50%; top:50%; width:76px; height:76px; transform:translate(-50%,-50%);
+  border-radius:50%; display:grid; place-items:center; background:var(--signal); color:var(--on-accent);
+  box-shadow:0 10px 24px color-mix(in srgb, var(--signal) 40%, transparent); text-align:center; line-height:1;
+  border:0; cursor:pointer;
+}
+html[data-design="orbit"] .ob-center .ob-pct { font-family:var(--display); font-size:22px; font-weight:700; letter-spacing:-.03em; }
+html[data-design="orbit"] .ob-center .ob-lbl { font:500 9.5px var(--mono); opacity:.85; margin-top:2px; letter-spacing:.06em; text-transform:uppercase; }
+html[data-design="orbit"] .ob-center::after {
+  content:""; position:absolute; inset:-6px; border-radius:50%; border:2px solid var(--signal); opacity:.35;
+  animation: ob-breathe 2.6s ease-in-out infinite;
+}
+@media (max-width:900px) {
+  html[data-design="orbit"] .ob-center { width:60px; height:60px; }
+  html[data-design="orbit"] .ob-center .ob-pct { font-size:17px; }
+}
+
+html[data-design="orbit"] .ob-item {
+  position:absolute; left:50%; top:50%; width:58px; height:58px; margin:-29px 0 0 -29px;
+  border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
+  color:var(--ink); background:var(--surface); border:1px solid var(--line); cursor:pointer;
+  transform:translate(0,0) scale(.3); opacity:0; animation: ob-orbit .5s cubic-bezier(.2,.8,.2,1) forwards;
+  transition:background .18s,color .18s,box-shadow .18s; padding:0;
+}
+html[data-design="orbit"] .ob-item .ob-ico { width:19px; height:19px; display:inline-flex; }
+html[data-design="orbit"] .ob-item .ob-ico svg { width:100%; height:100%; }
+html[data-design="orbit"] .ob-item .ob-lb { font:600 9px var(--sans); letter-spacing:.01em; white-space:nowrap; }
+html[data-design="orbit"] .ob-item:hover { background:var(--surface-2); }
+html[data-design="orbit"] .ob-item.is-active { background:var(--surface); color:var(--signal); box-shadow:var(--shadow), 0 0 0 2px var(--signal); }
+html[data-design="orbit"] .ob-item .ob-bd {
+  position:absolute; top:2px; right:2px; min-width:15px; height:15px; padding:0 4px; border-radius:8px;
+  background:var(--s-blocked); color:#fff; font:700 9px/15px var(--mono); text-align:center;
+}
+@keyframes ob-orbit { to{ opacity:1; transform:rotate(var(--a)) translate(98px) rotate(calc(-1*var(--a))) scale(1); } }
+@media (max-width:900px) {
+  html[data-design="orbit"] .ob-item { width:46px; height:46px; margin:-23px 0 0 -23px; }
+  html[data-design="orbit"] .ob-item .ob-lb { display:none; }
+  html[data-design="orbit"] .ob-item .ob-ico { width:16px; height:16px; }
+  @keyframes ob-orbit { to{ opacity:1; transform:rotate(var(--a)) translate(72px) rotate(calc(-1*var(--a))) scale(1); } }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html[data-design="orbit"] .ob-item,
+  html[data-design="orbit"] .ob-dial,
+  html[data-design="orbit"] .ob-ov,
+  html[data-design="orbit"] .ob-hub::after,
+  html[data-design="orbit"] .ob-center::after,
+  html[data-design="orbit"] .wf-conn::after,
+  html[data-design="orbit"] .avatar.running::after,
+  html[data-design="orbit"] .av.running::after,
+  html[data-design="orbit"] body.booting .kpi,
+  html[data-design="orbit"] body.booting .card {
+    animation:none !important;
+  }
+  html[data-design="orbit"] .ob-item { opacity:1; transform:rotate(var(--a)) translate(98px) rotate(calc(-1*var(--a))); }
+}

package/templates/dashboard/public/designs/orbit.js

@@ -0,0 +1,197 @@
+'use strict';
+/*
+ * Orbit design behavior: replaces the hidden tab bar with a round "hub" button (live global %)
+ * that opens a full-screen radial menu built from the very same #tabs buttons — so all routing
+ * stays owned by app.js; this file only clones markup and forwards clicks/keys to the real tabs.
+ * Active only while document.documentElement.dataset.design === 'orbit'; watches that attribute
+ * so switching designs live cleanly builds/tears down without touching any other file.
+ */
+(function () {
+  var active = false;
+  var hubEl = null, ovEl = null, tabsObserver = null, fillObserver = null, pctInterval = null;
+  var state = { open: false };
+
+  function isOrbit() { return document.documentElement.getAttribute('data-design') === 'orbit'; }
+  function tabs() { return Array.prototype.slice.call(document.querySelectorAll('#tabs .tab')); }
+  function activeIndex(list) { var i = list.findIndex(function (t) { return t.classList.contains('is-active'); }); return i < 0 ? 0 : i; }
+  function escapeHtml(s) { return String(s).replace(/[&<>"]/g, function (c) { return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]; }); }
+  function chevSvg(dir) {
+    var d = { up: 'M6 15l6-6 6 6', down: 'M6 9l6 6 6-6', left: 'M15 6l-6 6 6 6', right: 'M9 6l6 6-6 6' }[dir];
+    return '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="' + d + '"/></svg>';
+  }
+
+  /* ---- hub button (injected into .brand) ---- */
+  function buildHub() {
+    if (hubEl) return;
+    var brand = document.querySelector('.brand');
+    if (!brand) return;
+    hubEl = document.createElement('button');
+    hubEl.type = 'button';
+    hubEl.className = 'ob-hub';
+    hubEl.title = 'Menu (M)';
+    hubEl.setAttribute('aria-haspopup', 'dialog');
+    hubEl.innerHTML = '<span class="ob-pct">0%</span>';
+    brand.insertBefore(hubEl, brand.firstChild);
+    hubEl.addEventListener('click', toggleOverlay);
+  }
+  function removeHub() { if (hubEl) { hubEl.remove(); hubEl = null; } }
+
+  /* ---- global progress % — read #globalMeterFill's width, kept live ---- */
+  function updatePct() {
+    var fill = document.getElementById('globalMeterFill');
+    var pct = 0;
+    if (fill && fill.style && fill.style.width) pct = parseFloat(fill.style.width) || 0;
+    pct = Math.max(0, Math.min(100, Math.round(pct)));
+    if (hubEl) { var hp = hubEl.querySelector('.ob-pct'); if (hp) hp.textContent = pct + '%'; }
+    if (ovEl) {
+      var cp = ovEl.querySelector('.ob-center .ob-pct'); if (cp) cp.textContent = pct + '%';
+      var prog = ovEl.querySelector('.ob-prog');
+      if (prog) { var C = 804.2, len = (pct / 100 * C).toFixed(1); prog.setAttribute('stroke-dasharray', len + ' ' + C); }
+    }
+  }
+
+  /* ---- radial overlay ---- */
+  function buildOverlay() {
+    if (ovEl) return;
+    var list = tabs(), n = list.length || 1;
+    var idx = activeIndex(list);
+    var items = list.map(function (tab, i) {
+      var angle = -90 + i * (360 / n);
+      var ico = tab.querySelector('.tab-ico');
+      var lbl = tab.querySelector('.tab-label');
+      var badgeEl = tab.querySelector('.tab-badge');
+      var badge = badgeEl && !badgeEl.hidden ? '<span class="ob-bd">' + escapeHtml(badgeEl.textContent) + '</span>' : '';
+      var cls = 'ob-item' + (i === idx ? ' is-active' : '');
+      return '<button type="button" class="' + cls + '" style="--a:' + angle + 'deg" data-tab-idx="' + i + '">' + badge +
+        '<span class="ob-ico">' + (ico ? ico.innerHTML : '') + '</span>' +
+        '<span class="ob-lb">' + escapeHtml(lbl ? lbl.textContent : '') + '</span></button>';
+    }).join('');
+    var markerAngle = idx * (360 / n);
+    ovEl = document.createElement('div');
+    ovEl.className = 'ob-ov';
+    ovEl.innerHTML =
+      '<div class="ob-dial" role="dialog" aria-label="spectoflow navigation">' +
+        '<svg class="ob-ring" viewBox="0 0 284 284" aria-hidden="true">' +
+          '<circle class="ob-track" cx="142" cy="142" r="128" stroke-dasharray="176 25" stroke-dashoffset="-12"></circle>' +
+          '<circle class="ob-prog" cx="142" cy="142" r="128" stroke-dasharray="0 804.2"></circle>' +
+          '<circle class="ob-marker" cx="142" cy="142" r="128" stroke-dasharray="34 770.2" style="transform:rotate(' + markerAngle + 'deg)"></circle>' +
+        '</svg>' +
+        '<button type="button" class="ob-chev ob-up" title="Previous (Up)">' + chevSvg('up') + '</button>' +
+        '<button type="button" class="ob-chev ob-down" title="Next (Down)">' + chevSvg('down') + '</button>' +
+        '<button type="button" class="ob-chev ob-left" title="Search / Board">' + chevSvg('left') + '</button>' +
+        '<button type="button" class="ob-chev ob-right" title="Run">' + chevSvg('right') + '</button>' +
+        '<button type="button" class="ob-center" title="Close (Esc)"><span class="ob-pct">0%</span><span class="ob-lbl">Delivered</span></button>' +
+        items +
+      '</div>';
+    document.body.appendChild(ovEl);
+    updatePct();
+    ovEl.addEventListener('click', onOverlayClick);
+    var tabsEl = document.getElementById('tabs');
+    if (tabsEl) {
+      tabsObserver = new MutationObserver(syncActiveVisual);
+      tabsObserver.observe(tabsEl, { attributes: true, attributeFilter: ['class'], subtree: true });
+    }
+    var center = ovEl.querySelector('.ob-center');
+    if (center && center.focus) center.focus();
+  }
+
+  function syncActiveVisual() {
+    if (!ovEl) return;
+    var list = tabs(), n = list.length || 1, idx = activeIndex(list);
+    var items = ovEl.querySelectorAll('.ob-item');
+    items.forEach(function (el, i) { el.classList.toggle('is-active', i === idx); });
+    var marker = ovEl.querySelector('.ob-marker');
+    if (marker) marker.style.transform = 'rotate(' + (idx * (360 / n)) + 'deg)';
+  }
+
+  function cycle(dir) {
+    var list = tabs(), n = list.length;
+    if (!n) return;
+    var idx = (activeIndex(list) + dir + n) % n;
+    list[idx].click();
+  }
+  function goLeft() {
+    var search = document.getElementById('search');
+    if (search) { closeOverlay(); search.focus(); return; }
+    var board = tabs().filter(function (t) { return t.dataset.tab === 'board'; })[0];
+    if (board) board.click();
+    closeOverlay();
+  }
+  function goRight() {
+    var run = document.getElementById('runQuickBtn');
+    if (run) run.click();
+    closeOverlay();
+  }
+
+  function onOverlayClick(e) {
+    var item = e.target.closest('.ob-item');
+    if (item) {
+      var idx = +item.dataset.tabIdx, list = tabs();
+      if (list[idx]) list[idx].click();
+      closeOverlay();
+      return;
+    }
+    if (e.target.closest('.ob-center')) { closeOverlay(); return; }
+    var chev = e.target.closest('.ob-chev');
+    if (chev) {
+      if (chev.classList.contains('ob-up')) cycle(-1);
+      else if (chev.classList.contains('ob-down')) cycle(1);
+      else if (chev.classList.contains('ob-left')) goLeft();
+      else if (chev.classList.contains('ob-right')) goRight();
+      return;
+    }
+    if (e.target === ovEl) closeOverlay();
+  }
+
+  function toggleOverlay() { if (state.open) closeOverlay(); else openOverlay(); }
+  function openOverlay() { buildOverlay(); state.open = true; }
+  function closeOverlay() {
+    if (tabsObserver) { tabsObserver.disconnect(); tabsObserver = null; }
+    state.open = false;
+    if (!ovEl) return;
+    var el = ovEl; ovEl = null;
+    el.classList.add('ob-closing');
+    setTimeout(function () { el.remove(); }, 160);
+  }
+
+  /* ---- keyboard: m toggles, arrows cycle while open, Enter/Esc close ---- */
+  function isTyping(el) {
+    return el && (['INPUT', 'TEXTAREA', 'SELECT'].indexOf(el.tagName) !== -1 || el.isContentEditable);
+  }
+  function onKeydown(e) {
+    if (!active) return;
+    if ((e.key === 'm' || e.key === 'M') && !isTyping(document.activeElement)) { e.preventDefault(); toggleOverlay(); return; }
+    if (!state.open) return;
+    if (e.key === 'Escape') closeOverlay();
+    else if (e.key === 'ArrowUp') { e.preventDefault(); cycle(-1); }
+    else if (e.key === 'ArrowDown') { e.preventDefault(); cycle(1); }
+    else if (e.key === 'Enter') closeOverlay();
+  }
+  document.addEventListener('keydown', onKeydown);
+
+  /* ---- enter / leave the design ---- */
+  function enter() {
+    buildHub();
+    updatePct();
+    pctInterval = setInterval(updatePct, 2000);
+    var fill = document.getElementById('globalMeterFill');
+    if (fill) {
+      fillObserver = new MutationObserver(updatePct);
+      fillObserver.observe(fill, { attributes: true, attributeFilter: ['style'] });
+    }
+  }
+  function leave() {
+    closeOverlay();
+    removeHub();
+    if (pctInterval) { clearInterval(pctInterval); pctInterval = null; }
+    if (fillObserver) { fillObserver.disconnect(); fillObserver = null; }
+  }
+  function sync() {
+    var on = isOrbit();
+    if (on && !active) { active = true; enter(); }
+    else if (!on && active) { active = false; leave(); }
+  }
+
+  new MutationObserver(sync).observe(document.documentElement, { attributes: true, attributeFilter: ['data-design'] });
+  sync();
+})();

package/templates/dashboard/public/designs.js

@@ -20,6 +20,8 @@
  */
 (function (root) {
   const DESIGNS = [
+    { id: 'console',      name: 'Spectral Console', desc: 'Default — dark real-time console: left icon rail, ⌘K palette, bento overview, amber + cyan flow.' },
+    { id: 'orbit',        name: 'Orbit',           desc: 'Light, airy, circular — a radial menu opens on click of the hub; teal dial + amber brand.' },
     { id: 'control-room', name: 'Control Room', desc: 'Dark violet engineering control room — the original.' },
     { id: 'obsidian',     name: 'Obsidian Ops',  desc: 'Near-black mission-control — electric lime + cyan, mono type, Linear/Vercel precision.' },
     { id: 'neon-command', name: 'Neon Command',  desc: 'Glassmorphism — aurora violet + cyan, Space Grotesk display, control-room ambiance.' },

package/templates/dashboard/public/index.html

@@ -1,11 +1,14 @@
 <!DOCTYPE html>
-<html lang="en" data-theme="dark" data-design="control-room">
+<html lang="en" data-theme="dark" data-design="console">
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>spectoflow · control</title>
-  <link rel="icon" type="image/png" href="logo-white.png" />
+  <link rel="icon" type="image/png" href="logo-dark.png" />
+  <link rel="icon" type="image/png" media="(prefers-color-scheme: dark)" href="logo-white.png" />
   <link rel="stylesheet" href="styles.css" />
+  <link rel="stylesheet" href="designs/console.css" />
+  <link rel="stylesheet" href="designs/orbit.css" />
 </head>
 <body>
   <header class="topbar">
@@ -309,5 +312,7 @@
   <script src="icons.js"></script>
   <script src="designs.js"></script>
   <script src="app.js"></script>
+  <script src="designs/console.js"></script>
+  <script src="designs/orbit.js"></script>
 </body>
 </html>