@forgecharts/sdk 1.1.27 → 1.1.29

package/src/react/shell/ManagedAppShell.tsx

@@ -1,699 +0,0 @@
-/**
- * ManagedAppShell — stateful chart application shell.
- *
- * Owns all workspace state (tabs, symbol, timeframe, layout persistence, etc.)
- * and wires injected API clients to ChartWorkspace. App-specific drawers (script,
- * watchlist, trade) are passed as render-prop factories so this shell never
- * imports from the app layer.
- */
-
-import React, {
-  useState,
-  useEffect,
-  useRef,
-  useCallback,
-  forwardRef,
-  useImperativeHandle,
-} from 'react';
-import { ChartCanvas } from '../canvas/ChartCanvas';
-import type { ChartCanvasHandle } from '../canvas/ChartCanvas';
-import { ChartWorkspace } from '../workspace/ChartWorkspace';
-import { DEFAULT_FAVORITES } from '../workspace/toolbars/TopToolbar';
-import type { LayoutRecord } from '../workspace/LayoutMenu';
-import { useChartCapabilities } from '../hooks/useChartCapabilities';
-import { LicenseManager } from '../../';
-import type { LicensePayload } from '../../';
-import type { IDatafeed, ChartTheme, ChartLayout, IndicatorConfig, ISymbolResolver, ChartRuntimeConfig } from '@forgecharts/types';
-import type { TradingBridgeCallbacks } from '../trading/TradingBridge';
-import type { TradingSession } from '../workspace/toolbars/BottomToolbar';
-
-// ─── API surface injected from the host app ───────────────────────────────────
-
-export type LayoutsAPI = {
-  list:   ()                                                               => Promise<LayoutRecord[]>;
-  get:    (id: string)                                                     => Promise<LayoutRecord>;
-  create: (data: { name: string; symbol: string; timeframe: string; config: Record<string, unknown> }) => Promise<LayoutRecord>;
-  update: (id: string, data: Partial<{ name: string; symbol: string; timeframe: string; config: Record<string, unknown> }>) => Promise<LayoutRecord>;
-  remove: (id: string)                                                     => Promise<void>;
-};
-
-export type PreferencesAPI = {
-  get: <T = Record<string, unknown>>() => Promise<T>;
-  put: (data: Record<string, unknown>)  => Promise<void>;
-};
-
-// ─── Component props ──────────────────────────────────────────────────────────
-
-export type ManagedAppShellProps = {
-  datafeed:           IDatafeed;
-  layouts:            LayoutsAPI;
-  preferences:        PreferencesAPI;
-  /** Resolver used by the built-in symbol search dialog. */
-  symbolResolver:     ISymbolResolver;
-  /**
-   * Async callback that returns the current user's Bearer token.
-   * Used to authenticate the internal `/api/license` fetch and can be
-   * forwarded to `TChart` / `ReferenceAPI` instances that need auth.
-   * If omitted, requests are sent without `Authorization` headers.
-   */
-  getAuthToken?:      () => string | Promise<string>;
-  /**
-   * Base URL of the ForgeCharts API, e.g. `"https://charts.myapp.com"`.
-   * Defaults to the current origin.  Set this when the chart is embedded
-   * on a different domain from the API server.
-   */
-  apiUrl?:            string;
-  /**
-   * Optional callback to resolve an exchange logo image URL.
-   * Receives the exchange code (e.g. "BINANCE") and returns a URL string or
-   * null/undefined to suppress the logo. If omitted, no logo is shown.
-   * ForgeCharts Studio sets this to the /api/logos/ endpoint.
-   */
-  getExchangeLogoUrl?: (exchange: string) => string | null | undefined;
-  /**
-   * Optional host-level feature overrides applied on top of the license.
-   * Set a flag to `false` to suppress a feature even when the license permits
-   * it.  Omitting the prop (or individual fields) defers fully to the license.
-   */
-  config?: ChartRuntimeConfig;
-  /**
-   * Optional trading bridge callbacks threaded to every ChartCanvas instance.
-   *
-   * Provide this when `enableOrderEntry` / `enableDraggableOrders` etc. are
-   * active so the chart can emit intents to your broker layer.
-   * Use `createTradingBridgeLogger(bridge)` in dev for structured logging.
-   */
-  tradingBridge?: TradingBridgeCallbacks;
-  renderScriptDrawer?:    (props: { onClose: () => void; onAddIndicator: (c: IndicatorConfig)        => void }) => React.ReactElement | null;
-  renderWatchlistDrawer?: (props: { onClose: () => void; onSelectSymbol: (sym: string)               => void }) => React.ReactElement | null;
-  renderTradeDrawer?:     (props: { onClose: () => void })                                                      => React.ReactElement | null;
-};
-
-// ─── Imperative handle (optional — exposes active chart handle) ───────────────
-
-export type ManagedAppShellHandle = {
-  getActiveChartHandle: () => ChartCanvasHandle | null;
-};
-
-// ─── Helpers ──────────────────────────────────────────────────────────────────
-
-function uid() { return Math.random().toString(36).slice(2, 10); }
-
-const DEFAULT_INDICATORS: IndicatorConfig[] = [];
-
-// ─── License loaders ──────────────────────────────────────────────────────────
-
-/**
- * Fetches the license payload from the API and loads it into LicenseManager.
- *
- * @param apiUrl       Optional base URL (defaults to current origin).
- * @param getAuthToken Optional async callback to obtain a Bearer token.
- */
-async function loadLicenseFromApi(
-  apiUrl?: string,
-  getAuthToken?: () => string | Promise<string>,
-): Promise<void> {
-  try {
-    const url = `${apiUrl ?? ''}/api/license`;
-    const headers: Record<string, string> = {};
-    if (getAuthToken) {
-      try {
-        const tok = await getAuthToken();
-        if (tok) headers['Authorization'] = `Bearer ${tok}`;
-      } catch { /* token fetch failed — continue unauthenticated */ }
-    }
-    const r = await fetch(url, { headers });
-    const data = r.ok
-      ? (await r.json() as { licensePayload: unknown })
-      : { licensePayload: null };
-    if (data.licensePayload && typeof data.licensePayload === 'object') {
-      LicenseManager.getInstance().loadLicense(data.licensePayload as LicensePayload);
-    }
-    // If the endpoint returns no payload, leave LicenseManager in its current
-    // state (unmanaged mode) rather than clearing a previously loaded license.
-  } catch {
-    // Network failure — leave LicenseManager in its current state.
-  }
-}
-
-// ─── Tab type ─────────────────────────────────────────────────────────────────
-
-type Tab = {
-  id:           string;
-  label:        string;
-  symbol:       string;
-  timeframe:    string;
-  snapshot?:    ChartLayout;
-  savedLayoutId?: string;
-  remountCount: number;
-};
-
-function makeTab(n: number): Tab {
-  return { id: uid(), label: `Chart ${n}`, symbol: 'BINANCE:BTCUSDT', timeframe: '1h', remountCount: 0 };
-}
-
-// ─── Workspace persistence shape ─────────────────────────────────────────────
-
-type PersistedTab = Omit<Tab, 'remountCount'>;
-
-type WorkspacePrefs = {
-  tabs:             PersistedTab[];
-  activeTabId:      string;
-  autoSave:         boolean;
-  timezone:         string;
-  customTimeframes: string[];
-  favoriteTfs:      string[];
-  session:          TradingSession;
-  theme:            ChartTheme;
-};
-
-const DEFAULT_TAB = makeTab(1) satisfies Tab;
-const DEFAULT_WORKSPACE: WorkspacePrefs = {
-  tabs:             [{ id: DEFAULT_TAB.id, label: DEFAULT_TAB.label, symbol: DEFAULT_TAB.symbol, timeframe: DEFAULT_TAB.timeframe }],
-  activeTabId:      DEFAULT_TAB.id,
-  autoSave:         false,
-  timezone:         'UTC',
-  customTimeframes: [],
-  favoriteTfs:      DEFAULT_FAVORITES,
-  session:          'regular',
-  theme:            'dark',
-};
-
-function workspaceFromPrefs(raw: unknown): WorkspacePrefs {
-  if (!raw || typeof raw !== 'object') return DEFAULT_WORKSPACE;
-  const p = raw as Record<string, unknown>;
-  const tabs = Array.isArray(p['tabs']) && p['tabs'].length > 0
-    ? (p['tabs'] as PersistedTab[])
-    : DEFAULT_WORKSPACE.tabs;
-  const activeTabId = typeof p['activeTabId'] === 'string' && tabs.some((t) => t.id === p['activeTabId'])
-    ? p['activeTabId']
-    : tabs[0]!.id;
-  return {
-    tabs,
-    activeTabId,
-    autoSave:         typeof p['autoSave']         === 'boolean' ? p['autoSave']         : false,
-    timezone:         typeof p['timezone']         === 'string'  ? p['timezone']         : 'UTC',
-    customTimeframes: Array.isArray(p['customTimeframes'])        ? p['customTimeframes'] : [],
-    favoriteTfs:      Array.isArray(p['favoriteTfs']) && p['favoriteTfs'].length > 0
-                        ? (p['favoriteTfs'] as string[])
-                        : DEFAULT_FAVORITES,
-    session:          p['session'] === 'extended' ? 'extended' : 'regular',
-    theme:            p['theme']   === 'light'    ? 'light'    : 'dark',
-  };
-}
-
-// ─── ManagedAppShell ──────────────────────────────────────────────────────────
-
-export const ManagedAppShell = forwardRef<ManagedAppShellHandle, ManagedAppShellProps>(
-function ManagedAppShell(
-  { datafeed, layouts, preferences, symbolResolver, getExchangeLogoUrl, config,
-    getAuthToken, apiUrl, tradingBridge, renderScriptDrawer, renderWatchlistDrawer, renderTradeDrawer },
-  ref,
-) {
-  const containerRef = useRef<HTMLDivElement>(null);
-
-  const [theme, setTheme] = useState<ChartTheme>('dark');
-  const [wsLoaded, setWsLoaded] = useState(false);
-  const [timezone, setTimezone] = useState(DEFAULT_WORKSPACE.timezone);
-  const [autoSave, setAutoSave] = useState(DEFAULT_WORKSPACE.autoSave);
-  const [tabs, setTabs] = useState<Tab[]>(() =>
-    DEFAULT_WORKSPACE.tabs.map((t) => ({ ...t, remountCount: 0 })),
-  );
-  const [activeTabId, setActiveTabId] = useState(DEFAULT_WORKSPACE.activeTabId);
-  const [customTimeframes, setCustomTimeframes] = useState<string[]>(DEFAULT_WORKSPACE.customTimeframes);
-  const [favoriteTfs, setFavoriteTfs] = useState<string[]>(DEFAULT_WORKSPACE.favoriteTfs);
-  const [session, setSession] = useState<TradingSession>(DEFAULT_WORKSPACE.session);
-  const [scriptDrawerOpen, setScriptDrawerOpen] = useState(false);
-  const [watchlistOpen, setWatchlistOpen] = useState(false);
-  const [tradeDrawerOpen, setTradeDrawerOpen] = useState(false);
-  const [chartDirty, setChartDirty] = useState(0);
-  const [isFullscreen, setIsFullscreen] = useState(false);
-
-  const capabilities = useChartCapabilities(config);
-
-  // ── Init warnings (dev only) ───────────────────────────────────────────────
-  useEffect(() => {
-    if (process.env.NODE_ENV === 'production') return;
-    if (
-      (capabilities.orderEntry || capabilities.draggableOrders || capabilities.renderManagedTradingControls) &&
-      !renderTradeDrawer
-    ) {
-      console.warn(
-        '[ManagedAppShell] Trading capabilities are active ' +
-        '(orderEntry=%s, draggableOrders=%s, managedTrading=%s) but ' +
-        'renderTradeDrawer was not provided. Trading UI will be suppressed.',
-        capabilities.orderEntry,
-        capabilities.draggableOrders,
-        capabilities.managedTrading,
-      );
-    }
-  // Warn once on mount and whenever trading caps or the slot presence changes.
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [capabilities.orderEntry, capabilities.draggableOrders, capabilities.managedTrading]);
-
-  const [isLicensed, setIsLicensed] = useState(() => LicenseManager.getInstance().getLicense() !== null);
-  useEffect(() => LicenseManager.getInstance().subscribe(() => {
-    setIsLicensed(LicenseManager.getInstance().getLicense() !== null);
-  }), []);
-
-  // Per-tab chart instance registry — all tabs remain mounted simultaneously
-  const chartInstancesRef = useRef<Map<string, ChartCanvasHandle>>(new Map());
-  const chartHandleRef    = useRef<ChartCanvasHandle | null>(null);
-
-  useImperativeHandle(ref, () => ({
-    getActiveChartHandle: () => chartHandleRef.current,
-  }));
-
-  useEffect(() => { document.documentElement.dataset.theme = theme; }, [theme]);
-
-  // ── Load workspace from DB on startup ──────────────────────────────────────
-  useEffect(() => {
-    preferences.get<Record<string, unknown>>().then((data) => {
-      const ws = workspaceFromPrefs(data);
-      setTabs(ws.tabs.map((t) => ({ ...t, remountCount: 0 })));
-      setActiveTabId(ws.activeTabId);
-      setAutoSave(ws.autoSave);
-      setTimezone(ws.timezone);
-      setCustomTimeframes(ws.customTimeframes);
-      setFavoriteTfs(ws.favoriteTfs);
-      setSession(ws.session);
-      setTheme(ws.theme);
-      if (data['licensePayload'] && typeof data['licensePayload'] === 'object') {
-        LicenseManager.getInstance().loadLicense(data['licensePayload'] as LicensePayload);
-      } else {
-        void loadLicenseFromApi(apiUrl, getAuthToken);
-      }
-    }).catch(() => {
-      void loadLicenseFromApi(apiUrl, getAuthToken);
-    }).finally(() => {
-      setWsLoaded(true);
-    });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []); // run once on mount
-
-  // ── Debounced workspace save to DB ─────────────────────────────────────────
-  const saveTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  // Stable refs so the debounced callback always sees latest values
-  const activeTabIdRef      = useRef(activeTabId);
-  const autoSaveRef         = useRef(autoSave);
-  const timezoneRef         = useRef(timezone);
-  const customTimeframesRef = useRef(customTimeframes);
-  const favoriteTfsRef      = useRef(favoriteTfs);
-  const sessionRef          = useRef(session);
-  const themeRef            = useRef(theme);
-  activeTabIdRef.current      = activeTabId;
-  autoSaveRef.current         = autoSave;
-  timezoneRef.current         = timezone;
-  customTimeframesRef.current = customTimeframes;
-  favoriteTfsRef.current      = favoriteTfs;
-  sessionRef.current          = session;
-  themeRef.current            = theme;
-
-  const saveWorkspace = useCallback(() => {
-    if (!wsLoaded) return;
-    if (saveTimerRef.current) clearTimeout(saveTimerRef.current);
-    saveTimerRef.current = setTimeout(() => {
-      const snap = chartHandleRef.current?.getLayoutSnapshot();
-      setTabs((prev) => {
-        const persisted: PersistedTab[] = prev.map(({ remountCount: _r, ...rest }) =>
-          rest.id === activeTabIdRef.current && snap ? { ...rest, snapshot: snap } : rest,
-        );
-        const ws: WorkspacePrefs = {
-          tabs:             persisted,
-          activeTabId:      activeTabIdRef.current,
-          autoSave:         autoSaveRef.current,
-          timezone:         timezoneRef.current,
-          customTimeframes: customTimeframesRef.current,
-          favoriteTfs:      favoriteTfsRef.current,
-          session:          sessionRef.current,
-          theme:            themeRef.current,
-        };
-        const license = LicenseManager.getInstance().getLicense();
-        preferences.put({ ...ws, ...(license ? { licensePayload: license } : {}) } as unknown as Record<string, unknown>)
-          .catch(() => { /* silent — non-fatal */ });
-        return prev;
-      });
-    }, 1_500);
-  }, [wsLoaded, preferences]);
-
-  // Keep chartHandleRef in sync with active tab
-  useEffect(() => {
-    chartHandleRef.current = chartInstancesRef.current.get(activeTabId) ?? null;
-  }, [activeTabId]);
-
-  // Trigger save whenever workspace state changes
-  useEffect(() => { saveWorkspace(); }, [tabs, activeTabId, autoSave, timezone, customTimeframes, favoriteTfs, session, theme, chartDirty, saveWorkspace]);
-
-  // Track browser fullscreen changes
-  useEffect(() => {
-    const handler = () => setIsFullscreen(!!document.fullscreenElement);
-    document.addEventListener('fullscreenchange', handler);
-    return () => document.removeEventListener('fullscreenchange', handler);
-  }, []);
-
-  const handleFullscreen = useCallback(() => {
-    if (!document.fullscreenElement) {
-      containerRef.current?.requestFullscreen().catch(() => {});
-    } else {
-      document.exitFullscreen().catch(() => {});
-    }
-  }, []);
-
-  const handleCopyScreenshot = useCallback(async () => {
-    const url = await chartHandleRef.current?.captureScreenshot();
-    if (!url) return;
-    try {
-      const resp = await fetch(url);
-      const blob = await resp.blob();
-      await navigator.clipboard.write([new ClipboardItem({ 'image/png': blob })]);
-    } catch { /* Clipboard API unavailable */ }
-  }, []);
-
-  const handleDownloadScreenshot = useCallback(async () => {
-    const url = await chartHandleRef.current?.captureScreenshot();
-    if (!url) return;
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = `forgecharts-${Date.now()}.png`;
-    a.click();
-  }, []);
-
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  const activeTab = (tabs.find((t) => t.id === activeTabId) ?? tabs[0])!;
-
-  const captureSnapshot = useCallback((): ChartLayout | null =>
-    chartHandleRef.current?.getLayoutSnapshot() ?? null,
-  []);
-
-  // ── Tab management ─────────────────────────────────────────────────────────
-
-  const selectTab = useCallback((id: string) => {
-    const snap = captureSnapshot();
-    setTabs((prev) =>
-      prev.map((t): Tab => t.id === activeTabId ? { ...t, ...(snap !== null ? { snapshot: snap } : {}) } : t),
-    );
-    setActiveTabId(id);
-  }, [activeTabId, captureSnapshot]);
-
-  const addTab = useCallback(() => {
-    const snap = captureSnapshot();
-    setTabs((prev) => {
-      const updated: Tab[] = prev.map((t): Tab =>
-        t.id === activeTabId ? { ...t, ...(snap !== null ? { snapshot: snap } : {}) } : t,
-      );
-      const newTab = makeTab(updated.length + 1);
-      setActiveTabId(newTab.id);
-      return [...updated, newTab];
-    });
-  }, [activeTabId, captureSnapshot]);
-
-  const closeTab = useCallback((id: string) => {
-    setTabs((prev) => {
-      if (prev.length <= 1) return prev;
-      const remaining = prev.filter((t) => t.id !== id);
-      if (id === activeTabId) {
-        const closedIdx = prev.findIndex((t) => t.id === id);
-        const next = remaining[Math.min(closedIdx, remaining.length - 1)];
-        if (next) setActiveTabId(next.id);
-      }
-      return remaining;
-    });
-  }, [activeTabId]);
-
-  const renameTab = useCallback((id: string, label: string) => {
-    setTabs((prev) => prev.map((t) => (t.id === id ? { ...t, label } : t)));
-  }, []);
-
-  // ── Symbol / timeframe ─────────────────────────────────────────────────────
-
-  const handleSymbolChange = useCallback((symbol: string) => {
-    setTabs((prev) => prev.map((t) => (t.id === activeTabId ? { ...t, symbol } : t)));
-  }, [activeTabId]);
-
-  const handleTimeframeChange = useCallback((timeframe: string) => {
-    setTabs((prev) => prev.map((t) => (t.id === activeTabId ? { ...t, timeframe } : t)));
-  }, [activeTabId]);
-
-  const handleAddCustomTimeframe = useCallback((tf: string) => {
-    setCustomTimeframes((prev) => prev.includes(tf) ? prev : [...prev, tf]);
-  }, []);
-
-  const handleAddIndicator = useCallback((config: IndicatorConfig) => {
-    chartHandleRef.current?.addIndicator(config);
-  }, []);
-
-  const toggleTheme = useCallback(() => setTheme((t) => (t === 'dark' ? 'light' : 'dark')), []);
-
-  // ── Layout helpers ─────────────────────────────────────────────────────────
-
-  const buildConfig = useCallback(
-    (snap: ChartLayout): Record<string, unknown> => ({
-      chartLayout: snap as unknown as Record<string, unknown>,
-      customTimeframes,
-      timezone,
-    }),
-    [customTimeframes, timezone],
-  );
-
-  const applyConfig = useCallback((cfg: Record<string, unknown>) => {
-    const chartLayout = (
-      cfg['chartLayout'] != null ? cfg['chartLayout'] : cfg
-    ) as unknown as ChartLayout;
-    if (Array.isArray(cfg['customTimeframes'])) {
-      setCustomTimeframes(cfg['customTimeframes'] as string[]);
-    }
-    if (typeof cfg['timezone'] === 'string') {
-      setTimezone(cfg['timezone']);
-    }
-    return chartLayout;
-  }, []);
-
-  // ── Layout save ────────────────────────────────────────────────────────────
-
-  const handleSaveLayout = useCallback(async (name: string) => {
-    const snap = captureSnapshot();
-    if (!snap) throw new Error('No chart snapshot available');
-    const config = buildConfig(snap);
-    if (activeTab.savedLayoutId) {
-      await layouts.update(activeTab.savedLayoutId, {
-        name, symbol: activeTab.symbol, timeframe: activeTab.timeframe, config,
-      });
-      setTabs((prev) => prev.map((t) => (t.id === activeTabId ? { ...t, label: name } : t)));
-    } else {
-      const record = await layouts.create({ name, symbol: activeTab.symbol, timeframe: activeTab.timeframe, config });
-      setTabs((prev) => prev.map((t) =>
-        t.id === activeTabId ? { ...t, savedLayoutId: record.id, label: name } : t,
-      ));
-    }
-  }, [activeTab, activeTabId, buildConfig, captureSnapshot, layouts]);
-
-  // ── Layout load ────────────────────────────────────────────────────────────
-
-  const handleLoadLayout = useCallback(async (layoutId: string) => {
-    const record = await layouts.get(layoutId);
-    const chartLayout = applyConfig(record.config);
-    setTabs((prev) => prev.map((t) =>
-      t.id === activeTabId
-        ? { ...t, symbol: record.symbol, timeframe: record.timeframe, snapshot: chartLayout, savedLayoutId: record.id, label: record.name, remountCount: t.remountCount + 1 }
-        : t,
-    ));
-  }, [activeTabId, applyConfig, layouts]);
-
-  // ── Layout rename ──────────────────────────────────────────────────────────
-
-  const handleRenameLayout = useCallback(async (newName: string) => {
-    if (!activeTab.savedLayoutId) throw new Error('Layout is not saved yet');
-    await layouts.update(activeTab.savedLayoutId, { name: newName });
-    setTabs((prev) => prev.map((t) => (t.id === activeTabId ? { ...t, label: newName } : t)));
-  }, [activeTab.savedLayoutId, activeTabId, layouts]);
-
-  // ── Layout copy ────────────────────────────────────────────────────────────
-
-  const handleCopyLayout = useCallback(async (copyName: string) => {
-    const snap = captureSnapshot();
-    if (!snap) throw new Error('No chart snapshot available');
-    const record = await layouts.create({
-      name: copyName, symbol: activeTab.symbol, timeframe: activeTab.timeframe, config: buildConfig(snap),
-    });
-    const chartLayout = applyConfig(record.config);
-    const newTab: Tab = {
-      id: uid(), label: record.name, symbol: record.symbol, timeframe: record.timeframe,
-      snapshot: chartLayout, savedLayoutId: record.id, remountCount: 0,
-    };
-    setTabs((prev) => [
-      ...prev.map((t): Tab => (t.id === activeTabId ? { ...t, snapshot: snap } : t)),
-      newTab,
-    ]);
-    setActiveTabId(newTab.id);
-  }, [activeTab, activeTabId, applyConfig, buildConfig, captureSnapshot, layouts]);
-
-  // ── Layout delete ──────────────────────────────────────────────────────────
-
-  const handleDeleteLayout = useCallback(async (layoutId: string) => {
-    await layouts.remove(layoutId);
-    setTabs((prev) => prev.map((t) => {
-      if (t.savedLayoutId !== layoutId) return t;
-      const { savedLayoutId: _removed, ...rest } = t;
-      return rest as Tab;
-    }));
-  }, [layouts]);
-
-  // ── Open layout in new tab ─────────────────────────────────────────────────
-
-  const handleOpenLayoutInNewTab = useCallback(async (layoutId: string) => {
-    const snap = captureSnapshot();
-    const record = await layouts.get(layoutId);
-    const chartLayout = applyConfig(record.config);
-    const newTab: Tab = {
-      id: uid(), label: record.name, symbol: record.symbol, timeframe: record.timeframe,
-      snapshot: chartLayout, savedLayoutId: record.id, remountCount: 0,
-    };
-    setTabs((prev) => [
-      ...prev.map((t): Tab => (t.id === activeTabId && snap ? { ...t, snapshot: snap } : t)),
-      newTab,
-    ]);
-    setActiveTabId(newTab.id);
-  }, [activeTabId, applyConfig, captureSnapshot, layouts]);
-
-  // ── Auto-save ──────────────────────────────────────────────────────────────
-
-  const handleToggleAutoSave = useCallback((enabled: boolean) => { setAutoSave(enabled); }, []);
-
-  const autoSaveFnRef = useRef<() => void>(() => {});
-  autoSaveFnRef.current = () => {
-    if (!autoSave || !activeTab.savedLayoutId) return;
-    const snap = chartHandleRef.current?.getLayoutSnapshot();
-    if (!snap) return;
-    layouts.update(activeTab.savedLayoutId, {
-      name: activeTab.label, symbol: activeTab.symbol, timeframe: activeTab.timeframe, config: buildConfig(snap),
-    }).catch(() => { /* silent */ });
-  };
-
-  useEffect(() => {
-    if (!autoSave || !activeTab.savedLayoutId) return;
-    const id = setInterval(() => autoSaveFnRef.current(), 5_000);
-    return () => clearInterval(id);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [autoSave, activeTab.savedLayoutId, activeTab.id]);
-
-  // ── Chart slot assembly ────────────────────────────────────────────────────
-
-  const chartSlots = (
-    <>
-      {tabs.map((tab) => (
-        <div
-          key={tab.id}
-          style={
-            tab.id === activeTabId
-              ? { position: 'absolute', inset: 0, display: 'flex' }
-              : { position: 'absolute', inset: 0, visibility: 'hidden', pointerEvents: 'none' }
-          }
-        >
-          <ChartCanvas
-            key={`${tab.id}-${tab.remountCount}`}
-            ref={(handle) => {
-              if (handle) {
-                chartInstancesRef.current.set(tab.id, handle);
-                if (tab.id === activeTabId) chartHandleRef.current = handle;
-              } else {
-                chartInstancesRef.current.delete(tab.id);
-              }
-            }}
-            symbol={tab.symbol}
-            timeframe={tab.timeframe}
-            theme={theme}
-            timezone={timezone}
-            datafeed={datafeed}
-            initialIndicators={tab.snapshot ? [] : DEFAULT_INDICATORS}
-            {...(tab.snapshot ? { layoutToRestore: tab.snapshot } : {})}
-            {...(getExchangeLogoUrl ? { getExchangeLogoUrl } : {})}
-            {...(tradingBridge      ? { tradingBridge }      : {})}
-            onIndicatorsChanged={() => setChartDirty((d) => d + 1)}
-          />
-        </div>
-      ))}
-    </>
-  );
-
-  // ── Drawer assembly ────────────────────────────────────────────────────────
-
-  const drawers = (
-    <>
-      {scriptDrawerOpen && renderScriptDrawer?.({
-        onClose: () => setScriptDrawerOpen(false),
-        onAddIndicator: handleAddIndicator,
-      })}
-      {watchlistOpen && renderWatchlistDrawer?.({
-        onClose: () => setWatchlistOpen(false),
-        onSelectSymbol: (sym) => { handleSymbolChange(sym); },
-      })}
-    </>
-  );
-
-  // ── Render ─────────────────────────────────────────────────────────────────
-
-  return (
-    <div ref={containerRef} style={{ height: '100%' }}>
-      {tradeDrawerOpen && capabilities.renderManagedTradingControls && renderTradeDrawer?.({
-        onClose: () => setTradeDrawerOpen(false),
-      })}
-      <ChartWorkspace
-        // TabBar
-        tabs={tabs.map((t) => ({ id: t.id, label: t.label, isSaved: !!t.savedLayoutId }))}
-        activeTabId={activeTabId}
-        onSelectTab={selectTab}
-        onAddTab={addTab}
-        onCloseTab={closeTab}
-        onRenameTab={renameTab}
-        // TopToolbar
-        symbol={activeTab.symbol}
-        timeframe={activeTab.timeframe}
-        theme={theme}
-        customTimeframes={customTimeframes}
-        favoriteTfs={favoriteTfs}
-        onSymbolChange={handleSymbolChange}
-        onTimeframeChange={handleTimeframeChange}
-        onAddCustomTimeframe={handleAddCustomTimeframe}
-        onFavoriteTfsChange={setFavoriteTfs}
-        onAddIndicator={handleAddIndicator}
-        onToggleTheme={toggleTheme}
-        onCopyScreenshot={handleCopyScreenshot}
-        onDownloadScreenshot={handleDownloadScreenshot}
-        onFullscreen={handleFullscreen}
-        isFullscreen={isFullscreen}
-        {...(activeTab.savedLayoutId ? { currentLayoutName: activeTab.label, currentLayoutId: activeTab.savedLayoutId } : {})}
-        autoSave={autoSave}
-        onFetchLayouts={() => layouts.list()}
-        onSaveLayout={handleSaveLayout}
-        onLoadLayout={handleLoadLayout}
-        onRenameLayout={handleRenameLayout}
-        onCopyLayout={handleCopyLayout}
-        onToggleAutoSave={handleToggleAutoSave}
-        onDeleteLayout={handleDeleteLayout}
-        onOpenLayoutInNewTab={handleOpenLayoutInNewTab}
-        symbolResolver={symbolResolver}
-        showTradeButton={capabilities.renderManagedTradingControls}
-        tradeDrawerOpen={tradeDrawerOpen}
-        onToggleTradeDrawer={() => setTradeDrawerOpen((o) => !o)}
-        // RightToolbar
-        watchlistOpen={watchlistOpen}
-        onToggleWatchlist={() => setWatchlistOpen((o) => !o)}
-        // BottomToolbar
-        activeSymbol={activeTab.symbol}
-        timezone={timezone}
-        onTimezoneChange={setTimezone}
-        session={session}
-        onSessionChange={setSession}
-        scriptDrawerOpen={scriptDrawerOpen}
-        onToggleScriptDrawer={() => setScriptDrawerOpen((o) => !o)}
-        // State
-        isLicensed={isLicensed}
-        wsLoaded={wsLoaded}
-        // Slots
-        chartSlots={chartSlots}
-        drawers={drawers}
-      />
-    </div>
-  );
-});