@pennyfarthing/cyclist 10.4.0 → 11.0.0

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

@@ -1,216 +0,0 @@
-/**
- * GitPanel - Display git repository status
- *
- * Story MSSCI-12717 - React Migration
- * Story MSSCI-12798 - Stacked multi-repo display with file dropdowns
- */
-
-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';
-import { Skeleton } from '@/components/ui/skeleton';
-import { useGitStatus, RepoStatusData, DirtyFile } from '../../hooks/useGitStatus';
-import { useClaudeContext } from '../../contexts/ClaudeContext';
-
-/** Get CSS class for file status */
-function getFileStatusClass(status: string): string {
-  const indexStatus = status[0] || ' ';
-  const workTreeStatus = status[1] || ' ';
-
-  if (indexStatus === '?' && workTreeStatus === '?') return 'untracked';
-  if (indexStatus !== ' ' && indexStatus !== '?') return 'staged';
-  if (workTreeStatus === 'M' || workTreeStatus === 'D') return 'modified';
-  return 'modified';
-}
-
-/** Get display label for file status */
-function getFileStatusLabel(status: string): string {
-  const indexStatus = status[0] || ' ';
-  const workTreeStatus = status[1] || ' ';
-
-  if (indexStatus === '?' && workTreeStatus === '?') return '?';
-  if (indexStatus === 'A') return '+';
-  if (indexStatus === 'D' || workTreeStatus === 'D') return '-';
-  if (indexStatus === 'M' || workTreeStatus === 'M') return '~';
-  if (indexStatus === 'R') return 'R';
-  return status.trim() || '~';
-}
-
-interface FileListProps {
-  files: DirtyFile[];
-}
-
-function FileList({ files }: FileListProps): React.ReactElement {
-  return (
-    <ul className="file-list">
-      {files.map((file, index) => (
-        <li key={`${file.path}-${index}`} className={`file-item ${getFileStatusClass(file.status)}`}>
-          <span className="file-status-icon">{getFileStatusLabel(file.status)}</span>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <span className="file-path">{file.path}</span>
-            </TooltipTrigger>
-            <TooltipContent>{file.path}</TooltipContent>
-          </Tooltip>
-        </li>
-      ))}
-    </ul>
-  );
-}
-
-interface RepoStatusProps {
-  repo: RepoStatusData;
-}
-
-function RepoStatus({ repo }: RepoStatusProps): React.ReactElement {
-  const [isExpanded, setIsExpanded] = useState(false);
-  const { name, branch, ahead, behind, developBehind, staged, modified, untracked, isDirty, files } = repo;
-  const hasFiles = files.length > 0;
-
-  return (
-    <TooltipProvider delayDuration={300}>
-      <div className={`repo-status ${isExpanded ? 'expanded' : ''}`} data-testid={`repo-status-${name}`}>
-        <div className="repo-header">
-          <span className="repo-name">{name}</span>
-          {isDirty && (
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Badge variant="destructive" className="dirty-indicator">●</Badge>
-              </TooltipTrigger>
-              <TooltipContent>Uncommitted changes</TooltipContent>
-            </Tooltip>
-          )}
-        </div>
-
-        <div className="branch-info">
-          <span className="branch-icon">⎇</span>
-          <span className="branch-name">{branch}</span>
-        </div>
-
-        {((ahead !== undefined && ahead > 0) || (behind !== undefined && behind > 0) || (developBehind !== undefined && developBehind > 0)) && (
-          <div className="sync-status">
-            {ahead !== undefined && ahead > 0 && (
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <span className="ahead">↑{ahead}</span>
-                </TooltipTrigger>
-                <TooltipContent>Commits ahead of remote</TooltipContent>
-              </Tooltip>
-            )}
-            {behind !== undefined && behind > 0 && (
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <span className="behind">↓{behind}</span>
-                </TooltipTrigger>
-                <TooltipContent>Commits behind remote</TooltipContent>
-              </Tooltip>
-            )}
-            {developBehind !== undefined && developBehind > 0 && (
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <span className="develop-behind">⟳{developBehind}</span>
-                </TooltipTrigger>
-                <TooltipContent>develop is {developBehind} commit{developBehind > 1 ? 's' : ''} ahead</TooltipContent>
-              </Tooltip>
-            )}
-          </div>
-        )}
-
-        {(staged > 0 || modified > 0 || untracked > 0) && (
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                variant="ghost"
-                className="file-status-toggle"
-                onClick={() => setIsExpanded(!isExpanded)}
-              >
-                <span className={`toggle-icon ${isExpanded ? 'open' : ''}`}>▶</span>
-                <div className="file-status">
-                  {staged > 0 && (
-                    <Badge variant="outline" className="status-item staged">+{staged}</Badge>
-                  )}
-                  {modified > 0 && (
-                    <Badge variant="outline" className="status-item modified">~{modified}</Badge>
-                  )}
-                  {untracked > 0 && (
-                    <Badge variant="outline" className="status-item untracked">?{untracked}</Badge>
-                  )}
-                </div>
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent>{isExpanded ? 'Collapse file list' : 'Expand file list'}</TooltipContent>
-          </Tooltip>
-        )}
-
-        {isExpanded && hasFiles && <FileList files={files} />}
-      </div>
-    </TooltipProvider>
-  );
-}
-
-export function GitPanel(): React.ReactElement {
-  const { repos, isLoading, error } = useGitStatus();
-  const { send } = useClaudeContext();
-
-  const handleSyncAll = () => {
-    send('Sync all repos');
-  };
-
-  if (isLoading) {
-    return (
-      <div className="git-panel loading" data-testid="git-panel">
-        <div className="space-y-3 p-2">
-          <div className="space-y-1">
-            <Skeleton className="h-4 w-32" />
-            <Skeleton className="h-3 w-24" />
-          </div>
-          <div className="space-y-1">
-            <Skeleton className="h-4 w-28" />
-            <Skeleton className="h-3 w-20" />
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  if (error) {
-    return (
-      <div className="git-panel error" data-testid="git-panel">
-        <div className="error-message">{error.message}</div>
-      </div>
-    );
-  }
-
-  if (repos.length === 0) {
-    return (
-      <div className="git-panel empty" data-testid="git-panel">
-        <div className="placeholder">No git repos</div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="git-panel stacked" data-testid="git-panel">
-      <div className="git-panel-actions">
-        <TooltipProvider delayDuration={300}>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <button className="sync-all-btn" onClick={handleSyncAll} aria-label="Sync all repos">
-                <RefreshCw size={14} />
-                <span>Sync all repos</span>
-              </button>
-            </TooltipTrigger>
-            <TooltipContent>Pull latest changes for all repos</TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
-      </div>
-      {repos.map(repo => (
-        <RepoStatus key={repo.name} repo={repo} />
-      ))}
-    </div>
-  );
-}
-
-export default GitPanel;

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

@@ -1,365 +0,0 @@
-/**
- * HotspotsPanel - Git history hotspot detector
- *
- * Shows files and directories with highest change frequency, bug fix concentration,
- * and multi-author churn. Sortable table with time window controls.
- */
-
-import React, { useState, useMemo, useCallback } from 'react';
-import { Button } from '@/components/ui/button';
-import { Badge } from '@/components/ui/badge';
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
-import { Skeleton } from '@/components/ui/skeleton';
-import { useHotspots, FileHotspot, DirectoryHotspot, HotspotRepoResult } from '../../hooks/useHotspots';
-
-type SortField = 'hotspot_score' | 'change_count' | 'bug_fix_count' | 'author_count' | 'churn' | 'path';
-type SortDirection = 'asc' | 'desc';
-type ViewMode = 'files' | 'dirs';
-
-const TIME_WINDOWS = [30, 60, 90] as const;
-
-function SortableHeader({
-  label,
-  field,
-  currentSort,
-  currentDirection,
-  onSort,
-  align = 'right',
-}: {
-  label: string;
-  field: SortField;
-  currentSort: SortField;
-  currentDirection: SortDirection;
-  onSort: (field: SortField) => void;
-  align?: 'left' | 'right';
-}) {
-  const isActive = currentSort === field;
-  const arrow = isActive ? (currentDirection === 'desc' ? ' v' : ' ^') : '';
-
-  return (
-    <th
-      className={`hotspots-th ${align === 'left' ? 'text-left' : 'text-right'} ${isActive ? 'active' : ''}`}
-      onClick={() => onSort(field)}
-      role="columnheader"
-      aria-sort={isActive ? (currentDirection === 'desc' ? 'descending' : 'ascending') : 'none'}
-      style={{ cursor: 'pointer', userSelect: 'none' }}
-    >
-      {label}{arrow}
-    </th>
-  );
-}
-
-function FileTable({
-  hotspots,
-  sortField,
-  sortDirection,
-  onSort,
-}: {
-  hotspots: FileHotspot[];
-  sortField: SortField;
-  sortDirection: SortDirection;
-  onSort: (field: SortField) => void;
-}) {
-  const sorted = useMemo(() => {
-    const items = [...hotspots];
-    items.sort((a, b) => {
-      const aVal = a[sortField as keyof FileHotspot];
-      const bVal = b[sortField as keyof FileHotspot];
-      if (typeof aVal === 'number' && typeof bVal === 'number') {
-        return sortDirection === 'desc' ? bVal - aVal : aVal - bVal;
-      }
-      const aStr = String(aVal);
-      const bStr = String(bVal);
-      return sortDirection === 'desc' ? bStr.localeCompare(aStr) : aStr.localeCompare(bStr);
-    });
-    return items;
-  }, [hotspots, sortField, sortDirection]);
-
-  return (
-    <table className="hotspots-table" role="table">
-      <thead>
-        <tr>
-          <SortableHeader label="Score" field="hotspot_score" currentSort={sortField} currentDirection={sortDirection} onSort={onSort} />
-          <SortableHeader label="Changes" field="change_count" currentSort={sortField} currentDirection={sortDirection} onSort={onSort} />
-          <SortableHeader label="Fixes" field="bug_fix_count" currentSort={sortField} currentDirection={sortDirection} onSort={onSort} />
-          <SortableHeader label="Authors" field="author_count" currentSort={sortField} currentDirection={sortDirection} onSort={onSort} />
-          <SortableHeader label="Churn" field="churn" currentSort={sortField} currentDirection={sortDirection} onSort={onSort} />
-          <SortableHeader label="File" field="path" currentSort={sortField} currentDirection={sortDirection} onSort={onSort} align="left" />
-        </tr>
-      </thead>
-      <tbody>
-        {sorted.map((h) => (
-          <tr key={h.path}>
-            <td className="text-right">
-              <Badge variant={h.hotspot_score >= 50 ? 'destructive' : h.hotspot_score >= 25 ? 'outline' : 'secondary'}>
-                {h.hotspot_score.toFixed(1)}
-              </Badge>
-            </td>
-            <td className="text-right">{h.change_count}</td>
-            <td className="text-right">{h.bug_fix_count}</td>
-            <td className="text-right">{h.author_count}</td>
-            <td className="text-right">{h.churn}</td>
-            <td className="text-left">
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <span className="hotspots-filepath">{h.path}</span>
-                </TooltipTrigger>
-                <TooltipContent>{h.path}</TooltipContent>
-              </Tooltip>
-            </td>
-          </tr>
-        ))}
-      </tbody>
-    </table>
-  );
-}
-
-function DirTable({
-  hotspots,
-  sortField,
-  sortDirection,
-  onSort,
-}: {
-  hotspots: DirectoryHotspot[];
-  sortField: SortField;
-  sortDirection: SortDirection;
-  onSort: (field: SortField) => void;
-}) {
-  const sorted = useMemo(() => {
-    const items = [...hotspots];
-    items.sort((a, b) => {
-      // Map file-centric fields to directory equivalents
-      const fieldMap: Record<string, keyof DirectoryHotspot> = {
-        change_count: 'total_changes',
-        bug_fix_count: 'total_bug_fixes',
-        author_count: 'avg_author_count',
-        churn: 'file_count',
-      };
-      const key = (fieldMap[sortField] || sortField) as keyof DirectoryHotspot;
-      const aVal = a[key];
-      const bVal = b[key];
-      if (typeof aVal === 'number' && typeof bVal === 'number') {
-        return sortDirection === 'desc' ? bVal - aVal : aVal - bVal;
-      }
-      return sortDirection === 'desc'
-        ? String(bVal).localeCompare(String(aVal))
-        : String(aVal).localeCompare(String(bVal));
-    });
-    return items;
-  }, [hotspots, sortField, sortDirection]);
-
-  return (
-    <table className="hotspots-table" role="table">
-      <thead>
-        <tr>
-          <SortableHeader label="Score" field="hotspot_score" currentSort={sortField} currentDirection={sortDirection} onSort={onSort} />
-          <SortableHeader label="Changes" field="change_count" currentSort={sortField} currentDirection={sortDirection} onSort={onSort} />
-          <SortableHeader label="Fixes" field="bug_fix_count" currentSort={sortField} currentDirection={sortDirection} onSort={onSort} />
-          <SortableHeader label="Authors" field="author_count" currentSort={sortField} currentDirection={sortDirection} onSort={onSort} />
-          <SortableHeader label="Files" field="churn" currentSort={sortField} currentDirection={sortDirection} onSort={onSort} />
-          <SortableHeader label="Directory" field="path" currentSort={sortField} currentDirection={sortDirection} onSort={onSort} align="left" />
-        </tr>
-      </thead>
-      <tbody>
-        {sorted.map((d) => (
-          <tr key={d.path}>
-            <td className="text-right">
-              <Badge variant={d.hotspot_score >= 50 ? 'destructive' : d.hotspot_score >= 25 ? 'outline' : 'secondary'}>
-                {d.hotspot_score.toFixed(1)}
-              </Badge>
-            </td>
-            <td className="text-right">{d.total_changes}</td>
-            <td className="text-right">{d.total_bug_fixes}</td>
-            <td className="text-right">{d.avg_author_count.toFixed(1)}</td>
-            <td className="text-right">{d.file_count}</td>
-            <td className="text-left">
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <span className="hotspots-filepath">{d.path}</span>
-                </TooltipTrigger>
-                <TooltipContent>{d.path}</TooltipContent>
-              </Tooltip>
-            </td>
-          </tr>
-        ))}
-      </tbody>
-    </table>
-  );
-}
-
-export function HotspotsPanel(): React.ReactElement {
-  const [days, setDays] = useState<number>(90);
-  const [viewMode, setViewMode] = useState<ViewMode>('files');
-  const [sortField, setSortField] = useState<SortField>('hotspot_score');
-  const [sortDirection, setSortDirection] = useState<SortDirection>('desc');
-
-  const { data, isLoading, error, refresh } = useHotspots({ days });
-
-  const handleSort = useCallback((field: SortField) => {
-    setSortField((prev) => {
-      if (prev === field) {
-        setSortDirection((d) => (d === 'desc' ? 'asc' : 'desc'));
-        return prev;
-      }
-      setSortDirection('desc');
-      return field;
-    });
-  }, []);
-
-  // Flatten results — single-repo returns fields directly, multi-repo has repo_results
-  const repoResults: HotspotRepoResult[] = useMemo(() => {
-    if (!data) return [];
-    if (data.repo_results) return data.repo_results;
-    // Single-repo result — wrap in array
-    if (data.file_hotspots) {
-      return [{
-        success: data.success,
-        repo_name: data.repo_name || '',
-        repo_path: data.repo_path || '',
-        time_window_days: data.time_window_days || days,
-        commit_count: data.commit_count || 0,
-        file_hotspots: data.file_hotspots || [],
-        directory_hotspots: data.directory_hotspots || [],
-      }];
-    }
-    return [];
-  }, [data, days]);
-
-  // Merge all file/dir hotspots across repos
-  const allFiles = useMemo(() => {
-    const files: FileHotspot[] = [];
-    for (const r of repoResults) {
-      if (r.success) files.push(...r.file_hotspots);
-    }
-    return files;
-  }, [repoResults]);
-
-  const allDirs = useMemo(() => {
-    const dirs: DirectoryHotspot[] = [];
-    for (const r of repoResults) {
-      if (r.success) dirs.push(...r.directory_hotspots);
-    }
-    return dirs;
-  }, [repoResults]);
-
-  const totalCommits = repoResults.reduce((sum, r) => sum + (r.commit_count || 0), 0);
-
-  // Loading state
-  if (isLoading) {
-    return (
-      <div className="hotspots-panel loading" data-testid="hotspots-panel">
-        <div className="space-y-3 p-2">
-          <Skeleton className="h-4 w-40" />
-          <Skeleton className="h-3 w-full" />
-          <Skeleton className="h-3 w-full" />
-          <Skeleton className="h-3 w-3/4" />
-          <Skeleton className="h-3 w-full" />
-          <Skeleton className="h-3 w-5/6" />
-        </div>
-      </div>
-    );
-  }
-
-  // Error state
-  if (error) {
-    return (
-      <div className="hotspots-panel error" data-testid="hotspots-panel">
-        <div className="error-message">{error.message}</div>
-        <Button variant="outline" size="sm" onClick={refresh}>Retry</Button>
-      </div>
-    );
-  }
-
-  return (
-    <TooltipProvider delayDuration={300}>
-      <div className="hotspots-panel" data-testid="hotspots-panel">
-        {/* Controls bar */}
-        <div className="hotspots-controls">
-          <div className="hotspots-time-windows">
-            {TIME_WINDOWS.map((w) => (
-              <Button
-                key={w}
-                variant={days === w ? 'default' : 'outline'}
-                size="sm"
-                onClick={() => setDays(w)}
-              >
-                {w}d
-              </Button>
-            ))}
-          </div>
-
-          <div className="hotspots-view-toggle">
-            <Button
-              variant={viewMode === 'files' ? 'default' : 'outline'}
-              size="sm"
-              onClick={() => setViewMode('files')}
-            >
-              Files
-            </Button>
-            <Button
-              variant={viewMode === 'dirs' ? 'default' : 'outline'}
-              size="sm"
-              onClick={() => setViewMode('dirs')}
-            >
-              Dirs
-            </Button>
-          </div>
-
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button variant="outline" size="sm" onClick={refresh}>
-                Analyze
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent>Run hotspot analysis</TooltipContent>
-          </Tooltip>
-        </div>
-
-        {/* Summary */}
-        {data && (
-          <div className="hotspots-summary">
-            <span>{totalCommits} commits</span>
-            <span>{allFiles.length} files</span>
-            <span>{allDirs.length} dirs</span>
-          </div>
-        )}
-
-        {/* No data state */}
-        {!data && (
-          <div className="hotspots-empty">
-            <p>Click <strong>Analyze</strong> to detect code hotspots</p>
-          </div>
-        )}
-
-        {/* Table */}
-        {data && viewMode === 'files' && (
-          allFiles.length > 0 ? (
-            <FileTable
-              hotspots={allFiles.slice(0, 50)}
-              sortField={sortField}
-              sortDirection={sortDirection}
-              onSort={handleSort}
-            />
-          ) : (
-            <div className="hotspots-empty">No file hotspots found</div>
-          )
-        )}
-
-        {data && viewMode === 'dirs' && (
-          allDirs.length > 0 ? (
-            <DirTable
-              hotspots={allDirs.slice(0, 50)}
-              sortField={sortField}
-              sortDirection={sortDirection}
-              onSort={handleSort}
-            />
-          ) : (
-            <div className="hotspots-empty">No directory hotspots found</div>
-          )
-        )}
-      </div>
-    </TooltipProvider>
-  );
-}
-
-export default HotspotsPanel;