feat(ui): add Activity lens for realtime file activity visualization (#7)

- Add lens-based UI shell with Live/Activity tabs (LensSwitcher)
  rendered between TopBar and the existing ResizablePanelGroup; Live
  lens is hidden via display:none rather than unmounted so SSE, hooks,
  and resizable refs remain intact across lens switches.
- Add Activity lens: file-centric bubble graph with d3-force layout
  (60-tick burst with prevPositions seed), node-centric top-3 co-change
  edges, 3-second highlight on commit-driven changes (green for new,
  blue for updates, red + strikethrough for deletes), external labels
  below each bubble for full filename visibility, and responsive
  container sizing via ResizeObserver.
- Extend RealtimeAlert with optional confidence/evidence fields and
  add RepoView<T> + buildRepoView() wrapper to separate observed facts
  from derived UI data.
- Add @xyflow/react and d3-force dependencies.

Author: simota

apps/ui/package.json

@@ -39,10 +39,12 @@
     "@radix-ui/react-toggle": "1.1.2",
     "@radix-ui/react-toggle-group": "1.1.2",
     "@radix-ui/react-tooltip": "1.1.8",
+    "@xyflow/react": "^12.10.2",
     "canvas-confetti": "1.9.4",
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
     "cmdk": "1.1.1",
+    "d3-force": "^3.0.0",
     "date-fns": "3.6.0",
     "embla-carousel-react": "8.6.0",
     "input-otp": "1.4.2",
@@ -69,6 +71,7 @@
   },
   "devDependencies": {
     "@tailwindcss/vite": "4.1.12",
+    "@types/d3-force": "^3.0.10",
     "@types/prismjs": "^1.26.6",
     "@vitejs/plugin-react": "4.7.0",
     "tailwindcss": "4.1.12",

apps/ui/src/app/App.tsx

@@ -6,6 +6,8 @@ import { CommitTimeline } from "./components/refscope/CommitTimeline";
 import { DetailPanel } from "./components/refscope/DetailPanel";
 import { CommandPalette } from "./components/refscope/CommandPalette";
 import { FileHistoryView } from "./components/refscope/FileHistoryView";
+import { LensSwitcher, type LensId } from "./components/refscope/LensSwitcher";
+import { ActivityLens } from "./components/refscope/ActivityLens";
 import {
   FileHistoryPrompt,
   validatePath,
@@ -123,6 +125,8 @@ function persistRecentFileHistoryPaths(paths: string[]): void {
 }
 
 export default function App() {
+  // Lens switcher state — 'live' is the default; other lenses are placeholders.
+  const [activeLens, setActiveLens] = useState<LensId>('live');
   const [repositories, setRepositories] = useState<Repository[]>([]);
   const [refs, setRefs] = useState<GitRef[]>([]);
   const [commits, setCommits] = useState<Commit[]>([]);
@@ -1085,7 +1089,21 @@ export default function App() {
         workTreeAvailable={Boolean(selectedRepo)}
         onOpenFileHistory={openFileHistoryPrompt}
       />
+      <LensSwitcher activeLens={activeLens} onLensChange={setActiveLens} />
+      {activeLens === 'activity' && (
+        <div className="flex-1 overflow-hidden" id="lens-panel-activity" role="tabpanel" aria-labelledby="lens-tab-activity">
+          <ActivityLens
+            repoId={selectedRepo || null}
+            commits={commits}
+            selectedCommitHash={selected || null}
+            onSelectCommit={(hash) => { setSelected(hash); }}
+          />
+        </div>
+      )}
+      {/* Live lens: render the full existing layout. Hidden (not unmounted) when inactive
+          so that SSE subscriptions, hooks, and resizable-panel refs stay alive. */}
       <ResizablePanelGroup
+        style={{ display: activeLens === 'live' ? undefined : 'none' }}
         direction="horizontal"
         className="flex flex-1 overflow-hidden"
         onLayout={(layout) => {