gloomberb 0.18.1 → 0.18.2

package/src/renderers/dom/desktop/controls.tsx

@@ -37,6 +37,7 @@ export function WebButton({
   expanded,
   onPress,
   variant = "secondary",
+  tone,
   disabled = false,
   pending = false,
   active = false,
@@ -49,7 +50,7 @@ export function WebButton({
   title,
 }: ButtonProps) {
   const colors = useThemeColors();
-  const palette = buttonPalette({ variant, active, disabled }, colors);
+  const palette = buttonPalette({ variant, active, disabled, tone }, colors);
   const filled = active || variant === "primary" || variant === "danger";
 
   return (
@@ -261,10 +262,12 @@ const COMFORTABLE_FIELD_HEIGHT = 26;
 
 export function WebTextField({
   label,
+  accessibleLabel,
   value,
   placeholder,
   maxLength,
   focused,
+  disabled = false,
   width,
   inputRef,
   onChange,
@@ -290,6 +293,7 @@ export function WebTextField({
   const renderer = useRendererHost();
   const { nativeContextMenu } = useUiCapabilities();
   const plain = variant === "plain";
+  const well = variant === "well";
   const comfortable = size === "comfortable";
 
   return (
@@ -311,6 +315,7 @@ export function WebTextField({
         alignItems="center"
         backgroundColor={plain ? "transparent" : resolvedBackgroundColor}
         onMouseDown={() => {
+          if (disabled) return;
           onMouseDown?.();
           resolvedInputRef.current?.focus?.();
         }}
@@ -324,12 +329,16 @@ export function WebTextField({
         data-gloom-role="desktop-text-field"
         style={{
           height: comfortable ? COMFORTABLE_FIELD_HEIGHT : undefined,
-          border: plain ? "none" : `1px solid ${controlBorderColor(focused, false, colors)}`,
-          borderRadius: plain ? 0 : CONTROL_RADIUS,
+          border: plain || well ? "none" : `1px solid ${controlBorderColor(focused, false, colors)}`,
+          borderRadius: plain ? 0 : well ? "var(--gloom-radius-sm)" : CONTROL_RADIUS,
+          // A well has no border: focus is the accent along its foot.
+          boxShadow: well && focused ? "inset 0 -2px var(--gloom-accent)" : undefined,
           overflow: "hidden",
         }}
       >
         <Input
+          aria-label={accessibleLabel ?? label}
+          disabled={disabled}
           ref={resolvedInputRef as RefObject<InputRenderable | null>}
           width="100%"
           value={value}
@@ -459,15 +468,18 @@ export function WebMessageComposer({
 }
 
 export function WebSegmentedControl({
+  accessibleLabel,
   options,
   value,
   onChange,
   focused,
   width,
   wrap = false,
+  size = "default",
 }: SegmentedControlProps) {
   const colors = useThemeColors();
   const enabled = options.filter((option) => !option.disabled);
+  const large = size === "large";
   const selectAdjacent = (direction: -1 | 1) => {
     const index = enabled.findIndex((option) => option.value === value);
     const next = enabled[index < 0 ? 0 : (index + direction + enabled.length) % enabled.length];
@@ -476,26 +488,37 @@ export function WebSegmentedControl({
 
   // A segmented choice is a tab strip (the tab rule in styles.css): text, the
   // chosen one bright and bold on the accent underline. One row tall, so it
-  // never bleeds over the pane title or the table header around it.
+  // never bleeds over the pane title or the table header around it. A large
+  // one, such as an order's side, is two rows of blocks that share the width,
+  // the chosen one filled in its tone.
   return (
     <Box
       flexDirection="row"
       flexWrap={wrap ? "wrap" : "nowrap"}
       width={width}
-      height={wrap ? undefined : 1}
+      height={wrap ? undefined : large ? 2 : 1}
       alignItems="stretch"
       role="radiogroup"
+      aria-label={accessibleLabel}
       data-gloom-role="segmented-control"
+      data-size={large ? "large" : undefined}
       data-focused={focused ? "true" : undefined}
+      style={large ? {
+        borderRadius: "var(--gloom-radius-md)",
+        overflow: "hidden",
+        boxShadow: focused ? "0 0 0 2px var(--gloom-accent)" : undefined,
+      } : undefined}
     >
       {options.map((option) => {
         const active = option.value === value;
+        const tone = option.tone ? colors[option.tone] : undefined;
         return (
           <Box
             key={option.value}
             flexDirection="row"
             alignItems="center"
             justifyContent="center"
+            flexGrow={large ? 1 : undefined}
             onMouseDown={() => {
               if (!option.disabled) onChange?.(option.value);
             }}
@@ -503,7 +526,7 @@ export function WebSegmentedControl({
             // after the keyboard has moved on to another pane.
             onClick={(event: { currentTarget: unknown; detail: number }) => releasePointerFocus(event.currentTarget, event.detail)}
             data-gloom-interactive={option.disabled ? undefined : "true"}
-            data-gloom-role="tab-button"
+            data-gloom-role={large ? "segment-block" : "tab-button"}
             data-active={active ? "true" : undefined}
             role="radio"
             aria-checked={active}
@@ -521,9 +544,18 @@ export function WebSegmentedControl({
                 onChange?.(option.value);
               }
             }}
-            style={{
+            style={large ? {
+              height: "100%",
+              cursor: option.disabled ? "default" : "pointer",
+              outline: "none",
+              fontSize: "var(--gloom-type-heading)",
+              fontWeight: "var(--gloom-weight-bold)",
+              background: option.disabled ? "var(--gloom-panel)" : active ? tone ?? colors.selected : "var(--gloom-panel)",
+              color: option.disabled ? colors.textMuted : active ? tone ? colors.bg : colors.selectedText : tone ?? colors.textDim,
+            } : {
               height: wrap ? undefined : "100%",
               cursor: option.disabled ? "default" : "pointer",
+              ...(tone ? { "--tab-fg": tone, "--tab-active-fg": tone } as CSSProperties : {}),
               ...(option.disabled ? { color: colors.textMuted } : {}),
             }}
           >

package/src/renderers/dom/desktop/icons.tsx

@@ -151,6 +151,20 @@ const ICONS: Record<IconName, ReactNode> = {
       <path d="M1.5 5.3h9M4.8 2.5 4.3 5.3 6 10.1l1.7-4.8-.5-2.8" stroke="currentColor" strokeWidth=".9" strokeLinejoin="round" />
     </>
   ),
+  // A clock face at ten past: data that arrives late.
+  clock: (
+    <>
+      <circle cx="6" cy="6" r="4.4" stroke="currentColor" strokeWidth="1.2" />
+      <path d="M6 3.4V6l1.9 1.2" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
+    </>
+  ),
+  // A pencil, for changing something in place.
+  edit: (
+    <>
+      <path d="M2.2 9.8l.5-2.3 5.4-5.4a1.1 1.1 0 0 1 1.6 0l.2.2a1.1 1.1 0 0 1 0 1.6L4.5 9.3l-2.3.5Z" stroke="currentColor" strokeWidth="1.1" strokeLinejoin="round" />
+      <path d="M7.3 2.9l1.8 1.8" stroke="currentColor" strokeWidth="1.1" />
+    </>
+  ),
   restore: (
     <>
       <rect x="2" y="4" width="6" height="6" rx="0.8" stroke="currentColor" strokeWidth="1.1" />

package/src/renderers/dom/desktop/list-view.tsx

@@ -3,6 +3,7 @@ import { useEffect, useId, useRef, useState, type CSSProperties } from "react";
 import { Box, ScrollBox, Text, type ScrollBoxRenderable } from "../../../ui";
 import { TextAttributes } from "../../../ui";
 import type { ListRowState, ListViewItem, ListViewProps } from "../../../components/ui/list-view";
+import { ListRowLines } from "../../../components/ui/list-row-lines";
 import { hoverBg, type ThemeColors } from "../../../theme/colors";
 import { useThemeColors } from "../../../theme/theme-context";
 import { WEB_CELL_HEIGHT } from "../../../theme/font-scale";
@@ -18,9 +19,12 @@ import {
 function DefaultDesktopRow({
   item,
   selected,
+  stacked,
 }: {
   item: ListViewItem;
   selected: boolean;
+  /** The description on a second line under the label (`rowDescriptions`). */
+  stacked: boolean;
 }) {
   const colors = useThemeColors();
   return (
@@ -28,28 +32,52 @@ function DefaultDesktopRow({
       flexDirection="row"
       justifyContent="space-between"
       width="100%"
+      // A two-line row is taller than its lines: they sit in its middle.
+      height={stacked ? "100%" : undefined}
       minWidth={0}
       alignItems="center"
       style={{ boxSizing: "border-box" }}
     >
-      <Box flexDirection="row" alignItems="center" minWidth={0} flexShrink={1} overflow="hidden">
-        <Text
-          fg={item.color ?? (selected ? colors.text : colors.textDim)}
-          attributes={selected ? TextAttributes.BOLD : 0}
-          style={{
-            // The base text style pins flexShrink to 0, which lets a long
-            // label run under the detail instead of shrinking to an ellipsis.
-            flexShrink: 1,
-            minWidth: 0,
-            maxWidth: "100%",
-            overflow: "hidden",
-            textOverflow: "ellipsis",
-            whiteSpace: "nowrap",
-          }}
+      {stacked ? (
+        <ListRowLines
+          label={item.label}
+          description={item.description}
+          leading={item.leading}
+          labelColor={item.color}
+          labelBold={selected}
+        />
+      ) : (
+        <Box
+          flexDirection="row"
+          alignItems="center"
+          minWidth={0}
+          flexShrink={1}
+          overflow="hidden"
+          style={item.leading !== undefined ? { gap: "var(--gloom-space-sm)" } : undefined}
         >
-          {item.label}
-        </Text>
-      </Box>
+          {item.leading !== undefined && (
+            <Box flexShrink={0} alignItems="center" aria-hidden="true" data-gloom-role="list-row-leading">
+              {item.leading}
+            </Box>
+          )}
+          <Text
+            fg={item.color ?? (selected ? colors.text : colors.textDim)}
+            attributes={selected ? TextAttributes.BOLD : 0}
+            style={{
+              // The base text style pins flexShrink to 0, which lets a long
+              // label run under the detail instead of shrinking to an ellipsis.
+              flexShrink: 1,
+              minWidth: 0,
+              maxWidth: "100%",
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap",
+            }}
+          >
+            {item.label}
+          </Text>
+        </Box>
+      )}
       {item.detail && (
         <Text fg={colors.textMuted} style={{ flexShrink: 0, marginLeft: 12 }}>
           {item.detail}
@@ -59,6 +87,9 @@ function DefaultDesktopRow({
   );
 }
 
+/** A row with its description under its label: the two lines and a quarter row above and below them. */
+const STACKED_ROW_HEIGHT = 2.5;
+
 const FRAMED_LIST_PADDING_PX = 4;
 /** What a framed list adds above and below its rows: padding and a 1px border on each side. */
 const FRAMED_LIST_CHROME_PX = 2 * (FRAMED_LIST_PADDING_PX + 1);
@@ -84,12 +115,13 @@ export function WebListView({
   renderRow,
   getRowBackgroundColor,
   showSelectedDescription = false,
+  rowDescriptions = false,
   emptyMessage = "Nothing to show.",
   bgColor,
   selectedBgColor,
   hoverBgColor,
   rowGap = 1,
-  rowHeight = 1,
+  rowHeight = rowDescriptions ? STACKED_ROW_HEIGHT : 1,
   surface,
   selection = "frame",
   height,
@@ -242,7 +274,7 @@ export function WebListView({
         >
           {renderRow
             ? renderRow(item, state, index)
-            : <DefaultDesktopRow item={item} selected={selected} />}
+            : <DefaultDesktopRow item={item} selected={selected} stacked={rowDescriptions} />}
         </Box>
       );
     });

package/src/renderers/dom/desktop/menu.tsx

@@ -1,5 +1,5 @@
 /** @jsxImportSource react */
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState, type CSSProperties } from "react";
 import type { HostMenuItem, HostMenuProps } from "../../../ui/host";
 import { CheckboxBox } from "./controls";
 import { WebIcon } from "./icons";
@@ -10,9 +10,12 @@ function selectable(item: HostMenuItem): boolean {
   return item.kind !== "divider" && item.kind !== "heading" && !item.disabled;
 }
 
+const LEADING_STYLE: CSSProperties = { display: "inline-flex", flex: "none", alignItems: "center" };
+
 /** Desktop Menu: the one list every popover menu in the app renders. */
 export function WebMenu({ items, onSelect, selection = "none", title, label, onClose, highlightedId, onHighlight }: HostMenuProps) {
   const enabled = useMemo(() => items.filter(selectable), [items]);
+  const alignLeading = items.find((item) => item.leading !== undefined)?.leading;
   const controlled = highlightedId !== undefined;
   const [ownHighlighted, setOwnHighlighted] = useState<string | null>(
     () => items.find((item) => item.selected && selectable(item))?.id ?? enabled[0]?.id ?? null,
@@ -92,6 +95,12 @@ export function WebMenu({ items, onSelect, selection = "none", title, label, onC
             {(selection === "multi" || toggle) && (
               <CheckboxBox checked={!!item.checked} />
             )}
+            {item.leading !== undefined ? (
+              <span aria-hidden="true" style={LEADING_STYLE}>{item.leading}</span>
+            ) : alignLeading !== undefined ? (
+              // The room another item's artwork takes, so every label starts in one column.
+              <span aria-hidden="true" style={{ ...LEADING_STYLE, visibility: "hidden" }}>{alignLeading}</span>
+            ) : null}
             <span className="gloom-menu-label">
               <span className="gloom-menu-text" style={item.color ? { color: item.color } : undefined}>{item.label}</span>
               {item.description ? <span className="gloom-menu-description">{item.description}</span> : null}

package/src/renderers/dom/desktop/select-field.tsx

@@ -38,6 +38,7 @@ export function WebSelectField({
   const [open, setOpen] = useState(false);
   const buttonRef = useRef<HTMLButtonElement | null>(null);
   const inline = variant === "inline";
+  const well = variant === "well";
   const current = options.find((option) => option.value === value);
   const showUnset = includeUnsetOption && !current;
 
@@ -54,9 +55,9 @@ export function WebSelectField({
   setSelectRef.current = selectRef;
 
   const resolvedWidth = width ?? (inline ? "auto" : 184);
-  // A field is one row inside its border, as a text field is; inline it is the row.
+  // A field is one row inside its border, as a text field is; inline it is the row, and a well has no border.
   const row = WEB_CELL_HEIGHT;
-  const resolvedHeight = height ?? (inline ? row : row + 2);
+  const resolvedHeight = height ?? (inline || well ? row : row + 2);
   const style: CSSProperties = {
     width: resolvedWidth,
     height: resolvedHeight,
@@ -65,10 +66,11 @@ export function WebSelectField({
     justifyContent: "space-between",
     gap: "var(--gloom-space-xs)",
     color: disabled ? colors.textMuted : colors.text,
-    // The field look: sunk into the surface, the control border, the accent while open.
-    backgroundColor: inline ? "transparent" : "var(--gloom-surface-sunken)",
-    border: inline ? "none" : `1px solid ${open ? "var(--gloom-accent)" : "var(--gloom-control-border)"}`,
-    borderRadius: inline ? 0 : "var(--gloom-radius-md)",
+    // The field look: sunk into the surface, the control border, the accent while open. A well is the panel's
+    // fill with no border, for a dense form such as the order ticket.
+    backgroundColor: inline ? "transparent" : well ? "var(--gloom-panel)" : "var(--gloom-surface-sunken)",
+    border: inline || well ? "none" : `1px solid ${open ? "var(--gloom-accent)" : "var(--gloom-control-border)"}`,
+    borderRadius: inline ? 0 : well ? "var(--gloom-radius-sm)" : "var(--gloom-radius-md)",
     padding: inline ? 0 : "0 var(--gloom-space-sm)",
     cursor: disabled ? "default" : "pointer",
     font: "inherit",

package/src/renderers/dom/host/style.ts

@@ -18,6 +18,7 @@ function cellInset(value: unknown, axis: "x" | "y"): CSSProperties["paddingLeft"
 }
 
 export function commonStyle(props: Record<string, unknown>): CSSProperties {
+  const border = props.border;
   const hasFixedInlineSize = props.width != null || props.flexBasis != null;
   const hasFixedBlockSize = props.height != null;
   const gapUnit = props.flexDirection === "row" ? WEB_CELL_WIDTH : WEB_CELL_HEIGHT;
@@ -60,7 +61,11 @@ export function commonStyle(props: Record<string, unknown>): CSSProperties {
     ...(props.columnGap != null ? { columnGap: cellWidth(props.columnGap) as CSSProperties["columnGap"] } : {}),
     ...(props.rowGap != null ? { rowGap: cellHeight(props.rowGap) as CSSProperties["rowGap"] } : {}),
     overflow: props.overflow as CSSProperties["overflow"],
-    border: props.border ? `1px solid ${typeof props.borderColor === "string" ? props.borderColor : "var(--gloom-border)"}` : undefined,
+    // A requested divider or accent is not a frame. Use longhands consistently
+    // so switching between one edge, all edges and no border clears stale sides.
+    borderStyle: props.border ? "solid" : undefined,
+    borderColor: props.border ? typeof props.borderColor === "string" ? props.borderColor : "var(--gloom-border)" : undefined,
+    borderWidth: Array.isArray(border) ? ["top", "right", "bottom", "left"].map(side => border.includes(side) ? "1px" : "0px").join(" ") : border ? "1px" : undefined,
     boxSizing: "border-box",
     minInlineSize: zeroMinInlineSize ? 0 : undefined,
     minBlockSize: zeroMinBlockSize ? 0 : undefined,

package/src/renderers/dom/host/tabs.tsx

@@ -258,6 +258,11 @@ export function WebTabs({
               tab.onContextMenu?.(tab.value, event);
             } : undefined}
           >
+            {tab.leading !== undefined && (
+              <span data-gloom-role="tab-leading" aria-hidden="true" style={{ display: "flex", flex: "none", alignItems: "center" }}>
+                {tab.leading}
+              </span>
+            )}
             <span
               data-gloom-role="tab-label"
               style={{
@@ -349,6 +354,7 @@ export function WebTabs({
               items={tabs.map((tab) => ({
                 id: tab.value,
                 label: tab.label,
+                leading: tab.leading,
                 disabled: tab.disabled,
                 selected: tab.value === activeValue,
               }))}

package/src/renderers/dom/styles.css

@@ -70,6 +70,10 @@ button, [data-gloom-interactive="true"] { cursor: pointer; }
 [data-gloom-role="desktop-button"]:is([data-gloom-variant="plain"], [data-gloom-variant="ghost"], [data-gloom-variant="secondary"]):not(:disabled):not([aria-pressed="true"]):hover {
   background-color: var(--gloom-hover-fill);
 }
+/* Quiet quick actions take the same wash, over a chosen one's fill too. */
+[data-gloom-role="desktop-button"][data-gloom-variant="quiet"]:not(:disabled):hover {
+  background-color: var(--gloom-hover-fill) !important;
+}
 [data-gloom-hover-bg="true"]:hover {
   background-color: var(--gloom-box-hover-bg) !important;
 }
@@ -941,12 +945,14 @@ html[data-gloom-screenshot="true"] [data-gloom-role="chart-watermark"] {
 }
 .gloom-qb-inline .gloom-qb-view { margin-left: 0; box-shadow: none; align-self: stretch; }
 /* A long inline choice (an expiry strip) scrolls by itself, as the terminal's
-   does, so its label and the controls beside it stay in view. */
+   does, so its label and the controls beside it stay in view. It narrows with
+   its group and has no floor of its own: a floor wider than the room the bar
+   gives it drew its next choice under the control beside it. */
 .gloom-qb-filters[data-strip="true"],
 .gloom-qb-inline[data-strip="true"] { flex: 0 1 auto; min-width: 0; }
 .gloom-qb-inline[data-strip="true"] .gloom-qb-segments {
   flex: 0 1 auto;
-  min-width: 12ch;
+  min-width: 0;
   overflow-x: auto;
   scrollbar-width: none;
 }
@@ -1354,8 +1360,9 @@ html[data-gloom-screenshot="true"] [data-gloom-role="chart-watermark"] {
   white-space: nowrap;
 }
 
-/* Icon-only button: pane header, footer, dialog close, window controls. */
-.gloom-icon-button {
+/* Icon-only button: pane header, footer, dialog close, window controls. A
+   footer status icon (a delayed source's clock) takes the same box. */
+.gloom-icon-button, [data-gloom-role="pane-footer-icon"] {
   flex: none;
   display: inline-flex;
   align-items: center;
@@ -1372,7 +1379,7 @@ html[data-gloom-screenshot="true"] [data-gloom-role="chart-watermark"] {
   cursor: pointer;
   transition: background-color 120ms ease, color 120ms ease;
 }
-.gloom-icon-button:disabled { cursor: default; }
+.gloom-icon-button:disabled, [data-gloom-role="pane-footer-icon"] { cursor: default; }
 .gloom-icon-button:not(:disabled):hover { background: var(--gloom-hover-fill); color: var(--gloom-text-bright); }
 .gloom-icon-button[aria-pressed="true"] { color: var(--gloom-warning); }
 .gloom-qb-view button:disabled { color: var(--gloom-text-muted); opacity: 0.55; cursor: default; }

package/src/renderers/electrobun/bun/core-capabilities.ts

@@ -30,6 +30,7 @@ const BROKER_INVOKE_OPERATIONS = new Set([
   "getChartResolutionCapabilities",
   "getOptionsChain",
   "listOpenOrders",
+  "getOrderStatus",
   "listExecutions",
   "previewOrder",
   "placeOrder",
@@ -116,6 +117,8 @@ function invokeBrokerOperation(
     case "previewOrder":
     case "placeOrder":
       return (broker[operation] as any)?.call(broker, instance, args[0]);
+    case "getOrderStatus":
+      return broker.getOrderStatus?.(instance, args[0] as number);
     case "modifyOrder":
       return broker.modifyOrder?.(instance, args[0] as number, args[1] as never);
     case "cancelOrder":
@@ -167,6 +170,15 @@ function createBrokerCapability(options: CoreCapabilityOptions): PluginCapabilit
           },
         );
       }),
+      orders: stream((input: any, emit) => {
+        const instanceId = requireString(input.instanceId, "Broker instance");
+        const { instance, broker } = resolveBrokerInstance(options, instanceId);
+        if (!broker.subscribeOrders) throw new Error(`Broker "${broker.name}" does not stream orders.`);
+        return broker.subscribeOrders(instance, {
+          order: (order) => emit({ kind: "order", order }),
+          live: (live) => emit({ kind: "orders-live", live }),
+        });
+      }),
       removeInstance: op(async (input: any) => {
         const { instance, broker } = resolveBrokerInstance(options, input.instanceId);
         await broker.disconnect?.(instance);

package/src/renderers/electrobun/bun/external-plugins.ts

@@ -14,6 +14,7 @@ import {
   loadExternalPlugin,
 } from "../../../plugins/loader";
 import { createNodePluginManager } from "../../../plugins/manager-node";
+import { readPluginIcon } from "../../../plugins/plugin-icon";
 import type { PluginRegistry } from "../../../plugins/registry";
 import { desktopRendererCapabilityManifests } from "./desktop/initialization";
 import { reportCrash } from "../../../telemetry/crash-reports";
@@ -70,6 +71,7 @@ async function bundlePluginDirectory(
 
   const { plugin } = loaded;
   const directory = basename(pluginDir);
+  const icon = readPluginIcon(pluginDir);
   const base = {
     id: plugin.id,
     name: plugin.name,
@@ -80,6 +82,7 @@ async function bundlePluginDirectory(
     ...(loaded.commit ? { commit: loaded.commit } : {}),
     ...(loaded.repo ? { repo: loaded.repo } : {}),
     ...(loaded.linked ? { linked: true } : {}),
+    ...(icon ? { icon } : {}),
     ...(plugin.targets ? { targets: plugin.targets } : {}),
   };
 

package/src/renderers/electrobun/shared/protocol.ts

@@ -130,6 +130,8 @@ export interface DesktopExternalPluginBundle {
   /** `owner/repo` of the checkout's GitHub origin. */
   repo?: string;
   linked?: boolean;
+  /** The plugin's logo as a `data:` URL, read from the checkout by the Bun process. */
+  icon?: string;
   /** ES module source, absent when `error` or `unsupportedTarget` is set. */
   code?: string;
   targets?: readonly ("cli" | "tui" | "desktop" | "web")[];

package/src/renderers/electrobun/view/broker-remote-client.ts

@@ -125,6 +125,22 @@ const client: BrokerRemoteClient = {
     });
   },
 
+  subscribeOrders(instanceId, listener) {
+    return subscribeBackendCapability({
+      subscriptionId: `broker-orders:${instanceId}:${nextSubscriptionId++}`,
+      capabilityId: BROKER_CAPABILITY_ID,
+      operationId: "orders",
+      payload: { instanceId },
+      onEvent: (message) => {
+        const event = message as BrokerRemoteEvent;
+        if (event.kind === "order") listener.order(event.order);
+        else if (event.kind === "orders-live") listener.live?.(event.live);
+      },
+      // A stream that cannot open leaves the host polling open orders.
+      onError: (error) => { listener.live?.(false); console.error("Failed to subscribe to broker orders", error); },
+    });
+  },
+
   async removeInstance(instanceId) {
     await invokeBrokerCapability("removeInstance", { instanceId });
     statuses.delete(instanceId);

package/src/renderers/electrobun/view/external-plugins.ts

@@ -28,6 +28,7 @@ export async function loadDesktopExternalPlugin(bundle: DesktopExternalPluginBun
     ...(bundle.commit ? { commit: bundle.commit } : {}),
     ...(bundle.repo ? { repo: bundle.repo } : {}),
     ...(bundle.linked ? { linked: true } : {}),
+    ...(bundle.icon ? { icon: bundle.icon } : {}),
   };
   const fallback = {
     ...base,

package/src/series/validate.ts

@@ -14,8 +14,8 @@ const DRAW_STYLES: readonly SeriesDrawStyle[] = ["line", "area", "step", "column
 const PLACEMENTS: readonly SeriesPlacement[] = ["price", "panel"];
 const LINE_ID_PATTERN = /^[A-Za-z0-9][A-Za-z0-9._-]{0,63}$/;
 const COLOR_PATTERN = /^#[0-9A-Fa-f]{6}$/;
-/** A chart holds ten series: the ticker's price and the lines, with one to spare. */
-const MAX_SERIES_LINES = 8;
+/** A chart holds twenty series: the ticker's price and up to sixteen lines, with room for a few more. */
+const MAX_SERIES_LINES = 16;
 
 /** Units with no scale: a percentage of something, not a quantity of it. */
 const RATE_UNITS = ["%", "bp", "x", "ratio", "index", "score", "points"] as const;