spectoflow 0.17.1 → 0.18.0

package/templates/dashboard/public/app.js

@@ -1,5 +1,9 @@
 'use strict';
+// Kept as a mutable object (not reassigned) so every existing STATUS[key] lookup keeps working
+// unchanged; updateStatusLabels() (called at the top of every render()) refreshes its values from
+// the current UI language, so a language change re-labels every status chip/column/legend for free.
 const STATUS = { todo:'To do', in_progress:'In progress', to_validate:'To validate', to_analyze:'To analyze', done:'Done', blocked:'Blocked' };
+function updateStatusLabels(){ for(const k of Object.keys(STATUS)) STATUS[k]=t('status.'+k); }
 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'
@@ -73,8 +77,8 @@ function renderApproval(container){
   if(!o || o.status!=='awaiting_approval') return;
   row=el('div','approval');
   row.append(el('div','msg-role','orchestrator · awaiting approval'));
-  const a=el('button','btn primary','Approve'); a.addEventListener('click',()=>approve('approve'));
-  const c=el('button','btn','Cancel'); c.addEventListener('click',()=>approve('cancel'));
+  const a=el('button','btn primary',t('action.approve')); a.addEventListener('click',()=>approve('approve'));
+  const c=el('button','btn',t('action.cancel')); c.addEventListener('click',()=>approve('cancel'));
   const acts=el('div','c-actions'); acts.append(a,c); row.append(acts);
   container.append(row); scrollChat(container);
 }
@@ -117,9 +121,11 @@ function flash(){ const s=$('#sync'); s.classList.add('saving'); $('#syncLabel')
 
 function render(){
   const c = P.config||{};
-  $('#projectName').textContent = c.projectType || 'project';
+  i18nSetLang(c.language||'en'); updateStatusLabels(); // language drives the whole UI, not just agent output
+  $('#projectName').textContent = P.projectName || c.projectType || 'project';
   const bv=$('#brandVer'); if(bv){ if(P.version){ bv.textContent='v'+P.version; bv.hidden=false; } else { bv.hidden=true; } }
-  $('#brandSub').textContent = (c.mode||'semi') + ' · ' + (c.language||'en');
+  // mode/language are edited live from the bar itself — see the #topMode/#topLang selects synced
+  // in renderSettings() below (called on every render tick) and saved via saveSettings().
   // agent select — widget (#runAgent) and Chat tab (#tabRunAgent) each get their own populated
   // <select>, since an id can't be shared by two elements; same option list, same source of truth.
   const runners=Object.keys((c.runners)||{claude:1});
@@ -131,11 +137,13 @@ function render(){
   const meterFill=$('#globalMeterFill');
   if(meterFill) meterFill.style.width=(s.pct||0)+'%';
   const meter=$('#globalMeter');
-  if(meter) meter.title=`Global progress: ${s.pct}% (${s.done}/${s.total} tasks)`;
+  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(); renderSettings();
+  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
 }
 
 // ---- Requests tab: tasks awaiting review/input (to_validate / to_analyze) ----
@@ -144,7 +152,7 @@ function renderRequests(){
   const toAsk=SpectoStats.stats(P).toAsk||[];
   const count=$('#requestsCount'); if(count) count.textContent=toAsk.length;
   list.innerHTML='';
-  if(!toAsk.length){ list.append(li('empty','Nothing awaiting you.')); return; }
+  if(!toAsk.length){ list.append(li('empty',t('requests.empty'))); return; }
   toAsk.forEach(t=>{
     const row=el('li','request-row'); row.tabIndex=0;
     row.append(el('span','request-id',t.id));
@@ -159,20 +167,35 @@ function renderRequests(){
 }
 
 // ---- right sidebar: "Journal" (read-only runtime.messages feed) ----
+// Capped to the 5 most recent entries by default — a long-running project's journal used to render
+// its entire history inline and blow up the sidebar. "See more" reveals the rest for this session
+// (client-side only; not persisted, so the rail opens compact again next visit).
+const JOURNAL_PAGE=5;
+let journalExpanded=false;
 function renderSidebar(){ renderJournal(); }
 function renderJournal(){
   const box=$('#journal'); if(!box) return;
   const msgs=((P.runtime&&P.runtime.messages)||[]).slice().reverse(); // reverse-chronological
   $('#journalCount').textContent=msgs.length;
   box.innerHTML='';
-  if(!msgs.length){ box.append(el('div','empty','No activity yet.')); return; }
-  msgs.forEach(m=>{
+  if(!msgs.length){ box.append(el('div','empty',t('journal.empty'))); journalToggleBtn(0,0); return; }
+  const shown = journalExpanded ? msgs : msgs.slice(0,JOURNAL_PAGE);
+  shown.forEach(m=>{
     const row=el('div','journal-row'+(m.role==='user'?' j-you':' k-'+(m.kind||'message')));
     row.append(el('div','journal-head', m.role + (m.agent&&m.agent!==m.role?(' · '+m.agent):'')));
     row.append(el('div','journal-text', m.text));
     box.append(row);
   });
+  journalToggleBtn(msgs.length, shown.length);
 }
+function journalToggleBtn(total,shownCount){
+  const btn=$('#journalMore'); if(!btn) return;
+  if(total<=JOURNAL_PAGE){ btn.hidden=true; return; }
+  btn.hidden=false;
+  btn.textContent = journalExpanded ? t('journal.seeLess') : t('journal.seeMore')+` (${total-shownCount})`;
+}
+const journalMoreBtn=$('#journalMore');
+if(journalMoreBtn) journalMoreBtn.addEventListener('click',()=>{ journalExpanded=!journalExpanded; renderJournal(); });
 
 // ---- SVG helpers ----------------------------------------------------------
 // The chart *markup* (donut/ring/bars arcs & rows) is built by the pure,
@@ -230,20 +253,20 @@ function renderOverview(){
 
   // KPI row
   const kpis=el('div','kpi-row');
-  kpis.append(kpiCard('Global progress', ring(s.pct,72), `${s.done}/${s.total} tasks`, cssv('--s-done')));
-  kpis.append(kpiCard('In progress', numBlock(s.byStatus.in_progress||0,'var(--s-in_progress)'), 'tasks', cssv('--s-in_progress')));
-  kpis.append(kpiCard('To validate', numBlock(s.byStatus.to_validate||0,'var(--s-to_validate)'), 'awaiting review', cssv('--s-to_validate')));
+  kpis.append(kpiCard(t('kpi.globalProgress'), ring(s.pct,72), `${s.done}/${s.total} ${t('kpi.tasksLabel')}`, cssv('--s-done')));
+  kpis.append(kpiCard(t('status.in_progress'), numBlock(s.byStatus.in_progress||0,'var(--s-in_progress)'), t('kpi.tasksLabel'), cssv('--s-in_progress')));
+  kpis.append(kpiCard(t('status.to_validate'), numBlock(s.byStatus.to_validate||0,'var(--s-to_validate)'), t('kpi.awaitingReview'), cssv('--s-to_validate')));
   const r=s.running||{};
-  let runVal='—', runSub='no runs yet';
-  if(r.agents>0){ runVal=`${r.agents} running`; runSub='agents active'; }
-  else if(r.orchestration&&r.orchestration.status){ runVal=r.orchestration.status; runSub='orchestration'; }
-  else if(r.lastRun){ runVal=r.lastRun.status||'—'; runSub='last: '+(r.lastRun.tool||'—'); }
-  kpis.append(kpiCard('Running', numBlock(runVal, r.agents>0?'var(--signal)':'var(--muted)', true), runSub, cssv('--signal')));
+  let runVal='—', runSub=t('kpi.noRunsYet');
+  if(r.agents>0){ runVal=`${r.agents} ${t('kpi.running').toLowerCase()}`; runSub=t('kpi.agentsActive'); }
+  else if(r.orchestration&&r.orchestration.status){ runVal=r.orchestration.status; runSub=t('kpi.orchestration'); }
+  else if(r.lastRun){ runVal=r.lastRun.status||'—'; runSub=t('kpi.lastPrefix')+(r.lastRun.tool||'—'); }
+  kpis.append(kpiCard(t('kpi.running'), numBlock(runVal, r.agents>0?'var(--signal)':'var(--muted)', true), runSub, cssv('--signal')));
   box.append(kpis);
 
   // Status donut + legend
   const segments=s.statuses.map(k=>({key:k,value:s.byStatus[k]||0,color:cssv('--s-'+k)}));
-  const d=donut(segments,140,{center:String(s.total),sub:'tasks'});
+  const d=donut(segments,140,{center:String(s.total),sub:t('chart.tasksSub')});
   const legend=el('div','legend');
   segments.forEach(seg=>{
     const item=el('div','legend-item');
@@ -260,19 +283,19 @@ function renderOverview(){
   if(hist.length===1){ hist=[{date:hist[0].date,total:0,done:0},hist[0]]; }
   const area=htmlBlock('area-wrap', hist.length
     ? SpectoCharts.area(
-        [{name:'Scope',color:cssv('--cool'),data:hist.map(h=>h.total)},
-         {name:'Delivered',color:cssv('--signal'),data:hist.map(h=>h.done)}],
+        [{name:t('chart.scope'),color:cssv('--cool'),data:hist.map(h=>h.total)},
+         {name:t('chart.delivered'),color:cssv('--signal'),data:hist.map(h=>h.done)}],
         hist.map(h=>(h.date||'').slice(5)))
-    : '<div class="empty">No history yet.</div>');
+    : '<div class="empty">'+t('chart.noHistory')+'</div>');
   // enrich the area's hit-rect tooltips with the actual scope/delivered values
   // for that point (charts.js keeps them pure — just the date label)
   area.querySelectorAll('.area-hit').forEach((hit,i)=>{
     const h=hist[i]; if(!h) return;
-    hit.dataset.tip = `<b>${h.date||''}</b><br>Scope: ${h.total||0} · Delivered: ${h.done||0}`;
+    hit.dataset.tip = `<b>${h.date||''}</b><br>${t('chart.scope')}: ${h.total||0} · ${t('chart.delivered')}: ${h.done||0}`;
   });
   const topRow=el('div','overview-top');
-  topRow.append(ocard('Status distribution', donutRow));
-  topRow.append(ocard('Scope vs delivered', area));
+  topRow.append(ocard(t('chart.statusDistribution'), donutRow));
+  topRow.append(ocard(t('chart.scopeVsDelivered'), area));
   box.append(topRow);
 
   // Workflow-at-a-glance strip (reuses the wf-arrow flow animation)
@@ -284,8 +307,8 @@ function renderOverview(){
     strip.append(node);
     if(i<steps.length-1){ const a=el('div','wf-arrow'+(st.enabled&&steps[i+1].enabled?'':' off')); strip.append(a); }
   });
-  if(!steps.length) strip.append(el('div','empty','No workflow defined.'));
-  box.append(ocard('Workflow at a glance', strip));
+  if(!steps.length) strip.append(el('div','empty',t('board.noWorkflow')));
+  box.append(ocard(t('board.workflowGlance'), strip));
 
   // Per-phase progress bars — only phases that actually hold tasks (headings with no checkbox tasks
   // are noise, not phases), and cap the list height with an internal scroll so a big project with
@@ -294,7 +317,7 @@ function renderOverview(){
   if(phaseRows.length){
     const barsEl=bars(phaseRows);
     if(phaseRows.length>8) barsEl.classList.add('scroll-cap');
-    box.append(ocard(`Phase progress (${phaseRows.length})`, barsEl));
+    box.append(ocard(t('board.phaseProgress',{n:phaseRows.length}), barsEl));
   }
 }
 
@@ -313,12 +336,12 @@ function renderBoard(){
   updateFilterChips();
 
   const specs=$('#specs'); specs.innerHTML=''; $('#specsCount').textContent=(P.specs||[]).length;
-  if(!(P.specs||[]).length) specs.append(li('empty','none yet'));
+  if(!(P.specs||[]).length) specs.append(li('empty',t('board.noneYet')));
   (P.specs||[]).forEach(s=> specs.append(li(null,s)));
 
   const running = (P.runtime&&P.runtime.agents||[]).filter(a=>a.status==='running');
   const rl=$('#running'); rl.innerHTML=''; $('#runCount').textContent=running.length;
-  if(!running.length) rl.append(li('empty','no agent running'));
+  if(!running.length) rl.append(li('empty',t('board.noAgentRunning')));
   running.forEach(a=>{ const e=li('run-live',''); e.innerHTML=`<b>${a.tool}</b> · ${a.task||'—'}`; rl.append(e); });
 
   const board=$('#board'); board.innerHTML='';
@@ -357,8 +380,8 @@ function renderKanban(board, tasks){
 }
 function updateBoardViewToggle(){ $$('#boardViewToggle .vt-btn').forEach(b=> b.classList.toggle('active', b.dataset.view===boardView)); }
 function li(cls,txt){ const e=el('li',cls); e.textContent=txt; return e; }
-function emptyState(){ const d=el('div','empty'); d.style.padding='40px'; d.textContent='No plans yet. Ask your agent to build something — it will run Intake and write plans/*.md.'; return d; }
-function noMatchState(){ const d=el('div','empty'); d.style.padding='40px'; d.textContent='No tasks match this filter.'; return d; }
+function emptyState(){ const d=el('div','empty'); d.style.padding='40px'; d.textContent=t('board.noPlans'); return d; }
+function noMatchState(){ const d=el('div','empty'); d.style.padding='40px'; d.textContent=t('board.noTasksMatch'); return d; }
 
 // ---- Backlog tab: flat, sortable, filterable table of every task ----------
 // Rows are built from P.plans (not allTasks()) so each task carries its phase title.
@@ -408,21 +431,21 @@ function renderBacklog(){
   if(backlogPage>pages) backlogPage=pages;
   if(backlogPage<1) backlogPage=1;
   body.innerHTML='';
-  if(!all.length){ body.append(backlogEmptyRow('No plans yet. Ask your agent to build something — it will run Intake and write plans/*.md.')); return renderBacklogPager(0,1); }
-  if(!filtered.length){ body.append(backlogEmptyRow('No tasks match this filter.')); return renderBacklogPager(0,1); }
+  if(!all.length){ body.append(backlogEmptyRow(t('board.noPlans'))); return renderBacklogPager(0,1); }
+  if(!filtered.length){ body.append(backlogEmptyRow(t('board.noTasksMatch'))); return renderBacklogPager(0,1); }
   const start=(backlogPage-1)*BACKLOG_PAGE;
   filtered.slice(start,start+BACKLOG_PAGE).forEach(r=> body.append(backlogRow(r)));
   renderBacklogPager(filtered.length,pages);
 }
 function renderBacklogPager(total,pages){
   const pager=$('#backlogPager'); if(!pager) return; pager.innerHTML='';
-  if(total<=BACKLOG_PAGE){ if(total) pager.append(el('span','pager-info',`${total} task${total>1?'s':''}`)); return; }
-  const prev=el('button','pager-btn','‹ Prev'); prev.disabled=backlogPage<=1;
+  if(total<=BACKLOG_PAGE){ if(total) pager.append(el('span','pager-info', t(total>1?'backlog.pagerTasks':'backlog.pagerTask',{n:total}))); return; }
+  const prev=el('button','pager-btn',t('backlog.prev')); prev.disabled=backlogPage<=1;
   prev.addEventListener('click',()=>{ backlogPage--; renderBacklog(); });
-  const next=el('button','pager-btn','Next ›'); next.disabled=backlogPage>=pages;
+  const next=el('button','pager-btn',t('backlog.next')); next.disabled=backlogPage>=pages;
   next.addEventListener('click',()=>{ backlogPage++; renderBacklog(); });
   const from=(backlogPage-1)*BACKLOG_PAGE+1, to=Math.min(total,backlogPage*BACKLOG_PAGE);
-  pager.append(prev, el('span','pager-info',`${from}–${to} of ${total} · page ${backlogPage}/${pages}`), next);
+  pager.append(prev, el('span','pager-info',t('backlog.pagerRange',{from,to,total,page:backlogPage,pages})), next);
 }
 function backlogEmptyRow(txt){
   const tr=el('tr','backlog-empty-row'); const td=el('td',null,txt); td.colSpan=7; tr.append(td); return tr;
@@ -451,12 +474,12 @@ function loadExpanded(){
 }
 function saveExpanded(set){ try{ localStorage.setItem('spf-expanded', JSON.stringify([...set])); }catch{} }
 let expandedPhases=loadExpanded();
-function allPhaseTitles(){ const t=new Set(); (P.plans||[]).forEach(pl=> pl.phases.forEach(ph=> t.add(ph.title))); return [...t]; }
+function allPhaseTitles(){ const set=new Set(); (P.plans||[]).forEach(pl=> pl.phases.forEach(ph=> set.add(ph.title))); return [...set]; }
 function updatePhaseToggleAll(){
   const btn=$('#phaseToggleAll'); if(!btn) return;
   const titles=allPhaseTitles();
-  const allOpen = titles.length>0 && titles.every(t=> expandedPhases.has(t));
-  btn.textContent = allOpen ? 'Collapse all' : 'Expand all';
+  const allOpen = titles.length>0 && titles.every(x=> expandedPhases.has(x));
+  btn.textContent = allOpen ? t('board.collapseAll') : t('board.expandAll');
   btn.dataset.state = allOpen ? 'open' : 'closed';
 }
 
@@ -515,17 +538,17 @@ function renderTask(t){
 // detail zone teaches the user what the pipeline is, not just that a step exists.
 function wfDesc(s){
   const n=String(s.name||'').toLowerCase();
-  if(/brainstorm|idea|intake/.test(n)) return 'Explore the request before committing to it — clarify the goal, constraints and success criteria, and shape a raw idea into something worth building.';
-  if(/analy/.test(n)) return 'Break the idea down: study the existing code and requirements, surface risks and ambiguities, and pin down clear, testable acceptance criteria.';
-  if(/spec/.test(n)) return 'Write the specification — the versioned, plain-markdown source of truth for what to build and why, before any code is written.';
-  if(/plan/.test(n)) return 'Turn the spec into an ordered plan of small, checkbox tasks — each one testable and executable on its own by a developer or an agent.';
-  if(/develop|implement|\bcode\b/.test(n)) return 'Implement the plan task by task, writing the code (and the tests that pin it down) to satisfy each checkbox.';
-  if(/integration/.test(n)) return 'Check that the pieces work together — modules, services and data paths across component boundaries, not just in isolation.';
-  if(/end.?to.?end|e2e/.test(n)) return 'Exercise the whole product the way a real user would, through the actual UI and end-to-end flows.';
-  if(/unit/.test(n)||/\btest/.test(n)) return 'Verify each unit in isolation — fast, focused tests that lock in behaviour and catch regressions early.';
-  if(/review/.test(n)) return 'A final quality pass — correctness, security and standards — before the work is considered done.';
-  if(/deploy|ship|release|publish/.test(n)) return 'Release the delivered work — ship it to its target environment.';
-  return 'A step in the delivery pipeline.';
+  if(/brainstorm|idea|intake/.test(n)) return t('wf.desc.brainstorm');
+  if(/analy/.test(n)) return t('wf.desc.analysis');
+  if(/spec/.test(n)) return t('wf.desc.spec');
+  if(/plan/.test(n)) return t('wf.desc.plan');
+  if(/develop|implement|\bcode\b/.test(n)) return t('wf.desc.develop');
+  if(/integration/.test(n)) return t('wf.desc.integration');
+  if(/end.?to.?end|e2e/.test(n)) return t('wf.desc.e2e');
+  if(/unit/.test(n)||/\btest/.test(n)) return t('wf.desc.unit');
+  if(/review/.test(n)) return t('wf.desc.review');
+  if(/deploy|ship|release|publish/.test(n)) return t('wf.desc.deploy');
+  return t('wf.desc.fallback');
 }
 let wfPopStep=null; // name of the step whose click-popover is open (null = closed)
 
@@ -536,11 +559,11 @@ let wfPopStep=null; // name of the step whose click-popover is open (null = clos
 function renderWorkflow(){
   const box=$('#wfDiagram'); box.innerHTML='';
   const steps=P.workflow||[];
-  if(!steps.length){ box.append(el('div','empty','No workflow defined.')); closeWfPop(); return; }
+  if(!steps.length){ box.append(el('div','empty',t('board.noWorkflow'))); closeWfPop(); return; }
   const enabledCount=steps.filter(s=>s.enabled).length;
   const legend=el('div','wf-legend');
   legend.append(el('span','wf-legend-dot'));
-  legend.append(el('span','wf-legend-txt',`${enabledCount} of ${steps.length} steps enabled — click a step to see what it does`));
+  legend.append(el('span','wf-legend-txt',t('workflow.stepsEnabled',{enabled:enabledCount,total:steps.length})));
   box.append(legend);
   const pipe=el('div','wf-pipeline');
   steps.forEach((s,i)=>{
@@ -551,7 +574,7 @@ function renderWorkflow(){
     circle.innerHTML=(typeof ICON!=='undefined'&&ICON.wf)?ICON.wf(s.name):'';
     step.append(circle);
     const cap=el('div','wf-caption'); cap.append(document.createTextNode(s.name));
-    if(s.optional) cap.append(el('span','wf-opt2','optional'));
+    if(s.optional) cap.append(el('span','wf-opt2',t('workflow.optional')));
     step.append(cap);
     const sel=(e)=>{ if(e) e.stopPropagation(); if(wfPopStep===s.name) closeWfPop(); else openWfPop(s.name); };
     step.addEventListener('click',sel);
@@ -570,19 +593,19 @@ function wfPopFill(pop, s, idx){
   const head=el('div','wf-detail-head');
   head.append(el('span','wf-detail-num',String(idx+1)));
   head.append(el('span','wf-detail-name',s.name));
-  head.append(el('span','wf-detail-status '+(s.enabled?'on':'off'), s.enabled?'enabled':'disabled'));
-  if(s.optional) head.append(el('span','wf-opt','optional'));
+  head.append(el('span','wf-detail-status '+(s.enabled?'on':'off'), s.enabled?t('workflow.enabled'):t('workflow.disabled')));
+  if(s.optional) head.append(el('span','wf-opt',t('workflow.optional')));
   pop.append(head);
   pop.append(el('p','wf-detail-desc', wfDesc(s)));
   const grid=el('div','wf-detail-grid');
-  grid.append(wfDetailRow('Capability', s.cap||'—'));
-  grid.append(wfDetailRow('Handled by', agent?(agent.title||agent.name):'—'));
-  grid.append(wfDetailRow('Skill', s.skill||'—'));
-  if(skill&&skill.standard) grid.append(wfDetailRow('Standard', skill.standard));
-  if(skill&&(skill.inputs||skill.outputs)) grid.append(wfDetailRow('Flow', (skill.inputs||'—')+'  →  '+(skill.outputs||'—')));
+  grid.append(wfDetailRow(t('workflow.capability'), s.cap||'—'));
+  grid.append(wfDetailRow(t('workflow.handledBy'), agent?(agent.title||agent.name):'—'));
+  grid.append(wfDetailRow(t('workflow.skill'), s.skill||'—'));
+  if(skill&&skill.standard) grid.append(wfDetailRow(t('workflow.standard'), skill.standard));
+  if(skill&&(skill.inputs||skill.outputs)) grid.append(wfDetailRow(t('workflow.flow'), (skill.inputs||'—')+'  →  '+(skill.outputs||'—')));
   pop.append(grid);
-  if(skill&&skill.description){ const sk=el('div','wf-detail-skill'); sk.append(el('b',null,'The “'+skill.name+'” skill — ')); sk.append(document.createTextNode(skill.description)); pop.append(sk); }
-  const btn=el('button','btn '+(s.enabled?'':'primary')+' wf-detail-btn', s.enabled?'Disable step':'Enable step');
+  if(skill&&skill.description){ const sk=el('div','wf-detail-skill'); sk.append(el('b',null,t('workflow.skillPrefix',{name:skill.name}))); sk.append(document.createTextNode(skill.description)); pop.append(sk); }
+  const btn=el('button','btn '+(s.enabled?'':'primary')+' wf-detail-btn', s.enabled?t('workflow.disableStep'):t('workflow.enableStep'));
   btn.addEventListener('click',(e)=>{ e.stopPropagation(); toggleStep(s.name); });
   const actions=el('div','wf-pop-actions'); actions.append(btn); pop.append(actions);
 }
@@ -629,27 +652,27 @@ function renderAttention(){
   $$('.attn-filters .fchip').forEach(b=> b.classList.toggle('active', b.dataset.attn===attnFilter));
   const shown=items.filter(i=> attnFilter==='all' ? true : attnFilter==='resolved' ? i.status==='resolved' : i.status!=='resolved');
   list.innerHTML='';
-  if(!shown.length){ list.append(el('div','empty', attnFilter==='resolved'?'Nothing resolved yet.':'No points of attention. The agent surfaces them here as it works — or add your own note above.')); return; }
+  if(!shown.length){ list.append(el('div','empty', attnFilter==='resolved'?t('attn.emptyResolved'):t('attn.emptyOpen'))); return; }
   shown.forEach(it=> list.append(attnRow(it)));
 }
 function attnRow(it){
   const row=el('div','attn-row'+(it.status==='resolved'?' is-resolved':'')+(it.source==='agent'?' from-agent':''));
   const head=el('div','attn-head');
-  head.append(el('span','attn-src '+(it.source==='agent'?'is-agent':'is-user'), it.source==='agent'?('⚑ '+(it.by||'agent')):'✎ you'));
+  head.append(el('span','attn-src '+(it.source==='agent'?'is-agent':'is-user'), it.source==='agent'?('⚑ '+(it.by||t('attn.agentFallback'))):('✎ '+t('attn.you'))));
   if(it.at) head.append(el('span','attn-time',(String(it.at).replace('T',' ')).slice(0,16)));
-  if(it.status==='resolved') head.append(el('span','chip s-done', it.promotedTo?('→ '+it.promotedTo):'resolved'));
+  if(it.status==='resolved') head.append(el('span','chip s-done', it.promotedTo?('→ '+it.promotedTo):t('attn.resolvedChip')));
   row.append(head);
   const txt=el('div','attn-text', it.text); row.append(txt);
   const acts=el('div','attn-actions');
   if(it.status!=='resolved'){
-    const val=el('button','btn primary','Validate → task'); val.addEventListener('click',()=>promoteAttn(it.id));
-    const res=el('button','btn','Resolve'); res.addEventListener('click',()=>patchAttn(it.id,{status:'resolved'}));
-    const edit=el('button','btn','Edit'); edit.addEventListener('click',()=>editAttn(it,txt));
+    const val=el('button','btn primary',t('action.validateToTask')); val.addEventListener('click',()=>promoteAttn(it.id));
+    const res=el('button','btn',t('action.resolve')); res.addEventListener('click',()=>patchAttn(it.id,{status:'resolved'}));
+    const edit=el('button','btn',t('action.edit')); edit.addEventListener('click',()=>editAttn(it,txt));
     acts.append(val,res,edit);
   }else{
-    const re=el('button','btn','Reopen'); re.addEventListener('click',()=>patchAttn(it.id,{status:'open'})); acts.append(re);
+    const re=el('button','btn',t('action.reopen')); re.addEventListener('click',()=>patchAttn(it.id,{status:'open'})); acts.append(re);
   }
-  const del=el('button','btn danger','Delete'); del.addEventListener('click',()=>deleteAttn(it.id));
+  const del=el('button','btn danger',t('action.delete')); del.addEventListener('click',()=>deleteAttn(it.id));
   acts.append(del); row.append(acts);
   return row;
 }
@@ -665,12 +688,19 @@ async function patchAttn(id,patch){ flash(); await fetch('/api/attention/'+encod
 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'}); }
 
-// ---- Settings tab: change autonomy mode + output language (writes config.json) ----
-function setLangSelect(lang){
-  const sel=$('#setLang'); if(!sel) return;
+// ---- 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
+// always-visible topbar selects (#topMode/#topLang, in .brand-sub, present in every design). Both
+// pairs are kept in sync: renderSettings() (every render tick) writes the current config into all
+// four; a change on any one immediately mirrors into its sibling before saving, so saveSettings()
+// never reads a stale value from the pair the user didn't touch.
+function fillLangSelect(sel,lang){
+  if(!sel) return;
   if(![...sel.options].some(o=>o.value===lang)){ const o=document.createElement('option'); o.value=lang; o.textContent=lang; sel.append(o); }
   sel.value=lang;
 }
+function setLangSelect(lang){ fillLangSelect($('#setLang'),lang); fillLangSelect($('#topLang'),lang); }
+function setModeSelects(mode){ [$('#setMode'),$('#topMode')].forEach(s=>{ if(s) s.value=mode; }); }
 // ---- 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{} }
@@ -678,7 +708,7 @@ async function saveDesign(id){ applyDesign(id); if(P) render(); /* re-read token
 
 function renderSettings(){
   const c=(P&&P.config)||{};
-  if($('#setMode')) $('#setMode').value=c.mode||'semi';
+  setModeSelects(c.mode||'semi');
   setLangSelect(c.language||'en');
   // design switcher — options from the DESIGNS registry (designs.js)
   const dsel=$('#setDesign');
@@ -694,26 +724,205 @@ function renderSettings(){
   const box=$('#settingsReadonly');
   if(box){
     box.innerHTML='';
-    const rows=[['Active agent',c.agent||'—'],['Project type',c.projectType||'—'],
-      ['Plans folder',c.plansDir||'plans'],['Specs folder',c.specsDir||'specs'],
-      ['Framework version', P&&P.version?('v'+P.version):'—']];
+    const rows=[[t('info.activeAgent'),c.agent||'—'],[t('info.projectType'),c.projectType||'—'],
+      [t('field.plansFolder'),c.plansDir||'plans'],[t('field.specsFolder'),c.specsDir||'specs'],
+      [t('field.frameworkVersion'), P&&P.version?('v'+P.version):'—']];
     rows.forEach(([k,v])=>{ const r=el('div','settings-ro-row'); r.append(el('span','settings-ro-k',k), el('span','settings-ro-v',String(v))); box.append(r); });
   }
   const fv=$('#footerVer'); if(fv) fv.textContent = (P&&P.version) ? ('v'+P.version) : '';
+  renderCustomize();
 }
 async function saveSettings(){
-  flash(); const mode=$('#setMode').value, language=$('#setLang').value;
+  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})});
   const s=$('#settingsSaved'); if(s){ s.hidden=false; setTimeout(()=>{ s.hidden=true; },1500); }
 }
 
+// ---- Custom dashboards (Customize page → generate-dashboard skill) ---------------------------
+// A custom dashboard is a DECLARATIVE block spec (.spectoflow/dashboard/custom/<id>.json, embedded
+// in P.customDashboards by the server) — never raw HTML/CSS/JS. Every block below reuses the exact
+// same components the built-in Board renders with (kpiCard/ocard/bars/donut/statTile/mdLite/el), so a
+// generated dashboard automatically matches the active design — and any design switched to later —
+// with zero page-specific styling. Mirrors the schema in .spectoflow/lib/custom-dashboard.js (the
+// Node-side validator); this is the independent browser-side reader for the same shape.
+function resolveBind(s,bindPath,fallback){
+  if(bindPath==null) return fallback;
+  let v=s;
+  for(const p of String(bindPath).split('.')){ if(v==null) return fallback; v=v[p]; }
+  return v==null?fallback:v;
+}
+function renderCustomBlock(b,s){
+  switch(b.type){
+    case 'markdown': return htmlBlock('cd-markdown', mdLite(b.content||''));
+    case 'kpi-row': {
+      const row=el('div','kpi-row');
+      (b.items||[]).forEach(it=>{
+        const val=it.bind!=null?resolveBind(s,it.bind,it.value):it.value;
+        row.append(kpiCard(it.label||'', numBlock(val==null?'—':val,it.color||'var(--signal)'), it.sub||'', cssv(it.colorVar||'--signal')));
+      });
+      return row;
+    }
+    case 'chart-bars': {
+      const rows=(b.rows||[]).map(r=>({label:r.label||'', pct:r.bind!=null?(resolveBind(s,r.bind,r.pct||0)):(r.pct||0), sub:r.sub||''}));
+      return ocard(b.title||'', bars(rows));
+    }
+    case 'chart-donut': {
+      const segs=(b.segments||[]).map(g=>({key:g.key||'', value:g.bind!=null?(resolveBind(s,g.bind,g.value||0)):(g.value||0), color:cssv(g.colorVar||'--muted')}));
+      const total=segs.reduce((a,x)=>a+(Number(x.value)||0),0);
+      const d=donut(segs,140,{center:String(total),sub:t('chart.tasksSub')});
+      const legend=el('div','legend');
+      segs.forEach(seg=>{ const item=el('div','legend-item'); const sw=el('span','legend-swatch'); sw.style.background=seg.color; item.append(sw, el('span','legend-label',seg.key), el('span','legend-count',String(seg.value))); legend.append(item); });
+      const row=el('div','donut-row'); row.append(d.wrap,legend);
+      return ocard(b.title||'', row);
+    }
+    case 'table': {
+      const wrap=el('div','table-scroll'); const tbl=el('table','backlog-table');
+      const thead=el('thead'); const htr=el('tr'); (b.columns||[]).forEach(c=>htr.append(el('th',null,String(c)))); thead.append(htr); tbl.append(thead);
+      const tbody=el('tbody'); (b.rows||[]).forEach(r=>{ const tr=el('tr'); (r||[]).forEach(c=>tr.append(el('td',null,String(c)))); tbody.append(tr); }); tbl.append(tbody);
+      wrap.append(tbl);
+      return b.title? ocard(b.title,wrap) : wrap;
+    }
+    case 'list': {
+      const ul=el('ul','flatlist'); (b.items||[]).forEach(x=>ul.append(li(null,String(x))));
+      return b.title? ocard(b.title,ul) : ul;
+    }
+    case 'stat-tile-row': {
+      const row=el('div','stat-tiles');
+      (b.items||[]).forEach(it=>{ const val=it.bind!=null?resolveBind(s,it.bind,it.value):it.value; row.append(statTile(val==null?'—':String(val), it.label||'', it.sub||'')); });
+      return row;
+    }
+    default: return el('div','empty','Unknown block type: '+b.type);
+  }
+}
+function customDashboardTabs(){ return $$('#tabs .tab[data-tab^="custom:"]'); }
+// Adds/removes nav tabs + panels to match P.customDashboards, and refreshes an existing tab's label
+// if the dashboard was regenerated with a new title. Console's rail and Orbit's radial menu both read
+// #tabs live, so a custom tab appears in either design's navigation with no design-specific change.
+function syncCustomTabs(list){
+  const tabsNav=$('#tabs'); if(!tabsNav) return;
+  const wanted=new Set(list.map(spec=>'custom:'+spec.id));
+  customDashboardTabs().forEach(btn=>{
+    const id=btn.dataset.tab;
+    if(!wanted.has(id)){ const panel=$('.panel[data-panel="'+id+'"]'); if(panel) panel.remove(); btn.remove(); }
+  });
+  list.forEach(spec=>{
+    const id='custom:'+spec.id;
+    let btn=$('#tabs .tab[data-tab="'+id+'"]');
+    if(!btn){
+      btn=el('button','tab'); btn.dataset.tab=id;
+      const icoKey=spec.icon||'info';
+      const ico=el('span','tab-ico'); ico.dataset.icon=icoKey; if(typeof ICON!=='undefined'&&ICON[icoKey]) ico.innerHTML=ICON[icoKey];
+      btn.append(ico, el('span','tab-label',spec.title||spec.id));
+      btn.addEventListener('click',()=>navigateTab(id));
+      tabsNav.append(btn);
+      const panel=el('section','panel'); panel.dataset.panel=id;
+      const wrap=el('div','custom-dash-wrap');
+      wrap.append(el('h2','panel-title',spec.title||spec.id));
+      wrap.append(el('div','custom-dash-body'));
+      panel.append(wrap);
+      $('.stage').append(panel);
+    } else {
+      const lbl=btn.querySelector('.tab-label'); if(lbl) lbl.textContent=spec.title||spec.id;
+      const title=$('.panel[data-panel="'+id+'"] .panel-title'); if(title) title.textContent=spec.title||spec.id;
+    }
+  });
+}
+function renderCustomDashboards(){
+  const list=P.customDashboards||[];
+  syncCustomTabs(list);
+  const s=SpectoStats.stats(P);
+  list.forEach(spec=>{
+    const box=$('.panel[data-panel="custom:'+spec.id+'"] .custom-dash-body'); if(!box) return;
+    box.innerHTML='';
+    (spec.blocks||[]).forEach(b=> box.append(renderCustomBlock(b,s)));
+  });
+}
+
+// ---- Settings → Customize: add dashboards/skills/agents by description, or "Auto" -------------
+// Generation itself is real agent work (research, clarify, write a file) — this UI never does it
+// client-side. It just constructs a plain-language prompt (recognized by AGENTS.md's Router, which
+// hands it to framework-curator) and sends it through the SAME /api/run + group-chat pipeline every
+// other "Run" already uses, then jumps to Chat so the requester watches it happen and can answer any
+// clarifying question there — no separate conversational UI to build or keep in sync.
+const CZ_KINDS=[
+  { kind:'dashboard', promptAdd:(d)=>'Add a custom dashboard: '+d, promptAuto:'Propose dashboard candidates for this project (Auto customize)' },
+  { kind:'skill',     promptAdd:(d)=>'Create a new skill: '+d,     promptAuto:'Propose skill candidates for this project (Auto customize)' },
+  { kind:'agent',     promptAdd:(d)=>'Create a new agent: '+d,     promptAuto:'Propose agent candidates for this project (Auto customize)' },
+];
+function czItemsFor(kind){
+  if(kind==='dashboard') return (P.customDashboards||[]).map(spec=>({ title:spec.title||spec.id, sub:(spec.blocks||[]).length+' '+t('customize.blocksSub'), open:()=>navigateTab('custom:'+spec.id) }));
+  if(kind==='skill') return (P.skills||[]).filter(s=>s.custom).map(s=>({ title:s.name, sub:s.description||'', open:()=>openFileDrawer('skill',s) }));
+  return (P.agents||[]).filter(a=>a.custom).map(a=>({ title:a.title||a.name, sub:a.description||'', open:()=>openFileDrawer('agent',a) }));
+}
+function renderCustomize(){
+  const root=$('#czRoot'); if(!root) return;
+  const openKind=root.dataset.open||'';
+  root.innerHTML='';
+  CZ_KINDS.forEach(({kind})=>{
+    const items=czItemsFor(kind);
+    const block=el('div','cz-block');
+    const head=el('div','cz-head');
+    head.append(el('h3',null,t('customize.'+kind+'s')+' ('+items.length+')'));
+    const addBtn=el('button','btn cz-add',t('customize.add.'+kind));
+    addBtn.setAttribute('aria-expanded',String(openKind===kind));
+    addBtn.addEventListener('click',()=>{ root.dataset.open=(openKind===kind)?'':kind; renderCustomize(); });
+    head.append(addBtn); block.append(head);
+    const list=el('div','cz-list');
+    if(!items.length) list.append(el('div','empty',t('customize.empty.'+kind)));
+    items.forEach(it=>{
+      const row=el('div','cz-item'); row.tabIndex=0;
+      row.append(el('span','cz-item-title',it.title));
+      if(it.sub) row.append(el('span','cz-item-sub',it.sub));
+      row.addEventListener('click',it.open);
+      row.addEventListener('keydown',(e)=>{ if(e.key==='Enter') it.open(); });
+      list.append(row);
+    });
+    block.append(list);
+    if(openKind===kind){
+      const form=el('div','cz-form');
+      const ta=el('textarea','chat-ta'); ta.placeholder=t('customize.describePh');
+      const sel=el('select','chat-agent');
+      const runners=Object.keys((P.config&&P.config.runners)||{claude:1});
+      runners.forEach((k)=>{ const o=document.createElement('option'); o.value=k; o.textContent=k; sel.append(o); });
+      if(P.config&&P.config.agent) sel.value=P.config.agent;
+      const actions=el('div','cz-form-actions');
+      const autoBtn=el('button','btn',t('customize.auto'));
+      const goBtn=el('button','btn primary',t('customize.generate'));
+      autoBtn.addEventListener('click',()=>czSubmit(kind,null,sel.value));
+      goBtn.addEventListener('click',()=>{ const v=ta.value.trim(); if(v) czSubmit(kind,v,sel.value); });
+      actions.append(sel,autoBtn,goBtn);
+      form.append(ta,actions);
+      block.append(form);
+    }
+    root.append(block);
+  });
+}
+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})});
+  const root=$('#czRoot'); if(root) root.dataset.open='';
+  navigateTab('chat');
+}
+
 // ---- client-side routing: /<tab>[/<taskId>] via the History API ------------
+// A custom dashboard (Customize page) gets its own tab id "custom:<id>" and its own URL shape
+// /custom/<id> — kept out of ROUTES (a fixed list) since the set of custom ids is dynamic; recognized
+// by a dedicated branch in tabFromPath()/navigateTab() instead.
 const ROUTES=['board','requests','attention','backlog','workflow','team','chat','info','settings'];
-function tabFromPath(){ const s=location.pathname.split('/').filter(Boolean); return ROUTES.includes(s[0])?s[0]:null; }
+function tabFromPath(){
+  const s=location.pathname.split('/').filter(Boolean);
+  if(s[0]==='custom'&&s[1]) return 'custom:'+decodeURIComponent(s[1]);
+  return ROUTES.includes(s[0])?s[0]:null;
+}
 function taskFromPath(){ const s=location.pathname.split('/').filter(Boolean); return (ROUTES.includes(s[0])&&s[1])?decodeURIComponent(s[1]):null; }
-function navigateTab(t,push){
-  activeTab=t; try{ localStorage.setItem('spf-tab',t); }catch{}
-  if(push!==false) history.pushState(null,'','/'+t);
+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);
+  }
   applyActiveTab();
   closeNav(); // a tab pick closes the mobile menu
 }
@@ -731,8 +940,8 @@ function agentCard(a){
   const c=el('div','card'); c.tabIndex=0;
   c.append(el('div','ct',a.title||a.name));
   if(a.capability) c.append(el('div','cc',a.capability));
-  const std=chipRow('standards',a.standards); if(std) c.append(std);
-  const uses=chipRow('uses',a.uses); if(uses) c.append(uses);
+  const std=chipRow(t('team.standardsLabel'),a.standards); if(std) c.append(std);
+  const uses=chipRow(t('team.usesLabel'),a.uses); if(uses) c.append(uses);
   if(a.description) c.append(el('div','cd',a.description));
   const open=()=>openFileDrawer('agent',a);
   c.addEventListener('click',open);
@@ -743,7 +952,7 @@ function skillCard(s){
   const c=el('div','card'); c.tabIndex=0;
   c.append(el('div','ct',s.name));
   if(s.capability) c.append(el('div','cc',s.capability));
-  const std=chipRow('standard', s.standard?[s.standard]:null); if(std) c.append(std);
+  const std=chipRow(t('team.standardLabel'), s.standard?[s.standard]:null); if(std) c.append(std);
   if(s.inputs||s.outputs) c.append(el('div','io', (s.inputs||'—')+'  →  '+(s.outputs||'—')));
   if(s.description) c.append(el('div','cd',s.description));
   const open=()=>openFileDrawer('skill',s);
@@ -803,19 +1012,19 @@ async function openFileDrawer(kind,obj){
   openTaskId=null;
   const rel = kind==='agent' ? ('agents/'+(obj.file||(obj.name+'.md'))) : ('skills/'+obj.name+'/SKILL.md');
   const b=$('#drawerBody'); b.innerHTML='';
-  b.append(el('div','d-id', kind==='agent'?'Agent':'Skill'));
+  b.append(el('div','d-id', kind==='agent'?t('drawer.agent'):t('drawer.skill')));
   b.append(el('div','d-title', obj.title||obj.name));
-  const sec=el('div','d-section'); sec.append(el('div','d-label','File · '+rel));
-  const body=el('div','md-body'); body.append(el('div','empty','Loading…'));
+  const sec=el('div','d-section'); sec.append(el('div','d-label',t('drawer.file',{rel})));
+  const body=el('div','md-body'); body.append(el('div','empty',t('drawer.loading')));
   sec.append(body); b.append(sec);
   $('#drawer').setAttribute('aria-hidden','false');
   try{
     const r=await fetch('/api/agentfile?path='+encodeURIComponent(rel));
     const data=await r.json().catch(()=>({}));
-    if(!r.ok){ body.innerHTML=''; body.append(el('div','empty', data.error||'Could not load this file.')); return; }
+    if(!r.ok){ body.innerHTML=''; body.append(el('div','empty', data.error||t('drawer.loadError'))); return; }
     body.innerHTML=mdLite(data.content||'');
   }catch(err){
-    body.innerHTML=''; body.append(el('div','empty','Could not load this file.'));
+    body.innerHTML=''; body.append(el('div','empty',t('drawer.loadError')));
   }
 }
 
@@ -836,11 +1045,11 @@ function infoRow(label,value){
   return row;
 }
 function statTile(value,label,sub){
-  const t=el('div','stat-tile');
-  t.append(el('div','stat-tile-val',String(value)));
-  t.append(el('div','stat-tile-label',label));
-  if(sub) t.append(el('div','stat-tile-sub',sub));
-  return t;
+  const tile=el('div','stat-tile');
+  tile.append(el('div','stat-tile-val',String(value)));
+  tile.append(el('div','stat-tile-label',label));
+  if(sub) tile.append(el('div','stat-tile-sub',sub));
+  return tile;
 }
 function renderInfo(){
   const box=$('#infoGrid'); if(!box) return;
@@ -852,39 +1061,39 @@ function renderInfo(){
 
   // Project: mode/language/agent/type from config
   const projRows=el('div','info-rows');
-  projRows.append(infoRow('Project type', c.projectType||'—'));
-  projRows.append(infoRow('Mode', c.mode||'—'));
-  projRows.append(infoRow('Language', c.language||'—'));
-  projRows.append(infoRow('Active agent', c.agent||'—'));
-  box.append(infoSection('Project','info',projRows));
+  projRows.append(infoRow(t('info.projectType'), c.projectType||'—'));
+  projRows.append(infoRow(t('info.mode'), c.mode||'—'));
+  projRows.append(infoRow(t('info.language'), c.language||'—'));
+  projRows.append(infoRow(t('info.activeAgent'), c.agent||'—'));
+  box.append(infoSection(t('info.project'),'info',projRows));
 
   // Runners: agent → command, monospace
   const runners=c.runners||{};
   const runnerKeys=Object.keys(runners);
   const runnerRows=el('div','info-rows info-rows-mono');
-  if(!runnerKeys.length) runnerRows.append(el('div','empty','No runners configured.'));
+  if(!runnerKeys.length) runnerRows.append(el('div','empty',t('info.noRunners')));
   runnerKeys.forEach(k=> runnerRows.append(infoRow(k, runners[k])));
-  box.append(infoSection('Runners','run',runnerRows));
+  box.append(infoSection(t('info.runners'),'run',runnerRows));
 
   // Counts: tasks/specs/agents/skills/enabled workflow steps
   const tiles=el('div','stat-tiles');
-  tiles.append(statTile(`${s.done}/${s.total}`,'Tasks',`${s.pct}% done`));
-  tiles.append(statTile(String((P.specs||[]).length),'Specs','files'));
-  tiles.append(statTile(String((P.agents||[]).length),'Agents','personas'));
-  tiles.append(statTile(String((P.skills||[]).length),'Skills','procedures'));
-  tiles.append(statTile(`${enabledSteps.length}/${steps.length}`,'Workflow','steps enabled'));
-  box.append(infoSection('Counts','board',tiles));
+  tiles.append(statTile(`${s.done}/${s.total}`,t('info.tasksLabel'),t('info.doneSub',{pct:s.pct})));
+  tiles.append(statTile(String((P.specs||[]).length),t('info.specsLabel'),t('info.filesSub')));
+  tiles.append(statTile(String((P.agents||[]).length),t('info.agentsLabel'),t('info.personasSub')));
+  tiles.append(statTile(String((P.skills||[]).length),t('info.skillsLabel'),t('info.proceduresSub')));
+  tiles.append(statTile(`${enabledSteps.length}/${steps.length}`,t('info.workflowLabel'),t('info.stepsEnabledSub')));
+  box.append(infoSection(t('info.counts'),'board',tiles));
 
   // Specs: the P.specs filename list
   const specsList=el('ul','flatlist');
   const specs=P.specs||[];
-  if(!specs.length) specsList.append(li('empty','none yet'));
+  if(!specs.length) specsList.append(li('empty',t('board.noneYet')));
   specs.forEach(sp=> specsList.append(li(null,sp)));
-  box.append(infoSection('Specs','backlog',specsList));
+  box.append(infoSection(t('info.specsLabel'),'backlog',specsList));
 
   // Workflow: compact list of enabled steps (name + cap/skill)
   const wfList=el('div','info-wf-list');
-  if(!enabledSteps.length) wfList.append(el('div','empty','No enabled workflow steps.'));
+  if(!enabledSteps.length) wfList.append(el('div','empty',t('info.noEnabledSteps')));
   enabledSteps.forEach(st=>{
     const row=el('div','info-wf-row');
     row.append(el('span','info-wf-name',st.name));
@@ -892,42 +1101,44 @@ function renderInfo(){
     if(meta) row.append(el('span','info-wf-meta',meta));
     wfList.append(row);
   });
-  box.append(infoSection('Workflow','workflow',wfList));
+  box.append(infoSection(t('info.workflowLabel'),'workflow',wfList));
 }
 
 function openDrawer(id,keep){
-  const t=allTasks().find(x=>x.id===id); if(!t) return;
+  // named `task`, not `t` — `t` is the global translation function (see i18n.js) and this whole
+  // 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));
   const b=$('#drawerBody'); const prev=keep?$('.drawer-panel').scrollTop:0; b.innerHTML='';
-  b.append(el('div','d-id',t.id+' · '+(t.level||'standard')+' · '+t.file));
-  b.append(el('div','d-title',t.title));
-  const sSec=el('div','d-section'); sSec.append(el('div','d-label','Status'));
+  b.append(el('div','d-id',task.id+' · '+(task.level||'standard')+' · '+task.file));
+  b.append(el('div','d-title',task.title));
+  const sSec=el('div','d-section'); sSec.append(el('div','d-label',t('task.status')));
   const sr=el('div','status-row');
   Object.keys(STATUS).forEach(k=>{
-    const btn=el('button','status-btn'+(t.status===k?' active':''),STATUS[k]);
-    if(t.status===k) btn.style.background=cssv('--s-'+k);
+    const btn=el('button','status-btn'+(task.status===k?' active':''),STATUS[k]);
+    if(task.status===k) btn.style.background=cssv('--s-'+k);
     btn.addEventListener('click',()=>patchTask(id,{status:k}));
     sr.append(btn);
   });
   sSec.append(sr); b.append(sSec);
 
   const tr=runtimeTests(id);
-  if(tr){ const ts=el('div','d-section'); ts.append(el('div','d-label','Tests'));
-    ts.append(el('div','d-text', tr.failed?`${tr.failed} failing, ${tr.passed||0} passing`:`${tr.passed||0} passing`)); b.append(ts); }
+  if(tr){ const ts=el('div','d-section'); ts.append(el('div','d-label',t('task.tests')));
+    ts.append(el('div','d-text', tr.failed?t('task.failingPassing',{f:tr.failed,p:tr.passed||0}):t('task.passing',{n:tr.passed||0}))); b.append(ts); }
 
-  const cSec=el('div','d-section'); cSec.append(el('div','d-label','Comments'));
+  const cSec=el('div','d-section'); cSec.append(el('div','d-label',t('task.comments')));
   const list=el('div','comments');
-  (t.comments||[]).forEach(cm=> list.append(el('div','comment',cm)));
-  if(!(t.comments||[]).length) list.append(el('div','empty','No comments.'));
+  (task.comments||[]).forEach(cm=> list.append(el('div','comment',cm)));
+  if(!(task.comments||[]).length) list.append(el('div','empty',t('task.noComments')));
   cSec.append(list);
-  const box=el('div','c-box'); const ta=el('textarea'); ta.placeholder='Add a comment, a remark, feedback…';
+  const box=el('div','c-box'); const ta=el('textarea'); ta.placeholder=t('task.addCommentPlaceholder');
   const actions=el('div','c-actions');
-  const add=el('button','btn','Add'); const an=el('button','btn primary','Add + to analyze');
+  const add=el('button','btn',t('action.add')); const an=el('button','btn primary',t('action.addToAnalyze'));
   add.addEventListener('click',()=>{ if(ta.value.trim())addComment(id,ta.value.trim(),'note'); });
   an.addEventListener('click',()=>{ if(ta.value.trim())addComment(id,ta.value.trim(),'analyze'); });
   actions.append(add,an); box.append(ta,actions);
-  box.append(el('div','empty','"To analyze" moves the task back so the agent picks it up next round.'));
+  box.append(el('div','empty',t('task.toAnalyzeHint')));
   cSec.append(box); b.append(cSec);
   $('#drawer').setAttribute('aria-hidden','false');
   if(keep) $('.drawer-panel').scrollTop=prev;
@@ -994,8 +1205,12 @@ $$('.attn-filters .fchip').forEach(b=> b.addEventListener('click',()=>{ attnFilt
 // settings — the footer link opens the Settings tab; selects save on change
 const footerSettingsBtn=$('#footerSettings'); if(footerSettingsBtn) footerSettingsBtn.addEventListener('click',()=>navigateTab('settings'));
 const footerLogo=$('.footer-logo'); if(footerLogo) footerLogo.addEventListener('click',e=>{ e.preventDefault(); navigateTab('board'); });
-$('#setMode').addEventListener('change',saveSettings);
-$('#setLang').addEventListener('change',saveSettings);
+function onModeSelectChange(e){ setModeSelects(e.target.value); saveSettings(); }
+function onLangSelectChange(e){ setLangSelect(e.target.value); saveSettings(); }
+$('#setMode').addEventListener('change',onModeSelectChange);
+$('#setLang').addEventListener('change',onLangSelectChange);
+const topModeSel=$('#topMode'); if(topModeSel) topModeSel.addEventListener('change',onModeSelectChange);
+const topLangSel=$('#topLang'); if(topLangSel) topLangSel.addEventListener('change',onLangSelectChange);
 const setDesignSel=$('#setDesign'); if(setDesignSel) setDesignSel.addEventListener('change',()=>saveDesign(setDesignSel.value));
 // theme
 (function(){ const s=localStorage.getItem('spf-theme'); if(s)document.documentElement.setAttribute('data-theme',s);