gloomberb 0.7.5 → 0.8.0

package/src/plugins/builtin/options/table.ts

@@ -0,0 +1,209 @@
+import { TextAttributes } from "../../../ui";
+import type { DataTableCell } from "../../../components";
+import type { OptionContract, OptionsChain } from "../../../types/financials";
+import { blendHex, colors, hoverBg } from "../../../theme/colors";
+import { blendForContrast, contrastRatio } from "../../../theme/color-utils";
+import { formatCompact, formatNumber } from "../../../utils/format";
+import { formatMarketPrice } from "../../../market-data/market/format";
+import type { OptionColumn, OptionColumnId, OptionTableRow } from "./types";
+
+type OptionColorRole = "call" | "put" | "price" | "activity" | "iv" | "strike";
+
+const OPTION_TEXT_MIN_CONTRAST = 4.5;
+
+export const OPTION_COLUMNS: Array<Omit<OptionColumn, "headerColor">> = [
+  { id: "callOpenInterest", label: "C OI", width: 6, align: "right" },
+  { id: "callVolume", label: "C VOL", width: 6, align: "right" },
+  { id: "callLast", label: "C LAST", width: 7, align: "right" },
+  { id: "callIv", label: "C IV", width: 6, align: "right" },
+  { id: "callBid", label: "C BID", width: 7, align: "right" },
+  { id: "callAsk", label: "C ASK", width: 7, align: "right" },
+  { id: "strike", label: "STRIKE", width: 9, align: "right" },
+  { id: "putBid", label: "P BID", width: 7, align: "right" },
+  { id: "putAsk", label: "P ASK", width: 7, align: "right" },
+  { id: "putIv", label: "P IV", width: 6, align: "right" },
+  { id: "putLast", label: "P LAST", width: 7, align: "right" },
+  { id: "putVolume", label: "P VOL", width: 6, align: "right" },
+  { id: "putOpenInterest", label: "P OI", width: 6, align: "right" },
+];
+
+export function buildStrikeList(chain: OptionsChain): number[] {
+  const set = new Set<number>();
+  for (const c of chain.calls) set.add(c.strike);
+  for (const p of chain.puts) set.add(p.strike);
+  return Array.from(set).sort((a, b) => a - b);
+}
+
+export function resolveDefaultStrikeTarget(
+  optionStrike: number | undefined,
+  quotePrice: number | undefined,
+): number | null {
+  if (optionStrike != null && Number.isFinite(optionStrike)) return optionStrike;
+  if (quotePrice != null && Number.isFinite(quotePrice)) return quotePrice;
+  return null;
+}
+
+export function findNearestStrikeIndex(strikes: number[], targetStrike: number): number {
+  let bestIndex = 0;
+  let bestDistance = Number.POSITIVE_INFINITY;
+  for (let index = 0; index < strikes.length; index += 1) {
+    const distance = Math.abs(strikes[index]! - targetStrike);
+    if (distance < bestDistance) {
+      bestIndex = index;
+      bestDistance = distance;
+    }
+  }
+  return bestIndex;
+}
+
+export function formatStrikeLabel(strike: number): string {
+  const decimals = strike % 1 === 0 ? 0 : 2;
+  return formatNumber(strike, decimals).replace(/(\.\d*?[1-9])0+$/, "$1").replace(/\.0+$/, "");
+}
+
+export function formatIv(value: number | undefined): string {
+  if (value == null || !Number.isFinite(value)) return "—";
+  return `${(value * 100).toFixed(1)}%`;
+}
+
+export function optionColumnColor(columnId: OptionColumnId, surface = colors.bg): string {
+  return optionRoleColor(optionColumnRole(columnId), surface);
+}
+
+function optionContractForColumn(row: OptionTableRow, columnId: OptionColumnId): OptionContract | undefined {
+  return columnId.startsWith("call") ? row.call : row.put;
+}
+
+function optionColumnRole(columnId: OptionColumnId): OptionColorRole {
+  if (columnId === "strike") return "strike";
+  if (columnId.endsWith("Iv")) return "iv";
+  if (columnId.endsWith("Volume") || columnId.endsWith("OpenInterest")) return "activity";
+  if (columnId.endsWith("Bid") || columnId.endsWith("Ask")) return "price";
+  return columnId.startsWith("call") ? "call" : "put";
+}
+
+function optionRoleThemeColor(role: OptionColorRole): string {
+  switch (role) {
+    case "call":
+    case "iv":
+      return colors.positive;
+    case "put":
+      return colors.negative;
+    case "price":
+      return colors.warning;
+    case "activity":
+    case "strike":
+      return colors.borderFocused;
+  }
+}
+
+function mostReadableColor(surface: string, candidates: readonly string[]): string {
+  return candidates.reduce((best, candidate) =>
+    contrastRatio(candidate, surface) > contrastRatio(best, surface) ? candidate : best,
+  );
+}
+
+function optionRoleColor(role: OptionColorRole, surface: string): string {
+  const preferred = optionRoleThemeColor(role);
+  const fallback = mostReadableColor(surface, [
+    preferred,
+    colors.text,
+    colors.textBright,
+    colors.selectedText,
+    colors.neutral,
+  ]);
+  return blendForContrast(preferred, surface, fallback, OPTION_TEXT_MIN_CONTRAST);
+}
+
+function optionMutedColor(surface: string): string {
+  const fallback = mostReadableColor(surface, [
+    colors.textDim,
+    colors.text,
+    colors.textBright,
+    colors.selectedText,
+    colors.neutral,
+  ]);
+  return blendForContrast(colors.textDim, surface, fallback, OPTION_TEXT_MIN_CONTRAST);
+}
+
+function optionMoneynessBackground(
+  row: OptionTableRow,
+  contract: OptionContract | undefined,
+  columnId: OptionColumnId,
+  rowState: { selected: boolean; hovered: boolean },
+): string | undefined {
+  if (rowState.selected || rowState.hovered) return undefined;
+  const inTheMoney = inferColumnMoneyness(row, contract, columnId);
+  const sideColor = columnId.startsWith("call") ? colors.positive : colors.negative;
+  return inTheMoney
+    ? blendHex(colors.bg, sideColor, 0.13)
+    : blendHex(colors.bg, colors.neutral, 0.055);
+}
+
+function inferColumnMoneyness(
+  row: OptionTableRow,
+  contract: OptionContract | undefined,
+  columnId: OptionColumnId,
+): boolean {
+  if (contract) return contract.inTheMoney;
+  const oppositeContract = columnId.startsWith("call") ? row.put : row.call;
+  return oppositeContract ? !oppositeContract.inTheMoney : false;
+}
+
+function formatOptionContractCell(contract: OptionContract | undefined, column: OptionColumn): string {
+  if (!contract) return "—";
+  switch (column.id) {
+    case "callLast":
+    case "putLast":
+      return formatMarketPrice(contract.lastPrice, { assetCategory: "OPT", maxWidth: column.width });
+    case "callBid":
+    case "putBid":
+      return formatMarketPrice(contract.bid, { assetCategory: "OPT", maxWidth: column.width });
+    case "callAsk":
+    case "putAsk":
+      return formatMarketPrice(contract.ask, { assetCategory: "OPT", maxWidth: column.width });
+    case "callVolume":
+    case "putVolume":
+      return formatCompact(contract.volume);
+    case "callOpenInterest":
+    case "putOpenInterest":
+      return formatCompact(contract.openInterest);
+    case "callIv":
+    case "putIv":
+      return formatIv(contract.impliedVolatility);
+    case "strike":
+      return formatStrikeLabel(contract.strike);
+  }
+}
+
+export function renderOptionCell(
+  row: OptionTableRow,
+  column: OptionColumn,
+  _index: number,
+  rowState: { selected: boolean; hovered: boolean },
+): DataTableCell {
+  const selectedColor = rowState.selected ? colors.selectedText : undefined;
+  const rowSurface = rowState.selected ? colors.selected : rowState.hovered ? hoverBg() : colors.bg;
+
+  if (column.id === "strike") {
+    const backgroundColor = rowState.selected || rowState.hovered
+      ? undefined
+      : blendHex(colors.bg, row.isPositionStrike ? colors.borderFocused : colors.header, row.isPositionStrike ? 0.18 : 0.1);
+    const surface = backgroundColor ?? rowSurface;
+    return {
+      text: formatStrikeLabel(row.strike),
+      color: selectedColor ?? optionRoleColor("strike", surface),
+      backgroundColor,
+      attributes: rowState.selected || row.isPositionStrike ? TextAttributes.BOLD : TextAttributes.NONE,
+    };
+  }
+
+  const contract = optionContractForColumn(row, column.id);
+  const backgroundColor = optionMoneynessBackground(row, contract, column.id, rowState);
+  const surface = backgroundColor ?? rowSurface;
+  return {
+    text: formatOptionContractCell(contract, column),
+    color: selectedColor ?? (contract ? optionRoleColor(optionColumnRole(column.id), surface) : optionMutedColor(surface)),
+    backgroundColor,
+  };
+}

package/src/plugins/builtin/options/types.ts

@@ -0,0 +1,33 @@
+import type { DataTableColumn } from "../../../components";
+import type { OptionContract } from "../../../types/financials";
+
+export type OptionColumnId =
+  | "callLast"
+  | "callBid"
+  | "callAsk"
+  | "callVolume"
+  | "callOpenInterest"
+  | "callIv"
+  | "strike"
+  | "putLast"
+  | "putBid"
+  | "putAsk"
+  | "putVolume"
+  | "putOpenInterest"
+  | "putIv";
+
+export type OptionColumn = DataTableColumn & { id: OptionColumnId };
+
+export interface OptionTableRow {
+  strike: number;
+  call?: OptionContract;
+  put?: OptionContract;
+  isPositionStrike: boolean;
+}
+
+export type OptionsViewProps = {
+  width: number;
+  height: number;
+  focused: boolean;
+  onCapture?: (capturing: boolean) => void;
+};

package/src/plugins/builtin/options/view.test.tsx

@@ -0,0 +1,185 @@
+import { afterEach, expect, test } from "bun:test";
+import { act } from "react";
+import { testRender } from "../../../renderers/opentui/test-utils";
+import { MarketDataCoordinator, setSharedMarketDataCoordinator } from "../../../market-data/coordinator";
+import { AppContext, PaneInstanceProvider, createInitialState } from "../../../state/app/context";
+import { createTestDataProvider } from "../../../test-support/data-provider";
+import { cloneLayout, createDefaultConfig } from "../../../types/config";
+import type { OptionContract, OptionsChain, TickerFinancials } from "../../../types/financials";
+import type { TickerRecord } from "../../../types/ticker";
+import { OptionsView } from "./view";
+
+const TEST_PANE_ID = "ticker-detail:options-test";
+
+let testSetup: Awaited<ReturnType<typeof testRender>> | undefined;
+
+function makeTicker(symbol: string): TickerRecord {
+  return {
+    metadata: {
+      ticker: symbol,
+      exchange: "NASDAQ",
+      currency: "USD",
+      name: symbol,
+      assetCategory: "STK",
+      portfolios: [],
+      watchlists: [],
+      positions: [],
+      custom: {},
+      tags: [],
+    },
+  };
+}
+
+function makeContract(strike: number, side: "C" | "P", atmStrike = 101): OptionContract {
+  return {
+    contractSymbol: `AAPL260619${side}${String(strike * 1000).padStart(8, "0")}`,
+    strike,
+    currency: "USD",
+    lastPrice: strike / 10,
+    change: 0,
+    percentChange: 0,
+    volume: strike * 10,
+    openInterest: strike * 20,
+    bid: strike / 10 - 0.05,
+    ask: strike / 10 + 0.05,
+    impliedVolatility: 0.2,
+    inTheMoney: side === "C" ? strike < atmStrike : strike > atmStrike,
+    expiration: 1_782_345_600,
+    lastTradeDate: 1_782_000_000,
+  };
+}
+
+function makeChain(strikes = [100, 101], atmStrike = 101): OptionsChain {
+  return {
+    underlyingSymbol: "AAPL",
+    expirationDates: [1_782_345_600],
+    calls: strikes.map((strike) => makeContract(strike, "C", atmStrike)),
+    puts: strikes.map((strike) => makeContract(strike, "P", atmStrike)),
+  };
+}
+
+function makeFinancials(price: number): TickerFinancials {
+  return {
+    quote: {
+      symbol: "AAPL",
+      price,
+      currency: "USD",
+      change: 0,
+      changePercent: 0,
+      lastUpdated: Date.now(),
+    },
+    annualStatements: [],
+    quarterlyStatements: [],
+    priceHistory: [],
+  };
+}
+
+function OptionsHarness({ ticker, quotePrice }: { ticker: TickerRecord; quotePrice?: number }) {
+  const config = createDefaultConfig("/tmp/gloomberb-options-test");
+  config.layout = {
+    dockRoot: { kind: "pane", instanceId: TEST_PANE_ID },
+    instances: [{
+      instanceId: TEST_PANE_ID,
+      paneId: "ticker-detail",
+      binding: { kind: "fixed", symbol: ticker.metadata.ticker },
+    }],
+    floating: [],
+    detached: [],
+  };
+  config.layouts = [{ name: "Default", layout: cloneLayout(config.layout) }];
+
+  const state = createInitialState(config);
+  state.focusedPaneId = TEST_PANE_ID;
+  state.tickers = new Map([[ticker.metadata.ticker, ticker]]);
+  if (quotePrice != null) {
+    state.financials = new Map([[ticker.metadata.ticker, makeFinancials(quotePrice)]]);
+  }
+
+  return (
+    <AppContext value={{ state, dispatch: () => {} }}>
+      <PaneInstanceProvider paneId={TEST_PANE_ID}>
+        <OptionsView width={122} height={14} focused onCapture={() => {}} />
+      </PaneInstanceProvider>
+    </AppContext>
+  );
+}
+
+async function renderSettled() {
+  for (let i = 0; i < 4; i += 1) {
+    await act(async () => {
+      await testSetup!.renderOnce();
+      await Promise.resolve();
+    });
+  }
+}
+
+afterEach(async () => {
+  if (testSetup) {
+    await act(async () => {
+      testSetup!.renderer.destroy();
+    });
+    testSetup = undefined;
+  }
+  setSharedMarketDataCoordinator(null);
+});
+
+test("renders the options chain with the shared table columns", async () => {
+  const provider = createTestDataProvider({
+    getOptionsChain: async () => makeChain(),
+  });
+  setSharedMarketDataCoordinator(new MarketDataCoordinator(provider));
+
+  await act(async () => {
+    testSetup = await testRender(<OptionsHarness ticker={makeTicker("AAPL")} />, {
+      width: 124,
+      height: 16,
+    });
+  });
+
+  await renderSettled();
+
+  const frame = testSetup!.captureCharFrame();
+  expect(frame).toContain("C LAST");
+  expect(frame).toContain("C IV");
+  expect(frame).toContain("STRIKE");
+  expect(frame).toContain("P IV");
+  expect(frame).toContain("P LAST");
+  expect(frame).toContain("100");
+  expect(frame).toContain("101");
+
+  const headerLine = frame.split("\n").find((line) => line.includes("C OI") && line.includes("STRIKE")) ?? "";
+  expect(headerLine.indexOf("C OI")).toBeLessThan(headerLine.indexOf("C VOL"));
+  expect(headerLine.indexOf("C VOL")).toBeLessThan(headerLine.indexOf("C LAST"));
+  expect(headerLine.indexOf("C LAST")).toBeLessThan(headerLine.indexOf("C IV"));
+  expect(headerLine.indexOf("C IV")).toBeLessThan(headerLine.indexOf("C BID"));
+  expect(headerLine.indexOf("C BID")).toBeLessThan(headerLine.indexOf("C ASK"));
+  expect(headerLine.indexOf("P BID")).toBeLessThan(headerLine.indexOf("P ASK"));
+  expect(headerLine.indexOf("P ASK")).toBeLessThan(headerLine.indexOf("P IV"));
+  expect(headerLine.indexOf("P IV")).toBeLessThan(headerLine.indexOf("P LAST"));
+  expect(headerLine.indexOf("P LAST")).toBeLessThan(headerLine.indexOf("P VOL"));
+  expect(headerLine.indexOf("P VOL")).toBeLessThan(headerLine.indexOf("P OI"));
+});
+
+test("defaults the table around the nearest strike to the current quote", async () => {
+  const strikes = Array.from({ length: 25 }, (_, index) => 50 + index * 5);
+  const provider = createTestDataProvider({
+    getOptionsChain: async () => makeChain(strikes, 120),
+  });
+  setSharedMarketDataCoordinator(new MarketDataCoordinator(provider));
+
+  await act(async () => {
+    testSetup = await testRender(
+      <OptionsHarness ticker={makeTicker("AAPL")} quotePrice={121.2} />,
+      {
+        width: 124,
+        height: 12,
+      },
+    );
+  });
+
+  await renderSettled();
+
+  const frame = testSetup!.captureCharFrame();
+  expect(frame).toContain("120");
+  expect(frame).not.toContain(" 50 ");
+});

package/src/plugins/builtin/options/view.tsx

@@ -0,0 +1,264 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Box, Text } from "../../../ui";
+import { usePaneTicker } from "../../../state/app/context";
+import { colors } from "../../../theme/colors";
+import { isPlainKey } from "../../../utils/keyboard";
+import { formatExpDate, resolveOptionsTarget } from "../../../utils/options";
+import { useOptionsQuery, useResolvedEntryValue } from "../../../market-data/hooks";
+import { DataTableView, Spinner, Tabs, usePaneFooter, type DataTableKeyEvent } from "../../../components";
+import {
+  OPTION_COLUMNS,
+  buildStrikeList,
+  findNearestStrikeIndex,
+  formatIv,
+  formatStrikeLabel,
+  optionColumnColor,
+  renderOptionCell,
+  resolveDefaultStrikeTarget,
+} from "./table";
+import type { OptionColumn, OptionTableRow, OptionsViewProps } from "./types";
+
+export function OptionsView({ width, focused, onCapture = () => {} }: OptionsViewProps) {
+  const { ticker, financials } = usePaneTicker();
+  const [expIdx, setExpIdx] = useState(0);
+  const [strikeIdx, setStrikeIdx] = useState(0);
+  const [autoScrollVersion, setAutoScrollVersion] = useState(0);
+  const [scrollToIndexAlign, setScrollToIndexAlign] = useState<"nearest" | "center">("nearest");
+  const [interactive, setInteractive] = useState(false);
+  const userSelectedStrikeRef = useRef(false);
+  const target = resolveOptionsTarget(ticker);
+  const isOpt = target?.isOptionTicker ?? false;
+  const parsed = target?.parsedOption ?? null;
+  const effectiveTicker = target?.effectiveTicker ?? "";
+  const effectiveExchange = target?.effectiveExchange ?? "";
+  const instrument = target?.instrument ?? null;
+  const baseRequest = target
+    ? {
+      instrument: {
+        symbol: effectiveTicker,
+        exchange: effectiveExchange,
+        brokerId: instrument?.brokerId,
+        brokerInstanceId: instrument?.brokerInstanceId,
+        instrument,
+      },
+    }
+    : null;
+  const initialChainEntry = useOptionsQuery(baseRequest);
+  const initialChain = useResolvedEntryValue(initialChainEntry);
+  const selectedExpiration = initialChain?.expirationDates[expIdx];
+  const expirationChainEntry = useOptionsQuery(
+    baseRequest && selectedExpiration != null
+      ? { ...baseRequest, expirationDate: selectedExpiration }
+      : null,
+  );
+  const expirationChain = useResolvedEntryValue(expirationChainEntry);
+  const chain = expirationChain ?? initialChain;
+  const loading = (initialChainEntry?.phase === "loading" || initialChainEntry?.phase === "refreshing") && !chain
+    || (expirationChainEntry?.phase === "loading" || expirationChainEntry?.phase === "refreshing");
+  const error = initialChainEntry?.phase === "error"
+    ? initialChainEntry.error?.message ?? "Failed to load options"
+    : expirationChainEntry?.phase === "error"
+      ? expirationChainEntry.error?.message ?? "Failed to load options"
+      : null;
+
+  const enterInteractive = () => {
+    if (!interactive) {
+      setInteractive(true);
+      onCapture(true);
+    }
+  };
+
+  const exitInteractive = () => {
+    if (interactive) {
+      setInteractive(false);
+      onCapture(false);
+    }
+  };
+
+  useEffect(() => {
+    userSelectedStrikeRef.current = false;
+    setScrollToIndexAlign("nearest");
+    exitInteractive();
+    setExpIdx(0);
+    setStrikeIdx(0);
+  }, [effectiveTicker]);
+
+  useEffect(() => {
+    if (!parsed || !initialChain || initialChain.expirationDates.length === 0) return;
+    const bestExpIdx = initialChain.expirationDates.reduce((best, ts, i) =>
+      Math.abs(ts - parsed.expTs) < Math.abs(initialChain.expirationDates[best]! - parsed.expTs) ? i : best, 0);
+    if (bestExpIdx !== expIdx) {
+      setExpIdx(bestExpIdx);
+    }
+  }, [expIdx, initialChain, parsed]);
+
+  useEffect(() => {
+    userSelectedStrikeRef.current = false;
+  }, [expIdx]);
+
+  const strikes = useMemo(() => chain ? buildStrikeList(chain) : [], [chain]);
+  const callsByStrike = useMemo(
+    () => new Map(chain?.calls.map((c) => [c.strike, c]) ?? []),
+    [chain],
+  );
+  const putsByStrike = useMemo(
+    () => new Map(chain?.puts.map((p) => [p.strike, p]) ?? []),
+    [chain],
+  );
+  const rows = useMemo<OptionTableRow[]>(() => strikes.map((strike) => ({
+    strike,
+    call: callsByStrike.get(strike),
+    put: putsByStrike.get(strike),
+    isPositionStrike: !!parsed && Math.abs(strike - parsed.strike) < 0.01,
+  })), [callsByStrike, parsed, putsByStrike, strikes]);
+  const selectedStrike = strikes[strikeIdx];
+  const selectedCall = selectedStrike != null ? callsByStrike.get(selectedStrike) : undefined;
+  const selectedPut = selectedStrike != null ? putsByStrike.get(selectedStrike) : undefined;
+  const optionColumns: OptionColumn[] = OPTION_COLUMNS.map((column) => ({
+    ...column,
+    headerColor: optionColumnColor(column.id, colors.panel),
+  }));
+
+  usePaneFooter("options", () => {
+    const info = [
+      ...(selectedExpiration != null ? [{ id: "exp", parts: [{ text: formatExpDate(selectedExpiration), tone: "muted" as const }] }] : []),
+      ...(selectedStrike != null ? [{ id: "strike", parts: [{ text: `Strike ${formatStrikeLabel(selectedStrike)}`, tone: "value" as const, bold: true }] }] : []),
+      ...(selectedCall ? [{ id: "call-iv", parts: [{ text: "Call IV", tone: "label" as const }, { text: formatIv(selectedCall.impliedVolatility), tone: "value" as const }] }] : []),
+      ...(selectedPut ? [{ id: "put-iv", parts: [{ text: "Put IV", tone: "label" as const }, { text: formatIv(selectedPut.impliedVolatility), tone: "value" as const }] }] : []),
+      ...(loading ? [{ id: "loading", parts: [{ text: "loading", tone: "muted" as const }] }] : []),
+      ...(error ? [{ id: "error", parts: [{ text: "error", tone: "warning" as const }] }] : []),
+    ];
+    return info.length > 0 ? { info } : null;
+  }, [
+    error,
+    loading,
+    selectedCall?.impliedVolatility,
+    selectedExpiration,
+    selectedPut?.impliedVolatility,
+    selectedStrike,
+  ]);
+
+  useEffect(() => {
+    setStrikeIdx((index) => {
+      if (strikes.length === 0) return 0;
+      return Math.min(index, strikes.length - 1);
+    });
+  }, [strikes.length]);
+
+  useEffect(() => {
+    if (strikes.length === 0 || userSelectedStrikeRef.current) return;
+    const targetStrike = resolveDefaultStrikeTarget(parsed?.strike, financials?.quote?.price);
+    if (targetStrike == null) return;
+    setScrollToIndexAlign("center");
+    setStrikeIdx(findNearestStrikeIndex(strikes, targetStrike));
+    setAutoScrollVersion((version) => version + 1);
+  }, [expIdx, financials?.quote?.price, parsed?.strike, strikes]);
+
+  const handleTableKeyDown = useCallback((event: DataTableKeyEvent) => {
+    const isEnter = event.name === "enter" || event.name === "return";
+
+    if (isEnter && !interactive) {
+      event.preventDefault?.();
+      event.stopPropagation?.();
+      enterInteractive();
+      return true;
+    }
+    if (event.name === "escape" && interactive) {
+      event.preventDefault?.();
+      event.stopPropagation?.();
+      exitInteractive();
+      return true;
+    }
+
+    if (isPlainKey(event, "j", "down")) {
+      if (strikes.length === 0) return true;
+      event.preventDefault?.();
+      event.stopPropagation?.();
+      userSelectedStrikeRef.current = true;
+      setScrollToIndexAlign("nearest");
+      setStrikeIdx((i) => Math.min(i + 1, strikes.length - 1));
+      return true;
+    }
+    if (isPlainKey(event, "k", "up")) {
+      if (strikes.length === 0) return true;
+      event.preventDefault?.();
+      event.stopPropagation?.();
+      userSelectedStrikeRef.current = true;
+      setScrollToIndexAlign("nearest");
+      setStrikeIdx((i) => Math.max(i - 1, 0));
+      return true;
+    }
+
+    return false;
+  }, [enterInteractive, exitInteractive, interactive, strikes.length]);
+
+  if (!ticker) return <Text fg={colors.textDim}>Select a ticker to view options.</Text>;
+  if (loading && !chain) return <Spinner label="Loading options chain..." />;
+  if (error) return <Text fg={colors.textDim}>{error}</Text>;
+  if (!chain || chain.expirationDates.length === 0) return <Text fg={colors.textDim}>No options available for {effectiveTicker}.</Text>;
+
+  const innerWidth = Math.max(width - 4, 60);
+  const posShares = isOpt && parsed
+    ? ticker.metadata.positions.reduce((sum, p) => sum + p.shares, 0)
+    : 0;
+  const maxExpVisible = Math.max(Math.floor((innerWidth - 14) / 13), 3);
+  const expStart = Math.max(0, Math.min(expIdx - Math.floor(maxExpVisible / 2), chain.expirationDates.length - maxExpVisible));
+  const visibleExps = chain.expirationDates.slice(expStart, expStart + maxExpVisible);
+
+  return (
+    <Box flexDirection="column" flexGrow={1} paddingX={1} onMouseDown={() => { if (!interactive) enterInteractive(); }}>
+      <Box flexDirection="row" height={1} gap={1}>
+        <Text fg={colors.textDim}>Exp:</Text>
+        <Box flexGrow={1} height={1}>
+          <Tabs
+            tabs={visibleExps.map((ts, i) => ({
+              label: formatExpDate(ts),
+              value: String(expStart + i),
+            }))}
+            activeValue={String(expIdx)}
+            onSelect={(value) => {
+              enterInteractive();
+              setExpIdx(Number(value));
+            }}
+            compact
+            variant="bare"
+            focused={focused && interactive}
+          />
+        </Box>
+        {loading && <Spinner />}
+      </Box>
+
+      {isOpt && parsed && (
+        <Box height={1}>
+          <Text fg={colors.textBright}>
+            {`Position: ${posShares} ${parsed.side === "C" ? "call" : "put"} contract${posShares !== 1 ? "s" : ""} @ $${parsed.strike}`}
+          </Text>
+        </Box>
+      )}
+
+      <DataTableView<OptionTableRow, OptionColumn>
+        focused={focused}
+        selectedIndex={strikeIdx}
+        onRootKeyDown={handleTableKeyDown}
+        columns={optionColumns}
+        items={rows}
+        sortColumnId={null}
+        sortDirection="asc"
+        onHeaderClick={() => {}}
+        getItemKey={(row) => String(row.strike)}
+        isSelected={(_row, index) => index === strikeIdx}
+        onSelect={(_row, index) => {
+          userSelectedStrikeRef.current = true;
+          setScrollToIndexAlign("nearest");
+          enterInteractive();
+          setStrikeIdx(index);
+        }}
+        renderCell={renderOptionCell}
+        emptyStateTitle="No strikes available."
+        scrollToIndex={strikeIdx}
+        scrollToIndexAlign={scrollToIndexAlign}
+        scrollToIndexVersion={autoScrollVersion}
+      />
+    </Box>
+  );
+}