From b637f0287d2c849e3f0828097d1b6b829ed5f8da Mon Sep 17 00:00:00 2001
From: ZGaetano <zgaetano@wilddragon.net>
Date: Sat, 30 May 2026 10:00:54 -0400
Subject: [PATCH] feat: floating model selector bar above messages (Option B)

---
 .../view/subcomponents/ModelSelectorBar.tsx   | 163 ++++++++++++++++++
 1 file changed, 163 insertions(+)
 create mode 100644 src/components/chat/view/subcomponents/ModelSelectorBar.tsx

diff --git a/src/components/chat/view/subcomponents/ModelSelectorBar.tsx b/src/components/chat/view/subcomponents/ModelSelectorBar.tsx
new file mode 100644
index 0000000..838d4cd
--- /dev/null
+++ b/src/components/chat/view/subcomponents/ModelSelectorBar.tsx
@@ -0,0 +1,163 @@
+import { useState, useRef, useEffect } from 'react';
+import { ChevronDown, Globe } from 'lucide-react';
+import type { LLMProvider } from '../../../../types/app';
+import SessionProviderLogo from '../../../llm-logo-provider/SessionProviderLogo';
+
+type ModelOption = { value: string; label: string };
+
+interface ModelSelectorBarProps {
+  provider: LLMProvider;
+  claudeModel: string;
+  setClaudeModel: (model: string) => void;
+  cursorModel: string;
+  setCursorModel: (model: string) => void;
+  codexModel: string;
+  setCodexModel: (model: string) => void;
+  geminiModel: string;
+  setGeminiModel: (model: string) => void;
+  claudeModelOptions: ModelOption[];
+  codexModelOptions: ModelOption[];
+  geminiModelOptions: ModelOption[];
+  cursorModelOptions: ModelOption[];
+}
+
+function useCurrentModel(
+  provider: LLMProvider,
+  claudeModel: string,
+  cursorModel: string,
+  codexModel: string,
+  geminiModel: string,
+  claudeModelOptions: ModelOption[],
+  codexModelOptions: ModelOption[],
+  geminiModelOptions: ModelOption[],
+  cursorModelOptions: ModelOption[],
+): { value: string; label: string; options: ModelOption[] } {
+  const map: Record<LLMProvider, { value: string; options: ModelOption[] }> = {
+    claude: { value: claudeModel, options: claudeModelOptions },
+    cursor: { value: cursorModel, options: cursorModelOptions },
+    codex: { value: codexModel, options: codexModelOptions },
+    gemini: { value: geminiModel, options: geminiModelOptions },
+  };
+  const { value, options } = map[provider] ?? map.claude;
+  const label = options.find((o) => o.value === value)?.label ?? value;
+  return { value, label, options };
+}
+
+export default function ModelSelectorBar({
+  provider,
+  claudeModel,
+  setClaudeModel,
+  cursorModel,
+  setCursorModel,
+  codexModel,
+  setCodexModel,
+  geminiModel,
+  setGeminiModel,
+  claudeModelOptions,
+  codexModelOptions,
+  geminiModelOptions,
+  cursorModelOptions,
+}: ModelSelectorBarProps) {
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState('');
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const searchRef = useRef<HTMLInputElement>(null);
+
+  const { value, label, options } = useCurrentModel(
+    provider, claudeModel, cursorModel, codexModel, geminiModel,
+    claudeModelOptions, codexModelOptions, geminiModelOptions, cursorModelOptions,
+  );
+
+  const filtered = search.trim()
+    ? options.filter((o) => o.label.toLowerCase().includes(search.toLowerCase()))
+    : options;
+
+  // Close on outside click
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
+        setOpen(false);
+        setSearch('');
+      }
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, [open]);
+
+  useEffect(() => {
+    if (open) setTimeout(() => searchRef.current?.focus(), 50);
+  }, [open]);
+
+  const handleSelect = (modelValue: string) => {
+    const setters: Record<LLMProvider, (v: string) => void> = {
+      claude: setClaudeModel,
+      cursor: setCursorModel,
+      codex: setCodexModel,
+      gemini: setGeminiModel,
+    };
+    setters[provider]?.(modelValue);
+    localStorage.setItem(`${provider}-model`, modelValue);
+    setOpen(false);
+    setSearch('');
+  };
+
+  return (
+    <div className="flex-shrink-0 flex items-center justify-between px-4 py-1.5 border-b border-border/40 bg-muted/20 backdrop-blur-sm">
+      {/* Left: provider label */}
+      <div className="flex items-center gap-2 text-xs text-muted-foreground">
+        <SessionProviderLogo provider={provider} className="h-3.5 w-3.5" />
+        <span className="capitalize">{provider}</span>
+      </div>
+
+      {/* Right: model picker */}
+      <div className="relative" ref={dropdownRef}>
+        <button
+          type="button"
+          onClick={() => setOpen((o) => !o)}
+          className="flex items-center gap-1.5 rounded-md border border-border/50 bg-background/60 px-2.5 py-1 text-xs text-foreground hover:bg-accent hover:border-border transition-all"
+        >
+          <Globe className="h-3 w-3 text-muted-foreground" />
+          <span className="max-w-[180px] truncate">{label}</span>
+          <ChevronDown className={`h-3 w-3 text-muted-foreground transition-transform duration-150 ${open ? 'rotate-180' : ''}`} />
+        </button>
+
+        {open && (
+          <div className="absolute right-0 top-full mt-1.5 z-50 w-64 rounded-xl border border-border/60 bg-card shadow-xl overflow-hidden">
+            <div className="p-2 border-b border-border/40">
+              <input
+                ref={searchRef}
+                type="text"
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+                placeholder="Search models..."
+                className="w-full rounded-lg bg-muted/50 px-2.5 py-1.5 text-xs text-foreground placeholder:text-muted-foreground/50 outline-none border border-border/40 focus:border-border"
+              />
+            </div>
+            <div className="max-h-64 overflow-y-auto py-1">
+              {filtered.length === 0 ? (
+                <p className="px-3 py-2 text-xs text-muted-foreground">No models found</p>
+              ) : (
+                filtered.map((opt) => (
+                  <button
+                    key={opt.value}
+                    type="button"
+                    onClick={() => handleSelect(opt.value)}
+                    className={`w-full text-left px-3 py-1.5 text-xs transition-colors hover:bg-accent/60 ${
+                      opt.value === value ? 'text-primary font-medium' : 'text-foreground'
+                    }`}
+                  >
+                    <span className="truncate block">{opt.label}</span>
+                    {opt.value === value && (
+                      <span className="text-[10px] text-muted-foreground block">{opt.value}</span>
+                    )}
+                  </button>
+                ))
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}