fix: detect and display env var API config fallback (closes #22, closes #4)

Providers API now detects ANTHROPIC_API_KEY, ANTHROPIC_AUTH_TOKEN, and
ANTHROPIC_BASE_URL from environment. ProviderManager shows a banner
when env vars are detected, informing users they're used automatically
when no provider is active.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/app/api/providers/route.ts

@@ -1,6 +1,6 @@
 import { NextRequest, NextResponse } from 'next/server';
 import { getAllProviders, createProvider } from '@/lib/db';
-import type { ProvidersResponse, ProviderResponse, ErrorResponse, CreateProviderRequest, ApiProvider } from '@/types';
+import type { ProviderResponse, ErrorResponse, CreateProviderRequest, ApiProvider } from '@/types';
 
 function maskApiKey(provider: ApiProvider): ApiProvider {
   let maskedKey = provider.api_key;
@@ -10,10 +10,35 @@ function maskApiKey(provider: ApiProvider): ApiProvider {
   return { ...provider, api_key: maskedKey };
 }
 
+/** Check which ANTHROPIC_* env vars are set in the server process environment */
+function detectEnvVars(): Record<string, string> {
+  const detected: Record<string, string> = {};
+  const envKeys = [
+    'ANTHROPIC_API_KEY',
+    'ANTHROPIC_AUTH_TOKEN',
+    'ANTHROPIC_BASE_URL',
+  ];
+  for (const key of envKeys) {
+    const val = process.env[key];
+    if (val) {
+      // Mask secrets, show base_url in full
+      if (key.includes('URL')) {
+        detected[key] = val;
+      } else if (val.length > 8) {
+        detected[key] = '***' + val.slice(-8);
+      } else {
+        detected[key] = '***';
+      }
+    }
+  }
+  return detected;
+}
+
 export async function GET() {
   try {
     const providers = getAllProviders().map(maskApiKey);
-    return NextResponse.json<ProvidersResponse>({ providers });
+    const envDetected = detectEnvVars();
+    return NextResponse.json({ providers, env_detected: envDetected });
   } catch (error) {
     return NextResponse.json<ErrorResponse>(
       { error: error instanceof Error ? error.message : 'Failed to get providers' },

src/components/settings/ProviderManager.tsx

@@ -45,6 +45,7 @@ export function ProviderManager() {
   const [providers, setProviders] = useState<ApiProvider[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const [envDetected, setEnvDetected] = useState<Record<string, string>>({});
 
   // Form dialog state
   const [formOpen, setFormOpen] = useState(false);
@@ -68,6 +69,7 @@ export function ProviderManager() {
       }
       const data = await res.json();
       setProviders(data.providers || []);
+      setEnvDetected(data.env_detected || {});
     } catch (err) {
       setError(err instanceof Error ? err.message : "Failed to load providers");
     } finally {
@@ -222,6 +224,27 @@ export function ProviderManager() {
         </div>
       )}
 
+      {/* Environment variable detection banner */}
+      {!loading && Object.keys(envDetected).length > 0 && (
+        <div className="rounded-md border border-green-500/30 bg-green-500/5 p-3">
+          <p className="text-xs font-medium text-green-700 dark:text-green-400 mb-1">
+            Environment variables detected
+          </p>
+          <div className="space-y-0.5">
+            {Object.entries(envDetected).map(([key, value]) => (
+              <p key={key} className="text-xs text-muted-foreground font-mono">
+                {key}={value}
+              </p>
+            ))}
+          </div>
+          {!providers.some(p => p.is_active === 1) && (
+            <p className="text-xs text-muted-foreground mt-1.5">
+              These will be used automatically when no provider is active.
+            </p>
+          )}
+        </div>
+      )}
+
       {/* Loading */}
       {loading && (
         <div className="flex items-center justify-center gap-2 py-8 text-muted-foreground">
@@ -237,7 +260,9 @@ export function ProviderManager() {
           <div className="text-center">
             <p className="text-sm font-medium">No providers configured</p>
             <p className="text-xs mt-0.5">
-              Add a provider to use a custom API endpoint with Claude Code.
+              {Object.keys(envDetected).length > 0
+                ? "Using environment variables. Add a provider below to override."
+                : "Add a provider to use a custom API endpoint with Claude Code."}
             </p>
           </div>
           {/* Quick preset buttons */}