<div align="center"> <img src="public/icons/icon-192.png" alt="logo" width="96" />

📊 Market Research Cockpit

A one-screen real-time market dashboard for financial & industry research

A-shares / HK / US stocks · Commodities · US Treasury yields · Sector heat · Money flow · 7×24 news flash · Industry-chain watchlists

简体中文

</div>

✨ Features

• 🌍 Global markets on one screen — SSE / SZSE / Hang Seng / Dow / Nasdaq / S&P 500 / VIX / USD-CNY, with minute-level index charts side by side
• 🥇 Commodities & crypto — NY gold/silver, London gold, SHFE gold, LME copper, crude oil, BTC — live prices with intraday curves
• 💵 US Treasury monitor — 10Y / 2Y yields, 2s10s spread, yield-curve shape and its month-by-month history back to 2001
• 🔥 Sector heat radar — Industry / concept sector rankings; click a sector to drill into constituents, leading stocks and money flow
• 💰 Money-flow tracking — Top stocks by main-force net inflow, minute-level cumulative sector flow curves, hot / top-gainer / top-loser lists
• ⛓️ Industry-chain panorama — Semiconductors, AI compute, EV, robotics, innovative drugs and more; upstream/midstream/downstream tickers linked to live quotes. Stock lists can be edited manually or fetched automatically from iwencai
• 🤖 AI cockpit — OpenRouter daily rankings API tracking token-consumption trends of 50+ global LLM providers (7d–1y ranges), stacked-area share charts by provider/country/region, 60+ day long-range history
• 💹 LLM price-competition watch — Four panels on a 2×3 grid: TTSI spend-index trend (weighted / closed-source / open-source price lines on a 0-based axis, multi-month full history from a local ttsi.csv CC BY 4.0 archive merged with the daily RSS tail), model price table (~400 models, sortable by intelligence / input / output / task cost), value scatter (intelligence index × task cost on a log axis, vendor colors), and a price-cut / share-shift event feed from TrakToken daily annotations
• 🪟 Earnings window (/fin) — Earnings-season macro view: disclosure calendar (14-day rhythm bars + today's list), earnings forecasts (beat/miss stats bar + profit-range details), industry profit ranking (scale × momentum dual encoding), stock profit ranking (by amount / growth), plus per-company 12-quarter trends (revenue/profit bars + ROE/gross/net margin lines)
• 🏷️ Commodity prices page (/goods) — Main-contract futures daily trends across 6 groups (precious / base / ferrous / energy-chem / agri / international energy) with 30d–365d ranges, plus Sunsirs spot quotes (accumulated daily) and spot–futures basis tables
• 📰 7×24 news flash — Scrolling global financial news with auto-highlighted macro keywords and industry-chain mentions
• 🖥️ Installable desktop app — Built-in PWA support (Web Manifest + Service Worker); install from the browser address bar and run in a standalone window
• 🍎 Native macOS app — Swift WKWebView thin shell, follows the same pattern as Android TV
• 📺 Android TV app — Native WebView shell (android-tv/) with D-pad spatial navigation, fullscreen panel zoom (proportional scaling + slideshow), split-flap ticker, tuned for legacy engines and weak GPUs
• 📱 iOS Scripting script — TypeScript/TSX script (scriptable/, mirrored to theBigGavin/mrd-scripting) that wraps the cockpit in the Scripting app's WebView: TV mode via ?tv=1, forced landscape, safe-area-free fullscreen, Liquid Glass exit button, local splash screen with the mrd logo (breathing animation) and a white-screen-free transition into the live dashboard
• ⚡ Zero-dependency data service — Built-in Node proxy aggregates public market-data endpoints with in-memory caching; most endpoints need no API key and work out of the box

🏗️ Architecture

flowchart LR
    subgraph External data sources
        A[Tencent Quotes] --> D
        B[Sina Finance] --> D
        C1[Eastmoney] --> D
        C2[Wallstreetcn] --> D
        C3[CNBC / Binance] --> D
        C4[iwencai] --> D
        C5[OpenRouter rankings] --> D
        C6[Artificial Analysis API] --> D
        C7[TrakToken TTSI RSS] --> D
    end
    subgraph This project
        D["Node data proxy<br/>in-memory TTL cache"] -->|"/api/*"| E["React 19 frontend<br/>polling refresh"]
        E --> F[One-screen cockpit UI]
    end

• The frontend prefers the bundled Node proxy; when it is unavailable, some endpoints (Tencent / Wallstreetcn) gracefully fall back to direct browser connections
• Unified client quote hub: all panel prices / changes come from a single client-side quote hub (src/lib/market.ts) that batch-fetches every 5s and distributes one snapshot — the same ticker renders the same frame everywhere; server-side quotes are cached per code (5s, aligned with the client poll loop) and watch-set changes only fetch the new codes
• Per-endpoint server cache TTLs (5s for quotes up to 24h for sector membership), bounded capacity (LRU + periodic sweep), no database, no external storage
• Upstream-friendly under many concurrent users: per-code TTL caches + in-flight dedup share one upstream fetch across concurrent cache misses, failure backoff (5s→2min negative caching) keeps a downed upstream from being hammered, browser-direct fallbacks are throttled per code, and /api/stats exposes request / upstream-fetch / 429 counters
• Spot prices are collected by the server every 4 hours into local history files — history grows day by day without the frontend being online
• Single-process production: one port serves both the API and the built frontend

🚀 Quick start

Prerequisites

• Node.js 18+
• curl available on the system (used by some proxy endpoints)

Local development

npm install     # or pnpm install
npm run dev

• Frontend dev server: http://localhost:3000
• Data proxy: http://localhost:3001 (Vite proxies /api to it automatically)

Production

npm run build   # builds to dist/
# Optional: configure API keys (AI panels)
#   echo 'OPENROUTER_API_KEY=sk-or-v1-xxxx' > server/.env          # AI cockpit usage panel
#   echo 'ARTIFICIAL_ANALYSIS_API_KEY=aa_xxxx' >> server/.env      # LLM price panels
# Optional: full TTSI history — download ttsi.csv from traktoken.com and
# place it at server/data/ttsi.csv (CC BY 4.0). Without it the trend
# panel falls back to the 60-day RSS tail automatically.
npm start       # single process, visit http://localhost:3000

Docker

docker build -t market-cockpit .
docker run -p 3000:3000 market-cockpit

Install as a desktop app (PWA)

Open the deployed page in Chrome / Edge and click the install icon on the right of the address bar (or menu → "Install Market Research Cockpit") to run it as a standalone desktop app with offline-cached static assets and its own icon.

Note: market data is fetched live; offline only the app shell works.

macOS Desktop App

The macos/ directory contains a native Swift WKWebView shell. Same pattern as Android TV — a thin native window around the same web UI.

Prerequisites: Xcode

open macos/MarketCockpit.xcodeproj  # Open in Xcode, press ⌘R to build & run

Loads http://localhost:3000/?desktop=1 by default (run npm start first).

Android TV app

The android-tv/ directory contains a native WebView shell (zero third-party dependencies) that brings the cockpit to Android TVs and set-top boxes. The web app enters TV mode via ?tv=1 and shares the same codebase as the desktop version.

Remote-control model

• D-pad spatial navigation: panels, nav links, tabs and scroll regions are all focusable (cyan highlight ring), scored by edge distance + axis overlap so the candidate straight ahead always wins
• OK: zoom a panel / activate a button / switch pages
• Zoom = fullscreen overlay: the panel covers the screen with a dim backdrop, its content scaled up proportionally (CSS zoom, capped at 3x), while every other panel stays put — zero reflow
• Inside the overlay: ←/→ switches to the adjacent panel slideshow-style; ↑/↓ scrolls the content (at the top, one more ↑ jumps to the tab bar); tabs, board rows and the constituents sidebar are all reachable and operable
• Back: restore the zoomed panel → history back → exit; Menu: change the server URL
• Split-flap ticker: the top quote strip works like a departure board — 7 equal-width cards, one card flipping at a time every few seconds (a full-width scrolling layer is too much for weak TV GPUs; flipping only repaints a tiny region)
• Splash screen: breathing logo + progress indicator that fades out once the page is ready

TV-mode adaptations (no effect on desktop)

• Fixed 1920 CSS-px viewport so layout and font sizes are identical on any TV density; the shell computes the initial scale from the screen's dp width to fit exactly
• Legacy engine compatibility (< Chromium 88): fallbacks for :where(), inset and flex gap
• Weak-GPU optimizations: blur/shadows/animations disabled, clock and countdowns tick per minute, long lists trimmed (boards 200→40, news