@tonyclaw/agent-inspector 2.1.22 → 2.1.24

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:42:14.499Z",
+    "mtime": "2026-07-06T23:47:30.045Z",
     "size": 5915,
     "path": "../public/assets/alibaba-TTwafVwX.svg"
   },
-  "/assets/CompareDrawer-B-I_z_oJ.js": {
+  "/assets/index-CUKpd9jb.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"4bbf-boMYNxH3OYElTxrB6f+S8JpJhEU"',
-    "mtime": "2026-07-06T08:42:14.500Z",
-    "size": 19391,
-    "path": "../public/assets/CompareDrawer-B-I_z_oJ.js"
+    "etag": '"74-S5coP0OJAkI32YF22K1A7pIhhaQ"',
+    "mtime": "2026-07-06T23:47:30.045Z",
+    "size": 116,
+    "path": "../public/assets/index-CUKpd9jb.js"
   },
-  "/assets/json-viewer-VR9OOnl8.js": {
+  "/assets/json-viewer-CWxF2eLV.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"1ae6-q2HRnhbr4RmbtnJRlXqA3AA5pn0"',
-    "mtime": "2026-07-06T08:42:14.500Z",
+    "etag": '"1ae6-W5gyZM3eWBF1xbeKMyl4smbFfEM"',
+    "mtime": "2026-07-06T23:47:30.047Z",
     "size": 6886,
-    "path": "../public/assets/json-viewer-VR9OOnl8.js"
+    "path": "../public/assets/json-viewer-CWxF2eLV.js"
   },
-  "/assets/index-DFEiGFKE.js": {
+  "/assets/CompareDrawer-DsHSCHSx.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"74-qVbgeAxjdS6pAIAlbzvrFevVSso"',
-    "mtime": "2026-07-06T08:42:14.500Z",
-    "size": 116,
-    "path": "../public/assets/index-DFEiGFKE.js"
+    "etag": '"4bbf-nlyV9TgErKS/2wxRBsjCrr8IQBo"',
+    "mtime": "2026-07-06T23:47:30.047Z",
+    "size": 19391,
+    "path": "../public/assets/CompareDrawer-DsHSCHSx.js"
   },
-  "/assets/index-M6p8Q0LA.js": {
-    "type": "text/javascript; charset=utf-8",
-    "etag": '"1cd2c-dKmvWl4iX4kQEQiFVvEkD2o9yeo"',
-    "mtime": "2026-07-06T08:42:14.500Z",
-    "size": 118060,
-    "path": "../public/assets/index-M6p8Q0LA.js"
+  "/assets/index-Tq5s9NV0.css": {
+    "type": "text/css; charset=utf-8",
+    "etag": '"22408-MQKT02eqQudVEj/DozyiEJoTl6E"',
+    "mtime": "2026-07-06T23:47:30.045Z",
+    "size": 140296,
+    "path": "../public/assets/index-Tq5s9NV0.css"
   },
   "/assets/minimax-BPMzvuL-.jpeg": {
     "type": "image/jpeg",
     "etag": '"1b06-IwivU89ko5UTMUM1/t7hn4sQK9A"',
-    "mtime": "2026-07-06T08:42:14.499Z",
+    "mtime": "2026-07-06T23:47:30.042Z",
     "size": 6918,
     "path": "../public/assets/minimax-BPMzvuL-.jpeg"
   },
-  "/assets/main-C9gW57P6.js": {
+  "/assets/RequestAnatomy-BG5mb14k.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"512fd-Qkx6OXZVaW68qCJzUwcgoV0n85s"',
-    "mtime": "2026-07-06T08:42:14.499Z",
-    "size": 332541,
-    "path": "../public/assets/main-C9gW57P6.js"
+    "etag": '"43f2-5+JmeO4mEgbfXx4qZ0z/5j/kGC0"',
+    "mtime": "2026-07-06T23:47:30.047Z",
+    "size": 17394,
+    "path": "../public/assets/RequestAnatomy-BG5mb14k.js"
   },
-  "/assets/ReplayDialog-ofqVRdc-.js": {
+  "/assets/StreamingChunkSequence-BeqKXAS6.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"31d6-1x+H2vdKEwKrpalZioFQypNeHQk"',
-    "mtime": "2026-07-06T08:42:14.500Z",
-    "size": 12758,
-    "path": "../public/assets/ReplayDialog-ofqVRdc-.js"
+    "etag": '"dd6-+UuLiAyXfMce8K34YDVdE2+W+dQ"',
+    "mtime": "2026-07-06T23:47:30.047Z",
+    "size": 3542,
+    "path": "../public/assets/StreamingChunkSequence-BeqKXAS6.js"
   },
-  "/assets/index-bXU6y_wh.css": {
-    "type": "text/css; charset=utf-8",
-    "etag": '"21894-+/BIDNcJdO1E5wKWMCSoJKkp5xY"',
-    "mtime": "2026-07-06T08:42:14.499Z",
-    "size": 137364,
-    "path": "../public/assets/index-bXU6y_wh.css"
+  "/assets/zhipuai-BPNAnxo-.svg": {
+    "type": "image/svg+xml",
+    "etag": '"2bf8-hNaLCTi89nOFCsIIfWpP/jrfo0s"',
+    "mtime": "2026-07-06T23:47:30.045Z",
+    "size": 11256,
+    "path": "../public/assets/zhipuai-BPNAnxo-.svg"
   },
-  "/assets/RequestAnatomy-lyPjHWzS.js": {
+  "/assets/main-BDfcCp_1.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"43f2-dm2JSsxHwTjClZaY75s6pB3OCRE"',
-    "mtime": "2026-07-06T08:42:14.500Z",
-    "size": 17394,
-    "path": "../public/assets/RequestAnatomy-lyPjHWzS.js"
+    "etag": '"512fd-wNI+QxyzwhA/0QqJbbcpb3MMxmg"',
+    "mtime": "2026-07-06T23:47:30.047Z",
+    "size": 332541,
+    "path": "../public/assets/main-BDfcCp_1.js"
   },
-  "/assets/StreamingChunkSequence-CIn2xdVv.js": {
+  "/assets/ReplayDialog-D0ixqStX.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"dd6-1z9xyDwQxM73GFtieH0lBUQMPeo"',
-    "mtime": "2026-07-06T08:42:14.500Z",
-    "size": 3542,
-    "path": "../public/assets/StreamingChunkSequence-CIn2xdVv.js"
+    "etag": '"31d6-kYb7AI9zYbXu6Y118c89CIIKsQk"',
+    "mtime": "2026-07-06T23:47:30.047Z",
+    "size": 12758,
+    "path": "../public/assets/ReplayDialog-D0ixqStX.js"
   },
-  "/assets/ResponseView-BL263es5.js": {
+  "/assets/ResponseView-Bgns6xum.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"3fbb-YhzY74QAmiktBkyeD8ZWACFw+Rc"',
-    "mtime": "2026-07-06T08:42:14.500Z",
-    "size": 16315,
-    "path": "../public/assets/ResponseView-BL263es5.js"
+    "etag": '"47fa-9tCNwF7F78L1zRC3UidiQKud7L8"',
+    "mtime": "2026-07-06T23:47:30.047Z",
+    "size": 18426,
+    "path": "../public/assets/ResponseView-Bgns6xum.js"
   },
-  "/assets/_sessionId-KmeAKZJw.js": {
+  "/assets/_sessionId-Nme0kuTf.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"36c-l3ljkLbVkD0313o3NVfJSSh4zLI"',
-    "mtime": "2026-07-06T08:42:14.499Z",
+    "etag": '"36c-gpP2xqLaqXgb4GOWSbhVDrqjv3g"',
+    "mtime": "2026-07-06T23:47:30.045Z",
     "size": 876,
-    "path": "../public/assets/_sessionId-KmeAKZJw.js"
-  },
-  "/assets/zhipuai-BPNAnxo-.svg": {
-    "type": "image/svg+xml",
-    "etag": '"2bf8-hNaLCTi89nOFCsIIfWpP/jrfo0s"',
-    "mtime": "2026-07-06T08:42:14.499Z",
-    "size": 11256,
-    "path": "../public/assets/zhipuai-BPNAnxo-.svg"
+    "path": "../public/assets/_sessionId-Nme0kuTf.js"
   },
   "/assets/qwen-CONDcHqt.png": {
     "type": "image/png",
     "etag": '"572c3-cdJAPaHdOvFCGzuaQjagdgOu6XE"',
-    "mtime": "2026-07-06T08:42:14.500Z",
+    "mtime": "2026-07-06T23:47:30.045Z",
     "size": 357059,
     "path": "../public/assets/qwen-CONDcHqt.png"
   },
-  "/assets/ProxyViewerContainer-ygSGJ4EB.js": {
+  "/assets/index-hbDdeKtc.js": {
+    "type": "text/javascript; charset=utf-8",
+    "etag": '"1cd2c-o4cSL+ZBVABZPPb9xrCnibEnQQQ"',
+    "mtime": "2026-07-06T23:47:30.047Z",
+    "size": 118060,
+    "path": "../public/assets/index-hbDdeKtc.js"
+  },
+  "/assets/ProxyViewerContainer-GI3xErl5.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"aec2b-qUHkR4rnnxAag/CXPZQmFBfa3hA"',
-    "mtime": "2026-07-06T08:42:14.500Z",
-    "size": 715819,
-    "path": "../public/assets/ProxyViewerContainer-ygSGJ4EB.js"
+    "etag": '"aef16-1fUWo2IWu+2OgSdsAPCGVYmzUNU"',
+    "mtime": "2026-07-06T23:47:30.047Z",
+    "size": 716566,
+    "path": "../public/assets/ProxyViewerContainer-GI3xErl5.js"
   }
 };
 function readAsset(id) {

package/package.json

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

package/src/components/ProxyViewer.tsx

@@ -1151,7 +1151,7 @@ function CopyableCommand({ command }: { command: string }): JSX.Element {
   }, [command]);
 
   return (
-    <div className="border border-border bg-muted/40 inline-flex max-w-full items-center gap-2 rounded-md px-3 py-2">
+    <div className="bg-black/20 inline-flex max-w-full items-center gap-2 rounded-md px-3 py-2 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.055)]">
       <pre className="m-0 overflow-x-auto font-mono text-sm text-cyan-200">{command}</pre>
       <button
         type="button"
@@ -1170,7 +1170,7 @@ function McpReadyBadge(): JSX.Element {
     <TooltipProvider>
       <Tooltip>
         <TooltipTrigger asChild>
-          <span className="border border-border bg-muted/40 inline-flex h-7 items-center gap-2 rounded-md px-2.5 font-mono text-[11px] font-medium text-cyan-200">
+          <span className="bg-cyan-300/[0.055] shadow-[inset_0_1px_0_rgba(255,255,255,0.05)] inline-flex h-7 items-center gap-2 rounded-md px-2.5 font-mono text-[11px] font-medium text-cyan-200">
             <span className="size-1.5 rounded-full bg-cyan-200 shadow-[0_0_8px_rgba(125,211,252,0.75)]" />
             MCP Ready
             <span className="hidden text-cyan-200/70 sm:inline">/api/mcp</span>
@@ -1195,20 +1195,25 @@ function SidebarPanel({
   className?: string;
 }): JSX.Element {
   return (
-    <section className={cn("border border-border bg-card shadow-sm rounded-[8px]", className)}>
-      <div className="border-b border-white/10 px-3 py-2">
-        <div className="font-mono text-[10px] font-semibold uppercase tracking-[0.14em] text-white/40">
+    <section
+      className={cn(
+        "bg-white/[0.028] shadow-[inset_0_1px_0_rgba(255,255,255,0.035)] rounded-[8px]",
+        className,
+      )}
+    >
+      <div className="px-3 pt-3">
+        <div className="font-mono text-[10px] font-semibold uppercase tracking-[0.14em] text-white/35">
           {label}
         </div>
       </div>
-      <div className="p-3">{children}</div>
+      <div className="p-3 pt-2">{children}</div>
     </section>
   );
 }
 
 function SidebarMetric({ label, value }: { label: string; value: string | number }): JSX.Element {
   return (
-    <div className="border border-border bg-muted/40 min-w-0 rounded-md px-2 py-2">
+    <div className="bg-black/20 min-w-0 rounded-md px-2 py-2 shadow-[inset_0_1px_0_rgba(255,255,255,0.035)]">
       <div className="truncate font-mono text-lg font-semibold leading-6 text-slate-100">
         {value}
       </div>
@@ -1282,7 +1287,7 @@ function BrandHeader({
 }): JSX.Element {
   if (compact) {
     return (
-      <div className="border border-border bg-card shadow-sm rounded-[8px] p-3">
+      <div className="bg-white/[0.035] shadow-[inset_0_1px_0_rgba(255,255,255,0.045),0_16px_44px_rgba(0,0,0,0.18)] rounded-[8px] p-3">
         <div className="flex items-start justify-between gap-3">
           <div className="flex min-w-0 items-start gap-2">
             <CrabFamily compact={true} entrancePhase={crabEntrancePhase} />
@@ -1583,7 +1588,7 @@ function SessionContextBar({
         {showBackLink && (
           <a
             href="/"
-            className="border border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex size-8 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:text-foreground"
+            className="bg-white/[0.035] hover:bg-white/[0.065] inline-flex size-8 shrink-0 items-center justify-center rounded-md text-muted-foreground shadow-[inset_0_0_0_1px_rgba(255,255,255,0.06)] transition-colors hover:text-foreground"
             aria-label="Back to all sessions"
             title="Back to all sessions"
           >
@@ -1620,7 +1625,7 @@ function SessionContextBar({
           <button
             type="button"
             onClick={() => setDetailsOpen((value) => !value)}
-            className="border border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex h-8 shrink-0 items-center gap-1.5 rounded-md px-2.5 font-mono text-[11px] text-muted-foreground transition-colors hover:text-foreground"
+            className="bg-white/[0.035] hover:bg-white/[0.065] inline-flex h-8 shrink-0 items-center gap-1.5 rounded-md px-2.5 font-mono text-[11px] text-muted-foreground shadow-[inset_0_0_0_1px_rgba(255,255,255,0.06)] transition-colors hover:text-foreground"
             aria-expanded={detailsOpen}
             title={detailsOpen ? "Hide context details" : "Show context details"}
           >
@@ -1635,7 +1640,7 @@ function SessionContextBar({
         <button
           type="button"
           onClick={handleCopyLink}
-          className="border border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex size-8 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:text-foreground"
+          className="bg-white/[0.035] hover:bg-white/[0.065] inline-flex size-8 shrink-0 items-center justify-center rounded-md text-muted-foreground shadow-[inset_0_0_0_1px_rgba(255,255,255,0.06)] transition-colors hover:text-foreground"
           aria-label={copied ? "Copied session link" : "Copy session link"}
           title={copied ? "Copied session link" : "Copy session link"}
         >
@@ -1877,7 +1882,7 @@ export function ProxyViewer({
   return (
     <div className="bg-background min-h-screen w-full text-foreground">
       <div className="grid min-h-screen w-full grid-cols-1 lg:grid-cols-[340px_minmax(0,1fr)] xl:grid-cols-[360px_minmax(0,1fr)]">
-        <aside className="bg-background border-b lg:sticky lg:top-0 lg:h-screen lg:overflow-y-auto lg:border-b-0 lg:border-r">
+        <aside className="bg-background/95 border-b border-white/[0.045] lg:sticky lg:top-0 lg:h-screen lg:overflow-y-auto lg:border-b-0 lg:border-r lg:border-white/[0.055]">
           <div className="space-y-4 p-4">
             <BrandHeader compact={true} crabEntrancePhase={crabEntrancePhase} />
 
@@ -1896,7 +1901,7 @@ export function ProxyViewer({
             </SidebarPanel>
 
             <SidebarPanel label="Workspace">
-              <div className="border border-border bg-muted/40 rounded-md px-3 py-2">
+              <div className="bg-black/20 rounded-md px-3 py-2 shadow-[inset_0_1px_0_rgba(255,255,255,0.035)]">
                 <div
                   className="truncate font-mono text-xs font-semibold text-cyan-100"
                   title={activeScopeLabel}
@@ -1938,7 +1943,7 @@ export function ProxyViewer({
                         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"
+                        className="bg-black/25 hover:bg-white/[0.045] focus-visible:ring-ring h-9 w-full rounded-md px-8 font-mono text-xs text-foreground outline-none shadow-[inset_0_0_0_1px_rgba(255,255,255,0.06)] 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"
                       />
@@ -1955,7 +1960,7 @@ export function ProxyViewer({
                       )}
                     </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">
+                      <SelectTrigger className="bg-black/25 hover:bg-white/[0.045] h-9 w-full border-0 text-xs text-foreground shadow-[inset_0_0_0_1px_rgba(255,255,255,0.06)]">
                         <SelectValue placeholder="All sessions" />
                       </SelectTrigger>
                       <SelectContent>
@@ -1975,7 +1980,7 @@ export function ProxyViewer({
                   </>
                 )}
                 <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">
+                  <SelectTrigger className="bg-black/25 hover:bg-white/[0.045] h-9 w-full border-0 text-xs text-foreground shadow-[inset_0_0_0_1px_rgba(255,255,255,0.06)]">
                     <SelectValue placeholder="All models" />
                   </SelectTrigger>
                   <SelectContent>
@@ -1993,7 +1998,7 @@ export function ProxyViewer({
         </aside>
 
         <main className="min-w-0">
-          <div className="border border-border bg-background/95 shadow-sm sticky top-0 z-30 border-b px-4 py-3 lg:px-5">
+          <div className="bg-background/95 shadow-[0_12px_36px_rgba(0,0,0,0.18),inset_0_-1px_0_rgba(255,255,255,0.045)] sticky top-0 z-30 px-4 py-3 lg:px-5">
             <div className="flex flex-wrap items-center gap-2">
               <div className="min-w-[180px] flex-1">
                 <div className="text-sm font-semibold text-foreground">Logs</div>
@@ -2014,7 +2019,7 @@ export function ProxyViewer({
                     type="button"
                     onClick={handleImportClick}
                     disabled={importing}
-                    className="border border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex h-8 items-center gap-1.5 rounded-md px-3 text-xs text-muted-foreground transition-colors hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50"
+                    className="bg-white/[0.035] hover:bg-white/[0.065] inline-flex h-8 items-center gap-1.5 rounded-md px-3 text-xs text-muted-foreground shadow-[inset_0_0_0_1px_rgba(255,255,255,0.06)] transition-colors hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50"
                     title="Import Agent Inspector export"
                   >
                     {importing ? (
@@ -2035,7 +2040,7 @@ export function ProxyViewer({
                     void handleExport("redacted");
                   }}
                   disabled={exporting !== null}
-                  className="border border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex h-8 items-center gap-1.5 rounded-md px-3 text-xs text-muted-foreground transition-colors hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50"
+                  className="bg-white/[0.035] hover:bg-white/[0.065] inline-flex h-8 items-center gap-1.5 rounded-md px-3 text-xs text-muted-foreground shadow-[inset_0_0_0_1px_rgba(255,255,255,0.06)] transition-colors hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50"
                   title="Export redacted logs as JSON ZIP"
                 >
                   {exporting === "redacted" ? (
@@ -2055,7 +2060,7 @@ export function ProxyViewer({
                     void handleExport("raw");
                   }}
                   disabled={exporting !== null}
-                  className="border border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex h-8 items-center gap-1.5 rounded-md px-2.5 text-xs text-muted-foreground transition-colors hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50"
+                  className="bg-white/[0.035] hover:bg-white/[0.065] inline-flex h-8 items-center gap-1.5 rounded-md px-2.5 text-xs text-muted-foreground shadow-[inset_0_0_0_1px_rgba(255,255,255,0.06)] transition-colors hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50"
                   title="Export raw logs without redaction"
                 >
                   {exporting === "raw" ? (
@@ -2071,7 +2076,7 @@ export function ProxyViewer({
               <button
                 type="button"
                 onClick={onClearAll}
-                className="border border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex h-8 items-center gap-1.5 rounded-md px-3 text-xs text-muted-foreground transition-colors hover:text-foreground"
+                className="bg-white/[0.035] hover:bg-white/[0.065] inline-flex h-8 items-center gap-1.5 rounded-md px-3 text-xs text-muted-foreground shadow-[inset_0_0_0_1px_rgba(255,255,255,0.06)] transition-colors hover:text-foreground"
                 title="Clear all logs"
               >
                 <Trash2 className="size-3.5" />
@@ -2101,7 +2106,7 @@ export function ProxyViewer({
             {logs.length === 0 ? (
               selectedSession !== "__all__" ? (
                 <div className="py-16 text-center text-muted-foreground">
-                  <div className="border border-border bg-card shadow-sm mx-auto max-w-xl space-y-4 rounded-[8px] px-4 py-8">
+                  <div className="bg-white/[0.035] shadow-[inset_0_1px_0_rgba(255,255,255,0.045),0_18px_52px_rgba(0,0,0,0.18)] mx-auto max-w-xl space-y-4 rounded-[8px] px-4 py-8">
                     <p className="text-sm font-medium">
                       {isLoading ? "Loading session data..." : "Session not found"}
                     </p>
@@ -2135,7 +2140,7 @@ export function ProxyViewer({
                 </div>
               ) : (
                 <div className="py-16 text-center text-muted-foreground">
-                  <div className="border border-border bg-card shadow-sm mx-auto max-w-2xl space-y-4 rounded-[8px] px-4 py-8">
+                  <div className="bg-white/[0.035] shadow-[inset_0_1px_0_rgba(255,255,255,0.045),0_18px_52px_rgba(0,0,0,0.18)] mx-auto max-w-2xl space-y-4 rounded-[8px] px-4 py-8">
                     <p className="text-sm">No requests captured yet.</p>
                     <div className="flex flex-col items-center gap-2">
                       <CopyableCommand command="ANTHROPIC_BASE_URL=http://localhost:25947/proxy <your-tool>" />

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. */}