diff --git a/docs/superpowers/specs/2026-05-16-settings-page-redesign.md b/docs/superpowers/specs/2026-05-16-settings-page-redesign.md new file mode 100644 index 0000000..f6e3b80 --- /dev/null +++ b/docs/superpowers/specs/2026-05-16-settings-page-redesign.md @@ -0,0 +1,64 @@ +# 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 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, derived from env +- 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