From 79f4bacb5c226819e65841a5c8e2807c1a2aeaab Mon Sep 17 00:00:00 2001
From: zenchantlive <jordanlive121@gmail.com>
Date: Sun, 1 Mar 2026 21:29:02 -0800
Subject: [PATCH] fix: use theme CSS variables in BlockedTriageModal

---
 .../shared/blocked-triage-modal.tsx           | 51 ++++++++++---------
 1 file changed, 27 insertions(+), 24 deletions(-)

diff --git a/src/components/shared/blocked-triage-modal.tsx b/src/components/shared/blocked-triage-modal.tsx
index cc6238c..f9b2205 100644
--- a/src/components/shared/blocked-triage-modal.tsx
+++ b/src/components/shared/blocked-triage-modal.tsx
@@ -10,6 +10,7 @@ import {
 } from '@/components/ui/dialog';
 import { deriveBlockedIds, buildBlockedByTree, type BlockedTreeNode } from '../../lib/kanban';
 import { useArchetypePicker } from '../../hooks/use-archetype-picker';
+import { useArchetypes } from '../../hooks/use-archetypes';
 import type { BeadIssue } from '../../lib/types';
 import { Blocks, ChevronRight, UserPlus } from 'lucide-react';
 import { cn } from '@/lib/utils';
@@ -27,6 +28,7 @@ export function BlockedTriageModal({
   issues,
   projectRoot,
 }: BlockedTriageModalProps) {
+  const { archetypes } = useArchetypes(projectRoot);
   const blockedIdsSet = useMemo(() => deriveBlockedIds(issues), [issues]);
 
   const blockedTasks = useMemo(() => {
@@ -54,13 +56,13 @@ export function BlockedTriageModal({
 
   return (
     <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
-      <DialogContent className="max-w-2xl max-h-[80vh] flex flex-col">
+      <DialogContent className="max-w-2xl max-h-[80vh] flex flex-col bg-[var(--surface-elevated)] border-[var(--border-strong)]">
         <DialogHeader>
-          <DialogTitle className="flex items-center gap-2">
-            <Blocks className="w-5 h-5 text-amber-500" />
+          <DialogTitle className="flex items-center gap-2 text-[var(--text-primary)]">
+            <Blocks className="w-5 h-5 text-[var(--accent-warning)]" />
             Blocked Tasks Triage
           </DialogTitle>
-          <DialogDescription>
+          <DialogDescription className="text-[var(--text-secondary)]">
             {blockedTasks.length} blocked task{blockedTasks.length !== 1 ? 's' : ''} require attention.
             Click on a row to see the blocker chain and assign an archetype.
           </DialogDescription>
@@ -68,7 +70,7 @@ export function BlockedTriageModal({
 
         <div className="flex-1 overflow-y-auto space-y-2 pr-2">
           {blockedTasks.length === 0 ? (
-            <div className="text-center py-8 text-muted-foreground">
+            <div className="text-center py-8 text-[var(--text-tertiary)]">
               No blocked tasks found.
             </div>
           ) : (
@@ -79,34 +81,34 @@ export function BlockedTriageModal({
               return (
                 <div
                   key={issue.id}
-                  className="border rounded-lg bg-card overflow-hidden"
+                  className="border rounded-lg bg-[var(--surface-card)] border-[var(--border-subtle)] overflow-hidden"
                 >
                   <button
                     onClick={() => toggleRow(issue.id)}
-                    className="w-full flex items-center gap-3 p-3 text-left hover:bg-accent transition-colors"
+                    className="w-full flex items-center gap-3 p-3 text-left hover:bg-[var(--surface-hover)] transition-colors"
                   >
                     <ChevronRight
                       className={cn(
-                        'w-4 h-4 text-muted-foreground transition-transform',
+                        'w-4 h-4 text-[var(--text-tertiary)] transition-transform',
                         isExpanded && 'rotate-90'
                       )}
                     />
                     <div className="flex-1 min-w-0">
-                      <p className="font-medium text-foreground truncate">
+                      <p className="font-medium text-[var(--text-primary)] truncate">
                         {issue.title}
                       </p>
-                      <p className="text-xs text-muted-foreground">
+                      <p className="text-xs text-[var(--text-tertiary)]">
                         {issue.id}
                       </p>
                     </div>
                     <div className="flex items-center gap-2">
                       {issue.status === 'blocked' && (
-                        <span className="text-xs px-2 py-0.5 rounded bg-amber-500/20 text-amber-500">
+                        <span className="text-xs px-2 py-0.5 rounded bg-[var(--status-blocked)] text-[var(--text-inverse)]">
                           explicit
                         </span>
                       )}
                       {blockedIdsSet.has(issue.id) && issue.status !== 'blocked' && (
-                        <span className="text-xs px-2 py-0.5 rounded bg-orange-500/20 text-orange-500">
+                        <span className="text-xs px-2 py-0.5 rounded bg-[var(--accent-warning)]/20 text-[var(--accent-warning)]">
                           derived
                         </span>
                       )}
@@ -114,32 +116,32 @@ export function BlockedTriageModal({
                   </button>
 
                   {isExpanded && (
-                    <div className="border-t p-3 bg-muted/30">
+                    <div className="border-t border-[var(--border-subtle)] p-3 bg-[var(--surface-tertiary)]/50">
                       {blockerChain.nodes.length > 0 ? (
                         <div className="mb-3">
-                          <p className="text-xs font-medium text-muted-foreground mb-2">
+                          <p className="text-xs font-medium text-[var(--text-tertiary)] mb-2">
                             Blocked by:
                           </p>
                           <div className="flex flex-wrap gap-1">
                             {blockerChain.nodes.map((node: BlockedTreeNode) => (
                               <span
                                 key={node.id}
-                                className="inline-flex items-center text-xs px-2 py-1 rounded bg-background border"
+                                className="inline-flex items-center text-xs px-2 py-1 rounded bg-[var(--surface-elevated)] border border-[var(--border-subtle)]"
                                 style={{ marginLeft: `${node.level * 12}px` }}
                               >
-                                <span className="w-1.5 h-1.5 rounded-full bg-red-400 mr-1.5" />
+                                <span className="w-1.5 h-1.5 rounded-full bg-[var(--accent-danger)] mr-1.5" />
                                 {node.title}
                               </span>
                             ))}
                             {blockerChain.total > blockerChain.nodes.length && (
-                              <span className="text-xs text-muted-foreground py-1">
+                              <span className="text-xs text-[var(--text-tertiary)] py-1">
                                 +{blockerChain.total - blockerChain.nodes.length} more
                               </span>
                             )}
                           </div>
                         </div>
                       ) : (
-                        <p className="text-xs text-muted-foreground mb-3">
+                        <p className="text-xs text-[var(--text-tertiary)] mb-3">
                           No blocker chain found.
                         </p>
                       )}
@@ -150,28 +152,29 @@ export function BlockedTriageModal({
                           onChange={(e) =>
                             archetypePicker.setSelectedArchetype(e.target.value || null)
                           }
-                          className="flex-1 text-sm px-3 py-1.5 rounded border bg-background"
+                          className="flex-1 text-sm px-3 py-1.5 rounded border bg-[var(--surface-input)] border-[var(--border-default)] text-[var(--text-primary)]"
                         >
                           <option value="">Select archetype...</option>
-                          <option value="arch-1">arch-1</option>
-                          <option value="arch-2">arch-2</option>
+                          {archetypes.map((a) => (
+                            <option key={a.id} value={a.id}>{a.name}</option>
+                          ))}
                         </select>
                         <button
                           onClick={() => handleAssign(issue.id)}
                           disabled={!archetypePicker.selectedArchetype || archetypePicker.isAssigning}
-                          className="flex items-center gap-1.5 px-3 py-1.5 rounded bg-primary text-primary-foreground text-sm font-medium hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed"
+                          className="flex items-center gap-1.5 px-3 py-1.5 rounded bg-[var(--accent-info)] text-[var(--text-inverse)] text-sm font-medium hover:brightness-110 disabled:opacity-50 disabled:cursor-not-allowed"
                         >
                           <UserPlus className="w-3.5 h-3.5" />
                           {archetypePicker.isAssigning ? 'Assigning...' : 'Assign'}
                         </button>
                       </div>
                       {archetypePicker.assignError && (
-                        <p className="text-xs text-red-500 mt-2">
+                        <p className="text-xs text-[var(--accent-danger)] mt-2">
                           {archetypePicker.assignError}
                         </p>
                       )}
                       {archetypePicker.assignSuccess && (
-                        <p className="text-xs text-green-500 mt-2">
+                        <p className="text-xs text-[var(--accent-success)] mt-2">
                           Assigned successfully!
                         </p>
                       )}