Phase 2: Web dashboard with SSE real-time push

- dashboard.go: SSE hub + HTTP server + price history ring buffer
- static.go: //go:embed for static files
- web/static/index.html: Full dashboard HTML (6 panels)
- web/static/app.js: SSE client, Chart.js price chart, live table updates
- web/static/style.css: GitHub-style dark theme
- main.go: Start dashboard on :8888 + wire price recording + scan results

Dashboard features:
  - Real-time price table (6 coins × 4 exchanges)
  - Arbitrage opportunities table
  - Open positions view
  - Historical trades table (from SQLite)
  - Chart.js price chart with coin/exchange selector
  - Stats summary (total/converged/diverged/flat)
  - 🚫 Zero external Go dependencies (Chart.js loaded from CDN)

dashboard.go

@@ -0,0 +1,439 @@
+package main
+
+import (
+	"encoding/json"
+	"fmt"
+	"io/fs"
+	"log"
+	"net/http"
+	"sync"
+	"time"
+
+	"exchange-monitor/db"
+)
+
+// ============================================================
+// SSE Hub — manages connected browser clients
+// ============================================================
+
+type sseClient struct {
+	ch     chan []byte
+	done   chan struct{}
+	filter string // optional coin filter (empty = all)
+}
+
+type SSEHub struct {
+	mu      sync.RWMutex
+	clients map[*sseClient]bool
+}
+
+func NewSSEHub() *SSEHub {
+	return &SSEHub{
+		clients: make(map[*sseClient]bool),
+	}
+}
+
+func (h *SSEHub) Subscribe(filter string) *sseClient {
+	c := &sseClient{
+		ch:     make(chan []byte, 64),
+		done:   make(chan struct{}),
+		filter: filter,
+	}
+	h.mu.Lock()
+	h.clients[c] = true
+	h.mu.Unlock()
+	log.Printf("[Web] SSE client connected (clients=%d)", len(h.clients))
+	return c
+}
+
+func (h *SSEHub) Unsubscribe(c *sseClient) {
+	h.mu.Lock()
+	delete(h.clients, c)
+	count := len(h.clients)
+	h.mu.Unlock()
+	close(c.done)
+	log.Printf("[Web] SSE client disconnected (clients=%d)", count)
+}
+
+func (h *SSEHub) Broadcast(event string, data interface{}) {
+	raw, err := json.Marshal(map[string]interface{}{
+		"event": event,
+		"data":  data,
+		"ts":    time.Now().UnixMilli(),
+	})
+	if err != nil {
+		return
+	}
+
+	h.mu.RLock()
+	defer h.mu.RUnlock()
+	for c := range h.clients {
+		select {
+		case c.ch <- raw:
+		default:
+			// Client too slow, skip
+		}
+	}
+}
+
+// ============================================================
+// Price History — ring buffer for charting
+// ============================================================
+
+const maxHistoryPoints = 500
+
+type pricePoint struct {
+	T int64   `json:"t"` // unix ms
+	P float64 `json:"p"`
+}
+
+type priceHistory struct {
+	mu      sync.RWMutex
+	buffers map[string]map[string][]pricePoint // coin -> exchange -> points
+}
+
+func newPriceHistory() *priceHistory {
+	return &priceHistory{
+		buffers: make(map[string]map[string][]pricePoint),
+	}
+}
+
+func (ph *priceHistory) Record(coin, exchange string, price float64) {
+	ph.mu.Lock()
+	defer ph.mu.Unlock()
+
+	if ph.buffers[coin] == nil {
+		ph.buffers[coin] = make(map[string][]pricePoint)
+	}
+	buf := ph.buffers[coin][exchange]
+	buf = append(buf, pricePoint{T: time.Now().UnixMilli(), P: price})
+	if len(buf) > maxHistoryPoints {
+		buf = buf[len(buf)-maxHistoryPoints:]
+	}
+	ph.buffers[coin][exchange] = buf
+}
+
+func (ph *priceHistory) GetHistory(coin, exchange string, limit int) []pricePoint {
+	ph.mu.RLock()
+	defer ph.mu.RUnlock()
+
+	buf := ph.buffers[coin][exchange]
+	if len(buf) == 0 {
+		return nil
+	}
+	if limit <= 0 || limit >= len(buf) {
+		result := make([]pricePoint, len(buf))
+		copy(result, buf)
+		return result
+	}
+	result := make([]pricePoint, limit)
+	copy(result, buf[len(buf)-limit:])
+	return result
+}
+
+// ============================================================
+// Dashboard — main orchestrator
+// ============================================================
+
+type Dashboard struct {
+	hub     *SSEHub
+	history *priceHistory
+	store   *PriceStore
+	trader  *Trader
+	db      *db.DB
+	addr    string
+
+	// cached arb scan results — updated every tick
+	mu         sync.RWMutex
+	lastScan   []*ArbOpportunity
+	scanTime   time.Time
+}
+
+func NewDashboard(store *PriceStore, trader *Trader, database *db.DB, addr string) *Dashboard {
+	return &Dashboard{
+		hub:     NewSSEHub(),
+		history: newPriceHistory(),
+		store:   store,
+		trader:  trader,
+		db:      database,
+		addr:    addr,
+	}
+}
+
+// Run starts the HTTP server + SSE broadcaster goroutine.
+func (d *Dashboard) Run() {
+	// SSE broadcaster — pushes data every ~1s
+	go d.broadcastLoop()
+
+	mux := http.NewServeMux()
+
+	// Static files — embed subdirectory
+	staticSub, err := fs.Sub(staticFS, "web/static")
+	if err != nil {
+		log.Printf("[Web] Failed to create static sub-fs: %v", err)
+	} else {
+		mux.Handle("GET /static/", http.StripPrefix("/static/", http.FileServer(http.FS(staticSub))))
+	}
+
+	// Main page
+	mux.HandleFunc("GET /", d.handleIndex)
+
+	// API endpoints
+	mux.HandleFunc("GET /api/status", d.handleStatus)
+	mux.HandleFunc("GET /api/history", d.handleHistory)
+	mux.HandleFunc("GET /api/trades", d.handleTrades)
+	mux.HandleFunc("GET /api/trade/", d.handleTradeDetail)
+
+	// SSE
+	mux.HandleFunc("GET /events", d.handleSSE)
+
+	server := &http.Server{
+		Addr:         d.addr,
+		Handler:      mux,
+		ReadTimeout:  10 * time.Second,
+		WriteTimeout: 0, // SSE needs no write timeout
+	}
+
+	log.Printf("[Web] Dashboard listening on http://%s", d.addr)
+	if err := server.ListenAndServe(); err != nil && err != http.ErrServerClosed {
+		log.Printf("[Web] Server error: %v", err)
+	}
+}
+
+// broadcastLoop pushes data to SSE clients every 1 second.
+func (d *Dashboard) broadcastLoop() {
+	tick := time.NewTicker(1 * time.Second)
+	defer tick.Stop()
+
+	for range tick.C {
+		snap := d.store.GetAll()
+		if len(snap) == 0 {
+			continue
+		}
+
+		// 1. Prices
+		var prices []map[string]interface{}
+		for _, coin := range TrackedCoins {
+			exMap := snap[coin.Name]
+			if exMap == nil {
+				continue
+			}
+			entry := map[string]interface{}{
+				"coin": coin.Name,
+			}
+			for ex, p := range exMap {
+				entry[ex] = p
+			}
+			// Add bid-ask spreads
+			for ex := range exMap {
+				sp := d.store.GetSpread(coin.Name, ex)
+				if sp > 0 {
+					entry[ex+"_spread"] = sp
+				}
+			}
+			prices = append(prices, entry)
+		}
+		d.hub.Broadcast("prices", prices)
+
+		// 2. Open positions
+		positions := d.trader.GetOpenPositions()
+		if len(positions) > 0 {
+			posList := make([]map[string]interface{}, 0, len(positions))
+			for _, pos := range positions {
+				posList = append(posList, map[string]interface{}{
+					"coin":         pos.Coin,
+					"direction":    pos.Direction,
+					"amount_usd":   pos.AmountUSD,
+					"entry_spread": pos.EntrySpread,
+					"scales":       pos.ScaleLevels,
+					"duration":     time.Since(pos.StartedAt).Round(time.Second).String(),
+					"started_at":   pos.StartedAt.Format("15:04:05"),
+				})
+			}
+			d.hub.Broadcast("positions", posList)
+		}
+
+		// 3. Arb scan results
+		d.mu.RLock()
+		scanCopy := d.lastScan
+		d.mu.RUnlock()
+
+		if len(scanCopy) > 0 {
+			scanList := make([]map[string]interface{}, 0, len(scanCopy))
+			for _, opp := range scanCopy {
+				scanList = append(scanList, map[string]interface{}{
+					"coin":       opp.Coin,
+					"direction":  opp.Direction,
+					"buy_ex":     opp.BuyEx,
+					"sell_ex":    opp.SellEx,
+					"buy_price":  opp.BuyPrice,
+					"sell_price": opp.SellPrice,
+					"net_profit": opp.NetProfit,
+					"gross":      opp.GrossBasis,
+				})
+			}
+			d.hub.Broadcast("arb", scanList)
+		}
+
+		// 4. Stats
+		converged, diverged, flat, total := d.trader.GetClosedStats()
+		stats := map[string]interface{}{
+			"total_trades":   total,
+			"converged":      converged,
+			"diverged":       diverged,
+			"flat":           flat,
+			"open_positions": len(positions),
+			"coins":          len(prices),
+		}
+		d.hub.Broadcast("stats", stats)
+	}
+}
+
+// UpdateScan caches the latest arb scan results.
+func (d *Dashboard) UpdateScan(opps []*ArbOpportunity) {
+	d.mu.Lock()
+	d.lastScan = opps
+	d.scanTime = time.Now()
+	d.mu.Unlock()
+}
+
+// RecordPrice adds a price to the history buffer and optionally broadcasts.
+func (d *Dashboard) RecordPrice(coin, exchange string, price float64) {
+	d.history.Record(coin, exchange, price)
+}
+
+// ============================================================
+// HTTP Handlers
+// ============================================================
+
+func (d *Dashboard) handleIndex(w http.ResponseWriter, r *http.Request) {
+	data, err := staticFS.ReadFile("web/static/index.html")
+	if err != nil {
+		http.Error(w, "Not found", 404)
+		return
+	}
+	w.Header().Set("Content-Type", "text/html; charset=utf-8")
+	w.Write(data)
+}
+
+func (d *Dashboard) handleStatus(w http.ResponseWriter, r *http.Request) {
+	snap := d.store.GetAll()
+	positions := d.trader.GetOpenPositions()
+	converged, diverged, flat, total := d.trader.GetClosedStats()
+
+	resp := map[string]interface{}{
+		"prices":        snap,
+		"positions":     len(positions),
+		"stats":         map[string]int{"total": total, "converged": converged, "diverged": diverged, "flat": flat},
+	}
+
+	writeJSON(w, resp)
+}
+
+func (d *Dashboard) handleHistory(w http.ResponseWriter, r *http.Request) {
+	coin := r.URL.Query().Get("coin")
+	exchange := r.URL.Query().Get("exchange")
+	if coin == "" || exchange == "" {
+		// Return available coins/exchanges
+		snap := d.store.GetAll()
+		coins := make([]string, 0, len(snap))
+		for c := range snap {
+			coins = append(coins, c)
+		}
+		writeJSON(w, map[string]interface{}{"coins": coins, "exchanges": []string{"Binance", "HyperLiquid", "Bitget", "dYdX"}})
+		return
+	}
+
+	points := d.history.GetHistory(coin, exchange, 300)
+	writeJSON(w, map[string]interface{}{
+		"coin":     coin,
+		"exchange": exchange,
+		"points":   points,
+	})
+}
+
+func (d *Dashboard) handleTrades(w http.ResponseWriter, r *http.Request) {
+	if d.db == nil {
+		writeJSON(w, map[string]interface{}{"trades": []interface{}{}, "total": 0})
+		return
+	}
+
+	page := 1
+	limit := 20
+	coin := r.URL.Query().Get("coin")
+
+	trades, total, err := d.db.GetTrades(page, limit, coin)
+	if err != nil {
+		http.Error(w, err.Error(), 500)
+		return
+	}
+
+	writeJSON(w, map[string]interface{}{
+		"trades": trades,
+		"total":  total,
+		"page":   page,
+		"limit":  limit,
+	})
+}
+
+func (d *Dashboard) handleTradeDetail(w http.ResponseWriter, r *http.Request) {
+	if d.db == nil {
+		http.Error(w, "DB not available", 503)
+		return
+	}
+
+	var id int64
+	if _, err := fmt.Sscanf(r.URL.Path, "/api/trade/%d", &id); err != nil {
+		http.Error(w, "Invalid trade ID", 400)
+		return
+	}
+
+	trade, orders, err := d.db.GetTradeByID(id)
+	if err != nil {
+		http.Error(w, err.Error(), 404)
+		return
+	}
+
+	writeJSON(w, map[string]interface{}{
+		"trade":  trade,
+		"orders": orders,
+	})
+}
+
+func (d *Dashboard) handleSSE(w http.ResponseWriter, r *http.Request) {
+	flusher, ok := w.(http.Flusher)
+	if !ok {
+		http.Error(w, "Streaming not supported", 500)
+		return
+	}
+
+	w.Header().Set("Content-Type", "text/event-stream")
+	w.Header().Set("Cache-Control", "no-cache")
+	w.Header().Set("Connection", "keep-alive")
+	w.Header().Set("Access-Control-Allow-Origin", "*")
+
+	client := d.hub.Subscribe("")
+	defer d.hub.Unsubscribe(client)
+
+	// Send initial heartbeat
+	fmt.Fprintf(w, "event: connected\ndata: {\"status\":\"ok\"}\n\n")
+	flusher.Flush()
+
+	for {
+		select {
+		case <-r.Context().Done():
+			return
+		case msg, ok := <-client.ch:
+			if !ok {
+				return
+			}
+			fmt.Fprintf(w, "data: %s\n\n", msg)
+			flusher.Flush()
+		}
+	}
+}
+
+func writeJSON(w http.ResponseWriter, v interface{}) {
+	w.Header().Set("Content-Type", "application/json")
+	json.NewEncoder(w).Encode(v)
+}

main.go

@@ -45,6 +45,10 @@ func main() {
 
 	// Initialize trader
 	trader := NewTrader(cfg, database)
+
+	// Initialize dashboard (web server + SSE)
+	dashboard := NewDashboard(store, trader, database, ":8888")
+	go dashboard.Run()
 	if trader.IsConfigured() {
 		modeLabel := trader.ModeLabel()
 		log.Printf("[Trader] %s mode: automated trading ENABLED (threshold >= %.2f%%, $%.0f/trade)",
@@ -79,6 +83,7 @@ func main() {
 			for {
 				err := runner(func(coin string, price, bid, ask float64) {
 					store.SetWithSpread(coin, name, price, bid, ask)
+					dashboard.RecordPrice(coin, name, price)
 				})
 				log.Printf("[%s] WS error: %v (reconnecting...)", name, err)
 				select {
@@ -155,6 +160,7 @@ func main() {
 
 			// Scan for arbitrage entries using maker fees (limit orders)
 			makerOpps := ScanArbWithFees(store, makerFees)
+			dashboard.UpdateScan(makerOpps)
 			t2 := time.Now()
 
 			for _, opp := range makerOpps {

static.go

@@ -0,0 +1,6 @@
+package main
+
+import "embed"
+
+//go:embed web/static/index.html web/static/app.js web/static/style.css
+var staticFS embed.FS

web/static/app.js

@@ -0,0 +1,405 @@
+/* ============================================================
+   Exchange Monitor Dashboard — Frontend Logic
+   ============================================================ */
+
+(function() {
+'use strict';
+
+// ---- DOM refs ----
+const $ = id => document.getElementById(id);
+
+const els = {
+  clock:      $('clock'),
+  connStatus: $('conn-status'),
+  priceBody:  $('price-body'),
+  arbBody:    $('arb-body'),
+  posBody:    $('positions-body'),
+  tradesBody: $('trades-body'),
+  statTotal:  $('stat-total'),
+  statConv:   $('stat-converged'),
+  statDiv:    $('stat-diverged'),
+  statFlat:   $('stat-flat'),
+  statPos:    $('stat-positions'),
+  statCoins:  $('stat-coins'),
+  chartCoin:  $('chart-coin'),
+  chartExch:  $('chart-exchange'),
+  chartCanvas: $('priceChart'),
+};
+
+// ---- Clock ----
+function updateClock() {
+  const now = new Date();
+  els.clock.textContent = now.toLocaleTimeString('zh-CN', { hour12: false });
+}
+setInterval(updateClock, 1000);
+updateClock();
+
+// ---- Price table helpers ----
+const EXCHANGES = ['Binance', 'HyperLiquid', 'Bitget', 'dYdX'];
+const COINS = ['DOGE', 'LINK', 'ONDO', 'OP', 'WIF', 'ARB'];
+
+function formatPrice(p) {
+  if (p == null || p <= 0) return '-';
+  if (p >= 100) return p.toFixed(2);
+  if (p >= 1) return p.toFixed(4);
+  return p.toFixed(6);
+}
+
+function priceClass(lastPrice, currentPrice) {
+  if (lastPrice == null || currentPrice == null) return '';
+  if (currentPrice > lastPrice) return 'text-green';
+  if (currentPrice < lastPrice) return 'text-red';
+  return '';
+}
+
+// ---- Price history for chart ----
+const priceCache = {}; // coin.exchange -> { last: float, points: [{t,p}] }
+
+// ---- SSE Connection ----
+let eventSource = null;
+
+function connectSSE() {
+  if (eventSource) {
+    eventSource.close();
+  }
+
+  eventSource = new EventSource('/events');
+
+  eventSource.addEventListener('connected', () => {
+    els.connStatus.textContent = '● 已连接';
+    els.connStatus.className = 'status-online';
+  });
+
+  eventSource.onerror = () => {
+    els.connStatus.textContent = '● 已断开 (重连中...)';
+    els.connStatus.className = 'status-offline';
+    setTimeout(connectSSE, 3000);
+  };
+
+  eventSource.onmessage = (e) => {
+    try {
+      const msg = JSON.parse(e.data);
+      const handler = eventHandlers[msg.event];
+      if (handler) handler(msg.data);
+    } catch(err) {
+      // ignore parse errors
+    }
+  };
+}
+
+// ---- Event Handlers ----
+const eventHandlers = {};
+
+eventHandlers.prices = (prices) => {
+  if (!prices || prices.length === 0) return;
+
+  // Build table rows
+  let html = '';
+  let coinsOnline = 0;
+
+  for (const coin of COINS) {
+    const row = prices.find(p => p.coin === coin);
+    if (!row) {
+      html += `<tr><td>${coin}</td>${EXCHANGES.map(() => '<td class="text-dim">-</td>').join('')}</tr>`;
+      continue;
+    }
+    coinsOnline++;
+
+    const cells = EXCHANGES.map(ex => {
+      const p = row[ex];
+      const sp = row[ex + '_spread'];
+      const key = coin + '.' + ex;
+      const prev = priceCache[key];
+      const curP = p || 0;
+      const cls = prev ? priceClass(prev.last, curP) : '';
+
+      // Store for directional arrows next time
+      if (prev) {
+        prev.last = curP;
+      } else {
+        priceCache[key] = { last: curP, points: [] };
+      }
+
+      // Record for chart
+      if (p > 0) {
+        const pt = { t: Date.now(), p: p };
+        if (!priceCache[key]) priceCache[key] = { last: p, points: [] };
+        priceCache[key].points.push(pt);
+        if (priceCache[key].points.length > 500) {
+          priceCache[key].points = priceCache[key].points.slice(-500);
+        }
+      }
+
+      let display = formatPrice(p);
+      if (sp && sp > 0.01) {
+        display += `<span class="text-dim" style="font-size:10px"> (${sp.toFixed(3)}%)</span>`;
+      }
+      return `<td class="${cls}">${display}</td>`;
+    });
+
+    html += `<tr><td><strong>${coin}</strong></td>${cells.join('')}</tr>`;
+  }
+
+  els.priceBody.innerHTML = html;
+
+  // Update coin selector if needed
+  updateChartSelectors(prices);
+};
+
+eventHandlers.arb = (opps) => {
+  if (!opps || opps.length === 0) {
+    els.arbBody.innerHTML = '<tr><td colspan="5" class="text-dim">暂无套利机会</td></tr>';
+    return;
+  }
+
+  const html = opps.slice(0, 10).map(opp => {
+    const cls = opp.net_profit > 0.1 ? 'text-green' : opp.net_profit > 0.05 ? 'text-yellow' : '';
+    return `<tr>
+      <td>${opp.coin}</td>
+      <td>${opp.direction}</td>
+      <td class="text-right">${formatPrice(opp.buy_price)}</td>
+      <td class="text-right">${formatPrice(opp.sell_price)}</td>
+      <td class="text-right ${cls}"><strong>${opp.net_profit.toFixed(4)}</strong></td>
+    </tr>`;
+  }).join('');
+
+  els.arbBody.innerHTML = html;
+};
+
+eventHandlers.positions = (positions) => {
+  if (!positions || positions.length === 0) {
+    els.posBody.innerHTML = '<tr><td colspan="6" class="text-dim">无持仓</td></tr>';
+    return;
+  }
+
+  const html = positions.map(p => `<tr>
+    <td><strong>${p.coin}</strong></td>
+    <td>${p.direction}</td>
+    <td class="text-right">$${p.amount_usd.toFixed(0)}</td>
+    <td class="text-right">${p.entry_spread.toFixed(4)}%</td>
+    <td class="text-right">${p.scales}</td>
+    <td>${p.duration}</td>
+  </tr>`).join('');
+
+  els.posBody.innerHTML = html;
+};
+
+eventHandlers.stats = (stats) => {
+  els.statTotal.textContent = stats.total_trades || 0;
+  els.statConv.textContent = stats.converged || 0;
+  els.statDiv.textContent = stats.diverged || 0;
+  els.statFlat.textContent = stats.flat || 0;
+  els.statPos.textContent = stats.open_positions || 0;
+  els.statCoins.textContent = stats.coins || 0;
+};
+
+// ---- Chart ----
+let chart = null;
+
+function initChart() {
+  const ctx = els.chartCanvas.getContext('2d');
+  chart = new Chart(ctx, {
+    type: 'line',
+    data: {
+      datasets: [{
+        label: 'Price',
+        data: [],
+        borderColor: '#58a6ff',
+        backgroundColor: 'rgba(88, 166, 255, 0.1)',
+        borderWidth: 2,
+        pointRadius: 0,
+        fill: true,
+        tension: 0.2,
+      }]
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      animation: { duration: 0 },
+      plugins: {
+        legend: { display: false },
+        tooltip: {
+          mode: 'index',
+          intersect: false,
+          callbacks: {
+            title: (items) => {
+              if (items.length > 0) {
+                const d = new Date(items[0].parsed.x);
+                return d.toLocaleTimeString('zh-CN', { hour12: false });
+              }
+              return '';
+            },
+            label: (item) => item.parsed.y.toFixed(4),
+          }
+        }
+      },
+      scales: {
+        x: {
+          type: 'linear',
+          display: true,
+          ticks: {
+            color: '#8b949e',
+            maxTicksLimit: 10,
+            callback: (val) => {
+              const d = new Date(val);
+              return d.toLocaleTimeString('zh-CN', { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' });
+            }
+          },
+          grid: { color: 'rgba(48, 54, 61, 0.5)' },
+        },
+        y: {
+          display: true,
+          ticks: {
+            color: '#8b949e',
+            callback: (val) => val.toFixed(4),
+          },
+          grid: { color: 'rgba(48, 54, 61, 0.3)' },
+        }
+      }
+    }
+  });
+}
+
+function updateChartSelectors(prices) {
+  const coinSel = els.chartCoin;
+  const exSel = els.chartExch;
+
+  // Populate coins if empty
+  if (coinSel.options.length <= 1) {
+    const currentCoin = coinSel.value;
+    coinSel.innerHTML = '<option value="">-- 选择币种 --</option>';
+    for (const row of prices) {
+      const opt = document.createElement('option');
+      opt.value = row.coin;
+      opt.textContent = row.coin;
+      coinSel.appendChild(opt);
+    }
+    // Try to restore selection
+    if (currentCoin) {
+      coinSel.value = currentCoin;
+    } else if (prices.length > 0) {
+      coinSel.value = prices[0].coin;
+    }
+  }
+
+  // Populate exchanges if empty
+  if (exSel.options.length <= 1) {
+    exSel.innerHTML = '<option value="">-- 选择交易所 --</option>';
+    for (const ex of EXCHANGES) {
+      const opt = document.createElement('option');
+      opt.value = ex;
+      opt.textContent = ex;
+      exSel.appendChild(opt);
+    }
+    exSel.value = 'HyperLiquid';
+  }
+
+  // Update chart when selections change
+  const selectedCoin = coinSel.value;
+  const selectedEx = exSel.value;
+  if (selectedCoin && selectedEx) {
+    updateChart(selectedCoin, selectedEx);
+  }
+}
+
+function updateChart(coin, exchange) {
+  const key = coin + '.' + exchange;
+  const cache = priceCache[key];
+  if (!cache || !cache.points || cache.points.length < 2) {
+    if (chart) {
+      chart.data.datasets[0].data = [];
+      chart.data.datasets[0].label = `${coin} @ ${exchange}`;
+      chart.update('none');
+    }
+    return;
+  }
+
+  const pts = cache.points;
+  const data = pts.map(p => ({ x: p.t, y: p.p }));
+
+  if (chart) {
+    chart.data.datasets[0].data = data;
+    chart.data.datasets[0].label = `${coin} @ ${exchange}`;
+    chart.update('none');
+  }
+}
+
+// ---- Chart controls ----
+els.chartCoin.addEventListener('change', () => {
+  const coin = els.chartCoin.value;
+  const ex = els.chartExch.value;
+  if (coin && ex) updateChart(coin, ex);
+});
+
+els.chartExch.addEventListener('change', () => {
+  const coin = els.chartCoin.value;
+  const ex = els.chartExch.value;
+  if (coin && ex) updateChart(coin, ex);
+});
+
+// ---- Chart auto-refresh ----
+let chartRefreshTimer = null;
+let chartRefreshInterval = 2000; // refresh chart every 2s
+
+function startChartRefresh() {
+  if (chartRefreshTimer) return;
+  chartRefreshTimer = setInterval(() => {
+    const coin = els.chartCoin.value;
+    const ex = els.chartExch.value;
+    if (coin && ex) updateChart(coin, ex);
+  }, chartRefreshInterval);
+}
+
+// ---- Trades loading ----
+async function loadTrades() {
+  try {
+    const resp = await fetch('/api/trades');
+    const data = await resp.json();
+    const trades = data.trades || [];
+
+    if (trades.length === 0) {
+      els.tradesBody.innerHTML = '<tr><td colspan="8" class="text-dim">暂无交易记录</td></tr>';
+      return;
+    }
+
+    const html = trades.slice(0, 20).map(t => {
+      const pnlCls = t.NetPnl > 0 ? 'text-green' : t.NetPnl < 0 ? 'text-red' : '';
+      const convCls = t.Convergence === '价差收敛' ? 'text-green' :
+                      t.Convergence === '价差发散' ? 'text-red' : 'text-yellow';
+      return `<tr>
+        <td class="text-dim">${t.ClosedAt ? new Date(t.ClosedAt).toLocaleTimeString('zh-CN', { hour12: false }) : '-'}</td>
+        <td><strong>${t.Coin}</strong></td>
+        <td>${t.Direction}</td>
+        <td class="text-right">${t.EntrySpread ? t.EntrySpread.toFixed(4) : '-'}</td>
+        <td class="text-right">${t.ExitSpread ? t.ExitSpread.toFixed(4) : '-'}</td>
+        <td class="text-right ${pnlCls}"><strong>${t.NetPnl != null ? t.NetPnl.toFixed(4) : '-'}</strong></td>
+        <td class="${convCls}">${t.Convergence || '-'}</td>
+        <td>${t.ExitReason || '-'}</td>
+      </tr>`;
+    }).join('');
+
+    els.tradesBody.innerHTML = html;
+  } catch (err) {
+    els.tradesBody.innerHTML = '<tr><td colspan="8" class="text-red">加载失败</td></tr>';
+  }
+}
+
+// ---- Init ----
+function init() {
+  connectSSE();
+  initChart();
+  startChartRefresh();
+  loadTrades();
+
+  // Refresh trades every 10s
+  setInterval(loadTrades, 10000);
+}
+
+// Start when DOM ready
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', init);
+} else {
+  init();
+}
+
+})();

web/static/index.html

@@ -0,0 +1,139 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Exchange Monitor Dashboard</title>
+<link rel="stylesheet" href="/static/style.css">
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>
+</head>
+<body>
+<div id="app">
+  <header>
+    <h1>⚡ 跨交易所套利监控</h1>
+    <div class="header-meta">
+      <span id="clock">--:--:--</span>
+      <span class="sep">|</span>
+      <span id="conn-status" class="status-offline">● 未连接</span>
+    </div>
+  </header>
+
+  <div class="grid">
+    <!-- Stats Summary -->
+    <section class="card" id="stats-card">
+      <h2>📊 统计数据</h2>
+      <div class="stats-row">
+        <div class="stat"><label>总交易</label><span id="stat-total">0</span></div>
+        <div class="stat"><label>收敛</label><span id="stat-converged" class="pct-green">0</span></div>
+        <div class="stat"><label>发散</label><span id="stat-diverged" class="pct-red">0</span></div>
+        <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>
+    </section>
+
+    <!-- Price Table -->
+    <section class="card" id="prices-card">
+      <h2>💰 实时价格</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>
+          </thead>
+          <tbody id="price-body">
+            <tr><td colspan="5" class="loading">等待数据...</td></tr>
+          </tbody>
+        </table>
+      </div>
+    </section>
+
+    <!-- Arbitrage Opportunities -->
+    <section class="card" id="arb-card">
+      <h2>🎯 套利机会</h2>
+      <div class="table-wrap">
+        <table id="arb-table">
+          <thead>
+            <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>
+          </tbody>
+        </table>
+      </div>
+    </section>
+
+    <!-- Open Positions -->
+    <section class="card" id="positions-card">
+      <h2>🔒 当前持仓</h2>
+      <div class="table-wrap">
+        <table id="positions-table">
+          <thead>
+            <tr>
+              <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>
+          </tbody>
+        </table>
+      </div>
+    </section>
+
+    <!-- Price Chart -->
+    <section class="card card-wide" id="chart-card">
+      <h2>📈 价格走势</h2>
+      <div class="chart-controls">
+        <select id="chart-coin"></select>
+        <select id="chart-exchange"></select>
+      </div>
+      <div class="chart-container">
+        <canvas id="priceChart"></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>
+          </thead>
+          <tbody id="trades-body">
+            <tr><td colspan="8" class="loading">等待数据...</td></tr>
+          </tbody>
+        </table>
+      </div>
+    </section>
+  </div>
+</div>
+
+<script src="/static/app.js"></script>
+</body>
+</html>

web/static/style.css

@@ -0,0 +1,163 @@
+/* ============================================================
+   Exchange Monitor Dashboard — Dark Theme
+   ============================================================ */
+
+:root {
+  --bg: #0d1117;
+  --card: #161b22;
+  --border: #30363d;
+  --text: #c9d1d9;
+  --text-dim: #8b949e;
+  --accent: #58a6ff;
+  --green: #3fb950;
+  --red: #f85149;
+  --yellow: #d29922;
+  --blue: #58a6ff;
+}
+
+* { margin: 0; padding: 0; box-sizing: border-box; }
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
+  background: var(--bg);
+  color: var(--text);
+  font-size: 14px;
+  line-height: 1.5;
+  min-height: 100vh;
+}
+
+#app { max-width: 1440px; margin: 0 auto; padding: 16px; }
+
+/* Header */
+header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 16px;
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  margin-bottom: 16px;
+}
+
+header h1 { font-size: 18px; font-weight: 600; }
+.header-meta { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-dim); }
+.sep { color: var(--border); }
+.status-offline { color: var(--red); }
+.status-online { color: var(--green); }
+
+/* Grid layout */
+.grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+.card-wide { grid-column: 1 / -1; }
+
+/* Cards */
+.card {
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 12px;
+}
+
+.card h2 {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-dim);
+  margin-bottom: 10px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--border);
+}
+
+/* Stats row */
+.stats-row {
+  display: flex;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+.stat {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-width: 60px;
+}
+.stat label { font-size: 11px; color: var(--text-dim); margin-bottom: 2px; }
+.stat span { font-size: 20px; font-weight: 700; }
+.pct-green { color: var(--green); }
+.pct-red { color: var(--red); }
+.pct-gray { color: var(--text-dim); }
+.pct-yellow { color: var(--yellow); }
+.pct-blue { color: var(--blue); }
+
+/* Tables */
+.table-wrap {
+  overflow-x: auto;
+  max-height: 320px;
+  overflow-y: auto;
+}
+table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+th {
+  text-align: left;
+  padding: 6px 8px;
+  color: var(--text-dim);
+  font-weight: 500;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  position: sticky;
+  top: 0;
+  background: var(--card);
+  border-bottom: 1px solid var(--border);
+}
+td {
+  padding: 5px 8px;
+  border-bottom: 1px solid rgba(48, 54, 61, 0.5);
+  white-space: nowrap;
+}
+tr:hover td { background: rgba(88, 166, 255, 0.05); }
+.loading { text-align: center; color: var(--text-dim); padding: 20px !important; }
+
+.text-green { color: var(--green); }
+.text-red { color: var(--red); }
+.text-yellow { color: var(--yellow); }
+.text-dim { color: var(--text-dim); }
+.text-right { text-align: right; }
+
+/* Chart controls */
+.chart-controls {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+.chart-controls select {
+  background: var(--bg);
+  color: var(--text);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 4px 8px;
+  font-size: 13px;
+  cursor: pointer;
+}
+.chart-container {
+  position: relative;
+  height: 300px;
+}
+
+/* Scrollbar */
+::-webkit-scrollbar { width: 6px; height: 6px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: #484f58; }
+
+/* Responsive */
+@media (max-width: 768px) {
+  .grid { grid-template-columns: 1fr; }
+  header { flex-direction: column; gap: 8px; }
+  .stats-row { justify-content: center; }
+}