spectoflow 0.22.0 → 0.22.3

package/package.json

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

@@ -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
@@ -34,7 +35,7 @@ function connect(){
   es.onmessage = (ev)=>{
     let m; try{ m=JSON.parse(ev.data); }catch{ return; }
     if(m.type==='change'||m.type==='message') return scheduleLoad(); // messages live from runtime.messages
-    if(m.type==='run-start'||m.type==='run-end') { chatState.forEach(st=>{ st.rawBlock=null; }); return; }
+    if(m.type==='run-start'||m.type==='run-end') { chatState.forEach(st=>{ st.rawBlock=null; }); sseBusy=(m.type==='run-start'); updateChatBusyUI(); return; }
     if(m.type==='run-line') return appendRaw(m.chunk);          // raw output is ephemeral (not logged)
   };
   es.onerror = ()=>{ $('#sync').classList.add('offline'); $('#syncLabel').textContent='offline'; };
@@ -114,7 +115,11 @@ function setChat(open){
 // doRun/doOrchestrate default to the floating widget's textarea/select; the Chat tab has its own
 // #tabRunPrompt/#tabRunAgent (an id can't be shared by two elements) and passes them explicitly —
 // one code path, same endpoints, for both surfaces.
+// isChatBusy() also guards the Ctrl/Cmd+Enter keyboard shortcuts, which call doRun() directly and
+// would otherwise bypass the buttons' own disabled state.
+function isChatBusy(){ return sseBusy || (P&&P.runtime&&P.runtime.orchestration&&P.runtime.orchestration.status==='running'); }
 async function doRun(promptEl,agentEl){
+  if(isChatBusy()) return;
   promptEl=promptEl||$('#runPrompt'); agentEl=agentEl||$('#runAgent');
   const prompt=promptEl.value.trim(); if(!prompt) return;
   const agent=agentEl.value;
@@ -122,6 +127,7 @@ async function doRun(promptEl,agentEl){
   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})});
@@ -131,6 +137,7 @@ async function approve(decision){ await fetch('/api/orchestrate/approve',{method
 // ---- 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})});
@@ -144,6 +151,23 @@ async function addComment(id,text,action){ flash(); await fetch('/api/task/'+enc
 async function toggleStep(name){ flash(); await fetch('/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/
+// Orchestrate/Summarize and the result showing up (the only outward sign, on Windows, was a real
+// console window popping up behind the agent's own spawn — now suppressed, so this replaces it):
+// a small spinner + disabled buttons for as long as an agent run is actually in flight. Driven by
+// two signals — SSE run-start/run-end (Send, Summarize, each individual Orchestrate step) and
+// runtime.orchestration.status (stays 'running' across the gaps between orchestrate steps, which
+// SSE run-start/run-end alone would flicker through). ----
+let sseBusy=false;
+function updateChatBusyUI(){
+  const orchStatus=P&&P.runtime&&P.runtime.orchestration&&P.runtime.orchestration.status;
+  const busy=sseBusy||orchStatus==='running';
+  document.body.classList.toggle('chat-busy',!!busy);
+  [$('#runBtn'),$('#orchBtn'),$('#widgetSummarizeBtn'),$('#tabRunBtn'),$('#tabOrchBtn'),$('#tabSummarizeBtn')].forEach(b=>{ if(b) b.disabled=!!busy; });
+  const tabStatus=$('#tabChatStatus'); if(tabStatus) tabStatus.hidden=!busy;
+  const widgetStatus=$('#widgetChatStatus'); if(widgetStatus) widgetStatus.hidden=!busy;
+}
+
 function render(){
   const c = P.config||{};
   i18nSetLang(c.language||'en'); updateStatusLabels(); // language drives the whole UI, not just agent output
@@ -164,7 +188,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(); updateChatBusyUI();
   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 +1564,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 +1607,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.',
@@ -91,7 +91,7 @@ en: {
   'chat.idle':'Type a request — the agent runs headless in this project with full memory (<code>CLAUDE.md → AGENTS.md</code>) and updates the board live.',
   'chat.inputPlaceholder':'e.g. Add a login feature with email + password',
   'chat.orchestrateTitle':'Walk the enabled workflow','chat.summarizeTitle':'Condense the recent activity into a summary','chat.clearTitle':'Clear the chat log',
-  'chat.warn':'⚠ Launches a real agent (<code>config.json → runners</code>) that can modify files &amp; run commands.',
+  'chat.warn':'⚠ Launches a real agent (<code>config.json → runners</code>) that can modify files &amp; run commands.','chat.running':'Agent running…',
   'info.title':'Info','info.sub':'Project overview — configuration, counts, specs and active workflow.',
   'info.project':'Project','info.projectType':'Project type','info.mode':'Mode','info.language':'Language',
   'info.activeAgent':'Active agent','info.runners':'Runners','info.noRunners':'No runners configured.',
@@ -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.',
@@ -203,7 +203,7 @@ fr: {
   'chat.idle':'Tapez une demande — l’agent s’exécute sans supervision dans ce projet avec toute sa mémoire (<code>CLAUDE.md → AGENTS.md</code>) et met le tableau à jour en direct.',
   'chat.inputPlaceholder':'ex. Ajouter une fonctionnalité de connexion par email + mot de passe',
   'chat.orchestrateTitle':'Parcourir le workflow activé','chat.summarizeTitle':'Condenser l’activité récente en un résumé','chat.clearTitle':'Effacer le journal de discussion',
-  'chat.warn':'⚠ Lance un agent réel (<code>config.json → runners</code>) qui peut modifier des fichiers et exécuter des commandes.',
+  'chat.warn':'⚠ Lance un agent réel (<code>config.json → runners</code>) qui peut modifier des fichiers et exécuter des commandes.','chat.running':'Agent en cours d’exécution…',
   'info.title':'Infos','info.sub':'Vue d’ensemble du projet — configuration, comptages, specs et workflow actif.',
   'info.project':'Projet','info.projectType':'Type de projet','info.mode':'Mode','info.language':'Langue',
   'info.activeAgent':'Agent actif','info.runners':'Runners','info.noRunners':'Aucun runner configuré.',
@@ -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.',
@@ -315,7 +315,7 @@ es: {
   'chat.idle':'Escribe una solicitud — el agente se ejecuta sin supervisión en este proyecto con toda su memoria (<code>CLAUDE.md → AGENTS.md</code>) y actualiza el tablero en vivo.',
   'chat.inputPlaceholder':'p. ej. Añadir un inicio de sesión con email + contraseña',
   'chat.orchestrateTitle':'Recorrer el workflow activado','chat.summarizeTitle':'Condensar la actividad reciente en un resumen','chat.clearTitle':'Borrar el registro del chat',
-  'chat.warn':'⚠ Lanza un agente real (<code>config.json → runners</code>) que puede modificar archivos y ejecutar comandos.',
+  'chat.warn':'⚠ Lanza un agente real (<code>config.json → runners</code>) que puede modificar archivos y ejecutar comandos.','chat.running':'Agente en ejecución…',
   'info.title':'Info','info.sub':'Visión general del proyecto — configuración, recuentos, specs y workflow activo.',
   'info.project':'Proyecto','info.projectType':'Tipo de proyecto','info.mode':'Modo','info.language':'Idioma',
   'info.activeAgent':'Agente activo','info.runners':'Runners','info.noRunners':'No hay runners configurados.',
@@ -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.',
@@ -427,7 +427,7 @@ de: {
   'chat.idle':'Geben Sie eine Anfrage ein — der Agent läuft eigenständig in diesem Projekt mit vollem Gedächtnis (<code>CLAUDE.md → AGENTS.md</code>) und aktualisiert das Board live.',
   'chat.inputPlaceholder':'z. B. Login mit E-Mail + Passwort hinzufügen',
   'chat.orchestrateTitle':'Den aktivierten Workflow durchlaufen','chat.summarizeTitle':'Die letzten Aktivitäten zu einer Zusammenfassung verdichten','chat.clearTitle':'Chat-Verlauf löschen',
-  'chat.warn':'⚠ Startet einen echten Agenten (<code>config.json → runners</code>), der Dateien ändern und Befehle ausführen kann.',
+  'chat.warn':'⚠ Startet einen echten Agenten (<code>config.json → runners</code>), der Dateien ändern und Befehle ausführen kann.','chat.running':'Agent läuft…',
   'info.title':'Info','info.sub':'Projektübersicht — Konfiguration, Zahlen, Specs und aktiver Workflow.',
   'info.project':'Projekt','info.projectType':'Projekttyp','info.mode':'Modus','info.language':'Sprache',
   'info.activeAgent':'Aktiver Agent','info.runners':'Runner','info.noRunners':'Keine Runner konfiguriert.',
@@ -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.',
@@ -539,7 +539,7 @@ pt: {
   'chat.idle':'Escreva um pedido — o agente corre sem supervisão neste projeto com toda a sua memória (<code>CLAUDE.md → AGENTS.md</code>) e atualiza o painel em direto.',
   'chat.inputPlaceholder':'ex. Adicionar login com email + palavra-passe',
   'chat.orchestrateTitle':'Percorrer o workflow ativado','chat.summarizeTitle':'Condensar a atividade recente num resumo','chat.clearTitle':'Limpar o registo do chat',
-  'chat.warn':'⚠ Inicia um agente real (<code>config.json → runners</code>) que pode alterar ficheiros e executar comandos.',
+  'chat.warn':'⚠ Inicia um agente real (<code>config.json → runners</code>) que pode alterar ficheiros e executar comandos.','chat.running':'Agente em execução…',
   'info.title':'Info','info.sub':'Visão geral do projeto — configuração, contagens, specs e workflow ativo.',
   'info.project':'Projeto','info.projectType':'Tipo de projeto','info.mode':'Modo','info.language':'Idioma',
   'info.activeAgent':'Agente ativo','info.runners':'Runners','info.noRunners':'Nenhum runner configurado.',
@@ -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.',
@@ -651,7 +651,7 @@ it: {
   'chat.idle':'Digita una richiesta — l’agente viene eseguito senza supervisione in questo progetto con tutta la sua memoria (<code>CLAUDE.md → AGENTS.md</code>) e aggiorna la bacheca in diretta.',
   'chat.inputPlaceholder':'es. Aggiungi un login con email + password',
   'chat.orchestrateTitle':'Percorri il workflow attivato','chat.summarizeTitle':'Condensa l’attività recente in un riassunto','chat.clearTitle':'Cancella il registro della chat',
-  'chat.warn':'⚠ Avvia un agente reale (<code>config.json → runners</code>) che può modificare file ed eseguire comandi.',
+  'chat.warn':'⚠ Avvia un agente reale (<code>config.json → runners</code>) che può modificare file ed eseguire comandi.','chat.running':'Agente in esecuzione…',
   'info.title':'Info','info.sub':'Panoramica del progetto — configurazione, conteggi, specs e workflow attivo.',
   'info.project':'Progetto','info.projectType':'Tipo di progetto','info.mode':'Modalità','info.language':'Lingua',
   'info.activeAgent':'Agente attivo','info.runners':'Runner','info.noRunners':'Nessun runner configurato.',

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>
@@ -267,6 +270,7 @@
           </div>
         </div>
         <p class="chat-warn" data-i18n-html="chat.warn">⚠ Launches a real agent (<code>config.json → runners</code>) that can modify files &amp; run commands.</p>
+        <p class="chat-status" id="tabChatStatus" hidden><span class="spinner" aria-hidden="true"></span><span data-i18n="chat.running">Agent running…</span></p>
       </div>
     </section>
 
@@ -386,6 +390,7 @@
       <button id="orchBtn" class="btn chat-send" data-i18n-title="chat.orchestrateTitle" data-i18n="action.orchestrate" title="Walk the enabled workflow">Orchestrate</button>
     </div>
     <p class="chat-warn" data-i18n-html="chat.warn">⚠ Launches a real agent (<code>config.json → runners</code>) that can modify files &amp; run commands.</p>
+    <p class="chat-status" id="widgetChatStatus" hidden><span class="spinner" aria-hidden="true"></span><span data-i18n="chat.running">Agent running…</span></p>
   </div>
 
   <div class="drawer" id="drawer" aria-hidden="true">

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); }
@@ -299,7 +304,10 @@ body { background:var(--bg); color:var(--ink); font-family:var(--sans); font-siz
 .files-create-form .bl-add-input { width:100%; }
 .files-create-actions { display:flex; gap:8px; }
 .files-create-actions .btn { font-size:12px; padding:6px 11px; }
-.files-tree { flex:1; min-height:0; overflow:auto; border:1px solid var(--line); border-radius:var(--radius); padding:8px; background:var(--surface); }
+.files-tree { flex:1; min-height:0; overflow:auto; border:1px solid var(--line); border-radius:var(--radius); padding:8px; background:var(--surface); scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
+.files-tree::-webkit-scrollbar { width:8px; }
+.files-tree::-webkit-scrollbar-thumb { background:var(--line); border-radius:8px; }
+.files-tree::-webkit-scrollbar-track { background:transparent; }
 .files-content-col { flex:1; min-width:0; display:flex; flex-direction:column; min-height:0; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); overflow:hidden; }
 .files-empty,.files-binary { padding:40px; text-align:center; color:var(--faint); font-style:italic; }
 .f-row { display:flex; align-items:center; gap:6px; padding:4px 6px; border-radius:6px; cursor:pointer; font-size:12.5px; white-space:nowrap; color:var(--muted); }
@@ -315,6 +323,10 @@ body { background:var(--bg); color:var(--ink); font-family:var(--sans); font-siz
 .files-actions { display:flex; gap:8px; flex-shrink:0; }
 .files-actions .btn { font-size:12px; padding:6px 11px; }
 .files-body-col { flex:1; min-height:0; display:flex; flex-direction:column; }
+.files-view,.files-editor { scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
+.files-view::-webkit-scrollbar,.files-editor::-webkit-scrollbar { width:8px; }
+.files-view::-webkit-scrollbar-thumb,.files-editor::-webkit-scrollbar-thumb { background:var(--line); border-radius:8px; }
+.files-view::-webkit-scrollbar-track,.files-editor::-webkit-scrollbar-track { background:transparent; }
 .files-view { flex:1; min-height:0; overflow:auto; padding:16px 20px; }
 .files-editor { flex:1; min-height:0; width:100%; border:0; resize:none; padding:16px 20px; font-family:var(--mono); font-size:12.5px; line-height:1.6; background:var(--surface); color:var(--ink); outline:none; }
 .files-iframe { flex:1; min-height:0; width:100%; border:0; background:#fff; }
@@ -389,9 +401,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; }
@@ -448,6 +464,13 @@ body { background:var(--bg); color:var(--ink); font-family:var(--sans); font-siz
 .chat-ta:focus { outline:2px solid var(--cool); outline-offset:1px; }
 .chat-send { flex:0 0 auto; align-self:auto; padding:8px 16px; }
 .chat-warn { font-size:10.5px; color:var(--signal); margin:6px 12px 10px; }
+body.chat-busy .chat-warn { display:none; } /* the running status below replaces it — one message at a time */
+.chat-status { display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--signal); margin:6px 12px 10px; font-weight:600; }
+.chat-status[hidden] { display:none; }
+.chat-status .spinner { width:12px; height:12px; border-radius:50%; flex-shrink:0; border:2px solid color-mix(in srgb,var(--signal) 28%,transparent); border-top-color:var(--signal); animation:chat-spin .7s linear infinite; }
+@keyframes chat-spin { to { transform:rotate(360deg); } }
+.chat-send:disabled,.mini-btn:disabled { opacity:.5; cursor:not-allowed; }
+@media (prefers-reduced-motion: reduce) { .chat-status .spinner { animation:none; } }
 .approval { display:flex; flex-direction:column; gap:8px; padding:10px 12px; background:var(--surface-2); border:1px solid color-mix(in srgb,var(--signal) 40%,var(--line)); border-radius:var(--radius); box-shadow:var(--shadow); }
 .approval .c-actions { display:flex; gap:8px; }
 #orchBtn,#tabOrchBtn { background:var(--cool); color:#04202a; border-color:transparent; font-weight:600; }
@@ -469,7 +492,7 @@ body { background:var(--bg); color:var(--ink); font-family:var(--sans); font-siz
 .chat-tab-input { display:flex; gap:10px; margin-top:10px; }
 .chat-tab-input .chat-ta { flex:1; min-height:56px; max-height:180px; }
 .chat-tab-actions { display:flex; flex-direction:column; gap:8px; flex-shrink:0; }
-.chat-tab-wrap .chat-warn { margin:8px 0 0; }
+.chat-tab-wrap .chat-warn,.chat-tab-wrap .chat-status { margin:8px 0 0; }
 @media (max-width:640px){ .chat-tab-input { flex-direction:column; } .chat-tab-actions { flex-direction:row; } }
 
 /* ---- chart & panel motion --------------------------------------------- */

package/templates/dashboard/runner.js

@@ -77,7 +77,10 @@ function startRun(root, { prompt, agent, logPrompt = true }, emit) {
   runStart(root, run); emit({ type: 'run-start', run }); emit({ type: 'change' });
 
   let child;
-  try { child = spawn(parts[0], [...parts.slice(1), p], { cwd: root, env: process.env }); }
+  // windowsHide: without it, spawning a .cmd-shimmed CLI (e.g. a global npm install of `claude` on
+  // Windows) pops up a real, empty console window on top of the browser — jarring, and pointless
+  // since stdout/stderr are already piped and captured below, never read from that window anyway.
+  try { child = spawn(parts[0], [...parts.slice(1), p], { cwd: root, env: process.env, windowsHide: true }); }
   catch (e) {
     runEnd(root, runId, 1);
     emit({ type: 'run-line', runId, chunk: 'spawn error: ' + e.message + '\n' });

package/templates/dashboard/summarize.js

@@ -38,9 +38,15 @@ function runSummarize(root, { agent } = {}, emit) {
     + '\n\n' + formatLog(messages);
 
   const parts = cmdStr.split(/\s+/).filter(Boolean);
+  const runId = 'summarize-' + Date.now().toString(36);
+  // Emitted before the spawn attempt (same order runner.js uses) so the client's "agent running"
+  // indicator lights up immediately, and so a spawn failure below still gets a matching run-end
+  // rather than leaving that indicator stuck on.
+  if (emit) emit({ type: 'run-start', run: { id: runId } });
   let child;
-  try { child = spawn(parts[0], [...parts.slice(1), prompt], { cwd: root, env: process.env }); }
-  catch (e) { return { error: e.message }; }
+  // windowsHide: without it, spawning a .cmd-shimmed CLI on Windows pops up a real console window.
+  try { child = spawn(parts[0], [...parts.slice(1), prompt], { cwd: root, env: process.env, windowsHide: true }); }
+  catch (e) { if (emit) emit({ type: 'run-end', runId, code: 1 }); return { error: e.message }; }
   try { child.stdin && child.stdin.end(); } catch {}
 
   let out = '';
@@ -63,7 +69,7 @@ function runSummarize(root, { agent } = {}, emit) {
     fresh.messages = (fresh.messages || []).filter((m) => !summarizedIds.has(m.id));
     fresh.messages.push(summary);
     store.writeRuntime(root, fresh);
-    if (emit) { emit({ type: 'message', message: summary }); emit({ type: 'change' }); }
+    if (emit) { emit({ type: 'run-end', runId, code }); emit({ type: 'message', message: summary }); emit({ type: 'change' }); }
   });
   return { child };
 }