From 20302900b81bc79a9421f164ca0b28e295b36a39 Mon Sep 17 00:00:00 2001
From: chihlasm <michael@chihlas.com>
Date: Tue, 24 Mar 2026 21:51:24 +0000
Subject: [PATCH] fix: improve text contrast on DevBranchingPage
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Page subtitle: text-secondary → text-primary
- Helper text: text-muted → text-secondary
- Section labels: text-muted → text-secondary
- Detail card labels: text-muted → text-secondary
- Detail card values: text-primary → text-heading
- Detail card body: text-secondary → text-primary

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/src/pages/DevBranchingPage.tsx | 34 ++++++++++++-------------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/frontend/src/pages/DevBranchingPage.tsx b/frontend/src/pages/DevBranchingPage.tsx
index de99861c..ac573b99 100644
--- a/frontend/src/pages/DevBranchingPage.tsx
+++ b/frontend/src/pages/DevBranchingPage.tsx
@@ -455,7 +455,7 @@ export default function DevBranchingPage() {
             <h1 className="text-lg font-heading font-semibold text-heading">
               Conversational Branching — Component Test
             </h1>
-            <p className="text-sm text-secondary mt-1">
+            <p className="text-sm text-primary mt-1">
               Mock scenario: Intermittent connectivity on WS-1042. 5 branches, 1 fork, 1 revival.
             </p>
           </div>
@@ -469,7 +469,7 @@ export default function DevBranchingPage() {
                 toBranch={activeBranch}
               />
             ) : (
-              <p className="text-xs text-muted">Click a branch in the sidebar to see the transition bar.</p>
+              <p className="text-xs text-secondary">Click a branch in the sidebar to see the transition bar.</p>
             )}
           </section>
 
@@ -519,35 +519,35 @@ export default function DevBranchingPage() {
             <div className="bg-card border border-default rounded-lg p-4 text-sm">
               <div className="grid grid-cols-2 gap-2">
                 <div>
-                  <span className="text-muted">Label:</span>{' '}
-                  <span className="text-primary">{activeBranch.label}</span>
+                  <span className="text-secondary">Label:</span>{' '}
+                  <span className="text-heading">{activeBranch.label}</span>
                 </div>
                 <div>
-                  <span className="text-muted">Status:</span>{' '}
-                  <span className="text-primary">{activeBranch.status}</span>
+                  <span className="text-secondary">Status:</span>{' '}
+                  <span className="text-heading">{activeBranch.status}</span>
                 </div>
                 <div>
-                  <span className="text-muted">Steps:</span>{' '}
-                  <span className="text-primary">{activeBranch.step_count}</span>
+                  <span className="text-secondary">Steps:</span>{' '}
+                  <span className="text-heading">{activeBranch.step_count}</span>
                 </div>
                 <div>
-                  <span className="text-muted">Order:</span>{' '}
-                  <span className="text-primary">{activeBranch.branch_order}</span>
+                  <span className="text-secondary">Order:</span>{' '}
+                  <span className="text-heading">{activeBranch.branch_order}</span>
                 </div>
               </div>
               {activeBranch.status_reason && (
                 <div className="mt-2 pt-2 border-t border-default">
-                  <span className="text-muted">Reason:</span>{' '}
-                  <span className="text-secondary">{activeBranch.status_reason}</span>
+                  <span className="text-secondary">Reason:</span>{' '}
+                  <span className="text-primary">{activeBranch.status_reason}</span>
                 </div>
               )}
               {activeBranch.context_summary && (
                 <div className="mt-2 pt-2 border-t border-default">
-                  <span className="text-muted">Tried:</span>{' '}
-                  <span className="text-secondary">{activeBranch.context_summary.tried.join(', ')}</span>
+                  <span className="text-secondary">Tried:</span>{' '}
+                  <span className="text-primary">{activeBranch.context_summary.tried.join(', ')}</span>
                   <br />
-                  <span className="text-muted">Concluded:</span>{' '}
-                  <span className="text-secondary">{activeBranch.context_summary.concluded}</span>
+                  <span className="text-secondary">Concluded:</span>{' '}
+                  <span className="text-primary">{activeBranch.context_summary.concluded}</span>
                 </div>
               )}
             </div>
@@ -570,7 +570,7 @@ export default function DevBranchingPage() {
 
 function SectionLabel({ children }: { children: React.ReactNode }) {
   return (
-    <span className="text-[10px] font-semibold uppercase tracking-wider text-muted mb-2 block">
+    <span className="text-[10px] font-semibold uppercase tracking-wider text-secondary mb-2 block">
       {children}
     </span>
   )