spectoflow 0.13.3 → 0.13.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spectoflow",
-  "version": "0.13.3",
+  "version": "0.13.5",
   "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,29 @@ 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());
+  updatePhaseToggleAll();
 }
+// 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; }
@@ -411,16 +436,26 @@ function backlogRow(r){
   return tr;
 }
 
-// ---- collapsed-phase state (persisted per phase title, guarded for private mode) ----
-function loadCollapsed(){
-  try{ const raw=localStorage.getItem('spf-collapsed'); const arr=raw?JSON.parse(raw):[]; return new Set(Array.isArray(arr)?arr:[]); }
+// ---- phase expand state: we track which phases are EXPANDED (default = none), so on a big
+// project the board opens compact — just phase headers with progress — and the user opens what
+// they need. Persisted per phase title (guarded for private mode). ----
+function loadExpanded(){
+  try{ const raw=localStorage.getItem('spf-expanded'); const arr=raw?JSON.parse(raw):[]; return new Set(Array.isArray(arr)?arr:[]); }
   catch{ return new Set(); }
 }
-function saveCollapsed(set){ try{ localStorage.setItem('spf-collapsed', JSON.stringify([...set])); }catch{} }
-let collapsedPhases=loadCollapsed();
+function saveExpanded(set){ try{ localStorage.setItem('spf-expanded', JSON.stringify([...set])); }catch{} }
+let expandedPhases=loadExpanded();
+function allPhaseTitles(){ const t=new Set(); (P.plans||[]).forEach(pl=> pl.phases.forEach(ph=> t.add(ph.title))); return [...t]; }
+function updatePhaseToggleAll(){
+  const btn=$('#phaseToggleAll'); if(!btn) return;
+  const titles=allPhaseTitles();
+  const allOpen = titles.length>0 && titles.every(t=> expandedPhases.has(t));
+  btn.textContent = allOpen ? 'Collapse all' : 'Expand all';
+  btn.dataset.state = allOpen ? 'open' : 'closed';
+}
 
 function renderPhase(ph,file,filteredTasks){
-  const isCollapsed=collapsedPhases.has(ph.title);
+  const isCollapsed=!expandedPhases.has(ph.title);
   const sec=el('section','phase'+(isCollapsed?' is-collapsed':''));
   const head=el('div','phase-head'); head.tabIndex=0; head.setAttribute('role','button'); head.setAttribute('aria-expanded',String(!isCollapsed));
   head.append(el('span','chevron'));
@@ -434,8 +469,8 @@ function renderPhase(ph,file,filteredTasks){
   const toggle=()=>{
     const now=sec.classList.toggle('is-collapsed');
     head.setAttribute('aria-expanded',String(!now));
-    if(now) collapsedPhases.add(ph.title); else collapsedPhases.delete(ph.title);
-    saveCollapsed(collapsedPhases);
+    if(now) expandedPhases.delete(ph.title); else expandedPhases.add(ph.title);
+    saveExpanded(expandedPhases); updatePhaseToggleAll();
   };
   head.addEventListener('click',toggle);
   head.addEventListener('keydown',e=>{ if(e.key==='Enter'||e.key===' '){ e.preventDefault(); toggle(); } });
@@ -927,6 +962,16 @@ 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(); }));
+// expand / collapse all phases (List view) — keeps a big board compact by default
+const phaseToggleAllBtn=$('#phaseToggleAll');
+if(phaseToggleAllBtn) phaseToggleAllBtn.addEventListener('click', ()=>{
+  const titles=allPhaseTitles();
+  const allOpen = titles.length>0 && titles.every(t=> expandedPhases.has(t));
+  if(allOpen) expandedPhases.clear(); else titles.forEach(t=> expandedPhases.add(t));
+  saveExpanded(expandedPhases); 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/index.html

@@ -61,6 +61,11 @@
             <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>
+          <button class="mini-btn" id="phaseToggleAll" title="Expand or collapse all phases">Expand all</button>
           <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

@@ -796,3 +796,28 @@ body.booting .wf-step2 { opacity:0; animation:rise .4s cubic-bezier(.2,.8,.2,1)
   --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; }
+
+/* ---- board compactness: expand/collapse-all button + kanban column scroll (v0.13.5) ---- */
+.mini-btn { font:inherit; font-size:11.5px; padding:5px 12px; border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--muted); cursor:pointer; flex-shrink:0; }
+.mini-btn:hover { color:var(--ink); border-color:var(--cool); }
+.main:has(.board.is-kanban) #phaseToggleAll { display:none; }   /* phases are a List concept */
+.kanban-col-body { max-height:64vh; overflow-y:auto; }          /* keep columns compact on a big project */