Add provider connection status tracking and API key setup flow

Author: chriswritescode-dev

frontend/src/api/providers.ts

@@ -98,6 +98,7 @@ export interface Provider {
   models: Record<string, Model>;
   options?: Record<string, unknown>;
   source?: ProviderSource;
+  isConnected?: boolean;
 }
 
 export interface ProviderWithModels {
@@ -108,6 +109,7 @@ export interface ProviderWithModels {
   npm?: string;
   models: Model[];
   source: ProviderSource;
+  isConnected: boolean;
 }
 
 interface ConfigProvider {
@@ -139,23 +141,21 @@ function classifyProviderSource(providerId: string, isFromConfig: boolean): Prov
   return "configured";
 }
 
-function getProviderPriority(source: ProviderSource): number {
-  switch (source) {
-    case "configured": return 1;
-    case "local": return 2;
-    case "builtin": return 3;
-    default: return 4;
-  }
-}
-
 
+interface OpenCodeProviderResponse {
+  all: OpenCodeProvider[];
+  connected: string[];
+  default: Record<string, string>;
+}
 
-async function getProvidersFromOpenCodeServer(): Promise<Provider[]> {
+async function getProvidersFromOpenCodeServer(): Promise<{ providers: Provider[]; connected: string[] }> {
   try {
-    const response = await axios.get(`${API_BASE_URL}/api/opencode/provider`);
+    const response = await axios.get<OpenCodeProviderResponse>(`${API_BASE_URL}/api/opencode/provider`);
 
     if (response?.data?.all && Array.isArray(response.data.all)) {
-      return response.data.all.map((openCodeProvider: OpenCodeProvider) => {
+      const connectedSet = new Set(response.data.connected || []);
+      
+      const providers = response.data.all.map((openCodeProvider: OpenCodeProvider) => {
         const models: Record<string, Model> = {};
 
         Object.entries(openCodeProvider.models).forEach(([modelId, openCodeModel]) => {
@@ -196,21 +196,24 @@ async function getProvidersFromOpenCodeServer(): Promise<Provider[]> {
           env: openCodeProvider.env,
           models,
           options: openCodeProvider.options,
+          isConnected: connectedSet.has(openCodeProvider.id),
         };
       });
+
+      return { providers, connected: response.data.connected || [] };
     }
   } catch (error) {
     console.warn("Failed to load providers from OpenCode server", error);
   }
 
-  return [];
+  return { providers: [], connected: [] };
 }
 
-export async function getProviders(): Promise<Provider[]> {
+export async function getProviders(): Promise<{ providers: Provider[]; connected: string[] }> {
   return await getProvidersFromOpenCodeServer();
 }
 
-async function getConfiguredProviders(): Promise<ProviderWithModels[]> {
+async function getConfiguredProviders(connectedIds: Set<string>): Promise<ProviderWithModels[]> {
   try {
     const config = await settingsApi.getDefaultOpenCodeConfig();
     if (!config?.content?.provider) return [];
@@ -247,6 +250,7 @@ async function getConfiguredProviders(): Promise<ProviderWithModels[]> {
         npm: providerConfig.npm,
         models,
         source,
+        isConnected: connectedIds.has(providerId),
       });
     }
 
@@ -258,11 +262,10 @@ async function getConfiguredProviders(): Promise<ProviderWithModels[]> {
 }
 
 export async function getProvidersWithModels(): Promise<ProviderWithModels[]> {
-  const [builtinProviders, configuredProviders] = await Promise.all([
-    getProviders(),
-    getConfiguredProviders(),
-  ]);
-
+  const { providers: builtinProviders, connected } = await getProviders();
+  const connectedIds = new Set(connected);
+  
+  const configuredProviders = await getConfiguredProviders(connectedIds);
   const configuredIds = new Set(configuredProviders.map((p) => p.id));
 
   const builtinResult: ProviderWithModels[] = builtinProviders
@@ -281,15 +284,16 @@ export async function getProvidersWithModels(): Promise<ProviderWithModels[]> {
         npm: provider.npm,
         models,
         source: "builtin" as ProviderSource,
+        isConnected: provider.isConnected ?? false,
       };
     });
 
   const allProviders = [...configuredProviders, ...builtinResult];
 
   allProviders.sort((a, b) => {
-    const priorityA = getProviderPriority(a.source);
-    const priorityB = getProviderPriority(b.source);
-    if (priorityA !== priorityB) return priorityA - priorityB;
+    if (a.isConnected !== b.isConnected) {
+      return a.isConnected ? -1 : 1;
+    }
     return a.name.localeCompare(b.name);
   });
 

frontend/src/components/model/ApiKeyDialog.tsx

@@ -0,0 +1,131 @@
+import { useState, useCallback } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Loader2, Key, ExternalLink } from "lucide-react";
+import { providerCredentialsApi } from "@/api/providers";
+import type { ProviderWithModels } from "@/api/providers";
+
+interface ApiKeyDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  provider: ProviderWithModels | null;
+  onSuccess: () => void;
+}
+
+export function ApiKeyDialog({
+  open,
+  onOpenChange,
+  provider,
+  onSuccess,
+}: ApiKeyDialogProps) {
+  const [apiKey, setApiKey] = useState("");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleSubmit = useCallback(async () => {
+    if (!provider || !apiKey.trim()) return;
+
+    setIsSubmitting(true);
+    setError(null);
+
+    try {
+      await providerCredentialsApi.set(provider.id, apiKey.trim());
+      setApiKey("");
+      onSuccess();
+    } catch (err) {
+      setError("Failed to save API key. Please try again.");
+      console.error("Failed to set API key:", err);
+    } finally {
+      setIsSubmitting(false);
+    }
+  }, [provider, apiKey, onSuccess]);
+
+  const handleClose = useCallback(() => {
+    setApiKey("");
+    setError(null);
+    onOpenChange(false);
+  }, [onOpenChange]);
+
+  if (!provider) return null;
+
+  const envVarName = provider.env?.[0] || `${provider.id.toUpperCase()}_API_KEY`;
+
+  return (
+    <Dialog open={open} onOpenChange={handleClose}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Key className="h-5 w-5" />
+            Connect {provider.name}
+          </DialogTitle>
+          <DialogDescription>
+            Enter your API key to use models from {provider.name}.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4 py-4">
+          <div className="space-y-2">
+            <Label htmlFor="api-key">API Key</Label>
+            <Input
+              id="api-key"
+              type="password"
+              placeholder={`Enter your ${envVarName}`}
+              value={apiKey}
+              onChange={(e) => setApiKey(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" && apiKey.trim()) {
+                  handleSubmit();
+                }
+              }}
+              autoFocus
+            />
+            <p className="text-xs text-muted-foreground">
+              Environment variable: <code className="bg-muted px-1 py-0.5 rounded">{envVarName}</code>
+            </p>
+          </div>
+
+          {error && (
+            <p className="text-sm text-destructive">{error}</p>
+          )}
+
+          {provider.api && (
+            <a
+              href={provider.api}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground transition-colors"
+            >
+              <ExternalLink className="h-3 w-3" />
+              Get an API key
+            </a>
+          )}
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={handleClose} disabled={isSubmitting}>
+            Cancel
+          </Button>
+          <Button onClick={handleSubmit} disabled={!apiKey.trim() || isSubmitting}>
+            {isSubmitting ? (
+              <>
+                <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                Connecting...
+              </>
+            ) : (
+              "Connect"
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}