Svelte & Frontend Standards

Formatting (Biome)

• Indentation: 2 spaces (enforced by biome.json)

• Style: Space indent, recommended rules enabled

• Ignore CSS files from formatting

File Structure

• Components in ui/src/lib/components/

• UI components in ui/src/lib/components/ui/

• Each component exports from index.ts

• Stores in ui/src/lib/stores/

Naming

• Components: PascalCase.svelte (e.g., App.svelte )

• Utilities: camelCase.js (e.g., theme.js )

• CSS classes: Tailwind utility classes

Svelte Patterns

• Use reactive declarations: $: winRate = ...

• Prefer {#snippet} for chart tooltips (Svelte 5 syntax)

• Use onMount for initialization and intervals

• Clean up intervals in return function

• Store pattern for global state (e.g., theme store)

Component Library Stack

• shadcn-svelte: Accessible UI components with customizable styling

• Lucide Icons: Modern icon set (Activity, TrendingUp, Award, etc.)

• LayerChart: D3-based charting library (AreaChart, BarChart)

• d3-scale: Scaling functions for charts (scaleBand, etc.)

Theme System

• Dark/Light mode toggle with persistent storage

• Uses CSS variables for theming (var(--color-chart-1) , etc.)

• Theme store pattern: theme.init() , theme.toggle() , $theme

• Tailwind dark mode classes: dark:bg-slate-900

API Integration

• Endpoint: http://${hostname}:3001/api/stats

• Polling: Every 5 seconds for real-time updates

• Error Handling: Display error banner on connection failure

• Loading States: Show loading indicator while fetching initial data

Data Visualization

• Equity Curve: AreaChart with cumulative PnL (last 50 trades)

• Asset Breakdown: BarChart with per-symbol PnL

• Color Coding:

• BTC: rgb(255, 153, 0) (orange)

• ETH: rgb(99, 127, 235) (blue)

• SOL: rgb(153, 69, 255) (purple)

• XRP: rgb(2, 140, 255) (cyan)

• Conditional Colors: Green for profits, red for losses

Table Display

• Recent trades table with live streaming data

• Columns: ID, Time (UTC), Market, Side, Edge, Price, PnL, Status

• Status badges: LIVE (amber), STOP LOSS (destructive), TAKE PROFIT (emerald), REVERSED (outline), SETTLED (secondary)

• Side badges with emojis: 📈 UP (default), 📉 DOWN (destructive)

Stats Cards

• Grid layout: 1 col mobile, 2 cols tablet, 4 cols desktop

• Key metrics: Total PnL, Win Rate, Stop Losses, Take Profits

• Conditional colors: emerald-600 for positive, rose-600 for negative

• Uppercase tracking labels with icons

• Arrow indicators: ArrowUpRight (positive), ArrowDownRight (negative)