feat(v2): add Hasura /graphql WS proxy and live DLOB stats

apps/visualizer/src/App.tsx

@@ -11,6 +11,7 @@ import Button from './ui/Button';
 import TopNav from './layout/TopNav';
 import AuthStatus from './layout/AuthStatus';
 import LoginScreen from './layout/LoginScreen';
+import { useDlobStats } from './features/market/useDlobStats';
 
 function envNumber(name: string, fallback: number): number {
   const v = (import.meta as any).env?.[name];
@@ -99,7 +100,7 @@ export default function App() {
 }
 
 function TradeApp({ user, onLogout }: { user: string; onLogout: () => void }) {
-  const markets = useMemo(() => ['PUMP-PERP', 'SOL-PERP', 'BTC-PERP', 'ETH-PERP'], []);
+  const markets = useMemo(() => ['PUMP-PERP', 'SOL-PERP', 'BONK-PERP', 'BTC-PERP', 'ETH-PERP'], []);
 
   const [symbol, setSymbol] = useLocalStorageState('trade.symbol', envString('VITE_SYMBOL', 'PUMP-PERP'));
   const [source, setSource] = useLocalStorageState('trade.source', envString('VITE_SOURCE', ''));
@@ -128,6 +129,8 @@ function TradeApp({ user, onLogout }: { user: string; onLogout: () => void }) {
     pollMs,
   });
 
+  const { stats: dlob, connected: dlobConnected, error: dlobError } = useDlobStats(symbol);
+
   const latest = candles.length ? candles[candles.length - 1] : null;
   const first = candles.length ? candles[0] : null;
   const changePct =
@@ -209,12 +212,22 @@ function TradeApp({ user, onLogout }: { user: string; onLogout: () => void }) {
           ),
       },
       { key: 'oracle', label: 'Oracle', value: formatUsd(latest?.oracle ?? null) },
-      { key: 'funding', label: 'Funding / 24h', value: '—', sub: '—' },
-      { key: 'oi', label: 'Open Interest', value: '—' },
-      { key: 'vol', label: '24h Volume', value: '—' },
-      { key: 'details', label: 'Market Details', value: <a href="#">View</a> },
+      { key: 'bid', label: 'Bid', value: formatUsd(dlob?.bestBid ?? null) },
+      { key: 'ask', label: 'Ask', value: formatUsd(dlob?.bestAsk ?? null) },
+      {
+        key: 'spread',
+        label: 'Spread',
+        value: dlob?.spreadBps == null ? '—' : `${dlob.spreadBps.toFixed(1)} bps`,
+        sub: formatUsd(dlob?.spreadAbs ?? null),
+      },
+      {
+        key: 'dlob',
+        label: 'DLOB',
+        value: dlobConnected ? 'live' : '—',
+        sub: dlobError ? <span className="neg">{dlobError}</span> : dlob?.updatedAt || '—',
+      },
     ];
-  }, [latest?.close, latest?.oracle, changePct]);
+  }, [latest?.close, latest?.oracle, changePct, dlob, dlobConnected, dlobError]);
 
   const seriesLabel = useMemo(() => `Candles: Mark (oracle overlay)`, []);
   const seriesKey = useMemo(() => `${symbol}|${source}|${tf}`, [symbol, source, tf]);