gloomberb 0.18.0 → 0.18.2

package/src/plugins/builtin/broker-manager/add-flow.tsx

@@ -14,24 +14,26 @@ import {
   validateBrokerProfileValues,
   type BrokerProfileDraft,
 } from "../../../brokers/profile-form";
+import { brokerDirectoryLogo } from "../../../brokers/logos";
 import { getSignedInBrokers, refreshSignedInBrokers, subscribeSignedInBrokers } from "../../../brokers/signed-in/catalog";
 import type { SignedInBroker } from "../../../brokers/signed-in/client";
 import { connectSignedInBrokerProfile } from "../../../brokers/signed-in/connect";
 import { SIGNED_IN_BROKER_TYPE } from "../../../brokers/signed-in/profile";
 import { runBrokerSignIn, type BrokerSignInOutcome } from "../../../brokers/signed-in/sign-in";
 import { BrokerConnectView, promptGloomSignIn, useBrokerSignInAttempt } from "../../../brokers/signed-in/sign-in-dialog";
-import { Button, ListView, useFieldRing } from "../../../components";
+import { Button, confirmDialog, ListView, useFieldRing } from "../../../components";
 import { showCollectionInPortfolioPane } from "../../../components/command-bar/pane-actions";
 import { usePaneRefreshKey } from "../../../components/data-table/table-pane";
 
 import { listCursorMove, type ListViewItem } from "../../../components/ui/list-view";
+import { LogoMark } from "../../../components/ui/logo-mark";
 import { t, tf } from "../../../i18n";
 import { useShortcut, type KeyEventLike } from "../../../react/input";
 import { useAppDispatch, useAppGetState } from "../../../state/app/context";
 import { colors } from "../../../theme/colors";
 import type { BrokerAdapter } from "../../../types/broker";
 import type { BrokerInstanceConfig } from "../../../types/config";
-import { Box, ScrollBox, Text, type ScrollBoxRenderable } from "../../../ui";
+import { Box, ScrollBox, Text, useUiCapabilities, type ScrollBoxRenderable } from "../../../ui";
 import { useDialog } from "../../../ui/dialog";
 import { isPlainKey } from "../../../utils/keyboard";
 import { usePluginAppActions, usePluginBrokerActions } from "../../runtime";
@@ -191,7 +193,13 @@ export function useBrokerAddFlow({
       setBusy(t("Connecting broker…"));
       let instanceId: string;
       try {
-        const instance = await createBrokerInstance(adapter.id, label, buildBrokerProfileConfig(adapter, draft.values));
+        const config = buildBrokerProfileConfig(adapter, draft.values);
+        const proposed = { id: "new-profile", brokerType: adapter.id, label, enabled: true, config };
+        if (adapter.getTradingCapabilities?.(proposed).enabled && !await confirmDialog(dialog, {
+          title: "Enable trading?", body: "Orders can commit real money. Start with a simulation account. Every order needs review and confirmation; LIVE orders also need a typed confirmation. You can turn trading off in Brokers at any time.",
+          confirmLabel: "Enable trading", confirmVariant: "danger",
+        })) { setBusy(null); return; }
+        const instance = await createBrokerInstance(adapter.id, label, config, { localOnly: draft.localOnly });
         instanceId = instance.id;
       } catch (error) {
         setBusy(null);
@@ -202,7 +210,7 @@ export function useBrokerAddFlow({
     } finally {
       committingRef.current = false;
     }
-  }, [createBrokerInstance, setBusy, setMessage, syncNewProfile]);
+  }, [createBrokerInstance, dialog, setBusy, setMessage, syncNewProfile]);
 
   /** Shows one connect attempt in the pane until it ends, then says how. */
   const showAttempt = useCallback((flowId: number, write: boolean) => new Promise<BrokerSignInOutcome>((resolve) => {
@@ -360,6 +368,8 @@ export function BrokerAddFlowContent({
   scope: string;
 }) {
   const { flow } = addFlow;
+  const desktop = useUiCapabilities().nativePaneChrome === true;
+  const { getBrokerLogo } = usePluginBrokerActions();
   if (!flow) return <Box flexGrow={1} />;
   const { step } = flow;
 
@@ -369,7 +379,15 @@ export function BrokerAddFlowContent({
         focused={focused}
         label={addFlow.title}
         cursor={flow.cursor}
-        items={flow.directory.map((entry) => ({ id: entry.key, label: entry.name, detail: brokerMethodSummary(entry) }))}
+        items={flow.directory.map((entry) => ({
+          id: entry.key,
+          label: entry.name,
+          // The desktop says how it connects under the name, beside its logo.
+          ...(desktop
+            ? { description: brokerMethodSummary(entry), leading: <LogoMark src={brokerDirectoryLogo(entry, getBrokerLogo)} name={entry.name} size="lead" /> }
+            : { detail: brokerMethodSummary(entry) }),
+        }))}
+        rowDescriptions={desktop}
         emptyMessage="No connectable brokers are installed."
         onCursorChange={addFlow.setCursor}
         onChoose={(index) => {
@@ -446,6 +464,7 @@ function ChoiceList({
   label,
   cursor,
   items,
+  rowDescriptions,
   emptyMessage,
   onCursorChange,
   onChoose,
@@ -454,10 +473,12 @@ function ChoiceList({
   label: string;
   cursor: number;
   items: ListViewItem[];
+  rowDescriptions?: boolean;
   emptyMessage?: string;
   onCursorChange: (index: number) => void;
   onChoose: (index: number) => void;
 }) {
+  const desktop = useUiCapabilities().nativePaneChrome === true;
   const selectedIndex = Math.min(Math.max(0, cursor), Math.max(0, items.length - 1));
   useShortcut((event: KeyEventLike) => {
     const move = listCursorMove(event, 10);
@@ -475,7 +496,8 @@ function ChoiceList({
   }, { enabled: focused });
 
   return (
-    <Box flexDirection="column" flexGrow={1} paddingX={1}>
+    // The desktop keeps the pane's inset above the first row, as on its sides.
+    <Box flexDirection="column" flexGrow={1} paddingX={1} style={desktop ? { paddingTop: "var(--gloom-inset)" } : undefined}>
       <ListView
         items={items}
         selectedIndex={selectedIndex}
@@ -485,6 +507,11 @@ function ChoiceList({
         scrollable
         flexGrow={1}
         remoteLabel={label}
+        rowDescriptions={rowDescriptions}
+        // The desktop sets the rows on the pane at its inset, and the pointer
+        // moves the one highlight the keys move. A two-line row has its own
+        // room above and below, so those rows sit one under the next.
+        {...(desktop ? { surface: "plain" as const, bgColor: "transparent", selectOnHover: true, ...(rowDescriptions ? { rowGap: 0 } : {}) } : {})}
       />
     </Box>
   );
@@ -508,9 +535,9 @@ function DeviceProfileForm({
 }) {
   const { adapter, draft, activeKey } = step;
   const fields = getVisibleBrokerConfigFields(adapter, draft.values);
-  const keys = useMemo<BrokerEditKey[]>(() => ["label", ...fields.map((field) => field.key)], [fields]);
+  const keys = useMemo<BrokerEditKey[]>(() => ["label", ...fields.map((field) => field.key), "localOnly"], [fields]);
   const selectKeys = useMemo<ReadonlySet<BrokerEditKey>>(
-    () => new Set(fields.filter((field) => field.type === "select").map((field) => field.key)),
+    () => new Set(["localOnly", ...fields.filter((field) => field.type === "select").map((field) => field.key)]),
     [fields],
   );
   const { updateDraft, connectDevice, leave } = addFlow;
@@ -533,6 +560,10 @@ function DeviceProfileForm({
   }, [activeKey, keys, updateDraft]);
 
   const cycleSelect = useCallback((key: BrokerEditKey, direction: -1 | 1) => {
+    if (key === "localOnly") {
+      updateDraft((current) => ({ draft: { ...current.draft, localOnly: !current.draft.localOnly } }));
+      return;
+    }
     const options = fields.find((field) => field.key === key)?.options ?? [];
     if (options.length === 0) return;
     updateDraft((current) => {
@@ -570,6 +601,7 @@ function DeviceProfileForm({
           rowRef={rowRef}
           onActiveKeyChange={setActiveKey}
           onLabelChange={(label) => updateDraft((current) => ({ draft: { ...current.draft, label } }))}
+          onLocalOnlyChange={(localOnly) => updateDraft((current) => ({ draft: { ...current.draft, localOnly } }))}
           onValueChange={(key, value) => updateDraft((current) => ({
             draft: { ...current.draft, values: { ...current.draft.values, [key]: value } },
           }))}

package/src/plugins/builtin/broker-manager/detail.tsx

@@ -17,7 +17,7 @@ import type { BrokerManagerMessage } from "./pane-actions";
 import { signInEndNote } from "./sign-in-end";
 import { stateColor } from "./table";
 
-export type BrokerEditKey = "label" | "enabled" | string;
+export type BrokerEditKey = "label" | "enabled" | "localOnly" | string;
 
 type RowRef = (node: BoxRenderable | null) => void;
 
@@ -116,6 +116,7 @@ export function BrokerProfileForm({
   onActiveKeyChange,
   onLabelChange,
   onEnabledChange,
+  onLocalOnlyChange,
   onValueChange,
   onSubmit,
   onCancel,
@@ -139,6 +140,7 @@ export function BrokerProfileForm({
   onLabelChange: (label: string) => void;
   /** Editing only: a new profile starts enabled. */
   onEnabledChange?: (enabled: boolean) => void;
+  onLocalOnlyChange: (localOnly: boolean) => void;
   onValueChange: (key: string, value: string) => void;
   onSubmit: () => void;
   onCancel: () => void;
@@ -188,6 +190,25 @@ export function BrokerProfileForm({
           onSubmit={onSubmit}
         />
       ))}
+      <Box ref={rowRef("localOnly")} flexDirection="column" onMouseDown={() => onActiveKeyChange("localOnly")}>
+        <FieldLabel label={t("Account data")} active={activeKey === "localOnly"} />
+        <SegmentedControl
+          value={draft.localOnly ? "local" : "sync"}
+          focused={paneFocused && activeKey === "localOnly"}
+          options={[
+            { label: t("Sync with Gloom Cloud"), value: "sync" },
+            { label: t("Keep on this device"), value: "local" },
+          ]}
+          onChange={(value) => onLocalOnlyChange(value === "local")}
+          allowEditable
+          shortcutScope={scope}
+        />
+        {draft.localOnly ? (
+          <Text fg={colors.textMuted} wrapText>
+            {t("Daily roundups, the weekly brief, position alerts, the mobile app and Ask Gloom will go without this account.")}
+          </Text>
+        ) : null}
+      </Box>
       <Box flexDirection="row" gap={1}>
         <Button label={submitLabel} shortcut="Enter" variant="primary" onPress={onSubmit} disabled={!!busy} />
         <Button label={t("Cancel")} shortcut="Esc" variant="secondary" onPress={onCancel} disabled={!!busy} />
@@ -216,6 +237,7 @@ export function BrokerDetailContent({
   onActiveEditKeyChange,
   onDraftLabelChange,
   onDraftEnabledChange,
+  onDraftLocalOnlyChange,
   onDraftValueChange,
   onSaveEdit,
   onCancelEdit,
@@ -237,6 +259,7 @@ export function BrokerDetailContent({
   onActiveEditKeyChange: (key: BrokerEditKey) => void;
   onDraftLabelChange: (label: string) => void;
   onDraftEnabledChange: (enabled: boolean) => void;
+  onDraftLocalOnlyChange: (localOnly: boolean) => void;
   onDraftValueChange: (key: string, value: string) => void;
   onSaveEdit: () => void;
   onCancelEdit: () => void;
@@ -282,6 +305,7 @@ export function BrokerDetailContent({
           <Text fg={colors.warning} width={width} wrapText>{signInEndNote(row.signInEndsAt)}</Text>
         )}
         <Text fg={colors.textMuted}>{tf("Last sync {time}", { time: formatRelativeAge(row.lastSyncedAt) })}</Text>
+        {row.instance.localOnly ? <Text fg={colors.textMuted}>{t("Account data stays on this device, out of Gloom Cloud")}</Text> : null}
         <Text fg={colors.textMuted}>{tf("Status updated {time}", { time: formatRelativeAge(row.updatedAt) })}</Text>
         <Box height={1} />
 
@@ -303,6 +327,7 @@ export function BrokerDetailContent({
               onActiveKeyChange={onActiveEditKeyChange}
               onLabelChange={onDraftLabelChange}
               onEnabledChange={onDraftEnabledChange}
+              onLocalOnlyChange={onDraftLocalOnlyChange}
               onValueChange={onDraftValueChange}
               onSubmit={onSaveEdit}
               onCancel={onCancelEdit}

package/src/plugins/builtin/broker-manager/index.tsx

@@ -23,7 +23,7 @@ import {
 } from "../../../state/app/context";
 import type { BrokerAdapter } from "../../../types/broker";
 import type { PaneProps } from "../../../types/plugin";
-import { Box } from "../../../ui";
+import { Box, useUiCapabilities } from "../../../ui";
 import { getCurrentPluginTarget } from "../../current-target";
 import { usePluginBrokerActions, usePluginPaneState } from "../../runtime";
 import type { PluginModule } from "../plugin-module";
@@ -50,7 +50,8 @@ export function BrokersPane({ focused, width, height }: PaneProps) {
   const config = usePaneAppConfig();
   const paneId = usePaneInstanceId();
   const brokerAccounts = useAppSelector((state) => state.brokerAccounts);
-  const { getBrokerAdapter } = usePluginBrokerActions();
+  const { getBrokerAdapter, getBrokerLogo } = usePluginBrokerActions();
+  const desktop = useUiCapabilities().nativePaneChrome === true;
   // The profile is remembered by id so a reload lands on the same row.
   const [selectedId, setSelectedId] = usePluginPaneState<string | null>("selectedId", null);
   const [detailOpen, setDetailOpen] = usePluginPaneState<boolean>("detailOpen", false);
@@ -81,8 +82,8 @@ export function BrokersPane({ focused, width, height }: PaneProps) {
   const signedInBrokers = useSyncExternalStore(subscribeSignedInBrokers, getSignedInBrokers, getSignedInBrokers);
   const { ends: signInEnds, reload: reloadSignInEnds } = useSignInEnds(config.brokerInstances);
   const rows = useMemo(
-    () => buildBrokerProfileRows(config, adapters, brokerAccounts, signInEnds),
-    [adapters, brokerAccounts, config, language, signInEnds, signedInBrokers, statusVersion],
+    () => buildBrokerProfileRows(config, adapters, brokerAccounts, signInEnds, getBrokerLogo),
+    [adapters, brokerAccounts, config, getBrokerLogo, language, signInEnds, signedInBrokers, statusVersion],
   );
   const selectedIndex = Math.max(0, rows.findIndex((row) => row.id === selectedId));
   const selectedRow = rows[selectedIndex] ?? null;
@@ -91,11 +92,11 @@ export function BrokersPane({ focused, width, height }: PaneProps) {
     ? getVisibleBrokerConfigFields(selectedRow.adapter, editDraft.values)
     : [];
   const editKeys = useMemo<BrokerEditKey[]>(
-    () => ["label", "enabled", ...editFields.map((field) => field.key)],
+    () => ["label", "enabled", ...editFields.map((field) => field.key), "localOnly"],
     [editFields],
   );
   const editSelectKeys = useMemo<ReadonlySet<BrokerEditKey>>(
-    () => new Set(["enabled", ...editFields.filter((field) => field.type === "select").map((field) => field.key)]),
+    () => new Set(["enabled", "localOnly", ...editFields.filter((field) => field.type === "select").map((field) => field.key)]),
     [editFields],
   );
   const editScope = `broker-edit:${paneId}`;
@@ -200,8 +201,8 @@ export function BrokersPane({ focused, width, height }: PaneProps) {
   });
 
   const cycleEditSelect = useCallback((key: BrokerEditKey, direction: -1 | 1) => {
-    if (key === "enabled") {
-      setEditDraft((current) => current ? { ...current, enabled: !current.enabled } : current);
+    if (key === "enabled" || key === "localOnly") {
+      setEditDraft((current) => current ? { ...current, [key]: !current[key] } : current);
       return;
     }
     const options = editFields.find((field) => field.key === key)?.options ?? [];
@@ -229,6 +230,11 @@ export function BrokersPane({ focused, width, height }: PaneProps) {
   const tableWidth = Math.max(24, width);
   const columns = useMemo(() => buildBrokerColumns(tableWidth), [language, tableWidth]);
 
+  const renderCell = useCallback(
+    (row: BrokerProfileRow, column: BrokerColumn) => renderBrokerCell(row, column, desktop),
+    [desktop],
+  );
+
   const openSelectedDetail = useCallback((_index: number, row: BrokerProfileRow) => {
     setSelectedId(row.id);
     setEditDraft(null);
@@ -256,6 +262,10 @@ export function BrokersPane({ focused, width, height }: PaneProps) {
     setEditDraft((current) => current ? { ...current, enabled } : current);
   }, []);
 
+  const updateDraftLocalOnly = useCallback((localOnly: boolean) => {
+    setEditDraft((current) => current ? { ...current, localOnly } : current);
+  }, []);
+
   const saveCurrentEdit = useCallback(() => {
     saveEdit().catch(() => {});
   }, [saveEdit]);
@@ -288,6 +298,7 @@ export function BrokersPane({ focused, width, height }: PaneProps) {
       onActiveEditKeyChange={setActiveEditKey}
       onDraftLabelChange={updateDraftLabel}
       onDraftEnabledChange={updateDraftEnabled}
+      onDraftLocalOnlyChange={updateDraftLocalOnly}
       onDraftValueChange={updateDraftValue}
       onSaveEdit={saveCurrentEdit}
       onCancelEdit={cancelEdit}
@@ -319,7 +330,7 @@ export function BrokersPane({ focused, width, height }: PaneProps) {
           sortColumnId={null}
           sortDirection="asc"
           getItemKey={(row) => row.id}
-          renderCell={renderBrokerCell}
+          renderCell={renderCell}
           // The footer's a adds one.
           emptyContent={(
             <Box width="100%" paddingX={1} paddingY={1}>

package/src/plugins/builtin/broker-manager/model.ts

@@ -1,3 +1,4 @@
+import { brokerProfileLogo, type BrokerPluginLogo } from "../../../brokers/logos";
 import type { BrokerAdapter, BrokerConnectionStatus } from "../../../types/broker";
 import type { AppConfig, BrokerInstanceConfig } from "../../../types/config";
 import type { BrokerAccount } from "../../../types/trading";
@@ -27,6 +28,8 @@ export interface BrokerProfileRow {
   accountIds: string[];
   /** When the broker ends this profile's sign-in, once Gloom says it is time to connect again. */
   signInEndsAt: number | null;
+  /** The broker's logo for the desktop and the web (brokers/logos.ts); null draws its initial. */
+  logo: string | null;
   instance: BrokerInstanceConfig;
   adapter: BrokerAdapter | null;
 }
@@ -111,6 +114,7 @@ export function buildBrokerProfileRows(
   adapters: ReadonlyMap<string, BrokerAdapter | null>,
   brokerAccounts: Record<string, BrokerAccount[]>,
   signInEnds: SignInEnds = new Map(),
+  pluginLogo: BrokerPluginLogo = () => null,
 ): BrokerProfileRow[] {
   return config.brokerInstances.map((instance) => {
     const adapter = adapters.get(instance.brokerType) ?? null;
@@ -147,6 +151,7 @@ export function buildBrokerProfileRows(
       signInEndsAt: state.state === "error" || state.state === "disabled" || state.state === "unavailable"
         ? null
         : signInEnds.get(instance.id) ?? null,
+      logo: brokerProfileLogo(instance, adapter, pluginLogo),
       instance,
       adapter,
     };

package/src/plugins/builtin/broker-manager/pane-actions.tsx

@@ -93,9 +93,16 @@ export function useBrokerManagerActions({
     try {
       setBusy(t("Saving…"));
       const nextConfig = buildBrokerProfileConfig(selectedRow.adapter, editDraft.values, selectedRow.instance);
+      const wasEnabled = selectedRow.adapter.getTradingCapabilities?.(selectedRow.instance).enabled === true;
+      const willEnable = selectedRow.adapter.getTradingCapabilities?.({ ...selectedRow.instance, config: nextConfig }).enabled === true;
+      if (!wasEnabled && willEnable && !await confirmDialog(dialog, {
+        title: "Enable trading?", body: "Orders can commit real money. Start with a simulation account. Every order needs review and confirmation; LIVE orders also need a typed confirmation. You can turn trading off in this profile at any time.",
+        confirmLabel: "Enable trading", confirmVariant: "danger",
+      })) return;
       await updateBrokerInstance(selectedRow.id, nextConfig, {
         label,
         enabled: editDraft.enabled,
+        localOnly: editDraft.localOnly,
         replaceConfig: true,
       });
       setEditDraft(null);
@@ -105,7 +112,7 @@ export function useBrokerManagerActions({
     } finally {
       setBusy(null);
     }
-  }, [editDraft, selectedRow, setEditDraft, updateBrokerInstance]);
+  }, [dialog, editDraft, selectedRow, setEditDraft, updateBrokerInstance]);
 
   const connectSelected = useCallback(async () => {
     if (!selectedRow) return;

package/src/plugins/builtin/broker-manager/table.ts

@@ -1,4 +1,6 @@
+import { createElement } from "react";
 import { TextAttributes } from "../../../ui";
+import { LogoMark } from "../../../components/ui/logo-mark";
 import type { DataTableCell, DataTableColumn } from "../../../components";
 import { colors } from "../../../theme/colors";
 import { formatRelativeAge } from "../../../utils/datetime-format";
@@ -37,13 +39,15 @@ export function buildBrokerColumns(width: number): BrokerColumn[] {
   ];
 }
 
-export function renderBrokerCell(row: BrokerProfileRow, column: BrokerColumn): DataTableCell {
+/** `desktop`: the profile leads with its broker's logo, which the terminal does not draw. */
+export function renderBrokerCell(row: BrokerProfileRow, column: BrokerColumn, desktop = false): DataTableCell {
   switch (column.id) {
     case "profile":
       return {
         text: row.label,
         color: colors.text,
         attributes: TextAttributes.BOLD,
+        leading: desktop ? createElement(LogoMark, { src: row.logo, name: row.brokerName }) : undefined,
       };
     case "status":
       // A sign-in the broker is about to end replaces "Connected" until it is renewed.

package/src/plugins/builtin/broker-trading/account-picker.tsx

@@ -0,0 +1,91 @@
+import { useCallback, useImperativeHandle, useMemo, useRef, useState, type Ref } from "react";
+import { Badge, Button, DialogFrame, DisclosureMarker, ListView, type SelectControl } from "../../../components";
+import { listCursorMove } from "../../../components/ui/list-view";
+import { useThemeColors } from "../../../theme/theme-context";
+import { blendForContrast, higherContrast } from "../../../theme/color-utils";
+import type { BrokerTradingMode } from "../../../types/trading";
+import { Box, Text, TextAttributes, useUiCapabilities } from "../../../ui";
+import { useDialog, useDialogKeyboard, type PromptContext } from "../../../ui/dialog";
+
+export interface BrokerAccountChoice {
+  value: string;
+  label: string;
+  profileLabel?: string;
+  tradingMode?: BrokerTradingMode;
+}
+
+export interface BrokerAccountPickerProps {
+  accounts: readonly BrokerAccountChoice[];
+  value?: string;
+  onChange(value: string): void;
+  disabled?: boolean;
+  controlRef?: Ref<SelectControl>;
+  active?: boolean;
+  width?: number;
+  showMode?: boolean;
+}
+
+export function accountModeLabel(mode: BrokerTradingMode | undefined): string {
+  return mode === "simulation" ? "SIMULATION" : mode === "live" ? "LIVE" : "MODE UNKNOWN";
+}
+
+function BrokerAccountChoiceDialog({ accounts, value, resolve }: PromptContext<string> & Pick<BrokerAccountPickerProps, "accounts" | "value">) {
+  const colors = useThemeColors();
+  const [index, setIndex] = useState(() => accounts.findIndex((account) => account.value === value));
+  // Read the latest key movement, not the last rendered account, on Enter.
+  const cursor = useRef(index);
+  const selectIndex = (next: number) => { cursor.current = next; setIndex(next); };
+  useDialogKeyboard((event) => {
+    event.stopPropagation();
+    const move = listCursorMove(event, 5);
+    if (move) { event.preventDefault(); selectIndex(move(accounts, cursor.current)); }
+    else if (event.name === "return" || event.name === "enter") { event.preventDefault(); const selected = accounts[cursor.current]; if (selected) resolve(selected.value); }
+    else if (event.name === "escape") { event.preventDefault(); resolve(""); }
+  }, { allowEditable: true });
+  return <DialogFrame title="Choose an account" subtitle="Simulation accounts first. Choose before trading." footer="↑↓ choose · Enter select · Esc back" onClose={() => resolve("")}>
+    <Box width={64} flexDirection="column">
+      <ListView items={accounts.map((account) => ({ id: account.value, label: account.label, detail: accountModeLabel(account.tradingMode) }))}
+        selectedIndex={index} onSelect={selectIndex} onActivate={(item) => resolve(item.id)} selectOnHover
+        height={Math.min(Math.max(accounts.length, 1), 6) * 2} rowHeight={2} rowGap={0} scrollable={accounts.length > 6}
+        surface="framed" emptyMessage="No accounts available." remoteLabel="Broker accounts"
+        renderRow={(_item, state, rowIndex) => {
+          const account = accounts[rowIndex]!;
+          return <Box flexDirection="row" alignItems="flex-start" gap={1} width="100%" minWidth={0}>
+            <Box width={1}>{state.selected ? <DisclosureMarker expanded={false} color={colors.textBright} /> : null}</Box>
+            <Box flexDirection="column" flexGrow={1} minWidth={0}>
+              <Text fg={colors.text} attributes={state.selected ? TextAttributes.BOLD : undefined} truncate wrapMode="none">{account.label}</Text>
+              <Text fg={colors.textDim} truncate wrapMode="none">{account.profileLabel ?? "Broker account"}</Text>
+            </Box>
+            <Box flexShrink={0}><Badge label={accountModeLabel(account.tradingMode)} tone={account.tradingMode === "simulation" ? "accent" : "negative"} /></Box>
+          </Box>;
+        }} />
+    </Box>
+  </DialogFrame>;
+}
+
+/** Keeps native and terminal choices visually identical, including account mode badges. */
+export function BrokerAccountPicker({ accounts, value, onChange, disabled = false, controlRef, active, width, showMode = false }: BrokerAccountPickerProps) {
+  const native = useUiCapabilities().nativePaneChrome;
+  const dialog = useDialog();
+  const colors = useThemeColors();
+  const choices = useMemo(() => [...accounts].sort((a, b) => Number(b.tradingMode === "simulation") - Number(a.tradingMode === "simulation")), [accounts]);
+  const current = accounts.find((account) => account.value === value);
+  const modeColor = blendForContrast(current?.tradingMode === "simulation" ? colors.positive : colors.negative, colors.bg, higherContrast("#000000", "#ffffff", colors.bg), 4.5);
+  const choose = useRef<(next: string | undefined) => void>(() => {});
+  choose.current = (next) => { if (!disabled && next && next !== value && accounts.some((account) => account.value === next)) onChange(next); };
+  const opened = useRef(false);
+  const open = useCallback(() => {
+    if (disabled || opened.current || !choices.length) return;
+    opened.current = true;
+    void dialog.prompt<string>({ closeOnClickOutside: true, style: { width: 72 }, content: (context) => <BrokerAccountChoiceDialog {...context} accounts={choices} value={value} /> })
+      .then((next) => choose.current(next)).catch(() => {}).finally(() => { opened.current = false; });
+  }, [choices, dialog, disabled, value]);
+  useImperativeHandle(controlRef, () => ({ open }), [open]);
+  return <Button label="Choose account" variant="quiet" flush active={active} disabled={disabled || !choices.length} width={width} onPress={open} stopPropagation>
+    <Box flexDirection="row" gap={1} flexGrow={1} minWidth={0} alignItems="center">
+      <Text fg={disabled ? colors.textMuted : colors.text} truncate wrapMode="none" flexShrink={1} minWidth={0}>{`${active && !native ? "> " : ""}${current?.label ?? "Choose an account"}`}</Text>
+      {showMode && current ? <Text fg={modeColor} attributes={TextAttributes.BOLD}>{current.tradingMode === "simulation" ? "SIM" : accountModeLabel(current.tradingMode)}</Text> : null}
+      <DisclosureMarker expanded color={colors.textDim} />
+    </Box>
+  </Button>;
+}

package/src/plugins/builtin/broker-trading/chart-levels.ts

@@ -0,0 +1,54 @@
+import type { CompositeChartLevel } from "../../../components/chart/composite/levels";
+import type { ThemeColors } from "../../../theme/colors";
+import type { BrokerContractRef } from "../../../types/instrument";
+import type { BrokerOrder, BrokerOrderRequest } from "../../../types/trading";
+import { brokerOrderKey, brokerOrderStatus, canChangeBrokerOrder, ticketEditingPriceStep, withLatestOrder } from "./orders-data";
+import { sameBrokerContract } from "../../../utils/instrument-identity";
+import { isStrategyOrder } from "./strategy";
+
+export function ticketOrderMatches(order: Pick<BrokerOrder, "accountId" | "brokerInstanceId" | "contract" | "legs">, contract: BrokerContractRef, profileId: string, accountId?: string): boolean {
+  if (!accountId || order.accountId !== accountId || order.brokerInstanceId && order.brokerInstanceId !== profileId
+    || order.contract.brokerInstanceId && order.contract.brokerInstanceId !== profileId || order.contract.brokerId !== contract.brokerId) return false;
+  const held = order.contract;
+  // A spread is its underlying's order: the stock's ticket and a spread ticket on it both list it.
+  const spreadTicket = contract.secType?.toUpperCase() === "BAG";
+  if (isStrategyOrder(order) || spreadTicket) {
+    return isStrategyOrder(order) && held.symbol.trim().toUpperCase() === contract.symbol.trim().toUpperCase()
+      && (spreadTicket || !contract.secType || ["STK", "ETF"].includes(contract.secType.toUpperCase()));
+  }
+  return sameBrokerContract(held, contract);
+}
+
+/** A read-only projection. No broker operation is attached to a chart level. */
+export function ticketChartLevels({ draft, editing, orders, latestOrder, avgCost, position, colors, priceStep, priceDecimals }: {
+  draft?: BrokerOrderRequest; editing: boolean; orders: readonly BrokerOrder[]; latestOrder?: BrokerOrder;
+  avgCost?: number; position?: number; colors: ThemeColors; priceStep?: number; priceDecimals?: number;
+}): CompositeChartLevel[] {
+  const levels: CompositeChartLevel[] = [];
+  // The broker's tick, or the ticket's editing step: a cent, a hundredth of a cent below a dollar. Accepted
+  // decimals are a limit, not a tick: five of them do not make $719.60745 an average anyone reads.
+  const tick = (value: number) => priceStep !== undefined && Number.isFinite(priceStep) && priceStep > 0 ? priceStep : ticketEditingPriceStep(value, priceDecimals);
+  // An order price shows every digit it was entered with; an average is arithmetic, so it rounds to the tick.
+  const add = (id: string, value: number | undefined, label: string, color: string, dashed = false, averaged = false) => {
+    if (value === undefined || !Number.isFinite(value) || value <= 0) return;
+    const minimumFractionDigits = Math.min(18, tick(value).toLocaleString("en-US", { useGrouping: false, maximumFractionDigits: 18 }).split(".")[1]?.length ?? 0);
+    const maximumFractionDigits = averaged ? minimumFractionDigits : Math.max(8, minimumFractionDigits);
+    const axisLabel = value.toLocaleString("en-US", { minimumFractionDigits, maximumFractionDigits });
+    levels.push({ id, value, axisLabel, label, color, editable: false, actionable: false, dashed });
+  };
+  if (draft && editing) {
+    const color = draft.action === "SELL" ? colors.negative : colors.positive;
+    if (["LMT", "STP LMT"].includes(draft.orderType)) add("ticket:limit", draft.limitPrice, "Draft limit", color, true);
+    if (["STP", "STP LMT"].includes(draft.orderType)) add("ticket:stop", draft.stopPrice, "Draft stop", color, true);
+  }
+  const projected = latestOrder ? withLatestOrder(orders, latestOrder) : orders;
+  for (const order of projected) {
+    if (!canChangeBrokerOrder(order)) continue;
+    const label = `${order.action === "BUY" ? "Buy" : "Sell"} ${order.remaining} ${({ "Partially filled": "partial", Replacing: "replacing" } as Record<string, string>)[brokerOrderStatus(order.status)] ?? "working"}`;
+    const color = order.action === "SELL" ? colors.negative : colors.positive;
+    add(`order:${brokerOrderKey(order)}`, order.limitPrice ?? order.stopPrice, label, color);
+    if (order.orderType === "STP LMT") add(`stop:${brokerOrderKey(order)}`, order.stopPrice, `${label} stop`, color);
+  }
+  if (position && avgCost !== undefined) add("position:average", avgCost, "Average cost", colors.textDim, false, true);
+  return levels;
+}