Files
AITrader/docs/superpowers/specs/2026-05-16-settings-page-redesign.md
henry 1eddb9173e fix: update admin token check logic and improve comments for clarity
feat: add condition to only delete manually added stocks from DB
docs: clarify stock notes saving method and Alpaca mode indicator fetching
chore: update binary database file
2026-05-16 22:20:29 +02:00

2.7 KiB

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