fix(webapp): the agent spinner keeps spinning across status changes

- AgentSpinner rests on the playlist's first shape, so mounting shows no
  logo-head flash — a spinner is born spinning
- the pending indicator keeps one stable element across tool changes: the
  label swaps, the animation never restarts

Author: kathiekiwi

apps/webapp/app/components/dashboard-agent/DashboardAgentMessages.tsx

@@ -179,7 +179,10 @@ function renderDashboardPart(
       // One spinner at a time: an in_progress investigation card in this turn
       // already shows its own progress pill.
       if (options?.suppressPendingPill) return null;
-      return <ChatPendingTool key={i} label={`${toolPendingLabel(type.slice(5))}…`} />;
+      // Stable key across tool changes: only the LABEL changes from call to
+      // call, so the spinner keeps spinning instead of remounting (and
+      // restarting its animation) on every new tool.
+      return <ChatPendingTool key="agent-pending" label={`${toolPendingLabel(type.slice(5))}…`} />;
     }
     if (p.state === "output-error") return renderPart(part, i);
     return null;

apps/webapp/app/components/primitives/Spinner.tsx

@@ -85,5 +85,16 @@ export function SpinnerWhite({ className }: { className?: string }) {
  * loading. `size` is the logo's pixel size (the matrix does not scale from CSS).
  */
 export function AgentSpinner({ size = 16 }: { size?: number }) {
-  return <AgentDotMatrix size={size} active palette="mono" restColor="#ffffff" decorative />;
+  return (
+    <AgentDotMatrix
+      size={size}
+      active
+      // A spinner is born spinning: resting on the playlist's first shape means
+      // the initial frame is already mid-cycle — no logo-head flash on mount.
+      restShape="square"
+      palette="mono"
+      restColor="#ffffff"
+      decorative
+    />
+  );
 }