gloomberb 0.18.3 → 0.18.4

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

@@ -10,30 +10,62 @@ import { signedInBrokerForProfile } from "../../../brokers/signed-in/connect";
 import { isSignedInBrokerProfile } from "../../../brokers/signed-in/profile";
 import { requestBrokerSignIn } from "../../../brokers/signed-in/sign-in-dialog";
 import { confirmDialog } from "../../../components";
+import { useRowNotes } from "../../../components/ui/row-notes";
 import { openConfirmModal } from "../../../components/form-modal";
 import { useAppGetState } from "../../../state/app/context";
 import type { BrokerProfileAction } from "../../../types/broker";
 import { useDialog } from "../../../ui/dialog";
 import { t, tf } from "../../../i18n";
 import { usePluginAppActions, usePluginBrokerActions } from "../../runtime";
+import { enableBrokerProfile } from "../shared/broker-reconnect";
 import type { BrokerEditKey } from "./detail";
 import { neighbourBrokerProfileId, type BrokerProfileRow } from "./model";
 
-/** The last action's result. Errors also replace the profile status in the detail. */
+/**
+ * A result that is the whole pane's, said in its footer: the add flow's, which
+ * has no row yet, or a request the pane turned down.
+ */
 export interface BrokerManagerMessage {
   tone: "info" | "error";
   text: string;
 }
 
-function infoMessage(text: string): BrokerManagerMessage {
-  return { tone: "info", text };
+/**
+ * What the last action on one profile came to, said on its row: `status` in
+ * its STATUS, `text` in its detail, in place of the profile's own status
+ * message. It stands until the next action on the profile, or until the
+ * profile's own status or sync moves on past it.
+ */
+export interface BrokerRowNote {
+  tone: "info" | "error";
+  text: string;
+  /** A failure's short state for STATUS, "Sync failed"; none keeps the row's own state. */
+  status?: string;
+}
+
+/**
+ * The parts of a row a real change moves: its state, its status message and
+ * when it last synced. Not the status's `updatedAt`, which an adapter may
+ * stamp on every read, nor a sign-in's end, which the pane reads on its own.
+ */
+function rowSignature(row: BrokerProfileRow): string {
+  return [row.state, row.stateLabel, row.message, row.lastSyncedAt].join("\0");
 }
+const rowKey = (row: BrokerProfileRow) => row.id;
 
-function errorMessage(error: unknown, fallback: string): BrokerManagerMessage {
-  return { tone: "error", text: error instanceof Error ? error.message : fallback };
+/** What a row shows of the pane's own work on it. */
+export interface BrokerRowActivity {
+  /** The action running on the profile: "Syncing…". */
+  busy?: string | null;
+  note?: BrokerRowNote | null;
+}
+
+function errorText(error: unknown, fallback: string): string {
+  return error instanceof Error && error.message ? error.message : fallback;
 }
 
 export function useBrokerManagerActions({
+  rows,
   selectedRow,
   editDraft,
   setEditDraft,
@@ -42,6 +74,7 @@ export function useBrokerManagerActions({
   setSelectedId,
   refreshStatuses,
 }: {
+  rows: readonly BrokerProfileRow[];
   selectedRow: BrokerProfileRow | null;
   editDraft: BrokerProfileDraft | null;
   setEditDraft: Dispatch<SetStateAction<BrokerProfileDraft | null>>;
@@ -59,39 +92,66 @@ export function useBrokerManagerActions({
     syncBrokerInstance,
     removeBrokerInstance,
   } = usePluginBrokerActions();
-  const [busy, setBusy] = useState<string | null>(null);
+  // The running action and the profile it is on; none for the add flow's.
+  const [busyState, setBusyState] = useState<{ text: string; profileId: string | null } | null>(null);
+  const setBusy = useCallback((text: string | null, profileId: string | null = null) => {
+    setBusyState(text ? { text, profileId } : null);
+  }, []);
+  const busy = busyState?.text ?? null;
   const [message, setMessage] = useState<BrokerManagerMessage | null>(null);
+  // What stops the open edit form from saving, said beside its Save.
+  const [editError, setEditError] = useState<string | null>(null);
+  // A note takes the row as it is when the note first shows, with the status
+  // the failure left, and goes when that row moves on: a new state, message or sync.
+  const { noteFor, setNote: setRowNote } = useRowNotes<BrokerProfileRow, BrokerRowNote>(rows, { key: rowKey, signature: rowSignature });
+  /** Starts an action on a profile: its row says so, in place of the last one's result. */
+  const startRowAction = useCallback((profileId: string, text: string) => {
+    setRowNote(profileId, null);
+    setBusy(text, profileId);
+  }, [setBusy, setRowNote]);
+  const rowActivity = useCallback((row: BrokerProfileRow): BrokerRowActivity => ({
+    busy: busyState?.profileId === row.id ? busyState.text : null,
+    note: noteFor(row),
+  }), [busyState, noteFor]);
 
   const startEdit = useCallback(() => {
-    if (!selectedRow?.adapter) {
-      setMessage({ tone: "error", text: t("Broker plugin is not available.") });
-      return;
-    }
+    if (!selectedRow?.adapter) return;
     const draft = createBrokerProfileDraft(selectedRow.adapter, selectedRow.instance);
     for (const field of selectedRow.adapter.configSchema) {
       if (field.type === "password" && draft.values[field.key]) draft.values[field.key] = "";
     }
     setEditDraft(draft);
     setActiveEditKey("label");
+    setEditError(null);
     setMessage(null);
     setDetailOpen(true);
   }, [selectedRow, setActiveEditKey, setDetailOpen, setEditDraft]);
 
+  // The form goes, and what it said with it.
+  const cancelEdit = useCallback(() => {
+    setEditDraft(null);
+    setEditError(null);
+    setMessage(null);
+  }, [setEditDraft]);
+
+  // What stops a save is about the open form, so it is said beside its Save, not on the row.
   const saveEdit = useCallback(async () => {
     if (!selectedRow?.adapter || !editDraft) return;
+    setMessage(null);
     const label = editDraft.label.trim();
     if (!label) {
-      setMessage({ tone: "error", text: t("Profile label is required.") });
+      setEditError(t("Profile label is required."));
       return;
     }
     const validationError = validateBrokerProfileValues(selectedRow.adapter, editDraft.values, selectedRow.instance);
     if (validationError) {
-      setMessage({ tone: "error", text: validationError });
+      setEditError(validationError);
       return;
     }
+    setEditError(null);
 
     try {
-      setBusy(t("Saving…"));
+      startRowAction(selectedRow.id, 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;
@@ -105,67 +165,106 @@ export function useBrokerManagerActions({
         localOnly: editDraft.localOnly,
         replaceConfig: true,
       });
+      // The row shows the saved profile.
       setEditDraft(null);
-      setMessage(infoMessage(tf("Saved {label}.", { label })));
     } catch (error) {
-      setMessage(errorMessage(error, t("Failed to save broker profile.")));
+      setEditError(errorText(error, t("Failed to save broker profile.")));
     } finally {
       setBusy(null);
     }
-  }, [dialog, editDraft, selectedRow, setEditDraft, updateBrokerInstance]);
+  }, [dialog, editDraft, selectedRow, setBusy, setEditDraft, startRowAction, updateBrokerInstance]);
 
   const connectSelected = useCallback(async () => {
     if (!selectedRow) return;
     if (isSignedInBrokerProfile(selectedRow.instance)) {
       // Connecting happens in the browser, then the profile syncs what it can now see.
       const broker = signedInBrokerForProfile(selectedRow.instance, selectedRow.brokerName);
+      const { id, label } = selectedRow;
+      startRowAction(id, t("Connecting…"));
       try {
-        setBusy(t("Connecting…"));
         // A connected broker is connected again only by a new sign-in: this renews it before the broker ends it.
         // A row that says when the sign-in ends is renewable before this session's first sync too.
         const renew = selectedRow.state === "connected" || selectedRow.signInEndsAt !== null;
-        if (!await requestBrokerSignIn(broker, { renew })) {
+        let signedIn: boolean;
+        try {
+          signedIn = await requestBrokerSignIn(broker, { renew });
+        } catch (error) {
+          setRowNote(id, {
+            tone: "error",
+            status: t("Sign-in failed"),
+            text: errorText(error, tf("{broker} was not connected.", { broker: broker.name })),
+          });
+          return;
+        }
+        if (!signedIn) {
           // Backing out of a renewal leaves the broker connected, for now.
-          setMessage(infoMessage(renew
-            ? tf("{broker} sign-in was not renewed.", { broker: broker.name })
-            : tf("{broker} was not connected.", { broker: broker.name })));
+          setRowNote(id, {
+            tone: "info",
+            text: renew
+              ? tf("{broker} sign-in was not renewed.", { broker: broker.name })
+              : tf("{broker} was not connected.", { broker: broker.name }),
+          });
           return;
         }
-        await syncBrokerInstance(selectedRow.id);
+        try {
+          await syncBrokerInstance(id);
+        } catch (error) {
+          setRowNote(id, { tone: "error", status: t("Sync failed"), text: errorText(error, tf("Failed to sync {label}.", { label })) });
+        }
         refreshStatuses();
-        setMessage(infoMessage(tf("Connected {broker}.", { broker: broker.name })));
-      } catch (error) {
-        setMessage(errorMessage(error, tf("Failed to sync {label}.", { label: selectedRow.label })));
       } finally {
         setBusy(null);
       }
       return;
     }
+    const { id, label } = selectedRow;
     try {
-      setBusy(t("Testing…"));
-      await connectBrokerInstance(selectedRow.id);
+      startRowAction(id, t("Testing…"));
+      await connectBrokerInstance(id);
       refreshStatuses();
-      setMessage(infoMessage(tf("Tested {label}.", { label: selectedRow.label })));
     } catch (error) {
-      setMessage(errorMessage(error, tf("Failed to test {label}.", { label: selectedRow.label })));
+      setRowNote(id, { tone: "error", status: t("Connect failed"), text: errorText(error, tf("Failed to test {label}.", { label })) });
     } finally {
       setBusy(null);
     }
-  }, [connectBrokerInstance, refreshStatuses, selectedRow, syncBrokerInstance]);
+  }, [connectBrokerInstance, refreshStatuses, selectedRow, setBusy, setRowNote, startRowAction, syncBrokerInstance]);
+
+  // A disabled profile is never connected or synced; b turns it back on, then syncs it.
+  const enableSelected = useCallback(async () => {
+    if (!selectedRow || selectedRow.instance.enabled !== false) return;
+    const { id, label } = selectedRow;
+    try {
+      startRowAction(id, t("Enabling…"));
+      const failure = await enableBrokerProfile({ updateBrokerInstance, syncBrokerInstance }, id, {
+        sync: !!selectedRow.adapter,
+        label,
+      });
+      if (failure) {
+        setRowNote(id, {
+          tone: "error",
+          status: failure.step === "enable" ? t("Enable failed") : t("Sync failed"),
+          text: failure.text,
+        });
+      }
+      refreshStatuses();
+    } finally {
+      setBusy(null);
+    }
+  }, [refreshStatuses, selectedRow, setBusy, setRowNote, startRowAction, syncBrokerInstance, updateBrokerInstance]);
 
   const syncSelected = useCallback(async () => {
     if (!selectedRow) return;
+    const { id, label } = selectedRow;
     try {
-      setBusy(t("Syncing…"));
-      await syncBrokerInstance(selectedRow.id);
+      startRowAction(id, t("Syncing…"));
+      await syncBrokerInstance(id);
       refreshStatuses();
-      setMessage(infoMessage(tf("Synced {label}.", { label: selectedRow.label })));
     } catch (error) {
-      setMessage(errorMessage(error, tf("Failed to sync {label}.", { label: selectedRow.label })));
+      setRowNote(id, { tone: "error", status: t("Sync failed"), text: errorText(error, tf("Failed to sync {label}.", { label })) });
     } finally {
       setBusy(null);
     }
-  }, [refreshStatuses, selectedRow, syncBrokerInstance]);
+  }, [refreshStatuses, selectedRow, setBusy, setRowNote, startRowAction, syncBrokerInstance]);
 
   const selectedProfileActions = useMemo(
     () => selectedRow?.adapter?.getProfileActions?.(selectedRow.instance) ?? [],
@@ -176,33 +275,53 @@ export function useBrokerManagerActions({
   const openProfileAction = useCallback((action: BrokerProfileAction | null = primaryProfileAction) => {
     if (!action) return;
     if (action.disabled) {
-      setMessage(infoMessage(action.disabledReason ?? tf("{action} is unavailable for this profile.", { action: t(action.label) })));
+      if (selectedRow) {
+        setRowNote(selectedRow.id, {
+          tone: "info",
+          text: action.disabledReason ?? tf("{action} is unavailable for this profile.", { action: t(action.label) }),
+        });
+      }
       return;
     }
     if (action.paneId) showPane(action.paneId);
-  }, [primaryProfileAction, showPane]);
+  }, [primaryProfileAction, selectedRow, setRowNote, showPane]);
 
   const removeSelected = useCallback(() => {
     if (!selectedRow) return;
     const { id, brokerName, label } = selectedRow;
-    const confirm = brokerProfileRemovalConfirm(selectedRow.instance, brokerName, async () => {
-      // Read when confirmed: the profile can change, or go, while the confirm is open.
-      const instances = getState().config.brokerInstances;
-      const instance = instances.find((entry) => entry.id === id);
-      if (!instance) return;
-      const nextSelectedId = neighbourBrokerProfileId(instances, id);
-      try {
-        setBusy(t("Disconnecting…"));
-        const removal = await removeBrokerProfile(instance, brokerName, removeBrokerInstance);
-        setEditDraft(null);
-        setDetailOpen(false);
-        setSelectedId(nextSelectedId);
-        setMessage(null);
-        notify({ body: removal.message, type: removal.accountKept ? "info" : "success" });
-      } finally {
-        setBusy(null);
-      }
-    });
+    // A removal that failed is said on the profile's row while it has one.
+    // Once the row is gone, only a toast can say it.
+    const listed = () => getState().config.brokerInstances.some((entry) => entry.id === id);
+    const failureText = (error: unknown) => errorText(error, tf("Failed to remove {label}.", { label }));
+    const toastIfGone = (error: unknown) => {
+      if (!listed()) notify({ body: failureText(error), type: "error" });
+    };
+    const confirm = {
+      ...brokerProfileRemovalConfirm(selectedRow.instance, brokerName, async () => {
+        // Read when confirmed: the profile can change, or go, while the confirm is open.
+        const instances = getState().config.brokerInstances;
+        const instance = instances.find((entry) => entry.id === id);
+        if (!instance) return;
+        const nextSelectedId = neighbourBrokerProfileId(instances, id);
+        try {
+          startRowAction(id, t("Disconnecting…"));
+          const removal = await removeBrokerProfile(instance, brokerName, removeBrokerInstance);
+          setEditDraft(null);
+          setDetailOpen(false);
+          setSelectedId(nextSelectedId);
+          setRowNote(id, null);
+          setMessage(null);
+          notify({ body: removal.message, type: removal.accountKept ? "info" : "success" });
+        } catch (error) {
+          // An open confirm says it inline too; the row keeps it once that closes.
+          if (listed()) setRowNote(id, { tone: "error", status: t("Remove failed"), text: failureText(error) });
+          throw error;
+        } finally {
+          setBusy(null);
+        }
+      }),
+      onFailureAfterClose: toastIfGone,
+    };
     if (openConfirmModal(confirm)) return;
     // A detached window has no confirm modal; its own dialog asks instead.
     void (async () => {
@@ -216,19 +335,26 @@ export function useBrokerManagerActions({
       try {
         await confirm.onConfirm();
       } catch (error) {
-        setMessage(errorMessage(error, tf("Failed to remove {label}.", { label })));
+        toastIfGone(error);
       }
     })();
-  }, [dialog, getState, notify, removeBrokerInstance, selectedRow, setDetailOpen, setEditDraft, setSelectedId]);
+  }, [dialog, getState, notify, removeBrokerInstance, selectedRow, setBusy, setDetailOpen, setEditDraft, setRowNote, setSelectedId, startRowAction]);
 
   return {
     busy,
+    /** The add flow's running action, which has no row to show it on. */
+    paneBusy: busyState && busyState.profileId === null ? busyState.text : null,
     message,
+    editError,
+    rowActivity,
     setBusy,
     setMessage,
+    setRowNote,
     startEdit,
+    cancelEdit,
     saveEdit,
     connectSelected,
+    enableSelected,
     syncSelected,
     selectedProfileActions,
     primaryProfileAction,

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

@@ -5,18 +5,21 @@ import type { DataTableCell, DataTableColumn } from "../../../components";
 import { colors } from "../../../theme/colors";
 import { formatRelativeAge } from "../../../utils/datetime-format";
 import type { BrokerDisplayState, BrokerProfileRow } from "./model";
+import type { BrokerRowActivity } from "./pane-actions";
 import { t } from "../../../i18n";
 import { signInEndStatus } from "./sign-in-end";
 
 type BrokerColumnId = "profile" | "status" | "broker" | "mode" | "accounts" | "updated";
 export type BrokerColumn = DataTableColumn & { id: BrokerColumnId };
 
-export function stateColor(state: BrokerDisplayState): string {
+function stateColor(state: BrokerDisplayState): string {
   switch (state) {
     case "connected": return colors.positive;
     case "connecting": return colors.warning;
     case "error": return colors.negative;
-    case "disabled": return colors.textMuted;
+    // Nothing syncs these until the user steps in.
+    case "sign-in": return colors.warning;
+    case "disabled": return colors.warning;
     case "unavailable": return colors.negative;
     default: return colors.textDim;
   }
@@ -29,7 +32,8 @@ export function buildBrokerColumns(width: number): BrokerColumn[] {
   // PROFILE takes whatever the fixed columns leave; the kit spreads it.
   return [
     { id: "profile", label: t("PROFILE"), width: 14, align: "left", flexGrow: 1 },
-    { id: "status", label: t("STATUS"), width: 12, align: "left" },
+    // Holds "Sign-in needed" and "Connect failed".
+    { id: "status", label: t("STATUS"), width: 14, align: "left" },
     { id: "broker", label: t("BROKER"), width: width >= 110 ? 20 : 16, align: "left" },
     ...(width >= MODE_COLUMN_MIN_WIDTH
       ? [{ id: "mode" as const, label: t("MODE"), width: 11, align: "left" as const }]
@@ -39,8 +43,27 @@ export function buildBrokerColumns(width: number): BrokerColumn[] {
   ];
 }
 
+/**
+ * What a profile's STATUS says, in the table and atop its detail: the action
+ * running on it, then the one that just failed on it, then a sign-in the
+ * broker is about to end, then its own state ("Disabled", "Sign-in needed").
+ */
+export function brokerRowStatus(row: BrokerProfileRow, activity: BrokerRowActivity = {}): { text: string; color: string } {
+  if (activity.busy) return { text: activity.busy, color: colors.warning };
+  // A sign-in the broker wants says more than which step ran into it.
+  if (activity.note?.status && row.state !== "sign-in") return { text: activity.note.status, color: colors.negative };
+  // A sign-in the broker is about to end replaces "Connected" until it is renewed.
+  if (row.signInEndsAt !== null) return { text: signInEndStatus(row.signInEndsAt), color: colors.warning };
+  return { text: row.stateLabel, color: stateColor(row.state) };
+}
+
 /** `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 {
+export function renderBrokerCell(
+  row: BrokerProfileRow,
+  column: BrokerColumn,
+  desktop = false,
+  activity: BrokerRowActivity = {},
+): DataTableCell {
   switch (column.id) {
     case "profile":
       return {
@@ -50,14 +73,7 @@ export function renderBrokerCell(row: BrokerProfileRow, column: BrokerColumn, de
         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.
-      if (row.signInEndsAt !== null) {
-        return { text: signInEndStatus(row.signInEndsAt), color: colors.warning };
-      }
-      return {
-        text: row.stateLabel,
-        color: stateColor(row.state),
-      };
+      return brokerRowStatus(row, activity);
     case "broker":
       return { text: row.brokerName, color: colors.textDim };
     case "mode":

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

@@ -1,3 +1,4 @@
+import { logFailure } from "../../../utils/log-failure";
 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";
@@ -78,7 +79,7 @@ export function BrokerAccountPicker({ accounts, value, onChange, disabled = fals
     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; });
+      .then((next) => choose.current(next)).catch(logFailure("broker-trading.account-picker", "Choose broker account failed")).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>

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

@@ -1,10 +1,11 @@
 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 type { BrokerOrder, BrokerOrderRequest, BrokerTradingCapabilities } from "../../../types/trading";
 import { brokerOrderKey, brokerOrderStatus, canChangeBrokerOrder, ticketEditingPriceStep, withLatestOrder } from "./orders-data";
 import { sameBrokerContract } from "../../../utils/instrument-identity";
 import { isStrategyOrder } from "./strategy";
+import { linkRoleName } from "./linked-orders";
 
 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
@@ -19,9 +20,54 @@ export function ticketOrderMatches(order: Pick<BrokerOrder, "accountId" | "broke
   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 }: {
+/**
+ * A price from the chart on the broker's tick, or the ticket's editing step, so the ticket reviews it as shown. Never
+ * under one tick: a line dragged to the bottom of the chart is not a price of zero.
+ */
+export function chartPriceOnTick(value: number, priceStep?: number, priceDecimals?: number): number {
+  const step = priceStep !== undefined && Number.isFinite(priceStep) && priceStep > 0 ? priceStep : ticketEditingPriceStep(Math.max(value, 0), priceDecimals);
+  const decimals = Math.min(18, step.toLocaleString("en-US", { useGrouping: false, maximumFractionDigits: 18 }).split(".")[1]?.length ?? 0);
+  return Number((Math.max(1, Math.round(value / step)) * step).toFixed(decimals));
+}
+
+/** The orders the chart draws: the broker's list with the ticket's latest word on one merged in. */
+export function ticketLineOrders(orders: readonly BrokerOrder[], latestOrder?: BrokerOrder): readonly BrokerOrder[] {
+  return latestOrder ? withLatestOrder(orders, latestOrder) : orders;
+}
+
+/**
+ * Whether a working order's line moves on the chart: the broker changes this order, and it is neither still being
+ * acknowledged nor already being replaced.
+ */
+export function orderLineMoves(order: BrokerOrder, allowed: Pick<BrokerTradingCapabilities, "enabled" | "modify"> | undefined): boolean {
+  return !!allowed?.enabled && !!allowed.modify && canChangeBrokerOrder(order) && !["Replacing", "Submitted"].includes(brokerOrderStatus(order.status));
+}
+
+/** Which ticket price each draft level shows, by level id. */
+export const TICKET_LEVEL_FIELDS = {
+  "ticket:limit": "limitPrice", "ticket:stop": "stopPrice", "ticket:take-profit": "takeProfitPrice", "ticket:stop-loss": "stopLossPrice",
+} as const satisfies Record<string, keyof BrokerOrderRequest>;
+
+/** The order a working order's level belongs to, and the price it shows. */
+export function orderLevelTarget(id: string, orders: readonly BrokerOrder[]): { order: BrokerOrder; field: "limitPrice" | "stopPrice" } | undefined {
+  const [kind, ...rest] = id.split(":");
+  if (kind !== "order" && kind !== "stop") return undefined;
+  const key = rest.join(":");
+  const order = orders.find((value) => brokerOrderKey(value) === key);
+  if (!order) return undefined;
+  return { order, field: kind === "stop" || order.orderType === "STP" ? "stopPrice" : "limitPrice" };
+}
+
+/**
+ * The ticket's draft and this account's working orders as chart levels. Levels hold no broker operation: a moved
+ * draft level changes the draft, and a moved order level opens that order's change in the ticket, for its review.
+ * `movable` says which working orders' lines move (the broker changes them, and the ticket is free to).
+ * While an order is being changed, a dashed line shows the changed price, and its own line stays where the broker
+ * holds it until the change is confirmed.
+ */
+export function ticketChartLevels({ draft, editing, orders, latestOrder, modifying, movable, avgCost, position, colors, priceStep, priceDecimals }: {
   draft?: BrokerOrderRequest; editing: boolean; orders: readonly BrokerOrder[]; latestOrder?: BrokerOrder;
+  modifying?: BrokerOrder; movable?: (order: BrokerOrder) => boolean;
   avgCost?: number; position?: number; colors: ThemeColors; priceStep?: number; priceDecimals?: number;
 }): CompositeChartLevel[] {
   const levels: CompositeChartLevel[] = [];
@@ -29,25 +75,48 @@ export function ticketChartLevels({ draft, editing, orders, latestOrder, avgCost
   // 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) => {
+  const add = (id: string, value: number | undefined, label: string, color: string, dashed = false, averaged = false, moves = 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 });
+    levels.push({ id, value, axisLabel, label, color, editable: moves, draggable: moves, actionable: false, dashed });
   };
-  if (draft && editing) {
+  const changing = modifying && editing && draft ? brokerOrderKey(modifying) : undefined;
+  if (draft && editing && !changing) {
     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);
+    // A bracket's exits trade the other way; an OCO's stop is its own side's.
+    const exitColor = draft.action === "SELL" ? colors.positive : colors.negative;
+    if (["LMT", "STP LMT"].includes(draft.orderType)) add("ticket:limit", draft.limitPrice, "Draft limit", color, true, false, true);
+    if (["STP", "STP LMT"].includes(draft.orderType)) add("ticket:stop", draft.stopPrice, "Draft stop", color, true, false, true);
+    if (draft.orderClass === "oco") add("ticket:stop-loss", draft.stopLossPrice, "Draft stop", color, true, false, true);
+    if (draft.orderClass === "bracket") {
+      add("ticket:take-profit", draft.takeProfitPrice, "Draft take profit", exitColor, true, false, true);
+      add("ticket:stop-loss", draft.stopLossPrice, "Draft stop loss", exitColor, true, false, true);
+    }
   }
-  const projected = latestOrder ? withLatestOrder(orders, latestOrder) : orders;
-  for (const order of projected) {
+  for (const order of ticketLineOrders(orders, latestOrder)) {
     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 state = ({ "Partially filled": "partial", Replacing: "replacing" } as Record<string, string>)[brokerOrderStatus(order.status)];
+    // A bracket's exit or a trailing stop says what it is; a plain order says how it stands.
+    const kind = order.linkRole && order.linkRole !== "entry" ? linkRoleName[order.linkRole].toLowerCase() : order.orderType === "TRAIL" ? "trailing" : undefined;
+    const label = `${order.action === "BUY" ? "Buy" : "Sell"} ${order.remaining} ${[kind, state].filter(Boolean).join(" ") || "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);
+    const key = brokerOrderKey(order);
+    // The order being changed shows where it is going, dashed, as a draft does, and moves on from there. Its own
+    // line stays put: nothing has reached the broker until the change is reviewed and confirmed.
+    if (key === changing && draft) {
+      const change = `${order.action === "BUY" ? "Buy" : "Sell"} ${order.remaining} change`;
+      add(`held:${key}`, order.limitPrice ?? order.stopPrice, label, color);
+      if (order.orderType === "STP LMT") add(`held-stop:${key}`, order.stopPrice, `${label} stop`, color);
+      add(`order:${key}`, order.orderType === "STP" ? draft.stopPrice : draft.limitPrice, change, color, true, false, true);
+      if (order.orderType === "STP LMT") add(`stop:${key}`, draft.stopPrice, `${change} stop`, color, true, false, true);
+      continue;
+    }
+    // A trailing stop's trigger is the broker's to move.
+    const moves = order.orderType !== "TRAIL" && !isStrategyOrder(order) && (movable?.(order) ?? false);
+    add(`order:${key}`, order.limitPrice ?? order.stopPrice, label, color, false, false, moves);
+    if (order.orderType === "STP LMT") add(`stop:${key}`, order.stopPrice, `${label} stop`, color, false, false, moves);
   }
   if (position && avgCost !== undefined) add("position:average", avgCost, "Average cost", colors.textDim, false, true);
   return levels;