@gloom-sh/terminal 0.18.5 → 0.19.1

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

@@ -1,5 +1,9 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { DataTableView, PaneStatusBody, QueryBar, usePaneFooter, usePaneNoticeFooter, type DataTableColumn, type DataTableKeyEvent } from "../../../components";
+import {
+  DataTableView, PaneStatusBody, QueryBar, usePaneFooter, usePaneNoticeFooter, usePaneTabs, type DataTableCell, type DataTableColumn, type DataTableKeyEvent,
+  type QueryBarFilter,
+} from "../../../components";
+import { dropColumnsToFit } from "../../../components/ui/table-layout";
 import { useAsyncResource } from "../../../react/async-resource";
 import { useAutoRefresh } from "../../../react/auto-refresh";
 import { usePaneSettingValue, usePluginAppActions } from "../../../public/react";
@@ -10,11 +14,19 @@ 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 {
+  cspScreenNotes, cspScreenReportRow, rewardRiskText, STRATEGY_MONEY_UNIT, strategyScreenReportRow, type CspScreenReportRow,
+  type StrategyScreenReportRow,
+} from "./csp-screen-headless";
 import { CSP_SCREEN_DEFAULTS, CSP_SCREEN_LIMIT, cspScreenCriteriaText, cspTargetDate, loadCspScreen, readCspScreenCriteria, type CspScreenRow } from "./csp-screen";
 import { formatHedgePrice } from "./hedge";
+import {
+  loadStrategyScreen, readStrategyFamily, readStrategyScreenCriteria, STRATEGY_TABS, strategyFamilyDef, strategyRankedBy,
+  strategyScreenCriteriaText, tabFamilies, type ScreenFamily, type StrategyFamily, type StrategyScreenRow, type StrategyTab,
+} from "./strategy-screen";
 
 type ScreenRow = CspScreenReportRow & { source: CspScreenRow };
+type TradeRow = StrategyScreenReportRow & { source: StrategyScreenRow };
 
 const COLUMNS: DataTableColumn[] = [
   { id: "rank", label: "#", width: 3, align: "right" },
@@ -33,7 +45,50 @@ const COLUMNS: DataTableColumn[] = [
   { id: "earnings", label: "Earnings", width: 17, align: "left" },
 ];
 
+/** At a narrow width the put screen keeps the put, its yield and its risks; its expiry and the mid's yield give way first. */
+const PUT_DROP_ORDER = ["midYield", "expiry", "otm", "ask", "bid", "rank", "delta"];
+
+/** The Trade column fits the longest trade listed, so a condor's bought wings show beside its sold legs. */
+const TRADE_WIDTH = { min: 14, max: 40 };
+const tradeWidth = (rows: readonly { trade: string | null }[]) =>
+  Math.min(TRADE_WIDTH.max, Math.max(TRADE_WIDTH.min, ...rows.map((row) => row.trade?.length ?? 0)));
+
+/**
+ * A family's columns. DTE dates the trade (a calendar's bought expiry is in
+ * its words). Money is per contract, said once in the bar. An income trade
+ * reads its annualised return, a debit trade its reward to risk.
+ */
+const tradeColumns = (strategy: ScreenFamily, tradeColumnWidth: number): DataTableColumn[] => {
+  const credit = strategyFamilyDef(strategy).net === "credit";
+  return [
+    { id: "rank", label: "#", width: 3, align: "right" },
+    { id: "symbol", label: "Symbol", width: 7, align: "left" },
+    { id: "days", label: "DTE", width: 4, align: "right" },
+    { id: "trade", label: "Trade", width: tradeColumnWidth, align: "left", flexGrow: 1 },
+    { id: "net", label: credit ? "Credit" : "Debit", width: 8, align: "right", title: STRATEGY_MONEY_UNIT },
+    { id: "maxGain", label: "Max gain", width: 9, align: "right", title: STRATEGY_MONEY_UNIT },
+    { id: "maxLoss", label: "Max loss", width: 9, align: "right", title: STRATEGY_MONEY_UNIT },
+    { id: "breakEven", label: "Break-even", width: 15, align: "right" },
+    { id: "pop", label: "PoP", width: 4, align: "right" },
+    credit ? { id: "returnPerYear", label: "Return/yr", width: 9, align: "right" }
+      : { id: "rewardRisk", label: "Reward/risk", width: 9, align: "right", title: "Max gain over max loss" },
+    { id: "ivRank", label: "IVR", width: 4, align: "right" },
+    { id: "spread", label: "Spread", width: 11, align: "right" },
+    { id: "earnings", label: "Earnings", width: 13, align: "left" },
+  ];
+};
+/**
+ * What a narrow pane gives up first: the max gain or loss that repeats the
+ * credit or debit, then the break-evens, the rank, the other max, the
+ * earnings flag and the spread. Symbol, DTE, trade, credit or debit, PoP,
+ * the return and IV rank stay at every width.
+ */
+const tradeDropOrder = (strategy: ScreenFamily) => strategyFamilyDef(strategy).net === "credit"
+  ? ["maxGain", "breakEven", "rank", "maxLoss", "earnings", "spread"]
+  : ["maxLoss", "breakEven", "rank", "maxGain", "earnings", "spread"];
+
 const DELTA_OPTIONS = ["0.10", "0.15", "0.20", "0.25", "0.30", "0.35", "0.40", "0.50"];
+const WING_OPTIONS = ["0.05", "0.10", "0.15", "0.20", "0.25", "0.30", "0.35", "0.40"];
 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. */
@@ -42,79 +97,128 @@ 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;
+const moneyText = (value: number) => value.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+const riskText = (value: number | null, unlimited: boolean) => value != null ? moneyText(value) : unlimited ? "unlimited" : "--";
+const MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+/** `before Oct 28`: the flag and the date without its year, which the next report never needs. */
+const earningsCell = (row: { earningsDate: string | null; earningsBeforeExpiry: boolean | null; earnings: string }) => {
+  const date = row.earningsDate;
+  if (!date || row.earningsBeforeExpiry == null) return row.earnings;
+  return `${row.earningsBeforeExpiry ? "before" : "after"} ${MONTHS[Number(date.slice(5, 7)) - 1]} ${Number(date.slice(8, 10))}`;
+};
+/** A column's value to sort on: earnings by date, a flag as a number, an unlimited gain or loss above every limit. */
+function sortValue(row: Record<string, unknown>, columnId: string): string | number | null {
+  if (columnId === "earnings") return typeof row.earningsDate === "string" ? row.earningsDate : null;
+  if ((columnId === "maxGain" || columnId === "rewardRisk") && row.unlimited === "gain") return Number.POSITIVE_INFINITY;
+  if (columnId === "maxLoss" && row.unlimited === "loss") return Number.POSITIVE_INFINITY;
+  const value = row[columnId];
+  return typeof value === "boolean" ? Number(value) : typeof value === "number" || typeof value === "string" ? value : null;
 }
 /** 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) }));
 
+/** OSA's typed legs for a trade (`call,105,2026-11-20,-1,1.64,28.1`), each at its entry price and IV. */
+const osaLegs = (row: StrategyScreenRow) => row.trade!.position.legs.map((leg) => [leg.side, leg.strike, new Date(leg.expiration * 1000).toISOString().slice(0, 10),
+  leg.quantity, Number(leg.price.toFixed(6)), Number((leg.volatility * 100).toFixed(4)), leg.multiplier].join(",")).join(";");
+
 export function CspScreenPane({ width, height, focused }: PaneProps) {
   const colors = useThemeColors();
   const [symbolsText, setSymbolsText] = usePaneSettingValue<string>("symbols", "");
+  const [strategySetting, setStrategySetting] = usePaneSettingValue<string>("strategy", "");
   const [delta, setDelta] = usePaneSettingValue<string | number>("delta", "");
+  const [wingDelta, setWingDelta] = usePaneSettingValue<string | number>("wingDelta", "");
   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 strategy = useMemo((): StrategyFamily => {
+    try { return readStrategyFamily(strategySetting); } catch { return "csp"; }
+  }, [strategySetting]);
+  const family = strategyFamilyDef(strategy);
+  // Each strategy opens at its own deltas; the names and the expiry carry over.
+  const chooseStrategy = (next: StrategyFamily) => {
+    if (next === strategy) return;
+    setStrategySetting(next === "csp" ? "" : next);
+    setDelta("");
+    setWingDelta("");
+  };
+  const { strip: tabStrip, rows: tabRows } = usePaneTabs({ tabs: STRATEGY_TABS.map((tab) => ({ ...tab })), activeValue: family.tab,
+    onSelect: (tab) => chooseStrategy(tabFamilies(tab as StrategyTab)[0]!.id), focused, dense: true });
   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]);
+    try {
+      const options = { delta, wingDelta, days, expiration, maxSpread };
+      if (strategy === "csp") return { value: readCspScreenCriteria(options), trade: null, error: null };
+      return { value: null, trade: readStrategyScreenCriteria(strategy, options), error: null };
+    } catch (error) { return { value: null, trade: null, error: error instanceof Error ? error.message : String(error) }; }
+  }, [strategy, delta, wingDelta, days, expiration, maxSpread]);
+  const ready = criteria.value ?? criteria.trade;
   const controller = useRef<AbortController | null>(null);
-  const key = JSON.stringify([symbols, criteria.value]);
+  const key = JSON.stringify([symbols, strategy, ready]);
   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);
+    const instruments = symbols.map((symbol) => parsePublicTickerKey(symbol));
+    const dependencies = { scenario: createScenarioDependencies(), earnings: assetData };
+    if (criteria.trade) return { kind: "trade" as const, screen: await loadStrategyScreen(instruments, criteria.trade, dependencies, current.signal) };
+    return { kind: "csp" as const, screen: await loadCspScreen(instruments, criteria.value!, dependencies, current.signal) };
   }, [key, assetData]);
-  const resource = useAsyncResource(symbols.length && criteria.value ? loader : null);
+  const resource = useAsyncResource(symbols.length && ready ? 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 }));
+  // A strategy's answer shows only under its own tab: the last one stays until the next has loaded only for the same strategy.
+  const data = resource.data && (resource.data.kind === "csp") === (strategy === "csp")
+    && (resource.data.kind === "csp" || resource.data.screen.criteria.strategy === strategy) ? resource.data : null;
+  const order = useCallback(<Row extends { rank: number | null } & Record<string, unknown>>(flat: Row[]) => flat.sort((left, right) => sort.columnId === "rank"
     // 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]);
+    ? compareSortValues(left.rank ?? Number.POSITIVE_INFINITY, right.rank ?? Number.POSITIVE_INFINITY, sort.direction)
+    : compareSortValues(sortValue(left, sort.columnId), sortValue(right, sort.columnId), sort.direction)), [sort]);
+  const putRows = useMemo<ScreenRow[]>(() => data?.kind !== "csp" ? []
+    : order(data.screen.rows.map((row) => ({ ...cspScreenReportRow(row), source: row }))), [data, order]);
+  const tradeRows = useMemo<TradeRow[]>(() => data?.kind !== "trade" ? []
+    : order(data.screen.rows.map((row) => ({ ...strategyScreenReportRow(row), source: row }))), [data, order]);
   const [selected, setSelected] = useState<string | null>(null);
-  const screen = resource.data;
-  const notices = [criteria.error, resource.data ? null : resource.error,
+  const screen = data?.screen;
+  const rankedBy = strategy === "csp" ? undefined : strategyRankedBy(strategy);
+  const notices = [criteria.error, 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);
+    ...(screen ? cspScreenNotes(screen, rankedBy).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 now = Date.now();
+  const criteriaText = criteria.value ? cspScreenCriteriaText(criteria.value, now) : criteria.trade ? strategyScreenCriteriaText(criteria.trade, now) : "";
+  // Enter opens the name's trade in OSA: the put at the strike and expiry the screen read, any other trade as its legs.
+  const openScenario = (row: ScreenRow | TradeRow) => {
+    if ("csp" in row.source) {
+      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 } });
+      return;
+    }
+    const trade = row.source.trade;
+    if (!trade) return;
+    createPaneFromTemplate("options-scenario-pane", { symbol: row.symbol, values: { legs: osaLegs(row.source),
+      ...(trade.position.underlying ? { shares: String(trade.position.underlying.quantity) } : {}) } });
   };
   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 } => {
+  const putCell = (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 };
@@ -133,33 +237,80 @@ export function CspScreenPane({ width, height, focused }: PaneProps) {
       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);
+  const tradeCell = (row: TradeRow, id: string): DataTableCell => {
+    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 "days": return { text: row.days == null ? "--" : String(row.days) };
+      case "trade": return { text: row.trade ?? "--" };
+      case "net": return { text: row.net == null ? "--" : moneyText(row.net) };
+      case "maxGain": return { text: riskText(row.maxGain, row.unlimited === "gain") };
+      case "maxLoss": return { text: riskText(row.maxLoss, row.unlimited === "loss") };
+      case "breakEven": return { text: row.breakEvens };
+      case "pop": return { text: percentText(row.pop, 0) };
+      // A return above zero reads as a gain; none, or nothing to rank, stays neutral.
+      case "returnPerYear": return { text: percentText(row.returnPerYear, 1), color: (row.returnPerYear ?? 0) > 0 ? colors.positive : undefined };
+      case "rewardRisk": return { text: rewardRiskText(row.rewardRisk, row.unlimited), value: row.rewardRisk };
+      case "ivRank": return { text: typeof row.ivRank === "number" ? row.ivRank.toFixed(0) : "--" };
+      case "spread": return { text: `${percentText(row.spread, 1)}${row.wide ? " wide" : ""}`, color: row.wide ? colors.warning : undefined };
+      case "earnings": return { text: earningsCell(row), value: row.earningsDate,
+        color: row.earningsBeforeExpiry === true ? colors.warning : colors.textDim };
+      default: return { text: "" };
+    }
+  };
+  const familyDelta = family.delta ?? CSP_SCREEN_DEFAULTS.delta;
+  const deltaValue = (criteria.value ?? criteria.trade)?.delta?.toFixed(2) ?? familyDelta.toFixed(2);
+  const wingValue = criteria.trade?.wingDelta?.toFixed(2) ?? (family.wing != null ? family.wing.toFixed(2) : "");
+  const defaultWing = family.wing == null ? "" : (family.wing < Number(deltaValue) ? family.wing : Number(deltaValue) / 2).toFixed(2);
+  const daysValue = String(ready?.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;
+  const typedDate = ready?.expiration != null ? cspTargetDate(ready, now) : null;
+  const choices = tabFamilies(family.tab);
+  const filters: QueryBarFilter[] = [
+    { 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 },
+    ...(choices.length > 1 ? [{ id: "variant", label: family.tab === "vertical" ? "Spread" : "Side", value: strategy,
+      options: choices.map((choice) => ({ value: choice.id, label: choice.choice ?? choice.title })),
+      onChange: (value: string) => chooseStrategy(value as ScreenFamily) }] : []),
+    ...(family.delta != null ? [{ id: "delta", label: "Delta", value: deltaValue, defaultValue: familyDelta.toFixed(2),
+      options: withCurrent(DELTA_OPTIONS, deltaValue, (value) => value), onChange: (value: string) => setDelta(value) }] : []),
+    ...(family.wing != null ? [{ id: "wing", label: "Wing", value: wingValue, defaultValue: defaultWing,
+      options: withCurrent(WING_OPTIONS.filter((value) => Number(value) < Number(deltaValue)), wingValue, (value) => value),
+      onChange: (value: string) => setWingDelta(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); } },
+  ];
+  const subject = strategy === "csp" ? "cash-secured puts" : family.title.toLowerCase();
+  const table = {
+    focused: focused && !symbolsActive, rootWidth: width, rootHeight: Math.max(2, height - 1 - tabRows),
+    getItemKey: (row: { symbol: string }) => row.symbol, sortColumnId: sort.columnId, sortDirection: sort.direction,
+    emptyStateTitle: symbols.length ? `No ${strategy === "csp" ? "puts" : subject} to rank.` : `Type symbols to rank their ${subject}.`,
+    onHeaderClick: (id: string) => setSort((current) => nextHeaderSort(current, id, { firstDirection: id === "rank" || id === "symbol" ? "asc" : "desc" })),
+    onActivate: openScenario, onRootKeyDown: handleKey,
+    getExportMetadata: (): Array<[string, string | undefined]> => [[strategy === "csp" ? "puts" : subject, criteriaText || undefined],
+      ["ranked by", strategy === "csp" ? "annualised yield on cash at the bid" : rankedBy],
+      ["wide", ready ? `spread over ${ready.maxSpreadPercent}% of the mid` : undefined],
+      ...(strategy === "csp" ? [] : [["money", STRATEGY_MONEY_UNIT] as [string, string]])],
+  };
+  // Whole columns give way, least needed first, so nothing scrolls sideways; a vertical scrollbar takes a cell.
+  const putColumns = useMemo(() => dropColumnsToFit(COLUMNS, width - 1, PUT_DROP_ORDER), [width]);
+  const tradeColumnWidth = tradeWidth(tradeRows);
+  const shownTradeColumns = useMemo(() => strategy === "csp" ? [] : dropColumnsToFit(tradeColumns(strategy, tradeColumnWidth), width - 1,
+    tradeDropOrder(strategy)), [strategy, tradeColumnWidth, width]);
+  const firstSymbol = (strategy === "csp" ? putRows : tradeRows)[0]?.symbol ?? "";
+  const selection = { kind: "id" as const, selectedId: selected ?? firstSymbol, getId: (row: { symbol: string }) => row.symbol, onChange: (id: string) => setSelected(id) };
   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)} />
+    {tabStrip}
+    <QueryBar width={width} filters={filters} meta={strategy === "csp" ? undefined : STRATEGY_MONEY_UNIT} />
+    <PaneStatusBody subject={subject} loading={resource.loading && !data}
+      error={criteria.error && !ready ? criteria.error : !data ? resource.error : null}>
+      {strategy === "csp"
+        ? <DataTableView<ScreenRow> {...table} columns={putColumns} items={putRows} selection={selection}
+          renderCell={(row, column) => putCell(row, column.id)} />
+        : <DataTableView<TradeRow> {...table} columns={shownTradeColumns} items={tradeRows} selection={selection}
+          renderCell={(row, column) => tradeCell(row, column.id)} />}
     </PaneStatusBody>
   </Box>;
 }

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

@@ -31,7 +31,7 @@ export interface CspScreenCriteria {
 }
 
 export const CSP_SCREEN_DEFAULTS: Readonly<Omit<CspScreenCriteria, "expiration">> = { delta: 0.3, days: 30, maxSpreadPercent: 10 };
-/** The most names one screen reads: each is two chain requests. */
+/** The most names one screen reads: each is up to two chain requests (the first lists the expiries, the next is the one traded), a calendar one more. */
 export const CSP_SCREEN_LIMIT = 20;
 const DAY_MS = 86_400_000;
 const CONCURRENCY = 4;
@@ -61,9 +61,9 @@ export interface CspScreen {
   freshness: HeadlessPaneFreshness;
 }
 
-const supplied = (value: unknown) => value != null && value !== "";
+export const supplied = (value: unknown) => value != null && value !== "";
 
-function readNumber(value: unknown, flag: string, example: string): number {
+export function readNumber(value: unknown, flag: string, example: string): number {
   const text = typeof value === "number" ? String(value) : typeof value === "string" ? value.trim().replace(/%$/, "") : "";
   const number = Number(text);
   if (!text || !/^[+-]?(?:\d+(?:\.\d*)?|\.\d+)$/.test(text) || !Number.isFinite(number)) {
@@ -143,11 +143,16 @@ export interface CspScreenDependencies {
 
 interface ScreenedPut { csp: CashSecuredPut; delta: number | null; market: ScenarioMarketSnapshot }
 
-/** One name's put: OSA's csp seed at `--delta` on the listed expiry nearest the target, read as OSA reads it. */
-async function screenPut(
-  instrument: InstrumentRef, criteria: CspScreenCriteria, dependencies: ScenarioLoaderDependencies, target: string,
-  earningsDate: string | null, signal: AbortSignal | undefined,
-): Promise<ScreenedPut> {
+/**
+ * One name's chain on its listed expiry nearest `target` (YYYY-MM-DD), the
+ * catalogue's own chain when it is already on that expiry. A typed
+ * `expiration` whose last session has closed is refused with the live ones
+ * nearest it.
+ */
+export async function loadScreenMarket(
+  instrument: InstrumentRef, criteria: Pick<CspScreenCriteria, "expiration">, dependencies: ScenarioLoaderDependencies, target: string,
+  signal: AbortSignal | undefined,
+): Promise<ScenarioMarketSnapshot> {
   const first = await loadScenarioMarket({ instrument, signal }, dependencies);
   // A typed date whose last session has closed is not stood in for by the next one: it says so, and names it.
   const now = dependencies.now?.() ?? Date.now();
@@ -160,8 +165,16 @@ async function screenPut(
     throw new Error(first.warnings.find((warning) => warning.startsWith("Options chain")) ?? "No listed option expiries");
   }
   const loaded = first.chain ? [...first.chain.puts, ...first.chain.calls][0]?.expiration : undefined;
-  const market = loaded != null && expiryIsoDate(loaded) === expiryIsoDate(expiration)
+  return loaded != null && expiryIsoDate(loaded) === expiryIsoDate(expiration)
     ? first : await loadScenarioMarket({ instrument, expiration, signal }, dependencies);
+}
+
+/** One name's put: OSA's csp seed at `--delta` on the listed expiry nearest the target, read as OSA reads it. */
+async function screenPut(
+  instrument: InstrumentRef, criteria: CspScreenCriteria, dependencies: ScenarioLoaderDependencies, target: string,
+  earningsDate: string | null, signal: AbortSignal | undefined,
+): Promise<ScreenedPut> {
+  const market = await loadScreenMarket(instrument, criteria, dependencies, target, signal);
   const settings = { symbol: instrument.symbol, exchange: instrument.exchange, strategy: "csp", delta: criteria.delta };
   const position = scenarioPositionFromSettings(settings, market);
   const leg = position?.legs[0];
@@ -201,13 +214,26 @@ function screenFreshness(markets: readonly ScenarioMarketSnapshot[], now: number
   };
 }
 
+/** One name of a screen: what it found, or why it found nothing, with its IV rank either way. */
+interface ScreenedName<T> { symbol: string; ivRank: number | null; value: T | null; note: string | null }
+
+export interface ScreenedNames<T> {
+  names: ScreenedName<T>[];
+  missingRanks: string[];
+  ivRankError: string | null;
+  freshness: HeadlessPaneFreshness;
+}
+
 /**
- * Each name's cash-secured put, ranked: one IV rank request, one earnings
- * calendar request and one Treasury curve for all of them.
+ * Each name screened by `screen`, four at a time: one IV rank request, one
+ * earnings calendar request and one Treasury curve for all of them. A name
+ * `screen` throws on is kept with the error as its note (`fallback` when the
+ * error has no message). `screen` returns the market that dates its row.
  */
-export async function loadCspScreen(
-  instruments: readonly InstrumentRef[], criteria: CspScreenCriteria, dependencies: CspScreenDependencies, signal?: AbortSignal,
-): Promise<CspScreen> {
+export async function screenNames<T>(
+  instruments: readonly InstrumentRef[], dependencies: CspScreenDependencies, signal: AbortSignal | undefined, fallback: string,
+  screen: (instrument: InstrumentRef, earningsDate: string | null, scenario: ScenarioLoaderDependencies) => Promise<{ value: T; market: ScenarioMarketSnapshot }>,
+): Promise<ScreenedNames<T>> {
   const now = dependencies.scenario.now?.() ?? Date.now();
   // Every name reads the same curve, up to twice (the catalogue, then its expiry): asked for once, when the first name needs it.
   let curve: ReturnType<ScenarioLoaderDependencies["loadYieldCurve"]> | null = null;
@@ -218,29 +244,43 @@ export async function loadCspScreen(
     loadNextEarningsDates(dependencies.earnings, symbols, zonedDateKey(now, "America/New_York")),
   ]);
   signal?.throwIfAborted();
-  const target = cspTargetDate(criteria, now);
   const markets: ScenarioMarketSnapshot[] = [];
   const missingRanks: string[] = [];
-  const rows = await mapWithConcurrency(instruments, CONCURRENCY, async (instrument, index): Promise<Omit<CspScreenRow, "rank">> => {
+  const names = await mapWithConcurrency(instruments, CONCURRENCY, async (instrument, index): Promise<ScreenedName<T>> => {
     const symbol = symbols[index]!;
     const ivRow = ivRanks.rows.get(symbol);
     const rank = ivRow?.iv30?.rank;
     const ivRank = rank != null && Number.isFinite(rank) ? rank : null;
     try {
-      const screened = await screenPut(instrument, criteria, scenario, target, earnings.get(symbol) ?? null, signal);
+      const screened = await screen(instrument, earnings.get(symbol) ?? null, scenario);
       markets.push(screened.market);
       if (ivRank == null && !ivRanks.error) {
         const reason = ivRankReason(ivRow);
         missingRanks.push(reason ? `${symbol} (${reason})` : symbol);
       }
-      return { symbol, csp: screened.csp, delta: screened.delta, ivRank, wideSpread: cspWideSpread(screened.csp, criteria.maxSpreadPercent), note: null };
+      return { symbol, ivRank, value: screened.value, note: null };
     } catch (error) {
       if (signal?.aborted) throw error;
-      return { symbol, csp: null, delta: null, ivRank, wideSpread: false, note: errorMessage(error) ?? "No put to sell" };
+      return { symbol, ivRank, value: null, note: errorMessage(error) ?? fallback };
     }
   });
-  return { rows: rankCspScreen(rows), criteria, missingRanks: missingRanks.sort(), ivRankError: ivRanks.error,
-    freshness: screenFreshness(markets, now) };
+  return { names, missingRanks: missingRanks.sort(), ivRankError: ivRanks.error, freshness: screenFreshness(markets, now) };
+}
+
+/** Each name's cash-secured put, ranked. */
+export async function loadCspScreen(
+  instruments: readonly InstrumentRef[], criteria: CspScreenCriteria, dependencies: CspScreenDependencies, signal?: AbortSignal,
+): Promise<CspScreen> {
+  const target = cspTargetDate(criteria, dependencies.scenario.now?.() ?? Date.now());
+  const screened = await screenNames(instruments, dependencies, signal, "No put to sell", async (instrument, earningsDate, scenario) => {
+    const put = await screenPut(instrument, criteria, scenario, target, earningsDate, signal);
+    return { value: put, market: put.market };
+  });
+  const rows = screened.names.map(({ symbol, ivRank, value, note }): Omit<CspScreenRow, "rank"> => ({
+    symbol, csp: value?.csp ?? null, delta: value?.delta ?? null, ivRank,
+    wideSpread: value ? cspWideSpread(value.csp, criteria.maxSpreadPercent) : false, note }));
+  return { rows: rankCspScreen(rows), criteria, missingRanks: screened.missingRanks, ivRankError: screened.ivRankError,
+    freshness: screened.freshness };
 }
 
 /** `nearest 0.30 delta · expiry nearest 2026-11-21 (30 days)`: what each name's put is. */
@@ -249,8 +289,8 @@ export function cspScreenCriteriaText(criteria: CspScreenCriteria, now: number):
     + (criteria.expiration == null ? ` (${criteria.days} days)` : "");
 }
 
-/** `before 2026-11-04`, `after 2027-01-19`, `unknown`: whether the next report falls before the put expires, and its date. */
-export function cspEarningsText(csp: CashSecuredPut | null): string {
+/** `before 2026-11-04`, `after 2027-01-19`, `unknown`: whether the next report falls before the put (or a trade's first leg) expires, and its date. */
+export function cspEarningsText(csp: Pick<CashSecuredPut, "earnings"> | null): string {
   if (!csp) return "--";
   const { beforeExpiry, date } = csp.earnings;
   return beforeExpiry == null ? "unknown" : `${beforeExpiry ? "before" : "after"} ${date}`;

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

@@ -87,6 +87,13 @@ function newYorkCalendarDate(time: number): string {
   return newYorkDate.format(time);
 }
 
+/** The valuation date in New York, and the calendar days from it to `expiry` (YYYY-MM-DD), 0 once it is reached. */
+export function calendarDaysToExpiry(asOf: number, expiry: string): { valuationDate: string; daysToExpiry: number } {
+  const valuationDate = newYorkCalendarDate(asOf);
+  return { valuationDate,
+    daysToExpiry: Math.max(0, Math.round((Date.parse(`${expiry}T00:00:00Z`) - Date.parse(`${valuationDate}T00:00:00Z`)) / DAY_MS)) };
+}
+
 /** Whether the next report falls before the put expires; unknown without an upcoming date. */
 export function earningsBeforeExpiry(earningsDate: string | null | undefined, valuationDate: string, expiry: string): CspEarnings {
   if (!earningsDate || !/^\d{4}-\d{2}-\d{2}$/.test(earningsDate) || earningsDate < valuationDate) return { date: null, beforeExpiry: null };
@@ -114,8 +121,7 @@ export function cashSecuredPut(
   if (position.legs.length !== 1 || !leg || leg.side !== "put" || leg.quantity >= 0 || position.underlying) return null;
   const contracts = -leg.quantity;
   const expiry = new Date(leg.expiration * 1000).toISOString().slice(0, 10);
-  const valuationDate = newYorkCalendarDate(position.asOf);
-  const daysToExpiry = Math.max(0, Math.round((Date.parse(`${expiry}T00:00:00Z`) - Date.parse(`${valuationDate}T00:00:00Z`)) / DAY_MS));
+  const { valuationDate, daysToExpiry } = calendarDaysToExpiry(position.asOf, expiry);
   const cashSecured = leg.strike * leg.multiplier * contracts;
   const sharesSold = leg.multiplier * contracts;
   const atEntry = putYield(leg.price, cashSecured, sharesSold, daysToExpiry);

package/src/plugins/builtin/options-scenario/index.tsx

@@ -26,24 +26,26 @@ export const optionsScenarioModule: PluginModule = {
       ],
     },
   }, {
-    id: "csp-screen", name: "Cash-Secured Put Screen", icon: "V", component: CspScreenPane,
+    id: "csp-screen", name: "Options Strategy Screen", icon: "V", component: CspScreenPane,
     defaultPosition: "right", defaultMode: "floating", defaultFloatingSize: { width: 144, height: 24 },
     tableExport: true, headless: cspScreenHeadless,
     settings: {
-      title: "Cash-Secured Put Screen",
+      title: "Options Strategy Screen",
       fields: [
         { key: "symbols", label: "Symbols", type: "text", placeholder: "JPM, GS, KO" },
         { key: "maxSpread", label: "Wide spread over (%)", type: "text", placeholder: "10",
-          description: "A put whose bid/ask spread is over this percent of its mid is marked wide. It is still ranked." },
+          description: "A trade whose bid/ask spread is over this percent of its mid is marked wide. It is still ranked." },
       ],
     },
   }],
   paneTemplates: [{
-    id: "csp-screen-pane", paneId: "csp-screen", label: "Cash-Secured Put Screen",
-    description: "Cash-secured puts across a list, ranked by annualised yield at the bid, with % OTM, delta, IV rank, spread and an earnings flag.",
-    // The put-selling phrases lead here first, then to OSA for one name.
+    id: "csp-screen-pane", paneId: "csp-screen", label: "Options Strategy Screen",
+    description: "Cash-secured puts, covered calls, verticals, iron condors, straddles, strangles and calendars across a list, ranked, "
+      + "with max gain and loss, break-evens, probability of profit, IV rank, spread and an earnings flag.",
+    // The put-selling phrases lead here first, then to OSA for one name; so do the strategies it screens.
     keywords: ["csp", "cash secured put", "cash-secured puts", "put selling", "selling puts", "sell put", "sell puts", "short put", "wheel",
-      "put screen", "premium yield"],
+      "put screen", "premium yield", "strategy screen", "options screener", "covered call", "covered calls", "iron condor", "strangle",
+      "straddle screen", "calendar spread", "bull put spread", "bear call spread", "vertical spread"],
     shortcut: { prefix: "CSP", argKind: "ticker-list" as const }, headless: cspScreenHeadless,
     createInstance: (_context, options) => ({
       title: "CSP", placement: "floating" as const,