From f2ad694d48c0953212d571b12687994b2f5aac04 Mon Sep 17 00:00:00 2001
From: Molecule AI Core-UIUX <core-uiux@agents.moleculesai.app>
Date: Thu, 14 May 2026 02:29:47 +0000
Subject: [PATCH] =?UTF-8?q?fix(canvas):=20WCAG=20AA=20contrast=20=E2=80=94?=
 =?UTF-8?q?=20ChatTab=20error/retry/timestamp=20+=20ContextMenu=20status?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- ChatTab: Retry button bg-red-800/40 text-bad (1.7:1) → bg-red-800
  text-red-200 (4.5:1). User message timestamp text-white/70 (3.5:1)
  → text-white/80 (4.8:1). Error banner text-bad → text-red-300 (4.7:1
  on bg-red-900/20). Restart button in error banner same fix.
- ContextMenu: status label text-ink-mid (4.2:1) → text-ink (7.8:1).

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 canvas/src/components/ContextMenu.tsx  | 2 +-
 canvas/src/components/tabs/ChatTab.tsx | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/canvas/src/components/ContextMenu.tsx b/canvas/src/components/ContextMenu.tsx
index 08cfd833..0b8fce50 100644
--- a/canvas/src/components/ContextMenu.tsx
+++ b/canvas/src/components/ContextMenu.tsx
@@ -318,7 +318,7 @@ export function ContextMenu() {
             aria-hidden="true"
             className={`w-1.5 h-1.5 rounded-full ${statusDotClass(contextMenu.nodeData.status)}`}
           />
-          <span className="text-[10px] text-ink-mid">{contextMenu.nodeData.status}</span>
+          <span className="text-[10px] text-ink">{contextMenu.nodeData.status}</span>
         </div>
       </div>
 
diff --git a/canvas/src/components/tabs/ChatTab.tsx b/canvas/src/components/tabs/ChatTab.tsx
index c6669058..7f05270b 100644
--- a/canvas/src/components/tabs/ChatTab.tsx
+++ b/canvas/src/components/tabs/ChatTab.tsx
@@ -977,7 +977,7 @@ function MyChatPanel({ workspaceId, data }: Props) {
             </p>
             <button
               onClick={loadInitial}
-              className="text-[10px] px-2 py-0.5 rounded bg-red-800/40 text-bad hover:bg-red-700/50 transition-colors"
+              className="text-[10px] px-2 py-0.5 rounded bg-red-800 text-red-200 hover:bg-red-700 transition-colors"
             >
               Retry
             </button>
@@ -1129,7 +1129,7 @@ function MyChatPanel({ workspaceId, data }: Props) {
                   ))}
                 </div>
               )}
-              <div className={`text-[9px] mt-1 ${msg.role === "user" ? "text-white/70" : "text-ink-mid"}`}>
+              <div className={`text-[9px] mt-1 ${msg.role === "user" ? "text-white/80" : "text-ink-mid"}`}>
                 {new Date(msg.timestamp).toLocaleTimeString()}
               </div>
             </div>
@@ -1169,11 +1169,11 @@ function MyChatPanel({ workspaceId, data }: Props) {
       {error && (
         <div className="px-3 py-2 bg-red-900/20 border-t border-red-800/30">
           <div className="flex items-center justify-between">
-            <span className="text-[10px] text-bad">{error}</span>
+            <span className="text-[10px] text-red-300">{error}</span>
             {!isOnline && (
               <button
                 onClick={() => setConfirmRestart(true)}
-                className="text-[11px] px-2 py-0.5 bg-red-800/40 text-bad rounded hover:bg-red-700/50"
+                className="text-[11px] px-2 py-0.5 bg-red-800 text-red-200 rounded hover:bg-red-700"
               >
                 Restart
               </button>