L2 Terminal: full-screen SOTA order book depth map

Replaces the cramped 480px component with a full-screen
production-grade trading terminal:

  DOM Ladder (25%):
    - 40 price rows centered on mid
    - Bid/ask volume bars with opacity scaling
    - Floating mid price, volume text on both sides

  Depth Heatmap (75%):
    - Cumulative volume profile (filled gradient areas)
    - Green bid fill, red ask fill
    - Yellow dashed mid line with floating labels
    - Price axis, volume scale, imbalance gauge

  Trade Tape (30% bottom):
    - Amber trade path with colored markers
    - Sized dots (trade size proportional)
    - Latest trade callout with direction

  Header bar:
    - Live connection indicator, mid, spread, imbalance
    - Real-time trade count

Access: click L2 Depth Map button on main dashboard
Fullscreen overlay with close button, ESC to dismiss

dashboard-next/src/app/page.tsx

@@ -13,6 +13,7 @@ import { EquityChart } from "@/components/equity-chart";
 import { PositionsPanel } from "@/components/positions-panel";
 import { OBIDetail } from "@/components/obi-detail";
 import OrderBookDepthMap from "@/components/orderbook-depth-map";
+import L2Terminal from "@/components/L2Terminal";
 import { useLiveMetrics, usePaperMetrics, fetchHistorical, fetchBacktestDetail, recalcBacktest } from "@/lib/api";
 import type { Strategy, BacktestSummary, BacktestFull, Trade, Position, Order } from "@/lib/types";
 
@@ -27,6 +28,7 @@ export default function Dashboard() {
   const [historical, setHistorical] = useState<Record<string, BacktestSummary>>({});
 
   const [detailOpen, setDetailOpen] = useState(false);
+  const [l2TerminalOpen, setL2TerminalOpen] = useState(false);
   const [detailName, setDetailName] = useState("");
   const [detailTab, setDetailTab] = useState<Tab>("live");
   const [btFull, setBtFull] = useState<BacktestFull | null>(null);
@@ -368,6 +370,12 @@ export default function Dashboard() {
           </CollapsibleContent>
         </Collapsible>
 
+        {/* L2 Terminal launcher */}
+        <button onClick={() => setL2TerminalOpen(true)} className="flex items-center gap-2 px-4 py-2 mb-4 border border-[#1A1A2E] bg-[#0A0A10] hover:bg-[#111122] rounded transition-colors">
+          <span className="text-[11px] font-mono text-gray-300">⌘ L2 Depth Map</span>
+          <span className="text-[9px] text-gray-600">ws://hyperliquid · {liveConn ? "LIVE" : "OFFLINE"}</span>
+        </button>
+
         <div className="grid grid-cols-1 md:grid-cols-3 gap-3 mb-6">
           <a href="https://ftdt.io" target="_blank" className="flex items-center gap-3 p-4 rounded-lg border border-border bg-card hover:border-primary/50 transition-colors">
             <Activity className="w-4 h-4 text-primary" />
@@ -383,6 +391,19 @@ export default function Dashboard() {
           </a>
         </div>
       </main>
+
+      {/* Fullscreen L2 Terminal */}
+      {l2TerminalOpen && (
+        <div className="fixed inset-0 z-[200] bg-black">
+          <button
+            onClick={() => setL2TerminalOpen(false)}
+            className="absolute top-2 right-4 z-[201] text-gray-400 hover:text-white text-xs font-mono bg-[#111] px-3 py-1 rounded border border-[#333]"
+          >
+            ✕ Close L2 Terminal
+          </button>
+          <L2Terminal coin="BTC" className="w-full h-full" />
+        </div>
+      )}
     </div>
   );
 }