@tonyclaw/agent-inspector 3.0.24 → 3.0.25

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

@@ -0,0 +1,273 @@
+import type { CapturedLog } from "../../contracts";
+
+export type InspectorPetPosition = {
+  x: number;
+  y: number;
+};
+
+export type InspectorPetViewport = {
+  width: number;
+  height: number;
+  scale?: number;
+};
+
+export type InspectorPetEdge = "left" | "right" | "top" | "bottom";
+export type InspectorPetMood = "active" | "attention" | "idle" | "sleeping";
+
+export type InspectorPetStatus = {
+  mood: InspectorPetMood;
+  label: string;
+  pendingCount: number;
+  capturedCount: number;
+};
+
+export const INSPECTOR_PET_SIZE = 56;
+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_SLEEP_AFTER_MS = 45_000;
+
+const INSPECTOR_PET_PANEL_WIDTH = 192;
+const INSPECTOR_PET_PANEL_HEIGHT = 68;
+const INSPECTOR_PET_PANEL_GAP = 10;
+const INSPECTOR_PET_VERTICAL_SAFE_MARGIN = 78;
+
+function viewportScale(viewport: InspectorPetViewport): number {
+  const scale = viewport.scale ?? 1;
+  return Number.isFinite(scale) && scale > 0 ? scale : 1;
+}
+
+function scaledMetric(value: number, viewport: InspectorPetViewport): number {
+  return value * viewportScale(viewport);
+}
+
+function clampUnit(value: number): number {
+  return Math.min(Math.max(value, 0), 1);
+}
+
+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,
+  );
+}
+
+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,
+  );
+}
+
+export function clampInspectorPetPosition(
+  position: InspectorPetPosition,
+  viewport: InspectorPetViewport,
+): InspectorPetPosition {
+  const edgePeek = scaledMetric(INSPECTOR_PET_EDGE_PEEK, viewport);
+  return {
+    x: Math.min(Math.max(position.x, -edgePeek), maximumPetX(viewport)),
+    y: Math.min(Math.max(position.y, -edgePeek), maximumPetY(viewport)),
+  };
+}
+
+export function nearestInspectorPetEdge(
+  position: InspectorPetPosition,
+  viewport: InspectorPetViewport,
+): InspectorPetEdge {
+  const clamped = clampInspectorPetPosition(position, viewport);
+  const edgePeek = scaledMetric(INSPECTOR_PET_EDGE_PEEK, viewport);
+  const distances: { edge: InspectorPetEdge; distance: number }[] = [
+    { edge: "left", distance: clamped.x + edgePeek },
+    { edge: "right", distance: maximumPetX(viewport) - clamped.x },
+    { edge: "top", distance: clamped.y + INSPECTOR_PET_EDGE_PEEK },
+    { edge: "bottom", distance: maximumPetY(viewport) - clamped.y },
+  ];
+  return distances.reduce((best, current) => (current.distance < best.distance ? current : best))
+    .edge;
+}
+
+export function snapInspectorPetToEdge(
+  position: InspectorPetPosition,
+  viewport: InspectorPetViewport,
+): InspectorPetPosition {
+  const clamped = clampInspectorPetPosition(position, viewport);
+  const edge = nearestInspectorPetEdge(clamped, viewport);
+  const edgePeek = scaledMetric(INSPECTOR_PET_EDGE_PEEK, viewport);
+
+  switch (edge) {
+    case "left":
+      return { x: -edgePeek, y: clamped.y };
+    case "right":
+      return { x: maximumPetX(viewport), y: clamped.y };
+    case "top":
+      return { x: clamped.x, y: -edgePeek };
+    case "bottom":
+      return { x: clamped.x, y: maximumPetY(viewport) };
+  }
+}
+
+export function randomInspectorPetEdgePosition(
+  viewport: InspectorPetViewport,
+  edgeSample: number,
+  ySample: 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 };
+  }
+}
+
+export function nextInspectorPetWalkingPosition(
+  position: InspectorPetPosition,
+  viewport: InspectorPetViewport,
+  stepSample: number,
+  directionSample: number,
+): InspectorPetPosition {
+  const clamped = snapInspectorPetToEdge(position, viewport);
+  const step =
+    scaledMetric(INSPECTOR_PET_MIN_STEP, viewport) +
+    clampUnit(stepSample) * scaledMetric(INSPECTOR_PET_MAX_STEP - INSPECTOR_PET_MIN_STEP, viewport);
+  const direction = directionSample >= 0.5 ? 1 : -1;
+  const edge = nearestInspectorPetEdge(clamped, viewport);
+  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);
+
+  switch (edge) {
+    case "left":
+      return {
+        x: -edgePeek,
+        y: Math.min(Math.max(clamped.y + step * direction, minimumSafeY), maxY),
+      };
+    case "right":
+      return {
+        x: maxX,
+        y: Math.min(Math.max(clamped.y + step * direction, minimumSafeY), maxY),
+      };
+    case "top":
+      return {
+        x: Math.min(Math.max(clamped.x + step * direction, -edgePeek), maxX),
+        y: -edgePeek,
+      };
+    case "bottom":
+      return {
+        x: Math.min(Math.max(clamped.x + step * direction, -edgePeek), maxX),
+        y: maxY,
+      };
+  }
+}
+
+export function inspectorPetPanelPosition(
+  position: InspectorPetPosition,
+  viewport: InspectorPetViewport,
+): InspectorPetPosition {
+  const edge = nearestInspectorPetEdge(position, viewport);
+  const petSize = scaledMetric(INSPECTOR_PET_SIZE, viewport);
+  const panelWidth = scaledMetric(INSPECTOR_PET_PANEL_WIDTH, viewport);
+  const panelHeight = scaledMetric(INSPECTOR_PET_PANEL_HEIGHT, viewport);
+  const panelGap = scaledMetric(INSPECTOR_PET_PANEL_GAP, viewport);
+  const margin = scaledMetric(INSPECTOR_PET_MARGIN, viewport);
+  let x = position.x + petSize / 2 - panelWidth / 2;
+  let y = position.y + petSize / 2 - panelHeight / 2;
+
+  switch (edge) {
+    case "left":
+      x = position.x + petSize + panelGap;
+      break;
+    case "right":
+      x = position.x - panelWidth - panelGap;
+      break;
+    case "top":
+      y = position.y + petSize + panelGap;
+      break;
+    case "bottom":
+      y = position.y - panelHeight - panelGap;
+      break;
+  }
+
+  return {
+    x: Math.min(Math.max(x, margin), Math.max(margin, viewport.width - panelWidth - margin)),
+    y: Math.min(Math.max(y, margin), Math.max(margin, viewport.height - panelHeight - margin)),
+  };
+}
+
+function latestCapturedLog(logs: readonly CapturedLog[]): CapturedLog | null {
+  let latest: CapturedLog | null = null;
+  for (const log of logs) {
+    if (latest === null || log.id > latest.id) latest = log;
+  }
+  return latest;
+}
+
+function logNeedsAttention(log: CapturedLog): boolean {
+  const hasHttpError = log.responseStatus !== null && log.responseStatus >= 400;
+  const hasStreamError = log.error !== null && log.error !== undefined && log.error !== "";
+  return hasHttpError || hasStreamError;
+}
+
+export function resolveInspectorPetStatus(
+  logs: readonly CapturedLog[],
+  nowMs: number,
+): InspectorPetStatus {
+  const pendingCount = logs.filter((log) => log.responseStatus === null).length;
+  const capturedCount = logs.length;
+  if (pendingCount > 0) {
+    return {
+      mood: "active",
+      label: `${String(pendingCount)} request${pendingCount === 1 ? "" : "s"} in flight`,
+      pendingCount,
+      capturedCount,
+    };
+  }
+
+  const latest = latestCapturedLog(logs);
+  if (latest !== null && logNeedsAttention(latest)) {
+    return {
+      mood: "attention",
+      label: "Latest request needs attention",
+      pendingCount,
+      capturedCount,
+    };
+  }
+
+  if (latest === null) {
+    return {
+      mood: "idle",
+      label: "Waiting for traffic",
+      pendingCount,
+      capturedCount,
+    };
+  }
+
+  const latestTimestamp = Date.parse(latest.timestamp);
+  if (Number.isFinite(latestTimestamp) && nowMs - latestTimestamp >= INSPECTOR_PET_SLEEP_AFTER_MS) {
+    return {
+      mood: "sleeping",
+      label: "All quiet",
+      pendingCount,
+      capturedCount,
+    };
+  }
+
+  return {
+    mood: "idle",
+    label: "Watching the session",
+    pendingCount,
+    capturedCount,
+  };
+}

package/styles/globals.css

@@ -250,12 +250,80 @@
   }
 }
 
+@keyframes inspector-pet-watch {
+  0%,
+  100% {
+    filter: brightness(1);
+  }
+  50% {
+    filter: brightness(1.16) drop-shadow(0 0 8px rgb(34 211 238 / 0.22));
+  }
+}
+
+@keyframes inspector-pet-attention {
+  0%,
+  82%,
+  100% {
+    transform: rotate(0deg);
+  }
+  88% {
+    transform: rotate(-4deg);
+  }
+  94% {
+    transform: rotate(4deg);
+  }
+}
+
+@keyframes inspector-pet-sleep {
+  0%,
+  100% {
+    opacity: 0.72;
+    transform: translateY(0) scale(0.98);
+  }
+  50% {
+    opacity: 0.9;
+    transform: translateY(1px) scale(1);
+  }
+}
+
+@keyframes inspector-pet-pat {
+  0%,
+  100% {
+    transform: translateY(0) rotate(0deg) scale(1);
+  }
+  45% {
+    transform: translateY(-5px) rotate(4deg) scale(1.08);
+  }
+  72% {
+    transform: translateY(1px) rotate(-2deg) scale(1.02);
+  }
+}
+
+@keyframes inspector-pet-heart {
+  0% {
+    opacity: 0;
+    transform: translateY(3px) scale(0.65);
+  }
+  35% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(-11px) scale(1.05);
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .animate-crab-piano-pop {
     animation: none !important;
   }
   .floating-crab-body,
-  .floating-crab-leg {
+  .floating-crab-leg,
+  .inspector-pet-active,
+  .inspector-pet-attention,
+  .inspector-pet-sleeping,
+  .inspector-pet-patted,
+  .inspector-pet-heart {
     animation: none !important;
   }
 }
@@ -331,6 +399,35 @@
     --crab-leg-step: -14deg;
   }
 
+  .inspector-pet-active {
+    animation: inspector-pet-watch 1.25s ease-in-out infinite;
+  }
+
+  .inspector-pet-attention {
+    animation: inspector-pet-attention 2.4s ease-in-out infinite;
+  }
+
+  .inspector-pet-sleeping {
+    animation: inspector-pet-sleep 3.6s ease-in-out infinite;
+  }
+
+  .inspector-pet-patted {
+    animation: inspector-pet-pat 720ms cubic-bezier(0.34, 1.56, 0.64, 1);
+  }
+
+  .inspector-pet-heart {
+    animation: inspector-pet-heart 720ms ease-out forwards;
+  }
+
+  [data-pet-mood="active"] .floating-crab-leg {
+    animation-duration: 260ms;
+  }
+
+  [data-pet-mood="sleeping"] .floating-crab-leg {
+    animation-duration: 1.8s;
+    opacity: 0.3;
+  }
+
   .inspector-scrollbar {
     scrollbar-color: color-mix(in srgb, var(--muted-foreground) 32%, transparent) transparent;
     scrollbar-width: thin;