backup

get_return.py

@@ -0,0 +1,662 @@
+"""
+Trading Strategy Return Analysis Tool
+
+Usage:
+1. Modify the configuration parameter lists (assets, models, agents) in the main() function
+2. Run directly: python get_return.py
+
+Supports batch analysis:
+- assets: Asset list, e.g., ["BTC", "TSLA", "AAPL"]
+- models: Model list, e.g., ["gpt_4o", "gpt_4.1"]  
+- agents: Agent list, e.g., ["HedgeFundAgent", "FinAgent", "TradeAgent"]
+
+Will automatically calculate all combinations and output results in order.
+
+File naming format: action/{agent}_{asset}_{model}_trading_decisions.json
+Example: action/HedgeFundAgent_BTC_gpt_4o_trading_decisions.json
+"""
+
+import json
+import os
+import pickle
+import numpy as np
+import pandas as pd
+from scipy.stats import ttest_rel
+from datetime import datetime, timedelta
+
+# Import price fetching functions
+from get_daily_news import get_asset_price, is_crypto, is_stock
+
+# Global price cache to avoid repeated API calls
+_price_cache = {}
+CACHE_FILE = "cache/price_cache.pkl"
+
+def load_price_cache():
+    """Load price cache from local pkl file"""
+    global _price_cache
+    
+    try:
+        if os.path.exists(CACHE_FILE):
+            with open(CACHE_FILE, 'rb') as f:
+                _price_cache = pickle.load(f)
+            
+            # Count loaded cache information
+            total_entries = sum(len(dates) for dates in _price_cache.values())
+            symbols = list(_price_cache.keys())
+        else:
+            _price_cache = {}
+    except Exception as e:
+        _price_cache = {}
+
+def save_price_cache():
+    """Save price cache to local pkl file"""
+    global _price_cache
+    
+    try:
+        # Ensure cache directory exists
+        os.makedirs(os.path.dirname(CACHE_FILE), exist_ok=True)
+        
+        with open(CACHE_FILE, 'wb') as f:
+            pickle.dump(_price_cache, f)
+        
+        # Count saved cache information
+        total_entries = sum(len(dates) for dates in _price_cache.values())
+        symbols = list(_price_cache.keys())
+        
+    except Exception as e:
+        pass
+
+def preload_prices(symbol, start_date, end_date):
+    """Preload all price data within specified time range to cache"""
+    global _price_cache
+    
+    # On first call, load cache from local file
+    if not _price_cache:
+        load_price_cache()
+    
+    # Preload price data
+    
+    # Generate date range
+    dates = pd.date_range(start=start_date, end=end_date, freq='D')
+    cache_key = symbol
+    
+    if cache_key not in _price_cache:
+        _price_cache[cache_key] = {}
+    
+    # Count API calls
+    api_calls = 0
+    cached_hits = 0
+    
+    # Batch fetch price data
+    for current_date in dates:
+        date_str = current_date.strftime('%Y-%m-%d')
+        if date_str not in _price_cache[cache_key]:
+            price = get_asset_price(symbol, date_str)  # Directly call API to fill cache
+            _price_cache[cache_key][date_str] = price
+            api_calls += 1
+        else:
+            cached_hits += 1
+    
+    # Complete price data preloading
+    
+    # Save cache if there were new API calls
+    if api_calls > 0:
+        save_price_cache()
+
+def get_cached_price(symbol, date_str):
+    """Get price from cache, call API directly if not in cache"""
+    global _price_cache
+    
+    # On first call, load cache from local file
+    if not _price_cache:
+        load_price_cache()
+    
+    cache_key = symbol
+    if cache_key in _price_cache and date_str in _price_cache[cache_key]:
+        # Get from cache
+        return _price_cache[cache_key][date_str]
+    else:
+        # If not in cache, call API directly (fallback solution)
+        price = get_asset_price(symbol, date_str)
+        # Cache the API result as well
+        if cache_key not in _price_cache:
+            _price_cache[cache_key] = {}
+        _price_cache[cache_key][date_str] = price
+        # Immediately save newly fetched price
+        save_price_cache()
+        return price
+
+def clear_price_cache():
+    """Save price cache but don't clear memory (for compatibility with existing code)"""
+    global _price_cache
+    
+    # Count cache information
+    total_entries = sum(len(dates) for dates in _price_cache.values())
+    symbols = list(_price_cache.keys())
+    
+    # Save to file instead of clearing
+    save_price_cache()
+
+def force_clear_cache():
+    """Force clear memory cache (actual clearing function)"""
+    global _price_cache
+    
+    # Count cache information
+    total_entries = sum(len(dates) for dates in _price_cache.values())
+    symbols = list(_price_cache.keys())
+    
+    # Save first then clear
+    save_price_cache()
+    _price_cache.clear()
+
+def run_compounding_simulation(recommendations, initial_capital=100000, trade_fee=0.0005, strategy='long_short', trading_mode='normal', asset_type='stock', symbol=None):
+    """
+    Runs a realistic trading simulation with compounding capital and returns a daily capital series.
+    
+    trading_mode:
+    - 'normal': Original strategy
+        - HOLD: keep current position
+        - BUY: open long if flat, ignore if in position
+        - SELL: open short if flat, close if long
+    
+    - 'aggressive': New strategy
+        - HOLD: force close to flat
+        - BUY: close short (if short) then open long
+        - SELL: close long (if long) then open short
+    """
+    capital = float(initial_capital)
+    position = 'FLAT'
+    entry_price = 0
+    capital_series = []
+
+    rec_map = {rec['date']: rec for rec in recommendations}
+    start_date = datetime.fromisoformat(recommendations[0]['date'])
+    end_date = datetime.fromisoformat(recommendations[-1]['date'])
+    
+    # symbol must be provided, no default values
+    if symbol is None:
+        raise ValueError("Symbol must be provided for run_compounding_simulation, cannot use default values")
+    
+    # Use all calendar days (let price fetching function decide if valid)
+    dates = pd.date_range(start=start_date, end=end_date, freq='D')
+    
+    # Record previous trading day's capital for filling non-trading days
+    last_capital = capital
+    
+    for current_date in dates:
+        date_str = current_date.strftime('%Y-%m-%d')
+        
+        # Actually get current day's price (based on asset type)
+        current_price = get_cached_price(symbol, date_str)
+        if current_price is None:  # If price is null (market closed), skip this day
+            capital_series.append(last_capital)
+            continue
+
+        daily_capital = capital
+        if position == 'LONG':
+            daily_capital = capital * (current_price / entry_price) if entry_price != 0 else capital
+        elif position == 'SHORT':
+            daily_capital = capital * (1 + (entry_price - current_price) / entry_price) if entry_price != 0 else capital
+
+        # Execute trades for the current day BEFORE recording capital
+        # Check if the date exists in recommendations, default to HOLD if not
+        if date_str in rec_map:
+            action = rec_map[date_str].get('recommended_action', 'HOLD')
+        else:
+            action = 'HOLD'  # Default action for missing dates
+        
+        if trading_mode == 'normal':  # Original strategy: HOLD keeps position
+            if action == 'HOLD':
+                # Keep current position, do nothing
+                pass
+            elif action == 'BUY':
+                if position == 'FLAT':
+                    position, entry_price = 'LONG', current_price
+                    capital *= (1 - trade_fee)
+                    daily_capital = capital  # Update daily capital after trade
+                elif position == 'SHORT':
+                    # Close short position first
+                    return_pct = (entry_price - current_price) / entry_price if entry_price != 0 else 0
+                    capital *= (1 + return_pct) * (1 - trade_fee)
+                    # Then open long position
+                    position, entry_price = 'LONG', current_price
+                    capital *= (1 - trade_fee)
+                    daily_capital = capital
+            elif action == 'SELL':
+                if position == 'LONG':
+                    return_pct = (current_price - entry_price) / entry_price if entry_price != 0 else 0
+                    capital *= (1 + return_pct) * (1 - trade_fee)
+                    position, entry_price = 'FLAT', 0
+                    daily_capital = capital  # Update daily capital after trade
+                elif position == 'FLAT' and strategy == 'long_short':
+                    position, entry_price = 'SHORT', current_price
+                    capital *= (1 - trade_fee)
+                    daily_capital = capital  # Update daily capital after trade
+                    
+        else:  # New strategy: HOLD closes position, BUY/SELL switches position directly
+            if action == 'HOLD':  # Force close position
+                if position == 'LONG':
+                    return_pct = (current_price - entry_price) / entry_price if entry_price != 0 else 0
+                    capital *= (1 + return_pct) * (1 - trade_fee)
+                    position, entry_price = 'FLAT', 0
+                    daily_capital = capital
+                elif position == 'SHORT':
+                    return_pct = (entry_price - current_price) / entry_price if entry_price != 0 else 0
+                    capital *= (1 + return_pct) * (1 - trade_fee)
+                    position, entry_price = 'FLAT', 0
+                    daily_capital = capital
+            elif action == 'BUY':
+                if position == 'SHORT':  # First close short position
+                    return_pct = (entry_price - current_price) / entry_price if entry_price != 0 else 0
+                    capital *= (1 + return_pct) * (1 - trade_fee)
+                    position, entry_price = 'FLAT', 0
+                    daily_capital = capital  # Update daily_capital
+                if position == 'FLAT':  # Then open long position
+                    position, entry_price = 'LONG', current_price
+                    capital *= (1 - trade_fee)
+                    daily_capital = capital
+            elif action == 'SELL':
+                if position == 'LONG':  # First close long position
+                    return_pct = (current_price - entry_price) / entry_price if entry_price != 0 else 0
+                    capital *= (1 + return_pct) * (1 - trade_fee)
+                    position, entry_price = 'FLAT', 0
+                    daily_capital = capital  # Update daily_capital
+                if position == 'FLAT' and strategy == 'long_short':  # Then open short position
+                    position, entry_price = 'SHORT', current_price
+                    capital *= (1 - trade_fee)
+                    daily_capital = capital
+        
+        # Record capital after all trades are executed
+        capital_series.append(daily_capital)
+        last_capital = daily_capital
+        
+        # Force close position on the last day
+        if current_date == dates[-1] and position != 'FLAT':
+            if position == 'LONG':
+                return_pct = (current_price - entry_price) / entry_price if entry_price != 0 else 0
+                capital *= (1 + return_pct) * (1 - trade_fee)
+            elif position == 'SHORT':
+                return_pct = (entry_price - current_price) / entry_price if entry_price != 0 else 0
+                capital *= (1 + return_pct) * (1 - trade_fee)
+            position, entry_price = 'FLAT', 0
+            capital_series[-1] = capital  # Update the last capital value
+    
+    return capital_series
+
+def calculate_buy_and_hold_series(recommendations, initial_capital=100000, trade_fee=0.0005, asset_type='stock', symbol=None):
+    """Calculate buy and hold strategy performance"""
+    capital_series = []
+    rec_map = {rec['date']: rec for rec in recommendations}
+    start_date = datetime.fromisoformat(recommendations[0]['date'])
+    end_date = datetime.fromisoformat(recommendations[-1]['date'])
+    
+    # symbol must be provided, no default values
+    if symbol is None:
+        raise ValueError("Symbol must be provided for calculate_buy_and_hold_series, cannot use default values")
+    
+    # Get first valid price as buy price
+    buy_price = None
+    first_date_str = start_date.strftime('%Y-%m-%d')
+    buy_price = get_cached_price(symbol, first_date_str)  # Use cache
+    
+    if buy_price is None:
+        # If no price on first day, find first valid price
+        current_date = start_date
+        while current_date <= end_date and buy_price is None:
+            date_str = current_date.strftime('%Y-%m-%d')
+            buy_price = get_cached_price(symbol, date_str)
+            current_date += timedelta(days=1)
+    
+    if buy_price is None or buy_price <= 0:
+        # If no valid price throughout the period, return empty sequence
+        print(f"Warning: No valid buy price found for {symbol} in period {start_date} to {end_date}")
+        return []
+    
+    # Buy on first day, charge opening fee
+    capital = initial_capital * (1 - trade_fee)
+    
+    # Use all calendar days (let price fetching function decide if valid)
+    dates = pd.date_range(start=start_date, end=end_date, freq='D')
+    
+    last_price = buy_price
+    for i, current_date in enumerate(dates):
+        date_str = current_date.strftime('%Y-%m-%d')
+        
+        # Actually get current day's price (based on asset type)
+        current_price = get_cached_price(symbol, date_str)
+        
+        # If price is null, skip this day and use last valid price
+        if current_price is None:
+            daily_capital = capital * (last_price / buy_price) if buy_price != 0 else capital
+            capital_series.append(daily_capital)
+            continue
+        
+        # Calculate current market value
+        daily_capital = capital * (current_price / buy_price) if buy_price != 0 else capital
+        
+        # Sell on last day, charge closing fee
+        if i == len(dates) - 1:  # Use index to determine last day
+            daily_capital *= (1 - trade_fee)
+            
+        capital_series.append(daily_capital)
+        last_price = current_price
+        
+    return capital_series
+
+def get_daily_returns(capital_series):
+    """Calculate daily returns from capital series"""
+    series = pd.Series(capital_series)
+    return series.pct_change().fillna(0)
+
+def calculate_metrics(capital_series, recommendations, asset_type='stock'):
+    """
+    Calculate performance metrics for different asset types
+    
+    Parameters:
+    - capital_series: list of daily capital values
+    - recommendations: list of trading recommendations
+    - asset_type: 'stock' or 'crypto'
+    """
+    if len(capital_series) == 0:
+        return {
+            'total_return': 0,
+            'ann_return': 0,
+            'ann_vol': 0,
+            'sharpe_ratio': 0,
+            'max_drawdown': 0
+        }
+    
+    daily_returns = get_daily_returns(capital_series)
+
+    # Total Return
+    total_return = (capital_series[-1] - capital_series[0]) / capital_series[0] * 100
+
+    # Choose annualization parameters based on asset type
+    if asset_type == 'stock':
+        annual_days = 252  # Stock trading days per year
+        # For stocks, the capital series includes calendar days; weekends/holidays
+        # create zero returns that artificially depress volatility.
+        # Filter out zero-return days to approximate trading days only.
+        trading_returns = daily_returns[daily_returns != 0]
+        effective_returns = trading_returns if len(trading_returns) > 0 else daily_returns
+        n_days_effective = len(effective_returns) if len(effective_returns) > 0 else len(daily_returns)
+        ann_vol = (effective_returns.std() * np.sqrt(annual_days) * 100) if len(effective_returns) > 1 else 0
+        # Annualized return uses effective trading day count
+        if n_days_effective > 1:
+            ann_return = (((capital_series[-1] / capital_series[0]) ** (annual_days / n_days_effective)) - 1) * 100
+        else:
+            ann_return = total_return
+    else:  # crypto
+        annual_days = 365  # Cryptocurrency trades year-round
+        n_days_effective = len(daily_returns)
+        ann_vol = daily_returns.std() * np.sqrt(annual_days) * 100 if len(daily_returns) > 1 else 0
+        if n_days_effective > 1:
+            ann_return = (((capital_series[-1] / capital_series[0]) ** (annual_days / n_days_effective)) - 1) * 100
+        else:
+            ann_return = total_return
+
+    # Sharpe Ratio (assuming risk-free rate = 0)
+    # Use standard daily mean/std approach with consistent day count per asset type
+    if asset_type == 'stock':
+        sharpe_base_returns = effective_returns
+    else:
+        sharpe_base_returns = daily_returns
+
+    mean_daily = sharpe_base_returns.mean() if len(sharpe_base_returns) > 0 else 0
+    std_daily = sharpe_base_returns.std() if len(sharpe_base_returns) > 1 else 0
+
+    if std_daily and std_daily > 0:
+        sharpe_ratio = (mean_daily / std_daily) * np.sqrt(annual_days)
+    else:
+        sharpe_ratio = 0
+    
+    # Maximum Drawdown
+    capital_series_pd = pd.Series(capital_series)
+    rolling_max = capital_series_pd.expanding().max()
+    drawdowns = (capital_series_pd - rolling_max) / rolling_max
+    max_drawdown = drawdowns.min() * 100 if len(drawdowns) > 0 else 0
+    
+    return {
+        'total_return': total_return,
+        'ann_return': ann_return,
+        'ann_vol': ann_vol,
+        'sharpe_ratio': sharpe_ratio,
+        'max_drawdown': max_drawdown
+    }
+
+def print_metrics_table(strategies_data, headers):
+    """Print formatted metrics table"""
+    metrics = ['total_return', 'ann_return', 'ann_vol', 'sharpe_ratio', 'max_drawdown']
+    metric_headers = {
+        'total_return': 'Total Return % (↑)',
+        'ann_return': 'Ann. Return % (↑)',
+        'ann_vol': 'Ann. Vol % (↓)',
+        'sharpe_ratio': 'Sharpe Ratio (↑)',
+        'max_drawdown': 'Max DD % (↓)'
+    }
+    
+    # Calculate column widths
+    col_widths = {m: max(12, len(metric_headers[m]) + 1) for m in metrics}
+    
+    # Print header
+    header_line = f"{'Strategy':<20} | " + " | ".join(f"{metric_headers[m]:>{col_widths[m]}}" for m in metrics)
+    print(header_line)
+    print("-" * len(header_line))
+    
+    # Print strategy data
+    for name, data in strategies_data:
+        line = f"{name:<20} | " + " | ".join(f"{data[metric]:>{col_widths[metric]}.2f}" for metric in metrics)
+        print(line)
+
+def discover_available_files():
+    """
+    Automatically discover all trading decision files in action directory and return available combinations
+    """
+    action_dir = 'action'
+    if not os.path.exists(action_dir):
+        print(f"Error: {action_dir} directory not found")
+        return [], [], []
+    
+    available_agents = set()
+    available_assets = set() 
+    available_models = set()
+    found_files = []
+    
+    # Scan all json files
+    for filename in os.listdir(action_dir):
+        if filename.endswith('_trading_decisions.json'):
+            # Parse filename format: {agent}_{asset}_{model}_trading_decisions.json
+            parts = filename.replace('_trading_decisions.json', '').split('_')
+            if len(parts) >= 3:
+                # Parse based on known model name patterns
+                base_name = '_'.join(parts)
+                
+                if 'claude_sonnet_4_20250514' in base_name:
+                    # claude_sonnet_4_20250514 format
+                    model = 'claude_sonnet_4_20250514'
+                    remaining = base_name.replace('_claude_sonnet_4_20250514', '')
+                elif 'claude_3_5_haiku_20241022' in base_name:
+                    # claude_3_5_haiku_20241022 format
+                    model = 'claude_3_5_haiku_20241022'
+                    remaining = base_name.replace('_claude_3_5_haiku_20241022', '')
+                elif 'gemini_2.0_flash' in base_name:
+                    # gemini_2.0_flash format
+                    model = 'gemini_2.0_flash'
+                    remaining = base_name.replace('_gemini_2.0_flash', '')
+                elif 'gpt_4o' in base_name:
+                    # gpt_4o format
+                    model = 'gpt_4o'
+                    remaining = base_name.replace('_gpt_4o', '')
+                elif 'gpt_4.1' in base_name:
+                    # gpt_4.1 format
+                    model = 'gpt_4.1'
+                    remaining = base_name.replace('_gpt_4.1', '')
+                elif 'vote' in base_name:
+                    # vote format
+                    model = 'vote'
+                    remaining = base_name.replace('_vote', '')
+                else:
+                    # Default handling: last two parts are model
+                    model = '_'.join(parts[-2:])
+                    remaining = '_'.join(parts[:-2])
+                
+                # Extract asset and agent from remaining parts
+                remaining_parts = remaining.split('_')
+                if len(remaining_parts) >= 2:
+                    asset = remaining_parts[-1]  # Last part is asset
+                    agent = '_'.join(remaining_parts[:-1])  # Previous parts are agent
+                
+                available_agents.add(agent)
+                available_assets.add(asset)
+                available_models.add(model)
+                found_files.append((agent, asset, model, filename))
+    
+    # Silently discover files, no detailed output
+    
+    return sorted(available_agents), sorted(available_assets), sorted(available_models)
+
+def analyze_and_print(title, recommendations, asset_type='stock', symbol=None):
+    """Analyze and print strategy performance comparison"""
+    print(f"\n{'='*60}")
+    print(f"{title:^60}")
+    print(f"{'='*60}")
+    
+    if not recommendations:
+        print("No recommendations to analyze.")
+        return
+
+    # Preload price data (get all needed prices at once)
+    start_date = recommendations[0]['date']
+    end_date = recommendations[-1]['date']
+    preload_prices(symbol, start_date, end_date)
+
+    # Calculate Buy & Hold strategy (calculate only once)
+    bh_series = calculate_buy_and_hold_series(recommendations, asset_type=asset_type, symbol=symbol)
+    bh_metrics = calculate_metrics(bh_series, recommendations, asset_type=asset_type)
+
+    # Strategy 1: HOLD KEEP current (keep position)
+    ls_keep_current = run_compounding_simulation(recommendations, strategy='long_short', trading_mode='normal', asset_type=asset_type, symbol=symbol)
+    lo_keep_current = run_compounding_simulation(recommendations, strategy='long_only', trading_mode='normal', asset_type=asset_type, symbol=symbol)
+    
+    # Calculate metrics for Strategy 1
+    ls_metrics = calculate_metrics(ls_keep_current, recommendations, asset_type=asset_type)
+    lo_metrics = calculate_metrics(lo_keep_current, recommendations, asset_type=asset_type)
+    
+    # Print Strategy 1 metrics
+    print("\nStrategy 1 (HOLD keeps position):")
+    strategies_data = [
+        ('Long/Short', ls_metrics),
+        ('Long-Only', lo_metrics),
+        ('Buy & Hold', bh_metrics)
+    ]
+    print_metrics_table(strategies_data, None)
+
+    # Strategy 2: HOLD KEEP FLAT (force close position)
+    ls_keep_flat = run_compounding_simulation(recommendations, strategy='long_short', trading_mode='aggressive', asset_type=asset_type, symbol=symbol)
+    lo_keep_flat = run_compounding_simulation(recommendations, strategy='long_only', trading_mode='aggressive', asset_type=asset_type, symbol=symbol)
+    
+    # Calculate metrics for Strategy 2
+    ls_flat_metrics = calculate_metrics(ls_keep_flat, recommendations, asset_type=asset_type)
+    lo_flat_metrics = calculate_metrics(lo_keep_flat, recommendations, asset_type=asset_type)
+    
+    # Print Strategy 2 metrics
+    print("\nStrategy 2 (HOLD forces flat):")
+    strategies_data = [
+        ('Long/Short', ls_flat_metrics),
+        ('Long-Only', lo_flat_metrics),
+        ('Buy & Hold', bh_metrics)
+    ]
+    print_metrics_table(strategies_data, None)
+    
+    print(f"{asset_type.upper()} {symbol} | {recommendations[0]['date']} to {recommendations[-1]['date']} | {len(ls_keep_current)} days")
+
+def main():
+    """Main function to run the analysis"""
+    
+    # ===========================================
+    # Configuration Parameters - Modify here
+    # ===========================================
+    
+    # Whether to auto-discover available files (True: auto-discover, False: use manual configuration below)
+    auto_discover = False
+    
+    # Manual configuration parameters (only used when auto_discover = False)
+    # Asset symbol list (e.g.: BTC, TSLA, AAPL, etc.)
+    assets = ['TSLA']#["BTC", 'TSLA']  # Only analyze BTC
+    
+    # Model name list (e.g.: gpt_4o, gpt_4.1)
+    models = ["gpt_4o", "gpt_4.1", "gemini_2.0_flash","claude_3_5_haiku_20241022", "claude_sonnet_4_20250514", "vote"]
+    # models = ['vote']
+    
+    # Agent name list (e.g.: HedgeFundAgent, FinAgent, TradeAgent)
+    agents = ['InvestorAgent', "TradeAgent"]# "InvestorAgent", "HedgeFundAgent", "DeepFundAgent"]  # Multiple agents to analyze
+    
+    # ===========================================
+    # Analysis Logic - No need to modify
+    # ===========================================
+    
+    # If auto-discovery is enabled, scan existing files
+    if auto_discover:
+        print("🔍 Auto-discovering available files...")
+        discovered_agents, discovered_assets, discovered_models = discover_available_files()
+        print(f"Discovered files: Agents={discovered_agents}, Assets={discovered_assets}, Models={discovered_models}")
+        if discovered_agents and discovered_assets and discovered_models:
+            agents, assets, models = discovered_agents, discovered_assets, discovered_models
+            print(f"✅ Using auto-discovered parameters: Agents={agents}, Assets={assets}, Models={models}")
+        else:
+            print("⚠️ Auto-discovery failed, using manual configuration parameters")
+    
+    # Iterate through all combinations
+    for agent in agents:
+        for asset in assets:
+            for model in models:
+                # Construct file path: action/{agent}_{asset}_{model}_trading_decisions.json
+                file_path = f'action/{agent}_{asset}_{model}_trading_decisions.json'
+                
+                # Determine asset type
+                symbol = asset
+                if asset in ['BTC', 'ETH', 'ADA', 'SOL', 'DOT', 'LINK', 'UNI', 'MATIC', 'AVAX', 'ATOM']:
+                    asset_type = 'crypto'
+                elif asset in ['TSLA', 'AAPL', 'MSFT', 'GOOGL', 'AMZN', 'NVDA', 'META', 'NFLX', 'AMD', 'INTC']:
+                    asset_type = 'stock'
+                else:
+                    asset_type = 'stock'
+                
+                try:
+                    if not os.path.exists(file_path):
+                        print(f"File not found: {file_path}")
+                        continue
+                        
+                    with open(file_path, 'r', encoding='utf-8') as f:
+                        data = json.load(f)
+                        
+                    recs = data.get('recommendations', [])
+                    if not recs:
+                        print(f"No recommendations found in {file_path}")
+                        continue
+                        
+                    # Validate recommendation format
+                    valid_format = True
+                    for rec in recs:
+                        if 'date' not in rec or 'price' not in rec:
+                            print(f"Invalid recommendation format in {file_path}")
+                            valid_format = False
+                            break
+                    
+                    if not valid_format:
+                        continue
+                            
+                    recs.sort(key=lambda x: datetime.fromisoformat(x['date']))
+                    
+                    title = f"{agent}_{asset}_{model} ({data.get('start_date', 'Unknown')} to {data.get('end_date', 'Unknown')})"
+                    analyze_and_print(title, recs, asset_type=asset_type, symbol=symbol)
+                    
+                except Exception as e:
+                    print(f"Error processing {file_path}: {e}")
+                    continue
+    
+    # Clear price cache to free memory
+    clear_price_cache()
+
+if __name__ == "__main__":
+    main()

src/components/AgentFilters.vue

@@ -63,7 +63,7 @@
       <div class="flex flex-column gap-1">
         <div v-for="opt in modelOptions" :key="`model_${opt.value}`" class="flex align-items-center gap-1">
           <Checkbox v-model="modelsModel" :inputId="`model_${opt.value}`" :value="opt.value" />
-          <label :for="`model_${opt.value}`" class="opt-label">{{ opt.label }}</label>
+          <label :for="`model_${opt.value}`" class="opt-label">{{ formatModelName(opt.label) }}</label>
         </div>
       </div>
     </div>
@@ -179,6 +179,10 @@ export default {
     }
   },
   methods: {
+    formatModelName(model) {
+      if (!model) return ''
+      return model.replace(/_?\d{8}$/, '')
+    },
     initializeSlider() {
       if (this.hasDateBounds) {
         // 查找 2025-08-01 在日期数组中的索引

src/components/AgentTable.vue

@@ -1,21 +1,21 @@
 <template>
-  <DataTable :value="rows" :rows="10" :rowsPerPageOptions="[10,25,50]" paginator scrollable scrollHeight="flex" :loading="loading" :sortMode="'multiple'" :multiSortMeta="multiSortMeta" v-model:expandedRows="expandedRows" :dataKey="'key'" @sort="onSort" @rowToggle="onRowToggle" @rowExpand="onRowExpand" :selection="selection" @update:selection="onSelectionUpdate">
-    <Column v-if="selectable" selectionMode="multiple" style="width: 3rem" />
-    <Column expander style="width: 3rem" />
-    <Column field="agent_name" header="Agent & Model & Strategy">
+  <DataTable :value="rows" :rows="10" :rowsPerPageOptions="[10,25,50]" paginator scrollable scrollHeight="flex" :loading="loading" :sortMode="'multiple'" :multiSortMeta="multiSortMeta" v-model:expandedRows="expandedRows" :dataKey="'key'" @sort="onSort" @rowToggle="onRowToggle" @rowExpand="onRowExpand" :selection="selection" @update:selection="onSelectionUpdate" class="agent-table-scroll">
+    <Column v-if="selectable" selectionMode="multiple" :style="{ width: '50px', minWidth: '50px' }" frozen />
+    <Column expander :style="{ width: '50px', minWidth: '50px' }" frozen />
+    <Column field="agent_name" header="Agent & Model" :style="{ minWidth: '200px' }" frozen>
       <template #body="{ data }">
         <div>
           <div style="display: flex; align-items: center; gap: 0.5rem;">
             <span>{{ data.agent_name }}</span>
             <span style="font-size: 1.25rem;">{{ getRankMedal(data) }}</span>
           </div>
-          <div style="color:#6b7280; font-size: 0.875rem;">{{ data.model }}</div>
+          <div style="color:#6b7280; font-size: 0.875rem;">{{ formatModelName(data.model) }}</div>
           <!-- <div style="color:#6b7280; font-size: 0.875rem;">{{ data.strategy_label }}</div> -->
         </div>
       </template>
     </Column>
     <!-- <Column field="asset" header="Asset"/> -->
-    <Column field="ret_with_fees" header="Return" sortable>
+    <Column field="ret_with_fees" header="Return" sortable :style="{ minWidth: '180px' }">
       <template #body="{ data }">
         <div>
             <div :style="pctStyle(data.ret_with_fees)">{{ fmtSignedPct(data.ret_with_fees) }}</div>
@@ -24,19 +24,19 @@
       </template>
     </Column>
 
-    <Column field="vs_bh_with_fees" header="Vs Buy & Hold" sortable>
+    <Column field="vs_bh_with_fees" header="Vs Buy & Hold" sortable :style="{ minWidth: '140px' }">
       <template #body="{ data }">
         <span :style="pctStyle(data.vs_bh_with_fees)">{{ fmtSignedPct(data.vs_bh_with_fees) }}</span>
       </template>
     </Column>
 
-    <Column field="sharpe" header="Sharpe Ratio" sortable>
+    <Column field="sharpe" header="Sharpe Ratio" sortable :style="{ minWidth: '120px' }">
       <template #body="{ data }">
         {{ fmtNum(data.sharpe) }}
       </template>
     </Column>
 
-    <Column field="win_rate" header="Win Rate" sortable>
+    <Column field="win_rate" header="Win Rate" sortable :style="{ minWidth: '110px' }">
       <template #body="{ data }">
         {{ fmtPctNeutral(data.win_rate) }}
       </template>
@@ -82,6 +82,12 @@ export default {
       if (rank === 3) return '🥉'
       return ''
     },
+    formatModelName(model) {
+      if (!model) return ''
+      // Remove date suffix pattern (8 digits at the end, like _20250514)
+      // Also handles patterns like _YYYYMMDD or just YYYYMMDD at the end
+      return model.replace(/_?\d{8}$/, '')
+    },
     onSelectionUpdate(val){
       this.$emit('update:selection', Array.isArray(val) ? val : [])
     },
@@ -151,6 +157,43 @@ export default {
 </script>
 
 <style scoped>
+/* Enable horizontal scrolling */
+:deep(.agent-table-scroll .p-datatable-wrapper) {
+  overflow-x: auto;
+}
+
+:deep(.agent-table-scroll .p-datatable-table) {
+  min-width: 800px;
+}
+
+/* Frozen column styles */
+:deep(.agent-table-scroll .p-frozen-column) {
+  background: #ffffff;
+  z-index: 1;
+}
+
+:deep(.agent-table-scroll .p-datatable-thead > tr > th.p-frozen-column) {
+  background: #F6F8FB;
+}
+
+/* Better scrollbar */
+:deep(.agent-table-scroll .p-datatable-wrapper)::-webkit-scrollbar {
+  height: 8px;
+}
+
+:deep(.agent-table-scroll .p-datatable-wrapper)::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 4px;
+}
+
+:deep(.agent-table-scroll .p-datatable-wrapper)::-webkit-scrollbar-thumb {
+  background: #cbd5e1;
+  border-radius: 4px;
+}
+
+:deep(.agent-table-scroll .p-datatable-wrapper)::-webkit-scrollbar-thumb:hover {
+  background: #94a3b8;
+}
 </style>
 
 

src/components/AssetsFilter.vue

@@ -1,40 +1,22 @@
 <template>
-    <Tabs :value="selectedAsset" @update:value="onTabChange" class="assets-filter-container">
-      <TabList>
-        <Tab 
-          v-for="asset in availableAssets" 
-          :key="asset.value" 
-          :value="asset.value"
-        >
-          <div class="flex align-items-center gap-2">
-            <img 
-              :src="getAssetImage(asset.value)" 
-              :alt="asset.label"
-              class="asset-image-small"
-            />
-            <span class="font-bold">{{ asset.label }}</span>
-          </div>
-        </Tab>
-      </TabList>
-    </Tabs>
+  <div class="assets-filter-toolbar">
+    <div class="asset-tabs">
+      <button
+        v-for="asset in availableAssets"
+        :key="asset.value"
+        class="asset-tab"
+        :class="{ 'is-active': asset.value === selectedAsset }"
+        @click="onTabChange(asset.value)"
+      >
+        {{ asset.label }}
+      </button>
+    </div>
+  </div>
 </template>
 
 <script>
-import Tabs from 'primevue/tabs'
-import TabList from 'primevue/tablist'
-import Tab from 'primevue/tab'
-import TabPanels from 'primevue/tabpanels'
-import TabPanel from 'primevue/tabpanel'
-
 export default {
   name: 'AssetsFilter',
-  components: {
-    Tabs,
-    TabList,
-    Tab,
-    TabPanels,
-    TabPanel
-  },
   props: {
     modelValue: { type: Array, default: () => [] },
     assetOptions: { type: Array, default: () => [] }
@@ -42,7 +24,18 @@ export default {
   emits: ['update:modelValue'],
   computed: {
     availableAssets() {
-      return this.assetOptions.sort((a, b) => a.label.localeCompare(b.label)) || []
+      // Keep the same order as LiveView: BTC, ETH, BMRN, TSLA
+      const order = ['BTC', 'ETH', 'BMRN', 'TSLA']
+      const sorted = [...(this.assetOptions || [])]
+      sorted.sort((a, b) => {
+        const indexA = order.indexOf(a.value)
+        const indexB = order.indexOf(b.value)
+        if (indexA === -1 && indexB === -1) return a.label.localeCompare(b.label)
+        if (indexA === -1) return 1
+        if (indexB === -1) return -1
+        return indexA - indexB
+      })
+      return sorted
     },
     selectedAsset() {
       const selected = this.modelValue || []
@@ -77,15 +70,54 @@ export default {
 </script>
 
 <style scoped>
-.assets-filter-container {
-  width: 100%;
-  overflow-x: auto;
-  overflow-y: hidden;
+:root {
+  --ama-start: 239, 68, 68;
+  --ama-end: 249, 115, 22;
+  --ink-900: #111827;
+  --surface-0: #ffffff;
+  --bd-subtle: #e5e7eb;
+}
+
+.assets-filter-toolbar {
+  padding: 1rem 1rem 0.5rem 1rem;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.asset-tabs {
+  display: inline-flex;
+  gap: 6px;
+  padding: 4px;
+  border-radius: 12px;
+  background: var(--surface-0);
+  border: 1px solid var(--bd-subtle);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
 }
-.asset-image-small {
-  width: 20px;
-  height: 20px;
-  object-fit: contain;
-  flex-shrink: 0;
+
+.asset-tab {
+  min-width: 54px;
+  height: 32px;
+  padding: 0 10px;
+  border-radius: 8px;
+  border: 1px solid transparent;
+  background: transparent;
+  color: var(--ink-900);
+  font-weight: 800;
+  letter-spacing: .02em;
+  cursor: pointer;
+  transition: all .2s ease;
+}
+
+.asset-tab:hover {
+  color: rgb(var(--ama-end));
+  border-color: rgba(var(--ama-end), .28);
+}
+
+.asset-tab.is-active {
+  color: #fff;
+  border: none;
+  background: linear-gradient(90deg, rgb(var(--ama-start)), rgb(var(--ama-end)));
+  box-shadow: 0 0 0 1px rgba(var(--ama-end), .22), 0 8px 18px rgba(var(--ama-end), .22);
 }
 </style>

src/components/CompareChartE.vue

@@ -27,11 +27,11 @@ const ASSET_CUTOFF = {
 };
 
 const AGENT_COLOR_MAP = {
-  HedgeFundAgent: '#6D4CFE',
-  DeepFundAgent: '#FF6B6B',
-  TradeAgent: '#10B981',
-  InvestorAgent: '#F59E0B'
-}
+  HedgeFundAgent: '#3A0CA3',   // violet-blue
+  DeepFundAgent: '#F72585',    // magenta
+  TradeAgent: '#00BFA6',       // teal
+  InvestorAgent: '#FFB703',    // golden
+};
 
 // pick color by agent name + index (from agentColorIndex map)
 function getAgentColor(agent, idx = 0) {
@@ -187,6 +187,10 @@ export default defineComponent({
   },
   mounted(){ this.$nextTick(() => this.rebuild()) },
   methods: {
+    formatModelName(model) {
+      if (!model) return ''
+      return model.replace(/_?\d{8}$/, '')
+    },
     async getAll(){
       let all = getAllDecisions() || []
       if (!all.length) {
@@ -241,7 +245,7 @@ export default defineComponent({
         // NEW: convert to % mode if requested
         if (this.mode === 'pct') points = toPct(points)
 
-        const name = `${agent} · ${sel.model} · ${cfg.label}`
+        const name = `${agent} · ${this.formatModelName(sel.model)}`
         legend.push(name)
         series.push({
           name,
@@ -277,7 +281,7 @@ export default defineComponent({
                   : Number(v ?? 0).toLocaleString(undefined, { style: 'currency', currency: 'USD', maximumFractionDigits: 2 })
                 return [
                   `<div style="font-weight:600">${sel.agent_name}</div>`,
-                  sel.model ? `<div style="opacity:.8">${sel.model}</div>` : '',
+                  sel.model ? `<div style="opacity:.8">${this.formatModelName(sel.model)}</div>` : '',
                   `<div style="opacity:.8">${sel.asset}</div>`,
                   `<div style="margin-top:4px">${val}</div>`
                 ].join('')
@@ -353,12 +357,17 @@ export default defineComponent({
       }
 
       this.option = {
+        backgroundColor: 'transparent',
+        grid: { left: 60, right: 160, top: 20, bottom: 60 },
         animation: true,
         locale: 'en',
-        grid: { left: 64, right: 200, top: 8, bottom: 52 },
         tooltip: {
           trigger: 'axis',
           axisPointer: { type: 'line' },
+          backgroundColor: 'rgba(255,255,255,0.9)',
+          borderColor: 'rgba(0,0,0,0.1)',
+          textStyle: { color: '#111', fontWeight: 600, fontSize: 13 },
+          extraCssText: 'box-shadow: 0 4px 10px rgba(0,0,0,0.08); backdrop-filter: blur(6px);',
           // NEW: format per mode
           valueFormatter: v => {
             if (typeof v !== 'number') return v
@@ -371,21 +380,27 @@ export default defineComponent({
         xAxis: { 
           type: 'time',
           axisLabel: {
+            fontWeight: 600,
+            color: '#333',
             formatter: (value) => {
               const date = new Date(value);
               return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
             }
-          }
+          },
+          axisLine: { lineStyle: { color: 'rgba(0,0,0,0.2)' } },
+          splitLine: { show: false }
         },
-        yAxis: this.mode === 'pct'
-          ? {
-              type: 'value', scale: true,
-              axisLabel: { formatter: v => `${Number(v).toLocaleString(undefined, { maximumFractionDigits: 0 })}%` }
-            }
-          : {
-              type: 'value', scale: true,
-              axisLabel: { formatter: v => Number(v).toLocaleString(undefined, {style:'currency', currency:'USD', maximumFractionDigits:0 }) }
+        yAxis: {
+          type: 'value',
+          scale: true,
+          axisLabel: {
+            color: '#444',
+            formatter: (v) => this.mode === 'pct'
+                ? `${v.toFixed(0)}%`
+                : v.toLocaleString(undefined, { style:'currency', currency:'USD', maximumFractionDigits:0 })
             },
+          splitLine: { lineStyle: { color: 'rgba(0,0,0,0.05)' } }
+        },
         dataZoom: [{ type: 'inside', throttle: 50 }, { type: 'slider', height: 14, bottom: 36 }],
         series
       }
@@ -395,6 +410,21 @@ export default defineComponent({
 </script>
 
 <style scoped>
-.chart-wrap { width: 100%; }
+.chart-wrap {
+  width: 100%;
+  background: linear-gradient(180deg, #ffffff 0%, #f7f9fb 100%);
+  border: 1px solid rgba(0,0,0,0.05);
+  border-radius: 16px;
+  box-shadow: 0 4px 16px rgba(0,0,0,0.04);
+  overflow: hidden;
+  padding: 10px;
+}
 .h-96 { height: 24rem; }
+
+:deep(.echarts-tooltip) {
+  font-family: 'Inter', sans-serif;
+  backdrop-filter: blur(8px);
+  border-radius: 8px;
+  border: 1px solid rgba(0,0,0,0.1);
+}
 </style>

src/components/Footer.vue

@@ -1,98 +0,0 @@
-<template>
-    <div class="page-header">
-        <div class="logos-container">
-            <span class="collaborators-text">Collaborators:</span>
-            <div class="logo-item">
-                <img src="../assets/images/companies_images/logofinai.png" alt="The Fin AI" class="logo-image" />
-            </div>
-            <div class="logo-item">
-                <img src="../assets/images/companies_images/nactemlogo.png" alt="NaCTeM" class="logo-image" />
-            </div>
-            <div class="logo-item">
-                <img src="../assets/images/companies_images/paalai_logo.png" alt="PAAL AI" class="logo-image" />
-            </div>
-        </div>
-    </div>
-</template>
-
-<style scoped>
-.page-header {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    gap: 0.5rem;
-    padding: 0.75rem 1rem;
-    background: linear-gradient(135deg, #f8f9fb 0%, #ffffff 100%);
-    border-top: 1px solid #e5e7eb;
-    z-index: 100;
-}
-
-.logos-container {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 1rem;
-    flex-wrap: wrap;
-    margin: 0;
-}
-
-.collaborators-text {
-    color: #6b7280;
-    font-size: 0.95rem;
-}
-
-.logo-item {
-    flex-shrink: 0;
-    width: 67px;
-    height: 23px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0.15rem;
-    transition: transform 0.2s ease;
-}
-
-.logo-item:hover {
-    transform: translateY(-2px);
-}
-
-.logo-image {
-    max-width: 100%;
-    max-height: 100%;
-    object-fit: contain;
-    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
-}
-
-/* 响应式设计 */
-@media (max-width: 768px) {
-    .page-header {
-        padding: 0.5rem 0.75rem;
-        gap: 0.35rem;
-    }
-    
-    .logos-container {
-        gap: 0.75rem;
-    }
-    
-    .logo-item {
-        width: 54px;
-        height: 20px;
-    }
-}
-
-@media (max-width: 480px) {
-    .logos-container {
-        gap: 0.5rem;
-    }
-    
-    .logo-item {
-        width: 47px;
-        height: 17px;
-    }
-}
-</style>

src/components/FooterOpen.vue

@@ -0,0 +1,138 @@
+<template>
+  <footer class="page-footer">
+    <div class="footer-section">
+      <span class="footer-label">Presented By</span>
+      <div class="logos-row">
+        <div v-for="(logo, i) in presentedBy" :key="'p-' + i" class="logo-item">
+          <img :src="logo.src" :alt="logo.name" class="logo-image" />
+        </div>
+      </div>
+    </div>
+
+    <div class="footer-section">
+      <span class="footer-label">Academic Collaborators</span>
+      <div class="logos-row">
+        <div v-for="(logo, i) in collaborators" :key="'c-' + i" class="logo-item">
+          <img :src="logo.src" :alt="logo.name" class="logo-image" />
+        </div>
+      </div>
+    </div>
+  </footer>
+</template>
+
+<script>
+export default {
+  name: "PageFooter",
+  data() {
+    return {
+      presentedBy: [
+        { name: "DeepKin", src: new URL("../assets/images/companies_images/deepkin_logo.png", import.meta.url).href },
+        { name: "The Fin AI", src: new URL("../assets/images/companies_images/logofinai.png", import.meta.url).href },
+        { name: "NaCTeM", src: new URL("../assets/images/companies_images/nactemlogo.png", import.meta.url).href },
+        { name: "PAAL AI", src: new URL("../assets/images/companies_images/paalai_logo.png", import.meta.url).href },
+      ],
+      collaborators: [
+        { name: "Stevens Institute of Technology", src: new URL("../assets/images/companies_images/stevens.png", import.meta.url).href },
+        { name: "University of Florida", src: new URL("../assets/images/companies_images/florida.png", import.meta.url).href },
+        { name: "Columbia University", src: new URL("../assets/images/companies_images/columbia.png", import.meta.url).href },
+        { name: "Harvard University", src: new URL("../assets/images/companies_images/harvard.png", import.meta.url).href },
+        { name: "Université de Montréal", src: new URL("../assets/images/companies_images/montreal.png", import.meta.url).href },
+        { name: "Georgia Institute of Technology", src: new URL("../assets/images/companies_images/georgia.png", import.meta.url).href },
+      ],
+    };
+  },
+};
+</script>
+
+<style scoped>
+.page-footer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 1rem 1.5rem;
+  background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
+  border-top: 2px solid rgba(0, 0, 0, 0.05);
+  z-index: 100;
+  backdrop-filter: blur(6px);
+}
+
+.footer-section {
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+.footer-label {
+  font-weight: 700;
+  font-size: 0.9rem;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  background: linear-gradient(90deg, rgb(0, 0, 185), rgb(240, 0, 15));
+  -webkit-background-clip: text;
+  color: transparent;
+}
+
+.logos-row {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1.25rem;
+  flex-wrap: wrap;
+  margin-top: 0.25rem;
+}
+
+.logo-item {
+  width: 72px;
+  height: 26px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.25s ease;
+}
+
+.logo-item:hover {
+  transform: translateY(-2px) scale(1.03);
+}
+
+.logo-image {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.2));
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .page-footer {
+    padding: 0.75rem 1rem;
+    gap: 0.5rem;
+  }
+
+  .logo-item {
+    width: 60px;
+    height: 20px;
+  }
+}
+
+@media (max-width: 480px) {
+  .footer-label {
+    font-size: 0.8rem;
+  }
+
+  .logos-row {
+    gap: 0.75rem;
+  }
+
+  .logo-item {
+    width: 52px;
+    height: 18px;
+  }
+}
+</style>

src/components/Header.vue

@@ -8,7 +8,7 @@
         <div class="menu-container">
             <span class="menu-item" @click="navigateTo('/live')">Live</span>
             <span class="menu-item" @click="navigateTo('/leadboard')">Leadboard</span>
-            <span class="menu-item" @click="navigateTo('/add-asset')">Agent Arena</span>
+            <span class="menu-item" @click="navigateTo('/add-asset')">Join Arena!</span>
         </div>
     </div>
 </template>
@@ -117,4 +117,4 @@ export default {
         height: 17px;
     }
 }
-</style>
+</style>

src/components/HeaderOpen.vue

@@ -0,0 +1,138 @@
+<template>
+  <header class="arena-header">
+    <div class="bar">
+      <!-- Title (left) -->
+      <button class="arena-title" aria-label="Agent Market Arena" @click="navigateTo('/')">
+        Agent Market Arena
+      </button>
+
+      <!-- Tabs (right) -->
+      <nav class="menu" aria-label="Primary">
+        <span
+          class="menu-item"
+          :class="{ active: isActive('/live') }"
+          @click="navigateTo('/live')"
+        >Live Arena</span>
+
+        <span
+          class="menu-item"
+          :class="{ active: isActive('/leaderboard') }"
+          @click="navigateTo('/leaderboard')"
+        >Leaderboard</span>
+
+        <span
+          class="menu-item"
+          :class="{ active: isActive('/add-asset') }"
+          @click="navigateTo('/add-asset')"
+        >Join Arena!</span>
+      </nav>
+    </div>
+
+    <!-- AMA gradient hairline -->
+    <div class="ama-gradient-rule" />
+  </header>
+</template>
+
+<script>
+export default {
+  name: 'ArenaHeader',
+  methods: {
+    navigateTo(path) { this.$router.push(path) },
+    isActive(path)    { return this.$route?.path?.startsWith(path) }
+  }
+}
+</script>
+
+<!-- GLOBAL (UNSCOPED) — brand tokens must NOT be scoped -->
+<style>
+:root{
+  /* AMA brand gradient: rgb(0,0,185) → rgb(240,0,15) */
+  --ama-start: 0, 0, 185;
+  --ama-end:   240, 0, 15;
+
+  /* Podium palette (kept for future use) */
+  --gold:   #D4AF37;
+  --silver: #C0C0C0;
+  --bronze: #CD7F32;
+}
+</style>
+
+<!-- COMPONENT STYLES -->
+<style scoped>
+.arena-header{
+  position: sticky; top: 0; z-index: 50;
+  background: linear-gradient(135deg,#fbfcff 0%,#ffffff 100%);
+  border-bottom: 1px solid #e5e7eb;
+  backdrop-filter: blur(8px);
+}
+
+.bar{
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 16px 16px 12px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+/* Title with AMA gradient text */
+.arena-title{
+  all: unset;
+  cursor: pointer;
+  font-size: 26px;
+  font-weight: 900;
+  letter-spacing: -0.01em;
+  background-image: linear-gradient(90deg, rgb(var(--ama-start)), rgb(var(--ama-end)));
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
+/* Tabs (right) */
+.menu{
+  display: flex; gap: 28px; align-items: center; flex-wrap: wrap;
+}
+
+.menu-item{
+  cursor: pointer; position: relative;
+  font-size: 22px; font-weight: 700; color: #1f2937;
+  padding-bottom: 4px; transition: color .2s ease;
+}
+
+/* hover color + underline */
+.menu-item:hover{ color: rgb(var(--ama-end)); }
+.menu-item::after{
+  content:''; position:absolute; left:0; bottom:0; height:2px; width:0%;
+  background-image: linear-gradient(90deg, rgb(var(--ama-start)), rgb(var(--ama-end)));
+  transition: width .25s ease;
+}
+.menu-item:hover::after{ width:100%; }
+
+/* active = gradient text + full underline */
+.menu-item.active{
+  background-image: linear-gradient(90deg, rgb(var(--ama-start)), rgb(var(--ama-end)));
+  -webkit-background-clip:text; background-clip:text; color:transparent;
+}
+.menu-item.active::after{ width:100%; }
+
+/* bottom hairline */
+.ama-gradient-rule{
+  width:100%; height:3px; border-radius:2px;
+  background-image: linear-gradient(
+    90deg,
+    rgba(var(--ama-start),0),
+    rgb(var(--ama-start)),
+    rgb(var(--ama-end)),
+    rgba(var(--ama-end),0)
+  );
+}
+
+/* responsive */
+@media (max-width: 720px){
+  .bar{ flex-direction: column; align-items: stretch; }
+  .arena-title{ text-align: center; font-size: 22px; }
+  .menu{ justify-content: center; gap: 18px; }
+  .menu-item{ font-size: 18px; }
+}
+</style>

src/components/MiniEchart.vue

@@ -0,0 +1,131 @@
+<template>
+  <div ref="chartContainer" class="echart-mini"></div>
+</template>
+
+<script>
+import * as echarts from 'echarts/core'
+import { LineChart } from 'echarts/charts'
+import { GridComponent, TooltipComponent } from 'echarts/components'
+import { CanvasRenderer } from 'echarts/renderers'
+import { nextTick } from 'vue'
+
+echarts.use([LineChart, GridComponent, TooltipComponent, CanvasRenderer])
+
+export default {
+  name: 'MiniEchart',
+  props: {
+    data: { type: Array, default: () => [] },
+    color: { type: String, default: '#22c55e' }
+  },
+  data() {
+    return {
+      chart: null,
+      resizeObserver: null
+    }
+  },
+  mounted() {
+    console.log('[MiniEchart] Mounted with data:', this.data?.length || 0, 'items')
+    nextTick(() => this.initChart())
+  },
+  beforeUnmount() {
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect()
+      this.resizeObserver = null
+    }
+    if (this.chart) {
+      this.chart.dispose()
+      this.chart = null
+    }
+  },
+  watch: {
+    data(newVal) {
+      if (this.chart && Array.isArray(newVal)) {
+        this.updateChart(newVal)
+      }
+    }
+  },
+  methods: {
+    initChart() {
+      const el = this.$refs.chartContainer
+      console.log('[MiniEchart] initChart - el:', el)
+      
+      if (!el) {
+        console.log('[MiniEchart] No element found')
+        return
+      }
+
+      const { clientWidth: w, clientHeight: h } = el
+      console.log('[MiniEchart] Element size:', w, 'x', h)
+
+      if (!w || !h) {
+        console.log('[MiniEchart] Size is 0, will retry on next tick')
+        setTimeout(() => this.initChart(), 100)
+        return
+      }
+
+      console.log('[MiniEchart] Initializing ECharts...')
+      this.chart = echarts.init(el, null, { renderer: 'canvas' })
+      console.log('[MiniEchart] Chart initialized, rendering data:', this.data?.length || 0)
+      
+      this.renderChart(this.data)
+
+      // Listen for container resize
+      this.resizeObserver = new ResizeObserver(() => {
+        if (this.chart) {
+          this.chart.resize()
+        }
+      })
+      this.resizeObserver.observe(el)
+    },
+    renderChart(arr) {
+      if (!this.chart) return
+      
+      const d = Array.isArray(arr) ? arr : []
+      console.log('[MiniEchart] Rendering chart with', d.length, 'data points')
+      
+      this.chart.setOption({
+        animation: true,
+        grid: { left: 0, right: 0, top: 0, bottom: 0 },
+        xAxis: { 
+          type: 'category', 
+          show: false, 
+          boundaryGap: false, 
+          data: d.map((_, i) => i) 
+        },
+        yAxis: { 
+          type: 'value', 
+          show: false, 
+          scale: true 
+        },
+        tooltip: { show: false },
+        color: [this.color || '#22c55e'],
+        series: [{
+          type: 'line',
+          data: d,
+          showSymbol: false,
+          smooth: 0.35,
+          lineStyle: { width: 2 },
+          areaStyle: { opacity: 0.15 }
+        }]
+      })
+    },
+    updateChart(newData) {
+      if (!this.chart) return
+      
+      const d = Array.isArray(newData) ? newData : []
+      this.chart.setOption({
+        xAxis: { data: d.map((_, i) => i) },
+        series: [{ data: d }]
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.echart-mini {
+  width: 100%;
+  height: 100%;
+}
+</style>
+

src/lib/autoRefresh.js

@@ -0,0 +1,129 @@
+import { dataService } from './dataService.js'
+
+/**
+ * 自动刷新服务
+ * 每天美东时间早上5点自动从数据库刷新数据
+ */
+class AutoRefreshService {
+  constructor() {
+    this.timerId = null
+    this.targetHour = 5 // 美东早上5点
+    this.isRunning = false
+  }
+
+  /**
+   * 计算下一次美东早上5点的时间
+   */
+  getNextRefreshTime() {
+    const now = new Date()
+    
+    // 获取美东时区的当前时间
+    const etOptions = { timeZone: 'America/New_York', hour12: false }
+    const etTimeString = now.toLocaleString('en-US', etOptions)
+    const etDate = new Date(etTimeString)
+    
+    // 设置为美东早上5点
+    const nextRefresh = new Date(etDate)
+    nextRefresh.setHours(this.targetHour, 0, 0, 0)
+    
+    // 如果已经过了今天的5点，设置为明天
+    if (etDate.getTime() >= nextRefresh.getTime()) {
+      nextRefresh.setDate(nextRefresh.getDate() + 1)
+    }
+    
+    // 转换回本地时区
+    const etTimestamp = nextRefresh.getTime()
+    const etOffset = this.getETOffset(nextRefresh)
+    const localOffset = now.getTimezoneOffset() * 60 * 1000
+    const localTimestamp = etTimestamp - etOffset + localOffset
+    
+    return new Date(localTimestamp)
+  }
+
+  /**
+   * 获取美东时区的偏移量（毫秒）
+   */
+  getETOffset(date) {
+    const etString = date.toLocaleString('en-US', { 
+      timeZone: 'America/New_York',
+      timeZoneName: 'short'
+    })
+    // EST is UTC-5, EDT is UTC-4
+    const isDST = etString.includes('EDT')
+    return isDST ? -4 * 60 * 60 * 1000 : -5 * 60 * 60 * 1000
+  }
+
+  /**
+   * 执行刷新
+   */
+  async refresh() {
+    console.log('[AutoRefresh] Refreshing data at', new Date().toLocaleString())
+    try {
+      await dataService.load(true)
+      console.log('[AutoRefresh] Data refreshed successfully')
+    } catch (error) {
+      console.error('[AutoRefresh] Failed to refresh data:', error)
+    }
+  }
+
+  /**
+   * 调度下一次刷新
+   */
+  scheduleNext() {
+    // 清除现有的定时器
+    if (this.timerId) {
+      clearTimeout(this.timerId)
+      this.timerId = null
+    }
+
+    const nextRefresh = this.getNextRefreshTime()
+    const now = new Date()
+    const delay = nextRefresh.getTime() - now.getTime()
+
+    console.log('[AutoRefresh] Next refresh scheduled at:', nextRefresh.toLocaleString())
+    console.log('[AutoRefresh] Time until next refresh:', Math.round(delay / 1000 / 60), 'minutes')
+
+    this.timerId = setTimeout(async () => {
+      await this.refresh()
+      this.scheduleNext() // 刷新后调度下一次
+    }, delay)
+  }
+
+  /**
+   * 启动自动刷新
+   */
+  start() {
+    if (this.isRunning) {
+      console.log('[AutoRefresh] Already running')
+      return
+    }
+
+    console.log('[AutoRefresh] Starting auto-refresh service')
+    this.isRunning = true
+    this.scheduleNext()
+  }
+
+  /**
+   * 停止自动刷新
+   */
+  stop() {
+    console.log('[AutoRefresh] Stopping auto-refresh service')
+    if (this.timerId) {
+      clearTimeout(this.timerId)
+      this.timerId = null
+    }
+    this.isRunning = false
+  }
+
+  /**
+   * 手动触发刷新（不影响定时调度）
+   */
+  async triggerManualRefresh() {
+    console.log('[AutoRefresh] Manual refresh triggered')
+    await this.refresh()
+  }
+}
+
+// 创建单例
+export const autoRefreshService = new AutoRefreshService()
+

src/main.js

@@ -1,6 +1,7 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router/index.js'
+import { autoRefreshService } from './lib/autoRefresh.js'
 
 // PrimeVue setup
 import PrimeVue from 'primevue/config'
@@ -86,4 +87,7 @@ try {
   if (pubKey) { emailjs.init(pubKey) }
 } catch (_) { }
 
+// Start auto-refresh service (daily at 5 AM ET)
+autoRefreshService.start()
+
 app.mount('#app')

src/pages/Main.vue

@@ -1,14 +1,16 @@
 <template>
   <div class="main-container">
     <Header />
-    <router-view />
+    <main class="main-content">
+      <router-view />
+    </main>
     <Footer />
   </div>
 </template>
 
 <script>
-import Header from '../components/Header.vue'
-import Footer from '../components/Footer.vue'
+import Header from '../components/HeaderOpen.vue'
+import Footer from '../components/FooterOpen.vue'
 export default {
   name: 'Main',
   components: {
@@ -23,5 +25,12 @@ export default {
   width: 100%;
   height: 100%;
 }
+.main-content {
+  flex: 1; /* take all remaining vertical space */
+  padding: 2rem 2.5rem 120px; /* bottom padding prevents overlap with footer */
+  box-sizing: border-box;
+  overflow-x: hidden;
+  background: transparent;
+}
 </style>
 

src/router/index.js

@@ -1,8 +1,9 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import Main from '../pages/Main.vue'
-import LeadboardView from '../views/LeadboardView.vue'
+import LeaderboardView from '../views/LeaderboardView.vue'
 import LiveView from '../views/LiveView.vue'
 import AddAssetsView from '../views/AddAssetView.vue'
+import RequestView from '../views/RequestView.vue'
 import AssetRequestsView from '../views/AssetRequestsView.vue'
 import { dataService } from '../lib/dataService.js'
 
@@ -11,11 +12,11 @@ const routes = [
     path: '/', 
     name: 'main', 
     component: Main,
-    redirect: '/leadboard',
+    redirect: '/live',
     children: [
-      { path: '/leadboard', name: 'leadboard', component: LeadboardView },
+      { path: '/leaderboard', name: 'leadboard', component: LeaderboardView },
       { path: '/live', name: 'live', component: LiveView },
-      { path: '/add-asset', name: 'add-asset', component: AddAssetsView },
+      { path: '/add-asset', name: 'add-asset', component: RequestView },
       { path: '/asset-requests', name: 'asset-requests', component: AssetRequestsView },
     ]
   }

src/styles/globals.css

@@ -0,0 +1,37 @@
+/* globals.css */
+:root{
+  --ama-start: 0 0 185;      /* rgb */
+  --ama-end: 240 0 15;
+  --gold: #D4AF37;
+  --silver: #C0C0C0;
+  --bronze: #CD7F32;
+}
+
+@layer utilities {
+  /* Text gradient utility for AMA */
+  .text-ama {
+    background-image: linear-gradient(90deg, rgb(var(--ama-start)), rgb(var(--ama-end)));
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+  }
+
+  /* Button background using AMA gradient */
+  .bg-ama {
+    background-image: linear-gradient(90deg, rgb(var(--ama-start)), rgb(var(--ama-end)));
+  }
+
+  /* Hairline divider using AMA gradient */
+  .rule-ama {
+    height: 2px;
+    background-image: linear-gradient(90deg, rgba(var(--ama-start), .0), rgb(var(--ama-start)), rgb(var(--ama-end)), rgba(var(--ama-end), .0));
+  }
+
+  /* Subtle gradient border (works on white cards) */
+  .border-ama {
+    border: 1px solid transparent;
+    background:
+      linear-gradient(#fff,#fff) padding-box,
+      linear-gradient(90deg, rgb(var(--ama-start)), rgb(var(--ama-end))) border-box;
+  }
+}

src/views/AddAssetView.vue

@@ -1,7 +1,32 @@
 <template>
   <div class="page-container">
     <div class="title-container">
-      <span class="main-title">Agent Arena</span>
+      <span class="main-title">Join Arena!</span>
+      <div class="agents-info">
+        <div class="agent-info-item">
+          <span class="agent-name">InvestorAgent</span>
+          <div class="agent-links">
+            <a href="https://arxiv.org/abs/2412.18174" target="_blank" rel="noopener noreferrer" class="agent-link">
+              <i class="pi pi-file-pdf"></i>
+              <span>Paper</span>
+            </a>
+          </div>
+        </div>
+        <div class="agent-info-divider">|</div>
+        <div class="agent-info-item">
+          <span class="agent-name">TradeAgent</span>
+          <div class="agent-links">
+            <a href="https://arxiv.org/abs/2412.20138" target="_blank" rel="noopener noreferrer" class="agent-link">
+              <i class="pi pi-file-pdf"></i>
+              <span>Paper</span>
+            </a>
+            <a href="https://github.com/TauricResearch/TradingAgents" target="_blank" rel="noopener noreferrer" class="agent-link">
+              <i class="pi pi-github"></i>
+              <span>GitHub</span>
+            </a>
+          </div>
+        </div>
+      </div>
     </div>
 
     <div class="cards-container">
@@ -28,7 +53,7 @@
               <pre class="code-block">{
   "date": "2025-10-24",
   "price": {"BTC": 67890.50},
-  "news": {"BTC": "Bitcoin news..."},
+  "news": {"BTC": ["Bitcoin news 1...", "Bitcoin news 2...", "Bitcoin news 3..."]},
   "model": "gpt-4o",
   "history_price": {
     "BTC": [
@@ -392,6 +417,90 @@ export default {
   color: #1f1f33;
 }
 
+.agents-info {
+  margin-top: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1.5rem;
+  flex-wrap: wrap;
+}
+
+.agent-info-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.agent-name {
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: #1f2937;
+  letter-spacing: 0.02em;
+}
+
+.agent-links {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.agent-link {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0.35rem 0.75rem;
+  background: #f3f4f6;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  color: #4b5563;
+  text-decoration: none;
+  font-size: 0.85rem;
+  font-weight: 500;
+  transition: all 0.2s;
+  cursor: pointer;
+  position: relative;
+  z-index: 10;
+}
+
+.agent-link:hover {
+  background: #e5e7eb;
+  border-color: #d1d5db;
+  color: #1f2937;
+  transform: translateY(-1px);
+}
+
+.agent-link i {
+  font-size: 0.9rem;
+}
+
+.agent-link:has(.pi-file-pdf) {
+  color: #dc2626;
+}
+
+.agent-link:has(.pi-file-pdf):hover {
+  background: #fee2e2;
+  border-color: #fecaca;
+  color: #b91c1c;
+}
+
+.agent-link:has(.pi-github) {
+  color: #0f172a;
+}
+
+.agent-link:has(.pi-github):hover {
+  background: #f1f5f9;
+  border-color: #e2e8f0;
+  color: #000;
+}
+
+.agent-info-divider {
+  color: #d1d5db;
+  font-size: 1.2rem;
+  font-weight: 300;
+}
+
 .cards-container {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));

src/views/{LeadboardView.vue → LeaderboardView.vue}

@@ -1,8 +1,5 @@
 <template>
   <div>
-    <div class="title-container">
-      <span class="main-title">Agent Leadboard</span>
-    </div>
     <AssetsFilter v-model="filters.assets" :assetOptions="assetOptions" />
     <div v-if="loading" class="loading-overlay">
       <div class="loading-box">
@@ -25,13 +22,12 @@
         <div class="flex gap-2 align-items-stretch">
           <!-- Desktop filter panel -->
           <div class="col-panel desktop-filter-panel" style="flex: 1; min-width: 280px;">
-            <Card class="mb-2 card-full compact-card content-card">
+            <Card class="mb-2 card-full compact-card content-card filter-matrix-card">
               <template #title>
-                <div class="mb-4 text-900" style="font-size: 20px; font-weight: 600">Filter Matrix</div>
-                <Divider />
+                <div class="filter-matrix-title">Filter Matrix</div>
               </template>
               <template #content>
-                <div>
+                <div class="filter-matrix-content">
                   <AgentFilters v-model="filters" :nameOptions="nameOptions" :assetOptions="assetOptions" :modelOptions="modelOptions" :strategyOptions="strategyOptions" :dateBounds="dateBounds" />
                 </div>
               </template>
@@ -75,7 +71,7 @@
   </div>
   <Dialog v-model:visible="compareVisible" modal header="Equity Curve Comparison" style="width: 90vw; max-width: 1200px">
     <div>
-      <CompareChart :selected="selectedRows.map(r => ({ agent_name: r.agent_name, asset: r.asset, model: r.model, strategy: r.strategy, decision_ids: r.decision_ids || [] }))" :visible="compareVisible" />
+      <CompareChartE :selected="selectedRows.map(r => ({ agent_name: r.agent_name, asset: r.asset, model: r.model, strategy: r.strategy, decision_ids: r.decision_ids || [] }))" :visible="compareVisible" :mode="'usd'" />
     </div>
   </Dialog>
   <Dialog v-model:visible="requestAssetsVisible" modal header="Request Asset" style="width: 90vw; max-width: 400px">
@@ -91,7 +87,7 @@ import { dataService } from '../lib/dataService.js'
 import AgentTable from '../components/AgentTable.vue'
 import AgentFilters from '../components/AgentFilters.vue'
 import AssetsFilter from '../components/AssetsFilter.vue'
-import CompareChart from '../components/CompareChart.vue'
+import CompareChartE from '../components/CompareChartE.vue'
 import InputText from 'primevue/inputtext'
 import Dialog from 'primevue/dialog'
 import { countNonTradingDaysBetweenForAsset, countTradingDaysBetweenForAsset } from '../lib/marketCalendar.js'
@@ -100,8 +96,8 @@ import { STRATEGIES } from '../lib/strategies.js'
 import emailjs from 'emailjs-com'
 
 export default {
-  name: 'LeadboardView',
-  components: { AgentTable, AgentFilters, AssetsFilter, CompareChart, Dialog, InputText },
+  name: 'LeaderboardView',
+  components: { AgentTable, AgentFilters, AssetsFilter, CompareChartE, Dialog, InputText },
   data() {
     return {
       loading: true,
@@ -189,7 +185,8 @@ export default {
         this.filters.names = state.nameOptions.map(o => o.value)
       }
       if (!this.filters.assets.length && state.assetOptions.length) {
-        this.filters.assets = state.assetOptions.map(o => o.value)
+        // Default to BTC (matching LiveView default)
+        this.filters.assets = ['BTC']
       }
       if (!this.filters.models.length && state.modelOptions.length) {
         this.filters.models = state.modelOptions.map(o => o.value)
@@ -328,32 +325,69 @@ export default {
 </script>
 
 <style scoped>
+/* ===== AMA Color Variables (from LiveView) ===== */
+:root {
+  --ama-start: 0,0,185;
+  --ama-mid: 123,44,191;
+  --ama-end: 240,0,15;
+  --gold: #d4af37;
+  --silver: #c0c0c0;
+  --bronze: #cd7f32;
+  --ink-900: #0f172a;
+  --ink-700: #334155;
+  --ink-600: #64748b;
+  --bd-soft: #E7ECF3;
+  --pos-fg: #0e7a3a;
+  --pos-bg: #f0fdf4;
+  --pos-br: #bbf7d0;
+  --neg-fg: #B91C1C;
+  --neg-bg: #fef2f2;
+  --neg-br: #fecaca;
+}
+
+/* ===== AMA Gradient ===== */
+.ama-gradient {
+  background: linear-gradient(90deg, rgb(0,0,185), #7b2cbf 40%, #d946ef 70%, rgb(240,0,15));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
 .page-wrapper {
     max-width: 1600px;
     margin: 0 auto;
-    padding: 0 1rem 1rem 1rem;
+    padding: 16px 20px 60px;
+    background: #fff;
 }
 
 .title-container {
     text-align: center;
+    margin-bottom: 24px;
 }
 
 .main-title {
     font-size: 2rem;
     letter-spacing: -0.02em;
     font-weight: 800;
-    color: #1f1f33;
+    color: var(--ink-900);
 }
 .loading-overlay {
   position: fixed;
   inset: 0;
-  background: rgba(255, 255, 255, 0.85);
+  background: rgba(255, 255, 255, 0.95);
   z-index: 1000;
   display: flex;
   align-items: center;
   justify-content: center;
 }
-.loading-box { text-align: center; }
+
+.loading-box {
+  text-align: center;
+  padding: 32px;
+  background: #fff;
+  border-radius: 16px;
+  box-shadow: 0 10px 40px rgba(0,0,0,0.1);
+}
 
 .card--with-divider :deep(.p-card-title) {
   border-bottom: 1px solid var(--surface-200);
@@ -363,14 +397,80 @@ export default {
 
 /* equal-height for side-by-side cards */
 .col-panel { display: flex; }
-.card-full { width: 100%; display: flex; flex-direction: column; }
-.card-full :deep(.p-card-body) { display: flex; flex-direction: column; height: 100%; }
-.card-full :deep(.p-card-content) { flex: 1; display: flex; flex-direction: column; }
+.card-full {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  background: #ffffff;
+  border: 1px solid #e5e7eb;
+  border-radius: 16px;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.02), 0 2px 6px rgba(0,0,0,0.04);
+  transition: all 0.2s ease;
+}
+
+.card-full:hover {
+  box-shadow: 0 2px 8px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.06);
+  transform: translateY(-1px);
+}
+
+/* Filter Matrix Card Special Styling */
+.filter-matrix-card {
+  background: linear-gradient(135deg, #fefefe 0%, #fafbfc 100%);
+  border: 1px solid #e5e7eb;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.03), 0 4px 16px rgba(0,0,0,0.04);
+}
+
+.filter-matrix-card:hover {
+  transform: none;
+}
+
+.filter-matrix-title {
+  font-size: 22px;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+  background: linear-gradient(90deg, rgb(239, 68, 68), rgb(249, 115, 22));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  margin-bottom: 8px;
+  padding-bottom: 12px;
+  border-bottom: 2px solid #f3f4f6;
+}
+
+.filter-matrix-content {
+  padding-top: 8px;
+}
+
+.card-full :deep(.p-card-body) {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.card-full :deep(.p-card-content) {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
 
 /* compact spacing for higher information density */
-.compact-card :deep(.p-card-body) { padding: 0.75rem; }
-.compact-card :deep(.p-card-content) { padding-top: 0; padding-bottom: 0; overflow-y: auto; }
-.compact-card :deep(.p-card-title) { margin-bottom: 0.5rem; }
+.compact-card :deep(.p-card-body) {
+  padding: 20px;
+}
+
+.compact-card :deep(.p-card-content) {
+  padding-top: 0;
+  padding-bottom: 0;
+  overflow-y: auto;
+}
+
+.compact-card :deep(.p-card-title) {
+  margin-bottom: 16px;
+  font-size: 20px;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+  color: var(--ink-900);
+}
 
 /* datatable compact paddings */
 :deep(.p-datatable .p-datatable-header) { padding: 0.5rem 0.75rem; }
@@ -468,5 +568,55 @@ export default {
 :deep(.filter-drawer .p-drawer-content) {
   padding: 1rem;
 }
+
+/* ===== Button Improvements ===== */
+:deep(.p-button) {
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  transition: all 0.2s ease;
+}
+
+:deep(.p-button:not(.p-button-text):not(.p-button-outlined):hover) {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+}
+
+/* ===== Empty State ===== */
+.empty-offset > span {
+  color: var(--ink-600);
+  font-size: 16px;
+}
+
+/* ===== Divider ===== */
+:deep(.p-divider) {
+  margin: 0.5rem 0;
+  border-color: var(--bd-soft);
+}
+
+/* ===== DataTable Improvements ===== */
+:deep(.p-datatable) {
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+:deep(.p-datatable .p-datatable-thead > tr > th) {
+  background: #F6F8FB;
+  color: var(--ink-700);
+  font-weight: 700;
+  border-color: var(--bd-soft);
+}
+
+:deep(.p-datatable .p-datatable-tbody > tr) {
+  transition: background 0.15s ease;
+}
+
+:deep(.p-datatable .p-datatable-tbody > tr:hover) {
+  background: #F6F8FB;
+}
+
+:deep(.p-datatable .p-datatable-tbody > tr > td) {
+  border-color: var(--bd-soft);
+  color: var(--ink-700);
+}
 </style>
 

src/views/LiveView.vue

@@ -1,22 +1,50 @@
 <template>
   <div class="live">
+    <!-- About Text -->
+    <div class="about-banner">
+      <p class="about-text">
+        A real-time, ever-evolving platform for continuous competition among AI trading agents.
+      </p>
+    </div>
+
     <!-- Toolbar: assets + mode -->
     <header class="toolbar">
       <div class="toolbar__left">
-        <AssetTabs v-model="asset" :ordered-assets="orderedAssets" />
+        <!-- Asset tabs styled per AMA -->
+        <div class="asset-tabs">
+          <button
+            v-for="a in orderedAssets"
+            :key="a"
+            class="asset-tab"
+            :class="{ 'is-active': asset === a }"
+            @click="asset = a"
+          >
+            {{ a }}
+          </button>
+        </div>
       </div>
+
       <div class="toolbar__right">
-        <button 
-          class="refresh-btn" 
-          @click="refreshData" 
-          :disabled="refreshing"
-          title="Refresh data from database"
-        >
-          <i class="pi pi-refresh" :class="{ 'spinning': refreshing }"></i>
-        </button>
-        <div class="mode">
-          <button class="mode__btn" :class="{ 'is-active': mode==='usd' }" @click="mode='usd'">$</button>
-          <button class="mode__btn" :class="{ 'is-active': mode==='pct' }" @click="mode='pct'">%</button>
+        <!-- Segmented mode switch (USD / %) -->
+        <div class="mode-switch" role="tablist" aria-label="Value mode">
+          <button
+            role="tab"
+            aria-selected="mode==='usd'"
+            class="mode-switch__btn"
+            :class="{ 'is-active': mode==='usd' }"
+            @click="mode='usd'"
+          >
+            $
+          </button>
+          <button
+            role="tab"
+            aria-selected="mode==='pct'"
+            class="mode-switch__btn"
+            :class="{ 'is-active': mode==='pct' }"
+            @click="mode='pct'"
+          >
+            %
+          </button>
         </div>
       </div>
     </header>
@@ -34,18 +62,25 @@
       </div>
     </section>
 
-    <!-- F1 Scoreboard Cards -->
+    <!-- Tournament Cards -->
     <section class="panel panel--cards" v-if="cards.length">
       <div class="cards-grid-f1">
         <article
           v-for="c in cards"
           :key="c.key"
           class="card-f1"
-          :class="{ winner: c.isWinner, bh: c.kind==='bh', neg: (c.gapUsd ?? 0) < 0, pos: (c.gapUsd ?? 0) >= 0 }"
+          :class="{
+            bh: c.kind==='bh',
+            neg: (c.gapUsd ?? 0) < 0,
+            pos: (c.gapUsd ?? 0) >= 0,
+            gold: c.rank === 1,
+            silver: c.rank === 2,
+            bronze: c.rank === 3
+          }"
           :style="{ '--bar': (c.barPct ?? 0) + '%'}"
         >
-          <!-- Crown -->
-          <span v-if="c.isWinner" class="crown" aria-label="Top performer">👑</span>
+          <!-- Podium ribbon (rank 1-3 only) -->
+          <div v-if="c.rank && c.rank <= 3" class="podium-ribbon" :data-rank="c.rank"></div>
 
           <!-- Header: logo + names -->
           <header class="head">
@@ -59,32 +94,61 @@
             </div>
           </header>
 
-          <!-- Net value row -->
-          <div class="net">
-            <div class="net__label">Net value</div>
-            <div class="net__value">{{ fmtUSD(c.balance) }}</div>
+          <!-- KPI row: Net value + P&L -->
+          <div class="kpis">
+            <div class="kpi">
+              <div class="kpi__label">Net Value</div>
+              <div class="kpi__value">{{ fmtUSD(c.balance) }}</div>
+            </div>
+            <div class="kpi align-right">
+              <div class="kpi__label">P&amp;L</div>
+              <div class="kpi__pill" :class="{ pos: profitOf(c) >= 0, neg: profitOf(c) < 0 }">
+                {{ signedMoney(profitOf(c)) }}
+              </div>
+            </div>
+          </div>
+
+          <!-- Quality row: Sharpe / MaxDD -->
+          <div class="quality">
+            <div class="qitem">
+              <span class="qitem__label">Sharpe</span>
+              <span class="qitem__value" :class="{ strong: (c.sharpe ?? 0) >= 2 }">{{ fmtSharpe(c.sharpe) }}</span>
+            </div>
+            <div class="qitem">
+              <span class="qitem__label">MaxDD</span>
+              <span class="qitem__value dd">{{ signedPct(c.maxDrawdown) }}</span>
+            </div>
+          </div>
+
+          <!-- Match stats: Win Rate / Trades / Days -->
+          <div class="stats">
+            <div class="stat"><span class="stat__label">Win Rate</span><span class="stat__val" :class="{ pos: (c.winRate ?? 0) >= 0.5, neg: (c.winRate ?? 0) < 0.5 }">{{ fmtRate(c.winRate) }}</span></div>
+            <div class="stat"><span class="stat__label">Trades</span><span class="stat__val">{{ c.trades ?? '—' }}</span></div>
+            <div class="stat"><span class="stat__label">Days</span><span class="stat__val">{{ c.days ?? '—' }}</span></div>
           </div>
 
           <!-- Performance bar (vs B&H) -->
-          <div class="bar" :class="{ neg: (c.gapUsd ?? 0) < 0, pos: (c.gapUsd ?? 0) >= 0 }">
+          <div
+            class="bar"
+            :class="{ neg: (c.gapUsd ?? 0) < 0, pos: (c.gapUsd ?? 0) >= 0 }"
+            :aria-label="mode==='usd' ? ('Gap vs B&H: ' + signedMoney(c.gapUsd)) : ('Gap vs B&H: ' + signedPct(c.gapPct))"
+          >
             <span :style="{ width: (c.barPct ?? 0) + '%' }"></span>
           </div>
 
-          <!-- Bottom row: chips + EOD -->
-          <div class="bottom">
-            <div class="chips">
-              <span class="chip" :class="{ pos: profitOf(c) >= 0, neg: profitOf(c) < 0 }">
-                {{ signedMoney(profitOf(c)) }}
-              </span>
-              <span class="chip" :class="{ pos: (c.gapUsd ?? 0) >= 0, neg: (c.gapUsd ?? 0) < 0 }">
-                <template v-if="c.kind==='agent'">
+          <!-- Meta row: Gap vs B&H + EOD -->
+          <div class="meta">
+            <div class="gap chip" :class="{ pos: (c.gapUsd ?? 0) >= 0, neg: (c.gapUsd ?? 0) < 0 }">
+              <template v-if="c.kind==='agent'">
+                <span class="chip__label">vs B&amp;H</span>
+                <span class="chip__value">
                   <template v-if="mode==='usd'">{{ signedMoney(c.gapUsd) }}</template>
                   <template v-else>{{ signedPct(c.gapPct) }}</template>
-                </template>
-                <template v-else>—</template>
-              </span>
+                </span>
+              </template>
+              <template v-else>—</template>
             </div>
-            <div class="eod">EOD {{ c.date ? new Date(c.date).toLocaleDateString() : '–' }}</div>
+            <div class="eod">EOD {{ c.date || '–' }}</div>
           </div>
         </article>
       </div>
@@ -97,21 +161,27 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted, watch, shallowRef } from 'vue'
-import AssetTabs from '../components/AssetTabs.vue'
+import { ref, computed, onMounted, onBeforeUnmount, watch, shallowRef } from 'vue'
 import CompareChartE from '../components/CompareChartE.vue'
 import { dataService } from '../lib/dataService'
 
-/* --- same helpers as chart --- */
+/* helpers & metrics */
 import { getAllDecisions } from '../lib/dataCache'
 import { readAllRawDecisions } from '../lib/idb'
 import { filterRowsToNyseTradingDays } from '../lib/marketCalendar'
 import { STRATEGIES } from '../lib/strategies'
-import { computeBuyHoldEquity, computeStrategyEquity } from '../lib/perf'
+import {
+  computeBuyHoldEquity,
+  computeStrategyEquity,
+  calculateMetricsFromSeries,
+  computeWinRate
+} from '../lib/perf'
 
 /* ---------- config ---------- */
-const orderedAssets = ['BTC','ETH','MSFT','BMRN','TSLA'] // (MRNA removed)
-const EXCLUDED_AGENT_NAMES = new Set(['vanilla', 'vinilla']) // case-insensitive
+const orderedAssets = ['BTC','ETH','BMRN','TSLA']
+const EXCLUDED_AGENT_NAMES = new Set(['vanilla', 'vinilla'])
+
+import { supabase } from '../lib/supabase'
 
 const ASSET_ICONS = {
   BTC: new URL('../assets/images/assets_images/BTC.png', import.meta.url).href,
@@ -132,18 +202,25 @@ const ASSET_CUTOFF = { BTC: '2025-08-01' }
 const mode = ref('usd')
 const asset = ref('BTC')
 const rowsRef = ref([])
-const refreshing = ref(false)
 let allDecisions = []
 const cards = shallowRef([])
+const refreshing = ref(false)
+
+let unsubscribe = null
 
 /* ---------- bootstrap ---------- */
 onMounted(async () => {
-  try {
-    if (!dataService.loaded && !dataService.loading) {
-      await dataService.load(false)
-    }
-  } catch (e) { console.error('LiveView: dataService.load failed', e) }
+  unsubscribe = dataService.subscribe((state) => {
+    rowsRef.value = Array.isArray(state.tableRows) ? state.tableRows : []
+  })
+
   rowsRef.value = Array.isArray(dataService.tableRows) ? dataService.tableRows : []
+
+  // Force refresh data from Supabase to get latest end_date
+  if (!dataService.loading) {
+    dataService.load(true).catch(e => console.error('LiveView: force refresh failed', e))
+  }
+  
   if (!orderedAssets.includes(asset.value)) asset.value = orderedAssets[0]
 
   allDecisions = getAllDecisions() || []
@@ -155,35 +232,44 @@ onMounted(async () => {
   }
 })
 
-/* ---------- refresh data ---------- */
-async function refreshData() {
-  if (refreshing.value) return
-  refreshing.value = true
-  try {
-    console.log('[Live] Force refreshing data from Supabase...')
-    await dataService.forceRefresh()
-    rowsRef.value = Array.isArray(dataService.tableRows) ? dataService.tableRows : []
-    allDecisions = getAllDecisions() || []
-    console.log('[Live] Data refreshed successfully')
-  } catch (e) {
-    console.error('[Live] Error refreshing data:', e)
-  } finally {
-    refreshing.value = false
-  }
-}
+onBeforeUnmount(() => {
+  if (unsubscribe) { unsubscribe(); unsubscribe = null }
+})
 
 /* ---------- helpers ---------- */
+const formatModelName = (model) => {
+  if (!model) return ''
+  return model.replace(/_?\d{8}$/, '')
+}
+
+const asRatio = (x) => {
+  if (x == null || Number.isNaN(x)) return null;
+  // if |x| > 1.2 we assume it's already a % number (e.g., 58 or -79.23), convert to ratio
+  return Math.abs(x) > 0.5 ? (x / 100) : x;
+};
+const signedPct = (p) => {
+  const r = asRatio(p);
+  if (r == null) return '—';
+  const sign = r >= 0 ? '+' : '−';
+  return `${sign}${(Math.abs(r) * 100).toFixed(2)}%`;
+};
+
+const fmtRate = (r) => {
+  const rr = asRatio(r);
+  if (rr == null) return '—';
+  return `${(rr * 100).toFixed(0)}%`;
+};
 const fmtUSD = (n) => (n ?? 0).toLocaleString(undefined, { style: 'currency', currency: 'USD', maximumFractionDigits: 2 })
 const signedMoney = (n) => `${n >= 0 ? '+' : '−'}${fmtUSD(Math.abs(n))}`
-const signedPct = (p) => `${(p >= 0 ? '+' : '−')}${Math.abs(p * 100).toFixed(2)}%`
+const fmtSharpe = (s) => (s == null ? '—' : Number(s).toFixed(2))
 const score = (row) => (typeof row.balance === 'number' ? row.balance : -Infinity)
 const profitOf = (c) => (typeof c?.profitUsd === 'number' ? c.profitUsd : ((c?.balance ?? 0) - 100000))
 
-/* rows for selected asset (exclude vanilla/vinilla) - only show long_only strategy like leaderboard */
+/* rows for selected asset (exclude vanilla/vinilla) - only show long_only */
 const filteredRows = computed(() =>
   (rowsRef.value || []).filter(r => {
     if (r.asset !== asset.value) return false
-    if (r.strategy !== 'long_only') return false  // 只显示 Aggressive Long Only 策略
+    if (r.strategy !== 'long_only') return false
     const name = (r?.agent_name || '').toLowerCase()
     return !EXCLUDED_AGENT_NAMES.has(name)
   })
@@ -197,26 +283,25 @@ const winners = computed(() => {
     const cur = byAgent.get(k)
     if (!cur || score(r) > score(cur)) byAgent.set(k, r)
   }
-  const result = [...byAgent.values()]
-  console.log('[Live winners from leaderboard]', result.map(r => ({
-    agent: r.agent_name,
-    model: r.model,
-    strategy: r.strategy,
-    balance: r.balance
-  })))
-  return result
+  return [...byAgent.values()]
 })
 
 /* chart selections */
-const winnersForChart = computed(() =>
-  winners.value.map(w => ({
+const winnersForChart = computed(() => {
+  // Get max end_date for current asset from all rows
+  const rowsForAsset = (rowsRef.value || []).filter(r => r.asset === asset.value)
+  const endDates = rowsForAsset.map(r => r.end_date).filter(Boolean)
+  const maxEndDate = endDates.length ? endDates.sort().pop() : null
+  
+  return winners.value.map(w => ({
     agent_name:  w.agent_name,
     asset:       w.asset,
     model:       w.model,
     strategy:    w.strategy,
-    decision_ids: Array.isArray(w.decision_ids) ? w.decision_ids : undefined
+    decision_ids: Array.isArray(w.decision_ids) ? w.decision_ids : undefined,
+    end_date:    maxEndDate || w.end_date  // use max end_date from all rows for this asset
   }))
-)
+})
 
 /* stable key to avoid identity churn */
 const winnersKey = computed(() => {
@@ -224,7 +309,7 @@ const winnersKey = computed(() => {
   return sels.map(s => `${s.agent_name}|${s.asset}|${s.model}|${s.strategy}|${(s.decision_ids?.length||0)}`).join('||')
 })
 
-/* ---------- PERF (chart parity) ---------- */
+/* ---------- PERF ---------- */
 async function buildSeq(sel) {
   const { agent_name: agentName, asset: assetCode, model } = sel
   const ids = Array.isArray(sel.decision_ids) ? sel.decision_ids : []
@@ -234,19 +319,18 @@ async function buildSeq(sel) {
 
   seq.sort((a,b) => (a.date > b.date ? 1 : -1))
 
-  // 如果使用了 decision_ids，数据已经预过滤，不需要再次处理
-  // 只有在没有 decision_ids 时才需要过滤交易日
+  // if using decision_ids, data is already prefiltered
   if (!ids.length) {
     const isCrypto = assetCode === 'BTC' || assetCode === 'ETH'
     if (!isCrypto) seq = await filterRowsToNyseTradingDays(seq)
-    
+
     const cutoff = ASSET_CUTOFF[assetCode]
     if (cutoff) {
       const t0 = new Date(cutoff + 'T00:00:00Z')
       seq = seq.filter(r => new Date(r.date + 'T00:00:00Z') >= t0)
     }
   }
-  
+
   return seq
 }
 
@@ -255,28 +339,43 @@ async function computeEquities(sel) {
   if (!seq.length) return null
 
   const cfg = (STRATEGIES || []).find(s => s.id === sel.strategy) || { strategy: 'long_only', tradingMode: 'aggressive', fee: 0.0005 }
-  
-  console.log('[Live computeEquities]', {
-    agent: sel.agent_name,
-    model: sel.model,
-    strategy: sel.strategy,
-    config: cfg,
-    seqLength: seq.length,
-    decision_ids: sel.decision_ids?.length || 'none'
-  })
 
   const stratY = computeStrategyEquity(seq, 100000, cfg.fee, cfg.strategy, cfg.tradingMode) || []
   const bhY    = computeBuyHoldEquity(seq, 100000) || []
   const lastIdx = Math.min(stratY.length, bhY.length) - 1
   if (lastIdx < 0) return null
-  
-  console.log('[Live computeEquities result]', {
-    agent: sel.agent_name,
-    stratLast: stratY[lastIdx],
-    bhLast: bhY[lastIdx]
-  })
 
-  return { date: seq[lastIdx].date, stratLast: stratY[lastIdx], bhLast: bhY[lastIdx] }
+  // quality metrics
+  const isCrypto = sel.asset === 'BTC' || sel.asset === 'ETH'
+  const metrics = calculateMetricsFromSeries(stratY, isCrypto ? 'crypto' : 'stock') || {}
+  const { sharpe_ratio: sharpe, max_drawdown: maxDrawdown, total_return: totalReturnPct } = metrics
+
+  // win rate / trades
+  let winRate = null
+  let trades = null
+  try {
+    const r = computeWinRate(seq, cfg.strategy, cfg.tradingMode) || {}
+    winRate = r.winRate
+    trades = r.trades
+  } catch {}
+
+  // approximate "days" from sequence
+  let days = 0
+  try {
+    const start = new Date(seq[0].date)
+    const end = new Date(seq[lastIdx].date)
+    days = Math.max(1, Math.round((end - start) / 86400000) + 1)
+  } catch {}
+
+  return {
+    date: seq[lastIdx]?.date || sel.end_date,  // prefer actual sequence date over leaderboard end_date
+    stratLast: stratY[lastIdx],
+    bhLast: bhY[lastIdx],
+    sharpe,
+    maxDrawdown,            // as fraction (e.g., -0.053)
+    winRate, trades, days,
+    totalReturnPct          // for future use if needed
+  }
 }
 
 /* build cards whenever winners/asset change */
@@ -294,7 +393,28 @@ watch(
 
       if (!perfs.length) { cards.value = []; return }
 
-      // Buy & Hold card from the asset’s aligned BH series
+      // Get max date directly from Supabase for this asset
+      const currentAsset = asset.value
+      let maxEndDate = null
+      try {
+        const { data, error } = await supabase
+          .from('trading_decisions')
+          .select('date')
+          .eq('asset', currentAsset)
+          .order('date', { ascending: false })
+          .limit(1)
+        
+        if (!error && data && data.length > 0) {
+          maxEndDate = data[0].date
+          console.log('[LiveView] Direct Supabase query - Asset:', currentAsset, 'Max date:', maxEndDate)
+        } else {
+          console.log('[LiveView] Supabase query failed or no data:', error)
+        }
+      } catch (e) {
+        console.error('[LiveView] Error querying Supabase:', e)
+      }
+
+      // Buy & Hold first
       const first = perfs[0]
       const assetCode = first.sel.asset
       const bhCard = {
@@ -303,17 +423,22 @@ watch(
         title: 'Buy & Hold',
         subtitle: assetCode,
         balance: first.perf.bhLast,
-        date: first.perf.date,
+        date: maxEndDate || first.perf.date,  // Use max date from Supabase
         logo: ASSET_ICONS[assetCode] || null,
         profitUsd: (first.perf.bhLast ?? 0) - 100000,
         gapUsd: 0,
         gapPct: 0,
-        isWinner: false,
         rank: null,
-        barPct: 0
+        barPct: 0,
+        // BH quality fields are neutral/na
+        sharpe: null,
+        maxDrawdown: null,
+        winRate: null,
+        trades: null,
+        days: null
       }
 
-      // Agent cards (gap vs BH)
+      // Agents
       const agentCards = perfs.map(({ sel, perf }) => {
         const gapUsd = perf.stratLast - perf.bhLast
         const gapPct = perf.bhLast > 0 ? (perf.stratLast / perf.bhLast - 1) : 0
@@ -322,13 +447,17 @@ watch(
           key: `agent|${sel.agent_name}|${sel.model}`,
           kind: 'agent',
           title: sel.agent_name,
-          subtitle: sel.model,
+          subtitle: formatModelName(sel.model),
           balance: perf.stratLast,
-          date: perf.date,
+          date: maxEndDate || perf.date,  // Use max date from Supabase
           logo: AGENT_LOGOS[sel.agent_name] || null,
           gapUsd, gapPct,
           profitUsd,
-          isWinner: false,
+          sharpe: perf.sharpe,
+          maxDrawdown: perf.maxDrawdown,
+          winRate: perf.winRate,
+          trades: perf.trades,
+          days: perf.days,
           rank: null,
           barPct: 0
         }
@@ -338,162 +467,217 @@ watch(
       agentCards.sort((a,b) => (b.balance ?? -Infinity) - (a.balance ?? -Infinity))
       agentCards.forEach((c, i) => { c.rank = i + 1 })
 
-      // Winner flag
-      if (agentCards.length) agentCards[0].isWinner = true
-
       // Perf bar width scaled to max |gapUsd|
       const maxAbsGap = Math.max(1, ...agentCards.map(c => Math.abs(c.gapUsd ?? 0)))
       agentCards.forEach(c => { c.barPct = Math.max(3, Math.round((Math.abs(c.gapUsd ?? 0) / maxAbsGap) * 100)) })
 
-      // Build final list: BH first, then agents in rank order
+      // BH first, then top agents (limit 5)
       cards.value = [bhCard, ...agentCards].slice(0,5)
-    } catch (e) {
-      console.error('LiveView: compute cards failed', e)
-      cards.value = []
     } finally { computing = false }
   },
   { immediate: true }
 )
 </script>
 
+<!-- Global brand tokens (unscoped to ensure cascade) -->
+<!-- Paste this inside your Live view component as the full style -->
 <style scoped>
-.live { max-width: 1280px; margin: 0 auto; padding: 12px 20px 28px; background: #ffffff; padding-bottom: 56px; }
-
-/* toolbar */
-.toolbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 0 10px; background: #ffffff; color: #0f172a; border-bottom: 1px solid #E7ECF3; }
-.toolbar__right { display: flex; align-items: center; gap: 12px; }
-.refresh-btn { 
-  height: 30px; 
-  width: 30px; 
-  border-radius: 10px; 
-  border: 1px solid #D7DDE7; 
-  background: #ffffff; 
-  color: #0f172a; 
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+/* ======= Page ======= */
+.live{
+  max-width:1280px;
+  margin:0 auto;
+  padding:0 24px 64px;
+  color:var(--ink-900);
+  background: radial-gradient(ellipse at 30% -10%, #fdfdfd 0%, var(--surface-2) 60%, var(--surface-0) 100%);
+  margin-top: -40px;
+}
+
+/* ======= About Banner ======= */
+.about-banner{
+  padding: 8px 24px 16px 56px;
+  background: var(--surface-0);
+  margin: 0 -24px 0 -24px;
+}
+.about-text{
+  margin: 0;
+  font-size: 15px;
+  font-weight: 500;
+  color: #6b7280;
+  letter-spacing: 0.01em;
+  line-height: 1.5;
+}
+.about-text .paper-link{
+  color: rgb(var(--ama-start));
+  font-weight: 700;
+  text-decoration: none;
   transition: all 0.2s ease;
+  border-bottom: 1px solid transparent;
 }
-.refresh-btn:hover:not(:disabled) { 
-  background: #f8f9fa; 
-  border-color: #0f172a;
+.about-text .paper-link:hover{
+  color: rgb(var(--ama-end));
+  border-bottom-color: rgb(var(--ama-end));
 }
-.refresh-btn:disabled { 
-  opacity: 0.5; 
-  cursor: not-allowed; 
+
+/* ======= Toolbar (assets + mode) ======= */
+.toolbar{
+  position:sticky; top:0; z-index:10;
+  display:flex; align-items:center; justify-content:space-between; gap:16px;
+  padding:12px 0 14px; background:var(--surface-0);
+  border-bottom:2px solid rgba(var(--ama-end), .15);
+  backdrop-filter: blur(10px);
 }
-.refresh-btn i.spinning {
-  animation: spin 1s linear infinite;
+.toolbar__right{ display:flex; align-items:center; gap:12px; }
+
+/* ======= Asset tabs ======= */
+.asset-tabs{
+  display:inline-flex; gap:6px; padding:4px;
+  border-radius:12px; background:var(--surface-0);
+  border:1px solid var(--bd-subtle); box-shadow:0 2px 8px rgba(0,0,0,.04);
 }
-@keyframes spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
+.asset-tab{
+  min-width:54px; height:32px; padding:0 10px;
+  border-radius:8px; border:1px solid transparent;
+  background:transparent; color:var(--ink-900);
+  font-weight:800; letter-spacing:.02em; cursor:pointer; transition:all .2s ease;
 }
-.mode__btn { height: 30px; min-width: 40px; padding: 0 10px; border-radius: 10px; border: 1px solid #D7DDE7; background: #ffffff; font-weight: 700; color: #0f172a; }
-.mode__btn.is-active { background: #0f172a; color: #ffffff; border-color: #0f172a; }
-
-/* panels */
-.panel { background: #ffffff; border: 1px solid #E7ECF3; border-radius: 14px; }
-.panel--chart { padding: 10px 10px 2px; }
-.panel--cards { padding: 12px; }
-
-/* empty */
-.empty { padding: 14px; border: 1px dashed #D7DDE7; border-radius: 12px; color: #6B7280; font-size: .92rem; background: #ffffff; }
-
-/* GRID */
-.cards-grid-f1 { display: grid; gap: 12px; grid-template-columns: repeat(5, minmax(0,1fr)); }
-@media (max-width: 1400px) { .cards-grid-f1 { grid-template-columns: repeat(4, minmax(0,1fr)); } }
-@media (max-width: 1100px) { .cards-grid-f1 { grid-template-columns: repeat(3, minmax(0,1fr)); } }
-@media (max-width: 900px)  { .cards-grid-f1 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
-@media (max-width: 640px)  { .cards-grid-f1 { grid-template-columns: 1fr; } }
-
-/* F1 Card */
-.card-f1 {
-  position: relative;
-  display: grid;
-  grid-template-rows: auto auto auto; /* head, net, bottom */
-  gap: 10px;
-  padding: 16px 16px 18px;
-  min-height: 210px;
-  border-radius: 14px;
-  background: linear-gradient(145deg,#ffffff,#fafbfd 55%,#ffffff 100%);
-  border: 1px solid #E7ECF3;
-  box-shadow: 0 1px 2px rgba(16,24,40,.03), 0 4px 12px rgba(16,24,40,.04);
-  color: #0f172a;
-  transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease;
+.asset-tab:hover{ color:rgb(var(--ama-end)); border-color:rgba(var(--ama-end), .28); }
+.asset-tab.is-active{
+  color:#fff; border:none;
+  background: linear-gradient(90deg, rgb(var(--ama-start)), rgb(var(--ama-end)));
+  box-shadow: 0 0 0 1px rgba(var(--ama-end), .22), 0 8px 18px rgba(var(--ama-end), .22);
 }
-.card-f1:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(16,24,40,.08); border-color: #D9E2EF; }
-.card-f1.winner { border-color: #16a34a; box-shadow: 0 0 0 2px rgba(22,163,74,.18), 0 10px 26px rgba(16,24,40,.10); }
-.card-f1.bh { border-style: dashed; opacity: 1; }
-
-/* Rank / Crown */
-.rank { 
-  position: absolute; 
-  top: 10px; 
-  left: 12px; 
-  font-weight: 900; 
-  font-size: 18px; 
-  color: rgba(15,23,42,.30); 
-  letter-spacing: .04em;
+
+/* ======= Mode switch ($ / %) ======= */
+.mode-switch{
+  display:inline-grid; grid-template-columns:1fr 1fr;
+  border-radius:12px; overflow:hidden;
+  border:1px solid var(--bd-subtle); background:var(--surface-0);
+  box-shadow:0 2px 8px rgba(0,0,0,.04);
+}
+.mode-switch__btn{
+  height:32px; min-width:44px; padding:0 12px;
+  font-weight:800; letter-spacing:.02em; border:none; background:transparent;
+  color:var(--ink-900); cursor:pointer; transition:all .2s ease;
 }
-.rank.bh-badge { 
-  font-size: 12px; 
-  background: rgba(15,23,42,.06); 
-  padding: 2px 6px; 
-  border-radius: 6px; 
-  color: #4b5563;
+.mode-switch__btn:not(.is-active):hover{ color:rgb(var(--ama-end)); background:#f8fafc; }
+.mode-switch__btn.is-active{
+  color:#fff;
+  background: linear-gradient(90deg, rgb(var(--ama-start)), rgb(var(--ama-end)));
+  box-shadow: inset 0 -1px 0 rgba(255,255,255,.2);
 }
-.crown { 
-  position: absolute; 
-  top: 12px; 
-  right: 12px; 
-  font-size: 18px; 
-  filter: drop-shadow(0 1px 1px rgba(0,0,0,.12));
+
+/* ======= Panels ======= */
+.panel{ background:var(--surface-0); border:1px solid var(--bd-soft); border-radius:16px; margin-top:16px; }
+.panel--chart{ padding:10px; }
+.panel--cards{ padding:16px; }
+
+/* ======= Empty State ======= */
+.empty{
+  padding:20px; border:1px dashed var(--bd-soft); border-radius:12px;
+  color:var(--ink-600); font-size:.95rem; background:var(--surface-0); text-align:center;
 }
 
-/* Head */
-.head { 
-  display: grid; 
-  grid-template-columns: 40px minmax(0,1fr); 
-  align-items: center; 
-  gap: 10px;
+/* ======= Grid ======= */
+.cards-grid-f1{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); }
+
+/* ======= Cards (Tournament) ======= */
+.card-f1{
+  position:relative;
+  display:grid; grid-template-rows:auto auto auto auto auto; gap:10px;
+  padding:18px 18px 20px; min-height:230px; border-radius:16px;
+  background: linear-gradient(145deg, var(--surface-0), var(--surface-2) 75%, var(--surface-0) 100%);
+  border:1px solid rgba(0,0,0,.05);
+  box-shadow:0 2px 10px rgba(var(--ama-start), .05), 0 6px 20px rgba(var(--ama-end), .08);
+  color:var(--ink-900); transition: transform .25s ease, box-shadow .25s ease;
+}
+.card-f1:hover{ transform: translateY(-2px); box-shadow:0 10px 28px rgba(0,0,0,.08); }
+.card-f1.bh{ border-style:dashed; }
+
+/* Podium metals (attach .gold/.silver/.bronze) */
+.card-f1.gold{
+  border-color:var(--gold);
+  box-shadow:0 0 0 1px rgba(212,175,55,.32), 0 10px 28px rgba(212,175,55,.18);
+}
+.card-f1.silver{
+  border-color:var(--silver);
+  box-shadow:0 0 0 1px rgba(192,192,192,.28), 0 10px 28px rgba(192,192,192,.14);
+}
+.card-f1.bronze{
+  border-color:var(--bronze);
+  box-shadow:0 0 0 1px rgba(205,127,50,.28), 0 10px 28px rgba(205,127,50,.14);
+}
+
+/* Optional thin ribbon bar on podium cards */
+.podium-ribbon{ position:absolute; top:0; left:0; right:0; height:6px; border-top-left-radius:16px; border-top-right-radius:16px; }
+.card-f1.gold   .podium-ribbon{ background: linear-gradient(90deg, #f6e27a, var(--gold)); }
+.card-f1.silver .podium-ribbon{ background: linear-gradient(90deg, #e9eef2, var(--silver)); }
+.card-f1.bronze .podium-ribbon{ background: linear-gradient(90deg, #f0c6a1, var(--bronze)); }
+
+/* ======= Card: Head ======= */
+.head{ display:grid; grid-template-columns:44px minmax(0,1fr); align-items:center; gap:12px; }
+.logo{ width:44px; height:44px; border-radius:12px; background:#f3f4f6; display:grid; place-items:center; overflow:hidden; border:1px solid #E5E7EB; }
+.logo img{ width:100%; height:100%; object-fit:contain; }
+.logo__fallback{ width:60%; height:60%; border-radius:6px; background:#e5e7eb; }
+.names{ min-width:0; }
+.agent{ font-size:16px; font-weight:900; letter-spacing:.02em; text-transform:uppercase; color:var(--ink-900); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
+.model{ font-size:11px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; color:#64748b; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
+
+/* ======= KPIs (Net Value + P&L) ======= */
+.kpis{ display:grid; grid-template-columns:1fr auto; align-items:end; gap:12px; }
+.kpi__label{ font-size:12px; color:var(--ink-600); }
+.kpi__value{ font-size: clamp(18px, 2.2vw, 25px); font-weight:700; letter-spacing:-.01em; color:var(--ink-900); }
+.kpi__pill{
+  display:inline-block; font-size:12px; font-weight:800; padding:4px 10px; border-radius:999px;
+  border:1px solid var(--bd-soft); background:#F6F8FB; color:var(--ink-900);
+}
+.kpi__pill.pos{ color:var(--pos-fg); background:var(--pos-bg); border-color:var(--pos-br); }
+.kpi__pill.neg{ color:var(--neg-fg); background:var(--neg-bg); border-color:var(--neg-br); }
+
+/* ======= Quality (Sharpe, MaxDD) ======= */
+.quality{ display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:2px 0 0; }
+.qitem{ display:flex; align-items:baseline; gap:8px; }
+.qitem__label{ font-size:12px; color:var(--ink-600); }
+.qitem__value{ font-size:14px; font-weight:800; color:var(--ink-900); }
+.qitem__value.strong{ color:var(--pos-fg); }
+.qitem__value.dd-pos{ color:var(--pos-fg); }    /* small drawdown */
+.qitem__value.dd-mid{ color:var(--ink-900); }   /* medium drawdown */
+.qitem__value.dd-neg{ color:var(--neg-fg); }    /* large drawdown */
+
+/* ======= Stats (WinRate, Trades, Days) ======= */
+.stats{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; font-size:12px; color:var(--ink-700); }
+.stat{ display:flex; align-items:center; justify-content:space-between; background:#F8FAFD; border:1px solid var(--bd-soft); border-radius:10px; padding:6px 8px; }
+.stat__label{ color:var(--ink-600); }
+.stat__val{ font-weight:800; color:var(--ink-900); }
+.stat__val.pos{ color:var(--pos-fg); }
+.stat__val.neg{ color:var(--neg-fg); }
+
+/* ======= Bar vs B&H ======= */
+.bar{ height:6px; border-radius:999px; background:#F2F4F8; overflow:hidden; border:1px solid var(--bd-soft); margin:2px 0 8px; }
+.bar span{ display:block; height:100%; width:var(--bar, 40%); transition:width .5s ease;
+  background: linear-gradient(90deg,#16a34a,#22c55e);
+}
+.bar.neg span{ background: linear-gradient(90deg,#ef4444,#dc2626); }
+
+/* ======= Meta (Gap vs B&H chip + EOD) ======= */
+.meta{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:8px; }
+.chip{
+  display:inline-flex; align-items:center; gap:6px;
+  font-size:12px; font-weight:800; padding:4px 8px; border-radius:999px;
+  background:#F6F8FB; color:var(--ink-900); border:1px solid var(--bd-soft);
 }
-.logo { width: 40px; height: 40px; border-radius: 10px; background: #f3f4f6; display: grid; place-items: center; overflow: hidden; border: 1px solid #E7ECF3; }
-.logo img { width: 100%; height: 100%; object-fit: contain; }
-.logo__fallback { width: 60%; height: 60%; border-radius: 6px; background: #e5e7eb; }
-.names { min-width: 0; }
-.agent { font-size: 16px; font-weight: 900; letter-spacing: .02em; text-transform: uppercase; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.model { font-size: 11px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-
-/* Net row */
-.net { display: grid; grid-template-columns: 1fr auto; align-items: end; }
-.net__label { font-size: 12px; color: #6b7280; }
-.net__value { font-size: clamp(18px, 2.2vw, 25px); font-weight: 700; letter-spacing: -.01em; color: #0f172a; }
-
-/* Bar vs B&H */
-.bar { height: 6px; border-radius: 999px; background: #F2F4F8; overflow: hidden; border: 1px solid #E7ECF3; }
-.bar span { display: block; height: 100%; background: linear-gradient(90deg,#16a34a,#22c55e); width: var(--bar, 40%); transition: width .5s ease; }
-.bar.neg span { background: linear-gradient(90deg,#ef4444,#dc2626); }
-
-/* Bottom */
-.bottom { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: end; gap: 8px; }
-.chips{
-  grid-column:1 / -1;               /* span both columns on row 1 */
-  grid-row:1;
-  display:inline-flex;
-  gap:8px;
-  flex-wrap:wrap;                   /* chips can wrap within row 1 */
+.chip.pos{ color:var(--pos-fg); background:var(--pos-bg); border-color:var(--pos-br); }
+.chip.neg{ color:var(--neg-fg); background:var(--neg-bg); border-color:var(--neg-br); }
+.chip__label{ opacity:.8; }
+.chip__value{ font-variant-numeric: tabular-nums; }
+.eod{ font-size:12px; color:var(--ink-600); }
+
+/* ======= Responsive ======= */
+@media (max-width: 900px){
+  .stats{ grid-template-columns:1fr 1fr; }
 }
-.eod{
-  grid-column:2;                    /* row 2, right column */
-  grid-row:2;
-  justify-self:end;                 /* align to the right */
-  /* allow wrapping if needed; remove nowrap */
-  font-size:12px;
-  color:#6b7280;
+@media (max-width: 640px){
+  .cards-grid-f1{ grid-template-columns:1fr; }
+  .kpi__value{ font-size:22px; }
+  .about-text{ font-size: 14px; }
 }
-.chip { font-size: 12px; font-weight: 800; padding: 4px 8px; border-radius: 999px; background: #F6F8FB; color: #0f172a; border: 1px solid #E7ECF3; }
-.chip.pos { color: #0e7a3a; background: #E9F7EF; border-color: #d7f0e0; }
-.chip.neg { color: #B91C1C; background: #FBEAEA; border-color: #F3DADA; }
 </style>

src/views/RequestView.vue

@@ -0,0 +1,641 @@
+<template>
+  <div class="arena-page">
+    <!-- ============== ASSETS ============== -->
+    <section class="section">
+      <header class="section-head">
+        <h2 class="section-title">
+          <span class="ama-gradient">Assets in the Arena</span>
+        </h2>
+      </header>
+
+      <!-- Time Window Slider -->
+      <div class="time-window-control">
+        <div class="time-window-header">
+          <span class="time-window-label">Time Window:</span>
+          <span class="time-window-range">{{ formatDate(dateRange[0]) }} - {{ formatDate(dateRange[1]) }}</span>
+        </div>
+        <Slider v-model="dateRange" :min="0" :max="maxDateIndex" :range="true" class="time-slider" />
+      </div>
+
+      <div class="grid grid-assets-4">
+        <article v-for="a in assets" :key="a.code" class="card asset-card">
+          <div class="asset-head">
+            <div class="asset-logo-wrap">
+              <img :src="a.icon" :alt="a.code" class="asset-logo" />
+            </div>
+            <div class="asset-name">
+              <div class="asset-code truncate">{{ a.code }}</div>
+              <div class="asset-full truncate" :title="a.name">{{ a.name }}</div>
+            </div>
+            <span class="type-badge" :class="'type-' + a.type.toLowerCase()">{{ a.type }}</span>
+          </div>
+
+          <div class="asset-body">
+            <div class="spark-wrap">
+              <MiniEchart :data="a.month" :color="a.sparkColor" />
+            </div>
+
+            <div class="asset-stats">
+              <div class="stat">
+                <div class="stat-label">Return</div>
+                <div class="stat-value mono" :class="a.change1m >= 0 ? 'pos' : 'neg'">
+                  {{ signedPct(a.change1m) }}
+                </div>
+              </div>
+              <div class="stat">
+                <div class="stat-label">Volatility</div>
+                <div class="stat-value mono">{{ formatPct(a.volatility) }}</div>
+              </div>
+              <div class="stat">
+                <div class="stat-label">Runs</div>
+                <div class="stat-value mono">{{ a.runs }}</div>
+              </div>
+              <div class="stat">
+                <div class="stat-label">Agents</div>
+                <div class="stat-value mono">{{ a.agents }}</div>
+              </div>
+              <div class="stat">
+                <div class="stat-label">Days</div>
+                <div class="stat-value mono">{{ a.days }}</div>
+              </div>
+            </div>
+          </div>
+
+          <div class="asset-foot">
+            <div class="asset-foot-row">
+              <span class="muted">EOD</span>
+              <span class="mono">{{ a.eod || '—' }}</span>
+            </div>
+          </div>
+        </article>
+      </div>
+
+      <div class="cta-row">
+        <a :href="assetFormUrl" target="_blank" rel="noopener" class="btn-cta link-btn">
+          <i class="pi pi-plus mr-2"></i> Vote to Add Asset
+        </a>
+      </div>
+    </section>
+
+    
+    <!-- ============== AGENTS (no performance) ============== -->
+    <section class="section">
+      <header class="section-head">
+        <h2 class="section-title">
+          <span class="ama-gradient">Agents in the Arena</span>
+        </h2>
+        <p class="section-sub">Tournament cards • GitHub &amp; arXiv links (no performance)</p>
+      </header>
+
+      <div class="grid grid-agents">
+        <article v-for="g in agents" :key="g.name" class="card agent-card">
+          <div class="agent-top">
+            <div class="agent-badge" :style="{ borderColor: g.color }">
+              <div class="agent-ring" :style="{ background: g.color }"></div>
+              <img :src="g.logo" :alt="g.name" class="agent-logo" />
+            </div>
+            <div class="agent-title">
+              <div class="agent-name truncate" :title="g.name">{{ g.name }}</div>
+              <div class="agent-links">
+                <a :href="g.github" target="_blank" rel="noopener" class="link">GitHub</a>
+                <span class="dot">•</span>
+                <a :href="g.arxiv" target="_blank" rel="noopener" class="link">arXiv</a>
+              </div>
+            </div>
+          </div>
+        </article>
+      </div>
+
+      <!-- Info-only integration guide --> 
+      <div class="card integration-guide">
+        <h3>Agent Integration Guide</h3>
+
+        <div class="guide-section">
+          <h4>Quick Summary</h4>
+          <p><strong>What you need:</strong> Create an API that receives market data and returns trading decisions.</p>
+        </div>
+
+        <div class="guide-section">
+          <h4>Input (What we send to your agent)</h4>
+<pre class="code-block">{
+  "date": "2025-10-24",
+  "price": {"BTC": 67890.50},
+  "news": {"BTC": ["Bitcoin news 1...", "Bitcoin news 2...", "Bitcoin news 3..."]},
+  "model": "gpt-4o",
+  "history_price": {
+    "BTC": [
+      {"date": "2025-10-14", "price": 65000.00},
+      {"date": "2025-10-15", "price": 65500.00},
+      {"date": "2025-10-16", "price": 66000.00},
+      {"date": "2025-10-17", "price": 66200.00},
+      {"date": "2025-10-18", "price": 66500.00},
+      {"date": "2025-10-21", "price": 66800.00},
+      {"date": "2025-10-22", "price": 67000.00},
+      {"date": "2025-10-23", "price": 67500.00}
+    ]
+  }
+}</pre>
+          <p class="note"><strong>Note:</strong> <code>history_price</code> contains the last 10 days of price data (if available).</p>
+        </div>
+
+        <div class="guide-section">
+          <h4>Output (What we expect from your agent)</h4>
+<pre class="code-block">{
+  "recommended_action": "BUY"
+}</pre>
+          <p class="note"><strong>Valid actions:</strong> <code>"BUY"</code>, <code>"SELL"</code>, or <code>"HOLD"</code> (uppercase)</p>
+        </div>
+      </div>
+
+      <!-- Submit Agent button (Google Form link) -->
+      <div class="cta-row">
+        <a :href="agentFormUrl" target="_blank" rel="noopener" class="btn-cta link-btn">
+          <i class="pi pi-send mr-2"></i> Submit Agent (Google Form)
+        </a>
+      </div>
+    </section>
+
+    <!-- ============== PAPER & CITATION ============== -->
+    <section class="section paper-section">
+      <header class="section-head">
+        <h2 class="section-title">
+          <span class="ama-gradient">Paper & Citation</span>
+        </h2>
+      </header>
+      
+      <div class="paper-card">
+        <div class="paper-content">
+          <div class="paper-description">
+            For more information, please check our released paper in arXiv. And remember to cite us if you find it useful!
+          </div>
+          <div class="paper-links">
+            <a href="https://arxiv.org/pdf/2510.11695" target="_blank" rel="noopener" class="paper-link">
+              <i class="pi pi-file-pdf"></i> Read Paper on arXiv
+            </a>
+          </div>
+          
+          <div class="citation-box">
+            <div class="citation-header">
+              <span class="citation-label">BibTeX Citation</span>
+              <button @click="copyCitation" class="copy-btn" :class="{ 'copied': citationCopied }">
+                <i :class="citationCopied ? 'pi pi-check' : 'pi pi-copy'"></i>
+                {{ citationCopied ? 'Copied!' : 'Copy' }}
+              </button>
+            </div>
+            <pre class="citation-text">@article{qian2025agents,
+  title={When Agents Trade: Live Multi-Market Trading Benchmark for LLM Agents},
+  author={Qian, Lingfei and Peng, Xueqing and Wang, Yan and Zhang, Vincent Jim and He, Huan and Smith, Hanley and Han, Yi and He, Yueru and Li, Haohang and Cao, Yupeng and others},
+  journal={arXiv preprint arXiv:2510.11695},
+  year={2025}
+}</pre>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+import { dataService } from '../lib/dataService'
+import { getAllDecisions } from '../lib/dataCache'
+import { readAllRawDecisions } from '../lib/idb'
+import { filterRowsToNyseTradingDays } from '../lib/marketCalendar'
+import { computeBuyHoldEquity } from '../lib/perf'
+import MiniEchart from '../components/MiniEchart.vue'
+
+export default {
+  name: 'RequestView',
+  components: { MiniEchart },
+  data() {
+    return {
+      assetFormUrl: 'https://docs.google.com/forms/d/e/1FAIpQLSdA4bZau8X2gEWjxRY3oFolcGa4-s4_D4F5Ky1uh48hnwMkVA/viewform?usp=dialog',
+      agentFormUrl: 'https://docs.google.com/forms/d/e/1FAIpQLSdwaheaiVYcBQVNOEyUD6ERTLXD6fKrOgGPKkjTrG9zi_feqw/viewform?usp=publish-editor',
+
+      // dynamic from dataService
+      assets: [],
+      
+      // time window control
+      allDates: [],
+      dateRange: [0, 0],
+      maxDateIndex: 0,
+
+      // agents (no performance fields shown)
+      agents: [
+        {
+          name: 'InvestorAgent',
+          github: 'https://github.com/felis33/INVESTOR-BENCH',
+          arxiv: 'https://arxiv.org/abs/2412.18174',
+          strategy: 'Aggressive Long Only',
+          focus: 'BTC, MSFT',
+          color: 'linear-gradient(90deg,#ffd700,#eab308)',
+          logo: new URL('../assets/images/agents_images/investor.png', import.meta.url).href
+        },
+        {
+          name: 'TradeAgent',
+          github: 'https://github.com/TauricResearch/TradingAgents',
+          arxiv: 'https://arxiv.org/abs/2412.20138',
+          strategy: 'Aggressive Long Only',
+          focus: 'BTC, ETH',
+          color: 'linear-gradient(90deg,#4338ca,#6d28d9)',
+          logo: new URL('../assets/images/agents_images/tradeagent.png', import.meta.url).href
+        },
+        {
+          name: 'DeepFundAgent',
+          github: 'https://github.com/HKUSTDial/DeepFund',
+          arxiv: 'https://arxiv.org/abs/2505.11065',
+          strategy: 'Aggressive Long Only',
+          focus: '—',
+          color: 'linear-gradient(90deg,#0ea5e9,#22d3ee)',
+          logo: new URL('../assets/images/agents_images/deepfund.png', import.meta.url).href
+        },
+        {
+          name: 'HedgeFundAgent',
+          github: 'https://github.com/virattt/ai-hedge-fund',
+          arxiv: 'https://github.com/virattt/ai-hedge-fund',
+          strategy: 'Aggressive Long Only',
+          focus: 'BMRN, TSLA',
+          color: 'linear-gradient(90deg,#f43f5e,#ef4444)',
+          logo: new URL('../assets/images/agents_images/hedgefund.png', import.meta.url).href
+        }
+      ],
+
+      // live state
+      rowsRef: [],
+      allDecisions: [],
+      unsubscribe: null,
+
+      ASSET_ICONS: {
+        BTC: new URL('../assets/images/assets_images/BTC.png', import.meta.url).href,
+        ETH: new URL('../assets/images/assets_images/ETH.png', import.meta.url).href,
+        MSFT: new URL('../assets/images/assets_images/MSFT.png', import.meta.url).href,
+        BMRN: new URL('../assets/images/assets_images/BMRN.png', import.meta.url).href,
+        TSLA: new URL('../assets/images/assets_images/TSLA.png', import.meta.url).href
+      },
+      
+      // Paper & Citation
+      citationCopied: false
+    }
+  },
+
+  mounted() {
+    this.unsubscribe = dataService.subscribe((state) => {
+      this.rowsRef = Array.isArray(state.tableRows) ? state.tableRows : []
+      this.rebuildAssets().catch(() => {})
+    })
+    this.rowsRef = Array.isArray(dataService.tableRows) ? dataService.tableRows : []
+    if (!dataService.loaded && !dataService.loading) {
+      dataService.load(false).catch(e => console.error('RequestView: load failed', e))
+    }
+
+    // warm decision cache
+    this.allDecisions = getAllDecisions() || []
+    if (!this.allDecisions.length) {
+      readAllRawDecisions().then(cached => { if (cached?.length) this.allDecisions = cached })
+    }
+    this.rebuildAssets().catch(() => {})
+  },
+
+  beforeUnmount() {
+    if (this.unsubscribe) { this.unsubscribe(); this.unsubscribe = null }
+  },
+
+  methods: {
+    signedPct(p) {
+      const v = Number(p || 0) * 100
+      const s = v >= 0 ? '+' : '−'
+      return `${s}${Math.abs(v).toFixed(2)}%`
+    },
+    fmtUSD(n) {
+      return (n ?? 0).toLocaleString(undefined, { style: 'currency', currency: 'USD', maximumFractionDigits: 2 })
+    },
+    formatPct(p) {
+      const v = Number(p || 0) * 100
+      return `${Math.abs(v).toFixed(2)}%`
+    },
+    formatDate(index) {
+      if (!this.allDates || index < 0 || index >= this.allDates.length) return '—'
+      return this.allDates[index]
+    },
+    calculateVolatility(values) {
+      if (!Array.isArray(values) || values.length < 2) return 0
+      
+      // Calculate returns
+      const returns = []
+      for (let i = 1; i < values.length; i++) {
+        if (values[i-1] > 0) {
+          returns.push((values[i] - values[i-1]) / values[i-1])
+        }
+      }
+      
+      if (returns.length === 0) return 0
+      
+      // Calculate mean
+      const mean = returns.reduce((sum, r) => sum + r, 0) / returns.length
+      
+      // Calculate variance
+      const variance = returns.reduce((sum, r) => sum + Math.pow(r - mean, 2), 0) / returns.length
+      
+      // Return standard deviation (volatility)
+      return Math.sqrt(variance)
+    },
+
+    /* ===== Dynamic assets built from B&H equity ===== */
+    async buildAssetSeq(assetCode) {
+      let seq = (this.allDecisions || []).filter(r => r.asset === assetCode)
+      seq.sort((a,b) => (a.date > b.date ? 1 : -1))
+      const isCrypto = assetCode === 'BTC' || assetCode === 'ETH'
+      if (!isCrypto) {
+        try { seq = await filterRowsToNyseTradingDays(seq) } catch {}
+      }
+      return seq
+    },
+    sampleSeries(values, n = 12) {
+      if (!Array.isArray(values) || !values.length) return []
+      if (values.length <= n) return values.slice(-n)
+      const step = (values.length - 1) / (n - 1)
+      const out = []
+      for (let i = 0; i < n; i++) out.push(values[Math.round(i * step)])
+      return out
+    },
+    pctChange(a, b) {
+      if (a == null || b == null || a === 0) return 0
+      return (b / a) - 1
+    },
+
+    async rebuildAssets() {
+      console.log('[RequestView] rebuildAssets called, allDecisions:', this.allDecisions?.length || 0, 'rowsRef:', this.rowsRef?.length || 0)
+      const assetsInRows = Array.from(new Set((this.rowsRef || []).map(r => r.asset))).filter(Boolean)
+      console.log('[RequestView] Assets in rows:', assetsInRows)
+      if (!assetsInRows.length) { this.assets = []; return }
+
+      // Initialize all dates from first asset to set up slider
+      if (this.allDates.length === 0 && assetsInRows.length > 0) {
+        const firstSeq = await this.buildAssetSeq(assetsInRows[0])
+        if (firstSeq.length > 0) {
+          this.allDates = firstSeq.map(r => r.date).filter(d => d >= '2025-08-01')
+          this.maxDateIndex = this.allDates.length - 1
+          this.dateRange = [0, this.maxDateIndex]
+        }
+      }
+
+      const cards = []
+      for (const code of assetsInRows) {
+        const fullSeq = await this.buildAssetSeq(code)
+        console.log('[RequestView] Asset', code, 'full seq length:', fullSeq?.length || 0)
+        if (!fullSeq.length) continue
+
+        // Filter sequence based on date range
+        const startDate = this.allDates[this.dateRange[0]] || '2025-08-01'
+        const endDate = this.allDates[this.dateRange[1]] || this.allDates[this.allDates.length - 1]
+        const seq = fullSeq.filter(r => r.date >= startDate && r.date <= endDate)
+        console.log('[RequestView] Asset', code, 'filtered seq length:', seq?.length || 0, 'from', startDate, 'to', endDate)
+        if (!seq.length) continue
+
+        // B&H equity as normalized series for spark and change
+        let bh = []
+        try { bh = computeBuyHoldEquity(seq, 100000) || [] } catch { bh = [] }
+        const lastIdx = bh.length - 1
+        console.log('[RequestView] Asset', code, 'bh length:', bh?.length || 0)
+        if (lastIdx < 0) continue
+
+        // Get end_date from actual sequence data (most accurate)
+        const rowsForAsset = (this.rowsRef || []).filter(r => r.asset === code)
+        const lastDate = seq[lastIdx]?.date || null
+        
+        const spark = this.sampleSeries(bh.map(v => v), 12)
+        console.log('[RequestView] Asset', code, 'spark data:', spark)
+        const change1m = this.pctChange(spark[0], spark[spark.length - 1])
+        
+        // Calculate volatility
+        const volatility = this.calculateVolatility(bh)
+
+        // trading day span
+        let days = 0
+        try {
+          const start = new Date(seq[0].date)
+          const end = new Date(seq[lastIdx].date)
+          days = Math.max(1, Math.round((end - start) / 86400000) + 1)
+        } catch {}
+
+        // runs & agents from rows table
+        const runs = rowsForAsset.length
+        const agents = new Set(rowsForAsset.map(r => r.agent_name)).size
+
+        cards.push({
+          code,
+          name: code,
+          type: (code === 'BTC' || code === 'ETH') ? 'Crypto' : 'Stock',
+          icon: this.ASSET_ICONS[code] || null,
+          month: spark,
+          sparkColor: (code === 'BTC') ? '#f59e0b' : (code === 'ETH' ? '#6366f1' : '#22c55e'),
+          change1m,
+          volatility,
+          runs, agents, days,
+          eod: lastDate
+        })
+      }
+
+      // Stable display order
+      const order = ['BTC','ETH','MSFT','BMRN','TSLA']
+      cards.sort((a,b) => (order.indexOf(a.code) - order.indexOf(b.code)))
+      this.assets = cards
+    },
+    
+    async copyCitation() {
+      const citation = `@article{qian2025agents,
+  title={When Agents Trade: Live Multi-Market Trading Benchmark for LLM Agents},
+  author={Qian, Lingfei and Peng, Xueqing and Wang, Yan and Zhang, Vincent Jim and He, Huan and Smith, Hanley and Han, Yi and He, Yueru and Li, Haohang and Cao, Yupeng and others},
+  journal={arXiv preprint arXiv:2510.11695},
+  year={2025}
+}`
+      try {
+        await navigator.clipboard.writeText(citation)
+        this.citationCopied = true
+        setTimeout(() => {
+          this.citationCopied = false
+        }, 2000)
+      } catch (err) {
+        console.error('Failed to copy citation:', err)
+      }
+    }
+  },
+  
+  watch: {
+    dateRange() {
+      // Rebuild assets when date range changes
+      this.rebuildAssets().catch(() => {})
+    }
+  }
+}
+</script>
+
+<style scoped>
+/* ===== AMA Core ===== */
+.ama-gradient{
+  background: linear-gradient(90deg, rgb(0,0,185), #7b2cbf, #d946ef, rgb(240,0,15));
+  -webkit-background-clip: text; background-clip: text; color: transparent;
+}
+
+.arena-page{
+  max-width:1280px; margin:0 auto;
+  padding:16px 20px 120px; background:#fff;
+}
+
+/* ===== Helpers ===== */
+.truncate{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.clamp-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
+.w-full{ width:100%; }
+
+/* ===== Time Window Control ===== */
+.time-window-control{ margin:12px 0 16px; padding:16px; background:#F6F8FB; border:1px solid #E7ECF3; border-radius:12px; }
+.time-window-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
+.time-window-label{ font-weight:700; font-size:14px; color:#0f172a; }
+.time-window-range{ font-size:13px; color:#64748b; font-family: ui-monospace, monospace; }
+.time-slider{ margin-top:8px; }
+
+/* ===== Sections ===== */
+.section{ margin-top:18px; }
+.section-head{ margin-bottom:8px; }
+.section-title{ font-size:clamp(1.2rem, 1.2rem + 0.4vw, 1.6rem); font-weight:800; letter-spacing:-0.02em; display:inline-block; }
+.section-sub{ margin-top:4px; color:#6b7280; }
+
+/* ===== Grids ===== */
+.grid{ display:grid; gap:14px; min-width:0; }
+.grid-assets-4{ grid-template-columns: repeat(4, minmax(0,1fr)); }
+.grid-agents{ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
+@media (max-width: 1200px){ .grid-assets-4{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
+@media (max-width: 900px){ .grid-assets-4{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
+@media (max-width: 620px){ .grid-assets-4{ grid-template-columns: 1fr; } }
+
+/* ===== Card base ===== */
+.card{
+  background:#ffffff; border:1px solid #E7ECF3; border-radius:14px;
+  box-shadow:0 1px 2px rgba(16,24,40,.03), 0 4px 12px rgba(16,24,40,.04);
+  transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease;
+  min-width:0;
+}
+.card:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(16,24,40,.08); border-color:#D9E2EF; }
+
+/* ===== Assets ===== */
+.asset-card{ padding:12px; display:flex; flex-direction:column; gap:10px; }
+.asset-head{ display:grid; grid-template-columns:44px 1fr auto; gap:10px; align-items:center; min-width:0; }
+.asset-logo-wrap{ width:44px; height:44px; border-radius:12px; background:#f3f4f6; display:grid; place-items:center; border:1px solid #E7ECF3; overflow:hidden; }
+.asset-logo{ width:70%; height:70%; object-fit:contain; }
+.asset-name{ min-width:0; }
+.asset-code{ font-weight:900; color:#0f172a; letter-spacing:.02em; }
+.asset-full{ font-size:12px; color:#64748b; }
+.type-badge{
+  border-radius:999px; padding:4px 8px; font-size:12px; font-weight:700;
+  border:1px solid #E7ECF3; background:#F6F8FB; color:#0f172a; white-space:nowrap;
+}
+.type-crypto{ background:#f8fbff; border-color:#e0e7ff; color:#1e3a8a; }
+.type-stock { background:#f6fffb; border-color:#d9fbe6; color:#064e3b; }
+
+.asset-body{ display:flex; flex-direction:column; gap:10px; }
+.spark-wrap{ width:100%; height:90px; overflow:hidden; border-radius:8px; background:#F6F8FB; border:1px solid #E7ECF3; position:relative; }
+.asset-stats{ display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:6px; }
+.stat{ background:#F6F8FB; border:1px solid #E7ECF3; border-radius:8px; padding:4px 6px; min-width:0; display:flex; flex-direction:column; align-items:center; text-align:center; }
+.stat-label{ font-size:9px; color:#6b7280; margin-bottom:2px; white-space:nowrap; }
+.stat-value{ font-weight:700; font-size:11.5px; color:#0f172a; line-height:1.2; }
+.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }
+.muted{ color:#6b7280; }
+
+.asset-desc{ margin-top:2px; font-size:12.5px; line-height:1.45; }
+
+.asset-foot{ margin-top:4px; }
+.asset-bar{ height:6px; border-radius:999px; border:1px solid #E7ECF3; background:#F2F4F8; position:relative; overflow:hidden; }
+.asset-bar::after{ content:''; position:absolute; left:0; top:0; height:100%; width:var(--pct,0%); background:linear-gradient(90deg,#16a34a,#22c55e); }
+.asset-foot-row{ margin-top:6px; display:flex; align-items:center; justify-content:space-between; color:#6b7280; }
+
+/* ===== Agents (perf-free) ===== */
+.agent-card{ padding:12px; display:flex; flex-direction:column; gap:8px; }
+.agent-top{ display:grid; grid-template-columns:52px 1fr; gap:10px; align-items:center; min-width:0; }
+.agent-badge{ width:52px; height:52px; border-radius:16px; border:2px solid #e5e7eb; position:relative; display:grid; place-items:center; overflow:hidden; }
+.agent-ring{ position:absolute; inset:0; opacity:.18; }
+.agent-logo{ width:70%; height:70%; object-fit:contain; position:relative; z-index:1; }
+.agent-title{ min-width:0; }
+.agent-name{ font-weight:900; letter-spacing:.02em; color:#0f172a; text-transform:uppercase; }
+.agent-links{ display:flex; align-items:center; gap:8px; color:#64748b; flex-wrap:wrap; min-width:0; }
+.link{ color:#334155; font-weight:600; text-decoration:none; }
+.link:hover{ color:#0f172a; text-decoration:underline; }
+.dot{ color:#94a3b8; }
+.agent-foot{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:2px; }
+.chip{ display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px; font-size:12px; font-weight:700; background:#F6F8FB; color:#0f172a; border:1px solid #E7ECF3; white-space:nowrap; }
+.chip-outline{ background:#fff; }
+
+/* ===== Integration Guide ===== */
+.integration-guide{ margin-top:12px; padding:16px; }
+.integration-guide h3{ font-weight:800; font-size:1.1rem; color:#0f172a; margin-bottom:8px; }
+.guide-section{ margin:10px 0; }
+.code-block{ background:#0b1020; color:#E6EDF3; border-radius:10px; padding:12px; overflow:auto; font-size:12.5px; line-height:1.5; }
+.note{ color:#334155; margin-top:6px; }
+
+/* ===== Buttons ===== */
+.cta-row{ margin-top:12px; display:flex; justify-content:center; }
+.link-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; text-decoration:none; }
+.btn-cta{ background:linear-gradient(90deg, rgb(0,0,185), #7b2cbf, #d946ef, rgb(240,0,15)); border:none; color:#fff; font-weight:800; letter-spacing:.02em; padding:10px 16px; border-radius:12px; cursor:pointer; }
+.mr-2{ margin-right:.5rem; }
+.pos{ color:#0e7a3a; } .neg{ color:#B91C1C; }
+
+/* ===== Paper & Citation ===== */
+.paper-section{ margin-top:40px; margin-bottom:40px; }
+.paper-card{
+  background:#ffffff; border:1px solid #E7ECF3; border-radius:14px;
+  box-shadow:0 1px 2px rgba(16,24,40,.03), 0 4px 12px rgba(16,24,40,.04);
+  padding:24px;
+}
+.paper-content{ display:flex; flex-direction:column; gap:20px; }
+.paper-description{
+  font-size:1.05rem; font-weight:500; color:#334155;
+  line-height:1.6; margin:0;
+}
+.paper-links{ display:flex; gap:12px; align-items:center; }
+.paper-link{
+  display:inline-flex; align-items:center; gap:8px;
+  padding:10px 18px; background:#f3f4f6; border:1px solid #E7ECF3;
+  border-radius:10px; text-decoration:none; color:#0f172a;
+  font-weight:700; font-size:14px; transition:all .2s ease;
+}
+.paper-link:hover{
+  background:#e5e7eb; border-color:#cbd5e1; transform:translateY(-1px);
+  box-shadow:0 4px 12px rgba(16,24,40,.08);
+}
+.paper-link i{ font-size:16px; }
+
+.citation-box{
+  background:#f8fafc; border:1px solid #e2e8f0;
+  border-radius:12px; padding:16px;
+}
+.citation-header{
+  display:flex; justify-content:space-between; align-items:center;
+  margin-bottom:12px;
+}
+.citation-label{
+  font-weight:700; font-size:14px; color:#0f172a;
+}
+.copy-btn{
+  display:inline-flex; align-items:center; gap:6px;
+  padding:6px 12px; background:#ffffff; border:1px solid #cbd5e1;
+  border-radius:8px; cursor:pointer; font-weight:600;
+  font-size:13px; color:#334155; transition:all .2s ease;
+}
+.copy-btn:hover{
+  background:#f1f5f9; border-color:#94a3b8;
+}
+.copy-btn.copied{
+  background:#dcfce7; border-color:#86efac; color:#166534;
+}
+.copy-btn i{ font-size:12px; }
+
+.citation-text{
+  background:#0b1020; color:#E6EDF3; border-radius:8px;
+  padding:14px; overflow:auto; font-family: ui-monospace, monospace;
+  font-size:13px; line-height:1.6; margin:0; white-space:pre;
+}
+
+@media (max-width: 620px){
+  .paper-card{ padding:16px; }
+  .paper-description{ font-size:0.95rem; }
+  .citation-header{ flex-direction:column; align-items:flex-start; gap:8px; }
+}
+</style>