Add dashboard screen with aggregate statistics and recent runs

- Implement dashboard screen module with stats cards display
- Add 6 metric cards: Total Runs, Avg Accuracy, Avg Latency, Total Tokens, Total Cost, Total CO2
- Include recent evaluations table showing latest 5 runs
- Integrate dashboard navigation with sidebar buttons
- Set dashboard as default landing screen
- Fix console encoding issues for Windows compatibility

app.py

@@ -27,6 +27,10 @@ from screens.trace_detail import (
     create_gpu_metrics_dashboard,
     create_gpu_summary_cards
 )
+from screens.dashboard import (
+    create_dashboard_ui,
+    update_dashboard_data
+)
 from utils.navigation import Navigator, Screen
 
 
@@ -388,9 +392,9 @@ data_loader = create_data_loader_from_env()
 navigator = Navigator()
 
 # Pre-load and cache the leaderboard data before building UI
-print("📥 Pre-loading leaderboard data from HuggingFace...")
+print("Pre-loading leaderboard data from HuggingFace...")
 leaderboard_df_cache = data_loader.load_leaderboard()
-print(f"✅ Loaded {len(leaderboard_df_cache)} evaluation runs")
+print(f"Loaded {len(leaderboard_df_cache)} evaluation runs")
 
 # Global state (already populated)
 # leaderboard_df_cache is now set
@@ -895,7 +899,7 @@ with gr.Blocks(title="TraceMind-AI", theme=theme) as app:
             Agent Evaluation Platform
         </p>
         <p style="color: rgba(255,255,255,0.8); margin: 10px 0 0 0; font-size: 0.9em;">
-            Powered by Gradio 6 🚀 | HuggingFace Jobs | TraceVerde | SmolTrace | MCP | Gemini | Modal
+            Powered by Gradio 🚀 | HuggingFace Jobs | TraceVerde | SmolTrace | MCP | Gemini | Modal
         </p>
     </div>
     """)
@@ -913,9 +917,10 @@ with gr.Blocks(title="TraceMind-AI", theme=theme) as app:
     
             # Navigation section
             gr.Markdown("### 🧭 Navigation")
-    
+
             # Navigation buttons
-            leaderboard_nav_btn = gr.Button("🏆 Leaderboard", variant="primary", size="lg")
+            dashboard_nav_btn = gr.Button("📊 Dashboard", variant="primary", size="lg")
+            leaderboard_nav_btn = gr.Button("🏆 Leaderboard", variant="secondary", size="lg")
             compare_nav_btn = gr.Button("⚖️ Compare", variant="secondary", size="lg")
             docs_nav_btn = gr.Button("📚 Documentation", variant="secondary", size="lg")
     
@@ -944,10 +949,13 @@ with gr.Blocks(title="TraceMind-AI", theme=theme) as app:
                 label="Agent Type",
                 info="Tool: Function calling | Code: Code execution | Both: Hybrid"
             )
-    
+
         # Main content area
+        # Screen 0: Dashboard
+        dashboard_screen, dashboard_components = create_dashboard_ui()
+
         # Screen 1: Main Leaderboard
-        with gr.Column(visible=True) as leaderboard_screen:
+        with gr.Column(visible=False) as leaderboard_screen:
             gr.Markdown("## 🏆 Agent Evaluation Leaderboard")
             with gr.Tabs():
                 with gr.TabItem("🏆 Leaderboard"):
@@ -1106,7 +1114,53 @@ with gr.Blocks(title="TraceMind-AI", theme=theme) as app:
                 trace_ask_btn = gr.Button("Ask", variant="primary")
                 trace_answer = gr.Markdown("*Ask a question to get AI-powered insights*")
 
+        # Navigation handlers (define before use)
+        def navigate_to_dashboard():
+            """Navigate to dashboard screen and load dashboard data"""
+            try:
+                leaderboard_df = data_loader.load_leaderboard()
+                dashboard_updates = update_dashboard_data(leaderboard_df, dashboard_components)
+            except Exception as e:
+                print(f"[ERROR] Loading dashboard data: {e}")
+                dashboard_updates = {}
+
+            # Combine navigation updates with dashboard data updates
+            result = {
+                dashboard_screen: gr.update(visible=True),
+                leaderboard_screen: gr.update(visible=False),
+                run_detail_screen: gr.update(visible=False),
+                trace_detail_screen: gr.update(visible=False),
+                dashboard_nav_btn: gr.update(variant="primary"),
+                leaderboard_nav_btn: gr.update(variant="secondary"),
+                compare_nav_btn: gr.update(variant="secondary"),
+                docs_nav_btn: gr.update(variant="secondary"),
+            }
+            result.update(dashboard_updates)
+            return result
+
+        def navigate_to_leaderboard():
+            """Navigate to leaderboard screen"""
+            return {
+                dashboard_screen: gr.update(visible=False),
+                leaderboard_screen: gr.update(visible=True),
+                run_detail_screen: gr.update(visible=False),
+                trace_detail_screen: gr.update(visible=False),
+                dashboard_nav_btn: gr.update(variant="secondary"),
+                leaderboard_nav_btn: gr.update(variant="primary"),
+                compare_nav_btn: gr.update(variant="secondary"),
+                docs_nav_btn: gr.update(variant="secondary"),
+            }
+
         # Event handlers
+        # Load dashboard on app start
+        app.load(
+            fn=navigate_to_dashboard,
+            outputs=[
+                dashboard_screen, leaderboard_screen, run_detail_screen, trace_detail_screen,
+                dashboard_nav_btn, leaderboard_nav_btn, compare_nav_btn, docs_nav_btn
+            ] + list(dashboard_components.values())
+        )
+
         app.load(
         fn=load_leaderboard,
         outputs=[leaderboard_by_model, model_filter, sidebar_model_filter]
@@ -1191,6 +1245,22 @@ with gr.Blocks(title="TraceMind-AI", theme=theme) as app:
         outputs=[mcp_insights]
         )
 
+        # Wire up navigation buttons
+        dashboard_nav_btn.click(
+            fn=navigate_to_dashboard,
+            outputs=[
+                dashboard_screen, leaderboard_screen, run_detail_screen, trace_detail_screen,
+                dashboard_nav_btn, leaderboard_nav_btn, compare_nav_btn, docs_nav_btn
+            ] + list(dashboard_components.values())
+        )
+
+        leaderboard_nav_btn.click(
+            fn=navigate_to_leaderboard,
+            outputs=[
+                dashboard_screen, leaderboard_screen, run_detail_screen, trace_detail_screen,
+                dashboard_nav_btn, leaderboard_nav_btn, compare_nav_btn, docs_nav_btn
+            ]
+        )
 
         leaderboard_table.select(
         fn=on_drilldown_select,
@@ -1238,9 +1308,9 @@ with gr.Blocks(title="TraceMind-AI", theme=theme) as app:
 
 
 if __name__ == "__main__":
-    print("🚀 Starting TraceMind-AI...")
-    print(f"📊 Data Source: {os.getenv('DATA_SOURCE', 'both')}")
-    print(f"📁 JSON Path: {os.getenv('JSON_DATA_PATH', './sample_data')}")
+    print("Starting TraceMind-AI...")
+    print(f"Data Source: {os.getenv('DATA_SOURCE', 'both')}")
+    print(f"JSON Path: {os.getenv('JSON_DATA_PATH', './sample_data')}")
 
     app.launch(
         server_name="0.0.0.0",

screens/dashboard.py

@@ -0,0 +1,291 @@
+"""
+Dashboard Screen for TraceMind-AI
+Displays aggregate statistics and recent evaluation runs
+"""
+
+import gradio as gr
+import pandas as pd
+
+
+def calculate_aggregate_stats(leaderboard_df):
+    """Calculate aggregate statistics for dashboard"""
+    if leaderboard_df.empty:
+        return {
+            'total_runs': 0,
+            'avg_accuracy': 0.0,
+            'avg_latency': 0.0,
+            'total_tokens': 0,
+            'total_cost': 0.0,
+            'avg_cost': 0.0,
+            'total_co2': 0.0
+        }
+
+    return {
+        'total_runs': len(leaderboard_df),
+        'avg_accuracy': leaderboard_df['success_rate'].mean() if 'success_rate' in leaderboard_df.columns else 0.0,
+        'avg_latency': leaderboard_df['avg_duration_ms'].mean() / 1000 if 'avg_duration_ms' in leaderboard_df.columns else 0.0,
+        'total_tokens': int(leaderboard_df['total_tokens'].sum()) if 'total_tokens' in leaderboard_df.columns else 0,
+        'total_cost': leaderboard_df['total_cost_usd'].sum() if 'total_cost_usd' in leaderboard_df.columns else 0.0,
+        'avg_cost': leaderboard_df['total_cost_usd'].mean() if 'total_cost_usd' in leaderboard_df.columns else 0.0,
+        'total_co2': leaderboard_df['co2_emissions_g'].sum() if 'co2_emissions_g' in leaderboard_df.columns else 0.0
+    }
+
+
+def generate_stats_card(title, value, emoji, gradient_colors, description):
+    """
+    Generate HTML for a single statistics card
+
+    Args:
+        title: Card title
+        value: Main value to display
+        emoji: Emoji icon
+        gradient_colors: Tuple of (start_color, end_color) for gradient
+        description: Description text
+    """
+    return f"""
+    <div style="background: linear-gradient(135deg, {gradient_colors[0]} 0%, {gradient_colors[1]} 100%);
+                padding: 25px;
+                border-radius: 12px;
+                box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+                color: white;
+                min-height: 150px;">
+        <div style="display: flex; align-items: center; justify-content: space-between;">
+            <div>
+                <div style="font-size: 3em; font-weight: bold; margin: 10px 0;">{value}</div>
+                <div style="font-size: 1.1em; opacity: 0.9;">{emoji} {title}</div>
+            </div>
+        </div>
+        <div style="margin-top: 15px; font-size: 0.9em; opacity: 0.8;">
+            <span style="background: rgba(255,255,255,0.2); padding: 4px 8px; border-radius: 4px;">
+                {description}
+            </span>
+        </div>
+    </div>
+    """
+
+
+def create_dashboard_cards(stats):
+    """
+    Create all dashboard stat cards from stats dictionary
+
+    Args:
+        stats: Dictionary with aggregate statistics
+
+    Returns:
+        Dictionary of card HTML strings
+    """
+    cards = {}
+
+    # Card 1: Total Runs
+    cards['total_runs'] = generate_stats_card(
+        title="Total Runs",
+        value=stats['total_runs'],
+        emoji="🚀",
+        gradient_colors=("#667eea", "#764ba2"),
+        description="All evaluations"
+    )
+
+    # Card 2: Avg Accuracy
+    cards['avg_accuracy'] = generate_stats_card(
+        title="Avg Accuracy",
+        value=f"{stats['avg_accuracy']:.1f}%",
+        emoji="🎯",
+        gradient_colors=("#f093fb", "#f5576c"),
+        description="Success rate"
+    )
+
+    # Card 3: Avg Latency
+    cards['avg_latency'] = generate_stats_card(
+        title="Avg Latency",
+        value=f"{stats['avg_latency']:.2f}s",
+        emoji="⚡",
+        gradient_colors=("#4facfe", "#00f2fe"),
+        description="Response time"
+    )
+
+    # Card 4: Total Tokens
+    cards['total_tokens'] = generate_stats_card(
+        title="Total Tokens",
+        value=f"{stats['total_tokens']:,}",
+        emoji="💬",
+        gradient_colors=("#43e97b", "#38f9d7"),
+        description="Across all runs"
+    )
+
+    # Card 5: Total Cost
+    cards['total_cost'] = generate_stats_card(
+        title="Total Cost",
+        value=f"${stats['total_cost']:.4f}",
+        emoji="💰",
+        gradient_colors=("#fa709a", "#fee140"),
+        description="All evaluations"
+    )
+
+    # Card 6: Total CO2
+    cards['total_co2'] = generate_stats_card(
+        title="Total CO2",
+        value=f"{stats['total_co2']:.2f}g",
+        emoji="🌱",
+        gradient_colors=("#30cfd0", "#330867"),
+        description="Carbon emissions"
+    )
+
+    return cards
+
+
+def prepare_recent_runs_data(leaderboard_df, n=5):
+    """
+    Prepare data for recent runs table
+
+    Args:
+        leaderboard_df: Leaderboard dataframe
+        n: Number of recent runs to show
+
+    Returns:
+        List of lists for Gradio DataFrame
+    """
+    recent_runs_data = []
+
+    if not leaderboard_df.empty:
+        # Convert timestamp to datetime to avoid type errors during sorting
+        if 'timestamp' in leaderboard_df.columns:
+            leaderboard_df['timestamp'] = pd.to_datetime(leaderboard_df['timestamp'], errors='coerce')
+            recent_df = leaderboard_df.sort_values('timestamp', ascending=False).head(n)
+        else:
+            recent_df = leaderboard_df.head(n)
+
+        for _, row in recent_df.iterrows():
+            # Format duration
+            duration_ms = row.get('avg_duration_ms', 0)
+            if duration_ms >= 1000:
+                duration_str = f"{duration_ms/1000:.2f}s"
+            else:
+                duration_str = f"{duration_ms:.0f}ms"
+
+            recent_runs_data.append([
+                row.get('model', 'N/A'),
+                f"{row.get('success_rate', 0):.1f}%",
+                f"${row.get('total_cost_usd', 0):.4f}",
+                duration_str,
+                row.get('timestamp', 'N/A')
+            ])
+
+    return recent_runs_data
+
+
+def create_dashboard_ui():
+    """
+    Create the dashboard screen UI components
+
+    Returns:
+        Tuple of (screen_column, component_dict)
+    """
+    components = {}
+
+    with gr.Column(visible=True) as dashboard_screen:
+        gr.Markdown("## 📊 Dashboard")
+        gr.Markdown("*Overview of agent evaluation metrics*")
+
+        # Stats cards in draggable grid layout
+        with gr.Row():
+            # Card 1: Total Runs
+            with gr.Draggable():
+                components['total_runs_card'] = gr.HTML(
+                    generate_stats_card(
+                        "Total Runs", "0", "🚀",
+                        ("#667eea", "#764ba2"),
+                        "All evaluations"
+                    )
+                )
+
+            # Card 2: Avg Accuracy
+            with gr.Draggable():
+                components['avg_accuracy_card'] = gr.HTML(
+                    generate_stats_card(
+                        "Avg Accuracy", "0%", "🎯",
+                        ("#f093fb", "#f5576c"),
+                        "Success rate"
+                    )
+                )
+
+        with gr.Row():
+            # Card 3: Avg Latency
+            with gr.Draggable():
+                components['avg_latency_card'] = gr.HTML(
+                    generate_stats_card(
+                        "Avg Latency", "0.0s", "⚡",
+                        ("#4facfe", "#00f2fe"),
+                        "Response time"
+                    )
+                )
+
+            # Card 4: Total Tokens
+            with gr.Draggable():
+                components['total_tokens_card'] = gr.HTML(
+                    generate_stats_card(
+                        "Total Tokens", "0", "💬",
+                        ("#43e97b", "#38f9d7"),
+                        "Across all runs"
+                    )
+                )
+
+        with gr.Row():
+            # Card 5: Total Cost
+            with gr.Draggable():
+                components['total_cost_card'] = gr.HTML(
+                    generate_stats_card(
+                        "Total Cost", "$0.00", "💰",
+                        ("#fa709a", "#fee140"),
+                        "All evaluations"
+                    )
+                )
+
+            # Card 6: Total CO2
+            with gr.Draggable():
+                components['total_co2_card'] = gr.HTML(
+                    generate_stats_card(
+                        "Total CO2", "0g", "🌱",
+                        ("#30cfd0", "#330867"),
+                        "Carbon emissions"
+                    )
+                )
+
+        gr.Markdown("---")
+
+        # Recent Runs Preview
+        gr.Markdown("### 📋 Recent Evaluations")
+        components['recent_runs_table'] = gr.Dataframe(
+            headers=["Model", "Success Rate", "Cost", "Duration", "Timestamp"],
+            interactive=False,
+            wrap=True,
+            row_count=5,
+            label="Latest 5 runs"
+        )
+
+    return dashboard_screen, components
+
+
+def update_dashboard_data(leaderboard_df, components):
+    """
+    Update dashboard stats cards and recent runs table
+
+    Args:
+        leaderboard_df: Leaderboard dataframe
+        components: Dictionary of Gradio components
+
+    Returns:
+        Dictionary of component updates
+    """
+    stats = calculate_aggregate_stats(leaderboard_df)
+    cards = create_dashboard_cards(stats)
+    recent_runs_data = prepare_recent_runs_data(leaderboard_df)
+
+    return {
+        components['total_runs_card']: gr.update(value=cards['total_runs']),
+        components['avg_accuracy_card']: gr.update(value=cards['avg_accuracy']),
+        components['avg_latency_card']: gr.update(value=cards['avg_latency']),
+        components['total_tokens_card']: gr.update(value=cards['total_tokens']),
+        components['total_cost_card']: gr.update(value=cards['total_cost']),
+        components['total_co2_card']: gr.update(value=cards['total_co2']),
+        components['recent_runs_table']: gr.update(value=recent_runs_data)
+    }