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

app/components/TradingViewChart.tsx

@@ -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>
+  );
+}

app/components/__tests__/TradingViewChart.test.tsx

@@ -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();
+  });
+});

app/routes.ts

@@ -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;

app/routes/analyze.ticker.tsx

@@ -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>
+  );
+}

app/routes/analyze.tsx

@@ -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">

app/routes/api/alpaca/orders.ts

@@ -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 });
+  }
+}