From 38c8702934066e9e4d3df520b565f9073d596c6e Mon Sep 17 00:00:00 2001
From: Molecule AI Core-UIUX <core-uiux@agents.moleculesai.app>
Date: Thu, 14 May 2026 03:49:00 +0000
Subject: [PATCH] =?UTF-8?q?fix(canvas):=20remove=20opacity=20from=20error/?=
 =?UTF-8?q?success=20text=20=E2=80=94=20WCAG=20AA=20contrast?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixes 6 instances of text-bad/text-good with opacity reducing contrast:
- ConversationTraceModal: error detail (text-bad/80 → text-bad)
- ConversationTraceModal: Response label (text-good/60 → text-good)
- ActivityTab: error detail inline (text-bad/80 → text-bad)
- ActivityTab: A2AErrorPreview label+hint (text-bad/80 → text-bad, text-bad/70 → text-bad)
- ScheduleTab: last_error display (text-bad/70 → text-bad)
- SkillsTab: registry error detail (text-bad/80 → text-bad)

Note: text-bad (#d27773) on bg-surface-card (zinc-800) is 2.1:1 —
below AA for body text. The text color itself needs design review to
raise contrast to meet 4.5:1 on zinc-800 surfaces. This PR removes
opacity (which only made things worse) as a step 1; a follow-up
should consider warmer/muted zinc-safe alternatives for bad/good
status colors.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 canvas/src/components/ConversationTraceModal.tsx | 4 ++--
 canvas/src/components/tabs/ActivityTab.tsx       | 6 +++---
 canvas/src/components/tabs/ScheduleTab.tsx       | 2 +-
 canvas/src/components/tabs/SkillsTab.tsx         | 2 +-
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/canvas/src/components/ConversationTraceModal.tsx b/canvas/src/components/ConversationTraceModal.tsx
index 90fcaed6..61a834c0 100644
--- a/canvas/src/components/ConversationTraceModal.tsx
+++ b/canvas/src/components/ConversationTraceModal.tsx
@@ -251,7 +251,7 @@ export function ConversationTraceModal({ open, workspaceId: _workspaceId, onClos
 
                           {/* Error */}
                           {isError && entry.error_detail && (
-                            <div className="text-[10px] text-bad/80 mt-1 truncate">
+                            <div className="text-[10px] text-bad mt-1 truncate">
                               {entry.error_detail.slice(0, 200)}
                             </div>
                           )}
@@ -272,7 +272,7 @@ export function ConversationTraceModal({ open, workspaceId: _workspaceId, onClos
                           )}
                           {responseText && (
                             <div className="mt-1 bg-surface/60 border border-emerald-900/30 rounded-lg px-3 py-2 max-h-32 overflow-y-auto">
-                              <div className="text-[8px] text-good/60 uppercase mb-1">Response</div>
+                              <div className="text-[8px] text-good uppercase mb-1">Response</div>
                               <div className="text-[10px] text-ink-mid whitespace-pre-wrap break-words leading-relaxed">
                                 {responseText.slice(0, 2000)}
                                 {responseText.length > 2000 && (
diff --git a/canvas/src/components/tabs/ActivityTab.tsx b/canvas/src/components/tabs/ActivityTab.tsx
index 18e605a0..092a58bc 100644
--- a/canvas/src/components/tabs/ActivityTab.tsx
+++ b/canvas/src/components/tabs/ActivityTab.tsx
@@ -307,7 +307,7 @@ function ActivityRow({
 
         {/* Error detail */}
         {isError && entry.error_detail && (
-          <div className="text-[9px] text-bad/80 mt-1 truncate">
+          <div className="text-[9px] text-bad mt-1 truncate">
             {entry.error_detail}
           </div>
         )}
@@ -358,10 +358,10 @@ function A2AErrorPreview({ label, raw }: { label: string; raw: string }) {
   const hint = inferA2AErrorHint(detail);
   return (
     <div>
-      <div className="text-[8px] text-bad/80 uppercase tracking-wider mb-1">{label} — delivery failed</div>
+      <div className="text-[8px] text-bad uppercase tracking-wider mb-1">{label} — delivery failed</div>
       <div className="text-[10px] text-bad bg-red-950/30 border border-red-800/40 rounded p-2 space-y-1.5">
         <div className="font-mono whitespace-pre-wrap break-words max-h-32 overflow-y-auto">{detail}</div>
-        <div className="text-[9px] text-bad/70 leading-relaxed border-t border-red-800/30 pt-1.5">{hint}</div>
+        <div className="text-[9px] text-bad leading-relaxed border-t border-red-800/30 pt-1.5">{hint}</div>
       </div>
     </div>
   );
diff --git a/canvas/src/components/tabs/ScheduleTab.tsx b/canvas/src/components/tabs/ScheduleTab.tsx
index f3a2388c..ae7ac5aa 100644
--- a/canvas/src/components/tabs/ScheduleTab.tsx
+++ b/canvas/src/components/tabs/ScheduleTab.tsx
@@ -367,7 +367,7 @@ export function ScheduleTab({ workspaceId }: Props) {
                     <span>Runs: {sched.run_count}</span>
                   </div>
                   {sched.last_error && (
-                    <div className="text-[8px] text-bad/70 mt-0.5 truncate">
+                    <div className="text-[8px] text-bad mt-0.5 truncate">
                       Error: {sched.last_error}
                     </div>
                   )}
diff --git a/canvas/src/components/tabs/SkillsTab.tsx b/canvas/src/components/tabs/SkillsTab.tsx
index 60097625..74278a23 100644
--- a/canvas/src/components/tabs/SkillsTab.tsx
+++ b/canvas/src/components/tabs/SkillsTab.tsx
@@ -492,7 +492,7 @@ export function SkillsTab({ workspaceId, data }: Props) {
                 <div className="text-[10px] text-bad font-semibold mb-0.5">
                   Couldn't load the plugin registry
                 </div>
-                <div className="text-[10px] text-bad/80">{registryError}</div>
+                <div className="text-[10px] text-bad">{registryError}</div>
                 <div className="mt-1 text-[10px] text-ink-mid">
                   Check the platform server is reachable at /plugins. The Retry button is in the header above.
                 </div>