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
@@ -2,3 +2,4 @@ ALPACA_API_KEY=your_alpaca_api_key_here
 ALPACA_SECRET_KEY=your_alpaca_secret_key_here
 ALPACA_BASE_URL=https://paper-api.alpaca.markets
 OPENROUTER_API_KEY=your_openrouter_api_key_here
+BASE_URL=http://localhost:5173
@@ -0,0 +1,35 @@
+import { useEffect, useRef } from "react";
+import * as LightweightCharts from "lightweight-charts";
+
+interface TradingViewChartProps {
+  ticker: string;
+  data?: Array<{ time: string; open: number; high: number; low: number; close: number }>;
+}
+
+export default function TradingViewChart({ ticker, data }: TradingViewChartProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!containerRef.current) return;
+
+    const chart = LightweightCharts.createChart(containerRef.current, {
+      width: containerRef.current.clientWidth,
+      height: 400,
+    });
+
+    const candlestickSeries = chart.addSeries(LightweightCharts.CandlestickSeries);
+    
+    if (data && data.length > 0) {
+      candlestickSeries.setData(data);
+    }
+
+    return () => chart.remove();
+  }, [data]);
+
+  return (
+    <div className="bg-white rounded-xl shadow-lg p-4">
+      <h3 className="text-lg font-bold mb-3">{ticker} Price Chart</h3>
+      <div ref={containerRef} />
+    </div>
+  );
+}
@@ -0,0 +1,36 @@
+/// <reference types="vitest" />
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { render, screen } from "@testing-library/react";
+import TradingViewChart from "../TradingViewChart";
+
+// Mock lightweight-charts
+vi.mock("lightweight-charts", () => ({
+  createChart: vi.fn(() => ({
+    addSeries: vi.fn(() => ({
+      setData: vi.fn(),
+    })),
+    remove: vi.fn(),
+  })),
+  CandlestickSeries: {},
+}));
+
+describe("TradingViewChart", () => {
+  it("renders the ticker symbol as heading", () => {
+    render(<TradingViewChart ticker="AAPL" />);
+    expect(screen.getByText("AAPL Price Chart")).toBeInTheDocument();
+  });
+
+  it("renders without data prop", () => {
+    render(<TradingViewChart ticker="MSFT" />);
+    expect(screen.getByText("MSFT Price Chart")).toBeInTheDocument();
+  });
+
+  it("renders with data prop", () => {
+    const data = [
+      { time: "2024-01-01", open: 100, high: 110, low: 95, close: 105 },
+      { time: "2024-01-02", open: 105, high: 115, low: 100, close: 110 },
+    ];
+    render(<TradingViewChart ticker="GOOGL" data={data} />);
+    expect(screen.getByText("GOOGL Price Chart")).toBeInTheDocument();
+  });
+});
@@ -4,10 +4,12 @@ export default [
  index("routes/landing.tsx"),
  route("api/alpaca/account", "routes/api/alpaca/account.ts"),
  route("api/alpaca/quote/:ticker", "routes/api/alpaca/quote.ts"),
+  route("api/alpaca/orders", "routes/api/alpaca/orders.ts"),
  route("api/alpaca/positions", "routes/api/alpaca/positions.ts"),
  route("api/indicators", "routes/api/indicators.ts"),
  route("api/analyze", "routes/api/analyze.ts"),
  route("api/stocks", "routes/api/stocks/index.ts"),
  route("stocks", "routes/stocks.tsx"),
  route("analyze", "routes/analyze.tsx"),
+  route("analyze/:ticker", "routes/analyze.ticker.tsx"),
 ] satisfies RouteConfig;
@@ -0,0 +1,52 @@
+import { useLoaderData } from "react-router";
+import TradingViewChart from "../components/TradingViewChart";
+import Navbar from "../components/Navbar";
+
+export const meta = () => [{ title: "Stock Detail - AITrader" }];
+
+interface LoaderData {
+  ticker: string;
+  position: number | null;
+  orders: any[];
+}
+
+export async function loader({ params }: { params: { ticker: string } }) {
+  const ticker = params.ticker?.toUpperCase() || "";
+  
+  // Fetch position
+  const posRes = await fetch(`${process.env.BASE_URL}/api/alpaca/positions`);
+  const positions = posRes.ok ? await posRes.json() : [];
+  const position = positions.find((p: any) => p.ticker === ticker)?.qty ?? null;
+
+  // Fetch orders
+  const ordRes = await fetch(`${process.env.BASE_URL}/api/alpaca/orders`);
+  const ordersData = ordRes.ok ? await ordRes.json() : { orders: [] };
+  const orders = ordersData.orders?.filter((o: any) => o.symbol === ticker) || [];
+
+  return Response.json({ ticker, position, orders });
+}
+
+export default function StockDetail() {
+  const { ticker, position, orders } = useLoaderData() as LoaderData;
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-blue-50">
+      <Navbar />
+      <div className="mx-auto max-w-7xl px-6 py-8">
+        <h1 className="text-3xl font-bold text-gray-900 mb-6">{ticker} Detail</h1>
+
+        <TradingViewChart ticker={ticker} />
+
+        <div className="mt-6">
+          <h2>Position</h2>
+          <p>{position ? `Qty: ${position}` : "No position"}</p>
+        </div>
+
+        <div className="mt-6">
+          <h2>Recent Orders</h2>
+          {orders.length === 0 ? <p>No orders</p> : <pre>{JSON.stringify(orders, null, 2)}</pre>}
+        </div>
+      </div>
+    </div>
+  );
+}
@@ -1,4 +1,5 @@
 import { useState, useEffect } from "react";
+import { Link } from "react-router";
 import Navbar from "../components/Navbar";
 import type { TradingDecision } from "../types/agents";

@@ -321,11 +322,15 @@ export default function Analyze() {
                <tbody>
                  {stocks.map((stock) => (
                    <tr key={stock.id} className="border-b border-gray-100">
-                      <td className="py-3 px-4 font-bold text-gray-900">{stock.ticker}</td>
+                      <td className="py-3 px-4 font-bold text-gray-900">
+                        <Link to={`/analyze/${stock.ticker}`} className="text-blue-600 hover:underline">
+                          {stock.ticker}
+                        </Link>
+                      </td>
                      <td className="py-3 px-4 text-gray-900">
                        {stock.currentPrice ? `$${stock.currentPrice.toFixed(2)}` : "-"}
                      </td>
-<td className="py-3 px-4 text-gray-900 font-medium">
+                      <td className="py-3 px-4 text-gray-900 font-medium">
                        {stock.position}
                      </td>
                      <td className="py-3 px-4">
@@ -0,0 +1,18 @@
+import Alpaca from "@alpacahq/alpaca-trade-api";
+
+const alpaca = new Alpaca({
+  keyId: process.env.ALPACA_API_KEY!,
+  secretKey: process.env.ALPACA_SECRET_KEY!,
+  baseUrl: process.env.ALPACA_BASE_URL || "https://paper-api.alpaca.markets",
+  retryOnError: false,
+});
+
+export async function loader() {
+  try {
+    const orders = await alpaca.getOrders();
+    return Response.json({ orders });
+  } catch (error) {
+    console.error("Alpaca orders error:", error);
+    return Response.json({ orders: [] }, { status: 500 });
+  }
+}
@@ -0,0 +1,289 @@
+# Stock Detail Page Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Create stock detail page at `/analyze/:ticker` with TradingView chart, position, orders, and trading graph results.
+
+**Architecture:** Dynamic route `analyze.ticker.tsx` that fetches ticker data, runs TradingGraph analysis, and displays chart, position, orders, and results.
+
+**Tech Stack:** React Router 7, TradingView lightweight charts, Alpaca API, Prisma
+
+---
+
+## Prerequisite Check
+
+- [ ] Verify Alpaca API key is configured in `.env`
+- [ ] Verify `@tradingview/lightweight-charts` can be installed
+
+---
+
+### Task 1: Add Alpaca Orders API Endpoint
+
+**Files:**
+- Create: `app/routes/api/alpaca/orders.ts`
+
+- [ ] **Step 1: Write the failing test**
+```typescript
+// tests/orders.test.ts
+import { test, expect } from "@playwright/test";
+
+test("GET /api/alpaca/orders returns orders list", async ({ page }) => {
+  const res = await page.request.get("/api/alpaca/orders");
+  expect(res.ok()).toBeTruthy();
+  const data = await res.json();
+  expect(data.orders).toBeDefined();
+});
+```
+
+- [ ] **Step 2: Run test to verify it fails**
+Run: `npm run test:e2e`
+Expected: 404 Not Found
+
+- [ ] **Step 3: Write minimal implementation**
+```typescript
+import Alpaca from "@alpacahq/alpaca-trade-api";
+
+const alpaca = new Alpaca({
+  keyId: process.env.ALPACA_API_KEY!,
+  secretKey: process.env.ALPACA_SECRET_KEY!,
+  baseUrl: process.env.ALPACA_BASE_URL || "https://paper-api.alpaca.markets",
+  retryOnError: false,
+});
+
+export async function loader() {
+  try {
+    const orders = await alpaca.getOrders();
+    return Response.json({ orders });
+  } catch (error) {
+    console.error("Alpaca orders error:", error);
+    return Response.json({ orders: [] }, { status: 500 });
+  }
+}
+```
+
+- [ ] **Step 4: Register route in routes.ts**
+```typescript
+route("api/alpaca/orders", "routes/api/alpaca/orders.ts"),
+```
+
+- [ ] **Step 5: Run test to verify it passes**
+Run: `npm run test:e2e -- tests/orders.test.ts`
+Expected: PASS
+
+- [ ] **Step 6: Commit**
+```bash
+git add app/routes/api/alpaca/orders.ts tests/orders.test.ts
+git commit -m "feat: add alpaca orders API endpoint"
+```
+
+---
+
+### Task 2: Install TradingView Lightweight Charts
+
+**Files:**
+- None (npm install)
+
+- [ ] **Step 1: Install dependency**
+```bash
+npm install @tradingview/lightweight-charts
+```
+
+- [ ] **Step 2: Run typecheck to verify installation**
+Run: `npx tsc --noEmit`
+Expected: No errors
+
+- [ ] **Step 3: Commit**
+```bash
+git add package.json package-lock.json
+git commit -m "feat: install tradingview lightweight charts"
+```
+
+---
+
+### Task 3: Create TradingView Chart Component
+
+**Files:**
+- Create: `app/components/TradingViewChart.tsx`
+
+- [ ] **Step 1: Write the component**
+```typescript
+import { useEffect, useRef } from "react";
+import * as LightweightCharts from "@tradingview/lightweight-charts";
+
+interface TradingViewChartProps {
+  ticker: string;
+  data?: Array<{ time: string; open: number; high: number; low: number; close: number }>;
+}
+
+export default function TradingViewChart({ ticker, data }: TradingViewChartProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!containerRef.current) return;
+
+    const chart = LightweightCharts.createChart(containerRef.current, {
+      width: containerRef.current.clientWidth,
+      height: 400,
+    });
+
+    const candlestickSeries = chart.addCandlestickSeries();
+    
+    if (data && data.length > 0) {
+      candlestickSeries.setData(data);
+    }
+
+    return () => chart.remove();
+  }, [data]);
+
+  return (
+    <div className="bg-white rounded-xl shadow-lg p-4">
+      <h3 className="text-lg font-bold mb-3">{ticker} Price Chart</h3>
+      <div ref={containerRef} />
+    </div>
+  );
+}
+```
+
+- [ ] **Step 2: Run typecheck**
+Run: `npm run typecheck`
+Expected: PASS
+
+- [ ] **Step 3: Commit**
+```bash
+git add app/components/TradingViewChart.tsx
+git commit -m "feat: add tradingview chart component"
+```
+
+---
+
+### Task 4: Create Stock Detail Route
+
+**Files:**
+- Create: `app/routes/analyze.ticker.tsx`
+- Modify: `app/routes.ts`
+
+- [ ] **Step 1: Create the route file**
+```typescript
+import { db } from "../lib/db.server";
+import TradingViewChart from "../components/TradingViewChart";
+import type { TradingDecision } from "../types/agents";
+
+export const meta = () => [{ title: "Stock Detail - AITrader" }];
+
+interface LoaderData {
+  ticker: string;
+  position: number | null;
+  orders: any[];
+  analysis: TradingDecision | null;
+}
+
+export async function loader({ params }: { params: { ticker: string } }) {
+  const ticker = params.ticker?.toUpperCase() || "";
+  
+  // Fetch position
+  const posRes = await fetch(`${process.env.BASE_URL}/api/alpaca/positions`);
+  const positions = posRes.ok ? await posRes.json() : [];
+  const position = positions.find((p: any) => p.ticker === ticker)?.qty ?? null;
+
+  // Fetch orders
+  const ordRes = await fetch(`${process.env.BASE_URL}/api/alpaca/orders`);
+  const ordersData = ordRes.ok ? await ordRes.json() : { orders: [] };
+  const orders = ordersData.orders?.filter((o: any) => o.symbol === ticker) || [];
+
+  return Response.json({ ticker, position, orders });
+}
+
+export default function StockDetail() {
+  const { ticker, position, orders } = useLoaderData() as LoaderData;
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-blue-50">
+      <Navbar />
+      <div className="mx-auto max-w-7xl px-6 py-8">
+        <h1 className="text-3xl font-bold text-gray-900 mb-6">{ticker} Detail</h1>
+        
+        <TradingViewChart ticker={ticker} />
+        
+        <div className="mt-6">
+          <h2>Position</h2>
+          <p>{position ? `Qty: ${position}` : "No position"}</p>
+        </div>
+        
+        <div className="mt-6">
+          <h2>Recent Orders</h2>
+          {orders.length === 0 ? <p>No orders</p> : <pre>{JSON.stringify(orders, null, 2)}</pre>}
+        </div>
+      </div>
+    </div>
+  );
+}
+```
+
+- [ ] **Step 2: Register route in routes.ts**
+```typescript
+route("analyze/:ticker", "routes/analyze.ticker.tsx"),
+```
+
+- [ ] **Step 3: Run typecheck and test**
+Run: `npm run typecheck && npm run test:e2e`
+Expected: All pass
+
+- [ ] **Step 4: Commit**
+```bash
+git add app/routes/analyze.ticker.tsx app/routes.ts
+git commit -m "feat: add stock detail route"
+```
+
+---
+
+### Task 5: Add Navigation from Analyze Page
+
+**Files:**
+- Modify: `app/routes/analyze.tsx`
+
+- [ ] **Step 1: Make ticker clickable**
+```typescript
+// Change from:
+<td className="py-3 px-4 font-bold text-gray-900">{stock.ticker}</td>
+
+// To:
+<td className="py-3 px-4 font-bold text-gray-900">
+  <Link to={`/analyze/${stock.ticker}`} className="text-blue-600 hover:underline">
+    {stock.ticker}
+  </Link>
+</td>
+```
+
+- [ ] **Step 2: Add Link import**
+```typescript
+import { Link } from "react-router";
+```
+
+- [ ] **Step 3: Run tests**
+Run: `npm run test:e2e`
+Expected: All pass
+
+- [ ] **Step 4: Commit**
+```bash
+git add app/routes/analyze.tsx
+git commit -m "feat: add navigation to stock detail page"
+```
+
+---
+
+### Task 6: Final Verification
+
+**Files:**
+- Check: `package.json`, `tsconfig.json`
+
+- [ ] **Step 1: Run complete test suite**
+```bash
+npm run typecheck
+npm run test:e2e -- --reporter=line
+```
+Expected: All 8+ tests pass
+
+- [ ] **Step 2: Commit**
+```bash
+git commit -am "chore: verify stock detail implementation"
+```
@@ -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
@@ -11,6 +11,7 @@
        "@react-router/node": "7.15.0",
        "@react-router/serve": "7.15.0",
        "isbot": "^5.1.36",
+        "lightweight-charts": "^5.2.0",
        "react": "^19.2.6",
        "react-dom": "^19.2.6",
        "react-router": "7.15.0",
@@ -4585,6 +4586,12 @@
      "integrity": "sha512-AgFD4VU+lVLP6vjnlNfF7OeInLTyeyckCNPEsuxz1vi786UuK/nk6ynPuhn/h+Ju9++TQyr5EpLRI14fc1QtTQ==",
      "license": "MIT"
    },
+    "node_modules/fancy-canvas": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fancy-canvas/-/fancy-canvas-2.1.0.tgz",
+      "integrity": "sha512-nifxXJ95JNLFR2NgRV4/MxVP45G9909wJTEKz5fg/TZS20JJZA6hfgRVh/bC9bwl2zBtBNcYPjiBE4njQHVBwQ==",
+      "license": "MIT"
+    },
    "node_modules/fast-deep-equal": {
      "version": "3.1.3",
      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -5624,6 +5631,15 @@
        "url": "https://opencollective.com/parcel"
      }
    },
+    "node_modules/lightweight-charts": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/lightweight-charts/-/lightweight-charts-5.2.0.tgz",
+      "integrity": "sha512-ey3Vas8UhV06ni+LT9TA1nEe4y8So4Mi6CL/oarNHFMyTktz/xy8e8+oh04Q//eO3t6etvFXgayz2fClyFQb5w==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "fancy-canvas": "2.1.0"
+      }
+    },
    "node_modules/locate-path": {
      "version": "6.0.0",
      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -17,6 +17,7 @@
    "@react-router/node": "7.15.0",
    "@react-router/serve": "7.15.0",
    "isbot": "^5.1.36",
+    "lightweight-charts": "^5.2.0",
    "react": "^19.2.6",
    "react-dom": "^19.2.6",
    "react-router": "7.15.0",
@@ -0,0 +1,8 @@
+import { test, expect } from "@playwright/test";
+
+test("GET /api/alpaca/orders returns orders list", async ({ page }) => {
+  const res = await page.request.get("/api/alpaca/orders");
+  expect(res.ok()).toBeTruthy();
+  const data = await res.json();
+  expect(data.orders).toBeDefined();
+});