@dexto/tui 1.6.2

package/dist/components/overlays/ModelSelectorRefactored.cjs

@@ -0,0 +1,869 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var ModelSelectorRefactored_exports = {};
+__export(ModelSelectorRefactored_exports, {
+  default: () => ModelSelectorRefactored_default
+});
+module.exports = __toCommonJS(ModelSelectorRefactored_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_ink = require("ink");
+var import_useTerminalSize = require("../../hooks/useTerminalSize.js");
+var import_core = require("@dexto/core");
+var import_agent_management = require("@dexto/agent-management");
+var import_llm_provider_display = require("../../utils/llm-provider-display.js");
+var import_overlaySizing = require("../../utils/overlaySizing.js");
+var import_HintBar = require("../shared/HintBar.js");
+function isAddCustomOption(item) {
+  return "type" in item && item.type === "add-custom";
+}
+function getRowPrefix({
+  isSelected,
+  isDefault,
+  isCurrent,
+  isCustom
+}) {
+  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 };
+}
+const REASONING_VARIANT_DESCRIPTIONS = {
+  disabled: "Disable reasoning (fastest)",
+  none: "Disable reasoning (fastest)",
+  enabled: "Enable provider default reasoning",
+  minimal: "Minimal reasoning",
+  low: "Light reasoning, faster responses",
+  medium: "Balanced reasoning",
+  high: "Thorough reasoning",
+  max: "Maximum reasoning within provider limits",
+  xhigh: "Extra high reasoning"
+};
+function buildReasoningVariantOptions(support) {
+  return support.variants.map((variant) => ({
+    value: variant.id,
+    label: variant.id === support.defaultVariant ? `${variant.label} (Recommended)` : variant.label,
+    description: REASONING_VARIANT_DESCRIPTIONS[variant.id] ?? "Model/provider-native reasoning variant"
+  }));
+}
+function getInitialVariantIndex(savedVariant, options, defaultVariant) {
+  const preferredVariant = savedVariant ?? defaultVariant;
+  if (!preferredVariant) return 0;
+  const idx = options.findIndex((option) => option.value === preferredVariant);
+  return idx >= 0 ? idx : 0;
+}
+const ModelSelector = (0, import_react.forwardRef)(function ModelSelector2({
+  isVisible,
+  onSelectModel,
+  onSetDefaultModel,
+  onClose,
+  onAddCustomModel,
+  onEditCustomModel,
+  agent
+}, ref) {
+  const { rows: terminalRows } = (0, import_useTerminalSize.useTerminalSize)();
+  const maxVisibleItems = (0, import_react.useMemo)(() => {
+    return (0, import_overlaySizing.getMaxVisibleItemsForTerminalRows)({
+      rows: terminalRows,
+      hardCap: 8,
+      reservedRows: 14
+    });
+  }, [terminalRows]);
+  const [models, setModels] = (0, import_react.useState)([]);
+  const [customModels, setCustomModels] = (0, import_react.useState)([]);
+  const [isLoading, setIsLoading] = (0, import_react.useState)(false);
+  const [selection, setSelection] = (0, import_react.useState)({ index: 0, offset: 0 });
+  const [searchQuery, setSearchQuery] = (0, import_react.useState)("");
+  const [customModelAction, setCustomModelAction] = (0, import_react.useState)(null);
+  const [pendingDeleteConfirm, setPendingDeleteConfirm] = (0, import_react.useState)(false);
+  const selectedIndexRef = (0, import_react.useRef)(0);
+  const deleteTimeoutRef = (0, import_react.useRef)(null);
+  const maxVisibleItemsRef = (0, import_react.useRef)(maxVisibleItems);
+  const [pendingReasoningModel, setPendingReasoningModel] = (0, import_react.useState)(null);
+  const [reasoningVariantIndex, setReasoningVariantIndex] = (0, import_react.useState)(0);
+  const [isSettingDefault, setIsSettingDefault] = (0, import_react.useState)(false);
+  const [refreshVersion, setRefreshVersion] = (0, import_react.useState)(0);
+  const reasoningVariantOptions = (0, import_react.useMemo)(() => {
+    if (!pendingReasoningModel) return [];
+    const support = (0, import_core.getReasoningProfile)(
+      pendingReasoningModel.provider,
+      pendingReasoningModel.name
+    );
+    return buildReasoningVariantOptions(support);
+  }, [pendingReasoningModel]);
+  selectedIndexRef.current = selection.index;
+  maxVisibleItemsRef.current = maxVisibleItems;
+  const modelsViewportItems = Math.max(1, maxVisibleItems - 1);
+  (0, import_react.useEffect)(() => {
+    return () => {
+      if (deleteTimeoutRef.current) {
+        clearTimeout(deleteTimeoutRef.current);
+      }
+    };
+  }, []);
+  (0, import_react.useEffect)(() => {
+    if (!isVisible) return;
+    let cancelled = false;
+    setIsLoading(true);
+    setModels([]);
+    setCustomModels([]);
+    setSearchQuery("");
+    setSelection({ index: 0, offset: 0 });
+    setCustomModelAction(null);
+    setPendingDeleteConfirm(false);
+    setPendingReasoningModel(null);
+    setIsSettingDefault(false);
+    setReasoningVariantIndex(0);
+    if (deleteTimeoutRef.current) {
+      clearTimeout(deleteTimeoutRef.current);
+      deleteTimeoutRef.current = null;
+    }
+    const fetchModels = async () => {
+      try {
+        try {
+          const cacheInfo = (0, import_core.getOpenRouterModelCacheInfo)();
+          if (cacheInfo.modelCount === 0) {
+            await (0, import_core.refreshOpenRouterModelCache)({ force: true, timeoutMs: 1e4 });
+          }
+        } catch (error) {
+          agent.logger.debug(
+            `OpenRouter catalog refresh skipped: ${error instanceof Error ? error.message : String(error)}`
+          );
+        }
+        const [allModels, providers, currentConfig, loadedCustomModels, preferences] = await Promise.all([
+          Promise.resolve(agent.getSupportedModels()),
+          Promise.resolve(agent.getSupportedProviders()),
+          Promise.resolve(agent.getCurrentLLMConfig()),
+          (0, import_agent_management.loadCustomModels)(),
+          (0, import_agent_management.loadGlobalPreferences)().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;
+        let ollamaModels = [];
+        let localModels = [];
+        try {
+          ollamaModels = await (0, import_core.listOllamaModels)(import_core.DEFAULT_OLLAMA_URL);
+        } catch (error) {
+          agent.logger.debug("Ollama not available for model listing");
+        }
+        try {
+          localModels = await (0, import_agent_management.getAllInstalledModels)();
+        } catch (error) {
+          agent.logger.debug("Local models not available for listing");
+        }
+        for (const custom of loadedCustomModels) {
+          const customProvider = custom.provider;
+          const modelOption = {
+            provider: customProvider,
+            name: custom.name,
+            displayName: custom.displayName || custom.name,
+            maxInputTokens: custom.maxInputTokens ?? 128e3,
+            isDefault: customProvider === defaultProvider && custom.name === defaultModel,
+            isCurrent: currentConfig.provider === customProvider && currentConfig.model === custom.name,
+            isCustom: true
+          };
+          if (custom.baseURL) {
+            modelOption.baseURL = custom.baseURL;
+          }
+          if (custom.reasoning?.variant) {
+            modelOption.reasoningVariant = custom.reasoning.variant;
+          }
+          modelList.push(modelOption);
+        }
+        for (const provider of providers) {
+          if (provider === "openai-compatible" || provider === "litellm" || provider === "glama" || provider === "bedrock")
+            continue;
+          if (provider === "ollama" || provider === "local" || provider === "vertex") {
+            continue;
+          }
+          if (provider === "dexto-nova" && !(0, import_agent_management.isDextoAuthEnabled)()) {
+            continue;
+          }
+          const providerModels = allModels[provider];
+          for (const model of providerModels) {
+            const originalProvider = "originalProvider" in model ? model.originalProvider : void 0;
+            modelList.push({
+              provider,
+              name: model.name,
+              displayName: model.displayName,
+              maxInputTokens: model.maxInputTokens,
+              isDefault: provider === defaultProvider && model.name === defaultModel,
+              isCurrent: provider === currentConfig.provider && model.name === currentConfig.model,
+              isCustom: false,
+              ...defaultReasoningVariant && provider === defaultProvider && model.name === defaultModel ? { reasoningVariant: defaultReasoningVariant } : {},
+              ...defaultBaseURL && provider === defaultProvider && model.name === defaultModel ? { baseURL: defaultBaseURL } : {},
+              // Store original provider for display purposes
+              ...originalProvider && { originalProvider }
+            });
+          }
+        }
+        for (const ollamaModel of ollamaModels) {
+          modelList.push({
+            provider: "ollama",
+            name: ollamaModel.name,
+            displayName: ollamaModel.name,
+            maxInputTokens: 128e3,
+            // Default, actual varies by model
+            isDefault: defaultProvider === "ollama" && defaultModel === ollamaModel.name,
+            isCurrent: currentConfig.provider === "ollama" && currentConfig.model === ollamaModel.name,
+            isCustom: false
+          });
+        }
+        for (const localModel of localModels) {
+          const modelInfo = (0, import_core.getLocalModelById)(localModel.id);
+          const displayName = modelInfo?.name || localModel.id;
+          const maxInputTokens = modelInfo?.contextLength || 128e3;
+          modelList.push({
+            provider: "local",
+            name: localModel.id,
+            displayName,
+            maxInputTokens,
+            isDefault: defaultProvider === "local" && defaultModel === localModel.id,
+            isCurrent: currentConfig.provider === "local" && currentConfig.model === localModel.id,
+            isCustom: false
+          });
+        }
+        const vertexModels = allModels["vertex"];
+        if (vertexModels) {
+          for (const model of vertexModels) {
+            modelList.push({
+              provider: "vertex",
+              name: model.name,
+              displayName: model.displayName,
+              maxInputTokens: model.maxInputTokens,
+              isDefault: defaultProvider === "vertex" && defaultModel === model.name,
+              isCurrent: currentConfig.provider === "vertex" && currentConfig.model === model.name,
+              isCustom: false,
+              ...defaultReasoningVariant && defaultProvider === "vertex" && defaultModel === model.name ? { reasoningVariant: defaultReasoningVariant } : {}
+            });
+          }
+        }
+        if (!cancelled) {
+          setModels(modelList);
+          setCustomModels(loadedCustomModels);
+          setIsLoading(false);
+          const currentIndex = modelList.findIndex((m) => m.isCurrent);
+          if (currentIndex >= 0) {
+            const nextIndex = currentIndex + 1;
+            const nextMaxVisibleItems = maxVisibleItemsRef.current;
+            const nextModelsViewportItems = Math.max(1, nextMaxVisibleItems - 1);
+            const maxOffset = Math.max(0, modelList.length - nextModelsViewportItems);
+            const nextOffset = Math.min(
+              maxOffset,
+              Math.max(0, currentIndex - nextModelsViewportItems + 1)
+            );
+            selectedIndexRef.current = nextIndex;
+            setSelection({ index: nextIndex, offset: nextOffset });
+          }
+        }
+      } catch (error) {
+        if (!cancelled) {
+          agent.logger.error(
+            `Failed to fetch models: ${error instanceof Error ? error.message : "Unknown error"}`
+          );
+          setModels([]);
+          setIsLoading(false);
+        }
+      }
+    };
+    void fetchModels();
+    return () => {
+      cancelled = true;
+    };
+  }, [isVisible, agent, refreshVersion]);
+  const filteredItems = (0, import_react.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 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]);
+  (0, import_react.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;
+        if (modelIndex < nextOffset) {
+          nextOffset = modelIndex;
+        } else if (modelIndex >= nextOffset + modelsViewportItems) {
+          nextOffset = Math.max(0, modelIndex - modelsViewportItems + 1);
+        }
+      }
+      const maxOffset = Math.max(0, nextModelsLength - modelsViewportItems);
+      nextOffset = Math.min(maxOffset, Math.max(0, nextOffset));
+      if (nextIndex === prev.index && nextOffset === prev.offset) {
+        return prev;
+      }
+      selectedIndexRef.current = nextIndex;
+      return { index: nextIndex, offset: nextOffset };
+    });
+  }, [filteredItems.length, modelsViewportItems]);
+  const handleDeleteCustomModel = (0, import_react.useCallback)(
+    async (model) => {
+      if (!model.isCustom) return;
+      try {
+        await (0, import_agent_management.deleteCustomModel)(model.name);
+        const updated = await (0, import_agent_management.loadCustomModels)();
+        setCustomModels(updated);
+        setModels((prev) => prev.filter((m) => !(m.isCustom && m.name === model.name)));
+      } catch (error) {
+        agent.logger.error(
+          `Failed to delete custom model: ${error instanceof Error ? error.message : "Unknown error"}`
+        );
+      }
+    },
+    [agent]
+  );
+  const clearActionState = () => {
+    setCustomModelAction(null);
+    setPendingDeleteConfirm(false);
+    if (deleteTimeoutRef.current) {
+      clearTimeout(deleteTimeoutRef.current);
+      deleteTimeoutRef.current = null;
+    }
+  };
+  const beginReasoningVariantSelection = (item, settingDefault) => {
+    const support = (0, import_core.getReasoningProfile)(item.provider, item.name);
+    if (!support.capable) {
+      return false;
+    }
+    const options = buildReasoningVariantOptions(support);
+    setPendingReasoningModel(item);
+    setIsSettingDefault(settingDefault);
+    setReasoningVariantIndex(
+      getInitialVariantIndex(item.reasoningVariant, options, support.defaultVariant)
+    );
+    return true;
+  };
+  (0, import_react.useImperativeHandle)(
+    ref,
+    () => ({
+      handleInput: (input, key) => {
+        if (!isVisible) return false;
+        if (isLoading) {
+          if (key.escape) {
+            onClose();
+          }
+          return true;
+        }
+        if (pendingReasoningModel) {
+          if (key.escape) {
+            setPendingReasoningModel(null);
+            setIsSettingDefault(false);
+            return true;
+          }
+          if (key.upArrow) {
+            if (reasoningVariantOptions.length === 0) return true;
+            setReasoningVariantIndex(
+              (prev) => prev > 0 ? prev - 1 : reasoningVariantOptions.length - 1
+            );
+            return true;
+          }
+          if (key.downArrow) {
+            if (reasoningVariantOptions.length === 0) return true;
+            setReasoningVariantIndex(
+              (prev) => prev < reasoningVariantOptions.length - 1 ? prev + 1 : 0
+            );
+            return true;
+          }
+          if (key.return) {
+            const selectedOption = reasoningVariantOptions[reasoningVariantIndex] ?? reasoningVariantOptions[0];
+            const reasoningVariant = selectedOption?.value;
+            if (!reasoningVariant) {
+              setPendingReasoningModel(null);
+              setIsSettingDefault(false);
+              return true;
+            }
+            if (isSettingDefault) {
+              clearActionState();
+              void (async () => {
+                await onSetDefaultModel(
+                  pendingReasoningModel.provider,
+                  pendingReasoningModel.name,
+                  pendingReasoningModel.displayName,
+                  pendingReasoningModel.baseURL,
+                  reasoningVariant
+                );
+                setRefreshVersion((prev) => prev + 1);
+                onClose();
+              })();
+            } else {
+              onSelectModel(
+                pendingReasoningModel.provider,
+                pendingReasoningModel.name,
+                pendingReasoningModel.displayName,
+                pendingReasoningModel.baseURL,
+                reasoningVariant
+              );
+            }
+            setPendingReasoningModel(null);
+            setIsSettingDefault(false);
+            return true;
+          }
+          return true;
+        }
+        if (key.escape) {
+          if (customModelAction) {
+            clearActionState();
+            return true;
+          }
+          onClose();
+          return true;
+        }
+        const itemsLength = filteredItems.length;
+        const currentItem = filteredItems[selectedIndexRef.current];
+        const isCustomActionItem = currentItem && !isAddCustomOption(currentItem) && currentItem.isCustom;
+        const isSelectableItem = currentItem && !isAddCustomOption(currentItem);
+        if (key.rightArrow) {
+          if (!isSelectableItem) return false;
+          if (customModelAction === null) {
+            if (isCustomActionItem) {
+              setCustomModelAction("edit");
+            } else {
+              setCustomModelAction("default");
+            }
+            return true;
+          }
+          if (customModelAction === "edit") {
+            setCustomModelAction("default");
+            return true;
+          }
+          if (customModelAction === "default") {
+            if (isCustomActionItem) {
+              setCustomModelAction("delete");
+              setPendingDeleteConfirm(false);
+              return true;
+            }
+            return true;
+          }
+          if (customModelAction === "delete") {
+            return true;
+          }
+        }
+        if (key.leftArrow) {
+          if (customModelAction === "delete") {
+            setCustomModelAction("default");
+            setPendingDeleteConfirm(false);
+            if (deleteTimeoutRef.current) {
+              clearTimeout(deleteTimeoutRef.current);
+              deleteTimeoutRef.current = null;
+            }
+            return true;
+          }
+          if (customModelAction === "default") {
+            if (isCustomActionItem) {
+              setCustomModelAction("edit");
+            } else {
+              setCustomModelAction(null);
+            }
+            return true;
+          }
+          if (customModelAction === "edit") {
+            setCustomModelAction(null);
+            return true;
+          }
+          return false;
+        }
+        if (input && !key.return && !key.upArrow && !key.downArrow && !key.tab) {
+          if (customModelAction) {
+            clearActionState();
+          }
+          if (key.backspace || key.delete) {
+            setSearchQuery((prev) => prev.slice(0, -1));
+            return true;
+          }
+          if (input.length === 1 && input.charCodeAt(0) >= 32) {
+            setSearchQuery((prev) => prev + input);
+            selectedIndexRef.current = 0;
+            setSelection({ index: 0, offset: 0 });
+            return true;
+          }
+        }
+        if (key.backspace || key.delete) {
+          setSearchQuery((prev) => prev.slice(0, -1));
+          return true;
+        }
+        if (itemsLength === 0) return false;
+        if (key.upArrow) {
+          if (customModelAction) {
+            clearActionState();
+          }
+          const nextIndex = (selectedIndexRef.current - 1 + itemsLength) % itemsLength;
+          selectedIndexRef.current = nextIndex;
+          setSelection((prev) => {
+            let nextOffset = prev.offset;
+            const nextModelsLength = Math.max(0, itemsLength - 1);
+            if (nextIndex > 0) {
+              const modelIndex = nextIndex - 1;
+              if (modelIndex < prev.offset) {
+                nextOffset = modelIndex;
+              } else if (modelIndex >= prev.offset + modelsViewportItems) {
+                nextOffset = Math.max(0, modelIndex - modelsViewportItems + 1);
+              }
+            }
+            const maxOffset = Math.max(0, nextModelsLength - modelsViewportItems);
+            nextOffset = Math.min(maxOffset, Math.max(0, nextOffset));
+            return { index: nextIndex, offset: nextOffset };
+          });
+          return true;
+        }
+        if (key.downArrow) {
+          if (customModelAction) {
+            clearActionState();
+          }
+          const nextIndex = (selectedIndexRef.current + 1) % itemsLength;
+          selectedIndexRef.current = nextIndex;
+          setSelection((prev) => {
+            let nextOffset = prev.offset;
+            const nextModelsLength = Math.max(0, itemsLength - 1);
+            if (nextIndex > 0) {
+              const modelIndex = nextIndex - 1;
+              if (modelIndex < prev.offset) {
+                nextOffset = modelIndex;
+              } else if (modelIndex >= prev.offset + modelsViewportItems) {
+                nextOffset = Math.max(0, modelIndex - modelsViewportItems + 1);
+              }
+            }
+            const maxOffset = Math.max(0, nextModelsLength - modelsViewportItems);
+            nextOffset = Math.min(maxOffset, Math.max(0, nextOffset));
+            return { index: nextIndex, offset: nextOffset };
+          });
+          return true;
+        }
+        if (key.return && itemsLength > 0) {
+          const item = filteredItems[selectedIndexRef.current];
+          if (item) {
+            if (isAddCustomOption(item)) {
+              onAddCustomModel();
+              return true;
+            }
+            if (customModelAction === "edit" && item.isCustom) {
+              const customModel = customModels.find(
+                (cm) => cm.name === item.name && (cm.provider ?? "openai-compatible") === item.provider
+              );
+              if (customModel) {
+                onEditCustomModel(customModel);
+              }
+              return true;
+            }
+            if (customModelAction === "default") {
+              if (beginReasoningVariantSelection(item, true)) {
+                return true;
+              }
+              clearActionState();
+              void (async () => {
+                await onSetDefaultModel(
+                  item.provider,
+                  item.name,
+                  item.displayName,
+                  item.baseURL,
+                  item.reasoningVariant
+                );
+                setRefreshVersion((prev) => prev + 1);
+                onClose();
+              })();
+              return true;
+            }
+            if (customModelAction === "delete" && item.isCustom) {
+              if (pendingDeleteConfirm) {
+                clearActionState();
+                void handleDeleteCustomModel(item);
+              } else {
+                setPendingDeleteConfirm(true);
+                if (deleteTimeoutRef.current) {
+                  clearTimeout(deleteTimeoutRef.current);
+                }
+                deleteTimeoutRef.current = setTimeout(() => {
+                  setPendingDeleteConfirm(false);
+                  deleteTimeoutRef.current = null;
+                }, 3e3);
+              }
+              return true;
+            }
+            if (beginReasoningVariantSelection(item, false)) {
+              return true;
+            }
+            onSelectModel(item.provider, item.name, item.displayName, item.baseURL);
+            return true;
+          }
+        }
+        return false;
+      }
+    }),
+    [
+      isVisible,
+      isLoading,
+      filteredItems,
+      maxVisibleItems,
+      modelsViewportItems,
+      onClose,
+      onSelectModel,
+      onSetDefaultModel,
+      onAddCustomModel,
+      onEditCustomModel,
+      customModelAction,
+      pendingDeleteConfirm,
+      customModels,
+      handleDeleteCustomModel,
+      pendingReasoningModel,
+      reasoningVariantIndex,
+      reasoningVariantOptions,
+      isSettingDefault,
+      beginReasoningVariantSelection
+    ]
+  );
+  if (!isVisible) return null;
+  if (pendingReasoningModel) {
+    const totalOptions = reasoningVariantOptions.length;
+    const reasoningVisibleItems = Math.min(maxVisibleItems, totalOptions);
+    const reasoningOffset = Math.min(
+      Math.max(0, reasoningVariantIndex - reasoningVisibleItems + 1),
+      Math.max(0, totalOptions - reasoningVisibleItems)
+    );
+    const visibleReasoningOptions = reasoningVariantOptions.slice(
+      reasoningOffset,
+      reasoningOffset + reasoningVisibleItems
+    );
+    const selectedReasoningOption = reasoningVariantOptions[reasoningVariantIndex] ?? reasoningVariantOptions[0];
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { flexDirection: "column", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: "cyan", bold: true, children: [
+        "Reasoning Variant",
+        isSettingDefault ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", children: " (default)" }) : null
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", wrap: "truncate-end", children: pendingReasoningModel.displayName || pendingReasoningModel.name }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { flexDirection: "column", height: maxVisibleItems, marginTop: 1, children: Array.from({ length: maxVisibleItems }, (_, rowIndex) => {
+        const option = visibleReasoningOptions[rowIndex];
+        if (!option) {
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { children: " " }) }, `reasoning-empty-${rowIndex}`);
+        }
+        const actualIndex = reasoningOffset + rowIndex;
+        const isSelected = actualIndex === reasoningVariantIndex;
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          import_ink.Text,
+          {
+            color: isSelected ? "cyan" : "gray",
+            bold: isSelected,
+            wrap: "truncate-end",
+            children: [
+              isSelected ? "\u203A" : " ",
+              " ",
+              option.label
+            ]
+          }
+        ) }, option.value);
+      }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { paddingX: 0, paddingY: 0, marginTop: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", wrap: "truncate-end", children: selectedReasoningOption?.description ?? "" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_HintBar.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 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 = (0, import_llm_provider_display.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__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { flexDirection: "column", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "cyan", bold: true, children: "Models" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { paddingX: 0, paddingY: 0, marginTop: 1, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", children: "Search: " }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: searchQuery ? "white" : "gray", wrap: "truncate-end", children: searchQuery || "Type to filter models\u2026" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { flexDirection: "column", marginTop: 1, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        import_ink.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"
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { flexDirection: "column", height: modelsViewportItems, children: isLoading || modelsOnly.length === 0 ? Array.from({ length: modelsViewportItems }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { children: " " }) }, `model-empty-${index}`)) : Array.from({ length: modelsViewportItems }, (_, rowIndex) => {
+        const item = visibleModels[rowIndex];
+        if (!item) {
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_ink.Box,
+            {
+              paddingX: 0,
+              paddingY: 0,
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { children: " " })
+            },
+            `model-empty-${rowIndex}`
+          );
+        }
+        const actualIndex = 1 + scrollOffset + rowIndex;
+        const isSelected = actualIndex === selectedIndex;
+        const providerDisplay = (0, import_llm_provider_display.getLLMProviderDisplayName)(item.provider);
+        const name = item.displayName || item.name;
+        const prefix = getRowPrefix({
+          isSelected,
+          isDefault: item.isDefault,
+          isCurrent: item.isCurrent,
+          isCustom: item.isCustom
+        });
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          import_ink.Box,
+          {
+            flexDirection: "row",
+            paddingX: 0,
+            paddingY: 0,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { flexGrow: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                import_ink.Text,
+                {
+                  color: isSelected ? "cyan" : "gray",
+                  bold: isSelected,
+                  wrap: "truncate-end",
+                  children: [
+                    prefix,
+                    " ",
+                    name,
+                    " (",
+                    providerDisplay,
+                    ")"
+                  ]
+                }
+              ) }),
+              isSelected && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { flexDirection: "row", marginLeft: 1, children: [
+                item.isCustom && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                    import_ink.Text,
+                    {
+                      color: customModelAction === "edit" ? "green" : "gray",
+                      bold: customModelAction === "edit",
+                      inverse: customModelAction === "edit",
+                      children: [
+                        " ",
+                        "Edit",
+                        " "
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { children: " " })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                  import_ink.Text,
+                  {
+                    color: customModelAction === "default" ? "cyan" : "gray",
+                    bold: customModelAction === "default",
+                    inverse: customModelAction === "default",
+                    children: [
+                      " ",
+                      "Set as Default",
+                      " "
+                    ]
+                  }
+                ),
+                item.isCustom && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { children: " " }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                    import_ink.Text,
+                    {
+                      color: customModelAction === "delete" ? "red" : "gray",
+                      bold: customModelAction === "delete",
+                      inverse: customModelAction === "delete",
+                      children: [
+                        " ",
+                        "Delete",
+                        " "
+                      ]
+                    }
+                  )
+                ] })
+              ] })
+            ]
+          },
+          `${item.provider}-${item.name}-${item.isCustom ? "custom" : "registry"}`
+        );
+      }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { paddingX: 0, paddingY: 0, marginTop: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", wrap: "truncate-end", children: detailLine }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_HintBar.HintBar,
+      {
+        hints: [
+          "\u2191\u2193 navigate",
+          "Enter select",
+          "Esc close",
+          hasActionableItems ? "\u2190\u2192 actions" : ""
+        ]
+      }
+    ) })
+  ] });
+});
+var ModelSelectorRefactored_default = ModelSelector;