bmad-elsabro 1.0.0

package/renderer/components/test-center/CoverageDashboard.tsx

@@ -0,0 +1,588 @@
+/**
+ * CoverageDashboard Component
+ *
+ * Displays test coverage metrics and analytics in a visual dashboard.
+ * Shows overall coverage, file-level coverage, and identifies areas needing improvement.
+ *
+ * Features:
+ * - Overall coverage metrics display
+ * - Visual coverage indicators (progress bars)
+ * - File-level coverage breakdown
+ * - Low coverage file identification
+ * - Coverage trends and insights
+ * - Refresh coverage data
+ * - Dark/light theme support
+ *
+ * @module renderer/components/test-center/CoverageDashboard
+ */
+
+import React, { useState, useEffect, useCallback } from 'react';
+
+/**
+ * Coverage metrics for a single metric type
+ */
+interface MetricData {
+  total: number;
+  covered: number;
+  skipped: number;
+  pct: number;
+}
+
+/**
+ * Coverage metrics structure
+ */
+interface CoverageMetrics {
+  lines: MetricData;
+  statements: MetricData;
+  functions: MetricData;
+  branches: MetricData;
+}
+
+/**
+ * File coverage data
+ */
+interface FileCoverage {
+  path: string;
+  metrics: CoverageMetrics;
+  status: 'excellent' | 'good' | 'fair' | 'poor' | 'none';
+}
+
+/**
+ * Coverage summary data
+ */
+interface CoverageSummary {
+  total: CoverageMetrics;
+  files: FileCoverage[];
+  timestamp: Date;
+  fileCount: number;
+  lowCoverageFiles: FileCoverage[];
+  uncoveredFiles: FileCoverage[];
+  averageCoverage: number;
+}
+
+/**
+ * Props for CoverageDashboard component
+ */
+export interface CoverageDashboardProps {
+  /**
+   * Custom CSS class name
+   */
+  className?: string;
+
+  /**
+   * Callback when refresh is requested
+   */
+  onRefresh?: () => void;
+}
+
+/**
+ * CoverageDashboard Component
+ *
+ * Displays comprehensive test coverage metrics and analytics.
+ *
+ * @example
+ * ```tsx
+ * <CoverageDashboard
+ *   onRefresh={() => console.log('Refresh requested')}
+ * />
+ * ```
+ */
+export const CoverageDashboard: React.FC<CoverageDashboardProps> = ({
+  className = '',
+  onRefresh,
+}) => {
+  const [coverage, setCoverage] = useState<CoverageSummary | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [selectedTab, setSelectedTab] = useState<'overview' | 'files' | 'insights'>('overview');
+
+  /**
+   * Load coverage data
+   * TODO: Replace with actual Electron IPC call
+   */
+  const loadCoverage = useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      // Simulate loading delay
+      await new Promise((resolve) => setTimeout(resolve, 500));
+
+      // TODO: Replace with actual IPC call
+      // const coverageData = await window.electron.coverage.getCoverageSummary();
+      // setCoverage(coverageData);
+
+      // For now, use mock data
+      const mockCoverage: CoverageSummary = generateMockCoverage();
+      setCoverage(mockCoverage);
+    } catch (err: any) {
+      setError(err.message || 'Failed to load coverage data');
+      setCoverage(null);
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  /**
+   * Load coverage on mount
+   */
+  useEffect(() => {
+    loadCoverage();
+  }, [loadCoverage]);
+
+  /**
+   * Handle refresh
+   */
+  const handleRefresh = useCallback(() => {
+    loadCoverage();
+    onRefresh?.();
+  }, [loadCoverage, onRefresh]);
+
+  /**
+   * Render coverage metric card
+   */
+  const renderMetricCard = (
+    title: string,
+    metric: MetricData,
+    icon: string
+  ) => {
+    const statusColor = getStatusColor(metric.pct);
+
+    return (
+      <div className="bg-white dark:bg-gray-800 rounded-lg p-4 border border-gray-200 dark:border-gray-700">
+        <div className="flex items-center justify-between mb-2">
+          <div className="flex items-center gap-2">
+            <span className="text-2xl">{icon}</span>
+            <h3 className="text-sm font-medium text-gray-600 dark:text-gray-400">
+              {title}
+            </h3>
+          </div>
+          <span className={`text-2xl font-bold ${statusColor}`}>
+            {metric.pct.toFixed(1)}%
+          </span>
+        </div>
+
+        {/* Progress bar */}
+        <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5 mb-2">
+          <div
+            className={`h-2.5 rounded-full transition-all ${getStatusBgColor(metric.pct)}`}
+            style={{ width: `${metric.pct}%` }}
+          ></div>
+        </div>
+
+        {/* Stats */}
+        <div className="flex items-center justify-between text-xs text-gray-600 dark:text-gray-400">
+          <span>
+            {metric.covered} / {metric.total}
+          </span>
+          <span>{metric.total - metric.covered} uncovered</span>
+        </div>
+      </div>
+    );
+  };
+
+  /**
+   * Render file coverage row
+   */
+  const renderFileRow = (file: FileCoverage, index: number) => {
+    const avgCoverage = calculateAverage(file.metrics);
+    const statusColor = getStatusColor(avgCoverage);
+    const statusLabel = getStatusLabel(file.status);
+
+    return (
+      <tr
+        key={index}
+        className="border-b border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors"
+      >
+        <td className="px-4 py-3 text-sm text-gray-900 dark:text-white font-mono truncate max-w-xs">
+          {file.path}
+        </td>
+        <td className="px-4 py-3 text-center">
+          <span className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${getStatusBadgeColor(file.status)}`}>
+            {statusLabel}
+          </span>
+        </td>
+        <td className="px-4 py-3 text-center">
+          <span className={`text-sm font-semibold ${statusColor}`}>
+            {file.metrics.lines.pct.toFixed(1)}%
+          </span>
+        </td>
+        <td className="px-4 py-3 text-center">
+          <span className={`text-sm font-semibold ${statusColor}`}>
+            {file.metrics.statements.pct.toFixed(1)}%
+          </span>
+        </td>
+        <td className="px-4 py-3 text-center">
+          <span className={`text-sm font-semibold ${statusColor}`}>
+            {file.metrics.functions.pct.toFixed(1)}%
+          </span>
+        </td>
+        <td className="px-4 py-3 text-center">
+          <span className={`text-sm font-semibold ${statusColor}`}>
+            {file.metrics.branches.pct.toFixed(1)}%
+          </span>
+        </td>
+      </tr>
+    );
+  };
+
+  if (isLoading) {
+    return (
+      <div className={`flex items-center justify-center h-full bg-white dark:bg-gray-900 ${className}`}>
+        <div className="text-center">
+          <div className="text-4xl mb-2 animate-pulse">📊</div>
+          <p className="text-sm text-gray-600 dark:text-gray-400">Loading coverage data...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className={`flex items-center justify-center h-full bg-white dark:bg-gray-900 ${className}`}>
+        <div className="text-center p-8 max-w-md">
+          <div className="text-6xl mb-4">⚠️</div>
+          <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
+            Coverage Data Not Available
+          </h3>
+          <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
+            {error}
+          </p>
+          <button
+            onClick={handleRefresh}
+            className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded transition-colors text-sm font-medium"
+          >
+            🔄 Retry
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  if (!coverage) {
+    return (
+      <div className={`flex items-center justify-center h-full bg-white dark:bg-gray-900 ${className}`}>
+        <div className="text-center p-8 max-w-md">
+          <div className="text-6xl mb-4">📊</div>
+          <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
+            No Coverage Data
+          </h3>
+          <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
+            Run tests with coverage to see metrics here.
+          </p>
+          <button
+            onClick={handleRefresh}
+            className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded transition-colors text-sm font-medium"
+          >
+            🔄 Check Again
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`flex flex-col h-full bg-gray-50 dark:bg-gray-900 ${className}`}>
+      {/* Header */}
+      <div className="flex-none border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-4 py-3">
+        <div className="flex items-center justify-between">
+          <div>
+            <h2 className="text-2xl font-bold text-gray-900 dark:text-white">
+              Coverage Dashboard
+            </h2>
+            <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
+              Last updated: {new Date(coverage.timestamp).toLocaleString()}
+            </p>
+          </div>
+
+          <button
+            onClick={handleRefresh}
+            className="px-3 py-1.5 text-sm bg-blue-600 hover:bg-blue-700 text-white rounded transition-colors font-medium"
+            aria-label="Refresh coverage data"
+            title="Refresh coverage data"
+          >
+            🔄 Refresh
+          </button>
+        </div>
+
+        {/* Tab navigation */}
+        <div className="flex items-center gap-2 mt-3 border-b border-gray-200 dark:border-gray-700">
+          {(['overview', 'files', 'insights'] as const).map((tab) => (
+            <button
+              key={tab}
+              onClick={() => setSelectedTab(tab)}
+              className={`px-4 py-2 text-sm font-medium transition-colors border-b-2 ${
+                selectedTab === tab
+                  ? 'border-blue-600 text-blue-600 dark:text-blue-400'
+                  : 'border-transparent text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'
+              }`}
+            >
+              {tab.charAt(0).toUpperCase() + tab.slice(1)}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 overflow-y-auto p-4">
+        {selectedTab === 'overview' && (
+          <div className="space-y-6">
+            {/* Metric cards */}
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+              {renderMetricCard('Lines', coverage.total.lines, '📝')}
+              {renderMetricCard('Statements', coverage.total.statements, '📋')}
+              {renderMetricCard('Functions', coverage.total.functions, '⚙️')}
+              {renderMetricCard('Branches', coverage.total.branches, '🔀')}
+            </div>
+
+            {/* Overall summary */}
+            <div className="bg-white dark:bg-gray-800 rounded-lg p-6 border border-gray-200 dark:border-gray-700">
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
+                Summary
+              </h3>
+              <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+                <div>
+                  <p className="text-sm text-gray-600 dark:text-gray-400">Average Coverage</p>
+                  <p className={`text-2xl font-bold ${getStatusColor(coverage.averageCoverage)}`}>
+                    {coverage.averageCoverage.toFixed(1)}%
+                  </p>
+                </div>
+                <div>
+                  <p className="text-sm text-gray-600 dark:text-gray-400">Total Files</p>
+                  <p className="text-2xl font-bold text-gray-900 dark:text-white">
+                    {coverage.fileCount}
+                  </p>
+                </div>
+                <div>
+                  <p className="text-sm text-gray-600 dark:text-gray-400">Low Coverage</p>
+                  <p className="text-2xl font-bold text-yellow-600 dark:text-yellow-400">
+                    {coverage.lowCoverageFiles.length}
+                  </p>
+                </div>
+                <div>
+                  <p className="text-sm text-gray-600 dark:text-gray-400">No Coverage</p>
+                  <p className="text-2xl font-bold text-red-600 dark:text-red-400">
+                    {coverage.uncoveredFiles.length}
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {selectedTab === 'files' && (
+          <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
+            <div className="overflow-x-auto">
+              <table className="w-full">
+                <thead className="bg-gray-50 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700">
+                  <tr>
+                    <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                      File
+                    </th>
+                    <th className="px-4 py-3 text-center text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                      Status
+                    </th>
+                    <th className="px-4 py-3 text-center text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                      Lines
+                    </th>
+                    <th className="px-4 py-3 text-center text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                      Statements
+                    </th>
+                    <th className="px-4 py-3 text-center text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                      Functions
+                    </th>
+                    <th className="px-4 py-3 text-center text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                      Branches
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {coverage.files.map((file, index) => renderFileRow(file, index))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        )}
+
+        {selectedTab === 'insights' && (
+          <div className="space-y-4">
+            {/* Low coverage files */}
+            {coverage.lowCoverageFiles.length > 0 && (
+              <div className="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4">
+                <h3 className="text-lg font-semibold text-yellow-800 dark:text-yellow-200 mb-2">
+                  ⚠️ Low Coverage Files ({coverage.lowCoverageFiles.length})
+                </h3>
+                <p className="text-sm text-yellow-700 dark:text-yellow-300 mb-3">
+                  The following files have coverage below 80%:
+                </p>
+                <ul className="space-y-1">
+                  {coverage.lowCoverageFiles.slice(0, 5).map((file, index) => (
+                    <li key={index} className="text-sm text-yellow-700 dark:text-yellow-300 font-mono">
+                      • {file.path} - {calculateAverage(file.metrics).toFixed(1)}%
+                    </li>
+                  ))}
+                </ul>
+                {coverage.lowCoverageFiles.length > 5 && (
+                  <p className="text-sm text-yellow-600 dark:text-yellow-400 mt-2">
+                    ... and {coverage.lowCoverageFiles.length - 5} more
+                  </p>
+                )}
+              </div>
+            )}
+
+            {/* Uncovered files */}
+            {coverage.uncoveredFiles.length > 0 && (
+              <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4">
+                <h3 className="text-lg font-semibold text-red-800 dark:text-red-200 mb-2">
+                  ❌ Uncovered Files ({coverage.uncoveredFiles.length})
+                </h3>
+                <p className="text-sm text-red-700 dark:text-red-300 mb-3">
+                  The following files have no test coverage:
+                </p>
+                <ul className="space-y-1">
+                  {coverage.uncoveredFiles.slice(0, 5).map((file, index) => (
+                    <li key={index} className="text-sm text-red-700 dark:text-red-300 font-mono">
+                      • {file.path}
+                    </li>
+                  ))}
+                </ul>
+                {coverage.uncoveredFiles.length > 5 && (
+                  <p className="text-sm text-red-600 dark:text-red-400 mt-2">
+                    ... and {coverage.uncoveredFiles.length - 5} more
+                  </p>
+                )}
+              </div>
+            )}
+
+            {/* Success message if coverage is good */}
+            {coverage.averageCoverage >= 80 && coverage.uncoveredFiles.length === 0 && (
+              <div className="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg p-4">
+                <h3 className="text-lg font-semibold text-green-800 dark:text-green-200 mb-2">
+                  ✅ Excellent Coverage!
+                </h3>
+                <p className="text-sm text-green-700 dark:text-green-300">
+                  Your project maintains {coverage.averageCoverage.toFixed(1)}% average coverage across {coverage.fileCount} files.
+                  Keep up the great work!
+                </p>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+/**
+ * Helper functions
+ */
+
+function getStatusColor(pct: number): string {
+  if (pct >= 90) return 'text-green-600 dark:text-green-400';
+  if (pct >= 80) return 'text-blue-600 dark:text-blue-400';
+  if (pct >= 60) return 'text-yellow-600 dark:text-yellow-400';
+  return 'text-red-600 dark:text-red-400';
+}
+
+function getStatusBgColor(pct: number): string {
+  if (pct >= 90) return 'bg-green-600 dark:bg-green-400';
+  if (pct >= 80) return 'bg-blue-600 dark:bg-blue-400';
+  if (pct >= 60) return 'bg-yellow-600 dark:bg-yellow-400';
+  return 'bg-red-600 dark:bg-red-400';
+}
+
+function getStatusBadgeColor(status: string): string {
+  switch (status) {
+    case 'excellent':
+      return 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400';
+    case 'good':
+      return 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400';
+    case 'fair':
+      return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400';
+    case 'poor':
+      return 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400';
+    default:
+      return 'bg-gray-100 text-gray-800 dark:bg-gray-900/30 dark:text-gray-400';
+  }
+}
+
+function getStatusLabel(status: string): string {
+  switch (status) {
+    case 'excellent':
+      return '🌟 Excellent';
+    case 'good':
+      return '✅ Good';
+    case 'fair':
+      return '⚠️ Fair';
+    case 'poor':
+      return '❌ Poor';
+    default:
+      return '⭕ None';
+  }
+}
+
+function calculateAverage(metrics: CoverageMetrics): number {
+  const percentages = [
+    metrics.lines.pct,
+    metrics.statements.pct,
+    metrics.functions.pct,
+    metrics.branches.pct,
+  ];
+  const sum = percentages.reduce((acc, pct) => acc + pct, 0);
+  return sum / percentages.length;
+}
+
+/**
+ * Generate mock coverage data for demonstration
+ */
+function generateMockCoverage(): CoverageSummary {
+  return {
+    total: {
+      lines: { total: 1250, covered: 1050, skipped: 0, pct: 84 },
+      statements: { total: 1320, covered: 1122, skipped: 0, pct: 85 },
+      functions: { total: 245, covered: 201, skipped: 0, pct: 82 },
+      branches: { total: 380, covered: 304, skipped: 0, pct: 80 },
+    },
+    files: [
+      {
+        path: 'lib/config.ts',
+        metrics: {
+          lines: { total: 120, covered: 108, skipped: 0, pct: 90 },
+          statements: { total: 125, covered: 113, skipped: 0, pct: 90.4 },
+          functions: { total: 18, covered: 17, skipped: 0, pct: 94.4 },
+          branches: { total: 24, covered: 22, skipped: 0, pct: 91.7 },
+        },
+        status: 'excellent',
+      },
+      {
+        path: 'electron/services/token-tracker.ts',
+        metrics: {
+          lines: { total: 280, covered: 238, skipped: 0, pct: 85 },
+          statements: { total: 295, covered: 251, skipped: 0, pct: 85.1 },
+          functions: { total: 42, covered: 36, skipped: 0, pct: 85.7 },
+          branches: { total: 68, covered: 58, skipped: 0, pct: 85.3 },
+        },
+        status: 'good',
+      },
+      {
+        path: 'renderer/components/TestCenter.tsx',
+        metrics: {
+          lines: { total: 150, covered: 105, skipped: 0, pct: 70 },
+          statements: { total: 158, covered: 111, skipped: 0, pct: 70.3 },
+          functions: { total: 22, covered: 15, skipped: 0, pct: 68.2 },
+          branches: { total: 32, covered: 22, skipped: 0, pct: 68.8 },
+        },
+        status: 'fair',
+      },
+    ],
+    timestamp: new Date(),
+    fileCount: 3,
+    lowCoverageFiles: [],
+    uncoveredFiles: [],
+    averageCoverage: 82.5,
+  };
+}
+
+CoverageDashboard.displayName = 'CoverageDashboard';
+
+export default CoverageDashboard;