diff --git a/apps/web/src/chat/strings.ts b/apps/web/src/chat/strings.ts
index e12239635..af4489416 100644
--- a/apps/web/src/chat/strings.ts
+++ b/apps/web/src/chat/strings.ts
@@ -271,6 +271,8 @@ export const CHAT_STRINGS = {
   turnActivityThinking: "Thinking…",
   turnActivityRetry: (attempt: number) => `Retrying (attempt ${attempt})…`,
   toolActivityFailed: "Failed",
+  traceWorked: (steps: number) => `Worked through ${steps} ${steps === 1 ? "step" : "steps"}`,
+  traceWorking: (steps: number) => `Working… step ${Math.max(1, steps)}`,
   replyTimedOutNotice: "No reply arrived — the agent may be unavailable.",
   resumeFailedNotice: (refId: string) =>
     `Couldn't resume the running reply — try again. (ref ${refId})`,
diff --git a/apps/web/src/chat/styles.css b/apps/web/src/chat/styles.css
index 604afe742..a37227496 100644
--- a/apps/web/src/chat/styles.css
+++ b/apps/web/src/chat/styles.css
@@ -1039,7 +1039,7 @@
    avatar sits on the right and the header/text shrink to their own content
    width against that same edge instead of stretching the full row. `.chat-
    block` (approve/connect-service/connect-github/poll/form/steps) and
-   `.chat-tool-activity` chips render as siblings of the bubble, not inside
+   `.chat-trace` rows render as siblings of the bubble, not inside
    it, and deliberately stay anchored under the left avatar gutter for every
    author — mirroring a stack of tool chips or an approval card to the right
    read as clutter next to the composer and doesn't match any other
@@ -2109,279 +2109,193 @@
   color: var(--muted-foreground);
 }
 
-/* Tool-use chips (conforming to mock-spec §12.3): inline chips
-   stacked under the agent's prose, one per call — never collapsibles.
-   `.chat-tool-activity` is the stack; each `.chat-tool-activity-row` wraps
-   one chip plus optional detail. The chip hugs its content so a wall of
-   calls reads as short tags, not a list. Radius follows `--radius`. */
-.chat-tool-activity {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 0.5rem;
-  padding: 0.15rem 0;
-  box-sizing: border-box;
-  width: 100%;
-  min-width: 0;
+/* Trace: one collapsed row per turn, expanding to each step (DESIGN.md
+   "Messages and cards"). */
+.chat-trace {
+  margin-top: 10px;
   max-width: 640px;
-  font-size: 0.8125rem;
-  color: var(--muted-foreground);
-}
-
-.chat-tool-activity-live {
-  gap: 0.4rem;
-  padding: 0.35rem 0.7rem;
-  border-top: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
-}
-
-/* The row is the outer wrapper — chip on top, its optional detail
-   underneath. It takes the message column so a long chip can ellipsize
-   against a real width instead of a shrink-wrapped max-content cycle. */
-.chat-tool-activity-row {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 0.3rem;
-  box-sizing: border-box;
-  width: 100%;
-  min-width: 0;
-  max-width: 100%;
-}
-
-.chat-tool-activity-row[data-indented="true"] {
-  margin-left: 0.18rem;
+  overflow: hidden;
+  border-radius: var(--r-lg);
+  box-shadow: inset 0 0 0 1px var(--line);
+  font-size: 13px;
 }
 
-.chat-tool-activity-chip {
+.chat-trace-sum {
   display: flex;
-  flex-direction: row;
   align-items: center;
-  gap: 0.5rem;
-  box-sizing: border-box;
-  width: fit-content;
-  min-width: 0;
-  max-width: 100%;
-  flex-wrap: nowrap;
-  border: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
-  background: color-mix(in srgb, var(--muted) 72%, transparent);
-  border-radius: var(--radius);
-  padding: 0.35rem 0.75rem 0.35rem 0.4rem;
-  transition:
-    transform var(--duration-standard, 180ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
-    background-color var(--duration-standard, 180ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
-    border-color var(--duration-standard, 180ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
-    color var(--duration-standard, 180ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
-}
-
-.chat-tool-activity-trigger {
-  position: relative;
-  color: inherit;
+  gap: 8px;
+  width: 100%;
+  height: 36px;
+  padding: 0 12px;
+  border: 0;
+  background: transparent;
+  color: var(--ink-2);
   font: inherit;
   text-align: left;
   cursor: pointer;
+  transition: background-color 120ms ease;
 }
 
-/* The visible chip can stay compact; the hit area cannot — a pseudo-element
-   pads the trigger out to a 40px tall target without changing the chip's
-   footprint in the transcript. */
-.chat-tool-activity-trigger::before {
-  content: "";
-  position: absolute;
-  inset: 50% 0 auto 0;
-  transform: translateY(-50%);
-  min-height: 2.5rem;
+.chat-trace-sum:hover {
+  background: var(--hover);
 }
 
-.chat-tool-activity-trigger:hover {
-  color: var(--foreground);
+.chat-trace-sum:focus-visible {
+  outline: 2px solid var(--action);
+  outline-offset: -2px;
 }
 
-.chat-tool-activity-trigger:focus-visible {
-  outline: 2px solid var(--primary);
-  outline-offset: 2px;
+.chat-trace-chev {
+  flex: none;
+  width: 1em;
+  height: 1em;
+  color: var(--ink-3);
+  transition: transform 200ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
 }
 
-.chat-tool-activity-trigger:active:not(:disabled) {
-  transform: scale(0.97);
+.chat-trace[data-open="true"] .chat-trace-chev {
+  transform: rotate(90deg);
 }
 
-.chat-tool-activity-tile {
-  display: inline-flex;
+.chat-trace-signal {
   flex: none;
-  align-items: center;
-  justify-content: center;
-  width: 22px;
-  height: 22px;
-  border-radius: var(--radius);
-  font-size: 10px;
-  font-weight: 800;
-  color: #fff;
-  box-shadow: inset 0 0 0 1px color-mix(in srgb, white 22%, transparent);
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--action);
+  animation: chat-trace-pulse 1.2s ease-in-out infinite;
 }
 
-.chat-tool-activity-glyph {
-  background: color-mix(in srgb, var(--muted) 88%, var(--foreground) 6%);
-  color: var(--muted-foreground);
-  font-size: 13px;
-  font-weight: 400;
-  box-shadow: none;
+@keyframes chat-trace-pulse {
+  50% {
+    opacity: 0.35;
+  }
 }
 
-.chat-tool-activity-glyph svg {
-  width: 1em;
-  height: 1em;
+.chat-trace-steps {
+  padding: 6px 0;
+  border-top: 1px solid var(--line);
+  background: var(--surface-sunk);
 }
 
-.chat-tool-activity-marker {
-  display: inline-flex;
-  flex: none;
+.chat-trace-step {
+  display: grid;
+  grid-template-columns: 28px 1fr auto auto;
   align-items: center;
-  justify-content: center;
-  width: 12px;
-  height: 12px;
-  color: var(--muted-foreground);
-}
-
-.chat-tool-activity-marker svg {
-  width: 12px;
-  height: 12px;
+  gap: 4px;
+  width: 100%;
+  padding: 5px 12px 5px 8px;
+  border: 0;
+  background: transparent;
+  color: var(--ink-2);
+  font: inherit;
+  text-align: left;
 }
 
-.chat-tool-activity-marker[data-status="running"],
-.chat-tool-activity-marker[data-status="pending"] {
-  animation: chat-tool-activity-spin 0.8s linear infinite;
+.chat-trace-step-button {
+  cursor: pointer;
 }
 
-.chat-tool-activity-marker[data-status="failed"] {
-  color: var(--destructive, #b42318);
+.chat-trace-step-button:hover {
+  background: var(--hover);
 }
 
-@keyframes chat-tool-activity-spin {
-  to {
-    transform: rotate(360deg);
-  }
+.chat-trace-step-text {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .chat-tool-activity-chip,
-  .chat-tool-activity-trigger,
-  .chat-tool-activity-caret {
-    transition: none;
-  }
-
-  .chat-tool-activity-trigger:active:not(:disabled) {
-    transform: none;
-  }
-
-  .chat-tool-activity-marker[data-status="running"],
-  .chat-tool-activity-marker[data-status="pending"] {
-    animation: none;
-  }
+.chat-trace-step code {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--ink);
 }
 
-.chat-tool-activity-row[data-status="failed"] .chat-tool-activity-phrase {
-  color: var(--destructive, #b42318);
-  opacity: 1;
+.chat-trace-glyph {
+  display: inline-flex;
+  justify-self: center;
+  color: var(--ink-3);
 }
 
-.chat-tool-activity-row[data-status="running"] .chat-tool-activity-phrase,
-.chat-tool-activity-row[data-status="pending"] .chat-tool-activity-phrase {
-  color: var(--foreground);
-  opacity: 0.7;
+.chat-trace-time {
+  font-size: 12px;
+  color: var(--ink-3);
+  font-variant-numeric: tabular-nums;
 }
 
-.chat-tool-activity-phrase {
-  min-width: 0;
-  flex: 1 1 auto;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: 0.8125rem;
-  font-weight: 450;
-  letter-spacing: -0.01em;
-  color: var(--foreground);
-  opacity: 0.82;
+.chat-trace-marker {
+  display: inline-flex;
+  width: 12px;
+  height: 12px;
+  color: var(--ink-3);
 }
 
-.chat-tool-activity-status-word {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
+.chat-trace-marker svg {
+  width: 12px;
+  height: 12px;
 }
 
-.chat-tool-activity-meta {
-  flex: none;
-  font-variant-numeric: tabular-nums;
-  opacity: 0.75;
+.chat-trace-marker[data-status="running"],
+.chat-trace-marker[data-status="pending"] {
+  color: var(--action);
+  animation: chat-trace-spin 0.8s linear infinite;
 }
 
-/* Sized by font-size, never width/height (§1): the svg itself is 1em
-   square, so this class is the only place its size is set. */
-.chat-tool-activity-caret {
-  flex: none;
-  width: 1em;
-  height: 1em;
-  font-size: 11px;
-  color: var(--muted-foreground);
-  transition: transform var(--duration-standard, 180ms)
-    var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
+.chat-trace-marker[data-status="failed"] {
+  color: var(--destructive, #b42318);
 }
 
-.chat-tool-activity-caret[data-open="true"] {
-  transform: rotate(90deg);
+@keyframes chat-trace-spin {
+  to {
+    transform: rotate(360deg);
+  }
 }
 
-.chat-tool-activity-detail {
+.chat-trace-detail {
   margin: 0;
-  padding: 0.1rem 0.75rem 0.15rem 2.15rem;
-  max-width: 100%;
+  padding: 2px 12px 6px 40px;
   max-height: 12rem;
   overflow: auto;
   white-space: pre-wrap;
   overflow-wrap: anywhere;
-  color: var(--muted-foreground);
-  font-size: 0.8125rem;
+  color: var(--ink-3);
+  font-size: 12px;
 }
 
-.chat-tool-activity-thinking,
-.chat-tool-activity-retry {
-  padding: 0.15rem 0.15rem 0.15rem 2.15rem;
-  font-size: 0.8125rem;
-  color: var(--muted-foreground);
+.chat-trace-note {
+  padding: 5px 12px 5px 40px;
+  color: var(--ink-3);
 }
 
-.chat-tool-activity-thinking {
+.chat-trace-thinking {
   font-style: italic;
 }
 
-.chat-tool-activity-retry {
+.chat-trace-retry {
   color: var(--warn, #b7791f);
 }
 
-/* Chips animate in with the same entrance list rows use (§12.3 rule 4),
-   so they don't just pop into layout mid-stream. Only the chip itself
-   plays it — not the detail box that opens later, which has its own
-   moment. */
-@media (prefers-reduced-motion: no-preference) {
-  @keyframes chat-tool-activity-in {
-    from {
-      opacity: 0;
-      transform: translateY(4px);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
+.chat-trace-sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .chat-trace-chev,
+  .chat-trace-sum {
+    transition: none;
   }
 
-  .chat-tool-activity-chip {
-    animation: chat-tool-activity-in 160ms var(--chat-ease);
+  .chat-trace-signal,
+  .chat-trace-marker[data-status="running"],
+  .chat-trace-marker[data-status="pending"] {
+    animation: none;
   }
 }
 
diff --git a/apps/web/src/chat/tool-activity-view.tsx b/apps/web/src/chat/tool-activity-view.tsx
index 421b95b7f..43c2f5f52 100644
--- a/apps/web/src/chat/tool-activity-view.tsx
+++ b/apps/web/src/chat/tool-activity-view.tsx
@@ -1,5 +1,6 @@
-// One presentation serves both the live strip and the persisted
-// transcript, so a call doesn't restyle itself when the turn ends.
+// One collapsed row per turn: "Worked through N steps", or "Working… step N"
+// while the turn is open. Expanding lists each step. The same presentation
+// serves the live strip and the persisted transcript.
 
 import {
   BookBookmark,
@@ -18,12 +19,7 @@ import type { ReactNode } from "react";
 import { useState } from "react";
 
 import { CHAT_STRINGS } from "./strings";
-import {
-  providerTile,
-  type ToolActivityGlyph,
-  type ToolActivityRow,
-  type ToolActivityStatus,
-} from "./tool-activity";
+import type { ToolActivityGlyph, ToolActivityRow, ToolActivityStatus } from "./tool-activity";
 
 function StatusMarker({ status }: { readonly status: ToolActivityStatus }) {
   const icon =
@@ -35,17 +31,13 @@ function StatusMarker({ status }: { readonly status: ToolActivityStatus }) {
       <Check />
     );
   return (
-    <span className="chat-tool-activity-marker" data-status={status} aria-hidden="true">
+    <span className="chat-trace-marker" data-status={status} aria-hidden="true">
       {icon}
     </span>
   );
 }
 
-function chipAccessibleName(row: ToolActivityRow): string {
-  return row.status === "failed" ? `${CHAT_STRINGS.toolActivityFailed}. ${row.phrase}` : row.phrase;
-}
-
-function ActionGlyph({ glyph }: { readonly glyph: ToolActivityGlyph }) {
+function StepGlyph({ glyph }: { readonly glyph: ToolActivityGlyph }) {
   let icon: ReactNode;
   switch (glyph) {
     case "search":
@@ -71,124 +63,93 @@ function ActionGlyph({ glyph }: { readonly glyph: ToolActivityGlyph }) {
       break;
   }
   return (
-    <span className="chat-tool-activity-tile chat-tool-activity-glyph" aria-hidden="true">
+    <span className="chat-trace-glyph" aria-hidden="true">
       {icon}
     </span>
   );
 }
 
-function LeadingMark({ row }: { readonly row: ToolActivityRow }) {
-  const tile = row.provider === undefined ? undefined : providerTile(row.provider);
-  if (tile !== undefined) {
-    return (
-      <span
-        className="chat-tool-activity-tile"
-        style={{ background: tile.color }}
-        aria-hidden="true"
-      >
-        {tile.initials}
-      </span>
-    );
-  }
-  return <ActionGlyph glyph={row.glyph} />;
-}
-
-function ChipBody({ row, open }: { readonly row: ToolActivityRow; readonly open: boolean }) {
-  return (
+function TraceStep({ row }: { readonly row: ToolActivityRow }) {
+  const [open, setOpen] = useState(false);
+  const body = (
     <>
-      <LeadingMark row={row} />
-      {row.status === "failed" ? (
-        <span className="chat-tool-activity-status-word">{CHAT_STRINGS.toolActivityFailed}. </span>
-      ) : null}
-      <span className="chat-tool-activity-phrase">{row.phrase}</span>
-      {row.meta === undefined ? null : (
-        <span className="chat-tool-activity-meta" aria-hidden="true">
-          {row.meta}
-        </span>
-      )}
+      <StepGlyph glyph={row.glyph} />
+      <span className="chat-trace-step-text">
+        {row.status === "failed" ? (
+          <span className="chat-trace-sr">{CHAT_STRINGS.toolActivityFailed}. </span>
+        ) : null}
+        <code>{row.toolName}</code> · {row.phrase}
+      </span>
+      {row.meta === undefined ? <span /> : <span className="chat-trace-time">{row.meta}</span>}
       <StatusMarker status={row.status} />
-      {row.detail === undefined ? null : (
-        <CaretRight className="chat-tool-activity-caret" data-open={open} aria-hidden="true" />
-      )}
     </>
   );
-}
-
-function ToolActivityLine({
-  row,
-  indented,
-}: {
-  readonly row: ToolActivityRow;
-  readonly indented: boolean;
-}) {
-  const [open, setOpen] = useState(false);
-  const hasDetail = row.detail !== undefined;
-
-  if (!hasDetail) {
+  if (row.detail === undefined) {
     return (
-      <div className="chat-tool-activity-row" data-status={row.status} data-indented={indented}>
-        <div className="chat-tool-activity-chip" title={row.toolName}>
-          <ChipBody row={row} open={false} />
-        </div>
+      <div className="chat-trace-step" data-status={row.status}>
+        {body}
       </div>
     );
   }
-
   return (
-    <div className="chat-tool-activity-row" data-status={row.status} data-indented={indented}>
+    <div data-status={row.status}>
       <button
         type="button"
-        className="chat-tool-activity-chip chat-tool-activity-trigger"
+        className="chat-trace-step chat-trace-step-button"
         aria-expanded={open}
-        aria-label={chipAccessibleName(row)}
-        title={row.toolName}
         onClick={() => setOpen((value) => !value)}
       >
-        <ChipBody row={row} open={open} />
+        {body}
       </button>
-      {open ? <p className="chat-tool-activity-detail">{row.detail}</p> : null}
-    </div>
-  );
-}
-
-// Never folded into a summary line (DESIGN.md §12.3: chips, not
-// collapsibles) — no group-level trigger, no count.
-export function ToolActivityGroup({ rows }: { readonly rows: readonly ToolActivityRow[] }) {
-  if (rows.length === 0) return null;
-  return (
-    <div className="chat-tool-activity" data-slot="tool-activity">
-      {rows.map((row) => (
-        <ToolActivityLine key={row.key} row={row} indented={false} />
-      ))}
+      {open ? <p className="chat-trace-detail">{row.detail}</p> : null}
     </div>
   );
 }
 
 // Plus the two things that only exist while a turn is open: thinking and
 // a retried request.
-export function LiveToolActivity({
+export function ToolTrace({
   rows,
-  thinking,
-  retryCount,
+  live = false,
+  thinking = false,
+  retryCount = 0,
 }: {
   readonly rows: readonly ToolActivityRow[];
-  readonly thinking: boolean;
-  readonly retryCount: number;
+  readonly live?: boolean;
+  readonly thinking?: boolean;
+  readonly retryCount?: number;
 }) {
+  const [open, setOpen] = useState(false);
   if (rows.length === 0 && !thinking && retryCount === 0) return null;
   return (
-    <div className="chat-tool-activity chat-tool-activity-live" data-slot="tool-activity">
-      {rows.map((row) => (
-        <ToolActivityLine key={row.key} row={row} indented={false} />
-      ))}
-      {thinking ? (
-        <div className="chat-tool-activity-row chat-tool-activity-thinking">
-          {CHAT_STRINGS.turnActivityThinking}
-        </div>
-      ) : null}
-      {retryCount > 0 ? (
-        <div className="chat-tool-activity-row chat-tool-activity-retry">
-          {CHAT_STRINGS.turnActivityRetry(retryCount)}
+    <div className="chat-trace" data-open={open} data-live={live} data-slot="tool-activity">
+      <button
+        type="button"
+        className="chat-trace-sum"
+        aria-expanded={open}
+        onClick={() => setOpen((value) => !value)}
+      >
+        <CaretRight className="chat-trace-chev" aria-hidden="true" />
+        {live ? <span className="chat-trace-signal" aria-hidden="true" /> : null}
+        <span>
+          {live ? CHAT_STRINGS.traceWorking(rows.length) : CHAT_STRINGS.traceWorked(rows.length)}
+        </span>
+      </button>
+      {open ? (
+        <div className="chat-trace-steps">
+          {rows.map((row) => (
+            <TraceStep key={row.key} row={row} />
+          ))}
+          {thinking ? (
+            <div className="chat-trace-note chat-trace-thinking">
+              {CHAT_STRINGS.turnActivityThinking}
+            </div>
+          ) : null}
+          {retryCount > 0 ? (
+            <div className="chat-trace-note chat-trace-retry">
+              {CHAT_STRINGS.turnActivityRetry(retryCount)}
+            </div>
+          ) : null}
         </div>
       ) : null}
     </div>
diff --git a/apps/web/src/chat/turn-activity.tsx b/apps/web/src/chat/turn-activity.tsx
index c1c5dde64..fa3e433cb 100644
--- a/apps/web/src/chat/turn-activity.tsx
+++ b/apps/web/src/chat/turn-activity.tsx
@@ -10,7 +10,7 @@ import {
   toolActivityGlyph,
   type ToolActivityRow,
 } from "./tool-activity";
-import { LiveToolActivity } from "./tool-activity-view";
+import { ToolTrace } from "./tool-activity-view";
 
 export type ToolCallActivity = {
   readonly callId: string;
@@ -362,7 +362,8 @@ export function TurnActivityStrip({ activity }: { readonly activity: TurnActivit
   if (activity === null) return null;
 
   return (
-    <LiveToolActivity
+    <ToolTrace
+      live
       rows={toolActivityRows(activity, Date.now())}
       thinking={activity.thinking.active}
       retryCount={activity.retryCount}