@tonyclaw/agent-inspector 2.0.43 → 2.1.0

package/.output/server/index.mjs

@@ -38,100 +38,100 @@ const assets = {
   "/assets/alibaba-TTwafVwX.svg": {
     "type": "image/svg+xml",
     "etag": '"171b-6dyV5K8QjiaY35sN9qNprh9zDIs"',
-    "mtime": "2026-07-03T02:24:32.082Z",
+    "mtime": "2026-07-03T03:56:33.507Z",
     "size": 5915,
     "path": "../public/assets/alibaba-TTwafVwX.svg"
   },
-  "/assets/CompareDrawer-CxM1gCfL.js": {
+  "/assets/index-DFICWD6o.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"49e8-MWCeQ8XhCRwryE9ztGUYYFSWZMU"',
-    "mtime": "2026-07-03T02:24:32.084Z",
-    "size": 18920,
-    "path": "../public/assets/CompareDrawer-CxM1gCfL.js"
-  },
-  "/assets/index-Bhsa_2xX.js": {
-    "type": "text/javascript; charset=utf-8",
-    "etag": '"74-FekOZ7LhkvEikN+5Vtic9whLu2c"',
-    "mtime": "2026-07-03T02:24:32.084Z",
+    "etag": '"74-+9cCcGeyvzlf+Bk2xUC8tzIF0OI"',
+    "mtime": "2026-07-03T03:56:33.507Z",
     "size": 116,
-    "path": "../public/assets/index-Bhsa_2xX.js"
-  },
-  "/assets/index-DOWlRJ0W.css": {
-    "type": "text/css; charset=utf-8",
-    "etag": '"1ad8b-QtGZOCeSfvBzb+puIlHYbHPVBvo"',
-    "mtime": "2026-07-03T02:24:32.084Z",
-    "size": 109963,
-    "path": "../public/assets/index-DOWlRJ0W.css"
+    "path": "../public/assets/index-DFICWD6o.js"
   },
-  "/assets/ReplayDialog-UseUkucS.js": {
+  "/assets/CompareDrawer-VDpcSNGM.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"318c-kKQJY2fzKwzsc7gAjVFVbioolPs"',
-    "mtime": "2026-07-03T02:24:32.084Z",
-    "size": 12684,
-    "path": "../public/assets/ReplayDialog-UseUkucS.js"
+    "etag": '"49e8-ajy70W1rR+/Q1eJQ+qNs39tBVP4"',
+    "mtime": "2026-07-03T03:56:33.507Z",
+    "size": 18920,
+    "path": "../public/assets/CompareDrawer-VDpcSNGM.js"
   },
-  "/assets/RequestAnatomy-aPxgEJ2L.js": {
-    "type": "text/javascript; charset=utf-8",
-    "etag": '"4485-mO43pmS8TLLXBnkqeHw5yJys4xE"',
-    "mtime": "2026-07-03T02:24:32.084Z",
-    "size": 17541,
-    "path": "../public/assets/RequestAnatomy-aPxgEJ2L.js"
+  "/assets/index-zLLCkAnF.css": {
+    "type": "text/css; charset=utf-8",
+    "etag": '"1bd7d-Q3DysR+aGn9MSbGdCMtKAQuCaD4"',
+    "mtime": "2026-07-03T03:56:33.507Z",
+    "size": 114045,
+    "path": "../public/assets/index-zLLCkAnF.css"
   },
-  "/assets/ResponseView-DA-F4F97.js": {
-    "type": "text/javascript; charset=utf-8",
-    "etag": '"30d1-5KGpGiZC9fD4bpancX3Blld/U6c"',
-    "mtime": "2026-07-03T02:24:32.084Z",
-    "size": 12497,
-    "path": "../public/assets/ResponseView-DA-F4F97.js"
+  "/assets/qwen-CONDcHqt.png": {
+    "type": "image/png",
+    "etag": '"572c3-cdJAPaHdOvFCGzuaQjagdgOu6XE"',
+    "mtime": "2026-07-03T03:56:33.507Z",
+    "size": 357059,
+    "path": "../public/assets/qwen-CONDcHqt.png"
   },
   "/assets/minimax-BPMzvuL-.jpeg": {
     "type": "image/jpeg",
     "etag": '"1b06-IwivU89ko5UTMUM1/t7hn4sQK9A"',
-    "mtime": "2026-07-03T02:24:32.082Z",
+    "mtime": "2026-07-03T03:56:33.507Z",
     "size": 6918,
     "path": "../public/assets/minimax-BPMzvuL-.jpeg"
   },
-  "/assets/StreamingChunkSequence-JSQEPeNS.js": {
+  "/assets/ReplayDialog-CoDgTzHR.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"d5c-ZXGtNk6QwMMsBCwiFU85hEx0MWk"',
-    "mtime": "2026-07-03T02:24:32.084Z",
+    "etag": '"318c-0twqpyojedLjGws3LUKh6O8+3nA"',
+    "mtime": "2026-07-03T03:56:33.508Z",
+    "size": 12684,
+    "path": "../public/assets/ReplayDialog-CoDgTzHR.js"
+  },
+  "/assets/ResponseView-BYuKiNeG.js": {
+    "type": "text/javascript; charset=utf-8",
+    "etag": '"30d2-3G74qLhEPPuC0NYHNMcTa1gXf7U"',
+    "mtime": "2026-07-03T03:56:33.507Z",
+    "size": 12498,
+    "path": "../public/assets/ResponseView-BYuKiNeG.js"
+  },
+  "/assets/StreamingChunkSequence-DOdU38Is.js": {
+    "type": "text/javascript; charset=utf-8",
+    "etag": '"d5c-DJxkJQuReuIrO+fYI7Gp3wd4Ahs"',
+    "mtime": "2026-07-03T03:56:33.508Z",
     "size": 3420,
-    "path": "../public/assets/StreamingChunkSequence-JSQEPeNS.js"
+    "path": "../public/assets/StreamingChunkSequence-DOdU38Is.js"
+  },
+  "/assets/_sessionId-ew5QlyZ2.js": {
+    "type": "text/javascript; charset=utf-8",
+    "etag": '"d2-t1JkPwBzeykveWWwmpxWw+rSXEM"',
+    "mtime": "2026-07-03T03:56:33.507Z",
+    "size": 210,
+    "path": "../public/assets/_sessionId-ew5QlyZ2.js"
   },
   "/assets/zhipuai-BPNAnxo-.svg": {
     "type": "image/svg+xml",
     "etag": '"2bf8-hNaLCTi89nOFCsIIfWpP/jrfo0s"',
-    "mtime": "2026-07-03T02:24:32.082Z",
+    "mtime": "2026-07-03T03:56:33.507Z",
     "size": 11256,
     "path": "../public/assets/zhipuai-BPNAnxo-.svg"
   },
-  "/assets/_sessionId-BEXuCWq5.js": {
+  "/assets/RequestAnatomy-t3plgkPE.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"d2-exeT3w9Bi3c+xV7elTFmaQnyqhI"',
-    "mtime": "2026-07-03T02:24:32.084Z",
-    "size": 210,
-    "path": "../public/assets/_sessionId-BEXuCWq5.js"
+    "etag": '"43f2-kvOx56u9DW1rdodfXLIWisxwD1c"',
+    "mtime": "2026-07-03T03:56:33.508Z",
+    "size": 17394,
+    "path": "../public/assets/RequestAnatomy-t3plgkPE.js"
   },
-  "/assets/main-BpGVJcpB.js": {
+  "/assets/main-DmzLt6ti.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"517d9-g8ehe8xaUgKICmE82dajQ3Rg1Aw"',
-    "mtime": "2026-07-03T02:24:32.084Z",
+    "etag": '"517d9-eO3gi5mVIsCs9Rr3vgFtrIEB/p4"',
+    "mtime": "2026-07-03T03:56:33.507Z",
     "size": 333785,
-    "path": "../public/assets/main-BpGVJcpB.js"
-  },
-  "/assets/qwen-CONDcHqt.png": {
-    "type": "image/png",
-    "etag": '"572c3-cdJAPaHdOvFCGzuaQjagdgOu6XE"',
-    "mtime": "2026-07-03T02:24:32.084Z",
-    "size": 357059,
-    "path": "../public/assets/qwen-CONDcHqt.png"
+    "path": "../public/assets/main-DmzLt6ti.js"
   },
-  "/assets/ProxyViewerContainer-TtRG-0E7.js": {
+  "/assets/ProxyViewerContainer-fsXSjqtm.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"b7ea9-7bsvy+ETcxfBpFGaacydCBqQiqA"',
-    "mtime": "2026-07-03T02:24:32.084Z",
-    "size": 753321,
-    "path": "../public/assets/ProxyViewerContainer-TtRG-0E7.js"
+    "etag": '"bb00a-BeXeA1I+ShxbnFR8iSNREQAPhwE"',
+    "mtime": "2026-07-03T03:56:33.508Z",
+    "size": 765962,
+    "path": "../public/assets/ProxyViewerContainer-fsXSjqtm.js"
   }
 };
 function readAsset(id) {

package/package.json

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

package/src/components/OnboardingBanner.tsx

@@ -1,5 +1,5 @@
-import { Check, X } from "lucide-react";
-import type { JSX } from "react";
+import { Check, ChevronDown, Info, X } from "lucide-react";
+import { useState, type JSX } from "react";
 import { useOnboarding } from "../lib/useOnboarding";
 
 /**
@@ -8,84 +8,90 @@ import { useOnboarding } from "../lib/useOnboarding";
  */
 export function OnboardingBanner(): JSX.Element | null {
   const { hasSeenOnboarding, captureMode, isLoading, markSeen } = useOnboarding();
+  const [expanded, setExpanded] = useState(false);
 
   if (isLoading || hasSeenOnboarding) return null;
 
   const isFullMode = captureMode === "full";
+  const modeLabel = isFullMode ? "Full" : "Simple";
+  const detailClass = expanded ? "grid" : "hidden sm:grid";
 
   return (
     <div
       role="note"
       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"
+      className="mx-4 mt-2 mb-1 rounded-md border border-amber-500/30 bg-[#130d04] px-3 py-2 text-sm shadow-[0_12px_40px_rgba(0,0,0,0.16)]"
     >
-      <div className="min-w-0 flex-1">
-        <div className="mb-1 font-medium text-amber-600 dark:text-amber-400">
-          {isFullMode
-            ? "Agent Inspector is ready in Full mode"
-            : "Agent Inspector is ready in Simple mode"}
+      <div className="flex items-start gap-3">
+        <Info className="mt-0.5 size-4 shrink-0 text-amber-300" aria-hidden="true" />
+        <div className="min-w-0 flex-1">
+          <div className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1">
+            <span className="font-medium text-amber-200">Inspector ready</span>
+            <span className="rounded border border-amber-400/30 bg-amber-400/10 px-1.5 py-0.5 font-mono text-[10px] uppercase text-amber-100">
+              {modeLabel}
+            </span>
+            <span className="hidden truncate text-xs text-muted-foreground sm:inline">
+              {isFullMode
+                ? "Raw headers, raw response, and SSE chunks are being captured."
+                : "Request, response, tool, timing, token, replay, and memory signals are active."}
+            </span>
+          </div>
+          <div className="mt-1 text-xs leading-relaxed text-muted-foreground sm:hidden">
+            {isFullMode
+              ? "Full diagnostics are active."
+              : "Core capture is active with lower overhead."}
+          </div>
+          <div
+            className={`${detailClass} mt-2 gap-x-4 gap-y-1 text-xs leading-relaxed text-muted-foreground sm:grid-cols-3`}
+          >
+            <div>
+              <strong>Mode</strong>: <code>{captureMode}</code> is fixed until restart.
+            </div>
+            <div>
+              <strong>Diagnostics</strong>: use{" "}
+              <code>
+                {isFullMode ? "agent-inspector --mode simple" : "agent-inspector --mode full"}
+              </code>
+              .
+            </div>
+            <div>
+              <strong>Network</strong>: replace <code>localhost</code> when containers differ.
+            </div>
+          </div>
         </div>
-        <ol className="space-y-0.5 text-xs leading-relaxed text-muted-foreground">
-          <li>
-            <strong>1. Start in the right mode</strong>: this process is currently running in{" "}
-            <code>{captureMode}</code>. Mode is fixed at startup.
-          </li>
-          {isFullMode ? (
-            <>
-              <li>
-                <strong>2. Full diagnostics</strong>: raw headers, raw response, and SSE chunks are
-                captured for deep investigations.
-              </li>
-              <li>
-                <strong>3. Daily work</strong>: restart with{" "}
-                <code>agent-inspector --mode simple</code> to reduce capture overhead.
-              </li>
-            </>
-          ) : (
-            <>
-              <li>
-                <strong>2. Simple capture</strong>: requests, responses, tools, timing, tokens,
-                replay, and memory candidates are available with lower overhead.
-              </li>
-              <li>
-                <strong>3. Need raw diagnostics?</strong> Restart with{" "}
-                <code>agent-inspector --mode full</code> for raw headers, raw response, and SSE
-                chunks.
-              </li>
-            </>
-          )}
-          <li>
-            <strong>Agent setup</strong>: run <code>agent-inspector onboard --status</code>, then
-            use <code>/agent-inspector:onboard</code> in Claude Code or ask Codex to use{" "}
-            <code>agent-inspector-onboard</code>.
-          </li>
-          <li>
-            <strong>Container networking</strong>: if the AI tool runs outside this Inspector
-            container or host, replace <code>localhost</code> with a reachable address.
-          </li>
-        </ol>
+        <button
+          type="button"
+          onClick={() => setExpanded((value) => !value)}
+          className="inline-flex h-8 shrink-0 items-center gap-1 rounded-md border border-amber-500/30 px-2 text-xs text-amber-200 transition-colors hover:bg-amber-500/10 sm:hidden"
+          aria-expanded={expanded}
+          aria-label={expanded ? "Hide onboarding details" : "Show onboarding details"}
+        >
+          <ChevronDown
+            className={`size-3.5 transition-transform ${expanded ? "rotate-180" : ""}`}
+          />
+        </button>
+        <button
+          type="button"
+          onClick={() => {
+            void markSeen();
+          }}
+          className="hidden h-8 shrink-0 items-center gap-1.5 rounded-md border border-amber-500/40 px-3 text-xs text-amber-200 transition-colors hover:bg-amber-500/10 sm:inline-flex"
+          aria-label="Dismiss onboarding tip"
+        >
+          <Check className="size-3.5" />
+          Got it
+        </button>
+        <button
+          type="button"
+          onClick={() => {
+            void markSeen();
+          }}
+          className="-m-1 shrink-0 p-1 text-muted-foreground transition-colors hover:text-foreground"
+          aria-label="Dismiss"
+        >
+          <X className="size-3.5" />
+        </button>
       </div>
-      <button
-        type="button"
-        onClick={() => {
-          void markSeen();
-        }}
-        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" />
-        Got it
-      </button>
-      <button
-        type="button"
-        onClick={() => {
-          void markSeen();
-        }}
-        className="-m-1 shrink-0 p-1 text-muted-foreground transition-colors hover:text-foreground"
-        aria-label="Dismiss"
-      >
-        <X className="size-3.5" />
-      </button>
     </div>
   );
 }