Skip to content

MILESTONE_6_OPTIONS_UI_OVERHAUL.md

Latest commit

 

History

History
104 lines (85 loc) · 3.6 KB

MILESTONE_6_OPTIONS_UI_OVERHAUL.md

File metadata and controls

104 lines (85 loc) · 3.6 KB

MILESTONE 6: Options Trading UI Overhaul

Date: December 19, 2025
Version: v3.2.9

Summary

Comprehensive redesign of the Options Trading page with professional styling inspired by Webull/TradingView, improved ATM strike calculation across all brokers, and optimized single-row layout for better usability.

Changes Made

1. ATM Strike Calculation Fix - All Brokers

Created centralized fetch_stock_price_reliable() function in gui_app/routes.py that:

  • Uses yfinance as primary source for stock prices
  • Maps index symbols to yfinance tickers:
    • SPX → ^GSPC (S&P 500 Index)
    • NDX → ^NDX (Nasdaq 100)
    • RUT → ^RUT (Russell 2000)
    • VIX → ^VIX
    • DJI/DJX → ^DJI (Dow Jones)

Updated ALL 4 broker option chain functions:

  1. get_cached_option_chain_webull()
  2. get_cached_option_chain_alpaca()
  3. get_cached_option_chain_ibkr()
  4. get_cached_option_chain_tastytrade()

2. Dark Dropdown Styling

Fixed all dropdown menus to have dark backgrounds matching the UI:

  • Broker selection dropdown
  • Expiry dropdown
  • Strike dropdown
  • All select elements styled with:
    • Dark background (#1a1f2a)
    • Light text (#e6edf3)
    • Mint green highlight on hover/selection

3. Single-Row Compact Layout

Redesigned option rows to keep all elements in one horizontal line:

  • flex-wrap: nowrap with horizontal scroll if needed
  • Thin custom scrollbar styling
  • Reduced padding and gaps throughout
  • All elements made more compact:
    • Smaller fonts (11-13px for controls)
    • Tighter padding (4-8px)
    • Reduced input widths (symbol: 70px, expiry: 120px, strike: 95px)
    • Compact quote boxes, steppers, and buttons
    • Hidden Greeks display to save space

4. UI Element Improvements

  • Row number badge: Smaller (22px) with subtle background
  • Quote boxes: Compact with colored values (green bid, red ask, blue mid)
  • Stepper controls: Reduced padding and font sizes
  • Action buttons: Compact BUY/SELL/Discord buttons with proper colors
  • Data source badge: Smaller with shorter text
  • Total display: Compact with mint glow effect

Files Modified

  • gui_app/routes.py - fetch_stock_price_reliable() helper + all broker functions
  • gui_app/templates/options.html - Comprehensive CSS overhaul

Technical Details

CSS Changes in options.html

  • .option-row: nowrap flex, horizontal scroll, reduced padding/gap
  • .input-small: Smaller padding (8px 10px), 13px font
  • .input-small option: Dark background styling for dropdowns
  • .broker-select option: Dark background styling
  • .quote-box: Compact (4px 8px padding, 50px min-width)
  • .order-btn: Compact (6px 10px padding, 11px font)
  • .stepper-btn/value: Reduced sizing
  • .data-source-badge: Smaller (9px font, 4px 6px padding)
  • Hidden .greeks-inline to save horizontal space

5. Real-Time Price Auto-Refresh

Added automatic bid/ask/mid price updates with broker-specific rate limits:

  • Webull: 3 seconds (10 req/30 sec limit)
  • Alpaca: 1 second (200 req/min limit)
  • Tastytrade: 2 seconds (~60 req/min estimated)
  • Interactive Brokers: 1 second (50 req/sec limit)
  • Robinhood: 2 seconds (conservative default)

Features:

  • Silent background updates without "Loading..." message
  • Subtle flash animation on price updates
  • Automatic rate adjustment when broker selection changes
  • Respects API rate limits to prevent blocking

Result

Clean, professional options trading interface with:

  • All controls visible in one row
  • Readable dark-themed dropdowns
  • Webull/TradingView-inspired styling
  • Real-time price updates respecting broker API limits
  • Optimized for usability and visual appeal