Update index.html

index.html

@@ -11,22 +11,61 @@
     }
     *{ box-sizing:border-box; }
     body{ margin:0; font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background:var(--bg); color:var(--text); }
-    header{ height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 14px; border-bottom:1px solid var(--line); background:rgba(0,0,0,0.15); }
-    .title{ font-weight:800; letter-spacing:0.3px; }
-    .status{ font-size:12px; color:var(--muted); display:flex; align-items:center; gap:8px; }
+
+    header{
+      height:52px; display:flex; align-items:center; justify-content:space-between;
+      padding:0 14px; border-bottom:1px solid var(--line); background:rgba(0,0,0,0.15);
+      gap:10px;
+    }
+    .leftHead{ display:flex; align-items:center; gap:12px; min-width: 0; }
+    .title{ font-weight:800; letter-spacing:0.3px; white-space:nowrap; }
+    .status{ font-size:12px; color:var(--muted); display:flex; align-items:center; gap:8px; white-space:nowrap; }
     .dot{ width:10px; height:10px; border-radius:999px; background:#6b7280; }
     .dot.connected{ background:var(--green); }
     .dot.connecting{ background:var(--yellow); }
     .dot.error{ background:var(--red); }
 
-    main{ display:grid; grid-template-columns: 1.4fr 1fr; gap:12px; padding:12px; height: calc(100vh - 52px); }
-    .col{ display:flex; flex-direction:column; gap:12px; min-height:0; }
-    .card{ background:var(--panel); border:1px solid var(--line); border-radius:10px; overflow:hidden; display:flex; flex-direction:column; min-height:0; }
-    .card h2{ margin:0; padding:10px 12px; font-size:13px; color:var(--muted); text-transform:uppercase; letter-spacing:0.08em; border-bottom:1px solid var(--line); background:var(--panel2); }
+    .tabs{ display:flex; gap:8px; flex-wrap:wrap; }
+    .tabBtn{
+      font:inherit; border-radius:10px; border:1px solid var(--line);
+      background:#0c1430; color:var(--text); padding:8px 10px; cursor:pointer;
+      font-size:13px;
+    }
+    .tabBtn.active{ background:rgba(96,165,250,0.14); border-color:rgba(96,165,250,0.55); }
+
+    main{ padding:12px; height: calc(100vh - 52px); }
+    .tabPanel{ display:none; height:100%; }
+    .tabPanel.active{ display:block; }
+
+    .gridMain{
+      display:grid;
+      grid-template-columns: 1.35fr 1fr; /* Market + Trading side by side */
+      gap:12px;
+      height:100%;
+      min-height:0;
+    }
+    .gridSecondary{
+      display:grid;
+      grid-template-columns: 1fr 1fr;
+      gap:12px;
+      height:100%;
+      min-height:0;
+    }
+
+    .card{
+      background:var(--panel); border:1px solid var(--line); border-radius:10px;
+      overflow:hidden; display:flex; flex-direction:column; min-height:0;
+    }
+    .card h2{
+      margin:0; padding:10px 12px; font-size:13px; color:var(--muted);
+      text-transform:uppercase; letter-spacing:0.08em;
+      border-bottom:1px solid var(--line); background:var(--panel2);
+    }
     .content{ padding:12px; overflow:auto; min-height:0; }
 
     .grid3{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap:10px; }
     .grid2{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
+
     .kpi{ padding:10px; border:1px solid var(--line); border-radius:10px; background:rgba(255,255,255,0.02); }
     .kpi .label{ color:var(--muted); font-size:12px; }
     .kpi .value{ font-size:18px; font-weight:800; margin-top:4px; }
@@ -37,7 +76,7 @@
       font:inherit; border-radius:10px; border:1px solid var(--line);
       background:#0c1430; color:var(--text); padding:10px 12px;
     }
-    input{ width:120px; }
+    input{ width:130px; }
     button{ cursor:pointer; }
     button.buy{ border-color:rgba(34,197,94,0.5); }
     button.sell{ border-color:rgba(239,68,68,0.5); }
@@ -51,7 +90,8 @@
     .small{ font-size:12px; color:var(--muted); }
     .mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }
 
-    canvas{ width:100%; height:220px; background:rgba(0,0,0,0.10); border:1px solid rgba(35,48,85,0.8); border-radius:10px; display:block; }
+    canvas{ width:100%; height:240px; background:rgba(0,0,0,0.10); border:1px solid rgba(35,48,85,0.8); border-radius:10px; display:block; }
+    #equityCanvas{ height:240px; }
 
     table{ width:100%; border-collapse:collapse; font-size:13px; }
     th, td{ text-align:left; padding:8px 6px; border-bottom:1px solid rgba(35,48,85,0.6); vertical-align:top; }
@@ -61,15 +101,25 @@
     .pill.buy{ color:var(--green); border-color:rgba(34,197,94,0.5); }
     .pill.sell{ color:var(--red); border-color:rgba(239,68,68,0.5); }
 
-    @media (max-width: 900px){
-      main{ grid-template-columns: 1fr; height:auto; }
+    @media (max-width: 1000px){
+      .gridMain{ grid-template-columns: 1fr; height:auto; }
+      .gridSecondary{ grid-template-columns: 1fr; height:auto; }
+      main{ height:auto; }
       canvas{ height:200px; }
     }
   </style>
 </head>
+
 <body>
 <header>
-  <div class="title">MPTrading</div>
+  <div class="leftHead">
+    <div class="title">MPTrading</div>
+    <div class="tabs">
+      <button class="tabBtn active" id="tabBtnTrade" type="button">Trading</button>
+      <button class="tabBtn" id="tabBtnStats" type="button">Stats</button>
+    </div>
+  </div>
+
   <div class="status">
     <span id="dot" class="dot"></span>
     <span id="statusText">Disconnected</span>
@@ -78,97 +128,139 @@
 </header>
 
 <main>
-  <div class="col">
-    <section class="card">
-      <h2>Market</h2>
-      <div class="content">
-        <div class="grid3">
-          <div class="kpi">
-            <div class="label">Day / Price</div>
-            <div class="value" id="kpiPrice">--</div>
-            <div class="sub"><span class="muted">Day:</span> <span id="kpiDay">--</span></div>
-          </div>
-          <div class="kpi">
-            <div class="label">Indicators</div>
-            <div class="sub"><span class="muted">MA20:</span> <span id="kpiMA20">--</span></div>
-            <div class="sub"><span class="muted">MA50:</span> <span id="kpiMA50">--</span></div>
-            <div class="sub"><span class="muted">RSI14:</span> <span id="kpiRSI">--</span></div>
-          </div>
-          <div class="kpi">
-            <div class="label">News</div>
-            <div id="newsText" class="sub">No news yet.</div>
+  <!-- TAB 1: Trading (Primary) -->
+  <section class="tabPanel active" id="tabTrade">
+    <div class="gridMain">
+      <!-- Market side -->
+      <div class="card">
+        <h2>Price & Chart</h2>
+        <div class="content">
+          <div class="grid3">
+            <div class="kpi">
+              <div class="label">Day / Price</div>
+              <div class="value" id="kpiPrice">--</div>
+              <div class="sub"><span class="muted">Day:</span> <span id="kpiDay">--</span></div>
+            </div>
+            <div class="kpi">
+              <div class="label">Indicators</div>
+              <div class="sub"><span class="muted">MA20:</span> <span id="kpiMA20">--</span></div>
+              <div class="sub"><span class="muted">MA50:</span> <span id="kpiMA50">--</span></div>
+              <div class="sub"><span class="muted">RSI14:</span> <span id="kpiRSI">--</span></div>
+            </div>
+            <div class="kpi">
+              <div class="label">Latest news</div>
+              <div id="newsText" class="sub">No news yet.</div>
+            </div>
           </div>
-        </div>
 
-        <div style="height:10px"></div>
-        <canvas id="priceCanvas" width="1200" height="440"></canvas>
-        <div class="small muted" style="margin-top:8px;">
-          Price (white) · MA20 (blue) · MA50 (yellow) · RSI14 shown in metrics.
+          <div style="height:10px"></div>
+          <canvas id="priceCanvas" width="1200" height="440"></canvas>
+          <div class="small muted" style="margin-top:8px;">
+            Price (white) · MA20 (blue) · MA50 (yellow).
+          </div>
         </div>
       </div>
-    </section>
 
-    <section class="card">
-      <h2>Trading & Risk</h2>
-      <div class="content">
-        <div class="grid3">
-          <div class="kpi">
-            <div class="label">Cash / Equity</div>
-            <div class="sub"><span class="muted">Cash:</span> <span id="kpiCash">--</span></div>
-            <div class="sub"><span class="muted">Equity:</span> <span id="kpiEquity">--</span></div>
-            <div class="sub"><span class="muted">ROI:</span> <span id="kpiRoi">--</span></div>
+      <!-- Trading side -->
+      <div class="card">
+        <h2>Trading</h2>
+        <div class="content">
+          <div class="grid2">
+            <div class="kpi">
+              <div class="label">Cash / Equity</div>
+              <div class="sub"><span class="muted">Cash:</span> <span id="kpiCash">--</span></div>
+              <div class="sub"><span class="muted">Equity:</span> <span id="kpiEquity">--</span></div>
+              <div class="sub"><span class="muted">ROI:</span> <span id="kpiRoi">--</span></div>
+            </div>
+
+            <div class="kpi">
+              <div class="label">Position</div>
+              <div class="sub"><span class="muted">Shares:</span> <span id="kpiPos">--</span></div>
+              <div class="sub"><span class="muted">Avg cost:</span> <span id="kpiAvg">--</span></div>
+              <div class="sub"><span class="muted">Break-even:</span> <span id="kpiBE">--</span></div>
+              <div class="sub"><span class="muted">Unrealized P&L:</span> <span id="kpiUPnL">--</span></div>
+            </div>
+
+            <div class="kpi">
+              <div class="label">Margin</div>
+              <div class="sub"><span class="muted">Max leverage:</span> <span class="mono" id="kpiLevMax">--</span></div>
+              <div class="sub"><span class="muted">Used:</span> <span class="mono" id="kpiMarginUsed">--</span></div>
+              <div class="sub"><span class="muted">Utilization:</span> <span class="mono" id="kpiMarginPct">--</span></div>
+              <div class="sub"><span class="muted">Borrow fee (short):</span> <span class="mono" id="kpiBorrowFee">--</span></div>
+            </div>
+
+            <div class="kpi">
+              <div class="label">Stops</div>
+              <div class="row" style="margin-top:8px;">
+                <label class="small muted">Stop</label>
+                <input id="stopLoss" type="number" placeholder="price" step="0.01"/>
+                <label class="small muted">TP</label>
+                <input id="takeProfit" type="number" placeholder="price" step="0.01"/>
+              </div>
+              <div class="row" style="margin-top:8px;">
+                <button class="secondary" id="setStopsBtn" type="button">Set</button>
+                <button class="secondary" id="clearStopsBtn" type="button">Clear</button>
+              </div>
+              <div class="sub"><span class="muted">Active SL:</span> <span id="kpiSL">--</span> · <span class="muted">TP:</span> <span id="kpiTP">--</span></div>
+            </div>
           </div>
-          <div class="kpi">
-            <div class="label">Position</div>
-            <div class="sub"><span class="muted">Shares:</span> <span id="kpiPos">--</span></div>
-            <div class="sub"><span class="muted">Avg cost:</span> <span id="kpiAvg">--</span></div>
-            <div class="sub"><span class="muted">Break-even:</span> <span id="kpiBE">--</span></div>
-            <div class="sub"><span class="muted">Unrealized P&L:</span> <span id="kpiUPnL">--</span></div>
+
+          <div style="height:12px"></div>
+
+          <div id="warnBox" class="warn" style="display:none;">
+            <div class="small"><b>Margin warning</b>: utilization is high. Reduce exposure.</div>
           </div>
-          <div class="kpi">
-            <div class="label">Margin</div>
-            <div class="sub"><span class="muted">Max leverage:</span> <span class="mono" id="kpiLevMax">--</span></div>
-            <div class="sub"><span class="muted">Used:</span> <span class="mono" id="kpiMarginUsed">--</span></div>
-            <div class="sub"><span class="muted">Utilization:</span> <span class="mono" id="kpiMarginPct">--</span></div>
-            <div class="sub"><span class="muted">Borrow fee (short):</span> <span class="mono" id="kpiBorrowFee">--</span></div>
+          <div id="liqBox" class="danger" style="display:none;">
+            <div class="small"><b>Liquidated</b>: equity is below zero. Trading disabled.</div>
           </div>
-        </div>
 
-        <div style="height:12px"></div>
+          <div style="height:12px"></div>
+
+          <div class="row">
+            <label class="small muted">Qty</label>
+            <input id="qty" type="number" value="100" min="1" step="1"/>
+            <button class="buy" id="buyBtn" type="button">Buy (B)</button>
+            <button class="sell" id="sellBtn" type="button">Sell (S)</button>
+            <button class="secondary" id="closeBtn" type="button">Close pos (C)</button>
+            <button class="secondary" id="resetBtn" type="button" title="Reset local portfolio only">Reset</button>
+          </div>
 
-        <div id="warnBox" class="warn" style="display:none;">
-          <div class="small"><b>Margin warning</b>: utilization is high. Consider reducing position.</div>
+          <div class="small muted" style="margin-top:10px;">
+            Shorting enabled. Leverage-limited. Keyboard: B/S/C, and 1..5 set quick quantities.
+          </div>
         </div>
-        <div id="liqBox" class="danger" style="display:none;">
-          <div class="small"><b>Liquidated</b>: equity is below zero. Trading is disabled for this player.</div>
+      </div>
+    </div>
+  </section>
+
+  <!-- TAB 2: Stats (Secondary) -->
+  <section class="tabPanel" id="tabStats">
+    <div class="gridSecondary">
+      <div class="card">
+        <h2>Leaderboard</h2>
+        <div class="content">
+          <table>
+            <thead>
+              <tr>
+                <th>Name</th>
+                <th class="right">Equity</th>
+                <th class="right">ROI %</th>
+              </tr>
+            </thead>
+            <tbody id="lbBody">
+              <tr><td colspan="3" class="muted">Waiting for ticks…</td></tr>
+            </tbody>
+          </table>
         </div>
+      </div>
 
-        <div style="height:12px"></div>
-
-        <div class="row">
-          <label class="small muted">Qty</label>
-          <input id="qty" type="number" value="100" min="1" step="1"/>
-          <button class="buy" id="buyBtn">Buy (B)</button>
-          <button class="sell" id="sellBtn">Sell (S)</button>
-          <button class="secondary" id="closeBtn">Close pos (C)</button>
-          <button class="secondary" id="resetBtn" title="Reset local portfolio only">Reset local</button>
-        </div>
+      <div class="card">
+        <h2>Equity curve</h2>
+        <div class="content">
+          <canvas id="equityCanvas" width="1200" height="320"></canvas>
+          <div class="small muted" style="margin-top:8px;">Equity curve (last 200 points).</div>
 
-        <div style="height:12px"></div>
-
-        <div class="grid2">
-          <div class="kpi">
-            <div class="label">Stops</div>
-            <div class="row" style="margin-top:8px;">
-              <label class="small muted">Stop-loss</label>
-              <input id="stopLoss" type="number" placeholder="price" step="0.01"/>
-              <label class="small muted">Take-profit</label>
-              <input id="takeProfit" type="number" placeholder="price" step="0.01"/>
-              <button class="secondary" id="setStopsBtn">Set</button>
-              <button class="secondary" id="clearStopsBtn">Clear</button>
-            </div>
-            <div class="sub"><span class="muted">Active SL:</span> <span id="kpiSL">--</span> · <span class="muted">TP:</span> <span id="kpiTP">--</span></div>
-          </div>
+          <div style="height:10px"></div>
 
           <div class="kpi">
             <div class="label">Performance (session)</div>
@@ -178,80 +270,43 @@
             <div class="sub"><span class="muted">Sharpe (est):</span> <span id="mSharpe">--</span></div>
           </div>
         </div>
-
-        <div style="height:10px"></div>
-        <canvas id="equityCanvas" width="1200" height="320"></canvas>
-        <div class="small muted" style="margin-top:8px;">Equity curve (last 200 points).</div>
       </div>
-    </section>
-  </div>
 
-  <div class="col">
-    <section class="card">
-      <h2>Leaderboard</h2>
-      <div class="content">
-        <table>
-          <thead>
-            <tr>
-              <th>Name</th>
-              <th class="right">Equity</th>
-              <th class="right">ROI %</th>
-            </tr>
-          </thead>
-          <tbody id="lbBody">
-            <tr><td colspan="3" class="muted">Waiting for ticks…</td></tr>
-          </tbody>
-        </table>
-      </div>
-    </section>
-
-    <section class="card">
-      <h2>Trade history</h2>
-      <div class="content">
-        <table>
-          <thead>
-            <tr>
-              <th>Action</th>
-              <th class="right">Qty</th>
-              <th class="right">Price</th>
-              <th class="right">Day</th>
-              <th class="right">Realized P&L</th>
-            </tr>
-          </thead>
-          <tbody id="tradesBody">
-            <tr><td colspan="5" class="muted">No trades yet.</td></tr>
-          </tbody>
-        </table>
+      <div class="card" style="grid-column: 1 / -1;">
+        <h2>Trade history</h2>
+        <div class="content">
+          <table>
+            <thead>
+              <tr>
+                <th>Action</th>
+                <th class="right">Qty</th>
+                <th class="right">Price</th>
+                <th class="right">Day</th>
+                <th class="right">Realized P&L</th>
+              </tr>
+            </thead>
+            <tbody id="tradesBody">
+              <tr><td colspan="5" class="muted">No trades yet.</td></tr>
+            </tbody>
+          </table>
+        </div>
       </div>
-    </section>
-  </div>
+    </div>
+  </section>
 </main>
 
 <script>
-  // -----------------------------
-  // Constants / risk parameters
-  // -----------------------------
+  // --------- Constants / risk parameters ----------
   const INITIAL_CASH = 10000;
   const COMMISSION = 5;
 
-  // Leverage / margin model (simple, game-friendly):
-  // - Exposure = |shares| * price
-  // - Required margin = Exposure / MAX_LEVERAGE
-  // - Used margin % = Required margin / equity
-  // - Margin warning above 80%, liquidation at equity <= 0
   const MAX_LEVERAGE = 3.0;
+  const BORROW_RATE_PER_DAY = 0.0002;
 
-  // Borrow cost for short positions (simple):
-  // daily borrow fee = BORROW_RATE_PER_DAY * exposure
-  const BORROW_RATE_PER_DAY = 0.0002; // 2 bps per day on short exposure
-
-  // Chart window sizes
   const PRICE_WINDOW = 120;
   const EQUITY_WINDOW = 200;
 
-  // -----------------------------
-  // State
-  // -----------------------------
+  // --------- State ----------
   const state = {
     ws: null,
     wsStatus: "DISCONNECTED",
@@ -262,7 +317,7 @@
     price: 0,
 
     cash: INITIAL_CASH,
-    shares: 0,       // can be negative (short)
+    shares: 0,
     avgCost: 0,
 
     equity: INITIAL_CASH,
@@ -272,9 +327,9 @@
     stopLoss: null,
     takeProfit: null,
 
-    equityCurve: [],        // {day, equity}
-    tradeLog: [],           // executed trades
-    openLots: [],           // FIFO lots for realized P&L: [{qty, price}] qty sign follows position direction
+    equityCurve: [],
+    tradeLog: [],
+    openLots: [],
 
     leaderboard: [],
 
@@ -282,9 +337,7 @@
     liquidationDay: null
   };
 
-  // -----------------------------
-  // DOM helpers
-  // -----------------------------
+  // --------- DOM helpers ----------
   const $ = (id) => document.getElementById(id);
 
   function fmtMoney(x){ return Number.isFinite(x) ? x.toLocaleString(undefined,{maximumFractionDigits:0}) : "--"; }
@@ -311,9 +364,27 @@
     }[c]));
   }
 
-  // -----------------------------
-  // Indicators
-  // -----------------------------
+  // --------- Tabs ----------
+  function setTab(which){
+    const tTrade = $("tabTrade"), tStats = $("tabStats");
+    const bTrade = $("tabBtnTrade"), bStats = $("tabBtnStats");
+
+    if (which === "trade"){
+      tTrade.classList.add("active");
+      tStats.classList.remove("active");
+      bTrade.classList.add("active");
+      bStats.classList.remove("active");
+    } else {
+      tStats.classList.add("active");
+      tTrade.classList.remove("active");
+      bStats.classList.add("active");
+      bTrade.classList.remove("active");
+    }
+  }
+  $("tabBtnTrade").addEventListener("click", () => setTab("trade"));
+  $("tabBtnStats").addEventListener("click", () => setTab("stats"));
+
+  // --------- Indicators ----------
   function sma(values, period){
     if (values.length < period) return null;
     let sum = 0;
@@ -336,19 +407,13 @@
     return 100 - (100 / (1 + rs));
   }
 
-  // -----------------------------
-  // Charts (Canvas API)
-  // -----------------------------
-  // Canvas is designed for drawing/visualization via JS. [web:1]
+  // --------- Charts (Canvas API) ----------
   function drawLineChart(canvas, series, opts){
     const ctx = canvas.getContext("2d");
     const w = canvas.width, h = canvas.height;
     ctx.clearRect(0,0,w,h);
-
-    // background
     ctx.fillStyle = "rgba(0,0,0,0.08)";
     ctx.fillRect(0,0,w,h);
-
     if (!series || series.length < 2) return;
 
     const pad = 30;
@@ -360,7 +425,6 @@
     const yr = (ymax - ymin) || 1;
     const xr = (xmax - xmin) || 1;
 
-    // grid
     ctx.strokeStyle = "rgba(170,178,213,0.12)";
     ctx.lineWidth = 1;
     for (let i=0;i<=5;i++){
@@ -374,7 +438,6 @@
     const toX = (x) => pad + (w-2*pad) * ((x - xmin)/xr);
     const toY = (y) => h - pad - (h-2*pad) * ((y - ymin)/yr);
 
-    // main line
     ctx.strokeStyle = opts.color || "#ffffff";
     ctx.lineWidth = opts.width || 2;
     ctx.beginPath();
@@ -386,7 +449,6 @@
     }
     ctx.stroke();
 
-    // optional overlays
     if (opts.overlays){
       for (const ov of opts.overlays){
         if (!ov.series || ov.series.length < 2) continue;
@@ -403,27 +465,15 @@
       }
     }
 
-    // label
     ctx.fillStyle = "rgba(170,178,213,0.8)";
     ctx.font = "18px ui-monospace, Menlo, Consolas";
     ctx.fillText(opts.label || "", pad, 22);
   }
 
-  // -----------------------------
-  // Portfolio / risk computations
-  // -----------------------------
-  function exposure(){
-    return Math.abs(state.shares) * state.price;
-  }
-
-  function requiredMargin(){
-    return exposure() / MAX_LEVERAGE;
-  }
-
-  function marginUtil(){
-    if (state.equity <= 0) return 1;
-    return requiredMargin() / state.equity;
-  }
+  // --------- Portfolio / risk ----------
+  function exposure(){ return Math.abs(state.shares) * state.price; }
+  function requiredMargin(){ return exposure() / MAX_LEVERAGE; }
+  function marginUtil(){ if (state.equity <= 0) return 1; return requiredMargin() / state.equity; }
 
   function applyBorrowFeeOneDay(){
     if (state.shares < 0){
@@ -432,20 +482,22 @@
     }
   }
 
+  function breakEvenPrice(){
+    if (state.shares === 0) return null;
+    return state.avgCost;
+  }
+
   function recalc(){
-    // borrow fee once per tick/day
     applyBorrowFeeOneDay();
 
-    // unrealized P&L; works for long and short
     state.upnl = (state.price - state.avgCost) * state.shares;
-
     state.equity = state.cash + state.shares * state.price;
     state.roi = ((state.equity - INITIAL_CASH) / INITIAL_CASH) * 100;
 
-    // liquidation: equity <= 0 => stop trading and stop reporting
     if (!state.liquidated && state.equity <= 0){
       state.liquidated = true;
       state.liquidationDay = state.day;
+
       $("liqBox").style.display = "block";
       $("buyBtn").disabled = true;
       $("sellBtn").disabled = true;
@@ -457,15 +509,11 @@
       $("takeProfit").disabled = true;
     }
 
-    // margin warning
-    const mu = marginUtil();
-    $("warnBox").style.display = (!state.liquidated && mu >= 0.80) ? "block" : "none";
+    $("warnBox").style.display = (!state.liquidated && marginUtil() >= 0.80) ? "block" : "none";
 
-    // push equity curve
     state.equityCurve.push({ day: state.day, equity: state.equity });
     if (state.equityCurve.length > 5000) state.equityCurve.shift();
 
-    // stops: only when position exists and not liquidated
     if (!state.liquidated && state.shares !== 0){
       if (state.stopLoss !== null){
         if (state.shares > 0 && state.price <= state.stopLoss) closePosition("STOP");
@@ -478,25 +526,10 @@
     }
   }
 
-  function breakEvenPrice(){
-    if (state.shares === 0) return null;
-    // With commission and borrow fee, BE is approximate; use avgCost as BE reference.
-    return state.avgCost;
-  }
-
-  // -----------------------------
-  // Realized P&L (FIFO lots)
-  // -----------------------------
-  // openLots contains lots with qty sign matching the position direction when opened:
-  // long lots: qty > 0, short lots: qty < 0
-  function addLot(qty, price){
-    state.openLots.push({ qty, price });
-  }
+  // --------- FIFO lots for realized P&L ----------
+  function addLot(qty, price){ state.openLots.push({ qty, price }); }
 
   function consumeLots(closeQty, closePrice){
-    // closeQty has opposite sign of the lots being closed? We'll pass closeQty with same sign as reduction:
-    // Example: if closing a long by selling 100, closeQty = -100; we reduce lots with qty>0.
-    // Example: if closing a short by buying 100, closeQty = +100; we reduce lots with qty<0.
     let remaining = Math.abs(closeQty);
     let realized = 0;
 
@@ -505,12 +538,9 @@
       const lotAbs = Math.abs(lot.qty);
       const take = Math.min(lotAbs, remaining);
 
-      // long lot (qty>0) closed by sell at closePrice => pnl = (closePrice - lot.price)*take
-      // short lot (qty<0) closed by buy at closePrice => pnl = (lot.price - closePrice)*take
       if (lot.qty > 0) realized += (closePrice - lot.price) * take;
       else realized += (lot.price - closePrice) * take;
 
-      // shrink lot
       const newAbs = lotAbs - take;
       if (newAbs === 0) state.openLots.splice(i,1);
       else {
@@ -522,25 +552,18 @@
     return realized;
   }
 
-  // -----------------------------
-  // Trading
-  // -----------------------------
+  // --------- Trading ----------
   function canPlaceTrade(tradeShares){
     if (state.liquidated) return false;
     if (!Number.isFinite(state.price) || state.price <= 0) return false;
 
-    // prospective state to enforce max leverage (simple)
     const px = state.price;
     const newShares = state.shares + tradeShares;
     const newExposure = Math.abs(newShares) * px;
-
-    // Use current equity (approx) as base; after cash delta it changes slightly,
-    // but this is good enough for a game.
     const req = newExposure / MAX_LEVERAGE;
+
     if (state.equity <= 0) return false;
-    // Require equity >= required margin
     if (state.equity < req) return false;
-
     return true;
   }
 
@@ -554,27 +577,20 @@
 
     const px = state.price;
 
-    // cashDelta = -(tradeShares*px) - commission
     const cashDelta = -(tradeShares * px) - COMMISSION;
 
-    // Realized P&L occurs when trade reduces opposite direction position
     let realized = 0;
-
     const prevShares = state.shares;
     const newShares = prevShares + tradeShares;
-
     const prevDir = Math.sign(prevShares);
     const tradeDir = Math.sign(tradeShares);
 
-    // If position existed and trade is opposite direction => closing some
     if (prevShares !== 0 && prevDir !== tradeDir){
       realized = consumeLots(tradeShares, px);
     }
 
-    // Update cash
     state.cash += cashDelta;
 
-    // Update shares + avgCost and openLots
     if (newShares === 0){
       state.shares = 0;
       state.avgCost = 0;
@@ -587,33 +603,26 @@
       const sameDir = (prevShares > 0 && newShares > 0) || (prevShares < 0 && newShares < 0);
 
       if (sameDir && prevDir === tradeDir){
-        // adding to same direction
         addLot(tradeShares, px);
-        // recompute avgCost from lots (robust)
         const totAbs = state.openLots.reduce((s,l)=>s+Math.abs(l.qty),0);
         const wavg = state.openLots.reduce((s,l)=>s+Math.abs(l.qty)*l.price,0) / (totAbs || 1);
         state.shares = newShares;
         state.avgCost = wavg;
       } else if (!sameDir){
-        // we either reduced or flipped
         state.shares = newShares;
 
         if (Math.sign(newShares) === 0){
           state.avgCost = 0;
           state.openLots = [];
         } else if (Math.sign(newShares) !== prevDir){
-          // flipped: open a new lot for the remainder beyond zero
-          // Determine remainder size: abs(newShares)
           state.openLots = [{ qty: newShares, price: px }];
           state.avgCost = px;
         } else {
-          // reduced but still same original direction; avgCost from remaining lots
           const totAbs = state.openLots.reduce((s,l)=>s+Math.abs(l.qty),0);
           const wavg = totAbs ? (state.openLots.reduce((s,l)=>s+Math.abs(l.qty)*l.price,0) / totAbs) : 0;
           state.avgCost = wavg;
         }
       } else {
-        // reduced but stayed same direction (tradeDir != prevDir can't happen in sameDir)
         state.shares = newShares;
       }
     }
@@ -621,7 +630,6 @@
     state.tradeLog.push({ action, qty, price: px, day: state.day, realized: realized - COMMISSION });
     if (state.tradeLog.length > 5000) state.tradeLog.shift();
 
-    // Recalc (includes liquidation checks & stops)
     recalc();
     renderAll();
   }
@@ -630,20 +638,14 @@
     if (state.liquidated) return;
     if (state.shares === 0) return;
 
-    // To close: trade opposite direction of current shares
     const qty = Math.abs(state.shares);
     const action = (state.shares > 0) ? "SELL" : "BUY";
-    // Mark it as a special trade entry by adding reason into action field
-    // We'll still call trade() to do proper P&L.
     trade(action, qty);
-    // tag last entry
     const last = state.tradeLog[state.tradeLog.length - 1];
     if (last) last.action = reason;
   }
 
-  // -----------------------------
-  // Rendering
-  // -----------------------------
+  // --------- Rendering ----------
   function renderLeaderboard(){
     const lb = $("lbBody");
     lb.innerHTML = "";
@@ -670,7 +672,7 @@
       tb.innerHTML = `<tr><td colspan="5" class="muted">No trades yet.</td></tr>`;
       return;
     }
-    for (const t of state.tradeLog.slice().reverse().slice(0,200)){
+    for (const t of state.tradeLog.slice().reverse().slice(0,250)){
       const tr = document.createElement("tr");
       const side = (t.action === "BUY") ? `<span class="pill buy">BUY</span>` :
                    (t.action === "SELL") ? `<span class="pill sell">SELL</span>` :
@@ -688,9 +690,7 @@
   }
 
   function renderMetrics(){
-    const trades = state.tradeLog.filter(t => ["BUY","SELL","CLOSE","STOP","TP"].includes(t.action) || t.action === "BUY" || t.action === "SELL" || t.action === "STOP" || t.action === "TP");
-    const realized = trades.map(t => t.realized);
-
+    const realized = state.tradeLog.map(t => t.realized);
     const n = realized.length;
     $("mTrades").textContent = n;
 
@@ -719,12 +719,9 @@
     $("mBest").textContent = fmtMoney(best);
     $("mWorst").textContent = fmtMoney(worst);
 
-    // Simple Sharpe estimate from equity curve returns
     const eq = state.equityCurve.slice(-300).map(p => p.equity);
-    if (eq.length < 3){
-      $("mSharpe").textContent = "--";
-      return;
-    }
+    if (eq.length < 3){ $("mSharpe").textContent = "--"; return; }
+
     const rets = [];
     for (let i=1;i<eq.length;i++){
       const r = (eq[i] - eq[i-1]) / Math.max(1e-9, eq[i-1]);
@@ -733,7 +730,7 @@
     const mean = rets.reduce((a,b)=>a+b,0)/rets.length;
     const varr = rets.reduce((s,x)=>s+(x-mean)*(x-mean),0)/Math.max(1, rets.length-1);
     const sd = Math.sqrt(varr);
-    const sharpe = sd === 0 ? 0 : (mean / sd) * Math.sqrt(252); // annualized-ish
+    const sharpe = sd === 0 ? 0 : (mean / sd) * Math.sqrt(252);
     $("mSharpe").textContent = sharpe.toFixed(2);
   }
 
@@ -770,16 +767,16 @@
   }
 
   function renderCharts(){
+    if (!state.market.length) return;
+
     const closes = state.market.map(p => p.close);
 
-    // price window
     const start = Math.max(0, state.day - PRICE_WINDOW + 1);
     const end = state.day + 1;
     const windowData = state.market.slice(start, end);
 
     const priceSeries = windowData.map(p => ({ x: p.i, y: p.close }));
 
-    // MA overlays
     const ma20 = [];
     const ma50 = [];
     for (let i=start;i<end;i++){
@@ -799,16 +796,10 @@
       ]
     });
 
-    // equity curve
     const eqWin = state.equityCurve.slice(-EQUITY_WINDOW);
     const eqSeries = eqWin.map(p => ({ x: p.day, y: p.equity }));
-    drawLineChart($("equityCanvas"), eqSeries, {
-      label: "EQUITY",
-      color: "#22c55e",
-      overlays: []
-    });
+    drawLineChart($("equityCanvas"), eqSeries, { label: "EQUITY", color: "#22c55e", overlays: [] });
 
-    // indicator KPI values
     const slice = closes.slice(0, state.day+1);
     const s20 = sma(slice, 20);
     const s50 = sma(slice, 50);
@@ -826,9 +817,7 @@
     renderMetrics();
   }
 
-  // -----------------------------
-  // Stops UI
-  // -----------------------------
+  // --------- Stops UI ----------
   $("setStopsBtn").addEventListener("click", () => {
     if (state.liquidated) return;
     const sl = ($("stopLoss").value || "").trim();
@@ -846,9 +835,7 @@
     renderKPIs();
   });
 
-  // -----------------------------
-  // Controls + shortcuts
-  // -----------------------------
+  // --------- Controls + shortcuts ----------
   function qtyVal(){ return Number($("qty").value); }
 
   $("buyBtn").addEventListener("click", () => trade("BUY", qtyVal()));
@@ -856,7 +843,6 @@
   $("closeBtn").addEventListener("click", () => closePosition("CLOSE"));
 
   $("resetBtn").addEventListener("click", () => {
-    // local reset only
     state.cash = INITIAL_CASH;
     state.shares = 0;
     state.avgCost = 0;
@@ -883,7 +869,6 @@
 
     $("stopLoss").value = "";
     $("takeProfit").value = "";
-    $("newsText").textContent = "No news yet.";
 
     recalc();
     renderAll();
@@ -902,7 +887,6 @@
     if (k === "5") $("qty").value = "500";
   });
 
-  // Make quantity input less "buggy": clamp and sanitize
   $("qty").addEventListener("input", () => {
     let v = Math.floor(Number($("qty").value));
     if (!Number.isFinite(v) || v < 1) v = 1;
@@ -910,9 +894,7 @@
     $("qty").value = String(v);
   });
 
-  // -----------------------------
-  // WebSocket
-  // -----------------------------
+  // --------- WebSocket ----------
   function connectWS(){
     const isLocalhost = (location.hostname === "localhost" || location.hostname === "127.0.0.1");
     const protocol = isLocalhost ? "ws" : "wss";
@@ -961,24 +943,18 @@
     ws.onclose = () => setStatus("DISCONNECTED");
   }
 
-  // Send UPDATE_EQUITY every second when open, unless liquidated
+  // Heartbeat: UPDATE_EQUITY every second when connected, unless liquidated
   setInterval(() => {
     if (state.liquidated) return;
     if (!state.ws || state.ws.readyState !== WebSocket.OPEN) return;
 
     state.ws.send(JSON.stringify({
       type: "UPDATE_EQUITY",
-      payload: {
-        name: state.clientId,
-        equity: state.equity,
-        roi: state.roi
-      }
+      payload: { name: state.clientId, equity: state.equity, roi: state.roi }
     }));
   }, 1000);
 
-  // -----------------------------
-  // Boot
-  // -----------------------------
+  // --------- Boot ----------
   setStatus("DISCONNECTED");
   renderAll();
   connectWS();