From 25360aacb8aab46e7e579707eb9704759af9536d Mon Sep 17 00:00:00 2001
From: Tyler Hoang <tyler@tylerhoang.xyz>
Date: Wed, 20 May 2026 00:22:32 -0700
Subject: feat: implement options tab with Black-Scholes pricer and vol surface

Adds a fully interactive options tab: Terminal view (3-column Bloomberg-
style with pricer, chain, smile/term-structure/greek curves) and Surface
view (polar smile dial + IV heatmap). Uses synthetic vol surface until a
live yfinance chain endpoint is wired up.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/app/page.tsx | 87 ++++++++++++++++++++++++++++-----------------------
 1 file changed, 47 insertions(+), 40 deletions(-)

(limited to 'frontend/app/page.tsx')

diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx
index 5c14488..175f072 100644
--- a/frontend/app/page.tsx
+++ b/frontend/app/page.tsx
@@ -6,6 +6,7 @@ import { useRouter, useSearchParams } from "next/navigation";
 import { AppShell } from "@/components/prism/AppShell";
 import { FinancialsPage } from "@/components/prism/FinancialsPage";
 import { ValuationPage } from "@/components/prism/ValuationPage";
+import { OptionsPage } from "@/components/prism/options/OptionsPage";
 import { ChartCard } from "@/components/prism/ChartCard";
 import { KPIStrip } from "@/components/prism/KPIStrip";
 import { Sidebar } from "@/components/prism/Sidebar";
@@ -322,46 +323,52 @@ function OverviewClient() {
       }
     >
       <MarketStrip indices={marketCards} />
-      {!selectedTicker ? <EmptyOverviewState watchlist={watchlist} onSelectTicker={navigateToTicker} /> : null}
-      {selectedTicker && overviewState === "loading" ? <LoadingOverviewState symbol={selectedTicker} /> : null}
-      {selectedTicker && overviewState === "invalid" ? <InvalidTickerState symbol={selectedTicker} onClear={clearTicker} /> : null}
-      {selectedTicker && overviewState === "error" ? <ErrorOverviewState message={overviewError || "Ticker data unavailable"} /> : null}
-      {overview && overviewState === "ready" ? (
-        tab === "valuation" ? (
-          <ValuationPage
-            ticker={selectedTicker}
-            overview={overview}
-            isSaved={isSaved}
-            onToggleWatchlist={addOrRemoveCurrentTicker}
-          />
-        ) : tab === "financials" ? (
-          <FinancialsPage
-            ticker={selectedTicker}
-            overview={overview}
-            isSaved={isSaved}
-            onToggleWatchlist={addOrRemoveCurrentTicker}
-          />
-        ) : (
-          <>
-            <TickerHeader overview={overview} onToggleWatchlist={addOrRemoveCurrentTicker} isSaved={isSaved} />
-            <KPIStrip items={kpis} />
-            <div className="psm-main-grid">
-              <div className="psm-column">
-                <ChartCard symbol={overview.profile.symbol} period={period} points={history} chartState={chartState} chartError={chartError} onChangePeriod={setPeriod} />
-                <VolumeCard overview={overview} />
-                <SignalCard overview={overview} />
-                <PriceVsValueCard overview={overview} valuation={valuation} valState={valState} />
-              </div>
-              <div className="psm-column">
-                <ProfileCard overview={overview} />
-                <ShortInterestCard overview={overview} />
-                <ValuationOverviewCard overview={overview} valuation={valuation} valState={valState} />
-                <QualityCard overview={overview} />
-              </div>
-            </div>
-          </>
-        )
-      ) : null}
+      {tab === "options" ? (
+        <OptionsPage ticker={selectedTicker} overview={overview} />
+      ) : (
+        <>
+          {!selectedTicker ? <EmptyOverviewState watchlist={watchlist} onSelectTicker={navigateToTicker} /> : null}
+          {selectedTicker && overviewState === "loading" ? <LoadingOverviewState symbol={selectedTicker} /> : null}
+          {selectedTicker && overviewState === "invalid" ? <InvalidTickerState symbol={selectedTicker} onClear={clearTicker} /> : null}
+          {selectedTicker && overviewState === "error" ? <ErrorOverviewState message={overviewError || "Ticker data unavailable"} /> : null}
+          {overview && overviewState === "ready" ? (
+            tab === "valuation" ? (
+              <ValuationPage
+                ticker={selectedTicker}
+                overview={overview}
+                isSaved={isSaved}
+                onToggleWatchlist={addOrRemoveCurrentTicker}
+              />
+            ) : tab === "financials" ? (
+              <FinancialsPage
+                ticker={selectedTicker}
+                overview={overview}
+                isSaved={isSaved}
+                onToggleWatchlist={addOrRemoveCurrentTicker}
+              />
+            ) : (
+              <>
+                <TickerHeader overview={overview} onToggleWatchlist={addOrRemoveCurrentTicker} isSaved={isSaved} />
+                <KPIStrip items={kpis} />
+                <div className="psm-main-grid">
+                  <div className="psm-column">
+                    <ChartCard symbol={overview.profile.symbol} period={period} points={history} chartState={chartState} chartError={chartError} onChangePeriod={setPeriod} />
+                    <VolumeCard overview={overview} />
+                    <SignalCard overview={overview} />
+                    <PriceVsValueCard overview={overview} valuation={valuation} valState={valState} />
+                  </div>
+                  <div className="psm-column">
+                    <ProfileCard overview={overview} />
+                    <ShortInterestCard overview={overview} />
+                    <ValuationOverviewCard overview={overview} valuation={valuation} valState={valState} />
+                    <QualityCard overview={overview} />
+                  </div>
+                </div>
+              </>
+            )
+          ) : null}
+        </>
+      )}
     </AppShell>
   );
 
-- 
cgit v1.3-2-g0d8e