fix(providers): render static connection checks neutrally

Author: luvs01

gui/src/components/provider-workspace/ProviderDetails.tsx

@@ -96,6 +96,14 @@ export default function ProviderDetails({
   const free = useMemo(() => isFreeProvider(item), [item]);
   const local = useMemo(() => isLocalProvider(item), [item]);
   const authSurface = useMemo(() => providerAuthSurface(item), [item]);
+  const connectionIdentity = JSON.stringify([
+    codexController?.activeId ?? "",
+    accounts?.find(account => account.active)?.id ?? "",
+    keys?.find(entry => entry.active)?.id ?? "",
+    oauth?.loggedIn === undefined ? "" : String(oauth.loggedIn),
+    oauth?.needsReauth === undefined ? "" : String(oauth.needsReauth),
+    oauthEmail ?? "",
+  ]);
   const tabs = useMemo<{ id: Tab; label: string }[]>(() => [
     { id: "overview", label: t("pws.tab.overview") },
     { id: "models", label: t("pws.tab.models") },
@@ -223,6 +231,8 @@ export default function ProviderDetails({
               />
             ) : undefined}
             item={item}
+            apiBase={apiBase}
+            connectionIdentity={connectionIdentity}
             usageTotals={usageTotals}
             quotaReport={quotaReport}
             oauthEmail={oauthEmail}

gui/src/components/provider-workspace/ProviderOverview.tsx

@@ -3,6 +3,7 @@
  * (STATS + Notes). Phase 030 of workspace design parity.
  */
 import { useCallback, useEffect, useRef, useState, type ReactNode } from "react";
+import { readJsonOrThrow } from "../../fetch-json";
 import { useT, useI18n } from "../../i18n/shared";
 import { IconAlert, IconCheck } from "../../icons";
 import { binProviderStatus, type WorkspaceItem } from "../../provider-workspace/catalog";
@@ -12,8 +13,24 @@ import type { ProviderUsageTotals } from "./types";
 import { authModeLabel } from "./ProviderRail";
 import type { ProviderUpdatePatch } from "./types";
 
+type ConnectionTestResult = {
+  applicable?: boolean;
+  ok?: boolean;
+  latencyMs?: number;
+  reason?: string;
+  message?: string;
+  error?: string;
+};
+
+type ConnectionTestState = {
+  key: string;
+  testing: boolean;
+  result: ConnectionTestResult | null;
+};
+
 export default function ProviderOverview({
   item, usageTotals, quotaReport, oauthEmail,
+  apiBase, connectionIdentity,
   onEditSettings, onViewUsage, onUpdateProvider,
   onReauthenticate, onCancelLogin, reauthBusy = false,
   accountPanel,
@@ -22,6 +39,9 @@ export default function ProviderOverview({
   usageTotals?: ProviderUsageTotals;
   quotaReport?: ProviderQuotaReportView;
   oauthEmail?: string;
+  apiBase?: string;
+  /** Opaque active credential identity used only to invalidate stale probe results. */
+  connectionIdentity?: string;
   onEditSettings?: () => void;
   onViewUsage?: () => void;
   onUpdateProvider?: (name: string, patch: ProviderUpdatePatch) => Promise<{ ok: boolean; error?: string }>;
@@ -48,6 +68,81 @@ export default function ProviderOverview({
   const requests = usageTotals?.requests;
   const tokens = usageTotals?.totalTokens;
   const quota = accountQuotaFromReport(quotaReport);
+  const connectionProbeKey = JSON.stringify([
+    apiBase ?? null,
+    item.name,
+    item.adapter,
+    item.baseUrl,
+    item.authMode ?? null,
+    item.apiKeyTransport ?? null,
+    item.liveModels ?? null,
+    item.disabled === true,
+    item.hasApiKey === true,
+    item.hasHeaders === true,
+    item.allowPrivateNetwork === true,
+    item.keyOptional === true,
+    item.activeNeedsReauth === true,
+    connectionIdentity ?? null,
+  ]);
+  const [connectionTest, setConnectionTest] = useState<ConnectionTestState | null>(null);
+  const connectionAbortRef = useRef<{ key: string; controller: AbortController } | null>(null);
+  const testingConnection = connectionTest?.key === connectionProbeKey && connectionTest.testing;
+  const connectionResult = connectionTest?.key === connectionProbeKey ? connectionTest.result : null;
+
+  useEffect(() => {
+    return () => {
+      if (connectionAbortRef.current?.key === connectionProbeKey) {
+        connectionAbortRef.current.controller.abort();
+        connectionAbortRef.current = null;
+      }
+    };
+  }, [connectionProbeKey]);
+
+  const testConnection = useCallback(async () => {
+    if (!apiBase) return;
+    connectionAbortRef.current?.controller.abort();
+    const controller = new AbortController();
+    connectionAbortRef.current = { key: connectionProbeKey, controller };
+    setConnectionTest({ key: connectionProbeKey, testing: true, result: null });
+    try {
+      const response = await fetch(`${apiBase}/api/providers/test?name=${encodeURIComponent(item.name)}`, {
+        method: "POST",
+        signal: controller.signal,
+      });
+      const result = await readJsonOrThrow<ConnectionTestResult>(response, t("pws.connectionFailed"));
+      if (!result) throw new Error(t("pws.connectionFailed"));
+      if (!controller.signal.aborted) {
+        setConnectionTest({ key: connectionProbeKey, testing: false, result });
+      }
+    } catch (error) {
+      if (!controller.signal.aborted) {
+        setConnectionTest({
+          key: connectionProbeKey,
+          testing: false,
+          result: {
+            applicable: true,
+            ok: false,
+            error: error instanceof Error ? error.message : t("pws.connectionFailed"),
+          },
+        });
+      }
+    } finally {
+      if (connectionAbortRef.current?.controller === controller) {
+        connectionAbortRef.current = null;
+      }
+    }
+  }, [apiBase, connectionProbeKey, item.name, t]);
+
+  const connectionState = connectionResult?.applicable === false
+    ? "not-applicable"
+    : connectionResult?.ok === true
+      ? "ok"
+      : "failed";
+  const connectionText = connectionResult?.applicable === false
+    ? t("pws.connectionNotApplicable")
+    : connectionResult?.ok === true
+      ? (connectionResult.message || t("pws.connectionOk"))
+      : (connectionResult?.error || t("pws.connectionFailed"));
   return (
     <div className="pws-overview-layout">
       <div className="pws-overview-main">
@@ -82,6 +177,27 @@ export default function ProviderOverview({
             </div>
           )}
         </dl>
+        {apiBase && (
+          <div className="row" style={{ marginTop: 12, alignItems: "center" }}>
+            <button
+              type="button"
+              className="btn btn-ghost btn-sm"
+              disabled={testingConnection}
+              onClick={() => void testConnection()}
+            >
+              {testingConnection ? t("pws.testing") : t("pws.testConnection")}
+            </button>
+            {connectionResult && (
+              <span
+                role="status"
+                className={connectionState === "ok" ? "pws-status-ok" : connectionState === "failed" ? "pws-status-warn" : "muted"}
+                data-connection-test-state={connectionState}
+              >
+                {connectionText}
+              </span>
+            )}
+          </div>
+        )}
         {onEditSettings && (
           <button type="button" className="link-btn pws-edit-settings-link" onClick={onEditSettings}>
             {t("pws.editSettings")}

gui/src/i18n/de.ts

@@ -1317,6 +1317,7 @@ export const de: Record<TKey, string> = {
   "pws.testing": "Teste…",
   "pws.connectionOk": "Verbindung OK",
   "pws.connectionFailed": "Verbindung fehlgeschlagen",
+  "pws.connectionNotApplicable": "Nicht zutreffend — dieser Anbieter verwendet einen statischen Modellkatalog.",
   "pws.editSettings": "Einstellungen bearbeiten",
   "pws.viewUsage": "Detaillierte Nutzung anzeigen",
   "pws.allSystemsOk": "Alle Systeme betriebsbereit",

gui/src/i18n/en.ts

@@ -1043,6 +1043,7 @@ export const en = {
   "pws.testing": "Testing…",
   "pws.connectionOk": "Connection OK",
   "pws.connectionFailed": "Connection failed",
+  "pws.connectionNotApplicable": "Not applicable — this provider uses a static model catalog.",
   "pws.editSettings": "Edit settings",
   "pws.viewUsage": "View detailed usage",
   "pws.allSystemsOk": "All systems operational",

gui/src/i18n/ja.ts

@@ -993,6 +993,7 @@ export const ja: Record<TKey, string> = {
   "pws.testing": "テスト中…",
   "pws.connectionOk": "接続 OK",
   "pws.connectionFailed": "接続失敗",
+  "pws.connectionNotApplicable": "対象外 — このプロバイダーは静的モデルカタログを使用します。",
   "pws.editSettings": "設定を編集",
   "pws.viewUsage": "詳細な使用量を表示",
   "pws.allSystemsOk": "すべてのシステムが稼働中",

gui/src/i18n/ko.ts

@@ -1344,6 +1344,7 @@ export const ko: Record<TKey, string> = {
   "pws.testing": "테스트 중…",
   "pws.connectionOk": "연결 성공",
   "pws.connectionFailed": "연결 실패",
+  "pws.connectionNotApplicable": "해당 없음 — 이 프로바이더는 정적 모델 카탈로그를 사용합니다.",
   "pws.editSettings": "설정 편집",
   "pws.viewUsage": "사용량 상세 보기",
   "pws.allSystemsOk": "모든 시스템 정상",

gui/src/i18n/ru.ts

@@ -1035,6 +1035,7 @@ export const ru: Record<TKey, string> = {
   "pws.testing": "Проверка…",
   "pws.connectionOk": "Подключение успешно",
   "pws.connectionFailed": "Ошибка подключения",
+  "pws.connectionNotApplicable": "Не применимо — этот провайдер использует статический каталог моделей.",
   "pws.editSettings": "Изменить настройки",
   "pws.viewUsage": "Подробнее об использовании",
   "pws.allSystemsOk": "Все системы работают штатно",

gui/src/i18n/zh.ts

@@ -1337,6 +1337,7 @@ export const zh: Record<TKey, string> = {
   "pws.testing": "测试中…",
   "pws.connectionOk": "连接成功",
   "pws.connectionFailed": "连接失败",
+  "pws.connectionNotApplicable": "不适用 — 此提供方使用静态模型目录。",
   "pws.editSettings": "编辑设置",
   "pws.viewUsage": "查看详细用量",
   "pws.allSystemsOk": "所有系统正常运行",

gui/tests/provider-overview-notes-save.test.tsx

@@ -9,6 +9,7 @@ import type { WorkspaceItem } from "../src/provider-workspace/catalog";
 const globals = ["document", "window", "navigator", "localStorage", "IS_REACT_ACT_ENVIRONMENT"] as const;
 let previousGlobals: Record<(typeof globals)[number], unknown>;
 let testWindow: Window;
+const originalFetch = globalThis.fetch;
 
 beforeEach(() => {
   previousGlobals = Object.fromEntries(globals.map(key => [key, Reflect.get(globalThis, key)])) as typeof previousGlobals;
@@ -24,6 +25,7 @@ beforeEach(() => {
 });
 
 afterEach(() => {
+  globalThis.fetch = originalFetch;
   testWindow.close();
   for (const key of globals) {
     Object.defineProperty(globalThis, key, { configurable: true, value: previousGlobals[key] });
@@ -46,6 +48,8 @@ async function flush(): Promise<void> {
 async function mountOverview(
   onUpdateProvider: (name: string, patch: { note?: string }) => Promise<{ ok: boolean; error?: string }>,
   providerItem = item,
+  apiBase?: string,
+  connectionIdentity?: string,
 ): Promise<{ root: Root; container: HTMLElement }> {
   const container = document.createElement("div");
   document.body.append(container);
@@ -55,7 +59,12 @@ async function mountOverview(
     root = createRoot(container);
     root.render(
       <LanguageProvider>
-        <ProviderOverview item={providerItem} onUpdateProvider={onUpdateProvider} />
+        <ProviderOverview
+          item={providerItem}
+          apiBase={apiBase}
+          connectionIdentity={connectionIdentity}
+          onUpdateProvider={onUpdateProvider}
+        />
       </LanguageProvider>,
     );
   });
@@ -141,3 +150,123 @@ test("notes save closes editor only after an acknowledged success", async () =>
 
   await act(async () => { root.unmount(); });
 });
+
+test("static catalog connection test renders as not applicable instead of failed", async () => {
+  let requests = 0;
+  globalThis.fetch = (async (input: RequestInfo | URL, init?: RequestInit) => {
+    requests += 1;
+    expect(String(input)).toBe("http://localhost/api/providers/test?name=google-antigravity");
+    expect(init?.method).toBe("POST");
+    return Response.json({ applicable: false, reason: "static_catalog", latencyMs: 0 });
+  }) as typeof fetch;
+  const antigravity = {
+    name: "google-antigravity",
+    adapter: "google",
+    baseUrl: "https://daily-cloudcode-pa.googleapis.com",
+    authMode: "oauth",
+    liveModels: false,
+  } as WorkspaceItem;
+
+  const { root, container } = await mountOverview(async () => ({ ok: true }), antigravity, "http://localhost");
+  const button = [...container.querySelectorAll<HTMLButtonElement>("button")]
+    .find(candidate => candidate.textContent?.includes("Test connection"));
+  expect(button).toBeTruthy();
+
+  await act(async () => {
+    button!.click();
+    await flush();
+  });
+
+  const result = container.querySelector<HTMLElement>('[data-connection-test-state="not-applicable"]');
+  expect(requests).toBe(1);
+  expect(result?.textContent).toContain("Not applicable");
+  expect(result?.classList.contains("pws-status-warn")).toBe(false);
+  expect(container.textContent).not.toContain("Connection failed");
+
+  await act(async () => { root.unmount(); });
+});
+
+test("same-provider config changes clear a rendered connection result", async () => {
+  globalThis.fetch = (async () => Response.json({
+    ok: true,
+    latencyMs: 4,
+    message: "Connected",
+  })) as typeof fetch;
+  const update = async () => ({ ok: true as const });
+  const { root, container } = await mountOverview(update, item, "http://localhost", "key:key-a");
+  const button = [...container.querySelectorAll<HTMLButtonElement>("button")]
+    .find(candidate => candidate.textContent?.includes("Test connection"))!;
+
+  await act(async () => {
+    button.click();
+    await flush();
+  });
+  expect(container.querySelector('[data-connection-test-state="ok"]')).toBeTruthy();
+
+  await act(async () => {
+    root.render(
+      <LanguageProvider>
+        <ProviderOverview
+          item={{ ...item, disabled: true }}
+          apiBase="http://localhost"
+          connectionIdentity="key:key-a"
+          onUpdateProvider={update}
+        />
+      </LanguageProvider>,
+    );
+    await flush();
+  });
+
+  expect(container.querySelector("[data-connection-test-state]")).toBeNull();
+  expect(container.textContent).not.toContain("Connected");
+
+  await act(async () => { root.unmount(); });
+});
+
+test("same-provider auth identity changes abort and ignore an in-flight result", async () => {
+  let resolveFetch!: (response: Response) => void;
+  let signal: AbortSignal | null = null;
+  globalThis.fetch = (async (_input: RequestInfo | URL, init?: RequestInit) => {
+    signal = init?.signal ?? null;
+    return await new Promise<Response>(resolve => {
+      resolveFetch = resolve;
+    });
+  }) as typeof fetch;
+  const update = async () => ({ ok: true as const });
+  const { root, container } = await mountOverview(update, item, "http://localhost", "key:key-a");
+  const button = [...container.querySelectorAll<HTMLButtonElement>("button")]
+    .find(candidate => candidate.textContent?.includes("Test connection"))!;
+
+  await act(async () => {
+    button.click();
+    await Promise.resolve();
+  });
+  expect(button.disabled).toBe(true);
+
+  await act(async () => {
+    root.render(
+      <LanguageProvider>
+        <ProviderOverview
+          item={item}
+          apiBase="http://localhost"
+          connectionIdentity="key:key-b"
+          onUpdateProvider={update}
+        />
+      </LanguageProvider>,
+    );
+    await flush();
+  });
+
+  expect(signal?.aborted).toBe(true);
+  expect(container.querySelector("[data-connection-test-state]")).toBeNull();
+  expect(container.querySelector<HTMLButtonElement>("button")?.disabled).toBe(false);
+
+  await act(async () => {
+    resolveFetch(Response.json({ ok: true, latencyMs: 4, message: "Old result" }));
+    await flush();
+  });
+  expect(container.querySelector("[data-connection-test-state]")).toBeNull();
+  expect(container.textContent).not.toContain("Old result");
+
+  await act(async () => { root.unmount(); });
+});