@tonyclaw/agent-inspector 3.0.24 → 3.0.26

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",