<!--
================================================================
ARBIVIEW DEVELOPMENT CONTRACT + TECHNICAL SPECIFICATION

ОБЯЗАТЕЛЬНО прочитать целиком перед ЛЮБОЙ правкой этого файла,
в любой сессии, любым исполнителем (включая Claude или другого
разработчика). Эти правила — часть проекта, а не разовая
договорённость в одном чате.
================================================================

ОБЩИЕ ПРАВИЛА
=============

Перед любой правкой:
1. Провести аудит текущей реализации.
2. Найти корень проблемы.
3. Определить источник данных.
4. Определить источник состояния.
5. Предложить план исправления.
6. Только после аудита вносить изменения.

Запрещено:
- Сразу переписывать код.
- Делать предположения без аудита.
- Исправлять симптомы вместо причины.
- Создавать новые реализации рядом со старыми.
- Оставлять мусорный код.

ГЛАВНОЕ АРХИТЕКТУРНОЕ ПРАВИЛО
=============================

MarketStore является единственным источником истины.

Pipeline:
WebSocket
→ Stream._normalize()
→ MarketStore.update()
→ MarketStore._rebuildIndexes()
→ MarketStore.flat[]
→ MarketStore.bySymbol{}
→ Render
→ Charts

Запрещено:
- Обходить MarketStore.
- Создавать дубликаты данных.
- Хранить собственные копии котировок в UI.
- Мутировать UI напрямую из WebSocket.
- Мутировать DOM напрямую из Stream.

СТРУКТУРА ПРОЕКТА
=================

App
├── Api
├── AuthApi
├── AuthStore
├── UserStore
├── QuoteStore (в текущей реализации — MarketStore)
├── HistoryStore
├── PairStore
├── InstrumentSpecStore
├── Engine
├── UI
│   ├── PriceChart
│   ├── SpreadChart
│   ├── QuotesPanel
│   ├── PairsTable
│   └── LogsPanel
└── Bootstrap

UI RULES
========

Без разрешения владельца проекта запрещено:
- Менять расположение элементов.
- Менять размеры элементов.
- Менять порядок панелей.
- Удалять существующие кнопки.
- Менять поведение существующих кнопок.
- Менять внешний вид интерфейса.

Любая UI правка требует отдельного согласования.

ГРАФИКИ
=======

Запрещено:
- Пересоздавать Lightweight Charts на каждом тике.
- Делать полный ререндер графиков.
- Вызывать fitContent() на каждом обновлении.
- Пересоздавать серии при изменении цены.

Использовать только: series.update().

Для любого нового графика внутри Flex Layout обязательно:
min-height:0 на всех промежуточных flex-контейнерах.

Причина: Canvas + Flex + min-height:auto может полностью скрывать график.

SPREAD CHART
============

SpreadChart строится только из данных PairStore.

Запрещено:
- Брать данные из DOM.
- Брать данные из таблицы.
- Использовать отображаемые значения UI как источник данных.

FAIR VALUE
==========

Источник экспирации: Server → /instrument → InstrumentSpecStore.
Fair Value рассчитывается только через InstrumentSpecStore.

Запрещено:
- Ручное хранение expiry.
- Ручной ввод даты экспирации.
- Дублирование expiry внутри PairStore.

АВТОРИЗАЦИЯ
===========

Текущая архитектура авторизации считается завершённой.

Pipeline:
AuthApi.createSession()
→ POST /auth/create-session
→ Supabase login_sessions
→ Telegram Bot
→ status=approved
→ AuthApi.getStatus()
→ AuthApi.getMe()
→ AuthStore
→ UserStore
→ UI

Использовать только:
POST /auth/create-session
GET  /auth/status/{token}
GET  /auth/me/{token}

Запрещено:
- Создавать новые auth endpoints.
- Менять структуру авторизации без аудита.
- Дублировать авторизацию во фронте.

INSTRUMENT SPECS
================

Источник данных: Server → /instrument → InstrumentSpecStore.
Источник правды: InstrumentSpecStore.

ПРАВИЛО ЧИСТОГО КОДА
====================

После исправления:
1. Удалить старую реализацию.
2. Удалить временные патчи.
3. Удалить отладочный код.
4. Удалить неиспользуемые функции.

Запрещено: oldFix(), newFix(), newFix2(), newFix3().
Должна существовать одна рабочая реализация.

ПОРЯДОК ВЫПОЛНЕНИЯ ЛЮБОЙ ЗАДАЧИ
===============================

1. Аудит.
2. Поиск корня проблемы.
3. План исправления.
4. Минимальный патч.
5. Удаление старой логики.
6. Проверка архитектуры.
7. Проверка регрессий.
8. Финальный отчёт.

ФОРМАТ ОТВЕТА РАЗРАБОТЧИКА
==========================

Перед изменениями: 1) что найдено, 2) корень проблемы, 3) план исправления.
После изменений: 1) что изменено, 2) что удалено, 3) какие риски,
4) что протестировать.

КРИТИЧЕСКОЕ ПРАВИЛО
===================

Если существует работающая архитектура, нельзя создавать новую
архитектуру рядом. Сначала использовать существующую систему.
Переписывание допускается только после доказанного аудита, что
текущая архитектура не может решить задачу.

================================================================
END OF CONTRACT
================================================================
-->
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Spread Terminal V164 Clean</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/lightweight-charts@4.1.3/dist/lightweight-charts.standalone.production.js" crossorigin="anonymous"></script>
<style>
*{box-sizing:border-box;margin:0;padding:0}
body{background:#0b0f17;color:#d7dce5;font-family:'Inter',system-ui,sans-serif;height:100vh;display:flex;flex-direction:column;overflow:hidden}
input,select,button{font-family:inherit}

.header{display:flex;justify-content:space-between;align-items:center;padding:8px 14px;background:rgba(10,15,25,.9);border-bottom:1px solid rgba(255,255,255,.07);flex-shrink:0}
.header-logo{font-size:13px;font-weight:600;color:#8aabff}
.status-dot{width:7px;height:7px;border-radius:50%;background:#374151;display:inline-block;margin-right:5px;transition:all .3s}
.status-dot.live{background:#22c55e;box-shadow:0 0 6px #22c55e}
#statusText{font-size:11px;color:#4b5a72}

.tabs{display:flex;gap:2px;padding:5px 10px;background:#080c14;border-bottom:1px solid rgba(255,255,255,.06);flex-shrink:0}
.tab{padding:5px 14px;border-radius:6px;cursor:pointer;font-size:12px;color:#6b7a99;user-select:none;transition:all .15s}
.tab:hover{color:#9fb0c8;background:rgba(255,255,255,.04)}
.tab.active{background:rgba(59,130,246,.15);color:#6ea8ff;font-weight:500}

.workspace{display:grid;grid-template-columns:1fr 270px;grid-template-rows:1fr;flex:1;overflow:hidden;min-height:0}
.main{overflow:hidden;display:flex;flex-direction:column;border-right:1px solid rgba(255,255,255,.06);min-height:0;height:100%}
#view{flex:1;overflow:hidden;display:flex;flex-direction:column}

/* ── RIGHT PANEL ── */
.side{display:flex;flex-direction:column;overflow:hidden;background:#090d16;min-height:0;height:100%}
.side-header{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.07);flex-shrink:0}
.side-title{font-size:11px;font-weight:600;letter-spacing:.5px;color:#6b7a99}
.side-icons{display:flex;gap:4px}
.ico{background:rgba(255,255,255,.05);border:none;color:#4b5a72;width:24px;height:24px;border-radius:5px;cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:center;position:relative}
.ico:hover{background:rgba(255,255,255,.1);color:#9fb0c8}
.ico.active{background:rgba(59,130,246,.2);color:#6ea8ff}

/* Quotes list */
.quotes-scroll{flex:1;overflow-y:auto}

/* Group */
.group-block{border-bottom:1px solid rgba(255,255,255,.05)}
.group-header{display:flex;align-items:center;gap:6px;padding:7px 10px;cursor:default;flex-shrink:0}
.group-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.dot-moex{background:#3b82f6}.dot-alfa{background:#6ea8ff}.dot-binance{background:#f59e0b}
.group-name{font-size:11px;font-weight:700;letter-spacing:.6px;color:#8aabff;flex:1}
.group-count{font-size:10px;color:#374151;margin-right:4px}
.group-btn{background:none;border:1px solid rgba(255,255,255,.08);color:#4b5a72;width:22px;height:22px;border-radius:4px;cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s}
.group-btn:hover{border-color:#3b82f6;color:#6ea8ff}

/* Search bar inside group */
.group-search{display:none;padding:5px 8px;border-bottom:1px solid rgba(255,255,255,.05)}
.group-search.open{display:block}
.group-search input{width:100%;background:#111827;border:1px solid rgba(59,130,246,.4);color:#d7dce5;padding:5px 8px;border-radius:5px;font-size:11px;outline:none}
.search-results{max-height:160px;overflow-y:auto;margin-top:4px}
.search-result{display:flex;justify-content:space-between;align-items:center;padding:4px 6px;cursor:pointer;border-radius:4px}
.search-result:hover{background:rgba(59,130,246,.1)}
.search-result-sym{font-size:11px;color:#c8d3e8}
.search-result-price{font-size:11px;font-family:'Courier New',monospace;color:#8aabff}
.search-add{background:none;border:none;color:#374151;cursor:pointer;font-size:14px;padding:0 2px}
.search-add:hover{color:#22c55e}
.search-empty{padding:6px;font-size:11px;color:#374151;text-align:center}

/* Empty group */
.group-empty{padding:14px 10px;text-align:center}
.group-empty-text{font-size:11px;color:#374151;line-height:1.5;margin-bottom:10px}
.btn-find{display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);color:#4b5a72;padding:5px 12px;border-radius:6px;cursor:pointer;font-size:11px;transition:all .15s}
.btn-find:hover{border-color:#3b82f6;color:#6ea8ff}

/* Quote rows */
.quote-row{display:flex;align-items:center;padding:5px 10px;cursor:pointer;gap:4px;transition:background .1s}
.quote-row:hover{background:rgba(59,130,246,.08)}
.quote-row.active{background:rgba(59,130,246,.12)}
.q-sym{font-size:12px;font-weight:500;color:#c8d3e8;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.q-chg{font-size:10px;width:46px;text-align:right;flex-shrink:0}
.q-price{font-size:12px;font-family:'Courier New',monospace;color:#8aabff;width:72px;text-align:right;flex-shrink:0;transition:color .15s,background-color .15s;border-radius:3px;padding:1px 3px}
.q-price.flash-up{color:#22c55e;background:rgba(34,197,94,.16)}
.q-price.flash-dn{color:#ef4444;background:rgba(239,68,68,.16)}
.q-del{background:none;border:none;color:transparent;cursor:pointer;font-size:12px;padding:0 1px;line-height:1;flex-shrink:0}
.quote-row:hover .q-del{color:#374151}
.q-del:hover{color:#ef4444!important}

/* Pairs panel (bottom of side) */
.pairs-side-title{padding:6px 10px;font-size:9px;font-weight:700;letter-spacing:.8px;color:#374151;border-bottom:1px solid rgba(255,255,255,.05)}
.pair-row{display:flex;align-items:center;padding:4px 10px;cursor:pointer;gap:5px}
.pair-row:hover{background:rgba(59,130,246,.07)}
.pair-row.active{background:rgba(59,130,246,.1)}
.p-sym{font-size:11px;color:#c8d3e8;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p-spread{font-size:11px;font-family:'Courier New',monospace;width:55px;text-align:right}
.p-del{background:none;border:none;color:transparent;cursor:pointer;font-size:12px;padding:0}
.pair-row:hover .p-del{color:#374151}
.p-del:hover{color:#ef4444!important}

/* Main views */
.view-header{padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.06);flex-shrink:0}
.view-title{font-size:16px;font-weight:600;color:#c8d3e8}
.view-sub{font-size:11px;color:#4b5a72;margin-top:3px;display:flex;gap:12px;align-items:center}
.chart-area{flex:1;padding:12px;position:relative}
.chart-area canvas{position:absolute;inset:12px}
.empty-view{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;color:#374151;font-size:13px;gap:8px;text-align:center;padding:20px}

/* Pairs tab */
.scanner-top{display:flex;align-items:center;gap:7px;padding:8px 12px;background:#090d16;border-bottom:1px solid rgba(255,255,255,.06);flex-shrink:0;flex-wrap:wrap}
.sel{background:#111827;border:1px solid rgba(255,255,255,.09);color:#d7dce5;padding:4px 8px;border-radius:6px;font-size:12px;cursor:pointer;min-width:130px}
.btn-add-pair{background:#1d4ed8;border:none;color:#fff;padding:5px 14px;border-radius:6px;cursor:pointer;font-size:12px;font-weight:500}
.btn-add-pair:hover{background:#2563eb}
.stats-bar{display:flex;gap:10px;padding:5px 12px;background:#080c12;border-bottom:1px solid rgba(255,255,255,.04);flex-shrink:0}
.stat{display:flex;flex-direction:column}
.stat-l{font-size:9px;color:#374151;letter-spacing:.5px;text-transform:uppercase}
.stat-v{font-size:13px;font-weight:600;color:#8aabff;font-family:'Courier New',monospace}
.tbl-wrap{overflow:auto;flex:1}
table.st{width:100%;border-collapse:collapse;font-size:11px}
table.st th{padding:5px 7px;text-align:left;color:#374151;font-size:10px;font-weight:600;letter-spacing:.4px;border-bottom:1px solid rgba(255,255,255,.06);position:sticky;top:0;background:#0b0f17;white-space:nowrap}
table.st td{padding:4px 7px;border-bottom:1px solid rgba(255,255,255,.03);white-space:nowrap}
table.st tr:hover td{background:rgba(59,130,246,.04)}
.null{color:#374151}.up{color:#22c55e}.dn{color:#ef4444}

/* ── ALERTS (FV% line-cross notifications) ──────────────────────────── */
.side-panel-view{flex:1;overflow-y:auto;min-height:0}
.alert-badge{position:absolute;top:-3px;right:-3px;min-width:13px;height:13px;border-radius:7px;background:#ef4444;color:#fff;font-size:9px;font-weight:700;display:none;align-items:center;justify-content:center;padding:0 3px;line-height:1;pointer-events:none}
.alert-row{display:flex;align-items:center;gap:6px;padding:6px 10px;font-size:11px;border-bottom:1px solid rgba(255,255,255,.04)}
.alert-pair{color:#c8d3e8;font-weight:500;flex-shrink:0}
.alert-level{color:#f59e0b;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.alert-row.triggered .alert-level{color:#9fb0c8}
.alert-del{background:none;border:none;color:transparent;cursor:pointer;font-size:12px;padding:0 1px;line-height:1;flex-shrink:0}
.alert-row:hover .alert-del{color:#374151}
.alert-del:hover{color:#ef4444!important}
#toastContainer{position:fixed;top:54px;right:14px;z-index:9999;display:flex;flex-direction:column;gap:6px;pointer-events:none}
.toast{background:#111827;border:1px solid rgba(245,158,11,.35);color:#d7dce5;font-size:12px;padding:8px 14px;border-radius:6px;box-shadow:0 4px 16px rgba(0,0,0,.4);transition:opacity .3s;max-width:320px}
.li{width:68px;background:#111827;border:1px solid rgba(255,255,255,.08);color:#d7dce5;padding:2px 4px;border-radius:4px;font-size:11px}
.li:focus{outline:none;border-color:#3b82f6}
.di{background:#111827;border:1px solid rgba(255,255,255,.08);color:#d7dce5;padding:2px 4px;border-radius:4px;font-size:11px;width:106px}
.mode{font-size:10px;padding:2px 6px;border-radius:4px;font-weight:500}
.mode-up{background:rgba(34,197,94,.1);color:#22c55e}
.mode-dn{background:rgba(239,68,68,.1);color:#ef4444}
.mode-n{background:rgba(107,122,153,.1);color:#6b7a99}
.btn-c{background:rgba(59,130,246,.12);border:none;color:#6ea8ff;padding:3px 8px;border-radius:4px;cursor:pointer;font-size:11px}
.btn-c:hover{background:rgba(59,130,246,.25)}
.btn-x{background:none;border:none;color:#374151;cursor:pointer;font-size:13px;padding:0 2px;line-height:1}
.btn-x:hover{color:#ef4444}
.st-empty{text-align:center;padding:24px;color:#374151;font-size:12px}

/* Logs */
.logs-wrap{flex:1;overflow-y:auto;padding:8px 12px;font-family:'Courier New',monospace;font-size:11px;line-height:1.65}
.log-r{border-bottom:1px solid rgba(255,255,255,.03);padding:1px 0}
.log-ts{color:#374151;margin-right:6px}
.log-info{color:#6ea8ff}.log-warn{color:#f59e0b}.log-error{color:#ef4444}

/* Colors */
.up{color:#22c55e}.dn{color:#ef4444}

/* ── Modal ── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:1000;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(3px)}
.modal-overlay.hidden{display:none}
.modal{background:#111827;border:1px solid rgba(255,255,255,.1);border-radius:14px;width:480px;max-width:90vw;max-height:78vh;display:flex;flex-direction:column;box-shadow:0 24px 60px rgba(0,0,0,.7)}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid rgba(255,255,255,.07)}
.modal-title{font-size:14px;font-weight:600;color:#c8d3e8}
.modal-close{background:none;border:none;color:#4b5a72;font-size:20px;cursor:pointer;line-height:1;padding:0}
.modal-close:hover{color:#d7dce5}
.modal-search-wrap{padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.06);flex-shrink:0}
.modal-search{width:100%;background:#1f2937;border:1px solid rgba(59,130,246,.4);color:#d7dce5;padding:9px 12px;border-radius:8px;font-size:13px;outline:none}
.modal-search:focus{border-color:#6ea8ff}
.modal-list{flex:1;overflow-y:auto;padding:6px 8px}
.modal-item{display:flex;align-items:center;padding:8px 10px;border-radius:7px;cursor:pointer;gap:10px;transition:background .1s}
.modal-item:hover{background:rgba(59,130,246,.1)}
.modal-item.selected{background:rgba(59,130,246,.18);outline:1px solid rgba(59,130,246,.4)}
.mi-sym{font-size:13px;font-weight:600;color:#c8d3e8;flex:1}
.mi-src{font-size:10px;color:#374151;width:52px;text-align:right}
.mi-price{font-size:12px;font-family:'Courier New',monospace;color:#8aabff;width:80px;text-align:right}
.mi-chg{font-size:11px;width:50px;text-align:right}
.modal-empty{text-align:center;padding:32px;color:#374151;font-size:13px}
.modal-footer{padding:12px 16px;border-top:1px solid rgba(255,255,255,.07);display:flex;justify-content:space-between;align-items:center;gap:8px;flex-shrink:0}
.modal-selected-label{font-size:11px;color:#4b5a72;flex:1}
.btn-cancel{background:rgba(255,255,255,.06);border:none;color:#6b7a99;padding:8px 18px;border-radius:7px;cursor:pointer;font-size:13px}
.btn-cancel:hover{background:rgba(255,255,255,.1);color:#c8d3e8}
.btn-confirm{background:#2563eb;border:none;color:#fff;padding:8px 22px;border-radius:7px;cursor:pointer;font-size:13px;font-weight:500}
.btn-confirm:hover{background:#3b82f6}
.btn-confirm:disabled{background:#1e3a5f;color:#374151;cursor:default}


/* ── Pro Chart ── */
.chart-container{flex:1;display:flex;flex-direction:column;overflow:hidden;background:#0b0f17;position:relative}
.chart-toolbar{display:flex;align-items:center;gap:6px;padding:6px 12px;background:#090d16;border-bottom:1px solid rgba(255,255,255,.06);flex-shrink:0;flex-wrap:wrap}
.tf-btn{padding:3px 9px;border-radius:5px;border:1px solid transparent;font-size:11px;font-weight:600;cursor:pointer;color:#4b5a72;background:none;transition:all .15s;letter-spacing:.3px}
.tf-btn:hover{color:#9fb0c8;background:rgba(255,255,255,.05)}
.tf-btn.active{background:rgba(59,130,246,.18);color:#6ea8ff;border-color:rgba(59,130,246,.3)}
.chart-sep{width:1px;height:18px;background:rgba(255,255,255,.07);margin:0 2px;flex-shrink:0}
.chart-type-btn{padding:3px 9px;border-radius:5px;border:1px solid transparent;font-size:11px;cursor:pointer;color:#4b5a72;background:none;display:flex;align-items:center;gap:4px;transition:all .15s}
.chart-type-btn:hover{color:#9fb0c8;background:rgba(255,255,255,.05)}
.chart-type-btn.active{background:rgba(59,130,246,.18);color:#6ea8ff;border-color:rgba(59,130,246,.3)}
.chart-action-btn{padding:3px 8px;border-radius:5px;border:1px solid rgba(255,255,255,.07);font-size:11px;cursor:pointer;color:#4b5a72;background:none;transition:all .15s}
.chart-action-btn:hover{color:#9fb0c8;border-color:rgba(255,255,255,.15)}
.chart-info{display:flex;align-items:center;gap:14px;flex:1;font-size:11px;font-family:'Courier New',monospace}
.ci-ohlc{display:flex;gap:8px;color:#4b5a72}
.ci-ohlc span{color:#9fb0c8}
.ci-o{color:#9fb0c8!important}.ci-h{color:#22c55e!important}.ci-l{color:#ef4444!important}.ci-c{color:#8aabff!important}
.ci-chg{font-weight:600}
#lwChart{width:100%;flex:1}
.chart-loading{position:absolute;inset:40px 0 0;display:flex;align-items:center;justify-content:center;color:#374151;font-size:12px;pointer-events:none}


/* Pair slot selector */
.slot-label{font-size:9px;font-weight:700;letter-spacing:.7px;color:#374151;margin-bottom:5px;text-transform:uppercase}
.src-btn-group{display:flex;gap:3px}
.src-btn{padding:3px 9px;border-radius:5px;border:1px solid rgba(255,255,255,.07);font-size:11px;font-weight:600;cursor:pointer;color:#4b5a72;background:none;transition:all .15s;letter-spacing:.3px}
.src-btn:hover{color:#9fb0c8;background:rgba(255,255,255,.05)}
.src-btn.active{background:rgba(59,130,246,.15);color:#6ea8ff;border-color:rgba(59,130,246,.3)}

</style>
</head>
<body>

<div class="header">
  <div class="header-logo">Spread Terminal <span style="color:#374151;font-weight:400">V169 Audit</span></div>
  <div style="display:flex;align-items:center;gap:10px"><button id="loginBtn" style="background:#2563eb;border:none;color:white;padding:6px 12px;border-radius:6px;cursor:pointer">Login</button><span class="status-dot" id="sDot"></span>
    <span id="statusText">Подключение...</span>
  </div>
</div>

<div class="tabs">
  <div class="tab active" id="tab-price"  onclick="UI.show('price')">График цены</div>
  <div class="tab"        id="tab-pairs"  onclick="UI.show('pairs')">Связки</div>
  <div class="tab"        id="tab-spread" onclick="UI.show('spread')">График спреда</div>
  <div class="tab"        id="tab-logs"   onclick="UI.show('logs')">🪲 Логи</div>
</div>

<div class="workspace">

  <!-- MAIN -->
  <div class="main">
    <div id="view"></div>
  </div>

  <!-- RIGHT PANEL -->
  <div class="side">
    <div class="side-header">
      <span class="side-title" id="sideTitle">список котировок</span>
      <div class="side-icons">
        <button class="ico" id="icoQuotes" title="Список котировок" onclick="UI.setSidePanel('quotes')">☰</button>
        <button class="ico" id="icoPairs"  title="Спред пары"       onclick="UI.setSidePanel('pairs')">⊞</button>
        <button class="ico" id="icoAlerts" title="Алерты"           onclick="UI.setSidePanel('alerts')">🔔<span id="alertBadge" class="alert-badge"></span></button>
        <button class="ico" title="Закрыть">✕</button>
      </div>
    </div>

    <!-- Groups: MOEX / ALFA / BINANCE -->
    <div class="quotes-scroll side-panel-view" id="quotesScroll"></div>

    <!-- Pairs panel -->
    <div class="side-panel-view" id="pairsSide" style="display:none">
      <div class="pairs-side-title">спред пары</div>
      <div id="pairsPanel"></div>
    </div>

    <!-- Alerts panel -->
    <div class="side-panel-view" id="alertsSide" style="display:none">
      <div class="pairs-side-title">активные алерты</div>
      <div id="alertsActiveList"></div>
      <div class="pairs-side-title">сработавшие</div>
      <div id="alertsTriggeredList"></div>
    </div>

  </div>

</div>

<div id="toastContainer"></div>

<script>
'use strict';


// ===== V175 DIAGNOSTICS LAYER — isolated, observe-only =====
// DiagnosticsStore NEVER mutates terminal state and never changes control
// flow. It only collects structured events and mirrors them into the
// existing "Логи" tab through the existing Logger. Internal ring buffer is
// capped at 2000 entries (oldest auto-evicted). Categories:
// ALL, BOOT, WS, HISTORY, RESOLVER, LWCHART, PAIR, SPREAD, ERROR.
const DiagnosticsStore = (function(){
  const MAX_BUFFER = 2000;
  const buffer = [];
  // Per-animation-frame batching: many diagnostic events can fire within
  // the same tick (e.g. on every WS quote). Instead of calling Logger /
  // Render.logs() once per event (which could flood the DOM and degrade
  // terminal performance), we batch same-severity lines and flush at most
  // once per animation frame — this never touches Logger's own logic,
  // it just controls how often DiagnosticsStore calls into it.
  const frameLines = { info: [], warn: [], error: [] };
  let frameScheduled = false;

  function levelFor(category, event){
    if (category === 'ERROR') return 'error';
    if (/error/i.test(String(event))) return 'error';
    if (event === 'disconnected' || event === 'reconnect scheduled' || event === 'empty result') return 'warn';
    return 'info';
  }

  function fmtDetails(d){
    if (!d) return '';
    if (typeof d === 'string') return d;
    const keys = ['sym','src','tf','id','symA','symB','count','val','spreadPct','message','error','filename','lineno','colno'];
    const parts = [];
    for (const k of keys){
      if (d[k] !== undefined && d[k] !== null) parts.push(k+'='+d[k]);
    }
    let s = parts.join(' ');
    if (d.stack) s += '\n'+d.stack;
    return s;
  }

  function flush(){
    frameScheduled = false;
    let loggerReady = false;
    try{ loggerReady = (typeof Logger !== 'undefined') && !!Logger && !!Logger.info; }catch(e){ loggerReady = false; }
    if (!loggerReady){
      // Logger module not initialized yet (very early boot) — keep the
      // batched lines queued and retry on the next frame.
      scheduleFlush();
      return;
    }
    if (frameLines.info.length){
      try{ Logger.info(frameLines.info.join(' \n ')); }catch(e){}
      frameLines.info = [];
    }
    if (frameLines.warn.length){
      try{ Logger.warn(frameLines.warn.join(' \n ')); }catch(e){}
      frameLines.warn = [];
    }
    if (frameLines.error.length){
      try{ Logger.error(frameLines.error.join(' \n ')); }catch(e){}
      frameLines.error = [];
    }
  }

  function scheduleFlush(){
    if (frameScheduled) return;
    frameScheduled = true;
    if (typeof requestAnimationFrame === 'function') requestAnimationFrame(flush);
    else setTimeout(flush, 16);
  }

  return {
    CATEGORIES: ['ALL','BOOT','WS','HISTORY','RESOLVER','LWCHART','PAIR','SPREAD','ERROR'],

    log(category, event, details){
      try{
        const entry = { ts: Date.now(), category: String(category||'ALL'), event: String(event||''), details: details || null };
        buffer.push(entry);
        if (buffer.length > MAX_BUFFER) buffer.shift();

        const level = levelFor(entry.category, entry.event);
        const extra = fmtDetails(details);
        const text = '['+entry.category+'] '+entry.event+(extra ? (' '+extra) : '');
        frameLines[level].push(text);
        scheduleFlush();
      }catch(e){ /* diagnostics must never throw into the terminal */ }
    },

    getAll(){ return buffer.slice(); },
    getByCategory(cat){ return (!cat || cat==='ALL') ? buffer.slice() : buffer.filter(e=>e.category===cat); },
    clear(){ buffer.length = 0; },
    stats(){ return { total: buffer.length, max: MAX_BUFFER }; }
  };
})();
window.DiagnosticsStore = DiagnosticsStore;

window.addEventListener('error', function(e){
  DiagnosticsStore.log('ERROR', 'window.onerror', {
    message: (e && (e.message || (e.error && e.error.message))) || 'unknown error',
    filename: (e && e.filename) || null,
    lineno: (e && e.lineno != null) ? e.lineno : null,
    colno: (e && e.colno != null) ? e.colno : null,
    stack: (e && e.error && e.error.stack) || null
  });
});

window.addEventListener('unhandledrejection', function(e){
  const reason = e && e.reason;
  DiagnosticsStore.log('ERROR', 'unhandled promise rejection', {
    message: (reason && reason.message) || String(reason),
    stack: (reason && reason.stack) || null
  });
});

DiagnosticsStore.log('BOOT', 'app started');

const CONFIG = {

  API_BASE:'https://api.arbiview.pro',
  WS_URL:'wss://api.arbiview.pro/ws'
};

// ===== Stage 9 HistoryStore =====


// ===== FIX: RAF BATCH LAYER (anti flicker) =====
const __tickQueue = [];
let __raf = null;

function __pushTick(fn){
  __tickQueue.push(fn);
  if(!__raf){
    __raf = requestAnimationFrame(()=>{
      __raf = null;
      const q = __tickQueue.splice(0, __tickQueue.length);
      for(const f of q) f();
    });
  }
}


//////////////////////////////////////////////////////
// 1. STATE
//////////////////////////////////////////////////////

const GROUPS_DEF = [
  { id: 'MOEX',    label: 'MOEX',    dotCls: 'dot-moex',    srcMatch: s => s==='MOEX'||s==='MOEX-FUT'||s==='MOEX-STK' },
  { id: 'ALFA',    label: 'ALFA',    dotCls: 'dot-alfa',    srcMatch: s => s==='ALFA'||s==='FOREX' },
  { id: 'BINANCE', label: 'BINANCE', dotCls: 'dot-binance', srcMatch: s => s==='BINANCE' },
];

const State = {
  activeTab:    'price',
  activeSym:    null,   // {symbol, source} currently selected for price chart
  activePair:   null,
  sidePanelView: 'quotes', // 'quotes' | 'pairs' | 'alerts' — какой из трёх видов боковой панели сейчас показан
  searchOpen:   {},     // groupId → bool
  searchQuery:  {},     // groupId → string
  // User's curated watchlist per group
  watchlist:    { MOEX: [], ALFA: [], BINANCE: [] },
  pairSel:      { aGroup:'', bGroup:'' },
  logs:         [],
};


//////////////////////////////////////////////////////
// AUTH API — единственное место работы с авторизацией
//////////////////////////////////////////////////////
// Использует ТОЛЬКО три существующих эндпоинта, ничего нового на backend
// не добавляется и не меняется. AuthModal (и вообще никакая другая часть
// UI) не делает fetch напрямую — только через эти три метода.
const AuthApi = {
  BASE: 'https://api.arbiview.pro',

  async createSession() {
    const res = await fetch(this.BASE + '/auth/create-session', { method: 'POST' });
    return res.json();
  },

  async getStatus(token) {
    const res = await fetch(this.BASE + '/auth/status/' + encodeURIComponent(token));
    return res.json();
  },

  async getMe(token) {
    const res = await fetch(this.BASE + '/auth/me/' + encodeURIComponent(token));
    return res.json();
  },
};

const AuthStore = {
  token:null,

  load(){
    try{ this.token = localStorage.getItem('authToken'); }catch(e){}
  },

  setToken(v){
    this.token = v;
    try{
      if(v) localStorage.setItem('authToken', v);
      else localStorage.removeItem('authToken');
    }catch(e){}
  },

  getToken(){
    return this.token;
  },

  isAuthenticated(){
    return !!this.token;
  },

  logout(){
    this.setToken(null);
    UserStore.clear();
  }
};

const UserStore = {
  user:null,

  load(){
    try{
      const raw = localStorage.getItem('userProfile');
      this.user = raw ? JSON.parse(raw) : null;
    }catch(e){ this.user = null; }
  },

  setUser(v){
    this.user = v;
    try{ localStorage.setItem('userProfile', JSON.stringify(v)); }catch(e){}
  },

  getUser(){
    return this.user;
  },

  clear(){
    this.user = null;
    try{ localStorage.removeItem('userProfile'); }catch(e){}
  }
};


const UIStore = {
  searchOpen:{},
  searchQuery:{},

  syncFromState(){
    this.searchOpen = State.searchOpen || {};
    this.searchQuery = State.searchQuery || {};
  },

  setSearchOpen(gid,val){
    this.searchOpen[gid] = val;
    State.searchOpen[gid] = val;
  },

  setSearchQuery(gid,val){
    this.searchQuery[gid] = val;
    State.searchQuery[gid] = val;
  }
};

const WorkspaceStore = {
  _subs:[],
  subscribe(fn){ this._subs.push(fn); return ()=>this._subs=this._subs.filter(x=>x!==fn); },
  _emit(){ for(const fn of this._subs){ try{fn(this);}catch(e){} } },

  activeSym:null,
  activePair:null,
  watchlist:null,
  pairSel:null,

  syncFromState(){
    this.activeSym = State.activeSym;
    this.activePair = State.activePair;
    this.watchlist = State.watchlist;
    this.pairSel = State.pairSel;
  },

  
  setActiveSym(v){
    this.activeSym = v;
    State.activeSym = v;
    this._emit();
  },

  setActivePair(v){
    this.activePair = v;
    State.activePair = v;
    this._emit();
  },

  setWatchlist(v){
    this.watchlist = v;
    State.watchlist = v;
    this._emit();
  },

  setPairSel(v){
    this.pairSel = v;
    State.pairSel = v;
    this._emit();
  },

  addWatchlistItem(gid,item){
    const wl = {...(State.watchlist||{})};
    wl[gid] = [...(wl[gid]||[])];
    wl[gid].push(item);
    this.setWatchlist(wl);
  },

  removeWatchlistItem(gid,sym,src){
    const wl = {...(State.watchlist||{})};
    wl[gid] = (wl[gid]||[]).filter(x => !(x.sym===sym && x.src===src));
    this.setWatchlist(wl);
  },

  setPairGroup(slot,gid){
    const ps = {...(State.pairSel||{})};
    ps[slot+'Group'] = gid;
    this.setPairSel(ps);
  },

  stats(){
    return {
      watchlistGroups:Object.keys(this.watchlist||{}).length,
      activeSymbol:this.activeSym?.symbol||null,
      activePair:this.activePair?.id||null
    };
  }
};


//////////////////////////////////////////////////////
// INSTRUMENT REGISTRY  (static, independent of WS)
//////////////////////////////////////////////////////

const InstrumentRegistry = [
  // MOEX Futures
  {symbol:'SRM6',  source:'MOEX'},{symbol:'SIU6',  source:'MOEX'},
  {symbol:'GZM6',  source:'MOEX'},{symbol:'GZU6',  source:'MOEX'},
  {symbol:'EDM6',  source:'MOEX'},{symbol:'EDU6',  source:'MOEX'},
  {symbol:'EuM6',  source:'MOEX'},{symbol:'EuU6',  source:'MOEX'},
  {symbol:'BRM6',  source:'MOEX'},{symbol:'BRU6',  source:'MOEX'},
  {symbol:'YDM6',  source:'MOEX'},{symbol:'YDU6',  source:'MOEX'},
  {symbol:'EUM6',  source:'MOEX'},{symbol:'EUU6',  source:'MOEX'},
  {symbol:'CRM6',  source:'MOEX'},{symbol:'CRU6',  source:'MOEX'},
  {symbol:'MXM6',  source:'MOEX'},{symbol:'MXU6',  source:'MOEX'},
  {symbol:'RIM6',  source:'MOEX'},{symbol:'RIU6',  source:'MOEX'},
  {symbol:'VBM6',  source:'MOEX'},{symbol:'VBU6',  source:'MOEX'},
  {symbol:'GDM6',  source:'MOEX'},{symbol:'GDU6',  source:'MOEX'},
  {symbol:'SFM6',  source:'MOEX'},{symbol:'SFU6',  source:'MOEX'},
  {symbol:'ALM6',  source:'MOEX'},{symbol:'ALU6',  source:'MOEX'},
  // MOEX Stocks
  {symbol:'SBER',  source:'MOEX'},{symbol:'GAZP',  source:'MOEX'},
  {symbol:'YDEX',  source:'MOEX'},{symbol:'VTBR',  source:'MOEX'},
  {symbol:'LKOH',  source:'MOEX'},{symbol:'NVTK',  source:'MOEX'},
  {symbol:'ROSN',  source:'MOEX'},{symbol:'SNGS',  source:'MOEX'},
  {symbol:'MGNT',  source:'MOEX'},{symbol:'TATN',  source:'MOEX'},
  {symbol:'ALRS',  source:'MOEX'},{symbol:'GMKN',  source:'MOEX'},
  {symbol:'PLZL',  source:'MOEX'},{symbol:'PHOR',  source:'MOEX'},
  // ALFA (Forex/Spot)
  {symbol:'EURRUB',    source:'ALFA'},{symbol:'USDRUB',    source:'ALFA'},
  {symbol:'CNYRUB',    source:'ALFA'},{symbol:'GBPRUB',    source:'ALFA'},
  {symbol:'EURUSD',    source:'ALFA'},{symbol:'GBPUSD',    source:'ALFA'},
  {symbol:'USDJPY',    source:'ALFA'},{symbol:'XAUUSD',    source:'ALFA'},
  {symbol:'XAGUSD',    source:'ALFA'},
  {symbol:'EURRUBrfd', source:'ALFA'},{symbol:'USDRUBrfd', source:'ALFA'},
  {symbol:'EURUSDrfd', source:'ALFA'},{symbol:'CNYRUBrfd', source:'ALFA'},
  {symbol:'XAGUSDrfd', source:'ALFA'},{symbol:'XAUUSDrfd', source:'ALFA'},
  {symbol:'#YDEX',     source:'ALFA'},{symbol:'YDEX',      source:'ALFA'},
  {symbol:'EURRUBF',   source:'ALFA'},{symbol:'EURRUBRFD', source:'ALFA'},
  {symbol:'EURUSDRFD', source:'ALFA'},
  // BINANCE Perpetuals
  {symbol:'BTCUSDT',  source:'BINANCE'},{symbol:'ETHUSDT',  source:'BINANCE'},
  {symbol:'SOLUSDT',  source:'BINANCE'},{symbol:'BNBUSDT',  source:'BINANCE'},
  {symbol:'XAUUSDT',  source:'BINANCE'},{symbol:'XAGUSDT',  source:'BINANCE'},
  {symbol:'DOGEUSDT', source:'BINANCE'},{symbol:'LINKUSDT', source:'BINANCE'},
  {symbol:'AVAXUSDT', source:'BINANCE'},{symbol:'AAVEUSDT', source:'BINANCE'},
  {symbol:'WLDUSDT',  source:'BINANCE'},
];

// Tick buffer: "SYM|SRC" → [{t, v}] last 300 ticks
const TickBuffer = {
  _data: {},
  MAX: 300,
  push(sym, src, val, ts) {
    const k = sym + '|' + src;
    if (!this._data[k]) this._data[k] = [];
    this._data[k].push({ t: ts || Date.now(), v: val });
    if (this._data[k].length > this.MAX) this._data[k].shift();
  },
  get(sym, src) { return this._data[sym + '|' + src] || []; },
};

// ── Instrument Spec Store ───────────────────────────────────────────────
// Caches expiry/contract spec per symbol, sourced ONLY from the server's
// /instrument endpoint (which in turn reads it from MT5's SYMBOL_EXPIRATION_TIME
// via alfa_symbols.json). No hardcoded dictionaries, no ticker-pattern parsing —
// per architecture requirement, this is the single source of expiry truth.


// ===== V168 SymbolResolver =====
const SymbolResolver = {
  historySymbol(sym, src){
    sym = String(sym||'');
    src = String(src||'').toUpperCase();
    if(src==='MOEX' && !sym.startsWith('#') && /^[A-Z]+$/.test(sym)) return '#'+sym;
    return sym;
  }
};

// ===== Stage 9: HistoryStore (single candle source of truth) =====
const HistoryStore = {
  _cache:{},
  _inflight:{},
  _hits:0,
  _misses:0,

  async load(sym,src,tf,loader){
    const k=[sym,src,tf].join('|');

    if(this._cache[k]){
      this._hits++;
      return this._cache[k];
    }

    if(this._inflight[k]){
      return this._inflight[k];
    }

    this._misses++;

    this._inflight[k] = (async()=>{
      try{
        const data = await loader();
        this._cache[k] = data;
        return data;
      } finally {
        delete this._inflight[k];
      }
    })();

    return this._inflight[k];
  },

  async get(sym,src,tf,loader){
    return this.load(sym,src,tf,loader);
  },

  set(sym,src,tf,data){
    this._cache[[sym,src,tf].join('|')] = data;
  },

  peek(sym,src,tf){
    return this._cache[[sym,src,tf].join('|')] || null;
  },

  stats(){
    return {
      cacheEntries:Object.keys(this._cache).length,
      inflight:Object.keys(this._inflight).length,
      hits:this._hits,
      misses:this._misses
    };
  },

  clear(){
    this._cache = {};
    this._inflight = {};
  }
};

const InstrumentSpecStore = {
  _cache: {},      // SYMBOL (upper) -> {expiry, days_to_expiry, contract_size, tick_size, tick_value, fetchedAt}
  _inflight: {},    // SYMBOL -> Promise, dedupes concurrent fetches
  TTL_MS: 30000,    // refetch at most every 30s per symbol (days_to_expiry barely moves)

  async get(symbol) {
    const key = String(symbol || '').toUpperCase();
    if (!key) return null;
    const cached = this._cache[key];
    if (cached && (Date.now() - cached.fetchedAt) < this.TTL_MS) return cached;
    if (this._inflight[key]) return this._inflight[key];

    const p = (async () => {
      try {
        const res = await fetch('https://api.arbiview.pro/instrument?symbol=' + encodeURIComponent(key));
        const d = await res.json();
        const spec = {
          expiry: d.ok ? d.expiry : null,
          days_to_expiry: d.ok ? d.days_to_expiry : null,
          contract_size: d.ok ? d.contract_size : null,
          tick_size: d.ok ? d.tick_size : null,
          tick_value: d.ok ? d.tick_value : null,
          fetchedAt: Date.now(),
        };
        this._cache[key] = spec;
        return spec;
      } catch (e) {
        const spec = { expiry: null, days_to_expiry: null, contract_size: null, tick_size: null, tick_value: null, fetchedAt: Date.now() };
        this._cache[key] = spec;
        return spec;
      } finally {
        delete this._inflight[key];
      }
    })();
    this._inflight[key] = p;
    return p;
  },

  // Synchronous read of whatever is cached right now (may be stale/null if
  // never fetched yet) — used by render paths that can't await.
  peek(symbol) {
    return this._cache[String(symbol || '').toUpperCase()] || null;
  },
};


const PairCalculationStore = {
  _cache:{},

  // Кеш-промах по InstrumentSpecStore.peek() сам по себе никогда не чинится —
  // peek() только читает, никогда не фетчит. Этот набор гарантирует, что для
  // каждого symA/symB, попавшего в расчёт связки, InstrumentSpecStore.get()
  // будет вызван хотя бы раз (а после TTL — повторно, см. сброс _specPrimed
  // в бутстрапе ниже). Сам пересчёт (Engine.calcPair) и формулы FV не трогаем —
  // меняем только то, что ДОСТАВЛЯЕТ спеку до calcPair.
  _specPrimed: {},

  _primeSpec(symbol){
    const key = String(symbol || '').toUpperCase();
    if (!key || this._specPrimed[key]) return;
    this._specPrimed[key] = true;
    InstrumentSpecStore.get(symbol).then(() => {
      // Спека легла в InstrumentSpecStore._cache — пересчитать все связки,
      // где участвует этот символ, и перерисовать таблицу, чтобы ЭКСП/FV
      // не дожидались следующего тика цены.
      this.updateAffected(symbol);
      Render.pairsTable();
    });
  },

  rebuild(){
    this._cache = {};
    for(const pair of PairStore.getAll()){
      const quoteA = MarketStore.get(pair.symA, pair.sourceA);
      const quoteB = MarketStore.get(pair.symB, pair.sourceB);
      const specA = InstrumentSpecStore.peek(pair.symA);
      const specB = InstrumentSpecStore.peek(pair.symB);

      this._cache[pair.id] = Engine.calcPair(
        pair,
        quoteA,
        quoteB,
        specA,
        specB
      );

      this._primeSpec(pair.symA);
      this._primeSpec(pair.symB);
    }
  },

  get(id){ return this._cache[id] || null; },
  getAll(){ return Object.values(this._cache); },

  updatePair(id){
    const pair = PairStore.find(id);
    if(!pair) return null;

    const quoteA = MarketStore.get(pair.symA, pair.sourceA);
    const quoteB = MarketStore.get(pair.symB, pair.sourceB);
    const specA = InstrumentSpecStore.peek(pair.symA);
    const specB = InstrumentSpecStore.peek(pair.symB);

    const prevCalc = this._cache[id];
    const calc = Engine.calcPair(pair, quoteA, quoteB, specA, specB);
    this._cache[id] = calc;

    this._primeSpec(pair.symA);
    this._primeSpec(pair.symB);

    // Алерты по FV% (calc.fairValueDelta) — фоновая проверка пересечения
    // уровня для ЭТОЙ пары на каждом релевантном тике, независимо от того,
    // открыт ли её график в "График спреда" прямо сейчас. Engine.calcPair()
    // и формулы FV не трогаем — используем уже посчитанное значение.
    const prevDelta = prevCalc ? prevCalc.fairValueDelta : null;
    const fired = AlertStore.checkCross(id, prevDelta, calc.fairValueDelta);
    if (fired.length) AlertStore.onFired(fired, pair);

    return calc;
  },

  updateAffected(symbol){
    const affected = PairStore.getAffected(symbol);
    for(const pair of affected){
      this.updatePair(pair.id);
    }
  }
};


// ===== Stage 3: PairStore =====
const PairStore = {
  items: [],
  bySymbol: {},

  rebuildIndex(){
    this.bySymbol = {};
    for(const p of this.items){
      for(const sym of [p.symA,p.symB]){
        if(!this.bySymbol[sym]) this.bySymbol[sym]=[];
        this.bySymbol[sym].push(p);
      }
    }
  },

  getAffected(symbol){
    return this.bySymbol[symbol] || [];
  },

  getAll(){ return this.items; },
  setAll(v){ this.items = Array.isArray(v)?v:[]; this.rebuildIndex(); },
  add(pair){ this.items.push(pair); this.rebuildIndex(); },
  remove(id){ this.items = this.items.filter(p=>p.id!==id); this.rebuildIndex(); },
  find(id){ return this.items.find(p=>p.id===id); }
};

//////////////////////////////////////////////////////
// ALERT STORE — алерты пересечения уровня по FV%
//////////////////////////////////////////////////////
// Алерт привязан к pairId и уровню FV% (calc.fairValueDelta — то же число,
// что показано в шапке как "Δ FV" и рисуется золотой линией на нижнем
// графике). Проверка пересечения вызывается из
// PairCalculationStore.updatePair() — т.е. фоново, для ЛЮБОЙ пары на каждом
// релевантном тике, независимо от того, открыт ли график именно этой пары
// в данный момент. Engine.calcPair()/формулы FV не трогаем — используем уже
// посчитанное значение fairValueDelta.
const AlertStore = {
  _items: [], // {id, pairId, level, status:'active'|'triggered', createdAt, triggeredAt, lastValue, acked}

  getAll(){ return this._items; },
  setAll(v){ this._items = Array.isArray(v) ? v : []; },
  getForPair(pairId){ return this._items.filter(a => a.pairId === pairId); },
  getActive(){ return this._items.filter(a => a.status === 'active'); },
  getTriggered(){ return this._items.filter(a => a.status === 'triggered'); },
  getUnackedTriggeredCount(){ return this._items.filter(a => a.status === 'triggered' && !a.acked).length; },

  add(pairId, level){
    const a = {
      id: 'al_' + Date.now() + '_' + Math.random().toString(36).slice(2,7),
      pairId,
      level: Number(level),
      status: 'active',
      createdAt: Date.now(),
      triggeredAt: null,
      lastValue: null,
      acked: true,
    };
    this._items.push(a);
    return a;
  },

  remove(id){ this._items = this._items.filter(a => a.id !== id); },
  removeForPair(pairId){ this._items = this._items.filter(a => a.pairId !== pairId); },

  ackAllTriggered(){
    this._items.forEach(a => { if (a.status === 'triggered') a.acked = true; });
  },

  // Срабатывает, если уровень оказался МЕЖДУ prevValue и newValue (реально
  // пересечён), независимо от направления — а не только при точном
  // совпадении, которое на живых тиках почти никогда не случается.
  checkCross(pairId, prevValue, newValue){
    if (prevValue == null || newValue == null) return [];
    const fired = [];
    for (const a of this._items){
      if (a.pairId !== pairId || a.status !== 'active') continue;
      const crossedUp   = prevValue <  a.level && newValue >= a.level;
      const crossedDown = prevValue >  a.level && newValue <= a.level;
      if (crossedUp || crossedDown){
        a.status = 'triggered';
        a.triggeredAt = Date.now();
        a.lastValue = newValue;
        a.acked = false;
        fired.push(a);
      }
    }
    return fired;
  },

  // Побочные эффекты срабатывания: лог, toast, бейдж — отдельно от чистой
  // проверки пересечения выше, чтобы checkCross() оставался легко
  // тестируемой чистой функцией.
  onFired(fired, pair){
    fired.forEach(a => {
      const cur = a.lastValue != null ? a.lastValue.toFixed(3) : '?';
      Logger.info(`[ALERT] сработал: ${pair.symA}/${pair.symB} FV% пересёк ${a.level}% (сейчас ${cur}%)`);
      if (typeof UI !== 'undefined' && UI.showToast) {
        UI.showToast(`🔔 ${pair.symA}/${pair.symB}: FV% пересёк ${a.level.toFixed(2)}%`);
      }
    });
    if (fired.length) {
      Storage.save();
      if (typeof Render !== 'undefined' && Render.updateAlertBadge) Render.updateAlertBadge();
      if (typeof Render !== 'undefined' && Render.alertsPanel && State.sidePanelView === 'alerts') Render.alertsPanel();
    }
  },
};

//////////////////////////////////////////////////////
// 2. MARKET STORE
//////////////////////////////////////////////////////

const MarketStore = {
  quotes:   {},   // "SYM|SRC" → quote
  flat:     [],   // all live quotes

  update(q) {
    const key  = q.symbol + '|' + q.source;
    const prev = this.quotes[key];
    // tickDir: 'up' | 'dn' | null — direction of last price move (for flash highlight)
    q.tickDir = (prev && Number.isFinite(prev.last) && Number.isFinite(q.last) && q.last !== prev.last)
      ? (q.last > prev.last ? 'up' : 'dn')
      : null;
    this.quotes[key] = q;
    this.flat = Object.values(this.quotes);
  },

  get(sym, src) {
    if (src) return this.quotes[sym + '|' + src] || null;
    return this.flat.find(q => q.symbol === sym) || null;
  },

  search(query, groupId) {
    const q = query.toUpperCase();
    const g = GROUPS_DEF.find(x => x.id === groupId);
    return this.flat
      .filter(x => (!g || g.srcMatch(x.source)) && x.symbol.includes(q))
      .sort((a, b) => a.symbol.localeCompare(b.symbol))
      .slice(0, 30);
  },
};


const EventBus = {
  _ev:{},
  on(e,fn){(this._ev[e]||(this._ev[e]=[])).push(fn)},
  emit(e,data){(this._ev[e]||[]).forEach(fn=>{try{fn(data)}catch(_){}})}
};

const AppTick = {
  dispatch(q){
    EventBus.emit('quote', q);
  }
};

EventBus.on('quote',(q)=>{
  PairCalculationStore.updateAffected(q.symbol);
  LWChart.onTick(q.symbol, q.source, q.last, q.timestamp);
  SpreadChart.onTick(q.symbol, q.source, q.last, q.timestamp);
  Render.onData(q);
});

//////////////////////////////////////////////////////
// 3. STREAM → normalizeQuote → MarketStore
//////////////////////////////////////////////////////

const Stream = {
  ws: null,
  connect() {
    try { this.ws = new WebSocket('wss://api.arbiview.pro/ws'); }
    catch(e) { setTimeout(() => Stream.connect(), 3000); return; }
    this.ws.onopen  = () => { Render.status('LIVE', true); Logger.info('WS подключён'); };
    this.ws.onclose = () => { Render.status('OFFLINE', false); setTimeout(() => Stream.connect(), 2000); };
    this.ws.onmessage = (e) => {
      try {
        const msg = JSON.parse(e.data);

        switch(msg.type){

          case 'snapshot':
            (msg.quotes || []).forEach(q => this._pipe(q));
            break;

          case 'quotes':
            (msg.quotes || []).forEach(q => this._pipe(q));
            break;

          default:
            console.warn('Unknown WS message', msg.type);
        }

      } catch(ex){
        console.error('WS parse error', ex);
      }
    };
  },
  _pipe(raw) {
    const q = this._normalize(raw);
    if (!q) return;
    TickBuffer.push(q.symbol, q.source, q.last, q.timestamp);
    MarketStore.update(q);   // → single source of truth
    AppTick.dispatch(q);
  },
  _normalize(raw) {
    const sym = (raw?.symbol || raw?.sym || '').toUpperCase();
    if (!sym) return null;
    return {
      symbol:    sym,
      source:    (raw.source || raw.src || '').toUpperCase(),
      last:      Number(raw.last ?? raw.price ?? 0) || 0,
      bid:       Number(raw.bid  ?? 0) || 0,
      ask:       Number(raw.ask  ?? 0) || 0,
      change:    Number(raw.changePct ?? raw.change ?? 0) || 0,
      timestamp: raw.time ? Number(raw.time) : Date.now(),
    };
  },
};

//////////////////////////////////////////////////////
// 4. ENGINE  (pure logic)
//////////////////////////////////////////////////////

const Engine = {
  // ── Этап 4: стоимость позиции — единственное место, где лот применяется ──
  calcPositionValue(price, lot, contractSize = 1) {
    if (price == null) return null;
    const l = Math.max(Number(lot) || 1, 1e-12);
    const cs = Math.max(Number(contractSize) || 1, 1e-12);
    return price * l * cs;
  },

  // ── Этап 5: спред считается ТОЛЬКО от стоимости позиции, не от цены ──────
  calcSpreadPct(valueA, valueB) {
    if (valueA == null || valueB == null || Math.abs(valueB) <= 1e-12) return null;
    return (valueA / valueB - 1) * 100;
  },

  calcSpreadAbs(valueA, valueB) {
    if (valueA == null || valueB == null) return null;
    return valueA - valueB;
  },

  // ── Этап 9: FV считается ТОЛЬКО от spotPrice + rate + daysToExpiry ───────
  // Запрещено передавать spreadPct в эту функцию — carry-cost модель не
  // знает и не должна знать про существующий спред.
  calcFairValue(spotPrice, ratePct, daysToExpiry) {
    if (spotPrice == null || daysToExpiry == null) return null;
    const T = Math.max(0, daysToExpiry) / 365;
    const r = (Number(ratePct) || 0) / 100;
    const theoreticalFuture = spotPrice * (1 + r * T);
    return (theoreticalFuture / spotPrice - 1) * 100;
  },

  calcFairValueAt(spotPrice, ratePct, expiryDate, pointTime) {
    if (!expiryDate || spotPrice == null || spotPrice === 0) return null;
    const daysToExpiry = Math.max(0, (new Date(expiryDate).getTime() - pointTime) / 86400000);
    return this.calcFairValue(spotPrice, ratePct, daysToExpiry);
  },

  calcDeltaFV(spreadPct, fairValuePct) {
    if (spreadPct == null || fairValuePct == null) return null;
    return spreadPct - fairValuePct;
  },

  // ── PairCalculation: единая модель, без переиспользования полей ──────────
  calcPair(pair, qA=null, qB=null, specA=null, specB=null) {

    // Этап 3: цена инструмента — ВСЕГДА реальная биржевая цена, лот её не трогает.
    const rawPriceA = qA?.last ?? null;
    const rawPriceB = qB?.last ?? null;

    const lotA = Number(pair.lotA) || 1;
    const lotB = Number(pair.lotB) || 1;

    const csA = specA?.contract_size || 1;
    const csB = specB?.contract_size || 1;

    // Этап 4: стоимость позиции — отдельное поле, используется только для спреда.
    const positionValueA = this.calcPositionValue(rawPriceA, lotA, csA);
    const positionValueB = this.calcPositionValue(rawPriceB, lotB, csB);

    // Этап 5: спред — от стоимости позиции, не от цены.
    const spreadPct = this.calcSpreadPct(positionValueA, positionValueB);
    const spreadAbs = this.calcSpreadAbs(positionValueA, positionValueB);

    // Expiry comes ONLY from MT5 via InstrumentSpecStore — no manual date,
    // no hardcoded dictionary, no ticker-pattern parsing.
    const aIsFut = specA && specA.days_to_expiry != null;
    const bIsFut = specB && specB.days_to_expiry != null;
    const spec = aIsFut ? specA : (bIsFut ? specB : null);
    const daysToExpiry = spec ? spec.days_to_expiry : null;

    // Этап 9: FV строится только из spotPrice + rate + daysToExpiry.
    // spotPrice — RAW цена не-фьючерсной ноги (никогда стоимость позиции,
    // никогда spreadPct).
    const spotPrice = aIsFut ? rawPriceB : (bIsFut ? rawPriceA : null);
    const fairValuePct = (spec && spotPrice != null)
      ? this.calcFairValue(spotPrice, pair.ratePct, daysToExpiry)
      : null;
    const fairValueDelta = this.calcDeltaFV(spreadPct, fairValuePct);

    const mode    = spreadPct==null?'Neutral':spreadPct>0.1?'Contango':spreadPct<-0.1?'Backwardation':'Neutral';
    const modeCls = spreadPct==null?'mode-n' :spreadPct>0.1?'mode-up' :'mode-dn';

    return {
      ...pair,
      rawPriceA, rawPriceB,
            lotA, lotB,
      positionValueA, positionValueB,
      spreadPct, spreadAbs,
      fairValuePct, fairValueDelta,
      days: daysToExpiry,
      mode, modeCls,
    };
  },
  stats(calcs) {
    const cont=calcs.filter(c=>c.spreadPct!=null&&c.spreadPct>0.1).length;
    const back=calcs.filter(c=>c.spreadPct!=null&&c.spreadPct<-0.1).length;
    const mS=calcs.reduce((m,c)=>c.spreadPct!=null&&c.spreadPct>m?c.spreadPct:m,-Infinity);
    const mF=calcs.reduce((m,c)=>c.fairValueDelta!=null&&Math.abs(c.fairValueDelta)>m?Math.abs(c.fairValueDelta):m,-Infinity);
    return {count:calcs.length,cont,back,mS,mF};
  },
};

//////////////////////////////////////////////////////
// 5. UI  (interactions only)
//////////////////////////////////////////////////////

const UI = {
  show(tab) {
    State.activeTab = tab;
    document.querySelectorAll('.tab').forEach(t=>t.classList.remove('active'));
    document.getElementById('tab-'+tab)?.classList.add('active');
    Render.view();
    if (tab==='logs') Render.logs();
  },

  selectQuote(sym, src) {
    WorkspaceStore.setActiveSym({symbol:sym, source:src});
    UI.show('price');
  },

  // Toggle search for a group
  toggleSearch(gid) {
    UIStore.setSearchOpen(gid, !UIStore.searchOpen[gid]);
    UIStore.setSearchQuery(gid, '');
    Render.quotesPanel();
    if (State.searchOpen[gid]) {
      setTimeout(() => document.getElementById('srch-'+gid)?.focus(), 50);
    }
  },

  onSearch(gid, val) {
    UIStore.setSearchQuery(gid, val);
    Render.searchResults(gid);
  },

  addToGroup(gid, sym, src) {
    const wl = ((WorkspaceStore.watchlist||State.watchlist)||{})[gid];
    if (!wl) return;
    if (wl.some(x => x.sym===sym && x.src===src)) return;
    WorkspaceStore.addWatchlistItem(gid,{sym, src});
    Storage.save();
    State.searchOpen[gid] = false;
    UIStore.setSearchQuery(gid, '');
    // Subscribe Binance WS if needed
    if (src.toUpperCase() === 'BINANCE') {
      fetch('https://api.arbiview.pro/binance/subscribe?symbol=' + encodeURIComponent(sym))
        .then(() => Logger.info('[Binance] подписка: ' + sym))
        .catch(e => Logger.warn('[Binance] ошибка подписки: ' + e.message));
    }
    Render.quotesPanel();
    Logger.info('Добавлен ' + sym + ' → ' + gid);
  },

  removeFromGroup(gid, sym, src) {
    const wl = ((WorkspaceStore.watchlist||State.watchlist)||{})[gid];
    if (!wl) return;
    WorkspaceStore.removeWatchlistItem(gid,sym,src);
    Storage.save();
    Render.quotesPanel();
  },

  // Pairs tab
  setPairGroup(slot, gid) {
    if (!State.pairSel) State.pairSel = {};
    WorkspaceStore.setPairGroup(slot,gid);
    // Re-render only the controls, not full view
    const view = document.getElementById('view');
    if (view && State.activeTab === 'pairs') Render.pairsView(view);
  },

  addPair() {
    const sA=document.getElementById('selA'), sB=document.getElementById('selB');
    if (!sA||!sB) return;
    const [symA,srcA]=(sA.value||'|').split('|'), [symB,srcB]=(sB.value||'|').split('|');
    if (!symA||!symB||symA===''||symB===''){Logger.warn('Выбери инструменты A и B');return;}
    if (symA===symB&&srcA===srcB){Logger.warn('Выбери разные инструменты');return;}
    if (PairStore.getAll().some(p=>p.symA===symA&&p.symB===symB)){Logger.warn('Уже есть');return;}
    // Source from watchlist item
    const wlA = ((((WorkspaceStore.watchlist||State.watchlist)||{})[(WorkspaceStore.pairSel||State.pairSel)?.aGroup])||[]).find(x=>x.sym===symA);
    const wlB = ((((WorkspaceStore.watchlist||State.watchlist)||{})[(WorkspaceStore.pairSel||State.pairSel)?.bGroup])||[]).find(x=>x.sym===symB);
    const pair={id:'p_'+Date.now()+'_'+Math.random().toString(36).slice(2,6),
      symA,symB,
      sourceA:wlA?.src||srcA||'',
      sourceB:wlB?.src||srcB||'',
      lotA:1,lotB:1,ratePct:14};
    PairStore.add(pair); PairCalculationStore.updatePair(pair.id); Storage.save(); Render.pairsTable(); Render.pairsPanel();
    Logger.info('Пара: '+symA+'/'+symB);
  },
  removePair(id) {
    PairStore.remove(id); AlertStore.removeForPair(id); Storage.save(); Render.pairsTable(); Render.pairsPanel();
    if (State.sidePanelView === 'alerts') { Render.alertsPanel(); Render.updateAlertBadge(); }
  },
  updateLot(id,slot,val) {
    const p=PairStore.find(id); if(!p) return;
    if(slot==='A')p.lotA=Math.max(parseFloat(val)||1,1e-12); else p.lotB=Math.max(parseFloat(val)||1,1e-12);
    PairCalculationStore.updatePair(id); Storage.save(); Render.updatePairRow(PairCalculationStore.get(id)); Render.pairsPanel();
  },
  openChart(id) {
    const p=PairStore.find(id); if(!p) return;
    WorkspaceStore.setActivePair(p); UI.show('spread');
  },
  selectPair(id) {
    const p=PairStore.find(id); if(!p) return;
    WorkspaceStore.setActivePair(p); UI.show('spread');
  },

  // ── Боковая панель: 3 взаимоисключающих вида (котировки/спред пары/алерты) ──
  setSidePanel(view) {
    if (!['quotes','pairs','alerts'].includes(view)) return;
    State.sidePanelView = view;

    const titles = { quotes: 'список котировок', pairs: 'спред пары', alerts: 'алерты' };
    const titleEl = document.getElementById('sideTitle');
    if (titleEl) titleEl.textContent = titles[view];

    const quotesEl = document.getElementById('quotesScroll');
    const pairsEl  = document.getElementById('pairsSide');
    const alertsEl = document.getElementById('alertsSide');
    if (quotesEl) quotesEl.style.display = view === 'quotes' ? '' : 'none';
    if (pairsEl)  pairsEl.style.display  = view === 'pairs'  ? '' : 'none';
    if (alertsEl) alertsEl.style.display = view === 'alerts' ? '' : 'none';

    const iconOf = { quotes: 'icoQuotes', pairs: 'icoPairs', alerts: 'icoAlerts' };
    ['quotes','pairs','alerts'].forEach(v => {
      const btn = document.getElementById(iconOf[v]);
      if (btn) btn.classList.toggle('active', v === view);
    });

    if (view === 'alerts') {
      AlertStore.ackAllTriggered();
      Render.alertsPanel();
      Render.updateAlertBadge();
    }
  },

  // Добавляет алерт на уровень FV%, введённый в поле на нижней панели
  // графика спреда, для текущей открытой пары.
  addAlertForCurrentPair() {
    const input = document.getElementById('alertLevelInput');
    if (!input) return;
    const val = parseFloat(input.value);
    if (!Number.isFinite(val)) return;
    const pair = WorkspaceStore.activePair;
    if (!pair) return;

    AlertStore.add(pair.id, val);
    Storage.save();
    input.value = '';
    if (typeof SpreadChart !== 'undefined') SpreadChart._renderAlertLines();
    if (State.sidePanelView === 'alerts') Render.alertsPanel();
    Logger.info(`[ALERT] добавлен: ${pair.symA}/${pair.symB} FV%=${val}`);
  },

  removeAlert(id) {
    AlertStore.remove(id);
    Storage.save();
    Render.alertsPanel();
    Render.updateAlertBadge();
    if (typeof SpreadChart !== 'undefined') SpreadChart._renderAlertLines();
  },

  showToast(text) {
    const container = document.getElementById('toastContainer');
    if (!container) return;
    const el = document.createElement('div');
    el.className = 'toast';
    el.textContent = text;
    container.appendChild(el);
    setTimeout(() => {
      el.style.opacity = '0';
      setTimeout(() => { try { el.remove(); } catch(e) {} }, 300);
    }, 6000);
  },
};

//////////////////////////////////////////////////////
// 6. RENDER  (DOM only — reads State + MarketStore)
//////////////////////////////////////////////////////

const Render = {
  _e(s)  { return String(s??'').replace(/[&<>"']/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c])); },
  _f(v,d,sx){ if(v==null||!Number.isFinite(+v)) return '<span class="null">—</span>'; return (+v).toFixed(d??4)+(sx||''); },
  _fp(v) { return v==null?'<span class="null">—</span>':(Math.abs(v)>=100?v.toFixed(2):v.toFixed(4)); },
  _c(v)  { return v==null||!Number.isFinite(+v)?'':v>0?' up':v<0?' dn':''; },

  status(text,live) {
    const d=document.getElementById('sDot'),t=document.getElementById('statusText');
    if(d) d.className='status-dot'+(live?' live':'');
    if(t){ t.textContent=text; t.style.color=live?'#22c55e':'#4b5a72'; }
  },

  // Called on every MarketStore update
  onData(q) {
    // Update only the specific quote row (no full re-render)
    this._updateQuoteRow(q.symbol, q.source);
    // Update pairs panel less frequently (every 2s via interval, not every tick)
    if (State.activeTab==='pairs') {
      const p=PairStore.getAll().find(p=>p.symA===q.symbol||p.symB===q.symbol);
      if (p) this.updatePairRow(PairCalculationStore.get(p.id));
    }
    // V1.24 FIX:
    // Do not rebuild SpreadChart on every tick.
    // SpreadChart receives realtime updates through SpreadChart.onTick().
    if (State.activeTab==='spread' && WorkspaceStore.activePair) {
      // no-op: keep existing chart instance alive
    }
    if (
      State.activeTab==='price' &&
      WorkspaceStore.activeSym?.symbol===q.symbol &&
      WorkspaceStore.activeSym?.source===q.source
    ){
      const p=document.getElementById('priceVal');
      const c=document.getElementById('priceChg');

      if(p){
        p.textContent=Math.abs(q.last)>=100?q.last.toFixed(2):q.last.toFixed(4);
      }

      if(c){
        c.textContent=(q.change>=0?'+':'')+q.change.toFixed(3)+'%';
        c.className=q.change>0?'up':q.change<0?'dn':'';
      }
    }
  },

  _updateQuoteRow(sym, src) {
    const q = MarketStore.get(sym, src);
    if (!q) return;
    // Try both uppercase and original casing
    const rowId = 'qrow-' + sym + '-' + src;
    const row = document.getElementById(rowId) ||
                document.getElementById('qrow-' + sym.toUpperCase() + '-' + src.toUpperCase());
    if (!row) return;
    const chgEl   = row.querySelector('.q-chg');
    const priceEl = row.querySelector('.q-price');
    const newChg   = (q.change>=0?'+':'')+q.change.toFixed(2)+'%';
    const newPrice = Math.abs(q.last)>=100?q.last.toFixed(2):q.last.toFixed(4);
    const newCls   = 'q-chg'+(q.change>0?' up':q.change<0?' dn':'');
    // Only write to DOM if value changed (prevents layout thrash)
    if (chgEl && (chgEl.textContent !== newChg || chgEl.className !== newCls)) {
      chgEl.textContent = newChg; chgEl.className = newCls;
    }
    if (priceEl && priceEl.textContent !== newPrice) {
      priceEl.textContent = newPrice;
      // Flash highlight on tick direction
      if (q.tickDir) {
        priceEl.classList.remove('flash-up', 'flash-dn');
        // re-trigger transition even if same class was just removed
        void priceEl.offsetWidth;
        priceEl.classList.add(q.tickDir === 'up' ? 'flash-up' : 'flash-dn');
        clearTimeout(priceEl._flashTimer);
        priceEl._flashTimer = setTimeout(() => {
          priceEl.classList.remove('flash-up', 'flash-dn');
        }, 600);
      }
    }
  },

  // ── QUOTES PANEL (right side) ────────────────────
  quotesPanel() {
    const el = document.getElementById('quotesScroll');
    if (!el) return;
    el.innerHTML = GROUPS_DEF.map(g => this._groupBlock(g)).join('');
  },

  _groupBlock(g) {
    const wl   = (((WorkspaceStore.watchlist||State.watchlist)||{})[g.id]) || [];
    const open = State.searchOpen[g.id]; // workspace migrated
    const e    = this._e.bind(this);

    const headerHtml = `
      <div class="group-header">
        <span class="group-dot ${e(g.dotCls)}"></span>
        <span class="group-name">${e(g.label)}</span>
        <span class="group-count">(${wl.length})</span>
        <button class="group-btn" onclick="Modal.open('${e(g.id)}')" title="Найти инструмент">🔍</button>
        <button class="group-btn" onclick="Modal.open('${e(g.id)}')" title="Добавить">＋</button>
        <button class="group-btn" title="Развернуть">▶</button>
      </div>`;

    const searchHtml = ''; // search is now in Modal

    let bodyHtml;
    if (!wl.length) {
      bodyHtml = `
        <div class="group-empty">
          <div class="group-empty-text">Группа пустая. Нажмите на лупу,<br>чтобы найти и добавить инструмент.</div>
          <button class="btn-find" onclick="Modal.open('${e(g.id)}')">🔍 Найти и добавить инструмент</button>
        </div>`;
    } else {
      bodyHtml = wl.map(item => {
        const q   = MarketStore.get(item.sym, item.src);
        const rid = 'qrow-'+item.sym+'-'+item.src;
        const act = WorkspaceStore.activeSym?.symbol===item.sym && WorkspaceStore.activeSym?.source===item.src;
        const chgCls = q ? (q.change>0?' up':q.change<0?' dn':'') : '';
        const chgTxt = q ? (q.change>=0?'+':'')+q.change.toFixed(2)+'%' : '—';
        const priceTxt = q ? (Math.abs(q.last)>=100?q.last.toFixed(2):q.last.toFixed(4)) : '—';
        return `<div class="quote-row${act?' active':''}" id="${e(rid)}"
          onclick="UI.selectQuote('${e(item.sym)}','${e(item.src)}')">
          <span class="q-sym">${e(item.sym)}</span>
          <span class="q-chg${chgCls}">${e(chgTxt)}</span>
          <span class="q-price">${e(priceTxt)}</span>
          <button class="q-del" onclick="event.stopPropagation();UI.removeFromGroup('${e(g.id)}','${e(item.sym)}','${e(item.src)}')" title="Удалить">✕</button>
        </div>`;
      }).join('');
    }

    return `<div class="group-block">${headerHtml}${searchHtml}${bodyHtml}</div>`;
  },

  searchResults(gid) {
    const el = document.getElementById('sres-'+gid);
    if (!el) return;
    const q = State.searchQuery[gid] || '';
    if (!q) { el.innerHTML=''; return; }
    const results = MarketStore.search(q, gid);
    if (!results.length) {
      el.innerHTML='<div class="search-empty">Нет результатов</div>';
      return;
    }
    el.innerHTML = results.map(x => `
      <div class="search-result">
        <span class="search-result-sym">${this._e(x.symbol)} <span style="color:#374151;font-size:9px">${this._e(x.source)}</span></span>
        <span class="search-result-price">${this._fp(x.last)}</span>
        <button class="search-add" onclick="UI.addToGroup('${this._e(gid)}','${this._e(x.symbol)}','${this._e(x.source)}')" title="Добавить">＋</button>
      </div>`).join('');
  },

  // ── PAIRS PANEL (bottom right) ────────────────────
  pairsPanel() {
    const el = document.getElementById('pairsPanel');
    if (!el) return;
    if (!PairStore.getAll().length) {
      el.innerHTML='<div style="padding:8px 10px;font-size:11px;color:#374151">Нет связок</div>';
      return;
    }
    el.innerHTML = PairStore.getAll().map(p => {
      const c=PairCalculationStore.get(p.id); if(!c) return ''; const act=WorkspaceStore.activePair?.id===p.id;
      return `<div class="pair-row${act?' active':''}" onclick="UI.selectPair('${this._e(p.id)}')">
        <span class="p-sym">${this._e(p.symA)}/${this._e(p.symB)}</span>
        <span class="p-spread${this._c(c.spreadPct)}" title="Spread %">${this._f(c.spreadPct,3,'%')}</span>
        <span class="p-spread${this._c(c.fairValuePct)}" title="FV %">${c.fairValuePct!=null ? this._f(c.fairValuePct,3,'%') : '—'}</span>
        <span class="p-spread${this._c(c.fairValueDelta)}" title="Δ FV %">${c.fairValueDelta!=null ? this._f(c.fairValueDelta,3,'%') : '—'}</span>
        <button class="p-del" onclick="event.stopPropagation();UI.removePair('${this._e(p.id)}')">✕</button>
      </div>`;
    }).join('');
  },

  // ── ALERTS PANEL (колокольчик в шапке боковой панели) ─────────────────
  alertsPanel() {
    const activeEl = document.getElementById('alertsActiveList');
    const triggeredEl = document.getElementById('alertsTriggeredList');
    if (!activeEl || !triggeredEl) return;

    const fmtPair = (pairId) => {
      const p = PairStore.find(pairId);
      return p ? `${this._e(p.symA)}/${this._e(p.symB)}` : this._e(pairId);
    };
    const fmtTime = (ms) => ms ? new Date(ms).toLocaleTimeString('ru-RU',{hour:'2-digit',minute:'2-digit',second:'2-digit'}) : '';

    const active = AlertStore.getActive();
    activeEl.innerHTML = active.length ? active.map(a => `
      <div class="alert-row">
        <span class="alert-pair">${fmtPair(a.pairId)}</span>
        <span class="alert-level">FV% = ${this._f(a.level,3,'%')}</span>
        <button class="alert-del" onclick="UI.removeAlert('${this._e(a.id)}')" title="Удалить">✕</button>
      </div>`).join('') : '<div class="group-empty-text" style="padding:10px">Нет активных алертов</div>';

    const triggered = AlertStore.getTriggered().slice().sort((a,b) => (b.triggeredAt||0) - (a.triggeredAt||0));
    triggeredEl.innerHTML = triggered.length ? triggered.map(a => `
      <div class="alert-row triggered">
        <span class="alert-pair">${fmtPair(a.pairId)}</span>
        <span class="alert-level">FV% = ${this._f(a.level,3,'%')} <span style="color:#374151">(${this._f(a.lastValue,3,'%')} в ${fmtTime(a.triggeredAt)})</span></span>
        <button class="alert-del" onclick="UI.removeAlert('${this._e(a.id)}')" title="Удалить">✕</button>
      </div>`).join('') : '<div class="group-empty-text" style="padding:10px">Нет сработавших алертов</div>';
  },

  updateAlertBadge() {
    const badge = document.getElementById('alertBadge');
    if (!badge) return;
    const n = AlertStore.getUnackedTriggeredCount();
    if (n > 0) {
      badge.textContent = n > 9 ? '9+' : String(n);
      badge.style.display = 'flex';
    } else {
      badge.style.display = 'none';
    }
  },

  // ── VIEW dispatcher ───────────────────────────────
  view() {
    const el=document.getElementById('view'); if(!el) return;
    el.innerHTML=''; el.style.cssText='flex:1;overflow:hidden;display:flex;flex-direction:column';
    const t=State.activeTab;
    if(t==='price')  this.priceView(el);
    if(t==='pairs')  this.pairsView(el);
    if(t==='spread') this.spreadView(el);
    if(t==='logs')   this.logs(el);
  },

  priceView(el) {
    const s = WorkspaceStore.activeSym;
    if (!s) {
      el.innerHTML = '<div class="empty-view">Нажми на котировку в правой панели<br>чтобы открыть график</div>';
      return;
    }
    const q = MarketStore.get(s.symbol, s.source);
    const chgCls   = q ? (q.change>0?'up':q.change<0?'dn':'') : '';
    const priceStr = q ? this._fp(q.last) : '—';
    const chgStr   = q ? (q.change>=0?'+':'')+q.change.toFixed(3)+'%' : '';

    el.innerHTML = `
      <div class="view-header" style="padding:10px 14px">
        <div style="display:flex;align-items:baseline;gap:10px;flex-wrap:wrap">
          <span class="view-title" id="priceTitle">${this._e(s.symbol)}
            <span style="font-size:11px;color:#374151;font-weight:400"> ${this._e(s.source)}</span>
          </span>
          <span style="font-size:22px;font-weight:700;font-family:'Courier New',monospace;color:#8aabff" id="priceVal">${priceStr}</span>
          <span class="${chgCls}" id="priceChg" style="font-size:13px">${chgStr}</span>
        </div>
      </div>

      <div class="chart-toolbar">
        <!-- Timeframes -->
        ${LWChart.TFS.map(tf =>
          `<button class="tf-btn${tf.v===LWChart._tf?' active':''}" data-tf="${this._e(tf.v)}"
            onclick="LWChart.setTF('${this._e(tf.v)}')">${this._e(tf.l)}</button>`
        ).join('')}

        <div class="chart-sep"></div>

        <!-- Chart type -->
        <button class="chart-type-btn${LWChart._type==='candle'?' active':''}" data-type="candle"
          onclick="LWChart.setType('candle')">🕯 Свечи</button>
        <button class="chart-type-btn${LWChart._type==='line'?' active':''}" data-type="line"
          onclick="LWChart.setType('line')">📈 Линия</button>

        <div class="chart-sep"></div>

        <!-- Actions -->
        <button class="chart-action-btn" onclick="LWChart.fitContent()" title="Вписать в экран">⤢</button>
        <button class="chart-action-btn" onclick="LWChart.resetZoom()" title="Сбросить масштаб">↺</button>

        <!-- OHLC info (updated on crosshair) -->
        <div class="chart-info">
          <div class="ci-ohlc" id="chartOHLC">          </div>        </div>
      </div>

      <div class="chart-container" style="flex:1;position:relative">
        <div id="lwChart" style="width:100%;height:100%"></div>
        <div id="chartLoading" class="chart-loading" style="display:none">
          <span>⏳ Загрузка данных...</span>
        </div>
        <div id="chartNoHistory" style="display:none;position:absolute;top:8px;left:12px;font-size:11px;color:#f59e0b;background:rgba(15,20,25,.88);padding:4px 10px;border-radius:6px;pointer-events:none;z-index:5;border:1px solid rgba(245,158,11,.25)"></div>
      </div>`;

    // Load chart after DOM ready
    requestAnimationFrame(() => LWChart.load(s.symbol, s.source));
  },

  pairsView(el) {
    // Build options only from watchlist (instruments user added to quotes panel)
    const makeOpts = (slot) => {
      const gid = (WorkspaceStore.pairSel||State.pairSel)?.[slot + 'Group'] || '';
      const wl  = gid ? (((WorkspaceStore.watchlist||State.watchlist)||{})[gid] || []) : [];
      if (!gid) return '<option value="">— выбери источник —</option>';
      if (!wl.length) return '<option value="">— список пуст —</option>';
      return wl.map(x =>
        `<option value="${this._e(x.sym+'|'+x.src)}">${this._e(x.sym)}</option>`
      ).join('');
    };

    const groupBtns = (slot) => GROUPS_DEF.map(g =>
      `<button class="src-btn${(WorkspaceStore.pairSel||State.pairSel)?.[slot+'Group']===g.id?' active':''}"
        onclick="UI.setPairGroup('${this._e(slot)}','${this._e(g.id)}')">${this._e(g.label)}</button>`
    ).join('');

    el.innerHTML = `
      <div class="scanner-top" style="flex-direction:column;align-items:stretch;gap:8px;padding:10px 12px">
        <div style="display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:end">

          <!-- Slot A -->
          <div>
            <div class="slot-label">ИНСТРУМЕНТ A</div>
            <div class="src-btn-group">${groupBtns('a')}</div>
            <select id="selA" class="sel" style="width:100%;margin-top:5px">${makeOpts('a')}</select>
          </div>

          <!-- Slot B -->
          <div>
            <div class="slot-label">ИНСТРУМЕНТ B</div>
            <div class="src-btn-group">${groupBtns('b')}</div>
            <select id="selB" class="sel" style="width:100%;margin-top:5px">${makeOpts('b')}</select>
          </div>

          <!-- Add button -->
          <div style="padding-bottom:1px">
            <button class="btn-add-pair" onclick="UI.addPair()" style="height:32px;padding:0 20px">＋ Добавить</button>
          </div>
        </div>
      </div>
      <div class="stats-bar" id="pairsStats"></div>
      <div class="tbl-wrap"><table class="st">
        <thead><tr>
<th>СВЯЗКА</th><th>ЦЕНА A</th><th>ЛОТ A</th>
<th>ЦЕНА B</th><th>ЛОТ B</th><th>ЭКСП</th>
<th>СПРЕД %</th><th>FV %</th><th>РЕЖИМ</th><th>📈</th><th>✕</th>
</tr></thead>
        <tbody id="pairsTbody"></tbody>
      </table></div>`;
    this.pairsTable();
  },

  pairsTable() {
    const tbody=document.getElementById('pairsTbody'), stats=document.getElementById('pairsStats');
    if(!tbody) return;
    const calcs=PairStore.getAll().map(p=>PairCalculationStore.get(p.id)).filter(Boolean);
    tbody.innerHTML=calcs.length?calcs.map(c=>this._pairRow(c)).join(''):
      `<tr><td colspan="13" class="st-empty">Нет связок. Выбери A и B, нажми «＋ Добавить».</td></tr>`;
    if(stats) stats.innerHTML=this._statsHtml(Engine.stats(calcs));
  },

  _pairRow(c) {
    const e=this._e.bind(this),fp=this._fp.bind(this),f=this._f.bind(this),cl=this._c.bind(this);
    // В связках показываем стоимость позиции с учетом лотности.
    const priceA = c.positionValueA;
    const priceB = c.positionValueB;
    return `<tr data-pid="${e(c.id)}">
      <td>${e(c.symA)}/${e(c.symB)}</td>
      <td>${fp(priceA)}</td>
      <td><input class="li" type="number" step="any" value="${e(c.lotA)}" oninput="UI.updateLot('${e(c.id)}','A',this.value)"></td>
      <td>${fp(priceB)}</td>
      <td><input class="li" type="number" step="any" value="${e(c.lotB)}" oninput="UI.updateLot('${e(c.id)}','B',this.value)"></td>
      <td style="text-align:center">${c.days!=null ? e(c.days) : '<span class="null">—</span>'}</td>
      <td class="${cl(c.spreadPct)}">${f(c.spreadPct,3,'%')}</td>
      <td>${c.fairValuePct!=null ? f(c.fairValuePct,3,'%') : '—'}</td>
      <td><span class="mode ${e(c.modeCls)}">${e(c.mode)}</span></td>
      <td><button class="btn-c" onclick="UI.openChart('${e(c.id)}')">📈</button></td>
      <td><button class="btn-x" onclick="UI.removePair('${e(c.id)}')">✕</button></td>
    </tr>`;
  },

  updatePairRow(c) {
    const row=document.querySelector(`[data-pid="${CSS.escape(c.id)}"]`);
    if(!row){this.pairsTable();return;}
    const td=row.querySelectorAll('td'),fp=this._fp.bind(this),f=this._f.bind(this),cl=this._c.bind(this),e=this._e.bind(this);
    td[1].innerHTML=fp(c.positionValueA);
    td[3].innerHTML=fp(c.positionValueB);
    td[5].innerHTML=c.days ?? '—';
    td[6].innerHTML=f(c.spreadPct,3,'%'); td[6].className=cl(c.spreadPct);
    td[7].innerHTML=(c.fairValuePct!=null ? f(c.fairValuePct,3,'%') : '—');
    td[8].innerHTML=`<span class="mode ${e(c.modeCls)}">${e(c.mode)}</span>`;
  },

  _statsHtml(s) {
    const fmt=v=>Number.isFinite(v)?v.toFixed(3)+'%':'—';
    return [['СТРОК',s.count],['КОНТАНГО',s.cont],['БЭКВОРДАЦИЯ',s.back],['МАКС СПРЕД',fmt(s.mS)]]
      .map(([l,v])=>`<div class="stat"><span class="stat-l">${l}</span><span class="stat-v">${v}</span></div>`).join('');
  },

  spreadView(el) {
    const p = WorkspaceStore.activePair;
    if (!p) { el.innerHTML = '<div class="empty-view">Нажми 📈 в таблице Связок</div>'; return; }
    const c = PairCalculationStore.get(p.id) || PairCalculationStore.updatePair(p.id);

    SpreadChart._updateFvAvailability(p);
    const fvAvail   = SpreadChart._fvAvailable;
    const fvTooltip = fvAvail ? 'Fair Value' : 'Для расчёта Fair Value в паре должен присутствовать срочный фьючерс';
    const fvPctTooltip = fvAvail
      ? 'FV% = Спред% − Fair Value% (отклонение спреда от справедливой стоимости)'
      : 'Для расчёта FV% в паре должен присутствовать срочный фьючерс';
    Logger.info(`[FV%] spreadView render: pair=${p.symA}/${p.symB} fvAvail=${fvAvail} _fvPctEnabled=${SpreadChart._fvPctEnabled} (этим значением будет выставлен flex строки #scFvPctRow в шаблоне)`);

    el.innerHTML = `
      <div class="view-header" style="padding:8px 14px;flex-shrink:0">
        <div style="display:flex;align-items:center;gap:14px;flex-wrap:wrap">
          <span class="view-title">${this._e(p.symA)} / ${this._e(p.symB)}</span>
          <span style="font-size:11px;color:#4b5a72">
            Спред: <span class="${this._c(c.spreadPct)}">${this._f(c.spreadPct,3,'%')}</span>
            &nbsp;|&nbsp; Δ FV: <span class="${this._c(c.fairValueDelta)}">${this._f(c.fairValueDelta,3,'%')}</span>
            &nbsp;|&nbsp; <span class="mode ${this._e(c.modeCls)}">${this._e(c.mode)}</span>
          </span>
          <div style="margin-left:auto;display:flex;gap:6px;align-items:center" id="spreadTfBar">
            ${LWChart.TFS.map(tf =>
              `<button class="tf-btn${SpreadChart._tf===tf.v?' active':''}" data-tf="${this._e(tf.v)}"
                onclick="SpreadChart.setTF('${this._e(tf.v)}')">${this._e(tf.l)}</button>`
            ).join('')}
            <div class="chart-sep"></div>
            <button class="tf-btn${SpreadChart._priceMode==='PRICE'?' active':''}"
              onclick="SpreadChart.setPriceMode('PRICE')">PRICE</button>
            <button class="tf-btn${SpreadChart._priceMode==='NORMALIZED'?' active':''}"
              onclick="SpreadChart.setPriceMode('NORMALIZED')">NORM</button>
            <div class="chart-sep"></div>
            <button class="tf-btn${SpreadChart._fvEnabled?' active':''}" id="fvToggleBtn"
              title="${this._e(fvTooltip)}"
              style="${fvAvail?'':'opacity:.35;cursor:default'}"
              onclick="SpreadChart.toggleFV()">FV</button>
            <input type="number" id="fvRateInput" class="li" style="width:62px"
              min="0" max="100" step="0.01"
              value="${this._e(SpreadChart._fvRate.toFixed(2))}"
              title="Rate %"
              ${fvAvail ? '' : 'disabled'}
              oninput="SpreadChart.setFvRate(this.value)">
            <div class="chart-sep"></div>
            <button class="tf-btn${SpreadChart._fvPctEnabled?' active':''}" id="fvPctToggleBtn"
              title="${this._e(fvPctTooltip)}"
              style="${fvAvail?'':'opacity:.35;cursor:default'}"
              onclick="SpreadChart.toggleFVPercent()">FV%</button>
          </div>
        </div>
      </div>

      <div style="flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative">
        <!-- Top: price chart A+B -->
        <!-- min-height:0 обязателен: у flex-элементов в колонке по умолчанию
             min-height:auto, а внутри лежит <canvas> (Lightweight Charts) —
             replaced-элемент с зафиксированными пикселями. Без min-height:0
             браузер не даёт этой строке сжаться ниже прежнего размера канваса,
             когда появляется третья строка (#scFvPctRow) — суммарная высота
             переполняет контейнер, и при overflow:hidden обрезается именно
             последняя (нижняя) строка, хотя JS успешно создаёт её график. -->
        <div id="scTop" style="flex:1;min-height:0;overflow:hidden;position:relative;border-bottom:1px solid rgba(255,255,255,.06)">
          <div id="scTopChart" style="width:100%;height:100%"></div>
          <div class="chart-legend" id="scLegend" style="position:absolute;top:8px;left:10px;display:flex;gap:14px;font-size:11px;font-family:'Courier New',monospace;pointer-events:none;z-index:10">
            <span style="color:#ef4444">● ${this._e(p.symA)}: <span id="scValA">—</span></span>
            <span style="color:#3b82f6">● ${this._e(p.symB)}: <span id="scValB">—</span></span>
          </div>
          <div id="spreadNoHistory" style="display:none;position:absolute;top:8px;right:10px;font-size:11px;color:#f59e0b;background:rgba(15,20,25,.88);padding:4px 10px;border-radius:6px;pointer-events:none;z-index:10;border:1px solid rgba(245,158,11,.25);max-width:50%;text-align:right"></div>
          <div id="scTopLoading" class="chart-loading">⏳ Загрузка...</div>
        </div>
        <!-- Bottom: spread % chart -->
        <div id="scBot" style="flex:${SpreadChart._fvPctEnabled?'0 0 28%':'0 0 35%'};min-height:0;overflow:hidden;position:relative">
          <div id="scBotChart" style="width:100%;height:100%"></div>
          <div style="position:absolute;top:6px;left:10px;font-size:10px;color:#374151;pointer-events:none;z-index:10">
            спред % &nbsp;<span id="scValSpread" style="color:#63b3ed">—</span>
          </div>
          <div id="scBotLoading" class="chart-loading">⏳</div>
        </div>
        <!-- FV%: Spread% − FairValue%. Высота строки отражает _fvPctEnabled
             на момент рендера — свёрнута (0), если кнопка не нажата, ровно
             как раньше — два графика. -->
        <div id="scFvPctRow" style="flex:${SpreadChart._fvPctEnabled?'0 0 22%':'0 0 0%'};min-height:0;position:relative;overflow:hidden">
          <div id="scFvPctChart" style="width:100%;height:100%"></div>
          <div style="position:absolute;top:6px;left:10px;font-size:10px;color:#374151;pointer-events:auto;z-index:10;display:flex;align-items:center;gap:6px">
            FV% &nbsp;<span id="scValFvPct" style="color:#D4AF37">—</span>
            <span style="margin-left:6px">🔔</span>
            <input type="number" id="alertLevelInput" class="li" style="width:62px" step="0.01" placeholder="уровень" title="Уровень FV% для алерта">
            <button class="tf-btn" style="padding:1px 7px" title="Добавить алерт на этот уровень" onclick="UI.addAlertForCurrentPair()">+</button>
          </div>
        </div>
      </div>`;

    SpreadChart.load(p);
  },

  logs(el) {
    const t=el||document.getElementById('view');
    if(!t||State.activeTab!=='logs') return;
    t.innerHTML=`<div style="display:flex;align-items:center;justify-content:space-between;padding:6px 12px;border-bottom:1px solid rgba(255,255,255,.06);flex-shrink:0">
        <span style="font-size:11px;color:#4b5a72">записей: ${State.logs.length}</span>
        <button class="chart-action-btn" id="copyLogsBtn" onclick="Render.copyLogs()">📋 Копировать логи</button>
      </div>
      <div class="logs-wrap">${
      State.logs.slice().reverse().map(l=>
        `<div class="log-r"><span class="log-ts">${l.ts}</span><span class="log-${l.level}">${this._e(l.msg)}</span></div>`
      ).join('')
    }</div>`;
  },

  copyLogs() {
    const text = State.logs.map(l => `[${l.ts}] ${String(l.level||'').toUpperCase()}: ${l.msg}`).join('\n');
    const btn = document.getElementById('copyLogsBtn');
    const flash = (label) => {
      if (!btn) return;
      const old = btn.textContent;
      btn.textContent = label;
      setTimeout(() => { if (document.getElementById('copyLogsBtn')) btn.textContent = old; }, 1500);
    };
    const fallbackCopy = () => {
      try {
        const ta = document.createElement('textarea');
        ta.value = text;
        ta.style.position = 'fixed';
        ta.style.opacity = '0';
        document.body.appendChild(ta);
        ta.focus();
        ta.select();
        document.execCommand('copy');
        document.body.removeChild(ta);
        return true;
      } catch (e) { return false; }
    };
    if (navigator.clipboard && navigator.clipboard.writeText) {
      navigator.clipboard.writeText(text)
        .then(() => flash('✓ Скопировано'))
        .catch(() => flash(fallbackCopy() ? '✓ Скопировано' : '⚠ Не удалось'));
    } else {
      flash(fallbackCopy() ? '✓ Скопировано' : '⚠ Не удалось');
    }
  },
};

//////////////////////////////////////////////////////
// 7. LOGGER + STORAGE
//////////////////////////////////////////////////////

const Logger = {
  _ts(){ return new Date().toLocaleTimeString('ru'); },
  _p(level,msg){ State.logs.push({ts:this._ts(),level,msg:String(msg)}); if(State.logs.length>500)State.logs.shift(); if(State.activeTab==='logs')Render.logs(); },
  info(m){ this._p('info',m); }, warn(m){ this._p('warn',m); }, error(m){ this._p('error',m); },
};

const Storage = {
  KEY: 'st_v103',
  load() {
    try {
      const r=JSON.parse(localStorage.getItem(this.KEY)||'{}');
      State.watchlist = r.watchlist || {MOEX:[],ALFA:[],BINANCE:[]};
      PairStore.setAll(r.pairs || []);
      AlertStore.setAll(r.alerts || []);
    } catch(e) {}
  },
  save() {
    try { localStorage.setItem(this.KEY,JSON.stringify({watchlist:State.watchlist,pairs:PairStore.getAll(),alerts:AlertStore.getAll()})); }catch(e){}
  },
};


//////////////////////////////////////////////////////
// LW CHART  (lightweight-charts / TradingView style)
//////////////////////////////////////////////////////

const LWChart = {
  _chart:      null,
  _series:     null,
  _sym:        null,
  _src:        null,
  _tf:         '5min',
  _type:       'candle',   // 'candle' | 'line'
  _candles:    [],         // loaded OHLC data
  _container:  null,
  _resizeObserver: null,
  _historyAvailable: true, // false when backend returned no candles for the current sym/src/tf

  // Timeframes: label → server tf string
  TFS: [
    {l:'5s',  v:'5s'},  {l:'1m',  v:'1min'}, {l:'5m',  v:'5min'},
    {l:'15m', v:'15min'},{l:'30m', v:'30min'},{l:'1h',  v:'1h'},
    {l:'4h',  v:'4h'},  {l:'1d',  v:'1d'},
  ],

  async load(sym, src, tf, type) {
    this._sym  = sym;
    this._src  = src;
    this._tf   = tf   || this._tf;
    this._type = type || this._type;

    this._showLoading(true);
    try {
      const srcParam = (src||'').toLowerCase();
      let url;
      if (srcParam === 'binance') {
        url = `https://api.arbiview.pro/binance/candles?symbol=${encodeURIComponent(sym)}&tf=${this._tf}`;
      } else {
        const source = srcParam === 'moex' || srcParam.startsWith('moex') ? 'moex-fut' : 'alfa';
        const historySym = SymbolResolver.historySymbol(sym, src);
        console.log('[V169 HISTORY]', {sym, historySym, src, source, tf:this._tf});
        url = `https://api.arbiview.pro/candles?symbol=${encodeURIComponent(historySym)}&source=${source}&tf=${this._tf}`;
      }
      const data = await HistoryStore.load(
        sym,
        src,
        this._tf,
        async ()=>{
          const res = await fetch(url);
          return await res.json();
        }
      );
      if (data.ok && Array.isArray(data.candles) && data.candles.length) {
        this._candles = data.candles;
        this._historyAvailable = true;
        Logger.info(`${sym} ${this._tf}: загружено ${data.candles.length} свечей`);
      } else {
        this._candles = [];
        this._historyAvailable = false;
        Logger.warn(`${sym} ${this._tf}: нет данных (${data.error||'пусто'})`);
      }
    } catch(e) {
      this._candles = [];
      this._historyAvailable = false;
      Logger.warn(`${sym}: ошибка загрузки (${e.message})`);
    }

    this._render();
    this._showLoading(false);
  },

  _render() {
    const container = document.getElementById('lwChart');
    if (!container) return;

    // Destroy old instance
    if (this._chart) {
      try { this._chart.remove(); } catch(e) {}
      this._chart = null;
      this._series = null;
    }

    if (!window.LightweightCharts) {
      container.innerHTML = '<div style="padding:20px;color:#374151;font-size:12px">lightweight-charts не загружен</div>';
      return;
    }

    this._chart = LightweightCharts.createChart(container, {
      width:  container.clientWidth,
      height: container.clientHeight || 400,
      layout: {
        background:  { type: 'solid', color: '#0b0f17' },
        textColor:   '#5d6e8a',
        fontSize:    11,
        fontFamily:  "'Inter',system-ui,sans-serif",
      },
      grid: {
        vertLines:   { color: 'rgba(255,255,255,.04)' },
        horzLines:   { color: 'rgba(255,255,255,.04)' },
      },
      crosshair: {
        mode:        LightweightCharts.CrosshairMode.Normal,
        vertLine:    { color: '#374151', style: 1, width: 1, labelBackgroundColor: '#1f2937' },
        horzLine:    { color: '#374151', style: 1, width: 1, labelBackgroundColor: '#1f2937' },
      },
      rightPriceScale: {
        borderColor:    'rgba(255,255,255,.08)',
        textColor:      '#5d6e8a',
        scaleMargins:   { top: 0.08, bottom: 0.08 },
      },
      timeScale: {
        borderColor:    'rgba(255,255,255,.08)',
        timeVisible:    true,
        secondsVisible: this._tf === '5s' || this._tf === '1min',
        fixLeftEdge:    true,
      },
      handleScroll:   { mouseWheel: true, pressedMouseMove: true, horzTouchDrag: true },
      handleScale:    { mouseWheel: true, pinch: true, axisPressedMouseMove: { time:true, price:true } },
    });

    // Create series
    if (this._type === 'candle') {
      this._series = this._chart.addCandlestickSeries({
        upColor:          '#22c55e',
        downColor:        '#ef4444',
        borderUpColor:    '#22c55e',
        borderDownColor:  '#ef4444',
        wickUpColor:      '#22c55e',
        wickDownColor:    '#ef4444',
      });
    } else {
      this._series = this._chart.addAreaSeries({
        lineColor:        '#63b3ed',
        topColor:         'rgba(99,179,237,.18)',
        bottomColor:      'rgba(99,179,237,.01)',
        lineWidth:        2,
        priceLineVisible: false,
      });
    }

    // Load data
    if (this._candles.length) {
      const parsed = this._parseCandles(this._candles);
      if (parsed.length) {
        this._series.setData(parsed);
        this._chart.timeScale().fitContent();
      }
    } else {
      // Fallback: no candle history from the backend (some instruments
      // simply have no history file yet). TickBuffer already holds up to
      // 300 recent raw ticks for this symbol regardless of which chart is
      // open (Stream._pipe() fills it unconditionally), so use it to render
      // something immediately instead of waiting for new candles to build
      // one tick at a time.
      const ticks = TickBuffer.get(this._sym, this._src);
      if (ticks.length && this._type === 'line') {
        const lineData = ticks.map(t => ({
          time: Math.floor(t.t / 1000),
          value: t.v,
        }));
        this._series.setData(lineData);
        this._chart.timeScale().fitContent();
      } else if (ticks.length && this._type === 'candle') {
        const tfSecMap = {
          '5s':5,'1min':60,'5min':300,'15min':900,
          '30min':1800,'1h':3600,'4h':14400,'1d':86400
        };
        const tfSec = tfSecMap[this._tf] || 300;
        const buckets = {};
        const order = [];
        for (const tk of ticks) {
          const bt = Math.floor(Math.floor(tk.t / 1000) / tfSec) * tfSec;
          if (!buckets[bt]) {
            buckets[bt] = { time: bt, open: tk.v, high: tk.v, low: tk.v, close: tk.v };
            order.push(bt);
          } else {
            const b = buckets[bt];
            b.close = tk.v;
            if (tk.v > b.high) b.high = tk.v;
            if (tk.v < b.low) b.low = tk.v;
          }
        }
        const synthetic = order.sort((a, b) => a - b).map(bt => buckets[bt]);
        if (synthetic.length) {
          this._series.setData(synthetic);
          this._chart.timeScale().fitContent();
          // Seed _candles so the next onTick() call extends this series
          // through the normal bucket-aggregation path instead of starting
          // from zero again.
          this._candles = synthetic.map(b => ({
            time: new Date(b.time * 1000).toISOString(),
            o: b.open, h: b.high, l: b.low, c: b.close
          }));
        }
      }
    }

    this._updateNoHistoryBadge();

    // Crosshair move → update OHLC info bar
    this._chart.subscribeCrosshairMove(param => {
      if (!param.time || !param.seriesData) return;
      const d = param.seriesData.get(this._series);
      if (!d) return;
      const el = document.getElementById('chartOHLC');
      if (!el) return;
      if (d.open !== undefined) {
        el.innerHTML =
          `<span>O:<span class="ci-o">${d.open?.toFixed(4)}</span></span>` +
          `<span>H:<span class="ci-h">${d.high?.toFixed(4)}</span></span>` +
          `<span>L:<span class="ci-l">${d.low?.toFixed(4)}</span></span>` +
          `<span>C:<span class="ci-c">${d.close?.toFixed(4)}</span></span>`;
      } else if (d.value !== undefined) {
        el.innerHTML = `<span>Цена:<span class="ci-c">${d.value?.toFixed(4)}</span></span>`;
      }
    });

    if (this._resizeObserver) {
      this._resizeObserver.disconnect();
      this._resizeObserver = null;
    }

    // Resize observer (RAF-throttled)
    let _raf = null;
    this._resizeObserver = new ResizeObserver(() => {
      if (_raf) return;
      _raf = requestAnimationFrame(() => {
        _raf = null;
        if (this._chart && container.clientWidth > 0)
          this._chart.resize(container.clientWidth, container.clientHeight);
      });
    });
    this._resizeObserver.observe(container);
  },

  _parseCandles(candles) {
    const isLine = this._type === 'line';
    return candles.map(c => {
      let t;
      try { t = Math.floor(new Date(c.time).getTime() / 1000); }
      catch(e) { return null; }
      if (!t || isNaN(t)) return null;
      if (isLine) return { time: t, value: c.c || c.close };
      return { time: t, open: c.o||c.open, high: c.h||c.high, low: c.l||c.low, close: c.c||c.close };
    }).filter(Boolean).sort((a, b) => a.time - b.time)
      .filter((c, i, arr) => i === 0 || c.time !== arr[i-1].time); // dedup
  },

  // Called on new WS tick
  onTick(sym, src, val, ts) {
    if (sym !== this._sym || src !== this._src) return;
    if (!this._series || !this._chart) return;
    try {
      const n = Number(ts || Date.now());
      const t = n > 1000000000000 ? Math.floor(n / 1000) : Math.floor(n);
      if (this._type === 'line') {
        try { this._series.update({ time: t, value: val }); } catch(ex) {}
      } else if (!this._candles.length) {
        // No history loaded yet, but the series created for 'candle' type is
        // a candlestick series — it cannot accept a line-shaped {time,value}
        // point (that previously threw inside the chart library on every
        // tick, which is why the chart stayed empty). Seed a proper one-tick
        // candle instead, and record it in _candles so the next tick falls
        // through to the normal bucket-aggregation branch below.
        try {
          this._series.update({ time: t, open: val, high: val, low: val, close: val });
          this._candles.push({
            time: new Date(t * 1000).toISOString(),
            o: val, h: val, l: val, c: val
          });
        } catch(ex) {}
      } else {
        // Update last candle close (approximation without real OHLC from WS)
        if (this._candles.length) {
          const last = this._candles[this._candles.length - 1];
          const lastTs = Math.floor(new Date(last.time).getTime() / 1000);
          if (t >= lastTs) {

            const tfSecMap = {
              '5s':5,'1min':60,'5min':300,'15min':900,
              '30min':1800,'1h':3600,'4h':14400,'1d':86400
            };

            const tfSec = tfSecMap[this._tf] || 300;

            const lastBucket = Math.floor(lastTs / tfSec) * tfSec;
            const currentBucket = Math.floor(t / tfSec) * tfSec;

            if (currentBucket > lastBucket) {

              const candleTime = Math.floor(t / tfSec) * tfSec;

              const newBar = {
                time: candleTime,
                open: val,
                high: val,
                low: val,
                close: val
              };

              this._series.update(newBar);

              this._candles.push({
                time: new Date(candleTime * 1000).toISOString(),
                o: val, h: val, l: val, c: val
              });

            } else {

              const updated = {
                time: lastTs,
                open: last.o || last.open,
                high: Math.max(last.h || last.high, val),
                low: Math.min(last.l || last.low, val),
                close: val
              };

              this._series.update(updated);

              last.close = val;
              last.c = val;

              const hi = Math.max(last.h || last.high, val);
              const lo = Math.min(last.l || last.low, val);

              last.high = hi;
              last.h = hi;
              last.low = lo;
              last.l = lo;
            }
          }
        }
      }
    } catch(e) {}
  },

  setTF(tf) {
    if (tf === this._tf) return;
    LWChart.load(this._sym, this._src, tf, this._type);
    document.querySelectorAll('.tf-btn').forEach(b => {
      b.classList.toggle('active', b.dataset.tf === tf);
    });
  },

  setType(type) {
    if (type === this._type) return;
    LWChart.load(this._sym, this._src, this._tf, type);
    document.querySelectorAll('.chart-type-btn').forEach(b => {
      b.classList.toggle('active', b.dataset.type === type);
    });
  },

  fitContent() { this._chart?.timeScale().fitContent(); },
  resetZoom()  { this._chart?.timeScale().resetTimeScale(); },

  _showLoading(show) {
    const el = document.getElementById('chartLoading');
    if (el) el.style.display = show ? 'flex' : 'none';
  },

  // Purely informational — never affects data flow or chart logic. Lets the
  // user know WHY a chart looks sparse: the backend has no history file for
  // this instrument, so what's shown (if anything) is built from live ticks
  // accumulated since the app connected, not real historical candles.
  _updateNoHistoryBadge() {
    const el = document.getElementById('chartNoHistory');
    if (!el) return;
    if (this._historyAvailable) {
      el.style.display = 'none';
      return;
    }
    if (this._candles.length) {
      el.textContent = '⚠ История недоступна для ' + this._sym + ' — график строится из live-тиков, накопленных с момента подключения';
    } else {
      el.textContent = '⌛ Нет истории и пока нет тиков по ' + this._sym + ' — ждём данные от WebSocket...';
    }
    el.style.display = 'block';
  },
};


//////////////////////////////////////////////////////
// SPREAD CHART  (dual-price + spread%, synchronized)
//////////////////////////////////////////////////////

const SpreadChart = {
  _pair:    null,
  _tf:      '5min',
  _topChart: null,
  _botChart: null,
  _fvPctChart: null,   // отдельная третья панель (НЕ серия внутри _botChart)
  _serA:    null,
  _serB:    null,
  _serSpd:  null,
  _serFV: null,
  _serFvPct: null,     // FV% = Spread% − FairValue%, золотая линия в третьей панели
  _alertPriceLines: null, // [priceLineHandle] — горизонтальные линии активных алертов на _serFvPct

  // ── Fair Value (FV) state — futures-only carry-cost overlay ───────────────
  // Expiry is sourced exclusively from MT5 via InstrumentSpecStore — never
  // from a manual date input, hardcoded dictionary, or ticker parsing.
  _fvEnabled:   false,
  _fvRate:      21.00,
  _fvAvailable: false,
  _expiryDate:  null,   // Date | null — derived from InstrumentSpecStore
  _fvFutLeg:    null,   // 'A' | 'B' | null — which leg of the pair is the futures contract

  // FV% (новый осциллятор) включается СВОЕЙ кнопкой, независимо от _fvEnabled.
  // Использует те же данные, что и FV-линия (_lastFvLine) и спред (_lastSpdData) —
  // никакого нового fetch/хранилища, см. _recalcFvPercentSeries().
  _fvPctEnabled: false,
  _lastFvLine:   null,  // [{time, value:fairValuePct}] — кэш FV-линии, обновляется
                          // НЕЗАВИСИМО от _fvEnabled, чтобы FV% не зависел от FV-кнопки

  // ── Этап 7: top chart display mode ─────────────────────────────────────
  // PRICE: adjustedPrice values (rawPrice*lot*contractSize) — same source
  // as the table, per the "перевести график на цены с учетом лотности" ТЗ.
  // NORMALIZED: each series rebased so its first point = 100, for comparing
  // instruments of very different price magnitudes. This is purely a
  // display rebase on top of adjustedPrice — it does not change spread/FV math.
  _priceMode: 'PRICE',

  // ── Unified time-bucket map (PROBLEM #1 + #2) ──────────────────────────────
  // All series MUST plot on the same time grid. Each bucket holds the latest
  // known price for A and B; spread is derived from one bucket only — never
  // from mismatched per-series timestamps.
  TF_SEC: { '5s':5, '1min':60, '5min':300, '15min':900, '30min':1800, '1h':3600, '4h':14400, '1d':86400 },
  _buckets: {},     // bucket(sec) -> { a:number|null, b:number|null }
  _lastBucket: 0,   // last bucket time written to any series (monotonic gate)

  _bucketOf(ts) {
    const sec = (ts && ts > 1e12) ? ts / 1000 : (ts || Date.now() / 1000);
    const tfSec = this.TF_SEC[this._tf] || 300;
    return Math.floor(sec / tfSec) * tfSec;
  },

  // ── Fair Value: availability + carry-cost calculation ─────────────────────
  // Availability check uses ONLY InstrumentSpecStore (MT5-sourced data) —
  // no ticker-pattern regex, no hardcoded futures dictionary. A pair is
  // FV-eligible if either leg has a known days_to_expiry from MT5.
  _updateFvAvailability(pair) {
    InstrumentSpecStore.get(pair.symA); // fire-and-forget refresh (TTL-gated)
    InstrumentSpecStore.get(pair.symB);
    const specA = InstrumentSpecStore.peek(pair.symA);
    const specB = InstrumentSpecStore.peek(pair.symB);
    const aIsFut = specA && specA.days_to_expiry != null;
    const bIsFut = specB && specB.days_to_expiry != null;
    const spec = aIsFut ? specA : (bIsFut ? specB : null);

    this._fvAvailable = !!spec;
    this._expiryDate  = (spec && spec.expiry) ? new Date(spec.expiry.replace(' ', 'T') + 'Z') : null;
    // Which leg IS the futures contract — needed to know which side to
    // theoretically re-price (Step 2-4 of the spec) rather than scaling
    // the already-computed spread%.
    this._fvFutLeg = aIsFut ? 'A' : (bIsFut ? 'B' : null);
  },

  // ── Fair Value — carry-cost model computed from RAW PRICES, never from
  // an already-computed spread% (per spec's Critical Error #2). ─────────────
  //
  // For each point in time independently (per spec's Critical Error #1 — T
  // must use that point's own timestamp, not Date.now() applied to the
  // whole series):
  //   1. spot  = price of the non-futures leg at this point
  //   2. fut   = price of the futures leg at this point
  //   3. T     = (expiryDate - pointTime) / 365   ← uses the POINT's time
  //   4. theoreticalFuture = spot * (1 + rate * T)
  //   5. fvSpreadPct = (theoreticalFuture / spot - 1) * 100
  //              = rate * T * 100   (algebraically — but kept explicit
  //                below so the model is easy to swap to exp(rate*T) later)
  //
  // Note: theoreticalFuture/spot - 1 does not depend on which leg is A or
  // B in the ratio sense — it's the carry premium of the synthetic futures
  // price over spot, expressed on the same %-scale as the real A/B spread.
  _calcFvPctAt(spotPrice, pointTimeSec) {
    if (!this._fvAvailable || !this._expiryDate || spotPrice == null || spotPrice === 0) return null;
    const pointMs = pointTimeSec * 1000;
    const daysToExpiry = Math.max(0, (this._expiryDate.getTime() - pointMs) / 86400000);
    const T = daysToExpiry / 365;
    if (T <= 0) return 0; // FV → Spot at/after expiry → premium converges to 0, meeting the real spread
    const rate = Math.max(0, Math.min(100, Number(this._fvRate) || 0)) / 100;
    return parseFloat((Engine.calcFairValueAt(
      spotPrice,
      this._fvRate,
      this._expiryDate,
      pointMs
    ) || 0).toFixed(4));
  },

  // Full recompute of the FV line from RAW A/B price series (not from spread%).
  // setData() only — series itself is never recreated (rate change, toggle,
  // TF/pair change all funnel through here).
  //
  // Этап 11: расчёт самой линии (fvLine) больше НЕ зависит от _fvEnabled —
  // он зависит только от наличия данных (_fvAvailable/_fvFutLeg/lineA/lineB).
  // _fvEnabled остаётся ЕДИНСТВЕННО видимостью FV-линии (через applyOptions
  // в toggleFV()) — поведение FV-линии на экране НЕ меняется. Развязка нужна,
  // потому что FV% (новый осциллятор) обязан работать независимо от кнопки
  // FV и должен получать fairValuePct даже когда FV-линия выключена.
  _recalcFvSeries(lineA, lineB) {
    if (!this._serFV && !this._serFvPct) return;
    const canCompute = this._fvAvailable && this._fvFutLeg && lineA && lineB && lineA.length;
    if (!canCompute) {
      if (this._serFV) this._serFV.setData([]);
      this._lastFvLine = [];
      this._recalcFvPercentSeries();
      return;
    }
    // lineA/lineB carry adjustedPrice (same source as the spread chart and
    // the table — Engine.calcPositionValue). FV's "spot" must come from
    // this same source per the updated ТЗ: rawPrice → adjustedPrice →
    // spread → FV is one pipeline, not two parallel ones.
    const spotLine = this._fvFutLeg === 'A' ? lineB : lineA;
    const fvLine = spotLine.map(p => {
      const fv = this._calcFvPctAt(p.value, p.time);
      return fv == null ? null : { time: p.time, value: fv };
    }).filter(Boolean);
    if (this._serFV) this._serFV.setData(fvLine);
    this._lastFvLine = fvLine;
    this._recalcFvPercentSeries();
  },

  // ── FV% oscillator = Spread% − FairValue% ────────────────────────────────
  // Чистая производная от двух уже существующих рядов: this._lastSpdData
  // (тот же спред%, что рисует средняя панель) и this._lastFvLine (только
  // что посчитанная выше FairValue%, по той же carry-cost модели, что и
  // FV-линия). Никакого нового fetch, нового хранилища или дублирования
  // истории — ровно то число, что уже показано в шапке как "Δ FV", только
  // по всей истории, а не одной живой точкой.
  _recalcFvPercentSeries() {
    if (!this._serFvPct) {
      Logger.info('[FV%] _recalcFvPercentSeries: серии ещё нет (_serFvPct=null), пропуск');
      return;
    }
    if (!this._fvAvailable || !this._lastSpdData || !this._lastFvLine ||
        !this._lastSpdData.length || !this._lastFvLine.length) {
      Logger.info(`[FV%] _recalcFvPercentSeries: очищаю (fvAvailable=${this._fvAvailable}, spdData=${this._lastSpdData?.length ?? 'null'}, fvLine=${this._lastFvLine?.length ?? 'null'})`);
      this._serFvPct.setData([]);
      return;
    }
    const fvMap = {};
    this._lastFvLine.forEach(p => { fvMap[p.time] = p.value; });
    const line = this._lastSpdData
      .filter(p => fvMap[p.time] != null)
      .map(p => ({ time: p.time, value: parseFloat((p.value - fvMap[p.time]).toFixed(4)) }));
    this._serFvPct.setData(line);
    Logger.info(`[FV%] _recalcFvPercentSeries: записал ${line.length} точек в серию`);
  },

  // ── Этап 7: PRICE / NORMALIZED display transform for the top chart ───────
  // PRICE mode: pass through unchanged. NORMALIZED: rebase so first point = 100.
  // This NEVER touches lots, spread, or FV — purely a display transform on
  // whatever raw line is handed in.
  _applyPriceMode(line) {
    if (this._priceMode !== 'NORMALIZED' || !line.length) return line;
    const first = line[0].value;
    if (!first) return line;
    return line.map(p => ({ time: p.time, value: parseFloat((p.value / first * 100).toFixed(4)) }));
  },

  setPriceMode(mode) {
    if (mode !== 'PRICE' && mode !== 'NORMALIZED') return;
    this._priceMode = mode;
    if (!this._displayBaseLineA || !this._displayBaseLineB) return;
    const displayA = this._applyPriceMode(this._displayBaseLineA);
    const displayB = this._applyPriceMode(this._displayBaseLineB);
    if (this._serA) this._serA.setData(displayA);
    if (this._serB) this._serB.setData(displayB);
    // Toggle button active state directly — never re-render the whole
    // toolbar/view here, that would call SpreadChart.load() again and
    // recreate the chart (forbidden: chart must only ever use setData()/update()).
    document.querySelectorAll('#spreadTfBar .tf-btn').forEach(b => {
      if (b.textContent === 'PRICE') b.classList.toggle('active', mode === 'PRICE');
      if (b.textContent === 'NORM')  b.classList.toggle('active', mode === 'NORMALIZED');
    });
  },

  toggleFV() {
    if (!this._fvAvailable) return;
    this._fvEnabled = !this._fvEnabled;
    if (this._serFV) this._serFV.applyOptions({ visible: this._fvEnabled });
    this._recalcFvSeries(this._lastLineA || [], this._lastLineB || []);
    const btn = document.getElementById('fvToggleBtn');
    if (btn) btn.classList.toggle('active', this._fvEnabled);
  },

  // ── FV% toggle — полностью независим от toggleFV() выше ──────────────────
  // Меняет только состояние и видимую высоту строки. Всё остальное (когда
  // создать чарт, когда его уничтожить, когда сделать resize) — единолично
  // решает ResizeObserver, подключённый в _build() (см. _setupChartResize()
  // и _onFvPctSizeChange() ниже). Раньше это было разбросано по трём местам
  // и завязано на requestAnimationFrame-угадывание "прошло ли уже достаточно
  // кадров для layout" — ResizeObserver не угадывает, а получает от браузера
  // гарантированно актуальный размер в момент его фактического изменения.
  toggleFVPercent() {
    if (!this._fvAvailable) {
      Logger.warn('[FV%] клик игнорирован: _fvAvailable=false (для этой пары нет фьючерса)');
      return;
    }
    this._fvPctEnabled = !this._fvPctEnabled;
    Logger.info(`[FV%] клик -> _fvPctEnabled=${this._fvPctEnabled}`);

    const botRowEl   = document.getElementById('scBot');
    const fvPctRowEl = document.getElementById('scFvPctRow');
    Logger.info(`[FV%] DOM: #scBot найден=${!!botRowEl}, #scFvPctRow найден=${!!fvPctRowEl}`);

    const botFlex   = this._fvPctEnabled ? '0 0 28%' : '0 0 35%';
    const fvPctFlex = this._fvPctEnabled ? '0 0 22%' : '0 0 0%';
    if (botRowEl)   botRowEl.style.flex   = botFlex;
    if (fvPctRowEl) fvPctRowEl.style.flex = fvPctFlex;
    Logger.info(`[FV%] flex выставлен: #scBot="${botFlex}" #scFvPctRow="${fvPctFlex}"`);

    // Диагностика: что реально получилось после установки flex (если тут
    // высота 0 — браузер ещё не отразил стиль в layout СИНХРОННО на этой
    // строке; ResizeObserver обязан поймать итоговый размер чуть позже —
    // следующие строки лога это покажут).
    const fvPctRowMeasured = fvPctRowEl ? fvPctRowEl.clientHeight : 'нет узла';
    Logger.info(`[FV%] #scFvPctRow.clientHeight сразу после установки flex = ${fvPctRowMeasured}`);

    const btn = document.getElementById('fvPctToggleBtn');
    if (btn) btn.classList.toggle('active', this._fvPctEnabled);
    Logger.info(`[FV%] кнопка найдена=${!!btn}, класс active обновлён`);
  },


  setFvRate(val) {
    const rate = Math.max(0, Math.min(100, parseFloat(val)));
    this._fvRate = Number.isFinite(rate) ? rate : this._fvRate;
    this._recalcFvSeries(this._lastLineA || [], this._lastLineB || []);
  },

  // ── Batched update queue (PROBLEM #3 + #4) ─────────────────────────────────
  // A single rAF-scheduled flush updates seriesA, seriesB and spread together,
  // so the browser paints one consistent frame instead of three separate ones.
  
  MAX_POINTS: 5000,
  _trimArray(arr){ if(arr && arr.length > this.MAX_POINTS) arr.shift(); },_pending: null,   // { bucket, a, b } awaiting flush
  _rafQueued: false,

  _queueUpdate(bucket, a, b) {
    this._pending = { bucket, a, b };
    if (this._rafQueued) return;
    this._rafQueued = true;
    requestAnimationFrame(() => {
      this._rafQueued = false;
      this._flush();
    });
  },

  _flush() {
    const p = this._pending;
    if (!p || p.bucket < this._lastBucket) { this._pending = null; return; }
    this._lastBucket = p.bucket;

    const specA = InstrumentSpecStore.peek(this._pair?.symA);
    const specB = InstrumentSpecStore.peek(this._pair?.symB);
    const csA = specA?.contract_size || 1;
    const csB = specB?.contract_size || 1;
    const lotA = Number(this._pair?.lotA) || 1;
    const lotB = Number(this._pair?.lotB) || 1;

    if (p.a != null && this._serA) {
      // adjustedPrice feeds the SERIES itself — this drives the right-side
      // price scale and the line position on the chart, not just the text
      // legend. Feeding raw price here (as before) made the right scale and
      // line disagree with the table even though the legend text looked right.
      const adjA = Engine.calcPositionValue(p.a, lotA, csA);
      try { this._serA.update({ time: p.bucket, value: adjA }); } catch(e) {}
      const e = document.getElementById('scValA');
      if (e) e.textContent = Math.abs(adjA)>=100 ? adjA.toFixed(2) : adjA.toFixed(4);
      this._lastSpdA = p.a;
    }
    if (p.b != null && this._serB) {
      const adjB = Engine.calcPositionValue(p.b, lotB, csB);
      try { this._serB.update({ time: p.bucket, value: adjB }); } catch(e) {}
      const e = document.getElementById('scValB');
      if (e) e.textContent = Math.abs(adjB)>=100 ? adjB.toFixed(2) : adjB.toFixed(4);
      this._lastSpdB = p.b;
    }
    // Spread updates on EVERY bucket (same time grid as A/B), falling back to
    // the last known value on whichever side didn't tick this round —
    // otherwise spread accumulates fewer points than A/B and visually drifts
    // shorter/behind the top chart.
    const a = p.a != null ? p.a : this._lastSpdA;
    const b = p.b != null ? p.b : this._lastSpdB;
    if (a != null && b != null && b !== 0 && this._serSpd) {
      // Этап 8/10 fix: spread must use positionValue (price*lot), the SAME
      // formula as the table — not a raw price ratio. Using two different
      // spread formulas (raw-price here vs positionValue in the table) was
      // exactly the root cause of the 2.95% vs 102834% discrepancy.
      const lotA = Number(this._pair?.lotA) || 1;
      const lotB = Number(this._pair?.lotB) || 1;
      const specA = InstrumentSpecStore.peek(this._pair?.symA);
      const specB = InstrumentSpecStore.peek(this._pair?.symB);
      const csA = specA?.contract_size || 1;
      const csB = specB?.contract_size || 1;
      const valueA = Engine.calcPositionValue(a, lotA, csA);
      const valueB = Engine.calcPositionValue(b, lotB, csB);
      const spdVal = parseFloat((Engine.calcSpreadPct(valueA, valueB) ?? 0).toFixed(4));
      try { this._serSpd.update({ time: p.bucket, value: spdVal }); } catch(e) {}
      const e = document.getElementById('scValSpread');
      if (e) e.textContent = (spdVal >= 0 ? '+' : '') + spdVal.toFixed(3) + '%';

      if (this._fvAvailable && this._fvFutLeg && (this._serFV || this._serFvPct)) {
        // Spot must be adjustedPrice here too — the historical FV path
        // (_recalcFvSeries) now reads spot from lineA/lineB which carry
        // adjustedPrice. Using raw price here would create a discontinuity
        // exactly at the seam between historical and live data.
        const adjA = Engine.calcPositionValue(a, lotA, csA);
        const adjB = Engine.calcPositionValue(b, lotB, csB);
        const spotNow = this._fvFutLeg === 'A' ? adjB : adjA;
        const fvVal = this._calcFvPctAt(spotNow, p.bucket);

        // Этап 11: fvVal считается всегда (когда FV доступен), независимо
        // от _fvEnabled — FV% обязан получать fairValuePct даже когда
        // FV-линия выключена. Сама FV-линия (._serFV.update) и кэш
        // _lastLineA/_lastLineB остаются ровно как были — поведение
        // FV-линии на экране не меняется.
        if (fvVal != null && this._fvEnabled && this._serFV) {
          try { this._serFV.update({ time: p.bucket, value: fvVal }); } catch(e) {}
          // Keep cached adjustedPrice lines in sync too, so a subsequent rate
          // change recalculates from the latest tick instead of stale history.
          if (this._lastLineA && this._lastLineA.length) {
            const lastA = this._lastLineA[this._lastLineA.length - 1];
            if (lastA && lastA.time === p.bucket) lastA.value = adjA; else { this._lastLineA.push({ time: p.bucket, value: adjA }); this._trimArray(this._lastLineA); }
          }
          if (this._lastLineB && this._lastLineB.length) {
            const lastB = this._lastLineB[this._lastLineB.length - 1];
            if (lastB && lastB.time === p.bucket) lastB.value = adjB; else { this._lastLineB.push({ time: p.bucket, value: adjB }); this._trimArray(this._lastLineB); }
          }
        }

        if (fvVal != null) {
          // Кэш FV-линии обновляется ВСЕГДА (не только когда FV включён) —
          // именно это даёт FV% независимость от кнопки FV.
          if (this._lastFvLine && this._lastFvLine.length) {
            const lastFv = this._lastFvLine[this._lastFvLine.length - 1];
            if (lastFv && lastFv.time === p.bucket) lastFv.value = fvVal;
            else { this._lastFvLine.push({ time: p.bucket, value: fvVal }); this._trimArray(this._lastFvLine); }
          }
          // FV% = Spread% − FairValue%, из spdVal (уже посчитан выше той же
          // формулой, что и таблица) и fvVal (только что посчитан) — без
          // нового источника данных.
          if (this._fvPctEnabled && this._serFvPct) {
            const fvPctVal = parseFloat((spdVal - fvVal).toFixed(4));
            try { this._serFvPct.update({ time: p.bucket, value: fvPctVal }); } catch(e) {}
          }
        }
      }
      if (this._lastSpdData && this._lastSpdData.length) {
        const lastCached = this._lastSpdData[this._lastSpdData.length - 1];
        if (lastCached && lastCached.time === p.bucket) lastCached.value = spdVal;
        else this._lastSpdData.push({ time: p.bucket, value: spdVal });
      }
    }
    this._pending = null;
  },

  setTF(tf) {
    this._tf = tf;
    document.querySelectorAll('#spreadTfBar .tf-btn').forEach(b =>
      b.classList.toggle('active', b.dataset.tf === tf)
    );
    if (this._pair) this.load(this._pair);
  },

  async load(pair) {
    this._pair = pair;
    this._buckets = {};
    this._lastBucket = 0;
    this._pending = null;
    this._lastSpdA = null;
    this._lastSpdB = null;
    this._lastSpdData = null;
    this._lastLineA = null;
    this._lastLineB = null;
    this._lastFvLine = null;
    this._displayBaseLineA = null;
    this._displayBaseLineB = null;
    this._setLoading(true);
    this._destroy();

    try {
      const [dataARaw, dataBRaw] = await Promise.all([
        this._fetch(pair.symA, pair.sourceA),
        this._fetch(pair.symB, pair.sourceB),
      ]);

      // Track real backend availability PER LEG before falling back —
      // either leg can independently lack a history file on the backend
      // (e.g. ALFA may have no CSV for one instrument while MOEX has full
      // history for the other). TickBuffer already holds up to 300 recent
      // raw ticks per symbol regardless of which chart is open, so use it
      // to render something for the missing leg instead of a silent
      // flat-zero spread followed by a sudden jump once realtime ticks
      // start arriving.
      this._historyAvailableA = !!(dataARaw && dataARaw.length);
      this._historyAvailableB = !!(dataBRaw && dataBRaw.length);
      const dataA = this._historyAvailableA ? dataARaw : this._synthesizeFromTicks(pair.symA, pair.sourceA);
      const dataB = this._historyAvailableB ? dataBRaw : this._synthesizeFromTicks(pair.symB, pair.sourceB);

      const topEl = document.getElementById('scTopChart');
      if (!topEl) return; // tab changed while fetching

      await this._waitForLayout(topEl);
      if (!document.getElementById('scTopChart')) return; // tab changed during wait

      this._build(pair, dataA, dataB);
      this._updateNoHistoryBadge(pair);
    } catch (e) {
      Logger.error('[SpreadChart] ' + e.message);
      const el = document.getElementById('scTopChart');
      if (el) el.innerHTML = '<div class="empty-view" style="padding:20px">Ошибка: ' + e.message + '</div>';
    } finally {
      this._setLoading(false);
    }
  },

  // One-shot wait until element has real layout (handles tab being hidden/animating in)
  _waitForLayout(el) {
    if (el.clientHeight > 0 && el.clientWidth > 0) return Promise.resolve();
    return new Promise(resolve => {
      const ro = new ResizeObserver(() => {
        if (el.clientHeight > 0 && el.clientWidth > 0) { ro.disconnect(); resolve(); }
      });
      ro.observe(el);
      // Hard cap so a permanently-hidden tab can't hang the loader forever
      setTimeout(() => { ro.disconnect(); resolve(); }, 1500);
    });
  },

  async _fetch(sym, src) {
    try {
      const s = (src||'').toLowerCase();
      let url;
      if (s === 'binance') {
        url = `https://api.arbiview.pro/binance/candles?symbol=${encodeURIComponent(sym)}&tf=${this._tf}`;
      } else {
        const srcP = s.startsWith('moex') ? 'moex-fut' : 'alfa';
        // Same resolver step LWChart.load() already applies (GAZP -> #GAZP,
        // YDEX -> #YDEX for MOEX). Without it, a MOEX leg's history request
        // goes out under the raw ticker, which has no matching file on the
        // backend even when the resolved symbol's history clearly exists.
        const historySym = SymbolResolver.historySymbol(sym, src);
        url = `https://api.arbiview.pro/candles?symbol=${encodeURIComponent(historySym)}&source=${srcP}&tf=${this._tf}`;
      }
      const res = await fetch(url);
      const d   = await res.json();
      return (d.ok && Array.isArray(d.candles)) ? d.candles : [];
    } catch(e) { return []; }
  },

  // Builds candle-shaped points (same {time, c} shape _fetch() would return
  // from the backend) out of TickBuffer — the already-existing rolling
  // buffer of recent raw ticks, filled unconditionally for every symbol
  // regardless of which chart is open. Used only when the backend genuinely
  // has no history file for this leg, so _toLine()/_alignToCommonGrid() can
  // process the result exactly as if it came from the API.
  _synthesizeFromTicks(sym, src) {
    const ticks = TickBuffer.get(sym, src);
    if (!ticks.length) return [];
    const tfSec = this.TF_SEC[this._tf] || 300;
    const buckets = {};
    const order = [];
    for (const tk of ticks) {
      const bt = Math.floor(Math.floor(tk.t / 1000) / tfSec) * tfSec;
      if (!buckets[bt]) order.push(bt);
      buckets[bt] = tk.v; // last tick in the bucket wins (close)
    }
    return order.sort((a, b) => a - b).map(bt => ({
      time: new Date(bt * 1000).toISOString(),
      c: buckets[bt],
    }));
  },

  // Purely informational — never affects data flow or spread calculation.
  // Lets the user know WHEN one (or both) legs have no real backend history,
  // so a chart that looks sparse or only shows one moving line is understood
  // as a backend data gap, not a broken pair.
  _updateNoHistoryBadge(pair) {
    const el = document.getElementById('spreadNoHistory');
    if (!el) return;
    const missing = [];
    if (!this._historyAvailableA) missing.push(pair.symA);
    if (!this._historyAvailableB) missing.push(pair.symB);
    if (!missing.length) {
      el.style.display = 'none';
      return;
    }
    el.textContent = '⚠ История недоступна: ' + missing.join(', ') + ' — строится из live-тиков';
    el.style.display = 'block';
  },

  // Raw candles -> {time: bucket, value} on the bucket grid. Deduplicated and
  // sorted, but NOT yet aligned across A/B — alignment happens in
  // _alignToCommonGrid(), which is the single place series length can diverge.
  _toLine(candles) {
    const tfSec = this.TF_SEC[this._tf] || 300;
    return candles.map(c => {
      let raw;
      try { raw = new Date(c.time).getTime() / 1000; } catch(e) { return null; }
      if (!raw || isNaN(raw)) return null;
      const bucket = Math.floor(raw / tfSec) * tfSec;
      return { time: bucket, value: c.c || c.close || 0 };
    }).filter(Boolean)
      .sort((a, b) => a.time - b.time)
      .filter((p, i, arr) => i === 0 || p.time !== arr[i-1].time);
  },

  // ── Single source of bucket-set truth for A, B and Spread ─────────────────
  // Builds ONE bucket-time array (the union of every bucket present in either
  // raw A or raw B series), then forward/back-fills both A and B onto that
  // exact same grid. This is the only place that may cause length to diverge,
  // and it structurally cannot: every output array has the same .length and
  // the same .time at every index, by construction.
  // Этап 8: спред на графике строится из positionValue (price*lot), той же
  // формулой что и таблица (Engine.calcSpreadPct) — единый источник истины,
  // лот участвует ТОЛЬКО здесь, не в lineA/lineB которые остаются raw price
  // (Этап 6: верхний график — исключительно rawPriceA/rawPriceB, без лотов).
  _alignToCommonGrid(rawA, rawB, lotA, lotB) {
    const mapA = {}; rawA.forEach(p => { mapA[p.time] = p.value; });
    const mapB = {}; rawB.forEach(p => { mapB[p.time] = p.value; });

    const allTimes = Array.from(new Set([...rawA.map(p=>p.time), ...rawB.map(p=>p.time)])).sort((a,b)=>a-b);

    const firstA = rawA.length ? rawA[0].value : null;
    const firstB = rawB.length ? rawB[0].value : null;

    const specA = InstrumentSpecStore.peek(this._pair?.symA);
    const specB = InstrumentSpecStore.peek(this._pair?.symB);
    const csA = specA?.contract_size || 1;
    const csB = specB?.contract_size || 1;

    let lastA = null, lastB = null;
    const lineA = [], lineB = [], spdData = [];

    for (const t of allTimes) {
      if (mapA[t] != null) lastA = mapA[t];
      if (mapB[t] != null) lastB = mapB[t];
      const rawAv = lastA != null ? lastA : firstA;
      const rawBv = lastB != null ? lastB : firstB;

      // adjustedPrice = rawPrice * lot * contractSize — SAME formula and
      // SAME inputs the table uses (Engine.calcPositionValue). lineA/lineB
      // now carry adjustedPrice, not rawPrice: per the new ТЗ, the top
      // chart, legend, and right-side scale must match the table exactly.
      //
      // Edge case: if one leg has NO data at all (not even a fallback first
      // value — e.g. its history file is missing AND no realtime ticks have
      // arrived yet), don't let that silently blank out the OTHER leg too.
      // The leg with data still gets its line; only the spread (which
      // genuinely needs both sides) is skipped for those buckets.
      if (rawAv != null) lineA.push({ time: t, value: Engine.calcPositionValue(rawAv, lotA, csA) });
      if (rawBv != null) lineB.push({ time: t, value: Engine.calcPositionValue(rawBv, lotB, csB) });

      if (rawAv == null || rawBv == null) continue;

      const adjA = Engine.calcPositionValue(rawAv, lotA, csA);
      const adjB = Engine.calcPositionValue(rawBv, lotB, csB);

      // Spread uses the SAME adjustedPrice values just computed above — one
      // calculation feeds both the visible series and the spread, eliminating
      // any chance of the two using different numbers.
      const spreadPct = Engine.calcSpreadPct(adjA, adjB);
      spdData.push({ time: t, value: spreadPct != null ? spreadPct : 0 });
    }
    return { lineA, lineB, spdData };
  },

  _chartOpts(secondsVisible) {
    return {
      layout: {
        background: { type: 'solid', color: '#0b0f17' },
        textColor: '#5d6e8a', fontSize: 11,
        fontFamily: "'Inter',system-ui,sans-serif",
      },
      grid: {
        vertLines: { color: 'rgba(255,255,255,.04)' },
        horzLines: { color: 'rgba(255,255,255,.04)' },
      },
      crosshair: {
        mode: LightweightCharts.CrosshairMode.Normal,
        vertLine: { color: '#374151', style: 1, width: 1, labelBackgroundColor: '#1f2937' },
        horzLine: { color: '#374151', style: 1, width: 1, labelBackgroundColor: '#1f2937' },
      },
      rightPriceScale: { borderColor: 'rgba(255,255,255,.08)', scaleMargins: { top: 0.08, bottom: 0.08 } },
      timeScale: { borderColor: 'rgba(255,255,255,.08)', timeVisible: true, secondsVisible },
      handleScroll: { mouseWheel: true, pressedMouseMove: true, horzTouchDrag: true },
      handleScale:  { mouseWheel: true, pinch: true, axisPressedMouseMove: { time: true, price: true } },
    };
  },

  // createChart()/addXSeries() called ONLY here — never from onTick (PROBLEM #5)
  _build(pair, dataA, dataB) {
    const topEl = document.getElementById('scTopChart');
    const botEl = document.getElementById('scBotChart');
    if (!topEl || !botEl) return;

    if (!window.LightweightCharts) {
      topEl.innerHTML = '<div class="empty-view" style="padding:20px">lightweight-charts не загрузился (проверь сеть/CDN)</div>';
      return;
    }

    const secVis = this._tf === '5s' || this._tf === '1min';
    const opts   = this._chartOpts(secVis);

    // ── Top chart: A (red) + B (blue), single right price scale ───────────
    // ТЗ п.1/2: ровно ОДНА системная правая шкала ('right'), обе серии
    // садятся на неё через priceScaleId:'right'. Два разных кастомных
    // scaleId ('A','B') создавали два независимых scale-объекта — каждый
    // со своим autoScale/range, что и вызывало overlay-поведение и
    // отсутствие полноценной видимой оси, даже когда оба были визуально
    // 'position: right'. Левая шкала отключена явно.
    this._topChart = LightweightCharts.createChart(topEl, {
      ...opts,
      width: topEl.clientWidth, height: topEl.clientHeight || 250,
      rightPriceScale: {
        visible: true,
        borderVisible: true,
        autoScale: true,
        scaleMargins: { top: 0.10, bottom: 0.10 },
      },
      leftPriceScale: { visible: false },
      handleScale: {
        axisPressedMouseMove: true,
        mouseWheel: true,
        pinch: true,
      },
    });

    // ТЗ п.4: диагностика — если priceScale('right') не существует,
    // причина найдена прямо здесь.
    console.log('RIGHT SCALE', this._topChart.priceScale('right'));

    this._serA = this._topChart.addLineSeries({
      color: '#ef4444', lineWidth: 1.8, priceLineVisible: false,
      lastValueVisible: true, title: pair.symA,
      priceScaleId: 'right',
    });
    this._serB = this._topChart.addLineSeries({
      color: '#3b82f6', lineWidth: 1.8, priceLineVisible: false,
      lastValueVisible: true, title: pair.symB,
      priceScaleId: 'right',
    });

    // ТЗ п.4: явное autoScale на единственной правой шкале после создания серий.
    this._topChart.priceScale('right').applyOptions({ autoScale: true });

    // ── CHECK 1/2/3: build ONE common bucket-set for A, B and Spread ──────
    // This is the single place series data is constructed. By forward/back-
    // filling both sides onto the union of their bucket-times, lineA.length,
    // lineB.length and spdData.length are equal by construction — there is
    // no code path left that can make one of them shorter than the others.
    const rawA = this._toLine(dataA);
    const rawB = this._toLine(dataB);
    const lotA = Number(pair.lotA) || 1;
    const lotB = Number(pair.lotB) || 1;
    const { lineA, lineB, spdData } = this._alignToCommonGrid(rawA, rawB, lotA, lotB);

    // lineA/lineB now carry adjustedPrice (rawPrice*lot*contractSize) per the
    // updated ТЗ — cached here so PRICE/NORMALIZED display toggling (Этап 7)
    // doesn't need to refetch/recompute.
    this._displayBaseLineA = lineA;
    this._displayBaseLineB = lineB;
    const displayA = this._applyPriceMode(lineA);
    const displayB = this._applyPriceMode(lineB);
    if (displayA.length) this._serA.setData(displayA);
    if (displayB.length) this._serB.setData(displayB);

    // ── Bottom chart: spread % (identical bucket grid as top, by construction) ──
    this._botChart = LightweightCharts.createChart(botEl, {
      ...opts,
      width: botEl.clientWidth,
      height: botEl.clientHeight || 130,
      timeScale: { ...opts.timeScale, visible: true },
      
    });

    this._serSpd = this._botChart.addAreaSeries({
      lineColor: '#63b3ed', topColor: 'rgba(99,179,237,.15)',
      bottomColor: 'rgba(99,179,237,.01)', lineWidth: 1.6,
      priceLineVisible: false, crosshairMarkerVisible: true,
    });
    this._serSpd.createPriceLine({ price: 0, color: 'rgba(255,255,255,.15)', lineWidth: 1, lineStyle: 2, axisLabelVisible: true, title: '0' });
    if (spdData.length) this._serSpd.setData(spdData);

    // ── Fair Value series — created once here, never recreated on rate/TF change ──
    // Expiry comes ONLY from MT5 via InstrumentSpecStore.peek() — no ticker
    // parsing, no hardcoded dictionary. Whichever leg has a known
    // days_to_expiry from MT5 makes FV available for this pair.
    this._updateFvAvailability(pair);
    this._serFV = this._botChart.addLineSeries({
      color: '#FFD400', lineWidth: 2, lineStyle: LightweightCharts.LineStyle.Solid,
      priceLineVisible: false, lastValueVisible: true, title: 'FV',
      visible: this._fvEnabled && this._fvAvailable,
    });

    // lastLineA/B/lastSpdData must be populated BEFORE _recalcFvSeries() runs
    // below, since it cascades into _recalcFvPercentSeries() which reads
    // this._lastSpdData directly. _serFvPct doesn't exist yet at this point
    // (created lazily by the ResizeObserver below, once its container has a
    // real size) — _recalcFvPercentSeries() no-ops safely when it's null, so
    // this call here only populates _lastFvLine.
    this._lastLineA = lineA;
    this._lastLineB = lineB;
    this._lastSpdData = spdData;
    this._recalcFvSeries(lineA, lineB);

    // CHECK 1: required assert — must never fire given _alignToCommonGrid above.
    if (lineA.length !== lineB.length || lineA.length !== spdData.length) {
      console.warn('SpreadChart DATA DESYNC', lineA.length, lineB.length, spdData.length);
    }
    console.log('A points', lineA.length, 'B points', lineB.length, 'SPD points', spdData.length);
    console.log('A last', lineA.at(-1)?.time, 'B last', lineB.at(-1)?.time, 'SPD last', spdData.at(-1)?.time);

    // ── CHECK 4: exactly ONE timescale sync mechanism ──────────────────────
    // Initial fitContent on top only, then a single bidirectional
    // subscribeVisibleLogicalRangeChange handles every subsequent zoom/scroll
    // in both directions. No other fitContent/setVisibleLogicalRange/
    // scrollToPosition calls exist anywhere else in this module.
    this._topChart.timeScale().fitContent();
    const initialRange = this._topChart.timeScale().getVisibleLogicalRange();
    if (initialRange) {
      try { this._botChart.timeScale().setVisibleLogicalRange(initialRange); } catch(e) {}
    }
    // slave timescale sync — top↔bot only here; top↔fvPct/bot↔fvPct edges
    // are wired inside _createFvPctChart(), since that chart doesn't exist
    // until the ResizeObserver below sees its container get a real size.
    this._syncCharts(this._topChart, this._botChart);
    this._syncCharts(this._botChart, this._topChart);

    // Diagnostics disabled: range differences during initial layout are normal.

    // ── Update legend on crosshair move ────────────────
    this._topChart.subscribeCrosshairMove(param => {
      if (!param.time || !param.seriesData) return;
      const vA = param.seriesData.get(this._serA);
      const vB = param.seriesData.get(this._serB);
      const eA = document.getElementById('scValA');
      const eB = document.getElementById('scValB');
      if (eA && vA) eA.textContent = (Math.abs(vA.value)>=100?vA.value.toFixed(2):vA.value.toFixed(4));
      if (eB && vB) eB.textContent = (Math.abs(vB.value)>=100?vB.value.toFixed(2):vB.value.toFixed(4));
    });
    this._botChart.subscribeCrosshairMove(param => {
      if (!param.time || !param.seriesData) return;
      const v = param.seriesData.get(this._serSpd);
      const e = document.getElementById('scValSpread');
      if (e && v) e.textContent = (v.value>=0?'+':'')+v.value.toFixed(3)+'%';
    });

    // Seed bucket map + last-written bucket from loaded history
    this._buckets = {};
    lineA.forEach(p => { this._buckets[p.time] = this._buckets[p.time] || {}; this._buckets[p.time].a = p.value; });
    lineB.forEach(p => { this._buckets[p.time] = this._buckets[p.time] || {}; this._buckets[p.time].b = p.value; });
    const allBuckets = Object.keys(this._buckets).map(Number);
    this._lastBucket = allBuckets.length ? Math.max(...allBuckets) : 0;
    // Seed forward-fill values so spread can update on the very first live tick,
    // even if only one side (A or B) has ticked so far.
    this._lastSpdA = lineA.length ? lineA[lineA.length - 1].value : null;
    this._lastSpdB = lineB.length ? lineB[lineB.length - 1].value : null;

    // ── Единый ResizeObserver для всех трёх графиков ───────────────────────
    // Раньше resize top/bot/fvPct и lazy-создание fvPct-чарта были разбросаны
    // по _build()/toggleFVPercent()/отдельному helper'у и завязаны на
    // requestAnimationFrame-угадывание тайминга layout — это и не сработало
    // надёжно (см. историю правок). Заменено целиком: ResizeObserver — это
    // именно тот браузерный API, который сообщает АКТУАЛЬНЫЙ размер элемента
    // в момент его фактического изменения, без угадывания "сколько кадров
    // подождать". Один источник истины, один метод, ничего больше не трогает
    // resize/create/destroy логику графиков.
    this._setupChartResize(topEl, botEl);
  },

  // ── Единственное место, где решается: resize top/bot, и
  // создать/уничтожить/resize-нуть fvPct-чарт. Вызывается ResizeObserver'ом
  // при любом изменении размера контейнеров — будь то переключение FV%
  // (flex меняется), ресайз окна, или первичная отрисовка вкладки.
  _setupChartResize(topEl, botEl) {
    const fvPctEl = document.getElementById('scFvPctChart');
    Logger.info(`[FV%] _setupChartResize вызван: topEl=${!!topEl} botEl=${!!botEl} fvPctEl(#scFvPctChart)=${!!fvPctEl}`);

    // top/bot -> fvPct регистрируется ОДИН раз здесь (не в _createFvPctChart),
    // с динамическим геттером цели — см. комментарий в _syncCharts() выше про
    // утечку подписок и "Object is disposed".
    this._syncCharts(this._topChart, () => this._fvPctChart);
    this._syncCharts(this._botChart, () => this._fvPctChart);

    // createChart()/.remove() — тяжёлые DOM-операции. Выполнение их
    // СИНХРОННО внутри обработчика самого ResizeObserver может само
    // спровоцировать ещё один цикл резайза в том же кадре — браузер это
    // детектирует как "ResizeObserver loop completed with undelivered
    // notifications" и часть уведомлений не доставляет (отсюда и мусорные
    // w=0/h=0 сразу после успешного создания). Поэтому: ResizeObserver
    // только ЗАПОМИНАЕТ последний измеренный размер, а реакция
    // (создать/уничтожить/resize) выполняется на следующем кадре, уже вне
    // цикла уведомлений самого observer'а.
    let pendingFvPctSize = null;
    let fvPctRaf = null;
    const flushFvPctSize = () => {
      fvPctRaf = null;
      if (pendingFvPctSize === null) return;
      const { w, h } = pendingFvPctSize;
      pendingFvPctSize = null;
      Logger.info(`[FV%] flushFvPctSize: w=${w} h=${h} fvPctChart_exists=${!!this._fvPctChart} _fvPctEnabled=${this._fvPctEnabled}`);
      if (w > 0 && h > 0) {
        if (this._fvPctChart) {
          this._fvPctChart.resize(w, h);
          Logger.info('[FV%] resize() существующего чарта');
        } else if (this._fvPctEnabled) {
          Logger.info('[FV%] размер ненулевой и FV% включён -> создаю чарт');
          this._createFvPctChart(w, h);
        } else {
          Logger.info('[FV%] размер ненулевой, но _fvPctEnabled=false -> не создаю');
        }
      } else if (this._fvPctChart) {
        // Контейнер свёрнут (кнопка FV% выключена) — уничтожаем чарт, а
        // не просто скрываем. Lightweight Charts ненадёжно
        // восстанавливается после того, как его контейнер сжимался до
        // 0 высоты, даже если потом вызвать .resize() с правильными
        // размерами — поэтому при следующем включении он создаётся
        // заново (см. ветку выше), а не переиспользуется.
        Logger.info('[FV%] размер 0 -> уничтожаю существующий чарт');
        try { this._fvPctChart.remove(); } catch(e) { Logger.error('[FV%] ошибка при remove(): ' + e.message); }
        this._fvPctChart = null;
        this._serFvPct = null;
      } else {
        Logger.info('[FV%] размер 0, чарта и так нет -> ничего не делаю');
      }
    };

    const ro = new ResizeObserver(entries => {
      for (const entry of entries) {
        const w = Math.round(entry.contentRect.width);
        const h = Math.round(entry.contentRect.height);

        if (entry.target === topEl) {
          if (this._topChart && w > 0 && h > 0) this._topChart.resize(w, h);
          continue;
        }
        if (entry.target === botEl) {
          if (this._botChart && w > 0 && h > 0) this._botChart.resize(w, h);
          continue;
        }
        if (entry.target === fvPctEl) {
          const id = entry.target.id;
          Logger.info(`[FV%] ResizeObserver entry id=${id} w=${w} h=${h} fvPctChart_exists=${!!this._fvPctChart} _fvPctEnabled=${this._fvPctEnabled}`);
          pendingFvPctSize = { w, h };
          if (fvPctRaf == null) fvPctRaf = requestAnimationFrame(flushFvPctSize);
        }
      }
    });

    ro.observe(topEl);
    ro.observe(botEl);
    if (fvPctEl) ro.observe(fvPctEl);
    this._ro = ro;
  },

  // Создаёт чарт + серию третьей панели. Вызывается ИСКЛЮЧИТЕЛЬНО из
  // _setupChartResize() выше, и только когда наблюдаемый контейнер реально
  // имеет ненулевой размер — width/height сюда приходят прямо из
  // ResizeObserverEntry.contentRect, а не из повторного чтения
  // clientWidth/clientHeight (которое могло быть неактуальным).
  _createFvPctChart(width, height) {
    Logger.info(`[FV%] _createFvPctChart старт: width=${width} height=${height}`);
    const fvPctEl = document.getElementById('scFvPctChart');
    if (!fvPctEl) {
      Logger.error('[FV%] _createFvPctChart: #scFvPctChart не найден в DOM');
      return;
    }

    try {
      const secVis = this._tf === '5s' || this._tf === '1min';
      const opts = this._chartOpts(secVis);

      this._fvPctChart = LightweightCharts.createChart(fvPctEl, {
        ...opts,
        width, height,
        timeScale: { ...opts.timeScale, visible: true },
      });
      this._serFvPct = this._fvPctChart.addLineSeries({
        color: '#D4AF37', lineWidth: 2, lineStyle: LightweightCharts.LineStyle.Solid,
        priceLineVisible: false, lastValueVisible: true, title: 'FV%',
      });
      this._serFvPct.createPriceLine({ price: 0, color: 'rgba(255,255,255,.15)', lineWidth: 1, lineStyle: 2, axisLabelVisible: true, title: '0' });

      // Seed initial range from top. Top/bot -> fvPct sync edges are NOT
      // registered here — see _setupChartResize(), which registers them
      // ONCE per _build() lifecycle with a dynamic getter for the
      // destination. Registering them here (on every recreation of this
      // chart) was the actual bug: each toggle on/off cycle added a NEW
      // subscribeVisibleLogicalRangeChange listener onto the long-lived
      // topChart/botChart objects, but old listeners (closing over the
      // now-disposed previous _fvPctChart) were never removed — every
      // subsequent top/bot range change fired ALL of them, including the
      // stale ones, throwing "Object is disposed" inside lightweight-charts.
      // The reverse direction (fvPct -> top/bot) is safe to register here:
      // it lives ON this chart instance, so it's disposed together with it,
      // never outliving its own object.
      if (this._topChart) {
        const range = this._topChart.timeScale().getVisibleLogicalRange();
        if (range) { try { this._fvPctChart.timeScale().setVisibleLogicalRange(range); } catch(e) {} }
        this._syncCharts(this._fvPctChart, this._topChart);
      }
      if (this._botChart) {
        this._syncCharts(this._fvPctChart, this._botChart);
      }

      this._fvPctChart.subscribeCrosshairMove(param => {
        if (!param.time || !param.seriesData) return;
        const v = param.seriesData.get(this._serFvPct);
        const e = document.getElementById('scValFvPct');
        if (e && v) e.textContent = (v.value>=0?'+':'')+v.value.toFixed(3)+'%';
      });

      // Данные уже посчитаны (_lastSpdData/_lastFvLine поддерживаются живыми
      // независимо от состояния тумблера) — просто отрисовываем их теперь,
      // когда серия появилась.
      this._recalcFvPercentSeries();
      this._renderAlertLines();
      Logger.info('[FV%] _createFvPctChart: чарт и серия успешно созданы');
    } catch (e) {
      Logger.error('[FV%] _createFvPctChart выбросил исключение: ' + e.message);
    }
  },

  // ── Алерты: горизонтальные линии уровней FV% на нижнем графике ────────
  // Только визуализация уже существующих в AlertStore алертов для текущей
  // пары — никакой проверки пересечения здесь (она фоновая, в
  // PairCalculationStore.updatePair). Перерисовывается целиком при создании
  // чарта и при добавлении/удалении алерта — НЕ на каждый тик.
  _renderAlertLines() {
    if (!this._serFvPct || !this._pair) return;
    if (this._alertPriceLines) {
      this._alertPriceLines.forEach(h => { try { this._serFvPct.removePriceLine(h); } catch(e) {} });
    }
    this._alertPriceLines = [];
    const alerts = AlertStore.getForPair(this._pair.id).filter(a => a.status === 'active');
    alerts.forEach(a => {
      try {
        const h = this._serFvPct.createPriceLine({
          price: a.level, color: '#f59e0b', lineWidth: 1,
          lineStyle: LightweightCharts.LineStyle.Dashed,
          axisLabelVisible: true, title: '🔔',
        });
        this._alertPriceLines.push(h);
      } catch(e) {}
    });
  },

  // ── CHECK 4: the ONLY timescale sync mechanism in this module ─────────────
  // Этап 11: было boolean-мьютекс на двоих (top↔bot). Для трёх графиков
  // (top↔bot↔fvPct) общий boolean ломает fan-out: если top меняется и сразу
  // должен толкнуть И bot, И fvPct, второй подписчик увидел бы _syncing===true,
  // выставленный первым, и тихо не сработал бы. Меняем мьютекс на Set,
  // помечающий КОНКРЕТНЫЙ чарт как "сейчас программно обновляется" — это
  // гасит только обратное эхо в сам этот чарт, но не блокирует независимые
  // обновления его соседей от того же исходного события. Сама механика
  // (subscribeVisibleLogicalRangeChange → rAF → setVisibleLogicalRange)
  // не изменилась — это тот же механизм, просто без искусственного потолка
  // в два чарта.
  //
  // dst может быть объектом чарта (статичная цель — topChart/botChart живут
  // весь жизненный цикл _build() без пересоздания) ИЛИ функцией-геттером
  // (динамическая цель — нужна для fvPctChart, который многократно
  // создаётся/уничтожается за время жизни top/bot: если бы dst замыкался
  // на конкретный объект в момент регистрации, при пересоздании fvPct
  // пришлось бы регистрировать НОВУЮ подписку на topChart/botChart, а
  // старая (на уже задиспозенный чарт) осталась бы висеть навсегда и
  // бросала "Object is disposed" при каждом следующем range-change).
  // Геттер всегда возвращает АКТУАЛЬНОЕ значение на момент срабатывания.
  _syncing: new Set(),
  _syncCharts(src, dst) {
    src.timeScale().subscribeVisibleLogicalRangeChange(range => {
      const resolvedDst = (typeof dst === 'function') ? dst() : dst;
      if (this._syncing.has(src) || !range || !resolvedDst) return;
      this._syncing.add(resolvedDst);
      requestAnimationFrame(() => {
        try { resolvedDst.timeScale().setVisibleLogicalRange({ from: range.from, to: range.to }); }
        catch(e) {}
        this._syncing.delete(resolvedDst);
      });
    });
  },

  // Realtime tick entry point — writes into the bucket map, then queues ONE
  // batched flush for A+B+spread together (PROBLEM #1, #2, #3, #4).
  // Never calls createChart/addSeries here — only series.update() (PROBLEM #5).
  onTick(sym, src, val, ts) {
    if (!this._pair) return;
    const bucket = this._bucketOf(ts);
    if (bucket < this._lastBucket) return; // stale tick, ignore

    if (!this._buckets[bucket]) this._buckets[bucket] = {};
    if (sym === this._pair.symA) this._buckets[bucket].a = val;
    if (sym === this._pair.symB) this._buckets[bucket].b = val;

    const cur = this._buckets[bucket];
    if (sym !== this._pair.symA && sym !== this._pair.symB) return;
    this._queueUpdate(bucket, cur.a ?? null, cur.b ?? null);
  },

  _destroy() {
    if (this._ro) { try { this._ro.disconnect(); } catch(e) {} this._ro = null; }
    if (this._topChart) { try { this._topChart.remove(); } catch(e) {} this._topChart = null; }
    if (this._botChart) { try { this._botChart.remove(); } catch(e) {} this._botChart = null; }
    if (this._fvPctChart) { try { this._fvPctChart.remove(); } catch(e) {} this._fvPctChart = null; }
    this._serA = this._serB = this._serSpd = this._serFV = this._serFvPct = null;
    this._alertPriceLines = null; // handle'ы принадлежали удалённой серии — переиспользовать их нельзя
    this._pending = null;
  },

  _setLoading(show) {
    ['scTopLoading','scBotLoading'].forEach(id => {
      const el = document.getElementById(id);
      if (el) el.style.display = show ? 'flex' : 'none';
    });
  },
};

//////////////////////////////////////////////////////
// MODAL  (instrument picker)
//////////////////////////////////////////////////////

const Modal = {
  _gid:      null,
  _selected: null,
  _binanceLoaded: false,
  _binanceLoading: false,

  open(gid) {
    this._gid = gid;
    this._selected = null;
    const g = GROUPS_DEF.find(x => x.id === gid);
    document.getElementById('modalTitle').textContent = 'Добавить в ' + (g?.label || gid);
    document.getElementById('modalSearch').value = '';
    document.getElementById('modalSelectedLabel').textContent = '';
    document.getElementById('modalConfirm').disabled = true;
    document.getElementById('modalOverlay').classList.remove('hidden');

    if (gid === 'BINANCE' && !this._binanceLoaded) {
      this._loadBinanceSymbols();
    }

    this._render('');
    setTimeout(() => document.getElementById('modalSearch').focus(), 50);
  },

  // Pull the FULL live symbol list from Binance via the server proxy.
  // This is per-session (not persisted) — every user gets the real exchange list,
  // independent of any other user's saved watchlist.
  async _loadBinanceSymbols() {
    if (this._binanceLoading) return;
    this._binanceLoading = true;
    const el = document.getElementById('modalList');
    if (el) el.innerHTML = '<div class="modal-empty">⏳ Загрузка списка с Binance...</div>';
    try {
      const res  = await fetch('https://api.arbiview.pro/binance/exchangeInfo?market=futures');
      const data = await res.json();
      if (data.ok && Array.isArray(data.symbols)) {
        const usdtPerp = data.symbols.filter(s =>
          s.quoteAsset === 'USDT' && s.status === 'TRADING' &&
          (s.contractType === 'PERPETUAL' || !s.contractType)
        );
        // Remove any previously injected BINANCE entries, then add fresh ones
        const nonBinance = InstrumentRegistry.filter(x => x.source !== 'BINANCE');
        const fresh = usdtPerp.map(s => ({ symbol: s.symbol, source: 'BINANCE' }));
        InstrumentRegistry.length = 0;
        InstrumentRegistry.push(...nonBinance, ...fresh);
        this._binanceLoaded = true;
        Logger.info('[Binance] загружено инструментов: ' + fresh.length);
      } else {
        Logger.warn('[Binance] не удалось загрузить список: ' + (data.error||'нет данных'));
      }
    } catch(e) {
      Logger.warn('[Binance] ошибка загрузки списка: ' + e.message);
    }
    this._binanceLoading = false;
    if (this._gid === 'BINANCE') this._render(document.getElementById('modalSearch')?.value || '');
  },

  close() {
    document.getElementById('modalOverlay').classList.add('hidden');
    this._gid = null;
    this._selected = null;
  },

  search(query) {
    this._render(query);
  },

  _render(query) {
    const el = document.getElementById('modalList');
    const g = GROUPS_DEF.find(x => x.id === this._gid);
    const q = query.trim().toUpperCase();

    // BINANCE works on a subscribe-on-demand model — a symbol only starts
    // arriving in MarketStore AFTER you add it, so the catalog has to come
    // from InstrumentRegistry (the exchange's full symbol list).
    //
    // MOEX / ALFA are pushed by the backend unconditionally — MarketStore
    // already holds exactly the instruments that are actually arriving.
    // Building the list from MarketStore (the single source of truth for
    // market data) instead of the static InstrumentRegistry guarantees this
    // list never shows a ticker that has no real incoming quote — no more
    // "—" placeholders for instruments the backend never sends.
    let items;
    if (this._gid === 'BINANCE') {
      items = InstrumentRegistry.filter(x => x.source === 'BINANCE');
    } else {
      items = MarketStore.flat;
      if (g) items = items.filter(x => g.srcMatch(x.source));
    }
    if (q) items = items.filter(x => x.symbol.toUpperCase().includes(q));
    items = [...items].sort((a, b) => a.symbol.localeCompare(b.symbol));

    // Show every matching instrument — no truncation. The list only ever
    // contains symbols that are actually arriving (MOEX/ALFA) or the full
    // exchange catalog (Binance), so a cap would just hide real data.
    const shown = items;

    if (!shown.length) {
      if (!q && this._gid !== 'BINANCE') {
        el.innerHTML = '<div class="modal-empty">Пока нет входящих котировок' + (g ? ' для ' + g.label : '') + '. Ждём данные от WebSocket...</div>';
      } else {
        el.innerHTML = '<div class="modal-empty">Ничего не найдено по запросу «' + (query||'') + '»</div>';
      }
      return;
    }

    // Already added to this group?
    const wl = State.watchlist[this._gid] || [];

    let html = shown.map(x => {
      const sel     = this._selected?.sym === x.symbol && this._selected?.src === x.source;
      const already = wl.some(w => w.sym === x.symbol && w.src === x.source);
      // Merge live data if available
      const live    = MarketStore.get(x.symbol, x.source);
      const chgCls  = live ? (live.change>0?' up':live.change<0?' dn':'') : '';
      const priceStr= live ? (Math.abs(live.last)>=100?live.last.toFixed(2):live.last.toFixed(4)) : '—';
      const chgStr  = live ? (live.change>=0?'+':'')+live.change.toFixed(2)+'%' : '';
      return `<div class="modal-item${sel?' selected':''}${already?' already':''}"
        onclick="${already?'':"Modal.select('"+x.symbol+"','"+x.source+"',this)"}"
        style="${already?'opacity:.4;cursor:default':''}">
        <span class="mi-sym">${x.symbol}</span>
        <span class="mi-src">${x.source}</span>
        <span class="mi-price">${priceStr}</span>
        <span class="mi-chg${chgCls}">${chgStr}</span>
        ${already?'<span style="font-size:10px;color:#22c55e">✓</span>':''}
      </div>`;
    }).join('');

    el.innerHTML = html;
  },

  select(sym, src, el) {
    this._selected = { sym, src };
    document.querySelectorAll('.modal-item').forEach(e => e.classList.remove('selected'));
    el.classList.add('selected');
    document.getElementById('modalSelectedLabel').textContent = '✓ ' + sym + ' [' + src + ']';
    document.getElementById('modalConfirm').disabled = false;
  },

  confirm() {
    if (!this._selected || !this._gid) return;
    UI.addToGroup(this._gid, this._selected.sym, this._selected.src);
    this.close();
  },
};

// Close on Escape
document.addEventListener('keydown', e => { if (e.key === 'Escape') Modal.close(); });

//////////////////////////////////////////////////////
// V175 DIAGNOSTICS WIRING
// Subscribes to existing modules only. Every wrapped function still
// calls straight through to the original implementation and returns the
// original result unchanged — nothing here alters business logic, call
// order, or return values. This is purely an observation layer.
//////////////////////////////////////////////////////
(function(){

  // ---- BOOT: stores initialized (fires once, right when persisted
  // watchlist/pairs finish loading at the very start of Bootstrap) ----
  const _origStorageLoad = Storage.load.bind(Storage);
  Storage.load = function(...args){
    const r = _origStorageLoad(...args);
    DiagnosticsStore.log('BOOT', 'stores initialized');
    return r;
  };

  // ---- BOOT: render initialized (fires once, on the first Render.view) ----
  let _renderInitLogged = false;
  const _origRenderView = Render.view.bind(Render);
  Render.view = function(...args){
    const r = _origRenderView(...args);
    if (!_renderInitLogged){
      _renderInitLogged = true;
      DiagnosticsStore.log('BOOT', 'render initialized');
    }
    return r;
  };

  // ---- BOOT + WS: connection lifecycle ----
  let _wsStartLogged = false;
  const _origStreamConnect = Stream.connect.bind(Stream);
  Stream.connect = function(...args){
    if (!_wsStartLogged){
      _wsStartLogged = true;
      DiagnosticsStore.log('BOOT', 'ws connect start');
    }
    DiagnosticsStore.log('WS', 'connecting');
    const r = _origStreamConnect(...args);
    try{
      const ws = Stream.ws;
      if (ws && !ws.__diagWrapped){
        ws.__diagWrapped = true;
        const _onopen = ws.onopen;
        ws.onopen = function(){
          DiagnosticsStore.log('WS', 'connected');
          if (_onopen) return _onopen();
        };
        const _onclose = ws.onclose;
        ws.onclose = function(){
          DiagnosticsStore.log('WS', 'disconnected');
          DiagnosticsStore.log('WS', 'reconnect scheduled');
          if (_onclose) return _onclose();
        };
        const _onmessage = ws.onmessage;
        ws.onmessage = function(ev){
          try{
            const msg = JSON.parse(ev.data);
            if (msg && msg.type === 'snapshot') DiagnosticsStore.log('WS', 'snapshot received', { count: (msg.quotes||[]).length });
            else if (msg && msg.type === 'quotes') DiagnosticsStore.log('WS', 'quotes received', { count: (msg.quotes||[]).length });
          }catch(e){}
          if (_onmessage) return _onmessage(ev);
        };
      }
    }catch(e){}
    return r;
  };

  // ---- HISTORY: request / loaded / error / empty result / cache hit / cache miss ----
  const _origHistoryLoad = HistoryStore.load.bind(HistoryStore);
  HistoryStore.load = async function(sym, src, tf, loader){
    const key = [sym, src, tf].join('|');
    const wasCached = !!this._cache[key];
    DiagnosticsStore.log('HISTORY', 'request', { sym, src, tf });
    DiagnosticsStore.log('HISTORY', wasCached ? 'cache hit' : 'cache miss', { sym, src, tf });
    try{
      const data = await _origHistoryLoad(sym, src, tf, loader);
      if (data && data.ok && Array.isArray(data.candles) && data.candles.length){
        DiagnosticsStore.log('HISTORY', 'loaded', { sym, src, tf, count: data.candles.length });
      } else {
        DiagnosticsStore.log('HISTORY', 'empty result', { sym, src, tf, error: (data && data.error) || null });
      }
      return data;
    }catch(e){
      DiagnosticsStore.log('HISTORY', 'error', { sym, src, tf, message: (e && e.message) || String(e) });
      throw e;
    }
  };

  // ---- RESOLVER ----
  const _origResolve = SymbolResolver.historySymbol.bind(SymbolResolver);
  SymbolResolver.historySymbol = function(sym, src){
    const result = _origResolve(sym, src);
    if (result !== sym) DiagnosticsStore.log('RESOLVER', sym+' -> '+result);
    return result;
  };

  // ---- LWCHART ----
  const _origLWLoad = LWChart.load.bind(LWChart);
  LWChart.load = async function(sym, src, tf, type){
    DiagnosticsStore.log('LWCHART', 'load start', { sym, src, tf });
    const r = await _origLWLoad(sym, src, tf, type);
    DiagnosticsStore.log('LWCHART', 'candles loaded', { sym, src, count: (LWChart._candles && LWChart._candles.length) || 0 });
    return r;
  };

  const _lwLastVal = {};
  const _origLWTick = LWChart.onTick.bind(LWChart);
  LWChart.onTick = function(sym, src, val, ts){
    const r = _origLWTick(sym, src, val, ts);
    if (sym === LWChart._sym && src === LWChart._src){
      const k = sym+'|'+src;
      if (_lwLastVal[k] !== val){
        _lwLastVal[k] = val;
        DiagnosticsStore.log('LWCHART', 'update', { sym, src, val });
      }
    }
    return r;
  };

  // ---- SPREAD ----
  let _lastPairId;
  WorkspaceStore.subscribe(function(ws){
    const p = ws.activePair;
    const id = p ? p.id : null;
    if (id !== _lastPairId){
      _lastPairId = id;
      if (p) DiagnosticsStore.log('SPREAD', 'pair selected', { id: p.id, symA: p.symA, symB: p.symB });
    }
  });

  const _origSpreadLoad = SpreadChart.load.bind(SpreadChart);
  SpreadChart.load = async function(pair){
    const r = await _origSpreadLoad(pair);
    DiagnosticsStore.log('SPREAD', 'history loaded', { symA: pair && pair.symA, symB: pair && pair.symB });
    return r;
  };

  const _spdLastVal = {};
  const _origSpreadTick = SpreadChart.onTick.bind(SpreadChart);
  SpreadChart.onTick = function(sym, src, val, ts){
    const r = _origSpreadTick(sym, src, val, ts);
    const pr = SpreadChart._pair;
    if (pr && (sym === pr.symA || sym === pr.symB)){
      const k = sym+'|'+src;
      if (_spdLastVal[k] !== val){
        _spdLastVal[k] = val;
        DiagnosticsStore.log('SPREAD', 'realtime tick', { sym, src, val });
      }
    }
    return r;
  };

  // ---- PAIR ENGINE ----
  const _pairLastSpread = {};
  const _origCalcPair = Engine.calcPair.bind(Engine);
  Engine.calcPair = function(pair, qA, qB, specA, specB){
    const result = _origCalcPair(pair, qA, qB, specA, specB);
    const id = pair && pair.id;
    const prev = _pairLastSpread[id];
    if (prev === undefined || prev !== result.spreadPct){
      _pairLastSpread[id] = result.spreadPct;
      DiagnosticsStore.log('PAIR', 'calc pair', { id, symA: pair && pair.symA, symB: pair && pair.symB });
      if (result.spreadPct != null) DiagnosticsStore.log('PAIR', 'spread value', { id, spreadPct: result.spreadPct });
    }
    return result;
  };

})();

//////////////////////////////////////////////////////
// 8. BOOTSTRAP
//////////////////////////////////////////////////////

Storage.load();
AuthStore.load();
UserStore.load();
Logger.info('Spread Terminal v1.30.3');

Stream.connect();
Render.view();
Render.quotesPanel();
Render.pairsPanel();
UI.setSidePanel('quotes'); // выставляет активную иконку и видимость видов боковой панели
Render.updateAlertBadge(); // если остались несмотренные сработавшие алерты с прошлой сессии
// Resubscribe Binance symbols from saved watchlist
setTimeout(() => {
  const bwl = State.watchlist['BINANCE'] || [];
  bwl.forEach(x => {
    fetch('https://api.arbiview.pro/binance/subscribe?symbol=' + encodeURIComponent(x.sym))
      .catch(() => {});
  });
  if (bwl.length) Logger.info('[Binance] восстановлено подписок: ' + bwl.length);
}, 1000);
// Refresh pairs panel and spread values every 2s (not on every tick)
setInterval(() => {
  if (State.activeTab !== 'logs') Render.pairsPanel();
}, 2000);

// Allow InstrumentSpecStore TTL-based refetches to actually happen —
// without this, Engine._specFetchedFor would permanently block any
// refetch after the very first successful one per symbol.
setInterval(() => { Engine._specFetchedFor = {}; }, InstrumentSpecStore.TTL_MS);

</script>

<!-- ── Modal: Add instrument ── -->
<div class="modal-overlay hidden" id="modalOverlay" onclick="if(event.target===this)Modal.close()">
  <div class="modal">
    <div class="modal-header">
      <span class="modal-title" id="modalTitle">Добавить инструмент</span>
      <button class="modal-close" onclick="Modal.close()">✕</button>
    </div>
    <div class="modal-search-wrap">
      <input class="modal-search" id="modalSearch" placeholder="Поиск по тикеру..."
        oninput="Modal.search(this.value)" autocomplete="off" spellcheck="false">
    </div>
    <div class="modal-list" id="modalList"></div>
    <div class="modal-footer">
      <span class="modal-selected-label" id="modalSelectedLabel"></span>
      <button class="btn-cancel" onclick="Modal.close()">Отмена</button>
      <button class="btn-confirm" id="modalConfirm" onclick="Modal.confirm()" disabled>Добавить</button>
    </div>
  </div>
</div>


<script>
// ================= V1.10 STABLE CHART CORE =================

window.ChartCore = {
  queue: [],
  locked: false,
  frame: null,
  logEnabled: true,

  log(...args){
    if(this.logEnabled){
      console.log("[ChartCore]", ...args);
    }
  },

  push(fn, label="update"){
    this.queue.push({fn, label});
    this.schedule();
  },

  schedule(){
    if(this.locked) return;

    this.locked = true;

    requestAnimationFrame(() => {
      const batch = this.queue.splice(0);

      this.log("FRAME START", batch.length);

      for(const item of batch){
        try{
          this.log("RUN:", item.label);
          item.fn();
        }catch(e){
          console.error("[ChartCore ERROR]", e);
        }
      }

      this.log("FRAME END");

      this.locked = false;

      if(this.queue.length > 0){
        this.schedule();
      }
    });
  }
};

function safeChartUpdate(fn, label){
  ChartCore.push(fn, label);
}

// auto-hook after load (non intrusive)
window.addEventListener("load", () => {

  if(window.LWChart){
    const old = window.LWChart.update;
    window.LWChart.update = function(...args){
      return safeChartUpdate(()=>old.apply(this,args), "LWChart");
    };
  }

  if(window.SpreadChart){
    const old = window.SpreadChart.update;
    window.SpreadChart.update = function(...args){
      return safeChartUpdate(()=>old.apply(this,args), "SpreadChart");
    };
  }

  if(window.Render){
    const old = window.Render.update;
    window.Render.update = function(...args){
      return safeChartUpdate(()=>old.apply(this,args), "Render");
    };
  }

});

</script>


<script>
// ================= V1.11 FULL TICK ENGINE FIX =================

// 1. GLOBAL TICK ENGINE (single source of truth for all updates)
window.TickEngine = {
  buffer: [],
  lastFlush: 0,
  interval: 50, // ms throttle

  push(tick){
    this.buffer.push(tick);
    this.schedule();
  },

  schedule(){
    const now = performance.now();
    if(now - this.lastFlush < this.interval) return;

    requestAnimationFrame(() => this.flush());
  },

  flush(){
    if(this.buffer.length === 0) return;

    const batch = this.buffer.splice(0);
    this.lastFlush = performance.now();

    // SINGLE DISPATCH POINT
    try {
      if(window.onTickBatch){
        window.onTickBatch(batch);
      }
    } catch(e){
      console.error("[TickEngine ERROR]", e);
    }
  }
};

// 2. SAFE GLOBAL BATCH HANDLER (NO UI CHANGE)
window.onTickBatch = function(batch){

  // IMPORTANT: everything goes through ONE frame

  for(const tick of batch){

    // SAFE guards (no direct stream coupling)
    if(window.MarketStore){
      try { MarketStore.set?.(tick); } catch(e){}
    }

    // CHART UPDATES MUST BE CONTROLLED (no direct spam)
    if(window.ChartCore){
      ChartCore.push(() => {
        if(window.LWChart?.update) LWChart.update(tick);
      }, "LWChart");

      ChartCore.push(() => {
        if(window.SpreadChart?.update) SpreadChart.update(tick);
      }, "SpreadChart");

      ChartCore.push(() => {
        if(window.Render?.update) Render.update(tick);
      }, "Render");
    }
  }

  console.log("[TickEngine] batch size:", batch.length);
};

// 3. PATCH SAFE WS HOOK (non-breaking)
window.addEventListener("load", () => {

  // try to intercept global stream if exists
  if(window.Stream && window.Stream.start){
    console.log("[TickEngine] Stream detected");
  }

});

// 4. OPTIONAL DEBUG MODE
window.__TICK_DEBUG = true;

</script>


<script>
// ================= V1.12 DIFF ENGINE =================

// last state cache (prevents full redraw)
window.__LAST_TICKS__ = new Map();

// diff comparator
function isChanged(prev, next){
  if(!prev) return true;
  return prev.last !== next.last;
}

// override batch handler with diff logic
window.onTickBatch = function(batch){

  const filtered = [];

  for(const tick of batch){

    const key = tick.symbol + "|" + tick.source;
    const prev = window.__LAST_TICKS__.get(key);

    if(!isChanged(prev, tick)) continue;

    window.__LAST_TICKS__.set(key, tick);
    filtered.push(tick);
  }

  // if nothing changed → skip render completely
  if(filtered.length === 0){
    console.log("[DiffEngine] skip frame (no changes)");
    return;
  }

  console.log("[DiffEngine] changed ticks:", filtered.length);

  // ONLY changed data goes through pipeline
  for(const tick of filtered){

    if(window.MarketStore){
      try { MarketStore.set?.(tick); } catch(e){}
    }

    if(window.ChartCore){

      ChartCore.push(() => {
        if(window.LWChart?.update) LWChart.update(tick);
      }, "LWChart");

      ChartCore.push(() => {
        if(window.SpreadChart?.update) SpreadChart.update(tick);
      }, "SpreadChart");

      ChartCore.push(() => {
        if(window.Render?.update) Render.update(tick);
      }, "Render");
    }
  }
};

// debug hook
console.log("[V1.12 DiffEngine loaded]");

</script>


<div id="authModal" class="modal-overlay hidden">
  <div class="modal" style="width:420px">
    <div class="modal-header">
      <div class="modal-title">Вход через Telegram</div>
      <button class="modal-close" onclick="AuthModal.close()">×</button>
    </div>
    <div id="authModalBody" style="padding:20px;text-align:center"></div>
  </div>
</div>

<script>
// ── AUTH MODAL ──────────────────────────────────────────────────────────
// Единственное место в UI, отвечающее за экран входа. Все сетевые вызовы —
// только через AuthApi (никаких прямых fetch здесь). Источник состояния —
// AuthStore/UserStore; этот модуль их не хранит, только читает/обновляет.
const AuthModal = {
  _pollTimer: null,
  _pollToken: null,
  _pollStartedAt: null,
  POLL_INTERVAL_MS: 1000,
  // Защитный таймаут поллинга — в ТЗ не указан явно, но без него забытое
  // открытое окно (пользователь не закрыл и не подтвердил вход) крутило бы
  // setInterval бесконечно. 10 минут — разумный запас для сканирования QR.
  POLL_TIMEOUT_MS: 10 * 60 * 1000,

  async open(){
    const overlay = document.getElementById('authModal');
    const body = document.getElementById('authModalBody');
    if (!overlay || !body) return;

    this._stopPolling();
    overlay.classList.remove('hidden');
    body.innerHTML = `
      <div style="font-size:42px;margin-bottom:12px">🔐</div>
      <div style="color:#9fb0c8;font-size:13px">Создание сессии...</div>`;

    let session;
    try {
      session = await AuthApi.createSession();
    } catch(e) {
      Logger.error('[AUTH] createSession упал: ' + e.message);
      this._renderError(body);
      return;
    }

    if (!session || !session.token || !session.telegram_url) {
      Logger.error('[AUTH] createSession вернул некорректный ответ');
      this._renderError(body);
      return;
    }

    this._renderQr(body, session.telegram_url);
    this._startPolling(session.token);
  },

  close(){
    document.getElementById('authModal')?.classList.add('hidden');
    this._stopPolling();
  },

  _renderQr(body, telegramUrl){
    const qrSrc = 'https://api.qrserver.com/v1/create-qr-code/?size=220x220&data=' + encodeURIComponent(telegramUrl);
    body.innerHTML = `
      <div style="margin-bottom:14px;color:#9fb0c8;font-size:13px">Откройте Telegram<br>и подтвердите вход.</div>
      <img src="${qrSrc}" width="220" height="220" style="border-radius:8px;background:#fff;padding:8px" alt="QR код для входа">
      <div style="margin-top:14px">
        <a href="${telegramUrl}" target="_blank" rel="noopener" style="color:#6ea8ff;font-size:12px;text-decoration:none">Открыть в Telegram →</a>
      </div>
      <div id="authModalStatus" style="margin-top:12px;font-size:11px;color:#374151">Ожидание подтверждения в Telegram...</div>`;
  },

  _renderError(body){
    body.innerHTML = `
      <div style="font-size:42px;margin-bottom:12px">⚠️</div>
      <div style="color:#9fb0c8;font-size:13px;margin-bottom:14px">Не удалось создать сессию входа. Проверьте соединение.</div>
      <button onclick="AuthModal.open()" class="btn-confirm">Повторить</button>`;
  },

  _startPolling(token){
    this._pollToken = token;
    this._pollStartedAt = Date.now();
    this._pollTimer = setInterval(() => this._checkStatus(token), this.POLL_INTERVAL_MS);
  },

  _stopPolling(){
    if (this._pollTimer) { clearInterval(this._pollTimer); this._pollTimer = null; }
    this._pollToken = null;
  },

  async _checkStatus(token){
    // Защита от гонки: модалка могла закрыться/токен смениться между
    // запуском тика и приходом ответа — в этом случае просто игнорируем.
    if (token !== this._pollToken) return;

    if (Date.now() - this._pollStartedAt > this.POLL_TIMEOUT_MS) {
      this._stopPolling();
      const status = document.getElementById('authModalStatus');
      if (status) status.textContent = 'Время ожидания истекло. Откройте окно заново.';
      return;
    }

    let r;
    try {
      r = await AuthApi.getStatus(token);
    } catch(e) {
      return; // временная сетевая ошибка — пропускаем тик, поллинг не останавливаем
    }

    if (token !== this._pollToken) return;

    if (r && r.status === 'approved') {
      this._stopPolling();
      await this._onApproved(token);
    }
    // status === 'pending' (или любой другой) — ничего не делаем, ждём следующий тик
  },

  async _onApproved(token){
    let me;
    try {
      me = await AuthApi.getMe(token);
    } catch(e) {
      Logger.error('[AUTH] getMe упал: ' + e.message);
      return;
    }
    if (!me || !me.user) {
      Logger.error('[AUTH] getMe вернул некорректный ответ после approved');
      return;
    }

    UserStore.setUser(me.user);
    AuthStore.setToken(token);
    Logger.info('[AUTH] вход выполнен: ' + (me.user.username || me.user.telegram_id || ''));

    this.refresh();
    this.close();
  },

  refresh(){
    const b = document.getElementById('loginBtn');
    if (!b) return;
    if (AuthStore.isAuthenticated()) {
      const u = UserStore.getUser();
      b.textContent = (u && (u.username || u.telegram_id)) || 'Аккаунт';
    } else {
      b.textContent = 'Login';
    }
  },

  // Один и тот же loginBtn используется и для входа, и для выхода — чтобы
  // не добавлять новый элемент в UI (запрещено менять UI без разрешения).
  // Не авторизован -> открыть окно входа. Авторизован -> подтвердить выход.
  handleLoginButtonClick(){
    if (AuthStore.isAuthenticated()) {
      if (confirm('Выйти из аккаунта?')) {
        AuthStore.logout();
        this.refresh();
        Logger.info('[AUTH] logout');
      }
    } else {
      this.open();
    }
  },
};

document.addEventListener('DOMContentLoaded',()=>{
 const b=document.getElementById('loginBtn');
 if(b)b.onclick=()=>AuthModal.handleLoginButtonClick();
 AuthModal.refresh();
});
</script>

</body>

</html>