From 003a9131862edc5d5f37eb62c1581f9680b8d7f4 Mon Sep 17 00:00:00 2001 From: isnowglobal-admin Date: Thu, 21 May 2026 01:41:11 -0400 Subject: [PATCH] GammaDesk initial commit - Options Gamma Analytics platform --- .env.example | 16 + .gitignore | 20 + README.md | 110 + client/index.html | 20 + client/src/App.tsx | 116 + client/src/components/app-sidebar.tsx | 83 + client/src/components/gex-chart.tsx | 123 + client/src/components/iv-skew-chart.tsx | 95 + client/src/components/loading-block.tsx | 15 + client/src/components/logo.tsx | 22 + client/src/components/metric-card.tsx | 55 + client/src/components/metric-tooltip.tsx | 91 + client/src/components/symbol-selector.tsx | 47 + client/src/components/top-bar.tsx | 67 + client/src/components/ui/accordion.tsx | 56 + client/src/components/ui/alert-dialog.tsx | 139 + client/src/components/ui/alert.tsx | 60 + client/src/components/ui/aspect-ratio.tsx | 5 + client/src/components/ui/avatar.tsx | 51 + client/src/components/ui/badge.tsx | 39 + client/src/components/ui/breadcrumb.tsx | 115 + client/src/components/ui/button.tsx | 63 + client/src/components/ui/calendar.tsx | 68 + client/src/components/ui/card.tsx | 85 + client/src/components/ui/carousel.tsx | 259 + client/src/components/ui/chart.tsx | 365 + client/src/components/ui/checkbox.tsx | 28 + client/src/components/ui/collapsible.tsx | 11 + client/src/components/ui/command.tsx | 151 + client/src/components/ui/context-menu.tsx | 198 + client/src/components/ui/dialog.tsx | 122 + client/src/components/ui/drawer.tsx | 118 + client/src/components/ui/dropdown-menu.tsx | 198 + client/src/components/ui/form.tsx | 172 + client/src/components/ui/hover-card.tsx | 29 + client/src/components/ui/input-otp.tsx | 69 + client/src/components/ui/input.tsx | 23 + client/src/components/ui/label.tsx | 25 + client/src/components/ui/menubar.tsx | 256 + client/src/components/ui/navigation-menu.tsx | 128 + client/src/components/ui/pagination.tsx | 117 + client/src/components/ui/popover.tsx | 29 + client/src/components/ui/progress.tsx | 28 + client/src/components/ui/radio-group.tsx | 42 + client/src/components/ui/resizable.tsx | 45 + client/src/components/ui/scroll-area.tsx | 46 + client/src/components/ui/select.tsx | 160 + client/src/components/ui/separator.tsx | 29 + client/src/components/ui/sheet.tsx | 141 + client/src/components/ui/sidebar.tsx | 727 ++ client/src/components/ui/skeleton.tsx | 15 + client/src/components/ui/slider.tsx | 26 + client/src/components/ui/switch.tsx | 27 + client/src/components/ui/table.tsx | 117 + client/src/components/ui/tabs.tsx | 53 + client/src/components/ui/textarea.tsx | 22 + client/src/components/ui/toast.tsx | 128 + client/src/components/ui/toaster.tsx | 33 + client/src/components/ui/toggle-group.tsx | 61 + client/src/components/ui/toggle.tsx | 44 + client/src/components/ui/tooltip.tsx | 30 + client/src/hooks/use-mobile.tsx | 19 + client/src/hooks/use-toast.ts | 191 + client/src/index.css | 318 + client/src/lib/auth-context.tsx | 135 + client/src/lib/format.ts | 51 + client/src/lib/queryClient.ts | 56 + client/src/lib/symbol-context.tsx | 24 + client/src/lib/theme-context.tsx | 41 + client/src/lib/utils.ts | 7 + client/src/main.tsx | 9 + client/src/pages/account.tsx | 175 + client/src/pages/dashboard.tsx | 189 + client/src/pages/expiry-matrix.tsx | 234 + client/src/pages/gamma-levels.tsx | 174 + client/src/pages/login.tsx | 170 + client/src/pages/not-found.tsx | 29 + client/src/pages/screener.tsx | 274 + client/src/pages/settings.tsx | 165 + components.json | 20 + data.db | Bin 0 -> 16384 bytes docs/architecture.md | 55 + docs/implementation.md | 71 + docs/orats-field-map.md | 72 + drizzle.config.ts | 10 + package-lock.json | 9273 ++++++++++++++++++ package.json | 110 + postcss.config.js | 6 + script/build.ts | 65 + server/authRoutes.ts | 99 + server/db.ts | 46 + server/index.ts | 105 + server/marketData.ts | 287 + server/oratsClient.ts | 54 + server/routes.ts | 77 + server/static.ts | 20 + server/vite.ts | 58 + shared/schema.ts | 144 + tailwind.config.ts | 113 + tsconfig.json | 23 + vite.config.ts | 26 + 101 files changed, 18628 insertions(+) create mode 100644 .env.example create mode 100644 .gitignore create mode 100644 README.md create mode 100644 client/index.html create mode 100644 client/src/App.tsx create mode 100644 client/src/components/app-sidebar.tsx create mode 100644 client/src/components/gex-chart.tsx create mode 100644 client/src/components/iv-skew-chart.tsx create mode 100644 client/src/components/loading-block.tsx create mode 100644 client/src/components/logo.tsx create mode 100644 client/src/components/metric-card.tsx create mode 100644 client/src/components/metric-tooltip.tsx create mode 100644 client/src/components/symbol-selector.tsx create mode 100644 client/src/components/top-bar.tsx create mode 100644 client/src/components/ui/accordion.tsx create mode 100644 client/src/components/ui/alert-dialog.tsx create mode 100644 client/src/components/ui/alert.tsx create mode 100644 client/src/components/ui/aspect-ratio.tsx create mode 100644 client/src/components/ui/avatar.tsx create mode 100644 client/src/components/ui/badge.tsx create mode 100644 client/src/components/ui/breadcrumb.tsx create mode 100644 client/src/components/ui/button.tsx create mode 100644 client/src/components/ui/calendar.tsx create mode 100644 client/src/components/ui/card.tsx create mode 100644 client/src/components/ui/carousel.tsx create mode 100644 client/src/components/ui/chart.tsx create mode 100644 client/src/components/ui/checkbox.tsx create mode 100644 client/src/components/ui/collapsible.tsx create mode 100644 client/src/components/ui/command.tsx create mode 100644 client/src/components/ui/context-menu.tsx create mode 100644 client/src/components/ui/dialog.tsx create mode 100644 client/src/components/ui/drawer.tsx create mode 100644 client/src/components/ui/dropdown-menu.tsx create mode 100644 client/src/components/ui/form.tsx create mode 100644 client/src/components/ui/hover-card.tsx create mode 100644 client/src/components/ui/input-otp.tsx create mode 100644 client/src/components/ui/input.tsx create mode 100644 client/src/components/ui/label.tsx create mode 100644 client/src/components/ui/menubar.tsx create mode 100644 client/src/components/ui/navigation-menu.tsx create mode 100644 client/src/components/ui/pagination.tsx create mode 100644 client/src/components/ui/popover.tsx create mode 100644 client/src/components/ui/progress.tsx create mode 100644 client/src/components/ui/radio-group.tsx create mode 100644 client/src/components/ui/resizable.tsx create mode 100644 client/src/components/ui/scroll-area.tsx create mode 100644 client/src/components/ui/select.tsx create mode 100644 client/src/components/ui/separator.tsx create mode 100644 client/src/components/ui/sheet.tsx create mode 100644 client/src/components/ui/sidebar.tsx create mode 100644 client/src/components/ui/skeleton.tsx create mode 100644 client/src/components/ui/slider.tsx create mode 100644 client/src/components/ui/switch.tsx create mode 100644 client/src/components/ui/table.tsx create mode 100644 client/src/components/ui/tabs.tsx create mode 100644 client/src/components/ui/textarea.tsx create mode 100644 client/src/components/ui/toast.tsx create mode 100644 client/src/components/ui/toaster.tsx create mode 100644 client/src/components/ui/toggle-group.tsx create mode 100644 client/src/components/ui/toggle.tsx create mode 100644 client/src/components/ui/tooltip.tsx create mode 100644 client/src/hooks/use-mobile.tsx create mode 100644 client/src/hooks/use-toast.ts create mode 100644 client/src/index.css create mode 100644 client/src/lib/auth-context.tsx create mode 100644 client/src/lib/format.ts create mode 100644 client/src/lib/queryClient.ts create mode 100644 client/src/lib/symbol-context.tsx create mode 100644 client/src/lib/theme-context.tsx create mode 100644 client/src/lib/utils.ts create mode 100644 client/src/main.tsx create mode 100644 client/src/pages/account.tsx create mode 100644 client/src/pages/dashboard.tsx create mode 100644 client/src/pages/expiry-matrix.tsx create mode 100644 client/src/pages/gamma-levels.tsx create mode 100644 client/src/pages/login.tsx create mode 100644 client/src/pages/not-found.tsx create mode 100644 client/src/pages/screener.tsx create mode 100644 client/src/pages/settings.tsx create mode 100644 components.json create mode 100644 data.db create mode 100644 docs/architecture.md create mode 100644 docs/implementation.md create mode 100644 docs/orats-field-map.md create mode 100644 drizzle.config.ts create mode 100644 package-lock.json create mode 100644 package.json create mode 100644 postcss.config.js create mode 100644 script/build.ts create mode 100644 server/authRoutes.ts create mode 100644 server/db.ts create mode 100644 server/index.ts create mode 100644 server/marketData.ts create mode 100644 server/oratsClient.ts create mode 100644 server/routes.ts create mode 100644 server/static.ts create mode 100644 server/vite.ts create mode 100644 shared/schema.ts create mode 100644 tailwind.config.ts create mode 100644 tsconfig.json create mode 100644 vite.config.ts diff --git a/.env.example b/.env.example new file mode 100644 index 0000000..c27a180 --- /dev/null +++ b/.env.example @@ -0,0 +1,16 @@ +# GammaDesk server configuration + +# Keep ORATS credentials server-side only. Never expose this as a VITE_ variable. +ORATS_API_KEY= + +# delayed | live | intraday +ORATS_MODE=delayed + +# Defaults: +# delayed: https://api.orats.io/datav2 +# live: https://api.orats.io/datav2/live +ORATS_BASE_URL=https://api.orats.io/datav2 + +# Server port used by Express in production. +PORT=5000 + diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..dd497bf --- /dev/null +++ b/.gitignore @@ -0,0 +1,20 @@ +# Dependencies +node_modules/ + +# Build output +dist/ + +# Environment +.env +.env.local + +# OS +.DS_Store +Thumbs.db + +# IDE +.vscode/ +.idea/ + +# Logs +*.log diff --git a/README.md b/README.md new file mode 100644 index 0000000..a0290ef --- /dev/null +++ b/README.md @@ -0,0 +1,110 @@ +# GammaDesk + +GammaDesk is an options-market analytics dashboard for TanukiTrade-style workflows built on a clean-room calculation engine. The MVP currently runs on deterministic mock ORATS-style data, with a server-side ORATS connector stub ready for live or delayed API wiring. + +The product goal is to highlight the levels an active trader cares about: + +- **GEX profile** by strike +- **HVL / gamma flip** +- **Call wall / call resistance** +- **Put wall / put support** +- **Selected-alone vs cumulative expiration views** +- **IV rank, IVx, expected move, and skew** +- **Symbol screener and presets** + +This is analytics software only. It is not financial advice and it should not be treated as a standalone trading signal. + +## Quick start + +```bash +npm install +npm run dev +``` + +The development server runs the Express API and Vite frontend together. + +Useful scripts: + +```bash +npm run dev # start local dev server +npm run build # production build +npm run start # run production server after build +npm run check # TypeScript check +``` + +## Environment + +Copy `.env.example` to `.env` when wiring real ORATS data: + +```bash +cp .env.example .env +``` + +The ORATS key must stay server-side. Do not expose it through Vite `VITE_` variables or browser settings. + +## Project layout + +```text +client/ + src/ + components/ Reusable dashboard components and charts + lib/ Formatting, API client, symbol/theme contexts + pages/ Dashboard, Gamma Levels, Expiry Matrix, Screener, Settings + +server/ + index.ts Express server entrypoint + routes.ts API routes consumed by the frontend and NT8 connector + marketData.ts Mock ORATS-style data generation and gamma calculations + oratsClient.ts Future ORATS API client integration point + +shared/ + schema.ts Shared TypeScript types and Zod schemas + +docs/ + architecture.md Product architecture and data flow + orats-field-map.md ORATS field mapping and calculation plan + implementation.md Build roadmap and engineering notes +``` + +## Current API routes + +```text +GET /api/symbols +GET /api/orats/status +GET /api/market/:symbol/summary +GET /api/market/:symbol/gex +GET /api/market/:symbol/expirations +GET /api/screener +``` + +These routes currently return mock data from `server/marketData.ts`. The route shape is intentionally stable so NinjaTrader, future TradingView adapters, and the frontend can keep the same contracts after ORATS is connected. + +## ORATS integration path + +The intended production path is: + +1. Implement `server/oratsClient.ts` methods for ORATS strikes, summaries, monies implied, expirations, tickers, and IV rank. +2. Normalize ORATS rows into the shared GammaDesk model. +3. Feed normalized rows into the existing gamma engine. +4. Keep mock fallback available for demos and local development. +5. Add caching and rate-limit protection before using large screeners. + +See `docs/orats-field-map.md` for exact field mapping. + +## Gamma calculation convention + +Default Tanuki-style clean-room convention: + +```ts +callGex = +gamma * callOpenInterest * 100 * spot ** 2 * 0.01; +putGex = -gamma * putOpenInterest * 100 * spot ** 2 * 0.01; +netGex = callGex + putGex; +``` + +The sign convention should remain configurable internally because public vendors differ in dealer-positioning assumptions and TanukiTrade does not publicly disclose its proprietary formula. + +## Related deliverables + +- NinjaTrader 8 indicator package: `gammadesk-ninjatrader8` +- ORATS integration field-mapping spec: `docs/orats-field-map.md` + diff --git a/client/index.html b/client/index.html new file mode 100644 index 0000000..c16cd66 --- /dev/null +++ b/client/index.html @@ -0,0 +1,20 @@ + + + + + + GammaDesk — Options Gamma Analytics + + + + + + + +
+ + + diff --git a/client/src/App.tsx b/client/src/App.tsx new file mode 100644 index 0000000..a64c9e8 --- /dev/null +++ b/client/src/App.tsx @@ -0,0 +1,116 @@ +import { useEffect } from "react"; +import { Switch, Route, Router, useLocation } from "wouter"; +import { useHashLocation } from "wouter/use-hash-location"; +import { queryClient } from "./lib/queryClient"; +import { QueryClientProvider } from "@tanstack/react-query"; +import { Toaster } from "@/components/ui/toaster"; +import { TooltipProvider } from "@/components/ui/tooltip"; +import { SidebarProvider } from "@/components/ui/sidebar"; +import { AppSidebar } from "@/components/app-sidebar"; +import { TopBar } from "@/components/top-bar"; +import { SymbolProvider } from "@/lib/symbol-context"; +import { ThemeProvider } from "@/lib/theme-context"; +import { AuthProvider, useAuth } from "@/lib/auth-context"; +import DashboardPage from "@/pages/dashboard"; +import GammaLevelsPage from "@/pages/gamma-levels"; +import ExpiryMatrixPage from "@/pages/expiry-matrix"; +import ScreenerPage from "@/pages/screener"; +import SettingsPage from "@/pages/settings"; +import AccountPage from "@/pages/account"; +import LoginPage from "@/pages/login"; +import NotFound from "@/pages/not-found"; +import { Loader2 } from "lucide-react"; + +function usePageTitle(): string { + const [location] = useLocation(); + if (location.startsWith("/gamma")) return "Gamma Levels"; + if (location.startsWith("/expiry")) return "Expiry Matrix"; + if (location.startsWith("/screener")) return "Screener"; + if (location.startsWith("/settings")) return "Settings & API"; + if (location.startsWith("/account")) return "Account"; + if (location.startsWith("/login")) return "Sign In"; + return "Dashboard"; +} + +// Redirect to login if not authenticated +function ProtectedRoute({ component: Component }: { component: () => JSX.Element }) { + const { user, loading } = useAuth(); + const [, setLocation] = useLocation(); + + // Must call hooks unconditionally before any early return + useEffect(() => { + if (!loading && !user) { + setLocation("/login"); + } + }, [loading, user, setLocation]); + + if (loading) { + return ( +
+ +
+ ); + } + + if (!user) { + return null; + } + + return ; +} + +function AppShell() { + const title = usePageTitle(); + const [location] = useLocation(); + const isAuthPage = location === "/login"; + return ( +
+ {!isAuthPage && } +
+ +
+ + + + } /> + } /> + } /> + } /> + } /> + + +
+
+
+ ); +} + +export default function App() { + const sidebarStyle = { + "--sidebar-width": "16rem", + "--sidebar-width-icon": "3.25rem", + } as React.CSSProperties; + + return ( + + + + + + + + + + + + + + + + + ); +} diff --git a/client/src/components/app-sidebar.tsx b/client/src/components/app-sidebar.tsx new file mode 100644 index 0000000..771adfd --- /dev/null +++ b/client/src/components/app-sidebar.tsx @@ -0,0 +1,83 @@ +import { LayoutDashboard, Activity, CalendarRange, ListFilter, Settings2, UserCircle } from "lucide-react"; +import { Link, useLocation } from "wouter"; +import { + Sidebar, + SidebarContent, + SidebarFooter, + SidebarGroup, + SidebarGroupContent, + SidebarGroupLabel, + SidebarHeader, + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, +} from "@/components/ui/sidebar"; +import { Logo } from "@/components/logo"; + +const NAV = [ + { title: "Dashboard", url: "/", icon: LayoutDashboard, testid: "nav-dashboard" }, + { title: "Gamma Levels", url: "/gamma", icon: Activity, testid: "nav-gamma" }, + { title: "Expiry Matrix", url: "/expiry", icon: CalendarRange, testid: "nav-expiry" }, + { title: "Screener", url: "/screener", icon: ListFilter, testid: "nav-screener" }, + { title: "Settings & API", url: "/settings", icon: Settings2, testid: "nav-settings" }, + { title: "Account", url: "/account", icon: UserCircle, testid: "nav-account" }, +]; + +export function AppSidebar() { + const [location] = useLocation(); + return ( + + + + + + + + GammaDesk + + Options Analytics + + + + + + + Workspace + + + {NAV.map((item) => { + const active = + item.url === "/" + ? location === "/" || location === "" + : location.startsWith(item.url); + return ( + + + + + {item.title} + + + + ); + })} + + + + + +

+ Analytics & education only. Not financial advice. Data is simulated + ORATS-style mock data until an API key is provided. +

+ + + ); +} diff --git a/client/src/components/gex-chart.tsx b/client/src/components/gex-chart.tsx new file mode 100644 index 0000000..f244730 --- /dev/null +++ b/client/src/components/gex-chart.tsx @@ -0,0 +1,123 @@ +import { useMemo } from "react"; +import { + Bar, + BarChart, + CartesianGrid, + ReferenceLine, + ResponsiveContainer, + Tooltip, + XAxis, + YAxis, +} from "recharts"; +import type { GexProfile } from "@shared/schema"; +import { fmtCompactCurrency, fmtStrike } from "@/lib/format"; + +function ChartTooltip({ active, payload, label }: any) { + if (!active || !payload?.length) return null; + const row = payload[0]?.payload; + if (!row) return null; + return ( +
+
Strike {fmtStrike(label)}
+
+ Call γ + {fmtCompactCurrency(row.callGex)} + Put γ + {fmtCompactCurrency(row.putGex)} + Net + {fmtCompactCurrency(row.netGex)} +
+
+ ); +} + +export function GexChart({ + profile, + height = 360, +}: { + profile: GexProfile; + height?: number; +}) { + const data = useMemo( + () => + profile.bars.map((b) => ({ + strike: b.strike, + callGex: b.callGex, + putGex: b.putGex, + netGex: b.netGex, + })), + [profile.bars], + ); + + const callColor = "hsl(var(--pos))"; + const putColor = "hsl(var(--neg))"; + const gridColor = "hsl(var(--border) / 0.5)"; + const axisColor = "hsl(var(--muted-foreground))"; + + return ( +
+ + + + fmtStrike(v)} + minTickGap={24} + /> + fmtCompactCurrency(v as number)} + width={68} + /> + } + cursor={{ fill: "hsl(var(--foreground) / 0.06)" }} + /> + + + + + + + + +
+ ); +} diff --git a/client/src/components/iv-skew-chart.tsx b/client/src/components/iv-skew-chart.tsx new file mode 100644 index 0000000..b97c56f --- /dev/null +++ b/client/src/components/iv-skew-chart.tsx @@ -0,0 +1,95 @@ +import { + CartesianGrid, + Line, + LineChart, + ResponsiveContainer, + Tooltip, + XAxis, + YAxis, +} from "recharts"; +import type { ExpirationRow } from "@shared/schema"; + +function ChartTooltip({ active, payload, label }: any) { + if (!active || !payload?.length) return null; + return ( +
+
{label} DTE
+
+ {payload.map((p: any) => ( + + {p.name} + {Number(p.value).toFixed(2)} + + ))} +
+
+ ); +} + +export function IvSkewChart({ + rows, + height = 240, +}: { + rows: ExpirationRow[]; + height?: number; +}) { + const data = rows + .filter((r) => r.dte > 0) + .map((r) => ({ dte: r.dte, ivx: r.ivx, callSkew: r.callSkew, putSkew: r.putSkew })); + + const gridColor = "hsl(var(--border) / 0.5)"; + const axisColor = "hsl(var(--muted-foreground))"; + + return ( +
+ + + + `${v}d`} + /> + `${v}%`} + width={48} + /> + } /> + + + + + +
+ ); +} diff --git a/client/src/components/loading-block.tsx b/client/src/components/loading-block.tsx new file mode 100644 index 0000000..275b758 --- /dev/null +++ b/client/src/components/loading-block.tsx @@ -0,0 +1,15 @@ +import { Skeleton } from "@/components/ui/skeleton"; + +export function LoadingBlock({ height = 200 }: { height?: number }) { + return ; +} + +export function LoadingCards({ count = 6 }: { count?: number }) { + return ( +
+ {Array.from({ length: count }).map((_, i) => ( + + ))} +
+ ); +} diff --git a/client/src/components/logo.tsx b/client/src/components/logo.tsx new file mode 100644 index 0000000..cf618ae --- /dev/null +++ b/client/src/components/logo.tsx @@ -0,0 +1,22 @@ +// GammaDesk mark — a gamma glyph (Γ) reduced to two intersecting strokes. +// Works at 20px to 200px; uses currentColor so it adapts to light/dark. + +export function Logo({ className }: { className?: string }) { + return ( + + + + + + + ); +} diff --git a/client/src/components/metric-card.tsx b/client/src/components/metric-card.tsx new file mode 100644 index 0000000..0ce4c0d --- /dev/null +++ b/client/src/components/metric-card.tsx @@ -0,0 +1,55 @@ +import { type ReactNode } from "react"; +import { cn } from "@/lib/utils"; +import { Card } from "@/components/ui/card"; +import { MetricTooltip, METRIC_INFO } from "@/components/metric-tooltip"; + +interface MetricCardProps { + label: string; + value: ReactNode; + metric?: keyof typeof METRIC_INFO; + hint?: ReactNode; + accent?: "default" | "pos" | "neg" | "call-wall" | "put-wall" | "hvl"; + testId?: string; +} + +const ACCENT_CLASSES: Record, string> = { + default: "text-foreground", + pos: "text-pos", + neg: "text-neg", + "call-wall": "text-call-wall", + "put-wall": "text-put-wall", + hvl: "text-hvl", +}; + +export function MetricCard({ + label, + value, + metric, + hint, + accent = "default", + testId, +}: MetricCardProps) { + return ( + +
+ {label} + {metric && } +
+
+ {value} +
+ {hint && ( +
{hint}
+ )} + + ); +} diff --git a/client/src/components/metric-tooltip.tsx b/client/src/components/metric-tooltip.tsx new file mode 100644 index 0000000..38f52b3 --- /dev/null +++ b/client/src/components/metric-tooltip.tsx @@ -0,0 +1,91 @@ +import { Info } from "lucide-react"; +import { + Tooltip, + TooltipContent, + TooltipTrigger, +} from "@/components/ui/tooltip"; + +// Educational definitions for every metric exposed in the UI. The same +// content is reused in the Settings page as a glossary. +export const METRIC_INFO: Record< + string, + { label: string; body: string } +> = { + spot: { + label: "Spot", + body: "Last traded price of the underlying. All gamma exposure is anchored to this price.", + }, + netGex: { + label: "Net Gamma Exposure (GEX)", + body: "Estimated dealer gamma in dollars per 1% move. Positive net GEX implies dealers buy dips and sell rips (suppressed volatility); negative GEX implies the opposite (amplified moves).", + }, + gammaRegime: { + label: "Gamma Regime", + body: "Sign of net dealer gamma. Positive = mean-reverting tape. Negative = trending, gappy tape.", + }, + hvl: { + label: "HVL / Gamma Flip", + body: "High Volume Level — the strike where cumulative dealer gamma crosses zero. Below HVL the tape tends negative-gamma; above it tends positive.", + }, + callWall: { + label: "Call Wall", + body: "Strike with the largest concentration of positive call-side gamma. Acts as a near-term resistance / pin candidate.", + }, + putWall: { + label: "Put Wall", + body: "Strike with the largest concentration of negative put-side gamma. Acts as near-term support; a break through can accelerate moves.", + }, + ivRank: { + label: "IV Rank", + body: "Where current 30-day implied vol sits in its 52-week range, 0–100. High IVR favors premium-selling; low IVR favors premium-buying.", + }, + ivx: { + label: "IVx (Implied Vol Index)", + body: "ORATS-style normalized 30-day implied volatility across the chain. Comparable across symbols and time.", + }, + expectedMove: { + label: "Expected Move", + body: "One-sigma move implied by ATM straddle pricing for the chosen horizon. Roughly the range the option market expects 68% of the time.", + }, + skew: { + label: "Skew", + body: "Difference between 25-delta put and call implied vol. Positive skew means puts trade rich to calls — typical hedging premium.", + }, + zeroDte: { + label: "0DTE Net GEX", + body: "Net dealer gamma exposure isolated to today's expiration. Drives intraday pinning behavior near key strikes.", + }, +}; + +export function MetricTooltip({ + metric, + className = "h-3.5 w-3.5", +}: { + metric: keyof typeof METRIC_INFO; + className?: string; +}) { + const info = METRIC_INFO[metric]; + if (!info) return null; + return ( + + + + + +
{info.label}
+

{info.body}

+ + + ); +} diff --git a/client/src/components/symbol-selector.tsx b/client/src/components/symbol-selector.tsx new file mode 100644 index 0000000..5231758 --- /dev/null +++ b/client/src/components/symbol-selector.tsx @@ -0,0 +1,47 @@ +import { useQuery } from "@tanstack/react-query"; +import type { SymbolInfo } from "@shared/schema"; +import { useSymbol } from "@/lib/symbol-context"; +import { + Select, + SelectContent, + SelectGroup, + SelectItem, + SelectLabel, + SelectTrigger, + SelectValue, +} from "@/components/ui/select"; + +export function SymbolSelector() { + const { symbol, setSymbol } = useSymbol(); + const { data } = useQuery({ queryKey: ["/api/symbols"] }); + const symbols = data ?? []; + + return ( + + ); +} diff --git a/client/src/components/top-bar.tsx b/client/src/components/top-bar.tsx new file mode 100644 index 0000000..3e3cc52 --- /dev/null +++ b/client/src/components/top-bar.tsx @@ -0,0 +1,67 @@ +import { Moon, Sun, LogOut } from "lucide-react"; +import { SidebarTrigger } from "@/components/ui/sidebar"; +import { Button } from "@/components/ui/button"; +import { Separator } from "@/components/ui/separator"; +import { SymbolSelector } from "@/components/symbol-selector"; +import { useTheme } from "@/lib/theme-context"; +import { useAuth } from "@/lib/auth-context"; +import { useLocation } from "wouter"; + +export function TopBar({ title }: { title: string }) { + const { theme, toggle } = useTheme(); + const { user, logout } = useAuth(); + const [location, setLocation] = useLocation(); + const isAuthPage = location === "/login"; + + return ( +
+ {!isAuthPage && } + {!isAuthPage && } +

+ {title} +

+
+ {!isAuthPage && ( + <> + {user?.name} + + + + )} + + +
+
+ ); +} diff --git a/client/src/components/ui/accordion.tsx b/client/src/components/ui/accordion.tsx new file mode 100644 index 0000000..e6a723d --- /dev/null +++ b/client/src/components/ui/accordion.tsx @@ -0,0 +1,56 @@ +import * as React from "react" +import * as AccordionPrimitive from "@radix-ui/react-accordion" +import { ChevronDown } from "lucide-react" + +import { cn } from "@/lib/utils" + +const Accordion = AccordionPrimitive.Root + +const AccordionItem = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AccordionItem.displayName = "AccordionItem" + +const AccordionTrigger = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + svg]:rotate-180", + className + )} + {...props} + > + {children} + + + +)) +AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName + +const AccordionContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + +
{children}
+ +)) + +AccordionContent.displayName = AccordionPrimitive.Content.displayName + +export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } diff --git a/client/src/components/ui/alert-dialog.tsx b/client/src/components/ui/alert-dialog.tsx new file mode 100644 index 0000000..8722561 --- /dev/null +++ b/client/src/components/ui/alert-dialog.tsx @@ -0,0 +1,139 @@ +import * as React from "react" +import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog" + +import { cn } from "@/lib/utils" +import { buttonVariants } from "@/components/ui/button" + +const AlertDialog = AlertDialogPrimitive.Root + +const AlertDialogTrigger = AlertDialogPrimitive.Trigger + +const AlertDialogPortal = AlertDialogPrimitive.Portal + +const AlertDialogOverlay = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName + +const AlertDialogContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + + + + +)) +AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName + +const AlertDialogHeader = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+) +AlertDialogHeader.displayName = "AlertDialogHeader" + +const AlertDialogFooter = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+) +AlertDialogFooter.displayName = "AlertDialogFooter" + +const AlertDialogTitle = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName + +const AlertDialogDescription = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogDescription.displayName = + AlertDialogPrimitive.Description.displayName + +const AlertDialogAction = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName + +const AlertDialogCancel = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName + +export { + AlertDialog, + AlertDialogPortal, + AlertDialogOverlay, + AlertDialogTrigger, + AlertDialogContent, + AlertDialogHeader, + AlertDialogFooter, + AlertDialogTitle, + AlertDialogDescription, + AlertDialogAction, + AlertDialogCancel, +} diff --git a/client/src/components/ui/alert.tsx b/client/src/components/ui/alert.tsx new file mode 100644 index 0000000..a35672e --- /dev/null +++ b/client/src/components/ui/alert.tsx @@ -0,0 +1,60 @@ +import * as React from "react" +import { cva } from 'class-variance-authority'; +import type { VariantProps } from 'class-variance-authority'; + +import { cn } from "@/lib/utils" + +const alertVariants = cva( + "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground", + { + variants: { + variant: { + default: "bg-background text-foreground", + destructive: + "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive", + }, + }, + defaultVariants: { + variant: "default", + }, + } +) + +const Alert = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes & VariantProps +>(({ className, variant, ...props }, ref) => ( +
+)) +Alert.displayName = "Alert" + +const AlertTitle = React.forwardRef< + HTMLParagraphElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)) +AlertTitle.displayName = "AlertTitle" + +const AlertDescription = React.forwardRef< + HTMLParagraphElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)) +AlertDescription.displayName = "AlertDescription" + +export { Alert, AlertTitle, AlertDescription } diff --git a/client/src/components/ui/aspect-ratio.tsx b/client/src/components/ui/aspect-ratio.tsx new file mode 100644 index 0000000..c4abbf3 --- /dev/null +++ b/client/src/components/ui/aspect-ratio.tsx @@ -0,0 +1,5 @@ +import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio" + +const AspectRatio = AspectRatioPrimitive.Root + +export { AspectRatio } diff --git a/client/src/components/ui/avatar.tsx b/client/src/components/ui/avatar.tsx new file mode 100644 index 0000000..fc7f964 --- /dev/null +++ b/client/src/components/ui/avatar.tsx @@ -0,0 +1,51 @@ +"use client" + +import * as React from "react" +import * as AvatarPrimitive from "@radix-ui/react-avatar" + +import { cn } from "@/lib/utils" + +const Avatar = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +Avatar.displayName = AvatarPrimitive.Root.displayName + +const AvatarImage = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AvatarImage.displayName = AvatarPrimitive.Image.displayName + +const AvatarFallback = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName + +export { Avatar, AvatarImage, AvatarFallback } diff --git a/client/src/components/ui/badge.tsx b/client/src/components/ui/badge.tsx new file mode 100644 index 0000000..196856d --- /dev/null +++ b/client/src/components/ui/badge.tsx @@ -0,0 +1,39 @@ +import * as React from "react" +import { cva } from 'class-variance-authority'; +import type { VariantProps } from 'class-variance-authority'; + +import { cn } from "@/lib/utils" + +const badgeVariants = cva( + // Whitespace-nowrap: Badges should never wrap. + "whitespace-nowrap inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2" + + " hover-elevate " , + { + variants: { + variant: { + default: + "border-transparent bg-primary text-primary-foreground shadow-xs", + secondary: "border-transparent bg-secondary text-secondary-foreground", + destructive: + "border-transparent bg-destructive text-destructive-foreground shadow-xs", + + outline: " border [border-color:var(--badge-outline)] shadow-xs", + }, + }, + defaultVariants: { + variant: "default", + }, + }, +) + +export interface BadgeProps + extends React.HTMLAttributes, + VariantProps {} + +function Badge({ className, variant, ...props }: BadgeProps) { + return ( +
+ ); +} + +export { Badge, badgeVariants } diff --git a/client/src/components/ui/breadcrumb.tsx b/client/src/components/ui/breadcrumb.tsx new file mode 100644 index 0000000..60e6c96 --- /dev/null +++ b/client/src/components/ui/breadcrumb.tsx @@ -0,0 +1,115 @@ +import * as React from "react" +import { Slot } from "@radix-ui/react-slot" +import { ChevronRight, MoreHorizontal } from "lucide-react" + +import { cn } from "@/lib/utils" + +const Breadcrumb = React.forwardRef< + HTMLElement, + React.ComponentPropsWithoutRef<"nav"> & { + separator?: React.ReactNode + } +>(({ ...props }, ref) =>