added faq and tooltip

components/leaderboard_components.py

@@ -0,0 +1,457 @@
+"""
+Reusable components for the Agent Leaderboard v2
+These are stable components that don't change frequently
+"""
+
+def get_chart_colors():
+    return {
+        "Private": "#1098F7",  # Airglow Blue for Proprietary
+        "Open source": "#58BC82",  # Green for Open source
+        "performance_bands": ["#DCFCE7", "#FEF9C3", "#FEE2E2"],
+        "text": "#F5F6F7",
+        "background": "#01091A",
+        "grid": (0, 0, 0, 0.1),  # RGBA tuple for grid
+    }
+
+
+def get_rank_badge(rank):
+    """Generate HTML for rank badge with appropriate styling"""
+    badge_styles = {
+        1: ("1st", "linear-gradient(145deg, #ffd700, #ffc400)", "#000"),
+        2: ("2nd", "linear-gradient(145deg, #9ca3af, #787C7E)", "#fff"),
+        3: ("3rd", "linear-gradient(145deg, #CD7F32, #b36a1d)", "#fff"),
+    }
+
+    if rank in badge_styles:
+        label, gradient, text_color = badge_styles[rank]
+        return f"""
+            <div style="
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+                min-width: 48px;
+                padding: 4px 12px;
+                background: {gradient};
+                color: {text_color};
+                border-radius: 6px;
+                font-weight: 600;
+                font-size: 0.9em;
+                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+            ">
+                {label}
+            </div>
+        """
+    return f"""
+        <div style="
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            min-width: 28px;
+            color: #a1a1aa;
+            font-weight: 500;
+        ">
+            {rank}
+        </div>
+    """
+
+
+def get_type_badge(model_type):
+    """Generate HTML for model type badge"""
+    colors = get_chart_colors()
+    colors = {"Private": colors["Private"], "Open source": colors["Open source"]}
+    bg_color = colors.get(model_type, "#4F46E5")
+    return f"""
+        <div style="
+            display: inline-flex;
+            align-items: center;
+            padding: 4px 8px;
+            background: {bg_color};
+            color: white;
+            border-radius: 4px;
+            font-size: 0.85em;
+            font-weight: 500;
+        ">
+            {model_type}
+        </div>
+    """
+
+
+def get_output_type_badge(output_type):
+    """Generate HTML for output type badge"""
+    if output_type == "Reasoning":
+        bg_color = "#9333ea"  # Purple for reasoning
+    else:
+        bg_color = "#6b7280"  # Gray for normal
+    
+    return f"""
+        <div style="
+            display: inline-flex;
+            align-items: center;
+            gap: 4px;
+            padding: 4px 8px;
+            background: {bg_color};
+            color: white;
+            border-radius: 4px;
+            font-size: 0.85em;
+            font-weight: 500;
+        ">
+            {output_type}
+        </div>
+    """
+
+
+def get_score_bar(score):
+    """Generate HTML for score bar with gradient styling and tooltip"""
+    width = score * 100
+    return f"""
+        <div style="display: flex; align-items: center; gap: 12px; width: 100%;">
+            <div style="
+                flex-grow: 1;
+                height: 8px;
+                background: rgba(245, 246, 247, 0.1);
+                border-radius: 4px;
+                overflow: hidden;
+                max-width: 200px;
+            ">
+                <div style="
+                    width: {width}%;
+                    height: 100%;
+                    background: linear-gradient(90deg, #E35454, #1098F7);
+                    border-radius: 4px;
+                    transition: width 0.3s ease;
+                "></div>
+            </div>
+            <span style="
+                font-family: 'SF Mono', monospace;
+                font-weight: 600;
+                color: #F5F6F7;
+                min-width: 60px;
+            ">{score:.3f}</span>
+        </div>
+    """
+
+
+def get_metric_tooltip(metric):
+    """Return tooltip text for different metrics"""
+    tooltips = {
+        "Avg AC": "Action Completion (AC): Measures how well the agent accomplishes user goals and completes tasks successfully. Higher is better (0-1 scale).",
+        "Avg TSQ": "Tool Selection Quality (TSQ): Evaluates the accuracy of selecting the right tools and using them with correct parameters. Higher is better (0-1 scale).",
+        "Avg Total Cost": "Average cost per conversation session in USD, including all API calls and processing. Lower is better.",
+        "Avg Session Duration": "Average time taken to complete a full conversation session from start to finish, measured in seconds. Lower is generally better.",
+        "Avg Turns": "Average number of back-and-forth exchanges needed to complete a task. Lower typically indicates more efficient task completion.",
+        "Banking AC": "Action Completion score specific to banking domain tasks.",
+        "Banking TSQ": "Tool Selection Quality score specific to banking domain tasks.",
+        "Healthcare AC": "Action Completion score specific to healthcare domain tasks.",
+        "Healthcare TSQ": "Tool Selection Quality score specific to healthcare domain tasks.",
+        "Insurance AC": "Action Completion score specific to insurance domain tasks.",
+        "Insurance TSQ": "Tool Selection Quality score specific to insurance domain tasks.",
+        "Investment AC": "Action Completion score specific to investment domain tasks.",
+        "Investment TSQ": "Tool Selection Quality score specific to investment domain tasks.",
+        "Telecom AC": "Action Completion score specific to telecom domain tasks.",
+        "Telecom TSQ": "Tool Selection Quality score specific to telecom domain tasks.",
+    }
+    return tooltips.get(metric, "")
+
+
+def get_responsive_styles():
+    """Return responsive CSS styles for mobile devices"""
+    return """
+    <style>
+    /* Enhanced mobile responsiveness */
+    @media (max-width: 768px) {
+        /* Stack grid layouts vertically on mobile */
+        .insight-card-grid,
+        .metric-card-grid {
+            grid-template-columns: 1fr !important;
+            gap: 12px !important;
+        }
+        
+        /* Adjust table for mobile */
+        .v2-styled-table {
+            font-size: 12px !important;
+        }
+        
+        .v2-styled-table th,
+        .v2-styled-table td {
+            padding: 8px 6px !important;
+        }
+        
+        /* Hide less important columns on mobile */
+        .v2-styled-table th:nth-child(8),
+        .v2-styled-table td:nth-child(8),
+        .v2-styled-table th:nth-child(9),
+        .v2-styled-table td:nth-child(9) {
+            display: none !important;
+        }
+        
+        /* Make score bars more compact */
+        .score-cell {
+            min-width: 120px !important;
+        }
+        
+        /* Adjust domain selector for mobile */
+        .domain-radio .wrap {
+            flex-direction: column !important;
+            gap: 8px !important;
+        }
+        
+        .domain-radio label {
+            min-width: 100% !important;
+            max-width: 100% !important;
+        }
+        
+        /* Compact filter controls on mobile */
+        .compact-filter-row {
+            flex-direction: column !important;
+        }
+        
+        .compact-radio .wrap > label {
+            font-size: 0.7rem !important;
+            padding: 4px 8px !important;
+        }
+        
+        /* Adjust navigation buttons */
+        .nav-buttons-container {
+            flex-direction: column !important;
+            gap: 8px !important;
+        }
+        
+        .nav-link-button {
+            width: 100% !important;
+            justify-content: center !important;
+        }
+        
+        /* Header adjustments */
+        h1 {
+            font-size: 2rem !important;
+        }
+        
+        h2 {
+            font-size: 1.5rem !important;
+        }
+        
+        h3 {
+            font-size: 1.2rem !important;
+        }
+        
+        /* Card padding adjustments */
+        .dark-container {
+            padding: 16px !important;
+        }
+        
+        .info-box {
+            padding: 12px !important;
+        }
+        
+        /* Chart container adjustments */
+        .chart-container {
+            overflow-x: auto !important;
+            -webkit-overflow-scrolling: touch !important;
+        }
+        
+        /* Badge adjustments */
+        .badge-row {
+            flex-wrap: wrap !important;
+        }
+        
+        .badge {
+            font-size: 0.65rem !important;
+            padding: 3px 8px !important;
+        }
+    }
+    
+    @media (max-width: 480px) {
+        /* Ultra-compact layout for very small screens */
+        .v2-styled-table {
+            font-size: 10px !important;
+        }
+        
+        /* Show only essential columns */
+        .v2-styled-table th:nth-child(n+6),
+        .v2-styled-table td:nth-child(n+6) {
+            display: none !important;
+        }
+        
+        /* Keep only Rank, Model, Type, and main scores visible */
+        .v2-styled-table th:nth-child(5),
+        .v2-styled-table td:nth-child(5) {
+            display: table-cell !important;
+        }
+        
+        /* Reduce all padding */
+        * {
+            padding-left: 8px !important;
+            padding-right: 8px !important;
+        }
+        
+        /* Stack all buttons vertically */
+        .header-action-button {
+            width: 90% !important;
+            margin: 0 auto !important;
+        }
+    }
+    
+    /* Tooltip improvements for mobile */
+    @media (hover: none) and (pointer: coarse) {
+        /* Show tooltips on tap for mobile */
+        .tooltip-trigger {
+            position: relative;
+            cursor: help;
+        }
+        
+        .tooltip-trigger:active .tooltip-content,
+        .tooltip-trigger:focus .tooltip-content {
+            display: block !important;
+        }
+    }
+    </style>
+    """
+
+
+def get_faq_section():
+    """Return the FAQ section HTML"""
+    return """
+    <div class="dark-container" style="margin-top: 40px; margin-bottom: 40px;">
+        <div class="section-header">
+            <span class="section-icon" style="color: var(--accent-primary);">❓</span>
+            <h3 style="margin: 0; color: var(--text-primary); font-size: 1.5rem; font-family: 'Geist', sans-serif; font-weight: 700;">
+                Frequently Asked Questions
+            </h3>
+        </div>
+        
+        <div style="margin-top: 24px;">
+            <!-- FAQ Item 1 -->
+            <details class="faq-item" style="margin-bottom: 16px; background: var(--bg-secondary); border-radius: 12px; padding: 16px; border: 1px solid var(--border-subtle);">
+                <summary style="cursor: pointer; font-weight: 600; color: var(--text-primary); font-size: 1rem; display: flex; align-items: center; gap: 8px;">
+                    <span style="color: var(--accent-primary);"></span> Does the methodology favor GPT-4.1 since it uses GPT-4.1 to simulate users and tools, so GPT-4.1 ranks itself highest.
+                </summary>
+                <div style="margin-top: 12px; padding-left: 28px; color: var(--text-secondary); line-height: 1.6;">
+                    <strong style="color: var(--accent-secondary);"></strong> GPT's top ranking isn't due to simulator bias. Scenarios are pre-generated with Claude and fixed for all models. The user simulator drives goal-based conversations, and the tool simulator provides synthetic responses without influencing outcomes. Evaluation uses Claude as a judge, which should theoretically favor Claude (per sycophancy theory), but GPTs still lead.
+                </div>
+            </details>
+            
+            <!-- FAQ Item 2 -->
+            <details class="faq-item" style="margin-bottom: 16px; background: var(--bg-secondary); border-radius: 12px; padding: 16px; border: 1px solid var(--border-subtle);">
+                <summary style="cursor: pointer; font-weight: 600; color: var(--text-primary); font-size: 1rem; display: flex; align-items: center; gap: 8px;">
+                    <span style="color: var(--accent-primary);"></span> Why does a specific model rank lower when our internal results show otherwise?
+                </summary>
+                <div style="margin-top: 12px; padding-left: 28px; color: var(--text-secondary); line-height: 1.6;">
+                    <strong style="color: var(--accent-secondary);"></strong> Performance varies by prompt, task, complexity, and domain. Our evaluations kept prompts identical across models for consistency. Different evaluation methodologies and task sets can lead to different rankings.
+                </div>
+            </details>
+            
+            <!-- FAQ Item 3 -->
+            <details class="faq-item" style="margin-bottom: 16px; background: var(--bg-secondary); border-radius: 12px; padding: 16px; border: 1px solid var(--border-subtle);">
+                <summary style="cursor: pointer; font-weight: 600; color: var(--text-primary); font-size: 1rem; display: flex; align-items: center; gap: 8px;">
+                    <span style="color: var(--accent-primary);"></span> Why is my favorite model missing?
+                </summary>
+                <div style="margin-top: 12px; padding-left: 28px; color: var(--text-secondary); line-height: 1.6;">
+                    <strong style="color: var(--accent-secondary);"></strong> We were not able to add certain models either because they were not in our initial list or had issues while running the experiments, such as improper tool call output format. We skipped some of the models which performed poorly in our leaderboard v1.
+                </div>
+            </details>
+            
+            <!-- FAQ Item 4 -->
+            <details class="faq-item" style="margin-bottom: 16px; background: var(--bg-secondary); border-radius: 12px; padding: 16px; border: 1px solid var(--border-subtle);">
+                <summary style="cursor: pointer; font-weight: 600; color: var(--text-primary); font-size: 1rem; display: flex; align-items: center; gap: 8px;">
+                    <span style="color: var(--accent-primary);"></span> We were surprised Gemini 2.5 Pro ranked lower. Our internal benchmarks show it's excellent for code research and AI code review tasks.
+                </summary>
+                <div style="margin-top: 12px; padding-left: 28px; color: var(--text-secondary); line-height: 1.6;">
+                    <strong style="color: var(--accent-secondary);"></strong> Results differ because this leaderboard evaluates support agent scenarios only, not coding ones. Different models excel at different types of tasks, and this benchmark focuses specifically on business support agent use cases across banking, healthcare, insurance, investment, and telecom domains.
+                </div>
+            </details>
+            
+            <!-- About Metrics -->
+            <div style="margin-top: 32px; padding: 20px; background: linear-gradient(145deg, rgba(227, 84, 84, 0.05) 0%, rgba(16, 152, 247, 0.05) 100%); border-radius: 12px; border: 1px solid var(--border-default);">
+                <h4 style="color: var(--text-primary); margin-top: 0; margin-bottom: 16px; font-size: 1.2rem; font-family: 'Geist', sans-serif; font-weight: 600; display: flex; align-items: center; gap: 8px;">
+                    <span style="font-size: 1.3rem;">📊</span>
+                    Understanding the Metrics
+                </h4>
+                
+                <div style="display: grid; gap: 16px;">
+                    <div>
+                        <h5 style="color: var(--accent-primary); margin: 0 0 8px 0; font-size: 1rem;">Action Completion (AC)</h5>
+                        <p style="color: var(--text-secondary); margin: 0; line-height: 1.5;">
+                            A score from 0 to 1 measuring how successfully the agent completes the user's requested tasks. This evaluates whether the agent achieves the intended goals, follows instructions accurately, and provides complete solutions. Higher scores indicate better task completion.
+                        </p>
+                    </div>
+                    
+                    <div>
+                        <h5 style="color: var(--accent-primary); margin: 0 0 8px 0; font-size: 1rem;">Tool Selection Quality (TSQ)</h5>
+                        <p style="color: var(--text-secondary); margin: 0; line-height: 1.5;">
+                            A score from 0 to 1 evaluating how well the agent selects and uses the appropriate tools for each task. This includes choosing the right tool, using correct parameters, and proper sequencing of tool calls. Higher scores indicate better tool utilization.
+                        </p>
+                    </div>
+                    
+                    <div>
+                        <h5 style="color: var(--accent-primary); margin: 0 0 8px 0; font-size: 1rem;">Domain-Specific Performance</h5>
+                        <p style="color: var(--text-secondary); margin: 0; line-height: 1.5;">
+                            Models are tested across five business domains: Banking, Healthcare, Insurance, Investment, and Telecom. Each domain has specific scenarios and requirements that test the agent's ability to handle industry-specific tasks and terminology.
+                        </p>
+                    </div>
+                    
+                    <div>
+                        <h5 style="color: var(--accent-primary); margin: 0 0 8px 0; font-size: 1rem;">Efficiency Metrics</h5>
+                        <p style="color: var(--text-secondary); margin: 0; line-height: 1.5;">
+                            • <strong>Cost:</strong> Total API cost per session in USD<br>
+                            • <strong>Duration:</strong> Time to complete tasks in seconds<br>
+                            • <strong>Turns:</strong> Number of exchanges to reach resolution<br>
+                            These metrics help identify the most cost-effective and efficient models for production use.
+                        </p>
+                    </div>
+                </div>
+                
+                <div style="margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border-subtle);">
+                    <p style="color: var(--text-secondary); margin: 0; font-size: 0.9rem; line-height: 1.5;">
+                        <strong>Learn More:</strong> For detailed methodology and evaluation criteria, visit the 
+                        <a href="https://galileo.ai/blog/agent-leaderboard-v2" target="_blank" style="color: var(--accent-primary); text-decoration: none;">
+                            official blog post ↗
+                        </a>
+                        or explore the 
+                        <a href="https://github.com/rungalileo/agent-leaderboard" target="_blank" style="color: var(--accent-primary); text-decoration: none;">
+                            GitHub repository ↗
+                        </a>
+                    </p>
+                </div>
+            </div>
+        </div>
+        
+        <style>
+            .faq-item {
+                transition: all 0.3s ease;
+            }
+            
+            .faq-item:hover {
+                border-color: var(--accent-primary) !important;
+                box-shadow: 0 4px 12px rgba(227, 84, 84, 0.1);
+            }
+            
+            .faq-item summary::-webkit-details-marker {
+                display: none;
+            }
+            
+            .faq-item summary::before {
+                content: '▶';
+                display: inline-block;
+                margin-right: 8px;
+                transition: transform 0.3s ease;
+                color: var(--accent-secondary);
+            }
+            
+            .faq-item[open] summary::before {
+                transform: rotate(90deg);
+            }
+            
+            .faq-item summary:hover {
+                color: var(--accent-primary) !important;
+            }
+        </style>
+    </div>
+    """
+
+
+# Column mapping for sorting
+SORT_COLUMN_MAP = {
+    "Avg Action Completion": "Avg AC",
+    "Avg Tool Selection Quality": "Avg TSQ", 
+    "Avg Session Cost": "Avg Total Cost",
+}

styles/leaderboard_styles.py

@@ -0,0 +1,379 @@
+"""
+CSS styles for the Agent Leaderboard v2
+This file contains all the styling that doesn't change frequently
+"""
+
+def get_leaderboard_css():
+    """Return the complete CSS for the leaderboard"""
+    return """
+    <style>
+    /* Import Geist fonts */
+    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+    
+    @font-face {
+        font-family: 'Geist';
+        src: url('https://raw.githubusercontent.com/vercel/geist-font/main/packages/next/dist/fonts/geist-sans/Geist-Variable.woff2') format('woff2');
+        font-weight: 100 900;
+        font-style: normal;
+    }
+    
+    @font-face {
+        font-family: 'Geist Mono';
+        src: url('https://raw.githubusercontent.com/vercel/geist-font/main/packages/next/dist/fonts/geist-mono/GeistMono-Variable.woff2') format('woff2');
+        font-weight: 100 900;
+        font-style: normal;
+    }
+    
+    /* Root variables for enhanced color scheme */
+    :root {
+        --bg-primary: #01091A;
+        --bg-secondary: rgba(245, 246, 247, 0.03);
+        --bg-card: rgba(245, 246, 247, 0.02);
+        --border-subtle: rgba(245, 246, 247, 0.08);
+        --border-default: rgba(245, 246, 247, 0.12);
+        --border-strong: rgba(245, 246, 247, 0.2);
+        --text-primary: #F5F6F7;
+        --text-secondary: #94A3B8;
+        --text-muted: #64748B;
+        --accent-primary: #E35454;
+        --accent-secondary: #1098F7;
+        --accent-tertiary: #F5F6F7;
+        --glow-primary: rgba(227, 84, 84, 0.4);
+        --glow-secondary: rgba(16, 152, 247, 0.4);
+        --glow-tertiary: rgba(245, 246, 247, 0.3);
+    }
+    
+    /* Global font and background */
+    .gradio-container {
+        font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Inter', sans-serif !important;
+        background: var(--bg-primary) !important;
+        color: var(--text-primary) !important;
+    }
+    
+    /* Headers and text */
+    h1, h2, h3, h4 {
+        color: var(--text-primary) !important;
+        font-weight: 700 !important;
+        font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif !important;
+    }
+    
+    p, span, div {
+        color: var(--text-primary) !important;
+        font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif !important;
+    }
+    
+    /* Labels and info text */
+    label {
+        color: var(--text-primary) !important;
+        font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif !important;
+    }
+    
+    .gr-box label {
+        color: var(--text-primary) !important;
+        font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif !important;
+    }
+    
+    .gr-info {
+        color: var(--text-secondary) !important;
+        font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif !important;
+    }
+    
+    /* Simple metric cards */
+    .metric-card {
+        background: var(--bg-card);
+        border-radius: 16px;
+        padding: 24px;
+        position: relative;
+        border: 1px solid var(--border-subtle);
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    
+    .metric-card:hover {
+        transform: translateY(-4px);
+        border-color: var(--accent-primary);
+        box-shadow: 0 8px 24px rgba(227, 84, 84, 0.2);
+    }
+    
+    /* Metric icon with glow effect */
+    .metric-icon {
+        width: 48px;
+        height: 48px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 2rem;
+        margin-bottom: 16px;
+        filter: drop-shadow(0 0 20px currentColor);
+        transition: all 0.3s ease;
+    }
+    
+    .metric-card:hover .metric-icon {
+        transform: scale(1.1);
+        filter: drop-shadow(0 0 30px currentColor);
+    }
+    
+    /* Table with tooltips */
+    .v2-styled-table th {
+        position: relative;
+    }
+    
+    .tooltip-trigger {
+        cursor: help;
+        text-decoration: underline;
+        text-decoration-style: dotted;
+        text-underline-offset: 2px;
+        text-decoration-color: var(--accent-secondary);
+    }
+    
+    .tooltip-content {
+        display: none;
+        position: absolute;
+        bottom: 100%;
+        left: 50%;
+        transform: translateX(-50%);
+        background: var(--bg-primary);
+        border: 1px solid var(--border-default);
+        border-radius: 8px;
+        padding: 12px;
+        max-width: 300px;
+        font-size: 0.85rem;
+        color: var(--text-secondary);
+        z-index: 1000;
+        white-space: normal;
+        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+        margin-bottom: 8px;
+    }
+    
+    .tooltip-trigger:hover .tooltip-content {
+        display: block;
+    }
+    
+    /* Enhanced radio buttons with primary accent */
+    input[type="radio"] {
+        background-color: var(--bg-secondary) !important;
+        border-color: var(--border-default) !important;
+    }
+    
+    input[type="radio"]:checked {
+        background-color: var(--accent-primary) !important;
+        border-color: var(--accent-primary) !important;
+        box-shadow: 0 0 10px var(--glow-primary) !important;
+    }
+    
+    /* Enhanced dropdown styling */
+    .dropdown {
+        border-color: var(--border-default) !important;
+        background: var(--bg-card) !important;
+        color: var(--text-primary) !important;
+        transition: all 0.2s ease !important;
+    }
+    
+    .dropdown:hover {
+        border-color: var(--accent-primary) !important;
+        box-shadow: 0 0 15px var(--glow-primary) !important;
+    }
+    
+    /* Enhanced table styling */
+    .dataframe {
+        background: var(--bg-card) !important;
+        border-radius: 16px !important;
+        overflow: hidden !important;
+        border: 1px solid var(--border-subtle) !important;
+        font-size: 15px !important;
+        max-height: 600px !important;
+        overflow-y: auto !important;
+        font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif !important;
+        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
+    }
+    
+    /* Button styling */
+    button {
+        background: var(--bg-card) !important;
+        color: var(--text-primary) !important;
+        border: 1px solid var(--border-default) !important;
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+    }
+    
+    button:hover {
+        transform: translateY(-2px) !important;
+        border-color: var(--accent-primary) !important;
+        box-shadow: 0 4px 16px rgba(227, 84, 84, 0.2) !important;
+    }
+    
+    /* Info boxes */
+    .info-box {
+        background: var(--bg-card);
+        border: 1px solid var(--border-subtle);
+        border-radius: 12px;
+        padding: 20px;
+        margin: 8px 0;
+        backdrop-filter: blur(10px);
+        position: relative;
+        overflow: hidden;
+        transition: all 0.3s ease;
+    }
+    
+    .info-box:hover {
+        border-color: var(--accent-primary);
+        box-shadow: 0 4px 20px var(--glow-primary);
+    }
+    
+    /* Dark containers */
+    .dark-container {
+        background: var(--bg-card);
+        border: 1px solid var(--border-subtle);
+        border-radius: 20px;
+        padding: 28px;
+        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+        backdrop-filter: blur(10px);
+        position: relative;
+        overflow: hidden;
+    }
+    
+    /* Section headers */
+    .section-header {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        margin-bottom: 24px;
+    }
+    
+    .section-icon {
+        filter: drop-shadow(0 0 12px currentColor);
+        transition: all 0.3s ease;
+    }
+    
+    /* Scrollbar styling */
+    ::-webkit-scrollbar {
+        width: 8px;
+        height: 8px;
+    }
+    
+    ::-webkit-scrollbar-track {
+        background: var(--bg-secondary);
+        border-radius: 4px;
+    }
+    
+    ::-webkit-scrollbar-thumb {
+        background: var(--accent-secondary);
+        border-radius: 4px;
+    }
+    
+    ::-webkit-scrollbar-thumb:hover {
+        background: var(--accent-primary);
+    }
+    
+    /* Pulse animation */
+    @keyframes pulse-glow {
+        0% { box-shadow: 0 0 0 0 var(--glow-primary); }
+        70% { box-shadow: 0 0 0 10px transparent; }
+        100% { box-shadow: 0 0 0 0 transparent; }
+    }
+    
+    .pulse {
+        animation: pulse-glow 2s infinite;
+    }
+    
+    /* Chart containers */
+    .chart-container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        margin: 0 auto;
+    }
+    
+    .chart-container > div {
+        width: 100%;
+        max-width: 1400px;
+        margin: 0 auto;
+    }
+    
+    /* Grid layouts for cards */
+    .insight-card-grid {
+        display: grid;
+        grid-template-columns: repeat(5, 1fr);
+        gap: 16px;
+    }
+    
+    .metric-card-grid {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 16px;
+    }
+    
+    /* Custom button container */
+    .custom-button-container {
+        text-align: center;
+        padding: 20px 0 10px 0;
+        margin-bottom: 10px;
+    }
+    
+    .header-action-button {
+        display: inline-block !important;
+        padding: 14px 28px !important;
+        background: linear-gradient(135deg, #E35454 0%, #C84545 100%) !important;
+        color: #FFFFFF !important;
+        text-decoration: none !important;
+        border-radius: 16px !important;
+        font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif !important;
+        font-weight: 700 !important;
+        font-size: 1.1rem !important;
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+        border: none !important;
+        cursor: pointer !important;
+        box-shadow: 0 8px 24px rgba(227, 84, 84, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3) !important;
+        position: relative !important;
+        overflow: hidden !important;
+        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
+    }
+    
+    .header-action-button:hover {
+        transform: translateY(-3px) !important;
+        box-shadow: 0 12px 32px rgba(227, 84, 84, 0.5), 0 8px 16px rgba(0, 0, 0, 0.4) !important;
+        background: linear-gradient(135deg, #F46464 0%, #D84F4F 100%) !important;
+        color: #FFFFFF !important;
+        text-decoration: none !important;
+    }
+    
+    /* Navigation buttons */
+    .nav-buttons-container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 16px;
+        flex-wrap: wrap;
+        margin: 24px 0;
+        padding: 0 20px;
+    }
+    
+    .nav-link-button {
+        display: inline-flex !important;
+        align-items: center !important;
+        gap: 8px !important;
+        padding: 12px 20px !important;
+        background: rgba(1, 9, 26, 0.8) !important;
+        color: #F5F6F7 !important;
+        text-decoration: none !important;
+        border-radius: 12px !important;
+        font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif !important;
+        font-weight: 600 !important;
+        font-size: 0.95rem !important;
+        transition: all 0.3s ease !important;
+        border: 2px solid rgba(245, 246, 247, 0.15) !important;
+        backdrop-filter: blur(10px) !important;
+        -webkit-backdrop-filter: blur(10px) !important;
+        position: relative !important;
+        overflow: hidden !important;
+        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
+    }
+    
+    .nav-link-button:hover {
+        transform: translateY(-3px) scale(1.02) !important;
+        border-color: #E35454 !important;
+        box-shadow: 0 8px 24px rgba(227, 84, 84, 0.3), 0 4px 12px rgba(0, 0, 0, 0.4) !important;
+        text-decoration: none !important;
+        color: #FFFFFF !important;
+    }
+    </style>
+    """

tabs/leaderboard_v2.py

@@ -2,141 +2,13 @@ import gradio as gr
 import pandas as pd
 import plotly.graph_objects as go
 
-# Utility functions (moved from utils.py)
-def get_chart_colors():
-    return {
-        "Private": "#1098F7",  # Airglow Blue for Proprietary
-        "Open source": "#58BC82",  # Green for Open source
-        "performance_bands": ["#DCFCE7", "#FEF9C3", "#FEE2E2"],
-        "text": "#F5F6F7",
-        "background": "#01091A",
-        "grid": (0, 0, 0, 0.1),  # RGBA tuple for grid
-    }
-
-
-def get_rank_badge(rank):
-    """Generate HTML for rank badge with appropriate styling"""
-    badge_styles = {
-        1: ("1st", "linear-gradient(145deg, #ffd700, #ffc400)", "#000"),
-        2: ("2nd", "linear-gradient(145deg, #9ca3af, #787C7E)", "#fff"),
-        3: ("3rd", "linear-gradient(145deg, #CD7F32, #b36a1d)", "#fff"),
-    }
-
-    if rank in badge_styles:
-        label, gradient, text_color = badge_styles[rank]
-        return f"""
-            <div style="
-                display: inline-flex;
-                align-items: center;
-                justify-content: center;
-                min-width: 48px;
-                padding: 4px 12px;
-                background: {gradient};
-                color: {text_color};
-                border-radius: 6px;
-                font-weight: 600;
-                font-size: 0.9em;
-                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-            ">
-                {label}
-            </div>
-        """
-    return f"""
-        <div style="
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            min-width: 28px;
-            color: #a1a1aa;
-            font-weight: 500;
-        ">
-            {rank}
-        </div>
-    """
-
-
-def get_type_badge(model_type):
-    """Generate HTML for model type badge"""
-    colors = get_chart_colors()
-    colors = {"Private": colors["Private"], "Open source": colors["Open source"]}
-    bg_color = colors.get(model_type, "#4F46E5")
-    return f"""
-        <div style="
-            display: inline-flex;
-            align-items: center;
-            padding: 4px 8px;
-            background: {bg_color};
-            color: white;
-            border-radius: 4px;
-            font-size: 0.85em;
-            font-weight: 500;
-        ">
-            {model_type}
-        </div>
-    """
-
-
-def get_output_type_badge(output_type):
-    """Generate HTML for output type badge"""
-    if output_type == "Reasoning":
-        bg_color = "#9333ea"  # Purple for reasoning
-    else:
-        bg_color = "#6b7280"  # Gray for normal
-    
-    return f"""
-        <div style="
-            display: inline-flex;
-            align-items: center;
-            gap: 4px;
-            padding: 4px 8px;
-            background: {bg_color};
-            color: white;
-            border-radius: 4px;
-            font-size: 0.85em;
-            font-weight: 500;
-        ">
-            {output_type}
-        </div>
-    """
-
-
-def get_score_bar(score):
-    """Generate HTML for score bar with gradient styling"""
-    width = score * 100
-    return f"""
-        <div style="display: flex; align-items: center; gap: 12px; width: 100%;">
-            <div style="
-                flex-grow: 1;
-                height: 8px;
-                background: rgba(245, 246, 247, 0.1);
-                border-radius: 4px;
-                overflow: hidden;
-                max-width: 200px;
-            ">
-                <div style="
-                    width: {width}%;
-                    height: 100%;
-                    background: linear-gradient(90deg, #E35454, #1098F7);
-                    border-radius: 4px;
-                    transition: width 0.3s ease;
-                "></div>
-            </div>
-            <span style="
-                font-family: 'SF Mono', monospace;
-                font-weight: 600;
-                color: #F5F6F7;
-                min-width: 60px;
-            ">{score:.3f}</span>
-        </div>
-    """
-
-
-# Define column mapping once for reuse across all functions
-SORT_COLUMN_MAP = {
-    "Avg Action Completion": "Avg AC",
-    "Avg Tool Selection Quality": "Avg TSQ", 
-    "Avg Session Cost": "Avg Total Cost",
-}
+# Import components and styles from modular files
+from components.leaderboard_components import (
+    get_chart_colors, get_rank_badge, get_type_badge, 
+    get_output_type_badge, get_score_bar, get_metric_tooltip,
+    get_responsive_styles, get_faq_section, SORT_COLUMN_MAP
+)
+from styles.leaderboard_styles import get_leaderboard_css
 
 
 def create_leaderboard_v2_tab():
@@ -252,11 +124,21 @@ def create_leaderboard_v2_tab():
                         <th style="width: 120px;">Type</th>
                         <th style="width: 120px;">Output Type</th>
                         <th>Vendor</th>
-                        <th style="width: 200px;">Avg Action Completion</th>
-                        <th style="width: 200px;">Avg Tool Selection Quality</th>
-                        <th>Avg Cost ($)</th>
-                        <th>Avg Duration (s)</th>
-                        <th>Avg Turns</th>
+                        <th style="width: 200px;" title="Action Completion (AC): Measures how well the agent accomplishes user goals and completes tasks successfully. Higher is better (0-1 scale).">
+                            <span class="metric-header">Avg Action Completion <span class="info-icon">ⓘ</span></span>
+                        </th>
+                        <th style="width: 200px;" title="Tool Selection Quality (TSQ): Evaluates the accuracy of selecting the right tools and using them with correct parameters. Higher is better (0-1 scale).">
+                            <span class="metric-header">Avg Tool Selection Quality <span class="info-icon">ⓘ</span></span>
+                        </th>
+                        <th title="Average cost per conversation session in USD, including all API calls and processing. Lower is better.">
+                            <span class="metric-header">Avg Cost ($) <span class="info-icon">ⓘ</span></span>
+                        </th>
+                        <th title="Average time taken to complete a full conversation session from start to finish, measured in seconds. Lower is generally better.">
+                            <span class="metric-header">Avg Duration (s) <span class="info-icon">ⓘ</span></span>
+                        </th>
+                        <th title="Average number of back-and-forth exchanges needed to complete a task. Lower typically indicates more efficient task completion.">
+                            <span class="metric-header">Avg Turns <span class="info-icon">ⓘ</span></span>
+                        </th>
                     </tr>
                 </thead>
                 <tbody>
@@ -460,527 +342,149 @@ def create_leaderboard_v2_tab():
     initial_table = filter_and_sort_data("🌐 All", "All", "All", "Avg AC", "Descending")
     initial_df = load_leaderboard_data()  # Load raw data for model selector
     
-    # Custom CSS for Galileo dark theme
-    custom_css = """
+    # Load custom CSS and responsive styles
+    custom_css = get_leaderboard_css() + get_responsive_styles() + """
     <style>
-    /* Import Geist fonts */
-    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
-    
-    @font-face {
-        font-family: 'Geist';
-        src: url('https://raw.githubusercontent.com/vercel/geist-font/main/packages/next/dist/fonts/geist-sans/Geist-Variable.woff2') format('woff2');
-        font-weight: 100 900;
-        font-style: normal;
-    }
-    
-    @font-face {
-        font-family: 'Geist Mono';
-        src: url('https://raw.githubusercontent.com/vercel/geist-font/main/packages/next/dist/fonts/geist-mono/GeistMono-Variable.woff2') format('woff2');
-        font-weight: 100 900;
-        font-style: normal;
-    }
-    
-    /* Root variables for enhanced color scheme */
-    :root {
-        --bg-primary: #01091A;
-        --bg-secondary: rgba(245, 246, 247, 0.03);
-        --bg-card: rgba(245, 246, 247, 0.02);
-        --border-subtle: rgba(245, 246, 247, 0.08);
-        --border-default: rgba(245, 246, 247, 0.12);
-        --border-strong: rgba(245, 246, 247, 0.2);
-        --text-primary: #F5F6F7;
-        --text-secondary: #94A3B8;
-        --text-muted: #64748B;
-        --accent-primary: #E35454;
-        --accent-secondary: #1098F7;
-        --accent-tertiary: #F5F6F7;
-        --glow-primary: rgba(227, 84, 84, 0.4);
-        --glow-secondary: rgba(16, 152, 247, 0.4);
-        --glow-tertiary: rgba(245, 246, 247, 0.3);
-    }
-    
-    /* Global font and background */
-    .gradio-container {
-        font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Inter', sans-serif !important;
-        background: var(--bg-primary) !important;
-        color: var(--text-primary) !important;
-    }
+    /* Page-specific styles for leaderboard v2 */
     
-    /* Headers and text */
-    h1, h2, h3, h4 {
-        color: var(--text-primary) !important;
-        font-weight: 700 !important;
-        font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif !important;
-    }
-    
-    p, span, div {
-        color: var(--text-primary) !important;
-        font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif !important;
-    }
-    
-    /* Labels and info text */
-    label {
-        color: var(--text-primary) !important;
-        font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif !important;
-    }
-    
-    .gr-box label {
-        color: var(--text-primary) !important;
-        font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif !important;
-    }
-    
-    .gr-info {
-        color: var(--text-secondary) !important;
-        font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif !important;
-    }
-    
-    /* Simple metric cards */
-    .metric-card {
-        background: var(--bg-card);
-        border-radius: 16px;
-        padding: 24px;
-        position: relative;
-        border: 1px solid var(--border-subtle);
-        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    }
-    
-    .metric-card:hover {
-        transform: translateY(-4px);
-        border-color: var(--accent-primary);
-        box-shadow: 0 8px 24px rgba(227, 84, 84, 0.2);
-    }
-    
-    /* Metric icon with glow effect */
-    .metric-icon {
-        width: 48px;
-        height: 48px;
-        display: flex;
+    /* Metric header styles with info icons */
+    .metric-header {
+        cursor: help;
+        display: inline-flex;
         align-items: center;
-        justify-content: center;
-        font-size: 2rem;
-        margin-bottom: 16px;
-        filter: drop-shadow(0 0 20px currentColor);
-        transition: all 0.3s ease;
-    }
-    
-    .metric-card:hover .metric-icon {
-        transform: scale(1.1);
-        filter: drop-shadow(0 0 30px currentColor);
-    }
-    
-
-    
-    /* Metric values and labels */
-    .metric-card .metric-label {
-        font-family: 'Geist Mono', monospace !important;
-        letter-spacing: 0.1em !important;
-        color: var(--text-secondary) !important;
-        font-size: 0.875rem !important;
-        text-transform: uppercase !important;
-        margin-bottom: 8px !important;
-    }
-    
-    .metric-card .metric-value {
-        font-family: 'Geist', sans-serif !important;
-        font-weight: 700 !important;
-        font-size: 1.25rem !important;
-        color: var(--text-primary) !important;
-        margin-bottom: 8px !important;
-    }
-    
-    .metric-card .metric-description {
-        color: var(--text-secondary) !important;
-        font-size: 0.875rem !important;
-        line-height: 1.5 !important;
-    }
-    
-    /* Enhanced radio buttons with primary accent */
-    input[type="radio"] {
-        background-color: var(--bg-secondary) !important;
-        border-color: var(--border-default) !important;
-    }
-    
-    input[type="radio"]:checked {
-        background-color: var(--accent-primary) !important;
-        border-color: var(--accent-primary) !important;
-        box-shadow: 0 0 10px var(--glow-primary) !important;
-    }
-    
-    .gr-check-radio label {
-        color: var(--text-primary) !important;
-        transition: color 0.2s ease !important;
-    }
-    
-    .gr-check-radio:hover label {
-        color: var(--accent-primary) !important;
-    }
-    
-    /* Gradio's selected radio button styling - comprehensive targeting */
-    .gr-radio .wrap > label.selected,
-    .gr-radio .wrap > label:has(input:checked),
-    input[type="radio"]:checked ~ span,
-    label:has(> input[type="radio"]:checked) {
-        background: transparent !important;
-        border-color: var(--accent-primary) !important;
-        color: var(--text-primary) !important;
-        font-weight: 600 !important;
-    }
-    
-    /* Enhanced dropdown styling */
-    .dropdown {
-        border-color: var(--border-default) !important;
-        background: var(--bg-card) !important;
-        color: var(--text-primary) !important;
-        transition: all 0.2s ease !important;
-    }
-    
-    .dropdown:hover {
-        border-color: var(--accent-primary) !important;
-        box-shadow: 0 0 15px var(--glow-primary) !important;
-    }
-    
-    select, .gr-dropdown {
-        background: var(--bg-card) !important;
-        color: var(--text-primary) !important;
-        border: 1px solid var(--border-default) !important;
-        transition: all 0.2s ease !important;
-    }
-    
-    select:hover, .gr-dropdown:hover {
-        border-color: var(--accent-primary) !important;
-        box-shadow: 0 0 15px var(--glow-primary) !important;
-    }
-    
-    select option, .gr-dropdown option {
-        background: var(--bg-primary) !important;
-        color: var(--text-primary) !important;
-    }
-    
-    /* Enhanced table styling with gradient accents */
-    .dataframe {
-        background: var(--bg-card) !important;
-        border-radius: 16px !important;
-        overflow: hidden !important;
-        border: 1px solid var(--border-subtle) !important;
-        font-size: 14px !important;
-        max-height: 600px !important;
-        overflow-y: auto !important;
-        font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif !important;
-        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
-    }
-    
-    /* Fixed table layout for better column control */
-    .dataframe table {
-        table-layout: fixed !important;
-        width: 100% !important;
-    }
-    
-    .dataframe th {
-        background: rgba(227, 84, 84, 0.1) !important;
-        color: var(--text-primary) !important;
-        font-weight: 600 !important;
-        padding: 14px 8px !important;
-        text-align: left !important;
-        border-bottom: 2px solid var(--accent-primary) !important;
-        position: relative !important;
-        white-space: nowrap !important;
-        overflow: hidden !important;
-        text-overflow: ellipsis !important;
-        font-size: 13px !important;
-        font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif !important;
-        text-transform: uppercase !important;
-        letter-spacing: 0.05em !important;
-    }
-    
-    /* Column-specific widths */
-    .dataframe th:nth-child(2), /* Model */
-    .dataframe td:nth-child(2) {
-        min-width: 200px !important;
-        max-width: 250px !important;
+        gap: 6px;
     }
     
-    .dataframe th:nth-child(3), /* Model Type */
-    .dataframe td:nth-child(3) {
-        min-width: 100px !important;
-        max-width: 120px !important;
-    }
-    
-    .dataframe th:nth-child(4), /* Output Type */
-    .dataframe td:nth-child(4) {
-        min-width: 100px !important;
-        max-width: 120px !important;
-    }
-    
-    .dataframe th:nth-child(5), /* Vendor */
-    .dataframe td:nth-child(5) {
-        min-width: 100px !important;
-        max-width: 120px !important;
-    }
-    
-    /* Numeric columns - smaller width */
-    .dataframe th:nth-child(6), .dataframe th:nth-child(7),
-    .dataframe th:nth-child(8), .dataframe th:nth-child(9),
-    .dataframe th:nth-child(10),
-    .dataframe td:nth-child(6), .dataframe td:nth-child(7),
-    .dataframe td:nth-child(8), .dataframe td:nth-child(9),
-    .dataframe td:nth-child(10) {
-        min-width: 80px !important;
-        max-width: 100px !important;
-        text-align: center !important;
-        font-family: 'Geist Mono', monospace !important;
-        font-size: 13px !important;
-    }
-    
-    .dataframe td {
-        padding: 12px 8px !important;
-        border-bottom: 1px solid var(--border-subtle) !important;
-        color: var(--text-primary) !important;
-        white-space: nowrap !important;
-        overflow: hidden !important;
-        text-overflow: ellipsis !important;
-        font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif !important;
-        transition: all 0.2s ease !important;
-    }
-    
-    /* Model names - keep consistent color on hover */
-    .dataframe td:nth-child(2) {
-        font-weight: 500 !important;
-        color: var(--accent-primary) !important;
-        transition: all 0.2s ease !important;
-    }
-    
-    /* Keep model name color consistent to emphasize row highlight */
-    .dataframe tr:hover td:nth-child(2) {
-        color: var(--accent-secondary) !important;
-    }
-    
-    .dataframe tbody tr {
-        transition: all 0.3s ease !important;
-    }
-    
-    .dataframe tr:hover {
-        background: rgba(227, 84, 84, 0.15) !important;
-        box-shadow: 0 0 20px rgba(227, 84, 84, 0.3), inset 0 0 20px rgba(227, 84, 84, 0.1) !important;
-        transform: scale(1.01) !important;
-    }
-    
-    .dataframe tr:nth-child(even) {
-        background: var(--bg-secondary) !important;
-    }
-    
-    /* Tooltip on hover for truncated text */
-    .dataframe td:hover,
-    .dataframe th:hover {
-        overflow: visible !important;
-        position: relative !important;
-        z-index: 10 !important;
-    }
-    
-    /* Horizontal scroll styling */
-    .dataframe-container {
-        overflow-x: auto !important;
-        overflow-y: visible !important;
-        max-width: 100% !important;
-        -webkit-overflow-scrolling: touch !important;
-        position: relative !important;
-    }
-    
-    /* Simple scrollbar */
-    .dataframe-container::-webkit-scrollbar {
-        height: 10px !important;
-    }
-    
-    .dataframe-container::-webkit-scrollbar-track {
-        background: var(--bg-secondary) !important;
-        border-radius: 5px !important;
-    }
-    
-    .dataframe-container::-webkit-scrollbar-thumb {
-        background: var(--accent-secondary) !important;
-        border-radius: 4px !important;
-    }
-    
-    .dataframe-container::-webkit-scrollbar-thumb:hover {
-        background: var(--accent-primary) !important;
-    }
-    
-    /* Responsive design for smaller screens */
-    @media (max-width: 1200px) {
-        .dataframe th:nth-child(9), /* Vendor column */
-        .dataframe td:nth-child(9),
-        .dataframe th:nth-child(10), /* Last columns */
-        .dataframe td:nth-child(10) {
-            display: none !important;
-        }
-    }
-    
-    @media (max-width: 900px) {
-        .dataframe th {
-            font-size: 12px !important;
-            padding: 8px 4px !important;
-        }
-        
-        .dataframe td {
-            font-size: 12px !important;
-            padding: 8px 4px !important;
-        }
-        
-        .dataframe th:nth-child(2),
-        .dataframe td:nth-child(2) {
-            min-width: 150px !important;
-            max-width: 200px !important;
-        }
+    .info-icon {
+        color: var(--accent-secondary);
+        font-size: 1em;
+        opacity: 0.8;
+        transition: opacity 0.2s ease;
+        font-weight: normal;
     }
     
-    /* Simple button styling */
-    button {
-        background: var(--bg-card) !important;
-        color: var(--text-primary) !important;
-        border: 1px solid var(--border-default) !important;
-        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+    .metric-header:hover .info-icon {
+        opacity: 1;
     }
     
-    button:hover {
-        transform: translateY(-2px) !important;
-        border-color: var(--accent-primary) !important;
-        box-shadow: 0 4px 16px rgba(227, 84, 84, 0.2) !important;
+    /* Native tooltip styling */
+    .v2-styled-table th[title] {
+        cursor: help;
     }
     
-    /* Enhanced info boxes */
-    .info-box {
-        background: var(--bg-card);
-        border: 1px solid var(--border-subtle);
-        border-radius: 12px;
-        padding: 20px;
-        margin: 8px 0;
-        backdrop-filter: blur(10px);
+    /* Custom tooltip using CSS only */
+    [data-tooltip] {
         position: relative;
-        overflow: hidden;
-        transition: all 0.3s ease;
+        cursor: help;
     }
     
-    .info-box::before {
-        content: '';
+    [data-tooltip]::before {
+        content: attr(data-tooltip);
         position: absolute;
-        top: 0;
-        left: -100%;
-        width: 100%;
-        height: 100%;
-        background: linear-gradient(90deg, transparent, rgba(227, 84, 84, 0.1), transparent);
-        transition: left 0.6s ease;
-    }
-    
-    .info-box:hover::before {
-        left: 100%;
+        bottom: 100%;
+        left: 50%;
+        transform: translateX(-50%);
+        background: rgba(26, 26, 46, 0.95);
+        color: #f5f6f7;
+        padding: 8px 12px;
+        border-radius: 6px;
+        font-size: 12px;
+        white-space: nowrap;
+        max-width: 300px;
+        z-index: 10000;
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity 0.3s;
+        margin-bottom: 5px;
+        border: 1px solid rgba(16, 152, 247, 0.3);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.8);
     }
     
-    .info-box:hover {
-        border-color: var(--accent-primary);
-        box-shadow: 0 4px 20px var(--glow-primary);
+    [data-tooltip]:hover::before {
+        opacity: 1;
     }
     
-    /* Enhanced dark containers */
-    .dark-container {
+    /* Dark theme table styling */
+    .v2-table-container {
         background: var(--bg-card);
+        border-radius: 16px;
+        overflow: visible;  /* Changed from hidden to visible for tooltips */
         border: 1px solid var(--border-subtle);
-        border-radius: 20px;
-        padding: 28px;
-        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
-        backdrop-filter: blur(10px);
+        margin-top: 20px;
         position: relative;
-        overflow: hidden;
-    }
-    
-    .dark-container::after {
-        content: '';
-        position: absolute;
-        top: -50%;
-        right: -50%;
-        width: 200%;
-        height: 200%;
-        background: radial-gradient(circle, var(--glow-primary) 0%, transparent 70%);
-        opacity: 0.05;
-        pointer-events: none;
     }
     
-    /* Section headers with glow */
-    .section-header {
-        display: flex;
-        align-items: center;
-        gap: 12px;
-        margin-bottom: 24px;
-    }
     
-    .section-icon {
-        filter: drop-shadow(0 0 12px currentColor);
-        transition: all 0.3s ease;
+    .v2-styled-table {
+        width: 100%;
+        border-collapse: collapse;
+        font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
+        background: var(--bg-card);
+        color: var(--text-primary);
     }
     
-    .dark-container:hover .section-icon {
-        filter: drop-shadow(0 0 20px currentColor);
-        transform: scale(1.1);
+    .v2-styled-table thead {
+        position: sticky;
+        top: 0;
+        background: rgba(227, 84, 84, 0.1);
+        z-index: 1;
     }
     
-    /* Text effects */
-    
-    /* Simple scrollbar styling */
-    ::-webkit-scrollbar {
-        width: 8px;
-        height: 8px;
+    .v2-styled-table th {
+        padding: 14px 12px;
+        text-align: left;
+        font-weight: 600;
+        color: var(--text-primary);
+        border-bottom: 2px solid var(--accent-primary);
+        font-size: 14px;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        position: relative;  /* Added for tooltip positioning */
     }
     
-    ::-webkit-scrollbar-track {
-        background: var(--bg-secondary);
-        border-radius: 4px;
+    .v2-styled-table td {
+        padding: 12px;
+        border-bottom: 1px solid var(--border-subtle);
+        color: var(--text-primary);
+        font-size: 14px;
+        transition: all 0.2s ease;
     }
     
-    ::-webkit-scrollbar-thumb {
-        background: var(--accent-secondary);
-        border-radius: 4px;
+    .v2-styled-table tbody tr {
+        transition: all 0.3s ease;
     }
     
-    ::-webkit-scrollbar-thumb:hover {
-        background: var(--accent-primary);
+    .v2-styled-table tbody tr:hover {
+        background: rgba(227, 84, 84, 0.15) !important;
+        box-shadow: 0 0 20px rgba(227, 84, 84, 0.3), inset 0 0 20px rgba(227, 84, 84, 0.1);
+        transform: scale(1.01);
     }
     
-
-    
-    /* Pulse animation for important elements */
-    @keyframes pulse-glow {
-        0% { box-shadow: 0 0 0 0 var(--glow-primary); }
-        70% { box-shadow: 0 0 0 10px transparent; }
-        100% { box-shadow: 0 0 0 0 transparent; }
+    .v2-styled-table tbody tr:nth-child(even) {
+        background: var(--bg-secondary);
     }
     
-    .pulse {
-        animation: pulse-glow 2s infinite;
+    .model-name {
+        font-weight: 500;
+        color: var(--accent-primary);
+        font-size: 14px;
+        transition: color 0.2s ease;
     }
     
-    /* Center align charts */
-    .chart-container {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: 100%;
-        margin: 0 auto;
+    .v2-styled-table tr:hover .model-name {
+        color: var(--accent-secondary);
     }
     
-    .chart-container > div {
-        width: 100%;
-        max-width: 1400px;
-        margin: 0 auto;
+    .numeric-cell {
+        font-family: 'Geist Mono', monospace;
+        font-size: 14px;
+        text-align: center;
     }
     
-    /* Ensure plots are centered */
-    .plot-container {
-        margin: 0 auto !important;
-        display: flex !important;
-        justify-content: center !important;
+    .score-cell {
+        min-width: 180px;
     }
     
-    .js-plotly-plot {
-        margin: 0 auto !important;
-    }
     </style>
     
     <script>
@@ -1240,7 +744,7 @@ def create_leaderboard_v2_tab():
             <span class="nav-button-icon">📝</span>
             Blog
         </a>
-        <a href="https://galileo.ai/mastering-agents-ebook" target="_blank" class="nav-link-button">
+        <a href="https://galileo.ai/mastering-agents-ebook?utm_medium=referral&utm_source=HF&utm_campaign=agent_leaderboard_v2" target="_blank" class="nav-link-button">
             <span class="nav-button-icon">📚</span>
             eBook
         </a>
@@ -1459,7 +963,7 @@ def create_leaderboard_v2_tab():
         </style>
         
         <!-- First row: Five key insight cards -->
-        <div style="display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px;">
+        <div class="insight-card-grid">
             <div class="insight-card">
                 <div class="card-header">
                     <div class="card-icon floating-icon" style="color: var(--accent-primary);">
@@ -1522,7 +1026,7 @@ def create_leaderboard_v2_tab():
         </div>
         
         <!-- Second row: Key features showcase -->
-        <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px;">
+        <div class="metric-card-grid" style="margin-top: 16px;">
             <div class="insight-card" style="background: linear-gradient(145deg, rgba(227, 84, 84, 0.05) 0%, rgba(245, 246, 247, 0.05) 100%);">
                 <div class="card-value">Model Capabilities</div>
                 <div class="badge-row" style="margin-top: 16px;">
@@ -2008,6 +1512,36 @@ def create_leaderboard_v2_tab():
         </div>
     </div>""")
     
+    # Evaluate Your Agents Button
+    gr.HTML("""
+    <div style="text-align: center; margin-top: 32px; margin-bottom: 32px;">
+        <a href="https://app.galileo.ai/sign-up?utm_medium=referral&utm_source=HF&utm_campaign=agent_leaderboard_v2" target="_blank" 
+           style="display: inline-flex; align-items: center; gap: 12px; padding: 16px 40px; 
+                  background: linear-gradient(135deg, #E35454 0%, #F06B6B 100%);
+                  border: none;
+                  border-radius: 16px; 
+                  color: white; 
+                  text-decoration: none; 
+                  font-size: 1.1rem; 
+                  font-family: 'Geist', sans-serif;
+                  font-weight: 600;
+                  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+                  box-shadow: 0 8px 24px rgba(227, 84, 84, 0.35), 0 2px 8px rgba(0, 0, 0, 0.1);
+                  transform: translateY(0);">
+            <span style="font-size: 1.3rem;">🚀</span>
+            <span>Evaluate Your Agents</span>
+            <span style="font-size: 0.9rem;">→</span>
+        </a>
+    </div>
+    <style>
+    .dataframe-container + div a:hover {
+        background: linear-gradient(135deg, #D94444 0%, #E05555 100%) !important;
+        transform: translateY(-3px) !important;
+        box-shadow: 0 12px 32px rgba(227, 84, 84, 0.45), 0 4px 12px rgba(0, 0, 0, 0.15) !important;
+    }
+    </style>
+    """)
+    
     # Column Info Section
     gr.HTML("""
     <div class="dark-container" style="margin-top: 24px; margin-bottom: 32px;">
@@ -3209,7 +2743,7 @@ def create_leaderboard_v2_tab():
             </p>
         </div>
         <div style="display: flex; justify-content: center; gap: 16px; flex-wrap: wrap;">
-            <a href="https://galileo.ai/mastering-agents-ebook" target="_blank" class="header-action-button">
+            <a href="https://galileo.ai/mastering-agents-ebook?utm_medium=referral&utm_source=HF&utm_campaign=agent_leaderboard_v2" target="_blank" class="header-action-button">
                 <span class="action-button-icon">📚</span>Mastering Agents eBook
             </a>
             <a href="https://app.galileo.ai/sign-up?utm_medium=referral&utm_source=HF&utm_campaign=agent_leaderboard_v2" target="_blank" class="header-action-button">
@@ -3219,6 +2753,9 @@ def create_leaderboard_v2_tab():
     </div>
     """)
     
+    # Add FAQ section at the end
+    gr.HTML(get_faq_section())
+    
     return leaderboard_table