@tonyclaw/agent-inspector 3.0.26 → 3.0.28

package/.output/server/{_tanstack-start-manifest_v-B50VTLrH.mjs → _tanstack-start-manifest_v-BBf2nRhb.mjs}

@@ -1,4 +1,4 @@
-const tsrStartManifest = () => ({ routes: { __root__: { filePath: "C:/Users/claw/workspace/agent-inspector/src/routes/__root.tsx", children: ["/", "/api/alerts", "/api/config", "/api/groups", "/api/health", "/api/logs", "/api/mcp", "/api/models", "/api/pi-agent", "/api/providers", "/api/runs", "/api/sessions", "/proxy/$", "/session/$sessionId", "/api/ecosystem/packages", "/api/ecosystem/tasks", "/api/knowledge/candidates", "/api/knowledge/project-context", "/api/knowledge/search", "/api/ecosystem/recipes/$recipeId/run", "/api/knowledge/sessions/$sessionId/candidates"], preloads: ["/assets/index-CSIL7-MK.js"], scripts: [{ attrs: { type: "module", async: true, src: "/assets/index-CSIL7-MK.js" } }] }, "/": { filePath: "C:/Users/claw/workspace/agent-inspector/src/routes/index.tsx", children: void 0, preloads: ["/assets/index-DrVJsks2.js", "/assets/ProxyViewerContainer-BJvwOrSi.js"] }, "/session/$sessionId": { filePath: "C:/Users/claw/workspace/agent-inspector/src/routes/session/$sessionId.tsx", children: void 0, preloads: ["/assets/_sessionId-D-V84cgw.js", "/assets/ProxyViewerContainer-BJvwOrSi.js"] } } });
+const tsrStartManifest = () => ({ routes: { __root__: { filePath: "C:/Users/claw/workspace/agent-inspector/src/routes/__root.tsx", children: ["/", "/api/alerts", "/api/config", "/api/groups", "/api/health", "/api/logs", "/api/mcp", "/api/models", "/api/pi-agent", "/api/providers", "/api/runs", "/api/sessions", "/proxy/$", "/session/$sessionId", "/api/ecosystem/packages", "/api/ecosystem/tasks", "/api/knowledge/candidates", "/api/knowledge/project-context", "/api/knowledge/search", "/api/ecosystem/recipes/$recipeId/run", "/api/knowledge/sessions/$sessionId/candidates"], preloads: ["/assets/index-DzARL2Fi.js"], scripts: [{ attrs: { type: "module", async: true, src: "/assets/index-DzARL2Fi.js" } }] }, "/": { filePath: "C:/Users/claw/workspace/agent-inspector/src/routes/index.tsx", children: void 0, preloads: ["/assets/index-D4HkS7Ct.js", "/assets/ProxyViewerContainer-fShBAZjj.js"] }, "/session/$sessionId": { filePath: "C:/Users/claw/workspace/agent-inspector/src/routes/session/$sessionId.tsx", children: void 0, preloads: ["/assets/_sessionId-DRfvuE2k.js", "/assets/ProxyViewerContainer-fShBAZjj.js"] } } });
 export {
   tsrStartManifest
 };

package/.output/server/index.mjs

@@ -20,121 +20,121 @@ const assets = {
   "/assets/agent-inspector-58K1_MsC.ico": {
     "type": "image/vnd.microsoft.icon",
     "etag": '"38fa-ZD8kPABHYjPIkcH82FMY6iZM7fI"',
-    "mtime": "2026-07-11T00:24:54.156Z",
+    "mtime": "2026-07-11T07:25:10.079Z",
     "size": 14586,
     "path": "../public/assets/agent-inspector-58K1_MsC.ico"
   },
+  "/assets/index-B3aAuqWq.js": {
+    "type": "text/javascript; charset=utf-8",
+    "etag": '"1cd2d-NtF7W+NRjTmAvD+1JKZI8rtHI7U"',
+    "mtime": "2026-07-11T07:25:10.087Z",
+    "size": 118061,
+    "path": "../public/assets/index-B3aAuqWq.js"
+  },
   "/assets/alibaba-TTwafVwX.svg": {
     "type": "image/svg+xml",
     "etag": '"171b-6dyV5K8QjiaY35sN9qNprh9zDIs"',
-    "mtime": "2026-07-11T00:24:54.156Z",
+    "mtime": "2026-07-11T07:25:10.085Z",
     "size": 5915,
     "path": "../public/assets/alibaba-TTwafVwX.svg"
   },
-  "/assets/json-viewer-C9Ji3gYN.js": {
+  "/assets/json-viewer-wuJSKaed.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"1ae7-ywSQGg/SiMKKFOeSZzAyG3AC4DI"',
-    "mtime": "2026-07-11T00:24:54.158Z",
+    "etag": '"1ae7-BU19qUySeFzJhdQR46CWzhjoXCo"',
+    "mtime": "2026-07-11T07:25:10.087Z",
     "size": 6887,
-    "path": "../public/assets/json-viewer-C9Ji3gYN.js"
+    "path": "../public/assets/json-viewer-wuJSKaed.js"
   },
-  "/assets/CompareDrawer-SZRUDQc9.js": {
-    "type": "text/javascript; charset=utf-8",
-    "etag": '"4bc4-c5yQQGgiYt3gI4zOesfAlSc3dno"',
-    "mtime": "2026-07-11T00:24:54.156Z",
-    "size": 19396,
-    "path": "../public/assets/CompareDrawer-SZRUDQc9.js"
+  "/assets/index-BsxAGqMA.css": {
+    "type": "text/css; charset=utf-8",
+    "etag": '"28b55-jHTF06GuUcizq3n19QXDY4Rs9bY"',
+    "mtime": "2026-07-11T07:25:10.085Z",
+    "size": 166741,
+    "path": "../public/assets/index-BsxAGqMA.css"
   },
   "/assets/minimax-BPMzvuL-.jpeg": {
     "type": "image/jpeg",
     "etag": '"1b06-IwivU89ko5UTMUM1/t7hn4sQK9A"',
-    "mtime": "2026-07-11T00:24:54.156Z",
+    "mtime": "2026-07-11T07:25:10.085Z",
     "size": 6918,
     "path": "../public/assets/minimax-BPMzvuL-.jpeg"
   },
-  "/assets/index-CSIL7-MK.js": {
+  "/assets/index-DzARL2Fi.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"537cd-GPVivJXxNqhczKks68tQgmJTPDE"',
-    "mtime": "2026-07-11T00:24:54.156Z",
+    "etag": '"537cd-n0LgXNt1QLHB07TADWQSjwwA7ao"',
+    "mtime": "2026-07-11T07:25:10.085Z",
     "size": 341965,
-    "path": "../public/assets/index-CSIL7-MK.js"
-  },
-  "/assets/index-CmeF5XXS.css": {
-    "type": "text/css; charset=utf-8",
-    "etag": '"28a56-x7Wmw+oL5ZFDjFw5JRwjxSop3gg"',
-    "mtime": "2026-07-11T00:24:54.156Z",
-    "size": 166486,
-    "path": "../public/assets/index-CmeF5XXS.css"
+    "path": "../public/assets/index-DzARL2Fi.js"
   },
-  "/assets/index-DgFWCxOs.js": {
+  "/assets/CompareDrawer-TghZr5t1.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"1cd2d-3tCkJqLlCuTi9/Lz+b9h1l5nZgg"',
-    "mtime": "2026-07-11T00:24:54.156Z",
-    "size": 118061,
-    "path": "../public/assets/index-DgFWCxOs.js"
+    "etag": '"4bc4-EO0Pced4VNvNgQhISz9DCokb9HU"',
+    "mtime": "2026-07-11T07:25:10.087Z",
+    "size": 19396,
+    "path": "../public/assets/CompareDrawer-TghZr5t1.js"
   },
-  "/assets/ReplayDialog-DgfmqiM3.js": {
+  "/assets/index-D4HkS7Ct.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"3348-7mNTOezyB/6M8SHCRaNHCBplHZk"',
-    "mtime": "2026-07-11T00:24:54.156Z",
-    "size": 13128,
-    "path": "../public/assets/ReplayDialog-DgfmqiM3.js"
+    "etag": '"265-GATgiXd9lc1ztQtCZI0flLv7tLY"',
+    "mtime": "2026-07-11T07:25:10.085Z",
+    "size": 613,
+    "path": "../public/assets/index-D4HkS7Ct.js"
   },
-  "/assets/RequestAnatomy-CS6c7Qfn.js": {
+  "/assets/ResponseView-d25MdFhY.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"43f3-iE7MB7sQUMWqMwG0cyR73BgkbuY"',
-    "mtime": "2026-07-11T00:24:54.156Z",
-    "size": 17395,
-    "path": "../public/assets/RequestAnatomy-CS6c7Qfn.js"
+    "etag": '"47fe-Po8oiwgEzmPD5hRtGam0HQony8k"',
+    "mtime": "2026-07-11T07:25:10.087Z",
+    "size": 18430,
+    "path": "../public/assets/ResponseView-d25MdFhY.js"
   },
-  "/assets/index-DrVJsks2.js": {
+  "/assets/RequestAnatomy-DNWccR7O.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"265-GhY3Vadghb4WWaqhfjEikIO6zQU"',
-    "mtime": "2026-07-11T00:24:54.156Z",
-    "size": 613,
-    "path": "../public/assets/index-DrVJsks2.js"
+    "etag": '"43f3-aiF5LhFVPVUreSkzjdqgZFSwONM"',
+    "mtime": "2026-07-11T07:25:10.087Z",
+    "size": 17395,
+    "path": "../public/assets/RequestAnatomy-DNWccR7O.js"
   },
-  "/assets/ResponseView-C0Ri_5gm.js": {
+  "/assets/ReplayDialog-CZMApaF4.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"47fe-NHHoPnXJQBRlrFDWr/aopcQwmGk"',
-    "mtime": "2026-07-11T00:24:54.156Z",
-    "size": 18430,
-    "path": "../public/assets/ResponseView-C0Ri_5gm.js"
+    "etag": '"3348-CNibW415vjAp7j+7orWWQiIbLDA"',
+    "mtime": "2026-07-11T07:25:10.085Z",
+    "size": 13128,
+    "path": "../public/assets/ReplayDialog-CZMApaF4.js"
   },
-  "/assets/StreamingChunkSequence-7dYcHWyZ.js": {
+  "/assets/StreamingChunkSequence-DIFZEnWe.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"e96-r+HXGxAmoKjHyD3J/MqfzPojMWo"',
-    "mtime": "2026-07-11T00:24:54.156Z",
+    "etag": '"e96-uRF1QBlYJ4LJvlyn05RZzDtEbkE"',
+    "mtime": "2026-07-11T07:25:10.087Z",
     "size": 3734,
-    "path": "../public/assets/StreamingChunkSequence-7dYcHWyZ.js"
+    "path": "../public/assets/StreamingChunkSequence-DIFZEnWe.js"
+  },
+  "/assets/qwen-CONDcHqt.png": {
+    "type": "image/png",
+    "etag": '"572c3-cdJAPaHdOvFCGzuaQjagdgOu6XE"',
+    "mtime": "2026-07-11T07:25:10.085Z",
+    "size": 357059,
+    "path": "../public/assets/qwen-CONDcHqt.png"
   },
   "/assets/zhipuai-BPNAnxo-.svg": {
     "type": "image/svg+xml",
     "etag": '"2bf8-hNaLCTi89nOFCsIIfWpP/jrfo0s"',
-    "mtime": "2026-07-11T00:24:54.156Z",
+    "mtime": "2026-07-11T07:25:10.085Z",
     "size": 11256,
     "path": "../public/assets/zhipuai-BPNAnxo-.svg"
   },
-  "/assets/_sessionId-D-V84cgw.js": {
+  "/assets/_sessionId-DRfvuE2k.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"36d-yOd6Us3ZWW0UESw+7JXnLzgeMbY"',
-    "mtime": "2026-07-11T00:24:54.156Z",
+    "etag": '"36d-DdOUH1ep4qcEQKZ8gAcubBJENCU"',
+    "mtime": "2026-07-11T07:25:10.085Z",
     "size": 877,
-    "path": "../public/assets/_sessionId-D-V84cgw.js"
-  },
-  "/assets/qwen-CONDcHqt.png": {
-    "type": "image/png",
-    "etag": '"572c3-cdJAPaHdOvFCGzuaQjagdgOu6XE"',
-    "mtime": "2026-07-11T00:24:54.156Z",
-    "size": 357059,
-    "path": "../public/assets/qwen-CONDcHqt.png"
+    "path": "../public/assets/_sessionId-DRfvuE2k.js"
   },
-  "/assets/ProxyViewerContainer-BJvwOrSi.js": {
+  "/assets/ProxyViewerContainer-fShBAZjj.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"14071d-2HnQGZd4Md0+aEEDy7Sa4wv0GEY"',
-    "mtime": "2026-07-11T00:24:54.158Z",
-    "size": 1312541,
-    "path": "../public/assets/ProxyViewerContainer-BJvwOrSi.js"
+    "etag": '"140e7c-9dZ35KxZynE0VFMwXVZlbDNocic"',
+    "mtime": "2026-07-11T07:25:10.087Z",
+    "size": 1314428,
+    "path": "../public/assets/ProxyViewerContainer-fShBAZjj.js"
   }
 };
 function readAsset(id) {

package/README.md

@@ -31,6 +31,14 @@ npm install -g @tonyclaw/agent-inspector-mcp
 agent-inspector-mcp doctor
 ```
 
+Agent Inspector requires Node.js 22 or newer. Node.js 24 LTS is recommended for production use.
+
+By default, Agent Inspector binds to `127.0.0.1`. With `--host 0.0.0.0`, remote coding tools may
+use `/proxy`, while the UI, REST API, and MCP control plane remain local-only. Set
+`AGENT_INSPECTOR_CONTROL_TOKEN` for authenticated remote API/MCP clients, or explicitly set
+`AGENT_INSPECTOR_ALLOW_REMOTE_CONTROL=1` only behind a trusted firewall or loopback-only port
+mapping.
+
 `@tonyclaw/agent-inspector` runs the local UI, proxy, REST API, storage, and built-in
 `/api/mcp` endpoint. `@tonyclaw/agent-inspector-mcp` is the enhancement package for
 stdio-first MCP clients and setup automation; it bridges to the local Inspector endpoint without

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@tonyclaw/agent-inspector",
-  "version": "3.0.26",
+  "version": "3.0.28",
   "type": "module",
   "description": "Agent observability and knowledge capture layer for AI coding tools.",
   "license": "MIT",
   "engines": {
-    "node": ">=18.18.0"
+    "node": ">=22.0.0"
   },
   "author": "TonyClaw",
   "repository": {
@@ -55,8 +55,8 @@
     "dev": "vite dev",
     "start": "node .output/cli.js",
     "build": "vite build && bun build:cli && bun build:mcp",
-    "build:cli": "npx esbuild src/cli.ts --bundle --platform=node --target=node18 --format=esm --outfile=.output/cli.js",
-    "build:mcp": "npx esbuild packages/agent-inspector-mcp/src/cli.ts --bundle --platform=node --target=node20 --format=esm --outfile=packages/agent-inspector-mcp/dist/cli.js",
+    "build:cli": "npx esbuild src/cli.ts --bundle --platform=node --target=node22 --format=esm --outfile=.output/cli.js",
+    "build:mcp": "npx esbuild packages/agent-inspector-mcp/src/cli.ts --bundle --platform=node --target=node22 --format=esm --outfile=packages/agent-inspector-mcp/dist/cli.js",
     "postinstall": "node scripts/setup-windows-runtime.mjs && node scripts/setup-agent-skills.mjs",
     "prepublishOnly": "npm run build",
     "typecheck": "tsc --noEmit",
@@ -102,7 +102,6 @@
   },
   "devDependencies": {
     "@biomejs/biome": "^2.3.14",
-    "@cfworker/json-schema": "^4.1.1",
     "@eslint/js": "^10.0.1",
     "@ladle/react": "^5.1.1",
     "@tailwindcss/vite": "^4.1.18",

package/src/cli.ts

@@ -8,6 +8,7 @@ import { existsSync } from "node:fs";
 import type { Readable, Writable } from "node:stream";
 import {
   formatAccessHintLines,
+  isLoopbackHost,
   isValidBindHost,
   localUrlForPort,
   networkUrlsForBindHost,
@@ -31,6 +32,7 @@ const __dirname = dirname(__filename);
 const DEFAULT_PORT = 9527;
 const LEGACY_ALIAS_PORT = 9527;
 const DEFAULT_UPSTREAM_PORT = 9529;
+const DEFAULT_BIND_HOST = "127.0.0.1";
 const LOCAL_PROBE_TIMEOUT_MS = 2000;
 const BRANDED_WINDOWS_RUNTIME_EXE = "agent-inspector.exe";
 const DEFAULT_CAPTURE_MODE = "simple";
@@ -229,6 +231,16 @@ function printAccessHints(port: number, host?: string): void {
   for (const line of formatAccessHintLines(port, networkUrls, host)) {
     console.log(line);
   }
+  if (!isLoopbackHost(host)) {
+    if (process.env["AGENT_INSPECTOR_ALLOW_REMOTE_CONTROL"] === "1") {
+      console.warn("   Control plane:  REMOTE ACCESS ENABLED by administrator override");
+    } else {
+      console.log("   Control plane:  local only; remote clients may use /proxy");
+      if ((process.env["AGENT_INSPECTOR_CONTROL_TOKEN"] ?? "") !== "") {
+        console.log("   Remote API:     Bearer token authentication enabled");
+      }
+    }
+  }
 }
 
 type BackgroundSupervisorOptions = {
@@ -289,13 +301,18 @@ function pickUpstreamPort(publicPort: number, legacyAliasPort: number | null): n
 async function tryStartIdentityProxy(
   identityPort: number,
   upstreamPort: number,
-  upstreamHost: string | undefined,
+  listenHost: string,
+  upstreamHost: string,
 ): Promise<import("node:http").Server | null> {
   try {
     const server = await startIdentityProxy({
       listenPort: identityPort,
-      upstreamHost: upstreamHost ?? "127.0.0.1",
+      listenHost,
+      upstreamHost,
       upstreamPort,
+      restrictRemoteControl: !isLoopbackHost(listenHost),
+      allowRemoteControl: process.env["AGENT_INSPECTOR_ALLOW_REMOTE_CONTROL"] === "1",
+      controlToken: process.env["AGENT_INSPECTOR_CONTROL_TOKEN"],
     });
     return server;
   } catch (err) {
@@ -317,7 +334,8 @@ async function runStart(args: string[]): Promise<void> {
     process.env["AGENT_INSPECTOR_CAPTURE_MODE"] ?? process.env["AGENT_INSPECTOR_MODE"];
 
   let port = portDefault;
-  let host = envHost !== undefined && envHost.trim().length > 0 ? envHost.trim() : undefined;
+  let host =
+    envHost !== undefined && envHost.trim().length > 0 ? envHost.trim() : DEFAULT_BIND_HOST;
   let open = true;
   let openWasSpecified = false;
   let background = false;
@@ -457,6 +475,18 @@ async function runStart(args: string[]): Promise<void> {
     return;
   }
 
+  if (
+    !enableIdentityProxy &&
+    !isLoopbackHost(host) &&
+    process.env["AGENT_INSPECTOR_ALLOW_REMOTE_CONTROL"] !== "1"
+  ) {
+    console.error(
+      "Refusing an unprotected remote bind with --no-identity-proxy. Keep the identity proxy enabled or set AGENT_INSPECTOR_ALLOW_REMOTE_CONTROL=1 explicitly.",
+    );
+    process.exitCode = 1;
+    return;
+  }
+
   /**
    * Check if a port is in use and kill the process using it
    */
@@ -475,6 +505,7 @@ async function runStart(args: string[]): Promise<void> {
   // the public-facing port(s). When the identity proxy is disabled we fall
   // back to TanStack listening on the public port directly.
   const upstreamPort = enableIdentityProxy ? pickUpstreamPort(port, legacyAliasPort) : port;
+  const upstreamHost = enableIdentityProxy ? DEFAULT_BIND_HOST : host;
   process.env["PORT"] = String(upstreamPort);
 
   const url = urlForHost(port, host);
@@ -627,10 +658,8 @@ async function runStart(args: string[]): Promise<void> {
   if (providersJson !== undefined) {
     serverEnv["AGENT_INSPECTOR_PROVIDERS_JSON"] = providersJson;
   }
-  if (host !== undefined) {
-    serverEnv["HOST"] = host;
-    serverEnv["NITRO_HOST"] = host;
-  }
+  serverEnv["HOST"] = upstreamHost;
+  serverEnv["NITRO_HOST"] = upstreamHost;
   serverEnv["AGENT_INSPECTOR_PUBLIC_PORT"] = String(port);
   serverEnv["PROXY_PORT"] = String(port);
   serverEnv["AGENT_INSPECTOR_CAPTURE_MODE"] = captureMode;
@@ -664,12 +693,17 @@ async function runStart(args: string[]): Promise<void> {
     server: import("node:http").Server;
   }> = [];
   if (enableIdentityProxy) {
-    const primaryProxy = await tryStartIdentityProxy(port, upstreamPort, host);
+    const primaryProxy = await tryStartIdentityProxy(port, upstreamPort, host, upstreamHost);
     if (primaryProxy !== null) {
       identityProxies.push({ label: "primary", port, server: primaryProxy });
     }
     if (legacyAliasPort !== null) {
-      const legacyProxy = await tryStartIdentityProxy(legacyAliasPort, upstreamPort, host);
+      const legacyProxy = await tryStartIdentityProxy(
+        legacyAliasPort,
+        upstreamPort,
+        host,
+        upstreamHost,
+      );
       if (legacyProxy !== null) {
         identityProxies.push({ label: "legacy", port: legacyAliasPort, server: legacyProxy });
       }

package/src/components/ProxyViewer.tsx

@@ -933,6 +933,32 @@ function ThemeModeToggle(): JSX.Element {
   );
 }
 
+function PetVisibilityToggle({
+  visible,
+  onToggle,
+}: {
+  visible: boolean;
+  onToggle: () => void;
+}): JSX.Element {
+  const label = visible ? "Hide Inspector pet" : "Summon Inspector pet";
+
+  return (
+    <button
+      type="button"
+      onClick={onToggle}
+      className={cn(
+        "border-border/70 bg-muted/70 inline-flex size-8 shrink-0 items-center justify-center rounded-md border text-muted-foreground shadow-sm transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none",
+        visible && "bg-background text-amber-500 shadow-sm",
+      )}
+      aria-label={label}
+      aria-pressed={visible}
+      title={label}
+    >
+      <CrabLogo className={cn("size-4 transition-opacity", !visible && "opacity-45")} />
+    </button>
+  );
+}
+
 function UiScaleControl({
   preference,
   resolvedScale,
@@ -1056,6 +1082,7 @@ function BrandHeader({
 }
 
 const DETAILS_PANEL_COLLAPSED_STORAGE_KEY = "agent-inspector.detailsPanelCollapsed";
+const INSPECTOR_PET_VISIBLE_STORAGE_KEY = "agent-inspector.pet.visible";
 
 function readStoredDetailsPanelCollapsed(): boolean {
   if (typeof window === "undefined") return true;
@@ -1063,6 +1090,15 @@ function readStoredDetailsPanelCollapsed(): boolean {
   return stored === null || stored === "1";
 }
 
+function readStoredInspectorPetVisible(): boolean {
+  if (typeof window === "undefined") return true;
+  try {
+    return window.localStorage.getItem(INSPECTOR_PET_VISIBLE_STORAGE_KEY) !== "0";
+  } catch {
+    return true;
+  }
+}
+
 function SessionContextLogButton({ label, logId }: { label: string; logId: number }): JSX.Element {
   return (
     <button
@@ -1451,6 +1487,8 @@ export function ProxyViewer({
   const [deletingCurrentView, setDeletingCurrentView] = useState(false);
   const [detailsPanelCollapsed, setDetailsPanelCollapsed] = useState(true);
   const [detailsPanelStorageLoaded, setDetailsPanelStorageLoaded] = useState(false);
+  const [petVisible, setPetVisible] = useState(true);
+  const [petVisibilityStorageLoaded, setPetVisibilityStorageLoaded] = useState(false);
   const [comparePair, setComparePair] = useState<[CapturedLog, CapturedLog] | null>(null);
   const [crabEntrancePhase, setCrabEntrancePhase] = useState<"hidden" | "playing" | "done">(
     "hidden",
@@ -1504,6 +1542,20 @@ export function ProxyViewer({
     );
   }, [detailsPanelCollapsed, detailsPanelStorageLoaded]);
 
+  useEffect(() => {
+    setPetVisible(readStoredInspectorPetVisible());
+    setPetVisibilityStorageLoaded(true);
+  }, []);
+
+  useEffect(() => {
+    if (!petVisibilityStorageLoaded) return;
+    try {
+      window.localStorage.setItem(INSPECTOR_PET_VISIBLE_STORAGE_KEY, petVisible ? "1" : "0");
+    } catch {
+      // Local storage can be unavailable in hardened browser profiles.
+    }
+  }, [petVisibilityStorageLoaded, petVisible]);
+
   useEffect(() => {
     if (pinnedSessionId === undefined) {
       document.title = "Agent Inspector";
@@ -1640,6 +1692,9 @@ export function ProxyViewer({
   const toggleDetailsPanelCollapsed = useCallback(() => {
     setDetailsPanelCollapsed((value) => !value);
   }, []);
+  const togglePetVisibility = useCallback(() => {
+    setPetVisible((value) => !value);
+  }, []);
 
   const groups = useMemo(() => groupLogsByConversation(logs), [logs]);
   const displayNumberByLogId = useMemo(() => buildDisplayNumberByLogId(groups), [groups]);
@@ -1741,7 +1796,7 @@ export function ProxyViewer({
           <PanelRightClose className="size-3.5" />
         )}
       </button>
-      {detailsPanelCollapsed && <InspectorPet logs={logs} />}
+      {petVisibilityStorageLoaded && petVisible && <InspectorPet logs={logs} />}
       <div
         className={cn(
           "grid w-full min-w-0 grid-cols-1 lg:min-h-0 lg:flex-1 lg:overflow-hidden",
@@ -1892,6 +1947,7 @@ export function ProxyViewer({
                   {activeScopeLabel}
                 </div>
               </div>
+              <PetVisibilityToggle visible={petVisible} onToggle={togglePetVisibility} />
               {onImportLogs !== undefined && (
                 <>
                   <input

package/src/components/clients/ClientLogo.tsx

@@ -1,4 +1,5 @@
 import type { JSX } from "react";
+import { Code2 } from "lucide-react";
 import { cn } from "../../lib/utils";
 import ClaudeCodeLogoSvg from "../../assets/IDE/claudecode-color.svg";
 import CodexLogoSvg from "../../assets/IDE/codex-color.svg";
@@ -12,6 +13,7 @@ export type ClientApp =
   | "opencode"
   | "mimo-code"
   | "claude-code"
+  | "ai-sdk"
   | "unknown";
 
 export type ClientAppDetectionInput = {
@@ -26,6 +28,7 @@ const CLIENT_LABELS: Record<Exclude<ClientApp, "unknown">, string> = {
   opencode: "OpenCode",
   "mimo-code": "MiMo Code",
   "claude-code": "Claude Code",
+  "ai-sdk": "AI SDK",
 };
 
 function normalize(value: string | null | undefined): string {
@@ -59,6 +62,7 @@ export function detectClientApp(input: ClientAppDetectionInput): ClientApp {
   if (matchesAny(haystack, ["codex desktop", "codex-cli", "openai-codex", "codex"])) {
     return "codex";
   }
+  if (matchesAny(normalize(input.userAgent), ["ai-sdk", "ai/"])) return "ai-sdk";
 
   return "unknown";
 }
@@ -70,13 +74,30 @@ export function clientAppLabel(client: ClientApp): string | null {
     case "opencode":
     case "mimo-code":
     case "claude-code":
+    case "ai-sdk":
       return CLIENT_LABELS[client];
     case "unknown":
       return null;
   }
 }
 
-const CLIENT_LOGOS: Record<Exclude<ClientApp, "unknown">, string> = {
+export function clientAppTypeLabel(client: ClientApp): "IDE" | "CLIENT" {
+  switch (client) {
+    case "codex":
+    case "opencode":
+    case "mimo-code":
+    case "claude-code":
+      return "IDE";
+    case "agent-inspector":
+    case "ai-sdk":
+    case "unknown":
+      return "CLIENT";
+  }
+}
+
+type ImageClientApp = Exclude<ClientApp, "unknown" | "ai-sdk">;
+
+const CLIENT_LOGOS: Record<ImageClientApp, string> = {
   "agent-inspector": AgentInspectorLogo,
   codex: CodexLogoSvg,
   opencode: OpenCodeLogoSvg,
@@ -84,7 +105,7 @@ const CLIENT_LOGOS: Record<Exclude<ClientApp, "unknown">, string> = {
   "claude-code": ClaudeCodeLogoSvg,
 };
 
-const CLIENT_LOGO_FRAMES: Record<Exclude<ClientApp, "unknown">, string> = {
+const CLIENT_LOGO_FRAMES: Record<ImageClientApp, string> = {
   "agent-inspector": "border-orange-200/25 bg-orange-300/[0.12]",
   codex: "border-cyan-200/20 bg-cyan-300/[0.08]",
   opencode: "border-sky-200/25 bg-sky-300/[0.12]",
@@ -92,7 +113,7 @@ const CLIENT_LOGO_FRAMES: Record<Exclude<ClientApp, "unknown">, string> = {
   "claude-code": "border-amber-100/20 bg-amber-300/[0.09]",
 };
 
-const CLIENT_LOGO_IMAGES: Record<Exclude<ClientApp, "unknown">, string> = {
+const CLIENT_LOGO_IMAGES: Record<ImageClientApp, string> = {
   "agent-inspector": "p-0.5 drop-shadow-[0_0_8px_rgba(251,146,60,0.35)]",
   codex: "p-0.5",
   opencode: "p-1 drop-shadow-[0_0_8px_rgba(125,211,252,0.35)]",
@@ -103,13 +124,30 @@ const CLIENT_LOGO_IMAGES: Record<Exclude<ClientApp, "unknown">, string> = {
 export function ClientLogo({
   client,
   className,
+  decorative = false,
 }: {
   client: ClientApp;
   className?: string;
+  decorative?: boolean;
 }): JSX.Element | null {
   if (client === "unknown") return null;
   const label = clientAppLabel(client);
   if (label === null) return null;
+  if (client === "ai-sdk") {
+    return (
+      <span
+        className={cn(
+          "inline-flex size-6 shrink-0 items-center justify-center rounded-md border border-cyan-200/20 bg-cyan-300/[0.08] text-cyan-100 shadow-sm",
+          className,
+        )}
+        aria-label={decorative ? undefined : label}
+        aria-hidden={decorative ? true : undefined}
+        title={label}
+      >
+        <Code2 className="size-1/2" aria-hidden="true" />
+      </span>
+    );
+  }
   const logoSrc = CLIENT_LOGOS[client];
 
   return (
@@ -119,7 +157,8 @@ export function ClientLogo({
         CLIENT_LOGO_FRAMES[client],
         className,
       )}
-      aria-label={label}
+      aria-label={decorative ? undefined : label}
+      aria-hidden={decorative ? true : undefined}
       title={label}
     >
       <img

package/src/components/inspector-pet/InspectorPet.tsx

@@ -349,13 +349,6 @@ export function InspectorPet({ logs }: InspectorPetProps): JSX.Element {
               />
             </span>
           </span>
-          <span
-            className={cn(
-              "absolute right-0 top-2 size-3 rounded-full border border-background/90",
-              moodDotClass(status.mood),
-              status.mood === "active" && !reduceMotion && "animate-pulse",
-            )}
-          />
           {reactionVisible && (
             <Heart
               key={reactionTick}