diff --git a/ui/src/components/task-chat/TaskChatBubble.test.tsx b/ui/src/components/task-chat/TaskChatBubble.test.tsx
index e16c4a20f9..9b3c041200 100644
--- a/ui/src/components/task-chat/TaskChatBubble.test.tsx
+++ b/ui/src/components/task-chat/TaskChatBubble.test.tsx
@@ -66,6 +66,48 @@ describe("TaskChatBubble attachment chips", () => {
});
});
+describe("TaskChatBubble accent-bubble text color", () => {
+ let container: HTMLDivElement;
+ let root: Root | null = null;
+
+ beforeEach(() => {
+ container = document.createElement("div");
+ document.body.appendChild(container);
+ root = createRoot(container);
+ });
+
+ afterEach(() => {
+ flushSync(() => root?.unmount());
+ root = null;
+ container.remove();
+ });
+
+ function render(item: TaskChatMessageItem) {
+ flushSync(() =>
+ root!.render(
+
+
+ ,
+ ),
+ );
+ }
+
+ it("marks the human bubble's markdown as on-accent so prose text follows text-white", () => {
+ render({ id: "m1", kind: "message", author: "human", text: "when a new task is created…" });
+ const body = container.querySelector(".paperclip-markdown");
+ expect(body).not.toBeNull();
+ // Without this class the light-mode prose body color reads as black on blue.
+ expect(body?.className).toContain("paperclip-markdown-on-accent");
+ });
+
+ it("leaves the neutral agent bubble on default prose colors", () => {
+ render({ id: "m1", kind: "message", author: "agent", authorName: "CEO", text: "Final reply." });
+ const body = container.querySelector(".paperclip-markdown");
+ expect(body).not.toBeNull();
+ expect(body?.className).not.toContain("paperclip-markdown-on-accent");
+ });
+});
+
describe("TaskChatBubble interstitial self-talk (PAP-357)", () => {
let container: HTMLDivElement;
let root: Root | null = null;
diff --git a/ui/src/components/task-chat/TaskChatBubble.tsx b/ui/src/components/task-chat/TaskChatBubble.tsx
index 549877d381..af8f71e3bb 100644
--- a/ui/src/components/task-chat/TaskChatBubble.tsx
+++ b/ui/src/components/task-chat/TaskChatBubble.tsx
@@ -99,7 +99,17 @@ export function TaskChatBubble({ item, attachedTurn }: TaskChatBubbleProps) {
item.optimistic ? "opacity-80" : null,
)}
>
-
+
{bodyText}
diff --git a/ui/src/components/task-chat/TaskChatDescriptionBubble.tsx b/ui/src/components/task-chat/TaskChatDescriptionBubble.tsx
index 025d101f25..28c874ac06 100644
--- a/ui/src/components/task-chat/TaskChatDescriptionBubble.tsx
+++ b/ui/src/components/task-chat/TaskChatDescriptionBubble.tsx
@@ -148,7 +148,14 @@ export function TaskChatDescriptionBubble({ brief }: TaskChatDescriptionBubblePr
// toggle's muted colors need a lift on the solid blue bubble.
toggleClassName={isHuman ? "text-white/80 hover:text-white hover:bg-white/10" : undefined}
>
-
+
{brief.description}