@pennyfarthing/core 11.3.8 → 11.5.0-alpha.0

package/packages/core/src/public/components/panels/DiffsPanel.tsx

@@ -0,0 +1,56 @@
+/**
+ * DiffsPanel - Display file diffs
+ *
+ * Story MSSCI-12717 - React Migration
+ * Story MSSCI-14238 - Git-based diffs (renders raw unified diff format)
+ */
+
+import React from 'react';
+import { Button } from '@/components/ui/button';
+import { useDiffs } from '../../hooks/useDiffs';
+import { DiffView } from './DiffView';
+
+export function DiffsPanel(): React.ReactElement {
+  const { diffs, selectedDiff, selectDiff, clearDiffs } = useDiffs();
+
+  if (diffs.length === 0) {
+    return (
+      <div className="diffs-panel empty" data-testid="diffs-panel">
+        <div className="placeholder">No diffs yet</div>
+        <p className="hint">Diffs appear when files are modified</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="diffs-panel" data-testid="diffs-panel">
+      <div className="panel-header">
+        <span className="diff-count">{diffs.length} file(s)</span>
+        <Button variant="ghost" size="sm" type="button" className="clear-button" onClick={clearDiffs}>
+          Clear
+        </Button>
+      </div>
+
+      {diffs.length > 1 && (
+        <div className="diff-tabs">
+          {diffs.map(diff => (
+            <Button
+              variant={selectedDiff?.path === diff.path ? 'secondary' : 'ghost'}
+              size="sm"
+              key={diff.path}
+              type="button"
+              className={`diff-tab ${selectedDiff?.path === diff.path ? 'active' : ''}`}
+              onClick={() => selectDiff(diff.path)}
+            >
+              {diff.path.split('/').pop()}
+            </Button>
+          ))}
+        </div>
+      )}
+
+      {selectedDiff && <DiffView diff={selectedDiff} />}
+    </div>
+  );
+}
+
+export default DiffsPanel;

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

@@ -0,0 +1,260 @@
+/**
+ * GitPanel - Display git repository status with diff drill-through
+ *
+ * Story MSSCI-12717 - React Migration
+ * Story MSSCI-12798 - Stacked multi-repo display with file dropdowns
+ * Merge: Changed panel consolidated into Git panel with inline diff view
+ */
+
+import React, { useState, useEffect, 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 { useGitStatus, RepoStatusData, DirtyFile } from '../../hooks/useGitStatus';
+import { useDiffs } from '../../hooks/useDiffs';
+import { DiffView } from './DiffView';
+
+
+/** 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[];
+  onFileClick: (filePath: string) => void;
+}
+
+function FileList({ files, onFileClick }: FileListProps): React.ReactElement {
+  return (
+    <ul className="file-list">
+      {files.map((file, index) => (
+        <li
+          key={`${file.path}-${index}`}
+          className={`file-item clickable ${getFileStatusClass(file.status)}`}
+          onClick={() => onFileClick(file.path)}
+          role="button"
+          tabIndex={0}
+          onKeyDown={(e) => { if (e.key === 'Enter') onFileClick(file.path); }}
+        >
+          <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;
+  onFileClick: (filePath: string) => void;
+}
+
+function RepoStatus({ repo, onFileClick }: 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} onFileClick={onFileClick} />}
+      </div>
+    </TooltipProvider>
+  );
+}
+
+export function GitPanel(): React.ReactElement {
+  const { repos, isLoading, error } = useGitStatus();
+  const { diffs, selectDiff } = useDiffs();
+  const [selectedFilePath, setSelectedFilePath] = useState<string | null>(null);
+
+  // Find the diff for the selected file
+  const selectedDiff = selectedFilePath
+    ? diffs.find(d => d.path === selectedFilePath || d.path.endsWith(selectedFilePath) || selectedFilePath.endsWith(d.path)) ?? null
+    : null;
+
+  // Handle file click — show diff inline
+  const handleFileClick = useCallback((filePath: string) => {
+    setSelectedFilePath(filePath);
+    selectDiff(filePath);
+  }, [selectDiff]);
+
+  // Handle Escape key to go back to repo overview
+  useEffect(() => {
+    if (!selectedFilePath) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        setSelectedFilePath(null);
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [selectedFilePath]);
+
+  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>
+    );
+  }
+
+  // Diff drill-through view
+  if (selectedFilePath) {
+    return (
+      <div className="git-panel diff-drillthrough" data-testid="git-panel">
+        <div className="diff-back-bar">
+          <Button
+            variant="ghost"
+            size="sm"
+            className="back-button"
+            onClick={() => setSelectedFilePath(null)}
+          >
+            ← Back
+          </Button>
+          <span className="breadcrumb-path">{selectedFilePath}</span>
+        </div>
+        {selectedDiff ? (
+          <DiffView diff={selectedDiff} />
+        ) : (
+          <div className="placeholder">No diff available for {selectedFilePath}</div>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div className="git-panel stacked" data-testid="git-panel">
+      {repos.map(repo => (
+        <RepoStatus key={repo.name} repo={repo} onFileClick={handleFileClick} />
+      ))}
+    </div>
+  );
+}
+
+export default GitPanel;

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

@@ -0,0 +1,365 @@
+/**
+ * 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;