@fraziym/axoniz 0.1.0

package/dist/web/static/app.js

@@ -0,0 +1,4121 @@
+// ============================================
+// Zero UI — Main Application Orchestrator
+// ES6 module — entry point, no exports (wires all modules together)
+// ============================================
+import Storage from './js/storage.js';
+import uiModule from './js/ui.js';
+import fileHandlerModule from './js/fileHandler.js';
+import modelsModule from './js/models.js';
+import ragModule from './js/rag.js';
+import presetsModule from './js/presets.js';
+import searchModule from './js/search.js';
+import chatModule from './js/chat.js';
+import compareModule from './js/compare/index.js';
+import documentModule from './js/document.js';
+import searchChatModule from './js/search-chat.js';
+import markdownModule from './js/markdown.js';
+import chatRenderer from './js/chatRenderer.js';
+import sessionModule from './js/sessions.js';
+import memoryModule from './js/memory.js';
+import voiceRecorderModule from './js/voiceRecorder.js';
+import censorModule from './js/censor.js';
+import galleryModule from './js/gallery.js';
+import tasksModule from './js/tasks.js';
+import calendarModule from './js/calendar.js';
+import notesModule from './js/notes.js';
+import adminModule from './js/admin.js';
+import settingsModule from './js/settings.js';
+// Eagerly bind unified minimize/restore behavior across all tool modals.
+import './js/modalManager.js';
+// Desktop window tiling — drag a modal near an edge/corner to snap.
+import './js/tileManager.js';
+import themeModule from './js/theme.js';
+// IMPORTANT: import cookbook.js with NO ?v= query — the same plain specifier
+// every other importer (cookbook-hwfit.js / cookbook-diagnosis.js) uses. A query
+// mismatch makes the browser load cookbook.js twice as separate modules (two
+// _envState objects), which broke server selection. Keep all cookbook imports
+// unversioned so this can't recur.
+import cookbookModule from './js/cookbook.js';
+import groupModule from './js/group.js';
+import * as researchPanelModule from './js/research/panel.js';
+import ttsModule from './js/tts-ai.js';
+import spinnerModule from './js/spinner.js';
+import { initKeyboardShortcuts } from './js/keyboard-shortcuts.js';
+import { initSidebarLayout, syncRailSide } from './js/sidebar-layout.js';
+import { initSectionCollapse, initSectionDrag } from './js/section-management.js';
+
+const API_BASE = window.location.origin;
+window.themeModule = themeModule;
+window.sessionModule = sessionModule;
+window.uiModule = uiModule;
+window.adminModule = adminModule;
+window.cookbookModule = cookbookModule;
+
+// Redirect to login on 401 from any fetch
+const _origFetch = window.fetch;
+window.fetch = async function(...args) {
+  const res = await _origFetch.apply(this, args);
+  if (res.status === 401 && !String(args[0]).includes('/api/auth/')) {
+    window.location.href = '/login';
+  }
+  return res;
+};
+
+// Search settings
+
+
+const el = uiModule.el;
+
+// Default chat config — refreshed on every new-chat action so settings
+// changes take effect immediately (previously cached once at page load and
+// went stale when the user changed their default model).
+let _defaultChat = null;
+async function _refreshDefaultChat() {
+  try {
+    const d = await (await fetch('/api/default-chat')).json();
+    if (d && d.endpoint_url && d.model) {
+      _defaultChat = d;
+      try { window.__zeroDefaultChat = d; } catch (_) {}
+      return d;
+    }
+  } catch (_) {}
+  return null;
+}
+// Prime the cache once at load for initial paint paths that read _defaultChat
+// synchronously; later reads should call _refreshDefaultChat() first.
+_refreshDefaultChat();
+
+async function _createDirectChatFromPreferredModel() {
+  if (!sessionModule) return false;
+
+  const pending = sessionModule.getPendingChat && sessionModule.getPendingChat();
+  if (pending && pending.url && pending.modelId) {
+    sessionModule.createDirectChat(pending.url, pending.modelId, pending.endpointId);
+    return true;
+  }
+
+  const sessions = sessionModule.getSessions();
+  const currentId = sessionModule.getCurrentSessionId();
+  const current = sessions.find(s => s.id === currentId);
+  if (current && current.endpoint_url && current.model) {
+    sessionModule.createDirectChat(current.endpoint_url, current.model, current.endpoint_id);
+    return true;
+  }
+
+  const dc = await _refreshDefaultChat();
+  if (dc) {
+    sessionModule.createDirectChat(dc.endpoint_url, dc.model, dc.endpoint_id);
+    return true;
+  }
+
+  const withModel = sessions.filter(s => s.endpoint_url && s.model);
+  if (withModel.length > 0) {
+    const last = withModel[0]; // sessions are sorted by recent
+    sessionModule.createDirectChat(last.endpoint_url, last.model, last.endpoint_id);
+    return true;
+  }
+
+  return false;
+}
+
+// ============================================
+// EVENT LISTENERS INITIALIZATION
+// ============================================
+function initializeEventListeners() {
+  // Chat form submission
+//  document.getElementById('chat-form').addEventListener('submit', chatModule.handleChatSubmit);
+
+  // File attachments (inside overflow menu)
+  const _overflowAttach = el('overflow-attach-btn');
+  if (_overflowAttach) _overflowAttach.addEventListener('click', fileHandlerModule.openPicker);
+  el('file-input').addEventListener('change', (e)=>{
+    for (const f of e.target.files) fileHandlerModule.addFiles([f]);
+    fileHandlerModule.renderAttachStrip();
+    // Refocus textarea after file picker closes (mobile keyboard)
+    const ta = el('message');
+    if (ta) setTimeout(() => ta.focus(), 100);
+  });
+
+  // Paste handler
+  window.addEventListener('paste', async (e)=>{
+    if (!e.clipboardData) return;
+    let changed = false;
+    for (const item of e.clipboardData.items){
+      if (item.kind === 'file'){
+        const f = item.getAsFile();
+        if (f) {
+          fileHandlerModule.addFiles([f]);
+          changed = true;
+        }
+      }
+    }
+    if (changed) fileHandlerModule.renderAttachStrip();
+  });
+
+  // Message count in the header — recount on any DOM change in
+  // #chat-history and write "· N msgs" next to the title. Counts top-
+  // level .msg elements (one per user/assistant turn); excludes the
+  // welcome screen since it isn't inside chat-history.
+  const _metaCountEl = el('current-meta-count');
+  const _chatHistEl = el('chat-history');
+  if (_metaCountEl && _chatHistEl) {
+    let _countScheduled = false;
+    const _updateMsgCount = () => {
+      _countScheduled = false;
+      const n = _chatHistEl.querySelectorAll(':scope > .msg').length;
+      _metaCountEl.textContent = n ? `· ${n} msg${n === 1 ? '' : 's'}` : '';
+    };
+    const _scheduleCount = () => {
+      if (_countScheduled) return;
+      _countScheduled = true;
+      requestAnimationFrame(_updateMsgCount);
+    };
+    new MutationObserver(_scheduleCount).observe(_chatHistEl, { childList: true });
+    _updateMsgCount();
+  }
+
+  // Scrolling
+  el('chat-history').addEventListener('scroll', uiModule.debounce(() => {
+    const box = el('chat-history');
+    const atBottom = box.scrollHeight - box.scrollTop - box.clientHeight < 80;
+    uiModule.setAutoScroll(atBottom);
+  }, 100));
+  // Close all footer popups immediately on any scroll
+  el('chat-history').addEventListener('scroll', () => {
+    document.querySelectorAll('.ctx-popup, .memory-used-detail, .msg-overflow-menu').forEach(p => p.remove());
+    document.querySelectorAll('.memory-used-pill').forEach(p => { p._openDetail = null; });
+  }, { passive: true });
+
+  el('chat-history').addEventListener('wheel', (e) => {
+    // Only disable auto-scroll when user scrolls UP (deltaY < 0)
+    if (e.deltaY < 0) uiModule.setAutoScroll(false);
+  });
+  let _touchThrottled = false;
+  el('chat-history').addEventListener('touchmove', () => {
+    if (_touchThrottled) return;
+    _touchThrottled = true;
+    uiModule.setAutoScroll(false);
+    requestAnimationFrame(() => { _touchThrottled = false; });
+  }, { passive: true });
+
+  // Internal #session-id links from AI search results
+  el('chat-history').addEventListener('click', (e) => {
+    const link = e.target.closest('a.chat-link');
+    if (!link) return;
+    const href = link.getAttribute('href');
+    if (href && href.startsWith('#') && sessionModule) {
+      e.preventDefault();
+      sessionModule.selectSession(href.slice(1));
+    }
+  });
+
+  // Export dropdown button
+  const exportDlBtn = el('export-dl-btn');
+  // ── Unified popup dismissal ──
+  // Lightweight popups (header dropdowns, kebab menus, pickers) should vanish
+  // on any "other action" — opening the sidebar, opening a tool window, etc.
+  // Each popup used to wire its own outside-click/Escape close but missed
+  // non-click actions. closeAllPopups() centralizes it: toggled menus drop
+  // their `.open`; ephemeral body-appended menus are removed. Full modals/
+  // windows are deliberately NOT touched here — those close via their own
+  // controls.
+  window.closeAllPopups = function closeAllPopups(except) {
+    document.querySelectorAll(
+      '.export-dropdown-menu.open, .overflow-menu.open, .model-picker-menu.open, .doc-overflow-menu.open'
+    ).forEach(m => { if (m !== except) m.classList.remove('open'); });
+    document.querySelectorAll(
+      '.skill-kebab-menu, .note-reminder-menu, .task-dropdown, .doclib-card-dropdown, .email-card-dropdown, .msg-overflow-menu'
+    ).forEach(m => { if (m !== except) m.remove(); });
+  };
+  // Window-opening / nav controls (rail buttons, sidebar tool rows + session
+  // rows, section headers) count as "other actions" — dismiss popups when one
+  // is clicked. Bubble phase so it runs after the control's own handler (the
+  // window is already opening; we just clear stray popups). Popup triggers
+  // themselves aren't these selectors, so toggles aren't broken.
+  document.addEventListener('click', (e) => {
+    if (e.target.closest('.icon-rail-btn, #sidebar .list-item, .section-header-flex')) {
+      window.closeAllPopups();
+    }
+  });
+
+  const exportMenu = el('export-dropdown-menu');
+  if (exportDlBtn && exportMenu) {
+    exportDlBtn.addEventListener('click', (e) => {
+      e.stopPropagation();
+      if (exportMenu.classList.contains('open')) {
+        exportMenu.classList.remove('open');
+      } else {
+        // Move menu to body so it's not affected by ancestor transforms
+        if (exportMenu.parentElement !== document.body) document.body.appendChild(exportMenu);
+        const rect = exportDlBtn.getBoundingClientRect();
+        exportMenu.style.top = (rect.bottom + 4) + 'px';
+        exportMenu.style.left = 'auto';
+        exportMenu.style.right = (window.innerWidth - rect.right) + 'px';
+        exportMenu.classList.add('open');
+      }
+    });
+    document.addEventListener('click', () => exportMenu.classList.remove('open'));
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape' && exportMenu.classList.contains('open')) {
+        exportMenu.classList.remove('open');
+      }
+    });
+    // Opening the sidebar should dismiss any open popup. Many code paths open
+    // the sidebar (toggle button, swipe, keyboard, rail), so watch its class
+    // for a hidden→visible transition rather than hooking each one.
+    const _sidebarEl = el('sidebar');
+    if (_sidebarEl) {
+      let _wasHidden = _sidebarEl.classList.contains('hidden');
+      new MutationObserver(() => {
+        const nowHidden = _sidebarEl.classList.contains('hidden');
+        if (_wasHidden && !nowHidden) window.closeAllPopups();
+        _wasHidden = nowHidden;
+      }).observe(_sidebarEl, { attributes: true, attributeFilter: ['class'] });
+    }
+    // Clicking session name also opens dropdown
+    const currentMeta = el('current-meta');
+    if (currentMeta) {
+      currentMeta.style.cursor = 'pointer';
+      currentMeta.addEventListener('click', (e) => {
+        e.stopPropagation();
+        exportDlBtn.click();
+      });
+    }
+  }
+
+  // Serialize the current chat history into a plain-text transcript.
+  // Includes user messages, assistant rounds, and agent tool calls in DOM order.
+  function _serializeChatTranscript() {
+    const box = document.getElementById('chat-history');
+    if (!box) return '';
+    const parts = [];
+    for (const child of box.children) {
+      if (child.classList?.contains('msg')) {
+        const isUser = child.classList.contains('msg-user');
+        let label;
+        if (isUser) {
+          label = 'User';
+        } else {
+          const roleEl = child.querySelector('.role');
+          const ts = roleEl?.querySelector('.role-timestamp');
+          let raw = roleEl ? roleEl.textContent : '';
+          if (ts) raw = raw.replace(ts.textContent, '');
+          label = (raw || '').trim() || 'Assistant';
+        }
+        const body = child.querySelector('.body');
+        // Prefer dataset.raw (original markdown) over innerText (rendered HTML as text)
+        // to avoid extra newlines and formatting artifacts.
+        const text = body ? (body.dataset.raw || body.innerText || body.textContent || '').trim() : '';
+        if (text) parts.push(`${label}: ${text}`);
+      } else if (child.classList?.contains('agent-thread')) {
+        const lines = ['[Tool calls]'];
+        for (const n of child.querySelectorAll('.agent-thread-node')) {
+          const tool = n.querySelector('.agent-thread-tool')?.textContent?.trim() || 'tool';
+          const cmd = n.querySelector('.agent-thread-cmd')?.textContent?.trim() || '';
+          const output = n.querySelector('.agent-tool-output pre')?.textContent?.trim() || '';
+          const status = n.classList.contains('error') ? 'failed' : 'done';
+          let line = `- ${tool} [${status}]`;
+          if (cmd) line += `\n  cmd: ${cmd}`;
+          if (output) {
+            const truncated = output.length > 2000 ? output.slice(0, 2000) + '…' : output;
+            line += `\n  out: ${truncated}`;
+          }
+          lines.push(line);
+        }
+        parts.push(lines.join('\n'));
+      }
+    }
+    return parts.join('\n\n');
+  }
+
+  // Export: Copy all messages
+  const exportCopyBtn = el('export-copy-btn');
+  if (exportCopyBtn) {
+    exportCopyBtn.addEventListener('click', async (e) => {
+      e.stopPropagation();
+      exportMenu.classList.remove('open');
+      const transcript = _serializeChatTranscript();
+      // A new/empty chat has nothing to copy — don't write an empty string and
+      // falsely report "Copied".
+      if (!transcript.trim()) { uiModule.showToast('Nothing to copy yet'); return; }
+      await uiModule.copyToClipboard(transcript);
+    });
+  }
+
+  // Export: PDF
+  const exportPdfBtn = el('export-pdf-btn');
+  if (exportPdfBtn) {
+    exportPdfBtn.addEventListener('click', (e) => {
+      e.stopPropagation();
+      exportMenu.classList.remove('open');
+      const meta = sessionModule.getSessions().find(s => s.id === sessionModule.getCurrentSessionId());
+      const sessionName = meta ? meta.name : 'Zero Chat';
+      const originalTitle = document.title;
+      document.title = sessionName;
+      const chatHistory = document.getElementById('chat-history');
+      if (chatHistory) chatHistory.dataset.printTitle = sessionName;
+      document.querySelectorAll('#chat-history details:not([open])').forEach(d => {
+        d.setAttribute('open', '');
+        d.dataset.printOpened = '1';
+      });
+      window.print();
+      document.title = originalTitle;
+      document.querySelectorAll('#chat-history details[data-print-opened]').forEach(d => {
+        d.removeAttribute('open');
+        d.removeAttribute('data-print-opened');
+      });
+    });
+  }
+
+  // Export: Save to Docs
+  const exportDocBtn = el('export-doc-btn');
+  if (exportDocBtn) {
+    exportDocBtn.addEventListener('click', async (e) => {
+      e.stopPropagation();
+      exportMenu.classList.remove('open');
+      try {
+        const sessionId = sessionModule.getCurrentSessionId();
+        const texts = _serializeChatTranscript();
+        const meta = sessionModule.getSessions().find(s => s.id === sessionId);
+        const title = meta?.name || 'Untitled';
+        const res = await fetch(`${API_BASE}/api/document`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ session_id: sessionId, title, content: texts }),
+        });
+        if (!res.ok) throw new Error('Failed');
+        const doc = await res.json();
+        if (documentModule) documentModule.loadDocument(doc.id);
+        uiModule.showToast('Saved to documents');
+      } catch (err) {
+        console.error('Save to docs failed:', err);
+        uiModule.showError('Failed to save to documents');
+      }
+    });
+  }
+
+  // Rename session from top bar
+  const exportRenameBtn = el('export-rename-btn');
+  if (exportRenameBtn) {
+    exportRenameBtn.addEventListener('click', (e) => {
+      e.stopPropagation();
+      exportMenu.classList.remove('open');
+      let sid = sessionModule.getCurrentSessionId();
+      // A brand-new chat has no session id yet — still allow renaming if there's
+      // a pending chat (we materialize it on commit so the name sticks).
+      const hasPending = sessionModule.hasPendingChat && sessionModule.hasPendingChat();
+      if (!sid && !hasPending) return;
+      const meta = sid ? sessionModule.getSessions().find(s => s.id === sid) : null;
+      const currentName = meta?.name || '';
+      const metaEl = el('current-meta');
+      if (!metaEl) return;
+
+      // Replace title with an input
+      const input = document.createElement('input');
+      input.type = 'text';
+      input.value = currentName;
+      input.className = 'session-rename-input';
+      input.style.cssText = 'font-size:inherit;background:transparent;border:none;border-bottom:1px solid var(--accent, var(--red));color:var(--fg);outline:none;width:100%;padding:0;';
+      const origText = metaEl.textContent;
+      metaEl.textContent = '';
+      metaEl.appendChild(input);
+      input.focus();
+      input.select();
+
+      const commit = async () => {
+        const newName = input.value.trim();
+        if (newName && newName !== currentName) {
+          // Materialize a pending (new) chat first so it has an id to rename.
+          if (!sid && sessionModule.materializePendingSession) {
+            try { await sessionModule.materializePendingSession(); sid = sessionModule.getCurrentSessionId(); } catch (_) {}
+          }
+          if (!sid) { metaEl.textContent = newName; return; }
+          const fd = new FormData();
+          fd.append('name', newName);
+          await fetch(`${API_BASE}/api/session/${sid}`, { method: 'PATCH', body: fd });
+          const _m = sessionModule.getSessions().find(s => s.id === sid);
+          if (_m) _m.name = newName;
+          metaEl.textContent = newName;
+          uiModule.showToast('Renamed');
+          sessionModule.loadSessions();
+        } else {
+          metaEl.textContent = origText;
+        }
+      };
+      input.addEventListener('blur', commit);
+      input.addEventListener('keydown', (ev) => {
+        if (ev.key === 'Enter') { ev.preventDefault(); input.blur(); }
+        if (ev.key === 'Escape') { input.removeEventListener('blur', commit); metaEl.textContent = origText; }
+      });
+    });
+  }
+
+  // Custom preset modal handlers
+  const closeCustomPreset = el('close-custom-preset');
+  const cancelCustomPreset = el('cancel-custom-preset');
+  const saveCustomPreset = el('save-custom-preset');
+
+  if (closeCustomPreset) {
+    closeCustomPreset.addEventListener('click', () => {
+      el('custom-preset-modal').classList.add('hidden');
+    });
+  }
+
+  if (cancelCustomPreset) {
+    cancelCustomPreset.addEventListener('click', () => {
+      el('custom-preset-modal').classList.add('hidden');
+    });
+  }
+
+  if (saveCustomPreset) {
+    saveCustomPreset.addEventListener('click', async () => {
+      // Skip character save when Group tab is active — group.js handles it
+      const activeTab = document.querySelector('.preset-tab.active');
+      if (activeTab && activeTab.dataset.chartab === 'group') return;
+      await presetsModule.saveCustomPreset(uiModule.showToast, uiModule.showError);
+    });
+  }
+
+  // Settings dropdown removed — items are now inline in sidebar section
+
+  
+
+
+  // Close popups one by one with Escape key (topmost first)
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') {
+      // If a confirm dialog is open, let it handle the Escape
+      const confirmOverlay = document.getElementById('styled-confirm-overlay');
+      if (confirmOverlay && !confirmOverlay.classList.contains('hidden')) return;
+
+      // If editing a memory inline, cancel the edit instead of closing the modal
+      const editingMemory = document.querySelector('.memory-item-editing');
+      if (editingMemory) {
+        if (window.memoryModule) window.memoryModule.renderMemoryList();
+        return;
+      }
+
+      // Priority order: topmost overlay first. Close exactly one per press
+      // so a window stacked on another (e.g. scoreboard over compare) only
+      // dismisses the top one, not both.
+
+      // Scoreboard sits on top of the compare window — close it first.
+      const scoreboardOverlay = document.getElementById('scoreboard-overlay');
+      if (scoreboardOverlay) {
+        scoreboardOverlay.remove();
+        return;
+      }
+
+      if (searchChatModule && searchChatModule.isOpen()) {
+        searchChatModule.closeSearch();
+        return;
+      }
+
+      // Compare model selector
+      const cmpOverlay = document.getElementById('compare-model-overlay');
+      if (cmpOverlay) {
+        cmpOverlay.remove();
+        return;
+      }
+
+      // Theme popup
+      const themeModal = document.getElementById('theme-modal');
+      if (themeModal && !themeModal.classList.contains('hidden')) {
+        themeModule.closePopup();
+        return;
+      }
+
+      // Calendar owns a few inner Escape layers (settings panel, event form,
+      // then the calendar modal itself). Let calendar.js handle those instead
+      // of falling through to unrelated page-level fallbacks like document
+      // panel minimize.
+      const calendarModal = document.getElementById('calendar-modal');
+      if (calendarModal && !calendarModal.classList.contains('hidden') && getComputedStyle(calendarModal).display !== 'none') {
+        return;
+      }
+
+      // Model picker popup — close before opening any modals
+      const modelPickerMenu = document.getElementById('model-picker-menu');
+      if (modelPickerMenu && modelPickerMenu.classList.contains('open')) {
+        modelPickerMenu.classList.remove('open');
+        return;
+      }
+
+      // Close one modal at a time (last in DOM = topmost)
+      // Map modal id → sidebar list-item id to clear active state
+      const modalItemMap = {
+        'cookbook-modal': null,
+        'rename-session-modal': null,
+        'rename-ai-modal': null,
+        'custom-preset-modal': null,
+        'memory-modal': null,
+      };
+
+      // Dynamic modals (removed from DOM on close)
+      const dynamicModals = ['library-modal', 'archive-modal', 'doclib-modal', 'gallery-modal', 'tasks-modal', 'email-lib-modal'];
+      for (const id of dynamicModals) {
+        const m = document.getElementById(id);
+        if (id === 'gallery-modal') {
+          const editor = document.getElementById('gallery-editor-container');
+          const editing = !!window.__galleryEditLive || !!(
+            editor &&
+            getComputedStyle(editor).display !== 'none' &&
+            editor.querySelector('.gallery-editor')
+          );
+          if (editing) {
+            e.preventDefault();
+            e.stopImmediatePropagation();
+            return;
+          }
+        }
+        if (m) { dismissModal(m); return; }
+      }
+
+      for (const modalId of Object.keys(modalItemMap)) {
+        const modal = el(modalId);
+        if (modal && !modal.classList.contains('hidden')) {
+          dismissModal(modal);
+          return;
+        }
+      }
+
+      // No modals/popups open — minimize the document panel if open.
+      // Esc should tab the doc down to a dock chip (same as the chevron),
+      // NOT fully close it — closePanel('down') registers the chip +
+      // Modals.minimize so the doc is preserved and restorable.
+      if (documentModule && documentModule.isPanelOpen()) {
+        // If there's a text selection in the document editor, let Escape clear that first
+        const docTextarea = document.getElementById('doc-editor-textarea');
+        if (docTextarea && docTextarea.selectionStart !== docTextarea.selectionEnd) {
+          return;
+        }
+        documentModule.closePanel('down');
+        return;
+      }
+    }
+  });
+
+  // ── Shared modal dismiss helper ──
+  const _modalSidebarMap = {
+    'memory-modal': null,
+    'theme-modal': null,
+  };
+  const _dynamicModalIds = ['library-modal', 'archive-modal', 'doclib-modal', 'gallery-modal', 'tasks-modal'];
+  function dismissModal(modal) {
+    if (!modal || modal.classList.contains('hidden')) return;
+    if (modal.id === 'gallery-modal') {
+      const editor = document.getElementById('gallery-editor-container');
+      const editing = !!window.__galleryEditLive || !!(
+        editor &&
+        getComputedStyle(editor).display !== 'none' &&
+        editor.querySelector('.gallery-editor')
+      );
+      if (editing) return;
+    }
+    const content = modal.querySelector('.modal-content') || modal.querySelector('#theme-popup');
+    if (content && !content.classList.contains('modal-closing')) {
+      content.classList.remove('sheet-ready');
+      content.style.transform = '';
+      content.style.transition = '';
+      content.classList.add('modal-closing');
+      content.addEventListener('animationend', () => {
+        if (_dynamicModalIds.includes(modal.id)) {
+          modal.remove();
+        } else {
+          modal.classList.add('hidden');
+          content.classList.remove('modal-closing');
+        }
+      }, { once: true });
+      // Fallback in case animationend doesn't fire
+      setTimeout(() => {
+        if (modal.parentElement && !modal.classList.contains('hidden')) {
+          if (_dynamicModalIds.includes(modal.id)) modal.remove();
+          else { modal.classList.add('hidden'); content.classList.remove('modal-closing'); }
+        }
+      }, 250);
+    } else {
+      if (content) content.classList.remove('sheet-ready');
+      if (_dynamicModalIds.includes(modal.id)) modal.remove();
+      else modal.classList.add('hidden');
+    }
+  }
+
+  // Click outside modal content → close modal
+  document.addEventListener('click', (e) => {
+    if (uiModule.isTouchInsideModal()) return; // suppress synthetic events from touch scrolling
+    const modal = e.target.closest('.modal');
+    if (!modal || modal.classList.contains('hidden')) return;
+    if (e.target.closest('.modal-content')) return;
+    dismissModal(modal);
+  });
+
+  // Mobile bottom-sheet swipe-to-dismiss is handled by ui.js (header-only)
+
+  // ── Helper: start a fresh chat (deselect current, clear history, show welcome) ──
+  function _startFreshChat() {
+    try {
+      const prevId = sessionModule && sessionModule.getCurrentSessionId ? sessionModule.getCurrentSessionId() : null;
+      if (chatModule && chatModule.detachCurrentStream) chatModule.detachCurrentStream(prevId);
+      else if (chatModule && chatModule.abortCurrentRequest) chatModule.abortCurrentRequest();
+    } catch (e) {
+      console.warn('fresh chat stream detach failed:', e);
+    }
+    if (sessionModule) sessionModule.setCurrentSessionId(null);
+    const box = el('chat-history');
+    if (box) box.innerHTML = '';
+    if (chatModule && chatModule.showWelcomeScreen) {
+      chatModule.showWelcomeScreen();
+    }
+    // Close document panel if open
+    if (documentModule && documentModule.closePanel) documentModule.closePanel();
+    if (researchPanelModule && researchPanelModule.isOpen()) researchPanelModule.closePanel();
+    // Reset research overflow dot (but don't touch research state — caller manages that)
+    const _overflowRes = el('overflow-research-btn');
+    if (_overflowRes) _overflowRes.classList.remove('active');
+    if (typeof updatePlusDot === 'function') updatePlusDot();
+    // Reset agent mode to Chat
+    const modeToggle = el('agent-mode-toggle');
+    if (modeToggle && modeToggle.checked) { modeToggle.checked = false; modeToggle.dispatchEvent(new Event('change')); }
+    // Clear character/persona
+    if (presetsModule && presetsModule.deactivateCharacter) presetsModule.deactivateCharacter();
+  }
+
+  /** Sync Research indicator button + overflow + tool sidebar active state. */
+  function _syncResearchIndicator(active) {
+    const btn = el('research-toggle-btn');
+    const overflow = el('overflow-research-btn');
+    const toolBtn = el('tool-research-btn');
+    const chk = el('research-toggle');
+    if (btn) {
+      btn.style.display = active ? '' : 'none';
+      btn.classList.toggle('active', active);
+    }
+    // Hide from overflow menu when showing in chatbox (avoid duplicate)
+    if (overflow) {
+      overflow.classList.toggle('active', active);
+      overflow.style.display = active ? 'none' : '';
+    }
+    if (toolBtn) toolBtn.classList.toggle('active', active);
+    if (chk) chk.checked = active;
+    // Research disables shell access
+    const bashChk = el('bash-toggle');
+    const bashBtn = el('bash-toggle-btn');
+    if (active) {
+      if (bashChk && bashChk.checked) {
+        bashChk.checked = false;
+        if (bashBtn) bashBtn.classList.remove('active');
+        saveToolPref('bash', (loadToggleState().mode || 'chat'), false);
+      }
+    }
+    const s = loadToggleState(); s.research = active; saveToggleState(s);
+    updatePlusDot();
+    document.dispatchEvent(new CustomEvent('overflow-state-change'));
+  }
+
+  /** Sync Group Chat indicator button + overflow. */
+  function _syncGroupIndicator(active) {
+    const btn = el('group-toggle-btn');
+    const overflow = el('overflow-group-btn');
+    const chk = el('group-toggle');
+    if (btn) {
+      btn.style.display = active ? '' : 'none';
+      btn.classList.toggle('active', active);
+    }
+    if (overflow) {
+      overflow.classList.toggle('active', active);
+      overflow.style.display = active ? 'none' : '';
+    }
+    if (chk) chk.checked = active;
+    // Hide/show model picker
+    const _mpw = el('model-picker-wrap');
+    if (_mpw) _mpw.style.display = active ? 'none' : '';
+    // Mutual exclusion: group disables research + web search
+    if (active) {
+      _syncResearchIndicator(false);
+      const _webChk = el('web-toggle');
+      if (_webChk && _webChk.checked) {
+        _webChk.checked = false;
+        saveToolPref('web', (loadToggleState().mode || 'chat'), false);
+      }
+    }
+    const s = loadToggleState(); s.group = active; saveToggleState(s);
+    updatePlusDot();
+    document.dispatchEvent(new CustomEvent('overflow-state-change'));
+
+    // Update welcome screen for research mode
+    const ws = el('welcome-screen');
+    const welcomeName = document.querySelector('.welcome-name');
+    const welcomeSub = el('welcome-sub');
+    const tipEl = el('welcome-tip');
+    const _resIco = '<svg class="welcome-boat" style="position:relative;top:0.5px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/><line x1="11" y1="8" x2="11" y2="14"/><line x1="8" y1="11" x2="14" y2="11"/></svg>';
+    if (active) {
+      if (welcomeName) {
+        if (!welcomeName.dataset.researchOrigHtml) welcomeName.dataset.researchOrigHtml = welcomeName.innerHTML;
+        welcomeName.innerHTML = _resIco + 'Deep Research';
+      }
+      if (welcomeSub) {
+        if (!welcomeSub.dataset.researchOrigText) welcomeSub.dataset.researchOrigText = welcomeSub.textContent;
+        welcomeSub.textContent = 'Deep multi-step research with source gathering and synthesis.';
+      }
+      if (tipEl) {
+        if (!tipEl.dataset.researchOrigTip) tipEl.dataset.researchOrigTip = tipEl.textContent;
+        tipEl.textContent = '';
+        tipEl.style.display = 'none';
+      }
+      // Hide Nobody toggle during research mode
+      const _incBtn = el('incognito-btn');
+      if (_incBtn) { _incBtn.dataset.researchOrigDisplay = _incBtn.style.display; _incBtn.style.display = 'none'; }
+      // Close document panel if open
+      if (window.documentModule && window.documentModule.isPanelOpen()) {
+        window.documentModule.closePanel();
+      }
+    } else {
+      if (welcomeName && welcomeName.dataset.researchOrigHtml) {
+        welcomeName.innerHTML = welcomeName.dataset.researchOrigHtml;
+        delete welcomeName.dataset.researchOrigHtml;
+      }
+      if (welcomeSub && welcomeSub.dataset.researchOrigText) {
+        welcomeSub.textContent = welcomeSub.dataset.researchOrigText;
+        delete welcomeSub.dataset.researchOrigText;
+      }
+      if (tipEl && tipEl.dataset.researchOrigTip) {
+        tipEl.textContent = tipEl.dataset.researchOrigTip;
+        tipEl.style.opacity = '';
+        tipEl.style.display = '';
+        delete tipEl.dataset.researchOrigTip;
+      }
+      // Restore Nobody toggle
+      const _incBtn2 = el('incognito-btn');
+      if (_incBtn2 && _incBtn2.dataset.researchOrigDisplay !== undefined) {
+        _incBtn2.style.display = _incBtn2.dataset.researchOrigDisplay;
+        delete _incBtn2.dataset.researchOrigDisplay;
+      }
+    }
+    if (ws) { ws.style.animation = 'none'; ws.offsetHeight; ws.style.animation = 'welcome-enter 0.3s ease-out both'; }
+  }
+
+  // ── Close compare if active (used by all tool/sidebar activations) ──
+  // Returns true if compare was active (page will reload), caller should return early
+  function _closeCompareIfActive() {
+    if (compareModule && compareModule.isActive()) {
+      compareModule.deactivate(true);
+      return true;
+    }
+    return false;
+  }
+
+  // ── Tools section click handlers ──
+  const toolCompareBtn = el('tool-compare-btn');
+  if (toolCompareBtn) {
+    toolCompareBtn.addEventListener('click', () => {
+      if (compareModule) {
+        if (compareModule.isActive()) {
+          // Already active — toggle off
+          compareModule.toggleMode();
+          return;
+        }
+        // Close other exclusive tools before opening compare
+        const resChk = el('research-toggle');
+        if (resChk && resChk.checked) {
+          _syncResearchIndicator(false);
+        }
+        _startFreshChat();
+        compareModule.toggleMode();
+      }
+    });
+  }
+
+  const toolResearchBtn = el('tool-research-btn');
+  if (toolResearchBtn) {
+    toolResearchBtn.addEventListener('click', () => {
+      researchPanelModule.toggle();
+    });
+  }
+
+  // ── Cookbook modal toggle ──
+  const toolCookbookBtn = el('tool-cookbook-btn');
+  if (toolCookbookBtn) {
+    toolCookbookBtn.addEventListener('click', async () => {
+      if (!cookbookModule) return;
+      // Try minimized→restore or open→minimize via the manager first
+      const Modals = await import('./js/modalManager.js');
+      if (!Modals.toggle('cookbook-modal')) {
+        // Not registered yet → fresh open
+        cookbookModule.open();
+      }
+    });
+  }
+
+  // Document library tool button
+  const toolDoclibBtn = el('tool-doclib-btn');
+  if (toolDoclibBtn) {
+    toolDoclibBtn.addEventListener('click', () => {
+      if (_closeCompareIfActive()) return;
+      if (documentModule) {
+        if (documentModule.isLibraryOpen()) {
+          documentModule.closeLibrary();
+        } else {
+          documentModule.openLibrary();
+        }
+      }
+    });
+  }
+
+  // Gallery tool button
+  const toolGalleryBtn = el('tool-gallery-btn');
+  if (toolGalleryBtn) {
+    toolGalleryBtn.addEventListener('click', async () => {
+      if (!galleryModule) return;
+      const Modals = await import('./js/modalManager.js');
+      if (!Modals.toggle('gallery-modal')) {
+        if (galleryModule.isGalleryOpen()) galleryModule.closeGallery();
+        else galleryModule.openGallery();
+      }
+    });
+  }
+
+  // Tasks tool button
+  const toolTasksBtn = el('tool-tasks-btn');
+  if (toolTasksBtn) {
+  // Agents buttons (sidebar + rail)
+  const agentsBtns = [el("rail-agents"), el("tool-agents-btn")].filter(Boolean);
+  agentsBtns.forEach(btn => {
+    btn.addEventListener("click", () => {
+    });
+  });
+    toolTasksBtn.addEventListener('click', () => {
+      if (tasksModule) {
+        tasksModule.isTasksOpen() ? tasksModule.closeTasks() : tasksModule.openTasks();
+      }
+    });
+  }
+
+  // Calendar tool button
+  const toolCalendarBtn = el('tool-calendar-btn');
+  if (toolCalendarBtn) {
+    toolCalendarBtn.addEventListener('click', async () => {
+      if (!calendarModule) return;
+      const Modals = await import('./js/modalManager.js');
+      // toggle returns true when a registered modal was minimized/restored;
+      // returns false when nothing is registered → open fresh.
+      if (!Modals.toggle('calendar-modal')) {
+        if (calendarModule.isCalendarOpen()) calendarModule.closeCalendar();
+        else calendarModule.openCalendar();
+      }
+    });
+  }
+
+  // Notes tool button
+  const toolNotesBtn = el('tool-notes-btn');
+  if (toolNotesBtn) {
+    toolNotesBtn.addEventListener('click', () => {
+      if (notesModule) {
+        notesModule.togglePanel();
+      }
+    });
+  }
+  // Refresh notes due-reminder badge on load and every 5 minutes
+  if (notesModule && notesModule.refreshDueBadge) {
+    notesModule.refreshDueBadge();
+    setInterval(() => notesModule.refreshDueBadge(), 5 * 60 * 1000);
+  }
+
+  // URL-based panel routing — bookmark /calendar, /notes, /cookbook etc
+  // and the matching tool opens automatically on page load.
+  const urlPath = window.location.pathname;
+  // Current width of the always-visible icon rail. The rail is resizable
+  // and hides on narrow viewports, so read it live each call rather than
+  // baking 48px in. Returns 0 when the rail isn't rendered.
+  const _iconRailWidth = () => {
+    const r = document.getElementById('icon-rail');
+    if (!r) return 0;
+    const cs = window.getComputedStyle(r);
+    if (cs.display === 'none' || cs.visibility === 'hidden') return 0;
+    return Math.round(r.getBoundingClientRect().width);
+  };
+  // Collapse the wide sidebar so the icon rail (48px mini sidebar) shows
+  // in its place. The two are mutually exclusive — sidebar-layout.js:57
+  // only displays the rail when `.sidebar.hidden` is set. Used by /email
+  // and /notes route openers so those fullscreen views keep the rail
+  // visible as the user's navigation strip. Records the prior state on
+  // body so a paired close-handler can restore it without overriding a
+  // manual toggle the user did in between.
+  const _collapseSidebarToRail = () => {
+    const sb = document.getElementById('sidebar');
+    const rail = document.getElementById('icon-rail');
+    if (!sb || !rail) return;
+    const wasVisible = !sb.classList.contains('hidden');
+    if (wasVisible) {
+      document.body.dataset.routeCollapsedSidebar = '1';
+    }
+    sb.classList.add('hidden');
+    rail.classList.remove('rail-hidden');
+    // syncRailSide() flips iconRail.style.display based on the classes
+    // we just set. Exposed by sidebar-layout.js on window.
+    try { window.syncRailSide && window.syncRailSide(); } catch (_) {}
+  };
+  // Paired restore: if the route opener collapsed the sidebar, re-expand
+  // it when the fullscreen view closes. Only restores if the user didn't
+  // manually toggle in between (we clear the marker on manual hamburger
+  // clicks via a MutationObserver on `.sidebar.hidden`).
+  const _restoreSidebarIfRouteCollapsed = () => {
+    if (document.body.dataset.routeCollapsedSidebar !== '1') return;
+    delete document.body.dataset.routeCollapsedSidebar;
+    const sb = document.getElementById('sidebar');
+    if (!sb) return;
+    sb.classList.remove('hidden');
+    try { window.syncRailSide && window.syncRailSide(); } catch (_) {}
+  };
+  // Expose so closeEmailLibrary / notes close can call this without
+  // needing to import app.js directly.
+  window._restoreSidebarIfRouteCollapsed = _restoreSidebarIfRouteCollapsed;
+  // Clear the marker the moment the sidebar becomes visible again (user
+  // hamburger click, or our own _restoreSidebarIfRouteCollapsed call —
+  // both endpoints are the same observable state change).
+  {
+    const sb = document.getElementById('sidebar');
+    if (sb && typeof MutationObserver !== 'undefined') {
+      new MutationObserver(() => {
+        if (!sb.classList.contains('hidden')) {
+          delete document.body.dataset.routeCollapsedSidebar;
+        }
+      }).observe(sb, { attributes: true, attributeFilter: ['class'] });
+    }
+  }
+  const _routeOpen = {
+    '/notes':    () => {
+      if (!notesModule) return;
+      _collapseSidebarToRail();
+      notesModule.openPanel();
+      // Promote to fullscreen-with-rail-visible. The pane wires up its own
+      // fullscreen toggle (#notes-fullscreen-toggle); piggyback on that
+      // path so the button icon flips and overflow:hidden gets applied
+      // alongside. Retry on rAF in case the panel mounts a tick later.
+      const _go = () => {
+        const btn = document.getElementById('notes-fullscreen-toggle');
+        const pane = document.querySelector('.notes-pane');
+        if (!pane) return false;
+        if (!pane.classList.contains('notes-pane-fullscreen') && btn) btn.click();
+        return true;
+      };
+      if (!_go()) {
+        requestAnimationFrame(_go);
+        setTimeout(_go, 50);
+        setTimeout(_go, 200);
+      }
+    },
+    '/calendar': () => calendarModule && calendarModule.openCalendar(),
+    '/cookbook': () => document.getElementById('tool-cookbook-btn')?.click(),
+    '/email':    () => {
+      // Collapse the wide sidebar → icon rail (48px) so the user keeps
+      // navigation visible alongside the fullscreen email view.
+      _collapseSidebarToRail();
+      // Spawn a fresh chat first so a reply (or any AI work the user
+      // chains off the email) lives in its own session instead of grafting
+      // onto whatever was last open. The rail button has the full
+      // default-chat / fallback-model resolution logic baked in, so just
+      // delegate to it.
+      try { document.getElementById('rail-new-session')?.click(); } catch (_) {}
+      // The email library is opened by clicking the email section's HEADER
+      // row (.section-header-flex), not the title span. Trigger that, then
+      // snap the modal to fullscreen on the next frame.
+      const hdr = document.querySelector('#email-section .section-header-flex');
+      if (hdr) hdr.click();
+      // The modal is built synchronously inside openEmailLibrary, so a
+      // single frame later it's in the DOM and ready to be flagged.
+      // Fullscreen leaves the icon-rail visible on the left so navigation
+      // stays one click away (per #93). Width = viewport minus rail.
+      // Just add the class — the CSS rule for .email-lib-fullscreen .modal-content
+      // owns all the positioning (with !important so it beats openEmailLibrary's
+      // post-mount centering rAF) and reads the rail width from --icon-rail-w.
+      const _goFullscreen = () => {
+        const modal = document.getElementById('email-lib-modal');
+        if (!modal) return false;
+        modal.classList.add('email-lib-fullscreen');
+        return true;
+      };
+      _goFullscreen();
+      requestAnimationFrame(_goFullscreen);
+      setTimeout(_goFullscreen, 50);
+      setTimeout(_goFullscreen, 200);
+    },
+    '/memory':   () => document.getElementById('tool-memory-btn')?.click(),
+    '/gallery':  () => document.getElementById('tool-gallery-btn')?.click(),
+    '/tasks':    () => document.getElementById('tool-tasks-btn')?.click(),
+    '/library':  () => sessionModule && sessionModule.openLibrary && sessionModule.openLibrary(),
+  };
+  const _opener = _routeOpen[urlPath];
+  // Defer the opener — at this point in init, the modules whose handlers
+  // we trigger (#rail-new-session click handler, the email-section header
+  // click handler in emailInbox, sessionModule's loaded session list) are
+  // still being wired up further down in this same function. Stash the
+  // opener so it runs from sessionModule.loadSessions().finally() below.
+  if (_opener) window._zeroRouteOpener = _opener;
+
+  // Archive browser tool button
+  const toolLibraryBtn = el('tool-library-btn');
+  if (toolLibraryBtn) {
+    toolLibraryBtn.addEventListener('click', () => {
+      if (sessionModule) sessionModule.openLibrary();
+    });
+  }
+
+  // "+" on the Library row → create a new blank document and open it in the
+  // editor (mirrors the email section's compose "+"). stopPropagation so it
+  // doesn't also fire the row's open-library click.
+  const libraryNewDocBtn = el('library-new-doc-btn');
+  if (libraryNewDocBtn) {
+    libraryNewDocBtn.addEventListener('click', async (e) => {
+      e.stopPropagation();
+      try {
+        if (documentModule && documentModule.newDocument) await documentModule.newDocument();
+      } catch (err) {
+        console.error('New document from Library failed:', err);
+        if (uiModule && uiModule.showError) uiModule.showError('Could not create document');
+      }
+    });
+  }
+
+  // Manage Chats — opens Full Library modal (decoupled from Chats accordion toggle)
+  const chatsLibraryBtn = el('chats-library-btn');
+  if (chatsLibraryBtn) {
+    chatsLibraryBtn.addEventListener('click', (e) => {
+      e.stopPropagation();
+      if (sessionModule) sessionModule.openLibrary('chats');
+    });
+  }
+
+  const toolArchiveBtn = el('tool-archive-btn');
+  if (toolArchiveBtn) {
+    toolArchiveBtn.addEventListener('click', () => {
+      if (sessionModule) sessionModule.openLibrary('archive');
+    });
+  }
+
+  const toolThemeBtn = el('tool-theme-btn');
+  if (toolThemeBtn) {
+    toolThemeBtn.addEventListener('click', () => {
+      const tm = document.getElementById('theme-modal');
+      if (tm) tm.classList.remove('hidden');
+    });
+  }
+
+  // Sidebar toggle
+  const toggleSidebarOption = el('toggle-sidebar-option');
+  if (toggleSidebarOption) {
+    toggleSidebarOption.addEventListener('click', () => {
+      const sidebar = el('sidebar');
+      sidebar.classList.toggle('hidden');
+    });
+  }
+
+  // Sidebar user bar — settings, admin, profile
+  const userBarSettings = el('user-bar-settings');
+  const userBarProfile = el('user-bar-profile');
+  const userBarAdmin = el('user-bar-admin');
+
+  if (userBarSettings) {
+    userBarSettings.addEventListener('click', () => settingsModule.open());
+  }
+  if (userBarProfile) {
+    // Clicking the user (avatar + name) jumps straight to the Account tab
+    // instead of landing on whatever was last selected.
+    userBarProfile.addEventListener('click', () => settingsModule.open('account'));
+  }
+  if (userBarAdmin) {
+    userBarAdmin.addEventListener('click', () => adminModule.open());
+  }
+
+  // Fetch auth status — populate user bar and show admin button if admin
+  fetch(`${API_BASE}/api/auth/status`, { credentials: 'same-origin' })
+    .then(r => r.json())
+    .then(d => {
+      window._isAdmin = !!d.is_admin;
+      if (d.is_admin && userBarAdmin) userBarAdmin.style.display = '';
+      const userBarName = el('user-bar-name');
+      const userBarAvatar = el('user-bar-avatar');
+      if (userBarName && d.username) {
+        let displayName = d.username;
+        // Mask email addresses
+        if (displayName.includes('@')) {
+          const [local, domain] = displayName.split('@');
+          const ext = domain.includes('.') ? domain.slice(domain.lastIndexOf('.')) : '';
+          displayName = local.charAt(0) + '•••@••••' + ext;
+        }
+        userBarName.textContent = displayName;
+        if (userBarAvatar) userBarAvatar.textContent = d.username.charAt(0).toUpperCase();
+      }
+      // Apply per-user privilege restrictions
+      if (d.privileges) {
+        window._userPrivileges = d.privileges;
+        const p = d.privileges;
+        // Hide agent mode toggle
+        if (!p.can_use_agent) {
+          const modeToggle = document.getElementById('mode-toggle');
+          if (modeToggle) modeToggle.closest('.chat-input-toggle')?.style.setProperty('display', 'none');
+        }
+        // Hide bash toggle
+        if (!p.can_use_bash) {
+          const bashToggle = document.getElementById('bash-toggle');
+          if (bashToggle) bashToggle.closest('.chat-input-toggle')?.style.setProperty('display', 'none');
+          const bashBtn = document.getElementById('tool-bash-btn');
+          if (bashBtn) bashBtn.style.display = 'none';
+        }
+        // Hide document button
+        if (!p.can_use_documents) {
+          const docBtn = document.getElementById('overflow-doc-btn');
+          if (docBtn) docBtn.style.display = 'none';
+          const docInd = document.getElementById('doc-indicator-btn');
+          if (docInd) docInd.style.display = 'none';
+        }
+        // Hide research toggle
+        if (!p.can_use_research) {
+          const resBtn = document.getElementById('research-toggle-btn');
+          if (resBtn) resBtn.style.display = 'none';
+          const resOverflow = document.getElementById('overflow-research-btn');
+          if (resOverflow) resOverflow.style.display = 'none';
+        }
+        // Hide image generation options
+        if (!p.can_generate_images) {
+          const imgBtn = document.getElementById('tool-image-btn');
+          if (imgBtn) imgBtn.style.display = 'none';
+        }
+      }
+    })
+    .catch(() => {});
+
+  // Session sort dropdown
+  const sortBtn = el('session-sort-btn');
+  const sortDropdown = el('session-sort-dropdown');
+  if (sortBtn && sortDropdown) {
+    sortBtn.addEventListener('click', (e) => {
+      e.stopPropagation();
+      sortDropdown.style.display = sortDropdown.style.display === 'block' ? 'none' : 'block';
+    });
+    document.addEventListener('click', () => { sortDropdown.style.display = 'none'; });
+    sortDropdown.addEventListener('click', (e) => e.stopPropagation());
+
+    // Sort mode options (newest, oldest, last active) — toggleable
+    sortDropdown.querySelectorAll('.sort-option').forEach(opt => {
+      opt.addEventListener('click', () => {
+        const mode = opt.dataset.sort;
+        const current = sessionModule.getSortMode();
+        // Toggle: clicking the active sort reverts to manual
+        if (current === mode) {
+          sessionModule.setSortMode(null);
+          sortDropdown.style.display = 'none';
+          uiModule.showToast('Manual order');
+        } else {
+          sessionModule.setSortMode(mode);
+          sortDropdown.style.display = 'none';
+          uiModule.showToast(`Sorted: ${opt.textContent.trim().toLowerCase()}`);
+        }
+        _syncSortChecks();
+      });
+    });
+
+    // Sync checkmarks on sort options
+    function _syncSortChecks() {
+      const current = sessionModule.getSortMode();
+      sortDropdown.querySelectorAll('.sort-option').forEach(o => {
+        const check = o.querySelector('.sort-check') || document.createElement('span');
+        check.className = 'sort-check';
+        check.style.cssText = 'float:right;font-size:20px;line-height:1;position:relative;top:3px;color:var(--accent, var(--red));opacity:' + (o.dataset.sort === current ? '1' : '0');
+        check.textContent = '\u2022';
+        if (!o.querySelector('.sort-check')) o.appendChild(check);
+      });
+      // Highlight filter icon when a sort is active
+      if (sortBtn) sortBtn.classList.toggle('active', !!current);
+    }
+    // Sync on dropdown open + initial load
+    sortBtn.addEventListener('click', _syncSortChecks);
+    _syncSortChecks();
+
+    // AI auto-sort — spinner on the sort button itself. Used by both
+    // the main "★ Tidy" button (AI) and the sub-row "Tidy" button
+    // (no AI, Phase 1 cleanup only) via the skipLlm flag.
+    async function _runTidy(skipLlm) {
+      const btnIcon = sortBtn.querySelector('.sort-icon');
+      if (btnIcon) btnIcon.style.display = 'none';
+      const wp = spinnerModule.create('', 'clean', 'whirlpool');
+      const wpEl = wp.createElement();
+      wpEl.style.cssText = 'width:13px;height:13px;display:inline-block;vertical-align:middle;margin-top:-5px;';
+      sortBtn.appendChild(wpEl);
+      wp.start();
+      sortDropdown.style.display = 'none';
+      try {
+        const url = `${API_BASE}/api/sessions/auto-sort${skipLlm ? '?skip_llm=true' : ''}`;
+        const res = await fetch(url, { method: 'POST' });
+        const data = await res.json();
+        if (!res.ok) throw new Error(data.detail || 'Auto-sort failed');
+        if (data.status === 'ok') {
+          sessionModule.setSortMode(null); // clear sort — tidy creates manual folder order
+          _syncSortChecks();
+          if (skipLlm) {
+            // No-AI path: just report what got cleaned. No "unfiled
+            // remaining" prompt because we never tried to file anything.
+            const cleaned = (data.deleted_empty || 0) + (data.deleted_throwaway || 0);
+            uiModule.showToast(cleaned ? `Cleaned ${cleaned} empty/throwaway chat${cleaned === 1 ? '' : 's'}` : 'Already clean');
+          } else {
+            // Tidy now works in batches (15 most-recent unfiled per click)
+            // so the user gets fast feedback and a manageable LLM call
+            // even with hundreds of chats. Tell them what's left.
+            const remaining = data.unfiled_remaining || 0;
+            let msg;
+            if (data.updated > 0) {
+              msg = `Sorted ${data.updated} into ${data.folders.length} folder${data.folders.length === 1 ? '' : 's'}`;
+              if (remaining > 0) msg += ` — ${remaining} unfiled left, hit Tidy again`;
+            } else if (remaining > 0) {
+              msg = `${remaining} unfiled chats — hit Tidy again`;
+            } else {
+              msg = 'All sorted';
+            }
+            uiModule.showToast(msg);
+          }
+          if (sessionModule) await sessionModule.loadSessions();
+        } else {
+          uiModule.showToast(data.reason || 'Nothing to sort');
+        }
+      } catch (e) {
+        uiModule.showError('Auto-sort: ' + e.message);
+      } finally {
+        wp.destroy();
+        if (wpEl.parentNode) wpEl.parentNode.removeChild(wpEl);
+        if (btnIcon) btnIcon.style.display = '';
+      }
+    }
+
+    const autoSortBtn = el('auto-sort-sessions-btn');
+    if (autoSortBtn) autoSortBtn.addEventListener('click', () => _runTidy(false));
+
+    // Chevron next to the Tidy row toggles the no-AI sub-item.
+    const autoSortMoreBtn = el('auto-sort-sessions-more');
+    const autoSortNoaiBtn = el('auto-sort-sessions-noai-btn');
+    if (autoSortMoreBtn && autoSortNoaiBtn) {
+      autoSortMoreBtn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        autoSortNoaiBtn.style.display = autoSortNoaiBtn.style.display === 'none' ? 'block' : 'none';
+      });
+      autoSortNoaiBtn.addEventListener('click', () => _runTidy(true));
+    }
+  }
+
+  // Model sort dropdown
+  const modelSortBtn = el('model-sort-btn');
+  const modelSortDropdown = el('model-sort-dropdown');
+  if (modelSortBtn && modelSortDropdown) {
+    modelSortBtn.addEventListener('click', (e) => {
+      e.stopPropagation();
+      modelSortDropdown.style.display = modelSortDropdown.style.display === 'block' ? 'none' : 'block';
+    });
+    document.addEventListener('click', () => { modelSortDropdown.style.display = 'none'; });
+    modelSortDropdown.addEventListener('click', (e) => e.stopPropagation());
+    modelSortDropdown.querySelectorAll('.sort-option').forEach(opt => {
+      opt.addEventListener('click', () => {
+        const mode = opt.dataset.sort;
+        Storage.set('zero-model-sort', mode);
+        if (modelsModule) modelsModule.refreshModels();
+        modelSortDropdown.style.display = 'none';
+        uiModule.showToast('Models sorted: ' + opt.textContent.trim().toLowerCase());
+      });
+    });
+  }
+
+
+
+  // Feature visibility — hide admin-disabled features
+  // Use prefetched data from login page if available
+  const _prefetchedFeatures = sessionStorage.getItem('ody-prefetch-features');
+  sessionStorage.removeItem('ody-prefetch-features');
+  window._initFeaturesReady = (_prefetchedFeatures
+    ? Promise.resolve(JSON.parse(_prefetchedFeatures))
+    : fetch(`${API_BASE}/api/auth/features`, { credentials: 'same-origin' }).then(r => r.json())
+  ).then(features => {
+      const map = {
+        web_search:      ['web-toggle-btn'],
+        deep_research:   ['research-toggle-btn', 'tool-research-btn', 'overflow-research-btn', 'rail-research'],
+        document_editor: ['overflow-doc-btn', 'rail-documents'],
+        gallery:         ['tool-gallery-btn', 'rail-gallery'],
+      };
+      Object.entries(map).forEach(([key, ids]) => {
+        if (features[key] === false) {
+          ids.forEach(id => { const e = el(id); if (e) e.style.display = 'none'; });
+        }
+      });
+      // Re-apply the user's Appearance UI-vis preferences after the
+      // features fetch finishes hiding things — otherwise an admin-
+      // disabled feature leaves the sidebar entry hidden even when the
+      // user's "Show in sidebar" toggle is on. The user has to toggle
+      // off then on to trigger applyUIVis a second time, which is the
+      // bug they report as "deep research only shows after I toggle".
+      try { if (window.applyUIVis && window.loadUIVis) window.applyUIVis(window.loadUIVis()); } catch (_) {}
+    })
+    .catch(() => {});
+
+  // Hide Gallery when image generation is disabled in settings
+  const _prefetchedSettings = sessionStorage.getItem('ody-prefetch-settings');
+  sessionStorage.removeItem('ody-prefetch-settings');
+  window._initSettingsReady = (_prefetchedSettings
+    ? Promise.resolve(JSON.parse(_prefetchedSettings))
+    : fetch(`${API_BASE}/api/auth/settings`, { credentials: 'same-origin' }).then(r => r.json())
+  ).then(settings => {
+      // NOTE: image_gen_enabled only governs *generating* images in chat — the
+      // tool is blocked server-side (chat_routes / agent_loop). The Gallery
+      // holds uploads and past images too, so it stays visible regardless;
+      // use the `gallery` feature flag to hide the Gallery entirely.
+      // Hide TTS overflow button when TTS is disabled or no provider configured
+      const ttsOff = settings.tts_enabled === false || !settings.tts_provider || settings.tts_provider === 'disabled';
+      const overflowTts = el('overflow-tts-btn');
+      if (overflowTts) {
+        overflowTts.style.display = ttsOff ? 'none' : '';
+      }
+    })
+    .catch(() => {});
+
+  // (Logout handler moved to sidebar user bar above)
+
+  // Rename AI modal
+  const renameAiOption = el('rename-ai-option');
+  const renameAiModal = el('rename-ai-modal');
+  const closeRenameAi = el('close-rename-ai');
+  const cancelRenameAi = el('cancel-rename-ai');
+  const saveAiName = el('save-ai-name');
+  const aiNameInput = el('ai-name-input');
+  
+  if (renameAiOption) {
+    renameAiOption.addEventListener('click', () => {
+      const currentName = aiNameInput.value;
+      renameAiModal.classList.remove('hidden');
+    });
+  }
+  
+  if (closeRenameAi) {
+    closeRenameAi.addEventListener('click', () => {
+      renameAiModal.classList.add('hidden');
+    });
+  }
+  
+  if (cancelRenameAi) {
+    cancelRenameAi.addEventListener('click', () => {
+      renameAiModal.classList.add('hidden');
+    });
+  }
+  
+  if (saveAiName) {
+    saveAiName.addEventListener('click', async () => {
+      const newName = aiNameInput.value.trim();
+      
+      if (!newName) {
+        uiModule.showError('Please enter a name for the AI');
+        return;
+      }
+      
+      try {
+        const response = await fetch(`${API_BASE}/api/ai/name`, {
+          method: 'POST',
+          headers: {'Content-Type': 'application/json'},
+          body: JSON.stringify({ name: newName })
+        });
+        
+        const result = await response.json();
+        if (result.success) {
+          uiModule.showToast(`AI renamed to ${newName}`);
+          renameAiModal.classList.add('hidden');
+          aiNameInput.value = '';
+        }
+      } catch (e) {
+        uiModule.showError('Failed to rename AI: ' + e.message);
+      }
+    });
+  }
+
+  // Memory management
+  const memoryModal = el('memory-modal');
+  const closeMemoryBtn = el('close-memory-modal');
+
+  // Theme popup close button
+  const closeThemeBtn = el('close-theme-popup');
+  if (closeThemeBtn && themeModule) {
+    closeThemeBtn.addEventListener('click', () => {
+      themeModule.closePopup();
+    });
+  }
+
+  // Rename session modal
+  const renameSessionModal = el('rename-session-modal');
+  const closeRenameSession = el('close-rename-session');
+  const cancelRenameSession = el('cancel-rename-session');
+  const saveSessionName = el('save-session-name');
+  const sessionNameInput = el('session-name-input');
+  
+  // Close handlers for rename session modal
+  if (closeRenameSession) {
+    closeRenameSession.addEventListener('click', () => {
+      renameSessionModal.classList.add('hidden');
+    });
+  }
+  
+  if (cancelRenameSession) {
+    cancelRenameSession.addEventListener('click', () => {
+      renameSessionModal.classList.add('hidden');
+    });
+  }
+  
+  if (saveSessionName) {
+    saveSessionName.addEventListener('click', async () => {
+      const newName = sessionNameInput.value.trim();
+      
+      if (!newName) {
+        uiModule.showError('Please enter a name for the session');
+        return;
+      }
+      
+      try {
+        const response = await fetch(`${API_BASE}/api/session/${sessionModule.getCurrentSessionId()}`, {
+          method: 'PATCH',
+          headers: {'Content-Type': 'application/json'},
+          body: JSON.stringify({ name: newName })
+        });
+        
+        const result = await response.json();
+        if (response.ok) {
+          uiModule.showToast(`Session renamed to ${newName}`);
+          renameSessionModal.classList.add('hidden');
+          sessionNameInput.value = '';
+          // Update the current session name in the UI
+          const meta = sessionModule.getSessions().find(s => s.id === sessionModule.getCurrentSessionId());
+          if (meta) {
+            meta.name = newName;
+            const ver = window._appVersion ? ` v${window._appVersion}` : '';
+            el('current-meta').textContent = `Session: ${meta.name}${meta.model ? ' ' + meta.model.split('/').pop() : ''}${meta.rag ? ' [RAG]' : ''}${ver}`;
+          }
+          // Refresh the sessions list
+        await sessionModule.loadSessions();
+        } else {
+          throw new Error(result.detail || 'Failed to rename session');
+        }
+      } catch (e) {
+        uiModule.showError('Failed to rename session: ' + e.message);
+      }
+    });
+  }
+  
+  if (closeMemoryBtn) {
+    closeMemoryBtn.addEventListener('click', () => {
+      dismissModal(memoryModal);
+    });
+  }
+
+  // Sidebar Memory button
+  const toolMemoryBtn = el('tool-memory-btn');
+  if (toolMemoryBtn && memoryModal) {
+    toolMemoryBtn.addEventListener('click', () => {
+      memoryModal.classList.remove('hidden');
+      if (memoryModule && memoryModule.renderMemoryList) memoryModule.renderMemoryList();
+      if (memoryModule && memoryModule.updateMemoryCount) memoryModule.updateMemoryCount();
+    });
+  }
+
+  const addMemBtn = el('add-memory-btn');
+  if (addMemBtn) {
+    addMemBtn.addEventListener('click', memoryModule.addNewMemory);
+  }
+  
+  const memorySearchInput = el('memory-search');
+  if (memorySearchInput) {
+    memorySearchInput.addEventListener('input', () => {
+      memoryModule.renderMemoryList();
+      memoryModule.updateMemoryCount();
+    });
+  }
+  
+  const newMemoryInput = el('new-memory-input');
+  if (newMemoryInput) {
+    newMemoryInput.addEventListener('keypress', (e) => {
+      if (e.key === 'Enter') {
+        memoryModule.addNewMemory();
+      }
+    });
+  }
+
+// Voice recording is handled by the dual-purpose send/mic button (see below)
+
+  // ── Toggle persistence — delegates to Storage module ──
+  function loadToggleState() {
+    return Storage.loadToggleState();
+  }
+  function saveToggleState(state) {
+    Storage.saveToggleState(state);
+  }
+
+  // Mode-affected tools: default ON in Agent mode, default OFF in Chat mode,
+  // but the user's explicit per-mode override is persisted and honored.
+  const MODE_TOOLS = [
+    { btnId: 'web-toggle-btn',  checkboxId: 'web-toggle',  stateKey: 'web' },
+    { btnId: 'bash-toggle-btn', checkboxId: 'bash-toggle', stateKey: 'bash' },
+  ];
+
+  function _modeKey(stateKey, mode) { return `${stateKey}_${mode}`; }
+
+  function loadToolPref(stateKey, mode) {
+    const state = loadToggleState();
+    const key = _modeKey(stateKey, mode);
+    if (Object.prototype.hasOwnProperty.call(state, key)) return !!state[key];
+    return mode === 'agent'; // default: ON in agent, OFF in chat
+  }
+
+  function saveToolPref(stateKey, mode, value) {
+    const state = loadToggleState();
+    state[_modeKey(stateKey, mode)] = value;
+    saveToggleState(state);
+  }
+
+  const TOOL_TOGGLE_TOAST_LABELS = {
+    web: 'Web search',
+    bash: 'Shell',
+  };
+
+  function showToolToggleToast(stateKey, active) {
+    const label = TOOL_TOGGLE_TOAST_LABELS[stateKey];
+    if (!label || !uiModule?.showToast) return;
+    uiModule.showToast(`${label} ${active ? 'on' : 'off'}`, 1800);
+  }
+
+  function applyModeToToggles(mode) {
+    MODE_TOOLS.forEach(({ btnId, checkboxId, stateKey }) => {
+      const btn = el(btnId);
+      if (!btn || btn.style.display === 'none') return;
+      const on = loadToolPref(stateKey, mode);
+      btn.classList.toggle('active', on);
+      if (checkboxId) { const chk = el(checkboxId); if (chk) chk.checked = on; }
+    });
+  }
+
+  // ── Agent / Chat mode toggle ──
+  (function initModeToggle() {
+    const agentBtn = el('mode-agent-btn');
+    const chatBtn = el('mode-chat-btn');
+    if (!agentBtn || !chatBtn) return;
+    const state = loadToggleState();
+    let currentMode = state.mode || 'chat';
+
+    function setMode(mode) {
+      currentMode = mode;
+      const st = loadToggleState();
+      st.mode = mode;
+      saveToggleState(st);
+      agentBtn.classList.toggle('active', mode === 'agent');
+      chatBtn.classList.toggle('active', mode === 'chat');
+      agentBtn.setAttribute('aria-pressed', String(mode === 'agent'));
+      chatBtn.setAttribute('aria-pressed', String(mode === 'chat'));
+      // Slide the pill to the active button
+      const toggle = agentBtn.closest('.mode-toggle');
+      if (toggle) toggle.classList.toggle('mode-chat', mode === 'chat');
+      // Delay tool glow-up for a staggered effect
+      setTimeout(() => applyModeToToggles(mode), 500);
+    }
+    agentBtn.addEventListener('click', () => {
+      // Agent mode turns off research if active
+      const resChk = el('research-toggle');
+      if (resChk && resChk.checked) _syncResearchIndicator(false);
+      setMode('agent');
+    });
+    chatBtn.addEventListener('click', () => setMode('chat'));
+    setMode(currentMode);
+  })();
+
+  // ── Tool splash explainer messages (shown first 2 times per tool) ──
+  const SPLASH_COUNT_KEY = 'zero-tool-splash-counts';
+  const SPLASH_MAX = 2;
+  const _toolSplashes = {
+    web: { role: 'Web Search', text: 'Searches the web for relevant information to include in the response. Results are fetched and summarized before the AI answers.' },
+    bash: { role: 'Shell Access', text: 'Gives the AI access to a sandboxed shell for running commands, installing packages, and executing scripts. Use with caution.' },
+    builder: { role: 'Tool Builder', text: 'Create custom mini-apps and tools the AI can use. Describe what you need and the AI will build a tool you can reuse across conversations.' },
+    research: { role: 'Deep Research', text: 'Multi-round web search with source analysis. Takes longer but produces comprehensive, well-sourced answers. Your next message will trigger a deep research cycle.' },
+  };
+  function _showToolSplash(key) {
+    const splash = _toolSplashes[key];
+    if (!splash) return;
+    // Only show the first SPLASH_MAX times per tool
+    const counts = Storage.getJSON(SPLASH_COUNT_KEY, {});
+    const seen = counts[key] || 0;
+    if (seen >= SPLASH_MAX) return;
+    counts[key] = seen + 1;
+    Storage.setJSON(SPLASH_COUNT_KEY, counts);
+    // Hide welcome screen so splash is visible
+    if (chatModule && chatModule.hideWelcomeScreen) {
+      chatModule.hideWelcomeScreen();
+    }
+    const chatBox = document.getElementById('chat-history');
+    if (!chatBox) return;
+    const div = document.createElement('div');
+    div.className = 'msg msg-ai tool-splash';
+    div.innerHTML = '<div class="role">' + splash.role + '</div><div class="body" style="opacity:0.7;font-size:0.92em">' + splash.text + '</div>';
+    chatBox.appendChild(div);
+    if (uiModule) uiModule.scrollHistory();
+  }
+
+  // ── Checkbox-backed toggle buttons (with per-mode persistence) ──
+  function setupToggle(btnId, checkboxId, stateKey) {
+    const btn = el(btnId);
+    if (!btn) return;
+    // Restore per-mode saved state for both Agent and Chat modes.
+    const mode = (loadToggleState().mode) || 'chat';
+    const saved = loadToolPref(stateKey, mode);
+    const chk = el(checkboxId);
+    if (chk) chk.checked = saved;
+    btn.classList.toggle('active', saved);
+    btn.setAttribute('aria-pressed', String(saved));
+    btn.addEventListener('click', () => {
+      const curMode = (loadToggleState().mode) || 'chat';
+      const chk = el(checkboxId);
+      chk.checked = !chk.checked;
+      btn.classList.toggle('active', chk.checked);
+      btn.setAttribute('aria-pressed', String(chk.checked));
+      saveToolPref(stateKey, curMode, chk.checked);
+      showToolToggleToast(stateKey, chk.checked);
+      if (chk.checked) _showToolSplash(stateKey);
+      // Web search and Research are mutually exclusive — Research takes priority
+      if (stateKey === 'web' && chk.checked) {
+        const resChk = el('research-toggle');
+        if (resChk && resChk.checked) {
+          _syncResearchIndicator(false);
+        }
+      }
+    });
+  }
+  setupToggle('web-toggle-btn', 'web-toggle', 'web');
+  setupToggle('bash-toggle-btn', 'bash-toggle', 'bash');
+
+  // Document editor toggle (special: uses module panel, not a checkbox)
+  const overflowDocBtn = el('overflow-doc-btn');
+  if (overflowDocBtn) {
+    overflowDocBtn.addEventListener('click', async () => {
+      if (!documentModule) return;
+      if (documentModule.isPanelOpen()) {
+        documentModule.closePanel();
+        overflowDocBtn.classList.remove('active');
+        const st = loadToggleState(); st.doc = false; saveToggleState(st);
+      } else {
+        let sessionId = sessionModule.getCurrentSessionId();
+        // If there's a pending "New Chat", materialize it first
+        if (!sessionId && sessionModule.hasPendingChat && sessionModule.hasPendingChat()) {
+          await sessionModule.materializePendingSession();
+          sessionId = sessionModule.getCurrentSessionId();
+        }
+        if (sessionId) {
+          documentModule.loadSessionDocs(sessionId, { forceOpen: true });
+        } else {
+          documentModule.ensureDocPanel();
+        }
+        overflowDocBtn.classList.add('active');
+        const st = loadToggleState(); st.doc = true; saveToggleState(st);
+      }
+    });
+  }
+
+  // Document indicator button (shown outside overflow when docs exist)
+  const docIndicatorBtn = el('doc-indicator-btn');
+  if (docIndicatorBtn) {
+    docIndicatorBtn.addEventListener('click', () => {
+      const ob = el('overflow-doc-btn');
+      if (ob) ob.click();
+    });
+  }
+
+  // ── RAG toggle (overflow + indicator) ──
+  function _syncRagIndicator(active) {
+    const indicator = el('rag-indicator-btn');
+    const overflow = el('overflow-rag-btn');
+    const chk = el('rag-toggle');
+    if (chk) chk.checked = active;
+    if (indicator) {
+      indicator.style.display = active ? '' : 'none';
+      indicator.classList.toggle('active', active);
+    }
+    if (overflow) overflow.classList.toggle('active', active);
+    const s = loadToggleState(); s.rag = active; saveToggleState(s);
+    updatePlusDot();
+  }
+  window._syncRagIndicator = _syncRagIndicator;
+  window._syncResearchIndicator = _syncResearchIndicator;
+  // Must be assigned at module level (not inside the function body) so the very
+  // first external caller — group.js / sessions.js fire it before it has ever
+  // run locally — finds it instead of silently no-op'ing (the "group indicator
+  // sometimes doesn't appear" bug).
+  window._syncGroupIndicator = _syncGroupIndicator;
+  // Init RAG state on load
+  {
+    const st = loadToggleState();
+    const ragState = st.rag || false;
+    _syncRagIndicator(ragState);
+  }
+
+  // ── Overflow "..." menu (Research) ──
+  function updatePlusDot() {
+    const plusBtn = el('overflow-plus-btn');
+    if (!plusBtn) return;
+    const menu = el('overflow-menu');
+    const anyActive = menu ? Array.from(menu.querySelectorAll('.overflow-menu-item.active')).some(item => item.style.display !== 'none') : false;
+    plusBtn.classList.toggle('has-active', anyActive);
+  }
+  // External modules (compare) dispatch this when their overflow state changes
+  document.addEventListener('overflow-state-change', () => updatePlusDot());
+
+  // ── Prevent toolbar buttons from stealing focus (avoids mobile keyboard bounce) ──
+  const chatInputBar = document.querySelector('.chat-input-bar');
+  // ── Keep textarea focused when interacting with chat bar controls (mobile keyboard fix) ──
+  const _msgTextarea = el('message');
+  if (chatInputBar && _msgTextarea) {
+    let _refocusOnBlur = false;
+    function _flagRefocus(e) {
+      if (e.target.closest('textarea, input')) return;
+      // Don't refocus for attach — file picker needs full focus control
+      if (e.target.closest('#overflow-attach-btn')) return;
+      // Don't refocus for model picker button — focus should go to picker search input
+      if (e.target.closest('.model-picker-btn')) return;
+      // Don't refocus when tapping the +/chevron tools button — the user
+      // is explicitly trying to dismiss the keyboard and open the tools
+      // menu. Without this, the textarea blurs (keyboard down), then this
+      // handler re-focuses it (keyboard bounces back up).
+      if (e.target.closest('#overflow-plus-btn')) return;
+      if (document.activeElement === _msgTextarea) _refocusOnBlur = true;
+    }
+    chatInputBar.addEventListener('touchstart', _flagRefocus, { passive: true });
+    // Overflow menu is position:fixed — may not bubble through chatInputBar on mobile
+    const _overflowMenu = el('overflow-menu');
+    if (_overflowMenu) _overflowMenu.addEventListener('touchstart', _flagRefocus, { passive: true });
+    // Model picker menu too
+    const _pickerMenu = document.getElementById('model-picker-menu');
+    if (_pickerMenu) _pickerMenu.addEventListener('touchstart', _flagRefocus, { passive: true });
+    // Attach strip (outside chat-input-bar)
+    const _attachStrip = el('attach-strip');
+    if (_attachStrip) _attachStrip.addEventListener('touchstart', _flagRefocus, { passive: true });
+    _msgTextarea.addEventListener('blur', () => {
+      if (_refocusOnBlur) {
+        _refocusOnBlur = false;
+        setTimeout(() => _msgTextarea.focus(), 0);
+      }
+    });
+    // Clear flag if touch ends without causing blur
+    document.addEventListener('touchend', () => { setTimeout(() => { _refocusOnBlur = false; }, 50); }, { passive: true });
+  }
+
+  (function initOverflowMenu() {
+    const plusBtn = el('overflow-plus-btn');
+    const menu = el('overflow-menu');
+    if (!plusBtn || !menu) return;
+
+    // `.chat-input-bar` has `container-type: inline-size`, which makes it the
+    // containing block for `position: fixed` descendants — so this menu gets
+    // trapped in the composer's stacking context and renders BEHIND the
+    // attach-strip (worse the more files you add). Portal it to <body> while
+    // open so its fixed position + z-index apply against the viewport, then
+    // restore it to its wrapper on close.
+    const ownerWrap = menu.parentElement;
+    const pickerWrap = el('model-picker-wrap');
+    let _vvReposition = null;
+    // Pin the menu's bottom 8px above the chevron (viewport-relative, since it's
+    // portaled to <body>). Only cap height + show a scrollbar when the list is
+    // genuinely taller than the room above the button.
+    function positionMenu() {
+      const r = plusBtn.getBoundingClientRect();
+      menu.style.left = r.left + 'px';
+      menu.style.right = 'auto';
+      menu.style.bottom = 'auto';
+      menu.style.maxHeight = '';      // reset so we can measure the natural height
+      menu.style.overflowY = '';
+      const avail = r.top - 16;        // room above the chevron
+      const natural = menu.scrollHeight;
+      const h = Math.min(natural, avail);
+      if (natural > avail) {           // only cap + scroll when it doesn't fit
+        menu.style.maxHeight = avail + 'px';
+        menu.style.overflowY = 'auto';
+      }
+      menu.style.top = (r.top - 8 - h) + 'px';
+    }
+    // Tapping the chevron must NOT steal focus from the message box, or the
+    // mobile keyboard collapses. preventDefault on pointerdown keeps the
+    // textarea focused (keyboard stays up) while click still opens the menu.
+    plusBtn.addEventListener('pointerdown', (e) => { e.preventDefault(); });
+    plusBtn.addEventListener('click', (e) => {
+      e.stopPropagation();
+      // Closing path needs to play the fold-in animation, not just flip
+      // .hidden — route through closeOverflowMenu so the second-click
+      // close looks the same as click-outside / Escape / item-pick.
+      const isOpen = !menu.classList.contains('hidden') && !menu.classList.contains('closing');
+      if (isOpen) {
+        closeOverflowMenu();
+        return;
+      }
+      // Re-opening while a fold-in is mid-animation: cancel it cleanly.
+      menu.classList.remove('closing');
+      menu.classList.remove('hidden');
+      plusBtn.classList.add('expanded');
+      document.body.appendChild(menu);  // escape the composer's container-type trap
+      // Hide pill bar label so it doesn't show through the menu
+      if (pickerWrap) pickerWrap.style.visibility = 'hidden';
+      // Keep the textarea focused so the keyboard stays up if it was open (the
+      // pointerdown handler above prevents the focus-steal). Still watch
+      // visualViewport so the menu follows the chevron if the viewport shifts.
+      positionMenu();
+      if (window.visualViewport && !_vvReposition) {
+        _vvReposition = () => positionMenu();
+        window.visualViewport.addEventListener('resize', _vvReposition);
+        window.visualViewport.addEventListener('scroll', _vvReposition);
+      }
+    });
+    function closeOverflowMenu() {
+      if (menu.classList.contains('hidden')) return;
+      if (menu.classList.contains('closing')) return;
+      if (_vvReposition && window.visualViewport) {
+        window.visualViewport.removeEventListener('resize', _vvReposition);
+        window.visualViewport.removeEventListener('scroll', _vvReposition);
+        _vvReposition = null;
+      }
+      // Play the fold-in animation (items peel top-down, then container
+      // scales back into the chevron) before flipping to display:none.
+      menu.classList.add('closing');
+      plusBtn.classList.remove('expanded');
+      if (pickerWrap) pickerWrap.style.visibility = '';
+      // Item delays max at 0.18s + 0.20s anim = 0.38s for items, container
+      // delay 0.16s + 0.22s = 0.38s. 400ms covers both with margin.
+      setTimeout(() => {
+        menu.classList.add('hidden');
+        menu.classList.remove('closing');
+        if (ownerWrap) ownerWrap.appendChild(menu);  // restore from <body> portal
+      }, 400);
+    }
+    // Close menu when clicking any item inside it. preventDefault on pointerdown
+    // so tapping an item (e.g. Attach files) doesn't steal focus from the message
+    // box — keeps the mobile keyboard up.
+    menu.querySelectorAll('.overflow-menu-item').forEach(item => {
+      item.addEventListener('pointerdown', (e) => { e.preventDefault(); });
+      item.addEventListener('click', () => closeOverflowMenu());
+    });
+    document.addEventListener('click', (e) => {
+      if (!menu.contains(e.target) && e.target !== plusBtn) closeOverflowMenu();
+    });
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape' && !menu.classList.contains('hidden')) closeOverflowMenu();
+    });
+
+    // Research toggle
+    const researchBtn = el('research-toggle-btn');
+    if (researchBtn) {
+      const st = loadToggleState();
+      const resState = st.research || false;
+      el('research-toggle').checked = resState;
+      researchBtn.classList.toggle('active', resState);
+      researchBtn.style.display = resState ? '' : 'none';
+      // Sync overflow + tool sidebar on load
+      const overflowRes = el('overflow-research-btn');
+      if (overflowRes) overflowRes.classList.toggle('active', resState);
+      const toolRes = el('tool-research-btn');
+      if (toolRes) toolRes.classList.toggle('active', resState);
+      // On load: if both research and web are ON, research wins
+      if (resState) {
+        const webChk = el('web-toggle');
+        const webBtn = el('web-toggle-btn');
+        if (webChk && webChk.checked) {
+          webChk.checked = false;
+          if (webBtn) webBtn.classList.remove('active');
+          saveToolPref('web', (st.mode || 'chat'), false);
+        }
+      }
+
+      researchBtn.addEventListener('click', () => {
+        const chk = el('research-toggle');
+        const turningOn = chk ? !chk.checked : false;
+        _syncResearchIndicator(turningOn);
+        if (turningOn) {
+          _showToolSplash('research');
+          // Clear character — mutually exclusive with research
+          if (presetsModule && presetsModule.deactivateCharacter) presetsModule.deactivateCharacter();
+          // Research and Web search are mutually exclusive
+          const webChk = el('web-toggle');
+          const webBtn = el('web-toggle-btn');
+          if (webChk && webChk.checked) {
+            webChk.checked = false;
+            if (webBtn) webBtn.classList.remove('active');
+            saveToolPref('web', (loadToggleState().mode || 'chat'), false);
+          }
+          // Research requires chat mode — force switch from agent
+          const rs = loadToggleState();
+          if (rs.mode === 'agent') {
+            rs.mode = 'chat';
+            saveToggleState(rs);
+            const ab = el('mode-agent-btn'), cb = el('mode-chat-btn');
+            if (ab) ab.classList.remove('active');
+            if (cb) cb.classList.add('active');
+            applyModeToToggles('chat');
+          }
+        }
+      });
+    }
+
+    updatePlusDot();
+  })();
+
+  // ── Auto-collapse toolbar buttons into overflow when space is tight ──
+  (function initToolbarOverflow() {
+    const inputLeft = document.querySelector('.chat-input-left');
+    const overflowMenu = el('overflow-menu');
+    const overflowWrapper = document.querySelector('.overflow-wrapper');
+    if (!inputLeft || !overflowMenu || !overflowWrapper) return;
+
+    // Buttons that can be collapsed (in reverse priority — last collapsed first)
+    const collapsibleIds = ['bash-toggle-btn', 'web-toggle-btn'];
+    const collapsibleBtns = collapsibleIds.map(id => el(id)).filter(Boolean);
+    // Map of toolbar btn id → overflow mirror element (created dynamically)
+    const overflowMirrors = new Map();
+
+    // Create overflow mirror items for each collapsible button
+    collapsibleBtns.forEach(btn => {
+      const mirror = document.createElement('button');
+      mirror.type = 'button';
+      mirror.className = 'overflow-menu-item toolbar-overflow-mirror';
+      mirror.dataset.mirrorOf = btn.id;
+      const title = btn.title || btn.id.replace(/-/g, ' ');
+      mirror.innerHTML = btn.querySelector('svg').outerHTML + '<span>' + title + '</span>' +
+        '<span class="overflow-active-dot"></span>';
+      mirror.style.display = 'none';
+      mirror.addEventListener('click', () => btn.click());
+      // Insert at top of overflow menu (before existing items)
+      overflowMenu.insertBefore(mirror, overflowMenu.firstChild);
+      overflowMirrors.set(btn.id, mirror);
+    });
+
+    function syncMirrorStates() {
+      overflowMirrors.forEach((mirror, btnId) => {
+        const btn = el(btnId);
+        if (btn) mirror.classList.toggle('active', btn.classList.contains('active'));
+      });
+      updatePlusDot();
+    }
+
+    function checkToolbarOverflow() {
+      const inputBottom = inputLeft.parentElement;
+      if (!inputBottom) return;
+      const rightEl = document.querySelector('.chat-input-right');
+      const available = inputBottom.clientWidth -
+        (rightEl ? rightEl.offsetWidth : 0) - 16;
+
+      // Uncollapse all to measure natural widths
+      collapsibleBtns.forEach(btn => btn.classList.remove('toolbar-collapsed'));
+      overflowMirrors.forEach(m => m.style.display = 'none');
+
+      // Temporarily allow overflow for accurate measurement
+      const prevOverflow = inputLeft.style.overflow;
+      inputLeft.style.overflow = 'visible';
+      inputLeft.style.flexWrap = 'nowrap';
+
+      // Force reflow then measure each child
+      void inputLeft.offsetWidth;
+
+      // Measure the overflow wrapper (always visible)
+      const wrapperWidth = overflowWrapper.offsetWidth + 4;
+
+      // Measure each collapsible button's natural width
+      const btnWidths = collapsibleBtns.map(btn => btn.offsetWidth + 4);
+
+      // Measure non-collapsible, non-wrapper children (tool indicators etc)
+      let otherWidth = 0;
+      Array.from(inputLeft.children).forEach(c => {
+        if (c === overflowWrapper) return;
+        if (collapsibleBtns.includes(c)) return;
+        if (c.offsetWidth) otherWidth += c.offsetWidth + 4;
+      });
+
+      let totalWidth = wrapperWidth + otherWidth + btnWidths.reduce((a, b) => a + b, 0);
+
+      // Force-collapse shell & search when research mode + doc panel are both active
+      const _resChk = el('research-toggle');
+      const _researchOn = _resChk && _resChk.checked;
+      const _docViewOn = document.body.classList.contains('doc-view');
+      if (_researchOn && _docViewOn) {
+        collapsibleBtns.forEach(btn => {
+          btn.classList.add('toolbar-collapsed');
+          const mirror = overflowMirrors.get(btn.id);
+          if (mirror) mirror.style.display = '';
+        });
+        inputLeft.style.overflow = prevOverflow;
+        inputLeft.style.flexWrap = '';
+        syncMirrorStates();
+        return;
+      }
+
+      // Collapse from lowest priority until it fits
+      if (totalWidth > available) {
+        for (let i = 0; i < collapsibleBtns.length; i++) {
+          collapsibleBtns[i].classList.add('toolbar-collapsed');
+          const mirror = overflowMirrors.get(collapsibleBtns[i].id);
+          if (mirror) mirror.style.display = '';
+          totalWidth -= btnWidths[i];
+          if (totalWidth <= available) break;
+        }
+      }
+
+      // Restore
+      inputLeft.style.overflow = prevOverflow;
+      inputLeft.style.flexWrap = '';
+      syncMirrorStates();
+    }
+
+    // Observe active class changes to sync mirror states
+    const observer = new MutationObserver(() => syncMirrorStates());
+    collapsibleBtns.forEach(btn => {
+      observer.observe(btn, { attributes: true, attributeFilter: ['class'] });
+    });
+
+    // Run on resize and on load
+    window.addEventListener('resize', () => requestAnimationFrame(checkToolbarOverflow));
+    // Run immediately (state is already restored by this point)
+    checkToolbarOverflow();
+    // Re-check when sidebar toggles (changes available width)
+    document.addEventListener('overflow-state-change', () =>
+      requestAnimationFrame(checkToolbarOverflow));
+    // Also re-check when sidebar visibility changes
+    const sidebarEl = el('sidebar');
+    if (sidebarEl) {
+      new MutationObserver(() => requestAnimationFrame(checkToolbarOverflow))
+        .observe(sidebarEl, { attributes: true, attributeFilter: ['class'] });
+    }
+    // Re-check when doc panel opens/closes (body.doc-view toggled)
+    new MutationObserver(() => requestAnimationFrame(checkToolbarOverflow))
+      .observe(document.body, { attributes: true, attributeFilter: ['class'] });
+    // Re-check when input bar itself resizes (e.g. doc panel drag)
+    const inputBottom = inputLeft.parentElement;
+    if (inputBottom) {
+      new ResizeObserver(() => requestAnimationFrame(checkToolbarOverflow)).observe(inputBottom);
+    }
+  })();
+
+  // ── Auto-hide model picker when textarea area is too narrow ──
+  (function initModelPickerResponsive() {
+    const inputTop = document.querySelector('.chat-input-top');
+    const pickerWrap = el('model-picker-wrap');
+    if (!inputTop || !pickerWrap) return;
+
+    const PLACEHOLDER_HIDE_WIDTH = 400;
+    const PICKER_HIDE_WIDTH = 220;
+    const TOOLBAR_HIDE_WIDTH = 160;
+    const textarea = el('message');
+    const inputBottom = document.querySelector('.chat-input-bottom');
+    const _isMobile = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+
+    function checkPickerOverflow() {
+      // Skip responsive collapse on mobile — keyboard open/close causes flicker
+      if (_isMobile) return;
+      const w = inputTop.clientWidth;
+      // Hide model picker
+      pickerWrap.classList.toggle('picker-auto-hidden', w < PICKER_HIDE_WIDTH);
+      // Hide placeholder text
+      if (textarea) {
+        textarea.setAttribute('placeholder', w < PLACEHOLDER_HIDE_WIDTH ? '' : 'Message Zero...');
+      }
+      // Hide entire bottom toolbar (tools, mode toggle) — only send button remains
+      if (inputBottom) {
+        inputBottom.classList.toggle('toolbar-auto-hidden', w < TOOLBAR_HIDE_WIDTH);
+      }
+    }
+
+    const ro = new ResizeObserver(() => requestAnimationFrame(checkPickerOverflow));
+    ro.observe(inputTop);
+    checkPickerOverflow();
+  })();
+
+  // TTS Mode toggle (separate from overflow IIFE for safety)
+  (function initTTSToggle() {
+    const ttsBtn = document.getElementById('overflow-tts-btn');
+    if (!ttsBtn) return;
+    try {
+      const st = loadToggleState();
+      if (st.ttsMode) {
+        ttsBtn.classList.add('active');
+        if (window.aiTTSManager) window.aiTTSManager.autoPlay = true;
+      }
+    } catch(e) {}
+
+    ttsBtn.addEventListener('click', () => {
+      const isActive = !ttsBtn.classList.contains('active');
+      ttsBtn.classList.toggle('active', isActive);
+      if (window.aiTTSManager) window.aiTTSManager.autoPlay = isActive;
+      const s = loadToggleState(); s.ttsMode = isActive; saveToggleState(s);
+      updatePlusDot();
+    });
+  })();
+
+
+  // ── Compare indicator (sidebar only, no overflow) ──
+  const compareIndicatorBtn = el('compare-indicator-btn');
+  if (compareIndicatorBtn) {
+    compareIndicatorBtn.addEventListener('click', () => {
+      if (compareModule && compareModule.isActive()) {
+        compareModule.closeCompare();
+      }
+    });
+  }
+
+  // ── Overflow RAG toggle ──
+  const overflowRagBtn = el('overflow-rag-btn');
+  const ragIndicatorBtn = el('rag-indicator-btn');
+  if (overflowRagBtn) {
+    overflowRagBtn.addEventListener('click', () => {
+      const chk = el('rag-toggle');
+      const isActive = chk ? !chk.checked : true;
+      _syncRagIndicator(isActive);
+    });
+  }
+  if (ragIndicatorBtn) {
+    ragIndicatorBtn.addEventListener('click', () => {
+      _syncRagIndicator(false);
+    });
+  }
+
+  // ── Overflow Research toggle ──
+  const overflowResearchBtn = el('overflow-research-btn');
+  if (overflowResearchBtn) {
+    overflowResearchBtn.addEventListener('click', () => {
+      const chk = el('research-toggle');
+      const turningOn = chk ? !chk.checked : false;
+      _syncResearchIndicator(turningOn);
+      if (turningOn) {
+        _showToolSplash('research');
+        // Clear character — mutually exclusive with research
+        if (presetsModule && presetsModule.deactivateCharacter) presetsModule.deactivateCharacter();
+        // Mutual exclusion with web search
+        const webChk = el('web-toggle');
+        const webBtn = el('web-toggle-btn');
+        if (webChk && webChk.checked) {
+          webChk.checked = false;
+          if (webBtn) webBtn.classList.remove('active');
+          saveToolPref('web', (loadToggleState().mode || 'chat'), false);
+        }
+        // Research requires chat mode
+        const rs2 = loadToggleState();
+        if (rs2.mode === 'agent') {
+          rs2.mode = 'chat';
+          saveToggleState(rs2);
+          const ab2 = el('mode-agent-btn'), cb2 = el('mode-chat-btn');
+          if (ab2) ab2.classList.remove('active');
+          if (cb2) cb2.classList.add('active');
+          applyModeToToggles('chat');
+        }
+      }
+    });
+  }
+
+  // ── Overflow Group Chat toggle ──
+  const overflowGroupBtn = el('overflow-group-btn');
+  if (overflowGroupBtn) {
+    overflowGroupBtn.addEventListener('click', async () => {
+      const chk = el('group-toggle');
+      const turningOn = chk ? !chk.checked : false;
+      if (turningOn) {
+        const picked = await groupModule.showModelPicker();
+        if (!picked || picked.length < 2) return;
+        groupModule.setActive(true);  // Set early so updateModelPicker sees it
+        _syncGroupIndicator(true);
+        _startFreshChat();
+        // Clear any leftover splash screens
+        const _chatBox = document.getElementById('chat-history');
+        if (_chatBox) {
+          _chatBox.querySelectorAll('.tool-splash').forEach(s => s.remove());
+          // Also hide welcome screen
+          if (chatModule && chatModule.hideWelcomeScreen) chatModule.hideWelcomeScreen();
+        }
+        // Start group — create participant sessions immediately
+        const sid = sessionModule.getCurrentSessionId() || 'group-' + Date.now();
+        await groupModule.startGroup(picked, sid);
+        // Re-hide picker after everything settles
+        const _mpw = el('model-picker-wrap');
+        if (_mpw) _mpw.style.display = 'none';
+        uiModule.showToast(`Group chat ready — ${picked.length} models`);
+      } else {
+        _syncGroupIndicator(false);
+        groupModule.stopGroup();
+        // Restore model picker
+        const _mpWrap2 = el('model-picker-wrap');
+        if (_mpWrap2) _mpWrap2.style.display = '';
+      }
+    });
+  }
+
+  // ── Group toggle button (chatbox indicator) — click to deactivate ──
+  const groupToggleBtn = el('group-toggle-btn');
+  if (groupToggleBtn) {
+    groupToggleBtn.addEventListener('click', () => {
+      _syncGroupIndicator(false);
+      groupModule.stopGroup();
+    });
+  }
+
+  // ── Incognito mode toggle (on welcome screen) ──
+  const incognitoBtn = el('incognito-btn');
+  const INCOGNITO_EYE_OPEN = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>';
+  const INCOGNITO_EYE_CLOSED = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><line x1="8" y1="16" x2="16" y2="8"/><line x1="8" y1="8" x2="16" y2="16"/></svg>';
+  const SESSION_ICON_CHAT = '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>';
+  const SESSION_ICON_INCOGNITO = '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94"/><path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19"/><path d="M14.12 14.12a3 3 0 1 1-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/></svg>';
+
+  function _syncSessionIncognitoIcon(active) {
+    const activeSession = document.querySelector('.list-item.active-session .session-icon');
+    if (activeSession) {
+      activeSession.innerHTML = active ? SESSION_ICON_INCOGNITO : SESSION_ICON_CHAT;
+      activeSession.style.color = active ? 'var(--accent)' : '';
+    }
+  }
+
+  if (incognitoBtn) {
+    incognitoBtn.addEventListener('mousedown', (e) => e.preventDefault());
+    incognitoBtn.addEventListener('click', () => {
+      // Don't toggle mid-chat — incognito only changeable from welcome screen
+      const ws = el('welcome-screen');
+      if (ws && ws.classList.contains('hidden')) return;
+      const chk = el('incognito-toggle');
+      chk.checked = !chk.checked;
+      incognitoBtn.classList.toggle('active', chk.checked);
+      const tipEl = el('welcome-tip');
+      incognitoBtn.title = chk.checked ? 'Disable Nobody mode' : 'Enable Nobody mode — no memory, no history saved';
+      const welcomeName = document.querySelector('.welcome-name');
+      if (chk.checked) {
+        incognitoBtn.innerHTML = INCOGNITO_EYE_CLOSED + '<span class="incognito-label">Nobody</span>';
+        if (welcomeName) {
+          welcomeName.dataset.originalHtml = welcomeName.innerHTML;
+          welcomeName.innerHTML = '<svg class="welcome-boat" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><line x1="8" y1="16" x2="16" y2="8"/><line x1="8" y1="8" x2="16" y2="16"/></svg>Nobody';
+          // Restart the L→R clip-wipe reveal on the new label
+          welcomeName.style.animation = 'none';
+          welcomeName.offsetHeight;
+          welcomeName.style.animation = '';
+        }
+        if (ws) { ws.style.animation = 'none'; ws.offsetHeight; ws.style.animation = 'welcome-enter 0.3s ease-out both'; }
+        const welcomeSub = el('welcome-sub');
+        if (welcomeSub) {
+          if (!welcomeSub.dataset.originalText) welcomeSub.dataset.originalText = welcomeSub.textContent;
+          welcomeSub.textContent = "Who am I? I'm nobody.";
+          welcomeSub.style.display = '';
+        }
+        if (tipEl) { tipEl.dataset.originalTip = tipEl.textContent; tipEl.textContent = 'Temporary session \u2014 won\u2019t be saved and no memory activation.'; tipEl.style.opacity = '0.5'; tipEl.style.marginTop = '8px'; }
+        // Default to plain chat: disable tools visually, switch to chat mode.
+        // IMPORTANT: don't overwrite the user's persisted per-mode tool prefs
+        // (`web_agent`, `bash_agent`, `web_chat`, `bash_chat`). Nobody mode is
+        // ephemeral — their agent-mode defaults must come back on toggle-off.
+        const _offIds = ['web-toggle', 'bash-toggle', 'research-toggle'];
+        _offIds.forEach(id => { const c = el(id); if (c) c.checked = false; });
+        ['web-toggle-btn', 'bash-toggle-btn'].forEach(id => { const b = el(id); if (b) b.classList.remove('active'); });
+        const _ab = el('mode-agent-btn'), _cb = el('mode-chat-btn');
+        if (_ab) _ab.classList.remove('active');
+        if (_cb) _cb.classList.add('active');
+        const ts = Storage.getJSON(Storage.KEYS.TOGGLES, {});
+        ts.research = false; ts.mode = 'chat';
+        Storage.setJSON(Storage.KEYS.TOGGLES, ts);
+      } else {
+        incognitoBtn.innerHTML = INCOGNITO_EYE_OPEN + '<span class="incognito-label">Nobody</span>';
+        if (welcomeName && welcomeName.dataset.originalHtml) {
+          welcomeName.innerHTML = welcomeName.dataset.originalHtml;
+          // Restart the L→R clip-wipe reveal on the restored label
+          welcomeName.style.animation = 'none';
+          welcomeName.offsetHeight;
+          welcomeName.style.animation = '';
+        }
+        if (ws) { ws.style.animation = 'none'; ws.offsetHeight; ws.style.animation = 'welcome-enter 0.3s ease-out both'; }
+        const welcomeSub2 = el('welcome-sub');
+        if (welcomeSub2) {
+          if (welcomeSub2.dataset.originalText) {
+            welcomeSub2.textContent = welcomeSub2.dataset.originalText;
+            delete welcomeSub2.dataset.originalText;
+          }
+          welcomeSub2.style.display = '';
+        }
+        if (tipEl && tipEl.dataset.originalTip) { tipEl.textContent = tipEl.dataset.originalTip; tipEl.style.opacity = ''; tipEl.style.marginTop = ''; }
+        // Heal any previously-persisted false values from the old Nobody bug
+        // so agent-mode defaults (web/bash ON) come back.
+        const _ts = Storage.getJSON(Storage.KEYS.TOGGLES, {});
+        let _dirty = false;
+        ['web_agent', 'bash_agent', 'web_chat', 'bash_chat'].forEach(k => {
+          if (_ts[k] === false) { delete _ts[k]; _dirty = true; }
+        });
+        if (_dirty) Storage.setJSON(Storage.KEYS.TOGGLES, _ts);
+        // Reapply the current mode's real defaults to the visible toggles
+        const _curMode = (Storage.getJSON(Storage.KEYS.TOGGLES, {}) || {}).mode || 'chat';
+        try { applyModeToToggles(_curMode); } catch (_) {}
+      }
+      // If toggled off mid-chat (welcome screen hidden), hide the button
+      if (!chk.checked && ws && ws.classList.contains('hidden')) {
+        incognitoBtn.style.display = 'none';
+      }
+      // Show/hide persistent incognito indicator in top bar
+      const _incInd = el('incognito-indicator');
+      if (_incInd) _incInd.style.display = chk.checked ? '' : 'none';
+      // Update active session icon in sidebar
+      _syncSessionIncognitoIcon(chk.checked);
+    });
+  }
+
+  // Incognito indicator click — deactivate incognito
+  const incognitoIndicator = el('incognito-indicator');
+  if (incognitoIndicator) {
+    incognitoIndicator.addEventListener('click', () => {
+      if (incognitoBtn) incognitoBtn.click();
+      else {
+        const chk = el('incognito-toggle');
+        if (chk) { chk.checked = false; }
+        incognitoIndicator.style.display = 'none';
+      }
+    });
+  }
+
+  // ── Deactivate incognito mode (called on new session) ──
+  function _deactivateIncognito() {
+    const chk = el('incognito-toggle');
+    if (!chk || !chk.checked) return;
+    if (incognitoBtn) incognitoBtn.click();
+  }
+
+  // ── UI Visibility (Customize UI modal) ──
+  const UI_VIS_KEY = 'ZERO-visibility';
+
+  // Selector map: key → CSS selector(s) for targets
+  const UI_VIS_MAP = {
+    'sidebar-brand':       '.sidebar-brand-title',
+    'sidebar-new-chat':    '#sidebar-new-chat-btn',
+    'sidebar-search':      '#sidebar-search-btn',
+    'sessions-section':    '#sessions-section',
+    'email-section':       '#email-section',
+    'models-section':      '#models-section',
+    'tools-section':       '#tools-section',
+    // Per-tool visibility — fine-grained control over which entries show
+    // inside the Tools section in the sidebar.
+    'tool-calendar':       '#tool-calendar-btn',
+    'tool-compare':        '#tool-compare-btn',
+    'tool-cookbook':       '#tool-cookbook-btn',
+    'tool-research':       '#tool-research-btn',
+    'tool-gallery':        '#tool-gallery-btn',
+    'tool-library':        '#tool-library-btn',
+    'tool-memory':         '#tool-memory-btn',
+    'tool-notes':          '#tool-notes-btn',
+    'tool-tasks':          '#tool-tasks-btn',
+    'tool-theme':          '#tool-theme-btn',
+    'user-bar':            '#user-bar-profile',
+    'sidebar-settings-btn':'#user-bar-settings',
+    'chat-meta':           '.chat-meta-overlay',
+    'welcome-text':        '.welcome-name, .welcome-sub, #welcome-tip',
+    'incognito-btn':       '.incognito-btn',
+    'web-toggle-btn':      '#web-toggle-btn',
+    'doc-toggle-btn':      '#overflow-doc-btn',
+    'rag-toggle-btn':      '#overflow-rag-btn',
+    'bash-toggle-btn':     '#bash-toggle-btn',
+    'overflow-plus-btn':   '.overflow-wrapper',
+    'mode-toggle':         '.mode-toggle',
+    'preset-mini-btn':     '#overflow-preset-btn',
+    'attach-btn':          '#overflow-attach-btn',
+    'research-btn':        '#overflow-research-btn',
+    'rail-new-chat':       '#rail-new-session',
+  };
+
+  // Keys hidden by default on first run (no localStorage yet)
+  const UI_VIS_DEFAULT_OFF = new Set(['models-section', 'rag-toggle-btn']);
+
+  // Keys that need admin to toggle off (reserved for future use)
+  const UI_VIS_ADMIN_ONLY = new Set([]);
+
+  function loadUIVis() {
+    return Storage.getJSON(UI_VIS_KEY, {});
+  }
+
+  function saveUIVis(state) {
+    Storage.setJSON(UI_VIS_KEY, state);
+  }
+
+  function applyUIVis(state) {
+    Object.entries(UI_VIS_MAP).forEach(([key, selector]) => {
+      // section-drag-reorder uses a body class instead of inline styles
+      if (key === 'section-drag-reorder') return;
+      const visible = key in state ? state[key] !== false : !UI_VIS_DEFAULT_OFF.has(key);
+      document.querySelectorAll(selector).forEach(el => {
+        el.style.display = visible ? '' : 'none';
+      });
+    });
+    // Drag reorder: use body class so dynamically created handles are covered
+    const dragEnabled = state['section-drag-reorder'] === true;
+    document.body.classList.toggle('rearrange-mode', dragEnabled);
+    document.querySelectorAll('.section[draggable]').forEach(el => {
+      el.setAttribute('draggable', dragEnabled ? 'true' : 'false');
+    });
+    // Text-only emojis toggle. Default is ON (the checkbox defaults to
+    // checked because text-emojis isn't in UI_VIS_DEFAULT_OFF), so treat
+    // an absent value as enabled — otherwise the toggle looked on at
+    // startup but the effect only activated after the user flipped it.
+    applyTextEmojis(state['text-emojis'] !== false);
+    // Hide thinking sections toggle (show-thinking: checked=show, unchecked=hide)
+    document.body.classList.toggle('hide-thinking', state['show-thinking'] === false);
+  }
+
+  // Rearrange toggles in session/model sort dropdowns
+  function syncRearrangeChecks() {
+    const on = loadUIVis()['section-drag-reorder'] === true;
+    document.querySelectorAll('.rearrange-toggle .rearrange-check').forEach(ch => {
+      ch.style.opacity = on ? '1' : '0';
+    });
+  }
+  document.querySelectorAll('.rearrange-toggle').forEach(toggle => {
+    toggle.addEventListener('click', () => {
+      const state = loadUIVis();
+      const wasOn = state['section-drag-reorder'] === true;
+      state['section-drag-reorder'] = !wasOn;
+      saveUIVis(state);
+      applyUIVis(state);
+      syncRearrangeChecks();
+      uiModule.showToast(!wasOn ? 'Rearrange enabled' : 'Rearrange disabled');
+      // Close the dropdown the toggle lives in — the sort dropdown's own
+      // click-stopPropagation means it won't close on its own.
+      const dd = toggle.closest('[id$="-sort-dropdown"]');
+      if (dd) dd.style.display = 'none';
+    });
+  });
+
+  // Esc exits rearrange mode (no matter where focus/mouse is) — matches the
+  // global Esc-cancels-select pattern. Capture phase so a sort dropdown that
+  // happens to be open doesn't swallow it first.
+  document.addEventListener('keydown', (e) => {
+    if (e.key !== 'Escape') return;
+    if (!document.body.classList.contains('rearrange-mode')) return;
+    e.preventDefault();
+    e.stopPropagation();
+    const state = loadUIVis();
+    state['section-drag-reorder'] = false;
+    saveUIVis(state);
+    applyUIVis(state);
+    syncRearrangeChecks();
+    uiModule.showToast('Rearrange disabled');
+  }, true);
+  // Sync checkmarks when dropdowns open
+  const _sessionSortBtn = el('session-sort-btn');
+  const _modelSortBtn = el('model-sort-btn');
+  if (_sessionSortBtn) _sessionSortBtn.addEventListener('click', syncRearrangeChecks);
+  if (_modelSortBtn) _modelSortBtn.addEventListener('click', syncRearrangeChecks);
+  syncRearrangeChecks();
+
+  // ── Text-only emoji conversion ──
+  // Regex matching most emoji codepoints (Emoji_Presentation + common sequences)
+  const EMOJI_RE = /(?:\p{Emoji_Presentation}|\p{Extended_Pictographic})(?:\uFE0F|\u200D(?:\p{Emoji_Presentation}|\p{Extended_Pictographic}))*/gu;
+
+  // Common emoji → text description map
+  const EMOJI_MAP = {
+    '😀':'grinning','😃':'smiley','😄':'smile','😁':'grin','😆':'laughing','😅':'sweat smile',
+    '🤣':'rofl','😂':'joy','🙂':'slightly smiling','🙃':'upside down','😉':'wink',
+    '😊':'blush','😇':'innocent','🥰':'smiling hearts','😍':'heart eyes','🤩':'star struck',
+    '😘':'kissing heart','😗':'kissing','😚':'kissing closed eyes','😙':'kissing smiling eyes',
+    '🥲':'smiling tear','😋':'yum','😛':'tongue','😜':'winking tongue','🤪':'zany',
+    '😝':'squinting tongue','🤑':'money mouth','🤗':'hugging','🤭':'hand over mouth',
+    '🤫':'shushing','🤔':'thinking','🫡':'saluting','🤐':'zipper mouth','🤨':'raised eyebrow',
+    '😐':'neutral','😑':'expressionless','😶':'no mouth','🫥':'dotted line face',
+    '😏':'smirk','😒':'unamused','🙄':'eye roll','😬':'grimacing','🤥':'lying',
+    '😌':'relieved','😔':'pensive','😪':'sleepy','🤤':'drooling','😴':'sleeping',
+    '😷':'mask','🤒':'thermometer','🤕':'head bandage','🤢':'nauseated','🤮':'vomiting',
+    '🥵':'hot','🥶':'cold','🥴':'woozy','😵':'dizzy','🤯':'exploding head',
+    '🤠':'cowboy','🥳':'party','🥸':'disguised','😎':'sunglasses','🤓':'nerd',
+    '🧐':'monocle','😕':'confused','🫤':'diagonal mouth','😟':'worried','🙁':'slightly frowning',
+    '😮':'open mouth','😯':'hushed','😲':'astonished','😳':'flushed','🥺':'pleading',
+    '🥹':'holding back tears','😦':'frowning open mouth','😧':'anguished','😨':'fearful',
+    '😰':'anxious sweat','😥':'sad relieved','😢':'crying','😭':'sobbing','😱':'screaming',
+    '😖':'confounded','😣':'persevering','😞':'disappointed','😓':'downcast sweat',
+    '😩':'weary','😫':'tired','🥱':'yawning','😤':'triumph','😡':'pouting',
+    '😠':'angry','🤬':'swearing','😈':'smiling devil','👿':'angry devil',
+    '💀':'skull','☠️':'skull crossbones','💩':'poop','🤡':'clown','👹':'ogre','👺':'goblin',
+    '👻':'ghost','👽':'alien','👾':'space invader','🤖':'robot',
+    '😺':'smiling cat','😸':'grinning cat','😹':'tears of joy cat','😻':'heart eyes cat',
+    '😼':'wry cat','😽':'kissing cat','🙀':'weary cat','😿':'crying cat','😾':'pouting cat',
+    '🙈':'see no evil','🙉':'hear no evil','🙊':'speak no evil',
+    '👋':'wave','🤚':'raised back of hand','🖐️':'hand with fingers splayed','✋':'raised hand',
+    '🖖':'vulcan salute','🫱':'rightward hand','🫲':'leftward hand',
+    '👌':'ok hand','🤌':'pinched fingers','🤏':'pinching hand','✌️':'victory',
+    '🤞':'crossed fingers','🫰':'hand with index finger and thumb crossed',
+    '🤟':'love you','🤘':'rock on','🤙':'call me','👈':'point left','👉':'point right',
+    '👆':'point up','🖕':'middle finger','👇':'point down','☝️':'index up',
+    '🫵':'point at viewer','👍':'thumbs up','👎':'thumbs down','✊':'raised fist',
+    '👊':'fist bump','🤛':'left fist','🤜':'right fist','👏':'clap','🙌':'raising hands',
+    '🫶':'heart hands','👐':'open hands','🤲':'palms up','🤝':'handshake','🙏':'pray',
+    '✍️':'writing','💅':'nail polish','🤳':'selfie','💪':'flexed biceps',
+    '❤️':'red heart','🧡':'orange heart','💛':'yellow heart','💚':'green heart',
+    '💙':'blue heart','💜':'purple heart','🖤':'black heart','🤍':'white heart',
+    '🩷':'pink heart','🩵':'light blue heart','🩶':'grey heart','🤎':'brown heart',
+    '💔':'broken heart','❤️‍🔥':'heart on fire','❤️‍🩹':'mending heart',
+    '💕':'two hearts','💞':'revolving hearts','💓':'heartbeat','💗':'growing heart',
+    '💖':'sparkling heart','💘':'heart with arrow','💝':'heart with ribbon',
+    '💟':'heart decoration','🔥':'fire','💯':'100','✨':'sparkles','⭐':'star',
+    '🌟':'glowing star','💫':'dizzy star','🎉':'party popper','🎊':'confetti ball',
+    '🎈':'balloon','🎁':'gift','🏆':'trophy','🥇':'1st place','🥈':'2nd place','🥉':'3rd place',
+    '⚡':'zap','💡':'light bulb','🔑':'key','🔒':'locked','🔓':'unlocked',
+    '🔔':'bell','🔕':'bell off','📢':'loudspeaker','📣':'megaphone',
+    '💬':'speech bubble','💭':'thought bubble','🗯️':'anger bubble',
+    '✅':'check mark','❌':'cross mark','❓':'question','❗':'exclamation',
+    '⚠️':'warning','🚫':'prohibited','⛔':'no entry','🔴':'red circle','🟢':'green circle',
+    '🔵':'blue circle','🟡':'yellow circle','⚪':'white circle','⚫':'black circle',
+    '🟠':'orange circle','🟣':'purple circle','🟤':'brown circle',
+    '📁':'folder','📂':'open folder','📄':'document','📝':'memo','📎':'paperclip',
+    '📌':'pin','📍':'round pin','🔗':'link','📊':'bar chart','📈':'chart up','📉':'chart down',
+    '🔍':'magnifying glass left','🔎':'magnifying glass right',
+    '🌐':'globe','🌍':'globe europe','🌎':'globe americas','🌏':'globe asia',
+    '🕐':'clock 1','🕑':'clock 2','🕒':'clock 3','🕓':'clock 4',
+    '⏰':'alarm clock','⏳':'hourglass flowing','⌛':'hourglass done',
+    '🚀':'rocket','✈️':'airplane','🚗':'car','🚂':'train','🚢':'ship',
+    '🏠':'house','🏢':'building','🏗️':'construction','🏭':'factory',
+    '🎵':'musical note','🎶':'musical notes','🎤':'microphone','🎧':'headphones',
+    '📷':'camera','📸':'camera flash','🎬':'clapperboard','📺':'television',
+    '💻':'laptop','🖥️':'desktop','📱':'mobile phone','☎️':'telephone',
+    '🔧':'wrench','🔨':'hammer','⚙️':'gear','🧲':'magnet','🧪':'test tube','🔬':'microscope',
+    '📚':'books','📖':'open book','✏️':'pencil','🖊️':'pen','🖋️':'fountain pen',
+    '🎯':'bullseye','♟️':'chess pawn','🎲':'game die','🧩':'puzzle piece',
+    '🍕':'pizza','🍔':'burger','🍟':'fries','🌮':'taco','🍣':'sushi','🍩':'donut',
+    '☕':'coffee','🍺':'beer','🍷':'wine','🥤':'cup with straw',
+    '🐶':'dog','🐱':'cat','🐭':'mouse','🐹':'hamster','🐰':'rabbit','🦊':'fox',
+    '🐻':'bear','🐼':'panda','🐨':'koala','🐯':'tiger','🦁':'lion','🐮':'cow',
+    '🐷':'pig','🐸':'frog','🐵':'monkey','🐔':'chicken','🐧':'penguin','🐦':'bird',
+    '🦅':'eagle','🦆':'duck','🦉':'owl','🐺':'wolf','🐗':'boar','🐴':'horse',
+    '🦄':'unicorn','🐝':'bee','🐛':'bug','🦋':'butterfly','🐌':'snail','🐞':'ladybug',
+    '🐍':'snake','🐢':'turtle','🐙':'octopus','🦀':'crab','🐠':'tropical fish',
+    '🐳':'whale','🐋':'whale','🦈':'shark','🐊':'crocodile','🦕':'sauropod','🦖':'t-rex',
+    '🌸':'cherry blossom','🌹':'rose','🌻':'sunflower','🌺':'hibiscus','🌷':'tulip',
+    '🌱':'seedling','🌲':'evergreen tree','🌳':'deciduous tree','🍀':'four leaf clover',
+    '🍎':'red apple','🍐':'pear','🍊':'tangerine','🍋':'lemon','🍌':'banana',
+    '🍉':'watermelon','🍇':'grapes','🍓':'strawberry','🫐':'blueberries','🍑':'peach',
+    '🌈':'rainbow','☀️':'sun','🌤️':'sun behind cloud','⛅':'sun behind cloud','☁️':'cloud',
+    '🌧️':'rain','⛈️':'thunder','❄️':'snowflake','🌊':'wave',
+    '👀':'eyes','👁️':'eye','👂':'ear','👃':'nose','👄':'mouth','👅':'tongue',
+    '🧠':'brain','🦴':'bone','🦷':'tooth','👶':'baby','🧒':'child','👦':'boy','👧':'girl',
+    '🧑':'person','👨':'man','👩':'woman','🧓':'older person',
+    '👮':'police officer','🧑‍💻':'technologist','👨‍💻':'man technologist',
+    '👩‍💻':'woman technologist',
+    '🎓':'graduation cap','🧢':'billed cap','👑':'crown','💎':'gem','👓':'glasses','🕶️':'sunglasses',
+    '🩸':'drop of blood','💊':'pill','🩹':'bandage','🧬':'dna','🦠':'microbe',
+    '☢️':'radioactive','☣️':'biohazard','♻️':'recycling',
+    '🏳️':'white flag','🏴':'black flag','🚩':'red flag','🏁':'checkered flag',
+    '➡️':'right arrow','⬅️':'left arrow','⬆️':'up arrow','⬇️':'down arrow',
+    '↗️':'upper right arrow','↘️':'lower right arrow','↙️':'lower left arrow','↖️':'upper left arrow',
+    '↩️':'left curve','↪️':'right curve','🔄':'counterclockwise','🔃':'clockwise',
+    '➕':'plus','➖':'minus','➗':'division','✖️':'multiply','♾️':'infinity',
+    '‼️':'double exclamation','⁉️':'exclamation question',
+    '©️':'copyright','®️':'registered','™️':'trademark',
+  };
+
+  function emojiToText(str) {
+    return str.replace(EMOJI_RE, (match) => {
+      const desc = EMOJI_MAP[match];
+      if (desc) return ':' + desc + ':';
+      // Fallback: use the emoji's Unicode name if available, or skip
+      return ':emoji:';
+    });
+  }
+
+  const _DEOJ_SKIP = '.sources-section, .thinking-toggle, .memory-used-pill';
+
+  /** Walk all text nodes inside an element and replace emojis with text descriptions */
+  function deEmojify(root) {
+    if (!root || !root.querySelectorAll) return;
+    // Monochrome SVG spans from svgifyEmoji — Unicode lives in aria-label only
+    root.querySelectorAll('.emoji[aria-label]').forEach((span) => {
+      if (span.closest(_DEOJ_SKIP)) return;
+      const label = span.getAttribute('aria-label') || '';
+      span.replaceWith(document.createTextNode(emojiToText(label)));
+    });
+    const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+    const nodes = [];
+    while (walker.nextNode()) nodes.push(walker.currentNode);
+    for (const node of nodes) {
+      // Skip UI elements that use unicode symbols as functional icons
+      if (node.parentElement && node.parentElement.closest(_DEOJ_SKIP)) continue;
+      if (EMOJI_RE.test(node.textContent)) {
+        EMOJI_RE.lastIndex = 0; // reset regex state
+        node.textContent = emojiToText(node.textContent);
+      }
+    }
+  }
+
+  /** Apply or remove text-emoji mode on all chat messages */
+  function applyTextEmojis(enabled) {
+    document.body.classList.toggle('text-emojis', enabled);
+    if (enabled) {
+      document.querySelectorAll('.msg .body').forEach(deEmojify);
+    }
+  }
+
+  // Observe chat history for new/changed messages — de-emojify on the fly
+  let _deEmojifyTimer = null;
+  const _chatObs = new MutationObserver(() => {
+    if (!document.body.classList.contains('text-emojis')) return;
+    clearTimeout(_deEmojifyTimer);
+    _deEmojifyTimer = setTimeout(() => {
+      document.querySelectorAll('.msg .body').forEach(deEmojify);
+    }, 150);
+  });
+  const _chatBox = document.getElementById('chat-history');
+  if (_chatBox) _chatObs.observe(_chatBox, { childList: true, subtree: true });
+
+  // Migrate old toolbar visibility key if present
+  (function migrateOldToolbarVis() {
+    const OLD_KEY = 'zero-toolbar-visibility';
+    try {
+      const old = Storage.getJSON(OLD_KEY, null);
+      if (old && typeof old === 'object') {
+        const current = loadUIVis();
+        let migrated = false;
+        Object.entries(old).forEach(([btnId, val]) => {
+          if (current[btnId] === undefined) {
+            current[btnId] = val;
+            migrated = true;
+          }
+        });
+        if (migrated) saveUIVis(current);
+        Storage.remove(OLD_KEY);
+      }
+    } catch {}
+  })();
+
+  // Expose UI visibility functions for admin.js
+  window.loadUIVis = loadUIVis;
+  window.saveUIVis = saveUIVis;
+  window.applyUIVis = applyUIVis;
+  window.UI_VIS_ADMIN_ONLY = UI_VIS_ADMIN_ONLY;
+  window.UI_VIS_DEFAULT_OFF = UI_VIS_DEFAULT_OFF;
+
+  (function initUIVisibility() {
+    // Apply saved visibility on load
+    applyUIVis(loadUIVis());
+
+    // Generic draggable for all .modal elements
+    const _sharedDragModalIds = new Set(['settings-modal']);
+    try { document.querySelectorAll('.modal').forEach(m => {
+      if (_sharedDragModalIds.has(m.id)) return;
+      const content = m.querySelector('.modal-content');
+      const header = m.querySelector('.modal-header');
+      if (!content || !header) return;
+      let dragX, dragY, startLeft, startTop, dragging = false;
+
+      // Reset to flex-centered position each time modal opens
+      new MutationObserver(() => {
+        if (!m.classList.contains('hidden')) {
+          content.style.position = '';
+          content.style.left = '';
+          content.style.top = '';
+          content.style.right = '';
+          content.style.bottom = '';
+          content.style.margin = '';
+        }
+      }).observe(m, { attributes: true, attributeFilter: ['class'] });
+
+      function startDrag(clientX, clientY) {
+        dragging = true;
+        const rect = content.getBoundingClientRect();
+        dragX = clientX; dragY = clientY;
+        startLeft = rect.left; startTop = rect.top;
+        // Switch to fixed so it can be freely positioned
+        content.style.position = 'fixed';
+        content.style.left = startLeft + 'px';
+        content.style.top = startTop + 'px';
+        content.style.margin = '0';
+      }
+
+      header.addEventListener('mousedown', (e) => {
+        if (e.target.closest('.close-btn')) return;
+        e.preventDefault();
+        startDrag(e.clientX, e.clientY);
+        document.addEventListener('mousemove', onDrag);
+        document.addEventListener('mouseup', stopDrag);
+      });
+      function onDrag(e) {
+        if (!dragging) return;
+        content.style.left = (startLeft + e.clientX - dragX) + 'px';
+        content.style.top = (startTop + e.clientY - dragY) + 'px';
+      }
+      function stopDrag() {
+        dragging = false;
+        document.removeEventListener('mousemove', onDrag);
+        document.removeEventListener('mouseup', stopDrag);
+      }
+
+      // Touch drag is desktop-only — on mobile, modals are bottom sheets and
+      // ui.js handles swipe-down-to-dismiss. Attaching this listener fights
+      // the swipe-dismiss gesture.
+      if (window.innerWidth > 768) {
+        header.addEventListener('touchstart', (e) => {
+          if (e.target.closest('.close-btn')) return;
+          const t = e.touches[0];
+          startDrag(t.clientX, t.clientY);
+          document.addEventListener('touchmove', onTouchDrag, { passive: false });
+          document.addEventListener('touchend', stopTouchDrag);
+        });
+      }
+      function onTouchDrag(e) {
+        if (!dragging) return;
+        e.preventDefault();
+        const t = e.touches[0];
+        content.style.left = (startLeft + t.clientX - dragX) + 'px';
+        content.style.top = (startTop + t.clientY - dragY) + 'px';
+      }
+      function stopTouchDrag() {
+        dragging = false;
+        document.removeEventListener('touchmove', onTouchDrag);
+        document.removeEventListener('touchend', stopTouchDrag);
+      }
+    }); } catch(e) { console.error('Modal drag init error:', e); }
+  })();
+
+  // ── Modal minimize → dock ──
+  // Adds a "_" button next to every modal's close button. Clicking it hides
+  // the modal and adds an entry to a fixed bottom dock; clicking the dock
+  // entry restores the modal. Works for hand-rolled and dynamically-created
+  // modals via a MutationObserver on document.body.
+  (function initModalMinimize() {
+    // custom-preset-modal (the Prompt window) is handled by the new
+    // modalManager dock (registered in _AUTO_WIRE), so the legacy dock must
+    // not also inject a `_`/chip for it.
+    const SKIP_IDS = new Set(['styled-confirm-overlay', 'custom-preset-modal']);
+    const dockEntries = new Map(); // modal element -> dock entry element
+
+    let dock = document.getElementById('modal-dock');
+    if (!dock) {
+      dock = document.createElement('div');
+      dock.id = 'modal-dock';
+      document.body.appendChild(dock);
+    }
+
+    // Keep the dock clear of the sidebar (which can be collapsed, resized,
+    // hidden, or flipped to the right side).
+    function updateDockOffset() {
+      const sidebar = document.getElementById('sidebar');
+      const iconRail = document.getElementById('icon-rail');
+      let leftPx = 0;
+      let rightPx = 0;
+      const sidebarRight = sidebar && sidebar.classList.contains('right-side');
+      const sidebarVisible = sidebar &&
+        !sidebar.classList.contains('hidden') &&
+        sidebar.offsetWidth > 0;
+      const railVisible = iconRail && iconRail.offsetWidth > 0;
+      const sidebarW = sidebarVisible ? sidebar.offsetWidth : 0;
+      const railW = railVisible ? iconRail.offsetWidth : 0;
+      if (sidebarRight) {
+        rightPx = sidebarW + railW;
+      } else {
+        leftPx = sidebarW + railW;
+      }
+      dock.style.left = leftPx + 'px';
+      dock.style.right = rightPx + 'px';
+    }
+    updateDockOffset();
+    // Recompute when sidebar resizes, collapses, or moves sides
+    if (window.ResizeObserver) {
+      const ro = new ResizeObserver(updateDockOffset);
+      const sb = document.getElementById('sidebar');
+      const ir = document.getElementById('icon-rail');
+      if (sb) ro.observe(sb);
+      if (ir) ro.observe(ir);
+    }
+    window.addEventListener('resize', updateDockOffset);
+    // Side-flip / collapse toggles class names on body or sidebar
+    new MutationObserver(updateDockOffset).observe(document.body, {
+      attributes: true, attributeFilter: ['class'],
+    });
+    const sbEl = document.getElementById('sidebar');
+    if (sbEl) {
+      new MutationObserver(updateDockOffset).observe(sbEl, {
+        attributes: true, attributeFilter: ['class', 'style'],
+      });
+    }
+
+    function modalTitle(modal) {
+      const h = modal.querySelector('.modal-header h4, .modal-header h3, .modal-header h2');
+      if (h && h.textContent.trim()) return h.textContent.trim();
+      if (modal.id) return modal.id.replace(/-modal$|-overlay$|-popup$/, '').replace(/-/g, ' ');
+      return 'Window';
+    }
+
+    function removeDockEntry(modal) {
+      const entry = dockEntries.get(modal);
+      if (entry) {
+        entry.remove();
+        dockEntries.delete(modal);
+      }
+    }
+
+    function restoreModal(modal) {
+      modal.classList.remove('minimized');
+      modal.classList.remove('hidden');
+      removeDockEntry(modal);
+      // Bring to front (matches existing focus-on-click behavior)
+      modal.style.zIndex = '';
+    }
+
+    function minimizeModal(modal) {
+      if (modal.classList.contains('hidden')) return;
+      modal.classList.add('minimized');
+      if (dockEntries.has(modal)) return;
+
+      const entry = document.createElement('div');
+      entry.className = 'modal-dock-item';
+      entry.title = `Restore ${modalTitle(modal)}`;
+
+      const label = document.createElement('span');
+      label.className = 'modal-dock-label';
+      label.textContent = modalTitle(modal);
+
+      const closeX = document.createElement('button');
+      closeX.className = 'modal-dock-close';
+      closeX.textContent = '×';
+      closeX.title = 'Close';
+      closeX.addEventListener('click', (e) => {
+        e.stopPropagation();
+        modal.classList.remove('minimized');
+        modal.classList.add('hidden');
+        modal.style.display = '';
+        removeDockEntry(modal);
+      });
+
+      entry.appendChild(label);
+      entry.appendChild(closeX);
+      entry.addEventListener('click', () => restoreModal(modal));
+      dock.appendChild(entry);
+      dockEntries.set(modal, entry);
+    }
+
+    function injectMinimizeButton(modal) {
+      if (!modal || !modal.classList || !modal.classList.contains('modal')) return;
+      if (modal.id && SKIP_IDS.has(modal.id)) return;
+      // Modals managed by the new modalManager (Modals.register) get their own
+      // .modal-minimize-btn and chips via the .minimized-dock-chip system.
+      // Skip them entirely so we don't double-up minimize buttons or chips.
+      if (modal.id && /^email-reader-/.test(modal.id)) return;
+      if (modal.id && window.Modals && window.Modals.isRegistered && window.Modals.isRegistered(modal.id)) return;
+      const header = modal.querySelector('.modal-header');
+      if (!header) return;
+      if (header.querySelector('.minimize-btn, .modal-minimize-btn')) return;
+      const closeBtn = header.querySelector('.close-btn, .modal-close');
+      if (!closeBtn) return;
+
+      const minBtn = document.createElement('button');
+      minBtn.className = 'minimize-btn';
+      minBtn.type = 'button';
+      minBtn.title = 'Minimize';
+      minBtn.textContent = '_';
+      minBtn.addEventListener('mousedown', (e) => e.stopPropagation()); // don't start drag
+      minBtn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        minimizeModal(modal);
+      });
+      closeBtn.parentElement.insertBefore(minBtn, closeBtn);
+
+      // Watch this modal's class so close-from-elsewhere clears the dock entry
+      new MutationObserver(() => {
+        if (modal.classList.contains('hidden') && !modal.classList.contains('minimized')) {
+          removeDockEntry(modal);
+        }
+      }).observe(modal, { attributes: true, attributeFilter: ['class'] });
+    }
+
+    // Initial pass over existing modals
+    document.querySelectorAll('.modal').forEach(injectMinimizeButton);
+
+    // Watch for dynamically-created modals
+    new MutationObserver((mutations) => {
+      for (const m of mutations) {
+        for (const n of m.addedNodes) {
+          if (n.nodeType !== 1) continue;
+          if (n.classList && n.classList.contains('modal')) {
+            injectMinimizeButton(n);
+          }
+          if (n.querySelectorAll) {
+            n.querySelectorAll('.modal').forEach(injectMinimizeButton);
+          }
+        }
+      }
+    }).observe(document.body, { childList: true, subtree: true });
+  })();
+
+  // Preset button (in overflow menu)
+  const overflowPresetBtn = el('overflow-preset-btn');
+  if (overflowPresetBtn) {
+    overflowPresetBtn.addEventListener('click', () => {
+      if (presetsModule && presetsModule.openCustomPresetModal) {
+        presetsModule.openCustomPresetModal();
+      }
+    });
+  }
+
+  // RAG directory
+  const addDirBtn = el('add-directory-btn');
+  if (addDirBtn) {
+    addDirBtn.addEventListener('click', () => {
+      ragModule.addRagDirectory(uiModule.showToast, uiModule.showError);
+    });
+  }
+  
+  const directoryInput = el('rag-directory');
+  if (directoryInput) {
+    directoryInput.addEventListener('keypress', (e) => {
+      if (e.key === 'Enter') {
+        ragModule.addRagDirectory(uiModule.showToast, uiModule.showError);
+      }
+    });
+
+  }
+
+  // Sidebar layout (extracted to js/sidebar-layout.js)
+  initSidebarLayout(Storage, {
+    documentModule, _closeCompareIfActive, _deactivateIncognito,
+    presetsModule, sessionModule, el, _defaultChat, _syncResearchIndicator
+  });
+
+  // Mobile: horizontal swipe on a tabbed window switches tabs. Works for any
+  // tab bar whose buttons are siblings and switch on click (Prompt, Library,
+  // Brain, Theme) — we just click the prev/next tab so the existing switch
+  // logic runs. Swipes that start on interactive controls (sliders, inputs,
+  // the chip dock) are ignored so they don't fight text selection / dragging.
+  (function initTabSwipe() {
+    if (window.innerWidth > 768) return;
+    // [tab-bar selector, tab-button selector] for each tabbed window.
+    const SYSTEMS = [
+      ['.preset-tabs', '.preset-tab'],
+      ['.lib-tabs', '.lib-tab'],
+      ['.memory-tabs', '.memory-tab'],
+      ['.admin-tabs', '.admin-tab'],
+    ];
+    const _IGNORE = 'input, textarea, select, [contenteditable="true"], .preset-range, ' +
+      '.note-cl-row, .minimized-dock-chip, canvas, .email-card-reader';
+    let sx = 0, sy = 0, tracking = false;
+
+    document.addEventListener('touchstart', (e) => {
+      if (window.innerWidth > 768 || e.touches.length !== 1) { tracking = false; return; }
+      if (e.target.closest && e.target.closest(_IGNORE)) { tracking = false; return; }
+      sx = e.touches[0].clientX; sy = e.touches[0].clientY; tracking = true;
+    }, { passive: true });
+
+    document.addEventListener('touchend', (e) => {
+      if (!tracking) return;
+      tracking = false;
+      const t = e.changedTouches[0];
+      if (!t) return;
+      const dx = t.clientX - sx, dy = t.clientY - sy;
+      // Require a deliberate, mostly-horizontal swipe.
+      if (Math.abs(dx) < 60 || Math.abs(dx) < Math.abs(dy) * 1.5) return;
+      for (const [barSel, tabSel] of SYSTEMS) {
+        const bar = document.querySelector(barSel);
+        if (!bar || bar.offsetParent === null) continue;  // not the visible window
+        // Only act if the swipe happened inside this bar's window (not some
+        // other on-screen element).
+        const host = bar.closest('.modal, #notes-pane, .preset-modal-content, .admin-card') || bar.parentElement;
+        const startEl = document.elementFromPoint(sx, sy);
+        if (host && startEl && !host.contains(startEl)) continue;
+        const tabs = [...bar.querySelectorAll(tabSel)];
+        if (tabs.length < 2) continue;
+        let idx = tabs.findIndex(tb => tb.classList.contains('active'));
+        if (idx < 0) idx = 0;
+        // Swipe left (dx<0) → next tab; swipe right (dx>0) → previous.
+        const nextIdx = dx < 0 ? idx + 1 : idx - 1;
+        if (nextIdx < 0 || nextIdx >= tabs.length) return;  // at an edge
+        tabs[nextIdx].click();
+        return;
+      }
+    }, { passive: true });
+  })();
+
+  // Elastic overscroll (rubber-band bounce) — desktop wheel only, on chat-history not container
+  (function initElasticScroll() {
+    const hist = el('chat-history');
+    if (!hist) return;
+    const SNAP_BACK = 'transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94)';
+
+    let wheelPull = 0;
+    let wheelTimer = null;
+    hist.addEventListener('wheel', (e) => {
+      const atTop = hist.scrollTop <= 0 && e.deltaY < 0;
+      const atBottom = hist.scrollTop + hist.clientHeight >= hist.scrollHeight - 1 && e.deltaY > 0;
+      if (!atTop && !atBottom) { wheelPull = 0; return; }
+
+      wheelPull += e.deltaY * -0.03;
+      wheelPull = Math.max(-7, Math.min(7, wheelPull));
+      hist.style.transition = 'none';
+      hist.style.transform = `translateY(${wheelPull}px)`;
+
+      clearTimeout(wheelTimer);
+      wheelTimer = setTimeout(() => {
+        wheelPull = 0;
+        hist.style.transition = SNAP_BACK;
+        hist.style.transform = '';
+      }, 120);
+    }, { passive: true });
+  })();
+
+  // New session button on icon rail
+  const railNewSession = el('rail-new-session');
+  if (railNewSession) {
+    railNewSession.addEventListener('click', async () => {
+      if (!sessionModule) return;
+      if (_closeCompareIfActive()) return;
+      _deactivateIncognito();
+      // Clear character on new chat
+      if (presetsModule && presetsModule.deactivateCharacter) presetsModule.deactivateCharacter();
+      // Clear research mode if active
+      const _resChk = el('research-toggle');
+      if (_resChk && _resChk.checked) _syncResearchIndicator(false);
+      if (await _createDirectChatFromPreferredModel()) return;
+      // No models at all — show welcome screen
+      sessionModule.setCurrentSessionId(null);
+      if (documentModule && documentModule.isPanelOpen && documentModule.isPanelOpen()) documentModule.closePanel();
+      const docBtn3 = el('overflow-doc-btn');
+      if (docBtn3) docBtn3.classList.remove('active', 'has-docs');
+      const box = el('chat-history');
+      if (box) box.innerHTML = '';
+      if (chatModule && chatModule.showWelcomeScreen) {
+        chatModule.showWelcomeScreen();
+      }
+      document.querySelectorAll('.session-item.active').forEach(s => s.classList.remove('active'));
+    });
+  }
+
+  // Mobile new chat button — always go to blank welcome screen.
+  // The send path at chat.js:354 will auto-create a session using /api/default-chat
+  // on first submit, so users can start typing before models finish loading and
+  // the default model attaches when they hit send.
+  const mobileNewChat = el('mobile-new-chat-btn');
+  if (mobileNewChat) {
+    mobileNewChat.addEventListener('click', () => {
+      if (!sessionModule) return;
+      if (_closeCompareIfActive()) return;
+      _deactivateIncognito();
+      _startFreshChat();
+      document.querySelectorAll('.session-item.active').forEach(s => s.classList.remove('active'));
+      // Focus the composer synchronously so mobile keyboards pop open.
+      // iOS Safari only honours programmatic focus inside the original click
+      // callback — a setTimeout breaks the user-gesture chain.
+      const _input = el('message-input');
+      if (_input) { try { _input.focus(); } catch (_) {} }
+    });
+  }
+
+  // Logo click → new chat (same logic as rail new-session button)
+  const brandBtn = el('sidebar-brand-btn');
+  if (brandBtn) {
+    brandBtn.addEventListener('click', async () => {
+      if (!sessionModule) return;
+      if (_closeCompareIfActive()) return;
+      _deactivateIncognito();
+      if (presetsModule && presetsModule.deactivateCharacter) presetsModule.deactivateCharacter();
+      // Clear research toggle when starting a fresh chat (not via research button)
+      _syncResearchIndicator(false);
+      if (await _createDirectChatFromPreferredModel()) return;
+      // No models at all — show welcome screen
+      sessionModule.setCurrentSessionId(null);
+      if (documentModule && documentModule.isPanelOpen && documentModule.isPanelOpen()) documentModule.closePanel();
+      const docBtn2 = el('overflow-doc-btn');
+      if (docBtn2) docBtn2.classList.remove('active', 'has-docs');
+      const box = el('chat-history');
+      if (box) box.innerHTML = '';
+      if (chatModule && chatModule.showWelcomeScreen) chatModule.showWelcomeScreen();
+      document.querySelectorAll('.session-item.active').forEach(s => s.classList.remove('active'));
+    });
+  }
+
+  const sidebarNewChatBtn = el('sidebar-new-chat-btn');
+  if (sidebarNewChatBtn) {
+    sidebarNewChatBtn.addEventListener('click', () => {
+      const brandBtn = el('sidebar-brand-btn');
+      if (brandBtn) brandBtn.click();
+    });
+  }
+
+  // Delete session button on icon rail
+  const railDelete = el('rail-delete-session');
+  if (railDelete) {
+    railDelete.addEventListener('click', async () => {
+      if (!sessionModule) return;
+      const currentId = sessionModule.getCurrentSessionId();
+      if (!currentId) return;
+      const sessions = sessionModule.getSessions();
+      const current = sessions.find(s => s.id === currentId);
+      const name = current ? current.name : 'this session';
+      if (!await uiModule.styledConfirm(`Delete "${name}"?`, { confirmText: 'Delete', danger: true })) return;
+      try {
+        // Find the next session below the current one before deleting
+        const idx = sessions.findIndex(s => s.id === currentId);
+        const nextSession = sessions.filter(s => !s.archived && s.id !== currentId)[Math.max(0, idx)] ||
+                            sessions.find(s => !s.archived && s.id !== currentId);
+        const res = await fetch(`${API_BASE}/api/session/${currentId}`, { method: 'DELETE' });
+        if (res.ok) {
+          await sessionModule.loadSessions();
+          if (nextSession) {
+            await sessionModule.selectSession(nextSession.id);
+          }
+          uiModule.showToast('Session deleted');
+        } else {
+          uiModule.showError('Failed to delete session');
+        }
+      } catch (e) {
+        uiModule.showError('Failed to delete session: ' + e);
+      }
+    });
+  }
+
+  // Textarea auto-resize
+  const textarea = el('message');
+  if (textarea) {
+    uiModule.autoResize(textarea);
+    textarea.addEventListener('input', () => {
+      uiModule.autoResize(textarea);
+    });
+    textarea.addEventListener('paste', () => {
+      setTimeout(() => uiModule.autoResize(textarea), 1);
+    });
+    textarea.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter' && !e.shiftKey && !e.isComposing) {
+        // If ghost autocomplete is active, accept the suggestion instead of submitting
+        if (window._ghostAutocomplete && window._ghostAutocomplete.isActive()) {
+          e.preventDefault();
+          e.stopPropagation();
+          window._ghostAutocomplete.accept();
+          return;
+        }
+        e.preventDefault();
+        e.stopPropagation();
+        // Check if already submitting before triggering form submission
+        const form = el('chat-form');
+        if (form) {
+         const submitBtn = form.querySelector('button[type="submit"]');
+         if (submitBtn) submitBtn.click();
+        }
+      }
+    });
+  }
+
+  // ── Ghost text autocomplete for /new and /create commands ──
+  (function initGhostAutocomplete() {
+    const textarea = el('message');
+    const ghost = document.getElementById('message-ghost');
+    if (!textarea || !ghost) return;
+
+    let modelCache = null;     // { models: [{ mid, url, endpointId, displayName }], ts }
+    let filtered = [];         // currently matching models
+    let cycleIdx = 0;          // index into filtered[]
+    let active = false;        // is ghost visible?
+    const CACHE_TTL = 60000;   // re-fetch after 60s
+    const CMD_RE = /^\/(new|create)\s/i;
+
+    async function fetchModels() {
+      if (modelCache && Date.now() - modelCache.ts < CACHE_TTL) return modelCache.models;
+      try {
+        const res = await fetch(`${API_BASE}/api/models`, { credentials: 'same-origin' });
+        const data = await res.json();
+        const models = [];
+        (data.items || []).forEach(ep => {
+          const displayNames = ep.models_display || ep.models || [];
+          (ep.models || []).forEach((mid, i) => {
+            models.push({
+              mid,
+              url: ep.url,
+              endpointId: ep.endpoint_id || null,
+              displayName: displayNames[i] || mid,
+            });
+          });
+        });
+        modelCache = { models, ts: Date.now() };
+        return models;
+      } catch (e) {
+        console.warn('Ghost autocomplete: failed to fetch models', e);
+        return modelCache ? modelCache.models : [];
+      }
+    }
+
+    function hide() {
+      active = false;
+      filtered = [];
+      cycleIdx = 0;
+      ghost.textContent = '';
+      ghost.style.display = 'none';
+    }
+
+    function show(typed, suggestion) {
+      active = true;
+      ghost.innerHTML = '';
+      // Invisible portion matches what user typed (keeps alignment)
+      const span1 = document.createElement('span');
+      span1.style.visibility = 'hidden';
+      span1.textContent = typed;
+      // Visible faded suggestion portion
+      const span2 = document.createElement('span');
+      span2.className = 'ghost-suggestion';
+      span2.textContent = suggestion;
+      ghost.appendChild(span1);
+      ghost.appendChild(span2);
+      ghost.style.display = 'block';
+    }
+
+    function syncSize() {
+      // Match ghost overlay dimensions to textarea
+      const cs = getComputedStyle(textarea);
+      ghost.style.width = cs.width;
+      ghost.style.height = cs.height;
+    }
+
+    async function update() {
+      const val = textarea.value;
+      const match = val.match(CMD_RE);
+      if (!match) { hide(); return; }
+
+      const prefix = val.slice(match[0].length); // text after "/new " or "/create "
+      const models = await fetchModels();
+      if (!models.length) { hide(); return; }
+
+      // Filter models whose mid or displayName starts with the typed prefix (case-insensitive)
+      const lp = prefix.toLowerCase();
+      filtered = models.filter(m =>
+        m.mid.toLowerCase().startsWith(lp) || m.displayName.toLowerCase().startsWith(lp)
+      );
+
+      if (!filtered.length) { hide(); return; }
+
+      // Clamp cycle index
+      cycleIdx = cycleIdx % filtered.length;
+      const chosen = filtered[cycleIdx];
+      // Determine which name matched for completion
+      const name = chosen.mid.toLowerCase().startsWith(lp) ? chosen.mid : chosen.displayName;
+      const remainder = name.slice(prefix.length);
+      if (!remainder && filtered.length <= 1) { hide(); return; }
+
+      syncSize();
+      show(val, remainder);
+    }
+
+    // --- Event listeners ---
+
+    textarea.addEventListener('input', () => {
+      cycleIdx = 0;
+      update();
+    });
+
+    textarea.addEventListener('keydown', (e) => {
+      if (!active) return;
+
+      if (e.key === 'Tab') {
+        // Tab fills the current suggestion into the textarea
+        e.preventDefault();
+        e.stopPropagation();
+        const val = textarea.value;
+        const match = val.match(CMD_RE);
+        if (match && filtered.length) {
+          const prefix = val.slice(match[0].length);
+          const chosen = filtered[cycleIdx % filtered.length];
+          const lp = prefix.toLowerCase();
+          const name = chosen.mid.toLowerCase().startsWith(lp) ? chosen.mid : chosen.displayName;
+          textarea.value = match[0] + name;
+          textarea.dispatchEvent(new Event('input', { bubbles: true }));
+        }
+        return;
+      }
+
+      if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        e.stopPropagation();
+        cycleIdx = (cycleIdx + 1) % filtered.length;
+        update();
+        return;
+      }
+
+      if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        e.stopPropagation();
+        cycleIdx = (cycleIdx - 1 + filtered.length) % filtered.length;
+        update();
+        return;
+      }
+
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        hide();
+        return;
+      }
+    });
+
+    textarea.addEventListener('blur', hide);
+
+    // Observe textarea resize (from autoResize) to keep ghost in sync
+    const ro = new ResizeObserver(() => { if (active) syncSize(); });
+    ro.observe(textarea);
+
+    // Public API for the Enter handler above
+    window._ghostAutocomplete = {
+      isActive() { return active && filtered.length > 0; },
+      accept() {
+        if (!active || !filtered.length) return;
+        const val = textarea.value;
+        const match = val.match(CMD_RE);
+        if (!match) { hide(); return; }
+        const prefix = val.slice(match[0].length);
+        const chosen = filtered[cycleIdx % filtered.length];
+        const lp = prefix.toLowerCase();
+        const name = chosen.mid.toLowerCase().startsWith(lp) ? chosen.mid : chosen.displayName;
+        textarea.value = match[0] + name;
+        hide();
+        // Trigger input event so autoResize fires
+        textarea.dispatchEvent(new Event('input', { bubbles: true }));
+        // Now submit the form (the /new command handler will process it)
+        setTimeout(() => {
+          const form = el('chat-form');
+          if (form) form.querySelector('button[type="submit"]').click();
+        }, 0);
+      }
+    };
+  })();
+
+  // Keyboard shortcuts (extracted to js/keyboard-shortcuts.js)
+  initKeyboardShortcuts({
+    el, Storage, sessionModule, uiModule, chatModule,
+    adminModule, settingsModule, searchChatModule,
+    _closeCompareIfActive, _deactivateIncognito, API_BASE
+  });
+  
+}
+
+// ============================================
+// INITIALIZATION ON PAGE LOAD
+// ============================================
+function startZeroApp() {
+  if (window.__zeroAppStarted) return;
+  window.__zeroAppStarted = true;
+  // Set CSS variables
+  document.documentElement.style.setProperty('--line-height', '20px');
+
+  // Smooth keyboard open/close on mobile — keep chat scrolled to bottom
+  if (window.visualViewport && 'ontouchstart' in window) {
+    let _prevVPH = visualViewport.height;
+    visualViewport.addEventListener('resize', () => {
+      const delta = visualViewport.height - _prevVPH;
+      _prevVPH = visualViewport.height;
+      // Keyboard opened (viewport shrank significantly)
+      if (delta < -50) {
+        const hist = document.getElementById('chat-history');
+        if (hist) {
+          hist.style.scrollBehavior = 'smooth';
+          hist.scrollTop = hist.scrollHeight;
+          // Reset after animation
+          setTimeout(() => { hist.style.scrollBehavior = ''; }, 300);
+        }
+      }
+    });
+  }
+
+  // Initialize all event listeners
+  try { initializeEventListeners(); } catch(e) { console.error('Event init error:', e); }
+
+  // Reveal the toolbar now that all toggle/overflow state is resolved
+  // (hidden via inline style="visibility:hidden" in HTML to prevent FOUC)
+  const _inputBottom = document.querySelector('.chat-input-bottom');
+  if (_inputBottom) _inputBottom.style.visibility = '';
+
+  fileHandlerModule.init(API_BASE);
+  modelsModule.init(API_BASE);
+  ragModule.init(API_BASE);
+  presetsModule.init(API_BASE);
+  searchModule.init(API_BASE);
+  chatModule.init(API_BASE);
+  chatModule.initListeners();
+  groupModule.init(API_BASE);
+  // Initialize compare module
+  if (compareModule) {
+    compareModule.init(API_BASE);
+  }
+  researchPanelModule.init(API_BASE, markdownModule, sessionModule);
+  // Initialize document editor module
+  if (documentModule) {
+    documentModule.init(API_BASE);
+    // Restore document panel if it was open before refresh
+    const _curSession = sessionModule && sessionModule.getCurrentSessionId();
+    if (_curSession && localStorage.getItem('zero-doc-open-' + _curSession) === '1') {
+      documentModule.loadSessionDocs(_curSession);
+    }
+  }  
+  // Initialize search chat module
+  if (searchChatModule) {
+    searchChatModule.init(API_BASE);
+  }
+
+  // Search buttons — icon rail + sidebar
+  const railSearchBtn = el('rail-search-btn');
+  if (railSearchBtn) {
+    railSearchBtn.addEventListener('click', () => {
+      if (searchChatModule) searchChatModule.openSearch();
+    });
+  }
+
+  // Rail tool buttons — delegate to sidebar tool buttons
+  const _railToolMap = {
+    'rail-compare':   'tool-compare-btn',
+    'rail-research':  'tool-research-btn',
+    'rail-cookbook':   'tool-cookbook-btn',
+    'rail-archive':   'tool-library-btn',
+    'rail-gallery':   'tool-gallery-btn',
+    'rail-tasks':     'tool-tasks-btn',
+    'rail-calendar':  'tool-calendar-btn',
+    'rail-notes':     'tool-notes-btn',
+    'rail-memory':    'tool-memory-btn',
+    'rail-theme':     'tool-theme-btn',
+    'rail-email':     'email-section-title',
+  };
+  Object.entries(_railToolMap).forEach(([railId, toolId]) => {
+    const railBtn = el(railId);
+    if (railBtn) {
+      railBtn.addEventListener('click', () => {
+        const toolBtn = el(toolId);
+        if (toolBtn) toolBtn.click();
+      });
+    }
+  });
+
+  // Rail chats — click to open the completed background session
+  const _railChatsBtn = el('rail-chats');
+  if (_railChatsBtn) {
+    _railChatsBtn.addEventListener('click', () => {
+      const targetSid = _railChatsBtn.dataset.targetSession;
+      if (targetSid && window.sessionModule) {
+        window.sessionModule.selectSession(targetSid);
+      }
+      // Clear notification — session will call clearStreamComplete on load
+      _railChatsBtn.classList.remove('rail-notify', 'rail-notify-success');
+      delete _railChatsBtn.dataset.targetSession;
+      _syncRailDynamic();
+    });
+  }
+
+  // Rail documents — toggle doc panel on/off (not library)
+  const _railDocsBtn = el('rail-documents');
+  if (_railDocsBtn) {
+    _railDocsBtn.addEventListener('click', () => {
+      const ob = el('overflow-doc-btn');
+      if (ob) ob.click();
+    });
+  }
+
+  // Rail: settings button
+  const _railSettings = el('rail-settings');
+  if (_railSettings) {
+    _railSettings.addEventListener('click', () => {
+      const sidebar = document.getElementById('sidebar');
+      if (sidebar) sidebar.classList.remove('hidden');
+      syncRailSide();
+      // Scroll to bottom where settings typically are
+      const sidebarInner = document.querySelector('.sidebar-inner');
+      if (sidebarInner) sidebarInner.scrollTo({ top: sidebarInner.scrollHeight, behavior: 'smooth' });
+    });
+  }
+
+  // Rail: admin button
+  const _railAdmin = el('rail-admin');
+  if (_railAdmin) {
+    _railAdmin.addEventListener('click', () => {
+      // Try to open admin modal
+      const adminBtn = document.querySelector('[data-modal="admin-modal"]') || el('tool-admin-btn');
+      if (adminBtn) adminBtn.click();
+    });
+  }
+
+  // Sync the contextual rail icons. Tool launchers (calendar/compare/cookbook/
+  // research/gallery/tasks/archive/memory/notes/theme/email) are now
+  // always-visible launchers, so only the doc + background-chat indicators
+  // are shown/hidden dynamically here.
+  function _syncRailDynamic() {
+    // Show doc icon if panel is open OR session has documents
+    const docPanelOpen = window.documentModule && window.documentModule.isPanelOpen();
+    const docIndicator = el('doc-indicator-btn');
+    const hasDocs = docIndicator && docIndicator.classList.contains('visible');
+    const docOpen = docPanelOpen || hasDocs;
+    const hasChatNotif = el('rail-chats')?.classList.contains('rail-notify');
+
+    const _show = (id, visible) => { const b = el(id); if (b) b.style.display = visible ? '' : 'none'; };
+    _show('rail-documents', docOpen);
+    _show('rail-chats', !!hasChatNotif);
+  }
+  window._syncRailDynamic = _syncRailDynamic;
+  // Sync periodically and on key events
+  setInterval(_syncRailDynamic, 1000);
+  document.addEventListener('overflow-state-change', _syncRailDynamic);
+
+  const sidebarSearchBtn = el('sidebar-search-btn');
+  if (sidebarSearchBtn) {
+    sidebarSearchBtn.addEventListener('click', () => {
+      if (searchChatModule) searchChatModule.openSearch();
+    });
+  }
+  // Modify form submit to handle special modes
+  const chatForm = document.getElementById('chat-form');
+  const originalSubmit = chatModule.handleChatSubmit;
+  let _submitting = false;
+
+  function handleSubmit(e) {
+    if (e) e.preventDefault();
+    // Debounce: prevent double-submit while a request is being initiated
+    if (_submitting) return;
+    _submitting = true;
+    // Release after a short delay (stream start sets its own isStreaming guard)
+    setTimeout(() => { _submitting = false; }, 300);
+
+    // Compare mode: route submit to compare handler (same message to all panes)
+    if (compareModule && compareModule.isActive()) {
+      return compareModule.handleCompareSubmit(e);
+    }
+
+    // Group chat: route to group module
+    if (groupModule && groupModule.isActive()) {
+      console.log('[group] Submit intercepted');
+      const msgInput = document.getElementById('message');
+      const msg = msgInput ? msgInput.value.trim() : '';
+      if (!msg) { console.log('[group] Empty message, skipping'); return; }
+      console.log('[group] Sending:', msg);
+      chatRenderer.hideWelcomeScreen();
+      chatRenderer.addMessage('user', msg);
+      msgInput.value = '';
+      groupModule.sendMessage(msg);
+      return;
+    }
+
+    return originalSubmit.call(chatModule, e);
+  }
+
+  chatForm.onsubmit = handleSubmit;
+
+  // ── Dual-purpose send/mic button ──
+  const sendBtn = document.querySelector('.send-btn');
+  const messageInput = el('message');
+  const modelPickerWrap = document.getElementById('model-picker-wrap');
+
+  const _sendIcon = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19V5M5 12l7-7 7 7"/></svg>';
+  const _micIcon = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>';
+  const _stopIcon = '<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="6" width="12" height="12" rx="2"/></svg>';
+  const _newChatIcon = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>';
+
+  // Expose icons globally so chat.js updateSubmitButton can use them
+  window._zeroBtnIcons = { send: _sendIcon, mic: _micIcon, stop: _stopIcon, newChat: _newChatIcon };
+
+  function _isSttEnabled() {
+    return voiceRecorderModule._sttProvider && voiceRecorderModule._sttProvider !== 'disabled';
+  }
+
+  function _hasAttachments() {
+    return fileHandlerModule.getPendingCount && fileHandlerModule.getPendingCount() > 0;
+  }
+
+  function _updateSendBtnIcon() {
+    if (!sendBtn) return;
+    // Don't override if streaming (stop button) or recording
+    if (sendBtn.dataset.mode === 'streaming' || sendBtn.dataset.mode === 'recording') return;
+    const prevMode = sendBtn.dataset.mode || '';
+    const hasText = messageInput && messageInput.value.trim().length > 0;
+    const hasFiles = _hasAttachments();
+    let newMode;
+    if (!hasText && !hasFiles && _isSttEnabled()) {
+      clearTimeout(sendBtn._collapseTimer);
+      sendBtn.innerHTML = _micIcon;
+      sendBtn.title = 'Record voice';
+      newMode = 'mic';
+      sendBtn.classList.add('mic-mode');
+      sendBtn.classList.remove('newchat-mode', 'newchat-expanded');
+    } else if (!hasText && !hasFiles && !_isSttEnabled()) {
+      clearTimeout(sendBtn._collapseTimer);
+      // Group chat: always show send button, never newchat mode
+      if (groupModule && groupModule.isActive()) {
+        sendBtn.innerHTML = _sendIcon;
+        sendBtn.title = 'Send to group';
+        newMode = 'idle';
+        sendBtn.classList.remove('mic-mode', 'newchat-mode', 'newchat-expanded');
+      } else {
+      // Check if we're already on a fresh empty session (welcome screen visible)
+      const isEmptySession = document.getElementById('chat-container')?.classList.contains('welcome-active');
+      if (isEmptySession) {
+        // Already on new chat — show arrow in muted style (ready to type)
+        sendBtn.innerHTML = _sendIcon;
+        sendBtn.title = 'Send message';
+        newMode = 'idle';
+        sendBtn.classList.add('newchat-mode'); // muted gray style
+        sendBtn.classList.remove('mic-mode', 'newchat-expanded');
+        clearTimeout(sendBtn._expandTimer);
+      } else {
+        sendBtn.innerHTML = _newChatIcon + '<span class="send-btn-label">+ New</span>';
+        sendBtn.title = 'New chat';
+        newMode = 'newchat';
+        sendBtn.classList.add('newchat-mode');
+        sendBtn.classList.remove('mic-mode');
+        // The button stays a 32px compact icon (no auto-expand to label —
+        // the "+ New" label inside is for screen readers only; sighted users
+        // see the spinning + on hover + the title tooltip).
+        clearTimeout(sendBtn._expandTimer);
+        sendBtn.classList.remove('newchat-expanded');
+      }
+      } // close group-else
+    } else {
+      newMode = 'send';
+      clearTimeout(sendBtn._expandTimer);
+      const wasExpanded = sendBtn.classList.contains('newchat-expanded');
+      const wasNewchat = prevMode === 'newchat' || prevMode === 'mic';
+      if (wasExpanded || wasNewchat) {
+        // Collapse pill if expanded, then spin arrow in (same as + spin-in)
+        if (wasExpanded) sendBtn.classList.remove('newchat-expanded');
+        const delay = wasExpanded ? 300 : 0;
+        setTimeout(() => {
+          if (sendBtn.dataset.mode !== 'send') return;
+          sendBtn.innerHTML = _sendIcon;
+          sendBtn.title = 'Send message';
+          sendBtn.classList.remove('mic-mode', 'newchat-mode', 'anim-spin-swap');
+          sendBtn.classList.add('anim-spin');
+          sendBtn.addEventListener('animationend', () => sendBtn.classList.remove('anim-spin'), { once: true });
+        }, delay);
+      } else {
+        sendBtn.innerHTML = _sendIcon;
+        sendBtn.title = 'Send message';
+        sendBtn.classList.remove('mic-mode', 'newchat-mode', 'newchat-expanded', 'anim-spin', 'anim-launch', 'anim-land');
+      }
+    }
+    // Animate icon spin — when switching TO newchat or mic (the + or mic
+    // appearing). The previous `prevMode && ...` guard skipped this after
+    // streaming ended (dataset.mode is reset to '' there, an empty falsy
+    // string), which let the lingering anim-land class from the stop icon's
+    // entry replay on the +, making it look like the + comes from below.
+    // Never animate into send mode (arrow) — it should just appear instantly.
+    if (newMode !== prevMode && (newMode === 'newchat' || newMode === 'mic')) {
+      if (!sendBtn.classList.contains('anim-spin')) {
+        sendBtn.classList.remove('anim-launch', 'anim-land');
+        sendBtn.classList.add('anim-spin');
+        sendBtn.addEventListener('animationend', () => sendBtn.classList.remove('anim-spin'), { once: true });
+      }
+    }
+    sendBtn.dataset.mode = newMode;
+  }
+
+  if (sendBtn) {
+    sendBtn.addEventListener('click', (e) => {
+      e.preventDefault();
+
+      // If recording, stop recording
+      if (sendBtn.dataset.mode === 'recording' || voiceRecorderModule.getIsRecording()) {
+        voiceRecorderModule.stopRecording();
+        return;
+      }
+
+      const hasText = messageInput && messageInput.value.trim().length > 0;
+      const hasFiles = _hasAttachments();
+
+      // New chat mode — empty input, no attachments, no STT
+      if (!hasText && !hasFiles && sendBtn.dataset.mode === 'newchat') {
+        if (sessionModule) {
+          const sessions = sessionModule.getSessions();
+          const currentId = sessionModule.getCurrentSessionId();
+          const current = sessions.find(s => s.id === currentId);
+          if (current && current.endpoint_url && current.model) {
+            sessionModule.createDirectChat(current.endpoint_url, current.model, current.endpoint_id);
+          } else {
+            // Fallback to rail button
+            const railNew = el('rail-new-session');
+            if (railNew) railNew.click();
+          }
+        }
+        return;
+      }
+
+      // If input is empty and STT is enabled, start recording
+      if (!hasText && !hasFiles && _isSttEnabled()) {
+        sendBtn.innerHTML = _stopIcon;
+        sendBtn.title = 'Stop recording';
+        sendBtn.dataset.mode = 'recording';
+        sendBtn.classList.add('recording');
+        voiceRecorderModule.startRecording(
+          (audioFile) => fileHandlerModule.addFiles([audioFile]),
+          uiModule.showToast,
+          uiModule.showError
+        );
+        return;
+      }
+
+      // Otherwise, send message
+      handleSubmit(e);
+    });
+  }
+
+  // Enter to send (shift+enter for newline), or new chat when empty
+  if (messageInput) {
+    messageInput.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter' && !e.shiftKey && !e.isComposing) {
+        e.preventDefault();
+        // Flush the debounced icon update so dataset.mode reflects the current
+        // text state. Without this, a fast type-and-Enter would still see the
+        // stale 'newchat' mode and open a new chat instead of sending.
+        try { _updateSendBtnIcon(); } catch {}
+        if (sendBtn && sendBtn.dataset.mode === 'newchat') {
+          const railNew = el('rail-new-session');
+          if (railNew) railNew.click();
+          return;
+        }
+        handleSubmit(e);
+      }
+    });
+  }
+
+  // Toggle mic/send icon on input change + hide model picker after enough text
+  if (messageInput) {
+    const _debouncedUpdateIcon = uiModule.debounce(_updateSendBtnIcon, 50);
+    const _MODEL_PICKER_HIDE_CHARS = 10;
+    const _syncModelPickerAutohide = () => {
+      const hidePicker = (messageInput.value || '').replace(/\s/g, '').length >= _MODEL_PICKER_HIDE_CHARS;
+      if (modelPickerWrap) {
+        modelPickerWrap.classList.toggle('model-picker-autohide', hidePicker);
+      }
+    };
+    window._syncModelPickerAutohide = _syncModelPickerAutohide;
+    _syncModelPickerAutohide();
+    messageInput.addEventListener('input', () => {
+      _syncModelPickerAutohide();
+      _debouncedUpdateIcon();
+    }, { passive: true });
+  }
+
+  // Collapse "New Session" label on scroll
+  const _chatScroll = document.getElementById('chat-container');
+  if (_chatScroll && sendBtn) {
+    _chatScroll.addEventListener('scroll', () => {
+      if (sendBtn.classList.contains('newchat-expanded')) {
+        sendBtn.classList.remove('newchat-expanded');
+      }
+    }, { passive: true });
+  }
+
+  // Expose globally so voiceRecorder can trigger update after async fetch
+  window._updateSendBtnIcon = _updateSendBtnIcon;
+
+  // Initial icon state
+  _updateSendBtnIcon();
+
+  // Auto-focus input on load
+  if (messageInput) {
+    setTimeout(() => messageInput.focus(), 100);
+  }
+
+  // Add drag and drop handlers for the chat container
+  const chatContainer = el('chat-container');
+
+  // Prevent default to allow drop
+  const chatInputBar = chatContainer.querySelector('.chat-input-bar');
+  function _showDropHighlight() {
+    chatContainer.style.backgroundColor = 'rgba(0, 170, 255, 0.1)';
+    chatContainer.style.transition = 'background-color 0.2s ease';
+    if (chatInputBar) {
+      chatInputBar.style.outline = '2px dashed color-mix(in srgb, var(--accent, #0af) 50%, transparent)';
+      chatInputBar.style.outlineOffset = '-2px';
+      chatInputBar.style.background = 'color-mix(in srgb, var(--accent, #0af) 8%, var(--bg))';
+      chatInputBar.style.transition = 'outline 0.2s ease, background 0.2s ease';
+    }
+  }
+  function _hideDropHighlight() {
+    chatContainer.style.backgroundColor = '';
+    if (chatInputBar) {
+      chatInputBar.style.outline = '';
+      chatInputBar.style.outlineOffset = '';
+      chatInputBar.style.background = '';
+    }
+  }
+
+  chatContainer.addEventListener('dragover', (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    _showDropHighlight();
+  });
+
+  chatContainer.addEventListener('drop', (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    _hideDropHighlight();
+    const files = Array.from(e.dataTransfer.files);
+    if (files.length === 0) return;
+    fileHandlerModule.addFiles(files);
+    fileHandlerModule.renderAttachStrip();
+    uiModule.showToast(`Added ${files.length} file${files.length > 1 ? 's' : ''} to chat`);
+  });
+
+  chatContainer.addEventListener('dragleave', (e) => {
+    e.preventDefault();
+    _hideDropHighlight();
+  });
+  
+  // Make the attachment strip also a drop target
+  const attachStrip = el('attach-strip');
+  attachStrip.addEventListener('dragover', (e) => {
+    e.preventDefault();
+    attachStrip.style.backgroundColor = 'rgba(0, 170, 255, 0.1)';
+    attachStrip.style.borderRadius = '4px';
+  });
+  
+  attachStrip.addEventListener('drop', (e) => {
+    e.preventDefault();
+    attachStrip.style.backgroundColor = '';
+    
+    const files = Array.from(e.dataTransfer.files);
+    if (files.length === 0) return;
+
+    uiModule.showToast(`Added ${files.length} file${files.length > 1 ? 's' : ''} to chat`);
+
+  });
+  
+  attachStrip.addEventListener('dragleave', (e) => {
+    e.preventDefault();
+    attachStrip.style.backgroundColor = '';
+  });
+
+  // ── Compare-mode file drop shield ──────────────────────────────────────────
+  // Compare reuses #chat-container, but each pane renders into a sandboxed
+  // <iframe>. Iframes swallow drag-and-drop events: a file dropped on a pane is
+  // handled by the iframe, not the parent, so the browser loads the file *inside
+  // the pane* ("behind" the app) instead of attaching it. The chatContainer drop
+  // handler above never sees it because the event doesn't bubble out of the frame.
+  //
+  // Fix: while a file drag is active in Compare, raise a single full-window shield
+  // that sits above every pane/iframe and becomes the drop target. The drop then
+  // lands on the parent document and we route the files into the shared composer
+  // (the same pending-files pipeline the picker and paste use). Scoped to Compare
+  // via the .compare-active class, so normal chat and the tool dropzones (gallery,
+  // RAG, document editor, …) are unaffected.
+  let _cmpDropShield = null;
+  const _isFileDrag = (e) => {
+    const types = e.dataTransfer && e.dataTransfer.types;
+    return !!types && Array.prototype.indexOf.call(types, 'Files') !== -1;
+  };
+  const _compareActive = () => {
+    const c = el('chat-container');
+    return !!c && c.classList.contains('compare-active');
+  };
+  const _showCmpShield = () => {
+    if (!_cmpDropShield) {
+      _cmpDropShield = document.createElement('div');
+      _cmpDropShield.id = 'compare-drop-shield';
+      _cmpDropShield.setAttribute('aria-hidden', 'true');
+      _cmpDropShield.style.cssText = 'position:fixed;inset:0;z-index:2147483646;' +
+        'display:none;align-items:center;justify-content:center;' +
+        'background:color-mix(in srgb, var(--accent, #0af) 16%, rgba(0,0,0,0.5));' +
+        'backdrop-filter:blur(2px);';
+      const _box = document.createElement('div');
+      _box.style.cssText = 'pointer-events:none;border:2px dashed rgba(255,255,255,0.9);' +
+        'border-radius:14px;padding:20px 28px;background:rgba(0,0,0,0.4);' +
+        'font:600 16px/1.4 system-ui,sans-serif;color:#fff;';
+      _box.textContent = 'Drop files to attach';
+      _cmpDropShield.appendChild(_box);
+      document.body.appendChild(_cmpDropShield);
+    }
+    _cmpDropShield.style.display = 'flex';
+  };
+  const _hideCmpShield = () => { if (_cmpDropShield) _cmpDropShield.style.display = 'none'; };
+  // Capture phase so we raise the shield before the pointer reaches an iframe.
+  window.addEventListener('dragenter', (e) => {
+    if (_isFileDrag(e) && _compareActive()) _showCmpShield();
+  }, true);
+  window.addEventListener('dragover', (e) => {
+    if (!_isFileDrag(e) || !_compareActive()) return;
+    e.preventDefault();                       // mark as a valid drop target
+    if (e.dataTransfer) e.dataTransfer.dropEffect = 'copy';
+    _showCmpShield();
+  }, true);
+  window.addEventListener('dragleave', (e) => {
+    // Hide only when the drag actually leaves the window (no relatedTarget).
+    if (_compareActive() && !e.relatedTarget) _hideCmpShield();
+  }, true);
+  window.addEventListener('dragend', _hideCmpShield, true);
+  window.addEventListener('drop', (e) => {
+    if (!_isFileDrag(e) || !_compareActive()) return;
+    e.preventDefault();
+    _hideCmpShield();
+    const files = Array.from(e.dataTransfer.files || []);
+    if (!files.length) return;
+    fileHandlerModule.addFiles(files);
+    fileHandlerModule.renderAttachStrip();
+    uiModule.showToast(`Added ${files.length} file${files.length > 1 ? 's' : ''} to attach`);
+  }, true);
+
+  // Load initial data
+  presetsModule.loadPresets(uiModule.showError);
+
+  if (sessionModule) {
+    sessionModule.initDependencies({
+      API_BASE: API_BASE,
+      el: el,
+      showToast: uiModule.showToast,
+      showError: uiModule.showError,
+      addMessage: chatModule.addMessage,
+      renderContent: markdownModule.renderContent,
+      scrollHistory: uiModule.scrollHistoryInstant
+    });
+
+    // Load sessions first (critical path) — remove loader when done
+    sessionModule.loadSessions()
+      .catch(e => console.warn('loadSessions error:', e))
+      .finally(() => {
+        const loader = document.getElementById('app-loader');
+        if (loader) { loader.style.opacity = '0'; setTimeout(() => loader.remove(), 300); }
+        // Fire any URL route opener now that sessions + module wiring are
+        // ready. Deferred from up top of init for exactly this reason.
+        if (window._zeroRouteOpener) {
+          try { window._zeroRouteOpener(); } catch (_) {}
+          window._zeroRouteOpener = null;
+        }
+      });
+  } else {
+    console.error('Session module not loaded!');
+  }
+
+  // Non-critical: load in parallel, resolve silently
+  modelsModule.refreshModels(true).then(() => {
+    const modelsBox = document.getElementById('models');
+    const hasModels = modelsBox && modelsBox.querySelector('.models-row');
+    if (!hasModels) {
+      const tip = document.getElementById('welcome-tip');
+      if (tip) tip.textContent = 'Add an AI endpoint from Settings in the sidebar, or paste an endpoint/API key into the chat.';
+    }
+  }).catch(() => {});
+  modelsModule.refreshProviders();
+  ragModule.loadPersonalDocs();
+  memoryModule.loadMemories(); // Ensure memories are loaded on page load
+  
+  // Ensure the memory list is rendered after loading
+  setTimeout(async () => {
+    await memoryModule.loadMemories();
+  }, 1000);
+  
+  // Ensure proper initial state
+  voiceRecorderModule.init();
+  if (censorModule) censorModule.init();
+
+  // Auto-focus message input on load
+  const msgEl = document.getElementById('message');
+  if (msgEl) msgEl.focus();
+  
+  // Initialize mouse-based drag for sidebar sections
+  const sidebar = document.getElementById('sidebar');
+  const sidebarInner = sidebar ? sidebar.querySelector('.sidebar-inner') : sidebar;
+
+  // ── Subtle elastic overscroll for sidebar ──
+  if (sidebarInner) {
+    const MAX_PULL = 8;
+    let _overscroll = 0;
+    let _resetTimer = null;
+    sidebarInner.addEventListener('wheel', (e) => {
+      const el = sidebarInner;
+      const atTop = el.scrollTop <= 0 && e.deltaY < 0;
+      const atBottom = el.scrollTop + el.clientHeight >= el.scrollHeight - 1 && e.deltaY > 0;
+      if (!atTop && !atBottom) { _overscroll = 0; return; }
+      // Accumulate overscroll with diminishing returns
+      _overscroll += Math.abs(e.deltaY) * 0.15;
+      const pull = Math.min(_overscroll, MAX_PULL);
+      const dir = atTop ? 1 : -1;
+      el.style.transition = 'none';
+      el.style.transform = `translateY(${dir * pull}px)`;
+      // Reset after scrolling stops
+      clearTimeout(_resetTimer);
+      _resetTimer = setTimeout(() => {
+        el.style.transition = 'transform 0.3s cubic-bezier(0.25, 1, 0.5, 1)';
+        el.style.transform = '';
+        _overscroll = 0;
+      }, 120);
+    }, { passive: true });
+  }
+
+  // ── Global touch-scroll guard for sidebar ──
+  // Suppress click events when the user was scrolling (finger moved).
+  // This prevents accidental session/model/setting selection while swiping.
+  if (sidebarInner && 'ontouchstart' in window) {
+    let _sidebarTouchMoved = false;
+    let _sidebarTouchStartY = 0;
+    sidebarInner.addEventListener('touchstart', (e) => {
+      _sidebarTouchMoved = false;
+      _sidebarTouchStartY = e.touches[0].clientY;
+    }, { passive: true });
+    sidebarInner.addEventListener('touchmove', (e) => {
+      // Only flag as scroll if finger moved more than 8px vertically
+      if (Math.abs(e.touches[0].clientY - _sidebarTouchStartY) > 8) {
+        _sidebarTouchMoved = true;
+      }
+    }, { passive: true });
+    sidebarInner.addEventListener('click', (e) => {
+      if (_sidebarTouchMoved) {
+        e.stopPropagation();
+        e.preventDefault();
+        _sidebarTouchMoved = false;
+      }
+    }, true); // capture phase — intercepts before any child handlers
+  }
+
+  // Section collapse/expand + drag reorder (extracted to js/section-management.js)
+  initSectionCollapse(Storage);
+  initSectionDrag(Storage, loadUIVis);
+  
+  // Handle drag over and out for individual sections
+  const sections = document.querySelectorAll('.section[draggable="true"]');
+  sections.forEach(section => {
+    section.addEventListener('dragover', (e) => {
+      e.preventDefault();
+      e.dataTransfer.dropEffect = 'move';
+      
+      // Only show visual feedback if we're not dragging over the active element
+      const activeId = e.dataTransfer.getData('text/plain');
+      if (activeId && activeId !== section.id) {
+        section.setAttribute('dnd-over', 'true');
+      }
+    });
+    
+    section.addEventListener('dragleave', (e) => {
+      // Check if we're actually leaving the element
+      const rect = section.getBoundingClientRect();
+      if (e.clientY < rect.top || e.clientY > rect.bottom || 
+          e.clientX < rect.left || e.clientX > rect.right) {
+        section.setAttribute('dnd-over', 'false');
+      }
+    });
+  });
+  
+  // Restore saved order on load
+  const savedOrder = Storage.get(Storage.KEYS.SECTION_ORDER);
+  if (savedOrder) {
+    try {
+      const order = JSON.parse(savedOrder);
+      const innerContainer = sidebarInner || document.getElementById('sidebar');
+
+      // Create a document fragment to minimize reflows
+      const fragment = document.createDocumentFragment();
+
+      // First, collect all sections in the desired order
+      for (const id of order) {
+        const section = document.getElementById(id);
+        if (section) {
+          fragment.appendChild(section);
+        }
+      }
+
+      // Append any remaining sections (in case new ones were added)
+      sections.forEach(section => {
+        if (!order.includes(section.id)) {
+          fragment.appendChild(section);
+        }
+      });
+
+      // Finally, add all sections back to the container
+      innerContainer.appendChild(fragment);
+    } catch (e) {
+      console.error('Failed to restore sidebar order:', e);
+    }
+  }
+  
+
+
+  if (window.hljs) {
+    console.log('Highlighting all code blocks on page load');
+    document.querySelectorAll('pre code:not(.hljs)').forEach(block => {
+      window.hljs.highlightElement(block);
+    });
+  }
+}
+
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', startZeroApp, { once: true });
+} else {
+  startZeroApp();
+}