Upload hub_dashboard.html

hub_dashboard.html

@@ -1617,6 +1617,7 @@ td.rc {
       <button class="nav-tab" onclick="switchTab('trading')">Trading</button>
       <button class="nav-tab" onclick="switchTab('logs')">Logs</button>
       <button class="nav-tab" onclick="switchTab('telemetry')">Telemetry</button>
+      <button class="nav-tab" onclick="switchTab('terminal')" style="color:#E8720A">⬛ Terminal</button>
     </div>
     <div id="nav-right">
       <div class="search-wrap">
@@ -2048,6 +2049,120 @@ td.rc {
       </div>
     </div>
 
+    <!-- ════════════════════════════════════════════════════════════════════
+         MT5-STYLE TRADE TERMINAL
+         Polls /api/trades every 2s — shows live open positions with
+         running P&L, closed trades history, and equity curve.
+         Data source: ranker log files parsed server-side.
+    ═════════════════════════════════════════════════════════════════════ -->
+    <div id="terminal-tab" class="tab-panel">
+
+      <!-- Equity summary strip -->
+      <div id="terminal-kpi-row" style="display:grid;grid-template-columns:repeat(5,1fr);gap:var(--sp-lg);margin-bottom:var(--sp-lg)">
+        <div class="panel kpi" style="border-color:rgba(232,114,10,0.25)">
+          <div class="kpi-k">Equity</div>
+          <div class="kpi-v" id="trm-equity" style="color:#E8720A;text-shadow:0 0 20px rgba(232,114,10,0.4)">—</div>
+          <div class="kpi-sub">running balance</div>
+        </div>
+        <div class="panel kpi">
+          <div class="kpi-k">Open P&amp;L</div>
+          <div class="kpi-v" id="trm-open-pnl">—</div>
+          <div class="kpi-sub" id="trm-open-count">0 positions</div>
+        </div>
+        <div class="panel kpi">
+          <div class="kpi-k">Realized P&amp;L</div>
+          <div class="kpi-v" id="trm-realized-pnl">—</div>
+          <div class="kpi-sub" id="trm-closed-count">0 closed trades</div>
+        </div>
+        <div class="panel kpi">
+          <div class="kpi-k">Win Rate</div>
+          <div class="kpi-v c-cyan" id="trm-winrate">—</div>
+          <div class="kpi-sub" id="trm-wl">W:0 / L:0</div>
+        </div>
+        <div class="panel kpi">
+          <div class="kpi-k">Avg P&amp;L / Trade</div>
+          <div class="kpi-v" id="trm-avg-pnl">—</div>
+          <div class="kpi-sub">per closed trade</div>
+        </div>
+      </div>
+
+      <!-- Equity curve -->
+      <div class="panel" style="margin-bottom:var(--sp-lg)">
+        <div class="panel-hd">
+          <div class="panel-hd-left">
+            <div class="panel-hd-pip" style="background:#E8720A;box-shadow:0 0 10px rgba(232,114,10,0.5)"></div>
+            <span class="panel-hd-label">Equity Curve</span>
+          </div>
+          <span class="panel-hd-meta" id="trm-curve-meta">—</span>
+        </div>
+        <div style="padding:var(--sp-lg);height:160px">
+          <canvas id="trm-equity-chart"></canvas>
+        </div>
+      </div>
+
+      <!-- Open Positions -->
+      <div class="panel" style="margin-bottom:var(--sp-lg)">
+        <div class="panel-hd">
+          <div class="panel-hd-left">
+            <div class="panel-hd-pip" style="background:var(--green);box-shadow:0 0 10px var(--green-glow)"></div>
+            <span class="panel-hd-label">Open Positions</span>
+          </div>
+          <span class="panel-hd-meta" id="trm-open-meta">live · updates every 2s</span>
+        </div>
+        <div style="overflow-x:auto">
+          <table id="trm-open-table" style="width:100%;border-collapse:collapse">
+            <thead>
+              <tr id="trm-open-head">
+                <th style="padding:10px 16px;text-align:left;font-size:0.6rem;font-weight:800;letter-spacing:0.16em;color:var(--t3);border-bottom:1px solid rgba(255,255,255,0.05)">TRADE ID</th>
+                <th style="padding:10px 16px;font-size:0.6rem;font-weight:800;letter-spacing:0.16em;color:var(--t3);border-bottom:1px solid rgba(255,255,255,0.05)">ASSET</th>
+                <th style="padding:10px 16px;font-size:0.6rem;font-weight:800;letter-spacing:0.16em;color:var(--t3);border-bottom:1px solid rgba(255,255,255,0.05)">DIR</th>
+                <th style="padding:10px 16px;text-align:right;font-size:0.6rem;font-weight:800;letter-spacing:0.16em;color:var(--t3);border-bottom:1px solid rgba(255,255,255,0.05)">ENTRY</th>
+                <th style="padding:10px 16px;text-align:right;font-size:0.6rem;font-weight:800;letter-spacing:0.16em;color:var(--t3);border-bottom:1px solid rgba(255,255,255,0.05)">QTY</th>
+                <th style="padding:10px 16px;text-align:right;font-size:0.6rem;font-weight:800;letter-spacing:0.16em;color:var(--t3);border-bottom:1px solid rgba(255,255,255,0.05)">OPEN P&amp;L</th>
+                <th style="padding:10px 16px;text-align:right;font-size:0.6rem;font-weight:800;letter-spacing:0.16em;color:var(--t3);border-bottom:1px solid rgba(255,255,255,0.05)">DURATION</th>
+                <th style="padding:10px 16px;text-align:right;font-size:0.6rem;font-weight:800;letter-spacing:0.16em;color:var(--t3);border-bottom:1px solid rgba(255,255,255,0.05)">OPENED</th>
+              </tr>
+            </thead>
+            <tbody id="trm-open-body">
+              <tr><td colspan="8" style="padding:32px;text-align:center;color:var(--t4);font-size:0.75rem">No open positions</td></tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <!-- Closed Trades History -->
+      <div class="panel">
+        <div class="panel-hd">
+          <div class="panel-hd-left">
+            <div class="panel-hd-pip" style="background:var(--t3)"></div>
+            <span class="panel-hd-label">Trade History</span>
+          </div>
+          <span class="panel-hd-meta" id="trm-hist-meta">last 100 closed trades</span>
+        </div>
+        <div style="overflow-x:auto;max-height:420px;overflow-y:auto">
+          <table id="trm-hist-table" style="width:100%;border-collapse:collapse">
+            <thead style="position:sticky;top:0;background:rgba(0,8,20,0.95);backdrop-filter:blur(8px)">
+              <tr>
+                <th style="padding:10px 16px;text-align:left;font-size:0.6rem;font-weight:800;letter-spacing:0.16em;color:var(--t3);border-bottom:1px solid rgba(255,255,255,0.05)">TRADE ID</th>
+                <th style="padding:10px 16px;font-size:0.6rem;font-weight:800;letter-spacing:0.16em;color:var(--t3);border-bottom:1px solid rgba(255,255,255,0.05)">ASSET</th>
+                <th style="padding:10px 16px;font-size:0.6rem;font-weight:800;letter-spacing:0.16em;color:var(--t3);border-bottom:1px solid rgba(255,255,255,0.05)">DIR</th>
+                <th style="padding:10px 16px;text-align:right;font-size:0.6rem;font-weight:800;letter-spacing:0.16em;color:var(--t3);border-bottom:1px solid rgba(255,255,255,0.05)">ENTRY</th>
+                <th style="padding:10px 16px;text-align:right;font-size:0.6rem;font-weight:800;letter-spacing:0.16em;color:var(--t3);border-bottom:1px solid rgba(255,255,255,0.05)">EXIT</th>
+                <th style="padding:10px 16px;text-align:right;font-size:0.6rem;font-weight:800;letter-spacing:0.16em;color:var(--t3);border-bottom:1px solid rgba(255,255,255,0.05)">QTY</th>
+                <th style="padding:10px 16px;text-align:right;font-size:0.6rem;font-weight:800;letter-spacing:0.16em;color:var(--t3);border-bottom:1px solid rgba(255,255,255,0.05)">P&amp;L</th>
+                <th style="padding:10px 16px;text-align:right;font-size:0.6rem;font-weight:800;letter-spacing:0.16em;color:var(--t3);border-bottom:1px solid rgba(255,255,255,0.05)">DURATION</th>
+                <th style="padding:10px 16px;text-align:right;font-size:0.6rem;font-weight:800;letter-spacing:0.16em;color:var(--t3);border-bottom:1px solid rgba(255,255,255,0.05)">CLOSED</th>
+              </tr>
+            </thead>
+            <tbody id="trm-hist-body">
+              <tr><td colspan="9" style="padding:32px;text-align:center;color:var(--t4);font-size:0.75rem">No trade history</td></tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+    </div><!-- /terminal-tab -->
+
   </main>
 </div>