[Setup] Configure pre-commit and CI

.gemini /config.yaml

@@ -0,0 +1,11 @@
+# Referred to SkyRL
+have_fun: true # the bot sometimes adds lighthearted / fun comments.
+code_review:
+  disable: false
+  comment_severity_threshold: MEDIUM
+  max_review_comments: -1
+  pull_request_opened:
+    help: false
+    summary: false # enable PR summaries
+    code_review: false
+ignore_patterns: []

.github/workflows/precommit.yml

@@ -0,0 +1,12 @@
+name: pre-commit
+on: [push, pull_request]
+jobs:
+  pre-commit:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-python@v5
+        with:
+          python-version: "3.x"
+      - run: pip install pre-commit
+      - run: pre-commit run --all-files

.gitignore

@@ -17,6 +17,7 @@
 .env.development.local
 .env.test.local
 .env.production.local
+.venv*/*
 
 npm-debug.log*
 yarn-debug.log*

.pre-commit-config.yaml

@@ -0,0 +1,36 @@
+repos:
+  # --- Basic hygiene ---
+  - repo: https://github.com/pre-commit/pre-commit-hooks
+    rev: v5.0.0
+    hooks:
+      - id: trailing-whitespace
+        exclude: '\\.svg$'
+        exclude_types: [svg]
+      - id: end-of-file-fixer
+        exclude: '\\.svg$'
+        exclude_types: [svg]
+      - id: check-json
+      - id: check-yaml
+      - id: check-added-large-files
+        args: ["--maxkb=2048"]
+      - id: check-merge-conflict
+      - id: check-case-conflict
+      - id: detect-private-key
+      - id: mixed-line-ending
+
+  # --- JS/HTML formatting and linting ---
+  - repo: https://github.com/pre-commit/mirrors-prettier
+    rev: v4.0.0-alpha.8
+    hooks:
+      - id: prettier
+        args: [--check]
+        additional_dependencies: [prettier@3.2.5]
+        files: '\\.(js|jsx|ts|tsx|json|css|scss|md|markdown|yml|yaml|html)$'
+
+  # --- Optional: spell check or link check ---
+  - repo: https://github.com/codespell-project/codespell
+    rev: v2.2.6
+    hooks:
+      - id: codespell
+        args: ["--ignore-words-list=teh,fo"]
+        exclude: '^package-lock\.json$'

README.md

@@ -155,7 +155,7 @@ If you use RouterArena in your research, please cite our paper:
 
 ```bibtex
 @misc{lu2024routerarena,
-  title={RouterArena: An Open Platform for Comprehensive Comparison of LLM Routers}, 
+  title={RouterArena: An Open Platform for Comprehensive Comparison of LLM Routers},
   author={Yifan Lu and Rixin Liu and Jiayi Yuan and Xingqi Cui and Shenrun Zhang and Hongyi Liu and Jiarong Xing},
   year={2024},
   eprint={2510.00202},
@@ -172,4 +172,4 @@ If you use RouterArena in your research, please cite our paper:
 
 ## Acknowledgments
 
-We thank all contributors who have made this project possible.
+We thank all contributors who have made this project possible.

src/App.css

@@ -91,9 +91,9 @@ code {
   .container {
     padding: 0 0.75rem;
   }
-  
+
   .btn {
     padding: 0.625rem 1.25rem;
     font-size: 0.9rem;
   }
-}
+}

src/components/DatasetCompositionChart.tsx

@@ -88,7 +88,7 @@ const categoryColors = [
 // Difficulty level colors
 const difficultyColors = {
   'Easy': '#22C55E',
-  'Medium': '#F59E0B', 
+  'Medium': '#F59E0B',
   'Hard': '#EF4444'
 };
 
@@ -166,7 +166,7 @@ const DatasetCompositionChart: React.FC = () => {
   const CustomTooltip = ({ active, payload }: any) => {
     if (active && payload && payload.length) {
       const data = payload[0].payload;
-      
+
       // Get subcategory descriptions
       const getSubcategoryDescription = (name: string, parent: string) => {
         const descriptions: { [key: string]: { [key: string]: string } } = {
@@ -217,10 +217,10 @@ const DatasetCompositionChart: React.FC = () => {
             'Biography and genealogy': 'Personal histories & lineages'
           }
         };
-        
+
         return descriptions[parent]?.[name] || name;
       };
-      
+
       return (
         <div className="chart-tooltip">
           <p className="tooltip-title">{data.name}</p>
@@ -257,19 +257,19 @@ const DatasetCompositionChart: React.FC = () => {
                 onMouseLeave={() => setHoveredSubcategory(null)}
               >
                 {subcategoryData.map((entry, index) => (
-                  <Cell 
-                    key={`subcell-${index}`} 
+                  <Cell
+                    key={`subcell-${index}`}
                     fill={entry.color}
                     stroke={hoveredSubcategory === entry.name ? '#d1d5db' : '#fff'}
                     strokeWidth={hoveredSubcategory === entry.name ? 2 : 1}
-                    style={{ 
+                    style={{
                       filter: hoveredSubcategory === entry.name ? 'brightness(1.1) saturate(1.1)' : 'none',
                       transition: 'all 0.2s ease'
                     }}
                   />
                 ))}
               </Pie>
-              
+
               {/* Outer ring - Main categories */}
               <Pie
                 data={mainChartData}
@@ -286,27 +286,27 @@ const DatasetCompositionChart: React.FC = () => {
                 onMouseLeave={() => setHoveredCategory(null)}
               >
                 {mainChartData.map((entry, index) => (
-                  <Cell 
-                    key={`cell-${index}`} 
+                  <Cell
+                    key={`cell-${index}`}
                     fill={entry.color}
                     stroke={hoveredCategory === entry.category ? '#9ca3af' : '#fff'}
                     strokeWidth={hoveredCategory === entry.category ? 2 : 1}
-                    style={{ 
+                    style={{
                       filter: hoveredCategory === entry.category ? 'brightness(1.12) saturate(1.15)' : 'none',
                       transition: 'all 0.2s ease'
                     }}
                   />
                 ))}
               </Pie>
-              <Tooltip 
-                content={<CustomTooltip />} 
+              <Tooltip
+                content={<CustomTooltip />}
                 wrapperStyle={{ zIndex: 9999 }}
               />
             </PieChart>
           </ResponsiveContainer>
-          
+
           {/* Independent SVG Labels Overlay */}
-          <svg 
+          <svg
             className="labels-svg-overlay"
             style={{
               position: 'absolute',
@@ -322,30 +322,30 @@ const DatasetCompositionChart: React.FC = () => {
             {mainChartData.map((entry, index) => {
               const totalValue = mainChartData.reduce((sum, item) => sum + item.value, 0);
               let cumulativeValue = 0;
-              
+
               for (let i = 0; i < index; i++) {
                 cumulativeValue += mainChartData[i].value;
               }
-              
+
               const startAngle = (cumulativeValue / totalValue) * 360 - 90;
               const endAngle = ((cumulativeValue + entry.value) / totalValue) * 360 - 90;
               const midAngle = (startAngle + endAngle) / 2;
-              
+
               const RADIAN = Math.PI / 180;
               // Adaptive label radius: farther for sides, closer for top/bottom
               const baseOffset = 60;   // baseline distance beyond pie edge
               const sideBoost = 40;    // extra distance for left/right labels
-              const angleFactor = Math.abs(Math.sin(midAngle * RADIAN)); 
+              const angleFactor = Math.abs(Math.sin(midAngle * RADIAN));
               // 0 for top/bottom, 1 for sides
 
               const radius = CHART_DIMENSIONS.outerRadius + baseOffset + sideBoost * angleFactor;
-                          
+
               // Use exact center coordinates matching Recharts
               const centerX = 400; // Exact center of 800x800 viewBox
               const centerY = 400; // Exact center of 800x800 viewBox
               const x = centerX - radius * Math.sin(midAngle * RADIAN);
               const y = centerY - radius * Math.cos(midAngle * RADIAN);
-              
+
               // Create shortened versions of category names
               const getShortName = (name: string) => {
                 const shortNames: { [key: string]: string } = {
@@ -361,9 +361,9 @@ const DatasetCompositionChart: React.FC = () => {
                 };
                 return shortNames[name] || name;
               };
-              
+
               const shortName = getShortName(entry.name);
-              
+
               return (
                 <g key={index}>
                   <rect

src/components/DeferralCurve.css

@@ -89,14 +89,13 @@
     min-width: auto;
     justify-content: center;
   }
-  
+
   .legend-section h4 {
     text-align: center;
   }
-  
+
   .legend-items {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
   }
 }
-