@tonyclaw/agent-inspector 2.0.4 → 2.0.6

package/.output/server/index.mjs

@@ -38,107 +38,107 @@ const assets = {
   "/assets/alibaba-TTwafVwX.svg": {
     "type": "image/svg+xml",
     "etag": '"171b-6dyV5K8QjiaY35sN9qNprh9zDIs"',
-    "mtime": "2026-06-20T09:50:40.188Z",
+    "mtime": "2026-06-21T03:27:09.298Z",
     "size": 5915,
     "path": "../public/assets/alibaba-TTwafVwX.svg"
   },
-  "/assets/index-BIw2H6jO.js": {
+  "/assets/CompareDrawer-DDmqSAfl.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"74-4Z3U3XPh22QGtEz8rgtC6KUxxBk"',
-    "mtime": "2026-06-20T09:50:40.189Z",
+    "etag": '"4a25-ax+lNTJqeO5Uw5iRn0IINDghlL8"',
+    "mtime": "2026-06-21T03:27:09.300Z",
+    "size": 18981,
+    "path": "../public/assets/CompareDrawer-DDmqSAfl.js"
+  },
+  "/assets/index-BZ4x5UI6.js": {
+    "type": "text/javascript; charset=utf-8",
+    "etag": '"74-I7Q+PS5hgyBfKRdQxaKtu+fOxCI"',
+    "mtime": "2026-06-21T03:27:09.300Z",
     "size": 116,
-    "path": "../public/assets/index-BIw2H6jO.js"
+    "path": "../public/assets/index-BZ4x5UI6.js"
   },
-  "/assets/index-CobXD0yH.css": {
+  "/assets/index-C624DUk9.css": {
     "type": "text/css; charset=utf-8",
-    "etag": '"17587-wM3UwOtYjpQy81oA4sjkIdizScg"',
-    "mtime": "2026-06-20T09:50:40.188Z",
-    "size": 95623,
-    "path": "../public/assets/index-CobXD0yH.css"
+    "etag": '"17b64-fA2ShN0vgWgtCNH7S8ke3+06+1g"',
+    "mtime": "2026-06-21T03:27:09.300Z",
+    "size": 97124,
+    "path": "../public/assets/index-C624DUk9.css"
+  },
+  "/assets/ReplayDialog-Bt5DGzlh.js": {
+    "type": "text/javascript; charset=utf-8",
+    "etag": '"2383-209uDqfCNP9kp/Eo1OJGkQf5K7o"',
+    "mtime": "2026-06-21T03:27:09.300Z",
+    "size": 9091,
+    "path": "../public/assets/ReplayDialog-Bt5DGzlh.js"
+  },
+  "/assets/RequestAnatomy-BxX3_N9S.js": {
+    "type": "text/javascript; charset=utf-8",
+    "etag": '"21df-RsC1hle1XaaRP0DDNQAtrI26Ohw"',
+    "mtime": "2026-06-21T03:27:09.300Z",
+    "size": 8671,
+    "path": "../public/assets/RequestAnatomy-BxX3_N9S.js"
   },
   "/assets/minimax-BPMzvuL-.jpeg": {
     "type": "image/jpeg",
     "etag": '"1b06-IwivU89ko5UTMUM1/t7hn4sQK9A"',
-    "mtime": "2026-06-20T09:50:40.188Z",
+    "mtime": "2026-06-21T03:27:09.300Z",
     "size": 6918,
     "path": "../public/assets/minimax-BPMzvuL-.jpeg"
   },
-  "/assets/json-viewer-BrzjD7qI.js": {
-    "type": "text/javascript; charset=utf-8",
-    "etag": '"1e652-kToNy9EOWKlmvVVK2ggoK6Yj4is"',
-    "mtime": "2026-06-20T09:50:40.189Z",
-    "size": 124498,
-    "path": "../public/assets/json-viewer-BrzjD7qI.js"
-  },
-  "/assets/main-mgxeUdZQ.js": {
+  "/assets/json-viewer-CRL_gWEZ.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"5138c-8pFfB8xlDwdi154QNl3icGhbrO0"',
-    "mtime": "2026-06-20T09:50:40.189Z",
-    "size": 332684,
-    "path": "../public/assets/main-mgxeUdZQ.js"
-  },
-  "/assets/RequestAnatomy-DZ8grAih.js": {
-    "type": "text/javascript; charset=utf-8",
-    "etag": '"1426-KgPrtOak3tXSA1eBiDgPYDF0NzY"',
-    "mtime": "2026-06-20T09:50:40.189Z",
-    "size": 5158,
-    "path": "../public/assets/RequestAnatomy-DZ8grAih.js"
-  },
-  "/assets/ReplayDialog-DTeaHHit.js": {
-    "type": "text/javascript; charset=utf-8",
-    "etag": '"11c0-vzfqRFtK58XnhNRimd5URd22Gcs"',
-    "mtime": "2026-06-20T09:50:40.189Z",
-    "size": 4544,
-    "path": "../public/assets/ReplayDialog-DTeaHHit.js"
+    "etag": '"1e653-xRVAXa9/k/0cz9lZfPZsShTfToA"',
+    "mtime": "2026-06-21T03:27:09.301Z",
+    "size": 124499,
+    "path": "../public/assets/json-viewer-CRL_gWEZ.js"
   },
-  "/assets/ResponseView-Cldm6RCi.js": {
+  "/assets/StreamingChunkSequence-RJMwNf6F.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"6b01-Qix5qsvqjrCTAlqfCJ+Pp8h1e9I"',
-    "mtime": "2026-06-20T09:50:40.189Z",
-    "size": 27393,
-    "path": "../public/assets/ResponseView-Cldm6RCi.js"
+    "etag": '"d82-23sq9u+7FJWOVlw2ZwY9VyBv1us"',
+    "mtime": "2026-06-21T03:27:09.300Z",
+    "size": 3458,
+    "path": "../public/assets/StreamingChunkSequence-RJMwNf6F.js"
   },
-  "/assets/StreamingChunkSequence-3x4p-yT7.js": {
+  "/assets/ResponseView-Bl_5S9gZ.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"d81-mHjIspQgaAOB4LmN6Cfnz+NcWOM"',
-    "mtime": "2026-06-20T09:50:40.189Z",
-    "size": 3457,
-    "path": "../public/assets/StreamingChunkSequence-3x4p-yT7.js"
+    "etag": '"6aab-UCFRuWGhCGLKb2s5NCp1phbPUzQ"',
+    "mtime": "2026-06-21T03:27:09.300Z",
+    "size": 27307,
+    "path": "../public/assets/ResponseView-Bl_5S9gZ.js"
   },
   "/assets/zhipuai-BPNAnxo-.svg": {
     "type": "image/svg+xml",
     "etag": '"2bf8-hNaLCTi89nOFCsIIfWpP/jrfo0s"',
-    "mtime": "2026-06-20T09:50:40.188Z",
+    "mtime": "2026-06-21T03:27:09.298Z",
     "size": 11256,
     "path": "../public/assets/zhipuai-BPNAnxo-.svg"
   },
-  "/assets/CompareDrawer-BCH_fsLm.js": {
+  "/assets/_sessionId-b4isaoDp.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"4a1f-Y215Tlm1TY2GPfXfX4DX86bgJPU"',
-    "mtime": "2026-06-20T09:50:40.189Z",
-    "size": 18975,
-    "path": "../public/assets/CompareDrawer-BCH_fsLm.js"
+    "etag": '"d2-p8zHXMHP91ArIYS6WLwFbKor58Y"',
+    "mtime": "2026-06-21T03:27:09.300Z",
+    "size": 210,
+    "path": "../public/assets/_sessionId-b4isaoDp.js"
   },
-  "/assets/_sessionId-YqWFBu6d.js": {
+  "/assets/main-CKnTJ4-O.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"d2-hOIbwqwgtPs0H/vPSZ1gDPz5pFU"',
-    "mtime": "2026-06-20T09:50:40.189Z",
-    "size": 210,
-    "path": "../public/assets/_sessionId-YqWFBu6d.js"
+    "etag": '"5138c-MlPN81hCf/6HY5xIpWbk5sw0drc"',
+    "mtime": "2026-06-21T03:27:09.300Z",
+    "size": 332684,
+    "path": "../public/assets/main-CKnTJ4-O.js"
   },
   "/assets/qwen-CONDcHqt.png": {
     "type": "image/png",
     "etag": '"572c3-cdJAPaHdOvFCGzuaQjagdgOu6XE"',
-    "mtime": "2026-06-20T09:50:40.188Z",
+    "mtime": "2026-06-21T03:27:09.300Z",
     "size": 357059,
     "path": "../public/assets/qwen-CONDcHqt.png"
   },
-  "/assets/ProxyViewerContainer-D85_UANk.js": {
+  "/assets/ProxyViewerContainer-Cxpdziwd.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"79ec4-8t+BfQ9tY8ia35/KlmoU69wDlc8"',
-    "mtime": "2026-06-20T09:50:40.189Z",
-    "size": 499396,
-    "path": "../public/assets/ProxyViewerContainer-D85_UANk.js"
+    "etag": '"7d8f5-2o+HRUWRh8QXo5PbcEDo+/1GGt0"',
+    "mtime": "2026-06-21T03:27:09.300Z",
+    "size": 514293,
+    "path": "../public/assets/ProxyViewerContainer-Cxpdziwd.js"
   }
 };
 function readAsset(id) {

package/package.json

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

package/src/components/OnboardingBanner.tsx

@@ -3,13 +3,8 @@ import type { JSX } from "react";
 import { useOnboarding } from "../lib/useOnboarding";
 
 /**
- * First-launch onboarding banner. Shows once on a fresh install (or
- * any user who hasn't yet dismissed it), explains the per-tab data
- * shapes the proxy captures, and disappears forever on dismissal.
- *
- * The "seen" state lives in the server's runtime config — see
- * `useOnboarding` — so the dismissal persists across browser sessions
- * and devices for the same install.
+ * First-launch onboarding banner. Shows once on a fresh install and persists
+ * dismissal through the server runtime config.
  */
 export function OnboardingBanner(): JSX.Element | null {
   const { hasSeenOnboarding, isLoading, markSeen } = useOnboarding();
@@ -22,22 +17,19 @@ export function OnboardingBanner(): JSX.Element | null {
       aria-label="Onboarding tip"
       className="mx-4 mt-2 mb-1 flex items-start gap-3 rounded-md border border-amber-500/30 bg-amber-500/5 px-4 py-3 text-sm"
     >
-      <div className="flex-1 min-w-0">
-        <div className="font-medium text-amber-600 dark:text-amber-400 mb-1">
-          Quick tour of the log tabs
+      <div className="min-w-0 flex-1">
+        <div className="mb-1 font-medium text-amber-600 dark:text-amber-400">
+          Agent Inspector is ready
         </div>
-        <ul className="space-y-0.5 text-muted-foreground text-xs leading-relaxed">
+        <ul className="space-y-0.5 text-xs leading-relaxed text-muted-foreground">
           <li>
-            <strong>Request</strong> / <strong>Response</strong> — structured views of what the
-            proxy sent and received.
+            <strong>Trace</strong>: requests, responses, streaming chunks, tools, and timing.
           </li>
           <li>
-            <strong>Headers</strong> — request and response headers after proxy processing.
+            <strong>Replay</strong>: resend captured requests and compare provider behavior.
           </li>
           <li>
-            <strong>Raw Headers</strong> / <strong>Raw Request</strong> /{" "}
-            <strong>Raw Response</strong> — exact bytes from the upstream provider (visible in Full
-            mode).
+            <strong>Memory</strong>: create reviewable candidates before promotion to OpenClaw.
           </li>
         </ul>
       </div>
@@ -46,7 +38,7 @@ export function OnboardingBanner(): JSX.Element | null {
         onClick={() => {
           void markSeen();
         }}
-        className="inline-flex items-center gap-1.5 text-xs h-8 px-3 rounded-md border border-amber-500/40 text-amber-700 dark:text-amber-300 hover:bg-amber-500/10 transition-colors shrink-0"
+        className="inline-flex h-8 shrink-0 items-center gap-1.5 rounded-md border border-amber-500/40 px-3 text-xs text-amber-700 transition-colors hover:bg-amber-500/10 dark:text-amber-300"
         aria-label="Dismiss onboarding tip"
       >
         <Check className="size-3.5" />
@@ -57,7 +49,7 @@ export function OnboardingBanner(): JSX.Element | null {
         onClick={() => {
           void markSeen();
         }}
-        className="text-muted-foreground hover:text-foreground transition-colors shrink-0 p-1 -m-1"
+        className="-m-1 shrink-0 p-1 text-muted-foreground transition-colors hover:text-foreground"
         aria-label="Dismiss"
       >
         <X className="size-3.5" />

package/src/components/ProxyViewer.tsx

@@ -253,7 +253,7 @@ export function ProxyViewer({
   );
   const logListRef = useRef<HTMLDivElement>(null);
   const logListWrapperRef = useRef<HTMLDivElement>(null);
-  useKeyboardNavigation(logListRef, logListWrapperRef);
+  useKeyboardNavigation(logListRef, logListWrapperRef, { pageWide: true });
 
   useEffect(() => {
     const perCrabDuration = 400;

package/src/components/providers/ProviderCard.tsx

@@ -110,30 +110,16 @@ function TestStatus({ result }: { result: ProviderTestState }): JSX.Element {
     }
     if (result.cacheCreationInputTokens !== undefined && result.cacheCreationInputTokens > 0) {
       tokenParts.push(
-        <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>,
+        <span key="cache-create" className="font-mono tabular-nums text-emerald-400">
+          KV Cache +{result.cacheCreationInputTokens}
+        </span>,
       );
     }
     if (result.cacheReadInputTokens !== undefined && result.cacheReadInputTokens > 0) {
       tokenParts.push(
-        <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>,
+        <span key="cache-read" className="font-mono tabular-nums text-purple-400">
+          KV Cache ~{result.cacheReadInputTokens}
+        </span>,
       );
     }
     const displayTokens: ReactNode[] = [];

package/src/components/providers/SettingsDialog.tsx

@@ -1,5 +1,5 @@
-import { type JSX, useState, useCallback } from "react";
-import { Settings } from "lucide-react";
+import { type JSX, useState, useCallback, useMemo } from "react";
+import { Check, Copy, Settings, Terminal } from "lucide-react";
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "../ui/dialog";
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "../ui/tabs";
 import { Button } from "../ui/button";
@@ -72,6 +72,7 @@ export function SettingsDialog(): JSX.Element {
           <TabsList>
             <TabsTrigger value="providers">Providers</TabsTrigger>
             <TabsTrigger value="proxy">Proxy</TabsTrigger>
+            <TabsTrigger value="onboarding">Onboarding</TabsTrigger>
           </TabsList>
 
           <div className="mt-4 overflow-y-auto flex-1 pr-3">
@@ -93,6 +94,9 @@ export function SettingsDialog(): JSX.Element {
             <TabsContent value="proxy">
               <ProxySettingsTab />
             </TabsContent>
+            <TabsContent value="onboarding">
+              <OnboardingSettingsTab />
+            </TabsContent>
           </div>
         </Tabs>
       </DialogContent>
@@ -100,6 +104,95 @@ export function SettingsDialog(): JSX.Element {
   );
 }
 
+function CopyableSetupValue({
+  id,
+  label,
+  value,
+  copiedId,
+  onCopy,
+}: {
+  id: string;
+  label: string;
+  value: string;
+  copiedId: string | null;
+  onCopy: (id: string, value: string) => void;
+}): JSX.Element {
+  const copied = copiedId === id;
+  return (
+    <div className="rounded-md border border-border bg-muted/20 px-3 py-2">
+      <div className="mb-1 text-xs font-medium text-muted-foreground">{label}</div>
+      <div className="flex min-w-0 items-center gap-2">
+        <code className="min-w-0 flex-1 truncate font-mono text-xs text-foreground">{value}</code>
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          className="size-7 shrink-0"
+          onClick={() => onCopy(id, value)}
+          aria-label={copied ? `Copied ${label}` : `Copy ${label}`}
+        >
+          {copied ? <Check className="size-3.5 text-emerald-500" /> : <Copy className="size-3.5" />}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+function OnboardingSettingsTab(): JSX.Element {
+  const [copiedId, setCopiedId] = useState<string | null>(null);
+  const origin = useMemo(() => {
+    if (typeof window === "undefined") return "http://localhost:25947";
+    return window.location.origin;
+  }, []);
+  const values = useMemo(
+    () => [
+      { id: "skill", label: "Codex skill", value: "agent-inspector onboard --force" },
+      { id: "mcp", label: "MCP URL", value: `${origin}/api/mcp` },
+      { id: "proxy", label: "Proxy URL", value: `${origin}/proxy` },
+      { id: "anthropic", label: "Anthropic base", value: `ANTHROPIC_BASE_URL=${origin}/proxy` },
+    ],
+    [origin],
+  );
+
+  const handleCopy = useCallback((id: string, value: string) => {
+    void window.navigator.clipboard.writeText(value).then(() => {
+      setCopiedId(id);
+      setTimeout(() => setCopiedId(null), 1600);
+    });
+  }, []);
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center gap-2">
+        <Terminal className="size-4 text-muted-foreground" />
+        <h3 className="text-sm font-semibold">Agent onboarding</h3>
+      </div>
+      <div className="grid gap-2">
+        {values.map((item) => (
+          <CopyableSetupValue
+            key={item.id}
+            id={item.id}
+            label={item.label}
+            value={item.value}
+            copiedId={copiedId}
+            onCopy={handleCopy}
+          />
+        ))}
+      </div>
+      <div className="grid gap-2 rounded-md border border-border bg-background px-3 py-2 text-xs text-muted-foreground">
+        <div className="flex items-center gap-2">
+          <Check className="size-3.5 text-emerald-500" />
+          <span>Provider test creates a traceable memory probe session.</span>
+        </div>
+        <div className="flex items-center gap-2">
+          <Check className="size-3.5 text-emerald-500" />
+          <span>Captured sessions can produce reviewable memory candidates.</span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 function ProxySettingsTab(): JSX.Element {
   const {
     strip,