fix(ui): close model picker and overflow via real dismiss helpers

closeAllPopups and Escape looked for a non-existent .open class on the
model picker and overflow menus (they use .hidden/.closing). Opening
overflow only set visibility:hidden on the picker, leaving zombie open
state. Export closeModelPicker, register it on the Escape menu stack
(so Escape works while #message is focused), and route dismiss through
the real close helpers.

Co-authored-by: Arda Tuğsat <arda-tugsat@users.noreply.github.com>

Author: arda-tugsat

static/app.js

@@ -398,9 +398,22 @@ function initializeEventListeners() {
   // windows are deliberately NOT touched here — those close via their own
   // controls.
   window.closeAllPopups = function closeAllPopups(except) {
+    // These menus use the `.open` class.
     document.querySelectorAll(
-      '.export-dropdown-menu.open, .overflow-menu.open, .model-picker-menu.open, .doc-overflow-menu.open'
+      '.export-dropdown-menu.open, .doc-overflow-menu.open'
     ).forEach(m => { if (m !== except) m.classList.remove('open'); });
+    // Overflow + model picker use `.hidden` / `.closing` — never `.open`.
+    // Calling the real close helpers plays their fold-in animations and
+    // clears zombie open state (visibility:hidden alone used to leave the
+    // picker "open" under the overflow menu).
+    const overflowMenu = document.getElementById('overflow-menu');
+    if (overflowMenu && overflowMenu !== except && typeof window.closeOverflowMenu === 'function') {
+      window.closeOverflowMenu();
+    }
+    const modelPickerMenu = document.getElementById('model-picker-menu');
+    if (modelPickerMenu && modelPickerMenu !== except && typeof window.closeModelPicker === 'function') {
+      window.closeModelPicker();
+    }
     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(); });
@@ -714,10 +727,21 @@ function initializeEventListeners() {
         return;
       }
 
-      // Model picker popup — close before opening any modals
+      // Model picker popup — uses .hidden/.closing, not .open. Prefer the
+      // real close helper (also registered on the Escape menu stack so this
+      // path is usually already handled when focus is in #message).
       const modelPickerMenu = document.getElementById('model-picker-menu');
-      if (modelPickerMenu && modelPickerMenu.classList.contains('open')) {
-        modelPickerMenu.classList.remove('open');
+      if (modelPickerMenu && !modelPickerMenu.classList.contains('hidden')) {
+        if (typeof window.closeModelPicker === 'function') window.closeModelPicker();
+        else {
+          modelPickerMenu.classList.add('hidden');
+          modelPickerMenu.classList.remove('closing');
+        }
+        return;
+      }
+      const overflowMenuEsc = document.getElementById('overflow-menu');
+      if (overflowMenuEsc && !overflowMenuEsc.classList.contains('hidden') && typeof window.closeOverflowMenu === 'function') {
+        window.closeOverflowMenu();
         return;
       }
 
@@ -2055,8 +2079,9 @@ function initializeEventListeners() {
       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';
+      // Actually close the model picker (don't just hide it with visibility —
+      // that left a zombie open state when overflow closed).
+      if (typeof window.closeModelPicker === 'function') window.closeModelPicker();
       // 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.
@@ -2079,7 +2104,6 @@ function initializeEventListeners() {
       // 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(() => {
@@ -2088,6 +2112,7 @@ function initializeEventListeners() {
         if (ownerWrap) ownerWrap.appendChild(menu);  // restore from <body> portal
       }, 400);
     }
+    window.closeOverflowMenu = closeOverflowMenu;
     // 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.

static/js/modelPicker.js

@@ -5,9 +5,21 @@ import { providerLogo } from './providers.js';
 import uiModule from './ui.js';
 import settingsModule from './settings.js';
 import { sortModelObjects } from './modelSort.js';
+import { registerMenuDismiss } from './escMenuStack.js';
 
 const API_BASE = window.location.origin;
 
+// Real close path for the picker (uses .hidden/.closing, not .open).
+// Stashed so closeAllPopups / Escape / overflow can dismiss without poking classes.
+let _closePickerFn = null;
+let _unregisterPickerEsc = () => {};
+
+/** Close the model picker if open. Safe to call when closed or before init. */
+export function closeModelPicker() {
+  if (typeof _closePickerFn === 'function') _closePickerFn();
+}
+if (typeof window !== 'undefined') window.closeModelPicker = closeModelPicker;
+
 // ── Recent + Favorites persistence ──
 // Recent is auto-tracked (last 5 picks, most-recent-first) and lives in its
 // own key. Favorites is the SAME key the sidebar Models section uses, so a
@@ -181,28 +193,102 @@ function _initModelPickerDropdown() {
   const searchRow = menu ? menu.querySelector('.model-picker-search-row') : null;
   const refreshBtn = document.getElementById('model-picker-refresh-btn');
   if (!wrap || !btn || !menu || !search || !listEl) return;
+  // Guard against double-wiring when sessions.js is loaded twice under
+  // different module URLs (bare vs ?v=) — second handler would open then close.
+  if (btn.dataset.modelPickerWired === '1') return;
+  btn.dataset.modelPickerWired = '1';
+
+  let _closeTimer = null;
+  let _ignoreCloseUntil = 0;
+  let _docClickHandler = null;
+  let _onCloseAnimEnd = null;
+
+  function _detachDocClick() {
+    if (!_docClickHandler) return;
+    document.removeEventListener('click', _docClickHandler, true);
+    _docClickHandler = null;
+  }
+
+  function _cancelCloseAnim() {
+    if (_onCloseAnimEnd) {
+      menu.removeEventListener('animationend', _onCloseAnimEnd);
+      _onCloseAnimEnd = null;
+    }
+    if (_closeTimer) {
+      clearTimeout(_closeTimer);
+      _closeTimer = null;
+    }
+  }
 
   function _close() {
     if (menu.classList.contains('hidden')) return;
+    _unregisterPickerEsc();
+    _unregisterPickerEsc = () => {};
+    _detachDocClick();
     // Restore scroll button
     const _scrollBtn = document.getElementById('scroll-bottom-btn');
     if (_scrollBtn) _scrollBtn.style.display = '';
+    _cancelCloseAnim();
     menu.classList.add('closing');
-    menu.addEventListener('animationend', function _onDone() {
+    _onCloseAnimEnd = function _onDone() {
       menu.removeEventListener('animationend', _onDone);
+      _onCloseAnimEnd = null;
       menu.classList.remove('closing');
       menu.classList.add('hidden');
       search.value = '';
-    }, { once: true });
-    // Fallback if animationend doesn't fire
-    setTimeout(() => {
+    };
+    menu.addEventListener('animationend', _onCloseAnimEnd);
+    // Fallback if animationend doesn't fire — keep id so _open() can cancel
+    _closeTimer = setTimeout(() => {
+      _closeTimer = null;
+      if (_onCloseAnimEnd) {
+        menu.removeEventListener('animationend', _onCloseAnimEnd);
+        _onCloseAnimEnd = null;
+      }
       if (!menu.classList.contains('hidden')) {
         menu.classList.remove('closing');
         menu.classList.add('hidden');
         search.value = '';
       }
     }, 200);
   }
+  _closePickerFn = _close;
+
+  function _open() {
+    // Cancel any in-flight close so a stale animationend/timer cannot re-hide us
+    _cancelCloseAnim();
+    menu.classList.remove('closing', 'hidden');
+    // Block toggle/outside close briefly (mobile ghost-click + same-turn doc click)
+    _ignoreCloseUntil = Date.now() + 350;
+    _populate('');
+    if (window.modelsModule && window.modelsModule.refreshModels) {
+      window.modelsModule.refreshModels().then(() => {
+        if (!menu.classList.contains('hidden')) _populate(search.value || '');
+        updateModelPicker();
+      }).catch(() => {});
+    }
+    if (window.innerWidth >= 768) search.focus();
+    const _scrollBtn = document.getElementById('scroll-bottom-btn');
+    if (_scrollBtn) _scrollBtn.style.display = 'none';
+
+    // Register with Escape stack BEFORE the textarea guard in ui.js — so Escape
+    // closes the picker even when focus stays on #message (mobile keyboard up).
+    _unregisterPickerEsc();
+    _unregisterPickerEsc = registerMenuDismiss(() => { _close(); });
+
+    // Defer outside-click (capture) so the opening click cannot immediately dismiss
+    _detachDocClick();
+    _docClickHandler = (e) => {
+      if (Date.now() < _ignoreCloseUntil) return;
+      if (menu.classList.contains('hidden')) return;
+      if (!wrap.contains(e.target)) _close();
+    };
+    setTimeout(() => {
+      if (_docClickHandler && !menu.classList.contains('hidden')) {
+        document.addEventListener('click', _docClickHandler, true);
+      }
+    }, 0);
+  }
 
   function _openPickerShortcut(kind) {
     _close();
@@ -650,23 +736,14 @@ function _initModelPickerDropdown() {
     if (match) await _pick(match);
   });
 
+  // Keep composer focus (mobile keyboard) — same pattern as overflow + button
+  btn.addEventListener('pointerdown', (e) => { e.preventDefault(); });
   btn.addEventListener('click', (e) => {
+    e.preventDefault();
     e.stopPropagation();
     if (menu.classList.contains('hidden') || menu.classList.contains('closing')) {
-      // Force-clear any in-progress close animation
-      menu.classList.remove('closing', 'hidden');
-      _populate('');
-      if (window.modelsModule && window.modelsModule.refreshModels) {
-        window.modelsModule.refreshModels().then(() => {
-          if (!menu.classList.contains('hidden')) _populate(search.value || '');
-          updateModelPicker();
-        }).catch(() => {});
-      }
-      if (window.innerWidth >= 768) search.focus();
-      // Hide scroll button so it doesn't overlap
-      const _scrollBtn = document.getElementById('scroll-bottom-btn');
-      if (_scrollBtn) _scrollBtn.style.display = 'none';
-    } else {
+      _open();
+    } else if (Date.now() >= _ignoreCloseUntil) {
       _close();
     }
   });
@@ -703,11 +780,6 @@ function _initModelPickerDropdown() {
       _openPickerShortcut('models');
     });
   }
-  document.addEventListener('click', (e) => {
-    if (!menu.classList.contains('hidden') && !menu.contains(e.target) && e.target !== btn) {
-      _close();
-    }
-  });
 }
 
 /**