Integration

The same chart component renders on four different screens, and it presents differently on each because of one prop: the trading mode. Everything else — which overlays exist, how tall the toolbar is, whether a click can place an order — follows from that.

Trading modes

Order types offered per mode:

• binary — RISE_FALL, HIGHER_LOWER, TOUCH_NO_TOUCH, CALL_PUT, TURBO
• spot and futures — MARKET, LIMIT, STOP, STOP_LIMIT
• algo — MARKET, LIMIT, STOP_LIMIT

Layout follows the same split. Binary and the bot terminal own the whole viewport, so they get a 36px toolbar, a 40px drawing rail and indicator panels between 80 and 150px. Spot and futures share the screen with an order book and an order form, so they run compact: 32px toolbar, 36px rail, panels between 60 and 120px.

Props the host passes

The chart is mounted through a switcher component that also owns the TradingView fallback, so most screens never touch these directly. They are listed because they are the whole contract.

Callbacks for placing orders (onPlaceOrder, onPlaceSpotOrder) and for driving a bot (onBotControl, onBotRefresh) all delegate to the host. The chart never calls a trading endpoint itself.

<ChartSwitcher
  symbol={bot.symbol}
  timeFrame={timeFrame}
  marketType="eco"
  isAlgoContext
  algoState={state}
  showAlgoLayers
  onBotControl={control}
  onBotRefresh={refresh}
/>

The algorithmic cockpit

Algorithmic mode turns the chart from a place you trade from into a window onto a strategy that is already trading. It is supplied by GET /api/trading-bot/bot/{id}/chart-state, which returns the bot summary, its levels, its orders, its trades, its open position, the indicators it evaluates, and the current price.

Levels

Ten kinds of horizontal line, each named for what it means rather than which strategy produced it — two strategies that both place a stop draw the same thing:

GRID_BUY · GRID_SELL · BAND_UPPER · BAND_LOWER · AVG_ENTRY · TAKE_PROFIT · STOP_LOSS · TRAILING_STOP · PEAK · ENTRY_TRIGGER

Each carries one of four states, and each reads differently on the chart:

A rung backed by a live resting order carries a stem, so an intention is distinguishable from an instruction.

Keeping a dense ladder readable

A forty-rung grid would stack forty overlapping chips. Past 14 levels the chart stops labelling everything and labels only the band edges, the rungs actually holding inventory, and the six nearest the current price. Levels are capped at 240 and trade legs at 120, so a bot that has been running for a month cannot slow the chart down.

The operating band is captioned GRID RANGE, and becomes OUT OF RANGE — BOT IDLE when price leaves it. A bot that is running but has nothing to do says so.

The cockpit panel

A floating HUD, opened automatically the first time you enter the mode and reopenable from the Bot button in the toolbar. It reports status, paper or live, profit and loss, open position, win rate, trade count, traded volume, allocated, in-use and available capital, current drawdown, and the last engine error with how many times it has happened.

The number that justifies the panel is the heartbeat:

• "3s ago" while ticks arrive.
• "No ticks yet" before the first one.
• "Stalled · 4m ago" once a bot that claims to be running has gone 30 seconds without a tick.

A silently dead bot is the failure this exists to surface.

Controls

start · pause · resume · stop · close

close flattens every open position at market. It is not a lifecycle verb, and it is offered whenever a position exists — including on a stopped bot, because a stopped bot can still be holding inventory and flattening it by hand is the most common thing to want next.

Stop and Close ask twice. Both relabel to Confirm? on the first click and disarm themselves after 4 seconds, so a stray click cannot kill a bot or market-sell a position. No control can fire twice while the first call is still in flight.

Socket and poll

The bot terminal subscribes to the bot's own WebSocket channel and polls chart-state every 15 seconds. That is not redundancy for its own sake: the broadcast registry is per backend thread, so on a worker-thread deployment an engine event raised on one thread does not reach a socket held by another. The poll is what keeps the terminal correct there. Build any integration the same way — treat the socket as an accelerator, not the source of truth.

How the addon is resolved

Chart Engine is optional, and the resolution happens entirely at build time.

The consequence for operators is in Install: the frontend must be rebuilt after the files land, or nothing changes.

Which screen passes what

Algorithmic context is checked first when the mode is resolved. A bot terminal is also viewing an Ecosystem spot market, so testing for spot first would capture it and lose the cockpit.

Next

• Data sources — what each market type actually calls.
• Performance — the cost of the overlays this page enables.