feat(webapp): agent chat restyled to the chat.agent design language

- history rows: mono type, dashed rounded rows, hover lift, 'TUE, 11 AUG' stamps
- assistant text in a soft bordered card; user bubble back to indigo
- tool pills: mono with a lime dot, dimmed detail, chevron; error tone for failures
- progress line in the dimmed mono 'steps · time' register
- composer as a single pill with a circular send button; prompt pills with icon+chevron
- storybook: history-list, composer, and failed-tool sections added

Author: kathiekiwi

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

@@ -3,6 +3,9 @@ import { useEffect, useRef } from "react";
 import { Button } from "~/components/primitives/Buttons";
 import { cn } from "~/utils/cn";
 
+/** The circular icon button that sits inside the field, on the right. */
+const SEND_BUTTON = "size-7 shrink-0 rounded-full p-0";
+
 export function DashboardAgentComposer({
   value,
   onChange,
@@ -39,7 +42,9 @@ export function DashboardAgentComposer({
     // gradient in `ChatTranscript`'s scroller edge is for.
     <div className="flex shrink-0 flex-col gap-1.5 bg-background-bright px-3 pb-3 pt-1">
       {context}
-      <div className="rounded-md border border-border-bright bg-background-bright p-1 transition focus-within:border-border-brighter">
+      {/* One pill: the field and its send button share a fully rounded border, so
+          the composer reads as a single thing to type into. */}
+      <div className="rounded-3xl border border-border-bright bg-background-hover p-1 pl-3 transition focus-within:border-border-brighter">
         <div className="flex items-end gap-1">
           {/* One text line tall at rest (matches the button height), grows with
               content up to the cap. rows={1} + field-sizing-content do the work. */}
@@ -57,24 +62,24 @@ export function DashboardAgentComposer({
             placeholder="Type a message…"
             aria-label="Message the dashboard agent"
             className={cn(
-              "max-h-[40vh] flex-1 resize-none border-0 bg-transparent px-1.5 py-0.5 text-sm leading-6 text-text-bright placeholder-text-dimmed outline-hidden ring-0 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control field-sizing-content focus:outline-hidden focus:ring-0"
+              "max-h-[40vh] flex-1 resize-none border-0 bg-transparent py-1 text-sm leading-6 text-text-bright placeholder-text-dimmed outline-hidden ring-0 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control field-sizing-content focus:outline-hidden focus:ring-0"
             )}
           />
           {isStreaming ? (
             // Grey, not red: stopping is a normal thing to do mid-answer, not a
             // destructive action.
             <Button
               variant="minimal/small"
-              className="aspect-square h-6 p-1"
+              className={SEND_BUTTON}
               aria-label="Stop generating"
               tooltip="Stop generating"
               onClick={onStop}
               LeadingIcon={<StopIcon className="size-4 text-text-dimmed" />}
             />
           ) : (
             <Button
-              variant="primary/small"
-              className="aspect-square h-6 p-1"
+              variant="secondary/small"
+              className={SEND_BUTTON}
               aria-label="Send"
               tooltip="Send"
               onClick={onSubmit}

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

@@ -1,5 +1,6 @@
 import { MagnifyingGlassIcon, TrashIcon } from "@heroicons/react/20/solid";
 import { formatDurationMilliseconds } from "@trigger.dev/core/v3/utils/durations";
+import { format } from "date-fns";
 import { useState } from "react";
 import { Button } from "~/components/primitives/Buttons";
 import { Dialog, DialogContent, DialogHeader } from "~/components/primitives/Dialog";
@@ -76,6 +77,19 @@ function unreadFirst(chats: DashboardAgentChat[]): DashboardAgentChat[] {
  *  eight weeks, which is worse than "8w" — weeks are the coarsest useful unit. */
 const AGE_UNITS = ["w", "d", "h", "m"] as const;
 
+/**
+ * "TUE, 11 AUG" — the date stamp on a row.
+ *
+ * A date, not an age: the list is read as a log of past conversations, and a
+ * stamp is what lets two rows be compared. {@link chatAge} is still here for
+ * anywhere an at-a-glance "how long ago" is the better answer.
+ */
+export function chatDateStamp(lastMessageAt: string): string | undefined {
+  const at = new Date(lastMessageAt);
+  if (Number.isNaN(at.getTime())) return undefined;
+  return format(at, "EEE, d MMM").toUpperCase();
+}
+
 /** "2m", "3d", "8w" — the project's short duration style, one unit only. */
 export function chatAge(lastMessageAt: string, now: number = Date.now()): string | undefined {
   const at = Date.parse(lastMessageAt);
@@ -115,7 +129,6 @@ export function DashboardAgentHistoryMenu({
   // Deleting a chat is irreversible, so it goes through a confirm step. Holding
   // the whole chat lets the dialog name what's being deleted.
   const [pendingDelete, setPendingDelete] = useState<DashboardAgentChat | null>(null);
-  const now = Date.now();
 
   return (
     <>
@@ -128,7 +141,7 @@ export function DashboardAgentHistoryMenu({
           <AgentList>
             {unreadFirst(chats).map((chat) => {
               const process = chatProcess(chat, chat.id === thinkingChatId);
-              const age = chat.lastMessageAt ? chatAge(chat.lastMessageAt, now) : undefined;
+              const stamp = chat.lastMessageAt ? chatDateStamp(chat.lastMessageAt) : undefined;
               return (
                 <AgentListRow
                   key={chat.id}
@@ -137,7 +150,7 @@ export function DashboardAgentHistoryMenu({
                   // null keeps the leading slot so every title starts at the
                   // same x whether or not this chat has a status.
                   status={process ? <ProcessIcon process={process} /> : null}
-                  meta={age}
+                  meta={stamp}
                   variant={chat.id === currentChatId ? "selected" : "default"}
                   onSelect={() => onSelect(chat.id)}
                   action={

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

@@ -15,6 +15,7 @@ import {
   ChatPendingTool,
   ChatProgress,
   ChatText,
+  ChatToolRow,
   ChatTranscript,
   ChatTurn,
   ChatWakeSlot,
@@ -160,8 +161,8 @@ function withoutSupersededInvestigations(
  * 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.
+ * input/output plumbing. The one exception is a FAILED call, which keeps a pill
+ * — 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.
  */
@@ -176,6 +177,7 @@ function renderDashboardPart(
     url?: string;
     title?: string;
     state?: string;
+    errorText?: string;
   };
   const type = part.type as string;
 
@@ -190,7 +192,20 @@ function renderDashboardPart(
       if (options?.suppressPendingPill) return null;
       return <ChatPendingTool key={i} label={`${toolPendingLabel(type.slice(5))}…`} />;
     }
-    if (p.state === "output-error") return renderPart(part, i);
+    if (p.state === "output-error") {
+      // A failed call stays visible, but in the panel's own language: what the
+      // agent was doing and what came back, not the inspector's input/output
+      // tabs. The full text is on the row's title for the rare long error.
+      const errorText = p.errorText ?? "failed";
+      return (
+        <ChatToolRow
+          key={i}
+          tone="error"
+          label={toolPendingLabel(type.slice(5))}
+          detail={<span title={errorText}>{errorText}</span>}
+        />
+      );
+    }
     return null;
   }
 

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

@@ -1,4 +1,4 @@
-import { SparklesIcon, XMarkIcon } from "@heroicons/react/20/solid";
+import { CodeBracketIcon, SparklesIcon, XMarkIcon } from "@heroicons/react/20/solid";
 import type { AgentPageContext, SuggestedPrompt } from "@internal/dashboard-agent-contracts";
 import { useCallback, useMemo, useState } from "react";
 import { Paragraph } from "~/components/primitives/Paragraph";
@@ -77,6 +77,11 @@ export function DashboardAgentSuggestedPrompts({
           <AgentListRow
             key={prompt.id}
             label={prompt.label}
+            // A prompt is an invitation, so it reads as a chip: fully rounded,
+            // with the icon and the chevron the public chat page uses.
+            shape="pill"
+            icon={CodeBracketIcon}
+            chevron
             variant={prompt.source === "promoted" ? "promoted" : "default"}
             onSelect={() => onSelect(prompt.prompt)}
             action={

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

@@ -97,16 +97,25 @@ describe("chat-layout enforcement", () => {
       }
     });
 
-    it("renders assistant text as prose, not as a card", () => {
-      // A box around every text answer made the whole transcript read as cards.
-      // Only ChatCardSlot content is boxed now, so nothing here may reintroduce
-      // the shared bubble.
+    it("puts assistant text in a soft card of its own", () => {
+      // Boxed, but in the library's own surface — the shared inspector bubble
+      // brings its own spacing and would put a second layout owner in here.
+      expect(source).toContain('const SOFT_SURFACE = "border border-border-bright');
       expect(source).not.toContain("ChatBubble");
     });
 
-    it("gives the user bubble a grey surface, not the accent", () => {
-      expect(source).toContain("bg-background-raised");
-      expect(source).not.toMatch(/bg-indigo-\d/);
+    it("gives the user bubble the accent surface", () => {
+      expect(source).toMatch(/bg-indigo-\d/);
+    });
+
+    it("sets tool pills and progress in mono", () => {
+      expect(source).toContain('const MONO_TEXT = "font-mono');
+      // Both pills read as one family, so neither may restyle its own shape.
+      expect(source).toContain("const PILL =");
+      for (const component of ["ChatPendingTool", "ChatToolRow"]) {
+        const body = source.slice(source.indexOf(`export function ${component}(`));
+        expect(body.slice(0, body.indexOf("\n}\n")), component).toContain("PILL");
+      }
     });
 
     it("documents the composition rules", () => {

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

@@ -46,10 +46,14 @@
  *    rhythm — is the card's business and must stay in the card. Anything about
  *    how the card sits in the transcript — full width, inset, distance to its
  *    neighbours — is `ChatCardSlot`'s, and a card must not set it.
- * 4. **Role drives alignment and nothing else.** `role="user"` is right-aligned
- *    in a grey bubble; `role="assistant"` is left-aligned, full width and
- *    unboxed — plain prose, so the cards are the only things that read as cards.
+ * 4. **Role drives alignment and surface.** `role="user"` is right-aligned in an
+ *    indigo bubble; `role="assistant"` is left-aligned and near-full width in a
+ *    soft dark card. Rich cards are still distinct — they carry headers, badges
+ *    and actions inside the same border language.
+ * 5. **Machine text is mono.** Anything the system names — a tool call, a step
+ *    count, a duration — is set in mono; sentences the agent writes stay sans.
  */
+import { ChevronRightIcon } from "@heroicons/react/20/solid";
 import type { Ref } from "react";
 import { createContext, Suspense, useContext } from "react";
 import { StreamdownRenderer } from "~/components/code/StreamdownRenderer";
@@ -74,6 +78,22 @@ const UNIT_GAP = "space-y-1.5";
 const SCROLLER =
   "flex-1 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control";
 
+/**
+ * The surface a turn's own content sits on: a soft dark card, one step above the
+ * panel. Used by the assistant's text and by the pills, so a transcript reads as
+ * one material.
+ */
+const SOFT_SURFACE = "border border-border-bright bg-background-hover";
+
+/** Machine text — a tool name, a step count, a duration. See rule 5. */
+const MONO_TEXT = "font-mono text-xs tracking-wide";
+
+/**
+ * A pill: a tool call, in flight or landed. Fully rounded and dashed, so it reads
+ * as a trace of what happened rather than as a control to press.
+ */
+const PILL = "inline-flex min-w-0 max-w-full items-center rounded-full border-dashed px-3 py-1";
+
 /**
  * The soft edge at the bottom of the scroller. There is no rule above the
  * composer — the transcript runs behind it — so this is what says the content
@@ -165,27 +185,28 @@ export function ChatTurn({
 /**
  * A text body.
  *
- * The assistant variant is the panel's markdown path, rendered as plain prose:
- * NOT a card. The agent answers in text most of the time, and a box around every
- * one of those answers made the transcript read as a stack of cards — so the box
- * is reserved for the things that really are cards (report, investigation,
- * diagnosis, chart), which mount through `ChatCardSlot`. A plain-text fallback
- * shows while the markdown renderer loads.
+ * The assistant variant is the panel's markdown path, in a soft card: near-full
+ * width, left-aligned, so an answer has an edge without shouting. A plain-text
+ * fallback shows while the markdown renderer loads.
  *
- * The user variant is the one bubble left: grey, right-aligned, so a turn is
- * legible at a glance without competing with the accent the agent's own surfaces
- * use.
+ * The user variant is the accent bubble: indigo, right-aligned, tighter than full
+ * width, so who said what is legible at a glance.
  */
 export function ChatText({ role = "assistant", text }: { role?: ChatRole; text: string }) {
   if (role === "user") {
     return (
-      <div className="max-w-[80%] rounded-lg bg-background-raised px-4 py-2.5 text-sm text-text-bright">
+      <div className="max-w-[85%] rounded-2xl bg-indigo-600 px-4 py-2.5 text-sm text-white">
         <div className="whitespace-pre-wrap wrap-anywhere">{text}</div>
       </div>
     );
   }
   return (
-    <div className="streamdown-container min-w-0 font-sans text-sm font-normal text-text-dimmed wrap-anywhere">
+    <div
+      className={cn(
+        SOFT_SURFACE,
+        "streamdown-container min-w-0 rounded-xl px-4 py-3 font-sans text-sm font-normal text-text-bright wrap-anywhere"
+      )}
+    >
       <Suspense fallback={<span className="whitespace-pre-wrap">{text}</span>}>
         <StreamdownRenderer>{text}</StreamdownRenderer>
       </Suspense>
@@ -203,7 +224,8 @@ export function ChatCardSlot({ children }: { children: React.ReactNode }) {
 }
 
 /**
- * The progress line: a spinner and one line of dimmed text, left-aligned.
+ * The progress line: a spinner and one line of dimmed mono text, left-aligned —
+ * the same register as the step summary a finished turn leaves behind.
  *
  * It always carries the transcript's inset — either from the turn it sits in, or
  * by applying it itself when it is mounted loose (under a card, say). There is no
@@ -216,9 +238,9 @@ export function ChatCardSlot({ children }: { children: React.ReactNode }) {
 export function ChatProgress({ children }: { children: React.ReactNode }) {
   const insetClass = useInsetClass();
   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" />
+    <div className={cn(insetClass, MONO_TEXT, "flex items-start text-text-dimmed", ROW_GAP)}>
+      {/* text-xs line box is 16px, the spinner 12px: 2px centres it on line one. */}
+      <Spinner className="mt-0.5 size-3 shrink-0" />
       {children}
     </div>
   );
@@ -238,26 +260,60 @@ 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
-        )}
-      >
+      <span className={cn(PILL, SOFT_SURFACE, MONO_TEXT, "text-text-dimmed", CHIP_GAP)}>
         <Spinner className="size-3 shrink-0" />
         <span className="truncate">{label}</span>
       </span>
     </div>
   );
 }
 
+/** How a landed tool call ended. Carried by the pill's dot, not by its text. */
+export type ChatToolTone = "done" | "error";
+
+const TOOL_DOT: Record<ChatToolTone, string> = {
+  done: "bg-primary",
+  error: "bg-error",
+};
+
 /**
- * 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
- * shared `ToolUseRow`.
+ * A landed tool call, as a pill: a dot for how it ended, what it did in bright
+ * mono, and what it did it to in dimmed mono. The chevron marks a pill whose
+ * detail is longer than the room it has.
+ *
+ * `children` is anything that belongs under the row — a `ChatProgress` while the
+ * turn continues, say.
  */
-export function ChatToolRow({ children }: { children: React.ReactNode }) {
-  return <div className={cn("min-w-0", TURN_BODY_GAP)}>{children}</div>;
+export function ChatToolRow({
+  label,
+  detail,
+  tone = "done",
+  children,
+}: {
+  label?: React.ReactNode;
+  /** What the call was about: a query, an error message, a run id. Truncated. */
+  detail?: React.ReactNode;
+  tone?: ChatToolTone;
+  children?: React.ReactNode;
+}) {
+  const insetClass = useInsetClass();
+  return (
+    <div className={cn(insetClass, "min-w-0", TURN_BODY_GAP)}>
+      {label ? (
+        <div className="flex min-w-0">
+          <span className={cn(PILL, SOFT_SURFACE, MONO_TEXT, CHIP_GAP)}>
+            <span aria-hidden className={cn("size-1.5 shrink-0 rounded-full", TOOL_DOT[tone])} />
+            <span className="shrink-0 text-text-bright">{label}</span>
+            {detail ? <span className="truncate text-text-dimmed">{detail}</span> : null}
+            {detail ? (
+              <ChevronRightIcon aria-hidden className="size-3 shrink-0 text-text-faint" />
+            ) : null}
+          </span>
+        </div>
+      ) : null}
+      {children}
+    </div>
+  );
 }
 
 /**