🤖 fix: Settings modal header heights and custom models in selector

- Fixed header height inconsistency by using explicit h-12 class for both
  sidebar and content headers
- Custom models from Settings now appear in model selector dropdown
- Added providers-config-changed event to sync models when settings change
- Used useMemo for allModels to avoid unnecessary re-renders

Author: ibetitsmike

src/browser/components/Settings/SettingsModal.tsx

@@ -67,7 +67,7 @@ export function SettingsModal() {
       >
         {/* Sidebar */}
         <div className="border-border-medium flex w-48 shrink-0 flex-col border-r">
-          <div className="border-border-medium flex items-center justify-between border-b px-4 py-3">
+          <div className="border-border-medium flex h-12 items-center border-b px-4">
             <h2 id="settings-title" className="text-foreground text-sm font-semibold">
               Settings
             </h2>
@@ -93,7 +93,7 @@ export function SettingsModal() {
 
         {/* Content */}
         <div className="flex flex-1 flex-col overflow-hidden">
-          <div className="border-border-medium flex items-center justify-between border-b px-6 py-3">
+          <div className="border-border-medium flex h-12 items-center justify-between border-b px-6">
             <h3 className="text-foreground text-sm font-medium">{currentSection.label}</h3>
             <button
               type="button"

src/browser/components/Settings/sections/ModelsSection.tsx

@@ -48,6 +48,9 @@ export function ModelsSection() {
       const cfg = await window.api.providers.getConfig();
       setConfig(cfg);
       setNewModel({ provider: "", modelId: "" });
+
+      // Notify other components about the change
+      window.dispatchEvent(new Event("providers-config-changed"));
     } finally {
       setSaving(false);
     }
@@ -65,6 +68,9 @@ export function ModelsSection() {
         // Refresh config
         const cfg = await window.api.providers.getConfig();
         setConfig(cfg);
+
+        // Notify other components about the change
+        window.dispatchEvent(new Event("providers-config-changed"));
       } finally {
         setSaving(false);
       }

src/browser/hooks/useModelLRU.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { usePersistedState, readPersistedState, updatePersistedState } from "./usePersistedState";
 import { MODEL_ABBREVIATIONS } from "@/browser/utils/slashCommands/registry";
 import { defaultModel } from "@/common/utils/ai/models";
@@ -42,13 +42,15 @@ export function getDefaultModel(): string {
  * Hook to manage a Least Recently Used (LRU) cache of AI models.
  * Stores up to 8 recently used models in localStorage.
  * Initializes with default abbreviated models if empty.
+ * Also includes custom models configured in Settings.
  */
 export function useModelLRU() {
   const [recentModels, setRecentModels] = usePersistedState<string[]>(
     LRU_KEY,
     DEFAULT_MODELS.slice(0, MAX_LRU_SIZE),
     { listener: true }
   );
+  const [customModels, setCustomModels] = useState<string[]>([]);
 
   const [defaultModel, setDefaultModel] = usePersistedState<string>(
     DEFAULT_MODEL_KEY,
@@ -70,6 +72,44 @@ export function useModelLRU() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []); // Only run once on mount
 
+  // Fetch custom models from providers config
+  useEffect(() => {
+    const fetchCustomModels = async () => {
+      try {
+        const config = await window.api.providers.getConfig();
+        const models: string[] = [];
+        for (const [provider, providerConfig] of Object.entries(config)) {
+          if (providerConfig.models) {
+            for (const modelId of providerConfig.models) {
+              // Format as provider:modelId for consistency
+              models.push(`${provider}:${modelId}`);
+            }
+          }
+        }
+        setCustomModels(models);
+      } catch {
+        // Ignore errors fetching custom models
+      }
+    };
+    void fetchCustomModels();
+
+    // Listen for settings changes via custom event
+    const handleSettingsChange = () => void fetchCustomModels();
+    window.addEventListener("providers-config-changed", handleSettingsChange);
+    return () => window.removeEventListener("providers-config-changed", handleSettingsChange);
+  }, []);
+
+  // Combine LRU models with custom models (custom models appended, deduplicated)
+  const allModels = useMemo(() => {
+    const combined = [...recentModels];
+    for (const model of customModels) {
+      if (!combined.includes(model)) {
+        combined.push(model);
+      }
+    }
+    return combined;
+  }, [recentModels, customModels]);
+
   /**
    * Add a model to the LRU cache. If it already exists, move it to the front.
    * If the cache is full, remove the least recently used model.
@@ -94,8 +134,8 @@ export function useModelLRU() {
    * Get the list of recently used models, most recent first.
    */
   const getRecentModels = useCallback(() => {
-    return recentModels;
-  }, [recentModels]);
+    return allModels;
+  }, [allModels]);
 
   const evictModel = useCallback((modelString: string) => {
     if (!modelString.trim()) {
@@ -108,7 +148,7 @@ export function useModelLRU() {
     addModel,
     evictModel,
     getRecentModels,
-    recentModels,
+    recentModels: allModels,
     defaultModel,
     setDefaultModel,
   };