feat: add stock indicators route and Alpaca account info

- New /stocks route with StockViewer component
- New /api/indicators endpoint with SMA, EMA, RSI, MACD
- New /api/alpaca/account endpoint
- AlpacaAccountInfo component on home page
- Indicator calculation utilities
- Tests for utilities and components
- Vite proxy config for /api

app/components/AlpacaAccountInfo.tsx

@@ -0,0 +1,53 @@
+import { useState, useEffect } from "react";
+
+export default function AlpacaAccountInfo() {
+  const [account, setAccount] = useState<{
+    cash: number;
+    buying_power: number;
+    portfolio_value: number;
+  } | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchAccount = async () => {
+      try {
+        const res = await fetch("/api/alpaca/account");
+        if (!res.ok) throw new Error("API error");
+        const data = await res.json();
+        setAccount(data);
+      } catch {
+        setError("Failed to load account info.");
+      }
+    };
+    fetchAccount();
+  }, []);
+
+  if (error) return <p className="text-red-600">{error}</p>;
+  if (!account) return <p className="text-gray-500">Loading account…</p>;
+
+  return (
+    <div className="bg-white border rounded-lg p-4 shadow-sm">
+      <h2 className="text-lg font-semibold mb-2">Alpaca Account</h2>
+      <dl className="space-y-1 text-sm">
+        <div className="flex justify-between">
+          <dt className="text-gray-600">Cash</dt>
+          <dd className="font-mono">
+            ${account.cash.toLocaleString(undefined, { minimumFractionDigits: 2 })}
+          </dd>
+        </div>
+        <div className="flex justify-between">
+          <dt className="text-gray-600">Buying Power</dt>
+          <dd className="font-mono">
+            ${account.buying_power.toLocaleString(undefined, { minimumFractionDigits: 2 })}
+          </dd>
+        </div>
+        <div className="flex justify-between">
+          <dt className="text-gray-600">Portfolio Value</dt>
+          <dd className="font-mono">
+            ${account.portfolio_value.toLocaleString(undefined, { minimumFractionDigits: 2 })}
+          </dd>
+        </div>
+      </dl>
+    </div>
+  );
+}

app/components/StockViewer.tsx

@@ -0,0 +1,78 @@
+import { useState } from "react";
+
+export default function StockViewer() {
+  const [symbol, setSymbol] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [indicators, setIndicators] = useState<{
+    sma: number;
+    ema: number;
+    rsi: number;
+    macd: number;
+  } | null>(null);
+
+  const fetchIndicators = async () => {
+    if (!symbol.trim()) return;
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await fetch(
+        `/api/indicators?symbol=${encodeURIComponent(symbol.trim())}`
+      );
+      if (!res.ok) throw new Error("API error");
+      const data = await res.json();
+      setIndicators(data.indicators);
+    } catch {
+      setError("Failed to fetch indicators. Check the symbol and try again.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="container mx-auto p-4 max-w-2xl">
+      <h1 className="text-2xl font-bold mb-4">Stock Indicators</h1>
+      <div className="flex gap-2 mb-4">
+        <input
+          type="text"
+          value={symbol}
+          onChange={(e) => setSymbol(e.target.value)}
+          placeholder="Enter stock symbol (e.g. AAPL)"
+          className="flex-1 border rounded p-2"
+          onKeyDown={(e) => e.key === "Enter" && fetchIndicators()}
+        />
+        <button
+          onClick={fetchIndicators}
+          disabled={loading || !symbol.trim()}
+          className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 disabled:opacity-50"
+        >
+          {loading ? "Loading…" : "Get Indicators"}
+        </button>
+      </div>
+      {error && <p className="text-red-600 mb-4">{error}</p>}
+      {indicators && (
+        <div className="bg-gray-50 rounded-lg p-4">
+          <h2 className="text-lg font-semibold mb-2">
+            Results for {symbol.toUpperCase()}
+          </h2>
+          <table className="w-full border-collapse">
+            <thead>
+              <tr className="border-b">
+                <th className="text-left p-2 font-medium">Indicator</th>
+                <th className="text-left p-2 font-medium">Value</th>
+              </tr>
+            </thead>
+            <tbody>
+              {Object.entries(indicators).map(([key, value]) => (
+                <tr key={key} className="border-b">
+                  <td className="p-2 capitalize">{key}</td>
+                  <td className="p-2 font-mono">{value.toFixed(2)}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  );
+}

app/components/__tests__/AlpacaAccountInfo.test.tsx

@@ -0,0 +1,39 @@
+/// <reference types="vitest" />
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+import AlpacaAccountInfo from "../AlpacaAccountInfo";
+
+describe("AlpacaAccountInfo", () => {
+  it("displays account info after loading", async () => {
+    const mockFetch = vi.fn().mockResolvedValue({
+      ok: true,
+      json: async () => ({
+        cash: 12345.67,
+        buying_power: 8000.0,
+        portfolio_value: 25000.0,
+      }),
+    });
+    globalThis.fetch = mockFetch;
+
+    render(<AlpacaAccountInfo />);
+
+    await waitFor(() => {
+      expect(screen.getByText(/Alpaca Account/i)).toBeInTheDocument();
+    });
+    // Use regex to match number regardless of locale decimal separator
+    expect(screen.getByText(/\$12[\.,]345/)).toBeInTheDocument();
+    expect(screen.getByText(/\$8[\.,]000/)).toBeInTheDocument();
+    expect(screen.getByText(/\$25[\.,]000/)).toBeInTheDocument();
+  });
+
+  it("displays error when fetch fails", async () => {
+    const mockFetch = vi.fn().mockRejectedValue(new Error("Network error"));
+    globalThis.fetch = mockFetch;
+
+    render(<AlpacaAccountInfo />);
+
+    await waitFor(() => {
+      expect(screen.getByText(/Failed to load account info/i)).toBeInTheDocument();
+    });
+  });
+});

app/components/__tests__/StockViewer.test.tsx

@@ -0,0 +1,33 @@
+/// <reference types="vitest" />
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import StockViewer from "../StockViewer";
+
+describe("StockViewer", () => {
+  it("fetches and displays indicators", async () => {
+    const mockData = {
+      symbol: "AAPL",
+      indicators: { sma: 155.5, ema: 157.2, rsi: 62.3, macd: 1.8 },
+    };
+    globalThis.fetch = vi.fn().mockResolvedValue({
+      ok: true,
+      json: async () => mockData,
+    }) as any;
+
+    render(<StockViewer />);
+
+    const input = screen.getByPlaceholderText(/enter stock symbol/i);
+    const button = screen.getByRole("button");
+
+    await userEvent.type(input, "AAPL");
+    await userEvent.click(button);
+
+    await waitFor(() => {
+      expect(screen.getByText(/results for aapl/i)).toBeInTheDocument();
+    });
+    // Accept either locale format for decimal separator
+    const bodyText = screen.getByText(/155.5/);
+    expect(bodyText).toBeInTheDocument();
+  });
+});