@forgecharts/sdk 1.5.82 → 1.5.83

package/dist/react/index.js

@@ -1,5 +1,5 @@
 import React11, { forwardRef, useRef, useState, useEffect, useImperativeHandle, useCallback, createContext, useMemo, useContext, useReducer } from 'react';
-import { TextStyle, Application, Container, Graphics, Text, FillGradient, CanvasTextMetrics } from 'pixi.js';
+import { TextStyle, Application, Graphics, Container, Text, FillGradient, CanvasTextMetrics } from 'pixi.js';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import ReactDOM, { createPortal } from 'react-dom';
 
@@ -1410,6 +1410,7 @@ var Series = class _Series {
   // ─── ISeries implementation ──────────────────────────────────────────────────
   setData(data) {
     this._data = [...data].sort((a, b) => a.time - b.time);
+    this._cutoffView = null;
     this.onDataChanged?.();
   }
   /**
@@ -1449,11 +1450,47 @@ var Series = class _Series {
         this._data = this._data.slice(this._data.length - 1e5);
       }
     }
+    this._cutoffView = null;
     this.onDataChanged?.();
   }
-  data() {
+  /**
+   * Bar-replay display cutoff. When set, data() returns only bars at or
+   * before this time while the FULL tape keeps flowing underneath — the
+   * datafeed keeps writing live bars via setData/update, and everything
+   * downstream (renderers, indicators, crosshair, last-price) naturally sees
+   * the truncated past. Replay is not a mode the pipeline knows about; it is
+   * this clamp plus a controller that moves it.
+   */
+  _cutoffTime = null;
+  _cutoffView = null;
+  setCutoffTime(time) {
+    this._cutoffTime = time;
+    this._cutoffView = null;
+    this.onDataChanged?.();
+  }
+  cutoffTime() {
+    return this._cutoffTime;
+  }
+  /** The complete tape, ignoring any replay cutoff. Datafeed-side reads only. */
+  fullData() {
     return this._data;
   }
+  data() {
+    if (this._cutoffTime === null) return this._data;
+    const len = this._data.length;
+    const cached = this._cutoffView;
+    if (cached && cached.len === len && cached.cutoff === this._cutoffTime) return cached.view;
+    let lo = 0;
+    let hi = len;
+    while (lo < hi) {
+      const mid = lo + hi >>> 1;
+      if (this._data[mid].time <= this._cutoffTime) lo = mid + 1;
+      else hi = mid;
+    }
+    const view = this._data.slice(0, lo);
+    this._cutoffView = { len, cutoff: this._cutoffTime, view };
+    return view;
+  }
   applyOptions(options) {
     this._options = { ...this._options, ...options };
   }
@@ -4730,14 +4767,14 @@ var Chart = class {
   _crosshairEnabled = true;
   _magnetMode = "snap-xy";
   // ── Trading overlay ───────────────────────────────────────────────────────────
-  /** Current set of order lines supplied by TChart for canvas rendering. */
+  /** Current set of order lines supplied by ForgeCharts for canvas rendering. */
   _tradingOrders = [];
   /** Called whenever a drawing is committed (created or updated). */
   onDrawingCommitted;
   /** Fired when an EXISTING drawing is modified via drag (handle or body move). */
   onDrawingEdited;
   _drawingEditDirty = false;
-  /** Ctrl+Z / Ctrl+Y — drawing history is owned by TChart. */
+  /** Ctrl+Z / Ctrl+Y — drawing history is owned by ForgeCharts. */
   onUndoRequest;
   onRedoRequest;
   /** Called whenever a drawing is deleted. */
@@ -4753,7 +4790,7 @@ var Chart = class {
   /** Called when the user drags a TP/SL pill off an entry line to create a bracket leg. */
   onTpSlCreate;
   /**
-   * Called after every pan or zoom interaction so external code (e.g. TChart)
+   * Called after every pan or zoom interaction so external code (e.g. ForgeCharts)
    * can check whether the visible time range now extends past the oldest
    * loaded bar and trigger a lazy history fetch.
    */
@@ -5256,11 +5293,11 @@ var Chart = class {
     }
     ctx.restore();
   }
-  /** Provides the overlay renderer with the latest order list from TChart. */
+  /** Provides the overlay renderer with the latest order list from ForgeCharts. */
   setTradingOrders(orders) {
     this._tradingOrders = orders;
   }
-  /** Provides the overlay renderer with the latest position list from TChart. */
+  /** Provides the overlay renderer with the latest position list from ForgeCharts. */
   setTradingPositions(_positions) {
   }
   /** Sets contract switch markers for continuous futures roll dates. */
@@ -6077,9 +6114,17 @@ var PixiCandlestickRenderer = class {
     this._gfx = new Graphics();
     layer.addChild(this._gfx);
   }
+  /** Clear this renderer's graphics — used when another style takes over. */
+  clear() {
+    this._gfx.clear();
+  }
   draw(bars, transform, opts) {
     const gfx = this._gfx;
     gfx.clear();
+    if (opts?.type === "bar") {
+      this._drawBars(bars, transform, opts);
+      return;
+    }
     if (bars.length === 0) return;
     const { plotWidth: pw, plotHeight: ph } = transform;
     const upColor = hexToNum(opts && "upColor" in opts ? opts.upColor : void 0, UP_COLOR);
@@ -6210,6 +6255,36 @@ var PixiCandlestickRenderer = class {
   /**
    * Converts OHLCV bars to Heikin-Ashi values before drawing.
    */
+  /** Classic OHLC bars: high-low spine, open tick left, close tick right. */
+  _drawBars(bars, transform, opts) {
+    const gfx = this._gfx;
+    if (bars.length === 0) return;
+    const upColor = hexToNum(opts && "upColor" in opts ? opts.upColor : void 0, UP_COLOR);
+    const downColor = hexToNum(opts && "downColor" in opts ? opts.downColor : void 0, DOWN_COLOR);
+    const { plotWidth: pw } = transform;
+    let barPitch = pw / Math.max(1, bars.length);
+    if (bars.length >= 2) {
+      const dx = Math.abs(transform.timeToX(bars[1].time) - transform.timeToX(bars[0].time));
+      if (dx > 0) barPitch = dx;
+    }
+    const tick = Math.max(1.5, Math.min(barPitch * 0.35, 6));
+    const lineW = barPitch < 3 ? 1 : 1.5;
+    for (const bar of bars) {
+      const x = transform.timeToX(bar.time);
+      if (x < -barPitch || x > pw + barPitch) continue;
+      const yHigh = transform.priceToY(bar.high);
+      const yLow = transform.priceToY(bar.low);
+      const yOpen = transform.priceToY(bar.open);
+      const yClose = transform.priceToY(bar.close);
+      const color = bar.close >= bar.open ? upColor : downColor;
+      gfx.moveTo(x, yHigh).lineTo(x, yLow);
+      if (barPitch >= 3) {
+        gfx.moveTo(x - tick, yOpen).lineTo(x, yOpen);
+        gfx.moveTo(x, yClose).lineTo(x + tick, yClose);
+      }
+      gfx.stroke({ color, width: lineW });
+    }
+  }
   drawHeikinAshi(bars, transform, opts) {
     const first = bars[0];
     const last = bars[bars.length - 1];
@@ -7532,6 +7607,10 @@ var PixiLineRenderer = class {
     this._gradientCache = null;
     this._gfx.destroy(true);
   }
+  /** Clear this renderer's graphics — used when another style takes over. */
+  clear() {
+    this._gfx.clear();
+  }
   draw(bars, transform, options) {
     const gfx = this._gfx;
     gfx.clear();
@@ -7626,6 +7705,10 @@ var PixiHistogramRenderer = class {
   destroy() {
     this._gfx.destroy(true);
   }
+  /** Clear this renderer's graphics — used when another style takes over. */
+  clear() {
+    this._gfx.clear();
+  }
   draw(bars, transform) {
     const gfx = this._gfx;
     gfx.clear();
@@ -8605,7 +8688,7 @@ var PixiChart = class {
   /** Fired when an EXISTING drawing is modified via drag (handle or body move). */
   onDrawingEdited;
   _drawingEditDirty = false;
-  /** Ctrl+Z / Ctrl+Y — drawing history is owned by TChart. */
+  /** Ctrl+Z / Ctrl+Y — drawing history is owned by ForgeCharts. */
   onUndoRequest;
   onRedoRequest;
   /** Called whenever a drawing is deleted. */
@@ -8620,7 +8703,7 @@ var PixiChart = class {
   onDrawingContextMenu;
   /** Called when the user double-clicks a drawing. */
   onDrawingDoubleClick;
-  /** Called after every pan/zoom so TChart can trigger lazy history loading. */
+  /** Called after every pan/zoom so ForgeCharts can trigger lazy history loading. */
   onViewportChanged;
   constructor(container, options = {}) {
     this._container = container;
@@ -8727,6 +8810,12 @@ var PixiChart = class {
           this.onViewportChanged?.();
         },
         onCrosshairMove: (x, y) => {
+          if (this._replaySelect) {
+            const t = this._cursorBucketTime(x);
+            this._replayHoverTime = t;
+            this._replaySelect.onHover(t);
+            this._drawReplayDim(x);
+          }
           if (!this._crosshairEnabled) return;
           if (this._magnetMode === "off") {
             this._crosshairRenderer.update(x, y, this._cursorBucketTime(x));
@@ -9016,7 +9105,7 @@ var PixiChart = class {
     }).catch(() => {
     });
   }
-  // ─── Drawing objects (used by PixiChart directly; TChart uses DrawingManager) ─
+  // ─── Drawing objects (used by PixiChart directly; ForgeCharts uses DrawingManager) ─
   /** @internal Used by PixiChart when DrawingManager pushes an update. */
   setDrawings(drawings) {
     this._drawings = [...drawings];
@@ -9025,6 +9114,47 @@ var PixiChart = class {
   // ─── Rendering ───────────────────────────────────────────────────────────────
   /** Styles whose renderer has already logged a failure this session. */
   _renderErrorLogged = /* @__PURE__ */ new Set();
+  // ── Bar-replay anchor selection ─────────────────────────────────────────
+  _replaySelect = null;
+  _replayHoverTime = null;
+  _replayDimGfx = null;
+  _replayClickHandler = null;
+  setReplaySelect(cb) {
+    this._replaySelect = cb;
+    this._replayHoverTime = null;
+    if (cb) {
+      this._replayClickHandler = () => {
+        if (this._replayHoverTime !== null) this._replaySelect?.onCommit(this._replayHoverTime);
+      };
+      this._app.canvas.addEventListener("click", this._replayClickHandler);
+      this._app.canvas.style.cursor = "crosshair";
+    } else {
+      if (this._replayClickHandler) {
+        this._app.canvas.removeEventListener("click", this._replayClickHandler);
+        this._replayClickHandler = null;
+      }
+      this._app.canvas.style.cursor = "";
+      if (this._replayDimGfx) {
+        this._replayDimGfx.clear();
+        this._replayDimGfx.destroy();
+        this._replayDimGfx = null;
+      }
+    }
+  }
+  /** Translucent veil over the bars a replay-anchor click would remove. */
+  _drawReplayDim(x) {
+    if (!this._replayDimGfx) {
+      this._replayDimGfx = new Graphics();
+      this._layers.get(5 /* Interaction */).addChildAt(this._replayDimGfx, 0);
+    }
+    const gfx = this._replayDimGfx;
+    const { plotWidth, plotHeight } = this._transform;
+    gfx.clear();
+    if (x >= 0 && x < plotWidth) {
+      gfx.rect(x, 0, plotWidth - x, plotHeight).fill({ color: 8421520, alpha: 0.35 });
+    }
+    this._layers.dirty.mark(5 /* Interaction */);
+  }
   _renderFrame() {
     if (!this._ready || this._destroyed) return;
     const t = this._transform;
@@ -9034,6 +9164,9 @@ var PixiChart = class {
     if (dirty.isDirty(1 /* PriceSeries */)) {
       this._autoFitPriceRange();
       dirty.mark(0 /* Background */);
+      this._candleRenderer.clear();
+      this._lineRenderer.clear();
+      this._histogramRenderer.clear();
       for (const series of this._series) {
         const opts = series.options();
         if (opts.visible === false) continue;
@@ -11596,6 +11729,8 @@ var resolver = () => ChartRuntimeResolver.getInstance();
 var canUseChartTypes = () => resolver().canUseChartTypes();
 var canUseExtendedDrawings = () => resolver().canUseExtendedDrawings();
 var canUseMultiPane = () => resolver().canUseMultiPane();
+var canUseBarReplay = () => resolver().canUseBarReplay();
+var canRenderOverlays = () => resolver().canRenderOverlays();
 var canUseDraggableOrders = () => resolver().canUseDraggableOrders();
 var canUseBracketOrders = () => resolver().canUseBracketOrders();
 var canUsePositionsOverlay = () => resolver().canUsePositionsOverlay();
@@ -11912,8 +12047,8 @@ var ManagedTradingController = class {
   }
 };
 
-// src/api/TChart.ts
-var TChart = class _TChart {
+// src/api/ForgeCharts.ts
+var ForgeCharts = class _ForgeCharts {
   _core;
   _bus;
   _indicators;
@@ -12304,7 +12439,7 @@ var TChart = class _TChart {
         "[ForgeCharts] ForgeScript indicators are not enabled on the active license. Contact your license provider to enable the forgeScript feature."
       );
     }
-    let finalConfig = _TChart.OVERLAY_ONLY.has(config.type) && config.overlay !== true ? { ...config, overlay: true } : config;
+    let finalConfig = _ForgeCharts.OVERLAY_ONLY.has(config.type) && config.overlay !== true ? { ...config, overlay: true } : config;
     if (finalConfig.overlay !== true && !canUseMultiPane()) {
       console.warn("[ForgeCharts] multiPane is not enabled on the active license \u2014 indicator added as a price-pane overlay instead.");
       finalConfig = { ...finalConfig, overlay: true };
@@ -12482,7 +12617,7 @@ var TChart = class _TChart {
    */
   startDrawingTool(type) {
     this._assertAlive();
-    if (_TChart.EXTENDED_DRAWING_TOOLS.has(type) && !canUseExtendedDrawings()) {
+    if (_ForgeCharts.EXTENDED_DRAWING_TOOLS.has(type) && !canUseExtendedDrawings()) {
       console.warn(`[ForgeCharts] Drawing tool '${type}' requires the extendedDrawings feature, which is not enabled on the active license.`);
       return;
     }
@@ -12520,6 +12655,14 @@ var TChart = class _TChart {
   /** Set contract switch roll markers for continuous futures. */
   setContractSwitches(switches) {
     this._assertAlive();
+    if (!canRenderOverlays()) {
+      if (switches.length > 0) {
+        console.warn("[ForgeCharts] Overlay rendering (overlays) is not enabled on the active plan \u2014 contract switch markers suppressed.");
+      }
+      this._core.setContractSwitches([]);
+      this._core.markDirty();
+      return;
+    }
     this._core.setContractSwitches(switches);
     this._core.markDirty();
   }
@@ -12563,7 +12706,7 @@ var TChart = class _TChart {
     const snap = this._drawings.all().map((d) => ({ ...d, points: [...d.points] }));
     this._drawHistory.splice(this._drawHistIdx + 1);
     this._drawHistory.push(snap);
-    if (this._drawHistory.length > _TChart._HIST_MAX) this._drawHistory.shift();
+    if (this._drawHistory.length > _ForgeCharts._HIST_MAX) this._drawHistory.shift();
     this._drawHistIdx = this._drawHistory.length - 1;
   }
   /** Steps drawing state one edit back (Ctrl+Z). */
@@ -12928,6 +13071,158 @@ var TChart = class _TChart {
     }
     return this._unmanagedIngestion;
   }
+  // ─── Bar replay ───────────────────────────────────────────────────────────────
+  //
+  // Replay is a display cutoff on the primary series (Series.setCutoffTime)
+  // plus this controller moving it. The full tape keeps flowing underneath —
+  // live bars land in fullData() and stay hidden until stepped over or the
+  // replay exits — so no datafeed, indicator, or renderer knows replay
+  // exists. Selection (the hover shadow of what a click would remove) is a
+  // backend surface only Pixi implements; ForgeCharts refuses replay elsewhere.
+  /** Playback speeds, in bars per second. */
+  static REPLAY_SPEEDS = [0.5, 1, 2, 5, 10];
+  _replay = {
+    selecting: false,
+    active: false,
+    playing: false,
+    speedIdx: 1,
+    timer: null
+  };
+  _emitReplayState() {
+    this._bus.emit("replayStateChanged", {
+      selecting: this._replay.selecting,
+      active: this._replay.active,
+      playing: this._replay.playing,
+      speed: _ForgeCharts.REPLAY_SPEEDS[this._replay.speedIdx],
+      cutoffTime: this._series.cutoffTime()
+    });
+  }
+  /** Current replay state — the control strip's render source. */
+  replayState() {
+    return {
+      selecting: this._replay.selecting,
+      active: this._replay.active,
+      playing: this._replay.playing,
+      speed: _ForgeCharts.REPLAY_SPEEDS[this._replay.speedIdx],
+      cutoffTime: this._series.cutoffTime()
+    };
+  }
+  /**
+   * Enter replay-anchor selection: the cursor shadows everything a click
+   * would remove; clicking commits that bucket as the replay head. Returns
+   * false (with a warning) when the plan lacks bar_replay or the backend
+   * has no selection surface.
+   */
+  replayEnterSelection() {
+    this._assertAlive();
+    if (!canUseBarReplay()) {
+      console.warn("[ForgeCharts] Bar replay (bar_replay) is not enabled on the active plan.");
+      return false;
+    }
+    if (!this._core.setReplaySelect) {
+      console.warn("[ForgeCharts] Bar replay requires the Pixi render backend.");
+      return false;
+    }
+    this._replayStopTimer();
+    this._replay.selecting = true;
+    this._replay.playing = false;
+    this._core.setReplaySelect({
+      onHover: () => {
+      },
+      onCommit: (time) => this._replayCommit(time)
+    });
+    this._emitReplayState();
+    return true;
+  }
+  /** Leave selection without committing (existing replay, if any, survives). */
+  replayCancelSelection() {
+    this._assertAlive();
+    if (!this._replay.selecting) return;
+    this._replay.selecting = false;
+    this._core.setReplaySelect?.(null);
+    this._emitReplayState();
+  }
+  _replayCommit(time) {
+    this._replay.selecting = false;
+    this._core.setReplaySelect?.(null);
+    this._series.setCutoffTime(time);
+    this._replay.active = true;
+    this._replay.playing = false;
+    this._core.markDirty();
+    this._emitReplayState();
+  }
+  replayPlay() {
+    this._assertAlive();
+    if (!this._replay.active || this._replay.playing) return;
+    this._replay.playing = true;
+    this._replayStartTimer();
+    this._emitReplayState();
+  }
+  replayPause() {
+    this._assertAlive();
+    if (!this._replay.playing) return;
+    this._replay.playing = false;
+    this._replayStopTimer();
+    this._emitReplayState();
+  }
+  /** Advance the replay head n bars. Pauses at the end of the tape. */
+  replayStepForward(n = 1) {
+    this._assertAlive();
+    if (!this._replay.active) return;
+    const full = this._series.fullData();
+    const shown = this._series.data().length;
+    const nextIdx = Math.min(shown + n, full.length) - 1;
+    if (nextIdx < shown) {
+      this.replayPause();
+      return;
+    }
+    this._series.setCutoffTime(full[nextIdx].time);
+    this._core.markDirty();
+    if (nextIdx >= full.length - 1) this.replayPause();
+    this._emitReplayState();
+  }
+  /** Rewind the replay head n bars back in time (default 10). */
+  replayRewind(n = 10) {
+    this._assertAlive();
+    if (!this._replay.active) return;
+    const full = this._series.fullData();
+    const shown = this._series.data().length;
+    const idx = Math.max(shown - 1 - n, 0);
+    if (full.length === 0) return;
+    this._series.setCutoffTime(full[idx].time);
+    this._core.markDirty();
+    this._emitReplayState();
+  }
+  /** Cycle to the next playback speed; restarts the timer when playing. */
+  replayCycleSpeed() {
+    this._assertAlive();
+    this._replay.speedIdx = (this._replay.speedIdx + 1) % _ForgeCharts.REPLAY_SPEEDS.length;
+    if (this._replay.playing) this._replayStartTimer();
+    this._emitReplayState();
+    return _ForgeCharts.REPLAY_SPEEDS[this._replay.speedIdx];
+  }
+  /** Exit replay entirely: the full tape (live head included) returns. */
+  replayExit() {
+    this._assertAlive();
+    this._replayStopTimer();
+    this._replay.selecting = false;
+    this._replay.active = false;
+    this._replay.playing = false;
+    this._core.setReplaySelect?.(null);
+    this._series.setCutoffTime(null);
+    this._core.markDirty();
+    this._core.scrollToEnd();
+    this._emitReplayState();
+  }
+  _replayStartTimer() {
+    this._replayStopTimer();
+    const speed = _ForgeCharts.REPLAY_SPEEDS[this._replay.speedIdx];
+    this._replay.timer = setInterval(() => this.replayStepForward(1), Math.max(1e3 / speed, 16));
+  }
+  _replayStopTimer() {
+    if (this._replay.timer) clearInterval(this._replay.timer);
+    this._replay.timer = null;
+  }
   // ─── Datafeed ─────────────────────────────────────────────────────────────────
   _buildConnector(datafeed) {
     return new DatafeedConnector(datafeed, this._series, {
@@ -18146,7 +18441,7 @@ var DEMONSTRATION_STROKE = "rgba(255, 200, 50, 0.7)";
 var DEMONSTRATION_COLOR = "var(--crosshair-overlay, rgba(255,255,255,0.75))";
 
 // src/version.ts
-var FORGECHARTS_VERSION = "1.5.82" ;
+var FORGECHARTS_VERSION = "1.5.83" ;
 function applyRuntimeConfig(caps, config) {
   if (!config) return caps;
   const orderEntry = config.enableOrderEntry === false ? false : caps.orderEntry;
@@ -18248,10 +18543,7 @@ function useHostLicense(apiUrl, getAuthToken) {
 function useUserPackage(apiUrl, getAuthToken) {
   useEffect(() => {
     const resolver3 = ChartRuntimeResolver.getInstance();
-    if (!apiUrl || !getAuthToken) {
-      resolver3.setUserPackageFeatures(null);
-      return;
-    }
+    if (!apiUrl || !getAuthToken) return;
     let cancelled = false;
     void (async () => {
       try {
@@ -23110,6 +23402,14 @@ var ChartCanvas = forwardRef(
       },
       addIndicator: (config) => chartRef.current?.addIndicator(config) ?? null,
       setSeriesType: (type) => chartRef.current?.setSeriesType(type),
+      toggleReplay: () => {
+        const chart = chartRef.current;
+        if (!chart) return;
+        const st = chart.replayState();
+        if (st.selecting) chart.replayCancelSelection();
+        else if (st.active) chart.replayExit();
+        else chart.replayEnterSelection();
+      },
       removeIndicator: (id) => chartRef.current?.removeIndicator(id),
       moveIndicatorToOverlay: (id) => chartRef.current?.moveIndicatorToOverlay(id),
       moveIndicatorToPane: (id, targetPaneId) => chartRef.current?.moveIndicatorToPane(id, targetPaneId),
@@ -23157,7 +23457,7 @@ var ChartCanvas = forwardRef(
     useEffect(() => {
       const container = priceRef.current;
       if (!container) return;
-      const chart = new TChart({
+      const chart = new ForgeCharts({
         container,
         symbol,
         interval: timeframe,
@@ -23171,6 +23471,9 @@ var ChartCanvas = forwardRef(
       for (const config of initialIndicators) {
         chart.addIndicator(config);
       }
+      chart.on("replayStateChanged", (s) => {
+        setReplayState(s.selecting || s.active ? s : null);
+      });
       transformRef.current = chart.getTransform();
       const syncChartState = () => {
         setBars([...chart.getBars()]);
@@ -24130,6 +24433,7 @@ var ChartCanvas = forwardRef(
     selectPointerToolRef.current = handleToolSelect;
     const initialPointerAppliedRef = useRef(false);
     const initialSeriesAppliedRef = useRef(false);
+    const [replayState, setReplayState] = useState(null);
     useEffect(() => {
       if (!initialSeriesAppliedRef.current && initialSeriesType && chartRef.current) {
         initialSeriesAppliedRef.current = true;
@@ -24138,7 +24442,7 @@ var ChartCanvas = forwardRef(
       if (initialPointerAppliedRef.current || !initialPointerTool) return;
       initialPointerAppliedRef.current = true;
       selectPointerToolRef.current(initialPointerTool);
-    }, [initialPointerTool]);
+    }, [initialPointerTool, initialSeriesType]);
     const handleMagnetModeChange = useCallback((mode) => {
       setMagnetMode(mode);
       chartRef.current?.setMagnetMode(mode);
@@ -24234,6 +24538,107 @@ var ChartCanvas = forwardRef(
                 crosshairXRef.current = null;
               },
               children: [
+                replayState && (() => {
+                  const dark = effectiveTheme !== "light";
+                  const bg = dark ? "rgba(24,26,34,0.94)" : "rgba(255,255,255,0.96)";
+                  const fg = dark ? "#dfe3ee" : "#20242f";
+                  const line = dark ? "rgba(255,255,255,0.12)" : "rgba(0,0,0,0.12)";
+                  const btn = {
+                    background: "transparent",
+                    border: "none",
+                    color: fg,
+                    cursor: "pointer",
+                    padding: "5px 9px",
+                    borderRadius: 6,
+                    fontSize: 12,
+                    display: "inline-flex",
+                    alignItems: "center",
+                    gap: 5,
+                    lineHeight: 1
+                  };
+                  const call = (fn) => () => {
+                    if (chartRef.current) fn(chartRef.current);
+                  };
+                  return /* @__PURE__ */ jsxs("div", { style: {
+                    position: "absolute",
+                    bottom: 46,
+                    left: "50%",
+                    transform: "translateX(-50%)",
+                    zIndex: 8,
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 2,
+                    background: bg,
+                    color: fg,
+                    border: `1px solid ${line}`,
+                    borderRadius: 8,
+                    padding: "2px 6px",
+                    boxShadow: "0 4px 16px rgba(0,0,0,0.25)",
+                    userSelect: "none"
+                  }, children: [
+                    replayState.selecting ? /* @__PURE__ */ jsx("span", { style: { fontSize: 12, padding: "5px 9px" }, children: "Click a bar to start replay from there" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          style: btn,
+                          title: "Pick a new starting bar",
+                          onClick: call((c) => c.replayEnterSelection()),
+                          children: "\u2506\u2190 Select bar"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("span", { style: { width: 1, alignSelf: "stretch", background: line, margin: "4px 2px" } }),
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          style: btn,
+                          title: "Rewind 10 bars",
+                          onClick: call((c) => c.replayRewind(10)),
+                          children: "\u23EA"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          style: btn,
+                          title: replayState.playing ? "Pause" : "Play",
+                          onClick: call((c) => replayState.playing ? c.replayPause() : c.replayPlay()),
+                          children: replayState.playing ? "\u23F8" : "\u25B6"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          style: btn,
+                          title: "Forward one bar",
+                          onClick: call((c) => c.replayStepForward(1)),
+                          children: "\u23E9"
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs(
+                        "button",
+                        {
+                          style: { ...btn, fontVariantNumeric: "tabular-nums" },
+                          title: "Playback speed",
+                          onClick: call((c) => c.replayCycleSpeed()),
+                          children: [
+                            replayState.speed,
+                            "x"
+                          ]
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsx("span", { style: { width: 1, alignSelf: "stretch", background: line, margin: "4px 2px" } }),
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        style: btn,
+                        title: replayState.selecting ? "Cancel selection" : "Exit replay",
+                        onClick: call((c) => replayState.selecting ? c.replayCancelSelection() : c.replayExit()),
+                        children: "\u2715"
+                      }
+                    )
+                  ] });
+                })(),
                 /* @__PURE__ */ jsx(
                   "div",
                   {
@@ -24321,7 +24726,7 @@ var ChartCanvas = forwardRef(
                           symbol,
                           timeframe,
                           bars,
-                          theme,
+                          theme: effectiveTheme,
                           indicators,
                           overlayColors: OVERLAY_COLORS,
                           onRemove: handleRemoveIndicator,
@@ -24762,6 +25167,7 @@ function LayoutMenu({
   currentName,
   currentLayoutId,
   autoSave,
+  saveState,
   onFetchLayouts,
   onSave,
   onLoad,
@@ -24903,7 +25309,9 @@ function LayoutMenu({
           ] }),
           currentName ?? "Layout",
           " \u25BE",
-          autoSave && isSaved && /* @__PURE__ */ jsx("span", { className: "layout-autosave-dot", title: "Auto-save enabled" })
+          saveState === "saving" && /* @__PURE__ */ jsx("span", { style: { fontSize: 10.5, opacity: 0.75, fontStyle: "italic" }, children: "Saving\u2026" }),
+          saveState === "saved" && /* @__PURE__ */ jsx("span", { style: { fontSize: 10.5, color: "var(--up)" }, children: "Saved \u2713" }),
+          saveState !== "saving" && saveState !== "saved" && autoSave && isSaved && /* @__PURE__ */ jsx("span", { className: "layout-autosave-dot", title: "Auto-save enabled" })
         ]
       }
     ),
@@ -26275,28 +26683,32 @@ function RollRuleDropdown({
     ))
   ] });
 }
-var SERIES_STYLES = [
-  { id: "candlestick", label: "Candles", icon: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 16 16", width: "13", height: "13", fill: "currentColor", children: [
-    /* @__PURE__ */ jsx("rect", { x: "3", y: "5", width: "3", height: "6", rx: "0.5" }),
-    /* @__PURE__ */ jsx("line", { x1: "4.5", y1: "2", x2: "4.5", y2: "14", stroke: "currentColor", strokeWidth: "1" }),
-    /* @__PURE__ */ jsx("rect", { x: "10", y: "3", width: "3", height: "7", rx: "0.5" }),
-    /* @__PURE__ */ jsx("line", { x1: "11.5", y1: "1", x2: "11.5", y2: "13", stroke: "currentColor", strokeWidth: "1" })
-  ] }) },
-  { id: "heikinashi", label: "Heikin Ashi", icon: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 16 16", width: "13", height: "13", fill: "currentColor", children: [
-    /* @__PURE__ */ jsx("rect", { x: "2.5", y: "6", width: "3.4", height: "6", rx: "1.6" }),
-    /* @__PURE__ */ jsx("rect", { x: "9.5", y: "3", width: "3.4", height: "6", rx: "1.6" })
-  ] }) },
-  { id: "line", label: "Line", icon: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", width: "13", height: "13", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", children: /* @__PURE__ */ jsx("polyline", { points: "2,12 6,7 10,10 14,4" }) }) },
-  { id: "area", label: "Area", icon: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 16 16", width: "13", height: "13", children: [
-    /* @__PURE__ */ jsx("polyline", { points: "2,12 6,7 10,10 14,4", fill: "none", stroke: "currentColor", strokeWidth: "1.4" }),
-    /* @__PURE__ */ jsx("polygon", { points: "2,12 6,7 10,10 14,4 14,14 2,14", fill: "currentColor", opacity: "0.35" })
-  ] }) },
-  { id: "histogram", label: "Histogram", icon: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 16 16", width: "13", height: "13", fill: "currentColor", children: [
-    /* @__PURE__ */ jsx("rect", { x: "2", y: "9", width: "2.6", height: "5" }),
-    /* @__PURE__ */ jsx("rect", { x: "6.5", y: "5", width: "2.6", height: "9" }),
-    /* @__PURE__ */ jsx("rect", { x: "11", y: "7", width: "2.6", height: "7" })
-  ] }) }
+var SERIES_STYLE_GROUPS = [
+  { label: "Bars", items: [
+    { id: "bar", label: "Bars", icon: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 16 16", width: "13", height: "13", stroke: "currentColor", strokeWidth: "1.4", fill: "none", children: [
+      /* @__PURE__ */ jsx("line", { x1: "5", y1: "2", x2: "5", y2: "13" }),
+      /* @__PURE__ */ jsx("line", { x1: "3", y1: "5", x2: "5", y2: "5" }),
+      /* @__PURE__ */ jsx("line", { x1: "5", y1: "10", x2: "7", y2: "10" }),
+      /* @__PURE__ */ jsx("line", { x1: "11", y1: "4", x2: "11", y2: "14" }),
+      /* @__PURE__ */ jsx("line", { x1: "9", y1: "7", x2: "11", y2: "7" }),
+      /* @__PURE__ */ jsx("line", { x1: "11", y1: "12", x2: "13", y2: "12" })
+    ] }) },
+    { id: "candlestick", label: "Candles", icon: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 16 16", width: "13", height: "13", fill: "currentColor", children: [
+      /* @__PURE__ */ jsx("rect", { x: "3", y: "5", width: "3", height: "6", rx: "0.5" }),
+      /* @__PURE__ */ jsx("line", { x1: "4.5", y1: "2", x2: "4.5", y2: "14", stroke: "currentColor", strokeWidth: "1" }),
+      /* @__PURE__ */ jsx("rect", { x: "10", y: "3", width: "3", height: "7", rx: "0.5" }),
+      /* @__PURE__ */ jsx("line", { x1: "11.5", y1: "1", x2: "11.5", y2: "13", stroke: "currentColor", strokeWidth: "1" })
+    ] }) }
+  ] },
+  { label: "Lines", items: [
+    { id: "line", label: "Line", icon: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", width: "13", height: "13", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", children: /* @__PURE__ */ jsx("polyline", { points: "2,12 6,7 10,10 14,4" }) }) },
+    { id: "area", label: "Area", icon: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 16 16", width: "13", height: "13", children: [
+      /* @__PURE__ */ jsx("polyline", { points: "2,12 6,7 10,10 14,4", fill: "none", stroke: "currentColor", strokeWidth: "1.4" }),
+      /* @__PURE__ */ jsx("polygon", { points: "2,12 6,7 10,10 14,4 14,14 2,14", fill: "currentColor", opacity: "0.35" })
+    ] }) }
+  ] }
 ];
+var ALL_SERIES_STYLES = SERIES_STYLE_GROUPS.flatMap((g) => g.items);
 function TopToolbar({
   symbol,
   timeframe,
@@ -26310,6 +26722,9 @@ function TopToolbar({
   onFavoritesChange,
   seriesType,
   onSeriesTypeChange,
+  onToggleReplay,
+  onToggleAlerts,
+  alertsOpen,
   onAddIndicator,
   maxIndicators,
   indicatorsOpen,
@@ -26347,7 +26762,8 @@ function TopToolbar({
   showSavedLayouts,
   showCustomTimeframes,
   showDataExport,
-  showMultiChartLayout
+  showMultiChartLayout,
+  layoutSaveState
 }) {
   const [tfOpen, setTfOpen] = useState(false);
   const [styleOpen, setStyleOpen] = useState(false);
@@ -26505,27 +26921,60 @@ function TopToolbar({
                 onClick: () => setStyleOpen((o) => !o),
                 title: "Chart style",
                 children: [
-                  (SERIES_STYLES.find((s) => s.id === seriesType) ?? SERIES_STYLES[0]).icon,
-                  (SERIES_STYLES.find((s) => s.id === seriesType) ?? SERIES_STYLES[0]).label
+                  (ALL_SERIES_STYLES.find((s) => s.id === seriesType) ?? ALL_SERIES_STYLES[1]).icon,
+                  (ALL_SERIES_STYLES.find((s) => s.id === seriesType) ?? ALL_SERIES_STYLES[1]).label
                 ]
               }
             ),
-            styleOpen && /* @__PURE__ */ jsx("div", { className: "tf-dropdown", style: { minWidth: 150 }, children: SERIES_STYLES.map((style) => /* @__PURE__ */ jsx(
-              "button",
-              {
-                className: "tf-dropdown-row",
-                style: style.id === seriesType ? { fontWeight: 600 } : void 0,
-                onClick: () => {
-                  onSeriesTypeChange(style.id);
-                  setStyleOpen(false);
+            styleOpen && /* @__PURE__ */ jsx("div", { className: "tf-dropdown", style: { minWidth: 165 }, children: SERIES_STYLE_GROUPS.map((group) => /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("div", { style: {
+                padding: "6px 12px 3px",
+                fontSize: 10.5,
+                fontWeight: 600,
+                letterSpacing: 1,
+                textTransform: "uppercase",
+                opacity: 0.55
+              }, children: group.label }),
+              group.items.map((style) => /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  className: "tf-dropdown-row",
+                  style: style.id === seriesType ? { fontWeight: 600 } : void 0,
+                  onClick: () => {
+                    onSeriesTypeChange(style.id);
+                    setStyleOpen(false);
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxs("span", { style: { display: "inline-flex", alignItems: "center", gap: 8 }, children: [
+                      style.icon,
+                      style.label
+                    ] }),
+                    style.id === seriesType && /* @__PURE__ */ jsx("span", { "aria-hidden": true, style: { opacity: 0.9 }, children: "\u2713" })
+                  ]
                 },
-                children: /* @__PURE__ */ jsxs("span", { style: { display: "inline-flex", alignItems: "center", gap: 8 }, children: [
-                  style.icon,
-                  style.label
-                ] })
-              },
-              style.id
-            )) })
+                style.id
+              ))
+            ] }, group.label)) })
+          ] })
+        ] }),
+        onToggleAlerts !== void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { className: "toolbar-sep" }),
+          /* @__PURE__ */ jsxs("button", { className: `ind-trigger${alertsOpen ? " active" : ""}`, onClick: onToggleAlerts, title: "Price alerts", children: [
+            /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 16 16", width: "13", height: "13", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+              /* @__PURE__ */ jsx("path", { d: "M8 2.5a4 4 0 0 0-4 4v2.5l-1.4 2.3a.5.5 0 0 0 .43.75h9.94a.5.5 0 0 0 .43-.75L12 9V6.5a4 4 0 0 0-4-4z" }),
+              /* @__PURE__ */ jsx("path", { d: "M6.6 12.5a1.5 1.5 0 0 0 2.8 0" })
+            ] }),
+            "Alerts"
+          ] })
+        ] }),
+        onToggleReplay !== void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { className: "toolbar-sep" }),
+          /* @__PURE__ */ jsxs("button", { className: "ind-trigger", onClick: onToggleReplay, title: "Bar replay", children: [
+            /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 16 16", width: "13", height: "13", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+              /* @__PURE__ */ jsx("polygon", { points: "6,4 12,8 6,12", fill: "currentColor", stroke: "none" }),
+              /* @__PURE__ */ jsx("line", { x1: "3", y1: "3", x2: "3", y2: "13" })
+            ] }),
+            "Replay"
           ] })
         ] }),
         /* @__PURE__ */ jsx("div", { className: "toolbar-sep" }),
@@ -26594,6 +27043,7 @@ function TopToolbar({
               currentName: currentLayoutName,
               currentLayoutId,
               autoSave,
+              ...layoutSaveState !== void 0 ? { saveState: layoutSaveState } : {},
               onFetchLayouts,
               onSave: onSaveLayout,
               onLoad: onLoadLayout,
@@ -31346,6 +31796,194 @@ function WatchlistDrawer({ onClose, onSelectSymbol, symbolResolver, apiUrl, getA
     }
   );
 }
+function AlertsDrawer({ apiUrl, getAuthToken, symbol, onClose }) {
+  const [alerts, setAlerts] = useState(null);
+  const [error, setError] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [formSymbol, setFormSymbol] = useState(symbol);
+  const [condition, setCondition] = useState("above");
+  const [priceStr, setPriceStr] = useState("");
+  useEffect(() => {
+    setFormSymbol(symbol);
+  }, [symbol]);
+  const call = useCallback(async (path, init) => {
+    const token = getAuthToken ? await getAuthToken() : "";
+    return fetch(`${apiUrl.replace(/\/$/, "")}/api/alerts${path}`, {
+      ...init,
+      headers: {
+        "Content-Type": "application/json",
+        ...token ? { Authorization: `Bearer ${token}` } : {},
+        ...init?.headers ?? {}
+      }
+    });
+  }, [apiUrl, getAuthToken]);
+  const load = useCallback(() => {
+    call("").then(async (r) => {
+      if (!r.ok) throw new Error(`HTTP ${r.status}`);
+      setAlerts(await r.json());
+    }).catch((e) => setError(`Failed to load alerts: ${e instanceof Error ? e.message : e}`));
+  }, [call]);
+  useEffect(() => {
+    load();
+    const t = setInterval(load, 15e3);
+    return () => clearInterval(t);
+  }, [load]);
+  async function create() {
+    const price = parseFloat(priceStr);
+    if (!(price > 0) || !formSymbol.trim()) return;
+    setBusy(true);
+    setError("");
+    try {
+      const r = await call("", {
+        method: "POST",
+        body: JSON.stringify({ symbol: formSymbol.trim(), condition, price })
+      });
+      const d = await r.json().catch(() => ({}));
+      if (!r.ok) throw new Error(d.error ?? `HTTP ${r.status}`);
+      setPriceStr("");
+      load();
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+    } finally {
+      setBusy(false);
+    }
+  }
+  async function remove(id) {
+    try {
+      await call(`/${encodeURIComponent(id)}`, { method: "DELETE" });
+      setAlerts((prev) => prev?.filter((a) => a.id !== id) ?? null);
+    } catch {
+    }
+  }
+  return /* @__PURE__ */ jsxs("div", { style: {
+    width: 280,
+    flexShrink: 0,
+    display: "flex",
+    flexDirection: "column",
+    background: "var(--surface)",
+    border: "1px solid var(--border)",
+    borderRadius: 8,
+    overflow: "hidden",
+    color: "var(--text)"
+  }, children: [
+    /* @__PURE__ */ jsxs("div", { style: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      padding: "10px 14px",
+      borderBottom: "1px solid var(--border)"
+    }, children: [
+      /* @__PURE__ */ jsx("strong", { style: { fontSize: 13 }, children: "Alerts" }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: onClose,
+          title: "Close",
+          style: { background: "none", border: "none", color: "var(--text-muted)", cursor: "pointer", fontSize: 14 },
+          children: "\u2715"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: { padding: "10px 14px", borderBottom: "1px solid var(--border)", display: "flex", flexDirection: "column", gap: 8 }, children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          value: formSymbol,
+          onChange: (e) => setFormSymbol(e.target.value),
+          placeholder: "Symbol",
+          style: { fontSize: 12.5, padding: "5px 8px", background: "var(--surface-2)", color: "var(--text)", border: "1px solid var(--border)", borderRadius: 6 }
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
+        /* @__PURE__ */ jsxs(
+          "select",
+          {
+            value: condition,
+            onChange: (e) => setCondition(e.target.value),
+            style: { fontSize: 12.5, padding: "5px 6px", background: "var(--surface-2)", color: "var(--text)", border: "1px solid var(--border)", borderRadius: 6 },
+            children: [
+              /* @__PURE__ */ jsx("option", { value: "above", children: "Crosses above" }),
+              /* @__PURE__ */ jsx("option", { value: "below", children: "Crosses below" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            value: priceStr,
+            onChange: (e) => setPriceStr(e.target.value.replace(/[^0-9.]/g, "")),
+            placeholder: "Price",
+            inputMode: "decimal",
+            style: { flex: 1, minWidth: 0, fontSize: 12.5, padding: "5px 8px", background: "var(--surface-2)", color: "var(--text)", border: "1px solid var(--border)", borderRadius: 6, fontVariantNumeric: "tabular-nums" },
+            onKeyDown: (e) => e.key === "Enter" && !busy && create()
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: create,
+          disabled: busy || !(parseFloat(priceStr) > 0),
+          style: {
+            fontSize: 12.5,
+            padding: "6px 0",
+            borderRadius: 6,
+            border: "none",
+            cursor: "pointer",
+            background: "var(--primary, #5b5bd6)",
+            color: "#fff",
+            opacity: busy || !(parseFloat(priceStr) > 0) ? 0.55 : 1
+          },
+          children: busy ? "Creating\u2026" : "Create alert"
+        }
+      ),
+      error && /* @__PURE__ */ jsx("div", { style: { fontSize: 11.5, color: "var(--down, #e5484d)" }, children: error })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: { flex: 1, overflowY: "auto" }, children: [
+      alerts === null && !error && /* @__PURE__ */ jsx("div", { style: { padding: 14, fontSize: 12.5, color: "var(--text-muted)" }, children: "Loading\u2026" }),
+      alerts !== null && alerts.length === 0 && /* @__PURE__ */ jsx("div", { style: { padding: 14, fontSize: 12.5, color: "var(--text-muted)" }, children: "No alerts yet. They fire server-side and email you \u2014 the chart doesn't need to stay open." }),
+      alerts?.map((a) => /* @__PURE__ */ jsxs("div", { style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 8,
+        padding: "8px 14px",
+        borderBottom: "1px solid var(--border)",
+        fontSize: 12.5,
+        opacity: a.status === "triggered" ? 0.75 : 1
+      }, children: [
+        /* @__PURE__ */ jsx("span", { style: {
+          width: 7,
+          height: 7,
+          borderRadius: "50%",
+          flexShrink: 0,
+          background: a.status === "active" ? "var(--up, #22a06b)" : "var(--text-muted)"
+        }, title: a.status }),
+        /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
+          /* @__PURE__ */ jsxs("div", { style: { whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, children: [
+            /* @__PURE__ */ jsx("strong", { children: a.symbol }),
+            " ",
+            a.condition === "above" ? "\u2265" : "\u2264",
+            " ",
+            /* @__PURE__ */ jsx("span", { style: { fontVariantNumeric: "tabular-nums" }, children: a.price })
+          ] }),
+          a.status === "triggered" && /* @__PURE__ */ jsxs("div", { style: { fontSize: 11, color: "var(--text-muted)" }, children: [
+            "fired at ",
+            a.trigger_price
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => remove(a.id),
+            title: "Remove alert",
+            style: { background: "none", border: "none", color: "var(--text-muted)", cursor: "pointer", fontSize: 13 },
+            children: "\u2715"
+          }
+        )
+      ] }, a.id))
+    ] })
+  ] });
+}
 function ChartWorkspace({
   // TabBar
   tabs,
@@ -31396,6 +32034,9 @@ function ChartWorkspace({
   seriesType,
   onSeriesTypeChange,
   showSeriesTypes,
+  onToggleReplay,
+  showReplay,
+  layoutSaveState,
   extraTfGroups,
   // RightToolbar
   watchlistOpen,
@@ -31506,6 +32147,9 @@ function ChartWorkspace({
   const effShowMultiChartLayout = gate(showMultiChartLayout, capabilities.multiChartLayout);
   const effShowMultipleTabs = gate(showMultipleTabs, capabilities.multipleWorkspaces);
   const effShowSeriesTypes = gate(showSeriesTypes, capabilities.chartTypes) && onSeriesTypeChange !== void 0;
+  const effShowReplay = gate(showReplay, capabilities.barReplay) && onToggleReplay !== void 0;
+  const effShowAlerts = gate(void 0, capabilities.alerts) && hostApiUrl !== void 0;
+  const [alertsOpen, setAlertsOpen] = React11.useState(false);
   const tabItems = tabs.map((t) => ({
     id: t.id,
     label: t.label,
@@ -31584,6 +32228,8 @@ function ChartWorkspace({
             onSymbolChange,
             onTimeframeChange,
             ...effShowSeriesTypes ? { seriesType: seriesType ?? "candlestick", onSeriesTypeChange } : {},
+            ...effShowReplay ? { onToggleReplay } : {},
+            ...effShowAlerts ? { onToggleAlerts: () => setAlertsOpen((o) => !o), alertsOpen } : {},
             onAddCustomTimeframe,
             onRemoveCustomTimeframe,
             onFavoritesChange: onFavoriteTfsChange,
@@ -31599,6 +32245,7 @@ function ChartWorkspace({
             currentLayoutName,
             currentLayoutId,
             autoSave,
+            ...layoutSaveState !== void 0 ? { layoutSaveState } : {},
             onFetchLayouts,
             onSaveLayout,
             onLoadLayout,
@@ -31630,6 +32277,15 @@ function ChartWorkspace({
         /* @__PURE__ */ jsx("div", { style: { flex: 1, display: "flex", gap: 4, minHeight: 0, overflow: "hidden" }, children: /* @__PURE__ */ jsxs("div", { style: { position: "relative", flex: 1, display: "flex", gap: 4, minWidth: 0, minHeight: 0 }, children: [
           (dataBlocked || isLicensed === false) && /* @__PURE__ */ jsx(LicenseRequiredOverlay, {}),
           /* @__PURE__ */ jsx("div", { style: { position: "relative", flex: 1, minWidth: 0, minHeight: 0 }, children: chartSlots }),
+          effShowAlerts && alertsOpen && /* @__PURE__ */ jsx(
+            AlertsDrawer,
+            {
+              apiUrl: hostApiUrl,
+              getAuthToken,
+              symbol: activeSymbol ?? "",
+              onClose: () => setAlertsOpen(false)
+            }
+          ),
           autoTrading && !onToggleOrderEntry && effOrderEntryOpen && capabilities.orderEntry && tradingBridge && /* @__PURE__ */ jsx(
             OrderTicket,
             {