feat: Support adding mutliple OpenAi compatible providers

src/browser/components/ProjectPage/ProjectPage.tsx

@@ -14,6 +14,7 @@ import { GitInitBanner } from "../GitInitBanner/GitInitBanner";
 import { ConfiguredProvidersBar } from "../ConfiguredProvidersBar/ConfiguredProvidersBar";
 import { ConfigureProvidersPrompt } from "../ConfigureProvidersPrompt/ConfigureProvidersPrompt";
 import { useProvidersConfig } from "@/browser/hooks/useProvidersConfig";
+import { useOpenAICompatibleProviders } from "@/browser/hooks/useOpenAICompatibleProviders";
 import type { ProvidersConfigMap } from "@/common/orpc/types";
 import { AgentsInitBanner } from "../AgentsInitBanner/AgentsInitBanner";
 import {
@@ -60,7 +61,12 @@ function archivedListsEqual(
 }
 
 /** Check if any provider is configured (uses backend-computed isConfigured) */
-function hasConfiguredProvider(config: ProvidersConfigMap | null): boolean {
+function hasConfiguredProvider(
+  config: ProvidersConfigMap | null,
+  openaiCompatibleConfig: { isConfigured: boolean } | null
+): boolean {
+  if (!config && !openaiCompatibleConfig) return false;
+  if (openaiCompatibleConfig?.isConfigured) return true;
   if (!config) return false;
   return Object.values(config).some((provider) => provider?.isConfigured);
 }
@@ -91,7 +97,8 @@ export const ProjectPage: React.FC<ProjectPageProps> = ({
     { listener: true }
   );
   const { config: providersConfig, loading: providersLoading } = useProvidersConfig();
-  const hasProviders = hasConfiguredProvider(providersConfig);
+  const { config: openaiCompatibleConfig } = useOpenAICompatibleProviders();
+  const hasProviders = hasConfiguredProvider(providersConfig, openaiCompatibleConfig);
   const shouldShowAgentsInitBanner = !providersLoading && hasProviders && showAgentsInitNudge;
 
   // Git repository state for the banner

src/browser/features/ChatInput/index.tsx

@@ -1400,10 +1400,12 @@ const ChatInputInner: React.FC<ChatInputProps> = (props) => {
       try {
         const config = await api.providers.getConfig();
         if (!signal.aborted) {
-          setOpenAIKeySet(config?.openai?.apiKeySet ?? false);
-          setOpenAIProviderEnabled(config?.openai?.isEnabled ?? true);
-          setMuxGatewayCouponSet(config?.["mux-gateway"]?.couponCodeSet ?? false);
-          setMuxGatewayEnabled(config?.["mux-gateway"]?.isEnabled ?? true);
+          const openaiConfig = config?.openai;
+          const muxGatewayConfig = config?.["mux-gateway"];
+          setOpenAIKeySet(openaiConfig?.apiKeySet ?? false);
+          setOpenAIProviderEnabled(openaiConfig?.isEnabled ?? true);
+          setMuxGatewayCouponSet(muxGatewayConfig?.couponCodeSet ?? false);
+          setMuxGatewayEnabled(muxGatewayConfig?.isEnabled ?? true);
         }
       } catch {
         // Ignore errors fetching config

src/browser/features/Settings/Sections/ModelRow.tsx

@@ -15,6 +15,10 @@ import { formatModelDisplayName } from "@/common/utils/ai/modelDisplay";
 import { cn } from "@/common/lib/utils";
 import type { AvailableRoute } from "@/common/routing";
 import { getModelStats, type ModelStats } from "@/common/utils/tokens/modelStats";
+import {
+  isOpenAICompatibleProvider,
+  formatOpenAICompatibleDisplayName,
+} from "@/common/utils/providers/openaiCompatible";
 
 /** Format tokens as human-readable string (e.g. 200000 -> "200k") */
 function formatTokenCount(tokens: number): string {
@@ -329,6 +333,11 @@ export function ModelRow(props: ModelRowProps) {
           <span className="text-foreground min-w-0 truncate font-mono text-xs">
             {props.modelId}
           </span>
+          {isOpenAICompatibleProvider(props.provider) && (
+            <span className="text-muted shrink-0 rounded bg-background-secondary px-1.5 py-0.5 text-[10px]">
+              {formatOpenAICompatibleDisplayName(props.provider)}
+            </span>
+          )}
           {mappedModelDisplayName && (
             <span className="text-muted ml-1 flex shrink-0 items-center gap-1 text-[10px]">
               →

src/browser/features/Settings/Sections/ModelsSection.tsx

@@ -143,7 +143,8 @@ export function ModelsSection() {
 
   // Read OAuth state from this component's provider config source to avoid
   // cross-hook timing mismatches while settings are loading/refetching.
-  const codexOauthConfigured = config?.openai?.codexOauthSet === true;
+  const openaiConfig = config?.openai;
+  const codexOauthConfigured = openaiConfig?.codexOauthSet === true;
 
   // "Treat as" dropdown should only list known models — custom models don't have
   // the metadata (pricing, context window, tokenizer) that mapping inherits.
@@ -156,8 +157,9 @@ export function ModelsSection() {
   const modelExists = useCallback(
     (provider: string, modelId: string, excludeOriginal?: string): boolean => {
       if (!config) return false;
-      const currentModels = config[provider]?.models ?? [];
-      return currentModels.some((entry) => {
+      const providerConfig = config[provider];
+      const currentModels = providerConfig?.models ?? [];
+      return currentModels.some((entry: ProviderModelEntry) => {
         const currentModelId = getProviderModelEntryId(entry);
         return currentModelId === modelId && currentModelId !== excludeOriginal;
       });
@@ -309,10 +311,11 @@ export function ModelsSection() {
 
       return nextModels;
     });
-    setEditing(null);
 
     // Save in background
     void api.providers.setModels({ provider: editing.provider, models: updatedModels });
+
+    setEditing(null);
   }, [api, editing, config, modelExists, updateModelsOptimistically]);
 
   // Show loading state while config is being fetched
@@ -326,13 +329,7 @@ export function ModelsSection() {
   }
 
   // Get all custom models across providers (excluding hidden providers like mux-gateway)
-  const getCustomModels = (): Array<{
-    provider: string;
-    modelId: string;
-    fullId: string;
-    contextWindowTokens: number | null;
-    mappedToModel: string | null;
-  }> => {
+  const getCustomModels = () => {
     const models: Array<{
       provider: string;
       modelId: string;
@@ -344,7 +341,7 @@ export function ModelsSection() {
     for (const [provider, providerConfig] of Object.entries(config)) {
       // Skip hidden providers (mux-gateway models are routed, not managed as a standalone list)
       if (HIDDEN_PROVIDERS.has(provider)) continue;
-      if (!providerConfig.models) continue;
+      if (!providerConfig?.models) continue;
 
       for (const modelEntry of providerConfig.models) {
         const modelId = getProviderModelEntryId(modelEntry);