Replace orchestrator modal with sub-menu to fix backdrop-filter containment bug

The modal used position:fixed inside a header with backdrop-filter:blur(),
which creates a new containing block per CSS spec, constraining the modal
to the 61px header instead of the viewport. Replaced with a sub-menu panel
using position:absolute off the Developer dropdown.

Made-with: Cursor

frontend/src/components/DevMenu.js

@@ -1,6 +1,5 @@
-import React, { useState } from 'react';
-import { ChevronDown, Download, Settings2 } from 'lucide-react';
-import OrchestratorPicker from './OrchestratorPicker';
+import React, { useState, useMemo, useRef, useEffect } from 'react';
+import { ChevronDown, ChevronRight, Download, Settings2, Search } from 'lucide-react';
 
 export default function DevMenu({
   allModels,
@@ -16,9 +15,43 @@ export default function DevMenu({
 }) {
   const [open, setOpen] = useState(false);
   const [orchOpen, setOrchOpen] = useState(false);
+  const [q, setQ] = useState('');
+  const wrapRef = useRef(null);
+  const searchRef = useRef(null);
+
+  useEffect(() => {
+    if (orchOpen && searchRef.current) searchRef.current.focus();
+  }, [orchOpen]);
+
+  useEffect(() => {
+    function handleClickOutside(e) {
+      if (wrapRef.current && !wrapRef.current.contains(e.target)) {
+        setOpen(false);
+        setOrchOpen(false);
+        setQ('');
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  const filtered = useMemo(() => {
+    const s = q.trim().toLowerCase();
+    if (!s) return allModels;
+    return allModels.filter(row => {
+      const hay = `${row.name} ${row.id} ${row.provider || ''}`.toLowerCase();
+      return hay.includes(s);
+    });
+  }, [allModels, q]);
+
+  const currentName = useMemo(() => {
+    if (!orchestratorModel) return 'Default (backend)';
+    const m = allModels.find(m => m.id === orchestratorModel);
+    return m ? m.name : orchestratorModel;
+  }, [orchestratorModel, allModels]);
 
   return (
-    <div className="dev-wrap">
+    <div className="dev-wrap" ref={wrapRef}>
       <div className="dev-download-btns">
         <button className="btn-sm btn-outline" disabled={!hasChat} onClick={onDownloadChatTxt}>
           <Download size={14} /> .txt
@@ -29,13 +62,13 @@ export default function DevMenu({
       </div>
 
       <div className="dev-dropdown-header">
-        <button className="btn-sm btn-ghost" onClick={() => setOpen(o => !o)}>
+        <button className="btn-sm btn-ghost" onClick={() => { setOpen(o => !o); setOrchOpen(false); setQ(''); }}>
           <Settings2 size={14} /> Developer <ChevronDown size={12} />
         </button>
         {open && (
           <div className="dev-panel">
-            <button onClick={() => { setOrchOpen(true); setOpen(false); }}>
-              Orchestrator model…
+            <button onClick={() => { setOrchOpen(o => !o); setQ(''); }}>
+              Orchestrator model… <ChevronRight size={12} style={{ marginLeft: 'auto', opacity: 0.5 }} />
             </button>
             <button
               disabled={personaMode === 'structured'}
@@ -54,15 +87,48 @@ export default function DevMenu({
             </button>
           </div>
         )}
-      </div>
 
-      <OrchestratorPicker
-        open={orchOpen}
-        onClose={() => setOrchOpen(false)}
-        models={allModels}
-        currentModel={orchestratorModel}
-        onSelect={(id) => { onOrchestratorChange(id); setOrchOpen(false); }}
-      />
+        {open && orchOpen && (
+          <div className="dev-sub-panel">
+            <div className="dev-sub-header">
+              <span className="dev-sub-title">Orchestrator</span>
+              <span className="dev-sub-current">{currentName}</span>
+            </div>
+            <div className="dev-sub-search">
+              <Search size={14} className="dev-sub-search-icon" />
+              <input
+                ref={searchRef}
+                type="search"
+                placeholder="Search models…"
+                value={q}
+                onChange={e => setQ(e.target.value)}
+              />
+            </div>
+            <ul className="dev-sub-list">
+              <li>
+                <button
+                  className={`dev-sub-item ${!orchestratorModel ? 'dev-sub-item-active' : ''}`}
+                  onClick={() => { onOrchestratorChange(null); setOrchOpen(false); setOpen(false); setQ(''); }}
+                >
+                  <strong>Default (backend)</strong>
+                  <span className="dev-sub-provider">Use server default</span>
+                </button>
+              </li>
+              {filtered.map(m => (
+                <li key={m.id}>
+                  <button
+                    className={`dev-sub-item ${orchestratorModel === m.id ? 'dev-sub-item-active' : ''}`}
+                    onClick={() => { onOrchestratorChange(m.id); setOrchOpen(false); setOpen(false); setQ(''); }}
+                  >
+                    <strong>{m.name}</strong>
+                    <span className="dev-sub-provider">{m.provider}</span>
+                  </button>
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+      </div>
     </div>
   );
 }

frontend/src/components/OrchestratorPicker.js

@@ -1,71 +0,0 @@
-import React, { useState, useMemo } from 'react';
-import { Search, X } from 'lucide-react';
-
-export default function OrchestratorPicker({ open, onClose, models, currentModel, onSelect }) {
-  const [q, setQ] = useState('');
-
-  const filtered = useMemo(() => {
-    const s = q.trim().toLowerCase();
-    if (!s) return models;
-    return models.filter(row => {
-      const hay = `${row.name} ${row.id} ${row.provider || ''}`.toLowerCase();
-      return hay.includes(s);
-    });
-  }, [models, q]);
-
-  if (!open) return null;
-
-  return (
-    <div className="modal-backdrop" role="dialog" aria-modal="true" aria-label="Orchestrator model" onClick={e => { if (e.target === e.currentTarget) onClose(); }}>
-      <div className="modal-panel orchestrator-picker">
-        <div className="modal-header">
-          <h3>Orchestrator model</h3>
-          <button className="modal-close-btn" onClick={onClose} aria-label="Close">
-            <X size={18} />
-          </button>
-        </div>
-        <p className="modal-hint">
-          Choose any model from the app registry to use as the conversation orchestrator.
-        </p>
-
-        <div className="picker-search">
-          <Search size={16} className="picker-search-icon" />
-          <input
-            type="search"
-            placeholder="Search by any part of name or id…"
-            value={q}
-            onChange={e => setQ(e.target.value)}
-            autoFocus
-          />
-        </div>
-
-        <ul className="picker-list">
-          <li>
-            <button
-              className={`picker-item ${!currentModel ? 'picker-item-active' : ''}`}
-              onClick={() => onSelect(null)}
-            >
-              <span className="picker-item-info">
-                <strong className="picker-item-name">Default (backend)</strong>
-                <span className="picker-item-provider">Use server default orchestrator</span>
-              </span>
-            </button>
-          </li>
-          {filtered.map(m => (
-            <li key={m.id}>
-              <button
-                className={`picker-item ${currentModel === m.id ? 'picker-item-active' : ''}`}
-                onClick={() => onSelect(m.id)}
-              >
-                <span className="picker-item-info">
-                  <strong className="picker-item-name">{m.name}</strong>
-                  <span className="picker-item-provider">{m.provider}</span>
-                </span>
-              </button>
-            </li>
-          ))}
-        </ul>
-      </div>
-    </div>
-  );
-}

frontend/src/styles/components.css

@@ -648,77 +648,56 @@
 }
 
 
-/* ── Modal / Picker ────────────────────────────────────────────── */
+/* ── Orchestrator sub-menu ─────────────────────────────────────── */
 
-.modal-backdrop {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.55);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 200;
-  padding: 20px;
-}
-
-.modal-panel {
-  width: 100%;
-  max-width: 480px;
-  max-height: 80vh;
-  overflow: hidden;
+.dev-sub-panel {
+  position: absolute;
+  right: 100%;
+  top: 0;
+  margin-right: 4px;
+  width: 280px;
+  max-height: 70vh;
   display: flex;
   flex-direction: column;
   background: var(--card-bg);
   border: 1px solid var(--border-primary);
-  border-radius: 14px;
-  padding: 16px;
-  box-shadow: var(--shadow-lg);
+  border-radius: 10px;
+  padding: 8px;
+  z-index: 51;
+  box-shadow: var(--shadow-md);
 }
 
-.modal-header {
+.dev-sub-header {
   display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 8px;
+  flex-direction: column;
+  gap: 2px;
+  padding: 4px 6px 8px;
+  border-bottom: 1px solid var(--border-primary);
+  margin-bottom: 6px;
 }
 
-.modal-header h3 {
-  font-size: 16px;
+.dev-sub-title {
+  font-size: 12px;
   font-weight: 600;
   color: var(--text-primary);
-  margin: 0;
-}
-
-.modal-close-btn {
-  border: none;
-  background: transparent;
-  color: var(--text-secondary);
-  cursor: pointer;
-  padding: 4px;
-  border-radius: 6px;
-  display: inline-flex;
-  align-items: center;
-}
-
-.modal-close-btn:hover {
-  background: var(--bg-tertiary);
-  color: var(--text-primary);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
 }
 
-.modal-hint {
-  font-size: 13px;
+.dev-sub-current {
+  font-size: 11px;
   color: var(--text-muted);
-  margin: 0 0 10px;
+  font-style: italic;
 }
 
-.picker-search {
+.dev-sub-search {
   position: relative;
-  margin-bottom: 10px;
+  margin-bottom: 6px;
 }
 
-.picker-search-icon {
+.dev-sub-search-icon {
   position: absolute;
-  left: 10px;
+  left: 8px;
   top: 50%;
   transform: translateY(-50%);
   color: var(--text-muted);
@@ -726,83 +705,87 @@
   pointer-events: none;
 }
 
-.picker-search input {
+.dev-sub-search input {
   width: 100%;
   box-sizing: border-box;
-  padding: 10px 12px 10px 36px;
+  padding: 7px 8px 7px 30px;
   border: 1px solid var(--border-primary);
-  border-radius: 10px;
+  border-radius: 8px;
   background: var(--bg-primary);
   color: var(--text-primary);
-  font-size: 14px;
+  font-size: 12px;
 }
 
-.picker-search input:focus {
+.dev-sub-search input:focus {
   outline: none;
   border-color: var(--accent-primary);
 }
 
-.picker-search input::placeholder {
+.dev-sub-search input::placeholder {
   color: var(--text-muted);
 }
 
-.picker-list {
+.dev-sub-list {
   list-style: none;
   margin: 0;
   padding: 0;
   overflow-y: auto;
   flex: 1;
-  max-height: 50vh;
 }
 
-.picker-list li {
-  margin-bottom: 4px;
+.dev-sub-list li {
+  margin-bottom: 2px;
 }
 
-.picker-item {
+.dev-sub-item {
   width: 100%;
   text-align: left;
-  padding: 10px 12px;
+  padding: 6px 8px;
   border: 1px solid transparent;
-  border-radius: 8px;
+  border-radius: 6px;
   background: transparent;
   color: var(--text-primary);
   cursor: pointer;
   display: flex;
   flex-direction: column;
-  gap: 2px;
-  font-size: 13px;
+  gap: 1px;
+  font-size: 12px;
   transition: background 0.1s;
 }
 
-.picker-item:hover {
+.dev-sub-item:hover {
   background: var(--bg-tertiary);
 }
 
-.picker-item-active {
+.dev-sub-item-active {
   border-color: var(--accent-primary);
   background: var(--accent-light);
 }
 
-.picker-item-active:hover {
+.dev-sub-item-active:hover {
   background: var(--accent-light);
 }
 
-.picker-item-info {
-  display: flex;
-  flex-direction: column;
-  gap: 1px;
-}
-
-.picker-item-name {
+.dev-sub-item strong {
   font-weight: 500;
+  font-size: 12px;
 }
 
-.picker-item-provider {
-  font-size: 11px;
+.dev-sub-provider {
+  font-size: 10px;
   color: var(--text-muted);
 }
 
+@media (max-width: 600px) {
+  .dev-sub-panel {
+    right: 0;
+    top: 100%;
+    margin-right: 0;
+    margin-top: 4px;
+    width: 260px;
+  }
+}
+
 /* ── Status / Loading ──────────────────────────────────────────── */
 
 .status-bar {