spectoflow 0.22.4 → 0.23.0

package/templates/dashboard/public/app.js

@@ -15,6 +15,23 @@ let attnFilter = 'open';                          // attention tab filter — cl
 // apply the persisted design skin as early as possible (before the first paint of app-driven DOM)
 (function(){ try{ const d=localStorage.getItem('spf-design'); if(d) document.documentElement.setAttribute('data-design',d); }catch{} })();
 
+// The project this dashboard tab is showing — derived once from the URL's /p/<id>/... prefix. The
+// hub-server's legacy-route redirect (sub-project 3) guarantees a bookmark without this prefix never
+// reaches this file directly; it 302s to a /p/<id>/... URL first. Null when served by the older
+// single-project templates/dashboard/server.js (no prefix at all) — every helper below no-ops in
+// that case, preserving today's exact single-project behavior.
+const PROJECT_ID = (() => { const m = location.pathname.match(/^\/p\/([0-9a-f]{6})(?:\/|$)/); return m ? m[1] : null; })();
+// Every /api/* fetch/EventSource call funnels its URL through this — the one place a project id gets
+// attached, so no call site can forget it. Handles both "no query string yet" (?p=) and "already has
+// one" (&p=, e.g. '/api/agentfile?path=...').
+function withProject(url) { if (!PROJECT_ID) return url; return url + (url.includes('?') ? '&' : '?') + 'p=' + encodeURIComponent(PROJECT_ID); }
+// Prefixes an app-internal path (e.g. '/board', '/custom/x') with /p/<id> for history.pushState/
+// replaceState — every page navigation this file performs stays within the current project.
+function projectPath(rest) { return PROJECT_ID ? '/p/' + PROJECT_ID + rest : rest; }
+// location.pathname's segments with a leading /p/<id> stripped, if present — the single place that
+// strip happens, so tabFromPath()/taskFromPath() never have to know about the prefix twice.
+function pathSegments() { const s = location.pathname.split('/').filter(Boolean); return (s[0] === 'p' && s[1]) ? s.slice(2) : s; }
+
 const $ = (s,r=document)=>r.querySelector(s);
 const $$ = (s,r=document)=>[...r.querySelectorAll(s)];
 const el=(t,c,x)=>{const e=document.createElement(t); if(c)e.className=c; if(x!=null)e.textContent=x; return e;};
@@ -22,7 +39,7 @@ const allTasks=()=> (P.plans||[]).flatMap(pl=>pl.phases.flatMap(ph=>ph.tasks.map
 const runtimeTests=(id)=> (P.runtime&&P.runtime.tests&&P.runtime.tests[id])||null;
 
 async function load(){
-  const r = await fetch('/api/project'); P = await r.json(); render();
+  const r = await fetch(withProject('/api/project')); P = await r.json(); render();
   if(openTaskId) openDrawer(openTaskId,true);
 }
 // Coalesce bursts of SSE 'change'/'message' events into one reload so the board doesn't
@@ -30,7 +47,7 @@ async function load(){
 let loadTimer=null;
 function scheduleLoad(){ clearTimeout(loadTimer); loadTimer=setTimeout(load,180); }
 function connect(){
-  const es = new EventSource('/api/events');
+  const es = new EventSource(withProject('/api/events'));
   es.onopen = ()=>{ $('#sync').classList.remove('offline'); $('#syncLabel').textContent='live'; };
   es.onmessage = (ev)=>{
     let m; try{ m=JSON.parse(ev.data); }catch{ return; }
@@ -123,32 +140,32 @@ async function doRun(promptEl,agentEl){
   promptEl=promptEl||$('#runPrompt'); agentEl=agentEl||$('#runAgent');
   const prompt=promptEl.value.trim(); if(!prompt) return;
   const agent=agentEl.value;
-  await fetch('/api/run',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({prompt,agent})});
+  await fetch(withProject('/api/run'),{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({prompt,agent})});
   promptEl.value=''; // the prompt renders as a bubble from the message log
 }
 async function doOrchestrate(promptEl){
   if(isChatBusy()) return;
   promptEl=promptEl||$('#runPrompt');
   const prompt=promptEl.value.trim(); if(!prompt) return;
-  await fetch('/api/orchestrate',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({request:prompt})});
+  await fetch(withProject('/api/orchestrate'),{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({request:prompt})});
   promptEl.value='';
 }
-async function approve(decision){ await fetch('/api/orchestrate/approve',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({decision})}); }
+async function approve(decision){ await fetch(withProject('/api/orchestrate/approve'),{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({decision})}); }
 // ---- chat context management: condense the log via the agent, or wipe it (Chat tab only — the
 // floating widget stays "quick access", full controls live where there's room to read them) ----
 async function summarizeChat(agentEl){
   if(isChatBusy()) return;
   const agent=(agentEl||$('#tabRunAgent'))?.value;
   flash();
-  await fetch('/api/chat/summarize',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({agent})});
+  await fetch(withProject('/api/chat/summarize'),{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({agent})});
 }
 async function clearChat(){
   flash();
-  await fetch('/api/chat/clear',{method:'POST'});
+  await fetch(withProject('/api/chat/clear'),{method:'POST'});
 }
-async function patchTask(id,patch){ flash(); await fetch('/api/task/'+encodeURIComponent(id),{method:'PATCH',headers:{'Content-Type':'application/json'},body:JSON.stringify(patch)}); }
-async function addComment(id,text,action){ flash(); await fetch('/api/task/'+encodeURIComponent(id)+'/comment',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({text,action})}); }
-async function toggleStep(name){ flash(); await fetch('/api/workflow/toggle',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({name})}); }
+async function patchTask(id,patch){ flash(); await fetch(withProject('/api/task/'+encodeURIComponent(id)),{method:'PATCH',headers:{'Content-Type':'application/json'},body:JSON.stringify(patch)}); }
+async function addComment(id,text,action){ flash(); await fetch(withProject('/api/task/'+encodeURIComponent(id)+'/comment'),{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({text,action})}); }
+async function toggleStep(name){ flash(); await fetch(withProject('/api/workflow/toggle'),{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({name})}); }
 function flash(){ const s=$('#sync'); s.classList.add('saving'); $('#syncLabel').textContent='writing…'; setTimeout(()=>{ s.classList.remove('saving'); $('#syncLabel').textContent='live'; },800); }
 
 // ---- "agent is running" state — no visible feedback used to exist between clicking Send/
@@ -731,7 +748,7 @@ function editAttn(it,txtNode){
   ta.addEventListener('blur',save);
   ta.addEventListener('keydown',e=>{ if((e.metaKey||e.ctrlKey)&&e.key==='Enter'){ e.preventDefault(); save(); } if(e.key==='Escape'){ done=true; renderAttention(); } });
 }
-async function addAttn(text){ flash(); await fetch('/api/attention',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({text})}); }
+async function addAttn(text){ flash(); await fetch(withProject('/api/attention'),{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({text})}); }
 
 // ---- Backlog "+ Add task" — a manual checkbox task, no agent involved ----
 function openBacklogAddForm(){
@@ -756,7 +773,7 @@ async function submitBacklogAdd(){
   const owner=($('#blAddOwner').value||'').trim();
   const level=$('#blAddLevel').value;
   flash();
-  const r=await fetch('/api/task',{method:'POST',headers:{'Content-Type':'application/json'},
+  const r=await fetch(withProject('/api/task'),{method:'POST',headers:{'Content-Type':'application/json'},
     body:JSON.stringify({title, phase:phase||undefined, owner:owner||undefined, level})});
   if(!r.ok){
     const j=await r.json().catch(()=>({}));
@@ -765,9 +782,9 @@ async function submitBacklogAdd(){
   }
   closeBacklogAddForm();
 }
-async function patchAttn(id,patch){ flash(); await fetch('/api/attention/'+encodeURIComponent(id),{method:'PATCH',headers:{'Content-Type':'application/json'},body:JSON.stringify(patch)}); }
-async function deleteAttn(id){ flash(); await fetch('/api/attention/'+encodeURIComponent(id),{method:'DELETE'}); }
-async function promoteAttn(id){ flash(); await fetch('/api/attention/'+encodeURIComponent(id)+'/promote',{method:'POST'}); }
+async function patchAttn(id,patch){ flash(); await fetch(withProject('/api/attention/'+encodeURIComponent(id)),{method:'PATCH',headers:{'Content-Type':'application/json'},body:JSON.stringify(patch)}); }
+async function deleteAttn(id){ flash(); await fetch(withProject('/api/attention/'+encodeURIComponent(id)),{method:'DELETE'}); }
+async function promoteAttn(id){ flash(); await fetch(withProject('/api/attention/'+encodeURIComponent(id)+'/promote'),{method:'POST'}); }
 
 // ---- Settings tab + topbar quick-switch: change autonomy mode + output language (writes config.json) ----
 // Mode/language can be changed from two places — the Settings tab (#setMode/#setLang) and the
@@ -826,13 +843,13 @@ function showAgentError(msg){
 async function saveAgent(id){
   if(!id) return;
   flash();
-  const r=await fetch('/api/settings',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({agent:id})});
+  const r=await fetch(withProject('/api/settings'),{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({agent:id})});
   if(!r.ok){ const body=await r.json().catch(()=>({})); showAgentError(body.error||t('topbar.agent.none')); setAgentSelects(); return; }
 }
 // ---- design skins (data-design) — switchable, persisted per viewer + as the project default ----
 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{} }
+async function saveDesign(id){ applyDesign(id); if(P) render(); /* re-read token colours into the SVG charts */ flash(); try{ await fetch(withProject('/api/settings'),{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({design:id})}); }catch{} }
 
 function renderSettings(){
   const c=(P&&P.config)||{};
@@ -864,7 +881,7 @@ function renderSettings(){
 async function saveSettings(){
   flash();
   const mode=($('#setMode')||$('#topMode')).value, language=($('#setLang')||$('#topLang')).value;
-  await fetch('/api/settings',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({mode,language})});
+  await fetch(withProject('/api/settings'),{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({mode,language})});
   const s=$('#settingsSaved'); if(s){ s.hidden=false; setTimeout(()=>{ s.hidden=true; },1500); }
 }
 
@@ -1032,7 +1049,7 @@ function renderCustomize(){
 async function czSubmit(kind,description,agent){
   const cfg=CZ_KINDS.find((c)=>c.kind===kind);
   const prompt=description?cfg.promptAdd(description):cfg.promptAuto;
-  await fetch('/api/run',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({prompt,agent})});
+  await fetch(withProject('/api/run'),{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({prompt,agent})});
   const root=$('#czRoot'); if(root) root.dataset.open='';
   navigateTab('chat');
 }
@@ -1046,17 +1063,17 @@ const ROUTES=['board','requests','attention','backlog','workflow','team','files'
 // under that name still land on the Personalize tab instead of a blank panel.
 function normalizeTab(t){ return t==='settings'?'personalize':t; }
 function tabFromPath(){
-  const s=location.pathname.split('/').filter(Boolean);
+  const s=pathSegments();
   if(s[0]==='custom'&&s[1]) return 'custom:'+decodeURIComponent(s[1]);
   const t=normalizeTab(s[0]);
   return ROUTES.includes(t)?t:null;
 }
-function taskFromPath(){ const s=location.pathname.split('/').filter(Boolean); return (ROUTES.includes(s[0])&&s[1])?decodeURIComponent(s[1]):null; }
+function taskFromPath(){ const s=pathSegments(); return (ROUTES.includes(s[0])&&s[1])?decodeURIComponent(s[1]):null; }
 function navigateTab(tabId,push){
   activeTab=tabId; try{ localStorage.setItem('spf-tab',tabId); }catch{}
   if(push!==false){
     const isCustom=tabId.indexOf('custom:')===0;
-    history.pushState(null,'', isCustom ? '/custom/'+encodeURIComponent(tabId.slice(7)) : '/'+tabId);
+    history.pushState(null,'', projectPath(isCustom ? '/custom/'+encodeURIComponent(tabId.slice(7)) : '/'+tabId));
   }
   applyActiveTab();
   closeNav(); // a tab pick closes the mobile menu
@@ -1163,7 +1180,7 @@ async function openFileDrawer(kind,obj){
   sec.append(body); b.append(sec);
   $('#drawer').setAttribute('aria-hidden','false');
   try{
-    const r=await fetch('/api/agentfile?path='+encodeURIComponent(rel));
+    const r=await fetch(withProject('/api/agentfile?path='+encodeURIComponent(rel)));
     const data=await r.json().catch(()=>({}));
     if(!r.ok){ body.innerHTML=''; body.append(el('div','empty', data.error||t('drawer.loadError'))); return; }
     body.innerHTML=mdLite(data.content||'');
@@ -1325,7 +1342,7 @@ let filesSelectedDir=''; // '' = project root — the folder + File/+ Folder cre
 const filesOpenDirs=new Set(); // persists which tree folders are expanded across a refresh
 async function loadFilesTree(){
   try{
-    const r=await fetch('/api/files/tree'); const d=await r.json().catch(()=>({}));
+    const r=await fetch(withProject('/api/files/tree')); const d=await r.json().catch(()=>({}));
     filesTreeData = (r.ok && Array.isArray(d.tree)) ? d.tree : [];
   }catch{ filesTreeData=filesTreeData||[]; }
   renderFilesTree();
@@ -1488,7 +1505,7 @@ async function openFilesFile(relPath){
   const box=$('#filesContent'); box.innerHTML='';
   box.append(el('div','files-empty',t('drawer.loading')));
   let data;
-  try{ const r=await fetch('/api/files/read?'+new URLSearchParams({path:relPath})); data=await r.json().catch(()=>({})); if(!r.ok) throw new Error(data.error||'error'); }
+  try{ const r=await fetch(withProject('/api/files/read?'+new URLSearchParams({path:relPath}))); data=await r.json().catch(()=>({})); if(!r.ok) throw new Error(data.error||'error'); }
   catch(err){ box.innerHTML=''; box.append(el('div','files-empty',err.message||t('files.loadError'))); return; }
   box.innerHTML='';
   const bar=el('div','files-toolbar-row');
@@ -1515,7 +1532,7 @@ function filesDiscardBtn(relPath){
 }
 async function filesSave(relPath,content,actions){
   try{
-    const r=await fetch('/api/files/write',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({path:relPath,content})});
+    const r=await fetch(withProject('/api/files/write'),{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({path:relPath,content})});
     const d=await r.json().catch(()=>({}));
     if(!r.ok) throw new Error(d.error||'error');
     filesOpenDirty=false; filesSavedTip(actions);
@@ -1610,7 +1627,7 @@ async function submitFilesCreate(){
   const kind=filesCreateKind;
   const endpoint = kind==='dir' ? '/api/files/mkdir' : '/api/files/write';
   const payload = kind==='dir' ? {path:rel} : {path:rel,content:''};
-  const r=await fetch(endpoint,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(payload)});
+  const r=await fetch(withProject(endpoint),{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(payload)});
   const d=await r.json().catch(()=>({}));
   if(!r.ok){ if(err){ err.textContent=d.error||t('files.saveError'); err.hidden=false; } return; }
   closeFilesCreateForm();
@@ -1623,7 +1640,7 @@ function openDrawer(id,keep){
   // function calls it repeatedly below; shadowing it with a task variable would break every call.
   const task=allTasks().find(x=>x.id===id); if(!task) return;
   openTaskId=id;
-  if(!keep && taskFromPath()!==id) history.pushState(null,'','/'+activeTab+'/'+encodeURIComponent(id));
+  if(!keep && taskFromPath()!==id) history.pushState(null,'',projectPath('/'+activeTab+'/'+encodeURIComponent(id)));
   const b=$('#drawerBody'); const prev=keep?$('.drawer-panel').scrollTop:0; b.innerHTML='';
   b.append(el('div','d-id',task.id+' · '+(task.level||'standard')+' · '+task.file));
   b.append(el('div','d-title',task.title));
@@ -1657,7 +1674,7 @@ function openDrawer(id,keep){
   $('#drawer').setAttribute('aria-hidden','false');
   if(keep) $('.drawer-panel').scrollTop=prev;
 }
-function closeDrawer(){ if(taskFromPath()) history.pushState(null,'','/'+activeTab); openTaskId=null; $('#drawer').setAttribute('aria-hidden','true'); }
+function closeDrawer(){ if(taskFromPath()) history.pushState(null,'',projectPath('/'+activeTab)); openTaskId=null; $('#drawer').setAttribute('aria-hidden','true'); }
 const cssv=(v)=> getComputedStyle(document.documentElement).getPropertyValue(v).trim()||'#888';
 
 // tabs — activeTab is the single source of truth (persisted), so a click sets it and applies it,
@@ -1707,7 +1724,7 @@ const brandLogo=$('.brand-logo'); if(brandLogo) brandLogo.addEventListener('clic
 applyActiveTab(); // sync to the resolved tab before the first render
 // an old bookmark/share to the pre-rename "/settings" URL: swap the address bar to the real
 // route once resolved, so the visible URL matches the "Personalize" tab it landed on.
-if(location.pathname.split('/').filter(Boolean)[0]==='settings') history.replaceState(null,'','/personalize');
+if(pathSegments()[0]==='settings') history.replaceState(null,'',projectPath('/personalize'));
 // 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(); });

package/templates/dashboard/public/hub.html

@@ -0,0 +1,69 @@
+<!doctype html>
+<html lang="en" data-theme="dark">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>spectoflow · projects</title>
+  <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" />
+</head>
+<body class="hub-body">
+  <header class="hub-header">
+    <div class="hub-brand">
+      <img class="brand-logo-img is-dark" src="/logo-white.png" alt="" />
+      <img class="brand-logo-img is-light" src="/logo-dark.png" alt="" />
+      <span class="hub-brand-name">spectoflow</span>
+    </div>
+    <button class="hub-theme-toggle" id="hubThemeToggle" aria-label="Toggle theme" title="Toggle theme">◐</button>
+  </header>
+
+  <main class="hub-main">
+    <div class="hub-titlebar">
+      <h1>Your projects</h1>
+      <button class="hub-add-btn" id="hubAddBtn">+ Add project</button>
+    </div>
+
+    <div id="hubEmpty" class="hub-empty" hidden>
+      <p class="hub-empty-title">No projects yet</p>
+      <p class="hub-empty-sub">Add your first project to get started — point spectoflow at any folder on your computer.</p>
+      <button class="hub-add-btn hub-add-btn-lg" id="hubAddBtnEmpty">+ Add your first project</button>
+    </div>
+
+    <div id="hubGrid" class="hub-grid"></div>
+  </main>
+
+  <div id="hubModal" class="hub-modal" hidden>
+    <div class="hub-modal-card">
+      <div class="hub-modal-head">
+        <h2>Add a project</h2>
+        <button class="hub-modal-close" id="hubModalClose" aria-label="Close">&times;</button>
+      </div>
+      <div class="hub-modal-tabs">
+        <button class="hub-modal-tab is-active" data-mode="browse">Browse</button>
+        <button class="hub-modal-tab" data-mode="paste">Paste a path</button>
+      </div>
+
+      <div id="hubBrowsePane" class="hub-modal-pane">
+        <div class="hub-browse-crumb" id="hubBrowseCrumb"></div>
+        <div class="hub-browse-list" id="hubBrowseList"></div>
+        <div class="hub-browse-footer">
+          <span class="hub-browse-current" id="hubBrowseCurrent"></span>
+          <button class="hub-add-btn" id="hubBrowseUse">Use this folder</button>
+        </div>
+      </div>
+
+      <div id="hubPastePane" class="hub-modal-pane" hidden>
+        <label class="hub-paste-label" for="hubPasteInput">Folder path</label>
+        <input class="hub-paste-input" id="hubPasteInput" type="text" placeholder="e.g. C:\Users\you\Projects\my-app" autocomplete="off" spellcheck="false" />
+        <button class="hub-add-btn" id="hubPasteUse">Use this path</button>
+      </div>
+
+      <p class="hub-modal-error" id="hubModalError" hidden></p>
+      <p class="hub-modal-status" id="hubModalStatus" hidden></p>
+    </div>
+  </div>
+
+  <script src="/hub.js"></script>
+</body>
+</html>

package/templates/dashboard/public/hub.js

@@ -0,0 +1,134 @@
+'use strict';
+(function () {
+  const s = localStorage.getItem('spf-theme');
+  if (s) document.documentElement.setAttribute('data-theme', s);
+})();
+(function () {
+  const grid = document.getElementById('hubGrid');
+  const empty = document.getElementById('hubEmpty');
+  const modal = document.getElementById('hubModal');
+  const modalError = document.getElementById('hubModalError');
+  const modalStatus = document.getElementById('hubModalStatus');
+  const browsePane = document.getElementById('hubBrowsePane');
+  const pastePane = document.getElementById('hubPastePane');
+  const browseCrumb = document.getElementById('hubBrowseCrumb');
+  const browseList = document.getElementById('hubBrowseList');
+  const browseCurrent = document.getElementById('hubBrowseCurrent');
+  let browsePath = null; // null = show starting points (home dir / drives)
+
+  function esc(s) { return String(s).replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c])); }
+  function timeAgo(iso) {
+    if (!iso) return '';
+    const ms = Date.now() - new Date(iso).getTime();
+    const m = Math.floor(ms / 60000);
+    if (m < 1) return 'just now';
+    if (m < 60) return m + 'm ago';
+    const h = Math.floor(m / 60);
+    if (h < 24) return h + 'h ago';
+    return Math.floor(h / 24) + 'd ago';
+  }
+
+  async function loadProjects() {
+    const r = await fetch('/api/hub/projects');
+    const data = await r.json();
+    const rows = data.projects || [];
+    empty.hidden = rows.length > 0;
+    grid.innerHTML = rows.map((p) => {
+      const pct = p.stats && p.stats.total ? Math.round(100 * p.stats.done / p.stats.total) : null;
+      return `<div class="hub-card" data-id="${p.id}">
+        <a class="hub-card-open" href="/p/${p.id}/board">
+          <div class="hub-card-name">${esc(p.name)}</div>
+          <div class="hub-card-path">${esc(p.path)}</div>
+          ${pct !== null ? `<div class="hub-card-progress"><div class="hub-card-progress-fill" style="width:${pct}%"></div></div><div class="hub-card-pct">${pct}% · ${p.stats.done}/${p.stats.total} tasks</div>` : ''}
+          <div class="hub-card-meta">Opened ${esc(timeAgo(p.lastOpened))}</div>
+        </a>
+        <button class="hub-card-remove" data-remove="${p.id}" title="Remove from this list" aria-label="Remove ${esc(p.name)}">&times;</button>
+      </div>`;
+    }).join('');
+  }
+
+  // No native confirm() — it blocks the tab (and this codebase never uses it, see D46). A second
+  // click within 3s on the same remove button confirms; the button flips to a checkmark meanwhile.
+  let pendingRemoveId = null;
+  function confirmRemove(id) {
+    if (pendingRemoveId === id) { pendingRemoveId = null; return true; }
+    pendingRemoveId = id;
+    const btn = grid.querySelector('[data-remove="' + id + '"]');
+    if (btn) {
+      const orig = btn.textContent;
+      btn.textContent = '✓'; btn.title = 'Click again to confirm';
+      setTimeout(() => { if (btn.textContent === '✓') btn.textContent = orig; }, 3000);
+    }
+    return false;
+  }
+  grid.addEventListener('click', async (e) => {
+    const btn = e.target.closest('[data-remove]');
+    if (!btn) return;
+    e.preventDefault();
+    const id = btn.getAttribute('data-remove');
+    if (!confirmRemove(id)) return;
+    await fetch('/api/hub/projects/' + encodeURIComponent(id), { method: 'DELETE' });
+    loadProjects();
+  });
+
+  function openModal() { modal.hidden = false; modalError.hidden = true; modalStatus.hidden = true; browsePath = null; loadBrowse(); }
+  function closeModal() { modal.hidden = true; }
+  document.getElementById('hubAddBtn').addEventListener('click', openModal);
+  document.getElementById('hubAddBtnEmpty').addEventListener('click', openModal);
+  document.getElementById('hubModalClose').addEventListener('click', closeModal);
+  modal.addEventListener('click', (e) => { if (e.target === modal) closeModal(); });
+
+  document.querySelectorAll('.hub-modal-tab').forEach((tab) => {
+    tab.addEventListener('click', () => {
+      document.querySelectorAll('.hub-modal-tab').forEach((t) => t.classList.remove('is-active'));
+      tab.classList.add('is-active');
+      const mode = tab.getAttribute('data-mode');
+      browsePane.hidden = mode !== 'browse';
+      pastePane.hidden = mode !== 'paste';
+    });
+  });
+
+  async function loadBrowse() {
+    const q = browsePath ? ('?path=' + encodeURIComponent(browsePath)) : '';
+    const r = await fetch('/api/hub/browse' + q);
+    const data = await r.json();
+    if (data.error) { browseList.innerHTML = '<p class="hub-browse-empty">' + esc(data.error) + '</p>'; return; }
+    browsePath = data.current || null;
+    browseCurrent.textContent = browsePath || 'Choose a starting point';
+    // A drive root (D:\) or similar has no OS-level parent (data.parent is null) but the picker must
+    // never dead-end there — "Up" from any real folder always goes somewhere: its real parent, or
+    // back to the starting points list if there isn't one. Only hide it once we're AT that list.
+    const showUp = browsePath !== null;
+    browseCrumb.innerHTML = showUp ? `<button class="hub-crumb-up" id="hubCrumbUp">&larr; Up</button>` : '';
+    const up = document.getElementById('hubCrumbUp');
+    if (up) up.addEventListener('click', () => { browsePath = data.parent || null; loadBrowse(); });
+    browseList.innerHTML = (data.entries || []).map((e) =>
+      `<button class="hub-browse-item" data-path="${esc(e.path)}">${esc(e.name)}</button>`
+    ).join('') || '<p class="hub-browse-empty">No sub-folders here.</p>';
+    browseList.querySelectorAll('[data-path]').forEach((el) => {
+      el.addEventListener('click', () => { browsePath = el.getAttribute('data-path'); loadBrowse(); });
+    });
+  }
+
+  async function submitPath(p) {
+    modalError.hidden = true; modalStatus.hidden = false; modalStatus.textContent = 'Adding…';
+    const r = await fetch('/api/hub/projects', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ path: p }) });
+    const data = await r.json();
+    if (!r.ok) { modalStatus.hidden = true; modalError.hidden = false; modalError.textContent = data.error || 'Could not add that folder.'; return; }
+    location.href = '/p/' + data.entry.id + '/board';
+  }
+  document.getElementById('hubBrowseUse').addEventListener('click', () => { if (browsePath) submitPath(browsePath); });
+  document.getElementById('hubPasteUse').addEventListener('click', () => {
+    const v = document.getElementById('hubPasteInput').value.trim();
+    if (v) submitPath(v);
+  });
+
+  document.getElementById('hubThemeToggle').addEventListener('click', () => {
+    const cur = document.documentElement.getAttribute('data-theme');
+    const next = cur === 'dark' ? 'light' : 'dark';
+    document.documentElement.setAttribute('data-theme', next);
+    localStorage.setItem('spf-theme', next);
+  });
+
+  loadProjects();
+})();

package/templates/dashboard/public/index.html

@@ -18,6 +18,7 @@
         <img class="brand-logo-img is-dark" src="/logo-white.png" alt="spectoflow" />
         <img class="brand-logo-img is-light" src="/logo-dark.png" alt="spectoflow" />
       </a>
+      <a class="hub-back-link" href="/" title="Back to your projects" aria-label="Back to your projects">⌂</a>
       <div class="brand-text">
         <div class="brand-line">
           <span class="brand-name">spectoflow</span>

package/templates/dashboard/public/styles.css

@@ -338,9 +338,12 @@ body { background:var(--bg); color:var(--ink); font-family:var(--sans); font-siz
    line up; the backdrop never scrolls on its own (overflow:hidden), its scroll position is just
    copied from the textarea on every scroll event. */
 .files-code-wrap { position:relative; flex:1; min-height:0; }
-.files-code-backdrop { position:absolute; inset:0; margin:0; overflow:hidden; pointer-events:none; white-space:pre-wrap; word-break:break-word; padding:16px 20px; font-family:var(--mono); font-size:12.5px; line-height:1.6; color:var(--ink); background:transparent; }
+/* Ligatures (calt/liga — e.g. "===", "!==", "=>" fused into one glyph, common in Cascadia Code and
+   JetBrains Mono) must be off on BOTH layers: this overlay depends on the backdrop and the textarea
+   laying out every character at an identical pixel width, and a fused ligature glyph breaks that. */
+.files-code-backdrop { position:absolute; inset:0; margin:0; overflow:hidden; pointer-events:none; white-space:pre-wrap; word-break:break-word; padding:16px 20px; font-family:var(--mono); font-size:12.5px; line-height:1.6; color:var(--ink); background:transparent; font-variant-ligatures:none; font-feature-settings:"liga" 0,"calt" 0; }
 .files-code-backdrop code { font:inherit; background:none; }
-.files-code-wrap .files-code-input { position:absolute; inset:0; background:transparent; color:transparent; caret-color:var(--ink); white-space:pre-wrap; word-break:break-word; }
+.files-code-wrap .files-code-input { position:absolute; inset:0; background:transparent; color:transparent; caret-color:var(--ink); white-space:pre-wrap; word-break:break-word; font-variant-ligatures:none; font-feature-settings:"liga" 0,"calt" 0; }
 .hl-comment { color:var(--faint); font-style:italic; }
 .hl-string { color:var(--s-done); }
 .hl-number { color:var(--cool); }
@@ -965,3 +968,62 @@ body.booting .wf-step2 { opacity:0; animation:rise .4s cubic-bezier(.2,.8,.2,1)
 
 /* Phase progress: cap the list so a big project (many phases) doesn't dominate the overview */
 .bars-block.scroll-cap { max-height:340px; overflow-y:auto; padding-right:6px; }
+
+/* ---- Hub landing page (multi-project) — reuses the same tokens as the per-project dashboard,
+   deliberately simpler: no per-design skins, no tabs, just a calm project picker. ---- */
+.hub-body { min-height:100%; display:flex; flex-direction:column; }
+.hub-header { display:flex; align-items:center; justify-content:space-between; padding:16px 24px; border-bottom:1px solid var(--line); }
+.hub-brand { display:flex; align-items:center; gap:9px; font-weight:700; }
+.hub-brand .brand-logo-img { width:22px; height:22px; }
+.hub-brand-name { font-size:15px; }
+.hub-theme-toggle { width:32px; height:32px; border-radius:8px; border:1px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer; font-size:14px; }
+.hub-main { flex:1; max-width:1080px; width:100%; margin:0 auto; padding:32px 24px 60px; }
+.hub-titlebar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:24px; flex-wrap:wrap; }
+.hub-titlebar h1 { font-size:24px; font-weight:700; margin:0; }
+.hub-add-btn { font-family:var(--sans); font-size:13.5px; font-weight:600; padding:9px 16px; border-radius:9px; border:1px solid transparent; background:var(--signal); color:var(--on-accent); cursor:pointer; transition:filter .15s; }
+.hub-add-btn:hover { filter:brightness(1.08); }
+.hub-add-btn-lg { padding:12px 22px; font-size:14.5px; margin-top:14px; }
+.hub-empty { text-align:center; padding:60px 20px; border:1px dashed var(--line); border-radius:var(--radius); }
+.hub-empty-title { font-size:18px; font-weight:700; margin:0 0 8px; }
+.hub-empty-sub { color:var(--muted); font-size:13.5px; max-width:420px; margin:0 auto; }
+.hub-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; }
+.hub-card { position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); transition:border-color .15s,transform .15s; }
+.hub-card:hover { border-color:var(--signal); transform:translateY(-1px); }
+.hub-card-open { display:block; padding:16px; text-decoration:none; color:inherit; }
+.hub-card-name { font-size:15px; font-weight:700; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.hub-card-path { font-family:var(--mono); font-size:10.5px; color:var(--faint); margin-top:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.hub-card-progress { height:5px; border-radius:999px; background:var(--surface-2); margin-top:12px; overflow:hidden; }
+.hub-card-progress-fill { height:100%; background:var(--s-done); border-radius:999px; }
+.hub-card-pct { font-family:var(--mono); font-size:10.5px; color:var(--muted); margin-top:6px; }
+.hub-card-meta { font-size:11px; color:var(--faint); margin-top:10px; }
+.hub-card-remove { position:absolute; top:8px; right:8px; width:22px; height:22px; border-radius:999px; border:1px solid var(--line); background:var(--surface-2); color:var(--muted); cursor:pointer; font-size:13px; line-height:1; }
+.hub-card-remove:hover { color:var(--s-blocked); border-color:var(--s-blocked); }
+
+.hub-modal { position:fixed; inset:0; background:rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; z-index:20; padding:20px; }
+.hub-modal[hidden] { display:none; }
+.hub-modal-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); width:100%; max-width:460px; max-height:86vh; display:flex; flex-direction:column; padding:20px; }
+.hub-modal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
+.hub-modal-head h2 { font-size:16px; margin:0; }
+.hub-modal-close { width:28px; height:28px; border-radius:8px; border:1px solid var(--line); background:var(--surface-2); color:var(--ink); cursor:pointer; font-size:16px; line-height:1; }
+.hub-modal-tabs { display:flex; gap:6px; margin-bottom:14px; }
+.hub-modal-tab { flex:1; font-family:var(--sans); font-size:12.5px; font-weight:600; padding:7px 10px; border-radius:8px; border:1px solid var(--line); background:var(--surface-2); color:var(--muted); cursor:pointer; }
+.hub-modal-tab.is-active { background:var(--signal); border-color:var(--signal); color:var(--on-accent); }
+.hub-modal-pane { display:flex; flex-direction:column; gap:10px; min-height:0; }
+.hub-modal-pane[hidden] { display:none; }
+.hub-browse-crumb { min-height:20px; }
+.hub-crumb-up { font-family:var(--mono); font-size:11.5px; color:var(--cool); background:none; border:0; cursor:pointer; padding:0; }
+.hub-browse-list { display:flex; flex-direction:column; gap:4px; max-height:220px; overflow-y:auto; border:1px solid var(--line); border-radius:9px; padding:6px; }
+.hub-browse-item { text-align:left; font-family:var(--sans); font-size:13px; padding:7px 9px; border-radius:6px; border:0; background:none; color:var(--ink); cursor:pointer; }
+.hub-browse-item:hover { background:var(--surface-2); }
+.hub-browse-empty { color:var(--faint); font-size:12.5px; padding:6px 2px; margin:0; }
+.hub-browse-footer { display:flex; align-items:center; gap:10px; justify-content:space-between; }
+.hub-browse-current { font-family:var(--mono); font-size:10.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
+.hub-paste-label { font-size:12px; color:var(--muted); }
+.hub-paste-input { font-family:var(--mono); font-size:13px; padding:9px 11px; border-radius:8px; border:1px solid var(--line); background:var(--surface-2); color:var(--ink); }
+.hub-modal-error { color:var(--s-blocked); font-size:12.5px; margin:4px 0 0; }
+.hub-modal-status { color:var(--muted); font-size:12.5px; margin:4px 0 0; }
+
+/* "back to hub" — plain link next to the brand logo on the per-project dashboard; a full navigation
+   (not SPA), since leaving to the hub means leaving this project's dashboard entirely. */
+.hub-back-link { display:flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:7px; color:var(--muted); text-decoration:none; font-size:15px; flex-shrink:0; transition:background .15s,color .15s; }
+.hub-back-link:hover { background:var(--surface-2); color:var(--ink); }