spectoflow 0.13.2 → 0.13.3

package/README.md

@@ -131,8 +131,9 @@ full-height group-chat panel), and **Info** (a project-at-a-glance summary). URL
 client-side.
 
 **Designs & theme.** The dashboard ships **switchable designs** (Settings → *Dashboard design*):
-**Control Room** (violet), **Obsidian Ops** (near-black lime/cyan, mono), and **Neon Command**
-(glassmorphism aurora). Each works in light and dark (the moon toggle). A design is a `data-design`
+**Control Room** (violet), **Obsidian Ops** (near-black lime/cyan, mono), **Neon Command**
+(glassmorphism aurora), and **Mission Control** (indigo control panel). Each works in light and dark
+(the moon toggle). A design is a `data-design`
 skin — a scoped CSS token block plus a one-line entry in `dashboard/public/designs.js`, so adding one
 is trivial. Fonts are **self-hosted** (`dashboard/public/fonts/*.woff2`), keeping the dashboard fully
 offline and dependency-free. Your choice persists per viewer (localStorage) and as the project

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spectoflow",
-  "version": "0.13.2",
+  "version": "0.13.3",
   "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/dashboard/public/app.js

@@ -559,13 +559,20 @@ function renderWfPop(){
 }
 function positionWfPop(anchorEl, pop){
   const r=anchorEl.getBoundingClientRect();
+  const vpH=window.innerHeight, m=12, edge=10;
+  const below=vpH - r.bottom - m - edge;   // room below the step
+  const above=r.top - m - edge;            // room above the step
+  // Prefer below; flip above only when below is cramped and above has more room. Then cap the
+  // popover's height to the space on the chosen side so it always fits the viewport and scrolls
+  // internally (the enable/disable button stays reachable via the sticky footer).
+  const useAbove = below < 240 && above > below;
   pop.style.visibility='hidden'; pop.hidden=false; pop.classList.remove('above');
-  const pw=pop.offsetWidth, ph=pop.offsetHeight;
-  const left=Math.max(10, Math.min(r.left + r.width/2 - pw/2, window.innerWidth-pw-10));
-  let top=r.bottom + 12, above=false;
-  if(top + ph > window.innerHeight-10 && r.top - ph - 12 > 10){ top=r.top - ph - 12; above=true; }
-  pop.style.left=left+'px'; pop.style.top=top+'px';
-  pop.classList.toggle('above',above);
+  pop.style.maxHeight=Math.max(160, (useAbove?above:below))+'px';
+  const pw=pop.offsetWidth;
+  const left=Math.max(edge, Math.min(r.left + r.width/2 - pw/2, window.innerWidth-pw-edge));
+  if(useAbove){ pop.style.top=(r.top - m - pop.offsetHeight)+'px'; pop.classList.add('above'); }
+  else { pop.style.top=(r.bottom + m)+'px'; }
+  pop.style.left=left+'px';
   pop.style.setProperty('--caret-x', ((r.left + r.width/2) - left)+'px');
   pop.style.visibility='';
 }
@@ -904,10 +911,10 @@ const navToggle=$('#navToggle');
 if(navToggle) navToggle.addEventListener('click',e=>{ e.stopPropagation(); const open=!document.body.classList.contains('nav-open'); document.body.classList.toggle('nav-open',open); navToggle.setAttribute('aria-expanded',String(open)); });
 document.addEventListener('click',e=>{ if(!document.body.classList.contains('nav-open')) return; if(e.target.closest('#tabs')||e.target.closest('#navToggle')) return; closeNav(); });
 document.addEventListener('keydown',e=>{ if(e.key==='Escape') closeNav(); });
-// workflow step popover — close on outside click / scroll / resize / Esc
+// workflow step popover — close on outside click / Esc / resize. (No scroll-to-close: a capture
+// scroll listener also fires on the popover's own internal scroll, which would slam it shut.)
 document.addEventListener('click',e=>{ if(wfPopStep && !e.target.closest('#wfPop') && !e.target.closest('.wf-step2')) closeWfPop(); });
 document.addEventListener('keydown',e=>{ if(e.key==='Escape') closeWfPop(); });
-window.addEventListener('scroll',()=>{ if(wfPopStep) closeWfPop(); },true);
 window.addEventListener('resize',()=>{ if(wfPopStep) closeWfPop(); });
 // keep the URL and the path in sync when the user uses the browser back/forward buttons
 window.addEventListener('popstate',()=>{

package/templates/dashboard/public/designs.js

@@ -23,7 +23,7 @@
     { 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.' },
-    // one more from the design set coming: nord…
+    { id: 'mission',      name: 'Mission Control', desc: 'Indigo control panel on solid slate — clean, flat, status-coloured.' },
   ];
   if (typeof module !== 'undefined' && module.exports) module.exports = DESIGNS;
   else root.DESIGNS = DESIGNS;

package/templates/dashboard/public/styles.css

@@ -657,8 +657,10 @@ body.booting .wf-step2 { opacity:0; animation:rise .4s cubic-bezier(.2,.8,.2,1)
 .wf-detail-skill b { color:var(--ink); font-weight:600; }
 
 /* ---- Workflow: click-popover, connector arrows, mobile reflow (v0.13.2) ---- */
-.wf-pop { position:fixed; z-index:40; width:min(360px,92vw); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px 18px; }
+.wf-pop { position:fixed; z-index:40; width:min(360px,92vw); max-height:min(72vh,540px); overflow-y:auto; overscroll-behavior:contain; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px 18px; }
 .wf-pop[hidden] { display:none; }
+/* keep the enable/disable button visible even when the details scroll (sticky footer) */
+.wf-pop-actions { position:sticky; bottom:0; margin:15px -18px 0; padding:12px 18px; background:var(--surface); border-top:1px solid var(--line); }
 .wf-pop::before { content:""; position:absolute; top:-8px; left:var(--caret-x,50%); transform:translateX(-50%); border-left:8px solid transparent; border-right:8px solid transparent; border-bottom:8px solid var(--surface); filter:drop-shadow(0 -1px 0 var(--line)); }
 .wf-pop.above::before { top:auto; bottom:-8px; border-bottom:0; border-top:8px solid var(--surface); filter:drop-shadow(0 1px 0 var(--line)); }
 .wf-pop-actions { margin-top:15px; display:flex; }
@@ -773,3 +775,24 @@ body.booting .wf-step2 { opacity:0; animation:rise .4s cubic-bezier(.2,.8,.2,1)
   --signal:#6d3bff; --cool:#0891b2; --on-accent:#ffffff;
   --s-done:#0f9d63; --s-to_validate:#0891b2; --s-in_progress:#c2801e; --s-blocked:#d15168;
 }
+
+/* --- Mission Control: indigo control panel on solid slate (reproduces the init-dashboard skill) --- */
+:root[data-design="mission"] {
+  --bg:#1b1e24; --surface:#262a33; --surface-2:#2d323d; --line:#353b46;
+  --ink:#e9ebf0; --muted:#9aa2af; --faint:#6b7280;
+  --signal:#5b6cff; --cool:#22d3ee; --on-accent:#ffffff;
+  --s-todo:#6b7280; --s-in_progress:#f59e0b; --s-to_validate:#ec4899; --s-to_analyze:#a855f7; --s-done:#22c55e; --s-blocked:#ef4444;
+  --radius:14px; --shadow:0 10px 30px rgba(0,0,0,.4);
+}
+/* signature touches: a filled active tab pill + solid-indigo progress bars */
+:root[data-design="mission"] .tab.is-active { background:var(--signal); color:var(--on-accent); box-shadow:none; }
+:root[data-design="mission"] .progress-meter-fill,
+:root[data-design="mission"] .phase-bar-fill,
+:root[data-design="mission"] .bar-fill { background:var(--signal); }
+:root[data-design="mission"] .fchip.active[data-status="all"] { background:var(--signal); }
+:root[data-design="mission"][data-theme="light"] {
+  --bg:#e4e7ee; --surface:#fbfcfe; --surface-2:#eef1f6; --line:#cfd5e0;
+  --ink:#1a1f2b; --muted:#565f70; --faint:#8792a6;
+  --signal:#5b6cff; --cool:#0891b2; --on-accent:#ffffff;
+  --s-todo:#64748b; --s-in_progress:#d97706; --s-to_validate:#db2777; --s-to_analyze:#9333ea; --s-done:#16a34a; --s-blocked:#dc2626;
+}

package/templates/dashboard/server.js

@@ -203,17 +203,22 @@ const server = http.createServer(async (req,res)=>{
     let file=p==='/'?'/index.html':p;
     const full=path.join(PUBLIC,path.normalize(file).replace(/^(\.\.[/\\])+/,''));
     if(!full.startsWith(PUBLIC)){ res.writeHead(403); return res.end('Forbidden'); }
+    // Local tool: always serve the freshest asset — never let the browser cache a stale app.js/css.
+    const noCache = { 'Cache-Control': 'no-store, must-revalidate' };
     fs.readFile(full,(err,data)=>{
       if(err){
         if(req.method==='GET' && !path.extname(p) && !p.startsWith('/api/')){
           return fs.readFile(path.join(PUBLIC,'index.html'),(e2,d2)=>{
             if(e2){ res.writeHead(404); return res.end('Not found'); }
-            res.writeHead(200,{'Content-Type':MIME['.html']}); res.end(d2);
+            res.writeHead(200,Object.assign({'Content-Type':MIME['.html']},noCache)); res.end(d2);
           });
         }
         res.writeHead(404); return res.end('Not found');
       }
-      res.writeHead(200,{'Content-Type':MIME[path.extname(full)]||'application/octet-stream'}); res.end(data);
+      const ext=path.extname(full);
+      // fonts are content-hashed by name and safe to cache long-term; everything else is no-store
+      const headers = ext==='.woff2'||ext==='.woff' ? { 'Cache-Control':'public, max-age=604800' } : noCache;
+      res.writeHead(200,Object.assign({'Content-Type':MIME[ext]||'application/octet-stream'},headers)); res.end(data);
     });
   }catch(e){ sendJSON(res,500,{error:String(e&&e.message||e)}); }
 });