@tonyclaw/llm-inspector 1.14.9 → 1.15.0

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

package/.output/server/_ssr/{router-CmanwZJc.mjs → router-DpLCKk51.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-bqeypwJB.css";
+const appCss = "/assets/index-DciyfYBk.css";
 const Route$k = createRootRoute({
   head: () => ({
     meta: [
@@ -69,7 +69,7 @@ function RootDocument({ children }) {
     ] })
   ] });
 }
-const $$splitComponentImporter = () => import("./index-_9xcAkkw.mjs");
+const $$splitComponentImporter = () => import("./index-P66uoVEU.mjs");
 const Route$j = createFileRoute("/")({
   component: lazyRouteComponent($$splitComponentImporter, "component")
 });

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

package/.output/server/index.mjs

@@ -35,54 +35,54 @@ const headers = ((m) => function headersRouteRule(event) {
   }
 });
 const assets = {
+  "/assets/index-DciyfYBk.css": {
+    "type": "text/css; charset=utf-8",
+    "etag": '"15867-TOX1Gddns0p3jKt+7co1NuZS+d8"',
+    "mtime": "2026-06-12T07:17:56.431Z",
+    "size": 88167,
+    "path": "../public/assets/index-DciyfYBk.css"
+  },
   "/assets/alibaba-TTwafVwX.svg": {
     "type": "image/svg+xml",
     "etag": '"171b-6dyV5K8QjiaY35sN9qNprh9zDIs"',
-    "mtime": "2026-06-11T13:44:56.125Z",
+    "mtime": "2026-06-12T07:17:56.428Z",
     "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-11T13:44:56.125Z",
-    "size": 6918,
-    "path": "../public/assets/minimax-BPMzvuL-.jpeg"
+  "/assets/main-BLYgekFx.js": {
+    "type": "text/javascript; charset=utf-8",
+    "etag": '"50599-tks6aTeb/Edw4laR3cdpiWA48mc"',
+    "mtime": "2026-06-12T07:17:56.431Z",
+    "size": 329113,
+    "path": "../public/assets/main-BLYgekFx.js"
   },
   "/assets/zhipuai-BPNAnxo-.svg": {
     "type": "image/svg+xml",
     "etag": '"2bf8-hNaLCTi89nOFCsIIfWpP/jrfo0s"',
-    "mtime": "2026-06-11T13:44:56.122Z",
+    "mtime": "2026-06-12T07:17:56.431Z",
     "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/minimax-BPMzvuL-.jpeg": {
+    "type": "image/jpeg",
+    "etag": '"1b06-IwivU89ko5UTMUM1/t7hn4sQK9A"',
+    "mtime": "2026-06-12T07:17:56.431Z",
+    "size": 6918,
+    "path": "../public/assets/minimax-BPMzvuL-.jpeg"
   },
   "/assets/qwen-CONDcHqt.png": {
     "type": "image/png",
     "etag": '"572c3-cdJAPaHdOvFCGzuaQjagdgOu6XE"',
-    "mtime": "2026-06-11T13:44:56.125Z",
+    "mtime": "2026-06-12T07:17:56.431Z",
     "size": 357059,
     "path": "../public/assets/qwen-CONDcHqt.png"
   },
-  "/assets/index-Dv-dj1xH.js": {
+  "/assets/index-CMuJQyt1.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"9600f-3dnGI92f5ekK1BS9qp5iLg0Map4"',
-    "mtime": "2026-06-11T13:44:56.127Z",
-    "size": 614415,
-    "path": "../public/assets/index-Dv-dj1xH.js"
+    "etag": '"97f56-eCDTvraNzTc2Un6pdqimYNiZVhw"',
+    "mtime": "2026-06-12T07:17:56.431Z",
+    "size": 622422,
+    "path": "../public/assets/index-CMuJQyt1.js"
   }
 };
 function readAsset(id) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tonyclaw/llm-inspector",
-  "version": "1.14.9",
+  "version": "1.15.0",
   "type": "module",
   "description": "LLM API proxy inspector — captures and displays requests/responses from AI coding tools in a web UI",
   "license": "MIT",

package/src/components/ProxyViewer.tsx

@@ -1,21 +1,15 @@
 import { type JSX, useCallback, useEffect, useMemo, useState, useRef } from "react";
 import { useVirtualizer } from "@tanstack/react-virtual";
-import { Download, GitBranch, LayoutGrid, List } from "lucide-react";
-import { cn } from "../lib/utils";
+import { Download } 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";
-import {
-  ConversationGroup,
-  groupLogsByConversation,
-  LogEntry,
-  ThreadConnector,
-  type ConversationGroupData,
-  type ViewMode,
-} from "./proxy-viewer";
-import { extractStopReason } from "../lib/stopReason";
+import { ConversationGroup, groupLogsByConversation } from "./proxy-viewer";
+
 import { CrabLogo } from "./ui/crab-logo";
+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";
@@ -117,8 +111,6 @@ export function ProxyViewer({
   strip,
 }: 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 [comparePair, setComparePair] = useState<[CapturedLog, CapturedLog] | null>(null);
 
@@ -155,25 +147,9 @@ export function ProxyViewer({
 
   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;
 
   const rowVirtualizer = useVirtualizer({
-    count: renderGroups ? groups.length : logs.length,
+    count: groups.length,
     getScrollElement: () => parentRef.current,
     estimateSize: () => 150,
     measureElement:
@@ -185,15 +161,75 @@ export function ProxyViewer({
 
   return (
     <div className="max-w-[1200px] mx-auto flex flex-col h-screen" style={{ maxHeight: "100vh" }}>
-      {/* Header */}
-      <div className="flex items-center gap-4 mb-4 px-6 pt-6">
-        <h1 className="text-lg font-bold flex-1 flex items-center gap-2">
-          <CrabLogo className="size-10 text-amber-500 self-center" />
+      {/* Brand row */}
+      <div className="flex items-end px-6 pt-6 pb-3 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">
+            <CrabLogo className="size-10 text-amber-500 transition-all duration-300 group-hover:scale-125 group-hover:-translate-y-1.5" />
+            <span className="flex items-end gap-0.5">
+              {crabVariants.map((Crab, i) => (
+                <Crab
+                  key={i}
+                  className={`size-5 ${
+                    [
+                      "text-amber-500",
+                      "text-rose-500",
+                      "text-sky-500",
+                      "text-emerald-500",
+                      "text-violet-500",
+                      "text-orange-500",
+                      "text-cyan-500",
+                      "text-pink-500",
+                      "text-lime-500",
+                      "text-blue-500",
+                      "text-yellow-500",
+                      "text-fuchsia-500",
+                    ][i]
+                  } transition-all duration-300 ease-out group-hover:scale-125 group-hover:-translate-y-1`}
+                  style={{ transitionDelay: `${i * 50}ms` }}
+                />
+              ))}
+            </span>
+          </span>
           <span className="flex items-baseline gap-2">
             LLM Inspector
             <span className="text-xs text-muted-foreground font-mono">v{packageJson.version}</span>
           </span>
         </h1>
+        <div className="ml-auto">
+          <SettingsDialog />
+        </div>
+      </div>
+
+      {/* Controls + Filters */}
+      <div className="flex items-center gap-3 px-6 mb-4">
+        <Select value={selectedSession} onValueChange={onSessionChange}>
+          <SelectTrigger className="flex-1 max-w-[350px] text-xs">
+            <SelectValue placeholder="All sessions" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="__all__">All sessions</SelectItem>
+            {sessions.map((s) => (
+              <SelectItem key={s} value={s}>
+                {truncateSessionId(s)}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        <Select value={selectedModel} onValueChange={onModelChange}>
+          <SelectTrigger className="flex-1 max-w-[250px] text-xs">
+            <SelectValue placeholder="All models" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="__all__">All models</SelectItem>
+            {models.map((m) => (
+              <SelectItem key={m} value={m}>
+                {m}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
         <TooltipProvider>
           <Tooltip>
             <TooltipTrigger asChild>
@@ -227,7 +263,7 @@ export function ProxyViewer({
             </TooltipContent>
           </Tooltip>
         </TooltipProvider>
-        <SettingsDialog />
+        <div className="flex-1" />
         <span className="text-muted-foreground text-xs font-mono">
           {logs.length} request{logs.length !== 1 ? "s" : ""}
           {totalIn > 0 || totalOut > 0
@@ -249,7 +285,7 @@ export function ProxyViewer({
             ) : (
               <>
                 <Download className="size-3" />
-                <span>Export All</span>
+                <span>Export</span>
               </>
             )}
           </button>
@@ -260,97 +296,15 @@ export function ProxyViewer({
           className="text-xs text-muted-foreground hover:text-foreground transition-colors cursor-pointer"
           title="Clear all logs"
         >
-          Clear All
+          Clear
         </button>
       </div>
 
-      {/* Filters */}
-      <div className="flex gap-3 px-6 mb-4">
-        <Select value={selectedSession} onValueChange={onSessionChange}>
-          <SelectTrigger className="flex-1 max-w-[400px] text-xs">
-            <SelectValue placeholder="All sessions" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="__all__">All sessions</SelectItem>
-            {sessions.map((s) => (
-              <SelectItem key={s} value={s}>
-                {truncateSessionId(s)}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-
-        <Select value={selectedModel} onValueChange={onModelChange}>
-          <SelectTrigger className="text-xs">
-            <SelectValue placeholder="All models" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="__all__">All models</SelectItem>
-            {models.map((m) => (
-              <SelectItem key={m} value={m}>
-                {m}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-
-        {/* View toggle */}
-        <div className="flex items-center border border-border rounded-md overflow-hidden">
-          <button
-            type="button"
-            onClick={() => setGroupedView(true)}
-            className={`px-2 py-1.5 cursor-pointer transition-colors ${
-              groupedView ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted/50"
-            }`}
-            title="Grouped view"
-          >
-            <LayoutGrid className="size-4" />
-          </button>
-          <button
-            type="button"
-            onClick={() => setGroupedView(false)}
-            className={`px-2 py-1.5 cursor-pointer transition-colors ${
-              !groupedView ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted/50"
-            }`}
-            title="Flat view"
-          >
-            <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 */}
       <div className="flex-1 min-h-0 px-6 pb-6">
         {logs.length === 0 ? (
           <div className="text-center text-muted-foreground py-16 space-y-4">
+            <CrabLogo className="size-12 text-muted-foreground/20 mx-auto" />
             <p className="text-sm">No requests captured yet.</p>
             <p className="text-xs">Route AI coding tools through the proxy:</p>
             <CopyableCommand command="LLM_BASE_URL=http://localhost:25947/proxy <your-tool>" />
@@ -365,89 +319,31 @@ export function ProxyViewer({
               }}
             >
               {rowVirtualizer.getVirtualItems().map((virtualRow) => {
-                if (renderGroups) {
-                  const group = groups[virtualRow.index];
-                  if (group === undefined) return null;
-                  return (
-                    <div
-                      key={group.id}
-                      data-index={virtualRow.index}
-                      ref={rowVirtualizer.measureElement}
-                      style={{
-                        position: "absolute",
-                        top: 0,
-                        left: 0,
-                        width: "100%",
-                        transform: `translateY(${virtualRow.start}px)`,
-                      }}
-                    >
-                      <ConversationGroup
-                        group={group}
-                        viewMode={viewMode}
-                        strip={strip}
-                        cacheTrends={cacheTrends}
-                        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}
-                      data-index={virtualRow.index}
-                      ref={rowVirtualizer.measureElement}
-                      style={{
-                        position: "absolute",
-                        top: 0,
-                        left: 0,
-                        width: "100%",
-                        transform: `translateY(${virtualRow.start}px)`,
-                      }}
-                    >
-                      {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>
-                  );
-                }
+                const group = groups[virtualRow.index];
+                if (group === undefined) return null;
+                return (
+                  <div
+                    key={group.id}
+                    data-index={virtualRow.index}
+                    ref={rowVirtualizer.measureElement}
+                    style={{
+                      position: "absolute",
+                      top: 0,
+                      left: 0,
+                      width: "100%",
+                      transform: `translateY(${virtualRow.start}px)`,
+                    }}
+                  >
+                    <ConversationGroup
+                      group={group}
+                      viewMode={viewMode}
+                      strip={strip}
+                      cacheTrends={cacheTrends}
+                      onCompareWithPrevious={handleCompareWithPrevious}
+                      standalone={groups.length === 1}
+                    />
+                  </div>
+                );
               })}
             </div>
           </div>