gloomberb 0.5.0 → 0.6.0

package/src/state/app-context.tsx

@@ -8,836 +8,70 @@ import {
   useReducer,
   useRef,
   useSyncExternalStore,
+  type Dispatch,
   type SetStateAction,
   type ReactNode,
 } from "react";
 import type { SessionStore } from "../data/session-store";
-import { saveConfig } from "../data/config-store";
-import { applyTheme, syncTheme } from "../theme/colors";
-import { isBrokerPortfolioId } from "../utils/broker-instances";
-import { resolveTickerFinancialsQuoteState } from "../utils/quote-resolution";
+import { syncTheme } from "../theme/colors";
 import {
-  cloneLayout,
-  DEFAULT_LAYOUT,
   findPaneInstance,
-  isFixedTickerPane,
-  normalizePaneLayout,
-  removePaneInstances,
-  type LayoutConfig,
+  materializeDetachedPanesAsFloating,
+  type AppConfig,
+  type PaneInstanceConfig,
 } from "../types/config";
+import type { DesktopSharedStateSnapshot, DesktopWindowBridge } from "../types/desktop-window";
 import { setPaneSetting } from "../pane-settings";
-import type { AppConfig, PaneBinding, PaneInstanceConfig, SavedLayout } from "../types/config";
-import type { Quote, TickerFinancials } from "../types/financials";
-import type { TickerRecord } from "../types/ticker";
-import type { BrokerAccount } from "../types/trading";
-import type { ReleaseInfo, UpdateProgress } from "../updater";
-import { getDockLeafLayouts, getDockedPaneIds } from "../plugins/pane-manager";
 import { useTickerFinancials } from "../market-data/hooks";
 import {
   APP_SESSION_ID,
   APP_SESSION_SCHEMA_VERSION,
   type AppSessionSnapshot,
-} from "./session-persistence";
+} from "../core/state/session-persistence";
 import { usePersistSessionSnapshot } from "./use-session-snapshot";
-
-export interface PaneRuntimeState {
-  cursorSymbol?: string | null;
-  collectionId?: string;
-  activeTabId?: string;
-  collectionSorts?: Record<string, CollectionSortPreference>;
-  pluginState?: Record<string, Record<string, unknown>>;
-  [key: string]: unknown;
-}
-
-export interface LayoutHistoryEntry {
-  past: LayoutConfig[];
-  future: LayoutConfig[];
-}
-
-export type SortDirection = "asc" | "desc";
-
-export interface CollectionSortPreference {
-  columnId: string | null;
-  direction: SortDirection;
-}
-
-export interface CommandBarLaunchRequest {
-  kind: "plugin-command";
-  commandId: string;
-  sequence: number;
-}
-
-export interface AppState {
-  config: AppConfig;
-  tickers: Map<string, TickerRecord>;
-  financials: Map<string, TickerFinancials>;
-  exchangeRates: Map<string, number>;
-  brokerAccounts: Record<string, BrokerAccount[]>;
-  activePanel: "left" | "right";
-  focusedPaneId: string | null;
-  paneState: Record<string, PaneRuntimeState>;
-  recentTickers: string[];
-  commandBarOpen: boolean;
-  commandBarQuery: string;
-  commandBarLaunchRequest: CommandBarLaunchRequest | null;
-  refreshing: Set<string>;
-  initialized: boolean;
-  statusBarVisible: boolean;
-  gridlockTipVisible: boolean;
-  gridlockTipSequence: number;
-  inputCaptured: boolean;
-  updateAvailable: ReleaseInfo | null;
-  updateProgress: UpdateProgress | null;
-  updateCheckInProgress: boolean;
-  updateNotice: string | null;
-  layoutHistory: Record<number, LayoutHistoryEntry>;
-}
-
-export type AppAction =
-  | { type: "SET_CONFIG"; config: AppConfig }
-  | { type: "SET_TICKERS"; tickers: Map<string, TickerRecord> }
-  | { type: "UPDATE_TICKER"; ticker: TickerRecord }
-  | { type: "REMOVE_TICKER"; symbol: string }
-  | { type: "SET_FINANCIALS"; symbol: string; data: TickerFinancials }
-  | { type: "MERGE_QUOTE"; symbol: string; quote: Quote }
-  | { type: "HYDRATE_FINANCIALS"; financials: Map<string, TickerFinancials> }
-  | { type: "TRACK_TICKER"; symbol: string | null }
-  | { type: "SET_ACTIVE_PANEL"; panel: "left" | "right" }
-  | { type: "TOGGLE_COMMAND_BAR" }
-  | {
-      type: "SET_COMMAND_BAR";
-      open: boolean;
-      query?: string;
-      launch?: { kind: "plugin-command"; commandId: string } | null;
-    }
-  | { type: "SET_COMMAND_BAR_QUERY"; query: string }
-  | { type: "SET_REFRESHING"; symbol: string; refreshing: boolean }
-  | { type: "SET_BROKER_ACCOUNTS"; instanceId: string; accounts: BrokerAccount[] }
-  | { type: "SET_INITIALIZED" }
-  | { type: "TOGGLE_STATUS_BAR" }
-  | { type: "SHOW_GRIDLOCK_TIP" }
-  | { type: "DISMISS_GRIDLOCK_TIP" }
-  | { type: "SET_THEME"; theme: string }
-  | { type: "SET_UPDATE_AVAILABLE"; release: ReleaseInfo | null }
-  | { type: "SET_UPDATE_PROGRESS"; progress: UpdateProgress | null }
-  | { type: "SET_UPDATE_CHECK_IN_PROGRESS"; checking: boolean }
-  | { type: "SET_UPDATE_NOTICE"; notice: string | null }
-  | { type: "TOGGLE_PLUGIN"; pluginId: string }
-  | { type: "SET_INPUT_CAPTURED"; captured: boolean }
-  | { type: "SET_EXCHANGE_RATE"; currency: string; rate: number }
-  | { type: "HYDRATE_EXCHANGE_RATES"; exchangeRates: Map<string, number> }
-  | { type: "PUSH_LAYOUT_HISTORY" }
-  | { type: "UNDO_LAYOUT" }
-  | { type: "REDO_LAYOUT" }
-  | { type: "UPDATE_LAYOUT"; layout: LayoutConfig }
-  | { type: "SWITCH_LAYOUT"; index: number }
-  | { type: "NEW_LAYOUT"; name: string }
-  | { type: "DELETE_LAYOUT"; index: number }
-  | { type: "RENAME_LAYOUT"; index: number; name: string }
-  | { type: "DUPLICATE_LAYOUT"; index: number }
-  | { type: "FOCUS_PANE"; paneId: string }
-  | { type: "FOCUS_NEXT"; paneOrder: string[] }
-  | { type: "FOCUS_PREV"; paneOrder: string[] }
-  | {
-      type: "UPDATE_PLUGIN_PANE_STATE";
-      paneId: string;
-      pluginId: string;
-      key: string;
-      value: unknown;
-    }
-  | { type: "UPDATE_PANE_STATE"; paneId: string; patch: Partial<PaneRuntimeState> };
-
-function getDefaultCollectionId(config: AppConfig): string {
-  return config.portfolios[0]?.id || config.watchlists[0]?.id || "";
-}
-
-function isKnownCollection(config: AppConfig, collectionId: string | undefined): collectionId is string {
-  if (!collectionId) return false;
-  return config.portfolios.some((portfolio) => portfolio.id === collectionId)
-    || config.watchlists.some((watchlist) => watchlist.id === collectionId);
-}
-
-function shouldPreserveUnknownCollectionId(collectionId: string | undefined): boolean {
-  return isBrokerPortfolioId(collectionId);
-}
-
-function getConfiguredCollectionId(config: AppConfig, instance: PaneInstanceConfig): string {
-  const candidates = [
-    instance.params?.collectionId,
-    typeof instance.settings?.lockedCollectionId === "string" ? instance.settings.lockedCollectionId : undefined,
-    ...(Array.isArray(instance.settings?.visibleCollectionIds)
-      ? instance.settings.visibleCollectionIds.filter((value): value is string => typeof value === "string")
-      : []),
-  ];
-
-  for (const candidate of candidates) {
-    if (isKnownCollection(config, candidate) || shouldPreserveUnknownCollectionId(candidate)) {
-      return candidate!;
-    }
-  }
-
-  return getDefaultCollectionId(config);
-}
-
-function defaultPaneStateForInstance(config: AppConfig, instance: PaneInstanceConfig): PaneRuntimeState {
-  if (instance.paneId === "portfolio-list") {
-    return {
-      collectionId: getConfiguredCollectionId(config, instance),
-      cursorSymbol: null,
-    };
-  }
-  if (instance.paneId === "ticker-detail") {
-    return { activeTabId: "overview" };
-  }
-  return {};
-}
-
-function reconcilePaneState(config: AppConfig, previous: Record<string, PaneRuntimeState>): Record<string, PaneRuntimeState> {
-  const next: Record<string, PaneRuntimeState> = {};
-  for (const instance of config.layout.instances) {
-    const defaults = defaultPaneStateForInstance(config, instance);
-    const paneState = { ...defaults, ...(previous[instance.instanceId] ?? {}) };
-    if (
-      instance.paneId === "portfolio-list"
-      && !isKnownCollection(config, paneState.collectionId as string | undefined)
-      && !shouldPreserveUnknownCollectionId(paneState.collectionId as string | undefined)
-    ) {
-      paneState.collectionId = defaults.collectionId;
-    }
-    next[instance.instanceId] = paneState;
-  }
-  return next;
-}
-
-function reconcileBrokerAccounts(
-  config: AppConfig,
-  brokerAccounts: Record<string, BrokerAccount[]>,
-): Record<string, BrokerAccount[]> {
-  const validInstanceIds = new Set(config.brokerInstances.map((instance) => instance.id));
-  return Object.fromEntries(
-    Object.entries(brokerAccounts).filter(([instanceId]) => validInstanceIds.has(instanceId)),
-  );
-}
-
-function resolveTickerFromBinding(
-  state: Pick<AppState, "config" | "paneState">,
-  binding: PaneBinding | undefined,
-  seen: Set<string>,
-): string | null {
-  if (!binding || binding.kind === "none") return null;
-  if (binding.kind === "fixed") return binding.symbol;
-  return resolveTickerForPane(state as AppState, binding.sourceInstanceId, seen);
-}
-
-export function getPaneState(state: Pick<AppState, "paneState">, paneId: string): PaneRuntimeState {
-  return state.paneState[paneId] ?? {};
-}
-
-export function resolveTickerForPane(state: AppState, paneId: string, seen = new Set<string>()): string | null {
-  if (seen.has(paneId)) return null;
-  seen.add(paneId);
-  const instance = findPaneInstance(state.config.layout, paneId);
-  if (!instance) return null;
-  if (instance.paneId === "portfolio-list") {
-    const paneState = getPaneState(state, paneId);
-    return typeof paneState.cursorSymbol === "string" ? paneState.cursorSymbol : null;
-  }
-  return resolveTickerFromBinding(state, instance.binding, seen);
-}
-
-export function resolveCollectionForPane(state: AppState, paneId: string, seen = new Set<string>()): string | null {
-  if (seen.has(paneId)) return null;
-  seen.add(paneId);
-  const instance = findPaneInstance(state.config.layout, paneId);
-  if (!instance) return null;
-  if (instance.paneId === "portfolio-list") {
-    const paneState = getPaneState(state, paneId);
-    const collectionId = typeof paneState.collectionId === "string"
-      ? paneState.collectionId
-      : getConfiguredCollectionId(state.config, instance);
-    if (isKnownCollection(state.config, collectionId) || shouldPreserveUnknownCollectionId(collectionId)) {
-      return collectionId ?? null;
-    }
-    return getConfiguredCollectionId(state.config, instance);
-  }
-  if (instance.binding?.kind === "follow") {
-    return resolveCollectionForPane(state, instance.binding.sourceInstanceId, seen);
-  }
-  return null;
-}
-
-export function resolveTickerFileForPane(state: AppState, paneId: string): TickerRecord | null {
-  const symbol = resolveTickerForPane(state, paneId);
-  return symbol ? state.tickers.get(symbol) ?? null : null;
-}
-
-export function resolveFinancialsForPane(state: AppState, paneId: string): TickerFinancials | null {
-  const symbol = resolveTickerForPane(state, paneId);
-  return symbol ? state.financials.get(symbol) ?? null : null;
-}
-
-export function getFocusedTickerSymbol(state: AppState): string | null {
-  return state.focusedPaneId ? resolveTickerForPane(state, state.focusedPaneId) : null;
-}
-
-export function getFocusedCollectionId(state: AppState): string | null {
-  return state.focusedPaneId ? resolveCollectionForPane(state, state.focusedPaneId) : null;
-}
-
-function clearTickerBindings(layout: LayoutConfig, symbol: string): LayoutConfig {
-  return normalizePaneLayout(removePaneInstances(
-    layout,
-    layout.instances
-      .filter((instance) => instance.binding?.kind === "fixed" && isFixedTickerPane(instance) && instance.binding.symbol === symbol)
-      .map((instance) => instance.instanceId),
-  ));
-}
-
-function nextRecentTickers(current: string[], symbol: string | null): string[] {
-  if (!symbol) return current;
-  return [symbol, ...current.filter((entry) => entry !== symbol)].slice(0, 50);
-}
-
-function syncLayouts(layouts: SavedLayout[], activeLayoutIndex: number, layout: LayoutConfig): SavedLayout[] {
-  return layouts.map((savedLayout, index) => (
-    index === activeLayoutIndex ? { ...savedLayout, layout: cloneLayout(layout) } : savedLayout
-  ));
-}
-
-const PANEL_RESOLUTION_BOUNDS = { x: 0, y: 0, width: 120, height: 40 };
-
-function getPaneOrder(layout: LayoutConfig): string[] {
-  return [
-    ...getDockedPaneIds(layout),
-    ...layout.floating.map((entry) => entry.instanceId),
-  ];
-}
-
-function getTopFloatingPaneId(layout: LayoutConfig): string | null {
-  let topInstanceId: string | null = null;
-  let topZIndex = Number.NEGATIVE_INFINITY;
-  let topOrder = -1;
-
-  layout.floating.forEach((entry, index) => {
-    const zIndex = entry.zIndex ?? 50;
-    if (zIndex > topZIndex || (zIndex === topZIndex && index > topOrder)) {
-      topInstanceId = entry.instanceId;
-      topZIndex = zIndex;
-      topOrder = index;
-    }
-  });
-
-  return topInstanceId;
-}
-
-function resolveFocusedPaneId(
-  previousLayout: LayoutConfig,
-  nextLayout: LayoutConfig,
-  focusedPaneId: string | null,
-): string | null {
-  const paneOrder = getPaneOrder(nextLayout);
-  if (paneOrder.length === 0) return null;
-  if (focusedPaneId && paneOrder.includes(focusedPaneId)) {
-    return focusedPaneId;
-  }
-  const previouslyFloating = focusedPaneId
-    ? previousLayout.floating.some((entry) => entry.instanceId === focusedPaneId)
-    : false;
-  if (previouslyFloating) {
-    return getTopFloatingPaneId(nextLayout) ?? paneOrder[0] ?? null;
-  }
-  return paneOrder[0] ?? null;
-}
-
-function getPanelFocusTarget(layout: LayoutConfig, panel: "left" | "right"): string | null {
-  const leaves = getDockLeafLayouts(layout, PANEL_RESOLUTION_BOUNDS);
-  if (leaves.length === 0) return layout.floating[0]?.instanceId ?? null;
-  const sorted = [...leaves].sort((a, b) => (
-    panel === "left"
-      ? a.rect.x - b.rect.x || a.rect.y - b.rect.y
-      : (b.rect.x + b.rect.width) - (a.rect.x + a.rect.width) || a.rect.y - b.rect.y
-  ));
-  return sorted[0]?.instanceId ?? null;
-}
-
-const MAX_LAYOUT_HISTORY = 50;
-
-function cloneHistoryEntry(entry: LayoutHistoryEntry | undefined): LayoutHistoryEntry {
-  return {
-    past: entry?.past.map((layout) => cloneLayout(layout)) ?? [],
-    future: entry?.future.map((layout) => cloneLayout(layout)) ?? [],
-  };
-}
-
-function historyForIndex(layoutHistory: Record<number, LayoutHistoryEntry>, index: number): LayoutHistoryEntry {
-  return cloneHistoryEntry(layoutHistory[index]);
-}
-
-function setHistoryForIndex(
-  layoutHistory: Record<number, LayoutHistoryEntry>,
-  index: number,
-  entry: LayoutHistoryEntry,
-): Record<number, LayoutHistoryEntry> {
-  return {
-    ...layoutHistory,
-    [index]: {
-      past: entry.past.map((layout) => cloneLayout(layout)),
-      future: entry.future.map((layout) => cloneLayout(layout)),
-    },
-  };
-}
-
-function removeHistoryIndex(layoutHistory: Record<number, LayoutHistoryEntry>, removedIndex: number): Record<number, LayoutHistoryEntry> {
-  const next: Record<number, LayoutHistoryEntry> = {};
-  for (const [rawIndex, entry] of Object.entries(layoutHistory)) {
-    const index = Number.parseInt(rawIndex, 10);
-    if (Number.isNaN(index) || index === removedIndex) continue;
-    next[index > removedIndex ? index - 1 : index] = cloneHistoryEntry(entry);
-  }
-  return next;
-}
-
-/** If paneId is a floating pane, bump its zIndex to the top. */
-function bringFloatingToFront(layout: LayoutConfig, paneId: string): LayoutConfig {
-  const entry = layout.floating.find((e) => e.instanceId === paneId);
-  if (!entry) return layout;
-  const maxZ = layout.floating.reduce((max, e) => Math.max(max, e.zIndex ?? 50), 0);
-  if ((entry.zIndex ?? 50) >= maxZ) return layout; // already on top
-  return {
-    ...layout,
-    floating: layout.floating.map((e) =>
-      e.instanceId === paneId ? { ...e, zIndex: maxZ + 1 } : e,
-    ),
-  };
-}
-
-function withFocusedPane(state: AppState, config: AppConfig): AppState {
-  const normalizedLayout = normalizePaneLayout(config.layout);
-  const nextConfig = normalizedLayout === config.layout
-    ? config
-    : {
-      ...config,
-      layout: normalizedLayout,
-      layouts: syncLayouts(config.layouts, config.activeLayoutIndex, normalizedLayout),
-    };
-  const nextPaneState = reconcilePaneState(nextConfig, state.paneState);
-  const focusedPaneId = resolveFocusedPaneId(state.config.layout, nextConfig.layout, state.focusedPaneId);
-  return {
-    ...state,
-    config: nextConfig,
-    paneState: nextPaneState,
-    brokerAccounts: reconcileBrokerAccounts(nextConfig, state.brokerAccounts),
-    focusedPaneId,
-  };
-}
-
-export function appReducer(state: AppState, action: AppAction): AppState {
-  switch (action.type) {
-    case "SET_CONFIG":
-      return withFocusedPane({ ...state, layoutHistory: {} }, action.config);
-
-    case "SET_TICKERS":
-      return { ...state, tickers: action.tickers };
-
-    case "UPDATE_TICKER": {
-      const tickers = new Map(state.tickers);
-      tickers.set(action.ticker.metadata.ticker, action.ticker);
-      return { ...state, tickers };
-    }
-
-    case "REMOVE_TICKER": {
-      const tickers = new Map(state.tickers);
-      tickers.delete(action.symbol);
-      const financials = new Map(state.financials);
-      financials.delete(action.symbol);
-      const paneState: Record<string, PaneRuntimeState> = {};
-      for (const [paneId, currentState] of Object.entries(state.paneState)) {
-        paneState[paneId] = currentState.cursorSymbol === action.symbol
-          ? { ...currentState, cursorSymbol: null }
-          : currentState;
-      }
-      const layout = clearTickerBindings(state.config.layout, action.symbol);
-      const layouts = syncLayouts(state.config.layouts, state.config.activeLayoutIndex, layout);
-      return {
-        ...state,
-        tickers,
-        financials,
-        paneState,
-        recentTickers: state.recentTickers.filter((symbol) => symbol !== action.symbol),
-        config: { ...state.config, layout, layouts },
-      };
-    }
-
-    case "SET_FINANCIALS": {
-      const financials = new Map(state.financials);
-      financials.set(action.symbol, resolveTickerFinancialsQuoteState(action.data)!);
-      return { ...state, financials };
-    }
-
-    case "MERGE_QUOTE": {
-      const financials = new Map(state.financials);
-      const current = state.financials.get(action.symbol);
-      financials.set(action.symbol, resolveTickerFinancialsQuoteState(current, action.quote)!);
-      return { ...state, financials };
-    }
-
-    case "HYDRATE_FINANCIALS": {
-      if (action.financials.size === 0) return state;
-      const financials = new Map(state.financials);
-      for (const [symbol, data] of action.financials) {
-        financials.set(symbol, resolveTickerFinancialsQuoteState(data)!);
-      }
-      return { ...state, financials };
-    }
-
-    case "TRACK_TICKER":
-      return { ...state, recentTickers: nextRecentTickers(state.recentTickers, action.symbol) };
-
-    case "SET_ACTIVE_PANEL": {
-      const firstPane = getPanelFocusTarget(state.config.layout, action.panel);
-      return {
-        ...state,
-        activePanel: action.panel,
-        focusedPaneId: firstPane ?? state.focusedPaneId,
-      };
-    }
-
-    case "TOGGLE_COMMAND_BAR":
-      return state.commandBarOpen
-        ? { ...state, commandBarOpen: false, commandBarQuery: "", commandBarLaunchRequest: null }
-        : { ...state, commandBarOpen: true, commandBarQuery: "", commandBarLaunchRequest: null };
-
-    case "SET_COMMAND_BAR": {
-      const launchRequest = action.open && action.launch
-        ? {
-            ...action.launch,
-            sequence: (state.commandBarLaunchRequest?.sequence ?? 0) + 1,
-          }
-        : null;
-      return {
-        ...state,
-        commandBarOpen: action.open,
-        commandBarQuery: action.open ? (action.query ?? "") : "",
-        commandBarLaunchRequest: launchRequest,
-      };
-    }
-
-    case "SET_COMMAND_BAR_QUERY":
-      return { ...state, commandBarQuery: action.query };
-
-    case "SET_REFRESHING": {
-      const refreshing = new Set(state.refreshing);
-      if (action.refreshing) refreshing.add(action.symbol);
-      else refreshing.delete(action.symbol);
-      return { ...state, refreshing };
-    }
-
-    case "SET_BROKER_ACCOUNTS":
-      return {
-        ...state,
-        brokerAccounts: {
-          ...state.brokerAccounts,
-          [action.instanceId]: action.accounts,
-        },
-      };
-
-    case "SET_INITIALIZED":
-      return { ...state, initialized: true };
-
-    case "TOGGLE_STATUS_BAR":
-      return { ...state, statusBarVisible: !state.statusBarVisible };
-
-    case "SHOW_GRIDLOCK_TIP":
-      return {
-        ...state,
-        gridlockTipVisible: true,
-        gridlockTipSequence: state.gridlockTipSequence + 1,
-      };
-
-    case "DISMISS_GRIDLOCK_TIP":
-      if (!state.gridlockTipVisible) return state;
-      return { ...state, gridlockTipVisible: false };
-
-    case "SET_THEME":
-      applyTheme(action.theme);
-      return { ...state, config: { ...state.config, theme: action.theme } };
-
-    case "SET_UPDATE_AVAILABLE":
-      return { ...state, updateAvailable: action.release, updateNotice: action.release ? null : state.updateNotice };
-
-    case "SET_UPDATE_PROGRESS":
-      return { ...state, updateProgress: action.progress, updateNotice: action.progress ? null : state.updateNotice };
-
-    case "SET_UPDATE_CHECK_IN_PROGRESS":
-      return { ...state, updateCheckInProgress: action.checking };
-
-    case "SET_UPDATE_NOTICE":
-      return { ...state, updateNotice: action.notice };
-
-    case "TOGGLE_PLUGIN": {
-      const disabledPlugins = state.config.disabledPlugins.includes(action.pluginId)
-        ? state.config.disabledPlugins.filter((pluginId) => pluginId !== action.pluginId)
-        : [...state.config.disabledPlugins, action.pluginId];
-      return { ...state, config: { ...state.config, disabledPlugins } };
-    }
-
-    case "SET_INPUT_CAPTURED":
-      return { ...state, inputCaptured: action.captured };
-
-    case "SET_EXCHANGE_RATE": {
-      const exchangeRates = new Map(state.exchangeRates);
-      exchangeRates.set(action.currency, action.rate);
-      return { ...state, exchangeRates };
-    }
-
-    case "HYDRATE_EXCHANGE_RATES": {
-      if (action.exchangeRates.size === 0) return state;
-      const exchangeRates = new Map(state.exchangeRates);
-      for (const [currency, rate] of action.exchangeRates) {
-        exchangeRates.set(currency, rate);
-      }
-      return { ...state, exchangeRates };
-    }
-
-    case "PUSH_LAYOUT_HISTORY": {
-      const currentIndex = state.config.activeLayoutIndex;
-      const entry = historyForIndex(state.layoutHistory, currentIndex);
-      const snapshot = cloneLayout(state.config.layout);
-      const last = entry.past[entry.past.length - 1];
-      if (last && JSON.stringify(last) === JSON.stringify(snapshot)) {
-        return state;
-      }
-      entry.past = [...entry.past, snapshot].slice(-MAX_LAYOUT_HISTORY);
-      entry.future = [];
-      return {
-        ...state,
-        layoutHistory: setHistoryForIndex(state.layoutHistory, currentIndex, entry),
-      };
-    }
-
-    case "UNDO_LAYOUT": {
-      const currentIndex = state.config.activeLayoutIndex;
-      const entry = historyForIndex(state.layoutHistory, currentIndex);
-      if (entry.past.length === 0) return state;
-      const target = entry.past[entry.past.length - 1]!;
-      entry.past = entry.past.slice(0, -1);
-      entry.future = [cloneLayout(state.config.layout), ...entry.future].slice(0, MAX_LAYOUT_HISTORY);
-      const layouts = syncLayouts(state.config.layouts, currentIndex, target);
-      return withFocusedPane({
-        ...state,
-        layoutHistory: setHistoryForIndex(state.layoutHistory, currentIndex, entry),
-      }, {
-        ...state.config,
-        layout: cloneLayout(target),
-        layouts,
-      });
-    }
-
-    case "REDO_LAYOUT": {
-      const currentIndex = state.config.activeLayoutIndex;
-      const entry = historyForIndex(state.layoutHistory, currentIndex);
-      if (entry.future.length === 0) return state;
-      const target = entry.future[0]!;
-      entry.future = entry.future.slice(1);
-      entry.past = [...entry.past, cloneLayout(state.config.layout)].slice(-MAX_LAYOUT_HISTORY);
-      const layouts = syncLayouts(state.config.layouts, currentIndex, target);
-      return withFocusedPane({
-        ...state,
-        layoutHistory: setHistoryForIndex(state.layoutHistory, currentIndex, entry),
-      }, {
-        ...state.config,
-        layout: cloneLayout(target),
-        layouts,
-      });
-    }
-
-    case "UPDATE_LAYOUT": {
-      const layouts = syncLayouts(state.config.layouts, state.config.activeLayoutIndex, action.layout);
-      return withFocusedPane(state, { ...state.config, layout: action.layout, layouts });
-    }
-
-    case "SWITCH_LAYOUT": {
-      if (action.index < 0 || action.index >= state.config.layouts.length) return state;
-      const layouts = syncLayouts(state.config.layouts, state.config.activeLayoutIndex, state.config.layout);
-      const target = layouts[action.index]!;
-      return withFocusedPane(state, {
-        ...state.config,
-        layout: cloneLayout(target.layout),
-        layouts,
-        activeLayoutIndex: action.index,
-      });
-    }
-
-    case "NEW_LAYOUT": {
-      const newLayout: SavedLayout = {
-        name: action.name,
-        layout: cloneLayout(DEFAULT_LAYOUT),
-      };
-      const layouts = [...syncLayouts(state.config.layouts, state.config.activeLayoutIndex, state.config.layout), newLayout];
-      return withFocusedPane({
-        ...state,
-        layoutHistory: setHistoryForIndex(state.layoutHistory, layouts.length - 1, { past: [], future: [] }),
-      }, {
-        ...state.config,
-        layout: cloneLayout(newLayout.layout),
-        layouts,
-        activeLayoutIndex: layouts.length - 1,
-      });
-    }
-
-    case "DELETE_LAYOUT": {
-      if (state.config.layouts.length <= 1) return state;
-      const layouts = state.config.layouts.filter((_, index) => index !== action.index);
-      const nextActiveLayoutIndex = action.index <= state.config.activeLayoutIndex
-        ? Math.max(0, state.config.activeLayoutIndex - 1)
-        : state.config.activeLayoutIndex;
-      const nextLayout = layouts[nextActiveLayoutIndex]!;
-      return withFocusedPane({
-        ...state,
-        layoutHistory: removeHistoryIndex(state.layoutHistory, action.index),
-      }, {
-        ...state.config,
-        layout: cloneLayout(nextLayout.layout),
-        layouts,
-        activeLayoutIndex: nextActiveLayoutIndex,
-      });
-    }
-
-    case "RENAME_LAYOUT": {
-      if (action.index < 0 || action.index >= state.config.layouts.length) return state;
-      return {
-        ...state,
-        config: {
-          ...state.config,
-          layouts: state.config.layouts.map((savedLayout, index) => (
-            index === action.index ? { ...savedLayout, name: action.name } : savedLayout
-          )),
-        },
-      };
-    }
-
-    case "DUPLICATE_LAYOUT": {
-      if (action.index < 0 || action.index >= state.config.layouts.length) return state;
-      const source = state.config.layouts[action.index]!;
-      const duplicate: SavedLayout = {
-        name: `${source.name} Copy`,
-        layout: cloneLayout(source.layout),
-      };
-      const layouts = [...syncLayouts(state.config.layouts, state.config.activeLayoutIndex, state.config.layout), duplicate];
-      return withFocusedPane({
-        ...state,
-        layoutHistory: setHistoryForIndex(state.layoutHistory, layouts.length - 1, { past: [], future: [] }),
-      }, {
-        ...state.config,
-        layout: cloneLayout(duplicate.layout),
-        layouts,
-        activeLayoutIndex: layouts.length - 1,
-      });
-    }
-
-    case "FOCUS_PANE": {
-      const layout = bringFloatingToFront(state.config.layout, action.paneId);
-      const config = layout !== state.config.layout
-        ? { ...state.config, layout, layouts: syncLayouts(state.config.layouts, state.config.activeLayoutIndex, layout) }
-        : state.config;
-      return {
-        ...state,
-        config,
-        focusedPaneId: action.paneId,
-        recentTickers: nextRecentTickers(state.recentTickers, resolveTickerForPane(state, action.paneId)),
-      };
-    }
-
-    case "FOCUS_NEXT": {
-      if (action.paneOrder.length === 0) return state;
-      const currentIndex = state.focusedPaneId ? action.paneOrder.indexOf(state.focusedPaneId) : -1;
-      const nextPaneId = action.paneOrder[(currentIndex + 1) % action.paneOrder.length]!;
-      const layout = bringFloatingToFront(state.config.layout, nextPaneId);
-      const config = layout !== state.config.layout
-        ? { ...state.config, layout, layouts: syncLayouts(state.config.layouts, state.config.activeLayoutIndex, layout) }
-        : state.config;
-      return {
-        ...state,
-        config,
-        focusedPaneId: nextPaneId,
-        recentTickers: nextRecentTickers(state.recentTickers, resolveTickerForPane(state, nextPaneId)),
-      };
-    }
-
-    case "FOCUS_PREV": {
-      if (action.paneOrder.length === 0) return state;
-      const currentIndex = state.focusedPaneId ? action.paneOrder.indexOf(state.focusedPaneId) : 0;
-      const nextPaneId = action.paneOrder[(currentIndex - 1 + action.paneOrder.length) % action.paneOrder.length]!;
-      const layout = bringFloatingToFront(state.config.layout, nextPaneId);
-      const config = layout !== state.config.layout
-        ? { ...state.config, layout, layouts: syncLayouts(state.config.layouts, state.config.activeLayoutIndex, layout) }
-        : state.config;
-      return {
-        ...state,
-        config,
-        focusedPaneId: nextPaneId,
-        recentTickers: nextRecentTickers(state.recentTickers, resolveTickerForPane(state, nextPaneId)),
-      };
-    }
-
-    case "UPDATE_PANE_STATE": {
-      const current = state.paneState[action.paneId] ?? {};
-      if (Object.keys(action.patch).every((key) => Object.is(current[key], action.patch[key]))) {
-        return state;
-      }
-      const nextState = { ...current, ...action.patch };
-      const recentTickers = Object.prototype.hasOwnProperty.call(action.patch, "cursorSymbol")
-        ? nextRecentTickers(state.recentTickers, typeof nextState.cursorSymbol === "string" ? nextState.cursorSymbol : null)
-        : state.recentTickers;
-      return {
-        ...state,
-        paneState: {
-          ...state.paneState,
-          [action.paneId]: nextState,
-        },
-        recentTickers,
-      };
-    }
-
-    case "UPDATE_PLUGIN_PANE_STATE": {
-      const current = state.paneState[action.paneId] ?? {};
-      const currentPluginState = current.pluginState ?? {};
-      const currentPluginValues = currentPluginState[action.pluginId] ?? {};
-      if (Object.is(currentPluginValues[action.key], action.value)) {
-        return state;
-      }
-      return {
-        ...state,
-        paneState: {
-          ...state.paneState,
-          [action.paneId]: {
-            ...current,
-            pluginState: {
-              ...currentPluginState,
-              [action.pluginId]: {
-                ...currentPluginValues,
-                [action.key]: action.value,
-              },
-            },
-          },
-        },
-      };
-    }
-
-    default:
-      return state;
-  }
-}
+import {
+  appReducer,
+  createInitialState,
+  getEffectiveThemeId,
+  getFocusedTickerSymbol,
+  type PaneRuntimeState,
+  resolveCollectionForPane,
+  resolveTickerForPane,
+} from "../core/state/app-state";
+import type { AppAction, AppState } from "../core/state/app-state";
+import { scheduleConfigSave } from "./config-save-scheduler";
+
+export {
+  appReducer,
+  createInitialState,
+  getEffectiveThemeId,
+  getFocusedCollectionId,
+  getFocusedTickerSymbol,
+  getPaneState,
+  resolveCollectionForPane,
+  resolveFinancialsForPane,
+  resolveTickerFileForPane,
+  resolveTickerForPane,
+} from "../core/state/app-state";
+export type {
+  AppAction,
+  AppState,
+  CollectionSortPreference,
+  CommandBarLaunchRequest,
+  LayoutHistoryEntry,
+  PaneRuntimeState,
+  SortDirection,
+} from "../core/state/app-state";
 
 interface AppContextStoreValue {
-  dispatch: React.Dispatch<AppAction>;
+  dispatch: Dispatch<AppAction>;
   getState: () => AppState;
   subscribe: (listener: () => void) => () => void;
 }
 
 interface AppContextLegacyValue {
   state: AppState;
-  dispatch: React.Dispatch<AppAction>;
+  dispatch: Dispatch<AppAction>;
 }
 
 type AppContextValue = AppContextStoreValue | AppContextLegacyValue;
@@ -855,6 +89,22 @@ function useRequiredAppContext(): AppContextValue {
   return context;
 }
 
+function sameStringList(left: readonly string[], right: readonly string[]): boolean {
+  if (left.length !== right.length) return false;
+  return left.every((value, index) => value === right[index]);
+}
+
+function materializeDetachedConfig(config: AppConfig): AppConfig {
+  return {
+    ...config,
+    layout: materializeDetachedPanesAsFloating(config.layout),
+    layouts: config.layouts.map((entry) => ({
+      ...entry,
+      layout: materializeDetachedPanesAsFloating(entry.layout),
+    })),
+  };
+}
+
 export function useAppState(): AppContextLegacyValue {
   const context = useRequiredAppContext();
   if (!isAppStoreContextValue(context)) {
@@ -865,7 +115,26 @@ export function useAppState(): AppContextLegacyValue {
   return useMemo(() => ({ state, dispatch: context.dispatch }), [context.dispatch, state]);
 }
 
-export function useAppDispatch(): React.Dispatch<AppAction> {
+export function useAppStateRef() {
+  const context = useRequiredAppContext();
+  const stateRef = useRef(isAppStoreContextValue(context) ? context.getState() : context.state);
+
+  useLayoutEffect(() => {
+    if (!isAppStoreContextValue(context)) {
+      stateRef.current = context.state;
+      return;
+    }
+
+    stateRef.current = context.getState();
+    return context.subscribe(() => {
+      stateRef.current = context.getState();
+    });
+  }, [context]);
+
+  return stateRef;
+}
+
+export function useAppDispatch(): Dispatch<AppAction> {
   return useRequiredAppContext().dispatch;
 }
 
@@ -884,7 +153,7 @@ export function useAppSelector<T>(selector: (state: AppState) => T): T {
     () => {
       const state = context.getState();
       const selection = selectorRef.current(state);
-      const themeId = state.config.theme;
+      const themeId = getEffectiveThemeId(state);
       const previous = lastSnapshotRef.current;
       if (previous && Object.is(previous.selection, selection) && previous.themeId === themeId) {
         return previous;
@@ -897,7 +166,7 @@ export function useAppSelector<T>(selector: (state: AppState) => T): T {
       const state = context.getState();
       return {
         selection: selectorRef.current(state),
-        themeId: state.config.theme,
+        themeId: getEffectiveThemeId(state),
       };
     },
   );
@@ -905,7 +174,7 @@ export function useAppSelector<T>(selector: (state: AppState) => T): T {
 }
 
 export function PaneInstanceProvider({ paneId, children }: { paneId: string; children: ReactNode }) {
-  return <PaneContext value={paneId}>{children}</PaneContext>;
+  return <PaneContext.Provider value={paneId}>{children}</PaneContext.Provider>;
 }
 
 export function usePaneInstanceId(): string {
@@ -921,7 +190,8 @@ export function usePaneInstance(): PaneInstanceConfig | null {
 
 export function usePaneTicker(paneId?: string) {
   const paneContextId = useContext(PaneContext);
-  const focusedPaneId = useAppSelector((state) => state.focusedPaneId);
+  const needsFocusedPane = paneId == null && paneContextId == null;
+  const focusedPaneId = useAppSelector((state) => (needsFocusedPane ? state.focusedPaneId : null));
   const scopedPaneId = paneId ?? paneContextId ?? focusedPaneId;
   const symbol = useAppSelector((state) => (
     scopedPaneId ? resolveTickerForPane(state, scopedPaneId) : null
@@ -964,7 +234,8 @@ export function useFocusedTicker() {
 
 export function usePaneCollection(paneId?: string) {
   const paneContextId = useContext(PaneContext);
-  const focusedPaneId = useAppSelector((state) => state.focusedPaneId);
+  const needsFocusedPane = paneId == null && paneContextId == null;
+  const focusedPaneId = useAppSelector((state) => (needsFocusedPane ? state.focusedPaneId : null));
   const scopedPaneId = paneId ?? paneContextId ?? focusedPaneId;
   const collectionId = useAppSelector((state) => (
     scopedPaneId ? resolveCollectionForPane(state, scopedPaneId) : null
@@ -997,105 +268,170 @@ export function usePaneSettingValue<T>(
   fallback: T,
   paneId?: string,
 ): [T, (value: SetStateAction<T>) => void] {
-  const { state, dispatch } = useAppState();
+  const dispatch = useAppDispatch();
+  const stateRef = useAppStateRef();
   const scopedPaneId = paneId ?? usePaneInstanceId();
-  const instance = findPaneInstance(state.config.layout, scopedPaneId);
+  const instance = useAppSelector((state) => findPaneInstance(state.config.layout, scopedPaneId) ?? null);
   const value = (instance?.settings?.[key] as T | undefined) ?? fallback;
 
-  const setValue = (nextValue: SetStateAction<T>) => {
-    const currentValue = (findPaneInstance(state.config.layout, scopedPaneId)?.settings?.[key] as T | undefined) ?? fallback;
+  const setValue = useCallback((nextValue: SetStateAction<T>) => {
+    const currentState = stateRef.current;
+    const currentValue = (findPaneInstance(currentState.config.layout, scopedPaneId)?.settings?.[key] as T | undefined) ?? fallback;
     const resolved = typeof nextValue === "function"
       ? (nextValue as (previousValue: T) => T)(currentValue)
       : nextValue;
-    const layout = setPaneSetting(state.config.layout, scopedPaneId, key, resolved);
-    const layouts = state.config.layouts.map((savedLayout, index) => (
-      index === state.config.activeLayoutIndex ? { ...savedLayout, layout } : savedLayout
+    const layout = setPaneSetting(currentState.config.layout, scopedPaneId, key, resolved);
+    const layouts = currentState.config.layouts.map((savedLayout, index) => (
+      index === currentState.config.activeLayoutIndex ? { ...savedLayout, layout } : savedLayout
     ));
-    const nextConfig = { ...state.config, layout, layouts };
+    const nextConfig = { ...currentState.config, layout, layouts };
     dispatch({ type: "SET_CONFIG", config: nextConfig });
-    saveConfig(nextConfig).catch(() => {});
-  };
+    scheduleConfigSave(nextConfig);
+  }, [dispatch, fallback, key, scopedPaneId, stateRef]);
 
   return [value, setValue];
 }
 
-export function createInitialState(config: AppConfig, sessionSnapshot: AppSessionSnapshot | null = null): AppState {
-  const paneState = reconcilePaneState(config, sessionSnapshot?.paneState ?? {});
-  const defaultFocusedPaneId = getPaneOrder(config.layout)[0] ?? null;
-  const focusedPaneId = sessionSnapshot?.focusedPaneId
-    && config.layout.instances.some((instance) => instance.instanceId === sessionSnapshot.focusedPaneId)
-    ? sessionSnapshot.focusedPaneId
-    : defaultFocusedPaneId;
-  return {
-    config,
-    tickers: new Map(),
-    financials: new Map(),
-    exchangeRates: new Map([["USD", 1]]),
-    brokerAccounts: {},
-    activePanel: sessionSnapshot?.activePanel === "right" ? "right" : "left",
-    focusedPaneId,
-    paneState,
-    recentTickers: config.recentTickers,
-    commandBarOpen: false,
-    commandBarQuery: "",
-    commandBarLaunchRequest: null,
-    refreshing: new Set(),
-    initialized: false,
-    statusBarVisible: sessionSnapshot?.statusBarVisible !== false,
-    gridlockTipVisible: false,
-    gridlockTipSequence: 0,
-    inputCaptured: false,
-    updateAvailable: null,
-    updateProgress: null,
-    updateCheckInProgress: false,
-    updateNotice: null,
-    layoutHistory: {},
-  };
-}
-
 export function AppProvider({
   config,
   children,
   sessionStore,
   sessionSnapshot = null,
+  desktopBridge,
+  desktopSnapshot = null,
 }: {
   config: AppConfig;
   children: ReactNode;
   sessionStore?: SessionStore;
   sessionSnapshot?: AppSessionSnapshot | null;
+  desktopBridge?: DesktopWindowBridge;
+  desktopSnapshot?: DesktopSharedStateSnapshot | null;
 }) {
-  // Sync the configured theme before descendants read the shared palette on first render.
-  syncTheme(config.theme);
-  const [state, dispatch] = useReducer(appReducer, { config, sessionSnapshot }, ({ config, sessionSnapshot: initialSessionSnapshot }) => (
-    createInitialState(config, initialSessionSnapshot)
-  ));
+  const [state, rawDispatch] = useReducer(
+    appReducer,
+    { config, sessionSnapshot, desktopSnapshot },
+    (initialState: {
+      config: AppConfig;
+      sessionSnapshot?: AppSessionSnapshot | null;
+      desktopSnapshot?: DesktopSharedStateSnapshot | null;
+    }) => {
+      const {
+        config: initialConfig,
+        sessionSnapshot: initialSessionSnapshot,
+        desktopSnapshot: initialDesktopSnapshot,
+      } = initialState;
+      const nextState = createInitialState(initialConfig, initialSessionSnapshot);
+      return initialDesktopSnapshot
+        ? appReducer(nextState, { type: "HYDRATE_DESKTOP_SNAPSHOT", snapshot: initialDesktopSnapshot })
+        : nextState;
+    },
+  );
+  // Sync the current theme before descendants read the shared palette during this render.
+  syncTheme(getEffectiveThemeId(state));
   const previousRecentTickers = useRef(state.recentTickers);
   const stateRef = useRef(state);
   const listenersRef = useRef(new Set<() => void>());
   const storeRef = useRef<AppContextStoreValue | null>(null);
+  const lastMainSyncRef = useRef<string | null>(null);
+  const lastDetachedPaneSyncRef = useRef<string | null>(null);
 
   stateRef.current = state;
 
+  const dispatch = useCallback((action: AppAction) => {
+    if (desktopBridge) {
+      rawDispatch(action);
+      return;
+    }
+
+    switch (action.type) {
+      case "SET_CONFIG":
+        rawDispatch({
+          ...action,
+          config: materializeDetachedConfig(action.config),
+        });
+        return;
+      case "UPDATE_LAYOUT":
+        rawDispatch({
+          ...action,
+          layout: materializeDetachedPanesAsFloating(action.layout),
+        });
+        return;
+      default:
+        rawDispatch(action);
+    }
+  }, [desktopBridge, rawDispatch]);
+
+  const buildDesktopSnapshot = useCallback((currentState: AppState): DesktopSharedStateSnapshot => ({
+    config: currentState.config,
+    paneState: currentState.paneState,
+    focusedPaneId: currentState.focusedPaneId,
+    activePanel: currentState.activePanel,
+    statusBarVisible: currentState.statusBarVisible,
+  }), []);
+
+  const serializeDesktopSnapshot = useCallback((snapshot: DesktopSharedStateSnapshot): string => JSON.stringify({
+    config: snapshot.config,
+    paneState: snapshot.paneState,
+    focusedPaneId: snapshot.focusedPaneId,
+    activePanel: snapshot.activePanel,
+    statusBarVisible: snapshot.statusBarVisible,
+  }), []);
+
+  const serializePaneState = useCallback((paneState: PaneRuntimeState | undefined): string => JSON.stringify(paneState ?? {}), []);
+
   if (!storeRef.current) {
     storeRef.current = {
       dispatch,
       getState: () => stateRef.current,
-      subscribe: (listener) => {
+      subscribe: (listener: () => void) => {
         listenersRef.current.add(listener);
         return () => {
           listenersRef.current.delete(listener);
         };
       },
     };
+  } else {
+    storeRef.current.dispatch = dispatch;
   }
 
   useEffect(() => {
-    if (previousRecentTickers.current !== state.recentTickers) {
-      previousRecentTickers.current = state.recentTickers;
-      saveConfig({ ...state.config, recentTickers: state.recentTickers }).catch(() => {});
-    }
+    if (sameStringList(previousRecentTickers.current, state.recentTickers)) return;
+    previousRecentTickers.current = state.recentTickers;
+    scheduleConfigSave({ ...state.config, recentTickers: state.recentTickers });
   }, [state.config, state.recentTickers]);
 
+  useEffect(() => {
+    if (!desktopBridge) return;
+    return desktopBridge.subscribeState((snapshot) => {
+      const currentSignature = serializeDesktopSnapshot(buildDesktopSnapshot(stateRef.current));
+      const nextSignature = serializeDesktopSnapshot(snapshot);
+      if (currentSignature === nextSignature) return;
+      if (desktopBridge.kind === "main") {
+        lastMainSyncRef.current = nextSignature;
+      } else if (desktopBridge.paneId) {
+        lastDetachedPaneSyncRef.current = serializePaneState(snapshot.paneState[desktopBridge.paneId] as PaneRuntimeState | undefined);
+      }
+      dispatch({ type: "HYDRATE_DESKTOP_SNAPSHOT", snapshot });
+    });
+  }, [buildDesktopSnapshot, desktopBridge, serializeDesktopSnapshot, serializePaneState]);
+
+  useEffect(() => {
+    if (desktopBridge?.kind !== "main" || !desktopBridge.syncMainState) return;
+    const snapshot = buildDesktopSnapshot(state);
+    const signature = serializeDesktopSnapshot(snapshot);
+    if (signature === lastMainSyncRef.current) return;
+    lastMainSyncRef.current = signature;
+    void desktopBridge.syncMainState(snapshot);
+  }, [buildDesktopSnapshot, desktopBridge, serializeDesktopSnapshot, state]);
+
+  useEffect(() => {
+    if (desktopBridge?.kind !== "detached" || !desktopBridge.replaceDetachedPaneState || !desktopBridge.paneId) return;
+    const paneSignature = serializePaneState(state.paneState[desktopBridge.paneId]);
+    if (paneSignature === lastDetachedPaneSyncRef.current) return;
+    lastDetachedPaneSyncRef.current = paneSignature;
+    void desktopBridge.replaceDetachedPaneState(desktopBridge.paneId, state.paneState[desktopBridge.paneId] ?? {});
+  }, [desktopBridge, serializePaneState, state.paneState]);
+
   useLayoutEffect(() => {
     stateRef.current = state;
     for (const listener of listenersRef.current) {
@@ -1105,5 +441,5 @@ export function AppProvider({
 
   usePersistSessionSnapshot(sessionStore, state, APP_SESSION_ID, APP_SESSION_SCHEMA_VERSION);
 
-  return <AppContext value={storeRef.current}>{children}</AppContext>;
+  return <AppContext.Provider value={storeRef.current}>{children}</AppContext.Provider>;
 }