feat(webapp): AgentSpinner — the dot-matrix mono logo animates wherever the agent works

One component in the spinner primitives; chat progress, pending tools, the
history thinking/watching markers, panel loading, chart loading and testing
hypotheses all use it, so agent activity reads as the agent rather than
generic loading.

Author: kathiekiwi

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

@@ -9,7 +9,7 @@ import { useEffect, useState } from "react";
 import { QueryResultsChart } from "~/components/code/QueryResultsChart";
 import type { ChartConfiguration } from "~/components/metrics/QueryWidget";
 import { Button } from "~/components/primitives/Buttons";
-import { Spinner } from "~/components/primitives/Spinner";
+import { AgentSpinner } from "~/components/primitives/Spinner";
 import { useOptionalEnvironment } from "~/hooks/useEnvironment";
 import { useOptionalOrganization } from "~/hooks/useOrganizations";
 import { useOptionalProject } from "~/hooks/useProject";
@@ -193,7 +193,7 @@ export function AgentChart({
       <div className={cn(AGENT_CHART_PLOT_CLASS)}>
         {state.status === "loading" ? (
           <div className="flex h-full items-center justify-center gap-2 text-xs text-text-dimmed">
-            <Spinner className="size-3" />
+            <AgentSpinner size={12} />
             Running query…
           </div>
         ) : state.status === "error" ? (

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

@@ -5,7 +5,7 @@ import { Button } from "~/components/primitives/Buttons";
 import { Dialog, DialogContent, DialogHeader } from "~/components/primitives/Dialog";
 import { FormButtons } from "~/components/primitives/FormButtons";
 import { Paragraph } from "~/components/primitives/Paragraph";
-import { Spinner } from "~/components/primitives/Spinner";
+import { AgentSpinner } from "~/components/primitives/Spinner";
 import { AgentList, AgentListRow, AgentListRowAction } from "./list-row";
 
 // Date fields arrive as strings over the loader's JSON.
@@ -44,7 +44,7 @@ function ProcessIcon({ process }: { process: ChatProcess }) {
       {process === "investigating" ? (
         <MagnifyingGlassIcon className="size-3.5" />
       ) : (
-        <Spinner className="size-3.5" />
+        <AgentSpinner size={14} />
       )}
     </span>
   );

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

@@ -2,7 +2,7 @@ import type { UIMessage } from "@ai-sdk/react";
 import { useLocation } from "@remix-run/react";
 import { generateFriendlyId } from "@trigger.dev/core/v3/isomorphic";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Spinner } from "~/components/primitives/Spinner";
+import { AgentSpinner } from "~/components/primitives/Spinner";
 import { useToast } from "~/components/primitives/Toast";
 import { useAgentPageContext } from "~/hooks/useAgentPageContext";
 import { useApiOrigin } from "~/hooks/useApiOrigin";
@@ -427,7 +427,7 @@ export function DashboardAgentPanel({
       <AgentPanelColumn fullscreen={isFullscreen}>
         {loading ? (
           <div className="flex flex-1 items-center justify-center">
-            <Spinner className="size-5" />
+            <AgentSpinner size={20} />
           </div>
         ) : active ? (
           <DashboardAgentChat

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

@@ -31,7 +31,7 @@ import type {
 import { useState } from "react";
 import { Button } from "~/components/primitives/Buttons";
 import { Callout } from "~/components/primitives/Callout";
-import { Spinner } from "~/components/primitives/Spinner";
+import { AgentSpinner } from "~/components/primitives/Spinner";
 import {
   CategoryBadge,
   ConfidenceBadge,
@@ -118,7 +118,7 @@ function HypothesisRow({
         <VerdictBadge verdict={hypothesis.verdict}>
           {VERDICT_LABELS[hypothesis.verdict]}
         </VerdictBadge>
-        {hypothesis.verdict === "testing" ? <Spinner className="size-3" /> : null}
+        {hypothesis.verdict === "testing" ? <AgentSpinner size={12} /> : null}
       </div>
       <p className="text-sm text-text-bright">{hypothesis.statement}</p>
       {hypothesis.finding ? <p className="text-xs text-text-dimmed">{hypothesis.finding}</p> : null}

apps/webapp/app/components/dashboard-agent/chat-layout.tsx

@@ -51,7 +51,7 @@
 import type { Ref } from "react";
 import { createContext, Suspense, useContext } from "react";
 import { StreamdownRenderer } from "~/components/code/StreamdownRenderer";
-import { Spinner } from "~/components/primitives/Spinner";
+import { AgentSpinner } from "~/components/primitives/Spinner";
 import { cn } from "~/utils/cn";
 
 /** The transcript's horizontal inset. Owned by `ChatTurn`. */
@@ -214,7 +214,9 @@ export function ChatProgress({ children }: { children: React.ReactNode }) {
   return (
     <div className={cn(insetClass, "flex items-start text-sm text-text-dimmed", ROW_GAP)}>
       {/* text-sm line box is 20px, the spinner 12px: 4px centres it on line one. */}
-      <Spinner className="mt-1 size-3 shrink-0" />
+      <span className="mt-1 shrink-0">
+        <AgentSpinner size={12} />
+      </span>
       {children}
     </div>
   );
@@ -236,7 +238,9 @@ export function ChatPendingTool({ label }: { label: string }) {
   // stay, while in-flight work is transient — the same register as ChatProgress.
   return (
     <div className={cn(insetClass, "flex min-w-0 items-center text-xs text-text-dimmed", CHIP_GAP)}>
-      <Spinner className="size-3 shrink-0" />
+      <span className="shrink-0">
+        <AgentSpinner size={12} />
+      </span>
       <span className="truncate">{label}</span>
     </div>
   );

apps/webapp/app/components/dashboard-agent/demo/components/DemoInvestigationCard.tsx

@@ -16,7 +16,7 @@ import type { Evidence } from "@internal/dashboard-agent-contracts";
 import { useState } from "react";
 import { Button } from "~/components/primitives/Buttons";
 import { Callout } from "~/components/primitives/Callout";
-import { Spinner } from "~/components/primitives/Spinner";
+import { AgentSpinner } from "~/components/primitives/Spinner";
 import { ChatProgress } from "../../chat-layout";
 import {
   CategoryBadge,
@@ -86,7 +86,7 @@ function HypothesisRow({ hypothesis }: { hypothesis: DemoHypothesis }) {
         <VerdictBadge verdict={hypothesis.verdict}>
           {VERDICT_LABELS[hypothesis.verdict]}
         </VerdictBadge>
-        {hypothesis.verdict === "testing" ? <Spinner className="size-3" /> : null}
+        {hypothesis.verdict === "testing" ? <AgentSpinner size={12} /> : null}
       </div>
       <p className="text-sm text-text-bright">{hypothesis.statement}</p>
       {hypothesis.finding ? <p className="text-xs text-text-dimmed">{hypothesis.finding}</p> : null}

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

@@ -1,3 +1,4 @@
+import { AgentDotMatrix } from "~/components/primitives/AgentDotMatrix";
 import { cn } from "~/utils/cn";
 
 type CustomColor = {
@@ -76,3 +77,13 @@ export function ButtonSpinner() {
 export function SpinnerWhite({ className }: { className?: string }) {
   return <Spinner className={className} color="white" />;
 }
+
+/**
+ * The dashboard agent's own spinner: the animated dot-matrix logo in the mono
+ * palette. Use it wherever the AGENT is the one working — chat progress, pending
+ * tools, thinking markers — so agent activity reads as the agent, not as generic
+ * 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 />;
+}