@forgecharts/sdk 1.1.23 → 1.1.27

package/src/react/shell/ManagedAppShell.tsx

@@ -0,0 +1,699 @@
+/**
+ * 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>
+  );
+});