# Stock Market Daily Brief — Frontend UX Specification **Project:** Market Brief Dashboard **Author:** Wadsworth (Chief of Staff) **Target:** Daedalus 🎨 (Frontend Architect) **Date:** 2026-04-24 **Status:** DRAFT — Pending Director Approval **Updated:** 2026-04-24 — Added Finnhub dual-sentiment, analyst data, earnings --- ## 1. Purpose A private, Tailscale-only web dashboard that visualizes the daily stock brief data. This is the "fancy" companion to the Telegram DM brief — a place to see the full picture with charts, trends, and interactivity that Telegram can't provide. --- ## 2. Access & Security - **URL:** `http://titanium-butler.tail864e81.ts.net:8123` (or similar, Tailscale-only) - **Auth:** Tailscale identity (no public access, no login page needed) - **Network:** Bound to Tailscale interface only — zero public exposure - **Data source:** JSON API served by the backend pipeline (see Socrates spec) --- ## 3. Views ### 3.1 Daily Brief (Home) The main landing page — what Matt sees each morning. **Layout: Single-column, mobile-first** ``` ┌─────────────────────────────────┐ │ 📈 Market Brief — Apr 24, 2026 │ │ │ │ Market Overview │ │ S&P 500 +0.4% │ NASDAQ +0.7% │ VIX 14.2 │ │ │ │ ── Owned Positions ────────── │ │ │ │ AAPL $192.45 🟢 +0.64% │ │ ████████████████░░ RSI 58.2 │ │ Sentiment: Bullish (72%) │ │ P&L: +$2,507.50 (+35.2%) │ │ │ │ MSFT $378.90 🔴 -0.31% │ │ ██████████████░░░░ RSI 44.1 │ │ Sentiment: Neutral (55%) │ │ P&L: +$890.00 (+12.1%) │ │ │ │ ── Watchlist ──────────────── │ │ │ │ TSLA $245.10 🔴 -1.37% │ │ Sentiment: Bearish (65%) │ │ ⚠️ Below 50-day SMA │ │ │ │ ── Alerts ─────────────────── │ │ ⚠️ AAPL RSI approaching 70 │ │ ⚠️ TSLA broke below SMA-50 │ │ │ │ [📥 Telegram Brief Sent 7:30] │ └─────────────────────────────────┘ ``` **Key elements:** - Color-coded sentiment badges (🟢🔴🟡) - RSI as a visual bar (not just a number) - P&L with both dollar and percentage - Alert section pinned at bottom - "Brief sent" confirmation with timestamp ### 3.2 Position Detail (Per-Ticker Drill-Down) Click a ticker → expanded view with dual sentiment, analyst data, and earnings: ``` ┌─────────────────────────────────┐ │ ← Back AAPL — Apple Inc. │ │ │ │ $192.45 🟢 +$1.23 (+0.64%) │ │ │ │ ┌─────────────────────────────┐ │ │ │ [30-day price chart] │ │ │ │ with SMA-50 overlay │ │ │ └─────────────────────────────┘ │ │ │ │ Technicals │ │ RSI(14): 58.2 │ Neutral │ │ MACD: Bullish crossover │ │ SMA-50: $188.40 (above) │ │ SMA-200: $175.20 (above) │ │ Volume: 1.1x average │ │ │ │ Sentiment (Dual Source) │ │ Finnhub: 🟢 Bullish (72%) │ │ Local AI: 🟢 Bullish (68%) │ │ ✓ Signals aligned │ │ │ │ Analyst Data (Finnhub) │ │ Consensus: Buy (25/30) │ │ Price Target: $210 (mean) │ │ │ High: $250 Low: $170 │ │ │ Earnings: Next ~Apr 29 │ │ │ │ Latest Headlines (Finnhub) │ │ 1. "Apple Services Revenue..." │ │ 2. "Tariff Concerns May..." │ │ 3. "iPhone 18 Supply Chain..." │ │ │ │ Position Details │ │ Shares: 50 │ Cost: $142.30 │ │ Value: $9,622.50 │ │ Total P&L: +$2,507.50 (+35%) │ └─────────────────────────────────┘ ``` **Key elements:** - Sparkline / small price chart (30-day) - SMA overlays on chart - **Dual sentiment display** — Finnhub pre-scored (primary) + local AI (2nd opinion) - **Divergence indicator** if Finnhub and local model disagree: `⚠️ Divergent signals` - Analyst consensus + price targets (from Finnhub) - Upcoming earnings date - Clickable headlines (link to source) - Position details (only if owned, hidden for watchlist) ### 3.3 Brief History A scrollable archive of past daily briefs: ``` ┌─────────────────────────────────┐ │ ← Back Brief History │ │ │ │ 📅 Apr 24 │ S&P +0.4% │ │ 📅 Apr 23 │ S&P -0.2% │ │ 📅 Apr 22 │ S&P +0.8% │ │ 📅 Apr 21 │ S&P +0.1% │ │ ... │ │ │ │ Click any date to view brief │ └─────────────────────────────────┘ ``` Each date links to a static snapshot of that day's brief (read-only). ### 3.4 Settings (Future) Manage portfolio config from the UI (instead of editing JSON): - Add/remove tickers from owned + watchlist - Set alert thresholds per ticker - Choose delivery time - Toggle technicals displayed - Connect/disconnect Altruist sync - Manage Finnhub API key **V1 scope:** Read-only dashboard. Settings page is V2. --- ## 4. Design Tokens Follow the HoffDesk design system (if established) or define new tokens: | Token | Value | Notes | |-------|-------|-------| | `--color-bullish` | `#22c55e` | Green for positive | | `--color-bearish` | `#ef4444` | Red for negative | | `--color-neutral` | `#eab308` | Yellow/amber for neutral | | `--color-divergence` | `#f97316` | Orange for sentiment divergence | | `--color-bg` | `#0f172a` | Dark navy (dashboard feel) | | `--color-surface` | `#1e293b` | Card background | | `--color-text` | `#f8fafc` | Primary text | | `--color-muted` | `#94a3b8` | Secondary text | | `--font-mono` | `JetBrains Mono` | For numbers and tickers | | `--font-sans` | `Inter` | Body text | Dark mode only — this is a morning dashboard, dark is easier on the eyes. --- ## 5. Technical Stack | Component | Choice | Rationale | |-----------|--------|-----------| | Framework | Jinja2 templates + HTMX | Matches blog, lightweight, server-rendered | | Charts | Lightweight Charts (TradingView) | Purpose-built for financial data, tiny footprint | | CSS | Tailwind + custom tokens | Fast, consistent | | Server | FastAPI (served by Socrates' backend) | Python, integrates with pipeline | | Data | Read `memory/stock-data-cache.json` + `memory/stock-brief-latest.md` | No separate DB needed for V1 | --- ## 6. API Contract (From Socrates) The backend exposes these endpoints for the dashboard: | Method | Path | Description | |--------|------|-------------| | `GET` | `/api/brief/today` | Today's brief (JSON) | | `GET` | `/api/brief/{date}` | Historical brief by date | | `GET` | `/api/brief/history` | List of available dates | | `GET` | `/api/ticker/{symbol}` | Detailed data for one ticker | | `GET` | `/api/portfolio` | Current portfolio config | | `GET` | `/api/ticker/{symbol}/sentiment` | Finnhub + local sentiment comparison | | `GET` | `/api/ticker/{symbol}/analysts` | Analyst recs, price targets, upgrades/downgrades | Response format matches the output schema in the backend spec. --- ## 7. Mobile Considerations - Single-column layout is mobile-native - Ticker cards are touch-friendly (48px minimum tap targets) - Charts are swipe-scrollable - Brief text is copyable for sharing - No pinch-to-zoom needed (data is sized for mobile) --- ## 8. V1 Scope **In:** - Daily brief view (home) - Per-ticker drill-down with dual sentiment + analyst data - Brief history (read-only) - Dark theme, mobile-first - Financial charts (30-day sparkline minimum) - Sentiment indicators (Finnhub + local AI) - Analyst consensus + price targets - Earnings calendar integration **Out (V2+):** - Settings UI (add/remove tickers, thresholds, Altruist connection) - Interactive charts (zoom, timeframe selector) - Portfolio performance chart (cumulative P&L over time) - Push notifications (browser notifications for alerts) - Multiple portfolios - Export to CSV/PDF --- ## 9. Design Inspiration Think: **a private Bloomberg terminal for one person.** Information-dense but not cluttered. Data-forward, decoration-light. Every pixel earns its place. Reference vibes: - TradingView dark theme - Finviz heatmap (for future market overview) - Linear.app (clean, minimal UI) --- *Spec by Wadsworth 📋 — routing to Daedalus for design and implementation.*