@stocksharp/trading-controls 1.1.1 → 1.3.0

package/dist/sstradingcontrols.js

@@ -25,7 +25,11 @@ var SSTradingControls = (() => {
   __export(index_exports, {
     ActiveOrdersWidget: () => ActiveOrdersWidget,
     ControlTypes: () => ControlTypes,
+    LogLevels: () => LogLevels,
+    LogMonitorWidget: () => LogMonitorWidget,
     MarketDataLevels: () => MarketDataLevels,
+    OptionDeskWidget: () => OptionDeskWidget,
+    OptionTypes: () => OptionTypes,
     OrderBookWidget: () => OrderBookWidget,
     OrderEntrySides: () => OrderEntrySides,
     OrderEntryTypes: () => OrderEntryTypes,
@@ -33,22 +37,44 @@ var SSTradingControls = (() => {
     OrderStates: () => OrderStates,
     PRESENTATION_CLASSES: () => PRESENTATION_CLASSES,
     PositionsWidget: () => PositionsWidget,
+    StatisticsWidget: () => StatisticsWidget,
+    StrategiesWidget: () => StrategiesWidget,
+    StrategyStates: () => StrategyStates,
     TradeFeedWidget: () => TradeFeedWidget,
     TradeHistoryWidget: () => TradeHistoryWidget,
     WatchlistWidget: () => WatchlistWidget,
     aggregateBubbles: () => aggregateBubbles,
     assertHost: () => assertHost,
+    buildLogTree: () => buildLogTree,
     cleanRejectReason: () => cleanRejectReason,
+    compressPnl: () => compressPnl,
+    d1: () => d1,
+    d2: () => d2,
+    drawPnlCurve: () => drawPnlCurve,
     formatPnl: () => formatPnl,
     formatPrice: () => formatPrice,
     formatQty: () => formatQty,
+    formatStatistic: () => formatStatistic,
     formatTime: () => formatTime,
+    greekPlaces: () => greekPlaces,
+    greekScales: () => greekScales,
+    greeks: () => greeks,
+    impliedVolatility: () => impliedVolatility,
+    keepLog: () => keepLog,
     layoutBubbles: () => layoutBubbles,
     makeElement: () => makeElement,
+    makeGridMenu: () => makeGridMenu,
     makeIcon: () => makeIcon,
     makeIconButton: () => makeIconButton,
     makePanelId: () => makePanelId,
-    makePanelRoot: () => makePanelRoot
+    makePanelRoot: () => makePanelRoot,
+    normalCdf: () => normalCdf,
+    normalPdf: () => normalPdf,
+    pnlCurve: () => pnlCurve,
+    premium: () => premium,
+    scaleChain: () => scaleChain,
+    sideGreeks: () => sideGreeks,
+    subtreeOf: () => subtreeOf
   });
 
   // src/trading-host.ts
@@ -73,6 +99,7 @@ var SSTradingControls = (() => {
     _required(host.presentation.isBuy, "host.presentation.isBuy", "function", controlName);
     _required(host.presentation.typeText, "host.presentation.typeText", "function", controlName);
     _required(host.presentation.statusText, "host.presentation.statusText", "function", controlName);
+    _required(host.presentation.timeText, "host.presentation.timeText", "function", controlName);
     _required(host.presentation.sideClass, "host.presentation.sideClass", "function", controlName);
     _required(host.presentation.pnlClass, "host.presentation.pnlClass", "function", controlName);
     _required(host.presentation.canvasPalette, "host.presentation.canvasPalette", "function", controlName);
@@ -119,13 +146,17 @@ var SSTradingControls = (() => {
     Positions: "positions",
     OrderBook: "orderbook",
     TradeFeed: "tradefeed",
-    OrderEntry: "orderEntry"
+    OrderEntry: "orderEntry",
+    Statistics: "statistics",
+    LogMonitor: "logMonitor",
+    Strategies: "strategies",
+    OptionDesk: "optionDesk"
   };
 
   // src/formatters.ts
-  function formatPrice(price) {
-    if (price == null || isNaN(Number(price))) return "--";
-    const n = Number(price);
+  function formatPrice(price2) {
+    if (price2 == null || isNaN(Number(price2))) return "--";
+    const n = Number(price2);
     const a = Math.abs(n);
     let prec = 2;
     if (a < 1) prec = 4;
@@ -814,6 +845,13 @@ var SSTradingControls = (() => {
     copyRows: (count) => `Copy selected rows (${count})`,
     exportXlsx: "Export to .xlsx"
   };
+  var CONTROL_TAGS = ["SELECT", "INPUT", "BUTTON", "TEXTAREA", "A", "OPTION", "LABEL"];
+  function isControl(event) {
+    const target = event.target;
+    if (target === null || target === void 0) return false;
+    if (target.isContentEditable === true) return true;
+    return CONTROL_TAGS.includes(String(target.tagName ?? "").toUpperCase());
+  }
   var _DataGrid = class _DataGrid {
     constructor(options) {
       __publicField(this, "options");
@@ -1726,6 +1764,7 @@ var SSTradingControls = (() => {
         tr.addEventListener("mousedown", (event) => {
           const button = event.button;
           if (button !== void 0 && button !== 0) return;
+          if (isControl(event)) return;
           event.preventDefault();
           _DataGrid._active = this;
           this._clickRow(key, event);
@@ -1787,6 +1826,7 @@ var SSTradingControls = (() => {
         if (group) group.rows.push(row);
         else groups.set(key, { label: col ? this._displayText(col, row) : key, rows: [row] });
       }
+      if (this.options.groupOrder === "rows") return groups;
       return new Map([...groups.entries()].sort((a, b) => this._collator.compare(a[1].label, b[1].label)));
     }
     _groupRow(key, label, count) {
@@ -1801,6 +1841,8 @@ var SSTradingControls = (() => {
       else td.appendChild(content);
       tr.appendChild(td);
       tr.addEventListener("click", () => this.toggleGroup(key));
+      tr.style.cursor = "pointer";
+      tr.style.userSelect = "none";
       return tr;
     }
     _emptyRow() {
@@ -1863,7 +1905,7 @@ var SSTradingControls = (() => {
   var _ActiveOrdersWidget = class _ActiveOrdersWidget {
     static create(hostEl, state, deps) {
       const host = assertHost(deps?.host, "ActiveOrdersWidget");
-      const root = _ActiveOrdersWidget._buildRoot(host);
+      const root = _ActiveOrdersWidget._buildRoot(host, deps?.readOnly === true);
       root.id = makePanelId(_ActiveOrdersWidget.TYPE);
       hostEl.appendChild(root);
       return new _ActiveOrdersWidget(root, state || {}, deps);
@@ -1879,7 +1921,7 @@ var SSTradingControls = (() => {
     // already give the identical button — and are wired to deps. Cancel-all
     // keeps a distinct accessible name from its tooltip, which is why it states
     // `aria-label` rather than taking the tooltip for both.
-    static _buildRoot(host) {
+    static _buildRoot(host, readOnly = false) {
       return makePanelRoot("active-orders-panel", host.t("ActiveOrders"), [
         makeElement("div", "panel-header", {}, [
           makeElement("span", "", {}, [host.t("OpenOrders")]),
@@ -1893,13 +1935,15 @@ var SSTradingControls = (() => {
             ])
           ]),
           makeElement("div", "panel-rail", { role: "toolbar", "aria-label": host.t("ActiveOrdersActions") }, [
-            makeIconButton(
-              "bt-icon-btn bt-icon-cancel-all panel-cancel-all-btn",
-              host.t("CancelAll"),
-              "bi-x-circle",
-              { "aria-label": host.t("CancelAllOrders") }
-            ),
-            makeIconButton("bt-icon-btn panel-refresh-btn", host.t("Refresh"), "bi-arrow-clockwise", {}),
+            ...readOnly ? [] : [
+              makeIconButton(
+                "bt-icon-btn bt-icon-cancel-all panel-cancel-all-btn",
+                host.t("CancelAll"),
+                "bi-x-circle",
+                { "aria-label": host.t("CancelAllOrders") }
+              ),
+              makeIconButton("bt-icon-btn panel-refresh-btn", host.t("Refresh"), "bi-arrow-clockwise", {})
+            ],
             makeIconButton("bt-icon-btn panel-export-btn", host.t("ExportToExcel"), "bi-file-earmark-spreadsheet", {})
           ])
         ])
@@ -1907,9 +1951,16 @@ var SSTradingControls = (() => {
     }
     constructor(rootEl, _state, deps) {
       this._host = assertHost(deps?.host, "ActiveOrdersWidget");
-      for (const name of ["cancelOrder", "dismissOrder", "editOrderField", "replaceOrder", "cancelAllOrders", "refreshOrders"]) {
-        if (typeof deps?.[name] !== "function")
-          throw new Error(`ActiveOrdersWidget: dep "${name}" is required`);
+      this._readOnly = deps?.readOnly === true;
+      if (this._readOnly) {
+        this._actions = null;
+      } else {
+        const actions = deps;
+        for (const name of ["cancelOrder", "dismissOrder", "editOrderField", "replaceOrder", "cancelAllOrders", "refreshOrders"]) {
+          if (typeof actions?.[name] !== "function")
+            throw new Error(`ActiveOrdersWidget: dep "${name}" is required`);
+        }
+        this._actions = actions;
       }
       this.rootEl = rootEl;
       this._deps = deps;
@@ -1925,11 +1976,11 @@ var SSTradingControls = (() => {
       });
       this._cancelAllBtn?.addEventListener("click", (e) => {
         e.preventDefault();
-        this._deps.cancelAllOrders();
+        this._actions?.cancelAllOrders();
       });
       this._refreshBtn?.addEventListener("click", (e) => {
         e.preventDefault();
-        this._deps.refreshOrders();
+        this._actions?.refreshOrders();
       });
       this._exportBtn?.addEventListener("click", (e) => {
         e.preventDefault();
@@ -2032,7 +2083,7 @@ var SSTradingControls = (() => {
         }
         const updated = { quantity: order.quantity, limitPrice: order.limitPrice, stopPrice: order.stopPrice };
         updated[field] = newVal;
-        this._deps.replaceOrder(orderId, updated.quantity, updated.limitPrice, updated.stopPrice);
+        this._actions?.replaceOrder(orderId, updated.quantity, updated.limitPrice, updated.stopPrice);
       };
       input.addEventListener("blur", commit);
       input.addEventListener("keydown", (e) => {
@@ -2092,7 +2143,7 @@ var SSTradingControls = (() => {
           exportable: true,
           value: (o) => o.quantity,
           render: (o) => formatQty(o.quantity),
-          cellClass: (o) => _ActiveOrdersWidget._editableClass(o, "quantity"),
+          cellClass: (o) => this._readOnly ? "" : _ActiveOrdersWidget._editableClass(o, "quantity"),
           bindCell: (td, o) => this._bindInlineEdit(td, o, "quantity")
         },
         {
@@ -2101,7 +2152,7 @@ var SSTradingControls = (() => {
           exportable: true,
           value: (o) => o.limitPrice,
           render: (o) => o.limitPrice ? formatPrice(o.limitPrice) : label("MKT"),
-          cellClass: (o) => _ActiveOrdersWidget._editableClass(o, "limitPrice"),
+          cellClass: (o) => this._readOnly ? "" : _ActiveOrdersWidget._editableClass(o, "limitPrice"),
           bindCell: (td, o) => this._bindInlineEdit(td, o, "limitPrice"),
           exportValue: (o) => o.limitPrice ?? label("MKT")
         },
@@ -2111,7 +2162,7 @@ var SSTradingControls = (() => {
           exportable: true,
           value: (o) => o.stopPrice,
           render: (o) => o.stopPrice ? formatPrice(o.stopPrice) : "--",
-          cellClass: (o) => _ActiveOrdersWidget._editableClass(o, "stopPrice"),
+          cellClass: (o) => this._readOnly ? "" : _ActiveOrdersWidget._editableClass(o, "stopPrice"),
           bindCell: (td, o) => this._bindInlineEdit(td, o, "stopPrice"),
           exportValue: (o) => o.stopPrice ?? ""
         },
@@ -2123,14 +2174,14 @@ var SSTradingControls = (() => {
           render: (o) => this._statusCell(o),
           exportValue: (o) => presentation.statusText(o.status)
         },
-        {
+        ...this._readOnly ? [] : [{
           key: "actions",
           header: label("Actions"),
           headerHidden: true,
           exportable: false,
           cellClass: () => "position-actions",
           render: (o) => this._actionButton(o)
-        }
+        }]
       ];
     }
     static _rowClass(order) {
@@ -2152,8 +2203,9 @@ var SSTradingControls = (() => {
     // Double-click to edit belongs to the whole cell rather than to a control
     // inside it, which is why it is wired here instead of returned by render().
     _bindInlineEdit(td, order, field) {
-      if (!_ActiveOrdersWidget._canEdit(order, field)) return;
-      td.addEventListener("dblclick", () => this._deps.editOrderField(order.id, field));
+      if (this._actions === null || !_ActiveOrdersWidget._canEdit(order, field)) return;
+      const edit = this._actions.editOrderField;
+      td.addEventListener("dblclick", () => edit(order.id, field));
     }
     // Status text, plus a hoverable icon carrying the rejection reason. Some
     // venues wrap the human-readable rejection inside a JSON blob;
@@ -2189,8 +2241,9 @@ var SSTradingControls = (() => {
       icon.className = "bi bi-x-circle";
       button.appendChild(icon);
       button.addEventListener("click", () => {
-        if (isTerminal) this._deps.dismissOrder(order.id);
-        else this._deps.cancelOrder(order.id);
+        if (this._actions === null) return;
+        if (isTerminal) this._actions.dismissOrder(order.id);
+        else this._actions.cancelOrder(order.id);
       });
       return button;
     }
@@ -2447,14 +2500,14 @@ var SSTradingControls = (() => {
   var _TradeHistoryWidget = class _TradeHistoryWidget {
     static create(hostEl, state, deps) {
       const host = assertHost(deps?.host, "TradeHistoryWidget");
-      const root = _TradeHistoryWidget._buildRoot(host);
+      const root = _TradeHistoryWidget._buildRoot(host, deps?.readOnly === true);
       root.id = makePanelId(_TradeHistoryWidget.TYPE);
       hostEl.appendChild(root);
       return new _TradeHistoryWidget(root, state || {}, deps);
     }
     // The panel's markup. The host stylesheet reads this structure, and a
     // docking host lifts `.panel-header`'s children into its tab strip.
-    static _buildRoot(host) {
+    static _buildRoot(host, readOnly = false) {
       const title = host.t("TradeHistory");
       return makePanelRoot("trade-history-panel", title, [
         makeElement("div", "panel-header", {}, [
@@ -2469,7 +2522,7 @@ var SSTradingControls = (() => {
             ])
           ]),
           makeElement("div", "panel-rail", { role: "toolbar", "aria-label": host.t("TradeHistoryActions") }, [
-            makeIconButton("bt-icon-btn panel-refresh-btn", host.t("Refresh"), "bi-arrow-clockwise", {}),
+            ...readOnly ? [] : [makeIconButton("bt-icon-btn panel-refresh-btn", host.t("Refresh"), "bi-arrow-clockwise", {})],
             makeIconButton("bt-icon-btn panel-export-btn", host.t("ExportToExcel"), "bi-file-earmark-spreadsheet", {})
           ])
         ])
@@ -2545,6 +2598,14 @@ var SSTradingControls = (() => {
         this._host.log(`TradeHistoryWidget: failed to load trade history: ${err}`);
       }
     }
+    /// Show these rows. The push path, for a consumer that already holds the
+    /// trades - a finished run's report - rather than an account to load them
+    /// from. `refresh` is the pull path and the two do not mix: whichever ran
+    /// last is what the grid shows.
+    update(rows) {
+      this._rows = rows || [];
+      this._grid?.setRows(this._rows);
+    }
     // Export the table to .xlsx in the currently rendered (sorted) order.
     _export() {
       this._grid?.download("trades", this._host.t("TradeHistory"));
@@ -2568,8 +2629,8 @@ var SSTradingControls = (() => {
           header: label("Time"),
           exportable: true,
           value: (t) => t.executedAt || t.time,
-          render: (t) => formatTime(t.executedAt || t.time),
-          exportValue: (t) => formatTime(t.executedAt || t.time)
+          render: (t) => presentation.timeText(t.executedAt || t.time),
+          exportValue: (t) => presentation.timeText(t.executedAt || t.time)
         },
         {
           key: "symbol",
@@ -2772,8 +2833,8 @@ var SSTradingControls = (() => {
       if (previous) this._grid.rowElement(String(previous))?.classList.remove("wl-current");
       if (symbol) this._grid.rowElement(String(symbol))?.classList.add("wl-current");
     }
-    onPriceUpdate(symbol, price) {
-      if (price == null || !isFinite(price)) return;
+    onPriceUpdate(symbol, price2) {
+      if (price2 == null || !isFinite(price2)) return;
       let full = symbol;
       if (!full.includes("@")) {
         const match = this.instruments.find((i) => String(i.symbol).split("@")[0] === symbol);
@@ -2788,11 +2849,11 @@ var SSTradingControls = (() => {
         baseline = stored ? Number(stored) : void 0;
       }
       if (baseline == null || !isFinite(baseline) || baseline === 0) {
-        baseline = price;
-        this._host.cache.set(baselineKey, String(price));
+        baseline = price2;
+        this._host.cache.set(baselineKey, String(price2));
       }
-      const chgPct = baseline ? (price - baseline) / baseline * 100 : 0;
-      this.stats.set(full, { ...cur || {}, lastPrice: price, baseline, chgPct });
+      const chgPct = baseline ? (price2 - baseline) / baseline * 100 : 0;
+      this.stats.set(full, { ...cur || {}, lastPrice: price2, baseline, chgPct });
       this._updateRow(full, prev);
     }
     static _baselineKey(symbol) {
@@ -2998,9 +3059,9 @@ var SSTradingControls = (() => {
       if (!this._host.isPrimary) return;
       this._host.ticker.publish(this._visible().map((i) => String(i.symbol)), this.stats);
     }
-    static _priceText(price) {
-      const n = Number(price);
-      if (price == null || !isFinite(n) || n === 0) return "--";
+    static _priceText(price2) {
+      const n = Number(price2);
+      if (price2 == null || !isFinite(n) || n === 0) return "--";
       if (n >= 1) return n.toFixed(2);
       if (n >= 0.01) return n.toFixed(4);
       return n.toFixed(6);
@@ -3272,15 +3333,15 @@ var SSTradingControls = (() => {
     }
     /// A reference price off the tape. Both columns follow the market while the
     /// form is untouched; the field the trader is typing in is left alone.
-    setLimitPrice(price) {
-      this._lastPrice = price;
-      this._writePrices(this._bestBid > 0 ? this._bestBid : price, this._bestAsk > 0 ? this._bestAsk : price, false);
+    setLimitPrice(price2) {
+      this._lastPrice = price2;
+      this._writePrices(this._bestBid > 0 ? this._bestBid : price2, this._bestAsk > 0 ? this._bestAsk : price2, false);
     }
     /// The same reference price, force-written: an explicit host gesture
     /// ("price this order here") outranks whatever was typed.
-    seedLimitPrice(price) {
-      this._lastPrice = price;
-      this._writePrices(this._bestBid > 0 ? this._bestBid : price, this._bestAsk > 0 ? this._bestAsk : price, true);
+    seedLimitPrice(price2) {
+      this._lastPrice = price2;
+      this._writePrices(this._bestBid > 0 ? this._bestBid : price2, this._bestAsk > 0 ? this._bestAsk : price2, true);
     }
     /// Best bid and offer. The passive seed for a limit form is Buy = best bid
     /// and Sell = best ask — joining the book on each side, so the spread in the
@@ -3305,10 +3366,10 @@ var SSTradingControls = (() => {
     /// Force one column's price and let ticks resume updating it afterwards —
     /// what a click on a book level or a chart price means. Quantized to the
     /// instrument's tick, so a raw chart coordinate does not fail validation.
-    setPrice(side, price) {
+    setPrice(side, price2) {
       const input = this._input(side, PRICE_INPUT);
       if (!input) return;
-      const text = this._formatPriceForInput(price);
+      const text = this._formatPriceForInput(price2);
       if (!text) return;
       input.dataset.userEdited = "0";
       input.value = text;
@@ -3540,10 +3601,10 @@ var SSTradingControls = (() => {
       this._writePrice(OrderEntrySides.Sell, sellPrice, reset);
       for (const side of _OrderEntryWidget.SIDES) this._recalculate(side);
     }
-    _writePrice(side, price, reset) {
+    _writePrice(side, price2, reset) {
       const input = this._input(side, PRICE_INPUT);
       if (!input) return;
-      const text = this._formatPriceForInput(price);
+      const text = this._formatPriceForInput(price2);
       if (!text) return;
       if (reset) {
         input.dataset.userEdited = "0";
@@ -3556,8 +3617,8 @@ var SSTradingControls = (() => {
     }
     // Round a price to the instrument's tick and cut the float tail: a mid price
     // of (bid+ask)/2 otherwise reaches the field as 0.44625000000000004.
-    _formatPriceForInput(price) {
-      const n = Number(price);
+    _formatPriceForInput(price2) {
+      const n = Number(price2);
       if (!isFinite(n)) return "";
       const tickSize = Number(this._instrument?.tickSize) || 0;
       if (tickSize > 0)
@@ -3575,16 +3636,16 @@ var SSTradingControls = (() => {
       const total = this._cols[side]?.querySelector(TOTAL_VALUE);
       if (!total) return;
       const quantity = this._number(side, QTY_INPUT) ?? 0;
-      let price;
+      let price2;
       if (this._orderType === OrderEntryTypes.Limit || this._orderType === OrderEntryTypes.StopLimit) {
-        price = this._number(side, PRICE_INPUT) ?? 0;
+        price2 = this._number(side, PRICE_INPUT) ?? 0;
       } else if (this._orderType === OrderEntryTypes.Stop) {
-        price = this._number(side, STOP_INPUT) ?? this._lastPrice;
+        price2 = this._number(side, STOP_INPUT) ?? this._lastPrice;
       } else {
         const bbo = side === OrderEntrySides.Buy ? this._bestAsk : this._bestBid;
-        price = bbo > 0 ? bbo : this._lastPrice;
+        price2 = bbo > 0 ? bbo : this._lastPrice;
       }
-      total.textContent = quantity > 0 && price > 0 ? (quantity * price).toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 }) : "--";
+      total.textContent = quantity > 0 && price2 > 0 ? (quantity * price2).toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 }) : "--";
     }
     // The estimate line doubles as the validation message and the submit button
     // follows it. A disabled pad reads as invalid for the same reason: there is
@@ -3614,20 +3675,20 @@ var SSTradingControls = (() => {
   var OrderEntryWidget = _OrderEntryWidget;
 
   // src/orderbook-depth.ts
-  function depthSide(levels, direction, geometry) {
+  function depthSide(levels, direction2, geometry) {
     if (levels.length === 0) return null;
     const best = levels[0].price;
     const worst = levels[levels.length - 1].price;
     const span = Math.abs(best - worst);
     if (!(span > 0)) return null;
     const reach = geometry.halfWidth - geometry.pad;
-    const points = [{ x: geometry.midX + direction * geometry.pad, cumulative: 0 }];
+    const points = [{ x: geometry.midX + direction2 * geometry.pad, cumulative: 0 }];
     let cumulative = 0;
     for (const level of levels) {
       cumulative += level.quantity;
       const distance = Math.abs(level.price - best);
       points.push({
-        x: geometry.midX + direction * (geometry.pad + distance / span * reach),
+        x: geometry.midX + direction2 * (geometry.pad + distance / span * reach),
         cumulative
       });
     }
@@ -3989,11 +4050,11 @@ var SSTradingControls = (() => {
         const target = e.target;
         const row = target?.closest(".ob-row");
         if (!row) return;
-        const price = Number(row.dataset.price);
-        if (!Number.isFinite(price)) return;
+        const price2 = Number(row.dataset.price);
+        if (!Number.isFinite(price2)) return;
         const side = row.dataset.side === "buy" ? 0 : 1;
-        if (e.ctrlKey || e.metaKey) this._deps.onPriceExecuted(price, side);
-        else this._deps.onPriceSelected(price, side);
+        if (e.ctrlKey || e.metaKey) this._deps.onPriceExecuted(price2, side);
+        else this._deps.onPriceSelected(price2, side);
       });
     }
     _refreshDepthButtons() {
@@ -4052,8 +4113,8 @@ var SSTradingControls = (() => {
     static _deepest() {
       return _OrderBookWidget.DEPTHS[_OrderBookWidget.DEPTHS.length - 1];
     }
-    static _sorted(ledger, direction) {
-      return [...ledger.entries()].filter(([price, quantity]) => Number.isFinite(price) && quantity > 0).sort((left, right) => direction * (left[0] - right[0])).map(([price, quantity]) => ({ price, quantity }));
+    static _sorted(ledger, direction2) {
+      return [...ledger.entries()].filter(([price2, quantity]) => Number.isFinite(price2) && quantity > 0).sort((left, right) => direction2 * (left[0] - right[0])).map(([price2, quantity]) => ({ price: price2, quantity }));
     }
     _applySnapshotSide(ledger, levels, side, symbol, sequence) {
       for (const level of levels || []) {
@@ -4093,8 +4154,8 @@ var SSTradingControls = (() => {
       if (this._bidsByPrice.size === 0 || this._asksByPrice.size === 0) return;
       let bestBid = -Infinity;
       let bestAsk = Infinity;
-      for (const price of this._bidsByPrice.keys()) if (price > bestBid) bestBid = price;
-      for (const price of this._asksByPrice.keys()) if (price < bestAsk) bestAsk = price;
+      for (const price2 of this._bidsByPrice.keys()) if (price2 > bestBid) bestBid = price2;
+      for (const price2 of this._asksByPrice.keys()) if (price2 < bestAsk) bestAsk = price2;
       if (bestBid >= bestAsk) {
         this._anomaly(`crossed book: bid=${bestBid} >= ask=${bestAsk} sym=${symbol} seq=${sequence} ${wasSnapshot ? "snapshot" : "diff"}`);
       }
@@ -4230,8 +4291,8 @@ var SSTradingControls = (() => {
       }
       return { bids, asks };
     }
-    static _priceKey(price) {
-      return Number(price).toFixed(8);
+    static _priceKey(price2) {
+      return Number(price2).toFixed(8);
     }
     // The bid/ask split under the ladder, as one measurement the stylesheet
     // turns into two widths.
@@ -4334,6 +4395,1225 @@ var SSTradingControls = (() => {
   _OrderBookWidget.DEPTHCHART_KEY = "terminal.obDepthChart";
   var OrderBookWidget = _OrderBookWidget;
 
+  // src/pnl-curve.ts
+  function compressPnl(points, count) {
+    if (points.length <= count || count < 2) return points.slice();
+    const first = points[0];
+    const last = points[points.length - 1];
+    const span = last.time - first.time;
+    if (!(span > 0)) {
+      const step = (points.length - 1) / (count - 1);
+      return Array.from({ length: count }, (_, i) => points[Math.round(i * step)]);
+    }
+    const buckets = count - 1;
+    const out = [first];
+    let bucket = 0;
+    for (let i = 1; i < points.length; i++) {
+      const index = Math.min(buckets - 1, Math.floor((points[i].time - first.time) / span * buckets));
+      if (index > bucket) {
+        out.push(points[i - 1]);
+        bucket = index;
+      }
+    }
+    if (out[out.length - 1] !== last) out.push(last);
+    return out;
+  }
+  function pnlCurve(points, box) {
+    const clean = points.filter((p) => p !== null && p !== void 0 && Number.isFinite(p.time) && Number.isFinite(p.value)).slice().sort((a, b) => a.time - b.time);
+    if (clean.length < 2) return null;
+    const drawable = Math.max(2, Math.round(box.width - box.padX * 2));
+    const shown = compressPnl(clean, drawable);
+    const values = shown.map((p) => p.value);
+    const min = Math.min(0, ...values);
+    const max = Math.max(0, ...values);
+    const left = box.padX;
+    const right = box.width - box.padX;
+    const top = box.padY;
+    const bottom = box.height - box.padY;
+    const firstTime = shown[0].time;
+    const lastTime = shown[shown.length - 1].time;
+    const timeSpan = lastTime - firstTime;
+    const valueSpan = max - min;
+    const x = (time) => timeSpan === 0 ? left : left + (time - firstTime) / timeSpan * (right - left);
+    const y = (value) => valueSpan === 0 ? top : bottom - (value - min) / valueSpan * (bottom - top);
+    const curve = shown.map((p) => [x(p.time), y(p.value)]);
+    const zeroY = y(0);
+    return {
+      points: curve,
+      // Closed along the baseline rather than along the foot of the box: a run entirely above
+      // water fills the gap between itself and zero, and nothing below it.
+      area: [...curve, [curve[curve.length - 1][0], zeroY], [curve[0][0], zeroY]],
+      zeroY,
+      min,
+      max,
+      positive: shown[shown.length - 1].value >= 0
+    };
+  }
+  function drawPnlCurve(ctx, curve, box, style) {
+    const colour = curve.positive ? style.up : style.down;
+    ctx.clearRect(0, 0, box.width, box.height);
+    ctx.setLineDash([2, 3]);
+    ctx.strokeStyle = style.baseline;
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.moveTo(box.padX, curve.zeroY);
+    ctx.lineTo(box.width - box.padX, curve.zeroY);
+    ctx.stroke();
+    ctx.setLineDash([]);
+    ctx.globalAlpha = style.fillOpacity;
+    ctx.fillStyle = colour;
+    ctx.beginPath();
+    ctx.moveTo(curve.area[0][0], curve.area[0][1]);
+    for (const [px, py] of curve.area.slice(1)) ctx.lineTo(px, py);
+    ctx.closePath();
+    ctx.fill();
+    ctx.globalAlpha = 1;
+    ctx.strokeStyle = colour;
+    ctx.lineWidth = style.lineWidth;
+    ctx.beginPath();
+    ctx.moveTo(curve.points[0][0], curve.points[0][1]);
+    for (const [px, py] of curve.points.slice(1)) ctx.lineTo(px, py);
+    ctx.stroke();
+  }
+
+  // src/black-scholes.ts
+  var OptionTypes = {
+    Call: "call",
+    Put: "put"
+  };
+  var SQRT_2PI = Math.sqrt(2 * Math.PI);
+  var DAYS_IN_YEAR = 365;
+  function normalCdf(x) {
+    const z = Math.abs(x);
+    if (z > 37) return x > 0 ? 1 : 0;
+    const e = Math.exp(-(z * z) / 2);
+    let tail;
+    if (z < 7.07106781186547) {
+      let b = 0.0352624965998911 * z + 0.700383064443688;
+      b = b * z + 6.37396220353165;
+      b = b * z + 33.912866078383;
+      b = b * z + 112.079291497871;
+      b = b * z + 221.213596169931;
+      b = b * z + 220.206867912376;
+      let d = 0.0883883476483184 * z + 1.75566716318264;
+      d = d * z + 16.064177579207;
+      d = d * z + 86.7807322029461;
+      d = d * z + 296.564248779674;
+      d = d * z + 637.333633378831;
+      d = d * z + 793.826512519948;
+      d = d * z + 440.413735824752;
+      tail = e * b / d;
+    } else {
+      let b = z + 0.65;
+      b = z + 4 / b;
+      b = z + 3 / b;
+      b = z + 2 / b;
+      b = z + 1 / b;
+      tail = e / (b * 2.506628274631);
+    }
+    return x > 0 ? 1 - tail : tail;
+  }
+  function normalPdf(x) {
+    return Math.exp(-0.5 * x * x) / SQRT_2PI;
+  }
+  function d1(inputs) {
+    const { assetPrice, strike, timeToExpiry, riskFree, dividend, deviation } = inputs;
+    const spread = deviation * Math.sqrt(timeToExpiry);
+    if (spread === 0 || assetPrice <= 0 || strike <= 0) return 0;
+    return (Math.log(assetPrice / strike) + (riskFree - dividend + deviation * deviation / 2) * timeToExpiry) / spread;
+  }
+  function d2(inputs) {
+    const spread = inputs.deviation * Math.sqrt(inputs.timeToExpiry);
+    return spread === 0 ? 0 : d1(inputs) - spread;
+  }
+  function premium(type, inputs) {
+    const { assetPrice, strike, timeToExpiry, riskFree, dividend, deviation } = inputs;
+    if (timeToExpiry <= 0 || deviation <= 0)
+      return Math.max(0, type === OptionTypes.Call ? assetPrice - strike : strike - assetPrice);
+    const a = d1(inputs);
+    const b = d2(inputs);
+    const carried = assetPrice * Math.exp(-dividend * timeToExpiry);
+    const discounted = strike * Math.exp(-riskFree * timeToExpiry);
+    return type === OptionTypes.Call ? carried * normalCdf(a) - discounted * normalCdf(b) : discounted * normalCdf(-b) - carried * normalCdf(-a);
+  }
+  function greeks(type, inputs) {
+    const { assetPrice, strike, timeToExpiry, riskFree, dividend, deviation } = inputs;
+    const sign = type === OptionTypes.Call ? 1 : -1;
+    if (timeToExpiry <= 0 || deviation <= 0 || assetPrice <= 0) {
+      const inTheMoney = type === OptionTypes.Call ? assetPrice > strike : assetPrice < strike;
+      return { delta: inTheMoney ? sign : 0, gamma: 0, vega: 0, theta: 0, rho: 0 };
+    }
+    const a = d1(inputs);
+    const b = d2(inputs);
+    const sqrtT = Math.sqrt(timeToExpiry);
+    const density = normalPdf(a);
+    const carry = Math.exp(-dividend * timeToExpiry);
+    const discount = Math.exp(-riskFree * timeToExpiry);
+    const delta = sign * carry * normalCdf(sign * a);
+    const gamma = carry * density / (assetPrice * deviation * sqrtT);
+    const vega = assetPrice * carry * density * sqrtT * 0.01;
+    const rho = sign * strike * timeToExpiry * discount * normalCdf(sign * b) * 0.01;
+    const theta = (-(assetPrice * carry * density * deviation) / (2 * sqrtT) - sign * riskFree * strike * discount * normalCdf(sign * b) + sign * dividend * assetPrice * carry * normalCdf(sign * a)) / DAYS_IN_YEAR;
+    return { delta, gamma, vega, theta, rho };
+  }
+  function impliedVolatility(type, inputs, price2) {
+    if (!(price2 > 0) || inputs.timeToExpiry <= 0) return null;
+    const at = (deviation) => premium(type, { ...inputs, deviation });
+    let low = 1e-6;
+    let high = 5;
+    if (price2 < at(low) || price2 > at(high)) return null;
+    for (let step = 0; step < 60; step++) {
+      const mid = (low + high) / 2;
+      if (at(mid) < price2) low = mid;
+      else high = mid;
+    }
+    return (low + high) / 2;
+  }
+
+  // src/option-desk-widget.ts
+  var _OptionDeskWidget = class _OptionDeskWidget {
+    static create(hostEl, state, deps) {
+      const host = assertHost(deps?.host, "OptionDeskWidget");
+      const root = _OptionDeskWidget._buildRoot(host);
+      root.id = makePanelId(_OptionDeskWidget.TYPE);
+      hostEl.appendChild(root);
+      return new _OptionDeskWidget(root, state || {}, deps);
+    }
+    static _buildRoot(host) {
+      const title = host.t("OptionDesk");
+      return makePanelRoot("option-desk-panel", title, [
+        makeElement("div", "panel-header", {}, [
+          makeElement("span", "", {}, [title]),
+          makeIconButton("bt-icon-btn bt-icon-cancel panel-close-btn", host.t("ClosePanel"), "bi-x", { type: "button" })
+        ]),
+        makeElement("div", "panel-body panel-body-with-rail", {}, [
+          makeElement("div", "panel-body-content", {}, [
+            makeElement("table", "terminal-table option-desk-table", { role: "table", "aria-label": host.t("OptionChain") }, [
+              makeElement("thead", "", {}, []),
+              makeElement("tbody", "option-desk-body", {}, [])
+            ])
+          ]),
+          makeElement("div", "panel-rail", { role: "toolbar", "aria-label": host.t("OptionDeskActions") }, [
+            makeIconButton("bt-icon-btn panel-export-btn", host.t("ExportToExcel"), "bi-file-earmark-spreadsheet", {})
+          ])
+        ])
+      ]);
+    }
+    constructor(rootEl, _state, deps) {
+      this._host = assertHost(deps?.host, "OptionDeskWidget");
+      this.rootEl = rootEl;
+      this.el = this.rootEl.querySelector(".option-desk-body");
+      this._closeBtn = this.rootEl.querySelector(".panel-close-btn");
+      this._exportBtn = this.rootEl.querySelector(".panel-export-btn");
+      this._rows = [];
+      this._context = {};
+      this._places = greekScales([], {});
+      this._closeBtn?.addEventListener("click", (e) => {
+        e.preventDefault();
+        this._host.close();
+      });
+      this._exportBtn?.addEventListener("click", (e) => {
+        e.preventDefault();
+        this._export();
+      });
+      const head = this.rootEl.querySelector(".option-desk-table thead");
+      this._grid = head && this.el ? new DataGrid({
+        head,
+        body: this.el,
+        columns: this._columns(),
+        // By strike, ascending. A chain has exactly one order and it is not negotiable:
+        // the strip is read as a ladder, and re-sorting it by any column destroys that.
+        defaultSort: { col: "strike", dir: "asc" },
+        rowKey: (r) => String(r.strike),
+        emptyText: this._host.t("NoOptions"),
+        rowClass: (r) => this._rowClass(r),
+        contextMenu: makeGridMenu(this._host),
+        selection: "multi"
+      }) : null;
+      this._grid?.setState({
+        hidden: [
+          "callRho",
+          "callTheta",
+          "callHv",
+          "callTheor",
+          "putRho",
+          "putTheta",
+          "putHv",
+          "putTheor"
+        ]
+      });
+      this._host.register(this);
+    }
+    dispose() {
+      this._grid?.destroy();
+      this._host.unregister(this);
+      try {
+        this.rootEl.remove();
+      } catch {
+      }
+    }
+    /// Show this chain, priced against this context.
+    ///
+    /// Both together, always: a chain and the underlying it is priced off are one observation,
+    /// and refreshing them separately shows greeks computed from a price that has moved.
+    update(strikes, context = {}) {
+      this._context = context ?? {};
+      this._rows = scaleChain(strikes ?? [], this._context);
+      this._places = greekScales(this._rows, this._context);
+      this._grid?.setRows(this._rows);
+    }
+    /// The rows as the desk holds them, scales and intrinsic values resolved.
+    rows() {
+      return this._rows;
+    }
+    _export() {
+      this._grid?.download("option-chain", this._host.t("OptionDesk"));
+    }
+    // Which side of the money this strike is on. A chain is read from the money outwards, and
+    // the line between the two halves is what a reader finds first.
+    _rowClass(row) {
+      const asset = this._context.assetPrice;
+      if (asset === null || asset === void 0) return "option-row";
+      return `option-row ${row.strike < asset ? "option-itm-call" : "option-itm-put"}`;
+    }
+    _columns() {
+      const label = (key) => this._host.t(key);
+      const side = (which) => {
+        const prefix = which;
+        const at = (r) => r[which];
+        const g = (r) => sideGreeks(r, which, this._context);
+        return [
+          { key: `${prefix}Rho`, header: label("Rho"), exportable: true, value: (r) => g(r)?.rho ?? null, render: (r) => decimals(g(r)?.rho, this._places.rho) },
+          { key: `${prefix}Theta`, header: label("Theta"), exportable: true, value: (r) => g(r)?.theta ?? null, render: (r) => decimals(g(r)?.theta, this._places.theta) },
+          { key: `${prefix}Vega`, header: label("Vega"), exportable: true, value: (r) => g(r)?.vega ?? null, render: (r) => decimals(g(r)?.vega, this._places.vega) },
+          { key: `${prefix}Gamma`, header: label("Gamma"), exportable: true, value: (r) => g(r)?.gamma ?? null, render: (r) => decimals(g(r)?.gamma, this._places.gamma) },
+          { key: `${prefix}Delta`, header: label("Delta"), exportable: true, value: (r) => g(r)?.delta ?? null, render: (r) => decimals(g(r)?.delta, this._places.delta) },
+          { key: `${prefix}Bid`, header: label("Bid"), exportable: true, cellClass: () => "option-bid", value: (r) => at(r).bid ?? null, render: (r) => price(at(r).bid) },
+          { key: `${prefix}Ask`, header: label("Ask"), exportable: true, cellClass: () => "option-ask", value: (r) => at(r).ask ?? null, render: (r) => price(at(r).ask) },
+          { key: `${prefix}Theor`, header: label("TheorPrice"), exportable: true, value: (r) => at(r).theoretical ?? null, render: (r) => price(at(r).theoretical) },
+          {
+            key: `${prefix}Volume`,
+            header: label("Volume"),
+            exportable: true,
+            value: (r) => at(r).volume ?? 0,
+            render: (r) => this._bar(at(r).volume, which === "call" ? r.maxCallVolume : r.maxPutVolume, which, formatQty(at(r).volume ?? 0)),
+            exportValue: (r) => at(r).volume ?? 0
+          },
+          {
+            key: `${prefix}Oi`,
+            header: label("OI"),
+            exportable: true,
+            value: (r) => at(r).openInterest ?? 0,
+            render: (r) => this._bar(at(r).openInterest, which === "call" ? r.maxCallOpenInterest : r.maxPutOpenInterest, which, formatQty(at(r).openInterest ?? 0)),
+            exportValue: (r) => at(r).openInterest ?? 0
+          },
+          { key: `${prefix}Symbol`, header: which === "call" ? label("Call") : label("Put"), exportable: true, value: (r) => at(r).symbol ?? "" },
+          {
+            key: `${prefix}IvBid`,
+            header: label("IVBid"),
+            exportable: true,
+            value: (r) => at(r).ivBid ?? null,
+            render: (r) => this._bar(at(r).ivBid, r.maxVolatility, "iv", percent(at(r).ivBid)),
+            exportValue: (r) => at(r).ivBid ?? ""
+          },
+          {
+            key: `${prefix}IvAsk`,
+            header: label("IVAsk"),
+            exportable: true,
+            value: (r) => at(r).ivAsk ?? null,
+            render: (r) => this._bar(at(r).ivAsk, r.maxVolatility, "iv", percent(at(r).ivAsk)),
+            exportValue: (r) => at(r).ivAsk ?? ""
+          },
+          {
+            key: `${prefix}IvLast`,
+            header: label("IVLast"),
+            exportable: true,
+            value: (r) => at(r).ivLast ?? null,
+            render: (r) => this._bar(at(r).ivLast, r.maxVolatility, "iv", percent(at(r).ivLast)),
+            exportValue: (r) => at(r).ivLast ?? ""
+          },
+          {
+            key: `${prefix}Hv`,
+            header: label("HV"),
+            exportable: true,
+            value: (r) => at(r).historicalVolatility ?? null,
+            render: (r) => this._bar(at(r).historicalVolatility, r.maxVolatility, "iv", percent(at(r).historicalVolatility)),
+            exportValue: (r) => at(r).historicalVolatility ?? ""
+          }
+        ];
+      };
+      const puts = side("put").slice().reverse();
+      return [
+        ...side("call"),
+        {
+          key: "strike",
+          header: label("Strike"),
+          exportable: true,
+          cellClass: () => "option-strike",
+          value: (r) => r.strike,
+          render: (r) => price(r.strike)
+        },
+        {
+          key: "intrinsic",
+          header: label("IntrinsicValue"),
+          exportable: true,
+          cellClass: () => "option-intrinsic",
+          // Whichever side is in the money at this strike; the other is worth nothing to
+          // exercise, and showing both would be one number and one zero on every row.
+          value: (r) => Math.max(r.callIntrinsic, r.putIntrinsic),
+          render: (r) => price(Math.max(r.callIntrinsic, r.putIntrinsic))
+        },
+        ...puts
+      ];
+    }
+    // A figure with its share of the strip behind it. The bar is a width, not a drawing: it
+    // scales with the cell, it prints, and it needs no canvas per row.
+    _bar(value, max, kind, text) {
+      if (value === null || value === void 0 || !isFinite(value) || value <= 0) return text;
+      const cell = document.createElement("span");
+      cell.className = "option-bar-cell";
+      const bar = document.createElement("span");
+      bar.className = `option-bar option-bar-${kind}`;
+      bar.style.width = `${Math.min(100, value / (max || 1) * 100).toFixed(1)}%`;
+      cell.appendChild(bar);
+      const label = document.createElement("span");
+      label.className = "option-bar-text";
+      label.textContent = text;
+      cell.appendChild(label);
+      return cell;
+    }
+  };
+  _OptionDeskWidget.TYPE = ControlTypes.OptionDesk;
+  var OptionDeskWidget = _OptionDeskWidget;
+  function scaleChain(strikes, context) {
+    const asset = context.assetPrice ?? null;
+    const maxOf = (pick, sides) => Math.max(0, ...strikes.flatMap((r) => sides(r).map((s) => pick(s) ?? 0)).filter((v) => isFinite(v)));
+    const maxCallVolume = maxOf((s) => s.volume, (r) => [r.call]);
+    const maxPutVolume = maxOf((s) => s.volume, (r) => [r.put]);
+    const maxCallOpenInterest = maxOf((s) => s.openInterest, (r) => [r.call]);
+    const maxPutOpenInterest = maxOf((s) => s.openInterest, (r) => [r.put]);
+    const maxVolatility = Math.max(
+      maxOf((s) => s.ivBid, (r) => [r.call, r.put]),
+      maxOf((s) => s.ivAsk, (r) => [r.call, r.put]),
+      maxOf((s) => s.ivLast, (r) => [r.call, r.put]),
+      maxOf((s) => s.historicalVolatility, (r) => [r.call, r.put])
+    );
+    return strikes.map((row) => ({
+      ...row,
+      maxCallVolume,
+      maxPutVolume,
+      maxCallOpenInterest,
+      maxPutOpenInterest,
+      maxVolatility,
+      callIntrinsic: asset === null ? 0 : Math.max(0, asset - row.strike),
+      putIntrinsic: asset === null ? 0 : Math.max(0, row.strike - asset)
+    }));
+  }
+  function sideGreeks(row, which, context) {
+    const side = row[which];
+    if (side.greeks !== void 0) return side.greeks;
+    const deviation = side.ivLast ?? side.ivBid ?? side.ivAsk ?? side.historicalVolatility ?? null;
+    const assetPrice = context.assetPrice ?? null;
+    const timeToExpiry = context.timeToExpiry ?? null;
+    if (deviation === null || assetPrice === null || timeToExpiry === null) return null;
+    return greeks(which === "call" ? OptionTypes.Call : OptionTypes.Put, {
+      assetPrice,
+      strike: row.strike,
+      timeToExpiry,
+      riskFree: context.riskFree ?? 0,
+      dividend: context.dividend ?? 0,
+      deviation
+    });
+  }
+  var GREEK_KEYS = ["delta", "gamma", "vega", "theta", "rho"];
+  var GREEK_DIGITS = 4;
+  var GREEK_MIN_PLACES = 2;
+  var GREEK_MAX_PLACES = 8;
+  function greekPlaces(values) {
+    const scale = Math.min(...values.filter((v) => typeof v === "number" && isFinite(v) && v !== 0).map(Math.abs));
+    if (!isFinite(scale)) return GREEK_MIN_PLACES;
+    const places = GREEK_DIGITS - 1 - Math.floor(Math.log10(scale));
+    return Math.min(GREEK_MAX_PLACES, Math.max(GREEK_MIN_PLACES, places));
+  }
+  function greekScales(rows, context) {
+    const all = rows.flatMap((r) => [sideGreeks(r, OptionTypes.Call, context), sideGreeks(r, OptionTypes.Put, context)]).filter((g) => g !== null);
+    const places = {};
+    for (const key of GREEK_KEYS) places[key] = greekPlaces(all.map((g) => g[key]));
+    return places;
+  }
+  function decimals(value, places) {
+    if (value === null || value === void 0 || !isFinite(value)) return "";
+    return value.toFixed(places);
+  }
+  function price(value) {
+    if (value === null || value === void 0 || !isFinite(value)) return "";
+    return formatPrice(value);
+  }
+  function percent(value) {
+    if (value === null || value === void 0 || !isFinite(value)) return "";
+    return `${(value * 100).toFixed(2)}%`;
+  }
+
+  // src/strategies-widget.ts
+  var StrategyStates = {
+    Stopped: "stopped",
+    Starting: "starting",
+    Started: "started",
+    Stopping: "stopping"
+  };
+  var SPARK_WIDTH = 140;
+  var SPARK_HEIGHT = 26;
+  var _StrategiesWidget = class _StrategiesWidget {
+    static create(hostEl, state, deps) {
+      const host = assertHost(deps?.host, "StrategiesWidget");
+      const root = _StrategiesWidget._buildRoot(host);
+      root.id = makePanelId(_StrategiesWidget.TYPE);
+      hostEl.appendChild(root);
+      return new _StrategiesWidget(root, state || {}, deps);
+    }
+    static _buildRoot(host) {
+      const title = host.t("Strategies");
+      return makePanelRoot("strategies-panel", title, [
+        makeElement("div", "panel-header", {}, [
+          makeElement("span", "", {}, [title]),
+          makeIconButton("bt-icon-btn bt-icon-cancel panel-close-btn", host.t("ClosePanel"), "bi-x", { type: "button" })
+        ]),
+        makeElement("div", "panel-body panel-body-with-rail", {}, [
+          makeElement("div", "panel-body-content", {}, [
+            makeElement("table", "terminal-table strategies-table", { role: "table", "aria-label": host.t("StrategiesList") }, [
+              makeElement("thead", "", {}, []),
+              makeElement("tbody", "strategies-body", {}, [])
+            ])
+          ]),
+          makeElement("div", "panel-rail", { role: "toolbar", "aria-label": host.t("StrategiesActions") }, [
+            makeIconButton("bt-icon-btn panel-export-btn", host.t("ExportToExcel"), "bi-file-earmark-spreadsheet", {})
+          ])
+        ])
+      ]);
+    }
+    constructor(rootEl, _state, deps) {
+      this._host = assertHost(deps?.host, "StrategiesWidget");
+      this._deps = deps;
+      this.rootEl = rootEl;
+      this.el = this.rootEl.querySelector(".strategies-body");
+      this._closeBtn = this.rootEl.querySelector(".panel-close-btn");
+      this._exportBtn = this.rootEl.querySelector(".panel-export-btn");
+      this._rows = [];
+      this._closeBtn?.addEventListener("click", (e) => {
+        e.preventDefault();
+        this._host.close();
+      });
+      this._exportBtn?.addEventListener("click", (e) => {
+        e.preventDefault();
+        this._export();
+      });
+      const head = this.rootEl.querySelector(".strategies-table thead");
+      this._grid = head && this.el ? new DataGrid({
+        head,
+        body: this.el,
+        columns: this._columns(),
+        // By name: a dashboard is a list someone reads down looking for one strategy,
+        // and a list that reorders itself as P&L moves cannot be read that way.
+        defaultSort: { col: "name", dir: "asc" },
+        rowKey: (s) => String(s.id),
+        emptyText: this._host.t("NoStrategies"),
+        rowClass: (s) => `strategy-row strategy-${s.state}${s.error ? " strategy-failed" : ""}`,
+        contextMenu: makeGridMenu(this._host),
+        selection: "multi"
+      }) : null;
+      this._host.register(this);
+    }
+    dispose() {
+      this._grid?.destroy();
+      this._host.unregister(this);
+      try {
+        this.rootEl.remove();
+      } catch {
+      }
+    }
+    /// Show these strategies. The whole set: one that is gone from it has been removed, and
+    /// leaving its row behind would offer a Stop for something that no longer runs.
+    update(rows) {
+      this._rows = rows || [];
+      this._grid?.setRows(this._rows);
+    }
+    _export() {
+      this._grid?.download("strategies", this._host.t("Strategies"));
+    }
+    _columns() {
+      const label = (key) => this._host.t(key);
+      const presentation = this._host.presentation;
+      return [
+        {
+          key: "state",
+          header: label("State"),
+          exportable: true,
+          value: (s) => s.state,
+          render: (s) => this._stateCell(s),
+          cellClass: (s) => `strategy-state strategy-state-${s.state}`,
+          exportValue: (s) => s.state
+        },
+        {
+          key: "actions",
+          header: label("Actions"),
+          headerHidden: true,
+          exportable: false,
+          cellClass: () => "strategy-actions",
+          render: (s) => this._actionCell(s)
+        },
+        {
+          key: "online",
+          header: label("Online"),
+          exportable: true,
+          value: (s) => s.online ? 1 : 0,
+          render: (s) => s.online ? "\u25CF" : "\u25CB",
+          cellClass: (s) => s.online ? "strategy-online is-on" : "strategy-online",
+          exportValue: (s) => s.online ? label("Yes") : label("No")
+        },
+        {
+          key: "tradingMode",
+          header: label("Trading"),
+          exportable: true,
+          value: (s) => s.tradingMode ?? "",
+          render: (s) => this._tradingCell(s),
+          exportValue: (s) => s.tradingMode ?? ""
+        },
+        { key: "name", header: label("Name"), exportable: true, value: (s) => s.name },
+        { key: "portfolio", header: label("Portfolio"), exportable: true, value: (s) => s.portfolio ?? "" },
+        { key: "security", header: label("Sym"), exportable: true, value: (s) => s.security ?? "" },
+        {
+          key: "position",
+          header: label("Position"),
+          exportable: true,
+          value: (s) => s.position ?? 0,
+          render: (s) => this._positionCell(s),
+          cellClass: (s) => `strategy-position ${presentation.pnlClass(s.position ?? 0)}`,
+          exportValue: (s) => s.position ?? 0
+        },
+        { key: "orders", header: label("OrderCount"), exportable: true, value: (s) => s.ordersCount ?? 0 },
+        { key: "trades", header: label("NumOfTrades"), exportable: true, value: (s) => s.tradesCount ?? 0 },
+        {
+          key: "pnlChange",
+          header: label("PnLChange"),
+          exportable: true,
+          value: (s) => s.pnlChange ?? 0,
+          render: (s) => `${direction(s.pnlChange ?? 0)} ${formatPnl(s.pnlChange ?? 0)}`,
+          cellClass: (s) => presentation.pnlClass(s.pnlChange ?? 0),
+          exportValue: (s) => s.pnlChange ?? 0
+        },
+        {
+          key: "pnlChart",
+          header: label("PnLChart"),
+          exportable: false,
+          cellClass: () => "strategy-spark",
+          render: (s) => this._sparkline(s)
+        },
+        {
+          key: "realized",
+          header: label("RealizedProfit"),
+          exportable: true,
+          value: (s) => s.realized ?? 0,
+          render: (s) => formatPnl(s.realized ?? 0),
+          cellClass: (s) => presentation.pnlClass(s.realized ?? 0),
+          exportValue: (s) => s.realized ?? 0
+        },
+        {
+          key: "unrealized",
+          header: label("UnrealizedProfit"),
+          exportable: true,
+          value: (s) => s.unrealized ?? 0,
+          render: (s) => formatPnl(s.unrealized ?? 0),
+          cellClass: (s) => presentation.pnlClass(s.unrealized ?? 0),
+          exportValue: (s) => s.unrealized ?? 0
+        },
+        {
+          key: "error",
+          header: label("Error"),
+          exportable: true,
+          cellClass: () => "strategy-error",
+          value: (s) => s.error ?? ""
+        }
+      ];
+    }
+    // A dot and the state's own word. The dot is what is read across a list of twenty; the word
+    // is what tells Starting from Started, which a colour alone cannot.
+    _stateCell(row) {
+      const cell = document.createDocumentFragment();
+      const failed = row.error !== void 0 && row.error !== null && String(row.error).length > 0;
+      const dot = document.createElement("span");
+      dot.className = "strategy-dot";
+      dot.textContent = "\u25CF";
+      if (failed) dot.title = String(row.error);
+      cell.appendChild(dot);
+      const text = document.createElement("span");
+      text.className = "strategy-state-text";
+      text.textContent = failed && row.state === StrategyStates.Stopped ? this._host.t("Error") : stateText(this._host, row.state);
+      if (failed) text.title = String(row.error);
+      cell.appendChild(text);
+      return cell;
+    }
+    // Only the buttons this host can actually carry out, and only where the state allows them.
+    // A strategy that is already running has nothing to start.
+    _actionCell(row) {
+      const cell = document.createDocumentFragment();
+      const deps = this._deps;
+      const add = (action, when, title, icon, cls) => {
+        if (action === void 0) return;
+        const button = makeIconButton(`bt-icon-btn ${cls}`, title, icon, { type: "button" });
+        if (!when) button.disabled = true;
+        else button.addEventListener("click", () => action.call(deps, row.id));
+        cell.appendChild(button);
+      };
+      add(deps.start, row.state === StrategyStates.Stopped, this._host.t("Start"), "bi-play-fill", "strategy-start-btn");
+      add(deps.stop, row.state === StrategyStates.Started, this._host.t("Stop"), "bi-stop-fill", "strategy-stop-btn");
+      add(deps.riskRules, true, this._host.t("RiskManagement"), "bi-shield-exclamation", "strategy-risk-btn");
+      add(deps.openStrategy, true, this._host.t("OpenStrategy"), "bi-box-arrow-up-right", "strategy-open-btn");
+      return cell;
+    }
+    // The position, and next to it the one gesture that acts on it. Flattening is only
+    // meaningful while the strategy runs and only when it holds something.
+    _positionCell(row) {
+      const position = row.position ?? 0;
+      const text = formatQty(position);
+      if (this._deps.closePosition === void 0) return text;
+      const cell = document.createDocumentFragment();
+      const value = makeElement("span", "strategy-position-value", {}, [text]);
+      cell.appendChild(value);
+      const button = makeIconButton("bt-icon-btn strategy-flatten-btn", this._host.t("ClosePosition"), "bi-x-octagon", { type: "button" });
+      if (row.state !== StrategyStates.Started || position === 0) button.disabled = true;
+      else button.addEventListener("click", () => this._deps.closePosition?.(row.id));
+      cell.appendChild(button);
+      return cell;
+    }
+    // The one editable cell, and only when the host can carry the change out.
+    _tradingCell(row) {
+      const modes = this._deps.tradingModes ?? [];
+      if (this._deps.setTradingMode === void 0 || modes.length === 0) return row.tradingMode ?? "";
+      const select = document.createElement("select");
+      select.className = "form-control form-control-sm strategy-mode";
+      select.disabled = row.state !== StrategyStates.Stopped;
+      for (const mode of modes) {
+        const option = document.createElement("option");
+        option.value = mode;
+        option.textContent = this._host.t(mode);
+        if (mode === row.tradingMode) option.selected = true;
+        select.appendChild(option);
+      }
+      if (!select.disabled)
+        select.addEventListener("change", () => this._deps.setTradingMode?.(row.id, select.value));
+      return select;
+    }
+    // The run's own curve, at the size a cell has. Coloured by where it ended, which is the
+    // whole reason a glance at the column tells one strategy from another.
+    _sparkline(row) {
+      const box = { width: SPARK_WIDTH, height: SPARK_HEIGHT, padX: 1, padY: 2 };
+      const curve = pnlCurve(row.pnl ?? [], box);
+      if (curve === null) return "";
+      const canvas = document.createElement("canvas");
+      canvas.className = "strategy-spark-canvas";
+      const ratio = typeof window === "undefined" ? 1 : window.devicePixelRatio || 1;
+      canvas.width = Math.round(box.width * ratio);
+      canvas.height = Math.round(box.height * ratio);
+      canvas.style.width = `${box.width}px`;
+      canvas.style.height = `${box.height}px`;
+      const ctx = canvas.getContext("2d");
+      if (ctx !== null) {
+        const palette = this._host.presentation.canvasPalette();
+        const scaled = { width: canvas.width, height: canvas.height, padX: box.padX * ratio, padY: box.padY * ratio };
+        drawPnlCurve(ctx, pnlCurve(row.pnl ?? [], scaled) ?? curve, scaled, {
+          up: palette.up,
+          down: palette.down,
+          baseline: palette.grid,
+          lineWidth: 1.5 * ratio,
+          fillOpacity: 0.35
+        });
+      }
+      return canvas;
+    }
+  };
+  _StrategiesWidget.TYPE = ControlTypes.Strategies;
+  var StrategiesWidget = _StrategiesWidget;
+  function stateText(host, state) {
+    switch (state) {
+      case StrategyStates.Started:
+        return host.t("Started");
+      case StrategyStates.Starting:
+        return host.t("Starting");
+      case StrategyStates.Stopping:
+        return host.t("Stopping");
+      default:
+        return host.t("Stopped");
+    }
+  }
+  function direction(value) {
+    if (value > 0) return "\u25B2";
+    if (value < 0) return "\u25BC";
+    return "";
+  }
+
+  // src/log-tree.ts
+  var LogLevels = {
+    Error: "error",
+    Warning: "warning",
+    Info: "info",
+    Debug: "debug",
+    Verbose: "verbose"
+  };
+  function buildLogTree(sources) {
+    const byId = /* @__PURE__ */ new Map();
+    for (const s of sources)
+      byId.set(s.id, { ...s, name: s.name && s.name.length > 0 ? s.name : "\u2014", depth: 0, children: [] });
+    const roots = [];
+    for (const node of byId.values()) {
+      const parent = node.parentId != null ? byId.get(node.parentId) : void 0;
+      if (parent !== void 0 && parent !== node && !descends(byId, parent, node.id)) parent.children.push(node);
+      else roots.push(node);
+    }
+    const setDepth = (node, depth) => {
+      node.depth = depth;
+      for (const child of node.children) setDepth(child, depth + 1);
+    };
+    for (const root of roots) setDepth(root, 0);
+    return roots;
+  }
+  function descends(byId, node, id) {
+    const seen = /* @__PURE__ */ new Set();
+    let at = node;
+    while (at !== void 0 && !seen.has(at.id)) {
+      if (at.id === id) return true;
+      seen.add(at.id);
+      at = at.parentId != null ? byId.get(at.parentId) : void 0;
+    }
+    return false;
+  }
+  function subtreeOf(sources, selectedId) {
+    if (selectedId === null) return null;
+    const children = /* @__PURE__ */ new Map();
+    for (const s of sources) {
+      if (s.parentId == null) continue;
+      const siblings = children.get(s.parentId);
+      if (siblings === void 0) children.set(s.parentId, [s.id]);
+      else siblings.push(s.id);
+    }
+    const out = /* @__PURE__ */ new Set();
+    const walk = (id) => {
+      if (out.has(id)) return;
+      out.add(id);
+      for (const child of children.get(id) ?? []) walk(child);
+    };
+    walk(selectedId);
+    return out;
+  }
+  function keepLog(message, view) {
+    if (!view.levels.has(message.level)) return false;
+    if (view.sources !== null && !view.sources.has(message.sourceId)) return false;
+    const text = view.text.trim();
+    if (text.length === 0) return true;
+    return (message.message ?? "").toLowerCase().includes(text.toLowerCase());
+  }
+
+  // src/log-monitor-widget.ts
+  var DEFAULT_MAX = 5e3;
+  var LEVEL_LETTER = {
+    [LogLevels.Error]: "E",
+    [LogLevels.Warning]: "W",
+    [LogLevels.Info]: "I",
+    [LogLevels.Debug]: "D",
+    [LogLevels.Verbose]: "V"
+  };
+  var ALL_LEVELS = [LogLevels.Error, LogLevels.Warning, LogLevels.Info, LogLevels.Debug, LogLevels.Verbose];
+  var _LogMonitorWidget = class _LogMonitorWidget {
+    static create(hostEl, state, deps) {
+      const host = assertHost(deps?.host, "LogMonitorWidget");
+      const root = _LogMonitorWidget._buildRoot(host);
+      root.id = makePanelId(_LogMonitorWidget.TYPE);
+      hostEl.appendChild(root);
+      return new _LogMonitorWidget(root, state || {}, deps);
+    }
+    // The panel's markup: a source tree, a toolbar of level toggles and a text box, and the
+    // message table. The level toggles are buttons rather than checkboxes because they are read
+    // as a row of states, and each carries its letter so the toolbar and the column agree.
+    static _buildRoot(host) {
+      const title = host.t("LogMonitor");
+      return makePanelRoot("log-monitor-panel", title, [
+        makeElement("div", "panel-header", {}, [
+          makeElement("span", "", {}, [title]),
+          makeIconButton("bt-icon-btn bt-icon-cancel panel-close-btn", host.t("ClosePanel"), "bi-x", { type: "button" })
+        ]),
+        makeElement("div", "panel-body log-monitor-body", {}, [
+          makeElement("div", "log-sources", { role: "tree", "aria-label": host.t("LogSources") }, []),
+          makeElement("div", "log-messages", {}, [
+            makeElement("div", "log-toolbar", { role: "toolbar", "aria-label": host.t("LogMonitorActions") }, [
+              ...ALL_LEVELS.map((level) => makeElement("button", `log-level-toggle log-level-${level} is-on`, {
+                type: "button",
+                "data-level": level,
+                "aria-pressed": "true",
+                title: levelTitle(host, level)
+              }, [LEVEL_LETTER[level]])),
+              makeElement("input", "form-control form-control-sm log-filter", {
+                type: "search",
+                placeholder: host.t("Filter"),
+                "aria-label": host.t("Filter")
+              }, []),
+              makeIconButton("bt-icon-btn log-clear-btn", host.t("ClearItems"), "bi-eraser", {}),
+              makeIconButton("bt-icon-btn panel-export-btn", host.t("ExportToExcel"), "bi-file-earmark-spreadsheet", {})
+            ]),
+            // The table sits in a box of its own rather than being a flex child: a table
+            // told to fill a column stretches its rows to do it, so a log holding one
+            // line drew that line a panel tall - and with the toolbar and the table as
+            // the only two children there was nowhere for a long log to scroll.
+            makeElement("div", "log-table-scroll", {}, [
+              makeElement("table", "terminal-table log-table", { role: "table", "aria-label": host.t("LogMessages") }, [
+                makeElement("thead", "", {}, []),
+                makeElement("tbody", "log-body", {}, [])
+              ])
+            ])
+          ])
+        ])
+      ]);
+    }
+    constructor(rootEl, _state, deps) {
+      this._host = assertHost(deps?.host, "LogMonitorWidget");
+      this._max = deps?.maxMessages && deps.maxMessages > 0 ? deps.maxMessages : DEFAULT_MAX;
+      this.rootEl = rootEl;
+      this.el = this.rootEl.querySelector(".log-body");
+      this._treeEl = this.rootEl.querySelector(".log-sources");
+      this._filterEl = this.rootEl.querySelector(".log-filter");
+      this._closeBtn = this.rootEl.querySelector(".panel-close-btn");
+      this._clearBtn = this.rootEl.querySelector(".log-clear-btn");
+      this._exportBtn = this.rootEl.querySelector(".panel-export-btn");
+      this._sources = [];
+      this._messages = [];
+      this._levels = new Set(ALL_LEVELS);
+      this._text = "";
+      this._selected = null;
+      this._closeBtn?.addEventListener("click", (e) => {
+        e.preventDefault();
+        this._host.close();
+      });
+      this._clearBtn?.addEventListener("click", (e) => {
+        e.preventDefault();
+        this.clear();
+      });
+      this._exportBtn?.addEventListener("click", (e) => {
+        e.preventDefault();
+        this._export();
+      });
+      for (const toggle of Array.from(this.rootEl.querySelectorAll(".log-level-toggle"))) {
+        toggle.addEventListener("click", (e) => {
+          e.preventDefault();
+          const level = toggle.getAttribute("data-level") ?? "";
+          if (this._levels.has(level)) this._levels.delete(level);
+          else this._levels.add(level);
+          toggle.classList.toggle("is-on", this._levels.has(level));
+          toggle.setAttribute("aria-pressed", this._levels.has(level) ? "true" : "false");
+          this._render();
+        });
+      }
+      this._filterEl?.addEventListener("input", () => {
+        this._text = this._filterEl?.value ?? "";
+        this._render();
+      });
+      const head = this.rootEl.querySelector(".log-table thead");
+      this._grid = head && this.el ? new DataGrid({
+        head,
+        body: this.el,
+        columns: this._columns(),
+        // The order it happened in. A log read out of order is not a log.
+        defaultSort: { col: "time", dir: "asc" },
+        rowKey: (m) => String(m.id),
+        emptyText: this._host.t("NoLogMessages"),
+        rowClass: (m) => `log-row log-row-${m.level}`,
+        contextMenu: makeGridMenu(this._host),
+        selection: "multi"
+      }) : null;
+      this._host.register(this);
+    }
+    dispose() {
+      this._grid?.destroy();
+      this._host.unregister(this);
+      try {
+        this.rootEl.remove();
+      } catch {
+      }
+    }
+    /// The sources that exist. Sent whole: a source that has gone is gone from the tree, and
+    /// the selection falls back to everything rather than to a node nobody can see.
+    setSources(sources) {
+      this._sources = sources || [];
+      if (this._selected !== null && !this._sources.some((s) => s.id === this._selected)) this._selected = null;
+      this._renderTree();
+      this._render();
+    }
+    /// Add what has just been written. The oldest fall off the front once the cap is reached.
+    append(messages) {
+      if (!messages || messages.length === 0) return;
+      this._messages.push(...messages);
+      if (this._messages.length > this._max) this._messages.splice(0, this._messages.length - this._max);
+      this._render();
+    }
+    /// Forget every message. The sources stay: they still exist, they have just gone quiet.
+    clear() {
+      this._messages = [];
+      this._render();
+    }
+    /// Show one source's subtree, or everything when given null.
+    select(sourceId) {
+      this._selected = sourceId;
+      this._renderTree();
+      this._render();
+    }
+    /// What is on screen, after every filter.
+    visible() {
+      const sources = subtreeOf(this._sources, this._selected);
+      return this._messages.filter((m) => keepLog(m, { levels: this._levels, text: this._text, sources }));
+    }
+    _render() {
+      this._grid?.setRows(this.visible());
+    }
+    _renderTree() {
+      const tree = this._treeEl;
+      if (tree === null) return;
+      tree.innerHTML = "";
+      tree.appendChild(this._treeRow({ id: "", name: this._host.t("AllSources"), depth: 0, children: [] }, null));
+      for (const root of buildLogTree(this._sources)) this._appendNode(tree, root);
+    }
+    _appendNode(into, node) {
+      into.appendChild(this._treeRow(node, node.id));
+      for (const child of node.children) this._appendNode(into, child);
+    }
+    // Flat rows with an indent rather than nested lists: the tree is read, not restructured,
+    // and one list is what a keyboard walks through in the order the eye does.
+    _treeRow(node, id) {
+      const selected = this._selected === id;
+      const row = makeElement("button", `log-source${selected ? " is-selected" : ""}`, {
+        type: "button",
+        role: "treeitem",
+        "aria-selected": selected ? "true" : "false",
+        "aria-level": String(node.depth + 1),
+        style: `padding-left: ${0.5 + node.depth * 0.85}rem`
+      }, [node.name]);
+      row.addEventListener("click", (e) => {
+        e.preventDefault();
+        this.select(id);
+      });
+      return row;
+    }
+    _export() {
+      this._grid?.download("log", this._host.t("LogMonitor"));
+    }
+    _columns() {
+      const label = (key) => this._host.t(key);
+      return [
+        {
+          key: "source",
+          header: label("Source"),
+          exportable: true,
+          value: (m) => m.source ?? this._sourceName(m.sourceId)
+        },
+        {
+          key: "time",
+          header: label("Time"),
+          exportable: true,
+          value: (m) => m.time,
+          render: (m) => this._host.presentation.timeText(m.time),
+          exportValue: (m) => this._host.presentation.timeText(m.time)
+        },
+        {
+          key: "level",
+          header: label("Type"),
+          headerClass: "log-level-col",
+          exportable: true,
+          cellClass: (m) => `log-level-cell log-level-${m.level}`,
+          value: (m) => m.level,
+          render: (m) => LEVEL_LETTER[m.level] ?? String(m.level ?? "").slice(0, 1).toUpperCase(),
+          // The sheet carries the level's name, not the letter the column has room for.
+          exportValue: (m) => m.level
+        },
+        {
+          key: "message",
+          header: label("Message"),
+          exportable: true,
+          cellClass: () => "log-message-cell",
+          value: (m) => m.message
+        }
+      ];
+    }
+    _sourceName(id) {
+      return this._sources.find((s) => s.id === id)?.name ?? id;
+    }
+  };
+  _LogMonitorWidget.TYPE = ControlTypes.LogMonitor;
+  var LogMonitorWidget = _LogMonitorWidget;
+  function levelTitle(host, level) {
+    switch (level) {
+      case LogLevels.Error:
+        return host.t("Errors");
+      case LogLevels.Warning:
+        return host.t("Warnings");
+      case LogLevels.Info:
+        return host.t("Messages");
+      case LogLevels.Debug:
+        return host.t("Debug");
+      default:
+        return host.t("Verbose");
+    }
+  }
+
+  // src/statistics-widget.ts
+  function rank(rows) {
+    const first = /* @__PURE__ */ new Map();
+    for (const row of rows) {
+      const seen = first.get(row.category);
+      if (seen === void 0 || row.order < seen) first.set(row.category, row.order);
+    }
+    return rows.map((row) => ({ ...row, categoryRank: first.get(row.category) ?? row.order }));
+  }
+  var _StatisticsWidget = class _StatisticsWidget {
+    static create(hostEl, state, deps) {
+      const host = assertHost(deps?.host, "StatisticsWidget");
+      const root = _StatisticsWidget._buildRoot(host);
+      root.id = makePanelId(_StatisticsWidget.TYPE);
+      hostEl.appendChild(root);
+      return new _StatisticsWidget(root, state || {}, deps);
+    }
+    // The panel's markup. No rail action but the export: a statistic is produced by the
+    // strategy and there is nothing here to cancel, reload or edit.
+    static _buildRoot(host) {
+      const title = host.t("Statistics");
+      return makePanelRoot("statistics-panel", title, [
+        makeElement("div", "panel-header", {}, [
+          makeElement("span", "", {}, [title]),
+          makeIconButton("bt-icon-btn bt-icon-cancel panel-close-btn", host.t("ClosePanel"), "bi-x", { type: "button" })
+        ]),
+        makeElement("div", "panel-body panel-body-with-rail", {}, [
+          makeElement("div", "panel-body-content", {}, [
+            makeElement("table", "terminal-table statistics-table", { role: "table", "aria-label": host.t("StatisticsList") }, [
+              makeElement("thead", "", {}, []),
+              makeElement("tbody", "statistics-body", {}, [])
+            ])
+          ]),
+          makeElement("div", "panel-rail", { role: "toolbar", "aria-label": host.t("StatisticsActions") }, [
+            makeIconButton("bt-icon-btn panel-export-btn", host.t("ExportToExcel"), "bi-file-earmark-spreadsheet", {})
+          ])
+        ])
+      ]);
+    }
+    constructor(rootEl, _state, deps) {
+      this._host = assertHost(deps?.host, "StatisticsWidget");
+      this.rootEl = rootEl;
+      this.el = this.rootEl.querySelector(".statistics-body");
+      this._closeBtn = this.rootEl.querySelector(".panel-close-btn");
+      this._exportBtn = this.rootEl.querySelector(".panel-export-btn");
+      this._rows = [];
+      this._closeBtn?.addEventListener("click", (e) => {
+        e.preventDefault();
+        this._host.close();
+      });
+      this._exportBtn?.addEventListener("click", (e) => {
+        e.preventDefault();
+        this._export();
+      });
+      const head = this.rootEl.querySelector(".statistics-table thead");
+      this._grid = head && this.el ? new DataGrid({
+        head,
+        body: this.el,
+        columns: this._columns(),
+        // Not a sort the reader chose: the registry hands every parameter an order, and
+        // the bands it assigns are what puts profit above drawdown above trade counts.
+        defaultSort: { col: "order", dir: "asc" },
+        rowKey: (r) => String(r.key),
+        emptyText: this._host.t("NoStatistics"),
+        contextMenu: makeGridMenu(this._host),
+        // The groups sit where the registry order puts them, not where the
+        // alphabet would: profit, then trades, then positions, then orders.
+        groupOrder: "rows",
+        selection: "multi"
+      }) : null;
+      this._grid?.setState({ group: "category", hidden: ["category", "order"] });
+      this._host.register(this);
+    }
+    dispose() {
+      this._grid?.destroy();
+      this._host.unregister(this);
+      try {
+        this.rootEl.remove();
+      } catch {
+      }
+    }
+    /// Show these statistics. The whole set at once: a strategy publishes its parameters as one
+    /// table and a row that vanished from it has stopped existing, not stopped changing.
+    update(rows) {
+      this._rows = rank(rows || []);
+      this._grid?.setRows(this._rows);
+    }
+    _export() {
+      this._grid?.download("statistics", this._host.t("Statistics"));
+    }
+    // Two visible columns and one that only groups. The order column is hidden as well: it
+    // decides the sort and means nothing to a reader.
+    _columns() {
+      const label = (key) => this._host.t(key);
+      return [
+        {
+          key: "category",
+          header: label("Category"),
+          exportable: false,
+          // The group's place, not its name: groups are laid out in the order the
+          // registry gives their parameters, so profit comes before trade counts.
+          // Grouping on the name would order them alphabetically, and on the
+          // translated name would reorder them with the reader's language.
+          value: (r) => r.categoryRank,
+          text: (r) => r.categoryText || r.category
+        },
+        {
+          key: "order",
+          header: label("Order"),
+          exportable: false,
+          value: (r) => r.order
+        },
+        {
+          key: "name",
+          header: label("Name"),
+          exportable: true,
+          value: (r) => r.name,
+          bindCell: (td, r) => {
+            if (r.description) td.setAttribute("title", r.description);
+          }
+        },
+        {
+          key: "value",
+          header: label("Value"),
+          exportable: true,
+          cellClass: () => "statistic-value",
+          // Sorts on the raw value so a number sorts as a number, reads as the text below.
+          value: (r) => r.value,
+          render: (r) => formatStatistic(r.value),
+          exportValue: (r) => r.value ?? ""
+        }
+      ];
+    }
+  };
+  _StatisticsWidget.TYPE = ControlTypes.Statistics;
+  var StatisticsWidget = _StatisticsWidget;
+  function formatStatistic(value) {
+    if (value === null || value === void 0 || value === "") return "";
+    if (typeof value === "number") {
+      if (!isFinite(value)) return "";
+      return String(Math.round(value * 100) / 100);
+    }
+    if (value instanceof Date) return isoDate(value);
+    if (typeof value === "string") {
+      const at = /^\d{4}-\d{2}-\d{2}([T ]|$)/.test(value) ? new Date(value) : null;
+      if (at !== null && !isNaN(at.getTime())) return isoDate(at);
+      return value;
+    }
+    return String(value);
+  }
+  function isoDate(at) {
+    return at.toISOString().slice(0, 10);
+  }
+
   // src/tradefeed-aggregator.ts
   function aggregateBubbles(ticks, maxBucketsPerSide) {
     if (!ticks || ticks.length === 0) return [];
@@ -4362,13 +5642,13 @@ var SSTradingControls = (() => {
       quantity += q;
       weighted += q * tick.price;
     }
-    const price = quantity > 0 ? weighted / quantity : slice[0].price;
+    const price2 = quantity > 0 ? weighted / quantity : slice[0].price;
     const middle = slice[Math.floor(slice.length / 2)];
     return {
       symbol: slice[0].symbol,
       side: slice[0].side,
       buy: slice[0].buy,
-      price,
+      price: price2,
       quantity,
       time: middle.time,
       index: middle.index,
@@ -4463,7 +5743,7 @@ var SSTradingControls = (() => {
     if (magnitude >= 1e3) digits = 0;
     else if (magnitude >= 10) digits = 2;
     else if (magnitude >= 0.1) digits = 4;
-    return (price) => price.toLocaleString(void 0, {
+    return (price2) => price2.toLocaleString(void 0, {
       minimumFractionDigits: digits,
       maximumFractionDigits: digits
     });
@@ -4713,7 +5993,7 @@ var SSTradingControls = (() => {
           header: label("Time"),
           exportable: true,
           value: (t) => String(t.time || t.executedAt || ""),
-          render: (t) => formatTime(t.time || t.executedAt)
+          render: (t) => this._host.presentation.timeText(t.time || t.executedAt)
         },
         {
           key: "symbol",
@@ -5018,7 +6298,7 @@ var SSTradingControls = (() => {
       const side = bubble.side;
       const lines = [];
       if (this._extraSymbols.size > 0) lines.push(this._tooltipLine(this._host.t("Symbol"), bubble.symbol, ""));
-      lines.push(this._tooltipLine(this._host.t("Time"), formatTime(bubble.time), ""));
+      lines.push(this._tooltipLine(this._host.t("Time"), this._host.presentation.timeText(bubble.time), ""));
       lines.push(this._tooltipLine(aggregated ? this._host.t("VWAP") : this._host.t("Price"), formatPrice(bubble.price), ""));
       lines.push(this._tooltipLine(aggregated ? this._host.t("Total qty") : this._host.t("Qty"), formatQty(bubble.quantity), ""));
       lines.push(this._tooltipLine(this._host.t("Side"), presentation.sideText(side), presentation.sideClass(side)));