@tonyclaw/agent-inspector 3.0.27 → 3.0.28

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-11T04:43:38.031Z",
+    "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-11T04:43:38.031Z",
+    "mtime": "2026-07-11T07:25:10.085Z",
     "size": 5915,
     "path": "../public/assets/alibaba-TTwafVwX.svg"
   },
-  "/assets/CompareDrawer-BVCAAbbu.js": {
-    "type": "text/javascript; charset=utf-8",
-    "etag": '"4bc4-Zb2MZSke4PGsZAZQWlHQldYzm9M"',
-    "mtime": "2026-07-11T04:43:38.031Z",
-    "size": 19396,
-    "path": "../public/assets/CompareDrawer-BVCAAbbu.js"
-  },
-  "/assets/json-viewer-CpyYpPjx.js": {
+  "/assets/json-viewer-wuJSKaed.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"1ae7-AXjzdLeB9CtNkkvC/oR6PHIpZrw"',
-    "mtime": "2026-07-11T04:43:38.032Z",
+    "etag": '"1ae7-BU19qUySeFzJhdQR46CWzhjoXCo"',
+    "mtime": "2026-07-11T07:25:10.087Z",
     "size": 6887,
-    "path": "../public/assets/json-viewer-CpyYpPjx.js"
+    "path": "../public/assets/json-viewer-wuJSKaed.js"
   },
-  "/assets/index-gY3I-7-D.js": {
-    "type": "text/javascript; charset=utf-8",
-    "etag": '"265-61LM1QLhhYspwWAw/ft2ETl95Zg"',
-    "mtime": "2026-07-11T04:43:38.031Z",
-    "size": 613,
-    "path": "../public/assets/index-gY3I-7-D.js"
-  },
-  "/assets/index-9fMLCU4d.js": {
-    "type": "text/javascript; charset=utf-8",
-    "etag": '"1cd2d-vhf/v641OwP3pvt2nzTr2vXPzE4"',
-    "mtime": "2026-07-11T04:43:38.032Z",
-    "size": 118061,
-    "path": "../public/assets/index-9fMLCU4d.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-11T04:43:38.031Z",
+    "mtime": "2026-07-11T07:25:10.085Z",
     "size": 6918,
     "path": "../public/assets/minimax-BPMzvuL-.jpeg"
   },
-  "/assets/index-CmeF5XXS.css": {
-    "type": "text/css; charset=utf-8",
-    "etag": '"28a56-x7Wmw+oL5ZFDjFw5JRwjxSop3gg"',
-    "mtime": "2026-07-11T04:43:38.031Z",
-    "size": 166486,
-    "path": "../public/assets/index-CmeF5XXS.css"
+  "/assets/index-DzARL2Fi.js": {
+    "type": "text/javascript; charset=utf-8",
+    "etag": '"537cd-n0LgXNt1QLHB07TADWQSjwwA7ao"',
+    "mtime": "2026-07-11T07:25:10.085Z",
+    "size": 341965,
+    "path": "../public/assets/index-DzARL2Fi.js"
   },
-  "/assets/RequestAnatomy-S17pYDRc.js": {
+  "/assets/CompareDrawer-TghZr5t1.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"43f3-DId6+xakRnGM+B/ZQpGxfeV9YU0"',
-    "mtime": "2026-07-11T04:43:38.032Z",
-    "size": 17395,
-    "path": "../public/assets/RequestAnatomy-S17pYDRc.js"
+    "etag": '"4bc4-EO0Pced4VNvNgQhISz9DCokb9HU"',
+    "mtime": "2026-07-11T07:25:10.087Z",
+    "size": 19396,
+    "path": "../public/assets/CompareDrawer-TghZr5t1.js"
+  },
+  "/assets/index-D4HkS7Ct.js": {
+    "type": "text/javascript; charset=utf-8",
+    "etag": '"265-GATgiXd9lc1ztQtCZI0flLv7tLY"',
+    "mtime": "2026-07-11T07:25:10.085Z",
+    "size": 613,
+    "path": "../public/assets/index-D4HkS7Ct.js"
   },
-  "/assets/ResponseView-Cf1XrawD.js": {
+  "/assets/ResponseView-d25MdFhY.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"47fe-kAztjtZjRuPE6xDPPKWIypxT0pw"',
-    "mtime": "2026-07-11T04:43:38.032Z",
+    "etag": '"47fe-Po8oiwgEzmPD5hRtGam0HQony8k"',
+    "mtime": "2026-07-11T07:25:10.087Z",
     "size": 18430,
-    "path": "../public/assets/ResponseView-Cf1XrawD.js"
+    "path": "../public/assets/ResponseView-d25MdFhY.js"
   },
-  "/assets/StreamingChunkSequence-BdOrVlCi.js": {
+  "/assets/RequestAnatomy-DNWccR7O.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"e96-lQJVKxQQeI+CfoFlIj48wFou0qg"',
-    "mtime": "2026-07-11T04:43:38.032Z",
-    "size": 3734,
-    "path": "../public/assets/StreamingChunkSequence-BdOrVlCi.js"
+    "etag": '"43f3-aiF5LhFVPVUreSkzjdqgZFSwONM"',
+    "mtime": "2026-07-11T07:25:10.087Z",
+    "size": 17395,
+    "path": "../public/assets/RequestAnatomy-DNWccR7O.js"
   },
-  "/assets/ReplayDialog-DMX23O5G.js": {
+  "/assets/ReplayDialog-CZMApaF4.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"3348-Y6DIYl0Hh8PNYNBckbjWZMRAVXk"',
-    "mtime": "2026-07-11T04:43:38.032Z",
+    "etag": '"3348-CNibW415vjAp7j+7orWWQiIbLDA"',
+    "mtime": "2026-07-11T07:25:10.085Z",
     "size": 13128,
-    "path": "../public/assets/ReplayDialog-DMX23O5G.js"
+    "path": "../public/assets/ReplayDialog-CZMApaF4.js"
   },
-  "/assets/_sessionId-BnKGmJrR.js": {
+  "/assets/StreamingChunkSequence-DIFZEnWe.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"36d-RhevzYZMuLpSJjgi/aeqAk1rL4A"',
-    "mtime": "2026-07-11T04:43:38.031Z",
-    "size": 877,
-    "path": "../public/assets/_sessionId-BnKGmJrR.js"
+    "etag": '"e96-uRF1QBlYJ4LJvlyn05RZzDtEbkE"',
+    "mtime": "2026-07-11T07:25:10.087Z",
+    "size": 3734,
+    "path": "../public/assets/StreamingChunkSequence-DIFZEnWe.js"
   },
-  "/assets/index-B1atk19i.js": {
-    "type": "text/javascript; charset=utf-8",
-    "etag": '"537cd-GY35Hkfq1WcIm1S1m2dfzIGL8WU"',
-    "mtime": "2026-07-11T04:43:38.031Z",
-    "size": 341965,
-    "path": "../public/assets/index-B1atk19i.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-11T04:43:38.031Z",
+    "mtime": "2026-07-11T07:25:10.085Z",
     "size": 11256,
     "path": "../public/assets/zhipuai-BPNAnxo-.svg"
   },
-  "/assets/qwen-CONDcHqt.png": {
-    "type": "image/png",
-    "etag": '"572c3-cdJAPaHdOvFCGzuaQjagdgOu6XE"',
-    "mtime": "2026-07-11T04:43:38.031Z",
-    "size": 357059,
-    "path": "../public/assets/qwen-CONDcHqt.png"
+  "/assets/_sessionId-DRfvuE2k.js": {
+    "type": "text/javascript; charset=utf-8",
+    "etag": '"36d-DdOUH1ep4qcEQKZ8gAcubBJENCU"',
+    "mtime": "2026-07-11T07:25:10.085Z",
+    "size": 877,
+    "path": "../public/assets/_sessionId-DRfvuE2k.js"
   },
-  "/assets/ProxyViewerContainer-CYOXB81n.js": {
+  "/assets/ProxyViewerContainer-fShBAZjj.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"1404bd-m6RVh35PDpz6DtJ+NOh+zTs1XG8"',
-    "mtime": "2026-07-11T04:43:38.032Z",
-    "size": 1311933,
-    "path": "../public/assets/ProxyViewerContainer-CYOXB81n.js"
+    "etag": '"140e7c-9dZ35KxZynE0VFMwXVZlbDNocic"',
+    "mtime": "2026-07-11T07:25:10.087Z",
+    "size": 1314428,
+    "path": "../public/assets/ProxyViewerContainer-fShBAZjj.js"
   }
 };
 function readAsset(id) {

package/package.json

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

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}

package/src/components/proxy-viewer/ConversationGroup.tsx

@@ -160,7 +160,7 @@ export const ConversationGroup = memo(function ({
   }, [group.logs, setExpanded]);
 
   return (
-    <div className="mb-2">
+    <div className="mb-1.5">
       <ConversationHeader
         conversationId={group.conversationId}
         startTime={startTime}