fix(webapp): one live progress element per turn — the spinner never restarts

The pending tool line, the generic activity row and the investigation card's
own progress collapse into a single ChatProgress mounted once at the end of
the live turn: phases only swap its label (card phrase > tool phrase >
activity), decided in the pure progress-line module. ChatPendingTool is gone;
the card renders no spinner of its own; AgentSpinner has exactly one live
render site.

Author: kathiekiwi

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

@@ -7,31 +7,21 @@ import { Button, LinkButton } from "~/components/primitives/Buttons";
 import { Callout } from "~/components/primitives/Callout";
 import { renderPart, toSafeUrl } from "~/components/runs/v3/agent/AgentMessageView";
 import { sameOriginPath } from "./navigate-target";
-import { hasToolProgressLine, IN_FLIGHT_TOOL_STATES } from "./progress-line";
+import { IN_FLIGHT_TOOL_STATES, liveProgress, type TurnActivity } from "./progress-line";
 import { useTranscriptAutoScroll } from "./useTranscriptAutoScroll";
 import {
   ChatActionsRow,
   ChatCardSlot,
-  ChatPendingTool,
   ChatProgress,
   ChatText,
   ChatTranscript,
   ChatTurn,
 } from "./chat-layout";
-import { toolPendingLabel } from "./tool-labels";
 import { reportBlockFromToolPart } from "./report-block-adapter";
 import type { ResolvedUri } from "./ReportView";
 import { ViewBlocks } from "./view-catalog";
 
-// "thinking" — the turn is submitted but nothing has come back yet.
-// "working" — the turn is streaming: text, or (more often) tool calls, which can
-// run for a while with no visible output.
-export type TurnActivity = "thinking" | "working";
-
-const ACTIVITY_LABELS: Record<TurnActivity, string> = {
-  thinking: "Thinking…",
-  working: "Working…",
-};
+export type { TurnActivity };
 
 export type DashboardAgentMessagesProps = {
   messages: UIMessage[];
@@ -148,19 +138,15 @@ function withoutSupersededInvestigations(
  * Everything the panel styles itself is handled here; the rest falls through to
  * the shared `renderPart` so agent output still looks the same across the app.
  * The differences: text is always the rendered markdown (no raw toggle) at the
- * dashboard's default size, and tool calls never show their mechanics — while
- * running they are a pending pill ("Reading the queue…"), and once they land
- * they leave NO row at all: the answer is the prose and the cards, not the
- * input/output plumbing. The one exception is a FAILED call, which keeps its
- * error row — a silent failure would read as the agent ignoring the question.
- * Citations are handled a level up, where a run of them can be grouped into one
- * row.
+ * dashboard's default size, and tool calls never show their mechanics at all —
+ * while running they are spoken for by the turn's one progress line ("Reading the
+ * queue…", mounted at the end of the transcript), and once they land they leave NO
+ * row: the answer is the prose and the cards, not the input/output plumbing. The
+ * one exception is a FAILED call, which keeps its error row — a silent failure
+ * would read as the agent ignoring the question. Citations are handled a level up,
+ * where a run of them can be grouped into one row.
  */
-function renderDashboardPart(
-  part: UIMessage["parts"][number],
-  i: number,
-  options?: { suppressPendingPill?: boolean }
-) {
+function renderDashboardPart(part: UIMessage["parts"][number], i: number) {
   const p = part as {
     type: string;
     text?: string;
@@ -175,15 +161,12 @@ function renderDashboardPart(
   }
 
   if (type.startsWith("tool-")) {
-    if (IN_FLIGHT_TOOL_STATES.has(p.state ?? "")) {
-      // One spinner at a time: an in_progress investigation card in this turn
-      // already shows its own progress pill.
-      if (options?.suppressPendingPill) return null;
-      // 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))}…`} />;
-    }
+    // An in-flight call renders nothing HERE. The turn has exactly one live
+    // progress element, mounted once at the bottom of the transcript, and this
+    // call's phrase is simply the label it wears while the call runs (see
+    // `liveProgress`). Rendering a line per part is what used to remount — and so
+    // restart — the spinner's animation at every phase change.
+    if (IN_FLIGHT_TOOL_STATES.has(p.state ?? "")) return null;
     if (p.state === "output-error") return renderPart(part, i);
     return null;
   }
@@ -269,22 +252,6 @@ const DashboardAgentTurn = memo(function DashboardAgentTurn({
   const parts = message.parts ?? [];
   if (parts.length === 0) return null;
 
-  // An in_progress investigation card carries its own live pill (its
-  // `progress` line), so a concurrent tool pill would put two spinners on
-  // screen — the card's, being the more specific, wins.
-  const hasLiveInvestigationCard = parts.some((part, i) =>
-    withoutSupersededInvestigations(
-      blocksFor(part) ?? [],
-      `${message.id}:${i}`,
-      investigationWinners
-    ).some(
-      (block) =>
-        (block as { type?: string; outcome?: unknown; investigation?: { outcome?: string } })
-          .type === "investigation" &&
-        (block as { investigation?: { outcome?: string } }).investigation?.outcome === "in_progress"
-    )
-  );
-
   const body: React.ReactNode[] = [];
   for (let i = 0; i < parts.length; i++) {
     const part = parts[i]!;
@@ -329,7 +296,7 @@ const DashboardAgentTurn = memo(function DashboardAgentTurn({
       continue;
     }
 
-    body.push(renderDashboardPart(part, i, { suppressPendingPill: hasLiveInvestigationCard }));
+    body.push(renderDashboardPart(part, i));
   }
 
   return <ChatTurn>{body}</ChatTurn>;
@@ -350,13 +317,18 @@ export function DashboardAgentTurns({
   resolveUri,
   pagePaths,
 }: DashboardAgentMessagesProps) {
-  // One status line at a time: a tool's own progress beats the generic activity.
-  const showActivity = activity !== null && !hasToolProgressLine(messages);
-
   // Strip once, up front: the winners map keys occurrences by part index, so
   // it must be computed on the exact parts the turns will render.
   const stripped = messages.map(stripStepParts);
 
+  // The turn's ONE live progress element. It is the last child of this fragment,
+  // which is a fixed slot: adding turns above it, a tool starting or landing, a
+  // card going live — none of that moves it, so React keeps the same
+  // `ChatProgress` (and the same animating spinner canvas) mounted for the whole
+  // turn and only the label changes underneath. Mounting a line per phase, which
+  // is what this replaced, restarted the animation at every hand-off.
+  const progress = liveProgress(stripped, activity);
+
   // Across the whole transcript, one card per investigation: the latest
   // revision renders where it landed; earlier working copies disappear.
   const investigationWinners = winningInvestigationOccurrences(stripped);
@@ -373,9 +345,9 @@ export function DashboardAgentTurns({
           investigationWinners={investigationWinners}
         />
       ))}
-      {showActivity && activity && (
+      {progress && (
         <ChatTurn>
-          <ChatProgress>{ACTIVITY_LABELS[activity]}</ChatProgress>
+          <ChatProgress>{progress.label}</ChatProgress>
         </ChatTurn>
       )}
       {error && (

apps/webapp/app/components/dashboard-agent/InvestigationCard.test.ts

@@ -43,6 +43,13 @@ describe("InvestigationCard purity", () => {
     expect(source).toMatch(/ChatActionsRow/);
   });
 
+  it("renders no spinner — the transcript owns the one live progress element", () => {
+    // The card is re-emitted as the investigation progresses, so a spinner inside
+    // it restarts its animation on every revision. The transcript's single
+    // progress line wears the card's `progress` phrase instead (progress-line.ts).
+    expect(source).not.toMatch(/AgentSpinner|ChatProgress|ChatPendingTool/);
+  });
+
   it("renders nothing action-shaped without a host to hand intents to", () => {
     expect(source).toMatch(/if \(!onIntent \|\| actions\.length === 0\) return null;/);
   });

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

@@ -7,6 +7,12 @@
  * the data: this reads the validated contracts payload, and the demo card stays
  * where it is as the reviewed reference.
  *
+ * The card shows NO spinner of its own, not even while the investigation is
+ * unfinished. The transcript has exactly one live progress element for the whole
+ * turn and the card's `progress` phrase is one of the labels it wears (see
+ * `progress-line.ts`); a row inside the card would be a second spinner, and one
+ * that restarts its animation on every revision of the card.
+ *
  * An investigation is the one *progressive* block: its `id` is the
  * investigationId and its `revision` climbs, so re-emitting it replaces this card
  * rather than stacking a second one (see `view-blocks.ts`).
@@ -31,15 +37,14 @@ import type {
 import { useState } from "react";
 import { Button } from "~/components/primitives/Buttons";
 import { Callout } from "~/components/primitives/Callout";
-import { AgentSpinner } from "~/components/primitives/Spinner";
 import {
   CategoryBadge,
   ConfidenceBadge,
   EVIDENCE_ROW_CLASS,
   SeverityBadge,
   VerdictBadge,
 } from "./agent-badges";
-import { ChatActionsRow, ChatPendingTool } from "./chat-layout";
+import { ChatActionsRow } from "./chat-layout";
 import type { ResolvedUri } from "./ReportView";
 
 const SEVERITY_LABELS: Record<InvestigationSeverity, string> = {
@@ -114,11 +119,13 @@ function HypothesisRow({
 }) {
   return (
     <li className="space-y-3 border-l-2 border-grid-bright pl-4">
+      {/* The "Testing" badge is the whole signal — no spinner beside it. The
+          transcript's one progress line already says the agent is working, and a
+          canvas here would restart on every revision of the card. */}
       <div className="flex flex-wrap items-center gap-2">
         <VerdictBadge verdict={hypothesis.verdict}>
           {VERDICT_LABELS[hypothesis.verdict]}
         </VerdictBadge>
-        {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}
@@ -191,110 +198,102 @@ export function InvestigationCard({
 }) {
   const [expanded, setExpanded] = useState(defaultExpanded);
   const investigation = block.investigation;
-  const inProgress = investigation.outcome === "in_progress";
   const concluded = investigation.outcome === "concluded";
 
   return (
-    <div className="space-y-2">
-      <div className="overflow-hidden rounded-lg border border-border-bright bg-background-dimmed">
-        <div className="space-y-1.5 border-b border-grid-bright bg-background-bright px-4 py-3">
-          <div className="flex flex-wrap items-center gap-2">
-            <span className="text-xs font-medium text-text-dimmed">Investigation</span>
-            <SeverityBadge severity={investigation.severity}>
-              {SEVERITY_LABELS[investigation.severity]}
-            </SeverityBadge>
-            <ConfidenceBadge confidence={investigation.confidence} />
-          </div>
-          {/* Its own truncating line — the badge row's right corner can't hold a
-              run id reliably at panel width (same rule as RunDiagnosisCard). */}
-          {investigation.runId ? (
-            <div className="truncate font-mono text-xs text-text-dimmed">{investigation.runId}</div>
-          ) : null}
+    <div className="overflow-hidden rounded-lg border border-border-bright bg-background-dimmed">
+      <div className="space-y-1.5 border-b border-grid-bright bg-background-bright px-4 py-3">
+        <div className="flex flex-wrap items-center gap-2">
+          <span className="text-xs font-medium text-text-dimmed">Investigation</span>
+          <SeverityBadge severity={investigation.severity}>
+            {SEVERITY_LABELS[investigation.severity]}
+          </SeverityBadge>
+          <ConfidenceBadge confidence={investigation.confidence} />
         </div>
+        {/* Its own truncating line — the badge row's right corner can't hold a
+              run id reliably at panel width (same rule as RunDiagnosisCard). */}
+        {investigation.runId ? (
+          <div className="truncate font-mono text-xs text-text-dimmed">{investigation.runId}</div>
+        ) : null}
+      </div>
 
-        <div className="space-y-5 px-4 py-4">
-          <p className="text-sm font-medium text-text-bright">{investigation.title}</p>
+      <div className="space-y-5 px-4 py-4">
+        <p className="text-sm font-medium text-text-bright">{investigation.title}</p>
 
-          <Section title={concluded ? "What happened" : "What we know"}>
-            <p className="text-sm text-text-dimmed">{investigation.headline}</p>
-          </Section>
+        <Section title={concluded ? "What happened" : "What we know"}>
+          <p className="text-sm text-text-dimmed">{investigation.headline}</p>
+        </Section>
 
-          {/* A fix is only ever shown for a concluded investigation; an
+        {/* A fix is only ever shown for a concluded investigation; an
             inconclusive one gets "What to check next" instead. The schema
             enforces the exclusivity, so this can't render both. */}
-          {concluded && investigation.remediation ? (
-            <Section title="How to fix">
-              <p className="text-sm text-text-dimmed">{investigation.remediation}</p>
-            </Section>
-          ) : null}
+        {concluded && investigation.remediation ? (
+          <Section title="How to fix">
+            <p className="text-sm text-text-dimmed">{investigation.remediation}</p>
+          </Section>
+        ) : null}
 
-          {investigation.checkNext && investigation.checkNext.length > 0 ? (
-            <Section title="What to check next">
-              <ol className="list-decimal space-y-2 pl-5">
-                {investigation.checkNext.map((item, i) => (
-                  <li key={i} className="text-sm text-text-dimmed">
-                    {item}
-                  </li>
-                ))}
-              </ol>
-            </Section>
-          ) : null}
+        {investigation.checkNext && investigation.checkNext.length > 0 ? (
+          <Section title="What to check next">
+            <ol className="list-decimal space-y-2 pl-5">
+              {investigation.checkNext.map((item, i) => (
+                <li key={i} className="text-sm text-text-dimmed">
+                  {item}
+                </li>
+              ))}
+            </ol>
+          </Section>
+        ) : null}
 
-          {investigation.caveat ? (
-            <Callout variant="warning">{investigation.caveat.message}</Callout>
-          ) : null}
+        {investigation.caveat ? (
+          <Callout variant="warning">{investigation.caveat.message}</Callout>
+        ) : null}
 
-          <div className="space-y-4 border-t border-grid-bright pt-4">
-            <Button
-              variant="minimal/small"
-              onClick={() => setExpanded((v) => !v)}
-              LeadingIcon={expanded ? ChevronDownIcon : ChevronRightIcon}
-              aria-expanded={expanded}
-            >
-              <span className="flex items-center gap-1.5 text-xs text-text-dimmed">
-                {expanded ? "Hide how I worked this out" : "How I worked this out"}
-                <span className="text-text-faint">
-                  ({investigation.hypotheses.length} hypothes
-                  {investigation.hypotheses.length === 1 ? "is" : "es"})
-                </span>
+        <div className="space-y-4 border-t border-grid-bright pt-4">
+          <Button
+            variant="minimal/small"
+            onClick={() => setExpanded((v) => !v)}
+            LeadingIcon={expanded ? ChevronDownIcon : ChevronRightIcon}
+            aria-expanded={expanded}
+          >
+            <span className="flex items-center gap-1.5 text-xs text-text-dimmed">
+              {expanded ? "Hide how I worked this out" : "How I worked this out"}
+              <span className="text-text-faint">
+                ({investigation.hypotheses.length} hypothes
+                {investigation.hypotheses.length === 1 ? "is" : "es"})
               </span>
-            </Button>
+            </span>
+          </Button>
+
+          {expanded ? (
+            <div className="space-y-5 pt-1">
+              <Section title="Hypotheses">
+                <ul className="space-y-5">
+                  {investigation.hypotheses.map((hypothesis) => (
+                    <HypothesisRow
+                      key={hypothesis.id}
+                      hypothesis={hypothesis}
+                      resolveUri={resolveUri}
+                    />
+                  ))}
+                </ul>
+              </Section>
 
-            {expanded ? (
-              <div className="space-y-5 pt-1">
-                <Section title="Hypotheses">
-                  <ul className="space-y-5">
-                    {investigation.hypotheses.map((hypothesis) => (
-                      <HypothesisRow
-                        key={hypothesis.id}
-                        hypothesis={hypothesis}
-                        resolveUri={resolveUri}
-                      />
+              {investigation.evidence.length > 0 ? (
+                <Section title="Evidence">
+                  <ul className="space-y-3">
+                    {investigation.evidence.map((evidence, i) => (
+                      <EvidenceItem key={i} evidence={evidence} resolveUri={resolveUri} />
                     ))}
                   </ul>
                 </Section>
-
-                {investigation.evidence.length > 0 ? (
-                  <Section title="Evidence">
-                    <ul className="space-y-3">
-                      {investigation.evidence.map((evidence, i) => (
-                        <EvidenceItem key={i} evidence={evidence} resolveUri={resolveUri} />
-                      ))}
-                    </ul>
-                  </Section>
-                ) : null}
-              </div>
-            ) : null}
-          </div>
-
-          <InvestigationActions actions={block.capabilities?.actions ?? []} onIntent={onIntent} />
+              ) : null}
+            </div>
+          ) : null}
         </div>
+
+        <InvestigationActions actions={block.capabilities?.actions ?? []} onIntent={onIntent} />
       </div>
-      {/* Progress lives outside the card, on the left — the same line the chat
-        uses for in-flight tools — the same pill, so the transcript never
-        shows two spinner styles at once. It carries the transcript's
-        alignment itself, lining up with the card above it. */}
-      {inProgress ? <ChatPendingTool label={investigation.progress ?? "Working…"} /> : null}
     </div>
   );
 }