feat(webapp): pending tool pill replaces streamed input JSON in the chat

An in-flight tool call now shows a compact pill (per-tool phrase +
spinner, watch-chip visual language) instead of raw streaming JSON —
covering render_view and get_report, the biggest offenders. Completed
and error states render as before; gallery in-flight examples reworked
and a pill line-up section added.

Author: kathiekiwi

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

@@ -6,20 +6,20 @@ import { memo } from "react";
 import { Button, LinkButton } from "~/components/primitives/Buttons";
 import { Callout } from "~/components/primitives/Callout";
 import { renderPart, toSafeUrl } from "~/components/runs/v3/agent/AgentMessageView";
-import { ToolUseRow } from "~/components/runs/v3/ai/AIChatMessages";
 import { sameOriginPath } from "./navigate-target";
 import { hasToolProgressLine, IN_FLIGHT_TOOL_STATES } from "./progress-line";
 import { useTranscriptAutoScroll } from "./useTranscriptAutoScroll";
 import {
   ChatActionsRow,
   ChatCardSlot,
+  ChatPendingTool,
   ChatProgress,
   ChatText,
-  ChatToolRow,
   ChatTranscript,
   ChatTurn,
   ChatWakeSlot,
 } from "./chat-layout";
+import { toolPendingLabel } from "./tool-labels";
 import { reportBlockFromToolPart } from "./report-block-adapter";
 import type { ResolvedUri } from "./ReportView";
 import { ViewBlocks } from "./view-catalog";
@@ -85,8 +85,9 @@ function viewSpecFor(part: UIMessage["parts"][number]): { blocks: unknown[] } |
  *   it retyped.
  *
  * Both replace the generic tool row: a rendered card already says everything the
- * raw JSON would. A `get_report` part that can't be adapted (still streaming, or
- * an error) returns null and keeps its tool row, so the failure stays visible.
+ * raw JSON would. A `get_report` part that can't be adapted returns null and
+ * falls through — to the pending pill while it is still streaming, to the tool row
+ * once it has failed, so the failure stays visible.
  */
 function blocksFor(part: UIMessage["parts"][number]): unknown[] | null {
   const spec = viewSpecFor(part);
@@ -105,9 +106,12 @@ function blocksFor(part: UIMessage["parts"][number]): unknown[] | null {
  * 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 an in-flight tool row is static with the spinner
- * on a separate line. Citations are handled a level up, where a run of them can
- * be grouped into one row.
+ * dashboard's default size, and an in-flight tool call is a pending pill rather
+ * than a tool row streaming its input JSON — the input is the agent's business,
+ * and watching it arrive character by character only to have it replaced by a
+ * card is noise. Once the call lands, the part renders exactly as it always did.
+ * 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) {
   const p = part as {
@@ -116,8 +120,6 @@ function renderDashboardPart(part: UIMessage["parts"][number], i: number) {
     url?: string;
     title?: string;
     state?: string;
-    input?: unknown;
-    toolCallId?: string;
   };
   const type = part.type as string;
 
@@ -126,19 +128,7 @@ function renderDashboardPart(part: UIMessage["parts"][number], i: number) {
   }
 
   if (type.startsWith("tool-") && IN_FLIGHT_TOOL_STATES.has(p.state ?? "")) {
-    const toolName = type.slice(5);
-    return (
-      <ChatToolRow key={i}>
-        <ToolUseRow
-          tool={{
-            toolCallId: p.toolCallId ?? `tool-${i}`,
-            toolName,
-            inputJson: JSON.stringify(p.input ?? {}, null, 2),
-          }}
-        />
-        <ChatProgress>Running {toolName}…</ChatProgress>
-      </ChatToolRow>
-    );
+    return <ChatPendingTool key={i} label={`${toolPendingLabel(type.slice(5))}…`} />;
   }
 
   return renderPart(part, i);

apps/webapp/app/components/dashboard-agent/chat-layout.test.ts

@@ -86,9 +86,11 @@ describe("chat-layout enforcement", () => {
         "ChatText",
         "ChatCardSlot",
         "ChatProgress",
+        "ChatPendingTool",
         "ChatToolRow",
         "ChatNote",
         "ChatStatusLine",
+        "ChatWakeSlot",
         "ChatActionsRow",
       ]) {
         expect(source, name).toContain(`export function ${name}(`);

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

@@ -22,6 +22,7 @@
  *                         card (diagnosis, investigation, report, chart), a
  *                         callout, a chip row
  *   - `ChatProgress`    — a spinner and one line of progress
+ *   - `ChatPendingTool` — a tool call still in flight, as a compact pill
  *   - `ChatToolRow`     — a tool-call row, optionally with progress under it
  *   - `ChatNote`        — an inline system / interceptor note
  *   - `ChatWakeSlot`    — an unprompted turn: its banner and the narration under
@@ -65,6 +66,8 @@ const TURN_GAP = "space-y-4";
 const TURN_BODY_GAP = "space-y-2";
 /** Gap inside a single-line row (icon to text, button to button). */
 const ROW_GAP = "gap-2";
+/** Gap inside a chip (icon to label). Tighter than a row — same as a watch chip. */
+const CHIP_GAP = "gap-1.5";
 /** Rhythm inside one unit — a banner and the text it introduces. */
 const UNIT_GAP = "space-y-1.5";
 
@@ -203,6 +206,33 @@ export function ChatProgress({ children }: { children: React.ReactNode }) {
   );
 }
 
+/**
+ * A tool call still in flight, as a compact pill: a spinner and one short phrase
+ * saying what the agent is doing.
+ *
+ * It replaces the tool row for the whole in-flight phase, so the transcript never
+ * shows a half-streamed blob of input JSON that then flips to a card. The pill is
+ * deliberately the smallest thing that fits the transcript's chip language (the
+ * watch chips are its sibling) — when the call lands, whatever the result renders
+ * as takes its place, and the jump is one line high.
+ */
+export function ChatPendingTool({ label }: { label: string }) {
+  const insetClass = useInsetClass();
+  return (
+    <div className={cn(insetClass, "flex min-w-0")}>
+      <span
+        className={cn(
+          "inline-flex h-6 min-w-0 items-center rounded-full border border-border-bright bg-background-bright px-2.5 text-xs text-text-dimmed",
+          CHIP_GAP
+        )}
+      >
+        <Spinner className="size-3 shrink-0" />
+        <span className="truncate">{label}</span>
+      </span>
+    </div>
+  );
+}
+
 /**
  * A tool-call row, and optionally a `ChatProgress` under it while the call is in
  * flight. Nothing but the row's placement lives here — the row itself is the

apps/webapp/app/components/dashboard-agent/demo/demo-chats.ts

@@ -795,7 +795,7 @@ const baseToolInFlight: DemoChat = {
   title: "How deep is the email queue?",
   flow: "base",
   summary:
-    "A tool row mid-call ('calling…') above a finished one. Click either row to expand its input/output.",
+    "A pending pill for the call still in flight, under a finished tool row. Click the finished row to expand its input/output.",
   banner: PROD_BANNER,
   activity: "working",
   lastMessageAt: "2026-07-27T10:26:00.000Z",
@@ -821,10 +821,12 @@ const baseToolInFlight: DemoChat = {
             { rows: [{ "count()": 4812 }] },
             "run-query-done"
           ),
+          // A real tool name, so the pending pill shows its real phrase rather
+          // than the unknown-tool fallback.
           pendingToolPart(
-            "get_queue_health",
+            "get_queue",
             { queue: DEMO_WORLD.queue, period: "1h" },
-            "get-queue-health-pending"
+            "get-queue-pending"
           ),
         ]),
       ],

apps/webapp/app/components/dashboard-agent/progress-line.ts

@@ -1,13 +1,13 @@
 /**
  * Which progress line the transcript shows.
  *
- * There are two candidates: a tool's own line ("Running render_view…", rendered
- * under the in-flight tool row) and the turn's generic activity ("Thinking…" /
- * "Working…"). Both were showing at once. The specific line always says more, so
- * it wins and the generic one stands down — exactly one status line at a time.
+ * There are two candidates: a tool's own line (the pending pill, "Rendering a
+ * card…") and the turn's generic activity ("Thinking…" / "Working…"). Both were
+ * showing at once. The specific line always says more, so it wins and the generic
+ * one stands down — exactly one status line at a time.
  */
 
-/** A tool call that hasn't produced output yet, so its row carries a spinner. */
+/** A tool call that hasn't produced output yet, so it shows as a pending pill. */
 export const IN_FLIGHT_TOOL_STATES = new Set(["input-streaming", "input-available"]);
 
 type ProgressMessage = { role?: string; parts?: ReadonlyArray<unknown> };

apps/webapp/app/components/dashboard-agent/report-block-adapter.ts

@@ -13,8 +13,8 @@
  * have different ids and therefore never collapse into one card.
  *
  * Every failure mode returns `null`. A malformed or half-streamed tool part must
- * degrade to "no card" (the caller then shows the raw tool row), never to a crash
- * or a card full of blanks.
+ * degrade to "no card" (the caller then shows the pending pill or the raw tool
+ * row), never to a crash or a card full of blanks.
  */
 import {
   VIEW_BLOCK_VERSION,
@@ -48,8 +48,8 @@ export function reportBlockFromToolPart(part: unknown): EnvelopedReportBlock | n
   const p = (part ?? {}) as MaybeToolPart;
 
   if (p.type !== REPORT_TOOL_PART_TYPE) return null;
-  // Only a finished call has a snapshot. `output-error` and the in-flight states
-  // stay as the generic tool row so the failure is visible.
+  // Only a finished call has a snapshot. The in-flight states fall back to the
+  // pending pill, `output-error` to the generic tool row so the failure is visible.
   if (p.state !== "output-available") return null;
   // Identity is the tool call's. Without it the block couldn't be keyed stably
   // across re-renders, so we'd rather render nothing than a card that remounts.

apps/webapp/app/components/dashboard-agent/tool-labels.test.ts

@@ -0,0 +1,26 @@
+import { dashboardAgentCodeToolSchemas } from "@internal/dashboard-agent/tool-schemas";
+import { describe, expect, it } from "vitest";
+import { toolPendingLabel } from "./tool-labels";
+
+describe("toolPendingLabel", () => {
+  it("names every tool the agent can call", () => {
+    // A tool with no phrase falls back to `Running <name>`, which is the one
+    // thing the pill should never say for a tool we ship.
+    const unnamed = Object.keys(dashboardAgentCodeToolSchemas).filter((name) =>
+      toolPendingLabel(name).startsWith("Running ")
+    );
+    // `run_query` is the exception: "Running a query" is the phrase, not a fallback.
+    expect(unnamed).toEqual(["run_query"]);
+  });
+
+  it("falls back to the tool name for a tool it doesn't know", () => {
+    expect(toolPendingLabel("get_queue_health")).toBe("Running get_queue_health");
+  });
+
+  it("reads as a phrase, not an identifier", () => {
+    expect(toolPendingLabel("get_run")).toBe("Reading the run");
+    expect(toolPendingLabel("render_view")).toBe("Rendering a card");
+    // No trailing ellipsis — the pill adds it.
+    expect(toolPendingLabel("get_report")).not.toMatch(/…$/);
+  });
+});

apps/webapp/app/components/dashboard-agent/tool-labels.ts

@@ -0,0 +1,48 @@
+/**
+ * What a tool call is called while it is still running.
+ *
+ * An in-flight tool call shows a pending pill, and the pill needs one short
+ * phrase saying what the agent is doing — not the tool's identifier. The phrases
+ * are written from the reader's side ("Reading the run", not "get_run"), present
+ * tense, no trailing ellipsis: the pill adds that.
+ *
+ * A tool that isn't in the map keeps the old wording, `Running <name>`, so a new
+ * tool is readable before anyone gets round to naming it here.
+ */
+
+const TOOL_LABELS: Record<string, string> = {
+  list_projects: "Listing projects",
+  list_environments: "Listing environments",
+  list_tasks: "Listing tasks",
+  list_runs: "Looking through runs",
+  get_run: "Reading the run",
+  get_run_trace: "Reading the run's trace",
+  list_errors: "Looking through errors",
+  get_error: "Reading the error",
+  get_query_schema: "Reading the data schema",
+  run_query: "Running a query",
+  ask_support: "Asking support",
+  render_view: "Rendering a card",
+  get_report: "Building the health report",
+  get_queue: "Reading the queue",
+  list_deploys: "Looking through deploys",
+  get_deploy: "Reading the deploy",
+  correlate_version: "Correlating versions",
+  search_docs: "Searching the docs",
+  get_current_page: "Reading the current page",
+  navigate_to: "Opening the page",
+  schedule_watch: "Setting up a watch",
+  list_alerts: "Listing alerts",
+  create_alert: "Creating an alert",
+  delete_alert: "Deleting an alert",
+  // Code mode.
+  get_repo_info: "Reading the repo",
+  list_files: "Listing files",
+  read_file: "Reading a file",
+  search_code: "Searching the code",
+};
+
+/** The pending pill's label for a tool, by its name (no `tool-` prefix). */
+export function toolPendingLabel(toolName: string): string {
+  return TOOL_LABELS[toolName] ?? `Running ${toolName}`;
+}

apps/webapp/app/routes/storybook.agent-ui/manifest.ts

@@ -273,7 +273,16 @@ export const MANIFEST: GallerySection[] = [
     group: "messages",
   },
   { sectionId: "messages-reasoning", title: "Reasoning part", group: "messages" },
-  { sectionId: "messages-tool-in-flight", title: "Tool call in flight", group: "messages" },
+  {
+    sectionId: "messages-tool-in-flight",
+    title: "Tool call in flight — pending pill",
+    group: "messages",
+  },
+  {
+    sectionId: "messages-tool-pending-pills",
+    title: "Pending pills — the labels, including a card tool",
+    group: "messages",
+  },
   {
     sectionId: "messages-tool-expanded",
     title: "Tool call expanded on its output",

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

@@ -265,6 +265,37 @@ function MessageHarness({
   );
 }
 
+/**
+ * Every pending pill next to each other, one turn per in-flight tool.
+ *
+ * A real turn only ever has one call in flight, so this is a label sheet rather
+ * than a transcript: the phrasing has to hold up read as a set, and the two tools
+ * that used to stream the most input JSON before flipping to a card (`render_view`,
+ * `get_report`) have to look like every other wait. The last one is a tool the
+ * label map doesn't know, showing the `Running <name>` fallback.
+ */
+const PENDING_PILL_TOOLS: { tool: string; input: unknown }[] = [
+  { tool: "render_view", input: { blocks: [{ type: "diagnosis" }] } },
+  { tool: "get_report", input: { window: "24h" } },
+  { tool: "get_run", input: { runId: "run_demo" } },
+  { tool: "run_query", input: { query: "SELECT count() FROM task_runs" } },
+  { tool: "search_docs", input: { query: "concurrency limits" } },
+  { tool: "brand_new_tool", input: {} },
+];
+
+function PendingPillsHarness() {
+  const messages: UIMessage[] = PENDING_PILL_TOOLS.map(({ tool, input }) =>
+    demoFixtures.assistantMessage(`pending-${tool}`, [
+      demoFixtures.pendingToolPart(tool, input, `pending-${tool}`),
+    ])
+  );
+  return (
+    <div className="rounded-lg border border-grid-bright bg-background-bright">
+      <DashboardAgentMessages messages={messages} activity={null} />
+    </div>
+  );
+}
+
 /** The demo chart card's frame around an empty result set. */
 function EmptyChartCard() {
   return (
@@ -704,6 +735,7 @@ const STATES: Record<string, React.ReactNode> = {
   "messages-streaming-text": <MessageHarness chatId={demoId("base-streaming")} />,
   "messages-reasoning": <MessageHarness chatId={demoId("investigate-streaming")} />,
   "messages-tool-in-flight": <MessageHarness chatId={demoId("base-tool-in-flight")} />,
+  "messages-tool-pending-pills": <PendingPillsHarness />,
   "messages-tool-expanded": <MessageHarness chatId={demoId("base-tool-in-flight")} />,
   "messages-error-retry": <MessageHarness chatId={demoId("base-error-retry")} withError />,
   // Two turns only: the resumed chat's third turn is a live `chart` block, and