From c37596fc26a9d734567a813d41badddb30c2f269 Mon Sep 17 00:00:00 2001
From: Hongming Wang <hongmingwang.rabbit@users.noreply.github.com>
Date: Sun, 3 May 2026 13:04:12 -0700
Subject: [PATCH] fix(canvas): brighten agent chat prose body in dark mode
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

User feedback: chat-bubble agent text still washed out after #2618 +
#2623. Looked at the actual rendered colors and the issue was Tailwind
Typography's `prose-invert` defaults — body text ships at zinc-300,
which lands at ~5.3:1 against bg-zinc-700. Passes AA but visibly
duller than the user bubble's crisp white-on-blue (~10:1).

Override the prose CSS variables on the agent bubble in dark mode:
- body  → zinc-100  (was zinc-300)
- headings / bold → white
- inline code → zinc-100

That brings agent body text to ~13:1 against bg-zinc-700, matching the
user bubble's brightness so both sides of the conversation read at
the same crispness.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 canvas/src/components/tabs/ChatTab.tsx | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/canvas/src/components/tabs/ChatTab.tsx b/canvas/src/components/tabs/ChatTab.tsx
index 040fa983..fbe53b7c 100644
--- a/canvas/src/components/tabs/ChatTab.tsx
+++ b/canvas/src/components/tabs/ChatTab.tsx
@@ -796,12 +796,14 @@ function MyChatPanel({ workspaceId, data }: Props) {
                   className={`prose prose-sm max-w-none [&>p]:mb-1 [&>p:last-child]:mb-0 ${
                     msg.role === "user"
                       ? "prose-invert"
-                      // Agent bubbles use bg-zinc-700 in dark mode; without
-                      // prose-invert the Tailwind Typography plugin keeps
-                      // its default DARK body color → unreadable dark-on-dark.
-                      // Light mode keeps default prose colors against the
-                      // warm surface-card bg.
-                      : "dark:prose-invert"
+                      // Agent bubbles in dark mode: invert prose AND brighten
+                      // the body/heading/bold/code tokens. prose-invert's
+                      // default `--tw-prose-invert-body: zinc-300` lands at
+                      // ~5.3:1 against bg-zinc-700 — passes AA but reads
+                      // washed out next to the user bubble's crisp
+                      // white-on-blue (~10:1). Push body to zinc-100 so the
+                      // agent text matches that crispness.
+                      : "dark:prose-invert dark:[--tw-prose-invert-body:theme(colors.zinc.100)] dark:[--tw-prose-invert-headings:theme(colors.white)] dark:[--tw-prose-invert-bold:theme(colors.white)] dark:[--tw-prose-invert-code:theme(colors.zinc.100)]"
                   }`}
                 >
                   <ReactMarkdown remarkPlugins={[remarkGfm]}>{msg.content}</ReactMarkdown>