feat: compaction fallback models and model info in Settings

- Add contextWindow and description fields to KnownModelDefinition
- Replace single compaction model dropdown with ordered fallback list
- Add reorder/remove controls for compaction fallback models
- Display context window size (e.g., 200K, 1M) in model rows
- Add info tooltip with model description for built-in models
- Update ModeAiDefaults to support fallbackModels array
- Add getCompactionFallbackModels() for ordered model fallback

Author: ammar-agent

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

@@ -1,19 +1,29 @@
 import React from "react";
-import { Check, Eye, Pencil, Star, Trash2, X } from "lucide-react";
+import { Check, Eye, Info, Pencil, Trash2, X } from "lucide-react";
 import { createEditKeyHandler } from "@/browser/utils/ui/keybinds";
 import { GatewayIcon } from "@/browser/components/icons/GatewayIcon";
 import { cn } from "@/common/lib/utils";
 import { Tooltip, TooltipTrigger, TooltipContent } from "@/browser/components/ui/tooltip";
 import { ProviderWithIcon } from "@/browser/components/ProviderIcon";
 import { Button } from "@/browser/components/ui/button";
 
+/** Format token count as human-readable string (e.g., 200000 -> "200K") */
+function formatTokenCount(tokens: number): string {
+  if (tokens >= 1_000_000) {
+    return `${(tokens / 1_000_000).toFixed(tokens % 1_000_000 === 0 ? 0 : 1)}M`;
+  }
+  if (tokens >= 1_000) {
+    return `${(tokens / 1_000).toFixed(tokens % 1_000 === 0 ? 0 : 1)}K`;
+  }
+  return tokens.toString();
+}
+
 export interface ModelRowProps {
   provider: string;
   modelId: string;
   fullId: string;
   aliases?: string[];
   isCustom: boolean;
-  isDefault: boolean;
   isEditing: boolean;
   editValue?: string;
   editError?: string | null;
@@ -23,7 +33,10 @@ export interface ModelRowProps {
   isGatewayEnabled?: boolean;
   /** Whether this model is hidden from the selector */
   isHiddenFromSelector?: boolean;
-  onSetDefault: () => void;
+  /** Context window size in tokens */
+  contextWindow?: number;
+  /** Brief description of the model */
+  description?: string;
   onStartEdit?: () => void;
   onSaveEdit?: () => void;
   onCancelEdit?: () => void;
@@ -74,6 +87,21 @@ export function ModelRow(props: ModelRowProps) {
                 <TooltipContent align="center">Use with /m {props.aliases[0]}</TooltipContent>
               </Tooltip>
             )}
+            {props.contextWindow && (
+              <span className="text-muted-light shrink-0 text-[10px]">
+                {formatTokenCount(props.contextWindow)}
+              </span>
+            )}
+            {props.description && (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Info className="text-muted-light h-3 w-3 shrink-0 cursor-help" />
+                </TooltipTrigger>
+                <TooltipContent align="center" className="max-w-xs">
+                  {props.description}
+                </TooltipContent>
+              </Tooltip>
+            )}
           </div>
         )}
       </div>
@@ -163,31 +191,6 @@ export function ModelRow(props: ModelRowProps) {
                 </TooltipContent>
               </Tooltip>
             )}
-            {/* Favorite/default button */}
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  onClick={() => {
-                    if (!props.isDefault) props.onSetDefault();
-                  }}
-                  className={cn(
-                    "h-6 w-6",
-                    props.isDefault
-                      ? "cursor-default text-yellow-400 hover:text-yellow-400"
-                      : "text-muted hover:text-yellow-400"
-                  )}
-                  disabled={props.isDefault}
-                  aria-label={props.isDefault ? "Current default model" : "Set as default model"}
-                >
-                  <Star className={cn("h-3.5 w-3.5", props.isDefault && "fill-current")} />
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent align="center">
-                {props.isDefault ? "Default model" : "Set as default"}
-              </TooltipContent>
-            </Tooltip>
             {/* Edit/delete buttons only for custom models */}
             {props.isCustom && (
               <>

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

@@ -1,5 +1,5 @@
-import React, { useState, useCallback } from "react";
-import { Plus, Loader2 } from "lucide-react";
+import React, { useState, useCallback, useEffect, useRef } from "react";
+import { Plus, Loader2, GripVertical, X } from "lucide-react";
 import { SUPPORTED_PROVIDERS, PROVIDER_DISPLAY_NAMES } from "@/common/constants/providers";
 import { KNOWN_MODELS } from "@/common/constants/knownModels";
 import { useModelsFromSettings } from "@/browser/hooks/useModelsFromSettings";
@@ -15,6 +15,11 @@ import {
   SelectValue,
 } from "@/browser/components/ui/select";
 import { Button } from "@/browser/components/ui/button";
+import { ModelSelector } from "@/browser/components/ModelSelector";
+import { MODE_AI_DEFAULTS_KEY } from "@/common/constants/storage";
+import { normalizeModeAiDefaults, type ModeAiDefaults } from "@/common/types/modeAiDefaults";
+import { updatePersistedState } from "@/browser/hooks/usePersistedState";
+import { formatModelDisplayName } from "@/common/utils/ai/modelDisplay";
 
 // Providers to exclude from the custom models UI (handled specially or internal)
 const HIDDEN_PROVIDERS = new Set(["mux-gateway"]);
@@ -37,13 +42,128 @@ export function ModelsSection() {
   const [editing, setEditing] = useState<EditingState | null>(null);
   const [error, setError] = useState<string | null>(null);
 
+  // Compaction fallback models state
+  const [compactionFallbacks, setCompactionFallbacksState] = useState<string[]>([]);
+  const [compactionLoaded, setCompactionLoaded] = useState(false);
+  const compactionSaveTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
   const selectableProviders = SUPPORTED_PROVIDERS.filter(
     (provider) => !HIDDEN_PROVIDERS.has(provider)
   );
-  const { defaultModel, setDefaultModel, hiddenModels, hideModel, unhideModel } =
+  const { models, defaultModel, setDefaultModel, hiddenModels, hideModel, unhideModel } =
     useModelsFromSettings();
   const gateway = useGateway();
 
+  // Load compaction fallbacks from config on mount
+  useEffect(() => {
+    if (!api) return;
+
+    void api.config
+      .getConfig()
+      .then((cfg) => {
+        const normalized = normalizeModeAiDefaults(cfg.modeAiDefaults ?? {});
+        setCompactionFallbacksState(normalized.compact?.fallbackModels ?? []);
+        setCompactionLoaded(true);
+      })
+      .catch(() => {
+        setCompactionLoaded(true);
+      });
+  }, [api]);
+
+  // Debounced save for compaction fallback changes
+  const saveCompactionFallbacks = useCallback(
+    (fallbacks: string[]) => {
+      // Clear any pending save
+      if (compactionSaveTimerRef.current) {
+        clearTimeout(compactionSaveTimerRef.current);
+      }
+
+      compactionSaveTimerRef.current = setTimeout(() => {
+        if (!api) return;
+
+        const fallbackModels = fallbacks.length > 0 ? fallbacks : undefined;
+
+        // Update local cache immediately for non-React readers
+        updatePersistedState<ModeAiDefaults>(
+          MODE_AI_DEFAULTS_KEY,
+          (prev) => {
+            const next = { ...prev };
+            if (!fallbackModels) {
+              if (next.compact) {
+                delete next.compact.fallbackModels;
+                if (!next.compact.modelString && !next.compact.thinkingLevel) delete next.compact;
+              }
+            } else {
+              next.compact = { ...next.compact, fallbackModels };
+            }
+            return next;
+          },
+          {}
+        );
+
+        // Persist to backend
+        void api.config.getConfig().then((cfg) => {
+          const existing = normalizeModeAiDefaults(cfg.modeAiDefaults ?? {});
+          const updated: ModeAiDefaults = { ...existing };
+
+          if (!fallbackModels) {
+            if (updated.compact) {
+              delete updated.compact.fallbackModels;
+              if (!updated.compact.modelString && !updated.compact.thinkingLevel) {
+                delete updated.compact;
+              }
+            }
+          } else {
+            updated.compact = { ...updated.compact, fallbackModels };
+          }
+
+          void api.config.updateModeAiDefaults({ modeAiDefaults: updated });
+        });
+      }, 400);
+    },
+    [api]
+  );
+
+  const addCompactionFallback = useCallback(
+    (model: string) => {
+      if (!model || compactionFallbacks.includes(model)) return;
+      const updated = [...compactionFallbacks, model];
+      setCompactionFallbacksState(updated);
+      saveCompactionFallbacks(updated);
+    },
+    [compactionFallbacks, saveCompactionFallbacks]
+  );
+
+  const removeCompactionFallback = useCallback(
+    (index: number) => {
+      const updated = compactionFallbacks.filter((_, i) => i !== index);
+      setCompactionFallbacksState(updated);
+      saveCompactionFallbacks(updated);
+    },
+    [compactionFallbacks, saveCompactionFallbacks]
+  );
+
+  const moveCompactionFallback = useCallback(
+    (fromIndex: number, toIndex: number) => {
+      if (toIndex < 0 || toIndex >= compactionFallbacks.length) return;
+      const updated = [...compactionFallbacks];
+      const [moved] = updated.splice(fromIndex, 1);
+      updated.splice(toIndex, 0, moved);
+      setCompactionFallbacksState(updated);
+      saveCompactionFallbacks(updated);
+    },
+    [compactionFallbacks, saveCompactionFallbacks]
+  );
+
+  // Cleanup save timer on unmount
+  useEffect(() => {
+    return () => {
+      if (compactionSaveTimerRef.current) {
+        clearTimeout(compactionSaveTimerRef.current);
+      }
+    };
+  }, []);
+
   // Check if a model already exists (for duplicate prevention)
   const modelExists = useCallback(
     (provider: string, modelId: string, excludeOriginal?: string): boolean => {
@@ -169,15 +289,99 @@ export function ModelsSection() {
     modelId: model.providerModelId,
     fullId: model.id,
     aliases: model.aliases,
+    contextWindow: model.contextWindow,
+    description: model.description,
   }));
 
   const customModels = getCustomModels();
 
+  // Models available for fallback selection (exclude already selected)
+  const availableFallbackModels = models.filter((m) => !compactionFallbacks.includes(m));
+
   return (
     <div className="space-y-4">
-      <p className="text-muted text-xs">
-        Manage your models. Click the star to set a default model for new workspaces.
-      </p>
+      {/* Model Defaults */}
+      {compactionLoaded && (
+        <div className="border-border-medium bg-background-secondary rounded-md border p-3">
+          <div className="text-foreground mb-3 text-sm font-medium">Model Defaults</div>
+
+          {/* Default Model */}
+          <div className="mb-4 space-y-1">
+            <div className="text-muted text-xs">Default Model</div>
+            <ModelSelector
+              value={defaultModel}
+              onChange={setDefaultModel}
+              models={models}
+              hiddenModels={hiddenModels}
+            />
+            <div className="text-muted-light text-[10px]">Used for new workspaces</div>
+          </div>
+
+          {/* Compaction Fallback Models */}
+          <div className="space-y-2">
+            <div className="text-muted text-xs">Compaction Fallback Models</div>
+            <div className="text-muted-light text-[10px]">
+              Models to try in order when context window is exceeded. Falls back to workspace model
+              if none set.
+            </div>
+
+            {/* List of configured fallbacks */}
+            {compactionFallbacks.length > 0 && (
+              <div className="space-y-1">
+                {compactionFallbacks.map((model, index) => (
+                  <div
+                    key={model}
+                    className="border-border-light bg-modal-bg flex items-center gap-2 rounded border px-2 py-1"
+                  >
+                    <span className="text-muted-light text-[10px] font-medium">{index + 1}.</span>
+                    <GripVertical className="text-muted-light h-3 w-3 cursor-grab" />
+                    <span className="text-foreground flex-1 truncate text-xs">
+                      {formatModelDisplayName(model.split(":")[1] ?? model)}
+                    </span>
+                    <div className="flex items-center gap-0.5">
+                      <button
+                        type="button"
+                        onClick={() => moveCompactionFallback(index, index - 1)}
+                        disabled={index === 0}
+                        className="text-muted hover:text-foreground p-0.5 disabled:opacity-30"
+                        title="Move up"
+                      >
+                        ↑
+                      </button>
+                      <button
+                        type="button"
+                        onClick={() => moveCompactionFallback(index, index + 1)}
+                        disabled={index === compactionFallbacks.length - 1}
+                        className="text-muted hover:text-foreground p-0.5 disabled:opacity-30"
+                        title="Move down"
+                      >
+                        ↓
+                      </button>
+                      <button
+                        type="button"
+                        onClick={() => removeCompactionFallback(index)}
+                        className="text-muted hover:text-error p-0.5"
+                        title="Remove"
+                      >
+                        <X className="h-3 w-3" />
+                      </button>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+
+            {/* Add fallback model */}
+            <ModelSelector
+              value=""
+              emptyLabel="Add fallback model..."
+              onChange={addCompactionFallback}
+              models={availableFallbackModels}
+              hiddenModels={hiddenModels}
+            />
+          </div>
+        </div>
+      )}
 
       {/* Custom Models - shown first */}
       <div className="space-y-1.5">
@@ -236,14 +440,12 @@ export function ModelsSection() {
               modelId={model.modelId}
               fullId={model.fullId}
               isCustom={true}
-              isDefault={defaultModel === model.fullId}
               isEditing={isModelEditing}
               editValue={isModelEditing ? editing.newModelId : undefined}
               editError={isModelEditing ? error : undefined}
               saving={false}
               hasActiveEdit={editing !== null}
               isGatewayEnabled={gateway.modelUsesGateway(model.fullId)}
-              onSetDefault={() => setDefaultModel(model.fullId)}
               onStartEdit={() => handleStartEdit(model.provider, model.modelId)}
               onSaveEdit={handleSaveEdit}
               onCancelEdit={handleCancelEdit}
@@ -279,11 +481,11 @@ export function ModelsSection() {
             modelId={model.modelId}
             fullId={model.fullId}
             aliases={model.aliases}
+            contextWindow={model.contextWindow}
+            description={model.description}
             isCustom={false}
-            isDefault={defaultModel === model.fullId}
             isEditing={false}
             isGatewayEnabled={gateway.modelUsesGateway(model.fullId)}
-            onSetDefault={() => setDefaultModel(model.fullId)}
             isHiddenFromSelector={hiddenModels.includes(model.fullId)}
             onToggleVisibility={() =>
               hiddenModels.includes(model.fullId)