@tonyclaw/llm-inspector 1.11.7 → 1.12.0

package/.output/server/_libs/lucide-react.mjs

@@ -75,6 +75,16 @@ const createLucideIcon = (iconName, iconNode) => {
   Component.displayName = toPascalCase(iconName);
   return Component;
 };
+const __iconNode$L = [
+  ["path", { d: "M12 5v14", key: "s699le" }],
+  ["path", { d: "m19 12-7 7-7-7", key: "1idqje" }]
+];
+const ArrowDown = createLucideIcon("arrow-down", __iconNode$L);
+const __iconNode$K = [
+  ["path", { d: "m5 12 7-7 7 7", key: "hav0vg" }],
+  ["path", { d: "M12 19V5", key: "x0mq9r" }]
+];
+const ArrowUp = createLucideIcon("arrow-up", __iconNode$K);
 const __iconNode$J = [
   ["path", { d: "M12 18V5", key: "adv99a" }],
   ["path", { d: "M15 13a4.17 4.17 0 0 1-3-4 4.17 4.17 0 0 1-3 4", key: "1e3is1" }],
@@ -388,18 +398,20 @@ const __iconNode = [
 ];
 const Zap = createLucideIcon("zap", __iconNode);
 export {
-  WifiOff as A,
-  ChevronsUp as B,
+  ArrowUp as A,
+  Wifi as B,
   ChevronDown as C,
   Download as D,
   ExternalLink as E,
   FileTerminal as F,
   Globe as G,
-  ChevronsDown as H,
-  Brain as I,
-  Terminal as J,
+  WifiOff as H,
+  ChevronsUp as I,
+  ChevronsDown as J,
+  Brain as K,
   LayoutGrid as L,
   MessageSquare as M,
+  Terminal as N,
   Plus as P,
   RotateCcw as R,
   Settings as S,
@@ -425,13 +437,13 @@ export {
   Eye as o,
   RotateCw as p,
   Pencil as q,
-  TriangleAlert as r,
-  Minus as s,
-  CircleCheckBig as t,
-  CircleStop as u,
-  CircleQuestionMark as v,
-  Server as w,
-  Gauge as x,
-  Lock as y,
-  Wifi as z
+  ArrowDown as r,
+  TriangleAlert as s,
+  Minus as t,
+  CircleCheckBig as u,
+  CircleStop as v,
+  CircleQuestionMark as w,
+  Server as x,
+  Gauge as y,
+  Lock as z
 };

package/.output/server/_ssr/{index-i-uTB3Y3.mjs → index-DhChP_jV.mjs}

@@ -1,5 +1,5 @@
 import { r as reactExports, j as jsxRuntimeExports, a as React } from "../_libs/react.mjs";
-import { C as CapturedLogSchema, a as parseRequest, s as stripClaudeCodeBillingHeader, R as RuntimeConfigSchema, P as ProviderConfigSchema, p as parseOpenAIResponse, I as InspectorResponseSchema, S as StreamingChunkSchema$1 } from "./router-CYFPDggE.mjs";
+import { C as CapturedLogSchema, a as parseRequest, s as stripClaudeCodeBillingHeader, R as RuntimeConfigSchema, P as ProviderConfigSchema, p as parseOpenAIResponse, I as InspectorResponseSchema, S as StreamingChunkSchema$1 } from "./router-PZjNwOcw.mjs";
 import { u as useSWR, a as useSWRConfig } from "../_libs/swr.mjs";
 import { u as useVirtualizer } from "../_libs/tanstack__react-virtual.mjs";
 import { J as JSZip } from "../_libs/jszip.mjs";
@@ -9,7 +9,7 @@ import { c as cva } from "../_libs/class-variance-authority.mjs";
 import { d as diffLines, a as diffJson } from "../_libs/diff.mjs";
 import { R as Root, T as Trigger$1, C as Content, a as Close, b as Title, P as Portal$1, O as Overlay } from "../_libs/radix-ui__react-dialog.mjs";
 import { R as Root2, T as Trigger, I as Icon, V as Value, P as Portal, C as Content2, a as Viewport, b as Item, c as ItemIndicator, d as ItemText, S as ScrollUpButton, e as ScrollDownButton } from "../_libs/radix-ui__react-select.mjs";
-import { D as Download, L as LayoutGrid, a as List, S as Settings, C as ChevronDown, b as Check, R as RotateCcw, X, U as Upload, P as Plus, c as Copy, d as CircleAlert, e as ChevronUp, f as ChevronRight, g as Clock, M as MessageSquare, Z as Zap, h as LoaderCircle, W as Wrench, G as Globe, i as User, F as FileTerminal, j as Radio, k as GitCompareArrows, l as Rows3, m as Columns2, E as ExternalLink, n as EyeOff, o as Eye, p as RotateCw, q as Pencil, T as Trash2, r as TriangleAlert, s as Minus, t as CircleCheckBig, u as CircleStop, v as CircleQuestionMark, w as Server, x as Gauge, y as Lock, z as Wifi, A as WifiOff, B as ChevronsUp, H as ChevronsDown, I as Brain, J as Terminal } from "../_libs/lucide-react.mjs";
+import { D as Download, L as LayoutGrid, a as List, S as Settings, C as ChevronDown, b as Check, R as RotateCcw, X, U as Upload, P as Plus, c as Copy, d as CircleAlert, e as ChevronUp, f as ChevronRight, g as Clock, M as MessageSquare, Z as Zap, h as LoaderCircle, W as Wrench, G as Globe, i as User, F as FileTerminal, j as Radio, k as GitCompareArrows, l as Rows3, m as Columns2, E as ExternalLink, n as EyeOff, o as Eye, p as RotateCw, q as Pencil, T as Trash2, A as ArrowUp, r as ArrowDown, s as TriangleAlert, t as Minus, u as CircleCheckBig, v as CircleStop, w as CircleQuestionMark, x as Server, y as Gauge, z as Lock, B as Wifi, H as WifiOff, I as ChevronsUp, J as ChevronsDown, K as Brain, N as Terminal } from "../_libs/lucide-react.mjs";
 import { M as Markdown } from "../_libs/react-markdown.mjs";
 import { a as array, s as string, u as union, o as object, l as literal, n as number, b as boolean, r as record, _ as _enum } from "../_libs/zod.mjs";
 import { R as Root2$1, L as List$1, T as Trigger$2, C as Content$1 } from "../_libs/radix-ui__react-tabs.mjs";
@@ -275,7 +275,7 @@ async function exportLogsAsZip(logs) {
   document.body.removeChild(anchor);
   URL.revokeObjectURL(url);
 }
-const version = "1.11.7";
+const version = "1.12.0";
 const packageJson = {
   version
 };
@@ -1395,12 +1395,26 @@ const STATUS_BADGE_CLASSES = {
   server_error: "",
   pending: "bg-muted text-muted-foreground border-border"
 };
+function CacheTrendIndicator({ trend }) {
+  if (trend === null) return null;
+  const isUp = trend.direction === "up";
+  const Icon2 = isUp ? ArrowUp : ArrowDown;
+  const sign = isUp ? "+" : "-";
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex items-center gap-0.5 text-muted-foreground tabular-nums", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Icon2, { className: isUp ? "size-3 text-emerald-400" : "size-3 text-rose-400" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-mono", children: [
+      sign,
+      formatTokens(trend.delta)
+    ] })
+  ] });
+}
 const LogEntryHeader = reactExports.memo(function({
   log,
   parsedRequest,
   expanded,
   onToggle,
-  suppressApiFormatBadge = false
+  suppressApiFormatBadge = false,
+  cacheTrend = null
 }) {
   const statusCategory = getStatusCategory(log.responseStatus);
   const hasTokens = log.inputTokens !== null || log.outputTokens !== null;
@@ -1490,14 +1504,20 @@ const LogEntryHeader = reactExports.memo(function({
             )
           ] })
         ] }),
-        log.cacheCreationInputTokens !== null && log.cacheCreationInputTokens > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "flex items-center gap-1 text-xs shrink-0", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-mono tabular-nums text-emerald-400", children: [
-          "Cache +",
-          formatTokens(log.cacheCreationInputTokens)
-        ] }) }),
-        log.cacheReadInputTokens !== null && log.cacheReadInputTokens > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "flex items-center gap-1 text-xs shrink-0", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-mono tabular-nums text-purple-400", children: [
-          "Cache ~",
-          formatTokens(log.cacheReadInputTokens)
-        ] }) }),
+        log.cacheCreationInputTokens !== null && log.cacheCreationInputTokens > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex items-center gap-1 text-xs shrink-0", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(CacheTrendIndicator, { trend: cacheTrend?.creation ?? null }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-mono tabular-nums text-emerald-400", children: [
+            "Cache +",
+            formatTokens(log.cacheCreationInputTokens)
+          ] })
+        ] }),
+        log.cacheReadInputTokens !== null && log.cacheReadInputTokens > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex items-center gap-1 text-xs shrink-0", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(CacheTrendIndicator, { trend: cacheTrend?.read ?? null }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-mono tabular-nums text-purple-400", children: [
+            "Cache ~",
+            formatTokens(log.cacheReadInputTokens)
+          ] })
+        ] }),
         messageCount !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex items-center gap-1 text-muted-foreground text-xs shrink-0", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(MessageSquare, { className: "size-3" }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono tabular-nums", children: messageCount })
@@ -2364,7 +2384,8 @@ const LogEntry = reactExports.memo(function({
   log,
   viewMode = "simple",
   suppressApiFormatBadge = false,
-  strip
+  strip,
+  cacheTrend = null
 }) {
   const [expanded, setExpanded] = reactExports.useState(false);
   const [requestCopied, setRequestCopied] = reactExports.useState(false);
@@ -2422,7 +2443,8 @@ const LogEntry = reactExports.memo(function({
           parsedRequest,
           expanded,
           onToggle: () => setExpanded(!expanded),
-          suppressApiFormatBadge
+          suppressApiFormatBadge,
+          cacheTrend
         }
       ),
       expanded && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { onClick: (e) => e.stopPropagation(), onKeyDown: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tabs, { defaultValue: "request", children: [
@@ -2586,7 +2608,8 @@ function computeStats(logs) {
 const ConversationGroup = reactExports.memo(function({
   group,
   viewMode = "simple",
-  strip
+  strip,
+  cacheTrends
 }) {
   const [expanded, setExpanded] = reactExports.useState(false);
   const stats = computeStats(group.logs);
@@ -2616,7 +2639,8 @@ const ConversationGroup = reactExports.memo(function({
         log,
         viewMode,
         suppressApiFormatBadge: !mixed,
-        strip
+        strip,
+        cacheTrend: cacheTrends?.get(log.id) ?? null
       },
       log.id
     )) })
@@ -3873,6 +3897,29 @@ function ProxySettingsTab() {
     ] })
   ] });
 }
+function computeCacheTrends(groups) {
+  const result = /* @__PURE__ */ new Map();
+  for (const group of groups) {
+    const logs = group.logs;
+    for (let i = 1; i < logs.length; i++) {
+      const prev = logs[i - 1];
+      const curr = logs[i];
+      if (prev === void 0 || curr === void 0) continue;
+      result.set(curr.id, {
+        creation: compareField(prev.cacheCreationInputTokens, curr.cacheCreationInputTokens),
+        read: compareField(prev.cacheReadInputTokens, curr.cacheReadInputTokens)
+      });
+    }
+  }
+  return result;
+}
+function compareField(previous, current) {
+  if (current === null) return null;
+  if (previous === null) return null;
+  if (current > previous) return { direction: "up", delta: current - previous };
+  if (current < previous) return { direction: "down", delta: previous - current };
+  return null;
+}
 function truncateSessionId(id) {
   if (id.length <= 30) return id;
   return id.slice(0, 12) + "…" + id.slice(-12);
@@ -3963,6 +4010,7 @@ function ProxyViewer({
   }, [logs]);
   const parentRef = reactExports.useRef(null);
   const groups = reactExports.useMemo(() => groupLogsByConversation(logs), [logs]);
+  const cacheTrends = reactExports.useMemo(() => computeCacheTrends(groups), [groups]);
   const renderGroups = logs.length > 0 && groupedView && !(groups.length === 1 && groups[0]?.logs.length === logs.length);
   const rowVirtualizer = useVirtualizer({
     count: renderGroups ? groups.length : logs.length,
@@ -4103,7 +4151,15 @@ function ProxyViewer({
                   width: "100%",
                   transform: `translateY(${virtualRow.start}px)`
                 },
-                children: /* @__PURE__ */ jsxRuntimeExports.jsx(ConversationGroup, { group, viewMode, strip })
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  ConversationGroup,
+                  {
+                    group,
+                    viewMode,
+                    strip,
+                    cacheTrends
+                  }
+                )
               },
               group.id
             );
@@ -4122,7 +4178,15 @@ function ProxyViewer({
                   width: "100%",
                   transform: `translateY(${virtualRow.start}px)`
                 },
-                children: /* @__PURE__ */ jsxRuntimeExports.jsx(LogEntry, { log, viewMode, strip })
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  LogEntry,
+                  {
+                    log,
+                    viewMode,
+                    strip,
+                    cacheTrend: cacheTrends.get(log.id) ?? null
+                  }
+                )
               },
               log.id
             );

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-jl5h5rzb.mjs");
+  const { tsrStartManifest } = await import("../_tanstack-start-manifest_v-l1kWkG0h.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-CYFPDggE.mjs").then((n) => n.r);
+  const routerEntry = await import("./router-PZjNwOcw.mjs").then((n) => n.r);
   const startEntry = await import("./start-HYkvq4Ni.mjs");
   return { startEntry, routerEntry };
 }

package/.output/server/_ssr/{router-CYFPDggE.mjs → router-PZjNwOcw.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-DZx2yk8v.css";
 const Route$h = createRootRoute({
   head: () => ({
     meta: [
@@ -68,7 +68,7 @@ function RootDocument({ children }) {
     ] })
   ] });
 }
-const $$splitComponentImporter = () => import("./index-i-uTB3Y3.mjs");
+const $$splitComponentImporter = () => import("./index-DhChP_jV.mjs");
 const Route$g = createFileRoute("/")({
   component: lazyRouteComponent($$splitComponentImporter, "component")
 });

package/.output/server/{_tanstack-start-manifest_v-jl5h5rzb.mjs → _tanstack-start-manifest_v-l1kWkG0h.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-7LuJWU4Q.js"], "assets": [] }, "/": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/index.tsx", "assets": [], "preloads": ["/assets/index-D8CKc4zg.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-7LuJWU4Q.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-BYCM7aJx.js"], "assets": [] }, "/": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/index.tsx", "assets": [], "preloads": ["/assets/index-DVgdkDgq.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-BYCM7aJx.js" });
 export {
   tsrStartManifest
 };

package/.output/server/index.mjs

@@ -35,54 +35,54 @@ const headers = ((m) => function headersRouteRule(event) {
   }
 });
 const assets = {
+  "/assets/alibaba-TTwafVwX.svg": {
+    "type": "image/svg+xml",
+    "etag": '"171b-6dyV5K8QjiaY35sN9qNprh9zDIs"',
+    "mtime": "2026-06-09T08:02:30.828Z",
+    "size": 5915,
+    "path": "../public/assets/alibaba-TTwafVwX.svg"
+  },
   "/assets/minimax-BPMzvuL-.jpeg": {
     "type": "image/jpeg",
     "etag": '"1b06-IwivU89ko5UTMUM1/t7hn4sQK9A"',
-    "mtime": "2026-06-08T10:48:17.641Z",
+    "mtime": "2026-06-09T08:02:30.828Z",
     "size": 6918,
     "path": "../public/assets/minimax-BPMzvuL-.jpeg"
   },
-  "/assets/alibaba-TTwafVwX.svg": {
-    "type": "image/svg+xml",
-    "etag": '"171b-6dyV5K8QjiaY35sN9qNprh9zDIs"',
-    "mtime": "2026-06-08T10:48:17.641Z",
-    "size": 5915,
-    "path": "../public/assets/alibaba-TTwafVwX.svg"
+  "/assets/index-DZx2yk8v.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"
   },
   "/assets/zhipuai-BPNAnxo-.svg": {
     "type": "image/svg+xml",
     "etag": '"2bf8-hNaLCTi89nOFCsIIfWpP/jrfo0s"',
-    "mtime": "2026-06-08T10:48:17.641Z",
+    "mtime": "2026-06-09T08:02:30.828Z",
     "size": 11256,
     "path": "../public/assets/zhipuai-BPNAnxo-.svg"
   },
-  "/assets/index-DiYqfnSp.css": {
-    "type": "text/css; charset=utf-8",
-    "etag": '"11755-g+paI7gxmWkWiKXnB74OdQXg0jE"',
-    "mtime": "2026-06-08T10:48:17.641Z",
-    "size": 71509,
-    "path": "../public/assets/index-DiYqfnSp.css"
-  },
-  "/assets/main-7LuJWU4Q.js": {
+  "/assets/main-BYCM7aJx.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"50599-3DNmqszgLIzQHbEIKYFnnD++vQs"',
-    "mtime": "2026-06-08T10:48:17.641Z",
+    "etag": '"50599-LT3fOJsfcl49n+Hp+rSe62uyiuk"',
+    "mtime": "2026-06-09T08:02:30.830Z",
     "size": 329113,
-    "path": "../public/assets/main-7LuJWU4Q.js"
+    "path": "../public/assets/main-BYCM7aJx.js"
   },
   "/assets/qwen-CONDcHqt.png": {
     "type": "image/png",
     "etag": '"572c3-cdJAPaHdOvFCGzuaQjagdgOu6XE"',
-    "mtime": "2026-06-08T10:48:17.641Z",
+    "mtime": "2026-06-09T08:02:30.830Z",
     "size": 357059,
     "path": "../public/assets/qwen-CONDcHqt.png"
   },
-  "/assets/index-D8CKc4zg.js": {
+  "/assets/index-DVgdkDgq.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"8a3c6-soGG4aENc//lrPUXq49D1Gz8wRA"',
-    "mtime": "2026-06-08T10:48:17.642Z",
-    "size": 566214,
-    "path": "../public/assets/index-D8CKc4zg.js"
+    "etag": '"8a87f-jt4qwgWrMm8cZtArzPx7qX8p12k"',
+    "mtime": "2026-06-09T08:02:30.830Z",
+    "size": 567423,
+    "path": "../public/assets/index-DVgdkDgq.js"
   }
 };
 function readAsset(id) {

package/README.md

@@ -40,7 +40,7 @@ llm-inspector
 ### Docker
 
 ```bash
-docker-compose up -d
+cd docker && docker compose up -d
 ```
 
 ### 源码运行

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tonyclaw/llm-inspector",
-  "version": "1.11.7",
+  "version": "1.12.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

@@ -13,6 +13,7 @@ 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";
 
 function truncateSessionId(id: string): string {
   if (id.length <= 30) return id;
@@ -124,6 +125,7 @@ export function ProxyViewer({
   const parentRef = useRef<HTMLDivElement>(null);
 
   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 +305,12 @@ export function ProxyViewer({
                         transform: `translateY(${virtualRow.start}px)`,
                       }}
                     >
-                      <ConversationGroup group={group} viewMode={viewMode} strip={strip} />
+                      <ConversationGroup
+                        group={group}
+                        viewMode={viewMode}
+                        strip={strip}
+                        cacheTrends={cacheTrends}
+                      />
                     </div>
                   );
                 } else {
@@ -322,7 +329,12 @@ 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}
+                      />
                     </div>
                   );
                 }

package/src/components/proxy-viewer/ConversationGroup.tsx

@@ -9,12 +9,18 @@ import {
   type ConversationGroupData,
 } from "./ConversationHeader";
 import { LogEntry } from "./LogEntry";
+import type { CacheTrendEntry } from "./cacheTrend";
 
 export type ConversationGroupProps = {
   group: ConversationGroupData;
   viewMode?: "simple" | "full";
   /** Live strip-Claude-Code-billing-header flag from the viewer container. */
   strip: boolean;
+  /**
+   * Pre-computed per-log cache token trend map (keyed by `log.id`) shared
+   * across the whole viewer. Each `LogEntry` looks up its own entry.
+   */
+  cacheTrends?: Map<number, CacheTrendEntry>;
 };
 
 function computeStats(logs: CapturedLog[]): {
@@ -34,6 +40,7 @@ export const ConversationGroup = memo(function ({
   group,
   viewMode = "simple",
   strip,
+  cacheTrends,
 }: ConversationGroupProps): JSX.Element {
   const [expanded, setExpanded] = useState(false);
 
@@ -73,6 +80,7 @@ export const ConversationGroup = memo(function ({
               viewMode={viewMode}
               suppressApiFormatBadge={!mixed}
               strip={strip}
+              cacheTrend={cacheTrends?.get(log.id) ?? null}
             />
           ))}
         </div>

package/src/components/proxy-viewer/LogEntry.tsx

@@ -12,6 +12,7 @@ import { LogEntryHeader } from "./LogEntryHeader";
 import { ReplayDialog } from "./ReplayDialog";
 import { ResponseView } from "./ResponseView";
 import { StreamingChunkSequence } from "./StreamingChunkSequence";
+import type { CacheTrendEntry } from "./cacheTrend";
 
 export type LogEntryProps = {
   log: CapturedLog;
@@ -25,6 +26,11 @@ export type LogEntryProps = {
    * cost).
    */
   strip: boolean;
+  /**
+   * Per-log cache token trend, looked up in the viewer-level trend map.
+   * `null` (or absent) means the header should render with no arrows.
+   */
+  cacheTrend?: CacheTrendEntry | null;
 };
 
 /**
@@ -131,6 +137,7 @@ export const LogEntry = memo(function ({
   viewMode = "simple",
   suppressApiFormatBadge = false,
   strip,
+  cacheTrend = null,
 }: LogEntryProps): JSX.Element {
   const [expanded, setExpanded] = useState<boolean>(false);
   const [requestCopied, setRequestCopied] = useState<boolean>(false);
@@ -193,6 +200,7 @@ export const LogEntry = memo(function ({
           expanded={expanded}
           onToggle={() => setExpanded(!expanded)}
           suppressApiFormatBadge={suppressApiFormatBadge}
+          cacheTrend={cacheTrend}
         />
 
         {expanded && (

package/src/components/proxy-viewer/LogEntryHeader.tsx

@@ -1,4 +1,6 @@
 import {
+  ArrowDown,
+  ArrowUp,
   ChevronDown,
   ChevronRight,
   Clock,
@@ -17,6 +19,7 @@ import { cn, formatTokens, getStatusCategory, type StatusCategory } from "../../
 import type { CapturedLog, InspectorRequest } from "../../proxy/schemas";
 import { Badge } from "../ui/badge";
 import { ProviderLogo, detectProvider } from "../providers/ProviderLogo";
+import type { CacheTrend } from "./cacheTrend";
 
 function formatElapsed(ms: number): string {
   if (ms < 1000) return `${ms}ms`;
@@ -30,6 +33,26 @@ const STATUS_BADGE_CLASSES: Record<StatusCategory, string> = {
   pending: "bg-muted text-muted-foreground border-border",
 };
 
+/**
+ * Inline trend indicator: small arrow (green up / red down) plus the absolute
+ * delta in compact form. Returns `null` when there is no trend to display.
+ */
+function CacheTrendIndicator({ trend }: { trend: CacheTrend | null }): JSX.Element | null {
+  if (trend === null) return null;
+  const isUp = trend.direction === "up";
+  const Icon = isUp ? ArrowUp : ArrowDown;
+  const sign = isUp ? "+" : "-";
+  return (
+    <span className="flex items-center gap-0.5 text-muted-foreground tabular-nums">
+      <Icon className={isUp ? "size-3 text-emerald-400" : "size-3 text-rose-400"} />
+      <span className="font-mono">
+        {sign}
+        {formatTokens(trend.delta)}
+      </span>
+    </span>
+  );
+}
+
 export type LogEntryHeaderProps = {
   log: CapturedLog;
   parsedRequest: InspectorRequest | null;
@@ -37,6 +60,12 @@ export type LogEntryHeaderProps = {
   onToggle: () => void;
   /** Suppress the API format badge when log is displayed within a group */
   suppressApiFormatBadge?: boolean;
+  /**
+   * Per-log cache token trend (creation + read) relative to the previous log
+   * in the same conversation group. When `undefined` or a field is `null`,
+   * the corresponding cache span renders as it did before — no arrow.
+   */
+  cacheTrend?: { creation: CacheTrend | null; read: CacheTrend | null } | null;
 };
 
 export const LogEntryHeader = memo(function ({
@@ -45,6 +74,7 @@ export const LogEntryHeader = memo(function ({
   expanded,
   onToggle,
   suppressApiFormatBadge = false,
+  cacheTrend = null,
 }: LogEntryHeaderProps): JSX.Element {
   const statusCategory = getStatusCategory(log.responseStatus);
 
@@ -163,6 +193,7 @@ export const LogEntryHeader = memo(function ({
       {/* Cache tokens */}
       {log.cacheCreationInputTokens !== null && log.cacheCreationInputTokens > 0 && (
         <span className="flex items-center gap-1 text-xs shrink-0">
+          <CacheTrendIndicator trend={cacheTrend?.creation ?? null} />
           <span className="font-mono tabular-nums text-emerald-400">
             Cache +{formatTokens(log.cacheCreationInputTokens)}
           </span>
@@ -170,6 +201,7 @@ export const LogEntryHeader = memo(function ({
       )}
       {log.cacheReadInputTokens !== null && log.cacheReadInputTokens > 0 && (
         <span className="flex items-center gap-1 text-xs shrink-0">
+          <CacheTrendIndicator trend={cacheTrend?.read ?? null} />
           <span className="font-mono tabular-nums text-purple-400">
             Cache ~{formatTokens(log.cacheReadInputTokens)}
           </span>