@pennyfarthing/cyclist 10.0.3 → 10.2.0

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;

package/src/public/hooks/useComplexity.ts

@@ -0,0 +1,80 @@
+import { useState, useCallback, useRef, useEffect } from 'react';
+
+export interface FileComplexity {
+  path: string;
+  total_lines: number;
+  longest_function: number;
+  avg_cyclomatic_complexity: number;
+  max_nesting_depth: number;
+  function_count: number;
+}
+
+export interface ComplexityData {
+  success: boolean;
+  target_path: string;
+  file_count: number;
+  files: FileComplexity[];
+  error?: string | null;
+}
+
+export interface UseComplexityOptions {
+  path?: string;
+  top?: number;
+}
+
+export interface UseComplexityReturn {
+  data: ComplexityData | null;
+  isLoading: boolean;
+  error: Error | null;
+  refresh: () => void;
+}
+
+export function useComplexity(options: UseComplexityOptions): UseComplexityReturn {
+  const [data, setData] = useState<ComplexityData | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+  const abortRef = useRef<AbortController | null>(null);
+
+  const fetchComplexity = useCallback(() => {
+    if (abortRef.current) {
+      abortRef.current.abort();
+    }
+
+    const controller = new AbortController();
+    abortRef.current = controller;
+
+    setIsLoading(true);
+    setError(null);
+
+    const params = new URLSearchParams();
+    if (options.path) params.set('path', options.path);
+    if (options.top) params.set('top', String(options.top));
+
+    fetch(`/api/complexity?${params}`, { signal: controller.signal })
+      .then((res) => {
+        if (!res.ok) {
+          throw new Error(`HTTP ${res.status}: ${res.statusText}`);
+        }
+        return res.json();
+      })
+      .then((json: ComplexityData) => {
+        setData(json);
+        setIsLoading(false);
+      })
+      .catch((err) => {
+        if (err.name === 'AbortError') return;
+        setError(err instanceof Error ? err : new Error(String(err)));
+        setIsLoading(false);
+      });
+  }, [options.path, options.top]);
+
+  useEffect(() => {
+    return () => {
+      if (abortRef.current) {
+        abortRef.current.abort();
+      }
+    };
+  }, []);
+
+  return { data, isLoading, error, refresh: fetchComplexity };
+}

package/src/public/hooks/useDeadCode.ts

@@ -0,0 +1,99 @@
+import { useState, useCallback, useRef, useEffect } from 'react';
+
+export interface StaleFile {
+  path: string;
+  last_commit_date: string;
+  days_since_last_commit: number;
+  size_bytes: number;
+}
+
+export interface UnusedExport {
+  symbol: string;
+  file: string;
+  line: number;
+  export_type: string;
+}
+
+export interface DeadCodeData {
+  success: boolean;
+  repo_name?: string;
+  repo_path?: string;
+  time_window_days?: number;
+  stale_files?: StaleFile[];
+  unused_exports?: UnusedExport[];
+  stale_file_count?: number;
+  unused_export_count?: number;
+  total_files?: number;
+  total_exports_scanned?: number;
+  repo_results?: DeadCodeData[];
+  error?: string | null;
+}
+
+export interface UseDeadCodeOptions {
+  days: number;
+  repo?: string;
+  layer?: 'stale' | 'exports' | 'all';
+}
+
+export interface UseDeadCodeReturn {
+  data: DeadCodeData | null;
+  isLoading: boolean;
+  error: Error | null;
+  refresh: () => void;
+}
+
+export function useDeadCode(options: UseDeadCodeOptions): UseDeadCodeReturn {
+  const [data, setData] = useState<DeadCodeData | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+  const abortRef = useRef<AbortController | null>(null);
+
+  const fetchDeadCode = useCallback(() => {
+    // Cancel any in-flight request
+    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),
+      layer: options.layer || 'all',
+    });
+    if (options.repo) {
+      params.set('repo', options.repo);
+    }
+
+    fetch(`/api/dead-code?${params}`, { signal: controller.signal })
+      .then((res) => {
+        if (!res.ok) {
+          throw new Error(`HTTP ${res.status}: ${res.statusText}`);
+        }
+        return res.json();
+      })
+      .then((json: DeadCodeData) => {
+        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.layer]);
+
+  // Cleanup abort controller on unmount
+  useEffect(() => {
+    return () => {
+      if (abortRef.current) {
+        abortRef.current.abort();
+      }
+    };
+  }, []);
+
+  return { data, isLoading, error, refresh: fetchDeadCode };
+}

package/src/public/hooks/useDependencies.ts

@@ -0,0 +1,82 @@
+import { useState, useCallback, useRef, useEffect } from 'react';
+
+export interface OutdatedPackage {
+  name: string;
+  current: string;
+  wanted: string;
+  latest: string;
+  type: string;
+}
+
+export interface SecurityAdvisory {
+  severity: string;
+  count: number;
+}
+
+export interface DependenciesData {
+  success: boolean;
+  target_path: string;
+  outdated: OutdatedPackage[];
+  advisories: SecurityAdvisory[];
+  error?: string | null;
+}
+
+export interface UseDependenciesOptions {
+  path?: string;
+}
+
+export interface UseDependenciesReturn {
+  data: DependenciesData | null;
+  isLoading: boolean;
+  error: Error | null;
+  refresh: () => void;
+}
+
+export function useDependencies(options: UseDependenciesOptions): UseDependenciesReturn {
+  const [data, setData] = useState<DependenciesData | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+  const abortRef = useRef<AbortController | null>(null);
+
+  const fetchDependencies = useCallback(() => {
+    if (abortRef.current) {
+      abortRef.current.abort();
+    }
+
+    const controller = new AbortController();
+    abortRef.current = controller;
+
+    setIsLoading(true);
+    setError(null);
+
+    const params = new URLSearchParams();
+    if (options.path) params.set('path', options.path);
+
+    fetch(`/api/dependencies?${params}`, { signal: controller.signal })
+      .then((res) => {
+        if (!res.ok) {
+          throw new Error(`HTTP ${res.status}: ${res.statusText}`);
+        }
+        return res.json();
+      })
+      .then((json: DependenciesData) => {
+        setData(json);
+        setIsLoading(false);
+      })
+      .catch((err) => {
+        if (err.name === 'AbortError') return;
+        setError(err instanceof Error ? err : new Error(String(err)));
+        setIsLoading(false);
+      });
+  }, [options.path]);
+
+  useEffect(() => {
+    return () => {
+      if (abortRef.current) {
+        abortRef.current.abort();
+      }
+    };
+  }, []);
+
+  return { data, isLoading, error, refresh: fetchDependencies };
+}

package/src/public/hooks/useHealthScore.ts

@@ -0,0 +1,69 @@
+import { useState, useCallback, useRef, useEffect } from 'react';
+
+export interface HealthScoreDimension {
+  name: string;
+  score: number | null;
+  weight: number;
+}
+
+export interface HealthScoreData {
+  success: boolean;
+  composite_score: number;
+  dimensions: HealthScoreDimension[];
+  cached: boolean;
+  error?: string;
+}
+
+export interface UseHealthScoreReturn {
+  data: HealthScoreData | null;
+  isLoading: boolean;
+  error: Error | null;
+  lastFetchedAt: number | null;
+  refresh: () => void;
+}
+
+export function useHealthScore(): UseHealthScoreReturn {
+  const [data, setData] = useState<HealthScoreData | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+  const [lastFetchedAt, setLastFetchedAt] = useState<number | 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/health-score', { signal: controller.signal })
+      .then((res) => {
+        if (!res.ok) {
+          throw new Error(`HTTP ${res.status}: ${res.statusText}`);
+        }
+        return res.json();
+      })
+      .then((json: HealthScoreData) => {
+        setData(json);
+        setLastFetchedAt(Date.now());
+        setIsLoading(false);
+      })
+      .catch((err) => {
+        if (err.name === 'AbortError') return;
+        setError(err instanceof Error ? err : new Error(String(err)));
+        setIsLoading(false);
+      });
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      abortRef.current?.abort();
+    };
+  }, []);
+
+  return { data, isLoading, error, lastFetchedAt, refresh };
+}

package/src/public/hooks/useHotspots.ts

@@ -50,6 +50,8 @@ export interface HotspotData {
 export interface UseHotspotsOptions {
   days: number;
   repo?: string;
+  skipTypes?: string[];
+  includeOrchestrator?: boolean;
 }
 
 export interface UseHotspotsReturn {
@@ -82,6 +84,14 @@ export function useHotspots(options: UseHotspotsOptions): UseHotspotsReturn {
       params.set('repo', options.repo);
     }
 
+    // Determine skip_type values: use explicit skipTypes, or default to ['orchestrator']
+    // unless includeOrchestrator is true
+    const skipTypes = options.skipTypes ??
+      (options.includeOrchestrator ? [] : ['orchestrator']);
+    for (const st of skipTypes) {
+      params.append('skip_type', st);
+    }
+
     fetch(`/api/hotspots?${params}`, { signal: controller.signal })
       .then((res) => {
         if (!res.ok) {
@@ -98,7 +108,7 @@ export function useHotspots(options: UseHotspotsOptions): UseHotspotsReturn {
         setError(err instanceof Error ? err : new Error(String(err)));
         setIsLoading(false);
       });
-  }, [options.days, options.repo]);
+  }, [options.days, options.repo, options.skipTypes, options.includeOrchestrator]);
 
   // Cleanup abort controller on unmount
   useEffect(() => {

package/src/public/hooks/usePersona.ts

@@ -13,22 +13,33 @@
 
 import { useState, useEffect, useRef } from 'react';
 
+export interface TandemAgentData {
+  character: string;
+  role: string;
+  slug: string;
+  theme: string;
+  isThinking: boolean;
+}
+
 export interface PersonaData {
   character: string | null;
   theme: string | null;
   role: string | null;
   slug: string | null;
   quote: string | null;  // Random catchphrase from theme
+  tandemAgent?: TandemAgentData | null;
 }
 
 interface UsePersonaResult {
   persona: PersonaData | null;
+  isStreaming: boolean;
   isLoading: boolean;
   error: Error | null;
 }
 
 export function usePersona(): UsePersonaResult {
   const [persona, setPersona] = useState<PersonaData | null>(null);
+  const [isStreaming, setIsStreaming] = useState(false);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<Error | null>(null);
   const wsRef = useRef<WebSocket | null>(null);
@@ -48,8 +59,19 @@ export function usePersona(): UsePersonaResult {
 
         wsRef.current.onmessage = (event) => {
           try {
-            const data = JSON.parse(event.data) as PersonaData;
-            setPersona(data);
+            const data = JSON.parse(event.data);
+
+            // Story 94-1: Handle streaming state updates
+            if (data.type === 'streaming') {
+              setIsStreaming(data.isStreaming ?? false);
+              return;
+            }
+
+            // Persona data (initial or agent change) — extract isStreaming if present
+            if (data.isStreaming !== undefined) {
+              setIsStreaming(data.isStreaming);
+            }
+            setPersona(data as PersonaData);
             setIsLoading(false);
             setError(null);
           } catch (err) {
@@ -59,6 +81,7 @@ export function usePersona(): UsePersonaResult {
 
         wsRef.current.onclose = () => {
           console.debug('[usePersona] WebSocket closed, reconnecting...');
+          setIsStreaming(false);
           reconnectTimeoutRef.current = setTimeout(connect, 2000);
         };
 
@@ -85,5 +108,5 @@ export function usePersona(): UsePersonaResult {
     };
   }, []);
 
-  return { persona, isLoading, error };
+  return { persona, isStreaming, isLoading, error };
 }