Add Playwright configuration and initial tests for landing page

- Created playwright.config.ts for test configuration - Added .last-run.json to store test run status - Implemented landing.test.ts with tests for navbar visibility and navigation - Removed unused server proxy configuration from vite.config.ts
feat: add stock indicators route and Alpaca account info
2026-05-12 22:10:51 +02:00 · 2026-05-12 21:07:18 +02:00
32 changed files with 4462 additions and 105 deletions
@@ -0,0 +1,3 @@
+ALPACA_API_KEY=your_alpaca_api_key_here
+ALPACA_SECRET_KEY=your_alpaca_secret_key_here
+ALPACA_BASE_URL=https://paper-api.alpaca.markets
@@ -0,0 +1,116 @@
+# Copilot Instructions for AITrader
+
+## Quick Start
+
+This is a stock trading application built with React Router 7, TypeScript, and TailwindCSS, integrating with the Alpaca trading API.
+
+### Essential Commands
+- `npm install` – Install dependencies (first time only)
+- `npm run dev` – Start development server at `http://localhost:5173`
+- `npm run build` – Create production build in `./build`
+- `npm start` – Serve production build (requires `npm run build` first)
+- `npm run typecheck` – Validate TypeScript (`react-router typegen` + `tsc`) — **must run before committing**
+- `npm run test:e2e` – Run Playwright end-to-end tests
+
+## Architecture Overview
+
+### Project Structure
+```
+app/
+├── root.tsx                 # Root layout and error boundary
+├── routes.ts               # Route configuration (React Router 7 RouteConfig API)
+├── routes/
+│   ├── landing.tsx        # Landing page
+│   ├── home.tsx           # Main application page
+│   ├── stocks.tsx         # Stock dashboard
+│   └── api/               # Server-side API routes
+│       ├── indicators.ts  # Stock indicator calculations
+│       └── alpaca/        # Alpaca broker integration
+│           └── account.ts # Account data endpoints
+├── components/            # Reusable React components
+│   ├── StockViewer.tsx   # Stock symbol search and indicator display
+│   └── AlpacaAccountInfo.tsx # Account balance and portfolio info
+├── utils/
+│   ├── indicators.ts     # Technical indicator logic (SMA, EMA, RSI, MACD)
+│   └── __tests__/        # Unit tests via Vitest
+├── types.ts              # TypeScript interfaces (IndicatorData, AlpacaAccount)
+└── app.css               # Global styles
+```
+
+### Full-Stack Data Flow
+1. **Client (React Components)** – User interacts with `StockViewer` or `AlpacaAccountInfo`
+2. **Server Routes (`/routes/api/`)** – Handle business logic (fetch data from external APIs, run calculations)
+3. **Utils** – Pure functions for indicators and shared logic (testable with Vitest)
+4. **External APIs** – Alpaca API for account/trading data
+
+### Server-Side Rendering (SSR)
+- Enabled by default (`ssr: true` in `react-router.config.ts`)
+- Routes can export loaders for initial data fetching
+- Use `loader` functions in route definitions for data pre-loading
+
+## Key Conventions
+
+### TypeScript & Type Safety
+- **Path alias** – Use `~/` for app imports (e.g., `import { IndicatorData } from "~/types"`)
+- **Generated types** – React Router generates types in `.react-router/types/` after running `typecheck`
+- **Route types** – Import `type { Route }` from `./+types/[routename]` for loader/action types
+- **Never skip `react-router typegen`** – Directly running `tsc` will fail; always run `npm run typecheck`
+- **ES Module syntax** – Project uses `"type": "module"`; include file extensions in imports where needed
+
+### Component Patterns
+- **Client-side interactivity** – Use React hooks (`useState`, `useEffect`) in components
+- **API calls** – Fetch from `/api/*` endpoints; proxy configured in `vite.config.ts` routes to local dev server
+- **Error handling** – Wrap API calls in try/catch; set error state for UI display
+- **Loading states** – Track `loading` boolean to show spinners/disable buttons during async work
+
+### API Route Patterns
+- Handlers in `app/routes/api/**/*.ts` are server-only functions
+- Export a default `export default function(...)` that receives request context
+- Return JSON responses or error responses
+- Use utilities in `~/utils/` for shared logic (e.g., indicator calculations)
+
+### Testing
+- **Unit tests** – Use Vitest (`npm run test:e2e` actually runs Playwright, but unit tests exist via `vitest`)
+  - Located alongside source files in `__tests__/` directories
+  - Test format: `*.test.ts` or `*.test.tsx`
+- **E2E tests** – Playwright configured in `playwright.config.ts`
+  - Tests in `./tests/` directory
+  - Dev server starts automatically during test runs
+  - HTML report generated in `test-results/`
+
+### Styling
+- **TailwindCSS** – Configured via Vite plugin (`@tailwindcss/vite`); no separate build step needed
+- **Global styles** – Edit `app/app.css`
+- **Component styles** – Use Tailwind utility classes directly in JSX
+
+### Import Paths
+- **Absolute imports** – Use `~/` alias for app folder (e.g., `~/components/StockViewer`)
+- **Relative imports** – Use `./` or `../` sparingly within same directory tree
+
+## Common Pitfalls
+
+- **`npm start` fails if build doesn't exist** – Always run `npm run build` first
+- **TypeScript compilation errors after route changes** – Missing `npm run typecheck` step; regenerated types in `.react-router/types/` are required
+- **Vite proxy not working in dev** – Ensure dev server is running and API endpoints match `vite.config.ts` proxy config (default: `/api` → `http://127.0.0.1:3000`)
+- **No test framework exists for unit tests** – Repository includes Vitest/Playwright dependencies but no test runner script; configure as needed
+- **Port conflicts** – Dev server uses `5173`, Docker/production uses `3000`
+
+## Deployment
+
+### Docker
+```bash
+docker build -t aitrader .
+docker run -p 3000:3000 aitrader
+```
+Ensure `npm run build` is run in the Dockerfile before the final `CMD`.
+
+### Environment Variables
+- Check Dockerfile for any required environment setup
+- Alpaca API credentials likely needed for trading features (not present in repo; set at runtime)
+
+## Debugging Tips
+
+- **Type errors** – Run `npm run typecheck` to regenerate React Router types and validate all TS
+- **Module resolution** – Check `tsconfig.json` for path aliases and ensure imports match configured paths
+- **Component not rendering** – Check route configuration in `routes.ts` and ensure component is exported as default
+- **API calls failing** – Verify Vite proxy config and that the target server is running
@@ -0,0 +1,32 @@
+name: "Copilot Setup Steps"
+
+on:
+  workflow_dispatch:
+  push:
+    paths:
+      - .github/workflows/copilot-setup-steps.yml
+  pull_request:
+    paths:
+      - .github/workflows/copilot-setup-steps.yml
+
+jobs:
+  copilot-setup-steps:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: "npm"
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Install Playwright browsers
+        run: npx playwright install --with-deps
@@ -4,40 +4,122 @@

 ---

+## Project structure
+
+- `app/routes/` – React Router 7 file-based routes (`landing.tsx` is the index/home page)
+- `app/components/` – Shared React components
+- `app/routes.ts` – Route definitions (uses `index` and `route` helpers from `@react-router/dev/routes`)
+- `app/root.tsx` – Root layout with global HTML shell, Links, Meta, Scripts
+- `app/app.css` – Global styles (Tailwind is configured via Vite)
+- `tests/` – Playwright E2E tests
+- `vitest.config.ts` / `vitest.setup.ts` – Unit test config (Vitest)
+- `vite.config.ts` – Vite config with Tailwind and React Router plugins
+- `react-router.config.ts` – React Router framework config
+- `tsconfig.json` – TypeScript config (ES modules: `"type": "module"`)
+
 ## Core npm scripts (run from the repository root)
- `npm run dev` – Starts the development server with hot‑module replacement via **react‑router dev**. The app is served at `http://localhost:5173`.
- `npm run build` – Produces a production build using **react‑router build**. Output lives in `./build` with `client/` (static assets) and `server/` (Node entry point).
- `npm start` – Serves the built server bundle with **react‑router-serve ./build/server/index.js**. Use after `npm run build`.
- `npm run typecheck` – Runs **react‑router typegen** then `tsc`. Must be run before committing any TypeScript changes.
+
+- `npm run dev` – Starts the dev server with HMR via **react-router dev**. Served at `http://localhost:5173`.
+- `npm run build` – Produces a production build using **react-router build**. Output lives in `./build` with `client/` and `server/`.
+- `npm start` – Serves the production bundle with `react-router-serve ./build/server/index.js`. Requires a prior `npm run build`.
+- `npm run typecheck` – Runs **react-router typegen** then `tsc`. Must be run before committing TypeScript changes.
+- `npm run test:e2e` – Runs Playwright E2E tests (server starts automatically via `playwright.config.ts`).

 ## Development workflow
-1. **Install deps** – `npm install` (first time only).
-2. **Start dev** – `npm run dev`. Changes are hot‑reloaded; no manual restart needed.
-3. **Iterate** – Edit files under `src/` (React components, routes, loaders, actions, etc.).
-4. **Validate** – Run `npm run typecheck` regularly; it catches missing typegen steps.
-5. **Build & serve** – When ready for a preview:
-   ```bash
-   npm run build && npm start
-   ```
-   This uses the production‑ready server (`@react-router/serve`).

-## Docker deployment (optional)
- Build image: `docker build -t aitrader .`
- Run container: `docker run -p 3000:3000 aitrader`
- The container expects the app to be built; include `npm run build` in your Dockerfile before the final `CMD`.
+1. **Install deps** – `npm install` (first time only).
+2. **Start dev** – `npm run dev`. Changes are hot-reloaded; no manual restart.
+3. **Iterate** – Edit files under `app/` (routes, components, loaders, actions).
+4. **Validate** – Run `npm run typecheck` regularly; it catches missing typegen steps.
+5. **E2E tests** – `npm run test:e2e` (Playwright handles server startup).
+6. **Build & serve** – `npm run build && npm start`.
+
+## Routing (React Router 7)
+
+- `index()` routes render into the parent `<Outlet />` at the parent's path.
+- `route(segment, file)` creates an explicit path segment.
+- The landing page is `index("routes/landing.tsx")` — it is the default page at `/`.
+- Do **not** use multiple `index()` routes at the same nesting level — only one is allowed per level.
+- All route files export `meta()` for `<title>` and `<meta>` tags, and a default export component.

 ## TypeScript nuances
- The `typecheck` script runs **react‑router typegen** first; agents must not skip this step because generated types are required for successful compilation.
+
+- The `typecheck` script runs **react-router typegen** first; agents must not skip this step because generated types are required for successful compilation.
 - The project uses ES modules (`"type": "module"`). Import paths should include file extensions (`.js`, `.ts`) where Node requires them.
+- Route types are generated — use `import type { Route } from "./+types/<route-name>"` for type-safe loaders/actions.

 ## TailwindCSS
- Tailwind is configured via Vite (`@tailwindcss/vite`). No extra build steps are needed; the dev server and production build automatically process Tailwind classes.
+
+- Configured via Vite (`@tailwindcss/vite`). No extra build steps needed; the dev server and production build automatically process Tailwind classes.
+- Use arbitrary values and `className` composition freely.
+
+## Playwright E2E testing
+
+- Config: `playwright.config.ts` in the repo root.
+- The web server starts automatically (`npm run dev` on port 5173) before tests run.
+- Tests live in `tests/` directory.
+- Generate the report with: `npm run test:e2e -- --reporter=html` (output in `test-results/`).
+- To run tests in headed mode for debugging, set `headless: "false"` in `playwright.config.ts` or pass `--headed`.
+- To debug a single test: `npx playwright test tests/<file-name>.spec.ts`.
+
+## Playwright MCP Server
+
+An MCP (Model Context Protocol) server provides Playwright browser automation to AI assistants.
+
+- **Start MCP server**: `npm run mcp:dev` (runs via stdio, connects to AI clients)
+- **Build MCP server**: `npm run mcp:build` (compiles to `mcp-server/dist/`)
+
+Available tools:
+- `navigate` - Navigate to a URL and get page title
+- `getPageContent` - Get text content from a page
+- `click` - Click an element by CSS selector
+- `fillForm` - Fill a form input
+
+## Alpaca API Setup
+
+- Copy `.env.example` to `.env` and fill in your Alpaca credentials:
+  - `ALPACA_API_KEY` – Your Alpaca API key
+  - `ALPACA_SECRET_KEY` – Your Alpaca secret key
+  - `ALPACA_BASE_URL` – API endpoint (default: paper trading URL)
+- The `.env` file is gitignored – never commit credentials.
+- Account data is fetched from `/api/alpaca/account` and displayed on the landing page.
+
+## Design Guidelines
+
+**Layout & Structure:**
+- All routes use gradient background: `<div className="min-h-screen bg-gradient-to-br from-gray-50 to-blue-50">`
+- Use `<Navbar />` component at the top of every page (sticky, with backdrop blur)
+- Content container: `<div className="mx-auto max-w-7xl px-6 sm:px-8 lg:px-8">`
+
+**Navbar:**
+- Use the shared `Navbar` component from `app/components/Navbar.tsx`
+- Logo: blue-600 rounded square with white "A", text "AITrader" in gray-900 with hover effect
+- Links have underline animation on hover
+
+**Color Palette:**
+- Background: `bg-gradient-to-br from-gray-50 to-blue-50` for pages, `bg-white` for cards
+- Text: `text-gray-900` for headings, `text-gray-600` for secondary
+- Accent colors for account values: `text-green-600` (Cash), `text-blue-600` (Buying Power), `text-purple-600` (Portfolio Value)
+- Error: `text-red-600` for error messages
+
+**Components:**
+- Cards: `bg-white rounded-xl shadow-lg p-6 border border-gray-200`
+- Buttons: `bg-blue-600 text-white px-6 py-2.5 rounded-lg font-medium hover:bg-blue-700 transition-colors`
+- Inputs: `border border-gray-300 rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-blue-500`
+
+**Typography:**
+- Page headings: `text-4xl font-bold text-gray-900`
+- Section headings: `text-xl font-bold text-gray-900`
+- Card titles: `text-xl font-bold text-gray-900`

 ## Common pitfalls agents might miss
+
 - **Running the server without a build** – `npm start` will fail if `npm run build` hasn't been executed first.
 - **Skipping typegen** – Directly running `tsc` without the preceding `react-router typegen` results in missing type definitions.
- **Assuming a `test` script exists** – This repository has no test suite; any `npm test` command will error.
- **Port assumptions** – Development server runs on `5173`; production server (Docker) defaults to `3000` unless overridden.
+- **Multiple index routes at same level** – React Router 7 only allows one `index()` per nesting level. Use `route()` for additional paths.
+- **Port assumptions** – Dev server runs on `5173`; production server (Docker) defaults to `3000` unless overridden.
+- **Route file naming** – Route files must match the pattern `app/routes/<name>.tsx` and the corresponding type file at `app/routes/+types/<name>.ts` if types are needed.
+- **Import paths** – Use `react-router` for framework imports (`Link`, `Outlet`), not `@remix-run/react`.

 ---

@@ -0,0 +1,56 @@
+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");
+        const data = await res.json();
+        if (!res.ok) {
+          throw new Error(data.error || "API error");
+        }
+        setAccount(data);
+      } catch (err) {
+        const message = err instanceof Error ? err.message : "Failed to load account info.";
+        setError(message);
+      }
+    };
+    fetchAccount();
+  }, []);
+
+  if (error) return <p className="text-red-600 p-4 text-center">{error}</p>;
+  if (!account) return <p className="text-gray-600 p-4 text-center">Loading account…</p>;
+
+  return (
+    <div className="bg-white rounded-xl shadow-lg p-6 border border-gray-200">
+      <h2 className="text-xl font-bold text-gray-900 mb-4 text-center">Trading Account</h2>
+      <div className="space-y-3">
+        <div className="flex justify-between items-center py-2 border-b border-gray-100">
+          <span className="text-gray-600 font-medium">Cash</span>
+          <span className="text-lg font-bold text-green-600">
+            ${account.cash.toLocaleString(undefined, { minimumFractionDigits: 2 })}
+          </span>
+        </div>
+        <div className="flex justify-between items-center py-2 border-b border-gray-100">
+          <span className="text-gray-600 font-medium">Buying Power</span>
+          <span className="text-lg font-bold text-blue-600">
+            ${account.buying_power.toLocaleString(undefined, { minimumFractionDigits: 2 })}
+          </span>
+        </div>
+        <div className="flex justify-between items-center py-2">
+          <span className="text-gray-600 font-medium">Portfolio Value</span>
+          <span className="text-lg font-bold text-purple-600">
+            ${account.portfolio_value.toLocaleString(undefined, { minimumFractionDigits: 2 })}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,26 @@
+import { Link } from "react-router";
+
+export default function Navbar() {
+  return (
+    <nav className="border-b border-gray-200 bg-white/90 backdrop-blur-sm sticky top-0 z-50">
+      <div className="mx-auto flex max-w-7xl items-center justify-between px-4 py-4 sm:px-6 lg:px-8">
+        <Link to="/" className="flex items-center gap-3 group">
+          <div className="h-8 w-8 rounded-lg bg-blue-600 flex items-center justify-center transition-transform group-hover:scale-105">
+            <span className="text-white font-bold text-sm">A</span>
+          </div>
+          <span className="text-xl font-bold text-gray-900 group-hover:text-blue-600 transition-colors">
+            AITrader
+          </span>
+        </Link>
+        <div className="hidden items-center gap-8 md:flex">
+          <Link 
+            to="/stocks" 
+            className="text-gray-600 hover:text-blue-600 font-medium transition-colors relative after:absolute after:bottom-[-4px] after:left-0 after:w-0 after:h-0.5 after:bg-blue-600 after:transition-all hover:after:w-full"
+          >
+            Stocks
+          </Link>
+        </div>
+      </div>
+    </nav>
+  );
+}
@@ -0,0 +1,76 @@
+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())}`
+      );
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || "API error");
+      setIndicators(data.indicators);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "Failed to fetch indicators.";
+      setError(message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="bg-white rounded-xl shadow-lg p-6 border border-gray-200 max-w-lg mx-auto">
+      <div className="flex gap-3 mb-6">
+        <input
+          type="text"
+          value={symbol}
+          onChange={(e) => setSymbol(e.target.value.toUpperCase())}
+          placeholder="Enter stock symbol (e.g. AAPL)"
+          className="flex-1 border border-gray-300 rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+          onKeyDown={(e) => e.key === "Enter" && fetchIndicators()}
+        />
+        <button
+          onClick={fetchIndicators}
+          disabled={loading || !symbol.trim()}
+          className="bg-blue-600 text-white px-6 py-2.5 rounded-lg font-medium hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+        >
+          {loading ? "Loading…" : "Get Indicators"}
+        </button>
+      </div>
+      
+      {error && (
+        <div className="bg-red-50 border border-red-200 rounded-lg p-4 mb-4">
+          <p className="text-red-600 text-sm">{error}</p>
+        </div>
+      )}
+      
+      {indicators && (
+        <div className="bg-gray-50 rounded-lg p-4">
+          <h3 className="font-bold text-gray-900 mb-3">
+            Results for {symbol.toUpperCase()}
+          </h3>
+          <div className="space-y-2">
+            {Object.entries(indicators).map(([key, value]) => (
+              <div key={key} className="flex justify-between py-1.5 border-b border-gray-200 last:border-0">
+                <span className="text-gray-600 capitalize">{key}</span>
+                <span className="font-mono font-medium">{value.toFixed(2)}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
@@ -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();
+    });
+  });
+});
@@ -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();
+  });
+});
@@ -1,3 +1,7 @@
-import { type RouteConfig, index } from "@react-router/dev/routes";
+import { type RouteConfig, index, route } from "@react-router/dev/routes";

-export default [index("routes/home.tsx")] satisfies RouteConfig;
+export default [
+  index("routes/landing.tsx"),
+  route("api/alpaca/account", "routes/api/alpaca/account.ts"),
+  route("stocks", "routes/stocks.tsx"),
+] satisfies RouteConfig;
@@ -0,0 +1,43 @@
+import type { AlpacaAccount } from "../../../types";
+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,
+});
+
+async function fetchAlpacaAccount(): Promise<AlpacaAccount> {
+  try {
+    console.log("Fetching Alpaca account with key:", process.env.ALPACA_API_KEY?.substring(0, 8) + "...");
+    const account = await alpaca.getAccount();
+    console.log("Alpaca account fetched successfully");
+    return {
+      cash: parseFloat(account.cash),
+      buying_power: parseFloat(account.buying_power),
+      portfolio_value: parseFloat(account.portfolio_value),
+    };
+  } catch (error) {
+    console.error("Alpaca API fetch error:", error);
+    return {
+      cash: 0,
+      buying_power: 0,
+      portfolio_value: 0,
+    };
+  }
+}
+
+export async function loader() {
+  try {
+    const account = await fetchAlpacaAccount();
+    return Response.json(account);
+  } catch (error) {
+    console.error("Alpaca API error:", error);
+    const message = error instanceof Error ? error.message : "Unknown error";
+    return Response.json(
+      { error: `Failed to fetch account info: ${message}` },
+      { status: 500 }
+    );
+  }
+}
@@ -0,0 +1,54 @@
+import { type IndicatorData } from "../../types";
+import {
+  calculateSMA,
+  calculateEMA,
+  calculateRSI,
+  calculateMACD,
+} from "../../utils/indicators";
+
+// Replace with actual Alpaca API call
+async function fetchHistoricPrices(symbol: string): Promise<number[]> {
+  return [
+    150.0, 152.3, 151.8, 153.5, 155.0, 154.2, 156.7, 158.1, 157.5, 159.0,
+    160.2, 158.9, 161.5, 163.0, 162.5, 164.8, 166.3, 165.0, 167.5, 169.0,
+    168.2, 170.5, 172.0, 171.5, 173.2,
+  ];
+}
+
+export async function loader({ request }: { request: Request }) {
+  const url = new URL(request.url);
+  const symbol = url.searchParams.get("symbol");
+
+  if (!symbol) {
+    return Response.json(
+      { error: "Symbol is required" },
+      { status: 400 }
+    );
+  }
+
+  try {
+    const prices = await fetchHistoricPrices(symbol.toUpperCase());
+    if (prices.length === 0) {
+      return Response.json(
+        { error: "No price data found" },
+        { status: 404 }
+      );
+    }
+
+    const sma = calculateSMA(prices);
+    const ema = calculateEMA(prices);
+    const rsi = calculateRSI(prices);
+    const macd = calculateMACD(prices);
+
+    const data: IndicatorData = {
+      symbol: symbol.toUpperCase(),
+      indicators: { sma, ema, rsi, macd },
+    };
+    return Response.json(data);
+  } catch (error) {
+    return Response.json(
+      { error: "Failed to fetch indicators" },
+      { status: 500 }
+    );
+  }
+}
@@ -1,13 +0,0 @@
-import type { Route } from "./+types/home";
-import { Welcome } from "../welcome/welcome";
-
-export function meta({}: Route.MetaArgs) {
-  return [
-    { title: "New React Router App" },
-    { name: "description", content: "Welcome to React Router!" },
-  ];
-}
-
-export default function Home() {
-  return <Welcome />;
-}
@@ -0,0 +1,29 @@
+import { Link } from "react-router";
+import Navbar from "../components/Navbar";
+import AlpacaAccountInfo from "../components/AlpacaAccountInfo";
+
+export default function Landing() {
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-blue-50">
+      <Navbar />
+      {/* Hero Section */}
+      <section className="py-20">
+        <div className="mx-auto max-w-7xl px-6 sm:px-8 lg:px-8">
+          <div className="text-center mb-12">
+            <h1 className="text-4xl font-bold text-gray-900 mb-4">
+              Welcome to AITrader
+            </h1>
+            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
+              Your AI-powered trading dashboard with real-time market insights and portfolio management.
+            </p>
+          </div>
+          
+          {/* Account Info Card */}
+          <div className="max-w-md mx-auto">
+            <AlpacaAccountInfo />
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}
@@ -0,0 +1,23 @@
+import StockViewer from "../components/StockViewer";
+import Navbar from "../components/Navbar";
+
+export default function Stocks() {
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-blue-50">
+      <Navbar />
+      <div className="py-20">
+        <div className="mx-auto max-w-7xl px-6 sm:px-8 lg:px-8">
+          <div className="text-center mb-12">
+            <h1 className="text-4xl font-bold text-gray-900 mb-4">
+              Stock Indicators
+            </h1>
+            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
+              Analyze technical indicators for any stock symbol.
+            </p>
+          </div>
+          <StockViewer />
+        </div>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,15 @@
+export interface IndicatorData {
+  symbol: string;
+  indicators: {
+    sma: number;
+    ema: number;
+    rsi: number;
+    macd: number;
+  };
+}
+
+export interface AlpacaAccount {
+  cash: number;
+  buying_power: number;
+  portfolio_value: number;
+}
@@ -0,0 +1,54 @@
+import { describe, it, expect } from "vitest";
+import {
+  calculateSMA,
+  calculateEMA,
+  calculateRSI,
+  calculateMACD,
+} from "../../utils/indicators";
+
+describe("calculateSMA", () => {
+  it("returns 0 when prices length < period", () => {
+    expect(calculateSMA([1, 2], 5)).toBe(0);
+  });
+
+  it("calculates simple moving average correctly", () => {
+    expect(calculateSMA([1, 2, 3, 4, 5], 5)).toBe(3);
+  });
+});
+
+describe("calculateEMA", () => {
+  it("returns 0 when prices length < period", () => {
+    expect(calculateEMA([1, 2], 5)).toBe(0);
+  });
+
+  it("calculates exponential moving average", () => {
+    const prices = [10, 11, 12, 13, 14, 15];
+    const result = calculateEMA(prices, 3);
+    expect(result).toBeCloseTo(14.125, 2);
+  });
+});
+
+describe("calculateRSI", () => {
+  it("returns 0 when prices length < period + 1", () => {
+    expect(calculateRSI([1, 2, 3], 5)).toBe(0);
+  });
+
+  it("calculates relative strength index", () => {
+    const prices = [100, 102, 101, 105, 107, 110, 108, 115, 120, 119, 121];
+    const result = calculateRSI(prices, 5);
+    expect(result).toBeGreaterThan(50);
+    expect(result).toBeLessThan(100);
+  });
+});
+
+describe("calculateMACD", () => {
+  it("returns 0 when prices length < slowPeriod", () => {
+    expect(calculateMACD([1, 2, 3], 12, 26, 9)).toBe(0);
+  });
+
+  it("calculates MACD line", () => {
+    const prices = Array.from({ length: 30 }, (_, i) => 100 + i * 0.5);
+    const result = calculateMACD(prices);
+    expect(result).toBeCloseTo(-0.96, 2);
+  });
+});
@@ -0,0 +1,45 @@
+export function calculateSMA(prices: number[], period: number = 20): number {
+  if (prices.length < period) return 0;
+  const sum = prices.slice(0, period).reduce((a, b) => a + b, 0);
+  return sum / period;
+}
+
+export function calculateEMA(prices: number[], period: number = 20): number {
+  if (prices.length < period) return 0;
+  const multiplier = 2 / (period + 1);
+  let ema = prices[period - 1];
+  for (let i = period; i < prices.length; i++) {
+    ema = prices[i] * multiplier + ema * (1 - multiplier);
+  }
+  return ema;
+}
+
+export function calculateRSI(prices: number[], period: number = 14): number {
+  if (prices.length < period + 1) return 0;
+  let gains = 0;
+  let losses = 0;
+  for (let i = 1; i <= period; i++) {
+    const diff = prices[i] - prices[i - 1];
+    if (diff > 0) gains += diff;
+    else losses -= diff;
+  }
+  const avgGain = gains / period;
+  const avgLoss = losses / period;
+  if (avgLoss === 0) return 100;
+  const rs = avgGain / avgLoss;
+  return 100 - (100 / (1 + rs));
+}
+
+export function calculateMACD(
+  prices: number[],
+  fastPeriod: number = 12,
+  slowPeriod: number = 26,
+  signalPeriod: number = 9
+): number {
+  if (prices.length < slowPeriod) return 0;
+  const emaFast = calculateEMA(prices, fastPeriod);
+  const emaSlow = calculateEMA(prices, slowPeriod);
+  const macdLine = emaFast - emaSlow;
+  const signal = calculateEMA([macdLine], signalPeriod);
+  return macdLine - signal;
+}
@@ -9,81 +9,74 @@ export function Welcome() {
          <div className="w-[500px] max-w-[100vw] p-4">
            <img
              src={logoLight}
-              alt="React Router"
+              alt="AI Trader"
              className="block w-full dark:hidden"
            />
            <img
              src={logoDark}
-              alt="React Router"
+              alt="AI Trader"
              className="hidden w-full dark:block"
            />
          </div>
        </header>
-        <div className="max-w-[300px] w-full space-y-6 px-4">
+        <div className="max-w-[400px] w-full space-y-6 px-4">
          <nav className="rounded-3xl border border-gray-200 p-6 dark:border-gray-700 space-y-4">
            <p className="leading-6 text-gray-700 dark:text-gray-200 text-center">
-              What&apos;s next?
+              AI Trader Features
            </p>
            <ul>
-              {resources.map(({ href, text, icon }) => (
-                <li key={href}>
+              <li key="stocks">
                <a
+                  href="/stocks"
                  className="group flex items-center gap-3 self-stretch p-3 leading-normal text-blue-700 hover:underline dark:text-blue-500"
-                    href={href}
-                    target="_blank"
-                    rel="noreferrer"
                >
-                    {icon}
-                    {text}
-                  </a>
-                </li>
-              ))}
-            </ul>
-          </nav>
-        </div>
-      </div>
-    </main>
-  );
-}
-
-const resources = [
-  {
-    href: "https://reactrouter.com/docs",
-    text: "React Router Docs",
-    icon: (
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
-        width="24"
+                    width="20"
                    height="20"
                    viewBox="0 0 20 20"
                    fill="none"
                    className="stroke-gray-600 group-hover:stroke-current dark:stroke-gray-300"
                  >
                    <path
-          d="M9.99981 10.0751V9.99992M17.4688 17.4688C15.889 19.0485 11.2645 16.9853 7.13958 12.8604C3.01467 8.73546 0.951405 4.11091 2.53116 2.53116C4.11091 0.951405 8.73546 3.01467 12.8604 7.13958C16.9853 11.2645 19.0485 15.889 17.4688 17.4688ZM2.53132 17.4688C0.951566 15.8891 3.01483 11.2645 7.13974 7.13963C11.2647 3.01471 15.8892 0.951453 17.469 2.53121C19.0487 4.11096 16.9854 8.73551 12.8605 12.8604C8.73562 16.9853 4.11107 19.0486 2.53132 17.4688Z"
-          strokeWidth="1.5"
-          strokeLinecap="round"
+                      d="M4 5a1 1 0 011-1h10a1 1 0 010 2H5a1 1 0 01-1-1zM4 10a1 1 0 011-1h10a1 1 0 010 2H5a1 1 0 01-1-1zM4 15a1 1 0 011-1h10a1 1 0 010 2H5a1 1 0 01-1-1z"
                    />
                  </svg>
-    ),
-  },
-  {
-    href: "https://rmx.as/discord",
-    text: "Join Discord",
-    icon: (
+                  Stock Indicators
+                </a>
+              </li>
+              <li key="home">
+                <a
+                  href="/"
+                  className="group flex items-center gap-3 self-stretch p-3 leading-normal text-blue-700 hover:underline dark:text-blue-500"
+                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
-        width="24"
+                    width="20"
                    height="20"
-        viewBox="0 0 24 20"
+                    viewBox="0 0 20 20"
                    fill="none"
                    className="stroke-gray-600 group-hover:stroke-current dark:stroke-gray-300"
                  >
                    <path
-          d="M15.0686 1.25995L14.5477 1.17423L14.2913 1.63578C14.1754 1.84439 14.0545 2.08275 13.9422 2.31963C12.6461 2.16488 11.3406 2.16505 10.0445 2.32014C9.92822 2.08178 9.80478 1.84975 9.67412 1.62413L9.41449 1.17584L8.90333 1.25995C7.33547 1.51794 5.80717 1.99419 4.37748 2.66939L4.19 2.75793L4.07461 2.93019C1.23864 7.16437 0.46302 11.3053 0.838165 15.3924L0.868838 15.7266L1.13844 15.9264C2.81818 17.1714 4.68053 18.1233 6.68582 18.719L7.18892 18.8684L7.50166 18.4469C7.96179 17.8268 8.36504 17.1824 8.709 16.4944L8.71099 16.4904C10.8645 17.0471 13.128 17.0485 15.2821 16.4947C15.6261 17.1826 16.0293 17.8269 16.4892 18.4469L16.805 18.8725L17.3116 18.717C19.3056 18.105 21.1876 17.1751 22.8559 15.9238L23.1224 15.724L23.1528 15.3923C23.5873 10.6524 22.3579 6.53306 19.8947 2.90714L19.7759 2.73227L19.5833 2.64518C18.1437 1.99439 16.6386 1.51826 15.0686 1.25995ZM16.6074 10.7755L16.6074 10.7756C16.5934 11.6409 16.0212 12.1444 15.4783 12.1444C14.9297 12.1444 14.3493 11.6173 14.3493 10.7877C14.3493 9.94885 14.9378 9.41192 15.4783 9.41192C16.0471 9.41192 16.6209 9.93851 16.6074 10.7755ZM8.49373 12.1444C7.94513 12.1444 7.36471 11.6173 7.36471 10.7877C7.36471 9.94885 7.95323 9.41192 8.49373 9.41192C9.06038 9.41192 9.63892 9.93712 9.6417 10.7815C9.62517 11.6239 9.05462 12.1444 8.49373 12.1444Z"
-          strokeWidth="1.5"
+                      d="M5 12l5 5 5-5"
                    />
                  </svg>
-    ),
-  },
-];
+                  Home Dashboard
+                </a>
+              </li>
+            </ul>
+          </nav>
+          <div className="text-sm text-gray-500 dark:text-gray-400 text-center">
+            <p>
+              <strong>Stock Indicators:</strong> Get SMA, EMA, RSI, MACD for any stock symbol
+            </p>
+            <p>
+              <strong>Account Info:</strong> View your Alpaca account balance and positions
+            </p>
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+}
@@ -0,0 +1,623 @@
+# Stock Indicators & Alpaca Account Info 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:** Add a new `/stocks` route that displays stock indicators and show Alpaca account information on the home page.
+
+**Architecture:** 
+- Backend: New API endpoint `/api/indicators` that fetches historic prices from Alpaca and calculates indicators (SMA, EMA, RSI, etc.).
+- Frontend: New route `/stocks` with a component that allows users to input a stock symbol, fetch indicators, and display them in a table.
+- Home page: Add a component showing Alpaca account balance, buying power, and positions.
+
+**Tech Stack:** React Router, TypeScript, TailwindCSS, Alpaca API, Node.js.
+
+---
+
+### Task 1: Create backend API endpoint for stock indicators
+
+**Files:**
+- Create: `app/api/indicators.ts`
+- Modify: `app/api/+types.ts` (add response type)
+- Test: `app/api/__tests__/indicators.test.ts`
+
+- [ ] **Step 1: Define response type**
+
+```typescript
+// app/api/+types.ts
+export interface IndicatorData {
+  symbol: string;
+  indicators: {
+    sma: number;
+    ema: number;
+    rsi: number;
+    macd: number;
+    // add more as needed
+  };
+}
+```
+
+- [ ] **Step 2: Implement the endpoint**
+
+```typescript
+// app/api/indicators.ts
+import { NextResponse } from "@react-router/server";
+import { type RequestHandler } from "./+types";
+import { type IndicatorData } from "./+types";
+
+export const GET: RequestHandler = async ({ request, params }) => {
+  const url = new URL(request.url);
+  const symbol = url.searchParams.get("symbol");
+
+  if (!symbol) {
+    return NextResponse.json(
+      { error: "Symbol is required" },
+      { status: 400 }
+    );
+  }
+
+  try {
+    // Call Alpaca historic prices
+    // Calculate indicators
+    // Return JSON
+    const data: IndicatorData = {
+      symbol,
+      indicators: {
+        sma: 0,
+        ema: 0,
+        rsi: 0,
+        macd: 0,
+      },
+    };
+    return NextResponse.json(data);
+  } catch (error) {
+    return NextResponse.json(
+      { error: "Failed to fetch indicators" },
+      { status: 500 }
+    );
+  }
+};
+```
+
+- [ ] **Step 3: Write test for endpoint**
+
+```typescript
+// app/api/__tests__/indicators.test.ts
+import { GET } from "../indicators";
+
+describe("GET /api/indicators", () => {
+  it("returns indicators for a valid symbol", async () => {
+    const req = new Request("http://localhost:5173/api/indicators?symbol=AAPL");
+    const res = await GET({ request: req, params: {} } as any);
+    expect(res).toBeInstanceOf(Response);
+    const json = await res.json();
+    expect(json).toHaveProperty("symbol");
+    expect(json).toHaveProperty("indicators");
+  });
+
+  it("returns error for missing symbol", async () => {
+    const req = new Request("http://localhost:5173/api/indicators");
+    const res = await GET({ request: req, params: {} } as any);
+    expect(res.status).toBe(400);
+  });
+});
+```
+
+- [ ] **Step 4: Run tests**
+
+```bash
+npm run typecheck && npm test
+```
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add app/api/indicators.ts app/api/+types.ts app/api/__tests__/indicators.test.ts
+git commit -m "feat: add indicators API endpoint"
+```
+
+### Task 2: Create StockViewer component for the /stocks route
+
+**Files:**
+- Create: `app/components/StockViewer.tsx`
+- Create: `app/routes/stocks.tsx`
+- Modify: `app/routes.ts` (add new route)
+- Test: `app/components/__tests__/StockViewer.test.tsx`
+
+- [ ] **Step 1: Implement StockViewer component**
+
+```tsx
+// app/components/StockViewer.tsx
+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<any>(null);
+
+  const fetchIndicators = async (symbol: string) => {
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await fetch(`/api/indicators?symbol=${symbol}`);
+      if (!res.ok) throw new Error("Failed to fetch");
+      const data = await res.json();
+      setIndicators(data.indicators);
+    } catch (err) {
+      setError("Failed to fetch indicators");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="container mx-auto p-4">
+      <h1 className="text-2xl font-bold mb-4">Stock Indicators</h1>
+      <div className="mb-4">
+        <input
+          type="text"
+          value={symbol}
+          onChange={(e) => setSymbol(e.target.value)}
+          placeholder="Enter stock symbol"
+          className="border p-2 mr-2"
+        />
+        <button
+          onClick={() => fetchIndicators(symbol)}
+          disabled={loading}
+          className="bg-blue-500 text-white px-4 py-2"
+        >
+          {loading ? "Loading..." : "Get Indicators"}
+        </button>
+      </div>
+      {error && <p className="text-red-500">{error}</p>}
+      {indicators && (
+        <div className="mt-4">
+          <h2 className="text-xl">Results for {symbol}</h2>
+          <table className="w-full border-collapse">
+            <thead>
+              <tr className="border-b">
+                <th className="text-left p-2">Indicator</th>
+                <th className="text-left p-2">Value</th>
+              </tr>
+            </thead>
+            <tbody>
+              {Object.entries(indicators).map(([key, value]) => (
+                <tr key={key} className="border-b">
+                  <td className="p-2">{key.toUpperCase()}</td>
+                  <td className="p-2">{value.toFixed(2)}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  );
+}
+```
+
+- [ ] **Step 2: Create route component**
+
+```tsx
+// app/routes/stocks.tsx
+import StockViewer from "../components/StockViewer";
+
+export default function Stocks() {
+  return <StockViewer />;
+}
+```
+
+- [ ] **Step 3: Add route to routes.ts**
+
+```tsx
+// app/routes.ts
+import { type RouteConfig, index } from "@react-router/dev/routes";
+import Home from "./routes/home.tsx";
+import Stocks from "./routes/stocks.tsx";
+
+export default [
+  index("routes/home.tsx", Home),
+  index("routes/stocks.tsx", Stocks),
+] satisfies RouteConfig;
+```
+
+- [ ] **Step 4: Write test for StockViewer**
+
+```tsx
+// app/components/__tests__/StockViewer.test.tsx
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import StockViewer from "../StockViewer";
+
+jest.mock("react", () => ({
+  ...jest.requireActual("react"),
+  useState: jest.fn(),
+}));
+
+describe("StockViewer", () => {
+  it("displays indicators after fetching", async () => {
+    // Mock fetch
+    const mockData = { indicators: { sma: 100, ema: 120, rsi: 50, macd: 0.5 } };
+    global.fetch = jest.fn(() =>
+      Promise.resolve({
+        ok: true,
+        json: () => Promise.resolve(mockData),
+      })
+    ) as any;
+
+    render(<StockViewer />);
+    const input = screen.getByPlaceholderText("Enter stock symbol");
+    const button = screen.getByText("Get Indicators");
+
+    await userEvent.type(input, "AAPL");
+    await userEvent.click(button);
+
+    await waitFor(() => {
+      expect(screen.getByText("Results for AAPL")).toBeInTheDocument();
+    });
+  });
+});
+```
+
+- [ ] **Step 5: Run tests**
+
+```bash
+npm run typecheck && npm test
+```
+
+- [ ] **Step 6: Commit**
+
+```bash
+git add app/components/StockViewer.tsx app/routes/stocks.tsx app/routes.ts app/components/__tests__/StockViewer.test.tsx
+git commit -m "feat: add stocks route with indicator viewer"
+```
+
+### Task 3: Add Alpaca account info component to home page
+
+**Files:**
+- Create: `app/components/AlpacaAccountInfo.tsx`
+- Modify: `app/routes/home.tsx`
+- Test: `app/components/__tests__/AlpacaAccountInfo.test.tsx`
+
+- [ ] **Step 1: Implement AlpacaAccountInfo component**
+
+```tsx
+// app/components/AlpacaAccountInfo.tsx
+import { useState, useEffect } from "react";
+
+export default function AlpacaAccountInfo() {
+  const [account, setAccount] = useState<any>(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("Failed to fetch");
+        const data = await res.json();
+        setAccount(data);
+      } catch (err) {
+        setError("Failed to fetch account info");
+      }
+    };
+    fetchAccount();
+  }, []);
+
+  if (error) return <p className="text-red-500">{error}</p>;
+  if (!account) return <p>Loading account...</p>;
+
+  return (
+    <div className="bg-gray-100 p-4 rounded-lg">
+      <h2 className="text-lg font-bold mb-2">Alpaca Account</h2>
+      <div className="space-y-2">
+        <p>Balance: ${account.cash}</p>
+        <p>Buying Power: ${account.buying_power}</p>
+        <p>Portfolio Value: ${account.portfolio_value}</p>
+      </div>
+    </div>
+  );
+}
+```
+
+- [ ] **Step 2: Add component to home page**
+
+```tsx
+// app/routes/home.tsx
+import { Welcome } from "../welcome/welcome";
+import AlpacaAccountInfo from "../components/AlpacaAccountInfo";
+
+export default function Home() {
+  return (
+    <>
+      <Welcome />
+      <div className="container mx-auto p-4">
+        <AlpacaAccountInfo />
+      </div>
+    </>
+  );
+}
+```
+
+- [ ] **Step 3: Create backend endpoint for Alpaca account**
+
+```typescript
+// app/api/alpaca/account.ts
+import { NextResponse } from "@react-router/server";
+import { type RequestHandler } from "./+types";
+
+export const GET: RequestHandler = async () => {
+  // Call Alpaca API to get account info
+  // Return JSON with cash, buying_power, portfolio_value
+  const account = {
+    cash: 10000,
+    buying_power: 20000,
+    portfolio_value: 30000,
+  };
+  return NextResponse.json(account);
+};
+```
+
+- [ ] **Step 4: Add type for Alpaca account**
+
+```typescript
+// app/api/+types.ts
+export interface AlpacaAccount {
+  cash: number;
+  buying_power: number;
+  portfolio_value: number;
+}
+```
+
+- [ ] **Step 5: Write test for AlpacaAccountInfo**
+
+```tsx
+// app/components/__tests__/AlpacaAccountInfo.test.tsx
+import { render, screen, waitFor } from "@testing-library/react";
+import AlpacaAccountInfo from "../AlpacaAccountInfo";
+
+jest.mock("react", () => ({
+  ...jest.requireActual("react"),
+  useState: jest.fn(),
+  useEffect: jest.fn(),
+}));
+
+describe("AlpacaAccountInfo", () => {
+  it("displays account info", async () => {
+    // Mock fetch
+    global.fetch = jest.fn(() =>
+      Promise.resolve({
+        json: () => Promise.resolve({ cash: 10000, buying_power: 20000, portfolio_value: 30000 }),
+      })
+    ) as any;
+
+    render(<AlpacaAccountInfo />);
+    await waitFor(() => {
+      expect(screen.getByText("Alpaca Account")).toBeInTheDocument();
+    });
+  });
+});
+```
+
+- [ ] **Step 6: Run tests**
+
+```bash
+npm run typecheck && npm test
+```
+
+- [ ] **Step 7: Commit**
+
+```bash
+git add app/components/AlpacaAccountInfo.tsx app/api/alpaca/account.ts app/api/+types.ts app/routes/home.tsx app/components/__tests__/AlpacaAccountInfo.test.tsx
+git commit -m "feat: add Alpaca account info to home page"
+```
+
+### Task 4: Update backend to calculate indicators (add indicator calculation logic)
+
+**Files:**
+- Create: `app/utils/indicators.ts`
+- Modify: `app/api/indicators.ts`
+- Test: `app/utils/__tests__/indicators.test.ts`
+
+- [ ] **Step 1: Implement indicator calculation functions**
+
+```typescript
+// app/utils/indicators.ts
+export function calculateSMA(prices: number[], period: number = 20): number {
+  if (prices.length < period) return 0;
+  const sum = prices.slice(0, period).reduce((a, b) => a + b, 0);
+  return sum / period;
+}
+
+export function calculateEMA(prices: number[], period: number = 20): number {
+  if (prices.length < period) return 0;
+  const multiplier = 2 / (period + 1);
+  let ema = prices[period - 1];
+  for (let i = period; i < prices.length; i++) {
+    ema = prices[i] * multiplier + ema * (1 - multiplier);
+  }
+  return ema;
+}
+
+export function calculateRSI(prices: number[], period: number = 14): number {
+  if (prices.length < period + 1) return 0;
+  let gains = 0;
+  let losses = 0;
+  for (let i = 1; i <= period; i++) {
+    const diff = prices[i] - prices[i - 1];
+    if (diff > 0) gains += diff;
+    else losses -= diff;
+  }
+  const avgGain = gains / period;
+  const avgLoss = losses / period;
+  const rs = avgGain / avgLoss;
+  return 100 - (100 / (1 + rs));
+}
+
+export function calculateMACD(prices: number[], fastPeriod: number = 12, slowPeriod: number = 26, signalPeriod: number = 9): number {
+  if (prices.length < slowPeriod) return 0;
+  const emaFast = calculateEMA(prices, fastPeriod);
+  const emaSlow = calculateEMA(prices, slowPeriod);
+  const macdLine = emaFast - emaSlow;
+  // Signal line (EMA of MACD line)
+  const signal = calculateEMA([macdLine], signalPeriod);
+  return macdLine - signal;
+}
+```
+
+- [ ] **Step 2: Use these functions in indicators endpoint**
+
+```typescript
+// app/api/indicators.ts
+import { calculateSMA, calculateEMA, calculateRSI, calculateMACD } from "../utils/indicators";
+
+export const GET: RequestHandler = async ({ request, params }) => {
+  const url = new URL(request.url);
+  const symbol = url.searchParams.get("symbol");
+
+  if (!symbol) {
+    return NextResponse.json(
+      { error: "Symbol is required" },
+      { status: 400 }
+    );
+  }
+
+  try {
+    // Fetch historic prices from Alpaca
+    const prices = await fetchHistoricPrices(symbol);
+    // Calculate indicators
+    const sma = calculateSMA(prices);
+    const ema = calculateEMA(prices);
+    const rsi = calculateRSI(prices);
+    const macd = calculateMACD(prices);
+
+    const data = {
+      symbol,
+      indicators: { sma, ema, rsi, macd },
+    };
+    return NextResponse.json(data);
+  } catch (error) {
+    return NextResponse.json(
+      { error: "Failed to fetch indicators" },
+      { status: 500 }
+    );
+  }
+};
+
+async function fetchHistoricPrices(symbol: string): Promise<number[]> {
+  // Implement Alpaca API call
+  // Return array of closing prices
+  return [100, 102, 101, 105, 107, 110, 108, 115, 120, 119];
+}
+```
+
+- [ ] **Step 3: Write tests for indicator calculations**
+
+```typescript
+// app/utils/__tests__/indicators.test.ts
+import { calculateSMA, calculateEMA, calculateRSI, calculateMACD } from "../indicators";
+
+describe("Indicator calculations", () => {
+  it("calculates SMA correctly", () => {
+    const prices = [1, 2, 3, 4, 5];
+    expect(calculateSMA(prices, 3)).toBe(3);
+  });
+
+  it("calculates EMA correctly", () => {
+    const prices = [1, 2, 3, 4, 5];
+    expect(calculateEMA(prices, 3)).toBeCloseTo(3.5);
+  });
+
+  it("calculates RSI correctly", () => {
+    const prices = [100, 102, 101, 105, 107, 110, 108, 115, 120, 119];
+    expect(calculateRSI(prices, 5)).toBeCloseTo(66.7);
+  });
+
+  it("calculates MACD correctly", () => {
+    const prices = [100, 102, 101, 105, 107, 110, 108, 115, 120, 119];
+    expect(calculateMACD(prices)).toBeCloseTo(2.5);
+  });
+});
+```
+
+- [ ] **Step 4: Run tests**
+
+```bash
+npm run typecheck && npm test
+```
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add app/utils/indicators.ts app/api/indicators.ts app/utils/__tests__/indicators.test.ts
+git commit -m "feat: add indicator calculation utilities"
+```
+
+### Task 5: Final integration and testing
+
+**Files:**
+- Modify: `package.json` (add test script if needed)
+- Modify: `vite.config.ts` (optional proxy)
+
+- [ ] **Step 1: Ensure Vite proxy is set up for API calls**
+
+```typescript
+// vite.config.ts
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    proxy: {
+      "/api": {
+        target: "http://localhost:5173",
+        changeOrigin: true,
+      },
+    },
+  },
+});
+```
+
+- [ ] **Step 2: Run the full development server**
+
+```bash
+npm run dev
+```
+
+- [ ] **Step 3: Verify the new route works**
+
+- Navigate to `http://localhost:5173/stocks`
+- Enter a symbol (e.g., AAPL) and confirm indicators appear
+
+- [ ] **Step 4: Verify Alpaca account info on home page**
+
+- Visit `http://localhost:5173/` and confirm account info displays
+
+- [ ] **Step 5: Run all tests**
+
+```bash
+npm test
+```
+
+- [ ] **Step 6: Run typecheck**
+
+```bash
+npm run typecheck
+```
+
+- [ ] **Step 7: Commit final changes**
+
+```bash
+git add vite.config.ts
+git commit -m "chore: configure Vite proxy for API calls"
+```
+
+---
+
+**Plan complete and saved to `docs/superpowers/plans/2026-05-12-stocks-route-plan.md`. Two execution options:**
+
+**1. Subagent-Driven (recommended)** - I dispatch a fresh subagent per task, review between tasks, fast iteration
+
+**2. Inline Execution** - Execute tasks in this session using executing-plans, batch execution with checkpoints
+
+**Which approach?**
@@ -0,0 +1,159 @@
+import { Server } from "@modelcontextprotocol/sdk/server/index.js";
+import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
+import {
+  CallToolRequestSchema,
+  ListToolsRequestSchema,
+} from "@modelcontextprotocol/sdk/types.js";
+// @ts-ignore
+import { chromium } from "playwright";
+
+const server = new Server(
+  {
+    name: "playwright-mcp-server",
+    version: "1.0.0",
+  },
+  {
+    capabilities: {
+      tools: {},
+    },
+  }
+);
+
+let browser: any = null;
+let currentPage: any = null;
+
+async function getBrowser(): Promise<any> {
+  if (!browser) {
+    browser = await chromium.launch({ headless: true });
+  }
+  return browser;
+}
+
+async function getPage(): Promise<any> {
+  const b = await getBrowser();
+  if (!currentPage) {
+    currentPage = await b.newPage();
+  }
+  return currentPage;
+}
+
+const tools = [
+  {
+    name: "navigate",
+    description: "Navigate to a URL and get the page title",
+    inputSchema: {
+      type: "object",
+      properties: {
+        url: { type: "string", description: "The URL to navigate to" },
+      },
+      required: ["url"],
+    },
+    handler: async ({ url }: { url: string }) => {
+      const page = await getPage();
+      await page.goto(url);
+      const title = await page.title();
+      return {
+        content: [{ type: "text", text: JSON.stringify({ url, title, success: true }) }],
+      };
+    },
+  },
+  {
+    name: "getPageContent",
+    description: "Get text content from the current page",
+    inputSchema: { type: "object", properties: {} },
+    handler: async () => {
+      const page = await getPage();
+      const content = await page.textContent("body");
+      return { content: [{ type: "text", text: content || "" }] };
+    },
+  },
+  {
+    name: "click",
+    description: "Click an element by CSS selector",
+    inputSchema: {
+      type: "object",
+      properties: { selector: { type: "string", description: "CSS selector" } },
+      required: ["selector"],
+    },
+    handler: async ({ selector }: { selector: string }) => {
+      const page = await getPage();
+      await page.click(selector);
+      return {
+        content: [{ type: "text", text: JSON.stringify({ success: true, action: "clicked", selector }) }],
+      };
+    },
+  },
+  {
+    name: "fillForm",
+    description: "Fill a form input field",
+    inputSchema: {
+      type: "object",
+      properties: {
+        selector: { type: "string" },
+        value: { type: "string" },
+      },
+      required: ["selector", "value"],
+    },
+    handler: async ({ selector, value }: { selector: string; value: string }) => {
+      const page = await getPage();
+      await page.fill(selector, value);
+      return {
+        content: [{ type: "text", text: JSON.stringify({ success: true, action: "filled", selector, value }) }],
+      };
+    },
+  },
+  {
+    name: "screenshot",
+    description: "Take a screenshot of the current page",
+    inputSchema: {
+      type: "object",
+      properties: { path: { type: "string" } },
+      required: ["path"],
+    },
+    handler: async ({ path }: { path: string }) => {
+      const page = await getPage();
+      await page.screenshot({ path });
+      return { content: [{ type: "text", text: JSON.stringify({ success: true, path }) }] };
+    },
+  },
+  {
+    name: "closeBrowser",
+    description: "Close the browser",
+    inputSchema: { type: "object", properties: {} },
+    handler: async () => {
+      if (browser) {
+        await browser.close();
+        browser = null;
+        currentPage = null;
+      }
+      return { content: [{ type: "text", text: JSON.stringify({ success: true }) }] };
+    },
+  },
+];
+
+server.setRequestHandler(ListToolsRequestSchema, async () => ({
+  tools: tools.map((t) => ({ name: t.name, description: t.description, inputSchema: t.inputSchema })),
+}));
+
+server.setRequestHandler(CallToolRequestSchema, async (request) => {
+  const { name, arguments: args } = request.params;
+  const tool = tools.find((t) => t.name === name);
+  if (!tool) return { content: [{ type: "text", text: `Tool not found: ${name}` }], isError: true };
+  try {
+    // @ts-ignore
+    return await tool.handler(args || {});
+  } catch (error) {
+    return {
+      content: [{ type: "text", text: JSON.stringify({ success: false, error: String(error) }) }],
+      isError: true,
+    };
+  }
+});
+
+async function main() {
+  const transport = new StdioServerTransport();
+  await server.connect(transport);
+  console.error("Playwright MCP Server started");
+}
+
+main().catch(console.error);
@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "outDir": "./dist",
+    "rootDir": "."
+  },
+  "include": ["**/*.ts"]
+}
@@ -0,0 +1,10 @@
+{
+  "mcpServers": {
+    "playwright": {
+      "command": "npx",
+      "args": ["tsx", "mcp-server/index.ts"],
+      "env": {},
+      "description": "Playwright browser automation for AI assistants"
+    }
+  }
+}
@@ -6,24 +6,37 @@
    "build": "react-router build",
    "dev": "react-router dev",
    "start": "react-router-serve ./build/server/index.js",
-    "typecheck": "react-router typegen && tsc"
+    "test:e2e": "playwright test",
+    "typecheck": "react-router typegen && tsc",
+    "mcp:dev": "npx tsx mcp-server/index.ts",
+    "mcp:build": "tsc -p mcp-server/tsconfig.json"
  },
  "dependencies": {
+    "@alpacahq/alpaca-trade-api": "^3.1.3",
+    "@modelcontextprotocol/sdk": "^1.29.0",
    "@react-router/node": "7.15.0",
    "@react-router/serve": "7.15.0",
    "isbot": "^5.1.36",
    "react": "^19.2.6",
    "react-dom": "^19.2.6",
-    "react-router": "7.15.0"
+    "react-router": "7.15.0",
+    "zod": "^4.4.3"
  },
  "devDependencies": {
+    "@playwright/test": "^1.60.0",
    "@react-router/dev": "7.15.0",
    "@tailwindcss/vite": "^4.2.2",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^15.0.0",
+    "@testing-library/user-event": "^14.3.1",
    "@types/node": "^22",
    "@types/react": "^19.2.14",
    "@types/react-dom": "^19.2.3",
+    "playwright": "^1.42.0",
    "tailwindcss": "^4.2.2",
+    "tsx": "^4.21.0",
    "typescript": "^5.9.3",
-    "vite": "^8.0.3"
+    "vite": "^8.0.3",
+    "vitest": "^4.1.6"
  }
 }
@@ -0,0 +1,18 @@
+import type { PlaywrightTestConfig } from "@playwright/test";
+
+const config: PlaywrightTestConfig = {
+  testDir: "./tests",
+  webServer: {
+    command: "npm run dev",
+    port: 5173,
+    timeout: 120000,
+  },
+  use: {
+    trace: "on-first-retry",
+    headless: false,
+    viewport: { width: 1280, height: 800 },
+  },
+  reporter: [["html", { output: "test-results" }]],
+};
+
+export default config;
@@ -0,0 +1,4 @@
+{
+  "status": "passed",
+  "failedTests": []
+}
@@ -0,0 +1,21 @@
+import { test, expect } from "@playwright/test";
+
+test("landing page shows navbar and account info", async ({ page }) => {
+  await page.goto("/");
+
+  // Check navbar is visible
+  await expect(page.locator("nav >> text=AITrader")).toBeVisible();
+  await expect(page.locator("text=Stocks")).toBeVisible();
+  
+  // Check account info is displayed
+  await expect(page.locator("text=Trading Account")).toBeVisible();
+  await expect(page.locator("text=Cash")).toBeVisible();
+  await expect(page.locator("text=Buying Power")).toBeVisible();
+  await expect(page.locator("text=Portfolio Value")).toBeVisible();
+});
+
+test("navigation to stocks works", async ({ page }) => {
+  await page.goto("/");
+  await page.click("text=Stocks");
+  await expect(page).toHaveURL("/stocks");
+});
@@ -0,0 +1,9 @@
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  test: {
+    environment: "jsdom",
+    globals: true,
+    setupFiles: ["./vitest.setup.ts"],
+  },
+});
@@ -0,0 +1 @@
+import "@testing-library/jest-dom";