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
   },
 

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