@forgecharts/sdk 1.1.31 → 1.1.32

package/dist/react/internal.js

@@ -9338,8 +9338,9 @@ function VisibilityTool({
     )) })
   ] });
 }
-function LeftToolbar({ activeTool, onSelectTool, drawingFavorites, onDrawingFavoritesChange, onVisibilityAction, visibilityActiveAction, onVisibilityDeactivate, onLinkClick, onDeleteClick }) {
+function LeftToolbar({ activeTool, onSelectTool, drawingFavorites, onDrawingFavoritesChange, onVisibilityAction, visibilityActiveAction, onVisibilityDeactivate, onLinkClick, onDeleteClick, onLogout, user }) {
   const [favorites, setFavorites] = useState(drawingFavorites ?? []);
+  const [profileOpen, setProfileOpen] = useState(false);
   const handleFavoritesChange = (favs) => {
     setFavorites(favs);
     onDrawingFavoritesChange?.(favs);
@@ -9358,7 +9359,8 @@ function LeftToolbar({ activeTool, onSelectTool, drawingFavorites, onDrawingFavo
           borderRadius: 8,
           width: 40,
           flexShrink: 0,
-          userSelect: "none"
+          userSelect: "none",
+          height: "100%"
         },
         children: [
           /* @__PURE__ */ jsx(PointerGroup, { activeTool, onSelectTool }),
@@ -9439,6 +9441,29 @@ function LeftToolbar({ activeTool, onSelectTool, drawingFavorites, onDrawingFavo
                 /* @__PURE__ */ jsx("line", { x1: "9", y1: "6.5", x2: "9", y2: "11.5" })
               ] })
             }
+          ),
+          /* @__PURE__ */ jsx("div", { style: { flex: 1 } }),
+          (user || onLogout) && /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: "drawing-tool-btn profile-avatar-btn",
+              title: "Profile",
+              onClick: () => setProfileOpen(true),
+              children: (user?.username?.[0] ?? user?.email?.[0] ?? "?").toUpperCase()
+            }
+          ),
+          onLogout && /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: "drawing-tool-btn",
+              title: "Log out",
+              onClick: onLogout,
+              children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 16 16", width: "15", height: "15", stroke: "currentColor", fill: "none", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                /* @__PURE__ */ jsx("path", { d: "M6 2H3a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h3" }),
+                /* @__PURE__ */ jsx("polyline", { points: "11 11 14 8 11 5" }),
+                /* @__PURE__ */ jsx("line", { x1: "14", y1: "8", x2: "6", y2: "8" })
+              ] })
+            }
           )
         ]
       }
@@ -9450,6 +9475,49 @@ function LeftToolbar({ activeTool, onSelectTool, drawingFavorites, onDrawingFavo
         activeTool,
         onSelectTool
       }
+    ),
+    profileOpen && ReactDOM.createPortal(
+      /* @__PURE__ */ jsx("div", { className: "profile-drawer-overlay", onClick: () => setProfileOpen(false), children: /* @__PURE__ */ jsxs("div", { className: "profile-drawer", onClick: (e) => e.stopPropagation(), children: [
+        /* @__PURE__ */ jsxs("div", { className: "profile-drawer-header", children: [
+          /* @__PURE__ */ jsx("span", { children: "Profile" }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: "profile-drawer-close-btn",
+              onClick: () => setProfileOpen(false),
+              title: "Close",
+              children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 14 14", width: "12", height: "12", stroke: "currentColor", fill: "none", strokeWidth: "2", strokeLinecap: "round", children: [
+                /* @__PURE__ */ jsx("line", { x1: "2", y1: "2", x2: "12", y2: "12" }),
+                /* @__PURE__ */ jsx("line", { x1: "12", y1: "2", x2: "2", y2: "12" })
+              ] })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "profile-drawer-avatar", children: (user?.username?.[0] ?? user?.email?.[0] ?? "?").toUpperCase() }),
+        user?.username && /* @__PURE__ */ jsx("div", { className: "profile-drawer-name", children: user.username }),
+        user?.email && /* @__PURE__ */ jsx("div", { className: "profile-drawer-email", children: user.email }),
+        user?.role && /* @__PURE__ */ jsx("div", { className: "profile-drawer-role", children: /* @__PURE__ */ jsx("span", { className: "profile-drawer-role-badge", children: user.role }) }),
+        /* @__PURE__ */ jsx("div", { style: { flex: 1 } }),
+        onLogout && /* @__PURE__ */ jsx("div", { className: "profile-drawer-footer", children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            className: "profile-drawer-logout-btn",
+            onClick: () => {
+              setProfileOpen(false);
+              onLogout();
+            },
+            children: [
+              /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 16 16", width: "14", height: "14", stroke: "currentColor", fill: "none", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                /* @__PURE__ */ jsx("path", { d: "M6 2H3a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h3" }),
+                /* @__PURE__ */ jsx("polyline", { points: "11 11 14 8 11 5" }),
+                /* @__PURE__ */ jsx("line", { x1: "14", y1: "8", x2: "6", y2: "8" })
+              ] }),
+              "Log out"
+            ]
+          }
+        ) })
+      ] }) }),
+      document.body
     )
   ] });
 }
@@ -9906,7 +9974,9 @@ var ChartCanvas = forwardRef(
     priceFraction: priceFractionProp,
     onPriceFractionChange,
     getExchangeLogoUrl,
-    tradingBridge
+    tradingBridge,
+    onLogout,
+    user
   }, ref) {
     const outerRef = useRef(null);
     const priceRef = useRef(null);
@@ -10289,7 +10359,9 @@ var ChartCanvas = forwardRef(
               onVisibilityAction: handleVisibilityAction,
               visibilityActiveAction,
               onVisibilityDeactivate: handleVisibilityDeactivate,
-              onDeleteClick: () => chartRef.current?.deleteSelectedDrawing()
+              onDeleteClick: () => chartRef.current?.deleteSelectedDrawing(),
+              ...onLogout ? { onLogout } : {},
+              ...user ? { user } : {}
             }
           ),
           /* @__PURE__ */ jsxs(
@@ -10314,6 +10386,29 @@ var ChartCanvas = forwardRef(
                 crosshairXRef.current = null;
               },
               children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      position: "absolute",
+                      bottom: 36,
+                      left: 8,
+                      zIndex: 5,
+                      pointerEvents: "none",
+                      fontFamily: "system-ui, -apple-system, 'Segoe UI', sans-serif",
+                      fontSize: 16,
+                      fontWeight: 900,
+                      letterSpacing: "-0.03em",
+                      background: "linear-gradient(90deg, var(--text, #fff) 20%, rgba(128,128,128,0.7) 100%)",
+                      WebkitBackgroundClip: "text",
+                      WebkitTextFillColor: "transparent",
+                      backgroundClip: "text",
+                      opacity: 0.45,
+                      userSelect: "none"
+                    },
+                    children: "ForgeCharts"
+                  }
+                ),
                 /* @__PURE__ */ jsxs(
                   "div",
                   {
@@ -11622,8 +11717,6 @@ function TopToolbar({
         flexShrink: 0
       },
       children: [
-        /* @__PURE__ */ jsx("span", { style: { fontWeight: 700, letterSpacing: "-0.5px", color: "var(--accent)" }, children: "ForgeCharts" }),
-        /* @__PURE__ */ jsx("div", { className: "toolbar-sep" }),
         /* @__PURE__ */ jsxs(
           "button",
           {
@@ -11824,6 +11917,11 @@ function TopToolbar({
     }
   );
 }
+var OrderEntryIcon = () => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 16 16", width: "16", height: "16", fill: "none", stroke: "currentColor", strokeWidth: "1.4", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx("rect", { x: "2", y: "2", width: "12", height: "12", rx: "1.5" }),
+  /* @__PURE__ */ jsx("line", { x1: "5", y1: "8", x2: "11", y2: "8" }),
+  /* @__PURE__ */ jsx("line", { x1: "8", y1: "5", x2: "8", y2: "11" })
+] });
 var WatchListIcon = () => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 16 16", width: "16", height: "16", stroke: "currentColor", fill: "none", strokeWidth: "1.5", children: [
   /* @__PURE__ */ jsx("rect", { x: "2", y: "3", width: "12", height: "1.5", rx: "0.5", fill: "currentColor", stroke: "none" }),
   /* @__PURE__ */ jsx("rect", { x: "2", y: "7", width: "9", height: "1.5", rx: "0.5", fill: "currentColor", stroke: "none" }),
@@ -11832,8 +11930,8 @@ var WatchListIcon = () => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 16 16", wi
   /* @__PURE__ */ jsx("line", { x1: "13", y1: "10.75", x2: "13", y2: "12.75", strokeWidth: "1.2" }),
   /* @__PURE__ */ jsx("line", { x1: "12", y1: "11.75", x2: "14", y2: "11.75", strokeWidth: "1.2" })
 ] });
-function RightToolbar({ watchlistOpen, onToggleWatchlist }) {
-  return /* @__PURE__ */ jsx(
+function RightToolbar({ watchlistOpen, onToggleWatchlist, orderEntryOpen, onToggleOrderEntry, showOrderEntry }) {
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       style: {
@@ -11848,15 +11946,26 @@ function RightToolbar({ watchlistOpen, onToggleWatchlist }) {
         flexShrink: 0,
         userSelect: "none"
       },
-      children: /* @__PURE__ */ jsx(
-        "button",
-        {
-          title: "Watch List",
-          className: `drawing-tool-btn${watchlistOpen ? " is-active" : ""}`,
-          onClick: onToggleWatchlist,
-          children: /* @__PURE__ */ jsx(WatchListIcon, {})
-        }
-      )
+      children: [
+        showOrderEntry !== false && /* @__PURE__ */ jsx(
+          "button",
+          {
+            title: "Order Entry",
+            className: `drawing-tool-btn${orderEntryOpen ? " is-active" : ""}`,
+            onClick: onToggleOrderEntry,
+            children: /* @__PURE__ */ jsx(OrderEntryIcon, {})
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            title: "Watch List",
+            className: `drawing-tool-btn${watchlistOpen ? " is-active" : ""}`,
+            onClick: onToggleWatchlist,
+            children: /* @__PURE__ */ jsx(WatchListIcon, {})
+          }
+        )
+      ]
     }
   );
 }
@@ -12248,6 +12357,9 @@ function ChartWorkspace({
   // RightToolbar
   watchlistOpen,
   onToggleWatchlist,
+  orderEntryOpen,
+  onToggleOrderEntry,
+  showOrderEntry,
   // BottomToolbar
   activeSymbol,
   timezone,
@@ -12366,7 +12478,11 @@ function ChartWorkspace({
               RightToolbar,
               {
                 watchlistOpen,
-                onToggleWatchlist
+                onToggleWatchlist,
+                orderEntryOpen: orderEntryOpen ?? false,
+                onToggleOrderEntry: onToggleOrderEntry ?? (() => {
+                }),
+                showOrderEntry
               }
             )
           ] }),
@@ -13467,45 +13583,930 @@ function WatchlistDrawer({ onClose, onSelectSymbol, symbolResolver }) {
   );
 }
 var BROKERS = [
-  { id: "rithmic", name: "Rithmic", description: "Futures & Forex", status: "available" },
-  { id: "ibkr", name: "Interactive Brokers", description: "Stocks, Options & More", status: "coming-soon" },
-  { id: "tradovate", name: "Tradovate", description: "Futures & Options", status: "coming-soon" },
   { id: "alpaca", name: "Alpaca", description: "Stocks & Crypto", status: "coming-soon" },
+  { id: "ibkr", name: "Interactive Brokers", description: "Stocks, Options & More", status: "coming-soon" },
+  { id: "ninjabrokerage", name: "NinjaTrader Brokerage", description: "Futures & Forex", status: "coming-soon" },
+  { id: "rithmic", name: "Rithmic", description: "Futures & Forex", status: "available" },
+  { id: "tastytrade", name: "tastytrade", description: "Options & Futures", status: "coming-soon" },
   { id: "tradestation", name: "TradeStation", description: "Stocks, Futures & Options", status: "coming-soon" },
   { id: "tradier", name: "Tradier", description: "Stocks & Options", status: "coming-soon" },
-  { id: "ninjabrokerage", name: "NinjaTrader Brokerage", description: "Futures & Forex", status: "coming-soon" },
-  { id: "tastytrade", name: "tastytrade", description: "Options & Futures", status: "coming-soon" }
+  { id: "tradovate", name: "Tradovate", description: "Futures & Options", status: "coming-soon" }
+];
+function CloseIcon() {
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 14 14", width: "12", height: "12", stroke: "currentColor", strokeWidth: "1.8", fill: "none", children: [
+    /* @__PURE__ */ jsx("line", { x1: "2", y1: "2", x2: "12", y2: "12" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "2", x2: "2", y2: "12" })
+  ] });
+}
+function BackIcon() {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 14 14", width: "13", height: "13", stroke: "currentColor", strokeWidth: "1.8", fill: "none", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("polyline", { points: "9,2 4,7 9,12" }) });
+}
+var RITHMIC_PROP_FIRMS = [
+  { id: "apex", name: "Apex Trader Funding" },
+  { id: "bulenox", name: "Bulenox" },
+  { id: "direct", name: "Direct / Rithmic account" },
+  { id: "earn2trade", name: "Earn2Trade" },
+  { id: "fundedtrader", name: "The Funded Trader" },
+  { id: "ftmo", name: "FTMO" },
+  { id: "ninjatrader", name: "NinjaTrader Brokerage" },
+  { id: "takeprofittrader", name: "Take Profit Trader" },
+  { id: "topstep", name: "TopstepTrader" },
+  { id: "tradeday", name: "Tradeday" },
+  { id: "wedbush", name: "Wedbush Futures" }
 ];
-function TradeDrawer({ onClose }) {
-  return /* @__PURE__ */ jsxs("div", { className: "trade-drawer", children: [
+var RITHMIC_GATEWAY_OPTIONS = [
+  // Test / UAT
+  { id: "test-01", name: "Rithmic Test 01", region: "N. America", group: "Test / UAT" },
+  // Paper Trading
+  { id: "paper-01", name: "Rithmic Paper Trading 01", region: "N. America", group: "Paper Trading" },
+  { id: "paper-colo-75", name: "Rithmic Paper Trading Colo 75", region: "N. America (colo)", group: "Paper Trading" },
+  // Production
+  { id: "prod-chicago-01", name: "Rithmic 01", region: "Chicago, US", group: "Production" },
+  { id: "prod-new-york-04", name: "Rithmic 04", region: "New York, US", group: "Production" },
+  { id: "prod-frankfurt-01", name: "Rithmic 01 Europe", region: "Frankfurt, DE", group: "Production" },
+  { id: "prod-sydney-01", name: "Rithmic 01 Asia", region: "Sydney, AU", group: "Production" },
+  { id: "prod-colo-75", name: "Rithmic 01 Colo 75", region: "Chicago, US (colo)", group: "Production" }
+];
+function validateCreds(f) {
+  const errs = {};
+  if (!f.propFirm) errs.propFirm = "Please select your broker / prop firm";
+  if (!f.username.trim()) errs.username = "Username is required";
+  if (!f.password.trim()) errs.password = "Password is required";
+  return errs;
+}
+function RithmicConnectDrawer({ onClose, onConnected, getAuthToken }) {
+  const [step, setStep] = useState("credentials");
+  const [fields, setFields] = useState({
+    propFirm: "",
+    username: "",
+    password: "",
+    gatewayId: "test-01"
+  });
+  const [errors, setErrors] = useState({});
+  const [loading, setLoading] = useState(false);
+  const [accounts, setAccounts] = useState([]);
+  const [apiError, setApiError] = useState("");
+  function set(key, value) {
+    setFields((prev) => ({ ...prev, [key]: value }));
+    if (errors[key]) setErrors((prev) => ({ ...prev, [key]: void 0 }));
+    setApiError("");
+  }
+  async function authHeaders() {
+    const h = { "Content-Type": "application/json" };
+    if (getAuthToken) {
+      try {
+        h["Authorization"] = `Bearer ${await getAuthToken()}`;
+      } catch {
+      }
+    }
+    return h;
+  }
+  async function handleConnect(e) {
+    e.preventDefault();
+    const errs = validateCreds(fields);
+    if (Object.keys(errs).length > 0) {
+      setErrors(errs);
+      return;
+    }
+    setLoading(true);
+    setApiError("");
+    try {
+      const res = await fetch("/api/broker/rithmic/verify", {
+        method: "POST",
+        headers: await authHeaders(),
+        body: JSON.stringify({
+          propFirm: fields.propFirm,
+          username: fields.username,
+          password: fields.password,
+          gatewayId: fields.gatewayId
+        })
+      });
+      const body = await res.json().catch(() => ({}));
+      if (!res.ok) {
+        setApiError(body.error ?? `Error ${res.status} \u2014 check your credentials and try again`);
+        return;
+      }
+      setAccounts(body.accounts ?? []);
+      setStep("accounts");
+    } catch {
+      setApiError("Network error \u2014 please try again");
+    } finally {
+      setLoading(false);
+    }
+  }
+  async function handleSelectAccount(account) {
+    setLoading(true);
+    setApiError("");
+    try {
+      const res = await fetch("/api/broker/credentials", {
+        method: "POST",
+        headers: await authHeaders(),
+        body: JSON.stringify({
+          broker: "rithmic",
+          propFirm: fields.propFirm,
+          username: fields.username,
+          password: fields.password,
+          gatewayId: fields.gatewayId,
+          accountId: account.id,
+          accountName: account.name
+        })
+      });
+      if (!res.ok) {
+        const body2 = await res.json().catch(() => ({}));
+        setApiError(body2.error ?? `Error ${res.status}`);
+        return;
+      }
+      const body = await res.json().catch(() => ({}));
+      onConnected(body.connectionId ?? "");
+      setStep("done");
+    } catch {
+      setApiError("Network error \u2014 please try again");
+    } finally {
+      setLoading(false);
+    }
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "trade-drawer trade-drawer--connect", children: [
     /* @__PURE__ */ jsxs("div", { className: "trade-drawer-header", children: [
       /* @__PURE__ */ jsxs("span", { className: "trade-drawer-title", children: [
-        /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 16 16", width: "14", height: "14", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+        /* @__PURE__ */ jsx("span", { className: "broker-logo broker-logo--rithmic", children: "R" }),
+        "Rithmic \u2014 Connect"
+      ] }),
+      /* @__PURE__ */ jsxs("button", { className: "trade-drawer-close", onClick: onClose, title: "Close drawer", children: [
+        /* @__PURE__ */ jsx(BackIcon, {}),
+        /* @__PURE__ */ jsx("span", { style: { fontSize: 11, marginLeft: 3 }, children: "Close drawer" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "trade-drawer-body trade-drawer-body--form", children: [
+      step === "credentials" && /* @__PURE__ */ jsxs("form", { className: "broker-connect-form", onSubmit: handleConnect, noValidate: true, children: [
+        /* @__PURE__ */ jsx("div", { className: "bcf-section-label", children: "Your broker / prop firm" }),
+        /* @__PURE__ */ jsxs("div", { className: "bcf-row", children: [
+          /* @__PURE__ */ jsxs("label", { className: "bcf-label", children: [
+            "Firm ",
+            /* @__PURE__ */ jsx("span", { className: "bcf-req", children: "*" })
+          ] }),
+          /* @__PURE__ */ jsxs(
+            "select",
+            {
+              className: `bcf-input bcf-select${errors.propFirm ? " bcf-input--error" : ""}`,
+              value: fields.propFirm,
+              onChange: (e) => set("propFirm", e.target.value),
+              children: [
+                /* @__PURE__ */ jsx("option", { value: "", children: "\u2014 Select your firm \u2014" }),
+                RITHMIC_PROP_FIRMS.map((f) => /* @__PURE__ */ jsx("option", { value: f.id, children: f.name }, f.id))
+              ]
+            }
+          ),
+          errors.propFirm && /* @__PURE__ */ jsx("span", { className: "bcf-error", children: errors.propFirm })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "bcf-section-label", style: { marginTop: 16 }, children: "Rithmic credentials" }),
+        /* @__PURE__ */ jsxs("div", { className: "bcf-row", children: [
+          /* @__PURE__ */ jsxs("label", { className: "bcf-label", children: [
+            "Username ",
+            /* @__PURE__ */ jsx("span", { className: "bcf-req", children: "*" })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              className: `bcf-input${errors.username ? " bcf-input--error" : ""}`,
+              type: "text",
+              value: fields.username,
+              autoComplete: "username",
+              onChange: (e) => set("username", e.target.value)
+            }
+          ),
+          errors.username && /* @__PURE__ */ jsx("span", { className: "bcf-error", children: errors.username })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "bcf-row", children: [
+          /* @__PURE__ */ jsxs("label", { className: "bcf-label", children: [
+            "Password ",
+            /* @__PURE__ */ jsx("span", { className: "bcf-req", children: "*" })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              className: `bcf-input${errors.password ? " bcf-input--error" : ""}`,
+              type: "password",
+              value: fields.password,
+              autoComplete: "current-password",
+              onChange: (e) => set("password", e.target.value)
+            }
+          ),
+          errors.password && /* @__PURE__ */ jsx("span", { className: "bcf-error", children: errors.password })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "bcf-section-label", style: { marginTop: 16 }, children: "Gateway / Point-of-Presence" }),
+        /* @__PURE__ */ jsxs("div", { className: "bcf-row", children: [
+          /* @__PURE__ */ jsx("label", { className: "bcf-label", children: "Gateway" }),
+          /* @__PURE__ */ jsx(
+            "select",
+            {
+              className: "bcf-input bcf-select",
+              value: fields.gatewayId,
+              onChange: (e) => set("gatewayId", e.target.value),
+              children: ["Test / UAT", "Paper Trading", "Production"].map((group) => /* @__PURE__ */ jsx("optgroup", { label: group, children: RITHMIC_GATEWAY_OPTIONS.filter((g) => g.group === group).map((g) => /* @__PURE__ */ jsxs("option", { value: g.id, children: [
+                g.name,
+                " \u2014 ",
+                g.region
+              ] }, g.id)) }, group))
+            }
+          )
+        ] }),
+        apiError && /* @__PURE__ */ jsx("div", { className: "bcf-api-error", children: apiError }),
+        /* @__PURE__ */ jsx("div", { className: "bcf-actions", children: /* @__PURE__ */ jsx("button", { type: "submit", className: "bcf-btn-save", disabled: loading, children: loading ? "Connecting\u2026" : "Connect & Fetch Accounts" }) })
+      ] }),
+      step === "accounts" && /* @__PURE__ */ jsxs("div", { className: "broker-connect-form", children: [
+        /* @__PURE__ */ jsx("div", { className: "bcf-section-label", children: "Select your trading account" }),
+        accounts.length === 0 ? /* @__PURE__ */ jsx("p", { className: "bcf-empty", children: "No accounts found for these credentials." }) : /* @__PURE__ */ jsx("div", { className: "bcf-account-list", children: accounts.map((acct) => /* @__PURE__ */ jsxs("div", { className: "bcf-account-row", children: [
+          /* @__PURE__ */ jsxs("div", { className: "bcf-account-info", children: [
+            /* @__PURE__ */ jsx("span", { className: "bcf-account-name", children: acct.name }),
+            acct.type && /* @__PURE__ */ jsx("span", { className: "bcf-account-type", children: acct.type })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: "bcf-btn-select",
+              disabled: loading,
+              onClick: () => handleSelectAccount(acct),
+              children: loading ? "\u2026" : "Select"
+            }
+          )
+        ] }, acct.id)) }),
+        apiError && /* @__PURE__ */ jsx("div", { className: "bcf-api-error", children: apiError }),
+        /* @__PURE__ */ jsx("div", { className: "bcf-actions", children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "bcf-btn-back",
+            onClick: () => {
+              setStep("credentials");
+              setApiError("");
+            },
+            children: "\u2190 Back"
+          }
+        ) })
+      ] }),
+      step === "done" && /* @__PURE__ */ jsxs("div", { className: "broker-connect-form", children: [
+        /* @__PURE__ */ jsxs("div", { className: "bcf-success", children: [
+          /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 20 20", width: "28", height: "28", fill: "none", stroke: "#22c55e", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+            /* @__PURE__ */ jsx("circle", { cx: "10", cy: "10", r: "8" }),
+            /* @__PURE__ */ jsx("polyline", { points: "6,10 9,13 14,7" })
+          ] }),
+          /* @__PURE__ */ jsx("span", { children: "Rithmic account connected successfully." })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "bcf-actions", children: /* @__PURE__ */ jsx("button", { type: "button", className: "bcf-btn-save", onClick: onClose, children: "Done" }) })
+      ] })
+    ] })
+  ] });
+}
+function BrokerCard({ broker, savedConnection, justConnected, onConnect, onStartTrading }) {
+  const isConnected = !!(savedConnection || justConnected);
+  return /* @__PURE__ */ jsxs("div", { className: `broker-tile${broker.status === "available" ? " broker-tile--available" : ""}${isConnected ? " broker-tile--connected" : ""}`, children: [
+    /* @__PURE__ */ jsx("div", { className: "broker-tile-name", children: broker.name }),
+    /* @__PURE__ */ jsx("div", { className: "broker-tile-desc", children: broker.description }),
+    savedConnection && /* @__PURE__ */ jsxs("div", { className: "broker-tile-saved", children: [
+      /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 14 14", width: "11", height: "11", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", style: { flexShrink: 0, opacity: 0.6 }, children: [
+        /* @__PURE__ */ jsx("circle", { cx: "7", cy: "5", r: "3" }),
+        /* @__PURE__ */ jsx("path", { d: "M1 13c0-3.31 2.69-6 6-6s6 2.69 6 6" })
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: "broker-tile-saved-account", children: savedConnection.accountName || savedConnection.accountId }),
+      /* @__PURE__ */ jsx("span", { className: "broker-tile-saved-sep", children: "\xB7" }),
+      /* @__PURE__ */ jsx("span", { className: "broker-tile-saved-user", children: savedConnection.username })
+    ] }),
+    /* @__PURE__ */ jsx("span", { className: `broker-card-status broker-card-status--${isConnected ? "connected" : broker.status}`, children: isConnected ? "Connected" : broker.status === "available" ? "Available" : "Coming Soon" }),
+    isConnected ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: "broker-tile-connect broker-tile-connect--connected",
+        onClick: savedConnection ? () => onStartTrading(savedConnection.id) : void 0,
+        style: { pointerEvents: savedConnection ? "auto" : "none", cursor: savedConnection ? "pointer" : "default" },
+        title: savedConnection ? `Start trading with ${broker.name}` : `${broker.name} connected`,
+        children: "Start Trading"
+      }
+    ) : /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: "broker-tile-connect",
+        disabled: broker.status !== "available",
+        onClick: broker.status === "available" ? onConnect : void 0,
+        title: broker.status === "available" ? `Connect ${broker.name}` : "Coming soon",
+        children: broker.status === "available" ? "Connect" : "Coming Soon"
+      }
+    )
+  ] });
+}
+function TradeDrawer({ onClose, savedConnections = [], onBrokerConnected, getAuthToken }) {
+  const [connectingBroker, setConnectingBroker] = useState(null);
+  const [connectedBrokers, setConnectedBrokers] = useState(/* @__PURE__ */ new Set());
+  function markConnected(brokerId, connectionId) {
+    setConnectedBrokers((prev) => new Set(prev).add(brokerId));
+    onBrokerConnected?.(brokerId, connectionId);
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "trade-drawer-backdrop", onClick: onClose }),
+    /* @__PURE__ */ jsxs("div", { className: "trade-drawer", children: [
+      /* @__PURE__ */ jsxs("div", { className: "trade-drawer-header", children: [
+        /* @__PURE__ */ jsxs("span", { className: "trade-drawer-title", children: [
+          /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 16 16", width: "14", height: "14", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+            /* @__PURE__ */ jsx("rect", { x: "1.5", y: "3", width: "13", height: "10", rx: "1.5" }),
+            /* @__PURE__ */ jsx("line", { x1: "5", y1: "8", x2: "11", y2: "8" }),
+            /* @__PURE__ */ jsx("line", { x1: "8", y1: "5", x2: "8", y2: "11" })
+          ] }),
+          "Trade \u2014 Connect a broker"
+        ] }),
+        /* @__PURE__ */ jsx("button", { className: "trade-drawer-close", onClick: onClose, title: "Close", children: /* @__PURE__ */ jsx(CloseIcon, {}) })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "trade-drawer-body", children: /* @__PURE__ */ jsx("div", { className: "broker-grid", children: BROKERS.map((broker) => {
+        const saved = savedConnections.find((c) => c.broker === broker.id);
+        return /* @__PURE__ */ jsx(
+          BrokerCard,
+          {
+            broker,
+            savedConnection: saved,
+            justConnected: connectedBrokers.has(broker.id),
+            onConnect: () => setConnectingBroker(broker.id),
+            onStartTrading: (connId) => {
+              onBrokerConnected?.(broker.id, connId);
+              onClose();
+            }
+          },
+          broker.id
+        );
+      }) }) })
+    ] }),
+    connectingBroker === "rithmic" && /* @__PURE__ */ jsx(
+      RithmicConnectDrawer,
+      {
+        onClose: () => setConnectingBroker(null),
+        onConnected: (connId) => markConnected("rithmic", connId),
+        ...getAuthToken ? { getAuthToken } : {}
+      }
+    )
+  ] });
+}
+var ORDER_TYPES = [
+  { value: "market", label: "Market" },
+  { value: "limit", label: "Limit" },
+  { value: "stop_market", label: "Stop Market" },
+  { value: "stop_limit", label: "Stop Limit" },
+  { value: "trailing_stop", label: "Trailing Stop" }
+];
+var ORDER_TYPE_HINTS = {
+  market: "Executes immediately at best available price",
+  limit: "Executes at your price or better",
+  stop_market: "Market order triggered when stop price is hit",
+  stop_limit: "Limit order triggered when stop price is hit",
+  trailing_stop: "Stop that trails price by the specified number of ticks"
+};
+var TIF_OPTIONS = [
+  { value: "DAY", label: "DAY \u2014 Good for Day" },
+  { value: "GTC", label: "GTC \u2014 Good till Cancel" },
+  { value: "IOC", label: "IOC \u2014 Immediate or Cancel" },
+  { value: "FOK", label: "FOK \u2014 Fill or Kill" }
+];
+var TICK_SIZE_FALLBACK = {
+  ES: 0.25,
+  MES: 0.25,
+  NQ: 0.25,
+  MNQ: 0.25,
+  YM: 1,
+  MYM: 1,
+  RTY: 0.1,
+  M2K: 0.1,
+  CL: 0.01,
+  MCL: 0.01,
+  GC: 0.1,
+  MGC: 0.1,
+  SI: 5e-3,
+  ZB: 0.03125,
+  ZN: 0.015625,
+  ZF: 78125e-7,
+  ZT: 390625e-8,
+  ZC: 0.25,
+  ZS: 0.25,
+  ZW: 0.25,
+  NG: 1e-3,
+  HE: 25e-5,
+  LE: 25e-5
+};
+function getTickSize(sym) {
+  const base = sym.split(".")[0] ?? sym;
+  const root = base.replace(/[FGHJKMNQUVXZ]\d{1,2}$/, "").toUpperCase();
+  return TICK_SIZE_FALLBACK[root] ?? 0.25;
+}
+function stripPrefix(sym) {
+  const idx = sym.indexOf(":");
+  return idx >= 0 ? sym.slice(idx + 1) : sym;
+}
+function isFuturesSymbol(sym) {
+  return sym.includes(".");
+}
+function OrderEntryPanel({
+  sessionId,
+  brokerSlug,
+  accounts,
+  selectedAccountId,
+  defaultSymbol = "",
+  apiUrl = "",
+  getAuthToken,
+  connecting = false,
+  connectionError,
+  onRetryConnect,
+  onChangeAccount,
+  onClose
+}) {
+  const [side, setSide] = useState("buy");
+  const [orderType, setOrderType] = useState("market");
+  const [tif, setTif] = useState("DAY");
+  const [symbol, setSymbol] = useState(stripPrefix(defaultSymbol));
+  const [qty, setQty] = useState("1");
+  const [limitPrice, setLimitPrice] = useState("");
+  const [stopPrice, setStopPrice] = useState("");
+  const [trailTicks, setTrailTicks] = useState("10");
+  const [bracketOn, setBracketOn] = useState(false);
+  const [tpTicks, setTpTicks] = useState("20");
+  const [slTicks, setSlTicks] = useState("10");
+  const [submitState, setSubmitState] = useState("idle");
+  const [errorMsg, setErrorMsg] = useState("");
+  const [drawerOpen, setDrawerOpen] = useState(false);
+  const [draftTp, setDraftTp] = useState("20");
+  const [draftSl, setDraftSl] = useState("10");
+  const prevDefaultRef = useRef(defaultSymbol);
+  useEffect(() => {
+    if (defaultSymbol !== prevDefaultRef.current) {
+      prevDefaultRef.current = defaultSymbol;
+      setSymbol(stripPrefix(defaultSymbol));
+    }
+  }, [defaultSymbol]);
+  const futures = isFuturesSymbol(symbol) || isFuturesSymbol(defaultSymbol);
+  const showLimit = orderType === "limit" || orderType === "stop_limit";
+  const showStop = orderType === "stop_market" || orderType === "stop_limit";
+  const showTrailing = orderType === "trailing_stop";
+  const showBracket = orderType === "market" || orderType === "limit";
+  const tickSize = getTickSize(symbol || defaultSymbol);
+  const tpPoints = (parseInt(draftTp, 10) || 0) * tickSize;
+  const slPoints = (parseInt(draftSl, 10) || 0) * tickSize;
+  const handleToggleBracket = useCallback(() => {
+    if (bracketOn) {
+      setBracketOn(false);
+    } else {
+      setDraftTp(tpTicks);
+      setDraftSl(slTicks);
+      setDrawerOpen(true);
+    }
+  }, [bracketOn, tpTicks, slTicks]);
+  const handleOpenBracketSettings = useCallback(() => {
+    setDraftTp(tpTicks);
+    setDraftSl(slTicks);
+    setDrawerOpen(true);
+  }, [tpTicks, slTicks]);
+  const handleDrawerSave = useCallback(() => {
+    setTpTicks(draftTp);
+    setSlTicks(draftSl);
+    setBracketOn(true);
+    setDrawerOpen(false);
+  }, [draftTp, draftSl]);
+  const handleDrawerCancel = useCallback(() => {
+    setDrawerOpen(false);
+  }, []);
+  const handleSubmit = useCallback(async (e) => {
+    e.preventDefault();
+    setErrorMsg("");
+    const qtyNum = futures ? parseInt(qty, 10) : parseFloat(qty);
+    if (!symbol.trim()) {
+      setErrorMsg("Symbol is required");
+      return;
+    }
+    if (!qtyNum || qtyNum <= 0) {
+      setErrorMsg("Quantity must be positive");
+      return;
+    }
+    if (showLimit && !limitPrice) {
+      setErrorMsg("Limit price is required");
+      return;
+    }
+    if (showStop && !stopPrice) {
+      setErrorMsg("Stop price is required");
+      return;
+    }
+    if (showTrailing && parseInt(trailTicks, 10) < 1) {
+      setErrorMsg("Trail ticks must be at least 1");
+      return;
+    }
+    if (bracketOn && showBracket) {
+      if (parseInt(tpTicks, 10) < 1) {
+        setErrorMsg("Take-profit ticks are required");
+        return;
+      }
+      if (parseInt(slTicks, 10) < 1) {
+        setErrorMsg("Stop-loss ticks are required");
+        return;
+      }
+    }
+    setSubmitState("submitting");
+    try {
+      const headers = { "Content-Type": "application/json" };
+      if (getAuthToken) {
+        const token = await getAuthToken();
+        headers["Authorization"] = `Bearer ${token}`;
+      }
+      const clientRef = crypto.randomUUID();
+      if (bracketOn && showBracket) {
+        const body = {
+          sessionId,
+          clientRef,
+          symbol,
+          accountId: selectedAccountId,
+          side,
+          type: orderType,
+          qty: qtyNum,
+          timeInForce: tif,
+          ...showLimit ? { limitPrice: parseFloat(limitPrice) } : {},
+          takeProfitTicks: parseInt(tpTicks, 10),
+          stopLossTicks: parseInt(slTicks, 10)
+        };
+        const resp = await fetch(`${apiUrl}/api/broker/user-bracket`, {
+          method: "POST",
+          headers,
+          body: JSON.stringify(body)
+        });
+        if (!resp.ok) {
+          const err = await resp.json().catch(() => ({}));
+          throw new Error(err.error ?? `Error ${resp.status}`);
+        }
+      } else {
+        const body = {
+          sessionId,
+          clientRef,
+          symbol,
+          accountId: selectedAccountId,
+          side,
+          type: orderType,
+          qty: qtyNum,
+          timeInForce: tif,
+          ...showLimit ? { limitPrice: parseFloat(limitPrice) } : {},
+          ...showStop ? { stopPrice: parseFloat(stopPrice) } : {},
+          ...showTrailing ? { trailTicks: parseInt(trailTicks, 10) } : {}
+        };
+        const resp = await fetch(`${apiUrl}/api/broker/user-order`, {
+          method: "POST",
+          headers,
+          body: JSON.stringify(body)
+        });
+        if (!resp.ok) {
+          const err = await resp.json().catch(() => ({}));
+          throw new Error(err.error ?? `Error ${resp.status}`);
+        }
+      }
+      setSubmitState("success");
+      setTimeout(() => {
+        setSubmitState("idle");
+        setQty("1");
+        setLimitPrice("");
+        setStopPrice("");
+        setTrailTicks("10");
+      }, 1400);
+    } catch (err) {
+      setSubmitState("error");
+      setErrorMsg(err instanceof Error ? err.message : "Order failed");
+    }
+  }, [
+    symbol,
+    side,
+    orderType,
+    tif,
+    qty,
+    limitPrice,
+    stopPrice,
+    trailTicks,
+    bracketOn,
+    tpTicks,
+    slTicks,
+    showLimit,
+    showStop,
+    showTrailing,
+    showBracket,
+    futures,
+    sessionId,
+    selectedAccountId,
+    apiUrl,
+    getAuthToken
+  ]);
+  return /* @__PURE__ */ jsxs("div", { className: "oep-panel", children: [
+    /* @__PURE__ */ jsxs("div", { className: "oep-header", children: [
+      /* @__PURE__ */ jsxs("span", { className: "oep-title", children: [
+        /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 16 16", width: "13", height: "13", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", style: { marginRight: 6 }, children: [
           /* @__PURE__ */ jsx("rect", { x: "1.5", y: "3", width: "13", height: "10", rx: "1.5" }),
           /* @__PURE__ */ jsx("line", { x1: "5", y1: "8", x2: "11", y2: "8" }),
           /* @__PURE__ */ jsx("line", { x1: "8", y1: "5", x2: "8", y2: "11" })
         ] }),
-        "Trade \u2014 Connect a broker"
+        drawerOpen ? "Bracket Order Settings" : "Order Entry"
       ] }),
-      /* @__PURE__ */ jsx("button", { className: "trade-drawer-close", onClick: onClose, title: "Close", children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 14 14", width: "12", height: "12", stroke: "currentColor", strokeWidth: "1.8", children: [
-        /* @__PURE__ */ jsx("line", { x1: "2", y1: "2", x2: "12", y2: "12" }),
-        /* @__PURE__ */ jsx("line", { x1: "12", y1: "2", x2: "2", y2: "12" })
-      ] }) })
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+        !drawerOpen && /* @__PURE__ */ jsx("span", { className: "oep-broker-badge", children: brokerSlug || "\u2014" }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: "oep-close",
+            onClick: drawerOpen ? handleDrawerCancel : onClose,
+            title: drawerOpen ? "Back" : "Close order panel",
+            children: drawerOpen ? /* @__PURE__ */ jsx("svg", { viewBox: "0 0 14 14", width: "11", height: "11", stroke: "currentColor", strokeWidth: "1.8", fill: "none", children: /* @__PURE__ */ jsx("polyline", { points: "9,2 4,7 9,12" }) }) : /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 14 14", width: "11", height: "11", stroke: "currentColor", strokeWidth: "1.8", fill: "none", children: [
+              /* @__PURE__ */ jsx("line", { x1: "2", y1: "2", x2: "12", y2: "12" }),
+              /* @__PURE__ */ jsx("line", { x1: "12", y1: "2", x2: "2", y2: "12" })
+            ] })
+          }
+        )
+      ] })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "trade-drawer-body", children: BROKERS.map((broker) => /* @__PURE__ */ jsxs("div", { className: "broker-card", children: [
-      /* @__PURE__ */ jsx("div", { className: "broker-card-name", children: broker.name }),
-      /* @__PURE__ */ jsx("div", { className: "broker-card-desc", children: broker.description }),
-      /* @__PURE__ */ jsx("span", { className: `broker-card-status broker-card-status--${broker.status}`, children: broker.status === "available" ? "Available" : "Coming Soon" }),
-      /* @__PURE__ */ jsx(
+    connecting && /* @__PURE__ */ jsxs("div", { className: "oep-body oep-body--status", children: [
+      /* @__PURE__ */ jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", style: { animation: "spin 0.9s linear infinite", flexShrink: 0 }, children: [
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9", fill: "none", stroke: "var(--border)", strokeWidth: "2.5" }),
+        /* @__PURE__ */ jsx("path", { d: "M12 3 A9 9 0 0 1 21 12", fill: "none", stroke: "var(--primary)", strokeWidth: "2.5", strokeLinecap: "round" })
+      ] }),
+      /* @__PURE__ */ jsx("span", { style: { color: "var(--text-muted)", fontSize: 13 }, children: "Connecting to broker\u2026" })
+    ] }),
+    !connecting && connectionError && /* @__PURE__ */ jsxs("div", { className: "oep-body oep-body--status", children: [
+      /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 20 20", width: "22", height: "22", fill: "none", stroke: "#ef4444", strokeWidth: "1.8", strokeLinecap: "round", children: [
+        /* @__PURE__ */ jsx("circle", { cx: "10", cy: "10", r: "8" }),
+        /* @__PURE__ */ jsx("line", { x1: "10", y1: "6", x2: "10", y2: "11" }),
+        /* @__PURE__ */ jsx("circle", { cx: "10", cy: "14", r: "0.8", fill: "#ef4444" })
+      ] }),
+      /* @__PURE__ */ jsx("span", { style: { color: "var(--text-muted)", fontSize: 13, textAlign: "center" }, children: connectionError }),
+      onRetryConnect && /* @__PURE__ */ jsx("button", { className: "oep-retry-btn", onClick: onRetryConnect, children: "Retry Connection" })
+    ] }),
+    !connecting && !connectionError && drawerOpen && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "oep-drawer-body", children: [
+        /* @__PURE__ */ jsx("p", { className: "oep-drawer-desc", children: "Set your TP and SL as tick offsets from entry price. The bracket order will automatically place both orders when your entry fills." }),
+        /* @__PURE__ */ jsxs("p", { className: "oep-drawer-ticksize", children: [
+          "Tick size for ",
+          symbol || "\u2014",
+          ": ",
+          tickSize.toString()
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "oep-drawer-field", children: [
+          /* @__PURE__ */ jsx("label", { className: "oep-drawer-label oep-drawer-label--tp", children: "Take Profit (ticks)" }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              className: "oep-input",
+              type: "number",
+              min: 1,
+              step: 1,
+              value: draftTp,
+              onChange: (e) => setDraftTp(e.target.value)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              className: "oep-slider oep-slider--tp",
+              type: "range",
+              min: 1,
+              max: 100,
+              value: parseInt(draftTp, 10) || 1,
+              onChange: (e) => setDraftTp(e.target.value)
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: "oep-tick-convert", children: [
+            parseInt(draftTp, 10) || 0,
+            " ticks = ",
+            tpPoints.toFixed(tickSize < 0.01 ? 6 : tickSize < 0.1 ? 4 : 2),
+            " points"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "oep-drawer-field", children: [
+          /* @__PURE__ */ jsx("label", { className: "oep-drawer-label oep-drawer-label--sl", children: "Stop Loss (ticks)" }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              className: "oep-input",
+              type: "number",
+              min: 1,
+              step: 1,
+              value: draftSl,
+              onChange: (e) => setDraftSl(e.target.value)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              className: "oep-slider oep-slider--sl",
+              type: "range",
+              min: 1,
+              max: 100,
+              value: parseInt(draftSl, 10) || 1,
+              onChange: (e) => setDraftSl(e.target.value)
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: "oep-tick-convert", children: [
+            parseInt(draftSl, 10) || 0,
+            " ticks = ",
+            slPoints.toFixed(tickSize < 0.01 ? 6 : tickSize < 0.1 ? 4 : 2),
+            " points"
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "oep-drawer-footer", children: [
+        /* @__PURE__ */ jsx("button", { className: "oep-drawer-btn oep-drawer-btn--cancel", onClick: handleDrawerCancel, children: "Cancel" }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: "oep-drawer-btn oep-drawer-btn--save",
+            onClick: handleDrawerSave,
+            disabled: !draftTp || parseInt(draftTp, 10) < 1 || !draftSl || parseInt(draftSl, 10) < 1,
+            children: "Save"
+          }
+        )
+      ] })
+    ] }),
+    !connecting && !connectionError && !drawerOpen && /* @__PURE__ */ jsx("div", { className: "oep-body", children: /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, noValidate: true, children: [
+      accounts.length === 1 && /* @__PURE__ */ jsxs("div", { className: "oep-row", children: [
+        /* @__PURE__ */ jsx("label", { className: "oep-label", children: "Account" }),
+        /* @__PURE__ */ jsx("div", { className: "oep-account-chip", children: accounts[0].name })
+      ] }),
+      accounts.length > 1 && /* @__PURE__ */ jsxs("div", { className: "oep-row", children: [
+        /* @__PURE__ */ jsx("label", { className: "oep-label", children: "Account" }),
+        /* @__PURE__ */ jsx(
+          "select",
+          {
+            className: "oep-select",
+            value: selectedAccountId,
+            onChange: (e) => onChangeAccount(e.target.value),
+            children: accounts.map((a) => /* @__PURE__ */ jsx("option", { value: a.id, children: a.name }, a.id))
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "oep-row", children: [
+        /* @__PURE__ */ jsx("label", { className: "oep-label", children: futures ? "Contract" : "Symbol" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            className: "oep-input",
+            type: "text",
+            value: symbol,
+            onChange: (e) => setSymbol(e.target.value.toUpperCase()),
+            placeholder: futures ? "e.g. ESH6" : "e.g. BTCUSDT",
+            autoCapitalize: "characters"
+          }
+        ),
+        futures && /* @__PURE__ */ jsx("span", { className: "oep-hint", children: "Include month + year code (e.g. H6 = Mar 2026)" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "oep-row", style: { marginTop: 6 }, children: /* @__PURE__ */ jsxs("div", { className: "oep-side-toggle", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: `oep-side-btn oep-side-btn--buy${side === "buy" ? " oep-side-btn--active" : ""}`,
+            onClick: () => setSide("buy"),
+            children: "Buy"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: `oep-side-btn oep-side-btn--sell${side === "sell" ? " oep-side-btn--active" : ""}`,
+            onClick: () => setSide("sell"),
+            children: "Sell"
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsxs("div", { className: "oep-row", children: [
+        /* @__PURE__ */ jsx("label", { className: "oep-label", children: "TYPE" }),
+        /* @__PURE__ */ jsx(
+          "select",
+          {
+            className: "oep-select",
+            value: orderType,
+            onChange: (e) => setOrderType(e.target.value),
+            children: ORDER_TYPES.map((o) => /* @__PURE__ */ jsx("option", { value: o.value, children: o.label }, o.value))
+          }
+        ),
+        ORDER_TYPE_HINTS[orderType] && /* @__PURE__ */ jsx("span", { className: "oep-hint", children: ORDER_TYPE_HINTS[orderType] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "oep-row", children: [
+        /* @__PURE__ */ jsx("label", { className: "oep-label", children: "QUANTITY" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            className: "oep-input",
+            type: "number",
+            min: 1,
+            step: futures ? 1 : "any",
+            value: qty,
+            onChange: (e) => setQty(e.target.value)
+          }
+        )
+      ] }),
+      showLimit && /* @__PURE__ */ jsxs("div", { className: "oep-row", children: [
+        /* @__PURE__ */ jsx("label", { className: "oep-label", children: "Limit Price" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            className: "oep-input",
+            type: "number",
+            step: "any",
+            value: limitPrice,
+            onChange: (e) => setLimitPrice(e.target.value),
+            placeholder: "0.00"
+          }
+        )
+      ] }),
+      showStop && /* @__PURE__ */ jsxs("div", { className: "oep-row", children: [
+        /* @__PURE__ */ jsx("label", { className: "oep-label", children: "Stop Price" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            className: "oep-input",
+            type: "number",
+            step: "any",
+            value: stopPrice,
+            onChange: (e) => setStopPrice(e.target.value),
+            placeholder: "0.00"
+          }
+        )
+      ] }),
+      showTrailing && /* @__PURE__ */ jsxs("div", { className: "oep-row", children: [
+        /* @__PURE__ */ jsx("label", { className: "oep-label", children: "Trail Distance" }),
+        /* @__PURE__ */ jsxs("div", { className: "oep-input-tick-wrap", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              className: "oep-input",
+              type: "number",
+              min: 1,
+              step: 1,
+              value: trailTicks,
+              onChange: (e) => setTrailTicks(e.target.value),
+              placeholder: "10"
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "oep-tick-unit", children: "ticks" })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            className: "oep-slider oep-slider--trail",
+            type: "range",
+            min: 1,
+            max: 100,
+            value: parseInt(trailTicks, 10) || 1,
+            onChange: (e) => setTrailTicks(e.target.value)
+          }
+        )
+      ] }),
+      orderType !== "trailing_stop" && /* @__PURE__ */ jsxs("div", { className: "oep-row", children: [
+        /* @__PURE__ */ jsx("label", { className: "oep-label", children: "TIF" }),
+        /* @__PURE__ */ jsx(
+          "select",
+          {
+            className: "oep-select",
+            value: tif,
+            onChange: (e) => setTif(e.target.value),
+            children: TIF_OPTIONS.map((t) => /* @__PURE__ */ jsx("option", { value: t.value, children: t.label }, t.value))
+          }
+        )
+      ] }),
+      showBracket && /* @__PURE__ */ jsxs("div", { className: "oep-bracket-row", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            role: "switch",
+            "aria-checked": bracketOn,
+            className: `oep-toggle${bracketOn ? " oep-toggle--on" : ""}`,
+            onClick: handleToggleBracket,
+            children: /* @__PURE__ */ jsx("span", { className: "oep-toggle-thumb" })
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "oep-bracket-label", children: "Bracket (OCO)" }),
+        bracketOn && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "oep-gear-btn",
+            title: "Edit bracket settings",
+            onClick: handleOpenBracketSettings,
+            children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 16 16", width: "12", height: "12", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+              /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "2.5" }),
+              /* @__PURE__ */ jsx("path", { d: "M8 1.5v1M8 13.5v1M1.5 8h1M13.5 8h1M3.4 3.4l.7.7M11.9 11.9l.7.7M3.4 12.6l.7-.7M11.9 4.1l.7-.7", strokeLinecap: "round" })
+            ] })
+          }
+        )
+      ] }),
+      errorMsg && submitState === "error" && /* @__PURE__ */ jsx("div", { className: "oep-error", children: errorMsg }),
+      submitState === "success" && /* @__PURE__ */ jsxs("div", { className: "oep-success", children: [
+        /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", width: "13", height: "13", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: /* @__PURE__ */ jsx("polyline", { points: "3,8 6,11 13,4" }) }),
+        "Order submitted"
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "oep-actions", children: /* @__PURE__ */ jsx(
         "button",
         {
-          className: "broker-card-connect",
-          disabled: broker.status !== "available",
-          title: broker.status === "available" ? `Connect ${broker.name}` : "Coming soon",
-          children: broker.status === "available" ? "Connect" : "Coming Soon"
+          type: "submit",
+          disabled: submitState === "submitting",
+          className: `oep-submit oep-submit--${side}`,
+          children: submitState === "submitting" ? "Placing\u2026" : `${side === "buy" ? "Buy" : "Sell"} ${symbol || "\u2014"}`
         }
-      )
-    ] }, broker.id)) })
+      ) })
+    ] }) })
   ] });
 }
 function uid() {
@@ -13572,6 +14573,8 @@ var ManagedAppShell = forwardRef(
     getAuthToken,
     apiUrl,
     tradingBridge,
+    onLogout,
+    user,
     renderScriptDrawer,
     renderWatchlistDrawer,
     renderTradeDrawer
@@ -13591,9 +14594,82 @@ var ManagedAppShell = forwardRef(
     const [scriptDrawerOpen, setScriptDrawerOpen] = useState(false);
     const [watchlistOpen, setWatchlistOpen] = useState(false);
     const [tradeDrawerOpen, setTradeDrawerOpen] = useState(false);
+    const [orderPanelOpen, setOrderPanelOpen] = useState(false);
+    const [orderPanelConnecting, setOrderPanelConnecting] = useState(false);
+    const [orderPanelError, setOrderPanelError] = useState("");
+    const [connectedSession, setConnectedSession] = useState(null);
+    const [selectedAccountId, setSelectedAccountId] = useState("");
+    const [savedConnections, setSavedConnections] = useState([]);
     const [chartDirty, setChartDirty] = useState(0);
     const [isFullscreen, setIsFullscreen] = useState(false);
     const capabilities = useChartCapabilities(config);
+    const handleBrokerConnected = useCallback(async (brokerId, connectionId) => {
+      setTradeDrawerOpen(false);
+      setConnectedSession({ brokerId, connectionId, sessionId: "", brokerSlug: brokerId, accounts: [] });
+      setOrderPanelConnecting(true);
+      setOrderPanelError("");
+      setOrderPanelOpen(true);
+      try {
+        const headers = { "Content-Type": "application/json" };
+        if (getAuthToken) {
+          const tok = await getAuthToken();
+          if (tok) headers["Authorization"] = `Bearer ${tok}`;
+        }
+        const resp = await fetch(`${apiUrl ?? ""}/api/broker/user-sessions`, {
+          method: "POST",
+          headers,
+          body: JSON.stringify({ connectionId })
+        });
+        if (resp.ok) {
+          const data = await resp.json();
+          setConnectedSession({ brokerId, connectionId, ...data });
+          setSelectedAccountId(data.accounts[0]?.id ?? "");
+          setOrderPanelConnecting(false);
+        } else {
+          const errData = await resp.json().catch(() => ({}));
+          setOrderPanelError(errData.error ?? "Failed to start broker session");
+          setOrderPanelConnecting(false);
+        }
+      } catch {
+        setOrderPanelError("Network error \u2014 could not connect to broker");
+        setOrderPanelConnecting(false);
+      }
+    }, [apiUrl, getAuthToken]);
+    const handleToggleOrderEntry = useCallback(() => {
+      if (orderPanelOpen && !orderPanelConnecting) {
+        setOrderPanelOpen(false);
+        return;
+      }
+      if (connectedSession) {
+        setOrderPanelOpen((o) => !o);
+        return;
+      }
+      if (savedConnections.length > 0) {
+        const first = savedConnections[0];
+        void handleBrokerConnected(first.broker, first.id);
+        return;
+      }
+      setTradeDrawerOpen(true);
+    }, [orderPanelOpen, orderPanelConnecting, connectedSession, savedConnections, handleBrokerConnected]);
+    useEffect(() => {
+      if (!wsLoaded) return;
+      const fetchConnections = async () => {
+        try {
+          const headers = {};
+          if (getAuthToken) {
+            const tok = await getAuthToken();
+            if (tok) headers["Authorization"] = `Bearer ${tok}`;
+          }
+          const resp = await fetch(`${apiUrl ?? ""}/api/broker/user-connections`, { headers });
+          if (resp.ok) {
+            const data = await resp.json();
+            setSavedConnections(data.connections ?? []);
+          }
+        } catch {
+        }
+      };
+      void fetchConnections();
+    }, [wsLoaded]);
     useEffect(() => {
       watchlistApi.configure({
         apiBase: `${apiUrl ?? ""}/api`,
@@ -13911,6 +14987,8 @@ var ManagedAppShell = forwardRef(
             ...tab.snapshot ? { layoutToRestore: tab.snapshot } : {},
             ...getExchangeLogoUrl ? { getExchangeLogoUrl } : {},
             ...tradingBridge ? { tradingBridge } : {},
+            ...onLogout ? { onLogout } : {},
+            ...user ? { user } : {},
             onIndicatorsChanged: () => setChartDirty((d) => d + 1)
           },
           `${tab.id}-${tab.remountCount}`
@@ -13920,64 +14998,90 @@ var ManagedAppShell = forwardRef(
     )) });
     const drawers = /* @__PURE__ */ jsxs(Fragment, { children: [
       scriptDrawerOpen && (renderScriptDrawer ? renderScriptDrawer({ onClose: () => setScriptDrawerOpen(false), onAddIndicator: handleAddIndicator }) : /* @__PURE__ */ jsx(ScriptDrawer, { onClose: () => setScriptDrawerOpen(false), onAddIndicator: handleAddIndicator })),
-      watchlistOpen && (renderWatchlistDrawer ? renderWatchlistDrawer({ onClose: () => setWatchlistOpen(false), onSelectSymbol: handleSymbolChange }) : /* @__PURE__ */ jsx(WatchlistDrawer, { onClose: () => setWatchlistOpen(false), onSelectSymbol: handleSymbolChange, symbolResolver }))
-    ] });
-    return /* @__PURE__ */ jsxs("div", { ref: containerRef, style: { height: "100%" }, children: [
-      tradeDrawerOpen && capabilities.renderManagedTradingControls && (renderTradeDrawer ? renderTradeDrawer({ onClose: () => setTradeDrawerOpen(false) }) : /* @__PURE__ */ jsx(TradeDrawer, { onClose: () => setTradeDrawerOpen(false) })),
-      /* @__PURE__ */ jsx(
-        ChartWorkspace,
+      watchlistOpen && (renderWatchlistDrawer ? renderWatchlistDrawer({ onClose: () => setWatchlistOpen(false), onSelectSymbol: handleSymbolChange }) : /* @__PURE__ */ jsx(WatchlistDrawer, { onClose: () => setWatchlistOpen(false), onSelectSymbol: handleSymbolChange, symbolResolver })),
+      tradeDrawerOpen && capabilities.renderManagedTradingControls && (renderTradeDrawer ? renderTradeDrawer({ onClose: () => setTradeDrawerOpen(false) }) : /* @__PURE__ */ jsx(
+        TradeDrawer,
         {
-          tabs: tabs.map((t) => ({ id: t.id, label: t.label, isSaved: !!t.savedLayoutId })),
-          activeTabId,
-          onSelectTab: selectTab,
-          onAddTab: addTab,
-          onCloseTab: closeTab,
-          onRenameTab: renameTab,
-          symbol: activeTab.symbol,
-          timeframe: activeTab.timeframe,
-          theme,
-          customTimeframes,
-          favoriteTfs,
-          onSymbolChange: handleSymbolChange,
-          onTimeframeChange: handleTimeframeChange,
-          onAddCustomTimeframe: handleAddCustomTimeframe,
-          onFavoriteTfsChange: setFavoriteTfs,
-          onAddIndicator: handleAddIndicator,
-          onToggleTheme: toggleTheme,
-          onCopyScreenshot: handleCopyScreenshot,
-          onDownloadScreenshot: handleDownloadScreenshot,
-          onFullscreen: handleFullscreen,
-          isFullscreen,
-          ...activeTab.savedLayoutId ? { currentLayoutName: activeTab.label, currentLayoutId: activeTab.savedLayoutId } : {},
-          autoSave,
-          onFetchLayouts: () => layouts.list(),
-          onSaveLayout: handleSaveLayout,
-          onLoadLayout: handleLoadLayout,
-          onRenameLayout: handleRenameLayout,
-          onCopyLayout: handleCopyLayout,
-          onToggleAutoSave: handleToggleAutoSave,
-          onDeleteLayout: handleDeleteLayout,
-          onOpenLayoutInNewTab: handleOpenLayoutInNewTab,
-          symbolResolver,
-          showTradeButton: capabilities.renderManagedTradingControls,
-          tradeDrawerOpen,
-          onToggleTradeDrawer: () => setTradeDrawerOpen((o) => !o),
-          watchlistOpen,
-          onToggleWatchlist: () => setWatchlistOpen((o) => !o),
-          activeSymbol: activeTab.symbol,
-          timezone,
-          onTimezoneChange: setTimezone,
-          session,
-          onSessionChange: setSession,
-          scriptDrawerOpen,
-          onToggleScriptDrawer: () => setScriptDrawerOpen((o) => !o),
-          isLicensed,
-          wsLoaded,
-          chartSlots,
-          drawers
+          onClose: () => setTradeDrawerOpen(false),
+          savedConnections,
+          onBrokerConnected: handleBrokerConnected,
+          ...getAuthToken ? { getAuthToken } : {}
+        }
+      )),
+      orderPanelOpen && connectedSession && capabilities.renderManagedTradingControls && /* @__PURE__ */ jsx(
+        OrderEntryPanel,
+        {
+          sessionId: connectedSession.sessionId,
+          brokerSlug: connectedSession.brokerSlug,
+          accounts: connectedSession.accounts,
+          selectedAccountId,
+          defaultSymbol: activeTab.symbol,
+          apiUrl,
+          getAuthToken,
+          connecting: orderPanelConnecting,
+          connectionError: orderPanelError || void 0,
+          onRetryConnect: () => void handleBrokerConnected(connectedSession.brokerId, connectedSession.connectionId),
+          onChangeAccount: setSelectedAccountId,
+          onClose: () => setOrderPanelOpen(false)
         }
       )
     ] });
+    return /* @__PURE__ */ jsx("div", { ref: containerRef, style: { height: "100%", position: "relative" }, children: /* @__PURE__ */ jsx(
+      ChartWorkspace,
+      {
+        tabs: tabs.map((t) => ({ id: t.id, label: t.label, isSaved: !!t.savedLayoutId })),
+        activeTabId,
+        onSelectTab: selectTab,
+        onAddTab: addTab,
+        onCloseTab: closeTab,
+        onRenameTab: renameTab,
+        symbol: activeTab.symbol,
+        timeframe: activeTab.timeframe,
+        theme,
+        customTimeframes,
+        favoriteTfs,
+        onSymbolChange: handleSymbolChange,
+        onTimeframeChange: handleTimeframeChange,
+        onAddCustomTimeframe: handleAddCustomTimeframe,
+        onFavoriteTfsChange: setFavoriteTfs,
+        onAddIndicator: handleAddIndicator,
+        onToggleTheme: toggleTheme,
+        onCopyScreenshot: handleCopyScreenshot,
+        onDownloadScreenshot: handleDownloadScreenshot,
+        onFullscreen: handleFullscreen,
+        isFullscreen,
+        ...activeTab.savedLayoutId ? { currentLayoutName: activeTab.label, currentLayoutId: activeTab.savedLayoutId } : {},
+        autoSave,
+        onFetchLayouts: () => layouts.list(),
+        onSaveLayout: handleSaveLayout,
+        onLoadLayout: handleLoadLayout,
+        onRenameLayout: handleRenameLayout,
+        onCopyLayout: handleCopyLayout,
+        onToggleAutoSave: handleToggleAutoSave,
+        onDeleteLayout: handleDeleteLayout,
+        onOpenLayoutInNewTab: handleOpenLayoutInNewTab,
+        symbolResolver,
+        showTradeButton: capabilities.renderManagedTradingControls,
+        tradeDrawerOpen: tradeDrawerOpen || orderPanelOpen,
+        onToggleTradeDrawer: () => setTradeDrawerOpen((o) => !o),
+        watchlistOpen,
+        onToggleWatchlist: () => setWatchlistOpen((o) => !o),
+        orderEntryOpen: orderPanelOpen,
+        onToggleOrderEntry: handleToggleOrderEntry,
+        showOrderEntry: capabilities.renderManagedTradingControls,
+        activeSymbol: activeTab.symbol,
+        timezone,
+        onTimezoneChange: setTimezone,
+        session,
+        onSessionChange: setSession,
+        scriptDrawerOpen,
+        onToggleScriptDrawer: () => setScriptDrawerOpen((o) => !o),
+        isLicensed,
+        wsLoaded,
+        chartSlots,
+        drawers
+      }
+    ) });
   }
 );
 function FloatingPanel({