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