fix(playground): surface provider model loading errors in LlmChatCard (#9626)

Refs: base-red #9737

src/app/(dashboard)/dashboard/media-providers/components/LlmChatCard.tsx

@@ -134,7 +134,7 @@ export function LlmChatCard({
 }: Props) {
   const t = useTranslations("miniPlayground");
   const { keys } = useApiKey();
-  const { models } = useProviderModels(providerId);
+  const { models, loading, error, retry } = useProviderModels(providerId);
 
   const [internalSelectedKey, setInternalSelectedKey] = useState<string>("");
   const [internalModel, setInternalModel] = useState<string>(initialModel ?? "");
@@ -392,15 +392,31 @@ export function LlmChatCard({
             <select
               value={model || firstModel}
               onChange={(e) => setModel(e.target.value)}
-              className="min-w-0 flex-1 rounded-md border border-border bg-bg-subtle text-xs px-2 py-1 text-text-main focus:outline-none focus:ring-1 focus:ring-primary"
+              disabled={loading}
+              className="min-w-0 flex-1 rounded-md border border-border bg-bg-subtle text-xs px-2 py-1 text-text-main focus:outline-none focus:ring-1 focus:ring-primary disabled:opacity-60"
             >
-              {modelOptions.length === 0 && <option value="">{initialModel || "—"}</option>}
+              {modelOptions.length === 0 && !loading && <option value="">{initialModel || "—"}</option>}
+              {loading && <option value="">{t("loading") ?? "Loading…"}</option>}
               {modelOptions.map((m) => (
                 <option key={m.id} value={m.id}>
                   {m.id}
                 </option>
               ))}
             </select>
+            {error && (
+              <span className="text-xs text-red-500 flex items-center gap-1" role="alert">
+                <span className="truncate max-w-[180px]" title={String(error)}>
+                  {String(error)}
+                </span>
+                <button
+                  type="button"
+                  onClick={retry}
+                  className="shrink-0 text-xs text-primary hover:text-primary-strong underline"
+                >
+                  {t("retry") ?? "Retry"}
+                </button>
+              </span>
+            )}
           </div>
           {/* Key select */}
           {keys.length > 0 && (

src/app/(dashboard)/dashboard/providers/hooks/useProviderModels.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, useCallback, useRef } from "react";
 
 export interface ProviderModel {
   id: string;
@@ -18,6 +18,8 @@ interface UseProviderModelsResult {
   models: ProviderModel[];
   loading: boolean;
   error: string | null;
+  /** Re-runs the model fetch for the current provider. Useful for a Retry action. */
+  retry: () => void;
 }
 
 /**
@@ -32,15 +34,14 @@ export function useProviderModels(providerId: string): UseProviderModelsResult {
   const [models, setModels] = useState<ProviderModel[]>([]);
   const [loading, setLoading] = useState<boolean>(true);
   const [error, setError] = useState<string | null>(null);
+  // Cancels any in-flight load (component unmount or a retry superseding the
+  // previous request) so a stale response never overwrites a newer one.
+  const cleanupRef = useRef<(() => void) | null>(null);
 
-  useEffect(() => {
-    if (!providerId) {
-      setLoading(false);
-      return;
-    }
-
+  const load = useCallback(() => {
+    cleanupRef.current?.();
     let cancelled = false;
-    const load = async () => {
+    const run = async () => {
       setLoading(true);
       setError(null);
       try {
@@ -109,11 +110,33 @@ export function useProviderModels(providerId: string): UseProviderModelsResult {
         if (!cancelled) setLoading(false);
       }
     };
-    void load();
-    return () => {
+    void run();
+    const cleanup = () => {
       cancelled = true;
     };
+    cleanupRef.current = cleanup;
+    return cleanup;
   }, [providerId]);
 
-  return { models, loading, error };
+  useEffect(() => {
+    if (!providerId) {
+      setLoading(false);
+      return;
+    }
+    return load();
+  }, [providerId, load]);
+
+  // Release the current in-flight cleanup on unmount so no state updates leak.
+  useEffect(() => {
+    return () => {
+      cleanupRef.current?.();
+    };
+  }, []);
+
+  const retry = useCallback(() => {
+    if (!providerId) return;
+    load();
+  }, [providerId, load]);
+
+  return { models, loading, error, retry };
 }