dexbot 1.5.3 → 1.6.0

package/analysis/tradingview/tradingview_uplot_chart_generator.ts

@@ -11,7 +11,7 @@ import { getStorage } from '../../modules/storage/index.js';
 const { readJSON } = getStorage();
 import { getErrorMessage } from '../../modules/utils/errors.js';
 import { parseRelativeMultiplier } from '../../modules/order/utils/math.js';
-import { computeAverageAmaSlopePct } from '../../market_adapter/core/strategies/dynamic_weight_series.js';
+import { computeAverageAmaSlopePct, computeAmaSlopeClipThreshold } from '../../market_adapter/core/strategies/dynamic_weight_series.js';
 import {
     resolveBaseBounds,
     computeAsymmetricBoundsMetrics,
@@ -88,6 +88,27 @@ function resolveAmaDefaults({ meta, data, marketProfiles }: any = {}) {
     };
 }
 
+const TRADINGVIEW_PREFS_KEY_PREFIX = 'dexbot2-tradingview-uplot-v3';
+const TRADINGVIEW_SYNC_KEY = 'dexbot2-tradingview-sync';
+
+function sanitizeStorageComponent(value: any, fallback: string) {
+    // Objects (e.g. a meta asset node missing both id and symbol) stringify to
+    // "[object Object]", which would collapse distinct assets onto one key.
+    if (value == null || typeof value === 'object') return fallback;
+    const raw = String(value).trim();
+    const cleaned = raw.replace(/[^A-Za-z0-9._-]+/g, '_').replace(/^_+|_+$/g, '');
+    return cleaned || fallback;
+}
+
+// Prefer asset ids over symbols: ids are immutable, symbols can be relabeled.
+function resolveChartStorageKey(meta: any = {}, baseIntervalSeconds: any = 0) {
+    const pool = sanitizeStorageComponent(meta?.pool ?? meta?.poolId, 'nipool');
+    const assetA = sanitizeStorageComponent(meta?.assetA?.id ?? meta?.assetA?.symbol ?? meta?.assetA, 'assetA');
+    const assetB = sanitizeStorageComponent(meta?.assetB?.id ?? meta?.assetB?.symbol ?? meta?.assetB, 'assetB');
+    const interval = Number(baseIntervalSeconds) > 0 ? Math.round(Number(baseIntervalSeconds)) : 0;
+    return `${TRADINGVIEW_PREFS_KEY_PREFIX}:${pool}:${assetA}_${assetB}:${interval || 'base'}`;
+}
+
 function generateHTML(data: any, title: any = 'TradingView Style Research') {
     const rawCandles = Array.isArray(data.candles) ? data.candles : [];
     const candles = rawCandles.map(normalizeCandle).filter(Boolean);
@@ -103,6 +124,7 @@ function generateHTML(data: any, title: any = 'TradingView Style Research') {
         { label: '4h', seconds: 14400 },
         { label: '1d', seconds: 86400 },
         { label: '1w', seconds: 604800 },
+        { label: '1M', seconds: 2592000, calendar: 'month' },
     ].map((item: any) => ({ ...item, enabled: item.seconds >= baseIntervalSeconds }));
 
     const defaultTimeframe = timeframes.find((item: any) => item.label === data.defaultTimeframe && item.enabled)
@@ -118,18 +140,19 @@ function generateHTML(data: any, title: any = 'TradingView Style Research') {
         maxSlopeOffset: MARKET_ADAPTER.DYNAMIC_WEIGHT_ASYMMETRIC_OFFSET_CLAMP,
         maxAsymmetryFactor: MARKET_ADAPTER.ASYMMETRIC_BOUNDS_MAX_ASYMMETRY_FACTOR,
         minScaleSlots: MARKET_ADAPTER.ASYMMETRIC_BOUNDS_MIN_SCALE_SLOTS,
+        clipPercentile: MARKET_ADAPTER.DYNAMIC_WEIGHT_CLIP_PERCENTILE,
     };
     function defaultRangeSpan(input: { rangeSpan?: unknown; grid?: { minPrice?: unknown; maxPrice?: unknown } | null }): number {
         const cli = Number(input.rangeSpan);
-        if (Number.isFinite(cli)) return Math.min(2, Math.max(1.25, cli));
+        if (Number.isFinite(cli)) return Math.min(2, Math.max(1.2, cli));
         const down = parseRelativeMultiplier(input.grid?.minPrice);
         const up = parseRelativeMultiplier(input.grid?.maxPrice);
-        if (down != null && down > 1 && up != null && up > 1) return Math.min(2, Math.max(1.25, (down + up) / 2));
+        if (down != null && down > 1 && up != null && up > 1) return Math.min(2, Math.max(1.2, (down + up) / 2));
         const vd = Number(input.grid?.minPrice);
         const vu = Number(input.grid?.maxPrice);
         if (Number.isFinite(vd) && Number.isFinite(vu) && vd > 0 && vu > vd) {
             const ref = Math.sqrt(vd * vu);
-            return Math.min(2, Math.max(1.25, (ref / vd + vu / ref) / 2));
+            return Math.min(2, Math.max(1.2, (ref / vd + vu / ref) / 2));
         }
         return 1.55;
     }
@@ -141,7 +164,7 @@ function generateHTML(data: any, title: any = 'TradingView Style Research') {
         vwapEnabled: data.vwapEnabled === true,
         vwapBars: Math.max(5, Math.round(data.vwapBars ?? 500)),
         priceScale: data.priceScale === 'linear' ? 'linear' : 'log',
-        rangeEnabled: data.rangeEnabled !== false,
+        rangeEnabled: data.rangeEnabled === true,
         rangeScaleEnabled: data.rangeScaleEnabled === true,
         rangeWidthPct: Number.isFinite(Number(data.rangeWidthPct)) && Number(data.rangeWidthPct) > 0
             ? Number(data.rangeWidthPct)
@@ -167,8 +190,13 @@ function generateHTML(data: any, title: any = 'TradingView Style Research') {
         ? `${Math.round(baseIntervalSeconds / 86400)}d`
         : `${Math.round(baseIntervalSeconds / 3600)}h`;
     const defaultPairMode = data.defaultPairMode === 'inverse' ? 'inverse' : 'normal';
+    const storageKey = typeof data.storageKey === 'string' && data.storageKey.length > 0
+        ? data.storageKey
+        : resolveChartStorageKey(meta, baseIntervalSeconds);
 
     const payload = {
+        storageKey,
+        syncKey: TRADINGVIEW_SYNC_KEY,
         candles,
         timeframes,
         defaultTimeframe: defaultTimeframe.label,
@@ -184,6 +212,14 @@ function generateHTML(data: any, title: any = 'TradingView Style Research') {
         rangeWidthPct: defaults.rangeWidthPct,
         rangeSpan: defaults.rangeSpan,
         grid: defaults.grid,
+        orderBuys: Array.isArray((data as any).orders?.buys) ? (data as any).orders.buys.map(Number).filter(Number.isFinite) : [],
+        orderSells: Array.isArray((data as any).orders?.sells) ? (data as any).orders.sells.map(Number).filter(Number.isFinite) : [],
+        gridBounds: {
+            low: Number.isFinite(Number((data as any).gridBounds?.low)) && Number((data as any).gridBounds.low) > 0 ? Number((data as any).gridBounds.low) : null,
+            high: Number.isFinite(Number((data as any).gridBounds?.high)) && Number((data as any).gridBounds.high) > 0 ? Number((data as any).gridBounds.high) : null,
+        },
+        updateMarkerTsSec: Number((data as any).updateMarkerTsSec) > 0 ? Number((data as any).updateMarkerTsSec) : null,
+        updateMarkerNewBars: Number((data as any).updateMarkerNewBars) || null,
         rangeSlope,
         defaultPairMode,
         assetLabelA,
@@ -193,6 +229,7 @@ function generateHTML(data: any, title: any = 'TradingView Style Research') {
         poolLabel,
         intervalLabel,
         amaDefaultsSource: marketProfiles ? 'market_profiles' : 'constants',
+        volumeIsCount: !!((meta as any)?.feed),
     };
 
     return `<!doctype html>
@@ -232,6 +269,7 @@ function generateHTML(data: any, title: any = 'TradingView Style Research') {
         .toolbar-row { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 12px; align-items: center; }
         .group { display: inline-flex; align-items: center; gap: 8px; padding-left: 12px; border-left: 1px solid #263241; }
         .group:first-child { padding-left: 0; border-left: 0; }
+        .primary-toolbar-row .group { padding-left: 0; border-left: 0; }
         :root {
             --control-height: 36px;
         }
@@ -254,6 +292,11 @@ function generateHTML(data: any, title: any = 'TradingView Style Research') {
             background: linear-gradient(180deg, rgba(35,53,79,0.95), rgba(22,32,47,0.98));
         }
         .time-btn:disabled { opacity: 0.35; cursor: not-allowed; text-decoration: line-through; }
+        .ama-preset-btn.active {
+            color: #fff;
+            border-color: rgba(250,204,21,0.85);
+            background: linear-gradient(180deg, rgba(79,66,22,0.95), rgba(47,40,18,0.98));
+        }
         .indicator {
             display: inline-flex;
             align-items: center;
@@ -439,11 +482,11 @@ function generateHTML(data: any, title: any = 'TradingView Style Research') {
             background: rgba(10,14,20,0.72);
             backdrop-filter: blur(10px);
         }
-        .legend-line { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; font-size: 11px; }
+        .legend-line { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; font-size: 12px; }
         .legend-line + .legend-line { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,0.06); }
         .legend-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
         .legend-dot { width: 10px; height: 10px; border-radius: 999px; flex: 0 0 auto; }
-        .legend-label { color: #8290a2; text-transform: uppercase; letter-spacing: 0.45px; font-size: 10px; }
+        .legend-label { color: #8290a2; text-transform: uppercase; letter-spacing: 0.45px; font-size: 12px; }
         .legend-value { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #eef4fb; font-weight: 700; }
         .status { display: inline-flex; align-items: center; gap: 8px; font-size: 10px; color: #8290a2; text-transform: uppercase; letter-spacing: 0.5px; }
         .pill { border: 1px solid rgba(255,255,255,0.06); border-radius: 999px; padding: 4px 8px; background: rgba(255,255,255,0.03); }
@@ -466,7 +509,7 @@ function generateHTML(data: any, title: any = 'TradingView Style Research') {
                 <div id="subtitle">${escapeHtml(poolLabel)} · ${escapeHtml(pairLabelNormal)} · ${escapeHtml(intervalLabel)} base · indicators from 1h · volume · uPlot</div>
             </div>
             <div id="toolbar">
-                <div class="toolbar-row">
+                <div class="toolbar-row primary-toolbar-row">
                 <div class="group">
                     <div class="indicator">
                         <span class="tag">pair</span>
@@ -487,7 +530,6 @@ function generateHTML(data: any, title: any = 'TradingView Style Research') {
                 <div class="group">
                     <div class="indicator">
                         <label><input type="checkbox" id="sma-toggle"${defaults.smaEnabled ? ' checked' : ''}> SMA</label>
-                        <span class="tag">period</span>
                         <input type="text" inputmode="numeric" id="sma-period" value="${defaults.smaPeriod}">
                         <span class="step-stack">
                             <button type="button" class="step-btn" id="sma-period-inc">▲</button>
@@ -496,13 +538,14 @@ function generateHTML(data: any, title: any = 'TradingView Style Research') {
                     </div>
                     <div class="indicator">
                         <label><input type="checkbox" id="vwap-toggle"${defaults.vwapEnabled ? ' checked' : ''}> VWMA</label>
-                        <span class="tag">bars</span>
                         <input type="text" inputmode="numeric" id="vwap-bars" value="${defaults.vwapBars}">
                         <span class="step-stack">
                             <button type="button" class="step-btn" id="vwap-bars-inc">▲</button>
                             <button type="button" class="step-btn" id="vwap-bars-dec">▼</button>
                         </span>
                     </div>
+                    <div class="indicator"><label><input type="checkbox" id="volume-toggle" checked> Volume</label> <button type="button" class="reset-btn" id="volume-unit-toggle" data-volume-mode="base" title="Volume units: base asset — click for quote asset">${escapeHtml(defaultPairMode === 'inverse' ? assetLabelB : assetLabelA)}</button></div>
+                    ${(((payload.orderBuys?.length || 0) + (payload.orderSells?.length || 0) > 0 || payload.gridBounds?.low != null || payload.gridBounds?.high != null) ? '<div class="indicator"><label><input type="checkbox" id="orders-toggle" checked> Orders</label></div>' : '')}
                 </div>
                 </div>
                 <div class="toolbar-row">
@@ -527,20 +570,22 @@ function generateHTML(data: any, title: any = 'TradingView Style Research') {
                             <button type="button" class="step-btn" id="ama-slow-inc">▲</button>
                             <button type="button" class="step-btn" id="ama-slow-dec">▼</button>
                         </span>
-                        <button type="button" class="reset-btn" id="ama-reset">Reset</button>
+                        <button type="button" class="reset-btn ama-preset-btn" data-ama-preset="AMA1" title="AMA1 (slow 62.1)">1</button>
+                        <button type="button" class="reset-btn ama-preset-btn" data-ama-preset="AMA2" title="AMA2 (slow 72.0)">2</button>
+                        <button type="button" class="reset-btn ama-preset-btn" data-ama-preset="AMA3" title="AMA3 (slow 83.6)">3</button>
+                        <button type="button" class="reset-btn ama-preset-btn" data-ama-preset="AMA4" title="AMA4 (slow 96.9)">4</button>
                     </div>
-                    <div class="indicator" title="Range min/max built only from the live AMA price (green above, red below); Scale sizes it by AMA slope like the grid build">
+                    <div class="indicator" title="Range min/max built only from the live AMA price (red above, green below); Scale sizes it by AMA slope like the grid build">
                         <label><input type="checkbox" id="range-toggle"${defaults.rangeEnabled ? ' checked' : ''}> Range</label>
                         <label title="Range Scaling: size the band by AMA slope like the grid build (trend side widens, opposite tightens) and fit the price axis to it"><input type="checkbox" id="range-scale-toggle"${defaults.rangeScaleEnabled ? ' checked' : ''}> Scale</label>
-                        <span id="range-grid-wrap" style="display:${defaults.grid ? 'inline' : 'none'}" title="x-range around AMA (default = bot grid setting)">
-                            <span class="tag">grid</span>
-                            <input type="range" id="range-span" min="1.25" max="2" step="0.05" value="${defaults.rangeSpan.toFixed(2)}" style="width:90px;vertical-align:middle">
+                        <span id="range-grid-wrap" style="display:inline" title="x-range around AMA (1.2x–2.0x)">
+                            <input type="range" id="range-span" min="1.2" max="2" step="0.05" value="${defaults.rangeSpan.toFixed(2)}" style="width:90px;vertical-align:middle">
                             <span id="range-span-val" style="font-size:11px;color:#8b949e;width:40px;display:inline-block;text-align:right">${defaults.rangeSpan.toFixed(2)}x</span>
                         </span>
                     </div>
                     <div class="indicator">
                         <label><input type="checkbox" id="ama-init-offset-toggle"> Init Offset</label>
-                        <input type="range" id="ama-init-offset" min="-50" max="50" value="0" step="1" style="width:120px;vertical-align:middle" disabled>
+                        <input type="range" id="ama-init-offset" min="-50" max="50" value="0" step="1" style="width:90px;vertical-align:middle" disabled>
                         <span id="ama-init-offset-val" style="font-size:11px;color:#8b949e;width:32px;display:inline-block;text-align:right">0%</span>
                     </div>
                 </div>
@@ -553,21 +598,16 @@ function generateHTML(data: any, title: any = 'TradingView Style Research') {
                     <span class="legend-item"><span class="legend-label">Time</span> <span class="legend-value" id="legend-time">-</span></span>
                     <span class="legend-item"><span class="legend-label">C</span> <span class="legend-value" id="legend-close">-</span></span>
                     <span class="legend-item"><span class="legend-label">Delta</span> <span class="legend-value" id="legend-delta">-</span></span>
-                    <span class="legend-item"><span class="legend-label">Vol</span> <span class="legend-value" id="legend-volume">-</span></span>
-                    <span class="legend-item"><span class="legend-label">Scale</span> <span class="legend-value" id="legend-scale">-</span></span>
+                    <span class="legend-item"><span class="legend-label">Vol</span> <span class="legend-value" id="legend-volume" title="${payload.volumeIsCount ? 'Volume: feed publish count per bucket' : 'Volume units — click to switch base/quote'}" style="cursor:${payload.volumeIsCount ? 'default' : 'pointer'}">-</span></span>
                 </div>
                 <div class="legend-line">
                     <span class="legend-item"><span class="legend-dot" style="background:#f59e0b"></span><span class="legend-label">SMA</span> <span class="legend-value" id="legend-sma">-</span></span>
-                    <span class="legend-item"><span class="legend-dot" style="background:#2dd4bf"></span><span class="legend-label">AMA</span> <span class="legend-value" id="legend-ama">-</span></span>
-                    <span class="legend-item"><span class="legend-dot" style="background:#22c55e"></span><span class="legend-label">AMA Init</span> <span class="legend-value" id="legend-sma-init">-</span></span>
-                    <span class="legend-item"><span class="legend-dot" style="background:#a855f7"></span><span class="legend-label">Off Init</span> <span class="legend-value" id="legend-off-init">-</span></span>
-                    <span class="legend-item"><span class="legend-dot" style="background:#a855f7"></span><span class="legend-label">AMA Off</span> <span class="legend-value" id="legend-ama-off">-</span></span>
-
                     <span class="legend-item"><span class="legend-dot" style="background:#93c5fd"></span><span class="legend-label">VWMA</span> <span class="legend-value" id="legend-vwap">-</span></span>
-                    <span class="legend-item"><span class="legend-dot" id="legend-range-dot" style="background:#8b949e"></span><span class="legend-label">Range</span> <span class="legend-value" id="legend-range">-</span></span>
+                    <span class="legend-item"><span class="legend-dot" style="background:#22c55e"></span><span class="legend-label">AMA Init</span> <span class="legend-value" id="legend-sma-init">-</span></span>
+                    <span class="legend-item"><span class="legend-dot" style="background:#2dd4bf"></span><span class="legend-label">AMA</span> <span class="legend-value" id="legend-ama">-</span></span>
                 </div>
             </div>
-            <div id="price-chart" title="Wheel: zoom time (ulos = tyhjaa tilaa datan ymparilla) · Drag: siirra aika- ja hintanakymaa · Wheel/drag hinta-akselilla: zoomaa hintaa · Double-click hinta-akselia: autofit"></div>
+            <div id="price-chart" title="Wheel: zoom time (out = empty space around data) · Shift+wheel: zoom price · Drag: pan time + price (sets manual price scale) · Wheel/drag on price axis: zoom price · Drag on time axis: zoom time · Double-click price axis: autofit"></div>
             <div id="volume-chart"></div>
         </div>
     </div>
@@ -582,7 +622,12 @@ function generateHTML(data: any, title: any = 'TradingView Style Research') {
         const baseCloseValues = baseCandles.map((c) => c.close);
         const timeframes = Array.isArray(payload.timeframes) ? payload.timeframes.slice() : [];
         const timeframeMap = new Map(timeframes.map((item) => [item.label, item]));
-        const STORAGE_KEY = 'dexbot2-tradingview-uplot-v2';
+        const STORAGE_KEY = typeof payload.storageKey === 'string' && payload.storageKey.length > 0
+            ? payload.storageKey
+            : 'dexbot2-tradingview-uplot-v3:default';
+        const SYNC_KEY = typeof payload.syncKey === 'string' && payload.syncKey.length > 0
+            ? payload.syncKey
+            : 'dexbot2-tradingview-sync';
 
         const state = loadState();
         let currentTimeframe = state.timeframe || payload.defaultTimeframe || '1h';
@@ -606,8 +651,19 @@ function generateHTML(data: any, title: any = 'TradingView Style Research') {
             ? Number(state.rangeWidthPct)
             : (Number.isFinite(Number(payload.rangeWidthPct)) && Number(payload.rangeWidthPct) > 0 ? Number(payload.rangeWidthPct) : 2);
         let currentRangeSpan = Number.isFinite(state.rangeSpan) && Number(state.rangeSpan) > 0
-            ? Math.min(2, Math.max(1.25, Number(state.rangeSpan)))
-            : (Number.isFinite(Number(payload.rangeSpan)) && Number(payload.rangeSpan) > 0 ? Math.min(2, Math.max(1.25, Number(payload.rangeSpan))) : 1.55);
+            ? Math.min(2, Math.max(1.2, Number(state.rangeSpan)))
+            : (Number.isFinite(Number(payload.rangeSpan)) && Number(payload.rangeSpan) > 0 ? Math.min(2, Math.max(1.2, Number(payload.rangeSpan))) : 1.55);
+        let currentOrdersVisible = state.ordersVisible ?? true;
+        let currentVolumeVisible = state.volumeVisible ?? true;
+        let currentVolumeMode = state.volumeMode === 'quote' ? 'quote' : 'base';
+        // Static per generation: the overlay (levels, reserve/ceiling lines,
+        // spread label) exists only when order data was embedded.
+        // --no-orders or a missing orders file therefore removes the whole
+        // overlay, including the reserve/ceiling lines.
+        const hasOrders = ((payload.orderBuys?.length || 0) + (payload.orderSells?.length || 0)) > 0;
+        // Bounds-only grids (virtual slots, no live levels yet) still show
+        // the reserve/ceiling lines; levels/spread/panel rows need live data.
+        const hasBounds = payload.gridBounds?.low != null || payload.gridBounds?.high != null;
         let currentAmaInitOffsetEnabled = false;
         let currentAmaInitOffset = Number.isFinite(state.amaInitOffset) ? state.amaInitOffset : 0;
         let currentPriceScale = state.priceScale || payload.priceScale || 'log';
@@ -631,7 +687,6 @@ function generateHTML(data: any, title: any = 'TradingView Style Research') {
         let currentAmaOff = [];
         let currentRangeUpper = [];
         let currentRangeLower = [];
-        let currentRangeTrend = [];
         let priceChart = null;
         let volumeChart = null;
         let lastRenderedPriceScale = null;
@@ -641,6 +696,8 @@ function generateHTML(data: any, title: any = 'TradingView Style Research') {
         let lastCandleKey = null;
         let pendingRange = null;
         let pendingRangeRaf = 0;
+        let rangePanelRaf = 0;
+        let yRefitRaf = 0;
         let xMin = 0;
         let xMax = 0;
         let smaWorker = null;
@@ -659,27 +716,18 @@ function generateHTML(data: any, title: any = 'TradingView Style Research') {
         // TradingView-exporter interaction overrides (PR #3 / #11 feature):
         // redeclare after UPLOT_SHARED_SCRIPT so these hoisted declarations win
         // for this page only, without mutating the shared stack used by other charts.
-        function clampXRange(min, max) {
-            if (!Number.isFinite(min) || !Number.isFinite(max) || max <= min) return { min: xMin, max: xMax };
-            // Salli tyhjaa tilaa datan molemmin puolin (TradingView-tyyli):
-            // enintaan 75 % datan pituudesta reunapuskurina kummallekin puolelle.
-            const dataSpan = Math.max(1, xMax - xMin);
-            const maxPad = dataSpan * 0.75;
-            let lo = Math.max(xMin - maxPad, min);
-            let hi = Math.min(xMax + maxPad, max);
-            if (lo < xMin && hi <= lo) lo = xMin;
-            if (hi > xMax + maxPad) hi = xMax + maxPad;
-            if (hi <= lo) return { min: xMin, max: xMax };
-            return { min: lo, max: hi };
-        }
         function bindWheelZoom(chart) {
             chart.root.addEventListener('wheel', (e) => {
                 if (e.ctrlKey || e.metaKey || e.altKey) return;
                 e.preventDefault();
                 const rect = chart.root.getBoundingClientRect();
-                if (chart === priceChart && inYAxisZone(chart, e.clientX)) {
+                // Shift+wheel scales price (cursor-anchored) anywhere over the
+                // price pane — same as wheeling over the price axis. Volume has
+                // no manual Y lock, so it keeps the timeframe zoom.
+                if (chart === priceChart && (e.shiftKey || inYAxisZone(chart, e.clientX))) {
                     const centerY = chart.posToVal(e.clientY - rect.top, 'y');
-                    zoomYAt(chart, centerY, e.deltaY < 0 ? 0.91 : 1.10);
+                    const delta = e.deltaY !== 0 ? e.deltaY : e.deltaX;
+                    zoomYAt(chart, centerY, delta < 0 ? 0.91 : 1.10);
                     return;
                 }
                 e.stopPropagation();
@@ -698,12 +746,132 @@ function generateHTML(data: any, title: any = 'TradingView Style Research') {
                 syncXRange(center - nextSpan * ratio, center - nextSpan * ratio + nextSpan);
             }, { passive: false });
         }
+        function clampRange(min, max) {
+            if (!Number.isFinite(xMin) || !Number.isFinite(xMax) || xMax <= xMin) return null;
+            if (!Number.isFinite(min) || !Number.isFinite(max) || max <= min) return null;
+            // Allow empty space on both sides of the data (TradingView-style):
+            // enintaan 75 % datan pituudesta reunapuskurina kummallekin puolelle.
+            // Span-locked: pans slide the window and never squash it — only a
+            // deliberate over-wide zoom-out is centered down to the limit.
+            // Plot drags therefore move but never scale; scaling lives on
+            // the axis gutters alone.
+            const dataSpan = Math.max(1, xMax - xMin);
+            const maxPad = dataSpan * 0.75;
+            const lo = xMin - maxPad;
+            const hi = xMax + maxPad;
+            const span = max - min;
+            if (span > hi - lo) {
+                const center = (min + max) / 2;
+                const half = (hi - lo) / 2;
+                return { min: center - half, max: center + half };
+            }
+            let nMin = min;
+            if (nMin < lo) nMin = lo;
+            if (nMin + span > hi) nMin = hi - span;
+            return { min: nMin, max: nMin + span };
+        }
+        function syncXRange(min, max) {
+            pendingRange = clampRange(min, max);
+            if (pendingRangeRaf) return;
+            pendingRangeRaf = requestAnimationFrame(() => {
+                const next = pendingRange;
+                pendingRange = null;
+                pendingRangeRaf = 0;
+                if (!next || charts.length === 0) return;
+                charts.forEach((chart) => chart.batch(() => chart.setScale('x', next)));
+            });
+        }
+        function bindPan(chart) {
+            let dragging = false;
+            let startClientX = 0;
+            let startClientY = 0;
+            let startMin = 0;
+            let startMax = 0;
+            let startYRange = null;
+            let panRaf = 0;
+            let pendingPan = null;
+            const applyPendingPan = () => {
+                panRaf = 0;
+                const p = pendingPan;
+                pendingPan = null;
+                if (!dragging || !p) return;
+                // Plot drag pans time and price (TradingView-style): the price
+                // move sets a manual Y range; double-click the price axis to
+                // return to autofit. Axis gutters never pan — they scale.
+                if (chart === priceChart && startYRange && Number.isFinite(p.clientY)) {
+                    const vStart = chart.posToVal(p.startY - p.rectTop, 'y');
+                    const vCur = chart.posToVal(p.clientY - p.rectTop, 'y');
+                    if (Number.isFinite(vStart) && Number.isFinite(vCur) && vCur !== vStart) {
+                        // Rigid move only: the span is locked by construction so a
+                        // plot drag can never rescale — Y scaling happens solely
+                        // on the price-axis gutter (wheel/drag there).
+                        if (currentPriceScale === 'log') {
+                            const ratio = Math.max(1e-12, vStart) / Math.max(1e-12, vCur);
+                            const spanRatio = startYRange.max / startYRange.min;
+                            if (Number.isFinite(ratio) && ratio > 0 && Number.isFinite(spanRatio) && spanRatio > 0) {
+                                const nextMin = startYRange.min * ratio;
+                                applyYRange(chart, nextMin, nextMin * spanRatio);
+                            }
+                        } else {
+                            const dy = vStart - vCur;
+                            const span = startYRange.max - startYRange.min;
+                            if (Number.isFinite(dy) && Number.isFinite(span) && span > 0) {
+                                const nextMin = startYRange.min + dy;
+                                applyYRange(chart, nextMin, nextMin + span);
+                            }
+                        }
+                    }
+                }
+                const delta = chart.posToVal(p.clientX - p.rectLeft, 'x') - chart.posToVal(p.startX - p.rectLeft, 'x');
+                syncXRange(startMin - delta, startMax - delta);
+            };
+            const onMove = (e) => {
+                if (!dragging) return;
+                e.preventDefault();
+                const rect = chart.root.getBoundingClientRect();
+                pendingPan = {
+                    clientX: e.clientX, clientY: e.clientY,
+                    startX: startClientX, startY: startClientY,
+                    rectLeft: rect.left, rectTop: rect.top,
+                };
+                if (!panRaf) panRaf = requestAnimationFrame(applyPendingPan);
+            };
+            const endDrag = () => {
+                if (!dragging) return;
+                dragging = false;
+                startYRange = null;
+                pendingPan = null;
+                if (panRaf) { cancelAnimationFrame(panRaf); panRaf = 0; }
+                document.body.style.cursor = '';
+                window.removeEventListener('mousemove', onMove);
+                window.removeEventListener('mouseup', endDrag);
+            };
+            chart.root.addEventListener('mousedown', (e) => {
+                if (!e || e.button !== 0 || e.ctrlKey || e.metaKey || e.altKey) return;
+                const rect = chart.root.getBoundingClientRect();
+                if (e.clientX < rect.left || e.clientX > rect.right || e.clientY < rect.top || e.clientY > rect.bottom) return;
+                if (chart === priceChart && inYAxisZone(chart, e.clientX)) return;
+                if (inXAxisZone(chart, e.clientY)) return;
+                e.preventDefault();
+                e.stopPropagation();
+                dragging = true;
+                startClientX = e.clientX;
+                startClientY = e.clientY;
+                const s = chart.scales.x || {};
+                startMin = Number.isFinite(s.min) ? s.min : currentCandles[0].time;
+                startMax = Number.isFinite(s.max) ? s.max : currentCandles[currentCandles.length - 1].time;
+                if (chart === priceChart) startYRange = currentYRange(chart);
+                document.body.style.cursor = 'grabbing';
+                window.addEventListener('mousemove', onMove);
+                window.addEventListener('mouseup', endDrag, { once: true });
+            });
+        }
         function clamp(v, lo, hi) { return Math.max(lo, Math.min(hi, v)); }
-        // Significant-digit price formatting (5 "active" digits), matching the
-        // DEXBot order-price style (formatCurrency) but with one extra digit.
+        // Significant-digit price formatting (4 "active" digits), matching the
+        // DEXBot order-price style (formatCurrency).
         // Very small values get SI micro-suffixes (m/µ/n/p/...); large values
-        // get comma grouping. Examples: 34.935 -> "34.935", 119.975 -> "119.98",
-        // 3014.9 -> "3,014.9", 0.00567 -> "5.67m".
+        // get comma grouping. Examples: 34.94 -> "34.94", 119.98 -> "120.0",
+        // 3014.9 -> "3,015", 0.00567 -> "5.670m".
         function fmtPrice(v) {
             if (v == null || !Number.isFinite(v)) return '-';
             const num = Number(v);
@@ -807,6 +975,9 @@ function generateHTML(data: any, title: any = 'TradingView Style Research') {
                 ticks: { stroke: '#30363d', width: 1 },
                 font: '11px Segoe UI, sans-serif',
                 values: showLabels ? (u, vals) => {
+                    if (String(currentTimeframe) === '1M') {
+                        return vals.map((ts) => new Date(ts * 1000).toLocaleString(undefined, { month: 'short', year: 'numeric', timeZone: 'UTC' }));
+                    }
                     const xScale = u.scales.x || {};
                     const spanSec = Number.isFinite(xScale.min) && Number.isFinite(xScale.max)
                         ? Math.max(0, xScale.max - xScale.min)
@@ -834,6 +1005,9 @@ function generateHTML(data: any, title: any = 'TradingView Style Research') {
                     rangeScaleEnabled: currentRangeScaleEnabled,
                     rangeWidthPct: currentRangeWidthPct,
                     rangeSpan: currentRangeSpan,
+                    ordersVisible: currentOrdersVisible,
+                    volumeVisible: currentVolumeVisible,
+                    volumeMode: currentVolumeMode,
                     amaInitOffset: currentAmaInitOffset,
                     priceScale: currentPriceScale,
                     pairMode: currentPairMode,
@@ -848,6 +1022,75 @@ function generateHTML(data: any, title: any = 'TradingView Style Research') {
                 ? (payload.pairLabelInverse || (payload.assetLabelB + '/' + payload.assetLabelA))
                 : (payload.pairLabelNormal || (payload.assetLabelA + '/' + payload.assetLabelB));
         }
+        // Volume units: base = displayed pair's base asset (TradingView
+        // standard, VWMA-correct), quote = base * display close (per-candle
+        // approximation of true quote volume). Persisted per chart in
+        // localStorage like the AMA settings (volumeMode).
+        function getVolumeSymbols() {
+            const inverse = normalizePairMode(currentPairMode) === 'inverse';
+            return {
+                base: inverse ? payload.assetLabelB : payload.assetLabelA,
+                quote: inverse ? payload.assetLabelA : payload.assetLabelB,
+            };
+        }
+        function getVolumeUnit() {
+            if (payload.volumeIsCount) return { mode: 'count', symbol: 'feeds' };
+            const syms = getVolumeSymbols();
+            return currentVolumeMode === 'quote'
+                ? { mode: 'quote', symbol: syms.quote }
+                : { mode: 'base', symbol: syms.base };
+        }
+        function getDisplayVolume(c) {
+            const v = Number(c?.volume);
+            if (!Number.isFinite(v)) return NaN;
+            if (payload.volumeIsCount) return v;
+            if (currentVolumeMode === 'quote') {
+                const p = Number(c?.close);
+                return Number.isFinite(p) && p > 0 ? v * p : NaN;
+            }
+            return v;
+        }
+        function fmtVolumeWithSym(v) {
+            const s = fmtVolume(v);
+            if (s == null || s === '-') return '-';
+            const u = getVolumeUnit();
+            return u.symbol ? s + ' ' + u.symbol : s;
+        }
+        function setActiveVolumeUnit() {
+            const btn = document.getElementById('volume-unit-toggle');
+            if (!btn) return;
+            const u = getVolumeUnit();
+            btn.dataset.volumeMode = u.mode;
+            btn.textContent = u.symbol || u.mode;
+            btn.title = payload.volumeIsCount
+                ? 'Volume: feed publish count per bucket'
+                : (u.mode === 'quote'
+                    ? 'Volume units: quote asset (' + u.symbol + ') — click for base asset'
+                    : 'Volume units: base asset (' + u.symbol + ') — click for quote asset');
+            btn.disabled = !!payload.volumeIsCount;
+            btn.style.opacity = payload.volumeIsCount ? '0.45' : '';
+            btn.style.cursor = payload.volumeIsCount ? 'not-allowed' : 'pointer';
+            const lv = document.getElementById('legend-volume');
+            if (lv) {
+                lv.style.cursor = payload.volumeIsCount ? 'default' : 'pointer';
+                lv.title = payload.volumeIsCount
+                    ? 'Volume: feed publish count per bucket'
+                    : 'Volume units — click to switch base/quote';
+            }
+            const vp = document.getElementById('vol-panel');
+            if (vp) {
+                vp.style.cursor = payload.volumeIsCount ? 'default' : 'pointer';
+                vp.title = payload.volumeIsCount
+                    ? 'Volume: feed publish count per bucket'
+                    : 'Volume units — click to switch base/quote';
+            }
+        }
+        function toggleVolumeUnit() {
+            if (payload.volumeIsCount) return;
+            currentVolumeMode = currentVolumeMode === 'quote' ? 'base' : 'quote';
+            setActiveVolumeUnit();
+            rerender(true);
+        }
         function refreshSubtitle() {
             const subtitleEl = document.getElementById('subtitle');
             if (!subtitleEl) return;
@@ -896,38 +1139,65 @@ function generateHTML(data: any, title: any = 'TradingView Style Research') {
             seriesCache.set(key, state);
             return state;
         }
-        function aggregateCandles(rows, seconds) {
+        function aggregateCandles(rows, seconds, label) {
+            const monthly = String(label || '') === '1M';
             const bucketSec = Math.max(1, Math.round(seconds || 3600));
-            const cacheKey = currentPairMode + '|' + bucketSec;
+            const cacheKey = currentPairMode + '|' + (monthly ? '1M' : String(bucketSec));
             if (aggregateCache.has(cacheKey)) return aggregateCache.get(cacheKey);
             const out = [];
             const idxs = [];
             let cur = null;
             let curBucket = null;
             let curIdx = -1;
+            const finishBucket = (bucket) => {
+                if (!bucket) return;
+                // Feed volume is a publication rate, not trade quantity. Keep
+                // it comparable across 1h/week/month views instead of turning
+                // a monthly candle into a sum such as 388 publishes.
+                if (payload.volumeIsCount && bucket.barCount > 0) {
+                    bucket.volume /= bucket.barCount;
+                }
+                delete bucket.barCount;
+                out.push(bucket);
+            };
             for (let i = 0; i < rows.length; i++) {
                 const row = rows[i];
                 const ts = Number(row.time);
                 if (!Number.isFinite(ts)) continue;
-                const bucket = Math.floor(ts / bucketSec) * bucketSec;
+                let bucket;
+                if (monthly) {
+                    const d = new Date(ts * 1000);
+                    bucket = Date.UTC(d.getUTCFullYear(), d.getUTCMonth(), 1) / 1000;
+                } else {
+                    bucket = Math.floor(ts / bucketSec) * bucketSec;
+                }
                 if (!cur || bucket !== curBucket) {
                     if (cur) {
-                        out.push(cur);
+                        finishBucket(cur);
                         idxs.push(curIdx);
                     }
                     curBucket = bucket;
                     curIdx = i;
-                    cur = { time: bucket, open: row.open, high: row.high, low: row.low, close: row.close, volume: row.volume || 0 };
+                    cur = {
+                        time: bucket,
+                        open: row.open,
+                        high: row.high,
+                        low: row.low,
+                        close: row.close,
+                        volume: row.volume || 0,
+                        barCount: 1,
+                    };
                 } else {
                     cur.high = Math.max(cur.high, row.high);
                     cur.low = Math.min(cur.low, row.low);
                     cur.close = row.close;
                     cur.volume += row.volume || 0;
+                    cur.barCount += 1;
                     curIdx = i;
                 }
             }
             if (cur) {
-                out.push(cur);
+                finishBucket(cur);
                 idxs.push(curIdx);
             }
             const result = { candles: out, idxs };
@@ -1166,14 +1436,14 @@ function generateHTML(data: any, title: any = 'TradingView Style Research') {
         // Bot-grid range band: min/max derive ONLY from the live AMA price.
         // All math below runs the canonical market_adapter/grid sources,
         // embedded verbatim (not hand-copied): computeAverageAmaSlopePct,
-        // applyAsymmetricBounds (+ metrics/base), applyNarrowingSideGuard,
-        // parseRelativeMultiplier. With Range Scaling on, the AMA slope sizes
-        // the real range: trend side widens, opposite side tightens. Painted
-        // symmetrically always: green [AMA, upper], red [lower, AMA].
-        // Without usable grid shape falls back to a width% envelope around AMA.
+        // computeAmaSlopeClipThreshold, applyAsymmetricBounds (+ metrics/base),
+        // applyNarrowingSideGuard, parseRelativeMultiplier. With Range Scaling
+        // on, the clipped AMA slope tilts the span-symmetric band like the
+        // grid build: trend side widens, opposite side tightens. Painted
+        // red [AMA, upper], green [lower, AMA].
         // Never reads candles, pair-display mapping, or axis/zoom state —
         // inversion and timeframe sampling apply to the AMA first.
-        ${embedFunctionSources([computeAverageAmaSlopePct, resolveBaseBounds, computeAsymmetricBoundsMetrics, applyAsymmetricBounds, applyNarrowingSideGuard, parseRelativeMultiplier])}
+        ${embedFunctionSources([computeAverageAmaSlopePct, computeAmaSlopeClipThreshold, resolveBaseBounds, computeAsymmetricBoundsMetrics, applyAsymmetricBounds, applyNarrowingSideGuard, parseRelativeMultiplier])}
         function computeRangeBand(baseAma) {
             const n = Array.isArray(baseAma) ? baseAma.length : 0;
             const upper = new Array(n).fill(null);
@@ -1188,19 +1458,19 @@ function generateHTML(data: any, title: any = 'TradingView Style Research') {
             const maxAsym = gridCfg && Number(gridCfg.maxAsymmetryFactor) > 0
                 ? Number(gridCfg.maxAsymmetryFactor)
                 : (Number(slopeCfg.maxAsymmetryFactor) > 0 ? Number(slopeCfg.maxAsymmetryFactor) : 0.35);
-            const widthPct = Number(currentRangeWidthPct) > 0 ? Number(currentRangeWidthPct) : 2;
             const inc = gridCfg && Number(gridCfg.incrementPercent) > 0 ? Number(gridCfg.incrementPercent) : null;
             const minSlots = Math.floor(Number(gridCfg && gridCfg.minScaleSlots) > 0 ? Number(gridCfg.minScaleSlots) : (Number(slopeCfg.minScaleSlots) || 0));
-            // User x-range span (slider, default = bot grid ratio): the only
-            // width input — min = AMA/span, max = AMA*span. Grid config only
-            // selects the grid path vs the width% fallback, never a price.
-            const span = Math.min(2, Math.max(1.25, Number(currentRangeSpan) > 0 ? Number(currentRangeSpan) : 1.55));
-            const gMinN = Number(gridCfg && gridCfg.minPrice);
-            const gMaxN = Number(gridCfg && gridCfg.maxPrice);
-            const multOk = (v) => { const m = parseRelativeMultiplier(v); return m != null && m > 1; };
-            const hasGridShape = gridCfg != null && (
-                (multOk(gridCfg.minPrice) && multOk(gridCfg.maxPrice)) ||
-                (Number.isFinite(gMinN) && Number.isFinite(gMaxN) && gMinN > 0 && gMaxN > gMinN));
+            // User x-range span (slider 1.2x–2.0x, default 1.55x): the only
+            // width input — symmetric base min = AMA/span, max = AMA*span.
+            const span = Math.min(2, Math.max(1.2, Number(currentRangeSpan) > 0 ? Number(currentRangeSpan) : 1.55));
+            // Canonical grid pipeline (ama_slope_model): adaptive percentile
+            // clip over the AMA history, then offset + trend — the same numbers
+            // the live grid build feeds into applyAsymmetricBounds.
+            const clipPct = Number(slopeCfg.clipPercentile) >= 0 ? Number(slopeCfg.clipPercentile) : 10;
+            const clipEr = Number.isFinite(currentAmaErPeriod) && currentAmaErPeriod > 0
+                ? Math.ceil(currentAmaErPeriod)
+                : Math.ceil(Number(payload.amaDefaults?.erPeriod) || 781);
+            const clipThreshold = computeAmaSlopeClipThreshold(baseAma, clipEr, lookback, clipPct);
             const slopeScaling = !!currentRangeScaleEnabled;
             if (!currentAmaEnabled || n === 0) return { upper, lower, trend };
             for (let i = 0; i < n; i++) {
@@ -1209,29 +1479,17 @@ function generateHTML(data: any, title: any = 'TradingView Style Research') {
                 if (!Number.isFinite(ama) || ama <= 0 || !Number.isFinite(past) || past <= 0) continue;
                 const slopePct = computeAverageAmaSlopePct(ama, past, lookback);
                 if (slopePct == null || !Number.isFinite(slopePct)) continue;
-                const dir = Math.abs(slopePct) <= neutral ? 0 : (slopePct > 0 ? 1 : -1);
-                const strength = Math.min(Math.abs(slopePct) / maxSlope, 1);
-                if (!hasGridShape) {
-                    // Width% envelope: symmetric around AMA; scaling sizes it
-                    // by slope strength ("real range"), otherwise full width.
-                    const w = slopeScaling ? strength * widthPct : widthPct;
-                    if (!(w > 0)) continue;
-                    const half = ama * w / 100;
-                    if (!Number.isFinite(half) || half <= 0) continue;
-                    upper[i] = ama + half;
-                    lower[i] = Math.max(ama - half, ama * 1e-6);
-                    trend[i] = dir;
-                    continue;
-                }
+                const csp = Math.max(-clipThreshold, Math.min(clipThreshold, slopePct));
+                const dir = Math.abs(csp) <= neutral ? 0 : (csp > 0 ? 1 : -1);
                 // Symmetric base from this bar's AMA and the user span —
                 // no chart or config price level.
                 let rMin = ama / span;
                 let rMax = ama * span;
                 if (slopeScaling && dir !== 0) {
-                    // Canonical tilt: ama_slope_model slope offset applied
-                    // through asymmetric_bounds, then the narrowing-side guard.
+                    // Canonical tilt: clipped slope offset applied through
+                    // asymmetric_bounds, then the narrowing-side guard.
                     const trendName = dir > 0 ? 'UP' : 'DOWN';
-                    const slopeOffset = clamp(slopePct / maxSlope, -1, 1) * maxSlopeOffset;
+                    const slopeOffset = clamp(csp / maxSlope, -1, 1) * maxSlopeOffset;
                     const tilt = applyAsymmetricBounds({
                         centerPrice: ama,
                         minPrice: ama / span,
@@ -1259,10 +1517,6 @@ function generateHTML(data: any, title: any = 'TradingView Style Research') {
             }
             return { upper, lower, trend };
         }
-        function sampleTrendByIndex(series, idxs) {
-            if (!Array.isArray(series) || !Array.isArray(idxs)) return [];
-            return idxs.map((idx) => (Number.isFinite(idx) && series[idx] != null ? series[idx] : 0));
-        }
         function lowerBound(arr, value) {
             let lo = 0;
             let hi = arr.length;
@@ -1329,7 +1583,7 @@ function generateHTML(data: any, title: any = 'TradingView Style Research') {
             let end = Math.min(xs.length, lowerBound(xs, maxX) + 2);
             let max = 0;
             for (let i = start; i < end; i++) {
-                const v = currentCandles[i]?.volume;
+                const v = getDisplayVolume(currentCandles[i]);
                 if (Number.isFinite(v) && v > max) max = v;
             }
             if (!Number.isFinite(max) || max <= 0) return [0, 1];
@@ -1348,12 +1602,29 @@ function generateHTML(data: any, title: any = 'TradingView Style Research') {
             btn.title = next === 'linear' ? 'Toggle to log scale' : 'Toggle to linear scale';
             btn.setAttribute('aria-label', next === 'linear' ? 'Toggle to log scale' : 'Toggle to linear scale');
         }
-        function resetAmaDefaults() {
-            currentAmaErPeriod = Number(payload.amaDefaults?.erPeriod || ${MARKET_ADAPTER.AMAS.AMA3.erPeriod});
-            currentAmaFastPeriod = Number(payload.amaDefaults?.fastPeriod || ${MARKET_ADAPTER.AMAS.AMA3.fastPeriod});
-            currentAmaSlowPeriod = Number(payload.amaDefaults?.slowPeriod || ${MARKET_ADAPTER.AMAS.AMA3.slowPeriod});
-            setControls();
-            rerender(false);
+        // AMA presets for the quick buttons (values from constants.ts AMAS).
+        const AMA_PRESETS = {
+            AMA1: { erPeriod: ${MARKET_ADAPTER.AMAS.AMA1.erPeriod}, fastPeriod: ${MARKET_ADAPTER.AMAS.AMA1.fastPeriod}, slowPeriod: ${MARKET_ADAPTER.AMAS.AMA1.slowPeriod} },
+            AMA2: { erPeriod: ${MARKET_ADAPTER.AMAS.AMA2.erPeriod}, fastPeriod: ${MARKET_ADAPTER.AMAS.AMA2.fastPeriod}, slowPeriod: ${MARKET_ADAPTER.AMAS.AMA2.slowPeriod} },
+            AMA3: { erPeriod: ${MARKET_ADAPTER.AMAS.AMA3.erPeriod}, fastPeriod: ${MARKET_ADAPTER.AMAS.AMA3.fastPeriod}, slowPeriod: ${MARKET_ADAPTER.AMAS.AMA3.slowPeriod} },
+            AMA4: { erPeriod: ${MARKET_ADAPTER.AMAS.AMA4.erPeriod}, fastPeriod: ${MARKET_ADAPTER.AMAS.AMA4.fastPeriod}, slowPeriod: ${MARKET_ADAPTER.AMAS.AMA4.slowPeriod} },
+        };
+        function markActiveAmaPreset() {
+            const cur = { e: Math.round(Number(currentAmaErPeriod)), f: Number(currentAmaFastPeriod), s: Number(currentAmaSlowPeriod) };
+            document.querySelectorAll('.ama-preset-btn').forEach((b) => {
+                const p = AMA_PRESETS[b.dataset.amaPreset];
+                const match = p && Math.round(p.erPeriod) === cur.e && Number(p.fastPeriod) === cur.f && Number(p.slowPeriod) === cur.s;
+                b.classList.toggle('active', !!match);
+            });
+        }
+        function applyAmaPreset(key) {
+            const p = AMA_PRESETS[key];
+            if (!p) return;
+            document.getElementById('ama-er').value = String(p.erPeriod);
+            document.getElementById('ama-fast').value = String(p.fastPeriod);
+            document.getElementById('ama-slow').value = String(p.slowPeriod);
+            document.getElementById('ama-toggle').checked = true;
+            syncInputs();
         }
         function setIndicatorSeriesVisible(seriesIndex, visible) {
             if (!priceChart) return;
@@ -1381,7 +1652,6 @@ function generateHTML(data: any, title: any = 'TradingView Style Research') {
         function hideRangeBandImmediate() {
             currentRangeUpper = new Array(currentCandles.length).fill(null);
             currentRangeLower = new Array(currentCandles.length).fill(null);
-            currentRangeTrend = new Array(currentCandles.length).fill(0);
             // The band is a draw hook with no uPlot series: nothing else
             // repaints on hide, so redraw explicitly (stale pixels otherwise linger).
             if (priceChart && typeof priceChart.redraw === 'function') priceChart.redraw();
@@ -1395,7 +1665,6 @@ function generateHTML(data: any, title: any = 'TradingView Style Research') {
             currentSmaInitOff = new Array(currentCandles.length).fill(null);
             currentRangeUpper = new Array(currentCandles.length).fill(null);
             currentRangeLower = new Array(currentCandles.length).fill(null);
-            currentRangeTrend = new Array(currentCandles.length).fill(0);
             if (Array.isArray(currentPriceData) && currentPriceData.length >= 11) {
                 currentPriceData[6] = currentAma;
                 currentPriceData[8] = currentSmaInit;
@@ -1429,26 +1698,11 @@ function generateHTML(data: any, title: any = 'TradingView Style Research') {
             document.getElementById('legend-delta').textContent = Number.isFinite(delta)
                 ? ((delta >= 0 ? '+' : '') + fmtPrice(delta))
                 : '-';
-            document.getElementById('legend-volume').textContent = fmtVolume(c.volume);
-            document.getElementById('legend-scale').textContent = currentPriceScale === 'linear' ? 'Linear' : 'Log';
+            document.getElementById('legend-volume').textContent = fmtVolumeWithSym(getDisplayVolume(c));
             document.getElementById('legend-sma').textContent = Number.isFinite(currentSma[idx]) ? fmtPrice(currentSma[idx]) : (smaPending ? '...' : '-');
-            document.getElementById('legend-ama').textContent = Number.isFinite(currentAma[idx]) ? fmtPrice(currentAma[idx]) : '-';
-            document.getElementById('legend-sma-init').textContent = Number.isFinite(currentSmaInit[idx]) ? fmtPrice(currentSmaInit[idx]) : '-';
-            document.getElementById('legend-off-init').textContent = Number.isFinite(currentSmaInitOff[idx]) ? fmtPrice(currentSmaInitOff[idx]) : '-';
-            document.getElementById('legend-ama-off').textContent = Number.isFinite(currentAmaOff[idx]) ? fmtPrice(currentAmaOff[idx]) : '-';
-            const rangeDir = currentRangeTrend[idx];
-            const rangeDot = document.getElementById('legend-range-dot');
-            const rangeVal = document.getElementById('legend-range');
-            if (rangeDot) rangeDot.style.background = rangeDir === 1 ? '#26a69a' : (rangeDir === -1 ? '#ef5350' : '#8b949e');
-            if (rangeVal) {
-                const ru = currentRangeUpper[idx];
-                const rl = currentRangeLower[idx];
-                const ama = currentAma[idx];
-                if (currentRangeEnabled && currentAmaEnabled && Number.isFinite(ru) && ru > ama && Number.isFinite(rl) && rl > 0 && rl < ama && ama > 0) {
-                    rangeVal.textContent = '+' + ((ru - ama) / ama * 100).toFixed(1) + '% / -' + ((ama - rl) / ama * 100).toFixed(1) + '%';
-                } else rangeVal.textContent = '-';
-            }
             document.getElementById('legend-vwap').textContent = Number.isFinite(currentVwap[idx]) ? fmtPrice(currentVwap[idx]) : '-';
+            document.getElementById('legend-sma-init').textContent = Number.isFinite(currentSmaInit[idx]) ? fmtPrice(currentSmaInit[idx]) : '-';
+            document.getElementById('legend-ama').textContent = Number.isFinite(currentAma[idx]) ? fmtPrice(currentAma[idx]) : '-';
         }
         function candlePlugin() {
             function drawCandles(u) {
@@ -1602,10 +1856,10 @@ function generateHTML(data: any, title: any = 'TradingView Style Research') {
                 u.ctx.clip();
                 // Behind candles/AMA lines (same trick as the dynamic-weight signal background).
                 u.ctx.globalCompositeOperation = 'destination-over';
-                const UP_FILL = 'rgba(38,166,154,0.16)';
-                const DOWN_FILL = 'rgba(239,83,80,0.16)';
-                // Symmetric envelope, always both sides: green [AMA, upper]
-                // plus red [lower, AMA] along the whole AMA, tilted by the
+                const UP_FILL = 'rgba(239,83,80,0.16)';
+                const DOWN_FILL = 'rgba(38,166,154,0.16)';
+                // Symmetric envelope, always both sides: red [AMA, upper]
+                // plus green [lower, AMA] along the whole AMA, tilted by the
                 // grid's range scaling. Paint per contiguous valid segment.
                 let segTop = [];
                 let segBot = [];
@@ -1628,12 +1882,12 @@ function generateHTML(data: any, title: any = 'TradingView Style Research') {
                         u.ctx.closePath();
                         u.ctx.fill();
                     }
-                    u.ctx.strokeStyle = 'rgba(38,166,154,0.55)';
+                    u.ctx.strokeStyle = 'rgba(239,83,80,0.55)';
                     u.ctx.lineWidth = 1;
                     u.ctx.beginPath();
                     segTop.forEach((p, k) => { if (k === 0) u.ctx.moveTo(p[0], p[1]); else u.ctx.lineTo(p[0], p[1]); });
                     u.ctx.stroke();
-                    u.ctx.strokeStyle = 'rgba(239,83,80,0.55)';
+                    u.ctx.strokeStyle = 'rgba(38,166,154,0.55)';
                     u.ctx.beginPath();
                     segBot.forEach((p, k) => { if (k === 0) u.ctx.moveTo(p[0], p[1]); else u.ctx.lineTo(p[0], p[1]); });
                     u.ctx.stroke();
@@ -1670,7 +1924,7 @@ function generateHTML(data: any, title: any = 'TradingView Style Research') {
             currentSeriesState = getSeriesState(currentPairMode);
             currentSeriesCandles = currentSeriesState.candles;
             currentSeriesCloseValues = currentSeriesState.closeValues;
-            const aggregated = aggregateCandles(currentSeriesCandles, tf?.seconds || 3600);
+            const aggregated = aggregateCandles(currentSeriesCandles, tf?.seconds || 3600, tf?.label || currentTimeframe);
             currentCandles = aggregated.candles;
             if (currentCandles.length) {
                 xMin = currentCandles[0].time;
@@ -1702,22 +1956,30 @@ function generateHTML(data: any, title: any = 'TradingView Style Research') {
             const baseRange = computeRangeBand(baseAma);
             currentRangeUpper = sampleSeriesByIndex(baseRange.upper, aggregated.idxs);
             currentRangeLower = sampleSeriesByIndex(baseRange.lower, aggregated.idxs);
-            currentRangeTrend = sampleTrendByIndex(baseRange.trend, aggregated.idxs);
             currentAmaOff = currentAmaEnabled && currentAmaInitOffset !== 0 ? sampleSeriesByIndex(baseAmaOff, aggregated.idxs) : new Array(currentCandles.length).fill(null);
             currentVwap = currentVwapEnabled ? sampleSeriesByIndex(baseVwap, aggregated.idxs) : new Array(currentCandles.length).fill(null);
             const amaCfg = currentAmaConfig();
             const warmupInit = currentAmaEnabled && baseAma.length > amaCfg.erPeriod ? baseAma[amaCfg.erPeriod] : null;
-            const baseSmaInit = warmupInit !== null
-                ? currentSeriesCandles.map((c, i) => i <= amaCfg.erPeriod ? warmupInit : null)
-                : new Array(currentSeriesCandles.length).fill(null);
-            currentSmaInit = sampleSeriesByIndex(baseSmaInit, aggregated.idxs);
+            // Build the init segment in the selected timeframe. Sampling the
+            // 1h init series by each bucket's final 1h index can make it end
+            // inside a week/month bucket, leaving a gap before the first
+            // sampled AMA value appears.
+            const firstAmaIndex = currentAma.findIndex((value) => Number.isFinite(value));
+            // The first visible higher-timeframe AMA sample can already be
+            // several 1h updates past the true warmup point. Anchor that
+            // sample to the warmup average so the AMA starts where the init
+            // line ends instead of appearing detached at a different value.
+            if (warmupInit !== null && firstAmaIndex >= 0) currentAma[firstAmaIndex] = warmupInit;
+            currentSmaInit = warmupInit !== null
+                ? currentAma.map((value, i) => i <= firstAmaIndex || (firstAmaIndex < 0 && i === currentAma.length - 1) ? warmupInit : null)
+                : new Array(currentCandles.length).fill(null);
             const offsetInit = currentAmaEnabled && currentAmaInitOffset !== 0 && baseAmaOff.length > amaCfg.erPeriod
                 ? baseAmaOff[amaCfg.erPeriod]
                 : null;
-            const baseSmaInitOff = offsetInit !== null
-                ? currentSeriesCandles.map((c, i) => i <= amaCfg.erPeriod ? offsetInit : null)
-                : new Array(currentSeriesCandles.length).fill(null);
-            currentSmaInitOff = sampleSeriesByIndex(baseSmaInitOff, aggregated.idxs);
+            const firstAmaOffIndex = currentAmaOff.findIndex((value) => Number.isFinite(value));
+            currentSmaInitOff = offsetInit !== null
+                ? currentAmaOff.map((value, i) => i < firstAmaOffIndex || (firstAmaOffIndex < 0 && i === currentAmaOff.length - 1) ? offsetInit : null)
+                : new Array(currentCandles.length).fill(null);
             currentPriceData = [
                 currentCandles.map((c) => c.time),
                 currentOpen,
@@ -1733,7 +1995,7 @@ function generateHTML(data: any, title: any = 'TradingView Style Research') {
             ];
             currentVolumeData = [
                 currentCandles.map((c) => c.time),
-                currentCandles.map((c) => c.volume),
+                currentCandles.map((c) => getDisplayVolume(c)),
             ];
             return {
                 priceData: currentPriceData,
@@ -1750,7 +2012,7 @@ function generateHTML(data: any, title: any = 'TradingView Style Research') {
                 padding: [14, 8, 8, 8],
                 legend: { show: false },
                 select: { show: false },
-                cursor: { sync: { key: STORAGE_KEY, setSeries: false, scales: ['x', null] }, drag: { x: false, y: false, setScale: false }, focus: { prox: 20 } },
+                cursor: { sync: { key: SYNC_KEY, setSeries: false, scales: ['x', null] }, drag: { x: false, y: false, setScale: false }, focus: { prox: 20 } },
                 scales: {
                     x: { time: true },
                     y: {
@@ -1801,7 +2063,12 @@ function generateHTML(data: any, title: any = 'TradingView Style Research') {
                     },
                 ],
                 hooks: {
-                    draw: [(u) => positionPriceMarker(u)],
+                    draw: [(u) => { positionPriceMarker(u); positionReserveLine(u); positionOrderLines(u); positionUpdateMarker(u, true); }],
+                    // Keep the bottom-right stat badges glued to the visible
+                    // window while zooming/panning (rAF-throttled text swap).
+                    // Refit Y to the visible window on timeframe (x) moves —
+                    // uPlot does not recompute Y on setScale('x') by itself.
+                    setScale: [(u, key) => { if (key === 'x') scheduleYRefit(); scheduleStatPanels(); }],
                 },
             };
 
@@ -1817,7 +2084,7 @@ function generateHTML(data: any, title: any = 'TradingView Style Research') {
                 padding: [6, 8, 8, 8],
                 legend: { show: false },
                 select: { show: false },
-                cursor: { sync: { key: STORAGE_KEY, setSeries: false, scales: ['x', null] }, drag: { x: false, y: false, setScale: false }, focus: { prox: 20 } },
+                cursor: { sync: { key: SYNC_KEY, setSeries: false, scales: ['x', null] }, drag: { x: false, y: false, setScale: false }, focus: { prox: 20 } },
                 scales: {
                     x: { time: true },
                     y: {
@@ -1838,6 +2105,11 @@ function generateHTML(data: any, title: any = 'TradingView Style Research') {
                     makeTimeAxis(true),
                     { scale: 'y', side: 1, size: 84, space: 22, stroke: '#ffffff', grid: { stroke: '#1c2128' }, ticks: { stroke: '#30363d', width: 1 }, font: '600 12px Segoe UI, sans-serif', values: (u, vals) => vals.map((v) => (v == null ? '' : fmtVolume(v))) },
                 ],
+                hooks: {
+                    // x is synced from the price chart; refit volume Y to the
+                    // visible window and refresh the max badge.
+                    setScale: [(u, key) => { if (key === 'x') scheduleYRefit(); scheduleStatPanels(); }],
+                },
             };
 
             const volumePluginInst = volumePlugin();
@@ -1850,32 +2122,33 @@ function generateHTML(data: any, title: any = 'TradingView Style Research') {
             lastRenderedPriceScale = currentPriceScale;
             return priceChart;
         }
-        // True when clientX sits over the price-axis region. The chart canvas
-        // (plot + axis gutters) can be wider than the viewport and the right
-        // gutter clipped off-screen, so we key the price zone off the ON-SCREEN
-        // chart container width (always reachable) rather than the far-right gutter.
-        // The rightmost ~120px of the container zooms price; the rest pans time.
+        // True when clientX sits over the true price-axis gutter (right of
+        // the plot area). Keyed off uPlot's plot rect, not the container
+        // width, so grabs on candles — even the newest ones at the plot's
+        // right edge — always pan instead of scaling. Only the axis itself
+        // zooms price; the rest pans time.
         function inYAxisZone(chart, clientX) {
-            const rootRect = chart.root.getBoundingClientRect();
-            if (!rootRect || rootRect.width <= 0) return false;
-            const x = clientX - rootRect.left;
-            if (chart === priceChart) {
-                return x > rootRect.width - 120;
-            }
-            return false;
+            if (chart !== priceChart || !chart.over) return false;
+            const overRect = chart.over.getBoundingClientRect();
+            if (!overRect || overRect.width <= 0) return false;
+            return clientX >= overRect.right - 2;
+        }
+        // True when the pointer sits over the time-axis gutter (below the
+        // plot area) of either chart. Dragging there scales the timeframe;
+        // drags on candles always pan instead.
+        function inXAxisZone(chart, clientY) {
+            if (!chart || !chart.over) return false;
+            const overRect = chart.over.getBoundingClientRect();
+            if (!overRect || overRect.height <= 0) return false;
+            return clientY >= overRect.bottom - 2;
         }
         let priceMarkerLabel = null;
-        let priceMarkerLine = null;
         function ensurePriceMarker(u) {
             if (priceMarkerLabel && priceMarkerLabel.parentNode === u.root) return;
             if (priceMarkerLabel && priceMarkerLabel.parentNode) priceMarkerLabel.parentNode.removeChild(priceMarkerLabel);
-            if (priceMarkerLine && priceMarkerLine.parentNode) priceMarkerLine.parentNode.removeChild(priceMarkerLine);
             try { if (getComputedStyle(u.root).position === 'static') u.root.style.position = 'relative'; } catch (e) {}
             priceMarkerLabel = document.createElement('div');
             priceMarkerLabel.style.cssText = 'position:absolute;z-index:30;pointer-events:none;font:600 12px Segoe UI, sans-serif;line-height:19px;height:19px;padding:0 7px;border-radius:3px;color:#ffffff;white-space:nowrap;box-sizing:border-box;text-align:center;overflow:hidden;';
-            priceMarkerLine = document.createElement('div');
-            priceMarkerLine.style.cssText = 'position:absolute;z-index:1;pointer-events:none;height:0;border-top:1px dashed currentColor;opacity:0.6;';
-            u.root.appendChild(priceMarkerLine);
             u.root.appendChild(priceMarkerLabel);
         }
         function positionPriceMarker(u) {
@@ -1886,7 +2159,6 @@ function generateHTML(data: any, title: any = 'TradingView Style Research') {
             const price = last.close;
             if (!Number.isFinite(price)) {
                 priceMarkerLabel.style.display = 'none';
-                priceMarkerLine.style.display = 'none';
                 return;
             }
             const up = price >= (Number.isFinite(prev.close) ? prev.close : price);
@@ -1896,7 +2168,6 @@ function generateHTML(data: any, title: any = 'TradingView Style Research') {
             const sMax = Number.isFinite(s.max) ? s.max : null;
             if (sMin == null || sMax == null || sMax <= sMin) {
                 priceMarkerLabel.style.display = 'none';
-                priceMarkerLine.style.display = 'none';
                 return;
             }
             let frac;
@@ -1913,7 +2184,8 @@ function generateHTML(data: any, title: any = 'TradingView Style Research') {
             if (!overRect || overRect.height <= 0) return;
             const plotTop = overRect.top - rootRect.top;
             const yRel = (1 - frac) * overRect.height;
-            const inRange = frac >= 0 && frac <= 1;
+            // No full-width dashed line by design (disturbs reading) — the
+            // axis label above carries the last price on its own.
             priceMarkerLabel.style.display = 'block';
             priceMarkerLabel.textContent = fmtPriceLabel(price);
             priceMarkerLabel.style.background = color;
@@ -1929,15 +2201,335 @@ function generateHTML(data: any, title: any = 'TradingView Style Research') {
                 priceMarkerLabel.style.right = '0px';
                 priceMarkerLabel.style.width = Math.max(40, rightAxisW - 4) + 'px';
             }
-            if (inRange) {
-                priceMarkerLine.style.display = 'block';
-                priceMarkerLine.style.color = color;
-                priceMarkerLine.style.top = (plotTop + yRel) + 'px';
-                priceMarkerLine.style.left = (overRect.left - rootRect.left) + 'px';
-                priceMarkerLine.style.width = overRect.width + 'px';
+        }
+        // ── Order overlay ──
+        // Active grid orders as dashed levels: green = buys, red = sells.
+        // Grid bounds span the full grid (live + virtual slots), never
+        // calculated: reserve = lowest grid buy, ceiling = highest grid sell.
+        // Spread = best buy/best sell gap.
+        // Pair-aware: order prices invert (1/p) with the candles so B/A shows
+        // the same levels in display units (side colors preserved).
+        let reserveLine = null;
+        let reserveLabel = null;
+        let ceilingLine = null;
+        let ceilingLabel = null;
+        let spreadMidLabel = null;
+        let orderLineDivs = [];
+        let orderBuyLabel = null;
+        let orderSellLabel = null;
+        let orderPriceTags = [];
+        let lastOverlayKey = '';
+        function getDisplayOrders() {
+            const rawBuys = Array.isArray(payload.orderBuys) ? payload.orderBuys.filter(Number.isFinite).filter((p) => p > 0) : [];
+            const rawSells = Array.isArray(payload.orderSells) ? payload.orderSells.filter(Number.isFinite).filter((p) => p > 0) : [];
+            if (normalizePairMode(currentPairMode) !== 'inverse') return { buys: rawBuys, sells: rawSells };
+            const inv = (arr) => arr.map((p) => 1 / p).filter(Number.isFinite).filter((p) => p > 0);
+            return { buys: inv(rawBuys), sells: inv(rawSells) };
+        }
+        function yForPriceCached(ys, overRect, rootRect, price) {
+            const sMin = Number.isFinite(ys.min) ? ys.min : null;
+            const sMax = Number.isFinite(ys.max) ? ys.max : null;
+            if (sMin == null || sMax == null || sMax <= sMin) return null;
+            let frac;
+            if (currentPriceScale === 'log') {
+                if (!(sMin > 0) || !(price > 0)) return null;
+                const lmin = Math.log10(sMin), lmax = Math.log10(sMax);
+                frac = (Math.log10(price) - lmin) / (lmax - lmin);
+            } else {
+                frac = (price - sMin) / (sMax - sMin);
+            }
+            if (frac < 0 || frac > 1) return null;
+            return (overRect.top - rootRect.top) + (1 - frac) * overRect.height;
+        }
+        function hideOverlayNodes() {
+            [reserveLine, reserveLabel, ceilingLine, ceilingLabel, spreadMidLabel, orderBuyLabel, orderSellLabel].forEach((n) => { if (n) n.style.display = 'none'; });
+            orderLineDivs.forEach((d) => { d.style.display = 'none'; });
+            orderPriceTags.forEach((t) => { t.style.display = 'none'; });
+        }
+        function positionReserveLine(u) {
+            if (!u || !u.over || !currentCandles.length) return;
+            if (!currentOrdersVisible || (!hasOrders && !hasBounds)) { hideOverlayNodes(); return; }
+            try { if (getComputedStyle(u.root).position === 'static') u.root.style.position = 'relative'; } catch (e) {}
+            if (!reserveLine || reserveLine.parentNode !== u.root) {
+                if (reserveLine && reserveLine.parentNode) reserveLine.parentNode.removeChild(reserveLine);
+                if (reserveLabel && reserveLabel.parentNode) reserveLabel.parentNode.removeChild(reserveLabel);
+                reserveLine = document.createElement('div');
+                reserveLine.style.cssText = 'position:absolute;z-index:1;pointer-events:none;height:0;border-top:2px dashed #f97316;opacity:0.7;left:0;right:0;display:none;';
+                reserveLabel = document.createElement('div');
+                reserveLabel.style.cssText = 'position:absolute;z-index:25;pointer-events:none;font:600 10px Segoe UI, sans-serif;line-height:15px;height:15px;padding:0 5px;border-radius:3px;color:#f97316;background:rgba(30,41,59,0.9);white-space:nowrap;display:none;';
+                u.root.appendChild(reserveLine);
+                u.root.appendChild(reserveLabel);
+            }
+            // Grid bounds span the full DEXBot grid (live + virtual slots
+            // in base units), never calculated: bottom = lowest grid buy,
+            // top = highest grid sell. Reciprocals flip the ordering, so
+            // the sides swap in B/A view. A missing side hides its line
+            // instead of drawing an invented level.
+            const { buys: boundBuys, sells: boundSells } = getDisplayOrders();
+            const rawLow = Number(payload.gridBounds?.low);
+            const rawHigh = Number(payload.gridBounds?.high);
+            const gridLow = Number.isFinite(rawLow) && rawLow > 0 ? rawLow : null;
+            const gridHigh = Number.isFinite(rawHigh) && rawHigh > 0 ? rawHigh : null;
+            const inversePairs = normalizePairMode(currentPairMode) === 'inverse';
+            const reservePrice = inversePairs
+                ? (gridHigh != null ? 1 / gridHigh : null)
+                : gridLow;
+            const ceilingPrice = inversePairs
+                ? (gridLow != null ? 1 / gridLow : null)
+                : gridHigh;
+            const ys = u.scales.y || {};
+            const rootRect = u.root.getBoundingClientRect();
+            const overRect = u.over.getBoundingClientRect();
+            const y = reservePrice != null ? yForPriceCached(ys, overRect, rootRect, reservePrice) : null;
+            if (y == null) {
+                reserveLine.style.display = 'none';
+                reserveLabel.style.display = 'none';
+            } else {
+                reserveLine.style.display = 'block';
+                reserveLine.style.top = y + 'px';
+                const lastClose = currentCandles[currentCandles.length - 1].close;
+                const dipRaw = Number.isFinite(lastClose) && lastClose > 0 ? (lastClose - reservePrice) / lastClose * 100 : NaN;
+                const dipTxt = Number.isFinite(dipRaw) ? (dipRaw >= 0 ? '-' : '+') + Math.abs(Math.round(dipRaw)) + '%' : '-';
+                reserveLabel.style.display = 'block';
+                reserveLabel.textContent = 'reserve ' + fmtPriceLabel(reservePrice) + ' (' + dipTxt + ')';
+                reserveLabel.style.left = '8px';
+                reserveLabel.style.top = (y - 16) + 'px';
+            }
+            if (!ceilingLine || ceilingLine.parentNode !== u.root) {
+                if (ceilingLine && ceilingLine.parentNode) ceilingLine.parentNode.removeChild(ceilingLine);
+                if (ceilingLabel && ceilingLabel.parentNode) ceilingLabel.parentNode.removeChild(ceilingLabel);
+                ceilingLine = document.createElement('div');
+                ceilingLine.style.cssText = 'position:absolute;z-index:1;pointer-events:none;height:0;border-top:2px dashed #f97316;opacity:0.7;left:0;right:0;display:none;';
+                ceilingLabel = document.createElement('div');
+                ceilingLabel.style.cssText = 'position:absolute;z-index:25;pointer-events:none;font:600 10px Segoe UI, sans-serif;line-height:15px;height:15px;padding:0 5px;border-radius:3px;color:#f97316;background:rgba(30,41,59,0.9);white-space:nowrap;display:none;';
+                u.root.appendChild(ceilingLine);
+                u.root.appendChild(ceilingLabel);
+            }
+            const cY = ceilingPrice != null ? yForPriceCached(ys, overRect, rootRect, ceilingPrice) : null;
+            if (cY == null) {
+                ceilingLine.style.display = 'none';
+                ceilingLabel.style.display = 'none';
+            } else {
+                ceilingLine.style.display = 'block';
+                ceilingLine.style.top = cY + 'px';
+                const lastCloseTop = currentCandles[currentCandles.length - 1].close;
+                const upRaw = Number.isFinite(lastCloseTop) && lastCloseTop > 0 ? (ceilingPrice - lastCloseTop) / lastCloseTop * 100 : NaN;
+                const upTxt = Number.isFinite(upRaw) ? (upRaw >= 0 ? '+' : '-') + Math.abs(Math.round(upRaw)) + '%' : '-';
+                ceilingLabel.style.display = 'block';
+                ceilingLabel.textContent = 'top ' + fmtPriceLabel(ceilingPrice) + ' (' + upTxt + ')';
+                ceilingLabel.style.left = '8px';
+                ceilingLabel.style.top = (cY + 4) + 'px';
+            }
+            if (!spreadMidLabel || spreadMidLabel.parentNode !== u.root) {
+                if (spreadMidLabel && spreadMidLabel.parentNode) spreadMidLabel.parentNode.removeChild(spreadMidLabel);
+                spreadMidLabel = document.createElement('div');
+                spreadMidLabel.style.cssText = 'position:absolute;z-index:25;pointer-events:none;font:700 11px Segoe UI, sans-serif;line-height:16px;height:16px;padding:0 6px;border-radius:3px;color:#0b0f14;background:#facc15;white-space:nowrap;display:none;';
+                u.root.appendChild(spreadMidLabel);
+            }
+            if (boundBuys.length && boundSells.length) {
+                const bestBuy = Math.max(...boundBuys);
+                const bestSell = Math.min(...boundSells);
+                const yB = yForPriceCached(ys, overRect, rootRect, bestBuy);
+                const yS = yForPriceCached(ys, overRect, rootRect, bestSell);
+                if (yB != null && yS != null && bestBuy > 0) {
+                    const spr = (bestSell - bestBuy) / bestBuy * 100;
+                    spreadMidLabel.style.display = 'block';
+                    spreadMidLabel.textContent = 'spread ' + spr.toFixed(2) + '%';
+                    spreadMidLabel.style.left = '8px';
+                    spreadMidLabel.style.top = ((yB + yS) / 2 - 8) + 'px';
+                } else {
+                    spreadMidLabel.style.display = 'none';
+                }
+            } else if (spreadMidLabel) {
+                spreadMidLabel.style.display = 'none';
+            }
+        }
+        function positionOrderLines(u) {
+            if (!u || !u.over) return;
+            if (!currentOrdersVisible) {
+                orderLineDivs.forEach((d) => { d.style.display = 'none'; });
+                orderPriceTags.forEach((t) => { t.style.display = 'none'; });
+                if (orderBuyLabel) orderBuyLabel.style.display = 'none';
+                if (orderSellLabel) orderSellLabel.style.display = 'none';
+                return;
+            }
+            try { if (getComputedStyle(u.root).position === 'static') u.root.style.position = 'relative'; } catch (e) {}
+            const { buys, sells } = getDisplayOrders();
+            const total = buys.length + sells.length;
+            if (orderLineDivs.length && orderLineDivs[0].parentNode !== u.root) {
+                orderLineDivs.forEach((d) => u.root.appendChild(d));
+                orderPriceTags.forEach((t) => u.root.appendChild(t));
+                lastOverlayKey = '';
+            }
+            while (orderLineDivs.length < total) {
+                const d = document.createElement('div');
+                d.style.cssText = 'position:absolute;z-index:1;pointer-events:none;height:0;left:0;right:0;display:none;';
+                u.root.appendChild(d);
+                orderLineDivs.push(d);
+            }
+            const ys = u.scales.y || {};
+            const overlayKey = (ys.min || 0) + '|' + (ys.max || 0) + '|' + (u.root.clientWidth || 0) + '|' + (u.root.clientHeight || 0) + '|' + currentPriceScale + '|' + currentPairMode;
+            if (overlayKey === lastOverlayKey) return;
+            lastOverlayKey = overlayKey;
+            const rootRect = u.root.getBoundingClientRect();
+            const overRect = u.over.getBoundingClientRect();
+            if (!orderBuyLabel || orderBuyLabel.parentNode !== u.root) {
+                if (orderBuyLabel && orderBuyLabel.parentNode) orderBuyLabel.parentNode.removeChild(orderBuyLabel);
+                orderBuyLabel = document.createElement('div');
+                orderBuyLabel.style.cssText = 'position:absolute;z-index:25;pointer-events:none;font:600 10px Segoe UI, sans-serif;line-height:15px;height:15px;padding:0 5px;border-radius:3px;color:#26a69a;background:rgba(30,41,59,0.9);white-space:nowrap;display:none;';
+                u.root.appendChild(orderBuyLabel);
+            }
+            if (!orderSellLabel || orderSellLabel.parentNode !== u.root) {
+                if (orderSellLabel && orderSellLabel.parentNode) orderSellLabel.parentNode.removeChild(orderSellLabel);
+                orderSellLabel = document.createElement('div');
+                orderSellLabel.style.cssText = 'position:absolute;z-index:25;pointer-events:none;font:600 10px Segoe UI, sans-serif;line-height:15px;height:15px;padding:0 5px;border-radius:3px;color:#ef5350;background:rgba(30,41,59,0.9);white-space:nowrap;display:none;';
+                u.root.appendChild(orderSellLabel);
+            }
+            let idx = 0;
+            const place = (price, color) => {
+                const d = orderLineDivs[idx++];
+                const y = yForPriceCached(ys, overRect, rootRect, price);
+                if (y == null) { d.style.display = 'none'; return null; }
+                d.style.display = 'block';
+                d.style.top = y + 'px';
+                d.style.borderTop = '1.5px dashed ' + color;
+                d.style.opacity = '0.55';
+                return y;
+            };
+            let botBuyY = null;
+            buys.forEach((p) => { const y = place(p, '#26a69a'); if (y != null && (botBuyY == null || y > botBuyY)) botBuyY = y; });
+            let topSellY = null;
+            sells.forEach((p) => { const y = place(p, '#ef5350'); if (y != null && (topSellY == null || y < topSellY)) topSellY = y; });
+            for (; idx < orderLineDivs.length; idx++) orderLineDivs[idx].style.display = 'none';
+            if (orderPriceTags.length && orderPriceTags[0].parentNode !== u.root) {
+                orderPriceTags.forEach((t) => u.root.appendChild(t));
+            }
+            const levels = [
+                ...buys.map((p) => ({ p, c: '#26a69a', bg: 'rgba(20,30,28,0.92)' })),
+                ...sells.map((p) => ({ p, c: '#ef5350', bg: 'rgba(30,20,22,0.92)' })),
+            ].sort((a, b) => a.p - b.p);
+            let ti = 0, lastTagY = -Infinity;
+            const ensureTag = () => {
+                if (ti >= orderPriceTags.length) {
+                    const t = document.createElement('div');
+                    t.style.cssText = 'position:absolute;z-index:25;pointer-events:none;font:600 9px Segoe UI, sans-serif;line-height:14px;height:14px;padding:0 4px;border-radius:3px;white-space:nowrap;display:none;';
+                    u.root.appendChild(t);
+                    orderPriceTags.push(t);
+                }
+                return orderPriceTags[ti++];
+            };
+            for (const lv of levels) {
+                const tag = ensureTag();
+                const y = yForPriceCached(ys, overRect, rootRect, lv.p);
+                if (y == null || Math.abs(y - lastTagY) < 13) { tag.style.display = 'none'; continue; }
+                tag.style.display = 'block';
+                tag.style.top = (y - 7) + 'px';
+                tag.style.right = '4px';
+                tag.style.color = lv.c;
+                tag.style.background = lv.bg;
+                tag.style.border = '1px solid ' + lv.c;
+                tag.textContent = fmtPriceLabel(lv.p);
+                lastTagY = y;
+            }
+            for (; ti < orderPriceTags.length; ti++) orderPriceTags[ti].style.display = 'none';
+            if (buys.length && botBuyY != null) {
+                orderBuyLabel.style.display = 'block';
+                orderBuyLabel.textContent = 'BUYS (' + buys.length + ') ' + fmtPriceLabel(Math.min(...buys));
+                orderBuyLabel.style.left = '8px';
+                orderBuyLabel.style.top = (botBuyY + 4) + 'px';
+            } else {
+                orderBuyLabel.style.display = 'none';
+            }
+            if (sells.length && topSellY != null) {
+                orderSellLabel.style.display = 'block';
+                orderSellLabel.textContent = 'SELLS (' + sells.length + ') ' + fmtPriceLabel(Math.max(...sells));
+                orderSellLabel.style.left = '8px';
+                orderSellLabel.style.top = (topSellY - 16) + 'px';
             } else {
-                priceMarkerLine.style.display = 'none';
+                orderSellLabel.style.display = 'none';
+            }
+        }
+        function resetOverlayNodes() {
+            reserveLine = null;
+            reserveLabel = null;
+            ceilingLine = null;
+            ceilingLabel = null;
+            spreadMidLabel = null;
+            orderLineDivs = [];
+            orderBuyLabel = null;
+            orderSellLabel = null;
+            orderPriceTags = [];
+            lastOverlayKey = '';
+        }
+        // ── Volume hover tooltip ──
+        let volumeHoverTip = null;
+        // ── Update marker ("updated from here"): vertical line where the
+        // latest incremental fetch started, with a date label. Shown only
+        // when the generator was given a marker timestamp.
+        const UPDATE_MARKER_SEC = Number(payload.updateMarkerTsSec) > 0 ? Number(payload.updateMarkerTsSec) : null;
+        function positionUpdateMarker(u, withLabel) {
+            if (!UPDATE_MARKER_SEC || !u || !u.over || !currentCandles.length) return;
+            let wrap = u.root.querySelector(':scope > .um-wrap');
+            if (!wrap) {
+                try { if (getComputedStyle(u.root).position === 'static') u.root.style.position = 'relative'; } catch (e) {}
+                wrap = document.createElement('div');
+                wrap.style.cssText = 'position:absolute;z-index:24;pointer-events:none;';
+                wrap.innerHTML =
+                    '<div class="um-line" style="position:absolute;top:0;height:100%;width:0;border-left:2px dashed #22d3ee;opacity:0.75;"></div>' +
+                    '<div class="um-tag" style="position:absolute;top:2px;left:6px;font:600 10px Segoe UI, sans-serif;line-height:15px;color:#22d3ee;white-space:nowrap;"></div>';
+                u.root.appendChild(wrap);
+            }
+            const s = u.scales.x || {};
+            const sMin = Number.isFinite(s.min) ? s.min : null;
+            const sMax = Number.isFinite(s.max) ? s.max : null;
+            if (sMin == null || sMax == null || sMax <= sMin) { wrap.style.display = 'none'; return; }
+            const frac = (UPDATE_MARKER_SEC - sMin) / (sMax - sMin);
+            const inView = frac >= 0 && frac <= 1;
+            if (!inView) { wrap.style.display = 'none'; return; }
+            const rootRect = u.root.getBoundingClientRect();
+            const overRect = u.over.getBoundingClientRect();
+            const xRoot = (overRect.left - rootRect.left) + frac * overRect.width;
+            wrap.style.display = 'block';
+            wrap.style.left = xRoot + 'px';
+            wrap.style.top = (overRect.top - rootRect.top) + 'px';
+            wrap.style.height = overRect.height + 'px';
+            if (withLabel) {
+                const tag = wrap.querySelector('.um-tag');
+                const d = new Date(UPDATE_MARKER_SEC * 1000);
+                const hh = String(d.getUTCHours()).padStart(2, '0');
+                const mm = String(d.getUTCMinutes()).padStart(2, '0');
+                const bars = Number(payload.updateMarkerNewBars) > 0 ? ' (+' + Math.round(Number(payload.updateMarkerNewBars)) + ')' : '';
+                tag.textContent = 'update ' + d.toLocaleDateString(undefined) + ' ' + hh + ':' + mm + bars + ' →';
+                tag.style.left = (frac > 0.8 ? -(tag.offsetWidth + 8) : 6) + 'px';
+            }
+        }
+        function ensureVolumeHoverTip(u) {
+            if (volumeHoverTip && volumeHoverTip.parentNode === u.root) return;
+            if (volumeHoverTip && volumeHoverTip.parentNode) volumeHoverTip.parentNode.removeChild(volumeHoverTip);
+            volumeHoverTip = document.createElement('div');
+            volumeHoverTip.style.cssText = 'position:absolute;z-index:31;pointer-events:none;display:none;font:600 11px Segoe UI, sans-serif;line-height:18px;height:18px;padding:0 8px;border-radius:4px;color:#ffffff;background:rgba(48,54,61,0.95);border:1px solid #6e7681;white-space:nowrap;box-sizing:border-box;';
+            u.root.appendChild(volumeHoverTip);
+        }
+        function showVolumeHover(u) {
+            if (!u || !u.over || !currentCandles.length) return;
+            ensureVolumeHoverTip(u);
+            const idx = u.cursor.idx;
+            if (idx == null || idx < 0 || idx >= currentCandles.length) {
+                volumeHoverTip.style.display = 'none';
+                return;
+            }
+            const c = currentCandles[idx];
+            const dv = getDisplayVolume(c);
+            if (!Number.isFinite(dv)) {
+                volumeHoverTip.style.display = 'none';
+                return;
             }
+            const barX = u.valToPos(u.data[0][idx], 'x', true);
+            volumeHoverTip.style.display = 'block';
+            volumeHoverTip.textContent = 'Vol ' + fmtVolumeWithSym(dv);
+            volumeHoverTip.style.left = Math.max(2, barX - volumeHoverTip.offsetWidth / 2) + 'px';
+            // Pinned to the panel top — never covers the bars
+            volumeHoverTip.style.top = '2px';
         }
         function currentYRange(chart) {
             const s = chart.scales.y || {};
@@ -1965,10 +2557,12 @@ function generateHTML(data: any, title: any = 'TradingView Style Research') {
                 return;
             }
             // Uloszoomauksen rajat: alin naytettava hinta voi painua viimeistaan
-            // ~35 % datan minimin alapuolelle, ylin ~1.6x datan maksimin —
-            // ei siis paase "lipsahtamaan" candleita nakyvasta kadottaen.
-            // Kokonaisvalille ei ole ylarajaa: pystyakselia saa zoomata ulos vapaasti.
-            priceBounds = { min: min, max: max, floor: min * 0.35, ceil: max * 1.6 };
+            // ~1/2 datan minimin alapuolelle, ylin ~2x datan maksimin —
+            // paneminen kayttaa tata 2x-bandia ja pysahtyy jaykkana sen
+            // reunaan (ei siis paase "lipsahtamaan" candleita nakyvasta
+            // kadottaen). Kokonaisvalille ei ole ylarajaa: pystyakselia saa
+            // zoomata ulos vapaasti.
+            priceBounds = { min: min, max: max, floor: min / 2, ceil: max * 2.0 };
         }
         function applyYRange(chart, min, max) {
             if (!Number.isFinite(min) || !Number.isFinite(max) || max <= min) return false;
@@ -1979,11 +2573,37 @@ function generateHTML(data: any, title: any = 'TradingView Style Research') {
                 if (max <= min) return false;
             }
             if (priceBounds) {
-                let nMin = Math.max(min, priceBounds.floor);
-                let nMax = Math.min(max, priceBounds.ceil);
-                if (nMax <= nMin) return false;
-                min = nMin;
-                max = nMax;
+                // Span-locked slide within the 2x zoom band: a pan that would
+                // cross the zoom-out limits stops as a rigid block instead of
+                // getting squashed (squashing reads as scaling halfway through
+                // a drag). Only a span wider than the band itself snaps to the
+                // full band. Scaling lives on the axis gutters alone.
+                if (currentPriceScale === 'log') {
+                    const spanRatio = max / min;
+                    if (spanRatio > priceBounds.ceil / priceBounds.floor) {
+                        min = priceBounds.floor;
+                        max = priceBounds.ceil;
+                    } else {
+                        if (max > priceBounds.ceil) {
+                            const f = max / priceBounds.ceil;
+                            min /= f; max /= f;
+                        }
+                        if (min < priceBounds.floor) {
+                            const f = priceBounds.floor / min;
+                            min *= f; max *= f;
+                        }
+                    }
+                } else {
+                    const span = max - min;
+                    if (span > priceBounds.ceil - priceBounds.floor) {
+                        min = priceBounds.floor;
+                        max = priceBounds.ceil;
+                    } else {
+                        if (max > priceBounds.ceil) { max = priceBounds.ceil; min = max - span; }
+                        if (min < priceBounds.floor) { min = priceBounds.floor; max = min + span; }
+                    }
+                }
+                if (!(max > min) || !Number.isFinite(min) || !Number.isFinite(max)) return false;
             }
             manualYRange = { min: min, max: max };
             chart.setScale('y', { min: min, max: max });
@@ -2042,6 +2662,56 @@ function generateHTML(data: any, title: any = 'TradingView Style Research') {
                 window.addEventListener('mouseup', endDrag, { once: true });
             }, true);
         }
+        // Time-axis drag scales the timeframe around its center (mirror of
+        // the price-axis drag): drag right to zoom out, left to zoom in.
+        // Synced across charts via syncXRange; capture phase pre-empts plot pan.
+        function bindXAxisDrag(chart) {
+            let dragging = false;
+            let startClientX = 0;
+            let startRange = null;
+            const onMove = (e) => {
+                if (!dragging || !startRange) return;
+                e.preventDefault();
+                chart.root.style.cursor = 'ew-resize';
+                const deltaPx = e.clientX - startClientX;
+                if (!Number.isFinite(deltaPx) || deltaPx === 0) return;
+                const factor = Math.exp(deltaPx / 350);
+                const span = startRange.max - startRange.min;
+                if (!Number.isFinite(span) || span <= 0) return;
+                const center = (startRange.min + startRange.max) / 2;
+                const nextSpan = span * factor;
+                syncXRange(center - nextSpan / 2, center + nextSpan / 2);
+            };
+            const endDrag = () => {
+                if (!dragging) return;
+                dragging = false;
+                startRange = null;
+                chart.root.style.cursor = '';
+                window.removeEventListener('mousemove', onMove);
+                window.removeEventListener('mouseup', endDrag);
+            };
+            chart.root.addEventListener('mousedown', (e) => {
+                if (!e || e.button !== 0 || e.ctrlKey || e.metaKey || e.altKey) return;
+                // capture phase so we pre-empt the plot pan when in the x-zone
+                const rect = chart.root.getBoundingClientRect();
+                if (e.clientX < rect.left || e.clientX > rect.right || e.clientY < rect.top || e.clientY > rect.bottom) return;
+                if (!inXAxisZone(chart, e.clientY)) return;
+                const s = chart.scales.x || {};
+                const range = {
+                    min: Number.isFinite(s.min) ? s.min : xMin,
+                    max: Number.isFinite(s.max) ? s.max : xMax,
+                };
+                if (!Number.isFinite(range.min) || !Number.isFinite(range.max) || range.max <= range.min) return;
+                e.preventDefault();
+                e.stopPropagation();
+                dragging = true;
+                startClientX = e.clientX;
+                startRange = range;
+                chart.root.style.cursor = 'ew-resize';
+                window.addEventListener('mousemove', onMove);
+                window.addEventListener('mouseup', endDrag, { once: true });
+            }, true);
+        }
         function bindYAxisReset(chart) {
             chart.root.addEventListener('dblclick', (e) => {
                 if (chart !== priceChart) return;
@@ -2056,6 +2726,12 @@ function generateHTML(data: any, title: any = 'TradingView Style Research') {
         function setControls() {
             setActivePairMode(currentPairMode);
             setActivePriceScale(currentPriceScale);
+            const ordersToggle = document.getElementById('orders-toggle');
+            if (ordersToggle) ordersToggle.checked = currentOrdersVisible;
+            const volumeToggleEl = document.getElementById('volume-toggle');
+            if (volumeToggleEl) volumeToggleEl.checked = currentVolumeVisible;
+            setActiveVolumeUnit();
+            markActiveAmaPreset();
             document.getElementById('sma-toggle').checked = currentSmaEnabled;
             document.getElementById('sma-period').value = String(currentSmaPeriod);
             document.getElementById('ama-toggle').checked = currentAmaEnabled;
@@ -2068,7 +2744,7 @@ function generateHTML(data: any, title: any = 'TradingView Style Research') {
             document.getElementById('range-scale-toggle').checked = currentRangeScaleEnabled;
             document.getElementById('range-span').value = Number(currentRangeSpan).toFixed(2);
             document.getElementById('range-span-val').textContent = Number(currentRangeSpan).toFixed(2) + 'x';
-            document.getElementById('range-grid-wrap').style.display = payload.grid ? 'inline' : 'none';
+            document.getElementById('range-grid-wrap').style.display = 'inline';
             document.getElementById('ama-init-offset-toggle').checked = currentAmaInitOffsetEnabled;
             document.getElementById('ama-init-offset').value = String(currentAmaInitOffset);
             document.getElementById('ama-init-offset').disabled = !currentAmaInitOffsetEnabled;
@@ -2082,7 +2758,8 @@ function generateHTML(data: any, title: any = 'TradingView Style Research') {
             if (needsRebuild) {
                 manualYRange = null;
                 priceMarkerLabel = null;
-                priceMarkerLine = null;
+                resetOverlayNodes();
+                volumeHoverTip = null;
                 if (priceEl) priceEl.innerHTML = '';
                 if (volumeEl) volumeEl.innerHTML = '';
                 priceChart = null;
@@ -2113,16 +2790,53 @@ function generateHTML(data: any, title: any = 'TradingView Style Research') {
                 charts.forEach((chart) => {
                     bindWheelZoom(chart);
                     bindPan(chart);
+                    bindXAxisDrag(chart);
                     if (chart === priceChart) {
                         bindYAxisDrag(chart);
                         bindYAxisReset(chart);
                         chart.root.addEventListener('mousemove', (e) => {
-                            chart.root.style.cursor = inYAxisZone(chart, e.clientX) ? 'ns-resize' : '';
+                            chart.root.style.cursor = inYAxisZone(chart, e.clientX) ? 'ns-resize' : (inXAxisZone(chart, e.clientY) ? 'ew-resize' : '');
+                        });
+                        // Cursor price tag: floating label next to the mouse
+                        // showing the price under the cursor (price chart only).
+                        let cursorPriceTag = null;
+                        const ensureCursorPriceTag = () => {
+                            if (!cursorPriceTag || cursorPriceTag.parentNode !== chart.root) {
+                                if (cursorPriceTag && cursorPriceTag.parentNode) cursorPriceTag.parentNode.removeChild(cursorPriceTag);
+                                cursorPriceTag = document.createElement('div');
+                                cursorPriceTag.style.cssText = 'position:absolute;z-index:30;pointer-events:none;font:700 11px ui-monospace,SFMono-Regular,Menlo,monospace;line-height:16px;height:16px;padding:0 6px;border-radius:3px;color:#0b0f14;background:#e8eef5;white-space:nowrap;display:none;';
+                                chart.root.appendChild(cursorPriceTag);
+                            }
+                            return cursorPriceTag;
+                        };
+                        chart.over.addEventListener('mousemove', (e) => {
+                            const tag = ensureCursorPriceTag();
+                            const rect = chart.root.getBoundingClientRect();
+                            const overRect = chart.over.getBoundingClientRect();
+                            const price = chart.posToVal(e.clientY - overRect.top, 'y');
+                            if (!Number.isFinite(price)) { tag.style.display = 'none'; return; }
+                            tag.style.display = 'block';
+                            tag.textContent = fmtPriceLabel(price);
+                            let x = e.clientX - rect.left + 14;
+                            const y = e.clientY - rect.top - 8;
+                            const maxX = rect.width - tag.offsetWidth - 6;
+                            if (x > maxX) x = e.clientX - rect.left - tag.offsetWidth - 14;
+                            tag.style.left = Math.max(2, x) + 'px';
+                            tag.style.top = Math.max(2, y) + 'px';
+                        });
+                        chart.over.addEventListener('mouseleave', () => {
+                            if (cursorPriceTag) cursorPriceTag.style.display = 'none';
                         });
                     }
                     chart.root.addEventListener('mousemove', () => {
                         if (chart.cursor.idx != null) updateLegend(chart.cursor.idx);
                     });
+                    if (chart === volumeChart) {
+                        chart.over.addEventListener('mousemove', () => showVolumeHover(chart));
+                        chart.over.addEventListener('mouseleave', () => {
+                            if (volumeHoverTip) volumeHoverTip.style.display = 'none';
+                        });
+                    }
                     chart.root.addEventListener('mouseleave', refreshLegend);
                     chart.root.addEventListener('mouseenter', () => chart.root.classList.add('is-hovered'));
                     chart.root.addEventListener('mouseleave', () => chart.root.classList.remove('is-hovered'));
@@ -2130,10 +2844,13 @@ function generateHTML(data: any, title: any = 'TradingView Style Research') {
                 chartEventsBound = true;
             }
             if (oldRange && Number.isFinite(oldRange.min) && Number.isFinite(oldRange.max)) {
-                const next = clampXRange(oldRange.min, oldRange.max);
+                const next = clampRange(oldRange.min, oldRange.max);
                 if (next) charts.forEach((chart) => chart.batch(() => chart.setScale('x', next)));
             }
             refreshLegend();
+            renderMarketPanel();
+            renderRangePanel();
+            renderVolumePanel();
             saveState();
         }
 
@@ -2162,10 +2879,62 @@ function generateHTML(data: any, title: any = 'TradingView Style Research') {
             pairToggle.addEventListener('click', () => {
                 currentPairMode = currentPairMode === 'inverse' ? 'normal' : 'inverse';
                 manualYRange = null;
+                lastOverlayKey = '';
                 setControls();
                 rerender(true);
+                padXRight();
+            });
+        }
+        const ordersToggle = document.getElementById('orders-toggle');
+        if (ordersToggle) {
+            ordersToggle.addEventListener('change', () => {
+                currentOrdersVisible = ordersToggle.checked;
+                lastOverlayKey = '';
+                if (!currentOrdersVisible && priceChart) hideOverlayNodes();
+                setControls();
+                saveState();
+                if (priceChart) {
+                    positionReserveLine(priceChart);
+                    positionOrderLines(priceChart);
+                }
+                renderMarketPanel();
             });
         }
+        // Volume toggle: hide the volume chart so flex yields the space to
+        // the price chart (larger). No rerender, resize only.
+        const applyVolumeVisibility = () => {
+            if (!volumeEl || !priceChart) return;
+            volumeEl.style.display = currentVolumeVisible ? '' : 'none';
+            requestAnimationFrame(() => {
+                if (!priceChart) return;
+                priceChart.setSize({ width: priceEl.clientWidth, height: priceEl.clientHeight });
+                if (currentVolumeVisible && volumeChart && volumeEl.clientWidth > 0) {
+                    volumeChart.setSize({ width: volumeEl.clientWidth, height: volumeEl.clientHeight });
+                }
+            });
+        };
+        const volumeToggleInit = document.getElementById('volume-toggle');
+        if (volumeToggleInit) {
+            volumeToggleInit.checked = currentVolumeVisible;
+            volumeToggleInit.addEventListener('change', () => {
+                currentVolumeVisible = volumeToggleInit.checked;
+                saveState();
+                applyVolumeVisibility();
+            });
+        }
+        const volumeUnitToggle = document.getElementById('volume-unit-toggle');
+        if (volumeUnitToggle) {
+            volumeUnitToggle.addEventListener('click', () => toggleVolumeUnit());
+        }
+        const legendVolume = document.getElementById('legend-volume');
+        if (legendVolume) {
+            legendVolume.addEventListener('click', () => toggleVolumeUnit());
+        }
+        // Initial state on load (previously stored in localStorage)
+        applyVolumeVisibility();
+        document.querySelectorAll('.ama-preset-btn').forEach((b) => {
+            b.addEventListener('click', () => applyAmaPreset(b.dataset.amaPreset));
+        });
 
         const syncInputs = () => {
             currentSmaEnabled = document.getElementById('sma-toggle').checked;
@@ -2183,8 +2952,11 @@ function generateHTML(data: any, title: any = 'TradingView Style Research') {
             currentVwapBars = clamp(Math.round(Number(document.getElementById('vwap-bars').value) || 500), 24, 2000);
             currentRangeEnabled = document.getElementById('range-toggle').checked;
             currentRangeScaleEnabled = document.getElementById('range-scale-toggle').checked;
-            currentRangeSpan = Math.min(2, Math.max(1.25, Math.round((Number(document.getElementById('range-span').value) || 1.55) * 20) / 20));
+            currentRangeSpan = Math.min(2, Math.max(1.2, Math.round((Number(document.getElementById('range-span').value) || 1.55) * 20) / 20));
+            const ordersEl = document.getElementById('orders-toggle');
+            if (ordersEl) currentOrdersVisible = ordersEl.checked;
             setControls();
+            markActiveAmaPreset();
             rerender(false);
         };
 
@@ -2284,7 +3056,6 @@ function generateHTML(data: any, title: any = 'TradingView Style Research') {
         makeStepper('ama-er', 1, 1, 0);
         makeStepper('ama-fast', 0.1, 0.1, 1);
         makeStepper('ama-slow', 1, 0.1, 1);
-        document.getElementById('ama-reset').addEventListener('click', resetAmaDefaults);
         document.getElementById('ama-init-offset').addEventListener('input', () => {
             const input = document.getElementById('ama-init-offset');
             const snapped = snapInitOffset(input.value);
@@ -2298,14 +3069,181 @@ function generateHTML(data: any, title: any = 'TradingView Style Research') {
             syncInputs();
         });
 
+        // Room to the right past the last bar (~12%): for the market panel
+        // and future candles. Applied at init and on pair flip; user
+        // zoom/pan never trigger it, so it does not fight the user zoom.
+        function padXRight() {
+            if (!priceChart || !currentCandles.length) return;
+            const first = currentCandles[0]?.time;
+            const last = currentCandles[currentCandles.length - 1]?.time;
+            if (!Number.isFinite(first) || !Number.isFinite(last) || last <= first) return;
+            const span = last - first;
+            syncXRange(first - span * 0.02, last + span * 0.12);
+        }
+        // Market panel top-right: SELL / Market / BUY with distance-to-market
+        // %. Pair-aware (same display levels as the overlay). Static per
+        // generation, so drawn once (no draw hook); refreshed on pair flip
+        // via rerender. Hidden while the Orders overlay is unchecked — the
+        // BUY/SELL rows are overlay data, so they go away with it.
+        function renderMarketPanel() {
+            if (!priceChart) return;
+            let panel = document.getElementById('mkt-panel');
+            if (!panel) {
+                panel = document.createElement('div');
+                panel.id = 'mkt-panel';
+                panel.style.cssText = 'position:absolute;z-index:26;top:10px;right:88px;pointer-events:none;font:600 14px ui-monospace,SFMono-Regular,Menlo,monospace;line-height:1.6;padding:8px 12px;border-radius:8px;background:rgba(13,17,23,0.85);border:1px solid #263241;white-space:nowrap;text-align:right;';
+                priceChart.root.appendChild(panel);
+            }
+            if (!currentOrdersVisible && (hasOrders || hasBounds)) { panel.style.display = 'none'; return; }
+            panel.style.display = 'block';
+            const last = currentCandles[currentCandles.length - 1];
+            const mkt = last ? last.close : NaN;
+            const { buys, sells } = getDisplayOrders();
+            let html = '';
+            if (sells.length && Number.isFinite(mkt)) {
+                const s = Math.min(...sells);
+                const p = (s - mkt) / mkt * 100;
+                html += '<div style="color:#ef5350">SELL ' + fmtPriceLabel(s) + ' ' + (p >= 0 ? '+' : '') + p.toFixed(1) + '%</div>';
+            }
+            html += '<div style="color:#e8eef5">Market ' + (Number.isFinite(mkt) ? fmtPriceLabel(mkt) : '-') + '</div>';
+            if (buys.length && Number.isFinite(mkt)) {
+                const b = Math.max(...buys);
+                const p = (b - mkt) / mkt * 100;
+                html += '<div style="color:#26a69a">BUY ' + fmtPriceLabel(b) + ' ' + (p >= 0 ? '+' : '') + p.toFixed(1) + '%</div>';
+            }
+            panel.innerHTML = html;
+        }
+        // Range panel bottom-right: visible-window candle High (red) /
+        // Low (green) — sell-side red on top, buy-side green below, mirroring
+        // the top-right market badge. Volume max lives in its own badge on
+        // the volume chart below. Slightly smaller type than the top-right market badge.
+        // Pair-aware via currentCandles (already inverted in B/A view).
+        // Refreshed on rerender and on x zoom/pan through the setScale hooks.
+        function visibleCandleStats() {
+            if (!currentCandles.length) return null;
+            let minX = NaN;
+            let maxX = NaN;
+            if (priceChart) {
+                const xs = priceChart.scales.x || {};
+                if (Number.isFinite(xs.min)) minX = xs.min;
+                if (Number.isFinite(xs.max)) maxX = xs.max;
+            }
+            if (!Number.isFinite(minX)) minX = currentCandles[0].time;
+            if (!Number.isFinite(maxX)) maxX = currentCandles[currentCandles.length - 1].time;
+            const times = currentCandles.map((c) => c.time);
+            const start = Math.max(0, lowerBound(times, minX) - 1);
+            const end = Math.min(times.length, lowerBound(times, maxX) + 2);
+            let hi = -Infinity;
+            let lo = Infinity;
+            let vol = 0;
+            for (let i = start; i < end; i++) {
+                const c = currentCandles[i];
+                if (!c) continue;
+                if (Number.isFinite(c.high) && c.high > hi) hi = c.high;
+                if (Number.isFinite(c.low) && c.low < lo) lo = c.low;
+                const dv = getDisplayVolume(c);
+                if (Number.isFinite(dv) && dv > vol) vol = dv;
+            }
+            if (!Number.isFinite(hi) || !Number.isFinite(lo)) return null;
+            return { hi, lo, vol };
+        }
+        function renderRangePanel() {
+            if (!priceChart) return;
+            let panel = document.getElementById('range-panel');
+            if (!panel) {
+                panel = document.createElement('div');
+                panel.id = 'range-panel';
+                panel.style.cssText = 'position:absolute;z-index:26;bottom:10px;right:88px;pointer-events:none;font:600 12px ui-monospace,SFMono-Regular,Menlo,monospace;line-height:1.6;padding:6px 10px;border-radius:8px;background:rgba(13,17,23,0.85);border:1px solid #263241;white-space:nowrap;text-align:right;';
+                priceChart.root.appendChild(panel);
+            }
+            const stats = visibleCandleStats();
+            if (!stats) { panel.style.display = 'none'; return; }
+            panel.style.display = 'block';
+            panel.innerHTML = '<div style="color:#ef5350">H ' + fmtPriceLabel(stats.hi) + '</div>'
+                + '<div style="color:#26a69a">L ' + fmtPriceLabel(stats.lo) + '</div>';
+        }
+        // Volume badge top-right on the volume chart: max volume of the
+        // visible window only. Same small type as the range panel. Lives on
+        // the volume root, so hiding the volume chart hides the badge too.
+        function renderVolumePanel() {
+            if (!volumeChart) return;
+            let panel = document.getElementById('vol-panel');
+            if (!panel) {
+                panel = document.createElement('div');
+                panel.id = 'vol-panel';
+                panel.style.cssText = 'position:absolute;z-index:26;top:10px;right:88px;pointer-events:auto;font:600 12px ui-monospace,SFMono-Regular,Menlo,monospace;line-height:1.6;padding:6px 10px;border-radius:8px;background:rgba(13,17,23,0.85);border:1px solid #263241;white-space:nowrap;text-align:right;';
+                panel.addEventListener('click', () => toggleVolumeUnit());
+                volumeChart.root.appendChild(panel);
+            }
+            panel.style.cursor = payload.volumeIsCount ? 'default' : 'pointer';
+            panel.title = payload.volumeIsCount
+                ? 'Volume: feed publish count per bucket'
+                : 'Volume units — click to switch base/quote';
+            const stats = visibleCandleStats();
+            if (!stats) { panel.style.display = 'none'; return; }
+            panel.style.display = 'block';
+            panel.innerHTML = '<div style="color:#e8eef5">max ' + fmtVolumeWithSym(stats.vol) + '</div>';
+        }
+        function scheduleStatPanels() {
+            if (rangePanelRaf) return;
+            rangePanelRaf = requestAnimationFrame(() => {
+                rangePanelRaf = 0;
+                renderRangePanel();
+                renderVolumePanel();
+            });
+        }
+        // uPlot does not recompute an auto Y scale when X moves via
+        // setScale('x') — the scale range fns only run on init/data
+        // change. Refit Y to the visible window after every timeframe
+        // move so candles/volume follow the pan/zoom instead of getting
+        // stuck outside the view. A user-locked price range (axis
+        // wheel/drag → manualYRange) is respected; double-click the
+        // price axis to return to autofit. y-keyed setScale calls never
+        // schedule a refit, so this cannot loop with itself.
+        function yRangeDirty(u, vis) {
+            const s = u.scales.y || {};
+            if (!Number.isFinite(s.min) || !Number.isFinite(s.max)) return true;
+            const span = Math.max(1e-12, Math.abs(vis[1] - vis[0]));
+            return Math.abs(s.min - vis[0]) / span > 1e-9 || Math.abs(s.max - vis[1]) / span > 1e-9;
+        }
+        function scheduleYRefit() {
+            if (yRefitRaf) return;
+            yRefitRaf = requestAnimationFrame(() => {
+                yRefitRaf = 0;
+                if (priceChart && !manualYRange) {
+                    const vis = visiblePriceRange(priceChart);
+                    if (vis && yRangeDirty(priceChart, vis)) priceChart.setScale('y', { min: vis[0], max: vis[1] });
+                }
+                if (volumeChart) {
+                    const vvis = visibleVolumeRange(volumeChart);
+                    if (vvis && yRangeDirty(volumeChart, vvis)) volumeChart.setScale('y', { min: vvis[0], max: vvis[1] });
+                }
+            });
+        }
+        padXRight();
+        renderMarketPanel();
+        renderRangePanel();
+        renderVolumePanel();
+
         window.addEventListener('resize', () => {
             if (!charts.length) return;
             charts.forEach((chart) => {
                 const el = chart === priceChart ? priceEl : volumeEl;
+                if (el.clientWidth <= 0 || el.clientHeight <= 0) return;
                 chart.setSize({ width: el.clientWidth, height: el.clientHeight });
             });
         });
 
+        window.addEventListener('keydown', (e) => {
+            const tag = (document.activeElement && document.activeElement.tagName) || '';
+            if (tag === 'INPUT' || tag === 'TEXTAREA') return;
+            if ((e.ctrlKey || e.metaKey) && e.key === '0' && charts.length) {
+                const first = currentCandles[0]?.time;
+                const last = currentCandles[currentCandles.length - 1]?.time;
+                if (Number.isFinite(first) && Number.isFinite(last)) syncXRange(first, last);
+            }
+        });
+
         ${zoomResetScript()}
     })();
     </script>
@@ -2313,5 +3251,5 @@ function generateHTML(data: any, title: any = 'TradingView Style Research') {
 </html>`;
 }
 
-export { generateHTML, normalizeCandle, loadMarketProfiles }
+export { generateHTML, normalizeCandle, loadMarketProfiles, resolveChartStorageKey, sanitizeStorageComponent, TRADINGVIEW_PREFS_KEY_PREFIX, TRADINGVIEW_SYNC_KEY }