From dd3d1219b6073657531d68daba75381db7f8d7b6 Mon Sep 17 00:00:00 2001
From: Arjun Mahanti <arjun@squareup.com>
Date: Tue, 27 Oct 2026 11:13:23 -0400
Subject: [PATCH 01/19] Refine grouped agent activity previews

Co-authored-by: OpenAI Codex <noreply@openai.com>
Signed-off-by: Arjun Mahanti <arjun@squareup.com>
---
 .../ActivityAccessory.module.css              |   8 +-
 .../messages/ActivityGroupPreview.test.tsx    | 142 +++++++++++
 .../messages/ActivityGroupPreview.tsx         | 114 +++++++++
 src/features/messages/ChannelTimeline.tsx     | 119 ++++++----
 .../ChannelTimeline.viewport.test.tsx         | 190 +++++++++++----
 src/features/messages/MessageRow.test.tsx     |  97 +++++---
 src/features/messages/MessageRow.tsx          |  90 ++++---
 src/features/messages/Messages.module.css     | 222 ++++++++++--------
 src/features/messages/ThreadPanel.tsx         | 159 ++++++++++---
 .../messages/activity-avatar-motion.ts        | 121 ++++++++++
 src/features/messages/activity-groups.test.ts |   4 +-
 src/features/messages/activity-groups.ts      |  24 +-
 .../messages/activity-presentation.ts         | 137 +++++++++++
 .../messages/message-grouping.test.ts         |   9 +
 src/features/messages/message-grouping.ts     |  19 +-
 src/shared/design-system/ui/AvatarStack.tsx   |   3 +
 tests/fixtures/message-gallery/examples.ts    |  12 +-
 17 files changed, 1160 insertions(+), 310 deletions(-)
 create mode 100644 src/features/messages/ActivityGroupPreview.test.tsx
 create mode 100644 src/features/messages/ActivityGroupPreview.tsx
 create mode 100644 src/features/messages/activity-avatar-motion.ts
 create mode 100644 src/features/messages/activity-presentation.ts

diff --git a/src/bundled/agent-activity/ActivityAccessory.module.css b/src/bundled/agent-activity/ActivityAccessory.module.css
index 8d0adb78fb..9d3ba835b9 100644
--- a/src/bundled/agent-activity/ActivityAccessory.module.css
+++ b/src/bundled/agent-activity/ActivityAccessory.module.css
@@ -1,5 +1,5 @@
 .root {
-  margin-block-start: var(--space-1);
+  margin-block-start: var(--space-half);
   min-width: 0;
   flex-shrink: 0;
 }
@@ -44,16 +44,18 @@
   color: var(--text-subtle);
   display: inline-flex;
   align-items: center;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   gap: var(--space-1);
   min-width: 0;
 }
 
 .summaryGroups {
+  min-width: 0;
+  max-width: 100%;
   display: inline-flex;
   align-items: center;
   gap: var(--space-1);
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
 }
 .failure {
   color: var(--text-danger);
diff --git a/src/features/messages/ActivityGroupPreview.test.tsx b/src/features/messages/ActivityGroupPreview.test.tsx
new file mode 100644
index 0000000000..d53cfab1fe
--- /dev/null
+++ b/src/features/messages/ActivityGroupPreview.test.tsx
@@ -0,0 +1,142 @@
+// @vitest-environment jsdom
+import "@testing-library/jest-dom/vitest";
+import { act, cleanup, render, screen } from "@testing-library/react";
+import { afterEach, expect, it } from "vitest";
+import { stubAvatarBrowserApis } from "../agents/avatar-testing";
+import { createAgentActivity } from "../agents/activity";
+import { createLocalAgentActivity } from "../agents/local-activity";
+import { createRelaySession } from "../relay/session";
+import { keypair } from "../relay/testing";
+import type { ChannelMessage } from "../relay/contracts";
+import { ActivityGroupPreview } from "./ActivityGroupPreview";
+import { useActivityPresentation } from "./activity-presentation";
+import { MessageRow } from "./MessageRow";
+
+stubAvatarBrowserApis();
+afterEach(cleanup);
+const step: ChannelMessage = {
+  id: "step",
+  channelId: "channel",
+  threadRootId: "request",
+  authorId: "agent",
+  audience: "agents",
+  createdAt: 100,
+  content: "Checking the layout",
+  mentions: [],
+  attachments: [],
+  reactions: [],
+  participants: [],
+  replyCount: 0,
+};
+function fixture() {
+  const local = createLocalAgentActivity();
+  const activity = createAgentActivity(
+    true,
+    () => {},
+    () => true,
+    undefined,
+    undefined,
+    { source: local.reader, scope: "test" },
+  );
+  const release = activity.queries.activate();
+  return {
+    local,
+    activity: activity.queries,
+    dispose: () => {
+      release();
+      activity.dispose();
+    },
+  };
+}
+it("keeps a closed sequence completed when another request starts in the same thread", () => {
+  const f = fixture();
+  try {
+    const { audience: _audience, ...publicStep } = step;
+    function Preview() {
+      const presentation = useActivityPresentation(
+        [
+          { ...step, id: "first" },
+          step,
+          {
+            ...publicStep,
+            id: "reply",
+            content: "Result",
+            createdAt: 101,
+          },
+        ],
+        f.activity,
+        new Set(["agent"]),
+        "request",
+      );
+      const group = presentation.groups[0];
+      if (!group) throw new Error("Missing activity group");
+      return (
+        <ActivityGroupPreview
+          group={group}
+          profiles={new Map()}
+          media={() => undefined}
+          expanded={false}
+          onToggle={() => {}}
+        />
+      );
+    }
+    render(<Preview />);
+    expect(screen.getByText("2 completed steps")).toBeVisible();
+    act(() => {
+      f.local
+        .begin({
+          scope: "test",
+          agent: "agent",
+          channelId: "channel",
+          messageId: "next-request",
+          threadRootId: "request",
+        })
+        .started();
+    });
+    expect(screen.getByText("2 completed steps")).toBeVisible();
+    expect(screen.getByText("2 completed steps")).not.toHaveAttribute(
+      "data-active",
+    );
+  } finally {
+    f.dispose();
+  }
+});
+it("shimmers a standalone working step and stops when that request finishes", () => {
+  const f = fixture();
+  const owner = createRelaySession({
+    viewer: keypair().pubkey,
+    relayAuthor: keypair().pubkey,
+    media: () => undefined,
+    query: async () => [],
+  });
+  try {
+    const work = f.local.begin({
+      scope: "test",
+      agent: "agent",
+      channelId: "channel",
+      messageId: "request",
+      threadRootId: "request",
+    });
+    work.started();
+    render(
+      <MessageRow
+        row={step}
+        session={{ ...owner.session, agentActivity: f.activity }}
+        profile={undefined}
+        media={() => undefined}
+        onOpenLink={() => false}
+        day={false}
+        retry={undefined}
+      />,
+    );
+    expect(screen.getByText(step.content)).toHaveAttribute(
+      "data-active",
+      "true",
+    );
+    act(() => work.finish({ ok: true }));
+    expect(screen.getByText(step.content)).not.toHaveAttribute("data-active");
+  } finally {
+    owner.dispose();
+    f.dispose();
+  }
+});
diff --git a/src/features/messages/ActivityGroupPreview.tsx b/src/features/messages/ActivityGroupPreview.tsx
new file mode 100644
index 0000000000..0230c8d92e
--- /dev/null
+++ b/src/features/messages/ActivityGroupPreview.tsx
@@ -0,0 +1,114 @@
+import { ShimmerText } from "../../shared/design-system/ui/ShimmerText";
+import type { ActivityPresentation } from "./activity-presentation";
+import { Avatar } from "../../shared/design-system/ui/Avatar";
+import { CaretUpIcon } from "../../shared/design-system/icons";
+import { AvatarStack } from "../../shared/design-system/ui/AvatarStack";
+import { toggleActivityHistory } from "./activity-avatar-motion";
+import type { Profile } from "../relay/contracts";
+import { AgentAvatar } from "../agents/AgentAvatar";
+import { avatarMedia } from "../../shared/avatar-source";
+import { messagePreviewText } from "../conversation/message-preview-text";
+import styles from "./Messages.module.css";
+
+/** One stable disclosure for a run of activity, showing its latest speaker. */
+export function ActivityGroupPreview({
+  group,
+  profiles,
+  media,
+  expanded,
+  onToggle,
+  layout = "timeline",
+}: {
+  group: ActivityPresentation;
+  profiles: ReadonlyMap<string, Profile>;
+  media: (url: string, size?: "small") => string | undefined;
+  expanded: boolean;
+  onToggle: () => void;
+  layout?: "timeline" | "thread";
+}) {
+  const { latest: row, history, participants, done, working } = group;
+  const profile = profiles.get(row.authorId);
+  const motionKey = (author: string) => `${history[0]?.id ?? row.id}:${author}`;
+  const name = profile?.name ?? row.authorId.slice(0, 10);
+  const text = Array.from(messagePreviewText(row.content).replace(/\s+/g, " "));
+  const preview = done
+    ? `${history.length} completed ${history.length === 1 ? "step" : "steps"}`
+    : text.length > 280
+      ? `${text.slice(0, 279).join("")}…`
+      : text.join("");
+  return (
+    <div
+      className={styles.audienceRow}
+      data-layout={layout}
+      data-collapse={expanded || undefined}
+    >
+      <div className={styles.audienceEntry}>
+        <button
+          type="button"
+          data-buzz-ui=""
+          className={styles.audienceLine}
+          data-collapse={expanded || undefined}
+          aria-expanded={expanded}
+          aria-label={`${expanded ? "Collapse" : "Show"} activity history: ${name}: ${preview}`}
+          onClick={(event) => {
+            event.currentTarget.focus({ preventScroll: true });
+            toggleActivityHistory(
+              event.currentTarget,
+              onToggle,
+              event.detail === 0,
+              history[0]?.id ?? row.id,
+            );
+          }}
+        >
+          {expanded ? (
+            <Avatar
+              size="small"
+              shape="squircle"
+              alt=""
+              fallback=""
+              fallbackContent={
+                <CaretUpIcon
+                  className={styles.activityCollapseIcon}
+                  aria-hidden="true"
+                />
+              }
+            />
+          ) : participants.length > 1 ? (
+            <AvatarStack
+              size="small"
+              max={3}
+              items={participants.map((id) => ({
+                id,
+                name: profiles.get(id)?.name ?? id.slice(0, 10),
+                src: avatarMedia(profiles.get(id)?.picture, media),
+                shape: "squircle",
+                motionKey: motionKey(id),
+              }))}
+            />
+          ) : (
+            <span
+              className={styles.audienceAvatar}
+              title={name}
+              data-avatar-motion-key={motionKey(row.authorId)}
+            >
+              <AgentAvatar
+                src={avatarMedia(profile?.picture, media)}
+                alt=""
+                fallback={name}
+                size="fill"
+                shape="squircle"
+              />
+            </span>
+          )}
+          <span className={styles.audiencePreviewText}>
+            {expanded ? (
+              "Collapse"
+            ) : (
+              <ShimmerText active={working}>{preview}</ShimmerText>
+            )}
+          </span>
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/features/messages/ChannelTimeline.tsx b/src/features/messages/ChannelTimeline.tsx
index 181d36218e..8a7af78d08 100644
--- a/src/features/messages/ChannelTimeline.tsx
+++ b/src/features/messages/ChannelTimeline.tsx
@@ -1,16 +1,14 @@
 // biome-ignore-all lint/a11y/noNoninteractiveTabindex: The history region must support keyboard scrolling.
+import { ActivityGroupPreview } from "./ActivityGroupPreview";
 import { ActivityExpansion } from "./ActivityExpansion";
 import { useChannelIdentityNames } from "../identity-names/react";
 import { useMessageSelectionCopy } from "./selection-copy";
 import { Button } from "../../shared/design-system/ui/Button";
 import { EmptyState } from "../../shared/design-system/ui/EmptyState";
-import {
-  CaretDownIcon,
-  ChatCircleIcon,
-} from "../../shared/design-system/icons";
+import { ChatCircleIcon } from "../../shared/design-system/icons";
 import { MembershipRow } from "./MembershipRow";
 import { membershipRows, withoutStartingAgents } from "./membership-rows";
-import { activityGroups, RECENT_ACTIVITY_COUNT } from "./activity-groups";
+import { useActivityPresentation } from "./activity-presentation";
 import { DayDivider } from "./MessageTimestamp";
 import type { ConversationExtensions } from "../conversation/contracts";
 import type { RelaySession } from "../relay/session";
@@ -25,7 +23,10 @@ import {
 } from "react";
 import { Virtualizer, type VirtualizerHandle } from "virtua";
 import { MessageRow, type MessageLinkOrigin } from "./MessageRow";
-import { continuesMessageGroup } from "./message-grouping";
+import {
+  continuesMessageGroup,
+  publicMessageNeighbor,
+} from "./message-grouping";
 import type { Attachment, ChannelWindow } from "../relay/contracts";
 import { useRowProfiles } from "../relay/react";
 import { geometryFor, geometrySignature } from "./geometry";
@@ -237,10 +238,12 @@ function Timeline({
   const [expandedActivity, setExpandedActivity] = useState<ReadonlySet<string>>(
     () => new Set(),
   );
-  const activity = useMemo(
-    () => (chatPresentation ? activityGroups(rows) : []),
-    [rows, chatPresentation],
+  const presentation = useActivityPresentation(
+    rows,
+    queries.agentActivity,
+    agentPubkeys,
   );
+  const activity = presentation.groups;
   // Resolve a saved anchor once, before measuring initial geometry. A bottom
   // restore ignores it; absent/visible anchors must not expand on later loads.
   const [activityRestore, setActivityRestore] = useState(
@@ -248,9 +251,9 @@ function Timeline({
   );
   if (activityRestore && rows.length > 0) {
     setActivityRestore(undefined);
-    const older = activity
-      .find((group) => group.ids.includes(activityRestore))
-      ?.ids.slice(0, -RECENT_ACTIVITY_COUNT);
+    const older = activity.find((group) =>
+      group.ids.includes(activityRestore),
+    )?.ids;
     if (older?.includes(activityRestore))
       setExpandedActivity((expanded) => new Set([...expanded, ...older]));
   }
@@ -259,15 +262,13 @@ function Timeline({
       group.ids[0],
       {
         ...group,
-        expanded: group.ids
-          .slice(0, -RECENT_ACTIVITY_COUNT)
-          .some((id) => expandedActivity.has(id)),
+        expanded: group.ids.some((id) => expandedActivity.has(id)),
       },
     ]),
   );
   const hiddenActivity = new Set(
     [...disclosures.values()].flatMap((group) =>
-      group.expanded ? [] : group.ids.slice(0, -RECENT_ACTIVITY_COUNT),
+      group.expanded ? [] : group.ids,
     ),
   );
   const resolveName = useChannelIdentityNames(queries, channelId);
@@ -296,6 +297,22 @@ function Timeline({
       (id) => id !== focusedMessageId && !pinnedIds.has(id),
     ),
   );
+  useLayoutEffect(() => {
+    const element = scroller.current;
+    if (
+      !element ||
+      !focusedActivityId ||
+      !rows.some((row) => row.id === focusedActivityId) ||
+      element.ownerDocument.activeElement !== element.ownerDocument.body
+    )
+      return;
+    const group = [
+      ...element.querySelectorAll<HTMLElement>("[data-activity-group-id]"),
+    ].find((node) => node.dataset.activityGroupId === focusedActivityId);
+    group
+      ?.querySelector<HTMLButtonElement>("button")
+      ?.focus({ preventScroll: true });
+  }, [rows, focusedActivityId]);
   const contentSignature = useMemo(
     () => geometrySignature(visibleRows, profiles, resolveName),
     [visibleRows, profiles, resolveName],
@@ -304,6 +321,8 @@ function Timeline({
   const keptIndices = rows.flatMap((row, index) =>
     row.id === focusedMessageId ||
     row.id === focusedActivityId ||
+    (disclosures.get(row.id)?.ids[0] === focusedActivityId &&
+      !!focusedActivityId) ||
     pinnedIds.has(row.id)
       ? [index]
       : [],
@@ -499,9 +518,7 @@ function Timeline({
     if (!id || !request || request === activityReveal.current) return;
     if (!rows.some((row) => row.id === id)) return;
     activityReveal.current = request;
-    const older = activity
-      .find((group) => group.ids.includes(id))
-      ?.ids.slice(0, -RECENT_ACTIVITY_COUNT);
+    const older = activity.find((group) => group.ids.includes(id))?.ids;
     if (older?.includes(id) && foldedActivity.has(id))
       setExpandedActivity((expanded) => new Set([...expanded, ...older]));
   }, [activity, rows, targetId, targetSignal, revealMessageId, foldedActivity]);
@@ -998,6 +1015,7 @@ function Timeline({
       data-chat-presentation={chatPresentation || undefined}
       className={styles.feed}
       data-channel-timeline={channelId}
+      data-activity-history-scope=""
       data-buzz-launch-pending={launchPending ? "settling" : undefined}
       data-jump-visible={showJumpToLatest || undefined}
       onWheel={(event) => gesture(event.deltaY < 0 && !event.ctrlKey)}
@@ -1140,8 +1158,14 @@ function Timeline({
           {rows.map((row, index) => {
             const disclosure = disclosures.get(row.id);
             const hidden = foldedActivity.has(row.id);
-            const previousRow = rows[index - 1];
-            const nextRow = rows[index + 1];
+            const previousRow =
+              row.audience === "agents"
+                ? rows[index - 1]
+                : publicMessageNeighbor(rows, index, -1);
+            const nextRow =
+              row.audience === "agents"
+                ? rows[index + 1]
+                : publicMessageNeighbor(rows, index, 1);
             const day =
               index === 0
                 ? true
@@ -1154,40 +1178,42 @@ function Timeline({
                 {disclosure && (
                   <div
                     className={styles.activityDisclosure}
-                    data-activity-group-id={row.id}
+                    data-activity-group-id={disclosure.ids[0]}
                   >
-                    {day && <DayDivider createdAt={row.createdAt} />}
-                    <Button
-                      variant="plain"
-                      size="inline"
-                      shape="control"
-                      aria-expanded={disclosure.expanded}
-                      onClick={(event) => {
-                        event.currentTarget.focus({ preventScroll: true });
-                        // Opening history is explicit reading intent, even at
-                        // the bottom: new activity must not pull it away.
+                    {!disclosure.expanded &&
+                      (() => {
+                        const first = rows.findIndex(
+                          (item) => item.id === disclosure.ids[0],
+                        );
+                        const before = rows[first - 1];
+                        return (
+                          (!before ||
+                            new Date(before.createdAt * 1000).toDateString() !==
+                              new Date(
+                                row.createdAt * 1000,
+                              ).toDateString()) && (
+                            <DayDivider createdAt={row.createdAt} />
+                          )
+                        );
+                      })()}
+                    <ActivityGroupPreview
+                      group={disclosure}
+                      profiles={profiles}
+                      media={queries.media}
+                      expanded={disclosure.expanded}
+                      onToggle={() => {
                         intent.current++;
                         follow.current = false;
                         userScrolled.current = true;
                         restoredAnchor.current = undefined;
                         const next = new Set(expandedActivity);
-                        for (const id of disclosure.expanded
-                          ? disclosure.ids
-                          : disclosure.ids.slice(0, -RECENT_ACTIVITY_COUNT)) {
+                        for (const id of disclosure.ids) {
                           if (disclosure.expanded) next.delete(id);
                           else next.add(id);
                         }
                         setExpandedActivity(next);
                       }}
-                    >
-                      {disclosure.expanded
-                        ? "Show fewer"
-                        : `Show ${disclosure.ids.length - RECENT_ACTIVITY_COUNT} previous ${disclosure.ids.length - RECENT_ACTIVITY_COUNT === 1 ? "step" : "steps"}`}
-                      <CaretDownIcon
-                        className={styles.activityChevron}
-                        aria-hidden="true"
-                      />
-                    </Button>
+                    />
                   </div>
                 )}
                 <ActivityExpansion
@@ -1209,6 +1235,11 @@ function Timeline({
                     />
                   ) : (
                     <MessageRow
+                      activityFollows={rows[index + 1]?.audience === "agents"}
+                      activityMotionKey={
+                        presentation.byRow.get(row.id)?.motionKey
+                      }
+                      activityActive={presentation.byRow.get(row.id)?.active}
                       stackPrevious={
                         !!previousRow &&
                         !foldedActivity.has(previousRow.id) &&
diff --git a/src/features/messages/ChannelTimeline.viewport.test.tsx b/src/features/messages/ChannelTimeline.viewport.test.tsx
index d2806592f2..d53e176ad4 100644
--- a/src/features/messages/ChannelTimeline.viewport.test.tsx
+++ b/src/features/messages/ChannelTimeline.viewport.test.tsx
@@ -2,6 +2,8 @@
 import "@testing-library/jest-dom/vitest";
 import { cleanup, fireEvent, render, screen } from "@testing-library/react";
 import { afterEach, expect, it, vi } from "vitest";
+import { stubAvatarBrowserApis } from "../agents/avatar-testing";
+stubAvatarBrowserApis();
 import { ChannelTimeline } from "./ChannelTimeline";
 import { createRelaySession } from "../relay/session";
 import { writeView } from "../../shared/view-state";
@@ -143,27 +145,92 @@ function activityFixture() {
   return { owner, updates, content };
 }
 
-it("keeps the last five updates, retains expanded history through appends, and folds back", () => {
+it("shows one latest-agent preview, retains expanded history through appends, and folds back", () => {
   const { owner, updates, content } = activityFixture();
   try {
     const view = render(content(updates(9)));
     expect(screen.queryByText("Update 3")).toBeNull();
-    expect(screen.getByText("Update 4")).toBeVisible();
-    const toggle = screen.getByRole("button", {
-      name: "Show 4 previous steps",
+    expect(screen.getByText("Update 8")).toBeVisible();
+    let toggle = screen.getByRole("button", {
+      name: /Show activity history/,
     });
     fireEvent.click(toggle);
     expect(toggle).toHaveAttribute("aria-expanded", "true");
     expect(screen.getByText("Update 0")).toBeVisible();
     view.rerender(content(updates(11)));
-    expect(screen.getByRole("button", { name: "Show fewer" })).toBe(toggle);
+    toggle = screen.getByRole("button", { name: /Collapse activity history/ });
+    expect(toggle).toHaveFocus();
     expect(screen.getByText("Update 0")).toBeVisible();
-    expect(screen.getByText("Update 10")).toBeVisible();
+    expect(screen.getAllByText("Update 10")).toHaveLength(1);
+    expect(
+      screen.getByText("Update 0").compareDocumentPosition(toggle) &
+        Node.DOCUMENT_POSITION_PRECEDING,
+    ).toBeTruthy();
     fireEvent.click(toggle);
     expect(screen.queryByText("Update 5")).toBeNull();
-    expect(screen.getByText("Update 6")).toBeVisible();
-    expect(toggle).toHaveTextContent("Show 6 previous steps");
+    expect(screen.getByText("Update 10")).toBeVisible();
+    expect(toggle).toHaveTextContent("Update 10");
     expect(toggle).toHaveFocus();
+    view.rerender(
+      content(
+        updates(12).map((row, index) =>
+          index === 11 ? { ...row, authorId: "reviewer" } : row,
+        ),
+      ),
+    );
+    toggle = screen.getByRole("button", { name: /Show activity history/ });
+    expect(toggle).toHaveFocus();
+    expect(toggle).toHaveTextContent("Update 11");
+    expect(screen.getByTitle("reviewer")).toBeVisible();
+    expect(screen.queryByText("Update 10")).toBeNull();
+  } finally {
+    owner.dispose();
+  }
+});
+
+it("stacks distinct agents with overflow and removes the stack when history opens", () => {
+  const { owner, updates, content } = activityFixture();
+  try {
+    const authors = ["one", "two", "three", "four"];
+    render(
+      content(
+        updates(9).map((row, index) => ({
+          ...row,
+          authorId: authors[index % authors.length] ?? "one",
+        })),
+      ),
+    );
+    expect(screen.getByText("+1")).toBeVisible();
+    expect(screen.getAllByTitle("one")).toHaveLength(1);
+    expect(screen.getByTitle("two")).toBeVisible();
+    expect(screen.getByTitle("three")).toBeVisible();
+    expect(screen.queryByTitle("four")).toBeNull();
+    expect(
+      screen
+        .getByTitle("one")
+        .compareDocumentPosition(screen.getByTitle("two")) &
+        Node.DOCUMENT_POSITION_FOLLOWING,
+    ).toBeTruthy();
+    expect(
+      screen
+        .getByTitle("two")
+        .compareDocumentPosition(screen.getByTitle("three")) &
+        Node.DOCUMENT_POSITION_FOLLOWING,
+    ).toBeTruthy();
+    fireEvent.click(
+      screen.getByRole("button", { name: /Show activity history/ }),
+    );
+    expect(screen.queryByText("+1")).toBeNull();
+    expect(screen.getByText("Update 8")).toBeVisible();
+    const collapse = screen.getByRole("button", {
+      name: /Collapse activity history/,
+    });
+    expect(collapse).toHaveTextContent("Collapse");
+    expect(
+      screen.getByText("Update 8").compareDocumentPosition(collapse) &
+        Node.DOCUMENT_POSITION_PRECEDING,
+    ).toBeTruthy();
+    expect(screen.getByText("Update 0")).toBeVisible();
   } finally {
     owner.dispose();
   }
@@ -182,20 +249,22 @@ it("reveals an older folded message for an exact visit, then permits folding it
       }),
     );
     expect(screen.getByText("Update 0")).toBeVisible();
-    fireEvent.click(screen.getByRole("button", { name: "Show fewer" }));
+    fireEvent.click(
+      screen.getByRole("button", { name: /Collapse activity history/ }),
+    );
     expect(screen.queryByText("Update 0")).toBeNull();
   } finally {
     owner.dispose();
   }
 });
 
-it("does not fold short runs, normal replies, or non-Solo timelines", () => {
+it("uses one preview in channels and separates runs at public replies", () => {
   const { owner, updates, content } = activityFixture();
   try {
     const rows = updates(9);
     const view = render(content(rows, undefined, false));
-    expect(screen.getByText("Update 0")).toBeVisible();
-    expect(screen.queryByRole("button", { name: /previous steps/ })).toBeNull();
+    expect(screen.queryByText("Update 0")).toBeNull();
+    expect(screen.getByText("Update 8")).toBeVisible();
     const middle = rows[4];
     if (!middle) throw new Error("Missing fixture reply");
     const { audience: _audience, ...publicReply } = middle;
@@ -206,20 +275,23 @@ it("does not fold short runs, normal replies, or non-Solo timelines", () => {
         ...rows.slice(5),
       ]),
     );
-    expect(screen.getByText("Update 0")).toBeVisible();
+    expect(screen.queryByText("Update 0")).toBeNull();
+    expect(screen.getByText("4 completed steps")).toBeVisible();
     expect(screen.getByText("Main reply")).toBeVisible();
-    expect(screen.getByText("Update 5")).toBeVisible();
-    expect(screen.queryByRole("button", { name: /previous steps/ })).toBeNull();
+    expect(screen.getByText("Update 8")).toBeVisible();
+    expect(
+      screen.getAllByRole("button", { name: /Show activity history/ }),
+    ).toHaveLength(2);
   } finally {
     owner.dispose();
   }
 });
 
 it.each([
-  { anchor: "activity-8", expanded: false },
+  { anchor: "activity-8", expanded: true },
   { anchor: "activity-0", expanded: true },
 ])(
-  "restores $anchor without unnecessarily expanding recent activity",
+  "restores exact activity $anchor by revealing its history",
   ({ anchor, expanded }) => {
     const { owner, updates, content } = activityFixture();
     writeView("activity-folding", "scroll:alpha", {
@@ -230,7 +302,7 @@ it.each([
     try {
       render(content(updates(9)));
       const toggle = screen.getByRole("button", {
-        name: expanded ? "Show fewer" : "Show 4 previous steps",
+        name: expanded ? /Collapse activity history/ : /Show activity history/,
       });
       expect(toggle).toHaveAttribute("aria-expanded", String(expanded));
       if (expanded) expect(screen.getByText("Update 0")).toBeVisible();
@@ -245,19 +317,14 @@ it("starts visible and retained steps with author artwork after a hidden predece
   const { owner, updates, content } = activityFixture();
   try {
     render(content(updates(9)));
-    expect(screen.getByText("Update 4")).toHaveAttribute(
-      "data-stacked",
-      "false",
-    );
-    expect(screen.getByText("Update 5")).toHaveAttribute(
-      "data-stacked",
-      "true",
-    );
+    expect(screen.queryByText("Update 4")).toBeNull();
     fireEvent.click(
-      screen.getByRole("button", { name: "Show 4 previous steps" }),
+      screen.getByRole("button", { name: /Show activity history/ }),
     );
     fireEvent.click(screen.getByRole("button", { name: "Retain activity-2" }));
-    fireEvent.click(screen.getByRole("button", { name: "Show fewer" }));
+    fireEvent.click(
+      screen.getByRole("button", { name: /Collapse activity history/ }),
+    );
     expect(screen.getByText("Update 2")).toHaveAttribute(
       "data-stacked",
       "false",
@@ -271,7 +338,7 @@ it("starts visible and retained steps with author artwork after a hidden predece
   }
 });
 
-it("consumes a visit to a visible step without expanding it later on append", () => {
+it("retains an explicitly revealed step through later appends", () => {
   const { owner, updates, content } = activityFixture();
   try {
     const target = {
@@ -280,12 +347,12 @@ it("consumes a visit to a visible step without expanding it later on append", ()
     };
     const view = render(content(updates(9), target));
     expect(
-      screen.getByRole("button", { name: /previous steps/ }),
-    ).toHaveAttribute("aria-expanded", "false");
+      screen.getByRole("button", { name: /activity history/ }),
+    ).toHaveAttribute("aria-expanded", "true");
     view.rerender(content(updates(10), target));
     expect(
-      screen.getByRole("button", { name: /previous steps/ }),
-    ).toHaveAttribute("aria-expanded", "false");
+      screen.getByRole("button", { name: /activity history/ }),
+    ).toHaveAttribute("aria-expanded", "true");
   } finally {
     owner.dispose();
   }
@@ -297,10 +364,12 @@ it("does not expand history when visiting a retained visible step", () => {
     const rows = updates(9);
     const view = render(content(rows));
     fireEvent.click(
-      screen.getByRole("button", { name: "Show 4 previous steps" }),
+      screen.getByRole("button", { name: /Show activity history/ }),
     );
     fireEvent.click(screen.getByRole("button", { name: "Retain activity-2" }));
-    fireEvent.click(screen.getByRole("button", { name: "Show fewer" }));
+    fireEvent.click(
+      screen.getByRole("button", { name: /Collapse activity history/ }),
+    );
     expect(screen.getByText("Update 2")).toBeVisible();
     view.rerender(
       content(rows, {
@@ -309,7 +378,7 @@ it("does not expand history when visiting a retained visible step", () => {
       }),
     );
     expect(
-      screen.getByRole("button", { name: /previous steps/ }),
+      screen.getByRole("button", { name: /activity history/ }),
     ).toHaveAttribute("aria-expanded", "false");
   } finally {
     owner.dispose();
@@ -317,7 +386,7 @@ it("does not expand history when visiting a retained visible step", () => {
 });
 
 it.each([false, true])(
-  "does not expand a previously visible restore anchor after append (bottom: %s)",
+  "preserves the initial restore expansion decision after append (bottom: %s)",
   (bottom) => {
     const { owner, updates, content } = activityFixture();
     writeView("activity-folding", "scroll:alpha", {
@@ -329,8 +398,8 @@ it.each([false, true])(
       const view = render(content(updates(9)));
       view.rerender(content(updates(10)));
       expect(
-        screen.getByRole("button", { name: /previous steps/ }),
-      ).toHaveAttribute("aria-expanded", "false");
+        screen.getByRole("button", { name: /activity history/ }),
+      ).toHaveAttribute("aria-expanded", String(!bottom));
     } finally {
       owner.dispose();
     }
@@ -347,10 +416,9 @@ it("waits for the first non-empty window to resolve a hidden saved activity anch
   try {
     const view = render(content([]));
     view.rerender(content(updates(9)));
-    expect(screen.getByRole("button", { name: "Show fewer" })).toHaveAttribute(
-      "aria-expanded",
-      "true",
-    );
+    expect(
+      screen.getByRole("button", { name: /Collapse activity history/ }),
+    ).toHaveAttribute("aria-expanded", "true");
     expect(screen.getByText("Update 0")).toBeVisible();
   } finally {
     owner.dispose();
@@ -371,9 +439,11 @@ it.each(["collapse", "wheel"])(
       const view = render(content(rows.slice(5)));
       if (intent === "collapse") {
         fireEvent.click(
-          screen.getByRole("button", { name: "Show 4 previous steps" }),
+          screen.getByRole("button", { name: /Show activity history/ }),
+        );
+        fireEvent.click(
+          screen.getByRole("button", { name: /Collapse activity history/ }),
         );
-        fireEvent.click(screen.getByRole("button", { name: "Show fewer" }));
       } else {
         const timeline = view.container.querySelector(
           "[data-channel-timeline]",
@@ -383,7 +453,7 @@ it.each(["collapse", "wheel"])(
       }
       view.rerender(content(rows));
       expect(
-        screen.getByRole("button", { name: "Show 9 previous steps" }),
+        screen.getByRole("button", { name: /Show activity history/ }),
       ).toHaveAttribute("aria-expanded", "false");
       expect(screen.queryByText("Update 0")).toBeNull();
     } finally {
@@ -402,7 +472,7 @@ it("ignores a hidden reading anchor when restoring the bottom", () => {
   try {
     render(content(updates(9)));
     expect(
-      screen.getByRole("button", { name: /previous steps/ }),
+      screen.getByRole("button", { name: /activity history/ }),
     ).toHaveAttribute("aria-expanded", "false");
   } finally {
     owner.dispose();
@@ -740,3 +810,29 @@ it.each([
     owner.dispose();
   }
 });
+
+it("summarizes historical steps after the agent returns to a public reply without live completion state", () => {
+  const { owner, updates, content } = activityFixture();
+  try {
+    const rows = updates(3);
+    const last = rows[2];
+    if (!last) throw new Error("Missing fixture activity");
+    const { audience: _audience, ...base } = last;
+    const response = {
+      ...base,
+      id: "public-response",
+      createdAt: 110,
+      content: "Here is the result.",
+    };
+    const view = render(content([...rows, { ...response, authorId: "human" }]));
+    expect(screen.queryByText("3 completed steps")).toBeNull();
+    view.rerender(content([...rows, response]));
+    expect(screen.getByText("3 completed steps")).toBeVisible();
+    fireEvent.click(
+      screen.getByRole("button", { name: /Show activity history/ }),
+    );
+    expect(screen.getByText("Update 2")).toBeVisible();
+  } finally {
+    owner.dispose();
+  }
+});
diff --git a/src/features/messages/MessageRow.test.tsx b/src/features/messages/MessageRow.test.tsx
index ac28b4d433..b7a101db56 100644
--- a/src/features/messages/MessageRow.test.tsx
+++ b/src/features/messages/MessageRow.test.tsx
@@ -2650,6 +2650,56 @@ it("keeps the timestamp seek action beside a detached session card", () => {
   }
 });
 
+it("identifies the author on each activity summary in a message group", () => {
+  const props = {
+    row: { ...row, audience: "agents" as const },
+    profile: { name: "Activity author" },
+    media: () => undefined,
+    onOpenLink: () => false,
+    day: false,
+    retry: undefined,
+  };
+  try {
+    const { rerender } = renderDom(<MessageRow {...props} stackNext />);
+    expect(screen.getByTitle("Activity author")).toBeVisible();
+    rerender(<MessageRow {...props} stackPrevious />);
+    expect(screen.getByTitle("Activity author")).toBeVisible();
+  } finally {
+    cleanup();
+  }
+});
+
+it.each([280, 281])(
+  "caps activity previews at 280 characters (%s input)",
+  (length) => {
+    const content = "🙂".repeat(length);
+    try {
+      renderDom(
+        <MessageRow
+          row={{ ...row, audience: "agents", content }}
+          profile={{ name: "author" }}
+          media={() => undefined}
+          onOpenLink={() => false}
+          day={false}
+          retry={undefined}
+        />,
+      );
+      const preview = length === 280 ? content : `${"🙂".repeat(279)}…`;
+      const trigger = screen.getByRole("button", {
+        name: `author: ${preview}`,
+      });
+      expect(trigger).toHaveTextContent(preview);
+      fireEvent.click(trigger);
+      expect(screen.getByText(content)).toBeVisible();
+      expect(trigger).not.toHaveTextContent(preview);
+      fireEvent.click(trigger);
+      expect(trigger).toHaveTextContent(preview);
+    } finally {
+      cleanup();
+    }
+  },
+);
+
 it("shows a message for agents as one line from its author to whom it addresses", () => {
   const agent = keypair();
   const rivet = "b".repeat(64);
@@ -2693,43 +2743,18 @@ it("shows a message for agents as one line from its author to whom it addresses"
       name: "Morgarita to Rivet: **run** the suite…",
     });
     expect(line).toHaveAttribute("aria-expanded", "false");
-    const timestamp = line.parentElement?.querySelector("time");
-    const timestampSlot = timestamp?.parentElement;
-    expect(timestamp).toBeVisible();
-    expect(
-      screen.getByText(/(?:1969|1970) at /, {
-        selector: 'time > span[aria-hidden="true"]',
-      }),
-    ).toBeVisible();
+    expect(line.parentElement?.querySelector("time")).toBeNull();
     // Reveal focuses the scroll anchor with tabIndex -1; on the button, that
     // would take the only toggle out of the Tab order.
     expect(line).not.toHaveAttribute("data-message-id");
     expect(line.parentElement).toHaveAttribute("data-message-id");
     expect(screen.queryByText(/Then report back/)).toBeNull();
-    expect(line.parentElement?.querySelector("time:not(.sr-only)")).toBe(
-      timestamp,
-    );
+    expect(line.parentElement?.querySelector("time:not(.sr-only)")).toBeNull();
     fireEvent.pointerEnter(line);
-    expect(line.parentElement?.querySelector("time:not(.sr-only)")).toBe(
-      timestamp,
-    );
+    expect(line.parentElement?.querySelector("time:not(.sr-only)")).toBeNull();
     fireEvent.click(line);
     expect(line).toHaveAttribute("aria-expanded", "true");
-    // Expanding preserves the timestamp node and its trailing slot, rather
-    // than remounting it above the body and moving it to the opposite edge.
-    expect(
-      line.parentElement?.querySelectorAll("time:not(.sr-only)"),
-    ).toHaveLength(1);
-    expect(line.parentElement?.querySelector("time:not(.sr-only)")).toBe(
-      timestamp,
-    );
-    expect(timestamp?.parentElement).toBe(timestampSlot);
-    expect(line.parentElement?.lastElementChild).toBe(timestampSlot);
-    expect(
-      screen.getByText(/(?:1969|1970) at /, {
-        selector: 'time > span[aria-hidden="true"]',
-      }),
-    ).toBeVisible();
+    expect(line.parentElement?.querySelector("time:not(.sr-only)")).toBeNull();
     expect(
       screen.queryByRole("button", { name: "View Morgarita profile" }),
     ).toBeNull();
@@ -2738,13 +2763,9 @@ it("shows a message for agents as one line from its author to whom it addresses"
     expect(expanded?.querySelector('[class*="messageBubble"]')).toBeNull();
     expect(expanded?.querySelector("[data-own]")).toBeNull();
 
-    expect(line.parentElement?.querySelector("time:not(.sr-only)")).toBe(
-      timestamp,
-    );
+    expect(line.parentElement?.querySelector("time:not(.sr-only)")).toBeNull();
     fireEvent.pointerEnter(expanded ?? line);
-    expect(line.parentElement?.querySelector("time:not(.sr-only)")).toBe(
-      timestamp,
-    );
+    expect(line.parentElement?.querySelector("time:not(.sr-only)")).toBeNull();
     // Base UI binds the trigger to its panel. One stable message anchor stays
     // outside the animated content, including while that content is retiring.
     const panelId = line.getAttribute("aria-controls");
@@ -2763,9 +2784,7 @@ it("shows a message for agents as one line from its author to whom it addresses"
     // Anywhere in the open box folds it back.
     fireEvent.click(screen.getByText(/Then report back/));
     expect(line).toHaveAttribute("aria-expanded", "false");
-    expect(line.parentElement?.querySelector("time:not(.sr-only)")).toBe(
-      timestamp,
-    );
+    expect(line.parentElement?.querySelector("time:not(.sr-only)")).toBeNull();
   } finally {
     cleanup();
   }
@@ -3187,7 +3206,7 @@ it.each([0, 23])(
       });
       expect(summary).toHaveTextContent("1 failed");
       expect(summary).not.toHaveTextContent("View thread");
-      if (replyCount) expect(summary).toHaveTextContent("23 replies");
+      if (replyCount) expect(summary).not.toHaveTextContent("23 replies");
       expect(
         summary.querySelector('[data-thread-working] [data-state="working"]'),
       ).not.toBeNull();
diff --git a/src/features/messages/MessageRow.tsx b/src/features/messages/MessageRow.tsx
index 03ae301116..fcd00f99ad 100644
--- a/src/features/messages/MessageRow.tsx
+++ b/src/features/messages/MessageRow.tsx
@@ -1,3 +1,5 @@
+import { activityPresentation } from "./activity-presentation";
+import { ShimmerText } from "../../shared/design-system/ui/ShimmerText";
 import { Collapsible } from "@base-ui/react/collapsible";
 import { formatItemTimestamp } from "../../shared/datetime";
 import { ProfilePeek } from "../profiles/ProfilePeek";
@@ -8,11 +10,7 @@ import {
 } from "../conversation/typing-presentation";
 import { breathing, localActivity } from "../agents/local-activity";
 import { Avatar } from "../../shared/design-system/ui/Avatar";
-import {
-  ArrowRightIcon,
-  LightningIcon,
-  RobotIcon,
-} from "../../shared/design-system/icons";
+import { LightningIcon, RobotIcon } from "../../shared/design-system/icons";
 import { useProfileOwner } from "../profiles/useProfileOwner";
 import { messagePreviewText } from "../conversation/message-preview-text";
 import { profileMentionParts } from "./profile-mentions";
@@ -99,6 +97,9 @@ import { avatarMedia } from "../../shared/avatar-source";
 export type MessageLinkOrigin = Readonly<{ rootId: string }>;
 export type MessageRowProps = {
   row: ChannelMessage;
+  activityMotionKey?: string | undefined;
+  activityFollows?: boolean | undefined;
+  activityActive?: boolean | undefined;
   staticMentions?: boolean | undefined;
   getThreadRoot?: (() => ChannelMessage | undefined) | undefined;
   session?: RelaySession | undefined;
@@ -193,6 +194,7 @@ function MessageRowContent({
   viewer = session?.viewer,
   stackPrevious = layout === "continuation",
   stackNext = false,
+  activityFollows = false,
   alignViewer = true,
 
   mediaMode = "inline",
@@ -711,7 +713,6 @@ function MessageRowContent({
     const remainingWorkingLabel = remainingThreadAgents.length
       ? `${remainingThreadAgents.map(({ pubkey, name }) => resolveName(pubkey, name)).join(", ")} ${threadWaiting ? "waiting" : "working"}`
       : undefined;
-    const activityOnly = !!activity && row.replyCount === 0;
     return (
       ((row.replyCount > 0 ||
         (startsThreads && !row.threadRootId && threadAgents.length > 0) ||
@@ -719,11 +720,13 @@ function MessageRowContent({
         onOpenThread && (
           <Button
             ref={activity?.ref}
-            variant={activityOnly ? "subtle" : "ghost"}
-            size={activityOnly ? "xs" : "sm"}
+            variant="ghost"
+            size="sm"
             data-thread-summary=""
-            data-activity-summary={activityOnly ? "" : undefined}
-            data-reply-connector={row.replyCount > 0 || undefined}
+            data-activity-summary={activity ? "" : undefined}
+            data-reply-connector={
+              (!activity && row.replyCount > 0) || undefined
+            }
             data-first-participant-shape={
               agentPubkeys?.has(row.participants[0] ?? "")
                 ? "squircle"
@@ -741,8 +744,8 @@ function MessageRowContent({
             }}
           >
             <ReplySummary
-              hideEmptyLabel={activityOnly}
-              count={row.replyCount}
+              hideEmptyLabel={!!activity}
+              count={activity ? 0 : row.replyCount}
               participants={row.participants}
               profiles={participantProfiles}
               agentPubkeys={agentPubkeys}
@@ -851,6 +854,7 @@ function MessageRowContent({
         className={styles.message}
         data-layout={layout}
         data-stack-previous={stackPrevious || undefined}
+        data-activity-follows={activityFollows || undefined}
         data-stack-next={stackNext || undefined}
         data-viewer-message={
           alignViewer && !row.workflowOwnerId && row.authorId === viewer
@@ -1293,6 +1297,19 @@ export const MessageRow = memo(function AudienceMessageRow(
 function AgentsMessageRow(props: MessageRowProps) {
   const { row, session, media, participantProfiles, agentPubkeys } = props;
   const [open, setOpen] = useState(false);
+  const activity = useSyncExternalStore(
+    session?.agentActivity?.subscribe ?? noSubscribe,
+    session?.agentActivity?.snapshot ?? noLibrary,
+  );
+  const active =
+    props.activityActive ??
+    activityPresentation(
+      [row],
+      activity,
+      agentPubkeys,
+      row.threadRootId,
+    ).byRow.get(row.id)?.active ??
+    false;
   const keepMounted = props.keepMounted;
   useEffect(() => {
     if (open) return keepMounted?.(row.id);
@@ -1324,9 +1341,26 @@ function AgentsMessageRow(props: MessageRowProps) {
   const to = recipients.map((pubkey) =>
     person(pubkey, directory.profiles.get(pubkey)),
   );
-  const preview = messagePreviewText(body.content);
+  const excerpt = Array.from(
+    messagePreviewText(body.content).replace(/\s+/g, " "),
+  );
+  const preview =
+    excerpt.length > 280
+      ? `${excerpt.slice(0, 279).join("")}…`
+      : excerpt.join("");
+  const addressedPreview = Array.from(
+    `${to.length ? `${to.map((who) => `@${who.name}`).join(", ")} ` : ""}${preview}`,
+  );
+  const visiblePreview =
+    addressedPreview.length > 280
+      ? `${addressedPreview.slice(0, 279).join("")}…`
+      : addressedPreview.join("");
   const avatar = (who: typeof author) => (
-    <span key={who.pubkey} className={styles.audienceAvatar} title={who.name}>
+    <span
+      className={styles.audienceAvatar}
+      title={who.name}
+      data-avatar-motion-key={props.activityMotionKey}
+    >
       <AgentAvatar
         session={session}
         agentPubkey={who.pubkey}
@@ -1342,7 +1376,7 @@ function AgentsMessageRow(props: MessageRowProps) {
   return (
     <FullMessageRow
       {...props}
-      shownRow={body}
+      shownRow={row}
       alignViewer={false}
       day={false}
       layout="continuation"
@@ -1352,6 +1386,10 @@ function AgentsMessageRow(props: MessageRowProps) {
         <div
           className={styles.audienceRow}
           data-audience="agents"
+          data-coordination={to.length > 0 || undefined}
+          data-layout={props.layout ?? "timeline"}
+          data-stack-previous={props.stackPrevious || undefined}
+          data-stack-next={props.stackNext || undefined}
           data-viewer-message={
             (props.alignViewer ?? true) &&
             !row.workflowOwnerId &&
@@ -1362,8 +1400,7 @@ function AgentsMessageRow(props: MessageRowProps) {
           data-open={open || undefined}
         >
           {props.day && <DayDivider createdAt={row.createdAt} />}
-          {/* Keep the address column and trailing time stable while the
-              details open and close. */}
+          {/* Keep the address column stable while details open and close. */}
           <Collapsible.Root
             open={open}
             onOpenChange={setOpen}
@@ -1394,22 +1431,14 @@ function AgentsMessageRow(props: MessageRowProps) {
               aria-label={`${author.name}${to.length ? ` to ${to.map((who) => who.name).join(", ")}` : ""}: ${preview}`}
             >
               {avatar(author)}
-              {to.length > 0 && (
-                <>
-                  <ArrowRightIcon
-                    size={12}
-                    aria-hidden="true"
-                    className={styles.audienceArrow}
-                  />
-                  {to.map(avatar)}
-                </>
-              )}
               {!open && (
-                <span className={styles.audiencePreview}>{preview}</span>
+                <span className={styles.audiencePreviewText}>
+                  <ShimmerText active={active}>{visiblePreview}</ShimmerText>
+                </span>
               )}
             </Collapsible.Trigger>
             <Collapsible.Panel
-              className={`${styles.audiencePanel} ${styles.activityExpansion} ${styles.audienceBody}`}
+              className={`${styles.audiencePanel} ${styles.audienceBody}`}
               inert={!open || undefined}
               aria-hidden={!open || undefined}
             >
@@ -1417,9 +1446,6 @@ function AgentsMessageRow(props: MessageRowProps) {
                 <div className={styles.audienceContent}>{message}</div>
               </div>
             </Collapsible.Panel>
-            <span className={styles.audienceTime}>
-              <MessageTimestamp createdAt={row.createdAt} />
-            </span>
           </Collapsible.Root>
         </div>
       )}
diff --git a/src/features/messages/Messages.module.css b/src/features/messages/Messages.module.css
index e0b4ab5f4c..fcd93bca76 100644
--- a/src/features/messages/Messages.module.css
+++ b/src/features/messages/Messages.module.css
@@ -807,7 +807,7 @@ html[data-keyboard-navigation] .attachmentImage:focus-visible {
   font-weight: var(--type-weight-regular);
   margin-top: var(--space-1);
 }
-.messageBody [data-thread-summary]:not([data-activity-summary]) {
+.messageBody [data-thread-summary] {
   padding: var(--space-1);
   padding-right: var(--space-1h);
 }
@@ -2898,7 +2898,8 @@ html[data-keyboard-navigation] .rawDiff:focus-visible {
 .message[data-layout="timeline"] {
   padding-block: var(--space-2);
 }
-.message[data-stack-next] {
+.message[data-stack-next],
+.message[data-activity-follows] {
   padding-bottom: 0;
 }
 .message[data-stack-previous] {
@@ -3007,18 +3008,11 @@ html[data-keyboard-navigation] .rawDiff:focus-visible {
   display: none;
 }
 
-/* Agent coordination shares the conversation's measure. Avatars and quiet
-   type distinguish it without a second rail or a full message bubble. */
+/* Agent activity shares the conversation measure with compact, content-sized rows. */
 .activityDisclosure {
   width: min(100%, var(--timeline-measure));
   margin-inline: auto;
-  padding-block: var(--space-1);
-}
-.activityChevron {
-  transform: rotate(-90deg);
-}
-.activityDisclosure [aria-expanded="true"] .activityChevron {
-  transform: rotate(0deg);
+  padding-block: 0;
 }
 .activityExpansionRoot {
   display: contents;
@@ -3038,99 +3032,123 @@ html[data-keyboard-navigation] .rawDiff:focus-visible {
   .activityExpansion {
     transition: grid-template-rows var(--duration-settle) var(--easing-enter);
   }
-  .activityChevron {
-    transition: transform var(--duration-state) var(--easing-enter);
-  }
 }
 .audienceRow {
+  position: relative;
+  --activity-avatar-size: var(--size-control-sm);
+  --activity-gap: var(--space-2);
+  --message-side-space: calc(var(--activity-avatar-size) + var(--activity-gap));
   container: audience-row / inline-size;
   width: min(100%, var(--timeline-measure));
   margin-inline: auto;
-  padding-block: var(--space-1);
+  padding-block: var(--space-half) 0;
+}
+.audienceRow[data-layout="timeline"],
+.feed .audienceRow[data-layout="continuation"] {
+  --activity-avatar-size: var(--size-control);
+  --activity-gap: var(--space-3);
+}
+.audienceRow[data-stack-next] {
+  padding-block-end: 0;
+}
+.audienceRow[data-stack-previous] {
+  padding-block-start: var(--space-half);
 }
 .audienceLine {
+  position: relative;
   display: flex;
-  flex: 1;
   align-items: center;
-  gap: var(--space-1h);
-  inline-size: 100%;
+  gap: var(--space-2);
+  inline-size: fit-content;
+  max-inline-size: calc(100% - var(--space-3));
+  align-self: flex-start;
+  margin-inline-start: var(--space-3);
   min-inline-size: 0;
-  padding: var(--space-1);
+  padding: var(--space-1) var(--space-1h) var(--space-1) var(--space-1);
   border: 0;
   border-radius: var(--radius-control);
   background: none;
   cursor: pointer;
-  color: var(--text-subtle);
-  font: inherit;
+  color: var(--text-standard);
   font-size: var(--text-caption);
   line-height: var(--text-caption--line-height);
   letter-spacing: var(--text-caption--letter-spacing);
+  font-weight: var(--type-weight-regular);
   text-align: start;
 }
-.audienceEntry:has(.audienceLine:hover) {
-  background: var(--affordance-subtle-hover);
-}
-html[data-keyboard-navigation] .audienceLine:focus-visible {
+html[data-keyboard-navigation] .audienceEntry:has(.audienceLine:focus-visible) {
   outline: 2px solid var(--border-focus);
   outline-offset: -2px;
 }
 .audienceEntry {
+  position: relative;
+  font-size: var(--text-body-sm);
+  box-sizing: border-box;
+  padding-inline-start: var(--message-side-space);
+  /* Match the message body reservation and its prose bubble's reading measure. */
+  max-inline-size: min(
+    100%,
+    calc(
+      var(--message-side-space) +
+      min(
+        85%,
+        46rem,
+        max(60%, calc(100% - 2 * var(--message-side-space) - var(--space-4))),
+        calc(60ch + 2 * var(--space-4))
+      )
+    )
+  );
   display: flex;
-  align-items: flex-start;
+  flex-direction: column;
+  align-items: stretch;
   border-radius: var(--radius-control);
 }
-.audienceTime {
-  flex: none;
-  padding: var(--space-2) var(--space-1);
-  color: var(--text-subtle);
-  font-size: var(--text-caption);
-  line-height: var(--text-caption--line-height);
-  letter-spacing: var(--text-caption--letter-spacing);
-  white-space: nowrap;
-}
+/* The detail replaces the preview in the same text column, with the avatar
+   aligned to the parent bubble's text inset throughout expansion. */
 .audienceRow:has(.audienceBody) .audienceEntry {
+  display: grid;
+  grid-template-columns: calc(
+      var(--space-3) +
+      var(--space-1) +
+      1.5rem +
+      var(--space-2)
+    ) minmax(0, 1fr);
+  align-items: start;
   cursor: pointer;
-  background: var(--affordance-subtle);
-}
-.audienceRow:has(.audienceBody) .audienceEntry:hover {
-  background: var(--affordance-subtle-hover);
 }
 .audienceRow:has(.audienceBody) .audienceLine {
-  flex: none;
-  inline-size: auto;
-  padding-inline-end: var(--space-1h);
-  background: none;
+  grid-area: 1 / 1;
+  inline-size: calc(1.5rem + var(--space-1) + var(--space-1h));
 }
-/* Open, the text keeps the line's size and colour and starts where its
-   preview was, so expanding only lets it run on. */
 .audiencePanel {
-  flex: 1;
+  grid-area: 1 / 2;
   min-inline-size: 0;
 }
+/* Base UI measures the full text; the collapsed endpoint is one avatar row. */
 .audienceBody {
-  --activity-content-inset: calc(
-    (
-      var(--size-control-sm) *
-      0.75 -
-      var(--text-caption) *
-      var(--text-caption--line-height)
-    ) /
-    2 +
-    var(--space-1)
-  );
-  /* The preview hands off to a readable first line immediately. Only the
-     additional space expands, avoiding a blank frame at either endpoint. */
-  --activity-reveal-min: calc(
-    var(--activity-content-inset) +
-    var(--text-caption) *
-    var(--text-caption--line-height)
-  );
-  color: var(--text-subtle);
+  box-sizing: border-box;
+  height: var(--collapsible-panel-height);
+  min-height: calc(1.5rem + 2 * var(--space-1));
+  overflow: clip;
+  color: var(--text-standard);
+}
+.audienceBody:is([data-starting-style], [data-ending-style]) {
+  height: calc(1.5rem + 2 * var(--space-1));
+}
+@media (prefers-reduced-motion: no-preference) {
+  html:not([data-keyboard-navigation]) .audienceBody {
+    transition: height var(--duration-state) var(--easing-enter);
+  }
 }
 .audienceContent {
-  padding-block-end: var(--space-2);
-  padding-block-start: var(--activity-content-inset);
-  color: var(--text-subtle);
+  /* Preserve the preview baseline: its line is centered in a 24px avatar. */
+  padding: calc(
+      var(--space-1) +
+      (1.5rem - var(--text-caption) * var(--text-caption--line-height)) /
+      2
+    )
+    var(--space-1h) var(--space-1) 0;
+  color: var(--text-standard);
 }
 .audienceBody .message[data-layout="continuation"] {
   width: 100%;
@@ -3155,44 +3173,20 @@ html[data-keyboard-navigation] .audienceLine:focus-visible {
 .audienceAvatar {
   display: grid;
   flex: none;
-  inline-size: calc(var(--size-control-sm) * 0.75);
-  block-size: calc(var(--size-control-sm) * 0.75);
-}
-.audienceArrow {
-  flex: none;
-  color: var(--text-subtle);
+  inline-size: 1.5rem;
+  block-size: 1.5rem;
 }
-.audiencePreview {
-  flex: 1;
+.audiencePreviewText {
   min-inline-size: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-
-/* Retain the expanded columns during exit, so wrapping and the preview do
-   not replace the closing details before their space has folded away. */
-.audienceRow:has(.audienceBody) .audiencePreview {
+.audienceRow:has(.audienceBody) .audiencePreviewText {
   display: none;
 }
-
-/* At narrow widths or enlarged text, give the details the full reading width
-   while keeping the avatars and clock on their original header line. */
-@container audience-row (max-width: 28rem) {
-  .audienceRow:has(.audienceBody) .audienceEntry {
-    flex-wrap: wrap;
-  }
-  .audienceBody {
-    --activity-content-inset: var(--space-1);
-    order: 1;
-    flex-basis: 100%;
-  }
-  .audienceContent {
-    padding: var(--space-1) var(--space-1) var(--space-2);
-  }
-  .audienceTime {
-    margin-inline-start: auto;
-  }
+.audienceLine:hover {
+  background: var(--affordance-subtle-hover);
 }
 
 /* Returning from a thread only paints its already-visible origin. The wash
@@ -3320,3 +3314,37 @@ html[data-keyboard-navigation]
   min-width: 0;
   max-width: calc(100% - var(--size-control));
 }
+
+/* Shared-position avatar motion owns this toggle; avoid competing height motion. */
+[data-activity-matching] .activityExpansion {
+  transition: none;
+}
+[data-activity-matching] .activityExpansionContent {
+  overflow: visible;
+}
+html[data-keyboard-navigation] .activityExpansion {
+  transition: none;
+}
+
+.audienceLine[data-collapse] {
+  color: var(--text-subtle);
+}
+.activityCollapseIcon {
+  flex: none;
+  width: var(--space-4);
+  height: var(--space-4);
+  color: var(--text-subtle);
+  opacity: 0.5;
+}
+
+/* Extend the native button hit target, keeping its painted surface content-sized. */
+.audienceRow[data-collapse] > .audienceEntry,
+.audienceLine[data-collapse] {
+  position: static;
+}
+.audienceLine[data-collapse]::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  cursor: pointer;
+}
diff --git a/src/features/messages/ThreadPanel.tsx b/src/features/messages/ThreadPanel.tsx
index b20cf1731e..0bf2d528f2 100644
--- a/src/features/messages/ThreadPanel.tsx
+++ b/src/features/messages/ThreadPanel.tsx
@@ -1,4 +1,12 @@
 // biome-ignore-all lint/a11y/noNoninteractiveTabindex: The thread region supports keyboard scrolling and Escape.
+import { ActivityExpansion } from "./ActivityExpansion";
+import { ActivityGroupPreview } from "./ActivityGroupPreview";
+import {
+  activityPresentation,
+  useActivitySnapshot,
+} from "./activity-presentation";
+import { activityGroups } from "./activity-groups";
+import { DayDivider } from "./MessageTimestamp";
 import { workflowLabel } from "../relay/workflow-attribution";
 import { usePanelTabHost } from "../panels/PanelWorkspace";
 import { MessageEditScope } from "./MessageEditScope";
@@ -31,7 +39,10 @@ import type { ThreadView } from "../relay/threads";
 import { useRowProfiles } from "../relay/react";
 import { rowProfileIds } from "../relay/membership";
 import { MessageRow, type MessageLinkOrigin } from "./MessageRow";
-import { continuesMessageGroup } from "./message-grouping";
+import {
+  continuesMessageGroup,
+  publicMessageNeighbor,
+} from "./message-grouping";
 import { MessageComposer } from "./MessageComposer";
 import { ChannelJoinNotice } from "./ChannelJoinNotice";
 import { useListedChannel } from "../relay/listed-channel";
@@ -519,6 +530,7 @@ function ThreadMessages({
     view.snapshot,
     view.snapshot,
   );
+  const activitySnapshot = useActivitySnapshot(session.agentActivity);
   const resolvedRoot = snapshot.root?.id;
   const reportRoot = useRef(onResolvedRoot);
   reportRoot.current = onResolvedRoot;
@@ -563,6 +575,24 @@ function ThreadMessages({
     [session.unread, channelId, snapshot.root?.id, messageId],
   );
   useSyncExternalStore(subscribeUnread, unreadSnapshot, unreadSnapshot);
+  const [expandedActivity, setExpandedActivity] = useState<ReadonlySet<string>>(
+    new Set(),
+  );
+  const activityVisit = useRef<string | undefined>(undefined);
+  useLayoutEffect(() => {
+    if (
+      !messageId ||
+      activityVisit.current === messageId ||
+      !snapshot.replies.some((row) => row.id === messageId)
+    )
+      return;
+    activityVisit.current = messageId;
+    const group = [...tree.children.values()]
+      .flatMap((rows) => activityGroups(rows))
+      .find((group) => group.ids.includes(messageId));
+    const first = group?.ids[0];
+    if (first) setExpandedActivity((current) => new Set([...current, first]));
+  }, [messageId, snapshot.replies, tree]);
   const [expanded, setExpanded] = useState<ReadonlySet<string>>(new Set());
   const [replyParent, setReplyParent] = useState<string>();
   const resolveName = useChannelIdentityNames(session, channelId);
@@ -1187,13 +1217,37 @@ function ThreadMessages({
   let previousParent: string | undefined;
   function renderReplies(parent: string | undefined, depth = 0): ReactNode {
     const siblings = tree.children.get(parent) ?? [];
+    const presentation = activityPresentation(
+      siblings,
+      activitySnapshot,
+      agentPubkeys,
+      rootId,
+    );
+    const groups = presentation.groups.filter((group) =>
+      group.ids.every((id) => !tree.children.get(id)?.length),
+    );
+    const hidden = new Set(
+      groups.flatMap((group) =>
+        expandedActivity.has(group.ids[0] ?? "") ? [] : group.ids,
+      ),
+    );
     return siblings.map((row, index) => {
-      const nextRow = siblings[index + 1];
+      const group = groups.find((group) => group.ids[0] === row.id);
+      if (hidden.has(row.id) && !group) return null;
+      const nextRow =
+        row.audience === "agents"
+          ? siblings[index + 1]
+          : publicMessageNeighbor(siblings, index, 1);
       const children = tree.children.get(row.id);
       const continuation =
         previousReply !== snapshot.root &&
         previousParent === parent &&
-        continuesMessageGroup(previousReply, row);
+        continuesMessageGroup(
+          row.audience === "agents"
+            ? previousReply
+            : publicMessageNeighbor(siblings, index, -1),
+          row,
+        );
       const day =
         !previousReply ||
         new Date(previousReply.createdAt * 1000).toDateString() !==
@@ -1209,35 +1263,45 @@ function ThreadMessages({
         ? `${unreadCount} new in available replies`
         : undefined;
       const message = (
-        <MessageRow
-          viewer={session.viewer}
-          extensions={extensions}
-          session={session}
-          scope={scope}
-          onReply={snapshot.root && !soloConversation ? targetReply : undefined}
-          row={row}
-          getThreadRoot={getThreadRoot}
-          stackPrevious={continuation}
-          stackNext={
-            !!nextRow &&
-            continuesMessageGroup(row, nextRow) &&
-            !children?.length
-          }
-          profile={profiles.get(row.authorId)}
-          participantProfiles={profiles}
-          agentPubkeys={agentPubkeys}
-          media={session.media}
-          onOpenLink={onOpenLink}
-          canOpenLink={canOpenLink}
-          day={day}
-          layout={continuation ? "continuation" : "thread"}
-          compactAvatar={depth > 0}
-          retry={session.messages.retry}
-          {...(canSeekVideo ? { onMediaTime: handleMediaTime } : {})}
-          {...(onOpenMediaReview && rootId
-            ? { onOpenMediaReview: openRootMedia }
-            : {})}
-        />
+        <ActivityExpansion
+          open={!hidden.has(row.id)}
+          enabled={row.audience === "agents"}
+        >
+          <MessageRow
+            activityFollows={siblings[index + 1]?.audience === "agents"}
+            activityMotionKey={presentation.byRow.get(row.id)?.motionKey}
+            activityActive={presentation.byRow.get(row.id)?.active}
+            viewer={session.viewer}
+            extensions={extensions}
+            session={session}
+            scope={scope}
+            onReply={
+              snapshot.root && !soloConversation ? targetReply : undefined
+            }
+            row={row}
+            getThreadRoot={getThreadRoot}
+            stackPrevious={continuation}
+            stackNext={
+              !!nextRow &&
+              continuesMessageGroup(row, nextRow) &&
+              !children?.length
+            }
+            profile={profiles.get(row.authorId)}
+            participantProfiles={profiles}
+            agentPubkeys={agentPubkeys}
+            media={session.media}
+            onOpenLink={onOpenLink}
+            canOpenLink={canOpenLink}
+            day={day}
+            layout={continuation ? "continuation" : "thread"}
+            compactAvatar={depth > 0}
+            retry={session.messages.retry}
+            {...(canSeekVideo ? { onMediaTime: handleMediaTime } : {})}
+            {...(onOpenMediaReview && rootId
+              ? { onOpenMediaReview: openRootMedia }
+              : {})}
+          />
+        </ActivityExpansion>
       );
       return (
         <li
@@ -1252,6 +1316,31 @@ function ThreadMessages({
             </p>
           )}
 
+          {group && (
+            <>
+              {day && hidden.has(row.id) && (
+                <DayDivider createdAt={row.createdAt} />
+              )}
+              <ActivityGroupPreview
+                group={group}
+                profiles={profiles}
+                media={session.media}
+                layout="thread"
+                expanded={expandedActivity.has(group.ids[0] ?? "")}
+                onToggle={() => {
+                  follow.current = false;
+                  targetAnchor.current = undefined;
+                  setExpandedActivity((current) => {
+                    const next = new Set(current);
+                    const first = group.ids[0] ?? row.id;
+                    if (next.has(first)) next.delete(first);
+                    else next.add(first);
+                    return next;
+                  });
+                }}
+              />
+            </>
+          )}
           <ReplyBranch
             message={message}
             hasReplies={!!children?.length}
@@ -1447,7 +1536,11 @@ function ThreadMessages({
               : undefined
           }
         />
-        <div data-thread-rows="" inert={positioning}>
+        <div
+          data-thread-rows=""
+          data-activity-history-scope=""
+          inert={positioning}
+        >
           {snapshot.root ? (
             <MessageRow
               viewer={session.viewer}
diff --git a/src/features/messages/activity-avatar-motion.ts b/src/features/messages/activity-avatar-motion.ts
new file mode 100644
index 0000000000..58abc2c6fc
--- /dev/null
+++ b/src/features/messages/activity-avatar-motion.ts
@@ -0,0 +1,121 @@
+import { spring } from "motion";
+import styles from "./Messages.module.css";
+import { flushSync } from "react-dom";
+const running = new WeakMap<HTMLElement, Animation[]>();
+function avatars(scope: HTMLElement, group: string) {
+  return new Map(
+    [...scope.querySelectorAll<HTMLElement>("[data-avatar-motion-key]")]
+      .filter(
+        (node) =>
+          node.dataset.avatarMotionKey?.startsWith(`${group}:`) &&
+          !node.closest("[inert]") &&
+          node.getBoundingClientRect().height > 0,
+      )
+      .map((node) => [node.dataset.avatarMotionKey ?? "", node]),
+  );
+}
+
+/** FLIP only the avatar artwork. No new layout engine or animation dependency. */
+export function toggleActivityHistory(
+  button: HTMLButtonElement,
+  toggle: () => void,
+  keyboard: boolean,
+  group: string,
+) {
+  const scope = button.closest<HTMLElement>("[data-activity-history-scope]");
+  const view = button.ownerDocument.defaultView;
+  if (!scope || !view) return toggle();
+  const visibleRows = new Set(
+    [...scope.querySelectorAll<HTMLElement>('[data-audience="agents"]')].filter(
+      (node) => !node.closest("[inert]"),
+    ),
+  );
+  const before = new Map(
+    [...avatars(scope, group)].map(([key, node]) => [
+      key,
+      node.getBoundingClientRect(),
+    ]),
+  );
+  for (const animation of running.get(scope) ?? []) animation.cancel();
+  running.delete(scope);
+  delete scope.dataset.activityMatching;
+  if (
+    keyboard ||
+    view.matchMedia("(prefers-reduced-motion: reduce)").matches ||
+    typeof button.animate !== "function"
+  )
+    return toggle();
+  scope.dataset.activityMatching = "";
+  flushSync(toggle);
+  // Match the composer's gentle spring, sampled for native WAAPI playback.
+  const duration = 240;
+  const curve = spring({ keyframes: [0, 1], duration, bounce: 0.15 });
+  const easing = `linear(${Array.from({ length: 31 }, (_, index) =>
+    index === 30 ? 1 : curve.next((index * duration) / 30).value,
+  ).join(", ")})`;
+  const animations: Animation[] = [];
+  for (const [key, node] of avatars(scope, group)) {
+    const from = before.get(key);
+    const to = node.getBoundingClientRect();
+    if (!to.width || !to.height) continue;
+    if (from && (Math.abs(from.x - to.x) > 1 || Math.abs(from.y - to.y) > 1)) {
+      const artwork = node.firstElementChild;
+      if (artwork instanceof HTMLElement)
+        animations.push(
+          artwork.animate(
+            [
+              { filter: "blur(0px)", transform: "scale(1, 1)" },
+              {
+                filter: "blur(0.7px)",
+                transform: "scale(0.97, 1.03)",
+                offset: 0.35,
+              },
+              { filter: "blur(0px)", transform: "scale(1, 1)" },
+            ],
+            { duration, easing: "ease-out", fill: "both" },
+          ),
+        );
+    }
+    animations.push(
+      node.animate(
+        from
+          ? [
+              {
+                transform: `translate(${from.x - to.x}px, ${from.y - to.y}px) scale(${from.width / to.width}, ${from.height / to.height})`,
+                transformOrigin: "top left",
+              },
+              { transform: "none", transformOrigin: "top left" },
+            ]
+          : [{ opacity: 0 }, { opacity: 1 }],
+        { duration, easing, fill: "both" },
+      ),
+    );
+  }
+  for (const row of scope.querySelectorAll<HTMLElement>(
+    '[data-audience="agents"]',
+  )) {
+    if (visibleRows.has(row) || row.closest("[inert]")) continue;
+    const text = row.querySelector<HTMLElement>(
+      `.${styles.audiencePreviewText}`,
+    );
+    if (text)
+      animations.push(
+        text.animate(
+          [
+            { transform: "translateY(4px)", opacity: 0 },
+            { transform: "none", opacity: 1 },
+          ],
+          { duration, easing, fill: "both" },
+        ),
+      );
+  }
+  running.set(scope, animations);
+  void Promise.all(
+    animations.map((animation) => animation.finished.catch(() => {})),
+  ).then(() => {
+    if (running.get(scope) !== animations) return;
+    for (const animation of animations) animation.cancel();
+    running.delete(scope);
+    delete scope.dataset.activityMatching;
+  });
+}
diff --git a/src/features/messages/activity-groups.test.ts b/src/features/messages/activity-groups.test.ts
index 2a2f932369..3b1dbf28f9 100644
--- a/src/features/messages/activity-groups.test.ts
+++ b/src/features/messages/activity-groups.test.ts
@@ -22,8 +22,8 @@ const activity = (
 const run = (prefix: string, count = 6) =>
   Array.from({ length: count }, (_, index) => activity(`${prefix}${index}`));
 
-it("folds only runs longer than five and includes different agents in a run", () => {
-  expect(activityGroups(run("a", 5))).toEqual([]);
+it("folds consecutive activity into one preview and includes different agents in a run", () => {
+  expect(activityGroups(run("a", 1))).toEqual([]);
   const rows = run("a");
   rows[2] = activity("other-agent", { authorId: "other" });
   expect(activityGroups(rows)).toEqual([{ ids: rows.map((row) => row.id) }]);
diff --git a/src/features/messages/activity-groups.ts b/src/features/messages/activity-groups.ts
index 71ee4218e1..d15577888a 100644
--- a/src/features/messages/activity-groups.ts
+++ b/src/features/messages/activity-groups.ts
@@ -1,18 +1,16 @@
 import type { ChannelMessage } from "../relay/contracts";
 
-export const RECENT_ACTIVITY_COUNT = 5;
-
 export type ActivityGroup = {
   ids: string[];
 };
 
 /** Only consecutive agent-only messages on one local day fold together.
  * Human messages, public agent replies and membership notices stay visible. */
-export function activityGroups(
+export function activityRuns(
   rows: readonly ChannelMessage[],
-): ActivityGroup[] {
-  const groups: ActivityGroup[] = [];
-  let group: ActivityGroup | undefined;
+): ChannelMessage[][] {
+  const groups: ChannelMessage[][] = [];
+  let group: ChannelMessage[] | undefined;
   let previous: ChannelMessage | undefined;
   for (const row of rows) {
     if (row.audience !== "agents" || row.membership) {
@@ -24,12 +22,20 @@ export function activityGroups(
         new Date(previous.createdAt * 1000).toDateString() !==
           new Date(row.createdAt * 1000).toDateString()
       ) {
-        group = { ids: [] };
+        group = [];
         groups.push(group);
       }
-      group.ids.push(row.id);
+      group.push(row);
     }
     previous = row;
   }
-  return groups.filter((group) => group.ids.length > RECENT_ACTIVITY_COUNT);
+  return groups;
+}
+
+export function activityGroups(
+  rows: readonly ChannelMessage[],
+): ActivityGroup[] {
+  return activityRuns(rows)
+    .filter((group) => group.length > 1)
+    .map((group) => ({ ids: group.map((row) => row.id) }));
 }
diff --git a/src/features/messages/activity-presentation.ts b/src/features/messages/activity-presentation.ts
new file mode 100644
index 0000000000..f4d9aa6f9f
--- /dev/null
+++ b/src/features/messages/activity-presentation.ts
@@ -0,0 +1,137 @@
+import { useSyncExternalStore } from "react";
+import type { ChannelMessage } from "../relay/contracts";
+import type { RelaySession } from "../relay/session";
+import { requestWork } from "../agents/request-work";
+import { activityRuns } from "./activity-groups";
+
+type Activity = RelaySession["agentActivity"];
+type Snapshot = ReturnType<Activity["snapshot"]>;
+type ActivityRun = {
+  ids: string[];
+  history: ChannelMessage[];
+  latest: ChannelMessage;
+  participants: string[];
+  requestId: string | undefined;
+  followingMessage: ChannelMessage | undefined;
+};
+export type ActivityPresentation = ActivityRun & {
+  done: boolean;
+  working: boolean;
+};
+const noSubscribe = () => () => {};
+const noActivity = () => undefined;
+export function useActivitySnapshot(activity: Activity | undefined) {
+  return useSyncExternalStore(
+    activity?.subscribe ?? noSubscribe,
+    activity?.snapshot ?? noActivity,
+  );
+}
+
+/** Status belongs to the triggering request, never to all work in its thread. */
+function activityStatus(group: ActivityRun, snapshot: Snapshot | undefined) {
+  const { latest, participants, followingMessage: response, requestId } = group;
+  const closed =
+    !!response &&
+    response.audience !== "agents" &&
+    !response.membership &&
+    response.channelId === latest.channelId &&
+    response.threadRootId === latest.threadRootId &&
+    response.createdAt >= latest.createdAt &&
+    participants.includes(response.authorId);
+  const work = snapshot
+    ? requestWork(snapshot, latest.channelId, [
+        ...(requestId ? [requestId] : []),
+        ...group.ids,
+      ])
+    : [];
+  const done =
+    closed ||
+    participants.every((agent) =>
+      work.some(
+        (entry) =>
+          entry.agent === agent &&
+          (entry.state === "done" || entry.state === "ended"),
+      ),
+    );
+  const working = new Set(
+    done
+      ? []
+      : work.filter((entry) => entry.working).map((entry) => entry.agent),
+  );
+  return { done, working };
+}
+
+/** Shared projection for timeline and thread; hosts own scrolling and disclosure state. */
+export function activityPresentation(
+  rows: readonly ChannelMessage[],
+  snapshot: Snapshot | undefined,
+  agents: ReadonlySet<string> | undefined,
+  rootId?: string,
+) {
+  const following = new Map(
+    rows.map((row, index) => [row.id, rows[index + 1]]),
+  );
+  const requests = new Map<string, string>();
+  let request = rootId;
+  for (const row of rows) {
+    if (
+      row.audience !== "agents" &&
+      !row.membership &&
+      agents &&
+      !agents.has(row.authorId)
+    )
+      request = row.id;
+    if (request) requests.set(row.id, request);
+  }
+  const groups: ActivityPresentation[] = [];
+  const byRow = new Map<
+    string,
+    {
+      active: boolean;
+      motionKey: string | undefined;
+    }
+  >();
+  for (const history of activityRuns(rows)) {
+    const first = history[0];
+    const latest = history.at(-1);
+    if (!first || !latest) continue;
+    const participants = [...new Set(history.map((row) => row.authorId))];
+    const group: ActivityRun = {
+      ids: history.map((row) => row.id),
+      history,
+      latest,
+      participants,
+      requestId: requests.get(first.id) ?? first.threadRootId,
+      followingMessage: following.get(latest.id),
+    };
+    const { done, working } = activityStatus(group, snapshot);
+    const lastByAgent = new Map(history.map((row) => [row.authorId, row.id]));
+    for (const row of history) {
+      const last = lastByAgent.get(row.authorId) === row.id;
+      byRow.set(row.id, {
+        active: last && working.has(row.authorId),
+        motionKey:
+          history.length > 1 && last
+            ? `${first.id}:${row.authorId}`
+            : undefined,
+      });
+    }
+    if (history.length > 1) {
+      groups.push({ ...group, done, working: working.size > 0 });
+    }
+  }
+  return { groups, byRow };
+}
+export function useActivityPresentation(
+  rows: readonly ChannelMessage[],
+  activity: Activity | undefined,
+  agents: ReadonlySet<string> | undefined,
+  rootId?: string,
+) {
+  return activityPresentation(
+    rows,
+    useActivitySnapshot(activity),
+    agents,
+    rootId,
+  );
+}
diff --git a/src/features/messages/message-grouping.test.ts b/src/features/messages/message-grouping.test.ts
index 412ad5ecb0..282386818b 100644
--- a/src/features/messages/message-grouping.test.ts
+++ b/src/features/messages/message-grouping.test.ts
@@ -72,3 +72,12 @@ it("keeps automation bylines on every row, even for a common signer and owner",
     false,
   );
 });
+
+it("continues a reply into activity but starts the next public reply separately", () => {
+  const activity = { ...first, id: "activity", audience: "agents" as const };
+  expect(continuesMessageGroup(first, activity)).toBe(true);
+  expect(continuesMessageGroup(activity, { ...activity, id: "next" })).toBe(
+    true,
+  );
+  expect(continuesMessageGroup(activity, first)).toBe(false);
+});
diff --git a/src/features/messages/message-grouping.ts b/src/features/messages/message-grouping.ts
index dc1a66f2c0..5ac628a654 100644
--- a/src/features/messages/message-grouping.ts
+++ b/src/features/messages/message-grouping.ts
@@ -15,10 +15,27 @@ export function continuesMessageGroup(
     !previous.sentFromThread &&
     previous.channelId === current.channelId &&
     previous.authorId === current.authorId &&
-    previous.audience === current.audience &&
+    (previous.audience === current.audience || current.audience === "agents") &&
     current.createdAt >= previous.createdAt &&
     current.createdAt - previous.createdAt <= 5 * 60 &&
     new Date(previous.createdAt * 1000).toDateString() ===
       new Date(current.createdAt * 1000).toDateString()
   );
 }
+
+/** Activity belongs inside its surrounding public sender group. */
+export function publicMessageNeighbor(
+  rows: readonly ChannelMessage[],
+  index: number,
+  direction: -1 | 1,
+) {
+  for (
+    let next = index + direction;
+    next >= 0 && next < rows.length;
+    next += direction
+  ) {
+    const row = rows[next];
+    if (row && row.audience !== "agents") return row;
+  }
+  return undefined;
+}
diff --git a/src/shared/design-system/ui/AvatarStack.tsx b/src/shared/design-system/ui/AvatarStack.tsx
index 3644929a23..0c0cd584ec 100644
--- a/src/shared/design-system/ui/AvatarStack.tsx
+++ b/src/shared/design-system/ui/AvatarStack.tsx
@@ -3,6 +3,8 @@ import styles from "./AvatarStack.module.css";
 
 type StackAvatar = {
   id: string;
+  /** Optional identity for feature-owned shared-position animation. */
+  motionKey?: string | undefined;
   name: string;
   src?: string | undefined;
   shape: "circle" | "squircle";
@@ -35,6 +37,7 @@ export function AvatarStack({
           style={{ zIndex: index + 1 }}
           data-avatar-shape={item.shape}
           title={item.name}
+          data-avatar-motion-key={item.motionKey}
         >
           <Avatar
             src={item.src}
diff --git a/tests/fixtures/message-gallery/examples.ts b/tests/fixtures/message-gallery/examples.ts
index 6b3bc8d75b..698926bef7 100644
--- a/tests/fixtures/message-gallery/examples.ts
+++ b/tests/fixtures/message-gallery/examples.ts
@@ -83,21 +83,27 @@ export const groups: Group[] = [
   {
     id: "agent-coordination",
     title: "Agent coordination",
-    description: "Every compact entry keeps its author's avatar visible.",
+    description:
+      "Agent activity continues the preceding message group with one final avatar.",
     examples: [
       {
         id: "repeated-agent",
         title: "Consecutive agent updates",
         description:
-          "Author icons remain visible before and after expanding a row.",
+          "The final activity owns the group avatar, and long previews stay within the message width.",
         rows: [
+          message(
+            "coordination-intro",
+            "I’ll investigate the missing icons and check the rendered result.",
+            { authorId: agent },
+          ),
           message("coordination-first", "Investigating the missing icons.", {
             authorId: agent,
             audience: "agents",
           }),
           message(
             "coordination-next",
-            "Found the cause.\n\nThe fix is ready to try.",
+            "Found the cause. The activity rows were rendering their own avatars rather than using the conversation’s message grouping. I’m updating the shared grouping and matching the width of these previews to the surrounding messages.\n\nThe fix is ready to try.",
             {
               authorId: agent,
               audience: "agents",

From 1401a60bbb8d23bc0b8c4137da683c40a4098a74 Mon Sep 17 00:00:00 2001
From: Arjun Mahanti <arjun@squareup.com>
Date: Tue, 27 Oct 2026 11:17:37 -0400
Subject: [PATCH 02/19] Clarify activity specimen coverage

Co-authored-by: OpenAI Codex <noreply@openai.com>
Signed-off-by: Arjun Mahanti <arjun@squareup.com>
---
 tests/fixtures/message-gallery/examples.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/tests/fixtures/message-gallery/examples.ts b/tests/fixtures/message-gallery/examples.ts
index 248212e601..c5bfdfa91a 100644
--- a/tests/fixtures/message-gallery/examples.ts
+++ b/tests/fixtures/message-gallery/examples.ts
@@ -84,13 +84,13 @@ export const groups: Group[] = [
     id: "agent-coordination",
     title: "Agent coordination",
     description:
-      "Agent activity continues the preceding message group with one final avatar.",
+      "Compact activity rows use author avatars, inline mentions, and expandable text.",
     examples: [
       {
         id: "repeated-agent",
         title: "Consecutive agent updates",
         description:
-          "The final activity owns the group avatar, and long previews stay within the message width.",
+          "Individual rows keep previews within the message width. Timeline group folding is exercised separately.",
         rows: [
           message(
             "coordination-intro",

From a7ec8ea8d6ac0f90dbb63da7653e9f10d321495c Mon Sep 17 00:00:00 2001
From: Arjun Mahanti <arjun@squareup.com>
Date: Tue, 27 Oct 2026 11:23:23 -0400
Subject: [PATCH 03/19] Use shared spacing token for activity avatar alignment

Co-authored-by: OpenAI Codex <noreply@openai.com>
Signed-off-by: Arjun Mahanti <arjun@squareup.com>
---
 src/features/messages/Messages.module.css | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/features/messages/Messages.module.css b/src/features/messages/Messages.module.css
index 427272e87c..42a6deb067 100644
--- a/src/features/messages/Messages.module.css
+++ b/src/features/messages/Messages.module.css
@@ -3141,12 +3141,12 @@ html[data-keyboard-navigation] .audienceEntry:has(.audienceLine:focus-visible) {
 .audienceBody {
   box-sizing: border-box;
   height: var(--collapsible-panel-height);
-  min-height: calc(1.5rem + 2 * var(--space-1));
+  min-height: calc(var(--space-6) + 2 * var(--space-1));
   overflow: clip;
   color: var(--text-standard);
 }
 .audienceBody:is([data-starting-style], [data-ending-style]) {
-  height: calc(1.5rem + 2 * var(--space-1));
+  height: calc(var(--space-6) + 2 * var(--space-1));
 }
 @media (prefers-reduced-motion: no-preference) {
   html:not([data-keyboard-navigation]) .audienceBody {
@@ -3157,7 +3157,11 @@ html[data-keyboard-navigation] .audienceEntry:has(.audienceLine:focus-visible) {
   /* Preserve the preview baseline: its line is centered in a 24px avatar. */
   padding: calc(
       var(--space-1) +
-      (1.5rem - var(--text-caption) * var(--text-caption--line-height)) /
+      (
+        var(--space-6) -
+        var(--text-caption) *
+        var(--text-caption--line-height)
+      ) /
       2
     )
     var(--space-1h) var(--space-1) 0;
@@ -3186,8 +3190,8 @@ html[data-keyboard-navigation] .audienceEntry:has(.audienceLine:focus-visible) {
 .audienceAvatar {
   display: grid;
   flex: none;
-  inline-size: 1.5rem;
-  block-size: 1.5rem;
+  inline-size: var(--space-6);
+  block-size: var(--space-6);
 }
 .audiencePreviewText {
   min-inline-size: 0;

From 13c9817bf936e5d8735db26839dc6506301ee2b9 Mon Sep 17 00:00:00 2001
From: Arjun Mahanti <arjun@squareup.com>
Date: Tue, 27 Oct 2026 11:30:21 -0400
Subject: [PATCH 04/19] Preserve collapsed reply branch grouping boundaries

Co-authored-by: OpenAI Codex <noreply@openai.com>
Signed-off-by: Arjun Mahanti <arjun@squareup.com>
---
 src/features/messages/ThreadPanel.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/features/messages/ThreadPanel.tsx b/src/features/messages/ThreadPanel.tsx
index 6b7ba60cad..9af9fc67cf 100644
--- a/src/features/messages/ThreadPanel.tsx
+++ b/src/features/messages/ThreadPanel.tsx
@@ -1243,6 +1243,7 @@ function ThreadMessages({
           : publicMessageNeighbor(siblings, index, 1);
       const children = tree.children.get(row.id);
       const continuation =
+        !!previousReply &&
         previousReply !== snapshot.root &&
         previousParent === parent &&
         continuesMessageGroup(

From f2231fa7e1a1362acb3a63671c64393effe211e2 Mon Sep 17 00:00:00 2001
From: Arjun Mahanti <arjun@squareup.com>
Date: Tue, 27 Oct 2026 16:05:43 -0400
Subject: [PATCH 05/19] Unify agent activity with incoming message previews

Co-authored-by: OpenAI Codex <noreply@openai.com>
Signed-off-by: Arjun Mahanti <arjun@squareup.com>
---
 .../agent-activity/ActivityAccessory.test.tsx | 124 +++++++-----
 .../agent-activity/ActivityAccessory.tsx      | 182 +++++++++++-------
 src/bundled/agent-activity/README.md          |   6 +-
 src/bundled/agent-activity/index.tsx          |   3 +-
 src/bundled/channels/ChannelBody.tsx          |   4 -
 src/bundled/channels/ChannelsPage.tsx         |   1 -
 src/bundled/channels/ConversationTab.test.tsx |  36 ----
 src/bundled/channels/ConversationTab.tsx      |   1 -
 src/features/agents/ActivityRows.module.css   |   8 +-
 src/features/agents/AgentActivityRow.tsx      |  15 +-
 .../conversation/ComposerAccessories.test.tsx | 157 ++++++++-------
 .../conversation/ComposerAccessories.tsx      |   8 +-
 src/features/conversation/Conversation.tsx    |   7 +-
 src/features/conversation/contracts.ts        |   9 +-
 .../conversation/typing-presentation.tsx      |  74 +++++--
 .../messages/ActivityGroupPreview.test.tsx    |  46 ++++-
 .../messages/ActivityGroupPreview.tsx         |  32 ++-
 .../messages/ActivityStepPreview.module.css   |  16 ++
 src/features/messages/ActivityStepPreview.tsx |  29 +++
 .../messages/AgentResponsePreview.tsx         |  57 ++++++
 .../messages/ChannelTimeline.test.tsx         |   5 +
 src/features/messages/ChannelTimeline.tsx     |  82 ++++++--
 src/features/messages/JumpToLatestButton.tsx  |   8 -
 src/features/messages/MessageComposer.tsx     |  12 --
 src/features/messages/MessageRow.test.tsx     |  32 ++-
 src/features/messages/MessageRow.tsx          |  92 +++++++--
 src/features/messages/Messages.module.css     |  84 +++++++-
 src/features/messages/ThreadPanel.test.tsx    |  55 +-----
 src/features/messages/ThreadPanel.tsx         |  66 +++++--
 .../messages/TypingIndicator.module.css       |  78 +++-----
 .../messages/TypingIndicator.test.tsx         | 102 +++++++++-
 src/features/messages/TypingIndicator.tsx     | 160 +++++++++------
 src/features/messages/activity-groups.test.ts |  31 +++
 src/features/messages/activity-lane.ts        |  83 --------
 .../messages/activity-presentation.ts         | 101 +++++++++-
 .../messages/use-activity-indicator.ts        |  47 +++++
 src/shared/design-system/DESIGN.md            |   6 +-
 .../design-system/ui/ShimmerText.module.css   |  10 +-
 .../design-system/ui/TypingDots.module.css    |   8 +
 src/shared/design-system/ui/TypingDots.tsx    |   2 +-
 40 files changed, 1258 insertions(+), 621 deletions(-)
 create mode 100644 src/features/messages/ActivityStepPreview.module.css
 create mode 100644 src/features/messages/ActivityStepPreview.tsx
 create mode 100644 src/features/messages/AgentResponsePreview.tsx
 delete mode 100644 src/features/messages/activity-lane.ts
 create mode 100644 src/features/messages/use-activity-indicator.ts

diff --git a/src/bundled/agent-activity/ActivityAccessory.test.tsx b/src/bundled/agent-activity/ActivityAccessory.test.tsx
index a9c5738ec3..69eb743f2c 100644
--- a/src/bundled/agent-activity/ActivityAccessory.test.tsx
+++ b/src/bundled/agent-activity/ActivityAccessory.test.tsx
@@ -1,4 +1,5 @@
 // @vitest-environment jsdom
+import { activityPresentation } from "../../features/messages/activity-presentation";
 import { createLocalAgentActivity } from "../../features/agents/local-activity";
 import "@testing-library/jest-dom/vitest";
 import { stubAvatarBrowserApis } from "../../features/agents/avatar-testing";
@@ -414,7 +415,8 @@ it("shows local receipt and failure without requiring an ACP transcript, and ope
     expect(bubble).toHaveAccessibleName(
       "View agent activity: Blossom, Reading notes.txt",
     );
-    expect(bubble.querySelector('[data-state="working"]')).not.toBeNull();
+    expect(bubble).toHaveTextContent("Reading notes.txt");
+    expect(bubble.querySelector('[data-state="working"]')).toBeNull();
     act(() => work.finish({ ok: false, error: "Provider unavailable" }));
     expect(bubble).toHaveTextContent("1 failed");
     expect(bubble.querySelector("[data-state]")).toBeNull();
@@ -460,11 +462,11 @@ it("dismisses only that agent's error on this message, without changing other wo
     expect(mixed).toHaveTextContent("1 failed");
     const failedBadge = mixed.querySelector("[data-activity-failure]");
     const workingBadge = mixed.querySelector("[data-thread-working]");
-    expect(failedBadge?.querySelector('[title="Blossom"]')).not.toBeNull();
+    expect(screen.getByRole("img", { name: "Blossom" })).toBeInTheDocument();
     expect(workingBadge?.querySelector('[title="Bubbles"]')).not.toBeNull();
     expect(workingBadge?.querySelector('[title="Blossom"]')).toBeNull();
     expect(failedBadge?.parentElement).toBe(workingBadge?.parentElement);
-    expect(mixed.querySelector('[data-state="working"]')).not.toBeNull();
+    expect(workingBadge).toHaveTextContent("Reading notes.txt");
     fireEvent.click(
       screen.getByRole("button", { name: /View agent activity/ }),
     );
@@ -549,38 +551,71 @@ it.each([false, true])(
   },
 );
 
-it("keeps an idle reply summary mounted without advertising an activity popup", () => {
-  const f = fixture();
-  const navigate = vi.fn();
-  const view = render(
-    <ActivityAccessory
-      {...f.props}
-      renderMessageSummary={(activity) => (
-        <button type="button" ref={activity?.ref} onClick={navigate}>
-          View thread{activity ? `: ${activity.label}` : ""}
-        </button>
-      )}
-    />,
-  );
-  try {
-    const summary = screen.getByRole("button", { name: "View thread" });
-    expect(summary).not.toHaveAttribute("aria-haspopup");
-    expect(summary).not.toHaveAttribute("aria-expanded");
-    f.send(A, "here", 1, "turn_started", { triggeringEventIds: [root] });
-    expect(screen.getByRole("button", { name: /View thread/ })).toBe(summary);
-    expect(summary).toHaveAttribute("aria-haspopup", "dialog");
-    f.send(A, "here", 2, "turn_completed");
-    expect(screen.getByRole("button", { name: "View thread" })).toBe(summary);
-    expect(summary).not.toHaveAttribute("aria-haspopup");
-    expect(summary).not.toHaveAttribute("aria-expanded");
-    fireEvent.click(summary);
-    expect(navigate).toHaveBeenCalledOnce();
-    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
-  } finally {
-    view.unmount();
-    f.dispose();
-  }
-});
+it.each([false, true])(
+  "hands live activity to published content without hiding other work (thread=%s)",
+  (thread) => {
+    const f = fixture();
+    const onFocusedRemoval = vi.fn();
+    const view = render(
+      <ActivityAccessory {...f.props} onFocusedRemoval={onFocusedRemoval} />,
+    );
+    try {
+      expect(
+        screen.queryByLabelText("Agent activity on this message"),
+      ).toBeNull();
+      f.send(A, "here", 1, "turn_started", { triggeringEventIds: [root] });
+      f.send(B, "other", 1, "turn_started", { triggeringEventIds: [root] });
+      const response = {
+        ...f.props.message,
+        id: "response",
+        authorId: A,
+        agentEnvelope: true as const,
+        content: "Here is the answer",
+        replyParentId: root,
+      };
+      const rows = [
+        f.props.message,
+        { ...f.props.message, id: next },
+        response,
+      ];
+      const represented = activityPresentation(
+        thread ? rows.slice(1) : rows,
+        undefined,
+        new Set([A, B]),
+        thread ? root : undefined,
+      ).representedAgents;
+      view.rerender(
+        <ActivityAccessory
+          {...f.props}
+          onFocusedRemoval={onFocusedRemoval}
+          representedAgents={represented.get(root)}
+        />,
+      );
+      expect(screen.queryByTitle("Blossom")).toBeNull();
+      expect(screen.getByTitle("Bubbles")).toBeInTheDocument();
+      expect(represented.get(next)).toBeUndefined();
+      act(() =>
+        screen.getByRole("button", { name: /View agent activity/ }).focus(),
+      );
+      f.send(B, "other", 2, "turn_completed");
+      expect(onFocusedRemoval).toHaveBeenCalledOnce();
+      expect(
+        screen.queryByLabelText("Agent activity on this message"),
+      ).toBeNull();
+      view.rerender(
+        <ActivityAccessory
+          {...f.props}
+          onFocusedRemoval={onFocusedRemoval}
+          representedAgents={represented.get(root)}
+        />,
+      );
+      expect(screen.queryByTitle("Blossom")).toBeNull();
+    } finally {
+      view.unmount();
+      f.dispose();
+    }
+  },
+);
 
 const settle = () => act(async () => {});
 const openBubble = () =>
@@ -665,21 +700,10 @@ it.each(["waiting", "working"])(
     }
   },
 );
-it("notes a stopped request beside a thread summary host", async () => {
+it("notes a stopped request in the response lane", async () => {
   const local = createLocalAgentActivity();
   const f = fixture(local);
-  const view = render(
-    <ActivityAccessory
-      {...f.props}
-      renderMessageSummary={(activity) =>
-        activity ? (
-          <button type="button" ref={activity.ref}>
-            View thread: {activity.label}
-          </button>
-        ) : null
-      }
-    />,
-  );
+  const view = render(<ActivityAccessory {...f.props} />);
   try {
     act(() => {
       local
@@ -693,9 +717,9 @@ it("notes a stopped request beside a thread summary host", async () => {
         .interruptible(async () => {});
     });
     expect(
-      screen.getByRole("button", { name: /View thread: Blossom/ }),
+      screen.getByRole("button", { name: /View agent activity: Blossom/ }),
     ).toBeInTheDocument();
-    // The browser journey stops it through the summary's popup.
+    // Stop retains its exact request and response-side notice.
     await act(() => f.props.session.agentActivity.interrupt(A, "c", root));
     expect(
       screen.queryByRole("button", { name: /View thread/ }),
diff --git a/src/bundled/agent-activity/ActivityAccessory.tsx b/src/bundled/agent-activity/ActivityAccessory.tsx
index c3b9266ce2..1ef4962752 100644
--- a/src/bundled/agent-activity/ActivityAccessory.tsx
+++ b/src/bundled/agent-activity/ActivityAccessory.tsx
@@ -23,7 +23,7 @@ import {
 import { NavigationItem } from "../../shared/design-system/ui/NavigationItem";
 import { ShimmerText } from "../../shared/design-system/ui/ShimmerText";
 import { useToastNotification } from "../../shared/design-system/ui/Toast";
-import { TypingDots } from "../../shared/design-system/ui/TypingDots";
+import { ActivityStepPreview } from "../../features/messages/ActivityStepPreview";
 import {
   PopoverRoot,
   PopoverTrigger,
@@ -41,9 +41,13 @@ import {
   localWorkLabel,
   type WorkStep,
 } from "../../features/agents/local-activity";
-import { useTypingReplacement } from "../../features/conversation/typing-presentation";
+import {
+  useTypingReplacement,
+  useActivityTypingReplacement,
+} from "../../features/conversation/typing-presentation";
 import styles from "./ActivityAccessory.module.css";
 import { avatarMedia } from "../../shared/avatar-source";
+import { AgentResponsePreview } from "../../features/messages/AgentResponsePreview";
 
 const noSubscribe = () => () => {};
 /** How long a hosted stop shows as stopping before Stop can be tried again:
@@ -113,21 +117,28 @@ export function ActivityAccessory(props: ActivityProps) {
   };
   const visible = (entry: { agent: string }) =>
     canOpen(profileActivityViewTarget(entry.agent) ?? "");
-  const shown: Entry[] = entries.filter(visible).map((entry) => {
-    return {
-      agent: entry.agent,
-      name: named(entry.agent),
-      picture: profiles.get(entry.agent)?.picture,
-      working: entry.working,
-      state: entry.state,
-      reason: entry.reason,
-      ...(entry.step ? { step: entry.step } : {}),
-      ...(entry.stoppable ? { stoppable: true } : {}),
-      lifecycle: entry.lifecycle,
-      records: entry.selected.records,
-      turns: entry.turns,
-    };
-  });
+  const shown: Entry[] = entries
+    .filter(
+      (entry) =>
+        visible(entry) &&
+        (entry.state === "error" ||
+          !props.representedAgents?.includes(entry.agent)),
+    )
+    .map((entry) => {
+      return {
+        agent: entry.agent,
+        name: named(entry.agent),
+        picture: profiles.get(entry.agent)?.picture,
+        working: entry.working,
+        state: entry.state,
+        reason: entry.reason,
+        ...(entry.step ? { step: entry.step } : {}),
+        ...(entry.stoppable ? { stoppable: true } : {}),
+        lifecycle: entry.lifecycle,
+        records: entry.selected.records,
+        turns: entry.turns,
+      };
+    });
   // When work ends (not when access is revoked), keep the last bubble long
   // enough for the shared leave recipe, then remove it.
   const section = useRef<HTMLElement>(null);
@@ -166,9 +177,13 @@ export function ActivityAccessory(props: ActivityProps) {
   }, [leaving]);
   // The render where work ends keeps the same element (from the last shown
   // entries) so the list never loses and regains its height mid-handoff.
-  const bubble = shown.length
-    ? shown
-    : (leaving ?? (ended ? retained.current : []));
+  const bubble = (
+    shown.length ? shown : (leaving ?? (ended ? retained.current : []))
+  ).filter(
+    (entry) =>
+      entry.state === "error" ||
+      !props.representedAgents?.includes(entry.agent),
+  );
   // Once its live bubble has left, a stopped request stays noted here.
   const noted = bubble.length ? [] : stopped.filter(visible);
   const note = noted.length ? (
@@ -189,22 +204,9 @@ export function ActivityAccessory(props: ActivityProps) {
       <span>{noted.map(({ agent }) => named(agent)).join(", ")} · Stopped</span>
     </div>
   ) : null;
-  if (props.renderMessageSummary) {
-    return (
-      <>
-        {shown.map((entry) => (
-          <TypingReplacement key={entry.agent} {...props} agent={entry.agent} />
-        ))}
-        <ActivityBubble
-          {...props}
-          entries={bubble}
-          interactive={shown.length > 0}
-        />
-        {note}
-      </>
-    );
-  }
   if (!bubble.length) return note;
+  const primary = bubble[0];
+  if (!primary) return note;
   return (
     <section
       ref={section}
@@ -216,7 +218,11 @@ export function ActivityAccessory(props: ActivityProps) {
       aria-label="Agent activity on this message"
       aria-hidden={shown.length ? undefined : true}
     >
-      <div>
+      <AgentResponsePreview
+        name={primary.name}
+        picture={avatarMedia(primary.picture, session.media)}
+        layout={props.messageLayout}
+      >
         {shown.map((entry) => (
           <TypingReplacement key={entry.agent} {...props} agent={entry.agent} />
         ))}
@@ -226,7 +232,7 @@ export function ActivityAccessory(props: ActivityProps) {
           entries={bubble}
           interactive={shown.length > 0}
         />
-      </div>
+      </AgentResponsePreview>
     </section>
   );
 }
@@ -345,6 +351,30 @@ function ActivityBubble({
   }, [live]);
   const trigger = useRef<HTMLButtonElement>(null);
   const popup = useRef<HTMLDivElement>(null);
+  const retirement = useRef({
+    interactive,
+    onFocusedRemoval: props.onFocusedRemoval,
+  });
+  useLayoutEffect(() => {
+    retirement.current = {
+      interactive,
+      onFocusedRemoval: props.onFocusedRemoval,
+    };
+  });
+  useLayoutEffect(
+    () => () => {
+      // Published content removes this preview immediately, without a leave phase.
+      // Ordinary completion uses the existing interactive=false handoff below.
+      if (!retirement.current.interactive) return;
+      const focused = trigger.current?.ownerDocument.activeElement;
+      if (
+        focused &&
+        (trigger.current?.contains(focused) || popup.current?.contains(focused))
+      )
+        retirement.current.onFocusedRemoval?.();
+    },
+    [],
+  );
   useLayoutEffect(() => {
     if (interactive) return;
     const source = popup.current;
@@ -399,6 +429,20 @@ function ActivityBubble({
   const otherEntries = entries.filter(
     (entry) => !failedEntries.includes(entry),
   );
+  const current =
+    otherEntries.find((entry) => entry.working && entry.step) ??
+    otherEntries.find((entry) => entry.working);
+  const currentPreview =
+    current && !current.lifecycle
+      ? currentActivity(current.records, current.turns)
+      : undefined;
+  const stepText = current?.step
+    ? label(current)
+    : currentPreview
+      ? [currentPreview.title, currentPreview.detail]
+          .filter(Boolean)
+          .join(" · ")
+      : undefined;
   const avatars = (group: Entry[]) => (
     <AvatarStack
       size="mini"
@@ -414,9 +458,14 @@ function ActivityBubble({
     <span className={styles.summaryGroups}>
       {otherEntries.length > 0 && (
         <span className={styles.summaryActivity} data-thread-working="">
-          {avatars(otherEntries)}
+          {avatars(
+            otherEntries.filter((entry) => entry.agent !== entries[0]?.agent),
+          )}
           {(working || waiting) && (
-            <TypingDots size="small" state={stepping ? "working" : "waiting"} />
+            <ActivityStepPreview
+              text={stepText}
+              state={stepping ? "working" : "waiting"}
+            />
           )}
           {unknown && <span>Status unknown</span>}
         </span>
@@ -426,26 +475,16 @@ function ActivityBubble({
           className={`${styles.summaryActivity} ${styles.failure}`}
           data-activity-failure=""
         >
-          {avatars(failedEntries)}
+          {avatars(
+            failedEntries.filter((entry) => entry.agent !== entries[0]?.agent),
+          )}
           <WarningCircleIcon size={12} aria-hidden="true" />
           <span>{failedCount} failed</span>
         </span>
       )}
     </span>
   );
-  const summary = props.renderMessageSummary?.(
-    entries.length
-      ? {
-          participants: entries.map((entry) => entry.agent),
-          content,
-          label: entries
-            .map((entry) => `${entry.name}, ${label(entry)}`)
-            .join("; "),
-          ref: trigger,
-        }
-      : undefined,
-  );
-  if (!entries.length && !summary) return null;
+  if (!entries.length) return null;
   return (
     <PopoverRoot
       open={expanded}
@@ -465,27 +504,23 @@ function ActivityBubble({
             event.preventBaseUIHandler();
             return;
           }
-          if (summary) {
-            event.preventBaseUIHandler();
-            setExpanded(false);
-          } else if (props.openThread?.()) {
+          if (props.openThread?.()) {
             event.preventBaseUIHandler();
             setExpanded(false);
           }
         }}
         render={
-          summary ?? (
-            <Button
-              ref={trigger}
-              tabIndex={interactive ? undefined : -1}
-              size="xs"
-              variant="subtle"
-              data-activity-summary=""
-              aria-label={`${props.openThread ? "Open thread" : "View agent activity"}: ${entries.map((entry) => `${entry.name}, ${label(entry)}`).join("; ")}`}
-            >
-              {content}
-            </Button>
-          )
+          <Button
+            ref={trigger}
+            tabIndex={interactive ? undefined : -1}
+            size="inline"
+            variant="plain"
+            data-activity-summary=""
+            style={{ maxWidth: "100%" }}
+            aria-label={`${props.openThread ? "Open thread" : "View agent activity"}: ${entries.map((entry) => `${entry.name}, ${label(entry)}`).join("; ")}`}
+          >
+            {content}
+          </Button>
         }
       />
       <PopoverPopup
@@ -634,7 +669,7 @@ export function ActivityTypingReplacement(props: ComposerAccessoryProps) {
   return (
     <>
       {agents.map(({ agent }) => (
-        <TypingReplacement key={agent} {...props} agent={agent} />
+        <TypingReplacement shared key={agent} {...props} agent={agent} />
       ))}
     </>
   );
@@ -644,7 +679,12 @@ function TypingReplacement({
   channelId,
   threadRootId,
   agent,
-}: ComposerAccessoryProps & { agent: string }) {
+  shared = false,
+}: ComposerAccessoryProps & { agent: string; shared?: boolean }) {
+  useActivityTypingReplacement(
+    { session, channelId, threadRootId, pubkey: agent },
+    shared,
+  );
   useTypingReplacement(
     { session, channelId, threadRootId, pubkey: agent },
     true,
diff --git a/src/bundled/agent-activity/README.md b/src/bundled/agent-activity/README.md
index a3199b66a1..3f00e3d2dd 100644
--- a/src/bundled/agent-activity/README.md
+++ b/src/bundled/agent-activity/README.md
@@ -1,9 +1,9 @@
 # Agent Activity
 
-Shows what your agents are working on, right under the message they're answering. You can follow along as they run commands, edit files, and plan their next step.
+Shows an incoming agent response on the left while your request is being handled. The same avatar and bubble begin with typing dots, then show the current tool step. Published agent content replaces this live preview; recorded coordination history keeps its completed-step disclosure.
 
 ## Getting started
 
 1. Mention an agent in a conversation.
-2. Its picture appears under your message while it works.
-3. Hover over it to see the current step, and open the agent's full activity from there.
+2. Its picture and typing bubble appear on the agent's side of the conversation.
+3. Tool details appear in that bubble as they arrive. Hover for activity controls, including Stop, or click to open the thread when available.
diff --git a/src/bundled/agent-activity/index.tsx b/src/bundled/agent-activity/index.tsx
index 3599b39085..4e8a343719 100644
--- a/src/bundled/agent-activity/index.tsx
+++ b/src/bundled/agent-activity/index.tsx
@@ -30,8 +30,7 @@ export const apply: PluginModule["apply"] = (ctx) => {
     id: "activity",
     title: "Agent Activity",
     component: (props) => <ActivityAccessory {...props} agents={ctx.agents} />,
-    placement: "message",
-    decoratesMessageSummary: true,
+    placement: "response",
   });
   ctx.conversation.registerAccessory({
     id: "typing-presentation",
diff --git a/src/bundled/channels/ChannelBody.tsx b/src/bundled/channels/ChannelBody.tsx
index 3ff043ec88..e585b1e90b 100644
--- a/src/bundled/channels/ChannelBody.tsx
+++ b/src/bundled/channels/ChannelBody.tsx
@@ -20,11 +20,8 @@ export const ChannelBody = memo(function ChannelBody({
   onOpenThread,
   navigation,
   onContentReady,
-  activityLane,
 }: {
   onContentReady?(channelId: string): void;
-  /** The channel composer follows this body and shows conversation activity. */
-  activityLane?: boolean | undefined;
   cached: boolean;
   viewer?: string | undefined;
   navigation?: PageNavigation | undefined;
@@ -130,7 +127,6 @@ export const ChannelBody = memo(function ChannelBody({
       inlineTarget={inlineTarget}
       marksRead={marksRead}
       navigation={navigation}
-      activityLane={activityLane}
       chatPresentation={solo}
       historyControl={solo ? "scroll" : "button"}
     />
diff --git a/src/bundled/channels/ChannelsPage.tsx b/src/bundled/channels/ChannelsPage.tsx
index f071169555..0d3c7c0772 100644
--- a/src/bundled/channels/ChannelsPage.tsx
+++ b/src/bundled/channels/ChannelsPage.tsx
@@ -1442,7 +1442,6 @@ function ChannelWorkspace({
             key={current.id}
             cached={cached}
             // The composer below mounts TypingIndicator for members of a live channel.
-            activityLane={!current.readOnly && !current.cached}
             navigation={
               !requestedMessage || exact?.inTimeline ? navigation : undefined
             }
diff --git a/src/bundled/channels/ConversationTab.test.tsx b/src/bundled/channels/ConversationTab.test.tsx
index a49bc470ee..bc16dc96db 100644
--- a/src/bundled/channels/ConversationTab.test.tsx
+++ b/src/bundled/channels/ConversationTab.test.tsx
@@ -49,13 +49,11 @@ const threadOpeners = vi.hoisted(
 );
 vi.mock("./ChannelBody", () => ({
   ChannelBody: ({
-    activityLane,
     holding,
     inlineTarget,
     marksRead,
     onOpenThread,
   }: {
-    activityLane?: boolean;
     holding?: boolean;
     inlineTarget?: { messageId: string };
     marksRead?: boolean;
@@ -64,7 +62,6 @@ vi.mock("./ChannelBody", () => ({
     threadOpeners.push(onOpenThread);
     return (
       <div
-        data-activity-lane={activityLane}
         data-holding={holding}
         data-target={inlineTarget?.messageId}
         data-marks-read={marksRead}
@@ -468,39 +465,6 @@ it.each(["pointerDown", "keyDown"] as const)(
   },
 );
 
-it.each([false, true])(
-  "conversation tabs reserve the jump button's activity lane only for a live channel (cached=%s)",
-  (cached) => {
-    const channel = {
-      id: "beta",
-      name: "Beta",
-      ...(cached ? { cached: true as const } : {}),
-    };
-    const snapshot = { status: "ready", channels: [channel] };
-    const session = {
-      channels: { list: () => snapshot, subscribeList: () => () => {} },
-    } as unknown as RelaySession;
-    render(
-      <ConversationTab
-        tab={{ id: "beta-tab", kind: "conversation", channelId: "beta" }}
-        channel={channel}
-        session={session}
-        scope="lane-test"
-        active
-        openLink={() => false}
-        canOpenLink={() => false}
-        openThread={() => {}}
-        close={() => {}}
-      />,
-    );
-    // The composer below the body mounts TypingIndicator only when live.
-    expect(screen.getByText("Conversation content")).toHaveAttribute(
-      "data-activity-lane",
-      String(!cached),
-    );
-  },
-);
-
 function openingAt(rows: { id: string; threadRootId?: string }[]) {
   const channel = { id: "beta", name: "Beta" };
   const snapshot = { status: "ready", channels: [channel] };
diff --git a/src/bundled/channels/ConversationTab.tsx b/src/bundled/channels/ConversationTab.tsx
index 84e9319f9d..3b7ee2245a 100644
--- a/src/bundled/channels/ConversationTab.tsx
+++ b/src/bundled/channels/ConversationTab.tsx
@@ -181,7 +181,6 @@ export function ConversationTab({
               viewer={session.viewer}
               cached={!!channel.cached}
               // The composer below mounts TypingIndicator for a live channel.
-              activityLane={!channel.cached}
               onOpenThread={onOpenThread}
               revealMessageId={sent}
               // Mount the list once, at the message, not while it is sought.
diff --git a/src/features/agents/ActivityRows.module.css b/src/features/agents/ActivityRows.module.css
index 16144bc778..04994c3c41 100644
--- a/src/features/agents/ActivityRows.module.css
+++ b/src/features/agents/ActivityRows.module.css
@@ -121,15 +121,11 @@
 .activityStatic > .activityItemBody {
   flex: 1;
 }
-.activityScope {
-  display: block;
-  color: var(--text-subtle);
-  font-size: var(--text-caption);
+.activityItemMeta {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-.activityItemWithAction .activityItemMeta,
-.activityItemWithAction .activityScope {
+.activityItemWithAction .activityItemMeta {
   padding-inline-end: var(--size-control-sm);
 }
diff --git a/src/features/agents/AgentActivityRow.tsx b/src/features/agents/AgentActivityRow.tsx
index d059d1f90c..0b0832fbe2 100644
--- a/src/features/agents/AgentActivityRow.tsx
+++ b/src/features/agents/AgentActivityRow.tsx
@@ -41,12 +41,15 @@ export function AgentActivityRow({
           <span className={styles.activityTimestamp}>{meta}</span>
         )}
       </span>
-      <span className={styles.activityItemMeta}>{status}</span>
-      {scope && (
-        <span className={styles.activityScope} title={scope}>
-          {scope}
-        </span>
-      )}
+      <span className={styles.activityItemMeta} title={scope}>
+        <span>{status}</span>
+        {scope && (
+          <>
+            {" "}
+            · <span>{scope}</span>
+          </>
+        )}
+      </span>
     </span>
   );
   return (
diff --git a/src/features/conversation/ComposerAccessories.test.tsx b/src/features/conversation/ComposerAccessories.test.tsx
index f4b8bdf976..270ce9f5a4 100644
--- a/src/features/conversation/ComposerAccessories.test.tsx
+++ b/src/features/conversation/ComposerAccessories.test.tsx
@@ -78,74 +78,95 @@ it("revokes navigation after contribution removal, replacement and composer unmo
   expect(canOpen).toHaveBeenCalledTimes(1);
 });
 
-it("keeps message accessories out of the composer and revokes commands on message changes", () => {
-  const commands: ComposerAccessoryProps[] = [];
-  const entry: Contribution<ComposerAccessory> = {
-    id: "activity",
-    key: "test:message",
-    pluginId: "test",
-    revision: "one",
-    title: "Activity",
-    placement: "message",
-    component: function MessageAccessory(props) {
-      useLayoutEffect(() => {
-        commands.push(props);
-      });
-      return <span>Message activity</span>;
-    },
-  };
-  const entries = [entry];
-  const registry = { snapshot: () => entries, subscribe: () => () => {} };
-  const props = {
-    registry,
-    session: {} as RelaySession,
-    scope: "scope",
-    channelId: "channel",
-    canOpen: () => true,
-    open: vi.fn(() => true),
-    openThread: vi.fn(() => true),
-    onFocusedRemoval: vi.fn(),
-  };
-  const message = {
-    id: "one",
-    channelId: "channel",
-    authorId: "human",
-    content: "request",
-    createdAt: 1,
-    mentions: [],
-    attachments: [],
-    reactions: [],
-    participants: [],
-    replyCount: 0,
-  };
-  const view = render(<ComposerAccessories {...props} />);
-  expect(screen.queryByText("Message activity")).toBeNull();
-  view.rerender(<ComposerAccessories {...props} message={message} />);
-  expect(screen.getByText("Message activity")).toBeTruthy();
-  const original = commands.at(-1);
-  if (!original) throw new Error("Missing accessory commands");
-  expect(original.message?.id).toBe("one");
-  expect(original.openThread?.()).toBe(true);
-  original.onFocusedRemoval?.();
-  expect(props.onFocusedRemoval).toHaveBeenCalledOnce();
-  expect(original.open("target")).toBe(true);
-  view.rerender(
-    <ComposerAccessories {...props} message={{ ...message, id: "two" }} />,
-  );
-  expect(original.open("target")).toBe(false);
-  expect(original.openThread?.()).toBe(false);
-  original.onFocusedRemoval?.();
-  expect(props.onFocusedRemoval).toHaveBeenCalledOnce();
-  expect(commands.at(-1)?.openThread?.()).toBe(true);
-  expect(commands.at(-1)?.message?.id).toBe("two");
-  expect(commands.at(-1)?.open("target")).toBe(true);
-  view.unmount();
-  expect(commands.at(-1)?.open("target")).toBe(false);
-  expect(commands.at(-1)?.openThread?.()).toBe(false);
-  commands.at(-1)?.onFocusedRemoval?.();
-  expect(props.onFocusedRemoval).toHaveBeenCalledOnce();
-  expect(props.openThread).toHaveBeenCalledTimes(2);
-});
+it.each(["message", "response"] as const)(
+  "keeps %s accessories in their own slot and revokes commands on message changes",
+  (placement) => {
+    const commands: ComposerAccessoryProps[] = [];
+    const entry: Contribution<ComposerAccessory> = {
+      id: "activity",
+      key: "test:message",
+      pluginId: "test",
+      revision: "one",
+      title: "Activity",
+      placement,
+      component: function MessageAccessory(props) {
+        useLayoutEffect(() => {
+          commands.push(props);
+        });
+        return <span>Message activity</span>;
+      },
+    };
+    const entries = [entry];
+    const registry = { snapshot: () => entries, subscribe: () => () => {} };
+    const props = {
+      registry,
+      session: {} as RelaySession,
+      scope: "scope",
+      channelId: "channel",
+      canOpen: () => true,
+      open: vi.fn(() => true),
+      openThread: vi.fn(() => true),
+      onFocusedRemoval: vi.fn(),
+    };
+    const message = {
+      id: "one",
+      channelId: "channel",
+      authorId: "human",
+      content: "request",
+      createdAt: 1,
+      mentions: [],
+      attachments: [],
+      reactions: [],
+      participants: [],
+      replyCount: 0,
+    };
+    const view = render(<ComposerAccessories {...props} />);
+    expect(screen.queryByText("Message activity")).toBeNull();
+    view.rerender(
+      <ComposerAccessories
+        {...props}
+        placement={placement === "response" ? "message" : "response"}
+        message={message}
+      />,
+    );
+    expect(screen.queryByText("Message activity")).toBeNull();
+    view.rerender(
+      <ComposerAccessories
+        {...props}
+        placement={placement}
+        message={message}
+      />,
+    );
+    expect(screen.getByText("Message activity")).toBeTruthy();
+    const original = commands.at(-1);
+    if (!original) throw new Error("Missing accessory commands");
+    expect(original.message?.id).toBe("one");
+    expect(original.openThread?.()).toBe(true);
+    original.onFocusedRemoval?.();
+    expect(props.onFocusedRemoval).toHaveBeenCalledOnce();
+    expect(original.open("target")).toBe(true);
+    view.rerender(
+      <ComposerAccessories
+        {...props}
+        placement={placement}
+        message={{ ...message, id: "two" }}
+      />,
+    );
+    expect(original.open("target")).toBe(false);
+    expect(original.openThread?.()).toBe(false);
+    original.onFocusedRemoval?.();
+    expect(props.onFocusedRemoval).toHaveBeenCalledOnce();
+    expect(commands.at(-1)?.openThread?.()).toBe(true);
+    expect(commands.at(-1)?.message?.id).toBe("two");
+    expect(commands.at(-1)?.open("target")).toBe(true);
+    view.unmount();
+    expect(commands.at(-1)?.open("target")).toBe(false);
+    expect(commands.at(-1)?.openThread?.()).toBe(false);
+    commands.at(-1)?.onFocusedRemoval?.();
+    expect(props.onFocusedRemoval).toHaveBeenCalledOnce();
+    expect(props.openThread).toHaveBeenCalledTimes(2);
+  },
+);
 
 it("gives only one decorator the host summary and restores the fallback on removal", () => {
   const renderMessageSummary = vi.fn(() => (
diff --git a/src/features/conversation/ComposerAccessories.tsx b/src/features/conversation/ComposerAccessories.tsx
index 5e936bb6bc..fdf5422061 100644
--- a/src/features/conversation/ComposerAccessories.tsx
+++ b/src/features/conversation/ComposerAccessories.tsx
@@ -9,9 +9,11 @@ import { ContributionBoundary, contributionKey } from "./ContributionBoundary";
 
 export function ComposerAccessories({
   registry,
+  placement,
   ...props
 }: ComposerAccessoryProps & {
   registry: ContributionReader<ComposerAccessory>;
+  placement?: ComposerAccessory["placement"];
 }) {
   const entries = useSyncExternalStore(
     registry.subscribe,
@@ -21,7 +23,11 @@ export function ComposerAccessories({
   const order = (entry: ComposerAccessory) =>
     Number.isFinite(entry.order) ? (entry.order ?? 0) : 0;
   const ordered = entries
-    .filter((entry) => (entry.placement === "message") === !!props.message)
+    .filter(
+      (entry) =>
+        (entry.placement ?? "composer") ===
+        (placement ?? (props.message ? "message" : "composer")),
+    )
     .sort(
       (a, b) =>
         order(a) - order(b) || (a.key < b.key ? -1 : a.key > b.key ? 1 : 0),
diff --git a/src/features/conversation/Conversation.tsx b/src/features/conversation/Conversation.tsx
index e54cb8c6de..9fbb3138a6 100644
--- a/src/features/conversation/Conversation.tsx
+++ b/src/features/conversation/Conversation.tsx
@@ -1,3 +1,4 @@
+import { ActivityIndicatorPresentation } from "./typing-presentation";
 import {
   createContext,
   useCallback,
@@ -233,7 +234,11 @@ function Provider({
       onOpenMediaReview,
     ],
   );
-  return <Context.Provider value={value}>{children}</Context.Provider>;
+  return (
+    <Context.Provider value={value}>
+      <ActivityIndicatorPresentation>{children}</ActivityIndicatorPresentation>
+    </Context.Provider>
+  );
 }
 
 function ConversationMediaReview(props: MediaReview) {
diff --git a/src/features/conversation/contracts.ts b/src/features/conversation/contracts.ts
index 176d265dd0..95f52f4f3a 100644
--- a/src/features/conversation/contracts.ts
+++ b/src/features/conversation/contracts.ts
@@ -149,6 +149,10 @@ export type ComposerAccessoryProps = Readonly<{
   threadRootId?: string | undefined;
   /** Present only for message-placed accessories; the exact triggering row. */
   message?: ChannelMessage;
+  /** Agents already represented by subsequent content in this request's visible run. */
+  representedAgents?: readonly string[] | undefined;
+  /** Host geometry for response-side accessories. */
+  messageLayout?: "timeline" | "thread" | "continuation" | undefined;
   /** A single selected decorator may wrap the host summary with its preview.
    * Render without activity when idle; the host owns reply counts/navigation. */
   renderMessageSummary?:
@@ -165,8 +169,9 @@ export type ComposerAccessoryProps = Readonly<{
   open(target: string): boolean;
 }>;
 export type ComposerAccessory = Readonly<{
-  /** Defaults to the composer. Message accessories render beside reactions. */
-  placement?: "composer" | "message";
+  /** Defaults to the composer. Message accessories sit beside reactions;
+   * response accessories occupy an incoming row after the triggering message. */
+  placement?: "composer" | "message" | "response";
   /** Opt into decorating the message summary; only the first ordered owner wins. */
   decoratesMessageSummary?: boolean;
   id: string;
diff --git a/src/features/conversation/typing-presentation.tsx b/src/features/conversation/typing-presentation.tsx
index 33898a536d..321acceba5 100644
--- a/src/features/conversation/typing-presentation.tsx
+++ b/src/features/conversation/typing-presentation.tsx
@@ -66,13 +66,46 @@ export function TypingPresentation({
     <Presentation.Provider value={value}>{children}</Presentation.Provider>
   );
 }
-export function useTypingReplacement(value: Replacement, enabled: boolean) {
-  const context = useContext(Presentation);
+export function useTypingReplacement(
+  value: Replacement | undefined,
+  enabled: boolean,
+) {
+  useReplacement(useContext(Presentation), value, enabled);
+}
+const ActivityPresentation = createContext<
+  ReturnType<typeof createPresentation> | undefined
+>(undefined);
+export function ActivityIndicatorPresentation({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  const [store] = useState(createPresentation);
+  return (
+    <ActivityPresentation.Provider value={store}>
+      {children}
+    </ActivityPresentation.Provider>
+  );
+}
+export function useActivityTypingReplacement(
+  value: Replacement | undefined,
+  enabled: boolean,
+) {
+  const store = useContext(ActivityPresentation);
+  useReplacement(store ? { store, active: true } : undefined, value, enabled);
+}
+function useReplacement(
+  context:
+    | { store: ReturnType<typeof createPresentation>; active: boolean }
+    | undefined,
+  value: Replacement | undefined,
+  enabled: boolean,
+) {
   const store = context?.store;
   const active = context?.active;
-  const { session, channelId, threadRootId, pubkey } = value;
+  const { session, channelId, threadRootId, pubkey } = value ?? {};
   useLayoutEffect(() => {
-    if (active && enabled)
+    if (active && enabled && session && channelId && pubkey)
       return store?.register({
         session,
         channelId,
@@ -87,6 +120,12 @@ export function useReplacedTypers(
   threadRootId: string | undefined,
 ) {
   const context = useContext(Presentation);
+  const activityStore = useContext(ActivityPresentation);
+  const activityEntries = useSyncExternalStore(
+    activityStore?.subscribe ?? noopSubscribe,
+    activityStore?.snapshot ?? emptySnapshot,
+    emptySnapshot,
+  );
   const entries = useSyncExternalStore(
     context?.store.subscribe ?? noopSubscribe,
     context?.store.snapshot ?? emptySnapshot,
@@ -95,17 +134,22 @@ export function useReplacedTypers(
   return useMemo(
     () =>
       new Set(
-        context?.active
-          ? entries
-              .filter(
-                (entry) =>
-                  entry.session === session &&
-                  entry.channelId === channelId &&
-                  entry.threadRootId === threadRootId,
-              )
-              .map((entry) => entry.pubkey)
-          : [],
+        [...(context?.active ? entries : []), ...activityEntries]
+          .filter(
+            (entry) =>
+              entry.session === session &&
+              entry.channelId === channelId &&
+              entry.threadRootId === threadRootId,
+          )
+          .map((entry) => entry.pubkey),
       ),
-    [context?.active, entries, session, channelId, threadRootId],
+    [
+      context?.active,
+      entries,
+      activityEntries,
+      session,
+      channelId,
+      threadRootId,
+    ],
   );
 }
diff --git a/src/features/messages/ActivityGroupPreview.test.tsx b/src/features/messages/ActivityGroupPreview.test.tsx
index d53cfab1fe..982fa135b3 100644
--- a/src/features/messages/ActivityGroupPreview.test.tsx
+++ b/src/features/messages/ActivityGroupPreview.test.tsx
@@ -9,7 +9,10 @@ import { createRelaySession } from "../relay/session";
 import { keypair } from "../relay/testing";
 import type { ChannelMessage } from "../relay/contracts";
 import { ActivityGroupPreview } from "./ActivityGroupPreview";
-import { useActivityPresentation } from "./activity-presentation";
+import {
+  activityPresentation,
+  useActivityPresentation,
+} from "./activity-presentation";
 import { MessageRow } from "./MessageRow";
 
 stubAvatarBrowserApis();
@@ -140,3 +143,44 @@ it("shimmers a standalone working step and stops when that request finishes", ()
     f.dispose();
   }
 });
+
+it("keeps the primary avatar on the activity bubble without repeating an anchored byline", () => {
+  const history = [{ ...step, id: "one" }, step];
+  const renderGroup = (rows: ChannelMessage[]) => {
+    const group = activityPresentation(rows, undefined, new Set(["agent"]))
+      .groups[0];
+    if (!group) throw new Error("Missing group");
+    return (
+      <ActivityGroupPreview
+        group={group}
+        profiles={new Map([["agent", { name: "Studio assistant" }]])}
+        media={() => undefined}
+        expanded={false}
+        onToggle={() => {}}
+      />
+    );
+  };
+  const view = render(renderGroup(history));
+  expect(screen.getByRole("img", { name: "Studio assistant" })).toBeVisible();
+  expect(screen.getByText("Studio assistant", { exact: true })).toBeVisible();
+  const { audience: _, ...reply } = step;
+  view.rerender(renderGroup([{ ...reply, id: "reply" }, ...history]));
+  expect(screen.queryByText("Studio assistant", { exact: true })).toBeNull();
+  expect(screen.getByRole("img", { name: "Studio assistant" })).toBeVisible();
+  view.rerender(
+    renderGroup([
+      { ...reply, id: "reply" },
+      { ...step, id: "one" },
+      { ...step, authorId: "helper" },
+    ]),
+  );
+  expect(screen.getByRole("img", { name: "Studio assistant" })).toBeVisible();
+  view.rerender(
+    renderGroup([
+      { ...reply, id: "reply" },
+      { ...reply, id: "user", authorId: "human" },
+      ...history,
+    ]),
+  );
+  expect(screen.getByText("Studio assistant", { exact: true })).toBeVisible();
+});
diff --git a/src/features/messages/ActivityGroupPreview.tsx b/src/features/messages/ActivityGroupPreview.tsx
index 0230c8d92e..bd80d5af9e 100644
--- a/src/features/messages/ActivityGroupPreview.tsx
+++ b/src/features/messages/ActivityGroupPreview.tsx
@@ -1,3 +1,6 @@
+import { AgentResponsePreview } from "./AgentResponsePreview";
+import { useActivityIndicator } from "./use-activity-indicator";
+import type { RelaySession } from "../relay/session";
 import { ShimmerText } from "../../shared/design-system/ui/ShimmerText";
 import type { ActivityPresentation } from "./activity-presentation";
 import { Avatar } from "../../shared/design-system/ui/Avatar";
@@ -13,6 +16,7 @@ import styles from "./Messages.module.css";
 /** One stable disclosure for a run of activity, showing its latest speaker. */
 export function ActivityGroupPreview({
   group,
+  session,
   profiles,
   media,
   expanded,
@@ -20,6 +24,7 @@ export function ActivityGroupPreview({
   layout = "timeline",
 }: {
   group: ActivityPresentation;
+  session?: RelaySession | undefined;
   profiles: ReadonlyMap<string, Profile>;
   media: (url: string, size?: "small") => string | undefined;
   expanded: boolean;
@@ -27,19 +32,26 @@ export function ActivityGroupPreview({
   layout?: "timeline" | "thread";
 }) {
   const { latest: row, history, participants, done, working } = group;
-  const profile = profiles.get(row.authorId);
+  const live = useActivityIndicator(
+    session,
+    row,
+    !done && !group.followingMessage,
+  );
+  const primary = history[0]?.authorId ?? row.authorId;
+  const profile = profiles.get(primary);
   const motionKey = (author: string) => `${history[0]?.id ?? row.id}:${author}`;
-  const name = profile?.name ?? row.authorId.slice(0, 10);
+  const name = profile?.name ?? primary.slice(0, 10);
   const text = Array.from(messagePreviewText(row.content).replace(/\s+/g, " "));
   const preview = done
     ? `${history.length} completed ${history.length === 1 ? "step" : "steps"}`
     : text.length > 280
       ? `${text.slice(0, 279).join("")}…`
       : text.join("");
-  return (
+  const content = (
     <div
       className={styles.audienceRow}
       data-layout={layout}
+      data-completed={done || undefined}
       data-collapse={expanded || undefined}
     >
       <div className={styles.audienceEntry}>
@@ -104,11 +116,23 @@ export function ActivityGroupPreview({
             {expanded ? (
               "Collapse"
             ) : (
-              <ShimmerText active={working}>{preview}</ShimmerText>
+              <ShimmerText active={working || live}>{preview}</ShimmerText>
             )}
           </span>
         </button>
       </div>
     </div>
   );
+  return !done || group.standalone ? (
+    <AgentResponsePreview
+      name={name}
+      stackPrevious={!group.standalone}
+      picture={avatarMedia(profile?.picture, media)}
+      layout={layout}
+    >
+      <div className={styles.standaloneActivity}>{content}</div>
+    </AgentResponsePreview>
+  ) : (
+    content
+  );
 }
diff --git a/src/features/messages/ActivityStepPreview.module.css b/src/features/messages/ActivityStepPreview.module.css
new file mode 100644
index 0000000000..88cdc251dc
--- /dev/null
+++ b/src/features/messages/ActivityStepPreview.module.css
@@ -0,0 +1,16 @@
+.stepPreview {
+  display: flex;
+  width: fit-content;
+  align-items: center;
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+  height: calc(var(--text-message) * var(--text-message--line-height));
+}
+.stepText {
+  display: block;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
diff --git a/src/features/messages/ActivityStepPreview.tsx b/src/features/messages/ActivityStepPreview.tsx
new file mode 100644
index 0000000000..eaffebe86c
--- /dev/null
+++ b/src/features/messages/ActivityStepPreview.tsx
@@ -0,0 +1,29 @@
+import { TypingDots } from "../../shared/design-system/ui/TypingDots";
+import { ShimmerText } from "../../shared/design-system/ui/ShimmerText";
+import styles from "./ActivityStepPreview.module.css";
+
+/** The request's typing footprint opens into its real current step. */
+export function ActivityStepPreview({
+  text,
+  state,
+}: {
+  text?: string | undefined;
+  state: "waiting" | "working";
+}) {
+  const characters = Array.from(text?.replace(/\s+/g, " ").trim() ?? "");
+  const label =
+    characters.length > 280
+      ? `${characters.slice(0, 279).join("")}…`
+      : characters.join("");
+  return (
+    <span className={styles.stepPreview}>
+      {!label ? (
+        <TypingDots size="message" state={state} />
+      ) : (
+        <span className={styles.stepText}>
+          <ShimmerText active={state === "working"}>{label}</ShimmerText>
+        </span>
+      )}
+    </span>
+  );
+}
diff --git a/src/features/messages/AgentResponsePreview.tsx b/src/features/messages/AgentResponsePreview.tsx
new file mode 100644
index 0000000000..f27c19821b
--- /dev/null
+++ b/src/features/messages/AgentResponsePreview.tsx
@@ -0,0 +1,57 @@
+import type { ReactNode } from "react";
+import { Avatar } from "../../shared/design-system/ui/Avatar";
+import { RobotIcon } from "../../shared/design-system/icons";
+import styles from "./Messages.module.css";
+
+/** Incoming message geometry for work that has not published a response yet. */
+export function AgentResponsePreview({
+  name,
+  picture,
+  layout = "timeline",
+  children,
+  stackPrevious = false,
+}: {
+  stackPrevious?: boolean;
+  name: string;
+  picture?: string | undefined;
+  layout?: "timeline" | "thread" | "continuation" | undefined;
+  children: ReactNode;
+}) {
+  return (
+    <div
+      className={styles.message}
+      data-stack-previous={stackPrevious || undefined}
+      data-layout={layout}
+      data-agent-response-preview=""
+    >
+      <span className={styles.messageGutter} />
+      <div className={styles.messageBody}>
+        <div className={styles.messageContent}>
+          <div className={styles.messageAvatar} title={name}>
+            <Avatar
+              src={picture}
+              alt={name}
+              fallback={name}
+              shape="squircle"
+              size={layout === "timeline" ? "large" : "default"}
+            />
+          </div>
+          {!stackPrevious && (
+            <div className={styles.messageHeader}>
+              <div className={styles.byline}>
+                <strong className={styles.author}>
+                  <RobotIcon
+                    aria-hidden="true"
+                    className={styles.authorAgentIcon}
+                  />
+                  {name}
+                </strong>
+              </div>
+            </div>
+          )}
+          <div className={styles.messageBubble}>{children}</div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/features/messages/ChannelTimeline.test.tsx b/src/features/messages/ChannelTimeline.test.tsx
index 755c1dcfb9..7dae30637b 100644
--- a/src/features/messages/ChannelTimeline.test.tsx
+++ b/src/features/messages/ChannelTimeline.test.tsx
@@ -24,6 +24,11 @@ import type { ChannelMessage, ChannelWindow } from "../relay/contracts";
 // metrics reproduce the event ordering measured separately in Chromium/WebKit.
 // Reading geometry/dwell has its own real-hook boundary suite. This fixture
 // deliberately supplies only the DOM shape needed for positioning.
+// Activity rendering/subscriptions have their own mounted integration suite.
+vi.mock("./TypingIndicator", () => ({
+  TypingIndicator: () => null,
+  useConversationAgents: () => ({ agents: [] }),
+}));
 vi.mock("./use-reading", () => ({
   useReading: vi.fn(),
   readingPositioned: vi.fn(),
diff --git a/src/features/messages/ChannelTimeline.tsx b/src/features/messages/ChannelTimeline.tsx
index 8a7af78d08..355d134708 100644
--- a/src/features/messages/ChannelTimeline.tsx
+++ b/src/features/messages/ChannelTimeline.tsx
@@ -1,4 +1,5 @@
 // biome-ignore-all lint/a11y/noNoninteractiveTabindex: The history region must support keyboard scrolling.
+import { TypingIndicator, useConversationAgents } from "./TypingIndicator";
 import { ActivityGroupPreview } from "./ActivityGroupPreview";
 import { ActivityExpansion } from "./ActivityExpansion";
 import { useChannelIdentityNames } from "../identity-names/react";
@@ -8,7 +9,10 @@ import { EmptyState } from "../../shared/design-system/ui/EmptyState";
 import { ChatCircleIcon } from "../../shared/design-system/icons";
 import { MembershipRow } from "./MembershipRow";
 import { membershipRows, withoutStartingAgents } from "./membership-rows";
-import { useActivityPresentation } from "./activity-presentation";
+import {
+  activityDisplayRows,
+  useActivityPresentation,
+} from "./activity-presentation";
 import { DayDivider } from "./MessageTimestamp";
 import type { ConversationExtensions } from "../conversation/contracts";
 import type { RelaySession } from "../relay/session";
@@ -141,8 +145,6 @@ export type ChannelTimelineProps = {
   chatPresentation?: boolean | undefined;
   /** False: rows open existing threads but offer none to start; see MessageRow. */
   startsThreads?: boolean | undefined;
-  /** A following composer shows conversation activity; the jump button leaves it a lane. */
-  activityLane?: boolean | undefined;
   onOpenLink(url: string, origin?: MessageLinkOrigin): boolean;
   canOpenLink?: ((target: string) => boolean) | undefined;
   revealMessageId?: string | undefined;
@@ -202,7 +204,6 @@ function Timeline({
   onOpenMediaReview,
   chatPresentation = false,
   startsThreads = true,
-  activityLane = false,
 }: ChannelTimelineProps) {
   useMessageSelectionCopy();
   const [initialPosition] = useState(() =>
@@ -234,16 +235,28 @@ function Timeline({
       agentPubkeys,
     ],
   );
-  const rows = useMemo(() => membershipRows(visibleRows), [visibleRows]);
+  const chronologicalRows = useMemo(
+    () => membershipRows(visibleRows),
+    [visibleRows],
+  );
   const [expandedActivity, setExpandedActivity] = useState<ReadonlySet<string>>(
     () => new Set(),
   );
   const presentation = useActivityPresentation(
-    rows,
+    chronologicalRows,
     queries.agentActivity,
     agentPubkeys,
   );
   const activity = presentation.groups;
+  const { agents: liveAgents } = useConversationAgents(
+    queries,
+    channelId,
+    undefined,
+  );
+  const rows = useMemo(
+    () => activityDisplayRows(chronologicalRows, activity),
+    [chronologicalRows, activity],
+  );
   // Resolve a saved anchor once, before measuring initial geometry. A bottom
   // restore ignores it; absent/visible anchors must not expand on later loads.
   const [activityRestore, setActivityRestore] = useState(
@@ -1136,9 +1149,6 @@ function Timeline({
         visible={showJumpToLatest}
         newMessageCount={newMessageCount}
         onClick={jumpToLatest}
-        activityLane={
-          activityLane ? { session: queries, channelId } : undefined
-        }
       />
       {width > 0 && (
         <Virtualizer
@@ -1197,6 +1207,7 @@ function Timeline({
                         );
                       })()}
                     <ActivityGroupPreview
+                      session={queries}
                       group={disclosure}
                       profiles={profiles}
                       media={queries.media}
@@ -1235,20 +1246,40 @@ function Timeline({
                     />
                   ) : (
                     <MessageRow
-                      activityFollows={rows[index + 1]?.audience === "agents"}
+                      activityFollows={presentation.completedReplies.has(
+                        row.id,
+                      )}
+                      representedAgents={presentation.representedAgents.get(
+                        row.id,
+                      )}
                       activityMotionKey={
                         presentation.byRow.get(row.id)?.motionKey
                       }
                       activityActive={presentation.byRow.get(row.id)?.active}
+                      activityBubble={
+                        !disclosure && presentation.byRow.get(row.id)?.bubble
+                      }
+                      activityStandalone={
+                        !disclosure &&
+                        presentation.byRow.get(row.id)?.standalone
+                      }
+                      activityOwnsLive={
+                        presentation.byRow.get(row.id)?.ownsLive
+                      }
                       stackPrevious={
                         !!previousRow &&
                         !foldedActivity.has(previousRow.id) &&
                         continuesMessageGroup(previousRow, row)
                       }
                       stackNext={
-                        !!nextRow &&
-                        !foldedActivity.has(nextRow.id) &&
-                        continuesMessageGroup(row, nextRow)
+                        presentation.bubbleAnchors.has(row.id) ||
+                        (index === rows.length - 1 &&
+                          row.audience !== "agents" &&
+                          !row.membership &&
+                          row.authorId === liveAgents[0]) ||
+                        (!!nextRow &&
+                          !foldedActivity.has(nextRow.id) &&
+                          continuesMessageGroup(row, nextRow))
                       }
                       session={queries}
                       scope={scope}
@@ -1271,13 +1302,36 @@ function Timeline({
                   )}
                 </ActivityExpansion>
                 {index === rows.length - 1 && (
-                  <div className={styles.timelineEnd} aria-hidden="true" />
+                  <>
+                    <TypingIndicator
+                      inFlow
+                      session={queries}
+                      channelId={channelId}
+                      previousAuthor={
+                        row.audience !== "agents" && !row.membership
+                          ? row.authorId
+                          : undefined
+                      }
+                      openActivity={onOpenLink}
+                      canOpenActivity={canOpenLink}
+                    />
+                    <div className={styles.timelineEnd} aria-hidden="true" />
+                  </>
                 )}
               </Fragment>
             );
           })}
         </Virtualizer>
       )}
+      {!rows.length && (
+        <TypingIndicator
+          inFlow
+          session={queries}
+          channelId={channelId}
+          openActivity={onOpenLink}
+          canOpenActivity={canOpenLink}
+        />
+      )}
       {!rows.length &&
         !window.hasMore &&
         window.status === "ready" &&
diff --git a/src/features/messages/JumpToLatestButton.tsx b/src/features/messages/JumpToLatestButton.tsx
index 84957a1bb3..8074aeed79 100644
--- a/src/features/messages/JumpToLatestButton.tsx
+++ b/src/features/messages/JumpToLatestButton.tsx
@@ -1,23 +1,16 @@
 import { ArrowDownIcon } from "../../shared/design-system/icons/index";
 import { Button } from "../../shared/design-system/ui/Button";
-import { useActivityLaneShown, type ActivityLane } from "./activity-lane";
 import styles from "./Messages.module.css";
 
-export type { ActivityLane } from "./activity-lane";
-
 export function JumpToLatestButton({
   visible,
   newMessageCount,
   onClick,
-  activityLane,
 }: {
   visible: boolean;
   newMessageCount: number;
   onClick(): void;
-  activityLane?: ActivityLane | undefined;
 }) {
-  // One element whether or not a lane applies, so a gate flip keeps focus.
-  const lane = useActivityLaneShown(activityLane);
   const label =
     newMessageCount > 0
       ? `${newMessageCount} new message${newMessageCount === 1 ? "" : "s"}`
@@ -28,7 +21,6 @@ export function JumpToLatestButton({
       inert={!visible}
       aria-hidden={!visible}
       data-visible={visible}
-      data-activity-lane={lane || undefined}
     >
       <div className={styles.jumpToLatestSurface}>
         <Button
diff --git a/src/features/messages/MessageComposer.tsx b/src/features/messages/MessageComposer.tsx
index 0e8d4660eb..73e68d8184 100644
--- a/src/features/messages/MessageComposer.tsx
+++ b/src/features/messages/MessageComposer.tsx
@@ -42,7 +42,6 @@ import { lastMentionedAgent, rememberedMentions } from "./remembered-mentions";
 import { useAgentChoices } from "../agents/use-choices";
 import { ownSolo } from "../solo/labels";
 import { soloHasPeople, soloRoster, useSoloHasPeople } from "../solo/people";
-import { TypingIndicator } from "./TypingIndicator";
 import {
   ArrowUpIcon,
   PaperclipIcon,
@@ -378,7 +377,6 @@ function Composer({
   shown = true,
   requireMention = false,
   chatPresentation = false,
-  activityClickOpensPanel = false,
   inviteAgents = false,
   trailingTool,
 }: MessageComposerProps) {
@@ -1900,16 +1898,6 @@ function Composer({
   if (attachmentsExiting && editing.target) setAttachmentsExiting(false);
   const context = (
     <div className={styles.composerContext}>
-      {!cached && !submission && (
-        <TypingIndicator
-          clickOpensPanel={activityClickOpensPanel}
-          session={session}
-          channelId={channelId}
-          threadRootId={threadRootId}
-          canOpenActivity={canOpenLink}
-          openActivity={onOpenLink}
-        />
-      )}
       {host && extensions?.accessories && (
         <ComposerAccessories
           registry={extensions.accessories}
diff --git a/src/features/messages/MessageRow.test.tsx b/src/features/messages/MessageRow.test.tsx
index f2703975ef..423ede0da2 100644
--- a/src/features/messages/MessageRow.test.tsx
+++ b/src/features/messages/MessageRow.test.tsx
@@ -1379,13 +1379,20 @@ it.each([true, false])(
   },
 );
 
-it.each([
-  { startsThreads: true, replyCount: 0, thread: true },
-  { startsThreads: false, replyCount: 0, thread: false },
-  { startsThreads: false, replyCount: 23, thread: true },
-])(
+it.each(
+  [
+    { startsThreads: true, replyCount: 0, thread: true },
+    { startsThreads: false, replyCount: 0, thread: false },
+    { startsThreads: false, replyCount: 23, thread: true },
+  ].flatMap((scenario) =>
+    (["message", "response"] as const).map((placement) => ({
+      ...scenario,
+      placement,
+    })),
+  ),
+)(
   "gives message accessories a thread only where the row has one to open (%o)",
-  ({ startsThreads, replyCount, thread }) => {
+  ({ startsThreads, replyCount, thread, placement }) => {
     const subscribe = () => () => {};
     const channels = { channels: [], status: "ready" };
     const noTyping: never[] = [];
@@ -1410,7 +1417,7 @@ it.each([
         pluginId: "test",
         revision: "1",
         title: "Agent activity",
-        placement: "message" as const,
+        placement,
         decoratesMessageSummary: true,
         component: ({
           renderMessageSummary,
@@ -1432,6 +1439,7 @@ it.each([
       row: { ...row, replyCount },
       session,
       scope: "test",
+      viewer: row.authorId,
       onOpenThread: () => {},
       startsThreads,
       extensions: {
@@ -1443,10 +1451,16 @@ it.each([
       },
     });
     try {
-      expect(seen).toHaveBeenLastCalledWith(thread, thread);
+      expect(seen).toHaveBeenLastCalledWith(
+        placement === "message" && thread,
+        thread,
+      );
+      expect(
+        !!screen.getByText("Brain working").closest("[data-viewer-message]"),
+      ).toBe(placement === "message");
       expect(screen.getByText("Brain working")).toBeInTheDocument();
       expect(!!screen.queryByRole("button", { name: /^View thread/ })).toBe(
-        thread,
+        placement === "message" ? thread : replyCount > 0,
       );
     } finally {
       view.unmount();
diff --git a/src/features/messages/MessageRow.tsx b/src/features/messages/MessageRow.tsx
index 32c7d8c7d7..25969b7542 100644
--- a/src/features/messages/MessageRow.tsx
+++ b/src/features/messages/MessageRow.tsx
@@ -1,3 +1,5 @@
+import { AgentResponsePreview } from "./AgentResponsePreview";
+import { useActivityIndicator } from "./use-activity-indicator";
 import { activityPresentation } from "./activity-presentation";
 import { ShimmerText } from "../../shared/design-system/ui/ShimmerText";
 import { Collapsible } from "@base-ui/react/collapsible";
@@ -101,6 +103,10 @@ export type MessageRowProps = {
   activityMotionKey?: string | undefined;
   activityFollows?: boolean | undefined;
   activityActive?: boolean | undefined;
+  activityOwnsLive?: boolean | undefined;
+  activityStandalone?: boolean | undefined;
+  activityBubble?: boolean | undefined;
+  representedAgents?: readonly string[] | undefined;
   staticMentions?: boolean | undefined;
   getThreadRoot?: (() => ChannelMessage | undefined) | undefined;
   session?: RelaySession | undefined;
@@ -196,6 +202,7 @@ function MessageRowContent({
   stackPrevious = layout === "continuation",
   stackNext = false,
   activityFollows = false,
+  representedAgents,
   alignViewer = true,
 
   mediaMode = "inline",
@@ -215,8 +222,19 @@ function MessageRowContent({
     row.channelId,
     row.threadRootId ?? row.id,
   );
+  const responseAccessory = () =>
+    !!extensions?.accessories
+      ?.snapshot()
+      .some((entry) => entry.placement === "response");
+  const hasResponseAccessory = useSyncExternalStore(
+    extensions?.accessories?.subscribe ?? noSubscribe,
+    responseAccessory,
+    responseAccessory,
+  );
   const { agents: threadAgents, waiting: threadWaiting } = useThreadAgents(
-    onOpenThread && (row.replyCount > 0 || (startsThreads && !row.threadRootId))
+    !hasResponseAccessory &&
+      onOpenThread &&
+      (row.replyCount > 0 || (startsThreads && !row.threadRootId))
       ? session
       : undefined,
     row.channelId,
@@ -1261,6 +1279,32 @@ function MessageRowContent({
             renderMessageSummary()}
         </div>
       </div>
+      {active && session && scope && extensions?.accessories && (
+        <ComposerAccessories
+          registry={extensions.accessories}
+          placement="response"
+          representedAgents={representedAgents}
+          messageLayout={layout}
+          session={session}
+          scope={scope}
+          channelId={row.channelId}
+          threadRootId={row.threadRootId}
+          message={row}
+          onFocusedRemoval={() =>
+            menuTrigger.current?.focus({ preventScroll: true })
+          }
+          openThread={
+            summaryThread
+              ? () => {
+                  summaryThread(row.id, row.threadRootId ?? row.id);
+                  return true;
+                }
+              : undefined
+          }
+          canOpen={canOpenLink ?? (() => false)}
+          open={onOpenLink}
+        />
+      )}
     </div>
   );
   return renderMessage ? (
@@ -1303,15 +1347,21 @@ function AgentsMessageRow(props: MessageRowProps) {
     session?.agentActivity?.subscribe ?? noSubscribe,
     session?.agentActivity?.snapshot ?? noLibrary,
   );
+  const live = useActivityIndicator(
+    session,
+    row,
+    props.activityOwnsLive ?? false,
+  );
   const active =
-    props.activityActive ??
-    activityPresentation(
-      [row],
-      activity,
-      agentPubkeys,
-      row.threadRootId,
-    ).byRow.get(row.id)?.active ??
-    false;
+    live ||
+    (props.activityActive ??
+      activityPresentation(
+        [row],
+        activity,
+        agentPubkeys,
+        row.threadRootId,
+      ).byRow.get(row.id)?.active ??
+      false);
   const keepMounted = props.keepMounted;
   useEffect(() => {
     if (open) return keepMounted?.(row.id);
@@ -1375,7 +1425,7 @@ function AgentsMessageRow(props: MessageRowProps) {
       />
     </span>
   );
-  return (
+  const content = (
     <FullMessageRow
       {...props}
       shownRow={row}
@@ -1401,7 +1451,9 @@ function AgentsMessageRow(props: MessageRowProps) {
           }
           data-open={open || undefined}
         >
-          {props.day && <DayDivider createdAt={row.createdAt} />}
+          {props.day && !(props.activityBubble || props.activityStandalone) && (
+            <DayDivider createdAt={row.createdAt} />
+          )}
           {/* Keep the address column stable while details open and close. */}
           <Collapsible.Root
             open={open}
@@ -1433,6 +1485,9 @@ function AgentsMessageRow(props: MessageRowProps) {
               aria-label={`${author.name}${to.length ? ` to ${to.map((who) => who.name).join(", ")}` : ""}: ${preview}`}
             >
               {avatar(author)}
+              {open &&
+                (props.activityBubble || props.activityStandalone) &&
+                "Collapse"}
               {!open && (
                 <span className={styles.audiencePreviewText}>
                   <ShimmerText active={active}>{visiblePreview}</ShimmerText>
@@ -1453,6 +1508,21 @@ function AgentsMessageRow(props: MessageRowProps) {
       )}
     />
   );
+  return props.activityBubble || props.activityStandalone ? (
+    <>
+      {props.day && <DayDivider createdAt={row.createdAt} />}
+      <AgentResponsePreview
+        name={author.name}
+        stackPrevious={!props.activityStandalone}
+        picture={author.picture}
+        layout={props.layout === "thread" ? "thread" : "timeline"}
+      >
+        <div className={styles.standaloneActivity}>{content}</div>
+      </AgentResponsePreview>
+    </>
+  ) : (
+    content
+  );
 }
 
 // Subscribe only for mounted thread buttons. Evidence and reading remain session-owned;
diff --git a/src/features/messages/Messages.module.css b/src/features/messages/Messages.module.css
index 42a6deb067..b4ab4f9378 100644
--- a/src/features/messages/Messages.module.css
+++ b/src/features/messages/Messages.module.css
@@ -2633,16 +2633,7 @@ html[data-keyboard-navigation] .rawDiff:focus-visible {
     var(--channel-preview-inset, 0px)
   );
 }
-/* Leave a separate floating lane when the composer has an activity pill. */
-.jumpToLatest[data-activity-lane] {
-  top: calc(
-    100% +
-    var(--history-bottom-inset) -
-    var(--space-3) -
-    2 *
-    var(--space-6)
-  );
-}
+
 .jumpToLatestSurface {
   @apply glass-secondary;
   display: flex;
@@ -3365,3 +3356,76 @@ html[data-keyboard-navigation] .activityExpansion {
   inset: 0;
   cursor: pointer;
 }
+
+.audienceRow[data-completed] .audienceLine {
+  padding-block: 0;
+}
+
+/* Standalone activity uses the normal incoming identity and bubble geometry. */
+.standaloneActivity .audienceRow {
+  container-type: normal;
+  width: auto;
+  margin: 0;
+  padding: 0;
+}
+.standaloneActivity .audienceRow .audienceEntry {
+  padding-inline-start: 0;
+  max-inline-size: 100%;
+  display: block;
+}
+.standaloneActivity .audienceAvatar {
+  display: none;
+}
+.standaloneActivity .audienceRow .audienceLine {
+  inline-size: fit-content;
+  max-inline-size: 100%;
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  letter-spacing: inherit;
+  min-height: calc(var(--text-message) * var(--text-message--line-height));
+}
+.standaloneActivity .audienceRow .audiencePreviewText {
+  display: block;
+}
+.standaloneActivity .audienceRow[data-open] .audienceEntry {
+  display: flex;
+}
+.standaloneActivity .audienceRow[data-open] .audienceLine {
+  order: 1;
+  color: var(--text-subtle);
+}
+.standaloneActivity .audienceBody .message[data-layout="continuation"] {
+  container-type: normal;
+  padding-inline-end: 0;
+}
+
+/* The pending response and a recorded step share a normal message line box. */
+.message[data-agent-response-preview] .messageBubble {
+  font-size: var(--text-message);
+  line-height: var(--text-message--line-height);
+  letter-spacing: var(--text-message--letter-spacing);
+  font-weight: var(--text-message--font-weight);
+}
+
+.standaloneActivity
+  .audienceLine:not([data-collapse])
+  > :not(.audiencePreviewText) {
+  display: none;
+}
+.standaloneActivity .audienceBody {
+  min-height: calc(var(--text-message) * var(--text-message--line-height));
+}
+.standaloneActivity
+  .audienceBody:is([data-starting-style], [data-ending-style]) {
+  height: calc(var(--text-message) * var(--text-message--line-height));
+}
+.standaloneActivity .audienceContent {
+  padding: 0;
+}
+.standaloneActivity .audienceBody .message[data-layout="continuation"] .text {
+  font-size: var(--text-message);
+  line-height: var(--text-message--line-height);
+  letter-spacing: var(--text-message--letter-spacing);
+  font-weight: var(--text-message--font-weight);
+}
diff --git a/src/features/messages/ThreadPanel.test.tsx b/src/features/messages/ThreadPanel.test.tsx
index e97b7933d3..846d47a16e 100644
--- a/src/features/messages/ThreadPanel.test.tsx
+++ b/src/features/messages/ThreadPanel.test.tsx
@@ -12,7 +12,6 @@ import {
 import { StrictMode } from "react";
 import { renderToString } from "react-dom/server";
 import { afterEach, expect, it, vi } from "vitest";
-import { useActivityLanePublisher } from "./activity-lane";
 import { ThreadPanel, type ThreadPanelProps } from "./ThreadPanel";
 import type { MessageRowProps } from "./MessageRow";
 import type { MessageComposerProps } from "./MessageComposer";
@@ -31,6 +30,11 @@ import { formatPublicKey } from "../../shared/identity/public-key";
 
 // Real React owns effects, refs and subscriptions. Only independent child UI is
 // reduced here; MessageRow/MessageComposer retain their own mounted suites.
+// Activity rendering/subscriptions have their own mounted integration suite.
+vi.mock("./TypingIndicator", () => ({
+  TypingIndicator: () => null,
+  useConversationAgents: () => ({ agents: [] }),
+}));
 vi.mock("../relay/react", () => {
   const profiles = new Map();
   return { useRowProfiles: () => profiles };
@@ -861,55 +865,6 @@ it("counts replies recovered after a completed traversal, not initial history pa
   expect(screen.getByRole("button", { name: "2 new messages" })).toBeVisible();
 });
 
-it("reserves the jump button's activity lane only for this thread's composer in a live channel", () => {
-  const h = messagesHarness();
-  const listeners = new Set<() => void>();
-  const subscribe = (listener: () => void) => {
-    listeners.add(listener);
-    return () => {
-      listeners.delete(listener);
-    };
-  };
-  let list: ChannelList = {
-    status: "ready",
-    channels: [{ id: "channel", name: "General" }],
-  };
-  Object.assign(h.session, {
-    channels: { list: () => list, subscribeList: subscribe },
-  });
-  // The composer is mocked here; publish what its TypingIndicator would.
-  function Shown({ threadRootId }: { threadRootId: string | undefined }) {
-    useActivityLanePublisher(h.session, "channel", threadRootId, true);
-    return null;
-  }
-  h.render();
-  h.scroll(500);
-  const lane = () =>
-    screen
-      .getByRole("button", { name: "Jump to latest" })
-      .closest("[data-visible]");
-  const live = lane();
-  expect(live).not.toHaveAttribute("data-activity-lane");
-  // Channel-level activity shows in the channel composer, not this thread's.
-  const channelLevel = render(<Shown threadRootId={undefined} />);
-  expect(live).not.toHaveAttribute("data-activity-lane");
-  channelLevel.unmount();
-  const thread = render(<Shown threadRootId={row.id} />);
-  expect(live).toHaveAttribute("data-activity-lane");
-  // A cached channel's composer mounts no TypingIndicator, so no lane; the
-  // gate flip keeps the same button mounted.
-  list = {
-    status: "ready",
-    channels: [{ id: "channel", name: "General", cached: true }],
-  };
-  act(() => {
-    for (const listener of listeners) listener();
-  });
-  expect(lane()).toBe(live);
-  expect(live).not.toHaveAttribute("data-activity-lane");
-  thread.unmount();
-});
-
 it("transfers keyboard focus to the thread history before removing the jump button", () => {
   const h = messagesHarness();
   h.render();
diff --git a/src/features/messages/ThreadPanel.tsx b/src/features/messages/ThreadPanel.tsx
index 9af9fc67cf..43d863383f 100644
--- a/src/features/messages/ThreadPanel.tsx
+++ b/src/features/messages/ThreadPanel.tsx
@@ -1,8 +1,10 @@
 // biome-ignore-all lint/a11y/noNoninteractiveTabindex: The thread region supports keyboard scrolling and Escape.
+import { TypingIndicator, useConversationAgents } from "./TypingIndicator";
 import { ActivityExpansion } from "./ActivityExpansion";
 import { ActivityGroupPreview } from "./ActivityGroupPreview";
 import {
   activityPresentation,
+  activityDisplayRows,
   useActivitySnapshot,
 } from "./activity-presentation";
 import { activityGroups } from "./activity-groups";
@@ -518,11 +520,6 @@ function ThreadMessages({
     },
   );
   const preview = channelAccess === "joinable" || channelAccess === "preview";
-  const cached = useListedChannel(
-    session.channels,
-    channelId,
-    (listed) => !!listed?.cached,
-  );
   const [joinNoticeHeight, setJoinNoticeHeight] = useState(0);
   const [joining, setJoining] = useState(false);
   const snapshot = useSyncExternalStore(
@@ -877,6 +874,17 @@ function ThreadMessages({
     request: number;
   }>();
   const rootId = snapshot.root?.id;
+  const { agents: liveAgents } = useConversationAgents(
+    session,
+    channelId,
+    rootId,
+  );
+  const lastMessage = rows.at(-1);
+  const joinsLive =
+    !!lastMessage &&
+    !lastMessage.membership &&
+    lastMessage.audience !== "agents" &&
+    lastMessage.authorId === liveAgents[0];
   const hasMediaComments =
     (snapshot.root?.replyCount ?? 0) > 0 ||
     snapshot.replies.length > 0 ||
@@ -1219,16 +1227,17 @@ function ThreadMessages({
     ? new Date(snapshot.root.createdAt * 1000).toDateString()
     : undefined;
   function renderReplies(parent: string | undefined, depth = 0): ReactNode {
-    const siblings = tree.children.get(parent) ?? [];
+    const chronologicalSiblings = tree.children.get(parent) ?? [];
     const presentation = activityPresentation(
-      siblings,
+      chronologicalSiblings,
       activitySnapshot,
       agentPubkeys,
-      rootId,
+      parent ?? rootId,
     );
     const groups = presentation.groups.filter((group) =>
       group.ids.every((id) => !tree.children.get(id)?.length),
     );
+    const siblings = activityDisplayRows(chronologicalSiblings, groups);
     const hidden = new Set(
       groups.flatMap((group) =>
         expandedActivity.has(group.ids[0] ?? "") ? [] : group.ids,
@@ -1272,9 +1281,15 @@ function ThreadMessages({
           enabled={row.audience === "agents"}
         >
           <MessageRow
-            activityFollows={siblings[index + 1]?.audience === "agents"}
+            activityFollows={presentation.completedReplies.has(row.id)}
+            representedAgents={presentation.representedAgents.get(row.id)}
             activityMotionKey={presentation.byRow.get(row.id)?.motionKey}
             activityActive={presentation.byRow.get(row.id)?.active}
+            activityBubble={!group && presentation.byRow.get(row.id)?.bubble}
+            activityStandalone={
+              !group && presentation.byRow.get(row.id)?.standalone
+            }
+            activityOwnsLive={presentation.byRow.get(row.id)?.ownsLive}
             viewer={session.viewer}
             extensions={extensions}
             session={session}
@@ -1286,9 +1301,11 @@ function ThreadMessages({
             getThreadRoot={getThreadRoot}
             stackPrevious={continuation}
             stackNext={
-              !!nextRow &&
-              continuesMessageGroup(row, nextRow) &&
-              !children?.length
+              presentation.bubbleAnchors.has(row.id) ||
+              (joinsLive && row.id === lastMessage?.id) ||
+              (!!nextRow &&
+                continuesMessageGroup(row, nextRow) &&
+                !children?.length)
             }
             profile={profiles.get(row.authorId)}
             participantProfiles={profiles}
@@ -1326,6 +1343,7 @@ function ThreadMessages({
                 <DayDivider createdAt={row.createdAt} />
               )}
               <ActivityGroupPreview
+                session={session}
                 group={group}
                 profiles={profiles}
                 media={session.media}
@@ -1534,11 +1552,6 @@ function ThreadMessages({
           visible={showJumpToLatest}
           newMessageCount={newMessageCount}
           onClick={jumpToLatest}
-          activityLane={
-            composerRoot && !cached
-              ? { session, channelId, threadRootId: composerRoot.id }
-              : undefined
-          }
         />
         <div
           data-thread-rows=""
@@ -1552,7 +1565,14 @@ function ThreadMessages({
               session={session}
               scope={scope}
               onReply={soloConversation ? undefined : focusReply}
+              stackNext={joinsLive && snapshot.root.id === lastMessage?.id}
               row={snapshot.root}
+              representedAgents={activityPresentation(
+                snapshot.replies,
+                activitySnapshot,
+                agentPubkeys,
+                rootId,
+              ).representedAgents.get(snapshot.root.id)}
               profile={profiles.get(snapshot.root.authorId)}
               participantProfiles={profiles}
               agentPubkeys={agentPubkeys}
@@ -1596,6 +1616,18 @@ function ThreadMessages({
               to check the destination.
             </p>
           )}
+        {!positioning && rootId && (
+          <TypingIndicator
+            inFlow
+            session={session}
+            channelId={channelId}
+            threadRootId={rootId}
+            previousAuthor={joinsLive ? lastMessage?.authorId : undefined}
+            openActivity={onOpenLink}
+            canOpenActivity={canOpenLink}
+            clickOpensPanel={activityClickOpensPanel}
+          />
+        )}
         {positioning || (snapshot.status === "loading" && !rows.length) ? (
           <ThreadLoading />
         ) : null}
diff --git a/src/features/messages/TypingIndicator.module.css b/src/features/messages/TypingIndicator.module.css
index a129f2962a..5d7c45aa16 100644
--- a/src/features/messages/TypingIndicator.module.css
+++ b/src/features/messages/TypingIndicator.module.css
@@ -1,24 +1,13 @@
+@reference "../../shared/styles/globals.css";
+
 .typing {
-  position: absolute;
-  inset-block-end: calc(100% + var(--space-half));
-  inset-inline: var(--space-4);
-  inline-size: min(calc(100% - 2 * var(--space-4)), 52rem);
-  margin-inline: auto;
-  z-index: 1;
-  flex-direction: row-reverse;
-  justify-content: space-between;
-  pointer-events: none;
   display: flex;
-  align-items: center;
-  gap: var(--space-1h);
-  flex-shrink: 0;
+  flex-direction: column;
+  gap: var(--space-half);
+  padding: 0 var(--space-4) var(--space-2);
   min-width: 0;
-  max-width: 100%;
+  flex-shrink: 0;
   color: var(--text-subtle);
-  font-size: var(--text-caption);
-  line-height: var(--text-caption--line-height);
-  letter-spacing: var(--text-caption--letter-spacing);
-  font-weight: var(--text-caption--font-weight);
 }
 
 .label {
@@ -30,6 +19,10 @@
   text-overflow: ellipsis;
 }
 
+.typing > [data-agent-response-preview] {
+  width: min(100%, var(--timeline-measure, 52rem));
+}
+
 .dots {
   display: flex;
   flex-shrink: 0;
@@ -64,34 +57,8 @@
   }
 }
 
-.avatars {
-  display: inline-flex;
-  align-items: center;
-  padding-inline-end: var(--space-1);
-}
-
-.avatar {
-  display: inline-flex;
-  flex-shrink: 0;
-  width: 1.5rem;
-  height: 1.5rem;
-}
-
-.avatars .avatar {
-  padding: var(--space-half);
-  margin-inline-end: calc(-1 * var(--space-1));
-  background: var(--surface-panel);
-  border-radius: var(--radius-control);
-  box-shadow: var(--shadow-sm);
-}
-
-.typing [data-agent-activity-trigger] {
-  pointer-events: auto;
-  padding: var(--space-1);
-  min-height: var(--size-control-sm);
-}
-
 .humans {
+  @apply text-caption;
   display: flex;
   align-items: center;
   gap: var(--space-2);
@@ -103,13 +70,22 @@
   border-radius: var(--radius-control);
 }
 
-.overflow {
-  padding-inline-start: var(--space-2);
+.typing[data-in-flow] {
+  padding: 0;
 }
 
-@media (max-width: 40.625rem) {
-  .typing {
-    inset-inline: var(--space-3);
-    inline-size: min(calc(100% - 2 * var(--space-3)), 52rem);
-  }
+/* A message interaction uses the bubble's type and inset, not control sizing. */
+.bubbleTrigger {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  max-width: 100%;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  font: inherit;
+  letter-spacing: inherit;
+  text-align: start;
+  cursor: pointer;
 }
diff --git a/src/features/messages/TypingIndicator.test.tsx b/src/features/messages/TypingIndicator.test.tsx
index 369fa9190a..984a76642f 100644
--- a/src/features/messages/TypingIndicator.test.tsx
+++ b/src/features/messages/TypingIndicator.test.tsx
@@ -14,8 +14,14 @@ import { afterEach, expect, it, vi } from "vitest";
 import type { RelaySession } from "../relay/session";
 import type { TypingEntry } from "../relay/typing";
 import { profileActivityViewTarget } from "../profiles/target";
+import { ActivityIndicatorPresentation } from "../conversation/typing-presentation";
+import { ActivityGroupPreview } from "./ActivityGroupPreview";
+import { activityPresentation } from "./activity-presentation";
+import type { ChannelMessage } from "../relay/contracts";
 import { TypingIndicator } from "./TypingIndicator";
 
+import { stubAvatarBrowserApis } from "../agents/avatar-testing";
+stubAvatarBrowserApis();
 afterEach(cleanup);
 const agent = "a".repeat(64),
   human = "b".repeat(64),
@@ -78,7 +84,7 @@ const entry = (
   threadRootId: string | undefined = root,
 ): TypingEntry => ({ pubkey, channelId: "channel", threadRootId });
 
-it("opens one avatar by hover, with separate thread and activity actions and keyboard focus return", async () => {
+it("shows an incoming typing preview without invented details, retaining navigation and focus return", async () => {
   const f = fixture(),
     user = userEvent.setup(),
     open = vi.fn(() => true);
@@ -94,10 +100,12 @@ it("opens one avatar by hover, with separate thread and activity actions and key
   const trigger = screen.getByRole("button", {
     name: "Activity: Agent working",
   });
-  expect(trigger).toHaveTextContent("A");
+  expect(screen.getByRole("img", { name: "Agent" })).toBeVisible();
+  expect(trigger.querySelector('[data-state="working"]')).not.toBeNull();
   expect(trigger).not.toHaveTextContent("Working");
   await user.hover(trigger);
   let dialog = await screen.findByRole("dialog", { name: "Working now" });
+  expect(within(dialog).getByText("Step details unavailable")).toBeVisible();
   expect(within(dialog).getByText("Thread · First task")).toBeVisible();
   await user.click(
     within(dialog).getByRole("button", { name: "View Agent activity" }),
@@ -179,6 +187,7 @@ it.each([
     );
     const dialog = await screen.findByRole("dialog", { name: "Working now" });
     expect(within(dialog).getByText(label, { exact: true })).toBeVisible();
+    expect(within(dialog).queryByText("Step details unavailable")).toBeNull();
     expect(dialog).not.toHaveTextContent("report.txt");
   },
 );
@@ -230,7 +239,7 @@ it("keeps a non-navigable status when the plugin is unavailable and does not clo
   });
   await user.click(trigger);
   let dialog = await screen.findByRole("dialog");
-  expect(within(dialog).getByText("Working")).toBeVisible();
+  expect(within(dialog).getByText("Step details unavailable")).toBeVisible();
   expect(within(dialog).queryByRole("button")).toBeNull();
   view.rerender(
     <TypingIndicator
@@ -433,7 +442,11 @@ it("opens the sole known conversation without attributing unknown telemetry to t
   await user.click(
     screen.getByRole("button", { name: "Activity: Agent working" }),
   );
-  expect(screen.getByText(/Work with unconfirmed thread/)).toBeVisible();
+  expect(
+    within(screen.getByRole("dialog", { name: "Working now" })).getByText(
+      /Work with unconfirmed thread/,
+    ),
+  ).toBeVisible();
   await user.click(screen.getByRole("button", { name: "View Agent activity" }));
   expect(open).toHaveBeenLastCalledWith(
     profileActivityViewTarget(agent),
@@ -629,3 +642,84 @@ it("Solo chat ArrowDown exposes retained thread navigation without opening Activ
   );
   expect(trigger).toHaveFocus();
 });
+
+it("hands the live signal to visible activity and restores dots when it leaves", () => {
+  const f = fixture();
+  const row: ChannelMessage = {
+    id: "step",
+    channelId: "channel",
+    authorId: agent,
+    audience: "agents",
+    createdAt: 100,
+    content: "Checking the fix",
+    mentions: [],
+    attachments: [],
+    reactions: [],
+    participants: [],
+    replyCount: 0,
+  };
+  const group = activityPresentation(
+    [{ ...row, id: "first" }, row],
+    undefined,
+    new Set([agent]),
+  ).groups[0];
+  if (!group) throw new Error("Missing activity group");
+  const renderFlow = (show: boolean) => (
+    <ActivityIndicatorPresentation>
+      {show && (
+        <ActivityGroupPreview
+          session={f.session}
+          group={group}
+          profiles={new Map()}
+          media={() => undefined}
+          expanded={false}
+          onToggle={() => {}}
+        />
+      )}
+      <TypingIndicator session={f.session} channelId="channel" />
+    </ActivityIndicatorPresentation>
+  );
+  f.update([{ pubkey: agent, channelId: "channel" }]);
+  const view = render(renderFlow(false));
+  expect(
+    screen.getByRole("button", { name: "Activity: Agent working" }),
+  ).toBeVisible();
+  view.rerender(renderFlow(true));
+  expect(
+    screen.queryByRole("button", { name: "Activity: Agent working" }),
+  ).toBeNull();
+  expect(screen.getByText("Checking the fix")).toHaveAttribute(
+    "data-active",
+    "true",
+  );
+  f.update([{ pubkey: agent, channelId: "channel", threadRootId: secondRoot }]);
+  expect(
+    screen.getByRole("button", { name: "Activity: Agent working" }),
+  ).toBeVisible();
+  expect(screen.getByText("Checking the fix")).not.toHaveAttribute(
+    "data-active",
+  );
+  f.update([{ pubkey: agent, channelId: "channel" }]);
+  view.rerender(renderFlow(false));
+  expect(
+    screen.getByRole("button", { name: "Activity: Agent working" }),
+  ).toBeVisible();
+});
+
+it("groups an in-flow typing preview without repeating the preceding agent's byline", () => {
+  const f = fixture();
+  f.update([{ pubkey: agent, channelId: "channel" }]);
+  const view = render(
+    <TypingIndicator
+      inFlow
+      previousAuthor={agent}
+      session={f.session}
+      channelId="channel"
+    />,
+  );
+  expect(screen.getByRole("img", { name: "Agent" })).toBeVisible();
+  expect(screen.queryByText("Agent", { exact: true })).toBeNull();
+  expect(
+    view.container.querySelector("[data-agent-response-preview]"),
+  ).toHaveAttribute("data-stack-previous", "true");
+});
diff --git a/src/features/messages/TypingIndicator.tsx b/src/features/messages/TypingIndicator.tsx
index db0213c2c9..391f6892e9 100644
--- a/src/features/messages/TypingIndicator.tsx
+++ b/src/features/messages/TypingIndicator.tsx
@@ -12,8 +12,9 @@ import {
 } from "react";
 import { profileActivityViewTarget } from "../profiles/target";
 import { currentActivity } from "../agents/current-activity";
-import { Avatar } from "../../shared/design-system/ui/Avatar";
-import { Button } from "../../shared/design-system/ui/Button";
+import { AvatarStack } from "../../shared/design-system/ui/AvatarStack";
+import { AgentResponsePreview } from "./AgentResponsePreview";
+import { ActivityStepPreview } from "./ActivityStepPreview";
 import { AgentActivityRow } from "../agents/AgentActivityRow";
 import activityStyles from "../agents/ActivityRows.module.css";
 import {
@@ -26,14 +27,13 @@ import type { ComposerSession } from "./composer-session";
 import type { MessageLinkOrigin } from "./MessageRow";
 import styles from "./TypingIndicator.module.css";
 import { avatarMedia } from "../../shared/avatar-source";
-import { useActivityLanePublisher } from "./activity-lane";
 
 const noSubscribe = () => () => {};
 const noActivity = () => undefined;
 const noRows: readonly never[] = [];
 
 /** Agents working in one conversation, over existing stores; no reads or capture. */
-function useConversationAgents(
+export function useConversationAgents(
   session: ComposerSession & Partial<Pick<RelaySession, "agentActivity">>,
   channelId: string,
   threadRootId: string | undefined,
@@ -64,7 +64,7 @@ function useConversationAgents(
   return { details, entries, replaced, agents };
 }
 
-/** Floating conversation activity over existing stores; no reads or capture. */
+/** Incoming conversation activity over existing stores; no reads or capture. */
 export function TypingIndicator({
   session,
   channelId,
@@ -72,7 +72,11 @@ export function TypingIndicator({
   canOpenActivity,
   clickOpensPanel = false,
   openActivity,
+  previousAuthor,
+  inFlow = false,
 }: {
+  previousAuthor?: string | undefined;
+  inFlow?: boolean;
   clickOpensPanel?: boolean | undefined;
   session: ComposerSession & Partial<Pick<RelaySession, "agentActivity">>;
   channelId: string;
@@ -87,8 +91,6 @@ export function TypingIndicator({
     channelId,
     threadRootId,
   );
-  // The history's jump button beside this composer reserves the lane the pill uses.
-  useActivityLanePublisher(session, channelId, threadRootId, agents.length > 0);
   const resolveName = useChannelIdentityNames(session, channelId);
   const profiles = useSyncExternalStore(
     session.profiles.subscribe,
@@ -119,20 +121,6 @@ export function TypingIndicator({
   );
   const name = (pubkey: string) =>
     resolveName(pubkey, profiles.get(pubkey)?.name ?? pubkey.slice(0, 10));
-  const avatar = (pubkey: string) => {
-    const picture = profiles.get(pubkey)?.picture;
-    return (
-      <span className={styles.avatar} key={pubkey}>
-        <Avatar
-          alt=""
-          fallback={name(pubkey)}
-          shape="squircle"
-          size="fill"
-          src={avatarMedia(picture, session.media)}
-        />
-      </span>
-    );
-  };
   const scopeLabel = (pubkey: string) => {
     if (threadRootId) return undefined;
     const roots = details.get(pubkey)?.roots ?? [];
@@ -182,8 +170,14 @@ export function TypingIndicator({
       <AgentActivityRow
         name={name(pubkey)}
         picture={avatarMedia(picture, session.media)}
-        status={detail.label}
-        scope={scopeLabel(pubkey)}
+        status={
+          detail.label === "Working" ? "Step details unavailable" : detail.label
+        }
+        scope={
+          detail.roots.length === 1 && detail.roots[0] === null
+            ? undefined
+            : scopeLabel(pubkey)
+        }
         openLabel={`Open ${conversationRoot ? "thread" : "conversation"} for ${name(pubkey)}`}
         onOpen={openActivity ? () => navigate(conversation) : undefined}
         onOpenActivity={
@@ -217,31 +211,78 @@ export function TypingIndicator({
         {[workingText, typingText].filter(Boolean).join(". ")}
       </span>
       {(agents.length > 0 || humans.length > 0) && (
-        <div className={styles.typing} data-conversation-activity="">
-          {agents.length > 0 && (
-            <AgentChooser
-              key={`${channelId}:${threadRootId ?? ""}`}
-              label={
-                agents.length === 1 && firstAgent
-                  ? `Activity: ${name(firstAgent)} working`
-                  : `Activity: ${agents.length} agents working`
-              }
-              avatars={agents.slice(0, 4).map(avatar)}
-              overflow={Math.max(0, agents.length - 4)}
-              openTarget={openActivity}
-              directTarget={
-                directTarget && canOpenActivity?.(directTarget)
-                  ? directTarget
-                  : undefined
-              }
-              directOrigin={firstAgent ? activityOrigin(firstAgent) : undefined}
+        <div
+          className={styles.typing}
+          data-in-flow={inFlow || undefined}
+          data-conversation-activity=""
+        >
+          {firstAgent && (
+            <AgentResponsePreview
+              stackPrevious={previousAuthor === firstAgent}
+              name={name(firstAgent)}
+              picture={avatarMedia(
+                profiles.get(firstAgent)?.picture,
+                session.media,
+              )}
+              layout={threadRootId ? "thread" : "timeline"}
             >
-              {(navigate) =>
-                agents.map((pubkey) => (
-                  <div key={pubkey}>{agentStatus(pubkey, navigate)}</div>
-                ))
-              }
-            </AgentChooser>
+              <AgentChooser
+                key={`${channelId}:${threadRootId ?? ""}`}
+                label={
+                  agents.length === 1 && firstAgent
+                    ? `Activity: ${name(firstAgent)} working`
+                    : `Activity: ${agents.length} agents working`
+                }
+                content={
+                  <>
+                    <AvatarStack
+                      size="small"
+                      items={agents.slice(1).map((id) => ({
+                        id,
+                        name: name(id),
+                        src: avatarMedia(
+                          profiles.get(id)?.picture,
+                          session.media,
+                        ),
+                        shape: "squircle",
+                      }))}
+                    />
+                    <ActivityStepPreview
+                      state={
+                        details.get(firstAgent)?.label ===
+                          "Received · waiting to start" ||
+                        details.get(firstAgent)?.label === "Starting"
+                          ? "waiting"
+                          : "working"
+                      }
+                      text={
+                        details.get(firstAgent)?.label === "Working" ||
+                        details.get(firstAgent)?.label ===
+                          "Received · waiting to start" ||
+                        details.get(firstAgent)?.label === "Starting"
+                          ? undefined
+                          : details.get(firstAgent)?.label
+                      }
+                    />
+                  </>
+                }
+                openTarget={openActivity}
+                directTarget={
+                  directTarget && canOpenActivity?.(directTarget)
+                    ? directTarget
+                    : undefined
+                }
+                directOrigin={
+                  firstAgent ? activityOrigin(firstAgent) : undefined
+                }
+              >
+                {(navigate) =>
+                  agents.map((pubkey) => (
+                    <div key={pubkey}>{agentStatus(pubkey, navigate)}</div>
+                  ))
+                }
+              </AgentChooser>
+            </AgentResponsePreview>
           )}
           {humans.length > 0 && (
             <span className={styles.humans} aria-hidden="true">
@@ -261,16 +302,14 @@ export function TypingIndicator({
 
 function AgentChooser({
   label,
-  avatars,
-  overflow,
+  content,
   openTarget,
   directTarget,
   directOrigin,
   children,
 }: {
   label: string;
-  avatars: ReactNode;
-  overflow: number;
+  content: ReactNode;
   openTarget?:
     | ((target: string, origin?: MessageLinkOrigin) => boolean)
     | undefined;
@@ -345,9 +384,10 @@ function AgentChooser({
         ref={trigger}
         openOnHover="preview"
         render={
-          <Button
-            variant="ghost"
-            size="xs"
+          <button
+            type="button"
+            data-buzz-ui=""
+            className={styles.bubbleTrigger}
             aria-label={label}
             data-agent-activity-trigger=""
             aria-keyshortcuts={directTarget ? "ArrowDown" : undefined}
@@ -381,13 +421,8 @@ function AgentChooser({
               navigate(directTarget, directOrigin);
             }}
           >
-            <span className={styles.avatars} aria-hidden="true">
-              {avatars}
-              {overflow > 0 && (
-                <span className={styles.overflow}>+{overflow}</span>
-              )}
-            </span>
-          </Button>
+            {content}
+          </button>
         }
       />
       <PopoverPopup
@@ -396,14 +431,13 @@ function AgentChooser({
         size="wide"
         padding="list"
         side="top"
-        align="end"
+        align="start"
         aria-label="Working now"
       >
         <section
           className={activityStyles.activityList}
           aria-label="Agents working now"
         >
-          <h2 className={activityStyles.activitySectionLabel}>Working now</h2>
           {children(navigate)}
         </section>
       </PopoverPopup>
diff --git a/src/features/messages/activity-groups.test.ts b/src/features/messages/activity-groups.test.ts
index 3b1dbf28f9..e5a82b24d4 100644
--- a/src/features/messages/activity-groups.test.ts
+++ b/src/features/messages/activity-groups.test.ts
@@ -1,4 +1,8 @@
 import { expect, it } from "vitest";
+import {
+  activityDisplayRows,
+  activityPresentation,
+} from "./activity-presentation";
 import { activityGroups } from "./activity-groups";
 import type { ChannelMessage } from "../relay/contracts";
 
@@ -69,3 +73,30 @@ it("splits groups across local days and channels", () => {
     })),
   );
 });
+
+it("places completed history after its agent reply while keeping unfinished work in place", () => {
+  const history = run("step", 2);
+  const { audience: _, ...reply } = activity("reply");
+  const rows = [...history, reply];
+  const completed = activityPresentation(rows, undefined, new Set(["agent"]));
+  expect(
+    activityDisplayRows(rows, completed.groups).map((row) => row.id),
+  ).toEqual(["reply", "step0", "step1"]);
+  expect([...completed.completedReplies]).toEqual(["reply"]);
+  const request = { ...reply, id: "request", authorId: "human" };
+  expect([
+    ...activityPresentation(
+      [request, ...history],
+      undefined,
+      new Set(["agent"]),
+    ).completedReplies,
+  ]).toEqual([]);
+  const otherReply = { ...reply, authorId: "human" };
+  const pending = [...history, otherReply];
+  expect(
+    activityDisplayRows(
+      pending,
+      activityPresentation(pending, undefined, new Set(["agent"])).groups,
+    ),
+  ).toEqual(pending);
+});
diff --git a/src/features/messages/activity-lane.ts b/src/features/messages/activity-lane.ts
deleted file mode 100644
index 5ea6e1771f..0000000000
--- a/src/features/messages/activity-lane.ts
+++ /dev/null
@@ -1,83 +0,0 @@
-import { useCallback, useLayoutEffect, useSyncExternalStore } from "react";
-import type { ComposerSession } from "./composer-session";
-
-/** The conversation whose composer, a following sibling of this history, shows activity. */
-export type ActivityLane = Readonly<{
-  session: ComposerSession;
-  channelId: string;
-  threadRootId?: string | undefined;
-}>;
-
-// The composer's TypingIndicator publishes whether it shows working agents; the
-// history's jump button reads it. Deriving the pill twice would miss the
-// composer's replacement context and subscribe the button to every typing
-// tick. Mounted presentation only: no data, timers, or reads.
-type Lane = { shown: number; listeners: Set<() => void> };
-const lanes = new WeakMap<ComposerSession, Map<string, Lane>>();
-const key = (channelId: string, threadRootId: string | undefined) =>
-  `${channelId}\n${threadRootId ?? ""}`;
-function lane(
-  session: ComposerSession,
-  channelId: string,
-  threadRootId: string | undefined,
-) {
-  const byKey = lanes.get(session) ?? new Map<string, Lane>();
-  lanes.set(session, byKey);
-  const id = key(channelId, threadRootId);
-  const entry = byKey.get(id) ?? { shown: 0, listeners: new Set<() => void>() };
-  byKey.set(id, entry);
-  return entry;
-}
-function release(entry: Lane, session: ComposerSession, id: string) {
-  if (entry.shown === 0 && entry.listeners.size === 0)
-    lanes.get(session)?.delete(id);
-}
-
-/** Publish, while `shown`, that this conversation's composer shows working agents. */
-export function useActivityLanePublisher(
-  session: ComposerSession,
-  channelId: string,
-  threadRootId: string | undefined,
-  shown: boolean,
-) {
-  useLayoutEffect(() => {
-    if (!shown) return;
-    const entry = lane(session, channelId, threadRootId);
-    entry.shown += 1;
-    for (const listener of entry.listeners) listener();
-    return () => {
-      entry.shown -= 1;
-      for (const listener of entry.listeners) listener();
-      release(entry, session, key(channelId, threadRootId));
-    };
-  }, [session, channelId, threadRootId, shown]);
-}
-
-const noSubscribe = () => () => {};
-const notShown = () => false;
-/** Whether a mounted composer shows working agents in the lane's conversation. */
-export function useActivityLaneShown(target: ActivityLane | undefined) {
-  const session = target?.session;
-  const channelId = target?.channelId;
-  const threadRootId = target?.threadRootId;
-  const subscribe = useCallback(
-    (listener: () => void) => {
-      if (!session || channelId === undefined) return noSubscribe();
-      const entry = lane(session, channelId, threadRootId);
-      entry.listeners.add(listener);
-      return () => {
-        entry.listeners.delete(listener);
-        release(entry, session, key(channelId, threadRootId));
-      };
-    },
-    [session, channelId, threadRootId],
-  );
-  const snapshot = useCallback(
-    () =>
-      !!session &&
-      channelId !== undefined &&
-      (lanes.get(session)?.get(key(channelId, threadRootId))?.shown ?? 0) > 0,
-    [session, channelId, threadRootId],
-  );
-  return useSyncExternalStore(subscribe, snapshot, notShown);
-}
diff --git a/src/features/messages/activity-presentation.ts b/src/features/messages/activity-presentation.ts
index f4d9aa6f9f..374ba03213 100644
--- a/src/features/messages/activity-presentation.ts
+++ b/src/features/messages/activity-presentation.ts
@@ -1,7 +1,8 @@
-import { useSyncExternalStore } from "react";
+import { useMemo, useSyncExternalStore } from "react";
 import type { ChannelMessage } from "../relay/contracts";
 import type { RelaySession } from "../relay/session";
 import { requestWork } from "../agents/request-work";
+import { continuesMessageGroup } from "./message-grouping";
 import { activityRuns } from "./activity-groups";
 
 type Activity = RelaySession["agentActivity"];
@@ -17,6 +18,7 @@ type ActivityRun = {
 export type ActivityPresentation = ActivityRun & {
   done: boolean;
   working: boolean;
+  standalone?: boolean;
 };
 const noSubscribe = () => () => {};
 const noActivity = () => undefined;
@@ -72,22 +74,45 @@ export function activityPresentation(
     rows.map((row, index) => [row.id, rows[index + 1]]),
   );
   const requests = new Map<string, string>();
+  if (rootId) requests.set(rootId, rootId);
+  const representedAgents = new Map<string, string[]>();
   let request = rootId;
   for (const row of rows) {
     if (
       row.audience !== "agents" &&
+      !row.agentEnvelope &&
       !row.membership &&
       agents &&
       !agents.has(row.authorId)
     )
       request = row.id;
-    if (request) requests.set(row.id, request);
+    const parentRequest = requests.get(
+      row.replyParentId ?? row.threadRootId ?? "",
+    );
+    const rowRequest =
+      row.agentEnvelope || agents?.has(row.authorId)
+        ? (parentRequest ?? request)
+        : request;
+    if (rowRequest) requests.set(row.id, rowRequest);
+    if (
+      rowRequest &&
+      !row.membership &&
+      (row.agentEnvelope || agents?.has(row.authorId))
+    ) {
+      const represented = representedAgents.get(rowRequest) ?? [];
+      if (!represented.includes(row.authorId)) represented.push(row.authorId);
+      representedAgents.set(rowRequest, represented);
+    }
   }
   const groups: ActivityPresentation[] = [];
+  const bubbleAnchors = new Set<string>();
   const byRow = new Map<
     string,
     {
       active: boolean;
+      ownsLive: boolean;
+      standalone: boolean;
+      bubble: boolean;
       motionKey: string | undefined;
     }
   >();
@@ -105,11 +130,27 @@ export function activityPresentation(
       followingMessage: following.get(latest.id),
     };
     const { done, working } = activityStatus(group, snapshot);
+    const before = rows[rows.findIndex((row) => row.id === first.id) - 1];
+    const anchor =
+      done && group.followingMessage?.authorId === first.authorId
+        ? group.followingMessage
+        : before;
+    const standalone =
+      !anchor ||
+      !!anchor.membership ||
+      anchor.audience === "agents" ||
+      anchor.authorId !== first.authorId ||
+      anchor.threadRootId !== first.threadRootId ||
+      (anchor === before && !continuesMessageGroup(anchor, first));
+    if (!standalone && !done && before) bubbleAnchors.add(before.id);
     const lastByAgent = new Map(history.map((row) => [row.authorId, row.id]));
     for (const row of history) {
       const last = lastByAgent.get(row.authorId) === row.id;
       byRow.set(row.id, {
         active: last && working.has(row.authorId),
+        ownsLive: last && !done && !group.followingMessage,
+        standalone: row.id === first.id && standalone,
+        bubble: !done || standalone,
         motionKey:
           history.length > 1 && last
             ? `${first.id}:${row.authorId}`
@@ -117,10 +158,23 @@ export function activityPresentation(
       });
     }
     if (history.length > 1) {
-      groups.push({ ...group, done, working: working.size > 0 });
+      groups.push({ ...group, done, working: working.size > 0, standalone });
     }
   }
-  return { groups, byRow };
+  const completedReplies = new Set(
+    groups.flatMap((group) =>
+      group.done &&
+      group.followingMessage &&
+      !group.followingMessage.membership &&
+      group.followingMessage.audience !== "agents" &&
+      group.followingMessage.channelId === group.latest.channelId &&
+      group.followingMessage.threadRootId === group.latest.threadRootId &&
+      group.participants.includes(group.followingMessage.authorId)
+        ? [group.followingMessage.id]
+        : [],
+    ),
+  );
+  return { groups, byRow, representedAgents, bubbleAnchors, completedReplies };
 }
 export function useActivityPresentation(
   rows: readonly ChannelMessage[],
@@ -128,10 +182,39 @@ export function useActivityPresentation(
   agents: ReadonlySet<string> | undefined,
   rootId?: string,
 ) {
-  return activityPresentation(
-    rows,
-    useActivitySnapshot(activity),
-    agents,
-    rootId,
+  const snapshot = useActivitySnapshot(activity);
+  return useMemo(
+    () => activityPresentation(rows, snapshot, agents, rootId),
+    [rows, snapshot, agents, rootId],
   );
 }
+
+/** Keep a finished run's disclosure and expanded history below its reply. */
+export function activityDisplayRows<T extends ChannelMessage>(
+  rows: readonly T[],
+  groups: readonly ActivityPresentation[],
+): readonly T[] {
+  const byId = new Map(rows.map((row) => [row.id, row]));
+  const replies = new Map<string, T>();
+  for (const group of groups) {
+    const first = group.ids[0];
+    const reply = group.followingMessage && byId.get(group.followingMessage.id);
+    if (
+      first &&
+      group.done &&
+      reply &&
+      !reply.membership &&
+      reply.audience !== "agents" &&
+      group.participants.includes(reply.authorId) &&
+      reply.channelId === group.latest.channelId &&
+      reply.threadRootId === group.latest.threadRootId
+    )
+      replies.set(first, reply);
+  }
+  if (!replies.size) return rows;
+  const moved = new Set([...replies.values()].map((row) => row.id));
+  return rows.flatMap((row) => {
+    const reply = replies.get(row.id);
+    return reply ? [reply, row] : moved.has(row.id) ? [] : [row];
+  });
+}
diff --git a/src/features/messages/use-activity-indicator.ts b/src/features/messages/use-activity-indicator.ts
new file mode 100644
index 0000000000..0dd9d3381d
--- /dev/null
+++ b/src/features/messages/use-activity-indicator.ts
@@ -0,0 +1,47 @@
+import { useSyncExternalStore } from "react";
+import type { RelaySession } from "../relay/session";
+import type { ChannelMessage } from "../relay/contracts";
+import { currentActivity } from "../agents/current-activity";
+import { useActivityTypingReplacement } from "../conversation/typing-presentation";
+const noSubscribe = () => () => {};
+const noActivity = () => undefined;
+const empty: ReturnType<RelaySession["typing"]["snapshot"]> = [];
+const noTyping = () => empty;
+
+/** A current, rendered activity row owns the live signal for its exact scope. */
+export function useActivityIndicator(
+  session: RelaySession | undefined,
+  row: ChannelMessage,
+  eligible: boolean,
+) {
+  const typing = useSyncExternalStore(
+    session?.typing?.subscribe ?? noSubscribe,
+    session?.typing?.snapshot ?? noTyping,
+  );
+  const activity = useSyncExternalStore(
+    session?.agentActivity?.subscribe ?? noSubscribe,
+    session?.agentActivity?.snapshot ?? noActivity,
+  );
+  const detail = eligible
+    ? currentActivity(
+        activity,
+        typing,
+        new Set([row.authorId]),
+        row.channelId,
+        row.threadRootId,
+      ).get(row.authorId)
+    : undefined;
+  const live = !!detail?.roots.includes(row.threadRootId ?? null);
+  useActivityTypingReplacement(
+    session
+      ? {
+          session,
+          channelId: row.channelId,
+          threadRootId: row.threadRootId,
+          pubkey: row.authorId,
+        }
+      : undefined,
+    live,
+  );
+  return live;
+}
diff --git a/src/shared/design-system/DESIGN.md b/src/shared/design-system/DESIGN.md
index abfb5f1037..a85a5d5f88 100644
--- a/src/shared/design-system/DESIGN.md
+++ b/src/shared/design-system/DESIGN.md
@@ -1552,7 +1552,8 @@ that adds no useful information.
 
 ### Activity dots
 
-`TypingDots` owns the shared decorative activity motion. `state="waiting"`
+`TypingDots` owns the shared decorative activity motion. Use `size="message"`
+for 6px dots with 4px gaps inside a message line; compact indicators retain their existing sizes. `state="waiting"`
 breathes all three dots together over 2.4 seconds for a received request waiting
 to start. `state="working"` (the default) preserves the 1.4-second staggered fade.
 Switching state keeps the same footprint. These named component rhythms are
@@ -1592,7 +1593,8 @@ Existing palette utilities and older role names are compatibility APIs while
 callers migrate, not the default for new UI. Tailwind's stock palette is removed.
 
 `ShimmerText` gives a short live-work label (an agent's current step) a slow
-sheen between the subtle and standard text roles. Use it only while that work is
+sheen from metadata text to standard text, with a distinct 1.8s sweep.
+Use it only while that work is
 live, never on finished, failed or waiting text. Reduced motion shows plain text.
 
 Activity indicators that appear while work is live (the message activity pill,
diff --git a/src/shared/design-system/ui/ShimmerText.module.css b/src/shared/design-system/ui/ShimmerText.module.css
index fe18ac6cfc..2b0cd433f3 100644
--- a/src/shared/design-system/ui/ShimmerText.module.css
+++ b/src/shared/design-system/ui/ShimmerText.module.css
@@ -6,15 +6,15 @@
   .text[data-active] {
     background: linear-gradient(
       100deg,
-      var(--text-subtle) 20%,
-      var(--text-standard) 45%,
-      var(--text-subtle) 70%
+      var(--text-metadata) 30%,
+      var(--text-standard) 50%,
+      var(--text-metadata) 70%
     );
-    background-size: 240% 100%;
+    background-size: 200% 100%;
     background-clip: text;
     -webkit-background-clip: text;
     color: transparent;
-    animation: text-shimmer 2.4s linear infinite;
+    animation: text-shimmer 1.8s linear infinite;
   }
 }
 
diff --git a/src/shared/design-system/ui/TypingDots.module.css b/src/shared/design-system/ui/TypingDots.module.css
index 6dbfae8fc7..8a7e1ce3ac 100644
--- a/src/shared/design-system/ui/TypingDots.module.css
+++ b/src/shared/design-system/ui/TypingDots.module.css
@@ -55,3 +55,11 @@
   width: calc(var(--space-1) - 1px);
   height: calc(var(--space-1) - 1px);
 }
+
+.dots[data-size="message"] {
+  gap: var(--space-1);
+}
+.dots[data-size="message"] > span {
+  width: var(--space-1h);
+  height: var(--space-1h);
+}
diff --git a/src/shared/design-system/ui/TypingDots.tsx b/src/shared/design-system/ui/TypingDots.tsx
index cea8526422..c23f781511 100644
--- a/src/shared/design-system/ui/TypingDots.tsx
+++ b/src/shared/design-system/ui/TypingDots.tsx
@@ -6,7 +6,7 @@ export function TypingDots({
   size = "default",
 }: {
   state?: "waiting" | "working";
-  size?: "default" | "small";
+  size?: "default" | "small" | "message";
 }) {
   return (
     <span

From 430bf0459cc70ab210b1dc9e83d9b5981b6506a9 Mon Sep 17 00:00:00 2001
From: Arjun Mahanti <arjun@squareup.com>
Date: Tue, 27 Oct 2026 16:49:56 -0400
Subject: [PATCH 06/19] Allow incoming activity accessories and update
 conversation fixtures

Co-authored-by: OpenAI Codex <noreply@openai.com>
Signed-off-by: Arjun Mahanti <arjun@squareup.com>
---
 src/app/pages.integration.test.mjs                      | 2 +-
 src/bundled/channels/useConversationTabs.test.tsx       | 2 ++
 src/features/conversation/EmbeddedThread.test.tsx       | 8 +++++---
 src/features/conversation/service.tsx                   | 2 +-
 src/features/messages/ChannelTimeline.viewport.test.tsx | 8 ++++----
 src/features/messages/ThreadPanel.nesting.test.tsx      | 9 ++++++++-
 6 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/src/app/pages.integration.test.mjs b/src/app/pages.integration.test.mjs
index 1bac4d729d..71a7572d5f 100644
--- a/src/app/pages.integration.test.mjs
+++ b/src/app/pages.integration.test.mjs
@@ -273,7 +273,7 @@ test("the app runtime exposes ready bundled pages and removes them on disable",
         .snapshot()
         .map(({ id, placement }) => [id, placement]),
       [
-        ["activity", "message"],
+        ["activity", "response"],
         ["typing-presentation", undefined],
       ],
     );
diff --git a/src/bundled/channels/useConversationTabs.test.tsx b/src/bundled/channels/useConversationTabs.test.tsx
index 5dea76892c..a1aa1ae6e4 100644
--- a/src/bundled/channels/useConversationTabs.test.tsx
+++ b/src/bundled/channels/useConversationTabs.test.tsx
@@ -1,4 +1,5 @@
 // @vitest-environment jsdom
+const emptyTyping: never[] = [];
 import "@testing-library/jest-dom/vitest";
 import {
   act,
@@ -1609,6 +1610,7 @@ it("a hidden retained thread tab's rows re-render for new panels, not channel-li
       snapshot: () => profiles,
       subscribe: () => () => {},
     },
+    typing: { subscribe: () => () => {}, snapshot: () => emptyTyping },
     agentChoices: createAgentLibrary(undefined).queries,
     messages: { retry: () => {} },
     media: () => undefined,
diff --git a/src/features/conversation/EmbeddedThread.test.tsx b/src/features/conversation/EmbeddedThread.test.tsx
index d2d1b44407..fab9062dcc 100644
--- a/src/features/conversation/EmbeddedThread.test.tsx
+++ b/src/features/conversation/EmbeddedThread.test.tsx
@@ -4,6 +4,7 @@ import {
 } from "./ConversationHost";
 import { ConversationPresentation } from "./ConversationPresentation";
 // @vitest-environment jsdom
+const emptyTyping: never[] = [];
 import "@testing-library/jest-dom/vitest";
 import {
   act,
@@ -171,6 +172,7 @@ function fixture(
       snapshot: () => profiles,
       subscribe: () => () => {},
     },
+    typing: { subscribe: () => () => {}, snapshot: () => emptyTyping },
     agentChoices: createAgentLibrary(undefined).queries,
     messages: { retry() {} },
     media: () => undefined,
@@ -365,9 +367,9 @@ it("offers recovery for a failed edit left in the outbox", () => {
     } as unknown as OutgoingEvent,
   ]);
   render(<EmbeddedThread {...h.props} />);
-  expect(screen.getByRole("status")).toHaveTextContent(
-    "Message edit: Relay refused the edit.",
-  );
+  expect(
+    screen.getByText("Message edit: Relay refused the edit."),
+  ).toBeVisible();
   fireEvent.click(screen.getByRole("button", { name: "Retry message update" }));
   expect(h.outbox.retry).toHaveBeenCalledExactlyOnceWith("edit");
 });
diff --git a/src/features/conversation/service.tsx b/src/features/conversation/service.tsx
index e7953f867a..f086fc82a2 100644
--- a/src/features/conversation/service.tsx
+++ b/src/features/conversation/service.tsx
@@ -279,7 +279,7 @@ export class ConversationService extends Service implements Conversation {
     validate(value);
     if (
       value.placement !== undefined &&
-      !["composer", "message"].includes(value.placement)
+      !["composer", "message", "response"].includes(value.placement)
     )
       throw new Error("Invalid accessory placement");
     this.accessoryEntries.register(this.ctx, value);
diff --git a/src/features/messages/ChannelTimeline.viewport.test.tsx b/src/features/messages/ChannelTimeline.viewport.test.tsx
index d53e176ad4..bbb361274f 100644
--- a/src/features/messages/ChannelTimeline.viewport.test.tsx
+++ b/src/features/messages/ChannelTimeline.viewport.test.tsx
@@ -201,14 +201,14 @@ it("stacks distinct agents with overflow and removes the stack when history open
       ),
     );
     expect(screen.getByText("+1")).toBeVisible();
-    expect(screen.getAllByTitle("one")).toHaveLength(1);
+    expect(screen.getAllByTitle("one")).toHaveLength(2);
     expect(screen.getByTitle("two")).toBeVisible();
     expect(screen.getByTitle("three")).toBeVisible();
     expect(screen.queryByTitle("four")).toBeNull();
+    const compactAvatar = screen.getAllByTitle("one")[1];
+    if (!compactAvatar) throw new Error("Missing compact agent avatar");
     expect(
-      screen
-        .getByTitle("one")
-        .compareDocumentPosition(screen.getByTitle("two")) &
+      compactAvatar.compareDocumentPosition(screen.getByTitle("two")) &
         Node.DOCUMENT_POSITION_FOLLOWING,
     ).toBeTruthy();
     expect(
diff --git a/src/features/messages/ThreadPanel.nesting.test.tsx b/src/features/messages/ThreadPanel.nesting.test.tsx
index 156ad01b81..043be822dc 100644
--- a/src/features/messages/ThreadPanel.nesting.test.tsx
+++ b/src/features/messages/ThreadPanel.nesting.test.tsx
@@ -1,4 +1,6 @@
 // @vitest-environment jsdom
+const emptyTyping: never[] = [];
+const emptyProfiles = new Map();
 import "@testing-library/jest-dom/vitest";
 import {
   act,
@@ -130,7 +132,12 @@ function setup(messageId = "root") {
   };
   const session = {
     thread: () => view,
-    profiles: { ensure: async () => {} },
+    profiles: {
+      ensure: async () => {},
+      subscribe: () => () => {},
+      snapshot: () => emptyProfiles,
+    },
+    typing: { subscribe: () => () => {}, snapshot: () => emptyTyping },
     agentChoices: createAgentLibrary(undefined).queries,
     messages: { retry: () => {} },
     media: () => undefined,

From dc64acabb94a4117bba118e2ab722b2c2e718303 Mon Sep 17 00:00:00 2001
From: Arjun Mahanti <arjun@squareup.com>
Date: Tue, 27 Oct 2026 17:39:46 -0400
Subject: [PATCH 07/19] Wait for reminder menu focus before keyboard navigation

Co-authored-by: OpenAI Codex <noreply@openai.com>
Signed-off-by: Arjun Mahanti <arjun@squareup.com>
---
 src/bundled/reminders/RemindDialog.test.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/bundled/reminders/RemindDialog.test.tsx b/src/bundled/reminders/RemindDialog.test.tsx
index 04fe60c25b..1f603b4331 100644
--- a/src/bundled/reminders/RemindDialog.test.tsx
+++ b/src/bundled/reminders/RemindDialog.test.tsx
@@ -190,7 +190,16 @@ it("reveals labelled custom fields and saves a future time with the note", async
   screen.getByRole("combobox", { name: "When" }).focus();
   await user.keyboard("{Enter}");
   await screen.findByRole("option", { name: "Custom date & time" });
-  await user.keyboard("{End}{Enter}");
+  await vi.waitFor(() =>
+    expect(screen.getByRole("option", { name: "In 30 minutes" })).toHaveFocus(),
+  );
+  await user.keyboard("{End}");
+  await vi.waitFor(() =>
+    expect(
+      screen.getByRole("option", { name: "Custom date & time" }),
+    ).toHaveFocus(),
+  );
+  await user.keyboard("{Enter}");
   fireEvent.change(screen.getByLabelText("Reminder date"), {
     target: { value: "" },
   });

From 037591644de9e9ee16e5d343e9c82e0839a24757 Mon Sep 17 00:00:00 2001
From: Arjun Mahanti <arjun@squareup.com>
Date: Tue, 27 Oct 2026 17:57:35 -0400
Subject: [PATCH 08/19] Center live typing indicators within the message column

Co-authored-by: OpenAI Codex <noreply@openai.com>
Signed-off-by: Arjun Mahanti <arjun@squareup.com>
---
 src/features/messages/TypingIndicator.module.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/features/messages/TypingIndicator.module.css b/src/features/messages/TypingIndicator.module.css
index 5d7c45aa16..1604d1137d 100644
--- a/src/features/messages/TypingIndicator.module.css
+++ b/src/features/messages/TypingIndicator.module.css
@@ -71,6 +71,8 @@
 }
 
 .typing[data-in-flow] {
+  width: min(100%, var(--timeline-measure, 52rem));
+  margin-inline: auto;
   padding: 0;
 }
 

From 779a6624726b288ce97dd208deaa14df0deaf9c7 Mon Sep 17 00:00:00 2001
From: Arjun Mahanti <arjun@squareup.com>
Date: Wed, 28 Oct 2026 11:10:35 -0400
Subject: [PATCH 09/19] Refine agent activity handoff and typing presentation

Co-authored-by: OpenAI Codex <noreply@openai.com>
Signed-off-by: Arjun Mahanti <arjun@squareup.com>
---
 .../agent-activity/ActivityAccessory.test.tsx |  57 +++++-
 .../agent-activity/ActivityAccessory.tsx      |  17 +-
 .../conversation/typing-presentation.tsx      |  37 +++-
 .../messages/ActivityGroupPreview.tsx         |  14 +-
 src/features/messages/ActivityStepPreview.tsx |   2 +-
 .../messages/AgentResponsePreview.tsx         |  44 +++-
 .../ChannelTimeline.viewport.test.tsx         |   4 +
 src/features/messages/Messages.module.css     |  48 +++++
 .../messages/TypingIndicator.module.css       |  22 ++
 .../messages/TypingIndicator.test.tsx         | 188 ++++++++++++------
 src/features/messages/TypingIndicator.tsx     |  75 ++++---
 src/features/messages/activity-groups.test.ts |  22 ++
 .../messages/activity-presentation.ts         |   8 +-
 .../messages/use-activity-indicator.ts        |  16 +-
 14 files changed, 433 insertions(+), 121 deletions(-)

diff --git a/src/bundled/agent-activity/ActivityAccessory.test.tsx b/src/bundled/agent-activity/ActivityAccessory.test.tsx
index 69eb743f2c..aa5597db5d 100644
--- a/src/bundled/agent-activity/ActivityAccessory.test.tsx
+++ b/src/bundled/agent-activity/ActivityAccessory.test.tsx
@@ -18,7 +18,10 @@ import {
   ActivityAccessory,
   ActivityTypingReplacement,
 } from "./ActivityAccessory";
-import { TypingPresentation } from "../../features/conversation/typing-presentation";
+import {
+  ActivityIndicatorPresentation,
+  TypingPresentation,
+} from "../../features/conversation/typing-presentation";
 import { TypingIndicator } from "../../features/messages/TypingIndicator";
 import { createAgentActivity } from "../../features/agents/activity";
 import { createAgentLibrary } from "../../features/agents/library";
@@ -411,6 +414,9 @@ it("shows local receipt and failure without requiring an ACP transcript, and ope
       "View agent activity: Blossom, Starting",
     );
     expect(bubble.querySelector('[data-state="waiting"]')).not.toBeNull();
+    act(() => work.step("send_message"));
+    expect(bubble).not.toHaveTextContent("Sending a message");
+    expect(bubble.querySelector('[data-state="working"]')).not.toBeNull();
     act(() => work.step("Read", "notes.txt"));
     expect(bubble).toHaveAccessibleName(
       "View agent activity: Blossom, Reading notes.txt",
@@ -1167,3 +1173,52 @@ it("shows nothing later when a stopped hosted turn ends before its 30 seconds",
     f.dispose();
   }
 });
+
+it("hands the visible request bubble to the live preview after a reply, even with the composer replacement mounted", () => {
+  const local = createLocalAgentActivity();
+  const f = fixture(local);
+  const typing = [{ pubkey: A, channelId: "c", threadRootId: root }];
+  const session = {
+    ...f.props.session,
+    typing: { snapshot: () => typing, subscribe: () => () => {} },
+  } as unknown as RelaySession;
+  const props = { ...f.props, session };
+  const ui = (representedAgents: string[]) => (
+    <ActivityIndicatorPresentation>
+      <ActivityAccessory {...props} representedAgents={representedAgents} />
+      <TypingPresentation active>
+        <ActivityTypingReplacement {...props} />
+      </TypingPresentation>
+      <TypingIndicator session={session} channelId="c" threadRootId={root} />
+    </ActivityIndicatorPresentation>
+  );
+  const work = local.begin({
+    scope: "test",
+    agent: A,
+    channelId: "c",
+    messageId: root,
+    threadRootId: root,
+  });
+  work.step("Read", "notes.txt");
+  const view = render(ui([]));
+  try {
+    expect(
+      screen.getByRole("button", {
+        name: "View agent activity: Blossom, Reading notes.txt",
+      }),
+    ).toBeVisible();
+    expect(
+      screen.queryByRole("button", { name: "Activity: Blossom working" }),
+    ).toBeNull();
+    view.rerender(ui([A]));
+    expect(
+      screen.queryByLabelText("Agent activity on this message"),
+    ).toBeNull();
+    expect(
+      screen.getByRole("button", { name: "Activity: Blossom working" }),
+    ).toHaveTextContent("Reading notes.txt");
+  } finally {
+    view.unmount();
+    f.dispose();
+  }
+});
diff --git a/src/bundled/agent-activity/ActivityAccessory.tsx b/src/bundled/agent-activity/ActivityAccessory.tsx
index 1ef4962752..f601a17a3e 100644
--- a/src/bundled/agent-activity/ActivityAccessory.tsx
+++ b/src/bundled/agent-activity/ActivityAccessory.tsx
@@ -220,11 +220,21 @@ export function ActivityAccessory(props: ActivityProps) {
     >
       <AgentResponsePreview
         name={primary.name}
+        participants={bubble.map((entry) => ({
+          id: entry.agent,
+          name: entry.name,
+          picture: avatarMedia(entry.picture, session.media),
+        }))}
         picture={avatarMedia(primary.picture, session.media)}
         layout={props.messageLayout}
       >
         {shown.map((entry) => (
-          <TypingReplacement key={entry.agent} {...props} agent={entry.agent} />
+          <TypingReplacement
+            shared
+            key={entry.agent}
+            {...props}
+            agent={entry.agent}
+          />
         ))}
         <ActivityBubble
           key={`${channelId}:${message?.id ?? ""}`}
@@ -458,9 +468,6 @@ function ActivityBubble({
     <span className={styles.summaryGroups}>
       {otherEntries.length > 0 && (
         <span className={styles.summaryActivity} data-thread-working="">
-          {avatars(
-            otherEntries.filter((entry) => entry.agent !== entries[0]?.agent),
-          )}
           {(working || waiting) && (
             <ActivityStepPreview
               text={stepText}
@@ -669,7 +676,7 @@ export function ActivityTypingReplacement(props: ComposerAccessoryProps) {
   return (
     <>
       {agents.map(({ agent }) => (
-        <TypingReplacement shared key={agent} {...props} agent={agent} />
+        <TypingReplacement key={agent} {...props} agent={agent} />
       ))}
     </>
   );
diff --git a/src/features/conversation/typing-presentation.tsx b/src/features/conversation/typing-presentation.tsx
index 321acceba5..67e1c3ea3c 100644
--- a/src/features/conversation/typing-presentation.tsx
+++ b/src/features/conversation/typing-presentation.tsx
@@ -90,9 +90,15 @@ export function ActivityIndicatorPresentation({
 export function useActivityTypingReplacement(
   value: Replacement | undefined,
   enabled: boolean,
+  participants?: readonly string[],
 ) {
   const store = useContext(ActivityPresentation);
-  useReplacement(store ? { store, active: true } : undefined, value, enabled);
+  useReplacement(
+    store ? { store, active: true } : undefined,
+    value,
+    enabled,
+    participants,
+  );
 }
 function useReplacement(
   context:
@@ -100,19 +106,32 @@ function useReplacement(
     | undefined,
   value: Replacement | undefined,
   enabled: boolean,
+  participants?: readonly string[],
 ) {
   const store = context?.store;
   const active = context?.active;
   const { session, channelId, threadRootId, pubkey } = value ?? {};
+  const participantKeys = (participants ?? (pubkey ? [pubkey] : [])).join(":");
   useLayoutEffect(() => {
-    if (active && enabled && session && channelId && pubkey)
-      return store?.register({
-        session,
-        channelId,
-        threadRootId,
-        pubkey,
-      });
-  }, [store, active, enabled, session, channelId, threadRootId, pubkey]);
+    if (!active || !enabled || !session || !channelId || !participantKeys)
+      return;
+    const releases = participantKeys
+      .split(":")
+      .map((pubkey) =>
+        store?.register({ session, channelId, threadRootId, pubkey }),
+      );
+    return () => {
+      for (const release of releases) release?.();
+    };
+  }, [
+    store,
+    active,
+    enabled,
+    session,
+    channelId,
+    threadRootId,
+    participantKeys,
+  ]);
 }
 export function useReplacedTypers(
   session: object | undefined,
diff --git a/src/features/messages/ActivityGroupPreview.tsx b/src/features/messages/ActivityGroupPreview.tsx
index bd80d5af9e..77f31e67b8 100644
--- a/src/features/messages/ActivityGroupPreview.tsx
+++ b/src/features/messages/ActivityGroupPreview.tsx
@@ -36,6 +36,7 @@ export function ActivityGroupPreview({
     session,
     row,
     !done && !group.followingMessage,
+    participants,
   );
   const primary = history[0]?.authorId ?? row.authorId;
   const profile = profiles.get(primary);
@@ -72,7 +73,7 @@ export function ActivityGroupPreview({
             );
           }}
         >
-          {expanded ? (
+          {done ? null : expanded ? (
             <Avatar
               size="small"
               shape="squircle"
@@ -113,7 +114,7 @@ export function ActivityGroupPreview({
             </span>
           )}
           <span className={styles.audiencePreviewText}>
-            {expanded ? (
+            {expanded && !done ? (
               "Collapse"
             ) : (
               <ShimmerText active={working || live}>{preview}</ShimmerText>
@@ -126,6 +127,15 @@ export function ActivityGroupPreview({
   return !done || group.standalone ? (
     <AgentResponsePreview
       name={name}
+      participants={
+        done
+          ? []
+          : participants.map((id) => ({
+              id,
+              name: profiles.get(id)?.name ?? id.slice(0, 10),
+              picture: avatarMedia(profiles.get(id)?.picture, media),
+            }))
+      }
       stackPrevious={!group.standalone}
       picture={avatarMedia(profile?.picture, media)}
       layout={layout}
diff --git a/src/features/messages/ActivityStepPreview.tsx b/src/features/messages/ActivityStepPreview.tsx
index eaffebe86c..c96ded3d7c 100644
--- a/src/features/messages/ActivityStepPreview.tsx
+++ b/src/features/messages/ActivityStepPreview.tsx
@@ -17,7 +17,7 @@ export function ActivityStepPreview({
       : characters.join("");
   return (
     <span className={styles.stepPreview}>
-      {!label ? (
+      {!label || label === "Sending a message" ? (
         <TypingDots size="message" state={state} />
       ) : (
         <span className={styles.stepText}>
diff --git a/src/features/messages/AgentResponsePreview.tsx b/src/features/messages/AgentResponsePreview.tsx
index f27c19821b..bb4ebe566b 100644
--- a/src/features/messages/AgentResponsePreview.tsx
+++ b/src/features/messages/AgentResponsePreview.tsx
@@ -7,6 +7,7 @@ import styles from "./Messages.module.css";
 export function AgentResponsePreview({
   name,
   picture,
+  participants = [],
   layout = "timeline",
   children,
   stackPrevious = false,
@@ -14,6 +15,11 @@ export function AgentResponsePreview({
   stackPrevious?: boolean;
   name: string;
   picture?: string | undefined;
+  participants?: readonly {
+    id: string;
+    name: string;
+    picture?: string | undefined;
+  }[];
   layout?: "timeline" | "thread" | "continuation" | undefined;
   children: ReactNode;
 }) {
@@ -28,13 +34,37 @@ export function AgentResponsePreview({
       <div className={styles.messageBody}>
         <div className={styles.messageContent}>
           <div className={styles.messageAvatar} title={name}>
-            <Avatar
-              src={picture}
-              alt={name}
-              fallback={name}
-              shape="squircle"
-              size={layout === "timeline" ? "large" : "default"}
-            />
+            <span
+              className={styles.agentAvatarGroup}
+              data-count={Math.max(1, Math.min(participants.length, 3))}
+              role="img"
+              aria-label={
+                participants.length
+                  ? participants.map((agent) => agent.name).join(", ")
+                  : name
+              }
+            >
+              <span className={styles.agentAvatarGroupItem}>
+                <Avatar
+                  src={participants[0]?.picture ?? picture}
+                  alt=""
+                  fallback={participants[0]?.name ?? name}
+                  shape="squircle"
+                  size="fill"
+                />
+              </span>
+              {participants.slice(1, 3).map((agent) => (
+                <span key={agent.id} className={styles.agentAvatarGroupItem}>
+                  <Avatar
+                    src={agent.picture}
+                    alt=""
+                    fallback={agent.name}
+                    shape="squircle"
+                    size="fill"
+                  />
+                </span>
+              ))}
+            </span>
           </div>
           {!stackPrevious && (
             <div className={styles.messageHeader}>
diff --git a/src/features/messages/ChannelTimeline.viewport.test.tsx b/src/features/messages/ChannelTimeline.viewport.test.tsx
index bbb361274f..89014258d4 100644
--- a/src/features/messages/ChannelTimeline.viewport.test.tsx
+++ b/src/features/messages/ChannelTimeline.viewport.test.tsx
@@ -277,6 +277,10 @@ it("uses one preview in channels and separates runs at public replies", () => {
     );
     expect(screen.queryByText("Update 0")).toBeNull();
     expect(screen.getByText("4 completed steps")).toBeVisible();
+    const completed = screen.getByRole("button", {
+      name: /Show activity history.*4 completed steps/,
+    });
+    expect(completed.querySelector("[data-avatar-motion-key]")).toBeNull();
     expect(screen.getByText("Main reply")).toBeVisible();
     expect(screen.getByText("Update 8")).toBeVisible();
     expect(
diff --git a/src/features/messages/Messages.module.css b/src/features/messages/Messages.module.css
index 6459998075..550ffe5529 100644
--- a/src/features/messages/Messages.module.css
+++ b/src/features/messages/Messages.module.css
@@ -3573,3 +3573,51 @@ html[data-keyboard-navigation] .activityExpansion {
   letter-spacing: var(--text-message--letter-spacing);
   font-weight: var(--text-message--font-weight);
 }
+
+/* Keep a working team inside the same footprint as one message avatar. */
+.agentAvatarGroup {
+  position: relative;
+  display: block;
+  width: 2.5rem;
+  height: 2.5rem;
+}
+.message:not([data-layout="timeline"]) .agentAvatarGroup {
+  width: 2rem;
+  height: 2rem;
+}
+.agentAvatarGroupItem {
+  position: absolute;
+  inset: 0;
+  transform-origin: top left;
+  transform: scale(1);
+  opacity: 1;
+  transition:
+    transform var(--duration-state) var(--easing-settle),
+    opacity var(--duration-state) var(--easing-enter);
+}
+.agentAvatarGroup[data-count="2"] .agentAvatarGroupItem:first-child {
+  transform: scale(0.62);
+}
+.agentAvatarGroup[data-count="2"] .agentAvatarGroupItem:nth-child(2) {
+  transform: translate(38%, 38%) scale(0.62);
+}
+.agentAvatarGroup[data-count="3"] .agentAvatarGroupItem:first-child {
+  transform: translateX(22%) scale(0.56);
+}
+.agentAvatarGroup[data-count="3"] .agentAvatarGroupItem:nth-child(2) {
+  transform: translateY(44%) scale(0.56);
+}
+.agentAvatarGroup[data-count="3"] .agentAvatarGroupItem:nth-child(3) {
+  transform: translate(44%, 44%) scale(0.56);
+}
+@starting-style {
+  .agentAvatarGroup[data-count] .agentAvatarGroupItem:not(:first-child) {
+    opacity: 0;
+    transform: translate(22%, 22%) scale(0.52);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .agentAvatarGroupItem {
+    transition: none;
+  }
+}
diff --git a/src/features/messages/TypingIndicator.module.css b/src/features/messages/TypingIndicator.module.css
index 1604d1137d..0c63a44649 100644
--- a/src/features/messages/TypingIndicator.module.css
+++ b/src/features/messages/TypingIndicator.module.css
@@ -76,6 +76,28 @@
   padding: 0;
 }
 
+/* Align the label with bubble text; dots sit just before that text column. */
+.typing[data-in-flow] .humans {
+  position: relative;
+  margin-inline-start: calc(
+    var(--size-control) +
+    var(--space-3) +
+    var(--space-4)
+  );
+  padding-inline: 0;
+}
+.typing[data-in-flow][data-layout="thread"] .humans {
+  margin-inline-start: calc(
+    var(--size-control-sm) +
+    var(--space-2) +
+    var(--space-4)
+  );
+}
+.typing[data-in-flow] .humans .dots {
+  position: absolute;
+  inset-inline-end: calc(100% + var(--space-2));
+}
+
 /* A message interaction uses the bubble's type and inset, not control sizing. */
 .bubbleTrigger {
   display: flex;
diff --git a/src/features/messages/TypingIndicator.test.tsx b/src/features/messages/TypingIndicator.test.tsx
index 984a76642f..7bd2a91259 100644
--- a/src/features/messages/TypingIndicator.test.tsx
+++ b/src/features/messages/TypingIndicator.test.tsx
@@ -47,7 +47,11 @@ function fixture() {
   };
   const profiles = new Map([
     [agent, { name: "Agent" }],
-    [human, { name: "Human", isAgent: true }],
+    [human, { name: "Human" }],
+    [
+      "public-agent",
+      { name: "Sam’s assistant", isAgent: true, ownerPubkey: "sam" },
+    ],
     [other, { name: "Other" }],
   ]);
   const library = { identities: [{ pubkey: agent }, { pubkey: other }] };
@@ -57,6 +61,7 @@ function fixture() {
   ];
   const ensure = vi.fn();
   const session = {
+    viewer: "viewer",
     typing: { snapshot: () => typing, subscribe },
     agentActivity: { snapshot: () => activity, subscribe },
     profiles: { snapshot: () => profiles, subscribe, ensure },
@@ -105,7 +110,16 @@ it("shows an incoming typing preview without invented details, retaining navigat
   expect(trigger).not.toHaveTextContent("Working");
   await user.hover(trigger);
   let dialog = await screen.findByRole("dialog", { name: "Working now" });
-  expect(within(dialog).getByText("Step details unavailable")).toBeVisible();
+  expect(
+    within(dialog).getByText("This agent isn’t sharing step details."),
+  ).toBeVisible();
+  f.update([entry()], { status: "connecting" });
+  expect(within(dialog).getByText("Connecting to step details…")).toBeVisible();
+  f.update([entry()], { status: "interrupted" });
+  expect(
+    within(dialog).getByText("Step updates paused: connection lost."),
+  ).toBeVisible();
+  f.update([entry()], { status: "listening" });
   expect(within(dialog).getByText("Thread · First task")).toBeVisible();
   await user.click(
     within(dialog).getByRole("button", { name: "View Agent activity" }),
@@ -187,7 +201,9 @@ it.each([
     );
     const dialog = await screen.findByRole("dialog", { name: "Working now" });
     expect(within(dialog).getByText(label, { exact: true })).toBeVisible();
-    expect(within(dialog).queryByText("Step details unavailable")).toBeNull();
+    expect(
+      within(dialog).queryByText("This agent isn’t sharing step details."),
+    ).toBeNull();
     expect(dialog).not.toHaveTextContent("report.txt");
   },
 );
@@ -239,7 +255,9 @@ it("keeps a non-navigable status when the plugin is unavailable and does not clo
   });
   await user.click(trigger);
   let dialog = await screen.findByRole("dialog");
-  expect(within(dialog).getByText("Step details unavailable")).toBeVisible();
+  expect(
+    within(dialog).getByText("This app can’t show step details"),
+  ).toBeVisible();
   expect(within(dialog).queryByRole("button")).toBeNull();
   view.rerender(
     <TypingIndicator
@@ -643,68 +661,79 @@ it("Solo chat ArrowDown exposes retained thread navigation without opening Activ
   expect(trigger).toHaveFocus();
 });
 
-it("hands the live signal to visible activity and restores dots when it leaves", () => {
-  const f = fixture();
-  const row: ChannelMessage = {
-    id: "step",
-    channelId: "channel",
-    authorId: agent,
-    audience: "agents",
-    createdAt: 100,
-    content: "Checking the fix",
-    mentions: [],
-    attachments: [],
-    reactions: [],
-    participants: [],
-    replyCount: 0,
-  };
-  const group = activityPresentation(
-    [{ ...row, id: "first" }, row],
-    undefined,
-    new Set([agent]),
-  ).groups[0];
-  if (!group) throw new Error("Missing activity group");
-  const renderFlow = (show: boolean) => (
-    <ActivityIndicatorPresentation>
-      {show && (
-        <ActivityGroupPreview
-          session={f.session}
-          group={group}
-          profiles={new Map()}
-          media={() => undefined}
-          expanded={false}
-          onToggle={() => {}}
-        />
-      )}
-      <TypingIndicator session={f.session} channelId="channel" />
-    </ActivityIndicatorPresentation>
-  );
-  f.update([{ pubkey: agent, channelId: "channel" }]);
-  const view = render(renderFlow(false));
-  expect(
-    screen.getByRole("button", { name: "Activity: Agent working" }),
-  ).toBeVisible();
-  view.rerender(renderFlow(true));
-  expect(
-    screen.queryByRole("button", { name: "Activity: Agent working" }),
-  ).toBeNull();
-  expect(screen.getByText("Checking the fix")).toHaveAttribute(
-    "data-active",
-    "true",
-  );
-  f.update([{ pubkey: agent, channelId: "channel", threadRootId: secondRoot }]);
-  expect(
-    screen.getByRole("button", { name: "Activity: Agent working" }),
-  ).toBeVisible();
-  expect(screen.getByText("Checking the fix")).not.toHaveAttribute(
-    "data-active",
-  );
-  f.update([{ pubkey: agent, channelId: "channel" }]);
-  view.rerender(renderFlow(false));
-  expect(
-    screen.getByRole("button", { name: "Activity: Agent working" }),
-  ).toBeVisible();
-});
+it.each([false, true])(
+  "hands live signals to visible activity and restores dots when it leaves (team=%s)",
+  (team) => {
+    const f = fixture();
+    const row: ChannelMessage = {
+      id: "step",
+      channelId: "channel",
+      authorId: agent,
+      audience: "agents",
+      createdAt: 100,
+      content: "Checking the fix",
+      mentions: [],
+      attachments: [],
+      reactions: [],
+      participants: [],
+      replyCount: 0,
+    };
+    const group = activityPresentation(
+      [{ ...row, id: "first", authorId: team ? other : agent }, row],
+      undefined,
+      new Set([agent]),
+    ).groups[0];
+    if (!group) throw new Error("Missing activity group");
+    const renderFlow = (show: boolean) => (
+      <ActivityIndicatorPresentation>
+        {show && (
+          <ActivityGroupPreview
+            session={f.session}
+            group={group}
+            profiles={new Map()}
+            media={() => undefined}
+            expanded={false}
+            onToggle={() => {}}
+          />
+        )}
+        <TypingIndicator session={f.session} channelId="channel" />
+      </ActivityIndicatorPresentation>
+    );
+    const pulses = [
+      { pubkey: agent, channelId: "channel" },
+      ...(team ? [{ pubkey: other, channelId: "channel" }] : []),
+    ];
+    f.update(pulses);
+    const view = render(renderFlow(false));
+    expect(
+      screen.getByRole("button", {
+        name: team ? "Activity: 2 agents working" : "Activity: Agent working",
+      }),
+    ).toBeVisible();
+    view.rerender(renderFlow(true));
+    expect(
+      screen.queryByRole("button", { name: /Activity: .*working/ }),
+    ).toBeNull();
+    expect(screen.getByText("Checking the fix")).toHaveAttribute(
+      "data-active",
+      "true",
+    );
+    f.update([
+      { pubkey: agent, channelId: "channel", threadRootId: secondRoot },
+    ]);
+    expect(
+      screen.getByRole("button", { name: "Activity: Agent working" }),
+    ).toBeVisible();
+    expect(screen.getByText("Checking the fix")).not.toHaveAttribute(
+      "data-active",
+    );
+    f.update([{ pubkey: agent, channelId: "channel" }]);
+    view.rerender(renderFlow(false));
+    expect(
+      screen.getByRole("button", { name: "Activity: Agent working" }),
+    ).toBeVisible();
+  },
+);
 
 it("groups an in-flow typing preview without repeating the preceding agent's byline", () => {
   const f = fixture();
@@ -723,3 +752,30 @@ it("groups an in-flow typing preview without repeating the preceding agent's byl
     view.container.querySelector("[data-agent-response-preview]"),
   ).toHaveAttribute("data-stack-previous", "true");
 });
+
+it("uses the agent typing bubble for a public agent outside the viewer’s choices", async () => {
+  const f = fixture();
+  f.update([entry("public-agent")]);
+  render(
+    <TypingIndicator
+      session={f.session}
+      channelId="channel"
+      threadRootId={root}
+    />,
+  );
+  const trigger = screen.getByRole("button", {
+    name: "Activity: Sam’s assistant working",
+  });
+  expect(screen.getByRole("img", { name: "Sam’s assistant" })).toBeVisible();
+  expect(trigger.querySelector('[data-state="working"]')).not.toBeNull();
+  await userEvent.setup().click(trigger);
+  expect(
+    within(await screen.findByRole("dialog")).getByText(
+      "This agent’s work details are private.",
+    ),
+  ).toBeVisible();
+  f.update([]);
+  expect(
+    screen.queryByRole("button", { name: "Activity: Sam’s assistant working" }),
+  ).toBeNull();
+});
diff --git a/src/features/messages/TypingIndicator.tsx b/src/features/messages/TypingIndicator.tsx
index d9f1eef8e0..2fb028bf4c 100644
--- a/src/features/messages/TypingIndicator.tsx
+++ b/src/features/messages/TypingIndicator.tsx
@@ -12,7 +12,6 @@ import {
 } from "react";
 import { profileActivityViewTarget } from "../profiles/target";
 import { currentActivity } from "../agents/current-activity";
-import { AvatarStack } from "../../shared/design-system/ui/AvatarStack";
 import { AgentResponsePreview } from "./AgentResponsePreview";
 import { ActivityStepPreview } from "./ActivityStepPreview";
 import { AgentActivityRow } from "../agents/AgentActivityRow";
@@ -55,13 +54,38 @@ export function useConversationAgents(
     () => new Set(choices.identities.map(({ pubkey }) => pubkey)),
     [choices],
   );
-  const details = useMemo(
-    () =>
-      currentActivity(activity, entries, ownedAgents, channelId, threadRootId),
-    [activity, entries, ownedAgents, channelId, threadRootId],
+  const profiles = useSyncExternalStore(
+    session.profiles.subscribe,
+    session.profiles.snapshot,
   );
+  const details = useMemo(() => {
+    const current = new Map(
+      currentActivity(activity, entries, ownedAgents, channelId, threadRootId),
+    );
+    // Public agent identity changes presentation, never access to private activity.
+    for (const entry of entries) {
+      if (
+        entry.channelId !== channelId ||
+        entry.threadRootId !== threadRootId ||
+        !profiles.get(entry.pubkey)?.isAgent ||
+        current.has(entry.pubkey)
+      )
+        continue;
+      current.set(entry.pubkey, {
+        label: "Working",
+        roots: [entry.threadRootId ?? null],
+      });
+    }
+    return current;
+  }, [activity, entries, ownedAgents, channelId, threadRootId, profiles]);
   const agents = [...details.keys()].filter((key) => !replaced.has(key)).sort();
-  return { details, entries, replaced, agents };
+  return {
+    details,
+    entries,
+    replaced,
+    agents,
+    activityStatus: activity?.status,
+  };
 }
 
 /** Incoming conversation activity over existing stores; no reads or capture. */
@@ -86,11 +110,8 @@ export function TypingIndicator({
     | ((target: string, origin?: MessageLinkOrigin) => boolean)
     | undefined;
 }) {
-  const { details, entries, replaced, agents } = useConversationAgents(
-    session,
-    channelId,
-    threadRootId,
-  );
+  const { details, entries, replaced, agents, activityStatus } =
+    useConversationAgents(session, channelId, threadRootId);
   const resolveName = useChannelIdentityNames(session, channelId);
   const profiles = useSyncExternalStore(
     session.profiles.subscribe,
@@ -169,12 +190,24 @@ export function TypingIndicator({
       ? `buzz://message?${new URLSearchParams({ channel: channelId, id: conversationRoot, thread: conversationRoot })}`
       : `buzz://channel/${encodeURIComponent(channelId)}`;
     const picture = profiles.get(pubkey)?.picture;
+    const owner = profiles.get(pubkey)?.ownerPubkey;
+    const otherOwner = !!owner && !!session.viewer && owner !== session.viewer;
     return (
       <AgentActivityRow
         name={name(pubkey)}
         picture={avatarMedia(picture, session.media)}
         status={
-          detail.label === "Working" ? "Step details unavailable" : detail.label
+          detail.label !== "Working"
+            ? detail.label
+            : otherOwner
+              ? "This agent’s work details are private."
+              : activityStatus === "connecting"
+                ? "Connecting to step details…"
+                : activityStatus === "interrupted"
+                  ? "Step updates paused: connection lost."
+                  : activityStatus === "listening"
+                    ? "This agent isn’t sharing step details."
+                    : "This app can’t show step details"
         }
         scope={
           detail.roots.length === 1 && detail.roots[0] === null
@@ -217,12 +250,18 @@ export function TypingIndicator({
         <div
           className={styles.typing}
           data-in-flow={inFlow || undefined}
+          data-layout={threadRootId ? "thread" : "timeline"}
           data-conversation-activity=""
         >
           {firstAgent && (
             <AgentResponsePreview
               stackPrevious={previousAuthor === firstAgent}
               name={name(firstAgent)}
+              participants={agents.map((id) => ({
+                id,
+                name: name(id),
+                picture: avatarMedia(profiles.get(id)?.picture, session.media),
+              }))}
               picture={avatarMedia(
                 profiles.get(firstAgent)?.picture,
                 session.media,
@@ -238,18 +277,6 @@ export function TypingIndicator({
                 }
                 content={
                   <>
-                    <AvatarStack
-                      size="small"
-                      items={agents.slice(1).map((id) => ({
-                        id,
-                        name: name(id),
-                        src: avatarMedia(
-                          profiles.get(id)?.picture,
-                          session.media,
-                        ),
-                        shape: "squircle",
-                      }))}
-                    />
                     <ActivityStepPreview
                       state={
                         details.get(firstAgent)?.label ===
diff --git a/src/features/messages/activity-groups.test.ts b/src/features/messages/activity-groups.test.ts
index e5a82b24d4..248cad1a0f 100644
--- a/src/features/messages/activity-groups.test.ts
+++ b/src/features/messages/activity-groups.test.ts
@@ -100,3 +100,25 @@ it("places completed history after its agent reply while keeping unfinished work
     ),
   ).toEqual(pending);
 });
+
+it("hands unparented thread replies to the latest request without overriding explicit reply links", () => {
+  const { audience: _requestAudience, ...request } = activity("request", {
+    authorId: "human",
+    threadRootId: "root",
+  });
+  const { audience: _replyAudience, ...reply } = activity("reply", {
+    agentEnvelope: true,
+    threadRootId: "root",
+  });
+  const projected = (patch: Partial<ChannelMessage>) =>
+    activityPresentation(
+      [request, { ...reply, ...patch }],
+      undefined,
+      new Set(["agent"]),
+      "root",
+    ).representedAgents;
+  expect(projected({}).get("request")).toEqual(["agent"]);
+  expect(projected({}).get("root")).toBeUndefined();
+  expect(projected({ replyParentId: "root" }).get("root")).toEqual(["agent"]);
+  expect(projected({ replyParentId: "root" }).get("request")).toBeUndefined();
+});
diff --git a/src/features/messages/activity-presentation.ts b/src/features/messages/activity-presentation.ts
index 374ba03213..12636e77c7 100644
--- a/src/features/messages/activity-presentation.ts
+++ b/src/features/messages/activity-presentation.ts
@@ -86,9 +86,11 @@ export function activityPresentation(
       !agents.has(row.authorId)
     )
       request = row.id;
-    const parentRequest = requests.get(
-      row.replyParentId ?? row.threadRootId ?? "",
-    );
+    // A thread root is a scope, not necessarily the latest triggering request.
+    // Preserve explicit reply links; otherwise follow the preceding request.
+    const parentRequest = row.replyParentId
+      ? requests.get(row.replyParentId)
+      : undefined;
     const rowRequest =
       row.agentEnvelope || agents?.has(row.authorId)
         ? (parentRequest ?? request)
diff --git a/src/features/messages/use-activity-indicator.ts b/src/features/messages/use-activity-indicator.ts
index 0dd9d3381d..ce85e61701 100644
--- a/src/features/messages/use-activity-indicator.ts
+++ b/src/features/messages/use-activity-indicator.ts
@@ -13,6 +13,7 @@ export function useActivityIndicator(
   session: RelaySession | undefined,
   row: ChannelMessage,
   eligible: boolean,
+  participants?: readonly string[],
 ) {
   const typing = useSyncExternalStore(
     session?.typing?.subscribe ?? noSubscribe,
@@ -22,16 +23,24 @@ export function useActivityIndicator(
     session?.agentActivity?.subscribe ?? noSubscribe,
     session?.agentActivity?.snapshot ?? noActivity,
   );
+  const represented = new Set(participants ?? [row.authorId]);
   const detail = eligible
     ? currentActivity(
         activity,
         typing,
-        new Set([row.authorId]),
+        represented,
         row.channelId,
         row.threadRootId,
-      ).get(row.authorId)
+      )
     : undefined;
-  const live = !!detail?.roots.includes(row.threadRootId ?? null);
+  const liveAgents = [...(detail ?? [])]
+    .filter(
+      ([agent, value]) =>
+        represented.has(agent) &&
+        value.roots.includes(row.threadRootId ?? null),
+    )
+    .map(([agent]) => agent);
+  const live = liveAgents.length > 0;
   useActivityTypingReplacement(
     session
       ? {
@@ -42,6 +51,7 @@ export function useActivityIndicator(
         }
       : undefined,
     live,
+    liveAgents,
   );
   return live;
 }

From cb0b744e684d55b1979fca78db0677ebe16c3e17 Mon Sep 17 00:00:00 2001
From: Arjun Mahanti <arjun@squareup.com>
Date: Wed, 28 Oct 2026 11:19:09 -0400
Subject: [PATCH 10/19] Preserve team avatar labels and update interaction
 checks

Co-authored-by: OpenAI Codex <noreply@openai.com>
Signed-off-by: Arjun Mahanti <arjun@squareup.com>
---
 .../agent-activity/ActivityAccessory.test.tsx       |  6 +++---
 src/bundled/channels/ChannelMembersDialog.test.tsx  |  2 +-
 src/features/messages/ActivityGroupPreview.test.tsx |  4 +++-
 src/features/messages/AgentResponsePreview.tsx      | 13 ++++++++++---
 4 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/bundled/agent-activity/ActivityAccessory.test.tsx b/src/bundled/agent-activity/ActivityAccessory.test.tsx
index aa5597db5d..95dc9c734d 100644
--- a/src/bundled/agent-activity/ActivityAccessory.test.tsx
+++ b/src/bundled/agent-activity/ActivityAccessory.test.tsx
@@ -468,9 +468,9 @@ it("dismisses only that agent's error on this message, without changing other wo
     expect(mixed).toHaveTextContent("1 failed");
     const failedBadge = mixed.querySelector("[data-activity-failure]");
     const workingBadge = mixed.querySelector("[data-thread-working]");
-    expect(screen.getByRole("img", { name: "Blossom" })).toBeInTheDocument();
-    expect(workingBadge?.querySelector('[title="Bubbles"]')).not.toBeNull();
-    expect(workingBadge?.querySelector('[title="Blossom"]')).toBeNull();
+    expect(
+      screen.getByRole("img", { name: "Blossom, Bubbles" }),
+    ).toBeInTheDocument();
     expect(failedBadge?.parentElement).toBe(workingBadge?.parentElement);
     expect(workingBadge).toHaveTextContent("Reading notes.txt");
     fireEvent.click(
diff --git a/src/bundled/channels/ChannelMembersDialog.test.tsx b/src/bundled/channels/ChannelMembersDialog.test.tsx
index 12e62cc372..0e1a3870fc 100644
--- a/src/bundled/channels/ChannelMembersDialog.test.tsx
+++ b/src/bundled/channels/ChannelMembersDialog.test.tsx
@@ -355,7 +355,7 @@ it("DMs are view-only and never search outside their members", async () => {
 });
 it("Escape closes the dialog and restores focus to its header button", async () => {
   const t = await setup();
-  expect(screen.getByRole("searchbox")).toHaveFocus();
+  await vi.waitFor(() => expect(screen.getByRole("searchbox")).toHaveFocus());
   await t.user.keyboard("{Escape}");
   await vi.waitFor(() =>
     expect(screen.queryByRole("dialog")).not.toBeInTheDocument(),
diff --git a/src/features/messages/ActivityGroupPreview.test.tsx b/src/features/messages/ActivityGroupPreview.test.tsx
index 982fa135b3..070fe903fc 100644
--- a/src/features/messages/ActivityGroupPreview.test.tsx
+++ b/src/features/messages/ActivityGroupPreview.test.tsx
@@ -174,7 +174,9 @@ it("keeps the primary avatar on the activity bubble without repeating an anchore
       { ...step, authorId: "helper" },
     ]),
   );
-  expect(screen.getByRole("img", { name: "Studio assistant" })).toBeVisible();
+  expect(
+    screen.getByRole("img", { name: "Studio assistant, helper" }),
+  ).toBeVisible();
   view.rerender(
     renderGroup([
       { ...reply, id: "reply" },
diff --git a/src/features/messages/AgentResponsePreview.tsx b/src/features/messages/AgentResponsePreview.tsx
index bb4ebe566b..8d870d5507 100644
--- a/src/features/messages/AgentResponsePreview.tsx
+++ b/src/features/messages/AgentResponsePreview.tsx
@@ -33,7 +33,7 @@ export function AgentResponsePreview({
       <span className={styles.messageGutter} />
       <div className={styles.messageBody}>
         <div className={styles.messageContent}>
-          <div className={styles.messageAvatar} title={name}>
+          <div className={styles.messageAvatar}>
             <span
               className={styles.agentAvatarGroup}
               data-count={Math.max(1, Math.min(participants.length, 3))}
@@ -44,7 +44,10 @@ export function AgentResponsePreview({
                   : name
               }
             >
-              <span className={styles.agentAvatarGroupItem}>
+              <span
+                className={styles.agentAvatarGroupItem}
+                title={participants[0]?.name ?? name}
+              >
                 <Avatar
                   src={participants[0]?.picture ?? picture}
                   alt=""
@@ -54,7 +57,11 @@ export function AgentResponsePreview({
                 />
               </span>
               {participants.slice(1, 3).map((agent) => (
-                <span key={agent.id} className={styles.agentAvatarGroupItem}>
+                <span
+                  key={agent.id}
+                  className={styles.agentAvatarGroupItem}
+                  title={agent.name}
+                >
                   <Avatar
                     src={agent.picture}
                     alt=""

From 205c3be693006ea564cf8c8fa110a84b0a5f4806 Mon Sep 17 00:00:00 2001
From: Arjun Mahanti <arjun@squareup.com>
Date: Wed, 28 Oct 2026 11:28:16 -0400
Subject: [PATCH 11/19] Scope activity history avatar assertions to their
 control

Co-authored-by: OpenAI Codex <noreply@openai.com>
Signed-off-by: Arjun Mahanti <arjun@squareup.com>
---
 .../ChannelTimeline.viewport.test.tsx         | 31 ++++++++++++-------
 1 file changed, 20 insertions(+), 11 deletions(-)

diff --git a/src/features/messages/ChannelTimeline.viewport.test.tsx b/src/features/messages/ChannelTimeline.viewport.test.tsx
index 89014258d4..ed879287e8 100644
--- a/src/features/messages/ChannelTimeline.viewport.test.tsx
+++ b/src/features/messages/ChannelTimeline.viewport.test.tsx
@@ -1,6 +1,12 @@
 // @vitest-environment jsdom
 import "@testing-library/jest-dom/vitest";
-import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  within,
+} from "@testing-library/react";
 import { afterEach, expect, it, vi } from "vitest";
 import { stubAvatarBrowserApis } from "../agents/avatar-testing";
 stubAvatarBrowserApis();
@@ -181,7 +187,7 @@ it("shows one latest-agent preview, retains expanded history through appends, an
     toggle = screen.getByRole("button", { name: /Show activity history/ });
     expect(toggle).toHaveFocus();
     expect(toggle).toHaveTextContent("Update 11");
-    expect(screen.getByTitle("reviewer")).toBeVisible();
+    expect(within(toggle).getByTitle("reviewer")).toBeVisible();
     expect(screen.queryByText("Update 10")).toBeNull();
   } finally {
     owner.dispose();
@@ -200,21 +206,24 @@ it("stacks distinct agents with overflow and removes the stack when history open
         })),
       ),
     );
-    expect(screen.getByText("+1")).toBeVisible();
-    expect(screen.getAllByTitle("one")).toHaveLength(2);
-    expect(screen.getByTitle("two")).toBeVisible();
-    expect(screen.getByTitle("three")).toBeVisible();
-    expect(screen.queryByTitle("four")).toBeNull();
-    const compactAvatar = screen.getAllByTitle("one")[1];
+    const compact = within(
+      screen.getByRole("button", { name: /Show activity history/ }),
+    );
+    expect(compact.getByText("+1")).toBeVisible();
+    expect(compact.getAllByTitle("one")).toHaveLength(1);
+    expect(compact.getByTitle("two")).toBeVisible();
+    expect(compact.getByTitle("three")).toBeVisible();
+    expect(compact.queryByTitle("four")).toBeNull();
+    const compactAvatar = compact.getAllByTitle("one")[0];
     if (!compactAvatar) throw new Error("Missing compact agent avatar");
     expect(
-      compactAvatar.compareDocumentPosition(screen.getByTitle("two")) &
+      compactAvatar.compareDocumentPosition(compact.getByTitle("two")) &
         Node.DOCUMENT_POSITION_FOLLOWING,
     ).toBeTruthy();
     expect(
-      screen
+      compact
         .getByTitle("two")
-        .compareDocumentPosition(screen.getByTitle("three")) &
+        .compareDocumentPosition(compact.getByTitle("three")) &
         Node.DOCUMENT_POSITION_FOLLOWING,
     ).toBeTruthy();
     fireEvent.click(

From e4aa2243b7256934aa136a4369dc0e604f628c67 Mon Sep 17 00:00:00 2001
From: Arjun Mahanti <arjun@squareup.com>
Date: Wed, 28 Oct 2026 12:05:05 -0400
Subject: [PATCH 12/19] Fix agent activity lifecycle and simplify shared
 presentation

Co-authored-by: OpenAI Codex <noreply@openai.com>
Signed-off-by: Arjun Mahanti <arjun@squareup.com>
---
 src/features/agents/current-activity.test.ts  |  27 ++-
 src/features/agents/current-activity.ts       |  19 +-
 .../messages/ActivityGroupPreview.test.tsx    | 164 ++++++++++++++++--
 .../messages/ActivityGroupPreview.tsx         |  45 +----
 .../messages/AgentResponsePreview.tsx         |  19 +-
 src/features/messages/ChannelTimeline.tsx     |  19 +-
 .../ChannelTimeline.viewport.test.tsx         |  89 ++++++----
 src/features/messages/MediaReviewViewer.tsx   |  77 ++++----
 src/features/messages/MessageRow.tsx          |  56 +++---
 src/features/messages/Messages.module.css     |  15 --
 .../messages/ThreadPanel.identity.test.tsx    |  67 +++++++
 src/features/messages/ThreadPanel.tsx         |  47 +++--
 .../messages/TypingIndicator.test.tsx         |  66 ++++++-
 src/features/messages/TypingIndicator.tsx     |  57 ++----
 .../messages/activity-avatar-motion.ts        |   7 +-
 src/features/messages/activity-groups.test.ts |  78 +++++----
 src/features/messages/activity-groups.ts      |  12 --
 .../messages/activity-presentation.ts         |  80 ++++-----
 src/shared/design-system/ui/AvatarStack.tsx   |   3 -
 19 files changed, 573 insertions(+), 374 deletions(-)

diff --git a/src/features/agents/current-activity.test.ts b/src/features/agents/current-activity.test.ts
index 485eb67fc4..1fce36f812 100644
--- a/src/features/agents/current-activity.test.ts
+++ b/src/features/agents/current-activity.test.ts
@@ -78,6 +78,7 @@ it("projects safe brief tool status from exact current owner-visible work only",
   const live = snapshot();
   expect(project(live).get(agent)).toEqual({
     label: "Editing index.html",
+    detailAvailability: "available",
     roots: [root],
   });
   expect(project(live, root).get(agent)?.label).toBe("Editing index.html");
@@ -95,7 +96,11 @@ it("drops owner-only work when not listening without hiding valid public typing"
     currentActivity(live, entries, new Set([agent]), "channel", root).get(
       agent,
     ),
-  ).toEqual({ label: "Working", roots: [root] });
+  ).toEqual({
+    label: "Working",
+    detailAvailability: "typing-only",
+    roots: [root],
+  });
   expect(currentActivity(live, entries, new Set(), "channel").size).toBe(0);
 });
 
@@ -106,7 +111,7 @@ it.each([
   ],
   [{ title: "unknown", kind: "other" }, "Running a tool"],
   [{ status: "pending" }, "Preparing a tool"],
-  [{ status: "completed" }, "Working"],
+  [{ status: "completed" }, "Working", "no-current-step"],
   [
     { rawInput: { path: "C:\\private\\report\u202e.txt" } },
     "Editing report.txt",
@@ -119,9 +124,15 @@ it.each([
     },
     "Reading report.txt",
   ],
-])("keeps compact labels safe: %j", (tool, expected) => {
-  expect(project(snapshot(tool)).get(agent)?.label).toBe(expected);
-});
+])(
+  "keeps compact labels safe: %j",
+  (tool, expected, unavailable = "available") => {
+    expect(project(snapshot(tool)).get(agent)).toMatchObject({
+      label: expected,
+      detailAvailability: unavailable,
+    });
+  },
+);
 
 it.each(["__proto__", "constructor", "toString", "hasOwnProperty"])(
   "treats inherited dictionary key %s as telemetry, not a label mapping",
@@ -151,7 +162,11 @@ it("does not merge labels or ownership across roots or expired turns", () => {
     currentActivity(live, entries, new Set([agent]), "channel", otherRoot).get(
       agent,
     ),
-  ).toEqual({ label: "Working", roots: [otherRoot] });
+  ).toEqual({
+    label: "Working",
+    detailAvailability: "typing-only",
+    roots: [otherRoot],
+  });
   expect(
     project({
       ...live,
diff --git a/src/features/agents/current-activity.ts b/src/features/agents/current-activity.ts
index 453d5f17e6..2e1f3dd1ba 100644
--- a/src/features/agents/current-activity.ts
+++ b/src/features/agents/current-activity.ts
@@ -61,6 +61,7 @@ function toolLabel(tool: ToolItem): string {
 
 export type CurrentActivity = {
   label: string;
+  detailAvailability: "available" | "no-current-step" | "typing-only";
   /** Null is the channel conversation; undefined is genuinely unknown. */
   roots: (string | null | undefined)[];
 };
@@ -69,7 +70,7 @@ export type CurrentActivity = {
 export function currentActivity(
   snapshot: Snapshot | undefined,
   entries: readonly TypingEntry[],
-  ownedAgents: ReadonlySet<string>,
+  knownAgents: ReadonlySet<string>,
   channelId: string,
   threadRootId?: string,
 ): ReadonlyMap<string, CurrentActivity> {
@@ -77,6 +78,7 @@ export function currentActivity(
   const add = (agent: string, root: string | null | undefined) => {
     const activity: CurrentActivity = agents.get(agent) ?? {
       label: "Working",
+      detailAvailability: "typing-only",
       roots: [],
     };
     if (!activity.roots.includes(root)) activity.roots.push(root);
@@ -101,7 +103,7 @@ export function currentActivity(
   for (const entry of entries) {
     if (
       matches(entry.channelId, entry.threadRootId) &&
-      (ownedAgents.has(entry.pubkey) ||
+      (knownAgents.has(entry.pubkey) ||
         ownerTyping.some((owner) => owner.agent === entry.pubkey) ||
         working.some((turn) => turn.agent === entry.pubkey))
     )
@@ -118,7 +120,8 @@ export function currentActivity(
         (threadRootId && turn?.threadRootId !== threadRootId)
       )
         continue;
-      add(agent, turn?.threadRootId);
+      const detail = add(agent, turn?.threadRootId);
+      detail.detailAvailability = "no-current-step";
       tools.push(
         ...(turn?.items.filter(
           (item): item is ToolItem =>
@@ -130,11 +133,13 @@ export function currentActivity(
     }
     const activity = agents.get(agent);
     const firstTool = tools[0];
-    if (activity && firstTool)
+    if (activity && firstTool) {
+      activity.detailAvailability = "available";
       activity.label =
         tools.length > 1
           ? `Running ${tools.length} tools`
           : toolLabel(firstTool);
+    }
   }
   const local = localActivity(snapshot, channelId, threadRootId);
   for (const [agent, work] of local) {
@@ -153,7 +158,11 @@ export function currentActivity(
           .map((row) => row.threadRootId),
       ),
     ];
-    agents.set(agent, { label: localWorkLabel(work), roots });
+    agents.set(agent, {
+      label: localWorkLabel(work),
+      detailAvailability: "available",
+      roots,
+    });
   }
   return agents;
 }
diff --git a/src/features/messages/ActivityGroupPreview.test.tsx b/src/features/messages/ActivityGroupPreview.test.tsx
index 070fe903fc..dce3f20ecf 100644
--- a/src/features/messages/ActivityGroupPreview.test.tsx
+++ b/src/features/messages/ActivityGroupPreview.test.tsx
@@ -1,7 +1,14 @@
 // @vitest-environment jsdom
 import "@testing-library/jest-dom/vitest";
-import { act, cleanup, render, screen } from "@testing-library/react";
-import { afterEach, expect, it } from "vitest";
+import {
+  act,
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+} from "@testing-library/react";
+import { useState } from "react";
+import { afterEach, expect, it, vi } from "vitest";
 import { stubAvatarBrowserApis } from "../agents/avatar-testing";
 import { createAgentActivity } from "../agents/activity";
 import { createLocalAgentActivity } from "../agents/local-activity";
@@ -16,7 +23,11 @@ import {
 import { MessageRow } from "./MessageRow";
 
 stubAvatarBrowserApis();
-afterEach(cleanup);
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+  Reflect.deleteProperty(HTMLElement.prototype, "animate");
+});
 const step: ChannelMessage = {
   id: "step",
   channelId: "channel",
@@ -121,17 +132,27 @@ it("shimmers a standalone working step and stops when that request finishes", ()
       threadRootId: "request",
     });
     work.started();
-    render(
-      <MessageRow
-        row={step}
-        session={{ ...owner.session, agentActivity: f.activity }}
-        profile={undefined}
-        media={() => undefined}
-        onOpenLink={() => false}
-        day={false}
-        retry={undefined}
-      />,
-    );
+    function Preview() {
+      const presentation = useActivityPresentation(
+        [step],
+        f.activity,
+        new Set(["agent"]),
+        step.threadRootId,
+      );
+      return (
+        <MessageRow
+          row={step}
+          recordedActivity={presentation.byRow.get(step.id)}
+          session={{ ...owner.session, agentActivity: f.activity }}
+          profile={undefined}
+          media={() => undefined}
+          onOpenLink={() => false}
+          day={false}
+          retry={undefined}
+        />
+      );
+    }
+    render(<Preview />);
     expect(screen.getByText(step.content)).toHaveAttribute(
       "data-active",
       "true",
@@ -144,6 +165,121 @@ it("shimmers a standalone working step and stops when that request finishes", ()
   }
 });
 
+it("moves the visible team avatars into history and returns them to their clustered positions", async () => {
+  const history = [step, { ...step, id: "helper-step", authorId: "helper" }];
+  const presentation = activityPresentation(
+    history,
+    undefined,
+    new Set(["agent", "helper"]),
+  );
+  const group = presentation.groups[0];
+  let finish = () => {};
+  const finished = new Promise<void>((resolve) => {
+    finish = resolve;
+  });
+  const animations: { node: HTMLElement; frames: Keyframe[] }[] = [];
+  Object.defineProperty(HTMLElement.prototype, "animate", {
+    configurable: true,
+    value(this: HTMLElement, frames: Keyframe[]) {
+      animations.push({ node: this, frames });
+      return { finished, cancel: () => {} };
+    },
+  });
+  // jsdom has no layout. Supply boxes only for the visible cluster and the
+  // actual history rows, excluding hidden duplicate artwork.
+  vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockImplementation(
+    function (this: HTMLElement) {
+      const identity = this.closest('[role="img"]');
+      if (!this.dataset.avatarMotionKey || this.closest("[inert]"))
+        return new DOMRect();
+      if (identity) return new DOMRect(10, 20, 25, 25);
+      return this.closest('[data-audience="agents"]')
+        ? new DOMRect(50, this.title === "helper" ? 120 : 70, 40, 40)
+        : new DOMRect();
+    },
+  );
+  function Preview() {
+    const [expanded, setExpanded] = useState(false);
+    if (!group) throw new Error("Missing activity group");
+    return (
+      <div data-activity-history-scope="">
+        <ActivityGroupPreview
+          group={group}
+          profiles={new Map()}
+          media={() => undefined}
+          expanded={expanded}
+          onToggle={() => setExpanded((value) => !value)}
+        />
+        {expanded &&
+          history.map((row) => {
+            const activity = presentation.byRow.get(row.id);
+            if (!activity) throw new Error("Missing history presentation");
+            return (
+              <MessageRow
+                key={row.id}
+                row={row}
+                recordedActivity={{ ...activity, container: "history" }}
+                profile={undefined}
+                media={() => undefined}
+                onOpenLink={() => false}
+                day={false}
+                retry={undefined}
+              />
+            );
+          })}
+      </div>
+    );
+  }
+  try {
+    render(<Preview />);
+    const team = screen.getByRole("img", { name: "agent, helper" });
+    const restingTransform = "matrix(0.6, 0, 0, 0.6, 12, 12)";
+    for (const avatar of team.querySelectorAll<HTMLElement>("[title]")) {
+      avatar.style.transform = restingTransform;
+    }
+    fireEvent.click(
+      screen.getByRole("button", { name: /Show activity history/ }),
+      {
+        detail: 1,
+      },
+    );
+    const expanded = animations.filter(
+      ({ node }) => node.dataset.avatarMotionKey,
+    );
+    expect(expanded).toHaveLength(2);
+    expect(
+      expanded.every(
+        ({ node }) =>
+          node.closest('[data-audience="agents"]') &&
+          !node.closest("[data-agent-response-preview]"),
+      ),
+    ).toBe(true);
+    expect(
+      expanded.every(({ frames }) =>
+        frames[0]?.transform?.toString().includes("translate("),
+      ),
+    ).toBe(true);
+    animations.length = 0;
+    fireEvent.click(
+      screen.getByRole("button", { name: /Collapse activity history/ }),
+      {
+        detail: 1,
+      },
+    );
+    const collapsed = animations.filter(
+      ({ node }) => node.dataset.avatarMotionKey,
+    );
+    expect(collapsed).toHaveLength(2);
+    expect(collapsed.every(({ node }) => team.contains(node))).toBe(true);
+    expect(collapsed.map(({ frames }) => frames.at(-1)?.transform)).toEqual([
+      restingTransform,
+      restingTransform,
+    ]);
+  } finally {
+    await act(async () => finish());
+  }
+});
+
 it("keeps the primary avatar on the activity bubble without repeating an anchored byline", () => {
   const history = [{ ...step, id: "one" }, step];
   const renderGroup = (rows: ChannelMessage[]) => {
diff --git a/src/features/messages/ActivityGroupPreview.tsx b/src/features/messages/ActivityGroupPreview.tsx
index 77f31e67b8..37b66e86f1 100644
--- a/src/features/messages/ActivityGroupPreview.tsx
+++ b/src/features/messages/ActivityGroupPreview.tsx
@@ -3,12 +3,8 @@ import { useActivityIndicator } from "./use-activity-indicator";
 import type { RelaySession } from "../relay/session";
 import { ShimmerText } from "../../shared/design-system/ui/ShimmerText";
 import type { ActivityPresentation } from "./activity-presentation";
-import { Avatar } from "../../shared/design-system/ui/Avatar";
-import { CaretUpIcon } from "../../shared/design-system/icons";
-import { AvatarStack } from "../../shared/design-system/ui/AvatarStack";
 import { toggleActivityHistory } from "./activity-avatar-motion";
 import type { Profile } from "../relay/contracts";
-import { AgentAvatar } from "../agents/AgentAvatar";
 import { avatarMedia } from "../../shared/avatar-source";
 import { messagePreviewText } from "../conversation/message-preview-text";
 import styles from "./Messages.module.css";
@@ -73,46 +69,6 @@ export function ActivityGroupPreview({
             );
           }}
         >
-          {done ? null : expanded ? (
-            <Avatar
-              size="small"
-              shape="squircle"
-              alt=""
-              fallback=""
-              fallbackContent={
-                <CaretUpIcon
-                  className={styles.activityCollapseIcon}
-                  aria-hidden="true"
-                />
-              }
-            />
-          ) : participants.length > 1 ? (
-            <AvatarStack
-              size="small"
-              max={3}
-              items={participants.map((id) => ({
-                id,
-                name: profiles.get(id)?.name ?? id.slice(0, 10),
-                src: avatarMedia(profiles.get(id)?.picture, media),
-                shape: "squircle",
-                motionKey: motionKey(id),
-              }))}
-            />
-          ) : (
-            <span
-              className={styles.audienceAvatar}
-              title={name}
-              data-avatar-motion-key={motionKey(row.authorId)}
-            >
-              <AgentAvatar
-                src={avatarMedia(profile?.picture, media)}
-                alt=""
-                fallback={name}
-                size="fill"
-                shape="squircle"
-              />
-            </span>
-          )}
           <span className={styles.audiencePreviewText}>
             {expanded && !done ? (
               "Collapse"
@@ -134,6 +90,7 @@ export function ActivityGroupPreview({
               id,
               name: profiles.get(id)?.name ?? id.slice(0, 10),
               picture: avatarMedia(profiles.get(id)?.picture, media),
+              motionKey: expanded ? undefined : motionKey(id),
             }))
       }
       stackPrevious={!group.standalone}
diff --git a/src/features/messages/AgentResponsePreview.tsx b/src/features/messages/AgentResponsePreview.tsx
index 8d870d5507..91adc429c6 100644
--- a/src/features/messages/AgentResponsePreview.tsx
+++ b/src/features/messages/AgentResponsePreview.tsx
@@ -19,10 +19,14 @@ export function AgentResponsePreview({
     id: string;
     name: string;
     picture?: string | undefined;
+    motionKey?: string | undefined;
   }[];
   layout?: "timeline" | "thread" | "continuation" | undefined;
   children: ReactNode;
 }) {
+  const avatars: typeof participants = participants.length
+    ? participants.slice(0, 3)
+    : [{ id: "primary", name, picture }];
   return (
     <div
       className={styles.message}
@@ -44,23 +48,12 @@ export function AgentResponsePreview({
                   : name
               }
             >
-              <span
-                className={styles.agentAvatarGroupItem}
-                title={participants[0]?.name ?? name}
-              >
-                <Avatar
-                  src={participants[0]?.picture ?? picture}
-                  alt=""
-                  fallback={participants[0]?.name ?? name}
-                  shape="squircle"
-                  size="fill"
-                />
-              </span>
-              {participants.slice(1, 3).map((agent) => (
+              {avatars.map((agent) => (
                 <span
                   key={agent.id}
                   className={styles.agentAvatarGroupItem}
                   title={agent.name}
+                  data-avatar-motion-key={agent.motionKey}
                 >
                   <Avatar
                     src={agent.picture}
diff --git a/src/features/messages/ChannelTimeline.tsx b/src/features/messages/ChannelTimeline.tsx
index 4306335d8c..cde36a5ade 100644
--- a/src/features/messages/ChannelTimeline.tsx
+++ b/src/features/messages/ChannelTimeline.tsx
@@ -1168,6 +1168,7 @@ function Timeline({
         >
           {rows.map((row, index) => {
             const disclosure = disclosures.get(row.id);
+            const recordedActivity = presentation.byRow.get(row.id);
             const hidden = foldedActivity.has(row.id);
             const previousRow =
               row.audience === "agents"
@@ -1253,19 +1254,11 @@ function Timeline({
                       representedAgents={presentation.representedAgents.get(
                         row.id,
                       )}
-                      activityMotionKey={
-                        presentation.byRow.get(row.id)?.motionKey
-                      }
-                      activityActive={presentation.byRow.get(row.id)?.active}
-                      activityBubble={
-                        !disclosure && presentation.byRow.get(row.id)?.bubble
-                      }
-                      activityStandalone={
-                        !disclosure &&
-                        presentation.byRow.get(row.id)?.standalone
-                      }
-                      activityOwnsLive={
-                        presentation.byRow.get(row.id)?.ownsLive
+                      recordedActivity={
+                        recordedActivity && {
+                          ...recordedActivity,
+                          container: "history",
+                        }
                       }
                       stackPrevious={
                         !!previousRow &&
diff --git a/src/features/messages/ChannelTimeline.viewport.test.tsx b/src/features/messages/ChannelTimeline.viewport.test.tsx
index ed879287e8..9b061896aa 100644
--- a/src/features/messages/ChannelTimeline.viewport.test.tsx
+++ b/src/features/messages/ChannelTimeline.viewport.test.tsx
@@ -187,14 +187,18 @@ it("shows one latest-agent preview, retains expanded history through appends, an
     toggle = screen.getByRole("button", { name: /Show activity history/ });
     expect(toggle).toHaveFocus();
     expect(toggle).toHaveTextContent("Update 11");
-    expect(within(toggle).getByTitle("reviewer")).toBeVisible();
+    expect(
+      within(screen.getByRole("img", { name: "agent, reviewer" })).getByTitle(
+        "reviewer",
+      ),
+    ).toBeVisible();
     expect(screen.queryByText("Update 10")).toBeNull();
   } finally {
     owner.dispose();
   }
 });
 
-it("stacks distinct agents with overflow and removes the stack when history opens", () => {
+it("shows the first three distinct agents in the visible identity cluster while retaining its full label", () => {
   const { owner, updates, content } = activityFixture();
   try {
     const authors = ["one", "two", "three", "four"];
@@ -207,9 +211,9 @@ it("stacks distinct agents with overflow and removes the stack when history open
       ),
     );
     const compact = within(
-      screen.getByRole("button", { name: /Show activity history/ }),
+      screen.getByRole("img", { name: "one, two, three, four" }),
     );
-    expect(compact.getByText("+1")).toBeVisible();
+    expect(compact.queryByText("+1")).toBeNull();
     expect(compact.getAllByTitle("one")).toHaveLength(1);
     expect(compact.getByTitle("two")).toBeVisible();
     expect(compact.getByTitle("three")).toBeVisible();
@@ -267,38 +271,51 @@ it("reveals an older folded message for an exact visit, then permits folding it
   }
 });
 
-it("uses one preview in channels and separates runs at public replies", () => {
-  const { owner, updates, content } = activityFixture();
-  try {
-    const rows = updates(9);
-    const view = render(content(rows, undefined, false));
-    expect(screen.queryByText("Update 0")).toBeNull();
-    expect(screen.getByText("Update 8")).toBeVisible();
-    const middle = rows[4];
-    if (!middle) throw new Error("Missing fixture reply");
-    const { audience: _audience, ...publicReply } = middle;
-    view.rerender(
-      content([
-        ...rows.slice(0, 4),
-        { ...publicReply, content: "Main reply" },
-        ...rows.slice(5),
-      ]),
-    );
-    expect(screen.queryByText("Update 0")).toBeNull();
-    expect(screen.getByText("4 completed steps")).toBeVisible();
-    const completed = screen.getByRole("button", {
-      name: /Show activity history.*4 completed steps/,
-    });
-    expect(completed.querySelector("[data-avatar-motion-key]")).toBeNull();
-    expect(screen.getByText("Main reply")).toBeVisible();
-    expect(screen.getByText("Update 8")).toBeVisible();
-    expect(
-      screen.getAllByRole("button", { name: /Show activity history/ }),
-    ).toHaveLength(2);
-  } finally {
-    owner.dispose();
-  }
-});
+it.each([1, 4])(
+  "keeps a %i-step completed disclosure below its public reply in channels",
+  (count) => {
+    const { owner, updates, content } = activityFixture();
+    try {
+      const rows = updates(count * 2 + 1);
+      const view = render(content(rows, undefined, false));
+      expect(screen.queryByText("Update 0")).toBeNull();
+      expect(screen.getByText(`Update ${count * 2}`)).toBeVisible();
+      const middle = rows[count];
+      if (!middle) throw new Error("Missing fixture reply");
+      const { audience: _audience, ...publicReply } = middle;
+      view.rerender(
+        content([
+          ...rows.slice(0, count),
+          { ...publicReply, content: "Main reply" },
+          ...rows.slice(count + 1),
+        ]),
+      );
+      expect(screen.queryByText("Update 0")).toBeNull();
+      const label = `${count} completed ${count === 1 ? "step" : "steps"}`;
+      expect(screen.getByText(label)).toBeVisible();
+      const completed = screen.getByRole("button", {
+        name: new RegExp(`Show activity history.*${label}`),
+      });
+      expect(completed.querySelector("[data-avatar-motion-key]")).toBeNull();
+      const reply = screen.getByText("Main reply");
+      expect(reply).toBeVisible();
+      expect(
+        reply.compareDocumentPosition(completed) &
+          Node.DOCUMENT_POSITION_FOLLOWING,
+      ).toBeTruthy();
+      fireEvent.click(completed);
+      expect(screen.getByText("Update 0")).toBeVisible();
+      expect(completed).toHaveAttribute("aria-expanded", "true");
+      fireEvent.click(completed);
+      expect(screen.getByText(`Update ${count * 2}`)).toBeVisible();
+      expect(
+        screen.getAllByRole("button", { name: /Show activity history/ }),
+      ).toHaveLength(2);
+    } finally {
+      owner.dispose();
+    }
+  },
+);
 
 it.each([
   { anchor: "activity-8", expanded: true },
diff --git a/src/features/messages/MediaReviewViewer.tsx b/src/features/messages/MediaReviewViewer.tsx
index 1b56255b72..76416625f2 100644
--- a/src/features/messages/MediaReviewViewer.tsx
+++ b/src/features/messages/MediaReviewViewer.tsx
@@ -37,6 +37,7 @@ import { useKnownAgentPubkeys } from "../agents/use-known";
 import { MessageComposer } from "./MessageComposer";
 import { ImageReviewStage } from "./ImageReviewStage";
 import { MessageRow } from "./MessageRow";
+import { useActivityPresentation } from "./activity-presentation";
 import { parseMediaTimeReply } from "./media-timecode";
 import { VideoReviewReactions } from "./VideoReviewReactions";
 import styles from "./Messages.module.css";
@@ -598,6 +599,11 @@ function ReviewComments({
 }) {
   const profiles = useRowProfiles(session.profiles, replies);
   const agentPubkeys = useKnownAgentPubkeys(session, profiles);
+  const activity = useActivityPresentation(
+    replies,
+    session.agentActivity,
+    agentPubkeys,
+  );
   const comments = useRef<HTMLElement>(null);
   useEffect(() => {
     if (selectedComment)
@@ -622,37 +628,46 @@ function ReviewComments({
         className={styles.mediaReviewThread}
         aria-label="Media comments"
       >
-        {replies.map((row, index) => (
-          <div
-            key={row.id}
-            data-review-comment={row.id}
-            data-selected={selectedComment === row.id || undefined}
-            className={styles.mediaReviewComment}
-          >
-            <MessageRow
-              row={row}
-              extensions={extensions}
-              session={session}
-              scope={scope}
-              profile={profiles.get(row.authorId)}
-              agentPubkeys={agentPubkeys}
-              media={session.media}
-              onOpenLink={() => false}
-              day={
-                index === 0 ||
-                new Date(
-                  (replies[index - 1]?.createdAt ?? 0) * 1000,
-                ).toDateString() !==
-                  new Date(row.createdAt * 1000).toDateString()
-              }
-              retry={session.messages.retry}
-              onOpenMediaReview={(_rowId, attachment, seconds) =>
-                selectAttachment(attachment, seconds)
-              }
-              {...(seek ? { onMediaTime: seek } : {})}
-            />
-          </div>
-        ))}
+        {replies.map((row, index) => {
+          const recordedActivity = activity.byRow.get(row.id);
+          return (
+            <div
+              key={row.id}
+              data-review-comment={row.id}
+              data-selected={selectedComment === row.id || undefined}
+              className={styles.mediaReviewComment}
+            >
+              <MessageRow
+                row={row}
+                recordedActivity={
+                  recordedActivity && {
+                    ...recordedActivity,
+                    container: "history",
+                  }
+                }
+                extensions={extensions}
+                session={session}
+                scope={scope}
+                profile={profiles.get(row.authorId)}
+                agentPubkeys={agentPubkeys}
+                media={session.media}
+                onOpenLink={() => false}
+                day={
+                  index === 0 ||
+                  new Date(
+                    (replies[index - 1]?.createdAt ?? 0) * 1000,
+                  ).toDateString() !==
+                    new Date(row.createdAt * 1000).toDateString()
+                }
+                retry={session.messages.retry}
+                onOpenMediaReview={(_rowId, attachment, seconds) =>
+                  selectAttachment(attachment, seconds)
+                }
+                {...(seek ? { onMediaTime: seek } : {})}
+              />
+            </div>
+          );
+        })}
         {!replies.length && (
           <p className={styles.threadNote}>
             No comments yet. Add the first below.
diff --git a/src/features/messages/MessageRow.tsx b/src/features/messages/MessageRow.tsx
index 1be1275fce..576c6b4128 100644
--- a/src/features/messages/MessageRow.tsx
+++ b/src/features/messages/MessageRow.tsx
@@ -1,6 +1,6 @@
 import { AgentResponsePreview } from "./AgentResponsePreview";
 import { useActivityIndicator } from "./use-activity-indicator";
-import { activityPresentation } from "./activity-presentation";
+import type { ActivityRowPresentation } from "./activity-presentation";
 import { ShimmerText } from "../../shared/design-system/ui/ShimmerText";
 import { Collapsible } from "@base-ui/react/collapsible";
 import { formatItemTimestamp } from "../../shared/datetime";
@@ -100,12 +100,8 @@ import { avatarMedia } from "../../shared/avatar-source";
 export type MessageLinkOrigin = Readonly<{ rootId: string }>;
 export type MessageRowProps = {
   row: ChannelMessage;
-  activityMotionKey?: string | undefined;
+  recordedActivity?: ActivityRowPresentation | undefined;
   activityFollows?: boolean | undefined;
-  activityActive?: boolean | undefined;
-  activityOwnsLive?: boolean | undefined;
-  activityStandalone?: boolean | undefined;
-  activityBubble?: boolean | undefined;
   representedAgents?: readonly string[] | undefined;
   staticMentions?: boolean | undefined;
   getThreadRoot?: (() => ChannelMessage | undefined) | undefined;
@@ -1352,25 +1348,11 @@ export const MessageRow = memo(function AudienceMessageRow(
 function AgentsMessageRow(props: MessageRowProps) {
   const { row, session, media, participantProfiles, agentPubkeys } = props;
   const [open, setOpen] = useState(false);
-  const activity = useSyncExternalStore(
-    session?.agentActivity?.subscribe ?? noSubscribe,
-    session?.agentActivity?.snapshot ?? noLibrary,
-  );
-  const live = useActivityIndicator(
-    session,
-    row,
-    props.activityOwnsLive ?? false,
-  );
-  const active =
-    live ||
-    (props.activityActive ??
-      activityPresentation(
-        [row],
-        activity,
-        agentPubkeys,
-        row.threadRootId,
-      ).byRow.get(row.id)?.active ??
-      false);
+  const activity = props.recordedActivity;
+  const bubble =
+    activity?.container === "bubble" || activity?.container === "standalone";
+  const live = useActivityIndicator(session, row, activity?.ownsLive ?? false);
+  const active = live || (activity?.active ?? false);
   const keepMounted = props.keepMounted;
   useEffect(() => {
     if (open) return keepMounted?.(row.id);
@@ -1420,7 +1402,7 @@ function AgentsMessageRow(props: MessageRowProps) {
     <span
       className={styles.audienceAvatar}
       title={who.name}
-      data-avatar-motion-key={props.activityMotionKey}
+      data-avatar-motion-key={activity?.motionKey}
     >
       <AgentAvatar
         session={session}
@@ -1460,9 +1442,7 @@ function AgentsMessageRow(props: MessageRowProps) {
           }
           data-open={open || undefined}
         >
-          {props.day && !(props.activityBubble || props.activityStandalone) && (
-            <DayDivider createdAt={row.createdAt} />
-          )}
+          {props.day && !bubble && <DayDivider createdAt={row.createdAt} />}
           {/* Keep the address column stable while details open and close. */}
           <Collapsible.Root
             open={open}
@@ -1493,10 +1473,8 @@ function AgentsMessageRow(props: MessageRowProps) {
               className={styles.audienceLine}
               aria-label={`${author.name}${to.length ? ` to ${to.map((who) => who.name).join(", ")}` : ""}: ${preview}`}
             >
-              {avatar(author)}
-              {open &&
-                (props.activityBubble || props.activityStandalone) &&
-                "Collapse"}
+              {!bubble && avatar(author)}
+              {open && bubble && "Collapse"}
               {!open && (
                 <span className={styles.audiencePreviewText}>
                   <ShimmerText active={active}>{visiblePreview}</ShimmerText>
@@ -1517,12 +1495,20 @@ function AgentsMessageRow(props: MessageRowProps) {
       )}
     />
   );
-  return props.activityBubble || props.activityStandalone ? (
+  return bubble ? (
     <>
       {props.day && <DayDivider createdAt={row.createdAt} />}
       <AgentResponsePreview
         name={author.name}
-        stackPrevious={!props.activityStandalone}
+        participants={[
+          {
+            id: author.pubkey,
+            name: author.name,
+            picture: author.picture,
+            motionKey: activity?.motionKey,
+          },
+        ]}
+        stackPrevious={activity?.container !== "standalone"}
         picture={author.picture}
         layout={props.layout === "thread" ? "thread" : "timeline"}
       >
diff --git a/src/features/messages/Messages.module.css b/src/features/messages/Messages.module.css
index 550ffe5529..e07d23fb81 100644
--- a/src/features/messages/Messages.module.css
+++ b/src/features/messages/Messages.module.css
@@ -3481,13 +3481,6 @@ html[data-keyboard-navigation] .activityExpansion {
 .audienceLine[data-collapse] {
   color: var(--text-subtle);
 }
-.activityCollapseIcon {
-  flex: none;
-  width: var(--space-4);
-  height: var(--space-4);
-  color: var(--text-subtle);
-  opacity: 0.5;
-}
 
 /* Extend the native button hit target, keeping its painted surface content-sized. */
 .audienceRow[data-collapse] > .audienceEntry,
@@ -3517,9 +3510,6 @@ html[data-keyboard-navigation] .activityExpansion {
   max-inline-size: 100%;
   display: block;
 }
-.standaloneActivity .audienceAvatar {
-  display: none;
-}
 .standaloneActivity .audienceRow .audienceLine {
   inline-size: fit-content;
   max-inline-size: 100%;
@@ -3552,11 +3542,6 @@ html[data-keyboard-navigation] .activityExpansion {
   font-weight: var(--text-message--font-weight);
 }
 
-.standaloneActivity
-  .audienceLine:not([data-collapse])
-  > :not(.audiencePreviewText) {
-  display: none;
-}
 .standaloneActivity .audienceBody {
   min-height: calc(var(--text-message) * var(--text-message--line-height));
 }
diff --git a/src/features/messages/ThreadPanel.identity.test.tsx b/src/features/messages/ThreadPanel.identity.test.tsx
index c26ce37a8f..07fab9575d 100644
--- a/src/features/messages/ThreadPanel.identity.test.tsx
+++ b/src/features/messages/ThreadPanel.identity.test.tsx
@@ -21,6 +21,11 @@ import {
   signed,
 } from "../relay/testing";
 import { ThreadPanel } from "./ThreadPanel";
+import { createAgentActivity } from "../agents/activity";
+import { createLocalAgentActivity } from "../agents/local-activity";
+import { stubAvatarBrowserApis } from "../agents/avatar-testing";
+
+stubAvatarBrowserApis();
 
 vi.mock("./MessageMarkdown", () => ({
   MessageMarkdown: ({ row }: { row: ChannelMessage }) => (
@@ -172,3 +177,65 @@ it.each([false, true])(
     owner.dispose();
   },
 );
+
+it("keeps a standalone activity root subscribed to its request through completion", async () => {
+  const agent = keypair();
+  const root = message(agent, "a", "Checking root activity", 1, [
+    ["audience", "agents"],
+  ]);
+  const wire = scriptedTransport(keypair().pubkey, keypair().pubkey);
+  let traffic!: LiveCallbacks;
+  const owner = createRelaySession({
+    ...wire.transport,
+    subscribe(callbacks) {
+      traffic = callbacks;
+      return { update() {}, retry() {}, dispose() {} };
+    },
+    query(filters, signal) {
+      return filters[0]?.kinds?.includes(30315)
+        ? Promise.resolve([])
+        : wire.transport.query(filters, signal);
+    },
+  });
+  traffic.receive([root]);
+  const local = createLocalAgentActivity();
+  const activity = createAgentActivity(
+    true,
+    () => {},
+    () => true,
+    undefined,
+    undefined,
+    { source: local.reader, scope: "root-test" },
+  );
+  const release = activity.queries.activate();
+  const work = local.begin({
+    scope: "root-test",
+    agent: agent.pubkey,
+    channelId: "a",
+    messageId: root.id,
+    threadRootId: root.id,
+  });
+  work.started();
+  try {
+    render(
+      <ThreadPanel
+        session={{ ...owner.session, agentActivity: activity.queries }}
+        scope="activity-root-test"
+        channelName="A"
+        channelId="a"
+        messageId={root.id}
+        close={() => {}}
+        onOpenLink={() => false}
+      />,
+    );
+    const preview = await screen.findByText("Checking root activity");
+    expect(preview).toHaveAttribute("data-active", "true");
+    act(() => work.finish({ ok: true }));
+    expect(preview).not.toHaveAttribute("data-active");
+  } finally {
+    cleanup();
+    release();
+    activity.dispose();
+    owner.dispose();
+  }
+});
diff --git a/src/features/messages/ThreadPanel.tsx b/src/features/messages/ThreadPanel.tsx
index 1e009dd3ab..4097764c5b 100644
--- a/src/features/messages/ThreadPanel.tsx
+++ b/src/features/messages/ThreadPanel.tsx
@@ -7,7 +7,7 @@ import {
   activityDisplayRows,
   useActivitySnapshot,
 } from "./activity-presentation";
-import { activityGroups } from "./activity-groups";
+import { activityRuns } from "./activity-groups";
 import { DayDivider } from "./MessageTimestamp";
 import { workflowLabel } from "../relay/workflow-attribution";
 import { usePanelTabHost } from "../panels/PanelWorkspace";
@@ -596,9 +596,9 @@ function ThreadMessages({
       return;
     activityVisit.current = messageId;
     const group = [...tree.children.values()]
-      .flatMap((rows) => activityGroups(rows))
-      .find((group) => group.ids.includes(messageId));
-    const first = group?.ids[0];
+      .flatMap((rows) => activityRuns(rows))
+      .find((group) => group.some((row) => row.id === messageId));
+    const first = group?.[0]?.id;
     if (first) setExpandedActivity((current) => new Set([...current, first]));
   }, [messageId, snapshot.replies, tree]);
   const [expanded, setExpanded] = useState<ReadonlySet<string>>(new Set());
@@ -894,6 +894,15 @@ function ThreadMessages({
     request: number;
   }>();
   const rootId = snapshot.root?.id;
+  const rootPresentation = activityPresentation(
+    snapshot.root?.audience === "agents"
+      ? [snapshot.root, ...snapshot.replies]
+      : snapshot.replies,
+    activitySnapshot,
+    agentPubkeys,
+    rootId,
+  );
+  const rootActivity = rootId ? rootPresentation.byRow.get(rootId) : undefined;
   const { agents: liveAgents } = useConversationAgents(
     session,
     channelId,
@@ -1264,13 +1273,16 @@ function ThreadMessages({
       group.ids.every((id) => !tree.children.get(id)?.length),
     );
     const siblings = activityDisplayRows(chronologicalSiblings, groups);
+    const groupsByFirst = new Map(groups.map((group) => [group.ids[0], group]));
+    const groupedIds = new Set(groups.flatMap((group) => group.ids));
     const hidden = new Set(
       groups.flatMap((group) =>
         expandedActivity.has(group.ids[0] ?? "") ? [] : group.ids,
       ),
     );
     return siblings.map((row, index) => {
-      const group = groups.find((group) => group.ids[0] === row.id);
+      const group = groupsByFirst.get(row.id);
+      const recordedActivity = presentation.byRow.get(row.id);
       if (hidden.has(row.id) && !group) return null;
       const nextRow =
         row.audience === "agents"
@@ -1309,13 +1321,14 @@ function ThreadMessages({
           <MessageRow
             activityFollows={presentation.completedReplies.has(row.id)}
             representedAgents={presentation.representedAgents.get(row.id)}
-            activityMotionKey={presentation.byRow.get(row.id)?.motionKey}
-            activityActive={presentation.byRow.get(row.id)?.active}
-            activityBubble={!group && presentation.byRow.get(row.id)?.bubble}
-            activityStandalone={
-              !group && presentation.byRow.get(row.id)?.standalone
+            recordedActivity={
+              recordedActivity && {
+                ...recordedActivity,
+                container: groupedIds.has(row.id)
+                  ? "history"
+                  : recordedActivity.container,
+              }
             }
-            activityOwnsLive={presentation.byRow.get(row.id)?.ownsLive}
             viewer={session.viewer}
             extensions={extensions}
             session={session}
@@ -1593,12 +1606,12 @@ function ThreadMessages({
               onReply={soloConversation ? undefined : focusReply}
               stackNext={joinsLive && snapshot.root.id === lastMessage?.id}
               row={snapshot.root}
-              representedAgents={activityPresentation(
-                snapshot.replies,
-                activitySnapshot,
-                agentPubkeys,
-                rootId,
-              ).representedAgents.get(snapshot.root.id)}
+              representedAgents={rootPresentation.representedAgents.get(
+                snapshot.root.id,
+              )}
+              recordedActivity={
+                rootActivity && { ...rootActivity, container: "history" }
+              }
               profile={profiles.get(snapshot.root.authorId)}
               participantProfiles={profiles}
               agentPubkeys={agentPubkeys}
diff --git a/src/features/messages/TypingIndicator.test.tsx b/src/features/messages/TypingIndicator.test.tsx
index 7bd2a91259..4d6d8bd37b 100644
--- a/src/features/messages/TypingIndicator.test.tsx
+++ b/src/features/messages/TypingIndicator.test.tsx
@@ -111,13 +111,15 @@ it("shows an incoming typing preview without invented details, retaining navigat
   await user.hover(trigger);
   let dialog = await screen.findByRole("dialog", { name: "Working now" });
   expect(
-    within(dialog).getByText("This agent isn’t sharing step details."),
+    within(dialog).getByText("Only typing updates are reaching this app."),
   ).toBeVisible();
   f.update([entry()], { status: "connecting" });
-  expect(within(dialog).getByText("Connecting to step details…")).toBeVisible();
+  expect(
+    within(dialog).getByText("Only typing updates are reaching this app."),
+  ).toBeVisible();
   f.update([entry()], { status: "interrupted" });
   expect(
-    within(dialog).getByText("Step updates paused: connection lost."),
+    within(dialog).getByText("Only typing updates are reaching this app."),
   ).toBeVisible();
   f.update([entry()], { status: "listening" });
   expect(within(dialog).getByText("Thread · First task")).toBeVisible();
@@ -202,7 +204,7 @@ it.each([
     const dialog = await screen.findByRole("dialog", { name: "Working now" });
     expect(within(dialog).getByText(label, { exact: true })).toBeVisible();
     expect(
-      within(dialog).queryByText("This agent isn’t sharing step details."),
+      within(dialog).queryByText("Only typing updates are reaching this app."),
     ).toBeNull();
     expect(dialog).not.toHaveTextContent("report.txt");
   },
@@ -256,7 +258,7 @@ it("keeps a non-navigable status when the plugin is unavailable and does not clo
   await user.click(trigger);
   let dialog = await screen.findByRole("dialog");
   expect(
-    within(dialog).getByText("This app can’t show step details"),
+    within(dialog).getByText("Only typing updates are reaching this app."),
   ).toBeVisible();
   expect(within(dialog).queryByRole("button")).toBeNull();
   view.rerender(
@@ -465,6 +467,11 @@ it("opens the sole known conversation without attributing unknown telemetry to t
       /Work with unconfirmed thread/,
     ),
   ).toBeVisible();
+  expect(
+    within(screen.getByRole("dialog")).getByText(
+      "No current step details received.",
+    ),
+  ).toBeVisible();
   await user.click(screen.getByRole("button", { name: "View Agent activity" }));
   expect(open).toHaveBeenLastCalledWith(
     profileActivityViewTarget(agent),
@@ -771,11 +778,58 @@ it("uses the agent typing bubble for a public agent outside the viewer’s choic
   await userEvent.setup().click(trigger);
   expect(
     within(await screen.findByRole("dialog")).getByText(
-      "This agent’s work details are private.",
+      "Only typing updates are reaching this app.",
     ),
   ).toBeVisible();
+  for (const status of [
+    "connecting",
+    "interrupted",
+    "disabled",
+    "unavailable",
+  ] as const) {
+    f.update([entry("public-agent")], { status });
+    expect(
+      within(screen.getByRole("dialog")).getByText(
+        "Only typing updates are reaching this app.",
+      ),
+    ).toBeVisible();
+  }
   f.update([]);
   expect(
     screen.queryByRole("button", { name: "Activity: Sam’s assistant working" }),
   ).toBeNull();
 });
+
+it.each(["done", "error", "stopped", "superseded"] as const)(
+  "keeps a public agent’s %s local work terminal despite stale typing",
+  (state) => {
+    const f = fixture();
+    const entries = [entry("public-agent"), entry(human)];
+    const local = {
+      agent: "public-agent",
+      scope: "scope",
+      channelId: "channel",
+      messageId: "request",
+      threadRootId: root,
+      startedAt: 1,
+      state: "working" as const,
+    };
+    f.update(entries, { local: [local] });
+    render(
+      <TypingIndicator
+        session={f.session}
+        channelId="channel"
+        threadRootId={root}
+      />,
+    );
+    expect(screen.getByRole("status")).toHaveTextContent(
+      "Sam’s assistant is working",
+    );
+    f.update(entries, { local: [{ ...local, state }] });
+    expect(
+      screen.queryByRole("button", { name: /Sam’s assistant working/ }),
+    ).toBeNull();
+    expect(screen.getByRole("status")).toHaveTextContent("Human is typing");
+    expect(screen.getByRole("status")).not.toHaveTextContent("Sam’s assistant");
+  },
+);
diff --git a/src/features/messages/TypingIndicator.tsx b/src/features/messages/TypingIndicator.tsx
index 2fb028bf4c..15482bacbb 100644
--- a/src/features/messages/TypingIndicator.tsx
+++ b/src/features/messages/TypingIndicator.tsx
@@ -50,41 +50,29 @@ export function useConversationAgents(
     session.agentChoices.subscribe,
     session.agentChoices.snapshot,
   );
-  const ownedAgents = useMemo(
-    () => new Set(choices.identities.map(({ pubkey }) => pubkey)),
-    [choices],
-  );
   const profiles = useSyncExternalStore(
     session.profiles.subscribe,
     session.profiles.snapshot,
   );
-  const details = useMemo(() => {
-    const current = new Map(
-      currentActivity(activity, entries, ownedAgents, channelId, threadRootId),
-    );
-    // Public agent identity changes presentation, never access to private activity.
-    for (const entry of entries) {
-      if (
-        entry.channelId !== channelId ||
-        entry.threadRootId !== threadRootId ||
-        !profiles.get(entry.pubkey)?.isAgent ||
-        current.has(entry.pubkey)
-      )
-        continue;
-      current.set(entry.pubkey, {
-        label: "Working",
-        roots: [entry.threadRootId ?? null],
-      });
-    }
-    return current;
-  }, [activity, entries, ownedAgents, channelId, threadRootId, profiles]);
+  // Public identity classifies typing only; it grants no access to step details.
+  const knownAgents = useMemo(() => {
+    const known = new Set(choices.identities.map(({ pubkey }) => pubkey));
+    for (const entry of entries)
+      if (profiles.get(entry.pubkey)?.isAgent) known.add(entry.pubkey);
+    return known;
+  }, [choices, entries, profiles]);
+  const details = useMemo(
+    () =>
+      currentActivity(activity, entries, knownAgents, channelId, threadRootId),
+    [activity, entries, knownAgents, channelId, threadRootId],
+  );
   const agents = [...details.keys()].filter((key) => !replaced.has(key)).sort();
   return {
     details,
     entries,
     replaced,
     agents,
-    activityStatus: activity?.status,
+    knownAgents,
   };
 }
 
@@ -110,7 +98,7 @@ export function TypingIndicator({
     | ((target: string, origin?: MessageLinkOrigin) => boolean)
     | undefined;
 }) {
-  const { details, entries, replaced, agents, activityStatus } =
+  const { details, entries, replaced, agents, knownAgents } =
     useConversationAgents(session, channelId, threadRootId);
   const resolveName = useChannelIdentityNames(session, channelId);
   const profiles = useSyncExternalStore(
@@ -140,6 +128,7 @@ export function TypingIndicator({
     (entry) =>
       entry.channelId === channelId &&
       entry.threadRootId === threadRootId &&
+      !knownAgents.has(entry.pubkey) &&
       !details.has(entry.pubkey) &&
       !replaced.has(entry.pubkey),
   );
@@ -190,24 +179,16 @@ export function TypingIndicator({
       ? `buzz://message?${new URLSearchParams({ channel: channelId, id: conversationRoot, thread: conversationRoot })}`
       : `buzz://channel/${encodeURIComponent(channelId)}`;
     const picture = profiles.get(pubkey)?.picture;
-    const owner = profiles.get(pubkey)?.ownerPubkey;
-    const otherOwner = !!owner && !!session.viewer && owner !== session.viewer;
     return (
       <AgentActivityRow
         name={name(pubkey)}
         picture={avatarMedia(picture, session.media)}
         status={
-          detail.label !== "Working"
+          detail.detailAvailability === "available"
             ? detail.label
-            : otherOwner
-              ? "This agent’s work details are private."
-              : activityStatus === "connecting"
-                ? "Connecting to step details…"
-                : activityStatus === "interrupted"
-                  ? "Step updates paused: connection lost."
-                  : activityStatus === "listening"
-                    ? "This agent isn’t sharing step details."
-                    : "This app can’t show step details"
+            : detail.detailAvailability === "no-current-step"
+              ? "No current step details received."
+              : "Only typing updates are reaching this app."
         }
         scope={
           detail.roots.length === 1 && detail.roots[0] === null
diff --git a/src/features/messages/activity-avatar-motion.ts b/src/features/messages/activity-avatar-motion.ts
index 58abc2c6fc..623489b2ac 100644
--- a/src/features/messages/activity-avatar-motion.ts
+++ b/src/features/messages/activity-avatar-motion.ts
@@ -76,15 +76,18 @@ export function toggleActivityHistory(
           ),
         );
     }
+    // The cluster's resting transform places and sizes each avatar. Preserve it
+    // at both endpoints so collapsing does not briefly expand every item to full size.
+    const transform = view.getComputedStyle(node).transform || "none";
     animations.push(
       node.animate(
         from
           ? [
               {
-                transform: `translate(${from.x - to.x}px, ${from.y - to.y}px) scale(${from.width / to.width}, ${from.height / to.height})`,
+                transform: `translate(${from.x - to.x}px, ${from.y - to.y}px) ${transform === "none" ? "" : transform} scale(${from.width / to.width}, ${from.height / to.height})`,
                 transformOrigin: "top left",
               },
-              { transform: "none", transformOrigin: "top left" },
+              { transform, transformOrigin: "top left" },
             ]
           : [{ opacity: 0 }, { opacity: 1 }],
         { duration, easing, fill: "both" },
diff --git a/src/features/messages/activity-groups.test.ts b/src/features/messages/activity-groups.test.ts
index 248cad1a0f..3ec6d73d1a 100644
--- a/src/features/messages/activity-groups.test.ts
+++ b/src/features/messages/activity-groups.test.ts
@@ -3,7 +3,7 @@ import {
   activityDisplayRows,
   activityPresentation,
 } from "./activity-presentation";
-import { activityGroups } from "./activity-groups";
+import { activityRuns } from "./activity-groups";
 import type { ChannelMessage } from "../relay/contracts";
 
 const activity = (
@@ -27,10 +27,11 @@ const run = (prefix: string, count = 6) =>
   Array.from({ length: count }, (_, index) => activity(`${prefix}${index}`));
 
 it("folds consecutive activity into one preview and includes different agents in a run", () => {
-  expect(activityGroups(run("a", 1))).toEqual([]);
+  const single = run("a", 1);
+  expect(activityRuns(single)).toEqual([single]);
   const rows = run("a");
   rows[2] = activity("other-agent", { authorId: "other" });
-  expect(activityGroups(rows)).toEqual([{ ids: rows.map((row) => row.id) }]);
+  expect(activityRuns(rows)).toEqual([rows]);
 });
 
 it.each(["human", "agent", "membership"])(
@@ -50,9 +51,9 @@ it.each(["human", "agent", "membership"])(
             },
           }
         : { ...ordinary, authorId: kind };
-    expect(activityGroups([...before, separator, ...after])).toEqual([
-      { ids: before.map((row) => row.id) },
-      { ids: after.map((row) => row.id) },
+    expect(activityRuns([...before, separator, ...after])).toEqual([
+      before,
+      after,
     ]);
   },
 );
@@ -67,39 +68,42 @@ it("splits groups across local days and channels", () => {
     ...row,
     channelId: "other",
   }));
-  expect(activityGroups([...today, ...tomorrow, ...elsewhere])).toEqual(
-    [today, tomorrow, elsewhere].map((rows) => ({
-      ids: rows.map((row) => row.id),
-    })),
-  );
+  expect(activityRuns([...today, ...tomorrow, ...elsewhere])).toEqual([
+    today,
+    tomorrow,
+    elsewhere,
+  ]);
 });
 
-it("places completed history after its agent reply while keeping unfinished work in place", () => {
-  const history = run("step", 2);
-  const { audience: _, ...reply } = activity("reply");
-  const rows = [...history, reply];
-  const completed = activityPresentation(rows, undefined, new Set(["agent"]));
-  expect(
-    activityDisplayRows(rows, completed.groups).map((row) => row.id),
-  ).toEqual(["reply", "step0", "step1"]);
-  expect([...completed.completedReplies]).toEqual(["reply"]);
-  const request = { ...reply, id: "request", authorId: "human" };
-  expect([
-    ...activityPresentation(
-      [request, ...history],
-      undefined,
-      new Set(["agent"]),
-    ).completedReplies,
-  ]).toEqual([]);
-  const otherReply = { ...reply, authorId: "human" };
-  const pending = [...history, otherReply];
-  expect(
-    activityDisplayRows(
-      pending,
-      activityPresentation(pending, undefined, new Set(["agent"])).groups,
-    ),
-  ).toEqual(pending);
-});
+it.each([1, 2])(
+  "places %i completed steps after its agent reply while keeping unfinished work in place",
+  (count) => {
+    const history = run("step", count);
+    const { audience: _, ...reply } = activity("reply");
+    const rows = [...history, reply];
+    const completed = activityPresentation(rows, undefined, new Set(["agent"]));
+    expect(
+      activityDisplayRows(rows, completed.groups).map((row) => row.id),
+    ).toEqual(["reply", ...history.map((row) => row.id)]);
+    expect([...completed.completedReplies]).toEqual(["reply"]);
+    const request = { ...reply, id: "request", authorId: "human" };
+    expect([
+      ...activityPresentation(
+        [request, ...history],
+        undefined,
+        new Set(["agent"]),
+      ).completedReplies,
+    ]).toEqual([]);
+    const otherReply = { ...reply, authorId: "human" };
+    const pending = [...history, otherReply];
+    expect(
+      activityDisplayRows(
+        pending,
+        activityPresentation(pending, undefined, new Set(["agent"])).groups,
+      ),
+    ).toEqual(pending);
+  },
+);
 
 it("hands unparented thread replies to the latest request without overriding explicit reply links", () => {
   const { audience: _requestAudience, ...request } = activity("request", {
diff --git a/src/features/messages/activity-groups.ts b/src/features/messages/activity-groups.ts
index d15577888a..0bd2d406ab 100644
--- a/src/features/messages/activity-groups.ts
+++ b/src/features/messages/activity-groups.ts
@@ -1,9 +1,5 @@
 import type { ChannelMessage } from "../relay/contracts";
 
-export type ActivityGroup = {
-  ids: string[];
-};
-
 /** Only consecutive agent-only messages on one local day fold together.
  * Human messages, public agent replies and membership notices stay visible. */
 export function activityRuns(
@@ -31,11 +27,3 @@ export function activityRuns(
   }
   return groups;
 }
-
-export function activityGroups(
-  rows: readonly ChannelMessage[],
-): ActivityGroup[] {
-  return activityRuns(rows)
-    .filter((group) => group.length > 1)
-    .map((group) => ({ ids: group.map((row) => row.id) }));
-}
diff --git a/src/features/messages/activity-presentation.ts b/src/features/messages/activity-presentation.ts
index 12636e77c7..4c64b95eb5 100644
--- a/src/features/messages/activity-presentation.ts
+++ b/src/features/messages/activity-presentation.ts
@@ -18,7 +18,14 @@ type ActivityRun = {
 export type ActivityPresentation = ActivityRun & {
   done: boolean;
   working: boolean;
-  standalone?: boolean;
+  standalone: boolean;
+  completedReply: ChannelMessage | undefined;
+};
+export type ActivityRowPresentation = {
+  active: boolean;
+  ownsLive: boolean;
+  container: "history" | "bubble" | "standalone";
+  motionKey: string | undefined;
 };
 const noSubscribe = () => () => {};
 const noActivity = () => undefined;
@@ -60,7 +67,7 @@ function activityStatus(group: ActivityRun, snapshot: Snapshot | undefined) {
       ? []
       : work.filter((entry) => entry.working).map((entry) => entry.agent),
   );
-  return { done, working };
+  return { done, working, completedReply: closed ? response : undefined };
 }
 
 /** Shared projection for timeline and thread; hosts own scrolling and disclosure state. */
@@ -73,6 +80,9 @@ export function activityPresentation(
   const following = new Map(
     rows.map((row, index) => [row.id, rows[index + 1]]),
   );
+  const preceding = new Map(
+    rows.map((row, index) => [row.id, rows[index - 1]]),
+  );
   const requests = new Map<string, string>();
   if (rootId) requests.set(rootId, rootId);
   const representedAgents = new Map<string, string[]>();
@@ -108,16 +118,7 @@ export function activityPresentation(
   }
   const groups: ActivityPresentation[] = [];
   const bubbleAnchors = new Set<string>();
-  const byRow = new Map<
-    string,
-    {
-      active: boolean;
-      ownsLive: boolean;
-      standalone: boolean;
-      bubble: boolean;
-      motionKey: string | undefined;
-    }
-  >();
+  const byRow = new Map<string, ActivityRowPresentation>();
   for (const history of activityRuns(rows)) {
     const first = history[0];
     const latest = history.at(-1);
@@ -131,12 +132,10 @@ export function activityPresentation(
       requestId: requests.get(first.id) ?? first.threadRootId,
       followingMessage: following.get(latest.id),
     };
-    const { done, working } = activityStatus(group, snapshot);
-    const before = rows[rows.findIndex((row) => row.id === first.id) - 1];
+    const { done, working, completedReply } = activityStatus(group, snapshot);
+    const before = preceding.get(first.id);
     const anchor =
-      done && group.followingMessage?.authorId === first.authorId
-        ? group.followingMessage
-        : before;
+      completedReply?.authorId === first.authorId ? completedReply : before;
     const standalone =
       !anchor ||
       !!anchor.membership ||
@@ -151,29 +150,26 @@ export function activityPresentation(
       byRow.set(row.id, {
         active: last && working.has(row.authorId),
         ownsLive: last && !done && !group.followingMessage,
-        standalone: row.id === first.id && standalone,
-        bubble: !done || standalone,
-        motionKey:
-          history.length > 1 && last
-            ? `${first.id}:${row.authorId}`
-            : undefined,
+        container:
+          row.id === first.id && standalone
+            ? "standalone"
+            : !done || standalone
+              ? "bubble"
+              : "history",
+        motionKey: last ? `${first.id}:${row.authorId}` : undefined,
       });
     }
-    if (history.length > 1) {
-      groups.push({ ...group, done, working: working.size > 0, standalone });
-    }
+    groups.push({
+      ...group,
+      done,
+      working: working.size > 0,
+      standalone,
+      completedReply,
+    });
   }
   const completedReplies = new Set(
     groups.flatMap((group) =>
-      group.done &&
-      group.followingMessage &&
-      !group.followingMessage.membership &&
-      group.followingMessage.audience !== "agents" &&
-      group.followingMessage.channelId === group.latest.channelId &&
-      group.followingMessage.threadRootId === group.latest.threadRootId &&
-      group.participants.includes(group.followingMessage.authorId)
-        ? [group.followingMessage.id]
-        : [],
+      group.completedReply ? [group.completedReply.id] : [],
     ),
   );
   return { groups, byRow, representedAgents, bubbleAnchors, completedReplies };
@@ -200,18 +196,8 @@ export function activityDisplayRows<T extends ChannelMessage>(
   const replies = new Map<string, T>();
   for (const group of groups) {
     const first = group.ids[0];
-    const reply = group.followingMessage && byId.get(group.followingMessage.id);
-    if (
-      first &&
-      group.done &&
-      reply &&
-      !reply.membership &&
-      reply.audience !== "agents" &&
-      group.participants.includes(reply.authorId) &&
-      reply.channelId === group.latest.channelId &&
-      reply.threadRootId === group.latest.threadRootId
-    )
-      replies.set(first, reply);
+    const reply = group.completedReply && byId.get(group.completedReply.id);
+    if (first && reply) replies.set(first, reply);
   }
   if (!replies.size) return rows;
   const moved = new Set([...replies.values()].map((row) => row.id));
diff --git a/src/shared/design-system/ui/AvatarStack.tsx b/src/shared/design-system/ui/AvatarStack.tsx
index eea4ed5b83..1d2da924de 100644
--- a/src/shared/design-system/ui/AvatarStack.tsx
+++ b/src/shared/design-system/ui/AvatarStack.tsx
@@ -4,8 +4,6 @@ import styles from "./AvatarStack.module.css";
 
 type StackAvatar = {
   id: string;
-  /** Optional identity for feature-owned shared-position animation. */
-  motionKey?: string | undefined;
   name: string;
   src?: string | undefined;
   shape: "circle" | "squircle";
@@ -42,7 +40,6 @@ export function AvatarStack({
           style={{ zIndex: index + 1 }}
           data-avatar-shape={item.shape}
           title={item.name}
-          data-avatar-motion-key={item.motionKey}
         >
           <Avatar
             src={item.src}

From 0abae18ba1f6006f68e9c77465ef7b20c1a1c221 Mon Sep 17 00:00:00 2001
From: Arjun Mahanti <arjun@squareup.com>
Date: Wed, 28 Oct 2026 15:01:01 -0400
Subject: [PATCH 13/19] Refine agent activity bubbles and preserve message
 navigation

Co-authored-by: OpenAI Codex <noreply@openai.com>
Signed-off-by: Arjun Mahanti <arjun@squareup.com>
---
 .../agent-activity/ActivityAccessory.tsx      |  10 +-
 .../messages/ActivityGroupPreview.test.tsx    | 108 +++--------
 .../messages/ActivityGroupPreview.tsx         |  48 +++--
 .../messages/AgentResponsePreview.tsx         |   2 -
 src/features/messages/ChannelTimeline.tsx     | 182 ++++++++++++------
 .../ChannelTimeline.viewport.test.tsx         | 110 ++++++++++-
 .../messages/MessageComposer.test.tsx         |  42 ++++
 src/features/messages/MessageComposer.tsx     |   9 +
 src/features/messages/MessageRow.tsx          |  15 +-
 src/features/messages/Messages.module.css     |  64 +++++-
 src/features/messages/ThreadPanel.test.tsx    |  37 ++++
 src/features/messages/ThreadPanel.tsx         |  52 +++--
 .../messages/TypingIndicator.module.css       |  42 +---
 .../messages/TypingIndicator.test.tsx         |  66 ++++++-
 src/features/messages/TypingIndicator.tsx     |  19 +-
 .../messages/activity-avatar-motion.ts        | 124 ------------
 .../messages/activity-presentation.ts         |   4 +-
 .../messages/use-activity-indicator.ts        |  20 +-
 src/shared/design-system/DESIGN.md            |   4 +-
 .../design-system/ui/TypingDots.module.css    |   4 +-
 20 files changed, 586 insertions(+), 376 deletions(-)
 delete mode 100644 src/features/messages/activity-avatar-motion.ts

diff --git a/src/bundled/agent-activity/ActivityAccessory.tsx b/src/bundled/agent-activity/ActivityAccessory.tsx
index f601a17a3e..9b7be0a2c8 100644
--- a/src/bundled/agent-activity/ActivityAccessory.tsx
+++ b/src/bundled/agent-activity/ActivityAccessory.tsx
@@ -46,6 +46,7 @@ import {
   useActivityTypingReplacement,
 } from "../../features/conversation/typing-presentation";
 import styles from "./ActivityAccessory.module.css";
+import messageStyles from "../../features/messages/Messages.module.css";
 import { avatarMedia } from "../../shared/avatar-source";
 import { AgentResponsePreview } from "../../features/messages/AgentResponsePreview";
 
@@ -517,17 +518,16 @@ function ActivityBubble({
           }
         }}
         render={
-          <Button
+          <button
             ref={trigger}
             tabIndex={interactive ? undefined : -1}
-            size="inline"
-            variant="plain"
+            type="button"
+            className={messageStyles.activityBubbleTrigger}
             data-activity-summary=""
-            style={{ maxWidth: "100%" }}
             aria-label={`${props.openThread ? "Open thread" : "View agent activity"}: ${entries.map((entry) => `${entry.name}, ${label(entry)}`).join("; ")}`}
           >
             {content}
-          </Button>
+          </button>
         }
       />
       <PopoverPopup
diff --git a/src/features/messages/ActivityGroupPreview.test.tsx b/src/features/messages/ActivityGroupPreview.test.tsx
index dce3f20ecf..6bdb080ca7 100644
--- a/src/features/messages/ActivityGroupPreview.test.tsx
+++ b/src/features/messages/ActivityGroupPreview.test.tsx
@@ -26,7 +26,6 @@ stubAvatarBrowserApis();
 afterEach(() => {
   cleanup();
   vi.restoreAllMocks();
-  Reflect.deleteProperty(HTMLElement.prototype, "animate");
 });
 const step: ChannelMessage = {
   id: "step",
@@ -165,39 +164,22 @@ it("shimmers a standalone working step and stops when that request finishes", ()
   }
 });
 
-it("moves the visible team avatars into history and returns them to their clustered positions", async () => {
-  const history = [step, { ...step, id: "helper-step", authorId: "helper" }];
+it("opens contained history and keeps focus on the collapse control", () => {
+  const history = [
+    step,
+    {
+      ...step,
+      id: "helper-step",
+      authorId: "helper",
+      content: "Checking the helper layout",
+    },
+  ];
   const presentation = activityPresentation(
     history,
     undefined,
     new Set(["agent", "helper"]),
   );
   const group = presentation.groups[0];
-  let finish = () => {};
-  const finished = new Promise<void>((resolve) => {
-    finish = resolve;
-  });
-  const animations: { node: HTMLElement; frames: Keyframe[] }[] = [];
-  Object.defineProperty(HTMLElement.prototype, "animate", {
-    configurable: true,
-    value(this: HTMLElement, frames: Keyframe[]) {
-      animations.push({ node: this, frames });
-      return { finished, cancel: () => {} };
-    },
-  });
-  // jsdom has no layout. Supply boxes only for the visible cluster and the
-  // actual history rows, excluding hidden duplicate artwork.
-  vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockImplementation(
-    function (this: HTMLElement) {
-      const identity = this.closest('[role="img"]');
-      if (!this.dataset.avatarMotionKey || this.closest("[inert]"))
-        return new DOMRect();
-      if (identity) return new DOMRect(10, 20, 25, 25);
-      return this.closest('[data-audience="agents"]')
-        ? new DOMRect(50, this.title === "helper" ? 120 : 70, 40, 40)
-        : new DOMRect();
-    },
-  );
   function Preview() {
     const [expanded, setExpanded] = useState(false);
     if (!group) throw new Error("Missing activity group");
@@ -207,11 +189,7 @@ it("moves the visible team avatars into history and returns them to their cluste
           group={group}
           profiles={new Map()}
           media={() => undefined}
-          expanded={expanded}
-          onToggle={() => setExpanded((value) => !value)}
-        />
-        {expanded &&
-          history.map((row) => {
+          renderHistory={(row) => {
             const activity = presentation.byRow.get(row.id);
             if (!activity) throw new Error("Missing history presentation");
             return (
@@ -226,58 +204,24 @@ it("moves the visible team avatars into history and returns them to their cluste
                 retry={undefined}
               />
             );
-          })}
+          }}
+          expanded={expanded}
+          onToggle={() => setExpanded((value) => !value)}
+        />
       </div>
     );
   }
-  try {
-    render(<Preview />);
-    const team = screen.getByRole("img", { name: "agent, helper" });
-    const restingTransform = "matrix(0.6, 0, 0, 0.6, 12, 12)";
-    for (const avatar of team.querySelectorAll<HTMLElement>("[title]")) {
-      avatar.style.transform = restingTransform;
-    }
-    fireEvent.click(
-      screen.getByRole("button", { name: /Show activity history/ }),
-      {
-        detail: 1,
-      },
-    );
-    const expanded = animations.filter(
-      ({ node }) => node.dataset.avatarMotionKey,
-    );
-    expect(expanded).toHaveLength(2);
-    expect(
-      expanded.every(
-        ({ node }) =>
-          node.closest('[data-audience="agents"]') &&
-          !node.closest("[data-agent-response-preview]"),
-      ),
-    ).toBe(true);
-    expect(
-      expanded.every(({ frames }) =>
-        frames[0]?.transform?.toString().includes("translate("),
-      ),
-    ).toBe(true);
-    animations.length = 0;
-    fireEvent.click(
-      screen.getByRole("button", { name: /Collapse activity history/ }),
-      {
-        detail: 1,
-      },
-    );
-    const collapsed = animations.filter(
-      ({ node }) => node.dataset.avatarMotionKey,
-    );
-    expect(collapsed).toHaveLength(2);
-    expect(collapsed.every(({ node }) => team.contains(node))).toBe(true);
-    expect(collapsed.map(({ frames }) => frames.at(-1)?.transform)).toEqual([
-      restingTransform,
-      restingTransform,
-    ]);
-  } finally {
-    await act(async () => finish());
-  }
+  render(<Preview />);
+  const toggle = screen.getByRole("button", { name: /Show activity history/ });
+  fireEvent.click(toggle, { detail: 0 });
+  expect(toggle).toHaveAttribute("aria-expanded", "true");
+  expect(toggle).toHaveFocus();
+  expect(screen.getByText("Checking the layout")).toBeVisible();
+  expect(screen.getByText("Checking the helper layout")).toBeVisible();
+  fireEvent.click(toggle, { detail: 0 });
+  expect(toggle).toHaveAttribute("aria-expanded", "false");
+  expect(toggle).toHaveFocus();
+  expect(screen.queryByText("Checking the layout")).toBeNull();
 });
 
 it("keeps the primary avatar on the activity bubble without repeating an anchored byline", () => {
diff --git a/src/features/messages/ActivityGroupPreview.tsx b/src/features/messages/ActivityGroupPreview.tsx
index 37b66e86f1..b47707f036 100644
--- a/src/features/messages/ActivityGroupPreview.tsx
+++ b/src/features/messages/ActivityGroupPreview.tsx
@@ -1,10 +1,12 @@
+import type { ReactNode } from "react";
+import { CaretUpIcon } from "../../shared/design-system/icons";
 import { AgentResponsePreview } from "./AgentResponsePreview";
 import { useActivityIndicator } from "./use-activity-indicator";
 import type { RelaySession } from "../relay/session";
 import { ShimmerText } from "../../shared/design-system/ui/ShimmerText";
 import type { ActivityPresentation } from "./activity-presentation";
-import { toggleActivityHistory } from "./activity-avatar-motion";
-import type { Profile } from "../relay/contracts";
+import { Avatar } from "../../shared/design-system/ui/Avatar";
+import type { ChannelMessage, Profile } from "../relay/contracts";
 import { avatarMedia } from "../../shared/avatar-source";
 import { messagePreviewText } from "../conversation/message-preview-text";
 import styles from "./Messages.module.css";
@@ -18,6 +20,7 @@ export function ActivityGroupPreview({
   expanded,
   onToggle,
   layout = "timeline",
+  renderHistory,
 }: {
   group: ActivityPresentation;
   session?: RelaySession | undefined;
@@ -26,6 +29,7 @@ export function ActivityGroupPreview({
   expanded: boolean;
   onToggle: () => void;
   layout?: "timeline" | "thread";
+  renderHistory?: (row: ChannelMessage) => ReactNode;
 }) {
   const { latest: row, history, participants, done, working } = group;
   const live = useActivityIndicator(
@@ -33,10 +37,10 @@ export function ActivityGroupPreview({
     row,
     !done && !group.followingMessage,
     participants,
+    group.requestId,
   );
   const primary = history[0]?.authorId ?? row.authorId;
   const profile = profiles.get(primary);
-  const motionKey = (author: string) => `${history[0]?.id ?? row.id}:${author}`;
   const name = profile?.name ?? primary.slice(0, 10);
   const text = Array.from(messagePreviewText(row.content).replace(/\s+/g, " "));
   const preview = done
@@ -61,14 +65,25 @@ export function ActivityGroupPreview({
           aria-label={`${expanded ? "Collapse" : "Show"} activity history: ${name}: ${preview}`}
           onClick={(event) => {
             event.currentTarget.focus({ preventScroll: true });
-            toggleActivityHistory(
-              event.currentTarget,
-              onToggle,
-              event.detail === 0,
-              history[0]?.id ?? row.id,
-            );
+            onToggle();
           }}
         >
+          {!done && expanded && (
+            <span className={styles.audienceAvatar}>
+              <Avatar
+                alt=""
+                fallback="Collapse"
+                size="fill"
+                shape="squircle"
+                fallbackContent={
+                  <CaretUpIcon
+                    className={styles.activityDisclosureIcon}
+                    aria-hidden="true"
+                  />
+                }
+              />
+            </span>
+          )}
           <span className={styles.audiencePreviewText}>
             {expanded && !done ? (
               "Collapse"
@@ -90,14 +105,25 @@ export function ActivityGroupPreview({
               id,
               name: profiles.get(id)?.name ?? id.slice(0, 10),
               picture: avatarMedia(profiles.get(id)?.picture, media),
-              motionKey: expanded ? undefined : motionKey(id),
             }))
       }
       stackPrevious={!group.standalone}
       picture={avatarMedia(profile?.picture, media)}
       layout={layout}
     >
-      <div className={styles.standaloneActivity}>{content}</div>
+      <div
+        className={styles.standaloneActivity}
+        data-contained-history={!done || undefined}
+      >
+        {content}
+        {!done && expanded && renderHistory && (
+          <div className={styles.containedActivityHistory}>
+            {history.map((entry) => (
+              <div key={entry.id}>{renderHistory(entry)}</div>
+            ))}
+          </div>
+        )}
+      </div>
     </AgentResponsePreview>
   ) : (
     content
diff --git a/src/features/messages/AgentResponsePreview.tsx b/src/features/messages/AgentResponsePreview.tsx
index 91adc429c6..ed5ce56abb 100644
--- a/src/features/messages/AgentResponsePreview.tsx
+++ b/src/features/messages/AgentResponsePreview.tsx
@@ -19,7 +19,6 @@ export function AgentResponsePreview({
     id: string;
     name: string;
     picture?: string | undefined;
-    motionKey?: string | undefined;
   }[];
   layout?: "timeline" | "thread" | "continuation" | undefined;
   children: ReactNode;
@@ -53,7 +52,6 @@ export function AgentResponsePreview({
                   key={agent.id}
                   className={styles.agentAvatarGroupItem}
                   title={agent.name}
-                  data-avatar-motion-key={agent.motionKey}
                 >
                   <Avatar
                     src={agent.picture}
diff --git a/src/features/messages/ChannelTimeline.tsx b/src/features/messages/ChannelTimeline.tsx
index cde36a5ade..994b2ba5d3 100644
--- a/src/features/messages/ChannelTimeline.tsx
+++ b/src/features/messages/ChannelTimeline.tsx
@@ -31,7 +31,11 @@ import {
   continuesMessageGroup,
   publicMessageNeighbor,
 } from "./message-grouping";
-import type { Attachment, ChannelWindow } from "../relay/contracts";
+import type {
+  Attachment,
+  ChannelMessage,
+  ChannelWindow,
+} from "../relay/contracts";
 import { useRowProfiles } from "../relay/react";
 import { geometryFor, geometrySignature } from "./geometry";
 import { readView, writeView } from "../../shared/view-state";
@@ -257,6 +261,7 @@ function Timeline({
     () => activityDisplayRows(chronologicalRows, activity),
     [chronologicalRows, activity],
   );
+  const lastPublicMessage = publicMessageNeighbor(rows, rows.length, -1);
   // Resolve a saved anchor once, before measuring initial geometry. A bottom
   // restore ignores it; absent/visible anchors must not expand on later loads.
   const [activityRestore, setActivityRestore] = useState(
@@ -279,6 +284,20 @@ function Timeline({
       },
     ]),
   );
+  const containedOwners = useMemo(
+    () =>
+      new Map(
+        activity
+          .filter(
+            (group) =>
+              !group.done && group.ids.some((id) => expandedActivity.has(id)),
+          )
+          .flatMap((group) =>
+            group.ids.map((id) => [id, group.ids[0]] as const),
+          ),
+      ),
+    [activity, expandedActivity],
+  );
   const hiddenActivity = new Set(
     [...disclosures.values()].flatMap((group) =>
       group.expanded ? [] : group.ids,
@@ -336,7 +355,10 @@ function Timeline({
     row.id === focusedActivityId ||
     (disclosures.get(row.id)?.ids[0] === focusedActivityId &&
       !!focusedActivityId) ||
-    pinnedIds.has(row.id)
+    pinnedIds.has(row.id) ||
+    disclosures
+      .get(row.id)
+      ?.ids.some((id) => pinnedIds.has(id) || id === focusedMessageId)
       ? [index]
       : [],
   );
@@ -506,7 +528,9 @@ function Timeline({
     (navigation?.target.kind === "conversation"
       ? navigation.target.messageId
       : undefined);
-  const targetIndex = rows.findIndex((row) => row.id === targetId);
+  const targetIndex = rows.findIndex(
+    (row) => row.id === (containedOwners.get(targetId ?? "") ?? targetId),
+  );
   // The reveal keeps its row in place through late measurement until any newer
   // intent: reader input, a send or Jump to latest.
   const targetIntent = useRef<number | undefined>(undefined);
@@ -608,7 +632,11 @@ function Timeline({
   useLayoutEffect(() => {
     const element = scroller.current;
     const list = element?.querySelector("ol");
-    const index = rows.findIndex((row) => row.id === reader.current.id);
+    const index = rows.findIndex(
+      (row) =>
+        row.id ===
+        (containedOwners.get(reader.current.id ?? "") ?? reader.current.id),
+    );
     if (index < 0) heldReader.current = undefined;
     if (
       prepend ||
@@ -698,7 +726,7 @@ function Timeline({
     element.ownerDocument.addEventListener("pointerup", done);
     element.ownerDocument.addEventListener("pointercancel", done);
     return () => release(true);
-  }, [rows, prepend]);
+  }, [rows, prepend, containedOwners]);
   useLayoutEffect(() => {
     const element = scroller.current;
     if (!element) return;
@@ -787,7 +815,8 @@ function Timeline({
       revealMessageId && revealed.current !== revealMessageId
         ? rows.findIndex(
             (row) =>
-              row.id === revealMessageId ||
+              row.id ===
+                (containedOwners.get(revealMessageId) ?? revealMessageId) ||
               row.membershipRows?.some(
                 (member) => member.id === revealMessageId,
               ),
@@ -855,16 +884,32 @@ function Timeline({
         const index = anchor
           ? rows.findIndex(
               (row) =>
-                row.id === anchor.id ||
+                row.id === (containedOwners.get(anchor.id) ?? anchor.id) ||
                 row.membershipRows?.some((member) => member.id === anchor.id),
             )
           : -1;
         const row = rows[index];
         if (anchor && row) {
-          restoredAnchor.current = { id: row.id, y: anchor.y };
+          restoredAnchor.current = { id: anchor.id, y: anchor.y };
+          const element = scroller.current;
+          const target = containedOwners.has(anchor.id)
+            ? element?.querySelector<HTMLElement>(
+                `[data-message-id="${CSS.escape(anchor.id)}"]`,
+              )
+            : undefined;
+          // A contained step shares its virtual row with earlier history.
+          // Once mounted, include that inner offset in the saved placement.
+          const innerOffset =
+            target && element
+              ? target.getBoundingClientRect().top -
+                element.getBoundingClientRect().top +
+                element.scrollTop -
+                size.edgeHeight -
+                handle.current.getItemOffset(index)
+              : 0;
           handle.current.scrollToIndex(index, {
             align: "start",
-            offset: -anchor.y,
+            offset: innerOffset - anchor.y,
           });
         } else handle.current.scrollTo(restore.offset);
         follow.current = false;
@@ -900,8 +945,12 @@ function Timeline({
           // this parent height. Observing the parent box would create skipped
           // resize notifications; watch only Virtua's committed height instead.
           let height = list.style.height;
-          observer = new MutationObserver(() => {
-            if (list.style.height === height) return;
+          observer = new MutationObserver((records) => {
+            if (
+              list.style.height === height &&
+              !records.some((record) => record.type === "childList")
+            )
+              return;
             height = list.style.height;
             // Capture a native clamp while its shrink is still observable.
             // Another append can grow the list before the queued scroll event.
@@ -920,6 +969,10 @@ function Timeline({
           observer.observe(list, {
             attributes: true,
             attributeFilter: ["style"],
+            childList:
+              !!restore?.anchor && containedOwners.has(restore.anchor.id),
+            subtree:
+              !!restore?.anchor && containedOwners.has(restore.anchor.id),
           });
         }
       }
@@ -954,6 +1007,7 @@ function Timeline({
     revealedSignal,
     updateJumpToLatest,
     revealMessageId,
+    containedOwners,
   ]);
   // After positioning reads it: a load that ends without rows lands no page.
   useLayoutEffect(() => {
@@ -1168,7 +1222,6 @@ function Timeline({
         >
           {rows.map((row, index) => {
             const disclosure = disclosures.get(row.id);
-            const recordedActivity = presentation.byRow.get(row.id);
             const hidden = foldedActivity.has(row.id);
             const previousRow =
               row.audience === "agents"
@@ -1185,6 +1238,55 @@ function Timeline({
                     (rows[index - 1]?.createdAt ?? 0) * 1000,
                   ).toDateString() !==
                   new Date(row.createdAt * 1000).toDateString();
+            const renderMessage = (row: ChannelMessage, inside = false) => {
+              const recordedActivity = presentation.byRow.get(row.id);
+              return (
+                <MessageRow
+                  activityFollows={presentation.completedReplies.has(row.id)}
+                  representedAgents={presentation.representedAgents.get(row.id)}
+                  recordedActivity={
+                    recordedActivity && {
+                      ...recordedActivity,
+                      container: "history",
+                    }
+                  }
+                  stackPrevious={
+                    inside ||
+                    (!!previousRow &&
+                      !foldedActivity.has(previousRow.id) &&
+                      continuesMessageGroup(previousRow, row))
+                  }
+                  stackNext={
+                    inside ||
+                    presentation.bubbleAnchors.has(row.id) ||
+                    (row.id === lastPublicMessage?.id &&
+                      row.audience !== "agents" &&
+                      !row.membership &&
+                      row.authorId === liveAgents[0]) ||
+                    (!!nextRow &&
+                      !foldedActivity.has(nextRow.id) &&
+                      continuesMessageGroup(row, nextRow))
+                  }
+                  session={queries}
+                  scope={scope}
+                  row={row}
+                  unread={queries.unread}
+                  extensions={extensions}
+                  profile={profiles.get(row.authorId)}
+                  participantProfiles={profiles}
+                  agentPubkeys={agentPubkeys}
+                  media={queries.media}
+                  onOpenLink={onOpenLink}
+                  canOpenLink={canOpenLink}
+                  onOpenThread={onOpenThread}
+                  startsThreads={startsThreads}
+                  {...(onOpenMediaReview ? { onOpenMediaReview } : {})}
+                  retry={queries.outbox?.retry}
+                  keepMounted={keepRowMounted}
+                  day={!inside && day && !disclosure}
+                />
+              );
+            };
             return (
               <Fragment key={row.id}>
                 {disclosure && (
@@ -1211,6 +1313,7 @@ function Timeline({
                     <ActivityGroupPreview
                       session={queries}
                       group={disclosure}
+                      renderHistory={(entry) => renderMessage(entry, true)}
                       profiles={profiles}
                       media={queries.media}
                       expanded={disclosure.expanded}
@@ -1230,7 +1333,7 @@ function Timeline({
                   </div>
                 )}
                 <ActivityExpansion
-                  open={!hidden}
+                  open={!hidden && !containedOwners.has(row.id)}
                   enabled={row.audience === "agents"}
                 >
                   {row.membership ? (
@@ -1247,63 +1350,19 @@ function Timeline({
                       canOpenLink={canOpenLink}
                     />
                   ) : (
-                    <MessageRow
-                      activityFollows={presentation.completedReplies.has(
-                        row.id,
-                      )}
-                      representedAgents={presentation.representedAgents.get(
-                        row.id,
-                      )}
-                      recordedActivity={
-                        recordedActivity && {
-                          ...recordedActivity,
-                          container: "history",
-                        }
-                      }
-                      stackPrevious={
-                        !!previousRow &&
-                        !foldedActivity.has(previousRow.id) &&
-                        continuesMessageGroup(previousRow, row)
-                      }
-                      stackNext={
-                        presentation.bubbleAnchors.has(row.id) ||
-                        (index === rows.length - 1 &&
-                          row.audience !== "agents" &&
-                          !row.membership &&
-                          row.authorId === liveAgents[0]) ||
-                        (!!nextRow &&
-                          !foldedActivity.has(nextRow.id) &&
-                          continuesMessageGroup(row, nextRow))
-                      }
-                      session={queries}
-                      scope={scope}
-                      row={row}
-                      unread={queries.unread}
-                      extensions={extensions}
-                      profile={profiles.get(row.authorId)}
-                      participantProfiles={profiles}
-                      agentPubkeys={agentPubkeys}
-                      media={queries.media}
-                      onOpenLink={onOpenLink}
-                      canOpenLink={canOpenLink}
-                      onOpenThread={onOpenThread}
-                      startsThreads={startsThreads}
-                      {...(onOpenMediaReview ? { onOpenMediaReview } : {})}
-                      retry={queries.outbox?.retry}
-                      keepMounted={keepRowMounted}
-                      day={day && !disclosure}
-                    />
+                    renderMessage(row)
                   )}
                 </ActivityExpansion>
                 {index === rows.length - 1 && (
                   <>
                     <TypingIndicator
+                      audience="agents"
                       inFlow
                       session={queries}
                       channelId={channelId}
                       previousAuthor={
-                        row.audience !== "agents" && !row.membership
-                          ? row.authorId
+                        lastPublicMessage && !lastPublicMessage.membership
+                          ? lastPublicMessage.authorId
                           : undefined
                       }
                       openActivity={onOpenLink}
@@ -1319,6 +1378,7 @@ function Timeline({
       )}
       {!rows.length && (
         <TypingIndicator
+          audience="agents"
           inFlow
           session={queries}
           channelId={channelId}
diff --git a/src/features/messages/ChannelTimeline.viewport.test.tsx b/src/features/messages/ChannelTimeline.viewport.test.tsx
index 9b061896aa..06f0e252c2 100644
--- a/src/features/messages/ChannelTimeline.viewport.test.tsx
+++ b/src/features/messages/ChannelTimeline.viewport.test.tsx
@@ -1,6 +1,7 @@
 // @vitest-environment jsdom
 import "@testing-library/jest-dom/vitest";
 import {
+  act,
   cleanup,
   fireEvent,
   render,
@@ -21,6 +22,7 @@ const viewport = vi.hoisted(() => ({
   size: 0,
   start: 0,
   caches: [] as unknown[],
+  scrollToIndex: vi.fn(),
 }));
 // Control the independent virtualizer's public measurement/shift contract.
 // React itself owns the real timeline's refs, render and effect ordering.
@@ -50,7 +52,7 @@ vi.mock("virtua", async () => {
           findItemIndex: () => viewport.start,
           getItemOffset: () => 0,
           scrollTo: vi.fn(),
-          scrollToIndex: vi.fn(),
+          scrollToIndex: viewport.scrollToIndex,
         }),
         [],
       );
@@ -74,7 +76,11 @@ vi.mock("./MessageRow", () => ({
     stackNext: boolean;
     keepMounted: (id: string) => () => void;
   }) => (
-    <li data-stacked={stackPrevious} data-stack-next={stackNext}>
+    <li
+      data-message-id={row.id}
+      data-stacked={stackPrevious}
+      data-stack-next={stackNext}
+    >
       {row.content}
       <button type="button" onClick={() => keepMounted(row.id)}>
         Retain {row.id}
@@ -129,11 +135,12 @@ function activityFixture() {
     rows: ChannelMessage[],
     inlineTarget?: { messageId: string; signal: AbortSignal },
     chatPresentation = true,
+    queries = owner.session,
   ) => (
     <ChannelTimeline
       channelId="alpha"
       scope="activity-folding"
-      queries={owner.session}
+      queries={queries}
       chatPresentation={chatPresentation}
       inlineTarget={inlineTarget}
       window={{
@@ -317,6 +324,61 @@ it.each([1, 4])(
   },
 );
 
+it("keeps ongoing typing in the reply group after completed history", () => {
+  const { owner, updates, content } = activityFixture();
+  try {
+    const history = updates(2);
+    const last = history.at(-1);
+    if (!last) throw new Error("Missing activity");
+    const { audience: _audience, ...reply } = last;
+    const activity = owner.session.agentActivity.snapshot();
+    const snapshot = {
+      ...activity,
+      local: [
+        {
+          scope: "test",
+          agent: reply.authorId,
+          channelId: "alpha",
+          messageId: "request",
+          threadRootId: "request",
+          state: "working" as const,
+          startedAt: 1,
+        },
+      ],
+    };
+    const queries = {
+      ...owner.session,
+      agentActivity: {
+        ...owner.session.agentActivity,
+        snapshot: () => snapshot,
+      },
+    };
+    const view = render(
+      content(
+        [...history, { ...reply, id: "reply", content: "Main reply" }],
+        undefined,
+        true,
+        queries,
+      ),
+    );
+    expect(screen.getByText("2 completed steps")).toBeVisible();
+    expect(
+      screen.getByRole("button", { name: /Activity: .*working/ }),
+    ).toBeVisible();
+    expect(
+      view.container.querySelector(
+        "[data-conversation-activity] [data-agent-response-preview]",
+      ),
+    ).toHaveAttribute("data-stack-previous", "true");
+    expect(screen.getByText("Main reply").closest("li")).toHaveAttribute(
+      "data-stack-next",
+      "true",
+    );
+  } finally {
+    owner.dispose();
+  }
+});
+
 it.each([
   { anchor: "activity-8", expanded: true },
   { anchor: "activity-0", expanded: true },
@@ -436,6 +498,48 @@ it.each([false, true])(
   },
 );
 
+it("restores a contained activity step at its saved offset rather than the group start", () => {
+  const { owner, updates, content } = activityFixture();
+  const frames: FrameRequestCallback[] = [];
+  vi.stubGlobal("requestAnimationFrame", (callback: FrameRequestCallback) => {
+    frames.push(callback);
+    return frames.length;
+  });
+  vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockImplementation(
+    function () {
+      return {
+        top: this.dataset.messageId === "activity-4" ? 240 : 0,
+        left: 0,
+        right: 800,
+        bottom: 0,
+        width: 800,
+        height: 0,
+        x: 0,
+        y: 0,
+        toJSON() {},
+      };
+    },
+  );
+  writeView("activity-folding", "scroll:alpha", {
+    offset: 220,
+    bottom: false,
+    anchor: { id: "activity-4", y: 20 },
+  });
+  try {
+    render(content(updates(9)));
+    viewport.scrollToIndex.mockClear();
+    act(() => {
+      for (const callback of frames.splice(0)) callback(0);
+    });
+    expect(viewport.scrollToIndex).toHaveBeenCalledWith(0, {
+      align: "start",
+      offset: 220,
+    });
+  } finally {
+    owner.dispose();
+  }
+});
+
 it("waits for the first non-empty window to resolve a hidden saved activity anchor", () => {
   const { owner, updates, content } = activityFixture();
   writeView("activity-folding", "scroll:alpha", {
diff --git a/src/features/messages/MessageComposer.test.tsx b/src/features/messages/MessageComposer.test.tsx
index 4f552ec39d..5d1779f806 100644
--- a/src/features/messages/MessageComposer.test.tsx
+++ b/src/features/messages/MessageComposer.test.tsx
@@ -489,6 +489,48 @@ function mount(
   };
 }
 
+it.each([undefined, "thread-root"])(
+  "shows only human typing above the composer in scope %s",
+  (threadRootId) => {
+    const scope = threadRootId ? { threadRootId } : {};
+    const h = mount(scope);
+    const human = "c".repeat(64);
+    h.setProfiles(
+      new Map([
+        [human, { name: "Sam" }],
+        [first.pubkey, { name: "Assistant", isAgent: true }],
+      ]),
+    );
+    const entries = [
+      { pubkey: human, channelId: "channel", ...scope },
+      { pubkey: first.pubkey, channelId: "channel", ...scope },
+      {
+        pubkey: second.pubkey,
+        channelId: "channel",
+        threadRootId: "another-thread",
+      },
+    ];
+    h.retarget({
+      session: {
+        ...h.session,
+        typing: { ...h.session.typing, snapshot: () => entries },
+      },
+    });
+    const status = within(h.container).getByRole("status", {
+      name: "Conversation activity",
+    });
+    expect(status).toHaveTextContent(/^Sam is typing$/);
+    expect(
+      within(h.container).getByText("Sam is typing", {
+        selector: "span[aria-hidden] span",
+      }),
+    ).toBeVisible();
+    expect(
+      within(h.container).queryByRole("button", { name: /Activity:/ }),
+    ).toBeNull();
+  },
+);
+
 it("publishes typing for text edits but not caret-driven token expansion", () => {
   const text = `[Honey](${profileTarget(first.pubkey)})`;
   writeView("scope", "draft:channel", text);
diff --git a/src/features/messages/MessageComposer.tsx b/src/features/messages/MessageComposer.tsx
index 38ac7e9054..2eb171df78 100644
--- a/src/features/messages/MessageComposer.tsx
+++ b/src/features/messages/MessageComposer.tsx
@@ -6,6 +6,7 @@ import { ComposerChatCards } from "./ComposerChatCards";
 import { useConversationPresentation } from "../conversation/ConversationPresentation";
 import { TypingPresentation } from "../conversation/typing-presentation";
 import { useTypingBroadcast } from "./useTypingBroadcast";
+import { TypingIndicator } from "./TypingIndicator";
 import { useEffectEvent } from "react";
 import { useMessageEditScope } from "./MessageEditScope";
 import { useMessageDeletion } from "./MessageManagement";
@@ -2036,6 +2037,14 @@ function Composer({
   if (attachmentsExiting && editing.target) setAttachmentsExiting(false);
   const context = (
     <div className={styles.composerContext}>
+      {!cached && !submission && (
+        <TypingIndicator
+          audience="humans"
+          session={session}
+          channelId={channelId}
+          threadRootId={threadRootId}
+        />
+      )}
       {host && extensions?.accessories && (
         <ComposerAccessories
           registry={extensions.accessories}
diff --git a/src/features/messages/MessageRow.tsx b/src/features/messages/MessageRow.tsx
index 576c6b4128..3ca1f63d2e 100644
--- a/src/features/messages/MessageRow.tsx
+++ b/src/features/messages/MessageRow.tsx
@@ -1351,7 +1351,13 @@ function AgentsMessageRow(props: MessageRowProps) {
   const activity = props.recordedActivity;
   const bubble =
     activity?.container === "bubble" || activity?.container === "standalone";
-  const live = useActivityIndicator(session, row, activity?.ownsLive ?? false);
+  const live = useActivityIndicator(
+    session,
+    row,
+    activity?.ownsLive ?? false,
+    undefined,
+    activity?.requestId,
+  );
   const active = live || (activity?.active ?? false);
   const keepMounted = props.keepMounted;
   useEffect(() => {
@@ -1399,11 +1405,7 @@ function AgentsMessageRow(props: MessageRowProps) {
       ? `${addressedPreview.slice(0, 279).join("")}…`
       : addressedPreview.join("");
   const avatar = (who: typeof author) => (
-    <span
-      className={styles.audienceAvatar}
-      title={who.name}
-      data-avatar-motion-key={activity?.motionKey}
-    >
+    <span className={styles.audienceAvatar} title={who.name}>
       <AgentAvatar
         session={session}
         agentPubkey={who.pubkey}
@@ -1505,7 +1507,6 @@ function AgentsMessageRow(props: MessageRowProps) {
             id: author.pubkey,
             name: author.name,
             picture: author.picture,
-            motionKey: activity?.motionKey,
           },
         ]}
         stackPrevious={activity?.container !== "standalone"}
diff --git a/src/features/messages/Messages.module.css b/src/features/messages/Messages.module.css
index e07d23fb81..08da149748 100644
--- a/src/features/messages/Messages.module.css
+++ b/src/features/messages/Messages.module.css
@@ -3467,13 +3467,6 @@ html[data-keyboard-navigation]
   max-width: calc(100% - var(--size-control));
 }
 
-/* Shared-position avatar motion owns this toggle; avoid competing height motion. */
-[data-activity-matching] .activityExpansion {
-  transition: none;
-}
-[data-activity-matching] .activityExpansionContent {
-  overflow: visible;
-}
 html[data-keyboard-navigation] .activityExpansion {
   transition: none;
 }
@@ -3522,9 +3515,17 @@ html[data-keyboard-navigation] .activityExpansion {
 .standaloneActivity .audienceRow .audiencePreviewText {
   display: block;
 }
+.containedActivityHistory .audienceRow .audienceEntry {
+  max-inline-size: 100%;
+  padding-inline-start: 0;
+}
 .standaloneActivity .audienceRow[data-open] .audienceEntry {
   display: flex;
 }
+.containedActivityHistory .audienceRow .audienceLine {
+  margin: 0;
+  padding: 0;
+}
 .standaloneActivity .audienceRow[data-open] .audienceLine {
   order: 1;
   color: var(--text-subtle);
@@ -3536,6 +3537,8 @@ html[data-keyboard-navigation] .activityExpansion {
 
 /* The pending response and a recorded step share a normal message line box. */
 .message[data-agent-response-preview] .messageBubble {
+  background: transparent;
+  box-shadow: inset 0 0 0 1px var(--border-standard);
   font-size: var(--text-message);
   line-height: var(--text-message--line-height);
   letter-spacing: var(--text-message--letter-spacing);
@@ -3606,3 +3609,50 @@ html[data-keyboard-navigation] .activityExpansion {
     transition: none;
   }
 }
+
+.activityDisclosureIcon {
+  flex: none;
+  width: var(--space-4);
+  height: var(--space-4);
+  color: var(--text-subtle);
+}
+.standaloneActivity[data-contained-history]
+  .audienceLine[data-collapse]::after {
+  display: none;
+}
+.containedActivityHistory {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-half);
+  padding-block-start: var(--space-2);
+}
+.containedActivityHistory .audienceRow:has(.audienceBody) .audienceEntry {
+  display: grid;
+  grid-template-columns: calc(var(--space-6) + var(--space-2)) minmax(0, 1fr);
+}
+
+/* A message interaction uses the bubble's type and inset, not control sizing. */
+.activityBubbleTrigger {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  max-width: 100%;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  font: inherit;
+  letter-spacing: inherit;
+  text-align: start;
+  cursor: pointer;
+}
+
+/* Activity interactions paint their shared bubble, never a second pill inside it. */
+.message[data-agent-response-preview] .audienceLine:hover {
+  background: none;
+}
+@media (hover: hover) and (pointer: fine) {
+  .message[data-agent-response-preview] .messageBubble:hover {
+    background: var(--affordance-subtle-hover);
+  }
+}
diff --git a/src/features/messages/ThreadPanel.test.tsx b/src/features/messages/ThreadPanel.test.tsx
index b4d5b8a741..ad01c8c4b2 100644
--- a/src/features/messages/ThreadPanel.test.tsx
+++ b/src/features/messages/ThreadPanel.test.tsx
@@ -1692,6 +1692,43 @@ it("a retained reader reveals its exact selected message, again for each new req
   expect(revealedReply()).toBe(false);
 });
 
+it("reopens collapsed activity for a new reveal of the same step", async () => {
+  const h = messagesHarness();
+  const replies = ["d", "e"].map((id, index) => ({
+    ...row,
+    id: id.repeat(64),
+    content: `Agent step ${index}`,
+    audience: "agents" as const,
+    threadRootId: row.id,
+    replyToId: row.id,
+    createdAt: 2 + index,
+  }));
+  h.snapshot.replies = replies;
+  h.snapshot.target = replies[1];
+  h.snapshot.targetStatus = "ready";
+  const props = h.props as ThreadPanelProps;
+  Object.assign(props, {
+    messageId: replies[1].id,
+    retainThread: true,
+    revealSelected: true,
+    revealRequest: 1,
+  });
+  h.render();
+  fireEvent.click(
+    await screen.findByRole("button", { name: /Collapse activity history/ }),
+  );
+  expect(
+    screen.getByRole("button", { name: /Show activity history/ }),
+  ).toHaveAttribute("aria-expanded", "false");
+  props.revealRequest = 2;
+  h.rerenderProps();
+  await waitFor(() =>
+    expect(
+      screen.getByRole("button", { name: /Collapse activity history/ }),
+    ).toHaveAttribute("aria-expanded", "true"),
+  );
+});
+
 it("an unrouted retained opening retries allocation locally", () => {
   const h = messagesHarness();
   const navigationRetry = vi.fn();
diff --git a/src/features/messages/ThreadPanel.tsx b/src/features/messages/ThreadPanel.tsx
index 4097764c5b..1c55d9ab7f 100644
--- a/src/features/messages/ThreadPanel.tsx
+++ b/src/features/messages/ThreadPanel.tsx
@@ -586,21 +586,22 @@ function ThreadMessages({
   const [expandedActivity, setExpandedActivity] = useState<ReadonlySet<string>>(
     new Set(),
   );
-  const activityVisit = useRef<string | undefined>(undefined);
+  const activityVisit = useRef<unknown[]>([]);
   useLayoutEffect(() => {
+    const request = [messageId, navigation?.signal, revealRequest];
     if (
       !messageId ||
-      activityVisit.current === messageId ||
+      request.every((part, index) => part === activityVisit.current[index]) ||
       !snapshot.replies.some((row) => row.id === messageId)
     )
       return;
-    activityVisit.current = messageId;
+    activityVisit.current = request;
     const group = [...tree.children.values()]
       .flatMap((rows) => activityRuns(rows))
       .find((group) => group.some((row) => row.id === messageId));
     const first = group?.[0]?.id;
     if (first) setExpandedActivity((current) => new Set([...current, first]));
-  }, [messageId, snapshot.replies, tree]);
+  }, [messageId, navigation?.signal, revealRequest, snapshot.replies, tree]);
   const [expanded, setExpanded] = useState<ReadonlySet<string>>(new Set());
   const [replyParent, setReplyParent] = useState<string>();
   const resolveName = useChannelIdentityNames(session, channelId);
@@ -719,7 +720,7 @@ function ThreadMessages({
   // within this commit/layout expansion; a later user expansion must not restore it.
   const selectedBranchRef = useMemo(() => {
     let restore = false;
-    return (branch: HTMLLIElement | null) => {
+    return (branch: HTMLElement | null) => {
       if (!branch) return;
       const row = branch.querySelector<HTMLElement>("[data-message-id]");
       if (
@@ -908,7 +909,7 @@ function ThreadMessages({
     channelId,
     rootId,
   );
-  const lastMessage = rows.at(-1);
+  const lastMessage = publicMessageNeighbor(rows, rows.length, -1);
   const joinsLive =
     !!lastMessage &&
     !lastMessage.membership &&
@@ -1275,6 +1276,9 @@ function ThreadMessages({
     const siblings = activityDisplayRows(chronologicalSiblings, groups);
     const groupsByFirst = new Map(groups.map((group) => [group.ids[0], group]));
     const groupedIds = new Set(groups.flatMap((group) => group.ids));
+    const containedActivity = new Set(
+      groups.filter((group) => !group.done).flatMap((group) => group.ids),
+    );
     const hidden = new Set(
       groups.flatMap((group) =>
         expandedActivity.has(group.ids[0] ?? "") ? [] : group.ids,
@@ -1282,7 +1286,6 @@ function ThreadMessages({
     );
     return siblings.map((row, index) => {
       const group = groupsByFirst.get(row.id);
-      const recordedActivity = presentation.byRow.get(row.id);
       if (hidden.has(row.id) && !group) return null;
       const nextRow =
         row.audience === "agents"
@@ -1313,11 +1316,9 @@ function ThreadMessages({
       const unreadLabel = unreadCount
         ? `${unreadCount} new in available replies`
         : undefined;
-      const message = (
-        <ActivityExpansion
-          open={!hidden.has(row.id)}
-          enabled={row.audience === "agents"}
-        >
+      const renderMessage = (row: ChannelMessage, inside = false) => {
+        const recordedActivity = presentation.byRow.get(row.id);
+        return (
           <MessageRow
             activityFollows={presentation.completedReplies.has(row.id)}
             representedAgents={presentation.representedAgents.get(row.id)}
@@ -1338,8 +1339,9 @@ function ThreadMessages({
             }
             row={row}
             getThreadRoot={getThreadRoot}
-            stackPrevious={continuation}
+            stackPrevious={inside || continuation}
             stackNext={
+              inside ||
               presentation.bubbleAnchors.has(row.id) ||
               (joinsLive && row.id === lastMessage?.id) ||
               (!!nextRow &&
@@ -1352,7 +1354,7 @@ function ThreadMessages({
             media={session.media}
             onOpenLink={onOpenLink}
             canOpenLink={canOpenLink}
-            day={day}
+            day={!inside && day}
             layout={continuation ? "continuation" : "thread"}
             compactAvatar={depth > 0}
             retry={session.messages.retry}
@@ -1361,12 +1363,24 @@ function ThreadMessages({
               ? { onOpenMediaReview: openRootMedia }
               : {})}
           />
+        );
+      };
+      const message = (
+        <ActivityExpansion
+          open={!hidden.has(row.id) && !containedActivity.has(row.id)}
+          enabled={row.audience === "agents"}
+        >
+          {renderMessage(row)}
         </ActivityExpansion>
       );
       return (
         <li
           key={row.id}
-          ref={row.id === messageId ? selectedBranchRef : undefined}
+          ref={
+            row.id === messageId && !containedActivity.has(row.id)
+              ? selectedBranchRef
+              : undefined
+          }
           className={styles.replyItem}
           data-layout={continuation ? "continuation" : "thread"}
         >
@@ -1384,6 +1398,13 @@ function ThreadMessages({
               <ActivityGroupPreview
                 session={session}
                 group={group}
+                renderHistory={(entry) => (
+                  <div
+                    ref={entry.id === messageId ? selectedBranchRef : undefined}
+                  >
+                    {renderMessage(entry, true)}
+                  </div>
+                )}
                 profiles={profiles}
                 media={session.media}
                 layout="thread"
@@ -1657,6 +1678,7 @@ function ThreadMessages({
           )}
         {!positioning && rootId && (
           <TypingIndicator
+            audience="agents"
             inFlow
             session={session}
             channelId={channelId}
diff --git a/src/features/messages/TypingIndicator.module.css b/src/features/messages/TypingIndicator.module.css
index 0c63a44649..b07e64d8b5 100644
--- a/src/features/messages/TypingIndicator.module.css
+++ b/src/features/messages/TypingIndicator.module.css
@@ -76,40 +76,14 @@
   padding: 0;
 }
 
-/* Align the label with bubble text; dots sit just before that text column. */
-.typing[data-in-flow] .humans {
-  position: relative;
-  margin-inline-start: calc(
-    var(--size-control) +
-    var(--space-3) +
-    var(--space-4)
-  );
-  padding-inline: 0;
-}
-.typing[data-in-flow][data-layout="thread"] .humans {
-  margin-inline-start: calc(
-    var(--size-control-sm) +
-    var(--space-2) +
-    var(--space-4)
-  );
-}
-.typing[data-in-flow] .humans .dots {
+/* Human presence stays anchored above the composer, outside the scrolling feed. */
+.typing[data-audience="humans"] {
   position: absolute;
-  inset-inline-end: calc(100% + var(--space-2));
-}
-
-/* A message interaction uses the bubble's type and inset, not control sizing. */
-.bubbleTrigger {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-  max-width: 100%;
+  inset-block-end: calc(100% + var(--space-half));
+  inset-inline: var(--space-4);
+  inline-size: min(calc(100% - 2 * var(--space-4)), 52rem);
+  margin-inline: auto;
+  z-index: 1;
   padding: 0;
-  border: 0;
-  background: none;
-  color: inherit;
-  font: inherit;
-  letter-spacing: inherit;
-  text-align: start;
-  cursor: pointer;
+  pointer-events: none;
 }
diff --git a/src/features/messages/TypingIndicator.test.tsx b/src/features/messages/TypingIndicator.test.tsx
index 4d6d8bd37b..ebcaa03571 100644
--- a/src/features/messages/TypingIndicator.test.tsx
+++ b/src/features/messages/TypingIndicator.test.tsx
@@ -239,6 +239,14 @@ it("shows stable agent ordering, scopes humans exactly, and clears after work st
   expect(
     screen.getByRole("button", { name: "Activity: Agent working" }),
   ).toBeVisible();
+  view.rerender(
+    <TypingIndicator {...props} threadRootId={root} audience="agents" inFlow />,
+  );
+  expect(screen.getByRole("status")).toHaveTextContent(/^Agent is working$/);
+  expect(screen.queryByText("Human is typing")).toBeNull();
+  expect(
+    screen.getByRole("button", { name: "Activity: Agent working" }),
+  ).toBeVisible();
   f.update([]);
   expect(screen.getByRole("status")).toBeEmptyDOMElement();
   expect(screen.queryByRole("dialog")).toBeNull();
@@ -668,9 +676,14 @@ it("Solo chat ArrowDown exposes retained thread navigation without opening Activ
   expect(trigger).toHaveFocus();
 });
 
-it.each([false, true])(
-  "hands live signals to visible activity and restores dots when it leaves (team=%s)",
-  (team) => {
+it.each([
+  { team: false, local: false },
+  { team: true, local: false },
+  { team: false, local: true },
+  { team: true, local: true },
+])(
+  "hands live signals to visible activity and restores dots when it leaves (team=$team, local=$local)",
+  ({ team, local }) => {
     const f = fixture();
     const row: ChannelMessage = {
       id: "step",
@@ -685,8 +698,13 @@ it.each([false, true])(
       participants: [],
       replyCount: 0,
     };
+    const { audience: _audience, ...request } = row;
     const group = activityPresentation(
-      [{ ...row, id: "first", authorId: team ? other : agent }, row],
+      [
+        { ...request, id: root, authorId: human },
+        { ...row, id: "first", authorId: team ? other : agent },
+        row,
+      ],
       undefined,
       new Set([agent]),
     ).groups[0];
@@ -710,7 +728,18 @@ it.each([false, true])(
       { pubkey: agent, channelId: "channel" },
       ...(team ? [{ pubkey: other, channelId: "channel" }] : []),
     ];
-    f.update(pulses);
+    const work: NonNullable<Snapshot["local"]> = local
+      ? pulses.map(({ pubkey }) => ({
+          scope: "test",
+          agent: pubkey,
+          channelId: "channel",
+          messageId: root,
+          threadRootId: root,
+          state: "working",
+          startedAt: 1,
+        }))
+      : [];
+    f.update(pulses, { local: work });
     const view = render(renderFlow(false));
     expect(
       screen.getByRole("button", {
@@ -725,16 +754,35 @@ it.each([false, true])(
       "data-active",
       "true",
     );
-    f.update([
-      { pubkey: agent, channelId: "channel", threadRootId: secondRoot },
-    ]);
+    if (!local) {
+      f.update([...pulses, entry(agent, secondRoot)]);
+      expect(
+        screen.getByRole("button", { name: "Activity: Agent working" }),
+      ).toBeVisible();
+      expect(screen.getByText("Checking the fix")).toHaveAttribute(
+        "data-active",
+        "true",
+      );
+    }
+    f.update(
+      [{ pubkey: agent, channelId: "channel", threadRootId: secondRoot }],
+      {
+        local: work
+          .filter((entry) => entry.agent === agent)
+          .map((entry) => ({
+            ...entry,
+            messageId: secondRoot,
+            threadRootId: secondRoot,
+          })),
+      },
+    );
     expect(
       screen.getByRole("button", { name: "Activity: Agent working" }),
     ).toBeVisible();
     expect(screen.getByText("Checking the fix")).not.toHaveAttribute(
       "data-active",
     );
-    f.update([{ pubkey: agent, channelId: "channel" }]);
+    f.update([{ pubkey: agent, channelId: "channel" }], { local: [] });
     view.rerender(renderFlow(false));
     expect(
       screen.getByRole("button", { name: "Activity: Agent working" }),
diff --git a/src/features/messages/TypingIndicator.tsx b/src/features/messages/TypingIndicator.tsx
index 15482bacbb..34702b00ba 100644
--- a/src/features/messages/TypingIndicator.tsx
+++ b/src/features/messages/TypingIndicator.tsx
@@ -1,3 +1,4 @@
+import messageStyles from "./Messages.module.css";
 import { useReplacedTypers } from "../conversation/typing-presentation";
 import { useChannelIdentityNames } from "../identity-names/react";
 import {
@@ -86,7 +87,9 @@ export function TypingIndicator({
   openActivity,
   previousAuthor,
   inFlow = false,
+  audience = "all",
 }: {
+  audience?: "all" | "humans" | "agents";
   previousAuthor?: string | undefined;
   inFlow?: boolean;
   clickOpensPanel?: boolean | undefined;
@@ -98,15 +101,21 @@ export function TypingIndicator({
     | ((target: string, origin?: MessageLinkOrigin) => boolean)
     | undefined;
 }) {
-  const { details, entries, replaced, agents, knownAgents } =
-    useConversationAgents(session, channelId, threadRootId);
+  const {
+    details,
+    entries,
+    replaced,
+    agents: activeAgents,
+    knownAgents,
+  } = useConversationAgents(session, channelId, threadRootId);
+  const agents = audience === "humans" ? [] : activeAgents;
   const resolveName = useChannelIdentityNames(session, channelId);
   const profiles = useSyncExternalStore(
     session.profiles.subscribe,
     session.profiles.snapshot,
   );
   // Read only the already-loaded channel window to name threads. No ensure/read.
-  const needsRows = details.size > 0 && !threadRootId;
+  const needsRows = agents.length > 0 && !threadRootId;
   const subscribeRows = useCallback(
     (listener: () => void) =>
       needsRows
@@ -126,6 +135,7 @@ export function TypingIndicator({
   const firstAgent = agents[0];
   const humans = entries.filter(
     (entry) =>
+      audience !== "agents" &&
       entry.channelId === channelId &&
       entry.threadRootId === threadRootId &&
       !knownAgents.has(entry.pubkey) &&
@@ -230,6 +240,7 @@ export function TypingIndicator({
       {(agents.length > 0 || humans.length > 0) && (
         <div
           className={styles.typing}
+          data-audience={audience}
           data-in-flow={inFlow || undefined}
           data-layout={threadRootId ? "thread" : "timeline"}
           data-conversation-activity=""
@@ -398,7 +409,7 @@ function AgentChooser({
           <button
             type="button"
             data-buzz-ui=""
-            className={styles.bubbleTrigger}
+            className={messageStyles.activityBubbleTrigger}
             aria-label={label}
             data-agent-activity-trigger=""
             aria-keyshortcuts={directTarget ? "ArrowDown" : undefined}
diff --git a/src/features/messages/activity-avatar-motion.ts b/src/features/messages/activity-avatar-motion.ts
deleted file mode 100644
index 623489b2ac..0000000000
--- a/src/features/messages/activity-avatar-motion.ts
+++ /dev/null
@@ -1,124 +0,0 @@
-import { spring } from "motion";
-import styles from "./Messages.module.css";
-import { flushSync } from "react-dom";
-const running = new WeakMap<HTMLElement, Animation[]>();
-function avatars(scope: HTMLElement, group: string) {
-  return new Map(
-    [...scope.querySelectorAll<HTMLElement>("[data-avatar-motion-key]")]
-      .filter(
-        (node) =>
-          node.dataset.avatarMotionKey?.startsWith(`${group}:`) &&
-          !node.closest("[inert]") &&
-          node.getBoundingClientRect().height > 0,
-      )
-      .map((node) => [node.dataset.avatarMotionKey ?? "", node]),
-  );
-}
-
-/** FLIP only the avatar artwork. No new layout engine or animation dependency. */
-export function toggleActivityHistory(
-  button: HTMLButtonElement,
-  toggle: () => void,
-  keyboard: boolean,
-  group: string,
-) {
-  const scope = button.closest<HTMLElement>("[data-activity-history-scope]");
-  const view = button.ownerDocument.defaultView;
-  if (!scope || !view) return toggle();
-  const visibleRows = new Set(
-    [...scope.querySelectorAll<HTMLElement>('[data-audience="agents"]')].filter(
-      (node) => !node.closest("[inert]"),
-    ),
-  );
-  const before = new Map(
-    [...avatars(scope, group)].map(([key, node]) => [
-      key,
-      node.getBoundingClientRect(),
-    ]),
-  );
-  for (const animation of running.get(scope) ?? []) animation.cancel();
-  running.delete(scope);
-  delete scope.dataset.activityMatching;
-  if (
-    keyboard ||
-    view.matchMedia("(prefers-reduced-motion: reduce)").matches ||
-    typeof button.animate !== "function"
-  )
-    return toggle();
-  scope.dataset.activityMatching = "";
-  flushSync(toggle);
-  // Match the composer's gentle spring, sampled for native WAAPI playback.
-  const duration = 240;
-  const curve = spring({ keyframes: [0, 1], duration, bounce: 0.15 });
-  const easing = `linear(${Array.from({ length: 31 }, (_, index) =>
-    index === 30 ? 1 : curve.next((index * duration) / 30).value,
-  ).join(", ")})`;
-  const animations: Animation[] = [];
-  for (const [key, node] of avatars(scope, group)) {
-    const from = before.get(key);
-    const to = node.getBoundingClientRect();
-    if (!to.width || !to.height) continue;
-    if (from && (Math.abs(from.x - to.x) > 1 || Math.abs(from.y - to.y) > 1)) {
-      const artwork = node.firstElementChild;
-      if (artwork instanceof HTMLElement)
-        animations.push(
-          artwork.animate(
-            [
-              { filter: "blur(0px)", transform: "scale(1, 1)" },
-              {
-                filter: "blur(0.7px)",
-                transform: "scale(0.97, 1.03)",
-                offset: 0.35,
-              },
-              { filter: "blur(0px)", transform: "scale(1, 1)" },
-            ],
-            { duration, easing: "ease-out", fill: "both" },
-          ),
-        );
-    }
-    // The cluster's resting transform places and sizes each avatar. Preserve it
-    // at both endpoints so collapsing does not briefly expand every item to full size.
-    const transform = view.getComputedStyle(node).transform || "none";
-    animations.push(
-      node.animate(
-        from
-          ? [
-              {
-                transform: `translate(${from.x - to.x}px, ${from.y - to.y}px) ${transform === "none" ? "" : transform} scale(${from.width / to.width}, ${from.height / to.height})`,
-                transformOrigin: "top left",
-              },
-              { transform, transformOrigin: "top left" },
-            ]
-          : [{ opacity: 0 }, { opacity: 1 }],
-        { duration, easing, fill: "both" },
-      ),
-    );
-  }
-  for (const row of scope.querySelectorAll<HTMLElement>(
-    '[data-audience="agents"]',
-  )) {
-    if (visibleRows.has(row) || row.closest("[inert]")) continue;
-    const text = row.querySelector<HTMLElement>(
-      `.${styles.audiencePreviewText}`,
-    );
-    if (text)
-      animations.push(
-        text.animate(
-          [
-            { transform: "translateY(4px)", opacity: 0 },
-            { transform: "none", opacity: 1 },
-          ],
-          { duration, easing, fill: "both" },
-        ),
-      );
-  }
-  running.set(scope, animations);
-  void Promise.all(
-    animations.map((animation) => animation.finished.catch(() => {})),
-  ).then(() => {
-    if (running.get(scope) !== animations) return;
-    for (const animation of animations) animation.cancel();
-    running.delete(scope);
-    delete scope.dataset.activityMatching;
-  });
-}
diff --git a/src/features/messages/activity-presentation.ts b/src/features/messages/activity-presentation.ts
index 4c64b95eb5..576265d9f0 100644
--- a/src/features/messages/activity-presentation.ts
+++ b/src/features/messages/activity-presentation.ts
@@ -22,10 +22,10 @@ export type ActivityPresentation = ActivityRun & {
   completedReply: ChannelMessage | undefined;
 };
 export type ActivityRowPresentation = {
+  requestId: string | undefined;
   active: boolean;
   ownsLive: boolean;
   container: "history" | "bubble" | "standalone";
-  motionKey: string | undefined;
 };
 const noSubscribe = () => () => {};
 const noActivity = () => undefined;
@@ -148,6 +148,7 @@ export function activityPresentation(
     for (const row of history) {
       const last = lastByAgent.get(row.authorId) === row.id;
       byRow.set(row.id, {
+        requestId: group.requestId,
         active: last && working.has(row.authorId),
         ownsLive: last && !done && !group.followingMessage,
         container:
@@ -156,7 +157,6 @@ export function activityPresentation(
             : !done || standalone
               ? "bubble"
               : "history",
-        motionKey: last ? `${first.id}:${row.authorId}` : undefined,
       });
     }
     groups.push({
diff --git a/src/features/messages/use-activity-indicator.ts b/src/features/messages/use-activity-indicator.ts
index ce85e61701..4b263ebdd7 100644
--- a/src/features/messages/use-activity-indicator.ts
+++ b/src/features/messages/use-activity-indicator.ts
@@ -14,6 +14,7 @@ export function useActivityIndicator(
   row: ChannelMessage,
   eligible: boolean,
   participants?: readonly string[],
+  requestId?: string,
 ) {
   const typing = useSyncExternalStore(
     session?.typing?.subscribe ?? noSubscribe,
@@ -33,14 +34,19 @@ export function useActivityIndicator(
         row.threadRootId,
       )
     : undefined;
-  const liveAgents = [...(detail ?? [])]
-    .filter(
-      ([agent, value]) =>
-        represented.has(agent) &&
-        value.roots.includes(row.threadRootId ?? null),
-    )
+  // Top-level harness work uses its triggering request as the root, while its
+  // published channel activity has no thread root. Match that known request,
+  // never an arbitrary working thread in the same channel.
+  const matches = (root: string | null | undefined) =>
+    root === (row.threadRootId ?? null) ||
+    (!row.threadRootId && !!requestId && root === requestId);
+  const liveDetails = [...(detail ?? [])].filter(
+    ([agent, value]) => represented.has(agent) && value.roots.some(matches),
+  );
+  const liveAgents = liveDetails
+    .filter(([, value]) => value.roots.every(matches))
     .map(([agent]) => agent);
-  const live = liveAgents.length > 0;
+  const live = liveDetails.length > 0;
   useActivityTypingReplacement(
     session
       ? {
diff --git a/src/shared/design-system/DESIGN.md b/src/shared/design-system/DESIGN.md
index b0ad13574f..8cfa65fc5b 100644
--- a/src/shared/design-system/DESIGN.md
+++ b/src/shared/design-system/DESIGN.md
@@ -1518,6 +1518,8 @@ need their own values in each mode.
 Received message bubbles use `bubble-received`, slightly stronger than quiet
 control fills. Reply connectors and thread spines use `border-message-thread`
 to remain visible on conversation surfaces in both modes.
+Agent activity bubbles use a transparent fill with a 1px inset `border-standard`
+stroke, keeping their dimensions consistent with filled message bubbles.
 
 ### Accent color
 
@@ -1575,7 +1577,7 @@ that adds no useful information.
 ### Activity dots
 
 `TypingDots` owns the shared decorative activity motion. Use `size="message"`
-for 6px dots with 4px gaps inside a message line; compact indicators retain their existing sizes. `state="waiting"`
+for 4px dots with 4px gaps inside a message line; compact indicators retain their existing sizes. `state="waiting"`
 breathes all three dots together over 2.4 seconds for a received request waiting
 to start. `state="working"` (the default) preserves the 1.4-second staggered fade.
 Switching state keeps the same footprint. These named component rhythms are
diff --git a/src/shared/design-system/ui/TypingDots.module.css b/src/shared/design-system/ui/TypingDots.module.css
index 8a7e1ce3ac..4f7eb7ba95 100644
--- a/src/shared/design-system/ui/TypingDots.module.css
+++ b/src/shared/design-system/ui/TypingDots.module.css
@@ -60,6 +60,6 @@
   gap: var(--space-1);
 }
 .dots[data-size="message"] > span {
-  width: var(--space-1h);
-  height: var(--space-1h);
+  width: var(--space-1);
+  height: var(--space-1);
 }

From f4209f8889ead57d6aa6562367ee05888b9c744f Mon Sep 17 00:00:00 2001
From: Arjun Mahanti <arjun@squareup.com>
Date: Wed, 28 Oct 2026 15:03:53 -0400
Subject: [PATCH 14/19] Type navigation regression fixture inputs explicitly

Co-authored-by: OpenAI Codex <noreply@openai.com>
Signed-off-by: Arjun Mahanti <arjun@squareup.com>
---
 src/features/messages/ChannelTimeline.viewport.test.tsx | 2 +-
 src/features/messages/ThreadPanel.test.tsx              | 6 ++++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/features/messages/ChannelTimeline.viewport.test.tsx b/src/features/messages/ChannelTimeline.viewport.test.tsx
index 06f0e252c2..19dd8ff2d8 100644
--- a/src/features/messages/ChannelTimeline.viewport.test.tsx
+++ b/src/features/messages/ChannelTimeline.viewport.test.tsx
@@ -506,7 +506,7 @@ it("restores a contained activity step at its saved offset rather than the group
     return frames.length;
   });
   vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockImplementation(
-    function () {
+    function (this: HTMLElement) {
       return {
         top: this.dataset.messageId === "activity-4" ? 240 : 0,
         left: 0,
diff --git a/src/features/messages/ThreadPanel.test.tsx b/src/features/messages/ThreadPanel.test.tsx
index a20139e5e6..6692d38183 100644
--- a/src/features/messages/ThreadPanel.test.tsx
+++ b/src/features/messages/ThreadPanel.test.tsx
@@ -1703,12 +1703,14 @@ it("reopens collapsed activity for a new reveal of the same step", async () => {
     replyToId: row.id,
     createdAt: 2 + index,
   }));
+  const target = replies[1];
+  if (!target) throw new Error("Missing activity fixture target");
   h.snapshot.replies = replies;
-  h.snapshot.target = replies[1];
+  h.snapshot.target = target;
   h.snapshot.targetStatus = "ready";
   const props = h.props as ThreadPanelProps;
   Object.assign(props, {
-    messageId: replies[1].id,
+    messageId: target.id,
     retainThread: true,
     revealSelected: true,
     revealRequest: 1,

From a1ac7c07117c7f40d002b400d5e02e12e04f137e Mon Sep 17 00:00:00 2001
From: Arjun Mahanti <arjun@squareup.com>
Date: Wed, 28 Oct 2026 15:18:09 -0400
Subject: [PATCH 15/19] Preserve timeline restoration across unchanged activity
 projections

Co-authored-by: OpenAI Codex <noreply@openai.com>
Signed-off-by: Arjun Mahanti <arjun@squareup.com>
---
 .../messages/ChannelTimeline.test.tsx         | 11 ++++--
 src/features/messages/ChannelTimeline.tsx     | 36 +++++++++++--------
 2 files changed, 30 insertions(+), 17 deletions(-)

diff --git a/src/features/messages/ChannelTimeline.test.tsx b/src/features/messages/ChannelTimeline.test.tsx
index 7dae30637b..efa17c733a 100644
--- a/src/features/messages/ChannelTimeline.test.tsx
+++ b/src/features/messages/ChannelTimeline.test.tsx
@@ -184,12 +184,15 @@ function setup({
     for (const [callback, targets] of observers)
       if (targets.has(target)) callback();
   };
-  const mutations = new Map<() => void, Map<unknown, MutationObserverInit>>();
+  const mutations = new Map<
+    (records: MutationRecord[]) => void,
+    Map<unknown, MutationObserverInit>
+  >();
   vi.stubGlobal(
     "MutationObserver",
     class {
       targets = new Map<unknown, MutationObserverInit>();
-      constructor(callback: () => void) {
+      constructor(callback: (records: MutationRecord[]) => void) {
         mutations.set(callback, this.targets);
       }
       observe(target: unknown, options: MutationObserverInit) {
@@ -205,7 +208,9 @@ function setup({
     for (const [callback, targets] of mutations) {
       const options = targets.get(list);
       if (options?.attributes && options.attributeFilter?.includes("style"))
-        callback();
+        callback([
+          { type: "attributes", attributeName: "style" } as MutationRecord,
+        ]);
     }
   };
   const element = {
diff --git a/src/features/messages/ChannelTimeline.tsx b/src/features/messages/ChannelTimeline.tsx
index b6072f2bc7..8a9f77958e 100644
--- a/src/features/messages/ChannelTimeline.tsx
+++ b/src/features/messages/ChannelTimeline.tsx
@@ -284,20 +284,25 @@ function Timeline({
       },
     ]),
   );
-  const containedOwners = useMemo(
-    () =>
-      new Map(
-        activity
-          .filter(
-            (group) =>
-              !group.done && group.ids.some((id) => expandedActivity.has(id)),
-          )
-          .flatMap((group) =>
-            group.ids.map((id) => [id, group.ids[0]] as const),
-          ),
-      ),
-    [activity, expandedActivity],
+  const containedOwnerCache = useRef(new Map<string, string | undefined>());
+  const nextContainedOwners = new Map(
+    activity
+      .filter(
+        (group) =>
+          !group.done && group.ids.some((id) => expandedActivity.has(id)),
+      )
+      .flatMap((group) => group.ids.map((id) => [id, group.ids[0]] as const)),
   );
+  // Profile/status refreshes can rebuild the projection without moving rows.
+  // Only restart positioning effects when their virtual ownership changes.
+  if (
+    nextContainedOwners.size !== containedOwnerCache.current.size ||
+    [...nextContainedOwners].some(
+      ([id, owner]) => containedOwnerCache.current.get(id) !== owner,
+    )
+  )
+    containedOwnerCache.current = nextContainedOwners;
+  const containedOwners = containedOwnerCache.current;
   const hiddenActivity = new Set(
     [...disclosures.values()].flatMap((group) =>
       group.expanded ? [] : group.ids,
@@ -906,7 +911,10 @@ function Timeline({
           : -1;
         const row = rows[index];
         if (anchor && row) {
-          restoredAnchor.current = { id: anchor.id, y: anchor.y };
+          restoredAnchor.current = {
+            id: containedOwners.has(anchor.id) ? anchor.id : row.id,
+            y: anchor.y,
+          };
           const element = scroller.current;
           const target = containedOwners.has(anchor.id)
             ? element?.querySelector<HTMLElement>(

From e872c114a68fb17501e28b9858d36462812f23da Mon Sep 17 00:00:00 2001
From: Arjun Mahanti <arjun@squareup.com>
Date: Thu, 29 Oct 2026 11:07:04 -0400
Subject: [PATCH 16/19] Simplify activity controls and retire completed work

Co-authored-by: OpenAI Codex <noreply@openai.com>
Signed-off-by: Arjun Mahanti <arjun@squareup.com>
---
 .../agent-activity/ActivityAccessory.test.tsx |  4 +-
 .../agent-activity/ActivityAccessory.tsx      | 25 +++++++--
 src/features/conversation/Conversation.tsx    |  1 -
 src/features/messages/ChannelTimeline.tsx     |  1 -
 .../ChannelTimeline.viewport.test.tsx         | 30 +++--------
 src/features/messages/MessageComposer.tsx     |  1 -
 src/features/messages/ThreadPanel.test.tsx    | 14 ++---
 src/features/messages/ThreadPanel.tsx         |  8 ---
 .../messages/TypingIndicator.test.tsx         | 20 +++++---
 src/features/messages/TypingIndicator.tsx     | 29 +++++------
 src/features/messages/activity-groups.test.ts | 51 ++++++++++++++++++-
 .../messages/activity-presentation.ts         | 23 +++------
 12 files changed, 116 insertions(+), 91 deletions(-)

diff --git a/src/bundled/agent-activity/ActivityAccessory.test.tsx b/src/bundled/agent-activity/ActivityAccessory.test.tsx
index 95dc9c734d..660cea2b81 100644
--- a/src/bundled/agent-activity/ActivityAccessory.test.tsx
+++ b/src/bundled/agent-activity/ActivityAccessory.test.tsx
@@ -308,7 +308,7 @@ it("makes the compact avatar and tool preview one action, retaining the popup wh
     const popup = within(
       screen.getByRole("dialog", { name: "Agent activity" }),
     );
-    expect(popup.getAllByRole("button")).toHaveLength(1);
+    expect(popup.getAllByRole("button")).toHaveLength(2);
     for (const text of [
       "Agent activity",
       "Latest reported activity for this message.",
@@ -322,7 +322,7 @@ it("makes the compact avatar and tool preview one action, retaining the popup wh
     });
     expect(row).toHaveTextContent("Read file · Running");
     expect(row.querySelector(".buzz-avatar")).not.toBeNull();
-    fireEvent.click(popup.getByText("file.ts"));
+    fireEvent.click(popup.getByRole("button", { name: "View full activity" }));
     expect(f.props.open).toHaveBeenCalledExactlyOnceWith(
       `buzz:profile?agent=${A}&tab=activity`,
     );
diff --git a/src/bundled/agent-activity/ActivityAccessory.tsx b/src/bundled/agent-activity/ActivityAccessory.tsx
index 9b7be0a2c8..e6cda12606 100644
--- a/src/bundled/agent-activity/ActivityAccessory.tsx
+++ b/src/bundled/agent-activity/ActivityAccessory.tsx
@@ -19,6 +19,7 @@ import {
   OctagonIcon,
   WarningCircleIcon,
   XIcon,
+  ArrowUpRightIcon,
 } from "../../shared/design-system/icons";
 import { NavigationItem } from "../../shared/design-system/ui/NavigationItem";
 import { ShimmerText } from "../../shared/design-system/ui/ShimmerText";
@@ -512,10 +513,6 @@ function ActivityBubble({
             event.preventBaseUIHandler();
             return;
           }
-          if (props.openThread?.()) {
-            event.preventBaseUIHandler();
-            setExpanded(false);
-          }
         }}
         render={
           <button
@@ -524,7 +521,7 @@ function ActivityBubble({
             type="button"
             className={messageStyles.activityBubbleTrigger}
             data-activity-summary=""
-            aria-label={`${props.openThread ? "Open thread" : "View agent activity"}: ${entries.map((entry) => `${entry.name}, ${label(entry)}`).join("; ")}`}
+            aria-label={`View agent activity: ${entries.map((entry) => `${entry.name}, ${label(entry)}`).join("; ")}`}
           >
             {content}
           </button>
@@ -539,6 +536,24 @@ function ActivityBubble({
       >
         {expanded && (
           <div className={styles.previews}>
+            <NavigationItem
+              variant="option"
+              label="Activity"
+              aria-label="View full activity"
+              trailing={<ArrowUpRightIcon aria-hidden="true" />}
+              disabled={
+                !entries[0] ||
+                !props.canOpen(
+                  profileActivityViewTarget(entries[0].agent) ?? "",
+                )
+              }
+              onClick={() => {
+                const target =
+                  entries[0] && profileActivityViewTarget(entries[0].agent);
+                if (target && props.canOpen(target) && props.open(target))
+                  setExpanded(false);
+              }}
+            />
             {entries.map((entry) => {
               // Opens the agent's profile on its Activity tab.
               const target = profileActivityViewTarget(entry.agent);
diff --git a/src/features/conversation/Conversation.tsx b/src/features/conversation/Conversation.tsx
index 9fbb3138a6..403eafed10 100644
--- a/src/features/conversation/Conversation.tsx
+++ b/src/features/conversation/Conversation.tsx
@@ -298,7 +298,6 @@ export function ConversationComposer(props: Own<MessageComposerProps>) {
             label: withPeople
               ? "Message this conversation"
               : "Message your agents",
-            activityClickOpensPanel: true,
           }
         : {})}
       chatPresentation={shared.ownSoloConversation}
diff --git a/src/features/messages/ChannelTimeline.tsx b/src/features/messages/ChannelTimeline.tsx
index 8a9f77958e..75a7b5ee2d 100644
--- a/src/features/messages/ChannelTimeline.tsx
+++ b/src/features/messages/ChannelTimeline.tsx
@@ -1266,7 +1266,6 @@ function Timeline({
               const recordedActivity = presentation.byRow.get(row.id);
               return (
                 <MessageRow
-                  activityFollows={presentation.completedReplies.has(row.id)}
                   representedAgents={presentation.representedAgents.get(row.id)}
                   recordedActivity={
                     recordedActivity && {
diff --git a/src/features/messages/ChannelTimeline.viewport.test.tsx b/src/features/messages/ChannelTimeline.viewport.test.tsx
index 19dd8ff2d8..546e7fc3f0 100644
--- a/src/features/messages/ChannelTimeline.viewport.test.tsx
+++ b/src/features/messages/ChannelTimeline.viewport.test.tsx
@@ -279,7 +279,7 @@ it("reveals an older folded message for an exact visit, then permits folding it
 });
 
 it.each([1, 4])(
-  "keeps a %i-step completed disclosure below its public reply in channels",
+  "hides a %i-step completed run while keeping subsequent work in channels",
   (count) => {
     const { owner, updates, content } = activityFixture();
     try {
@@ -299,25 +299,13 @@ it.each([1, 4])(
       );
       expect(screen.queryByText("Update 0")).toBeNull();
       const label = `${count} completed ${count === 1 ? "step" : "steps"}`;
-      expect(screen.getByText(label)).toBeVisible();
-      const completed = screen.getByRole("button", {
-        name: new RegExp(`Show activity history.*${label}`),
-      });
-      expect(completed.querySelector("[data-avatar-motion-key]")).toBeNull();
+      expect(screen.queryByText(label)).toBeNull();
       const reply = screen.getByText("Main reply");
       expect(reply).toBeVisible();
-      expect(
-        reply.compareDocumentPosition(completed) &
-          Node.DOCUMENT_POSITION_FOLLOWING,
-      ).toBeTruthy();
-      fireEvent.click(completed);
-      expect(screen.getByText("Update 0")).toBeVisible();
-      expect(completed).toHaveAttribute("aria-expanded", "true");
-      fireEvent.click(completed);
       expect(screen.getByText(`Update ${count * 2}`)).toBeVisible();
       expect(
         screen.getAllByRole("button", { name: /Show activity history/ }),
-      ).toHaveLength(2);
+      ).toHaveLength(1);
     } finally {
       owner.dispose();
     }
@@ -361,7 +349,7 @@ it("keeps ongoing typing in the reply group after completed history", () => {
         queries,
       ),
     );
-    expect(screen.getByText("2 completed steps")).toBeVisible();
+    expect(screen.queryByText("2 completed steps")).toBeNull();
     expect(
       screen.getByRole("button", { name: /Activity: .*working/ }),
     ).toBeVisible();
@@ -945,7 +933,7 @@ it.each([
   }
 });
 
-it("summarizes historical steps after the agent returns to a public reply without live completion state", () => {
+it("hides historical steps after the agent returns to a public reply without live completion state", () => {
   const { owner, updates, content } = activityFixture();
   try {
     const rows = updates(3);
@@ -961,11 +949,9 @@ it("summarizes historical steps after the agent returns to a public reply withou
     const view = render(content([...rows, { ...response, authorId: "human" }]));
     expect(screen.queryByText("3 completed steps")).toBeNull();
     view.rerender(content([...rows, response]));
-    expect(screen.getByText("3 completed steps")).toBeVisible();
-    fireEvent.click(
-      screen.getByRole("button", { name: /Show activity history/ }),
-    );
-    expect(screen.getByText("Update 2")).toBeVisible();
+    expect(screen.queryByText("3 completed steps")).toBeNull();
+    expect(screen.queryByText("Update 2")).toBeNull();
+    expect(screen.getByText("Here is the result.")).toBeVisible();
   } finally {
     owner.dispose();
   }
diff --git a/src/features/messages/MessageComposer.tsx b/src/features/messages/MessageComposer.tsx
index 2cf8f8be62..29419d4ae1 100644
--- a/src/features/messages/MessageComposer.tsx
+++ b/src/features/messages/MessageComposer.tsx
@@ -237,7 +237,6 @@ export type MessageComposerProps = {
   /** Sending needs at least one tagged recipient. */
   requireMention?: boolean | undefined;
   chatPresentation?: boolean | undefined;
-  activityClickOpensPanel?: boolean | undefined;
   trailingTool?: ReactNode;
   inviteAgents?: boolean | undefined;
   onSend?: (id: string) => void;
diff --git a/src/features/messages/ThreadPanel.test.tsx b/src/features/messages/ThreadPanel.test.tsx
index 83b1d6bb55..d60a4dbf3f 100644
--- a/src/features/messages/ThreadPanel.test.tsx
+++ b/src/features/messages/ThreadPanel.test.tsx
@@ -89,7 +89,6 @@ vi.mock("./MessageComposer", () => ({
     scope,
     onSend,
     ownSoloConversation,
-    activityClickOpensPanel,
     disabled,
     placeholder,
     focusRequest,
@@ -102,7 +101,6 @@ vi.mock("./MessageComposer", () => ({
       data-channel={channelId}
       data-scope={scope}
       data-own-solo={ownSoloConversation}
-      data-direct-activity={activityClickOpensPanel}
       data-disabled={disabled}
       data-placeholder={placeholder}
       data-focus-request={focusRequest}
@@ -1377,20 +1375,14 @@ it("names the conversation a thread lives in as a link, only when its host can o
   expect(within(thread).queryByText("#Alpha")).toBeNull();
 });
 
-it("passes readiness and direct Activity through to thread composition, and gives a Solo thread none", () => {
+it("passes readiness through to thread composition, and gives a Solo thread none", () => {
   const h = messagesHarness();
-  const view = render(
-    <ThreadPanel {...h.props} activityClickOpensPanel disabled />,
-  );
+  const view = render(<ThreadPanel {...h.props} disabled />);
   const composer = screen.getByRole("region", { name: "Composer" });
-  expect(composer).toHaveAttribute("data-direct-activity", "true");
   expect(composer).toHaveAttribute("data-disabled", "true");
-  view.rerender(
-    <ThreadPanel {...h.props} activityClickOpensPanel disabled={false} />,
-  );
+  view.rerender(<ThreadPanel {...h.props} disabled={false} />);
   expect(composer).toHaveAttribute("data-disabled", "false");
   view.rerender(<ThreadPanel {...h.props} />);
-  expect(composer).not.toHaveAttribute("data-direct-activity");
   // Solo agents answer at top level: its threads are read-only.
   view.rerender(<ThreadPanel {...h.props} soloConversation />);
   expect(
diff --git a/src/features/messages/ThreadPanel.tsx b/src/features/messages/ThreadPanel.tsx
index 33cd74a2aa..90054ee0f7 100644
--- a/src/features/messages/ThreadPanel.tsx
+++ b/src/features/messages/ThreadPanel.tsx
@@ -67,7 +67,6 @@ export type ThreadPanelProps = {
   channelId: string;
   /** Solo agents answer at top level, so a Solo thread is read-only. */
   soloConversation?: boolean | undefined;
-  activityClickOpensPanel?: boolean | undefined;
   disabled?: boolean | undefined;
   messageId: string;
   /** Channel workspaces retain the editor across same-thread link navigation. */
@@ -379,7 +378,6 @@ function OwnedThreadPanel({
   onOpenMediaReview,
   canOpenLink,
   soloConversation,
-  activityClickOpensPanel,
   disabled,
   replyRequest,
   focusRequest,
@@ -439,7 +437,6 @@ function OwnedThreadPanel({
   ) : view ? (
     <ThreadMessages
       soloConversation={soloConversation}
-      activityClickOpensPanel={activityClickOpensPanel}
       disabled={disabled}
       extensions={extensions}
       session={session}
@@ -476,7 +473,6 @@ function ThreadMessages({
   onOpenMediaReview,
   canOpenLink,
   soloConversation,
-  activityClickOpensPanel,
   disabled,
   replyRequest,
   focusRequest,
@@ -493,7 +489,6 @@ function ThreadMessages({
   selectionFailure?: SelectionFailure | undefined;
   /** Solo agents answer at top level, so a Solo thread is read-only. */
   soloConversation?: boolean | undefined;
-  activityClickOpensPanel?: boolean | undefined;
   disabled?: boolean | undefined;
   extensions?: ConversationExtensions | undefined;
   session: RelaySession;
@@ -1332,7 +1327,6 @@ function ThreadMessages({
         const recordedActivity = presentation.byRow.get(row.id);
         return (
           <MessageRow
-            activityFollows={presentation.completedReplies.has(row.id)}
             representedAgents={presentation.representedAgents.get(row.id)}
             recordedActivity={
               recordedActivity && {
@@ -1707,7 +1701,6 @@ function ThreadMessages({
             previousAuthor={joinsLive ? lastMessage?.authorId : undefined}
             openActivity={onOpenLink}
             canOpenActivity={canOpenLink}
-            clickOpensPanel={activityClickOpensPanel}
           />
         )}
         {positioning || (snapshot.status === "loading" && !rows.length) ? (
@@ -1771,7 +1764,6 @@ function ThreadMessages({
       )}
       {composerRoot && (
         <MessageComposer
-          activityClickOpensPanel={activityClickOpensPanel}
           key={`${scope}:${channelId}:${composerRoot.id}`}
           extensions={extensions}
           session={session}
diff --git a/src/features/messages/TypingIndicator.test.tsx b/src/features/messages/TypingIndicator.test.tsx
index 9e2aecb28a..f71647a2b9 100644
--- a/src/features/messages/TypingIndicator.test.tsx
+++ b/src/features/messages/TypingIndicator.test.tsx
@@ -276,7 +276,9 @@ it("keeps a non-navigable status when the plugin is unavailable and does not clo
   expect(
     within(dialog).getByText("Only typing updates are reaching this app."),
   ).toBeVisible();
-  expect(within(dialog).queryByRole("button")).toBeNull();
+  expect(
+    within(dialog).getByRole("button", { name: "View full activity" }),
+  ).toBeDisabled();
   view.rerender(
     <TypingIndicator
       session={f.session}
@@ -325,7 +327,7 @@ it("never chooses one thread from simultaneous work and deduplicates public and
   );
   const dialog = await screen.findByRole("dialog");
   // The channel conversation is already shown, so the one row opens activity.
-  expect(within(dialog).getAllByRole("button")).toHaveLength(1);
+  expect(within(dialog).getAllByRole("button")).toHaveLength(2);
   await user.click(
     within(dialog).getByRole("button", { name: "View Agent activity" }),
   );
@@ -572,7 +574,7 @@ it("hands navigation a retained trigger instead of the disposable popup action",
 });
 
 it.each(["click", "Enter", "Space"])(
-  "Solo chat single-agent %s opens Activity directly while hover retains its preview",
+  "Solo chat single-agent %s opens the popover before full Activity",
   async (activation) => {
     const f = fixture(),
       user = userEvent.setup(),
@@ -582,7 +584,6 @@ it.each(["click", "Enter", "Space"])(
       <TypingIndicator
         session={f.session}
         channelId="channel"
-        clickOpensPanel
         canOpenActivity={() => true}
         openActivity={open}
       />,
@@ -600,6 +601,10 @@ it.each(["click", "Enter", "Space"])(
       trigger.focus();
       await user.keyboard(activation === "Enter" ? "{Enter}" : " ");
     }
+    expect(open).not.toHaveBeenCalled();
+    await user.click(
+      screen.getByRole("button", { name: "View full activity" }),
+    );
     expect(open).toHaveBeenCalledExactlyOnceWith(
       profileActivityViewTarget(agent, { transcript: true }),
       { rootId: root },
@@ -620,7 +625,6 @@ it("Solo chat multiple-agent activation keeps the chooser and unavailable Activi
     <TypingIndicator
       session={f.session}
       channelId="channel"
-      clickOpensPanel
       canOpenActivity={() => true}
       openActivity={open}
     />,
@@ -638,7 +642,6 @@ it("Solo chat multiple-agent activation keeps the chooser and unavailable Activi
     <TypingIndicator
       session={f.session}
       channelId="channel"
-      clickOpensPanel
       canOpenActivity={() => false}
       openActivity={open}
     />,
@@ -661,7 +664,6 @@ it("Solo chat ArrowDown exposes retained thread navigation without opening Activ
     <TypingIndicator
       session={f.session}
       channelId="channel"
-      clickOpensPanel
       canOpenActivity={() => true}
       openActivity={open}
     />,
@@ -677,6 +679,10 @@ it("Solo chat ArrowDown exposes retained thread navigation without opening Activ
   await waitFor(() => expect(dialog).toHaveFocus());
   expect(open).not.toHaveBeenCalled();
   await user.tab();
+  expect(
+    within(dialog).getByRole("button", { name: "View full activity" }),
+  ).toHaveFocus();
+  await user.tab();
   expect(
     within(dialog).getByRole("button", { name: "Open thread for Agent" }),
   ).toHaveFocus();
diff --git a/src/features/messages/TypingIndicator.tsx b/src/features/messages/TypingIndicator.tsx
index ec425663f2..0665e8926b 100644
--- a/src/features/messages/TypingIndicator.tsx
+++ b/src/features/messages/TypingIndicator.tsx
@@ -19,6 +19,8 @@ import { currentActivity } from "../agents/current-activity";
 import { AgentResponsePreview } from "./AgentResponsePreview";
 import { ActivityStepPreview } from "./ActivityStepPreview";
 import { AgentActivityRow } from "../agents/AgentActivityRow";
+import { NavigationItem } from "../../shared/design-system/ui/NavigationItem";
+import { ArrowUpRightIcon } from "../../shared/design-system/icons";
 import activityStyles from "../agents/ActivityRows.module.css";
 import {
   PopoverRoot,
@@ -86,7 +88,6 @@ export function TypingIndicator({
   channelId,
   threadRootId,
   canOpenActivity,
-  clickOpensPanel = false,
   openActivity,
   previousAuthor,
   inFlow = false,
@@ -95,7 +96,6 @@ export function TypingIndicator({
   audience?: "all" | "humans" | "agents";
   previousAuthor?: string | undefined;
   inFlow?: boolean;
-  clickOpensPanel?: boolean | undefined;
   session: ComposerSession & Partial<Pick<RelaySession, "agentActivity">>;
   channelId: string;
   threadRootId?: string | undefined;
@@ -179,10 +179,7 @@ export function TypingIndicator({
       (roots.length === 1 && (roots[0] === null || !!roots[0]));
     return profileActivityViewTarget(pubkey, { transcript: known });
   };
-  const directTarget =
-    clickOpensPanel && agents.length === 1 && firstAgent
-      ? activityTarget(firstAgent)
-      : undefined;
+  const directTarget = firstAgent ? activityTarget(firstAgent) : undefined;
   const agentStatus = (
     pubkey: string,
     navigate: (target: string, origin?: MessageLinkOrigin) => void,
@@ -414,10 +411,6 @@ function AgentChooser({
       modal={false}
       open={open}
       onOpenChange={(nextOpen, details) => {
-        if (directTarget && details.reason === "trigger-press") {
-          details.cancel();
-          return;
-        }
         // Base UI tracks compositionstart/end; also honor the native key flags
         // when composition began before this hover popup mounted.
         if (
@@ -466,12 +459,6 @@ function AgentChooser({
               setOpen(true);
               popup.current?.focus();
             }}
-            onClick={(event) => {
-              if (!directTarget) return;
-              // Keep hover preview separate from explicit click/keyboard activation.
-              event.preventDefault();
-              navigate(directTarget, directOrigin);
-            }}
           >
             {content}
           </button>
@@ -490,6 +477,16 @@ function AgentChooser({
           className={activityStyles.activityList}
           aria-label="Agents working now"
         >
+          <NavigationItem
+            variant="option"
+            label="Activity"
+            aria-label="View full activity"
+            trailing={<ArrowUpRightIcon aria-hidden="true" />}
+            disabled={!directTarget || !openTarget}
+            onClick={() => {
+              if (directTarget) navigate(directTarget, directOrigin);
+            }}
+          />
           {children(navigate)}
         </section>
       </PopoverPopup>
diff --git a/src/features/messages/activity-groups.test.ts b/src/features/messages/activity-groups.test.ts
index 3ec6d73d1a..108349da18 100644
--- a/src/features/messages/activity-groups.test.ts
+++ b/src/features/messages/activity-groups.test.ts
@@ -26,6 +26,53 @@ const activity = (
 const run = (prefix: string, count = 6) =>
   Array.from({ length: count }, (_, index) => activity(`${prefix}${index}`));
 
+it("retires superseded tool updates while the steered request keeps working", () => {
+  const { audience: _audience, ...request } = activity("request", {
+    authorId: "human",
+  });
+  const steer = { ...request, id: "steer" };
+  const oldStep = activity("old-step", { replyParentId: request.id });
+  const newStep = activity("new-step", { replyParentId: steer.id });
+  const rows = [request, oldStep, steer, newStep];
+  const presentation = activityPresentation(
+    rows,
+    {
+      status: "listening",
+      typing: [],
+      records: [],
+      turns: [],
+      trimmed: 0,
+      local: [
+        {
+          scope: "test",
+          agent: "agent",
+          channelId: "solo",
+          threadRootId: "request",
+          messageId: "request",
+          startedAt: 1,
+          state: "superseded",
+        },
+        {
+          scope: "test",
+          agent: "agent",
+          channelId: "solo",
+          threadRootId: "request",
+          messageId: "steer",
+          startedAt: 2,
+          state: "working",
+        },
+      ],
+    },
+    new Set(["agent"]),
+  );
+  expect(activityDisplayRows(rows, presentation.groups)).toEqual([
+    request,
+    steer,
+    newStep,
+  ]);
+  expect(presentation.byRow.get(newStep.id)?.active).toBe(true);
+});
+
 it("folds consecutive activity into one preview and includes different agents in a run", () => {
   const single = run("a", 1);
   expect(activityRuns(single)).toEqual([single]);
@@ -76,7 +123,7 @@ it("splits groups across local days and channels", () => {
 });
 
 it.each([1, 2])(
-  "places %i completed steps after its agent reply while keeping unfinished work in place",
+  "hides %i completed steps while keeping the reply and unfinished work in place",
   (count) => {
     const history = run("step", count);
     const { audience: _, ...reply } = activity("reply");
@@ -84,7 +131,7 @@ it.each([1, 2])(
     const completed = activityPresentation(rows, undefined, new Set(["agent"]));
     expect(
       activityDisplayRows(rows, completed.groups).map((row) => row.id),
-    ).toEqual(["reply", ...history.map((row) => row.id)]);
+    ).toEqual(["reply"]);
     expect([...completed.completedReplies]).toEqual(["reply"]);
     const request = { ...reply, id: "request", authorId: "human" };
     expect([
diff --git a/src/features/messages/activity-presentation.ts b/src/features/messages/activity-presentation.ts
index 576265d9f0..f5f42f9b4f 100644
--- a/src/features/messages/activity-presentation.ts
+++ b/src/features/messages/activity-presentation.ts
@@ -59,7 +59,9 @@ function activityStatus(group: ActivityRun, snapshot: Snapshot | undefined) {
       work.some(
         (entry) =>
           entry.agent === agent &&
-          (entry.state === "done" || entry.state === "ended"),
+          (entry.state === "done" ||
+            entry.state === "ended" ||
+            entry.state === "superseded"),
       ),
     );
   const working = new Set(
@@ -187,22 +189,13 @@ export function useActivityPresentation(
   );
 }
 
-/** Keep a finished run's disclosure and expanded history below its reply. */
+/** Finished work stays in Activity rather than the conversation flow. */
 export function activityDisplayRows<T extends ChannelMessage>(
   rows: readonly T[],
   groups: readonly ActivityPresentation[],
 ): readonly T[] {
-  const byId = new Map(rows.map((row) => [row.id, row]));
-  const replies = new Map<string, T>();
-  for (const group of groups) {
-    const first = group.ids[0];
-    const reply = group.completedReply && byId.get(group.completedReply.id);
-    if (first && reply) replies.set(first, reply);
-  }
-  if (!replies.size) return rows;
-  const moved = new Set([...replies.values()].map((row) => row.id));
-  return rows.flatMap((row) => {
-    const reply = replies.get(row.id);
-    return reply ? [reply, row] : moved.has(row.id) ? [] : [row];
-  });
+  const completed = new Set(
+    groups.filter((group) => group.done).flatMap((group) => group.ids),
+  );
+  return completed.size ? rows.filter((row) => !completed.has(row.id)) : rows;
 }

From f4030a9dcadcfde0cf4e9212072dea70e7f85b46 Mon Sep 17 00:00:00 2001
From: Arjun Mahanti <arjun@squareup.com>
Date: Thu, 29 Oct 2026 13:03:15 -0400
Subject: [PATCH 17/19] Unify activity stop controls and bubble interactions

Co-authored-by: OpenAI Codex <noreply@openai.com>
Signed-off-by: Arjun Mahanti <arjun@squareup.com>
---
 .../ActivityAccessory.module.css              |  15 +--
 .../agent-activity/ActivityAccessory.test.tsx |   2 +-
 .../agent-activity/ActivityAccessory.tsx      |  31 ++++--
 src/features/messages/Messages.module.css     |  10 ++
 .../messages/TypingIndicator.module.css       |  10 ++
 .../messages/TypingIndicator.test.tsx         |  81 +++++++++++++-
 src/features/messages/TypingIndicator.tsx     | 101 ++++++++++++++++--
 7 files changed, 215 insertions(+), 35 deletions(-)

diff --git a/src/bundled/agent-activity/ActivityAccessory.module.css b/src/bundled/agent-activity/ActivityAccessory.module.css
index 9d3ba835b9..5eee4e34dd 100644
--- a/src/bundled/agent-activity/ActivityAccessory.module.css
+++ b/src/bundled/agent-activity/ActivityAccessory.module.css
@@ -8,19 +8,6 @@
   flex-direction: column;
   gap: var(--space-1);
 }
-/* Dismiss and Stop are sibling actions, never buttons nested in NavigationItem. */
-.row {
-  display: flex;
-  align-items: center;
-  gap: var(--space-1);
-}
-.row > :first-child {
-  min-width: 0;
-  flex: 1;
-}
-.row > :not(:first-child) {
-  flex-shrink: 0;
-}
 
 /* One glanceable line each, ending in an ellipsis; the profile's Activity tab
  * has the full text. NavigationItem's label truncation applies per line. */
@@ -70,6 +57,8 @@
 }
 
 .action {
+  align-self: center;
+  flex-shrink: 0;
   display: inline-flex;
   align-items: center;
   padding: var(--space-1);
diff --git a/src/bundled/agent-activity/ActivityAccessory.test.tsx b/src/bundled/agent-activity/ActivityAccessory.test.tsx
index 660cea2b81..15f70bf734 100644
--- a/src/bundled/agent-activity/ActivityAccessory.test.tsx
+++ b/src/bundled/agent-activity/ActivityAccessory.test.tsx
@@ -324,7 +324,7 @@ it("makes the compact avatar and tool preview one action, retaining the popup wh
     expect(row.querySelector(".buzz-avatar")).not.toBeNull();
     fireEvent.click(popup.getByRole("button", { name: "View full activity" }));
     expect(f.props.open).toHaveBeenCalledExactlyOnceWith(
-      `buzz:profile?agent=${A}&tab=activity`,
+      `buzz:profile?agent=${A}&tab=activity&open=transcript`,
     );
     expect(screen.getByRole("dialog")).toBeInTheDocument();
     view.rerender(
diff --git a/src/bundled/agent-activity/ActivityAccessory.tsx b/src/bundled/agent-activity/ActivityAccessory.tsx
index e6cda12606..a7f74e2481 100644
--- a/src/bundled/agent-activity/ActivityAccessory.tsx
+++ b/src/bundled/agent-activity/ActivityAccessory.tsx
@@ -11,7 +11,10 @@ import { AvatarStack } from "../../shared/design-system/ui/AvatarStack";
 import type { ComposerAccessoryProps } from "../../features/conversation/contracts";
 import { useChannelIdentityNames } from "../../features/identity-names/react";
 import type { activityRecords } from "../../features/agents/activity-records";
-import { profileActivityViewTarget } from "../../features/profiles/target";
+import {
+  openProfileTranscript,
+  profileActivityViewTarget,
+} from "../../features/profiles/target";
 import { publicKeyLabels } from "../../shared/identity/public-key";
 import { Button } from "../../shared/design-system/ui/Button";
 import { IconButton } from "../../shared/design-system/ui/IconButton";
@@ -21,7 +24,10 @@ import {
   XIcon,
   ArrowUpRightIcon,
 } from "../../shared/design-system/icons";
-import { NavigationItem } from "../../shared/design-system/ui/NavigationItem";
+import {
+  NavigationCard,
+  NavigationItem,
+} from "../../shared/design-system/ui/NavigationItem";
 import { ShimmerText } from "../../shared/design-system/ui/ShimmerText";
 import { useToastNotification } from "../../shared/design-system/ui/Toast";
 import { ActivityStepPreview } from "../../features/messages/ActivityStepPreview";
@@ -544,13 +550,22 @@ function ActivityBubble({
               disabled={
                 !entries[0] ||
                 !props.canOpen(
-                  profileActivityViewTarget(entries[0].agent) ?? "",
+                  profileActivityViewTarget(entries[0].agent, {
+                    transcript: true,
+                  }) ?? "",
                 )
               }
               onClick={() => {
                 const target =
-                  entries[0] && profileActivityViewTarget(entries[0].agent);
-                if (target && props.canOpen(target) && props.open(target))
+                  entries[0] &&
+                  profileActivityViewTarget(entries[0].agent, {
+                    transcript: true,
+                  });
+                if (
+                  target &&
+                  props.canOpen(target) &&
+                  openProfileTranscript(target, props.open)
+                )
                   setExpanded(false);
               }}
             />
@@ -562,7 +577,7 @@ function ActivityBubble({
                 : undefined;
               const stopping = stops.has(entry.agent);
               return (
-                <div key={entry.agent} className={styles.row}>
+                <NavigationCard key={entry.agent}>
                   <NavigationItem
                     variant="option"
                     aria-label={`View activity for ${entry.name}`}
@@ -632,7 +647,7 @@ function ActivityBubble({
                     <span className={styles.action}>
                       <Button
                         size="sm"
-                        variant="subtle"
+                        variant="plain"
                         aria-label={`Stop ${entry.name}`}
                         loading={stopping}
                         onClick={(event) => {
@@ -648,7 +663,7 @@ function ActivityBubble({
                       </Button>
                     </span>
                   ) : undefined}
-                </div>
+                </NavigationCard>
               );
             })}
           </div>
diff --git a/src/features/messages/Messages.module.css b/src/features/messages/Messages.module.css
index c520de86e9..8304c585b8 100644
--- a/src/features/messages/Messages.module.css
+++ b/src/features/messages/Messages.module.css
@@ -3684,6 +3684,16 @@ html[data-keyboard-navigation] .activityExpansion {
   cursor: pointer;
 }
 
+/* The painted bubble and its interactive area must have the same bounds. */
+.messageBubble:has(> .activityBubbleTrigger) {
+  padding: 0;
+}
+.messageBubble > .activityBubbleTrigger {
+  width: 100%;
+  padding: var(--space-2) var(--space-4);
+  border-radius: inherit;
+}
+
 /* Activity interactions paint their shared bubble, never a second pill inside it. */
 .message[data-agent-response-preview] .audienceLine:hover {
   background: none;
diff --git a/src/features/messages/TypingIndicator.module.css b/src/features/messages/TypingIndicator.module.css
index b07e64d8b5..76435b5083 100644
--- a/src/features/messages/TypingIndicator.module.css
+++ b/src/features/messages/TypingIndicator.module.css
@@ -19,6 +19,16 @@
   text-overflow: ellipsis;
 }
 
+.stopAction {
+  align-self: center;
+  flex-shrink: 0;
+  padding: var(--space-1);
+}
+
+.stopIcon {
+  transform: rotate(22.5deg);
+}
+
 .typing > [data-agent-response-preview] {
   width: min(100%, var(--timeline-measure, 52rem));
 }
diff --git a/src/features/messages/TypingIndicator.test.tsx b/src/features/messages/TypingIndicator.test.tsx
index f71647a2b9..73aa1453d2 100644
--- a/src/features/messages/TypingIndicator.test.tsx
+++ b/src/features/messages/TypingIndicator.test.tsx
@@ -93,6 +93,76 @@ const entry = (
   threadRootId: string | undefined = root,
 ): TypingEntry => ({ pubkey, channelId: "channel", threadRootId });
 
+it("stops the exact controllable request from the general popover and permits retry after failure", async () => {
+  const f = fixture();
+  const user = userEvent.setup();
+  let rejectStop!: (error: Error) => void;
+  const pending = new Promise<void>((_resolve, reject) => {
+    rejectStop = reject;
+  });
+  const interrupt = vi
+    .fn()
+    .mockReturnValueOnce(pending)
+    .mockResolvedValue(undefined);
+  const session = {
+    ...f.session,
+    agentActivity: { ...f.session.agentActivity, interrupt },
+  };
+  f.update([], {
+    local: [
+      {
+        scope: "test",
+        agent,
+        channelId: "channel",
+        threadRootId: root,
+        messageId: "request-to-stop",
+        startedAt: 1,
+        state: "working",
+        stoppable: true,
+      },
+      {
+        scope: "test",
+        agent: other,
+        channelId: "channel",
+        threadRootId: secondRoot,
+        messageId: "other-request",
+        startedAt: 1,
+        state: "working",
+        stoppable: true,
+      },
+    ],
+  });
+  render(
+    <TypingIndicator
+      session={session}
+      channelId="channel"
+      threadRootId={root}
+    />,
+  );
+  await user.click(
+    screen.getByRole("button", { name: "Activity: Agent working" }),
+  );
+  const stop = screen.getByRole("button", { name: "Stop Agent" });
+  expect(screen.queryByRole("button", { name: "Stop Other" })).toBeNull();
+  try {
+    await user.click(stop);
+    expect(interrupt).toHaveBeenCalledExactlyOnceWith(
+      agent,
+      "channel",
+      "request-to-stop",
+    );
+    expect(stop).toHaveAttribute("aria-disabled", "true");
+  } finally {
+    await act(async () => {
+      rejectStop(new Error("Try again"));
+    });
+  }
+  await user.click(stop);
+  expect(interrupt).toHaveBeenCalledTimes(2);
+  f.update([entry()], { local: [] });
+  expect(screen.queryByRole("button", { name: "Stop Agent" })).toBeNull();
+});
+
 it("shows an incoming typing preview without invented details, retaining navigation and focus return", async () => {
   const f = fixture(),
     user = userEvent.setup(),
@@ -127,8 +197,11 @@ it("shows an incoming typing preview without invented details, retaining navigat
   ).toBeVisible();
   f.update([entry()], { status: "listening" });
   expect(within(dialog).getByText("Thread · First task")).toBeVisible();
+  expect(
+    within(dialog).queryByRole("button", { name: "View Agent activity" }),
+  ).toBeNull();
   await user.click(
-    within(dialog).getByRole("button", { name: "View Agent activity" }),
+    within(dialog).getByRole("button", { name: "View full activity" }),
   );
   const transcript = profileActivityViewTarget(agent, { transcript: true });
   expect(open).toHaveBeenLastCalledWith(transcript, {
@@ -357,7 +430,7 @@ it("opens activity for the composer's explicit thread", async () => {
   expect(
     screen.queryByRole("button", { name: "Open thread for Agent" }),
   ).toBeNull();
-  await user.click(screen.getByRole("button", { name: "View Agent activity" }));
+  await user.click(screen.getByRole("button", { name: "View full activity" }));
   expect(open).toHaveBeenLastCalledWith(
     profileActivityViewTarget(agent, { transcript: true }),
     {
@@ -494,7 +567,7 @@ it("opens the sole known conversation without attributing unknown telemetry to t
       "No current step details received.",
     ),
   ).toBeVisible();
-  await user.click(screen.getByRole("button", { name: "View Agent activity" }));
+  await user.click(screen.getByRole("button", { name: "View full activity" }));
   expect(open).toHaveBeenLastCalledWith(
     profileActivityViewTarget(agent),
     undefined,
@@ -568,7 +641,7 @@ it("hands navigation a retained trigger instead of the disposable popup action",
     name: "Activity: Agent working",
   });
   await user.click(trigger);
-  await user.click(screen.getByRole("button", { name: "View Agent activity" }));
+  await user.click(screen.getByRole("button", { name: "View full activity" }));
   expect(captured).toEqual([trigger]);
   expect(captured[0]).toBeInTheDocument();
 });
diff --git a/src/features/messages/TypingIndicator.tsx b/src/features/messages/TypingIndicator.tsx
index 0665e8926b..22e4710e7e 100644
--- a/src/features/messages/TypingIndicator.tsx
+++ b/src/features/messages/TypingIndicator.tsx
@@ -16,11 +16,20 @@ import {
   profileActivityViewTarget,
 } from "../profiles/target";
 import { currentActivity } from "../agents/current-activity";
+import { localWorkLabel, type LocalWork } from "../agents/local-activity";
 import { AgentResponsePreview } from "./AgentResponsePreview";
 import { ActivityStepPreview } from "./ActivityStepPreview";
 import { AgentActivityRow } from "../agents/AgentActivityRow";
-import { NavigationItem } from "../../shared/design-system/ui/NavigationItem";
-import { ArrowUpRightIcon } from "../../shared/design-system/icons";
+import {
+  NavigationCard,
+  NavigationItem,
+} from "../../shared/design-system/ui/NavigationItem";
+import {
+  ArrowUpRightIcon,
+  OctagonIcon,
+} from "../../shared/design-system/icons";
+import { Button } from "../../shared/design-system/ui/Button";
+import { useToastNotification } from "../../shared/design-system/ui/Toast";
 import activityStyles from "../agents/ActivityRows.module.css";
 import {
   PopoverRoot,
@@ -74,6 +83,7 @@ export function useConversationAgents(
   );
   const agents = [...details.keys()].filter((key) => !replaced.has(key)).sort();
   return {
+    activity,
     details,
     entries,
     replaced,
@@ -105,6 +115,7 @@ export function TypingIndicator({
     | undefined;
 }) {
   const {
+    activity,
     details,
     entries,
     replaced,
@@ -183,6 +194,7 @@ export function TypingIndicator({
   const agentStatus = (
     pubkey: string,
     navigate: (target: string, origin?: MessageLinkOrigin) => void,
+    work?: LocalWork,
   ) => {
     const detail = details.get(pubkey);
     if (!detail) return null;
@@ -192,13 +204,16 @@ export function TypingIndicator({
       (value) => typeof value === "string",
     );
     const conversationRoot =
-      threadRootId ?? (knownRoots.length === 1 ? knownRoots[0] : undefined);
+      work?.threadRootId ??
+      threadRootId ??
+      (knownRoots.length === 1 ? knownRoots[0] : undefined);
     const conversation = conversationRoot
       ? `buzz://message?${new URLSearchParams({ channel: channelId, id: conversationRoot, thread: conversationRoot })}`
       : `buzz://channel/${encodeURIComponent(channelId)}`;
     const picture = profiles.get(pubkey)?.picture;
-    const status =
-      detail.detailAvailability === "available"
+    const status = work
+      ? localWorkLabel(work)
+      : detail.detailAvailability === "available"
         ? detail.label
         : detail.detailAvailability === "no-current-step"
           ? "No current step details received."
@@ -232,7 +247,6 @@ export function TypingIndicator({
         scope={scope}
         openLabel={`Open ${conversationRoot ? "thread" : "conversation"} for ${name(pubkey)}`}
         onOpen={openActivity ? () => navigate(conversation) : undefined}
-        onOpenActivity={viewActivity}
       />
     );
   };
@@ -326,9 +340,38 @@ export function TypingIndicator({
                 }
               >
                 {(navigate) =>
-                  agents.map((pubkey) => (
-                    <div key={pubkey}>{agentStatus(pubkey, navigate)}</div>
-                  ))
+                  agents.flatMap((pubkey) => {
+                    const controls = session.agentActivity;
+                    const requests = (activity?.local ?? []).filter(
+                      (work) =>
+                        work.agent === pubkey &&
+                        work.channelId === channelId &&
+                        (!threadRootId || work.threadRootId === threadRootId) &&
+                        work.stoppable &&
+                        (work.state === "working" || work.state === "waiting"),
+                    );
+                    if (!controls || !requests.length)
+                      return (
+                        <div key={pubkey}>{agentStatus(pubkey, navigate)}</div>
+                      );
+                    return requests.map((work) => (
+                      <NavigationCard key={`${pubkey}:${work.messageId}`}>
+                        {agentStatus(pubkey, navigate, work)}
+                        <span className={styles.stopAction}>
+                          <RequestStop
+                            name={name(pubkey)}
+                            stop={() =>
+                              controls.interrupt(
+                                pubkey,
+                                channelId,
+                                work.messageId,
+                              )
+                            }
+                          />
+                        </span>
+                      </NavigationCard>
+                    ));
+                  })
                 }
               </AgentChooser>
             </AgentResponsePreview>
@@ -349,6 +392,46 @@ export function TypingIndicator({
   );
 }
 
+function RequestStop({
+  name,
+  stop,
+}: {
+  name: string;
+  stop: () => Promise<void>;
+}) {
+  const [stopping, setStopping] = useState(false);
+  const pending = useRef(false);
+  const notify = useToastNotification();
+  return (
+    <Button
+      size="sm"
+      variant="plain"
+      aria-label={`Stop ${name}`}
+      loading={stopping}
+      onClick={async () => {
+        if (pending.current) return;
+        pending.current = true;
+        setStopping(true);
+        try {
+          await stop();
+          notify(`Stopped ${name}`, "success");
+        } catch (error) {
+          notify(
+            `Couldn’t stop ${name}. ${error instanceof Error ? error.message : String(error)}`,
+            "error",
+          );
+        } finally {
+          pending.current = false;
+          setStopping(false);
+        }
+      }}
+    >
+      <OctagonIcon className={styles.stopIcon} aria-hidden="true" />
+      {stopping ? "Stopping…" : "Stop"}
+    </Button>
+  );
+}
+
 function AgentChooser({
   label,
   content,

From a2fb07ae1311eac429a62547812ad22ee97a4e6a Mon Sep 17 00:00:00 2001
From: Arjun Mahanti <arjun@squareup.com>
Date: Thu, 29 Oct 2026 15:40:38 -0400
Subject: [PATCH 18/19] Fix activity navigation and scope Stop controls to each
 request

Co-authored-by: OpenAI Codex <noreply@openai.com>
Signed-off-by: Arjun Mahanti <arjun@squareup.com>
---
 .../agent-activity/ActivityAccessory.tsx      | 123 ++-------
 src/features/agents/use-work-stops.ts         |  80 ++++++
 src/features/agents/work-stop.ts              | 117 +++++++++
 .../messages/ActivityGroupPreview.test.tsx    |   9 +-
 .../messages/ActivityGroupPreview.tsx         |  38 +--
 src/features/messages/ChannelTimeline.tsx     |  35 ++-
 .../ChannelTimeline.viewport.test.tsx         |  30 +++
 src/features/messages/MessageRow.tsx          |   3 -
 src/features/messages/Messages.module.css     |   7 +-
 src/features/messages/ThreadPanel.test.tsx    |  35 +++
 src/features/messages/ThreadPanel.tsx         |  20 +-
 .../messages/TypingIndicator.stop.test.tsx    | 239 ++++++++++++++++++
 .../messages/TypingIndicator.test.tsx         | 148 +----------
 src/features/messages/TypingIndicator.tsx     | 132 +++++-----
 src/features/messages/activity-groups.test.ts |   9 -
 .../messages/activity-presentation.ts         |  14 +-
 .../messages/typing-indicator-testing.ts      |  69 +++++
 17 files changed, 719 insertions(+), 389 deletions(-)
 create mode 100644 src/features/agents/use-work-stops.ts
 create mode 100644 src/features/agents/work-stop.ts
 create mode 100644 src/features/messages/TypingIndicator.stop.test.tsx
 create mode 100644 src/features/messages/typing-indicator-testing.ts

diff --git a/src/bundled/agent-activity/ActivityAccessory.tsx b/src/bundled/agent-activity/ActivityAccessory.tsx
index a7f74e2481..9ce9c9770a 100644
--- a/src/bundled/agent-activity/ActivityAccessory.tsx
+++ b/src/bundled/agent-activity/ActivityAccessory.tsx
@@ -29,7 +29,6 @@ import {
   NavigationItem,
 } from "../../shared/design-system/ui/NavigationItem";
 import { ShimmerText } from "../../shared/design-system/ui/ShimmerText";
-import { useToastNotification } from "../../shared/design-system/ui/Toast";
 import { ActivityStepPreview } from "../../features/messages/ActivityStepPreview";
 import {
   PopoverRoot,
@@ -39,7 +38,8 @@ import {
 import { currentActivity } from "./current-activity";
 import { messageWork } from "./message-activity";
 import type { ActivityTurn } from "../../features/agents/activity";
-import type { Agents } from "../../features/agents/service";
+import { workStop, type WorkStopAgents } from "../../features/agents/work-stop";
+import { useWorkStops } from "../../features/agents/use-work-stops";
 import {
   requestWork,
   type RequestWork,
@@ -58,11 +58,7 @@ import { avatarMedia } from "../../shared/avatar-source";
 import { AgentResponsePreview } from "../../features/messages/AgentResponsePreview";
 
 const noSubscribe = () => () => {};
-/** How long a hosted stop shows as stopping before Stop can be tried again:
- * its provider may never report the turn's end. */
-const HOSTED_STOP_MS = 30_000;
-/** What Stop needs of Agents: a hosted agent's provider stops its turns. */
-export type ActivityAgents = Pick<Agents, "interruptible" | "interrupt">;
+export type ActivityAgents = WorkStopAgents;
 type ActivityProps = ComposerAccessoryProps & { agents?: ActivityAgents };
 /** Activity belongs to the exact triggering message, not the composer. */
 export function ActivityAccessory(props: ActivityProps) {
@@ -276,97 +272,25 @@ function ActivityBubble({
   ...props
 }: ActivityProps & { entries: Entry[]; interactive: boolean }) {
   const [expanded, setExpanded] = useState(false);
-  // Agents asked to stop whose work has not stopped yet.
-  const [stops, setStops] = useState<ReadonlySet<string>>(new Set());
-  // The latest stop asked of each agent, so a late timeout knows its own.
-  const attempts = useRef(new Map<string, symbol>());
-  const notify = useToastNotification();
-  // A hosted stop still pending when its activity goes away needs no retry.
-  useEffect(() => {
-    const pending = attempts.current;
-    return () => pending.clear();
-  }, []);
   const message = props.message;
-  const stoppable = (entry: Entry) =>
-    !!message &&
-    (entry.lifecycle
-      ? !!entry.stoppable &&
-        (entry.state === "working" || entry.state === "waiting")
-      : entry.working && !!agents?.interruptible(entry.agent));
-  const forget = (agent: string) => {
-    attempts.current.delete(agent);
-    setStops((prior) => {
-      if (!prior.has(agent)) return prior;
-      const next = new Set(prior);
-      next.delete(agent);
-      return next;
-    });
-  };
-  const stop = (entry: Entry) => {
-    if (!message) return;
-    const attempt = Symbol(entry.agent);
-    attempts.current.set(entry.agent, attempt);
-    setStops((prior) => new Set(prior).add(entry.agent));
-    const newer = () => {
-      const latest = attempts.current.get(entry.agent);
-      return !!latest && latest !== attempt;
-    };
-    // A local request settles as stopped; a hosted turn ends when its
-    // provider reports it, so it shows as stopping until then.
-    const asked = entry.lifecycle
-      ? props.session.agentActivity.interrupt(
-          entry.agent,
-          props.channelId,
-          message.id,
-        )
-      : agents?.interrupt(entry.agent, {
-          channelId: props.channelId,
-          threadRootId: message.threadRootId ?? message.id,
-        });
-    void Promise.resolve(asked).then(
-      (running) => {
-        // A newer stop of this agent reports its own result.
-        if (newer()) return;
-        if (entry.lifecycle) {
-          forget(entry.agent);
-          notify(`Stopped ${entry.name}`, "success");
-        } else if (running === false) {
-          forget(entry.agent);
-          notify(`${entry.name} had nothing running to stop`, "info");
-        } else {
-          notify(`Stopping ${entry.name}`, "success");
-          setTimeout(() => {
-            if (attempts.current.get(entry.agent) !== attempt) return;
-            forget(entry.agent);
-            notify(`${entry.name} hasn’t stopped yet. Try again.`, "error");
-          }, HOSTED_STOP_MS);
-        }
-      },
-      (error: unknown) => {
-        if (newer()) return;
-        forget(entry.agent);
-        notify(
-          `Couldn’t stop ${entry.name}. ${error instanceof Error ? error.message : String(error)}`,
-          "error",
+  const controls = new Map(
+    entries.flatMap((entry) => {
+      const control =
+        message &&
+        workStop(
+          entry,
+          {
+            channelId: props.channelId,
+            messageId: message.id,
+            threadRootId: message.threadRootId ?? message.id,
+          },
+          props.session.agentActivity,
+          agents,
         );
-      },
-    );
-  };
-  // A stop is forgotten once its agent's work here has ended.
-  const live = entries
-    .filter((entry) => entry.working || entry.state === "waiting")
-    .map((entry) => entry.agent)
-    .join(":");
-  useEffect(() => {
-    const agents = new Set(live.split(":"));
-    for (const agent of attempts.current.keys())
-      if (!agents.has(agent)) attempts.current.delete(agent);
-    setStops((prior) =>
-      [...prior].every((agent) => agents.has(agent))
-        ? prior
-        : new Set([...prior].filter((agent) => agents.has(agent))),
-    );
-  }, [live]);
+      return control ? [[entry.agent, control] as const] : [];
+    }),
+  );
+  const { pending: stops, stop } = useWorkStops([...controls.values()]);
   const trigger = useRef<HTMLButtonElement>(null);
   const popup = useRef<HTMLDivElement>(null);
   const retirement = useRef({
@@ -575,7 +499,8 @@ function ActivityBubble({
               const preview = entry.working
                 ? currentActivity(entry.records, entry.turns)
                 : undefined;
-              const stopping = stops.has(entry.agent);
+              const control = controls.get(entry.agent);
+              const stopping = !!control && stops.has(control.key);
               return (
                 <NavigationCard key={entry.agent}>
                   <NavigationItem
@@ -643,7 +568,7 @@ function ActivityBubble({
                         }}
                       />
                     </span>
-                  ) : stoppable(entry) ? (
+                  ) : control ? (
                     <span className={styles.action}>
                       <Button
                         size="sm"
@@ -652,7 +577,7 @@ function ActivityBubble({
                         loading={stopping}
                         onClick={(event) => {
                           event.stopPropagation();
-                          stop(entry);
+                          stop(control, entry.name);
                         }}
                       >
                         <OctagonIcon
diff --git a/src/features/agents/use-work-stops.ts b/src/features/agents/use-work-stops.ts
new file mode 100644
index 0000000000..50920d24c9
--- /dev/null
+++ b/src/features/agents/use-work-stops.ts
@@ -0,0 +1,80 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useToastNotification } from "../../shared/design-system/ui/Toast";
+import type { WorkStop } from "./work-stop";
+
+const HOSTED_STOP_MS = 30_000;
+
+/** Hosted stops remain pending until evidence ends or the retry window expires. */
+export function useWorkStops(controls: readonly WorkStop[]) {
+  const [pending, setPending] = useState<ReadonlySet<string>>(new Set());
+  const attempts = useRef(new Map<string, symbol>());
+  const timers = useRef(new Map<string, ReturnType<typeof setTimeout>>());
+  const notify = useToastNotification();
+  const forget = useCallback((key: string) => {
+    attempts.current.delete(key);
+    clearTimeout(timers.current.get(key));
+    timers.current.delete(key);
+    setPending((prior) => {
+      if (!prior.has(key)) return prior;
+      const next = new Set(prior);
+      next.delete(key);
+      return next;
+    });
+  }, []);
+  const live = JSON.stringify(controls.map((control) => control.key).sort());
+  useEffect(() => {
+    const keys = new Set<string>(JSON.parse(live));
+    for (const key of attempts.current.keys()) if (!keys.has(key)) forget(key);
+  }, [live, forget]);
+  useEffect(() => {
+    const active = attempts.current;
+    const timeouts = timers.current;
+    return () => {
+      active.clear();
+      for (const timer of timeouts.values()) clearTimeout(timer);
+      timeouts.clear();
+    };
+  }, []);
+  const stop = async (control: WorkStop, name: string) => {
+    const { key } = control;
+    if (attempts.current.has(key)) return;
+    const attempt = Symbol(key);
+    attempts.current.set(key, attempt);
+    setPending((prior) => new Set(prior).add(key));
+    try {
+      const running = await control.interrupt();
+      const current = attempts.current.get(key);
+      if (current && current !== attempt) return;
+      // Local completion can retire the preview before its promise resolves.
+      // Still confirm the successful stop; hosted work needs live evidence.
+      if (!current && !control.lifecycle) return;
+      if (control.lifecycle || running === false) {
+        if (current) forget(key);
+        notify(
+          control.lifecycle
+            ? `Stopped ${name}`
+            : `${name} had nothing running to stop`,
+          control.lifecycle ? "success" : "info",
+        );
+      } else {
+        notify(`Stopping ${name}`, "success");
+        timers.current.set(
+          key,
+          setTimeout(() => {
+            if (attempts.current.get(key) !== attempt) return;
+            forget(key);
+            notify(`${name} hasn’t stopped yet. Try again.`, "error");
+          }, HOSTED_STOP_MS),
+        );
+      }
+    } catch (error) {
+      if (attempts.current.get(key) !== attempt) return;
+      forget(key);
+      notify(
+        `Couldn’t stop ${name}. ${error instanceof Error ? error.message : String(error)}`,
+        "error",
+      );
+    }
+  };
+  return { pending, stop };
+}
diff --git a/src/features/agents/work-stop.ts b/src/features/agents/work-stop.ts
new file mode 100644
index 0000000000..d52e5dae71
--- /dev/null
+++ b/src/features/agents/work-stop.ts
@@ -0,0 +1,117 @@
+import type { RelaySession } from "../relay/session";
+import type { Agents } from "./service";
+import type { RequestWork } from "./request-work";
+import type { LocalWork } from "./local-activity";
+import { activityTranscript } from "./activity-transcript";
+
+export type WorkStopAgents = Pick<Agents, "interruptible" | "interrupt">;
+export type WorkStop = {
+  key: string;
+  lifecycle: boolean;
+  interrupt: () => Promise<boolean> | Promise<void>;
+};
+type Scope = {
+  channelId: string;
+  messageId: string;
+  threadRootId?: string | undefined;
+};
+type Activity = RelaySession["agentActivity"];
+
+/** Capability and exact scope are shared by request and conversation popovers. */
+export function workStop(
+  work: Pick<
+    RequestWork,
+    "agent" | "lifecycle" | "stoppable" | "state" | "working"
+  >,
+  scope: Scope,
+  activity: Activity | undefined,
+  agents: WorkStopAgents | undefined,
+): WorkStop | undefined {
+  const key = JSON.stringify([work.agent, scope.channelId, scope.messageId]);
+  if (work.lifecycle) {
+    if (
+      !activity ||
+      !work.stoppable ||
+      (work.state !== "working" && work.state !== "waiting")
+    )
+      return;
+    return {
+      key,
+      lifecycle: true,
+      interrupt: () =>
+        activity.interrupt(work.agent, scope.channelId, scope.messageId),
+    };
+  }
+  const root = scope.threadRootId ?? scope.messageId;
+  if (!root || !work.working || !agents?.interruptible(work.agent)) return;
+  return {
+    key,
+    lifecycle: false,
+    interrupt: () =>
+      agents.interrupt(work.agent, {
+        channelId: scope.channelId,
+        threadRootId: root,
+      }),
+  };
+}
+
+export function conversationWorkStops(
+  snapshot: ReturnType<Activity["snapshot"]> | undefined,
+  agent: string,
+  channelId: string,
+  threadRootId: string | undefined,
+  activity: Activity | undefined,
+  agents: WorkStopAgents | undefined,
+): {
+  control: WorkStop;
+  work?: LocalWork;
+  threadRootId?: string | undefined;
+}[] {
+  if (!snapshot) return [];
+  const local = (snapshot.local ?? []).filter(
+    (work) =>
+      work.agent === agent &&
+      work.channelId === channelId &&
+      (!threadRootId || work.threadRootId === threadRootId),
+  );
+  const result = local.flatMap((work) => {
+    const control = workStop(
+      { ...work, lifecycle: true, working: work.state === "working" },
+      work,
+      activity,
+      agents,
+    );
+    return control ? [{ control, work, threadRootId: work.threadRootId }] : [];
+  });
+  // Local lifecycle evidence owns this agent's state, including settled work.
+  if (local.length || snapshot.status !== "listening") return result;
+  const turns = activityTranscript(snapshot.records, {
+    agent,
+    channelId,
+  }).turns;
+  const roots = new Set(
+    turns.flatMap((turn) =>
+      !turn.endedAt &&
+      typeof turn.threadRootId === "string" &&
+      (!threadRootId || turn.threadRootId === threadRootId) &&
+      snapshot.turns.some(
+        (live) =>
+          live.agent === agent &&
+          live.channelId === channelId &&
+          live.turnId === turn.turnId &&
+          live.state === "working",
+      )
+        ? [turn.threadRootId]
+        : [],
+    ),
+  );
+  return [...roots].flatMap((root) => {
+    const control = workStop(
+      { agent, lifecycle: false, working: true, state: "working" },
+      { channelId, messageId: root, threadRootId: root },
+      activity,
+      agents,
+    );
+    return control ? [{ control, threadRootId: root }] : [];
+  });
+}
diff --git a/src/features/messages/ActivityGroupPreview.test.tsx b/src/features/messages/ActivityGroupPreview.test.tsx
index 6bdb080ca7..e636ea7608 100644
--- a/src/features/messages/ActivityGroupPreview.test.tsx
+++ b/src/features/messages/ActivityGroupPreview.test.tsx
@@ -61,7 +61,7 @@ function fixture() {
     },
   };
 }
-it("keeps a closed sequence completed when another request starts in the same thread", () => {
+it("keeps a closed sequence hidden when another request starts in the same thread", () => {
   const f = fixture();
   try {
     const { audience: _audience, ...publicStep } = step;
@@ -94,7 +94,7 @@ it("keeps a closed sequence completed when another request starts in the same th
       );
     }
     render(<Preview />);
-    expect(screen.getByText("2 completed steps")).toBeVisible();
+    expect(screen.queryByRole("button")).toBeNull();
     act(() => {
       f.local
         .begin({
@@ -106,10 +106,7 @@ it("keeps a closed sequence completed when another request starts in the same th
         })
         .started();
     });
-    expect(screen.getByText("2 completed steps")).toBeVisible();
-    expect(screen.getByText("2 completed steps")).not.toHaveAttribute(
-      "data-active",
-    );
+    expect(screen.queryByRole("button")).toBeNull();
   } finally {
     f.dispose();
   }
diff --git a/src/features/messages/ActivityGroupPreview.tsx b/src/features/messages/ActivityGroupPreview.tsx
index b47707f036..c9b4d3e799 100644
--- a/src/features/messages/ActivityGroupPreview.tsx
+++ b/src/features/messages/ActivityGroupPreview.tsx
@@ -39,20 +39,17 @@ export function ActivityGroupPreview({
     participants,
     group.requestId,
   );
+  if (done) return null;
   const primary = history[0]?.authorId ?? row.authorId;
   const profile = profiles.get(primary);
   const name = profile?.name ?? primary.slice(0, 10);
   const text = Array.from(messagePreviewText(row.content).replace(/\s+/g, " "));
-  const preview = done
-    ? `${history.length} completed ${history.length === 1 ? "step" : "steps"}`
-    : text.length > 280
-      ? `${text.slice(0, 279).join("")}…`
-      : text.join("");
+  const preview =
+    text.length > 280 ? `${text.slice(0, 279).join("")}…` : text.join("");
   const content = (
     <div
       className={styles.audienceRow}
       data-layout={layout}
-      data-completed={done || undefined}
       data-collapse={expanded || undefined}
     >
       <div className={styles.audienceEntry}>
@@ -68,7 +65,7 @@ export function ActivityGroupPreview({
             onToggle();
           }}
         >
-          {!done && expanded && (
+          {expanded && (
             <span className={styles.audienceAvatar}>
               <Avatar
                 alt=""
@@ -85,7 +82,7 @@ export function ActivityGroupPreview({
             </span>
           )}
           <span className={styles.audiencePreviewText}>
-            {expanded && !done ? (
+            {expanded ? (
               "Collapse"
             ) : (
               <ShimmerText active={working || live}>{preview}</ShimmerText>
@@ -95,28 +92,21 @@ export function ActivityGroupPreview({
       </div>
     </div>
   );
-  return !done || group.standalone ? (
+  return (
     <AgentResponsePreview
       name={name}
-      participants={
-        done
-          ? []
-          : participants.map((id) => ({
-              id,
-              name: profiles.get(id)?.name ?? id.slice(0, 10),
-              picture: avatarMedia(profiles.get(id)?.picture, media),
-            }))
-      }
+      participants={participants.map((id) => ({
+        id,
+        name: profiles.get(id)?.name ?? id.slice(0, 10),
+        picture: avatarMedia(profiles.get(id)?.picture, media),
+      }))}
       stackPrevious={!group.standalone}
       picture={avatarMedia(profile?.picture, media)}
       layout={layout}
     >
-      <div
-        className={styles.standaloneActivity}
-        data-contained-history={!done || undefined}
-      >
+      <div className={styles.standaloneActivity} data-contained-history="">
         {content}
-        {!done && expanded && renderHistory && (
+        {expanded && renderHistory && (
           <div className={styles.containedActivityHistory}>
             {history.map((entry) => (
               <div key={entry.id}>{renderHistory(entry)}</div>
@@ -125,7 +115,5 @@ export function ActivityGroupPreview({
         )}
       </div>
     </AgentResponsePreview>
-  ) : (
-    content
   );
 }
diff --git a/src/features/messages/ChannelTimeline.tsx b/src/features/messages/ChannelTimeline.tsx
index 75a7b5ee2d..108a5b1e2b 100644
--- a/src/features/messages/ChannelTimeline.tsx
+++ b/src/features/messages/ChannelTimeline.tsx
@@ -257,9 +257,19 @@ function Timeline({
     channelId,
     undefined,
   );
+  const targetId =
+    inlineTarget?.messageId ??
+    (navigation?.target.kind === "conversation"
+      ? navigation.target.messageId
+      : undefined);
   const rows = useMemo(
-    () => activityDisplayRows(chronologicalRows, activity),
-    [chronologicalRows, activity],
+    () =>
+      activityDisplayRows(
+        chronologicalRows,
+        activity,
+        targetId ?? revealMessageId,
+      ),
+    [chronologicalRows, activity, targetId, revealMessageId],
   );
   const lastPublicMessage = publicMessageNeighbor(rows, rows.length, -1);
   // Resolve a saved anchor once, before measuring initial geometry. A bottom
@@ -276,13 +286,15 @@ function Timeline({
       setExpandedActivity((expanded) => new Set([...expanded, ...older]));
   }
   const disclosures = new Map(
-    activity.map((group) => [
-      group.ids[0],
-      {
-        ...group,
-        expanded: group.ids.some((id) => expandedActivity.has(id)),
-      },
-    ]),
+    activity
+      .filter((group) => !group.done)
+      .map((group) => [
+        group.ids[0],
+        {
+          ...group,
+          expanded: group.ids.some((id) => expandedActivity.has(id)),
+        },
+      ]),
   );
   const containedOwnerCache = useRef(new Map<string, string | undefined>());
   const nextContainedOwners = new Map(
@@ -528,11 +540,6 @@ function Timeline({
     });
   }, [rows.length]);
   const inlineSignal = inlineTarget?.signal;
-  const targetId =
-    inlineTarget?.messageId ??
-    (navigation?.target.kind === "conversation"
-      ? navigation.target.messageId
-      : undefined);
   const targetIndex = rows.findIndex(
     (row) => row.id === (containedOwners.get(targetId ?? "") ?? targetId),
   );
diff --git a/src/features/messages/ChannelTimeline.viewport.test.tsx b/src/features/messages/ChannelTimeline.viewport.test.tsx
index 546e7fc3f0..cfe5db58b4 100644
--- a/src/features/messages/ChannelTimeline.viewport.test.tsx
+++ b/src/features/messages/ChannelTimeline.viewport.test.tsx
@@ -956,3 +956,33 @@ it("hides historical steps after the agent returns to a public reply without liv
     owner.dispose();
   }
 });
+
+it("reveals a directly linked completed step without restoring the completed summary", () => {
+  const f = activityFixture();
+  const steps = f.updates(2);
+  const first = steps[0];
+  if (!first) throw new Error("Missing step");
+  const { audience: _audience, ...publicRow } = first;
+  const rows = [
+    ...steps,
+    {
+      ...publicRow,
+      id: "reply",
+      content: "Finished",
+      createdAt: 110,
+    },
+  ];
+  const view = render(f.content(rows));
+  expect(screen.queryByText("Update 1")).toBeNull();
+  view.rerender(
+    f.content(rows, {
+      messageId: "activity-1",
+      signal: new AbortController().signal,
+    }),
+  );
+  expect(screen.getByText("Update 1")).toBeVisible();
+  expect(screen.queryByText("Update 0")).toBeNull();
+  expect(screen.queryByRole("button", { name: /activity history/ })).toBeNull();
+  view.unmount();
+  f.owner.dispose();
+});
diff --git a/src/features/messages/MessageRow.tsx b/src/features/messages/MessageRow.tsx
index 9be0edf6ee..7b21b8cdad 100644
--- a/src/features/messages/MessageRow.tsx
+++ b/src/features/messages/MessageRow.tsx
@@ -101,7 +101,6 @@ export type MessageLinkOrigin = Readonly<{ rootId: string }>;
 export type MessageRowProps = {
   row: ChannelMessage;
   recordedActivity?: ActivityRowPresentation | undefined;
-  activityFollows?: boolean | undefined;
   representedAgents?: readonly string[] | undefined;
   staticMentions?: boolean | undefined;
   getThreadRoot?: (() => ChannelMessage | undefined) | undefined;
@@ -196,7 +195,6 @@ function MessageRowContent({
   viewer = session?.viewer,
   stackPrevious = layout === "continuation",
   stackNext = false,
-  activityFollows = false,
   representedAgents,
   alignViewer = true,
 
@@ -897,7 +895,6 @@ function MessageRowContent({
         className={styles.message}
         data-layout={layout}
         data-stack-previous={stackPrevious || undefined}
-        data-activity-follows={activityFollows || undefined}
         data-stack-next={stackNext || undefined}
         data-viewer-message={
           alignViewer && !row.workflowOwnerId && row.authorId === viewer
diff --git a/src/features/messages/Messages.module.css b/src/features/messages/Messages.module.css
index 8304c585b8..12e122b8aa 100644
--- a/src/features/messages/Messages.module.css
+++ b/src/features/messages/Messages.module.css
@@ -3083,8 +3083,7 @@ html[data-keyboard-navigation] .rawDiff:focus-visible {
 .message[data-layout="timeline"] {
   padding-block: var(--space-2);
 }
-.message[data-stack-next],
-.message[data-activity-follows] {
+.message[data-stack-next] {
   padding-bottom: 0;
 }
 .message[data-stack-previous] {
@@ -3524,10 +3523,6 @@ html[data-keyboard-navigation] .activityExpansion {
   cursor: pointer;
 }
 
-.audienceRow[data-completed] .audienceLine {
-  padding-block: 0;
-}
-
 /* Standalone activity uses the normal incoming identity and bubble geometry. */
 .standaloneActivity .audienceRow {
   container-type: normal;
diff --git a/src/features/messages/ThreadPanel.test.tsx b/src/features/messages/ThreadPanel.test.tsx
index d60a4dbf3f..0b98ef7d5f 100644
--- a/src/features/messages/ThreadPanel.test.tsx
+++ b/src/features/messages/ThreadPanel.test.tsx
@@ -1826,3 +1826,38 @@ it("releases bottom following after a jump that included child-only resizing", (
   h.render();
   expect(h.element.scrollTop).toBe(2000);
 });
+
+it("reveals a completed step selected by an exact thread link", async () => {
+  const h = messagesHarness();
+  const target = {
+    ...row,
+    id: "d".repeat(64),
+    content: "Completed tool result",
+    audience: "agents" as const,
+    threadRootId: row.id,
+    replyParentId: row.id,
+    createdAt: 2,
+  };
+  h.snapshot.replies = [
+    target,
+    {
+      ...row,
+      id: "e".repeat(64),
+      content: "Final response",
+      threadRootId: row.id,
+      replyParentId: row.id,
+      createdAt: 3,
+    },
+  ];
+  h.snapshot.target = target;
+  h.snapshot.targetStatus = "ready";
+  Object.assign(h.props, {
+    messageId: target.id,
+    retainThread: true,
+    revealSelected: true,
+    revealRequest: 1,
+  });
+  h.render();
+  expect(await screen.findByText("Completed tool result")).toBeVisible();
+  expect(screen.queryByRole("button", { name: /activity history/ })).toBeNull();
+});
diff --git a/src/features/messages/ThreadPanel.tsx b/src/features/messages/ThreadPanel.tsx
index 90054ee0f7..5308fb71a5 100644
--- a/src/features/messages/ThreadPanel.tsx
+++ b/src/features/messages/ThreadPanel.tsx
@@ -1280,14 +1280,18 @@ function ThreadMessages({
     const groups = presentation.groups.filter((group) =>
       group.ids.every((id) => !tree.children.get(id)?.length),
     );
-    const siblings = activityDisplayRows(chronologicalSiblings, groups);
-    const groupsByFirst = new Map(groups.map((group) => [group.ids[0], group]));
-    const groupedIds = new Set(groups.flatMap((group) => group.ids));
-    const containedActivity = new Set(
-      groups.filter((group) => !group.done).flatMap((group) => group.ids),
+    const siblings = activityDisplayRows(
+      chronologicalSiblings,
+      groups,
+      messageId,
+    );
+    const activeGroups = groups.filter((group) => !group.done);
+    const groupsByFirst = new Map(
+      activeGroups.map((group) => [group.ids[0], group]),
     );
+    const groupedIds = new Set(activeGroups.flatMap((group) => group.ids));
     const hidden = new Set(
-      groups.flatMap((group) =>
+      activeGroups.flatMap((group) =>
         expandedActivity.has(group.ids[0] ?? "") ? [] : group.ids,
       ),
     );
@@ -1373,7 +1377,7 @@ function ThreadMessages({
       };
       const message = (
         <ActivityExpansion
-          open={!hidden.has(row.id) && !containedActivity.has(row.id)}
+          open={!hidden.has(row.id) && !groupedIds.has(row.id)}
           enabled={row.audience === "agents"}
         >
           {renderMessage(row)}
@@ -1383,7 +1387,7 @@ function ThreadMessages({
         <li
           key={row.id}
           ref={
-            row.id === messageId && !containedActivity.has(row.id)
+            row.id === messageId && !groupedIds.has(row.id)
               ? selectedBranchRef
               : undefined
           }
diff --git a/src/features/messages/TypingIndicator.stop.test.tsx b/src/features/messages/TypingIndicator.stop.test.tsx
new file mode 100644
index 0000000000..af38a65bb5
--- /dev/null
+++ b/src/features/messages/TypingIndicator.stop.test.tsx
@@ -0,0 +1,239 @@
+// @vitest-environment jsdom
+import "@testing-library/jest-dom/vitest";
+import { act, cleanup, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, expect, it, vi } from "vitest";
+import { AgentsContext } from "../agents/react";
+import type { Agents } from "../agents/service";
+import { stubAvatarBrowserApis } from "../agents/avatar-testing";
+import { TypingIndicator } from "./TypingIndicator";
+import {
+  agent,
+  other,
+  root,
+  secondRoot,
+  fixture,
+  entry,
+} from "./typing-indicator-testing";
+stubAvatarBrowserApis();
+afterEach(cleanup);
+it("stops the exact controllable request from the general popover and permits retry after failure", async () => {
+  const f = fixture();
+  const user = userEvent.setup();
+  let rejectStop!: (error: Error) => void;
+  const pending = new Promise<void>((_resolve, reject) => {
+    rejectStop = reject;
+  });
+  const interrupt = vi
+    .fn()
+    .mockReturnValueOnce(pending)
+    .mockResolvedValue(undefined);
+  const session = {
+    ...f.session,
+    agentActivity: { ...f.session.agentActivity, interrupt },
+  };
+  f.update([], {
+    local: [
+      {
+        scope: "test",
+        agent,
+        channelId: "channel",
+        threadRootId: root,
+        messageId: "request-to-stop",
+        startedAt: 1,
+        state: "working",
+        stoppable: true,
+      },
+      {
+        scope: "test",
+        agent: other,
+        channelId: "channel",
+        threadRootId: secondRoot,
+        messageId: "other-request",
+        startedAt: 1,
+        state: "working",
+        stoppable: true,
+      },
+    ],
+  });
+  render(
+    <TypingIndicator
+      session={session}
+      channelId="channel"
+      threadRootId={root}
+    />,
+  );
+  await user.click(
+    screen.getByRole("button", { name: "Activity: Agent working" }),
+  );
+  const stop = screen.getByRole("button", { name: "Stop Agent" });
+  expect(screen.queryByRole("button", { name: "Stop Other" })).toBeNull();
+  try {
+    await user.click(stop);
+    expect(interrupt).toHaveBeenCalledExactlyOnceWith(
+      agent,
+      "channel",
+      "request-to-stop",
+    );
+    expect(stop).toHaveAttribute("aria-disabled", "true");
+  } finally {
+    await act(async () => {
+      rejectStop(new Error("Try again"));
+    });
+  }
+  await user.click(stop);
+  expect(interrupt).toHaveBeenCalledTimes(2);
+  f.update([entry()], { local: [] });
+  expect(screen.queryByRole("button", { name: "Stop Agent" })).toBeNull();
+});
+
+it("stops hosted work in its known conversation and keeps Stop pending until the work ends", async () => {
+  const f = fixture();
+  const user = userEvent.setup();
+  const interrupt = vi.fn(async () => true);
+  const hosted = {
+    subscribe: () => () => {},
+    snapshot: () => undefined,
+    interruptible: () => true,
+    interrupt,
+  } as unknown as Agents;
+  f.update([], {
+    turns: [
+      {
+        agent,
+        channelId: "channel",
+        turnId: "turn",
+        state: "working",
+        timestamp: 100,
+      },
+    ],
+    records: [
+      {
+        id: "record",
+        agent,
+        channelIds: ["channel"],
+        createdAt: 1,
+        receivedAt: 100,
+        kind: "turn_started",
+        plaintext: JSON.stringify({
+          kind: "turn_started",
+          channelId: "channel",
+          turnId: "turn",
+          seq: 0,
+          timestamp: "2026-10-29T12:00:00Z",
+          payload: { threadRootEventId: root },
+        }),
+      },
+    ],
+  });
+  render(
+    <AgentsContext.Provider value={hosted}>
+      <TypingIndicator session={f.session} channelId="channel" />
+    </AgentsContext.Provider>,
+  );
+  await user.click(
+    screen.getByRole("button", { name: "Activity: Agent working" }),
+  );
+  const stop = screen.getByRole("button", {
+    name: "Stop Agent in Thread · First task",
+  });
+  await user.click(stop);
+  expect(interrupt).toHaveBeenCalledExactlyOnceWith(agent, {
+    channelId: "channel",
+    threadRootId: root,
+  });
+  expect(stop).toHaveAttribute("aria-disabled", "true");
+  f.update([entry()], { turns: [], records: [] });
+  expect(
+    screen.queryByRole("button", { name: "Stop Agent in Thread · First task" }),
+  ).toBeNull();
+});
+
+it("identifies each hosted thread and stops only the selected work", async () => {
+  const f = fixture();
+  const user = userEvent.setup();
+  const interrupt = vi.fn(async () => true);
+  const hosted = {
+    subscribe: () => () => {},
+    snapshot: () => undefined,
+    interruptible: () => true,
+    interrupt,
+  } as unknown as Agents;
+  const tasks = [
+    { root, title: "First task", file: "first.txt" },
+    { root: secondRoot, title: "Second task", file: "second.txt" },
+  ];
+  f.update([], {
+    turns: tasks.map((task) => ({
+      agent,
+      channelId: "channel",
+      turnId: task.root,
+      state: "working",
+      timestamp: 100,
+    })),
+    records: tasks.flatMap((task) =>
+      [
+        { kind: "turn_started", payload: { threadRootEventId: task.root } },
+        {
+          kind: "acp_read",
+          payload: {
+            method: "session/update",
+            params: {
+              update: {
+                sessionUpdate: "tool_call",
+                toolCallId: task.file,
+                title: "Read file",
+                kind: "read",
+                status: "in_progress",
+                locations: [{ path: task.file }],
+              },
+            },
+          },
+        },
+      ].map((event, index) => ({
+        id: task.root + index,
+        agent,
+        channelIds: ["channel"],
+        createdAt: 1,
+        receivedAt: 100,
+        kind: event.kind,
+        plaintext: JSON.stringify({
+          ...event,
+          channelId: "channel",
+          turnId: task.root,
+          seq: index,
+          timestamp: "2026-10-29T12:00:00Z",
+        }),
+      })),
+    ),
+  });
+  render(
+    <AgentsContext.Provider value={hosted}>
+      <TypingIndicator
+        session={f.session}
+        channelId="channel"
+        openActivity={() => true}
+      />
+    </AgentsContext.Provider>,
+  );
+  await user.click(
+    screen.getByRole("button", { name: "Activity: Agent working" }),
+  );
+  const rows = screen.getAllByRole("button", { name: "Open thread for Agent" });
+  for (const [index, task] of tasks.entries()) {
+    expect(rows[index]).toHaveTextContent("Thread · " + task.title);
+    expect(rows[index]).toHaveTextContent("Reading " + task.file);
+    expect(rows[index]).not.toHaveTextContent(
+      index === 0 ? "Second task" : "First task",
+    );
+    await user.click(
+      screen.getByRole("button", {
+        name: "Stop Agent in Thread · " + task.title,
+      }),
+    );
+    expect(interrupt).toHaveBeenNthCalledWith(index + 1, agent, {
+      channelId: "channel",
+      threadRootId: task.root,
+    });
+  }
+});
diff --git a/src/features/messages/TypingIndicator.test.tsx b/src/features/messages/TypingIndicator.test.tsx
index 73aa1453d2..bfa127c4d6 100644
--- a/src/features/messages/TypingIndicator.test.tsx
+++ b/src/features/messages/TypingIndicator.test.tsx
@@ -1,7 +1,6 @@
 // @vitest-environment jsdom
 import "@testing-library/jest-dom/vitest";
 import {
-  act,
   cleanup,
   fireEvent,
   render,
@@ -11,8 +10,6 @@ import {
 } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { afterEach, expect, it, vi } from "vitest";
-import type { RelaySession } from "../relay/session";
-import type { TypingEntry } from "../relay/typing";
 import {
   profileActivityViewTarget,
   claimProfileTranscript,
@@ -27,141 +24,16 @@ import { TypingIndicator } from "./TypingIndicator";
 import { stubAvatarBrowserApis } from "../agents/avatar-testing";
 stubAvatarBrowserApis();
 afterEach(cleanup);
-const agent = "a".repeat(64),
-  human = "b".repeat(64),
-  other = "c".repeat(64);
-const root = "d".repeat(64),
-  secondRoot = "e".repeat(64);
-type Snapshot = ReturnType<RelaySession["agentActivity"]["snapshot"]>;
-function fixture() {
-  const listeners = new Set<() => void>();
-  let typing: readonly TypingEntry[] = [];
-  let activity: Snapshot = {
-    status: "listening",
-    typing: [],
-    records: [],
-    turns: [],
-    trimmed: 0,
-  };
-  const subscribe = (listener: () => void) => {
-    listeners.add(listener);
-    return () => {
-      listeners.delete(listener);
-    };
-  };
-  const profiles = new Map([
-    [agent, { name: "Agent" }],
-    [human, { name: "Human" }],
-    [
-      "public-agent",
-      { name: "Sam’s assistant", isAgent: true, ownerPubkey: "sam" },
-    ],
-    [other, { name: "Other" }],
-  ]);
-  const library = { identities: [{ pubkey: agent }, { pubkey: other }] };
-  const rows = [
-    { id: root, content: "First task" },
-    { id: secondRoot, content: "Second task" },
-  ];
-  const ensure = vi.fn();
-  const session = {
-    viewer: "viewer",
-    typing: { snapshot: () => typing, subscribe },
-    agentActivity: { snapshot: () => activity, subscribe },
-    profiles: { snapshot: () => profiles, subscribe, ensure },
-    agentChoices: { snapshot: () => library, subscribe },
-    channels: {
-      window: () => ({ rows }),
-      subscribeWindow: (_id: string, fn: () => void) => subscribe(fn),
-      ensure,
-    },
-  } as unknown as RelaySession;
-  return {
-    session,
-    ensure,
-    update(entries: readonly TypingEntry[], patch: Partial<Snapshot> = {}) {
-      act(() => {
-        typing = entries;
-        activity = { ...activity, ...patch };
-        for (const listener of listeners) listener();
-      });
-    },
-  };
-}
-const entry = (
-  pubkey = agent,
-  threadRootId: string | undefined = root,
-): TypingEntry => ({ pubkey, channelId: "channel", threadRootId });
-
-it("stops the exact controllable request from the general popover and permits retry after failure", async () => {
-  const f = fixture();
-  const user = userEvent.setup();
-  let rejectStop!: (error: Error) => void;
-  const pending = new Promise<void>((_resolve, reject) => {
-    rejectStop = reject;
-  });
-  const interrupt = vi
-    .fn()
-    .mockReturnValueOnce(pending)
-    .mockResolvedValue(undefined);
-  const session = {
-    ...f.session,
-    agentActivity: { ...f.session.agentActivity, interrupt },
-  };
-  f.update([], {
-    local: [
-      {
-        scope: "test",
-        agent,
-        channelId: "channel",
-        threadRootId: root,
-        messageId: "request-to-stop",
-        startedAt: 1,
-        state: "working",
-        stoppable: true,
-      },
-      {
-        scope: "test",
-        agent: other,
-        channelId: "channel",
-        threadRootId: secondRoot,
-        messageId: "other-request",
-        startedAt: 1,
-        state: "working",
-        stoppable: true,
-      },
-    ],
-  });
-  render(
-    <TypingIndicator
-      session={session}
-      channelId="channel"
-      threadRootId={root}
-    />,
-  );
-  await user.click(
-    screen.getByRole("button", { name: "Activity: Agent working" }),
-  );
-  const stop = screen.getByRole("button", { name: "Stop Agent" });
-  expect(screen.queryByRole("button", { name: "Stop Other" })).toBeNull();
-  try {
-    await user.click(stop);
-    expect(interrupt).toHaveBeenCalledExactlyOnceWith(
-      agent,
-      "channel",
-      "request-to-stop",
-    );
-    expect(stop).toHaveAttribute("aria-disabled", "true");
-  } finally {
-    await act(async () => {
-      rejectStop(new Error("Try again"));
-    });
-  }
-  await user.click(stop);
-  expect(interrupt).toHaveBeenCalledTimes(2);
-  f.update([entry()], { local: [] });
-  expect(screen.queryByRole("button", { name: "Stop Agent" })).toBeNull();
-});
+import {
+  agent,
+  human,
+  other,
+  root,
+  secondRoot,
+  fixture,
+  entry,
+  type Snapshot,
+} from "./typing-indicator-testing";
 
 it("shows an incoming typing preview without invented details, retaining navigation and focus return", async () => {
   const f = fixture(),
diff --git a/src/features/messages/TypingIndicator.tsx b/src/features/messages/TypingIndicator.tsx
index 22e4710e7e..949bdeb687 100644
--- a/src/features/messages/TypingIndicator.tsx
+++ b/src/features/messages/TypingIndicator.tsx
@@ -3,6 +3,7 @@ import { useReplacedTypers } from "../conversation/typing-presentation";
 import { useChannelIdentityNames } from "../identity-names/react";
 import {
   useCallback,
+  useContext,
   useEffect,
   useRef,
   useMemo,
@@ -29,7 +30,9 @@ import {
   OctagonIcon,
 } from "../../shared/design-system/icons";
 import { Button } from "../../shared/design-system/ui/Button";
-import { useToastNotification } from "../../shared/design-system/ui/Toast";
+import { AgentsContext, useAgentsSnapshot } from "../agents/react";
+import { conversationWorkStops } from "../agents/work-stop";
+import { useWorkStops } from "../agents/use-work-stops";
 import activityStyles from "../agents/ActivityRows.module.css";
 import {
   PopoverRoot,
@@ -123,6 +126,24 @@ export function TypingIndicator({
     knownAgents,
   } = useConversationAgents(session, channelId, threadRootId);
   const agents = audience === "humans" ? [] : activeAgents;
+  const hostedAgents = useContext(AgentsContext);
+  useAgentsSnapshot(hostedAgents);
+  const controls = new Map(
+    agents.map((agent) => [
+      agent,
+      conversationWorkStops(
+        activity,
+        agent,
+        channelId,
+        threadRootId,
+        session.agentActivity,
+        hostedAgents,
+      ),
+    ]),
+  );
+  const { pending, stop } = useWorkStops(
+    [...controls.values()].flatMap((rows) => rows.map((row) => row.control)),
+  );
   const resolveName = useChannelIdentityNames(session, channelId);
   const profiles = useSyncExternalStore(
     session.profiles.subscribe,
@@ -158,9 +179,9 @@ export function TypingIndicator({
   );
   const name = (pubkey: string) =>
     resolveName(pubkey, profiles.get(pubkey)?.name ?? pubkey.slice(0, 10));
-  const scopeLabel = (pubkey: string) => {
+  const scopeLabel = (pubkey: string, workRoot?: string) => {
     if (threadRootId) return undefined;
-    const roots = details.get(pubkey)?.roots ?? [];
+    const roots = workRoot ? [workRoot] : (details.get(pubkey)?.roots ?? []);
     const labels = roots.slice(0, 2).map((root) => {
       if (root === null) return "Channel conversation";
       if (!root) return "Work with unconfirmed thread";
@@ -195,8 +216,17 @@ export function TypingIndicator({
     pubkey: string,
     navigate: (target: string, origin?: MessageLinkOrigin) => void,
     work?: LocalWork,
+    workRoot?: string,
   ) => {
-    const detail = details.get(pubkey);
+    const detail = workRoot
+      ? currentActivity(
+          activity,
+          entries,
+          knownAgents,
+          channelId,
+          workRoot,
+        ).get(pubkey)
+      : details.get(pubkey);
     if (!detail) return null;
     const target = activityTarget(pubkey);
     const canOpen = !!target && !!openActivity && !!canOpenActivity?.(target);
@@ -204,6 +234,7 @@ export function TypingIndicator({
       (value) => typeof value === "string",
     );
     const conversationRoot =
+      workRoot ??
       work?.threadRootId ??
       threadRootId ??
       (knownRoots.length === 1 ? knownRoots[0] : undefined);
@@ -221,7 +252,7 @@ export function TypingIndicator({
     const scope =
       detail.roots.length === 1 && detail.roots[0] === null
         ? undefined
-        : scopeLabel(pubkey);
+        : scopeLabel(pubkey, workRoot);
     const viewActivity =
       canOpen && target
         ? () => navigate(target, activityOrigin(pubkey))
@@ -341,36 +372,33 @@ export function TypingIndicator({
               >
                 {(navigate) =>
                   agents.flatMap((pubkey) => {
-                    const controls = session.agentActivity;
-                    const requests = (activity?.local ?? []).filter(
-                      (work) =>
-                        work.agent === pubkey &&
-                        work.channelId === channelId &&
-                        (!threadRootId || work.threadRootId === threadRootId) &&
-                        work.stoppable &&
-                        (work.state === "working" || work.state === "waiting"),
-                    );
-                    if (!controls || !requests.length)
+                    const requests = controls.get(pubkey) ?? [];
+                    if (!requests.length)
                       return (
                         <div key={pubkey}>{agentStatus(pubkey, navigate)}</div>
                       );
-                    return requests.map((work) => (
-                      <NavigationCard key={`${pubkey}:${work.messageId}`}>
-                        {agentStatus(pubkey, navigate, work)}
-                        <span className={styles.stopAction}>
-                          <RequestStop
-                            name={name(pubkey)}
-                            stop={() =>
-                              controls.interrupt(
-                                pubkey,
-                                channelId,
-                                work.messageId,
-                              )
-                            }
-                          />
-                        </span>
-                      </NavigationCard>
-                    ));
+                    return requests.map(
+                      ({ control, work, threadRootId: root }) => (
+                        <NavigationCard key={control.key}>
+                          {agentStatus(pubkey, navigate, work, root)}
+                          <span className={styles.stopAction}>
+                            <Button
+                              size="sm"
+                              variant="plain"
+                              aria-label={`Stop ${name(pubkey)}${root && !threadRootId ? ` in ${scopeLabel(pubkey, root)}` : ""}`}
+                              loading={pending.has(control.key)}
+                              onClick={() => void stop(control, name(pubkey))}
+                            >
+                              <OctagonIcon
+                                className={styles.stopIcon}
+                                aria-hidden="true"
+                              />
+                              {pending.has(control.key) ? "Stopping…" : "Stop"}
+                            </Button>
+                          </span>
+                        </NavigationCard>
+                      ),
+                    );
                   })
                 }
               </AgentChooser>
@@ -392,46 +420,6 @@ export function TypingIndicator({
   );
 }
 
-function RequestStop({
-  name,
-  stop,
-}: {
-  name: string;
-  stop: () => Promise<void>;
-}) {
-  const [stopping, setStopping] = useState(false);
-  const pending = useRef(false);
-  const notify = useToastNotification();
-  return (
-    <Button
-      size="sm"
-      variant="plain"
-      aria-label={`Stop ${name}`}
-      loading={stopping}
-      onClick={async () => {
-        if (pending.current) return;
-        pending.current = true;
-        setStopping(true);
-        try {
-          await stop();
-          notify(`Stopped ${name}`, "success");
-        } catch (error) {
-          notify(
-            `Couldn’t stop ${name}. ${error instanceof Error ? error.message : String(error)}`,
-            "error",
-          );
-        } finally {
-          pending.current = false;
-          setStopping(false);
-        }
-      }}
-    >
-      <OctagonIcon className={styles.stopIcon} aria-hidden="true" />
-      {stopping ? "Stopping…" : "Stop"}
-    </Button>
-  );
-}
-
 function AgentChooser({
   label,
   content,
diff --git a/src/features/messages/activity-groups.test.ts b/src/features/messages/activity-groups.test.ts
index 108349da18..8320870348 100644
--- a/src/features/messages/activity-groups.test.ts
+++ b/src/features/messages/activity-groups.test.ts
@@ -132,15 +132,6 @@ it.each([1, 2])(
     expect(
       activityDisplayRows(rows, completed.groups).map((row) => row.id),
     ).toEqual(["reply"]);
-    expect([...completed.completedReplies]).toEqual(["reply"]);
-    const request = { ...reply, id: "request", authorId: "human" };
-    expect([
-      ...activityPresentation(
-        [request, ...history],
-        undefined,
-        new Set(["agent"]),
-      ).completedReplies,
-    ]).toEqual([]);
     const otherReply = { ...reply, authorId: "human" };
     const pending = [...history, otherReply];
     expect(
diff --git a/src/features/messages/activity-presentation.ts b/src/features/messages/activity-presentation.ts
index f5f42f9b4f..524519a4a7 100644
--- a/src/features/messages/activity-presentation.ts
+++ b/src/features/messages/activity-presentation.ts
@@ -19,7 +19,6 @@ export type ActivityPresentation = ActivityRun & {
   done: boolean;
   working: boolean;
   standalone: boolean;
-  completedReply: ChannelMessage | undefined;
 };
 export type ActivityRowPresentation = {
   requestId: string | undefined;
@@ -166,15 +165,9 @@ export function activityPresentation(
       done,
       working: working.size > 0,
       standalone,
-      completedReply,
     });
   }
-  const completedReplies = new Set(
-    groups.flatMap((group) =>
-      group.completedReply ? [group.completedReply.id] : [],
-    ),
-  );
-  return { groups, byRow, representedAgents, bubbleAnchors, completedReplies };
+  return { groups, byRow, representedAgents, bubbleAnchors };
 }
 export function useActivityPresentation(
   rows: readonly ChannelMessage[],
@@ -193,9 +186,12 @@ export function useActivityPresentation(
 export function activityDisplayRows<T extends ChannelMessage>(
   rows: readonly T[],
   groups: readonly ActivityPresentation[],
+  revealedId?: string,
 ): readonly T[] {
   const completed = new Set(
     groups.filter((group) => group.done).flatMap((group) => group.ids),
   );
-  return completed.size ? rows.filter((row) => !completed.has(row.id)) : rows;
+  return completed.size
+    ? rows.filter((row) => row.id === revealedId || !completed.has(row.id))
+    : rows;
 }
diff --git a/src/features/messages/typing-indicator-testing.ts b/src/features/messages/typing-indicator-testing.ts
new file mode 100644
index 0000000000..f6ca609dda
--- /dev/null
+++ b/src/features/messages/typing-indicator-testing.ts
@@ -0,0 +1,69 @@
+import { act } from "@testing-library/react";
+import { vi } from "vitest";
+import type { RelaySession } from "../relay/session";
+import type { TypingEntry } from "../relay/typing";
+export const agent = "a".repeat(64),
+  human = "b".repeat(64),
+  other = "c".repeat(64);
+export const root = "d".repeat(64),
+  secondRoot = "e".repeat(64);
+export type Snapshot = ReturnType<RelaySession["agentActivity"]["snapshot"]>;
+export function fixture() {
+  const listeners = new Set<() => void>();
+  let typing: readonly TypingEntry[] = [];
+  let activity: Snapshot = {
+    status: "listening",
+    typing: [],
+    records: [],
+    turns: [],
+    trimmed: 0,
+  };
+  const subscribe = (listener: () => void) => {
+    listeners.add(listener);
+    return () => {
+      listeners.delete(listener);
+    };
+  };
+  const profiles = new Map([
+    [agent, { name: "Agent" }],
+    [human, { name: "Human" }],
+    [
+      "public-agent",
+      { name: "Sam’s assistant", isAgent: true, ownerPubkey: "sam" },
+    ],
+    [other, { name: "Other" }],
+  ]);
+  const library = { identities: [{ pubkey: agent }, { pubkey: other }] };
+  const rows = [
+    { id: root, content: "First task" },
+    { id: secondRoot, content: "Second task" },
+  ];
+  const ensure = vi.fn();
+  const session = {
+    viewer: "viewer",
+    typing: { snapshot: () => typing, subscribe },
+    agentActivity: { snapshot: () => activity, subscribe },
+    profiles: { snapshot: () => profiles, subscribe, ensure },
+    agentChoices: { snapshot: () => library, subscribe },
+    channels: {
+      window: () => ({ rows }),
+      subscribeWindow: (_id: string, fn: () => void) => subscribe(fn),
+      ensure,
+    },
+  } as unknown as RelaySession;
+  return {
+    session,
+    ensure,
+    update(entries: readonly TypingEntry[], patch: Partial<Snapshot> = {}) {
+      act(() => {
+        typing = entries;
+        activity = { ...activity, ...patch };
+        for (const listener of listeners) listener();
+      });
+    },
+  };
+}
+export const entry = (
+  pubkey = agent,
+  threadRootId: string | undefined = root,
+): TypingEntry => ({ pubkey, channelId: "channel", threadRootId });

From 54bc49e9cc147758646a770e8950c75a8f40a253 Mon Sep 17 00:00:00 2001
From: Arjun Mahanti <arjun@squareup.com>
Date: Thu, 29 Oct 2026 16:39:25 -0400
Subject: [PATCH 19/19] Preserve activity lifecycle ownership across message
 updates

Co-authored-by: OpenAI Codex <noreply@openai.com>
Signed-off-by: Arjun Mahanti <arjun@squareup.com>
---
 src/features/agents/use-work-stops.test.tsx   |  48 +++++++
 src/features/agents/use-work-stops.ts         |   5 +-
 .../messages/ActivityGroupPreview.tsx         |  44 +++++-
 .../messages/ChannelTimeline.report.test.tsx  |  72 +++++++++-
 src/features/messages/ChannelTimeline.tsx     |  98 +++++++------
 .../MediaReviewViewer.comments.test.tsx       |  40 +++++-
 src/features/messages/MediaReviewViewer.tsx   |  15 ++
 src/features/messages/ThreadPanel.tsx         |  24 ++--
 .../messages/activity-presentation.ts         |  33 ++++-
 .../messages/message-grouping.test.ts         |  22 ++-
 src/features/messages/message-grouping.ts     |   6 +-
 tests/browser/activity-lifecycle.spec.mjs     | 134 ++++++++++++++++++
 12 files changed, 470 insertions(+), 71 deletions(-)
 create mode 100644 src/features/agents/use-work-stops.test.tsx
 create mode 100644 tests/browser/activity-lifecycle.spec.mjs

diff --git a/src/features/agents/use-work-stops.test.tsx b/src/features/agents/use-work-stops.test.tsx
new file mode 100644
index 0000000000..ac999914f1
--- /dev/null
+++ b/src/features/agents/use-work-stops.test.tsx
@@ -0,0 +1,48 @@
+// @vitest-environment jsdom
+import {
+  act,
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+} from "@testing-library/react";
+import { afterEach, expect, it, vi } from "vitest";
+import { useWorkStops } from "./use-work-stops";
+import type { WorkStop } from "./work-stop";
+
+const notify = vi.hoisted(() => vi.fn());
+vi.mock("../../shared/design-system/ui/Toast", () => ({
+  useToastNotification: () => notify,
+}));
+afterEach(() => {
+  cleanup();
+  notify.mockClear();
+});
+
+it("reports a rejected Stop even after its indicator retires", async () => {
+  let reject!: (error: Error) => void;
+  const control: WorkStop = {
+    key: "request",
+    lifecycle: true,
+    interrupt: () =>
+      new Promise<void>((_resolve, fail) => {
+        reject = fail;
+      }),
+  };
+  function Indicator() {
+    const { stop } = useWorkStops([control]);
+    return (
+      <button type="button" onClick={() => void stop(control, "Agent")}>
+        Stop
+      </button>
+    );
+  }
+  const view = render(<Indicator />);
+  fireEvent.click(screen.getByRole("button", { name: "Stop" }));
+  view.unmount();
+  await act(async () => reject(new Error("Connection lost")));
+  expect(notify).toHaveBeenCalledExactlyOnceWith(
+    "Couldn’t stop Agent. Connection lost",
+    "error",
+  );
+});
diff --git a/src/features/agents/use-work-stops.ts b/src/features/agents/use-work-stops.ts
index 50920d24c9..0c9e085ca9 100644
--- a/src/features/agents/use-work-stops.ts
+++ b/src/features/agents/use-work-stops.ts
@@ -68,8 +68,9 @@ export function useWorkStops(controls: readonly WorkStop[]) {
         );
       }
     } catch (error) {
-      if (attempts.current.get(key) !== attempt) return;
-      forget(key);
+      const current = attempts.current.get(key);
+      if (current && current !== attempt) return;
+      if (current) forget(key);
       notify(
         `Couldn’t stop ${name}. ${error instanceof Error ? error.message : String(error)}`,
         "error",
diff --git a/src/features/messages/ActivityGroupPreview.tsx b/src/features/messages/ActivityGroupPreview.tsx
index c9b4d3e799..1d0e6b05b2 100644
--- a/src/features/messages/ActivityGroupPreview.tsx
+++ b/src/features/messages/ActivityGroupPreview.tsx
@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+import { useLayoutEffect, useRef, type ReactNode } from "react";
 import { CaretUpIcon } from "../../shared/design-system/icons";
 import { AgentResponsePreview } from "./AgentResponsePreview";
 import { useActivityIndicator } from "./use-activity-indicator";
@@ -31,6 +31,40 @@ export function ActivityGroupPreview({
   layout?: "timeline" | "thread";
   renderHistory?: (row: ChannelMessage) => ReactNode;
 }) {
+  const container = useRef<HTMLDivElement>(null);
+  useLayoutEffect(() => {
+    const node = container.current;
+    return () => {
+      const scope = node?.closest<HTMLElement>("[data-message-scroller]");
+      const focused = node?.ownerDocument.activeElement;
+      if (!node || !scope || !focused || !node.contains(focused)) return;
+      const top = node.getBoundingClientRect().top;
+      queueMicrotask(() => {
+        if (
+          !scope.isConnected ||
+          scope.ownerDocument.activeElement !== scope.ownerDocument.body
+        )
+          return;
+        const buttons = [
+          ...scope.querySelectorAll<HTMLButtonElement>(
+            "[data-message-id] button:not([disabled])",
+          ),
+        ];
+        const target = buttons
+          .filter(
+            (button) =>
+              button.getClientRects().length &&
+              !button.closest("[inert], [aria-hidden='true']"),
+          )
+          .sort(
+            (a, b) =>
+              Math.abs(a.getBoundingClientRect().top - top) -
+              Math.abs(b.getBoundingClientRect().top - top),
+          )[0];
+        (target ?? scope).focus({ preventScroll: true });
+      });
+    };
+  }, []);
   const { latest: row, history, participants, done, working } = group;
   const live = useActivityIndicator(
     session,
@@ -39,7 +73,7 @@ export function ActivityGroupPreview({
     participants,
     group.requestId,
   );
-  if (done) return null;
+  if (done && !group.retained) return null;
   const primary = history[0]?.authorId ?? row.authorId;
   const profile = profiles.get(primary);
   const name = profile?.name ?? primary.slice(0, 10);
@@ -104,7 +138,11 @@ export function ActivityGroupPreview({
       picture={avatarMedia(profile?.picture, media)}
       layout={layout}
     >
-      <div className={styles.standaloneActivity} data-contained-history="">
+      <div
+        ref={container}
+        className={styles.standaloneActivity}
+        data-contained-history=""
+      >
         {content}
         {expanded && renderHistory && (
           <div className={styles.containedActivityHistory}>
diff --git a/src/features/messages/ChannelTimeline.report.test.tsx b/src/features/messages/ChannelTimeline.report.test.tsx
index d5dedce065..6cba06c2a2 100644
--- a/src/features/messages/ChannelTimeline.report.test.tsx
+++ b/src/features/messages/ChannelTimeline.report.test.tsx
@@ -1,5 +1,6 @@
 // @vitest-environment jsdom
 import "../../../tests/sonner-dom";
+import "@testing-library/jest-dom/vitest";
 import { afterEach, beforeEach, expect, it, vi } from "vitest";
 import {
   act,
@@ -94,7 +95,11 @@ afterEach(() => {
   localStorage.clear();
 });
 
-function mount(publish: (event: RelayEvent) => Promise<void>) {
+function mount(
+  publish: (event: RelayEvent) => Promise<void>,
+  targetEvent = target,
+  initial = [targetEvent, neighbor],
+) {
   let live: LiveCallbacks | undefined;
   const owner = createRelaySession(
     {
@@ -109,7 +114,7 @@ function mount(publish: (event: RelayEvent) => Promise<void>) {
   );
   owners.push(owner);
   owner.session.channels.ensure("c");
-  live?.receive([roster(relay, "c", [viewer.pubkey], 1), target, neighbor]);
+  live?.receive([roster(relay, "c", [viewer.pubkey], 1), ...initial]);
   const tree = () => (
     <StrictMode>
       <ToastProvider>
@@ -125,10 +130,18 @@ function mount(publish: (event: RelayEvent) => Promise<void>) {
   );
   const result = render(tree());
   const row = () =>
-    document.querySelector<HTMLElement>(`[data-message-id="${target.id}"]`);
+    document.querySelector<HTMLElement>(
+      `[data-message-id="${targetEvent.id}"]`,
+    );
   const neighborRow = () =>
     document.querySelector(`[data-message-id="${neighbor.id}"]`);
   return {
+    receive(event: RelayEvent) {
+      act(() => {
+        live?.receive([event]);
+        result.rerender(tree());
+      });
+    },
     row,
     neighborRow,
     // Scroll the target out of the virtualizer buffer.
@@ -149,10 +162,13 @@ function mount(publish: (event: RelayEvent) => Promise<void>) {
 
 async function openReport(row: HTMLElement) {
   const user = userEvent.setup();
-  const trigger = within(row).getByRole("button", {
+  const more = within(row).queryByRole("button", {
     name: "More message actions",
   });
-  await user.click(trigger);
+  const trigger =
+    more ?? within(row).getByRole("button", { name: /Working on the report/ });
+  if (more) await user.click(trigger);
+  else fireEvent.contextMenu(trigger);
   await user.click(await screen.findByRole("menuitem", { name: "Report" }));
   await screen.findByRole("dialog", { name: "Report message" });
   return { user, trigger };
@@ -322,3 +338,49 @@ it("closing the image viewer before the report notice ends keeps the row pinned
   await waitFor(() => expect(h.row()).toBeNull());
   expect(h.neighborRow()).not.toBeNull();
 });
+
+it.each(["draft", "pending"] as const)(
+  "retains the contained report owner through completion with a %s report",
+  async (phase) => {
+    let release!: () => void;
+    const publish = vi.fn(
+      () =>
+        new Promise<void>((resolve) => {
+          release = resolve;
+        }),
+    );
+    const step = message(other, "c", "Working on the report", 2, [
+      ["audience", "agents"],
+    ]);
+    const h = mount(publish, step, [step]);
+    await userEvent.click(
+      screen.getByRole("button", { name: /Show activity history/ }),
+    );
+    const original = h.row();
+    if (!original) throw new Error("Missing contained activity");
+    const { user } = await openReport(original);
+    await user.click(screen.getByRole("radio", { name: "Spam" }));
+    const context = screen.getByRole("textbox", {
+      name: "Additional context (optional)",
+    });
+    await user.type(context, "Keep this draft");
+    try {
+      if (phase === "pending") {
+        await user.click(screen.getByRole("button", { name: "Submit report" }));
+        await waitFor(() => expect(publish).toHaveBeenCalledOnce());
+      }
+      h.receive(message(other, "c", "Finished the work", 3));
+      expect(h.row()).toBe(original);
+      expect(
+        screen.getByRole("dialog", { name: "Report message" }),
+      ).toBeTruthy();
+      expect(context).toHaveValue("Keep this draft");
+    } finally {
+      if (phase === "pending") await act(async () => release());
+    }
+    if (phase === "pending")
+      expect(
+        await screen.findByText("Report submitted to community moderators"),
+      ).toBeTruthy();
+  },
+);
diff --git a/src/features/messages/ChannelTimeline.tsx b/src/features/messages/ChannelTimeline.tsx
index 108a5b1e2b..cba0772fc5 100644
--- a/src/features/messages/ChannelTimeline.tsx
+++ b/src/features/messages/ChannelTimeline.tsx
@@ -246,10 +246,28 @@ function Timeline({
   const [expandedActivity, setExpandedActivity] = useState<ReadonlySet<string>>(
     () => new Set(),
   );
+  // Holders are counted per row: a report notice and an image viewer can hold
+  // the same row, and releasing one must not drop the other's pin.
+  const [pinnedIds, setPinnedIds] = useState<ReadonlyMap<string, number>>(
+    () => new Map(),
+  );
+  const keepRowMounted = useCallback((id: string) => {
+    setPinnedIds((ids) => new Map(ids).set(id, (ids.get(id) ?? 0) + 1));
+    return () =>
+      setPinnedIds((ids) => {
+        const next = new Map(ids);
+        const count = (ids.get(id) ?? 0) - 1;
+        if (count > 0) next.set(id, count);
+        else next.delete(id);
+        return next;
+      });
+  }, []);
   const presentation = useActivityPresentation(
     chronologicalRows,
     queries.agentActivity,
     agentPubkeys,
+    undefined,
+    pinnedIds,
   );
   const activity = presentation.groups;
   const { agents: liveAgents } = useConversationAgents(
@@ -287,7 +305,7 @@ function Timeline({
   }
   const disclosures = new Map(
     activity
-      .filter((group) => !group.done)
+      .filter((group) => !group.done || group.retained)
       .map((group) => [
         group.ids[0],
         {
@@ -301,7 +319,8 @@ function Timeline({
     activity
       .filter(
         (group) =>
-          !group.done && group.ids.some((id) => expandedActivity.has(id)),
+          (!group.done || group.retained) &&
+          group.ids.some((id) => expandedActivity.has(id)),
       )
       .flatMap((group) => group.ids.map((id) => [id, group.ids[0]] as const)),
   );
@@ -324,22 +343,6 @@ function Timeline({
   const [geometry] = useState(() => geometryFor(queries.channels));
   const [focusedMessageId, setFocusedMessageId] = useState<string>();
   const [focusedActivityId, setFocusedActivityId] = useState<string>();
-  // Holders are counted per row: a report notice and an image viewer can hold
-  // the same row, and releasing one must not drop the other's pin.
-  const [pinnedIds, setPinnedIds] = useState<ReadonlyMap<string, number>>(
-    () => new Map(),
-  );
-  const keepRowMounted = useCallback((id: string) => {
-    setPinnedIds((ids) => new Map(ids).set(id, (ids.get(id) ?? 0) + 1));
-    return () =>
-      setPinnedIds((ids) => {
-        const next = new Map(ids);
-        const count = (ids.get(id) ?? 0) - 1;
-        if (count > 0) next.set(id, count);
-        else next.delete(id);
-        return next;
-      });
-  }, []);
   // Folding, stacking, and cached measurements share the same visibility.
   const foldedActivity = new Set(
     [...hiddenActivity].filter(
@@ -381,6 +384,20 @@ function Timeline({
   );
   const scroller = useRef<HTMLElement>(null);
   const edge = useRef<HTMLDivElement>(null);
+  const activityTail = useRef<HTMLDivElement>(null);
+  useLayoutEffect(() => {
+    const tail = activityTail.current;
+    const element = scroller.current;
+    if (!tail || !element || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(() => {
+      if (settled.current && follow.current) {
+        layoutCorrection.current = true;
+        element.scrollTop = element.scrollHeight;
+      }
+    });
+    observer.observe(tail);
+    return () => observer.disconnect();
+  }, []);
   // Keep pagination space through EOF so removing its control cannot change
   // Virtua's start margin in the same measurement cycle as a prepend.
   const [reserveHistorySpace, setReserveHistorySpace] = useState(false);
@@ -535,8 +552,11 @@ function Timeline({
     setShowJumpToLatest(false);
     setNewMessageCount(0);
     layoutCorrection.current = true;
+    const tailHeight =
+      activityTail.current?.getBoundingClientRect().height ?? 0;
     handle.current.scrollToIndex(rows.length - 1, {
       align: "end",
+      ...(tailHeight ? { offset: tailHeight } : {}),
     });
   }, [rows.length]);
   const inlineSignal = inlineTarget?.signal;
@@ -946,10 +966,16 @@ function Timeline({
         follow.current = false;
       } else if (follow.current) {
         layoutCorrection.current = true;
-        handle.current.scrollToIndex(
-          revealIndex >= 0 ? revealIndex : rows.length - 1,
-          { align: "end" },
-        );
+        if (revealIndex >= 0)
+          handle.current.scrollToIndex(revealIndex, { align: "end" });
+        else {
+          const tailHeight =
+            activityTail.current?.getBoundingClientRect().height ?? 0;
+          handle.current.scrollToIndex(rows.length - 1, {
+            align: "end",
+            ...(tailHeight ? { offset: tailHeight } : {}),
+          });
+        }
         if (revealIndex >= 0) {
           revealed.current = revealMessageId;
           pendingReveal.current = undefined;
@@ -1383,39 +1409,27 @@ function Timeline({
                     renderMessage(row)
                   )}
                 </ActivityExpansion>
-                {index === rows.length - 1 && (
-                  <>
-                    <TypingIndicator
-                      audience="agents"
-                      inFlow
-                      session={queries}
-                      channelId={channelId}
-                      previousAuthor={
-                        lastPublicMessage && !lastPublicMessage.membership
-                          ? lastPublicMessage.authorId
-                          : undefined
-                      }
-                      openActivity={onOpenLink}
-                      canOpenActivity={canOpenLink}
-                    />
-                    <div className={styles.timelineEnd} aria-hidden="true" />
-                  </>
-                )}
               </Fragment>
             );
           })}
         </Virtualizer>
       )}
-      {!rows.length && (
+      <div ref={activityTail}>
         <TypingIndicator
           audience="agents"
           inFlow
           session={queries}
           channelId={channelId}
+          previousAuthor={
+            lastPublicMessage && !lastPublicMessage.membership
+              ? lastPublicMessage.authorId
+              : undefined
+          }
           openActivity={onOpenLink}
           canOpenActivity={canOpenLink}
         />
-      )}
+        <div className={styles.timelineEnd} aria-hidden="true" />
+      </div>
       {!rows.length &&
         !window.hasMore &&
         window.status === "ready" &&
diff --git a/src/features/messages/MediaReviewViewer.comments.test.tsx b/src/features/messages/MediaReviewViewer.comments.test.tsx
index 9b4af75bc8..aa1f810b8c 100644
--- a/src/features/messages/MediaReviewViewer.comments.test.tsx
+++ b/src/features/messages/MediaReviewViewer.comments.test.tsx
@@ -37,6 +37,7 @@ afterEach(() => {
 type MediaKind = "image" | "video";
 type ReviewFixtureOptions = {
   kind: MediaKind;
+  typingAgent?: ReturnType<typeof keypair>;
   openComments?: boolean;
   replies?: (
     viewer: ReturnType<typeof keypair>,
@@ -55,6 +56,7 @@ function mime(kind: MediaKind) {
 
 async function setupReview({
   kind,
+  typingAgent,
   openComments = true,
   replies: buildReplies = () => [],
   extraRootTags = [],
@@ -102,7 +104,20 @@ async function setupReview({
     signed(viewer, template),
   );
   const publish = vi.fn(async () => {});
-  const events = [root, ...replies];
+  const events = [
+    root,
+    ...replies,
+    ...(typingAgent
+      ? [
+          signed(typingAgent, {
+            kind: 0,
+            content: JSON.stringify({ name: "Comment agent", is_agent: true }),
+            tags: [],
+            created_at: 1,
+          }),
+        ]
+      : []),
+  ];
   const owner = createRelaySession(
     {
       viewer: viewer.pubkey,
@@ -111,6 +126,8 @@ async function setupReview({
       writer: { sign, publish },
       async query(filters) {
         return filters.flatMap((filter) => {
+          if (filter.kinds?.includes(0))
+            return events.filter((event) => event.kind === 0);
           if (filter.kinds?.includes(39002) || filter.kinds?.includes(39000))
             return [
               roster(relay, "one", [viewer.pubkey]),
@@ -791,3 +808,24 @@ it("opens image comments by default when the thread contains replies", async ()
     screen.getByRole("button", { name: "Hide comments" }),
   ).toBeInTheDocument();
 });
+
+it.each(["image", "video"] as const)(
+  "shows incoming agent typing in %s comments before any reply arrives",
+  async (kind) => {
+    const typingAgent = keypair();
+    const { owner, root } = await setupReview({ kind, typingAgent });
+    const agent = typingAgent.pubkey;
+    await owner.session.profiles.ensure([agent], "background");
+    const typing = [{ pubkey: agent, channelId: "one", threadRootId: root.id }];
+    vi.spyOn(owner.session.typing, "snapshot").mockReturnValue(typing);
+    // Closing and reopening the comments mounts the real host with the new signal.
+    fireEvent.click(screen.getByRole("button", { name: "Hide comments" }));
+    fireEvent.click(screen.getByRole("button", { name: "Show comments" }));
+    const comments = await screen.findByRole("region", {
+      name: "Media comments",
+    });
+    expect(
+      within(comments).getByRole("button", { name: /Activity:.*working/ }),
+    ).toBeVisible();
+  },
+);
diff --git a/src/features/messages/MediaReviewViewer.tsx b/src/features/messages/MediaReviewViewer.tsx
index 76416625f2..3c175b79a9 100644
--- a/src/features/messages/MediaReviewViewer.tsx
+++ b/src/features/messages/MediaReviewViewer.tsx
@@ -1,3 +1,4 @@
+import { TypingIndicator } from "./TypingIndicator";
 import { workflowLabel } from "../relay/workflow-attribution";
 import { MessageEditScope } from "./MessageEditScope";
 import { useReviewSidebarMotion } from "./use-review-sidebar-motion";
@@ -456,6 +457,8 @@ function ReviewShell({
             {rootId && source ? (
               <MessageEditScope>
                 <ReviewComments
+                  channelId={channelId}
+                  threadRootId={rootId}
                   selectedComment={selectedComment}
                   replies={replies}
                   limited={limited}
@@ -579,6 +582,8 @@ function ReviewShell({
 }
 
 function ReviewComments({
+  channelId,
+  threadRootId,
   replies,
   selectedComment,
   limited,
@@ -588,6 +593,8 @@ function ReviewComments({
   seek,
   selectAttachment,
 }: {
+  channelId: string;
+  threadRootId: string;
   replies: ReturnType<ThreadView["snapshot"]>["replies"];
   selectedComment?: string | undefined;
   limited: boolean;
@@ -668,6 +675,14 @@ function ReviewComments({
             </div>
           );
         })}
+        <TypingIndicator
+          session={session}
+          channelId={channelId}
+          threadRootId={threadRootId}
+          audience="agents"
+          inFlow
+          previousAuthor={replies.at(-1)?.authorId}
+        />
         {!replies.length && (
           <p className={styles.threadNote}>
             No comments yet. Add the first below.
diff --git a/src/features/messages/ThreadPanel.tsx b/src/features/messages/ThreadPanel.tsx
index 5308fb71a5..e86bba9ca5 100644
--- a/src/features/messages/ThreadPanel.tsx
+++ b/src/features/messages/ThreadPanel.tsx
@@ -1686,6 +1686,18 @@ function ThreadMessages({
             )}
             {renderReplies(undefined)}
           </ol>
+          {!positioning && rootId && (
+            <TypingIndicator
+              audience="agents"
+              inFlow
+              session={session}
+              channelId={channelId}
+              threadRootId={rootId}
+              previousAuthor={joinsLive ? lastMessage?.authorId : undefined}
+              openActivity={onOpenLink}
+              canOpenActivity={canOpenLink}
+            />
+          )}
         </div>
         {requireReadyRoot &&
           snapshot.root &&
@@ -1695,18 +1707,6 @@ function ThreadMessages({
               to check the destination.
             </p>
           )}
-        {!positioning && rootId && (
-          <TypingIndicator
-            audience="agents"
-            inFlow
-            session={session}
-            channelId={channelId}
-            threadRootId={rootId}
-            previousAuthor={joinsLive ? lastMessage?.authorId : undefined}
-            openActivity={onOpenLink}
-            canOpenActivity={canOpenLink}
-          />
-        )}
         {positioning || (snapshot.status === "loading" && !rows.length) ? (
           <ThreadLoading />
         ) : null}
diff --git a/src/features/messages/activity-presentation.ts b/src/features/messages/activity-presentation.ts
index 524519a4a7..8ff65c1b12 100644
--- a/src/features/messages/activity-presentation.ts
+++ b/src/features/messages/activity-presentation.ts
@@ -1,4 +1,4 @@
-import { useMemo, useSyncExternalStore } from "react";
+import { useMemo, useRef, useSyncExternalStore } from "react";
 import type { ChannelMessage } from "../relay/contracts";
 import type { RelaySession } from "../relay/session";
 import { requestWork } from "../agents/request-work";
@@ -17,6 +17,7 @@ type ActivityRun = {
 };
 export type ActivityPresentation = ActivityRun & {
   done: boolean;
+  retained?: boolean;
   working: boolean;
   standalone: boolean;
 };
@@ -174,12 +175,36 @@ export function useActivityPresentation(
   activity: Activity | undefined,
   agents: ReadonlySet<string> | undefined,
   rootId?: string,
+  pinnedIds?: ReadonlyMap<string, number>,
 ) {
   const snapshot = useActivitySnapshot(activity);
-  return useMemo(
+  const projection = useMemo(
     () => activityPresentation(rows, snapshot, agents, rootId),
     [rows, snapshot, agents, rootId],
   );
+  const prior = useRef(new Map<string, ActivityPresentation>());
+  const groups = useMemo(() => {
+    const groups = projection.groups.map((group) => {
+      const key = group.ids[0] ?? "";
+      const previous = prior.current.get(key);
+      // Retain the same contained tree, not merely its individual message IDs:
+      // report dialogs and their pending submissions belong to that tree.
+      return previous &&
+        group.done &&
+        group.ids.some((id) => pinnedIds?.has(id))
+        ? {
+            ...previous,
+            done: true,
+            working: false,
+            retained: true,
+            followingMessage: group.followingMessage,
+          }
+        : group;
+    });
+    prior.current = new Map(groups.map((group) => [group.ids[0] ?? "", group]));
+    return groups;
+  }, [projection, pinnedIds]);
+  return { ...projection, groups };
 }
 
 /** Finished work stays in Activity rather than the conversation flow. */
@@ -189,7 +214,9 @@ export function activityDisplayRows<T extends ChannelMessage>(
   revealedId?: string,
 ): readonly T[] {
   const completed = new Set(
-    groups.filter((group) => group.done).flatMap((group) => group.ids),
+    groups
+      .filter((group) => group.done && !group.retained)
+      .flatMap((group) => group.ids),
   );
   return completed.size
     ? rows.filter((row) => row.id === revealedId || !completed.has(row.id))
diff --git a/src/features/messages/message-grouping.test.ts b/src/features/messages/message-grouping.test.ts
index 282386818b..da5863983c 100644
--- a/src/features/messages/message-grouping.test.ts
+++ b/src/features/messages/message-grouping.test.ts
@@ -1,6 +1,9 @@
 import { expect, it } from "vitest";
 import type { ChannelMessage } from "../relay/contracts";
-import { continuesMessageGroup } from "./message-grouping";
+import {
+  continuesMessageGroup,
+  publicMessageNeighbor,
+} from "./message-grouping";
 
 const first: ChannelMessage = {
   id: "first",
@@ -81,3 +84,20 @@ it("continues a reply into activity but starts the next public reply separately"
   );
   expect(continuesMessageGroup(activity, first)).toBe(false);
 });
+
+it.each([-1, 1] as const)(
+  "does not bridge another author's visible activity in direction %s",
+  (direction) => {
+    const rows = [
+      first,
+      { ...first, id: "work", authorId: "agent", audience: "agents" as const },
+      { ...first, id: "followup" },
+    ];
+    const index = direction === 1 ? 0 : 2;
+    expect(publicMessageNeighbor(rows, index, direction)).toBeUndefined();
+    rows[1] = { ...first, id: "work", audience: "agents" };
+    expect(publicMessageNeighbor(rows, index, direction)?.id).toBe(
+      direction === 1 ? "followup" : "first",
+    );
+  },
+);
diff --git a/src/features/messages/message-grouping.ts b/src/features/messages/message-grouping.ts
index 5ac628a654..9e6bd20362 100644
--- a/src/features/messages/message-grouping.ts
+++ b/src/features/messages/message-grouping.ts
@@ -23,7 +23,7 @@ export function continuesMessageGroup(
   );
 }
 
-/** Activity belongs inside its surrounding public sender group. */
+/** Only same-author activity can bridge two public messages. */
 export function publicMessageNeighbor(
   rows: readonly ChannelMessage[],
   index: number,
@@ -35,7 +35,9 @@ export function publicMessageNeighbor(
     next += direction
   ) {
     const row = rows[next];
-    if (row && row.audience !== "agents") return row;
+    if (!row) continue;
+    if (row.audience !== "agents") return row;
+    if (rows[index] && row.authorId !== rows[index]?.authorId) return undefined;
   }
   return undefined;
 }
diff --git a/tests/browser/activity-lifecycle.spec.mjs b/tests/browser/activity-lifecycle.spec.mjs
new file mode 100644
index 0000000000..356a06e89c
--- /dev/null
+++ b/tests/browser/activity-lifecycle.spec.mjs
@@ -0,0 +1,134 @@
+import { test, expect } from "./fixture.mjs";
+import { open, end, settle } from "./timeline.mjs";
+import { hoverMessage } from "./message-actions.mjs";
+import { generateSecretKey, getPublicKey, finalizeEvent } from "nostr-tools";
+
+test.use({
+  productionBroker: true,
+  readState: true,
+  threadUnread: true,
+  historyCounts: { alpha: 40, beta: 1 },
+});
+
+// Real browser geometry, virtualizer ownership, and native focus cannot be
+// established by DOM-emulator tests.
+for (const inThread of [false, true]) {
+  test(`incoming activity follows the bottom and retains focus through append (${inThread ? "thread" : "channel"})`, async ({
+    page,
+    app,
+  }) => {
+    const key = generateSecretKey();
+    const pubkey = getPublicKey(key);
+    await page.route("**/agent-library", (route) =>
+      route.fulfill({
+        json: {
+          definitions: [],
+          identities: [{ pubkey, name: "Working agent" }],
+        },
+      }),
+    );
+    app.serveProfile(key, { name: "Working agent", is_agent: true });
+    await open(page, app);
+    const root = app.append("primary", "alpha", "Activity lifecycle request");
+    let history = page.getByRole("region", { name: "Channel message history" });
+    if (inThread) {
+      const row = history.locator(`[data-message-id="${root.id}"]`);
+      await hoverMessage(row);
+      await row.getByRole("button", { name: "Reply", exact: true }).click();
+      history = page.getByRole("region", { name: "Thread messages" });
+      for (let i = 0; i < 25; i++)
+        app.append(
+          "primary",
+          "alpha",
+          `Earlier reply ${i}\n\nDetails for this reply.`,
+          true,
+          true,
+          root.id,
+        );
+      await expect(
+        history.getByText("Earlier reply 24", { exact: false }),
+      ).toBeVisible();
+      await history.evaluate((el) => {
+        el.scrollTop = el.scrollHeight;
+        el.dispatchEvent(new Event("scroll"));
+      });
+    } else await end(page);
+    await settle(page, history);
+    const tags = [
+      ["h", "alpha"],
+      ...(inThread
+        ? [
+            ["e", root.id, "", "root"],
+            ["e", root.id, "", "reply"],
+          ]
+        : []),
+    ];
+    let timestamp = Math.floor(Date.now() / 1000);
+    const publish = (kind, content, extra = []) =>
+      app.relay.publish(
+        "primary",
+        finalizeEvent(
+          {
+            kind,
+            content,
+            tags: [...tags, ...extra],
+            created_at: timestamp++,
+          },
+          key,
+        ),
+      );
+    publish(20002, "");
+    const trigger = history.getByRole("button", {
+      name: "Activity: Working agent working",
+    });
+    await expect(trigger).toBeVisible();
+    await expect
+      .poll(() =>
+        history.evaluate((el) =>
+          el.querySelector("[data-conversation-activity]")
+            ? el.scrollHeight - el.clientHeight - el.scrollTop
+            : Number.POSITIVE_INFINITY,
+        ),
+      )
+      .toBeLessThan(2);
+    await trigger.focus();
+    const original = await trigger.elementHandle();
+    app.append(
+      "primary",
+      "alpha",
+      "Another person adds a message",
+      true,
+      true,
+      inThread ? root.id : undefined,
+    );
+    await expect(
+      history.getByText("Another person adds a message", { exact: true }),
+    ).toBeVisible();
+    await expect(trigger).toBeFocused();
+    expect(await original.evaluate((el) => el.isConnected)).toBe(true);
+
+    publish(9, "Checking the lifecycle", [["audience", "agents"]]);
+    const disclosure = history.getByRole("button", {
+      name: /Show activity history:.*Checking the lifecycle/,
+    });
+    await disclosure.click();
+    const collapse = history.getByRole("button", {
+      name: /Collapse activity history/,
+    });
+    await collapse.focus();
+    publish(9, "Completed lifecycle work");
+    await expect(
+      history.getByText("Completed lifecycle work", { exact: true }),
+    ).toBeVisible();
+    await expect(collapse).toHaveCount(0);
+    await expect
+      .poll(() =>
+        history.evaluate(
+          (el) =>
+            el.contains(document.activeElement) &&
+            document.activeElement !== document.body,
+        ),
+      )
+      .toBe(true);
+  });
+}