gloomberb 0.5.0 → 0.6.0

package/src/app.tsx

@@ -1,32 +1,34 @@
+import { Box, ContextMenuProvider, useNativeRenderer, useRendererHost } from "./ui";
+import { ToastViewport, useToastHost } from "./ui/toast";
 import { useState, useEffect, useCallback, useRef, useMemo } from "react";
-import { useKeyboard, useRenderer } from "@opentui/react";
-import type { CliRenderer } from "@opentui/core";
+import { useShortcut } from "./react/input";
 import {
   AppProvider,
   getFocusedCollectionId,
   getFocusedTickerSymbol,
-  resolveCollectionForPane,
-  resolveTickerForPane,
-  useAppState,
+  useAppDispatch,
+  useAppSelector,
+  useAppStateRef,
+  type AppState,
 } from "./state/app-context";
 import { bindAppActivity, useAppActive } from "./state/app-activity";
 import { copyActiveSelection, isCopyShortcut, isPasteShortcut, pasteSystemClipboard } from "./utils/selection-clipboard";
 import { Header } from "./components/layout/header";
 import { StatusBar } from "./components/layout/status-bar";
 import { Shell } from "./components/layout/shell";
+import { DetachedPaneShell } from "./components/layout/detached-pane-shell";
 import { CommandBar } from "./components/command-bar/command-bar";
 import { OnboardingWizard } from "./components/onboarding/onboarding-wizard";
-import { DialogProvider, useDialog, useDialogState } from "@opentui-ui/dialog/react";
+import { useDialog, useDialogState } from "./ui/dialog";
 import { PluginRegistry } from "./plugins/registry";
-import { AppPersistence } from "./data/app-persistence";
-import { TickerRepository } from "./data/ticker-repository";
-import { ProviderRouter } from "./sources/provider-router";
+import type { TickerRepository } from "./data/ticker-repository";
 import { colors, syncTheme } from "./theme/colors";
 import {
   createPaneInstance,
   findPaneInstance,
   findPrimaryPaneInstance,
   isTickerPaneId,
+  materializeDetachedPanesAsFloating,
   normalizePaneLayout,
   resolveFollowBindingInstance,
   resolvePaneInstance,
@@ -42,22 +44,19 @@ import type { TickerRecord } from "./types/ticker";
 import type { DataProvider } from "./types/data-provider";
 import type { TickerFinancials } from "./types/financials";
 import type { BrokerAccount } from "./types/trading";
+import type { DesktopDockPreviewState, DesktopSharedStateSnapshot, DesktopWindowBridge } from "./types/desktop-window";
+import type { DesktopApplicationMenuBridge } from "./types/desktop-menu";
 import { resolveTickerSearch, upsertTickerFromSearchResult } from "./utils/ticker-search";
 
-// Built-in plugins
 import {
-  clearPersistedIbkrAccounts,
-  loadPersistedIbkrAccountMap,
-} from "./plugins/ibkr/account-cache";
-import { getIbkrConfigIdentity } from "./plugins/ibkr/config";
+  clearPersistedBrokerAccounts,
+  getBrokerAccountCacheSourceKey,
+  loadPersistedBrokerAccountMap,
+} from "./brokers/account-cache";
 import { chatController } from "./plugins/builtin/chat-controller";
 import { setLayoutManagerDispatch } from "./plugins/builtin/layout-manager";
-import { getLoadablePlugins } from "./plugins/catalog";
-import { saveConfig } from "./data/config-store";
-import { Toaster, toast } from "@opentui-ui/toast/react";
 import { canSelfUpdate, checkForUpdateDetailed, performUpdate, type ReleaseInfo } from "./updater";
 import { VERSION } from "./version";
-import { join } from "path";
 import {
   addPaneFloating,
   addPaneToLayout,
@@ -66,9 +65,11 @@ import {
   getDockLeafLayouts,
   getDockedPaneIds,
   getLeafRect,
+  gridlockAllPanes,
   isPaneInLayout,
   removePane,
 } from "./plugins/pane-manager";
+import { notifyGridlockComplete } from "./plugins/gridlock-notification";
 import {
   createBrokerInstanceId,
   getBrokerInstance,
@@ -78,7 +79,7 @@ import {
   APP_SESSION_SCHEMA_VERSION,
   reconcileAppSessionSnapshot,
   type AppSessionSnapshot,
-} from "./state/session-persistence";
+} from "./core/state/session-persistence";
 import { initializeAppState } from "./state/app-bootstrap";
 import { TickerRefreshQueue } from "./state/ticker-refresh-queue";
 import { PaneSettingsDialogContent } from "./components/pane-settings-dialog";
@@ -94,10 +95,21 @@ import {
 } from "./components/command-bar/workflow-ops";
 import { getPaneTemplateDisplayLabel } from "./components/command-bar/pane-template-display";
 import { debugLog } from "./utils/debug-log";
-import { MarketDataCoordinator, setSharedMarketDataCoordinator } from "./market-data/coordinator";
+import type { MarketDataCoordinator } from "./market-data/coordinator";
 import { instrumentFromTicker } from "./market-data/request-types";
-import { syncBrokerInstance } from "./brokers/sync-broker-instance";
+import {
+  restoreBrokerPortfoliosFromTickerPositions,
+  syncBrokerInstance,
+  syncBrokerInstances,
+  type SyncBrokerInstanceResult,
+} from "./brokers/sync-broker-instance";
 import { createAppNotifier } from "./notifications/app-notifier";
+import { createAppServices } from "./core/app-services";
+import {
+  saveConfigImmediately,
+  scheduleConfigSave,
+} from "./state/config-save-scheduler";
+import { measurePerf, measurePerfAsync } from "./utils/perf-marks";
 
 /** Global-level dedup: prevents concurrent refresh calls for the same symbol. */
 const refreshInFlight: Set<string> = (globalThis as any).__refreshInFlight ??= new Set<string>();
@@ -113,35 +125,72 @@ function isTickerContextPaneInstance(instance: PaneInstanceConfig): boolean {
   return instance.paneId === "portfolio-list" || isTickerPaneId(instance.paneId);
 }
 
-function summarizeError(error: unknown): Record<string, string> {
-  if (error instanceof Error) {
-    return {
-      name: error.name,
-      message: error.message,
-      stack: error.stack || "",
-    };
-  }
-  return { message: String(error) };
-}
-
 interface AppInnerProps {
   pluginRegistry: PluginRegistry;
   tickerRepository: TickerRepository;
   dataProvider: DataProvider;
   marketData: MarketDataCoordinator;
   sessionSnapshot?: AppSessionSnapshot | null;
+  desktopWindowBridge?: DesktopWindowBridge;
+  desktopApplicationMenuBridge?: DesktopApplicationMenuBridge;
 }
 
-function AppInner({ pluginRegistry, tickerRepository, dataProvider, marketData, sessionSnapshot = null }: AppInnerProps) {
-  const { state, dispatch } = useAppState();
+function AppInner({
+  pluginRegistry,
+  tickerRepository,
+  dataProvider,
+  marketData,
+  sessionSnapshot = null,
+  desktopWindowBridge,
+  desktopApplicationMenuBridge,
+}: AppInnerProps) {
+  const dispatch = useAppDispatch();
+  const stateRef = useAppStateRef();
+  const config = useAppSelector((state) => state.config);
+  const tickers = useAppSelector((state) => state.tickers);
+  const paneState = useAppSelector((state) => state.paneState);
+  const focusedPaneId = useAppSelector((state) => state.focusedPaneId);
+  const initialized = useAppSelector((state) => state.initialized);
+  const commandBarOpen = useAppSelector((state) => state.commandBarOpen);
+  const inputCaptured = useAppSelector((state) => state.inputCaptured);
+  const updateAvailable = useAppSelector((state) => state.updateAvailable);
+  const updateProgress = useAppSelector((state) => state.updateProgress);
+  const updateCheckInProgress = useAppSelector((state) => state.updateCheckInProgress);
+  const state = useMemo(() => ({
+    ...stateRef.current,
+    config,
+    tickers,
+    paneState,
+    focusedPaneId,
+    initialized,
+    commandBarOpen,
+    inputCaptured,
+    updateAvailable,
+    updateProgress,
+    updateCheckInProgress,
+  }) as AppState, [
+    commandBarOpen,
+    config,
+    focusedPaneId,
+    initialized,
+    inputCaptured,
+    paneState,
+    stateRef,
+    tickers,
+    updateAvailable,
+    updateCheckInProgress,
+    updateProgress,
+  ]);
   const appActive = useAppActive();
   const appActiveRef = useRef(appActive);
-  const renderer = useRenderer();
+  const rendererHost = useRendererHost();
+  const nativeRenderer = useNativeRenderer();
   const dialog = useDialog();
-  const stateRef = useRef(state);
-  stateRef.current = state;
+  const toast = useToastHost();
+  const isDetachedWindow = desktopWindowBridge?.kind === "detached";
+  const detachedPaneId = isDetachedWindow ? desktopWindowBridge.paneId ?? null : null;
+  const [desktopDockPreview, setDesktopDockPreview] = useState<DesktopDockPreviewState | null>(null);
   appActiveRef.current = appActive;
-  const focusedCollectionId = getFocusedCollectionId(state);
   const appNotifier = useMemo(() => createAppNotifier({
     isAppActive: () => appActiveRef.current,
     renderToast: (notification) => {
@@ -166,27 +215,23 @@ function AppInner({ pluginRegistry, tickerRepository, dataProvider, marketData,
       else if (type === "error") toastId = toast.error(notification.body, options);
       else toastId = toast.info(notification.body, options);
     },
-  }), []);
+    desktop: rendererHost.supportsNativeDesktopNotifications ? rendererHost : undefined,
+  }), [rendererHost, toast]);
   const notify = useCallback((body: string, options?: { type?: "info" | "success" | "error" }) => {
     pluginRegistry.notify({ body, ...options });
   }, [pluginRegistry]);
 
+  useEffect(() => {
+    if (desktopWindowBridge?.kind !== "main" || !desktopWindowBridge.subscribeDockPreview) return;
+    return desktopWindowBridge.subscribeDockPreview((preview) => {
+      setDesktopDockPreview(preview);
+    });
+  }, [desktopWindowBridge]);
+
   const resolvePaneTarget = useCallback((paneId: string, layout: LayoutConfig = state.config.layout): string | null => {
     return resolvePaneInstance(layout, paneId)?.instanceId ?? null;
   }, [state.config.layout]);
 
-  const getPreferredPortfolio = useCallback((ticker: TickerRecord | null) => {
-    const focusedPortfolio = state.config.portfolios.find((portfolio) => portfolio.id === focusedCollectionId);
-    if (focusedPortfolio) return focusedPortfolio;
-    if (ticker) {
-      for (const portfolioId of ticker.metadata.portfolios) {
-        const portfolio = state.config.portfolios.find((entry) => entry.id === portfolioId);
-        if (portfolio) return portfolio;
-      }
-    }
-    return state.config.portfolios[0] ?? null;
-  }, [focusedCollectionId, state.config.portfolios]);
-
   const runPaneTemplateWizard = useCallback(async (steps: WizardStep[]): Promise<Record<string, string> | null> => {
     const values: Record<string, string> = {};
 
@@ -293,7 +338,7 @@ function AppInner({ pluginRegistry, tickerRepository, dataProvider, marketData,
           index === state.config.activeLayoutIndex ? { ...savedLayout, layout: ensured.layout } : savedLayout
         ));
         dispatch({ type: "UPDATE_LAYOUT", layout: ensured.layout });
-        saveConfig({ ...state.config, layout: ensured.layout, layouts }).catch(() => {});
+        scheduleConfigSave({ ...state.config, layout: ensured.layout, layouts });
       }
       return ensured.instance.instanceId;
     })();
@@ -474,26 +519,17 @@ function AppInner({ pluginRegistry, tickerRepository, dataProvider, marketData,
     marketData.primeCachedFinancials(primeEntries);
   }, [marketData]);
 
-  // Import positions from a single broker instance
-  const importBrokerPositions = useCallback(async (
+  const applyBrokerImportResult = useCallback(async (
     instanceId: string,
-    tickerMap?: Map<string, TickerRecord>,
+    result: SyncBrokerInstanceResult,
+    baseConfig: AppConfig,
     options?: { refreshImportedTickers?: boolean },
   ) => {
-    const result = await syncBrokerInstance({
-      config: state.config,
-      instanceId,
-      brokers: pluginRegistry.brokers,
-      tickerRepository,
-      existingTickers: tickerMap ?? new Map(state.tickers),
-      resources: pluginRegistry.persistence.resources,
-    });
-
     dispatch({ type: "SET_BROKER_ACCOUNTS", instanceId, accounts: result.brokerAccounts });
 
-    if (result.config !== state.config) {
+    if (result.config !== baseConfig) {
       dispatch({ type: "SET_CONFIG", config: result.config });
-      await saveConfig(result.config);
+      await saveConfigImmediately(result.config);
       pluginRegistry.events.emit("config:changed", { config: result.config });
     }
 
@@ -505,31 +541,57 @@ function AppInner({ pluginRegistry, tickerRepository, dataProvider, marketData,
     }
 
     for (const position of result.positions) {
-      // Skip Yahoo Finance for options — IBKR symbols aren't resolvable there.
+      // Skip Yahoo Finance for broker option symbols; position marks are already available.
       // Position data (markPrice, marketValue, unrealizedPnl) is used directly.
       if (options?.refreshImportedTickers !== false && position.assetCategory !== "OPT") {
         refreshQuote(position.ticker, position.exchange, undefined, 1);
       }
     }
+  }, [dispatch, pluginRegistry.events, refreshQuote]);
+
+  // Import positions from a single broker instance
+  const importBrokerPositions = useCallback(async (
+    instanceId: string,
+    tickerMap?: Map<string, TickerRecord>,
+    options?: { refreshImportedTickers?: boolean; config?: AppConfig },
+  ) => {
+    const baseConfig = options?.config ?? stateRef.current.config;
+    const result = await syncBrokerInstance({
+      config: baseConfig,
+      instanceId,
+      brokers: pluginRegistry.brokers,
+      tickerRepository,
+      existingTickers: tickerMap ?? new Map(stateRef.current.tickers),
+      resources: pluginRegistry.persistence.resources,
+    });
+
+    await applyBrokerImportResult(instanceId, result, baseConfig, options);
 
     return result;
-  }, [dispatch, pluginRegistry.brokers, pluginRegistry.events, pluginRegistry.persistence.resources, refreshQuote, state.config, state.tickers, tickerRepository]);
+  }, [applyBrokerImportResult, pluginRegistry.brokers, pluginRegistry.persistence.resources, stateRef, tickerRepository]);
 
   // Auto-import positions from all configured broker instances
   const autoImportBrokerPositions = useCallback(async (tickerMap: Map<string, TickerRecord>) => {
-    let nextTickerMap = tickerMap;
-    for (const instance of state.config.brokerInstances) {
-      if (instance.enabled === false) continue;
-      try {
-        const result = await importBrokerPositions(instance.id, nextTickerMap, { refreshImportedTickers: false });
-        if (result) {
-          nextTickerMap = result.tickers;
-        }
-      } catch {
-        // Silently fail — broker import is best-effort on startup
-      }
+    const restoredConfig = restoreBrokerPortfoliosFromTickerPositions(stateRef.current.config, tickerMap.values());
+    if (restoredConfig !== stateRef.current.config) {
+      dispatch({ type: "SET_CONFIG", config: restoredConfig });
+      await saveConfigImmediately(restoredConfig);
+      pluginRegistry.events.emit("config:changed", { config: restoredConfig });
     }
-  }, [state.config.brokerInstances, importBrokerPositions]);
+
+    await syncBrokerInstances({
+      config: restoredConfig,
+      brokers: pluginRegistry.brokers,
+      tickerRepository,
+      existingTickers: tickerMap,
+      resources: pluginRegistry.persistence.resources,
+      onResult: async (result, instance, previousConfig) => {
+        await applyBrokerImportResult(instance.id, result, previousConfig, {
+          refreshImportedTickers: false,
+        });
+      },
+    });
+  }, [applyBrokerImportResult, dispatch, pluginRegistry.brokers, pluginRegistry.events, pluginRegistry.persistence.resources, stateRef, tickerRepository]);
 
   const startUpdate = useCallback((release: ReleaseInfo) => {
     dispatch({ type: "SET_UPDATE_PROGRESS", progress: { phase: "downloading", percent: 0 } });
@@ -576,14 +638,64 @@ function AppInner({ pluginRegistry, tickerRepository, dataProvider, marketData,
 
   // Check for updates on mount
   useEffect(() => {
+    if (isDetachedWindow) return;
     void runUpdateCheck(false);
-  }, [runUpdateCheck]);
+  }, [isDetachedWindow, runUpdateCheck]);
+
+  useEffect(() => {
+    if (desktopWindowBridge?.kind !== "main" || !desktopApplicationMenuBridge) return;
+    return desktopApplicationMenuBridge.subscribe((command) => {
+      switch (command.type) {
+        case "open-command-bar":
+          dispatch({ type: "SET_COMMAND_BAR", open: true, query: command.query });
+          break;
+        case "open-plugin-workflow":
+          pluginRegistry.openPluginCommandWorkflowFn(command.commandId);
+          break;
+        case "open-url":
+          void rendererHost.openExternal(command.url).catch((error) => {
+            const message = error instanceof Error ? error.message : String(error);
+            pluginRegistry.notify({ body: `Failed to open link: ${message}`, type: "error" });
+          });
+          break;
+        case "check-for-updates":
+          void runUpdateCheck(true);
+          break;
+        case "toggle-status-bar":
+          dispatch({ type: "TOGGLE_STATUS_BAR" });
+          break;
+        case "layout-undo":
+          dispatch({ type: "UNDO_LAYOUT" });
+          break;
+        case "layout-redo":
+          dispatch({ type: "REDO_LAYOUT" });
+          break;
+        case "layout-gridlock": {
+          const { width, height } = pluginRegistry.getTermSizeFn();
+          pluginRegistry.updateLayoutFn(gridlockAllPanes(stateRef.current.config.layout, { x: 0, y: 0, width, height }));
+          notifyGridlockComplete(pluginRegistry.notify.bind(pluginRegistry), () => {
+            dispatch({ type: "UNDO_LAYOUT" });
+          });
+          break;
+        }
+      }
+    });
+  }, [
+    desktopApplicationMenuBridge,
+    desktopWindowBridge?.kind,
+    dispatch,
+    pluginRegistry,
+    rendererHost,
+    runUpdateCheck,
+    stateRef,
+  ]);
 
   useEffect(() => {
+    if (isDetachedWindow) return;
     if (!state.updateAvailable || state.updateProgress || state.updateCheckInProgress) return;
     if (!canSelfUpdate(state.updateAvailable)) return;
     startUpdate(state.updateAvailable);
-  }, [startUpdate, state.updateAvailable, state.updateCheckInProgress, state.updateProgress]);
+  }, [isDetachedWindow, startUpdate, state.updateAvailable, state.updateCheckInProgress, state.updateProgress]);
 
   // Load tickers on mount
   useEffect(() => {
@@ -593,12 +705,13 @@ function AppInner({ pluginRegistry, tickerRepository, dataProvider, marketData,
       try {
         let persistedBrokerAccounts: Record<string, BrokerAccount[]> = {};
         try {
-          persistedBrokerAccounts = loadPersistedIbkrAccountMap(
+          persistedBrokerAccounts = loadPersistedBrokerAccountMap(
             pluginRegistry.persistence.resources,
             state.config.brokerInstances,
+            pluginRegistry.brokers,
           );
         } catch {}
-        await initializeAppState({
+        await measurePerfAsync("startup.app.initialize-state", () => initializeAppState({
           config: state.config,
           tickerRepository,
           dataProvider,
@@ -609,6 +722,10 @@ function AppInner({ pluginRegistry, tickerRepository, dataProvider, marketData,
           refreshQuote,
           autoImportBrokerPositions,
           persistedBrokerAccounts,
+        }), {
+          brokerInstanceCount: state.config.brokerInstances.length,
+          layoutPaneCount: state.config.layout.instances.length,
+          sessionHydrationTargetCount: sessionSnapshot?.hydrationTargets.length ?? 0,
         });
       } catch (err) {
         // Will show empty state
@@ -622,6 +739,10 @@ function AppInner({ pluginRegistry, tickerRepository, dataProvider, marketData,
     if (!focusedTickerSymbol) return;
     const ticker = state.tickers.get(focusedTickerSymbol);
     if (!ticker) return;
+    appLog.info("focused ticker prefetch scheduled", {
+      symbol: ticker.metadata.ticker,
+      exchange: ticker.metadata.exchange,
+    });
     marketData.prefetchTicker(instrumentFromTicker(ticker, ticker.metadata.ticker));
   }, [focusedTickerSymbol, marketData, state.tickers]);
 
@@ -640,21 +761,25 @@ function AppInner({ pluginRegistry, tickerRepository, dataProvider, marketData,
   pluginRegistry.getPluginConfigValueFn = (pluginId, key) => (
     (state.config.pluginConfig[pluginId]?.[key] as any) ?? null
   );
-  pluginRegistry.setPluginConfigValueFn = async (pluginId, key, value) => {
+  const setPluginConfigValues = async (pluginId: string, values: Record<string, unknown>) => {
     const nextConfig = {
       ...state.config,
       pluginConfig: {
         ...state.config.pluginConfig,
         [pluginId]: {
           ...(state.config.pluginConfig[pluginId] ?? {}),
-          [key]: value,
+          ...values,
         },
       },
     };
     dispatch({ type: "SET_CONFIG", config: nextConfig });
-    await saveConfig(nextConfig);
+    await saveConfigImmediately(nextConfig);
     pluginRegistry.events.emit("config:changed", { config: nextConfig });
   };
+  pluginRegistry.setPluginConfigValueFn = async (pluginId, key, value) => {
+    await setPluginConfigValues(pluginId, { [key]: value });
+  };
+  pluginRegistry.setPluginConfigValuesFn = setPluginConfigValues;
   pluginRegistry.deletePluginConfigValueFn = async (pluginId, key) => {
     const currentPluginConfig = state.config.pluginConfig[pluginId];
     if (!currentPluginConfig || !(key in currentPluginConfig)) return;
@@ -674,11 +799,14 @@ function AppInner({ pluginRegistry, tickerRepository, dataProvider, marketData,
       pluginConfig: nextAllPluginConfig,
     };
     dispatch({ type: "SET_CONFIG", config: nextConfig });
-    await saveConfig(nextConfig);
+    await saveConfigImmediately(nextConfig);
     pluginRegistry.events.emit("config:changed", { config: nextConfig });
   };
-  if (dataProvider instanceof ProviderRouter) {
-    dataProvider.setConfigAccessor(() => state.config);
+  const configurableProvider = dataProvider as DataProvider & {
+    setConfigAccessor?: (accessor: () => AppConfig) => void;
+  };
+  if (typeof configurableProvider.setConfigAccessor === "function") {
+    configurableProvider.setConfigAccessor(() => state.config);
   }
   pluginRegistry.createBrokerInstanceFn = async (brokerType, label, values) => {
     const instanceId = createBrokerInstanceId(
@@ -699,34 +827,58 @@ function AppInner({ pluginRegistry, tickerRepository, dataProvider, marketData,
       brokerInstances: [...state.config.brokerInstances, instance],
     };
     dispatch({ type: "SET_CONFIG", config: nextConfig });
-    await saveConfig(nextConfig);
+    await saveConfigImmediately(nextConfig);
     pluginRegistry.events.emit("config:changed", { config: nextConfig });
     return instance;
   };
-  pluginRegistry.updateBrokerInstanceFn = async (instanceId, values) => {
+  pluginRegistry.connectBrokerInstanceFn = async (instanceId) => {
+    const instance = getBrokerInstance(state.config.brokerInstances, instanceId);
+    if (!instance) throw new Error("Broker profile not found.");
+    if (instance.enabled === false) throw new Error(`Broker profile "${instance.label}" is disabled.`);
+
+    const broker = pluginRegistry.brokers.get(instance.brokerType);
+    if (!broker) throw new Error(`Broker "${instance.brokerType}" is not available.`);
+
+    const valid = await broker.validate(instance).catch(() => false);
+    if (!valid) throw new Error(`${broker.name} setup is incomplete.`);
+
+    await broker.connect?.(instance);
+    if (broker.listAccounts) {
+      const accounts = await broker.listAccounts(instance);
+      dispatch({ type: "SET_BROKER_ACCOUNTS", instanceId, accounts });
+    }
+  };
+  pluginRegistry.updateBrokerInstanceFn = async (instanceId, values, options = {}) => {
     const currentInstance = state.config.brokerInstances.find((instance) => instance.id === instanceId);
     const nextInstances = state.config.brokerInstances.map((instance) =>
       instance.id === instanceId
-        ? {
-          ...instance,
-          connectionMode: typeof values.connectionMode === "string" ? values.connectionMode : instance.connectionMode,
-          config: { ...instance.config, ...values },
-        }
+        ? (() => {
+          const nextValues = options.replaceConfig ? values : { ...instance.config, ...values };
+          return {
+            ...instance,
+            label: options.label ?? instance.label,
+            enabled: options.enabled ?? instance.enabled,
+            connectionMode: typeof nextValues.connectionMode === "string" ? nextValues.connectionMode : instance.connectionMode,
+            config: nextValues,
+          };
+        })()
         : instance,
     );
     const nextInstance = nextInstances.find((instance) => instance.id === instanceId);
-    const shouldClearIbkrAccounts = currentInstance?.brokerType === "ibkr"
-      && nextInstance?.brokerType === "ibkr"
-      && getIbkrConfigIdentity(currentInstance.config) !== getIbkrConfigIdentity(nextInstance.config);
-    if (shouldClearIbkrAccounts) {
-      clearPersistedIbkrAccounts(pluginRegistry.persistence.resources, instanceId);
+    const broker = currentInstance ? pluginRegistry.brokers.get(currentInstance.brokerType) : null;
+    const shouldClearBrokerAccounts = currentInstance
+      && nextInstance
+      && currentInstance.brokerType === nextInstance.brokerType
+      && getBrokerAccountCacheSourceKey(currentInstance, broker) !== getBrokerAccountCacheSourceKey(nextInstance, broker);
+    if (shouldClearBrokerAccounts) {
+      clearPersistedBrokerAccounts(pluginRegistry.persistence.resources, currentInstance);
     }
     const nextConfig = {
       ...state.config,
       brokerInstances: nextInstances,
     };
     dispatch({ type: "SET_CONFIG", config: nextConfig });
-    await saveConfig(nextConfig);
+    await saveConfigImmediately(nextConfig);
     pluginRegistry.events.emit("config:changed", { config: nextConfig });
   };
   pluginRegistry.syncBrokerInstanceFn = async (instanceId) => {
@@ -736,7 +888,7 @@ function AppInner({ pluginRegistry, tickerRepository, dataProvider, marketData,
     const instance = getBrokerInstance(state.config.brokerInstances, instanceId);
     if (!instance) return;
 
-    clearPersistedIbkrAccounts(pluginRegistry.persistence.resources, instanceId);
+    clearPersistedBrokerAccounts(pluginRegistry.persistence.resources, instance);
 
     const broker = pluginRegistry.brokers.get(instance.brokerType);
     await broker?.disconnect?.(instance).catch(() => {});
@@ -793,16 +945,23 @@ function AppInner({ pluginRegistry, tickerRepository, dataProvider, marketData,
 
     dispatch({ type: "SET_CONFIG", config: nextConfig });
     dispatch({ type: "SET_TICKERS", tickers: nextTickers });
-    await saveConfig(nextConfig);
+    await saveConfigImmediately(nextConfig);
     pluginRegistry.events.emit("config:changed", { config: nextConfig });
   };
 
   // Wire up navigation functions
   pluginRegistry.selectTickerFn = (symbol, paneId) => selectTickerInPane(symbol, paneId);
-  pluginRegistry.switchPanelFn = (panel) => dispatch({ type: "SET_ACTIVE_PANEL", panel });
+  pluginRegistry.switchPanelFn = (panel) => {
+    if (isDetachedWindow) return;
+    dispatch({ type: "SET_ACTIVE_PANEL", panel });
+  };
   pluginRegistry.switchTabFn = (tabId, paneId) => switchDetailTab(tabId, paneId);
-  pluginRegistry.openCommandBarFn = (query) => dispatch({ type: "SET_COMMAND_BAR", open: true, query });
+  pluginRegistry.openCommandBarFn = (query) => {
+    if (isDetachedWindow) return;
+    dispatch({ type: "SET_COMMAND_BAR", open: true, query });
+  };
   pluginRegistry.openPluginCommandWorkflowFn = (commandId) => {
+    if (isDetachedWindow) return;
     dispatch({
       type: "SET_COMMAND_BAR",
       open: true,
@@ -820,7 +979,7 @@ function AppInner({ pluginRegistry, tickerRepository, dataProvider, marketData,
       dispatch({ type: "PUSH_LAYOUT_HISTORY" });
     }
     dispatch({ type: "UPDATE_LAYOUT", layout: normalizedLayout });
-    saveConfig({ ...currentState.config, layout: normalizedLayout, layouts }).catch(() => {});
+    scheduleConfigSave({ ...currentState.config, layout: normalizedLayout, layouts });
   };
   const resolvePanelForPane = useCallback((paneId: string, layout: LayoutConfig = state.config.layout): "left" | "right" => {
     const instanceId = resolvePaneTarget(paneId, layout);
@@ -1022,10 +1181,17 @@ function AppInner({ pluginRegistry, tickerRepository, dataProvider, marketData,
   }, [dataProvider, dialog, dispatch, persistLayout, pluginRegistry, resolvePaneTarget, tickerRepository]);
 
   pluginRegistry.getLayoutFn = () => state.config.layout;
-  pluginRegistry.updateLayoutFn = (layout) => persistLayout(layout);
+  pluginRegistry.updateLayoutFn = (layout) => {
+    if (isDetachedWindow) return;
+    persistLayout(layout);
+  };
   pluginRegistry.openPaneSettingsFn = (paneId) => { void openPaneSettings(paneId); };
-  pluginRegistry.showPaneFn = (paneId) => showPane(paneId);
+  pluginRegistry.showPaneFn = (paneId) => {
+    if (isDetachedWindow) return;
+    showPane(paneId);
+  };
   pluginRegistry.createPaneFromTemplateAsyncFn = async (templateId, options) => {
+    if (isDetachedWindow) return;
     await createPaneTemplateOrThrow(templateId, options, {
       dataProvider,
       tickerRepository,
@@ -1036,7 +1202,10 @@ function AppInner({ pluginRegistry, tickerRepository, dataProvider, marketData,
       placePaneInstance,
     });
   };
-  pluginRegistry.createPaneFromTemplateFn = (templateId, options) => { void createPaneFromTemplate(templateId, options); };
+  pluginRegistry.createPaneFromTemplateFn = (templateId, options) => {
+    if (isDetachedWindow) return;
+    void createPaneFromTemplate(templateId, options);
+  };
   pluginRegistry.applyPaneSettingValueFn = async (paneId, field, value) => {
     await applyPaneSettingFieldValueShared(paneId, field, value, {
       dataProvider,
@@ -1048,11 +1217,18 @@ function AppInner({ pluginRegistry, tickerRepository, dataProvider, marketData,
     });
   };
   pluginRegistry.hidePaneFn = (paneId) => {
+    if (isDetachedWindow) return;
     const instanceId = resolvePaneTarget(paneId);
     if (!instanceId || !isPaneInLayout(state.config.layout, instanceId)) return;
     persistLayout(removePane(state.config.layout, instanceId));
   };
   pluginRegistry.focusPaneFn = (paneId) => {
+    if (isDetachedWindow) {
+      if (paneId === detachedPaneId) {
+        dispatch({ type: "FOCUS_PANE", paneId });
+      }
+      return;
+    }
     const instanceId = resolvePaneTarget(paneId);
     if (!instanceId || !isPaneInLayout(state.config.layout, instanceId)) {
       showPane(paneId);
@@ -1069,6 +1245,7 @@ function AppInner({ pluginRegistry, tickerRepository, dataProvider, marketData,
     activatePane(instanceId, layout);
   };
   pluginRegistry.pinTickerFn = (symbol, options) => {
+    if (isDetachedWindow) return;
     const paneType = options?.paneType ?? "ticker-detail";
     const paneDef = pluginRegistry.panes.get(paneType);
     if (!paneDef) return;
@@ -1096,6 +1273,7 @@ function AppInner({ pluginRegistry, tickerRepository, dataProvider, marketData,
   };
 
   pluginRegistry.navigateTickerFn = (rawSymbol) => {
+    if (isDetachedWindow) return;
     (async () => {
       try {
       // Resolve or create the ticker in the local database
@@ -1170,7 +1348,7 @@ function AppInner({ pluginRegistry, tickerRepository, dataProvider, marketData,
           activatePane(detailPane.instanceId, nextLayout);
         }
       } else {
-        pluginRegistry.pinTickerFn(symbol, { floating: false });
+        pluginRegistry.pinTicker(symbol, { floating: false });
       }
       } catch (err) {
         const message = err instanceof Error ? err.message : String(err);
@@ -1194,7 +1372,7 @@ function AppInner({ pluginRegistry, tickerRepository, dataProvider, marketData,
   useEffect(() => {
     if (state.config.layouts !== prevLayouts.current) {
       prevLayouts.current = state.config.layouts;
-      saveConfig(state.config).catch(() => {});
+      scheduleConfigSave(state.config);
     }
   }, [state.config.layouts, state.config]);
 
@@ -1216,13 +1394,13 @@ function AppInner({ pluginRegistry, tickerRepository, dataProvider, marketData,
   const focusedDetailTab = state.focusedPaneId ? state.paneState[state.focusedPaneId]?.activeTabId : undefined;
 
   // Global keyboard shortcuts
-  useKeyboard((event) => {
-    if (isCopyShortcut(event) && copyActiveSelection(renderer)) {
+  useShortcut((event) => {
+    if (isCopyShortcut(event) && copyActiveSelection(nativeRenderer)) {
       event.preventDefault();
       event.stopPropagation();
       return;
     }
-    if (isPasteShortcut(event) && pasteSystemClipboard(renderer)) {
+    if (isPasteShortcut(event) && pasteSystemClipboard(nativeRenderer)) {
       event.preventDefault();
       event.stopPropagation();
       return;
@@ -1231,18 +1409,25 @@ function AppInner({ pluginRegistry, tickerRepository, dataProvider, marketData,
     // Skip all global shortcuts when a dialog is open
     if (dialogOpen) return;
 
-    // Ctrl+P: toggle command bar (backtick handled in command-bar itself for close)
-    if (event.name === "p" && event.ctrl) {
+    // Ctrl+P / Cmd+K: toggle command bar (backtick close is handled in command-bar.tsx)
+    if (!isDetachedWindow && (
+      (event.name === "p" && event.ctrl)
+      || (event.name === "k" && (event.meta || event.super))
+    )) {
+      event.preventDefault();
+      event.stopPropagation();
       dispatch({ type: "TOGGLE_COMMAND_BAR" });
       return;
     }
     // Backtick opens command bar (close is handled in command-bar.tsx)
-    if (event.name === "`" && !state.commandBarOpen) {
+    if (!isDetachedWindow && event.name === "`" && !state.commandBarOpen) {
+      event.preventDefault();
+      event.stopPropagation();
       dispatch({ type: "SET_COMMAND_BAR", open: true, query: "" });
       return;
     }
     // Ctrl+1-9: switch layouts (works even when input is captured)
-    if (/^[1-9]$/.test(event.name ?? "") && event.ctrl && (state.config.layouts ?? []).length > 1) {
+    if (!isDetachedWindow && /^[1-9]$/.test(event.name ?? "") && event.ctrl && (state.config.layouts ?? []).length > 1) {
       const idx = parseInt(event.name!, 10) - 1;
       const layouts = state.config.layouts ?? [];
       if (idx < layouts.length && idx !== state.config.activeLayoutIndex) {
@@ -1268,8 +1453,8 @@ function AppInner({ pluginRegistry, tickerRepository, dataProvider, marketData,
       } else {
         dispatch({ type: "FOCUS_NEXT", paneOrder });
       }
-    } else if (event.name === "q" && !(focusedPane?.paneId === "ticker-detail" && focusedDetailTab === "financials")) {
-      renderer.destroy();
+    } else if (!isDetachedWindow && event.name === "q" && !(focusedPane?.paneId === "ticker-detail" && focusedDetailTab === "financials")) {
+      rendererHost.requestExit();
     } else if (event.name === "r") {
       // Refresh focused ticker context.
       if (focusedTickerSymbol) {
@@ -1281,7 +1466,7 @@ function AppInner({ pluginRegistry, tickerRepository, dataProvider, marketData,
       for (const t of state.tickers.values()) {
         refreshTicker(t.metadata.ticker, t.metadata.exchange, t, 1);
       }
-    } else if (event.name === "a" && focusedTickerSymbol) {
+    } else if (!isDetachedWindow && event.name === "a" && focusedTickerSymbol) {
       // Open ticker actions
       const actions = [...pluginRegistry.tickerActions.values()];
       const ticker = state.tickers.get(focusedTickerSymbol);
@@ -1306,53 +1491,90 @@ function AppInner({ pluginRegistry, tickerRepository, dataProvider, marketData,
     }
   });
 
+  if (desktopWindowBridge?.kind === "detached" && desktopWindowBridge.paneId) {
+    return (
+      <ContextMenuProvider pluginRegistry={pluginRegistry}>
+        <Box flexDirection="column" flexGrow={1} backgroundColor={colors.bg}>
+          <DetachedPaneShell
+            pluginRegistry={pluginRegistry}
+            desktopWindowBridge={{ ...desktopWindowBridge, kind: "detached", paneId: desktopWindowBridge.paneId }}
+          />
+          <ToastViewport position="bottom-right" />
+        </Box>
+      </ContextMenuProvider>
+    );
+  }
+
   return (
-    <box flexDirection="column" flexGrow={1} backgroundColor={colors.bg}>
-      <Header />
-      <Shell pluginRegistry={pluginRegistry} />
-      <StatusBar />
-      {state.commandBarOpen && (
-        <CommandBar
-          dataProvider={dataProvider}
-          tickerRepository={tickerRepository}
+    <ContextMenuProvider pluginRegistry={pluginRegistry}>
+      <Box flexDirection="column" flexGrow={1} backgroundColor={colors.bg}>
+        <Header />
+        <Shell
           pluginRegistry={pluginRegistry}
-          quitApp={() => renderer.destroy()}
-          onCheckForUpdates={() => runUpdateCheck(true)}
+          desktopWindowBridge={desktopWindowBridge}
+          desktopDockPreview={desktopDockPreview}
         />
-      )}
-      <Toaster position="bottom-right" />
-    </box>
+        <StatusBar />
+        {state.commandBarOpen && (
+          <CommandBar
+            dataProvider={dataProvider}
+            tickerRepository={tickerRepository}
+            pluginRegistry={pluginRegistry}
+            quitApp={() => rendererHost.requestExit()}
+            onCheckForUpdates={() => runUpdateCheck(true)}
+          />
+        )}
+        <ToastViewport position="bottom-right" />
+      </Box>
+    </ContextMenuProvider>
   );
 }
 
 interface AppProps {
   config: AppConfig;
-  renderer: CliRenderer;
   externalPlugins?: import("./plugins/loader").LoadedExternalPlugin[];
   cliLaunchRequest?: CliLaunchRequest | null;
+  desktopWindowBridge?: DesktopWindowBridge;
+  desktopApplicationMenuBridge?: DesktopApplicationMenuBridge;
+  desktopSnapshot?: DesktopSharedStateSnapshot | null;
 }
 
 export function App({
   config: initialConfig,
-  renderer,
   externalPlugins = [],
   cliLaunchRequest = null,
+  desktopWindowBridge,
+  desktopApplicationMenuBridge,
+  desktopSnapshot = null,
 }: AppProps) {
+  const renderer = useNativeRenderer();
+  const effectiveInitialConfig = useMemo(() => {
+    const baseConfig = desktopSnapshot?.config ?? initialConfig;
+    if (desktopWindowBridge) return baseConfig;
+    return {
+      ...baseConfig,
+      layout: materializeDetachedPanesAsFloating(baseConfig.layout),
+      layouts: baseConfig.layouts.map((entry) => ({
+        ...entry,
+        layout: materializeDetachedPanesAsFloating(entry.layout),
+      })),
+    };
+  }, [desktopSnapshot?.config, desktopWindowBridge, initialConfig]);
   const initialCliLaunch = useMemo(() => {
     if (!cliLaunchRequest) {
-      return { config: initialConfig, launchState: undefined };
+      return { config: effectiveInitialConfig, launchState: undefined };
     }
-    return cliLaunchRequest.applyConfig(initialConfig, {
+    return cliLaunchRequest.applyConfig(effectiveInitialConfig, {
       terminalWidth: renderer.terminalWidth,
       terminalHeight: renderer.terminalHeight,
     });
-  }, [cliLaunchRequest, initialConfig, renderer.terminalHeight, renderer.terminalWidth]);
+  }, [cliLaunchRequest, effectiveInitialConfig, renderer.terminalHeight, renderer.terminalWidth]);
   const cliLaunchStateRef = useRef(initialCliLaunch.launchState);
 
   const [config, setConfig] = useState(() => {
     return initialCliLaunch.config;
   });
-  const [showOnboarding, setShowOnboarding] = useState(!initialConfig.onboardingComplete);
+  const [showOnboarding, setShowOnboarding] = useState(!effectiveInitialConfig.onboardingComplete);
 
   // Keep the shared palette aligned before this render builds any JSX that reads `colors`.
   syncTheme(config.theme);
@@ -1360,44 +1582,44 @@ export function App({
   useEffect(() => bindAppActivity(renderer), [renderer]);
 
   const services = useMemo(() => {
-    const dbPath = join(config.dataDir, ".gloomberb-cache.db");
-    const persistence = new AppPersistence(dbPath);
-    const tickerRepository = new TickerRepository(persistence.tickers);
-    const providerRouter = new ProviderRouter(null, [], persistence.resources);
-    const dataProvider: DataProvider = providerRouter;
-    const marketData = new MarketDataCoordinator(dataProvider);
-    const pluginRegistry = new PluginRegistry(renderer, dataProvider, tickerRepository, persistence);
-    providerRouter.attachRegistry(pluginRegistry);
-    pluginRegistry.getConfigFn = () => config;
-    pluginRegistry.getLayoutFn = () => config.layout;
-
-    for (const plugin of getLoadablePlugins(externalPlugins)) {
-      pluginRegistry.register(plugin);
-    }
-
-    return {
-      persistence,
-      tickerRepository,
-      providerRouter,
-      dataProvider,
-      marketData,
-      pluginRegistry,
-    };
-  }, [config.dataDir, externalPlugins, renderer]);
-
-  if (services.marketData !== null) {
-    setSharedMarketDataCoordinator(services.marketData);
-  }
+    return measurePerf("startup.app.create-services", () => (
+      createAppServices({ config, externalPlugins })
+    ), {
+      externalPluginCount: externalPlugins.length,
+      disabledPluginCount: config.disabledPlugins.length,
+      brokerInstanceCount: config.brokerInstances.length,
+    });
+  }, [config.dataDir, externalPlugins]);
 
   useEffect(() => {
-    return () => {
-      setSharedMarketDataCoordinator(null);
-      services.pluginRegistry.destroy();
-      services.persistence.close();
-    };
+    return () => services.destroy();
   }, [services]);
 
   const sessionSnapshot = useMemo(() => {
+    if (desktopWindowBridge?.kind === "detached") {
+      const baseSessionSnapshot = reconcileAppSessionSnapshot(
+        config,
+        services.persistence.sessions.get<AppSessionSnapshot>(APP_SESSION_ID, APP_SESSION_SCHEMA_VERSION)?.value ?? null,
+      ) ?? {
+        paneState: {},
+        focusedPaneId: null,
+        activePanel: "left" as const,
+        statusBarVisible: true,
+        openPaneIds: [],
+        hydrationTargets: [],
+        exchangeCurrencies: [],
+        savedAt: Date.now(),
+      };
+      return desktopSnapshot
+        ? {
+          ...baseSessionSnapshot,
+          paneState: desktopSnapshot.paneState,
+          focusedPaneId: desktopSnapshot.focusedPaneId,
+          activePanel: desktopSnapshot.activePanel,
+          statusBarVisible: desktopSnapshot.statusBarVisible,
+        }
+        : null;
+    }
     const persisted = services.persistence.sessions.get<AppSessionSnapshot>(APP_SESSION_ID, APP_SESSION_SCHEMA_VERSION)?.value ?? null;
     const reconciled = reconcileAppSessionSnapshot(config, persisted);
     if (!cliLaunchRequest?.applySessionSnapshot) {
@@ -1408,7 +1630,7 @@ export function App({
       reconciled,
       cliLaunchStateRef.current,
     );
-  }, [cliLaunchRequest, config, services.persistence.sessions]);
+  }, [cliLaunchRequest, config, desktopSnapshot, desktopWindowBridge?.kind, services.persistence.sessions]);
 
   if (showOnboarding) {
     return (
@@ -1424,21 +1646,22 @@ export function App({
   }
 
   return (
-    <AppProvider config={config} sessionStore={services.persistence.sessions} sessionSnapshot={sessionSnapshot}>
-      <DialogProvider
-        size="medium"
-        dialogOptions={{ style: { backgroundColor: colors.bg, borderColor: colors.borderFocused, borderStyle: "single", paddingX: 2, paddingY: 1 } }}
-        backdropColor="#000000"
-        backdropOpacity={0.8}
-      >
-        <AppInner
-          pluginRegistry={services.pluginRegistry}
-          tickerRepository={services.tickerRepository}
-          dataProvider={services.dataProvider}
-          marketData={services.marketData}
-          sessionSnapshot={sessionSnapshot}
-        />
-      </DialogProvider>
+    <AppProvider
+      config={config}
+      sessionStore={desktopWindowBridge?.kind === "detached" ? undefined : services.persistence.sessions}
+      sessionSnapshot={sessionSnapshot}
+      desktopBridge={desktopWindowBridge}
+      desktopSnapshot={desktopSnapshot}
+    >
+      <AppInner
+        pluginRegistry={services.pluginRegistry}
+        tickerRepository={services.tickerRepository}
+        dataProvider={services.dataProvider}
+        marketData={services.marketData}
+        sessionSnapshot={sessionSnapshot}
+        desktopWindowBridge={desktopWindowBridge}
+        desktopApplicationMenuBridge={desktopApplicationMenuBridge}
+      />
     </AppProvider>
   );
 }