Phase 3: Real-time enhancements

P3-1: Scan optimization — only BG↔HL (50+ pair combos → 2)
P3-2: Real-time spread chart — spreadHistory ring buffer +
      /api/spread-history endpoint + Chart.js spread chart
P3-3: Live position PnL — positions SSE now includes
      estimated current profit/loss + current spread
P3-4: Real-time trade events — trader.OnTradeEvent callback
      fires SSE 'trade_open' / 'trade_close' immediately
P3-5: Connection status monitoring — tracks last update time
      per exchange, broadcast via stats.connections + /api/connections

Frontend: spread chart card, PnL column in positions,
          connection status dots in stats bar,
          green/red border flash on trade events

web/static/index.html

@@ -29,25 +29,20 @@
         <div class="stat"><label>持平</label><span id="stat-flat" class="pct-gray">0</span></div>
         <div class="stat"><label>持仓</label><span id="stat-positions" class="pct-yellow">0</span></div>
         <div class="stat"><label>币种</label><span id="stat-coins" class="pct-blue">0</span></div>
+        <div class="stat" id="conn-stats"><label>连接</label><span id="conn-detail"></span></div>
       </div>
     </section>
 
     <!-- Price Table -->
     <section class="card" id="prices-card">
-      <h2>💰 实时价格</h2>
+      <h2>💰 实时价格 <span id="prices-age" class="text-dim" style="font-size:11px"></span></h2>
       <div class="table-wrap">
         <table id="price-table">
           <thead>
-            <tr>
-              <th>币种</th>
-              <th>Binance</th>
-              <th>HyperLiquid</th>
-              <th>Bitget</th>
-              <th>dYdX</th>
-            </tr>
+            <tr><th>币种</th><th>Binance</th><th>HyperLiquid</th><th>Bitget</th><th>dYdX</th><th>BG↔HL价差</th></tr>
           </thead>
           <tbody id="price-body">
-            <tr><td colspan="5" class="loading">等待数据...</td></tr>
+            <tr><td colspan="6" class="loading">等待数据...</td></tr>
           </tbody>
         </table>
       </div>
@@ -55,17 +50,11 @@
 
     <!-- Arbitrage Opportunities -->
     <section class="card" id="arb-card">
-      <h2>🎯 套利机会</h2>
+      <h2>🎯 套利机会 (BG↔HL)</h2>
       <div class="table-wrap">
         <table id="arb-table">
           <thead>
-            <tr>
-              <th>币种</th>
-              <th>方向</th>
-              <th>买价</th>
-              <th>卖价</th>
-              <th>净利%</th>
-            </tr>
+            <tr><th>币种</th><th>方向</th><th>买价</th><th>卖价</th><th>净利%</th></tr>
           </thead>
           <tbody id="arb-body">
             <tr><td colspan="5" class="loading">等待数据...</td></tr>
@@ -80,17 +69,10 @@
       <div class="table-wrap">
         <table id="positions-table">
           <thead>
-            <tr>
-              <th>币种</th>
-              <th>方向</th>
-              <th>规模</th>
-              <th>开仓价差</th>
-              <th>加仓</th>
-              <th>时长</th>
-            </tr>
+            <tr><th>币种</th><th>方向</th><th>规模</th><th>入价差</th><th>现价差</th><th>估盈亏</th><th>加仓</th><th>时长</th></tr>
           </thead>
           <tbody id="positions-body">
-            <tr><td colspan="6" class="loading">等待数据...</td></tr>
+            <tr><td colspan="8" class="loading">等待数据...</td></tr>
           </tbody>
         </table>
       </div>
@@ -108,22 +90,24 @@
       </div>
     </section>
 
+    <!-- Spread Chart (P3-2) -->
+    <section class="card card-wide" id="spread-chart-card">
+      <h2>📉 价差走势 (BG↔HL)</h2>
+      <div class="chart-controls">
+        <select id="spread-coin"></select>
+      </div>
+      <div class="chart-container">
+        <canvas id="spreadChart"></canvas>
+      </div>
+    </section>
+
     <!-- Recent Trades -->
     <section class="card card-wide" id="trades-card">
       <h2>📋 历史交易</h2>
       <div class="table-wrap">
         <table id="trades-table">
           <thead>
-            <tr>
-              <th>时间</th>
-              <th>币种</th>
-              <th>方向</th>
-              <th>入价差</th>
-              <th>出价差</th>
-              <th>净利%</th>
-              <th>结果</th>
-              <th>原因</th>
-            </tr>
+            <tr><th>时间</th><th>币种</th><th>方向</th><th>入价差</th><th>出价差</th><th>净利%</th><th>结果</th><th>原因</th></tr>
           </thead>
           <tbody id="trades-body">
             <tr><td colspan="8" class="loading">等待数据...</td></tr>