UI: Unify trader colors between Leaderboard and Performance Chart

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>

web/src/components/CompetitionPage.tsx

@@ -4,6 +4,7 @@ import type { CompetitionData } from '../types';
 import { ComparisonChart } from './ComparisonChart';
 import { useLanguage } from '../contexts/LanguageContext';
 import { t } from '../i18n/translations';
+import { getTraderColor } from '../utils/traderColors';
 
 export function CompetitionPage() {
   const { language } = useLanguage();
@@ -108,7 +109,7 @@ export function CompetitionPage() {
           <div className="space-y-2">
             {sortedTraders.map((trader, index) => {
               const isLeader = index === 0;
-              const aiModelColor = trader.ai_model === 'qwen' ? '#c084fc' : '#60a5fa';
+              const traderColor = getTraderColor(sortedTraders, trader.trader_id);
 
               return (
                 <div
@@ -128,7 +129,7 @@ export function CompetitionPage() {
                       </div>
                       <div>
                         <div className="font-bold text-sm" style={{ color: '#EAECEF' }}>{trader.trader_name}</div>
-                        <div className="text-xs mono font-semibold" style={{ color: aiModelColor }}>
+                        <div className="text-xs mono font-semibold" style={{ color: traderColor }}>
                           {trader.ai_model.toUpperCase()}
                         </div>
                       </div>
@@ -223,7 +224,7 @@ export function CompetitionPage() {
                   <div className="text-center">
                     <div
                       className="text-base font-bold mb-2"
-                      style={{ color: trader.ai_model === 'qwen' ? '#c084fc' : '#60a5fa' }}
+                      style={{ color: getTraderColor(sortedTraders, trader.trader_id) }}
                     >
                       {trader.trader_name}
                     </div>