@danieltmn/tamnora 0.24.2 → 0.25.0

package/harness/packages/server/public/chrome.js

@@ -1,855 +1,856 @@
-import {
-  DEFAULTS,
-  FONT_PRESETS,
-  THEMES,
-  applyAppearance,
-  clampChatFont,
-  clampScale,
-  nextTheme,
-  normalizeAppearance,
-  readLocalAppearance,
-} from './appearance.js';
-import { basename, chatInput, scheduleScrollNav, sendMessage } from './chat.js';
-import { $, api, clear, el, state, storage } from './core.js';
+import {
+  DEFAULTS,
+  FONT_PRESETS,
+  THEMES,
+  applyAppearance,
+  clampChatFont,
+  clampScale,
+  nextTheme,
+  normalizeAppearance,
+  readLocalAppearance,
+} from './appearance.js';
+import { basename, chatInput, scheduleScrollNav, sendMessage } from './chat.js';
+import { $, api, clear, el, state, storage } from './core.js';
 import { refreshExplorerMode } from './explorer.js';
-import { pickVisible } from './modelsQuery.js';
-import { activateSession, registerSession } from './sessions.js';
-import {
-  activateAjustesPanel,
-  refreshAsesor,
-  refreshChannels,
-  refreshLimits,
-  refreshMcp,
-  refreshMcpCatalog,
-  refreshMemory,
-  refreshProfile,
-  refreshProviders,
-  refreshSchedules,
-  refreshSkillCatalog,
-  refreshSkills,
-  setStatus,
-} from './settings.js';
-import { refreshRuns } from './system.js';
-import { refreshTranscribe, refreshVoz, setHandsFree } from './voice.js';
-
-export function setCwd(value) {
-  if (!value) return;
-  state.cwd = value;
-  $('#rail-cwd').textContent = value;
-  renderCwdPill();
-  if (state.explorerOpen) refreshExplorerMode();
-}
-
-/* --- tabs ---------------------------------------------------------------- */
-
-export const moreTab = $('#more-tab');
-export const moreMenu = $('#more-menu');
+import { pickVisible } from './modelsQuery.js';
+import { activateSession, registerSession } from './sessions.js';
+import {
+  activateAjustesPanel,
+  refreshAsesor,
+  refreshChannels,
+  refreshLimits,
+  refreshMcp,
+  refreshMcpCatalog,
+  refreshMemory,
+  refreshProfile,
+  refreshProviders,
+  refreshSchedules,
+  refreshSkillCatalog,
+  refreshSkills,
+  setAjustesLevel,
+  setStatus,
+} from './settings.js';
+import { refreshRuns } from './system.js';
+import { refreshTranscribe, refreshVoz, setHandsFree } from './voice.js';
+
+export function setCwd(value) {
+  if (!value) return;
+  state.cwd = value;
+  $('#rail-cwd').textContent = value;
+  renderCwdPill();
+  if (state.explorerOpen) refreshExplorerMode();
+}
+
+/* --- tabs ---------------------------------------------------------------- */
+
+export const moreTab = $('#more-tab');
+export const moreMenu = $('#more-menu');
 export const topbarSection = $('#topbar-section');
-export const backChat = $('#back-chat');
-
-export const TAB_LABELS = { chat: 'chat', providers: 'proveedores', ajustes: 'ajustes', eval: 'eval', runs: 'runs' };
-
-export function hideMoreMenu() {
-  if (moreMenu.hidden) return;
-  const hadFocus = moreMenu.contains(document.activeElement);
-  moreMenu.hidden = true;
-  moreTab.setAttribute('aria-expanded', 'false');
-  if (hadFocus) moreTab.focus();
-}
-
-export function activateTab(name) {
-  document
-    .querySelectorAll('#more-menu button[data-tab]')
-    .forEach((t) => t.classList.toggle('active', t.dataset.tab === name));
-  if (topbarSection) topbarSection.textContent = TAB_LABELS[name] || name;
+export const backChat = $('#back-chat');
+
+export const TAB_LABELS = { chat: 'chat', providers: 'proveedores', ajustes: 'ajustes', eval: 'eval', runs: 'runs' };
+
+export function hideMoreMenu() {
+  if (moreMenu.hidden) return;
+  const hadFocus = moreMenu.contains(document.activeElement);
+  moreMenu.hidden = true;
+  moreTab.setAttribute('aria-expanded', 'false');
+  if (hadFocus) moreTab.focus();
+}
+
+export function activateTab(name) {
+  document
+    .querySelectorAll('#more-menu button[data-tab]')
+    .forEach((t) => t.classList.toggle('active', t.dataset.tab === name));
+  if (topbarSection) topbarSection.textContent = TAB_LABELS[name] || name;
   if (backChat) backChat.hidden = name === 'chat';
-  moreTab.classList.toggle('active', name !== 'chat');
-  document.querySelectorAll('.view').forEach((v) => v.classList.toggle('active', v.id === `view-${name}`));
-  hideMoreMenu();
-  if (name === 'runs') refreshRuns();
-  if (name === 'providers') refreshProviders();
-  if (name === 'ajustes') { refreshMcp(); refreshMcpCatalog(); refreshSkills(); refreshSkillCatalog(); refreshMemory(); refreshSchedules(); refreshChannels(); refreshLimits(); refreshVoz(); refreshAsesor(); refreshTranscribe(); refreshProfile(); }
-}
-
-/* --- settings modal (modo / proveedor / modelo / auto) -------------------- */
-
-export const settingsModal = $('#settings-modal');
-export const agentControls = $('#agent-settings-controls');
-export const agentControlsSlot = $('#agent-controls-slot');
-export const settingsControlsSlot = $('#settings-controls-slot');
-
-/** Los controles modo/proveedor/modelo/auto se comparten entre el tab Agente
- *  y el modal: se mueven de un slot al otro para no duplicar IDs ni estado. */
-export function moveAgentControls(target) {
-  if (agentControls && target) target.appendChild(agentControls);
-}
-
-export function openSettingsModal() {
-  if (!settingsModal) return;
-  moveAgentControls(settingsControlsSlot);
-  syncDefaultCwd();
-  settingsModal.showModal();
-}
-
-export function closeSettingsModal() {
-  moveAgentControls(agentControlsSlot);
-  settingsModal?.close();
-}
-
-// El footer (modo · proveedor · modelo · estado) abre el modal de ajustes.
-export const statusbarEl = $('#statusbar');
-
-/* --- topbar: provider + model + status ----------------------------------- */
-
-export const providerSelect = $('#provider');
-export const modelSelect = $('#model');
-export const modeSelect = $('#mode');
-export const yesInput = $('#yes');
-export const strictInput = $('#strict-scope');
-
-export async function loadModes() {
-  const data = await api('/api/modes').catch(() => ({ modes: [] }));
-  clear(modeSelect);
-  for (const mode of data.modes) {
-    const option = document.createElement('option');
-    option.value = mode.id;
-    option.textContent = mode.label;
-    option.title = mode.description ?? '';
-    modeSelect.appendChild(option);
-  }
-  const settings = await api('/api/settings').catch(() => null);
-  const active = settings?.settings?.mode || 'agent';
-  if ([...modeSelect.options].some((o) => o.value === active)) modeSelect.value = active;
-  if (strictInput) strictInput.checked = settings?.settings?.strictScope === true;
-  defaultCwdCache = settings?.settings?.defaultCwd || '';
-  if (!defaultCwdCache) {
-    // Migración: la carpeta predeterminada vivía en localStorage; la subimos al
-    // server una vez para que Telegram también la vea.
-    const legacy = storage.get('tamnora-default-cwd', '');
-    if (legacy) writeDefaultCwd(legacy);
-  }
-  syncDefaultCwd();
-  if (settings?.settings?.appearance) {
-    appearance = normalizeAppearance(settings.settings.appearance);
-    applyAppearance(appearance, { persist: true });
-    renderAppearanceControls();
-  }
-  updateStatus();
-}
-
-export async function setMode(id, { persist = true } = {}) {
-  if (![...modeSelect.options].some((o) => o.value === id)) return;
-  modeSelect.value = id;
-  if (persist) await persistAgent({ mode: id });
-  // Modo Voz = manos libres (conversación); al salir, se apaga.
-  setHandsFree(id === 'voice');
-  updateStatus();
-}
-
-export async function toggleMode() {
-  const next = modeSelect.value === 'plan' ? 'agent' : 'plan';
-  await setMode(next);
-}
-
-/* --- pills del composer (carpeta, permisos, modelo) ----------------------- */
-
-export const cwdPill = $('#cwd-pill');
-export const cwdPillLabel = $('#cwd-pill-label');
-export const modePill = $('#mode-pill');
-export const modePillLabel = $('#mode-pill-label');
-export const modeMenu = $('#mode-menu');
-export const modelPill = $('#model-pill');
-export const modelPillLabel = $('#model-pill-label');
-
-export function renderCwdPill() {
-  if (!cwdPillLabel) return;
-  cwdPillLabel.textContent = state.cwd ? basename(state.cwd) : 'sin carpeta';
-  if (cwdPill) cwdPill.title = state.cwd || 'sin carpeta de trabajo';
-}
-
-// El pill de permisos resume modo + auto-aprobación en un control estilo Codex:
-// Read Only, Workspace Write, Full access y Voz (notas .md/.json).
-export function renderModePill() {
-  const plan = modeSelect.value === 'plan';
-  const voice = modeSelect.value === 'voice';
-  const full = !plan && !voice && Boolean(yesInput?.checked);
-  if (modePillLabel) {
-    modePillLabel.textContent = voice ? 'Voz' : plan ? 'Read Only' : full ? 'Full access' : 'Workspace Write';
-  }
-  if (!modeMenu) return;
-  for (const item of modeMenu.querySelectorAll('.ctrl-menu-item')) {
-    const kind = item.dataset.kind;
-    const active =
-      kind === 'read'
-        ? plan
-        : kind === 'voice'
-          ? voice
-          : kind === 'full'
-            ? full
-            : !plan && !voice && !full;
-    item.classList.toggle('active', active);
-    item.setAttribute('aria-checked', active ? 'true' : 'false');
-  }
-}
-
-export function renderModelPill() {
-  if (!modelPillLabel) return;
-  const record = state.panes.get(state.sessionId);
-  const provider = record?.provider || state.active.provider;
-  const model = record?.model || state.active.model;
-  modelPillLabel.textContent = model || 'elegí un modelo';
-  if (modelPill) modelPill.title = `${provider || '—'} / ${model || '—'}`;
-}
-
-export function closeModeMenu() {
-  if (!modeMenu || modeMenu.hidden) return;
-  modeMenu.hidden = true;
-  modePill?.setAttribute('aria-expanded', 'false');
-}
-
-export function updateStatus(extra = {}) {
-  renderModePill();
-  renderModelPill();
-  if (extra.rounds !== undefined) $('#sb-rounds').textContent = `${extra.rounds} rondas`;
-  if (extra.stopReason) $('#sb-rounds').textContent = extra.stopReason;
-  if (extra.running) $('#sb-rounds').textContent = 'pensando…';
-}
-
-/* --- apariencia (tema, tipografía, tamaño) -------------------------------- */
-
-export let appearance = normalizeAppearance(readLocalAppearance());
-export const themeToggle = $('#theme-toggle');
-export const themeGrid = $('#apariencia-themes');
-export const fontSelect = $('#apariencia-font');
-export const chatFontRange = $('#apariencia-chat-font');
-export const chatFontOut = $('#apariencia-chat-font-out');
-export const scaleRange = $('#apariencia-scale');
-export const scaleOut = $('#apariencia-scale-out');
-
-export function renderAppearanceControls() {
-  if (themeGrid) {
-    themeGrid
-      .querySelectorAll('.theme-swatch')
-      .forEach((btn) => btn.classList.toggle('active', btn.dataset.themePick === appearance.theme));
-  }
-  if (fontSelect) fontSelect.value = appearance.font;
-  if (chatFontRange) chatFontRange.value = appearance.chatFont;
-  if (chatFontOut) chatFontOut.textContent = `${appearance.chatFont}px`;
-  if (scaleRange) scaleRange.value = Math.round(appearance.scale * 100);
-  if (scaleOut) scaleOut.textContent = `${Math.round(appearance.scale * 100)}%`;
-  if (themeToggle) {
-    const label = THEMES.find((t) => t.id === appearance.theme)?.label ?? appearance.theme;
-    themeToggle.title = `tema: ${label}`;
-  }
-}
-
-export function persistAppearance() {
-  applyAppearance(appearance, { persist: true });
-  renderAppearanceControls();
-  api('/api/settings', { method: 'PUT', body: { appearance } }).catch(() => null);
-}
-
-export function buildAppearanceControls() {
-  if (themeGrid) {
-    themeGrid.replaceChildren();
-    for (const theme of THEMES) {
-      const swatch = document.createElement('button');
-      swatch.type = 'button';
-      swatch.className = 'theme-swatch';
-      swatch.dataset.themePick = theme.id;
-      swatch.title = theme.label;
-      swatch.setAttribute('aria-label', `tema ${theme.label}`);
-      const dot = document.createElement('span');
-      dot.className = 'theme-swatch-dot';
-      dot.style.background = theme.metaColor;
-      const label = document.createElement('span');
-      label.className = 'theme-swatch-label';
-      label.textContent = theme.label;
-      swatch.append(dot, label);
-      swatch.addEventListener('click', () => {
-        appearance.theme = theme.id;
-        persistAppearance();
-      });
-      themeGrid.appendChild(swatch);
-    }
-  }
-  if (fontSelect) {
-    fontSelect.replaceChildren();
-    for (const font of FONT_PRESETS) {
-      const option = document.createElement('option');
-      option.value = font.id;
-      option.textContent = font.label;
-      fontSelect.appendChild(option);
-    }
-    fontSelect.addEventListener('change', () => {
-      appearance.font = fontSelect.value;
-      persistAppearance();
-    });
-  }
-  chatFontRange?.addEventListener('input', () => {
-    appearance.chatFont = clampChatFont(Number(chatFontRange.value));
-    applyAppearance(appearance, { persist: false });
-    if (chatFontOut) chatFontOut.textContent = `${appearance.chatFont}px`;
-  });
-  chatFontRange?.addEventListener('change', persistAppearance);
-  scaleRange?.addEventListener('input', () => {
-    appearance.scale = clampScale(Number(scaleRange.value) / 100);
-    applyAppearance(appearance, { persist: false });
-    if (scaleOut) scaleOut.textContent = `${Math.round(appearance.scale * 100)}%`;
-  });
-  scaleRange?.addEventListener('change', persistAppearance);
-  $('#apariencia-reset')?.addEventListener('click', () => {
-    appearance = normalizeAppearance(DEFAULTS);
-    persistAppearance();
-    setStatus('#apariencia-msg', 'restablecido', 'ok');
-  });
-  renderAppearanceControls();
-}
-
-export function cycleTheme() {
-  appearance.theme = nextTheme(appearance.theme);
-  persistAppearance();
-}
-
-export function openAppearance() {
-  activateTab('ajustes');
-  activateAjustesPanel('apariencia');
-}
-
-appearance = applyAppearance(appearance, { persist: false });
-
-export const logout = $('#logout');
-
-/* --- layout: resizable + collapsible panels ------------------------------- */
-
-export const panels = {
-  sidebar: { el: $('#sidebar'), resizer: $('#resizer-sidebar'), min: 180, max: 460, width: 260, side: 'left' },
-  explorer: { el: $('#explorer'), resizer: $('#resizer-explorer'), min: 200, max: 560, width: 300, side: 'right' },
-};
-export const sidebarBackdrop = $('#sidebar-backdrop');
-export const mobileQuery = window.matchMedia('(max-width: 820px)');
-
-export function isMobile() {
-  return mobileQuery.matches;
-}
-
-export function readSidebarPref() {
-  return storage.get('tamnora-sidebar-open', '0') !== '0';
-}
-
-export function persistLayout() {
-  storage.setJson('tamnora-panel-widths', {
-    sidebar: panels.sidebar.width,
-    explorer: panels.explorer.width,
-  });
-  scheduleScrollNav();
-}
-
-export function applyPanelWidths() {
-  panels.sidebar.el.style.width = `${panels.sidebar.width}px`;
-  panels.explorer.el.style.width = `${panels.explorer.width}px`;
-  scheduleScrollNav();
-}
-
-export function attachResizer(panel) {
-  panel.resizer.addEventListener('pointerdown', (event) => {
-    if (panel.resizer.hidden) return;
-    event.preventDefault();
-    const startX = event.clientX;
-    const startWidth = panel.width;
-    panel.resizer.classList.add('dragging');
-    document.body.classList.add('resizing');
-    panel.resizer.setPointerCapture(event.pointerId);
-    const move = (moveEvent) => {
-      const delta = panel.side === 'left' ? moveEvent.clientX - startX : startX - moveEvent.clientX;
-      panel.width = Math.min(panel.max, Math.max(panel.min, startWidth + delta));
-      panel.el.style.width = `${panel.width}px`;
-    };
-    const up = () => {
-      panel.resizer.classList.remove('dragging');
-      document.body.classList.remove('resizing');
-      panel.resizer.removeEventListener('pointermove', move);
-      panel.resizer.removeEventListener('pointerup', up);
-      persistLayout();
-    };
-    panel.resizer.addEventListener('pointermove', move);
-    panel.resizer.addEventListener('pointerup', up);
-  });
-}
-
-export function setSidebarOpen(open) {
-  state.sidebarOpen = open;
-  if (isMobile()) {
-    // Drawer: siempre en el DOM; la visibilidad la maneja la clase + backdrop.
-    panels.sidebar.el.hidden = false;
-    panels.sidebar.el.classList.toggle('open', open);
-    panels.sidebar.resizer.hidden = true;
-    if (sidebarBackdrop) sidebarBackdrop.hidden = !open;
-  } else {
-    panels.sidebar.el.classList.remove('open');
-    panels.sidebar.el.hidden = !open;
-    panels.sidebar.resizer.hidden = !open;
-    if (sidebarBackdrop) sidebarBackdrop.hidden = true;
-  }
-  const handle = $('#sidebar-handle');
-  if (handle) {
-    handle.hidden = open;
-    handle.setAttribute('aria-pressed', String(open));
-  }
-  if (!isMobile()) {
-    storage.set('tamnora-sidebar-open', open ? '1' : '0');
-  }
-}
-
-export function initLayout() {
-  const widths = storage.getJson('tamnora-panel-widths', {}) || {};
-  if (Number(widths.sidebar)) panels.sidebar.width = Math.min(panels.sidebar.max, Math.max(panels.sidebar.min, widths.sidebar));
-  if (Number(widths.explorer)) panels.explorer.width = Math.min(panels.explorer.max, Math.max(panels.explorer.min, widths.explorer));
-  // En movil el panel arranca cerrado (drawer); en desktop, la preferencia guardada.
-  applyPanelWidths();
-  attachResizer(panels.sidebar);
-  attachResizer(panels.explorer);
-  setSidebarOpen(isMobile() ? false : readSidebarPref());
-  $('#sidebar-collapse')?.addEventListener('click', () => setSidebarOpen(false));
-  $('#sidebar-handle')?.addEventListener('click', () => setSidebarOpen(true));
-  if (sidebarBackdrop) sidebarBackdrop.addEventListener('click', () => setSidebarOpen(false));
-  mobileQuery.addEventListener('change', () => setSidebarOpen(isMobile() ? false : readSidebarPref()));
-}
-
-export function formatK(n) {
-  const value = Number(n) || 0;
-  if (value >= 1000000) return `${(value / 1000000).toFixed(1)}M`;
-  if (value >= 1000) return `${(value / 1000).toFixed(1)}k`;
-  return String(value);
-}
-
-export function renderTokens() {
-  const wrap = $('#sb-context');
-  const node = $('#sb-tokens');
-  const fill = $('#sb-context-fill');
-  const record = state.panes.get(state.sessionId);
-  const tokens = record?.tokens ?? { in: 0, out: 0 };
-  const lastTurn = record?.lastTurn ?? { prompt: 0, completion: 0 };
-  const total = tokens.in + tokens.out;
-  const context = Number(modelSelect.selectedOptions[0]?.dataset.context) || 0;
-  // El contexto es la ultima ronda (prompt+completion), no el acumulado del run.
-  const used = lastTurn.prompt + lastTurn.completion;
-  const hasContext = context > 0 && used > 0;
-  const pct = hasContext ? Math.min(100, Math.round((used / context) * 100)) : 0;
-  const tone = pct >= 75 ? 'ctx-danger' : pct >= 50 ? 'ctx-warn' : pct >= 25 ? 'ctx-mid' : 'ctx-ok';
-
-  if (!total && !used) {
-    if (wrap) wrap.className = 'ctx muted';
-    node.textContent = 'tokens —';
-    node.title = '';
-    if (fill) fill.style.width = '0%';
-    return;
-  }
-  const parts =
-    `entrada ${formatK(tokens.in)} · salida ${formatK(tokens.out)}` +
-    (hasContext ? ` · contexto ${formatK(used)}/${formatK(context)}` : '');
-  if (hasContext) {
-    node.textContent = `contexto ${pct}% · ${formatK(used)}/${formatK(context)}`;
-    if (wrap) wrap.className = `ctx ${tone}`;
-  } else if (context) {
-    node.textContent = `contexto — · ${formatK(context)}`;
-    if (wrap) wrap.className = 'ctx muted';
-  } else {
-    node.textContent = `tokens ${formatK(total)}`;
-    if (wrap) wrap.className = 'ctx muted';
-  }
-  node.title = parts;
-  if (fill) fill.style.width = `${hasContext ? pct : 0}%`;
-}
-
-export function setContextUsage(tokens) {
-  const record = state.panes.get(state.sessionId);
-  if (record && tokens) {
-    record.lastTurn = {
-      prompt: tokens.last_prompt_tokens ?? 0,
-      completion: tokens.last_completion_tokens ?? 0,
-    };
-    renderTokens();
-  }
-}
-
-export function addTokens(tokens) {
-  const record = state.panes.get(state.sessionId);
-  if (record && tokens) {
-    record.tokens.in += tokens.prompt_tokens ?? 0;
-    record.tokens.out += tokens.completion_tokens ?? 0;
-    record.lastTurn = {
-      prompt: tokens.last_prompt_tokens ?? 0,
-      completion: tokens.last_completion_tokens ?? 0,
-    };
-  }
-  renderTokens();
-}
-
-export async function saveSettings(patch) {
-  const out = await api('/api/settings', { method: 'PUT', body: patch }).catch(() => null);
-  if (out?.settings) {
-    state.active.provider = out.settings.provider;
-    state.active.model = out.settings.model;
-  }
-  if (patch.provider) providerSelect.value = patch.provider;
-  updateStatus();
-}
-
-/**
- * Persiste el tipo de agente elegido. Con una sesion abierta, ese tipo es de la
- * sesion (asi dos pestañas pueden correr con proveedor/modelo/modo distintos);
- * ademas se actualiza el default global para que las sesiones nuevas hereden.
- */
-export async function persistAgent(patch) {
-  const record = state.panes.get(state.sessionId);
-  if (record) {
-    if (patch.provider) record.provider = patch.provider;
-    if (patch.model) record.model = patch.model;
-    if (patch.mode) record.mode = patch.mode;
-    api(`/api/sessions/${record.id}`, { method: 'PUT', body: patch }).catch(() => null);
-  }
-  await saveSettings(patch);
-}
-
-/** Aplica a los controles compartidos el tipo de agente guardado en una sesion. */
-export async function applySessionAgent(record) {
-  if (!record) return;
-  const id = record.id;
-  const provider = record.provider || state.active.provider;
-  if (provider && [...providerSelect.options].some((o) => o.value === provider)) {
-    providerSelect.value = provider;
-  }
-  await loadModels({ prefer: record.model || null });
-  if (state.sessionId !== id) return;
-  const model = record.model || state.active.model;
-  if (model && [...modelSelect.options].some((o) => o.value === model)) modelSelect.value = model;
-  const mode = record.mode || modeSelect.value || 'agent';
-  if ([...modeSelect.options].some((o) => o.value === mode)) modeSelect.value = mode;
-  // No auto-encendemos manos libres al abrir (evita pedir el micro al recargar);
-  // si la sesión no es de voz, sí apagamos.
-  if (mode !== 'voice') setHandsFree(false);
-  updateStatus();
-  renderModePill();
-  renderModelPill();
-}
-
-/** Firma de la lista dibujada: si no cambia, no hay que repintar el select. */
-function modelsSignature(shown) {
-  return shown.map((m) => `${m.id}\u0000${m.label ?? ''}\u0000${m.vision ? 1 : 0}\u0000${m.context ?? ''}`).join('\u0001');
-}
-
-/**
- * Carga el catalogo del proveedor y dibuja el select.
- *
- * `force` vuelve a pedirlo al server; sin el se reusa el de `state` (son ~374
- * modelos / 591 KB, y esto corre en cada cambio de pestana: refetchearlo hacia
- * parpadear la consola).
- */
-export async function loadModels({ save = false, prefer = null, force = false } = {}) {
-  const provider = providerSelect.value;
-  const cached = !force && state.modelCatalogProvider === provider && state.modelCatalog?.length;
-  modelSelect.disabled = true;
-  try {
-    if (!cached) {
-      const data = await api(`/api/models?provider=${encodeURIComponent(provider)}`).catch((error) => ({
-        models: [],
-        error: error.message,
-      }));
-      state.modelCatalog = data?.models ?? [];
-      state.visibleModels = data?.visibleModels ?? [];
-      state.modelCatalogProvider = provider;
-      if (!state.modelCatalog.length) {
-        clear(modelSelect);
-        const option = document.createElement('option');
-        option.value = '';
-        option.textContent = data?.error ? `sin modelos - ${data.error}` : 'sin modelos (configura el proveedor)';
-        modelSelect.appendChild(option);
-        return;
-      }
-    }
-
-    const catalog = state.modelCatalog;
-    const models = pickVisible(catalog, state.visibleModels);
-    const activeModel = prefer || state.active.model;
-    // Si el modelo activo quedo fuera de la seleccion, lo mostramos igual para no
-    // cambiarlo en silencio: sigue siendo el usado aunque no este tildado.
-    const hidden = activeModel && catalog.some((m) => m.id === activeModel) && !models.some((m) => m.id === activeModel);
-    const shown = hidden ? [catalog.find((m) => m.id === activeModel), ...models] : models;
-    if (!shown.length) {
-      clear(modelSelect);
-      const option = document.createElement('option');
-      option.value = '';
-      option.textContent = 'sin modelos (configura el proveedor)';
-      modelSelect.appendChild(option);
-      return;
-    }
-
-    // Repintar el select con cientos de opciones es lo que se ve como parpadeo:
-    // solo se hace cuando la lista realmente cambio.
-    const signature = modelsSignature(shown);
-    if (signature !== state.modelSignature) {
-      state.modelSignature = signature;
-      clear(modelSelect);
-      for (const model of shown) {
-        const option = document.createElement('option');
-        option.value = model.id;
-        option.textContent = model.label && model.label !== model.id ? model.label : model.id;
-        if (model.vision) option.textContent += ' - vision';
-        if (model.context) option.dataset.context = String(model.context);
-        modelSelect.appendChild(option);
-      }
-    }
-
-    const wanted = prefer || state.active.model;
-    if (wanted && shown.some((m) => m.id === wanted)) {
-      modelSelect.value = wanted;
-    } else {
-      modelSelect.value = models[0].id;
-      if (save) await saveSettings({ model: modelSelect.value });
-    }
-  } finally {
-    modelSelect.disabled = false;
-  }
-}
-
-/* --- folder picker -------------------------------------------------------- */
-
-export const folderModal = $('#folder-modal');
-export const folderList = $('#folder-list');
-export const folderCrumbs = $('#folder-crumbs');
-export const folderStatusEl = $('#folder-status');
-export const folderGoto = $('#folder-goto');
-export const folderCreate = $('#folder-create');
-export const folderNewName = $('#folder-new-name');
-export const folderUseBtn = $('#folder-use');
-export let folderListPath = null;
-export let folderParent = null;
-export let folderDirs = [];
-
-export let folderPickerMode = 'session';
-// La carpeta predeterminada vive en el server (la usan la consola y Telegram),
-// no en localStorage; acá se cachea para poder leerla sin await.
-export let defaultCwdCache = '';
-
-export function readDefaultCwd() {
-  return defaultCwdCache || '';
-}
-
-export function writeDefaultCwd(value) {
-  defaultCwdCache = value || '';
-  api('/api/settings', { method: 'PUT', body: { defaultCwd: defaultCwdCache } }).catch(() => {});
-}
-
-export function syncDefaultCwd() {
-  const input = $('#default-cwd');
-  if (input) input.value = readDefaultCwd();
-}
-
-export const FOLDER_PATH = 'M3.5 6.3A1.3 1.3 0 0 1 4.8 5h3.1l1.5 1.7h7.8a1.3 1.3 0 0 1 1.3 1.3v7.7a1.3 1.3 0 0 1-1.3 1.3H4.8a1.3 1.3 0 0 1-1.3-1.3z';
-
-export function folderIcon() {
-  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-  svg.setAttribute('viewBox', '0 0 22 22');
-  svg.setAttribute('class', 'folder-ico');
-  const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-  path.setAttribute('d', FOLDER_PATH);
-  path.setAttribute('fill', 'none');
-  path.setAttribute('stroke', 'currentColor');
-  path.setAttribute('stroke-width', '1.4');
-  path.setAttribute('stroke-linejoin', 'round');
-  svg.appendChild(path);
-  return svg;
-}
-
-export function setSummaryText(node, text, cls = '') {
-  node.className = `summary ${cls}`.trim();
-  node.textContent = text;
-}
-
-/** Variante para una linea de estado propia (explorer/preview/git). */
-export function setStatusText(node, text, isError = false) {
-  node.textContent = text;
-  node.classList.toggle('err', isError);
-}
-
-export function setFolderStatus(text, cls = '') {
-  setSummaryText(folderStatusEl, text, cls);
-}
-
-export function closeFolderPicker() {
-  if (folderModal.open) folderModal.close();
-}
-
-export function openFolderPicker(mode = 'session') {
-  folderPickerMode = mode === 'default' ? 'default' : 'session';
-  folderGoto.value = '';
-  setFolderStatus('');
-  folderModal.showModal();
-  const def = readDefaultCwd();
-  if (!def) return loadFolders(state.home || '');
-  api(`/api/folders?path=${encodeURIComponent(def)}`)
-    .then(() => loadFolders(def))
-    .catch(() => {
-      writeDefaultCwd('');
-      syncDefaultCwd();
-      loadFolders(state.home || '');
-    });
-}
-
-export function renderCrumbs(pathStr) {
-  clear(folderCrumbs);
-  if (!pathStr) {
-    folderCrumbs.appendChild(el('span', 'crumb current', 'unidades'));
-    return;
-  }
-  const win = pathStr.includes('\\');
-  const parts = pathStr.split(/[\\/]+/).filter(Boolean);
-  const segments = parts.map((part, index) =>
-    win
-      ? { label: part, path: index === 0 ? `${part}\\` : parts.slice(0, index + 1).join('\\') }
-      : { label: part, path: `/${parts.slice(0, index + 1).join('/')}` }
-  );
-  segments.forEach((segment, index) => {
-    if (index) folderCrumbs.appendChild(el('span', 'crumb-sep', '/'));
-    const last = index === segments.length - 1;
-    const node = el('span', `crumb${last ? ' current' : ''}`, segment.label);
-    if (!last) node.addEventListener('click', () => loadFolders(segment.path));
-    folderCrumbs.appendChild(node);
-  });
-}
-
-export function renderFolderList(dirs) {
-  clear(folderList);
-  if (!dirs.length) {
-    folderList.appendChild(
-      el('li', 'folders-empty', folderListPath ? 'sin subcarpetas (podés usar esta carpeta igual)' : 'sin unidades')
-    );
-    return;
-  }
-  for (const dir of dirs) {
-    const li = el('li', 'folder-item');
-    li.title = dir.path;
-    li.tabIndex = 0;
-    li.append(folderIcon(), el('span', 'folder-name', dir.name), el('span', 'folder-enter', '↵'));
-    const enter = () => loadFolders(dir.path);
-    li.addEventListener('click', enter);
-    li.addEventListener('keydown', (event) => {
-      if (event.key === 'Enter' || event.key === ' ') {
-        event.preventDefault();
-        enter();
-      }
-    });
-    folderList.appendChild(li);
-  }
-}
-
-export async function loadFolders(target = '') {
-  folderGoto.value = '';
-  closeCreateFolder();
-  setFolderStatus('cargando…');
-  const data = await api(`/api/folders?path=${encodeURIComponent(target)}`).catch((error) => {
-    setFolderStatus(error.message, 'err');
-    return null;
-  });
-  if (!data) return;
-  folderListPath = data.path;
-  folderParent = data.parent;
-  folderDirs = [...data.dirs].sort((a, b) => a.name.localeCompare(b.name, undefined, { sensitivity: 'base' }));
-  renderCrumbs(data.path);
-  $('#folder-up').disabled = !data.path;
-  $('#folder-new').disabled = !data.path;
-  folderUseBtn.disabled = !data.path;
-  if (folderPickerMode === 'default') {
-    folderUseBtn.textContent = data.path ? `predeterminada: «${basename(data.path)}»` : 'usar como predeterminada';
-  } else {
-    folderUseBtn.textContent = data.path ? `usar «${basename(data.path)}»` : 'usar esta carpeta';
-  }
-  renderFolderList(folderDirs);
-  const count = data.path ? `${folderDirs.length} subcarpetas` : `${folderDirs.length} unidades`;
-  setFolderStatus(data.path ? `${count} · clic para entrar` : 'elegí una unidad');
-}
-
-export async function createSessionIn(cwd, { title = 'Nueva sesión' } = {}) {
-  const current = state.panes.get(state.sessionId);
-  const created = await api('/api/sessions', {
-    method: 'POST',
-    body: {
-      title,
-      cwd,
-      provider: current?.provider || providerSelect.value || undefined,
-      model: current?.model || modelSelect.value || undefined,
-      mode: current?.mode || modeSelect.value || undefined,
-    },
-  }).catch((error) => ({
-    error: error.message,
-  }));
-  if (created?.error) return created;
-  registerSession(created.session, []);
-  activateSession(created.session.id);
-  const pending = state.pendingInput;
-  if (pending !== null && pending !== undefined) {
-    state.pendingInput = null;
-    chatInput.value = pending;
-    sendMessage();
-  }
-  return created;
-}
-
-export async function useFolder() {
-  const cwd = folderListPath;
-  if (!cwd) return setFolderStatus('Entrá a una carpeta primero (clic para navegar).', 'err');
-  if (folderPickerMode === 'default') {
-    writeDefaultCwd(cwd);
-    syncDefaultCwd();
-    closeFolderPicker();
-    return;
-  }
-  const created = await createSessionIn(cwd);
-  if (created?.error) return setFolderStatus(created.error, 'err');
-  closeFolderPicker();
-}
-
-export function filterFolders() {
-  const query = folderGoto.value.trim().toLowerCase();
-  if (!query) return renderFolderList(folderDirs);
-  renderFolderList(folderDirs.filter((dir) => dir.name.toLowerCase().includes(query)));
-}
-
-export function gotoFolder() {
-  const value = folderGoto.value.trim();
-  if (!value) return;
-  if (/[\\/]/.test(value) || /^[a-z]:$/i.test(value)) return loadFolders(value);
-  const matches = folderDirs.filter((dir) => dir.name.toLowerCase().includes(value.toLowerCase()));
-  if (matches.length === 1) loadFolders(matches[0].path);
-  else if (!matches.length) setFolderStatus('sin coincidencias', 'err');
-  else setFolderStatus(`${matches.length} coincidencias`, '');
-}
-
-export function openCreateFolder() {
-  if (!folderListPath) return;
-  folderCreate.hidden = false;
-  folderNewName.value = '';
-  folderNewName.focus();
-}
-
-export function closeCreateFolder() {
-  folderCreate.hidden = true;
-  folderNewName.value = '';
-}
-
-export async function createFolder() {
-  const name = folderNewName.value.trim();
-  if (!name || !folderListPath) return;
-  const created = await api('/api/folders', {
-    method: 'POST',
-    body: { parent: folderListPath, name },
-  }).catch((error) => {
-    setFolderStatus(error.message, 'err');
-    return null;
-  });
-  if (!created) return;
-  await loadFolders(created.path);
-  setFolderStatus(`carpeta «${name}» creada · usala para el nuevo proyecto`, 'ok');
-}
-
+  moreTab.classList.toggle('active', name !== 'chat');
+  document.querySelectorAll('.view').forEach((v) => v.classList.toggle('active', v.id === `view-${name}`));
+  hideMoreMenu();
+  if (name === 'runs') refreshRuns();
+  if (name === 'providers') refreshProviders();
+  if (name === 'ajustes') { setAjustesLevel('list'); refreshMcp(); refreshMcpCatalog(); refreshSkills(); refreshSkillCatalog(); refreshMemory(); refreshSchedules(); refreshChannels(); refreshLimits(); refreshVoz(); refreshAsesor(); refreshTranscribe(); refreshProfile(); }
+}
+
+/* --- settings modal (modo / proveedor / modelo / auto) -------------------- */
+
+export const settingsModal = $('#settings-modal');
+export const agentControls = $('#agent-settings-controls');
+export const agentControlsSlot = $('#agent-controls-slot');
+export const settingsControlsSlot = $('#settings-controls-slot');
+
+/** Los controles modo/proveedor/modelo/auto se comparten entre el tab Agente
+ *  y el modal: se mueven de un slot al otro para no duplicar IDs ni estado. */
+export function moveAgentControls(target) {
+  if (agentControls && target) target.appendChild(agentControls);
+}
+
+export function openSettingsModal() {
+  if (!settingsModal) return;
+  moveAgentControls(settingsControlsSlot);
+  syncDefaultCwd();
+  settingsModal.showModal();
+}
+
+export function closeSettingsModal() {
+  moveAgentControls(agentControlsSlot);
+  settingsModal?.close();
+}
+
+// El footer (modo · proveedor · modelo · estado) abre el modal de ajustes.
+export const statusbarEl = $('#statusbar');
+
+/* --- topbar: provider + model + status ----------------------------------- */
+
+export const providerSelect = $('#provider');
+export const modelSelect = $('#model');
+export const modeSelect = $('#mode');
+export const yesInput = $('#yes');
+export const strictInput = $('#strict-scope');
+
+export async function loadModes() {
+  const data = await api('/api/modes').catch(() => ({ modes: [] }));
+  clear(modeSelect);
+  for (const mode of data.modes) {
+    const option = document.createElement('option');
+    option.value = mode.id;
+    option.textContent = mode.label;
+    option.title = mode.description ?? '';
+    modeSelect.appendChild(option);
+  }
+  const settings = await api('/api/settings').catch(() => null);
+  const active = settings?.settings?.mode || 'agent';
+  if ([...modeSelect.options].some((o) => o.value === active)) modeSelect.value = active;
+  if (strictInput) strictInput.checked = settings?.settings?.strictScope === true;
+  defaultCwdCache = settings?.settings?.defaultCwd || '';
+  if (!defaultCwdCache) {
+    // Migración: la carpeta predeterminada vivía en localStorage; la subimos al
+    // server una vez para que Telegram también la vea.
+    const legacy = storage.get('tamnora-default-cwd', '');
+    if (legacy) writeDefaultCwd(legacy);
+  }
+  syncDefaultCwd();
+  if (settings?.settings?.appearance) {
+    appearance = normalizeAppearance(settings.settings.appearance);
+    applyAppearance(appearance, { persist: true });
+    renderAppearanceControls();
+  }
+  updateStatus();
+}
+
+export async function setMode(id, { persist = true } = {}) {
+  if (![...modeSelect.options].some((o) => o.value === id)) return;
+  modeSelect.value = id;
+  if (persist) await persistAgent({ mode: id });
+  // Modo Voz = manos libres (conversación); al salir, se apaga.
+  setHandsFree(id === 'voice');
+  updateStatus();
+}
+
+export async function toggleMode() {
+  const next = modeSelect.value === 'plan' ? 'agent' : 'plan';
+  await setMode(next);
+}
+
+/* --- pills del composer (carpeta, permisos, modelo) ----------------------- */
+
+export const cwdPill = $('#cwd-pill');
+export const cwdPillLabel = $('#cwd-pill-label');
+export const modePill = $('#mode-pill');
+export const modePillLabel = $('#mode-pill-label');
+export const modeMenu = $('#mode-menu');
+export const modelPill = $('#model-pill');
+export const modelPillLabel = $('#model-pill-label');
+
+export function renderCwdPill() {
+  if (!cwdPillLabel) return;
+  cwdPillLabel.textContent = state.cwd ? basename(state.cwd) : 'sin carpeta';
+  if (cwdPill) cwdPill.title = state.cwd || 'sin carpeta de trabajo';
+}
+
+// El pill de permisos resume modo + auto-aprobación en un control estilo Codex:
+// Read Only, Workspace Write, Full access y Voz (notas .md/.json).
+export function renderModePill() {
+  const plan = modeSelect.value === 'plan';
+  const voice = modeSelect.value === 'voice';
+  const full = !plan && !voice && Boolean(yesInput?.checked);
+  if (modePillLabel) {
+    modePillLabel.textContent = voice ? 'Voz' : plan ? 'Read Only' : full ? 'Full access' : 'Workspace Write';
+  }
+  if (!modeMenu) return;
+  for (const item of modeMenu.querySelectorAll('.ctrl-menu-item')) {
+    const kind = item.dataset.kind;
+    const active =
+      kind === 'read'
+        ? plan
+        : kind === 'voice'
+          ? voice
+          : kind === 'full'
+            ? full
+            : !plan && !voice && !full;
+    item.classList.toggle('active', active);
+    item.setAttribute('aria-checked', active ? 'true' : 'false');
+  }
+}
+
+export function renderModelPill() {
+  if (!modelPillLabel) return;
+  const record = state.panes.get(state.sessionId);
+  const provider = record?.provider || state.active.provider;
+  const model = record?.model || state.active.model;
+  modelPillLabel.textContent = model || 'elegí un modelo';
+  if (modelPill) modelPill.title = `${provider || '—'} / ${model || '—'}`;
+}
+
+export function closeModeMenu() {
+  if (!modeMenu || modeMenu.hidden) return;
+  modeMenu.hidden = true;
+  modePill?.setAttribute('aria-expanded', 'false');
+}
+
+export function updateStatus(extra = {}) {
+  renderModePill();
+  renderModelPill();
+  if (extra.rounds !== undefined) $('#sb-rounds').textContent = `${extra.rounds} rondas`;
+  if (extra.stopReason) $('#sb-rounds').textContent = extra.stopReason;
+  if (extra.running) $('#sb-rounds').textContent = 'pensando…';
+}
+
+/* --- apariencia (tema, tipografía, tamaño) -------------------------------- */
+
+export let appearance = normalizeAppearance(readLocalAppearance());
+export const themeToggle = $('#theme-toggle');
+export const themeGrid = $('#apariencia-themes');
+export const fontSelect = $('#apariencia-font');
+export const chatFontRange = $('#apariencia-chat-font');
+export const chatFontOut = $('#apariencia-chat-font-out');
+export const scaleRange = $('#apariencia-scale');
+export const scaleOut = $('#apariencia-scale-out');
+
+export function renderAppearanceControls() {
+  if (themeGrid) {
+    themeGrid
+      .querySelectorAll('.theme-swatch')
+      .forEach((btn) => btn.classList.toggle('active', btn.dataset.themePick === appearance.theme));
+  }
+  if (fontSelect) fontSelect.value = appearance.font;
+  if (chatFontRange) chatFontRange.value = appearance.chatFont;
+  if (chatFontOut) chatFontOut.textContent = `${appearance.chatFont}px`;
+  if (scaleRange) scaleRange.value = Math.round(appearance.scale * 100);
+  if (scaleOut) scaleOut.textContent = `${Math.round(appearance.scale * 100)}%`;
+  if (themeToggle) {
+    const label = THEMES.find((t) => t.id === appearance.theme)?.label ?? appearance.theme;
+    themeToggle.title = `tema: ${label}`;
+  }
+}
+
+export function persistAppearance() {
+  applyAppearance(appearance, { persist: true });
+  renderAppearanceControls();
+  api('/api/settings', { method: 'PUT', body: { appearance } }).catch(() => null);
+}
+
+export function buildAppearanceControls() {
+  if (themeGrid) {
+    themeGrid.replaceChildren();
+    for (const theme of THEMES) {
+      const swatch = document.createElement('button');
+      swatch.type = 'button';
+      swatch.className = 'theme-swatch';
+      swatch.dataset.themePick = theme.id;
+      swatch.title = theme.label;
+      swatch.setAttribute('aria-label', `tema ${theme.label}`);
+      const dot = document.createElement('span');
+      dot.className = 'theme-swatch-dot';
+      dot.style.background = theme.metaColor;
+      const label = document.createElement('span');
+      label.className = 'theme-swatch-label';
+      label.textContent = theme.label;
+      swatch.append(dot, label);
+      swatch.addEventListener('click', () => {
+        appearance.theme = theme.id;
+        persistAppearance();
+      });
+      themeGrid.appendChild(swatch);
+    }
+  }
+  if (fontSelect) {
+    fontSelect.replaceChildren();
+    for (const font of FONT_PRESETS) {
+      const option = document.createElement('option');
+      option.value = font.id;
+      option.textContent = font.label;
+      fontSelect.appendChild(option);
+    }
+    fontSelect.addEventListener('change', () => {
+      appearance.font = fontSelect.value;
+      persistAppearance();
+    });
+  }
+  chatFontRange?.addEventListener('input', () => {
+    appearance.chatFont = clampChatFont(Number(chatFontRange.value));
+    applyAppearance(appearance, { persist: false });
+    if (chatFontOut) chatFontOut.textContent = `${appearance.chatFont}px`;
+  });
+  chatFontRange?.addEventListener('change', persistAppearance);
+  scaleRange?.addEventListener('input', () => {
+    appearance.scale = clampScale(Number(scaleRange.value) / 100);
+    applyAppearance(appearance, { persist: false });
+    if (scaleOut) scaleOut.textContent = `${Math.round(appearance.scale * 100)}%`;
+  });
+  scaleRange?.addEventListener('change', persistAppearance);
+  $('#apariencia-reset')?.addEventListener('click', () => {
+    appearance = normalizeAppearance(DEFAULTS);
+    persistAppearance();
+    setStatus('#apariencia-msg', 'restablecido', 'ok');
+  });
+  renderAppearanceControls();
+}
+
+export function cycleTheme() {
+  appearance.theme = nextTheme(appearance.theme);
+  persistAppearance();
+}
+
+export function openSettingsPanel(name) {
+  activateTab('ajustes');
+  activateAjustesPanel(name);
+}
+
+appearance = applyAppearance(appearance, { persist: false });
+
+export const logout = $('#logout');
+
+/* --- layout: resizable + collapsible panels ------------------------------- */
+
+export const panels = {
+  sidebar: { el: $('#sidebar'), resizer: $('#resizer-sidebar'), min: 180, max: 460, width: 260, side: 'left' },
+  explorer: { el: $('#explorer'), resizer: $('#resizer-explorer'), min: 200, max: 560, width: 300, side: 'right' },
+};
+export const sidebarBackdrop = $('#sidebar-backdrop');
+export const mobileQuery = window.matchMedia('(max-width: 820px)');
+
+export function isMobile() {
+  return mobileQuery.matches;
+}
+
+export function readSidebarPref() {
+  return storage.get('tamnora-sidebar-open', '0') !== '0';
+}
+
+export function persistLayout() {
+  storage.setJson('tamnora-panel-widths', {
+    sidebar: panels.sidebar.width,
+    explorer: panels.explorer.width,
+  });
+  scheduleScrollNav();
+}
+
+export function applyPanelWidths() {
+  panels.sidebar.el.style.width = `${panels.sidebar.width}px`;
+  panels.explorer.el.style.width = `${panels.explorer.width}px`;
+  scheduleScrollNav();
+}
+
+export function attachResizer(panel) {
+  panel.resizer.addEventListener('pointerdown', (event) => {
+    if (panel.resizer.hidden) return;
+    event.preventDefault();
+    const startX = event.clientX;
+    const startWidth = panel.width;
+    panel.resizer.classList.add('dragging');
+    document.body.classList.add('resizing');
+    panel.resizer.setPointerCapture(event.pointerId);
+    const move = (moveEvent) => {
+      const delta = panel.side === 'left' ? moveEvent.clientX - startX : startX - moveEvent.clientX;
+      panel.width = Math.min(panel.max, Math.max(panel.min, startWidth + delta));
+      panel.el.style.width = `${panel.width}px`;
+    };
+    const up = () => {
+      panel.resizer.classList.remove('dragging');
+      document.body.classList.remove('resizing');
+      panel.resizer.removeEventListener('pointermove', move);
+      panel.resizer.removeEventListener('pointerup', up);
+      persistLayout();
+    };
+    panel.resizer.addEventListener('pointermove', move);
+    panel.resizer.addEventListener('pointerup', up);
+  });
+}
+
+export function setSidebarOpen(open) {
+  state.sidebarOpen = open;
+  if (isMobile()) {
+    // Drawer: siempre en el DOM; la visibilidad la maneja la clase + backdrop.
+    panels.sidebar.el.hidden = false;
+    panels.sidebar.el.classList.toggle('open', open);
+    panels.sidebar.resizer.hidden = true;
+    if (sidebarBackdrop) sidebarBackdrop.hidden = !open;
+  } else {
+    panels.sidebar.el.classList.remove('open');
+    panels.sidebar.el.hidden = !open;
+    panels.sidebar.resizer.hidden = !open;
+    if (sidebarBackdrop) sidebarBackdrop.hidden = true;
+  }
+  const handle = $('#sidebar-handle');
+  if (handle) {
+    handle.hidden = open;
+    handle.setAttribute('aria-pressed', String(open));
+  }
+  if (!isMobile()) {
+    storage.set('tamnora-sidebar-open', open ? '1' : '0');
+  }
+}
+
+export function initLayout() {
+  const widths = storage.getJson('tamnora-panel-widths', {}) || {};
+  if (Number(widths.sidebar)) panels.sidebar.width = Math.min(panels.sidebar.max, Math.max(panels.sidebar.min, widths.sidebar));
+  if (Number(widths.explorer)) panels.explorer.width = Math.min(panels.explorer.max, Math.max(panels.explorer.min, widths.explorer));
+  // En movil el panel arranca cerrado (drawer); en desktop, la preferencia guardada.
+  applyPanelWidths();
+  attachResizer(panels.sidebar);
+  attachResizer(panels.explorer);
+  setSidebarOpen(isMobile() ? false : readSidebarPref());
+  $('#sidebar-collapse')?.addEventListener('click', () => setSidebarOpen(false));
+  $('#sidebar-handle')?.addEventListener('click', () => setSidebarOpen(true));
+  if (sidebarBackdrop) sidebarBackdrop.addEventListener('click', () => setSidebarOpen(false));
+  mobileQuery.addEventListener('change', () => setSidebarOpen(isMobile() ? false : readSidebarPref()));
+}
+
+export function formatK(n) {
+  const value = Number(n) || 0;
+  if (value >= 1000000) return `${(value / 1000000).toFixed(1)}M`;
+  if (value >= 1000) return `${(value / 1000).toFixed(1)}k`;
+  return String(value);
+}
+
+export function renderTokens() {
+  const wrap = $('#sb-context');
+  const node = $('#sb-tokens');
+  const fill = $('#sb-context-fill');
+  const record = state.panes.get(state.sessionId);
+  const tokens = record?.tokens ?? { in: 0, out: 0 };
+  const lastTurn = record?.lastTurn ?? { prompt: 0, completion: 0 };
+  const total = tokens.in + tokens.out;
+  const context = Number(modelSelect.selectedOptions[0]?.dataset.context) || 0;
+  // El contexto es la ultima ronda (prompt+completion), no el acumulado del run.
+  const used = lastTurn.prompt + lastTurn.completion;
+  const hasContext = context > 0 && used > 0;
+  const pct = hasContext ? Math.min(100, Math.round((used / context) * 100)) : 0;
+  const tone = pct >= 75 ? 'ctx-danger' : pct >= 50 ? 'ctx-warn' : pct >= 25 ? 'ctx-mid' : 'ctx-ok';
+
+  if (!total && !used) {
+    if (wrap) wrap.className = 'ctx muted';
+    node.textContent = 'tokens —';
+    node.title = '';
+    if (fill) fill.style.width = '0%';
+    return;
+  }
+  const parts =
+    `entrada ${formatK(tokens.in)} · salida ${formatK(tokens.out)}` +
+    (hasContext ? ` · contexto ${formatK(used)}/${formatK(context)}` : '');
+  if (hasContext) {
+    node.textContent = `contexto ${pct}% · ${formatK(used)}/${formatK(context)}`;
+    if (wrap) wrap.className = `ctx ${tone}`;
+  } else if (context) {
+    node.textContent = `contexto —/${formatK(context)}`;
+    if (wrap) wrap.className = 'ctx muted';
+  } else {
+    node.textContent = `tokens ${formatK(total)}`;
+    if (wrap) wrap.className = 'ctx muted';
+  }
+  node.title = parts;
+  if (fill) fill.style.width = `${hasContext ? pct : 0}%`;
+}
+
+export function setContextUsage(tokens) {
+  const record = state.panes.get(state.sessionId);
+  if (record && tokens) {
+    record.lastTurn = {
+      prompt: tokens.last_prompt_tokens ?? 0,
+      completion: tokens.last_completion_tokens ?? 0,
+    };
+    renderTokens();
+  }
+}
+
+export function addTokens(tokens) {
+  const record = state.panes.get(state.sessionId);
+  if (record && tokens) {
+    record.tokens.in += tokens.prompt_tokens ?? 0;
+    record.tokens.out += tokens.completion_tokens ?? 0;
+    record.lastTurn = {
+      prompt: tokens.last_prompt_tokens ?? 0,
+      completion: tokens.last_completion_tokens ?? 0,
+    };
+  }
+  renderTokens();
+}
+
+export async function saveSettings(patch) {
+  const out = await api('/api/settings', { method: 'PUT', body: patch }).catch(() => null);
+  if (out?.settings) {
+    state.active.provider = out.settings.provider;
+    state.active.model = out.settings.model;
+  }
+  if (patch.provider) providerSelect.value = patch.provider;
+  updateStatus();
+}
+
+/**
+ * Persiste el tipo de agente elegido. Con una sesion abierta, ese tipo es de la
+ * sesion (asi dos pestañas pueden correr con proveedor/modelo/modo distintos);
+ * ademas se actualiza el default global para que las sesiones nuevas hereden.
+ */
+export async function persistAgent(patch) {
+  const record = state.panes.get(state.sessionId);
+  if (record) {
+    if (patch.provider) record.provider = patch.provider;
+    if (patch.model) record.model = patch.model;
+    if (patch.mode) record.mode = patch.mode;
+    api(`/api/sessions/${record.id}`, { method: 'PUT', body: patch }).catch(() => null);
+  }
+  await saveSettings(patch);
+}
+
+/** Aplica a los controles compartidos el tipo de agente guardado en una sesion. */
+export async function applySessionAgent(record) {
+  if (!record) return;
+  const id = record.id;
+  const provider = record.provider || state.active.provider;
+  if (provider && [...providerSelect.options].some((o) => o.value === provider)) {
+    providerSelect.value = provider;
+  }
+  await loadModels({ prefer: record.model || null });
+  if (state.sessionId !== id) return;
+  const model = record.model || state.active.model;
+  if (model && [...modelSelect.options].some((o) => o.value === model)) modelSelect.value = model;
+  const mode = record.mode || modeSelect.value || 'agent';
+  if ([...modeSelect.options].some((o) => o.value === mode)) modeSelect.value = mode;
+  // No auto-encendemos manos libres al abrir (evita pedir el micro al recargar);
+  // si la sesión no es de voz, sí apagamos.
+  if (mode !== 'voice') setHandsFree(false);
+  updateStatus();
+  renderModePill();
+  renderModelPill();
+}
+
+/** Firma de la lista dibujada: si no cambia, no hay que repintar el select. */
+function modelsSignature(shown) {
+  return shown.map((m) => `${m.id}\u0000${m.label ?? ''}\u0000${m.vision ? 1 : 0}\u0000${m.context ?? ''}`).join('\u0001');
+}
+
+/**
+ * Carga el catalogo del proveedor y dibuja el select.
+ *
+ * `force` vuelve a pedirlo al server; sin el se reusa el de `state` (son ~374
+ * modelos / 591 KB, y esto corre en cada cambio de pestana: refetchearlo hacia
+ * parpadear la consola).
+ */
+export async function loadModels({ save = false, prefer = null, force = false } = {}) {
+  const provider = providerSelect.value;
+  const cached = !force && state.modelCatalogProvider === provider && state.modelCatalog?.length;
+  modelSelect.disabled = true;
+  try {
+    if (!cached) {
+      const data = await api(`/api/models?provider=${encodeURIComponent(provider)}`).catch((error) => ({
+        models: [],
+        error: error.message,
+      }));
+      state.modelCatalog = data?.models ?? [];
+      state.visibleModels = data?.visibleModels ?? [];
+      state.modelCatalogProvider = provider;
+      if (!state.modelCatalog.length) {
+        clear(modelSelect);
+        const option = document.createElement('option');
+        option.value = '';
+        option.textContent = data?.error ? `sin modelos - ${data.error}` : 'sin modelos (configura el proveedor)';
+        modelSelect.appendChild(option);
+        return;
+      }
+    }
+
+    const catalog = state.modelCatalog;
+    const models = pickVisible(catalog, state.visibleModels);
+    const activeModel = prefer || state.active.model;
+    // Si el modelo activo quedo fuera de la seleccion, lo mostramos igual para no
+    // cambiarlo en silencio: sigue siendo el usado aunque no este tildado.
+    const hidden = activeModel && catalog.some((m) => m.id === activeModel) && !models.some((m) => m.id === activeModel);
+    const shown = hidden ? [catalog.find((m) => m.id === activeModel), ...models] : models;
+    if (!shown.length) {
+      clear(modelSelect);
+      const option = document.createElement('option');
+      option.value = '';
+      option.textContent = 'sin modelos (configura el proveedor)';
+      modelSelect.appendChild(option);
+      return;
+    }
+
+    // Repintar el select con cientos de opciones es lo que se ve como parpadeo:
+    // solo se hace cuando la lista realmente cambio.
+    const signature = modelsSignature(shown);
+    if (signature !== state.modelSignature) {
+      state.modelSignature = signature;
+      clear(modelSelect);
+      for (const model of shown) {
+        const option = document.createElement('option');
+        option.value = model.id;
+        option.textContent = model.label && model.label !== model.id ? model.label : model.id;
+        if (model.vision) option.textContent += ' - vision';
+        if (model.context) option.dataset.context = String(model.context);
+        modelSelect.appendChild(option);
+      }
+    }
+
+    const wanted = prefer || state.active.model;
+    if (wanted && shown.some((m) => m.id === wanted)) {
+      modelSelect.value = wanted;
+    } else {
+      modelSelect.value = models[0].id;
+      if (save) await saveSettings({ model: modelSelect.value });
+    }
+  } finally {
+    modelSelect.disabled = false;
+  }
+}
+
+/* --- folder picker -------------------------------------------------------- */
+
+export const folderModal = $('#folder-modal');
+export const folderList = $('#folder-list');
+export const folderCrumbs = $('#folder-crumbs');
+export const folderStatusEl = $('#folder-status');
+export const folderGoto = $('#folder-goto');
+export const folderCreate = $('#folder-create');
+export const folderNewName = $('#folder-new-name');
+export const folderUseBtn = $('#folder-use');
+export let folderListPath = null;
+export let folderParent = null;
+export let folderDirs = [];
+
+export let folderPickerMode = 'session';
+// La carpeta predeterminada vive en el server (la usan la consola y Telegram),
+// no en localStorage; acá se cachea para poder leerla sin await.
+export let defaultCwdCache = '';
+
+export function readDefaultCwd() {
+  return defaultCwdCache || '';
+}
+
+export function writeDefaultCwd(value) {
+  defaultCwdCache = value || '';
+  api('/api/settings', { method: 'PUT', body: { defaultCwd: defaultCwdCache } }).catch(() => {});
+}
+
+export function syncDefaultCwd() {
+  const input = $('#default-cwd');
+  if (input) input.value = readDefaultCwd();
+}
+
+export const FOLDER_PATH = 'M3.5 6.3A1.3 1.3 0 0 1 4.8 5h3.1l1.5 1.7h7.8a1.3 1.3 0 0 1 1.3 1.3v7.7a1.3 1.3 0 0 1-1.3 1.3H4.8a1.3 1.3 0 0 1-1.3-1.3z';
+
+export function folderIcon() {
+  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+  svg.setAttribute('viewBox', '0 0 22 22');
+  svg.setAttribute('class', 'folder-ico');
+  const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+  path.setAttribute('d', FOLDER_PATH);
+  path.setAttribute('fill', 'none');
+  path.setAttribute('stroke', 'currentColor');
+  path.setAttribute('stroke-width', '1.4');
+  path.setAttribute('stroke-linejoin', 'round');
+  svg.appendChild(path);
+  return svg;
+}
+
+export function setSummaryText(node, text, cls = '') {
+  node.className = `summary ${cls}`.trim();
+  node.textContent = text;
+}
+
+/** Variante para una linea de estado propia (explorer/preview/git). */
+export function setStatusText(node, text, isError = false) {
+  node.textContent = text;
+  node.classList.toggle('err', isError);
+}
+
+export function setFolderStatus(text, cls = '') {
+  setSummaryText(folderStatusEl, text, cls);
+}
+
+export function closeFolderPicker() {
+  if (folderModal.open) folderModal.close();
+}
+
+export function openFolderPicker(mode = 'session') {
+  folderPickerMode = mode === 'default' ? 'default' : 'session';
+  folderGoto.value = '';
+  setFolderStatus('');
+  folderModal.showModal();
+  const def = readDefaultCwd();
+  if (!def) return loadFolders(state.home || '');
+  api(`/api/folders?path=${encodeURIComponent(def)}`)
+    .then(() => loadFolders(def))
+    .catch(() => {
+      writeDefaultCwd('');
+      syncDefaultCwd();
+      loadFolders(state.home || '');
+    });
+}
+
+export function renderCrumbs(pathStr) {
+  clear(folderCrumbs);
+  if (!pathStr) {
+    folderCrumbs.appendChild(el('span', 'crumb current', 'unidades'));
+    return;
+  }
+  const win = pathStr.includes('\\');
+  const parts = pathStr.split(/[\\/]+/).filter(Boolean);
+  const segments = parts.map((part, index) =>
+    win
+      ? { label: part, path: index === 0 ? `${part}\\` : parts.slice(0, index + 1).join('\\') }
+      : { label: part, path: `/${parts.slice(0, index + 1).join('/')}` }
+  );
+  segments.forEach((segment, index) => {
+    if (index) folderCrumbs.appendChild(el('span', 'crumb-sep', '/'));
+    const last = index === segments.length - 1;
+    const node = el('span', `crumb${last ? ' current' : ''}`, segment.label);
+    if (!last) node.addEventListener('click', () => loadFolders(segment.path));
+    folderCrumbs.appendChild(node);
+  });
+}
+
+export function renderFolderList(dirs) {
+  clear(folderList);
+  if (!dirs.length) {
+    folderList.appendChild(
+      el('li', 'folders-empty', folderListPath ? 'sin subcarpetas (podés usar esta carpeta igual)' : 'sin unidades')
+    );
+    return;
+  }
+  for (const dir of dirs) {
+    const li = el('li', 'folder-item');
+    li.title = dir.path;
+    li.tabIndex = 0;
+    li.append(folderIcon(), el('span', 'folder-name', dir.name), el('span', 'folder-enter', '↵'));
+    const enter = () => loadFolders(dir.path);
+    li.addEventListener('click', enter);
+    li.addEventListener('keydown', (event) => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        enter();
+      }
+    });
+    folderList.appendChild(li);
+  }
+}
+
+export async function loadFolders(target = '') {
+  folderGoto.value = '';
+  closeCreateFolder();
+  setFolderStatus('cargando…');
+  const data = await api(`/api/folders?path=${encodeURIComponent(target)}`).catch((error) => {
+    setFolderStatus(error.message, 'err');
+    return null;
+  });
+  if (!data) return;
+  folderListPath = data.path;
+  folderParent = data.parent;
+  folderDirs = [...data.dirs].sort((a, b) => a.name.localeCompare(b.name, undefined, { sensitivity: 'base' }));
+  renderCrumbs(data.path);
+  $('#folder-up').disabled = !data.path;
+  $('#folder-new').disabled = !data.path;
+  folderUseBtn.disabled = !data.path;
+  if (folderPickerMode === 'default') {
+    folderUseBtn.textContent = data.path ? `predeterminada: «${basename(data.path)}»` : 'usar como predeterminada';
+  } else {
+    folderUseBtn.textContent = data.path ? `usar «${basename(data.path)}»` : 'usar esta carpeta';
+  }
+  renderFolderList(folderDirs);
+  const count = data.path ? `${folderDirs.length} subcarpetas` : `${folderDirs.length} unidades`;
+  setFolderStatus(data.path ? `${count} · clic para entrar` : 'elegí una unidad');
+}
+
+export async function createSessionIn(cwd, { title = 'Nueva sesión' } = {}) {
+  const current = state.panes.get(state.sessionId);
+  const created = await api('/api/sessions', {
+    method: 'POST',
+    body: {
+      title,
+      cwd,
+      provider: current?.provider || providerSelect.value || undefined,
+      model: current?.model || modelSelect.value || undefined,
+      mode: current?.mode || modeSelect.value || undefined,
+    },
+  }).catch((error) => ({
+    error: error.message,
+  }));
+  if (created?.error) return created;
+  registerSession(created.session, []);
+  activateSession(created.session.id);
+  const pending = state.pendingInput;
+  if (pending !== null && pending !== undefined) {
+    state.pendingInput = null;
+    chatInput.value = pending;
+    sendMessage();
+  }
+  return created;
+}
+
+export async function useFolder() {
+  const cwd = folderListPath;
+  if (!cwd) return setFolderStatus('Entrá a una carpeta primero (clic para navegar).', 'err');
+  if (folderPickerMode === 'default') {
+    writeDefaultCwd(cwd);
+    syncDefaultCwd();
+    closeFolderPicker();
+    return;
+  }
+  const created = await createSessionIn(cwd);
+  if (created?.error) return setFolderStatus(created.error, 'err');
+  closeFolderPicker();
+}
+
+export function filterFolders() {
+  const query = folderGoto.value.trim().toLowerCase();
+  if (!query) return renderFolderList(folderDirs);
+  renderFolderList(folderDirs.filter((dir) => dir.name.toLowerCase().includes(query)));
+}
+
+export function gotoFolder() {
+  const value = folderGoto.value.trim();
+  if (!value) return;
+  if (/[\\/]/.test(value) || /^[a-z]:$/i.test(value)) return loadFolders(value);
+  const matches = folderDirs.filter((dir) => dir.name.toLowerCase().includes(value.toLowerCase()));
+  if (matches.length === 1) loadFolders(matches[0].path);
+  else if (!matches.length) setFolderStatus('sin coincidencias', 'err');
+  else setFolderStatus(`${matches.length} coincidencias`, '');
+}
+
+export function openCreateFolder() {
+  if (!folderListPath) return;
+  folderCreate.hidden = false;
+  folderNewName.value = '';
+  folderNewName.focus();
+}
+
+export function closeCreateFolder() {
+  folderCreate.hidden = true;
+  folderNewName.value = '';
+}
+
+export async function createFolder() {
+  const name = folderNewName.value.trim();
+  if (!name || !folderListPath) return;
+  const created = await api('/api/folders', {
+    method: 'POST',
+    body: { parent: folderListPath, name },
+  }).catch((error) => {
+    setFolderStatus(error.message, 'err');
+    return null;
+  });
+  if (!created) return;
+  await loadFolders(created.path);
+  setFolderStatus(`carpeta «${name}» creada · usala para el nuevo proyecto`, 'ok');
+}
+