@gloom-sh/terminal 0.0.0-stage → 0.18.5

package/src/plugins/builtin/options-scenario/collar.ts

@@ -0,0 +1,143 @@
+import type { StatItem } from "../../../components";
+import type { HeadlessPaneEntry } from "../../../types/headless";
+import { formatHedgePrice } from "./hedge";
+import { amountUnit, UNKNOWN_CURRENCY, type ScenarioPosition } from "./model";
+
+/**
+ * A collar (docs/research-data.md#collar): one long put and one short call on
+ * the same expiry, with the shares they cover. Per share, for the position as
+ * entered:
+ *
+ * - net premium = call price - put price; positive is a net credit, negative a net debit
+ * - floor = put strike + net premium: the least the shares are worth at expiry, net of the options
+ * - cap = call strike + net premium: the most they are worth
+ *
+ * The floor and cap hold when the shares match the contracts (contracts x
+ * multiplier); without shares the options alone have neither.
+ */
+export interface Collar {
+  currency: string;
+  /** Expiry calendar date, YYYY-MM-DD. */
+  expiry: string;
+  contracts: number;
+  multiplier: number;
+  put: CollarLeg;
+  call: CollarLeg;
+  /** Signed shares held with the options; 0 for none. */
+  shares: number;
+  /** The shares the contracts cover: contracts x multiplier. */
+  coveredShares: number;
+  /** Per share: call price - put price; positive is a credit. */
+  netPremium: number;
+  /** For the whole position: net premium x multiplier x contracts. */
+  netPremiumTotal: number;
+  /** Per share; null unless the shares match the contracts. */
+  floor: number | null;
+  cap: number | null;
+  spot: number;
+  /** What the spot is: `implied by option quotes`, `typed`, `last price`. */
+  spotBasis: string;
+}
+
+interface CollarLeg {
+  strike: number;
+  /** Per share. */
+  price: number;
+  /** "mid" when a strategy seed entered the leg at its quote midpoint, else the entry price as typed. */
+  priceBasis: "mid" | "entry";
+}
+
+const clean = (value: number) => Math.round(value * 1e9) / 1e9;
+
+/** The position as a collar, or null when it is not one long put and one short call of the same size, expiry and multiplier. */
+export function scenarioCollar(position: ScenarioPosition, spotBasis: string): Collar | null {
+  if (position.legs.length !== 2) return null;
+  const put = position.legs.find((leg) => leg.side === "put" && leg.quantity > 0);
+  const call = position.legs.find((leg) => leg.side === "call" && leg.quantity < 0);
+  if (!put || !call || put.quantity !== -call.quantity || put.expiration !== call.expiration || put.multiplier !== call.multiplier
+    || put.strike >= call.strike) return null;
+  const contracts = put.quantity;
+  const coveredShares = contracts * put.multiplier;
+  const shares = position.underlying?.quantity ?? 0;
+  const netPremium = clean(call.price - put.price);
+  const covered = shares === coveredShares;
+  return {
+    currency: position.currency, expiry: new Date(put.expiration * 1000).toISOString().slice(0, 10),
+    contracts, multiplier: put.multiplier,
+    put: { strike: put.strike, price: put.price, priceBasis: put.priceSource === "mid" ? "mid" : "entry" },
+    call: { strike: call.strike, price: call.price, priceBasis: call.priceSource === "mid" ? "mid" : "entry" },
+    shares, coveredShares, netPremium, netPremiumTotal: clean(netPremium * coveredShares),
+    floor: covered ? clean(put.strike + netPremium) : null, cap: covered ? clean(call.strike + netPremium) : null,
+    spot: position.spot, spotBasis,
+  };
+}
+
+const money = (value: number) => value.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+const strikeText = (value: number) => formatHedgePrice(value).replace(/\.00$/, "");
+const unitOf = (collar: Collar) => collar.currency && collar.currency !== UNKNOWN_CURRENCY ? ` ${collar.currency}` : "";
+const priceWord = (leg: CollarLeg) => leg.priceBasis === "mid" ? "quote mid" : "entry price";
+/** `debit`, `credit`, or `zero cost` for a premium that nets to nothing. */
+const premiumWord = (collar: Collar) => collar.netPremium > 0 ? "credit" : collar.netPremium < 0 ? "debit" : "zero cost";
+
+/** `10.4% below spot 382.71 (implied by option quotes)`. */
+function distanceText(collar: Collar, price: number): string {
+  if (!(collar.spot > 0)) return "";
+  const distance = (price - collar.spot) / collar.spot;
+  const basis = collar.spotBasis && collar.spotBasis !== "last price" ? ` (${collar.spotBasis})` : "";
+  return `, ${(Math.abs(distance) * 100).toFixed(1)}% ${distance < 0 ? "below" : "above"} spot ${money(collar.spot)}${basis}`;
+}
+
+/** Why there is no floor or cap: no shares, or not the shares the contracts cover. */
+function uncoveredText(collar: Collar): string {
+  if (collar.shares === 0) return "-- (no shares held: the options alone)";
+  return `-- (${collar.shares.toLocaleString("en-US")} shares held; the contracts cover ${collar.coveredShares.toLocaleString("en-US")})`;
+}
+
+/** `342.80 per share (345 put - 2.20 debit), 10.4% below spot 382.71`. */
+function boundText(collar: Collar, value: number | null, side: "put" | "call"): string {
+  if (value == null) return uncoveredText(collar);
+  const premium = collar.netPremium === 0 ? "" : ` ${collar.netPremium > 0 ? "+" : "-"} ${formatHedgePrice(Math.abs(collar.netPremium))} ${premiumWord(collar)}`;
+  return `${formatHedgePrice(value)} per share (${strikeText(collar[side].strike)} ${side}${premium})${distanceText(collar, value)}`;
+}
+
+/** The report's Collar section; `value` keeps full precision, `formatted` is what text output prints. */
+export function collarReportEntries(collar: Collar): HeadlessPaneEntry[] {
+  const unit = unitOf(collar);
+  const premium = Math.abs(collar.netPremium);
+  // Every figure is per share, so an export writes the number with that unit.
+  const perShare = { unit: `${amountUnit(collar.currency)} per share` };
+  return [
+    { key: "putBought", label: "Put bought", value: collar.put.price, ...perShare,
+      formatted: `${strikeText(collar.put.strike)} put at ${formatHedgePrice(collar.put.price)} per share (${priceWord(collar.put)})` },
+    { key: "callSold", label: "Call sold", value: collar.call.price, ...perShare,
+      formatted: `${strikeText(collar.call.strike)} call at ${formatHedgePrice(collar.call.price)} per share (${priceWord(collar.call)})` },
+    { key: "netPremium", label: "Net premium", value: collar.netPremium, ...perShare,
+      formatted: collar.netPremium === 0 ? `0.00 per share (zero cost)`
+        : `${formatHedgePrice(premium)} per share ${premiumWord(collar)} (${money(Math.abs(collar.netPremiumTotal))}${unit} `
+          + `for ${collar.contracts.toLocaleString("en-US")} ${collar.contracts === 1 ? "contract" : "contracts"} each)` },
+    { key: "floor", label: "Floor", value: collar.floor, ...perShare, formatted: boundText(collar, collar.floor, "put") },
+    { key: "cap", label: "Cap", value: collar.cap, ...perShare, formatted: boundText(collar, collar.cap, "call") },
+  ];
+}
+
+/** `-10.4% vs 382.71`. */
+function shortDistance(collar: Collar, value: number): string {
+  if (!(collar.spot > 0)) return "per share";
+  const distance = (value - collar.spot) / collar.spot;
+  return `${distance < 0 ? "-" : "+"}${(Math.abs(distance) * 100).toFixed(1)}% vs ${money(collar.spot)}`;
+}
+
+/** The pane's figures: the same numbers as the report, sized for a StatGrid. */
+export function collarStatItems(collar: Collar): StatItem[] {
+  const uncovered = collar.shares === 0 ? "no shares" : `${collar.coveredShares.toLocaleString("en-US")} shares cover it`;
+  return [
+    { id: "collar-premium", label: "Net premium", value: formatHedgePrice(Math.abs(collar.netPremium)),
+      detail: collar.netPremium === 0 ? "zero cost" : `${premiumWord(collar)} per share` },
+    { id: "collar-floor", label: "Floor", value: collar.floor == null ? "--" : formatHedgePrice(collar.floor),
+      detail: collar.floor == null ? uncovered : shortDistance(collar, collar.floor) },
+    { id: "collar-cap", label: "Cap", value: collar.cap == null ? "--" : formatHedgePrice(collar.cap),
+      detail: collar.cap == null ? uncovered : shortDistance(collar, collar.cap) },
+    { id: "collar-shares", label: "Shares", value: collar.shares.toLocaleString("en-US"),
+      detail: collar.shares === collar.coveredShares ? "covered" : `of ${collar.coveredShares.toLocaleString("en-US")}` },
+  ];
+}

package/src/plugins/builtin/options-scenario/csp-screen-headless.ts

@@ -0,0 +1,127 @@
+import type { HeadlessPaneColumn, HeadlessPaneDefinition } from "../../../types/plugin";
+import { expirationOptionSeconds, OPTION_EXPIRATION_FORMAT, OPTION_EXPIRATION_PLACEHOLDER } from "../../../utils/option-expiry";
+import { resolveHeadlessInstrument } from "../shared/headless-market-data";
+import { createScenarioDependencies } from "./client";
+import { formatHedgePrice } from "./hedge";
+import { exportPercent } from "./model";
+import {
+  CSP_SCREEN_DEFAULTS, CSP_SCREEN_LIMIT, cspEarningsText, cspScreenCriteriaText, loadCspScreen, readCspScreenCriteria,
+  type CspScreen, type CspScreenRow,
+} from "./csp-screen";
+
+const percentCell = (digits: number) => (value: unknown) => typeof value === "number" ? `${value.toFixed(digits)}%` : "--";
+const priceCell = (value: unknown) => typeof value === "number" ? formatHedgePrice(value) : "--";
+const strikeCell = (value: unknown) => typeof value === "number" ? String(value) : "--";
+
+/** One name's row, flat, every percent in percent. */
+export type CspScreenReportRow = {
+  rank: number | null; symbol: string; expiry: string | null; days: number | null; strike: number | null;
+  bid: number | null; ask: number | null; spread: number | null; wide: boolean | null; delta: number | null; otm: number | null;
+  midYield: number | null; bidYield: number | null; ivRank: number | null;
+  earnings: string; earningsBeforeExpiry: boolean | null; earningsDate: string | null; spot: number | null; note: string | null;
+};
+
+export function cspScreenReportRow(row: CspScreenRow): CspScreenReportRow {
+  const { csp } = row;
+  return {
+    rank: row.rank, symbol: row.symbol,
+    expiry: csp?.expiry ?? null, days: csp?.daysToExpiry ?? null, strike: csp?.strike ?? null,
+    bid: csp?.quote?.bid ?? null, ask: csp?.quote?.ask ?? null, spread: exportPercent(csp?.quote?.spreadOfMid), wide: csp?.quote ? row.wideSpread : null,
+    delta: row.delta, otm: exportPercent(csp?.outOfTheMoney), midYield: exportPercent(csp?.annualizedYield),
+    bidYield: exportPercent(csp?.quote?.bidAnnualizedYield), ivRank: row.ivRank,
+    earnings: cspEarningsText(csp), earningsBeforeExpiry: csp ? csp.earnings.beforeExpiry : null, earningsDate: csp?.earnings.date ?? null,
+    spot: csp?.spot ?? null, note: row.note,
+  };
+}
+
+const COLUMNS: HeadlessPaneColumn[] = [
+  { key: "rank", header: "#", align: "right", format: (value) => typeof value === "number" ? String(value) : "" },
+  { key: "symbol", header: "Symbol" },
+  { key: "expiry", header: "Expiry" },
+  { key: "days", header: "DTE", align: "right" },
+  { key: "strike", header: "Strike", align: "right", format: strikeCell },
+  { key: "bid", header: "Bid", align: "right", format: priceCell },
+  { key: "ask", header: "Ask", align: "right", format: priceCell },
+  // The text view marks a wide spread in its cell; exports keep the number and say so in Wide.
+  { key: "spread", header: "Spread", align: "right", format: percentCell(1),
+    textFormat: (value, row) => `${percentCell(1)(value)}${row.wide ? " wide" : ""}` },
+  { key: "delta", header: "Delta", align: "right", format: (value) => typeof value === "number" ? value.toFixed(2) : "--" },
+  { key: "otm", header: "OTM", align: "right", format: percentCell(1) },
+  { key: "midYield", header: "Mid yield/yr", align: "right", format: percentCell(2) },
+  { key: "bidYield", header: "Bid yield/yr", align: "right", format: percentCell(2) },
+  { key: "ivRank", header: "IVR", align: "right", format: (value) => typeof value === "number" ? value.toFixed(0) : "--" },
+  { key: "earnings", header: "Earnings" },
+];
+const NOTE: HeadlessPaneColumn = { key: "note", header: "Note", underRow: true };
+const EXPORT_ONLY: HeadlessPaneColumn[] = [
+  { key: "wide", header: "Wide spread", format: (value) => value === true ? "yes" : value === false ? "no" : "" },
+  { key: "earningsBeforeExpiry", header: "Earnings before expiry", format: (value) => value === true ? "yes" : value === false ? "no" : "unknown" },
+  { key: "earningsDate", header: "Earnings date" },
+  { key: "spot", header: "Spot", format: priceCell },
+];
+
+/** `A`, `A and B`, `A, B and C`. */
+const listText = (items: readonly string[]) => items.length <= 1 ? items.join("") : `${items.slice(0, -1).join(", ")} and ${items.at(-1)}`;
+
+/**
+ * The ranking basis and the wide flag's limit, then the names IV history has no
+ * rank for: those with a reason say it (`No IV rank: BBB (fewer than 120
+ * sessions).`), and a bare symbol, which has none to give, is just not ranked
+ * yet (`No IV rank for DAL yet.`).
+ */
+export function cspScreenNotes(screen: Pick<CspScreen, "criteria" | "missingRanks">): string[] {
+  const reasoned = screen.missingRanks.filter((entry) => entry.includes(" "));
+  const bare = screen.missingRanks.filter((entry) => !entry.includes(" "));
+  return [
+    `Ranked by annualised yield at the bid. Wide is a spread over ${screen.criteria.maxSpreadPercent}% of the mid (--max-spread).`,
+    ...(reasoned.length ? [`No IV rank: ${reasoned.join(", ")}.`] : []),
+    ...(bare.length ? [`No IV rank for ${listText(bare)} yet.`] : []),
+  ];
+}
+
+export const cspScreenHeadless: HeadlessPaneDefinition<"rows"> = {
+  shape: "rows",
+  argument: { kind: "tickers", maximum: CSP_SCREEN_LIMIT, description: "US option underlyings to rank" },
+  usListingsOnly: "Options data",
+  failsWithoutData: true,
+  description: "Cash-secured puts across a list, ranked by annualised yield on cash at the bid: for each name, the put nearest a delta "
+    + "(0.30) on the listed expiry nearest a date or a number of days out (30), with its strike, bid, ask, spread (flagged wide over "
+    + "--max-spread, never left out), delta, distance out of the money, yield at the mid and at the bid, IV rank and whether earnings fall before expiry.",
+  discovery: { screenshotReadiness: "live-dom", dataRequirements: ["Current option chains", "Cloud stored implied volatility", "Earnings calendar"],
+    limitations: ["Assignment, margin and the interest the cash earns are not modelled."] },
+  describe: (_args, result) => {
+    const criteria = (result?.metadata as { criteria?: CspScreen["criteria"] } | undefined)?.criteria;
+    return ["Cash-secured puts", ...(criteria ? [cspScreenCriteriaText(criteria, Date.now())] : [])].join(" · ");
+  },
+  options: [
+    { key: "delta", type: "string", placeholder: "0.30", example: "--delta 0.20",
+      description: `Each name's put is the one whose delta is nearest this, as a put's delta reads without its sign. Default ${CSP_SCREEN_DEFAULTS.delta.toFixed(2)}` },
+    { key: "days", type: "string", placeholder: "days", example: "--days 45",
+      description: `Each name's expiry is its listed one nearest this many calendar days out. Default ${CSP_SCREEN_DEFAULTS.days}` },
+    { key: "expiration", type: "string", placeholder: OPTION_EXPIRATION_PLACEHOLDER, example: "--expiration 2026-11-20",
+      description: `Each name's expiry is its listed one nearest this date, in place of --days, as ${OPTION_EXPIRATION_FORMAT}`,
+      normalize: (value) => expirationOptionSeconds(value) },
+    { key: "maxSpread", aliases: ["max-spread"], type: "string", placeholder: "percent", example: "--max-spread 15",
+      description: `A put whose bid/ask spread is over this percent of its mid is marked wide; it is still ranked. Default ${CSP_SCREEN_DEFAULTS.maxSpreadPercent}` },
+  ],
+  async load(args, ctx) {
+    const criteria = readCspScreenCriteria(args.options);
+    const instruments = await Promise.all(args.symbols.map((symbol) => resolveHeadlessInstrument(ctx, symbol)));
+    const screen = await loadCspScreen(instruments, criteria, {
+      scenario: createScenarioDependencies(ctx.marketData, ctx.apiClient), earnings: ctx.marketData, ivApi: ctx.apiClient,
+    }, ctx.signal);
+    const unavailable = screen.rows.filter((row) => !row.csp);
+    return {
+      freshness: screen.freshness,
+      columns: [...COLUMNS, ...EXPORT_ONLY, NOTE],
+      textColumns: [...COLUMNS, NOTE],
+      rows: screen.rows.map(cspScreenReportRow),
+      complete: unavailable.length === 0 && !screen.ivRankError,
+      unavailableSymbols: unavailable.map((row) => row.symbol),
+      errors: screen.ivRankError ? [`IV rank unavailable: ${screen.ivRankError}`] : [],
+      notes: cspScreenNotes(screen),
+      metadata: { criteria: screen.criteria, rankedBy: "annualized yield on cash at the bid", unit: "percent; prices per share",
+        methodology: "docs/research-data.md#cash-secured-put-screen" },
+    };
+  },
+};

package/src/plugins/builtin/options-scenario/csp-screen-pane.tsx

@@ -0,0 +1,165 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { DataTableView, PaneStatusBody, QueryBar, usePaneFooter, usePaneNoticeFooter, type DataTableColumn, type DataTableKeyEvent } from "../../../components";
+import { useAsyncResource } from "../../../react/async-resource";
+import { useAutoRefresh } from "../../../react/auto-refresh";
+import { usePaneSettingValue, usePluginAppActions } from "../../../public/react";
+import { useThemeColors } from "../../../theme/theme-context";
+import type { PaneProps } from "../../../types/plugin";
+import { Box } from "../../../ui";
+import { parsePublicTickerKey } from "../../../utils/exchanges";
+import { compareSortValues, nextHeaderSort, type SortDirection } from "../../../utils/sort-values";
+import { useAssetData } from "../../runtime";
+import { createScenarioDependencies } from "./client";
+import { cspScreenNotes, cspScreenReportRow, type CspScreenReportRow } from "./csp-screen-headless";
+import { CSP_SCREEN_DEFAULTS, CSP_SCREEN_LIMIT, cspScreenCriteriaText, cspTargetDate, loadCspScreen, readCspScreenCriteria, type CspScreenRow } from "./csp-screen";
+import { formatHedgePrice } from "./hedge";
+
+type ScreenRow = CspScreenReportRow & { source: CspScreenRow };
+
+const COLUMNS: DataTableColumn[] = [
+  { id: "rank", label: "#", width: 3, align: "right" },
+  { id: "symbol", label: "Symbol", width: 7, align: "left" },
+  { id: "expiry", label: "Expiry", width: 10, align: "right" },
+  { id: "days", label: "DTE", width: 4, align: "right" },
+  { id: "strike", label: "Strike", width: 8, align: "right" },
+  { id: "bid", label: "Bid", width: 7, align: "right" },
+  { id: "ask", label: "Ask", width: 7, align: "right" },
+  { id: "spread", label: "Spread", width: 11, align: "right" },
+  { id: "delta", label: "Delta", width: 6, align: "right" },
+  { id: "otm", label: "OTM", width: 6, align: "right" },
+  { id: "midYield", label: "Mid yield/yr", width: 12, align: "right" },
+  { id: "bidYield", label: "Bid yield/yr", width: 12, align: "right" },
+  { id: "ivRank", label: "IVR", width: 4, align: "right" },
+  { id: "earnings", label: "Earnings", width: 17, align: "left" },
+];
+
+const DELTA_OPTIONS = ["0.10", "0.15", "0.20", "0.25", "0.30", "0.35", "0.40", "0.50"];
+const DAYS_OPTIONS = ["7", "14", "21", "30", "45", "60", "90"];
+const SYMBOLS_FIELD_WIDTH = 24;
+/** Symbols apply once typing pauses, so a half-typed ticker does not start a screen. */
+const SYMBOLS_DEBOUNCE_MS = 700;
+
+const symbolList = (text: string) => [...new Set(text.split(/[\s,;]+/).map((symbol) => symbol.trim().toUpperCase()).filter(Boolean))];
+const percentText = (value: unknown, digits: number) => typeof value === "number" ? `${value.toFixed(digits)}%` : "--";
+const priceText = (value: unknown) => typeof value === "number" ? formatHedgePrice(value) : "--";
+/** A column's value to sort on: earnings by date, a flag as a number. */
+function sortValue(row: CspScreenReportRow, columnId: string): string | number | null {
+  if (columnId === "earnings") return row.earningsDate;
+  const value = row[columnId as keyof CspScreenReportRow];
+  return typeof value === "boolean" ? Number(value) : value;
+}
+/** A select's options with the current value kept when it is not a preset (a delta typed on the command line). */
+const withCurrent = (presets: readonly string[], current: string, label: (value: string) => string) =>
+  [...new Set([...presets, current])].sort((a, b) => Number(a) - Number(b)).map((value) => ({ value, label: label(value) }));
+
+export function CspScreenPane({ width, height, focused }: PaneProps) {
+  const colors = useThemeColors();
+  const [symbolsText, setSymbolsText] = usePaneSettingValue<string>("symbols", "");
+  const [delta, setDelta] = usePaneSettingValue<string | number>("delta", "");
+  const [days, setDays] = usePaneSettingValue<string | number>("days", "");
+  const [expiration, setExpiration] = usePaneSettingValue<string | number>("expiration", "");
+  const [maxSpread] = usePaneSettingValue<string | number>("maxSpread", "");
+  const [symbolsActive, setSymbolsActive] = useState(false);
+  const { createPaneFromTemplate } = usePluginAppActions();
+  const assetData = useAssetData();
+  const typed = useMemo(() => symbolList(String(symbolsText ?? "")), [symbolsText]);
+  // The screen reads the first names it can rank; the footer names the rest.
+  const symbols = useMemo(() => typed.slice(0, CSP_SCREEN_LIMIT), [typed]);
+  const leftOut = typed.slice(CSP_SCREEN_LIMIT);
+  const criteria = useMemo(() => {
+    try { return { value: readCspScreenCriteria({ delta, days, expiration, maxSpread }), error: null }; }
+    catch (error) { return { value: null, error: error instanceof Error ? error.message : String(error) }; }
+  }, [delta, days, expiration, maxSpread]);
+  const controller = useRef<AbortController | null>(null);
+  const key = JSON.stringify([symbols, criteria.value]);
+  const loader = useCallback(async () => {
+    controller.current?.abort();
+    const current = new AbortController();
+    controller.current = current;
+    return loadCspScreen(symbols.map((symbol) => parsePublicTickerKey(symbol)), criteria.value!,
+      { scenario: createScenarioDependencies(), earnings: assetData }, current.signal);
+  }, [key, assetData]);
+  const resource = useAsyncResource(symbols.length && criteria.value ? loader : null);
+  useEffect(() => () => controller.current?.abort(), [loader]);
+  useAutoRefresh(resource.updatedAt, resource.load);
+  const [sort, setSort] = useState<{ columnId: string; direction: SortDirection }>({ columnId: "rank", direction: "asc" });
+  const rows = useMemo<ScreenRow[]>(() => {
+    const flat = (resource.data?.rows ?? []).map((row) => ({ ...cspScreenReportRow(row), source: row }));
+    // Unranked names stay under the ranked ones whichever way rank sorts.
+    return flat.sort((left, right) => sort.columnId === "rank"
+      ? compareSortValues(left.rank ?? Number.POSITIVE_INFINITY, right.rank ?? Number.POSITIVE_INFINITY, sort.direction)
+      : compareSortValues(sortValue(left, sort.columnId), sortValue(right, sort.columnId), sort.direction));
+  }, [resource.data, sort]);
+  const [selected, setSelected] = useState<string | null>(null);
+  const screen = resource.data;
+  const notices = [criteria.error, resource.data ? null : resource.error,
+    leftOut.length ? `Ranks the first ${CSP_SCREEN_LIMIT} symbols; ${leftOut.length} left out: ${leftOut.join(", ")}` : null,
+    ...(screen?.ivRankError ? [`IV rank unavailable: ${screen.ivRankError}`] : []),
+    ...(screen?.rows ?? []).flatMap((row) => row.note ? [`${row.symbol}: ${row.note}`] : []),
+    ...(screen ? cspScreenNotes(screen).slice(1) : [])].filter((value): value is string => !!value);
+  usePaneNoticeFooter({ registrationId: "csp-screen-notices", notices, focused });
+  // The bar names the delta and the expiry; the footer says only what changes.
+  usePaneFooter("csp-screen", () => ({ info: [
+    ...(resource.loading ? [{ id: "loading", parts: [{ text: "loading", tone: "muted" as const }] }] : []),
+  ] }), [resource.loading]);
+  const criteriaText = criteria.value ? cspScreenCriteriaText(criteria.value, Date.now()) : "";
+  // Enter opens the name's put in OSA, at the strike and expiry the screen read.
+  const openScenario = (row: ScreenRow) => {
+    const csp = row.source.csp;
+    if (!csp) return;
+    createPaneFromTemplate("options-scenario-pane", { symbol: row.symbol, values: { strategy: "csp", strike: String(csp.strike), expiration: csp.expiry } });
+  };
+  const handleKey = (event: DataTableKeyEvent): boolean => {
+    if (event.ctrl || event.alt || event.meta || event.name !== "r") return false;
+    void resource.reload();
+    event.preventDefault?.(); event.stopPropagation?.(); return true;
+  };
+  const cell = (row: ScreenRow, id: string): { text: string; color?: string } => {
+    switch (id) {
+      case "rank": return { text: row.rank == null ? "" : String(row.rank), color: colors.textDim };
+      case "symbol": return { text: row.symbol, color: colors.textBright };
+      case "expiry": return { text: String(row.expiry ?? "--"), color: colors.textDim };
+      case "days": return { text: row.days == null ? "--" : String(row.days) };
+      case "strike": return { text: row.strike == null ? "--" : String(row.strike) };
+      case "bid": return { text: priceText(row.bid) };
+      case "ask": return { text: priceText(row.ask) };
+      case "spread": return { text: `${percentText(row.spread, 1)}${row.wide ? " wide" : ""}`, color: row.wide ? colors.warning : undefined };
+      case "delta": return { text: typeof row.delta === "number" ? row.delta.toFixed(2) : "--" };
+      case "otm": return { text: percentText(row.otm, 1) };
+      case "midYield": return { text: percentText(row.midYield, 2), color: colors.textDim };
+      case "bidYield": return { text: percentText(row.bidYield, 2), color: colors.positive };
+      case "ivRank": return { text: typeof row.ivRank === "number" ? row.ivRank.toFixed(0) : "--" };
+      case "earnings": return { text: String(row.earnings), color: row.earningsBeforeExpiry === true ? colors.warning : colors.textDim };
+      default: return { text: "" };
+    }
+  };
+  const deltaValue = criteria.value ? criteria.value.delta.toFixed(2) : CSP_SCREEN_DEFAULTS.delta.toFixed(2);
+  const daysValue = String(criteria.value?.days ?? CSP_SCREEN_DEFAULTS.days);
+  // A date typed on the command line is the expiry's choice until a number of days is picked.
+  const typedDate = criteria.value?.expiration != null ? cspTargetDate(criteria.value, Date.now()) : null;
+  return <Box width={width} height={height} flexDirection="column" overflow="hidden">
+    <QueryBar width={width} filters={[
+      { id: "symbols", kind: "text" as const, label: "Symbols", value: String(symbolsText ?? ""), placeholder: "JPM, GS, KO",
+        width: SYMBOLS_FIELD_WIDTH, debounceMs: SYMBOLS_DEBOUNCE_MS, focused, active: symbolsActive, onActiveChange: setSymbolsActive,
+        onChange: setSymbolsText },
+      { id: "delta", label: "Delta", value: deltaValue, defaultValue: CSP_SCREEN_DEFAULTS.delta.toFixed(2),
+        options: withCurrent(DELTA_OPTIONS, deltaValue, (value) => value), onChange: (value: string) => setDelta(value) },
+      { id: "expiry", label: "Expiry", value: typedDate ?? daysValue, defaultValue: String(CSP_SCREEN_DEFAULTS.days),
+        options: [...withCurrent(DAYS_OPTIONS, daysValue, (value) => `${value} days`), ...(typedDate ? [{ value: typedDate, label: typedDate }] : [])],
+        onChange: (value: string) => { if (value === typedDate) return; setExpiration(""); setDays(value); } },
+    ]} />
+    <PaneStatusBody subject="cash-secured puts" loading={resource.loading && !resource.data}
+      error={criteria.error && !criteria.value ? criteria.error : !resource.data ? resource.error : null}>
+      <DataTableView<ScreenRow> focused={focused && !symbolsActive} columns={COLUMNS} items={rows} rootWidth={width}
+        rootHeight={Math.max(2, height - 1)}
+        getItemKey={(row) => row.symbol} sortColumnId={sort.columnId} sortDirection={sort.direction}
+        emptyStateTitle={symbols.length ? "No puts to rank." : "Type symbols to rank their cash-secured puts."}
+        onHeaderClick={(id) => setSort((current) => nextHeaderSort(current, id, { firstDirection: id === "rank" || id === "symbol" ? "asc" : "desc" }))}
+        selection={{ kind: "id", selectedId: selected ?? rows[0]?.symbol ?? "", getId: (row) => row.symbol, onChange: (id) => setSelected(id) }}
+        onActivate={openScenario} onRootKeyDown={handleKey}
+        getExportMetadata={() => [["puts", criteriaText || undefined], ["ranked by", "annualised yield on cash at the bid"],
+          ["wide", criteria.value ? `spread over ${criteria.value.maxSpreadPercent}% of the mid` : undefined]]}
+        renderCell={(row, column) => cell(row, column.id)} />
+    </PaneStatusBody>
+  </Box>;
+}