@pennyfarthing/cyclist 10.0.3 → 10.2.0

package/src/public/components/AgentLoadDialog.tsx

@@ -0,0 +1,202 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import { Button } from '@/components/ui/button';
+import { Progress } from '@/components/ui/progress';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@/components/ui/collapsible';
+import { ToolDialog } from './dialogs/ToolDialog';
+import { ConfirmDialog, useConfirmDialog } from './ConfirmDialog';
+import { useAgentLoad } from '../hooks/useAgentLoad.js';
+import type { AgentLoadEntry } from '../hooks/useAgentLoad.js';
+import { formatComponentName } from './panels/DebugPanel';
+
+const SIDECAR_FILES = ['patterns.md', 'gotchas.md', 'decisions.md'] as const;
+
+export interface AgentLoadDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function AgentLoadDialog({ isOpen, onClose }: AgentLoadDialogProps): React.ReactElement {
+  const { data, isLoading, error, refresh, pruneSidecar, pruneResult } = useAgentLoad();
+  const [expandedAgent, setExpandedAgent] = useState<string | null>(null);
+  const [pendingPrune, setPendingPrune] = useState<{ agent: string; file: string } | null>(null);
+
+  const { confirm, dialogProps } = useConfirmDialog({
+    title: 'Clear Sidecar',
+    message: pendingPrune
+      ? `Reset ${pendingPrune.file} for ${pendingPrune.agent}? This will replace the sidecar with its default template.`
+      : '',
+    confirmLabel: 'Confirm',
+    isDanger: true,
+  });
+
+  useEffect(() => {
+    if (isOpen) {
+      refresh();
+    }
+  }, [isOpen, refresh]);
+
+  const sortedAgents = useMemo(() => {
+    if (!data) return [];
+    return [...data.agents].sort((a, b) => (b.totalTokens ?? 0) - (a.totalTokens ?? 0));
+  }, [data]);
+
+  const maxTokens = useMemo(() => {
+    if (!sortedAgents.length) return 0;
+    return sortedAgents[0]?.totalTokens ?? 0;
+  }, [sortedAgents]);
+
+  const handleRowClick = (agent: string) => {
+    setExpandedAgent((prev) => (prev === agent ? null : agent));
+  };
+
+  const handleClear = async (agent: string, file: string) => {
+    setPendingPrune({ agent, file });
+    const confirmed = await confirm();
+    if (confirmed) {
+      await pruneSidecar(agent, file);
+    }
+    setPendingPrune(null);
+  };
+
+  const renderAgentRow = (entry: AgentLoadEntry) => {
+    const tokens = entry.totalTokens ?? 0;
+    const progressValue = maxTokens > 0 ? (tokens / maxTokens) * 100 : 0;
+    const isExpanded = expandedAgent === entry.agent;
+    // Color by token threshold: <3k green, <5k orange, >=5k red
+    const barColor = tokens >= 5000
+      ? 'bg-[var(--status-error,#f14c4c)]'
+      : tokens >= 3000
+        ? 'bg-[var(--status-warning,#cca700)]'
+        : 'bg-[var(--status-success,#4ec9b0)]';
+
+    return (
+      <Collapsible
+        key={entry.agent}
+        open={isExpanded}
+        onOpenChange={() => handleRowClick(entry.agent)}
+      >
+        <CollapsibleTrigger asChild>
+          <div
+            className="px-4 py-2 cursor-pointer hover:bg-muted/50 rounded-md transition-colors"
+            data-testid={`agent-row-${entry.agent}`}
+          >
+            <div className="flex items-center justify-between mb-1">
+              <span className="font-mono text-sm font-medium">{entry.agent}</span>
+              <span className="font-mono text-sm tabular-nums text-text-secondary">
+                {tokens.toLocaleString()}
+              </span>
+            </div>
+            <Progress
+              value={progressValue}
+              className="h-2.5 bg-[var(--border)]"
+              indicatorClassName={barColor}
+            />
+          </div>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <div className="mx-4 mb-3 rounded-md bg-muted/30 p-3 space-y-1">
+            {entry.components && entry.components.length > 0 ? (
+              entry.components.map((comp) => (
+                <div key={comp.name} className="flex items-center justify-between text-xs text-text-secondary">
+                  <span>{formatComponentName(comp.name)}</span>
+                  <span className="tabular-nums">{comp.tokens.toLocaleString()}</span>
+                </div>
+              ))
+            ) : (
+              <div className="text-xs text-text-secondary">No component breakdown available</div>
+            )}
+            <div className="pt-2 border-t border-muted/50 mt-2">
+              <div className="text-xs font-medium mb-1.5 text-text-secondary">Sidecars</div>
+              <div className="flex gap-2">
+                {SIDECAR_FILES.map((file) => (
+                  <Button
+                    key={file}
+                    variant="ghost"
+                    size="sm"
+                    className="text-xs h-6"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      handleClear(entry.agent, file);
+                    }}
+                  >
+                    Clear {file}
+                  </Button>
+                ))}
+              </div>
+            </div>
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+    );
+  };
+
+  const renderContent = () => {
+    if (isLoading) {
+      return (
+        <div className="space-y-3 p-4">
+          {Array.from({ length: 5 }).map((_, i) => (
+            <div key={i} data-testid={`skeleton-${i}`} className="space-y-1.5 px-4">
+              <div className="flex justify-between">
+                <Skeleton className="h-4 w-24" />
+                <Skeleton className="h-4 w-16" />
+              </div>
+              <Skeleton className="h-2.5 w-full rounded-full" />
+            </div>
+          ))}
+        </div>
+      );
+    }
+
+    if (error) {
+      return (
+        <div className="p-4 space-y-3">
+          <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>
+          <div className="text-center">
+            <Button variant="outline" size="sm" onClick={refresh}>
+              Retry
+            </Button>
+          </div>
+        </div>
+      );
+    }
+
+    if (!data) return null;
+
+    return (
+      <div className="space-y-0.5">
+        {pruneResult?.success && pruneResult.tokensFreed != null && (
+          <div className="text-xs text-green-600 px-4 py-1">
+            Freed {pruneResult.tokensFreed.toLocaleString()} tokens from {pruneResult.agent}/{pruneResult.file}
+          </div>
+        )}
+        <div className="flex items-center justify-between px-4 py-2">
+          <span data-testid="cached-at" className="text-xs text-[var(--text-muted)]">
+            Cached: {new Date(data.cachedAt).toLocaleString()}
+          </span>
+          <Button variant="ghost" size="sm" className="text-xs h-6 text-[var(--text-muted)] hover:text-[var(--text-primary)]" onClick={refresh}>
+            Refresh
+          </Button>
+        </div>
+        {sortedAgents.map((entry) => renderAgentRow(entry))}
+      </div>
+    );
+  };
+
+  return (
+    <>
+      <ToolDialog
+        open={isOpen}
+        onOpenChange={(open) => { if (!open) onClose(); }}
+        title="Agent Load Analysis"
+        description="Token usage breakdown for all agents"
+        className="max-w-2xl"
+      >
+        {renderContent()}
+      </ToolDialog>
+      <ConfirmDialog {...dialogProps} />
+    </>
+  );
+}

package/src/public/components/AgentPopup.tsx

@@ -183,11 +183,9 @@ export function AgentPopup({ isOpen, onClose, currentRole, currentTheme }: Agent
             <div className="agent-popup-header">
               <h2 id="agent-popup-title" className="agent-popup-theme">
                 {themeData.themeName}
-                {themeData.tier && (
-                  <Badge variant="secondary" className={`tier-badge tier-${themeData.tier.toLowerCase()}`}>
-                    {themeData.tier}
-                  </Badge>
-                )}
+                <Badge variant="secondary" className={`tier-badge ${themeData.tier ? `tier-${themeData.tier.toLowerCase()}` : 'tier-unranked'}`}>
+                  {themeData.tier || 'Unranked'}
+                </Badge>
               </h2>
               <Button
                 variant="ghost"

package/src/public/components/ContextSparkline.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+
+export interface SparklinePoint {
+  percent: number;
+  tokens: number;
+  timestamp: number;
+}
+
+export interface ContextSparklineProps {
+  history: SparklinePoint[];
+}
+
+function getBarColor(tokens: number): string {
+  if (tokens >= 50000) return 'var(--color-danger, #ef4444)';
+  if (tokens >= 5000) return 'var(--color-warning, #f59e0b)';
+  return 'var(--color-success, #22c55e)';
+}
+
+export function ContextSparkline({ history }: ContextSparklineProps): React.ReactElement | null {
+  if (history.length < 2) return null;
+
+  const W = 200;
+  const H = 32;
+  const PAD = 2;
+  const usable = H - PAD * 2;
+  const latest = history[history.length - 1];
+  const barWidth = W / history.length;
+
+  return (
+    <div className="context-sparkline" data-testid="context-sparkline">
+      <svg
+        viewBox={`0 0 ${W} ${H}`}
+        role="img"
+        aria-label={`Context usage trend: currently ${latest.percent}%`}
+      >
+        {history.map((p, i) => {
+          const barHeight = Math.max(1, (p.percent / 100) * usable);
+          const x = i * barWidth;
+          const y = PAD + usable - barHeight;
+          return (
+            <rect
+              key={i}
+              x={x}
+              y={y}
+              width={barWidth}
+              height={barHeight}
+              fill={getBarColor(p.tokens)}
+              opacity={0.8}
+              rx={0.5}
+            />
+          );
+        })}
+      </svg>
+    </div>
+  );
+}

package/src/public/components/ControlBar.tsx

@@ -1,14 +1,16 @@
 /**
  * ControlBar Component
  *
- * Provides Stop, Reset, Bell Mode, and Relay Mode controls for Claude sessions.
+ * Provides Stop, Reset, Bell Mode, Relay Mode, and Agent Quick Picker controls.
  * Story MSSCI-12729 - Stop/Reset Controls and Escape Key
  * Story MSSCI-12275 - Bell Mode toggle
  * Story MSSCI-12395 - Relay Mode toggle
+ * Story MSSCI-14762 - Quick agent picker in control bar
  *
  * Features:
  * - Stop button visible only when Claude is running
  * - Reset button always visible
+ * - Agent quick picker (lightweight dropdown for rapid agent switching)
  * - Bell mode toggle (inject queued messages via PostToolUse hook)
  * - Relay mode toggle (auto-handoff to next agent)
  * - Escape key handler for stopping (single press = interrupt, double = force kill)
@@ -16,6 +18,7 @@
  */
 
 import React, { useEffect, useRef, useCallback, useState, FocusEvent } from 'react';
+import { BellRing, Zap, RotateCcw, UserCog } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { useClaudeContext } from '../contexts/ClaudeContext';
@@ -40,6 +43,123 @@ function useFocusTracking() {
   return { handleFocus, handleBlur, isFocused };
 }
 
+// =============================================================================
+// Agent Quick Picker
+// =============================================================================
+
+interface ThemeAgent {
+  role: string;
+  character: string;
+  slug: string;
+}
+
+interface ThemeData {
+  agents: ThemeAgent[];
+}
+
+function AgentQuickPicker({ currentAgent, onAgentSwitch }: { currentAgent: string | null; onAgentSwitch?: (role: string) => void }): React.ReactElement {
+  const [isOpen, setIsOpen] = useState(false);
+  const [agents, setAgents] = useState<ThemeAgent[]>([]);
+  const pickerRef = useRef<HTMLDivElement>(null);
+
+  // Fetch agent list on mount
+  useEffect(() => {
+    fetch('/api/theme-agents/full')
+      .then(res => res.ok ? res.json() : null)
+      .then((data: ThemeData | null) => {
+        if (data?.agents) {
+          setAgents(data.agents);
+        }
+      })
+      .catch(() => {});
+  }, []);
+
+  // Close on outside click
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const handleMouseDown = (e: MouseEvent) => {
+      if (pickerRef.current && !pickerRef.current.contains(e.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleMouseDown);
+    return () => document.removeEventListener('mousedown', handleMouseDown);
+  }, [isOpen]);
+
+  // Close on Escape
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.stopPropagation();
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown, true);
+    return () => document.removeEventListener('keydown', handleKeyDown, true);
+  }, [isOpen]);
+
+  const handleAgentClick = useCallback((agent: ThemeAgent) => {
+    if (agent.role === currentAgent) return;
+    onAgentSwitch?.(agent.role);
+    setIsOpen(false);
+  }, [currentAgent, onAgentSwitch]);
+
+  return (
+    <div className="agent-quick-picker-wrapper" ref={pickerRef}>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            variant="ghost"
+            size="icon"
+            type="button"
+            className={`btn-toggle agent-picker-toggle ${isOpen ? 'active' : ''}`}
+            data-testid="agent-quick-picker"
+            onClick={() => setIsOpen(prev => !prev)}
+            aria-label="Switch agent"
+            aria-expanded={isOpen}
+            aria-haspopup="listbox"
+          >
+            <UserCog className="h-4 w-4" />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>Switch Agent</TooltipContent>
+      </Tooltip>
+
+      {isOpen && (
+        <div
+          className="agent-quick-picker-dropdown"
+          data-testid="agent-quick-picker-dropdown"
+          role="listbox"
+          aria-label="Available agents"
+        >
+          {agents.map(agent => {
+            const isCurrent = agent.role === currentAgent;
+            return (
+              <div
+                key={agent.role}
+                className={`agent-quick-picker-option ${isCurrent ? 'current' : ''}`}
+                data-testid={`agent-option-${agent.role}`}
+                role="option"
+                aria-selected={isCurrent}
+                aria-label={`${agent.role} (${agent.character})`}
+                title={agent.character}
+                onClick={() => handleAgentClick(agent)}
+              >
+                <span className="agent-option-role">{agent.role}</span>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
+
 // =============================================================================
 // Types
 // =============================================================================
@@ -69,6 +189,8 @@ export interface ControlBarProps {
   currentAgent?: string | null;
   /** Called when TirePump button clicked */
   onTirePump?: () => void;
+  /** Called when agent is selected from quick picker */
+  onAgentSwitch?: (role: string) => void;
 }
 
 // =============================================================================
@@ -88,6 +210,7 @@ export function ControlBar({
   contextPercent = 0,
   currentAgent = null,
   onTirePump,
+  onAgentSwitch,
 }: ControlBarProps): React.ReactElement {
   const lastEscapeTime = useRef<number>(0);
   const DOUBLE_PRESS_THRESHOLD = 500; // ms
@@ -134,8 +257,11 @@ export function ControlBar({
   return (
     <TooltipProvider delayDuration={300}>
       <div className="control-bar" data-testid="control-bar">
-        {/* Mode toggles - Bell and Relay */}
+        {/* Mode toggles - Agent Picker, Bell, and Relay */}
         <div className="control-bar-toggles">
+          {/* Agent Quick Picker */}
+          <AgentQuickPicker currentAgent={currentAgent} onAgentSwitch={onAgentSwitch} />
+
           {/* Bell Mode Toggle */}
           <Tooltip>
             <TooltipTrigger asChild>
@@ -149,7 +275,7 @@ export function ControlBar({
                 aria-pressed={bellMode}
                 aria-label="Bell mode - inject queued messages via hook"
               >
-                <span className="toggle-icon">🔔</span>
+                <BellRing className="h-4 w-4" />
               </Button>
             </TooltipTrigger>
             <TooltipContent>Bell Mode: Inject queued messages during tool use (Cmd+B)</TooltipContent>
@@ -168,7 +294,7 @@ export function ControlBar({
                 aria-pressed={relayMode}
                 aria-label="Relay mode - auto-handoff to next agent"
               >
-                <span className="toggle-icon">✋</span>
+                <Zap className="h-4 w-4" />
               </Button>
             </TooltipTrigger>
             <TooltipContent>Relay Mode: Auto-handoff to next agent (Cmd+4)</TooltipContent>
@@ -187,7 +313,7 @@ export function ControlBar({
                 disabled={!currentAgent}
                 aria-label="TirePump: Clear context and reload agent"
               >
-                <span className="toggle-icon">⬆️</span>
+                <RotateCcw className="h-4 w-4" />
               </Button>
             </TooltipTrigger>
             <TooltipContent>{currentAgent ? `TirePump: Clear context (${contextPercent}%) and reload ${currentAgent}` : 'TirePump: No agent loaded'}</TooltipContent>
@@ -265,6 +391,8 @@ interface UseControlBarResult {
   handleRelayModeChange: (enabled: boolean) => void;
   /** Handle TirePump action */
   handleTirePump: () => void;
+  /** Handle agent switch from quick picker */
+  handleAgentSwitch: (role: string) => void;
 }
 
 export function useControlBar(): UseControlBarResult {
@@ -276,7 +404,7 @@ export function useControlBar(): UseControlBarResult {
   const [currentAgent, setCurrentAgent] = useState<string | null>(null);
 
   // Claude context for WebSocket communication
-  const { abort, clear, clearAndReload, onMessage, onComplete, onError, isConnected } = useClaudeContext();
+  const { abort, clear, clearAndReload, send, onMessage, onComplete, onError, isConnected } = useClaudeContext();
 
   // Load initial settings and listen for changes (using REST/WebSocket, not IPC)
   useEffect(() => {
@@ -483,6 +611,11 @@ export function useControlBar(): UseControlBarResult {
     }
   }, [currentAgent, clearAndReload]);
 
+  // Agent quick picker: send /{role} command
+  const handleAgentSwitch = useCallback((role: string) => {
+    send(`/${role}`);
+  }, [send]);
+
   return {
     isRunning,
     isStopping,
@@ -496,6 +629,7 @@ export function useControlBar(): UseControlBarResult {
     handleBellModeChange,
     handleRelayModeChange,
     handleTirePump,
+    handleAgentSwitch,
   };
 }
 

package/src/public/components/DeadCodeDialog.tsx

@@ -0,0 +1,169 @@
+import React, { useState, useMemo, useCallback, useEffect } from 'react';
+import {
+  Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription,
+} from '@/components/ui/dialog';
+import { Badge } from '@/components/ui/badge';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { cn } from '@/lib/utils';
+import { useDeadCode, type StaleFile, type UnusedExport } from '@/hooks/useDeadCode';
+
+export interface DeadCodeDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  days?: number;
+  repo?: string;
+}
+
+type TabId = 'stale' | 'exports';
+type SortDir = 'asc' | 'desc';
+
+export function DeadCodeDialog({ isOpen, onClose, days = 180, repo }: DeadCodeDialogProps) {
+  const { data, isLoading, error, refresh } = useDeadCode({ days, repo, layer: 'all' });
+  const [activeTab, setActiveTab] = useState<TabId>('stale');
+  const [staleSortField, setStaleSortField] = useState<keyof StaleFile>('days_since_last_commit');
+  const [staleSortDir, setStaleSortDir] = useState<SortDir>('desc');
+  const [exportSortField, setExportSortField] = useState<keyof UnusedExport>('file');
+  const [exportSortDir, setExportSortDir] = useState<SortDir>('asc');
+
+  useEffect(() => {
+    if (isOpen) refresh();
+  }, [isOpen, refresh]);
+
+  const handleStaleSort = useCallback((field: keyof StaleFile) => {
+    setStaleSortDir(prev => staleSortField === field && prev === 'desc' ? 'asc' : 'desc');
+    setStaleSortField(field);
+  }, [staleSortField]);
+
+  const handleExportSort = useCallback((field: keyof UnusedExport) => {
+    setExportSortDir(prev => exportSortField === field && prev === 'desc' ? 'asc' : 'desc');
+    setExportSortField(field);
+  }, [exportSortField]);
+
+  const staleCount = data?.stale_file_count ?? data?.stale_files?.length ?? 0;
+  const exportCount = data?.unused_export_count ?? data?.unused_exports?.length ?? 0;
+
+  const sortedStaleFiles = useMemo(() => {
+    const files = [...(data?.stale_files || [])];
+    files.sort((a, b) => {
+      const aVal = a[staleSortField];
+      const bVal = b[staleSortField];
+      if (typeof aVal === 'number' && typeof bVal === 'number') {
+        return staleSortDir === 'asc' ? aVal - bVal : bVal - aVal;
+      }
+      const aStr = String(aVal);
+      const bStr = String(bVal);
+      return staleSortDir === 'asc' ? aStr.localeCompare(bStr) : bStr.localeCompare(aStr);
+    });
+    return files;
+  }, [data?.stale_files, staleSortField, staleSortDir]);
+
+  const sortedExports = useMemo(() => {
+    const exports = [...(data?.unused_exports || [])];
+    exports.sort((a, b) => {
+      const aVal = a[exportSortField];
+      const bVal = b[exportSortField];
+      if (typeof aVal === 'number' && typeof bVal === 'number') {
+        return exportSortDir === 'asc' ? aVal - bVal : bVal - aVal;
+      }
+      const aStr = String(aVal);
+      const bStr = String(bVal);
+      return exportSortDir === 'asc' ? aStr.localeCompare(bStr) : bStr.localeCompare(aStr);
+    });
+    return exports;
+  }, [data?.unused_exports, exportSortField, exportSortDir]);
+
+  return (
+    <Dialog open={isOpen} onOpenChange={(open) => { if (!open) onClose(); }}>
+      <DialogContent className="max-w-4xl max-h-[80vh]">
+        <DialogHeader>
+          <DialogTitle>Dead Code Analysis</DialogTitle>
+          <DialogDescription>
+            Diagnostic report — files and exports with no recent activity.
+          </DialogDescription>
+        </DialogHeader>
+
+        {/* Tab bar */}
+        <div className="flex gap-4 border-b border-[var(--border)]">
+          <button
+            onClick={() => setActiveTab('stale')}
+            className={cn('pb-2 text-sm', activeTab === 'stale' ? 'border-b-2 border-[var(--accent)] text-[var(--text-primary)] font-medium' : 'text-[var(--text-muted)]')}
+          >
+            Stale Files <Badge variant="secondary" className="ml-1">{staleCount}</Badge>
+          </button>
+          <button
+            onClick={() => setActiveTab('exports')}
+            className={cn('pb-2 text-sm', activeTab === 'exports' ? 'border-b-2 border-[var(--accent)] text-[var(--text-primary)] font-medium' : 'text-[var(--text-muted)]')}
+          >
+            Unused Exports <Badge variant="secondary" className="ml-1">{exportCount}</Badge>
+          </button>
+        </div>
+
+        {/* Content area */}
+        <ScrollArea className="h-[50vh]">
+          {isLoading && <div className="text-center py-12 text-[var(--text-muted)]">Analyzing...</div>}
+          {error && (
+            <div className="m-4 p-4 rounded border border-[var(--status-error)]/20 bg-[var(--status-error)]/5 text-[var(--status-error)] text-sm">
+              {error.message}
+            </div>
+          )}
+          {data && activeTab === 'stale' && (
+            sortedStaleFiles.length === 0 ? (
+              <div className="text-center py-12 text-[var(--text-muted)]">No stale files found</div>
+            ) : (
+              <table className="w-full text-sm">
+                <thead>
+                  <tr role="row" className="border-b border-[var(--border)]">
+                    <th className="text-left pb-2 cursor-pointer select-none text-xs font-medium uppercase tracking-wider text-[var(--text-muted)]" onClick={() => handleStaleSort('path')}>File</th>
+                    <th className="text-right pb-2 cursor-pointer select-none text-xs font-medium uppercase tracking-wider text-[var(--text-muted)]" onClick={() => handleStaleSort('days_since_last_commit')}>Days Stale</th>
+                    <th className="text-right pb-2 cursor-pointer select-none text-xs font-medium uppercase tracking-wider text-[var(--text-muted)]" onClick={() => handleStaleSort('size_bytes')}>Size</th>
+                    <th className="text-left pb-2 cursor-pointer select-none text-xs font-medium uppercase tracking-wider text-[var(--text-muted)]" onClick={() => handleStaleSort('last_commit_date')}>Last Commit</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {sortedStaleFiles.map((file) => (
+                    <tr key={file.path} role="row" className="text-[var(--text-primary)]">
+                      <td className="py-1.5 font-mono text-xs">{file.path}</td>
+                      <td className="py-1.5 text-right tabular-nums font-mono">{file.days_since_last_commit}</td>
+                      <td className="py-1.5 text-right tabular-nums font-mono">{formatBytes(file.size_bytes)}</td>
+                      <td className="py-1.5">{file.last_commit_date ? new Date(file.last_commit_date).toLocaleDateString() : '—'}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            )
+          )}
+          {data && activeTab === 'exports' && (
+            sortedExports.length === 0 ? (
+              <div className="text-center py-12 text-[var(--text-muted)]">No unused exports found</div>
+            ) : (
+              <table className="w-full text-sm">
+                <thead>
+                  <tr role="row" className="border-b border-[var(--border)]">
+                    <th className="text-left pb-2 cursor-pointer select-none text-xs font-medium uppercase tracking-wider text-[var(--text-muted)]" onClick={() => handleExportSort('file')}>File</th>
+                    <th className="text-left pb-2 cursor-pointer select-none text-xs font-medium uppercase tracking-wider text-[var(--text-muted)]" onClick={() => handleExportSort('symbol')}>Export</th>
+                    <th className="text-right pb-2 cursor-pointer select-none text-xs font-medium uppercase tracking-wider text-[var(--text-muted)]" onClick={() => handleExportSort('line')}>Line</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {sortedExports.map((exp) => (
+                    <tr key={`${exp.file}:${exp.symbol}`} role="row" className="text-[var(--text-primary)]">
+                      <td className="py-1.5 font-mono text-xs">{exp.file}</td>
+                      <td className="py-1.5">{exp.symbol}</td>
+                      <td className="py-1.5 text-right tabular-nums font-mono">{exp.line}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            )
+          )}
+        </ScrollArea>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function formatBytes(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}