spectoflow 0.22.0 → 0.22.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spectoflow",
-  "version": "0.22.0",
+  "version": "0.22.2",
   "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

@@ -7,6 +7,7 @@ function updateStatusLabels(){ for(const k of Object.keys(STATUS)) STATUS[k]=t('
 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 sideHidden = (()=>{ try{ return localStorage.getItem('spf-side-hidden')==='1'; }catch{ return false; } })(); // right sidebar (Journal/Specs/Running) — mainly to give Kanban's own-width columns more room
 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
@@ -164,7 +165,7 @@ function render(){
   if(meter) meter.title=`${t('kpi.globalProgress')}: ${s.pct}% (${s.done}/${s.total} ${t('kpi.tasksLabel')})`;
   renderOverview(); renderBoard(); renderBacklog(); renderWorkflow(); renderTeam();
   renderChatLog($('#chatLog')); renderChatLog($('#chatTabLog'));
-  renderSidebar(); renderRequests(); renderAttention(); renderInfo(); renderDocs(); renderSettings(); renderFiles();
+  renderSidebar(); renderRequests(); renderAttention(); renderInfo(); renderDocs(); renderSettings(); renderFiles(); applySideHidden();
   renderCustomDashboards(); // adds/removes nav tabs + panels before applyActiveTab() below reads them
   applyActiveTab(); // re-apply the current tab so an SSE-driven re-render never resets to Board
   applyI18nStatic(); // re-translate the static markup (nav, headers, placeholders…) for this tick's language
@@ -1540,7 +1541,22 @@ openTaskId = taskFromPath(); // deep-link straight to a task drawer
 function applyActiveTab(){
   $$('#tabs .tab').forEach(t=> t.classList.toggle('is-active', t.dataset.tab===activeTab));
   $$('.panel').forEach(p=> p.classList.toggle('is-active', p.dataset.panel===activeTab));
-}
+  fitTabs();
+}
+// Horizontal top-nav designs (Console's vertical rail and Orbit's hidden/radial nav manage their own
+// layout independently) can run out of room as tabs are added over time — a single px breakpoint
+// tuned for whatever tab count existed back then goes stale the moment a tab is added or removed
+// (exactly what happened when the Files tab pushed the row from 10 to 11 items: some tabs, including
+// Personalize, silently overflowed with no visible way to reach them). Measure the row's REAL
+// overflow instead of guessing from viewport width alone, so it's correct at any tab count.
+function fitTabs(){
+  const tabsEl=$('#tabs'); if(!tabsEl) return;
+  const design=document.documentElement.getAttribute('data-design');
+  if(design==='console'||design==='orbit'){ tabsEl.classList.remove('tabs-compact'); return; }
+  tabsEl.classList.remove('tabs-compact'); // measure at full (labelled) size first
+  if(tabsEl.scrollWidth>tabsEl.clientWidth+1) tabsEl.classList.add('tabs-compact');
+}
+window.addEventListener('resize', (()=>{ let t=null; return ()=>{ clearTimeout(t); t=setTimeout(fitTabs,120); }; })());
 $$('#tabs .tab').forEach(tab=> tab.addEventListener('click',()=> navigateTab(tab.dataset.tab)));
 // mobile hamburger — toggles the tab dropdown (body.nav-open); closes on tab pick / outside / Esc
 const navToggle=$('#navToggle');
@@ -1568,6 +1584,16 @@ $$('#statusChips .fchip').forEach(b=> b.addEventListener('click', ()=>{ filter.s
 $('#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(); }));
+// right sidebar hide/show — Kanban's own-width columns need the room, and the toggle stays
+// persisted per viewer like every other layout preference here
+function applySideHidden(){
+  const panel=$('.panel[data-panel="board"]'); const btn=$('#sideToggle');
+  if(panel) panel.classList.toggle('side-hidden', sideHidden);
+  if(btn){ btn.setAttribute('aria-pressed', String(sideHidden)); btn.title=t(sideHidden?'board.showSidebar':'board.hideSidebar'); }
+}
+const sideToggleBtn=$('#sideToggle');
+if(sideToggleBtn) sideToggleBtn.addEventListener('click', ()=>{ sideHidden=!sideHidden; try{ localStorage.setItem('spf-side-hidden', sideHidden?'1':'0'); }catch{} applySideHidden(); });
+applySideHidden();
 // expand / collapse all phases (List view) — keeps a big board compact by default
 const phaseToggleAllBtn=$('#phaseToggleAll');
 if(phaseToggleAllBtn) phaseToggleAllBtn.addEventListener('click', ()=>{

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

@@ -199,12 +199,14 @@ 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); } }
+/* --ob-r is set inline on .ob-dial (computed per open, from the actual tab count) and inherits down
+   to every .ob-item — the 98px/72px fallbacks only cover a stylesheet loaded before orbit.js runs. */
+@keyframes ob-orbit { to{ opacity:1; transform:rotate(var(--a)) translate(var(--ob-r,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); } }
+  @keyframes ob-orbit { to{ opacity:1; transform:rotate(var(--a)) translate(var(--ob-r,72px)) rotate(calc(-1*var(--a))) scale(1); } }
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -220,7 +222,7 @@ html[data-design="orbit"] .ob-item .ob-bd {
   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))); }
+  html[data-design="orbit"] .ob-item { opacity:1; transform:rotate(var(--a)) translate(var(--ob-r,98px)) rotate(calc(-1*var(--a))); }
 }
 
 /* chat FAB — amber brand accent (the teal is the dial's); readable on both sets */

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

@@ -71,11 +71,31 @@
     }
   }
 
+  // Items sit on a ring of radius R; at n evenly-spaced items the straight-line gap between two
+  // adjacent item centers is a chord of length 2R·sin(π/n). Below ~9 items the tuned default radius
+  // already clears the item's own diameter with room to spare; past that, more tabs (built-in ones
+  // like this session's new Files tab, or future custom dashboards) would pack the same fixed ring
+  // tighter and tighter until items visibly overlap. Grow the radius instead — solved for the chord
+  // to equal the item diameter plus a minimum gap — so the ring always has room for however many
+  // tabs exist, never a fixed count tuned for whatever the tab bar happened to hold at the time.
+  function ringRadius(n, itemDiameter, minGap) {
+    if (n <= 1) return itemDiameter; // a lone item has no neighbor to clear
+    var needed = (itemDiameter + minGap) / (2 * Math.sin(Math.PI / n));
+    return Math.max(itemDiameter, needed);
+  }
+
   /* ---- radial overlay ---- */
   function buildOverlay() {
     if (ovEl) return;
     var list = tabs(), n = list.length || 1;
     var idx = activeIndex(list);
+    var isCompact = window.matchMedia('(max-width:900px)').matches;
+    var itemDiameter = isCompact ? 46 : 58;
+    var baseRadius = isCompact ? 72 : 98; // the tuned default for <=9 items — never shrink below it
+    // the gap accounts for the label text under each icon, which can run wider than the icon
+    // circle itself ("Agents & Skills" is the long pole) — a gap sized only to the circle left
+    // adjacent labels touching even though the circles themselves were visibly clear.
+    var radius = Math.max(baseRadius, ringRadius(n, itemDiameter, 22));
     var items = list.map(function (tab, i) {
       var angle = -90 + i * (360 / n);
       var ico = tab.querySelector('.tab-ico');
@@ -91,7 +111,7 @@
     ovEl = document.createElement('div');
     ovEl.className = 'ob-ov';
     ovEl.innerHTML =
-      '<div class="ob-dial" role="dialog" aria-label="spectoflow navigation">' +
+      '<div class="ob-dial" role="dialog" aria-label="spectoflow navigation" style="--ob-r:' + radius + 'px">' +
         '<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>' +

package/templates/dashboard/public/i18n.js

@@ -34,7 +34,7 @@ en: {
   'topbar.lang.title':'Output language — change from here or in Personalize',
   'topbar.agent.title':'Active agent — change from here or in Personalize',
   'topbar.agent.none':'No agent found',
-  'board.filterPlaceholder':'Filter tasks…','board.expandAll':'Expand all','board.collapseAll':'Collapse all',
+  'board.filterPlaceholder':'Filter tasks…','board.expandAll':'Expand all','board.collapseAll':'Collapse all','board.hideSidebar':'Hide sidebar','board.showSidebar':'Show sidebar',
   'board.expandAllTitle':'Expand or collapse all phases','board.viewList':'List','board.viewKanban':'Kanban',
   'board.viewList.title':'Grouped by phase','board.viewKanban.title':'Columns by status',
   'board.noTasksMatch':'No tasks match this filter.',
@@ -146,7 +146,7 @@ fr: {
   'topbar.lang.title':'Langue de sortie — modifiable ici ou dans Personnalisation',
   'topbar.agent.title':'Agent actif — modifiable ici ou dans Personnalisation',
   'topbar.agent.none':'Aucun agent trouvé',
-  'board.filterPlaceholder':'Filtrer les tâches…','board.expandAll':'Tout déplier','board.collapseAll':'Tout replier',
+  'board.filterPlaceholder':'Filtrer les tâches…','board.expandAll':'Tout déplier','board.collapseAll':'Tout replier','board.hideSidebar':'Masquer la barre latérale','board.showSidebar':'Afficher la barre latérale',
   'board.expandAllTitle':'Déplier ou replier toutes les phases','board.viewList':'Liste','board.viewKanban':'Kanban',
   'board.viewList.title':'Regroupé par phase','board.viewKanban.title':'Colonnes par statut',
   'board.noTasksMatch':'Aucune tâche ne correspond à ce filtre.',
@@ -258,7 +258,7 @@ es: {
   'topbar.lang.title':'Idioma de salida — se cambia aquí o en Personalizar',
   'topbar.agent.title':'Agente activo — se cambia aquí o en Personalizar',
   'topbar.agent.none':'No se encontró ningún agente',
-  'board.filterPlaceholder':'Filtrar tareas…','board.expandAll':'Expandir todo','board.collapseAll':'Colapsar todo',
+  'board.filterPlaceholder':'Filtrar tareas…','board.expandAll':'Expandir todo','board.collapseAll':'Colapsar todo','board.hideSidebar':'Ocultar barra lateral','board.showSidebar':'Mostrar barra lateral',
   'board.expandAllTitle':'Expandir o colapsar todas las fases','board.viewList':'Lista','board.viewKanban':'Kanban',
   'board.viewList.title':'Agrupado por fase','board.viewKanban.title':'Columnas por estado',
   'board.noTasksMatch':'Ninguna tarea coincide con este filtro.',
@@ -370,7 +370,7 @@ de: {
   'topbar.lang.title':'Ausgabesprache — hier oder in Personalisieren änderbar',
   'topbar.agent.title':'Aktiver Agent — hier oder in Personalisieren änderbar',
   'topbar.agent.none':'Kein Agent gefunden',
-  'board.filterPlaceholder':'Aufgaben filtern…','board.expandAll':'Alle ausklappen','board.collapseAll':'Alle einklappen',
+  'board.filterPlaceholder':'Aufgaben filtern…','board.expandAll':'Alle ausklappen','board.collapseAll':'Alle einklappen','board.hideSidebar':'Seitenleiste ausblenden','board.showSidebar':'Seitenleiste einblenden',
   'board.expandAllTitle':'Alle Phasen ein- oder ausklappen','board.viewList':'Liste','board.viewKanban':'Kanban',
   'board.viewList.title':'Nach Phase gruppiert','board.viewKanban.title':'Spalten nach Status',
   'board.noTasksMatch':'Keine Aufgabe entspricht diesem Filter.',
@@ -482,7 +482,7 @@ pt: {
   'topbar.lang.title':'Idioma de saída — altere aqui ou em Personalizar',
   'topbar.agent.title':'Agente ativo — altere aqui ou em Personalizar',
   'topbar.agent.none':'Nenhum agente encontrado',
-  'board.filterPlaceholder':'Filtrar tarefas…','board.expandAll':'Expandir tudo','board.collapseAll':'Recolher tudo',
+  'board.filterPlaceholder':'Filtrar tarefas…','board.expandAll':'Expandir tudo','board.collapseAll':'Recolher tudo','board.hideSidebar':'Ocultar barra lateral','board.showSidebar':'Mostrar barra lateral',
   'board.expandAllTitle':'Expandir ou recolher todas as fases','board.viewList':'Lista','board.viewKanban':'Kanban',
   'board.viewList.title':'Agrupado por fase','board.viewKanban.title':'Colunas por estado',
   'board.noTasksMatch':'Nenhuma tarefa corresponde a este filtro.',
@@ -594,7 +594,7 @@ it: {
   'topbar.lang.title':'Lingua di output — modificabile qui o in Personalizza',
   'topbar.agent.title':'Agente attivo — modificabile qui o in Personalizza',
   'topbar.agent.none':'Nessun agente trovato',
-  'board.filterPlaceholder':'Filtra attività…','board.expandAll':'Espandi tutto','board.collapseAll':'Comprimi tutto',
+  'board.filterPlaceholder':'Filtra attività…','board.expandAll':'Espandi tutto','board.collapseAll':'Comprimi tutto','board.hideSidebar':'Nascondi barra laterale','board.showSidebar':'Mostra barra laterale',
   'board.expandAllTitle':'Espandi o comprimi tutte le fasi','board.viewList':'Elenco','board.viewKanban':'Kanban',
   'board.viewList.title':'Raggruppato per fase','board.viewKanban.title':'Colonne per stato',
   'board.noTasksMatch':'Nessuna attività corrisponde a questo filtro.',

package/templates/dashboard/public/index.html

@@ -89,6 +89,9 @@
           </div>
           <button class="mini-btn" id="phaseToggleAll" data-i18n-title="board.expandAllTitle" data-i18n="board.expandAll" title="Expand or collapse all phases">Expand all</button>
           <input type="search" id="search" class="search" data-i18n-ph="board.filterPlaceholder" placeholder="Filter tasks…" autocomplete="off" />
+          <button class="mini-btn" id="sideToggle" type="button" data-i18n-title="board.hideSidebar" title="Hide sidebar">
+            <svg viewBox="0 0 18 18" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.6"><rect x="2" y="3" width="14" height="12" rx="2"/><line x1="11.5" y1="3" x2="11.5" y2="15"/></svg>
+          </button>
         </div>
         <div class="board" id="board"></div>
       </div>

package/templates/dashboard/public/styles.css

@@ -73,9 +73,14 @@ body { background:var(--bg); color:var(--ink); font-family:var(--sans); font-siz
 .panel-sub { color:var(--muted); font-size:12.5px; margin:0 0 16px; }
 .count { font-family:var(--mono); font-size:10px; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:1px 6px; }
 
-/* main column + right sidebar */
+/* main column + right sidebar — hideable (mainly to give Kanban's own-width columns more room
+   instead of forcing horizontal scroll on top of the sidebar already eating 300px) */
 .main { min-width:0; display:flex; flex-direction:column; }
 .side { border-left:1px solid var(--line); padding:18px 16px; display:flex; flex-direction:column; gap:22px; }
+.panel[data-panel="board"].side-hidden { grid-template-columns:1fr; }
+.panel[data-panel="board"].side-hidden .side { display:none; }
+#sideToggle { display:inline-flex; align-items:center; justify-content:center; padding:5px 9px; }
+#sideToggle[aria-pressed="true"] { color:var(--signal); border-color:var(--signal); }
 .rail-title { font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--faint); margin:0 0 8px; font-weight:700; display:flex; gap:8px; align-items:center; }
 .flatlist { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:5px; font-size:12.5px; }
 .flatlist li { background:var(--surface); border:1px solid var(--line); border-radius:7px; padding:6px 9px; color:var(--muted); }
@@ -389,9 +394,13 @@ body { background:var(--bg); color:var(--ink); font-family:var(--sans); font-siz
 .btn.primary { background:var(--signal); color:var(--on-accent); border-color:transparent; font-weight:600; }
 .empty { color:var(--faint); font-style:italic; font-size:12.5px; }
 :focus-visible { outline:2px solid var(--cool); outline-offset:2px; }
-/* Below ~1180px the 8 labelled tabs no longer fit alongside brand + right cluster,
-   so tabs go icon-only (and scroll horizontally inside their own strip if still tight). */
-@media (max-width:1180px){ .tabs .tab{ padding:7px 8px; } .tab-label{ display:none; } }
+/* A fixed px breakpoint here would go stale the moment a tab is added or removed (exactly what
+   happened when the Files tab pushed the row from 10 to 11 items) — fitTabs() in app.js measures
+   the tab row's REAL overflow instead and adds this class, so it's correct at any tab count and any
+   viewport width, not just the count it happened to be tuned against once. Narrow-viewport padding
+   still tightens up below ~1180px regardless — smaller tabs simply need less to overflow. */
+@media (max-width:1180px){ .tabs .tab{ padding:7px 8px; } }
+.tabs-compact .tab-label { display:none; }
 @media (max-width:900px){
   .panel[data-panel="board"].is-active { grid-template-columns:1fr; }
   .side { border-left:0; border-top:1px solid var(--line); flex-direction:row; flex-wrap:wrap; gap:16px 28px; }