@tonyclaw/llm-inspector 1.16.4 → 1.16.5

package/.output/server/index.mjs

@@ -35,54 +35,96 @@ const headers = ((m) => function headersRouteRule(event) {
   }
 });
 const assets = {
+  "/assets/alibaba-TTwafVwX.svg": {
+    "type": "image/svg+xml",
+    "etag": '"171b-6dyV5K8QjiaY35sN9qNprh9zDIs"',
+    "mtime": "2026-06-15T12:23:59.073Z",
+    "size": 5915,
+    "path": "../public/assets/alibaba-TTwafVwX.svg"
+  },
   "/assets/minimax-BPMzvuL-.jpeg": {
     "type": "image/jpeg",
     "etag": '"1b06-IwivU89ko5UTMUM1/t7hn4sQK9A"',
-    "mtime": "2026-06-15T02:31:02.872Z",
+    "mtime": "2026-06-15T12:23:59.073Z",
     "size": 6918,
     "path": "../public/assets/minimax-BPMzvuL-.jpeg"
   },
-  "/assets/alibaba-TTwafVwX.svg": {
-    "type": "image/svg+xml",
-    "etag": '"171b-6dyV5K8QjiaY35sN9qNprh9zDIs"',
-    "mtime": "2026-06-15T02:31:02.873Z",
-    "size": 5915,
-    "path": "../public/assets/alibaba-TTwafVwX.svg"
+  "/assets/CompareDrawer-C1w4KUGZ.js": {
+    "type": "text/javascript; charset=utf-8",
+    "etag": '"4a10-U7vRVdbG90QCagHyB/PsN2Edv9Y"',
+    "mtime": "2026-06-15T12:23:59.073Z",
+    "size": 18960,
+    "path": "../public/assets/CompareDrawer-C1w4KUGZ.js"
+  },
+  "/assets/json-viewer-C_QUhGeu.js": {
+    "type": "text/javascript; charset=utf-8",
+    "etag": '"1e60c-NxhepLRPlTKqcPUc59jhJtOyGpg"',
+    "mtime": "2026-06-15T12:23:59.074Z",
+    "size": 124428,
+    "path": "../public/assets/json-viewer-C_QUhGeu.js"
   },
-  "/assets/index-DRRCmu5p.css": {
+  "/assets/index-BGzHFOEX.css": {
     "type": "text/css; charset=utf-8",
-    "etag": '"15b6a-YPwntwMQpIU2AWIj8lgGWZpCwQw"',
-    "mtime": "2026-06-15T02:31:02.875Z",
-    "size": 88938,
-    "path": "../public/assets/index-DRRCmu5p.css"
+    "etag": '"16d02-Bx7KW/5wmN1RfMrbWqhaqF7lGHk"',
+    "mtime": "2026-06-15T12:23:59.073Z",
+    "size": 93442,
+    "path": "../public/assets/index-BGzHFOEX.css"
+  },
+  "/assets/ReplayDialog-DR2Sgq_g.js": {
+    "type": "text/javascript; charset=utf-8",
+    "etag": '"11b1-xYgR1cdDnesImArvyIDX3s2xRMU"',
+    "mtime": "2026-06-15T12:23:59.073Z",
+    "size": 4529,
+    "path": "../public/assets/ReplayDialog-DR2Sgq_g.js"
   },
-  "/assets/main-DbWwVQFh.js": {
+  "/assets/ResponseView-ackes7_g.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"50599-mPNNNxfSpwFWn5i6kPquWEqJjGk"',
-    "mtime": "2026-06-15T02:31:02.875Z",
-    "size": 329113,
-    "path": "../public/assets/main-DbWwVQFh.js"
+    "etag": '"6e82-UP1WD/TqChwiuI7DV8LDxr8mcoI"',
+    "mtime": "2026-06-15T12:23:59.074Z",
+    "size": 28290,
+    "path": "../public/assets/ResponseView-ackes7_g.js"
   },
   "/assets/zhipuai-BPNAnxo-.svg": {
     "type": "image/svg+xml",
     "etag": '"2bf8-hNaLCTi89nOFCsIIfWpP/jrfo0s"',
-    "mtime": "2026-06-15T02:31:02.873Z",
+    "mtime": "2026-06-15T12:23:59.073Z",
     "size": 11256,
     "path": "../public/assets/zhipuai-BPNAnxo-.svg"
   },
+  "/assets/RequestAnatomy-DAre35kj.js": {
+    "type": "text/javascript; charset=utf-8",
+    "etag": '"141b-+jsq3YAE5FysxZARhUPCzQUpXJE"',
+    "mtime": "2026-06-15T12:23:59.074Z",
+    "size": 5147,
+    "path": "../public/assets/RequestAnatomy-DAre35kj.js"
+  },
+  "/assets/main-CDMdNDY_.js": {
+    "type": "text/javascript; charset=utf-8",
+    "etag": '"505ae-1nSD340FKDRNgunwXT0ErZchYkU"',
+    "mtime": "2026-06-15T12:23:59.074Z",
+    "size": 329134,
+    "path": "../public/assets/main-CDMdNDY_.js"
+  },
+  "/assets/StreamingChunkSequence-GrXwIGKA.js": {
+    "type": "text/javascript; charset=utf-8",
+    "etag": '"d72-eczKwdvLd8GmG1QNwNn/d+VEOq0"',
+    "mtime": "2026-06-15T12:23:59.074Z",
+    "size": 3442,
+    "path": "../public/assets/StreamingChunkSequence-GrXwIGKA.js"
+  },
+  "/assets/index-DX88k9br.js": {
+    "type": "text/javascript; charset=utf-8",
+    "etag": '"738e0-qSt/VXgdC2y0xa/XDlbeCzFrP6k"',
+    "mtime": "2026-06-15T12:23:59.073Z",
+    "size": 473312,
+    "path": "../public/assets/index-DX88k9br.js"
+  },
   "/assets/qwen-CONDcHqt.png": {
     "type": "image/png",
     "etag": '"572c3-cdJAPaHdOvFCGzuaQjagdgOu6XE"',
-    "mtime": "2026-06-15T02:31:02.875Z",
+    "mtime": "2026-06-15T12:23:59.073Z",
     "size": 357059,
     "path": "../public/assets/qwen-CONDcHqt.png"
-  },
-  "/assets/index-X7CHS7fS.js": {
-    "type": "text/javascript; charset=utf-8",
-    "etag": '"9c554-RW/7IDotWnzOK06cvwJGAOWPrdk"',
-    "mtime": "2026-06-15T02:31:02.875Z",
-    "size": 640340,
-    "path": "../public/assets/index-X7CHS7fS.js"
   }
 };
 function readAsset(id) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tonyclaw/llm-inspector",
-  "version": "1.16.4",
+  "version": "1.16.5",
   "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/OnboardingBanner.tsx

@@ -46,10 +46,10 @@ export function OnboardingBanner(): JSX.Element | null {
         onClick={() => {
           void markSeen();
         }}
-        className="inline-flex items-center gap-1.5 text-xs px-2.5 py-1.5 rounded-md border border-amber-500/40 text-amber-700 dark:text-amber-300 hover:bg-amber-500/10 transition-colors shrink-0"
+        className="inline-flex items-center gap-1.5 text-xs h-8 px-3 rounded-md border border-amber-500/40 text-amber-700 dark:text-amber-300 hover:bg-amber-500/10 transition-colors shrink-0"
         aria-label="Dismiss onboarding tip"
       >
-        <Check className="size-3" />
+        <Check className="size-3.5" />
         Got it
       </button>
       <button

package/src/components/ProxyViewer.tsx

@@ -1,4 +1,4 @@
-import { type JSX, useCallback, useEffect, useMemo, useState } from "react";
+import { type JSX, useCallback, useEffect, useMemo, useRef, useState, Suspense } from "react";
 import { Download } from "lucide-react";
 
 import type { CapturedLog } from "../proxy/schemas";
@@ -11,8 +11,9 @@ import { crabVariants } from "./ui/crab-variants";
 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 { LazyCompareDrawer } from "./proxy-viewer/lazy";
 import { buildValidPredecessors } from "./proxy-viewer/viewerState";
+import { useKeyboardNavigation } from "./proxy-viewer/useKeyboardNavigation";
 
 function truncateSessionId(id: string): string {
   if (id.length <= 30) return id;
@@ -119,6 +120,9 @@ export function ProxyViewer({
   const [crabEntrancePhase, setCrabEntrancePhase] = useState<"hidden" | "playing" | "done">(
     "hidden",
   );
+  const logListRef = useRef<HTMLDivElement>(null);
+  const logListWrapperRef = useRef<HTMLDivElement>(null);
+  useKeyboardNavigation(logListRef, logListWrapperRef);
 
   useEffect(() => {
     const perCrabDuration = 400;
@@ -162,9 +166,9 @@ export function ProxyViewer({
   );
 
   return (
-    <div className="max-w-[1200px] mx-auto flex flex-col h-screen" style={{ maxHeight: "100vh" }}>
+    <div className="max-w-[1400px] xl:max-w-[1600px] 2xl:max-w-[1800px] mx-auto px-6 pb-6">
       {/* Brand row */}
-      <div className="flex items-end px-6 pt-6 pb-8 relative">
+      <div className="flex items-end pt-6 pb-8 relative">
         <h1 className="text-lg font-bold flex items-end gap-2 absolute left-1/2 -translate-x-1/2 whitespace-nowrap">
           {/* Crab family — hover to animate together */}
           <span className="flex items-end gap-1 group cursor-default" aria-hidden="true">
@@ -217,7 +221,7 @@ export function ProxyViewer({
       </div>
 
       {/* Controls + Filters */}
-      <div className="flex items-center gap-3 px-6 mb-4">
+      <div className="flex items-center gap-3 mb-4">
         <Select value={selectedSession} onValueChange={onSessionChange}>
           <SelectTrigger className="flex-1 max-w-[350px] text-xs">
             <SelectValue placeholder="All sessions" />
@@ -248,7 +252,7 @@ export function ProxyViewer({
           <button
             type="button"
             onClick={() => onViewModeChange("simple")}
-            className={`px-2 py-1 cursor-pointer transition-colors text-xs ${
+            className={`h-8 px-3 cursor-pointer transition-colors text-xs ${
               viewMode === "simple"
                 ? "bg-muted text-foreground"
                 : "text-muted-foreground hover:bg-muted/50"
@@ -259,7 +263,7 @@ export function ProxyViewer({
           <button
             type="button"
             onClick={() => onViewModeChange("full")}
-            className={`px-2 py-1 cursor-pointer transition-colors text-xs ${
+            className={`h-8 px-3 cursor-pointer transition-colors text-xs ${
               viewMode === "full"
                 ? "bg-muted text-foreground"
                 : "text-muted-foreground hover:bg-muted/50"
@@ -282,14 +286,14 @@ export function ProxyViewer({
               void handleExport();
             }}
             disabled={exporting}
-            className="text-xs text-muted-foreground hover:text-foreground transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed inline-flex items-center gap-1"
+            className="h-8 px-3 text-xs text-muted-foreground hover:text-foreground transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed inline-flex items-center gap-1.5 rounded-md hover:bg-muted"
             title="Export all logs as JSON ZIP"
           >
             {exporting ? (
               <span>Exporting...</span>
             ) : (
               <>
-                <Download className="size-3" />
+                <Download className="size-3.5" />
                 <span>Export</span>
               </>
             )}
@@ -298,7 +302,7 @@ export function ProxyViewer({
         <button
           type="button"
           onClick={onClearAll}
-          className="text-xs text-muted-foreground hover:text-foreground transition-colors cursor-pointer"
+          className="h-8 px-3 text-xs text-muted-foreground hover:text-foreground transition-colors cursor-pointer rounded-md hover:bg-muted"
           title="Clear all logs"
         >
           Clear
@@ -306,7 +310,7 @@ export function ProxyViewer({
       </div>
 
       {/* Log list */}
-      <div className="flex-1 min-h-0 px-6 pb-6">
+      <div>
         {logs.length === 0 ? (
           <div className="text-center text-muted-foreground py-16 space-y-4">
             <p className="text-sm">No requests captured yet.</p>
@@ -314,27 +318,35 @@ export function ProxyViewer({
             <CopyableCommand command="LLM_BASE_URL=http://localhost:25947/proxy <your-tool>" />
           </div>
         ) : (
-          <div className="overflow-y-auto h-full flex flex-col gap-2">
-            {groups.map((group) => (
-              <ConversationGroup
-                key={group.id}
-                group={group}
-                viewMode={viewMode}
-                strip={strip}
-                cacheTrends={cacheTrends}
-                onCompareWithPrevious={handleCompareWithPrevious}
-                comparisonPredecessors={comparisonPredecessors}
-                onClearGroup={onClearGroup}
-                standalone={groups.length === 1}
-              />
-            ))}
+          <div
+            ref={logListWrapperRef}
+            tabIndex={0}
+            className="flex flex-col gap-2 focus:outline-none"
+          >
+            <div ref={logListRef}>
+              {groups.map((group) => (
+                <ConversationGroup
+                  key={group.id}
+                  group={group}
+                  viewMode={viewMode}
+                  strip={strip}
+                  cacheTrends={cacheTrends}
+                  onCompareWithPrevious={handleCompareWithPrevious}
+                  comparisonPredecessors={comparisonPredecessors}
+                  onClearGroup={onClearGroup}
+                  standalone={groups.length === 1}
+                />
+              ))}
+            </div>
           </div>
         )}
       </div>
 
       {/* Compare drawer — sibling of the log list, not a route change. */}
       {comparePair !== null && (
-        <CompareDrawer left={comparePair[0]} right={comparePair[1]} onClose={closeCompare} />
+        <Suspense fallback={null}>
+          <LazyCompareDrawer left={comparePair[0]} right={comparePair[1]} onClose={closeCompare} />
+        </Suspense>
       )}
     </div>
   );

package/src/components/ProxyViewerContainer.tsx

@@ -67,8 +67,6 @@ export function ProxyViewerContainer(): JSX.Element {
   // connection never re-opens on filter change — we always carry the full
   // set and derive the displayed view with `useMemo` below.
   const [allLogs, setAllLogs] = useState<CapturedLog[]>([]);
-  const [sessions, setSessions] = useState<string[]>([]);
-  const [models, setModels] = useState<string[]>([]);
   const [selectedSession, setSelectedSession] = useState("__all__");
   const [selectedModel, setSelectedModel] = useState("__all__");
   const [viewMode, setViewMode] = useState<"simple" | "full">("simple");
@@ -78,7 +76,6 @@ export function ProxyViewerContainer(): JSX.Element {
 
   // O(1) log lookup by id
   const logIndexRef = useRef<Map<number, number>>(new Map());
-  const logsRef = useRef<CapturedLog[]>([]);
 
   // Debounce buffer for SSE updates
   const pendingUpdatesRef = useRef<CapturedLog[]>([]);
@@ -90,6 +87,8 @@ export function ProxyViewerContainer(): JSX.Element {
     () => filterLogs(allLogs, selectedSession, selectedModel),
     [allLogs, selectedSession, selectedModel],
   );
+  const sessions = useMemo(() => extractSessions(allLogs), [allLogs]);
+  const models = useMemo(() => extractModels(allLogs), [allLogs]);
 
   const flushUpdates = useCallback(() => {
     flushTimerRef.current = null;
@@ -99,8 +98,6 @@ export function ProxyViewerContainer(): JSX.Element {
 
     setAllLogs((prev) => {
       let next = prev;
-      let sessionsChanged = false;
-      let modelsChanged = false;
       for (const log of updates) {
         const idx = logIndexRef.current.get(log.id);
         if (idx !== undefined) {
@@ -110,19 +107,10 @@ export function ProxyViewerContainer(): JSX.Element {
           logIndexRef.current.set(log.id, next.length);
           next = [...next, log];
         }
-        if (log.sessionId !== null && log.sessionId !== "" && !sessions.includes(log.sessionId)) {
-          sessionsChanged = true;
-        }
-        if (log.model !== null && log.model !== "" && !models.includes(log.model)) {
-          modelsChanged = true;
-        }
       }
-      logsRef.current = next;
-      if (sessionsChanged) setSessions((s) => extractSessions(next));
-      if (modelsChanged) setModels((m) => extractModels(next));
       return next;
     });
-  }, [sessions, models]);
+  }, []);
 
   const scheduleUpdate = useCallback(
     (log: CapturedLog) => {
@@ -173,10 +161,7 @@ export function ProxyViewerContainer(): JSX.Element {
             if (log !== undefined) idx.set(log.id, i);
           }
           logIndexRef.current = idx;
-          logsRef.current = update.logs;
           setAllLogs(update.logs);
-          setSessions(extractSessions(update.logs));
-          setModels(extractModels(update.logs));
           setError(null);
         } else if (update.type === "update") {
           scheduleUpdate(update.log);
@@ -223,10 +208,7 @@ export function ProxyViewerContainer(): JSX.Element {
           return;
         }
         logIndexRef.current.clear();
-        logsRef.current = [];
         setAllLogs([]);
-        setSessions([]);
-        setModels([]);
         setError(null);
       } catch (err) {
         setError(err instanceof Error ? err.message : "Unknown error clearing logs");
@@ -257,9 +239,6 @@ export function ProxyViewerContainer(): JSX.Element {
             if (log !== undefined) idx.set(log.id, i);
           }
           logIndexRef.current = idx;
-          logsRef.current = remaining;
-          setSessions(extractSessions(remaining));
-          setModels(extractModels(remaining));
           return remaining;
         });
         setError(null);

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

@@ -90,7 +90,7 @@ export const ConversationGroup = memo(function ({
       )}
 
       {shouldRenderConversationContent(standalone, expanded) && (
-        <div className="max-h-[70vh] overflow-y-auto">
+        <div>
           {turnGroups.map((tg) => (
             <TurnGroup
               key={tg.turnIndex}

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

@@ -78,11 +78,14 @@ export function ConversationHeader({
     <div
       role="button"
       tabIndex={0}
+      data-nav-id={`conv-${conversationId}`}
+      data-nav-action={expanded ? "collapse" : "expand"}
       className={cn(
         "flex items-center gap-3 px-3 py-2 cursor-pointer transition-colors",
         "hover:bg-muted/50",
         "select-none",
         "border border-border rounded-lg mb-2 bg-background sticky top-0 z-10",
+        "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-none",
       )}
       onClick={onToggle}
       onKeyDown={(e) => {
@@ -174,7 +177,7 @@ export function ConversationHeader({
           onClick={handleClearClick}
           aria-label={`Clear group (${totalCalls} request${totalCalls !== 1 ? "s" : ""})`}
           title="Clear this group"
-          className="text-muted-foreground hover:text-foreground transition-colors shrink-0 inline-flex items-center justify-center size-6 rounded hover:bg-muted cursor-pointer"
+          className="text-muted-foreground hover:text-foreground transition-colors shrink-0 inline-flex items-center justify-center size-8 rounded hover:bg-muted cursor-pointer"
         >
           <Trash2 className="size-3.5" />
         </button>