gloomberb 0.18.2 → 0.18.4

package/src/plugins/builtin/broker-trading/ticket.tsx

@@ -6,20 +6,25 @@ import { useShortcut } from "../../../react/input";
 import { afterLayout, revealInScrollBox } from "../../../components/ui/reveal-in-scroll-box";
 import { useThemeColors } from "../../../theme/theme-context";
 import type { Quote } from "../../../types/financials";
+import { quoteAgeText } from "../../../market-data/quotes/freshness";
 import { formatPercentRaw } from "../../../utils/format";
 import type { BrokerAccount, BrokerOrder, BrokerOrderPreview, BrokerOrderRequest, BrokerTradingCapabilities } from "../../../types/trading";
 import { Box, ScrollBox, Text, TextAttributes, useUiCapabilities, type BoxRenderable, type ScrollBoxRenderable } from "../../../ui";
 import { useDialogState } from "../../../ui/dialog";
 import { BrokerAccountPicker, type BrokerAccountChoice } from "./account-picker";
-import { TicketLegs, TicketSection, TicketOrderHeadline, TicketOrderSummary, TicketReceiptRow, TicketStatus, ticketMoney as money, ticketNumber as number, ticketTifName, ticketTypeName as typeName } from "./ticket-parts";
+import { TicketExits, TicketLegs, TicketSection, TicketOrderHeadline, TicketOrderSummary, TicketReceiptRow, TicketStatus, ticketImpactMoney, ticketImpactSource, ticketMoney as money, ticketNumber as number, ticketTifName, ticketTypeName as typeName } from "./ticket-parts";
 import { brokerOrderDone, orderEstimatePrice, ticketEditingPriceStep } from "./orders-data";
+import { linkedFeature, trailingText, trailingUnit, type LinkedFeature } from "./linked-orders";
 
-export type TicketAction = "enable" | "review" | "submit" | "back" | "confirm" | "refresh" | "orders" | "new" | "cancel" | "all" | "quantity25" | "quantity50" | "priceBid" | "priceMid" | "priceAsk" | "priceLast";
-export type TicketField = "action" | "orderType" | "quantity" | "limitPrice" | "stopPrice" | "tif" | "outsideRth" | "typedConfirmation" | "confirmOrders";
+export type TicketAction = "enable" | "review" | "submit" | "back" | "confirm" | "refresh" | "orders" | "new" | "cancel" | "all" | "quantity25" | "quantity50" | "priceBid" | "priceMid" | "priceAsk" | "priceLast" | "priceChart";
+export type TicketField = "action" | "orderType" | "quantity" | "limitPrice" | "stopPrice" | "tif" | "outsideRth" | "typedConfirmation" | "confirmOrders"
+  | "bracket" | "takeProfitPrice" | "stopLossPrice" | "trailing" | "trailingUnit";
 export interface TicketViewModel {
   brokerName: string; symbol: string; accounts: BrokerAccount[]; accountId?: string;
   accountChoices?: readonly BrokerAccountChoice[]; accountChoiceValue?: string;
   quote?: Quote; quoteData?: "realtime" | "delayed";
+  /** The quote is not current (older than the ticket accepts, or of unknown age): it shows its age beside it. */
+  quoteStale?: boolean;
   /** A spread's legs' quotes, in leg order. `quote` is then the spread's own. */
   legQuotes?: Quote[];
   phase: "enable" | "editing" | "previewing" | "review" | "submitting" | "result" | "cancel-review" | "cancelling";
@@ -49,21 +54,26 @@ export interface BrokerTicketViewProps {
   onClose?(): void;
   /** Terminal content measurement; the DOM uses intrinsic flex layout. */
   onContentHeight?(height: number): void;
+  /** With a chart beside the ticket: pick a price on it for this field, or for the entry's without one. */
+  onPickPrice?(field?: TicketField): void;
 }
-/** "Limit at $759.50 · Day", "Stop $750.00 · Day": an order's terms, each named once. */
-function orderTerms(order: Pick<BrokerOrder, "orderType" | "limitPrice" | "stopPrice" | "tif"> & { outsideRth?: boolean }, limitWord: string, money: (value: number) => string): string {
+/**
+ * "Limit at $759.50 · Day", "Stop $750.00 · Day", "Trailing $1.50 · Day", "Limit $790.00 · stop $740.00, one cancels
+ * the other · GTC": an order's terms, each named once.
+ */
+function orderTerms(order: Pick<BrokerOrder, "orderType" | "limitPrice" | "stopPrice" | "tif" | "trailingAmount" | "trailingPercent"> & Pick<BrokerOrderRequest, "orderClass" | "stopLossPrice"> & { outsideRth?: boolean },
+  limitWord: string, money: (value: number) => string): string {
   const limit = order.limitPrice !== undefined ? `${limitWord} ${money(order.limitPrice)}` : "";
   const stop = order.stopPrice !== undefined ? `Stop ${money(order.stopPrice)}` : "";
-  const price = order.orderType === "STP" && stop ? [stop] : order.orderType === "STP LMT" && stop ? [stop, ...(order.limitPrice !== undefined ? [`limit ${money(order.limitPrice)}`] : [])]
+  const price = order.orderType === "TRAIL" ? [trailingText(order, money)]
+    : order.orderClass === "oco" ? [`Limit ${money(order.limitPrice ?? NaN)}`, `stop ${money(order.stopLossPrice ?? NaN)}, one cancels the other`]
+    : order.orderType === "STP" && stop ? [stop] : order.orderType === "STP LMT" && stop ? [stop, ...(order.limitPrice !== undefined ? [`limit ${money(order.limitPrice)}`] : [])]
     : [`${typeName[order.orderType] ?? order.orderType}${limit ? ` ${limit}` : ""}`, ...(stop ? [stop] : [])];
   return [...price, ...(order.tif ? [ticketTifName[order.tif] ?? order.tif] : []), ...(order.outsideRth ? ["Outside RTH"] : [])].join(" · ");
 }
 
 export function ticketQuoteAge(quote: Quote | undefined, now = Date.now()): string {
-  const at = quote?.lastTradeTime ?? quote?.lastUpdated;
-  if (!at || at > now) return "Age unknown";
-  const seconds = Math.max(0, Math.floor((now - at) / 1000));
-  return seconds < 60 ? `${seconds}s old` : seconds < 3600 ? `${Math.floor(seconds / 60)}m old` : `${Math.floor(seconds / 3600)}h ${Math.floor(seconds % 3600 / 60)}m old`;
+  return quoteAgeText(quote?.lastTradeTime ?? quote?.lastUpdated, now);
 }
 /** The decimals a price step needs: 0.01 and 0.05 take two, 0.0001 four. Never fewer than two. */
 function stepDecimals(step: number): number {
@@ -84,6 +94,8 @@ function replacementChanges(original: BrokerOrder, draft: BrokerOrderRequest, pr
     original.quantity !== draft.quantity ? `Quantity ${number(original.quantity)} → ${number(draft.quantity)}` : "",
     original.limitPrice !== draft.limitPrice && draft.limitPrice !== undefined ? `Limit ${price(original.limitPrice)} → ${price(draft.limitPrice)}` : "",
     original.stopPrice !== draft.stopPrice && draft.stopPrice !== undefined ? `Stop ${price(original.stopPrice)} → ${price(draft.stopPrice)}` : "",
+    original.trailingAmount !== draft.trailingAmount && draft.trailingAmount !== undefined ? `Trail ${price(original.trailingAmount)} → ${price(draft.trailingAmount)}` : "",
+    original.trailingPercent !== draft.trailingPercent && draft.trailingPercent !== undefined ? `Trail ${number(original.trailingPercent)}% → ${number(draft.trailingPercent)}%` : "",
   ].filter(Boolean);
   return changes.length ? changes.join(" · ") : "No change from the working order";
 }
@@ -119,10 +131,11 @@ function TicketNumberInput({ value, focused, onChange, ...props }: {
 /**
  * The docked quote: last price and change first, then bid in green and ask in
  * red with their sizes, as a broker's quote panel reads. A delayed quote shows
- * a clock whose tooltip names the source and its age.
+ * a clock whose tooltip names the source and its age; a stale one says its age
+ * beside the price, so the last session's book never reads as the market.
  */
-function DockedQuote({ quote, delayed, source, updated, price, change, width }: {
-  quote?: Quote; delayed: boolean; source: string; updated: string; price(value: number | undefined): string; change: string; width: number;
+function DockedQuote({ quote, delayed, stale, source, updated, price, change, width }: {
+  quote?: Quote; delayed: boolean; stale?: string; source: string; updated: string; price(value: number | undefined): string; change: string; width: number;
 }) {
   const c = useThemeColors();
   const native = useUiCapabilities().nativePaneChrome;
@@ -139,6 +152,7 @@ function DockedQuote({ quote, delayed, source, updated, price, change, width }:
       <FigureText>{quote?.price === undefined ? "--" : price(quote.price)}</FigureText>
       <Box flexGrow={1} minWidth={0}><FigureText part="sub" change={quote?.change}>{change}</FigureText></Box>
       {delayed ? <Box flexShrink={0} title={`${source} · ${updated}`}><Icon name="clock" color={c.warning} /></Box> : null}
+      {stale ? <Text fg={c.warning} flexShrink={0}>{stale}</Text> : null}
     </Box>
     <Box flexDirection="row" gap={2}>
       {side("Bid", quote?.bid, quote?.bidSize, c.positive)}
@@ -147,8 +161,11 @@ function DockedQuote({ quote, delayed, source, updated, price, change, width }:
   </Box>;
 }
 
+/** The ticket prices a pick on the chart can set. */
+const PRICE_FIELDS: readonly string[] = ["limitPrice", "stopPrice", "takeProfitPrice", "stopLossPrice"];
+
 /** One ticket presentation, with the same review and focus gates on every renderer. */
-export function BrokerTicketView({ model: m, width, height, focused, onEdit, onAction, onAccountChange, onCapture, docked = false, blocked = false, asking = false, onClose, onContentHeight }: BrokerTicketViewProps) {
+export function BrokerTicketView({ model: m, width, height, focused, onEdit, onAction, onAccountChange, onCapture, docked = false, blocked = false, asking = false, onClose, onContentHeight, onPickPrice }: BrokerTicketViewProps) {
   const c = useThemeColors();
   const native = useUiCapabilities().nativePaneChrome;
   const dialogOpen = useDialogState((state) => state.isOpen);
@@ -167,6 +184,7 @@ export function BrokerTicketView({ model: m, width, height, focused, onEdit, onA
   // A credit spread's preview reports what it receives as a negative cost.
   const previewCredit = (m.preview?.estimatedCost ?? 0) < 0;
   const previewCost = m.preview?.estimatedCost === undefined ? undefined : Math.abs(m.preview.estimatedCost);
+  const impactSource = ticketImpactSource(m.preview);
   const unit = strategy ? "spreads" : draft?.contract.secType === "OPT" ? "contracts" : "shares";
   const busy = blocked || ["previewing", "submitting", "cancelling"].includes(m.phase);
   const fast = mode === "simulation" && m.confirmOrders === false && !m.modifying;
@@ -175,6 +193,21 @@ export function BrokerTicketView({ model: m, width, height, focused, onEdit, onA
   const editing = m.phase === "editing" || m.phase === "previewing" || fastSubmitting;
   const showLimit = draft?.orderType === "LMT" || draft?.orderType === "STP LMT";
   const showStop = draft?.orderType === "STP" || draft?.orderType === "STP LMT";
+  // An OCO is a limit and a stop on one side; a bracket adds exits to an entry; a trailing stop follows the market.
+  const oco = draft?.orderClass === "oco";
+  const bracket = draft?.orderClass === "bracket";
+  const trailing = draft?.orderType === "TRAIL";
+  // A price can come from the chart beside the ticket; a spread's net premium is not on it.
+  const chartPick = !!onPickPrice && !strategy && (showLimit || showStop);
+  const trailUnit = draft ? trailingUnit(draft) : "amount";
+  const trailValue = trailUnit === "percent" ? draft?.trailingPercent : draft?.trailingAmount;
+  // What the broker cannot take is not offered. A draft that already holds one still shows it, to be taken off;
+  // review refuses it with the reason.
+  const offers = (feature: LinkedFeature, held: boolean) => held || linkedFeature(m.capabilities, feature, m.brokerName).available;
+  const showBracket = !!draft && !strategy && !m.modifying && !trailing && !oco && offers("bracket", bracket);
+  // One unit needs no switch: the field's suffix says which it is.
+  const trailUnits = m.capabilities?.trailing ?? [];
+  const showTrailUnit = trailUnits.length > 1 || !trailUnits.includes(trailUnit);
   const extendedHours = m.capabilities?.extendedHours && (!m.capabilities.extendedHoursTif || m.capabilities.extendedHoursTif.includes(draft?.tif ?? "DAY"));
   const inner = Math.max(28, width - (docked ? 2 : native ? 6 : 2));
   const formWidth = wide ? Math.min(74, Math.floor((inner - 3) * 0.58)) : inner;
@@ -203,8 +236,12 @@ export function BrokerTicketView({ model: m, width, height, focused, onEdit, onA
     if (m.phase === "enable") return ["enable", "back"];
     if (editing) return [
       "account", "action", "orderType", "quantity", "quantity25", "quantity50", "all",
-      ...(showLimit ? ["limitPrice", "priceBid", "priceMid", "priceAsk", "priceLast"] : []),
-      ...(showStop ? ["stopPrice"] : []),
+      ...(showLimit ? ["limitPrice", "priceBid", "priceMid", "priceAsk", "priceLast", ...(chartPick ? ["priceChart"] : [])] : []),
+      ...(showStop ? ["stopPrice", ...(chartPick && !showLimit ? ["priceChart"] : [])] : []),
+      ...(oco ? ["stopLossPrice"] : []),
+      ...(trailing ? ["trailing", ...(showTrailUnit ? ["trailingUnit"] : [])] : []),
+      ...(showBracket ? ["bracket"] : []),
+      ...(bracket ? ["takeProfitPrice", "stopLossPrice"] : []),
       "tif",
       ...(extendedHours ? ["outsideRth"] : []),
       ...(mode === "simulation" && !m.modifying ? ["confirmOrders"] : []),
@@ -216,7 +253,7 @@ export function BrokerTicketView({ model: m, width, height, focused, onEdit, onA
     if (finished) return ["new", "orders"];
     if (resultStatus === "UNKNOWN") return ["refresh", "orders"];
     return ["refresh", "orders", "new"];
-  }, [m.phase, editing, review, live, showLimit, showStop, extendedHours, resultStatus, finished, m.tradingEnabled, mode, m.modifying]);
+  }, [m.phase, editing, review, live, showLimit, showStop, oco, trailing, showTrailUnit, showBracket, bracket, extendedHours, resultStatus, finished, m.tradingEnabled, mode, m.modifying, chartPick]);
   const previousFocus = useRef<{ phase: TicketViewModel["phase"]; revision?: number } | undefined>(undefined);
   useEffect(() => {
     if (previousFocus.current?.phase !== m.phase || previousFocus.current?.revision !== m.focusRevision) {
@@ -237,11 +274,15 @@ export function BrokerTicketView({ model: m, width, height, focused, onEdit, onA
   const typedMatches = !live || m.typedConfirmation?.trim().toUpperCase() === confirmationSymbol;
   const holdingBlocked = sell && !strategy && !m.capabilities?.shortSelling && (m.position === undefined || (draft?.quantity ?? 0) > Math.max(0, m.position));
   const validPrice = (value: number | undefined) => value !== undefined && Number.isFinite(value) && value > 0;
+  // A bracket needs one exit at least; each one shown is a price or left empty.
+  const exitOk = (value: number | undefined) => value === undefined || validPrice(value);
   const canReview = m.connected && m.tradingEnabled && !!account && !!draft && validPrice(draft.quantity) && !holdingBlocked && !busy
-    && (!showLimit || validPrice(draft.limitPrice)) && (!showStop || validPrice(draft.stopPrice));
+    && (!showLimit || validPrice(draft.limitPrice)) && (!showStop || validPrice(draft.stopPrice)) && (!oco || validPrice(draft.stopLossPrice))
+    && (!trailing || validPrice(trailValue))
+    && (!bracket || exitOk(draft.takeProfitPrice) && exitOk(draft.stopLossPrice) && (validPrice(draft.takeProfitPrice) || validPrice(draft.stopLossPrice)));
   const blockingPreview = !!m.preview?.errors?.length;
   const canConfirm = review && typedMatches && !blockingPreview && m.connected && m.tradingEnabled && !busy;
-  const textActive = ["quantity", "limitPrice", "stopPrice", "typedConfirmation"].includes(active);
+  const textActive = ["quantity", "limitPrice", "stopPrice", "takeProfitPrice", "stopLossPrice", "trailing", "typedConfirmation"].includes(active);
   // Leaving a field must return h/l to the research strip, including after a command.
   useEffect(() => {
     onCapture?.(focused && textActive);
@@ -259,8 +300,15 @@ export function BrokerTicketView({ model: m, width, height, focused, onEdit, onA
     if (active === "confirmOrders") { if (mode === "simulation" && !m.modifying) onEdit("confirmOrders", m.confirmOrders === false); return; }
     if (active === "tif") { if (!m.modifying) tifControl.current?.open(); return; }
     if (active === "outsideRth") { if (!m.modifying && extendedHours) onEdit("outsideRth", !draft?.outsideRth); return; }
+    if (active === "bracket") { onEdit("bracket", !bracket); return; }
+    if (active === "trailingUnit") {
+      const other = trailUnit === "percent" ? "amount" : "percent";
+      if (m.capabilities?.trailing?.includes(other)) onEdit("trailingUnit", other);
+      return;
+    }
     if (active === "review") { if (canReview) onAction("submit"); return; }
     if (active === "confirm") { if (canConfirm) onAction("confirm"); return; }
+    if (active === "priceChart") { onPickPrice?.(showLimit ? "limitPrice" : "stopPrice"); return; }
     if (quickActions.includes(active as TicketAction)) { if (!quickDisabled(active as TicketAction)) onAction(active as TicketAction); return; }
     if (active === "enable" && !m.connected) return;
     if (["back", "refresh", "orders", "new", "enable", "cancel"].includes(active)) onAction(active as TicketAction);
@@ -279,6 +327,8 @@ export function BrokerTicketView({ model: m, width, height, focused, onEdit, onA
     ...(showLimit || showStop ? ([["8", "Bid", "priceBid"], ["9", "Mid", "priceMid"], ["0", "Ask", "priceAsk"], ...(strategy ? [] : [["p", "Last", "priceLast"]] as const)] as const)
       .map(([key, label, action]) => actionShortcut(key, label, action, quickDisabled(action))) : []),
     ...(extendedHours ? [editShortcut("x", "Extended", "outsideRth", !draft?.outsideRth, !!m.modifying)] : []),
+    // The price being typed, or the entry's, from the chart beside the ticket.
+    ...(chartPick ? [keyAction("c", "hart price", () => onPickPrice!(PRICE_FIELDS.includes(active) ? active as TicketField : undefined))] : []),
   ] : review ? [actionShortcut("e", "dit", "back"), actionShortcut("o", "rders", "orders")]
     : m.phase === "enable" ? [actionShortcut("e", "nable", "enable", !m.connected)]
     : m.phase === "cancel-review" ? [actionShortcut("e", "dit", "back")]
@@ -301,6 +351,12 @@ export function BrokerTicketView({ model: m, width, height, focused, onEdit, onA
       if (!event.repeat) activate();
       return;
     }
+    // A price holds no letters: c in a price field picks that price on the chart beside the ticket.
+    if (chartPick && editing && !busy && event.name === "c" && !event.shift && PRICE_FIELDS.includes(active)) {
+      event.preventDefault(); event.stopPropagation();
+      if (!event.repeat) onPickPrice!(active as TicketField);
+      return;
+    }
     if (event.shift || event.targetEditable || textActive) return;
     const shortcut = shortcuts.find((item) => item.key === event.name);
     if (!shortcut) return;
@@ -344,8 +400,9 @@ export function BrokerTicketView({ model: m, width, height, focused, onEdit, onA
   };
   const quick = (key: TicketAction, label: string, disabled = false) => <Box ref={nodeRef(key)} key={key}>
     <Button label={label} displayLabel={!native && marker(key) ? `> ${label}` : undefined} variant="quiet" compact active={active === key && focused}
-      disabled={disabled || busy} onPress={() => { setActive(key); onAction(key); }} />
+      disabled={disabled || busy} onPress={() => { setActive(key); if (key === "priceChart") onPickPrice?.(showLimit ? "limitPrice" : "stopPrice"); else onAction(key); }} />
   </Box>;
+  const numericLabels: Partial<Record<TicketField, string>> = { limitPrice: "Limit price", stopPrice: "Stop price", takeProfitPrice: "Take profit price", stopLossPrice: oco ? "Stop price" : "Stop loss price", trailing: trailUnit === "percent" ? "Trailing percent" : "Trailing amount" };
   const numeric = (key: TicketField, label: string, value: number | undefined, suffix: string, picks?: ReactNode) => {
     const inlinePicks = !!picks && formWidth >= 60;
     const quantity = key === "quantity";
@@ -353,12 +410,13 @@ export function BrokerTicketView({ model: m, width, height, focused, onEdit, onA
     const quantityStep = m.capabilities?.fractionalQuantity ? reportedStep : wholeNumberStep(reportedStep) ?? NaN;
     // Decimal precision is not a declared exchange tick. The fallback is an editing convenience only.
     const priceStep = m.capabilities?.priceStep ?? ticketEditingPriceStep(value ?? m.quote?.price, m.capabilities?.priceDecimals);
-    const step = quantity ? quantityStep : priceStep;
+    // A trailing percent steps by a tenth of a point.
+    const step = quantity ? quantityStep : key === "trailing" && trailUnit === "percent" ? 0.1 : priceStep;
     return <Box flexDirection="column" gap={0}>
     <Box flexDirection="row" alignItems="center" gap={1}>
     <Box ref={nodeRef(key)} onMouseDown={() => { if (!busy) setActive(key); }} flexDirection="row" alignItems="center" gap={1} flexGrow={1}>
       <FieldLabel label={label} width={labelWidth} active={active === key} />
-      <Box flexGrow={1}><TicketNumberInput accessibleLabel={key === "limitPrice" ? "Limit price" : key === "stopPrice" ? "Stop price" : label} value={value}
+      <Box flexGrow={1}><TicketNumberInput accessibleLabel={numericLabels[key] ?? label} value={value}
         width={Math.max(14, formWidth - (docked ? 11 : native ? 21 : 24) - (inlinePicks ? 20 : 0))} focused={focused && active === key && !busy} active={active === key} disabled={busy}
         step={step} min={quantity ? Math.max(step, m.capabilities?.minQuantity ?? step) : step} max={quantity && sell && !m.capabilities?.shortSelling ? Math.max(0, m.position ?? 0) : undefined}
         onChange={(text) => { if (!busy) onEdit(key, text); }} onSubmit={() => setActive(m.tradingEnabled ? "review" : "enable")} /></Box>
@@ -377,6 +435,7 @@ export function BrokerTicketView({ model: m, width, height, focused, onEdit, onA
   const updated = sourceAt && Number.isFinite(sourceAt) ? `${new Date(sourceAt).toISOString().slice(11, 19)} UTC` : "unknown";
   const delayed = m.quoteData !== "realtime" || m.quote?.dataSource !== "live";
   const age = ticketQuoteAge(m.quote, m.now).replace(" old", "");
+  const stale = m.quote && m.quoteStale ? ticketQuoteAge(m.quote, m.now) : undefined;
   const source = `${m.brokerName}, ${delayed ? "delayed" : "real-time"} ${age}`;
   const accountPicker = (pickerWidth: number) => <BrokerAccountPicker
     accounts={m.accountChoices ?? m.accounts.map((a) => ({ value: a.accountId, label: a.name, tradingMode: a.tradingMode }))}
@@ -402,7 +461,7 @@ export function BrokerTicketView({ model: m, width, height, focused, onEdit, onA
         <Box ref={nodeRef("account")} flexShrink={1} minWidth={0}>{accountPicker(width - (onClose ? 6 : 2))}</Box>
         {onClose ? <IconButton icon="close" label="Close trade panel" shortcut="Esc" onPress={onClose} /> : null}
       </Box>
-      <DockedQuote quote={m.quote} delayed={delayed} source={source} updated={updated} price={quotePrice} change={change} width={width - 2} />
+      <DockedQuote quote={m.quote} delayed={delayed} stale={stale} source={source} updated={updated} price={quotePrice} change={change} width={width - 2} />
     </Box> : <Box flexShrink={0}>
       <Box flexDirection="column" data-gloom-selectable="true" paddingX={native ? 3 : 1} paddingY={native ? wide ? 1 : 0.5 : 0} gap={native ? wide ? 0.65 : 0.2 : 0} >
         <Box flexDirection={narrow ? "column" : "row"} justifyContent="space-between" alignItems={narrow ? "flex-start" : "center"} gap={narrow ? 0.4 : 1}>
@@ -429,7 +488,7 @@ export function BrokerTicketView({ model: m, width, height, focused, onEdit, onA
         <Box flexDirection="row" flexWrap={native ? "wrap" : "nowrap"} alignItems="center" gap={1}>
           {/* A delayed quote is the yellow clock, as in pane footers, with the detail on hover. */}
           {delayed ? <Box flexShrink={0} title={source}><Icon name="clock" color={c.warning} /></Box> : null}
-          <Text fg={c.textDim}>{delayed ? `${m.brokerName} ${age}` : source}</Text>
+          <Text fg={stale ? c.warning : c.textDim}>{stale ? `${m.brokerName}, ${stale}` : delayed ? `${m.brokerName} ${age}` : source}</Text>
           <Text fg={c.textDim}>{`${updated}${m.synthetic && !wide && !narrow ? " · SYNTHETIC" : ""}`}</Text>
         </Box>
       </Box>
@@ -447,7 +506,7 @@ export function BrokerTicketView({ model: m, width, height, focused, onEdit, onA
           <TicketSection width={formWidth} title={m.modifying ? "Modify order" : docked ? undefined : "Order details"}>
             <Box flexDirection="column" gap={rowGap}>
               {!m.connected ? m.reconnecting ? <Notice tone="muted">{`Reconnecting to ${m.brokerName}...`}</Notice> : <Notice variant="callout">Broker disconnected. Connect in Brokers.</Notice>
-                : !m.tradingEnabled ? <Notice variant="callout">Trading is off for this profile.</Notice> : null}
+                : !m.tradingEnabled ? <Notice variant="callout">{m.capabilities?.disabledReason ?? "Trading is off for this profile."}</Notice> : null}
               <Box ref={nodeRef("action")} flexDirection="row" onMouseDown={() => setActive("action")}>
                 {!native ? <FieldLabel label="" width={2} active={focused && active === "action"} /> : null}
                 <Box flexGrow={1}><SegmentedControl variant="flat" accessibleLabel="Order side" value={draft.action} size="large" width="100%"
@@ -456,8 +515,13 @@ export function BrokerTicketView({ model: m, width, height, focused, onEdit, onA
               </Box>
               <Box ref={nodeRef("orderType")} flexDirection="row" gap={1} alignItems="center" onMouseDown={() => { if (!busy) setActive("orderType"); }}>
                 <FieldLabel label={docked ? "Type" : "Order type"} width={labelWidth} active={active === "orderType"} />
-                <SelectButton label="Order type" showLabel={false} variant="well" width={selectWidth} value={draft.orderType}
-                  options={(m.capabilities?.orderTypes ?? ["LMT"]).map((t) => ({ value: t, label: typeName[t] ?? t }))} disabled={busy || m.modifying}
+                <SelectButton label="Order type" showLabel={false} variant="well" width={selectWidth} value={oco ? "OCO" : draft.orderType}
+                  options={[...(m.capabilities?.orderTypes ?? ["LMT"]).filter((t) => t !== "TRAIL").map((t) => ({ value: t, label: typeName[t] ?? t })),
+                    // A spread takes neither; elsewhere each is listed where the broker takes it.
+                    ...(strategy ? [] : [
+                      ...(offers("trailing", trailing) ? [{ value: "TRAIL", label: typeName.TRAIL! }] : []),
+                      ...(offers("oco", oco) ? [{ value: "OCO", label: "OCO", description: "A limit and a stop: one filling cancels the other" }] : []),
+                    ])]} disabled={busy || m.modifying}
                   emphasized={focused && active === "orderType"} controlRef={orderTypeControl} onFocus={() => setActive("orderType")} onChange={(v) => onEdit("orderType", v)} />
               </Box>
               {strategy ? <TicketLegs model={m} width={formWidth} inset /> : null}
@@ -471,8 +535,23 @@ export function BrokerTicketView({ model: m, width, height, focused, onEdit, onA
                 {quick("priceMid", "Mid", !(m.quote?.bid! > 0) || !(m.quote?.ask! > 0))}
                 {quick("priceAsk", "Ask", !(m.quote?.ask! > 0))}
                 {strategy ? null : quick("priceLast", "Last", !m.quote?.price)}
+                {chartPick ? quick("priceChart", "Chart") : null}
               </>) : null}
-              {showStop ? numeric("stopPrice", docked ? "Stop" : "Stop price", draft.stopPrice, currency) : null}
+              {showStop ? numeric("stopPrice", docked ? "Stop" : "Stop price", draft.stopPrice, currency, chartPick && !showLimit ? quick("priceChart", "Chart") : undefined) : null}
+              {oco ? numeric("stopLossPrice", docked ? "Stop" : "Stop price", draft.stopLossPrice, currency) : null}
+              {trailing ? numeric("trailing", "Trail", trailValue, trailUnit === "percent" ? "%" : currency, showTrailUnit ? <Box ref={nodeRef("trailingUnit")} onMouseDown={() => { if (!busy) setActive("trailingUnit"); }}>
+                <SegmentedControl accessibleLabel="Trailing unit" value={trailUnit} focused={focused && active === "trailingUnit"} shortcutScope={scope}
+                  options={[{ value: "amount", label: "Price", disabled: busy || !m.capabilities?.trailing?.includes("amount") },
+                    { value: "percent", label: "%", disabled: busy || !m.capabilities?.trailing?.includes("percent") }]}
+                  onChange={(value) => { setActive("trailingUnit"); onEdit("trailingUnit", value); }} />
+              </Box> : undefined) : null}
+              {showBracket ? <Box ref={nodeRef("bracket")} flexDirection="column" onMouseDown={() => { if (!busy) setActive("bracket"); }}>
+                <Checkbox label="Take profit / stop loss" checked={bracket} disabled={busy} active={focused && active === "bracket"}
+                  onChange={(value) => { setActive("bracket"); onEdit("bracket", value); }} />
+              </Box> : null}
+              {/* Beside the chart, under "Take profit / stop loss", as the order rows tag them. */}
+              {bracket ? numeric("takeProfitPrice", docked ? "TP" : "Take profit", draft.takeProfitPrice, currency) : null}
+              {bracket ? numeric("stopLossPrice", docked ? "SL" : "Stop loss", draft.stopLossPrice, currency) : null}
               <Box flexDirection="row" flexWrap="wrap" alignItems="center" gap={docked ? rowGap : 1}>
                 <Box ref={nodeRef("tif")} flexDirection="row" alignItems="center" gap={1} onMouseDown={() => setActive("tif")}>
                   <FieldLabel label="TIF" width={labelWidth} active={active === "tif"} />
@@ -513,17 +592,22 @@ export function BrokerTicketView({ model: m, width, height, focused, onEdit, onA
           <TicketOrderHeadline model={m} large />
           {strategy ? <TicketLegs model={m} width={formWidth} /> : null}
           <Text fg={c.textDim}>{orderTerms({ orderType: draft?.orderType ?? "LMT", limitPrice: showLimit ? draft?.limitPrice : undefined,
-            stopPrice: showStop ? draft?.stopPrice : undefined, tif: draft?.tif ?? "DAY", outsideRth: draft?.outsideRth }, strategy ? sell ? "net credit" : "net debit" : "at", (value) => money(value, currency))}</Text>
+            stopPrice: showStop ? draft?.stopPrice : undefined, tif: draft?.tif ?? "DAY", outsideRth: draft?.outsideRth, trailingAmount: draft?.trailingAmount, trailingPercent: draft?.trailingPercent,
+            orderClass: draft?.orderClass, stopLossPrice: draft?.stopLossPrice }, strategy ? sell ? "net credit" : "net debit" : "at", (value) => money(value, currency))}</Text>
           {m.original && draft ? <Text fg={c.warning}>{replacementChanges(m.original, draft, (value) => money(value, currency))}</Text> : null}
+          {bracket ? <TicketExits model={m} width={formWidth} currency={currency} /> : null}
           <Box marginTop={native && wide ? 1 : 0} flexDirection="column" gap={native && wide ? 0.4 : 0}>
-            <TicketReceiptRow label="Fees" value={money(m.preview?.fees, currency)} width={formWidth} />
-            <TicketReceiptRow label="Commission" value={money(m.preview?.commission, m.preview?.commissionCurrency ?? currency)} width={formWidth} />
+            {impactSource ? <TicketReceiptRow label="Impact source" value={impactSource} width={formWidth} /> : null}
+            <TicketReceiptRow label="Fees" value={ticketImpactMoney(m.preview, m.preview?.fees, currency)} width={formWidth} />
+            <TicketReceiptRow label="Commission" value={ticketImpactMoney(m.preview, m.preview?.commission, m.preview?.commissionCurrency ?? currency)} width={formWidth} />
             {!wide ? <TicketOrderSummary model={m} width={formWidth} compact receipt /> : null}
           </Box>
           <Box flexDirection="row" justifyContent="space-between" alignItems={native ? "baseline" : "center"} paddingTop={native && wide ? 0.7 : 0}>
             <Text fg={c.textDim}>{previewCredit ? "Estimated credit" : "Estimated cost"}</Text>
-            <FigureText>{money(previewCost, currency)}</FigureText>
+            <FigureText>{ticketImpactMoney(m.preview, previewCost, currency)}</FigureText>
           </Box>
+          {/* The broker's terms for its figures, before the order is confirmed. */}
+          {m.preview?.disclosure ? <Text fg={c.textDim} wrapText>{m.preview.disclosure}</Text> : null}
           {/* Beside the chart, warnings are lines, so the place button fits without scrolling. */}
           {warnings.map((warning, index) => <Notice key={index} variant={docked ? undefined : "callout"} tone="warning">{warning}</Notice>)}
           {m.preview?.errors?.map((error, index) => <Notice key={index} variant={docked ? undefined : "callout"} tone="negative">{error}</Notice>)}
@@ -545,16 +629,18 @@ export function BrokerTicketView({ model: m, width, height, focused, onEdit, onA
         </TicketSection> : null}
         {m.phase === "result" ? <Box flexDirection={wide ? "row" : "column"} gap={3}><TicketSection width={formWidth} title={title} selectable>
           <TicketOrderHeadline model={m} large />{strategy ? <TicketLegs model={m} width={formWidth} /> : null}
-          {m.result ? <Text fg={c.textDim}>{orderTerms(m.result, strategy ? "net" : "at", (value) => money(value, currency))}</Text> : null}
+          {m.result ? <Text fg={c.textDim}>{orderTerms({ ...m.result, orderClass: draft?.orderClass, stopLossPrice: draft?.stopLossPrice }, strategy ? "net" : "at", (value) => money(value, currency))}</Text> : null}
+          {bracket ? <TicketExits model={m} width={formWidth} currency={currency} /> : null}
           <TicketStatus model={m} width={formWidth} />
           {m.resultQuantities === "last-known" ? <Text fg={c.warning}>Last known quantities</Text> : null}
           {!["PARTIALLY_FILLED", "FILLED"].includes(resultStatus) ? <TicketReceiptRow label="Filled" value={resultQuantity(m.result?.filled)} width={formWidth} /> : null}
           <TicketReceiptRow label="Remaining" value={resultQuantity(m.result?.remaining)} width={formWidth} />
           <Text fg={c.textDim}>Estimates from order preview</Text>
-          <TicketReceiptRow label={previewCredit ? "Preview credit" : "Preview cost"} value={money(previewCost, currency)} width={formWidth} />
-          <TicketReceiptRow label="Fees" value={money(m.preview?.fees, currency)} width={formWidth} />
-          <TicketReceiptRow label="Commission" value={money(m.preview?.commission, m.preview?.commissionCurrency ?? currency)} width={formWidth} />
+          <TicketReceiptRow label={previewCredit ? "Preview credit" : "Preview cost"} value={ticketImpactMoney(m.preview, previewCost, currency)} width={formWidth} />
+          <TicketReceiptRow label="Fees" value={ticketImpactMoney(m.preview, m.preview?.fees, currency)} width={formWidth} />
+          <TicketReceiptRow label="Commission" value={ticketImpactMoney(m.preview, m.preview?.commission, m.preview?.commissionCurrency ?? currency)} width={formWidth} />
           {m.preview?.buyingPowerAfter !== undefined ? <TicketReceiptRow label="Buying power after" value={money(m.preview.buyingPowerAfter, currency)} width={formWidth} /> : null}
+          {m.preview?.cashAfter !== undefined ? <TicketReceiptRow label="Cash after" value={money(m.preview.cashAfter, currency)} width={formWidth} /> : null}
           {m.error && !["UNKNOWN", "REJECTED"].includes(resultStatus) ? <Notice variant="callout" tone="negative">{m.error}</Notice> : null}
           {!finished && resultStatus !== "UNKNOWN" ? <Box flexDirection="row" alignItems="center" gap={1}>
             {action("refresh", "Refresh status", false, false, "neutral", true)}<Text fg={c.textDim}>·</Text>

package/src/plugins/builtin/buildout/cells.tsx

@@ -19,6 +19,8 @@ import { favoriteKey } from "./table-model";
 
 interface BuildoutCellContext {
   favoriteBusyKey: string | null;
+  /** The row's last star did not take. */
+  favoriteFailed?: boolean;
   toggleFavorite: (row: BuildoutRow) => void | Promise<void>;
 }
 
@@ -60,6 +62,7 @@ export function renderBuildoutCell(
             <FavoriteCell
               starred={company.starred === true}
               busy={busy}
+              failed={context.favoriteFailed}
               selected={rowState.selected}
               onPress={() => { void context.toggleFavorite(row); }}
             />
@@ -120,6 +123,7 @@ export function renderBuildoutCell(
             <FavoriteCell
               starred={site.starred === true}
               busy={busy}
+              failed={context.favoriteFailed}
               selected={rowState.selected}
               onPress={() => { void context.toggleFavorite(row); }}
             />

package/src/plugins/builtin/buildout/detail/index.tsx

@@ -1,5 +1,5 @@
 import { Box, ScrollBox } from "../../../../ui";
-import { EmptyState } from "../../../../components";
+import { EmptyState, Notice } from "../../../../components";
 import type { BuildoutRow } from "../model/types";
 import type { InlineTickerCatalog } from "./ui";
 import { CompanyDetail } from "./company";
@@ -13,12 +13,15 @@ export {
 
 export function BuildoutDetail({
   row,
+  note = null,
   width,
   height,
   catalog,
   openTicker,
 }: {
   row: BuildoutRow | null;
+  /** What the row's last star ran into, in full. */
+  note?: string | null;
   width: number;
   height: number;
   catalog: InlineTickerCatalog;
@@ -45,6 +48,7 @@ export function BuildoutDetail({
         focusable={false}
       >
         <Box flexDirection="column" paddingX={1} width={bodyWidth}>
+          {note ? <Box paddingBottom={1}><Notice tone="negative">{note}</Notice></Box> : null}
           {row.kind === "company" ? (
             <CompanyDetail
               company={row.item}

package/src/plugins/builtin/buildout/detail/ui.tsx

@@ -5,7 +5,7 @@ import { ExternalLinkText } from "../../../../components/ui/external-link";
 import { ClippedText } from "../../../../components/ui/display";
 import type { InlineTickerCatalogEntry } from "../../../../state/hooks/inline-tickers";
 import { colors } from "../../../../theme/colors";
-import { Box, Text } from "../../../../ui";
+import { Box, Text, TextAttributes } from "../../../../ui";
 import { truncateWithEllipsis } from "../../../../utils/text-wrap";
 import { sourceDetailEntries, text, textOrNull, tickerSymbol } from "../format";
 import type { BuildoutCompany, BuildoutRelatedCompany, BuildoutSource } from "../model/types";
@@ -182,18 +182,21 @@ export function MarkdownBlock({
 export function FavoriteCell({
   starred,
   busy,
+  failed = false,
   selected,
   onPress,
 }: {
   starred: boolean;
   busy: boolean;
+  /** The last star did not take: a `!` in the error tone, the reason in the row's detail. */
+  failed?: boolean;
   selected: boolean;
   onPress?: () => void;
 }) {
   return (
     <Button
-      label={starred ? "Remove favorite" : "Add favorite"}
-      displayLabel={busy ? "*" : starred ? "★" : "☆"}
+      label={failed ? starred ? "Unstarring failed. Remove favorite" : "Starring failed. Add favorite" : starred ? "Remove favorite" : "Add favorite"}
+      displayLabel={busy ? "*" : failed ? "!" : starred ? "★" : "☆"}
       width={2}
       compact
       variant="plain"
@@ -201,7 +204,7 @@ export function FavoriteCell({
       disabled={busy || !onPress}
       stopPropagation
       onPress={onPress}
-    />
+    >{failed && !busy ? <Text fg={colors.negative} attributes={TextAttributes.BOLD}>!</Text> : undefined}</Button>
   );
 }