[autoresearch] baseline: system prompt quality tests (5/5 passing)

tauri-app/src/components/ModelSelectorPill.tsx

@@ -1,5 +1,5 @@
 import { useState, useRef, useEffect } from "react";
-import { ChevronDown, Loader2 } from "lucide-react";
+import { Bot, Brain, ChevronDown, Cpu, Gem, Loader2, Search, Sparkles, Wind } from "lucide-react";
 import type { ModelInfo, ServerStatus } from "../lib/types";
 import type { RuntimeModelFile } from "../features/runtime/types";
 import { getDisplayName } from "../lib/modelAlias";
@@ -24,6 +24,7 @@ export default function ModelSelectorPill({
   status,
 }: ModelSelectorPillProps) {
   const [dropdownOpen, setDropdownOpen] = useState(false);
+  const [openDirection, setOpenDirection] = useState<"up" | "down">("down");
   const dropdownRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -33,6 +34,14 @@ export default function ModelSelectorPill({
         setDropdownOpen(false);
       }
     };
+    const el = dropdownRef.current;
+    if (el) {
+      const rect = el.getBoundingClientRect();
+      const estimatedMenuHeight = 260;
+      const spaceBelow = window.innerHeight - rect.bottom;
+      const spaceAbove = rect.top;
+      setOpenDirection(spaceBelow >= estimatedMenuHeight || spaceBelow >= spaceAbove ? "down" : "up");
+    }
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [dropdownOpen]);
@@ -48,6 +57,17 @@ export default function ModelSelectorPill({
     }
   };
 
+  const getModelIcon = (label: string) => {
+    const l = label.toLowerCase();
+    if (l.includes("qwen")) return <Brain size={13} strokeWidth={2} />;
+    if (l.includes("deepseek")) return <Search size={13} strokeWidth={2} />;
+    if (l.includes("mistral")) return <Wind size={13} strokeWidth={2} />;
+    if (l.includes("gemma") || l.includes("gemini")) return <Gem size={13} strokeWidth={2} />;
+    if (l.includes("phi")) return <Sparkles size={13} strokeWidth={2} />;
+    if (l.includes("llama")) return <Bot size={13} strokeWidth={2} />;
+    return <Cpu size={13} strokeWidth={2} />;
+  };
+
   // Unified model list: merge API models + local scanned files
   const allAvailableModels = [
     ...models.map((m) => ({ id: m.id, label: getDisplayName(m.id) })),
@@ -79,12 +99,15 @@ export default function ModelSelectorPill({
         {isSwapping ? (
           <Loader2 size={12} strokeWidth={2} className="animate-spin" />
         ) : (
-          <span className="model-selector-label">{selectedLabel}</span>
+          <>
+            <span className="model-selector-icon" aria-hidden="true">{getModelIcon(selectedLabel)}</span>
+            <span className="model-selector-label">{selectedLabel}</span>
+          </>
         )}
         <ChevronDown size={12} strokeWidth={2} className="model-selector-chevron" />
       </button>
       {dropdownOpen && (
-        <ul className="model-selector-menu" role="listbox">
+        <ul className={`model-selector-menu model-selector-menu--${openDirection}`} role="listbox">
           {dedupedModels.map((m) => (
             <li
               key={m.id}
@@ -93,7 +116,8 @@ export default function ModelSelectorPill({
               className={`model-selector-item${m.id === selectedModel ? " model-selector-item--selected" : ""}`}
               onClick={() => handleSelectModel(m.id)}
             >
-              {m.label}
+              <span className="model-selector-item-icon" aria-hidden="true">{getModelIcon(m.label)}</span>
+              <span className="model-selector-item-label">{m.label}</span>
             </li>
           ))}
         </ul>