stagent 0.1.10 → 0.1.12

package/src/components/settings/api-key-form.tsx

@@ -1,15 +1,17 @@
 "use client";
 
 import { useState } from "react";
+import { Eye, EyeOff, Loader2 } from "lucide-react";
+
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { Loader2, Eye, EyeOff, CheckCircle2, XCircle } from "lucide-react";
+import { ConnectionTestControl, type ConnectionTestResult } from "./connection-test-control";
 
 interface ApiKeyFormProps {
   hasKey: boolean;
   onSave: (key: string) => Promise<void>;
-  onTest: () => Promise<{ connected: boolean; apiKeySource?: string; error?: string }>;
+  onTest: () => Promise<ConnectionTestResult & { apiKeySource?: string }>;
   keyPrefix?: string;
   placeholder?: string;
   maskedPrefix?: string;
@@ -31,16 +33,10 @@ export function ApiKeyForm({
   const [showInput, setShowInput] = useState(!hasKey);
   const [showKey, setShowKey] = useState(false);
   const [saving, setSaving] = useState(false);
-  const [testing, setTesting] = useState(false);
-  const [testResult, setTestResult] = useState<{
-    connected: boolean;
-    error?: string;
-  } | null>(null);
 
   async function handleSave() {
     if (!key.startsWith(keyPrefix)) return;
     setSaving(true);
-    setTestResult(null);
     try {
       await onSave(key);
       setKey("");
@@ -50,17 +46,6 @@ export function ApiKeyForm({
     }
   }
 
-  async function handleTest() {
-    setTesting(true);
-    setTestResult(null);
-    try {
-      const result = await onTest();
-      setTestResult(result);
-    } finally {
-      setTesting(false);
-    }
-  }
-
   return (
     <div className="space-y-4">
       <Label className="text-sm font-medium">API Key</Label>
@@ -108,30 +93,7 @@ export function ApiKeyForm({
         </div>
       )}
 
-      <div className="flex items-center gap-3">
-        <Button variant="outline" size="sm" onClick={handleTest} disabled={testing}>
-          {testing && <Loader2 className="mr-1 h-3 w-3 animate-spin" />}
-          {testButtonLabel}
-        </Button>
-
-        {testResult && (
-          <span className="flex items-center gap-1.5 text-sm">
-            {testResult.connected ? (
-              <>
-                <CheckCircle2 className="h-4 w-4 text-success" />
-                <span className="text-success">Connected</span>
-              </>
-            ) : (
-              <>
-                <XCircle className="h-4 w-4 text-status-failed" />
-                <span className="text-status-failed">
-                  {testResult.error || "Connection failed"}
-                </span>
-              </>
-            )}
-          </span>
-        )}
-      </div>
+      <ConnectionTestControl onTest={onTest} buttonLabel={testButtonLabel} />
 
       <p className="text-xs text-muted-foreground">
         Environment fallback: `{envVarName}`.

package/src/components/settings/auth-config-section.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState, useEffect, useCallback } from "react";
+
 import {
   Card,
   CardContent,
@@ -12,6 +13,7 @@ import { Separator } from "@/components/ui/separator";
 import { AuthMethodSelector } from "./auth-method-selector";
 import { ApiKeyForm } from "./api-key-form";
 import { AuthStatusBadge } from "./auth-status-badge";
+import { ConnectionTestControl } from "./connection-test-control";
 import type { AuthMethod, ApiKeySource } from "@/lib/constants/settings";
 import {
   DEFAULT_AGENT_RUNTIME,
@@ -32,6 +34,7 @@ export function AuthConfigSection() {
     apiKeySource: "unknown",
   });
   const [connected, setConnected] = useState(false);
+  const [testControlKey, setTestControlKey] = useState(0);
 
   const fetchSettings = useCallback(async () => {
     const res = await fetch("/api/settings");
@@ -55,6 +58,8 @@ export function AuthConfigSection() {
     if (res.ok) {
       const data = await res.json();
       setSettings(data);
+      setConnected(data.hasKey || data.apiKeySource === "oauth");
+      setTestControlKey((current) => current + 1);
     }
   }
 
@@ -102,6 +107,7 @@ export function AuthConfigSection() {
           <>
             <Separator />
             <ApiKeyForm
+              key={`api-key-form-${testControlKey}`}
               hasKey={settings.hasKey}
               onSave={handleSaveKey}
               onTest={handleTestConnection}
@@ -126,12 +132,10 @@ export function AuthConfigSection() {
                 OAuth mode uses the Claude Agent SDK&apos;s built-in authentication flow.
                 Requires an active Claude Max or Pro subscription.
               </p>
-              <button
-                onClick={handleTestConnection}
-                className="text-sm text-primary hover:underline cursor-pointer"
-              >
-                Test OAuth connection
-              </button>
+              <ConnectionTestControl
+                key={`oauth-test-${testControlKey}`}
+                onTest={handleTestConnection}
+              />
             </div>
           </>
         )}

package/src/components/settings/auth-status-badge.tsx

@@ -32,6 +32,14 @@ export function AuthStatusBadge({ connected, apiKeySource }: AuthStatusBadgeProp
     );
   }
 
+  if (apiKeySource === "unknown") {
+    return (
+      <Badge variant="outline" className="border-success/50 text-success">
+        Connected
+      </Badge>
+    );
+  }
+
   return (
     <Badge variant="outline" className="border-success/50 text-success">
       Connected via {sourceLabels[apiKeySource]}