Fix SSE route dependency and align architecture docs

frontend/src/contexts/AppContext.tsx

@@ -1,21 +1,6 @@
-import { createContext, useContext, useState, type ReactNode } from 'react';
+import { useState, type ReactNode } from 'react';
 
-type TabId = 'docs' | 'compliance' | 'status' | 'rag';
-
-interface AppContextValue {
-  activeTab: TabId;
-  setActiveTab: (tab: TabId) => void;
-}
-
-const AppContext = createContext<AppContextValue | undefined>(undefined);
-
-export const useApp = (): AppContextValue => {
-  const context = useContext(AppContext);
-  if (!context) {
-    throw new Error('useApp must be used within an AppProvider');
-  }
-  return context;
-};
+import { AppContext, type TabId } from './app-context';
 
 interface AppProviderProps {
   children: ReactNode;
@@ -29,4 +14,4 @@ export const AppProvider: React.FC<AppProviderProps> = ({ children }) => {
       {children}
     </AppContext.Provider>
   );
-};
+};

frontend/src/contexts/ThemeContext.tsx

@@ -1,22 +1,7 @@
-import React, { createContext, useContext, useState, useEffect, type ReactNode } from 'react';
+import React, { useEffect, useState, type ReactNode } from 'react';
+
 import { darkTheme, lightTheme } from '../types/theme';
-import type { ThemeColors } from '../types/theme';
-
-interface ThemeContextValue {
-  isDark: boolean;
-  theme: ThemeColors;
-  toggleTheme: () => void;
-}
-
-const ThemeContext = createContext<ThemeContextValue | undefined>(undefined);
-
-export const useTheme = (): ThemeContextValue => {
-  const context = useContext(ThemeContext);
-  if (!context) {
-    throw new Error('useTheme must be used within a ThemeProvider');
-  }
-  return context;
-};
+import { ThemeContext } from './theme-context';
 
 interface ThemeProviderProps {
   children: ReactNode;
@@ -30,15 +15,15 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
     setIsDark((prev) => !prev);
   };
 
-  // Apply class to document for Tailwind dark mode + body background
   useEffect(() => {
     if (isDark) {
       document.documentElement.classList.add('dark');
       document.body.style.background = '#0a0a12';
-    } else {
-      document.documentElement.classList.remove('dark');
-      document.body.style.background = '#ffffff';
+      return;
     }
+
+    document.documentElement.classList.remove('dark');
+    document.body.style.background = '#ffffff';
   }, [isDark]);
 
   return (
@@ -46,4 +31,4 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
       {children}
     </ThemeContext.Provider>
   );
-};
+};

frontend/src/contexts/app-context.ts

@@ -0,0 +1,10 @@
+import { createContext } from 'react';
+
+export type TabId = 'docs' | 'compliance' | 'status' | 'rag';
+
+export interface AppContextValue {
+  activeTab: TabId;
+  setActiveTab: (tab: TabId) => void;
+}
+
+export const AppContext = createContext<AppContextValue | undefined>(undefined);

frontend/src/contexts/index.ts

@@ -1,2 +1,5 @@
-export { ThemeProvider, useTheme } from './ThemeContext';
-export { AppProvider, useApp } from './AppContext';
+export { ThemeProvider } from './ThemeContext';
+export { useTheme } from './useTheme';
+export { AppProvider } from './AppContext';
+export type { AppContextValue, TabId } from './app-context';
+export { useApp } from './useApp';

frontend/src/contexts/theme-context.ts

@@ -0,0 +1,11 @@
+import { createContext } from 'react';
+
+import type { ThemeColors } from '../types/theme';
+
+export interface ThemeContextValue {
+  isDark: boolean;
+  theme: ThemeColors;
+  toggleTheme: () => void;
+}
+
+export const ThemeContext = createContext<ThemeContextValue | undefined>(undefined);

frontend/src/contexts/useApp.ts

@@ -0,0 +1,11 @@
+import { useContext } from 'react';
+
+import { AppContext, type AppContextValue } from './app-context';
+
+export function useApp(): AppContextValue {
+  const context = useContext(AppContext);
+  if (!context) {
+    throw new Error('useApp must be used within an AppProvider');
+  }
+  return context;
+}

frontend/src/contexts/useTheme.ts

@@ -0,0 +1,11 @@
+import { useContext } from 'react';
+
+import { ThemeContext, type ThemeContextValue } from './theme-context';
+
+export function useTheme(): ThemeContextValue {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return context;
+}