@tonyclaw/agent-inspector 4.0.1 → 4.0.2

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

@@ -1,398 +0,0 @@
-import {
-  type CSSProperties,
-  type JSX,
-  type PointerEvent as ReactPointerEvent,
-  useCallback,
-  useEffect,
-  useMemo,
-  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 {
-  INSPECTOR_PET_MARGIN,
-  type InspectorPetMood,
-  type InspectorPetPosition,
-  type InspectorPetViewport,
-  clampInspectorPetPosition,
-  inspectorPetPanelPosition,
-  nextInspectorPetWalkingPosition,
-  randomInspectorPetEdgePosition,
-  resolveInspectorPetStatus,
-  snapInspectorPetToCorner,
-} from "./inspectorPetLogic";
-import { InspectorPetCrab3D } from "./InspectorPetCrab3D";
-
-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_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 };
-  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 false;
-  try {
-    return window.localStorage.getItem(INSPECTOR_PET_ROAMING_STORAGE_KEY) === "1";
-  } catch {
-    return false;
-  }
-}
-
-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 [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 [scuttling, setScuttling] = useState(false);
-  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(() => setPortalHost(document.body), []);
-
-  useEffect(() => {
-    const nextViewport = readViewport();
-    setViewport(nextViewport);
-    setPosition(randomInspectorPetEdgePosition(nextViewport, 1));
-  }, []);
-
-  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 pauseTimeoutId: number | null = null;
-    let scuttleTimeoutId: number | null = null;
-
-    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()),
-        );
-        scuttleTimeoutId = window.setTimeout(() => {
-          setScuttling(false);
-          scheduleScuttle();
-        }, INSPECTOR_PET_SCUTTLE_MS);
-      }, delay);
-    };
-
-    scheduleScuttle();
-    return () => {
-      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) => snapInspectorPetToCorner(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);
-    setScuttling(false);
-    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) => snapInspectorPetToCorner(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 handleToggleRoaming = useCallback(() => {
-    setScuttling(false);
-    setRoaming((current) => !current);
-  }, []);
-
-  const petStyle = useMemo<CSSProperties>(
-    () => ({
-      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, position.x, position.y, scuttling],
-  );
-
-  const panelStyle = useMemo<CSSProperties>(
-    () => ({ left: panelPosition.x, top: panelPosition.y }),
-    [panelPosition.x, panelPosition.y],
-  );
-
-  const roamingLabel = roaming ? "Pause pet roaming" : "Resume pet roaming";
-
-  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(
-          "pointer-events-auto fixed left-0 top-0 z-10 flex size-28 items-center justify-center bg-transparent text-foreground opacity-65 outline-none transition-[filter,opacity] duration-200 hover:opacity-100 hover:drop-shadow-[0_0_28px_rgba(245,158,11,0.32)] focus-visible:opacity-100 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}
-        onPointerUp={handlePointerUp}
-        onPointerCancel={handlePointerCancel}
-        aria-label={`Inspector pet: ${status.label}`}
-        title={status.label}
-      >
-        <span
-          className={cn(
-            "relative z-10 flex size-24 items-center justify-center",
-            reactionVisible && "inspector-pet-patted",
-          )}
-          aria-hidden="true"
-        >
-          <span
-            className={cn(
-              "relative flex size-24 items-center justify-center",
-              moodMotionClass(status.mood),
-            )}
-          >
-            <span className="relative flex size-24 items-center justify-center">
-              <InspectorPetCrab3D
-                mood={status.mood}
-                moving={scuttling && !dragging}
-                reduceMotion={reduceMotion}
-              />
-            </span>
-          </span>
-          {reactionVisible && (
-            <Heart
-              key={reactionTick}
-              className="inspector-pet-heart absolute -right-2 -top-3 size-5 fill-amber-400 text-amber-400"
-            />
-          )}
-        </span>
-      </button>
-
-      {panelVisible && (
-        <div
-          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"
-        >
-          <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-7 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 max-lg:size-10"
-              onClick={handleToggleRoaming}
-              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`
-                : scuttling
-                  ? "Scuttling"
-                  : roaming
-                    ? "Resting"
-                    : "Paused"}
-            </span>
-          </div>
-        </div>
-      )}
-    </div>,
-    portalHost,
-  );
-}