@pennyfarthing/cyclist 10.0.3 → 10.2.0

package/src/public/components/dialogs/CodeMarkersDialog.tsx

@@ -0,0 +1,169 @@
+/**
+ * CodeMarkersDialog — Story 80-3 (MSSCI-14456)
+ *
+ * Dialog displaying code markers (TODO, FIXME, HACK, XXX) with tabs,
+ * sortable table, staleness badges, and summary stats.
+ */
+import React, { useState, useMemo, useEffect } from 'react';
+import { Badge } from '@/components/ui/badge';
+import { Skeleton } from '@/components/ui/skeleton';
+import { ToolDialog } from './ToolDialog';
+import { useCodeMarkers } from '../../hooks/useCodeMarkers';
+
+export interface CodeMarkersDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+type TabId = 'all' | 'stale' | 'deprecated';
+type SortField = 'marker_type' | 'path' | 'line' | 'author' | 'age_days';
+type SortDirection = 'asc' | 'desc';
+
+export function CodeMarkersDialog({ open, onOpenChange }: CodeMarkersDialogProps): React.ReactElement {
+  const { data, isLoading, error, refresh } = useCodeMarkers({ days: 90, repo: 'pennyfarthing' });
+
+  useEffect(() => {
+    if (open) refresh();
+  }, [open, refresh]);
+
+  const [activeTab, setActiveTab] = useState<TabId>('all');
+  const [sortField, setSortField] = useState<SortField>('age_days');
+  const [sortDirection, setSortDirection] = useState<SortDirection>('desc');
+
+  const filteredMarkers = useMemo(() => {
+    if (!data?.markers) return [];
+    switch (activeTab) {
+      case 'stale':
+        return data.markers.filter((m) => m.is_stale);
+      case 'deprecated':
+        return [];
+      default:
+        return data.markers;
+    }
+  }, [data, activeTab]);
+
+  const sortedMarkers = useMemo(() => {
+    const sorted = [...filteredMarkers];
+    sorted.sort((a, b) => {
+      const aVal = a[sortField];
+      const bVal = b[sortField];
+      if (typeof aVal === 'string' && typeof bVal === 'string') {
+        return sortDirection === 'asc' ? aVal.localeCompare(bVal) : bVal.localeCompare(aVal);
+      }
+      const aNum = Number(aVal);
+      const bNum = Number(bVal);
+      return sortDirection === 'asc' ? aNum - bNum : bNum - aNum;
+    });
+    return sorted;
+  }, [filteredMarkers, sortField, sortDirection]);
+
+  const handleSort = (field: SortField) => {
+    if (sortField === field) {
+      setSortDirection((d) => (d === 'asc' ? 'desc' : 'asc'));
+    } else {
+      setSortField(field);
+      setSortDirection('desc');
+    }
+  };
+
+  const sortArrow = (field: SortField) => {
+    if (sortField !== field) return '';
+    return sortDirection === 'desc' ? ' v' : ' ^';
+  };
+
+  return (
+    <ToolDialog
+      open={open}
+      onOpenChange={onOpenChange}
+      title="Code Markers"
+      description="TODO, FIXME, HACK, and XXX markers across the codebase"
+    >
+      {isLoading && (
+        <div className="space-y-2">
+          <Skeleton className="h-4 w-full" />
+          <Skeleton className="h-4 w-3/4" />
+          <Skeleton className="h-4 w-1/2" />
+        </div>
+      )}
+
+      {error && (
+        <div className="p-4 rounded border border-[var(--status-error)]/20 bg-[var(--status-error)]/5 text-[var(--status-error)] text-sm">
+          {error.message}
+        </div>
+      )}
+
+      {!isLoading && !error && data && (
+        <>
+          {/* Summary stats */}
+          <div className="flex gap-4 text-xs text-[var(--text-muted)]" data-testid="code-markers-summary">
+            <span data-testid="summary-total">Total: <span className="tabular-nums font-mono">{data.summary.total_markers}</span></span>
+            <span data-testid="summary-stale">Stale: <span className="tabular-nums font-mono">{data.summary.stale_markers}</span></span>
+            {Object.entries(data.summary.by_type).map(([type, count]) => (
+              <span key={type} data-testid={`summary-type-${type.toLowerCase()}`}>{type}: <span className="tabular-nums font-mono">{count}</span></span>
+            ))}
+          </div>
+
+          {/* Tabs */}
+          <div role="tablist" className="flex gap-4 border-b border-[var(--border)] mb-3">
+            {(['all', 'stale', 'deprecated'] as const).map((tab) => (
+              <button
+                key={tab}
+                role="tab"
+                aria-selected={activeTab === tab}
+                onClick={() => setActiveTab(tab)}
+                className={`pb-2 text-sm capitalize ${activeTab === tab ? 'border-b-2 border-[var(--accent)] text-[var(--text-primary)] font-medium' : 'text-[var(--text-muted)]'}`}
+              >
+                {tab}
+              </button>
+            ))}
+          </div>
+
+          {/* Table or empty state */}
+          {sortedMarkers.length === 0 ? (
+            <div className="text-center py-12 text-[var(--text-muted)]">No markers found</div>
+          ) : (
+            <table role="table" className="w-full text-sm">
+              <thead>
+                <tr className="border-b border-[var(--border)]">
+                  <th className="cursor-pointer select-none text-left text-xs font-medium uppercase tracking-wider text-[var(--text-muted)] pb-2" onClick={() => handleSort('marker_type')}>
+                    Type{sortArrow('marker_type')}
+                  </th>
+                  <th className="cursor-pointer select-none text-left text-xs font-medium uppercase tracking-wider text-[var(--text-muted)] pb-2" onClick={() => handleSort('path')}>
+                    File{sortArrow('path')}
+                  </th>
+                  <th className="cursor-pointer select-none text-right text-xs font-medium uppercase tracking-wider text-[var(--text-muted)] pb-2" onClick={() => handleSort('line')}>
+                    Line{sortArrow('line')}
+                  </th>
+                  <th className="text-left text-xs font-medium uppercase tracking-wider text-[var(--text-muted)] pb-2">Text</th>
+                  <th className="cursor-pointer select-none text-left text-xs font-medium uppercase tracking-wider text-[var(--text-muted)] pb-2" onClick={() => handleSort('author')}>
+                    Author{sortArrow('author')}
+                  </th>
+                  <th className="cursor-pointer select-none text-right text-xs font-medium uppercase tracking-wider text-[var(--text-muted)] pb-2" onClick={() => handleSort('age_days')}>
+                    Age{sortArrow('age_days')}
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                {sortedMarkers.map((marker, i) => (
+                  <tr key={`${marker.path}:${marker.line}:${i}`} className="text-[var(--text-primary)]">
+                    <td className="py-1.5">
+                      <Badge variant={marker.is_stale ? 'destructive' : 'secondary'}>
+                        {marker.marker_type}
+                      </Badge>
+                    </td>
+                    <td className="py-1.5 font-mono text-xs">{marker.path}</td>
+                    <td className="text-right py-1.5 tabular-nums font-mono">{marker.line}</td>
+                    <td className="py-1.5 truncate max-w-xs">{marker.text}</td>
+                    <td className="py-1.5">{marker.author}</td>
+                    <td className="text-right py-1.5 tabular-nums font-mono">{marker.age_days}d</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          )}
+        </>
+      )}
+
+    </ToolDialog>
+  );
+}

package/src/public/components/dialogs/ComplexityDialog.tsx

@@ -0,0 +1,163 @@
+import React, { useState, useMemo, useCallback, useEffect } from 'react';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Skeleton } from '@/components/ui/skeleton';
+import { ToolDialog } from './ToolDialog';
+import { useComplexity, FileComplexity } from '../../hooks/useComplexity';
+
+export interface ComplexityDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+type SortField = 'avg_cyclomatic_complexity' | 'max_nesting_depth' | 'longest_function' | 'total_lines' | 'function_count' | 'path';
+type SortDirection = 'asc' | 'desc';
+
+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={`text-${align} ${isActive ? 'active' : ''}`}
+      onClick={() => onSort(field)}
+      role="columnheader"
+      aria-sort={isActive ? (currentDirection === 'desc' ? 'descending' : 'ascending') : 'none'}
+      style={{ cursor: 'pointer', userSelect: 'none', padding: '4px 8px' }}
+    >
+      {label}{arrow}
+    </th>
+  );
+}
+
+export function ComplexityDialog({ open, onOpenChange }: ComplexityDialogProps): React.ReactElement {
+  const [sortField, setSortField] = useState<SortField>('avg_cyclomatic_complexity');
+  const [sortDirection, setSortDirection] = useState<SortDirection>('desc');
+
+  const { data, isLoading, error, refresh } = useComplexity({});
+
+  useEffect(() => {
+    if (open) refresh();
+  }, [open, refresh]);
+
+  const handleSort = useCallback((field: SortField) => {
+    setSortField((prev) => {
+      if (prev === field) {
+        setSortDirection((d) => (d === 'desc' ? 'asc' : 'desc'));
+        return prev;
+      }
+      setSortDirection('desc');
+      return field;
+    });
+  }, []);
+
+  const sorted = useMemo(() => {
+    if (!data?.files) return [];
+    const items = [...data.files];
+    items.sort((a, b) => {
+      const aVal = a[sortField as keyof FileComplexity];
+      const bVal = b[sortField as keyof FileComplexity];
+      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;
+  }, [data, sortField, sortDirection]);
+
+  const renderContent = () => {
+    if (isLoading) {
+      return (
+        <div className="complexity-panel loading" data-testid="complexity-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" />
+          </div>
+        </div>
+      );
+    }
+
+    if (error) {
+      return (
+        <div className="complexity-panel error" data-testid="complexity-panel">
+          <div className="error-message">Error: {error.message}</div>
+          <Button variant="outline" size="sm" onClick={refresh}>Retry</Button>
+        </div>
+      );
+    }
+
+    if (!data) {
+      return (
+        <div className="complexity-panel" data-testid="complexity-panel">
+          <p>Click <strong>Analyze</strong> to run complexity analysis</p>
+        </div>
+      );
+    }
+
+    return (
+      <div className="complexity-panel" data-testid="complexity-panel">
+        <div className="complexity-summary" style={{ marginBottom: '8px' }}>
+          <span>{data.file_count} files analyzed</span>
+        </div>
+
+        <table className="complexity-table" role="table" style={{ width: '100%', borderCollapse: 'collapse' }}>
+          <thead>
+            <tr>
+              <SortableHeader label="Complexity" field="avg_cyclomatic_complexity" currentSort={sortField} currentDirection={sortDirection} onSort={handleSort} />
+              <SortableHeader label="Nesting" field="max_nesting_depth" currentSort={sortField} currentDirection={sortDirection} onSort={handleSort} />
+              <SortableHeader label="Longest Fn" field="longest_function" currentSort={sortField} currentDirection={sortDirection} onSort={handleSort} />
+              <SortableHeader label="Lines" field="total_lines" currentSort={sortField} currentDirection={sortDirection} onSort={handleSort} />
+              <SortableHeader label="Functions" field="function_count" currentSort={sortField} currentDirection={sortDirection} onSort={handleSort} />
+              <SortableHeader label="File" field="path" currentSort={sortField} currentDirection={sortDirection} onSort={handleSort} align="left" />
+            </tr>
+          </thead>
+          <tbody>
+            {sorted.map((f) => (
+              <tr key={f.path}>
+                <td className="text-right" style={{ padding: '4px 8px' }}>
+                  <Badge variant={f.avg_cyclomatic_complexity >= 7 ? 'destructive' : f.avg_cyclomatic_complexity >= 4 ? 'outline' : 'secondary'}>
+                    {Number(f.avg_cyclomatic_complexity).toFixed(1)}
+                  </Badge>
+                </td>
+                <td className="text-right" style={{ padding: '4px 8px' }}>{f.max_nesting_depth}</td>
+                <td className="text-right" style={{ padding: '4px 8px' }}>{f.longest_function}</td>
+                <td className="text-right" style={{ padding: '4px 8px' }}>{f.total_lines}</td>
+                <td className="text-right" style={{ padding: '4px 8px' }}>{f.function_count}</td>
+                <td className="text-left" style={{ padding: '4px 8px' }}>{f.path}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    );
+  };
+
+  return (
+    <ToolDialog
+      open={open}
+      onOpenChange={onOpenChange}
+      title="Complexity"
+      description="Cyclomatic complexity analysis"
+    >
+      {renderContent()}
+    </ToolDialog>
+  );
+}

package/src/public/components/dialogs/DependenciesDialog.tsx

@@ -0,0 +1,120 @@
+import React, { useEffect } from 'react';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Skeleton } from '@/components/ui/skeleton';
+import { ToolDialog } from './ToolDialog';
+import { useDependencies } from '../../hooks/useDependencies';
+
+export interface DependenciesDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+function severityVariant(severity: string): 'destructive' | 'outline' | 'secondary' {
+  if (severity === 'high' || severity === 'critical') return 'destructive';
+  if (severity === 'moderate') return 'outline';
+  return 'secondary';
+}
+
+export function DependenciesDialog({ open, onOpenChange }: DependenciesDialogProps): React.ReactElement {
+  const { data, isLoading, error, refresh } = useDependencies({});
+
+  useEffect(() => {
+    if (open) refresh();
+  }, [open, refresh]);
+
+  const renderContent = () => {
+    if (isLoading) {
+      return (
+        <div className="dependencies-panel loading" data-testid="dependencies-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" />
+          </div>
+        </div>
+      );
+    }
+
+    if (error) {
+      return (
+        <div className="dependencies-panel error" data-testid="dependencies-panel">
+          <div className="error-message">Error: {error.message}</div>
+          <Button variant="outline" size="sm" onClick={refresh}>Retry</Button>
+        </div>
+      );
+    }
+
+    if (!data) {
+      return (
+        <div className="dependencies-panel" data-testid="dependencies-panel">
+          <p>Click <strong>Analyze</strong> to check dependencies</p>
+        </div>
+      );
+    }
+
+    return (
+      <div className="dependencies-panel" data-testid="dependencies-panel">
+        {data.outdated.length > 0 && (
+          <div className="outdated-section" style={{ marginBottom: '16px' }}>
+            <h4>Outdated Packages ({data.outdated.length})</h4>
+            <table role="table" style={{ width: '100%', borderCollapse: 'collapse' }}>
+              <thead>
+                <tr>
+                  <th className="text-left" style={{ padding: '4px 8px' }}>Package</th>
+                  <th className="text-left" style={{ padding: '4px 8px' }}>Current</th>
+                  <th className="text-left" style={{ padding: '4px 8px' }}>Wanted</th>
+                  <th className="text-left" style={{ padding: '4px 8px' }}>Latest</th>
+                  <th className="text-left" style={{ padding: '4px 8px' }}>Type</th>
+                </tr>
+              </thead>
+              <tbody>
+                {data.outdated.map((pkg) => (
+                  <tr key={pkg.name}>
+                    <td style={{ padding: '4px 8px' }}>{pkg.name}</td>
+                    <td style={{ padding: '4px 8px' }}>{pkg.current}</td>
+                    <td style={{ padding: '4px 8px' }}>{pkg.wanted}</td>
+                    <td style={{ padding: '4px 8px' }}>{pkg.latest}</td>
+                    <td style={{ padding: '4px 8px' }}>{pkg.type}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+
+        {data.advisories.length > 0 && (
+          <div className="security-section">
+            <h4>Security Advisories</h4>
+            <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
+              {data.advisories.map((adv) => (
+                <div key={adv.severity} style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
+                  <Badge variant={severityVariant(adv.severity)}>
+                    {adv.severity}
+                  </Badge>
+                  <span>{adv.count}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {data.outdated.length === 0 && data.advisories.length === 0 && (
+          <p>All dependencies are up to date with no known vulnerabilities.</p>
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <ToolDialog
+      open={open}
+      onOpenChange={onOpenChange}
+      title="Dependencies"
+      description="Package staleness and security analysis"
+    >
+      {renderContent()}
+    </ToolDialog>
+  );
+}