@tonyclaw/llm-inspector 1.9.5 → 1.9.7

package/.output/server/_ssr/{router-pQnqiQaV.mjs → router-CXva8nm-.mjs}

@@ -9,11 +9,9 @@ import { randomUUID } from "crypto";
 import { exec } from "node:child_process";
 import { promisify } from "node:util";
 import { o as object, s as string, _ as _enum, u as union, a as array, n as number, d as discriminatedUnion, l as literal, b as boolean, r as record, c as lazy, e as _null, f as unknown } from "../_libs/zod.mjs";
-import "../_libs/tiny-warning.mjs";
 import "../_libs/tanstack__router-core.mjs";
-import "../_libs/cookie-es.mjs";
 import "../_libs/tanstack__history.mjs";
-import "../_libs/tiny-invariant.mjs";
+import "../_libs/cookie-es.mjs";
 import "../_libs/seroval.mjs";
 import "../_libs/seroval-plugins.mjs";
 import "node:stream/web";
@@ -44,7 +42,7 @@ import "../_libs/debounce-fn.mjs";
 import "../_libs/mimic-function.mjs";
 import "../_libs/semver.mjs";
 import "../_libs/uint8array-extras.mjs";
-const appCss = "/assets/index-DdJSLfxK.css";
+const appCss = "/assets/index-Cc1oV0hF.css";
 const Route$g = createRootRoute({
   head: () => ({
     meta: [
@@ -68,7 +66,7 @@ function RootDocument({ children }) {
     ] })
   ] });
 }
-const $$splitComponentImporter = () => import("./index-Ou5OlbF7.mjs");
+const $$splitComponentImporter = () => import("./index-Lxfn0bBE.mjs");
 const Route$f = createFileRoute("/")({
   component: lazyRouteComponent($$splitComponentImporter, "component")
 });
@@ -527,7 +525,11 @@ const OpenAIMessage = object({
   role: _enum(["system", "user", "assistant", "tool"]),
   content: OpenAIMessageContent,
   name: string().optional(),
-  reasoning_content: string().optional()
+  reasoning_content: string().optional(),
+  thinking: string().optional(),
+  // Some providers use 'thinking' field
+  think: string().optional()
+  // MiniMax uses 'think' field
 });
 const OpenAIFunctionCall = object({
   name: string(),
@@ -563,6 +565,10 @@ const OpenAIChoiceDelta = object({
   role: _enum(["assistant"]).optional(),
   content: string().nullable().optional(),
   reasoning_content: string().nullable().optional(),
+  thinking: string().nullable().optional(),
+  // Some providers use 'thinking' field
+  think: string().nullable().optional(),
+  // MiniMax uses 'think' field
   function_call: object({ name: string().optional(), arguments: string().optional() }).nullable().optional(),
   tool_calls: array(
     object({
@@ -582,6 +588,10 @@ const OpenAIChoice = object({
     role: _enum(["assistant"]),
     content: string().nullable(),
     reasoning_content: string().optional(),
+    thinking: string().optional(),
+    // Some providers use 'thinking' field in message
+    think: string().optional(),
+    // MiniMax uses 'think' field in message
     function_call: object({ name: string(), arguments: string() }).nullable().optional()
   }).optional(),
   delta: OpenAIChoiceDelta.optional(),
@@ -1372,6 +1382,13 @@ function extractOpenAIStream(raw, log, fallbackModel, collectChunks = true) {
         if (delta.reasoning_content !== void 0 && delta.reasoning_content !== null) {
           reasoningContent += delta.reasoning_content;
         }
+        if (delta.thinking !== void 0 && delta.thinking !== null) {
+          reasoningContent += delta.thinking;
+        }
+        const thinkValue = delta.think;
+        if (thinkValue !== void 0 && thinkValue !== null) {
+          reasoningContent += thinkValue;
+        }
         if (choice.finish_reason !== void 0 && choice.finish_reason !== null) {
           finishReason = choice.finish_reason;
         }
@@ -2112,7 +2129,9 @@ async function handleProxy(req) {
     return new Response("Forbidden: unsupported provider", { status: STATUS_FORBIDDEN });
   }
   let formatHandler;
-  if (matchedProviderConfig?.format) {
+  if (parsed.isChatCompletions) {
+    formatHandler = formatRegistry.get("openai") ?? null;
+  } else if (matchedProviderConfig?.format) {
     formatHandler = formatRegistry.get(matchedProviderConfig.format) ?? null;
   } else {
     formatHandler = formatForPath(parsed.apiPath);

package/.output/server/_tanstack-start-manifest_v-Cb2CDJtB.mjs

@@ -0,0 +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/index-DTjsqi6U.js"], scripts: [{ attrs: { type: "module", async: true, src: "/assets/index-DTjsqi6U.js" } }] }, "/": { filePath: "C:/Users/claw/workspace/llm-inspector/src/routes/index.tsx", children: void 0, preloads: ["/assets/index-DrYcBTSK.js"] } } });
+export {
+  tsrStartManifest
+};

package/.output/server/index.mjs

@@ -7,6 +7,7 @@ import { fileURLToPath } from "node:url";
 import { dirname, resolve } from "node:path";
 import "node:http";
 import "node:stream";
+import "node:stream/promises";
 import "node:https";
 import "node:http2";
 import "./_libs/rou3.mjs";
@@ -100,51 +101,51 @@ const assets = {
   "/assets/alibaba-TTwafVwX.svg": {
     "type": "image/svg+xml",
     "etag": '"171b-6dyV5K8QjiaY35sN9qNprh9zDIs"',
-    "mtime": "2026-06-04T07:50:34.983Z",
+    "mtime": "2026-06-05T11:18:11.305Z",
     "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-04T07:50:34.983Z",
-    "size": 69024,
-    "path": "../public/assets/index-DdJSLfxK.css"
-  },
   "/assets/zhipuai-BPNAnxo-.svg": {
     "type": "image/svg+xml",
     "etag": '"2bf8-hNaLCTi89nOFCsIIfWpP/jrfo0s"',
-    "mtime": "2026-06-04T07:50:34.981Z",
+    "mtime": "2026-06-05T11:18:11.305Z",
     "size": 11256,
     "path": "../public/assets/zhipuai-BPNAnxo-.svg"
   },
-  "/assets/main-DlRlP_aH.js": {
-    "type": "text/javascript; charset=utf-8",
-    "etag": '"50591-9wb2koOmoSeF78CqgkKJ6J53UhQ"',
-    "mtime": "2026-06-04T07:50:34.983Z",
-    "size": 329105,
-    "path": "../public/assets/main-DlRlP_aH.js"
+  "/assets/index-Cc1oV0hF.css": {
+    "type": "text/css; charset=utf-8",
+    "etag": '"10d3b-Y2lH7o+AtG0LDeZFMgPtKHzDOAQ"',
+    "mtime": "2026-06-05T11:18:11.307Z",
+    "size": 68923,
+    "path": "../public/assets/index-Cc1oV0hF.css"
   },
   "/assets/minimax-BPMzvuL-.jpeg": {
     "type": "image/jpeg",
     "etag": '"1b06-IwivU89ko5UTMUM1/t7hn4sQK9A"',
-    "mtime": "2026-06-04T07:50:34.983Z",
+    "mtime": "2026-06-05T11:18:11.307Z",
     "size": 6918,
     "path": "../public/assets/minimax-BPMzvuL-.jpeg"
   },
+  "/assets/index-DTjsqi6U.js": {
+    "type": "text/javascript; charset=utf-8",
+    "etag": '"51034-6xxprFE2mCIi4bRjy5msIBNoJig"',
+    "mtime": "2026-06-05T11:18:11.307Z",
+    "size": 331828,
+    "path": "../public/assets/index-DTjsqi6U.js"
+  },
   "/assets/qwen-CONDcHqt.png": {
     "type": "image/png",
     "etag": '"572c3-cdJAPaHdOvFCGzuaQjagdgOu6XE"',
-    "mtime": "2026-06-04T07:50:34.983Z",
+    "mtime": "2026-06-05T11:18:11.307Z",
     "size": 357059,
     "path": "../public/assets/qwen-CONDcHqt.png"
   },
-  "/assets/index-BrRzz6xk.js": {
+  "/assets/index-DrYcBTSK.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"84c41-ySQowuzk06PhaGymfQ18pzt8XKo"',
-    "mtime": "2026-06-04T07:50:34.983Z",
-    "size": 543809,
-    "path": "../public/assets/index-BrRzz6xk.js"
+    "etag": '"85db6-JHWqbScXD08PJnzmagxJRT95Oek"',
+    "mtime": "2026-06-05T11:18:11.307Z",
+    "size": 548278,
+    "path": "../public/assets/index-DrYcBTSK.js"
   }
 };
 function readAsset(id) {

package/README.md

@@ -4,23 +4,31 @@
 
 ![Proxy Overview](docs/Proxy.png)
 
-llm-inspector 是一个 LLM API 透明代理，能够捕获 AI 编程工具（Claude Code、OpenCode、Cody、Cursor 等）与 LLM 提供商之间的每一次请求和响应，在 Web UI 中实时展示系统提示词、工具定义、消息内容、SSE 流式数据块和 Token 用量。
+## What is llm-inspector?
 
-**专为理解 AI 编程工具底层 API 调用而设计。**
+**llm-inspector** 是一个 LLM API 透明代理调试工具，能够捕获 AI 编程工具（Claude Code、OpenCode、Cursor、Cody 等）与 LLM 提供商之间的所有 API 请求和响应，在 Web UI 中实时展示：
 
----
+- 系统提示词 (System Prompts)
+- 工具定义 (Tool Definitions)
+- 消息内容 (Messages)
+- SSE 流式数据块 (Streaming Chunks)
+- Token 用量 (Token Usage)
 
-## 文档目录
+**专为理解 AI 编程工具底层 API 调用行为而设计。帮助开发者看清 LLM API 的"最后一公里"。**
 
-- [特性 (Features)](docs/Features.md) - 核心功能介绍
-- [安装 (Installation)](docs/Installation.md) - 安装指南
-- [使用 (Usage)](docs/Usage.md) - 详细使用说明
-- [架构 (Architecture)](docs/Architecture.md) - 系统架构
-- [开发 (Development)](docs/Development.md) - 开发指南
+## Key Advantages / 核心优势
 
----
+| 优势 | 说明 |
+|------|------|
+| **透明代理、零侵入** | 只需设置环境变量即可拦截所有流量，无需修改 AI 编程工具本身 |
+| **结构化 API 可视化** | 交互式 JSON 树查看器，自动解析并渲染 Markdown 文本、思考块、工具调用块 |
+| **完整的 SSE 流式解析** | 捕获并重建每个流式事件，原始事件时间线一目了然 |
+| **Token 用量实时追踪** | 单请求 + 会话级 + 全局级 Token 统计 |
+| **多提供商自动路由** | 支持 Anthropic、OpenAI、DeepSeek、MiniMax、Qwen、ZhipuAI，自动识别格式和认证 |
+| **客户端进程追踪** | 自动关联 PID、工作目录、项目文件夹，区分请求来源 |
+| **持久化存储 + 导出** | 磁盘日志存储 + ZIP 导出，支持离线分析 |
 
-## 快速开始
+## Quick Start / 快速开始
 
 ### npm 安装
 
@@ -44,4 +52,35 @@ bun run dev
 
 打开浏览器访问 http://localhost:25947 查看实时捕获的请求。
 
+### 配置 AI 编程工具
+
+配置你的 AI 编程工具，将 API 请求路由到 llm-inspector 代理：
+
+```bash
+# Claude Code
+ANTHROPIC_BASE_URL=http://localhost:25947/proxy claude
+
+# OpenCode
+LLM_BASE_URL=http://localhost:25947/proxy opencode
+
+# Cursor, Cody 等
+ANTHROPIC_BASE_URL=http://localhost:25947/proxy <your-tool>
+```
+
+### 验证代理工作正常
+
+1. 启动 llm-inspector 后，打开浏览器访问 http://localhost:25947
+2. 配置好环境变量后，向代理发送一个请求
+3. 观察 Web UI 中是否实时显示捕获的请求和响应
+
 ![Proxy Hello](docs/Proxy%20Hello.png)
+
+---
+
+## Documentation / 文档目录
+
+- [特性 (Features)](docs/Features.md) - 核心功能介绍
+- [安装 (Installation)](docs/Installation.md) - 安装指南
+- [使用 (Usage)](docs/Usage.md) - 详细使用说明
+- [架构 (Architecture)](docs/Architecture.md) - 系统架构
+- [开发 (Development)](docs/Development.md) - 开发指南

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tonyclaw/llm-inspector",
-  "version": "1.9.5",
+  "version": "1.9.7",
   "type": "module",
   "description": "LLM API proxy inspector — captures and displays requests/responses from AI coding tools in a web UI",
   "license": "MIT",

package/src/components/providers/ProviderCard.tsx

@@ -112,6 +112,8 @@ function getErrorIcon(type: ErrorType): JSX.Element {
 }
 
 function TestStatus({ result }: { result: TestResult | NotConfigured | Testing }): JSX.Element {
+  const [showDetails, setShowDetails] = useState(false);
+
   if (!hasSuccessField(result)) {
     // Not TestResult - check if NotConfigured or Testing
     if (isNotConfiguredState(result)) {
@@ -142,18 +144,33 @@ function TestStatus({ result }: { result: TestResult | NotConfigured | Testing }
   const error = result.error;
   const errorMessage = error?.message ?? "Connection failed";
   const errorHint = error?.hint;
+  const errorDetails = error?.details;
   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 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 className="flex flex-col gap-1 shrink-0">
+      <div className="flex items-center gap-1 text-xs text-red-600 max-w-[200px]">
+        {getErrorIcon(errorType)}
+        <span className="truncate">{errorMessage}</span>
+        {errorDetails !== undefined && (
+          <button
+            type="button"
+            onClick={() => setShowDetails(!showDetails)}
+            className="shrink-0 text-muted-foreground hover:text-foreground transition-colors"
+            title={showDetails ? "Hide details" : "Show details"}
+          >
+            {showDetails ? <EyeOff className="size-3" /> : <Eye className="size-3" />}
+          </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>
+      )}
     </div>
   );
 }

package/src/components/proxy-viewer/formats/anthropic/ContentBlocks.tsx

@@ -37,14 +37,47 @@ function SystemReminderBlock({ text }: { text: string }): JSX.Element {
   );
 }
 
+// Regex to extract content wrapped in <think>...</thinking> tags (MiniMax format: <think>...</think>)
+const THINKING_TAG_REGEX = /<think>([\s\S]*?)<\/think>/gi;
+const THINKING_TAG_REGEX_SINGLE = /<think>([\s\S]*?)<\/think>/i;
+
+/**
+ * Extract thinking content wrapped in <think> tags (thought balloon emoji) from text.
+ * Returns { thinking, remainingText } where thinking is the extracted content
+ * and remainingText is the original text with thinking tags removed.
+ */
+export function extractThinkingFromContent(text: string): {
+  thinking: string | null;
+  remainingText: string;
+} {
+  const match = THINKING_TAG_REGEX_SINGLE.exec(text);
+  if (!match || match[1] === undefined) {
+    return { thinking: null, remainingText: text };
+  }
+  const thinking = match[1].trim();
+  const remainingText = text.replace(THINKING_TAG_REGEX, "").trim();
+  return { thinking, remainingText };
+}
+
 export function TextBlock({ text }: { text: string }): JSX.Element {
   if (text.includes("<system-reminder>")) {
     return <SystemReminderBlock text={text} />;
   }
 
+  // Check for <think> tags wrapped in content
+  const { thinking, remainingText } = extractThinkingFromContent(text);
+
   return (
-    <div className="prose prose-sm dark:prose-invert max-w-none [&_pre]:bg-muted [&_pre]:text-foreground [&_code]:text-[0.8em] [&_p]:my-1 [&_ul]:my-1 [&_ol]:my-1">
-      <ReactMarkdown>{text}</ReactMarkdown>
+    <div className="space-y-2">
+      {thinking !== null && <ThinkingBlock thinking={thinking} />}
+      {remainingText.length > 0 && (
+        <div className="prose prose-sm dark:prose-invert max-w-none [&_pre]:bg-muted [&_pre]:text-foreground [&_code]:text-[0.8em] [&_p]:my-1 [&_ul]:my-1 [&_ol]:my-1">
+          <ReactMarkdown>{remainingText}</ReactMarkdown>
+        </div>
+      )}
+      {thinking === null && remainingText.length === 0 && (
+        <p className="text-xs text-muted-foreground italic">Empty text block</p>
+      )}
     </div>
   );
 }

package/src/components/proxy-viewer/formats/openai/ResponseView.tsx

@@ -5,6 +5,10 @@ import type { OpenAIResponse } from "../../../../proxy/schemas";
 import { formatTokens } from "../../../../lib/utils";
 import { Badge } from "../../../ui/badge";
 import { Separator } from "../../../ui/separator";
+import { extractThinkingFromContent, ThinkingBlock } from "../anthropic/ContentBlocks";
+
+// Re-export for use in other components
+export { extractThinkingFromContent } from "../anthropic/ContentBlocks";
 
 export function OpenAIResponseView({ response }: { response: OpenAIResponse }): JSX.Element {
   const choice = response.choices[0];
@@ -42,20 +46,30 @@ export function OpenAIResponseView({ response }: { response: OpenAIResponse }):
         {message?.reasoning_content !== null &&
           message?.reasoning_content !== undefined &&
           message.reasoning_content.length > 0 && (
-            <div className="border border-purple-500/30 rounded-md p-3 bg-purple-500/5">
-              <div className="text-xs text-purple-400 font-mono mb-1">thinking</div>
-              <div className="text-sm text-purple-200 whitespace-pre-wrap">
-                {message.reasoning_content}
-              </div>
-            </div>
+            <ThinkingBlock thinking={message.reasoning_content} />
           )}
         {message?.content !== null &&
           message?.content !== undefined &&
-          message.content.length > 0 && (
-            <div className="prose prose-sm dark:prose-invert max-w-none [&_pre]:bg-muted [&_pre]:text-foreground [&_code]:text-[0.8em] [&_p]:my-1 [&_ul]:my-1 [&_ol]:my-1">
-              <ReactMarkdown>{message.content}</ReactMarkdown>
-            </div>
-          )}
+          message.content.length > 0 &&
+          (() => {
+            // Extract thinking content from tag-wrapped content if no reasoning_content field
+            const hasReasoningField =
+              message.reasoning_content !== null &&
+              message.reasoning_content !== undefined &&
+              message.reasoning_content.length > 0;
+            const { thinking, remainingText } = extractThinkingFromContent(message.content);
+            return (
+              <div className="space-y-2">
+                {/* Show thinking from tags only if no reasoning_content field */}
+                {thinking !== null && !hasReasoningField && <ThinkingBlock thinking={thinking} />}
+                {remainingText.length > 0 && (
+                  <div className="prose prose-sm dark:prose-invert max-w-none [&_pre]:bg-muted [&_pre]:text-foreground [&_code]:text-[0.8em] [&_p]:my-1 [&_ul]:my-1 [&_ol]:my-1">
+                    <ReactMarkdown>{remainingText}</ReactMarkdown>
+                  </div>
+                )}
+              </div>
+            );
+          })()}
         {message?.function_call !== null && message?.function_call !== undefined && (
           <div className="border border-blue-500/30 rounded-md p-3 bg-blue-500/5">
             <div className="text-xs text-blue-400 font-mono mb-1">function_call</div>

package/src/proxy/formats/openai/schemas.ts

@@ -21,6 +21,8 @@ export const OpenAIMessage = z.object({
   content: OpenAIMessageContent,
   name: z.string().optional(),
   reasoning_content: z.string().optional(),
+  thinking: z.string().optional(), // Some providers use 'thinking' field
+  think: z.string().optional(), // MiniMax uses 'think' field
 });
 
 export const OpenAIFunctionCall = z.object({
@@ -65,6 +67,8 @@ export const OpenAIChoiceDelta = z.object({
   role: z.enum(["assistant"]).optional(),
   content: z.string().nullable().optional(),
   reasoning_content: z.string().nullable().optional(),
+  thinking: z.string().nullable().optional(), // Some providers use 'thinking' field
+  think: z.string().nullable().optional(), // MiniMax uses 'think' field
   function_call: z
     .object({ name: z.string().optional(), arguments: z.string().optional() })
     .nullable()
@@ -92,6 +96,8 @@ export const OpenAIChoice = z.object({
       role: z.enum(["assistant"]),
       content: z.string().nullable(),
       reasoning_content: z.string().optional(),
+      thinking: z.string().optional(), // Some providers use 'thinking' field in message
+      think: z.string().optional(), // MiniMax uses 'think' field in message
       function_call: z.object({ name: z.string(), arguments: z.string() }).nullable().optional(),
     })
     .optional(),

package/src/proxy/formats/openai/stream.ts

@@ -99,6 +99,14 @@ export function extractOpenAIStream(
         if (delta.reasoning_content !== undefined && delta.reasoning_content !== null) {
           reasoningContent += delta.reasoning_content;
         }
+        if (delta.thinking !== undefined && delta.thinking !== null) {
+          reasoningContent += delta.thinking;
+        }
+        // MiniMax uses 'think' field for thinking content - check via bracket notation
+        const thinkValue = delta.think;
+        if (thinkValue !== undefined && thinkValue !== null) {
+          reasoningContent += thinkValue;
+        }
         if (choice.finish_reason !== undefined && choice.finish_reason !== null) {
           finishReason = choice.finish_reason;
         }

package/src/proxy/handler.ts

@@ -332,9 +332,13 @@ export async function handleProxy(req: Request): Promise<Response> {
     return new Response("Forbidden: unsupported provider", { status: STATUS_FORBIDDEN });
   }
 
-  // Get the format handler based on provider format (preferred) or request path fallback
+  // Get the format handler based on the actual upstream URL being used.
+  // For Chat Completions, the upstream always returns OpenAI SSE format regardless
+  // of provider config (which may have format=anthropic for backward compat).
   let formatHandler: FormatHandler | null;
-  if (matchedProviderConfig?.format) {
+  if (parsed.isChatCompletions) {
+    formatHandler = formatRegistry.get("openai") ?? null;
+  } else if (matchedProviderConfig?.format) {
     formatHandler = formatRegistry.get(matchedProviderConfig.format) ?? null;
   } else {
     formatHandler = formatForPath(parsed.apiPath);