@tonyclaw/agent-inspector 3.0.24 → 3.0.26

package/styles/globals.css

@@ -45,8 +45,6 @@
   --animate-crab-appear: crab-appear 300ms ease-out;
   --animate-crab-settle: crab-settle 400ms ease-in-out;
   --animate-crab-piano-pop: crab-piano-pop 400ms cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
-  --animate-crab-short-leg-body: crab-short-leg-body 720ms ease-in-out infinite;
-  --animate-crab-short-leg-step: crab-short-leg-step 360ms ease-in-out infinite;
 }
 
 :root {
@@ -222,31 +220,66 @@
   }
 }
 
-@keyframes crab-short-leg-body {
+@keyframes inspector-pet-watch {
   0%,
   100% {
-    transform: translateY(0) rotate(-1deg);
-  }
-  25% {
-    transform: translateY(1px) rotate(1.5deg);
+    filter: brightness(1);
   }
   50% {
-    transform: translateY(-1px) rotate(-1.5deg);
+    filter: brightness(1.16) drop-shadow(0 0 8px rgb(34 211 238 / 0.22));
   }
-  75% {
-    transform: translateY(1px) rotate(1deg);
+}
+
+@keyframes inspector-pet-attention {
+  0%,
+  82%,
+  100% {
+    transform: rotate(0deg);
+  }
+  88% {
+    transform: rotate(-4deg);
+  }
+  94% {
+    transform: rotate(4deg);
   }
 }
 
-@keyframes crab-short-leg-step {
+@keyframes inspector-pet-sleep {
   0%,
   100% {
-    transform: translateY(0) scaleY(0.72) rotate(var(--crab-leg-rest, 0deg));
-    opacity: 0.42;
+    opacity: 0.72;
+    transform: translateY(0) scale(0.98);
   }
   50% {
-    transform: translateY(3px) scaleY(1.15) rotate(var(--crab-leg-step, 0deg));
     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);
   }
 }
 
@@ -254,8 +287,11 @@
   .animate-crab-piano-pop {
     animation: none !important;
   }
-  .floating-crab-body,
-  .floating-crab-leg {
+  .inspector-pet-active,
+  .inspector-pet-attention,
+  .inspector-pet-sleeping,
+  .inspector-pet-patted,
+  .inspector-pet-heart {
     animation: none !important;
   }
 }
@@ -311,24 +347,24 @@
     font-size: var(--inspector-font-13);
   }
 
-  .floating-crab-body {
-    animation: var(--animate-crab-short-leg-body);
-    transform-origin: 50% 74%;
+  .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;
   }
 
-  .floating-crab-leg {
-    animation: var(--animate-crab-short-leg-step);
-    transform-origin: 50% 0%;
+  .inspector-pet-sleeping {
+    animation: inspector-pet-sleep 3.6s ease-in-out infinite;
   }
 
-  .floating-crab-leg-left {
-    --crab-leg-rest: -10deg;
-    --crab-leg-step: 14deg;
+  .inspector-pet-patted {
+    animation: inspector-pet-pat 720ms cubic-bezier(0.34, 1.56, 0.64, 1);
   }
 
-  .floating-crab-leg-right {
-    --crab-leg-rest: 10deg;
-    --crab-leg-step: -14deg;
+  .inspector-pet-heart {
+    animation: inspector-pet-heart 720ms ease-out forwards;
   }
 
   .inspector-scrollbar {