@tonyclaw/llm-inspector 1.14.7 → 1.14.9

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

package/.output/server/_ssr/{router-lUOA8pi6.mjs → router-CmanwZJc.mjs}

@@ -45,7 +45,7 @@ import "../_libs/debounce-fn.mjs";
 import "../_libs/mimic-function.mjs";
 import "../_libs/semver.mjs";
 import "../_libs/uint8array-extras.mjs";
-const appCss = "/assets/index-DXUNTCVh.css";
+const appCss = "/assets/index-bqeypwJB.css";
 const Route$k = createRootRoute({
   head: () => ({
     meta: [
@@ -69,7 +69,7 @@ function RootDocument({ children }) {
     ] })
   ] });
 }
-const $$splitComponentImporter = () => import("./index-BvHLASu8.mjs");
+const $$splitComponentImporter = () => import("./index-_9xcAkkw.mjs");
 const Route$j = createFileRoute("/")({
   component: lazyRouteComponent($$splitComponentImporter, "component")
 });
@@ -577,6 +577,7 @@ const OpenAIRequestSchema = object({
   stream: boolean().optional(),
   tools: array(OpenAIToolDefinition).optional(),
   tool_choice: union([
+    _enum(["auto", "none", "required"]),
     object({ type: literal("auto") }),
     object({ type: literal("none") }),
     object({ type: literal("function"), function: object({ name: string() }) })
@@ -1276,11 +1277,7 @@ const AnthropicFormatHandler = {
       const json = JSON.parse(rawBody);
       if (typeof json === "object" && json !== null && !Array.isArray(json)) {
         const keys = Object.keys(json);
-        if (keys.includes("model") && keys.includes("messages")) {
-          if (keys.includes("system") || keys.includes("tools")) {
-            return true;
-          }
-        }
+        return keys.includes("model") && keys.includes("messages") && keys.includes("system");
       }
       return false;
     } catch {
@@ -1410,6 +1407,21 @@ function extractOpenAIStream(raw, log, fallbackModel, collectChunks = true) {
         promptTokens = chunk.usage.prompt_tokens ?? 0;
         completionTokens = chunk.usage.completion_tokens ?? 0;
         log.inputTokens = promptTokens;
+        if (typeof parsed === "object" && parsed !== null && !Array.isArray(parsed)) {
+          const usageDesc = Object.getOwnPropertyDescriptor(parsed, "usage");
+          if (usageDesc !== void 0 && typeof usageDesc.value === "object" && usageDesc.value !== null) {
+            const detailsDesc = Object.getOwnPropertyDescriptor(
+              usageDesc.value,
+              "prompt_tokens_details"
+            );
+            if (detailsDesc !== void 0 && typeof detailsDesc.value === "object" && detailsDesc.value !== null) {
+              const cacheDesc = Object.getOwnPropertyDescriptor(detailsDesc.value, "cached_tokens");
+              if (cacheDesc !== void 0 && typeof cacheDesc.value === "number") {
+                log.cacheReadInputTokens = cacheDesc.value;
+              }
+            }
+          }
+        }
         usageCaptured = true;
       }
       for (const choice of chunk.choices) {
@@ -1506,11 +1518,31 @@ const OpenAIFormatHandler = {
   extractTokens(responseBody) {
     const parsed = parseOpenAIResponse(responseBody);
     if (parsed) {
+      let cacheReadInputTokens = null;
+      try {
+        const raw = JSON.parse(responseBody);
+        if (raw !== null && typeof raw === "object" && !Array.isArray(raw)) {
+          const usageDesc = Object.getOwnPropertyDescriptor(raw, "usage");
+          if (usageDesc !== void 0 && typeof usageDesc.value === "object" && usageDesc.value !== null) {
+            const detailsDesc = Object.getOwnPropertyDescriptor(
+              usageDesc.value,
+              "prompt_tokens_details"
+            );
+            if (detailsDesc !== void 0 && typeof detailsDesc.value === "object" && detailsDesc.value !== null) {
+              const cacheDesc = Object.getOwnPropertyDescriptor(detailsDesc.value, "cached_tokens");
+              if (cacheDesc !== void 0 && typeof cacheDesc.value === "number") {
+                cacheReadInputTokens = cacheDesc.value;
+              }
+            }
+          }
+        }
+      } catch {
+      }
       return {
         inputTokens: parsed.usage.prompt_tokens ?? null,
         outputTokens: parsed.usage.completion_tokens ?? null,
         cacheCreationInputTokens: null,
-        cacheReadInputTokens: null
+        cacheReadInputTokens
       };
     }
     return {
@@ -1529,11 +1561,7 @@ const OpenAIFormatHandler = {
       const json = JSON.parse(rawBody);
       if (typeof json === "object" && json !== null && !Array.isArray(json)) {
         const keys = Object.keys(json);
-        if (keys.includes("model") && keys.includes("messages")) {
-          if (!keys.includes("system") && !keys.includes("tools")) {
-            return true;
-          }
-        }
+        return keys.includes("model") && keys.includes("messages") && !keys.includes("system");
       }
       return false;
     } catch {
@@ -2504,6 +2532,8 @@ async function handleProxy(req) {
   upstreamHeaders.forEach((value, key) => {
     upstreamHeadersObj[key.toLowerCase()] = value;
   });
+  const bodyFormat = formatRegistry.detectFormat(requestBody);
+  const displayApiFormat = bodyFormat !== "unknown" ? bodyFormat : formatHandler.format;
   const log = await createLog(
     req.method,
     parsed.apiPath,
@@ -2512,7 +2542,7 @@ async function handleProxy(req) {
     clientInfo,
     rawHeaders,
     upstreamHeadersObj,
-    formatHandler.format,
+    displayApiFormat,
     model,
     sessionId,
     preAcquiredId
@@ -4713,6 +4743,7 @@ const router = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProper
 export {
   CapturedLogSchema as C,
   InspectorResponseSchema as I,
+  OpenAIRequestSchema as O,
   ProviderTestResultsSchema as P,
   RuntimeConfigSchema as R,
   parseRequest as a,

package/.output/server/{_tanstack-start-manifest_v-XNH7fVPN.mjs → _tanstack-start-manifest_v-BVIiyDeJ.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-BV7uNIIz.js"], "assets": [] }, "/": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/index.tsx", "assets": [], "preloads": ["/assets/index-Cmi8TfeU.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-BV7uNIIz.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-C8OUJKbz.js"], "assets": [] }, "/": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/index.tsx", "assets": [], "preloads": ["/assets/index-Dv-dj1xH.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-C8OUJKbz.js" });
 export {
   tsrStartManifest
 };

package/.output/server/index.mjs

@@ -38,51 +38,51 @@ const assets = {
   "/assets/alibaba-TTwafVwX.svg": {
     "type": "image/svg+xml",
     "etag": '"171b-6dyV5K8QjiaY35sN9qNprh9zDIs"',
-    "mtime": "2026-06-11T07:46:13.437Z",
+    "mtime": "2026-06-11T13:44:56.125Z",
     "size": 5915,
     "path": "../public/assets/alibaba-TTwafVwX.svg"
   },
+  "/assets/index-bqeypwJB.css": {
+    "type": "text/css; charset=utf-8",
+    "etag": '"14d2d-fciDL/LvvG4KiFnlq0WNx0FqBmw"',
+    "mtime": "2026-06-11T13:44:56.125Z",
+    "size": 85293,
+    "path": "../public/assets/index-bqeypwJB.css"
+  },
   "/assets/minimax-BPMzvuL-.jpeg": {
     "type": "image/jpeg",
     "etag": '"1b06-IwivU89ko5UTMUM1/t7hn4sQK9A"',
-    "mtime": "2026-06-11T07:46:13.439Z",
+    "mtime": "2026-06-11T13:44:56.125Z",
     "size": 6918,
     "path": "../public/assets/minimax-BPMzvuL-.jpeg"
   },
   "/assets/zhipuai-BPNAnxo-.svg": {
     "type": "image/svg+xml",
     "etag": '"2bf8-hNaLCTi89nOFCsIIfWpP/jrfo0s"',
-    "mtime": "2026-06-11T07:46:13.439Z",
+    "mtime": "2026-06-11T13:44:56.122Z",
     "size": 11256,
     "path": "../public/assets/zhipuai-BPNAnxo-.svg"
   },
+  "/assets/main-C8OUJKbz.js": {
+    "type": "text/javascript; charset=utf-8",
+    "etag": '"50599-x4LjDXM7jigK2tdjHCfXl0STwVQ"',
+    "mtime": "2026-06-11T13:44:56.125Z",
+    "size": 329113,
+    "path": "../public/assets/main-C8OUJKbz.js"
+  },
   "/assets/qwen-CONDcHqt.png": {
     "type": "image/png",
     "etag": '"572c3-cdJAPaHdOvFCGzuaQjagdgOu6XE"',
-    "mtime": "2026-06-11T07:46:13.439Z",
+    "mtime": "2026-06-11T13:44:56.125Z",
     "size": 357059,
     "path": "../public/assets/qwen-CONDcHqt.png"
   },
-  "/assets/main-BV7uNIIz.js": {
-    "type": "text/javascript; charset=utf-8",
-    "etag": '"50599-Hw6XWHNqYOzGgMQUjQUlo6V5ZGQ"',
-    "mtime": "2026-06-11T07:46:13.439Z",
-    "size": 329113,
-    "path": "../public/assets/main-BV7uNIIz.js"
-  },
-  "/assets/index-DXUNTCVh.css": {
-    "type": "text/css; charset=utf-8",
-    "etag": '"145d7-BpJnON+Y0T31X0nkA2icHh97eLY"',
-    "mtime": "2026-06-11T07:46:13.439Z",
-    "size": 83415,
-    "path": "../public/assets/index-DXUNTCVh.css"
-  },
-  "/assets/index-Cmi8TfeU.js": {
+  "/assets/index-Dv-dj1xH.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"94069-2UhstwPg+t7SdSjBWTNqX+kv980"',
-    "mtime": "2026-06-11T07:46:13.440Z",
-    "size": 606313,
-    "path": "../public/assets/index-Cmi8TfeU.js"
+    "etag": '"9600f-3dnGI92f5ekK1BS9qp5iLg0Map4"',
+    "mtime": "2026-06-11T13:44:56.127Z",
+    "size": 614415,
+    "path": "../public/assets/index-Dv-dj1xH.js"
   }
 };
 function readAsset(id) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tonyclaw/llm-inspector",
-  "version": "1.14.7",
+  "version": "1.14.9",
   "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,8 @@
 import { type JSX, useCallback, useEffect, useMemo, useState, useRef } from "react";
 import { useVirtualizer } from "@tanstack/react-virtual";
-import { Download, GitCompareArrows, LayoutGrid, List, X } from "lucide-react";
+import { Download, GitBranch, LayoutGrid, List } from "lucide-react";
+import { cn } from "../lib/utils";
+import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "./ui/tooltip";
 import type { CapturedLog } from "../proxy/schemas";
 import { exportLogsAsZip } from "../lib/export-logs";
 import packageJson from "../../package.json";
@@ -8,14 +10,16 @@ import {
   ConversationGroup,
   groupLogsByConversation,
   LogEntry,
+  ThreadConnector,
   type ConversationGroupData,
+  type ViewMode,
 } from "./proxy-viewer";
+import { extractStopReason } from "../lib/stopReason";
 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;
@@ -114,9 +118,8 @@ export function ProxyViewer({
 }: ProxyViewerProps): JSX.Element {
   const { totalIn, totalOut } = computeTokenSummary(logs);
   const [groupedView, setGroupedView] = useState(true);
+  const [groupViewMode, setGroupViewMode] = useState<ViewMode>("thread");
   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 () => {
@@ -129,96 +132,45 @@ 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.
+  // Close the compare drawer when the user changes the session or model
+  // filter, since the predecessor relationship may no longer be meaningful.
   useEffect(() => {
-    setSelectedLogIds([]);
-    setCompareOpen(false);
+    setComparePair(null);
   }, [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([]);
+    setComparePair(null);
   }, []);
 
-  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 handleCompareWithPrevious = useCallback(
+    (log: CapturedLog) => {
+      const idx = logs.indexOf(log);
+      if (idx <= 0) return;
+      const predecessor = logs[idx - 1];
+      if (predecessor === undefined) return;
+      setComparePair([predecessor, log]);
+    },
+    [logs],
+  );
 
   const groups = useMemo(() => groupLogsByConversation(logs), [logs]);
   const cacheTrends = useMemo(() => computeCacheTrends(groups), [groups]);
+  const stopReasons = useMemo(() => logs.map((log) => extractStopReason(log)), [logs]);
+
+  const turnIndices = useMemo(() => {
+    const indices: number[] = [];
+    let turn = 0;
+    for (let i = 0; i < stopReasons.length; i++) {
+      if (i > 0 && (stopReasons[i - 1] === "end_turn" || stopReasons[i - 1] === "stop")) {
+        turn++;
+      }
+      indices.push(turn);
+    }
+    return indices;
+  }, [stopReasons]);
 
   // Determine what items to render (groups or individual logs)
-  const renderGroups =
-    logs.length > 0 &&
-    groupedView &&
-    !(groups.length === 1 && groups[0]?.logs.length === logs.length);
+  const renderGroups = logs.length > 0 && groupedView && groups.length > 1;
 
   const rowVirtualizer = useVirtualizer({
     count: renderGroups ? groups.length : logs.length,
@@ -242,30 +194,39 @@ export function ProxyViewer({
             <span className="text-xs text-muted-foreground font-mono">v{packageJson.version}</span>
           </span>
         </h1>
-        <div className="flex items-center border border-border rounded-md overflow-hidden">
-          <button
-            type="button"
-            onClick={() => onViewModeChange("simple")}
-            className={`px-2 py-1 cursor-pointer transition-colors text-xs ${
-              viewMode === "simple"
-                ? "bg-muted text-foreground"
-                : "text-muted-foreground hover:bg-muted/50"
-            }`}
-          >
-            Simple
-          </button>
-          <button
-            type="button"
-            onClick={() => onViewModeChange("full")}
-            className={`px-2 py-1 cursor-pointer transition-colors text-xs ${
-              viewMode === "full"
-                ? "bg-muted text-foreground"
-                : "text-muted-foreground hover:bg-muted/50"
-            }`}
-          >
-            Full
-          </button>
-        </div>
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div className="flex items-center border border-border rounded-md overflow-hidden">
+                <button
+                  type="button"
+                  onClick={() => onViewModeChange("simple")}
+                  className={`px-2 py-1 cursor-pointer transition-colors text-xs ${
+                    viewMode === "simple"
+                      ? "bg-muted text-foreground"
+                      : "text-muted-foreground hover:bg-muted/50"
+                  }`}
+                >
+                  Simple
+                </button>
+                <button
+                  type="button"
+                  onClick={() => onViewModeChange("full")}
+                  className={`px-2 py-1 cursor-pointer transition-colors text-xs ${
+                    viewMode === "full"
+                      ? "bg-muted text-foreground"
+                      : "text-muted-foreground hover:bg-muted/50"
+                  }`}
+                >
+                  Full
+                </button>
+              </div>
+            </TooltipTrigger>
+            <TooltipContent>
+              Simple shows parsed output; Full adds raw headers and tokens
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
         <SettingsDialog />
         <span className="text-muted-foreground text-xs font-mono">
           {logs.length} request{logs.length !== 1 ? "s" : ""}
@@ -356,6 +317,34 @@ export function ProxyViewer({
             <List className="size-4" />
           </button>
         </div>
+
+        {/* Thread/flat mode toggle */}
+        <div className="flex items-center border border-border rounded-md overflow-hidden">
+          <button
+            type="button"
+            onClick={() => setGroupViewMode("thread")}
+            className={`px-2 py-1.5 cursor-pointer transition-colors ${
+              groupViewMode === "thread"
+                ? "bg-amber-500/15 text-amber-400 border-r border-amber-500/30"
+                : "text-muted-foreground hover:bg-muted/50"
+            }`}
+            title="Thread view (connected timeline)"
+          >
+            <GitBranch className="size-4" />
+          </button>
+          <button
+            type="button"
+            onClick={() => setGroupViewMode("flat")}
+            className={`px-2 py-1.5 cursor-pointer transition-colors ${
+              groupViewMode === "flat"
+                ? "bg-muted text-foreground"
+                : "text-muted-foreground hover:bg-muted/50"
+            }`}
+            title="Flat view (card list)"
+          >
+            <List className="size-4" />
+          </button>
+        </div>
       </div>
 
       {/* Log list */}
@@ -397,14 +386,15 @@ export function ProxyViewer({
                         viewMode={viewMode}
                         strip={strip}
                         cacheTrends={cacheTrends}
-                        selectedSet={selectedSet}
-                        onToggleSelect={handleToggleSelect}
+                        onCompareWithPrevious={handleCompareWithPrevious}
+                        defaultGroupViewMode={groupViewMode}
                       />
                     </div>
                   );
                 } else {
                   const log = logs[virtualRow.index];
                   if (log === undefined) return null;
+                  const idx = virtualRow.index;
                   return (
                     <div
                       key={log.id}
@@ -418,14 +408,43 @@ export function ProxyViewer({
                         transform: `translateY(${virtualRow.start}px)`,
                       }}
                     >
-                      <LogEntry
-                        log={log}
-                        viewMode={viewMode}
-                        strip={strip}
-                        cacheTrend={cacheTrends.get(log.id) ?? null}
-                        isSelected={selectedSet.has(log.id)}
-                        onToggleSelect={handleToggleSelect}
-                      />
+                      {groupViewMode === "thread" ? (
+                        <div className="flex items-stretch ml-3">
+                          <ThreadConnector
+                            stopReason={stopReasons[idx] ?? null}
+                            isPending={log.responseStatus === null}
+                            isFirst={idx === 0}
+                            isLast={idx === logs.length - 1}
+                            isTurnStart={
+                              idx === 0 ||
+                              stopReasons[idx - 1] === "end_turn" ||
+                              stopReasons[idx - 1] === "stop"
+                            }
+                          />
+                          <div
+                            className={cn(
+                              "flex-1 min-w-0 mb-2 rounded-lg",
+                              (turnIndices[idx] ?? 0) % 2 === 0 ? "bg-muted/10" : "bg-muted/25",
+                            )}
+                          >
+                            <LogEntry
+                              log={log}
+                              viewMode={viewMode}
+                              strip={strip}
+                              cacheTrend={cacheTrends.get(log.id) ?? null}
+                              onCompareWithPrevious={() => handleCompareWithPrevious(log)}
+                            />
+                          </div>
+                        </div>
+                      ) : (
+                        <LogEntry
+                          log={log}
+                          viewMode={viewMode}
+                          strip={strip}
+                          cacheTrend={cacheTrends.get(log.id) ?? null}
+                          onCompareWithPrevious={() => handleCompareWithPrevious(log)}
+                        />
+                      )}
                     </div>
                   );
                 }
@@ -435,36 +454,8 @@ export function ProxyViewer({
         )}
       </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 && (
+      {comparePair !== null && (
         <CompareDrawer left={comparePair[0]} right={comparePair[1]} onClose={closeCompare} />
       )}
     </div>