feat(finance): near-live quotes + market-session badge on watchlist & ticker

Watchlist cards and the ticker page now refresh their numbers without a
reload and show the trading session (pre-market / open / after-hours /
closed). No websockets — prod runs keyless Yahoo and WS streaming is a
PRD non-goal — so this is visibility-aware polling that pauses when the
tab is hidden or the market is closed.

- Quote gains marketState (PRE/REGULAR/POST/CLOSED). Yahoo getQuote
  rewritten to use the intraday chart `meta` (live regularMarketPrice +
  pre/post bars for the true last price) and derive the session from
  meta.currentTradingPeriod; falls back to candle derivation on failure.
- New GET /api/finance/quotes batch endpoint feeds the watchlist; cards
  show last price + session, and 1D now uses the live day-change.
- useVisibleInterval hook (ticker 15s, watchlist 20s) + shared
  MarketSessionBadge. Quote cache TTL 300s -> 30s so polls surface
  movement; the shared cache bounds upstream to ~1 fetch/symbol/window.
- Tests: yahoo.test.ts covers session classification + meta parsing.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: ralyodio

src/app/api/finance/quotes/route.ts

@@ -0,0 +1,55 @@
+/**
+ * GET /api/finance/quotes?symbols=NVDA,AAPL,…
+ *
+ * Batch last-price + session quotes for the watchlist cards (PRD §3.1). Paid-
+ * gated; uses the per-profile market-data provider (connected broker → Yahoo
+ * fallback) and the shared read-through quote cache so polling many symbols
+ * stays cheap. Returns `{ quotes: { SYM: Quote } }`, omitting symbols with no data.
+ */
+
+import { NextRequest, NextResponse } from 'next/server';
+import { requireActiveSubscription } from '@/lib/subscription/guard';
+import { getActiveProfileId } from '@/lib/profiles/profile-utils';
+import { type MarketDataProvider, type Quote } from '@/lib/finance/market-data';
+import { getMarketDataProviderForProfile } from '@/lib/finance/market-data/for-profile';
+import { readThrough, QUOTE_TTL_SECONDS } from '@/lib/finance/market-data/cache';
+import { parseSymbolList } from '@/lib/finance/watchlist';
+
+export const dynamic = 'force-dynamic';
+
+const MAX_SYMBOLS = 60;
+
+async function quoteFor(provider: MarketDataProvider, symbol: string): Promise<Quote | null> {
+  return readThrough<Quote | null>(symbol, `quote:${provider.id}`, QUOTE_TTL_SECONDS, () =>
+    provider.getQuote(symbol),
+  );
+}
+
+export async function GET(request: NextRequest): Promise<NextResponse> {
+  const gate = await requireActiveSubscription(request);
+  if (gate) return gate;
+
+  const { valid } = parseSymbolList(request.nextUrl.searchParams.get('symbols') ?? '');
+  if (valid.length === 0) return NextResponse.json({ quotes: {} });
+
+  const profileId = await getActiveProfileId();
+  const provider = await getMarketDataProviderForProfile(profileId);
+
+  const symbols = valid.slice(0, MAX_SYMBOLS);
+  const entries = await Promise.all(
+    symbols.map(async (symbol): Promise<[string, Quote | null]> => {
+      try {
+        return [symbol, await quoteFor(provider, symbol)];
+      } catch {
+        return [symbol, null];
+      }
+    }),
+  );
+
+  const quotes: Record<string, Quote> = {};
+  for (const [symbol, quote] of entries) {
+    if (quote) quotes[symbol] = quote;
+  }
+
+  return NextResponse.json({ quotes });
+}

src/app/finance/finance-hub.tsx

@@ -10,10 +10,21 @@ import Link from 'next/link';
 import { normalizeSymbol } from '@/lib/finance/market-data/stooq';
 import { BrokerConnect } from './broker-connect';
 import { Sparkline } from '@/components/finance/sparkline';
+import { MarketSessionBadge } from '@/components/finance/market-session';
+import { useVisibleInterval } from '@/lib/finance/use-visible-interval';
 import type { WatchlistChanges } from '@/lib/finance/performance';
+import type { Quote } from '@/lib/finance/market-data/types';
 
 const RECENT_KEY = 'finance:recent';
 
+/** Live-quote poll cadence (ms) for the watchlist while the tab is visible. */
+const QUOTE_POLL_MS = 20_000;
+
+function formatPrice(value: number | undefined): string {
+  if (value === undefined || !Number.isFinite(value)) return '—';
+  return `$${value.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
+}
+
 interface WatchlistRow {
   id: string;
   symbol: string;
@@ -43,6 +54,7 @@ export function FinanceHub(): React.ReactElement {
   const [bulkMsg, setBulkMsg] = useState<string | null>(null);
   const [sparklines, setSparklines] = useState<Record<string, number[]>>({});
   const [changes, setChanges] = useState<Record<string, WatchlistChanges>>({});
+  const [quotes, setQuotes] = useState<Record<string, Quote>>({});
 
   useEffect(() => {
     try {
@@ -101,6 +113,27 @@ export function FinanceHub(): React.ReactElement {
     };
   }, [watchlistKey]);
 
+  // Live last price + market session per symbol — fetched on change and polled
+  // while the tab is visible (see useVisibleInterval below).
+  const loadQuotes = useCallback(() => {
+    if (!watchlistKey) {
+      setQuotes({});
+      return;
+    }
+    fetch(`/api/finance/quotes?symbols=${encodeURIComponent(watchlistKey)}`, { cache: 'no-store' })
+      .then((res) => (res.ok ? res.json() : { quotes: {} }))
+      .then((body: { quotes?: Record<string, Quote> }) => setQuotes(body.quotes ?? {}))
+      .catch(() => undefined);
+  }, [watchlistKey]);
+
+  useEffect(() => {
+    loadQuotes();
+  }, [loadQuotes]);
+
+  // Stop polling when every symbol's session is closed (nothing moves).
+  const anyLive = Object.values(quotes).some((q) => q.marketState && q.marketState !== 'CLOSED');
+  useVisibleInterval(loadQuotes, QUOTE_POLL_MS, watchlistKey.length > 0 && anyLive);
+
   const addBulk = useCallback(
     async (e: React.FormEvent) => {
       e.preventDefault();
@@ -216,20 +249,32 @@ export function FinanceHub(): React.ReactElement {
           </p>
         ) : (
           <div className="grid grid-cols-2 gap-3 sm:grid-cols-3">
-            {watchlist.map((row) => (
-              <Link key={row.id} href={`/finance/ticker/${row.symbol}`} className="card p-4 hover:bg-bg-tertiary">
-                <div className="flex items-center justify-between gap-2">
-                  <div className="text-lg font-semibold text-text-primary">{row.symbol}</div>
-                  <Sparkline samples={sparklines[row.symbol]} width={56} />
-                </div>
-                {row.exchange ? <div className="text-xs text-text-muted">{row.exchange}</div> : null}
-                <div className="mt-3 flex items-center justify-between gap-1 border-t border-border-primary pt-2">
-                  <PctChange label="1D" value={changes[row.symbol]?.d1 ?? null} />
-                  <PctChange label="5D" value={changes[row.symbol]?.d5 ?? null} />
-                  <PctChange label="30D" value={changes[row.symbol]?.d30 ?? null} />
-                </div>
-              </Link>
-            ))}
+            {watchlist.map((row) => {
+              const quote = quotes[row.symbol];
+              // Prefer the live intraday day-change for 1D; fall back to the
+              // candle-derived trailing change before the quote loads.
+              const d1 = quote ? quote.changePercent : changes[row.symbol]?.d1 ?? null;
+              return (
+                <Link key={row.id} href={`/finance/ticker/${row.symbol}`} className="card p-4 hover:bg-bg-tertiary">
+                  <div className="flex items-center justify-between gap-2">
+                    <div className="text-lg font-semibold text-text-primary">{row.symbol}</div>
+                    <Sparkline samples={sparklines[row.symbol]} width={56} />
+                  </div>
+                  <div className="mt-1 flex items-center justify-between gap-2">
+                    <span className="text-base font-semibold tabular-nums text-text-primary">
+                      {formatPrice(quote?.price)}
+                    </span>
+                    <MarketSessionBadge state={quote?.marketState} />
+                  </div>
+                  {row.exchange ? <div className="text-xs text-text-muted">{row.exchange}</div> : null}
+                  <div className="mt-3 flex items-center justify-between gap-1 border-t border-border-primary pt-2">
+                    <PctChange label="1D" value={d1} />
+                    <PctChange label="5D" value={changes[row.symbol]?.d5 ?? null} />
+                    <PctChange label="30D" value={changes[row.symbol]?.d30 ?? null} />
+                  </div>
+                </Link>
+              );
+            })}
           </div>
         )}
       </section>

src/app/finance/ticker/[ticker]/ticker-view.tsx

@@ -17,6 +17,11 @@ import { NewsSection } from '@/components/news';
 // never pulled into the client bundle.
 import { TICKER_RANGES, type AssetInfo, type Candle, type Fundamentals, type Quote, type TickerRange } from '@/lib/finance/market-data/types';
 import type { WatchlistChanges } from '@/lib/finance/performance';
+import { useVisibleInterval } from '@/lib/finance/use-visible-interval';
+import { MarketSessionBadge } from '@/components/finance/market-session';
+
+/** Quote poll cadence (ms) while the tab is visible and a session is live. */
+const QUOTE_POLL_MS = 15_000;
 
 const RECENT_KEY = 'finance:recent';
 const RECENT_MAX = 12;
@@ -68,20 +73,26 @@ export function TickerView({ symbol }: { symbol: string }): React.ReactElement {
     rememberRecent(symbol);
   }, [symbol]);
 
-  // Quote (independent of range).
-  useEffect(() => {
-    let cancelled = false;
+  // Quote (independent of range). Fetched on mount and then polled live while
+  // the tab is visible — see the useVisibleInterval below.
+  const loadQuote = useCallback(() => {
     fetch(`/api/finance/quote?symbol=${encodeURIComponent(symbol)}`, { cache: 'no-store' })
       .then((res) => (res.ok ? res.json() : null))
       .then((body) => {
-        if (!cancelled && body?.quote) setQuote(body.quote as Quote);
+        if (body?.quote) setQuote(body.quote as Quote);
       })
       .catch(() => undefined);
-    return () => {
-      cancelled = true;
-    };
   }, [symbol]);
 
+  useEffect(() => {
+    setQuote(null);
+    loadQuote();
+  }, [loadQuote]);
+
+  // Poll the quote for near-live price/stats. Pause once we know the market is
+  // closed (the numbers can't move), but keep polling pre/regular/after-hours.
+  useVisibleInterval(loadQuote, QUOTE_POLL_MS, quote?.marketState !== 'CLOSED');
+
   // Candles (re-fetched per range).
   useEffect(() => {
     let cancelled = false;
@@ -223,7 +234,7 @@ export function TickerView({ symbol }: { symbol: string }): React.ReactElement {
               {asset.exchange ? <span className="text-text-muted"> · {asset.exchange}</span> : null}
             </div>
           ) : null}
-          {quote ? <div className="mt-2 flex items-baseline gap-3">
+          {quote ? <div className="mt-2 flex flex-wrap items-baseline gap-x-3 gap-y-1">
               <span className="text-2xl font-semibold text-text-primary">
                 ${formatNumber(quote.price, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
               </span>
@@ -232,6 +243,7 @@ export function TickerView({ symbol }: { symbol: string }): React.ReactElement {
                 {formatNumber(quote.change, { maximumFractionDigits: 2 })} ({changePositive ? '+' : ''}
                 {formatNumber(quote.changePercent, { maximumFractionDigits: 2 })}%)
               </span>
+              <MarketSessionBadge state={quote.marketState} className="self-center" />
             </div> : null}
           <div className="mt-3 flex items-center gap-5">
             <TrailingChange label="1D" value={changes?.d1 ?? null} />
@@ -280,7 +292,7 @@ export function TickerView({ symbol }: { symbol: string }): React.ReactElement {
         <Stat label="Volume" value={formatVolume(quote?.volume)} />
         <Stat
           label="As of"
-          value={quote ? new Date(quote.asOf * 1000).toLocaleDateString() : '—'}
+          value={quote ? new Date(quote.asOf * 1000).toLocaleString([], { dateStyle: 'short', timeStyle: 'short' }) : '—'}
         />
       </div>
 

src/components/finance/market-session.tsx

@@ -0,0 +1,44 @@
+/**
+ * Finance — small market-session badge (pre-market / open / after-hours /
+ * closed). Shared by the watchlist cards and the ticker page so the label and
+ * colors stay consistent.
+ */
+
+import type { MarketSession } from '@/lib/finance/market-data/types';
+
+const LABELS: Record<MarketSession, string> = {
+  PRE: 'Pre-market',
+  REGULAR: 'Market open',
+  POST: 'After hours',
+  CLOSED: 'Closed',
+};
+
+const STYLES: Record<MarketSession, string> = {
+  PRE: 'bg-amber-500/15 text-amber-300',
+  REGULAR: 'bg-green-500/15 text-green-300',
+  POST: 'bg-indigo-500/15 text-indigo-300',
+  CLOSED: 'bg-bg-tertiary text-text-muted',
+};
+
+export function marketSessionLabel(state: MarketSession | undefined): string | null {
+  return state ? LABELS[state] : null;
+}
+
+export function MarketSessionBadge({
+  state,
+  className = '',
+}: {
+  state: MarketSession | undefined;
+  className?: string;
+}): React.ReactElement | null {
+  if (!state) return null;
+  const live = state !== 'CLOSED';
+  return (
+    <span
+      className={`inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-medium uppercase tracking-wide ${STYLES[state]} ${className}`}
+    >
+      {live ? <span className="h-1.5 w-1.5 rounded-full bg-current" aria-hidden /> : null}
+      {LABELS[state]}
+    </span>
+  );
+}

src/lib/finance/market-data/cache.ts

@@ -11,8 +11,12 @@ import type { Json } from '@/lib/supabase';
 
 const CACHE_TABLE = 'finance_quotes_cache';
 
-/** Default freshness windows (seconds). EOD data changes at most daily. */
-export const QUOTE_TTL_SECONDS = 5 * 60;
+/**
+ * Default freshness windows (seconds). Quotes carry an intraday last price +
+ * session, so the window is short to feel near-live; the shared cache bounds
+ * upstream load to ~1 fetch per symbol per window regardless of viewer count.
+ */
+export const QUOTE_TTL_SECONDS = 30;
 export const CANDLES_TTL_SECONDS = 60 * 60;
 /** Fundamentals (valuation/perf/technicals) move slowly — cache for hours. */
 export const FUNDAMENTALS_TTL_SECONDS = 6 * 60 * 60;

src/lib/finance/market-data/types.ts

@@ -24,6 +24,13 @@ export interface Candle {
   volume: number;
 }
 
+/**
+ * Trading session for a symbol's primary exchange:
+ *   PRE = pre-market, REGULAR = regular hours, POST = after-hours, CLOSED = no
+ *   session active. Providers that don't expose it leave `marketState` unset.
+ */
+export type MarketSession = 'PRE' | 'REGULAR' | 'POST' | 'CLOSED';
+
 /** Last price + the key stats we can render defensively (PRD §3.2). */
 export interface Quote {
   symbol: string;
@@ -37,6 +44,8 @@ export interface Quote {
   volume: number;
   /** UTC unix seconds of the latest bar backing this quote. */
   asOf: number;
+  /** Current trading session, when the provider exposes it. */
+  marketState?: MarketSession;
 }
 
 /** Symbol typeahead result (PRD §3.1). */