@tonyclaw/agent-inspector 3.0.25 → 3.0.26

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

@@ -0,0 +1,455 @@
+import { type JSX, useEffect, useRef, useState } from "react";
+import {
+  ACESFilmicToneMapping,
+  AmbientLight,
+  type BufferGeometry,
+  CircleGeometry,
+  Color,
+  CylinderGeometry,
+  DirectionalLight,
+  Group,
+  HemisphereLight,
+  type Material,
+  Mesh,
+  MeshBasicMaterial,
+  MeshPhysicalMaterial,
+  type Object3D,
+  OrthographicCamera,
+  PointLight,
+  Scene,
+  SphereGeometry,
+  SRGBColorSpace,
+  Vector3,
+  WebGLRenderer,
+} from "three";
+import { CrabLogo } from "../ui/crab-logo";
+import type { InspectorPetMood } from "./inspectorPetLogic";
+
+type InspectorPetCrab3DProps = {
+  mood: InspectorPetMood;
+  moving: boolean;
+  reduceMotion: boolean;
+};
+
+type AnimatedLeg = {
+  group: Group;
+  phase: number;
+  side: number;
+};
+
+type AnimatedEye = {
+  group: Group;
+  phase: number;
+  pupil: Mesh;
+  pupilRest: Vector3;
+};
+
+type AnimatedPincer = {
+  direction: number;
+  mesh: Mesh;
+  restRotationZ: number;
+  restY: number;
+};
+
+type AnimatedClaw = {
+  group: Group;
+  pincers: AnimatedPincer[];
+  scale: number;
+};
+
+type CrabSceneParts = {
+  bodyMaterial: MeshPhysicalMaterial;
+  dominantClaw: AnimatedClaw;
+  eyes: AnimatedEye[];
+  legs: AnimatedLeg[];
+  rimLight: PointLight;
+  root: Group;
+};
+
+function createRod(
+  start: Vector3,
+  end: Vector3,
+  radius: number,
+  material: MeshPhysicalMaterial,
+): Mesh {
+  const direction = end.clone().sub(start);
+  const length = direction.length();
+  const rod = new Mesh(new CylinderGeometry(radius, radius * 0.9, length, 12), material);
+  rod.position.copy(start.clone().add(end).multiplyScalar(0.5));
+  rod.quaternion.setFromUnitVectors(new Vector3(0, 1, 0), direction.normalize());
+  return rod;
+}
+
+function addClaw(
+  root: Group,
+  side: number,
+  shellMaterial: MeshPhysicalMaterial,
+  accentMaterial: MeshPhysicalMaterial,
+): AnimatedClaw {
+  const clawScale = side < 0 ? 1.5 : 0.68;
+  const clawGroup = new Group();
+  const pincers: AnimatedPincer[] = [];
+  root.add(clawGroup);
+
+  const shoulder = new Vector3(side * 1.2, 0.25, -0.05);
+  const wrist = new Vector3(side * (1.65 + clawScale * 0.18), 0.5, 0);
+  const arm = createRod(shoulder, wrist, 0.16 * clawScale, accentMaterial);
+  clawGroup.add(arm);
+
+  const palm = new Mesh(new SphereGeometry(0.55, 24, 16), shellMaterial);
+  palm.position.set(side * (1.95 + clawScale * 0.16), 0.62, 0.05);
+  palm.scale.set(1.05 * clawScale, 0.72 * clawScale, 0.55 * clawScale);
+  clawGroup.add(palm);
+
+  for (const pincerDirection of [-1, 1]) {
+    const pincer = new Mesh(new SphereGeometry(0.36, 20, 14), accentMaterial);
+    pincer.position.set(
+      side * (2.22 + clawScale * 0.26),
+      0.62 + pincerDirection * 0.24 * clawScale,
+      0.08,
+    );
+    pincer.scale.set(1.05 * clawScale, 0.34 * clawScale, 0.42 * clawScale);
+    pincer.rotation.z = pincerDirection * side * 0.42;
+    clawGroup.add(pincer);
+    pincers.push({
+      direction: pincerDirection,
+      mesh: pincer,
+      restRotationZ: pincer.rotation.z,
+      restY: pincer.position.y,
+    });
+  }
+
+  return { group: clawGroup, pincers, scale: clawScale };
+}
+
+function pinchPulse(cycleTime: number, start: number, duration: number): number {
+  const progress = (cycleTime - start) / duration;
+  if (progress <= 0 || progress >= 1) return 0;
+  return Math.sin(progress * Math.PI);
+}
+
+function dominantClawGrip(elapsed: number): number {
+  const cycleTime = elapsed % 6.8;
+  return Math.max(pinchPulse(cycleTime, 0.72, 0.82), pinchPulse(cycleTime, 1.72, 0.68));
+}
+
+function addEyes(
+  root: Group,
+  shellMaterial: MeshPhysicalMaterial,
+  eyeMaterial: MeshPhysicalMaterial,
+): AnimatedEye[] {
+  const eyes: AnimatedEye[] = [];
+  for (const side of [-1, 1]) {
+    const stalkStart = new Vector3(side * 0.48, 0.68, 0.05);
+    const stalkEnd = new Vector3(side * 0.1, 0.82, 0.07);
+    const eyeGroup = new Group();
+    eyeGroup.position.copy(stalkStart);
+    eyeGroup.add(createRod(new Vector3(0, 0, 0), stalkEnd, 0.1, shellMaterial));
+
+    const eye = new Mesh(new SphereGeometry(0.24, 20, 16), eyeMaterial);
+    eye.position.copy(stalkEnd);
+    eye.scale.set(1, 1, 0.85);
+    eyeGroup.add(eye);
+
+    const pupil = new Mesh(
+      new SphereGeometry(0.105, 16, 12),
+      new MeshPhysicalMaterial({ color: 0x111827, roughness: 0.25 }),
+    );
+    const pupilRest = new Vector3(stalkEnd.x, stalkEnd.y, stalkEnd.z + 0.2);
+    pupil.position.copy(pupilRest);
+    eyeGroup.add(pupil);
+    root.add(eyeGroup);
+    eyes.push({
+      group: eyeGroup,
+      phase: side < 0 ? 0 : Math.PI / 3,
+      pupil,
+      pupilRest,
+    });
+  }
+  return eyes;
+}
+
+function addLegs(root: Group, legMaterial: MeshPhysicalMaterial): AnimatedLeg[] {
+  const legs: AnimatedLeg[] = [];
+  for (const side of [-1, 1]) {
+    for (let index = 0; index < 4; index += 1) {
+      const leg = new Group();
+      const baseY = -0.3 - index * 0.22;
+      leg.position.set(side * (0.8 + index * 0.12), baseY, -0.18);
+      leg.add(
+        createRod(
+          new Vector3(0, 0, 0),
+          new Vector3(side * (0.62 + index * 0.06), -0.34, 0),
+          0.095,
+          legMaterial,
+        ),
+      );
+      leg.add(
+        createRod(
+          new Vector3(side * (0.58 + index * 0.06), -0.31, 0),
+          new Vector3(side * (1.02 + index * 0.08), -0.88 + index * 0.07, 0.04),
+          0.075,
+          legMaterial,
+        ),
+      );
+      root.add(leg);
+      legs.push({ group: leg, phase: index * Math.PI + (side > 0 ? Math.PI / 2 : 0), side });
+    }
+  }
+  return legs;
+}
+
+function createCrabScene(scene: Scene): CrabSceneParts {
+  const shellMaterial = new MeshPhysicalMaterial({
+    color: 0xf59e0b,
+    roughness: 0.34,
+    metalness: 0.04,
+    clearcoat: 0.78,
+    clearcoatRoughness: 0.18,
+    emissive: new Color(0x000000),
+    emissiveIntensity: 0,
+  });
+  const accentMaterial = new MeshPhysicalMaterial({
+    color: 0xfb923c,
+    roughness: 0.42,
+    metalness: 0.02,
+    clearcoat: 0.52,
+    clearcoatRoughness: 0.28,
+  });
+  const legMaterial = new MeshPhysicalMaterial({
+    color: 0xd97706,
+    roughness: 0.48,
+    clearcoat: 0.35,
+    clearcoatRoughness: 0.35,
+  });
+  const eyeMaterial = new MeshPhysicalMaterial({
+    color: 0xfffbeb,
+    roughness: 0.22,
+    clearcoat: 0.8,
+    clearcoatRoughness: 0.12,
+  });
+
+  const root = new Group();
+  root.rotation.x = -0.12;
+  root.rotation.y = -0.08;
+  root.scale.setScalar(1.08);
+  scene.add(root);
+
+  const shadow = new Mesh(
+    new CircleGeometry(1.65, 40),
+    new MeshBasicMaterial({ color: 0x111827, transparent: true, opacity: 0.16, depthWrite: false }),
+  );
+  shadow.position.set(0, -1.33, -0.65);
+  shadow.scale.set(1.4, 0.34, 1);
+  root.add(shadow);
+
+  const body = new Mesh(new SphereGeometry(1, 36, 24), shellMaterial);
+  body.position.set(0, 0.02, 0);
+  body.scale.set(1.58, 0.92, 0.68);
+  root.add(body);
+
+  const lowerShell = new Mesh(new SphereGeometry(0.92, 28, 20), accentMaterial);
+  lowerShell.position.set(0, -0.48, 0.22);
+  lowerShell.scale.set(1.28, 0.42, 0.56);
+  root.add(lowerShell);
+
+  const dominantClaw = addClaw(root, -1, shellMaterial, accentMaterial);
+  addClaw(root, 1, shellMaterial, accentMaterial);
+  const eyes = addEyes(root, shellMaterial, eyeMaterial);
+  const legs = addLegs(root, legMaterial);
+
+  scene.add(new AmbientLight(0xfff7ed, 1.65));
+  scene.add(new HemisphereLight(0xfff7ed, 0x172033, 2.15));
+  const keyLight = new DirectionalLight(0xffffff, 3.6);
+  keyLight.position.set(3.5, 4.5, 6);
+  scene.add(keyLight);
+  const fillLight = new DirectionalLight(0xfbbf24, 1.35);
+  fillLight.position.set(-4, 1.5, 4);
+  scene.add(fillLight);
+  const rimLight = new PointLight(0xf59e0b, 1.8, 12, 2);
+  rimLight.position.set(0, 1.8, 4.5);
+  scene.add(rimLight);
+
+  return { bodyMaterial: shellMaterial, dominantClaw, eyes, legs, rimLight, root };
+}
+
+function moodColor(mood: InspectorPetMood): number {
+  switch (mood) {
+    case "active":
+      return 0x22d3ee;
+    case "attention":
+      return 0xef4444;
+    case "idle":
+      return 0xf59e0b;
+    case "sleeping":
+      return 0x94a3b8;
+  }
+}
+
+function isDisposableMesh(object: Object3D): object is Mesh<BufferGeometry, Material | Material[]> {
+  return object instanceof Mesh;
+}
+
+function disposeScene(scene: Scene): void {
+  const materials = new Set<Material>();
+  scene.traverse((object: Object3D) => {
+    if (!isDisposableMesh(object)) return;
+    object.geometry.dispose();
+    const material = object.material;
+    if (Array.isArray(material)) {
+      for (const item of material) materials.add(item);
+      return;
+    }
+    materials.add(material);
+  });
+  for (const material of materials) material.dispose();
+}
+
+export function InspectorPetCrab3D({
+  mood,
+  moving,
+  reduceMotion,
+}: InspectorPetCrab3DProps): JSX.Element {
+  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+  const moodRef = useRef(mood);
+  const movingRef = useRef(moving);
+  const reduceMotionRef = useRef(reduceMotion);
+  const [renderFailed, setRenderFailed] = useState(false);
+
+  useEffect(() => {
+    moodRef.current = mood;
+  }, [mood]);
+
+  useEffect(() => {
+    movingRef.current = moving;
+  }, [moving]);
+
+  useEffect(() => {
+    reduceMotionRef.current = reduceMotion;
+  }, [reduceMotion]);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (canvas === null) return undefined;
+
+    let renderer: WebGLRenderer;
+    try {
+      renderer = new WebGLRenderer({
+        alpha: true,
+        antialias: true,
+        canvas,
+        powerPreference: "low-power",
+        preserveDrawingBuffer: true,
+      });
+    } catch {
+      setRenderFailed(true);
+      return undefined;
+    }
+
+    renderer.setClearColor(0x000000, 0);
+    renderer.outputColorSpace = SRGBColorSpace;
+    renderer.toneMapping = ACESFilmicToneMapping;
+    renderer.toneMappingExposure = 1.18;
+
+    const scene = new Scene();
+    const camera = new OrthographicCamera(-3.65, 3.65, 3.65, -3.65, 0.1, 20);
+    camera.position.set(0, 0.05, 8);
+    camera.lookAt(0, 0, 0);
+    const parts = createCrabScene(scene);
+    const startedAt = window.performance.now();
+    let lastFrameAt = 0;
+
+    const renderFrame = (timestamp: number): void => {
+      if (timestamp - lastFrameAt < 32) return;
+      lastFrameAt = timestamp;
+      const elapsed = (timestamp - startedAt) / 1000;
+      const motionAllowed = !reduceMotionRef.current;
+      const gait = movingRef.current ? 1 : moodRef.current === "active" ? 0.42 : 0;
+      const idleMotion = motionAllowed ? Math.sin(elapsed * 0.85) : 0;
+      const stepMotion = motionAllowed ? Math.sin(elapsed * 3.4) : 0;
+      const clawGrip = motionAllowed ? dominantClawGrip(elapsed) : 0;
+
+      parts.root.position.y = idleMotion * 0.035 + Math.abs(stepMotion) * 0.055 * gait;
+      parts.root.rotation.y = -0.08 + idleMotion * 0.055;
+      parts.root.rotation.z = stepMotion * 0.028 * gait;
+      parts.dominantClaw.group.rotation.z = -clawGrip * 0.035;
+      for (const pincer of parts.dominantClaw.pincers) {
+        pincer.mesh.position.y =
+          pincer.restY - pincer.direction * parts.dominantClaw.scale * 0.16 * clawGrip;
+        pincer.mesh.rotation.z = pincer.restRotationZ * (1 - clawGrip * 0.72);
+      }
+      for (const leg of parts.legs) {
+        leg.group.rotation.z =
+          motionAllowed && gait > 0
+            ? Math.sin(elapsed * 4.25 + leg.phase) * 0.2 * leg.side * gait
+            : 0;
+        leg.group.rotation.x = motionAllowed && gait > 0 ? stepMotion * 0.045 * gait : 0;
+      }
+      for (const eye of parts.eyes) {
+        const gaze = motionAllowed ? Math.sin(elapsed * 0.72 + eye.phase) : 0;
+        const lift = motionAllowed ? Math.cos(elapsed * 0.9 + eye.phase) : 0;
+        eye.group.rotation.z = gaze * 0.075;
+        eye.group.rotation.x = lift * 0.025;
+        eye.pupil.position.set(
+          eye.pupilRest.x + gaze * 0.055,
+          eye.pupilRest.y + lift * 0.025,
+          eye.pupilRest.z,
+        );
+      }
+
+      const color = moodColor(moodRef.current);
+      parts.rimLight.color.setHex(color);
+      parts.rimLight.intensity = moodRef.current === "attention" ? 3.2 : 1.8;
+      parts.bodyMaterial.emissive.setHex(color);
+      parts.bodyMaterial.emissiveIntensity = moodRef.current === "active" ? 0.12 : 0.035;
+      renderer.render(scene, camera);
+    };
+
+    const resize = (): void => {
+      const width = Math.max(canvas.clientWidth, 1);
+      const height = Math.max(canvas.clientHeight, 1);
+      renderer.setDrawingBufferSize(width, height, Math.min(window.devicePixelRatio, 2));
+      renderer.render(scene, camera);
+    };
+    const resizeObserver =
+      typeof ResizeObserver === "undefined" ? null : new ResizeObserver(resize);
+    if (resizeObserver === null) {
+      window.addEventListener("resize", resize);
+    } else {
+      resizeObserver.observe(canvas);
+    }
+    resize();
+
+    const handleContextLost = (event: Event): void => {
+      event.preventDefault();
+      setRenderFailed(true);
+    };
+    canvas.addEventListener("webglcontextlost", handleContextLost);
+    renderer.setAnimationLoop(renderFrame);
+
+    return () => {
+      renderer.setAnimationLoop(null);
+      if (resizeObserver === null) {
+        window.removeEventListener("resize", resize);
+      } else {
+        resizeObserver.disconnect();
+      }
+      canvas.removeEventListener("webglcontextlost", handleContextLost);
+      disposeScene(scene);
+      renderer.dispose();
+    };
+  }, []);
+
+  return (
+    <span className="relative flex size-24 items-center justify-center" aria-hidden="true">
+      <canvas
+        ref={canvasRef}
+        className={renderFailed ? "hidden" : "block size-full bg-transparent"}
+        data-inspector-pet-canvas="true"
+      />
+      {renderFailed && (
+        <CrabLogo className="size-22 text-amber-500 drop-shadow-[0_0_18px_rgba(245,158,11,0.28)]" />
+      )}
+    </span>
+  );
+}

package/src/components/inspector-pet/inspectorPetLogic.ts

@@ -21,11 +21,11 @@ export type InspectorPetStatus = {
   capturedCount: number;
 };
 
-export const INSPECTOR_PET_SIZE = 56;
+export const INSPECTOR_PET_SIZE = 112;
 export const INSPECTOR_PET_MARGIN = 14;
-export const INSPECTOR_PET_EDGE_PEEK = 18;
-export const INSPECTOR_PET_MIN_STEP = 72;
-export const INSPECTOR_PET_MAX_STEP = 156;
+export const INSPECTOR_PET_EDGE_GAP = 20;
+export const INSPECTOR_PET_MIN_STEP = 36;
+export const INSPECTOR_PET_MAX_STEP = 92;
 export const INSPECTOR_PET_SLEEP_AFTER_MS = 45_000;
 
 const INSPECTOR_PET_PANEL_WIDTH = 192;
@@ -47,29 +47,23 @@ function clampUnit(value: number): number {
 }
 
 function maximumPetX(viewport: InspectorPetViewport): number {
-  const edgePeek = scaledMetric(INSPECTOR_PET_EDGE_PEEK, viewport);
-  return Math.max(
-    -edgePeek,
-    viewport.width - scaledMetric(INSPECTOR_PET_SIZE, viewport) + edgePeek,
-  );
+  const edgeGap = scaledMetric(INSPECTOR_PET_EDGE_GAP, viewport);
+  return Math.max(edgeGap, viewport.width - scaledMetric(INSPECTOR_PET_SIZE, viewport) - edgeGap);
 }
 
 function maximumPetY(viewport: InspectorPetViewport): number {
-  const edgePeek = scaledMetric(INSPECTOR_PET_EDGE_PEEK, viewport);
-  return Math.max(
-    -edgePeek,
-    viewport.height - scaledMetric(INSPECTOR_PET_SIZE, viewport) + edgePeek,
-  );
+  const edgeGap = scaledMetric(INSPECTOR_PET_EDGE_GAP, viewport);
+  return Math.max(edgeGap, viewport.height - scaledMetric(INSPECTOR_PET_SIZE, viewport) - edgeGap);
 }
 
 export function clampInspectorPetPosition(
   position: InspectorPetPosition,
   viewport: InspectorPetViewport,
 ): InspectorPetPosition {
-  const edgePeek = scaledMetric(INSPECTOR_PET_EDGE_PEEK, viewport);
+  const edgeGap = scaledMetric(INSPECTOR_PET_EDGE_GAP, viewport);
   return {
-    x: Math.min(Math.max(position.x, -edgePeek), maximumPetX(viewport)),
-    y: Math.min(Math.max(position.y, -edgePeek), maximumPetY(viewport)),
+    x: Math.min(Math.max(position.x, edgeGap), maximumPetX(viewport)),
+    y: Math.min(Math.max(position.y, edgeGap), maximumPetY(viewport)),
   };
 }
 
@@ -78,11 +72,11 @@ export function nearestInspectorPetEdge(
   viewport: InspectorPetViewport,
 ): InspectorPetEdge {
   const clamped = clampInspectorPetPosition(position, viewport);
-  const edgePeek = scaledMetric(INSPECTOR_PET_EDGE_PEEK, viewport);
+  const edgeGap = scaledMetric(INSPECTOR_PET_EDGE_GAP, viewport);
   const distances: { edge: InspectorPetEdge; distance: number }[] = [
-    { edge: "left", distance: clamped.x + edgePeek },
+    { edge: "left", distance: clamped.x - edgeGap },
     { edge: "right", distance: maximumPetX(viewport) - clamped.x },
-    { edge: "top", distance: clamped.y + INSPECTOR_PET_EDGE_PEEK },
+    { edge: "top", distance: clamped.y - edgeGap },
     { edge: "bottom", distance: maximumPetY(viewport) - clamped.y },
   ];
   return distances.reduce((best, current) => (current.distance < best.distance ? current : best))
@@ -95,15 +89,15 @@ export function snapInspectorPetToEdge(
 ): InspectorPetPosition {
   const clamped = clampInspectorPetPosition(position, viewport);
   const edge = nearestInspectorPetEdge(clamped, viewport);
-  const edgePeek = scaledMetric(INSPECTOR_PET_EDGE_PEEK, viewport);
+  const edgeGap = scaledMetric(INSPECTOR_PET_EDGE_GAP, viewport);
 
   switch (edge) {
     case "left":
-      return { x: -edgePeek, y: clamped.y };
+      return { x: edgeGap, y: clamped.y };
     case "right":
       return { x: maximumPetX(viewport), y: clamped.y };
     case "top":
-      return { x: clamped.x, y: -edgePeek };
+      return { x: clamped.x, y: edgeGap };
     case "bottom":
       return { x: clamped.x, y: maximumPetY(viewport) };
   }
@@ -111,24 +105,15 @@ export function snapInspectorPetToEdge(
 
 export function randomInspectorPetEdgePosition(
   viewport: InspectorPetViewport,
-  edgeSample: number,
-  ySample: number,
+  positionSample: number,
 ): InspectorPetPosition {
   const maxX = maximumPetX(viewport);
   const maxY = maximumPetY(viewport);
-  const edgePeek = scaledMetric(INSPECTOR_PET_EDGE_PEEK, viewport);
-  const minimumSafeY = Math.min(scaledMetric(INSPECTOR_PET_VERTICAL_SAFE_MARGIN, viewport), maxY);
-  const randomY = minimumSafeY + clampUnit(ySample) * (maxY - minimumSafeY);
-  const edgeIndex = Math.min(1, Math.floor(clampUnit(edgeSample) * 2));
-
-  switch (edgeIndex) {
-    case 0:
-      return { x: -edgePeek, y: randomY };
-    case 1:
-      return { x: maxX, y: randomY };
-    default:
-      return { x: maxX, y: maxY };
-  }
+  const edgeGap = scaledMetric(INSPECTOR_PET_EDGE_GAP, viewport);
+  return {
+    x: edgeGap + clampUnit(positionSample) * (maxX - edgeGap),
+    y: maxY,
+  };
 }
 
 export function nextInspectorPetWalkingPosition(
@@ -145,13 +130,13 @@ export function nextInspectorPetWalkingPosition(
   const edge = nearestInspectorPetEdge(clamped, viewport);
   const maxX = maximumPetX(viewport);
   const maxY = maximumPetY(viewport);
-  const edgePeek = scaledMetric(INSPECTOR_PET_EDGE_PEEK, viewport);
+  const edgeGap = scaledMetric(INSPECTOR_PET_EDGE_GAP, viewport);
   const minimumSafeY = Math.min(scaledMetric(INSPECTOR_PET_VERTICAL_SAFE_MARGIN, viewport), maxY);
 
   switch (edge) {
     case "left":
       return {
-        x: -edgePeek,
+        x: edgeGap,
         y: Math.min(Math.max(clamped.y + step * direction, minimumSafeY), maxY),
       };
     case "right":
@@ -161,12 +146,12 @@ export function nextInspectorPetWalkingPosition(
       };
     case "top":
       return {
-        x: Math.min(Math.max(clamped.x + step * direction, -edgePeek), maxX),
-        y: -edgePeek,
+        x: Math.min(Math.max(clamped.x + step * direction, edgeGap), maxX),
+        y: edgeGap,
       };
     case "bottom":
       return {
-        x: Math.min(Math.max(clamped.x + step * direction, -edgePeek), maxX),
+        x: Math.min(Math.max(clamped.x + step * direction, edgeGap), maxX),
         y: maxY,
       };
   }