From 3d145da99d52f564657af53b5ba99d98538294c7 Mon Sep 17 00:00:00 2001
From: Hongming Wang <hongmingwang.rabbit@users.noreply.github.com>
Date: Sun, 3 May 2026 09:58:18 -0700
Subject: [PATCH] fix(canvas): chat bubble + sub-tab contrast in light theme
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Chat bubble fixes (canvas/src/components/tabs/ChatTab.tsx):
- User bubble: bg-accent-strong/30 + text-blue-100 → bg-accent + text-white
  (translucent dark-blue overlay on warm-paper surface read as pale lavender
  with near-invisible light-blue text — a real WCAG AA failure on the
  highest-traffic surface in canvas).
- System/error bubble: bg-red-900/30 + text-red-200 → bg-bad/10 + text-bad,
  using semantic tokens so dark-mode adapts automatically.
- Agent bubble: drop /80 + /30 opacity modifiers; solid bg-surface-card +
  text-ink + border-line gives consistent contrast in both themes.
- prose-invert was unconditional, so markdown text on agent/system bubbles
  rendered as light text on a light surface in light mode. Make it apply
  only on the user bubble (the only dark surface in this component).
- Timestamp: text-ink-soft is too pale on warm-paper; use text-ink-mid for
  agent/system, white/70 for user (visible on the now-solid blue bg).

Sub-tab bar fixes (canvas/src/components/SidePanel.tsx):
- Right-edge fade was hardcoded `from-zinc-950` — that paints a dark vertical
  strip on the right edge of the tab bar in light mode. Switch to
  `from-surface` so the gradient blends into whichever theme is active.
- Inactive tab text: text-ink-soft (~3.5:1 on warm-paper) → text-ink-mid
  (~7:1). Active tab background: drop the /40 opacity so the selection is
  unambiguous on either surface.

No semantic-token additions; all changes use existing warm-paper tokens
that already work in both themes.
---
 canvas/src/components/SidePanel.tsx    |  6 +++---
 canvas/src/components/tabs/ChatTab.tsx | 10 +++++-----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/canvas/src/components/SidePanel.tsx b/canvas/src/components/SidePanel.tsx
index 7d513107..437aff90 100644
--- a/canvas/src/components/SidePanel.tsx
+++ b/canvas/src/components/SidePanel.tsx
@@ -202,7 +202,7 @@ export function SidePanel() {
       {/* Tabs — relative wrapper lets the fade gradient position against the scroll container */}
       <div className="relative border-b border-line/40">
         {/* Right-edge fade: signals more tabs are hidden off-screen when the bar overflows */}
-        <div className="pointer-events-none absolute inset-y-0 right-0 w-8 bg-gradient-to-l from-zinc-950 to-transparent z-10" aria-hidden="true" />
+        <div className="pointer-events-none absolute inset-y-0 right-0 w-8 bg-gradient-to-l from-surface to-transparent z-10" aria-hidden="true" />
       <div
         role="tablist"
         aria-label="Workspace panel tabs"
@@ -232,8 +232,8 @@ export function SidePanel() {
             onClick={() => setPanelTab(tab.id)}
             className={`shrink-0 px-3 py-2.5 text-[10px] font-medium tracking-wide transition-all rounded-t-lg mx-0.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 ${
               panelTab === tab.id
-                ? "text-ink bg-surface-card/40 border-b-2 border-accent"
-                : "text-ink-soft hover:text-ink hover:bg-surface-card/40"
+                ? "text-ink bg-surface-card border-b-2 border-accent"
+                : "text-ink-mid hover:text-ink hover:bg-surface-card/60"
             }`}
           >
             <span className="mr-1 opacity-50" aria-hidden="true">{tab.icon}</span>
diff --git a/canvas/src/components/tabs/ChatTab.tsx b/canvas/src/components/tabs/ChatTab.tsx
index b44047a3..6c2c57cb 100644
--- a/canvas/src/components/tabs/ChatTab.tsx
+++ b/canvas/src/components/tabs/ChatTab.tsx
@@ -773,14 +773,14 @@ function MyChatPanel({ workspaceId, data }: Props) {
             <div
               className={`max-w-[85%] rounded-lg px-3 py-2 text-xs ${
                 msg.role === "user"
-                  ? "bg-accent-strong/30 text-blue-100 border border-accent/20"
+                  ? "bg-accent text-white border border-accent-strong"
                   : msg.role === "system"
-                    ? "bg-red-900/30 text-red-200 border border-red-800/30"
-                    : "bg-surface-card/80 text-ink border border-line/30"
+                    ? "bg-bad/10 text-bad border border-bad/40"
+                    : "bg-surface-card text-ink border border-line"
               }`}
             >
               {msg.content && (
-                <div className="prose prose-sm prose-invert max-w-none [&>p]:mb-1 [&>p:last-child]:mb-0">
+                <div className={`prose prose-sm max-w-none [&>p]:mb-1 [&>p:last-child]:mb-0 ${msg.role === "user" ? "prose-invert" : ""}`}>
                   <ReactMarkdown remarkPlugins={[remarkGfm]}>{msg.content}</ReactMarkdown>
                 </div>
               )}
@@ -796,7 +796,7 @@ function MyChatPanel({ workspaceId, data }: Props) {
                   ))}
                 </div>
               )}
-              <div className="text-[9px] text-ink-soft mt-1">
+              <div className={`text-[9px] mt-1 ${msg.role === "user" ? "text-white/70" : "text-ink-mid"}`}>
                 {new Date(msg.timestamp).toLocaleTimeString()}
               </div>
             </div>