# Settings Page Redesign - Design Spec

## Overview

Replace the current bare-bones settings page (a flat list of JSON textareas) with a structured, multi-section settings dashboard featuring sidebar navigation, typed settings, and an editable stock database table.

## Architecture

### Data Flow
- **Client-side SPA** - `useEffect` on mount fetches settings from `/api/admin/settings` and stocks from `/api/stocks`
- **Structured keys** in existing `AppSetting` table:
  - `llm.model` - OpenRouter model string
  - `llm.temperature` - number (0.0-2.0)
  - `llm.maxDebateRounds` - integer (1-10)
  - `trading.maxLossPercent` - number
  - `trading.positionSizePercent` - number
  - `trading.takeProfitPercent` - number
  - `trading.stopLossPercent` - number
  - `trading.riskMethod` - string ("fixed" | "percentage" | "atr")
- **Saves** via `PUT /api/admin/settings/:key` with optimistic UI update
- **Stock notes** saved via `POST /api/stocks` with FormData: `{ ticker, notes }`
- **Loading state** shown while initial fetch completes

### Layout
- **Sidebar** (left, 240px, sticky): Nav items - LLM & Agents, Trading Defaults, Stock Database, System. Active item highlighted with blue left border.
- **Main panel** (right, fills remaining space): Shows selected section with header, description, and form controls.

## Sections

### LLM & Agents
- Model selector (dropdown with available OpenRouter models)
- Temperature slider (0.0 - 2.0)
- Max debate rounds (number input, 1-10)
- Auto-save on change

### Trading Defaults
- Max loss % (number input)
- Default position size % of portfolio (number input)
- Take profit % (number input)
- Stop loss % (number input)
- Risk management method (dropdown: fixed, percentage, ATR-based)
- Auto-save on change

### Stock Database
- Sortable table: Ticker | Notes (editable) | Last Decision | Last Job | Created | Updated
- Inline note editing (click to edit, blur to save)
- Search/filter by ticker
- Pagination if >20 stocks

### System
- Alpaca mode indicator (paper/live) - read-only, fetched from `/api/alpaca/account` or derived from `ALPACA_BASE_URL` env var
- Admin token management
- Fallback JSON textarea for any raw `AppSetting` keys not covered above

## Error Handling
- Invalid JSON in fallback textarea shows alert and reverts value
- Failed saves show error toast/message and revert optimistic update
- Stock search with no results shows "No stocks found" message
- Loading spinner during initial data fetch

## File Changes
- `app/routes/settings.tsx` - Complete rewrite with sidebar navigation, sections, stock table
- No new API routes needed - existing `/api/admin/settings` and `/api/stocks` endpoints suffice
- No Prisma migration needed - uses existing `AppSetting` and `Stock` models