@tonyclaw/agent-inspector 2.0.20 → 2.0.22

package/.output/server/{_tanstack-start-manifest_v-EsubwO0A.mjs → _tanstack-start-manifest_v-CyzuAD8A.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-j3vS8rmP.js"], "assets": [] }, "/": { "filePath": "C:/Users/claw/workspace/agent-inspector/src/routes/index.tsx", "assets": [], "preloads": ["/assets/index-DrppF281.js", "/assets/ProxyViewerContainer-CX0-R0nn.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-CXtbrFTj.js", "/assets/ProxyViewerContainer-CX0-R0nn.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-j3vS8rmP.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-N-sjHJUM.js"], "assets": [] }, "/": { "filePath": "C:/Users/claw/workspace/agent-inspector/src/routes/index.tsx", "assets": [], "preloads": ["/assets/index-CUyRKgII.js", "/assets/ProxyViewerContainer-Dwhi4Q1c.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-b1KDnByv.js", "/assets/ProxyViewerContainer-Dwhi4Q1c.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-N-sjHJUM.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-29T03:33:25.469Z",
+    "mtime": "2026-06-29T10:13:59.057Z",
     "size": 5915,
     "path": "../public/assets/alibaba-TTwafVwX.svg"
   },
-  "/assets/CompareDrawer-CUqYtaH3.js": {
+  "/assets/index-CUyRKgII.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"49fe-KraDQpLt5tRlW2vEeEbyuIVJJB0"',
-    "mtime": "2026-06-29T03:33:25.470Z",
-    "size": 18942,
-    "path": "../public/assets/CompareDrawer-CUqYtaH3.js"
-  },
-  "/assets/index-DrppF281.js": {
-    "type": "text/javascript; charset=utf-8",
-    "etag": '"74-PWiIUKmAy+8tVucKz8Y++Zq/TB4"',
-    "mtime": "2026-06-29T03:33:25.470Z",
+    "etag": '"74-Blhwtv0C+J1LFr8yFFBCZDV3zwg"',
+    "mtime": "2026-06-29T10:13:59.057Z",
     "size": 116,
-    "path": "../public/assets/index-DrppF281.js"
+    "path": "../public/assets/index-CUyRKgII.js"
   },
-  "/assets/index-DynnYt7S.css": {
-    "type": "text/css; charset=utf-8",
-    "etag": '"1a2ef-ePBi5QJ1gmSGrdAGsfnIQPhloY0"',
-    "mtime": "2026-06-29T03:33:25.469Z",
-    "size": 107247,
-    "path": "../public/assets/index-DynnYt7S.css"
+  "/assets/CompareDrawer-NEdpe1wl.js": {
+    "type": "text/javascript; charset=utf-8",
+    "etag": '"49fe-y9gn69XtxO5KnrFt7knbaWGcfgk"',
+    "mtime": "2026-06-29T10:13:59.057Z",
+    "size": 18942,
+    "path": "../public/assets/CompareDrawer-NEdpe1wl.js"
   },
   "/assets/minimax-BPMzvuL-.jpeg": {
     "type": "image/jpeg",
     "etag": '"1b06-IwivU89ko5UTMUM1/t7hn4sQK9A"',
-    "mtime": "2026-06-29T03:33:25.469Z",
+    "mtime": "2026-06-29T10:13:59.057Z",
     "size": 6918,
     "path": "../public/assets/minimax-BPMzvuL-.jpeg"
   },
-  "/assets/main-j3vS8rmP.js": {
+  "/assets/ReplayDialog-DijzJwaQ.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"51726-WxMYHoXYU2RmYUuJ58Sd5WJmXpA"',
-    "mtime": "2026-06-29T03:33:25.469Z",
-    "size": 333606,
-    "path": "../public/assets/main-j3vS8rmP.js"
+    "etag": '"318c-lNBvN0WiZ9zXnNRPUHB9Uc3Q+U4"',
+    "mtime": "2026-06-29T10:13:59.057Z",
+    "size": 12684,
+    "path": "../public/assets/ReplayDialog-DijzJwaQ.js"
   },
-  "/assets/ReplayDialog-CPXNEqVg.js": {
+  "/assets/main-N-sjHJUM.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"318c-RaA0imio7vDfh+WjwmHGjN8SVV4"',
-    "mtime": "2026-06-29T03:33:25.470Z",
-    "size": 12684,
-    "path": "../public/assets/ReplayDialog-CPXNEqVg.js"
+    "etag": '"51726-Oiv87HUBZCp4NUFhL1cAZMdsJk4"',
+    "mtime": "2026-06-29T10:13:59.057Z",
+    "size": 333606,
+    "path": "../public/assets/main-N-sjHJUM.js"
   },
-  "/assets/RequestAnatomy-qkj8QgkY.js": {
+  "/assets/RequestAnatomy-CYbosGYy.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"4485-iZ6SrX8RGvjHiHxdO9mgwFRrKvM"',
-    "mtime": "2026-06-29T03:33:25.470Z",
+    "etag": '"4485-A1lqcM9CzkgAhkltbvT6xUyCtnk"',
+    "mtime": "2026-06-29T10:13:59.057Z",
     "size": 17541,
-    "path": "../public/assets/RequestAnatomy-qkj8QgkY.js"
+    "path": "../public/assets/RequestAnatomy-CYbosGYy.js"
   },
-  "/assets/ResponseView-BPNLZpuw.js": {
+  "/assets/ResponseView-B3dPM63X.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"30d0-/KB7ICZ9b0RrLW3SwWsa2CP6N3U"',
-    "mtime": "2026-06-29T03:33:25.470Z",
+    "etag": '"30d0-yf9eD5N2NhQxIYMoH1SUnd4oOgc"',
+    "mtime": "2026-06-29T10:13:59.057Z",
     "size": 12496,
-    "path": "../public/assets/ResponseView-BPNLZpuw.js"
+    "path": "../public/assets/ResponseView-B3dPM63X.js"
   },
-  "/assets/StreamingChunkSequence-DGs-YFXI.js": {
+  "/assets/StreamingChunkSequence-DYDx3xRY.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"d57-InLA/TOClxkee2v7SZORruEWM1o"',
-    "mtime": "2026-06-29T03:33:25.470Z",
+    "etag": '"d57-f9EtnNikrXbuhOm0uN5++yxdqVU"',
+    "mtime": "2026-06-29T10:13:59.057Z",
     "size": 3415,
-    "path": "../public/assets/StreamingChunkSequence-DGs-YFXI.js"
+    "path": "../public/assets/StreamingChunkSequence-DYDx3xRY.js"
+  },
+  "/assets/index-780zTVwp.css": {
+    "type": "text/css; charset=utf-8",
+    "etag": '"1a380-Lz+Shs13XyKSlh9PTaGE50w/BpU"',
+    "mtime": "2026-06-29T10:13:59.057Z",
+    "size": 107392,
+    "path": "../public/assets/index-780zTVwp.css"
+  },
+  "/assets/_sessionId-b1KDnByv.js": {
+    "type": "text/javascript; charset=utf-8",
+    "etag": '"d2-2mMUMRPxx6mDkse9IY1TOO0xQxM"',
+    "mtime": "2026-06-29T10:13:59.057Z",
+    "size": 210,
+    "path": "../public/assets/_sessionId-b1KDnByv.js"
   },
   "/assets/zhipuai-BPNAnxo-.svg": {
     "type": "image/svg+xml",
     "etag": '"2bf8-hNaLCTi89nOFCsIIfWpP/jrfo0s"',
-    "mtime": "2026-06-29T03:33:25.469Z",
+    "mtime": "2026-06-29T10:13:59.057Z",
     "size": 11256,
     "path": "../public/assets/zhipuai-BPNAnxo-.svg"
   },
-  "/assets/_sessionId-CXtbrFTj.js": {
-    "type": "text/javascript; charset=utf-8",
-    "etag": '"d2-m35+VfqOLk1SUxkHhqlew2sUfY4"',
-    "mtime": "2026-06-29T03:33:25.470Z",
-    "size": 210,
-    "path": "../public/assets/_sessionId-CXtbrFTj.js"
-  },
   "/assets/qwen-CONDcHqt.png": {
     "type": "image/png",
     "etag": '"572c3-cdJAPaHdOvFCGzuaQjagdgOu6XE"',
-    "mtime": "2026-06-29T03:33:25.469Z",
+    "mtime": "2026-06-29T10:13:59.057Z",
     "size": 357059,
     "path": "../public/assets/qwen-CONDcHqt.png"
   },
-  "/assets/ProxyViewerContainer-CX0-R0nn.js": {
+  "/assets/ProxyViewerContainer-Dwhi4Q1c.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"ac117-tattOCpYhJ1T+dg4a6JupBjaRJQ"',
-    "mtime": "2026-06-29T03:33:25.470Z",
-    "size": 704791,
-    "path": "../public/assets/ProxyViewerContainer-CX0-R0nn.js"
+    "etag": '"adfba-7oCIiP/M+eYpRHnO3/abH2UghkE"',
+    "mtime": "2026-06-29T10:13:59.058Z",
+    "size": 712634,
+    "path": "../public/assets/ProxyViewerContainer-Dwhi4Q1c.js"
   }
 };
 function readAsset(id) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tonyclaw/agent-inspector",
-  "version": "2.0.20",
+  "version": "2.0.22",
   "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>