From 4a73cb7f704ba65a1bfe87d36d0ed48d0f78f479 Mon Sep 17 00:00:00 2001
From: scotttong <scott.tong@gmail.com>
Date: Mon, 17 Aug 2026 22:37:04 -0700
Subject: [PATCH] fix(task-chat): put the agent-authored description on the
 page surface

PAP-501 (#11263) moved agent prose onto the page surface: no card fill,
no rounding, full width. TaskChatBubble applies that to agent messages,
and TaskChatBubble.test.tsx asserts the agent branch carries neither
`bg-(--bubble-agent)` nor `rounded-2xl`.

TaskChatDescriptionBubble never followed. An agent-opened task still
rendered its description in a `--bubble-agent` card, so the first message
in a thread sat in a gray bubble while every later agent message sat on
the page. index.css says as much already: the lab variants exist to
"restore the shared card geometry that production no longer applies to
agent prose".

Apply the same branch here. The human side keeps its accent bubble.

This also removes the surface that made the code block look wrong. The
block reads as the only tinted panel in an agent message now, rather than
one gray rectangle inside another.

Update the test, which asserted the old card.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 .../task-chat/TaskChatDescriptionBubble.test.tsx     | 10 +++++++++-
 .../task-chat/TaskChatDescriptionBubble.tsx          | 12 +++++++++---
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/ui/src/components/task-chat/TaskChatDescriptionBubble.test.tsx b/ui/src/components/task-chat/TaskChatDescriptionBubble.test.tsx
index 172f8118aff..a89465abf63 100644
--- a/ui/src/components/task-chat/TaskChatDescriptionBubble.test.tsx
+++ b/ui/src/components/task-chat/TaskChatDescriptionBubble.test.tsx
@@ -95,8 +95,16 @@ describe("TaskChatDescriptionBubble (PAP-375)", () => {
     expect(bubble?.className).toContain("items-start");
     expect(bubble?.querySelector('[data-testid="task-chat-agent-avatar"]')).not.toBeNull();
     expect(bubble?.textContent).toContain("CEO");
-    expect(bubble?.querySelector(".bg-\\(--bubble-agent\\)")).not.toBeNull();
+    // PAP-501: agent prose sits on the page surface. The description is agent
+    // prose when an agent opened the task, so it carries no card fill, no
+    // rounding and no width cap — matching TaskChatBubble's agent branch.
+    expect(bubble?.querySelector(".bg-\\(--bubble-agent\\)")).toBeNull();
     expect(bubble?.querySelector(".bg-\\(--liveness-blue\\)")).toBeNull();
+    const agentBody = bubble?.querySelector(".bg-transparent");
+    expect(agentBody).not.toBeNull();
+    expect(agentBody?.className).toContain("w-full");
+    expect(agentBody?.className).not.toContain("rounded-2xl");
+    expect(agentBody?.className).not.toContain("max-w-(--pct-85)");
   });
 
   it("renders the live description — a new value shows without remount", () => {
diff --git a/ui/src/components/task-chat/TaskChatDescriptionBubble.tsx b/ui/src/components/task-chat/TaskChatDescriptionBubble.tsx
index 28c874ac061..5c504cc9ed5 100644
--- a/ui/src/components/task-chat/TaskChatDescriptionBubble.tsx
+++ b/ui/src/components/task-chat/TaskChatDescriptionBubble.tsx
@@ -135,11 +135,17 @@ export function TaskChatDescriptionBubble({ brief }: TaskChatDescriptionBubblePr
         )}
       >
         <div
+          // PAP-501 put agent prose on the page surface: no card fill, no
+          // rounding, full width. TaskChatBubble already does this for agent
+          // messages. The description is agent prose too when an agent opened
+          // the task, so it follows the same rule rather than keeping a
+          // --bubble-agent card that no other agent text still uses. The human
+          // side keeps its accent bubble.
           className={cn(
-            "max-w-(--pct-85) break-words px-3.5 py-2 text-sm",
+            "break-words py-2 text-sm",
             isHuman
-              ? "rounded-2xl rounded-br-sm bg-(--liveness-blue) text-white"
-              : "rounded-2xl rounded-bl-sm bg-(--bubble-agent) text-foreground",
+              ? "max-w-(--pct-85) rounded-2xl rounded-br-sm bg-(--liveness-blue) px-3.5 text-white"
+              : "w-full bg-transparent px-1 text-foreground",
           )}
         >
           <FoldCurtain