@pennyfarthing/cyclist 10.0.2 → 10.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pennyfarthing/cyclist",
-  "version": "10.0.2",
+  "version": "10.1.0",
   "description": "Visual terminal interface for Claude Code",
   "author": "1898andCo",
   "type": "module",
@@ -19,7 +19,36 @@
     "src/public/",
     "portraits/"
   ],
+  "scripts": {
+    "dev": "npm run build && concurrently -k -n tsc,preload,vite,electron -c blue,cyan,magenta,green \"tsc --watch --preserveWatchOutput\" \"tsc -p tsconfig.preload.json --watch --preserveWatchOutput\" \"vite build --watch\" \"electron dist/main.js\"",
+    "dev:cdp": "npm run build && concurrently -k -n tsc,preload,vite,electron -c blue,cyan,magenta,green \"tsc --watch --preserveWatchOutput\" \"tsc -p tsconfig.preload.json --watch --preserveWatchOutput\" \"vite build --watch\" \"electron --remote-debugging-port=9222 dist/main.js\"",
+    "dev:once": "npm run build && electron dist/main.js",
+    "dev:web": "CYCLIST_ELECTRON_MODE= CYCLIST_DEV_WEB=1 CYCLIST_PROJECT_DIR=${CYCLIST_PROJECT_DIR:-$PWD} tsx watch src/server.ts",
+    "dev:server": "tsx watch src/server.ts",
+    "dev:debug": "CYCLIST_DEV_WEB=1 OTEL_DEBUG=true CYCLIST_PROJECT_DIR=${CYCLIST_PROJECT_DIR:-$PWD} node --inspect src/server.ts",
+    "dev:debug-brk": "CYCLIST_DEV_WEB=1 OTEL_DEBUG=true CYCLIST_PROJECT_DIR=${CYCLIST_PROJECT_DIR:-$PWD} node --inspect-brk src/server.ts",
+    "dev:electron-debug": "npm run build && concurrently -k -n tsc,preload,vite,electron -c blue,cyan,magenta,green \"tsc --watch --preserveWatchOutput\" \"tsc -p tsconfig.preload.json --watch --preserveWatchOutput\" \"vite build --watch\" \"electron --inspect=9229 dist/main.js\"",
+    "dev:vite": "vite --config vite.config.ts",
+    "build": "npm run build:commands && tsc --build && tsc -p tsconfig.preload.json && npm run build:react",
+    "build:react": "vite build",
+    "build:commands": "node scripts/generate-slash-commands.js",
+    "build:electron": "npm run build && electron-builder -c.npmRebuild=false",
+    "start": "node dist/server.js",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:e2e": "playwright test",
+    "test:e2e:web": "playwright test --project=web-chromium",
+    "test:e2e:ui": "playwright test --ui",
+    "test:e2e:debug": "playwright test --debug",
+    "test:e2e:trace": "playwright show-trace",
+    "prepack": "./scripts/copy-portraits.sh",
+    "install:app": "./scripts/install-app.sh",
+    "install:cli": "./scripts/install-cli.sh",
+    "install:all": "npm run install:app && npm run install:cli"
+  },
   "dependencies": {
+    "@pennyfarthing/core": "workspace:^",
+    "@pennyfarthing/shared": "workspace:^",
     "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-collapsible": "^1.1.12",
@@ -49,9 +78,7 @@
     "ws": "^8.19.0",
     "xterm": "^5.3.0",
     "xterm-addon-fit": "^0.8.0",
-    "yaml": "^2.8.2",
-    "@pennyfarthing/core": "^10.0.2",
-    "@pennyfarthing/shared": "^10.0.2"
+    "yaml": "^2.8.2"
   },
   "devDependencies": {
     "@electron/rebuild": "^3.6.0",
@@ -159,31 +186,5 @@
       ],
       "category": "Development"
     }
-  },
-  "scripts": {
-    "dev": "npm run build && concurrently -k -n tsc,preload,vite,electron -c blue,cyan,magenta,green \"tsc --watch --preserveWatchOutput\" \"tsc -p tsconfig.preload.json --watch --preserveWatchOutput\" \"vite build --watch\" \"electron dist/main.js\"",
-    "dev:cdp": "npm run build && concurrently -k -n tsc,preload,vite,electron -c blue,cyan,magenta,green \"tsc --watch --preserveWatchOutput\" \"tsc -p tsconfig.preload.json --watch --preserveWatchOutput\" \"vite build --watch\" \"electron --remote-debugging-port=9222 dist/main.js\"",
-    "dev:once": "npm run build && electron dist/main.js",
-    "dev:web": "CYCLIST_ELECTRON_MODE= CYCLIST_DEV_WEB=1 CYCLIST_PROJECT_DIR=${CYCLIST_PROJECT_DIR:-$PWD} tsx watch src/server.ts",
-    "dev:server": "tsx watch src/server.ts",
-    "dev:debug": "CYCLIST_DEV_WEB=1 OTEL_DEBUG=true CYCLIST_PROJECT_DIR=${CYCLIST_PROJECT_DIR:-$PWD} node --inspect src/server.ts",
-    "dev:debug-brk": "CYCLIST_DEV_WEB=1 OTEL_DEBUG=true CYCLIST_PROJECT_DIR=${CYCLIST_PROJECT_DIR:-$PWD} node --inspect-brk src/server.ts",
-    "dev:electron-debug": "npm run build && concurrently -k -n tsc,preload,vite,electron -c blue,cyan,magenta,green \"tsc --watch --preserveWatchOutput\" \"tsc -p tsconfig.preload.json --watch --preserveWatchOutput\" \"vite build --watch\" \"electron --inspect=9229 dist/main.js\"",
-    "dev:vite": "vite --config vite.config.ts",
-    "build": "npm run build:commands && tsc --build && tsc -p tsconfig.preload.json && npm run build:react",
-    "build:react": "vite build",
-    "build:commands": "node scripts/generate-slash-commands.js",
-    "build:electron": "npm run build && electron-builder -c.npmRebuild=false",
-    "start": "node dist/server.js",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "test:e2e": "playwright test",
-    "test:e2e:web": "playwright test --project=web-chromium",
-    "test:e2e:ui": "playwright test --ui",
-    "test:e2e:debug": "playwright test --debug",
-    "test:e2e:trace": "playwright show-trace",
-    "install:app": "./scripts/install-app.sh",
-    "install:cli": "./scripts/install-cli.sh",
-    "install:all": "npm run install:app && npm run install:cli"
   }
-}
+}

package/src/public/App.tsx

@@ -42,7 +42,6 @@ import {
   SettingsPanel,
   AuditLogPanel,
   TTYPanel,
-  HotspotsPanel,
 } from './components/panels';
 
 // =============================================================================
@@ -68,7 +67,6 @@ registerPanelComponent(PANEL_INVENTORY.AC, ACPanel);
 registerPanelComponent(PANEL_INVENTORY.TODO, TodoPanel);
 registerPanelComponent(PANEL_INVENTORY.BACKGROUND, BackgroundPanel);
 registerPanelComponent(PANEL_INVENTORY.GIT, GitPanel);
-registerPanelComponent(PANEL_INVENTORY.HOTSPOTS, HotspotsPanel);
 registerPanelComponent(PANEL_INVENTORY.SETTINGS, SettingsPanel);
 
 // =============================================================================

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/ControlBar.tsx

@@ -16,6 +16,7 @@
  */
 
 import React, { useEffect, useRef, useCallback, useState, FocusEvent } from 'react';
+import { BellRing, Zap, RotateCcw } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { useClaudeContext } from '../contexts/ClaudeContext';
@@ -149,7 +150,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 +169,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 +188,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>

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`;
+}

package/src/public/components/DockviewWorkspace.tsx

@@ -49,7 +49,6 @@ export const PANEL_INVENTORY = {
   TODO: 'todo',
   BACKGROUND: 'background',
   GIT: 'git',
-  HOTSPOTS: 'hotspots',
   SETTINGS: 'settings',
 } as const;
 
@@ -91,7 +90,6 @@ export const RIGHT_SIDEBAR_PANELS = [
   PANEL_INVENTORY.TODO,
   PANEL_INVENTORY.BACKGROUND,
   PANEL_INVENTORY.GIT,
-  PANEL_INVENTORY.HOTSPOTS,
   PANEL_INVENTORY.SETTINGS,
 ] as const;
 
@@ -109,7 +107,6 @@ const PANEL_TITLES: Record<string, string> = {
   todo: 'Todo',
   background: 'Subagents',
   git: 'Git',
-  hotspots: 'Hotspots',
   settings: 'Settings',
 };
 

package/src/public/components/FullFileTree.tsx

@@ -93,15 +93,29 @@ function TreeDirectoryNode({
   cache: Record<string, DirectoryEntry[]>;
   loading: Set<string>;
 }): React.ReactElement {
-  const [isOpen, setIsOpen] = useState(false);
-  const children = cache[entry.path];
-  const isLoading = loading.has(entry.path);
-
   // Check if this directory contains any changed files
   const hasChanges = Array.from(changedFiles.keys()).some(
     (filePath) => filePath.startsWith(entry.path + '/')
   );
 
+  const [isOpen, setIsOpen] = useState(hasChanges);
+  const children = cache[entry.path];
+  const isLoading = loading.has(entry.path);
+
+  // Auto-fetch children when directory has changes and is opened by default
+  useEffect(() => {
+    if (hasChanges && !children && !loading.has(entry.path)) {
+      fetchDirectory(entry.path);
+    }
+  }, [hasChanges, children, entry.path, fetchDirectory, loading]);
+
+  // Auto-open when changes appear in this directory
+  useEffect(() => {
+    if (hasChanges) {
+      setIsOpen(true);
+    }
+  }, [hasChanges]);
+
   const handleToggle = useCallback(() => {
     const willOpen = !isOpen;
     setIsOpen(willOpen);