feat: add stock detail page with chart, position, and orders

- Add /api/alpaca/orders endpoint for order history - Add TradingView chart component for candlestick visualization - Add /analyze/:ticker route with position and orders display - Make ticker cells in analyze page clickable for navigation
2026-05-14 11:00:35 +02:00
parent 043c3d5afe
commit 2e22fd5635
14 changed files with 541 additions and 4 deletions
@@ -0,0 +1,74 @@
+# 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
+
+1. `app/routes/analyze.ticker.tsx` - Stock detail page component
+2. `app/components/TradingViewChart.tsx` - TradingView lightweight charts wrapper
+3. `app/routes/api/alpaca/orders.ts` - Orders API endpoint
+4. `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)
+├── Orders Table (recent orders with status)
+├── 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.
+
+```typescript
+// 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
+
+1. User clicks ticker in analyze page table
+2. Navigates to `/analyze/:ticker`
+3. Page shows chart at top, position/orders/analysis below
+4. "Rerun Analysis" button triggers TradingGraph