@tonyclaw/agent-inspector 3.0.24 → 3.0.25

package/src/components/ProxyViewer.tsx

@@ -1,8 +1,6 @@
 import {
   type ChangeEvent,
-  type CSSProperties,
   type JSX,
-  type PointerEvent as ReactPointerEvent,
   type ReactNode,
   useCallback,
   useEffect,
@@ -81,6 +79,7 @@ import { AlertsDialog } from "./alerts/AlertsDialog";
 import { GroupsDialog } from "./groups/GroupsDialog";
 import { SettingsDialog } from "./providers/SettingsDialog";
 import { AgentLabDialog } from "./ecosystem/AgentLabDialog";
+import { InspectorPet } from "./inspector-pet/InspectorPet";
 import { PiAgentPanel } from "./pi-agent/PiAgentPanel";
 import { computeCacheTrends } from "./proxy-viewer/cacheTrend";
 import { LazyCompareDrawer } from "./proxy-viewer/lazy";
@@ -1056,25 +1055,6 @@ function BrandHeader({
   );
 }
 
-type FloatingLogoPosition = {
-  x: number;
-  y: number;
-};
-
-type FloatingLogoDragState = {
-  pointerId: number;
-  offsetX: number;
-  offsetY: number;
-};
-
-type FloatingLogoEdge = "left" | "right" | "top" | "bottom";
-
-const FLOATING_LOGO_SIZE = 56;
-const FLOATING_LOGO_MARGIN = 14;
-const FLOATING_LOGO_MIN_DRIFT_MS = 5200;
-const FLOATING_LOGO_DRIFT_WINDOW_MS = 2400;
-const FLOATING_LOGO_MIN_STEP = 72;
-const FLOATING_LOGO_MAX_STEP = 156;
 const DETAILS_PANEL_COLLAPSED_STORAGE_KEY = "agent-inspector.detailsPanelCollapsed";
 
 function readStoredDetailsPanelCollapsed(): boolean {
@@ -1083,264 +1063,6 @@ function readStoredDetailsPanelCollapsed(): boolean {
   return stored === null || stored === "1";
 }
 
-function clampFloatingLogoPosition(position: FloatingLogoPosition): FloatingLogoPosition {
-  const maxX = Math.max(
-    FLOATING_LOGO_MARGIN,
-    window.innerWidth - FLOATING_LOGO_SIZE - FLOATING_LOGO_MARGIN,
-  );
-  const maxY = Math.max(
-    FLOATING_LOGO_MARGIN,
-    window.innerHeight - FLOATING_LOGO_SIZE - FLOATING_LOGO_MARGIN,
-  );
-  return {
-    x: Math.min(Math.max(position.x, FLOATING_LOGO_MARGIN), maxX),
-    y: Math.min(Math.max(position.y, FLOATING_LOGO_MARGIN), maxY),
-  };
-}
-
-function snapFloatingLogoToEdge(position: FloatingLogoPosition): FloatingLogoPosition {
-  const clamped = clampFloatingLogoPosition(position);
-  const maxX = Math.max(
-    FLOATING_LOGO_MARGIN,
-    window.innerWidth - FLOATING_LOGO_SIZE - FLOATING_LOGO_MARGIN,
-  );
-  const maxY = Math.max(
-    FLOATING_LOGO_MARGIN,
-    window.innerHeight - FLOATING_LOGO_SIZE - FLOATING_LOGO_MARGIN,
-  );
-  const leftDistance = clamped.x - FLOATING_LOGO_MARGIN;
-  const rightDistance = maxX - clamped.x;
-  const topDistance = clamped.y - FLOATING_LOGO_MARGIN;
-  const bottomDistance = maxY - clamped.y;
-  const nearestDistance = Math.min(leftDistance, rightDistance, topDistance, bottomDistance);
-
-  if (nearestDistance === leftDistance) return { x: FLOATING_LOGO_MARGIN, y: clamped.y };
-  if (nearestDistance === rightDistance) return { x: maxX, y: clamped.y };
-  if (nearestDistance === topDistance) return { x: clamped.x, y: FLOATING_LOGO_MARGIN };
-  return { x: clamped.x, y: maxY };
-}
-
-function randomFloatingLogoEdgePosition(): FloatingLogoPosition {
-  const maxX = Math.max(
-    FLOATING_LOGO_MARGIN,
-    window.innerWidth - FLOATING_LOGO_SIZE - FLOATING_LOGO_MARGIN,
-  );
-  const maxY = Math.max(
-    FLOATING_LOGO_MARGIN,
-    window.innerHeight - FLOATING_LOGO_SIZE - FLOATING_LOGO_MARGIN,
-  );
-  const randomX = FLOATING_LOGO_MARGIN + Math.random() * (maxX - FLOATING_LOGO_MARGIN);
-  const randomY = FLOATING_LOGO_MARGIN + Math.random() * (maxY - FLOATING_LOGO_MARGIN);
-  const edgeIndex = Math.floor(Math.random() * 4);
-
-  switch (edgeIndex) {
-    case 0:
-      return { x: FLOATING_LOGO_MARGIN, y: randomY };
-    case 1:
-      return { x: maxX, y: randomY };
-    case 2:
-      return { x: randomX, y: FLOATING_LOGO_MARGIN };
-    case 3:
-      return { x: randomX, y: maxY };
-    default:
-      return { x: maxX, y: FLOATING_LOGO_MARGIN };
-  }
-}
-
-function nearestFloatingLogoEdge(position: FloatingLogoPosition): FloatingLogoEdge {
-  const clamped = clampFloatingLogoPosition(position);
-  const maxX = Math.max(
-    FLOATING_LOGO_MARGIN,
-    window.innerWidth - FLOATING_LOGO_SIZE - FLOATING_LOGO_MARGIN,
-  );
-  const maxY = Math.max(
-    FLOATING_LOGO_MARGIN,
-    window.innerHeight - FLOATING_LOGO_SIZE - FLOATING_LOGO_MARGIN,
-  );
-  const distances: { edge: FloatingLogoEdge; distance: number }[] = [
-    { edge: "left", distance: clamped.x - FLOATING_LOGO_MARGIN },
-    { edge: "right", distance: maxX - clamped.x },
-    { edge: "top", distance: clamped.y - FLOATING_LOGO_MARGIN },
-    { edge: "bottom", distance: maxY - clamped.y },
-  ];
-  return distances.reduce((best, current) => (current.distance < best.distance ? current : best))
-    .edge;
-}
-
-function nextFloatingLogoWalkingPosition(position: FloatingLogoPosition): FloatingLogoPosition {
-  const clamped = snapFloatingLogoToEdge(position);
-  const maxX = Math.max(
-    FLOATING_LOGO_MARGIN,
-    window.innerWidth - FLOATING_LOGO_SIZE - FLOATING_LOGO_MARGIN,
-  );
-  const maxY = Math.max(
-    FLOATING_LOGO_MARGIN,
-    window.innerHeight - FLOATING_LOGO_SIZE - FLOATING_LOGO_MARGIN,
-  );
-  const step =
-    FLOATING_LOGO_MIN_STEP + Math.random() * (FLOATING_LOGO_MAX_STEP - FLOATING_LOGO_MIN_STEP);
-  const direction = Math.random() > 0.5 ? 1 : -1;
-  const edge = nearestFloatingLogoEdge(clamped);
-
-  switch (edge) {
-    case "left": {
-      const nextY = clamped.y + step * direction;
-      if (nextY <= FLOATING_LOGO_MARGIN)
-        return { x: FLOATING_LOGO_MARGIN, y: FLOATING_LOGO_MARGIN };
-      if (nextY >= maxY) return { x: FLOATING_LOGO_MARGIN, y: maxY };
-      return { x: FLOATING_LOGO_MARGIN, y: nextY };
-    }
-    case "right": {
-      const nextY = clamped.y + step * direction;
-      if (nextY <= FLOATING_LOGO_MARGIN) return { x: maxX, y: FLOATING_LOGO_MARGIN };
-      if (nextY >= maxY) return { x: maxX, y: maxY };
-      return { x: maxX, y: nextY };
-    }
-    case "top": {
-      const nextX = clamped.x + step * direction;
-      if (nextX <= FLOATING_LOGO_MARGIN)
-        return { x: FLOATING_LOGO_MARGIN, y: FLOATING_LOGO_MARGIN };
-      if (nextX >= maxX) return { x: maxX, y: FLOATING_LOGO_MARGIN };
-      return { x: nextX, y: FLOATING_LOGO_MARGIN };
-    }
-    case "bottom": {
-      const nextX = clamped.x + step * direction;
-      if (nextX <= FLOATING_LOGO_MARGIN) return { x: FLOATING_LOGO_MARGIN, y: maxY };
-      if (nextX >= maxX) return { x: maxX, y: maxY };
-      return { x: nextX, y: maxY };
-    }
-  }
-}
-
-function FloatingInspectorLogo(): JSX.Element {
-  const [position, setPosition] = useState<FloatingLogoPosition>({
-    x: FLOATING_LOGO_MARGIN,
-    y: FLOATING_LOGO_MARGIN,
-  });
-  const [motionTick, setMotionTick] = useState(0);
-  const [dragging, setDragging] = useState(false);
-  const dragStateRef = useRef<FloatingLogoDragState | null>(null);
-
-  useEffect(() => {
-    setPosition(randomFloatingLogoEdgePosition());
-  }, []);
-
-  useEffect(() => {
-    if (dragging) return undefined;
-    let timeoutId: number | null = null;
-
-    const scheduleDrift = () => {
-      const delay = FLOATING_LOGO_MIN_DRIFT_MS + Math.random() * FLOATING_LOGO_DRIFT_WINDOW_MS;
-      timeoutId = window.setTimeout(() => {
-        setMotionTick((current) => current + 1);
-        setPosition((current) => nextFloatingLogoWalkingPosition(current));
-        scheduleDrift();
-      }, delay);
-    };
-
-    scheduleDrift();
-    return () => {
-      if (timeoutId !== null) {
-        window.clearTimeout(timeoutId);
-      }
-    };
-  }, [dragging]);
-
-  useEffect(() => {
-    const handleResize = () => {
-      setPosition((current) => snapFloatingLogoToEdge(current));
-    };
-    window.addEventListener("resize", handleResize);
-    return () => window.removeEventListener("resize", handleResize);
-  }, []);
-
-  const handlePointerDown = useCallback((event: ReactPointerEvent<HTMLButtonElement>) => {
-    const rect = event.currentTarget.getBoundingClientRect();
-    dragStateRef.current = {
-      pointerId: event.pointerId,
-      offsetX: event.clientX - rect.left,
-      offsetY: event.clientY - rect.top,
-    };
-    event.currentTarget.setPointerCapture(event.pointerId);
-    setDragging(true);
-  }, []);
-
-  const handlePointerMove = useCallback((event: ReactPointerEvent<HTMLButtonElement>) => {
-    const dragState = dragStateRef.current;
-    if (dragState === null || dragState.pointerId !== event.pointerId) return;
-    setPosition(
-      clampFloatingLogoPosition({
-        x: event.clientX - dragState.offsetX,
-        y: event.clientY - dragState.offsetY,
-      }),
-    );
-  }, []);
-
-  const handlePointerUp = useCallback((event: ReactPointerEvent<HTMLButtonElement>) => {
-    const dragState = dragStateRef.current;
-    if (dragState === null || dragState.pointerId !== event.pointerId) return;
-    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
-      event.currentTarget.releasePointerCapture(event.pointerId);
-    }
-    dragStateRef.current = null;
-    setDragging(false);
-    setPosition((current) => snapFloatingLogoToEdge(current));
-  }, []);
-
-  const style = useMemo<CSSProperties>(
-    () => ({
-      transform: `translate3d(${position.x}px, ${position.y}px, 0) rotate(${
-        motionTick % 2 === 0 ? "-4deg" : "5deg"
-      }) scale(${dragging ? "1.08" : "1"})`,
-      transition: dragging ? "none" : "transform 4800ms cubic-bezier(0.33, 1, 0.68, 1)",
-      touchAction: "none",
-    }),
-    [dragging, motionTick, position.x, position.y],
-  );
-
-  return (
-    <button
-      type="button"
-      className={cn(
-        "fixed left-0 top-0 z-40 flex size-14 items-center justify-center rounded-full bg-transparent text-foreground outline-none transition-[filter,opacity] duration-200 hover:opacity-95 hover:drop-shadow-[0_0_24px_rgba(245,158,11,0.36)] focus-visible:ring-1 focus-visible:ring-amber-300/55",
-        dragging ? "cursor-grabbing" : "cursor-grab",
-      )}
-      style={style}
-      onPointerDown={handlePointerDown}
-      onPointerMove={handlePointerMove}
-      onPointerUp={handlePointerUp}
-      onPointerCancel={handlePointerUp}
-      aria-label="Floating Inspector logo"
-      title="Drag Inspector logo"
-    >
-      <span
-        className={cn(
-          "relative flex size-12 items-center justify-center",
-          !dragging && "floating-crab-body",
-        )}
-        aria-hidden="true"
-      >
-        <CrabLogo className="relative z-10 size-11 text-amber-500 drop-shadow-[0_0_15px_rgba(245,158,11,0.30)]" />
-        <span className="pointer-events-none absolute inset-x-0 bottom-0 z-0 flex items-end justify-center gap-1 text-amber-400/80">
-          {[0, 1, 2, 3, 4, 5].map((leg) => (
-            <span
-              key={leg}
-              className={cn(
-                "floating-crab-leg h-2 w-0.5 rounded-full bg-current shadow-[0_0_7px_rgba(245,158,11,0.24)]",
-                leg < 3 ? "floating-crab-leg-left" : "floating-crab-leg-right",
-                dragging && "animate-none",
-              )}
-              style={{
-                animationDelay: `${leg % 2 === 0 ? 0 : 180}ms`,
-              }}
-            />
-          ))}
-        </span>
-      </span>
-    </button>
-  );
-}
-
 function SessionContextLogButton({ label, logId }: { label: string; logId: number }): JSX.Element {
   return (
     <button
@@ -2019,7 +1741,7 @@ export function ProxyViewer({
           <PanelRightClose className="size-3.5" />
         )}
       </button>
-      {detailsPanelCollapsed && <FloatingInspectorLogo />}
+      {detailsPanelCollapsed && <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",

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

@@ -0,0 +1,390 @@
+import {
+  type CSSProperties,
+  type JSX,
+  type PointerEvent as ReactPointerEvent,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { Heart, Pause, Play } from "lucide-react";
+import type { CapturedLog } from "../../contracts";
+import { cn } from "../../lib/utils";
+import { CrabLogo } from "../ui/crab-logo";
+import {
+  INSPECTOR_PET_MARGIN,
+  type InspectorPetMood,
+  type InspectorPetPosition,
+  type InspectorPetViewport,
+  clampInspectorPetPosition,
+  inspectorPetPanelPosition,
+  nextInspectorPetWalkingPosition,
+  randomInspectorPetEdgePosition,
+  resolveInspectorPetStatus,
+  snapInspectorPetToEdge,
+} from "./inspectorPetLogic";
+
+type InspectorPetProps = {
+  logs: readonly CapturedLog[];
+};
+
+type InspectorPetDragState = {
+  pointerId: number;
+  offsetX: number;
+  offsetY: number;
+  startX: number;
+  startY: number;
+  moved: boolean;
+};
+
+const INSPECTOR_PET_ROAMING_STORAGE_KEY = "agent-inspector.pet.roaming";
+const INSPECTOR_PET_MIN_DRIFT_MS = 5200;
+const INSPECTOR_PET_DRIFT_WINDOW_MS = 2400;
+const INSPECTOR_PET_PANEL_DISMISS_MS = 6000;
+const INSPECTOR_PET_REACTION_MS = 760;
+const INSPECTOR_PET_DRAG_THRESHOLD = 4;
+
+function readViewport(): InspectorPetViewport {
+  if (typeof window === "undefined") return { width: 1280, height: 720, scale: 1 };
+  const rawScale = window
+    .getComputedStyle(document.documentElement)
+    .getPropertyValue("--inspector-ui-scale");
+  const parsedScale = Number.parseFloat(rawScale);
+  const scale = Number.isFinite(parsedScale) && parsedScale > 0 ? parsedScale : 1;
+  return {
+    width: Math.max(window.innerWidth, INSPECTOR_PET_MARGIN * 2),
+    height: Math.max(window.innerHeight, INSPECTOR_PET_MARGIN * 2),
+    scale,
+  };
+}
+
+function readStoredRoaming(): boolean {
+  if (typeof window === "undefined") return true;
+  try {
+    return window.localStorage.getItem(INSPECTOR_PET_ROAMING_STORAGE_KEY) !== "0";
+  } catch {
+    return true;
+  }
+}
+
+function moodDotClass(mood: InspectorPetMood): string {
+  switch (mood) {
+    case "active":
+      return "bg-cyan-400 shadow-[0_0_9px_rgba(34,211,238,0.65)]";
+    case "attention":
+      return "bg-red-500 shadow-[0_0_9px_rgba(239,68,68,0.55)]";
+    case "idle":
+      return "bg-amber-400 shadow-[0_0_8px_rgba(251,191,36,0.45)]";
+    case "sleeping":
+      return "bg-muted-foreground/45";
+  }
+}
+
+function moodMotionClass(mood: InspectorPetMood): string {
+  switch (mood) {
+    case "active":
+      return "inspector-pet-active";
+    case "attention":
+      return "inspector-pet-attention";
+    case "idle":
+      return "";
+    case "sleeping":
+      return "inspector-pet-sleeping";
+  }
+}
+
+export function InspectorPet({ logs }: InspectorPetProps): JSX.Element {
+  const [viewport, setViewport] = useState<InspectorPetViewport>(readViewport);
+  const [position, setPosition] = useState<InspectorPetPosition>({
+    x: INSPECTOR_PET_MARGIN,
+    y: INSPECTOR_PET_MARGIN,
+  });
+  const [clockMs, setClockMs] = useState(() => Date.now());
+  const [motionTick, setMotionTick] = useState(0);
+  const [panelTick, setPanelTick] = useState(0);
+  const [panelVisible, setPanelVisible] = useState(false);
+  const [reactionTick, setReactionTick] = useState(0);
+  const [reactionVisible, setReactionVisible] = useState(false);
+  const [dragging, setDragging] = useState(false);
+  const [roaming, setRoaming] = useState(readStoredRoaming);
+  const [reduceMotion, setReduceMotion] = useState(false);
+  const dragStateRef = useRef<InspectorPetDragState | null>(null);
+  const dragOccurredRef = useRef(false);
+
+  const status = useMemo(() => resolveInspectorPetStatus(logs, clockMs), [clockMs, logs]);
+  const panelPosition = useMemo(
+    () => inspectorPetPanelPosition(position, viewport),
+    [position, viewport],
+  );
+
+  useEffect(() => {
+    const nextViewport = readViewport();
+    setViewport(nextViewport);
+    setPosition(randomInspectorPetEdgePosition(nextViewport, Math.random(), Math.random()));
+  }, []);
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const handleChange = (event: MediaQueryListEvent): void => setReduceMotion(event.matches);
+    setReduceMotion(mediaQuery.matches);
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, []);
+
+  useEffect(() => {
+    const intervalId = window.setInterval(() => setClockMs(Date.now()), 15_000);
+    return () => window.clearInterval(intervalId);
+  }, []);
+
+  useEffect(() => {
+    try {
+      window.localStorage.setItem(INSPECTOR_PET_ROAMING_STORAGE_KEY, roaming ? "1" : "0");
+    } catch {
+      // Local storage can be unavailable in hardened browser profiles.
+    }
+  }, [roaming]);
+
+  useEffect(() => {
+    if (!roaming || dragging || reduceMotion) return undefined;
+    let timeoutId: number | null = null;
+
+    const scheduleDrift = (): void => {
+      const delay = INSPECTOR_PET_MIN_DRIFT_MS + Math.random() * INSPECTOR_PET_DRIFT_WINDOW_MS;
+      timeoutId = window.setTimeout(() => {
+        setMotionTick((current) => current + 1);
+        setPosition((current) =>
+          nextInspectorPetWalkingPosition(current, viewport, Math.random(), Math.random()),
+        );
+        scheduleDrift();
+      }, delay);
+    };
+
+    scheduleDrift();
+    return () => {
+      if (timeoutId !== null) window.clearTimeout(timeoutId);
+    };
+  }, [dragging, reduceMotion, roaming, viewport]);
+
+  useEffect(() => {
+    const handleResize = (): void => {
+      const nextViewport = readViewport();
+      setViewport(nextViewport);
+      setPosition((current) => snapInspectorPetToEdge(current, nextViewport));
+    };
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  useEffect(() => {
+    if (!panelVisible) return undefined;
+    const timeoutId = window.setTimeout(
+      () => setPanelVisible(false),
+      INSPECTOR_PET_PANEL_DISMISS_MS,
+    );
+    return () => window.clearTimeout(timeoutId);
+  }, [panelTick, panelVisible]);
+
+  useEffect(() => {
+    if (!reactionVisible) return undefined;
+    const timeoutId = window.setTimeout(() => setReactionVisible(false), INSPECTOR_PET_REACTION_MS);
+    return () => window.clearTimeout(timeoutId);
+  }, [reactionTick, reactionVisible]);
+
+  const handlePet = useCallback(() => {
+    if (dragOccurredRef.current) {
+      dragOccurredRef.current = false;
+      return;
+    }
+    setClockMs(Date.now());
+    setPanelTick((current) => current + 1);
+    setPanelVisible(true);
+    setReactionTick((current) => current + 1);
+    setReactionVisible(true);
+  }, []);
+
+  const handlePointerDown = useCallback((event: ReactPointerEvent<HTMLButtonElement>) => {
+    const rect = event.currentTarget.getBoundingClientRect();
+    dragOccurredRef.current = false;
+    dragStateRef.current = {
+      pointerId: event.pointerId,
+      offsetX: event.clientX - rect.left,
+      offsetY: event.clientY - rect.top,
+      startX: event.clientX,
+      startY: event.clientY,
+      moved: false,
+    };
+    event.currentTarget.setPointerCapture(event.pointerId);
+    setPanelVisible(false);
+    setDragging(true);
+  }, []);
+
+  const handlePointerMove = useCallback(
+    (event: ReactPointerEvent<HTMLButtonElement>) => {
+      const dragState = dragStateRef.current;
+      if (dragState === null || dragState.pointerId !== event.pointerId) return;
+      const moved =
+        dragState.moved ||
+        Math.abs(event.clientX - dragState.startX) >= INSPECTOR_PET_DRAG_THRESHOLD ||
+        Math.abs(event.clientY - dragState.startY) >= INSPECTOR_PET_DRAG_THRESHOLD;
+      dragState.moved = moved;
+      dragOccurredRef.current = moved;
+      setPosition(
+        clampInspectorPetPosition(
+          {
+            x: event.clientX - dragState.offsetX,
+            y: event.clientY - dragState.offsetY,
+          },
+          viewport,
+        ),
+      );
+    },
+    [viewport],
+  );
+
+  const handlePointerUp = useCallback(
+    (event: ReactPointerEvent<HTMLButtonElement>) => {
+      const dragState = dragStateRef.current;
+      if (dragState === null || dragState.pointerId !== event.pointerId) return;
+      if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+        event.currentTarget.releasePointerCapture(event.pointerId);
+      }
+      dragOccurredRef.current = dragState.moved;
+      dragStateRef.current = null;
+      setDragging(false);
+      setPosition((current) => snapInspectorPetToEdge(current, viewport));
+    },
+    [viewport],
+  );
+
+  const handlePointerCancel = useCallback((event: ReactPointerEvent<HTMLButtonElement>) => {
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    }
+    dragStateRef.current = null;
+    dragOccurredRef.current = false;
+    setDragging(false);
+  }, []);
+
+  const petStyle = useMemo<CSSProperties>(
+    () => ({
+      transform: `translate3d(${String(position.x)}px, ${String(position.y)}px, 0) rotate(${
+        motionTick % 2 === 0 ? "-4deg" : "5deg"
+      }) scale(${dragging ? "1.08" : "1"})`,
+      transition: dragging ? "none" : "transform 4800ms cubic-bezier(0.33, 1, 0.68, 1)",
+      touchAction: "none",
+    }),
+    [dragging, motionTick, position.x, position.y],
+  );
+
+  const panelStyle = useMemo<CSSProperties>(
+    () => ({ left: panelPosition.x, top: panelPosition.y }),
+    [panelPosition.x, panelPosition.y],
+  );
+
+  const roamingLabel = roaming ? "Pause pet roaming" : "Resume pet roaming";
+
+  return (
+    <>
+      <button
+        type="button"
+        className={cn(
+          "fixed left-0 top-0 z-30 flex size-14 items-center justify-center bg-transparent text-foreground outline-none transition-[filter,opacity] duration-200 hover:opacity-95 hover:drop-shadow-[0_0_24px_rgba(245,158,11,0.36)] focus-visible:drop-shadow-[0_0_12px_rgba(251,191,36,0.72)]",
+          dragging ? "cursor-grabbing" : "cursor-grab",
+        )}
+        style={petStyle}
+        data-pet-mood={status.mood}
+        onClick={handlePet}
+        onPointerDown={handlePointerDown}
+        onPointerMove={handlePointerMove}
+        onPointerUp={handlePointerUp}
+        onPointerCancel={handlePointerCancel}
+        aria-label={`Inspector pet: ${status.label}`}
+        title={status.label}
+      >
+        <span
+          className={cn(
+            "relative flex size-12 items-center justify-center",
+            reactionVisible && "inspector-pet-patted",
+          )}
+          aria-hidden="true"
+        >
+          <span
+            className={cn(
+              "relative flex size-12 items-center justify-center",
+              moodMotionClass(status.mood),
+            )}
+          >
+            <span
+              className={cn(
+                "relative flex size-12 items-center justify-center",
+                !dragging && "floating-crab-body",
+              )}
+            >
+              <CrabLogo className="relative z-10 size-11 text-amber-500 drop-shadow-[0_0_15px_rgba(245,158,11,0.30)]" />
+              <span className="pointer-events-none absolute inset-x-0 bottom-0 z-0 flex items-end justify-center gap-1 text-amber-400/80">
+                {[0, 1, 2, 3, 4, 5].map((leg) => (
+                  <span
+                    key={leg}
+                    className={cn(
+                      "floating-crab-leg h-2 w-0.5 rounded-full bg-current shadow-[0_0_7px_rgba(245,158,11,0.24)]",
+                      leg < 3 ? "floating-crab-leg-left" : "floating-crab-leg-right",
+                      dragging && "animate-none",
+                    )}
+                    style={{ animationDelay: `${String(leg % 2 === 0 ? 0 : 180)}ms` }}
+                  />
+                ))}
+              </span>
+            </span>
+          </span>
+          <span
+            className={cn(
+              "absolute right-0 top-1 size-2 rounded-full border border-background/90",
+              moodDotClass(status.mood),
+              status.mood === "active" && !reduceMotion && "animate-pulse",
+            )}
+          />
+          {reactionVisible && (
+            <Heart
+              key={reactionTick}
+              className="inspector-pet-heart absolute -right-1 -top-2 size-3.5 fill-amber-400 text-amber-400"
+            />
+          )}
+        </span>
+      </button>
+
+      {panelVisible && (
+        <div
+          className="fixed z-50 w-48 rounded-md border border-border/80 bg-popover/95 px-3 py-2 text-popover-foreground shadow-[0_14px_34px_rgba(0,0,0,0.28)] backdrop-blur"
+          style={panelStyle}
+          role="status"
+          aria-live="polite"
+        >
+          <div className="flex min-w-0 items-center gap-2">
+            <span className={cn("size-2 shrink-0 rounded-full", moodDotClass(status.mood))} />
+            <span className="min-w-0 flex-1 truncate text-xs font-medium">{status.label}</span>
+            <button
+              type="button"
+              className="inline-flex size-6 shrink-0 items-center justify-center rounded text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none"
+              onClick={() => setRoaming((current) => !current)}
+              aria-label={roamingLabel}
+              title={roamingLabel}
+            >
+              {roaming ? <Pause className="size-3.5" /> : <Play className="size-3.5" />}
+            </button>
+          </div>
+          <div className="mt-1 flex items-center justify-between gap-3 font-mono text-[10px] text-muted-foreground">
+            <span>{String(status.capturedCount)} captured</span>
+            <span>
+              {status.pendingCount > 0
+                ? `${String(status.pendingCount)} active`
+                : roaming
+                  ? "Roaming"
+                  : "Resting"}
+            </span>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}