From 5faa654b7b7b47ddacbf24bb42ded707943f3715 Mon Sep 17 00:00:00 2001
From: chihlasm <michael@chihlas.com>
Date: Sun, 15 Mar 2026 15:46:27 -0400
Subject: [PATCH] feat: real-time sidebar stats via session-changed events

Sidebar now refreshes stats when sessions are created or completed,
not just on page navigation. Uses window event bus pattern (same as
folder-changed events in codebase).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/src/api/sessions.ts               |  2 ++
 frontend/src/components/layout/Sidebar.tsx | 16 +++++++++++++---
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/frontend/src/api/sessions.ts b/frontend/src/api/sessions.ts
index 1895d562..18c08910 100644
--- a/frontend/src/api/sessions.ts
+++ b/frontend/src/api/sessions.ts
@@ -31,6 +31,7 @@ export const sessionsApi = {
 
   async create(data: SessionCreate): Promise<Session> {
     const response = await apiClient.post<Session>('/sessions', data)
+    window.dispatchEvent(new Event('session-changed'))
     return response.data
   },
 
@@ -41,6 +42,7 @@ export const sessionsApi = {
 
   async complete(id: string, data: SessionComplete): Promise<Session> {
     const response = await apiClient.post<Session>(`/sessions/${id}/complete`, data)
+    window.dispatchEvent(new Event('session-changed'))
     return response.data
   },
 
diff --git a/frontend/src/components/layout/Sidebar.tsx b/frontend/src/components/layout/Sidebar.tsx
index 1bda0fb1..2baaf3d0 100644
--- a/frontend/src/components/layout/Sidebar.tsx
+++ b/frontend/src/components/layout/Sidebar.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { useLocation } from 'react-router-dom'
 import {
   LayoutGrid, Network, Wrench, Clock, FileOutput, BarChart3,
@@ -37,10 +37,20 @@ export function Sidebar() {
 
   const [stats, setStats] = useState<SidebarStatsResponse | null>(null)
 
+  const refreshStats = useCallback(() => {
+    sidebarApi.getStats().then(setStats).catch(() => {})
+  }, [])
+
   // Fetch sidebar stats — refreshes on navigation
   useEffect(() => {
-    sidebarApi.getStats().then(setStats).catch(() => {})
-  }, [location.pathname])
+    refreshStats()
+  }, [location.pathname, refreshStats])
+
+  // Refresh when sessions are created or completed
+  useEffect(() => {
+    window.addEventListener('session-changed', refreshStats)
+    return () => window.removeEventListener('session-changed', refreshStats)
+  }, [refreshStats])
 
   const handleSidebarWheel = (e: React.WheelEvent<HTMLElement>) => {
     const sidebar = e.currentTarget