gloomberb 0.13.3 → 0.14.1

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

@@ -2,10 +2,12 @@ import { useMemo } from "react";
 import type { PaneFooterSegment, PaneHint } from "../../../components";
 import { t, tf } from "../../../i18n";
 import type { OptionsChain } from "../../../types/financials";
+import { formatRelativeTime } from "../../../utils/datetime-format";
 import { useCloudAccessFooter } from "../shared/cloud-upgrade";
 import { usePaneStatusFooter } from "../shared/pane-footer";
 import { CLOUD_QUOTE_DELAY_MINUTES } from "../shared/plan-access";
 import type { OptionQuoteCoverage, OptionQuoteCoverageStatus } from "./live-quotes";
+import { optionSpread, type OptionMarketReference } from "./market-reference";
 
 export interface OptionsCoverageState {
   text: string;
@@ -20,6 +22,57 @@ export function resolveOptionsCoverageState(status: OptionQuoteCoverageStatus):
   return { text: t("options delayed fallback"), tone: "warning" };
 }
 
+/**
+ * The selected contract belongs in the status bar rather than above the chain:
+ * it changes on every cursor move, and the chain already carries the contract's
+ * bid, ask and last as columns, its expiry as the tab strip above them. What is
+ * left is the identity, how stale the two clocks are, and whatever the chain's
+ * own columns cannot say about the quote.
+ */
+export function optionContractFooterSegments(
+  reference: OptionMarketReference | undefined,
+  spreadColumnVisible = false,
+  now = Date.now(),
+): PaneFooterSegment[] {
+  if (!reference) return [];
+  const spread = optionSpread(reference);
+  const age = (milliseconds: number | undefined) => milliseconds && milliseconds > 0
+    ? formatRelativeTime(milliseconds, now) : null;
+  const quoteAge = age(reference.lastUpdated);
+  const tradeAge = age(reference.lastTradeDate * 1000);
+  // A visible SPRD column already prints the percentage on every row, so the
+  // status bar only adds the absolute width it leaves out. It always names the
+  // reason a quote has no midpoint, which the column can only render as a dash.
+  const spreadSegment: PaneFooterSegment | null = spread.kind !== "two-sided"
+    ? {
+      id: "options-spread",
+      parts: [{
+        text: spread.kind === "crossed" ? t("crossed quote")
+          : spread.kind === "one-sided" ? t("one-sided quote") : t("no bid/ask"),
+        tone: "warning",
+      }],
+    }
+    : spreadColumnVisible ? null : {
+      id: "options-spread",
+      parts: [
+        { text: "spread", tone: "label" },
+        { text: `${spread.spread} (${spread.percentOfMid.toFixed(1)}% of mid)`, tone: "value" },
+      ],
+    };
+  return [
+    { id: "options-contract", parts: [{ text: reference.contractSymbol, tone: "value" }] },
+    ...(spreadSegment ? [spreadSegment] : []),
+    ...(quoteAge ? [{
+      id: "options-quote-age",
+      parts: [{ text: "quote", tone: "label" as const }, { text: quoteAge, tone: "value" as const }],
+    }] : []),
+    ...(tradeAge ? [{
+      id: "options-trade-age",
+      parts: [{ text: "trade", tone: "label" as const }, { text: tradeAge, tone: "value" as const }],
+    }] : []),
+  ];
+}
+
 export function resolveOptionsDelayLabel(chain: OptionsChain | null | undefined): string {
   const delayMinutes = chain?.delayMinutes && chain.delayMinutes > 0
     ? chain.delayMinutes
@@ -34,6 +87,8 @@ export function useOptionsAccessFooter({
   hints,
   loading,
   quoteCoverage,
+  reference,
+  spreadColumnVisible,
 }: {
   chain: OptionsChain | null | undefined;
   error?: string | null;
@@ -41,8 +96,12 @@ export function useOptionsAccessFooter({
   hints?: PaneHint[];
   loading?: boolean;
   quoteCoverage: Pick<OptionQuoteCoverage, "status">;
+  /** The contract under the cursor, reported as status rather than as a header. */
+  reference?: OptionMarketReference | undefined;
+  /** Set while the chain prints a SPRD column, so the status bar stops repeating it. */
+  spreadColumnVisible?: boolean;
 }): void {
-  const { access, segment } = useCloudAccessFooter({
+  const { access, hint: upgradeHint, segment } = useCloudAccessFooter({
     delayLabel: resolveOptionsDelayLabel(chain),
     focused,
     segmentId: "options-access",
@@ -53,18 +112,25 @@ export function useOptionsAccessFooter({
     ? resolveOptionsCoverageState(quoteCoverage.status)
     : null;
 
-  const info = useMemo<PaneFooterSegment[]>(() => {
+  const accessInfo = useMemo<PaneFooterSegment[]>(() => {
     if (coverage) {
       return [{ id: "options-access", parts: [{ text: coverage.text, tone: coverage.tone }] }];
     }
     return segment ? [segment] : [];
   }, [coverage?.text, coverage?.tone, segment]);
 
+  // Rebuilt every render so the quote and trade ages keep counting with the
+  // stream; the registration compares by value, so only a changed label
+  // reaches the footer. Access leads: for a free account it is the pressable
+  // upgrade segment, and the info row truncates from the right.
+  const info = [...accessInfo, ...optionContractFooterSegments(reference, spreadColumnVisible)];
+
   usePaneStatusFooter({
     registrationId: "options",
     loading,
     error,
     info,
-    hints,
+    // The pane's own actions keep the right edge they already hold.
+    hints: upgradeHint ? [upgradeHint, ...(hints ?? [])] : hints,
   });
 }

package/src/plugins/builtin/options/live-quotes.test.ts

@@ -6,6 +6,7 @@ import {
   buildOptionQuoteKey,
   buildOptionQuoteTargets,
   overlayOptionRowQuotes,
+  overlayOptionContractQuote,
   resolveOptionQuoteCoverage,
 } from "./live-quotes";
 
@@ -166,7 +167,7 @@ describe("options live quotes", () => {
     const overlaid = overlayOptionRowQuotes([original], entries, freshness)[0]!.call!;
 
     expect(overlaid).toMatchObject({
-      lastPrice: 2.5,
+      lastPrice: 1,
       bid: 2.45,
       ask: 2.55,
       lastUpdated: 1_800_000_000_000,
@@ -215,7 +216,7 @@ describe("options live quotes", () => {
       now: 1_800_000_030_000,
       subscriptionStartedAt: 1_800_000_000_000,
     };
-    expect(overlayOptionRowQuotes([original], entries, heterogeneousChainSnapshot)[0]!.call!.lastPrice).toBe(9);
+    expect(overlayOptionRowQuotes([original], entries, heterogeneousChainSnapshot)[0]!.call!.bid).toBe(8.9);
     expect(resolveOptionQuoteCoverage(targets, entries, heterogeneousChainSnapshot)).toMatchObject({
       liveCount: 1,
       status: "mixed",
@@ -258,7 +259,7 @@ describe("options live quotes", () => {
       subscriptionStartedAt: 1_800_000_905_000,
     };
 
-    expect(overlayOptionRowQuotes([original], entries, freshness)[0]!.call!.lastPrice).toBe(2.25);
+    expect(overlayOptionRowQuotes([original], entries, freshness)[0]!.call!.bid).toBe(2.2);
     const targets = buildOptionQuoteTargets([original], {
       fallbackHeight: 14,
       selectedIndex: 0,
@@ -294,7 +295,7 @@ describe("options live quotes", () => {
       subscriptionStartedAt: 1_799_999_500_000,
     };
 
-    expect(overlayOptionRowQuotes([original], entries, freshness)[0]!.call!.lastPrice).toBe(2.5);
+    expect(overlayOptionRowQuotes([original], entries, freshness)[0]!.call!.bid).toBe(2.45);
     const targets = buildOptionQuoteTargets([original], {
       fallbackHeight: 14,
       selectedIndex: 0,
@@ -339,3 +340,16 @@ describe("options live quotes", () => {
     expect(resolveOptionQuoteCoverage(targets, entries, freshness).status).toBe("delayed");
   });
 });
+
+ test("LAST only advances for a dated executed trade, never a mark or older trade", () => {
+  const original = contract(100, "C");
+  const quote: Quote = { symbol: original.contractSymbol, price: 8, mark: 9,
+    currency: "USD", change: 0, changePercent: 0, lastUpdated: 1_800_000_000_000,
+    lastTradePrice: 7, lastTradeTime: 1_790_000_000_000 };
+  const updated = overlayOptionContractQuote(original, quote)!;
+  expect(updated.lastPrice).toBe(7);
+  expect(updated.lastTradeDate).toBe(1_790_000_000);
+  expect(overlayOptionContractQuote(updated, { ...quote, lastTradePrice: 5,
+    lastTradeTime: 1_789_000_000_000 })!.lastPrice).toBe(7);
+  expect(overlayOptionContractQuote(original, { ...quote, lastTradeTime: undefined })!.lastPrice).toBe(original.lastPrice);
+});

package/src/plugins/builtin/options/live-quotes.ts

@@ -124,10 +124,15 @@ export function overlayOptionContractQuote(
   if (!contract || !quote) return contract;
   if (contract.lastUpdated != null && quote.lastUpdated < contract.lastUpdated) return contract;
 
-  const streamedPrice = isFiniteNumber(quote.mark) ? quote.mark : quote.price;
+  const hasNewTrade = isFiniteNumber(quote.lastTradePrice) && quote.lastTradePrice > 0
+    && isFiniteNumber(quote.lastTradeTime) && quote.lastTradeTime > 0
+    && quote.lastTradeTime >= contract.lastTradeDate * 1000;
   return {
     ...contract,
-    lastPrice: isFiniteNumber(streamedPrice) ? streamedPrice : contract.lastPrice,
+    // Generic quote.price may itself be a midpoint. LAST must remain an
+    // executed trade, with its own timestamp, even while the bid/ask updates.
+    lastPrice: hasNewTrade ? quote.lastTradePrice! : contract.lastPrice,
+    lastTradeDate: hasNewTrade ? quote.lastTradeTime! / 1000 : contract.lastTradeDate,
     bid: isFiniteNumber(quote.bid) ? quote.bid : contract.bid,
     ask: isFiniteNumber(quote.ask) ? quote.ask : contract.ask,
     lastUpdated: quote.lastUpdated,

package/src/plugins/builtin/options/market-reference.test.ts

@@ -0,0 +1,36 @@
+import { expect, test } from "bun:test";
+import { optionMarketReference, optionMarketReferenceLines, parseOptionMarketReference } from "./market-reference";
+
+const recorded = {
+  contractSymbol: "COST260925P01020000", expiration: 1790294400, currency: "USD",
+  bid: 114.8, ask: 120.55, lastPrice: 72.55, lastTradeDate: 1786630795,
+};
+
+test("keeps historical trades distinct and never substitutes retrieval time for a quote clock", () => {
+  const reference = optionMarketReference({ ...recorded, asOf: "2026-09-11T14:51:16Z" })!;
+  const lines = optionMarketReferenceLines(reference).join("\n");
+  expect(lines).toContain("spread 5.75 (4.89% of mid)");
+  expect(lines).toContain("Quote time unavailable");
+  expect(lines).toContain("Last 72.55 · trade 2026-08-13 14:19:55 UTC");
+  expect(lines).not.toContain("14:51:16");
+  const updated = optionMarketReferenceLines({ ...reference, lastUpdated: 1789140000123 }).join("\n");
+  expect(updated).toContain("Quote 2026-09-11 15:20:00 UTC");
+  expect(updated).toContain("trade 2026-08-13 14:19:55 UTC");
+});
+
+test("does not fabricate a midpoint for one-sided, crossed, missing or malformed quotes", () => {
+  for (const [bid, ask, result] of [[0, 0.19, "one-sided"], [2, 1, "crossed"], [NaN, Infinity, "bid/ask unavailable"]] as const) {
+    const lines = optionMarketReferenceLines(optionMarketReference({ ...recorded, bid, ask, lastPrice: 0, lastTradeDate: 0 })!).join("\n");
+    expect(lines).toContain(result);
+    expect(lines).not.toContain("% of mid");
+    expect(lines).toContain("Last — · trade time unavailable");
+  }
+  expect(optionMarketReferenceLines({ ...recorded, bid: 1, ask: 1 }).join("\n")).toContain("spread 0 (0.00% of mid)");
+});
+
+test("round-trips only valid optional reference metadata across saved pane params", () => {
+  expect(parseOptionMarketReference(JSON.stringify(recorded))).toEqual(recorded);
+  for (const malformed of ["not JSON", "null", "42", "[]", JSON.stringify({ ...recorded, expiration: 1e100 })]) {
+    expect(parseOptionMarketReference(malformed)).toBeUndefined();
+  }
+});

package/src/plugins/builtin/options/market-reference.ts

@@ -0,0 +1,70 @@
+import type { OptionContract } from "../../../types/financials";
+import { formatExpDate } from "../../../utils/options";
+
+/** A saved contract observation, never a claim that its prices are executable. */
+export type OptionMarketReference = Pick<OptionContract,
+  "contractSymbol" | "expiration" | "currency" | "bid" | "ask" | "lastPrice" | "lastTradeDate" | "lastUpdated">;
+
+export function optionMarketReference(value: unknown): OptionMarketReference | undefined {
+  if (!value || typeof value !== "object") return undefined;
+  const raw = value as Record<string, unknown>;
+  if (typeof raw.contractSymbol !== "string" || !raw.contractSymbol.trim()
+    || typeof raw.expiration !== "number" || !Number.isFinite(raw.expiration)
+    || raw.expiration <= 0 || !Number.isFinite(new Date(raw.expiration * 1000).getTime())) return undefined;
+  const number = (key: string): number => typeof raw[key] === "number" && Number.isFinite(raw[key]) && raw[key] >= 0
+    ? raw[key] : 0;
+  return {
+    contractSymbol: raw.contractSymbol,
+    expiration: raw.expiration,
+    currency: typeof raw.currency === "string" ? raw.currency : "",
+    bid: number("bid"), ask: number("ask"), lastPrice: number("lastPrice"), lastTradeDate: number("lastTradeDate"),
+    ...(number("lastUpdated") > 0 ? { lastUpdated: number("lastUpdated") } : {}),
+  };
+}
+
+export function parseOptionMarketReference(value: string | undefined): OptionMarketReference | undefined {
+  if (!value) return undefined;
+  try { return optionMarketReference(JSON.parse(value)); } catch { return undefined; }
+}
+
+function timestamp(milliseconds: number | undefined): string | null {
+  if (!milliseconds || !Number.isFinite(milliseconds)) return null;
+  const date = new Date(milliseconds);
+  return Number.isFinite(date.getTime()) ? date.toISOString().replace("T", " ").replace(/\.\d{3}Z$/, " UTC") : null;
+}
+
+const price = (value: number) => Number.isFinite(value) && value > 0 ? String(Number(value.toPrecision(12))) : "—";
+
+/**
+ * The spread is the one quote fact the chain table cannot show: its columns
+ * carry bid and ask separately, never the width between them. Callers format
+ * it at their own density, so the arithmetic lives here only once.
+ */
+export type OptionSpread =
+  | { kind: "two-sided"; spread: number; percentOfMid: number }
+  | { kind: "crossed" | "one-sided" | "unavailable" };
+
+export function optionSpread({ bid, ask }: Pick<OptionMarketReference, "bid" | "ask">): OptionSpread {
+  if (bid > 0 && ask >= bid) {
+    const spread = ask - bid;
+    return { kind: "two-sided", spread: Number(spread.toPrecision(12)), percentOfMid: spread / ((bid + ask) / 2) * 100 };
+  }
+  if (bid > ask && ask > 0) return { kind: "crossed" };
+  return { kind: bid > 0 || ask > 0 ? "one-sided" : "unavailable" };
+}
+
+export function optionMarketReferenceLines(reference: OptionMarketReference): string[] {
+  const { bid, ask } = reference;
+  const spread = optionSpread(reference);
+  const market = spread.kind === "two-sided"
+    ? `spread ${spread.spread} (${spread.percentOfMid.toFixed(2)}% of mid)`
+    : spread.kind === "crossed" ? "crossed quote; no midpoint"
+      : spread.kind === "one-sided" ? "one-sided quote; no midpoint" : "bid/ask unavailable";
+  const quoteTime = timestamp(reference.lastUpdated);
+  const tradeTime = timestamp(reference.lastTradeDate * 1000);
+  return [
+    `${reference.contractSymbol} · ${reference.currency || "currency unknown"} · expires ${formatExpDate(reference.expiration)}`,
+    `Bid ${price(bid)} · Ask ${price(ask)} · ${market}`,
+    `Quote ${quoteTime ?? "time unavailable"} · Last ${price(reference.lastPrice)} · trade ${tradeTime ?? "time unavailable"}`,
+  ];
+}

package/src/plugins/builtin/options/quote-context.tsx

@@ -0,0 +1,29 @@
+import { Prose } from "../../../components";
+import { Box, ScrollBox } from "../../../ui";
+import { colors } from "../../../theme/colors";
+import { wrapTextLines } from "../../../utils/text-wrap";
+import { optionMarketReferenceLines, type OptionMarketReference } from "./market-reference";
+
+export function optionQuoteContextHeight(reference: OptionMarketReference | undefined, width: number, maximum: number, snapshot = false): number {
+  return reference ? Math.min(Math.max(1, maximum), optionMarketReferenceLines(reference)
+    .reduce((height, line, index) => height + wrapTextLines(snapshot && index === 0 ? `Snapshot: ${line}` : line, Math.max(8, width)).length, 0)) : 0;
+}
+
+/** Shared source context for the selected chain contract and its calculator snapshot. */
+export function OptionQuoteContext({ reference, width, height, snapshot = false, scrollable = true }: {
+  reference: OptionMarketReference;
+  width: number;
+  height: number;
+  snapshot?: boolean;
+  /** A parent scrolling the full result body can own overflow instead. */
+  scrollable?: boolean;
+}) {
+  const content = <Box flexDirection="column">
+    {optionMarketReferenceLines(reference).map((line, index) => (
+      <Prose key={index} text={snapshot && index === 0 ? `Snapshot: ${line}` : line} width={Math.max(8, width)} color={colors.textDim} />
+    ))}
+  </Box>;
+  return scrollable
+    ? <ScrollBox key={JSON.stringify(reference)} height={height} flexShrink={0} scrollY focusable={false}>{content}</ScrollBox>
+    : content;
+}

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

@@ -0,0 +1,100 @@
+import { afterEach, expect, test } from "bun:test";
+import { applyTheme, colors } from "../../../theme/colors";
+import { contrastRatio } from "../../../theme/color-utils";
+import { DEFAULT_THEME, getThemeIds } from "../../../theme/themes";
+import type { OptionContract } from "../../../types/financials";
+import { createOptionColumns, optionColumnColor, renderOptionCell } from "./table";
+import type { OptionColumn, OptionTableRow } from "./types";
+
+// The band has to clear the neighbouring one by this much to read as a band at
+// all, and the text standing on it stays held to the body minimum.
+const MONEYNESS_MIN_SEPARATION = 1.45;
+const BODY_TEXT_MIN = 4.5;
+
+const FIELDS = ["bid", "ask", "spread", "last", "delta", "iv", "volume"] as const;
+
+function contract(strike: number, inTheMoney: boolean): OptionContract {
+  return {
+    contractSymbol: `AAPL260619C${String(strike * 1000).padStart(8, "0")}`,
+    strike,
+    currency: "USD",
+    lastPrice: 10,
+    change: 0,
+    percentChange: 0,
+    volume: 100,
+    openInterest: 200,
+    bid: 9.95,
+    ask: 10.05,
+    impliedVolatility: 0.2,
+    inTheMoney,
+    expiration: 1_782_345_600,
+    lastTradeDate: 1_782_000_000,
+  };
+}
+
+// A call below the money and a put above it: one row carrying both bands.
+const ROW: OptionTableRow = {
+  strike: 100,
+  call: contract(100, true),
+  put: contract(100, false),
+  isPositionStrike: false,
+};
+
+const COLUMNS = createOptionColumns(FIELDS).map((column) => ({
+  ...column,
+  headerColor: "#ffffff",
+})) as OptionColumn[];
+
+function cells(selected: boolean) {
+  return COLUMNS.map((column) => ({
+    column,
+    cell: renderOptionCell(ROW, column, 0, { selected }),
+  }));
+}
+
+afterEach(() => {
+  applyTheme(DEFAULT_THEME);
+});
+
+/**
+ * A fixed blend ratio used to leave this band anywhere between plainly visible
+ * and invisible depending on where a palette put its accent, which is exactly
+ * the sort of drift a new theme reintroduces without anyone noticing.
+ */
+test("every theme separates the moneyness bands and keeps their text readable", () => {
+  for (const themeId of getThemeIds()) {
+    applyTheme(themeId);
+    const rendered = cells(false).filter(({ column }) => column.side);
+    const inTheMoney = rendered.filter(({ column }) => column.side === "call");
+    const outOfTheMoney = rendered.filter(({ column }) => column.side === "put");
+    expect(inTheMoney.length).toBeGreaterThan(0);
+    expect(outOfTheMoney.length).toBeGreaterThan(0);
+
+    const otmSurface = outOfTheMoney[0]!.cell.backgroundColor!;
+    for (const { cell } of outOfTheMoney) expect(cell.backgroundColor).toBe(otmSurface);
+
+    for (const { column, cell } of inTheMoney) {
+      const surface = cell.backgroundColor!;
+      const separation = contrastRatio(surface, otmSurface);
+      if (separation < MONEYNESS_MIN_SEPARATION) {
+        throw new Error(`${themeId} ${column.id} band separation ${separation.toFixed(2)} is below ${MONEYNESS_MIN_SEPARATION}`);
+      }
+      const text = contrastRatio(optionColumnColor(column, surface), surface);
+      if (text < BODY_TEXT_MIN) {
+        throw new Error(`${themeId} ${column.id} text contrast ${text.toFixed(2)} on its band is below ${BODY_TEXT_MIN}`);
+      }
+    }
+  }
+});
+
+/** The selection colour has to win outright, or the row stops reading as selected. */
+test("a selected row drops the moneyness bands entirely", () => {
+  for (const themeId of getThemeIds()) {
+    applyTheme(themeId);
+    for (const { column, cell } of cells(true)) {
+      if (column.side && cell.backgroundColor !== undefined) {
+        throw new Error(`${themeId} ${column.id} kept a band while selected`);
+      }
+    }
+  }
+});

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

@@ -2,9 +2,10 @@ import { TextAttributes } from "../../../ui";
 import type { DataTableCell } from "../../../components";
 import type { OptionContract, OptionsChain } from "../../../types/financials";
 import { blendHex, colors } from "../../../theme/colors";
-import { blendForContrast, contrastRatio } from "../../../theme/color-utils";
-import { formatCompact, formatNumber } from "../../../utils/format";
+import { blendForContrast, blendForSeparation, contrastRatio } from "../../../theme/color-utils";
+import { formatCompact } from "../../../utils/format";
 import { formatMarketPrice } from "../../../market-data/market/format";
+import { optionSpread } from "./market-reference";
 import type {
   OptionColumn,
   OptionFieldId,
@@ -23,10 +24,18 @@ type OptionFieldDef = {
 };
 
 const OPTION_TEXT_MIN_CONTRAST = 4.5;
+// How far the in-the-money band has to stand off the out-of-the-money one. The
+// two sit edge to edge across the strike column, so this is the step the eye
+// actually reads, and holding it fixed is what makes the banding land the same
+// way on every palette. The ceiling keeps the band a tint of the background
+// rather than a wall of the side colour.
+const MONEYNESS_MIN_SEPARATION = 1.45;
+const MONEYNESS_MAX_TINT = 0.42;
 
 export const OPTION_FIELD_DEFS: OptionFieldDef[] = [
   { id: "bid", label: "Bid", header: "BID", width: 7, description: "Best bid price." },
   { id: "ask", label: "Ask", header: "ASK", width: 7, description: "Best ask price." },
+  { id: "spread", label: "Spread", header: "SPRD", width: 6, description: "Bid/ask width as a share of the midpoint, the comparable liquidity read across strikes." },
   { id: "last", label: "Last", header: "LAST", width: 7, description: "Last traded price." },
   { id: "delta", label: "Delta", header: "Δ", width: 6, description: "Price sensitivity to a $1 move in the underlying." },
   { id: "gamma", label: "Gamma", header: "Γ", width: 7, description: "Delta sensitivity to a $1 move in the underlying." },
@@ -38,7 +47,7 @@ export const OPTION_FIELD_DEFS: OptionFieldDef[] = [
   { id: "openInterest", label: "Open interest", header: "OI", width: 6, description: "Outstanding open contracts." },
 ];
 
-export const DEFAULT_OPTION_FIELD_IDS: OptionFieldId[] = ["bid", "ask", "last", "delta", "gamma"];
+export const DEFAULT_OPTION_FIELD_IDS: OptionFieldId[] = ["bid", "ask", "spread", "last", "delta", "gamma"];
 
 const OPTION_FIELDS_BY_ID = new Map(OPTION_FIELD_DEFS.map((field) => [field.id, field]));
 
@@ -106,8 +115,8 @@ export function findNearestStrikeIndex(strikes: number[], targetStrike: number):
 }
 
 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+$/, "");
+  return Number.isFinite(strike)
+    ? strike.toLocaleString("en-US", { maximumSignificantDigits: 21 }) : "—";
 }
 
 export function formatIv(value: number | undefined): string {
@@ -117,6 +126,18 @@ export function formatIv(value: number | undefined): string {
   return `${(value * 100).toFixed(1)}%`;
 }
 
+/**
+ * The width between the two quotes, as a share of their midpoint: the absolute
+ * spread is a subtraction away from the neighbouring columns, while the share
+ * is what makes one strike comparable to another. Bounded above by 200%, since
+ * a zero bid leaves no midpoint at all. Why a quote has none is the status
+ * bar's to say; the column has room only for the number.
+ */
+function formatSpreadPercent(contract: OptionContract): string {
+  const spread = optionSpread(contract);
+  return spread.kind === "two-sided" ? `${spread.percentOfMid.toFixed(1)}%` : "—";
+}
+
 function formatGreek(value: number | undefined): string {
   if (value == null || !Number.isFinite(value)) return "\u2014";
   return value.toFixed(3).replace(/^(-?)0\./, "$1.");
@@ -141,7 +162,7 @@ function optionColumnRole(column: Pick<OptionColumn, "field" | "side">): OptionC
   if (column.field === "strike") return "strike";
   if (column.field === "iv") return "iv";
   if (column.field === "volume" || column.field === "openInterest") return "activity";
-  if (column.field === "bid" || column.field === "ask") return "price";
+  if (column.field === "bid" || column.field === "ask" || column.field === "spread") return "price";
   return column.side ?? "strike";
 }
 
@@ -196,11 +217,16 @@ function optionMoneynessBackground(
   rowState: { selected: boolean },
 ): string | undefined {
   if (rowState.selected || !column.side) return undefined;
-  const inTheMoney = inferColumnMoneyness(row, contract, column.side);
+  const outOfTheMoney = blendHex(colors.bg, colors.neutral, 0.055);
+  if (!inferColumnMoneyness(row, contract, column.side)) return outOfTheMoney;
   const sideColor = column.side === "call" ? colors.positive : colors.negative;
-  return inTheMoney
-    ? blendHex(colors.bg, sideColor, 0.13)
-    : blendHex(colors.bg, colors.neutral, 0.055);
+  return blendForSeparation(
+    colors.bg,
+    sideColor,
+    outOfTheMoney,
+    MONEYNESS_MIN_SEPARATION,
+    MONEYNESS_MAX_TINT,
+  );
 }
 
 function inferColumnMoneyness(
@@ -222,11 +248,15 @@ function formatOptionContractCell(
   const greeks = optionGreeksForColumn(row, column);
   switch (column.field) {
     case "last":
-      return formatMarketPrice(contract.lastPrice, { assetCategory: "OPT", maxWidth: column.width });
+      return contract.lastPrice > 0
+        ? formatMarketPrice(contract.lastPrice, { assetCategory: "OPT", maxWidth: column.width })
+        : "—";
     case "bid":
       return formatMarketPrice(contract.bid, { assetCategory: "OPT", maxWidth: column.width });
     case "ask":
       return formatMarketPrice(contract.ask, { assetCategory: "OPT", maxWidth: column.width });
+    case "spread":
+      return formatSpreadPercent(contract);
     case "volume":
       return formatCompact(contract.volume);
     case "openInterest":

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

@@ -5,6 +5,7 @@ import type { OptionSide, OptionValuation } from "../options-calculator/model";
 export type OptionFieldId =
   | "bid"
   | "ask"
+  | "spread"
   | "last"
   | "delta"
   | "gamma"