@pennyfarthing/core 11.3.8 → 11.4.0

package/packages/core/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/packages/core/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/packages/core/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/packages/core/src/public/hooks/useDiffs.ts

@@ -0,0 +1,143 @@
+/**
+ * useDiffs Hook
+ *
+ * React hook for subscribing to diff data via WebSocket.
+ * Story MSSCI-12717 - React Migration
+ * Story MSSCI-14238 - Git-based diffs (replaces OTEL-based extraction)
+ *
+ * IPC DEPRECATED - Now uses WebSocket /ws/diffs
+ */
+
+import { useState, useEffect, useCallback, useRef } from 'react';
+
+export interface DiffData {
+  id?: string;
+  path: string;
+  /** @deprecated Use `diff` field for raw git diff content */
+  original: string;
+  /** @deprecated Use `diff` field for raw git diff content */
+  modified: string;
+  /** Raw git diff output (MSSCI-14238) */
+  diff?: string;
+  toolName: string;
+  timestamp: number;
+  /** File status from git (MSSCI-14238) */
+  status?: 'modified' | 'added' | 'deleted' | 'renamed';
+  /** Line additions count (MSSCI-14238) */
+  additions?: number;
+  /** Line deletions count (MSSCI-14238) */
+  deletions?: number;
+}
+
+interface UseDiffsResult {
+  diffs: DiffData[];
+  selectedDiff: DiffData | null;
+  selectDiff: (path: string) => void;
+  clearDiffs: () => void;
+}
+
+const WS_RECONNECT_DELAY = 2000;
+
+export function useDiffs(): UseDiffsResult {
+  const [diffs, setDiffs] = useState<DiffData[]>([]);
+  const [selectedDiff, setSelectedDiff] = useState<DiffData | null>(null);
+  const wsRef = useRef<WebSocket | null>(null);
+
+  useEffect(() => {
+    let reconnectTimer: ReturnType<typeof setTimeout> | null = null;
+    let mounted = true;
+
+    const connect = () => {
+      const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+      const ws = new WebSocket(`${protocol}//${window.location.host}/ws/diffs`);
+      wsRef.current = ws;
+
+      ws.onopen = () => {
+        console.log('[useDiffs] WebSocket connected');
+      };
+
+      ws.onmessage = (event) => {
+        try {
+          const data = JSON.parse(event.data);
+
+          if (data.type === 'init') {
+            // Initial load of existing diffs
+            const initialDiffs = (data.diffs || []) as DiffData[];
+            setDiffs(initialDiffs);
+            if (initialDiffs.length > 0) {
+              setSelectedDiff(initialDiffs[initialDiffs.length - 1]);
+            }
+          } else if (data.type === 'diff') {
+            // New diff arrived
+            const diffData = data.diff as DiffData;
+            setDiffs(prev => {
+              // Update or add diff
+              const existing = prev.findIndex(d => d.path === diffData.path);
+              if (existing >= 0) {
+                const updated = [...prev];
+                updated[existing] = diffData;
+                return updated;
+              }
+              return [...prev, diffData];
+            });
+            // Auto-select new diff
+            setSelectedDiff(diffData);
+          } else if (data.type === 'refresh') {
+            // Full refresh of diffs (MSSCI-14238: git cache refresh)
+            const refreshedDiffs = (data.diffs || []) as DiffData[];
+            setDiffs(refreshedDiffs);
+            // Keep current selection if it still exists
+            if (refreshedDiffs.length > 0) {
+              setSelectedDiff(prev => {
+                if (prev) {
+                  const stillExists = refreshedDiffs.find(d => d.path === prev.path);
+                  if (stillExists) return stillExists;
+                }
+                return refreshedDiffs[refreshedDiffs.length - 1];
+              });
+            } else {
+              setSelectedDiff(null);
+            }
+          }
+        } catch (err) {
+          console.error('[useDiffs] Failed to parse message:', err);
+        }
+      };
+
+      ws.onclose = () => {
+        if (mounted) {
+          reconnectTimer = setTimeout(connect, WS_RECONNECT_DELAY);
+        }
+      };
+
+      ws.onerror = (err) => {
+        console.error('[useDiffs] WebSocket error:', err);
+        ws.close();
+      };
+    };
+
+    connect();
+
+    return () => {
+      mounted = false;
+      if (reconnectTimer) clearTimeout(reconnectTimer);
+      wsRef.current?.close();
+    };
+  }, []);
+
+  const selectDiff = useCallback((path: string) => {
+    const diff = diffs.find(d => d.path === path);
+    setSelectedDiff(diff || null);
+  }, [diffs]);
+
+  const clearDiffs = useCallback(() => {
+    setDiffs([]);
+    setSelectedDiff(null);
+    // Send clear message to server
+    if (wsRef.current?.readyState === WebSocket.OPEN) {
+      wsRef.current.send(JSON.stringify({ type: 'clear' }));
+    }
+  }, []);
+
+  return { diffs, selectedDiff, selectDiff, clearDiffs };
+}

package/packages/core/src/public/hooks/useFileBrowser.ts

@@ -0,0 +1,73 @@
+/**
+ * useFileBrowser Hook
+ *
+ * Fetches directory listings from /api/files for the full file tree.
+ * Lazy-loads subdirectories on demand.
+ */
+
+import { useState, useCallback } from 'react';
+
+export interface DirectoryEntry {
+  name: string;
+  path: string;
+  type: 'file' | 'directory';
+  isModified?: boolean;
+  size?: number;
+}
+
+export interface DirectoryListing {
+  path: string;
+  entries: DirectoryEntry[];
+}
+
+interface DirectoryCache {
+  [path: string]: DirectoryEntry[];
+}
+
+interface UseFileBrowserResult {
+  cache: DirectoryCache;
+  loading: Set<string>;
+  error: string | null;
+  fetchDirectory: (dirPath: string) => Promise<void>;
+}
+
+export function useFileBrowser(): UseFileBrowserResult {
+  const [cache, setCache] = useState<DirectoryCache>({});
+  const [loading, setLoading] = useState<Set<string>>(new Set());
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchDirectory = useCallback(async (dirPath: string) => {
+    // Already cached or loading
+    if (cache[dirPath] || loading.has(dirPath)) return;
+
+    setLoading(prev => new Set(prev).add(dirPath));
+    setError(null);
+
+    try {
+      const params = dirPath ? `?path=${encodeURIComponent(dirPath)}` : '';
+      const res = await fetch(`/api/files${params}`);
+      if (!res.ok) throw new Error(`Failed to list directory: ${res.statusText}`);
+      const json = await res.json();
+      // API may return { entries: [...] } or a raw array
+      const entries: DirectoryEntry[] = Array.isArray(json) ? json : (json.entries ?? []);
+
+      // Sort: directories first, then files, alphabetical within each
+      const sorted = entries.sort((a, b) => {
+        if (a.type !== b.type) return a.type === 'directory' ? -1 : 1;
+        return a.name.localeCompare(b.name);
+      });
+
+      setCache(prev => ({ ...prev, [dirPath || '__root__']: sorted }));
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to load directory');
+    } finally {
+      setLoading(prev => {
+        const next = new Set(prev);
+        next.delete(dirPath);
+        return next;
+      });
+    }
+  }, [cache, loading]);
+
+  return { cache, loading, error, fetchDirectory };
+}

package/packages/core/src/public/hooks/useFocusPanel.ts

@@ -0,0 +1,137 @@
+/**
+ * useFocusPanel Hook
+ *
+ * React hook for handling panel focus events via /ws/focus WebSocket.
+ * Story MSSCI-14977 - BikeShow client layout stash/restore on panel focus
+ * Epic 104: /bc CLI Panel Focus
+ *
+ * Listens to /ws/focus WebSocket for focus events.
+ *
+ * Multi-group layouts (Cyclist): maximizeGroup/exitMaximizedGroup
+ * Single-group layouts (BikeRack): activate target tab, stash previous
+ */
+
+import { useState, useEffect, useRef } from 'react';
+import type { DockviewApi } from 'dockview-react';
+
+export interface UseFocusPanelResult {
+  /** Currently focused panel ID, or null if not in focus mode */
+  focusedPanel: string | null;
+  /** Whether the workspace is currently in single-panel focus mode */
+  isInFocusMode: boolean;
+}
+
+/** WebSocket message format from /ws/focus */
+interface FocusMessage {
+  type: 'init' | 'update';
+  focus: string | null;
+}
+
+/**
+ * Hook for managing panel focus mode.
+ *
+ * @param api - Dockview API instance for layout manipulation, or null if not ready
+ * @returns Focus state including current focused panel and mode
+ */
+export function useFocusPanel(api: DockviewApi | null): UseFocusPanelResult {
+  const [focusedPanel, setFocusedPanel] = useState<string | null>(null);
+  const [isInFocusMode, setIsInFocusMode] = useState(false);
+
+  const wsRef = useRef<WebSocket | null>(null);
+  const reconnectTimeoutRef = useRef<ReturnType<typeof setTimeout>>();
+  const isMountedRef = useRef(true);
+
+  // Refs to access latest values inside WebSocket callbacks without re-creating the effect
+  const apiRef = useRef(api);
+  apiRef.current = api;
+
+  // Stash the previously active panel ID for single-group reset
+  const previousActivePanelRef = useRef<string | null>(null);
+
+  useEffect(() => {
+    isMountedRef.current = true;
+
+    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const wsUrl = `${protocol}//${window.location.host}/ws/focus`;
+
+    const handleFocusChange = (focus: string | null) => {
+      const currentApi = apiRef.current;
+      if (!currentApi) return;
+
+      if (focus !== null) {
+        const panel = currentApi.getPanel(focus);
+        if (!panel) return;
+
+        const isMultiGroup = currentApi.groups.length > 1;
+
+        if (isMultiGroup) {
+          // Multi-group (Cyclist): maximize the target panel's group
+          currentApi.maximizeGroup(panel);
+        } else {
+          // Single-group (BikeRack): stash current active, switch tab
+          if (!previousActivePanelRef.current) {
+            previousActivePanelRef.current = currentApi.activePanel?.id ?? null;
+          }
+          panel.api.setActive();
+        }
+
+        setIsInFocusMode(true);
+        setFocusedPanel(focus);
+      } else {
+        // Reset
+        const isMaximized = currentApi.hasMaximizedGroup();
+
+        if (isMaximized) {
+          // Multi-group: exit maximize
+          currentApi.exitMaximizedGroup();
+        } else if (previousActivePanelRef.current) {
+          // Single-group: restore previous active tab
+          const prev = currentApi.getPanel(previousActivePanelRef.current);
+          if (prev) prev.api.setActive();
+        }
+
+        previousActivePanelRef.current = null;
+        setIsInFocusMode(false);
+        setFocusedPanel(null);
+      }
+    };
+
+    const connect = () => {
+      if (!isMountedRef.current) return;
+
+      wsRef.current = new WebSocket(wsUrl);
+
+      wsRef.current.onmessage = (event: MessageEvent) => {
+        try {
+          const msg = JSON.parse(event.data) as FocusMessage;
+          if (msg.type === 'update') {
+            // Live /bc commands — apply focus change immediately
+            handleFocusChange(msg.focus);
+          }
+          // 'init' messages are ignored — focus is ephemeral, not persistent.
+          // Stale focus values in config would destroy the layout on page load.
+        } catch {
+          // Ignore malformed messages
+        }
+      };
+
+      wsRef.current.onclose = () => {
+        reconnectTimeoutRef.current = setTimeout(connect, 2000);
+      };
+    };
+
+    connect();
+
+    return () => {
+      isMountedRef.current = false;
+      if (reconnectTimeoutRef.current) {
+        clearTimeout(reconnectTimeoutRef.current);
+      }
+      if (wsRef.current) {
+        wsRef.current.close();
+      }
+    };
+  }, []);
+
+  return { focusedPanel, isInFocusMode };
+}