gloomberb 0.18.3 → 0.18.4

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

@@ -6,16 +6,19 @@ 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;
@@ -51,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 {
@@ -86,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";
 }
@@ -151,8 +161,11 @@ function DockedQuote({ quote, delayed, stale, source, updated, price, change, wi
   </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);
@@ -171,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;
@@ -179,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;
@@ -207,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"] : []),
@@ -220,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) {
@@ -241,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);
@@ -263,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);
@@ -283,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")]
@@ -305,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;
@@ -348,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";
@@ -357,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>
@@ -452,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%"
@@ -461,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}
@@ -476,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"} />
@@ -518,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>)}
@@ -550,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>
   );
 }
 

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

@@ -17,6 +17,7 @@ import type { PaneProps } from "../../../../types/plugin";
 import { useOptionalDialog, type PromptContext } from "../../../../ui/dialog";
 import { isPlainKey } from "../../../../utils/keyboard";
 import { logFailure } from "../../../../utils/log-failure";
+import { useRowNotes } from "../../../../components/ui/row-notes";
 import { nextHeaderSort, type SortPreference } from "../../../../utils/sort-values";
 import { usePaneStateValue } from "../../../../state/app/context";
 import { useInlineTickerQuoteFact, useInlineTickers } from "../../../../state/hooks/inline-tickers";
@@ -63,6 +64,15 @@ import { useBuildoutDataRuntime } from "../data-runtime";
 
 const BUILDOUT_UPGRADE_URL = "https://thebuildout.ai/pricing";
 
+/** A star a row's company or site did not take: said by its star cell, in full at the top of its detail. */
+const favoriteNoteKey = (row: BuildoutRow) => favoriteKey(row) ?? rowKey(row);
+
+function favoriteFailureText(row: BuildoutRow, starring: boolean, error: unknown): string {
+  // The service may answer with a page of its own; its first line says enough.
+  const reason = error instanceof Error ? error.message.trim().split("\n")[0]!.slice(0, 240) : "";
+  return `Could not ${starring ? "star" : "unstar"} ${rowTitle(row)}${reason ? `: ${reason}` : "."}`;
+}
+
 
 const NO_TICKER_TEXTS: string[] = [];
 
@@ -86,6 +96,7 @@ export function BuildoutPane({ focused, width, height }: PaneProps) {
   const dialog = useOptionalDialog();
   const tableScrollRef = useRef<ScrollBoxRenderable | null>(null);
   const favoriteBusyKeysRef = useRef<Set<string>>(new Set());
+  const clearFavoriteNotesRef = useRef<() => void>(() => {});
   const [activeTab, setActiveTab] = usePaneStateValue<BuildoutTabId>("activeTab", "companies");
   const [selectedList, setSelectedList] = useState<BuildoutList | null>(null);
   const [selectedIndex, setSelectedIndex] = useState(0);
@@ -94,14 +105,13 @@ export function BuildoutPane({ focused, width, height }: PaneProps) {
   const [upgradeBusy, setUpgradeBusy] = useState(false);
   const [upgradeMessage, setUpgradeMessage] = useState<string | null>(null);
   const [favoriteBusyKey, setFavoriteBusyKey] = useState<string | null>(null);
-  const [favoriteMessage, setFavoriteMessage] = useState<string | null>(null);
 
   const handleBeforeLoad = useCallback(() => {
     favoriteBusyKeysRef.current.clear();
     setDetailRow(null);
     setSelectedList(null);
     setUpgradeMessage(null);
-    setFavoriteMessage(null);
+    clearFavoriteNotesRef.current();
     setFavoriteBusyKey(null);
   }, []);
   const {
@@ -136,7 +146,6 @@ export function BuildoutPane({ focused, width, height }: PaneProps) {
   useEffect(() => {
     setSelectedIndex(0);
     setDetailRow(null);
-    setFavoriteMessage(null);
     const nextColumn: BuildoutColumnId | null = activeTab === "companies"
       ? selectedList ? "marketCap" : null
       : activeTab === "sites" ? "capture" : "time";
@@ -147,6 +156,10 @@ export function BuildoutPane({ focused, width, height }: PaneProps) {
     () => sortRows(activeRows(state, activeTab, selectedList), sort.columnId, sort.direction),
     [activeTab, selectedList, sort, state],
   );
+  // Until the next star on that row, or a reload.
+  const favoriteNotes = useRowNotes<BuildoutRow, string>(rows, { key: favoriteNoteKey });
+  const { setNote: setFavoriteNote, noteFor: favoriteNoteFor } = favoriteNotes;
+  clearFavoriteNotesRef.current = favoriteNotes.clearNotes;
   const columns = useMemo(() => columnsForTab(activeTab, selectedList, canFavorite), [activeTab, canFavorite, selectedList]);
   const selectedRow = rows[selectedIndex] ?? rows[0] ?? null;
   // The table's cells carry their own badges; this catalog only serves the open
@@ -226,7 +239,6 @@ export function BuildoutPane({ focused, width, height }: PaneProps) {
     setSelectedIndex(0);
     setDetailRow(null);
     setUpgradeMessage(null);
-    setFavoriteMessage(null);
     setSort({ columnId: "marketCap", direction: "desc" });
     resetCompanies();
   }, [resetCompanies]);
@@ -236,7 +248,6 @@ export function BuildoutPane({ focused, width, height }: PaneProps) {
     setSelectedIndex(0);
     setDetailRow(null);
     setUpgradeMessage(null);
-    setFavoriteMessage(null);
     setSort({ columnId: null, direction: "asc" });
   }, []);
 
@@ -265,20 +276,21 @@ export function BuildoutPane({ focused, width, height }: PaneProps) {
     const next = !previous;
     favoriteBusyKeysRef.current.add(key);
     setFavoriteBusyKey(key);
-    setFavoriteMessage(null);
+    setFavoriteNote(key, null);
     updateFavorite(key, next);
 
     try {
       const response = await buildoutApi<{ starred?: boolean }>(path, favoriteToken, { method: "POST" });
       updateFavorite(key, typeof response.starred === "boolean" ? response.starred : next);
-    } catch {
+    } catch (error) {
+      // The star goes back, and the row says it did not take.
       updateFavorite(key, previous);
-      setFavoriteMessage("favorite failed");
+      setFavoriteNote(key, favoriteFailureText(row, next, error));
     } finally {
       favoriteBusyKeysRef.current.delete(key);
       setFavoriteBusyKey((current) => current === key ? null : current);
     }
-  }, [favoriteToken, updateFavorite]);
+  }, [favoriteToken, setFavoriteNote, updateFavorite]);
 
   const toggleFavoriteRow = useCallback((row: BuildoutRow | null) => {
     if (!canFavorite || !row || !favoriteKey(row)) return false;
@@ -314,14 +326,13 @@ export function BuildoutPane({ focused, width, height }: PaneProps) {
 
   usePaneFooter("buildout", () => ({
     info: updateBuildoutFooterInfo(state, activeTab, selectedList, {
-      favoriteMessage,
       upgradeMessage,
       partialList,
       onUpgrade: startUpgrade,
       quoteFreshness: detailQuoteFreshness,
     }),
     hints: footerHints,
-  }), [activeTab, detailQuoteFreshness, favoriteMessage, footerHints, partialList, selectedList, startUpgrade, state, upgradeMessage]);
+  }), [activeTab, detailQuoteFreshness, footerHints, partialList, selectedList, startUpgrade, state, upgradeMessage]);
 
   const activePage = state.status === "ready" ? activeBuildoutPage(state, activeTab, selectedList) : null;
   const loadMoreActiveRows = useTableLoadMore(
@@ -367,8 +378,9 @@ export function BuildoutPane({ focused, width, height }: PaneProps) {
     rowState: { selected: boolean },
   ) => renderBuildoutCell(row, column, rowState, {
     favoriteBusyKey,
+    favoriteFailed: favoriteNoteFor(row) !== null,
     toggleFavorite,
-  }), [favoriteBusyKey, toggleFavorite]);
+  }), [favoriteBusyKey, favoriteNoteFor, toggleFavorite]);
 
   const { strip: tabStrip, rows: tabRows } = usePaneTabs({
     tabs,
@@ -401,6 +413,7 @@ export function BuildoutPane({ focused, width, height }: PaneProps) {
       detailContent={(
         <BuildoutDetail
           row={detailRow}
+          note={detailRow ? favoriteNoteFor(detailRow) : null}
           width={width}
           height={height}
           catalog={tickerCatalog}

package/src/plugins/builtin/buildout/pane/status.tsx

@@ -26,7 +26,6 @@ export function updateBuildoutFooterInfo(
   activeTab: BuildoutTabId,
   selectedList: BuildoutList | null,
   messages: {
-    favoriteMessage: string | null;
     upgradeMessage: string | null;
     partialList: boolean;
     onUpgrade: () => void;
@@ -66,9 +65,6 @@ export function updateBuildoutFooterInfo(
   if (page?.error) {
     info.push({ id: "page-error", parts: [{ text: page.error, tone: "negative" }] });
   }
-  if (messages.favoriteMessage) {
-    info.push({ id: "favorite-error", parts: [{ text: messages.favoriteMessage, tone: "negative" }] });
-  }
   if (messages.upgradeMessage) {
     info.push({ id: "upgrade-error", parts: [{ text: messages.upgradeMessage, tone: "negative" }] });
   }

package/src/plugins/builtin/builtin-plugin-meta.ts

@@ -107,7 +107,7 @@ export const cryptoPluginMeta = {
   stateId: "market-overview",
   name: "Crypto & Perps",
   version: "1.0.0",
-  description: "Top crypto assets by market cap, and perpetual funding, open interest and premiums.",
+  description: "Top crypto assets by market cap, daily spot bitcoin and ether ETF flows, and perpetual funding, open interest and premiums.",
   toggleable: true,
 };
 

package/src/plugins/builtin/catalysts/detail.tsx

@@ -6,7 +6,7 @@ import { usePluginPaneState } from "../../../public/react";
 import { useThemeColors } from "../../../theme/theme-context";
 import { Box, ScrollBox, Text, useRendererHost, useUiCapabilities, type ScrollBoxRenderable } from "../../../ui";
 import { UpgradeLabel } from "../shared/locked-rows";
-import { catalystAgency, catalystChangeText, catalystDate, catalystDateBasis, catalystFacts, catalystLabel } from "./model";
+import { CATALYST_DATE_WITHHELD, catalystAgency, catalystChangeText, catalystDate, catalystDateBasis, catalystDateWithheld, catalystFacts, catalystLabel } from "./model";
 import { humanLabel } from "../shared/research-cells";
 import { usePaneRefreshKey } from "../../../components/data-table/table-pane";
 import { loadCatalystDetail } from "./client";
@@ -23,7 +23,8 @@ function Evidence({ event, width, height }: { event: CatalystEvent; width: numbe
     <KeyValueRow label="Status" value={humanLabel(event.status)} detail={`Revision ${event.revision}`} labelWidth={18} />
     <KeyValueRow label="Announced" value={catalystDate(event, "announced")} labelWidth={18} />
     {event.effectiveDate ? <KeyValueRow label={catalystDateBasis(event, "effective")} value={catalystDate(event, "effective")} labelWidth={18} /> : null}
-    {event.deadlineDate ? <KeyValueRow label={catalystDateBasis(event, "deadline")} value={catalystDate(event, "deadline")} labelWidth={18} /> : null}
+    {event.deadlineDate ? <KeyValueRow label={catalystDateBasis(event, "deadline")} value={catalystDate(event, "deadline")} labelWidth={18} />
+      : catalystDateWithheld(event) ? <KeyValueRow label={catalystLabel("deadline")} value={CATALYST_DATE_WITHHELD} labelWidth={18} /> : null}
     <KeyValueRow label="Observed (UTC)" value={catalystDate(event, "observed")} labelWidth={18} />
     <KeyValueRow label="Confidence" value={`${Math.round(event.confidence * 100)}%`} labelWidth={18} />
     {facts.map((fact) => <KeyValueRow key={fact.label} label={fact.label} value={fact.value} labelWidth={18} />)}