refactor

frontend/src/app/ApiContext.tsx

@@ -1,6 +1,7 @@
-import React, { createContext, useContext, useEffect, useMemo } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import type { PropsWithChildren } from 'react';
 import { httpClient, setAuthToken, clearAuthToken } from '../lib/apiClient';
+import { createSafeContext } from '../utils/createSafeContext';
 
 type HttpClient = typeof httpClient;
 
@@ -10,7 +11,7 @@ interface ApiContextValue {
   clearAuthToken: () => void;
 }
 
-const ApiContext = createContext<ApiContextValue | null>(null);
+const [ApiContext, useApi] = createSafeContext<ApiContextValue>('Api');
 
 export const ApiProvider: React.FC<PropsWithChildren<{ initialToken?: string | null }>> = ({
   initialToken = null,
@@ -34,10 +35,4 @@ export const ApiProvider: React.FC<PropsWithChildren<{ initialToken?: string | n
   return <ApiContext.Provider value={value}>{children}</ApiContext.Provider>;
 };
 
-export const useApi = (): ApiContextValue => {
-  const ctx = useContext(ApiContext);
-  if (!ctx) {
-    throw new Error('useApi must be used within an ApiProvider');
-  }
-  return ctx;
-};
+export { useApi };

frontend/src/app/PanelManagerContext.tsx

@@ -1,8 +1,6 @@
 import React, {
   ReactNode,
-  createContext,
   useCallback,
-  useContext,
   useEffect,
   useMemo,
   useRef,
@@ -20,6 +18,7 @@ import {
   SIDEBAR_SOLO_THRESHOLD,
   type PanelKey,
 } from '../constants/layout';
+import { createSafeContext } from '../utils/createSafeContext';
 
 interface SetPanelWidthOptions {
   commit?: boolean;
@@ -51,7 +50,7 @@ type PanelResizeBindings = {
   isPanelResizing: boolean;
 };
 
-const PanelManagerContext = createContext<PanelManagerContextValue | null>(null);
+const [PanelManagerContext, usePanelManager] = createSafeContext<PanelManagerContextValue>('PanelManager');
 
 const clampPanelWidth = (panel: PanelKey, value: number): number => {
   const numeric = Number(value);
@@ -307,13 +306,7 @@ export const PanelManagerProvider: React.FC<PanelManagerProviderProps> = ({ chil
   return <PanelManagerContext.Provider value={contextValue}>{children}</PanelManagerContext.Provider>;
 };
 
-export const usePanelManager = () => {
-  const context = useContext(PanelManagerContext);
-  if (!context) {
-    throw new Error('usePanelManager must be used within a PanelManagerProvider');
-  }
-  return context;
-};
+export { usePanelManager };
 
 export const usePanelResizeBindings = (
   panel: PanelKey,

frontend/src/app/WorkspaceSelectionContext.tsx

@@ -1,9 +1,10 @@
-import React, { createContext, useContext } from 'react';
+import React from 'react';
 import type { useWorkspaceSelection } from './useWorkspaceSelection';
+import { createSafeContext } from '../utils/createSafeContext';
 
 export type WorkspaceSelectionValue = ReturnType<typeof useWorkspaceSelection>;
 
-const WorkspaceSelectionContext = createContext<WorkspaceSelectionValue | null>(null);
+const [WorkspaceSelectionContext, useWorkspaceSelectionContext] = createSafeContext<WorkspaceSelectionValue>('WorkspaceSelection');
 
 interface WorkspaceSelectionProviderProps {
   value: WorkspaceSelectionValue;
@@ -16,10 +17,4 @@ export const WorkspaceSelectionProvider: React.FC<WorkspaceSelectionProviderProp
   </WorkspaceSelectionContext.Provider>
 );
 
-export const useWorkspaceSelectionContext = () => {
-  const context = useContext(WorkspaceSelectionContext);
-  if (!context) {
-    throw new Error('useWorkspaceSelectionContext must be used within a WorkspaceSelectionProvider');
-  }
-  return context;
-};
+export { useWorkspaceSelectionContext };

frontend/src/app/appState.tsx

@@ -1,4 +1,5 @@
-import React, { useContext, useEffect, useMemo, useReducer } from 'react';
+import React, { useEffect, useMemo, useReducer } from 'react';
+import { createSafeContext } from '../utils/createSafeContext';
 import { clearAuthToken, setAuthToken, setAuthRefreshHandlers } from '../lib/apiClient';
 import { ApiProvider } from './ApiContext';
 import { listTenants } from '../lib/apiClient';
@@ -76,8 +77,8 @@ const initialAppState: AppState = {
   tenants: [],
 };
 
-const AppStateContext = React.createContext<AppState | null>(null);
-const AppDispatchContext = React.createContext<React.Dispatch<AppAction> | null>(null);
+const [AppStateContext, useAppState] = createSafeContext<AppState>('AppState');
+const [AppDispatchContext, useAppDispatch] = createSafeContext<React.Dispatch<AppAction>>('AppDispatch');
 
 const appStateReducer = (state: AppState, action: AppAction): AppState => {
   switch (action.type) {
@@ -269,20 +270,4 @@ const AppStateProvider: React.FC<{ children?: React.ReactNode }> = ({ children }
   );
 };
 
-const useAppState = (): AppState => {
-  const context = useContext(AppStateContext);
-  if (!context) {
-    throw new Error('useAppState must be used within an AppStateProvider.');
-  }
-  return context;
-};
-
-const useAppDispatch = (): React.Dispatch<AppAction> => {
-  const context = useContext(AppDispatchContext);
-  if (!context) {
-    throw new Error('useAppDispatch must be used within an AppStateProvider.');
-  }
-  return context;
-};
-
 export { AppStateProvider, useAppState, useAppDispatch };