@tonyclaw/agent-inspector 3.0.25 → 3.0.26

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

@@ -8,10 +8,10 @@ import {
   useRef,
   useState,
 } from "react";
+import { createPortal } from "react-dom";
 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,
@@ -24,6 +24,7 @@ import {
   resolveInspectorPetStatus,
   snapInspectorPetToEdge,
 } from "./inspectorPetLogic";
+import { InspectorPetCrab3D } from "./InspectorPetCrab3D";
 
 type InspectorPetProps = {
   logs: readonly CapturedLog[];
@@ -39,11 +40,13 @@ type InspectorPetDragState = {
 };
 
 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_MIN_PAUSE_MS = 11_000;
+const INSPECTOR_PET_PAUSE_WINDOW_MS = 9000;
+const INSPECTOR_PET_SCUTTLE_MS = 7200;
 const INSPECTOR_PET_PANEL_DISMISS_MS = 6000;
 const INSPECTOR_PET_REACTION_MS = 760;
 const INSPECTOR_PET_DRAG_THRESHOLD = 4;
+const INSPECTOR_PET_TOP_LAYER_Z_INDEX = 2_147_483_647;
 
 function readViewport(): InspectorPetViewport {
   if (typeof window === "undefined") return { width: 1280, height: 720, scale: 1 };
@@ -95,13 +98,14 @@ function moodMotionClass(mood: InspectorPetMood): string {
 }
 
 export function InspectorPet({ logs }: InspectorPetProps): JSX.Element {
+  const [portalHost, setPortalHost] = useState<HTMLElement | null>(null);
   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 [scuttling, setScuttling] = useState(false);
   const [panelTick, setPanelTick] = useState(0);
   const [panelVisible, setPanelVisible] = useState(false);
   const [reactionTick, setReactionTick] = useState(0);
@@ -117,11 +121,12 @@ export function InspectorPet({ logs }: InspectorPetProps): JSX.Element {
     () => inspectorPetPanelPosition(position, viewport),
     [position, viewport],
   );
+  useEffect(() => setPortalHost(document.body), []);
 
   useEffect(() => {
     const nextViewport = readViewport();
     setViewport(nextViewport);
-    setPosition(randomInspectorPetEdgePosition(nextViewport, Math.random(), Math.random()));
+    setPosition(randomInspectorPetEdgePosition(nextViewport, Math.random()));
   }, []);
 
   useEffect(() => {
@@ -147,28 +152,34 @@ export function InspectorPet({ logs }: InspectorPetProps): JSX.Element {
 
   useEffect(() => {
     if (!roaming || dragging || reduceMotion) return undefined;
-    let timeoutId: number | null = null;
+    let pauseTimeoutId: number | null = null;
+    let scuttleTimeoutId: 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);
+    const scheduleScuttle = (): void => {
+      const delay = INSPECTOR_PET_MIN_PAUSE_MS + Math.random() * INSPECTOR_PET_PAUSE_WINDOW_MS;
+      pauseTimeoutId = window.setTimeout(() => {
+        setScuttling(true);
         setPosition((current) =>
           nextInspectorPetWalkingPosition(current, viewport, Math.random(), Math.random()),
         );
-        scheduleDrift();
+        scuttleTimeoutId = window.setTimeout(() => {
+          setScuttling(false);
+          scheduleScuttle();
+        }, INSPECTOR_PET_SCUTTLE_MS);
       }, delay);
     };
 
-    scheduleDrift();
+    scheduleScuttle();
     return () => {
-      if (timeoutId !== null) window.clearTimeout(timeoutId);
+      if (pauseTimeoutId !== null) window.clearTimeout(pauseTimeoutId);
+      if (scuttleTimeoutId !== null) window.clearTimeout(scuttleTimeoutId);
     };
   }, [dragging, reduceMotion, roaming, viewport]);
 
   useEffect(() => {
     const handleResize = (): void => {
       const nextViewport = readViewport();
+      setScuttling(false);
       setViewport(nextViewport);
       setPosition((current) => snapInspectorPetToEdge(current, nextViewport));
     };
@@ -215,6 +226,7 @@ export function InspectorPet({ logs }: InspectorPetProps): JSX.Element {
       moved: false,
     };
     event.currentTarget.setPointerCapture(event.pointerId);
+    setScuttling(false);
     setPanelVisible(false);
     setDragging(true);
   }, []);
@@ -266,15 +278,22 @@ export function InspectorPet({ logs }: InspectorPetProps): JSX.Element {
     setDragging(false);
   }, []);
 
+  const handleToggleRoaming = useCallback(() => {
+    setScuttling(false);
+    setRoaming((current) => !current);
+  }, []);
+
   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)",
+      transform: `translate3d(${String(position.x)}px, ${String(position.y)}px, 0) scale(${dragging ? "1.04" : "1"})`,
+      transition: dragging
+        ? "none"
+        : scuttling
+          ? `transform ${String(INSPECTOR_PET_SCUTTLE_MS)}ms cubic-bezier(0.22, 0.72, 0.32, 1)`
+          : "transform 900ms cubic-bezier(0.22, 0.72, 0.32, 1)",
       touchAction: "none",
     }),
-    [dragging, motionTick, position.x, position.y],
+    [dragging, position.x, position.y, scuttling],
   );
 
   const panelStyle = useMemo<CSSProperties>(
@@ -284,16 +303,23 @@ export function InspectorPet({ logs }: InspectorPetProps): JSX.Element {
 
   const roamingLabel = roaming ? "Pause pet roaming" : "Resume pet roaming";
 
-  return (
-    <>
+  if (portalHost === null) return <></>;
+
+  return createPortal(
+    <div
+      className="pointer-events-none fixed inset-0 isolate"
+      style={{ zIndex: INSPECTOR_PET_TOP_LAYER_Z_INDEX }}
+      data-inspector-pet-layer="true"
+    >
       <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)]",
+          "pointer-events-auto fixed left-0 top-0 z-10 flex size-28 items-center justify-center bg-transparent text-foreground outline-none transition-[filter,opacity] duration-200 hover:opacity-95 hover:drop-shadow-[0_0_28px_rgba(245,158,11,0.32)] focus-visible:drop-shadow-[0_0_14px_rgba(251,191,36,0.72)]",
           dragging ? "cursor-grabbing" : "cursor-grab",
         )}
         style={petStyle}
         data-pet-mood={status.mood}
+        data-pet-moving={scuttling ? "true" : "false"}
         onClick={handlePet}
         onPointerDown={handlePointerDown}
         onPointerMove={handlePointerMove}
@@ -304,42 +330,28 @@ export function InspectorPet({ logs }: InspectorPetProps): JSX.Element {
       >
         <span
           className={cn(
-            "relative flex size-12 items-center justify-center",
+            "relative z-10 flex size-24 items-center justify-center",
             reactionVisible && "inspector-pet-patted",
           )}
           aria-hidden="true"
         >
           <span
             className={cn(
-              "relative flex size-12 items-center justify-center",
+              "relative flex size-24 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 className="relative flex size-24 items-center justify-center">
+              <InspectorPetCrab3D
+                mood={status.mood}
+                moving={scuttling && !dragging}
+                reduceMotion={reduceMotion}
+              />
             </span>
           </span>
           <span
             className={cn(
-              "absolute right-0 top-1 size-2 rounded-full border border-background/90",
+              "absolute right-0 top-2 size-3 rounded-full border border-background/90",
               moodDotClass(status.mood),
               status.mood === "active" && !reduceMotion && "animate-pulse",
             )}
@@ -347,7 +359,7 @@ export function InspectorPet({ logs }: InspectorPetProps): JSX.Element {
           {reactionVisible && (
             <Heart
               key={reactionTick}
-              className="inspector-pet-heart absolute -right-1 -top-2 size-3.5 fill-amber-400 text-amber-400"
+              className="inspector-pet-heart absolute -right-2 -top-3 size-5 fill-amber-400 text-amber-400"
             />
           )}
         </span>
@@ -355,7 +367,7 @@ export function InspectorPet({ logs }: InspectorPetProps): JSX.Element {
 
       {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"
+          className="pointer-events-auto fixed z-20 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"
@@ -366,7 +378,7 @@ export function InspectorPet({ logs }: InspectorPetProps): JSX.Element {
             <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)}
+              onClick={handleToggleRoaming}
               aria-label={roamingLabel}
               title={roamingLabel}
             >
@@ -378,13 +390,16 @@ export function InspectorPet({ logs }: InspectorPetProps): JSX.Element {
             <span>
               {status.pendingCount > 0
                 ? `${String(status.pendingCount)} active`
-                : roaming
-                  ? "Roaming"
-                  : "Resting"}
+                : scuttling
+                  ? "Scuttling"
+                  : roaming
+                    ? "Resting"
+                    : "Paused"}
             </span>
           </div>
         </div>
       )}
-    </>
+    </div>,
+    portalHost,
   );
 }