@tonyclaw/llm-inspector 1.14.7 → 1.14.8

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-IsglLVKy.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-BKnjB_zi.mjs").then((n) => n.r);
   const startEntry = await import("./start-HYkvq4Ni.mjs");
   return { startEntry, routerEntry };
 }

package/.output/server/_ssr/{router-lUOA8pi6.mjs → router-BKnjB_zi.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-vP91146S.css";
 const Route$k = createRootRoute({
   head: () => ({
     meta: [
@@ -69,7 +69,7 @@ function RootDocument({ children }) {
     ] })
   ] });
 }
-const $$splitComponentImporter = () => import("./index-BvHLASu8.mjs");
+const $$splitComponentImporter = () => import("./index-9uTJ4xYR.mjs");
 const Route$j = createFileRoute("/")({
   component: lazyRouteComponent($$splitComponentImporter, "component")
 });

package/.output/server/{_tanstack-start-manifest_v-XNH7fVPN.mjs → _tanstack-start-manifest_v-IsglLVKy.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-CJ4MreBr.js"], "assets": [] }, "/": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/index.tsx", "assets": [], "preloads": ["/assets/index-CdnotuLh.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-CJ4MreBr.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-11T12:14:10.996Z",
     "size": 5915,
     "path": "../public/assets/alibaba-TTwafVwX.svg"
   },
-  "/assets/minimax-BPMzvuL-.jpeg": {
-    "type": "image/jpeg",
-    "etag": '"1b06-IwivU89ko5UTMUM1/t7hn4sQK9A"',
-    "mtime": "2026-06-11T07:46:13.439Z",
-    "size": 6918,
-    "path": "../public/assets/minimax-BPMzvuL-.jpeg"
+  "/assets/index-vP91146S.css": {
+    "type": "text/css; charset=utf-8",
+    "etag": '"14a58-Ts4ulNygZtoNVfw4qwf2tNfAXoU"',
+    "mtime": "2026-06-11T12:14:10.997Z",
+    "size": 84568,
+    "path": "../public/assets/index-vP91146S.css"
   },
   "/assets/zhipuai-BPNAnxo-.svg": {
     "type": "image/svg+xml",
     "etag": '"2bf8-hNaLCTi89nOFCsIIfWpP/jrfo0s"',
-    "mtime": "2026-06-11T07:46:13.439Z",
+    "mtime": "2026-06-11T12:14:10.996Z",
     "size": 11256,
     "path": "../public/assets/zhipuai-BPNAnxo-.svg"
   },
+  "/assets/minimax-BPMzvuL-.jpeg": {
+    "type": "image/jpeg",
+    "etag": '"1b06-IwivU89ko5UTMUM1/t7hn4sQK9A"',
+    "mtime": "2026-06-11T12:14:10.996Z",
+    "size": 6918,
+    "path": "../public/assets/minimax-BPMzvuL-.jpeg"
+  },
+  "/assets/main-CJ4MreBr.js": {
+    "type": "text/javascript; charset=utf-8",
+    "etag": '"50599-xS7/i8WCDvqJMx9qZW3sZ2pNsvE"',
+    "mtime": "2026-06-11T12:14:10.997Z",
+    "size": 329113,
+    "path": "../public/assets/main-CJ4MreBr.js"
+  },
   "/assets/qwen-CONDcHqt.png": {
     "type": "image/png",
     "etag": '"572c3-cdJAPaHdOvFCGzuaQjagdgOu6XE"',
-    "mtime": "2026-06-11T07:46:13.439Z",
+    "mtime": "2026-06-11T12:14:10.996Z",
     "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-CdnotuLh.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": '"95a74-8hHRRtv/cPIlS0z++Wpqpv18rpY"',
+    "mtime": "2026-06-11T12:14:10.999Z",
+    "size": 612980,
+    "path": "../public/assets/index-CdnotuLh.js"
   }
 };
 function readAsset(id) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tonyclaw/llm-inspector",
-  "version": "1.14.7",
+  "version": "1.14.8",
   "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,7 @@
 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 { 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 +9,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 +117,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 +131,33 @@ 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]);
 
   // 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 +181,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 +304,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 +373,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 +395,33 @@ 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}
+                          />
+                          <div className="flex-1 min-w-0 mb-2">
+                            <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 +431,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>

package/src/components/providers/ProviderCard.tsx

@@ -1,5 +1,6 @@
 import { type JSX, type ReactNode, useCallback, useRef, useState } from "react";
 import { Button } from "../ui/button";
+import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "../ui/tooltip";
 import {
   Eye,
   EyeOff,
@@ -109,16 +110,30 @@ function TestStatus({ result }: { result: ProviderTestState }): JSX.Element {
     }
     if (result.cacheCreationInputTokens !== undefined && result.cacheCreationInputTokens > 0) {
       tokenParts.push(
-        <span key="cache-create" className="font-mono tabular-nums text-emerald-400">
-          +{result.cacheCreationInputTokens} cache
-        </span>,
+        <TooltipProvider key="cache-create">
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span className="font-mono tabular-nums text-emerald-400">
+                +{result.cacheCreationInputTokens} cache
+              </span>
+            </TooltipTrigger>
+            <TooltipContent>Tokens cached for reuse, reducing future API cost</TooltipContent>
+          </Tooltip>
+        </TooltipProvider>,
       );
     }
     if (result.cacheReadInputTokens !== undefined && result.cacheReadInputTokens > 0) {
       tokenParts.push(
-        <span key="cache-read" className="font-mono tabular-nums text-purple-400">
-          ~{result.cacheReadInputTokens} cached
-        </span>,
+        <TooltipProvider key="cache-read">
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span className="font-mono tabular-nums text-purple-400">
+                ~{result.cacheReadInputTokens} cached
+              </span>
+            </TooltipTrigger>
+            <TooltipContent>Tokens served from cache, reducing API cost</TooltipContent>
+          </Tooltip>
+        </TooltipProvider>,
       );
     }
     const displayTokens: ReactNode[] = [];
@@ -127,11 +142,20 @@ function TestStatus({ result }: { result: ProviderTestState }): JSX.Element {
       displayTokens.push(tokenParts[i]);
     }
     return (
-      <div className="flex items-center gap-1 text-xs text-green-600 shrink-0">
-        <CheckCircle className="size-3" />
-        <span>Connected</span>
-        {tokenParts.length > 0 && <span className="text-muted-foreground">({displayTokens})</span>}
-      </div>
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <div className="flex items-center gap-1 text-xs text-green-600 shrink-0">
+              <CheckCircle className="size-3" />
+              <span>Connected</span>
+              {tokenParts.length > 0 && (
+                <span className="text-muted-foreground">({displayTokens})</span>
+              )}
+            </div>
+          </TooltipTrigger>
+          <TooltipContent>Connection test passed</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
     );
   }
 
@@ -145,16 +169,31 @@ function TestStatus({ result }: { result: ProviderTestState }): JSX.Element {
     <div className="flex flex-col gap-1 shrink-0">
       <div className="flex items-center gap-1 text-xs text-red-600 max-w-[200px]">
         {getErrorIcon(errorType)}
-        <span className="truncate">{errorMessage}</span>
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span className="truncate">{errorMessage}</span>
+            </TooltipTrigger>
+            <TooltipContent>Connection test failed</TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
         {errorDetails !== undefined && (
-          <button
-            type="button"
-            onClick={() => setShowDetails(!showDetails)}
-            className="shrink-0 text-muted-foreground hover:text-foreground transition-colors"
-            title={showDetails ? "Hide details" : "Show details"}
-          >
-            {showDetails ? <EyeOff className="size-3" /> : <Eye className="size-3" />}
-          </button>
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  type="button"
+                  onClick={() => setShowDetails(!showDetails)}
+                  className="shrink-0 text-muted-foreground hover:text-foreground transition-colors"
+                >
+                  {showDetails ? <EyeOff className="size-3" /> : <Eye className="size-3" />}
+                </button>
+              </TooltipTrigger>
+              <TooltipContent>
+                {showDetails ? "Hide error details" : "Show detailed error information"}
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
         )}
       </div>
       {showDetails && errorDetails !== undefined && (
@@ -243,14 +282,28 @@ export function ProviderCard({
         <div className="flex items-center gap-2 min-w-0">
           <span className="font-medium truncate">{provider.name}</span>
           {provider.source === "company" && (
-            <span className="text-xs px-1.5 py-0.5 rounded bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400 shrink-0">
-              公司
-            </span>
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <span className="text-xs px-1.5 py-0.5 rounded bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400 shrink-0">
+                    公司
+                  </span>
+                </TooltipTrigger>
+                <TooltipContent>Company-provided API key</TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
           )}
           {provider.source === "personal" && (
-            <span className="text-xs px-1.5 py-0.5 rounded bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400 shrink-0">
-              个人
-            </span>
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <span className="text-xs px-1.5 py-0.5 rounded bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400 shrink-0">
+                    个人
+                  </span>
+                </TooltipTrigger>
+                <TooltipContent>Your personal API key</TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
           )}
         </div>
         {docsUrl !== undefined && (