gloomberb 0.5.1 → 0.6.1

package/src/plugins/ibkr/trade-tab.tsx

@@ -1,10 +1,16 @@
-import { TextAttributes } from "@opentui/core";
-import { useKeyboard } from "@opentui/react";
-import { useDialog } from "@opentui-ui/dialog/react";
+import { Box, ScrollBox, Text } from "../../ui";
+import { TextAttributes } from "../../ui";
+import { useShortcut } from "../../react/input";
+import { useDialog } from "../../ui/dialog";
 import { useCallback, useEffect, useState } from "react";
-import { PriceSelectorDialog } from "../../components";
+import { PriceSelectorDialog, usePaneFooter } from "../../components";
 import { Button } from "../../components/ui/button";
-import { useAppState, usePaneCollection, usePaneInstanceId, usePaneTicker } from "../../state/app-context";
+import {
+  useAppSelector,
+  usePaneCollection,
+  usePaneInstanceId,
+  usePaneTicker,
+} from "../../state/app-context";
 import { colors, hoverBg } from "../../theme/colors";
 import type { DetailTabProps } from "../../types/plugin";
 import type { BrokerOrderRequest, BrokerOrderType } from "../../types/trading";
@@ -43,7 +49,8 @@ import {
 } from "./trade-utils";
 
 export function TradeTab({ focused, width, onCapture }: DetailTabProps) {
-  const { state } = useAppState();
+  const config = useAppSelector((state) => state.config);
+  const brokerAccounts = useAppSelector((state) => state.brokerAccounts);
   const paneId = usePaneInstanceId();
   const { collectionId } = usePaneCollection(paneId);
   const { ticker, financials } = usePaneTicker(paneId);
@@ -68,14 +75,14 @@ export function TradeTab({ focused, width, onCapture }: DetailTabProps) {
     availableAccounts,
     gatewayRequiredMessage,
   } = useIbkrGatewaySelection(
-    state.config,
-    state.brokerAccounts,
+    config,
+    brokerAccounts,
     collectionId,
     preferredInstanceId,
   );
   const inferredAccountId = selectedInstance
     ? inferDraftAccountId(
-      state.config,
+      config,
       collectionId,
       availableAccounts,
       selectedInstance.id,
@@ -138,7 +145,7 @@ export function TradeTab({ focused, width, onCapture }: DetailTabProps) {
   useEffect(() => {
     if (!symbol || !ticker || !isGatewayMode || availableAccounts.length === 0 || ticketState.draft.accountId || !selectedInstance) return;
     const inferred = inferDraftAccountId(
-      state.config,
+      config,
       collectionId,
       availableAccounts,
       selectedInstance.id,
@@ -154,7 +161,7 @@ export function TradeTab({ focused, width, onCapture }: DetailTabProps) {
     availableAccounts,
     ticketState.draft.accountId,
     selectedInstance,
-    state.config,
+    config,
     collectionId,
     tradeState.accountId,
   ]);
@@ -170,7 +177,7 @@ export function TradeTab({ focused, width, onCapture }: DetailTabProps) {
       setTradeTicketBusy(symbol, true, ticker);
       await refreshGatewayData(selectedInstance);
       const inferred = inferDraftAccountId(
-        state.config,
+        config,
         collectionId,
         availableAccounts,
         selectedInstance.id,
@@ -192,7 +199,7 @@ export function TradeTab({ focused, width, onCapture }: DetailTabProps) {
     normalizedConfig,
     isGatewayMode,
     gatewayRequiredMessage,
-    state.config,
+    config,
     collectionId,
     availableAccounts,
     tradeState.accountId,
@@ -222,14 +229,14 @@ export function TradeTab({ focused, width, onCapture }: DetailTabProps) {
           choices={gatewayInstances.map((instance) => ({
             id: instance.id,
             label: instance.label,
-            desc: "Gateway / TWS",
+            description: "Gateway / TWS",
           }))}
         />
       ),
     });
     if (!selected) return;
 
-    const instance = getBrokerInstance(state.config.brokerInstances, selected);
+    const instance = getBrokerInstance(config.brokerInstances, selected);
     if (!instance) return;
     updateTradingPaneState({
       brokerInstanceId: instance.id,
@@ -253,7 +260,7 @@ export function TradeTab({ focused, width, onCapture }: DetailTabProps) {
       lastError: undefined,
       lastInfo: undefined,
     }));
-  }, [symbol, ticker, lockedBrokerInstanceId, gatewayInstances, dialog, state.config.brokerInstances]);
+  }, [symbol, ticker, lockedBrokerInstanceId, gatewayInstances, dialog, config.brokerInstances]);
 
   const chooseInstrument = useCallback(async () => {
     if (!symbol || !ticker) return;
@@ -292,7 +299,7 @@ export function TradeTab({ focused, width, onCapture }: DetailTabProps) {
       const choices = results.slice(0, 12).map((result, index) => ({
         id: String(index),
         label: `${result.symbol} ${result.type}`.trim(),
-        desc: `${selectedInstance.label} · ${result.name} · ${result.exchange || "SMART"}`,
+        description: `${selectedInstance.label} · ${result.name} · ${result.exchange || "SMART"}`,
       }));
       if (choices.length === 0) {
         setTradeTicketMessage(symbol, undefined, `No IBKR contracts matched "${search}".`, ticker);
@@ -322,7 +329,7 @@ export function TradeTab({ focused, width, onCapture }: DetailTabProps) {
     }
 
     const nextAccounts = getKnownIbkrAccounts(
-      state.brokerAccounts,
+      brokerAccounts,
       selectedInstance.id,
       gatewayService.getSnapshot().accounts,
     );
@@ -339,7 +346,7 @@ export function TradeTab({ focused, width, onCapture }: DetailTabProps) {
           choices={nextAccounts.map((account) => ({
             id: account.accountId,
             label: `${selectedInstance.label} → ${account.accountId}`,
-            desc: `${formatCurrency(account.netLiquidation || 0, account.currency || "USD")} net liq`,
+            description: `${formatCurrency(account.netLiquidation || 0, account.currency || "USD")} net liq`,
           }))}
         />
       ),
@@ -355,6 +362,7 @@ export function TradeTab({ focused, width, onCapture }: DetailTabProps) {
     gatewayService,
     isGatewayMode,
     availableAccounts,
+    brokerAccounts,
     refresh,
     dialog,
   ]);
@@ -427,10 +435,10 @@ export function TradeTab({ focused, width, onCapture }: DetailTabProps) {
           {...ctx}
           title="Order Type"
           choices={[
-            { id: "MKT", label: "Market", desc: "Execute at market price" },
-            { id: "LMT", label: "Limit", desc: "Set a limit price" },
-            { id: "STP", label: "Stop", desc: "Trigger at a stop price" },
-            { id: "STP LMT", label: "Stop Limit", desc: "Trigger a limit order at a stop price" },
+            { id: "MKT", label: "Market", description: "Execute at market price" },
+            { id: "LMT", label: "Limit", description: "Set a limit price" },
+            { id: "STP", label: "Stop", description: "Trigger at a stop price" },
+            { id: "STP LMT", label: "Stop Limit", description: "Trigger a limit order at a stop price" },
           ]}
         />
       ),
@@ -495,7 +503,7 @@ export function TradeTab({ focused, width, onCapture }: DetailTabProps) {
       updateTradingPaneState({ accountId: request.accountId });
       setTradeTicketDraft(symbol, { brokerInstanceId: selectedInstance.id, accountId: request.accountId }, ticker);
       setTradeTicketPreview(symbol, preview, ticker);
-      setTradeTicketMessage(symbol, "Review the what-if preview, then press Enter again to submit.", undefined, ticker);
+      setTradeTicketMessage(symbol, "Review the what-if preview, then submit when ready.", undefined, ticker);
     } catch (error: any) {
       const message = error?.message || "Failed to preview order.";
       setTradeTicketMessage(symbol, undefined, message.replace("Timeout has occurred", "Preview timed out — try again."), ticker);
@@ -534,7 +542,7 @@ export function TradeTab({ focused, width, onCapture }: DetailTabProps) {
     }
   }, [draftRequest, symbol, ticker, selectedInstance, normalizedConfig, gatewayService, ticketState.preview, ticketState.editingOrderId, previewOrder, refresh]);
 
-  useKeyboard((event) => {
+  useShortcut((event) => {
     if (!focused || !symbol || !ticker) return;
 
     const isEnter = event.name === "enter" || event.name === "return";
@@ -605,14 +613,6 @@ export function TradeTab({ focused, width, onCapture }: DetailTabProps) {
     }
   });
 
-  if (!ticker || !symbol) {
-    return (
-      <box flexGrow={1} alignItems="center" justifyContent="center">
-        <text fg={colors.textDim}>Select a ticker to draft an IBKR trade.</text>
-      </box>
-    );
-  }
-
   const showLimit = isLimitOrder(ticketState.draft.orderType);
   const showStop = isStopOrder(ticketState.draft.orderType);
   const hasProfile = Boolean(selectedInstance);
@@ -628,14 +628,16 @@ export function TradeTab({ focused, width, onCapture }: DetailTabProps) {
     ? Math.max(16, Math.floor((ticketPanelWidth - 5) / 4))
     : fieldWidth;
   const fieldTextWidth = Math.max(8, fieldWidth - 3);
-  const activeContract = ticketState.draft.contract.symbol ? ticketState.draft.contract : normalizeContract(ticker);
+  const activeContract = ticketState.draft.contract.symbol
+    ? ticketState.draft.contract
+    : ticker ? normalizeContract(ticker) : ticketState.draft.contract;
   const hasContract = Boolean(activeContract.symbol);
   const hasAccount = Boolean(currentAccountId);
   const hasPreview = Boolean(ticketState.preview);
   const previewTextWidth = Math.max(18, (previewPanelWidth ?? Math.max(34, width - 6)) - 4);
   const contractValue = truncateText(formatContractLabel(activeContract), fieldTextWidth);
   const contractMeta = truncateText(
-    ticketState.contractName || ticker.metadata.name || "Using current ticker",
+    ticketState.contractName || ticker?.metadata.name || "Using current ticker",
     Math.max(fieldTextWidth * Math.max(2, fieldsPerRow), 18),
   );
   const connectionTone: TradeTone = gatewaySnapshot.status.state === "connected"
@@ -654,7 +656,7 @@ export function TradeTab({ focused, width, onCapture }: DetailTabProps) {
       || ticketState.lastInfo
       || gatewaySnapshot.status.message
       || gatewaySnapshot.lastError
-      || "Click a workflow step or field to activate the ticket, then preview before submit.";
+      || "Choose a workflow step or field, then preview before submit.";
   const previewTone: TradeTone = !ticketState.preview
     ? "neutral"
     : ticketState.preview.warningText
@@ -683,8 +685,58 @@ export function TradeTab({ focused, width, onCapture }: DetailTabProps) {
       ? "accent"
       : "neutral";
   const ticketHint = interactive
-    ? "Esc releases the ticket. Field shortcuts stay active while captured."
-    : "Click a field or press Enter to edit. Shortcuts are shown inline.";
+    ? "Field shortcuts stay active while captured."
+    : "Click a field to edit. Shortcuts are in the pane footer.";
+
+  usePaneFooter("ibkr-trade", () => ({
+    info: [
+      { id: "next", parts: [{ text: nextStep, tone: workflowTone === "positive" ? "positive" : workflowTone === "accent" ? "value" : "muted", bold: workflowTone !== "neutral" }] },
+      { id: "ticket", parts: [{ text: interactive ? "captured" : "standby", tone: interactive ? "positive" : "muted" }] },
+      ...(statusText ? [{ id: "status", parts: [{ text: statusText, tone: statusTone === "negative" ? "negative" as const : statusTone === "positive" ? "positive" as const : "muted" as const }] }] : []),
+    ],
+    hints: [
+      ...(!ticketState.busy ? [
+        { id: "refresh", key: "r", label: "efresh", onPress: () => refresh().catch(() => {}) },
+        { id: "profile", key: "i", label: "profile", onPress: () => chooseBrokerInstance().catch(() => {}) },
+        { id: "account", key: "a", label: "ccount", onPress: () => chooseAccount().catch(() => {}) },
+      ] : []),
+      ...(!ticketState.busy && symbol && ticker ? [
+        { id: "side", key: "b/v", label: "side", onPress: () => setTradeTicketDraft(symbol, { action: ticketState.draft.action === "BUY" ? "SELL" : "BUY" }, ticker) },
+        { id: "quantity", key: "q", label: "ty", onPress: () => editNumericField("Quantity", ticketState.draft.quantity, (value) => { if (value != null) setTradeTicketDraft(symbol, { quantity: value }, ticker); }).catch(() => {}) },
+        { id: "type", key: "t", label: "ype", onPress: () => editOrderType().catch(() => {}) },
+        ...(showLimit ? [{ id: "limit", key: "l", label: "imit", onPress: () => editPriceField("Limit Price", ticketState.draft.limitPrice, (value) => { setTradeTicketDraft(symbol, { limitPrice: value }, ticker); }).catch(() => {}) }] : []),
+        ...(showStop ? [{ id: "stop", key: "x", label: "stop", onPress: () => editPriceField("Stop Price", ticketState.draft.stopPrice, (value) => { setTradeTicketDraft(symbol, { stopPrice: value }, ticker); }).catch(() => {}) }] : []),
+        { id: "preview", key: "p", label: "review", onPress: () => previewOrder().catch(() => {}) },
+      ] : []),
+    ],
+  }), [
+    chooseAccount,
+    chooseBrokerInstance,
+    editNumericField,
+    editOrderType,
+    editPriceField,
+    interactive,
+    nextStep,
+    previewOrder,
+    refresh,
+    showLimit,
+    showStop,
+    statusText,
+    statusTone,
+    symbol,
+    ticketState.busy,
+    ticketState.draft,
+    ticker,
+    workflowTone,
+  ]);
+
+  if (!ticker || !symbol) {
+    return (
+      <Box flexGrow={1} alignItems="center" justifyContent="center">
+        <Text fg={colors.textDim}>Select a ticker to draft an IBKR trade.</Text>
+      </Box>
+    );
+  }
 
   const renderFieldPill = ({
     id,
@@ -731,7 +783,7 @@ export function TradeTab({ focused, width, onCapture }: DetailTabProps) {
         : valueColor ?? (disabled ? colors.textMuted : colors.text);
 
     return (
-      <box
+      <Box
         key={id}
         width={itemWidth}
         minWidth={16}
@@ -741,18 +793,18 @@ export function TradeTab({ focused, width, onCapture }: DetailTabProps) {
         paddingX={1}
         marginRight={1}
         onMouseMove={() => {
-          if (!disabled) setHoveredField(id);
+          if (!disabled) setHoveredField((current) => (current === id ? current : id));
         }}
         onMouseDown={disabled ? undefined : () => {
           enterInteractive();
           onPress?.();
         }}
       >
-        <text fg={labelColor}>{label}</text>
-        <text fg={resolvedValueColor} attributes={valueAttributes}>
+        <Text fg={labelColor}>{label}</Text>
+        <Text fg={resolvedValueColor} attributes={valueAttributes}>
           {` ${truncateText(value, valueWidth)}`}
-        </text>
-      </box>
+        </Text>
+      </Box>
     );
   };
 
@@ -772,7 +824,7 @@ export function TradeTab({ focused, width, onCapture }: DetailTabProps) {
     const palette = getTradeTonePalette(tone);
 
     return (
-      <box
+      <Box
         key={id}
         height={1}
         flexDirection="row"
@@ -781,14 +833,14 @@ export function TradeTab({ focused, width, onCapture }: DetailTabProps) {
         marginRight={1}
         onMouseDown={onPress}
       >
-        <text fg={tone === "neutral" ? colors.textDim : palette.text}>{label}</text>
-        <text fg={palette.text} attributes={TextAttributes.BOLD}>{` ${value}`}</text>
-      </box>
+        <Text fg={tone === "neutral" ? colors.textDim : palette.text}>{label}</Text>
+        <Text fg={palette.text} attributes={TextAttributes.BOLD}>{` ${value}`}</Text>
+      </Box>
     );
   };
 
   const renderPreviewMetric = (label: string, value: string, tone: TradeTone = "neutral") => (
-    <box
+    <Box
       key={label}
       width={previewMetricWidth}
       height={1}
@@ -796,35 +848,35 @@ export function TradeTab({ focused, width, onCapture }: DetailTabProps) {
       paddingX={1}
       marginRight={1}
     >
-      <text fg={tone === "negative" ? colors.negative : tone === "positive" ? colors.positive : colors.text}>
+      <Text fg={tone === "negative" ? colors.negative : tone === "positive" ? colors.positive : colors.text}>
         {truncateText(`${label} ${value}`, Math.max(6, previewMetricWidth - 2))}
-      </text>
-    </box>
+      </Text>
+    </Box>
   );
 
   return (
-    <scrollbox flexGrow={1} scrollY>
-      <box
+    <ScrollBox flexGrow={1} scrollY>
+      <Box
         flexDirection="column"
         paddingX={1}
         paddingBottom={1}
         gap={1}
         onMouseDown={!interactive ? enterInteractive : undefined}
       >
-        <box flexDirection="row" flexWrap="wrap" justifyContent="space-between">
-          <box flexDirection="column" marginBottom={1}>
-            <box height={1} flexDirection="row">
-              <text attributes={TextAttributes.BOLD} fg={colors.textBright}>{`Trade ${ticker.metadata.ticker}`}</text>
+        <Box flexDirection="row" flexWrap="wrap" justifyContent="space-between">
+          <Box flexDirection="column" marginBottom={1}>
+            <Box height={1} flexDirection="row">
+              <Text attributes={TextAttributes.BOLD} fg={colors.textBright}>{`Trade ${ticker.metadata.ticker}`}</Text>
               {ticker.metadata.name && ticker.metadata.name !== ticker.metadata.ticker && (
-                <text fg={colors.textDim}>{` · ${ticker.metadata.name}`}</text>
+                <Text fg={colors.textDim}>{` · ${ticker.metadata.name}`}</Text>
               )}
-            </box>
-            <box height={1}>
-              <text fg={colors.textMuted}>{formatQuoteSummary(financials?.quote, { assetCategory: ticker.metadata.assetCategory })}</text>
-            </box>
-          </box>
+            </Box>
+            <Box height={1}>
+              <Text fg={colors.textMuted}>{formatQuoteSummary(financials?.quote, { assetCategory: ticker.metadata.assetCategory })}</Text>
+            </Box>
+          </Box>
 
-          <box flexDirection="row" flexWrap="wrap" justifyContent="flex-end">
+          <Box flexDirection="row" flexWrap="wrap" justifyContent="flex-end">
             <TradeBadge
               label="Broker"
               value={selectedInstance ? `${selectedInstance.label} ${isGatewayMode ? "Gateway" : "Flex"}` : "Select profile"}
@@ -852,10 +904,10 @@ export function TradeTab({ focused, width, onCapture }: DetailTabProps) {
                 chooseAccount().catch(() => {});
               }}
             />
-          </box>
-        </box>
+          </Box>
+        </Box>
 
-        <box flexDirection="row" flexWrap="wrap">
+        <Box flexDirection="row" flexWrap="wrap">
           {renderSummaryPill({ id: "next", label: "Next", value: nextStep, tone: workflowTone })}
           {renderSummaryPill({
             id: "ticket",
@@ -866,21 +918,20 @@ export function TradeTab({ focused, width, onCapture }: DetailTabProps) {
           })}
           <Button
             label="Refresh"
-            shortcut="r"
             variant="ghost"
             disabled={ticketState.busy}
             onPress={() => refresh().catch(() => {})}
           />
-        </box>
+        </Box>
 
-        <box backgroundColor={getTradeTonePalette(statusTone).background} paddingX={1}>
-          <text fg={ticketState.lastError ? colors.negative : ticketState.isSuccess ? colors.positive : colors.text}>
+        <Box backgroundColor={getTradeTonePalette(statusTone).background} paddingX={1}>
+          <Text fg={ticketState.lastError ? colors.negative : ticketState.isSuccess ? colors.positive : colors.text}>
             {statusText}
-          </text>
-        </box>
+          </Text>
+        </Box>
 
-        <box flexDirection={wideLayout ? "row" : "column"} alignItems="stretch" gap={1}>
-          <box
+        <Box flexDirection={wideLayout ? "row" : "column"} alignItems="stretch" gap={1}>
+          <Box
             flexDirection="column"
             flexGrow={1}
             width={wideLayout ? ticketPanelWidth : undefined}
@@ -889,17 +940,17 @@ export function TradeTab({ focused, width, onCapture }: DetailTabProps) {
             borderColor={interactive ? colors.borderFocused : colors.border}
             paddingX={1}
           >
-            <box height={1} flexDirection="row">
-              <text fg={colors.textBright} attributes={TextAttributes.BOLD}>Ticket</text>
-              <box flexGrow={1} />
-              <text fg={interactive ? colors.positive : colors.textMuted}>
-                {interactive ? "Captured" : "Click field / Enter"}
-              </text>
-            </box>
-            <text fg={colors.textMuted}>{truncateText(ticketHint, Math.max(ticketPanelWidth - 4, 24))}</text>
-            <box height={1} />
+            <Box height={1} flexDirection="row">
+              <Text fg={colors.textBright} attributes={TextAttributes.BOLD}>Ticket</Text>
+              <Box flexGrow={1} />
+              <Text fg={interactive ? colors.positive : colors.textMuted}>
+                {interactive ? "Captured" : "Ready"}
+              </Text>
+            </Box>
+            <Text fg={colors.textMuted}>{truncateText(ticketHint, Math.max(ticketPanelWidth - 4, 24))}</Text>
+            <Box height={1} />
 
-            <box flexDirection="row" flexWrap="wrap">
+            <Box flexDirection="row" flexWrap="wrap">
               {renderFieldPill({
                 id: "profile",
                 label: "Profile",
@@ -924,12 +975,12 @@ export function TradeTab({ focused, width, onCapture }: DetailTabProps) {
                 widthOverride: coreFieldWidth,
                 onPress: () => chooseAccount().catch(() => {}),
               })}
-            </box>
-            <box height={1} />
-            <box flexDirection="row" flexWrap="wrap">
+            </Box>
+            <Box height={1} />
+            <Box flexDirection="row" flexWrap="wrap">
               {renderFieldPill({
                 id: "action",
-                label: "Side [b/v]",
+                label: "Side",
                 value: ticketState.draft.action,
                 valueColor: ticketState.draft.action === "BUY" ? colors.positive : colors.negative,
                 valueAttributes: TextAttributes.BOLD,
@@ -940,14 +991,14 @@ export function TradeTab({ focused, width, onCapture }: DetailTabProps) {
               })}
               {renderFieldPill({
                 id: "orderType",
-                label: "Type [t]",
+                label: "Type",
                 value: ticketState.draft.orderType,
                 widthOverride: orderFieldWidth,
                 onPress: () => editOrderType().catch(() => {}),
               })}
               {renderFieldPill({
                 id: "quantity",
-                label: "Qty [q]",
+                label: "Qty",
                 value: formatMarketQuantity(ticketState.draft.quantity, {
                   assetCategory: ticker.metadata.assetCategory,
                   contractSecType: activeContract.secType,
@@ -962,7 +1013,7 @@ export function TradeTab({ focused, width, onCapture }: DetailTabProps) {
               })}
               {showLimit && renderFieldPill({
                 id: "limitPrice",
-                label: "Limit [l]",
+                label: "Limit",
                 value: ticketState.draft.limitPrice != null
                   ? formatMarketPrice(ticketState.draft.limitPrice, {
                     assetCategory: ticker.metadata.assetCategory,
@@ -979,7 +1030,7 @@ export function TradeTab({ focused, width, onCapture }: DetailTabProps) {
               })}
               {showStop && renderFieldPill({
                 id: "stopPrice",
-                label: "Stop [x]",
+                label: "Stop",
                 value: ticketState.draft.stopPrice != null
                   ? formatMarketPrice(ticketState.draft.stopPrice, {
                     assetCategory: ticker.metadata.assetCategory,
@@ -1007,12 +1058,12 @@ export function TradeTab({ focused, width, onCapture }: DetailTabProps) {
                 valueColor: colors.textBright,
                 widthOverride: orderFieldWidth,
               })}
-            </box>
-            <box height={1} />
-            <text fg={colors.textMuted}>{contractMeta}</text>
-          </box>
+            </Box>
+            <Box height={1} />
+            <Text fg={colors.textMuted}>{contractMeta}</Text>
+          </Box>
 
-          <box
+          <Box
             flexDirection="column"
             width={previewPanelWidth}
             minWidth={34}
@@ -1021,16 +1072,16 @@ export function TradeTab({ focused, width, onCapture }: DetailTabProps) {
             borderColor={getTradeTonePalette(previewTone).border}
             paddingX={1}
           >
-            <box height={1} flexDirection="row">
-              <text fg={colors.textBright} attributes={TextAttributes.BOLD}>Preview</text>
-              <box flexGrow={1} />
-              <text fg={getTradeTonePalette(previewTone).text}>{previewHeading}</text>
-            </box>
-            <text fg={ticketState.preview?.warningText ? colors.negative : colors.textMuted}>
+            <Box height={1} flexDirection="row">
+              <Text fg={colors.textBright} attributes={TextAttributes.BOLD}>Preview</Text>
+              <Box flexGrow={1} />
+              <Text fg={getTradeTonePalette(previewTone).text}>{previewHeading}</Text>
+            </Box>
+            <Text fg={ticketState.preview?.warningText ? colors.negative : colors.textMuted}>
               {truncateText(formatPreviewSummary(ticketState.preview), previewTextWidth)}
-            </text>
+            </Text>
 
-            <box flexDirection="row" flexWrap="wrap">
+            <Box flexDirection="row" flexWrap="wrap">
               {renderPreviewMetric(
                 "Fee",
                 ticketState.preview?.commission != null
@@ -1041,28 +1092,26 @@ export function TradeTab({ focused, width, onCapture }: DetailTabProps) {
               {renderPreviewMetric("Maint", formatPreviewMetric(ticketState.preview?.maintMarginBefore, ticketState.preview?.maintMarginAfter))}
               {renderPreviewMetric("Equity", formatPreviewMetric(ticketState.preview?.equityWithLoanBefore, ticketState.preview?.equityWithLoanAfter))}
               {ticketState.preview?.warningText && renderPreviewMetric("Warn", ticketState.preview.warningText, "negative")}
-            </box>
+            </Box>
 
-            <box flexDirection="row" flexWrap="wrap">
+            <Box flexDirection="row" flexWrap="wrap">
               <Button
                 label="Preview"
-                shortcut="p"
                 variant="secondary"
                 disabled={ticketState.busy}
                 onPress={() => previewOrder().catch(() => {})}
               />
-              <box width={1} />
+              <Box width={1} />
               <Button
                 label={ticketState.editingOrderId ? "Submit Change" : "Submit Order"}
-                shortcut="Enter"
                 variant="primary"
                 disabled={!ticketState.preview || ticketState.busy}
                 onPress={() => submitOrder().catch(() => {})}
               />
-            </box>
-          </box>
-        </box>
-      </box>
-    </scrollbox>
+            </Box>
+          </Box>
+        </Box>
+      </Box>
+    </ScrollBox>
   );
 }