fix(ai-gateway): improve provider key test UX and error messages

- Increase test prompt max_tokens to 20 and use "Say ok" for reliable completions
- Extract human-readable error.message from upstream JSON responses
- Fix dialog overflow for long error messages with scroll and word-break

Author: dviejokfs

crates/temps-ai-gateway/src/handlers/providers.rs

@@ -343,7 +343,7 @@ async fn test_provider_key_inline(
         Err(e) => TestProviderKeyResponse {
             success: false,
             provider: request.provider,
-            error: Some(e.to_string()),
+            error: Some(friendly_error_message(&e)),
             latency_ms,
         },
     };
@@ -399,10 +399,31 @@ async fn test_provider_key_by_id(
         Err(e) => TestProviderKeyResponse {
             success: false,
             provider: provider_name,
-            error: Some(e.to_string()),
+            error: Some(friendly_error_message(&e)),
             latency_ms,
         },
     };
 
     Ok(Json(response))
 }
+
+/// Extract a human-friendly error message from an AiGatewayError.
+/// For upstream errors the raw body is often a JSON blob; we try to
+/// pull out just the `error.message` field for a cleaner UX.
+fn friendly_error_message(err: &AiGatewayError) -> String {
+    if let AiGatewayError::UpstreamError {
+        status, message, ..
+    } = err
+    {
+        if let Ok(parsed) = serde_json::from_str::<serde_json::Value>(message) {
+            if let Some(msg) = parsed
+                .get("error")
+                .and_then(|e| e.get("message"))
+                .and_then(|m| m.as_str())
+            {
+                return format!("{} — {}", status, msg);
+            }
+        }
+    }
+    err.to_string()
+}

crates/temps-ai-gateway/src/services/gateway_service.rs

@@ -170,7 +170,7 @@ impl GatewayService {
     }
 
     /// Send a minimal chat completion to verify a provider API key works.
-    /// Uses the cheapest model for the provider and `max_tokens: 1`.
+    /// Uses the cheapest model for the provider and a small `max_tokens`.
     pub async fn test_provider(
         &self,
         provider_id: &str,
@@ -200,14 +200,14 @@ impl GatewayService {
             model: test_model.to_string(),
             messages: vec![ChatMessage {
                 role: "user".to_string(),
-                content: Some(MessageContent::Text("Hi".to_string())),
+                content: Some(MessageContent::Text("Say ok".to_string())),
                 name: None,
                 tool_calls: None,
                 tool_call_id: None,
             }],
             stream: false,
             temperature: None,
-            max_tokens: Some(1),
+            max_tokens: Some(20),
             top_p: None,
             stop: None,
             n: None,

web/src/pages/AiGateway.tsx

@@ -2895,18 +2895,18 @@ console.log(response.choices[0].message.content);`,
           </div>
           {inlineTestResult && (
             <div
-              className={`flex items-center gap-2 rounded-md px-3 py-2 text-sm ${
+              className={`flex items-start gap-2 rounded-md px-3 py-2 text-sm max-h-24 overflow-y-auto ${
                 inlineTestResult.success
                   ? 'bg-green-500/10 text-green-500'
                   : 'bg-destructive/10 text-destructive'
               }`}
             >
               {inlineTestResult.success ? (
-                <CheckCircle2 className="h-4 w-4 shrink-0" />
+                <CheckCircle2 className="h-4 w-4 shrink-0 mt-0.5" />
               ) : (
-                <XCircle className="h-4 w-4 shrink-0" />
+                <XCircle className="h-4 w-4 shrink-0 mt-0.5" />
               )}
-              <span>
+              <span className="break-all">
                 {inlineTestResult.success
                   ? 'Key is valid'
                   : inlineTestResult.error || 'Key test failed'}