@tonyclaw/llm-inspector 1.11.8 → 1.13.0

package/.output/server/_ssr/index.mjs

@@ -198,7 +198,7 @@ function getResponse() {
   return event.res;
 }
 async function getStartManifest(matchedRoutes) {
-  const { tsrStartManifest } = await import("../_tanstack-start-manifest_v-DkqH07iU.mjs");
+  const { tsrStartManifest } = await import("../_tanstack-start-manifest_v-DUbXa1lt.mjs");
   const startManifest = tsrStartManifest();
   const rootRoute = startManifest.routes[rootRouteId] = startManifest.routes[rootRouteId] || {};
   rootRoute.assets = rootRoute.assets || [];
@@ -767,7 +767,7 @@ let entriesPromise;
 let baseManifestPromise;
 let cachedFinalManifestPromise;
 async function loadEntries() {
-  const routerEntry = await import("./router-DeW8M_70.mjs").then((n) => n.r);
+  const routerEntry = await import("./router-D5ccnemB.mjs").then((n) => n.r);
   const startEntry = await import("./start-HYkvq4Ni.mjs");
   return { startEntry, routerEntry };
 }

package/.output/server/_ssr/{router-DeW8M_70.mjs → router-D5ccnemB.mjs}

@@ -44,7 +44,7 @@ import "../_libs/debounce-fn.mjs";
 import "../_libs/mimic-function.mjs";
 import "../_libs/semver.mjs";
 import "../_libs/uint8array-extras.mjs";
-const appCss = "/assets/index-DiYqfnSp.css";
+const appCss = "/assets/index-B0anmGQr.css";
 const Route$h = createRootRoute({
   head: () => ({
     meta: [
@@ -68,7 +68,7 @@ function RootDocument({ children }) {
     ] })
   ] });
 }
-const $$splitComponentImporter = () => import("./index-RTuHuCHN.mjs");
+const $$splitComponentImporter = () => import("./index-C8VC13EA.mjs");
 const Route$g = createFileRoute("/")({
   component: lazyRouteComponent($$splitComponentImporter, "component")
 });

package/.output/server/{_tanstack-start-manifest_v-DkqH07iU.mjs → _tanstack-start-manifest_v-DUbXa1lt.mjs}

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

package/.output/server/index.mjs

@@ -35,54 +35,54 @@ const headers = ((m) => function headersRouteRule(event) {
   }
 });
 const assets = {
-  "/assets/index-DiYqfnSp.css": {
-    "type": "text/css; charset=utf-8",
-    "etag": '"11755-g+paI7gxmWkWiKXnB74OdQXg0jE"',
-    "mtime": "2026-06-08T11:21:47.160Z",
-    "size": 71509,
-    "path": "../public/assets/index-DiYqfnSp.css"
-  },
-  "/assets/minimax-BPMzvuL-.jpeg": {
-    "type": "image/jpeg",
-    "etag": '"1b06-IwivU89ko5UTMUM1/t7hn4sQK9A"',
-    "mtime": "2026-06-08T11:21:47.159Z",
-    "size": 6918,
-    "path": "../public/assets/minimax-BPMzvuL-.jpeg"
+  "/assets/alibaba-TTwafVwX.svg": {
+    "type": "image/svg+xml",
+    "etag": '"171b-6dyV5K8QjiaY35sN9qNprh9zDIs"',
+    "mtime": "2026-06-09T09:07:57.962Z",
+    "size": 5915,
+    "path": "../public/assets/alibaba-TTwafVwX.svg"
   },
   "/assets/zhipuai-BPNAnxo-.svg": {
     "type": "image/svg+xml",
     "etag": '"2bf8-hNaLCTi89nOFCsIIfWpP/jrfo0s"',
-    "mtime": "2026-06-08T11:21:47.160Z",
+    "mtime": "2026-06-09T09:07:57.965Z",
     "size": 11256,
     "path": "../public/assets/zhipuai-BPNAnxo-.svg"
   },
-  "/assets/main-GI0Ezr88.js": {
+  "/assets/index-B0anmGQr.css": {
+    "type": "text/css; charset=utf-8",
+    "etag": '"12a87-6IlHwgxaeugM2Z9VI5/+fVbaA40"',
+    "mtime": "2026-06-09T09:07:57.965Z",
+    "size": 76423,
+    "path": "../public/assets/index-B0anmGQr.css"
+  },
+  "/assets/main-C3tLo75s.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"50599-QWdqtG8xhv3YNUdqpICG85M3U+c"',
-    "mtime": "2026-06-08T11:21:47.160Z",
+    "etag": '"50599-nkxkxzEGV0G+Y8N4Lyzxy/ivv4w"',
+    "mtime": "2026-06-09T09:07:57.965Z",
     "size": 329113,
-    "path": "../public/assets/main-GI0Ezr88.js"
+    "path": "../public/assets/main-C3tLo75s.js"
   },
   "/assets/qwen-CONDcHqt.png": {
     "type": "image/png",
     "etag": '"572c3-cdJAPaHdOvFCGzuaQjagdgOu6XE"',
-    "mtime": "2026-06-08T11:21:47.159Z",
+    "mtime": "2026-06-09T09:07:57.965Z",
     "size": 357059,
     "path": "../public/assets/qwen-CONDcHqt.png"
   },
-  "/assets/alibaba-TTwafVwX.svg": {
-    "type": "image/svg+xml",
-    "etag": '"171b-6dyV5K8QjiaY35sN9qNprh9zDIs"',
-    "mtime": "2026-06-08T11:21:47.159Z",
-    "size": 5915,
-    "path": "../public/assets/alibaba-TTwafVwX.svg"
+  "/assets/minimax-BPMzvuL-.jpeg": {
+    "type": "image/jpeg",
+    "etag": '"1b06-IwivU89ko5UTMUM1/t7hn4sQK9A"',
+    "mtime": "2026-06-09T09:07:57.965Z",
+    "size": 6918,
+    "path": "../public/assets/minimax-BPMzvuL-.jpeg"
   },
-  "/assets/index-KwQ0pWoC.js": {
+  "/assets/index-H_thmL2_.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"8a3c6-FXAKLjOLw88ZPk0YxXa9P2/jGDE"',
-    "mtime": "2026-06-08T11:21:47.160Z",
-    "size": 566214,
-    "path": "../public/assets/index-KwQ0pWoC.js"
+    "etag": '"8daed-n1W4t2jQHmBQs8e35+QecepRw4w"',
+    "mtime": "2026-06-09T09:07:57.965Z",
+    "size": 580333,
+    "path": "../public/assets/index-H_thmL2_.js"
   }
 };
 function readAsset(id) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tonyclaw/llm-inspector",
-  "version": "1.11.8",
+  "version": "1.13.0",
   "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/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";
@@ -13,6 +13,9 @@ import {
 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;
@@ -112,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);
@@ -123,7 +129,90 @@ 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]);
 
   // Determine what items to render (groups or individual logs)
   const renderGroups =
@@ -303,7 +392,14 @@ export function ProxyViewer({
                         transform: `translateY(${virtualRow.start}px)`,
                       }}
                     >
-                      <ConversationGroup group={group} viewMode={viewMode} strip={strip} />
+                      <ConversationGroup
+                        group={group}
+                        viewMode={viewMode}
+                        strip={strip}
+                        cacheTrends={cacheTrends}
+                        selectedSet={selectedSet}
+                        onToggleSelect={handleToggleSelect}
+                      />
                     </div>
                   );
                 } else {
@@ -322,7 +418,14 @@ export function ProxyViewer({
                         transform: `translateY(${virtualRow.start}px)`,
                       }}
                     >
-                      <LogEntry log={log} viewMode={viewMode} strip={strip} />
+                      <LogEntry
+                        log={log}
+                        viewMode={viewMode}
+                        strip={strip}
+                        cacheTrend={cacheTrends.get(log.id) ?? null}
+                        isSelected={selectedSet.has(log.id)}
+                        onToggleSelect={handleToggleSelect}
+                      />
                     </div>
                   );
                 }
@@ -331,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>
   );
 }