feat: improve /connect command and /model selector UX (#665)

Co-authored-by: Letta <noreply@letta.com>

src/cli/components/InputRich.tsx

@@ -51,6 +51,7 @@ const InputFooter = memo(function InputFooter({
   agentName,
   currentModel,
   isOpenAICodexProvider,
+  isByokProvider,
   isAutocompleteActive,
 }: {
   ctrlCPressed: boolean;
@@ -62,6 +63,7 @@ const InputFooter = memo(function InputFooter({
   agentName: string | null | undefined;
   currentModel: string | null | undefined;
   isOpenAICodexProvider: boolean;
+  isByokProvider: boolean;
   isAutocompleteActive: boolean;
 }) {
   // Hide footer when autocomplete is showing
@@ -96,11 +98,12 @@ const InputFooter = memo(function InputFooter({
       )}
       <Text>
         <Text color={colors.footer.agentName}>{agentName || "Unnamed"}</Text>
-        <Text
-          dimColor={!isOpenAICodexProvider}
-          color={isOpenAICodexProvider ? "#74AA9C" : undefined}
-        >
-          {` [${currentModel ?? "unknown"}]`}
+        <Text dimColor>
+          {` [${currentModel ?? "unknown"}`}
+          {isByokProvider && (
+            <Text color={isOpenAICodexProvider ? "#74AA9C" : "yellow"}> ▲</Text>
+          )}
+          {"]"}
         </Text>
       </Text>
     </Box>
@@ -903,6 +906,10 @@ export function Input({
           isOpenAICodexProvider={
             currentModelProvider === OPENAI_CODEX_PROVIDER_NAME
           }
+          isByokProvider={
+            currentModelProvider?.startsWith("lc-") ||
+            currentModelProvider === OPENAI_CODEX_PROVIDER_NAME
+          }
           isAutocompleteActive={isAutocompleteActive}
         />
       </Box>

src/cli/components/ModelSelector.tsx

@@ -15,8 +15,18 @@ const SOLID_LINE = "─";
 
 const VISIBLE_ITEMS = 8;
 
-type ModelCategory = "supported" | "all";
-const MODEL_CATEGORIES: ModelCategory[] = ["supported", "all"];
+type ModelCategory = "supported" | "byok" | "byok-all" | "all";
+
+// BYOK provider prefixes (ChatGPT OAuth + lc-* providers from /connect)
+const BYOK_PROVIDER_PREFIXES = ["chatgpt-plus-pro/", "lc-"];
+
+// Get tab order based on billing tier (free = BYOK first, paid = BYOK last)
+function getModelCategories(billingTier?: string): ModelCategory[] {
+  const isFreeTier = billingTier?.toLowerCase() === "free";
+  return isFreeTier
+    ? ["byok", "byok-all", "supported", "all"]
+    : ["supported", "all", "byok", "byok-all"];
+}
 
 type UiModel = {
   id: string;
@@ -25,6 +35,7 @@ type UiModel = {
   description: string;
   isDefault?: boolean;
   isFeatured?: boolean;
+  free?: boolean;
   updateArgs?: Record<string, unknown>;
 };
 
@@ -36,6 +47,8 @@ interface ModelSelectorProps {
   filterProvider?: string;
   /** Force refresh the models list on mount */
   forceRefresh?: boolean;
+  /** User's billing tier - affects tab ordering (free = BYOK first) */
+  billingTier?: string;
 }
 
 export function ModelSelector({
@@ -44,11 +57,20 @@ export function ModelSelector({
   onCancel,
   filterProvider,
   forceRefresh: forceRefreshOnMount,
+  billingTier,
 }: ModelSelectorProps) {
   const terminalWidth = useTerminalWidth();
   const solidLine = SOLID_LINE.repeat(Math.max(terminalWidth, 10));
   const typedModels = models as UiModel[];
-  const [category, setCategory] = useState<ModelCategory>("supported");
+
+  // Tab order depends on billing tier (free = BYOK first)
+  const modelCategories = useMemo(
+    () => getModelCategories(billingTier),
+    [billingTier],
+  );
+  const defaultCategory = modelCategories[0] ?? "supported";
+
+  const [category, setCategory] = useState<ModelCategory>(defaultCategory);
   const [selectedIndex, setSelectedIndex] = useState(0);
 
   // undefined: not loaded yet (show spinner)
@@ -117,6 +139,8 @@ export function ModelSelector({
   // Supported models: models.json entries that are available
   // Featured models first, then non-featured, preserving JSON order within each group
   // If filterProvider is set, only show models from that provider
+  // For free tier, free models go first
+  const isFreeTier = billingTier?.toLowerCase() === "free";
   const supportedModels = useMemo(() => {
     if (availableHandles === undefined) return [];
     let available =
@@ -139,26 +163,156 @@ export function ModelSelector({
           m.handle.toLowerCase().includes(query),
       );
     }
+
+    // For free tier, put free models first, then others with standard ordering
+    if (isFreeTier) {
+      const freeModels = available.filter((m) => m.free);
+      const paidModels = available.filter((m) => !m.free);
+      const featured = paidModels.filter((m) => m.isFeatured);
+      const nonFeatured = paidModels.filter((m) => !m.isFeatured);
+      return [...freeModels, ...featured, ...nonFeatured];
+    }
+
     const featured = available.filter((m) => m.isFeatured);
     const nonFeatured = available.filter((m) => !m.isFeatured);
     return [...featured, ...nonFeatured];
-  }, [typedModels, availableHandles, filterProvider, searchQuery]);
+  }, [typedModels, availableHandles, filterProvider, searchQuery, isFreeTier]);
 
-  // All other models: API handles not in models.json
+  // BYOK models: models from chatgpt-plus-pro or lc-* providers
+  const isByokHandle = useCallback(
+    (handle: string) =>
+      BYOK_PROVIDER_PREFIXES.some((prefix) => handle.startsWith(prefix)),
+    [],
+  );
+
+  // All other models: API handles not in models.json and not BYOK
   const otherModelHandles = useMemo(() => {
     const filtered = allApiHandles.filter(
-      (handle) => !staticModelHandles.has(handle),
+      (handle) => !staticModelHandles.has(handle) && !isByokHandle(handle),
     );
     if (!searchQuery) return filtered;
     const query = searchQuery.toLowerCase();
     return filtered.filter((handle) => handle.toLowerCase().includes(query));
-  }, [allApiHandles, staticModelHandles, searchQuery]);
+  }, [allApiHandles, staticModelHandles, searchQuery, isByokHandle]);
+
+  // Provider name mappings for BYOK -> models.json lookup
+  // Maps BYOK provider prefix to models.json provider prefix
+  const BYOK_PROVIDER_ALIASES: Record<string, string> = {
+    "lc-anthropic": "anthropic",
+    "lc-openai": "openai",
+    "lc-zai": "zai",
+    "lc-gemini": "google_ai",
+    "chatgpt-plus-pro": "chatgpt-plus-pro", // No change needed
+  };
+
+  // Convert BYOK handle to base provider handle for models.json lookup
+  // e.g., "lc-anthropic/claude-3-5-haiku" -> "anthropic/claude-3-5-haiku"
+  // e.g., "lc-gemini/gemini-2.0-flash" -> "google_ai/gemini-2.0-flash"
+  const toBaseHandle = useCallback((handle: string): string => {
+    const slashIndex = handle.indexOf("/");
+    if (slashIndex === -1) return handle;
+
+    const provider = handle.slice(0, slashIndex);
+    const model = handle.slice(slashIndex + 1);
+    const baseProvider = BYOK_PROVIDER_ALIASES[provider];
+
+    if (baseProvider) {
+      return `${baseProvider}/${model}`;
+    }
+    return handle;
+  }, []);
+
+  // BYOK (recommended): BYOK API handles that have matching entries in models.json
+  const byokModels = useMemo(() => {
+    if (availableHandles === undefined) return [];
+
+    // Get all BYOK handles from API
+    const byokHandles = allApiHandles.filter(isByokHandle);
+
+    // Find models.json entries that match (using alias for lc-* providers)
+    const matched: UiModel[] = [];
+    for (const handle of byokHandles) {
+      const baseHandle = toBaseHandle(handle);
+      const staticModel = typedModels.find((m) => m.handle === baseHandle);
+      if (staticModel) {
+        // Use models.json data but with the BYOK handle as the ID
+        matched.push({
+          ...staticModel,
+          id: handle,
+          handle: handle,
+        });
+      }
+    }
+
+    // Apply search filter
+    if (searchQuery) {
+      const query = searchQuery.toLowerCase();
+      return matched.filter(
+        (m) =>
+          m.label.toLowerCase().includes(query) ||
+          m.description.toLowerCase().includes(query) ||
+          m.handle.toLowerCase().includes(query),
+      );
+    }
+
+    return matched;
+  }, [
+    availableHandles,
+    allApiHandles,
+    typedModels,
+    searchQuery,
+    isByokHandle,
+    toBaseHandle,
+  ]);
+
+  // BYOK (all): BYOK handles from API that don't have matching models.json entries
+  const byokAllModels = useMemo(() => {
+    if (availableHandles === undefined) return [];
+
+    // Get BYOK handles that don't have a match in models.json (using alias)
+    const byokHandles = allApiHandles.filter((handle) => {
+      if (!isByokHandle(handle)) return false;
+      const baseHandle = toBaseHandle(handle);
+      // Exclude if there's a matching entry in models.json
+      return !staticModelHandles.has(baseHandle);
+    });
+
+    // Apply search filter
+    let filtered = byokHandles;
+    if (searchQuery) {
+      const query = searchQuery.toLowerCase();
+      filtered = byokHandles.filter((handle) =>
+        handle.toLowerCase().includes(query),
+      );
+    }
+
+    return filtered;
+  }, [
+    availableHandles,
+    allApiHandles,
+    staticModelHandles,
+    searchQuery,
+    isByokHandle,
+    toBaseHandle,
+  ]);
 
   // Get the list for current category
   const currentList: UiModel[] = useMemo(() => {
     if (category === "supported") {
       return supportedModels;
     }
+    if (category === "byok") {
+      return byokModels;
+    }
+    if (category === "byok-all") {
+      // Convert raw handles to UiModel
+      return byokAllModels.map((handle) => ({
+        id: handle,
+        handle,
+        label: handle,
+        description: "",
+      }));
+    }
     // For "all" category, convert handles to simple UiModel objects
     return otherModelHandles.map((handle) => ({
       id: handle,
@@ -166,7 +320,7 @@ export function ModelSelector({
       label: handle,
       description: "",
     }));
-  }, [category, supportedModels, otherModelHandles]);
+  }, [category, supportedModels, byokModels, byokAllModels, otherModelHandles]);
 
   // Show 1 fewer item because Search line takes space
   const visibleCount = VISIBLE_ITEMS - 1;
@@ -191,14 +345,14 @@ export function ModelSelector({
   // Reset selection when category changes
   const cycleCategory = useCallback(() => {
     setCategory((current) => {
-      const idx = MODEL_CATEGORIES.indexOf(current);
-      return MODEL_CATEGORIES[
-        (idx + 1) % MODEL_CATEGORIES.length
+      const idx = modelCategories.indexOf(current);
+      return modelCategories[
+        (idx + 1) % modelCategories.length
       ] as ModelCategory;
     });
     setSelectedIndex(0);
     setSearchQuery("");
-  }, []);
+  }, [modelCategories]);
 
   // Set initial selection to current model on mount
   const initializedRef = useRef(false);
@@ -253,9 +407,9 @@ export function ModelSelector({
       if (key.leftArrow) {
         // Cycle backwards through categories
         setCategory((current) => {
-          const idx = MODEL_CATEGORIES.indexOf(current);
-          return MODEL_CATEGORIES[
-            idx === 0 ? MODEL_CATEGORIES.length - 1 : idx - 1
+          const idx = modelCategories.indexOf(current);
+          return modelCategories[
+            idx === 0 ? modelCategories.length - 1 : idx - 1
           ] as ModelCategory;
         });
         setSelectedIndex(0);
@@ -272,7 +426,23 @@ export function ModelSelector({
         return;
       }
 
-      // Disable other inputs while loading
+      // Capture text input for search (allow typing even with 0 results)
+      // Exclude special keys like Enter, arrows, etc.
+      if (
+        input &&
+        input.length === 1 &&
+        !key.ctrl &&
+        !key.meta &&
+        !key.return &&
+        !key.upArrow &&
+        !key.downArrow
+      ) {
+        setSearchQuery((prev) => prev + input);
+        setSelectedIndex(0);
+        return;
+      }
+
+      // Disable navigation/selection while loading or no results
       if (isLoading || refreshing || currentList.length === 0) {
         return;
       }
@@ -286,10 +456,6 @@ export function ModelSelector({
         if (selectedModel) {
           onSelect(selectedModel.id);
         }
-      } else if (input && input.length === 1) {
-        // Capture text input for search
-        setSearchQuery((prev) => prev + input);
-        setSelectedIndex(0);
       }
     },
     // Keep active so ESC and 'r' work while loading.
@@ -297,14 +463,34 @@ export function ModelSelector({
   );
 
   const getCategoryLabel = (cat: ModelCategory) => {
-    if (cat === "supported") return `Recommended (${supportedModels.length})`;
-    return `All Available (${otherModelHandles.length})`;
+    if (cat === "supported") return `Letta API [${supportedModels.length}]`;
+    if (cat === "byok") return `BYOK [${byokModels.length}]`;
+    if (cat === "byok-all") return `BYOK (all) [${byokAllModels.length}]`;
+    return `Letta API (all) [${otherModelHandles.length}]`;
+  };
+
+  const getCategoryDescription = (cat: ModelCategory) => {
+    if (cat === "supported") {
+      return isFreeTier
+        ? "Upgrade your account to access more models"
+        : "Recommended models on the Letta API";
+    }
+    if (cat === "byok")
+      return "Recommended models via your API keys (use /connect to add more)";
+    if (cat === "byok-all")
+      return "All models via your API keys (use /connect to add more)";
+    if (cat === "all") {
+      return isFreeTier
+        ? "Upgrade your account to access more models"
+        : "All models on the Letta API";
+    }
+    return "All models on the Letta API";
   };
 
   // Render tab bar (matches AgentSelector style)
   const renderTabBar = () => (
     <Box flexDirection="row" gap={2}>
-      {MODEL_CATEGORIES.map((cat) => {
+      {modelCategories.map((cat) => {
         const isActive = cat === category;
         return (
           <Text
@@ -338,7 +524,15 @@ export function ModelSelector({
         {!isLoading && !refreshing && (
           <Box flexDirection="column" paddingLeft={1}>
             {renderTabBar()}
-            <Text dimColor> Search: {searchQuery || "(type to filter)"}</Text>
+            <Text dimColor> {getCategoryDescription(category)}</Text>
+            <Text>
+              <Text dimColor> Search: </Text>
+              {searchQuery ? (
+                <Text>{searchQuery}</Text>
+              ) : (
+                <Text dimColor>(type to filter)</Text>
+              )}
+            </Text>
           </Box>
         )}
       </Box>
@@ -380,6 +574,11 @@ export function ModelSelector({
           const actualIndex = startIndex + index;
           const isSelected = actualIndex === selectedIndex;
           const isCurrent = model.id === currentModelId;
+          // Show lock for non-free models when on free tier (only for Letta API tabs)
+          const showLock =
+            isFreeTier &&
+            !model.free &&
+            (category === "supported" || category === "all");
 
           return (
             <Box key={model.id} flexDirection="row">
@@ -388,6 +587,7 @@ export function ModelSelector({
               >
                 {isSelected ? "> " : "  "}
               </Text>
+              {showLock && <Text dimColor>🔒 </Text>}
               <Text
                 bold={isSelected}
                 color={

src/cli/components/ProviderSelector.tsx

@@ -0,0 +1,456 @@
+import { Box, Text, useInput } from "ink";
+import { useCallback, useEffect, useRef, useState } from "react";
+import {
+  BYOK_PROVIDERS,
+  type ByokProvider,
+  checkProviderApiKey,
+  createOrUpdateProvider,
+  getConnectedProviders,
+  type ProviderResponse,
+  removeProviderByName,
+} from "../../providers/byok-providers";
+import { useTerminalWidth } from "../hooks/useTerminalWidth";
+import { colors } from "./colors";
+
+const SOLID_LINE = "─";
+
+type ViewState =
+  | { type: "list" }
+  | { type: "input"; provider: ByokProvider }
+  | { type: "options"; provider: ByokProvider; providerId: string };
+
+type ValidationState = "idle" | "validating" | "valid" | "invalid";
+
+interface ProviderSelectorProps {
+  onCancel: () => void;
+  /** Called when ChatGPT/Codex OAuth flow should start */
+  onStartOAuth?: () => void;
+}
+
+export function ProviderSelector({
+  onCancel,
+  onStartOAuth,
+}: ProviderSelectorProps) {
+  const terminalWidth = useTerminalWidth();
+  const solidLine = SOLID_LINE.repeat(Math.max(terminalWidth, 10));
+
+  // State
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [connectedProviders, setConnectedProviders] = useState<
+    Map<string, ProviderResponse>
+  >(new Map());
+  const [isLoading, setIsLoading] = useState(true);
+  const [viewState, setViewState] = useState<ViewState>({ type: "list" });
+  const [apiKeyInput, setApiKeyInput] = useState("");
+  const [validationState, setValidationState] =
+    useState<ValidationState>("idle");
+  const [validationError, setValidationError] = useState<string | null>(null);
+  const [optionIndex, setOptionIndex] = useState(0);
+
+  const mountedRef = useRef(true);
+  useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+
+  // Load connected providers on mount
+  useEffect(() => {
+    (async () => {
+      try {
+        const providers = await getConnectedProviders();
+        if (mountedRef.current) {
+          setConnectedProviders(providers);
+          setIsLoading(false);
+        }
+      } catch {
+        if (mountedRef.current) {
+          setIsLoading(false);
+        }
+      }
+    })();
+  }, []);
+
+  // Check if a provider is connected
+  const isConnected = useCallback(
+    (provider: ByokProvider) => {
+      return connectedProviders.has(provider.providerName);
+    },
+    [connectedProviders],
+  );
+
+  // Get provider ID if connected
+  const getProviderId = useCallback(
+    (provider: ByokProvider): string | undefined => {
+      return connectedProviders.get(provider.providerName)?.id;
+    },
+    [connectedProviders],
+  );
+
+  // Handle selecting a provider from the list
+  const handleSelectProvider = useCallback(
+    (provider: ByokProvider) => {
+      if ("isOAuth" in provider && provider.isOAuth) {
+        // OAuth provider - trigger OAuth flow
+        if (onStartOAuth) {
+          onStartOAuth();
+        }
+        return;
+      }
+
+      const connected = isConnected(provider);
+      if (connected) {
+        // Show options for connected provider
+        const providerId = getProviderId(provider);
+        if (providerId) {
+          setViewState({ type: "options", provider, providerId });
+          setOptionIndex(0);
+        }
+      } else {
+        // Show API key input for new provider
+        setViewState({ type: "input", provider });
+        setApiKeyInput("");
+        setValidationState("idle");
+        setValidationError(null);
+      }
+    },
+    [isConnected, getProviderId, onStartOAuth],
+  );
+
+  // Handle API key validation and saving
+  const handleValidateAndSave = useCallback(async () => {
+    if (viewState.type !== "input") return;
+    if (!apiKeyInput.trim()) return;
+
+    const { provider } = viewState;
+
+    // If already validated, save
+    if (validationState === "valid") {
+      try {
+        await createOrUpdateProvider(
+          provider.providerType,
+          provider.providerName,
+          apiKeyInput.trim(),
+        );
+        // Refresh connected providers
+        const providers = await getConnectedProviders();
+        if (mountedRef.current) {
+          setConnectedProviders(providers);
+          setViewState({ type: "list" });
+          setApiKeyInput("");
+          setValidationState("idle");
+        }
+      } catch (err) {
+        if (mountedRef.current) {
+          setValidationError(
+            err instanceof Error ? err.message : "Failed to save",
+          );
+          setValidationState("invalid");
+        }
+      }
+      return;
+    }
+
+    // Validate the key
+    setValidationState("validating");
+    setValidationError(null);
+
+    try {
+      await checkProviderApiKey(provider.providerType, apiKeyInput.trim());
+      if (mountedRef.current) {
+        setValidationState("valid");
+      }
+    } catch (err) {
+      if (mountedRef.current) {
+        setValidationState("invalid");
+        setValidationError(
+          err instanceof Error ? err.message : "Invalid API key",
+        );
+      }
+    }
+  }, [viewState, apiKeyInput, validationState]);
+
+  // Handle disconnect
+  const handleDisconnect = useCallback(async () => {
+    if (viewState.type !== "options") return;
+
+    const { provider } = viewState;
+    try {
+      await removeProviderByName(provider.providerName);
+      // Refresh connected providers
+      const providers = await getConnectedProviders();
+      if (mountedRef.current) {
+        setConnectedProviders(providers);
+        setViewState({ type: "list" });
+      }
+    } catch {
+      // Silently fail, stay on options view
+    }
+  }, [viewState]);
+
+  // Handle update key option
+  const handleUpdateKey = useCallback(() => {
+    if (viewState.type !== "options") return;
+    const { provider } = viewState;
+    setViewState({ type: "input", provider });
+    setApiKeyInput("");
+    setValidationState("idle");
+    setValidationError(null);
+  }, [viewState]);
+
+  useInput((input, key) => {
+    // CTRL-C: immediately cancel
+    if (key.ctrl && input === "c") {
+      onCancel();
+      return;
+    }
+
+    // Handle based on view state
+    if (viewState.type === "list") {
+      if (isLoading) return;
+
+      if (key.escape) {
+        onCancel();
+      } else if (key.upArrow) {
+        setSelectedIndex((prev) => Math.max(0, prev - 1));
+      } else if (key.downArrow) {
+        setSelectedIndex((prev) =>
+          Math.min(BYOK_PROVIDERS.length - 1, prev + 1),
+        );
+      } else if (key.return) {
+        const provider = BYOK_PROVIDERS[selectedIndex];
+        if (provider) {
+          handleSelectProvider(provider);
+        }
+      }
+    } else if (viewState.type === "input") {
+      if (key.escape) {
+        // Back to list
+        setViewState({ type: "list" });
+        setApiKeyInput("");
+        setValidationState("idle");
+        setValidationError(null);
+      } else if (key.return) {
+        handleValidateAndSave();
+      } else if (key.backspace || key.delete) {
+        setApiKeyInput((prev) => prev.slice(0, -1));
+        // Reset validation if key changed
+        if (validationState !== "idle") {
+          setValidationState("idle");
+          setValidationError(null);
+        }
+      } else if (input && !key.ctrl && !key.meta) {
+        setApiKeyInput((prev) => prev + input);
+        // Reset validation if key changed
+        if (validationState !== "idle") {
+          setValidationState("idle");
+          setValidationError(null);
+        }
+      }
+    } else if (viewState.type === "options") {
+      const options = ["Update API key", "Disconnect", "Back"];
+      if (key.escape) {
+        setViewState({ type: "list" });
+      } else if (key.upArrow) {
+        setOptionIndex((prev) => Math.max(0, prev - 1));
+      } else if (key.downArrow) {
+        setOptionIndex((prev) => Math.min(options.length - 1, prev + 1));
+      } else if (key.return) {
+        if (optionIndex === 0) {
+          handleUpdateKey();
+        } else if (optionIndex === 1) {
+          handleDisconnect();
+        } else {
+          setViewState({ type: "list" });
+        }
+      }
+    }
+  });
+
+  // Mask API key for display
+  const maskApiKey = (key: string): string => {
+    if (key.length <= 8) return "*".repeat(key.length);
+    return key.slice(0, 4) + "*".repeat(Math.min(key.length - 4, 20));
+  };
+
+  // Render list view
+  const renderListView = () => (
+    <>
+      <Box flexDirection="column" marginBottom={1}>
+        <Text bold color={colors.selector.title}>
+          Connect your LLM API keys
+        </Text>
+        <Text dimColor>Change models with /model after connecting</Text>
+      </Box>
+
+      {isLoading ? (
+        <Box>
+          <Text dimColor>{"  "}Loading providers...</Text>
+        </Box>
+      ) : (
+        <Box flexDirection="column">
+          {BYOK_PROVIDERS.map((provider, index) => {
+            const isSelected = index === selectedIndex;
+            const connected = isConnected(provider);
+
+            return (
+              <Box key={provider.id} flexDirection="row">
+                <Text
+                  color={
+                    isSelected ? colors.selector.itemHighlighted : undefined
+                  }
+                >
+                  {isSelected ? "> " : "  "}
+                </Text>
+                <Text color={connected ? "green" : undefined}>
+                  [{connected ? "✓" : " "}]
+                </Text>
+                <Text> </Text>
+                <Text
+                  bold={isSelected}
+                  color={
+                    isSelected ? colors.selector.itemHighlighted : undefined
+                  }
+                >
+                  {provider.displayName}
+                </Text>
+                <Text dimColor>
+                  {" · "}
+                  {connected ? (
+                    <Text color="green">Connected</Text>
+                  ) : (
+                    provider.description
+                  )}
+                </Text>
+              </Box>
+            );
+          })}
+        </Box>
+      )}
+
+      {!isLoading && (
+        <Box marginTop={1}>
+          <Text dimColor>{"  "}Enter select · ↑↓ navigate · Esc cancel</Text>
+        </Box>
+      )}
+    </>
+  );
+
+  // Render input view
+  const renderInputView = () => {
+    if (viewState.type !== "input") return null;
+    const { provider } = viewState;
+
+    const statusText =
+      validationState === "validating"
+        ? " (validating...)"
+        : validationState === "valid"
+          ? " (key validated!)"
+          : validationState === "invalid"
+            ? ` (invalid key${validationError ? `: ${validationError}` : ""})`
+            : "";
+
+    const statusColor =
+      validationState === "valid"
+        ? "green"
+        : validationState === "invalid"
+          ? "red"
+          : undefined;
+
+    const footerText =
+      validationState === "valid"
+        ? "Enter to save · Esc cancel"
+        : "Enter to validate · Esc cancel";
+
+    return (
+      <>
+        <Box flexDirection="column" marginBottom={1}>
+          <Text>
+            {"  "}Connect your {provider.displayName} key:
+          </Text>
+        </Box>
+
+        <Box flexDirection="row">
+          <Text color={colors.selector.itemHighlighted}>{"> "}</Text>
+          <Text>{apiKeyInput ? maskApiKey(apiKeyInput) : "(enter key)"}</Text>
+          <Text color={statusColor} dimColor={validationState === "validating"}>
+            {statusText}
+          </Text>
+        </Box>
+
+        <Box marginTop={1}>
+          <Text dimColor>
+            {"  "}
+            {footerText}
+          </Text>
+        </Box>
+      </>
+    );
+  };
+
+  // Render options view (for connected providers)
+  const renderOptionsView = () => {
+    if (viewState.type !== "options") return null;
+    const { provider } = viewState;
+    const options = ["Update API key", "Disconnect", "Back"];
+
+    return (
+      <>
+        <Box flexDirection="column" marginBottom={1}>
+          <Box flexDirection="row">
+            <Text>{"  "}</Text>
+            <Text color="green">[✓]</Text>
+            <Text> </Text>
+            <Text bold>{provider.displayName}</Text>
+            <Text dimColor> · </Text>
+            <Text color="green">Connected</Text>
+          </Box>
+        </Box>
+
+        <Box flexDirection="column">
+          {options.map((option, index) => {
+            const isSelected = index === optionIndex;
+            return (
+              <Box key={option} flexDirection="row">
+                <Text
+                  color={
+                    isSelected ? colors.selector.itemHighlighted : undefined
+                  }
+                >
+                  {isSelected ? "> " : "  "}
+                </Text>
+                <Text
+                  bold={isSelected}
+                  color={
+                    isSelected ? colors.selector.itemHighlighted : undefined
+                  }
+                >
+                  {option}
+                </Text>
+              </Box>
+            );
+          })}
+        </Box>
+
+        <Box marginTop={1}>
+          <Text dimColor>{"  "}Enter select · ↑↓ navigate · Esc back</Text>
+        </Box>
+      </>
+    );
+  };
+
+  return (
+    <Box flexDirection="column">
+      {/* Command header */}
+      <Text dimColor>{"> /connect"}</Text>
+      <Text dimColor>{solidLine}</Text>
+
+      <Box height={1} />
+
+      {viewState.type === "list" && renderListView()}
+      {viewState.type === "input" && renderInputView()}
+      {viewState.type === "options" && renderOptionsView()}
+    </Box>
+  );
+}