From 01836d6a2d8d046a990acd75cd3529506f39c6ad Mon Sep 17 00:00:00 2001
From: chihlasm <michael@chihlas.com>
Date: Tue, 24 Mar 2026 22:36:01 +0000
Subject: [PATCH] fix: replace text-secondary with text-muted-foreground in
 branching components
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

In Tailwind v4, text-secondary resolves to --color-secondary (#2e3140),
a dark surface color — NOT --color-text-secondary (#848b9b). This made
all secondary text invisible on dark backgrounds.

The correct class is text-muted-foreground which maps to #848b9b.
This matches the pattern used by existing FlowPilot components.

Also reverts the unnecessary index.css variable bump from prior commit.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../components/session/BranchRevivalCard.tsx  |  2 +-
 .../src/components/session/HandoffModal.tsx   |  8 +++---
 .../session/ResolutionOutputPanel.tsx         | 10 +++----
 frontend/src/index.css                        |  4 +--
 frontend/src/pages/DevBranchingPage.tsx       | 28 +++++++++----------
 frontend/src/pages/SessionQueuePage.tsx       |  2 +-
 6 files changed, 27 insertions(+), 27 deletions(-)

diff --git a/frontend/src/components/session/BranchRevivalCard.tsx b/frontend/src/components/session/BranchRevivalCard.tsx
index 8fea06c1..4bd9ad4f 100644
--- a/frontend/src/components/session/BranchRevivalCard.tsx
+++ b/frontend/src/components/session/BranchRevivalCard.tsx
@@ -19,7 +19,7 @@ export function BranchRevivalCard({ branch, evidenceSource }: BranchRevivalCardP
         <p className="text-xs text-primary mt-1">{branch.evidence_description}</p>
       )}
       {evidenceSource && (
-        <p className="text-xs text-secondary mt-0.5">Evidence from: {evidenceSource.label}</p>
+        <p className="text-xs text-muted-foreground mt-0.5">Evidence from: {evidenceSource.label}</p>
       )}
     </div>
   )
diff --git a/frontend/src/components/session/HandoffModal.tsx b/frontend/src/components/session/HandoffModal.tsx
index d01ad57b..efe27e87 100644
--- a/frontend/src/components/session/HandoffModal.tsx
+++ b/frontend/src/components/session/HandoffModal.tsx
@@ -79,7 +79,7 @@ export function HandoffModal({ onClose, onSubmit }: HandoffModalProps) {
                   'flex-1 rounded-[5px] border px-3 py-2 text-sm font-medium transition-colors',
                   intent === 'park'
                     ? 'border-accent bg-accent-dim text-accent-text'
-                    : 'border-default bg-transparent text-secondary hover:bg-elevated hover:text-primary'
+                    : 'border-default bg-transparent text-muted-foreground hover:bg-elevated hover:text-primary'
                 )}
               >
                 Park
@@ -91,13 +91,13 @@ export function HandoffModal({ onClose, onSubmit }: HandoffModalProps) {
                   'flex-1 rounded-[5px] border px-3 py-2 text-sm font-medium transition-colors',
                   intent === 'escalate'
                     ? 'border-accent bg-accent-dim text-accent-text'
-                    : 'border-default bg-transparent text-secondary hover:bg-elevated hover:text-primary'
+                    : 'border-default bg-transparent text-muted-foreground hover:bg-elevated hover:text-primary'
                 )}
               >
                 Escalate
               </button>
             </div>
-            <p className="text-xs text-secondary">
+            <p className="text-xs text-muted-foreground">
               {intent === 'park'
                 ? 'Park this session to resume later or hand to another engineer.'
                 : 'Escalate to a senior engineer with full context and branch history.'}
@@ -148,7 +148,7 @@ export function HandoffModal({ onClose, onSubmit }: HandoffModalProps) {
             type="button"
             onClick={onClose}
             disabled={isSubmitting}
-            className="rounded-[5px] border border-default px-4 py-2 text-sm text-secondary hover:bg-elevated hover:text-primary transition-colors disabled:opacity-50"
+            className="rounded-[5px] border border-default px-4 py-2 text-sm text-muted-foreground hover:bg-elevated hover:text-primary transition-colors disabled:opacity-50"
           >
             Cancel
           </button>
diff --git a/frontend/src/components/session/ResolutionOutputPanel.tsx b/frontend/src/components/session/ResolutionOutputPanel.tsx
index 8928f86b..df28957d 100644
--- a/frontend/src/components/session/ResolutionOutputPanel.tsx
+++ b/frontend/src/components/session/ResolutionOutputPanel.tsx
@@ -130,7 +130,7 @@ export function ResolutionOutputPanel({ sessionId, className }: ResolutionOutput
                 'flex items-center gap-1.5 px-3 py-2.5 text-xs font-medium transition-colors border-b-2 -mb-px',
                 isActive
                   ? 'border-accent text-accent-text'
-                  : 'border-transparent text-secondary hover:text-primary hover:border-hover'
+                  : 'border-transparent text-muted-foreground hover:text-primary hover:border-hover'
               )}
             >
               <Icon size={13} />
@@ -184,7 +184,7 @@ export function ResolutionOutputPanel({ sessionId, className }: ResolutionOutput
               type="button"
               onClick={handleEditToggle}
               disabled={isSaving}
-              className="rounded-[5px] border border-default px-3 py-1.5 text-xs text-secondary hover:bg-elevated hover:text-primary transition-colors disabled:opacity-50"
+              className="rounded-[5px] border border-default px-3 py-1.5 text-xs text-muted-foreground hover:bg-elevated hover:text-primary transition-colors disabled:opacity-50"
             >
               Cancel
             </button>
@@ -196,7 +196,7 @@ export function ResolutionOutputPanel({ sessionId, className }: ResolutionOutput
               onClick={handleEditToggle}
               disabled={!activeOutput}
               className={cn(
-                'flex items-center gap-1.5 rounded-[5px] border border-default px-3 py-1.5 text-xs text-secondary',
+                'flex items-center gap-1.5 rounded-[5px] border border-default px-3 py-1.5 text-xs text-muted-foreground',
                 'hover:bg-elevated hover:text-primary transition-colors disabled:opacity-40'
               )}
             >
@@ -211,7 +211,7 @@ export function ResolutionOutputPanel({ sessionId, className }: ResolutionOutput
                 'flex items-center gap-1.5 rounded-[5px] border border-default px-3 py-1.5 text-xs transition-colors disabled:opacity-40',
                 copied
                   ? 'border-success text-success'
-                  : 'text-secondary hover:bg-elevated hover:text-primary'
+                  : 'text-muted-foreground hover:bg-elevated hover:text-primary'
               )}
             >
               {copied ? <Check size={12} /> : <Copy size={12} />}
@@ -225,7 +225,7 @@ export function ResolutionOutputPanel({ sessionId, className }: ResolutionOutput
                 'flex items-center gap-1.5 rounded-[5px] border border-default px-3 py-1.5 text-xs transition-colors disabled:opacity-40',
                 activeOutput?.status === 'pushed'
                   ? 'border-success text-success'
-                  : 'text-secondary hover:bg-elevated hover:text-primary'
+                  : 'text-muted-foreground hover:bg-elevated hover:text-primary'
               )}
             >
               <Send size={12} />
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 74d93c94..14daec72 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -20,7 +20,7 @@
   /* ── Text colors ───────────────────────────────── */
   --color-text-heading: #f0f2f5;
   --color-text-primary: #e2e5eb;
-  --color-text-secondary: #a0a7b8;
+  --color-text-secondary: #848b9b;
   --color-text-muted: #4f5666;
   --color-text-rail-label: #e2e5eb;
 
@@ -54,7 +54,7 @@
   --color-secondary: #2e3140;
   --color-secondary-foreground: #e2e5eb;
   --color-muted: #2e3140;
-  --color-muted-foreground: #a0a7b8;
+  --color-muted-foreground: #848b9b;
   --color-accent-tw: #2e3140;
   --color-accent-foreground: #e2e5eb;
   --color-destructive: #f87171;
diff --git a/frontend/src/pages/DevBranchingPage.tsx b/frontend/src/pages/DevBranchingPage.tsx
index ac573b99..d2da963e 100644
--- a/frontend/src/pages/DevBranchingPage.tsx
+++ b/frontend/src/pages/DevBranchingPage.tsx
@@ -324,7 +324,7 @@ function MockResolutionPanel({ outputs }: { outputs: ResolutionOutputResponse[]
                 'flex items-center gap-1.5 px-3 py-2.5 text-xs font-medium transition-colors border-b-2 -mb-px',
                 isActive
                   ? 'border-accent text-accent-text'
-                  : 'border-transparent text-secondary hover:text-primary hover:border-hover'
+                  : 'border-transparent text-muted-foreground hover:text-primary hover:border-hover'
               )}
             >
               <Icon size={13} />
@@ -371,7 +371,7 @@ function MockResolutionPanel({ outputs }: { outputs: ResolutionOutputResponse[]
             <button
               type="button"
               onClick={handleEditToggle}
-              className="rounded-[5px] border border-default px-3 py-1.5 text-xs text-secondary hover:bg-elevated hover:text-primary transition-colors"
+              className="rounded-[5px] border border-default px-3 py-1.5 text-xs text-muted-foreground hover:bg-elevated hover:text-primary transition-colors"
             >
               Cancel
             </button>
@@ -382,7 +382,7 @@ function MockResolutionPanel({ outputs }: { outputs: ResolutionOutputResponse[]
               type="button"
               onClick={handleEditToggle}
               disabled={!activeOutput}
-              className="flex items-center gap-1.5 rounded-[5px] border border-default px-3 py-1.5 text-xs text-secondary hover:bg-elevated hover:text-primary transition-colors disabled:opacity-40"
+              className="flex items-center gap-1.5 rounded-[5px] border border-default px-3 py-1.5 text-xs text-muted-foreground hover:bg-elevated hover:text-primary transition-colors disabled:opacity-40"
             >
               <Pencil size={12} /> Edit
             </button>
@@ -392,7 +392,7 @@ function MockResolutionPanel({ outputs }: { outputs: ResolutionOutputResponse[]
               disabled={!activeOutput}
               className={cn(
                 'flex items-center gap-1.5 rounded-[5px] border border-default px-3 py-1.5 text-xs transition-colors disabled:opacity-40',
-                copied ? 'border-success text-success' : 'text-secondary hover:bg-elevated hover:text-primary'
+                copied ? 'border-success text-success' : 'text-muted-foreground hover:bg-elevated hover:text-primary'
               )}
             >
               {copied ? <Check size={12} /> : <Copy size={12} />}
@@ -402,7 +402,7 @@ function MockResolutionPanel({ outputs }: { outputs: ResolutionOutputResponse[]
               type="button"
               onClick={() => toast.success('Pushed to PSA (mock)')}
               disabled={!activeOutput}
-              className="flex items-center gap-1.5 rounded-[5px] border border-default px-3 py-1.5 text-xs text-secondary hover:bg-elevated hover:text-primary transition-colors disabled:opacity-40"
+              className="flex items-center gap-1.5 rounded-[5px] border border-default px-3 py-1.5 text-xs text-muted-foreground hover:bg-elevated hover:text-primary transition-colors disabled:opacity-40"
             >
               <Send size={12} /> Push to PSA
             </button>
@@ -469,7 +469,7 @@ export default function DevBranchingPage() {
                 toBranch={activeBranch}
               />
             ) : (
-              <p className="text-xs text-secondary">Click a branch in the sidebar to see the transition bar.</p>
+              <p className="text-xs text-muted-foreground">Click a branch in the sidebar to see the transition bar.</p>
             )}
           </section>
 
@@ -519,34 +519,34 @@ 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-secondary">Label:</span>{' '}
+                  <span className="text-muted-foreground">Label:</span>{' '}
                   <span className="text-heading">{activeBranch.label}</span>
                 </div>
                 <div>
-                  <span className="text-secondary">Status:</span>{' '}
+                  <span className="text-muted-foreground">Status:</span>{' '}
                   <span className="text-heading">{activeBranch.status}</span>
                 </div>
                 <div>
-                  <span className="text-secondary">Steps:</span>{' '}
+                  <span className="text-muted-foreground">Steps:</span>{' '}
                   <span className="text-heading">{activeBranch.step_count}</span>
                 </div>
                 <div>
-                  <span className="text-secondary">Order:</span>{' '}
+                  <span className="text-muted-foreground">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-secondary">Reason:</span>{' '}
+                  <span className="text-muted-foreground">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-secondary">Tried:</span>{' '}
+                  <span className="text-muted-foreground">Tried:</span>{' '}
                   <span className="text-primary">{activeBranch.context_summary.tried.join(', ')}</span>
                   <br />
-                  <span className="text-secondary">Concluded:</span>{' '}
+                  <span className="text-muted-foreground">Concluded:</span>{' '}
                   <span className="text-primary">{activeBranch.context_summary.concluded}</span>
                 </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-secondary mb-2 block">
+    <span className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground mb-2 block">
       {children}
     </span>
   )
diff --git a/frontend/src/pages/SessionQueuePage.tsx b/frontend/src/pages/SessionQueuePage.tsx
index 8a3f2313..cf6809ff 100644
--- a/frontend/src/pages/SessionQueuePage.tsx
+++ b/frontend/src/pages/SessionQueuePage.tsx
@@ -37,7 +37,7 @@ export default function SessionQueuePage() {
                   <span className="text-sm font-medium text-heading">{item.problem_summary || 'Untitled session'}</span>
                   {item.priority === 'elevated' && <span className="text-[10px] px-1.5 py-0.5 rounded-full bg-danger-dim text-danger">Elevated</span>}
                 </div>
-                {item.engineer_notes && <p className="text-xs text-secondary">{item.engineer_notes}</p>}
+                {item.engineer_notes && <p className="text-xs text-muted-foreground">{item.engineer_notes}</p>}
                 <div className="flex items-center gap-2 mt-1 text-xs text-muted">
                   <Clock size={10} />
                   <span>{new Date(item.created_at).toLocaleString()}</span>