Add app files

Dockerfile

@@ -0,0 +1,19 @@
+FROM node:20.11.0-slim
+
+WORKDIR /app
+
+# Copy the rest of the application code
+COPY --chown=user leaderboard-app/ ./
+
+RUN npm install
+
+# Build the app
+RUN npm run build
+
+# Expose the port the app will run on
+# HF Spaces uses port 7860 by default
+EXPOSE 7860 
+
+# Start the app with the correct port
+ENV PORT=7860
+CMD ["npm", "start"]

leaderboard-app/.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

leaderboard-app/README.md

@@ -0,0 +1,113 @@
+# LLM Comparison Leaderboard
+
+An interactive dashboard for comparing the performance of state-of-the-art large language models across various tasks and metrics.
+
+## Features
+
+- Overall model rankings with comprehensive scoring
+- Task-specific performance analysis 
+- Metric breakdowns across different dimensions
+- User satisfaction and experience metrics
+- Interactive visualizations using Recharts
+- Responsive design for all device sizes
+
+## Getting Started
+
+### Prerequisites
+
+- Node.js 16.8 or later
+- Python 3.8 or later (for data processing)
+- Python packages: pandas, numpy
+
+### Installation
+
+1. Clone the repository:
+
+```bash
+git clone https://github.com/yourusername/llm-comparison-leaderboard.git
+cd llm-comparison-leaderboard
+```
+
+2. Install dependencies:
+
+```bash
+npm install
+```
+
+3. Install Python dependencies (if you plan to process data):
+
+```bash
+pip install pandas numpy
+```
+
+### Using Sample Data
+
+The repository includes a sample JSON file with placeholder data in `public/llm_comparison_data.json`. You can start the development server right away to see the dashboard with this data:
+
+```bash
+npm run dev
+```
+
+Visit [http://localhost:3000](http://localhost:3000) to see the dashboard.
+
+### Processing Your Own Data
+
+If you have your own data, follow these steps:
+
+1. Place your CSV data file in the `data` directory:
+
+```bash
+mkdir -p data
+cp /path/to/your/pilot_data_n20.csv data/
+```
+
+2. Run the data processing script:
+
+```bash
+npm run process-data
+```
+
+This will:
+- Process the CSV data using the Python script
+- Generate a JSON file in the `public` directory
+- Format the data for the dashboard
+
+3. Start the development server:
+
+```bash
+npm run dev
+```
+
+## Project Structure
+
+- `app/` - Next.js App Router components
+  - `page.js` - Main page component that loads data and renders dashboard
+  - `layout.js` - Layout component with metadata and global styles
+  - `globals.css` - Global styles including Tailwind CSS
+- `components/` - React components
+  - `LLMComparisonDashboard.jsx` - The main dashboard component
+- `public/` - Static files
+  - `llm_comparison_data.json` - Processed data for the dashboard
+- `lib/` - Utility functions
+  - `utils.js` - Helper functions for data processing
+- `scripts/` - Data processing scripts
+  - `process_data.js` - Node.js script for running Python processor
+  - `process_data.py` - Python script for data processing
+
+## Building for Production
+
+To build the application for production:
+
+```bash
+npm run build
+```
+
+To start the production server:
+
+```bash
+npm run start
+```
+
+## License
+
+This project is licensed under the MIT License - see the LICENSE file for details.

leaderboard-app/app/globals.css

@@ -0,0 +1,29 @@
+@import "tailwindcss";
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+}
+
+/* Force light theme regardless of color scheme preference */
+/* Disable dark mode
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+*/
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: Arial, Helvetica, sans-serif;
+}

leaderboard-app/app/layout.js

@@ -0,0 +1,19 @@
+import { Inter } from 'next/font/google';
+import './globals.css';
+
+const inter = Inter({ subsets: ['latin'] });
+
+export const metadata = {
+  title: 'LLM Comparison Leaderboard',
+  description: 'Interactive leaderboard comparing performance of state-of-the-art large language models across various tasks and metrics.',
+};
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body className={`${inter.className} bg-gray-50`}>
+        {children}
+      </body>
+    </html>
+  );
+}

leaderboard-app/app/page.js

@@ -0,0 +1,84 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import dynamic from 'next/dynamic';
+import { prepareDataForVisualization } from '../lib/utils';
+
+// Dynamically import the dashboard component with SSR disabled
+// This is important because recharts needs to be rendered on the client side
+const LLMComparisonDashboard = dynamic(
+  () => import('../components/LLMComparisonDashboard'),
+  { ssr: false }
+);
+
+export default function Home() {
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    async function fetchData() {
+      try {
+        setLoading(true);
+        
+        // Fetch the data from the JSON file in the public directory
+        const response = await fetch('/llm_comparison_data.json');
+        
+        if (!response.ok) {
+          throw new Error(`Failed to fetch data: ${response.status} ${response.statusText}`);
+        }
+        
+        const jsonData = await response.json();
+        
+        // Process the data for visualization
+        const processedData = prepareDataForVisualization(jsonData);
+        
+        setData(processedData);
+        setLoading(false);
+      } catch (err) {
+        console.error('Error loading data:', err);
+        setError(err.message || 'Failed to load data');
+        setLoading(false);
+      }
+    }
+
+    fetchData();
+  }, []);
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 mx-auto mb-4"></div>
+          <p className="text-lg text-gray-600">Loading LLM comparison data...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <div className="text-center max-w-md p-6 bg-red-50 rounded-lg border border-red-200">
+          <svg xmlns="http://www.w3.org/2000/svg" className="h-12 w-12 text-red-500 mx-auto mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+          </svg>
+          <h2 className="text-xl font-bold text-red-700 mb-2">Error Loading Data</h2>
+          <p className="text-gray-600">{error}</p>
+          <button 
+            onClick={() => window.location.reload()} 
+            className="mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
+          >
+            Try Again
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <main className="min-h-screen p-4">
+      {data && <LLMComparisonDashboard data={data} />}
+    </main>
+  );
+}

leaderboard-app/components/HeadToHeadComparison.jsx

@@ -0,0 +1,1002 @@
+"use client";
+
+import React, { useState, useEffect, useMemo, useCallback } from "react";
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+  RadarChart,
+  PolarGrid,
+  PolarAngleAxis,
+  PolarRadiusAxis,
+  Radar,
+  ComposedChart,
+  Cell,
+  ReferenceLine
+} from "recharts";
+
+// Format facet names for display
+const formatFacetName = (facet) => {
+  const facetMap = {
+    "helpfulness": "Helpfulness",
+    "communication": "Communication",
+    "insightful": "Insightfulness",
+    "adaptiveness": "Adaptiveness",
+    "trustworthiness": "Trustworthiness",
+    "personality": "Personality",
+    "background_and_culture": "Cultural Awareness"
+  };
+  
+  return facetMap[facet] || (facet ? facet.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase()) : facet);
+};
+
+// Format aspect names for display
+const formatAspectName = (aspect) => {
+  const aspectMap = {
+    "effectiveness": "Effectiveness",
+    "comprehensiveness": "Comprehensiveness",
+    "usefulness": "Usefulness",
+    "tone_and_language_style": "Tone & Language Style",
+    "naturalness": "Naturalness",
+    "detail_and_technical_language": "Detail & Technical Language",
+    "accuracy": "Accuracy",
+    "sharpness": "Sharpness",
+    "intuitive": "Intuitiveness",
+    "flexibility": "Flexibility",
+    "clarity": "Clarity",
+    "perceptiveness": "Perceptiveness",
+    "consistency": "Consistency",
+    "confidence": "Confidence",
+    "transparency": "Transparency",
+    "personality-consistency": "Personality Consistency",
+    "personality-definition": "Personality Definition",
+    "honesty-empathy-fairness": "Honesty, Empathy & Fairness",
+    "alignment": "Alignment",
+    "cultural_relevance": "Cultural Relevance",
+    "bias_freedom": "Freedom from Bias",
+    "background_and_culture": "Background and Culture"
+  };
+  
+  return aspectMap[aspect] || (aspect ? aspect.replace(/_/g, ' ').replace(/-/g, ' ').replace(/\b\w/g, l => l.toUpperCase()) : aspect);
+};
+
+// Format and style value differences
+const formatDifference = (value, isPercent = false) => {
+  const formatted = isPercent ? `${Math.abs(value).toFixed(1)}%` : Math.abs(value).toFixed(1);
+  const prefix = value > 0 ? '+' : value < 0 ? '-' : '';
+  return `${prefix}${formatted}`;
+};
+
+// Get color for difference values with consistent scale
+const getDiffColor = (value, scale = "normal") => {
+  // For facet scores (-100 to +100)
+  if (scale === "facet") {
+    if (value > 10) return 'text-green-600';
+    if (value < -10) return 'text-red-600';
+    return 'text-gray-600';
+  }
+  
+  // For aspect scores (0 to 100)
+  if (scale === "aspect") {
+    if (value > 5) return 'text-green-600';
+    if (value < -5) return 'text-red-600';
+    return 'text-gray-600';
+  }
+  
+  // Default
+  if (value > 0.3) return 'text-green-600';
+  if (value < -0.3) return 'text-red-600';
+  return 'text-gray-600';
+};
+
+// Custom tooltip with proper formatting
+const CustomTooltip = ({ active, payload, label }) => {
+  if (active && payload && payload.length) {
+    const formattedLabel = label.includes('_') ? formatFacetName(label.toLowerCase()) : label;
+    
+    return (
+      <div className="bg-white p-3 border rounded shadow-sm">
+        <p className="font-medium">{formattedLabel}</p>
+        <div className="mt-2">
+          {payload
+            .filter(entry => !entry.dataKey.includes('_std') && !entry.dataKey.includes('difference'))
+            .map((entry, index) => {
+              const stdEntry = payload.find(p => p.dataKey === `${entry.dataKey}_std`);
+              const stdValue = stdEntry ? stdEntry.value : 0;
+              
+              return (
+                <div key={index} className="flex items-center text-sm mb-1">
+                  <div 
+                    className="w-3 h-3 rounded-full mr-1" 
+                    style={{ backgroundColor: entry.color }}
+                  ></div>
+                  <span className="mr-2">{entry.name}:</span>
+                  <span className="font-medium">{entry.value.toFixed(1)} {stdValue ? `± ${stdValue.toFixed(1)}` : ''}</span>
+                </div>
+              );
+            })}
+          
+          {/* Add difference if available */}
+          {payload.find(p => p.dataKey === 'difference') && (
+            <div className="mt-2 pt-1 border-t">
+              <div className="flex items-center text-sm">
+                <span className="mr-2">Difference:</span>
+                <span className={`font-medium ${getDiffColor(payload.find(p => p.dataKey === 'difference').value, 'facet')}`}>
+                  {formatDifference(payload.find(p => p.dataKey === 'difference').value)}
+                </span>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+  return null;
+};
+
+// Custom tooltip for comparative bar chart
+const ComparativeBarTooltip = ({ active, payload, label }) => {
+  if (active && payload && payload.length) {
+    const model1 = payload[0]?.name;
+    const model2 = payload[1]?.name;
+    const model1Value = payload[0]?.value;
+    const model2Value = payload[1]?.value;
+    const difference = model1Value !== undefined && model2Value !== undefined ? model1Value - model2Value : null;
+    
+    return (
+      <div className="bg-white p-3 border rounded shadow-sm">
+        <p className="font-medium mb-1">{label}</p>
+        {payload.map((entry, index) => (
+          <div key={index} className="flex items-center text-sm mb-1">
+            <div 
+              className="w-3 h-3 rounded-full mr-1" 
+              style={{ backgroundColor: entry.color }}
+            ></div>
+            <span className="mr-2">{entry.name}:</span>
+            <span className="font-medium">{entry.value.toFixed(1)}</span>
+          </div>
+        ))}
+        {difference !== null && (
+          <div className={`text-sm mt-1 pt-1 border-t ${getDiffColor(difference, 'aspect')}`}>
+            Difference: {formatDifference(difference)}
+          </div>
+        )}
+      </div>
+    );
+  }
+  return null;
+};
+
+const HeadToHeadComparison = ({ data }) => {
+  const [compareModels, setCompareModels] = useState([]);
+  const [selectedView, setSelectedView] = useState("overview");
+  const [showCommonTasksOnly, setShowCommonTasksOnly] = useState(true);
+  const [selectedTaskType, setSelectedTaskType] = useState("all");
+  const [selectedDemographic, setSelectedDemographic] = useState("all");
+  
+  const {
+    models,
+    taskData,
+    taskCategories,
+    radarData,
+    facets,
+    demographicSummary,
+    demographicOptions
+  } = data || {
+    models: [],
+    taskData: [],
+    taskCategories: {},
+    radarData: [],
+    facets: {},
+    demographicSummary: {},
+    demographicOptions: {}
+  };
+
+  // Initialize compare models if empty
+  useEffect(() => {
+    if (compareModels.length === 0 && models.length > 1) {
+      setCompareModels([models[0].model, models[1].model]);
+    }
+  }, [models, compareModels]);
+  
+  // Get model data by name (memoized)
+  const getModelByName = useCallback((name) => {
+    return models.find(m => m.model === name);
+  }, [models]);
+  
+  // Generate data for the radar chart comparison (memoized)
+  const comparisonRadarData = useMemo(() => {
+    if (compareModels.length !== 2 || !radarData) return [];
+    
+    return radarData.map(item => {
+      const category = item.category;
+      const model1Score = item[compareModels[0]] || 0;
+      const model2Score = item[compareModels[1]] || 0;
+      
+      return {
+        category,
+        [compareModels[0]]: model1Score,
+        [compareModels[1]]: model2Score,
+        difference: model1Score - model2Score
+      };
+    });
+  }, [compareModels, radarData]);
+  
+  // Get task comparison data (memoized)
+  const taskComparisonData = useMemo(() => {
+    if (compareModels.length !== 2 || !taskData) return [];
+    
+    // Filter tasks based on selectedTaskType
+    let filteredTasks = [...taskData];
+    if (selectedTaskType !== "all") {
+      filteredTasks = taskData.filter(task => 
+        taskCategories[selectedTaskType]?.includes(task.task)
+      );
+    }
+    
+    // Filter for common tasks if requested
+    if (showCommonTasksOnly) {
+      filteredTasks = filteredTasks.filter(task => 
+        task[compareModels[0]] !== undefined && 
+        task[compareModels[1]] !== undefined
+      );
+    }
+    
+    return filteredTasks.map(task => {
+      const model1Score = task[compareModels[0]] || 0;
+      const model2Score = task[compareModels[1]] || 0;
+      
+      return {
+        task: task.task,
+        category: task.category,
+        [compareModels[0]]: model1Score,
+        [compareModels[1]]: model2Score,
+        difference: model1Score - model2Score
+      };
+    }).sort((a, b) => Math.abs(b.difference) - Math.abs(a.difference));
+  }, [compareModels, taskData, selectedTaskType, showCommonTasksOnly, taskCategories]);
+  
+  // Get facet comparison data (memoized)
+  const facetComparisonData = useMemo(() => {
+    if (compareModels.length !== 2 || !radarData) return [];
+    
+    return radarData
+      .filter(item => item.category !== "Repeat Usage") // Skip repeat usage
+      .map(item => {
+        const model1Score = item[compareModels[0]] || 0;
+        const model2Score = item[compareModels[1]] || 0;
+        
+        return {
+          facet: item.category,
+          [compareModels[0]]: model1Score,
+          [compareModels[1]]: model2Score,
+          difference: model1Score - model2Score
+        };
+      })
+      .sort((a, b) => Math.abs(b.difference) - Math.abs(a.difference));
+  }, [compareModels, radarData]);
+  
+  // Get aspect comparison data for all facets (memoized)
+  const aspectComparisonData = useMemo(() => {
+    if (compareModels.length !== 2) return [];
+    
+    const model1 = getModelByName(compareModels[0]);
+    const model2 = getModelByName(compareModels[1]);
+    
+    if (!model1 || !model2 || !facets) return [];
+    
+    const aspectData = [];
+    
+    // For each facet, get aspect comparison
+    Object.entries(facets).forEach(([facet, aspects]) => {
+      if (facet === "repeat_usage") return; // Skip repeat usage
+      
+      // For each aspect in this facet
+      aspects.forEach(aspect => {
+        const model1Score = model1.breakdown_scores?.[aspect] || 0;
+        const model2Score = model2.breakdown_scores?.[aspect] || 0;
+        
+        aspectData.push({
+          facet: formatFacetName(facet),
+          aspect: formatAspectName(aspect),
+          [model1.model]: model1Score,
+          [model2.model]: model2Score,
+          difference: model1Score - model2Score
+        });
+      });
+    });
+    
+    return aspectData.sort((a, b) => Math.abs(b.difference) - Math.abs(a.difference));
+  }, [compareModels, facets, getModelByName]);
+  
+  // Calculate key findings & summary stats (memoized)
+  const summaryStats = useMemo(() => {
+    if (compareModels.length !== 2) return null;
+    
+    const model1 = getModelByName(compareModels[0]);
+    const model2 = getModelByName(compareModels[1]);
+    
+    if (!model1 || !model2) return null;
+    
+    // Count tasks where each model wins
+    const model1Wins = taskComparisonData.filter(t => t[compareModels[0]] > t[compareModels[1]]).length;
+    const model2Wins = taskComparisonData.filter(t => t[compareModels[1]] > t[compareModels[0]]).length;
+    const ties = taskComparisonData.filter(t => t[compareModels[0]] === t[compareModels[1]]).length;
+    
+    // Calculate average difference across all tasks
+    const avgDifference = taskComparisonData.length > 0 
+      ? taskComparisonData.reduce((sum, task) => sum + (task[compareModels[0]] - task[compareModels[1]]), 0) / taskComparisonData.length
+      : 0;
+    
+    // Find biggest win for each model
+    const model1BiggestWin = [...taskComparisonData].sort((a, b) => b.difference - a.difference)[0];
+    const model2BiggestWin = [...taskComparisonData].sort((a, b) => a.difference - b.difference)[0];
+    
+    // Facet where each model most outperforms the other
+    const model1BestFacet = [...facetComparisonData].sort((a, b) => b.difference - a.difference)[0];
+    const model2BestFacet = [...facetComparisonData].sort((a, b) => a.difference - b.difference)[0];
+    
+    // Aspect where each model most outperforms the other
+    const model1BestAspect = [...aspectComparisonData].sort((a, b) => b.difference - a.difference)[0];
+    const model2BestAspect = [...aspectComparisonData].sort((a, b) => a.difference - b.difference)[0];
+    
+    return {
+      model1,
+      model2,
+      model1Wins,
+      model2Wins,
+      ties,
+      avgDifference,
+      model1BiggestWin,
+      model2BiggestWin,
+      model1BestFacet,
+      model2BestFacet,
+      model1BestAspect,
+      model2BestAspect
+    };
+  }, [compareModels, getModelByName, taskComparisonData, facetComparisonData, aspectComparisonData]);
+  
+  // Create comparative stats for high level metrics
+  const highLevelComparison = useMemo(() => {
+    if (compareModels.length !== 2) return [];
+    
+    const model1 = getModelByName(compareModels[0]);
+    const model2 = getModelByName(compareModels[1]);
+    
+    if (!model1 || !model2) return [];
+    
+    // Define the metrics to compare
+    const metrics = [
+      { name: 'Overall Score', key: 'overall_score', model1: model1.overall_score, model2: model2.overall_score, scale: "aspect" },
+      { name: 'Would Use Again', key: 'repeat_usage_pct', model1: model1.repeat_usage_pct, model2: model2.repeat_usage_pct, isPercent: true }
+    ];
+    
+    // Add facet comparisons
+    if (model1.facet_scores && model2.facet_scores) {
+      Object.keys(model1.facet_scores)
+        .filter(key => !key.includes('_std') && key !== 'repeat_usage') // Skip std and repeat_usage
+        .forEach(facet => {
+          metrics.push({
+            name: formatFacetName(facet),
+            key: `facet_${facet}`,
+            model1: model1.facet_scores[facet],
+            model2: model2.facet_scores[facet],
+            scale: "facet"
+          });
+        });
+    }
+    
+    return metrics.map(metric => ({
+      name: metric.name,
+      key: metric.key,
+      [model1.model]: metric.model1,
+      [model2.model]: metric.model2,
+      difference: metric.model1 - metric.model2,
+      percentDifference: ((metric.model1 - metric.model2) / Math.abs(metric.model2)) * 100,
+      isPercent: metric.isPercent,
+      scale: metric.scale
+    }));
+  }, [compareModels, getModelByName]);
+  
+  return (
+    <div>
+      <h2 className="text-2xl font-bold mb-2">Head-to-Head Model Comparison</h2>
+      <p className="text-gray-600 mb-4">
+        Directly compare two models across all performance metrics to identify strengths and 
+        weaknesses of each model relative to one another.
+      </p>
+      
+      {/* Sticky Model Selection Panel */}
+      <div className="sticky top-0 z-10 bg-white border rounded-lg p-4 mb-6 shadow-sm">
+        <div className="flex flex-wrap items-center justify-between">
+          <div className="flex items-center space-x-4">
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">First Model</label>
+              <select
+                className="border rounded p-1.5 bg-white shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500"
+                value={compareModels[0] || ''}
+                onChange={(e) => setCompareModels([e.target.value, compareModels[1] || ''])}
+              >
+                {models.map(model => (
+                  <option 
+                    key={`model1-${model.model}`} 
+                    value={model.model}
+                    disabled={model.model === compareModels[1]}
+                  >
+                    {model.model}
+                  </option>
+                ))}
+              </select>
+            </div>
+            
+            <div className="text-lg font-bold text-gray-500">vs</div>
+            
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Second Model</label>
+              <select
+                className="border rounded p-1.5 bg-white shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500"
+                value={compareModels[1] || ''}
+                onChange={(e) => setCompareModels([compareModels[0] || '', e.target.value])}
+              >
+                {models.map(model => (
+                  <option 
+                    key={`model2-${model.model}`} 
+                    value={model.model}
+                    disabled={model.model === compareModels[0]}
+                  >
+                    {model.model}
+                  </option>
+                ))}
+              </select>
+            </div>
+          </div>
+          
+          <div className="mt-2 sm:mt-0">
+            <label className="text-sm text-gray-500 mr-2">Show only tasks with data for both models:</label>
+            <button
+              className={`px-3 py-1 text-xs font-medium rounded ${
+                showCommonTasksOnly 
+                  ? "bg-blue-100 text-blue-800 border border-blue-300" 
+                  : "bg-gray-100 text-gray-800 border border-gray-300"
+              }`}
+              onClick={() => setShowCommonTasksOnly(!showCommonTasksOnly)}
+            >
+              {showCommonTasksOnly ? 'Common Tasks Only' : 'All Tasks'}
+            </button>
+          </div>
+        </div>
+      </div>
+      
+      {/* Tab Navigation */}
+      <div className="mb-4 border-b">
+        <div className="flex flex-wrap">
+          {["overview", "tasks", "facets", "aspects", "demographics"].map((tab) => (
+            <button
+              key={tab}
+              className={`px-6 py-3 font-medium text-sm ${
+                selectedView === tab
+                  ? "bg-white text-blue-700 border-b-2 border-blue-500"
+                  : "text-gray-600 hover:text-gray-800 hover:bg-gray-50"
+              }`}
+              onClick={() => setSelectedView(tab)}
+            >
+              {tab.charAt(0).toUpperCase() + tab.slice(1)}
+            </button>
+          ))}
+        </div>
+      </div>
+      
+      {/* Key Findings Section (Always Visible) */}
+      {summaryStats && (
+        <div className="border rounded-lg overflow-hidden mb-6 bg-blue-50">
+          <div className="px-4 py-2 bg-blue-100 border-b">
+            <h3 className="font-semibold">Key Insights</h3>
+          </div>
+          <div className="p-4">
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+              {/* Overall Comparison */}
+              <div className="bg-white rounded-lg shadow-sm p-3">
+                <h4 className="text-sm font-medium text-gray-700 mb-2">Overall Comparison</h4>
+                <div className="flex items-center mb-2">
+                  <div className="w-3 h-3 rounded-full mr-1" style={{ backgroundColor: summaryStats.model1.color }}></div>
+                  <span className="font-medium mr-2">{summaryStats.model1.model}:</span>
+                  <span>{summaryStats.model1.overall_score.toFixed(1)}</span>
+                </div>
+                <div className="flex items-center mb-2">
+                  <div className="w-3 h-3 rounded-full mr-1" style={{ backgroundColor: summaryStats.model2.color }}></div>
+                  <span className="font-medium mr-2">{summaryStats.model2.model}:</span>
+                  <span>{summaryStats.model2.overall_score.toFixed(1)}</span>
+                </div>
+                <div className="mt-2 text-sm">
+                  <span className="font-medium">Average Difference: </span>
+                  <span className={
+                    Math.abs(summaryStats.avgDifference) < 1 ? "text-gray-600" :
+                    summaryStats.avgDifference > 0 ? "text-green-600 font-medium" : "text-red-600 font-medium"
+                  }>
+                    {summaryStats.avgDifference > 0 ? '+' : ''}{summaryStats.avgDifference.toFixed(1)}
+                  </span>
+                </div>
+              </div>
+              
+              {/* Task Wins */}
+              <div className="bg-white rounded-lg shadow-sm p-3">
+                <h4 className="text-sm font-medium text-gray-700 mb-2">Task Win Distribution</h4>
+                <div className="flex items-center justify-between mb-1">
+                  <div className="flex items-center">
+                    <div className="w-3 h-3 rounded-full mr-1" style={{ backgroundColor: summaryStats.model1.color }}></div>
+                    <span>{summaryStats.model1.model}</span>
+                  </div>
+                  <span className="font-medium">{summaryStats.model1Wins} tasks</span>
+                </div>
+                <div className="flex items-center justify-between mb-1">
+                  <div className="flex items-center">
+                    <div className="w-3 h-3 rounded-full mr-1" style={{ backgroundColor: summaryStats.model2.color }}></div>
+                    <span>{summaryStats.model2.model}</span>
+                  </div>
+                  <span className="font-medium">{summaryStats.model2Wins} tasks</span>
+                </div>
+                {summaryStats.ties > 0 && (
+                  <div className="flex items-center justify-between">
+                    <span className="text-gray-600">Ties</span>
+                    <span className="font-medium">{summaryStats.ties} tasks</span>
+                  </div>
+                )}
+              </div>
+              
+              {/* Key Advantages */}
+              <div className="bg-white rounded-lg shadow-sm p-3">
+                <h4 className="text-sm font-medium text-gray-700 mb-2">Biggest Advantages</h4>
+                {summaryStats.model1BiggestWin && (
+                  <div className="mb-2">
+                    <div className="flex items-center">
+                      <div className="w-3 h-3 rounded-full mr-1" style={{ backgroundColor: summaryStats.model1.color }}></div>
+                      <span className="font-medium text-sm">{summaryStats.model1.model}:</span>
+                    </div>
+                    <div className="text-sm ml-4 mt-0.5">
+                      {summaryStats.model1BiggestWin.task.length > 30 
+                        ? summaryStats.model1BiggestWin.task.slice(0, 30) + '...' 
+                        : summaryStats.model1BiggestWin.task}
+                      <span className="text-green-600 font-medium ml-1">
+                        (+{summaryStats.model1BiggestWin.difference.toFixed(1)})
+                      </span>
+                    </div>
+                  </div>
+                )}
+                {summaryStats.model2BiggestWin && (
+                  <div>
+                    <div className="flex items-center">
+                      <div className="w-3 h-3 rounded-full mr-1" style={{ backgroundColor: summaryStats.model2.color }}></div>
+                      <span className="font-medium text-sm">{summaryStats.model2.model}:</span>
+                    </div>
+                    <div className="text-sm ml-4 mt-0.5">
+                      {summaryStats.model2BiggestWin.task.length > 30 
+                        ? summaryStats.model2BiggestWin.task.slice(0, 30) + '...' 
+                        : summaryStats.model2BiggestWin.task}
+                      <span className="text-green-600 font-medium ml-1">
+                        (+{Math.abs(summaryStats.model2BiggestWin.difference).toFixed(1)})
+                      </span>
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+      
+      {/* OVERVIEW TAB */}
+      {selectedView === "overview" && summaryStats && (
+        <div>
+          {/* Side-by-side charts */}
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
+            {/* Radar Chart */}
+            <div className="border rounded-lg overflow-hidden">
+              <div className="px-4 py-2 bg-gray-50 border-b">
+                <h3 className="font-semibold">Facet Comparison</h3>
+              </div>
+              <div className="p-4">
+                <div className="h-80">
+                  <ResponsiveContainer width="100%" height="100%">
+                    <RadarChart
+                      outerRadius={130}
+                      data={comparisonRadarData}
+                      margin={{ top: 30, right: 30, bottom: 30, left: 30 }}
+                    >
+                      <PolarGrid gridType="polygon" />
+                      <PolarAngleAxis 
+                        dataKey="category" 
+                        tick={{ fill: '#4b5563', fontSize: 14 }}
+                        tickLine={false}
+                        tickFormatter={(value) => {
+                          if (value.includes('_') || value === "Insightful") {
+                            return formatFacetName(value.toLowerCase());
+                          }
+                          return value;
+                        }}
+                      />
+                      <PolarRadiusAxis 
+                        angle={90} 
+                        domain={[-100, 100]}
+                        axisLine={false}
+                        tickCount={5}
+                      />
+                      {compareModels.map(modelName => {
+                        const model = getModelByName(modelName);
+                        return (
+                          <Radar
+                            key={modelName}
+                            name={modelName}
+                            dataKey={modelName}
+                            stroke={model?.color || '#999'}
+                            fill={model?.color || '#999'}
+                            fillOpacity={0.2}
+                            strokeWidth={2}
+                          />
+                        );
+                      })}
+                      <Tooltip content={<CustomTooltip />} />
+                      <Legend />
+                    </RadarChart>
+                  </ResponsiveContainer>
+                </div>
+              </div>
+            </div>
+            
+            {/* Gap Analysis */}
+            <div className="border rounded-lg overflow-hidden">
+              <div className="px-4 py-2 bg-gray-50 border-b">
+                <h3 className="font-semibold">Facet Gap Analysis</h3>
+              </div>
+              <div className="p-4">
+                <div className="h-80">
+                  <ResponsiveContainer width="100%" height="100%">
+                    <ComposedChart
+                      layout="vertical"
+                      data={facetComparisonData}
+                      margin={{ top: 20, right: 60, left: 100, bottom: 20 }}
+                    >
+                      <CartesianGrid strokeDasharray="3 3" />
+                      <XAxis 
+                        type="number" 
+                        domain={[-50, 50]}
+                        tickFormatter={(value) => value > 0 ? `+${value.toFixed(0)}` : value.toFixed(0)}
+                      />
+                      <YAxis 
+                        dataKey="facet" 
+                        type="category"
+                        width={100}
+                      />
+                      <Tooltip 
+                        formatter={(value) => [value.toFixed(1), 'Difference']}
+                      />
+                      <Legend />
+                      <Bar 
+                        dataKey="difference" 
+                        name={`${compareModels[0]} vs ${compareModels[1]}`}
+                        barSize={20}
+                      >
+                        {facetComparisonData.map((entry, index) => (
+                          <Cell 
+                            key={`cell-${index}`}
+                            fill={entry.difference > 0 ? getModelByName(compareModels[0])?.color : getModelByName(compareModels[1])?.color}
+                          />
+                        ))}
+                      </Bar>
+                      <ReferenceLine x={0} stroke="#666" strokeWidth={2} />
+                    </ComposedChart>
+                  </ResponsiveContainer>
+                </div>
+                <div className="text-xs text-gray-500 text-center mt-2">
+                  Bars extending right indicate {compareModels[0]} is better, left means {compareModels[1]} is better.
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          {/* Key Metrics Table */}
+          <div className="border rounded-lg overflow-hidden mb-6">
+            <div className="px-4 py-2 bg-gray-50 border-b">
+              <h3 className="font-semibold">Key Metrics Comparison</h3>
+            </div>
+            <div className="p-4">
+              <div className="overflow-x-auto">
+                <table className="min-w-full divide-y divide-gray-200">
+                  <thead className="bg-gray-50">
+                    <tr>
+                      <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Metric</th>
+                      {compareModels.map(modelName => {
+                        const model = getModelByName(modelName);
+                        return (
+                          <th key={modelName} className="px-4 py-2 text-left text-xs font-medium uppercase tracking-wider" style={{ color: model?.color }}>
+                            {modelName}
+                          </th>
+                        );
+                      })}
+                      <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Difference</th>
+                    </tr>
+                  </thead>
+                  <tbody className="bg-white divide-y divide-gray-200">
+                    {highLevelComparison.map((metric) => (
+                      <tr key={metric.key} className="hover:bg-gray-50">
+                        <td className="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">
+                          {metric.name}
+                        </td>
+                        {compareModels.map(modelName => {
+                          const value = metric[modelName];
+                          const isPercent = metric.isPercent;
+                          
+                          return (
+                            <td key={`${metric.key}-${modelName}`} className="px-4 py-3 whitespace-nowrap text-sm text-gray-700">
+                              <span className={`font-medium ${metric.difference !== 0 && modelName === compareModels[0] && metric.difference > 0 ? 'text-green-600' : ''} ${metric.difference !== 0 && modelName === compareModels[1] && metric.difference < 0 ? 'text-green-600' : ''}`}>
+                                {isPercent ? `${value.toFixed(1)}%` : value.toFixed(1)}
+                              </span>
+                            </td>
+                          );
+                        })}
+                        <td className="px-4 py-3 whitespace-nowrap text-sm">
+                          <span className={`font-medium ${getDiffColor(metric.difference, metric.scale)}`}>
+                            {formatDifference(metric.difference, metric.isPercent)}
+                          </span>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+              <div className="text-xs text-gray-500 mt-3">
+                Differences are calculated as {compareModels[0]} minus {compareModels[1]}. Positive values indicate {compareModels[0]} is higher.
+              </div>
+            </div>
+          </div>
+          
+          {/* Interactive Recommendation */}
+          <div className="border rounded-lg overflow-hidden mb-6 bg-blue-50">
+            <div className="px-4 py-2 bg-blue-100 border-b">
+              <h3 className="font-semibold">When to Use Each Model</h3>
+            </div>
+            <div className="p-4 text-sm text-gray-800">
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
+                <div className="bg-white rounded-lg p-4 shadow-sm">
+                  <h4 className="font-medium mb-2" style={{ color: summaryStats.model1.color }}>
+                    When to use {summaryStats.model1.model}:
+                  </h4>
+                  <ul className="list-disc pl-5 space-y-1 text-sm">
+                    <li>For {summaryStats.model1BestFacet?.facet.toLowerCase() || 'overall'} focused tasks</li>
+                    {summaryStats.model1BiggestWin && (
+                      <li>When working on tasks like "{summaryStats.model1BiggestWin.task}"</li>
+                    )}
+                    {summaryStats.model1BestAspect && (
+                      <li>When {summaryStats.model1BestAspect.aspect.toLowerCase()} is important</li>
+                    )}
+                  </ul>
+                </div>
+                <div className="bg-white rounded-lg p-4 shadow-sm">
+                  <h4 className="font-medium mb-2" style={{ color: summaryStats.model2.color }}>
+                    When to use {summaryStats.model2.model}:
+                  </h4>
+                  <ul className="list-disc pl-5 space-y-1 text-sm">
+                    <li>For {summaryStats.model2BestFacet?.facet.toLowerCase() || 'overall'} focused tasks</li>
+                    {summaryStats.model2BiggestWin && (
+                      <li>When working on tasks like "{summaryStats.model2BiggestWin.task}"</li>
+                    )}
+                    {summaryStats.model2BestAspect && (
+                      <li>When {summaryStats.model2BestAspect.aspect.toLowerCase()} is important</li>
+                    )}
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+      
+      {/* TASKS TAB */}
+      {selectedView === "tasks" && (
+        <div>
+          {/* Task Type Filter */}
+          <div className="mb-4 overflow-x-auto pb-2">
+            <div className="flex space-x-2">
+              <button
+                className={`px-3 py-1 text-sm font-medium rounded-full whitespace-nowrap ${
+                  selectedTaskType === "all"
+                    ? "bg-blue-100 text-blue-800"
+                    : "bg-gray-100 text-gray-800"
+                }`}
+                onClick={() => setSelectedTaskType("all")}
+              >
+                All Tasks
+              </button>
+              {Object.keys(taskCategories || {}).map(category => (
+                <button
+                  key={category}
+                  className={`px-3 py-1 text-sm font-medium rounded-full whitespace-nowrap ${
+                    selectedTaskType === category
+                      ? "bg-blue-100 text-blue-800"
+                      : "bg-gray-100 text-gray-800"
+                  }`}
+                  onClick={() => setSelectedTaskType(category)}
+                >
+                  {category.charAt(0).toUpperCase() + category.slice(1)}
+                </button>
+              ))}
+            </div>
+          </div>
+          
+          {/* Task Comparison Section */}
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
+            {/* Bar Chart */}
+            <div className="border rounded-lg overflow-hidden">
+              <div className="px-4 py-2 bg-gray-50 border-b flex justify-between items-center">
+                <h3 className="font-semibold">Performance Comparison</h3>
+              </div>
+              <div className="p-4">
+                <div className="h-[450px]">
+                  <ResponsiveContainer width="100%" height="100%">
+                    <BarChart
+                      data={taskComparisonData.slice(0, 10)} // Top 10 for clarity
+                      layout="vertical"
+                      margin={{ top: 5, right: 30, left: 150, bottom: 5 }}
+                    >
+                      <CartesianGrid strokeDasharray="3 3" />
+                      <XAxis type="number" domain={[0, 100]} />
+                      <YAxis 
+                        dataKey="task" 
+                        type="category" 
+                        width={150}
+                        tick={{ fontSize: 12 }}
+                      />
+                      <Tooltip content={<ComparativeBarTooltip />} />
+                      <Legend />
+                      {compareModels.map(modelName => {
+                        const model = getModelByName(modelName);
+                        return (
+                          <Bar 
+                            key={modelName}
+                            dataKey={modelName}
+                            name={modelName}
+                            fill={model?.color || '#999'}
+                            maxBarSize={20}
+                          />
+                        );
+                      })}
+                    </BarChart>
+                  </ResponsiveContainer>
+                </div>
+                <div className="text-xs text-gray-500 text-center mt-2">
+                  Showing top 10 tasks with the largest performance differences
+                </div>
+              </div>
+            </div>
+            
+            {/* Gap Analysis */}
+            <div className="border rounded-lg overflow-hidden">
+              <div className="px-4 py-2 bg-gray-50 border-b">
+                <h3 className="font-semibold">Task Performance Gap</h3>
+              </div>
+              <div className="p-4">
+                <div className="h-[450px]">
+                  <ResponsiveContainer width="100%" height="100%">
+                    <ComposedChart
+                      layout="vertical"
+                      data={taskComparisonData.slice(0, 10)}
+                      margin={{ top: 20, right: 30, left: 150, bottom: 20 }}
+                    >
+                      <CartesianGrid strokeDasharray="3 3" />
+                      <XAxis 
+                        type="number" 
+                        domain={[-30, 30]}
+                        tickFormatter={(value) => value > 0 ? `+${value.toFixed(0)}` : value.toFixed(0)}
+                      />
+                      <YAxis 
+                        dataKey="task" 
+                        type="category"
+                        width={150}
+                        tick={{ fontSize: 11 }}
+                      />
+                      <Tooltip 
+                        formatter={(value) => [value.toFixed(1), 'Difference']}
+                      />
+                      <Legend />
+                      <Bar 
+                        dataKey="difference" 
+                        name={`${compareModels[0]} vs ${compareModels[1]}`}
+                        barSize={20}
+                      >
+                        {taskComparisonData.slice(0, 10).map((entry, index) => (
+                          <Cell 
+                            key={`cell-${index}`}
+                            fill={entry.difference > 0 ? getModelByName(compareModels[0])?.color : getModelByName(compareModels[1])?.color}
+                          />
+                        ))}
+                      </Bar>
+                      <ReferenceLine x={0} stroke="#666" strokeWidth={2} />
+                    </ComposedChart>
+                  </ResponsiveContainer>
+                </div>
+                <div className="text-xs text-gray-500 text-center mt-2">
+                  Bars to the right indicate {compareModels[0]} is better, to the left indicate {compareModels[1]} is better.
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          {/* Task Comparison Table */}
+          <div className="border rounded-lg overflow-hidden mb-6">
+            <div className="px-4 py-2 bg-gray-50 border-b flex justify-between items-center">
+              <h3 className="font-semibold">Task Comparison Details</h3>
+              <button
+                onClick={() => setShowCommonTasksOnly(!showCommonTasksOnly)}
+                className={`px-2 py-1 rounded text-xs ${showCommonTasksOnly ? 'bg-blue-100 text-blue-800' : 'bg-gray-100 text-gray-600'}`}
+              >
+                {showCommonTasksOnly ? 'Common Tasks Only' : 'All Tasks'}
+              </button>
+            </div>
+            <div className="p-4">
+              <div className="overflow-x-auto">
+                <table className="min-w-full divide-y divide-gray-200">
+                  <thead className="bg-gray-50">
+                    <tr>
+                      <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Task</th>
+                      <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Category</th>
+                      <th className="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">{compareModels[0]}</th>
+                      <th className="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">{compareModels[1]}</th>
+                      <th className="px-4 py-2 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Difference</th>
+                      <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Better Model</th>
+                    </tr>
+                  </thead>
+                  <tbody className="bg-white divide-y divide-gray-200">
+                    {taskComparisonData.slice(0, 15).map((task, idx) => (
+                      <tr key={task.task} className={idx % 2 === 0 ? 'bg-white' : 'bg-gray-50'}>
+                        <td className="px-4 py-2 text-sm whitespace-normal">{task.task}</td>
+                        <td className="px-4 py-2 text-sm">{task.category}</td>
+                        <td className="px-4 py-2 text-sm text-right">{task[compareModels[0]].toFixed(1)}</td>
+                        <td className="px-4 py-2 text-sm text-right">{task[compareModels[1]].toFixed(1)}</td>
+                        <td className="px-4 py-2 text-sm text-center">
+                          <span className={`font-medium ${getDiffColor(task.difference, "aspect")}`}>
+                            {task.difference > 0 ? '+' : ''}{task.difference.toFixed(1)}
+                          </span>
+                        </td>
+                        <td className="px-4 py-2 text-sm">
+                          {task.difference !== 0 && (
+                            <div className="flex items-center">
+                              <div 
+                                className="w-3 h-3 rounded-full mr-1"
+                                style={{ backgroundColor: task.difference > 0 
+                                  ? getModelByName(compareModels[0])?.color 
+                                  : getModelByName(compareModels[1])?.color 
+                                }}
+                              ></div>
+                              <span>{task.difference > 0 ? compareModels[0] : compareModels[1]}</span>
+                            </div>
+                          )}
+                          {task.difference === 0 && (
+                            <span className="text-gray-500">Tie</span>
+                          )}
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+              {taskComparisonData.length > 15 && (
+                <div className="text-center mt-3 text-sm text-gray-500">
+                  Showing 15 of {taskComparisonData.length} tasks. Tasks are sorted by largest difference.
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+      
+      {/* Include implementations for other tabs (facets, aspects, demographics) */}
+      
+    </div>
+  );
+};
+
+export default HeadToHeadComparison;

leaderboard-app/components/LLMComparisonDashboard.jsx

@@ -0,0 +1,688 @@
+"use client";
+
+import React, { useState, useMemo } from "react";
+import { getScoreBadgeColor } from "../lib/utils";
+import TaskDemographicAnalysis from "./TaskDemographicAnalysis";
+import MetricsBreakdown from "./MetricsBreakdown";
+import HeadToHeadComparison from "./HeadToHeadComparison";
+
+// Reusable component for displaying scores with standard deviation
+const ScoreWithStdDev = ({ score, stdDev, colorClass }) => {
+  return (
+    <span
+      className={`px-2 py-1 inline-flex text-xs font-semibold rounded-full ${colorClass}`}
+    >
+      {score.toFixed(2)} ± {stdDev.toFixed(2)}
+    </span>
+  );
+};
+
+const formatFacetName = (facet) => {
+  if (!facet) return "Unknown"; // Handle null or undefined facet
+
+  const facetMap = {
+    helpfulness: "Helpfulness",
+    communication: "Communication",
+    insightful: "Insightfulness",
+    adaptiveness: "Adaptiveness",
+    trustworthiness: "Trustworthiness",
+    personality: "Personality",
+    background_and_culture: "Cultural Awareness",
+  };
+
+  return (
+    facetMap[facet] ||
+    facet.replace(/_/g, " ").replace(/\b\w/g, (l) => l.toUpperCase())
+  );
+};
+
+const LLMComparisonDashboard = ({ data }) => {
+  const [activeTab, setActiveTab] = useState("overview");
+  const [sortConfig, setSortConfig] = useState({
+    key: "overall_score",
+    direction: "descending",
+  });
+
+  const {
+    models,
+    radarData,
+    bestModelPerCategory,
+    taskCategories,
+    keyAspectsByTask
+  } = data || {
+    models: [],
+    radarData: [],
+    taskData: [],
+    bestModelPerCategory: {},
+    bestModelPerFacet: {},
+    taskCategories: {},
+    facets: {},
+    demographicSummary: {},
+    fairnessMetrics: {},
+    demographicOptions: {},
+    keyAspectsByTask: {}
+  };
+
+  // Request sort function
+  const requestSort = (key) => {
+    let direction = "descending";
+    if (sortConfig.key === key && sortConfig.direction === "descending") {
+      direction = "ascending";
+    }
+    setSortConfig({ key, direction });
+  };
+
+  // Get sorted models
+  const sortedModels = useMemo(() => {
+    let sortableItems = [...models];
+    if (sortConfig.key !== null) {
+      sortableItems.sort((a, b) => {
+        let aValue, bValue;
+
+        // Handle nested properties for facet scores
+        if (sortConfig.key.includes(".")) {
+          const [group, metric] = sortConfig.key.split(".");
+          if (group === "facet_scores") {
+            aValue = a.facet_scores[metric];
+            bValue = b.facet_scores[metric];
+          } else {
+            aValue = a[sortConfig.key];
+            bValue = b[sortConfig.key];
+          }
+        } else if (sortConfig.key === "model") {
+          aValue = a.model;
+          bValue = b.model;
+        } else {
+          // For other properties directly on the model object
+          aValue = a[sortConfig.key];
+          bValue = b[sortConfig.key];
+        }
+
+        if (aValue < bValue) {
+          return sortConfig.direction === "ascending" ? -1 : 1;
+        }
+        if (aValue > bValue) {
+          return sortConfig.direction === "ascending" ? 1 : -1;
+        }
+        return 0;
+      });
+    }
+    return sortableItems;
+  }, [models, sortConfig]);
+
+  // Custom tooltip for the radar chart
+  const CustomTooltip = ({ active, payload }) => {
+    if (active && payload && payload.length) {
+      return (
+        <div className="p-2 bg-white border border-gray-200 rounded shadow-sm">
+          {payload.map((entry, index) => {
+            // Skip standard deviation entries
+            if (entry.name.includes("_std")) return null;
+
+            const baseModelName = entry.name;
+            const stdEntry = payload.find(
+              (p) => p.name === `${baseModelName}_std`
+            );
+            const stdValue = stdEntry ? stdEntry.value : 0;
+
+            return (
+              <div key={index} className="flex items-center">
+                <div
+                  className="w-3 h-3 mr-1"
+                  style={{ backgroundColor: entry.color }}
+                ></div>
+                <span className="text-xs">
+                  {entry.name}: {entry.value.toFixed(2)} ± {stdValue.toFixed(2)}
+                </span>
+              </div>
+            );
+          })}
+        </div>
+      );
+    }
+    return null;
+  };
+
+  return (
+    <div className="max-w-7xl mx-auto p-4 bg-white">
+      <h1 className="text-3xl font-bold text-center mb-2">
+        LLM Performance: The Human Perspective
+      </h1>
+      <p className="text-center mb-6 text-gray-600 max-w-4xl mx-auto">
+        Evaluations of LLMs performing everyday tasks, metrics focus on both
+        technical quality and user experience factors.
+      </p>
+
+      {/* Main navigation tabs - Updated structure */}
+      <div className="flex flex-wrap mb-6 border-b">
+        <button
+          className={`px-4 py-2 font-medium ${
+            activeTab === "overview"
+              ? "text-blue-600 border-b-2 border-blue-600"
+              : "text-gray-500"
+          }`}
+          onClick={() => setActiveTab("overview")}
+        >
+          Overview
+        </button>
+        <button
+          className={`px-4 py-2 font-medium ${
+            activeTab === "task-demographics"
+              ? "text-blue-600 border-b-2 border-blue-600"
+              : "text-gray-500"
+          }`}
+          onClick={() => setActiveTab("task-demographics")}
+        >
+          Task & Demographic Analysis
+        </button>
+        <button
+          className={`px-4 py-2 font-medium ${
+            activeTab === "facets"
+              ? "text-blue-600 border-b-2 border-blue-600"
+              : "text-gray-500"
+          }`}
+          onClick={() => setActiveTab("facets")}
+        >
+          Metrics Breakdown
+        </button>
+        {/* <button
+          className={`px-4 py-2 font-medium ${
+            activeTab === "headtohead"
+              ? "text-blue-600 border-b-2 border-blue-600"
+              : "text-gray-500"
+          }`}
+          onClick={() => setActiveTab("headtohead")}
+        >
+          Head-to-Head Comparison
+        </button> */}
+      </div>
+
+      {/* Overview Tab */}
+      {activeTab === "overview" && (
+        <div>
+          {/* Overall Rankings Card - Simplified */}
+          <div className="mb-6 border rounded-lg overflow-hidden">
+            <div className="px-4 py-2 bg-gray-50 border-b">
+              <h2 className="text-xl font-semibold">Overall Model Rankings</h2>
+            </div>
+            <div className="p-4">
+              <div className="overflow-x-auto">
+                <table className="w-full table-fixed divide-y divide-gray-200">
+                  <thead>
+                    <tr className="bg-gray-50">
+                      <th className="px-4 py-2 text-left text-sm font-medium text-gray-500 w-10">
+                        Rank
+                      </th>
+                      <th
+                        className="px-4 py-2 text-left text-sm font-medium text-gray-500 w-52 cursor-pointer group"
+                        onClick={() => requestSort("model")}
+                      >
+                        <div className="flex items-center">
+                          Model
+                          {sortConfig.key === "model" ? (
+                            <span className="ml-1">
+                              {sortConfig.direction === "ascending" ? "↑" : "↓"}
+                            </span>
+                          ) : (
+                            <span className="ml-1 text-gray-300 group-hover:text-gray-500">
+                              ⇅
+                            </span>
+                          )}
+                        </div>
+                      </th>
+                      <th
+                        className="px-4 py-2 text-left text-sm font-medium text-gray-500 w-50 cursor-pointer group"
+                        onClick={() => requestSort("overall_score")}
+                      >
+                        <div className="flex items-center">
+                          Overall Score
+                          {sortConfig.key === "overall_score" ? (
+                            <span className="ml-1">
+                              {sortConfig.direction === "ascending" ? "↑" : "↓"}
+                            </span>
+                          ) : (
+                            <span className="ml-1 text-gray-300 group-hover:text-gray-500">
+                              ⇅
+                            </span>
+                          )}
+                        </div>
+                      </th>
+                      <th
+                        className="px-4 py-2 text-left text-sm font-medium text-gray-500 w-42 cursor-pointer group"
+                        onClick={() => requestSort("repeat_usage_pct")}
+                      >
+                        <div className="flex items-center">
+                          Would Use Again
+                          {sortConfig.key === "repeat_usage_pct" ? (
+                            <span className="ml-1">
+                              {sortConfig.direction === "ascending" ? "↑" : "↓"}
+                            </span>
+                          ) : (
+                            <span className="ml-1 text-gray-300 group-hover:text-gray-500">
+                              ⇅
+                            </span>
+                          )}
+                        </div>
+                      </th>
+                      <th className="px-4 py-2 text-left text-sm font-medium text-gray-500 w-54">
+                        Top Strengths
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody className="divide-y divide-gray-200">
+                    {sortedModels.map((model, index) => (
+                      <tr
+                        key={model.model}
+                        className={index % 2 === 0 ? "bg-white" : "bg-gray-50"}
+                      >
+                        <td className="px-4 py-3 text-sm font-medium text-gray-900 w-10">
+                          {index + 1}
+                        </td>
+                        <td className="px-4 py-3 w-52">
+                          <div className="flex items-center">
+                            <div
+                              className="w-3 h-3 rounded-full mr-2"
+                              style={{ backgroundColor: model.color }}
+                            ></div>
+                            <span className="text-sm font-medium text-gray-900">
+                              {model.model}
+                            </span>
+                          </div>
+                        </td>
+                        <td className="px-4 py-3 min-w-[200px] w-64">
+                          <ScoreWithStdDev
+                            score={model.overall_score}
+                            stdDev={model.overall_std}
+                            colorClass={getScoreBadgeColor(
+                              model.overall_score,
+                              0,
+                              100
+                            )}
+                          />
+                        </td>
+                        <td className="px-4 py-3 whitespace-nowrap w-32">
+                          <span
+                            className={`px-2 py-1 inline-flex text-xs font-semibold rounded-full ${
+                              model.repeat_usage_pct > 80
+                                ? "bg-green-100 text-green-800"
+                                : model.repeat_usage_pct > 60
+                                ? "bg-blue-100 text-blue-800"
+                                : "bg-yellow-100 text-yellow-800"
+                            }`}
+                          >
+                            {model.repeat_usage_pct.toFixed(1)}%
+                            {/* ±{" "} {model.repeat_usage_pct_std.toFixed(1)} */}
+                          </span>
+                        </td>
+                        <td className="px-4 py-3 text-sm text-gray-500 w-52">
+                          {model.top_strengths && model.top_strengths.length > 0
+                            ? model.top_strengths
+                                .slice(0, 3)
+                                .map((strength) => formatFacetName(strength))
+                                .join(", ")
+                            : "N/A"}
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </div>
+
+          {/* Enhanced Top Performers Cards */}
+          {Object.keys(bestModelPerCategory).length > 0 && (
+            <div>
+              <h3 className="font-semibold text-xl mb-4">
+                Best Models by Task Category
+              </h3>
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
+                {/* Creative Tasks Card - Enhanced */}
+                <div className="border rounded-lg overflow-hidden">
+                  <div className="px-4 py-2 bg-gray-50 border-b flex items-center">
+                    <h3 className="font-semibold">Best for Creative Tasks</h3>
+                    <div
+                      className="ml-2 w-2 h-2 rounded-full"
+                      style={{
+                        backgroundColor:
+                          bestModelPerCategory.creative?.color || "#e5e7eb",
+                      }}
+                    ></div>
+                  </div>
+                  <div className="p-4">
+                    <div className="flex items-center mb-4">
+                      <div
+                        className="p-2 rounded-full"
+                        style={{
+                          backgroundColor:
+                            bestModelPerCategory.creative?.color + "20" ||
+                            "#e5e7eb",
+                        }}
+                      >
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          className="h-8 w-8"
+                          style={{
+                            color:
+                              bestModelPerCategory.creative?.color || "#6b7280",
+                          }}
+                          fill="none"
+                          viewBox="0 0 24 24"
+                          stroke="currentColor"
+                        >
+                          <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth={2}
+                            d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"
+                          />
+                        </svg>
+                      </div>
+                      <div className="ml-4">
+                        <h4 className="text-lg font-semibold">
+                          {bestModelPerCategory.creative?.model || "N/A"}
+                        </h4>
+                        <p className="text-sm text-gray-600">
+                          Score:{" "}
+                          {bestModelPerCategory.creative?.score.toFixed(2) ||
+                            "N/A"}
+                          {bestModelPerCategory.creative?.std &&
+                            ` ± ${bestModelPerCategory.creative.std.toFixed(
+                              2
+                            )}`}
+                        </p>
+                      </div>
+                    </div>
+
+                    {/* Key aspects/facets visualization */}
+                    <div className="mb-4">
+                      <h5 className="text-sm font-medium mb-2">
+                        Key Aspects for Creative Tasks
+                      </h5>
+                      <div className="space-y-2">
+                        {(keyAspectsByTask.by_category.creative || []).map(
+                          (aspectInfo) => {
+                            const aspect = aspectInfo.raw_aspect;
+                            const score = aspectInfo.score;
+
+                            return (
+                              <div key={aspect} className="text-sm">
+                                <div className="flex justify-between mb-1">
+                                  <span>{aspectInfo.aspect}</span>
+                                  <span className="font-medium">
+                                    {score.toFixed(1)}
+                                  </span>
+                                </div>
+                                <div className="w-full bg-gray-200 rounded-full h-2">
+                                  <div
+                                    className="h-2 rounded-full"
+                                    style={{
+                                      width: `${score}%`,
+                                      backgroundColor:
+                                        bestModelPerCategory.creative?.color ||
+                                        "#6b7280",
+                                    }}
+                                  ></div>
+                                </div>
+                              </div>
+                            );
+                          }
+                        )}
+                      </div>
+                    </div>
+
+                    <p className="text-sm text-gray-700">
+                      Excels at creative tasks like generating ideas and
+                      creating travel itineraries.
+                    </p>
+                    <div className="mt-3 text-xs text-gray-500">
+                      <div>Tasks in this category:</div>
+                      <ul className="list-disc ml-4 mt-1">
+                        {taskCategories.creative?.map((task) => (
+                          <li key={task}>{task}</li>
+                        )) || <li>No data available</li>}
+                      </ul>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Practical Tasks Card - Enhanced */}
+                <div className="border rounded-lg overflow-hidden">
+                  <div className="px-4 py-2 bg-gray-50 border-b flex items-center">
+                    <h3 className="font-semibold">Best for Practical Tasks</h3>
+                    <div
+                      className="ml-2 w-2 h-2 rounded-full"
+                      style={{
+                        backgroundColor:
+                          bestModelPerCategory.practical?.color || "#e5e7eb",
+                      }}
+                    ></div>
+                  </div>
+                  <div className="p-4">
+                    <div className="flex items-center mb-4">
+                      <div
+                        className="p-2 rounded-full"
+                        style={{
+                          backgroundColor:
+                            bestModelPerCategory.practical?.color + "20" ||
+                            "#e5e7eb",
+                        }}
+                      >
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          className="h-8 w-8"
+                          style={{
+                            color:
+                              bestModelPerCategory.practical?.color ||
+                              "#6b7280",
+                          }}
+                          fill="none"
+                          viewBox="0 0 24 24"
+                          stroke="currentColor"
+                        >
+                          <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth={2}
+                            d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
+                          />
+                        </svg>
+                      </div>
+                      <div className="ml-4">
+                        <h4 className="text-lg font-semibold">
+                          {bestModelPerCategory.practical?.model || "N/A"}
+                        </h4>
+                        <p className="text-sm text-gray-600">
+                          Score:{" "}
+                          {bestModelPerCategory.practical?.score.toFixed(2) ||
+                            "N/A"}
+                          {bestModelPerCategory.practical?.std &&
+                            ` ± ${bestModelPerCategory.practical.std.toFixed(
+                              2
+                            )}`}
+                        </p>
+                      </div>
+                    </div>
+
+                    {/* Key facets visualization */}
+                    <div className="mb-4">
+                      <h5 className="text-sm font-medium mb-2">
+                        Key Aspects for Practical Tasks
+                      </h5>
+                      <div className="space-y-2">
+                        {keyAspectsByTask.by_category.practical.map(
+                          (aspectInfo) => {
+                            const aspect = aspectInfo.raw_aspect;
+                            const score = aspectInfo.score;
+
+                            return (
+                              <div key={aspect} className="text-sm">
+                                <div className="flex justify-between mb-1">
+                                  <span>{aspectInfo.aspect}</span>
+                                  <span className="font-medium">
+                                    {score.toFixed(1)}
+                                  </span>
+                                </div>
+                                <div className="w-full bg-gray-200 rounded-full h-2">
+                                  <div
+                                    className="h-2 rounded-full"
+                                    style={{
+                                      width: `${score}%`,
+                                      backgroundColor:
+                                        bestModelPerCategory.practical?.color ||
+                                        "#6b7280",
+                                    }}
+                                  ></div>
+                                </div>
+                              </div>
+                            );
+                          }
+                        )}
+                      </div>
+                    </div>
+
+                    <p className="text-sm text-gray-700">
+                      Best performance on practical tasks like creating a meal plan or following up on a job application.
+                    </p>
+                    <div className="mt-3 text-xs text-gray-500">
+                      <div>Tasks in this category:</div>
+                      <ul className="list-disc ml-4 mt-1">
+                        {taskCategories.practical?.map((task) => (
+                          <li key={task}>{task}</li>
+                        )) || <li>No data available</li>}
+                      </ul>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Meal Planning Card - Enhanced */}
+                <div className="border rounded-lg overflow-hidden">
+                  <div className="px-4 py-2 bg-gray-50 border-b flex items-center">
+                    <h3 className="font-semibold">Best for Analytical Tasks</h3>
+                    <div
+                      className="ml-2 w-2 h-2 rounded-full"
+                      style={{
+                        backgroundColor:
+                          bestModelPerCategory.analytical?.color || "#e5e7eb",
+                      }}
+                    ></div>
+                  </div>
+                  <div className="p-4">
+                    <div className="flex items-center mb-4">
+                      <div
+                        className="p-2 rounded-full"
+                        style={{
+                          backgroundColor:
+                            bestModelPerCategory.analytical?.color + "20" ||
+                            "#e5e7eb",
+                        }}
+                      >
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          className="h-8 w-8"
+                          style={{
+                            color:
+                              bestModelPerCategory.analytical?.color ||
+                              "#6b7280",
+                          }}
+                          fill="none"
+                          viewBox="0 0 24 24"
+                          stroke="currentColor"
+                        >
+                          <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth={2}
+                            d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
+                          />
+                        </svg>
+                      </div>
+                      <div className="ml-4">
+                        <h4 className="text-lg font-semibold">
+                          {bestModelPerCategory.analytical?.model || "N/A"}
+                        </h4>
+                        <p className="text-sm text-gray-600">
+                          Score:{" "}
+                          {bestModelPerCategory.analytical?.score.toFixed(2) ||
+                            "N/A"}
+                          {bestModelPerCategory.analytical?.std &&
+                            ` ± ${bestModelPerCategory.analytical.std.toFixed(
+                              2
+                            )}`}
+                        </p>
+                      </div>
+                    </div>
+
+                    {/* Key facets/aspects visualization */}
+                    <div className="mb-4">
+                      <h5 className="text-sm font-medium mb-2">
+                        Key Aspects for Analytical Tasks
+                      </h5>
+                      <div className="space-y-2">
+                        {keyAspectsByTask.by_category.analytical.map(
+                          (aspectInfo) => {
+                            const aspect = aspectInfo.raw_aspect;
+                            const score = aspectInfo.score;
+
+                            return (
+                              <div key={aspect} className="text-sm">
+                                <div className="flex justify-between mb-1">
+                                  <span>{aspectInfo.aspect}</span>
+                                  <span className="font-medium">
+                                    {score.toFixed(1)}
+                                  </span>
+                                </div>
+                                <div className="w-full bg-gray-200 rounded-full h-2">
+                                  <div
+                                    className="h-2 rounded-full"
+                                    style={{
+                                      width: `${score}%`,
+                                      backgroundColor:
+                                        bestModelPerCategory.analytical
+                                          ?.color || "#6b7280",
+                                    }}
+                                  ></div>
+                                </div>
+                              </div>
+                            );
+                          }
+                        )}
+                      </div>
+                    </div>
+
+                    <p className="text-sm text-gray-700">
+                      Exceptional at analytical tasks like breaking down complex topics or helping you decide between options.
+                    </p>
+                    <div className="mt-3 text-xs text-gray-500">
+                      <div>Tasks in this category:</div>
+                      <ul className="list-disc ml-4 mt-1">
+                        {taskCategories.analytical?.map((task) => (
+                          <li key={task}>{task}</li>
+                        )) || <li>No data available</li>}
+                      </ul>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+
+   
+        </div>
+      )}
+
+      {/* Task & Demographic Analysis Tab */}
+      {activeTab === "task-demographics" && data && (
+        <TaskDemographicAnalysis data={data} />
+      )}
+
+      {/* Facet & Aspect Breakdown Tab */}
+      {activeTab === "facets" && data && <MetricsBreakdown data={data} />}
+
+      {/* Head-to-Head Comparison Tab */}
+      {/* {activeTab === "headtohead" && <HeadToHeadComparison data={data} />} */}
+    </div>
+  );
+};
+
+export default LLMComparisonDashboard;

leaderboard-app/components/MetricsBreakdown.jsx

@@ -0,0 +1,638 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+  RadarChart,
+  PolarGrid,
+  PolarAngleAxis,
+  PolarRadiusAxis,
+  Radar
+} from "recharts";
+
+// Utility functions for formatting facet and aspect names
+const formatFacetName = (facet) => {
+  const facetMap = {
+    "helpfulness": "Helpfulness",
+    "communication": "Communication",
+    "insightful": "Insightfulness",
+    "adaptiveness": "Adaptiveness",
+    "trustworthiness": "Trustworthiness",
+    "personality": "Personality",
+    "background_and_culture": "Cultural Awareness"
+  };
+  
+  return facetMap[facet] || (facet ? facet.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase()) : facet);
+};
+
+const formatAspectName = (aspect) => {
+  const aspectMap = {
+    "effectiveness": "Effectiveness",
+    "comprehensiveness": "Comprehensiveness",
+    "usefulness": "Usefulness",
+    "tone_and_language_style": "Tone & Language",
+    "naturalness": "Naturalness",
+    "detail_and_technical_language": "Detail & Technical",
+    "accuracy": "Accuracy",
+    "sharpness": "Sharpness",
+    "intuitive": "Intuitiveness",
+    "flexibility": "Flexibility",
+    "clarity": "Clarity",
+    "perceptiveness": "Perceptiveness",
+    "consistency": "Consistency",
+    "confidence": "Confidence",
+    "transparency": "Transparency",
+    "personality-consistency": "Personality Consistency",
+    "personality-definition": "Personality Definition",
+    "honesty-empathy-fairness": "Honesty & Empathy",
+    "alignment": "Alignment",
+    "cultural_relevance": "Cultural Relevance",
+    "bias_freedom": "Freedom from Bias",
+    "background_and_culture": "Cultural Background"
+  };
+  
+  return aspectMap[aspect] || (aspect ? aspect.replace(/_/g, ' ').replace(/-/g, ' ').replace(/\b\w/g, l => l.toUpperCase()) : aspect);
+};
+
+// Format categories for the radar chart
+const formatCategoryName = (category) => {
+  if (category.includes('_') || category === "Insightful") {
+    return formatFacetName(category.toLowerCase());
+  }
+  return category;
+};
+
+// Get color based on score value
+const getScoreColor = (score) => {
+  if (score >= 90) return "text-green-600 font-semibold";
+  if (score >= 80) return "text-green-500";
+  if (score >= 70) return "text-green-400";
+  if (score >= 60) return "text-sky-500";
+  if (score >= 50) return "text-sky-400";
+  if (score >= 40) return "text-yellow-500";
+  if (score >= 30) return "text-yellow-400";
+  return "text-red-500";
+};
+
+// Get background color based on score (for badges)
+const getScoreBgColor = (score) => {
+  if (score >= 90) return "bg-green-100 text-green-800";
+  if (score >= 80) return "bg-green-50 text-green-700";
+  if (score >= 70) return "bg-sky-100 text-sky-800";
+  if (score >= 60) return "bg-sky-50 text-sky-700";
+  if (score >= 50) return "bg-yellow-100 text-yellow-800";
+  if (score < 50) return "bg-red-100 text-red-800";
+  return "bg-gray-100 text-gray-800";
+};
+
+// Custom tooltip with proper formatting
+const CustomTooltip = ({ active, payload, label }) => {
+  if (active && payload && payload.length) {
+    // Format the label based on whether it's a facet or aspect
+    const formattedLabel = formatCategoryName(label);
+    
+    return (
+      <div className="bg-white p-3 border rounded shadow-sm">
+        <p className="font-medium">{formattedLabel}</p>
+        <div className="mt-2">
+          {payload
+            .filter(entry => !entry.dataKey.includes('_std'))
+            .map((entry, index) => {
+              const stdEntry = payload.find(p => p.dataKey === `${entry.dataKey}_std`);
+              const stdValue = stdEntry ? stdEntry.value : 0;
+              
+              return (
+                <div key={index} className="flex items-center text-sm mb-1">
+                  <div 
+                    className="w-3 h-3 rounded-full mr-1" 
+                    style={{ backgroundColor: entry.color }}
+                  ></div>
+                  <span className="mr-2">{entry.name}:</span>
+                  <span className="font-medium">{entry.value.toFixed(1)} ± {stdValue.toFixed(1)}</span>
+                </div>
+              );
+            })}
+        </div>
+      </div>
+    );
+  }
+  return null;
+};
+
+const MetricsBreakdown = ({ data }) => {
+  const [viewMode, setViewMode] = useState("facets"); // "facets" or "aspects"
+  const [selectedModels, setSelectedModels] = useState([]);
+  const [selectedFacet, setSelectedFacet] = useState(null);
+
+  const {
+    models,
+    facets,
+    radarData,
+    bestModelPerFacet
+  } = data;
+
+  // Initialize selected facet and models
+  useEffect(() => {
+    if (!selectedFacet && facets && Object.keys(facets).length > 0) {
+      // Skip repeat_usage and select the first actual facet
+      const availableFacets = Object.keys(facets).filter(f => f !== "repeat_usage");
+      if (availableFacets.length > 0) {
+        setSelectedFacet(availableFacets[0]);
+      }
+    }
+    
+    if (selectedModels.length === 0 && models?.length > 0) {
+      // Select all models by default (up to 6 models)
+      setSelectedModels(models.map(m => m.model));
+    }
+  }, [facets, selectedFacet, models, selectedModels]);
+  
+  // Get model by name
+  const getModelByName = (name) => {
+    return models.find(m => m.model === name);
+  };
+  
+  // Generate aspect radar data for selected facet
+  const getAspectRadarData = () => {
+    if (!selectedFacet || !facets) return [];
+    
+    const selectedAspects = facets[selectedFacet] || [];
+    if (selectedAspects.length === 0) return [];
+    
+    // Create radar data format with aspect as categories
+    return selectedAspects.map(aspect => {
+      const entry = {
+        category: formatAspectName(aspect),
+        aspect
+      };
+      
+      // Add data for selected models
+      models
+        .filter(m => selectedModels.includes(m.model))
+        .forEach(model => {
+          if (model.breakdown_scores && model.breakdown_scores[aspect] !== undefined) {
+            entry[model.model] = model.breakdown_scores[aspect];
+          }
+        });
+      
+      return entry;
+    });
+  };
+  
+  // Get selected facet aspects
+  const getSelectedFacetAspects = () => {
+    if (!selectedFacet || !facets) return [];
+    return facets[selectedFacet] || [];
+  };
+  
+  // Get facet data for the radar chart
+  const getFacetRadarData = () => {
+    if (!radarData) return [];
+    
+    // This ensures the data contains only the selected models
+    return radarData.map(item => {
+      // Create a new object with only the properties we want
+      const newItem = { category: item.category };
+      
+      // Copy only the selected models' data
+      models
+        .filter(m => selectedModels.includes(m.model))
+        .forEach(model => {
+          newItem[model.model] = item[model.model];
+        });
+      
+      return newItem;
+    });
+  };
+  
+  // Calculate top performers based on selected models only
+  const getTopPerformersByFacet = () => {
+    if (!facets || !models) return {};
+    
+    const topPerformers = {};
+    
+    // For each facet, find the best model among selected models
+    Object.keys(facets)
+      .filter(facet => facet !== "repeat_usage")
+      .forEach(facet => {
+        let bestModel = null;
+        let bestScore = -Infinity;
+        
+        // Check each selected model
+        models
+          .filter(m => selectedModels.includes(m.model))
+          .forEach(model => {
+            const score = model.facet_scores?.[facet];
+            if (score !== undefined && score > bestScore) {
+              bestScore = score;
+              bestModel = {
+                model: model.model,
+                score: score,
+                modelObj: model
+              };
+            }
+          });
+        
+        if (bestModel) {
+          topPerformers[facet] = bestModel;
+        }
+      });
+    
+    return topPerformers;
+  };
+  
+  // Calculate top performers for each aspect of the selected facet
+  const getTopPerformersByAspect = () => {
+    if (!selectedFacet || !facets || !models) return [];
+    
+    const selectedAspects = facets[selectedFacet] || [];
+    const topPerformers = [];
+    
+    // For each aspect, find the best model among selected models
+    selectedAspects.forEach(aspect => {
+      let bestModel = null;
+      let bestScore = -Infinity;
+      
+      // Check each selected model
+      models
+        .filter(m => selectedModels.includes(m.model))
+        .forEach(model => {
+          const score = model.breakdown_scores?.[aspect];
+          if (score !== undefined && score > bestScore) {
+            bestScore = score;
+            bestModel = {
+              model: model.model,
+              score: score,
+              modelObj: model
+            };
+          }
+        });
+      
+      if (bestModel) {
+        topPerformers.push({
+          aspect,
+          aspectName: formatAspectName(aspect),
+          ...bestModel
+        });
+      }
+    });
+    
+    return topPerformers;
+  };
+  
+  // Prepare data
+  const selectedAspects = getSelectedFacetAspects();
+  const facetRadarData = getFacetRadarData();
+  const aspectRadarData = getAspectRadarData();
+  const topPerformers = getTopPerformersByFacet();
+  const topAspectPerformers = getTopPerformersByAspect();
+  
+  return (
+    <>
+      {/* Top-level controls */}
+      <div className="mb-4 flex justify-between items-center flex-wrap">
+        <div className="flex items-center space-x-4">
+          {/* View toggle */}
+          <div className="flex space-x-1 p-1 bg-gray-100 rounded-lg">
+            <button
+              className={`px-4 py-1.5 text-sm font-medium rounded-md ${
+                viewMode === "facets" ? "bg-white shadow text-sky-700" : "text-gray-700"
+              }`}
+              onClick={() => setViewMode("facets")}
+            >
+              Facets
+            </button>
+            <button
+              className={`px-2 py-1.5 text-sm font-medium rounded-md ${
+                viewMode === "aspects" ? "bg-white shadow text-sky-700" : "text-gray-700"
+              }`}
+              onClick={() => setViewMode("aspects")}
+            >
+              Aspects
+            </button>
+          </div>
+          
+          {/* Facet selector (shown when in aspects view) */}
+          {viewMode === "aspects" && (
+            <div className="flex items-center">
+              <span className="text-sm font-medium mr-1">Select Facet:</span>
+              <select 
+                className="text-sm border rounded px-2 py-1.5 bg-white"
+                value={selectedFacet || ''}
+                onChange={(e) => setSelectedFacet(e.target.value)}
+              >
+                {Object.keys(facets || {})
+                  .filter(f => f !== "repeat_usage")
+                  .map(facet => (
+                    <option key={facet} value={facet}>
+                      {formatFacetName(facet)}
+                    </option>
+                  ))}
+              </select>
+            </div>
+          )}
+        </div>
+        
+        {/* Model selector */}
+        <div className="mt-2 sm:mt-0">
+          <span className="text-sm text-gray-500 mr-2">Select Models:</span>
+          <div className="inline-flex flex-wrap gap-1">
+            {models?.map(model => (
+              <button
+                key={model.model}
+                className={`px-2 py-0.5 text-sm rounded ${
+                  selectedModels.includes(model.model) 
+                    ? "bg-sky-100 border text-sky-800 border-sky-300" 
+                    : "bg-gray-100 text-gray-600"
+                }`}
+                onClick={() => {
+                  if (selectedModels.includes(model.model)) {
+                    if (selectedModels.length > 1) {
+                      setSelectedModels(selectedModels.filter(m => m !== model.model));
+                    }
+                  } else {
+                    setSelectedModels([...selectedModels, model.model]);
+                  }
+                }}
+              >
+                {model.model}
+              </button>
+            ))}
+          </div>
+        </div>
+      </div>
+      
+      {/* Performance Summary Table */}
+      <div className="border rounded-lg overflow-hidden mb-4">
+        <div className="px-4 py-2 bg-gray-50 border-b">
+          <h3 className="font-semibold">Performance Summary</h3>
+        </div>
+        <div className="p-4 overflow-x-auto">
+          <table className="min-w-full divide-y divide-gray-200">
+            <thead>
+              <tr>
+                <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Model</th>
+                {viewMode === "facets" ? (
+                  // Show facets in facet view
+                  Object.keys(facets || {})
+                    .filter(f => f !== "repeat_usage")
+                    .map(facet => (
+                      <th key={facet} className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                        {formatFacetName(facet)}
+                      </th>
+                    ))
+                ) : (
+                  // Show aspects in aspect view
+                  selectedAspects.map(aspect => (
+                    <th key={aspect} className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                      {formatAspectName(aspect)}
+                    </th>
+                  ))
+                )}
+              </tr>
+            </thead>
+            <tbody className="bg-white divide-y divide-gray-200">
+              {models
+                ?.filter(m => selectedModels.includes(m.model))
+                .map((model, idx) => (
+                  <tr key={model.model} className={idx % 2 === 0 ? "bg-white" : "bg-gray-50"}>
+                    <td className="px-3 py-2">
+                      <div className="flex items-center">
+                        <div 
+                          className="w-3 h-3 rounded-full mr-2"
+                          style={{ backgroundColor: model.color }}
+                        ></div>
+                        <span className="text-sm font-medium">{model.model}</span>
+                      </div>
+                    </td>
+                    {viewMode === "facets" ? (
+                      // Show facet scores in facet view
+                      Object.keys(facets || {})
+                        .filter(f => f !== "repeat_usage")
+                        .map(facet => {
+                          const score = model.facet_scores?.[facet] || 0;
+                          return (
+                            <td key={facet} className="px-3 py-2">
+                              <div className={`text-sm ${getScoreColor(score)}`}>
+                                {score.toFixed(1)}
+                              </div>
+                            </td>
+                          );
+                        })
+                    ) : (
+                      // Show aspect scores in aspect view
+                      selectedAspects.map(aspect => {
+                        const score = model.breakdown_scores?.[aspect] || 0;
+                        return (
+                          <td key={aspect} className="px-3 py-2">
+                            <div className={`text-sm ${getScoreColor(score)}`}>
+                              {score.toFixed(1)}
+                            </div>
+                          </td>
+                        );
+                      })
+                    )}
+                  </tr>
+                ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+      
+      {/* Conditional content based on view mode */}
+      {viewMode === "facets" ? (
+        // FACETS VIEW
+        <>
+          {/* Radar Chart */}
+          <div className="border rounded-lg overflow-hidden mb-4">
+            <div className="px-4 py-2 bg-gray-50 border-b flex justify-between items-center">
+              <h3 className="font-semibold">Model Performance Across Facets</h3>
+              <div className="text-xs text-gray-500">Radar chart showing model strengths</div>
+            </div>
+            <div className="p-4">
+              <div className="h-96">
+                <ResponsiveContainer width="100%" height="100%">
+                  <RadarChart
+                    outerRadius={160}
+                    data={facetRadarData}
+                  >
+                    <PolarGrid gridType="polygon" />
+                    <PolarAngleAxis
+                      dataKey="category"
+                      tick={{ fill: "#4b5563", fontSize: 14 }}
+                      tickLine={false}
+                      tickFormatter={formatCategoryName}
+                    />
+                    <PolarRadiusAxis
+                      angle={90}
+                      domain={[-100, 100]}
+                      axisLine={false}
+                      tick={{ fontSize: 12 }}
+                      tickCount={5}
+                    />
+                    {models
+                      ?.filter(m => selectedModels.includes(m.model))
+                      .map((model) => (
+                        <Radar
+                          key={model.model}
+                          name={model.model}
+                          dataKey={model.model}
+                          stroke={model.color}
+                          fill={model.color}
+                          fillOpacity={0.2}
+                          strokeWidth={2}
+                        />
+                      ))}
+                    <Tooltip content={<CustomTooltip />} />
+                    <Legend />
+                  </RadarChart>
+                </ResponsiveContainer>
+              </div>
+            </div>
+          </div>
+          
+          {/* Top Performers Table */}
+          <div className="border rounded-lg overflow-hidden">
+            <div className="px-4 py-2 bg-gray-50 border-b">
+              <h3 className="font-semibold">Top Performers by Facet</h3>
+            </div>
+            <div className="p-4">
+              <table className="min-w-full divide-y divide-gray-200">
+                <thead>
+                  <tr>
+                    <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Facet</th>
+                    <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Best Model</th>
+                    <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Score</th>
+                  </tr>
+                </thead>
+                <tbody className="bg-white divide-y divide-gray-200">
+                  {Object.entries(topPerformers)
+                    .map(([facet, bestModel], idx) => (
+                      <tr key={facet} className={idx % 2 === 0 ? "bg-white" : "bg-gray-50"}>
+                        <td className="px-3 py-2 font-medium">{formatFacetName(facet)}</td>
+                        <td className="px-3 py-2">
+                          <div className="flex items-center">
+                            <div 
+                              className="w-3 h-3 rounded-full mr-2"
+                              style={{ backgroundColor: bestModel.modelObj?.color }}
+                            ></div>
+                            <span>{bestModel.model}</span>
+                          </div>
+                        </td>
+                        <td className="px-3 py-2">
+                          <span className={`px-2 py-0.5 rounded-full text-sm font-medium ${getScoreBgColor(bestModel.score)}`}>
+                            {bestModel.score.toFixed(1)}
+                          </span>
+                        </td>
+                      </tr>
+                    ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </>
+      ) : (
+        // ASPECTS VIEW
+        <>
+          {/* Aspect Radar Chart */}
+          <div className="border rounded-lg overflow-hidden mb-4">
+            <div className="px-4 py-2 bg-gray-50 border-b">
+              <h3 className="font-semibold">Aspect Breakdown for {formatFacetName(selectedFacet || '')}</h3>
+            </div>
+            <div className="p-4">
+              <div className="h-96">
+                <ResponsiveContainer width="100%" height="100%">
+                  <RadarChart
+                    outerRadius={160}
+                    data={aspectRadarData}
+                  >
+                    <PolarGrid gridType="polygon" />
+                    <PolarAngleAxis
+                      dataKey="category"
+                      tick={{ fill: "#4b5563", fontSize: 12 }}
+                      tickLine={false}
+                    />
+                    <PolarRadiusAxis
+                      angle={90}
+                      domain={[0, 100]}
+                      axisLine={false}
+                      tick={{ fontSize: 12 }}
+                      tickCount={5}
+                    />
+                    {models
+                      ?.filter(m => selectedModels.includes(m.model))
+                      .map((model) => (
+                        <Radar
+                          key={model.model}
+                          name={model.model}
+                          dataKey={model.model}
+                          stroke={model.color}
+                          fill={model.color}
+                          fillOpacity={0.2}
+                          strokeWidth={2}
+                        />
+                      ))}
+                    <Tooltip content={<CustomTooltip />} />
+                    <Legend />
+                  </RadarChart>
+                </ResponsiveContainer>
+              </div>
+              
+              <div className="mt-2 text-xs text-gray-500 text-center">
+                Aspect scores for {formatFacetName(selectedFacet)} (0-100 scale)
+              </div>
+            </div>
+          </div>
+          
+          {/* Top Performers by Aspect Table */}
+          <div className="border rounded-lg overflow-hidden">
+            <div className="px-4 py-2 bg-gray-50 border-b">
+              <h3 className="font-semibold">Top Performers by Aspect in {formatFacetName(selectedFacet || '')}</h3>
+            </div>
+            <div className="p-4">
+              <table className="min-w-full divide-y divide-gray-200">
+                <thead>
+                  <tr>
+                    <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Aspect</th>
+                    <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Best Model</th>
+                    <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Score</th>
+                  </tr>
+                </thead>
+                <tbody className="bg-white divide-y divide-gray-200">
+                  {topAspectPerformers.map((performer, idx) => (
+                    <tr key={performer.aspect} className={idx % 2 === 0 ? "bg-white" : "bg-gray-50"}>
+                      <td className="px-3 py-2 font-medium">{performer.aspectName}</td>
+                      <td className="px-3 py-2">
+                        <div className="flex items-center">
+                          <div 
+                            className="w-3 h-3 rounded-full mr-2"
+                            style={{ backgroundColor: performer.modelObj?.color }}
+                          ></div>
+                          <span>{performer.model}</span>
+                        </div>
+                      </td>
+                      <td className="px-3 py-2">
+                        <span className={`px-2 py-0.5 rounded-full text-sm font-medium ${getScoreBgColor(performer.score)}`}>
+                          {performer.score.toFixed(1)}
+                        </span>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </>
+      )}
+    </>
+  );
+};
+
+export default MetricsBreakdown;

leaderboard-app/components/TaskDemographicAnalysis.jsx

@@ -0,0 +1,1416 @@
+"use client";
+
+import React, { useState, useEffect, useMemo } from "react";
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+  ReferenceLine,
+  Cell,
+} from "recharts";
+import { getScoreBadgeColor } from "../lib/utils";
+
+// Helper component for info tooltips
+const InfoTooltip = ({ text }) => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  return (
+    <div className="relative inline-block ml-1">
+      <button
+        className="text-gray-400 hover:text-gray-600 focus:outline-none"
+        onMouseEnter={() => setIsVisible(true)}
+        onMouseLeave={() => setIsVisible(false)}
+        onClick={() => setIsVisible(!isVisible)}
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          className="h-4 w-4"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+        >
+          <path
+            fillRule="evenodd"
+            d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
+            clipRule="evenodd"
+          />
+        </svg>
+      </button>
+      {isVisible && (
+        <div className="absolute z-10 w-64 p-2 bg-white border rounded shadow-lg text-xs text-gray-700 -translate-x-1/2 left-1/2 mt-1">
+          {text}
+        </div>
+      )}
+    </div>
+  );
+};
+
+// Format facet names for display
+const formatFacetName = (facet) => {
+  const facetMap = {
+    helpfulness: "Helpfulness",
+    communication: "Communication",
+    insightful: "Insightfulness",
+    adaptiveness: "Adaptiveness",
+    trustworthiness: "Trustworthiness",
+    personality: "Personality",
+    background_and_culture: "Cultural Awareness",
+  };
+
+  return (
+    facetMap[facet] ||
+    (facet
+      ? facet.replace(/_/g, " ").replace(/\b\w/g, (l) => l.toUpperCase())
+      : facet)
+  );
+};
+
+// Filter tag component for displaying active filters
+const FilterTag = ({ label, onRemove }) => (
+  <div className="inline-flex items-center px-2 py-1 mr-2 mb-2 text-xs font-medium rounded-full bg-blue-100 text-blue-800">
+    {label}
+    {onRemove && (
+      <button
+        onClick={onRemove}
+        className="ml-1 text-blue-600 hover:text-blue-800 focus:outline-none"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          className="h-3 w-3"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+        >
+          <path
+            fillRule="evenodd"
+            d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
+            clipRule="evenodd"
+          />
+        </svg>
+      </button>
+    )}
+  </div>
+);
+
+/* Clean, minimal insight component inspired by the equity ranking design */
+const CleanInsightItem = ({ insight, index, models }) => {
+  // Extract model names and metrics from the insight text
+  const enhanceText = (text) => {
+    // First, find and highlight any numeric values with bold
+    const numericPattern = /(\d+\.?\d*)/g;
+    let enhancedText = text.replace(numericPattern, "<strong>$1</strong>");
+
+    // Then highlight model names
+    models.forEach((model) => {
+      const modelName = model.model;
+      if (text.includes(modelName)) {
+        enhancedText = enhancedText.replace(
+          new RegExp(modelName, "g"),
+          `<span class="font-medium" style="color: ${model.color}">${modelName}</span>`
+        );
+      }
+    });
+
+    return enhancedText;
+  };
+
+  // Determine the type of insight for styling
+  const getInsightType = (text) => {
+    if (
+      text.includes("performs best") ||
+      text.includes("excellent equity") ||
+      text.includes("achieves the highest")
+    ) {
+      return "positive";
+    } else if (
+      text.includes("potential equity concerns") ||
+      text.includes("worst") ||
+      text.includes("gap between")
+    ) {
+      return "negative";
+    } else if (text.includes("point gap")) {
+      return "comparison";
+    } else {
+      return "info";
+    }
+  };
+
+  // Get color based on insight type
+  const getTypeColor = (type) => {
+    switch (type) {
+      case "positive":
+        return "text-green-700 bg-green-50";
+      case "negative":
+        return "text-red-700 bg-red-50";
+      case "comparison":
+        return "text-blue-700 bg-blue-50";
+      default:
+        return "text-gray-700 bg-gray-50";
+    }
+  };
+
+  const insightType = getInsightType(insight);
+  const typeColor = getTypeColor(insightType);
+
+  return (
+    <div className="flex items-start py-3 px-4 border-b last:border-b-0">
+      <div className="flex-shrink-0 mr-3">
+        <div
+          className={`w-7 h-7 rounded-full flex items-center justify-center ${typeColor}`}
+        >
+          <span className="text-xs font-semibold">{index + 1}</span>
+        </div>
+      </div>
+      <div className="flex-grow">
+        <p
+          className="text-sm text-gray-800"
+          dangerouslySetInnerHTML={{ __html: enhanceText(insight) }}
+        />
+      </div>
+    </div>
+  );
+};
+
+const TaskDemographicAnalysis = ({ data }) => {
+  // Analysis controls state
+  const [selectedTask, setSelectedTask] = useState("all");
+  const [selectedDemographic, setSelectedDemographic] = useState("all");
+  const [selectedModel, setSelectedModel] = useState(null);
+  const [selectedMetric, setSelectedMetric] = useState("overall_score");
+  const [viewMode, setViewMode] = useState("absolute"); // 'absolute' or 'relative'
+  const [showAllModels, setShowAllModels] = useState(true);
+  const [groupBy, setGroupBy] = useState("task"); // 'task', 'demographic', or 'combined'
+  const [keyInsightsVisible, setKeyInsightsVisible] = useState(true);
+
+  // Extracting data
+  const {
+    models,
+    taskData,
+    taskCategories,
+    demographicSummary,
+    demographicOptions,
+    fairnessMetrics,
+    facets,
+  } = data;
+
+  // Initialize selectedModel if not set
+  useEffect(() => {
+    if (!selectedModel && models.length > 0) {
+      setSelectedModel(models[0].model);
+    }
+  }, [models, selectedModel]);
+
+  // Handle group by changes - reset and disable other filters as needed
+  useEffect(() => {
+    if (groupBy === "task" && selectedDemographic !== "all") {
+      // When grouping by task, reset demographic to 'all'
+      setSelectedDemographic("all");
+    } else if (groupBy === "demographic" && selectedTask !== "all") {
+      // When grouping by demographic, reset task to 'all'
+      setSelectedTask("all");
+    }
+  }, [groupBy, selectedDemographic, selectedTask]);
+
+  // Function to get all tasks (flat list)
+  const getAllTasks = () => {
+    const allTasks = [];
+    if (taskData) {
+      taskData.forEach((task) => {
+        if (!allTasks.includes(task.task)) {
+          allTasks.push(task.task);
+        }
+      });
+    }
+    return allTasks.sort();
+  };
+
+  // Get task options including "All Tasks" and categories
+  const taskOptions = useMemo(() => {
+    // Start with "All Tasks" option
+    const allTasksOption = { value: "all", label: "All Tasks" };
+
+    // Group tasks by category
+    const categorizedTasks = {};
+    const uncategorizedTasks = [];
+
+    // Get all tasks and their categories
+    getAllTasks().forEach((task) => {
+      const taskInfo = taskData.find((t) => t.task === task);
+      if (taskInfo && taskInfo.category) {
+        if (!categorizedTasks[taskInfo.category]) {
+          categorizedTasks[taskInfo.category] = [];
+        }
+        categorizedTasks[taskInfo.category].push({
+          value: task,
+          label: task,
+        });
+      } else {
+        uncategorizedTasks.push({
+          value: task,
+          label: task,
+        });
+      }
+    });
+
+    // Format for select rendering
+    return {
+      allTasksOption,
+      categories: Object.keys(taskCategories || {}).map((category) => ({
+        label: `${category.charAt(0).toUpperCase() + category.slice(1)} Tasks`,
+        value: category,
+        isCategory: true,
+      })),
+      categorizedTasks,
+      uncategorizedTasks,
+    };
+  }, [taskData, taskCategories]);
+
+  // Helper function to get task label
+  const getTaskLabel = (taskValue) => {
+    // Check if it's "all tasks"
+    if (taskValue === "all") {
+      return "All Tasks";
+    }
+
+    // Check if it's a category
+    const category = taskOptions.categories.find((c) => c.value === taskValue);
+    if (category) {
+      return category.label;
+    }
+
+    // Look in categorized tasks
+    for (const [category, tasks] of Object.entries(
+      taskOptions.categorizedTasks
+    )) {
+      const task = tasks.find((t) => t.value === taskValue);
+      if (task) {
+        return task.label;
+      }
+    }
+
+    // Check uncategorized tasks
+    const uncategorizedTask = taskOptions.uncategorizedTasks.find(
+      (t) => t.value === taskValue
+    );
+    if (uncategorizedTask) {
+      return uncategorizedTask.label;
+    }
+
+    // Fallback to the value itself
+    return taskValue;
+  };
+
+  // Get filtered performance data based on selected filters
+  const getFilteredPerformanceData = () => {
+    if (!taskData) return [];
+
+    let filteredData = [...taskData];
+
+    // Filter by task or task category
+    if (selectedTask !== "all") {
+      // Check if it's a category
+      const isCategory = Object.keys(taskCategories || {}).includes(
+        selectedTask
+      );
+
+      if (isCategory) {
+        // Filter by category
+        filteredData = filteredData.filter(
+          (item) => item.category === selectedTask
+        );
+      } else {
+        // Filter by specific task
+        filteredData = filteredData.filter(
+          (item) => item.task === selectedTask
+        );
+      }
+    }
+
+    // For relative view, we need to transform the data
+    if (viewMode === "relative") {
+      // Transform data for relative view (regardless of grouping type)
+      return filteredData.map((item) => {
+        // Create a copy of the item
+        const newItem = { ...item };
+
+        // Get all valid model scores for this item
+        const modelScores = [];
+        models.forEach((model) => {
+          if (typeof newItem[model.model] === "number") {
+            modelScores.push(newItem[model.model]);
+          }
+        });
+
+        // Calculate average if we have scores
+        if (modelScores.length > 0) {
+          const avgScore =
+            modelScores.reduce((sum, score) => sum + score, 0) /
+            modelScores.length;
+
+          // Convert all scores to relative to average
+          models.forEach((model) => {
+            if (typeof newItem[model.model] === "number") {
+              newItem[model.model] = newItem[model.model] - avgScore;
+            }
+          });
+        }
+
+        return newItem;
+      });
+    }
+
+    // For absolute view or if we can't do relative, return filtered data as is
+    return filteredData;
+  };
+
+  // Calculate model equity based on current filters
+  const calculateModelEquity = () => {
+    if (!demographicSummary || !demographicOptions) {
+      return models.map((model) => ({
+        model: model.model,
+        avgGap: 0,
+        color: model.color,
+      }));
+    }
+
+    // Get task-specific category if needed
+    let taskCategory = null;
+    let specificTask = null;
+
+    if (selectedTask !== "all") {
+      // Check if it's a category or specific task - improve detection logic
+      const isCategory =
+        taskCategories && Object.keys(taskCategories).includes(selectedTask);
+
+      if (isCategory) {
+        taskCategory = selectedTask;
+      } else {
+        specificTask = selectedTask;
+        // Find the category for this task
+        const taskInfo = taskData.find((t) => t.task === selectedTask);
+        if (taskInfo && taskInfo.category) {
+          taskCategory = taskInfo.category;
+        }
+      }
+    }
+
+    // Get task-specific performance data for reference
+    const taskPerformanceData = getFilteredPerformanceData();
+
+    // Build a lookup of model performance by task - with improved error handling
+    const taskPerformanceLookup = {};
+    let hasTaskSpecificData = false;
+
+    if (specificTask) {
+      // For a specific task, create lookup
+      taskPerformanceData.forEach((item) => {
+        if (item.task === specificTask) {
+          models.forEach((model) => {
+            const modelName = model.model;
+            const score = item[modelName];
+
+            if (typeof score === "number" && !isNaN(score)) {
+              if (!taskPerformanceLookup[modelName]) {
+                taskPerformanceLookup[modelName] = {};
+              }
+              taskPerformanceLookup[modelName][specificTask] = score;
+              hasTaskSpecificData = true;
+            }
+          });
+        }
+      });
+    } else if (taskCategory) {
+      // For a task category, gather all tasks in that category
+      taskPerformanceData.forEach((item) => {
+        if (item.category === taskCategory) {
+          models.forEach((model) => {
+            const modelName = model.model;
+            const score = item[modelName];
+
+            if (typeof score === "number" && !isNaN(score)) {
+              if (!taskPerformanceLookup[modelName]) {
+                taskPerformanceLookup[modelName] = {};
+              }
+              taskPerformanceLookup[modelName][item.task] = score;
+              hasTaskSpecificData = true;
+            }
+          });
+        }
+      });
+    }
+
+    return models
+      .map((model) => {
+        const modelName = model.model;
+        const gaps = [];
+
+        // For each demographic dimension
+        Object.keys(demographicOptions).forEach((demo) => {
+          // Skip if we're filtering to a specific demographic and this isn't it
+          if (selectedDemographic !== "all" && demo !== selectedDemographic) {
+            return;
+          }
+
+          const demoValues = demographicOptions[demo];
+          if (!demoValues || demoValues.length < 2) return; // Need at least 2 groups to measure a gap
+
+          // Get scores for each demographic value within this dimension
+          const demoScores = [];
+
+          demoValues.forEach((value) => {
+            // First check if we have demographic data for this model and value
+            const modelDemoData =
+              demographicSummary[demo]?.[value]?.models?.[modelName];
+            if (!modelDemoData) return;
+
+            let score = null;
+
+            if (selectedMetric === "overall_score") {
+              // Improved logic for task-specific scores
+              if (
+                specificTask &&
+                taskPerformanceLookup[modelName] &&
+                typeof taskPerformanceLookup[modelName][specificTask] ===
+                  "number"
+              ) {
+                // Use the specific task score for all demographic groups
+                // This assumes the task score is the same regardless of demographic
+                score = taskPerformanceLookup[modelName][specificTask];
+              } else if (
+                taskCategory &&
+                Object.keys(taskPerformanceLookup[modelName] || {}).length > 0
+              ) {
+                // For a category, average the task scores
+                const taskScores = Object.values(
+                  taskPerformanceLookup[modelName]
+                );
+                if (taskScores.length > 0) {
+                  score =
+                    taskScores.reduce((sum, s) => sum + s, 0) /
+                    taskScores.length;
+                } else {
+                  // Fallback to overall if we don't have category scores
+                  score = modelDemoData.overall_score;
+                }
+              } else {
+                // Default to overall score
+                score = modelDemoData.overall_score;
+              }
+            } else if (selectedMetric === "repeat_usage_pct") {
+              score = modelDemoData.repeat_usage_pct;
+            } else if (selectedMetric.startsWith("facet_")) {
+              const facet = selectedMetric.replace("facet_", "");
+              if (
+                modelDemoData.facet_scores &&
+                facet in modelDemoData.facet_scores
+              ) {
+                score = modelDemoData.facet_scores[facet];
+              }
+            }
+
+            // Only add valid scores
+            if (score !== null && typeof score === "number" && !isNaN(score)) {
+              demoScores.push({
+                value,
+                score,
+              });
+            }
+          });
+
+          // Calculate gap for this demographic dimension with better error handling
+          if (demoScores.length >= 2) {
+            const sortedScores = [...demoScores].sort(
+              (a, b) => a.score - b.score
+            );
+            const lowest = sortedScores[0];
+            const highest = sortedScores[sortedScores.length - 1];
+            const gap = highest.score - lowest.score;
+
+            // Only include valid gaps
+            if (!isNaN(gap)) {
+              gaps.push({
+                demo,
+                gap,
+                lowestGroup: lowest.value,
+                lowestScore: lowest.score,
+                highestGroup: highest.value,
+                highestScore: highest.score,
+              });
+            }
+          }
+        });
+
+        // Calculate average gap with better error handling
+        const avgGap =
+          gaps.length > 0
+            ? gaps.reduce((sum, g) => sum + g.gap, 0) / gaps.length
+            : 0;
+
+        // For a specific demographic, get the exact gap
+        const specificGap =
+          selectedDemographic !== "all"
+            ? gaps.find((g) => g.demo === selectedDemographic)?.gap || 0
+            : avgGap;
+
+        return {
+          model: modelName,
+          avgGap: selectedDemographic === "all" ? avgGap : specificGap,
+          color: model.color,
+          gaps,
+        };
+      })
+      .sort((a, b) => a.avgGap - b.avgGap); // Sort by avg gap (lower is better)
+  };
+
+
+  // 1. Enhanced generateKeyInsights function that returns structured data objects
+const generateKeyInsights = () => {
+    const structuredInsights = [];
+    
+    // Only generate meaningful insights when we have sufficient data
+    if (!taskData || !demographicSummary) {
+      return ["Not enough data to generate insights."];
+    }
+    
+    // Get the filtered data
+    const filteredData = getFilteredPerformanceData();
+    const equityData = calculateModelEquity();
+    
+    // If we have data for performance comparison
+    if (filteredData.length > 0) {
+      // Find best performing model for the current filter set
+      const bestModel = { model: null, score: -Infinity };
+      const worstModel = { model: null, score: Infinity };
+      
+      // Extract scores based on groupBy and selected data
+      if (groupBy === "task") {
+        // Find best performance across all tasks
+        filteredData.forEach((task) => {
+          models.forEach((model) => {
+            const score = task[model.model];
+            if (score !== undefined && score > bestModel.score) {
+              bestModel.model = model.model;
+              bestModel.score = score;
+              bestModel.task = task.task || task.label;
+              bestModel.modelObj = model;
+            }
+            if (score !== undefined && score < worstModel.score) {
+              worstModel.model = model.model;
+              worstModel.score = score;
+              worstModel.task = task.task || task.label;
+              worstModel.modelObj = model;
+            }
+          });
+        });
+        
+        // Create contextual insights based on current filters
+        if (bestModel.model) {
+          let taskContext = bestModel.task;
+          let insightTitle = "";
+          
+          if (selectedTask === "all") {
+            insightTitle = `Best for ${taskContext}`;
+          } else if (Object.keys(taskCategories || {}).includes(selectedTask)) {
+            insightTitle = `Best for ${selectedTask} Tasks`;
+          } else {
+            insightTitle = `Best for ${selectedTask}`;
+            taskContext = selectedTask;
+          }
+  
+          structuredInsights.push({
+            type: "performance",
+            model: bestModel.model,
+            modelObj: bestModel.modelObj,
+            score: bestModel.score,
+            task: taskContext,
+            title: insightTitle
+          });
+        }
+        
+        if (bestModel.model && worstModel.model && bestModel.model !== worstModel.model) {
+          const gap = bestModel.score - worstModel.score;
+          if (gap > 15) { // Only show significant gaps
+            structuredInsights.push({
+              type: "gap",
+              gap: gap,
+              model1: bestModel.model,
+              model1Obj: bestModel.modelObj,
+              model2: worstModel.model,
+              model2Obj: worstModel.modelObj,
+              context: selectedTask !== "all" ? selectedTask : "across all tasks"
+            });
+          }
+        }
+      } else if (groupBy === "demographic" && selectedDemographic !== "all") {
+        // Similar logic for demographic insights...
+      }
+    }
+    
+    // Add equity insights when we have equity data
+    if (equityData.length > 0) {
+      const mostEquitable = equityData[0];
+      const leastEquitable = equityData[equityData.length - 1];
+      
+      // Get model objects
+      const mostEquitableModelObj = models.find(m => m.model === mostEquitable.model);
+      const leastEquitableModelObj = models.find(m => m.model === leastEquitable.model);
+      
+      // Only show equity insights if there's a meaningful difference
+      if (mostEquitable.avgGap < 10 && (leastEquitable.avgGap - mostEquitable.avgGap > 10)) {
+        let demoContext = selectedDemographic === "all" ? "all demographics" : selectedDemographic;
+        
+        structuredInsights.push({
+          type: "equity",
+          model: mostEquitable.model,
+          modelObj: mostEquitableModelObj,
+          gap: mostEquitable.avgGap,
+          demographic: demoContext,
+          task: selectedTask !== "all" ? selectedTask : ""
+        });
+      }
+      
+      if (leastEquitable.avgGap > 20) {
+        let demoContext = selectedDemographic === "all" ? "demographic groups" : `${selectedDemographic} groups`;
+        
+        structuredInsights.push({
+          type: "concern",
+          model: leastEquitable.model,
+          modelObj: leastEquitableModelObj,
+          gap: leastEquitable.avgGap,
+          demographic: demoContext,
+          task: selectedTask !== "all" ? selectedTask : ""
+        });
+      }
+    }
+    
+    return structuredInsights.length > 0 ? structuredInsights : 
+      [{ type: "info", message: "Try different filter combinations to discover more insights." }];
+  };
+  
+  // 2. Improved Key Insight Card component
+  const KeyInsightCard = ({ insight }) => {
+    // Determine card styling based on insight type
+    const getCardConfig = () => {
+      switch (insight.type) {
+        case "performance":
+          return {
+            backgroundColor: "bg-white",
+            dotColor: "bg-indigo-500",
+            icon: "🏆",
+            title: insight.title || "Top Performer"
+          };
+        case "equity":
+          return {
+            backgroundColor: "bg-white",
+            dotColor: "bg-purple-500",
+            icon: "⚖️",
+            title: "Equity Champion"
+          };
+        case "gap":
+          return {
+            backgroundColor: "bg-white", 
+            dotColor: "bg-amber-500",
+            icon: "📊",
+            title: "Performance Gap"
+          };
+        case "concern":
+          return {
+            backgroundColor: "bg-white",
+            dotColor: "bg-red-500",
+            icon: "⚠️",
+            title: "Potential Concern"
+          };
+        default:
+          return {
+            backgroundColor: "bg-white",
+            dotColor: "bg-gray-500",
+            icon: "ℹ️",
+            title: "Note"
+          };
+      }
+    };
+  
+    const config = getCardConfig();
+  
+    return (
+      <div className={`border rounded-lg overflow-hidden ${config.backgroundColor}`}>
+        {/* Card Header */}
+        <div className="border-b bg-white px-4 py-2">
+          <h4 className="font-medium text-gray-800 flex items-center">
+            <span className={`w-3 h-3 rounded-full ${config.dotColor} mr-2`}></span>
+            {config.title}
+          </h4>
+        </div>
+        
+        {/* Card Content */}
+        <div className="p-4">
+          {/* Performance Card */}
+          {insight.type === "performance" && (
+            <div className="flex items-center">
+              <div className={`h-10 w-10 text-2xl rounded-full flex items-center justify-center mr-3`}>
+                {config.icon}
+              </div>
+              <div>
+                <div className="font-medium" style={{ color: insight.modelObj?.color || '#6B7280' }}>
+                  {insight.model}
+                </div>
+                <div className="text-sm text-gray-600">
+                  Score: {insight.score.toFixed(1)}
+                </div>
+              </div>
+            </div>
+          )}
+          
+          {/* Equity Card */}
+          {insight.type === "equity" && (
+            <>
+              <div className="flex items-center">
+                <div className={`h-10 w-10 text-2xl rounded-full flex items-center justify-center mr-3`}>
+                  {config.icon}
+                </div>
+                <div>
+                  <div className="font-medium" style={{ color: insight.modelObj?.color || '#6B7280' }}>
+                    {insight.model}
+                  </div>
+                  <div className="text-sm text-gray-600">
+                    Equity Gap: {insight.gap.toFixed(1)}
+                  </div>
+                </div>
+              </div>
+              <div className="mt-3 text-sm">
+                Consistent across {insight.demographic}
+              </div>
+            </>
+          )}
+          
+          {/* Gap Card */}
+          {insight.type === "gap" && (
+            <>
+              <div className="flex items-center mb-3">
+                <div className={`h-10 w-10 text-2xl rounded-full flex items-center justify-center mr-3`}>
+                  {config.icon}
+                </div>
+                <div>
+                  <div className="font-medium">Gap: {insight.gap.toFixed(1)} points</div>
+                </div>
+              </div>
+              <div className="flex justify-between items-center">
+                <div style={{ color: insight.model1Obj?.color || '#6B7280' }} className="font-medium">
+                  {insight.model1}
+                </div>
+                <div className="text-gray-500 mx-2">vs</div>
+                <div style={{ color: insight.model2Obj?.color || '#6B7280' }} className="font-medium">
+                  {insight.model2}
+                </div>
+              </div>
+              {insight.context !== "across all tasks" && (
+                <div className="mt-2 text-sm text-gray-700">
+                  on {insight.context}
+                </div>
+              )}
+            </>
+          )}
+          
+          {/* Concern Card */}
+          {insight.type === "concern" && (
+            <>
+              <div className="flex items-center">
+                <div className={`h-10 w-10 text-2xl rounded-full flex items-center justify-center mr-3`}>
+                  {config.icon}
+                </div>
+                <div>
+                  <div className="font-medium" style={{ color: insight.modelObj?.color || '#6B7280' }}>
+                    {insight.model}
+                  </div>
+                  <div className="text-sm text-gray-600">
+                    Disparity: {insight.gap.toFixed(1)} points
+                  </div>
+                </div>
+              </div>
+              <div className="mt-3 text-sm">
+                Between {insight.demographic}
+                {insight.task && ` on ${insight.task}`}
+              </div>
+            </>
+          )}
+          
+          {/* Info Card */}
+          {insight.type === "info" && (
+            <div className="text-sm text-gray-700">
+              {insight.message}
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  };
+  
+  // 3. Key Insights Panel render function
+  const renderKeyInsightsPanel = () => {
+    // Get structured insights directly from enhanced function
+    const structuredInsights = generateKeyInsights();
+    
+    return (
+      <div className="border rounded-lg overflow-hidden mb-6 shadow-sm">
+        <div 
+          className="px-4 py-3 bg-white flex justify-between items-center cursor-pointer"
+          onClick={() => setKeyInsightsVisible(!keyInsightsVisible)}
+        >
+          <h3 className="font-semibold flex items-center text-gray-800">
+            <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
+              <path d="M11 3a1 1 0 10-2 0v1a1 1 0 102 0V3zM15.657 5.757a1 1 0 00-1.414-1.414l-.707.707a1 1 0 001.414 1.414l.707-.707zM18 10a1 1 0 01-1 1h-1a1 1 0 110-2h1a1 1 0 011 1zM5.05 6.464A1 1 0 106.464 5.05l-.707-.707a1 1 0 00-1.414 1.414l.707.707zM5 10a1 1 0 01-1 1H3a1 1 0 110-2h1a1 1 0 011 1zM8 16v-1h4v1a2 2 0 11-4 0zM12 14c.015-.34.208-.646.477-.859a4 4 0 10-4.954 0c.27.213.462.519.476.859h4.002z" />
+            </svg>
+            Key Insights
+          </h3>
+          <div className="flex items-center">
+            {structuredInsights.length > 0 && (
+              <span className="text-xs bg-blue-500 text-white rounded-full px-2 py-0.5 mr-2">
+                {structuredInsights.length}
+              </span>
+            )}
+            <div className="text-gray-500">
+              {keyInsightsVisible ? (
+                <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                  <path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" />
+                </svg>
+              ) : (
+                <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                  <path fillRule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clipRule="evenodd" />
+                </svg>
+              )}
+            </div>
+          </div>
+        </div>
+        {keyInsightsVisible && (
+          <div className="p-4">
+            {structuredInsights.length > 0 && structuredInsights[0].type !== "info" ? (
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                {structuredInsights.map((insight, index) => (
+                  <KeyInsightCard key={index} insight={insight} />
+                ))}
+              </div>
+            ) : (
+              <div className="py-6 text-center text-gray-500">
+                <svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8 mx-auto mb-2 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+                <p>{structuredInsights[0].message || "No insights available for current filter selection"}</p>
+                <p className="text-sm mt-1">Try adjusting your filters to see insights</p>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  // Get data for visualization
+  const performanceData = getFilteredPerformanceData();
+  const equityRankings = calculateModelEquity();
+  const keyInsights = generateKeyInsights();
+
+  // Custom tooltip for the bar chart
+  const PerformanceTooltip = ({ active, payload, label }) => {
+    if (active && payload && payload.length) {
+      return (
+        <div className="bg-white p-3 border rounded shadow-sm">
+          <p className="font-medium">{label}</p>
+          <div className="mt-2">
+            {payload.map((entry, index) => {
+              // Skip entries that don't have model data
+              if (!entry.name || entry.name.includes("_std")) return null;
+
+              // Find the corresponding standard deviation if available
+              const stdKey = `${entry.name}_std`;
+              const stdEntry = payload.find((p) => p.dataKey === stdKey);
+              const stdValue = stdEntry ? stdEntry.value : 0;
+
+              return (
+                <div key={index} className="flex items-center text-sm mb-1">
+                  <div
+                    className="w-3 h-3 rounded-full mr-1"
+                    style={{ backgroundColor: entry.color }}
+                  ></div>
+                  <span className="mr-2">{entry.name}:</span>
+                  <span className="font-medium">
+                    {entry.value.toFixed(2)}{" "}
+                    {stdValue ? `± ${stdValue.toFixed(2)}` : ""}
+                  </span>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      );
+    }
+    return null;
+  };
+
+  // Get formatted metric name
+  const getMetricName = (metric) => {
+    if (metric === "overall_score") return "Overall Score";
+    if (metric === "repeat_usage_pct") return "Would Use Again";
+    if (metric.startsWith("facet_")) {
+      const facet = metric.replace("facet_", "");
+      return formatFacetName(facet);
+    }
+    return metric;
+  };
+
+  return (
+    <div>
+      {/* Analysis Controls Panel */}
+      <div className="border rounded-lg overflow-hidden mb-6">
+        <div className="px-4 py-2 bg-gray-50 border-b">
+          <h3 className="font-semibold">Analysis Controls</h3>
+        </div>
+        <div className="p-4 grid grid-cols-1 md:grid-cols-3 gap-4">
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-2">
+              Group By
+            </label>
+            <select
+              className="w-full border rounded-md px-3 py-2 bg-white shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+              value={groupBy}
+              onChange={(e) => setGroupBy(e.target.value)}
+            >
+              <option value="task">Task</option>
+              <option value="demographic">Demographic</option>
+              <option value="combined">Task × Demographic</option>
+            </select>
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-2">
+              Task
+            </label>
+            <select
+              className={`w-full border rounded-md px-3 py-2 shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 ${
+                groupBy === "demographic"
+                  ? "bg-gray-100 text-gray-500"
+                  : "bg-white"
+              }`}
+              value={selectedTask}
+              onChange={(e) => setSelectedTask(e.target.value)}
+              disabled={groupBy === "demographic"}
+            >
+              {/* Show "All Tasks" at the top */}
+              <option value={taskOptions.allTasksOption.value}>
+                {taskOptions.allTasksOption.label}
+              </option>
+
+              {/* Show categories at second level */}
+              <optgroup label="Task Categories">
+                {taskOptions.categories.map((category) => (
+                  <option key={category.value} value={category.value}>
+                    {category.label}
+                  </option>
+                ))}
+              </optgroup>
+
+              {/* Show tasks grouped by category */}
+              {Object.entries(taskOptions.categorizedTasks).map(
+                ([category, tasks]) => (
+                  <optgroup
+                    key={category}
+                    label={`${
+                      category.charAt(0).toUpperCase() + category.slice(1)
+                    } Tasks`}
+                  >
+                    {tasks.map((task) => (
+                      <option key={task.value} value={task.value}>
+                        {task.label}
+                      </option>
+                    ))}
+                  </optgroup>
+                )
+              )}
+
+              {/* Show uncategorized tasks if any */}
+              {taskOptions.uncategorizedTasks.length > 0 && (
+                <optgroup label="Other Tasks">
+                  {taskOptions.uncategorizedTasks.map((task) => (
+                    <option key={task.value} value={task.value}>
+                      {task.label}
+                    </option>
+                  ))}
+                </optgroup>
+              )}
+            </select>
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-2">
+              Demographic Dimension
+              {groupBy === "task" && (
+                <span className="ml-2 text-xs text-gray-500">
+                  (Disabled when grouping by task)
+                </span>
+              )}
+            </label>
+            <select
+              className={`w-full border rounded-md px-3 py-2 shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 ${
+                groupBy === "task" ? "bg-gray-100 text-gray-500" : "bg-white"
+              }`}
+              value={selectedDemographic}
+              onChange={(e) => setSelectedDemographic(e.target.value)}
+              disabled={groupBy === "task"}
+            >
+              <option value="all">All Demographics (Average)</option>
+              {Object.keys(demographicOptions || {}).map((demo) => (
+                <option key={demo} value={demo}>
+                  {demo.charAt(0).toUpperCase() + demo.slice(1)}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-2">
+              Metric
+            </label>
+            <select
+              className="w-full border rounded-md px-3 py-2 bg-white shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+              value={selectedMetric}
+              onChange={(e) => setSelectedMetric(e.target.value)}
+            >
+              <option value="overall_score">Overall Score</option>
+              <option value="repeat_usage_pct">Would Use Again (%)</option>
+              {Object.keys(facets || {})
+                .filter((f) => f !== "repeat_usage")
+                .map((facet) => (
+                  <option key={facet} value={`facet_${facet}`}>
+                    {formatFacetName(facet)}
+                  </option>
+                ))}
+            </select>
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-2">
+              Model
+            </label>
+            <select
+              className="w-full border rounded-md px-3 py-2 bg-white shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+              value={selectedModel || ""}
+              onChange={(e) => setSelectedModel(e.target.value)}
+            >
+              {models.map((model) => (
+                <option key={model.model} value={model.model}>
+                  {model.model}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-2">
+              Display Options
+            </label>
+            <div className="flex flex-wrap gap-2">
+              <button
+                className={`px-3 py-1 text-xs font-medium rounded ${
+                  showAllModels
+                    ? "bg-blue-100 text-blue-800 border border-blue-300"
+                    : "bg-gray-100 text-gray-800 border border-gray-300"
+                }`}
+                onClick={() => setShowAllModels(true)}
+              >
+                All Models
+              </button>
+              <button
+                className={`px-3 py-1 text-xs font-medium rounded ${
+                  !showAllModels
+                    ? "bg-blue-100 text-blue-800 border border-blue-300"
+                    : "bg-gray-100 text-gray-800 border border-gray-300"
+                }`}
+                onClick={() => setShowAllModels(false)}
+              >
+                Selected Only
+              </button>
+              <button
+                className={`px-3 py-1 text-xs font-medium rounded ${
+                  viewMode === "absolute"
+                    ? "bg-blue-100 text-blue-800 border border-blue-300"
+                    : "bg-gray-100 text-gray-800 border border-gray-300"
+                }`}
+                onClick={() => setViewMode("absolute")}
+              >
+                Absolute
+              </button>
+              <button
+                className={`px-3 py-1 text-xs font-medium rounded ${
+                  viewMode === "relative"
+                    ? "bg-blue-100 text-blue-800 border border-blue-300"
+                    : "bg-gray-100 text-gray-800 border border-gray-300"
+                }`}
+                onClick={() => setViewMode("relative")}
+                title="Show performance relative to the average across models"
+              >
+                Relative
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Active Filters Display */}
+      <div className="mb-6">
+        <div className="text-sm font-medium text-gray-700 mb-2">
+          Active Filters:
+        </div>
+        <div className="flex flex-wrap">
+          {selectedTask !== "all" && (
+            <FilterTag
+              label={`Task: ${getTaskLabel(selectedTask)}`}
+              onRemove={() => setSelectedTask("all")}
+            />
+          )}
+          {selectedDemographic !== "all" && (
+            <FilterTag
+              label={`Demographic: ${
+                selectedDemographic.charAt(0).toUpperCase() +
+                selectedDemographic.slice(1)
+              }`}
+              onRemove={() => setSelectedDemographic("all")}
+            />
+          )}
+          {!showAllModels && (
+            <FilterTag
+              label={`Model: ${selectedModel}`}
+              onRemove={() => setShowAllModels(true)}
+            />
+          )}
+          <FilterTag label={`Metric: ${getMetricName(selectedMetric)}`} />
+          <FilterTag
+            label={`Group by: ${
+              groupBy.charAt(0).toUpperCase() + groupBy.slice(1)
+            }`}
+          />
+        </div>
+      </div>
+
+      {/* Key Insights Panel */}
+      {renderKeyInsightsPanel()}
+
+      {/* Performance Comparison Visualization */}
+      <div className="border rounded-lg overflow-hidden mb-6">
+        <div className="px-4 py-2 bg-gray-50 border-b">
+          <h3 className="font-semibold">
+            {getMetricName(selectedMetric)} by{" "}
+            {groupBy.charAt(0).toUpperCase() + groupBy.slice(1)}
+            {viewMode === "relative" && " (Relative to Average)"}
+          </h3>
+        </div>
+        <div className="p-4">
+          {performanceData.length > 0 ? (
+            <div className="h-96">
+              <ResponsiveContainer width="100%" height="100%">
+                <BarChart
+                  data={performanceData}
+                  layout="vertical"
+                  margin={{ top: 20, right: 30, left: 0, bottom: 5 }}
+                >
+                  <CartesianGrid strokeDasharray="3 3" />
+                  <XAxis
+                    type="number"
+                    domain={
+                      viewMode === "relative"
+                        ? // For relative mode, use symmetrical domain based on max deviation
+                          (dataMax) => {
+                            // Find max absolute deviation
+                            const maxDev = performanceData.reduce(
+                              (max, item) => {
+                                let itemMax = max;
+                                models.forEach((model) => {
+                                  if (typeof item[model.model] === "number") {
+                                    itemMax = Math.max(
+                                      itemMax,
+                                      Math.abs(item[model.model])
+                                    );
+                                  }
+                                });
+                                return itemMax;
+                              },
+                              0
+                            );
+                            // Round up to nearest 5
+                            const scaledMax = Math.ceil(maxDev / 5) * 5;
+                            // Use symmetrical domain
+                            return [-scaledMax, scaledMax];
+                          }
+                        : // For absolute mode, use original scale range
+                        selectedMetric.startsWith("facet_")
+                        ? [-100, 100]
+                        : [0, 100]
+                    }
+                    tickFormatter={(value) => {
+                      if (viewMode === "relative") {
+                        return value > 0
+                          ? `+${value.toFixed(0)}`
+                          : value.toFixed(0);
+                      }
+                      return value.toFixed(0);
+                    }}
+                  />
+                  <YAxis
+                    dataKey={groupBy === "task" ? "task" : "label"}
+                    type="category"
+                    width={150}
+                    tick={{ fontSize: 12 }}
+                  />
+                  <Tooltip content={<PerformanceTooltip />} />
+                  <Legend />
+                  {(showAllModels
+                    ? models
+                    : [models.find((m) => m.model === selectedModel)].filter(
+                        Boolean
+                      )
+                  ).map((model) => (
+                    <Bar
+                      key={model.model}
+                      dataKey={model.model}
+                      name={model.model}
+                      fill={model.color}
+                      maxBarSize={25}
+                    >
+                      {viewMode === "relative" &&
+                        performanceData.map((entry, index) => {
+                          const value = entry[model.model];
+                          return (
+                            <Cell
+                              key={`cell-${index}`}
+                              fill={
+                                value >= 0 ? model.color : `${model.color}80`
+                              } // Lighter shade for negative values
+                            />
+                          );
+                        })}
+                    </Bar>
+                  ))}
+                  {viewMode === "relative" && (
+                    <ReferenceLine x={0} stroke="#666" strokeDasharray="3 3" />
+                  )}
+                </BarChart>
+              </ResponsiveContainer>
+            </div>
+          ) : (
+            <div className="flex items-center justify-center h-60 bg-gray-50 rounded">
+              <div className="text-center p-4">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="h-10 w-10 mx-auto text-gray-400 mb-3"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                  />
+                </svg>
+                <h3 className="text-lg font-medium text-gray-900 mb-1">
+                  No Data Available
+                </h3>
+                <p className="text-sm text-gray-600">
+                  There is no data available for the selected filters. Try
+                  adjusting your selections.
+                </p>
+                {groupBy === "combined" && (
+                  <p className="text-sm text-gray-600 mt-2">
+                    Note: Task × Demographic view requires specific data that
+                    may not be available.
+                  </p>
+                )}
+              </div>
+            </div>
+          )}
+          <div className="mt-4 text-sm text-gray-600 text-center">
+            {viewMode === "absolute"
+              ? `${getMetricName(selectedMetric)} by ${groupBy}`
+              : `Performance relative to average across models (positive is better than average)`}
+          </div>
+        </div>
+      </div>
+
+      {/* Model Equity Rankings */}
+      <div className="border rounded-lg overflow-hidden mb-6">
+        <div className="px-4 py-2 bg-gray-50 border-b flex justify-between items-center">
+          <h3 className="font-semibold">Model Equity Rankings</h3>
+          <span className="text-xs text-gray-500">
+            Lower gaps indicate more consistent performance across demographic
+            groups
+          </span>
+        </div>
+        <div className="p-4">
+          <div className="space-y-3">
+            {equityRankings.map((model, index) => {
+              const pct = 100 - (model.avgGap / 30) * 100; // Scale to percentage where 100% = perfect equity
+              return (
+                <div key={model.model} className="relative">
+                  <div className="flex items-center mb-1">
+                    <div className="w-6 text-sm text-gray-500">
+                      {index + 1}.
+                    </div>
+                    <div
+                      className="w-8 h-8 flex items-center justify-center rounded-full mr-2"
+                      style={{ backgroundColor: model.color }}
+                    >
+                      <span className="text-white font-bold text-xs">
+                        {index + 1}
+                      </span>
+                    </div>
+                    <span className="text-sm font-medium mr-2">
+                      {model.model}
+                    </span>
+                    <span
+                      className={`ml-auto px-2 py-1 text-xs font-semibold rounded-full ${
+                        model.avgGap < 10
+                          ? "bg-green-100 text-green-800"
+                          : model.avgGap < 20
+                          ? "bg-blue-100 text-blue-800"
+                          : "bg-yellow-100 text-yellow-800"
+                      }`}
+                    >
+                      {model.avgGap.toFixed(2)} avg gap
+                    </span>
+                  </div>
+                  <div className="h-2 w-full bg-gray-200 rounded-full overflow-hidden">
+                    <div
+                      className="h-full rounded-full"
+                      style={{
+                        width: `${Math.min(100, Math.max(0, pct))}%`,
+                        backgroundColor: model.color,
+                      }}
+                    ></div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+          <div className="mt-4 text-xs text-gray-500 grid grid-cols-3 gap-2">
+            <div className="flex items-center">
+              <div className="w-3 h-3 bg-green-100 mr-1 rounded"></div>
+              <span>&lt; 10: Excellent equity</span>
+            </div>
+            <div className="flex items-center">
+              <div className="w-3 h-3 bg-blue-100 mr-1 rounded"></div>
+              <span>10 - 20: Good equity</span>
+            </div>
+            <div className="flex items-center">
+              <div className="w-3 h-3 bg-yellow-100 mr-1 rounded"></div>
+              <span>&gt; 20: Potential disparity</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TaskDemographicAnalysis;

leaderboard-app/eslint.config.mjs

@@ -0,0 +1,14 @@
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+});
+
+const eslintConfig = [...compat.extends("next/core-web-vitals")];
+
+export default eslintConfig;

leaderboard-app/jsconfig.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./*"]
+    }
+  }
+}

leaderboard-app/lib/utils.js

@@ -0,0 +1,205 @@
+/**
+ * Prepares the data for visualization by adding colors and formatting
+ * @param {Object} rawData - The raw data from the JSON file
+ * @returns {Object} - Processed data ready for visualization
+ */
+export function prepareDataForVisualization(rawData) {
+    // Define model colors for consistent visualization
+    const MODEL_COLORS = {
+      'gpt-4o': '#19AADE',
+      'claude-3.7-sonnet': '#4A35C5',
+      'deepseek-r1': '#FFA319',
+      'o1': '#EF4444',
+      'gemini-2.0-flash-001': '#22C55E',
+      'llama-3.1-405b-instruct': '#8B5CF6'
+    };
+  
+    // Add colors to model data
+    const modelsWithColors = rawData.models.map(model => ({
+      ...model,
+      color: MODEL_COLORS[model.model] || '#999999' // Fallback color if not defined
+    }));
+  
+    // Create an easier lookup for models by name
+    const modelsMap = modelsWithColors.reduce((acc, model) => {
+      acc[model.model] = model;
+      return acc;
+    }, {});
+  
+    // Add best model indicators for each task category
+    const taskCategories = { ...rawData.taskCategories };
+    const bestModelPerCategory = {};
+    
+    Object.keys(taskCategories).forEach(category => {
+      let bestModel = null;
+      let highestScore = -Infinity;
+      let stdDev = 0;
+      
+      modelsWithColors.forEach(model => {
+        if (model.tasks && model.tasks[category] && model.tasks[category] > highestScore) {
+          highestScore = model.tasks[category];
+          bestModel = model.model;
+          stdDev = model.tasks_std?.[category] || 0;
+        }
+      });
+      
+      bestModelPerCategory[category] = {
+        model: bestModel,
+        score: highestScore,
+        std: stdDev,
+        color: MODEL_COLORS[bestModel] || '#999999'
+      };
+    });
+  
+    // Add best model indicators for each metric group
+    const metricGroups = { ...rawData.metricGroups };
+    const bestModelPerMetricGroup = {};
+    
+    Object.keys(metricGroups).forEach(group => {
+      let bestModel = null;
+      let highestScore = -Infinity;
+      let stdDev = 0;
+      
+      modelsWithColors.forEach(model => {
+        if (model.metric_groups && model.metric_groups[group] && model.metric_groups[group] > highestScore) {
+          highestScore = model.metric_groups[group];
+          bestModel = model.model;
+          stdDev = model.metric_groups_std?.[group] || 0;
+        }
+      });
+      
+      bestModelPerMetricGroup[group] = {
+        model: bestModel,
+        score: highestScore,
+        std: stdDev,
+        color: MODEL_COLORS[bestModel] || '#999999'
+      };
+    });
+
+    // Add best model indicators for each facet
+    const bestModelPerFacet = {};
+    
+    // Extract facets from the data
+    const facets = {};
+    if (rawData.facets) {
+      // If facets are already provided in the raw data
+      Object.assign(facets, rawData.facets);
+    } else {
+      // Try to extract facets from the radar data
+      if (rawData.radarData && rawData.radarData.length > 0) {
+        rawData.radarData.forEach(item => {
+          if (item.category && item.category !== "Would Use Again") {
+            const facetName = item.category.toLowerCase().replace(/\s+/g, '_');
+            facets[facetName] = [];
+          }
+        });
+      }
+    }
+    
+    // Find best model for each facet
+    Object.keys(facets).forEach(facet => {
+      if (facet === 'repeat_usage') return; // Skip repeat_usage
+      
+      let bestModel = null;
+      let highestScore = -Infinity;
+      let stdDev = 0;
+      
+      modelsWithColors.forEach(model => {
+        // Check if the model has facet scores
+        if (model.facet_scores && model.facet_scores[facet] !== undefined) {
+          const score = model.facet_scores[facet];
+          if (score > highestScore) {
+            highestScore = score;
+            bestModel = model.model;
+            stdDev = model.facet_scores[`${facet}_std`] || 0;
+          }
+        }
+      });
+      
+      if (bestModel) {
+        bestModelPerFacet[facet] = {
+          model: bestModel,
+          score: highestScore,
+          std: stdDev,
+          color: MODEL_COLORS[bestModel] || '#999999'
+        };
+      }
+    });
+  
+    // Format task data for visualization
+    const taskData = rawData.taskData.map(task => {
+      // Find best model for this task
+      let bestModel = null;
+      let highestScore = -Infinity;
+      
+      Object.entries(task).forEach(([key, value]) => {
+        if (modelsMap[key] && value !== null && value > highestScore) {
+          highestScore = value;
+          bestModel = key;
+        }
+      });
+      
+      return {
+        ...task,
+        bestModel,
+        bestModelColor: bestModel ? MODEL_COLORS[bestModel] : null,
+        bestScore: highestScore !== -Infinity ? highestScore : null
+      };
+    });
+  
+    return {
+      models: modelsWithColors,
+      modelsMap,
+      taskData,
+      radarData: rawData.radarData,
+      taskCategories,
+      metricGroups,
+      facets,
+      bestModelPerCategory,
+      bestModelPerMetricGroup,
+      bestModelPerFacet,
+      // Pass through demographic data fields
+      demographicSummary: rawData.demographicSummary,
+      fairnessMetrics: rawData.fairnessMetrics,
+      demographicOptions: rawData.demographicOptions,
+      keyFacetsByTaskCategory: rawData.keyFacetsByTaskCategory,
+      keyAspectsByTask: rawData.keyAspectsByTask
+    };
+  }
+  
+  /**
+   * Determine styling based on score
+   * @param {number} score - The score to evaluate
+   * @param {number} min - The minimum possible score (default: 0)
+   * @param {number} max - The maximum possible score (default: 5)
+   * @returns {string} - CSS class for the score badge
+   */
+  export function getScoreBadgeColor(score, min = 0, max = 100) {
+    // For facet scores (-100 to +100)
+    if (min < 0) {
+      if (score >= 50) return 'bg-green-100 text-green-800';
+      if (score >= 0) return 'bg-blue-100 text-blue-800';
+      if (score >= -50) return 'bg-yellow-100 text-yellow-800';
+      return 'bg-red-100 text-red-800';
+    }
+    
+    // For aspect scores (0 to 100)
+    const range = max - min;
+    const percent = ((score - min) / range) * 100;
+    
+    if (percent >= 80) return 'bg-green-100 text-green-800';
+    if (percent >= 60) return 'bg-blue-100 text-blue-800';
+    if (percent >= 40) return 'bg-yellow-100 text-yellow-800';
+    return 'bg-red-100 text-red-800';
+  }
+  
+  /**
+   * Format likert score for display (-3 to +3 scale)
+   * @param {number} score - The likert score
+   * @returns {string} - Formatted score string
+   */
+  export function formatLikertScore(score) {
+    const formatted = score.toFixed(1);
+    if (score > 0) return `+${formatted}`;
+    return formatted;
+  }

leaderboard-app/next.config.mjs

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+export default nextConfig;

leaderboard-app/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "leaderboard-app",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "next": "15.2.3",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "recharts": "^2.15.1"
+  },
+  "devDependencies": {
+    "@eslint/eslintrc": "^3",
+    "@tailwindcss/postcss": "^4",
+    "eslint": "^9",
+    "eslint-config-next": "15.2.3",
+    "tailwindcss": "^4"
+  }
+}

leaderboard-app/postcss.config.mjs

@@ -0,0 +1,5 @@
+const config = {
+  plugins: ["@tailwindcss/postcss"],
+};
+
+export default config;