Optimized mobile display for AITradersPage:
- Header: Reduced padding (px-3 on mobile), smaller icons and text
- Action buttons: Smaller on mobile (px-3, text-xs) with horizontal scroll support
- Configuration cards: Responsive padding (p-3 on mobile), smaller gaps
- Model/Exchange items: Smaller icons (w-7 on mobile), truncate text overflow
- Trader list: Stack vertically on mobile, smaller buttons with wrapping support
- Empty states: Smaller icons and text on mobile
Maintained all i18n translations and preserved Binance design style.
Addresses #311🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: tinkle-community <tinklefund@gmail.com>
This is a partial fix for issue #311 mobile display problems.
Changes in this commit:
- Add responsive header layout with separate mobile/desktop views in App.tsx
- Fix language selector visibility on mobile (no longer hidden by menu)
- Add responsive breakpoints to ComparisonChart stats grid (2 cols on mobile, 4 on desktop)
- Adjust padding and text sizes for mobile screens
- Preserve all i18n (internationalization) functionality from upstream
Note: Additional components (CompetitionPage, AITradersPage) will need similar mobile
responsive improvements in follow-up commits.
Related to #311🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: tinkle-community <tinklefund@gmail.com>
- Change validation to check allModels first, then supportedModels
- This allows saving new model configurations without "model does not exist" error
- Fixes issue where users couldn't save AI model config after selecting from dropdown
Fixes#245🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: tinkle-community <tinklefund@gmail.com>
This commit addresses the issue where switching to English still showed Chinese text in many UI elements.
Changes made:
- Added 40+ missing translation keys to translations.ts for both English and Chinese
- Updated App.tsx to use t() function for all hardcoded text (logout button, loading message)
- Updated AITradersPage.tsx extensively:
- Replaced all alert/confirm messages with translation keys
- Updated status labels (inUse, enabled, configured)
- Updated all modal components (SignalSource, ModelConfig, ExchangeConfig)
- Added language prop to all modal components
- Replaced all Chinese UI text with translation function calls
The implementation now properly supports language switching between English and Chinese throughout the entire application.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: tinkle-community <tinklefund@gmail.com>
- add logo
- Replaced emoji placeholders with Lucide icons in AITradersPage, CompetitionPage, EquityChart, Header, LoginPage, and RegisterPage for improved visual consistency.
- Updated button styles to include icons for actions like adding models and exchanges.
- Enhanced error and empty state displays with relevant icons to provide better user feedback.
- Add specific field validation for Aster exchange (asterUser, asterSigner, asterPrivateKey)
- Add specific field validation for Hyperliquid exchange (apiKey, hyperliquidWalletAddr)
- Keep existing validation for Binance (apiKey, secretKey)
- Remove debug console logs
- Fix issue where Aster exchange was not appearing in trader creation dropdown
This ensures all three supported exchanges can be properly selected when creating a new AI trader.
Problem:
- Leaderboard used ai_model-based colors (qwen=purple, other=blue)
- Performance Comparison used index-based colors (10 color pool)
- This caused color mismatch between the two components
- Same trader showed different colors in different sections
Solution:
- Create shared color utility (utils/traderColors.ts)
- Define single color pool with 10 distinct colors
- Implement unified getTraderColor function based on trader index
- Update both ComparisonChart and CompetitionPage to use shared utility
Changes:
- New file: web/src/utils/traderColors.ts (shared color logic)
- Updated: ComparisonChart.tsx (use shared utility)
- Updated: CompetitionPage.tsx (use shared utility in Leaderboard
and Head-to-Head sections)
Now traders consistently display the same color across all UI sections.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: tinkle-community <tinklefund@gmail.com>
Problem:
- Multiple traders using the same AI model had duplicate colors
- Only 2 colors were available (blue for deepseek, purple for qwen)
- Made it difficult to distinguish between traders
Solution:
- Expand color pool from 2 to 10 distinct colors
- Change color assignment from ai_model-based to index-based
- Each trader now gets a unique color based on their position
- Colors cycle if there are more than 10 traders
Color pool includes: blue, purple, emerald, orange, pink, amber,
sky, violet, green, rose
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: tinkle-community <tinklefund@gmail.com>
