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/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 () {