@danieltmn/tamnora 0.24.2 → 0.25.1

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

@@ -1,838 +1,872 @@
-// Tamnora console — dependency-free client for the harness server (terminal theme).
-
-import {
-  activePane,
-  addImageFiles,
-  attachInput,
-  chatForm,
-  chatInput,
-  closeMessageMenus,
-  controllers,
-  interruptBtn,
-  openMessageMenu,
-  panesEl,
-  positionMessageMenu,
-  renderFooterActivity,
-  scheduleScrollNav,
-  scrollDownBtn,
-  scrollTopBtn,
-  sendInterrupt,
-  sendMessage,
-  sendPresence,
-  stopBtn,
-} from './chat.js';
-import {
-  activateTab,
-  agentControlsSlot,
-  buildAppearanceControls,
-  closeCreateFolder,
-  closeFolderPicker,
-  closeModeMenu,
-  closeSettingsModal,
-  createFolder,
-  cwdPill,
-  cycleTheme,
-  filterFolders,
-  folderGoto,
-  folderList,
-  folderModal,
-  folderNewName,
-  folderParent,
-  gotoFolder,
-  hideMoreMenu,
-  initLayout,
-  loadFolders,
-  loadModels,
-  loadModes,
-  logout,
-  modeMenu,
-  modePill,
-  modeSelect,
-  modelPill,
-  modelSelect,
-  moreMenu,
-  moreTab,
-  moveAgentControls,
-  openCreateFolder,
-  openFolderPicker,
-  openSettingsModal,
-  persistAgent,
-  providerSelect,
-  renderModePill,
-  setCwd,
-  setMode,
-  settingsModal,
-  statusbarEl,
-  strictInput,
-  syncDefaultCwd,
-  themeToggle,
-  toggleMode,
-  useFolder,
-  writeDefaultCwd,
-  yesInput,
-} from './chrome.js';
-import {
-  handleSlashKey,
-  hideSlashMenu,
-  onChatInputChanged,
-  openPalette,
-  palette,
-  renderPalette,
-  runPaletteItem,
-  setPaletteIndex,
-  toast,
-} from './commands.js';
-import { $, api, setCsrfToken, state, storage } from './core.js';
-import {
-  PREVIEW_DEVICE_KEY,
-  PREVIEW_URL_KEY,
-  applyTreeFilter,
-  detectProcs,
-  explorerFilter,
-  explorerMode,
-  filePreviewState,
-  filePreviewTools,
-  gitEntries,
-  gitFilterEl,
-  gitModalEl,
-  loadPreview,
-  openRemoteTunnel,
-  previewFrame,
-  previewTools,
-  previewUrlInput,
-  refreshExplorerMode,
-  renderGitList,
-  setExplorerMode,
-  setExplorerOpen,
-  setExplorerStatus,
-  setPreviewStatus,
-  setTunnelUi,
-  syncPreviewTunnel,
-} from './explorer.js';
+// Tamnora console — dependency-free client for the harness server (terminal theme).
+
+import {
+  activePane,
+  addImageFiles,
+  attachInput,
+  chatForm,
+  chatInput,
+  closeMessageMenus,
+  controllers,
+  interruptBtn,
+  openMessageMenu,
+  panesEl,
+  positionMessageMenu,
+  renderFooterActivity,
+  scheduleScrollNav,
+  scrollDownBtn,
+  scrollTopBtn,
+  sendInterrupt,
+  sendMessage,
+  sendPresence,
+  stopBtn,
+} from './chat.js';
+import {
+  activateTab,
+  agentControlsSlot,
+  buildAppearanceControls,
+  closeCreateFolder,
+  closeEffortMenu,
+  closeFolderPicker,
+  closeModeMenu,
+  closeSettingsModal,
+  createFolder,
+  cwdPill,
+  cycleTheme,
+  effortMenu,
+  effortPill,
+  effortSelect,
+  filterFolders,
+  folderGoto,
+  folderList,
+  folderModal,
+  folderNewName,
+  folderParent,
+  gotoFolder,
+  hideMoreMenu,
+  initLayout,
+  loadFolders,
+  loadModels,
+  loadModes,
+  logout,
+  modeMenu,
+  modePill,
+  modeSelect,
+  modelPill,
+  modelSelect,
+  moreMenu,
+  moreTab,
+  moveAgentControls,
+  openCreateFolder,
+  openFolderPicker,
+  openSettingsModal,
+  persistAgent,
+  providerSelect,
+  renderModePill,
+  setCwd,
+  setEffort,
+  setMode,
+  settingsModal,
+  statusbarEl,
+  strictInput,
+  syncDefaultCwd,
+  themeToggle,
+  toggleMode,
+  useFolder,
+  writeDefaultCwd,
+  yesInput,
+} from './chrome.js';
+import {
+  handleSlashKey,
+  hideSlashMenu,
+  onChatInputChanged,
+  openPalette,
+  palette,
+  renderPalette,
+  runPaletteItem,
+  setPaletteIndex,
+  toast,
+} from './commands.js';
+import { $, api, scrollBehavior, setCsrfToken, state, storage } from './core.js';
+import {
+  PREVIEW_DEVICE_KEY,
+  PREVIEW_URL_KEY,
+  applyTreeFilter,
+  detectProcs,
+  explorerFilter,
+  explorerMode,
+  filePreviewState,
+  filePreviewTools,
+  gitEntries,
+  gitFilterEl,
+  gitModalEl,
+  loadPreview,
+  openRemoteTunnel,
+  previewFrame,
+  previewTools,
+  previewUrlInput,
+  refreshExplorerMode,
+  renderGitList,
+  setExplorerMode,
+  setExplorerOpen,
+  setExplorerStatus,
+  setPreviewStatus,
+  setTunnelUi,
+  syncPreviewTunnel,
+} from './explorer.js';
 import { renderMarkdown } from './markdown.js';
-import { wireModelPicker } from './models.js';
-import { restoreTabs, startNewSession } from './sessions.js';
-import {
-  activateAjustesPanel,
-  addPerfilFieldRow,
-  ajustesTabs,
-  closeMcpForm,
-  closeMemoryForm,
-  closeProviderForm,
-  closeScheduleForm,
-  closeSkillForm,
-  importMcp,
-  importSkill,
-  limitsCachingEl,
-  limitsDurationEl,
-  limitsOutputEl,
-  limitsRoundsEl,
-  limitsTokensEl,
-  mcpForm,
-  mcpListEl,
-  mcpModal,
-  mcpModeEl,
-  mcpPinnedEl,
-  memoryForm,
-  memoryModal,
-  openMcpForm,
-  openMemoryForm,
-  openProviderForm,
-  openScheduleForm,
-  openSkillForm,
-  perfil,
-  providerForm,
-  providerModal,
-  refreshLimits,
-  refreshMcp,
-  refreshMcpCatalog,
-  refreshProviders,
-  refreshSkillCatalog,
-  saveMemoryIndex,
-  scheduleForm,
-  scheduleModal,
-  scheduleTypeFields,
-  searchMcp,
-  searchSkills,
-  setStatus,
-  skillForm,
-  skillModal,
-  submitAsesor,
-  submitChannel,
-  submitMcp,
-  submitMemory,
-  submitProfile,
-  submitProvider,
-  submitSchedule,
-  submitSkill,
-  syncMcpFormFields,
-  testAsesor,
-  testChannel,
-  testProvider,
-  vozPitchEl,
-  vozRateEl,
-} from './settings.js';
-import {
-  brandVerEl,
-  dismissUpdate,
-  evalRunBtn,
-  evalTasks,
-  followEvents,
-  forceUpdateCheck,
-  reconcile,
-  refreshRuns,
-  refreshUpdate,
-  renderAlertSignals,
-  runEval,
-  runUpdate,
-  watchLifecycle,
-} from './system.js';
-import {
-  handsFreeBtn,
-  micBtn,
-  refreshTranscribe,
-  refreshVoz,
-  renderVozSliders,
-  submitTranscribe,
-  submitVoz,
-  syncTranscribeMode,
-  testVoz,
-  toggleHandsFree,
-  toggleMic,
-  toggleTrTest,
-  trModeEl,
-  trTestBtn,
-} from './voice.js';
-
-moreTab.addEventListener('click', (event) => {
-  event.stopPropagation();
-  const open = moreMenu.hidden;
-  moreMenu.hidden = !open;
-  moreTab.setAttribute('aria-expanded', String(open));
-});
-document.querySelectorAll('#more-menu button').forEach((item) =>
-  item.addEventListener('click', () => activateTab(item.dataset.tab))
-);
-document.addEventListener('click', (event) => {
-  if (!moreMenu.hidden && !event.target.closest('.menu')) hideMoreMenu();
-});
-document.addEventListener('keydown', (event) => {
-  if (event.key === 'Escape' && !moreMenu.hidden) hideMoreMenu();
-});
-
+import { wireModelPicker } from './models.js';
+import { restoreTabs, startNewSession } from './sessions.js';
+import {
+  addPerfilFieldRow,
+  agentForm,
+  agentModal,
+  closeAgentForm,
+  closeMcpForm,
+  closeMemoryForm,
+  closeProviderForm,
+  closeScheduleForm,
+  closeSkillForm,
+  importMcp,
+  importSkill,
+  limitsCachingEl,
+  limitsDurationEl,
+  limitsOutputEl,
+  limitsRoundsEl,
+  limitsTokensEl,
+  mcpForm,
+  mcpListEl,
+  mcpModal,
+  mcpModeEl,
+  mcpPinnedEl,
+  memoryForm,
+  memoryModal,
+  openAgentForm,
+  openMcpForm,
+  openMemoryForm,
+  openProviderForm,
+  openScheduleForm,
+  openSkillForm,
+  perfil,
+  providerForm,
+  providerModal,
+  refreshLimits,
+  refreshMcp,
+  refreshMcpCatalog,
+  refreshProviders,
+  refreshSkillCatalog,
+  saveMemoryIndex,
+  scheduleForm,
+  scheduleModal,
+  scheduleTypeFields,
+  searchMcp,
+  searchSkills,
+  setStatus,
+  skillForm,
+  skillModal,
+  submitAgent,
+  submitAsesor,
+  submitChannel,
+  submitMcp,
+  submitMemory,
+  submitProfile,
+  submitProvider,
+  submitSchedule,
+  submitSkill,
+  syncMcpFormFields,
+  testAsesor,
+  testChannel,
+  testProvider,
+  vozPitchEl,
+  vozRateEl,
+  wireAjustesNav,
+} from './settings.js';
+import {
+  brandVerEl,
+  dismissUpdate,
+  evalRunBtn,
+  evalTasks,
+  followEvents,
+  forceUpdateCheck,
+  reconcile,
+  refreshRuns,
+  refreshUpdate,
+  renderAlertSignals,
+  runEval,
+  runUpdate,
+  watchLifecycle,
+} from './system.js';
+import {
+  handsFreeBtn,
+  micBtn,
+  refreshTranscribe,
+  refreshVoz,
+  renderVozSliders,
+  submitTranscribe,
+  submitVoz,
+  syncTranscribeMode,
+  testVoz,
+  toggleHandsFree,
+  toggleMic,
+  toggleTrTest,
+  trModeEl,
+  trTestBtn,
+} from './voice.js';
+
+moreTab.addEventListener('click', (event) => {
+  event.stopPropagation();
+  const open = moreMenu.hidden;
+  moreMenu.hidden = !open;
+  moreTab.setAttribute('aria-expanded', String(open));
+});
+document.querySelectorAll('#more-menu button').forEach((item) =>
+  item.addEventListener('click', () => activateTab(item.dataset.tab))
+);
+document.addEventListener('click', (event) => {
+  if (!moreMenu.hidden && !event.target.closest('.menu')) hideMoreMenu();
+});
+document.addEventListener('keydown', (event) => {
+  if (event.key === 'Escape' && !moreMenu.hidden) hideMoreMenu();
+});
+
 $('#back-chat')?.addEventListener('click', () => activateTab('chat'));
 
-if (settingsModal) {
-  $('#settings-toggle')?.addEventListener('click', openSettingsModal);
-  $('#settings-close')?.addEventListener('click', closeSettingsModal);
-  $('#settings-done')?.addEventListener('click', closeSettingsModal);
-  $('#settings-providers')?.addEventListener('click', () => {
-    closeSettingsModal();
-    activateTab('providers');
-  });
-  $('#agent-settings-open')?.addEventListener('click', openSettingsModal);
-  $('#agent-providers')?.addEventListener('click', () => activateTab('providers'));
-  $('#default-cwd-pick')?.addEventListener('click', () => openFolderPicker('default'));
-  $('#default-cwd-clear')?.addEventListener('click', () => {
-    writeDefaultCwd('');
-    syncDefaultCwd();
-  });
-  settingsModal.addEventListener('click', (event) => {
-    if (event.target === settingsModal) closeSettingsModal();
-  });
-  settingsModal.addEventListener('close', () => moveAgentControls(agentControlsSlot));
-}
-
-if (statusbarEl) {
-  statusbarEl.addEventListener('click', (event) => {
-    if (event.target.closest('#sb-context')) return;
-    openSettingsModal();
-  });
-  statusbarEl.addEventListener('keydown', (event) => {
-    if (event.key === 'Enter' || event.key === ' ') {
-      event.preventDefault();
-      openSettingsModal();
-    }
-  });
-}
-
-if (palette.modal) {
-  palette.input.addEventListener('input', () => {
-    const q = palette.input.value;
-    renderPalette(q);
-    clearTimeout(palette.timer);
-    palette.timer = setTimeout(async () => {
-      if (q.trim().length < 2) {
-        palette.results = { sessions: [], messages: [] };
-        renderPalette(q);
-        return;
-      }
-      const data = await api(`/api/search?q=${encodeURIComponent(q)}&limit=15`).catch(() => null);
-      if (data) {
-        palette.results = { sessions: data.sessions || [], messages: data.messages || [] };
-        renderPalette(q);
-      }
-    }, 180);
-  });
-  palette.input.addEventListener('keydown', (event) => {
-    if (event.key === 'ArrowDown') {
-      event.preventDefault();
-      setPaletteIndex(palette.index + 1);
-    } else if (event.key === 'ArrowUp') {
-      event.preventDefault();
-      setPaletteIndex(palette.index - 1);
-    } else if (event.key === 'Enter') {
-      event.preventDefault();
-      const item = palette.items[palette.index];
-      if (item) runPaletteItem(item);
-    }
-  });
-  palette.modal.addEventListener('click', (event) => {
-    if (event.target === palette.modal) palette.modal.close();
-  });
-  $('#search-toggle')?.addEventListener('click', openPalette);
-  document.addEventListener('keydown', (event) => {
-    if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'k') {
-      event.preventDefault();
-      openPalette();
-    }
-  });
-}
-
-modeSelect.addEventListener('change', () => setMode(modeSelect.value));
-
-document.addEventListener('keydown', (event) => {
-  if ((event.ctrlKey || event.metaKey) && event.key === '.') {
-    event.preventDefault();
-    toggleMode();
-  }
-});
-
-cwdPill?.addEventListener('click', () => openFolderPicker('session'));
-modePill?.addEventListener('click', (event) => {
-  event.stopPropagation();
-  if (!modeMenu) return;
-  modeMenu.hidden = !modeMenu.hidden;
-  modePill.setAttribute('aria-expanded', modeMenu.hidden ? 'false' : 'true');
-});
-modeMenu?.addEventListener('click', async (event) => {
-  const item = event.target.closest('.ctrl-menu-item');
-  if (!item) return;
-  const kind = item.dataset.kind;
-  closeModeMenu();
-  if (kind === 'full') {
-    await setMode('agent');
-    if (yesInput) yesInput.checked = true;
-  } else {
-    if (yesInput) yesInput.checked = false;
-    await setMode(kind === 'read' ? 'plan' : kind === 'voice' ? 'voice' : 'agent');
-  }
-  renderModePill();
-});
-document.addEventListener('click', (event) => {
-  if (modeMenu && !modeMenu.hidden && !event.target.closest('.ctrl-wrap')) closeModeMenu();
-});
-document.addEventListener('keydown', (event) => {
-  if (event.key === 'Escape') closeModeMenu();
-});
-modelPill?.addEventListener('click', () => openSettingsModal());
-yesInput?.addEventListener('change', renderModePill);
-strictInput?.addEventListener('change', () =>
-  api('/api/settings', { method: 'PUT', body: { strictScope: strictInput.checked } }).catch(() => null)
-);
-
-themeToggle?.addEventListener('click', cycleTheme);
-
-buildAppearanceControls();
-
-if (logout) {
-  logout.addEventListener('click', async (event) => {
-    event.preventDefault();
-    try {
-      await api('/api/auth/logout', { method: 'POST' });
-    } catch {
-      // igual salimos
-    }
-    location.href = '/landing';
-  });
-}
-
-initLayout();
-
-providerSelect.addEventListener('change', async () => {
-  await loadModels({ save: false });
-  await persistAgent({ provider: providerSelect.value, model: modelSelect.value || undefined });
-});
-modelSelect.addEventListener('change', () => persistAgent({ model: modelSelect.value }));
-
-export let restorePreviewMax = null;
-
-scrollTopBtn.addEventListener('click', () => activePane?.scrollTo({ top: 0, behavior: 'smooth' }));
-scrollDownBtn.addEventListener('click', () =>
-  activePane?.scrollTo({ top: activePane.scrollHeight, behavior: 'smooth' })
-);
-// `scroll` no burbujea: se escucha en captura desde el contenedor de los panes.
-panesEl.addEventListener('scroll', scheduleScrollNav, true);
-window.addEventListener('resize', scheduleScrollNav);
-new MutationObserver(scheduleScrollNav).observe(panesEl, {
-  childList: true,
-  characterData: true,
-  subtree: true,
-});
-
-document.addEventListener('click', (event) => {
-  if (!openMessageMenu) return;
-  if (event.target.closest('.msg-menu') || event.target.closest('.msg-menu-btn')) return;
-  closeMessageMenus();
-});
-document.addEventListener('keydown', (event) => {
-  if (event.key === 'Escape') closeMessageMenus();
-});
-window.addEventListener('resize', positionMessageMenu);
-document.addEventListener('scroll', positionMessageMenu, true);
-
-panesEl.addEventListener('click', (event) => {
-  const button = event.target.closest('.code-copy');
-  if (!button) return;
-  const pre = button.closest('.code-block')?.querySelector('pre');
-  if (!pre || !navigator.clipboard) return;
-  navigator.clipboard.writeText(pre.textContent).then(() => {
-    button.textContent = 'copiado';
-    setTimeout(() => (button.textContent = 'copiar'), 1200);
-  });
-});
-
-/** Tool -> momento en que se aprobo por ultima vez. */
-state.recentDecisions = new Map();
-
-$('#new-session').addEventListener('click', startNewSession);
-$('#new-session-top').addEventListener('click', startNewSession);
-
-if (stopBtn) {
-  stopBtn.addEventListener('click', async () => {
-    const id = state.sessionId;
-    if (!id || stopBtn.disabled) return;
-    stopBtn.disabled = true;
-    renderFooterActivity('stopping');
-    // Abortamos el stream local (corta el seguimiento ya) y pedimos al server que
-    // aborte el run: sin esto el run es durable y seguiria generando.
-    controllers.get(id)?.abort();
-    try {
-      await api(`/api/sessions/${id}/stop`, { method: 'POST' });
-    } catch (error) {
-      toast(`No se pudo detener el run: ${error.message}`);
-    } finally {
-      stopBtn.disabled = false;
-    }
-  });
-}
-
-if (interruptBtn) interruptBtn.addEventListener('click', sendInterrupt);
-
-chatForm.addEventListener('submit', (event) => {
-  event.preventDefault();
-  sendMessage();
-});
-chatInput.addEventListener('keydown', (event) => {
-  if (handleSlashKey(event)) return;
-  if (event.key === 'Enter' && (event.ctrlKey || event.metaKey)) {
-    event.preventDefault();
-    sendInterrupt();
-    return;
-  }
-  if (event.key === 'Enter' && !event.shiftKey) {
-    event.preventDefault();
-    sendMessage();
-  }
-});
-chatInput.addEventListener('input', onChatInputChanged);
-
-micBtn?.addEventListener('click', toggleMic);
-
-handsFreeBtn?.addEventListener('click', toggleHandsFree);
-
-$('#attach-image').addEventListener('click', () => attachInput.click());
-attachInput.addEventListener('change', () => {
-  addImageFiles([...attachInput.files]);
-  attachInput.value = '';
-});
-chatInput.addEventListener('paste', (event) => {
-  const files = [...(event.clipboardData?.files ?? [])].filter((f) => f.type.startsWith('image/'));
-  if (!files.length) return;
-  event.preventDefault();
-  addImageFiles(files);
-});
-chatForm.addEventListener('dragover', (event) => {
-  event.preventDefault();
-  chatForm.classList.add('dragging');
-});
-chatForm.addEventListener('dragleave', () => chatForm.classList.remove('dragging'));
-chatForm.addEventListener('drop', (event) => {
-  const files = [...(event.dataTransfer?.files ?? [])].filter((f) => f.type.startsWith('image/'));
-  if (!files.length) return;
-  event.preventDefault();
-  chatForm.classList.remove('dragging');
-  addImageFiles(files);
-});
-
-chatInput.addEventListener('blur', () => setTimeout(hideSlashMenu, 120));
-
-$('#folder-new').addEventListener('click', openCreateFolder);
-$('#folder-new-cancel').addEventListener('click', closeCreateFolder);
-$('#folder-new-create').addEventListener('click', createFolder);
-folderNewName.addEventListener('keydown', (event) => {
-  if (event.key === 'Enter') {
-    event.preventDefault();
-    createFolder();
-  } else if (event.key === 'Escape') {
-    event.preventDefault();
-    closeCreateFolder();
-  }
-});
-$('#folder-roots').addEventListener('click', () => loadFolders(''));
-$('#folder-home').addEventListener('click', () => loadFolders(state.home || ''));
-$('#folder-close').addEventListener('click', closeFolderPicker);
-$('#folder-cancel').addEventListener('click', () => {
-  state.pendingInput = null;
-  closeFolderPicker();
-});
-$('#folder-up').addEventListener('click', () => loadFolders(folderParent ?? ''));
-$('#folder-use').addEventListener('click', useFolder);
-$('#folder-go').addEventListener('click', gotoFolder);
-folderGoto.addEventListener('input', filterFolders);
-folderGoto.addEventListener('keydown', (event) => {
-  if (event.key === 'Enter') {
-    event.preventDefault();
-    gotoFolder();
-  }
-});
-folderList.addEventListener('keydown', (event) => {
-  if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') return;
-  const items = [...folderList.querySelectorAll('.folder-item')];
-  if (!items.length) return;
-  event.preventDefault();
-  const current = items.indexOf(document.activeElement);
-  const next = event.key === 'ArrowDown' ? Math.min(items.length - 1, current + 1) : Math.max(0, current - 1);
-  items[current === -1 ? 0 : next].focus();
-});
-folderModal.addEventListener('click', (event) => {
-  if (event.target === folderModal) {
-    state.pendingInput = null;
-    closeFolderPicker();
-  }
-});
-
-$('#provider-new').addEventListener('click', () => openProviderForm());
-$('#pf-cancel').addEventListener('click', closeProviderForm);
-$('#pf-close').addEventListener('click', closeProviderForm);
-$('#pf-test').addEventListener('click', testProvider);
-providerForm.addEventListener('submit', submitProvider);
-providerModal.addEventListener('click', (event) => {
-  if (event.target === providerModal) closeProviderForm();
-});
-
-ajustesTabs.forEach((tab) =>
-  tab.addEventListener('click', () => activateAjustesPanel(tab.dataset.panel))
-);
-
-$('#limits-save')?.addEventListener('click', async () => {
-  const body = {
-    maxRounds: Math.max(0, Number(limitsRoundsEl?.value) || 0),
-    maxTokens: Math.max(0, Number(limitsTokensEl?.value) || 0),
-    maxDurationMs: Math.max(0, Math.round((Number(limitsDurationEl?.value) || 0) * 1000)),
-    maxOutputTokens: Math.max(0, Number(limitsOutputEl?.value) || 0),
-    promptCaching: Boolean(limitsCachingEl?.checked),
-  };
-  try {
-    await api('/api/settings', { method: 'PUT', body });
-    refreshLimits();
-    setStatus('#limits-msg', 'guardado', 'ok');
-  } catch (error) {
-    setStatus('#limits-msg', error.message, 'err');
-  }
-});
-
-$('#tr-save')?.addEventListener('click', submitTranscribe);
-trModeEl?.addEventListener('change', syncTranscribeMode);
-
-trTestBtn?.addEventListener('click', toggleTrTest);
-
-perfil.add?.addEventListener('click', () => addPerfilFieldRow());
-perfil.save?.addEventListener('click', submitProfile);
-
-if (mcpListEl) {
-  $('#mcp-new').addEventListener('click', () => openMcpForm());
-  $('#mcp-import-btn')?.addEventListener('click', importMcp);
-  $('#mcp-import')?.addEventListener('keydown', (event) => {
-    if (event.key === 'Enter') {
-      event.preventDefault();
-      importMcp();
-    }
-  });
-  $('#skill-import-btn')?.addEventListener('click', importSkill);
-  $('#skill-import')?.addEventListener('keydown', (event) => {
-    if (event.key === 'Enter') {
-      event.preventDefault();
-      importSkill();
-    }
-  });
-  $('#mcp-search-btn')?.addEventListener('click', searchMcp);
-  $('#mcp-search')?.addEventListener('keydown', (event) => {
-    if (event.key === 'Enter') {
-      event.preventDefault();
-      searchMcp();
-    }
-  });
-  $('#skill-search-btn')?.addEventListener('click', searchSkills);
-  $('#skill-search')?.addEventListener('keydown', (event) => {
-    if (event.key === 'Enter') {
-      event.preventDefault();
-      searchSkills();
-    }
-  });
-  refreshMcpCatalog();
-  refreshSkillCatalog();
-  $('#mcp-reload').addEventListener('click', () => refreshMcp({ connect: true }));
-  mcpModeEl?.addEventListener('change', async () => {
-    try {
-      await api('/api/settings', { method: 'PUT', body: { mcpMode: mcpModeEl.value } });
-      await refreshMcp({ connect: true });
-    } catch (error) {
-      toast(error.message);
-    }
-  });
-  const savePinnedMcp = async () => {
-    try {
-      await api('/api/settings', { method: 'PUT', body: { mcpPinned: String(mcpPinnedEl.value || '') } });
-      await refreshMcp({ connect: true });
-    } catch (error) {
-      toast(error.message);
-    }
-  };
-  $('#mcp-pinned-save')?.addEventListener('click', savePinnedMcp);
-  mcpPinnedEl?.addEventListener('keydown', (event) => {
-    if (event.key === 'Enter') {
-      event.preventDefault();
-      savePinnedMcp();
-    }
-  });
-  $('#tg-save')?.addEventListener('click', submitChannel);
-  $('#tg-test')?.addEventListener('click', testChannel);
-$('#voz-save')?.addEventListener('click', submitVoz);
-$('#voz-test')?.addEventListener('click', testVoz);
-vozRateEl?.addEventListener('input', renderVozSliders);
-vozPitchEl?.addEventListener('input', renderVozSliders);
-$('#asesor-save')?.addEventListener('click', submitAsesor);
-$('#asesor-test')?.addEventListener('click', testAsesor);
-  $('#mcp-close').addEventListener('click', closeMcpForm);
-  $('#mf-cancel').addEventListener('click', closeMcpForm);
-  $('#mf-transport').addEventListener('change', syncMcpFormFields);
-  mcpForm.addEventListener('submit', submitMcp);
-  mcpModal.addEventListener('click', (event) => {
-    if (event.target === mcpModal) closeMcpForm();
-  });
-
-  $('#skill-new').addEventListener('click', () => openSkillForm());
-  $('#skill-close').addEventListener('click', closeSkillForm);
-  $('#sf-cancel').addEventListener('click', closeSkillForm);
-  skillForm.addEventListener('submit', submitSkill);
-  skillModal.addEventListener('click', (event) => {
-    if (event.target === skillModal) closeSkillForm();
-  });
-
-  $('#memory-new')?.addEventListener('click', () => openMemoryForm());
-  $('#memory-close')?.addEventListener('click', closeMemoryForm);
-  $('#mem-cancel')?.addEventListener('click', closeMemoryForm);
-  memoryForm?.addEventListener('submit', submitMemory);
-  $('#memory-save-index')?.addEventListener('click', saveMemoryIndex);
-  memoryModal?.addEventListener('click', (event) => {
-    if (event.target === memoryModal) closeMemoryForm();
-  });
-
-  $('#sc-type')?.addEventListener('change', scheduleTypeFields);
-  $('#schedule-new')?.addEventListener('click', () => openScheduleForm());
-  $('#schedule-close')?.addEventListener('click', closeScheduleForm);
-  $('#sc-cancel')?.addEventListener('click', closeScheduleForm);
-  scheduleForm?.addEventListener('submit', submitSchedule);
-  scheduleModal?.addEventListener('click', (event) => {
-    if (event.target === scheduleModal) closeScheduleForm();
-  });
-}
-
-evalTasks.value = [
-  '{"id":"math","input":"¿Cuánto es 17 * 23? Respondé solo el número.","expect":{"equals":"391"}}',
-  '{"id":"regex","input":"Escribí una oración que contenga un número.","expect":{"regex":"\\\\d"}}',
-].join('\n');
-
-evalRunBtn.addEventListener('click', runEval);
-
-$('#runs-refresh').addEventListener('click', refreshRuns);
-
-$('#file-preview-toggle')?.addEventListener('click', async () => {
-  const toggle = $('#file-preview-toggle');
-  const code = $('#file-code');
-  const stage = $('#file-stage');
-  const frame = $('#file-frame');
-  const render = $('#file-render');
-  const device = $('#file-device');
-  const maxButton = $('#file-max');
-  const current = filePreviewState.current;
-  if (!current) return;
-
-  filePreviewState.open = !filePreviewState.open;
-  const off = () => {
-    toggle.textContent = 'vista previa';
-    code.hidden = false;
-    stage.hidden = true;
-    render.hidden = true;
-    device.hidden = true;
-    maxButton.hidden = false;
-    $('#file-modal').classList.remove('preview-maximized');
-  };
-  if (!filePreviewState.open) return off();
-
-  if (filePreviewState.kind === 'markdown') {
-    render.innerHTML = renderMarkdown(filePreviewState.content);
-    code.hidden = true;
-    stage.hidden = true;
-    render.hidden = false;
-    device.hidden = true;
-    maxButton.hidden = false;
-    toggle.textContent = 'ver código';
-    return;
-  }
-
-  device.hidden = false;
-  maxButton.hidden = false;
-  if (!filePreviewState.loaded) {
-    const data = await api('/api/files/preview', {
-      method: 'POST',
-      body: { root: state.cwd, path: current.relPath },
-    }).catch((error) => ({ error: error.message }));
-    if (data?.error) {
-      setExplorerStatus(data.error, true);
-      filePreviewState.open = false;
-      return off();
-    }
-    frame.src = data.url;
-    filePreviewState.loaded = true;
-    filePreviewTools.applyDevice();
-  }
-  toggle.textContent = 'ver código';
-  code.hidden = true;
-  render.hidden = true;
-  stage.hidden = false;
-});
-
-document.querySelectorAll('.xtab').forEach((tab) => tab.addEventListener('click', () => setExplorerMode(tab.dataset.xp)));
-
-restorePreviewMax = () => previewTools.setMax(false);
-
-$('#preview-open')?.addEventListener('click', () => loadPreview(previewUrlInput.value));
-previewUrlInput?.addEventListener('keydown', (event) => {
-  if (event.key === 'Enter') {
-    event.preventDefault();
-    loadPreview(previewUrlInput.value);
-  }
-});
-previewFrame?.addEventListener('load', () => {
-  if (previewFrame.src) setPreviewStatus(previewFrame.src);
-});
-$('#preview-tunnel')?.addEventListener('click', () => {
-  const match = String(previewUrlInput.value).match(/:(\d+)/);
-  const port = match ? Number(match[1]) : 0;
-  if (!port) return setPreviewStatus('Poné una URL con puerto (p. ej. http://127.0.0.1:5173).', true);
-  openRemoteTunnel(port);
-});
-$('#preview-close')?.addEventListener('click', async () => {
-  await api('/api/preview/tunnel', { method: 'DELETE' }).catch(() => null);
-  setTunnelUi(null);
-  setPreviewStatus('acceso remoto cerrado.');
-});
-$('#preview-device')?.addEventListener('change', (event) => storage.set(PREVIEW_DEVICE_KEY, event.target.value));
-
-// Restaurar lo tipeado y el tamano elegido: en la tablet la pagina se recarga
-// sola (iOS la descarta en background) y antes se perdia todo el estado.
-(function restorePreview() {
-  const savedDevice = storage.get(PREVIEW_DEVICE_KEY, '');
-  if (savedDevice && $('#preview-device')) $('#preview-device').value = savedDevice;
-  previewTools.applyDevice();
-  const savedUrl = storage.get(PREVIEW_URL_KEY, '');
-  if (savedUrl) previewUrlInput.value = savedUrl;
-  syncPreviewTunnel({ load: true });
-})();
-
-$('#procs-detect')?.addEventListener('click', detectProcs);
-
-gitFilterEl?.addEventListener('input', () => {
-  if (explorerMode === 'git' && gitEntries.length) renderGitList();
-});
-
-$('#explorer-handle')?.addEventListener('click', () => setExplorerOpen(true));
-$('#explorer-close').addEventListener('click', () => setExplorerOpen(false));
-$('#explorer-refresh').addEventListener('click', refreshExplorerMode);
-explorerFilter.addEventListener('input', applyTreeFilter);
-$('#file-close').addEventListener('click', () => $('#file-modal').close());
-$('#file-modal').addEventListener('click', (event) => {
-  if (event.target === $('#file-modal')) $('#file-modal').close();
-});
-$('#git-close')?.addEventListener('click', () => gitModalEl?.close());
-gitModalEl?.addEventListener('click', (event) => {
-  if (event.target === gitModalEl) gitModalEl.close();
-});
-
-try {
-  setExplorerOpen(storage.get('tamnora-explorer-open') === '1');
-} catch {
-  setExplorerOpen(false);
-}
-
-$('#update-run')?.addEventListener('click', runUpdate);
-$('#update-later')?.addEventListener('click', dismissUpdate);
-
-if (brandVerEl) {
-  brandVerEl.title = 'buscar actualización';
-  brandVerEl.classList.add('ver-action');
-  brandVerEl.addEventListener('click', forceUpdateCheck);
-}
-
-/* --- boot ---------------------------------------------------------------- */
-
+if (settingsModal) {
+  $('#settings-toggle')?.addEventListener('click', openSettingsModal);
+  $('#settings-close')?.addEventListener('click', closeSettingsModal);
+  $('#settings-done')?.addEventListener('click', closeSettingsModal);
+  $('#settings-providers')?.addEventListener('click', () => {
+    closeSettingsModal();
+    activateTab('providers');
+  });
+  $('#agent-settings-open')?.addEventListener('click', openSettingsModal);
+  $('#agent-providers')?.addEventListener('click', () => activateTab('providers'));
+  $('#default-cwd-pick')?.addEventListener('click', () => openFolderPicker('default'));
+  $('#default-cwd-clear')?.addEventListener('click', () => {
+    writeDefaultCwd('');
+    syncDefaultCwd();
+  });
+  settingsModal.addEventListener('click', (event) => {
+    if (event.target === settingsModal) closeSettingsModal();
+  });
+  settingsModal.addEventListener('close', () => moveAgentControls(agentControlsSlot));
+}
+
+if (statusbarEl) {
+  statusbarEl.addEventListener('click', (event) => {
+    if (event.target.closest('#sb-context')) return;
+    openSettingsModal();
+  });
+  statusbarEl.addEventListener('keydown', (event) => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      openSettingsModal();
+    }
+  });
+}
+
+if (palette.modal) {
+  palette.input.addEventListener('input', () => {
+    const q = palette.input.value;
+    renderPalette(q);
+    clearTimeout(palette.timer);
+    palette.timer = setTimeout(async () => {
+      if (q.trim().length < 2) {
+        palette.results = { sessions: [], messages: [] };
+        renderPalette(q);
+        return;
+      }
+      const data = await api(`/api/search?q=${encodeURIComponent(q)}&limit=15`).catch(() => null);
+      if (data) {
+        palette.results = { sessions: data.sessions || [], messages: data.messages || [] };
+        renderPalette(q);
+      }
+    }, 180);
+  });
+  palette.input.addEventListener('keydown', (event) => {
+    if (event.key === 'ArrowDown') {
+      event.preventDefault();
+      setPaletteIndex(palette.index + 1);
+    } else if (event.key === 'ArrowUp') {
+      event.preventDefault();
+      setPaletteIndex(palette.index - 1);
+    } else if (event.key === 'Enter') {
+      event.preventDefault();
+      const item = palette.items[palette.index];
+      if (item) runPaletteItem(item);
+    }
+  });
+  palette.modal.addEventListener('click', (event) => {
+    if (event.target === palette.modal) palette.modal.close();
+  });
+  $('#search-toggle')?.addEventListener('click', openPalette);
+  document.addEventListener('keydown', (event) => {
+    if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'k') {
+      event.preventDefault();
+      openPalette();
+    }
+  });
+}
+
+modeSelect.addEventListener('change', () => setMode(modeSelect.value));
+
+document.addEventListener('keydown', (event) => {
+  if ((event.ctrlKey || event.metaKey) && event.key === '.') {
+    event.preventDefault();
+    toggleMode();
+  }
+});
+
+cwdPill?.addEventListener('click', () => openFolderPicker('session'));
+modePill?.addEventListener('click', (event) => {
+  event.stopPropagation();
+  if (!modeMenu) return;
+  modeMenu.hidden = !modeMenu.hidden;
+  modePill.setAttribute('aria-expanded', modeMenu.hidden ? 'false' : 'true');
+});
+modeMenu?.addEventListener('click', async (event) => {
+  const item = event.target.closest('.ctrl-menu-item');
+  if (!item) return;
+  const kind = item.dataset.kind;
+  closeModeMenu();
+  if (kind === 'full') {
+    await setMode('agent');
+    if (yesInput) yesInput.checked = true;
+  } else {
+    if (yesInput) yesInput.checked = false;
+    await setMode(kind === 'read' ? 'plan' : kind === 'voice' ? 'voice' : 'agent');
+  }
+  renderModePill();
+});
+document.addEventListener('click', (event) => {
+  if (modeMenu && !modeMenu.hidden && !event.target.closest('.ctrl-wrap')) closeModeMenu();
+});
+document.addEventListener('keydown', (event) => {
+  if (event.key === 'Escape') closeModeMenu();
+});
+modelPill?.addEventListener('click', () => openSettingsModal());
+effortPill?.addEventListener('click', (event) => {
+  event.stopPropagation();
+  if (!effortMenu) return;
+  effortMenu.hidden = !effortMenu.hidden;
+  effortPill.setAttribute('aria-expanded', effortMenu.hidden ? 'false' : 'true');
+});
+effortMenu?.addEventListener('click', async (event) => {
+  const item = event.target.closest('.ctrl-menu-item');
+  if (!item) return;
+  closeEffortMenu();
+  await setEffort(item.dataset.effort || '');
+});
+effortSelect?.addEventListener('change', () => setEffort(effortSelect.value));
+document.addEventListener('click', (event) => {
+  if (effortMenu && !effortMenu.hidden && !event.target.closest('.ctrl-wrap')) closeEffortMenu();
+});
+document.addEventListener('keydown', (event) => {
+  if (event.key === 'Escape') closeEffortMenu();
+});
+yesInput?.addEventListener('change', renderModePill);
+strictInput?.addEventListener('change', () =>
+  api('/api/settings', { method: 'PUT', body: { strictScope: strictInput.checked } }).catch(() => null)
+);
+
+themeToggle?.addEventListener('click', cycleTheme);
+
+buildAppearanceControls();
+
+if (logout) {
+  logout.addEventListener('click', async (event) => {
+    event.preventDefault();
+    try {
+      await api('/api/auth/logout', { method: 'POST' });
+    } catch {
+      // igual salimos
+    }
+    location.href = '/landing';
+  });
+}
+
+initLayout();
+
+providerSelect.addEventListener('change', async () => {
+  await loadModels({ save: false });
+  await persistAgent({ provider: providerSelect.value, model: modelSelect.value || undefined });
+});
+modelSelect.addEventListener('change', () => persistAgent({ model: modelSelect.value }));
+
+export let restorePreviewMax = null;
+
+scrollTopBtn.addEventListener('click', () => activePane?.scrollTo({ top: 0, behavior: scrollBehavior() }));
+scrollDownBtn.addEventListener('click', () =>
+  activePane?.scrollTo({ top: activePane.scrollHeight, behavior: scrollBehavior() })
+);
+// `scroll` no burbujea: se escucha en captura desde el contenedor de los panes.
+panesEl.addEventListener('scroll', scheduleScrollNav, true);
+window.addEventListener('resize', scheduleScrollNav);
+new MutationObserver(scheduleScrollNav).observe(panesEl, {
+  childList: true,
+  characterData: true,
+  subtree: true,
+});
+
+document.addEventListener('click', (event) => {
+  if (!openMessageMenu) return;
+  if (event.target.closest('.msg-menu') || event.target.closest('.msg-menu-btn')) return;
+  closeMessageMenus();
+});
+document.addEventListener('keydown', (event) => {
+  if (event.key === 'Escape') closeMessageMenus();
+});
+window.addEventListener('resize', positionMessageMenu);
+document.addEventListener('scroll', positionMessageMenu, true);
+
+panesEl.addEventListener('click', (event) => {
+  const button = event.target.closest('.code-copy');
+  if (!button) return;
+  const pre = button.closest('.code-block')?.querySelector('pre');
+  if (!pre || !navigator.clipboard) return;
+  navigator.clipboard.writeText(pre.textContent).then(() => {
+    button.textContent = 'copiado';
+    setTimeout(() => (button.textContent = 'copiar'), 1200);
+  });
+});
+
+/** Tool -> momento en que se aprobo por ultima vez. */
+state.recentDecisions = new Map();
+
+$('#new-session').addEventListener('click', startNewSession);
+$('#new-session-top').addEventListener('click', startNewSession);
+
+if (stopBtn) {
+  stopBtn.addEventListener('click', async () => {
+    const id = state.sessionId;
+    if (!id || stopBtn.disabled) return;
+    stopBtn.disabled = true;
+    renderFooterActivity('stopping');
+    // Abortamos el stream local (corta el seguimiento ya) y pedimos al server que
+    // aborte el run: sin esto el run es durable y seguiria generando.
+    controllers.get(id)?.abort();
+    try {
+      await api(`/api/sessions/${id}/stop`, { method: 'POST' });
+    } catch (error) {
+      toast(`No se pudo detener el run: ${error.message}`);
+    } finally {
+      stopBtn.disabled = false;
+    }
+  });
+}
+
+if (interruptBtn) interruptBtn.addEventListener('click', sendInterrupt);
+
+chatForm.addEventListener('submit', (event) => {
+  event.preventDefault();
+  sendMessage();
+});
+chatInput.addEventListener('keydown', (event) => {
+  if (handleSlashKey(event)) return;
+  if (event.key === 'Enter' && (event.ctrlKey || event.metaKey)) {
+    event.preventDefault();
+    sendInterrupt();
+    return;
+  }
+  if (event.key === 'Enter' && !event.shiftKey) {
+    event.preventDefault();
+    sendMessage();
+  }
+});
+chatInput.addEventListener('input', onChatInputChanged);
+
+micBtn?.addEventListener('click', toggleMic);
+
+handsFreeBtn?.addEventListener('click', toggleHandsFree);
+
+$('#attach-image').addEventListener('click', () => attachInput.click());
+attachInput.addEventListener('change', () => {
+  addImageFiles([...attachInput.files]);
+  attachInput.value = '';
+});
+chatInput.addEventListener('paste', (event) => {
+  const files = [...(event.clipboardData?.files ?? [])].filter((f) => f.type.startsWith('image/'));
+  if (!files.length) return;
+  event.preventDefault();
+  addImageFiles(files);
+});
+chatForm.addEventListener('dragover', (event) => {
+  event.preventDefault();
+  chatForm.classList.add('dragging');
+});
+chatForm.addEventListener('dragleave', () => chatForm.classList.remove('dragging'));
+chatForm.addEventListener('drop', (event) => {
+  const files = [...(event.dataTransfer?.files ?? [])].filter((f) => f.type.startsWith('image/'));
+  if (!files.length) return;
+  event.preventDefault();
+  chatForm.classList.remove('dragging');
+  addImageFiles(files);
+});
+
+chatInput.addEventListener('blur', () => setTimeout(hideSlashMenu, 120));
+
+$('#folder-new').addEventListener('click', openCreateFolder);
+$('#folder-new-cancel').addEventListener('click', closeCreateFolder);
+$('#folder-new-create').addEventListener('click', createFolder);
+folderNewName.addEventListener('keydown', (event) => {
+  if (event.key === 'Enter') {
+    event.preventDefault();
+    createFolder();
+  } else if (event.key === 'Escape') {
+    event.preventDefault();
+    closeCreateFolder();
+  }
+});
+$('#folder-roots').addEventListener('click', () => loadFolders(''));
+$('#folder-home').addEventListener('click', () => loadFolders(state.home || ''));
+$('#folder-close').addEventListener('click', closeFolderPicker);
+$('#folder-cancel').addEventListener('click', () => {
+  state.pendingInput = null;
+  closeFolderPicker();
+});
+$('#folder-up').addEventListener('click', () => loadFolders(folderParent ?? ''));
+$('#folder-use').addEventListener('click', useFolder);
+$('#folder-go').addEventListener('click', gotoFolder);
+folderGoto.addEventListener('input', filterFolders);
+folderGoto.addEventListener('keydown', (event) => {
+  if (event.key === 'Enter') {
+    event.preventDefault();
+    gotoFolder();
+  }
+});
+folderList.addEventListener('keydown', (event) => {
+  if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') return;
+  const items = [...folderList.querySelectorAll('.folder-item')];
+  if (!items.length) return;
+  event.preventDefault();
+  const current = items.indexOf(document.activeElement);
+  const next = event.key === 'ArrowDown' ? Math.min(items.length - 1, current + 1) : Math.max(0, current - 1);
+  items[current === -1 ? 0 : next].focus();
+});
+folderModal.addEventListener('click', (event) => {
+  if (event.target === folderModal) {
+    state.pendingInput = null;
+    closeFolderPicker();
+  }
+});
+
+$('#provider-new').addEventListener('click', () => openProviderForm());
+$('#pf-cancel').addEventListener('click', closeProviderForm);
+$('#pf-close').addEventListener('click', closeProviderForm);
+$('#pf-test').addEventListener('click', testProvider);
+providerForm.addEventListener('submit', submitProvider);
+providerModal.addEventListener('click', (event) => {
+  if (event.target === providerModal) closeProviderForm();
+});
+
+wireAjustesNav();
+
+$('#limits-save')?.addEventListener('click', async () => {
+  const body = {
+    maxRounds: Math.max(0, Number(limitsRoundsEl?.value) || 0),
+    maxTokens: Math.max(0, Number(limitsTokensEl?.value) || 0),
+    maxDurationMs: Math.max(0, Math.round((Number(limitsDurationEl?.value) || 0) * 1000)),
+    maxOutputTokens: Math.max(0, Number(limitsOutputEl?.value) || 0),
+    promptCaching: Boolean(limitsCachingEl?.checked),
+  };
+  try {
+    await api('/api/settings', { method: 'PUT', body });
+    refreshLimits();
+    setStatus('#limits-msg', 'guardado', 'ok');
+  } catch (error) {
+    setStatus('#limits-msg', error.message, 'err');
+  }
+});
+
+$('#tr-save')?.addEventListener('click', submitTranscribe);
+trModeEl?.addEventListener('change', syncTranscribeMode);
+
+trTestBtn?.addEventListener('click', toggleTrTest);
+
+perfil.add?.addEventListener('click', () => addPerfilFieldRow());
+perfil.save?.addEventListener('click', submitProfile);
+
+if (mcpListEl) {
+  $('#mcp-new').addEventListener('click', () => openMcpForm());
+  $('#mcp-import-btn')?.addEventListener('click', importMcp);
+  $('#mcp-import')?.addEventListener('keydown', (event) => {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      importMcp();
+    }
+  });
+  $('#skill-import-btn')?.addEventListener('click', importSkill);
+  $('#skill-import')?.addEventListener('keydown', (event) => {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      importSkill();
+    }
+  });
+  $('#mcp-search-btn')?.addEventListener('click', searchMcp);
+  $('#mcp-search')?.addEventListener('keydown', (event) => {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      searchMcp();
+    }
+  });
+  $('#skill-search-btn')?.addEventListener('click', searchSkills);
+  $('#skill-search')?.addEventListener('keydown', (event) => {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      searchSkills();
+    }
+  });
+  refreshMcpCatalog();
+  refreshSkillCatalog();
+  $('#mcp-reload').addEventListener('click', () => refreshMcp({ connect: true }));
+  mcpModeEl?.addEventListener('change', async () => {
+    try {
+      await api('/api/settings', { method: 'PUT', body: { mcpMode: mcpModeEl.value } });
+      await refreshMcp({ connect: true });
+    } catch (error) {
+      toast(error.message);
+    }
+  });
+  const savePinnedMcp = async () => {
+    try {
+      await api('/api/settings', { method: 'PUT', body: { mcpPinned: String(mcpPinnedEl.value || '') } });
+      await refreshMcp({ connect: true });
+    } catch (error) {
+      toast(error.message);
+    }
+  };
+  $('#mcp-pinned-save')?.addEventListener('click', savePinnedMcp);
+  mcpPinnedEl?.addEventListener('keydown', (event) => {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      savePinnedMcp();
+    }
+  });
+  $('#tg-save')?.addEventListener('click', submitChannel);
+  $('#tg-test')?.addEventListener('click', testChannel);
+$('#voz-save')?.addEventListener('click', submitVoz);
+$('#voz-test')?.addEventListener('click', testVoz);
+vozRateEl?.addEventListener('input', renderVozSliders);
+vozPitchEl?.addEventListener('input', renderVozSliders);
+$('#asesor-save')?.addEventListener('click', submitAsesor);
+$('#asesor-test')?.addEventListener('click', testAsesor);
+  $('#mcp-close').addEventListener('click', closeMcpForm);
+  $('#mf-cancel').addEventListener('click', closeMcpForm);
+  $('#mf-transport').addEventListener('change', syncMcpFormFields);
+  mcpForm.addEventListener('submit', submitMcp);
+  mcpModal.addEventListener('click', (event) => {
+    if (event.target === mcpModal) closeMcpForm();
+  });
+
+  $('#skill-new').addEventListener('click', () => openSkillForm());
+  $('#skill-close').addEventListener('click', closeSkillForm);
+  $('#sf-cancel').addEventListener('click', closeSkillForm);
+  skillForm.addEventListener('submit', submitSkill);
+  skillModal.addEventListener('click', (event) => {
+    if (event.target === skillModal) closeSkillForm();
+  });
+
+  $('#agent-new')?.addEventListener('click', () => openAgentForm());
+  $('#agent-close')?.addEventListener('click', closeAgentForm);
+  $('#af-cancel')?.addEventListener('click', closeAgentForm);
+  agentForm?.addEventListener('submit', submitAgent);
+  agentModal?.addEventListener('click', (event) => {
+    if (event.target === agentModal) closeAgentForm();
+  });
+
+  $('#memory-new')?.addEventListener('click', () => openMemoryForm());
+  $('#memory-close')?.addEventListener('click', closeMemoryForm);
+  $('#mem-cancel')?.addEventListener('click', closeMemoryForm);
+  memoryForm?.addEventListener('submit', submitMemory);
+  $('#memory-save-index')?.addEventListener('click', saveMemoryIndex);
+  memoryModal?.addEventListener('click', (event) => {
+    if (event.target === memoryModal) closeMemoryForm();
+  });
+
+  $('#sc-type')?.addEventListener('change', scheduleTypeFields);
+  $('#schedule-new')?.addEventListener('click', () => openScheduleForm());
+  $('#schedule-close')?.addEventListener('click', closeScheduleForm);
+  $('#sc-cancel')?.addEventListener('click', closeScheduleForm);
+  scheduleForm?.addEventListener('submit', submitSchedule);
+  scheduleModal?.addEventListener('click', (event) => {
+    if (event.target === scheduleModal) closeScheduleForm();
+  });
+}
+
+evalTasks.value = [
+  '{"id":"math","input":"¿Cuánto es 17 * 23? Respondé solo el número.","expect":{"equals":"391"}}',
+  '{"id":"regex","input":"Escribí una oración que contenga un número.","expect":{"regex":"\\\\d"}}',
+].join('\n');
+
+evalRunBtn.addEventListener('click', runEval);
+
+$('#runs-refresh').addEventListener('click', refreshRuns);
+
+$('#file-preview-toggle')?.addEventListener('click', async () => {
+  const toggle = $('#file-preview-toggle');
+  const code = $('#file-code');
+  const stage = $('#file-stage');
+  const frame = $('#file-frame');
+  const render = $('#file-render');
+  const device = $('#file-device');
+  const maxButton = $('#file-max');
+  const current = filePreviewState.current;
+  if (!current) return;
+
+  filePreviewState.open = !filePreviewState.open;
+  const off = () => {
+    toggle.textContent = 'vista previa';
+    code.hidden = false;
+    stage.hidden = true;
+    render.hidden = true;
+    device.hidden = true;
+    maxButton.hidden = false;
+    $('#file-modal').classList.remove('preview-maximized');
+  };
+  if (!filePreviewState.open) return off();
+
+  if (filePreviewState.kind === 'markdown') {
+    render.innerHTML = renderMarkdown(filePreviewState.content);
+    code.hidden = true;
+    stage.hidden = true;
+    render.hidden = false;
+    device.hidden = true;
+    maxButton.hidden = false;
+    toggle.textContent = 'ver código';
+    return;
+  }
+
+  device.hidden = false;
+  maxButton.hidden = false;
+  if (!filePreviewState.loaded) {
+    const data = await api('/api/files/preview', {
+      method: 'POST',
+      body: { root: state.cwd, path: current.relPath },
+    }).catch((error) => ({ error: error.message }));
+    if (data?.error) {
+      setExplorerStatus(data.error, true);
+      filePreviewState.open = false;
+      return off();
+    }
+    frame.src = data.url;
+    filePreviewState.loaded = true;
+    filePreviewTools.applyDevice();
+  }
+  toggle.textContent = 'ver código';
+  code.hidden = true;
+  render.hidden = true;
+  stage.hidden = false;
+});
+
+document.querySelectorAll('.xtab').forEach((tab) => tab.addEventListener('click', () => setExplorerMode(tab.dataset.xp)));
+
+restorePreviewMax = () => previewTools.setMax(false);
+
+$('#preview-open')?.addEventListener('click', () => loadPreview(previewUrlInput.value));
+previewUrlInput?.addEventListener('keydown', (event) => {
+  if (event.key === 'Enter') {
+    event.preventDefault();
+    loadPreview(previewUrlInput.value);
+  }
+});
+previewFrame?.addEventListener('load', () => {
+  if (previewFrame.src) setPreviewStatus(previewFrame.src);
+});
+$('#preview-tunnel')?.addEventListener('click', () => {
+  const match = String(previewUrlInput.value).match(/:(\d+)/);
+  const port = match ? Number(match[1]) : 0;
+  if (!port) return setPreviewStatus('Poné una URL con puerto (p. ej. http://127.0.0.1:5173).', true);
+  openRemoteTunnel(port);
+});
+$('#preview-close')?.addEventListener('click', async () => {
+  await api('/api/preview/tunnel', { method: 'DELETE' }).catch(() => null);
+  setTunnelUi(null);
+  setPreviewStatus('acceso remoto cerrado.');
+});
+$('#preview-device')?.addEventListener('change', (event) => storage.set(PREVIEW_DEVICE_KEY, event.target.value));
+
+// Restaurar lo tipeado y el tamano elegido: en la tablet la pagina se recarga
+// sola (iOS la descarta en background) y antes se perdia todo el estado.
+(function restorePreview() {
+  const savedDevice = storage.get(PREVIEW_DEVICE_KEY, '');
+  if (savedDevice && $('#preview-device')) $('#preview-device').value = savedDevice;
+  previewTools.applyDevice();
+  const savedUrl = storage.get(PREVIEW_URL_KEY, '');
+  if (savedUrl) previewUrlInput.value = savedUrl;
+  syncPreviewTunnel({ load: true });
+})();
+
+$('#procs-detect')?.addEventListener('click', detectProcs);
+
+gitFilterEl?.addEventListener('input', () => {
+  if (explorerMode === 'git' && gitEntries.length) renderGitList();
+});
+
+$('#explorer-handle')?.addEventListener('click', () => setExplorerOpen(true));
+$('#explorer-close').addEventListener('click', () => setExplorerOpen(false));
+$('#explorer-refresh').addEventListener('click', refreshExplorerMode);
+explorerFilter.addEventListener('input', applyTreeFilter);
+$('#file-close').addEventListener('click', () => $('#file-modal').close());
+$('#file-modal').addEventListener('click', (event) => {
+  if (event.target === $('#file-modal')) $('#file-modal').close();
+});
+$('#git-close')?.addEventListener('click', () => gitModalEl?.close());
+gitModalEl?.addEventListener('click', (event) => {
+  if (event.target === gitModalEl) gitModalEl.close();
+});
+
+try {
+  setExplorerOpen(storage.get('tamnora-explorer-open') === '1');
+} catch {
+  setExplorerOpen(false);
+}
+
+$('#update-run')?.addEventListener('click', runUpdate);
+$('#update-later')?.addEventListener('click', dismissUpdate);
+
+if (brandVerEl) {
+  brandVerEl.title = 'buscar actualización';
+  brandVerEl.classList.add('ver-action');
+  brandVerEl.addEventListener('click', forceUpdateCheck);
+}
+
+/* --- boot ---------------------------------------------------------------- */
+
 async function boot() {
-  wireModelPicker();
-  const auth = await api('/api/auth/me').catch(() => null);
-  if (auth?.enabled && !auth.authenticated) {
-    location.replace('/landing');
-    return;
-  }
-  setCsrfToken(auth?.csrf || '');
-  document.documentElement.dataset.auth = 'ok';
-
-  const health = await api('/api/health').catch(() => null);
-  if (health?.cwd) {
-    document.title = `Tamnora Console · ${health.cwd}`;
-    setCwd(health.cwd);
-  }
-  if (health?.home) state.home = health.home;
-  if (health?.version) {
-    const ver = document.querySelector('.brand .ver');
-    if (ver) ver.textContent = `v${health.version}`;
-  }
-  refreshUpdate();
-  await refreshProviders();
-  await loadModes();
-  await loadModels();
-  await refreshTranscribe();
-  // La config de voz se carga al boot (sin `await`, para no bloquear con el
-  // fetch del catálogo de voces): si no, `voz.settings.enabled` queda en el
-  // default `false` hasta abrir Ajustes y la narración no arranca al entrar.
-  refreshVoz();
-  await reconcile();
-  await restoreTabs();
-  renderAlertSignals();
-  followEvents();
-  watchLifecycle();
-  // Latido de presencia: mantiene frescas las pestañas abiertas (TTL del server).
-  setInterval(sendPresence, 30000);
-}
-boot();
+  wireModelPicker();
+  const auth = await api('/api/auth/me').catch(() => null);
+  if (auth?.enabled && !auth.authenticated) {
+    location.replace('/landing');
+    return;
+  }
+  setCsrfToken(auth?.csrf || '');
+  document.documentElement.dataset.auth = 'ok';
+
+  const health = await api('/api/health').catch(() => null);
+  if (health?.cwd) {
+    document.title = `Tamnora Console · ${health.cwd}`;
+    setCwd(health.cwd);
+  }
+  if (health?.home) state.home = health.home;
+  if (health?.version) {
+    const ver = document.querySelector('.brand .ver');
+    if (ver) ver.textContent = `v${health.version}`;
+  }
+  refreshUpdate();
+  await refreshProviders();
+  await loadModes();
+  await loadModels();
+  await refreshTranscribe();
+  // La config de voz se carga al boot (sin `await`, para no bloquear con el
+  // fetch del catálogo de voces): si no, `voz.settings.enabled` queda en el
+  // default `false` hasta abrir Ajustes y la narración no arranca al entrar.
+  refreshVoz();
+  await reconcile();
+  await restoreTabs();
+  renderAlertSignals();
+  followEvents();
+  watchLifecycle();
+  // Latido de presencia: mantiene frescas las pestañas abiertas (TTL del server).
+  setInterval(sendPresence, 30000);
+}
+boot();