feat: explicit default model selection

- Replace implicit LRU default behavior with explicit user selection
- Add star button to model selector to set default model
- Ensure default model cannot be deleted or unset (only replaced)
- Persist default model separately from LRU list

Author: ammar-agent

src/browser/components/ChatInput/index.tsx

@@ -138,7 +138,7 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
   const inputRef = useRef<HTMLTextAreaElement>(null);
   const modelSelectorRef = useRef<ModelSelectorRef>(null);
   const [mode, setMode] = useMode();
-  const { recentModels, addModel, evictModel } = useModelLRU();
+  const { recentModels, addModel, evictModel, defaultModel, setDefaultModel } = useModelLRU();
   const commandListId = useId();
   const telemetry = useTelemetry();
   const [vimEnabled, setVimEnabled] = usePersistedState<boolean>(VIM_ENABLED_KEY, false, {
@@ -967,6 +967,8 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
                   recentModels={recentModels}
                   onRemoveModel={evictModel}
                   onComplete={() => inputRef.current?.focus()}
+                  defaultModel={defaultModel}
+                  onSetDefaultModel={setDefaultModel}
                 />
                 <TooltipWrapper inline>
                   <HelpIndicator>?</HelpIndicator>

src/browser/components/ModelSelector.stories.tsx

@@ -77,3 +77,18 @@ export const WithManyModels: Story = {
     onComplete: action("onComplete"),
   },
 };
+
+export const WithDefaultModel: Story = {
+  args: {
+    value: "anthropic:claude-sonnet-4-5",
+    onChange: action("onChange"),
+    onRemoveModel: action("onRemoveModel"),
+    recentModels: ["anthropic:claude-sonnet-4-5", "anthropic:claude-opus-4-1", "openai:gpt-5-pro"],
+    onComplete: action("onComplete"),
+    defaultModel: "anthropic:claude-opus-4-1",
+    onSetDefaultModel: (model) => {
+      // Mimic the hook behavior - only allow setting, not clearing
+      if (model) action("onSetDefaultModel")(model);
+    },
+  },
+};

src/browser/components/ModelSelector.tsx

@@ -7,21 +7,27 @@ import React, {
   forwardRef,
 } from "react";
 import { cn } from "@/common/lib/utils";
+import { Star } from "lucide-react";
 
 interface ModelSelectorProps {
   value: string;
   onChange: (value: string) => void;
   recentModels: string[];
   onRemoveModel?: (model: string) => void;
   onComplete?: () => void;
+  defaultModel?: string | null;
+  onSetDefaultModel?: (model: string | null) => void;
 }
 
 export interface ModelSelectorRef {
   open: () => void;
 }
 
 export const ModelSelector = forwardRef<ModelSelectorRef, ModelSelectorProps>(
-  ({ value, onChange, recentModels, onRemoveModel, onComplete }, ref) => {
+  (
+    { value, onChange, recentModels, onRemoveModel, onComplete, defaultModel, onSetDefaultModel },
+    ref
+  ) => {
     const [isEditing, setIsEditing] = useState(false);
     const [inputValue, setInputValue] = useState(value);
     const [error, setError] = useState<string | null>(null);
@@ -243,16 +249,44 @@ export const ModelSelector = forwardRef<ModelSelectorRef, ModelSelectorProps>(
               >
                 <div className="flex items-center justify-between gap-2">
                   <span className="truncate">{model}</span>
-                  {onRemoveModel && (
-                    <button
-                      type="button"
-                      onClick={(event) => handleRemoveModel(model, event)}
-                      className="text-muted-light border-border-light/40 hover:border-danger-soft/60 hover:text-danger-soft rounded-sm border px-1 py-0.5 text-[9px] font-semibold tracking-wide uppercase transition-colors duration-150"
-                      aria-label={`Remove ${model} from recent models`}
-                    >
-                      ×
-                    </button>
-                  )}
+                  <div className="flex items-center gap-1">
+                    {onSetDefaultModel && (
+                      <button
+                        type="button"
+                        onClick={(event) => {
+                          event.preventDefault();
+                          event.stopPropagation();
+                          const isDefault = defaultModel === model;
+                          // If it's already the default, do nothing (cannot unset)
+                          if (!isDefault) {
+                            onSetDefaultModel(model);
+                          }
+                        }}
+                        className={cn(
+                          "rounded-sm border px-1 py-0.5 transition-colors duration-150 flex items-center justify-center",
+                          defaultModel === model
+                            ? "text-yellow-400 border-yellow-400/40 cursor-default"
+                            : "text-muted-light border-border-light/40 hover:border-foreground/60 hover:text-foreground"
+                        )}
+                        aria-label={
+                          defaultModel === model ? "Current default model" : "Set as default model"
+                        }
+                        disabled={defaultModel === model}
+                      >
+                        <Star className={cn("h-3 w-3", defaultModel === model && "fill-current")} />
+                      </button>
+                    )}
+                    {onRemoveModel && defaultModel !== model && (
+                      <button
+                        type="button"
+                        onClick={(event) => handleRemoveModel(model, event)}
+                        className="text-muted-light border-border-light/40 hover:border-danger-soft/60 hover:text-danger-soft rounded-sm border px-1 py-0.5 text-[9px] font-semibold tracking-wide uppercase transition-colors duration-150"
+                        aria-label={`Remove ${model} from recent models`}
+                      >
+                        ×
+                      </button>
+                    )}
+                  </div>
                 </div>
               </div>
             ))}

src/browser/hooks/useModelLRU.ts

@@ -6,13 +6,15 @@ import { WORKSPACE_DEFAULTS } from "@/constants/workspaceDefaults";
 
 const MAX_LRU_SIZE = 12;
 const LRU_KEY = "model-lru";
+const DEFAULT_MODEL_KEY = "model-default";
 
 // Ensure defaultModel is first, then fill with other abbreviations (deduplicated)
 const FALLBACK_MODEL = WORKSPACE_DEFAULTS.model ?? defaultModel;
 const DEFAULT_MODELS = [
   FALLBACK_MODEL,
   ...Array.from(new Set(Object.values(MODEL_ABBREVIATIONS))).filter((m) => m !== FALLBACK_MODEL),
 ].slice(0, MAX_LRU_SIZE);
+
 function persistModels(models: string[]): void {
   updatePersistedState(LRU_KEY, models.slice(0, MAX_LRU_SIZE));
 }
@@ -31,15 +33,19 @@ export function evictModelFromLRU(model: string): void {
   persistModels(nextList);
 }
 
+export function getExplicitDefaultModel(): string {
+  const persisted = readPersistedState<string | null>(DEFAULT_MODEL_KEY, null);
+  return persisted ?? FALLBACK_MODEL;
+}
+
 /**
- * Get the default model from LRU (non-hook version for use outside React)
- * This is the ONLY place that reads from LRU outside of the hook.
- *
- * @returns The most recently used model, or WORKSPACE_DEFAULTS.model if LRU is empty
+ * Get the default model.
+ * Prioritizes the explicit default model if set.
+ * Otherwise, falls back to LRU behavior (most recently used).
  */
 export function getDefaultModelFromLRU(): string {
-  const lru = readPersistedState<string[]>(LRU_KEY, DEFAULT_MODELS.slice(0, MAX_LRU_SIZE));
-  return lru[0] ?? FALLBACK_MODEL;
+  // Always return the explicit default (which falls back to hardcoded default)
+  return getExplicitDefaultModel();
 }
 
 /**
@@ -54,6 +60,24 @@ export function useModelLRU() {
     { listener: true }
   );
 
+  const [defaultModel, setDefaultModel] = usePersistedState<string | null>(
+    DEFAULT_MODEL_KEY,
+    null,
+    { listener: true }
+  );
+
+  // Return the effective default model (never null)
+  const effectiveDefaultModel = defaultModel ?? FALLBACK_MODEL;
+
+  // Wrapper for setDefaultModel that prevents null/clearing
+  const handleSetDefaultModel = useCallback(
+    (model: string | null) => {
+      if (!model) return;
+      setDefaultModel(model);
+    },
+    [setDefaultModel]
+  );
+
   // Merge any new defaults from MODEL_ABBREVIATIONS (only once on mount)
   useEffect(() => {
     setRecentModels((prev) => {
@@ -107,5 +131,7 @@ export function useModelLRU() {
     evictModel,
     getRecentModels,
     recentModels,
+    defaultModel: effectiveDefaultModel,
+    setDefaultModel: handleSetDefaultModel,
   };
 }