spectoflow 0.13.2 → 0.13.4

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.4",
   "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

@@ -2,6 +2,7 @@
 const STATUS = { todo:'To do', in_progress:'In progress', to_validate:'To validate', to_analyze:'To analyze', done:'Done', blocked:'Blocked' };
 let P = null, openTaskId = null;
 let filter = { status: 'all', q: '' }; // board filter state — client-side only, read-only
+let boardView = (()=>{ try{ return localStorage.getItem('spf-board-view')||'list'; }catch{ return 'list'; } })(); // 'list' | 'kanban'
 let backlogFilter = { status: 'open', q: '' }; // backlog defaults to open (not-done) tasks
 let backlogSort = { col: 'id', dir: 'asc' };   // backlog sort state — client-side only
 let backlogPage = 1; const BACKLOG_PAGE = 25;   // backlog pagination — client-side only
@@ -315,6 +316,10 @@ function renderBoard(){
   running.forEach(a=>{ const e=li('run-live',''); e.innerHTML=`<b>${a.tool}</b> · ${a.task||'—'}`; rl.append(e); });
 
   const board=$('#board'); board.innerHTML='';
+  updateBoardViewToggle();
+  board.classList.toggle('is-kanban', boardView==='kanban');
+  if(!tasks.length){ board.append(emptyState()); return; }
+  if(boardView==='kanban'){ renderKanban(board, tasks); return; } // columns by status
   let shown=0;
   (P.plans||[]).forEach(pl=> pl.phases.forEach(ph=>{
     const filtered=ph.tasks.filter(taskMatches);
@@ -322,9 +327,28 @@ function renderBoard(){
     if(!filtered.length) return; // hide phases with zero matching tasks
     board.append(renderPhase(ph,pl.file,filtered));
   }));
-  if(!tasks.length) board.append(emptyState());
-  else if(!shown) board.append(noMatchState());
+  if(!shown) board.append(noMatchState());
 }
+// Kanban view — one column per status, filtered by the text search (columns already are the statuses).
+function renderKanban(board, tasks){
+  const q=filter.q.trim().toLowerCase();
+  const match=(t)=> !q || (t.title+' '+t.id).toLowerCase().includes(q);
+  const cols=el('div','kanban');
+  Object.keys(STATUS).forEach(st=>{
+    const colTasks=tasks.filter(t=> t.status===st && match(t));
+    const col=el('div','kanban-col');
+    const head=el('div','kanban-col-head');
+    const dot=el('span','kanban-dot'); dot.style.background='var(--s-'+st+')';
+    head.append(dot, el('span','kanban-col-title',STATUS[st]||st), el('span','kanban-col-count',String(colTasks.length)));
+    col.append(head);
+    const body=el('div','kanban-col-body');
+    if(!colTasks.length) body.append(el('div','kanban-empty','—'));
+    colTasks.forEach(t=> body.append(renderTask(t)));
+    col.append(body); cols.append(col);
+  });
+  board.append(cols);
+}
+function updateBoardViewToggle(){ $$('#boardViewToggle .vt-btn').forEach(b=> b.classList.toggle('active', b.dataset.view===boardView)); }
 function li(cls,txt){ const e=el('li',cls); e.textContent=txt; return e; }
 function emptyState(){ const d=el('div','empty'); d.style.padding='40px'; d.textContent='No plans yet. Ask your agent to build something — it will run Intake and write plans/*.md.'; return d; }
 function noMatchState(){ const d=el('div','empty'); d.style.padding='40px'; d.textContent='No tasks match this filter.'; return d; }
@@ -559,13 +583,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 +935,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',()=>{
@@ -920,6 +951,8 @@ applyActiveTab(); // sync to the resolved tab before the first render
 // filters (status chips + search) — client-side only, does not write anything
 $$('#statusChips .fchip').forEach(b=> b.addEventListener('click', ()=>{ filter.status=b.dataset.status; renderBoard(); }));
 $('#search').addEventListener('input', e=>{ filter.q=e.target.value; renderBoard(); });
+// board view switch — List (phase-grouped) vs Kanban (columns by status), persisted per viewer
+$$('#boardViewToggle .vt-btn').forEach(b=> b.addEventListener('click', ()=>{ boardView=b.dataset.view; try{ localStorage.setItem('spf-board-view',boardView); }catch{} renderBoard(); }));
 // backlog: independent filters + sortable column headers — client-side only (reset to page 1 on change)
 $$('#backlogStatusChips .fchip').forEach(b=> b.addEventListener('click', ()=>{ backlogFilter.status=b.dataset.status; backlogPage=1; renderBacklog(); }));
 $('#backlogSearch').addEventListener('input', e=>{ backlogFilter.q=e.target.value; backlogPage=1; renderBacklog(); });

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/index.html

@@ -61,6 +61,10 @@
             <button class="fchip" data-status="done">Done</button>
             <button class="fchip" data-status="blocked">Blocked</button>
           </div>
+          <div class="view-toggle" id="boardViewToggle" role="group" aria-label="Board view">
+            <button class="vt-btn active" data-view="list" title="Grouped by phase"><span class="tab-ico" data-icon="backlog"></span><span>List</span></button>
+            <button class="vt-btn" data-view="kanban" title="Columns by status"><span class="tab-ico" data-icon="board"></span><span>Kanban</span></button>
+          </div>
           <input type="search" id="search" class="search" placeholder="Filter tasks…" autocomplete="off" />
         </div>
         <div class="board" id="board"></div>

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,43 @@ 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;
+}
+
+/* ---- Board view toggle (List / Kanban) + Kanban view (v0.13.4) ---- */
+.view-toggle { display:inline-flex; gap:2px; padding:2px; border:1px solid var(--line); border-radius:999px; background:var(--surface); flex-shrink:0; }
+.vt-btn { display:inline-flex; align-items:center; gap:6px; font:inherit; font-size:12px; padding:5px 12px; border:0; border-radius:999px; background:transparent; color:var(--muted); cursor:pointer; }
+.vt-btn .tab-ico { width:14px; height:14px; }
+.vt-btn:hover { color:var(--ink); }
+.vt-btn.active { background:var(--signal); color:var(--on-accent); font-weight:600; }
+/* the status chips are redundant in Kanban (columns already are the statuses) */
+.main:has(.board.is-kanban) #statusChips { display:none; }
+
+.kanban { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(228px,1fr); gap:12px; overflow-x:auto; padding:4px 2px 14px; align-items:start; }
+.kanban-col { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); display:flex; flex-direction:column; min-height:84px; }
+.kanban-col-head { display:flex; align-items:center; gap:8px; padding:11px 13px; border-bottom:1px solid var(--line); border-radius:var(--radius) var(--radius) 0 0; }
+.kanban-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
+.kanban-col-title { font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ink); }
+.kanban-col-count { margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:0 7px; }
+.kanban-col-body { display:flex; flex-direction:column; gap:8px; padding:10px; }
+.kanban-empty { color:var(--faint); font-size:12px; text-align:center; padding:10px 0; }
+.kanban .task { width:auto; }

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)}); }
 });