@tonyclaw/llm-inspector 1.12.0 → 1.14.0

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

@@ -0,0 +1,4 @@
+const tsrStartManifest = () => ({ "routes": { "__root__": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/__root.tsx", "children": ["/", "/api/config", "/api/health", "/api/logs", "/api/mcp", "/api/models", "/api/providers", "/api/sessions", "/proxy/$"], "preloads": ["/assets/main-C1k6vRnH.js"], "assets": [] }, "/": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/index.tsx", "assets": [], "preloads": ["/assets/index-C6tbslcs.js"] }, "/api/config": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/config.ts", "children": ["/api/config/paths"] }, "/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/mcp": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/mcp.ts" }, "/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-C1k6vRnH.js" });
+export {
+  tsrStartManifest
+};

package/.output/server/index.mjs

@@ -38,51 +38,51 @@ const assets = {
   "/assets/alibaba-TTwafVwX.svg": {
     "type": "image/svg+xml",
     "etag": '"171b-6dyV5K8QjiaY35sN9qNprh9zDIs"',
-    "mtime": "2026-06-09T08:02:30.828Z",
+    "mtime": "2026-06-10T06:24:38.532Z",
     "size": 5915,
     "path": "../public/assets/alibaba-TTwafVwX.svg"
   },
-  "/assets/minimax-BPMzvuL-.jpeg": {
-    "type": "image/jpeg",
-    "etag": '"1b06-IwivU89ko5UTMUM1/t7hn4sQK9A"',
-    "mtime": "2026-06-09T08:02:30.828Z",
-    "size": 6918,
-    "path": "../public/assets/minimax-BPMzvuL-.jpeg"
-  },
-  "/assets/index-DZx2yk8v.css": {
+  "/assets/index-B5q3Llgm.css": {
     "type": "text/css; charset=utf-8",
-    "etag": '"1177b-93l31JbQrAbdmLoUOxZGbqTQwcc"',
-    "mtime": "2026-06-09T08:02:30.830Z",
-    "size": 71547,
-    "path": "../public/assets/index-DZx2yk8v.css"
+    "etag": '"13e7d-80ipn+yqCPCa5t/vCr1MDg4cP4g"',
+    "mtime": "2026-06-10T06:24:38.532Z",
+    "size": 81533,
+    "path": "../public/assets/index-B5q3Llgm.css"
   },
   "/assets/zhipuai-BPNAnxo-.svg": {
     "type": "image/svg+xml",
     "etag": '"2bf8-hNaLCTi89nOFCsIIfWpP/jrfo0s"',
-    "mtime": "2026-06-09T08:02:30.828Z",
+    "mtime": "2026-06-10T06:24:38.529Z",
     "size": 11256,
     "path": "../public/assets/zhipuai-BPNAnxo-.svg"
   },
-  "/assets/main-BYCM7aJx.js": {
+  "/assets/main-C1k6vRnH.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"50599-LT3fOJsfcl49n+Hp+rSe62uyiuk"',
-    "mtime": "2026-06-09T08:02:30.830Z",
+    "etag": '"50599-AYrUeIFAuGF/4DPZ+5lAMslWd7Q"',
+    "mtime": "2026-06-10T06:24:38.532Z",
     "size": 329113,
-    "path": "../public/assets/main-BYCM7aJx.js"
+    "path": "../public/assets/main-C1k6vRnH.js"
+  },
+  "/assets/minimax-BPMzvuL-.jpeg": {
+    "type": "image/jpeg",
+    "etag": '"1b06-IwivU89ko5UTMUM1/t7hn4sQK9A"',
+    "mtime": "2026-06-10T06:24:38.532Z",
+    "size": 6918,
+    "path": "../public/assets/minimax-BPMzvuL-.jpeg"
   },
   "/assets/qwen-CONDcHqt.png": {
     "type": "image/png",
     "etag": '"572c3-cdJAPaHdOvFCGzuaQjagdgOu6XE"',
-    "mtime": "2026-06-09T08:02:30.830Z",
+    "mtime": "2026-06-10T06:24:38.532Z",
     "size": 357059,
     "path": "../public/assets/qwen-CONDcHqt.png"
   },
-  "/assets/index-DVgdkDgq.js": {
+  "/assets/index-C6tbslcs.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"8a87f-jt4qwgWrMm8cZtArzPx7qX8p12k"',
-    "mtime": "2026-06-09T08:02:30.830Z",
-    "size": 567423,
-    "path": "../public/assets/index-DVgdkDgq.js"
+    "etag": '"90252-JCPOfSZg2vTS69tqlOJ4qp75AeM"',
+    "mtime": "2026-06-10T06:24:38.532Z",
+    "size": 590418,
+    "path": "../public/assets/index-C6tbslcs.js"
   }
 };
 function readAsset(id) {

package/README.md

@@ -77,6 +77,103 @@ ANTHROPIC_BASE_URL=http://localhost:25947/proxy <your-tool>
 
 ---
 
+## MCP Server (Coding Agent Integration)
+
+llm-inspector ships with an embedded [Model Context Protocol](https://modelcontextprotocol.io)
+(MCP) server, mounted at `POST http://localhost:25947/api/mcp` on the same port as
+the Web UI. Any MCP-aware Coding Agent running on the same machine can
+discover and invoke 11 `inspector_*` tools to read captured traffic and
+manage provider configuration without a human round-trip.
+
+### Tool catalog (11 tools, all prefixed `inspector_`)
+
+**Read (6) — cheap discovery of what was just sent**
+
+| Tool | Purpose |
+|------|---------|
+| `inspector_list_logs` | Recent captured logs in reverse-chronological order, with parsed previews of the last user message and the assistant response. Default limit 3, hard-capped at 5. |
+| `inspector_get_log` | Full `CapturedLog` for a single id, including `rawRequestBody` and `responseText` with no truncation. Streaming chunks are NOT included. |
+| `inspector_get_log_chunks` | SSE streaming chunks for a single log, in order received. |
+| `inspector_list_sessions` | All session ids that have been observed in captured logs. |
+| `inspector_list_models` | Distinct model names seen across all logs. |
+| `inspector_list_providers` | All configured providers, including `apiKey` in plaintext. |
+
+**Action (2)**
+
+| Tool | Purpose |
+|------|---------|
+| `inspector_get_provider` | Full `ProviderConfig` for a single id, `apiKey` in plaintext. |
+| `inspector_replay_log` | Re-send a captured request body to its upstream and return the response summary. |
+
+**Provider write (3) — mutate provider config**
+
+| Tool | Purpose |
+|------|---------|
+| `inspector_add_provider` | Persist a new provider to `<dataDir>/providers.json`. |
+| `inspector_update_provider` | Patch-style update of an existing provider. |
+| `inspector_test_provider` | Run the UI's connectivity test against a provider. |
+
+**Explicitly NOT exposed** (kept UI-only by design):
+
+- `delete_provider` — irreversible.
+- `clear_log_cache` — only clears the in-memory LRU; misleads agents that expect a full wipe.
+- `get_runtime_config` / `set_runtime_config` — runtime policy surface; UI is the source of truth.
+
+### Connecting an MCP client
+
+The server speaks **HTTP Streamable transport** (JSON-RPC over HTTP). The
+simplest way to point a client at it is to register the endpoint URL. For
+example, in Claude Code's `.mcp.json`:
+
+```json
+{
+  "mcpServers": {
+    "llm-inspector": {
+      "type": "http",
+      "url": "http://localhost:25947/api/mcp"
+    }
+  }
+}
+```
+
+For raw clients that send JSON-RPC directly:
+
+```bash
+curl -X POST http://localhost:25947/api/mcp \
+  -H 'content-type: application/json' \
+  -H 'accept: application/json, text/event-stream' \
+  -d '{
+    "jsonrpc": "2.0",
+    "id": 1,
+    "method": "initialize",
+    "params": {
+      "protocolVersion": "2025-06-18",
+      "capabilities": {},
+      "clientInfo": { "name": "my-client", "version": "0.0.0" }
+    }
+  }'
+```
+
+### Posture and limitations
+
+- **Localhost only, no auth.** The MCP endpoint inherits inspector's
+  existing localhost binding. Any process that can call `/api/mcp` can also
+  read `<dataDir>/providers.json` directly. Do not run inspector on a
+  host where untrusted local users can reach it.
+- **Provider API keys are returned in plaintext** by `inspector_list_providers`
+  and `inspector_get_provider`. This is intentional — redacting in MCP but
+  not in the underlying JSON file would be performative security.
+- **Reflexive loop:** `inspector_list_logs` may include the agent's own
+  recent `/proxy` calls. Filter by `clientPid` (your own PID) or by
+  timestamp on the client side. The tool description surfaces this warning.
+- **List limits are hardcoded** at default 3, max 5. Not user-configurable.
+- **Deferred to v1.1** (not in this change): MCP Resources for logs
+  (`mcp://llm-inspector/log/{id}`), notifications/subscriptions for live
+  log push, filtering out reflexive-loop entries server-side, full-text
+  or time-range search, MCP-level auth.
+
+---
+
 ## Documentation / 文档目录
 
 - [特性 (Features)](docs/Features.md) - 核心功能介绍
@@ -84,3 +181,4 @@ ANTHROPIC_BASE_URL=http://localhost:25947/proxy <your-tool>
 - [使用 (Usage)](docs/Usage.md) - 详细使用说明
 - [架构 (Architecture)](docs/Architecture.md) - 系统架构
 - [开发 (Development)](docs/Development.md) - 开发指南
+- [MCP Server](docs/MCP-Server.md) - 把 llm-inspector 当作 MCP 工具接入 Coding Agent

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tonyclaw/llm-inspector",
-  "version": "1.12.0",
+  "version": "1.14.0",
   "type": "module",
   "description": "LLM API proxy inspector — captures and displays requests/responses from AI coding tools in a web UI",
   "license": "MIT",
@@ -46,6 +46,7 @@
     "ladle:build": "ladle build"
   },
   "dependencies": {
+    "@modelcontextprotocol/server": "^2.0.0-alpha.2",
     "@radix-ui/react-dialog": "^1.1.14",
     "@radix-ui/react-select": "^2.2.6",
     "@tailwindcss/typography": "^0.5.19",
@@ -69,6 +70,7 @@
   },
   "devDependencies": {
     "@biomejs/biome": "^2.3.14",
+    "@cfworker/json-schema": "^4.1.1",
     "@eslint/js": "^10.0.1",
     "@ladle/react": "^5.1.1",
     "@tailwindcss/vite": "^4.1.18",

package/src/components/ProxyViewer.tsx

@@ -1,6 +1,6 @@
-import { type JSX, useCallback, useMemo, useState, useRef } from "react";
+import { type JSX, useCallback, useEffect, useMemo, useState, useRef } from "react";
 import { useVirtualizer } from "@tanstack/react-virtual";
-import { Download, LayoutGrid, List } from "lucide-react";
+import { Download, GitCompareArrows, LayoutGrid, List, X } from "lucide-react";
 import type { CapturedLog } from "../proxy/schemas";
 import { exportLogsAsZip } from "../lib/export-logs";
 import packageJson from "../../package.json";
@@ -14,6 +14,8 @@ import { CrabLogo } from "./ui/crab-logo";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select";
 import { SettingsDialog } from "./providers/SettingsDialog";
 import { computeCacheTrends } from "./proxy-viewer/cacheTrend";
+import { CompareDrawer } from "./proxy-viewer/CompareDrawer";
+import { getConversationId } from "./proxy-viewer/ConversationHeader";
 
 function truncateSessionId(id: string): string {
   if (id.length <= 30) return id;
@@ -113,6 +115,9 @@ export function ProxyViewer({
   const { totalIn, totalOut } = computeTokenSummary(logs);
   const [groupedView, setGroupedView] = useState(true);
   const [exporting, setExporting] = useState(false);
+  const [selectedLogIds, setSelectedLogIds] = useState<number[]>([]);
+  const [compareOpen, setCompareOpen] = useState(false);
+  const [comparePair, setComparePair] = useState<[CapturedLog, CapturedLog] | null>(null);
 
   const handleExport = useCallback(async () => {
     setExporting(true);
@@ -124,6 +129,88 @@ export function ProxyViewer({
   }, [logs]);
   const parentRef = useRef<HTMLDivElement>(null);
 
+  const handleToggleSelect = useCallback((logId: number) => {
+    setSelectedLogIds((prev) => {
+      if (prev.includes(logId)) {
+        return prev.filter((id) => id !== logId);
+      }
+      if (prev.length < 2) {
+        return [...prev, logId];
+      }
+      // FIFO eviction: drop the oldest, append the new id.
+      const newer = prev[1];
+      if (newer === undefined) return prev;
+      return [newer, logId];
+    });
+  }, []);
+
+  // Reset the selection (and close the compare drawer) whenever the user
+  // changes the session or model filter, since the selected logs may no
+  // longer be in the visible list.
+  useEffect(() => {
+    setSelectedLogIds([]);
+    setCompareOpen(false);
+  }, [selectedSession, selectedModel]);
+
+  const selectedSet = useMemo(() => new Set(selectedLogIds), [selectedLogIds]);
+
+  const openCompare = useCallback(() => {
+    if (selectedLogIds.length !== 2) return;
+    const [idA, idB] = selectedLogIds;
+    if (idA === undefined || idB === undefined) return;
+    const logA = logs.find((l) => l.id === idA);
+    const logB = logs.find((l) => l.id === idB);
+    if (logA === undefined || logB === undefined) return;
+    setComparePair([logA, logB]);
+    setCompareOpen(true);
+  }, [selectedLogIds, logs]);
+
+  const closeCompare = useCallback(() => {
+    setCompareOpen(false);
+    // Keep `comparePair` so the selection survives across the drawer being
+    // closed and re-opened; it is replaced the next time the user opens
+    // the drawer with a different pair.
+  }, []);
+
+  const clearSelection = useCallback(() => {
+    setSelectedLogIds([]);
+  }, []);
+
+  const selectedSummary = useMemo(() => {
+    if (selectedLogIds.length !== 2) return null;
+    const [idA, idB] = selectedLogIds;
+    if (idA === undefined || idB === undefined) return null;
+    const logA = logs.find((l) => l.id === idA);
+    const logB = logs.find((l) => l.id === idB);
+    if (logA === undefined || logB === undefined) return null;
+    const sameSession = getConversationId(logA) === getConversationId(logB);
+    let elapsed = "";
+    if (logA.timestamp !== null && logB.timestamp !== null) {
+      const a = Date.parse(logA.timestamp);
+      const b = Date.parse(logB.timestamp);
+      if (!Number.isNaN(a) && !Number.isNaN(b)) {
+        const ms = Math.abs(b - a);
+        elapsed = formatElapsed(ms);
+      }
+    }
+    return {
+      logA,
+      logB,
+      sameSession,
+      elapsed,
+    };
+  }, [selectedLogIds, logs]);
+
+  function formatElapsed(ms: number): string {
+    if (ms < 1000) return `${ms}ms`;
+    const sec = Math.floor(ms / 1000);
+    if (sec < 60) return `${sec}s`;
+    const min = Math.floor(sec / 60);
+    if (min < 60) return `${min}m`;
+    const hr = Math.floor(min / 60);
+    return `${hr}h${min % 60}m`;
+  }
+
   const groups = useMemo(() => groupLogsByConversation(logs), [logs]);
   const cacheTrends = useMemo(() => computeCacheTrends(groups), [groups]);
 
@@ -310,6 +397,8 @@ export function ProxyViewer({
                         viewMode={viewMode}
                         strip={strip}
                         cacheTrends={cacheTrends}
+                        selectedSet={selectedSet}
+                        onToggleSelect={handleToggleSelect}
                       />
                     </div>
                   );
@@ -334,6 +423,8 @@ export function ProxyViewer({
                         viewMode={viewMode}
                         strip={strip}
                         cacheTrend={cacheTrends.get(log.id) ?? null}
+                        isSelected={selectedSet.has(log.id)}
+                        onToggleSelect={handleToggleSelect}
                       />
                     </div>
                   );
@@ -343,6 +434,39 @@ export function ProxyViewer({
           </div>
         )}
       </div>
+
+      {/* Floating action bar — shown only when 2 logs are selected. */}
+      {selectedSummary !== null && (
+        <div className="fixed bottom-6 left-1/2 -translate-x-1/2 z-40 flex items-center gap-3 bg-background border border-border rounded-lg shadow-lg px-4 py-2 text-xs">
+          <GitCompareArrows className="size-4 text-amber-400 shrink-0" />
+          <span className="text-muted-foreground font-mono">
+            #{selectedSummary.logA.id} ↔ #{selectedSummary.logB.id}
+            {" · "}
+            {selectedSummary.sameSession ? "same session" : "different sessions"}
+            {selectedSummary.elapsed !== "" && ` · ${selectedSummary.elapsed} apart`}
+          </span>
+          <button
+            type="button"
+            onClick={clearSelection}
+            className="text-muted-foreground hover:text-foreground transition-colors cursor-pointer inline-flex items-center gap-1"
+          >
+            <X className="size-3" />
+            Clear
+          </button>
+          <button
+            type="button"
+            onClick={openCompare}
+            className="bg-amber-400 text-amber-950 hover:bg-amber-300 transition-colors px-3 py-1 rounded font-medium cursor-pointer"
+          >
+            Compare 2 logs
+          </button>
+        </div>
+      )}
+
+      {/* Compare drawer — sibling of the log list, not a route change. */}
+      {compareOpen && comparePair !== null && (
+        <CompareDrawer left={comparePair[0]} right={comparePair[1]} onClose={closeCompare} />
+      )}
     </div>
   );
 }