Options Chain — 3 Variant Proposals

Reference: operator's Trading Block blog post inspiration. Three distinct look-and-feels for the /options chain page. Operator picks one; feature-developer implements.

All variants share the CE skin (ink/snow/moss/bronze tokens from styles/brand.css), the moss-pill spot indicator, and the same interaction model (row/card click → Buy to Open / Sell to Open / Attach Strategy).

Mockup index

Variant A — Faithful Trading Block Port

Concept: Closest reproduction of Trading Block's published design within the CE skin. Symmetric mirrored table: calls on the left, strike as the center anchor column, puts on the right. The spatial relationship lets a trader's eye scan across a strike row to compare call vs. put in one horizontal pass — the same mental model Trading Block uses.

Key treatments: - ITM cells tinted with a moss-8% wash; OTM cells bare - Spot price rendered as a dashed-line moss-bright band row cutting through the table (the "parity line") - Nearest ATM strike has moss-bright strike column text - Strike column is visually anchored: bold, larger font, --raxx-bg-3 background separating the two sides - $5-strike density default; toggle to $2.50 or $1 - Row click expands an inline action panel beneath the selected row (same-table TR, no overlay) - Strategy sub-picker is a centered modal with contract summary strip at top

Columns (each side): Delta · IV · OI · Vol · Ask · Bid (reading toward strike from outside)

What was decided without operator input: - Column order reads symmetrically outward (Bid/Ask nearest strike, greeks at outer edges) — mirrors the Trading Block layout - Delta displayed as raw decimal (.44 not 44%), consistent with platform convention for numeric display - ATM strike is the nearest $5-increment to spot, not the exact spot price

Variant B — Single-Side Card Stack

Concept: Rejects the mirrored grid. Each strike is a labeled group header; within it, call and put appear as two side-by-side cards. Cards are rich enough to read without a reference grid — each card carries all its own context. Trades much better on mobile (single column on 375w) and is easier for a trader who wants to focus on one side at a time.

Key treatments: - Each card has a left-edge color bar: moss for calls, loss-red for puts - ITM cards get a faint moss-wash background - Spot price is a sticky horizontal marker band with the moss-pill chip centered in it — it slides between the strike-750 and strike-760 groups - ATM strike group gets an "ATM" tag badge next to the group number - Card click expands an action sheet inline within the card (no overlay, no row shift) - On mobile, card pairs stack vertically (call above put) within the strike group - Strategy sub-picker is a right side panel with buy/sell intent selector at top

What was decided without operator input: - Cards show 4 greeks (Delta, IV, OI, Vol); Theta and Gamma omitted from default view to avoid clutter — could be a future expand-to-see - Both call and put cards are always shown even when user is in "Both" mode; "Calls" or "Puts" filter hides one side

Variant C — Filtered List View

Concept: Rejects the "chain" metaphor entirely. The page starts as a blank filter bar; the user builds a query (expiry, type, delta range, strike range, DTE) and gets back a flat sorted list of matching contracts. Best for power users who know what they want ("ATM calls expiring this Friday with delta 0.35–0.50") and don't need to scan the whole chain visually.

Key treatments: - Active filters rendered as dismissible chips with category labels - Inactive filter slots shown as addable chips — progressive disclosure - Results count + sort control always visible above the list - Table: Contract name / Type badge / Strike (with ATM marker and moneyness %) / Bid-Ask / IV / Delta / OI / Vol / DTE / Actions - Action buttons inline at row right — appear on hover (opacity transition); selected row expands a full action strip below it - Strategy sub-picker same right side panel as Variant B - Sort by any column header click; active sort column highlighted in moss-bright - No chain visualization — pure data list

What was decided without operator input: - Moneyness shown as % from spot ("+1.6%" ITM / "−0.36%" OTM) rather than dollar distance — more immediately actionable - DTE column shows an integer; hovering would show full expiry date (not mocked, noted for spec) - Default sort is strike ascending; operator may want to default to DTE or delta

Interaction model (shared across all 3)

Row/card click: 1. Opens inline action context (A = row-below panel, B = in-card sheet, C = row-below strip) 2. Three actions: Buy to Open · Sell to Open · Attach Strategy 3. Buy/Sell → navigates to Order Ticket pre-filled: symbol, strike, expiry, option_type, side, action=open 4. Attach Strategy → opens strategy sub-picker

Strategy sub-picker: 1. Shows contract summary strip (badge + mid price + delta) 2. In Variant B+C: shows buy/sell intent selector at top so user can choose direction before picking strategy 3. Searchable + pinned / recent / all sections 4. Selecting a strategy → navigates to Trade Window with strategy_id + contract fields pre-filled 5. Cancel → closes without action

Spot price (moss-pill pattern per brand guidelines): - Green dot + label + live price - In A: renders as a special table row with horizontal dashed lines - In B: renders as a full-width band between strike groups - In C: renders in the lookup bar only (list is filtered, spot context is implicit)

Trade-off table

Design decisions made without operator input

1. $5 default strike density — SPY at $757 has ~150 $1-strikes per expiry; $5 reduces cognitive load to ~30. Toggle preserved for granularity.
2. Delta as raw decimal — .44 not 44% or Δ0.44. Matches existing monospace numeric convention in platform.
3. Moneyness as % (Variant C) — "ITM +1.6%" over "$12 ITM" — more scannable and strike-agnostic.
4. DTE from today, not from load time — computed fresh on render so the value doesn't go stale during a session.
5. ITM shading uses moss (not a separate amber/gold) — keeps the palette to existing tokens; a separate "highlight" color would require palette expansion.
6. Strategy sub-picker: buy/sell intent before strategy selection (Variants B+C) — the order ticket needs to know direction before attaching strategy; surfacing it early avoids a post-pick disambiguation step.
7. OCC contract symbol hidden from chain — the long OCC symbol (SPY250606C00760000) is shown only as short-form ("SPY Jun6 760C") in action panels. The raw OCC string goes into the order ticket payload invisibly.
8. No Theta or Gamma in default view — keeps column count manageable. Could be added to a "More columns" toggle (not mocked).

Open questions (operator to resolve before feature-developer picks up)

1. Which variant? Operator picks one; the other two are discarded.
2. Real-time vs. 15-min delayed data — mockups show a footer note "delayed 15 min." If real-time feed is wired, the note changes and the spot-pill updates live. Does the pill need a timestamp?
3. Strategy list source — mockups show saved strategies from the user's profile. Does "Attach Strategy" only show user-created strategies, or also system-defined templates?
4. Order ticket destination — "Buy to Open" navigates to the Order Ticket. Is that a modal, a page, or a slide-over drawer? Mockups leave it open; feature-developer needs the final answer from the existing Trade Window spec.
5. IV display format — showing 15.4% in mockups. Some platforms show it as 0.154. Confirm convention.
6. Mobile action affordance (Variant A) — the inline action panel beneath the row works on desktop. On mobile, the table is horizontally scrollable; the action panel is below-fold. Should Variant A get a bottom sheet on mobile instead?

Sibling work: ux-designer issue #3072 is producing a single recommendation for the same surface. These 3 variants are complementary — operator picks from the full set.