Add tabbed layout for options positions card.

Split current positions, stats, and history into tabs to save vertical space and improve readability.

Co-authored-by: Cursor <cursoragent@cursor.com>

lib/common/static/instance_theme.css

@@ -3033,7 +3033,8 @@ html[data-theme="light"] .opt-be-dist-down {
 }
 .options-chain-toolbar .btn-secondary.active,
 .opt-uly-btn.active,
-.opt-type-btn.active {
+.opt-type-btn.active,
+.opt-pos-tab.active {
   border-color: #5b8cff;
   color: #cfe0ff;
   background: rgba(74, 124, 255, 0.28);
@@ -3191,13 +3192,49 @@ html[data-theme="light"] .options-estimate-row {
   flex-direction: column;
   min-height: 0;
 }
-.options-pos-stack {
+.options-pos-stack,
+.options-pos-tab-body {
   flex: 1;
   display: flex;
   flex-direction: column;
   gap: 8px;
   min-height: 0;
 }
+.options-pos-tabs {
+  display: flex;
+  gap: 6px;
+  margin-bottom: 8px;
+}
+.opt-pos-tab {
+  flex: 1;
+  font-size: 0.78rem;
+  padding: 6px 8px;
+  min-height: 32px;
+  white-space: nowrap;
+}
+.opt-pos-tab.active {
+  border-color: #5b8cff;
+  color: #cfe0ff;
+  background: rgba(74, 124, 255, 0.28);
+}
+.options-pos-pane {
+  display: none;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+}
+.options-pos-pane.is-active {
+  display: flex;
+}
+.options-pos-live-pane {
+  flex: 1;
+  min-height: 180px;
+  max-height: 420px;
+  overflow-y: auto;
+}
+.options-pos-live-pane.options-pos-live-pane--accordion {
+  max-height: 480px;
+}
 .options-pos-subcard {
   display: flex;
   flex-direction: column;
@@ -3213,22 +3250,14 @@ html[data-theme="light"] .options-estimate-row {
   font-size: 0.78rem;
   color: #b8c0dc;
 }
-.options-pos-live-pane {
-  flex: 1;
-  min-height: 100px;
-  max-height: 220px;
-  overflow-y: auto;
-}
-.options-pos-live-pane.options-pos-live-pane--accordion {
-  max-height: 360px;
-}
 .options-pos-stats-card {
   flex-shrink: 0;
 }
 .options-stats-grid {
   display: flex;
   flex-wrap: wrap;
-  gap: 8px 14px;
+  gap: 10px 16px;
+  padding: 4px 2px 8px;
 }
 .options-stat-item {
   display: flex;
@@ -3399,7 +3428,8 @@ html[data-theme="light"] .options-estimate-row {
   flex: 1;
   overflow-y: auto;
   overflow-x: auto;
-  min-height: 120px;
+  min-height: 180px;
+  max-height: 420px;
 }
 .opt-history-table {
   table-layout: fixed;
@@ -3485,19 +3515,6 @@ html[data-theme="light"] .options-estimate-row {
 .options-pos-head h2 {
   margin: 0;
 }
-.options-pos-tabs {
-  display: flex;
-  gap: 8px;
-  margin-bottom: 10px;
-}
-.opt-pos-tab.active {
-  border-color: #5b8cff;
-  color: #cfe0ff;
-  background: rgba(74, 124, 255, 0.28);
-}
-.options-pos-pane {
-  min-height: 200px;
-}
 .opt-pos-card {
   margin-bottom: 10px;
 }

lib/common/static/options_panel.js

@@ -15,6 +15,7 @@
     selectedInst: null,
     orderQuote: null,
     expandedPosInst: null,
+    posTab: "live",
   };
 
   let lastGoodPositions = null;
@@ -576,6 +577,33 @@
     }
   }
 
+  function setOptionsPosTab(tabId) {
+    const tab = tabId || "live";
+    state.posTab = tab;
+    document.querySelectorAll(".opt-pos-tab").forEach(function (btn) {
+      const on = btn.getAttribute("data-opt-pos-tab") === tab;
+      btn.classList.toggle("active", on);
+      btn.setAttribute("aria-selected", on ? "true" : "false");
+    });
+    document.querySelectorAll("[data-opt-pos-pane]").forEach(function (pane) {
+      const on = pane.getAttribute("data-opt-pos-pane") === tab;
+      pane.classList.toggle("is-active", on);
+      pane.hidden = !on;
+    });
+    if (tab === "live" && window.OptionsExpiryCountdown && OptionsExpiryCountdown.ensureTimer) {
+      OptionsExpiryCountdown.ensureTimer();
+    }
+  }
+
+  function bindOptionsPosTabs() {
+    document.querySelectorAll(".opt-pos-tab").forEach(function (btn) {
+      btn.addEventListener("click", function () {
+        setOptionsPosTab(btn.getAttribute("data-opt-pos-tab"));
+      });
+    });
+    setOptionsPosTab(state.posTab);
+  }
+
   function resolvePositionsList(d) {
     const now = Date.now();
     const list = (d && d.ok && d.positions) ? d.positions : [];
@@ -785,6 +813,7 @@
   document.getElementById("opt-load-chain").addEventListener("click", loadChain);
   document.getElementById("opt-refresh-positions").addEventListener("click", refreshAllPositions);
   document.getElementById("opt-open-btn").addEventListener("click", openPosition);
+  bindOptionsPosTabs();
 
   document.querySelectorAll('input[name="opt-size-mode"]').forEach(function (r) {
     r.addEventListener("change", function () {