@tonyclaw/llm-inspector 1.16.4 → 1.17.0

package/.output/server/{_tanstack-start-manifest_v-BWfLeIsC.mjs → _tanstack-start-manifest_v-CphS4rZd.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/mcp", "/api/models", "/api/providers", "/api/sessions", "/proxy/$"], "preloads": ["/assets/main-DbWwVQFh.js"], "assets": [] }, "/": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/index.tsx", "assets": [], "preloads": ["/assets/index-X7CHS7fS.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/providers/scan"] }, "/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/providers/scan": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/providers.scan.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", "children": ["/api/providers/$providerId/test/log"] }, "/api/providers/$providerId/test/log": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/providers.$providerId.test.log.ts" } }, "clientEntry": "/assets/main-DbWwVQFh.js" });
+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-DRu10KNQ.js"], "assets": [] }, "/": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/index.tsx", "assets": [], "preloads": ["/assets/index-DpbutOvo.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/providers/scan"] }, "/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/providers/scan": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/providers.scan.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", "children": ["/api/providers/$providerId/test/log"] }, "/api/providers/$providerId/test/log": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/providers.$providerId.test.log.ts" } }, "clientEntry": "/assets/main-DRu10KNQ.js" });
 export {
   tsrStartManifest
 };

package/.output/server/index.mjs

@@ -35,54 +35,96 @@ const headers = ((m) => function headersRouteRule(event) {
   }
 });
 const assets = {
-  "/assets/minimax-BPMzvuL-.jpeg": {
-    "type": "image/jpeg",
-    "etag": '"1b06-IwivU89ko5UTMUM1/t7hn4sQK9A"',
-    "mtime": "2026-06-15T02:31:02.872Z",
-    "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",
+    "mtime": "2026-06-16T13:43:26.730Z",
     "size": 5915,
     "path": "../public/assets/alibaba-TTwafVwX.svg"
   },
-  "/assets/index-DRRCmu5p.css": {
+  "/assets/CompareDrawer-C4fie5g5.js": {
+    "type": "text/javascript; charset=utf-8",
+    "etag": '"4a10-3djWuOwKSKXlQPoy4NHzqd2tggE"',
+    "mtime": "2026-06-16T13:43:26.730Z",
+    "size": 18960,
+    "path": "../public/assets/CompareDrawer-C4fie5g5.js"
+  },
+  "/assets/index-DoGvsnbA.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": '"16d26-qw65JIM4oxztXa/jhWYD9PPuvfA"',
+    "mtime": "2026-06-16T13:43:26.730Z",
+    "size": 93478,
+    "path": "../public/assets/index-DoGvsnbA.css"
+  },
+  "/assets/index-DpbutOvo.js": {
+    "type": "text/javascript; charset=utf-8",
+    "etag": '"744e2-P9RhN2wY9pxyu6b/wpeHlefe59k"',
+    "mtime": "2026-06-16T13:43:26.731Z",
+    "size": 476386,
+    "path": "../public/assets/index-DpbutOvo.js"
+  },
+  "/assets/ReplayDialog-Dme5uOR9.js": {
+    "type": "text/javascript; charset=utf-8",
+    "etag": '"11b1-SKRfqUa9SY8yNi8IxWzCC6VvjQI"',
+    "mtime": "2026-06-16T13:43:26.730Z",
+    "size": 4529,
+    "path": "../public/assets/ReplayDialog-Dme5uOR9.js"
+  },
+  "/assets/json-viewer-BV-WUszW.js": {
+    "type": "text/javascript; charset=utf-8",
+    "etag": '"1e60c-26TCWxphlokObc5HBPeY7NRlcXU"',
+    "mtime": "2026-06-16T13:43:26.731Z",
+    "size": 124428,
+    "path": "../public/assets/json-viewer-BV-WUszW.js"
   },
-  "/assets/main-DbWwVQFh.js": {
+  "/assets/RequestAnatomy-ChBLDNFH.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": '"141b-nxiiCAE0vs7SLaqcUISSgXq1IGo"',
+    "mtime": "2026-06-16T13:43:26.730Z",
+    "size": 5147,
+    "path": "../public/assets/RequestAnatomy-ChBLDNFH.js"
+  },
+  "/assets/minimax-BPMzvuL-.jpeg": {
+    "type": "image/jpeg",
+    "etag": '"1b06-IwivU89ko5UTMUM1/t7hn4sQK9A"',
+    "mtime": "2026-06-16T13:43:26.730Z",
+    "size": 6918,
+    "path": "../public/assets/minimax-BPMzvuL-.jpeg"
+  },
+  "/assets/main-DRu10KNQ.js": {
+    "type": "text/javascript; charset=utf-8",
+    "etag": '"505ae-BP/aj8/2FZWooG/jXqGZEmVfl3E"',
+    "mtime": "2026-06-16T13:43:26.730Z",
+    "size": 329134,
+    "path": "../public/assets/main-DRu10KNQ.js"
+  },
+  "/assets/StreamingChunkSequence-zeJZQLqT.js": {
+    "type": "text/javascript; charset=utf-8",
+    "etag": '"d72-nuJyJopptXOHt0oPHw//D9VSW+k"',
+    "mtime": "2026-06-16T13:43:26.731Z",
+    "size": 3442,
+    "path": "../public/assets/StreamingChunkSequence-zeJZQLqT.js"
+  },
+  "/assets/ResponseView-wGeqBzVU.js": {
+    "type": "text/javascript; charset=utf-8",
+    "etag": '"6e82-ZzZo1WT+DlE16b9M9AMC/410RcI"',
+    "mtime": "2026-06-16T13:43:26.731Z",
+    "size": 28290,
+    "path": "../public/assets/ResponseView-wGeqBzVU.js"
   },
   "/assets/zhipuai-BPNAnxo-.svg": {
     "type": "image/svg+xml",
     "etag": '"2bf8-hNaLCTi89nOFCsIIfWpP/jrfo0s"',
-    "mtime": "2026-06-15T02:31:02.873Z",
+    "mtime": "2026-06-16T13:43:26.730Z",
     "size": 11256,
     "path": "../public/assets/zhipuai-BPNAnxo-.svg"
   },
   "/assets/qwen-CONDcHqt.png": {
     "type": "image/png",
     "etag": '"572c3-cdJAPaHdOvFCGzuaQjagdgOu6XE"',
-    "mtime": "2026-06-15T02:31:02.875Z",
+    "mtime": "2026-06-16T13:43:26.730Z",
     "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.17.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/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,8 +1,9 @@
-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";
 import { exportLogsAsZip } from "../lib/export-logs";
+import { formatTokens } from "../lib/utils";
 import packageJson from "../../package.json";
 import { ConversationGroup, groupLogsByConversation } from "./proxy-viewer";
 
@@ -11,8 +12,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;
@@ -97,6 +99,8 @@ export type ProxyViewerProps = {
   onViewModeChange: (mode: "simple" | "full") => void;
   /** Live strip-Claude-Code-billing-header flag, sourced once at the container. */
   strip: boolean;
+  /** Slow-response threshold in seconds. `0` disables the warning indicator. */
+  slowResponseThresholdSeconds: number;
 };
 
 export function ProxyViewer({
@@ -112,6 +116,7 @@ export function ProxyViewer({
   viewMode,
   onViewModeChange,
   strip,
+  slowResponseThresholdSeconds,
 }: ProxyViewerProps): JSX.Element {
   const { totalIn, totalOut } = useMemo(() => computeTokenSummary(logs), [logs]);
   const [exporting, setExporting] = useState(false);
@@ -119,6 +124,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 +170,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 +225,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 +256,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 +267,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"
@@ -272,7 +280,7 @@ export function ProxyViewer({
         <span className="text-muted-foreground text-xs font-mono">
           {logs.length} request{logs.length !== 1 ? "s" : ""}
           {totalIn > 0 || totalOut > 0
-            ? ` · ${totalIn.toLocaleString()} in / ${totalOut.toLocaleString()} out`
+            ? ` · ${formatTokens(totalIn)} in / ${formatTokens(totalOut)} out`
             : ""}
         </span>
         {logs.length > 0 && (
@@ -282,14 +290,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 +306,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 +314,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 +322,36 @@ 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}
+                  slowResponseThresholdSeconds={slowResponseThresholdSeconds}
+                  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);
@@ -271,7 +250,7 @@ export function ProxyViewerContainer(): JSX.Element {
 
   // Read the strip config once at the container so the virtualized list does
   // not need N independent SWR subscriptions per row.
-  const { strip } = useStripConfig();
+  const { strip, slowResponseThresholdSeconds } = useStripConfig();
 
   return (
     <>
@@ -294,6 +273,7 @@ export function ProxyViewerContainer(): JSX.Element {
         viewMode={viewMode}
         onViewModeChange={setViewMode}
         strip={strip}
+        slowResponseThresholdSeconds={slowResponseThresholdSeconds}
       />
     </>
   );

package/src/components/providers/SettingsDialog.tsx

@@ -6,6 +6,7 @@ import { Button } from "../ui/button";
 import { ProvidersPanel } from "./ProvidersPanel";
 import { useProviders } from "../../lib/useProviders";
 import { useStripConfig } from "../../lib/useStripConfig";
+import { MAX_SLOW_RESPONSE_THRESHOLD_SECONDS } from "../../lib/runtimeConfig";
 
 export function SettingsDialog(): JSX.Element {
   const [open, setOpen] = useState(false);
@@ -96,7 +97,13 @@ export function SettingsDialog(): JSX.Element {
 }
 
 function ProxySettingsTab(): JSX.Element {
-  const { strip, isLoading, setStrip } = useStripConfig();
+  const {
+    strip,
+    slowResponseThresholdSeconds,
+    isLoading,
+    setStrip,
+    setSlowResponseThresholdSeconds,
+  } = useStripConfig();
   const [error, setError] = useState<string | null>(null);
   const [pending, setPending] = useState(false);
 
@@ -115,6 +122,21 @@ function ProxySettingsTab(): JSX.Element {
     [setStrip],
   );
 
+  const handleThresholdChange = useCallback(
+    async (next: number) => {
+      setError(null);
+      setPending(true);
+      try {
+        await setSlowResponseThresholdSeconds(next);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : String(err));
+      } finally {
+        setPending(false);
+      }
+    },
+    [setSlowResponseThresholdSeconds],
+  );
+
   return (
     <div className="space-y-4">
       <div className="space-y-1">
@@ -145,6 +167,35 @@ function ProxySettingsTab(): JSX.Element {
         </span>
       </label>
 
+      <div className="space-y-1">
+        <label htmlFor="slow-response-threshold" className="text-sm font-semibold">
+          Slow response threshold
+        </label>
+        <p className="text-xs text-muted-foreground">
+          Logs whose elapsed time exceeds this many seconds show a warning icon next to the
+          duration. Set to <code>0</code> to disable the indicator.
+        </p>
+        <div className="flex items-center gap-2">
+          <input
+            id="slow-response-threshold"
+            type="number"
+            min={0}
+            max={MAX_SLOW_RESPONSE_THRESHOLD_SECONDS}
+            step={1}
+            value={slowResponseThresholdSeconds}
+            disabled={isLoading || pending}
+            onChange={(e) => {
+              const next = Number(e.currentTarget.value);
+              if (!Number.isInteger(next)) return;
+              if (next < 0 || next > MAX_SLOW_RESPONSE_THRESHOLD_SECONDS) return;
+              void handleThresholdChange(next);
+            }}
+            className="h-8 w-24 rounded-md border border-input bg-transparent px-2 text-sm font-mono disabled:cursor-not-allowed disabled:opacity-50"
+          />
+          <span className="text-xs text-muted-foreground">seconds</span>
+        </div>
+      </div>
+
       {error !== null && <p className="text-xs text-destructive">Failed to save: {error}</p>}
     </div>
   );

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

@@ -16,6 +16,8 @@ export type ConversationGroupProps = {
   viewMode?: "simple" | "full";
   /** Live strip-Claude-Code-billing-header flag from the viewer container. */
   strip: boolean;
+  /** Slow-response threshold in seconds. `0` disables the warning indicator. */
+  slowResponseThresholdSeconds: number;
   /**
    * Pre-computed per-log cache token trend map (keyed by `log.id`) shared
    * across the whole viewer. Each `LogEntry` looks up its own entry.
@@ -47,6 +49,7 @@ export const ConversationGroup = memo(function ({
   group,
   viewMode = "simple",
   strip,
+  slowResponseThresholdSeconds,
   cacheTrends,
   onCompareWithPrevious,
   comparisonPredecessors,
@@ -90,13 +93,14 @@ export const ConversationGroup = memo(function ({
       )}
 
       {shouldRenderConversationContent(standalone, expanded) && (
-        <div className="max-h-[70vh] overflow-y-auto">
+        <div>
           {turnGroups.map((tg) => (
             <TurnGroup
               key={tg.turnIndex}
               entries={tg.entries}
               viewMode={viewMode}
               strip={strip}
+              slowResponseThresholdSeconds={slowResponseThresholdSeconds}
               cacheTrends={cacheTrends}
               onCompareWithPrevious={onCompareWithPrevious}
               comparisonPredecessors={comparisonPredecessors}

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>