@tonyclaw/agent-inspector 2.0.43 → 2.1.1

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-03T04:20:32.534Z",
     "size": 5915,
     "path": "../public/assets/alibaba-TTwafVwX.svg"
   },
-  "/assets/CompareDrawer-CxM1gCfL.js": {
+  "/assets/index-B6bobhTz.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"49e8-MWCeQ8XhCRwryE9ztGUYYFSWZMU"',
-    "mtime": "2026-07-03T02:24:32.084Z",
+    "etag": '"74-+1X3vjH3iZhdgeocecr3fbGedq8"',
+    "mtime": "2026-07-03T04:20:32.534Z",
+    "size": 116,
+    "path": "../public/assets/index-B6bobhTz.js"
+  },
+  "/assets/minimax-BPMzvuL-.jpeg": {
+    "type": "image/jpeg",
+    "etag": '"1b06-IwivU89ko5UTMUM1/t7hn4sQK9A"',
+    "mtime": "2026-07-03T04:20:32.534Z",
+    "size": 6918,
+    "path": "../public/assets/minimax-BPMzvuL-.jpeg"
+  },
+  "/assets/CompareDrawer-DkDpl_Sg.js": {
+    "type": "text/javascript; charset=utf-8",
+    "etag": '"49e8-hvVJ7aJD7oXFBea9IwfqjSm1apc"',
+    "mtime": "2026-07-03T04:20:32.534Z",
     "size": 18920,
-    "path": "../public/assets/CompareDrawer-CxM1gCfL.js"
+    "path": "../public/assets/CompareDrawer-DkDpl_Sg.js"
   },
-  "/assets/index-Bhsa_2xX.js": {
+  "/assets/main-BjXd3DR-.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"74-FekOZ7LhkvEikN+5Vtic9whLu2c"',
-    "mtime": "2026-07-03T02:24:32.084Z",
-    "size": 116,
-    "path": "../public/assets/index-Bhsa_2xX.js"
+    "etag": '"517d9-0XuPT9UBPJLh8vCEqpVcVwbQy5I"',
+    "mtime": "2026-07-03T04:20:32.534Z",
+    "size": 333785,
+    "path": "../public/assets/main-BjXd3DR-.js"
   },
-  "/assets/index-DOWlRJ0W.css": {
+  "/assets/index-CLQKZ5A5.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"
+    "etag": '"1db95-AknbJdbUgLm9eLIEOShi7av67bM"',
+    "mtime": "2026-07-03T04:20:32.534Z",
+    "size": 121749,
+    "path": "../public/assets/index-CLQKZ5A5.css"
   },
-  "/assets/ReplayDialog-UseUkucS.js": {
+  "/assets/ReplayDialog-CKqYfD0A.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"318c-kKQJY2fzKwzsc7gAjVFVbioolPs"',
-    "mtime": "2026-07-03T02:24:32.084Z",
+    "etag": '"318c-pGLvm5fYWk1NouTexVSxwQ1fq8k"',
+    "mtime": "2026-07-03T04:20:32.534Z",
     "size": 12684,
-    "path": "../public/assets/ReplayDialog-UseUkucS.js"
+    "path": "../public/assets/ReplayDialog-CKqYfD0A.js"
   },
-  "/assets/RequestAnatomy-aPxgEJ2L.js": {
+  "/assets/ResponseView-DW9tFPi0.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"
+    "etag": '"30d2-iR9UDUNw3XfTxY+qGtP+c+TTo5c"',
+    "mtime": "2026-07-03T04:20:32.534Z",
+    "size": 12498,
+    "path": "../public/assets/ResponseView-DW9tFPi0.js"
   },
-  "/assets/ResponseView-DA-F4F97.js": {
+  "/assets/StreamingChunkSequence-m8zKc3L1.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/minimax-BPMzvuL-.jpeg": {
-    "type": "image/jpeg",
-    "etag": '"1b06-IwivU89ko5UTMUM1/t7hn4sQK9A"',
-    "mtime": "2026-07-03T02:24:32.082Z",
-    "size": 6918,
-    "path": "../public/assets/minimax-BPMzvuL-.jpeg"
+    "etag": '"d5c-g9AeqZjwudQVhYiVD5sLzzl0Q/A"',
+    "mtime": "2026-07-03T04:20:32.534Z",
+    "size": 3420,
+    "path": "../public/assets/StreamingChunkSequence-m8zKc3L1.js"
   },
-  "/assets/StreamingChunkSequence-JSQEPeNS.js": {
+  "/assets/_sessionId-DyfzgUXv.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"d5c-ZXGtNk6QwMMsBCwiFU85hEx0MWk"',
-    "mtime": "2026-07-03T02:24:32.084Z",
-    "size": 3420,
-    "path": "../public/assets/StreamingChunkSequence-JSQEPeNS.js"
+    "etag": '"d2-1xhPVWFjI6HtHDvlQU6oty4zEXw"',
+    "mtime": "2026-07-03T04:20:32.534Z",
+    "size": 210,
+    "path": "../public/assets/_sessionId-DyfzgUXv.js"
   },
   "/assets/zhipuai-BPNAnxo-.svg": {
     "type": "image/svg+xml",
     "etag": '"2bf8-hNaLCTi89nOFCsIIfWpP/jrfo0s"',
-    "mtime": "2026-07-03T02:24:32.082Z",
+    "mtime": "2026-07-03T04:20:32.534Z",
     "size": 11256,
     "path": "../public/assets/zhipuai-BPNAnxo-.svg"
   },
-  "/assets/_sessionId-BEXuCWq5.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"
-  },
-  "/assets/main-BpGVJcpB.js": {
-    "type": "text/javascript; charset=utf-8",
-    "etag": '"517d9-g8ehe8xaUgKICmE82dajQ3Rg1Aw"',
-    "mtime": "2026-07-03T02:24:32.084Z",
-    "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",
+    "mtime": "2026-07-03T04:20:32.534Z",
     "size": 357059,
     "path": "../public/assets/qwen-CONDcHqt.png"
   },
-  "/assets/ProxyViewerContainer-TtRG-0E7.js": {
+  "/assets/RequestAnatomy-CQZl-YIx.js": {
+    "type": "text/javascript; charset=utf-8",
+    "etag": '"43f2-pSO7y3fZD84r9lwwLNtMX/Q5s2Y"',
+    "mtime": "2026-07-03T04:20:32.534Z",
+    "size": 17394,
+    "path": "../public/assets/RequestAnatomy-CQZl-YIx.js"
+  },
+  "/assets/ProxyViewerContainer-D_-e1qn7.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": '"bafec-oIaVBZ146ySipmtK5bj+qCWIByM"',
+    "mtime": "2026-07-03T04:20:32.536Z",
+    "size": 765932,
+    "path": "../public/assets/ProxyViewerContainer-D_-e1qn7.js"
   }
 };
 function readAsset(id) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tonyclaw/agent-inspector",
-  "version": "2.0.43",
+  "version": "2.1.1",
   "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";
 
 /**
@@ -7,85 +7,75 @@ import { useOnboarding } from "../lib/useOnboarding";
  * dismissal through the server runtime config.
  */
 export function OnboardingBanner(): JSX.Element | null {
-  const { hasSeenOnboarding, captureMode, isLoading, markSeen } = useOnboarding();
+  const { hasSeenOnboarding, isLoading, markSeen } = useOnboarding();
+  const [expanded, setExpanded] = useState(false);
 
   if (isLoading || hasSeenOnboarding) return null;
 
-  const isFullMode = captureMode === "full";
+  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="hidden truncate text-xs text-muted-foreground sm:inline">
+              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">
+            Core capture is active.
+          </div>
+          <div
+            className={`${detailClass} mt-2 gap-x-4 gap-y-1 text-xs leading-relaxed text-muted-foreground sm:grid-cols-2`}
+          >
+            <div>
+              <strong>Evidence</strong>: logs, sessions, groups, and MCP exports are available.
+            </div>
+            <div>
+              <strong>Network</strong>: replace <code>localhost</code> if 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>
   );
 }