@tonyclaw/agent-inspector 2.0.21 → 2.0.23

package/.output/server/{_tanstack-start-manifest_v-Brrx1NEa.mjs → _tanstack-start-manifest_v-BnLVH_EX.mjs}

@@ -1,4 +1,4 @@
-const tsrStartManifest = () => ({ "routes": { "__root__": { "filePath": "C:/Users/claw/workspace/agent-inspector/src/routes/__root.tsx", "children": ["/", "/api/config", "/api/health", "/api/logs", "/api/mcp", "/api/models", "/api/providers", "/api/sessions", "/proxy/$", "/session/$sessionId", "/api/knowledge/candidates", "/api/knowledge/project-context", "/api/knowledge/search", "/api/knowledge/sessions/$sessionId/candidates"], "preloads": ["/assets/main-lTQKpxiU.js"], "assets": [] }, "/": { "filePath": "C:/Users/claw/workspace/agent-inspector/src/routes/index.tsx", "assets": [], "preloads": ["/assets/index-0mTTpvA2.js", "/assets/ProxyViewerContainer-BT8Ilsbs.js"] }, "/api/config": { "filePath": "C:/Users/claw/workspace/agent-inspector/src/routes/api/config.ts", "children": ["/api/config/paths"] }, "/api/health": { "filePath": "C:/Users/claw/workspace/agent-inspector/src/routes/api/health.ts" }, "/api/logs": { "filePath": "C:/Users/claw/workspace/agent-inspector/src/routes/api/logs.ts", "children": ["/api/logs/$id", "/api/logs/stream"] }, "/api/mcp": { "filePath": "C:/Users/claw/workspace/agent-inspector/src/routes/api/mcp.ts" }, "/api/models": { "filePath": "C:/Users/claw/workspace/agent-inspector/src/routes/api/models.ts" }, "/api/providers": { "filePath": "C:/Users/claw/workspace/agent-inspector/src/routes/api/providers.ts", "children": ["/api/providers/$providerId", "/api/providers/export", "/api/providers/import", "/api/providers/scan"] }, "/api/sessions": { "filePath": "C:/Users/claw/workspace/agent-inspector/src/routes/api/sessions.ts" }, "/proxy/$": { "filePath": "C:/Users/claw/workspace/agent-inspector/src/routes/proxy/$.ts" }, "/session/$sessionId": { "filePath": "C:/Users/claw/workspace/agent-inspector/src/routes/session/$sessionId.tsx", "assets": [], "preloads": ["/assets/_sessionId-C9cpyfLX.js", "/assets/ProxyViewerContainer-BT8Ilsbs.js"] }, "/api/config/paths": { "filePath": "C:/Users/claw/workspace/agent-inspector/src/routes/api/config.paths.ts" }, "/api/knowledge/candidates": { "filePath": "C:/Users/claw/workspace/agent-inspector/src/routes/api/knowledge.candidates.ts", "children": ["/api/knowledge/candidates/$candidateId"] }, "/api/knowledge/project-context": { "filePath": "C:/Users/claw/workspace/agent-inspector/src/routes/api/knowledge.project-context.ts" }, "/api/knowledge/search": { "filePath": "C:/Users/claw/workspace/agent-inspector/src/routes/api/knowledge.search.ts" }, "/api/logs/$id": { "filePath": "C:/Users/claw/workspace/agent-inspector/src/routes/api/logs.$id.ts", "children": ["/api/logs/$id/chunks", "/api/logs/$id/replay"] }, "/api/logs/stream": { "filePath": "C:/Users/claw/workspace/agent-inspector/src/routes/api/logs.stream.ts" }, "/api/providers/$providerId": { "filePath": "C:/Users/claw/workspace/agent-inspector/src/routes/api/providers.$providerId.ts", "children": ["/api/providers/$providerId/model-metadata", "/api/providers/$providerId/test"] }, "/api/providers/export": { "filePath": "C:/Users/claw/workspace/agent-inspector/src/routes/api/providers.export.ts" }, "/api/providers/import": { "filePath": "C:/Users/claw/workspace/agent-inspector/src/routes/api/providers.import.ts" }, "/api/providers/scan": { "filePath": "C:/Users/claw/workspace/agent-inspector/src/routes/api/providers.scan.ts" }, "/api/knowledge/candidates/$candidateId": { "filePath": "C:/Users/claw/workspace/agent-inspector/src/routes/api/knowledge.candidates.$candidateId.ts", "children": ["/api/knowledge/candidates/$candidateId/promote"] }, "/api/logs/$id/chunks": { "filePath": "C:/Users/claw/workspace/agent-inspector/src/routes/api/logs.$id.chunks.ts" }, "/api/logs/$id/replay": { "filePath": "C:/Users/claw/workspace/agent-inspector/src/routes/api/logs.$id.replay.ts" }, "/api/providers/$providerId/model-metadata": { "filePath": "C:/Users/claw/workspace/agent-inspector/src/routes/api/providers.$providerId.model-metadata.ts" }, "/api/providers/$providerId/test": { "filePath": "C:/Users/claw/workspace/agent-inspector/src/routes/api/providers.$providerId.test.ts", "children": ["/api/providers/$providerId/test/log"] }, "/api/knowledge/candidates/$candidateId/promote": { "filePath": "C:/Users/claw/workspace/agent-inspector/src/routes/api/knowledge.candidates.$candidateId.promote.ts" }, "/api/knowledge/sessions/$sessionId/candidates": { "filePath": "C:/Users/claw/workspace/agent-inspector/src/routes/api/knowledge.sessions.$sessionId.candidates.ts" }, "/api/providers/$providerId/test/log": { "filePath": "C:/Users/claw/workspace/agent-inspector/src/routes/api/providers.$providerId.test.log.ts" } }, "clientEntry": "/assets/main-lTQKpxiU.js" });
+const tsrStartManifest = () => ({ "routes": { "__root__": { "filePath": "C:/Users/claw/workspace/agent-inspector/src/routes/__root.tsx", "children": ["/", "/api/config", "/api/health", "/api/logs", "/api/mcp", "/api/models", "/api/providers", "/api/sessions", "/proxy/$", "/session/$sessionId", "/api/knowledge/candidates", "/api/knowledge/project-context", "/api/knowledge/search", "/api/knowledge/sessions/$sessionId/candidates"], "preloads": ["/assets/main-hF_572U6.js"], "assets": [] }, "/": { "filePath": "C:/Users/claw/workspace/agent-inspector/src/routes/index.tsx", "assets": [], "preloads": ["/assets/index-BpJNbm9G.js", "/assets/ProxyViewerContainer-BTYGkg36.js"] }, "/api/config": { "filePath": "C:/Users/claw/workspace/agent-inspector/src/routes/api/config.ts", "children": ["/api/config/paths"] }, "/api/health": { "filePath": "C:/Users/claw/workspace/agent-inspector/src/routes/api/health.ts" }, "/api/logs": { "filePath": "C:/Users/claw/workspace/agent-inspector/src/routes/api/logs.ts", "children": ["/api/logs/$id", "/api/logs/stream"] }, "/api/mcp": { "filePath": "C:/Users/claw/workspace/agent-inspector/src/routes/api/mcp.ts" }, "/api/models": { "filePath": "C:/Users/claw/workspace/agent-inspector/src/routes/api/models.ts" }, "/api/providers": { "filePath": "C:/Users/claw/workspace/agent-inspector/src/routes/api/providers.ts", "children": ["/api/providers/$providerId", "/api/providers/export", "/api/providers/import", "/api/providers/scan"] }, "/api/sessions": { "filePath": "C:/Users/claw/workspace/agent-inspector/src/routes/api/sessions.ts" }, "/proxy/$": { "filePath": "C:/Users/claw/workspace/agent-inspector/src/routes/proxy/$.ts" }, "/session/$sessionId": { "filePath": "C:/Users/claw/workspace/agent-inspector/src/routes/session/$sessionId.tsx", "assets": [], "preloads": ["/assets/_sessionId-DpdfAzbo.js", "/assets/ProxyViewerContainer-BTYGkg36.js"] }, "/api/config/paths": { "filePath": "C:/Users/claw/workspace/agent-inspector/src/routes/api/config.paths.ts" }, "/api/knowledge/candidates": { "filePath": "C:/Users/claw/workspace/agent-inspector/src/routes/api/knowledge.candidates.ts", "children": ["/api/knowledge/candidates/$candidateId"] }, "/api/knowledge/project-context": { "filePath": "C:/Users/claw/workspace/agent-inspector/src/routes/api/knowledge.project-context.ts" }, "/api/knowledge/search": { "filePath": "C:/Users/claw/workspace/agent-inspector/src/routes/api/knowledge.search.ts" }, "/api/logs/$id": { "filePath": "C:/Users/claw/workspace/agent-inspector/src/routes/api/logs.$id.ts", "children": ["/api/logs/$id/chunks", "/api/logs/$id/replay"] }, "/api/logs/stream": { "filePath": "C:/Users/claw/workspace/agent-inspector/src/routes/api/logs.stream.ts" }, "/api/providers/$providerId": { "filePath": "C:/Users/claw/workspace/agent-inspector/src/routes/api/providers.$providerId.ts", "children": ["/api/providers/$providerId/model-metadata", "/api/providers/$providerId/test"] }, "/api/providers/export": { "filePath": "C:/Users/claw/workspace/agent-inspector/src/routes/api/providers.export.ts" }, "/api/providers/import": { "filePath": "C:/Users/claw/workspace/agent-inspector/src/routes/api/providers.import.ts" }, "/api/providers/scan": { "filePath": "C:/Users/claw/workspace/agent-inspector/src/routes/api/providers.scan.ts" }, "/api/knowledge/candidates/$candidateId": { "filePath": "C:/Users/claw/workspace/agent-inspector/src/routes/api/knowledge.candidates.$candidateId.ts", "children": ["/api/knowledge/candidates/$candidateId/promote"] }, "/api/logs/$id/chunks": { "filePath": "C:/Users/claw/workspace/agent-inspector/src/routes/api/logs.$id.chunks.ts" }, "/api/logs/$id/replay": { "filePath": "C:/Users/claw/workspace/agent-inspector/src/routes/api/logs.$id.replay.ts" }, "/api/providers/$providerId/model-metadata": { "filePath": "C:/Users/claw/workspace/agent-inspector/src/routes/api/providers.$providerId.model-metadata.ts" }, "/api/providers/$providerId/test": { "filePath": "C:/Users/claw/workspace/agent-inspector/src/routes/api/providers.$providerId.test.ts", "children": ["/api/providers/$providerId/test/log"] }, "/api/knowledge/candidates/$candidateId/promote": { "filePath": "C:/Users/claw/workspace/agent-inspector/src/routes/api/knowledge.candidates.$candidateId.promote.ts" }, "/api/knowledge/sessions/$sessionId/candidates": { "filePath": "C:/Users/claw/workspace/agent-inspector/src/routes/api/knowledge.sessions.$sessionId.candidates.ts" }, "/api/providers/$providerId/test/log": { "filePath": "C:/Users/claw/workspace/agent-inspector/src/routes/api/providers.$providerId.test.log.ts" } }, "clientEntry": "/assets/main-hF_572U6.js" });
 export {
   tsrStartManifest
 };

package/.output/server/index.mjs

@@ -38,100 +38,100 @@ const assets = {
   "/assets/alibaba-TTwafVwX.svg": {
     "type": "image/svg+xml",
     "etag": '"171b-6dyV5K8QjiaY35sN9qNprh9zDIs"',
-    "mtime": "2026-06-29T08:00:45.251Z",
+    "mtime": "2026-06-29T10:57:03.958Z",
     "size": 5915,
     "path": "../public/assets/alibaba-TTwafVwX.svg"
   },
-  "/assets/CompareDrawer-ztKMd-FE.js": {
+  "/assets/CompareDrawer-DnYQtd8R.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"49fe-E12X8KJ9bFJDOM19txdekQTJjxk"',
-    "mtime": "2026-06-29T08:00:45.251Z",
+    "etag": '"49fe-b7mmBTYljsLKWenrZlAtgJH1LOY"',
+    "mtime": "2026-06-29T10:57:03.958Z",
     "size": 18942,
-    "path": "../public/assets/CompareDrawer-ztKMd-FE.js"
+    "path": "../public/assets/CompareDrawer-DnYQtd8R.js"
   },
-  "/assets/index-0mTTpvA2.js": {
+  "/assets/index-BpJNbm9G.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"74-NpsKS58Jmtv6X8b9bXiACti03i8"',
-    "mtime": "2026-06-29T08:00:45.251Z",
+    "etag": '"74-5ny3SIFXNJjz8mYDJPqwGLMogII"',
+    "mtime": "2026-06-29T10:57:03.958Z",
     "size": 116,
-    "path": "../public/assets/index-0mTTpvA2.js"
+    "path": "../public/assets/index-BpJNbm9G.js"
+  },
+  "/assets/index-780zTVwp.css": {
+    "type": "text/css; charset=utf-8",
+    "etag": '"1a380-Lz+Shs13XyKSlh9PTaGE50w/BpU"',
+    "mtime": "2026-06-29T10:57:03.958Z",
+    "size": 107392,
+    "path": "../public/assets/index-780zTVwp.css"
   },
   "/assets/minimax-BPMzvuL-.jpeg": {
     "type": "image/jpeg",
     "etag": '"1b06-IwivU89ko5UTMUM1/t7hn4sQK9A"',
-    "mtime": "2026-06-29T08:00:45.251Z",
+    "mtime": "2026-06-29T10:57:03.958Z",
     "size": 6918,
     "path": "../public/assets/minimax-BPMzvuL-.jpeg"
   },
-  "/assets/main-lTQKpxiU.js": {
+  "/assets/ReplayDialog-B-3V95xT.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"51726-dI1UxXCXVwDLjEkVI22GO7tbSks"',
-    "mtime": "2026-06-29T08:00:45.251Z",
-    "size": 333606,
-    "path": "../public/assets/main-lTQKpxiU.js"
-  },
-  "/assets/index-DynnYt7S.css": {
-    "type": "text/css; charset=utf-8",
-    "etag": '"1a2ef-ePBi5QJ1gmSGrdAGsfnIQPhloY0"',
-    "mtime": "2026-06-29T08:00:45.251Z",
-    "size": 107247,
-    "path": "../public/assets/index-DynnYt7S.css"
+    "etag": '"318c-1NLootFaQs7KDJvmrRBmp0zrGoY"',
+    "mtime": "2026-06-29T10:57:03.958Z",
+    "size": 12684,
+    "path": "../public/assets/ReplayDialog-B-3V95xT.js"
   },
-  "/assets/qwen-CONDcHqt.png": {
-    "type": "image/png",
-    "etag": '"572c3-cdJAPaHdOvFCGzuaQjagdgOu6XE"',
-    "mtime": "2026-06-29T08:00:45.251Z",
-    "size": 357059,
-    "path": "../public/assets/qwen-CONDcHqt.png"
+  "/assets/main-hF_572U6.js": {
+    "type": "text/javascript; charset=utf-8",
+    "etag": '"51726-eooZ68MhIVAdbT2A97BnHJuW5lM"',
+    "mtime": "2026-06-29T10:57:03.958Z",
+    "size": 333606,
+    "path": "../public/assets/main-hF_572U6.js"
   },
-  "/assets/ReplayDialog-RNhfLSsW.js": {
+  "/assets/ResponseView-DK3CYom0.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"318c-7KXwFfcY/M7/UUmApqb2bQHX4KY"',
-    "mtime": "2026-06-29T08:00:45.251Z",
-    "size": 12684,
-    "path": "../public/assets/ReplayDialog-RNhfLSsW.js"
+    "etag": '"30d0-Cy0g09LS9VDwp/DlETvauFmcBFs"',
+    "mtime": "2026-06-29T10:57:03.958Z",
+    "size": 12496,
+    "path": "../public/assets/ResponseView-DK3CYom0.js"
   },
-  "/assets/RequestAnatomy-fsUI5HhH.js": {
+  "/assets/RequestAnatomy-CT8hLGLa.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"4485-y/NzXbzgBqFCTpcuE2YC8B4Xl+s"',
-    "mtime": "2026-06-29T08:00:45.251Z",
+    "etag": '"4485-oTcemFMGh2ben0T+njg79IE1+H8"',
+    "mtime": "2026-06-29T10:57:03.958Z",
     "size": 17541,
-    "path": "../public/assets/RequestAnatomy-fsUI5HhH.js"
+    "path": "../public/assets/RequestAnatomy-CT8hLGLa.js"
   },
-  "/assets/ResponseView-B3YTDBBX.js": {
+  "/assets/StreamingChunkSequence-D3jJutjp.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"30d0-VB+rk3ZWGccTZY/YQDSqdmafiXI"',
-    "mtime": "2026-06-29T08:00:45.253Z",
-    "size": 12496,
-    "path": "../public/assets/ResponseView-B3YTDBBX.js"
+    "etag": '"d57-SqKRwuSq9h9H7zwcDkj5Lqd+u/Y"',
+    "mtime": "2026-06-29T10:57:03.958Z",
+    "size": 3415,
+    "path": "../public/assets/StreamingChunkSequence-D3jJutjp.js"
   },
-  "/assets/StreamingChunkSequence-CbGqQ0mO.js": {
+  "/assets/_sessionId-DpdfAzbo.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"d57-/TohmpAJTSJQB9pn++sOZIR77ks"',
-    "mtime": "2026-06-29T08:00:45.253Z",
-    "size": 3415,
-    "path": "../public/assets/StreamingChunkSequence-CbGqQ0mO.js"
+    "etag": '"d2-tBmz0AuKXPVen+wNzq7oGvD4J44"',
+    "mtime": "2026-06-29T10:57:03.958Z",
+    "size": 210,
+    "path": "../public/assets/_sessionId-DpdfAzbo.js"
+  },
+  "/assets/qwen-CONDcHqt.png": {
+    "type": "image/png",
+    "etag": '"572c3-cdJAPaHdOvFCGzuaQjagdgOu6XE"',
+    "mtime": "2026-06-29T10:57:03.958Z",
+    "size": 357059,
+    "path": "../public/assets/qwen-CONDcHqt.png"
   },
   "/assets/zhipuai-BPNAnxo-.svg": {
     "type": "image/svg+xml",
     "etag": '"2bf8-hNaLCTi89nOFCsIIfWpP/jrfo0s"',
-    "mtime": "2026-06-29T08:00:45.251Z",
+    "mtime": "2026-06-29T10:57:03.958Z",
     "size": 11256,
     "path": "../public/assets/zhipuai-BPNAnxo-.svg"
   },
-  "/assets/_sessionId-C9cpyfLX.js": {
-    "type": "text/javascript; charset=utf-8",
-    "etag": '"d2-0De45/nv3c5PzjfK4qWI19CPHKY"',
-    "mtime": "2026-06-29T08:00:45.251Z",
-    "size": 210,
-    "path": "../public/assets/_sessionId-C9cpyfLX.js"
-  },
-  "/assets/ProxyViewerContainer-BT8Ilsbs.js": {
+  "/assets/ProxyViewerContainer-BTYGkg36.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"acb39-85nxvdB88Xi+WqWWumJ/I5Pv3kI"',
-    "mtime": "2026-06-29T08:00:45.253Z",
-    "size": 707385,
-    "path": "../public/assets/ProxyViewerContainer-BT8Ilsbs.js"
+    "etag": '"adfba-Leh4MRDOCIBADBcckDDDPe8s/NM"',
+    "mtime": "2026-06-29T10:57:03.958Z",
+    "size": 712634,
+    "path": "../public/assets/ProxyViewerContainer-BTYGkg36.js"
   }
 };
 function readAsset(id) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tonyclaw/agent-inspector",
-  "version": "2.0.21",
+  "version": "2.0.23",
   "type": "module",
   "description": "Agent observability and knowledge capture layer for AI coding tools.",
   "license": "MIT",

package/src/cli/templates/codex-skill-onboard.ts

@@ -193,6 +193,11 @@ http://localhost:${port}/proxy
 
 For Anthropic-compatible tools, set \`ANTHROPIC_BASE_URL=http://localhost:${port}/proxy\`. For OpenAI-compatible tools, set \`OPENAI_BASE_URL=http://localhost:${port}/proxy\`.
 
+If Codex or another AI tool runs in a different container, VM, WSL distro, or host than Agent
+Inspector, \`localhost\` points at the tool's own environment. Replace \`localhost\` with an Inspector
+address reachable from that environment, then verify the network/firewall path before debugging
+provider credentials.
+
 For a Provider Test memory probe, run a provider test in the Agent Inspector UI:
 
 1. Open \`http://localhost:${port}\`.

package/src/cli/templates/skill-onboard.ts

@@ -422,6 +422,11 @@ mimo
 # Cursor / Cody — set the OpenAI base URL in each tool's settings panel to http://localhost:${port}/proxy
 \`\`\`
 
+**Container/network note:** If the AI tool runs in a different container, VM, WSL distro, or host
+than Agent Inspector, \`localhost\` points at the tool's own environment. Replace \`localhost\` with
+an Inspector address reachable from that environment, then verify the network/firewall path before
+debugging provider credentials.
+
 For a tool that wasn't auto-detected, fall through to the generic curl test in the next phase — the user can wire their tool later.
 
 > **PAUSE** — use \`AskUserQuestion\` with header \`Tool wired?\` and options \`["Yes, env var is set, claude is running", "No, I'm going to use the curl test instead"]\`. Wait for the answer.

package/src/components/OnboardingBanner.tsx

@@ -59,6 +59,10 @@ export function OnboardingBanner(): JSX.Element | null {
             use <code>/agent-inspector:onboard</code> in Claude Code or ask Codex to use{" "}
             <code>agent-inspector-onboard</code>.
           </li>
+          <li>
+            <strong>Container networking</strong>: if the AI tool runs outside this Inspector
+            container or host, replace <code>localhost</code> with a reachable address.
+          </li>
         </ol>
       </div>
       <button

package/src/components/ProxyViewer.tsx

@@ -944,6 +944,11 @@ export function ProxyViewer({
                 <CopyableCommand command="ANTHROPIC_BASE_URL=http://localhost:25947/proxy <your-tool>" />
                 <CopyableCommand command="OPENAI_BASE_URL=http://localhost:25947/proxy <your-tool>" />
               </div>
+              <p className="mx-auto max-w-xl text-xs leading-relaxed text-muted-foreground">
+                Container note: if your AI tool runs in a different container or host than Agent
+                Inspector, replace localhost with an address reachable from that tool and verify the
+                network/firewall path.
+              </p>
             </div>
           )
         ) : (

package/src/components/providers/ProviderCard.tsx

@@ -20,6 +20,8 @@ import {
   Clock,
   Copy,
   Check,
+  ChevronDown,
+  ChevronRight,
 } from "lucide-react";
 import type { ProviderConfig } from "../../proxy/providers";
 import { maskApiKey } from "../../lib/mask";
@@ -62,6 +64,150 @@ function isNotConfiguredState(result: ProviderTestState): result is { notConfigu
   return Object.prototype.hasOwnProperty.call(result, "notConfigured");
 }
 
+type ProviderFormatTestResults = TestResults["anthropic"];
+
+function hasText(value: string | undefined): value is string {
+  return value !== undefined && value.trim() !== "";
+}
+
+function formatHeaders(headers: Record<string, string> | undefined): string | undefined {
+  if (headers === undefined) {
+    return undefined;
+  }
+
+  const lines = Object.entries(headers).map(([name, value]) => `${name}: ${value}`);
+  if (lines.length === 0) {
+    return undefined;
+  }
+
+  return lines.join("\n");
+}
+
+function hasHeaderDetails(headers: Record<string, string> | undefined): boolean {
+  return formatHeaders(headers) !== undefined;
+}
+
+function hasDiagnosticDetails(result: TestResult): boolean {
+  const debug = result.debug;
+  return (
+    hasText(result.error?.hint) ||
+    hasText(result.error?.details) ||
+    hasText(result.rawResponse) ||
+    hasText(debug?.requestUrl) ||
+    hasText(debug?.requestBody) ||
+    hasText(debug?.responseBody) ||
+    hasHeaderDetails(debug?.requestHeaders) ||
+    hasHeaderDetails(debug?.responseHeaders) ||
+    debug?.responseStatus !== undefined
+  );
+}
+
+function DiagnosticSection({
+  title,
+  children,
+}: {
+  title: string;
+  children: ReactNode;
+}): JSX.Element {
+  return (
+    <div className="space-y-1">
+      <div className="font-medium text-foreground/80">{title}</div>
+      {children}
+    </div>
+  );
+}
+
+function DiagnosticPre({ value }: { value: string }): JSX.Element {
+  return (
+    <pre className="max-h-40 overflow-auto whitespace-pre-wrap break-all rounded-md bg-background/80 p-2 font-mono text-[11px] leading-relaxed text-foreground/80">
+      {value}
+    </pre>
+  );
+}
+
+function ProviderTestDetails({ result }: { result: TestResult }): JSX.Element {
+  const debug = result.debug;
+  const requestUrl = debug?.requestUrl;
+  const requestMethod = debug?.requestMethod ?? "POST";
+  const requestHeaders = formatHeaders(debug?.requestHeaders);
+  const responseHeaders = formatHeaders(debug?.responseHeaders);
+  const responseStatus =
+    debug?.responseStatus !== undefined
+      ? `${debug.responseStatus}${
+          hasText(debug.responseStatusText) ? ` ${debug.responseStatusText}` : ""
+        }`
+      : undefined;
+  const responseBody = debug?.responseBody ?? result.rawResponse;
+
+  return (
+    <div className="max-h-80 max-w-full space-y-2 overflow-auto rounded-md border bg-muted/50 p-2 text-xs text-muted-foreground shadow-sm sm:w-[520px]">
+      {hasText(result.error?.hint) && (
+        <DiagnosticSection title="Hint">
+          <div>{result.error.hint}</div>
+        </DiagnosticSection>
+      )}
+      {hasText(result.error?.details) && (
+        <DiagnosticSection title="Error">
+          <DiagnosticPre value={result.error.details} />
+        </DiagnosticSection>
+      )}
+      {hasText(requestUrl) && (
+        <DiagnosticSection title="Request">
+          <div className="rounded-md bg-background/80 p-2 font-mono text-[11px] break-all text-foreground/80">
+            {requestMethod} {requestUrl}
+          </div>
+        </DiagnosticSection>
+      )}
+      {requestHeaders !== undefined && (
+        <DiagnosticSection title="Request Headers">
+          <DiagnosticPre value={requestHeaders} />
+        </DiagnosticSection>
+      )}
+      {hasText(debug?.requestBody) && (
+        <DiagnosticSection title="Request Body">
+          <DiagnosticPre value={debug.requestBody} />
+        </DiagnosticSection>
+      )}
+      {hasText(responseStatus) && (
+        <DiagnosticSection title="Response Status">
+          <div className="rounded-md bg-background/80 p-2 font-mono text-[11px] text-foreground/80">
+            {responseStatus}
+          </div>
+        </DiagnosticSection>
+      )}
+      {responseHeaders !== undefined && (
+        <DiagnosticSection title="Response Headers">
+          <DiagnosticPre value={responseHeaders} />
+        </DiagnosticSection>
+      )}
+      {hasText(responseBody) && (
+        <DiagnosticSection title="Response Body">
+          <DiagnosticPre value={responseBody} />
+        </DiagnosticSection>
+      )}
+    </div>
+  );
+}
+
+function ProviderFormatTestStatus({
+  results,
+}: {
+  results: ProviderFormatTestResults;
+}): JSX.Element {
+  return (
+    <div className="flex min-w-0 flex-col gap-2">
+      <div className="flex min-w-0 flex-col gap-1">
+        <span className="text-[10px] text-muted-foreground">Non-stream</span>
+        <TestStatus result={results.nonStreaming} />
+      </div>
+      <div className="flex min-w-0 flex-col gap-1">
+        <span className="text-[10px] text-muted-foreground">Stream</span>
+        <TestStatus result={results.streaming} />
+      </div>
+    </div>
+  );
+}
+
 function getErrorIcon(type: ErrorType): JSX.Element {
   const iconProps = { className: "size-3", strokeWidth: 2 };
   switch (type) {
@@ -154,9 +300,8 @@ function TestStatus({ result }: { result: ProviderTestState }): JSX.Element {
 
   const error = result.error;
   const errorMessage = error?.message ?? "Connection failed";
-  const errorHint = error?.hint;
-  const errorDetails = error?.details;
   const errorType = error?.type ?? "unknown";
+  const hasDetails = hasDiagnosticDetails(result);
 
   return (
     <div className="flex flex-col gap-1 shrink-0">
@@ -170,33 +315,22 @@ function TestStatus({ result }: { result: ProviderTestState }): JSX.Element {
             <TooltipContent>Connection test failed</TooltipContent>
           </Tooltip>
         </TooltipProvider>
-        {errorDetails !== undefined && (
-          <TooltipProvider>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <button
-                  type="button"
-                  onClick={() => setShowDetails(!showDetails)}
-                  className="shrink-0 text-muted-foreground hover:text-foreground transition-colors"
-                >
-                  {showDetails ? <EyeOff className="size-3" /> : <Eye className="size-3" />}
-                </button>
-              </TooltipTrigger>
-              <TooltipContent>
-                {showDetails ? "Hide error details" : "Show detailed error information"}
-              </TooltipContent>
-            </Tooltip>
-          </TooltipProvider>
+        {hasDetails && (
+          <button
+            type="button"
+            onClick={() => setShowDetails((value) => !value)}
+            aria-expanded={showDetails}
+            aria-label={
+              showDetails ? "Hide provider test diagnostics" : "Show provider test diagnostics"
+            }
+            className="inline-flex h-5 shrink-0 items-center gap-1 rounded border border-border/70 bg-background/70 px-1.5 text-[10px] text-muted-foreground transition-colors hover:text-foreground"
+          >
+            {showDetails ? <EyeOff className="size-3" /> : <Eye className="size-3" />}
+            <span>{showDetails ? "Hide" : "Details"}</span>
+          </button>
         )}
       </div>
-      {showDetails && errorDetails !== undefined && (
-        <div className="text-xs text-muted-foreground bg-muted/50 rounded p-2 max-w-[300px]">
-          {errorHint !== undefined && <div className="mb-1">{errorHint}</div>}
-          <div className="font-mono whitespace-pre-wrap break-all text-red-400/80">
-            {errorDetails}
-          </div>
-        </div>
-      )}
+      {showDetails && hasDetails && <ProviderTestDetails result={result} />}
     </div>
   );
 }
@@ -411,22 +545,24 @@ export function ProviderCard({
       </div>
 
       {provider.anthropicBaseUrl !== undefined && provider.anthropicBaseUrl !== "" && (
-        <div className="flex items-center justify-between gap-2">
-          <div className="text-xs text-muted-foreground min-w-0 flex-1">
+        <div className="flex min-w-0 flex-col gap-2">
+          <div className="min-w-0 text-xs text-muted-foreground">
             <span className="font-medium">Anthropic:</span>{" "}
             <span className="truncate">{provider.anthropicBaseUrl}</span>
           </div>
-          {testResults && <TestStatus result={testResults.anthropic.nonStreaming} />}
+          {testResults !== undefined && (
+            <ProviderFormatTestStatus results={testResults.anthropic} />
+          )}
         </div>
       )}
 
       {provider.openaiBaseUrl !== undefined && provider.openaiBaseUrl !== "" && (
-        <div className="flex items-center justify-between gap-2">
-          <div className="text-xs text-muted-foreground min-w-0 flex-1">
+        <div className="flex min-w-0 flex-col gap-2">
+          <div className="min-w-0 text-xs text-muted-foreground">
             <span className="font-medium">OpenAI:</span>{" "}
             <span className="truncate">{provider.openaiBaseUrl}</span>
           </div>
-          {testResults && <TestStatus result={testResults.openai.nonStreaming} />}
+          {testResults !== undefined && <ProviderFormatTestStatus results={testResults.openai} />}
         </div>
       )}
 
@@ -443,7 +579,11 @@ export function ProviderCard({
             onClick={() => setShowModelResults((value) => !value)}
             className="text-xs text-muted-foreground hover:text-foreground transition-colors flex items-center gap-1"
           >
-            <span className="font-mono">{showModelResults ? "▾" : "▸"}</span>
+            {showModelResults ? (
+              <ChevronDown className="size-3" />
+            ) : (
+              <ChevronRight className="size-3" />
+            )}
             Model Test Results ({Object.keys(testResults.models).length})
           </button>
           {showModelResults && (
@@ -471,13 +611,13 @@ export function ProviderCard({
                       <td className="py-1 px-2 font-medium">{modelName}</td>
                       {provider.anthropicBaseUrl !== undefined &&
                         provider.anthropicBaseUrl !== "" && (
-                          <td className="py-1 px-2">
-                            <TestStatus result={modelResult.anthropic.nonStreaming} />
+                          <td className="py-1 px-2 align-top">
+                            <ProviderFormatTestStatus results={modelResult.anthropic} />
                           </td>
                         )}
                       {provider.openaiBaseUrl !== undefined && provider.openaiBaseUrl !== "" && (
-                        <td className="py-1 px-2">
-                          <TestStatus result={modelResult.openai.nonStreaming} />
+                        <td className="py-1 px-2 align-top">
+                          <ProviderFormatTestStatus results={modelResult.openai} />
                         </td>
                       )}
                     </tr>

package/src/components/providers/ProvidersPanel.tsx

@@ -19,6 +19,7 @@ import {
   ProviderTestResultsSchema,
   type ProviderTestResults as TestResults,
 } from "../../lib/providerTestContract";
+import { useStripConfig } from "../../lib/useStripConfig";
 
 export type { ProviderTestResults as TestResults } from "../../lib/providerTestContract";
 
@@ -41,7 +42,6 @@ const ModelMetadataRefreshResponseSchema = z.object({
   sourceUrl: z.string(),
 });
 
-const TEST_TIMEOUT_SECONDS = 30;
 const NETWORK_ERROR_MESSAGE = "Network error: could not reach the server. Is the proxy running?";
 
 type ProviderFormData = {
@@ -70,6 +70,15 @@ function createProviderPayload(data: ProviderFormData) {
   };
 }
 
+function getProviderTestTimeoutSeconds(
+  provider: ProviderConfig | undefined,
+  timeoutSecondsPerModel: number,
+): number {
+  const modelCount =
+    provider?.models?.map((model) => model.trim()).filter((model) => model !== "").length ?? 0;
+  return Math.max(1, modelCount) * timeoutSecondsPerModel;
+}
+
 async function persistProviderTestLog(providerId: string, results: TestResults): Promise<void> {
   if (results.models === undefined) {
     return;
@@ -126,6 +135,7 @@ export function ProvidersPanel({
   const [refreshingMetadataProviders, setRefreshingMetadataProviders] = useState<Set<string>>(
     new Set(),
   );
+  const { providerTestTimeoutSeconds } = useStripConfig();
   const listScrollRef = useRef<HTMLDivElement>(null);
   const highlightTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
@@ -239,9 +249,11 @@ export function ProvidersPanel({
 
       // Create abort controller for this test request
       const controller = new AbortController();
+      const provider = providers.find((candidate) => candidate.id === providerId);
+      const timeoutSeconds = getProviderTestTimeoutSeconds(provider, providerTestTimeoutSeconds);
 
       // Start countdown
-      let remaining = TEST_TIMEOUT_SECONDS;
+      let remaining = timeoutSeconds;
       setTestingTimeLeft(providerId, remaining);
       const intervalId = setInterval(() => {
         remaining--;
@@ -289,7 +301,13 @@ export function ProvidersPanel({
         updateTestingState(providerId, false);
       }
     },
-    [setTestingTimeLeft, updateTestResults, updateTestingState],
+    [
+      providerTestTimeoutSeconds,
+      providers,
+      setTestingTimeLeft,
+      updateTestResults,
+      updateTestingState,
+    ],
   );
 
   const refreshProviderMetadata = useCallback(