@tonyclaw/agent-inspector 2.1.21 → 2.1.23

package/.output/server/index.mjs

@@ -38,114 +38,114 @@ const assets = {
   "/assets/alibaba-TTwafVwX.svg": {
     "type": "image/svg+xml",
     "etag": '"171b-6dyV5K8QjiaY35sN9qNprh9zDIs"',
-    "mtime": "2026-07-06T08:04:09.445Z",
+    "mtime": "2026-07-06T23:30:24.816Z",
     "size": 5915,
     "path": "../public/assets/alibaba-TTwafVwX.svg"
   },
-  "/assets/json-viewer-D5mzV0oV.js": {
+  "/assets/index-B26q0-ch.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"1ae6-lHZ9n4b2qU1XEccJknQFdUwXJyk"',
-    "mtime": "2026-07-06T08:04:09.445Z",
-    "size": 6886,
-    "path": "../public/assets/json-viewer-D5mzV0oV.js"
-  },
-  "/assets/index-Dw-jXKKY.js": {
-    "type": "text/javascript; charset=utf-8",
-    "etag": '"1cd2c-qf0ccCcShwlpGimq6sOIhXqC/KY"',
-    "mtime": "2026-07-06T08:04:09.445Z",
-    "size": 118060,
-    "path": "../public/assets/index-Dw-jXKKY.js"
-  },
-  "/assets/CompareDrawer-Pii_cIqn.js": {
-    "type": "text/javascript; charset=utf-8",
-    "etag": '"4bbf-N5NvXj/0Nfg4Lu/Fx8Wnk0zctKM"',
-    "mtime": "2026-07-06T08:04:09.445Z",
-    "size": 19391,
-    "path": "../public/assets/CompareDrawer-Pii_cIqn.js"
-  },
-  "/assets/index-DRCRDo_E.js": {
-    "type": "text/javascript; charset=utf-8",
-    "etag": '"74-Jdw+P8c3q4x8zEb79oDR7U/GJ+w"',
-    "mtime": "2026-07-06T08:04:09.445Z",
+    "etag": '"74-AZvnGEhntbiyIDS+wwwbTZjCuCw"',
+    "mtime": "2026-07-06T23:30:24.817Z",
     "size": 116,
-    "path": "../public/assets/index-DRCRDo_E.js"
+    "path": "../public/assets/index-B26q0-ch.js"
   },
-  "/assets/index-BjzVMXJq.css": {
-    "type": "text/css; charset=utf-8",
-    "etag": '"21738-gXfp17wcRouxMwG65GOcFYAr+WQ"',
-    "mtime": "2026-07-06T08:04:09.445Z",
-    "size": 137016,
-    "path": "../public/assets/index-BjzVMXJq.css"
+  "/assets/json-viewer-DERQNZRV.js": {
+    "type": "text/javascript; charset=utf-8",
+    "etag": '"1ae6-A6B2jiKFX+jryATLfM15t7QIsvM"',
+    "mtime": "2026-07-06T23:30:24.817Z",
+    "size": 6886,
+    "path": "../public/assets/json-viewer-DERQNZRV.js"
   },
   "/assets/minimax-BPMzvuL-.jpeg": {
     "type": "image/jpeg",
     "etag": '"1b06-IwivU89ko5UTMUM1/t7hn4sQK9A"',
-    "mtime": "2026-07-06T08:04:09.445Z",
+    "mtime": "2026-07-06T23:30:24.816Z",
     "size": 6918,
     "path": "../public/assets/minimax-BPMzvuL-.jpeg"
   },
-  "/assets/StreamingChunkSequence-BrSx21IQ.js": {
-    "type": "text/javascript; charset=utf-8",
-    "etag": '"dd6-IWeACKaGgb4U4nokqp1reXLkggk"',
-    "mtime": "2026-07-06T08:04:09.445Z",
-    "size": 3542,
-    "path": "../public/assets/StreamingChunkSequence-BrSx21IQ.js"
+  "/assets/index-CxszCIFm.css": {
+    "type": "text/css; charset=utf-8",
+    "etag": '"219d3-hGkO4OXmpghyDnxd7KIL9unRxwQ"',
+    "mtime": "2026-07-06T23:30:24.817Z",
+    "size": 137683,
+    "path": "../public/assets/index-CxszCIFm.css"
   },
-  "/assets/main-B7OIQMeA.js": {
+  "/assets/CompareDrawer-Cvgl_Jmi.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"512fd-gnVzFUWaADF+U7ewMLeXswLgfbs"',
-    "mtime": "2026-07-06T08:04:09.445Z",
-    "size": 332541,
-    "path": "../public/assets/main-B7OIQMeA.js"
+    "etag": '"4bbf-qdrjZBBOyzn/JHMYJ2UAiNDDbFQ"',
+    "mtime": "2026-07-06T23:30:24.817Z",
+    "size": 19391,
+    "path": "../public/assets/CompareDrawer-Cvgl_Jmi.js"
   },
-  "/assets/ReplayDialog-BqnYC8ze.js": {
+  "/assets/index-BZxLBVYd.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"31d6-5kfsBNTWL1po+1YwnLQiVcjuScI"',
-    "mtime": "2026-07-06T08:04:09.445Z",
-    "size": 12758,
-    "path": "../public/assets/ReplayDialog-BqnYC8ze.js"
+    "etag": '"1cd2c-eSvMM8zbdBG02FS4JJNg0vJ028w"',
+    "mtime": "2026-07-06T23:30:24.817Z",
+    "size": 118060,
+    "path": "../public/assets/index-BZxLBVYd.js"
   },
-  "/assets/RequestAnatomy-I8iBshz1.js": {
+  "/assets/RequestAnatomy-CrLSqdiA.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"43f2-LkSmr545/CcQXJegGJryyDFVlKs"',
-    "mtime": "2026-07-06T08:04:09.445Z",
+    "etag": '"43f2-YwOCt5e63SibXMhWqzHRxd1nNC8"',
+    "mtime": "2026-07-06T23:30:24.817Z",
     "size": 17394,
-    "path": "../public/assets/RequestAnatomy-I8iBshz1.js"
+    "path": "../public/assets/RequestAnatomy-CrLSqdiA.js"
   },
-  "/assets/qwen-CONDcHqt.png": {
-    "type": "image/png",
-    "etag": '"572c3-cdJAPaHdOvFCGzuaQjagdgOu6XE"',
-    "mtime": "2026-07-06T08:04:09.445Z",
-    "size": 357059,
-    "path": "../public/assets/qwen-CONDcHqt.png"
+  "/assets/ReplayDialog-DeEELx0X.js": {
+    "type": "text/javascript; charset=utf-8",
+    "etag": '"31d6-hWOAjkfta2prr+9EmQOXzNOAzTU"',
+    "mtime": "2026-07-06T23:30:24.817Z",
+    "size": 12758,
+    "path": "../public/assets/ReplayDialog-DeEELx0X.js"
   },
-  "/assets/_sessionId-ByxbBMbE.js": {
+  "/assets/ResponseView-CFIqDL5E.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"d2-bjGWPi/hOvCUGg3eqEhfiUwW/YU"',
-    "mtime": "2026-07-06T08:04:09.445Z",
-    "size": 210,
-    "path": "../public/assets/_sessionId-ByxbBMbE.js"
+    "etag": '"47fa-+VN13C6cvB2BYNKPjLEy9ibIswM"',
+    "mtime": "2026-07-06T23:30:24.817Z",
+    "size": 18426,
+    "path": "../public/assets/ResponseView-CFIqDL5E.js"
+  },
+  "/assets/main-BoshTI0W.js": {
+    "type": "text/javascript; charset=utf-8",
+    "etag": '"512fd-NlLbmALn+PuYHWA4Dj6BVyzFIuM"',
+    "mtime": "2026-07-06T23:30:24.817Z",
+    "size": 332541,
+    "path": "../public/assets/main-BoshTI0W.js"
   },
   "/assets/zhipuai-BPNAnxo-.svg": {
     "type": "image/svg+xml",
     "etag": '"2bf8-hNaLCTi89nOFCsIIfWpP/jrfo0s"',
-    "mtime": "2026-07-06T08:04:09.445Z",
+    "mtime": "2026-07-06T23:30:24.816Z",
     "size": 11256,
     "path": "../public/assets/zhipuai-BPNAnxo-.svg"
   },
-  "/assets/ResponseView-wZzskUas.js": {
+  "/assets/_sessionId-ZuH6-ZX5.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"3fbb-bdXf95SAw1FOCQV45uO2SEehsJw"',
-    "mtime": "2026-07-06T08:04:09.445Z",
-    "size": 16315,
-    "path": "../public/assets/ResponseView-wZzskUas.js"
+    "etag": '"36c-yfRDDJm0mM1r+nbDh5oXBDpciWQ"',
+    "mtime": "2026-07-06T23:30:24.817Z",
+    "size": 876,
+    "path": "../public/assets/_sessionId-ZuH6-ZX5.js"
+  },
+  "/assets/StreamingChunkSequence-DSRjbgqb.js": {
+    "type": "text/javascript; charset=utf-8",
+    "etag": '"dd6-phWzlhQq/JJk54G5Z2rU0kzp2as"',
+    "mtime": "2026-07-06T23:30:24.817Z",
+    "size": 3542,
+    "path": "../public/assets/StreamingChunkSequence-DSRjbgqb.js"
+  },
+  "/assets/qwen-CONDcHqt.png": {
+    "type": "image/png",
+    "etag": '"572c3-cdJAPaHdOvFCGzuaQjagdgOu6XE"',
+    "mtime": "2026-07-06T23:30:24.816Z",
+    "size": 357059,
+    "path": "../public/assets/qwen-CONDcHqt.png"
   },
-  "/assets/ProxyViewerContainer-BxselkhN.js": {
+  "/assets/ProxyViewerContainer-CNLLZq37.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"ae583-F8VHf7p3x5cLC6mForh8s/N9d3A"',
-    "mtime": "2026-07-06T08:04:09.445Z",
-    "size": 714115,
-    "path": "../public/assets/ProxyViewerContainer-BxselkhN.js"
+    "etag": '"aece0-rsojOMYS6lexxfh1G0dXZ/InUpE"',
+    "mtime": "2026-07-06T23:30:24.817Z",
+    "size": 716e3,
+    "path": "../public/assets/ProxyViewerContainer-CNLLZq37.js"
   }
 };
 function readAsset(id) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tonyclaw/agent-inspector",
-  "version": "2.1.21",
+  "version": "2.1.23",
   "type": "module",
   "description": "Agent observability and knowledge capture layer for AI coding tools.",
   "license": "MIT",

package/src/components/ProxyViewer.tsx

@@ -27,10 +27,12 @@ import {
   Gauge,
   Flag,
   Plus,
+  Search,
   Siren,
   Timer,
   Trash2,
   Upload,
+  X,
 } from "lucide-react";
 
 import type { CapturedLog } from "../contracts";
@@ -963,8 +965,13 @@ export function formatPaginationStatus({
   const last = logs[logs.length - 1];
   const range =
     first === undefined || last === undefined ? "Current page" : `#${first.id}-#${last.id}`;
-  const total = pagination.total === null ? "logs" : `${pagination.total} logs`;
-  return `Showing ${range} of ${total}`;
+  if (pagination.total === null) {
+    return `Showing ${logs.length} logs (${range})`;
+  }
+  if (pagination.total <= logs.length) {
+    return `Showing all ${pagination.total} logs`;
+  }
+  return `Showing ${logs.length} of ${pagination.total} logs (${range})`;
 }
 
 function LogPaginationButton({
@@ -1823,6 +1830,11 @@ export function ProxyViewer({
   const comparisonPredecessors = useMemo(() => buildValidPredecessors(groups), [groups]);
   const exportActionVisibility = getExportActionVisibility(captureMode, logs.length);
   const isPinnedSessionPage = pinnedSessionId !== undefined;
+  const sessionInputValue = selectedSession === "__all__" ? "" : selectedSession;
+  const sessionSelectValue =
+    selectedSession === "__all__" || sessions.includes(selectedSession)
+      ? selectedSession
+      : "__typed__";
   const activeScopeLabel =
     hasSessionContext && sessionContextScope !== null
       ? truncateSessionId(sessionContextScope.label)
@@ -1847,6 +1859,20 @@ export function ProxyViewer({
     },
     [comparisonPredecessors],
   );
+  const handleSessionInputChange = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) => {
+      const value = event.currentTarget.value.trim();
+      onSessionChange(value === "" ? "__all__" : value);
+    },
+    [onSessionChange],
+  );
+  const handleSessionSelectChange = useCallback(
+    (value: string) => {
+      if (value === "__typed__") return;
+      onSessionChange(value);
+    },
+    [onSessionChange],
+  );
 
   return (
     <div className="bg-background min-h-screen w-full text-foreground">
@@ -1904,19 +1930,49 @@ export function ProxyViewer({
             <SidebarPanel label="Filters">
               <div className="space-y-2">
                 {!hideSessionFilter && (
-                  <Select value={selectedSession} onValueChange={onSessionChange}>
-                    <SelectTrigger className="border border-input bg-background hover:bg-accent hover:text-accent-foreground h-9 w-full 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>
+                  <>
+                    <div className="relative">
+                      <Search className="pointer-events-none absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" />
+                      <input
+                        type="search"
+                        value={sessionInputValue}
+                        onChange={handleSessionInputChange}
+                        placeholder="Paste session ID"
+                        className="border border-input bg-background hover:bg-accent focus-visible:ring-ring h-9 w-full rounded-md px-8 font-mono text-xs text-foreground outline-none transition-colors placeholder:font-sans placeholder:text-muted-foreground focus-visible:ring-1"
+                        aria-label="Filter by session ID"
+                        title="Filter by exact session ID"
+                      />
+                      {sessionInputValue !== "" && (
+                        <button
+                          type="button"
+                          onClick={() => onSessionChange("__all__")}
+                          className="absolute right-1.5 top-1/2 inline-flex size-6 -translate-y-1/2 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-white/[0.06] hover:text-foreground"
+                          aria-label="Clear session filter"
+                          title="Clear session filter"
+                        >
+                          <X className="size-3.5" />
+                        </button>
+                      )}
+                    </div>
+                    <Select value={sessionSelectValue} onValueChange={handleSessionSelectChange}>
+                      <SelectTrigger className="border border-input bg-background hover:bg-accent hover:text-accent-foreground h-9 w-full text-xs">
+                        <SelectValue placeholder="All sessions" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="__all__">All sessions</SelectItem>
+                        {sessionSelectValue === "__typed__" && (
+                          <SelectItem value="__typed__">
+                            Typed: {truncateSessionId(selectedSession)}
+                          </SelectItem>
+                        )}
+                        {sessions.map((s) => (
+                          <SelectItem key={s} value={s}>
+                            {truncateSessionId(s)}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </>
                 )}
                 <Select value={selectedModel} onValueChange={onModelChange}>
                   <SelectTrigger className="border border-input bg-background hover:bg-accent hover:text-accent-foreground h-9 w-full text-xs">

package/src/components/ProxyViewerContainer.tsx

@@ -97,7 +97,7 @@ function extractModels(logs: CapturedLog[]): string[] {
  * pass through. Returns the input array reference when no log matches the
  * filter, so referential equality is preserved for empty results.
  */
-function filterLogs(
+export function filterLogs(
   logs: CapturedLog[],
   selectedSession: string,
   selectedModel: string,

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

@@ -57,6 +57,10 @@ export function hasPendingLogs(logs: readonly CapturedLog[]): boolean {
   return logs.some((log) => log.responseStatus === null);
 }
 
+export function countPendingTurns(logs: readonly CapturedLog[]): number {
+  return logs.filter((log) => log.responseStatus === null).length;
+}
+
 export function findConversationGroupIndexForLog(
   groups: readonly ConversationGroupData[],
   logId: number,
@@ -281,11 +285,21 @@ function SummaryChip({
   );
 }
 
-function WorkingBadge({ label = "Working" }: { label?: string }): JSX.Element {
+function PendingTurnBadge({
+  count,
+  label = "Turn open",
+}: {
+  count: number;
+  label?: string;
+}): JSX.Element {
   return (
-    <span className="inline-flex h-6 shrink-0 items-center gap-1.5 rounded-md bg-cyan-300/[0.08] px-1.5 font-mono text-[10px] uppercase tracking-[0.14em] text-cyan-100/85">
+    <span
+      className="inline-flex h-6 shrink-0 items-center gap-1.5 rounded-md bg-amber-300/[0.10] px-1.5 font-mono text-[10px] uppercase tracking-[0.14em] text-amber-100/90 ring-1 ring-amber-200/10"
+      title={`${count} turn${count !== 1 ? "s" : ""} not finished yet`}
+    >
       <Loader2 className="size-3 animate-spin" />
       {label}
+      {count > 1 && <span className="tabular-nums">x{count}</span>}
     </span>
   );
 }
@@ -296,7 +310,7 @@ function LoadingSweep(): JSX.Element {
       className="pointer-events-none absolute inset-x-3 bottom-0 h-px overflow-hidden rounded-full bg-white/[0.06]"
       aria-hidden="true"
     >
-      <span className="absolute inset-y-0 left-0 w-1/3 animate-pulse rounded-full bg-cyan-200/55 shadow-[0_0_14px_rgba(103,232,249,0.35)]" />
+      <span className="absolute inset-y-0 left-0 w-1/3 animate-pulse rounded-full bg-amber-200/65 shadow-[0_0_14px_rgba(252,211,77,0.32)]" />
     </span>
   );
 }
@@ -370,7 +384,8 @@ function IdeGroupSection({
   const totals = tokenTotals(group.logs);
   const sessionCount = countSessions(group.processes);
   const logCount = group.logs.length;
-  const isWorking = hasPendingLogs(group.logs);
+  const pendingTurnCount = countPendingTurns(group.logs);
+  const isWorking = pendingTurnCount > 0;
 
   return (
     <section
@@ -405,7 +420,7 @@ function IdeGroupSection({
             <span className="rounded bg-cyan-300/[0.06] px-1.5 py-0.5 font-mono text-[10px] uppercase tracking-[0.16em] text-cyan-100/75">
               IDE
             </span>
-            {isWorking && <WorkingBadge />}
+            {isWorking && <PendingTurnBadge count={pendingTurnCount} label="Turn open" />}
           </span>
           <span className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground">
             <span>
@@ -463,7 +478,8 @@ function ProcessGroupSection({
   const projectLabel = shortProjectPath(group.clientProjectFolder);
   const sessionCount = group.sessions.length;
   const logCount = group.logs.length;
-  const isWorking = hasPendingLogs(group.logs);
+  const pendingTurnCount = countPendingTurns(group.logs);
+  const isWorking = pendingTurnCount > 0;
   const processLabel =
     group.clientPid !== null && group.clientPid !== undefined
       ? `PID ${group.clientPid}`
@@ -488,7 +504,7 @@ function ProcessGroupSection({
               <span className="font-mono text-xs font-semibold tabular-nums text-slate-100">
                 {processLabel}
               </span>
-              {isWorking && <WorkingBadge label="Active" />}
+              {isWorking && <PendingTurnBadge count={pendingTurnCount} label="Turn open" />}
               {projectLabel !== null && (
                 <span
                   className="inline-flex min-w-0 items-center gap-1 text-xs text-muted-foreground"

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

@@ -49,6 +49,18 @@ function HeaderMetric({
   );
 }
 
+function PendingTurnBadge(): JSX.Element {
+  return (
+    <span
+      className="inline-flex h-6 shrink-0 items-center gap-1.5 rounded-md bg-amber-300/[0.10] px-1.5 font-mono text-[10px] uppercase tracking-[0.14em] text-amber-100/90 ring-1 ring-amber-200/10"
+      title="This session has a turn that has not finished yet"
+    >
+      <Loader2 className="size-3 animate-spin" />
+      Turn open
+    </span>
+  );
+}
+
 export type ConversationHeaderProps = {
   conversationId: string;
   startTime: string;
@@ -234,12 +246,7 @@ export function ConversationHeader({
             </span>
           )}
 
-          {isLoading && (
-            <span className="inline-flex h-6 shrink-0 items-center gap-1.5 rounded-md bg-cyan-300/[0.08] px-1.5 font-mono text-[10px] uppercase tracking-[0.14em] text-cyan-100/85">
-              <Loader2 className="size-3 animate-spin" />
-              Working
-            </span>
-          )}
+          {isLoading && <PendingTurnBadge />}
         </span>
 
         <span className="mt-1.5 flex min-w-0 flex-wrap items-center gap-1.5">
@@ -307,7 +314,7 @@ export function ConversationHeader({
           className="pointer-events-none absolute inset-x-3 bottom-0 h-px overflow-hidden rounded-full bg-white/[0.06]"
           aria-hidden="true"
         >
-          <span className="absolute inset-y-0 left-0 w-1/3 animate-pulse rounded-full bg-cyan-200/55 shadow-[0_0_14px_rgba(103,232,249,0.35)]" />
+          <span className="absolute inset-y-0 left-0 w-1/3 animate-pulse rounded-full bg-amber-200/65 shadow-[0_0_14px_rgba(252,211,77,0.32)]" />
         </span>
       )}
 

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

@@ -60,6 +60,8 @@ function resolveFocusedTab(tab: LogFocusTab, anatomySegments: AnatomySegment[] |
       return anatomySegments === null ? "request" : "anatomy";
     case "request":
       return "request";
+    case "response":
+      return "parsed";
   }
 }
 
@@ -429,6 +431,8 @@ export const LogEntry = memo(function ({
   const [headersDiff, setHeadersDiff] = useState<boolean>(false);
   const [requestDiff, setRequestDiff] = useState<boolean>(false);
   const [activeTab, setActiveTab] = useState("request");
+  const [focusedToolIndex, setFocusedToolIndex] = useState<number | null>(null);
+  const [toolFocusNonce, setToolFocusNonce] = useState(0);
   const [expandToPath, setExpandToPath] = useState<string | null>(null);
   const [hydratedLog, setHydratedLog] = useState<CapturedLog | null>(null);
   const [bodyHydrationStatus, setBodyHydrationStatus] = useState<BodyHydrationStatus>("idle");
@@ -779,6 +783,10 @@ export const LogEntry = memo(function ({
       if (request.logId !== log.id) return;
       setExpanded(true);
       setActiveTab(resolveFocusedTab(request.tab, anatomySegments));
+      if (request.tab === "response" && request.toolCallIndex !== undefined) {
+        setFocusedToolIndex(request.toolCallIndex);
+        setToolFocusNonce((current) => current + 1);
+      }
     };
 
     window.addEventListener(LOG_FOCUS_REQUEST_EVENT, handleLogFocusRequest);
@@ -1120,6 +1128,8 @@ export const LogEntry = memo(function ({
                           cacheReadInputTokens={displayLog.cacheReadInputTokens}
                           apiFormat={resolvedFormat}
                           error={displayLog.error}
+                          focusedToolIndex={focusedToolIndex}
+                          toolFocusNonce={toolFocusNonce}
                         />
                       </Suspense>
                     )}

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

@@ -19,6 +19,8 @@ export type ResponseViewProps = {
   apiFormat?: ApiFormat;
   /** SSE error message from streaming response */
   error?: string | null;
+  focusedToolIndex?: number | null;
+  toolFocusNonce?: number;
 };
 
 function getStatusClasses(category: StatusCategory): string {
@@ -74,6 +76,8 @@ export const ResponseView = memo(function ResponseView({
   cacheReadInputTokens,
   apiFormat,
   error,
+  focusedToolIndex = null,
+  toolFocusNonce = 0,
 }: ResponseViewProps): JSX.Element {
   const resolvedFormat = apiFormat ?? "unknown";
   const parsed = useMemo(
@@ -128,7 +132,7 @@ export const ResponseView = memo(function ResponseView({
     return (
       <div className="space-y-2">
         <StatusIndicator status={responseStatus} />
-        {formatViewFor(resolvedFormat, parsed)}
+        {formatViewFor(resolvedFormat, parsed, { focusedToolIndex, toolFocusNonce })}
       </div>
     );
   }

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

@@ -1,52 +1,40 @@
 import { type JSX } from "react";
-import { Check, ChevronRight, Copy, Wrench } from "lucide-react";
+import { Wrench } from "lucide-react";
 import type { ToolTraceEvent } from "./viewerState";
-import { useCopyFeedback } from "./useCopyFeedback";
+import { dispatchLogFocusRequest } from "./logFocus";
 
 type ToolTraceEventsProps = {
   events: ToolTraceEvent[];
 };
 
-function ToolTraceEventRow({ event }: { event: ToolTraceEvent }): JSX.Element {
-  const argumentCopy = useCopyFeedback(event.argumentsText);
-  const canCopyArguments = event.argumentsText !== null;
-
+function ToolTraceEventChip({ event }: { event: ToolTraceEvent }): JSX.Element {
   return (
-    <div
+    <button
+      type="button"
       key={event.id}
-      className="group/tool-trace flex min-w-0 items-center gap-2 rounded-md bg-white/[0.035] px-2.5 py-1.5 text-xs"
+      className="inline-flex min-w-0 items-center gap-1.5 rounded-md bg-white/[0.035] px-2 py-1 text-xs text-muted-foreground transition-colors hover:bg-sky-400/[0.08] hover:text-sky-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+      onClick={() =>
+        dispatchLogFocusRequest({
+          logId: event.logId,
+          tab: "response",
+          toolCallIndex: event.index,
+        })
+      }
+      aria-label={`Open response tool call ${event.name}`}
+      title={`Open ${event.name} in Response`}
     >
       <Wrench className="size-3.5 shrink-0 text-sky-400/70" />
-      <span className="font-mono font-semibold text-foreground/80">{event.name}</span>
-      {event.argumentsPreview !== null && (
-        <>
-          <ChevronRight className="size-3 shrink-0 text-muted-foreground/60" />
-          <span className="min-w-0 truncate font-mono text-muted-foreground">
-            {event.argumentsPreview}
-          </span>
-        </>
-      )}
-      {canCopyArguments && (
-        <button
-          type="button"
-          className="ml-auto inline-flex size-6 shrink-0 items-center justify-center rounded text-muted-foreground opacity-0 transition-opacity hover:bg-background/80 hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring group-hover/tool-trace:opacity-100 group-focus-within/tool-trace:opacity-100"
-          onClick={argumentCopy.copy}
-          aria-label={argumentCopy.copied ? "Copied tool arguments" : "Copy tool arguments"}
-          title={argumentCopy.copied ? "Copied tool arguments" : "Copy tool arguments"}
-        >
-          {argumentCopy.copied ? <Check className="size-3.5" /> : <Copy className="size-3.5" />}
-        </button>
-      )}
-    </div>
+      <span className="min-w-0 truncate font-mono font-semibold">{event.name}</span>
+    </button>
   );
 }
 
 export function ToolTraceEvents({ events }: ToolTraceEventsProps): JSX.Element | null {
   if (events.length === 0) return null;
   return (
-    <div className="mx-3 mb-2 grid gap-1.5">
+    <div className="mx-3 mb-2 flex flex-wrap gap-1.5">
       {events.map((event) => (
-        <ToolTraceEventRow key={event.id} event={event} />
+        <ToolTraceEventChip key={event.id} event={event} />
       ))}
     </div>
   );

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

@@ -14,6 +14,7 @@ import type { TimeDisplayFormat } from "../../lib/runtimeConfig";
 import { cn, formatTokens } from "../../lib/utils";
 import type { CapturedLog } from "../../contracts";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/tooltip";
+import { getCrabVariant } from "../ui/crab-variants";
 import type { CacheTrendEntry } from "./cacheTrend";
 import { LogEntry } from "./LogEntry";
 import {
@@ -177,6 +178,7 @@ export const TurnGroup = memo(function TurnGroup({
 
   const firstLogId = entries[0]?.log.id ?? turnIndex;
   const turnLabel = `Turn ${String(turnIndex + 1)}`;
+  const CollapsedCrab = useMemo(() => getCrabVariant(firstLogId % 12), [firstLogId]);
   const containmentStyle = useMemo<CSSProperties>(
     () => ({
       contentVisibility: "auto",
@@ -224,16 +226,28 @@ export const TurnGroup = memo(function TurnGroup({
 
           <div className="w-6 shrink-0 flex flex-col items-center pt-1.5 pb-1.5">
             <div className="flex justify-center h-[calc(0.75rem-8px)]" />
-            <span className="size-2 rounded-full bg-cyan-300/45" />
-            <div className="flex-1 flex justify-center min-h-0">
-              <div className="w-px bg-muted-foreground/14 h-full" />
-            </div>
-            <span
+            <CollapsedCrab
               className={cn(
-                "size-2 rounded-full",
-                isComplete ? "bg-amber-300/45" : "bg-muted-foreground/25",
+                "size-3.5",
+                isPending
+                  ? "animate-crab-crawl text-amber-300/80"
+                  : "animate-crab-appear text-emerald-400",
+                isPending
+                  ? "drop-shadow-[0_0_4px_rgba(252,211,77,0.42)]"
+                  : "drop-shadow-[0_0_4px_rgba(52,211,153,0.45)]",
               )}
             />
+            <div className="flex-1 flex justify-center min-h-0">
+              <div className="w-px bg-muted-foreground/14 h-full" />
+            </div>
+            {isComplete && (
+              <CollapsedCrab
+                className={cn(
+                  "size-3.5 animate-crab-settle text-amber-400",
+                  "drop-shadow-[0_0_4px_rgba(251,191,36,0.45)]",
+                )}
+              />
+            )}
           </div>
 
           {/* Summary content - hidden for single-log turns. */}