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

changelog.d/fixes/9626-playground-errors.md

@@ -0,0 +1 @@
+- fix(playground): surface provider model loading errors and offer retry (#9626)

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 };
 }

tests/unit/repro-9626.test.ts

@@ -0,0 +1,62 @@
+import test from "node:test";
+import assert from "node:assert/strict";
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
+
+const root = join(import.meta.dirname, "../..");
+const llmChatCardPath =
+  "src/app/(dashboard)/dashboard/media-providers/components/LlmChatCard.tsx";
+const src = readFileSync(join(root, llmChatCardPath), "utf8");
+
+const DISABLED_ON_LOADING = /disabled\s*=\s*\{\s*loading\s*\}/;
+const MODELS_LOADING_MARKER = /modelsLoading|Loading…|Loading\.\.\./;
+const ERROR_BRANCH = /error\s*&&/;
+const RETRY_ACTION = /onClick\s*=\s*\{[^}]*retry|retry[A-Za-z]*\s*\(\)|const\s+\[reload/i;
+const NO_MODELS_AFTER_EMPTY = /modelOptions\.length\s*===?\s*0|models\.length\s*===?\s*0/;
+
+test("LlmChatCard destructures loading and error from useProviderModels (#9626)", () => {
+  const match = src.match(/const\s*\{\s*([^}]+)\s*\}\s*=\s*useProviderModels\(/);
+  assert.ok(match, "Expected to find a destructuring of useProviderModels");
+
+  const destructured = match[1];
+  assert.ok(
+    destructured.includes("loading"),
+    "loading state must be destructured from useProviderModels"
+  );
+  assert.ok(destructured.includes("error"), "error state must be destructured from useProviderModels");
+});
+
+test("LlmChatCard disables the model selector while models are loading (#9626)", () => {
+  assert.ok(
+    DISABLED_ON_LOADING.test(src),
+    "The model <select> must be disabled while the models request is pending"
+  );
+});
+
+test("LlmChatCard shows a visible loading label while models are pending (#9626)", () => {
+  assert.ok(
+    MODELS_LOADING_MARKER.test(src),
+    "A visible loading text (e.g. 'Loading…') must appear while the models request is pending"
+  );
+});
+
+test("LlmChatCard surfaces the provider model error in the UI (#9626)", () => {
+  assert.ok(
+    ERROR_BRANCH.test(src),
+    "An error branch that renders the captured error message must exist"
+  );
+});
+
+test("LlmChatCard offers a retry action when the model request fails (#9626)", () => {
+  assert.ok(
+    RETRY_ACTION.test(src),
+    "A retry action must be offered next to the model error"
+  );
+});
+
+test("LlmChatCard keeps the empty-state message distinct from an error (#9626)", () => {
+  assert.ok(
+    NO_MODELS_AFTER_EMPTY.test(src),
+    "The empty-state (no models) message must only be shown for a successful empty response"
+  );
+});