From 07344db5d8516dcb7fee56ac199df26736c6cb71 Mon Sep 17 00:00:00 2001
From: Rizz
 <302abe414ca6e3134763d2539bfcf145aea2a63fe5f8455204ed602fd40cf381@buzz.block.builderlab.xyz>
Date: Tue, 25 Aug 2026 15:49:31 -0700
Subject: [PATCH] Align focus-mode chat bubble surfaces

Co-authored-by: Rizz <302abe414ca6e3134763d2539bfcf145aea2a63fe5f8455204ed602fd40cf381@buzz.block.builderlab.xyz>

Signed-off-by: Rizz <302abe414ca6e3134763d2539bfcf145aea2a63fe5f8455204ed602fd40cf381@buzz.block.builderlab.xyz>
---
 .../AgentSessionToolItem/CompactMessageSummary.tsx  |  2 +-
 ...AgentSessionTranscriptList.conversation.test.mjs | 13 ++++---------
 .../ui/activityRenderClasses/UserMessageBubble.tsx  |  9 ++++-----
 3 files changed, 9 insertions(+), 15 deletions(-)

diff --git a/desktop/src/features/agents/ui/AgentSessionToolItem/CompactMessageSummary.tsx b/desktop/src/features/agents/ui/AgentSessionToolItem/CompactMessageSummary.tsx
index 424837a068..4b5ed0c59f 100644
--- a/desktop/src/features/agents/ui/AgentSessionToolItem/CompactMessageSummary.tsx
+++ b/desktop/src/features/agents/ui/AgentSessionToolItem/CompactMessageSummary.tsx
@@ -138,7 +138,7 @@ export function CompactMessageSummary({
         <div className="flex min-w-0 flex-1 flex-col items-start gap-1">
           <div
             className={cn(
-              "w-full min-w-0 rounded-2xl border px-3 py-2 shadow-sm",
+              "w-full min-w-0 rounded-2xl border px-3 py-2",
               isCompactPreview
                 ? "text-xs leading-4"
                 : "text-sm leading-relaxed",
diff --git a/desktop/src/features/agents/ui/AgentSessionTranscriptList.conversation.test.mjs b/desktop/src/features/agents/ui/AgentSessionTranscriptList.conversation.test.mjs
index 18f40a3322..a43b16cdb7 100644
--- a/desktop/src/features/agents/ui/AgentSessionTranscriptList.conversation.test.mjs
+++ b/desktop/src/features/agents/ui/AgentSessionTranscriptList.conversation.test.mjs
@@ -60,10 +60,10 @@ test("conversation renders the prompt as a filled right-aligned bubble with an a
     '[data-testid="transcript-user-message"]',
   );
   assert.match(row.className, /justify-end/);
-  // berd's user-turn recipe: soft tint, no border, `px-4 py-2`, and a 12px
-  // radius (berd's `rounded-sm` on its own scale = Buzz's `rounded-xl`).
-  const bubble = row.querySelector(".rounded-xl");
-  assert.ok(bubble, "the prompt bubble should take berd's 12px radius");
+  // Keep Buzz's native 16px chat-bubble radius while adopting the focus view's
+  // soft tint, borderless surface, and `px-4 py-2` spacing.
+  const bubble = row.querySelector(".rounded-2xl");
+  assert.ok(bubble, "the prompt should match Buzz's chat-bubble radius");
   assert.match(bubble.className, /bg-muted\/60/);
   assert.match(bubble.className, /px-4/);
   assert.match(bubble.className, /py-2(?!\.)/);
@@ -72,11 +72,6 @@ test("conversation renders the prompt as a filled right-aligned bubble with an a
     /border-0/,
     "berd never draws a border on the user turn",
   );
-  assert.doesNotMatch(
-    bubble.className,
-    /rounded-2xl/,
-    "the old 16px pill radius should be gone",
-  );
   // Focus mode shows the whole prompt rather than clamping it.
   assert.doesNotMatch(bubble.className, /max-h-36/);
 });
diff --git a/desktop/src/features/agents/ui/activityRenderClasses/UserMessageBubble.tsx b/desktop/src/features/agents/ui/activityRenderClasses/UserMessageBubble.tsx
index 02980f6111..fcac60b1de 100644
--- a/desktop/src/features/agents/ui/activityRenderClasses/UserMessageBubble.tsx
+++ b/desktop/src/features/agents/ui/activityRenderClasses/UserMessageBubble.tsx
@@ -179,14 +179,13 @@ export function UserMessageBubble({
               "group/bubble cursor-pointer transition-colors hover:border-border hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
             isCompactPreview && "p-2 text-xs leading-4",
             // berd's user-turn recipe (MessageBubble.tsx:990): a soft tint, no
-            // border at all, `px-4 py-2`, and a tighter radius than a chat
-            // "pill". berd's `rounded-sm` is 12px on its own scale
-            // (globals.css `--radius-sm: 12px`), NOT Tailwind's stock 2px —
-            // Buzz's `rounded-xl` is the exact 12px equivalent here.
+            // border at all and `px-4 py-2`. Keep Buzz's native chat-bubble
+            // `rounded-2xl` radius so prompts and sent-message bubbles share the
+            // same silhouette across the channel and focus views.
             // `leading-normal` overrides the `leading-relaxed` base, as berd
             // does, so the prompt sits tighter than the agent's prose.
             isConversation &&
-              "rounded-xl border-0 bg-muted/60 px-4 py-2 leading-normal",
+              "rounded-2xl border-0 bg-muted/60 px-4 py-2 leading-normal",
             bubbleClassName,
           )}
           ref={bubbleRef}