On-chart Teardown 7 площадок → zerox-chart

1. BarrierLayer (WebGL2): single draw pass — horizontal price line as LINES primitive from x=epochToX(startEpoch) to x=chartRight, Y=priceToY(barrierPrice). Line width 1px, color uniform. 2. ShadeLayer (WebGL2 filled quad): screen-aligned rect from Y=priceToY(barrierPrice) to Y=top or Y=bottom of viewport, X=full width. Alpha blend 0.3 with shade color. Shader branch on shade_mode uniform (0=ABOVE: rect from barrier Y to viewport top; 1=BELOW: barrier Y to viewport bottom; 2=BETWEEN: between two barrier Ys). 3. StartLine: vertical dashed line — in WebGL2 implement as LINES with manual dash via fragment shader (gl_FragCoord.y mod dashLength < dashLen ? discard : keep) or as instanced short segments. 4. EntryDot: point sprite at (epochToX, priceToY) — radius 3px filled circle + pulsing outer ring driven by uniform blinkPhase = (Date.now() % 1200) / 1200. 5. Barrier Y animation: each tick, store previousY and targetY; in rAF loop lerp with t = min(elapsed/300, 1) using easeInOut curve t=t<0.5?2*t*t:(−2*t*t+4*t−1). Pass lerped Y as uniform to shader. 6. Barriers prop API: {high, low, shade:'ABOVE'|'BELOW'|'BETWEEN'|'OUTSIDE'|'NONE_SINGLE'|'NONE_DOUBLE', color, shadeColor, draggable, lineStyle:'solid'|'dashed'|'dotted', hideBarrierLine, hidePriceLines, isSingleBarrier, onChange}.

Same BarrierLayer as Up/Down but with isSingleBarrier=true (only high barrier rendered). Shade is ABOVE or BELOW depending on contract type. Draggable barrier: add pointer-events to the horizontal line DOM overlay (FastMarker-style) with mousedown→mousemove→mouseup drag handler, snapping price to tick grid. On drag-release fire onChange({high: newPrice}). Offscreen arrows: DOM absolute elements positioned at canvas top/bottom edge when barrier Y < 0 or > chartHeight.

1. AccumulatorCorridorLayer (WebGL2, new dedicated draw pass): draw two horizontal LINES (top barrier, bottom barrier) each spanning full chart width from barrierX to chartRight. Line color uniform (green=#4caf50 for profit, red=#f95454 for loss/crossed). 2. CorridorFillRect: screen-aligned quad (two triangles) from (barrierX, highBarrierY) to (chartRight, lowBarrierY), color=(barrier_color with alpha=0.08). Single draw call with blending enabled. 3. BarrierTriangles at barrierX: two small triangle primitives (upper pointing down: 4px base, 5px height; lower pointing up) rendered as TRIANGLES draw call in barrier color. 4. BarrierDistanceText: DOM overlay FastMarker positioned at (barrierX+30, lowBarrierY+10) and (barrierX+30, highBarrierY-10) with text '-N.NNNNN' / '+N.NNNNN' in barrier color. Update position every frame via registered painter callback. 5. BlinkingGlow at barrierX/midY: point sprite with time-varying radius=12*sin(t*PI), alpha=0.2 (WebGL2 point sprite with gl_PointSize driven by blinkRadius uniform, fragment discard outside circle). Animate with blinkPhase = (Date.now() % 2000) / 2000. 6. ProfitText DOM overlay: FastMarker-style div positioned between tickX and chart right edge, centered vertically in corridor. Font size 26px, color green/red. 7. Y-position lerp: each tick, store {prevHighY, prevLowY, targetHighY, targetLowY, startTime}. In rAF: t = easeInOut(min((now-startTime)/300, 1)). Pass lerped uniforms highBarrierY, lowBarrierY to shader. 8. EntrySpot: point sprite at (startEpochX, entryPriceY) + horizontal dashed line to current tickX. Dashed line: LINES with manual gl_FragCoord.x mod dash pattern. 9. ActiveMarkerGroup pill: on contract open, animate pill width 0→maxWidth over 250ms easeInOut using a CSS transform:scaleX(progress) on a DOM element (pill is DOM not canvas).

1. Render stop-out as a BarrierLayer with shade=NONE_SINGLE, draggable=false, color=orange (#f95454). Single horizontal LINES primitive at stopOutY spanning full chart width. 2. TP line: BarrierLayer, draggable=true with pointer-events on DOM overlay, shade=ABOVE, shadeColor=green at 0.08 alpha. 3. SL line: BarrierLayer, draggable=true, shade=BELOW, shadeColor=red at 0.08 alpha. 4. Each line has a DOM label (price badge) absolutely positioned at chart right edge minus 60px, vertically at lineY - 12px. 5. Blinking current-tick dot: point sprite at (lastBarX, lastCloseY). In fragment shader: if (distance(gl_PointCoord, vec2(0.5)) > 0.5) discard; for 3px solid dot. For glow ring: render second point sprite with larger gl_PointSize and distance-based alpha = 0.2 * sin(blinkPhase * PI). Use time uniform to drive blinkPhase = fract(time / 1.2). 6. Live PnL: DOM FastMarker div near current tick Y with green/red colored number, update on each WS tick.

BETWEEN mode: render filled quad between highBarrierY and lowBarrierY, full chart width, alpha=0.2. OUTSIDE mode: two quads — top (highBarrierY to viewport top) and bottom (lowBarrierY to viewport bottom) with alpha gradient (linear in fragment shader: for top quad alpha = 0 at highBarrierY, 0.3 at top edge; inverse for bottom). Use single vertex buffer with 4 verts per quad. Both modes: two horizontal LINES primitives for barrier lines. Constraint logic: highBarrier drag cannot go below lowBarrier — implement in drag handler with clamp.

DOM overlay widget (not WebGL): create a fixed-position panel div over the chart with 10 bar divs. Each bar = vertical rectangle div with height driven by digit frequency (%). CSS transition:height 0.8s ease-in-out already provides the animation for free. On each tick: extract last digit from tick.quote.toFixed(decimalPlaces).slice(-1), increment counter[digit], recalculate heights, update bar div style.height. Highlight current digit bar with border or color change. This is entirely DOM — no zerox-chart WebGL involvement needed. Mount as a React/DOM overlay child of the chart container div, z-index above the canvas.

Same BarrierLayer as Up/Down. Add VerticalBarrierLayer: single vertical LINES primitive at x=epochToX(expiryEpoch). Use dashed pattern (fragment shader mod). Label DOM overlay at (expiryX + 5, chartHeight - 30). Fill zone between entryEpochX and expiryEpochX: semi-transparent quad (alpha=0.05) from entryX to expiryX, top to bottom of chart. On contract settle: flip barrier color uniform to green/red over 1 frame.

1. RoundLayer (WebGL2): Add a dedicated overlay draw pass that renders two vertical dashed lines at priceStartTime and priceEndTime epochs — use epoch-to-X transform already in zerox-chart. Between those lines, fill a semi-transparent quad (green if price end > price start, red if opposite) via a simple RGBA uniform shader, updated post-FINISHED. 2. Countdown timer: Pure DOM SVG element positioned above WebGL canvas. Replicate the SVG circle timer (r=53px, strokeWidth=15, circumference=~380px): strokeDashoffset = (1 - elapsed/total) * circumference, CSS transition ease-linear 1s. Color states: green (>15s), yellow (10-15s, CSS transition-colors 1s), red (<10s), brand-purple (waiting/between rounds). 3. Direction buttons: Pure DOM below chart, outside GL surface. Disable when status != STARTED. 4. Waiting dots: 5 DOM divs with @keyframes scaleY bounce (0.7s linear infinite), staggered animationDelay 0/140/280/420/560ms. Replace timer with dots when status = CUTOFF_TRADE. 5. WS datafeed: Connect to wss://websocket.detrade.com/ws, subscribe /kline/{symbol}/500ms for line series data. Subscribe /contest/{symbol}/{period}/ticker for round state (currentTime, tradeCutoffTime, priceStartTime, priceEndTime, status). Map status transitions to zerox-chart events via postMessage/control-WS API. 6. Win toast: DOM toast component with CSS scaleX countdown bar.

1. ChartLayer: Same as Up/Down — connect 500ms kline WS to zerox-chart line series. 2. MultiplierGrid: DOM/SVG overlay (position:absolute, inset:0, pointer-events:none except on blocks) on right portion of chart (e.g. rightmost 25% of canvas width). Render N horizontal bands as DOM divs, each showing multiplier value. When price Y-coordinate (mapped via price-to-Y transform) falls within a band's range, add highlight class (CSS background: rgba(upColor, hitOpacity) transition). 3. Hit detection: in the datafeed tick handler, compare current price against each band's priceLevel threshold. On hit, increment hit counter, trigger CSS opacity animation (0.3s ease-out). 4. Block canvas overlay: If precise pixel-alignment needed, use a thin Canvas 2D overlay (position:absolute, same size as chart) just for the hit block rendering — drawRect + fillText at computed coordinates. 5. Mobile performance: throttle animation updates to 30fps via targetFps check: if (1000/60 * frameNumber < targetFps * elapsed) skip frame. 6. Settlement: Listen to /tapOrder/end via WS, trigger DOM toast on profit > 0.

Same as Up/Down zerox port. Additional: SpreadLayer — render two horizontal lines (bid/ask) as WebGL line primitives with colors --up and --down. Animate spread width as a thin WebGL quad between the two lines (alpha blended). Spread value DOM label with CSS steps(1,end) 0.5s toggle animation.

zerox-chart is a direct competitor to TV Advanced Charts for this use case. Port strategy: implement standard TV UDF datafeed interface (resolveSymbol, subscribeBars, getBars) on zerox-chart so it can consume the same detrade datafeed. Add OrderbookLayer as a DOM overlay (not on GL surface) — vertical depth chart with bid/ask bars. Add predict-series markers as instanced WebGL point sprites with ping animation (scale 1→2, opacity 0.75→0, 1.5s, cubic-bezier(0,0,.2,1)). Leverage selector, TP/SL lines: horizontal draggable price levels already designed in zerox-chart feat/trades-layer.

Connect /kline/STONKS-USD/500ms from wss://websocket.detrade.com/ws to zerox-chart price-line series. No WebGL changes needed. Add provably-fair modal as DOM overlay with seed verification form calling /api/coin/detrade/stonks/seed/prices.

1) EXPIRY_LINE: добавить AnnotationLayer (существующий WebGL2 layer) тип='vertical-line'. Входной параметр: expiry_epoch (unix timestamp). Координата X = epochToX(expiry_epoch) — уже есть трансформ в zerox-chart. Стиль: solid, цвет #FF4444, ширина 1px. Под линией: DOM overlay <span class='countdown'> positioned absolute поверх canvas через chartInstance.coordToPixel({time: expiry_epoch}) → CSS left/top. 2) PURCHASE_CUTOFF_LINE: тот же AnnotationLayer, тип='vertical-line', стиль dashed/dotted, цвет #FFFFFF, обновлять X каждый rAF frame через lerp от currentTime к cutoff_epoch — создаёт эффект ползущей линии. 3) ENTRY_PRICE_LINE: HorizontalPriceLevel (уже в zerox-chart как order-line) с параметрами: price=entry_price, color=green|red, style=dashed. 4) FILL_ZONE: новый FillZoneLayer — WebGL draw call: один quad (2 треугольника) от x=epochToX(entry_epoch) до x=epochToX(expiry_epoch), от y=0 до y=canvas_height, uniform vec4 color с alpha=0.08–0.12. 5) WIN/LOSE FLASH: при получении WS-события закрытия сделки — FillZone меняет color на win/lose цвет с uniform opacity animate 0.8→0 за 1000ms через rAF в шейдере. 6) SENTIMENT BAR: DOM компонент вне canvas, получает данные из WS tick stream (процент CALL/PUT из volume данных).

1) STRIKE_LINES_LAYER: новый WebGL2 draw pass — batch render N горизонтальных линий (line strip primitives). Каждая линия: {price: float, payout_call: float, payout_put: float, is_selected: bool}. Transform: priceToY(price) — уже есть. Batch: один draw call с N*2 vertices (instanced или packed в VBO). 2) PAYOUT_LABELS: DOM overlay array — for each strike, абсолютно позиционированный <div style='top: {priceToPixel(price)}px'> с текстом payout%. Обновляется при WS quote-generated событии. 3) STRIKE_SELECTION: при клике определить ближайшую strike-линию через pixelToPrice(clickY) + closest match. Обновить selected_strike_index uniform → шейдер меняет цвет этой линии. 4) DOM cursor interactivity: добавить mouse/touch handler на canvas для hit-test на strike Y-диапазоны (±10px от каждой линии). 5) INTEGRATION: StrikeLayer подписывается на тот же price→Y transform что и CandleLayer, поэтому автоматически следует за пан/зумом.

1) SL_TP_LINES: использовать существующий HorizontalPriceLevel тип в zerox-chart (trades-layer ветка feat/trades-layer). Параметры: {price, label, color, draggable:true}. Drag handler: mousedown на ±8px Y-зоне → lock drag → каждый mousemove вызывает setPrice(pixelToPrice(e.clientY)) + update input в DOM. 2) ENTRY_LINE: ещё одна HorizontalPriceLevel, не draggable, style=dashed, цвет neutral/blue. 3) PNL_LABEL: DOM абсолютно позиционированный div, привязан к Y=priceToPixel(current_price) или Y=priceToPixel(entry_price), обновляется при каждом WS tick событии через React state или прямой DOM textContent мутацией (для скорости). 4) STOP_OUT_PULSE: при distance(current_price, sl_price) / range < 0.15 — включить SL-линии shader uniform u_pulse=1, в шейдере: opacity = 0.6 + 0.4*sin(u_time * 3.14 / 0.6) (600ms пульс). 5) MULTIPLIER PANEL: DOM вне canvas, не требует изменений в zerox-chart engine.

DOM-компонент вне WebGL canvas. Реализовать как dock-виджет из zerox-widgets (существующая архитектура). Данные: вычислить из объёма BUY/SELL ордеров в WS-стриме или из отдельного WS endpoint если IQ Option предоставляет. Анимация: CSS transition height на двух div-секциях. Можно также реализовать как горизонтальный бар под чартом (alt layout).

zerox-chart уже поддерживает indicator overlay серии (из архитектуры движка). Для IQ Option порта: 1) Реализовать встроенные индикаторы как compute-passes: SMA, EMA, BB, RSI, MACD — вычислять на CPU из candle buffer, загружать как line series VBO. 2) Oscillators (RSI, MACD): добавить SubChart область (отдельный GL viewport с shared X-axis transform, отдельный Y-axis). 3) Цветовая схема: следовать IQ Option палитре (orange=MA, red=upper band, yellow=lower band) через CSS variables / theme system zerox-chart.

1. BinaryOverlayLayer (WebGL2 draw pass): on trade open, record {entryPrice, entryTime, expiryTime, direction}. Draw: (a) horizontal line at entryPrice using existing price-to-Y transform + line strip primitive, color rgba(0,200,100,0.9) for CALL / rgba(200,50,50,0.9) for PUT; (b) vertical dashed line at expiryTime using time-to-X transform, dashed via stipple uniform in line shader; (c) fill quad between [entryTime,expiryTime] x [minY,maxY] with rgba(0,200,100,0.08) / rgba(200,50,50,0.08) — single fullscreen-height quad clipped by time extent. 2. DOM overlay for trade panel: right-side panel with amount/expiry/payout% sits outside WebGL canvas, pure HTML. 3. Open deals panel: bottom DOM strip, P&L updates via WS tick event. 4. Deal result notification: CSS keyframe toast — slideInFromTop 300ms ease-out, hold 2s, fadeOut 300ms — appended to DOM above canvas. 5. Countdown: requestAnimationFrame loop updating a DOM text node (seconds remaining = expiryTime - Date.now()). No GL draw needed. 6. Data: Socket.IO adapter for zerox-chart datafeed: connect to wss://demo-api-eu.po.market, auth with SSID, receive updateStream, map [ts,o,c,h,l] to zerox OHLCV, call onBar().

Double Up is a trade-management DOM action, not a chart primitive. In zerox-chart: when user clicks Double Up button (DOM element in the deals panel), fire a WS order creation event to PO Socket.IO, then push a new {entryPrice: currentPrice, entryTime: now, expiryTime: originalExpiry, direction: same} into the BinaryOverlayLayer. A second horizontal entry line is drawn at the new price, sharing the same expiry vertical line. The Double Up button itself is a DOM element in the open deals panel positioned via CSS; opacity transition 0→1 is CSS, not GL. Show button only when deal is active and (expiryTime - now) > minimumThreshold (e.g. 10 seconds).

SocialOverlayLayer as a separate WebGL2 instanced draw pass for trade markers. On WS event (other_trade_opened): push instanced marker sprite {x: currentBar.x, y: priceToY(tradePrice), direction: call/put, timestamp: now} into a Float32Array buffer. Marker shape: triangle pointing up (CALL, green rgba(0,220,80,0.9)) or down (PUT, red rgba(220,50,50,0.9)) drawn as instanced triangles in GL. Appear animation: scale uniform starts at 2.0 and lerps to 1.0 over 600ms via rAF — 1 draw call, scale uniform per instance. 10-second window: DOM overlay div positioned at chartCoord(x,y) via getBoundingClientRect() transform, shows countdown text (JS setInterval 1s), has Copy button. After 10s: remove from buffer + remove DOM div. Market Sentiment: DOM element below canvas, CSS flex bar with green/red widths updated on each WS tick event. Social overlay is only activated when user has live account — implement as feature flag.

SignalMarkerLayer as WebGL2 instanced triangles (arrows). On signal event received from WS: push {barTime, price, direction, strength} to instance buffer. Draw as arrow-shaped sprite via instanced rendering — simple triangle + vertical stem geometry. Green rgba(0,210,90,1) for CALL below the candle low - 2px; red rgba(210,40,40,1) for PUT above candle high + 2px. Strength: draw 1-3 stacked arrows (offset Y by 12px each). Appear animation: scale uniform 1.2→1.0 over 300ms in rAF. The AI signal toggle is a DOM button in the right toolbar. Signal list panel: DOM sidebar, not on canvas.

zerox-chart already supports multi-chart grid (ChartGrid with N instances per zerox-widgets architecture). For PO port: expose a layout picker DOM control that sets CSS grid template on the chart container div, creating 1/2/4 zerox-chart iframe/canvas instances. Each instance connects to its own Socket.IO subscription. Active chart = border highlight (CSS outline or box-shadow). Trade panel binds to the activeChartIndex state.

zerox-chart already has indicator/overlay infrastructure (wlb-script IR for indicators per zerox-chart architecture). Map PO indicator set to zerox-chart custom series: (a) on-chart overlays: MAs, BB, Alligator, Fractals, Parabolic SAR, Ichimoku → drawn on the main OHLCV WebGL layer as line series / scatter series; (b) sub-pane indicators: RSI, MACD, Stochastic, CCI, ADX → separate pane below main chart (same GPU canvas, separate viewport scissor rect). Indicator picker: DOM panel, not GL. Calculation: run indicator math in JS on the OHLCV array from WS buffer, push series data to zerox-chart addSeries() API.

zerox-chart drawing tools layer: implement as pointer-events canvas overlay (SVG or Canvas2D overlay on top of WebGL). On tool select, capture pointerdown/pointermove/pointerup to build geometry. Render as SVG lines/paths (cleaner for editing) or Canvas2D. Store drawings as {type, points[], style} JSON, sync to localStorage for demo or to server for registered users. Fibonacci: compute ratio levels from two anchor points, draw as horizontal lines with text labels. This is independent of the WebGL render pipeline — uses a 2D canvas element with pointer-events:all stacked above the GL canvas.

Pure DOM widget below the chart canvas. Receive sentiment ratio from WS (social trade events or dedicated sentiment channel). Render as a CSS flexbox bar: two divs with transition: width 300ms ease. Percentage text updated via DOM. Does not touch the WebGL layer. In zerox-chart: expose as a dock widget (zerox-widgets architecture) that consumes the PO WS sentiment event stream.

AI signals are a superset of the regular Signals mechanic (same marker rendering path). Add an AI mode state flag. When AI mode is on: receive AI signal events from WS, automatically call trade placement API, and simultaneously push marker to SignalMarkerLayer with a distinct visual (e.g. glowing outline shader uniform: emit a pulse via time-uniform in fragment shader — sin(time * 6.0) * 0.5 + 0.5 for pulsing opacity). Trade auto-placement: DOM action (call Socket.IO deal-open event) triggered by AI signal event handler. No additional GL primitives needed beyond the existing SignalMarkerLayer.

1. ENTRY LINE: Add 'trade-annotation' layer in zerox-chart as a dedicated WebGL2 draw pass. Horizontal price line = gl.LINES primitive at priceToY(entryPrice), x spanning from entryTimestamp to expiryTimestamp. Color uniform: vec4(0,0.78,0.31,1.0) for UP, vec4(0.86,0.2,0.2,1.0) for DOWN. Fade-in: animate alpha uniform 0→1 over 150ms in rAF. 2. EXPIRY LINE: Same layer, vertical line at epochToX(expiryTime), drawn as gl.LINES y-full-height. Dash pattern: use a 1D texture mask or geometry alternating segments. Optional pulse: animate alpha uniform between 0.6 and 1.0 on a 1200ms sine cycle. 3. TRADE ZONE FILL: Screen-aligned quad (two triangles = 6 verts) from (entryX, chartTop) to (expiryX, chartBottom). Fragment shader: uniform vec4 fillColor = (0,0.78,0.31,0.12) or (0.86,0.2,0.2,0.12). Single draw call with blending enabled (gl.BLEND, gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA). 4. ENTRY DOT MARKER: Instanced point sprite at (entryX, entryPriceY), radius 6px, colored by direction. 5. OPEN DEALS PANEL: Pure DOM overlay (z-index above canvas), absolutely positioned right rail. Each row = React component with setInterval(1s) countdown. Slide-out animation on close: CSS transition height 0 + opacity 0, 200ms ease-in. Win/lose flash: CSS keyframe @keyframes deal-flash { 0%{background: rgba(color,0.4)} 100%{background:transparent} } duration 500ms. 6. PAYOUT LABEL: DOM element in left panel, reads from WS tick stream, direct text update. 7. BALANCE: DOM top bar, direct update on deal close WS event.

Identical to core mechanic zerox_port above. The only difference is the expiryTime value in the trade-annotation layer. The trade zone quad will be very narrow at 5s. Ensure zerox-chart's epochToX function has sub-second resolution for 5s zone to be >= 2px wide at standard zoom. Add expiry preset chip row as DOM element in the trade panel (5 chips: '5s','15s','30s','60s','5m') that sets the expiry value before clicking Up/Down.

DOM element in left trade panel. Subscribe to WS payout field in instruments/update event. On update: direct textContent swap. Optional: if payout changes by >2%, briefly flash the element background color (green 200ms or red 200ms via CSS transition) to signal the change. Estimated profit label = DOM span recomputed on payout change or amount change. No WebGL involvement — purely HTML/CSS layer.

zerox-chart already supports candlestick and line series. Add: (a) Bar series type (OHLC bars, same geometry as candles but T-bar shape — new primitive set in WebGL2 geometry shader or batched quads); (b) Heikin-Ashi computed series (HA_close = (O+H+L+C)/4, HA_open = (prev_HA_open + prev_HA_close)/2 — compute in JS datafeed adapter, feed as standard OHLCV). Toolbar: DOM element above canvas. Switching series type: call zerox-chart API method setSeriesType(type) which swaps the active series render program and triggers a full redraw. Chart type state preserved in URL hash or localStorage for session persistence.

zerox-chart WLB script engine supports 1546 indicators (per walbi-play-playground.md). Quotex's ~47 indicators are a strict subset. Map Quotex indicator IDs to WLB script indicator names. Render: overlay series (MA/BB/SAR/Ichimoku) = additional WebGL2 line strip draw calls in main price pane. Sub-pane indicators (RSI/MACD etc.) = separate GL viewport below main chart (new WebGL2 scissor rect region). Indicator settings modal = DOM/React component outside canvas. Crosshair legend = DOM overlay positioned at mouse X with chartCoord lookup.

zerox-chart has drawing tools per zerox-chart-ux-redo.md (CommandRegistry+surfaces+modes spec). Map Quotex drawing tool IDs to zerox-chart DrawingTool enum. Drawing preview: render in a dedicated 'interaction' canvas overlay (transparent Canvas2D on top of WebGL canvas, standard pattern). Completed drawings stored in DrawingLayer (WebGL2 line/poly primitives). Fibonacci: render horizontal price levels as gl.LINES with text labels in DOM overlay at correct Y positions. Selection handles: DOM absolutely positioned div squares at line endpoints, drag via PointerEvents. Persistence: use existing zerox-chart layout save/restore API (localStorage for demo, WS sync for logged-in).

1. SIGNAL MARKERS ON CHART: Implement as custom series in zerox-chart using instanced rendering. Arrow glyphs = textured quads (point sprites) with direction-specific texture (up=green arrow, down=red arrow). Anchor at (epochToX(bar.time), priceToY(bar.close+offset)). Scale animation on appear: animate gl_PointSize or sprite scale uniform from 0.5→1.0 over 200ms in rAF. 2. SIGNAL PANEL: DOM overlay panel (right or bottom rail), React/HTML list. Populated from signals WS channel or REST poll. 'Trade this signal' button = calls trade entry function with pre-filled direction. 3. REST/WS INTEGRATION: Signals likely served via dedicated REST endpoint (signals not in pyquotex WS protocol analysis — likely a separate HTTP API call). Implement as periodic fetch(signals_api_url, interval=15min) → update signal state → re-render markers.

Add TradeOverlayPlugin to zerox-chart: (1) EntryPriceLine — horizontal WebGL line primitive at y=priceToY(entry_price), rgba(0,255,136,1) for CALL or rgba(255,51,102,1) for PUT, drawn as gl.LINES in a dedicated overlay VAO; (2) ExpiryTimeLine — vertical WebGL line at x=epochToX(expire_at), rendered as gl.LINES with a CPU-driven dashed pattern (alternate alpha in fragment shader by fract(gl_FragCoord.y / dashLength)); (3) TradeZoneQuad — screen-aligned quad from entry_time to expiry_time, full chart height, alpha=0.08, drawn as gl.TRIANGLE_STRIP with additive blend; (4) ResultFlash — on close_deal_batch, update a uniform float u_flash_opacity in a full-canvas quad shader, animate from 0.5 to 0 over 800ms via rAF loop updating the uniform; (5) WinPopup — DOM overlay div positioned at canvas center, CSS transform scale(0.5→1.2→1.0) keyframe over 400ms, shows '+$XX.XX' text; (6) Live payout label — DOM element outside canvas, receives asset_trading_settings_changed_v2 from StockityAdapter and updates textContent.

Turbo mode in zerox-chart: (1) Switch candle series timeframe to 5s via datafeed adapter requesting time_step=5 in REST history call; (2) CountdownOverlay — DOM element absolutely positioned over top-right of canvas (z-index 10), shows MM:SS countdown driven by setInterval(1000) from expire_at epoch; last 3 seconds: add CSS class .urgent that applies @keyframes pulse-scale (transform scale 1.0→1.1 at 150ms ease-in-out); (3) On expire_at hit before WS confirm: pre-animate flash at 50% opacity, then confirm/correct on close_deal_batch arrival; (4) FormingCandle highlight: in the WebGL candle draw shader, detect the last (rightmost) bar and boost its border alpha by 0.3 via a bar_index uniform comparison.

Implement as a CSS-variable theme override for zerox-chart: --candle-up-fill: #00e676, --candle-up-border: rgba(0,230,118,0.8), --candle-down-fill: #ff3d5a, --candle-down-border: rgba(255,61,90,0.8), --bg-color: #0a0d14, --grid-color: rgba(255,255,255,0.06). For glow on current price line: draw a second wider line (lineWidth 4px) at rgba(255,255,255,0.15) behind the 1px solid line; animate its alpha via rAF uniform float u_glow_alpha = 0.15 + 0.35 * sin(2*PI*t/2.0). New candle pan: zerox-chart viewport pan system already handles x-translation; add a rAF lerp from (currentX - barWidth) to currentX over 300ms on each candle_open event from WS.

DOM element, not on WebGL canvas. Position as flex row below chart canvas (height 20px). Green segment: div with width: {call_pct}%, background: linear-gradient(90deg, #00e676, #00b050), transition: width 400ms ease-in-out. Red segment: div flex-grow:1, background: linear-gradient(90deg, #b03040, #ff3d5a), same transition. Labels: position:absolute left/right, font-size:11px. Data source: StockityAdapter emits 'opinion_update' event with {call_pct, put_pct} parsed from WS payload.

zerox-chart ChartGrid with 2 instances: const grid = new ChartGrid({ cols: 2, rows: 1 }); grid.addChart(chart1, { slot: 0 }); grid.addChart(chart2, { slot: 1 }). Each chart connects its own StockityAdapter with different RIC. Focus ring: add click handler on each chart canvas — on focus, set CSS outline: 2px solid var(--accent-call) with transition opacity 0.15s. Trade panel (DOM) listens to grid.onFocusChange event and re-renders with focused chart's asset data.

zerox-chart already supports series type switching via chart.setSeries(type). Add crossfade: maintain two series slots in the GL render pass — during transition, render both with alpha uniforms: u_alpha_old animates 1→0, u_alpha_new animates 0→1, both over 200ms in rAF loop updating WebGL uniform floats. After 200ms, remove old series draw call. Heikin-Ashi: compute HA OHLCV in datafeed adapter (HA_close=(O+H+L+C)/4, etc.) before feeding to chart — chart itself renders as standard candles.

1. TradeZoneLayer (new WebGL2 draw pass): render two horizontal lines (entry price) as line-strip primitives + fill quad (from entry_epoch to expiry_epoch, entry_price to current_price) using a rgba uniform. Alpha=0.12 for fill, 1.0 for lines. Encode direction as a uniform: call=green (#22c55e), put=red (#ef4444). Update expiry_x and current_price_y uniforms each rAF. 2. ExpiryLine (vertical): WebGL2 line-strip at expiry epoch X coordinate, dashed via discard-pattern in fragment shader (fract(gl_FragCoord.y / 8.0) > 0.5 -> discard). 3. CountdownBadge: DOM div absolutely positioned over WebGL canvas using chartCoords(expiry_epoch, max_price) -> screen px via existing epoch-to-x + price-to-y transforms. Update textContent each second via setTimeout. Red color when seconds < 10. 4. Profit/Loss popup: DOM div, CSS keyframe: @keyframes tradeResult { 0%{opacity:0;transform:translateY(8px)} 15%{opacity:1;transform:translateY(0)} 85%{opacity:1} 100%{opacity:0;transform:translateY(-4px)} }, animation-duration:1.6s, fill-mode:forwards. Trigger on close_deal_batch WS event. 5. EntryPrice line: horizontal WebGL2 line at entry price Y, solid, color by direction, 1px wide, full chart width.

Same as FTT TradeZoneLayer but expiry_epoch is entry_epoch+5. The trade zone quad will be very narrow (5 candles at 1s chart = 5px-wide strip). CountdownBadge more prominent: position top-center of chart, font-size 3rem. Add urgentFlash CSS animation trigger at seconds<=3. For Turbo mode, switch zerox-chart timeframe to '5s' (if supported) or '1m' with synthetic 5s ticks. The Phoenix WS delivers 5s candles natively.

DRTBandLayer: WebGL2 draw pass with two horizontal line-strip primitives (top_y and bottom_y) + filled quad between them. Uniforms: u_top_y (price+range normalized), u_bottom_y (price-range normalized), u_color (vec4 RGBA). On each candle_message: compute new top_y/bottom_y from current price + configured range. Lerp u_color toward target direction color over 18 frames (300ms at 60fps) using a per-frame color_lerp_t counter. In fragment shader: gl_FragColor = mix(u_color_from, u_color_to, u_lerp_t). Band fill: separate full-width quad draw call with alpha blending (glEnable(BLEND), glBlendFunc(SRC_ALPHA, ONE_MINUS_SRC_ALPHA)). Band lines: 1px line-strip calls with solid color. For win/loss flash: push u_color alpha to 0.5 for 12 frames (200ms) then lerp back.

zerox-chart already has indicator/study infrastructure from full terminal design. For Binomo port: 1. BB overlay: WebGL2 line-strip draw for each of 3 bands + filled quad for cloud (alpha 0.07). 2. Sub-pane for oscillators (RSI/MACD): zerox-chart multi-pane layout, second WebGL canvas below main. 3. Ichimoku kumo: same as BB cloud but two fills (green quad for A>B, red for A<B) as two draw calls. 4. Indicator selector panel: DOM component, slide-in via CSS transform, z-index above canvas. 5. All indicator math: pure JS, run on candle array from Phoenix WS history + live updates.

zerox-chart drawing infrastructure from UX redo spec (CommandRegistry + drawing modes). Port mapping: 1. DrawingLayer: Canvas2D overlay OR WebGL2 line primitives for drawn lines. Prefer canvas2d overlay for drawing tools (separate canvas element, z above WebGL) — simpler hit-testing, matches Binomo's own approach. 2. Toolbar: DOM vertical icon strip, left side. CSS: position:absolute; left:8px; top:50%; transform:translateY(-50%); z-index:10. Active state via CSS class .active { background: rgba(255,255,255,0.12) }. 3. Fibonacci: compute 7 levels, draw as horizontal dashed lines (canvas2d setLineDash([4,4])) + text labels using ctx.fillText. 4. Hit-testing: on mousemove, check distance from cursor to each drawn segment endpoint — if <8px, show handle enlarged state. 5. Right-click context: DOM context menu, position at cursor.

DOM widget, not on WebGL canvas. Implement as a flex div: <div class='opinion-bar'><div class='call-fill' style='width: {call_pct}%; transition: width 400ms ease-in-out'></div><div class='put-fill'></div></div>. Mount in DOM overlay z-layer. Feed from WS — subscribe to 'base' topic which delivers market sentiment events, or compute locally from observed trade directions. Position: below chart canvas, full width.

Tournament overlay is a DOM layer on top of zerox-chart WebGL canvas. Implementation: 1. TournamentTopBar: position:absolute; top:0; left:0; right:0; height:40px; background:rgba(0,0,0,0.8); z-index:20. Contains timer + rank + portfolio. 2. LeaderboardPanel: absolute right panel, slides in/out via CSS transform:translateX(100%/0). 3. Timer: same CountdownBadge component from FTT mechanic, reused. 4. Rank flash: CSS @keyframes rankFlash { 0%,100%{background:transparent} 30%{background:#eab308} } duration:400ms. 5. Row reorder: CSS transition:transform 300ms ease-in-out on each leaderboard-row div. Uses the existing postMessage/control-WS API from viewport PR to receive tournament state from parent app.

Signal markers: DOM div positioned over WebGL canvas via chartCoords(signal_epoch, signal_price) → screen px. Arrow icon (SVG up/down triangle, green/red). CSS @keyframes signalPulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.4);opacity:0.6} } animation-iteration-count:2, duration:600ms. Signals panel: absolute DOM panel, bottom of chart container, slides up via CSS transform. Signal data fetched from REST endpoint (not confirmed public — may be https://api.binomo.com/signal/v1/list or similar, not publicly documented). Fallback: use existing zerox-chart marker API to render signal arrows as custom series markers.

Pure DOM/CSS layer, no WebGL involvement: 1. Particle system: on win event, inject 30 divs into a DOM overlay (position:absolute over chart). Each div gets CSS animation @keyframes p{0%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(0.3);opacity:0}} with --dx and --dy randomized inline style (-80px to +80px). After 800ms, remove divs from DOM. 2. Achievement badge: DOM div, position:fixed top:16px right:16px. CSS @keyframes badgeSlide { 0%{transform:translateX(120%)} 6%{transform:translateX(0)} 88%{transform:translateX(0)} 100%{transform:translateX(120%)} } animation-duration:4.5s. 3. Both layers: z-index above WebGL canvas (z=30). No rAF loop needed — pure CSS handles the animation.