From 266a5701c510a2e63da8b1fb72c66936b084d90f Mon Sep 17 00:00:00 2001
From: aqilaziz <gonzes7@gmail.com>
Date: Thu, 21 May 2026 11:44:57 +0700
Subject: [PATCH 1/4] fix(ai): contain provider setup errors

---
 .../components/settings/panels/AIPanel.tsx    | 75 +++++++++++++++----
 .../panels/__tests__/AIPanel.test.tsx         | 37 ++++++++-
 2 files changed, 96 insertions(+), 16 deletions(-)

diff --git a/app/src/components/settings/panels/AIPanel.tsx b/app/src/components/settings/panels/AIPanel.tsx
index 05fb6d91a6..e33dfccd34 100644
--- a/app/src/components/settings/panels/AIPanel.tsx
+++ b/app/src/components/settings/panels/AIPanel.tsx
@@ -200,6 +200,37 @@ const EMPTY_ROUTING: RoutingMap = {
 
 const EMPTY_SETTINGS: AISettings = { cloudProviders: [], routing: EMPTY_ROUTING };
 
+type ProviderSetupError = { summary: string; detail?: string };
+
+const MAX_PROVIDER_SETUP_DETAIL_LENGTH = 1000;
+
+function formatProviderSetupError(err: unknown): ProviderSetupError {
+  const raw = err instanceof Error ? err.message : String(err ?? '');
+  const fallback = 'Provider setup failed. Check the provider settings and try again.';
+  const trimmedRaw = raw.trim();
+  if (!trimmedRaw) return { summary: fallback };
+
+  const withoutUrls = trimmedRaw.replace(/https?:\/\/[^\s"]+/g, '<endpoint>');
+  const jsonStart = withoutUrls.search(/\s(?:\[|\{)/);
+  const clipped = jsonStart === -1 ? withoutUrls : withoutUrls.slice(0, jsonStart);
+  let summary = clipped
+    .replace(/^Error:\s*/i, '')
+    .replace(/^Could not reach ([^:]+):\s*/i, 'Could not reach $1. ')
+    .trim();
+
+  if (!summary) summary = fallback;
+  if (summary.length > 220) {
+    summary = `${summary.slice(0, 217).trimEnd()}...`;
+  }
+
+  const clippedDetail =
+    trimmedRaw.length > MAX_PROVIDER_SETUP_DETAIL_LENGTH
+      ? `${trimmedRaw.slice(0, MAX_PROVIDER_SETUP_DETAIL_LENGTH - 3).trimEnd()}...`
+      : trimmedRaw;
+  const detail = clippedDetail !== summary ? clippedDetail : undefined;
+  return { summary, detail };
+}
+
 function maskKeyLabel(hasKey: boolean): string {
   return hasKey ? '•••• configured' : 'Not configured';
 }
@@ -541,7 +572,7 @@ const ProviderKeyDialog = ({
   const { t } = useT();
   const [value, setValue] = useState<string>(isLocalRuntime ? defaultEndpointFor(slug) : '');
   const [phase, setPhase] = useState<'idle' | 'saving'>('idle');
-  const [error, setError] = useState<string | null>(null);
+  const [error, setError] = useState<ProviderSetupError | null>(null);
   const busy = phase !== 'idle';
 
   const placeholder = isLocalRuntime
@@ -564,11 +595,13 @@ const ProviderKeyDialog = ({
   const handleSave = async () => {
     const trimmed = value.trim();
     if (!trimmed) {
-      setError(isLocalRuntime ? 'Endpoint URL is required' : t('settings.ai.apiKeyRequired'));
+      setError({
+        summary: isLocalRuntime ? 'Endpoint URL is required' : t('settings.ai.apiKeyRequired'),
+      });
       return;
     }
     if (isLocalRuntime && !/^https?:\/\//i.test(trimmed)) {
-      setError('Endpoint must start with http:// or https://');
+      setError({ summary: 'Endpoint must start with http:// or https://' });
       return;
     }
     setError(null);
@@ -577,7 +610,7 @@ const ProviderKeyDialog = ({
     try {
       await onSubmit(trimmed);
     } catch (err) {
-      setError(err instanceof Error ? err.message : String(err));
+      setError(formatProviderSetupError(err));
       setPhase('idle');
     }
   };
@@ -619,9 +652,7 @@ const ProviderKeyDialog = ({
             }}
             className={`rounded-lg border border-stone-300 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-3 py-2 text-sm text-stone-900 dark:text-neutral-100 placeholder-stone-400 dark:placeholder-neutral-500 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500 disabled:opacity-60 ${isLocalRuntime ? 'font-mono' : ''}`}
           />
-          {error ? (
-            <p className="text-xs font-medium text-red-600 dark:text-red-300">{error}</p>
-          ) : null}
+          {error ? <ProviderSetupErrorMessage error={error} /> : null}
         </div>
 
         <div className="mt-6 flex justify-end gap-2">
@@ -646,6 +677,26 @@ const ProviderKeyDialog = ({
 };
 
 // ─────────────────────────────────────────────────────────────────────────────
+function ProviderSetupErrorMessage({ error }: { error: ProviderSetupError }) {
+  return (
+    <div className="min-w-0 rounded-md border border-red-200 dark:border-red-500/30 bg-red-50 dark:bg-red-500/10 px-3 py-2 text-xs text-red-700 dark:text-red-300">
+      <p role="alert" className="font-medium leading-relaxed break-words [overflow-wrap:anywhere]">
+        {error.summary}
+      </p>
+      {error.detail && (
+        <details className="mt-2">
+          <summary className="cursor-pointer select-none text-[11px] font-medium text-red-700 dark:text-red-200">
+            Details
+          </summary>
+          <pre className="mt-1 max-h-32 overflow-auto whitespace-pre-wrap break-words rounded bg-white/70 dark:bg-neutral-950/40 p-2 font-mono text-[11px] leading-relaxed [overflow-wrap:anywhere]">
+            {error.detail}
+          </pre>
+        </details>
+      )}
+    </div>
+  );
+}
+
 // Background loop controls + usage diagnostics
 // ─────────────────────────────────────────────────────────────────────────────
 
@@ -2529,7 +2580,7 @@ const CloudProviderEditor = ({
   const [endpoint, setEndpoint] = useState(initial?.endpoint ?? defaultEndpointFor(defaultSlug));
   const [apiKey, setApiKey] = useState('');
   const [saving, setSaving] = useState(false);
-  const [submitError, setSubmitError] = useState<string | null>(null);
+  const [submitError, setSubmitError] = useState<ProviderSetupError | null>(null);
   const isOpenHuman = slug === 'openhuman';
   const hasExistingKey = (initial?.maskedKey ?? '').startsWith('••••');
 
@@ -2617,11 +2668,7 @@ const CloudProviderEditor = ({
               />
             </div>
           )}
-          {submitError && (
-            <div className="rounded-md border border-red-200 dark:border-red-500/30 bg-red-50 dark:bg-red-500/10 px-3 py-2 text-xs text-red-700 dark:text-red-300 break-words">
-              {submitError}
-            </div>
-          )}
+          {submitError && <ProviderSetupErrorMessage error={submitError} />}
         </div>
         <div className="flex items-center justify-end gap-2 border-t border-stone-200 dark:border-neutral-800 px-4 py-3">
           <button
@@ -2650,7 +2697,7 @@ const CloudProviderEditor = ({
                 // Caller throws when the live /models probe rejects — surface
                 // the failure inline and keep the dialog open so the user can
                 // fix the key/URL and retry.
-                setSubmitError(err instanceof Error ? err.message : String(err));
+                setSubmitError(formatProviderSetupError(err));
               } finally {
                 setSaving(false);
               }
diff --git a/app/src/components/settings/panels/__tests__/AIPanel.test.tsx b/app/src/components/settings/panels/__tests__/AIPanel.test.tsx
index 6479aa2d6a..2d9ee1b00a 100644
--- a/app/src/components/settings/panels/__tests__/AIPanel.test.tsx
+++ b/app/src/components/settings/panels/__tests__/AIPanel.test.tsx
@@ -3,6 +3,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { listConnections as listComposioConnections } from '../../../../lib/composio/composioApi';
 import {
+  listProviderModels,
   loadAISettings,
   loadLocalProviderSnapshot,
   saveAISettings,
@@ -34,8 +35,8 @@ vi.mock('../../../../services/api/aiSettingsApi', () => ({
   loadAISettings: vi.fn(),
   saveAISettings: vi.fn(),
   loadLocalProviderSnapshot: vi.fn(),
-  setCloudProviderKey: vi.fn(),
-  clearCloudProviderKey: vi.fn(),
+  setCloudProviderKey: vi.fn().mockResolvedValue(undefined),
+  clearCloudProviderKey: vi.fn().mockResolvedValue(undefined),
   serializeProviderRef: vi.fn((r: { kind: string; providerSlug?: string; model?: string }) =>
     r.kind === 'openhuman'
       ? 'openhuman'
@@ -340,6 +341,38 @@ describe('AIPanel', () => {
     expect(screen.getByLabelText(/API key/i)).toBeInTheDocument();
   });
 
+  it('keeps long provider setup errors contained with raw detail behind details', async () => {
+    vi.mocked(loadAISettings).mockResolvedValue({ ...baseSettings, cloudProviders: [] });
+    const oversizedTail = `${'x'.repeat(1400)} tail_marker`;
+    vi.mocked(listProviderModels).mockRejectedValueOnce(
+      new Error(
+        `Backend returned 401 Unauthorized for POST https://api.example.com/v1/models: {"error":{"message":"invalid_api_key_invalid_api_key_invalid_api_key_invalid_api_key_invalid_api_key","code":"invalid_api_key"}} ${oversizedTail}`
+      )
+    );
+
+    renderWithProviders(<AIPanel />);
+
+    fireEvent.click(await screen.findByRole('switch', { name: /Connect OpenAI/i }));
+    const dialog = await screen.findByRole('dialog', { name: /Connect OpenAI/i });
+    fireEvent.change(within(dialog).getByLabelText(/API key/i), {
+      target: { value: 'sk-bad-key' },
+    });
+    fireEvent.click(within(dialog).getByRole('button', { name: /^Save$/i }));
+
+    const alert = await within(dialog).findByRole('alert');
+    expect(alert).toHaveTextContent(/Could not reach OpenAI\./i);
+    expect(alert).not.toHaveTextContent('invalid_api_key');
+    const detailsSummary = within(dialog).getByText('Details');
+    const details = detailsSummary.closest('details');
+    expect(details).not.toBeNull();
+    const detailsElement = details as HTMLDetailsElement;
+    expect(detailsElement.open).toBe(false);
+    fireEvent.click(detailsSummary);
+    expect(detailsElement.open).toBe(true);
+    expect(within(dialog).getByText(/invalid_api_key_invalid_api_key/)).toBeInTheDocument();
+    expect(within(dialog).queryByText(/tail_marker/)).not.toBeInTheDocument();
+  });
+
   it('clicking the Custom chip (when disabled) opens the CloudProviderEditor, not the key dialog', async () => {
     // Load with no custom provider → chip is off.
     vi.mocked(loadAISettings).mockResolvedValue({ ...baseSettings, cloudProviders: [] });

From 06c54b13fff303e16c6ff98f68f2312d7cbc97fc Mon Sep 17 00:00:00 2001
From: Steven Enamakel <enamakel@tinyhumans.ai>
Date: Sun, 24 May 2026 21:39:28 -0700
Subject: [PATCH 2/4] chore(pr-fix): apply formatting

---
 app/src/components/settings/panels/__tests__/AIPanel.test.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/app/src/components/settings/panels/__tests__/AIPanel.test.tsx b/app/src/components/settings/panels/__tests__/AIPanel.test.tsx
index 551c453a02..1116bd7f33 100644
--- a/app/src/components/settings/panels/__tests__/AIPanel.test.tsx
+++ b/app/src/components/settings/panels/__tests__/AIPanel.test.tsx
@@ -359,9 +359,7 @@ describe('AIPanel', () => {
   it('surfaces provider setup errors in an alert with technical details collapsed', async () => {
     vi.mocked(loadAISettings).mockResolvedValue({ ...baseSettings, cloudProviders: [] });
     vi.mocked(listProviderModels).mockRejectedValueOnce(
-      new Error(
-        'Could not reach OpenAI: provider returned 401 Unauthorized'
-      )
+      new Error('Could not reach OpenAI: provider returned 401 Unauthorized')
     );
 
     renderWithProviders(<AIPanel />);

From 342794bde04d44bfad43fa61cdbd3604ef34c787 Mon Sep 17 00:00:00 2001
From: Steven Enamakel <enamakel@tinyhumans.ai>
Date: Sun, 24 May 2026 22:17:38 -0700
Subject: [PATCH 3/4] fix(i18n): remove duplicate keys in de-5.ts chunk

---
 app/src/lib/i18n/chunks/de-5.ts | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/app/src/lib/i18n/chunks/de-5.ts b/app/src/lib/i18n/chunks/de-5.ts
index 651aa0ffa4..852d1155fe 100644
--- a/app/src/lib/i18n/chunks/de-5.ts
+++ b/app/src/lib/i18n/chunks/de-5.ts
@@ -240,10 +240,6 @@ const de5: TranslationMap = {
   'settings.mascot.active': 'Aktiv',
   'settings.mascot.characterDesc': 'Charakterbeschreibung',
   'settings.mascot.characterHeading': 'Zeichenüberschrift',
-  'settings.mascot.customGifError':
-    'Gib eine HTTPS-.gif-URL, eine Loopback-HTTP-.gif-URL, eine file://-.gif-URL oder einen lokalen .gif-Pfad ein.',
-  'settings.mascot.customGifHeading': 'Eigener GIF-Avatar',
-  'settings.mascot.customGifLabel': 'URL des eigenen GIF-Avatars',
   'settings.mascot.colorDesc': 'Farbbeschreibung',
   'settings.mascot.colorHeading': 'Farbüberschrift',
   'settings.mascot.loadingLibrary': 'OpenHuman-Bibliothek wird geladen…',

From 27fb48c0e8832c1994bb3e1e33c77ffa3d1f917c Mon Sep 17 00:00:00 2001
From: Steven Enamakel <enamakel@tinyhumans.ai>
Date: Mon, 25 May 2026 02:03:14 -0700
Subject: [PATCH 4/4] fix(i18n): restore missing customGif keys in de-5.ts
 chunk

---
 app/src/lib/i18n/chunks/de-5.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/app/src/lib/i18n/chunks/de-5.ts b/app/src/lib/i18n/chunks/de-5.ts
index 51a6a1a6a2..d0f425708e 100644
--- a/app/src/lib/i18n/chunks/de-5.ts
+++ b/app/src/lib/i18n/chunks/de-5.ts
@@ -240,6 +240,10 @@ const de5: TranslationMap = {
   'settings.mascot.active': 'Aktiv',
   'settings.mascot.characterDesc': 'Charakterbeschreibung',
   'settings.mascot.characterHeading': 'Zeichenüberschrift',
+  'settings.mascot.customGifError':
+    'GIF konnte nicht geladen werden. Bitte überprüfe die URL und versuche es erneut.',
+  'settings.mascot.customGifHeading': 'Benutzerdefinierter GIF-Avatar',
+  'settings.mascot.customGifLabel': 'URL für benutzerdefinierten GIF-Avatar',
   'settings.mascot.colorDesc': 'Farbbeschreibung',
   'settings.mascot.colorHeading': 'Farbüberschrift',
   'settings.mascot.loadingLibrary': 'OpenHuman-Bibliothek wird geladen…',