fix(webapp): address review feedback on agent storybook

Clamp animation speed so a non-positive value cannot spin the step loop. Cancel a pending return-to-rest when thinking is re-enabled mid-settle. Mark in-button logos decorative so they do not pollute the button accessible name. Size the scratch canvas used for logo hit-testing.

Author: samejr

apps/webapp/app/routes/storybook.ai-agent/AgentDotMatrix.tsx

@@ -245,6 +245,11 @@ export type AgentDotMatrixProps = {
   gridAtRest?: boolean;
   /** Animation speed multiplier. */
   speed?: number;
+  /**
+   * Render as a decorative glyph (aria-hidden, no role) — use when the logo
+   * sits beside a text label that already names the control.
+   */
+  decorative?: boolean;
   className?: string;
   style?: CSSProperties;
   "aria-label"?: string;
@@ -267,6 +272,7 @@ export function AgentDotMatrix({
   gridOpacity = 0.18,
   gridAtRest = false,
   speed = 1,
+  decorative = false,
   className,
   style,
   "aria-label": ariaLabel,
@@ -311,8 +317,11 @@ export function AgentDotMatrix({
 
     const pitch = size / MATRIX;
     const dotR = Math.max(0.75, pitch * 0.3);
-    const stepMs = STEP_MS / speed;
-    const blendMs = BLEND_MS / speed;
+    // Clamp: a zero or negative speed would make stepMs non-positive and spin
+    // the step loop forever.
+    const safeSpeed = Math.max(0.01, speed);
+    const stepMs = STEP_MS / safeSpeed;
+    const blendMs = BLEND_MS / safeSpeed;
     // White ink at low opacity reads as subtle grey on any dark background;
     // light mode flips to black ink.
     const gridRgb: Rgb = mode === "light" ? [0, 0, 0] : [255, 255, 255];
@@ -496,8 +505,16 @@ export function AgentDotMatrix({
 
       if (!activeRef.current) {
         seeking = "rest";
-      } else if (seeking !== "next" && stepsInShape >= cyclesPerShape * route.length) {
-        seeking = "next";
+      } else {
+        if (seeking === "rest") {
+          // Re-activated mid-settle: cancel the pending return to rest so a
+          // quick off/on toggle carries on instead of restarting.
+          seeking = null;
+          seekSteps = 0;
+        }
+        if (seeking !== "next" && stepsInShape >= cyclesPerShape * route.length) {
+          seeking = "next";
+        }
       }
       if (!seeking) return;
 
@@ -600,8 +617,9 @@ export function AgentDotMatrix({
   return (
     <canvas
       ref={canvasRef}
-      role="img"
-      aria-label={ariaLabel ?? (active ? "Agent thinking" : "Agent")}
+      {...(decorative
+        ? { "aria-hidden": true }
+        : { role: "img", "aria-label": ariaLabel ?? (active ? "Agent thinking" : "Agent") })}
       className={className}
       style={{ width: size, height: size, display: "block", ...style }}
     />

apps/webapp/app/routes/storybook.ai-agent/AgentOrb.tsx

@@ -153,7 +153,12 @@ function logoCloud(count: number): Pt[] {
   const cached = logoCloudCache.get(count);
   if (cached) return cached;
 
-  const ctx = document.createElement("canvas").getContext("2d");
+  // Size the scratch canvas to the logo box: isPointInPath is specified against
+  // the path region, not the bitmap, but this removes any engine-specific doubt.
+  const scratch = document.createElement("canvas");
+  scratch.width = LOGO_W;
+  scratch.height = LOGO_H;
+  const ctx = scratch.getContext("2d");
   if (!ctx) return [];
   const path = new Path2D(LOGO_PATH);
   const scale = 0.9 / Math.max(LOGO_W, LOGO_H); // fit to ~0.9 box, preserve aspect

apps/webapp/app/routes/storybook.ai-agent/route.tsx

@@ -212,7 +212,13 @@ function AskOttoButton({ variant, matrixSize }: { variant: ButtonVariant; matrix
           variant === "ask-ai/small" ? "gap-x-1.5" : "gap-x-2"
         )}
       >
-        <AgentDotMatrix size={matrixSize} active={active} palette="mono" restColor="#ffffff" />
+        <AgentDotMatrix
+          size={matrixSize}
+          active={active}
+          palette="mono"
+          restColor="#ffffff"
+          decorative
+        />
         Ask Otto
       </span>
     </Button>
@@ -240,6 +246,7 @@ function FaceButton({ name }: { name: DotShapeName }) {
           restShape={name}
           palette="mono"
           restColor="#ffffff"
+          decorative
         />
         {name}
       </span>

apps/webapp/app/routes/storybook.buttons/route.tsx

@@ -406,19 +406,19 @@ export default function Story() {
           <Header3 className="mb-1 uppercase">Sizes</Header3>
           <Button variant="ask-ai/small">
             <span className="flex items-center gap-x-1.5 text-text-bright">
-              <AgentDotMatrix size={16} palette="mono" restColor="#ffffff" />
+              <AgentDotMatrix size={16} palette="mono" restColor="#ffffff" decorative />
               Ask AI
             </span>
           </Button>
           <Button variant="ask-ai/medium">
             <span className="flex items-center gap-x-2 text-text-bright">
-              <AgentDotMatrix size={16} palette="mono" restColor="#ffffff" />
+              <AgentDotMatrix size={16} palette="mono" restColor="#ffffff" decorative />
               Ask AI
             </span>
           </Button>
           <Button variant="ask-ai/large">
             <span className="flex items-center gap-x-2 text-text-bright">
-              <AgentDotMatrix size={20} palette="mono" restColor="#ffffff" />
+              <AgentDotMatrix size={20} palette="mono" restColor="#ffffff" decorative />
               Ask AI
             </span>
           </Button>
@@ -427,7 +427,7 @@ export default function Story() {
           <Header3 className="mb-1 uppercase">Disabled</Header3>
           <Button variant="ask-ai/small" disabled>
             <span className="flex items-center gap-x-1.5 text-text-bright">
-              <AgentDotMatrix size={16} palette="mono" restColor="#ffffff" />
+              <AgentDotMatrix size={16} palette="mono" restColor="#ffffff" decorative />
               Ask AI
             </span>
           </Button>