From 1484b6e0b5d1160aacd5e8e8f3b3533068109456 Mon Sep 17 00:00:00 2001
From: maria-rcks <maria@kuuro.net>
Date: Thu, 29 Oct 2026 21:52:49 -0300
Subject: [PATCH 1/5] fix(web): back-to-back messages from you stack as one
 burst with a single steer label

---
 .../chat/MessagesTimeline.logic.test.ts       | 57 +++++++++++++++++++
 .../components/chat/MessagesTimeline.logic.ts | 40 +++++++++++--
 .../src/components/chat/MessagesTimeline.tsx  | 22 +++----
 .../chat/TimelineUserMessageRow.tsx           | 44 +++++++++++---
 4 files changed, 141 insertions(+), 22 deletions(-)

diff --git a/apps/web/src/components/chat/MessagesTimeline.logic.test.ts b/apps/web/src/components/chat/MessagesTimeline.logic.test.ts
index bd74694dc46af..c94364347f773 100644
--- a/apps/web/src/components/chat/MessagesTimeline.logic.test.ts
+++ b/apps/web/src/components/chat/MessagesTimeline.logic.test.ts
@@ -1390,6 +1390,63 @@ describe("deriveMessagesTimelineRows", () => {
     ]);
   });
 
+  it("stacks back-to-back steers as one burst with a single steer label", () => {
+    const runId = RunId.make("double-steer-run");
+    const time = (second: number) => new Date(Date.UTC(2026, 0, 1, 0, 0, second)).toISOString();
+    const message = (
+      id: string,
+      second: number,
+      role: "user" | "assistant",
+      inputIntent?: "turn_start" | "steer",
+    ): TimelineEntry => ({
+      kind: "message",
+      id,
+      createdAt: time(second),
+      message: {
+        id: MessageId.make(id),
+        role,
+        text: id,
+        runId,
+        ...(inputIntent ? { inputIntent } : {}),
+        createdAt: time(second),
+        updatedAt: time(second),
+        streaming: false,
+      },
+    });
+    const rows = deriveMessagesTimelineRows({
+      timelineEntries: [
+        message("prompt", 0, "user", "turn_start"),
+        {
+          kind: "work",
+          id: "work",
+          createdAt: time(4),
+          entry: { id: "work", createdAt: time(4), runId, label: "Ran command", tone: "tool" },
+        },
+        message("first-steer", 10, "user", "steer"),
+        message("second-steer", 12, "user", "steer"),
+        message("final", 30, "assistant"),
+      ],
+      latestRun: { runId, status: "completed", startedAt: time(0), completedAt: time(30) },
+      isWorking: false,
+      expandedRunIds: new Set(),
+      turnDiffSummaries: [],
+      supportsConversationRollback: false,
+    });
+
+    const byId = new Map(rows.map((row) => [row.id, row]));
+    expect(byId.get("prompt")).not.toHaveProperty("groupedWithNext");
+    expect(byId.get("first-steer")).toMatchObject({
+      groupedWithPrevious: false,
+      groupedWithNext: true,
+      continuesSteer: false,
+    });
+    expect(byId.get("second-steer")).toMatchObject({
+      groupedWithPrevious: true,
+      groupedWithNext: false,
+      continuesSteer: true,
+    });
+  });
+
   it("keeps the previous turn folded while a newly sent message awaits its turn", () => {
     const rows = deriveMessagesTimelineRows({
       timelineEntries: [
diff --git a/apps/web/src/components/chat/MessagesTimeline.logic.ts b/apps/web/src/components/chat/MessagesTimeline.logic.ts
index c26bcf51a718a..65ac8314340ac 100644
--- a/apps/web/src/components/chat/MessagesTimeline.logic.ts
+++ b/apps/web/src/components/chat/MessagesTimeline.logic.ts
@@ -1,4 +1,5 @@
 import { worktreeSetupAgentStarted } from "@t3tools/client-runtime/worktree-setup";
+import { resolveUserMessagePresentation } from "@t3tools/client-runtime/user-message";
 import { isLiveSubagentTurnItem } from "@t3tools/client-runtime/state/subagentRuntime";
 import * as DateTime from "effect/DateTime";
 import * as Equal from "effect/Equal";
@@ -594,6 +595,11 @@ type MessagesTimelineRowContent =
       assistantCopyStreaming: boolean;
       assistantTurnDiffSummary?: TurnDiffSummary | undefined;
       revertTurnCount?: number | undefined;
+      /** Your messages sent back to back stack as one burst, like a chat app. */
+      groupedWithPrevious?: boolean;
+      groupedWithNext?: boolean;
+      /** Set when the message above is a steer too, so the label shows once. */
+      continuesSteer?: boolean;
     }
   | {
       kind: "assistant-meta";
@@ -2134,13 +2140,39 @@ export function deriveMessagesTimelineRows(input: {
   const result = attachTrailingToolGroupsToAssistant(
     attachCreatedThreadSummaries(nextRows, timelineEntries, collapsedFoldMemberIds),
   );
-  return result.map((row, index) =>
-    timelineRowIsWorkLog(row) && timelineRowIsWorkLog(result[index + 1])
-      ? { ...row, continuesWorkLog: true }
-      : row,
+  return result.map((row, index) => {
+    if (timelineRowIsWorkLog(row) && timelineRowIsWorkLog(result[index + 1])) {
+      return { ...row, continuesWorkLog: true };
+    }
+    if (!timelineRowIsOwnUserMessage(row)) return row;
+    const previous = result[index - 1];
+    const groupedWithPrevious = timelineRowIsOwnUserMessage(previous);
+    const groupedWithNext = timelineRowIsOwnUserMessage(result[index + 1]);
+    if (!groupedWithPrevious && !groupedWithNext) return row;
+    return {
+      ...row,
+      groupedWithPrevious,
+      groupedWithNext,
+      continuesSteer:
+        groupedWithPrevious && messageIsSteer(row.message) && messageIsSteer(previous.message),
+    };
+  });
+}
+
+function timelineRowIsOwnUserMessage(
+  row: MessagesTimelineRow | undefined,
+): row is Extract<MessagesTimelineRow, { kind: "message" }> {
+  return (
+    row?.kind === "message" &&
+    row.message.role === "user" &&
+    resolveUserMessagePresentation(row.message).attribution === null
   );
 }
 
+function messageIsSteer(message: ChatMessage): boolean {
+  return message.inputIntent === "steer" || message.inputIntent === "promoted_queued_to_steer";
+}
+
 function timelineRowIsWorkLog(row: MessagesTimelineRow | undefined): boolean {
   return (
     row !== undefined &&
diff --git a/apps/web/src/components/chat/MessagesTimeline.tsx b/apps/web/src/components/chat/MessagesTimeline.tsx
index a9cab1554a3d3..2c276a4dcd453 100644
--- a/apps/web/src/components/chat/MessagesTimeline.tsx
+++ b/apps/web/src/components/chat/MessagesTimeline.tsx
@@ -1433,16 +1433,18 @@ const TimelineRowContent = memo(function TimelineRowContent({ row }: { row: Time
           ? undefined
           : row.kind === "turn-fold" || row.kind === "working"
             ? "pb-1.5"
-            : (row.kind === "message" &&
-                  row.message.role === "assistant" &&
-                  !row.showAssistantMeta) ||
-                row.kind === "worktree-setup" ||
-                row.kind === "event" ||
-                row.kind === "attempt-fold" ||
-                row.kind === "html-render" ||
-                row.kind === "mcp-app"
-              ? "pb-2"
-              : "pb-4",
+            : row.kind === "message" && row.groupedWithNext
+              ? "pb-1"
+              : (row.kind === "message" &&
+                    row.message.role === "assistant" &&
+                    !row.showAssistantMeta) ||
+                  row.kind === "worktree-setup" ||
+                  row.kind === "event" ||
+                  row.kind === "attempt-fold" ||
+                  row.kind === "html-render" ||
+                  row.kind === "mcp-app"
+                ? "pb-2"
+                : "pb-4",
         (row.kind === "message" && row.message.role === "assistant") ||
           row.kind === "assistant-meta"
           ? "group/assistant"
diff --git a/apps/web/src/components/chat/TimelineUserMessageRow.tsx b/apps/web/src/components/chat/TimelineUserMessageRow.tsx
index c4363a1b45983..57b81bef898bb 100644
--- a/apps/web/src/components/chat/TimelineUserMessageRow.tsx
+++ b/apps/web/src/components/chat/TimelineUserMessageRow.tsx
@@ -274,7 +274,13 @@ export function FoldedMessageHeader(props: {
   );
 }
 
-function UserMessageProjectedStatus({ row }: { row: Extract<TimelineRow, { kind: "message" }> }) {
+function UserMessageProjectedStatus({
+  row,
+  className,
+}: {
+  row: Extract<TimelineRow, { kind: "message" }>;
+  className?: string | undefined;
+}) {
   const status = row.projectedItem?.item.status;
   if (
     status === undefined ||
@@ -284,7 +290,7 @@ function UserMessageProjectedStatus({ row }: { row: Extract<TimelineRow, { kind:
   )
     return null;
   return (
-    <div className="me-1 flex items-center gap-1.5">
+    <div className={cn("me-1 flex items-center justify-end gap-1.5", className)}>
       <span className="rounded-full border border-destructive/25 bg-destructive/8 px-1.5 py-0.5 text-3xs font-medium text-destructive">
         {status}
       </span>
@@ -465,10 +471,20 @@ function UserTimelineRow({ row }: { row: Extract<TimelineRow, { kind: "message"
     );
   };
 
+  // Another of your messages follows directly: time and actions move beside the bubble so the
+  // two stack tight. Touch has no hover, so it keeps them inline.
+  const stacked = row.groupedWithNext === true;
+
   return (
     <div
-      className="group flex flex-col items-end gap-1"
+      className={cn(
+        "group flex items-end",
+        stacked
+          ? "flex-row flex-wrap justify-end gap-x-2 gap-y-1 pointer-coarse:flex-col pointer-coarse:flex-nowrap pointer-coarse:gap-1"
+          : "flex-col gap-1",
+      )}
       data-user-message-attribution={folded ? "agent" : undefined}
+      data-user-message-grouped={stacked || row.groupedWithPrevious ? "" : undefined}
     >
       {userMessage.attribution === "t3code" ? (
         <p
@@ -484,13 +500,18 @@ function UserTimelineRow({ row }: { row: Extract<TimelineRow, { kind: "message"
           <GuestMessageName name={userMessage.guestName} />
         </div>
       ) : null}
-      {row.message.inputIntent === "steer" ||
-      row.message.inputIntent === "promoted_queued_to_steer" ? (
-        <UserMessageIntentMarker intent={row.message.inputIntent} />
+      {(row.message.inputIntent === "steer" ||
+        row.message.inputIntent === "promoted_queued_to_steer") &&
+      !row.continuesSteer ? (
+        <div className={cn(stacked && "flex basis-full justify-end")}>
+          <UserMessageIntentMarker intent={row.message.inputIntent} />
+        </div>
       ) : null}
       <div
         className={cn(
           "relative min-w-0 max-w-[80%] rounded-2xl text-message-foreground",
+          stacked && "order-1 rounded-br-md",
+          row.groupedWithPrevious && "rounded-tr-md",
           BUBBLE_CHIP_CLASS_NAME,
           userMessage.attribution === "guest"
             ? guestBubbleClassName(false)
@@ -710,9 +731,16 @@ function UserTimelineRow({ row }: { row: Extract<TimelineRow, { kind: "message"
           </div>
         ) : null}
       </div>
-      <UserMessageProjectedStatus row={row} />
+      <UserMessageProjectedStatus row={row} className={cn(stacked && "order-2 basis-full")} />
       {!folded || expanded ? (
-        <div className="flex w-full max-w-[80%] items-center justify-end pe-1 text-xs tabular-nums opacity-0 transition-opacity duration-200 pointer-coarse:opacity-100 focus-within:opacity-100 group-hover:opacity-100">
+        <div
+          className={cn(
+            "flex items-center justify-end pe-1 text-xs tabular-nums opacity-0 transition-opacity duration-200 pointer-coarse:opacity-100 focus-within:opacity-100 group-hover:opacity-100",
+            stacked
+              ? "pb-1 pointer-coarse:order-3 pointer-coarse:w-full pointer-coarse:max-w-[80%] pointer-coarse:pb-0"
+              : "w-full max-w-[80%]",
+          )}
+        >
           <div className="flex shrink-0 items-center gap-2">
             {folded && senderThreadId ? (
               <InlineButton onClick={() => ctx.onOpenThread(senderThreadId)} tone="muted">

From 014cba2ac21270df43a0876abd8c4ffd751c4b8e Mon Sep 17 00:00:00 2001
From: maria-rcks <maria@kuuro.net>
Date: Thu, 29 Oct 2026 22:27:04 -0300
Subject: [PATCH 2/5] fix(web): grouped messages update when a new message
 joins the burst

---
 .../chat/MessagesTimeline.logic.test.ts       | 47 ++++++++++++-------
 .../components/chat/MessagesTimeline.logic.ts |  5 +-
 2 files changed, 34 insertions(+), 18 deletions(-)

diff --git a/apps/web/src/components/chat/MessagesTimeline.logic.test.ts b/apps/web/src/components/chat/MessagesTimeline.logic.test.ts
index c94364347f773..066a2212c9248 100644
--- a/apps/web/src/components/chat/MessagesTimeline.logic.test.ts
+++ b/apps/web/src/components/chat/MessagesTimeline.logic.test.ts
@@ -1413,25 +1413,38 @@ describe("deriveMessagesTimelineRows", () => {
         streaming: false,
       },
     });
-    const rows = deriveMessagesTimelineRows({
-      timelineEntries: [
-        message("prompt", 0, "user", "turn_start"),
-        {
-          kind: "work",
-          id: "work",
-          createdAt: time(4),
-          entry: { id: "work", createdAt: time(4), runId, label: "Ran command", tone: "tool" },
-        },
-        message("first-steer", 10, "user", "steer"),
+    const prompt = message("prompt", 0, "user", "turn_start");
+    const work: TimelineEntry = {
+      kind: "work",
+      id: "work",
+      createdAt: time(4),
+      entry: { id: "work", createdAt: time(4), runId, label: "Ran command", tone: "tool" },
+    };
+    const firstSteer = message("first-steer", 10, "user", "steer");
+    const deriveRows = (timelineEntries: TimelineEntry[]) =>
+      deriveMessagesTimelineRows({
+        timelineEntries,
+        latestRun: { runId, status: "completed", startedAt: time(0), completedAt: time(30) },
+        isWorking: false,
+        expandedRunIds: new Set(),
+        turnDiffSummaries: [],
+        supportsConversationRollback: false,
+      });
+    // The second steer arrives while the first message object is reused, as live updates do.
+    const before = computeStableMessagesTimelineRows(deriveRows([prompt, work, firstSteer]), {
+      result: [],
+      byId: new Map(),
+    });
+    const rows = computeStableMessagesTimelineRows(
+      deriveRows([
+        prompt,
+        work,
+        firstSteer,
         message("second-steer", 12, "user", "steer"),
         message("final", 30, "assistant"),
-      ],
-      latestRun: { runId, status: "completed", startedAt: time(0), completedAt: time(30) },
-      isWorking: false,
-      expandedRunIds: new Set(),
-      turnDiffSummaries: [],
-      supportsConversationRollback: false,
-    });
+      ]),
+      before,
+    ).result;
 
     const byId = new Map(rows.map((row) => [row.id, row]));
     expect(byId.get("prompt")).not.toHaveProperty("groupedWithNext");
diff --git a/apps/web/src/components/chat/MessagesTimeline.logic.ts b/apps/web/src/components/chat/MessagesTimeline.logic.ts
index 65ac8314340ac..e2f88ba1ad326 100644
--- a/apps/web/src/components/chat/MessagesTimeline.logic.ts
+++ b/apps/web/src/components/chat/MessagesTimeline.logic.ts
@@ -2510,7 +2510,10 @@ function isRowUnchanged(a: MessagesTimelineRow, b: MessagesTimelineRow): boolean
         a.showAssistantCopyButton === bm.showAssistantCopyButton &&
         a.assistantCopyStreaming === bm.assistantCopyStreaming &&
         a.assistantTurnDiffSummary === bm.assistantTurnDiffSummary &&
-        a.revertTurnCount === bm.revertTurnCount
+        a.revertTurnCount === bm.revertTurnCount &&
+        a.groupedWithPrevious === bm.groupedWithPrevious &&
+        a.groupedWithNext === bm.groupedWithNext &&
+        a.continuesSteer === bm.continuesSteer
       );
     }
   }

From 234e518cc5034e8383550c599bc31a5329e7651e Mon Sep 17 00:00:00 2001
From: maria-rcks <maria@kuuro.net>
Date: Thu, 29 Oct 2026 22:40:21 -0300
Subject: [PATCH 3/5] fix(web): grouped bubbles keep their actions on the same
 row

---
 .../chat/TimelineUserMessageRow.tsx           | 570 +++++++++---------
 1 file changed, 288 insertions(+), 282 deletions(-)

diff --git a/apps/web/src/components/chat/TimelineUserMessageRow.tsx b/apps/web/src/components/chat/TimelineUserMessageRow.tsx
index 57b81bef898bb..48572dd6c93e8 100644
--- a/apps/web/src/components/chat/TimelineUserMessageRow.tsx
+++ b/apps/web/src/components/chat/TimelineUserMessageRow.tsx
@@ -274,13 +274,7 @@ export function FoldedMessageHeader(props: {
   );
 }
 
-function UserMessageProjectedStatus({
-  row,
-  className,
-}: {
-  row: Extract<TimelineRow, { kind: "message" }>;
-  className?: string | undefined;
-}) {
+function UserMessageProjectedStatus({ row }: { row: Extract<TimelineRow, { kind: "message" }> }) {
   const status = row.projectedItem?.item.status;
   if (
     status === undefined ||
@@ -290,7 +284,7 @@ function UserMessageProjectedStatus({
   )
     return null;
   return (
-    <div className={cn("me-1 flex items-center justify-end gap-1.5", className)}>
+    <div className="me-1 flex items-center gap-1.5">
       <span className="rounded-full border border-destructive/25 bg-destructive/8 px-1.5 py-0.5 text-3xs font-medium text-destructive">
         {status}
       </span>
@@ -475,14 +469,63 @@ function UserTimelineRow({ row }: { row: Extract<TimelineRow, { kind: "message"
   // two stack tight. Touch has no hover, so it keeps them inline.
   const stacked = row.groupedWithNext === true;
 
+  const metaRow =
+    !folded || expanded ? (
+      <div
+        className={cn(
+          "flex items-center justify-end pe-1 text-xs tabular-nums opacity-0 transition-opacity duration-200 pointer-coarse:opacity-100 focus-within:opacity-100 group-hover:opacity-100",
+          stacked
+            ? "shrink-0 pb-1 pointer-coarse:w-full pointer-coarse:max-w-[80%] pointer-coarse:pb-0"
+            : "w-full max-w-[80%]",
+        )}
+      >
+        <div className="flex shrink-0 items-center gap-2">
+          {folded && senderThreadId ? (
+            <InlineButton onClick={() => ctx.onOpenThread(senderThreadId)} tone="muted">
+              Open thread
+            </InlineButton>
+          ) : null}
+          <Tooltip>
+            <TooltipTrigger render={<p className="text-muted-foreground text-xs tabular-nums" />}>
+              {formatDayAwareTimestamp(row.message.createdAt, ctx.timestampFormat)}
+            </TooltipTrigger>
+            <TooltipPopup>
+              {formatChatTimestampTooltip(row.message.createdAt, ctx.timestampFormat)}
+            </TooltipPopup>
+          </Tooltip>
+          <div className="flex items-center gap-0.5">
+            {typeof revertTurnCount === "number" && (
+              <RevertUserMessageButton turnCount={revertTurnCount} messageId={row.message.id} />
+            )}
+            {resolvedContext.text && (
+              <MessageCopyButton
+                text={contextClipboardFragment ? resolvedContext.text : plainText}
+                {...(contextClipboardFragment
+                  ? {
+                      extraFlavors: {
+                        [COMPOSER_CONTEXT_CLIPBOARD_MIME]: contextClipboardFragment,
+                      },
+                    }
+                  : {})}
+                variant="ghost"
+              />
+            )}
+            {promptLink !== null && (
+              <MessageCopyButton
+                text={promptLink}
+                label="Copy prompt link"
+                icon={LinkIconNode}
+                variant="ghost"
+              />
+            )}
+          </div>
+        </div>
+      </div>
+    ) : null;
+
   return (
     <div
-      className={cn(
-        "group flex items-end",
-        stacked
-          ? "flex-row flex-wrap justify-end gap-x-2 gap-y-1 pointer-coarse:flex-col pointer-coarse:flex-nowrap pointer-coarse:gap-1"
-          : "flex-col gap-1",
-      )}
+      className="group flex flex-col items-end gap-1"
       data-user-message-attribution={folded ? "agent" : undefined}
       data-user-message-grouped={stacked || row.groupedWithPrevious ? "" : undefined}
     >
@@ -503,288 +546,251 @@ function UserTimelineRow({ row }: { row: Extract<TimelineRow, { kind: "message"
       {(row.message.inputIntent === "steer" ||
         row.message.inputIntent === "promoted_queued_to_steer") &&
       !row.continuesSteer ? (
-        <div className={cn(stacked && "flex basis-full justify-end")}>
-          <UserMessageIntentMarker intent={row.message.inputIntent} />
-        </div>
+        <UserMessageIntentMarker intent={row.message.inputIntent} />
       ) : null}
-      <div
-        className={cn(
-          "relative min-w-0 max-w-[80%] rounded-2xl text-message-foreground",
-          stacked && "order-1 rounded-br-md",
-          row.groupedWithPrevious && "rounded-tr-md",
-          BUBBLE_CHIP_CLASS_NAME,
-          userMessage.attribution === "guest"
-            ? guestBubbleClassName(false)
-            : !mediaOnly && "bg-message",
-          !folded && !mediaOnly && "p-3",
-          folded && expanded && "w-full",
-        )}
-      >
-        {/* Outside the fold so a collapsed message still has a heading to navigate to. */}
-        <MessageAuthorHeading>
-          {folded
-            ? senderLabel
-            : userMessage.guestName === undefined
-              ? "You"
-              : `${userMessage.guestName} (guest)`}
-        </MessageAuthorHeading>
-        {folded ? (
-          <FoldedMessageHeader
-            icon={MessagesSquareIcon}
-            label={senderLabel}
-            summary={foldSummary}
-            expanded={expanded}
-            onToggle={() => setExpanded((value) => !value)}
-          />
-        ) : null}
-        {/* Find reads the DOM, so a folded message stays mounted but hidden while find is open. */}
-        {!folded || expanded || ctx.findActive ? (
-          <div
-            ref={folded ? revealFoldRef : undefined}
-            hidden={folded && !expanded}
-            className={cn(
-              folded && "px-3 pb-3",
-              folded && !ctx.findActive && "max-h-96 overflow-auto",
-            )}
-          >
-            {(regularImages.length > 0 || userVideos.length > 0) && (
-              <div
-                className={cn(
-                  "grid",
-                  !mediaOnly
-                    ? "mb-2 max-w-[210px] grid-cols-2 gap-2"
-                    : loneImage
-                      ? "max-w-full"
-                      : collage
-                        ? cn(
-                            MEDIA_EDGE_CLASS_NAME,
-                            "w-80 max-w-full gap-px overflow-hidden rounded-2xl bg-black/9 dark:bg-white/12",
-                            regularImages.length === 2
-                              ? "auto-rows-[12rem] grid-cols-2"
-                              : regularImages.length === 3
-                                ? "auto-rows-[calc(6rem-0.5px)] grid-cols-[3fr_2fr]"
-                                : "auto-rows-[6rem] grid-cols-2",
-                          )
-                        : "w-80 max-w-full grid-cols-2 gap-2",
-                )}
-              >
-                {regularImages.map((image, index) => (
-                  <div
-                    key={image.id}
-                    className={cn(
-                      "bg-background/70",
-                      image.source?.kind === "snap-shot" && image.previewUrl
-                        ? cn(SNAP_SHOT_ATTACHMENT_FRAME_CLASS, "col-span-2")
-                        : loneImage
-                          ? cn(MEDIA_EDGE_CLASS_NAME, "overflow-hidden rounded-2xl")
-                          : collage
-                            ? cn(
-                                "overflow-hidden bg-background",
-                                regularImages.length === 3 && index === 0 && "row-span-2",
-                                regularImages.length > 3 &&
-                                  regularImages.length % 2 === 1 &&
-                                  index === regularImages.length - 1 &&
-                                  "col-span-2",
-                              )
-                            : "aspect-[4/3] overflow-hidden rounded-lg border border-border/80",
-                    )}
-                  >
-                    {image.previewUrl ? (
-                      <button
-                        type="button"
-                        className="block h-full w-full cursor-zoom-in"
-                        aria-label={`Preview ${image.name}`}
-                        onClick={() => {
-                          const preview = buildExpandedImagePreview(regularImages, image.id);
-                          if (!preview) return;
-                          ctx.onImageExpand(preview);
-                        }}
-                      >
-                        {/* Isolate the thumbnail raster from nearby activity repaints in Chromium. */}
-                        <AttachmentImage
-                          name={image.name}
-                          mimeType={image.mimeType}
-                          src={image.previewUrl}
-                          alt={image.name}
-                          decoding="async"
-                          loading="lazy"
+      <StackedBubbleRow stacked={stacked}>
+        <div
+          className={cn(
+            "relative min-w-0 max-w-[80%] rounded-2xl text-message-foreground",
+            stacked && "rounded-br-md",
+            row.groupedWithPrevious && "rounded-tr-md",
+            BUBBLE_CHIP_CLASS_NAME,
+            userMessage.attribution === "guest"
+              ? guestBubbleClassName(false)
+              : !mediaOnly && "bg-message",
+            !folded && !mediaOnly && "p-3",
+            folded && expanded && "w-full",
+          )}
+        >
+          {/* Outside the fold so a collapsed message still has a heading to navigate to. */}
+          <MessageAuthorHeading>
+            {folded
+              ? senderLabel
+              : userMessage.guestName === undefined
+                ? "You"
+                : `${userMessage.guestName} (guest)`}
+          </MessageAuthorHeading>
+          {folded ? (
+            <FoldedMessageHeader
+              icon={MessagesSquareIcon}
+              label={senderLabel}
+              summary={foldSummary}
+              expanded={expanded}
+              onToggle={() => setExpanded((value) => !value)}
+            />
+          ) : null}
+          {/* Find reads the DOM, so a folded message stays mounted but hidden while find is open. */}
+          {!folded || expanded || ctx.findActive ? (
+            <div
+              ref={folded ? revealFoldRef : undefined}
+              hidden={folded && !expanded}
+              className={cn(
+                folded && "px-3 pb-3",
+                folded && !ctx.findActive && "max-h-96 overflow-auto",
+              )}
+            >
+              {(regularImages.length > 0 || userVideos.length > 0) && (
+                <div
+                  className={cn(
+                    "grid",
+                    !mediaOnly
+                      ? "mb-2 max-w-[210px] grid-cols-2 gap-2"
+                      : loneImage
+                        ? "max-w-full"
+                        : collage
+                          ? cn(
+                              MEDIA_EDGE_CLASS_NAME,
+                              "w-80 max-w-full gap-px overflow-hidden rounded-2xl bg-black/9 dark:bg-white/12",
+                              regularImages.length === 2
+                                ? "auto-rows-[12rem] grid-cols-2"
+                                : regularImages.length === 3
+                                  ? "auto-rows-[calc(6rem-0.5px)] grid-cols-[3fr_2fr]"
+                                  : "auto-rows-[6rem] grid-cols-2",
+                            )
+                          : "w-80 max-w-full grid-cols-2 gap-2",
+                  )}
+                >
+                  {regularImages.map((image, index) => (
+                    <div
+                      key={image.id}
+                      className={cn(
+                        "bg-background/70",
+                        image.source?.kind === "snap-shot" && image.previewUrl
+                          ? cn(SNAP_SHOT_ATTACHMENT_FRAME_CLASS, "col-span-2")
+                          : loneImage
+                            ? cn(MEDIA_EDGE_CLASS_NAME, "overflow-hidden rounded-2xl")
+                            : collage
+                              ? cn(
+                                  "overflow-hidden bg-background",
+                                  regularImages.length === 3 && index === 0 && "row-span-2",
+                                  regularImages.length > 3 &&
+                                    regularImages.length % 2 === 1 &&
+                                    index === regularImages.length - 1 &&
+                                    "col-span-2",
+                                )
+                              : "aspect-[4/3] overflow-hidden rounded-lg border border-border/80",
+                      )}
+                    >
+                      {image.previewUrl ? (
+                        <button
+                          type="button"
+                          className="block h-full w-full cursor-zoom-in"
+                          aria-label={`Preview ${image.name}`}
+                          onClick={() => {
+                            const preview = buildExpandedImagePreview(regularImages, image.id);
+                            if (!preview) return;
+                            ctx.onImageExpand(preview);
+                          }}
+                        >
+                          {/* Isolate the thumbnail raster from nearby activity repaints in Chromium. */}
+                          <AttachmentImage
+                            name={image.name}
+                            mimeType={image.mimeType}
+                            src={image.previewUrl}
+                            alt={image.name}
+                            decoding="async"
+                            loading="lazy"
+                            className={cn(
+                              "block transform-gpu",
+                              // A fixed height keeps the row from growing when the image loads.
+                              loneImage
+                                ? "h-48 w-auto min-w-24 max-w-full object-cover"
+                                : "size-full object-cover",
+                            )}
+                          />
+                        </button>
+                      ) : (
+                        <div
                           className={cn(
-                            "block transform-gpu",
-                            // A fixed height keeps the row from growing when the image loads.
-                            loneImage
-                              ? "h-48 w-auto min-w-24 max-w-full object-cover"
-                              : "size-full object-cover",
+                            "flex min-h-[72px] items-center justify-center px-2 py-3 text-center text-2xs text-muted-foreground/70",
+                            loneImage && "h-48 w-64 max-w-full",
+                            collage && "h-full",
                           )}
+                        >
+                          {image.name}
+                        </div>
+                      )}
+                      {image.previewUrl && image.source?.kind === "snap-shot" ? (
+                        <SnapShotAttachmentDetails source={image.source} />
+                      ) : null}
+                    </div>
+                  ))}
+                  {userVideos.map((file) => (
+                    <UserVideoAttachment key={file.id} file={file} />
+                  ))}
+                </div>
+              )}
+              {userAudio.length > 0 ? (
+                <div className="mb-2 flex max-w-full flex-col gap-1">
+                  {userAudio.map((file) => (
+                    <InlineAudioPreview
+                      key={file.id}
+                      name={file.name}
+                      environmentId={ctx.activeThreadEnvironmentId}
+                      resource={{
+                        _tag: "attachment",
+                        attachmentId: file.id,
+                        fileName: file.name,
+                        mimeType: file.mimeType,
+                        disposition: "inline",
+                      }}
+                      onOpen={() => ctx.onFileOpen(file)}
+                    />
+                  ))}
+                </div>
+              ) : null}
+              {unchippedFiles.length > 0 || unknownAttachments.length > 0 ? (
+                <div className="mb-2 flex flex-col gap-1">
+                  {unchippedFiles.map((file) => {
+                    const fileIdentity = (
+                      <>
+                        <PierreEntryIcon
+                          pathValue={file.name}
+                          kind="file"
+                          theme={ctx.resolvedTheme}
                         />
-                      </button>
-                    ) : (
-                      <div
-                        className={cn(
-                          "flex min-h-[72px] items-center justify-center px-2 py-3 text-center text-2xs text-muted-foreground/70",
-                          loneImage && "h-48 w-64 max-w-full",
-                          collage && "h-full",
-                        )}
-                      >
-                        {image.name}
+                        <span className="min-w-0 flex-1 truncate">{file.name}</span>
+                      </>
+                    );
+                    if (file.downloadable !== false) {
+                      return (
+                        <div key={file.id} className="flex min-w-0 items-center gap-1">
+                          <button
+                            type="button"
+                            aria-label={`Preview ${file.name}`}
+                            onClick={() => ctx.onFileOpen(file)}
+                            className="focus-visible:ring-ring/70 flex min-w-0 flex-1 cursor-pointer items-center gap-2 rounded-md py-1 text-left text-sm hover:underline focus-visible:ring-2 focus-visible:ring-inset focus-visible:outline-none"
+                          >
+                            {fileIdentity}
+                            <EyeIcon className="size-4 shrink-0" />
+                          </button>
+                          <Tooltip>
+                            <TooltipTrigger
+                              render={
+                                <Button
+                                  size="icon-xs"
+                                  variant="ghost-muted"
+                                  aria-label={`Download ${file.name}`}
+                                  onClick={() => ctx.onFileDownload(file)}
+                                />
+                              }
+                            >
+                              <DownloadIcon />
+                            </TooltipTrigger>
+                            <TooltipPopup side="top">Download {file.name}</TooltipPopup>
+                          </Tooltip>
+                        </div>
+                      );
+                    }
+
+                    return (
+                      <div key={file.id} className="flex min-w-0 items-center gap-2 py-1 text-sm">
+                        {fileIdentity}
                       </div>
-                    )}
-                    {image.previewUrl && image.source?.kind === "snap-shot" ? (
-                      <SnapShotAttachmentDetails source={image.source} />
-                    ) : null}
-                  </div>
-                ))}
-                {userVideos.map((file) => (
-                  <UserVideoAttachment key={file.id} file={file} />
-                ))}
-              </div>
-            )}
-            {userAudio.length > 0 ? (
-              <div className="mb-2 flex max-w-full flex-col gap-1">
-                {userAudio.map((file) => (
-                  <InlineAudioPreview
-                    key={file.id}
-                    name={file.name}
-                    environmentId={ctx.activeThreadEnvironmentId}
-                    resource={{
-                      _tag: "attachment",
-                      attachmentId: file.id,
-                      fileName: file.name,
-                      mimeType: file.mimeType,
-                      disposition: "inline",
-                    }}
-                    onOpen={() => ctx.onFileOpen(file)}
-                  />
-                ))}
-              </div>
-            ) : null}
-            {unchippedFiles.length > 0 || unknownAttachments.length > 0 ? (
-              <div className="mb-2 flex flex-col gap-1">
-                {unchippedFiles.map((file) => {
-                  const fileIdentity = (
-                    <>
+                    );
+                  })}
+                  {unknownAttachments.map((attachment) => (
+                    <div
+                      key={attachment.id}
+                      className="flex min-w-0 items-center gap-2 py-1 text-sm"
+                    >
                       <PierreEntryIcon
-                        pathValue={file.name}
+                        pathValue={attachment.name}
                         kind="file"
                         theme={ctx.resolvedTheme}
                       />
-                      <span className="min-w-0 flex-1 truncate">{file.name}</span>
-                    </>
-                  );
-                  if (file.downloadable !== false) {
-                    return (
-                      <div key={file.id} className="flex min-w-0 items-center gap-1">
-                        <button
-                          type="button"
-                          aria-label={`Preview ${file.name}`}
-                          onClick={() => ctx.onFileOpen(file)}
-                          className="focus-visible:ring-ring/70 flex min-w-0 flex-1 cursor-pointer items-center gap-2 rounded-md py-1 text-left text-sm hover:underline focus-visible:ring-2 focus-visible:ring-inset focus-visible:outline-none"
-                        >
-                          {fileIdentity}
-                          <EyeIcon className="size-4 shrink-0" />
-                        </button>
-                        <Tooltip>
-                          <TooltipTrigger
-                            render={
-                              <Button
-                                size="icon-xs"
-                                variant="ghost-muted"
-                                aria-label={`Download ${file.name}`}
-                                onClick={() => ctx.onFileDownload(file)}
-                              />
-                            }
-                          >
-                            <DownloadIcon />
-                          </TooltipTrigger>
-                          <TooltipPopup side="top">Download {file.name}</TooltipPopup>
-                        </Tooltip>
-                      </div>
-                    );
-                  }
-
-                  return (
-                    <div key={file.id} className="flex min-w-0 items-center gap-2 py-1 text-sm">
-                      {fileIdentity}
+                      <span className="min-w-0 flex-1 truncate">{attachment.name}</span>
                     </div>
-                  );
-                })}
-                {unknownAttachments.map((attachment) => (
-                  <div key={attachment.id} className="flex min-w-0 items-center gap-2 py-1 text-sm">
-                    <PierreEntryIcon
-                      pathValue={attachment.name}
-                      kind="file"
-                      theme={ctx.resolvedTheme}
-                    />
-                    <span className="min-w-0 flex-1 truncate">{attachment.name}</span>
-                  </div>
-                ))}
-              </div>
-            ) : null}
-            <div onCopyCapture={onBodyCopyCapture}>
-              <CollapsibleUserMessageBody
-                text={resolvedContext.text}
-                renderContextReference={renderContextReference}
-                skills={ctx.skills}
-                markdownCwd={ctx.markdownCwd}
-                collapsible={!folded}
-              />
-            </div>
-          </div>
-        ) : null}
-      </div>
-      <UserMessageProjectedStatus row={row} className={cn(stacked && "order-2 basis-full")} />
-      {!folded || expanded ? (
-        <div
-          className={cn(
-            "flex items-center justify-end pe-1 text-xs tabular-nums opacity-0 transition-opacity duration-200 pointer-coarse:opacity-100 focus-within:opacity-100 group-hover:opacity-100",
-            stacked
-              ? "pb-1 pointer-coarse:order-3 pointer-coarse:w-full pointer-coarse:max-w-[80%] pointer-coarse:pb-0"
-              : "w-full max-w-[80%]",
-          )}
-        >
-          <div className="flex shrink-0 items-center gap-2">
-            {folded && senderThreadId ? (
-              <InlineButton onClick={() => ctx.onOpenThread(senderThreadId)} tone="muted">
-                Open thread
-              </InlineButton>
-            ) : null}
-            <Tooltip>
-              <TooltipTrigger render={<p className="text-muted-foreground text-xs tabular-nums" />}>
-                {formatDayAwareTimestamp(row.message.createdAt, ctx.timestampFormat)}
-              </TooltipTrigger>
-              <TooltipPopup>
-                {formatChatTimestampTooltip(row.message.createdAt, ctx.timestampFormat)}
-              </TooltipPopup>
-            </Tooltip>
-            <div className="flex items-center gap-0.5">
-              {typeof revertTurnCount === "number" && (
-                <RevertUserMessageButton turnCount={revertTurnCount} messageId={row.message.id} />
-              )}
-              {resolvedContext.text && (
-                <MessageCopyButton
-                  text={contextClipboardFragment ? resolvedContext.text : plainText}
-                  {...(contextClipboardFragment
-                    ? {
-                        extraFlavors: {
-                          [COMPOSER_CONTEXT_CLIPBOARD_MIME]: contextClipboardFragment,
-                        },
-                      }
-                    : {})}
-                  variant="ghost"
+                  ))}
+                </div>
+              ) : null}
+              <div onCopyCapture={onBodyCopyCapture}>
+                <CollapsibleUserMessageBody
+                  text={resolvedContext.text}
+                  renderContextReference={renderContextReference}
+                  skills={ctx.skills}
+                  markdownCwd={ctx.markdownCwd}
+                  collapsible={!folded}
                 />
-              )}
-              {promptLink !== null && (
-                <MessageCopyButton
-                  text={promptLink}
-                  label="Copy prompt link"
-                  icon={LinkIconNode}
-                  variant="ghost"
-                />
-              )}
+              </div>
             </div>
-          </div>
+          ) : null}
         </div>
-      ) : null}
+        {stacked ? metaRow : null}
+      </StackedBubbleRow>
+      <UserMessageProjectedStatus row={row} />
+      {stacked ? null : metaRow}
+    </div>
+  );
+}
+
+function StackedBubbleRow({ stacked, children }: { stacked: boolean; children: ReactNode }) {
+  return stacked ? (
+    <div className="flex w-full flex-row-reverse items-end gap-2 pointer-coarse:flex-col pointer-coarse:gap-1">
+      {children}
     </div>
+  ) : (
+    children
   );
 }
 

From bb9502da63e74e66155ea546aa4a690161284712 Mon Sep 17 00:00:00 2001
From: maria-rcks <maria@kuuro.net>
Date: Thu, 29 Oct 2026 23:27:13 -0300
Subject: [PATCH 4/5] fix(web): a message keeps its expanded state when it
 joins a burst

---
 .../components/chat/TimelineUserMessageRow.tsx    | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/components/chat/TimelineUserMessageRow.tsx b/apps/web/src/components/chat/TimelineUserMessageRow.tsx
index 48572dd6c93e8..e4586f1fb4673 100644
--- a/apps/web/src/components/chat/TimelineUserMessageRow.tsx
+++ b/apps/web/src/components/chat/TimelineUserMessageRow.tsx
@@ -527,7 +527,6 @@ function UserTimelineRow({ row }: { row: Extract<TimelineRow, { kind: "message"
     <div
       className="group flex flex-col items-end gap-1"
       data-user-message-attribution={folded ? "agent" : undefined}
-      data-user-message-grouped={stacked || row.groupedWithPrevious ? "" : undefined}
     >
       {userMessage.attribution === "t3code" ? (
         <p
@@ -784,13 +783,19 @@ function UserTimelineRow({ row }: { row: Extract<TimelineRow, { kind: "message"
   );
 }
 
+// Always rendered so the bubble keeps its place in the tree (and its expanded state) when a
+// message joins or leaves a burst.
 function StackedBubbleRow({ stacked, children }: { stacked: boolean; children: ReactNode }) {
-  return stacked ? (
-    <div className="flex w-full flex-row-reverse items-end gap-2 pointer-coarse:flex-col pointer-coarse:gap-1">
+  return (
+    <div
+      className={
+        stacked
+          ? "flex w-full flex-row-reverse items-end gap-2 pointer-coarse:flex-col pointer-coarse:gap-1"
+          : "contents"
+      }
+    >
       {children}
     </div>
-  ) : (
-    children
   );
 }
 

From f09992fab00800df7cb7c3c773bc8e580e4f0230 Mon Sep 17 00:00:00 2001
From: maria-rcks <maria@kuuro.net>
Date: Fri, 30 Oct 2026 02:13:49 -0300
Subject: [PATCH 5/5] fix(web): grouped messages keep their time and actions
 below the bubble

---
 .../chat/MessagesTimeline.logic.test.ts       |   2 -
 .../components/chat/MessagesTimeline.logic.ts |  19 +-
 .../chat/TimelineUserMessageRow.tsx           | 550 ++++++++----------
 3 files changed, 263 insertions(+), 308 deletions(-)

diff --git a/apps/web/src/components/chat/MessagesTimeline.logic.test.ts b/apps/web/src/components/chat/MessagesTimeline.logic.test.ts
index 066a2212c9248..c9aec993bcd86 100644
--- a/apps/web/src/components/chat/MessagesTimeline.logic.test.ts
+++ b/apps/web/src/components/chat/MessagesTimeline.logic.test.ts
@@ -1449,12 +1449,10 @@ describe("deriveMessagesTimelineRows", () => {
     const byId = new Map(rows.map((row) => [row.id, row]));
     expect(byId.get("prompt")).not.toHaveProperty("groupedWithNext");
     expect(byId.get("first-steer")).toMatchObject({
-      groupedWithPrevious: false,
       groupedWithNext: true,
       continuesSteer: false,
     });
     expect(byId.get("second-steer")).toMatchObject({
-      groupedWithPrevious: true,
       groupedWithNext: false,
       continuesSteer: true,
     });
diff --git a/apps/web/src/components/chat/MessagesTimeline.logic.ts b/apps/web/src/components/chat/MessagesTimeline.logic.ts
index e2f88ba1ad326..1f22bc1c14978 100644
--- a/apps/web/src/components/chat/MessagesTimeline.logic.ts
+++ b/apps/web/src/components/chat/MessagesTimeline.logic.ts
@@ -595,8 +595,7 @@ type MessagesTimelineRowContent =
       assistantCopyStreaming: boolean;
       assistantTurnDiffSummary?: TurnDiffSummary | undefined;
       revertTurnCount?: number | undefined;
-      /** Your messages sent back to back stack as one burst, like a chat app. */
-      groupedWithPrevious?: boolean;
+      /** Another of your messages follows directly, so the two sit closer together. */
       groupedWithNext?: boolean;
       /** Set when the message above is a steer too, so the label shows once. */
       continuesSteer?: boolean;
@@ -2146,16 +2145,13 @@ export function deriveMessagesTimelineRows(input: {
     }
     if (!timelineRowIsOwnUserMessage(row)) return row;
     const previous = result[index - 1];
-    const groupedWithPrevious = timelineRowIsOwnUserMessage(previous);
     const groupedWithNext = timelineRowIsOwnUserMessage(result[index + 1]);
-    if (!groupedWithPrevious && !groupedWithNext) return row;
-    return {
-      ...row,
-      groupedWithPrevious,
-      groupedWithNext,
-      continuesSteer:
-        groupedWithPrevious && messageIsSteer(row.message) && messageIsSteer(previous.message),
-    };
+    const continuesSteer =
+      timelineRowIsOwnUserMessage(previous) &&
+      messageIsSteer(row.message) &&
+      messageIsSteer(previous.message);
+    if (!groupedWithNext && !continuesSteer) return row;
+    return { ...row, groupedWithNext, continuesSteer };
   });
 }
 
@@ -2511,7 +2507,6 @@ function isRowUnchanged(a: MessagesTimelineRow, b: MessagesTimelineRow): boolean
         a.assistantCopyStreaming === bm.assistantCopyStreaming &&
         a.assistantTurnDiffSummary === bm.assistantTurnDiffSummary &&
         a.revertTurnCount === bm.revertTurnCount &&
-        a.groupedWithPrevious === bm.groupedWithPrevious &&
         a.groupedWithNext === bm.groupedWithNext &&
         a.continuesSteer === bm.continuesSteer
       );
diff --git a/apps/web/src/components/chat/TimelineUserMessageRow.tsx b/apps/web/src/components/chat/TimelineUserMessageRow.tsx
index e4586f1fb4673..58785db77ca47 100644
--- a/apps/web/src/components/chat/TimelineUserMessageRow.tsx
+++ b/apps/web/src/components/chat/TimelineUserMessageRow.tsx
@@ -465,64 +465,6 @@ function UserTimelineRow({ row }: { row: Extract<TimelineRow, { kind: "message"
     );
   };
 
-  // Another of your messages follows directly: time and actions move beside the bubble so the
-  // two stack tight. Touch has no hover, so it keeps them inline.
-  const stacked = row.groupedWithNext === true;
-
-  const metaRow =
-    !folded || expanded ? (
-      <div
-        className={cn(
-          "flex items-center justify-end pe-1 text-xs tabular-nums opacity-0 transition-opacity duration-200 pointer-coarse:opacity-100 focus-within:opacity-100 group-hover:opacity-100",
-          stacked
-            ? "shrink-0 pb-1 pointer-coarse:w-full pointer-coarse:max-w-[80%] pointer-coarse:pb-0"
-            : "w-full max-w-[80%]",
-        )}
-      >
-        <div className="flex shrink-0 items-center gap-2">
-          {folded && senderThreadId ? (
-            <InlineButton onClick={() => ctx.onOpenThread(senderThreadId)} tone="muted">
-              Open thread
-            </InlineButton>
-          ) : null}
-          <Tooltip>
-            <TooltipTrigger render={<p className="text-muted-foreground text-xs tabular-nums" />}>
-              {formatDayAwareTimestamp(row.message.createdAt, ctx.timestampFormat)}
-            </TooltipTrigger>
-            <TooltipPopup>
-              {formatChatTimestampTooltip(row.message.createdAt, ctx.timestampFormat)}
-            </TooltipPopup>
-          </Tooltip>
-          <div className="flex items-center gap-0.5">
-            {typeof revertTurnCount === "number" && (
-              <RevertUserMessageButton turnCount={revertTurnCount} messageId={row.message.id} />
-            )}
-            {resolvedContext.text && (
-              <MessageCopyButton
-                text={contextClipboardFragment ? resolvedContext.text : plainText}
-                {...(contextClipboardFragment
-                  ? {
-                      extraFlavors: {
-                        [COMPOSER_CONTEXT_CLIPBOARD_MIME]: contextClipboardFragment,
-                      },
-                    }
-                  : {})}
-                variant="ghost"
-              />
-            )}
-            {promptLink !== null && (
-              <MessageCopyButton
-                text={promptLink}
-                label="Copy prompt link"
-                icon={LinkIconNode}
-                variant="ghost"
-              />
-            )}
-          </div>
-        </div>
-      </div>
-    ) : null;
-
   return (
     <div
       className="group flex flex-col items-end gap-1"
@@ -547,254 +489,274 @@ function UserTimelineRow({ row }: { row: Extract<TimelineRow, { kind: "message"
       !row.continuesSteer ? (
         <UserMessageIntentMarker intent={row.message.inputIntent} />
       ) : null}
-      <StackedBubbleRow stacked={stacked}>
-        <div
-          className={cn(
-            "relative min-w-0 max-w-[80%] rounded-2xl text-message-foreground",
-            stacked && "rounded-br-md",
-            row.groupedWithPrevious && "rounded-tr-md",
-            BUBBLE_CHIP_CLASS_NAME,
-            userMessage.attribution === "guest"
-              ? guestBubbleClassName(false)
-              : !mediaOnly && "bg-message",
-            !folded && !mediaOnly && "p-3",
-            folded && expanded && "w-full",
-          )}
-        >
-          {/* Outside the fold so a collapsed message still has a heading to navigate to. */}
-          <MessageAuthorHeading>
-            {folded
-              ? senderLabel
-              : userMessage.guestName === undefined
-                ? "You"
-                : `${userMessage.guestName} (guest)`}
-          </MessageAuthorHeading>
-          {folded ? (
-            <FoldedMessageHeader
-              icon={MessagesSquareIcon}
-              label={senderLabel}
-              summary={foldSummary}
-              expanded={expanded}
-              onToggle={() => setExpanded((value) => !value)}
-            />
-          ) : null}
-          {/* Find reads the DOM, so a folded message stays mounted but hidden while find is open. */}
-          {!folded || expanded || ctx.findActive ? (
-            <div
-              ref={folded ? revealFoldRef : undefined}
-              hidden={folded && !expanded}
-              className={cn(
-                folded && "px-3 pb-3",
-                folded && !ctx.findActive && "max-h-96 overflow-auto",
-              )}
-            >
-              {(regularImages.length > 0 || userVideos.length > 0) && (
-                <div
-                  className={cn(
-                    "grid",
-                    !mediaOnly
-                      ? "mb-2 max-w-[210px] grid-cols-2 gap-2"
-                      : loneImage
-                        ? "max-w-full"
-                        : collage
-                          ? cn(
-                              MEDIA_EDGE_CLASS_NAME,
-                              "w-80 max-w-full gap-px overflow-hidden rounded-2xl bg-black/9 dark:bg-white/12",
-                              regularImages.length === 2
-                                ? "auto-rows-[12rem] grid-cols-2"
-                                : regularImages.length === 3
-                                  ? "auto-rows-[calc(6rem-0.5px)] grid-cols-[3fr_2fr]"
-                                  : "auto-rows-[6rem] grid-cols-2",
-                            )
-                          : "w-80 max-w-full grid-cols-2 gap-2",
-                  )}
-                >
-                  {regularImages.map((image, index) => (
-                    <div
-                      key={image.id}
-                      className={cn(
-                        "bg-background/70",
-                        image.source?.kind === "snap-shot" && image.previewUrl
-                          ? cn(SNAP_SHOT_ATTACHMENT_FRAME_CLASS, "col-span-2")
-                          : loneImage
-                            ? cn(MEDIA_EDGE_CLASS_NAME, "overflow-hidden rounded-2xl")
-                            : collage
-                              ? cn(
-                                  "overflow-hidden bg-background",
-                                  regularImages.length === 3 && index === 0 && "row-span-2",
-                                  regularImages.length > 3 &&
-                                    regularImages.length % 2 === 1 &&
-                                    index === regularImages.length - 1 &&
-                                    "col-span-2",
-                                )
-                              : "aspect-[4/3] overflow-hidden rounded-lg border border-border/80",
-                      )}
-                    >
-                      {image.previewUrl ? (
-                        <button
-                          type="button"
-                          className="block h-full w-full cursor-zoom-in"
-                          aria-label={`Preview ${image.name}`}
-                          onClick={() => {
-                            const preview = buildExpandedImagePreview(regularImages, image.id);
-                            if (!preview) return;
-                            ctx.onImageExpand(preview);
-                          }}
-                        >
-                          {/* Isolate the thumbnail raster from nearby activity repaints in Chromium. */}
-                          <AttachmentImage
-                            name={image.name}
-                            mimeType={image.mimeType}
-                            src={image.previewUrl}
-                            alt={image.name}
-                            decoding="async"
-                            loading="lazy"
-                            className={cn(
-                              "block transform-gpu",
-                              // A fixed height keeps the row from growing when the image loads.
-                              loneImage
-                                ? "h-48 w-auto min-w-24 max-w-full object-cover"
-                                : "size-full object-cover",
-                            )}
-                          />
-                        </button>
-                      ) : (
-                        <div
+      <div
+        className={cn(
+          "relative min-w-0 max-w-[80%] rounded-2xl text-message-foreground",
+          BUBBLE_CHIP_CLASS_NAME,
+          userMessage.attribution === "guest"
+            ? guestBubbleClassName(false)
+            : !mediaOnly && "bg-message",
+          !folded && !mediaOnly && "p-3",
+          folded && expanded && "w-full",
+        )}
+      >
+        {/* Outside the fold so a collapsed message still has a heading to navigate to. */}
+        <MessageAuthorHeading>
+          {folded
+            ? senderLabel
+            : userMessage.guestName === undefined
+              ? "You"
+              : `${userMessage.guestName} (guest)`}
+        </MessageAuthorHeading>
+        {folded ? (
+          <FoldedMessageHeader
+            icon={MessagesSquareIcon}
+            label={senderLabel}
+            summary={foldSummary}
+            expanded={expanded}
+            onToggle={() => setExpanded((value) => !value)}
+          />
+        ) : null}
+        {/* Find reads the DOM, so a folded message stays mounted but hidden while find is open. */}
+        {!folded || expanded || ctx.findActive ? (
+          <div
+            ref={folded ? revealFoldRef : undefined}
+            hidden={folded && !expanded}
+            className={cn(
+              folded && "px-3 pb-3",
+              folded && !ctx.findActive && "max-h-96 overflow-auto",
+            )}
+          >
+            {(regularImages.length > 0 || userVideos.length > 0) && (
+              <div
+                className={cn(
+                  "grid",
+                  !mediaOnly
+                    ? "mb-2 max-w-[210px] grid-cols-2 gap-2"
+                    : loneImage
+                      ? "max-w-full"
+                      : collage
+                        ? cn(
+                            MEDIA_EDGE_CLASS_NAME,
+                            "w-80 max-w-full gap-px overflow-hidden rounded-2xl bg-black/9 dark:bg-white/12",
+                            regularImages.length === 2
+                              ? "auto-rows-[12rem] grid-cols-2"
+                              : regularImages.length === 3
+                                ? "auto-rows-[calc(6rem-0.5px)] grid-cols-[3fr_2fr]"
+                                : "auto-rows-[6rem] grid-cols-2",
+                          )
+                        : "w-80 max-w-full grid-cols-2 gap-2",
+                )}
+              >
+                {regularImages.map((image, index) => (
+                  <div
+                    key={image.id}
+                    className={cn(
+                      "bg-background/70",
+                      image.source?.kind === "snap-shot" && image.previewUrl
+                        ? cn(SNAP_SHOT_ATTACHMENT_FRAME_CLASS, "col-span-2")
+                        : loneImage
+                          ? cn(MEDIA_EDGE_CLASS_NAME, "overflow-hidden rounded-2xl")
+                          : collage
+                            ? cn(
+                                "overflow-hidden bg-background",
+                                regularImages.length === 3 && index === 0 && "row-span-2",
+                                regularImages.length > 3 &&
+                                  regularImages.length % 2 === 1 &&
+                                  index === regularImages.length - 1 &&
+                                  "col-span-2",
+                              )
+                            : "aspect-[4/3] overflow-hidden rounded-lg border border-border/80",
+                    )}
+                  >
+                    {image.previewUrl ? (
+                      <button
+                        type="button"
+                        className="block h-full w-full cursor-zoom-in"
+                        aria-label={`Preview ${image.name}`}
+                        onClick={() => {
+                          const preview = buildExpandedImagePreview(regularImages, image.id);
+                          if (!preview) return;
+                          ctx.onImageExpand(preview);
+                        }}
+                      >
+                        {/* Isolate the thumbnail raster from nearby activity repaints in Chromium. */}
+                        <AttachmentImage
+                          name={image.name}
+                          mimeType={image.mimeType}
+                          src={image.previewUrl}
+                          alt={image.name}
+                          decoding="async"
+                          loading="lazy"
                           className={cn(
-                            "flex min-h-[72px] items-center justify-center px-2 py-3 text-center text-2xs text-muted-foreground/70",
-                            loneImage && "h-48 w-64 max-w-full",
-                            collage && "h-full",
+                            "block transform-gpu",
+                            // A fixed height keeps the row from growing when the image loads.
+                            loneImage
+                              ? "h-48 w-auto min-w-24 max-w-full object-cover"
+                              : "size-full object-cover",
                           )}
-                        >
-                          {image.name}
-                        </div>
-                      )}
-                      {image.previewUrl && image.source?.kind === "snap-shot" ? (
-                        <SnapShotAttachmentDetails source={image.source} />
-                      ) : null}
-                    </div>
-                  ))}
-                  {userVideos.map((file) => (
-                    <UserVideoAttachment key={file.id} file={file} />
-                  ))}
-                </div>
-              )}
-              {userAudio.length > 0 ? (
-                <div className="mb-2 flex max-w-full flex-col gap-1">
-                  {userAudio.map((file) => (
-                    <InlineAudioPreview
-                      key={file.id}
-                      name={file.name}
-                      environmentId={ctx.activeThreadEnvironmentId}
-                      resource={{
-                        _tag: "attachment",
-                        attachmentId: file.id,
-                        fileName: file.name,
-                        mimeType: file.mimeType,
-                        disposition: "inline",
-                      }}
-                      onOpen={() => ctx.onFileOpen(file)}
-                    />
-                  ))}
-                </div>
-              ) : null}
-              {unchippedFiles.length > 0 || unknownAttachments.length > 0 ? (
-                <div className="mb-2 flex flex-col gap-1">
-                  {unchippedFiles.map((file) => {
-                    const fileIdentity = (
-                      <>
-                        <PierreEntryIcon
-                          pathValue={file.name}
-                          kind="file"
-                          theme={ctx.resolvedTheme}
                         />
-                        <span className="min-w-0 flex-1 truncate">{file.name}</span>
-                      </>
-                    );
-                    if (file.downloadable !== false) {
-                      return (
-                        <div key={file.id} className="flex min-w-0 items-center gap-1">
-                          <button
-                            type="button"
-                            aria-label={`Preview ${file.name}`}
-                            onClick={() => ctx.onFileOpen(file)}
-                            className="focus-visible:ring-ring/70 flex min-w-0 flex-1 cursor-pointer items-center gap-2 rounded-md py-1 text-left text-sm hover:underline focus-visible:ring-2 focus-visible:ring-inset focus-visible:outline-none"
-                          >
-                            {fileIdentity}
-                            <EyeIcon className="size-4 shrink-0" />
-                          </button>
-                          <Tooltip>
-                            <TooltipTrigger
-                              render={
-                                <Button
-                                  size="icon-xs"
-                                  variant="ghost-muted"
-                                  aria-label={`Download ${file.name}`}
-                                  onClick={() => ctx.onFileDownload(file)}
-                                />
-                              }
-                            >
-                              <DownloadIcon />
-                            </TooltipTrigger>
-                            <TooltipPopup side="top">Download {file.name}</TooltipPopup>
-                          </Tooltip>
-                        </div>
-                      );
-                    }
-
-                    return (
-                      <div key={file.id} className="flex min-w-0 items-center gap-2 py-1 text-sm">
-                        {fileIdentity}
+                      </button>
+                    ) : (
+                      <div
+                        className={cn(
+                          "flex min-h-[72px] items-center justify-center px-2 py-3 text-center text-2xs text-muted-foreground/70",
+                          loneImage && "h-48 w-64 max-w-full",
+                          collage && "h-full",
+                        )}
+                      >
+                        {image.name}
                       </div>
-                    );
-                  })}
-                  {unknownAttachments.map((attachment) => (
-                    <div
-                      key={attachment.id}
-                      className="flex min-w-0 items-center gap-2 py-1 text-sm"
-                    >
+                    )}
+                    {image.previewUrl && image.source?.kind === "snap-shot" ? (
+                      <SnapShotAttachmentDetails source={image.source} />
+                    ) : null}
+                  </div>
+                ))}
+                {userVideos.map((file) => (
+                  <UserVideoAttachment key={file.id} file={file} />
+                ))}
+              </div>
+            )}
+            {userAudio.length > 0 ? (
+              <div className="mb-2 flex max-w-full flex-col gap-1">
+                {userAudio.map((file) => (
+                  <InlineAudioPreview
+                    key={file.id}
+                    name={file.name}
+                    environmentId={ctx.activeThreadEnvironmentId}
+                    resource={{
+                      _tag: "attachment",
+                      attachmentId: file.id,
+                      fileName: file.name,
+                      mimeType: file.mimeType,
+                      disposition: "inline",
+                    }}
+                    onOpen={() => ctx.onFileOpen(file)}
+                  />
+                ))}
+              </div>
+            ) : null}
+            {unchippedFiles.length > 0 || unknownAttachments.length > 0 ? (
+              <div className="mb-2 flex flex-col gap-1">
+                {unchippedFiles.map((file) => {
+                  const fileIdentity = (
+                    <>
                       <PierreEntryIcon
-                        pathValue={attachment.name}
+                        pathValue={file.name}
                         kind="file"
                         theme={ctx.resolvedTheme}
                       />
-                      <span className="min-w-0 flex-1 truncate">{attachment.name}</span>
+                      <span className="min-w-0 flex-1 truncate">{file.name}</span>
+                    </>
+                  );
+                  if (file.downloadable !== false) {
+                    return (
+                      <div key={file.id} className="flex min-w-0 items-center gap-1">
+                        <button
+                          type="button"
+                          aria-label={`Preview ${file.name}`}
+                          onClick={() => ctx.onFileOpen(file)}
+                          className="focus-visible:ring-ring/70 flex min-w-0 flex-1 cursor-pointer items-center gap-2 rounded-md py-1 text-left text-sm hover:underline focus-visible:ring-2 focus-visible:ring-inset focus-visible:outline-none"
+                        >
+                          {fileIdentity}
+                          <EyeIcon className="size-4 shrink-0" />
+                        </button>
+                        <Tooltip>
+                          <TooltipTrigger
+                            render={
+                              <Button
+                                size="icon-xs"
+                                variant="ghost-muted"
+                                aria-label={`Download ${file.name}`}
+                                onClick={() => ctx.onFileDownload(file)}
+                              />
+                            }
+                          >
+                            <DownloadIcon />
+                          </TooltipTrigger>
+                          <TooltipPopup side="top">Download {file.name}</TooltipPopup>
+                        </Tooltip>
+                      </div>
+                    );
+                  }
+
+                  return (
+                    <div key={file.id} className="flex min-w-0 items-center gap-2 py-1 text-sm">
+                      {fileIdentity}
                     </div>
-                  ))}
-                </div>
-              ) : null}
-              <div onCopyCapture={onBodyCopyCapture}>
-                <CollapsibleUserMessageBody
-                  text={resolvedContext.text}
-                  renderContextReference={renderContextReference}
-                  skills={ctx.skills}
-                  markdownCwd={ctx.markdownCwd}
-                  collapsible={!folded}
-                />
+                  );
+                })}
+                {unknownAttachments.map((attachment) => (
+                  <div key={attachment.id} className="flex min-w-0 items-center gap-2 py-1 text-sm">
+                    <PierreEntryIcon
+                      pathValue={attachment.name}
+                      kind="file"
+                      theme={ctx.resolvedTheme}
+                    />
+                    <span className="min-w-0 flex-1 truncate">{attachment.name}</span>
+                  </div>
+                ))}
               </div>
+            ) : null}
+            <div onCopyCapture={onBodyCopyCapture}>
+              <CollapsibleUserMessageBody
+                text={resolvedContext.text}
+                renderContextReference={renderContextReference}
+                skills={ctx.skills}
+                markdownCwd={ctx.markdownCwd}
+                collapsible={!folded}
+              />
             </div>
-          ) : null}
-        </div>
-        {stacked ? metaRow : null}
-      </StackedBubbleRow>
+          </div>
+        ) : null}
+      </div>
       <UserMessageProjectedStatus row={row} />
-      {stacked ? null : metaRow}
-    </div>
-  );
-}
-
-// Always rendered so the bubble keeps its place in the tree (and its expanded state) when a
-// message joins or leaves a burst.
-function StackedBubbleRow({ stacked, children }: { stacked: boolean; children: ReactNode }) {
-  return (
-    <div
-      className={
-        stacked
-          ? "flex w-full flex-row-reverse items-end gap-2 pointer-coarse:flex-col pointer-coarse:gap-1"
-          : "contents"
-      }
-    >
-      {children}
+      {!folded || expanded ? (
+        <div className="flex w-full max-w-[80%] items-center justify-end pe-1 text-xs tabular-nums opacity-0 transition-opacity duration-200 pointer-coarse:opacity-100 focus-within:opacity-100 group-hover:opacity-100">
+          <div className="flex shrink-0 items-center gap-2">
+            {folded && senderThreadId ? (
+              <InlineButton onClick={() => ctx.onOpenThread(senderThreadId)} tone="muted">
+                Open thread
+              </InlineButton>
+            ) : null}
+            <Tooltip>
+              <TooltipTrigger render={<p className="text-muted-foreground text-xs tabular-nums" />}>
+                {formatDayAwareTimestamp(row.message.createdAt, ctx.timestampFormat)}
+              </TooltipTrigger>
+              <TooltipPopup>
+                {formatChatTimestampTooltip(row.message.createdAt, ctx.timestampFormat)}
+              </TooltipPopup>
+            </Tooltip>
+            <div className="flex items-center gap-0.5">
+              {typeof revertTurnCount === "number" && (
+                <RevertUserMessageButton turnCount={revertTurnCount} messageId={row.message.id} />
+              )}
+              {resolvedContext.text && (
+                <MessageCopyButton
+                  text={contextClipboardFragment ? resolvedContext.text : plainText}
+                  {...(contextClipboardFragment
+                    ? {
+                        extraFlavors: {
+                          [COMPOSER_CONTEXT_CLIPBOARD_MIME]: contextClipboardFragment,
+                        },
+                      }
+                    : {})}
+                  variant="ghost"
+                />
+              )}
+              {promptLink !== null && (
+                <MessageCopyButton
+                  text={promptLink}
+                  label="Copy prompt link"
+                  icon={LinkIconNode}
+                  variant="ghost"
+                />
+              )}
+            </div>
+          </div>
+        </div>
+      ) : null}
     </div>
   );
 }