@pennyfarthing/cyclist 10.0.3 → 10.1.0

package/src/public/components/panels/DebugPanel.tsx

@@ -12,6 +12,14 @@ import React, { useState, useEffect } from 'react';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { Separator } from '@/components/ui/separator';
+import { HotspotsDialog } from '../dialogs/HotspotsDialog';
+import { CodeMarkersDialog } from '../dialogs/CodeMarkersDialog';
+import { ComplexityDialog } from '../dialogs/ComplexityDialog';
+import { DependenciesDialog } from '../dialogs/DependenciesDialog';
+import { AgentLoadDialog } from '../AgentLoadDialog';
+import { DeadCodeDialog } from '../DeadCodeDialog';
+import { HealthGauge } from '../HealthGauge';
+import { useHealthScore } from '../../hooks/useHealthScore';
 
 /** Context tier type */
 type ContextTier = 'FULL' | 'REFRESH' | 'HANDOFF' | 'MINIMAL';
@@ -94,6 +102,13 @@ export function DebugPanel(): React.ReactElement {
   const [context, setContext] = useState<ContextData | null>(null);
   const [tokenStats, setTokenStats] = useState<Record<string, unknown> | null>(null);
   const [breakdownExpanded, setBreakdownExpanded] = useState(false);
+  const [hotspotsOpen, setHotspotsOpen] = useState(false);
+  const [codeMarkersOpen, setCodeMarkersOpen] = useState(false);
+  const [complexityOpen, setComplexityOpen] = useState(false);
+  const [dependenciesOpen, setDependenciesOpen] = useState(false);
+  const [agentLoadOpen, setAgentLoadOpen] = useState(false);
+  const [deadCodeOpen, setDeadCodeOpen] = useState(false);
+  const healthScore = useHealthScore();
 
   useEffect(() => {
     const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
@@ -134,6 +149,14 @@ export function DebugPanel(): React.ReactElement {
 
   return (
     <div className="debug-panel" data-testid="debug-panel">
+      <HealthGauge
+        score={healthScore.data?.composite_score ?? null}
+        dimensions={healthScore.data?.dimensions ?? []}
+        totalDimensions={8}
+      />
+
+      <Separator className="my-3" />
+
       <h4>Context Usage</h4>
       {context ? (
         <div className="context-info">
@@ -261,6 +284,66 @@ export function DebugPanel(): React.ReactElement {
         <div className="placeholder">No token stats</div>
       )}
 
+      <Separator className="my-3" />
+
+      <h4>Tools</h4>
+      <div className="tool-launcher" data-testid="tool-launcher">
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => setHotspotsOpen(true)}
+          data-testid="tool-launcher-hotspots"
+        >
+          Hotspots
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => setCodeMarkersOpen(true)}
+          data-testid="tool-launcher-codemarkers"
+        >
+          Code Markers
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => setDeadCodeOpen(true)}
+          data-testid="tool-launcher-deadcode"
+        >
+          Dead Code
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => setComplexityOpen(true)}
+          data-testid="tool-launcher-complexity"
+        >
+          Complexity
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => setDependenciesOpen(true)}
+          data-testid="tool-launcher-dependencies"
+        >
+          Dependencies
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => setAgentLoadOpen(true)}
+          data-testid="tool-launcher-agent-load"
+        >
+          Analyze All Agents
+        </Button>
+      </div>
+
+      <HotspotsDialog open={hotspotsOpen} onOpenChange={setHotspotsOpen} />
+      <CodeMarkersDialog open={codeMarkersOpen} onOpenChange={setCodeMarkersOpen} />
+      <ComplexityDialog open={complexityOpen} onOpenChange={setComplexityOpen} />
+      <DependenciesDialog open={dependenciesOpen} onOpenChange={setDependenciesOpen} />
+      <AgentLoadDialog isOpen={agentLoadOpen} onClose={() => setAgentLoadOpen(false)} />
+      <DeadCodeDialog isOpen={deadCodeOpen} onClose={() => setDeadCodeOpen(false)} />
     </div>
   );
 }

package/src/public/components/panels/GitPanel.tsx

@@ -6,6 +6,7 @@
  */
 
 import React, { useState } from 'react';
+import { RefreshCw } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
@@ -90,14 +91,14 @@ function RepoStatus({ repo, onPullDevelop }: RepoStatusProps): React.ReactElemen
           <span className="branch-name">{branch}</span>
         </div>
 
-        {(ahead !== undefined && ahead > 0) || (behind !== undefined && behind > 0) ? (
+        {((ahead !== undefined && ahead > 0) || (behind !== undefined && behind > 0) || hasDevelopUpdates) && (
           <div className="sync-status">
             {ahead !== undefined && ahead > 0 && (
               <Tooltip>
                 <TooltipTrigger asChild>
                   <span className="ahead">↑{ahead}</span>
                 </TooltipTrigger>
-                <TooltipContent>Commits ahead</TooltipContent>
+                <TooltipContent>Commits ahead of remote</TooltipContent>
               </Tooltip>
             )}
             {behind !== undefined && behind > 0 && (
@@ -105,29 +106,22 @@ function RepoStatus({ repo, onPullDevelop }: RepoStatusProps): React.ReactElemen
                 <TooltipTrigger asChild>
                   <span className="behind">↓{behind}</span>
                 </TooltipTrigger>
-                <TooltipContent>Commits behind</TooltipContent>
+                <TooltipContent>Commits behind remote</TooltipContent>
               </Tooltip>
             )}
-          </div>
-        ) : null}
-
-        {hasDevelopUpdates && (
-          <div className="develop-behind-warning">
-            <span className="warning-icon">⚠️</span>
-            <span className="warning-text">develop is {developBehind} commit{developBehind > 1 ? 's' : ''} ahead</span>
-            {onPullDevelop && (
+            {hasDevelopUpdates && onPullDevelop && (
               <Tooltip>
                 <TooltipTrigger asChild>
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    className="pull-develop-btn"
+                  <button
+                    className="sync-develop-btn"
                     onClick={() => onPullDevelop(name, path)}
+                    aria-label={`Pull ${developBehind} commits from develop`}
                   >
-                    Pull
-                  </Button>
+                    <RefreshCw size={12} />
+                    <span>{developBehind}</span>
+                  </button>
                 </TooltipTrigger>
-                <TooltipContent>Pull latest from develop</TooltipContent>
+                <TooltipContent>develop is {developBehind} commit{developBehind > 1 ? 's' : ''} ahead — click to pull</TooltipContent>
               </Tooltip>
             )}
           </div>

package/src/public/components/panels/SprintPanel.tsx

@@ -5,7 +5,8 @@
  * Story MSSCI-14189 - Enhanced Sprint Panel with story management and epic actions
  */
 
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect, useCallback, useRef } from 'react';
+import { Check, Loader, Circle, AlertTriangle } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
@@ -85,6 +86,21 @@ export function SprintPanel(): React.ReactElement {
 // Enhanced Sprint Panel (MSSCI-14189)
 // =============================================================================
 
+/**
+ * Format email to short display name: "keith.avery@..." -> "K. Avery"
+ */
+function formatAssignee(email: string | null | undefined): string | null {
+  if (!email) return null;
+  const local = email.split('@')[0];
+  const parts = local.split('.');
+  if (parts.length >= 2) {
+    const first = parts[0].charAt(0).toUpperCase();
+    const last = parts[parts.length - 1].charAt(0).toUpperCase() + parts[parts.length - 1].slice(1);
+    return `${first}. ${last}`;
+  }
+  return local;
+}
+
 /**
  * Calculate epic progress (done points / total points)
  */
@@ -106,17 +122,18 @@ function isEpicCompleted(epic: SprintEpic): boolean {
 /**
  * Get status badge content and class for a story status
  */
-function getStatusBadgeInfo(status: SprintStory['status']): { icon: string; className: string } {
+function getStatusBadgeInfo(status: SprintStory['status']): { icon: React.ReactElement; className: string } {
+  const size = 12;
   switch (status) {
     case 'done':
-      return { icon: '✓', className: 'status-done' };
+      return { icon: <Check size={size} />, className: 'status-done' };
     case 'in_progress':
-      return { icon: '●', className: 'status-in-progress' };
+      return { icon: <Loader size={size} />, className: 'status-in-progress' };
     case 'blocked':
-      return { icon: '⚠', className: 'status-blocked' };
+      return { icon: <AlertTriangle size={size} />, className: 'status-blocked' };
     case 'backlog':
     default:
-      return { icon: '○', className: 'status-backlog' };
+      return { icon: <Circle size={size} />, className: 'status-backlog' };
   }
 }
 
@@ -157,6 +174,22 @@ function ContextIndicator({
   );
 }
 
+/**
+ * Priority dot component - small color-coded circle
+ */
+function PriorityDot({ priority, storyId }: { priority?: string | null; storyId: string }): React.ReactElement | null {
+  if (!priority) return null;
+  const colorClass = priority === 'P0' ? 'priority-p0' : priority === 'P1' ? 'priority-p1' : 'priority-p2';
+  return (
+    <span
+      className={`priority-dot ${colorClass}`}
+      data-testid={`story-priority-${storyId}`}
+      data-priority={priority}
+      title={priority}
+    />
+  );
+}
+
 /**
  * Status badge component for stories
  */
@@ -182,12 +215,16 @@ function JiraLink({ jiraKey, storyId }: { jiraKey: string; storyId: string }): R
   const handleClick = (e: React.MouseEvent) => {
     e.preventDefault();
     const url = getJiraUrl(jiraKey);
-    // Use electronAPI if available, otherwise open in new tab
-    if (typeof window !== 'undefined' && (window as any).electronAPI?.shell?.openExternal) {
-      (window as any).electronAPI.shell.openExternal(url);
-    } else {
-      window.open(url, '_blank');
+    try {
+      const api = (window as any).electronAPI;
+      if (api?.shell?.openExternal) {
+        api.shell.openExternal(url);
+        return;
+      }
+    } catch {
+      // electronAPI not available or call failed
     }
+    window.open(url, '_blank');
   };
 
   return (
@@ -213,12 +250,14 @@ export function EnhancedSprintPanel(): React.ReactElement {
   const [confirmArchive, setConfirmArchive] = useState<string | null>(null);
   const [actionError, setActionError] = useState<Error | null>(null);
 
-  // Expand all epics by default when data first loads
+  // Expand all epics by default when data first loads (once only)
+  const hasInitializedExpansion = useRef(false);
   useEffect(() => {
-    if (data?.epics && expandedEpics.size === 0) {
+    if (data?.epics && !hasInitializedExpansion.current) {
+      hasInitializedExpansion.current = true;
       setExpandedEpics(new Set(data.epics.map((e) => e.id)));
     }
-  }, [data?.epics, expandedEpics.size]);
+  }, [data?.epics]);
 
   // Toggle epic expansion
   const toggleEpic = useCallback((epicId: string) => {
@@ -464,6 +503,7 @@ export function EnhancedSprintPanel(): React.ReactElement {
                     {epic.stories.map((story) => {
                       const hasContext = story.hasContext ?? false;
                       const isBlocked = story.status === 'blocked';
+                      const assigneeDisplay = formatAssignee(story.assignedTo);
                       return (
                         <div
                           key={story.id}
@@ -473,9 +513,38 @@ export function EnhancedSprintPanel(): React.ReactElement {
                           data-story-id={story.id}
                           aria-label={`${story.id}: ${story.title}`}
                         >
+                          <PriorityDot priority={story.priority} storyId={story.id} />
                           <StatusBadge status={story.status} storyId={story.id} />
                           {story.jiraKey && <JiraLink jiraKey={story.jiraKey} storyId={story.id} />}
-                          <span className="story-title">{story.title}</span>
+                          <div className="story-info">
+                            <span className="story-title">{story.title}</span>
+                            <span className="story-meta">
+                              {assigneeDisplay && (
+                                <span
+                                  className="story-assignee"
+                                  data-testid={`story-assignee-${story.id}`}
+                                >
+                                  {assigneeDisplay}
+                                </span>
+                              )}
+                              {story.workflow && (
+                                <span
+                                  className="story-workflow-badge"
+                                  data-testid={`story-workflow-${story.id}`}
+                                >
+                                  {story.workflow}
+                                </span>
+                              )}
+                              {story.status === 'done' && story.completed && (
+                                <span
+                                  className="story-completed-date"
+                                  data-testid={`story-completed-${story.id}`}
+                                >
+                                  {story.completed}
+                                </span>
+                              )}
+                            </span>
+                          </div>
                           <ContextIndicator hasContext={hasContext} testIdPrefix="story" id={story.id} />
                           <span
                             className="story-points"

package/src/public/components/panels/index.ts

@@ -18,7 +18,6 @@ export { DebugPanel } from './DebugPanel';
 export { SettingsPanel } from './SettingsPanel';
 export { AuditLogPanel } from './AuditLogPanel';
 export { TTYPanel } from './TTYPanel';
-export { HotspotsPanel } from './HotspotsPanel';
 
 // Legacy exports - kept for backwards compatibility and tests
 export { AcceptanceCriteriaPanel, ConnectedAcceptanceCriteriaPanel } from './AcceptanceCriteriaPanel';

package/src/public/components/ui/dialog.tsx

@@ -36,7 +36,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-[var(--border)] bg-card text-card-foreground p-6 shadow-2xl shadow-black/40 duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
         className
       )}
       {...props}
@@ -86,7 +86,7 @@ const DialogTitle = React.forwardRef<
   <DialogPrimitive.Title
     ref={ref}
     className={cn(
-      "text-lg font-semibold leading-none tracking-tight",
+      "text-base font-medium leading-none tracking-tight",
       className
     )}
     {...props}
@@ -100,7 +100,7 @@ const DialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Description
     ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
+    className={cn("text-sm text-[var(--text-secondary)]", className)}
     {...props}
   />
 ))

package/src/public/css/theme-system.css

@@ -108,18 +108,12 @@
 
 /* =============================================================================
    Utility Classes for Theme Colors
-   ============================================================================= */
-
-/* Backgrounds */
-.bg-primary { background-color: var(--bg-primary); }
-.bg-secondary { background-color: var(--bg-secondary); }
-.bg-tertiary { background-color: var(--bg-tertiary); }
 
-/* Text */
-.text-primary { color: var(--text-primary); }
-.text-secondary { color: var(--text-secondary); }
-.text-muted { color: var(--text-muted); }
-.text-accent { color: var(--accent); }
+   NOTE: .bg-primary, .text-secondary, .text-muted etc. are generated by
+   Tailwind from tailwind.config.js. Do NOT duplicate them here — specificity
+   conflicts cause unpredictable results. Only define classes that Tailwind
+   does NOT generate (status colors, border-default, border-focus).
+   ============================================================================= */
 
 /* Status */
 .text-success { color: var(--status-success); }

package/src/public/hooks/index.ts

@@ -43,3 +43,7 @@ export type { UseMarkdownParserResult } from './useMarkdownParser';
 
 export { useSyntaxHighlighter } from './useSyntaxHighlighter';
 export type { UseSyntaxHighlighterResult } from './useSyntaxHighlighter';
+
+// Agent load analysis
+export { useAgentLoad } from './useAgentLoad';
+export type { AgentLoadData, AgentLoadEntry, PruneResult } from './useAgentLoad';

package/src/public/hooks/useAgentLoad.ts

@@ -0,0 +1,105 @@
+import { useState, useCallback, useRef, useEffect } from 'react';
+
+export interface AgentLoadComponent {
+  name: string;
+  tokens: number;
+  source?: string | null;
+}
+
+export interface AgentLoadEntry {
+  agent: string;
+  totalTokens: number | null;
+  tokenCounts?: Record<string, number>;
+  components?: AgentLoadComponent[];
+  error?: string;
+}
+
+export interface AgentLoadData {
+  agents: AgentLoadEntry[];
+  cachedAt: string;
+  totalAcrossAllAgents: number;
+}
+
+export interface PruneResult {
+  success: boolean;
+  tokensFreed?: number;
+  agent?: string;
+  file?: string;
+  error?: string;
+}
+
+export interface UseAgentLoadReturn {
+  data: AgentLoadData | null;
+  isLoading: boolean;
+  error: Error | null;
+  refresh: () => void;
+  pruneSidecar: (agent: string, file: string) => Promise<void>;
+  pruneResult: PruneResult | null;
+}
+
+export function useAgentLoad(): UseAgentLoadReturn {
+  const [data, setData] = useState<AgentLoadData | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+  const [pruneResult, setPruneResult] = useState<PruneResult | null>(null);
+  const abortRef = useRef<AbortController | null>(null);
+
+  const refresh = useCallback(() => {
+    if (abortRef.current) {
+      abortRef.current.abort();
+    }
+
+    const controller = new AbortController();
+    abortRef.current = controller;
+
+    setIsLoading(true);
+    setError(null);
+
+    fetch('/api/agent-load', { signal: controller.signal })
+      .then((res) => {
+        if (!res.ok) {
+          throw new Error(`HTTP ${res.status}: ${res.statusText}`);
+        }
+        return res.json();
+      })
+      .then((json: AgentLoadData) => {
+        setData(json);
+        setIsLoading(false);
+      })
+      .catch((err) => {
+        if (err.name === 'AbortError') return;
+        setError(err instanceof Error ? err : new Error(String(err)));
+        setIsLoading(false);
+      });
+  }, []);
+
+  const pruneSidecar = useCallback(async (agent: string, file: string) => {
+    const res = await fetch('/api/agent-load/prune-sidecar', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ agent, file }),
+    });
+
+    if (!res.ok) {
+      setPruneResult({ success: false, error: `HTTP ${res.status}: ${res.statusText}` });
+      return;
+    }
+
+    const result: PruneResult = await res.json();
+    setPruneResult(result);
+
+    if (result.success) {
+      refresh();
+    }
+  }, [refresh]);
+
+  useEffect(() => {
+    return () => {
+      if (abortRef.current) {
+        abortRef.current.abort();
+      }
+    };
+  }, []);
+
+  return { data, isLoading, error, refresh, pruneSidecar, pruneResult };
+}

package/src/public/hooks/useCodeMarkers.ts

@@ -0,0 +1,101 @@
+/**
+ * useCodeMarkers React hook — Story 80-3 (MSSCI-14456)
+ *
+ * Wraps /api/code-markers endpoint with AbortController,
+ * loading/error/data state management, and manual refresh.
+ */
+import { useState, useCallback, useEffect, useRef } from 'react';
+
+export interface CodeMarker {
+  path: string;
+  line: number;
+  marker_type: string;
+  text: string;
+  author: string;
+  date: string;
+  age_days: number;
+  is_stale: boolean;
+}
+
+export interface MarkerSummary {
+  total_markers: number;
+  stale_markers: number;
+  by_type: Record<string, number>;
+}
+
+export interface CodeMarkersData {
+  success: boolean;
+  repo_name: string;
+  repo_path: string;
+  stale_threshold_days: number;
+  markers: CodeMarker[];
+  summary: MarkerSummary;
+  error: string | null;
+}
+
+export interface UseCodeMarkersOptions {
+  days: number;
+  repo?: string;
+  type?: 'all' | 'stale' | 'deprecated';
+}
+
+export interface UseCodeMarkersReturn {
+  data: CodeMarkersData | null;
+  isLoading: boolean;
+  error: Error | null;
+  refresh: () => void;
+}
+
+export function useCodeMarkers(options: UseCodeMarkersOptions): UseCodeMarkersReturn {
+  const [data, setData] = useState<CodeMarkersData | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+  const abortRef = useRef<AbortController | null>(null);
+
+  const fetchCodeMarkers = useCallback(() => {
+    if (abortRef.current) {
+      abortRef.current.abort();
+    }
+
+    const controller = new AbortController();
+    abortRef.current = controller;
+
+    setIsLoading(true);
+    setError(null);
+
+    const params = new URLSearchParams({ days: String(options.days) });
+    if (options.repo) {
+      params.set('repo', options.repo);
+    }
+    if (options.type) {
+      params.set('type', options.type);
+    }
+
+    fetch(`/api/code-markers?${params}`, { signal: controller.signal })
+      .then((res) => {
+        if (!res.ok) {
+          throw new Error(`HTTP ${res.status}: ${res.statusText}`);
+        }
+        return res.json();
+      })
+      .then((json: CodeMarkersData) => {
+        setData(json);
+        setIsLoading(false);
+      })
+      .catch((err) => {
+        if (err.name === 'AbortError') return;
+        setError(err instanceof Error ? err : new Error(String(err)));
+        setIsLoading(false);
+      });
+  }, [options.days, options.repo, options.type]);
+
+  useEffect(() => {
+    return () => {
+      if (abortRef.current) {
+        abortRef.current.abort();
+      }
+    };
+  }, []);
+
+  return { data, isLoading, error, refresh: fetchCodeMarkers };
+}

package/src/public/hooks/useColorScheme.ts

@@ -1,26 +1,41 @@
 /**
  * useColorScheme Hook
  *
- * Tracks the user's preferred color scheme (light/dark) via
- * the prefers-color-scheme media query.
+ * Tracks the active color scheme (light/dark) from the applied color preset's
+ * data-variant attribute on the document root. Falls back to OS preference.
  */
 
 import { useState, useEffect } from 'react';
 
 export type ColorScheme = 'light' | 'dark';
 
+function getVariant(): ColorScheme {
+  const variant = document.documentElement.getAttribute('data-variant');
+  if (variant === 'light' || variant === 'dark') return variant;
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+}
+
 export function useColorScheme(): ColorScheme {
-  const [scheme, setScheme] = useState<ColorScheme>(() =>
-    window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
-  );
+  const [scheme, setScheme] = useState<ColorScheme>(getVariant);
 
   useEffect(() => {
-    const mq = window.matchMedia('(prefers-color-scheme: dark)');
-    const handler = (e: MediaQueryListEvent) => {
-      setScheme(e.matches ? 'dark' : 'light');
+    // Watch for preset changes via data-variant attribute
+    const observer = new MutationObserver(() => {
+      setScheme(getVariant());
+    });
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['data-variant'],
+    });
+
+    // Also listen to presetChange events from applyPreset()
+    const handlePreset = () => setScheme(getVariant());
+    window.addEventListener('presetChange', handlePreset);
+
+    return () => {
+      observer.disconnect();
+      window.removeEventListener('presetChange', handlePreset);
     };
-    mq.addEventListener('change', handler);
-    return () => mq.removeEventListener('change', handler);
   }, []);
 
   return scheme;