@dexto/tui 1.6.8 → 1.6.10

package/dist/components/overlays/ModelSelectorRefactored.js

@@ -1,4 +1,4 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import {
   useState,
   useEffect,
@@ -14,6 +14,7 @@ import {
   listOllamaModels,
   DEFAULT_OLLAMA_URL,
   getLocalModelById,
+  getCuratedModelRefsForProviders,
   getOpenRouterModelCacheInfo,
   getReasoningProfile,
   refreshOpenRouterModelCache
@@ -23,37 +24,198 @@ import {
   deleteCustomModel,
   getAllInstalledModels,
   loadGlobalPreferences,
-  isDextoAuthEnabled
+  isDextoAuthEnabled,
+  loadModelPickerState,
+  toggleFavoriteModel,
+  toModelPickerKey
 } from "@dexto/agent-management";
 import { getLLMProviderDisplayName } from "../../utils/llm-provider-display.js";
 import { getMaxVisibleItemsForTerminalRows } from "../../utils/overlaySizing.js";
+import { compareModelsLatestFirst, isDeprecatedModelStatus } from "../../utils/modelOrdering.js";
+import {
+  getCachedStringWidth,
+  stripUnsafeCharacters,
+  toCodePoints
+} from "../../utils/textUtils.js";
 import { HintBar } from "../shared/HintBar.js";
+const FEATURED_SECTION_LIMIT = 8;
+const MODEL_SELECTOR_TABS = [
+  { id: "all-models", label: "All" },
+  { id: "featured", label: "Featured" },
+  { id: "recents", label: "Recents" },
+  { id: "favorites", label: "Favorites" },
+  { id: "custom", label: "Custom" }
+];
+const PROVIDER_COLLATOR = new Intl.Collator("en", { sensitivity: "base" });
+const PROVIDER_TOKEN_PATTERN = /[^a-z0-9]/g;
+function normalizeProviderToken(value) {
+  return value.toLowerCase().replace(PROVIDER_TOKEN_PATTERN, "");
+}
+function toReleaseDateLookupKey(provider, modelName) {
+  return `${provider}::${modelName.toLowerCase()}`;
+}
+function splitGatewayModelName(modelName) {
+  const slashIndex = modelName.indexOf("/");
+  if (slashIndex <= 0 || slashIndex >= modelName.length - 1) {
+    return null;
+  }
+  return {
+    providerPrefix: modelName.slice(0, slashIndex),
+    unprefixedName: modelName.slice(slashIndex + 1)
+  };
+}
+function createReleaseDateResolver({
+  allModels,
+  providers
+}) {
+  const releaseDateByProviderAndName = /* @__PURE__ */ new Map();
+  const releaseDateCandidatesByName = /* @__PURE__ */ new Map();
+  const latestReleaseDateByName = /* @__PURE__ */ new Map();
+  const providerByToken = /* @__PURE__ */ new Map();
+  for (const provider of providers) {
+    const token = normalizeProviderToken(provider);
+    if (token && !providerByToken.has(token)) {
+      providerByToken.set(token, provider);
+    }
+    const modelsForProvider = allModels[provider];
+    if (!modelsForProvider || modelsForProvider.length === 0) {
+      continue;
+    }
+    for (const model of modelsForProvider) {
+      const releaseDate = model.releaseDate;
+      if (!releaseDate) {
+        continue;
+      }
+      const lowerName = model.name.toLowerCase();
+      releaseDateByProviderAndName.set(
+        toReleaseDateLookupKey(provider, lowerName),
+        releaseDate
+      );
+      const existingLatest = latestReleaseDateByName.get(lowerName);
+      if (!existingLatest || releaseDate > existingLatest) {
+        latestReleaseDateByName.set(lowerName, releaseDate);
+      }
+      const candidates = releaseDateCandidatesByName.get(lowerName) ?? [];
+      candidates.push({ provider, releaseDate });
+      releaseDateCandidatesByName.set(lowerName, candidates);
+    }
+  }
+  return (provider, modelName, explicitReleaseDate) => {
+    if (explicitReleaseDate) {
+      return explicitReleaseDate;
+    }
+    const lowerName = modelName.toLowerCase();
+    const sameProviderDate = releaseDateByProviderAndName.get(
+      toReleaseDateLookupKey(provider, lowerName)
+    );
+    if (sameProviderDate) {
+      return sameProviderDate;
+    }
+    const openRouterDate = releaseDateByProviderAndName.get(
+      toReleaseDateLookupKey("openrouter", lowerName)
+    );
+    if (openRouterDate) {
+      return openRouterDate;
+    }
+    const parsedGatewayModel = splitGatewayModelName(modelName);
+    if (!parsedGatewayModel) {
+      return void 0;
+    }
+    const unprefixedName = parsedGatewayModel.unprefixedName.toLowerCase();
+    const preferredProvider = providerByToken.get(
+      normalizeProviderToken(parsedGatewayModel.providerPrefix)
+    );
+    if (preferredProvider) {
+      const providerDate = releaseDateByProviderAndName.get(
+        toReleaseDateLookupKey(preferredProvider, unprefixedName)
+      );
+      if (providerDate) {
+        return providerDate;
+      }
+    }
+    const candidates = releaseDateCandidatesByName.get(unprefixedName);
+    if (candidates && preferredProvider) {
+      const preferredProviderCandidate = candidates.find(
+        (candidate) => candidate.provider === preferredProvider
+      );
+      if (preferredProviderCandidate) {
+        return preferredProviderCandidate.releaseDate;
+      }
+    }
+    return latestReleaseDateByName.get(unprefixedName);
+  };
+}
+function getNextModelSelectorTab(current) {
+  const currentIndex = MODEL_SELECTOR_TABS.findIndex((tab) => tab.id === current);
+  const nextIndex = currentIndex < 0 ? 0 : (currentIndex + 1) % MODEL_SELECTOR_TABS.length;
+  return MODEL_SELECTOR_TABS[nextIndex]?.id ?? "all-models";
+}
+function getPreviousModelSelectorTab(current) {
+  const currentIndex = MODEL_SELECTOR_TABS.findIndex((tab) => tab.id === current);
+  const previousIndex = currentIndex < 0 ? 0 : (currentIndex - 1 + MODEL_SELECTOR_TABS.length) % MODEL_SELECTOR_TABS.length;
+  return MODEL_SELECTOR_TABS[previousIndex]?.id ?? "all-models";
+}
+function compareModelOptionsForDisplay(left, right) {
+  const byRecency = compareModelsLatestFirst(left, right);
+  if (byRecency !== 0) {
+    return byRecency;
+  }
+  const byProvider = PROVIDER_COLLATOR.compare(left.provider, right.provider);
+  if (byProvider !== 0) {
+    return byProvider;
+  }
+  return 0;
+}
+function toModelIdentityKey(model) {
+  return toModelPickerKey({ provider: model.provider, model: model.name });
+}
+function normalizeLineText(value) {
+  return stripUnsafeCharacters(value).replace(/\r?\n/g, " ").replace(/\s+/g, " ").trim();
+}
+function formatLineToWidth(value, width) {
+  if (width <= 0) return "";
+  const normalized = normalizeLineText(value);
+  if (!normalized) {
+    return " ".repeat(width);
+  }
+  const normalizedWidth = getCachedStringWidth(normalized);
+  if (normalizedWidth <= width) {
+    return normalized + " ".repeat(width - normalizedWidth);
+  }
+  if (width === 1) {
+    return "\u2026";
+  }
+  const ellipsis = "\u2026";
+  const targetWidth = width - getCachedStringWidth(ellipsis);
+  let truncated = "";
+  for (const char of toCodePoints(normalized)) {
+    const candidate = `${truncated}${char}`;
+    if (getCachedStringWidth(candidate) > targetWidth) {
+      break;
+    }
+    truncated = candidate;
+  }
+  const withEllipsis = `${truncated}${ellipsis}`;
+  const finalWidth = getCachedStringWidth(withEllipsis);
+  if (finalWidth >= width) {
+    return withEllipsis;
+  }
+  return withEllipsis + " ".repeat(width - finalWidth);
+}
 function isAddCustomOption(item) {
   return "type" in item && item.type === "add-custom";
 }
+function isModelOption(item) {
+  return !("type" in item);
+}
 function getRowPrefix({
   isSelected,
   isDefault,
   isCurrent,
-  isCustom
+  isCustom,
+  isFavorite
 }) {
-  return `${isSelected ? "\u203A" : " "} ${isDefault ? "\u2713" : " "} ${isCurrent ? "\u25CF" : " "} ${isCustom ? "\u2605" : " "}`;
-}
-function computeNextSelection(currentIndex, itemsLength, viewportItems) {
-  const nextIndex = currentIndex;
-  let nextOffset = 0;
-  const modelsLength = Math.max(0, itemsLength - 1);
-  if (nextIndex > 0) {
-    const modelIndex = nextIndex - 1;
-    if (modelIndex < nextOffset) {
-      nextOffset = modelIndex;
-    } else if (modelIndex >= nextOffset + viewportItems) {
-      nextOffset = Math.max(0, modelIndex - viewportItems + 1);
-    }
-  }
-  const maxOffset = Math.max(0, modelsLength - viewportItems);
-  nextOffset = Math.min(maxOffset, Math.max(0, nextOffset));
-  return { index: nextIndex, offset: nextOffset };
+  return `${isSelected ? "\u203A" : " "} ${isDefault ? "\u2713" : " "} ${isCurrent ? "\u25CF" : " "} ${isFavorite ? "\u2605" : isCustom ? "\u25C7" : " "}`;
 }
 const REASONING_VARIANT_DESCRIPTIONS = {
   disabled: "Disable reasoning (fastest)",
@@ -88,7 +250,8 @@ const ModelSelector = forwardRef(function ModelSelector2({
   onEditCustomModel,
   agent
 }, ref) {
-  const { rows: terminalRows } = useTerminalSize();
+  const { rows: terminalRows, columns: terminalColumns } = useTerminalSize();
+  const overlayWidth = useMemo(() => Math.max(20, terminalColumns - 2), [terminalColumns]);
   const maxVisibleItems = useMemo(() => {
     return getMaxVisibleItemsForTerminalRows({
       rows: terminalRows,
@@ -98,6 +261,8 @@ const ModelSelector = forwardRef(function ModelSelector2({
   }, [terminalRows]);
   const [models, setModels] = useState([]);
   const [customModels, setCustomModels] = useState([]);
+  const [modelPickerState, setModelPickerState] = useState(null);
+  const [activeTab, setActiveTab] = useState("all-models");
   const [isLoading, setIsLoading] = useState(false);
   const [selection, setSelection] = useState({ index: 0, offset: 0 });
   const [searchQuery, setSearchQuery] = useState("");
@@ -141,6 +306,8 @@ const ModelSelector = forwardRef(function ModelSelector2({
     setPendingReasoningModel(null);
     setIsSettingDefault(false);
     setReasoningVariantIndex(0);
+    setActiveTab("all-models");
+    setModelPickerState(null);
     if (deleteTimeoutRef.current) {
       clearTimeout(deleteTimeoutRef.current);
       deleteTimeoutRef.current = null;
@@ -164,11 +331,13 @@ const ModelSelector = forwardRef(function ModelSelector2({
           loadCustomModels(),
           loadGlobalPreferences().catch(() => null)
         ]);
+        const pickerState = await loadModelPickerState().catch(() => null);
         const modelList = [];
         const defaultProvider = preferences?.llm.provider;
         const defaultModel = preferences?.llm.model;
         const defaultBaseURL = preferences?.llm.baseURL;
         const defaultReasoningVariant = preferences?.llm.reasoning?.variant;
+        const resolveReleaseDate = createReleaseDateResolver({ allModels, providers });
         let ollamaModels = [];
         let localModels = [];
         try {
@@ -209,8 +378,16 @@ const ModelSelector = forwardRef(function ModelSelector2({
           if (provider === "dexto-nova" && !isDextoAuthEnabled()) {
             continue;
           }
-          const providerModels = allModels[provider];
+          const providerModels = [...allModels[provider]].sort(compareModelsLatestFirst);
           for (const model of providerModels) {
+            if (isDeprecatedModelStatus(model.status)) {
+              continue;
+            }
+            const releaseDate = resolveReleaseDate(
+              provider,
+              model.name,
+              model.releaseDate
+            );
             const originalProvider = "originalProvider" in model ? model.originalProvider : void 0;
             modelList.push({
               provider,
@@ -220,6 +397,8 @@ const ModelSelector = forwardRef(function ModelSelector2({
               isDefault: provider === defaultProvider && model.name === defaultModel,
               isCurrent: provider === currentConfig.provider && model.name === currentConfig.model,
               isCustom: false,
+              ...releaseDate !== void 0 ? { releaseDate } : {},
+              ...model.status !== void 0 ? { status: model.status } : {},
               ...defaultReasoningVariant && provider === defaultProvider && model.name === defaultModel ? { reasoningVariant: defaultReasoningVariant } : {},
               ...defaultBaseURL && provider === defaultProvider && model.name === defaultModel ? { baseURL: defaultBaseURL } : {},
               // Store original provider for display purposes
@@ -255,7 +434,15 @@ const ModelSelector = forwardRef(function ModelSelector2({
         }
         const vertexModels = allModels["vertex"];
         if (vertexModels) {
-          for (const model of vertexModels) {
+          for (const model of [...vertexModels].sort(compareModelsLatestFirst)) {
+            if (isDeprecatedModelStatus(model.status)) {
+              continue;
+            }
+            const releaseDate = resolveReleaseDate(
+              "vertex",
+              model.name,
+              model.releaseDate
+            );
             modelList.push({
               provider: "vertex",
               name: model.name,
@@ -264,23 +451,73 @@ const ModelSelector = forwardRef(function ModelSelector2({
               isDefault: defaultProvider === "vertex" && defaultModel === model.name,
               isCurrent: currentConfig.provider === "vertex" && currentConfig.model === model.name,
               isCustom: false,
+              ...releaseDate !== void 0 ? { releaseDate } : {},
+              ...model.status !== void 0 ? { status: model.status } : {},
               ...defaultReasoningVariant && defaultProvider === "vertex" && defaultModel === model.name ? { reasoningVariant: defaultReasoningVariant } : {}
             });
           }
         }
         if (!cancelled) {
-          setModels(modelList);
+          const dedupedByKey = /* @__PURE__ */ new Map();
+          const dedupeOrder = [];
+          for (const model of modelList) {
+            const key = toModelIdentityKey(model);
+            const existing = dedupedByKey.get(key);
+            if (!existing) {
+              dedupedByKey.set(key, model);
+              dedupeOrder.push(key);
+              continue;
+            }
+            const preferred = model.isCustom && !existing.isCustom ? model : existing;
+            const secondary = preferred === existing ? model : existing;
+            const mergedBaseURL = preferred.baseURL ?? secondary.baseURL;
+            const mergedReasoningVariant = preferred.reasoningVariant ?? secondary.reasoningVariant;
+            const mergedOriginalProvider = preferred.originalProvider ?? secondary.originalProvider;
+            const mergedReleaseDate = preferred.releaseDate ?? secondary.releaseDate;
+            const mergedStatus = preferred.status ?? secondary.status;
+            const mergedModel = {
+              ...preferred,
+              isDefault: preferred.isDefault || secondary.isDefault,
+              isCurrent: preferred.isCurrent || secondary.isCurrent,
+              displayName: preferred.displayName ?? secondary.displayName,
+              maxInputTokens: Math.max(
+                preferred.maxInputTokens,
+                secondary.maxInputTokens
+              )
+            };
+            if (mergedBaseURL !== void 0) {
+              mergedModel.baseURL = mergedBaseURL;
+            }
+            if (mergedReasoningVariant !== void 0) {
+              mergedModel.reasoningVariant = mergedReasoningVariant;
+            }
+            if (mergedOriginalProvider !== void 0) {
+              mergedModel.originalProvider = mergedOriginalProvider;
+            }
+            if (mergedReleaseDate !== void 0) {
+              mergedModel.releaseDate = mergedReleaseDate;
+            }
+            if (mergedStatus !== void 0) {
+              mergedModel.status = mergedStatus;
+            }
+            dedupedByKey.set(key, mergedModel);
+          }
+          const dedupedModelList = dedupeOrder.map((key) => dedupedByKey.get(key)).filter((model) => model !== void 0);
+          setModels(dedupedModelList);
           setCustomModels(loadedCustomModels);
+          setModelPickerState(pickerState);
           setIsLoading(false);
-          const currentIndex = modelList.findIndex((m) => m.isCurrent);
+          const currentIndex = dedupedModelList.findIndex((m) => m.isCurrent);
           if (currentIndex >= 0) {
-            const nextIndex = currentIndex + 1;
+            const nextIndex = currentIndex;
             const nextMaxVisibleItems = maxVisibleItemsRef.current;
-            const nextModelsViewportItems = Math.max(1, nextMaxVisibleItems - 1);
-            const maxOffset = Math.max(0, modelList.length - nextModelsViewportItems);
+            const maxOffset = Math.max(
+              0,
+              dedupedModelList.length - nextMaxVisibleItems
+            );
             const nextOffset = Math.min(
               maxOffset,
-              Math.max(0, currentIndex - nextModelsViewportItems + 1)
+              Math.max(0, currentIndex - nextMaxVisibleItems + 1)
             );
             selectedIndexRef.current = nextIndex;
             setSelection({ index: nextIndex, offset: nextOffset });
@@ -292,6 +529,7 @@ const ModelSelector = forwardRef(function ModelSelector2({
             `Failed to fetch models: ${error instanceof Error ? error.message : "Unknown error"}`
           );
           setModels([]);
+          setModelPickerState(null);
           setIsLoading(false);
         }
       }
@@ -301,35 +539,99 @@ const ModelSelector = forwardRef(function ModelSelector2({
       cancelled = true;
     };
   }, [isVisible, agent, refreshVersion]);
-  const filteredItems = useMemo(() => {
-    const addCustomOption = { type: "add-custom" };
-    if (!searchQuery.trim()) {
-      return [addCustomOption, ...models];
-    }
-    const query = searchQuery.toLowerCase().replace(/[\s-]+/g, "");
-    const filtered = models.filter((model) => {
+  const favoriteKeySet = useMemo(
+    () => new Set(
+      (modelPickerState?.favorites ?? []).map(
+        (entry) => toModelPickerKey({
+          provider: entry.provider,
+          model: entry.model
+        })
+      )
+    ),
+    [modelPickerState]
+  );
+  const matchesSearch = useCallback(
+    (model) => {
+      if (!searchQuery.trim()) {
+        return true;
+      }
+      const query = searchQuery.toLowerCase().replace(/[\s-]+/g, "");
       const name = model.name.toLowerCase().replace(/[\s-]+/g, "");
       const displayName = (model.displayName || "").toLowerCase().replace(/[\s-]+/g, "");
       const provider = model.provider.toLowerCase().replace(/[\s-]+/g, "");
       return name.includes(query) || displayName.includes(query) || provider.includes(query);
-    });
-    return [addCustomOption, ...filtered];
-  }, [models, searchQuery]);
+    },
+    [searchQuery]
+  );
+  const filteredItems = useMemo(() => {
+    const addCustomOption = { type: "add-custom" };
+    const hasSearchQuery = searchQuery.trim().length > 0;
+    const allCandidates = [...models].sort(compareModelOptionsForDisplay);
+    const modelsByKey = new Map(
+      allCandidates.map((model) => [
+        toModelPickerKey({ provider: model.provider, model: model.name }),
+        model
+      ])
+    );
+    const toUniqueMatchingModels = (candidates, limit) => {
+      const deduped = [];
+      const seen = /* @__PURE__ */ new Set();
+      for (const candidate of candidates) {
+        if (!candidate || !matchesSearch(candidate)) {
+          continue;
+        }
+        const key = toModelPickerKey({
+          provider: candidate.provider,
+          model: candidate.name
+        });
+        if (seen.has(key)) {
+          continue;
+        }
+        seen.add(key);
+        deduped.push(candidate);
+        if (limit !== void 0 && deduped.length >= limit) {
+          break;
+        }
+      }
+      return deduped;
+    };
+    const providersInModels = Array.from(
+      new Set(models.map((model) => model.provider))
+    );
+    const featuredCandidates = getCuratedModelRefsForProviders({
+      providers: providersInModels,
+      max: FEATURED_SECTION_LIMIT
+    }).map((ref2) => modelsByKey.get(toModelPickerKey(ref2)));
+    const recentsFromState = (modelPickerState?.recents ?? []).map(
+      (entry) => modelsByKey.get(toModelPickerKey({ provider: entry.provider, model: entry.model }))
+    );
+    const favoritesFromState = (modelPickerState?.favorites ?? []).map(
+      (entry) => modelsByKey.get(toModelPickerKey({ provider: entry.provider, model: entry.model }))
+    );
+    const customCandidates = allCandidates.filter((model) => model.isCustom);
+    const tabModels = hasSearchQuery ? toUniqueMatchingModels(allCandidates) : activeTab === "all-models" ? toUniqueMatchingModels(allCandidates) : activeTab === "featured" ? toUniqueMatchingModels(featuredCandidates) : activeTab === "recents" ? toUniqueMatchingModels(recentsFromState) : activeTab === "favorites" ? toUniqueMatchingModels(favoritesFromState) : toUniqueMatchingModels(customCandidates);
+    return activeTab === "custom" && !hasSearchQuery ? [addCustomOption, ...tabModels] : tabModels;
+  }, [activeTab, matchesSearch, modelPickerState, models, searchQuery]);
+  const hasAddCustomOption = activeTab === "custom" && searchQuery.trim().length === 0;
+  const modelStartIndex = hasAddCustomOption ? 1 : 0;
+  const listViewportItems = hasAddCustomOption ? modelsViewportItems : maxVisibleItems;
   useEffect(() => {
     setSelection((prev) => {
       const maxIndex = Math.max(0, filteredItems.length - 1);
       const nextIndex = Math.min(prev.index, maxIndex);
       let nextOffset = prev.offset;
-      const nextModelsLength = Math.max(0, filteredItems.length - 1);
-      if (nextIndex > 0) {
-        const modelIndex = nextIndex - 1;
+      const nextModelsLength = Math.max(0, filteredItems.length - modelStartIndex);
+      if (nextIndex >= modelStartIndex) {
+        const modelIndex = nextIndex - modelStartIndex;
         if (modelIndex < nextOffset) {
           nextOffset = modelIndex;
-        } else if (modelIndex >= nextOffset + modelsViewportItems) {
-          nextOffset = Math.max(0, modelIndex - modelsViewportItems + 1);
+        } else if (modelIndex >= nextOffset + listViewportItems) {
+          nextOffset = Math.max(0, modelIndex - listViewportItems + 1);
         }
+      } else {
+        nextOffset = 0;
       }
-      const maxOffset = Math.max(0, nextModelsLength - modelsViewportItems);
+      const maxOffset = Math.max(0, nextModelsLength - listViewportItems);
       nextOffset = Math.min(maxOffset, Math.max(0, nextOffset));
       if (nextIndex === prev.index && nextOffset === prev.offset) {
         return prev;
@@ -337,7 +639,7 @@ const ModelSelector = forwardRef(function ModelSelector2({
       selectedIndexRef.current = nextIndex;
       return { index: nextIndex, offset: nextOffset };
     });
-  }, [filteredItems.length, modelsViewportItems]);
+  }, [filteredItems.length, listViewportItems, modelStartIndex]);
   const handleDeleteCustomModel = useCallback(
     async (model) => {
       if (!model.isCustom) return;
@@ -354,6 +656,23 @@ const ModelSelector = forwardRef(function ModelSelector2({
     },
     [agent]
   );
+  const handleToggleFavoriteModel = useCallback(
+    async (model) => {
+      try {
+        await toggleFavoriteModel({
+          provider: model.provider,
+          model: model.name
+        });
+        const nextState = await loadModelPickerState();
+        setModelPickerState(nextState);
+      } catch (error) {
+        agent.logger.error(
+          `Failed to toggle favorite model: ${error instanceof Error ? error.message : "Unknown error"}`
+        );
+      }
+    },
+    [agent]
+  );
   const clearActionState = () => {
     setCustomModelAction(null);
     setPendingDeleteConfirm(false);
@@ -452,27 +771,44 @@ const ModelSelector = forwardRef(function ModelSelector2({
         }
         const itemsLength = filteredItems.length;
         const currentItem = filteredItems[selectedIndexRef.current];
-        const isCustomActionItem = currentItem && !isAddCustomOption(currentItem) && currentItem.isCustom;
-        const isSelectableItem = currentItem && !isAddCustomOption(currentItem);
-        if (key.rightArrow) {
+        const selectedModel = currentItem && isModelOption(currentItem) ? currentItem : null;
+        const isCustomActionItem = selectedModel?.isCustom ?? false;
+        const isSelectableItem = selectedModel !== null;
+        if (key.tab) {
+          clearActionState();
+          setActiveTab((prev) => getNextModelSelectorTab(prev));
+          selectedIndexRef.current = 0;
+          setSelection({ index: 0, offset: 0 });
+          return true;
+        }
+        if (key.ctrl && input === "f" && isSelectableItem) {
+          const item = selectedModel;
+          if (!item) return true;
+          clearActionState();
+          void handleToggleFavoriteModel(item);
+          return true;
+        }
+        if (key.ctrl && key.rightArrow) {
           if (!isSelectableItem) return false;
           if (customModelAction === null) {
-            if (isCustomActionItem) {
-              setCustomModelAction("edit");
-            } else {
-              setCustomModelAction("default");
-            }
+            setCustomModelAction("favorite");
             return true;
           }
-          if (customModelAction === "edit") {
+          if (customModelAction === "favorite") {
             setCustomModelAction("default");
             return true;
           }
           if (customModelAction === "default") {
+            if (isCustomActionItem) {
+              setCustomModelAction("edit");
+              return true;
+            }
+            return true;
+          }
+          if (customModelAction === "edit") {
             if (isCustomActionItem) {
               setCustomModelAction("delete");
               setPendingDeleteConfirm(false);
-              return true;
             }
             return true;
           }
@@ -480,9 +816,9 @@ const ModelSelector = forwardRef(function ModelSelector2({
             return true;
           }
         }
-        if (key.leftArrow) {
+        if (key.ctrl && key.leftArrow) {
           if (customModelAction === "delete") {
-            setCustomModelAction("default");
+            setCustomModelAction("edit");
             setPendingDeleteConfirm(false);
             if (deleteTimeoutRef.current) {
               clearTimeout(deleteTimeoutRef.current);
@@ -491,19 +827,33 @@ const ModelSelector = forwardRef(function ModelSelector2({
             return true;
           }
           if (customModelAction === "default") {
-            if (isCustomActionItem) {
-              setCustomModelAction("edit");
-            } else {
-              setCustomModelAction(null);
-            }
+            setCustomModelAction("favorite");
             return true;
           }
           if (customModelAction === "edit") {
+            setCustomModelAction("default");
+            return true;
+          }
+          if (customModelAction === "favorite") {
             setCustomModelAction(null);
             return true;
           }
           return false;
         }
+        if (key.rightArrow) {
+          clearActionState();
+          setActiveTab((prev) => getNextModelSelectorTab(prev));
+          selectedIndexRef.current = 0;
+          setSelection({ index: 0, offset: 0 });
+          return true;
+        }
+        if (key.leftArrow) {
+          clearActionState();
+          setActiveTab((prev) => getPreviousModelSelectorTab(prev));
+          selectedIndexRef.current = 0;
+          setSelection({ index: 0, offset: 0 });
+          return true;
+        }
         if (input && !key.return && !key.upArrow && !key.downArrow && !key.tab) {
           if (customModelAction) {
             clearActionState();
@@ -532,16 +882,18 @@ const ModelSelector = forwardRef(function ModelSelector2({
           selectedIndexRef.current = nextIndex;
           setSelection((prev) => {
             let nextOffset = prev.offset;
-            const nextModelsLength = Math.max(0, itemsLength - 1);
-            if (nextIndex > 0) {
-              const modelIndex = nextIndex - 1;
+            const nextModelsLength = Math.max(0, itemsLength - modelStartIndex);
+            if (nextIndex >= modelStartIndex) {
+              const modelIndex = nextIndex - modelStartIndex;
               if (modelIndex < prev.offset) {
                 nextOffset = modelIndex;
-              } else if (modelIndex >= prev.offset + modelsViewportItems) {
-                nextOffset = Math.max(0, modelIndex - modelsViewportItems + 1);
+              } else if (modelIndex >= prev.offset + listViewportItems) {
+                nextOffset = Math.max(0, modelIndex - listViewportItems + 1);
               }
+            } else {
+              nextOffset = 0;
             }
-            const maxOffset = Math.max(0, nextModelsLength - modelsViewportItems);
+            const maxOffset = Math.max(0, nextModelsLength - listViewportItems);
             nextOffset = Math.min(maxOffset, Math.max(0, nextOffset));
             return { index: nextIndex, offset: nextOffset };
           });
@@ -555,16 +907,18 @@ const ModelSelector = forwardRef(function ModelSelector2({
           selectedIndexRef.current = nextIndex;
           setSelection((prev) => {
             let nextOffset = prev.offset;
-            const nextModelsLength = Math.max(0, itemsLength - 1);
-            if (nextIndex > 0) {
-              const modelIndex = nextIndex - 1;
+            const nextModelsLength = Math.max(0, itemsLength - modelStartIndex);
+            if (nextIndex >= modelStartIndex) {
+              const modelIndex = nextIndex - modelStartIndex;
               if (modelIndex < prev.offset) {
                 nextOffset = modelIndex;
-              } else if (modelIndex >= prev.offset + modelsViewportItems) {
-                nextOffset = Math.max(0, modelIndex - modelsViewportItems + 1);
+              } else if (modelIndex >= prev.offset + listViewportItems) {
+                nextOffset = Math.max(0, modelIndex - listViewportItems + 1);
               }
+            } else {
+              nextOffset = 0;
             }
-            const maxOffset = Math.max(0, nextModelsLength - modelsViewportItems);
+            const maxOffset = Math.max(0, nextModelsLength - listViewportItems);
             nextOffset = Math.min(maxOffset, Math.max(0, nextOffset));
             return { index: nextIndex, offset: nextOffset };
           });
@@ -577,6 +931,10 @@ const ModelSelector = forwardRef(function ModelSelector2({
               onAddCustomModel();
               return true;
             }
+            if (customModelAction === "favorite") {
+              void handleToggleFavoriteModel(item);
+              return true;
+            }
             if (customModelAction === "edit" && item.isCustom) {
               const customModel = customModels.find(
                 (cm) => cm.name === item.name && (cm.provider ?? "openai-compatible") === item.provider
@@ -635,7 +993,8 @@ const ModelSelector = forwardRef(function ModelSelector2({
       isLoading,
       filteredItems,
       maxVisibleItems,
-      modelsViewportItems,
+      listViewportItems,
+      modelStartIndex,
       onClose,
       onSelectModel,
       onSetDefaultModel,
@@ -645,14 +1004,18 @@ const ModelSelector = forwardRef(function ModelSelector2({
       pendingDeleteConfirm,
       customModels,
       handleDeleteCustomModel,
+      handleToggleFavoriteModel,
       pendingReasoningModel,
       reasoningVariantIndex,
       reasoningVariantOptions,
       isSettingDefault,
+      activeTab,
+      agent,
       beginReasoningVariantSelection
     ]
   );
   if (!isVisible) return null;
+  const blankLine = " ".repeat(overlayWidth);
   if (pendingReasoningModel) {
     const totalOptions = reasoningVariantOptions.length;
     const reasoningVisibleItems = Math.min(maxVisibleItems, totalOptions);
@@ -665,200 +1028,167 @@ const ModelSelector = forwardRef(function ModelSelector2({
       reasoningOffset + reasoningVisibleItems
     );
     const selectedReasoningOption = reasoningVariantOptions[reasoningVariantIndex] ?? reasoningVariantOptions[0];
-    return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", children: [
-      /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsxs(Text, { color: "cyan", bold: true, children: [
+    return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", width: overlayWidth, children: [
+      /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, width: overlayWidth, children: /* @__PURE__ */ jsxs(Text, { color: "cyan", bold: true, children: [
         "Reasoning Variant",
         isSettingDefault ? /* @__PURE__ */ jsx(Text, { color: "gray", children: " (default)" }) : null
       ] }) }),
-      /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsx(Text, { color: "gray", wrap: "truncate-end", children: pendingReasoningModel.displayName || pendingReasoningModel.name }) }),
-      /* @__PURE__ */ jsx(Box, { flexDirection: "column", height: maxVisibleItems, marginTop: 1, children: Array.from({ length: maxVisibleItems }, (_, rowIndex) => {
-        const option = visibleReasoningOptions[rowIndex];
-        if (!option) {
-          return /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsx(Text, { children: " " }) }, `reasoning-empty-${rowIndex}`);
+      /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, width: overlayWidth, children: /* @__PURE__ */ jsx(Text, { color: "gray", children: formatLineToWidth(
+        pendingReasoningModel.displayName || pendingReasoningModel.name,
+        overlayWidth
+      ) }) }),
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          flexDirection: "column",
+          height: maxVisibleItems,
+          marginTop: 1,
+          width: overlayWidth,
+          children: Array.from({ length: maxVisibleItems }, (_, rowIndex) => {
+            const option = visibleReasoningOptions[rowIndex];
+            if (!option) {
+              return /* @__PURE__ */ jsx(
+                Box,
+                {
+                  paddingX: 0,
+                  paddingY: 0,
+                  width: overlayWidth,
+                  children: /* @__PURE__ */ jsx(Text, { children: blankLine })
+                },
+                `reasoning-empty-${rowIndex}`
+              );
+            }
+            const actualIndex = reasoningOffset + rowIndex;
+            const isSelected = actualIndex === reasoningVariantIndex;
+            return /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, width: overlayWidth, children: /* @__PURE__ */ jsx(Text, { color: isSelected ? "cyan" : "gray", bold: isSelected, children: formatLineToWidth(
+              `${isSelected ? "\u203A" : " "} ${option.label}`,
+              overlayWidth
+            ) }) }, option.value);
+          })
         }
-        const actualIndex = reasoningOffset + rowIndex;
-        const isSelected = actualIndex === reasoningVariantIndex;
-        return /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsxs(
-          Text,
-          {
-            color: isSelected ? "cyan" : "gray",
-            bold: isSelected,
-            wrap: "truncate-end",
-            children: [
-              isSelected ? "\u203A" : " ",
-              " ",
-              option.label
-            ]
-          }
-        ) }, option.value);
-      }) }),
-      /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, marginTop: 1, children: /* @__PURE__ */ jsx(Text, { color: "gray", wrap: "truncate-end", children: selectedReasoningOption?.description ?? "" }) }),
-      /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsx(HintBar, { hints: ["\u2191\u2193 navigate", "Enter select", "Esc back"] }) })
+      ),
+      /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, marginTop: 1, width: overlayWidth, children: /* @__PURE__ */ jsx(Text, { color: "gray", children: formatLineToWidth(
+        selectedReasoningOption?.description ?? "",
+        overlayWidth
+      ) }) }),
+      /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, width: overlayWidth, children: /* @__PURE__ */ jsx(HintBar, { hints: ["\u2191\u2193 navigate", "Enter select", "Esc back"] }) })
     ] });
   }
   const selectedIndex = selection.index;
   const scrollOffset = selection.offset;
-  const modelsOnly = filteredItems.filter(
-    (item) => !isAddCustomOption(item)
-  );
-  const visibleModels = modelsOnly.slice(scrollOffset, scrollOffset + modelsViewportItems);
+  const listItems = filteredItems.filter((item) => !isAddCustomOption(item));
+  const visibleItems = listItems.slice(scrollOffset, scrollOffset + listViewportItems);
   const selectedItem = filteredItems[selectedIndex];
-  const hasActionableItems = selectedItem && !isAddCustomOption(selectedItem);
-  let detailLine = "";
-  if (isLoading) {
-    detailLine = "Loading models\u2026";
-  } else if (customModelAction === "delete" && pendingDeleteConfirm) {
-    detailLine = "Confirm delete: press Enter again";
-  } else if (customModelAction) {
-    const label = customModelAction === "edit" ? "Edit" : customModelAction === "default" ? "Set as default" : "Delete";
-    detailLine = `Action: ${label}`;
-  } else if (searchQuery.trim() && filteredItems.length <= 1) {
-    detailLine = "No models match your search";
-  } else if (!selectedItem) {
-    detailLine = "";
-  } else if (isAddCustomOption(selectedItem)) {
-    detailLine = "Enter to add a custom model";
-  } else {
-    const provider = getLLMProviderDisplayName(selectedItem.provider);
-    const name = selectedItem.displayName || selectedItem.name;
-    const flags = [];
-    if (selectedItem.isDefault) flags.push("default");
-    if (selectedItem.isCurrent) flags.push("current");
-    detailLine = flags.length > 0 ? `${name} (${provider}) \u2022 ${flags.join(", ")}` : `${name} (${provider})`;
-  }
-  return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", children: [
-    /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsx(Text, { color: "cyan", bold: true, children: "Models" }) }),
-    /* @__PURE__ */ jsxs(Box, { paddingX: 0, paddingY: 0, marginTop: 1, children: [
-      /* @__PURE__ */ jsx(Text, { color: "gray", children: "Search: " }),
-      /* @__PURE__ */ jsx(Text, { color: searchQuery ? "white" : "gray", wrap: "truncate-end", children: searchQuery || "Type to filter models\u2026" })
-    ] }),
-    /* @__PURE__ */ jsxs(Box, { flexDirection: "column", marginTop: 1, children: [
-      /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsxs(
+  const hasActionableItems = Boolean(selectedItem && isModelOption(selectedItem));
+  const searchLine = formatLineToWidth(
+    `Search: ${searchQuery || "Type to filter models\u2026"}`,
+    overlayWidth
+  );
+  const addCustomLine = hasAddCustomOption ? formatLineToWidth(
+    `${getRowPrefix({
+      isSelected: selectedIndex === 0,
+      isDefault: false,
+      isCurrent: false,
+      isCustom: false,
+      isFavorite: false
+    })} Add custom model\u2026`,
+    overlayWidth
+  ) : "";
+  return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", width: overlayWidth, children: [
+    /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, width: overlayWidth, children: /* @__PURE__ */ jsx(Text, { color: "cyan", bold: true, children: "Models" }) }),
+    /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, width: overlayWidth, flexDirection: "row", children: MODEL_SELECTOR_TABS.map((tab) => /* @__PURE__ */ jsx(
+      Box,
+      {
+        marginRight: 1,
+        borderStyle: "round",
+        borderColor: activeTab === tab.id ? "cyan" : "gray",
+        paddingX: 1,
+        children: /* @__PURE__ */ jsx(
+          Text,
+          {
+            color: activeTab === tab.id ? "cyan" : "gray",
+            bold: activeTab === tab.id,
+            children: tab.label
+          }
+        )
+      },
+      tab.id
+    )) }),
+    /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, width: overlayWidth, children: /* @__PURE__ */ jsx(Text, { color: searchQuery ? "white" : "gray", children: searchLine }) }),
+    /* @__PURE__ */ jsxs(Box, { flexDirection: "column", marginTop: 1, width: overlayWidth, children: [
+      hasAddCustomOption && /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, width: overlayWidth, children: /* @__PURE__ */ jsx(
         Text,
         {
           color: selectedIndex === 0 ? "green" : "gray",
           bold: selectedIndex === 0,
-          wrap: "truncate-end",
-          children: [
-            getRowPrefix({
-              isSelected: selectedIndex === 0,
-              isDefault: false,
-              isCurrent: false,
-              isCustom: false
-            }),
-            " ",
-            "Add custom model\u2026"
-          ]
+          children: addCustomLine
         }
       ) }),
-      /* @__PURE__ */ jsx(Box, { flexDirection: "column", height: modelsViewportItems, children: isLoading || modelsOnly.length === 0 ? Array.from({ length: modelsViewportItems }, (_, index) => /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsx(Text, { children: " " }) }, `model-empty-${index}`)) : Array.from({ length: modelsViewportItems }, (_, rowIndex) => {
-        const item = visibleModels[rowIndex];
+      /* @__PURE__ */ jsx(Box, { flexDirection: "column", height: listViewportItems, width: overlayWidth, children: isLoading || listItems.length === 0 ? Array.from({ length: listViewportItems }, (_, index) => /* @__PURE__ */ jsx(
+        Box,
+        {
+          paddingX: 0,
+          paddingY: 0,
+          width: overlayWidth,
+          children: /* @__PURE__ */ jsx(Text, { children: blankLine })
+        },
+        `model-empty-${index}`
+      )) : Array.from({ length: listViewportItems }, (_, rowIndex) => {
+        const item = visibleItems[rowIndex];
         if (!item) {
           return /* @__PURE__ */ jsx(
             Box,
             {
               paddingX: 0,
               paddingY: 0,
-              children: /* @__PURE__ */ jsx(Text, { children: " " })
+              width: overlayWidth,
+              children: /* @__PURE__ */ jsx(Text, { children: blankLine })
             },
             `model-empty-${rowIndex}`
           );
         }
-        const actualIndex = 1 + scrollOffset + rowIndex;
+        const actualIndex = modelStartIndex + scrollOffset + rowIndex;
         const isSelected = actualIndex === selectedIndex;
         const providerDisplay = getLLMProviderDisplayName(item.provider);
         const name = item.displayName || item.name;
+        const isFavorite = favoriteKeySet.has(
+          toModelPickerKey({
+            provider: item.provider,
+            model: item.name
+          })
+        );
         const prefix = getRowPrefix({
           isSelected,
           isDefault: item.isDefault,
           isCurrent: item.isCurrent,
-          isCustom: item.isCustom
+          isCustom: item.isCustom,
+          isFavorite
         });
-        return /* @__PURE__ */ jsxs(
+        return /* @__PURE__ */ jsx(
           Box,
           {
             flexDirection: "row",
             paddingX: 0,
             paddingY: 0,
-            children: [
-              /* @__PURE__ */ jsx(Box, { flexGrow: 1, children: /* @__PURE__ */ jsxs(
-                Text,
-                {
-                  color: isSelected ? "cyan" : "gray",
-                  bold: isSelected,
-                  wrap: "truncate-end",
-                  children: [
-                    prefix,
-                    " ",
-                    name,
-                    " (",
-                    providerDisplay,
-                    ")"
-                  ]
-                }
-              ) }),
-              isSelected && /* @__PURE__ */ jsxs(Box, { flexDirection: "row", marginLeft: 1, children: [
-                item.isCustom && /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsxs(
-                    Text,
-                    {
-                      color: customModelAction === "edit" ? "green" : "gray",
-                      bold: customModelAction === "edit",
-                      inverse: customModelAction === "edit",
-                      children: [
-                        " ",
-                        "Edit",
-                        " "
-                      ]
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(Text, { children: " " })
-                ] }),
-                /* @__PURE__ */ jsxs(
-                  Text,
-                  {
-                    color: customModelAction === "default" ? "cyan" : "gray",
-                    bold: customModelAction === "default",
-                    inverse: customModelAction === "default",
-                    children: [
-                      " ",
-                      "Set as Default",
-                      " "
-                    ]
-                  }
-                ),
-                item.isCustom && /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsx(Text, { children: " " }),
-                  /* @__PURE__ */ jsxs(
-                    Text,
-                    {
-                      color: customModelAction === "delete" ? "red" : "gray",
-                      bold: customModelAction === "delete",
-                      inverse: customModelAction === "delete",
-                      children: [
-                        " ",
-                        "Delete",
-                        " "
-                      ]
-                    }
-                  )
-                ] })
-              ] })
-            ]
+            width: overlayWidth,
+            children: /* @__PURE__ */ jsx(Text, { color: isSelected ? "cyan" : "gray", bold: isSelected, children: formatLineToWidth(
+              `${prefix} ${name} (${providerDisplay})`,
+              overlayWidth
+            ) })
           },
-          `${item.provider}-${item.name}-${item.isCustom ? "custom" : "registry"}`
+          `model-${activeTab}-${actualIndex}-${toModelIdentityKey(item)}`
         );
       }) })
     ] }),
-    /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, marginTop: 1, children: /* @__PURE__ */ jsx(Text, { color: "gray", wrap: "truncate-end", children: detailLine }) }),
-    /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, marginTop: 1, width: overlayWidth, children: /* @__PURE__ */ jsx(
       HintBar,
       {
         hints: [
           "\u2191\u2193 navigate",
-          "Enter select",
+          "Enter select/apply",
           "Esc close",
-          hasActionableItems ? "\u2190\u2192 actions" : ""
+          "\u2190\u2192 switch tab",
+          hasActionableItems ? "Ctrl+F quick favorite" : ""
         ]
       }
     ) })