Files

T

henry 77032a3c3a fix: improve stock detail page design

- Fix font colors (gray-900 for headings, gray-600 for secondary text)
- Replace JSON pre block with styled orders table
- Update design spec with visual details

2026-05-14 11:08:29 +02:00

2.3 KiB

Raw Permalink Blame History

Stock Detail Page Implementation Design

Goal: Create a stock detail page at /analyze/:ticker showing TradingView chart, position, orders, and trading graph results.

Architecture: Dynamic route approach - separate route from analyze page with ticker parameter.

Files to Create/Modify

app/routes/analyze.ticker.tsx - Stock detail page component
app/components/TradingViewChart.tsx - TradingView lightweight charts wrapper
app/routes/api/alpaca/orders.ts - Orders API endpoint
app/routes.ts - Add new route

Page Structure

/analyze/:ticker
├── Navbar
├── Stock Header (ticker, current price)
├── TradingView Chart (full width)
├── Position Card (quantity, avg cost, current value)
│   - Styled card with gray-900 headings, gray-600 text
├── Orders Table (recent orders with status)
│   - Table with Side (green/red), Qty, Status, Filled Price, Filled At
│   - Empty state shows "No orders found for {ticker}"
└── Trading Graph Results (expandable sections)
    ├── Analyst Reports (fundamentals, technical, sentiment)
    ├── Debate Summary
    └── Final Decision

Data Sources

Chart: TradingView widget with Alpaca data
Position: /api/alpaca/positions filtered by ticker
Orders: New /api/alpaca/orders endpoint
Analysis: /api/analyze + TradingGraph results

API Changes

GET /api/alpaca/orders

Returns list of orders from Alpaca, optionally filtered by ticker.

// Response format
{
  orders: Array<{
    id: string;
    ticker: string;
    qty: number;
    side: "buy" | "sell";
    status: "new" | "filled" | "canceled";
    filled_at: string | null;
    filled_avg_price: string;
  }>
}

Component Details

TradingViewChart.tsx

Uses TradingView lightweight charts library
Props: ticker, data (price data array)
Fetches historical bars from Alpaca API
Renders candlestick chart

analyze.ticker.tsx

Loader function fetches position, orders, and runs analysis
Uses useLoaderData for server-fetched data
Client-side rerun of analysis via form action

User Flow

User clicks ticker in analyze page table
Navigates to /analyze/:ticker
Page shows chart at top, position/orders/analysis below
"Rerun Analysis" button triggers TradingGraph

2.3 KiB Raw Permalink Blame History