spectoflow 0.24.0 → 0.27.0

package/lib/dashboard/public/app.js

@@ -6,14 +6,43 @@ const STATUS = { todo:'To do', in_progress:'In progress', to_validate:'To valida
 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'
-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
+// boardView/sideHidden/expandedPhases/activeTab/chatOpen used to be per-viewer localStorage
+// preferences; they are now real project settings, persisted server-side via /api/settings (same
+// mechanism as design/mode/language/agent — see saveSetting() below) so they survive a reload on any
+// device/browser, including through the online-hosted dashboard. Each starts at the same default the
+// old localStorage-absent fallback used, then is reconciled from P.config the first time it loads
+// (see syncSettingsFromServer(), called once from load()) — after that they're local state mutated
+// only by user actions, exactly like the old localStorage-backed vars were.
+// The 13 native tab ids, mirroring ops.js's NATIVE_TABS exactly — the client's own source of truth
+// for "what's a real native tab id" (used to validate P.config.navTabs before trusting it, same
+// defensive stance as ROUTES further down). Task 1 shipped the original 11, all default-enabled; Task
+// 2 (Sous-projet C) registered 'notes' — the Bloc note scratchpad — as the first tab that must start
+// OFF by default (an opt-in feature, per the user's explicit request); Task 3 registers 'meeting' —
+// the Daily meeting tab — the same way, so DEFAULT_OFF_TABS exists rather than a blanket "every
+// native tab defaults to enabled" the way Task 1 assumed.
+const NATIVE_TABS = ['board', 'chat', 'requests', 'attention', 'backlog', 'workflow', 'team', 'files', 'notes', 'meeting', 'info', 'docs', 'personalize'];
+const DEFAULT_OFF_TABS = new Set(['notes', 'meeting']);
+function defaultNavTabs() { return NATIVE_TABS.map((id) => ({ id, enabled: !DEFAULT_OFF_TABS.has(id) })); }
+let boardView = 'list'; // 'list' | 'kanban'
+let sideHidden = false; // right sidebar (Journal/Specs/Running) — mainly to give Kanban's own-width columns more room
+// Kanban column visibility + per-column page size (Sous-projet B, Task 2) — same persisted-project-
+// setting shape as the vars above. kanbanColumns defaults to every status (today's behavior); the
+// server (writeConfig()) refuses to ever persist an empty array, and the client UI mirrors that same
+// rule (see toggleKanbanColumn()) so the last visible column can't be turned off either way.
+let kanbanColumns = Object.keys(STATUS);
+let kanbanPageSize = 10; // 10 | 20
+// Per-column "show more" reveal state — deliberately NOT persisted (a per-view convenience, not a
+// saved preference): starts empty every load and is reset on any full render() tick (SSE reload) or
+// on re-filtering (search) / changing the page size, but survives a "Show more" click itself (that
+// handler adds to this set then re-renders the board without clearing it first).
+let kanbanExpanded = new Set();
 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
 let attnFilter = 'open';                          // attention tab filter — client-side only
-// apply the persisted design skin as early as possible (before the first paint of app-driven DOM)
-(function(){ try{ const d=localStorage.getItem('spf-design'); if(d) document.documentElement.setAttribute('data-design',d); }catch{} })();
+// The design skin itself is applied server-side, before the client even sees this file: hub-server.js
+// (lib/dashboard/inject-design.js) stamps data-design="..." straight into the served index.html's
+// <html> tag from the project's real config.design — no localStorage read needed for first paint.
 
 // The project this dashboard tab is showing — derived once from the URL's /p/<id>/... prefix. The
 // hub-server's legacy-route redirect (sub-project 3) guarantees a bookmark without this prefix never
@@ -31,6 +60,232 @@ function projectPath(rest) { return PROJECT_ID ? '/p/' + PROJECT_ID + rest : res
 // strip happens, so tabFromPath()/taskFromPath() never have to know about the prefix twice.
 function pathSegments() { const s = location.pathname.split('/').filter(Boolean); return (s[0] === 'p' && s[1]) ? s.slice(2) : s; }
 
+// ---- online dashboard (C1): offline, read-only state ----
+// Served by the relay while a project's machine is away, /api/project carries online:false + lastSeen.
+// One guard on fetch() short-circuits every mutating /api call to a 503 (instead of touching ~40 call
+// sites); the banner says why; the busy state (updateChatBusyUI) disables the run/orchestrate buttons.
+// The local hub never sends online:false, so none of this ever triggers locally.
+let OFFLINE=false;
+const _fetch=window.fetch.bind(window);
+window.fetch=(url,opts)=>{
+  const method=((opts&&opts.method)||'GET').toUpperCase();
+  if(OFFLINE&&method!=='GET'&&String(url).startsWith('/api/')) return Promise.resolve(new Response(JSON.stringify({error:t('offline.readonly')}),{status:503,headers:{'Content-Type':'application/json'}}));
+  return _fetch(url,opts);
+};
+function setOffline(p){
+  OFFLINE=p.online===false;
+  document.body.classList.toggle('is-offline',OFFLINE);
+  const bar=$('#offlineBar'); if(!bar) return;
+  bar.hidden=!OFFLINE;
+  if(OFFLINE){ const when=p.lastSeen?new Date(p.lastSeen).toLocaleString():'—'; $('#offlineText').textContent=t('offline.banner',{name:p.projectName||'project',when}); }
+  updateChatBusyUI();
+}
+
+// ---- generalized per-project settings persistence (Sous-projet B) ----
+// Every dashboard preference below (theme/boardView/sideHidden/expandedPhases/activeTab/chatOpen) is
+// now a real config.json field, saved through the exact same /api/settings op used by design/mode/
+// language/agent — see docs' Sous-projet B note. A frequent-write setting (activeTab, chatOpen,
+// expandedPhases can change on nearly every click) is debounced so a burst of clicks collapses into
+// one write/round-trip; the visible UI/DOM always updates synchronously and instantly regardless —
+// only the persistence call is delayed. Reused for the rarer settings too (design/theme/boardView/
+// sideHidden) since a 300ms delay on one isolated click is imperceptible and it keeps one code path.
+let _saveSettingTimer = null, _saveSettingPending = null;
+function saveSetting(patch) {
+  _saveSettingPending = Object.assign(_saveSettingPending || {}, patch);
+  clearTimeout(_saveSettingTimer);
+  _saveSettingTimer = setTimeout(() => {
+    const body = _saveSettingPending; _saveSettingPending = null;
+    fetch(withProject('/api/settings'), { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) }).catch(() => {});
+  }, 400);
+}
+// Reconciles the local, session-scoped preference vars from the server's config the first time a
+// project's data loads — after that they're local state, mutated only by user actions (exactly like
+// the old localStorage-backed vars were), and saved back out via saveSetting() above. Only ever
+// applied once (settingsSynced) so a later reload (SSE-driven, e.g. another viewer editing a task)
+// never clobbers a change the user just made locally that hasn't finished its debounce yet.
+let settingsSynced = false;
+function syncSettingsFromServer() {
+  if (settingsSynced || !P || !P.config) return;
+  settingsSynced = true;
+  const c = P.config;
+  if (typeof c.theme === 'string') document.documentElement.setAttribute('data-theme', c.theme);
+  if (typeof c.boardView === 'string') boardView = c.boardView;
+  if (typeof c.sideHidden === 'boolean') { sideHidden = c.sideHidden; applySideHidden(); }
+  if (Array.isArray(c.expandedPhases)) { expandedPhases = new Set(c.expandedPhases); updatePhaseToggleAll(); }
+  // activeTab: a URL deep-link (tabFromPath()) always wins over the saved preference — matches the
+  // old localStorage priority order exactly (tabFromPath() || saved || 'board').
+  if (typeof c.activeTab === 'string' && !tabFromPath()) { activeTab = normalizeTab(c.activeTab); applyActiveTab(); }
+  if (typeof c.chatOpen === 'boolean' && c.chatOpen) setChat(true);
+  if (Array.isArray(c.kanbanColumns) && c.kanbanColumns.length) kanbanColumns = c.kanbanColumns.filter((k) => STATUS[k]);
+  if (c.kanbanPageSize === 10 || c.kanbanPageSize === 20) kanbanPageSize = c.kanbanPageSize;
+}
+
+// ---- nav tabs enable/disable/reorder (Sous-projet C, Task 1) ----------------------------------
+// Unlike the per-viewer preferences above, navTabs is read fresh from P.config on every render() —
+// it's shared, structural nav config (closer to P.customDashboards than to a per-viewer convenience
+// like boardView), so another viewer/session disabling or reordering a tab must take effect on this
+// tab's very next SSE-driven reload, not just after this tab's own next full page load. A local
+// optimistic edit (toggleNavTab()/moveNavTab() below) mutates P.config.navTabs directly so it's
+// still reflected instantly and survives until the debounced save round-trips.
+function currentNavTabs() {
+  const c = P && P.config, arr = c && c.navTabs;
+  // A config saved before a new native tab existed (e.g. any project's navTabs from before this task
+  // added 'notes' — including one with no navTabs field at all, like a project that predates Task 1)
+  // is a genuinely common case, not just a malformed one: keep whatever known, non-duplicate entries
+  // it already has (preserving the viewer's own enable-state/order) and only append the ids it's
+  // missing, each at ITS OWN default (see DEFAULT_OFF_TABS) — never reset the whole array back to
+  // defaults just because it's short one id. A truly invalid entry (unknown id, duplicate, wrong
+  // shape) is dropped rather than trusted.
+  const known = Array.isArray(arr)
+    ? arr.filter((v) => v && typeof v === 'object' && typeof v.id === 'string' && typeof v.enabled === 'boolean' && NATIVE_TABS.includes(v.id))
+    : [];
+  const noDupes = new Set(known.map((v) => v.id)).size === known.length;
+  const base = noDupes ? known.slice() : [];
+  NATIVE_TABS.forEach((id) => { if (!base.find((v) => v.id === id)) base.push({ id, enabled: !DEFAULT_OFF_TABS.has(id) }); });
+  return base.map((v) => ({ id: v.id, enabled: v.id === 'personalize' ? true : !!v.enabled }));
+}
+// Hides/reorders the native <button class="tab"> elements inside #tabs to match currentNavTabs() —
+// Console's rail and Orbit's radial menu both read #tabs live (see syncCustomTabs()'s own comment),
+// so operating on the shared DOM here covers every design with no per-design code. Custom-dashboard
+// tabs (syncCustomTabs()) are never touched: each native button is inserted right before whichever
+// tab was already the first "custom:" one (or appended at the end if there isn't one yet), so native
+// tabs always land before custom ones regardless of the order these two functions run in.
+function applyNavTabs() {
+  const nav = $('#tabs'); if (!nav) return;
+  const list = currentNavTabs();
+  const anchor = nav.querySelector('.tab[data-tab^="custom:"]') || null;
+  list.forEach((entry) => {
+    const btn = nav.querySelector('.tab[data-tab="' + entry.id + '"]');
+    if (!btn) return;
+    btn.hidden = !entry.enabled;
+    nav.insertBefore(btn, anchor);
+  });
+  // If the currently active NATIVE tab just became disabled (e.g. the user disabled the tab they're
+  // viewing, or another viewer did and this tab just reloaded), navigate to a sensible fallback
+  // instead of leaving a hidden/disabled panel showing.
+  const activeEntry = list.find((e) => e.id === activeTab);
+  if (activeEntry && !activeEntry.enabled) {
+    const fallback = list.find((e) => e.id === 'board' && e.enabled) || list.find((e) => e.enabled);
+    if (fallback) navigateTab(fallback.id);
+  }
+}
+// Toggles one tab's enabled state (locked no-op for 'personalize' — mirrors the server's own refusal
+// so a click there gives immediate, obvious feedback instead of a silently-ignored save) and applies
+// it live, then persists the whole array via saveSetting() (the "whole array" contract writeConfig()
+// expects, same as toggleKanbanColumn()'s kanbanColumns save).
+function toggleNavTab(id) {
+  if (id === 'personalize') return;
+  const next = currentNavTabs().map((e) => e.id === id ? { id, enabled: !e.enabled } : e);
+  if (P && P.config) P.config.navTabs = next;
+  applyNavTabs(); renderNavTabsSettings(); saveSetting({ navTabs: next });
+}
+// Moves one tab up/down in the order (no-op at either boundary — mirrored by disabling the button in
+// renderNavTabsSettings()) and applies + persists exactly like toggleNavTab().
+function moveNavTab(id, dir) {
+  const list = currentNavTabs();
+  const i = list.findIndex((e) => e.id === id);
+  const j = i + dir;
+  if (i < 0 || j < 0 || j >= list.length) return;
+  [list[i], list[j]] = [list[j], list[i]];
+  if (P && P.config) P.config.navTabs = list;
+  applyNavTabs(); renderNavTabsSettings(); saveSetting({ navTabs: list });
+}
+// Renders the Personalize → "Navigation tabs" card: one row per native tab, in its own order — a
+// checkbox (disabled + explained for 'personalize', which can never be turned off) and up/down
+// reorder buttons (disabled at either boundary). Reuses each tab's own nav.* i18n label — no new tab
+// names invented here.
+function renderNavTabsSettings() {
+  const box = $('#navTabsList'); if (!box) return;
+  const list = currentNavTabs();
+  box.innerHTML = '';
+  list.forEach((entry, idx) => {
+    const locked = entry.id === 'personalize';
+    const row = el('div', 'nav-tabs-row' + (locked ? ' is-locked' : ''));
+    const cb = document.createElement('input');
+    cb.type = 'checkbox'; cb.checked = entry.enabled; cb.disabled = locked;
+    cb.setAttribute('aria-label', t('nav.' + (entry.id === 'personalize' ? 'settings' : entry.id)));
+    cb.addEventListener('change', () => toggleNavTab(entry.id));
+    const label = el('span', 'nav-tabs-label', t('nav.' + (entry.id === 'personalize' ? 'settings' : entry.id)));
+    if (locked) label.append(el('span', 'nav-tabs-lock-note', t('settings.navTabs.locked')));
+    const move = el('div', 'nav-tabs-move');
+    const up = el('button', null, '↑'); up.type = 'button'; up.title = t('settings.navTabs.moveUp'); up.setAttribute('aria-label', t('settings.navTabs.moveUp'));
+    up.disabled = idx === 0; up.addEventListener('click', () => moveNavTab(entry.id, -1));
+    const down = el('button', null, '↓'); down.type = 'button'; down.title = t('settings.navTabs.moveDown'); down.setAttribute('aria-label', t('settings.navTabs.moveDown'));
+    down.disabled = idx === list.length - 1; down.addEventListener('click', () => moveNavTab(entry.id, 1));
+    move.append(up, down);
+    row.append(cb, label, move);
+    box.append(row);
+  });
+}
+
+// Personalize → "Commands" card. Lists the effective commands (built-ins until the user edits, then
+// the persisted config.commands); each row toggles enabled, or opens an inline edit form. Add opens a
+// blank form. All mutations write the WHOLE array via saveSetting({commands}) — the contract
+// writeConfig() expects — mirroring toggleNavTab()/toggleKanbanColumn(). No native prompt/confirm
+// (they block SSE): delete is a direct button (matches renderNavTabsSettings, which gates nothing on
+// relay read-only either — there is no `P.config.readonly`/offline gating on this card, by design).
+let _cmdEditIndex = null; // index being edited, -1 = adding, null = form closed
+function currentCommands() { return SpectoCommands.effectiveCommands((P && P.config) || {}).map((c) => ({ trigger: c.trigger, description: c.description || '', instruction: c.instruction || '', enabled: c.enabled !== false })); }
+function saveCommands(list) { if (P && P.config) P.config.commands = list; renderCommandsSettings(); saveSetting({ commands: list }); }
+// Any list mutation other than the form's own submit closes an open edit form first — an index
+// captured when the form opened can otherwise point past the end of the list, or at a DIFFERENT
+// entry, once rows are added/removed/reordered underneath it (see renderCommandsSettings's own
+// defensive guard below for the belt-and-suspenders half of this fix).
+function toggleCommand(i) { _cmdEditIndex = null; const list = currentCommands(); if (!list[i]) return; list[i].enabled = !list[i].enabled; saveCommands(list); }
+function deleteCommand(i) { _cmdEditIndex = null; const list = currentCommands(); list.splice(i, 1); saveCommands(list); }
+function restoreCommands() { _cmdEditIndex = null; saveCommands(SpectoCommands.BUILTIN_COMMANDS.map((c) => ({ ...c }))); }
+function openCmdForm(i) { _cmdEditIndex = i; renderCommandsSettings(); }
+function closeCmdForm() { _cmdEditIndex = null; renderCommandsSettings(); }
+function submitCmdForm() {
+  const trg = $('#cmdFormTrigger').value.trim().toLowerCase();
+  const desc = $('#cmdFormDesc').value.trim();
+  const instr = $('#cmdFormInstr').value.trim();
+  const errEl = $('#cmdFormErr'); errEl.textContent = '';
+  const list = currentCommands();
+  const others = list.filter((_, idx) => idx !== _cmdEditIndex).map((c) => c.trigger);
+  const v = SpectoCommands.validateTrigger(trg, others);
+  if (!v.ok) { errEl.textContent = t('settings.commands.err.' + v.error); return; }
+  if (!instr) { errEl.textContent = t('settings.commands.err.emptyInstruction'); return; }
+  const entry = { trigger: trg, description: desc, instruction: instr, enabled: _cmdEditIndex >= 0 ? list[_cmdEditIndex].enabled : true };
+  if (_cmdEditIndex >= 0) list[_cmdEditIndex] = entry; else list.push(entry);
+  _cmdEditIndex = null; saveCommands(list);
+}
+function renderCommandsSettings() {
+  const box = $('#commandsList'); if (!box) return;
+  box.innerHTML = '';
+  const list = currentCommands();
+  list.forEach((c, i) => {
+    const row = el('div', 'cmd-row');
+    const cb = document.createElement('input'); cb.type = 'checkbox'; cb.checked = c.enabled;
+    cb.setAttribute('aria-label', c.trigger); cb.addEventListener('change', () => toggleCommand(i));
+    const lab = el('span', 'cmd-row-label'); lab.append(el('span', 'cmd-trigger', '/' + c.trigger));
+    if (c.description) lab.append(el('span', 'cmd-desc', c.description));
+    const acts = el('div', 'cmd-row-acts');
+    const edit = el('button', 'btn', t('action.edit')); edit.type = 'button'; edit.addEventListener('click', () => openCmdForm(i));
+    const del = el('button', 'btn danger', t('action.delete')); del.type = 'button'; del.addEventListener('click', () => deleteCommand(i));
+    acts.append(edit, del); row.append(cb, lab, acts); box.append(row);
+  });
+  if (_cmdEditIndex !== null) {
+    // Defensive: a stale index (from a mutation that somehow didn't already reset it) must never
+    // throw here — fall back to a blank form rather than crashing render() mid-tick.
+    const editing = (_cmdEditIndex >= 0 && list[_cmdEditIndex]) ? list[_cmdEditIndex] : { trigger: '', description: '', instruction: '' };
+    const form = el('div', 'cmd-form');
+    const mk = (id, ph, val, tag) => { const f = document.createElement(tag || 'input'); f.id = id; f.placeholder = ph; f.value = val || ''; return f; };
+    const tr = mk('cmdFormTrigger', t('settings.commands.ph.trigger'), editing.trigger);
+    const de = mk('cmdFormDesc', t('settings.commands.ph.desc'), editing.description);
+    const ins = mk('cmdFormInstr', t('settings.commands.ph.instruction'), editing.instruction, 'textarea'); ins.className = 'chat-ta';
+    const err = el('div', 'cmd-error'); err.id = 'cmdFormErr';
+    const save = el('button', 'btn primary', t('action.save')); save.type = 'button'; save.addEventListener('click', submitCmdForm);
+    const cancel = el('button', 'btn', t('action.cancel')); cancel.type = 'button'; cancel.addEventListener('click', closeCmdForm);
+    const btns = el('div', 'cmd-form-btns'); btns.append(save, cancel);
+    form.append(el('label', null, t('settings.commands.ph.trigger')), tr, el('label', null, t('settings.commands.ph.desc')), de, el('label', null, t('settings.commands.ph.instruction')), ins, err, btns);
+    box.append(form);
+  }
+  const addBtn = $('#cmdAddBtn'), resBtn = $('#cmdRestoreBtn');
+  if (addBtn) addBtn.onclick = () => openCmdForm(-1);
+  if (resBtn) resBtn.onclick = restoreCommands;
+}
+
 const $ = (s,r=document)=>r.querySelector(s);
 const $$ = (s,r=document)=>[...r.querySelectorAll(s)];
 const el=(t,c,x)=>{const e=document.createElement(t); if(c)e.className=c; if(x!=null)e.textContent=x; return e;};
@@ -38,7 +293,9 @@ const allTasks=()=> (P.plans||[]).flatMap(pl=>pl.phases.flatMap(ph=>ph.tasks.map
 const runtimeTests=(id)=> (P.runtime&&P.runtime.tests&&P.runtime.tests[id])||null;
 
 async function load(){
-  const r = await fetch(withProject('/api/project')); P = await r.json(); render();
+  const r = await fetch(withProject('/api/project')); P = await r.json();
+  syncSettingsFromServer();
+  render(); setOffline(P);
   if(openTaskId) openDrawer(openTaskId,true);
 }
 // Coalesce bursts of SSE 'change'/'message' events into one reload so the board doesn't
@@ -121,10 +378,12 @@ function appendRaw(chunk){
     scrollChat(container);
   });
 }
+// DOM-only — does not persist. Called both by real user toggles (which persist separately, see the
+// chatFab/chatClose/runQuickBtn listeners below) and by syncSettingsFromServer() reflecting a saved
+// chatOpen back onto a fresh page load, which must never re-trigger a save of the very value it read.
 function setChat(open){
   $('#chat').setAttribute('aria-hidden', open?'false':'true');
   $('#chatFab').classList.toggle('is-open',open);
-  try{ localStorage.setItem('spf-chat', open?'1':'0'); }catch{}
   // Land where you can actually type, not wherever the log happened to be scrolled last.
   if(open) setTimeout(()=>{ scrollChat($('#chatLog')); $('#runPrompt').focus(); },60);
 }
@@ -134,20 +393,86 @@ function setChat(open){
 // 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'); }
+// If `raw` is a slash-command invocation of a known enabled command, return the expanded
+// { prompt, display }; otherwise null (the raw text is sent unchanged). Uses the live config.
+function expandForSend(raw){
+  try { return SpectoCommands.expandCommand(raw, SpectoCommands.effectiveCommands((P&&P.config)||{})); }
+  catch(_){ return null; }
+}
 async function doRun(promptEl,agentEl){
   if(isChatBusy()) return;
   promptEl=promptEl||$('#runPrompt'); agentEl=agentEl||$('#runAgent');
-  const prompt=promptEl.value.trim(); if(!prompt) return;
+  const raw=promptEl.value.trim(); if(!raw) return;
   const agent=agentEl.value;
-  await fetch(withProject('/api/run'),{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({prompt,agent})});
-  promptEl.value=''; // the prompt renders as a bubble from the message log
+  const ex=expandForSend(raw);
+  const body=ex ? {prompt:ex.prompt, display:ex.display, agent} : {prompt:raw, agent};
+  await fetch(withProject('/api/run'),{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(body)});
+  promptEl.value=''; hideCmdMenu(); // 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(withProject('/api/orchestrate'),{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({request:prompt})});
-  promptEl.value='';
+  const raw=promptEl.value.trim(); if(!raw) return;
+  const ex=expandForSend(raw);
+  await fetch(withProject('/api/orchestrate'),{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({request: ex?ex.prompt:raw})});
+  promptEl.value=''; hideCmdMenu();
+}
+// ---- slash-command autocomplete: a single reused #cmdMenu popover, anchored above whichever chat
+// textarea is active. Shows while the input is exactly "/word" (no space yet); hides once args begin.
+// Keyboard (menu open only): ↑/↓ move, Enter/Tab select, Esc close — plain Enter in a textarea is a
+// newline (send is Ctrl/Cmd+Enter), so intercepting it here doesn't change send behavior. ----
+let _cmdMenuInput=null, _cmdMenuItems=[], _cmdMenuSel=-1;
+function cmdMenuEl(){ return $('#cmdMenu'); }
+function hideCmdMenu(){ const m=cmdMenuEl(); if(m){ m.hidden=true; m.innerHTML=''; } _cmdMenuInput=null; _cmdMenuItems=[]; _cmdMenuSel=-1; }
+function slashQuery(v){ const m=String(v||'').match(/^\/([a-z0-9_-]*)$/i); return m?m[1]:null; }
+function openCmdMenu(inputEl){
+  const q=slashQuery(inputEl.value);
+  if(q===null){ hideCmdMenu(); return; }
+  const cmds=SpectoCommands.matchCommands(q, SpectoCommands.effectiveCommands((P&&P.config)||{}));
+  const m=cmdMenuEl(); if(!m) return;
+  _cmdMenuInput=inputEl; _cmdMenuItems=cmds; _cmdMenuSel=cmds.length?0:-1;
+  m.innerHTML='';
+  if(!cmds.length){ m.append(el('div','cmd-empty', t('commands.menuEmpty'))); }
+  else cmds.forEach((c,i)=>{
+    const it=el('div','cmd-item'+(i===0?' is-sel':'')); it.setAttribute('role','option'); it.dataset.i=String(i);
+    it.append(el('span','cmd-trigger','/'+c.trigger));
+    if(c.description) it.append(el('span','cmd-desc',c.description));
+    it.addEventListener('mousedown',(e)=>{ e.preventDefault(); pickCmd(i); });
+    m.append(it);
+  });
+  m.hidden=false; positionCmdMenu(inputEl);
+}
+function positionCmdMenu(inputEl){
+  const m=cmdMenuEl(); if(!m||m.hidden) return;
+  const r=inputEl.getBoundingClientRect();
+  m.style.left=Math.round(r.left)+'px';
+  m.style.width=Math.round(r.width)+'px';
+  // place above the input; if it would clip the top, place below instead
+  const h=m.offsetHeight||160;
+  const top = r.top-h-6 >= 8 ? r.top-h-6 : r.bottom+6;
+  m.style.top=Math.round(top)+'px';
+}
+function moveCmdSel(d){
+  if(!_cmdMenuItems.length) return;
+  _cmdMenuSel=(_cmdMenuSel+d+_cmdMenuItems.length)%_cmdMenuItems.length;
+  $$('.cmd-item',cmdMenuEl()).forEach((n,i)=>n.classList.toggle('is-sel',i===_cmdMenuSel));
+}
+function pickCmd(i){
+  const c=_cmdMenuItems[i]; const inp=_cmdMenuInput;
+  if(!c||!inp) { hideCmdMenu(); return; }
+  inp.value='/'+c.trigger+' ';
+  hideCmdMenu();
+  inp.focus(); inp.selectionStart=inp.selectionEnd=inp.value.length;
+}
+// Returns true if it handled the key (caller should preventDefault + stop).
+function cmdMenuKey(e){
+  const m=cmdMenuEl(); if(!m||m.hidden) return false;
+  if((e.metaKey||e.ctrlKey)&&e.key==='Enter') return false; // let the send shortcut through untouched
+  if(e.key==='ArrowDown'){ if(_cmdMenuItems.length){ moveCmdSel(1); return true; } return false; }
+  if(e.key==='ArrowUp'){ if(_cmdMenuItems.length){ moveCmdSel(-1); return true; } return false; }
+  if(e.key==='Enter'||e.key==='Tab'){ if(_cmdMenuSel>=0){ pickCmd(_cmdMenuSel); return true; } }
+  if(e.key==='Escape'){ hideCmdMenu(); return true; }
+  return false;
 }
 async function approve(decision){ await fetch(withProject('/api/orchestrate/approve'),{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({decision})}); }
 // ---- chat context management: condense the log via the agent, or wipe it (Chat tab only — the
@@ -177,11 +502,15 @@ function flash(){ const s=$('#sync'); s.classList.add('saving'); $('#syncLabel')
 let sseBusy=false;
 function updateChatBusyUI(){
   const orchStatus=P&&P.runtime&&P.runtime.orchestration&&P.runtime.orchestration.status;
-  const busy=sseBusy||orchStatus==='running';
+  const busy=sseBusy||orchStatus==='running'||OFFLINE;
   document.body.classList.toggle('chat-busy',!!busy);
-  [$('#runBtn'),$('#orchBtn'),$('#widgetSummarizeBtn'),$('#tabRunBtn'),$('#tabOrchBtn'),$('#tabSummarizeBtn')].forEach(b=>{ if(b) b.disabled=!!busy; });
+  // #meetingGenBtn/#meetingRunStatus (Sous-projet C, Task 3) ride the exact same busy signal — this
+  // is a single local agent process, so a meeting Generate run must disable Send/Orchestrate/
+  // Summarize too, and vice versa (only one agent run is ever in flight at once).
+  [$('#runBtn'),$('#orchBtn'),$('#widgetSummarizeBtn'),$('#tabRunBtn'),$('#tabOrchBtn'),$('#tabSummarizeBtn'),$('#meetingGenBtn')].forEach(b=>{ if(b) b.disabled=!!busy; });
   const tabStatus=$('#tabChatStatus'); if(tabStatus) tabStatus.hidden=!busy;
   const widgetStatus=$('#widgetChatStatus'); if(widgetStatus) widgetStatus.hidden=!busy;
+  const meetingStatus=$('#meetingRunStatus'); if(meetingStatus) meetingStatus.hidden=!busy;
 }
 
 function render(){
@@ -202,10 +531,12 @@ function render(){
   if(meterFill) meterFill.style.width=(s.pct||0)+'%';
   const meter=$('#globalMeter');
   if(meter) meter.title=`${t('kpi.globalProgress')}: ${s.pct}% (${s.done}/${s.total} ${t('kpi.tasksLabel')})`;
+  kanbanExpanded.clear(); // a full SSE-driven reload always collapses any "show more" a viewer had open
   renderOverview(); renderBoard(); renderBacklog(); renderWorkflow(); renderTeam();
   renderChatLog($('#chatLog')); renderChatLog($('#chatTabLog'));
-  renderSidebar(); renderRequests(); renderAttention(); renderInfo(); renderDocs(); renderSettings(); renderFiles(); applySideHidden(); updateChatBusyUI();
+  renderSidebar(); renderRequests(); renderAttention(); renderInfo(); renderDocs(); renderSettings(); renderFiles(); renderNotes(); renderMeeting(); applySideHidden(); updateChatBusyUI();
   renderCustomDashboards(); // adds/removes nav tabs + panels before applyActiveTab() below reads them
+  applyNavTabs(); // hide/reorder native tabs per config.navTabs (may itself navigate away from a just-disabled active tab)
   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
 }
@@ -418,7 +749,8 @@ function renderBoard(){
   running.forEach(a=>{ const e=li('run-live',''); e.innerHTML=`<b>${a.tool}</b> · ${a.task||'—'}`; rl.append(e); });
 
   const board=$('#board'); board.innerHTML='';
-  updateBoardViewToggle();
+  updateBoardViewToggle(); updateKanbanPageSizeToggle();
+  if(kanbanColsOpen) renderKanbanColsPop(); // keep an open popover's checkbox state fresh across a live reload
   board.classList.toggle('is-kanban', boardView==='kanban');
   if(!tasks.length){ board.append(emptyState()); return; }
   if(boardView==='kanban'){ renderKanban(board, tasks); return; } // columns by status
@@ -432,12 +764,15 @@ function renderBoard(){
   if(!shown) board.append(noMatchState());
   updatePhaseToggleAll();
 }
-// Kanban view — one column per status, filtered by the text search (columns already are the statuses).
+// Kanban view — one column per status, filtered by the text search (columns already are the
+// statuses). Only enabled columns (kanbanColumns) render at all; each column shows up to
+// kanbanPageSize tasks (of its own filtered list) with a "Show more" reveal for the rest —
+// see kanbanExpanded above for the reset rules.
 function renderKanban(board, tasks){
   const q=filter.q.trim().toLowerCase();
   const match=(t)=> !q || (t.title+' '+t.id).toLowerCase().includes(q);
   const cols=el('div','kanban');
-  Object.keys(STATUS).forEach(st=>{
+  Object.keys(STATUS).filter(st=> kanbanColumns.includes(st)).forEach(st=>{
     const colTasks=tasks.filter(t=> t.status===st && match(t));
     const col=el('div','kanban-col');
     const head=el('div','kanban-col-head');
@@ -446,12 +781,23 @@ function renderKanban(board, tasks){
     col.append(head);
     const body=el('div','kanban-col-body');
     if(!colTasks.length) body.append(el('div','kanban-empty','—'));
-    colTasks.forEach(t=> body.append(renderTask(t)));
-    col.append(body); cols.append(col);
+    const expanded=kanbanExpanded.has(st);
+    const visible=expanded?colTasks:colTasks.slice(0,kanbanPageSize);
+    visible.forEach(t=> body.append(renderTask(t)));
+    col.append(body);
+    const remaining=colTasks.length-visible.length;
+    if(remaining>0){
+      const more=el('button','mini-btn kanban-more',t('board.kanbanShowMore',{n:remaining}));
+      more.type='button';
+      more.addEventListener('click',()=>{ kanbanExpanded.add(st); renderBoard(); });
+      col.append(more);
+    }
+    cols.append(col);
   });
   board.append(cols);
 }
 function updateBoardViewToggle(){ $$('#boardViewToggle .vt-btn').forEach(b=> b.classList.toggle('active', b.dataset.view===boardView)); }
+function updateKanbanPageSizeToggle(){ $$('#kanbanPageSize .vt-btn').forEach(b=> b.classList.toggle('active', Number(b.dataset.size)===kanbanPageSize)); }
 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=t('board.noPlans'); return d; }
 function noMatchState(){ const d=el('div','empty'); d.style.padding='40px'; d.textContent=t('board.noTasksMatch'); return d; }
@@ -540,13 +886,11 @@ function backlogRow(r){
 
 // ---- phase expand state: we track which phases are EXPANDED (default = none), so on a big
 // project the board opens compact — just phase headers with progress — and the user opens what
-// they need. Persisted per phase title (guarded for private mode). ----
-function loadExpanded(){
-  try{ const raw=localStorage.getItem('spf-expanded'); const arr=raw?JSON.parse(raw):[]; return new Set(Array.isArray(arr)?arr:[]); }
-  catch{ return new Set(); }
-}
-function saveExpanded(set){ try{ localStorage.setItem('spf-expanded', JSON.stringify([...set])); }catch{} }
-let expandedPhases=loadExpanded();
+// they need. Persisted per phase title, project-wide (config.json → expandedPhases, debounced —
+// see saveSetting()); starts empty and is reconciled from server config once, in
+// syncSettingsFromServer(). ----
+function saveExpanded(set){ saveSetting({expandedPhases:[...set]}); }
+let expandedPhases=new Set();
 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;
@@ -865,10 +1209,13 @@ async function saveAgent(id){
   const r=await fetch(withProject('/api/settings'),{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({agent:id})});
   if(!r.ok){ const body=await r.json().catch(()=>({})); showAgentError(body.error||t('topbar.agent.none')); setAgentSelects(); return; }
 }
-// ---- design skins (data-design) — switchable, persisted per viewer + as the project default ----
+// ---- design skins (data-design) — a shared, project-level setting (not per-viewer, Sous-projet B):
+// first paint comes from the server (inject-design.js stamps data-design into index.html itself, from
+// config.design), instant switching still applies the DOM attribute directly client-side, and the
+// choice is persisted the same way as any other project setting (saveSetting -> /api/settings). ----
 function currentDesign(){ return document.documentElement.getAttribute('data-design')||'console'; }
-function applyDesign(id){ document.documentElement.setAttribute('data-design',id); try{ localStorage.setItem('spf-design',id); }catch{} }
-async function saveDesign(id){ applyDesign(id); if(P) render(); /* re-read token colours into the SVG charts */ flash(); try{ await fetch(withProject('/api/settings'),{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({design:id})}); }catch{} }
+function applyDesign(id){ document.documentElement.setAttribute('data-design',id); }
+async function saveDesign(id){ applyDesign(id); if(P) render(); /* re-read token colours into the SVG charts */ flash(); saveSetting({design:id}); }
 
 function renderSettings(){
   const c=(P&&P.config)||{};
@@ -880,10 +1227,9 @@ function renderSettings(){
   if(dsel){
     const designs=(typeof DESIGNS!=='undefined')?DESIGNS:[{id:'control-room',name:'Control Room'}];
     if(dsel.options.length!==designs.length){ dsel.innerHTML=''; designs.forEach(d=>{ const o=document.createElement('option'); o.value=d.id; o.textContent=d.name; if(d.desc) o.title=d.desc; dsel.append(o); }); }
-    // reconcile: a per-viewer choice (localStorage) wins; else the project default (config.design)
-    let active; try{ active=localStorage.getItem('spf-design'); }catch{}
-    if(!active && c.design) active=c.design;
-    if(active && active!==currentDesign() && designs.some(d=>d.id===active)) document.documentElement.setAttribute('data-design',active);
+    // reconcile from the project-level default (config.design) only — design is no longer a
+    // per-viewer localStorage choice (Sous-projet B).
+    if(c.design && c.design!==currentDesign() && designs.some(d=>d.id===c.design)) document.documentElement.setAttribute('data-design',c.design);
     dsel.value=currentDesign();
   }
   const box=$('#settingsReadonly');
@@ -895,6 +1241,8 @@ function renderSettings(){
     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) : '';
+  renderNavTabsSettings();
+  renderCommandsSettings();
   renderCustomize();
 }
 async function saveSettings(){
@@ -1077,7 +1425,7 @@ async function czSubmit(kind,description,agent){
 // 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','files','chat','info','docs','personalize'];
+const ROUTES=['board','requests','attention','backlog','workflow','team','files','notes','meeting','chat','info','docs','personalize'];
 // the tab used to be named/routed "settings" — old bookmarks and any localStorage value saved
 // under that name still land on the Personalize tab instead of a blank panel.
 function normalizeTab(t){ return t==='settings'?'personalize':t; }
@@ -1090,7 +1438,9 @@ function tabFromPath(){
 function taskFromPath(){ const s=pathSegments(); return (ROUTES.includes(s[0])&&s[1])?decodeURIComponent(s[1]):null; }
 function navigateTab(tabId,push){
   closeWfPop(); // an open popover is anchored to whichever panel is currently active — never carry it across
-  activeTab=tabId; try{ localStorage.setItem('spf-tab',tabId); }catch{}
+  closeKanbanColsPop(); kanbanExpanded.clear(); // ditto for the Kanban columns popover + any "show more" reveals
+  hideCmdMenu(); // ditto for the slash-command popover — never carry it across a tab switch
+  activeTab=tabId; saveSetting({activeTab:tabId});
   if(push!==false){
     const isCustom=tabId.indexOf('custom:')===0;
     history.pushState(null,'', projectPath(isCustom ? '/custom/'+encodeURIComponent(tabId.slice(7)) : '/'+tabId));
@@ -1418,80 +1768,42 @@ function renderFilesTree(){
 }
 function filesExt(p){ const m=/\.([a-z0-9]+)$/i.exec(p||''); return m?m[1].toLowerCase():''; }
 
-// ---- lightweight syntax highlighting — zero-dependency (no CodeMirror/Monaco, per the explicit
-// call made when this tab was designed): a single char-scanner tokenizer good enough to make code
-// readable at a glance in a file browser, not a language-correct parser. Anything not recognized
-// (or with no lang mapping) just renders as plain, unstyled text — never a rendering error. ----
-const FILES_HL_LANG = {
-  js: { comments:[['//','\n'],['/*','*/']], strings:['"',"'",'`'],
-    keywords:'const let var function return if else for while do switch case break continue new class extends super this typeof instanceof in of try catch finally throw async await yield import export default from as null undefined true false void delete'.split(' ') },
-  json: { comments:[], strings:['"'], keywords:'true false null'.split(' ') },
-  css: { comments:[['/*','*/']], strings:['"',"'"], keywords:[] },
-  html: { comments:[['<!--','-->']], strings:['"',"'"], keywords:[], tags:true },
-  py: { comments:[['#','\n']], strings:['"',"'"],
-    keywords:'def class return if elif else for while break continue pass import from as try except finally raise with lambda yield async await None True False and or not in is del global nonlocal'.split(' ') },
-  sh: { comments:[['#','\n']], strings:['"',"'"],
-    keywords:'if then else elif fi for while do done case esac function return exit export local readonly'.split(' ') },
-  yml: { comments:[['#','\n']], strings:['"',"'"], keywords:'true false null'.split(' ') },
-};
+// ---- syntax highlighting — vendored Prism.js (self-hosted static files under
+// vendor/prism/, zero npm dependency; see index.html for the load order and Prism.manual note).
+// Anything not recognized (or with no lang mapping, or before Prism has loaded a grammar for it)
+// just renders as plain, escaped text — never a rendering error. ----
 function filesHlLang(ext){
-  if(['js','mjs','cjs','ts','jsx','tsx'].includes(ext)) return 'js';
+  if(['js','mjs','cjs','ts','jsx','tsx'].includes(ext)) return 'javascript';
   if(ext==='json') return 'json';
   if(ext==='css') return 'css';
-  if(['html','htm'].includes(ext)) return 'html';
-  if(ext==='py') return 'py';
-  if(['sh','bash'].includes(ext)) return 'sh';
-  if(['yml','yaml'].includes(ext)) return 'yml';
+  if(['html','htm'].includes(ext)) return 'markup';
+  if(ext==='py') return 'python';
+  if(['sh','bash'].includes(ext)) return 'bash';
+  if(['yml','yaml'].includes(ext)) return 'yaml';
+  if(ext==='java') return 'java';
+  if(ext==='go') return 'go';
+  if(ext==='cs') return 'csharp';
+  if(ext==='c') return 'c';
+  if(['cpp','cc','cxx','h','hpp'].includes(ext)) return 'cpp';
+  if(ext==='rs') return 'rust';
+  if(ext==='rb') return 'ruby';
+  if(ext==='php') return 'php';
+  if(ext==='swift') return 'swift';
+  if(['kt','kts'].includes(ext)) return 'kotlin';
+  if(ext==='sql') return 'sql';
+  if(['md','markdown'].includes(ext)) return 'markdown';
+  if(ext==='dockerfile') return 'docker';
   return null;
 }
-// Scans `src` one character at a time, classifying spans as it goes; returns an HTML string with
-// each span wrapped in a colored <span> (escaped — this is the only place raw file content becomes
-// markup, so nothing here may skip escHtml).
+// Delegates to Prism.highlight(), which both tokenizes AND HTML-escapes the source as it goes —
+// this is the only place raw file content becomes markup, so the escaping is Prism's own, not
+// ours; falls back to plain escHtml() when there's no langKey or Prism has no grammar for it
+// (e.g. the vendored scripts failed to load), matching the previous "no lang matched" behavior.
 function filesHighlight(src,langKey){
-  const lang=FILES_HL_LANG[langKey];
-  if(!lang) return escHtml(src);
-  const n=src.length;
-  let i=0,html='',plain='';
-  const flushPlain=()=>{ if(plain){ html+=escHtml(plain); plain=''; } };
-  const isWordChar=c=>/[A-Za-z0-9_$]/.test(c);
-  while(i<n){
-    let matched=false;
-    // comments
-    for(const [open,close] of lang.comments){
-      if(src.startsWith(open,i)){
-        const end = close==='\n' ? (src.indexOf('\n',i)===-1?n:src.indexOf('\n',i)) : (src.indexOf(close,i+open.length)===-1?n:src.indexOf(close,i+open.length)+close.length);
-        flushPlain(); html+='<span class="hl-comment">'+escHtml(src.slice(i,end))+'</span>'; i=end; matched=true; break;
-      }
-    }
-    if(matched) continue;
-    // strings
-    if(lang.strings.includes(src[i])){
-      const q=src[i]; let j=i+1;
-      while(j<n && src[j]!==q){ if(src[j]==='\\') j++; j++; }
-      j=Math.min(j+1,n);
-      flushPlain(); html+='<span class="hl-string">'+escHtml(src.slice(i,j))+'</span>'; i=j; continue;
-    }
-    // html tags (bonus: <tag ...> / </tag>) — a light touch, not full attribute-vs-value parsing
-    if(lang.tags && src[i]==='<' && /[a-zA-Z/!]/.test(src[i+1]||'')){
-      const end=src.indexOf('>',i); const j=end===-1?n:end+1;
-      flushPlain(); html+='<span class="hl-tag">'+escHtml(src.slice(i,j))+'</span>'; i=j; continue;
-    }
-    // numbers
-    if(/[0-9]/.test(src[i]) && !isWordChar(src[i-1]||'')){
-      let j=i; while(j<n && /[0-9.]/.test(src[j])) j++;
-      flushPlain(); html+='<span class="hl-number">'+escHtml(src.slice(i,j))+'</span>'; i=j; continue;
-    }
-    // keywords
-    if(isWordChar(src[i]) && !isWordChar(src[i-1]||'')){
-      let j=i; while(j<n && isWordChar(src[j])) j++;
-      const word=src.slice(i,j);
-      if(lang.keywords.includes(word)){ flushPlain(); html+='<span class="hl-keyword">'+escHtml(word)+'</span>'; i=j; continue; }
-      plain+=word; i=j; continue;
-    }
-    plain+=src[i]; i++;
+  if(langKey && window.Prism && Prism.languages && Prism.languages[langKey]){
+    return Prism.highlight(src, Prism.languages[langKey], langKey);
   }
-  flushPlain();
-  return html;
+  return escHtml(src);
 }
 // A textarea can't render colored text itself, so this overlays one, transparent, on top of a
 // highlighted <pre><code> "backdrop" showing through it (the standard technique for a highlighted
@@ -1655,6 +1967,208 @@ async function submitFilesCreate(){
   if(kind!=='dir') openFilesFile(rel);
 }
 
+// ---- Bloc note (Sous-projet C, Task 2) ----------------------------------------------------------
+// One freeform Markdown scratchpad per project, stored at .spectoflow/notes.md — reuses the exact
+// same files.read/files.write ops (and their /api/files/read|write routes) the File Explorer already
+// drives, and the exact same filesCodeEditor() backdrop+textarea component the Markdown file editor
+// there uses (langKey:'markdown', matching renderFilesMd's own call). No parallel persistence path.
+// The path is relative to the PROJECT ROOT (same convention as every other /api/files/* call — see
+// files.js's safePath()), so '.spectoflow/notes.md' is what actually lands inside .spectoflow/.
+const NOTES_PATH = '.spectoflow/notes.md';
+let notesLoaded = false, notesSaveTimer = null;
+// Only the FIRST activation fetches (mirrors renderFiles()'s own "fetch once" guard) — a full SSE
+// reload must never yank a note out from under an in-progress, not-yet-saved edit.
+function renderNotes(){
+  if(activeTab!=='notes' || notesLoaded) return;
+  notesLoaded = true;
+  loadNotes();
+}
+async function loadNotes(){
+  const box=$('#notesEditor'); if(!box) return;
+  box.innerHTML=''; box.append(el('div','files-empty',t('drawer.loading')));
+  let content='';
+  try{
+    const r=await fetch(withProject('/api/files/read?'+new URLSearchParams({path:NOTES_PATH})));
+    const d=await r.json().catch(()=>({}));
+    // "Not found." just means no note has ever been saved yet — an empty scratchpad, not an error.
+    if(r.ok) content=d.content||'';
+    else if(d.error && d.error!=='Not found.') throw new Error(d.error);
+  }catch(err){ notesSetStatus('error'); }
+  box.innerHTML='';
+  const {wrap}=filesCodeEditor(content,'markdown',(v)=>notesScheduleSave(v));
+  box.append(wrap);
+}
+// A scratchpad should feel like it's always saved, not like a form to submit — every keystroke
+// (debounced) writes straight through files.write, no explicit Save button. 700ms: a bit longer than
+// the 400ms generic settings debounce (saveSetting()), since this carries larger free text on every
+// keystroke rather than one small settings patch, but still short enough that a reload moments after
+// typing never loses more than a fraction of a second of work.
+function notesScheduleSave(content){
+  notesSetStatus('saving');
+  clearTimeout(notesSaveTimer);
+  notesSaveTimer=setTimeout(()=>notesSave(content),700);
+}
+async function notesSave(content){
+  try{
+    const r=await fetch(withProject('/api/files/write'),{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({path:NOTES_PATH,content})});
+    const d=await r.json().catch(()=>({}));
+    if(!r.ok) throw new Error(d.error||'error');
+    notesSetStatus('saved');
+  }catch(err){ notesSetStatus('error'); }
+}
+// Small, unobtrusive status label next to the note — mirrors the Files tab's own tip pattern
+// (files.saved/files.saveError) rather than inventing a new toast/notification system.
+function notesSetStatus(state){
+  const tip=$('#notesStatus'); if(!tip) return;
+  if(state==='saving'){ tip.textContent=t('notes.saving'); tip.className='note-status is-saving'; }
+  else if(state==='saved'){
+    tip.textContent=t('files.saved'); tip.className='note-status is-saved';
+    setTimeout(()=>{ if(tip.classList.contains('is-saved')) tip.textContent=''; },1500);
+  } else { tip.textContent=t('files.saveError'); tip.className='note-status is-error'; }
+}
+
+// ---- Daily meeting (Sous-projet C, Task 3) ------------------------------------------------------
+// One dated Markdown note per day, .spectoflow/meetings/<date>.md. MANUAL editing reuses the exact
+// same files.read/files.write ops + filesCodeEditor() component as Bloc note above (700ms debounced
+// autosave, "Not found." treated as an empty editor). GENERATE is the new half: POST
+// /api/meeting/generate spawns the active agent (same run-start/run-end/change SSE shape as
+// chat.summarize — see updateChatBusyUI() above, which already disables #meetingGenBtn and drives
+// #meetingRunStatus for free) and writes straight into the SAME file this tab already reads/writes,
+// so a generated note lands in the editor exactly like a manual edit would.
+// "Today" is always the SERVER's local date (P.todayDate, from GET /api/project — see meeting.js's
+// todayLocal()), never the browser's: this is a single-writer local tool and the filename itself must
+// be unambiguous, so a viewer's own time zone must never decide which file "today" resolves to.
+let meetingHistoryLoaded=false, meetingSelectedDate=null, meetingEditorDate=null, meetingAwaitingGen=false, meetingSaveTimer=null;
+function meetingFilePath(date){ return '.spectoflow/meetings/'+date+'.md'; }
+function meetingToday(){ return (P && P.todayDate) || new Date().toISOString().slice(0,10); } // fallback only until the first /api/project response lands
+// Reuses files.tree (already fetched by the Files tab for the same project) rather than a new
+// meeting.list op — the .spectoflow/meetings/<date>.md files are already ordinary nodes in that tree
+// (files.js's buildTree() only denies .git/node_modules), so the dated history is derived client-side
+// from data this tab needs to fetch anyway.
+function meetingDatesFromTree(tree){
+  const dot=(tree||[]).find(n=>n.name==='.spectoflow'&&n.type==='dir');
+  const mtg=dot && (dot.children||[]).find(n=>n.name==='meetings'&&n.type==='dir');
+  const kids=mtg ? (mtg.children||[]) : [];
+  return kids.filter(n=>n.type==='file'&&/^\d{4}-\d{2}-\d{2}\.md$/.test(n.name)).map(n=>n.name.slice(0,-3)).sort().reverse(); // newest first
+}
+// Only the FIRST activation fetches the tree (mirrors renderNotes()'s own "fetch once" guard) — an
+// unrelated SSE reload must never re-walk the tree out from under the viewer mid-browse. The editor
+// itself is reloaded separately, keyed off the selected date (see renderMeeting() below).
+function renderMeeting(){
+  if(activeTab!=='meeting') return;
+  if(!meetingSelectedDate) meetingSelectedDate=meetingToday();
+  if(!meetingHistoryLoaded){ meetingHistoryLoaded=true; loadMeetingHistory(); }
+  if(meetingEditorDate!==meetingSelectedDate) loadMeetingEditor(meetingSelectedDate);
+  // A generate run just finished (run-end already flipped sseBusy off, by the time the debounced
+  // 'change' reload that follows it reaches render()) — force a refetch even though the date itself
+  // didn't change, so the generated content actually appears.
+  if(meetingAwaitingGen && !sseBusy){ meetingAwaitingGen=false; loadMeetingEditor(meetingSelectedDate,true); loadMeetingHistory(); }
+  meetingSyncHistoryHighlight(); // cheap DOM-only sync — must run every tick, not just after a (network) history refetch
+  meetingRenderToolbar();
+}
+async function loadMeetingHistory(){
+  const box=$('#meetingHistory'); if(!box) return;
+  let dates=[];
+  try{
+    const r=await fetch(withProject('/api/files/tree'));
+    const d=await r.json().catch(()=>({}));
+    if(r.ok) dates=meetingDatesFromTree(d.tree);
+  }catch(err){ /* history is best-effort — an empty list still leaves today selectable/creatable */ }
+  const today=meetingToday();
+  const all=[today,...dates.filter(x=>x!==today)]; // today is always selectable/creatable, even with zero history yet
+  box.innerHTML='';
+  all.forEach(date=>{
+    const li=el('li',date===meetingSelectedDate?'is-active':'', date===today?(date+' · '+t('meeting.today')):date);
+    li.dataset.date=date;
+    li.addEventListener('click',()=>{ if(date===meetingSelectedDate) return; meetingSelectedDate=date; renderMeeting(); });
+    box.append(li);
+  });
+}
+// Just clicking a different history row changes meetingSelectedDate without re-fetching the tree (no
+// network round-trip needed to know which row is now selected) — so the "is-active" class has to be
+// re-synced from existing DOM rows on every renderMeeting() tick, not only when loadMeetingHistory()
+// itself (re)builds the list.
+function meetingSyncHistoryHighlight(){
+  const box=$('#meetingHistory'); if(!box) return;
+  box.querySelectorAll('li').forEach(li=>li.classList.toggle('is-active',li.dataset.date===meetingSelectedDate));
+}
+async function loadMeetingEditor(date,force){
+  if(!force && meetingEditorDate===date) return;
+  const box=$('#meetingEditor'); if(!box) return;
+  meetingEditorDate=date;
+  box.innerHTML=''; box.append(el('div','files-empty',t('drawer.loading')));
+  let content='';
+  try{
+    const r=await fetch(withProject('/api/files/read?'+new URLSearchParams({path:meetingFilePath(date)})));
+    const d=await r.json().catch(()=>({}));
+    // "Not found." just means no entry has been written for this date yet — an empty editor, not an error.
+    if(r.ok) content=d.content||'';
+    else if(d.error && d.error!=='Not found.') throw new Error(d.error);
+  }catch(err){ meetingSetStatus('error'); }
+  if(meetingSelectedDate!==date) return; // the viewer switched dates while this fetch was in flight
+  box.innerHTML='';
+  const {wrap}=filesCodeEditor(content,'markdown',(v)=>meetingScheduleSave(date,v));
+  box.append(wrap);
+  meetingRenderToolbar();
+}
+function meetingScheduleSave(date,content){
+  meetingSetStatus('saving');
+  clearTimeout(meetingSaveTimer);
+  meetingSaveTimer=setTimeout(()=>meetingSave(date,content),700);
+}
+async function meetingSave(date,content){
+  try{
+    const r=await fetch(withProject('/api/files/write'),{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({path:meetingFilePath(date),content})});
+    const d=await r.json().catch(()=>({}));
+    if(!r.ok) throw new Error(d.error||'error');
+    meetingSetStatus('saved');
+  }catch(err){ meetingSetStatus('error'); }
+}
+// Reuses the Files tab's own neutral tip classes/copy (files.saved/files.saveError) — this panel is a
+// journal/report, not a post-it, so Notes' own themed .note-status treatment doesn't belong here.
+function meetingSetStatus(state){
+  const tip=$('#meetingStatus'); if(!tip) return;
+  if(state==='saving'){ tip.textContent=t('notes.saving'); tip.className='files-saved-tip'; }
+  else if(state==='saved'){
+    tip.textContent=t('files.saved'); tip.className='files-saved-tip';
+    setTimeout(()=>{ if(tip.textContent===t('files.saved')) tip.textContent=''; },1500);
+  } else { tip.textContent=t('files.saveError'); tip.className='files-error-tip'; }
+}
+function meetingRenderToolbar(){
+  const dateEl=$('#meetingDate'); if(dateEl) dateEl.textContent=meetingSelectedDate||'';
+  const isToday=meetingSelectedDate===meetingToday();
+  const genBtn=$('#meetingGenBtn'); if(genBtn) genBtn.hidden=!isToday; // Generate is offered for TODAY only — see report
+  if(!isToday) meetingHideConfirm();
+}
+function meetingHasContent(){
+  const ta=$('#meetingEditor .files-code-input');
+  return !!(ta && ta.value.trim());
+}
+function meetingHideConfirm(){ const box=$('#meetingConfirm'); if(box) box.hidden=true; }
+// Overwrite safety, no native confirm()/alert() (blocks the whole tab, including SSE): reuses this
+// codebase's existing non-blocking "explicit second action" shape (see filesDiscardBtn's own comment
+// above) — an inline bar with its own Cancel/Generate-anyway buttons, shown only when the date being
+// generated already has non-empty content, instead of a native dialog.
+function meetingGenerateClick(){
+  if(isChatBusy()) return;
+  if(meetingHasContent()){ const box=$('#meetingConfirm'); if(box) box.hidden=false; return; }
+  doMeetingGenerate();
+}
+async function doMeetingGenerate(){
+  meetingAwaitingGen=true;
+  const agentEl=$('#tabRunAgent')||$('#runAgent');
+  try{
+    const r=await fetch(withProject('/api/meeting/generate'),{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({agent:agentEl?agentEl.value:undefined,date:meetingSelectedDate})});
+    if(!r.ok){
+      // The op threw before ever spawning (e.g. "No runner configured…") — no run-start/run-end SSE
+      // pair will ever arrive to clear this, so surface the error and reset the flag right here.
+      meetingAwaitingGen=false;
+      const d=await r.json().catch(()=>({}));
+      const tip=$('#meetingStatus'); if(tip){ tip.textContent=d.error||t('files.saveError'); tip.className='files-error-tip'; }
+    }
+  }catch(err){ meetingAwaitingGen=false; meetingSetStatus('error'); }
+}
+
 function openDrawer(id,keep){
   // 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.
@@ -1701,8 +2215,9 @@ const cssv=(v)=> getComputedStyle(document.documentElement).getPropertyValue(v).
 // and render()'s SSE-driven re-render (triggered by the snapshot write / polling) re-applies it
 // too instead of ever resetting to Board; this is what keeps a tab selected across a race with a
 // 'change'/'message' event that lands right after a click.
-// initial tab: the URL path wins (deep-link / refresh), else the persisted tab, else board
-let activeTab = tabFromPath() || (()=>{ try{ return normalizeTab(localStorage.getItem('spf-tab'))||'board'; }catch{ return 'board'; } })();
+// initial tab: the URL path wins (deep-link / refresh), else board — the persisted tab (config.json
+// -> activeTab) is reconciled in once P.config is available, see syncSettingsFromServer().
+let activeTab = tabFromPath() || 'board';
 openTaskId = taskFromPath(); // deep-link straight to a task drawer
 function applyActiveTab(){
   $$('#tabs .tab').forEach(t=> t.classList.toggle('is-active', t.dataset.tab===activeTab));
@@ -1747,18 +2262,104 @@ applyActiveTab(); // sync to the resolved tab before the first render
 if(pathSegments()[0]==='settings') history.replaceState(null,'',projectPath('/personalize'));
 // filters (status chips + search) — client-side only, does not write anything
 $$('#statusChips .fchip').forEach(b=> b.addEventListener('click', ()=>{ filter.status=b.dataset.status; renderBoard(); }));
-$('#search').addEventListener('input', e=>{ filter.q=e.target.value; renderBoard(); });
+$('#search').addEventListener('input', e=>{ filter.q=e.target.value; kanbanExpanded.clear(); 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(); }));
+$$('#boardViewToggle .vt-btn').forEach(b=> b.addEventListener('click', ()=>{ boardView=b.dataset.view; saveSetting({boardView}); renderBoard(); }));
+
+// ---- Kanban column visibility + page size (Sous-projet B, Task 2) ----
+// A small anchored popover (same interaction shape as the Workflow step popover: opens on click,
+// closes on outside click/Esc, keyboard-accessible) lets the viewer toggle any status column off
+// except the last one still visible — mirroring the server's own "never persist an empty
+// kanbanColumns" rule (writeConfig() in ops.js) so the UI never lets you attempt what the server
+// would silently refuse anyway.
+let kanbanColsOpen=false;
+function toggleKanbanColsPop(){ kanbanColsOpen?closeKanbanColsPop():openKanbanColsPop(); }
+function openKanbanColsPop(){
+  kanbanColsOpen=true;
+  renderKanbanColsPop();
+  const btn=$('#kanbanColsBtn'); if(btn) btn.setAttribute('aria-expanded','true');
+}
+function closeKanbanColsPop(){
+  kanbanColsOpen=false;
+  const p=$('#kanbanColsPop'); if(p) p.hidden=true;
+  const btn=$('#kanbanColsBtn'); if(btn) btn.setAttribute('aria-expanded','false');
+}
+function renderKanbanColsPop(){
+  const pop=$('#kanbanColsPop'); const btn=$('#kanbanColsBtn'); if(!pop||!btn) return;
+  pop.innerHTML='';
+  Object.keys(STATUS).forEach(st=>{
+    const checked=kanbanColumns.includes(st);
+    const isLastOne=checked&&kanbanColumns.length<=1;
+    const row=document.createElement('label'); row.className='kcp-row'+(isLastOne?' is-locked':'');
+    const cb=document.createElement('input'); cb.type='checkbox'; cb.checked=checked; cb.disabled=isLastOne;
+    cb.addEventListener('change',()=> toggleKanbanColumn(st));
+    row.append(cb, el('span',null,STATUS[st]));
+    pop.append(row);
+  });
+  pop.append(el('div','kcp-note',t('board.kanbanColumnsHint')));
+  positionKanbanColsPop(btn,pop);
+}
+// Real bug found in QA: with no clamping, a popover taller than the room below its anchor simply
+// overflowed off the bottom of the viewport with no way to scroll to it (it's position:fixed, so it
+// never grows the document's own scrollable height). Cap its height to whatever room is actually
+// available (flipping above the button when that has more room, same idea as positionWfPop()) and
+// let it scroll internally past that.
+function positionKanbanColsPop(anchorEl,pop){
+  pop.style.visibility='hidden'; pop.hidden=false; pop.style.maxHeight='';
+  const r=anchorEl.getBoundingClientRect();
+  const vpH=window.innerHeight, m=8, edge=10;
+  const below=vpH-r.bottom-m-edge, above=r.top-m-edge;
+  const useAbove=below<160&&above>below;
+  pop.style.maxHeight=Math.max(120,(useAbove?above:below))+'px';
+  pop.style.overflowY='auto';
+  const pw=pop.offsetWidth||200;
+  const left=Math.max(10,Math.min(r.left,window.innerWidth-pw-10));
+  pop.style.left=left+'px';
+  if(useAbove) pop.style.top=(r.top-m-pop.offsetHeight)+'px';
+  else pop.style.top=(r.bottom+6)+'px';
+  pop.style.visibility='';
+}
+function toggleKanbanColumn(st){
+  let next;
+  if(kanbanColumns.includes(st)){
+    if(kanbanColumns.length<=1) return; // the last visible column can't be disabled — same rule the server enforces
+    next=kanbanColumns.filter(x=>x!==st);
+  } else {
+    next=[...kanbanColumns,st];
+  }
+  kanbanColumns=next;
+  saveSetting({kanbanColumns});
+  renderBoard();
+  if(kanbanColsOpen) renderKanbanColsPop(); // keep the open popover's checkbox/lock state in sync
+}
+const kanbanColsBtn=$('#kanbanColsBtn');
+if(kanbanColsBtn) kanbanColsBtn.addEventListener('click',e=>{ e.stopPropagation(); toggleKanbanColsPop(); });
+document.addEventListener('click',e=>{ if(kanbanColsOpen && !e.target.closest('#kanbanColsPop') && !e.target.closest('#kanbanColsBtn')) closeKanbanColsPop(); });
+document.addEventListener('keydown',e=>{ if(e.key==='Escape' && kanbanColsOpen) closeKanbanColsPop(); });
+window.addEventListener('resize',()=>{ if(kanbanColsOpen) closeKanbanColsPop(); });
+// Kanban page size (10/20) — same view-toggle visual pattern as List/Kanban itself. Changing it
+// resets every column's "show more" reveal state (kanbanExpanded) since the new cap applies fresh.
+$$('#kanbanPageSize .vt-btn').forEach(b=> b.addEventListener('click',()=>{
+  const size=Number(b.dataset.size); if(size!==10&&size!==20) return;
+  kanbanPageSize=size; kanbanExpanded.clear(); saveSetting({kanbanPageSize}); 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');
+  const panel=$('.panel[data-panel="board"]');
   if(panel) panel.classList.toggle('side-hidden', sideHidden);
-  if(btn){ btn.setAttribute('aria-pressed', String(sideHidden)); btn.title=t(sideHidden?'board.showSidebar':'board.hideSidebar'); }
+  // two entry points (topbar + inline on the sidebar itself) drive the same state — keep both in sync
+  for(const btn of $$('#sideToggle, #sideToggleInline')){
+    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(); });
+function toggleSideHidden(){
+  sideHidden=!sideHidden;
+  saveSetting({sideHidden});
+  applySideHidden();
+}
+for(const btn of $$('#sideToggle, #sideToggleInline')) btn.addEventListener('click', toggleSideHidden);
 applySideHidden();
 // expand / collapse all phases (List view) — keeps a big board compact by default
 const phaseToggleAllBtn=$('#phaseToggleAll');
@@ -1813,9 +2414,11 @@ const topAgentSel=$('#topAgent'); if(topAgentSel) topAgentSel.addEventListener('
 const setAgentSel=$('#setAgent'); if(setAgentSel) setAgentSel.addEventListener('change',(e)=>saveAgent(e.target.value));
 // hub-mode pill — only ever shown when this tab is actually served via the multi-project hub
 (function(){ const p=$('#hubPill'); if(p && PROJECT_ID) p.hidden=false; })();
-// theme
-(function(){ const s=localStorage.getItem('spf-theme'); if(s)document.documentElement.setAttribute('data-theme',s);
-  $('#themeToggle').addEventListener('click',()=>{ const c=document.documentElement.getAttribute('data-theme'); const n=c==='dark'?'light':'dark'; document.documentElement.setAttribute('data-theme',n); localStorage.setItem('spf-theme',n); }); })();
+// theme — a real project setting now (config.json -> theme), reconciled onto <html data-theme> once
+// P.config is available (syncSettingsFromServer()); defaults to dark (CSS's own default) until then.
+(function(){
+  $('#themeToggle').addEventListener('click',()=>{ const c=document.documentElement.getAttribute('data-theme'); const n=c==='dark'?'light':'dark'; document.documentElement.setAttribute('data-theme',n); saveSetting({theme:n}); });
+})();
 // chart tooltip — a single floating layer, shown on hover over any [data-tip]
 // element (area-hit rects, future hit targets) and positioned near the cursor.
 (function(){
@@ -1837,10 +2440,14 @@ const setAgentSel=$('#setAgent'); if(setAgentSel) setAgentSel.addEventListener('
   $$('[data-icon]').forEach(node=>{ const svg=ICON[node.dataset.icon]; if(svg) node.innerHTML=svg; });
 })();
 // chat widget
-$('#runQuickBtn').addEventListener('click',()=> setChat(true));
-$('#chatFab').addEventListener('click',()=> setChat($('#chat').getAttribute('aria-hidden')==='true'));
-$('#chatClose').addEventListener('click',()=> setChat(false));
-try{ if(localStorage.getItem('spf-chat')==='1') setChat(true); }catch{}
+// user-driven chat toggles persist (debounced) — see setChat()'s own comment for why the DOM change
+// and the save are split apart.
+function toggleChat(open){ setChat(open); saveSetting({chatOpen:open}); }
+$('#runQuickBtn').addEventListener('click',()=> toggleChat(true));
+$('#chatFab').addEventListener('click',()=> toggleChat($('#chat').getAttribute('aria-hidden')==='true'));
+$('#chatClose').addEventListener('click',()=> toggleChat(false));
+// initial chatOpen state (if saved server-side) is applied by syncSettingsFromServer(), called from
+// load() once P.config is available — nothing to do here at parse time.
 $('#runBtn').addEventListener('click',()=>doRun());
 $('#orchBtn').addEventListener('click',()=>doOrchestrate());
 $('#widgetSummarizeBtn').addEventListener('click',()=>summarizeChat($('#runAgent')));
@@ -1851,7 +2458,20 @@ $('#tabRunBtn').addEventListener('click',()=>doRun($('#tabRunPrompt'),$('#tabRun
 $('#tabOrchBtn').addEventListener('click',()=>doOrchestrate($('#tabRunPrompt')));
 $('#tabSummarizeBtn').addEventListener('click',()=>summarizeChat($('#tabRunAgent')));
 $('#tabClearBtn').addEventListener('click',clearChat);
+// Daily meeting (Sous-projet C, Task 3) — Generate + its inline, non-blocking overwrite confirm.
+$('#meetingGenBtn').addEventListener('click',meetingGenerateClick);
+$('#meetingConfirmBtn').addEventListener('click',()=>{ meetingHideConfirm(); doMeetingGenerate(); });
+$('#meetingCancelBtn').addEventListener('click',meetingHideConfirm);
 $('#tabRunPrompt').addEventListener('keydown',e=>{ if((e.metaKey||e.ctrlKey)&&e.key==='Enter')doRun($('#tabRunPrompt'),$('#tabRunAgent')); });
+// Slash-command autocomplete — wired on both chat textareas (floating widget + Chat tab).
+['#runPrompt','#tabRunPrompt'].forEach((sel)=>{
+  const inp=$(sel); if(!inp) return;
+  inp.addEventListener('input',()=>openCmdMenu(inp));
+  inp.addEventListener('keydown',(e)=>{ if(cmdMenuKey(e)){ e.preventDefault(); e.stopPropagation(); } }, true); // intercept menu navigation keys only while the menu is open
+  inp.addEventListener('blur',()=>setTimeout(hideCmdMenu,120)); // let a menu mousedown win first
+});
+document.addEventListener('click',(e)=>{ const m=cmdMenuEl(); if(m&&!m.hidden&&!m.contains(e.target)&&!/^(runPrompt|tabRunPrompt)$/.test(e.target.id)) hideCmdMenu(); });
+window.addEventListener('resize',()=>{ if(_cmdMenuInput) positionCmdMenu(_cmdMenuInput); });
 $('#drawerClose').addEventListener('click',closeDrawer);
 $('#drawerScrim').addEventListener('click',closeDrawer);
 document.addEventListener('keydown',e=>{ if(e.key==='Escape')closeDrawer(); });