@tonyclaw/llm-inspector 1.7.9 → 1.9.0

package/.output/server/{_tanstack-start-manifest_v-BF6ge6dS.mjs → _tanstack-start-manifest_v-C7hQOzvX.mjs}

@@ -1,4 +1,4 @@
-const tsrStartManifest = () => ({ "routes": { "__root__": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/__root.tsx", "children": ["/", "/api/health", "/api/logs", "/api/models", "/api/providers", "/api/sessions", "/proxy/$", "/api/config/paths"], "preloads": ["/assets/main-BrU8NdGQ.js"], "assets": [] }, "/": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/index.tsx", "assets": [], "preloads": ["/assets/index-CB8ZIeEk.js"] }, "/api/health": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/health.ts" }, "/api/logs": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/logs.ts", "children": ["/api/logs/$id", "/api/logs/stream"] }, "/api/models": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/models.ts" }, "/api/providers": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/providers.ts", "children": ["/api/providers/$providerId", "/api/providers/export", "/api/providers/import"] }, "/api/sessions": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/sessions.ts" }, "/proxy/$": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/proxy/$.ts" }, "/api/config/paths": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/config.paths.ts" }, "/api/logs/$id": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/logs.$id.ts", "children": ["/api/logs/$id/chunks", "/api/logs/$id/replay"] }, "/api/logs/stream": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/logs.stream.ts" }, "/api/providers/$providerId": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/providers.$providerId.ts", "children": ["/api/providers/$providerId/test"] }, "/api/providers/export": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/providers.export.ts" }, "/api/providers/import": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/providers.import.ts" }, "/api/logs/$id/chunks": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/logs.$id.chunks.ts" }, "/api/logs/$id/replay": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/logs.$id.replay.ts" }, "/api/providers/$providerId/test": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/providers.$providerId.test.ts" } }, "clientEntry": "/assets/main-BrU8NdGQ.js" });
+const tsrStartManifest = () => ({ "routes": { "__root__": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/__root.tsx", "children": ["/", "/api/health", "/api/logs", "/api/models", "/api/providers", "/api/sessions", "/proxy/$", "/api/config/paths"], "preloads": ["/assets/main-Cu0oTDfX.js"], "assets": [] }, "/": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/index.tsx", "assets": [], "preloads": ["/assets/index-DyKLPMPn.js"] }, "/api/health": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/health.ts" }, "/api/logs": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/logs.ts", "children": ["/api/logs/$id", "/api/logs/stream"] }, "/api/models": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/models.ts" }, "/api/providers": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/providers.ts", "children": ["/api/providers/$providerId", "/api/providers/export", "/api/providers/import"] }, "/api/sessions": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/sessions.ts" }, "/proxy/$": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/proxy/$.ts" }, "/api/config/paths": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/config.paths.ts" }, "/api/logs/$id": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/logs.$id.ts", "children": ["/api/logs/$id/chunks", "/api/logs/$id/replay"] }, "/api/logs/stream": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/logs.stream.ts" }, "/api/providers/$providerId": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/providers.$providerId.ts", "children": ["/api/providers/$providerId/test"] }, "/api/providers/export": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/providers.export.ts" }, "/api/providers/import": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/providers.import.ts" }, "/api/logs/$id/chunks": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/logs.$id.chunks.ts" }, "/api/logs/$id/replay": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/logs.$id.replay.ts" }, "/api/providers/$providerId/test": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/providers.$providerId.test.ts" } }, "clientEntry": "/assets/main-Cu0oTDfX.js" });
 export {
   tsrStartManifest
 };

package/.output/server/index.mjs

@@ -97,54 +97,54 @@ const headers = ((m) => function headersRouteRule(event) {
   }
 });
 const assets = {
-  "/assets/index-B3RwBPLW.css": {
-    "type": "text/css; charset=utf-8",
-    "etag": '"10c74-aXacU4DRFVsUwcC5jHnjoPRSlTA"',
-    "mtime": "2026-06-04T00:12:14.535Z",
-    "size": 68724,
-    "path": "../public/assets/index-B3RwBPLW.css"
-  },
   "/assets/alibaba-TTwafVwX.svg": {
     "type": "image/svg+xml",
     "etag": '"171b-6dyV5K8QjiaY35sN9qNprh9zDIs"',
-    "mtime": "2026-06-04T00:12:14.535Z",
+    "mtime": "2026-06-04T03:52:13.283Z",
     "size": 5915,
     "path": "../public/assets/alibaba-TTwafVwX.svg"
   },
+  "/assets/index-DdJSLfxK.css": {
+    "type": "text/css; charset=utf-8",
+    "etag": '"10da0-LYeZ5d/vwqh4bAnuP/9hr6Wka6g"',
+    "mtime": "2026-06-04T03:52:13.283Z",
+    "size": 69024,
+    "path": "../public/assets/index-DdJSLfxK.css"
+  },
   "/assets/minimax-BPMzvuL-.jpeg": {
     "type": "image/jpeg",
     "etag": '"1b06-IwivU89ko5UTMUM1/t7hn4sQK9A"',
-    "mtime": "2026-06-04T00:12:14.537Z",
+    "mtime": "2026-06-04T03:52:13.278Z",
     "size": 6918,
     "path": "../public/assets/minimax-BPMzvuL-.jpeg"
   },
-  "/assets/main-BrU8NdGQ.js": {
-    "type": "text/javascript; charset=utf-8",
-    "etag": '"4db57-Aw3zM46XAKLPcPLc9vLSzFsuUjI"',
-    "mtime": "2026-06-04T00:12:14.537Z",
-    "size": 318295,
-    "path": "../public/assets/main-BrU8NdGQ.js"
-  },
   "/assets/zhipuai-BPNAnxo-.svg": {
     "type": "image/svg+xml",
     "etag": '"2bf8-hNaLCTi89nOFCsIIfWpP/jrfo0s"',
-    "mtime": "2026-06-04T00:12:14.535Z",
+    "mtime": "2026-06-04T03:52:13.283Z",
     "size": 11256,
     "path": "../public/assets/zhipuai-BPNAnxo-.svg"
   },
+  "/assets/main-Cu0oTDfX.js": {
+    "type": "text/javascript; charset=utf-8",
+    "etag": '"50591-/K5L0AnXTcumA7dHm7kmA5HXlCE"',
+    "mtime": "2026-06-04T03:52:13.283Z",
+    "size": 329105,
+    "path": "../public/assets/main-Cu0oTDfX.js"
+  },
   "/assets/qwen-CONDcHqt.png": {
     "type": "image/png",
     "etag": '"572c3-cdJAPaHdOvFCGzuaQjagdgOu6XE"',
-    "mtime": "2026-06-04T00:12:14.535Z",
+    "mtime": "2026-06-04T03:52:13.283Z",
     "size": 357059,
     "path": "../public/assets/qwen-CONDcHqt.png"
   },
-  "/assets/index-CB8ZIeEk.js": {
+  "/assets/index-DyKLPMPn.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"840e2-X78/yEmQlQ7ABa9KL5bfVykPAUY"',
-    "mtime": "2026-06-04T00:12:14.537Z",
-    "size": 540898,
-    "path": "../public/assets/index-CB8ZIeEk.js"
+    "etag": '"84a31-iF3/oGIdY77bqBWoGeM9Ctiyids"',
+    "mtime": "2026-06-04T03:52:13.284Z",
+    "size": 543281,
+    "path": "../public/assets/index-DyKLPMPn.js"
   }
 };
 function readAsset(id) {

package/README.md

@@ -10,63 +10,22 @@ llm-inspector 是一个 LLM API 透明代理，能够捕获 AI 编程工具（Cl
 
 ---
 
-## 核心特性 / Features
+## 文档目录
 
-### 请求重放调试 / Request Replay
-
-![Replay](docs/Replay.png)
-
-回放任意历史请求，快速复现问题。支持流式/非流式两种模式。
-
-### 实时 SSE 流更新 / Real-Time SSE Streaming
-
-SSE 流式响应实时推送，无需轮询，即时查看每个数据块。
-
-### 健康检查 / Health Check
-
-`GET /api/health` 端点，支持 Docker Compose 健康检查和容器编排。
-
-### 支持多种 AI 编程工具 / Multiple AI Coding Tools
-
-```bash
-# Claude Code
-ANTHROPIC_BASE_URL=http://localhost:25947/proxy claude
-
-# OpenCode
-LLM_BASE_URL=http://localhost:25947/proxy opencode
-
-# Cursor, Cody 等 / etc.
-ANTHROPIC_BASE_URL=http://localhost:25947/proxy <your-tool>
-```
-
-### 支持双 API 格式 / Dual API Format Support
-
-| API 格式 | 端点 | 工具 |
-|----------|------|------|
-| Anthropic | `/v1/messages` | Claude Code 等 |
-| OpenAI | `/v1/chat/completions` | OpenAI、DeepSeek 等 |
-
-### 多 LLM 提供商支持 / Multi-Provider Support
-
-| 提供商 | 模型前缀 | API 格式 |
-|--------|---------|----------|
-| Anthropic | `claude-*` | Anthropic |
-| OpenAI | `gpt-*`, `o1-*`, `o3-*` | OpenAI |
-| DeepSeek | `deepseek-*` | OpenAI |
-| MiniMax | `MiniMax-*` | Anthropic/OpenAI |
-| Qwen | `qwen-*` | OpenAI |
-| ZhipuAI | `glm-*` | OpenAI |
+- [特性 (Features)](docs/Features.md) - 核心功能介绍
+- [安装 (Installation)](docs/Installation.md) - 安装指南
+- [使用 (Usage)](docs/Usage.md) - 详细使用说明
+- [架构 (Architecture)](docs/Architecture.md) - 系统架构
+- [开发 (Development)](docs/Development.md) - 开发指南
 
 ---
 
-## 快速开始 / Quick Start
+## 快速开始
 
-### npm 安装（推荐）
+### npm 安装
 
 ```bash
 npm install -g @tonyclaw/llm-inspector
-
-# 启动
 llm-inspector
 ```
 
@@ -79,170 +38,10 @@ docker-compose up -d
 ### 源码运行
 
 ```bash
-# 安装依赖
 bun install
-
-# 启动开发服务器
 bun run dev
 ```
 
-设置环境变量并启动 AI 编程工具：
-
-```bash
-# Claude Code
-ANTHROPIC_BASE_URL=http://localhost:25947/proxy claude
-
-# OpenCode
-LLM_BASE_URL=http://localhost:25947/proxy opencode
-```
-
 打开浏览器访问 http://localhost:25947 查看实时捕获的请求。
 
 ![Proxy Hello](docs/Proxy%20Hello.png)
-
----
-
-## Docker 部署 / Docker Deployment
-
-```bash
-# 构建并启动
-docker-compose up -d
-
-# 查看日志
-docker-compose logs -f
-
-# 停止
-docker-compose down
-```
-
-容器默认暴露 `25947` 端口，包含健康检查，可直接接入 Docker Compose 或 Kubernetes。
-
----
-
-## 实时仪表盘 / Real-Time Dashboard
-
-### 日志列表 / Log List
-
-虚拟滚动列表展示每个被代理的请求，每条记录显示：
-
-- **模型标签** — 如 `claude-sonnet-4-20250514`
-- **API 格式** — Anthropic（橙色）/ OpenAI（蓝色）
-- **响应状态** — 绿色 2xx / 黄色 4xx / 红色 5xx
-- **Token 用量** — 输入 / 输出，自动 K/M 格式化
-- **流式标识** — 区分流式与非流式响应
-
-### 解析响应视图 / Parsed Response View
-
-**Anthropic 响应：**
-- 模型、停止原因、Token 用量
-- 内容块分类渲染：文本（Markdown）、思考（可折叠紫色块）、工具调用（可折叠蓝色块）
-
-**OpenAI 响应：**
-- 模型、结束原因、Token 用量
-- 推理内容（紫色块）、文本、函数调用
-
-### SSE 流式数据 / SSE Streaming
-
-![Full Mode](docs/FULL.png)
-
-流式响应显示：
-- **SSE 数据块面板** — 懒加载，按索引分组
-- **JSON 树查看器** — 类型颜色编码（字符串绿/数字黄/布尔蓝）
-- **重建响应** — 从 SSE 片段重建完整 JSON
-
-### 提供商测试 / Provider Testing
-
-![Provider Test](docs/Provider%20Test.png)
-
-内置连接测试功能，同时测试非流式和流式连接，测试结果直接显示在日志列表中。
-
----
-
-## 架构 / Architecture
-
-```
-AI Coding Tool  →  llm-inspector (:25947/proxy/*)  →  LLM Provider
-                                  ↓
-                            Web UI (:25947)
-```
-
-| 模块 | 路径 | 职责 |
-|------|------|------|
-| 代理处理器 | `src/proxy/handler.ts` | HTTP 代理、请求/响应捕获、SSE 流式 |
-| 格式处理器 | `src/proxy/formats/` | Anthropic/OpenAI 格式抽象 |
-| 提供商管理 | `src/proxy/providers.ts` | 多提供商配置存储 |
-| 格式协议 | `src/proxy/formats/anthropic/` `src/proxy/formats/openai/` | 格式特定解析器 |
-| 客户端追踪 | `src/proxy/socketTracker.ts` | PID、CWD、项目名 |
-| 日志存储 | `src/proxy/logger.ts`, `store.ts` | 内存缓冲区 + 磁盘持久化 |
-
----
-
-## 命令行 / CLI
-
-```bash
-llm-inspector                    # 启动服务
-llm-inspector --port 3000       # 指定端口
-llm-inspector --no-open         # 禁止自动打开浏览器
-```
-
-| 参数 | 默认值 | 说明 |
-|------|--------|------|
-| `--port`, `-p` | `25947` | 监听端口 |
-| `--open` | `true` | 启动时自动打开浏览器 |
-
-### 环境变量
-
-| 变量 | 默认值 | 说明 |
-|------|--------|------|
-| `PORT` | `25947` | 服务器端口 |
-| `LOG_DIR` | `~/.llm-inspector/logs/` | 日志存储目录 |
-| `LOG_RETENTION_DAYS` | `7` | 日志保留天数 |
-| `CHUNKS_DIR` | `~/.llm-inspector/chunks/` | SSE 数据块存储 |
-
----
-
-## 直接测试 / Direct Testing
-
-不通过 AI 编程工具，直接用 curl 测试提供商连接：
-
-```bash
-# Anthropic
-curl http://localhost:25947/proxy/v1/messages \
-  -H 'content-type: application/json' \
-  -d '{"model":"claude-sonnet-4-20250514","max_tokens":100,"messages":[{"role":"user","content":"hello"}]}'
-
-# OpenAI
-curl http://localhost:25947/proxy/v1/chat/completions \
-  -H 'content-type: application/json' \
-  -d '{"model":"gpt-4o-mini","max_tokens":100,"messages":[{"role":"user","content":"hello"}]}'
-```
-
----
-
-## 开发 / Development
-
-```bash
-# 类型检查、Lint、格式化
-bun run check
-
-# 生产构建
-bun run build
-```
-
----
-
-## 发布 / Publishing
-
-```bash
-# 1. 更新版本号
-git commit -m "chore: bump version"
-git tag v<version>
-
-# 2. 推送代码和标签
-git push origin main --tags
-
-# 3. 发布到 npm
-npm publish --access public
-```
-
-包名：`@tonyclaw/llm-inspector`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tonyclaw/llm-inspector",
-  "version": "1.7.9",
+  "version": "1.9.0",
   "type": "module",
   "description": "LLM API proxy inspector — captures and displays requests/responses from AI coding tools in a web UI",
   "license": "MIT",
@@ -61,6 +61,7 @@
     "react": "^19",
     "react-dom": "^19",
     "react-markdown": "^10.1.0",
+    "swr": "^2.4.1",
     "tailwind-merge": "^3.4.0",
     "tw-animate-css": "^1.4.0",
     "zod": "^4.3.6"

package/src/components/ProxyViewer.tsx

@@ -3,6 +3,7 @@ import { useVirtualizer } from "@tanstack/react-virtual";
 import { Download, LayoutGrid, List } from "lucide-react";
 import type { CapturedLog } from "../proxy/schemas";
 import { exportLogsAsZip } from "../lib/export-logs";
+import packageJson from "../../package.json";
 import {
   ConversationGroup,
   groupLogsByConversation,
@@ -142,6 +143,7 @@ export function ProxyViewer({
       {/* Header */}
       <div className="flex items-center gap-4 mb-4 px-6 pt-6">
         <h1 className="text-lg font-bold flex-1">LLM Proxy Inspector</h1>
+        <span className="text-muted-foreground text-xs font-mono">v{packageJson.version}</span>
         <div className="flex items-center border border-border rounded-md overflow-hidden">
           <button
             type="button"

package/src/components/ProxyViewerContainer.tsx

@@ -63,6 +63,7 @@ export function ProxyViewerContainer(): JSX.Element {
   const [viewMode, setViewMode] = useState<"simple" | "full">("simple");
   const [error, setError] = useState<string | null>(null);
   const eventSourceRef = useRef<EventSource | null>(null);
+  const reconnectTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   const fetchSessionsAndModels = useCallback(async () => {
     try {
@@ -152,8 +153,12 @@ export function ProxyViewerContainer(): JSX.Element {
     es.onerror = () => {
       setError("SSE connection lost, reconnecting...");
       es.close();
+      // Clear any existing reconnect timeout
+      if (reconnectTimeoutRef.current !== null) {
+        clearTimeout(reconnectTimeoutRef.current);
+      }
       // Reconnect after 3 seconds
-      setTimeout(connectSSE, 3000);
+      reconnectTimeoutRef.current = setTimeout(connectSSE, 3000);
     };
 
     void fetchSessionsAndModels();
@@ -166,6 +171,10 @@ export function ProxyViewerContainer(): JSX.Element {
         eventSourceRef.current.close();
         eventSourceRef.current = null;
       }
+      if (reconnectTimeoutRef.current !== null) {
+        clearTimeout(reconnectTimeoutRef.current);
+        reconnectTimeoutRef.current = null;
+      }
     };
   }, [connectSSE]);
 

package/src/components/providers/ProviderCard.tsx

@@ -20,7 +20,7 @@ import {
 } from "lucide-react";
 import type { ProviderConfig } from "../../proxy/providers";
 
-// Known provider documentation links
+// Known provider documentation links (fallback when apiDocsUrl is not configured)
 const KNOWN_PROVIDER_DOCS: Record<string, string> = {
   deepseek: "https://api-docs.deepseek.com/zh-cn/",
 };
@@ -49,9 +49,11 @@ type TestResult = {
 
 type NotConfigured = { notConfigured: true };
 
+type Testing = { testing: true };
+
 type StreamingTestResults = {
-  nonStreaming: TestResult | NotConfigured;
-  streaming: TestResult | NotConfigured;
+  nonStreaming: TestResult | NotConfigured | Testing;
+  streaming: TestResult | NotConfigured | Testing;
 };
 
 type TestResults = {
@@ -74,10 +76,17 @@ function maskApiKey(apiKey: string): string {
   return apiKey.slice(0, 4) + "••••••••" + apiKey.slice(-4);
 }
 
-function hasSuccessField(result: TestResult | NotConfigured): result is TestResult {
+function hasSuccessField(result: TestResult | NotConfigured | Testing): result is TestResult {
   return Object.prototype.hasOwnProperty.call(result, "success");
 }
 
+// Using Object.prototype.hasOwnProperty.call to avoid 'in' operator
+function isNotConfiguredState(
+  result: TestResult | NotConfigured | Testing,
+): result is NotConfigured {
+  return Object.prototype.hasOwnProperty.call(result, "notConfigured");
+}
+
 function getErrorIcon(type: ErrorType): JSX.Element {
   const iconProps = { className: "size-3", strokeWidth: 2 };
   switch (type) {
@@ -102,24 +111,28 @@ function getErrorIcon(type: ErrorType): JSX.Element {
   }
 }
 
-function TestStatus({
-  result,
-  isTesting,
-}: {
-  result: TestResult | NotConfigured;
-  isTesting?: boolean;
-}): JSX.Element {
+function TestStatus({ result }: { result: TestResult | NotConfigured | Testing }): JSX.Element {
   if (!hasSuccessField(result)) {
+    // Not TestResult - check if NotConfigured or Testing
+    if (isNotConfiguredState(result)) {
+      return (
+        <div className="flex items-center gap-1 text-xs text-muted-foreground shrink-0">
+          <Minus className="size-3" />
+          <span>Not configured</span>
+        </div>
+      );
+    }
+    // Must be Testing state
     return (
-      <div className="flex items-center gap-1 text-xs text-muted-foreground">
-        <Minus className="size-3" />
-        <span>Not configured</span>
+      <div className="flex items-center gap-1 text-xs text-muted-foreground shrink-0">
+        <RotateCw className="size-3 animate-spin" />
+        <span>Testing...</span>
       </div>
     );
   }
   if (result.success) {
     return (
-      <div className="flex items-center gap-1 text-xs text-green-600">
+      <div className="flex items-center gap-1 text-xs text-green-600 shrink-0">
         <CheckCircle className="size-3" />
         <span>Connected</span>
       </div>
@@ -131,20 +144,16 @@ function TestStatus({
   const errorHint = error?.hint;
   const errorType = error?.type ?? "unknown";
 
+  // Combine message and hint in a single line for consistent layout
+  const fullMessage = errorHint !== undefined ? `${errorMessage} — ${errorHint}` : errorMessage;
+
   return (
-    <div className="flex flex-col gap-1 min-w-0">
-      <div
-        className="flex items-center gap-1 text-xs text-red-600 min-w-0"
-        title={error?.details ?? errorMessage}
-      >
-        {getErrorIcon(errorType)}
-        <span className="truncate">{errorMessage}</span>
-      </div>
-      {errorHint !== undefined && (
-        <div className="text-xs text-muted-foreground pl-4 truncate" title={errorHint}>
-          {errorHint}
-        </div>
-      )}
+    <div
+      className="flex items-center gap-1 text-xs text-red-600 shrink-0 max-w-[200px]"
+      title={error?.details ?? fullMessage}
+    >
+      {getErrorIcon(errorType)}
+      <span className="truncate">{errorMessage}</span>
     </div>
   );
 }
@@ -160,6 +169,13 @@ export function ProviderCard({
 }: ProviderCardProps): JSX.Element {
   const [showApiKey, setShowApiKey] = useState(false);
 
+  // Get docs URL: use provider.apiDocsUrl if configured, otherwise check KNOWN_PROVIDER_DOCS
+  const docsUrl =
+    provider.apiDocsUrl ??
+    Object.entries(KNOWN_PROVIDER_DOCS).find(([keyword]) =>
+      provider.name.toLowerCase().includes(keyword),
+    )?.[1];
+
   return (
     <div className="border rounded-lg p-4 flex flex-col gap-3 bg-card">
       <div className="flex items-start justify-between gap-2">
@@ -170,20 +186,17 @@ export function ProviderCard({
               : provider.name}
           </span>
         </div>
-        {Object.entries(KNOWN_PROVIDER_DOCS).map(([keyword, url]) =>
-          provider.name.toLowerCase().includes(keyword) ? (
-            <a
-              key={keyword}
-              href={url}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-muted-foreground hover:text-foreground transition-colors flex items-center gap-1 text-xs"
-              title="View API documentation"
-            >
-              <ExternalLink className="size-3" />
-              <span className="sr-only">Docs</span>
-            </a>
-          ) : null,
+        {docsUrl !== undefined && (
+          <a
+            href={docsUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-muted-foreground hover:text-foreground transition-colors flex items-center gap-1 text-xs"
+            title="View API documentation"
+          >
+            <ExternalLink className="size-3" />
+            <span className="sr-only">Docs</span>
+          </a>
         )}
       </div>
 
@@ -207,9 +220,7 @@ export function ProviderCard({
             <span className="font-medium">Anthropic:</span>{" "}
             <span className="truncate">{provider.anthropicBaseUrl}</span>
           </div>
-          {testResults && (
-            <TestStatus result={testResults.anthropic.nonStreaming} isTesting={isTesting} />
-          )}
+          {testResults && <TestStatus result={testResults.anthropic.nonStreaming} />}
         </div>
       )}
 
@@ -219,9 +230,7 @@ export function ProviderCard({
             <span className="font-medium">OpenAI:</span>{" "}
             <span className="truncate">{provider.openaiBaseUrl}</span>
           </div>
-          {testResults && (
-            <TestStatus result={testResults.openai.nonStreaming} isTesting={isTesting} />
-          )}
+          {testResults && <TestStatus result={testResults.openai.nonStreaming} />}
         </div>
       )}
 

package/src/components/providers/ProviderForm.tsx

@@ -41,6 +41,7 @@ type ProviderFormProps = {
     model?: string;
     format: "anthropic" | "openai";
     baseUrl?: string;
+    apiDocsUrl?: string;
   }) => void;
   onCancel: () => void;
 };
@@ -51,6 +52,7 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
   const [model, setModel] = useState(provider?.model ?? "");
   const [format, setFormat] = useState<"anthropic" | "openai">(provider?.format ?? "anthropic");
   const [baseUrl, setBaseUrl] = useState(provider?.baseUrl ?? "");
+  const [apiDocsUrl, setApiDocsUrl] = useState(provider?.apiDocsUrl ?? "");
   const [errors, setErrors] = useState<Record<string, string>>({});
   const [isSubmitting, setIsSubmitting] = useState(false);
 
@@ -69,6 +71,7 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
       setModel(provider.model ?? "");
       setFormat(provider.format ?? "anthropic");
       setBaseUrl(provider.baseUrl ?? "");
+      setApiDocsUrl(provider.apiDocsUrl ?? "");
       setManualBaseUrlOverride(false);
     }
   }, [provider]);
@@ -135,6 +138,7 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
         model: model.trim() || undefined,
         format,
         baseUrl: baseUrl.trim() || undefined,
+        apiDocsUrl: apiDocsUrl.trim() || undefined,
       });
     } finally {
       setIsSubmitting(false);
@@ -246,6 +250,23 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
         <p className="text-xs text-muted-foreground">Base URL for the provider API.</p>
       </div>
 
+      <div className="space-y-2">
+        <label htmlFor="provider-api-docs-url" className="text-sm font-medium">
+          API Docs URL
+        </label>
+        <input
+          id="provider-api-docs-url"
+          type="text"
+          value={apiDocsUrl}
+          onChange={(e) => setApiDocsUrl(e.target.value)}
+          placeholder="https://api.example.com/docs"
+          className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:border-ring focus-visible:outline-ring focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50"
+        />
+        <p className="text-xs text-muted-foreground">
+          Optional API documentation URL. If not set, uses known provider docs.
+        </p>
+      </div>
+
       <div className="flex gap-2 justify-end pt-2">
         <Button type="button" variant="outline" onClick={onCancel} disabled={isSubmitting}>
           Cancel

package/src/components/providers/ProviderLogo.tsx

@@ -50,7 +50,12 @@ const AnthropicLogo = React.memo(
 
 const OpenAILogo = React.memo(
   ({ className }: { className?: string }): JSX.Element => (
-    <img src={OpenAILogoSvg} alt="OpenAI" className={className} style={sizeStyle} />
+    <img
+      src={OpenAILogoSvg}
+      alt="OpenAI"
+      className={className}
+      style={{ ...sizeStyle, background: "white", borderRadius: "4px" }}
+    />
   ),
 );