gloomberb 0.7.5 → 0.8.0

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

@@ -0,0 +1,167 @@
+import { Button } from "../../../../components/ui/button";
+import { Box, Text } from "../../../../ui";
+import { TextAttributes } from "../../../../ui";
+import { colors } from "../../../../theme/colors";
+import type { TickerFinancials } from "../../../../types/financials";
+import type { TickerRecord } from "../../../../types/ticker";
+import type { BrokerAccount } from "../../../../types/trading";
+import { formatCurrency } from "../../../../utils/format";
+import { TradeBadge } from "../badge";
+import {
+  formatQuoteSummary,
+  getTradeTonePalette,
+  truncateTradeText as truncateText,
+  type TradeTone,
+} from "../utils";
+
+function TradeSummaryPill({
+  id,
+  label,
+  value,
+  tone = "neutral",
+  onPress,
+}: {
+  id: string;
+  label: string;
+  value: string;
+  tone?: TradeTone;
+  onPress?: () => void;
+}) {
+  const palette = getTradeTonePalette(tone);
+
+  return (
+    <Box
+      key={id}
+      height={1}
+      flexDirection="row"
+      backgroundColor={palette.background}
+      paddingX={1}
+      marginRight={1}
+      onMouseDown={onPress}
+    >
+      <Text fg={tone === "neutral" ? colors.textDim : palette.text}>{label}</Text>
+      <Text fg={palette.text} attributes={TextAttributes.BOLD}>{` ${value}`}</Text>
+    </Box>
+  );
+}
+
+export function TradeTabHeader({
+  ticker,
+  financials,
+  profileLabel,
+  isGatewayMode,
+  connectionTone,
+  currentAccountId,
+  lockedBrokerInstanceId,
+  hasAccount,
+  activeAccount,
+  interactive,
+  nextStep,
+  workflowTone,
+  statusTone,
+  statusText,
+  busy,
+  hasError,
+  isSuccess,
+  onEnterInteractive,
+  onExitInteractive,
+  onChooseBrokerInstance,
+  onChooseAccount,
+  onRefresh,
+}: {
+  ticker: TickerRecord;
+  financials?: TickerFinancials | null;
+  profileLabel?: string;
+  isGatewayMode: boolean;
+  connectionTone: TradeTone;
+  currentAccountId?: string;
+  lockedBrokerInstanceId?: string;
+  hasAccount: boolean;
+  activeAccount?: BrokerAccount;
+  interactive: boolean;
+  nextStep: string;
+  workflowTone: TradeTone;
+  statusTone: TradeTone;
+  statusText: string;
+  busy: boolean;
+  hasError: boolean;
+  isSuccess: boolean;
+  onEnterInteractive: () => void;
+  onExitInteractive: () => void;
+  onChooseBrokerInstance: () => void;
+  onChooseAccount: () => void;
+  onRefresh: () => void;
+}) {
+  return (
+    <>
+      <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>
+            )}
+          </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">
+          <TradeBadge
+            label="Broker"
+            value={profileLabel ? `${profileLabel} ${isGatewayMode ? "Gateway" : "Flex"}` : "Select profile"}
+            tone={connectionTone}
+            onPress={() => {
+              onEnterInteractive();
+              onChooseBrokerInstance();
+            }}
+          />
+          <TradeBadge
+            label="Account"
+            value={currentAccountId || (lockedBrokerInstanceId ? "Locked" : "Select")}
+            tone={hasAccount ? "accent" : "neutral"}
+            onPress={() => {
+              onEnterInteractive();
+              onChooseAccount();
+            }}
+          />
+          <TradeBadge
+            label="Net Liq"
+            value={activeAccount ? formatCurrency(activeAccount.netLiquidation || 0, activeAccount.currency || "USD") : "—"}
+            tone="neutral"
+            onPress={activeAccount ? undefined : () => {
+              onEnterInteractive();
+              onChooseAccount();
+            }}
+          />
+        </Box>
+      </Box>
+
+      <Box flexDirection="row" flexWrap="wrap">
+        <TradeSummaryPill id="next" label="Next" value={nextStep} tone={workflowTone} />
+        <TradeSummaryPill
+          id="ticket"
+          label="Ticket"
+          value={interactive ? "Captured" : "Standby"}
+          tone={interactive ? "accent" : "neutral"}
+          onPress={() => (interactive ? onExitInteractive() : onEnterInteractive())}
+        />
+        <Button
+          label="Refresh"
+          variant="ghost"
+          disabled={busy}
+          onPress={onRefresh}
+        />
+      </Box>
+
+      <Box backgroundColor={getTradeTonePalette(statusTone).background} paddingX={1}>
+        <Text fg={hasError ? colors.negative : isSuccess ? colors.positive : colors.text}>
+          {truncateText(statusText, 160)}
+        </Text>
+      </Box>
+    </>
+  );
+}

package/src/plugins/ibkr/trade/tab/index.test.tsx

@@ -0,0 +1,178 @@
+import { afterEach, expect, test } from "bun:test";
+import { TestDialogProvider, testRender } from "../../../../renderers/opentui/test-utils";
+import { act } from "react";
+import {
+  AppContext,
+  PaneInstanceProvider,
+  createInitialState,
+} from "../../../../state/app/context";
+import { cloneLayout, createDefaultConfig, type AppConfig, type BrokerInstanceConfig } from "../../../../types/config";
+import type { TickerFinancials } from "../../../../types/financials";
+import type { TickerRecord } from "../../../../types/ticker";
+import { ibkrGatewayManager } from "../../gateway/service";
+import { TradeTab } from "./index";
+import {
+  clearTradingDraft,
+  prefillTradeFromTicker,
+} from "../../trading/state";
+
+const TEST_PANE_ID = "ticker-detail:trade-test";
+const TEST_INSTANCE_ID = "ibkr-paper";
+
+let testSetup: Awaited<ReturnType<typeof testRender>> | undefined;
+
+function createGatewayInstance(): BrokerInstanceConfig {
+  return {
+    id: TEST_INSTANCE_ID,
+    brokerType: "ibkr",
+    label: "Paper",
+    connectionMode: "gateway",
+    config: { connectionMode: "gateway", gateway: { host: "127.0.0.1", port: 4002, clientId: 1 } },
+    enabled: true,
+  };
+}
+
+function createTradeConfig(symbol: string): AppConfig {
+  const config = createDefaultConfig("/tmp/gloomberb-trade-tab");
+  const layout = {
+    dockRoot: { kind: "pane" as const, instanceId: TEST_PANE_ID },
+    instances: [{
+      instanceId: TEST_PANE_ID,
+      paneId: "ticker-detail",
+      binding: { kind: "fixed" as const, symbol },
+    }],
+    floating: [],
+    detached: [],
+  };
+
+  return {
+    ...config,
+    brokerInstances: [createGatewayInstance()],
+    layout,
+    layouts: [{ name: "Default", layout: cloneLayout(layout) }],
+  };
+}
+
+function makeTicker(symbol: string, name = symbol): TickerRecord {
+  return {
+    metadata: {
+      ticker: symbol,
+      exchange: "NASDAQ",
+      currency: "USD",
+      name,
+      assetCategory: "STK",
+      portfolios: [],
+      watchlists: [],
+      positions: [],
+      custom: {},
+      tags: [],
+    },
+  };
+}
+
+function makeFinancials(): TickerFinancials {
+  return {
+    quote: {
+      symbol: "AMD",
+      price: 199.8,
+      currency: "USD",
+      change: -3.97,
+      changePercent: -1.95,
+      bid: 199.7,
+      ask: 199.9,
+      lastUpdated: Date.now(),
+    },
+    annualStatements: [],
+    quarterlyStatements: [],
+    priceHistory: [],
+  };
+}
+
+function stubGatewayRefresh(): void {
+  const service = ibkrGatewayManager.getService(TEST_INSTANCE_ID) as any;
+  service.connect = async () => {};
+  service.getAccounts = async () => [];
+  service.listOpenOrders = async () => [];
+  service.listExecutions = async () => [];
+}
+
+function TradeHarness({
+  config,
+  ticker,
+  financials,
+  brokerAccounts = {},
+}: {
+  config: AppConfig;
+  ticker: TickerRecord;
+  financials: TickerFinancials;
+  brokerAccounts?: Record<string, import("../../../../types/trading").BrokerAccount[]>;
+}) {
+  const state = createInitialState(config);
+  state.focusedPaneId = TEST_PANE_ID;
+  state.tickers = new Map([[ticker.metadata.ticker, ticker]]);
+  state.financials = new Map([[ticker.metadata.ticker, financials]]);
+  state.brokerAccounts = brokerAccounts;
+  const tradeTab = <TradeTab focused width={88} height={30} onCapture={() => {}} />;
+
+  return (
+    <TestDialogProvider>
+      <AppContext value={{ state, dispatch: () => {} }}>
+        <PaneInstanceProvider paneId={TEST_PANE_ID}>
+          {tradeTab}
+        </PaneInstanceProvider>
+      </AppContext>
+    </TestDialogProvider>
+  );
+}
+
+afterEach(async () => {
+  if (testSetup) {
+    await act(async () => {
+      testSetup!.renderer.destroy();
+    });
+    testSetup = undefined;
+  }
+  clearTradingDraft();
+  await ibkrGatewayManager.removeInstance(TEST_INSTANCE_ID);
+});
+
+test("prefills the only cached IBKR account when the live gateway snapshot is empty", async () => {
+  const config = createTradeConfig("AMD");
+  const ticker = makeTicker("AMD", "Advanced Micro Devices, Inc.");
+  const financials = makeFinancials();
+
+  clearTradingDraft();
+  stubGatewayRefresh();
+  prefillTradeFromTicker(ticker, "BUY");
+
+  await act(async () => {
+    testSetup = await testRender(
+      <TradeHarness
+        config={config}
+        ticker={ticker}
+        financials={financials}
+        brokerAccounts={{
+          [TEST_INSTANCE_ID]: [{
+            accountId: "DU123456",
+            name: "Main",
+            currency: "USD",
+            source: "gateway",
+            updatedAt: Date.now(),
+          }],
+        }}
+      />,
+      { width: 88, height: 30 },
+    );
+  });
+
+  await act(async () => {
+    await testSetup!.renderOnce();
+  });
+  await act(async () => {
+    await testSetup!.renderOnce();
+  });
+
+  const frame = testSetup!.captureCharFrame();
+  expect(frame).toContain("Account DU123456");
+  expect(frame).toContain("Paper Gateway");
+});

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

@@ -0,0 +1,302 @@
+import { Box, ScrollBox, Text } from "../../../../ui";
+import { useDialog } from "../../../../ui/dialog";
+import { useCallback, useEffect, useState } from "react";
+import {
+  useAppSelector,
+  usePaneCollection,
+  usePaneInstanceId,
+  usePaneTicker,
+} from "../../../../state/app/context";
+import { colors, hoverBg } from "../../../../theme/colors";
+import type { TickerResearchTabProps } from "../../../../types/plugin";
+import { isGatewayConfigured } from "../../config";
+import { useIbkrGatewaySelection } from "../../gateway/selection";
+import { TradePreviewPanel } from "../preview-panel";
+import { TradeTabHeader } from "./header";
+import { TradeTicketPanel } from "../ticket-panel";
+import {
+  getTradeTicketState,
+  useTradingPaneState,
+} from "../../trading/state";
+import { inferDraftAccountId, isLimitOrder, isStopOrder } from "../utils";
+import {
+  resolveTradeConnectionTone,
+  resolveTradeContractDisplay,
+  resolveTradeNextStep,
+  resolveTradePreviewDisplay,
+  resolveTradeStatus,
+  resolveTradeTabLayout,
+} from "./model";
+import { useTradeTabFooter } from "./footer";
+import { useTradeTabActions } from "./actions";
+import { useTradeTabShortcuts } from "./shortcuts";
+import { useTradeTicketSync } from "./state-sync";
+
+export function TradeTab({ focused, width, onCapture }: TickerResearchTabProps) {
+  const config = useAppSelector((state) => state.config);
+  const brokerAccounts = useAppSelector((state) => state.brokerAccounts);
+  const paneId = usePaneInstanceId();
+  const { collectionId } = usePaneCollection(paneId);
+  const { ticker, financials } = usePaneTicker(paneId);
+  const dialog = useDialog();
+  const tradeState = useTradingPaneState();
+  const [interactive, setInteractive] = useState(false);
+  const [hoveredField, setHoveredField] = useState<string | null>(null);
+  const fieldHoverBg = hoverBg();
+
+  const symbol = ticker?.metadata.ticker ?? null;
+  const ticketState = getTradeTicketState(symbol, ticker);
+  const preferredInstanceId = ticketState.brokerInstanceId ?? tradeState.brokerInstanceId;
+  const {
+    activePortfolio,
+    gatewayInstances,
+    lockedBrokerInstanceId,
+    selectedInstance,
+    gatewaySnapshot,
+    gatewayService,
+    normalizedConfig,
+    isGatewayMode,
+    availableAccounts,
+    gatewayRequiredMessage,
+  } = useIbkrGatewaySelection(
+    config,
+    brokerAccounts,
+    collectionId,
+    preferredInstanceId,
+  );
+  const inferredAccountId = selectedInstance
+    ? inferDraftAccountId(
+      config,
+      collectionId,
+      availableAccounts,
+      selectedInstance.id,
+      tradeState.accountId,
+    )
+    : undefined;
+  const currentAccountId = ticketState.draft.accountId || inferredAccountId;
+  const activeAccount = availableAccounts.find((account) => account.accountId === currentAccountId);
+  const lockedAccountId = selectedInstance && lockedBrokerInstanceId === selectedInstance.id
+    ? activePortfolio?.brokerAccountId
+    : undefined;
+
+  const enterInteractive = useCallback(() => {
+    setInteractive(true);
+    onCapture(true);
+  }, [onCapture]);
+
+  const exitInteractive = useCallback(() => {
+    setInteractive(false);
+    onCapture(false);
+  }, [onCapture]);
+
+  useEffect(() => {
+    if (!focused) {
+      exitInteractive();
+    }
+  }, [focused, exitInteractive]);
+
+  useEffect(() => {
+    exitInteractive();
+  }, [symbol]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  useTradeTicketSync({
+    availableAccounts,
+    collectionId,
+    config,
+    isGatewayMode,
+    lockedAccountId,
+    selectedInstance,
+    symbol,
+    ticker,
+    ticketState,
+    tradeStateAccountId: tradeState.accountId,
+  });
+
+  const actions = useTradeTabActions({
+    availableAccounts,
+    brokerAccounts,
+    collectionId,
+    config,
+    currentAccountId,
+    dialog,
+    financials,
+    gatewayInstances,
+    gatewayRequiredMessage,
+    gatewayService,
+    isGatewayMode,
+    lockedBrokerInstanceId,
+    normalizedConfig,
+    selectedInstance,
+    symbol,
+    ticketState,
+    ticker,
+    tradeState,
+  });
+
+  useEffect(() => {
+    if (!selectedInstance || !normalizedConfig || !isGatewayMode || !isGatewayConfigured(selectedInstance.config) || !symbol) return;
+    actions.refresh().catch(() => {});
+  }, [symbol, selectedInstance?.id, isGatewayMode, normalizedConfig ? JSON.stringify(normalizedConfig.gateway) : ""]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const showLimit = isLimitOrder(ticketState.draft.orderType);
+  const showStop = isStopOrder(ticketState.draft.orderType);
+  useTradeTabShortcuts({
+    actions,
+    enterInteractive,
+    exitInteractive,
+    focused,
+    interactive,
+    showLimit,
+    showStop,
+    symbol,
+    ticketState,
+    ticker,
+  });
+
+  const hasProfile = Boolean(selectedInstance);
+  const {
+    wideLayout,
+    previewPanelWidth,
+    ticketPanelWidth,
+    fieldsPerRow,
+    fieldWidth,
+    coreFieldWidth,
+    orderFieldWidth,
+    fieldTextWidth,
+    previewTextWidth,
+    previewMetricWidth,
+  } = resolveTradeTabLayout(width);
+  const {
+    activeContract,
+    hasContract,
+    contractValue,
+    contractMeta,
+  } = resolveTradeContractDisplay({
+    ticketState,
+    ticker,
+    fieldTextWidth,
+    fieldsPerRow,
+  });
+  const hasAccount = Boolean(currentAccountId);
+  const hasPreview = Boolean(ticketState.preview);
+  const connectionTone = resolveTradeConnectionTone(gatewaySnapshot);
+  const { statusTone, statusText } = resolveTradeStatus({ ticketState, gatewaySnapshot });
+  const { previewTone, previewHeading } = resolveTradePreviewDisplay(ticketState);
+  const { nextStep, workflowTone } = resolveTradeNextStep({
+    hasProfile,
+    hasContract,
+    hasAccount,
+    hasPreview,
+    editingOrderId: ticketState.editingOrderId,
+  });
+  const ticketHint = interactive
+    ? "Field shortcuts stay active while captured."
+    : "Click a field to edit. Shortcuts are in the pane footer.";
+
+  useTradeTabFooter({
+    actions,
+    interactive,
+    nextStep,
+    showLimit,
+    showStop,
+    statusText,
+    statusTone,
+    symbol,
+    ticketState,
+    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>
+    );
+  }
+
+  return (
+    <ScrollBox flexGrow={1} scrollY>
+      <Box
+        flexDirection="column"
+        paddingX={1}
+        paddingBottom={1}
+        gap={1}
+        onMouseDown={!interactive ? enterInteractive : undefined}
+      >
+        <TradeTabHeader
+          ticker={ticker}
+          financials={financials}
+          profileLabel={selectedInstance?.label}
+          isGatewayMode={isGatewayMode}
+          connectionTone={connectionTone}
+          currentAccountId={currentAccountId}
+          lockedBrokerInstanceId={lockedBrokerInstanceId}
+          hasAccount={hasAccount}
+          activeAccount={activeAccount}
+          interactive={interactive}
+          nextStep={nextStep}
+          workflowTone={workflowTone}
+          statusTone={statusTone}
+          statusText={statusText}
+          busy={ticketState.busy}
+          hasError={Boolean(ticketState.lastError)}
+          isSuccess={Boolean(ticketState.isSuccess)}
+          onEnterInteractive={enterInteractive}
+          onExitInteractive={exitInteractive}
+          onChooseBrokerInstance={() => actions.chooseBrokerInstance().catch(() => {})}
+          onChooseAccount={() => actions.chooseAccount().catch(() => {})}
+          onRefresh={() => actions.refresh().catch(() => {})}
+        />
+
+        <Box flexDirection={wideLayout ? "row" : "column"} alignItems="stretch" gap={1}>
+          <TradeTicketPanel
+            interactive={interactive}
+            panelWidth={wideLayout ? ticketPanelWidth : undefined}
+            ticketPanelWidth={ticketPanelWidth}
+            coreFieldWidth={coreFieldWidth}
+            orderFieldWidth={orderFieldWidth}
+            fieldWidth={fieldWidth}
+            fieldTextWidth={fieldTextWidth}
+            fieldHoverBg={fieldHoverBg}
+            hoveredField={hoveredField}
+            setHoveredField={setHoveredField}
+            ticketHint={ticketHint}
+            profileLabel={selectedInstance?.label}
+            hasProfile={hasProfile}
+            contractValue={contractValue}
+            hasContract={hasContract}
+            currentAccountId={currentAccountId}
+            hasAccount={hasAccount}
+            ticketState={ticketState}
+            ticker={ticker}
+            activeContract={activeContract}
+            showLimit={showLimit}
+            showStop={showStop}
+            contractMeta={contractMeta}
+            onEnterInteractive={enterInteractive}
+            onChooseBrokerInstance={() => actions.chooseBrokerInstance().catch(() => {})}
+            onChooseInstrument={() => actions.chooseInstrument().catch(() => {})}
+            onChooseAccount={() => actions.chooseAccount().catch(() => {})}
+            onToggleSide={actions.toggleSide}
+            onEditOrderType={() => actions.editOrderType().catch(() => {})}
+            onEditQuantity={() => actions.editQuantity().catch(() => {})}
+            onEditLimitPrice={() => actions.editLimitPrice().catch(() => {})}
+            onEditStopPrice={() => actions.editStopPrice().catch(() => {})}
+          />
+
+          <TradePreviewPanel
+            previewPanelWidth={previewPanelWidth}
+            previewTextWidth={previewTextWidth}
+            previewMetricWidth={previewMetricWidth}
+            previewTone={previewTone}
+            previewHeading={previewHeading}
+            ticketState={ticketState}
+            onPreviewOrder={() => actions.previewOrder().catch(() => {})}
+            onSubmitOrder={() => actions.submitOrder().catch(() => {})}
+          />
+        </Box>
+      </Box>
+    </ScrollBox>
+  );
+}