llms.txt

This file is a merged representation of a subset of the codebase, containing files not matching ignore patterns, combined into a single document by Repomix.

================================================================
File Summary
================================================================

Purpose:
--------
This file contains a packed representation of the entire repository's contents.
It is designed to be easily consumable by AI systems for analysis, code review,
or other automated processes.

File Format:
------------
The content is organized as follows:
1. This summary section
2. Repository information
3. Directory structure
4. Multiple file entries, each consisting of:
  a. A separator line (================)
  b. The file path (File: path/to/file)
  c. Another separator line
  d. The full contents of the file
  e. A blank line

Usage Guidelines:
-----------------
- This file should be treated as read-only. Any changes should be made to the
  original repository files, not this packed version.
- When processing this file, use the file path to distinguish
  between different files in the repository.
- Be aware that this file may contain sensitive information. Handle it with
  the same level of security as you would the original repository.

Notes:
------
- Some files may have been excluded based on .gitignore rules and Repomix's configuration
- Binary files are not included in this packed representation. Please refer to the Repository Structure section for a complete list of file paths, including binary files
- Files matching these patterns are excluded: backend/completed_games, backend/model_lists, frontend/.next
- Files matching patterns in .gitignore are excluded
- Files matching default ignore patterns are excluded

Additional Info:
----------------

================================================================
Directory Structure
================================================================
backend/
  cli/
    generate_matchups.py
  .env.local
  .gitignore
  app.py
  backend.railway.json
  elo_tracker.py
  llm_providers.py
  main.py
  requirements.txt
  video.py
frontend/
  public/
    file.svg
    globe.svg
    next.svg
    vercel.svg
    window.svg
  src/
    app/
      about/
        page.tsx
      match/
        [id]/
          page.tsx
      models/
        [id]/
          page.tsx
      error.tsx
      globals.css
      layout.tsx
      page.tsx
      PostHogPageView.tsx
      providers.tsx
    components/
      home/
        HeroSection.tsx
        LeaderboardSection.tsx
        StatsSection.tsx
      layout/
        Footer.tsx
        Navbar.tsx
      match/
        GameCanvas.tsx
        GameControls.tsx
        GameViewer.tsx
        MatchInfo.tsx
        Modal.tsx
        PlayerThoughts.tsx
        ScorePanel.tsx
      ui/
        button.tsx
        table.tsx
    lib/
      utils.ts
  .gitignore
  components.json
  eslint.config.mjs
  frontend.railway.json
  next.config.ts
  nixpacks.toml
  package.json
  postcss.config.mjs
  tailwind.config.js
  tailwind.config.ts
  tsconfig.json
.gitignore
.startsession
README.md
run_repomix.sh

================================================================
Files
================================================================

================
File: backend/cli/generate_matchups.py
================
#!/usr/bin/env python3
"""
This script generates battle matchups for LLM Snake Arena.

Two modes are supported:
1. all: Generate all unique combinations from the model list, each repeated as specified.
2. single: Generate matchups with a fixed model (provided via --model) against all other models from the input file.

Usage Examples:
-------------
Generate all matchups from model_lists.txt for 3 rounds and output to matchups.txt:
    python cli/generate_matchups.py --mode all --rounds 3

Generate matchups for a single fixed model against all other models:
    python cli/generate_matchups.py --mode single --model my_fixed_model --rounds 3
"""

import argparse
import itertools
import sys

def read_models(filename):
    """Reads models from a file, ignoring blank lines."""
    try:
        with open(filename, 'r') as f:
            models = [line.strip() for line in f if line.strip()]
        return models
    except Exception as e:
        print(f"Error reading file {filename}: {e}")
        sys.exit(1)

def generate_all_combinations(models, rounds):
    """
    Generates all unique matchup combinations from the list of models.
    Each matchup is repeated 'rounds' times.
    """
    matchups = []
    # itertools.combinations returns unique pairs (order doesn't matter).
    for model_a, model_b in itertools.combinations(models, 2):
        for _ in range(rounds):
            matchups.append(f"{model_a} {model_b}")
    return matchups

def generate_single_matchups(fixed_model, models, rounds):
    """
    Generates matchups where the fixed_model battles every other model in the list.
    Each matchup is repeated 'rounds' times.
    """
    matchups = []
    for model in models:
        if model == fixed_model:
            continue  # Skip the fixed model if it appears in the list.
        for _ in range(rounds):
            matchups.append(f"{fixed_model} {model}")
    return matchups

def main():
    parser = argparse.ArgumentParser(
        description="Generate model battle selection matchups for the LLM Snake Arena."
    )
    parser.add_argument(
        '--mode',
        choices=['all', 'single'],
        default='all',
        help="Mode to generate matchups. 'all' for all combinations; 'single' for a fixed model vs all others."
    )
    parser.add_argument(
        '--model',
        type=str,
        help="Fixed model name (required for 'single' mode)."
    )
    parser.add_argument(
        '--rounds',
        type=int,
        default=1,
        help="Number of rounds to generate for each matchup combination (default: 1)."
    )
    parser.add_argument(
        '--input',
        type=str,
        default='model_lists/models_all.txt',
        help="Input file containing the list of models (default: model_lists.txt)."
    )
    parser.add_argument(
        '--output',
        type=str,
        default='model_lists/matchups.txt',  # Updated default path
        help="Output file to write matchups (default: model_lists/matchups.txt)."
    )

    args = parser.parse_args()

    # Update output path after args are parsed if no explicit output was provided
    if args.output == 'model_lists/matchups.txt' and args.mode == 'single':
        args.output = f'model_lists/{args.model}_matchups.txt'

    models = read_models(args.input)
    if not models:
        print("No models found in the input file.")
        sys.exit(1)

    if args.mode == 'single':
        if not args.model:
            print("Error: --model argument must be specified in 'single' mode.")
            sys.exit(1)
        if args.model not in models:
            print(f"Warning: Fixed model '{args.model}' not found in the input list. It will still be used as the fixed model.")
        matchups = generate_single_matchups(args.model, models, args.rounds)
    else:
        matchups = generate_all_combinations(models, args.rounds)

    try:
        with open(args.output, 'w') as f:
            for matchup in matchups:
                f.write(matchup + "\n")
        print(f"Matchups generated and written to {args.output}")
    except Exception as e:
        print(f"Error writing to output file {args.output}: {e}")
        sys.exit(1)

if __name__ == '__main__':
    main()

================
File: backend/.env.local
================
OPENAI_API_KEY=
ANTHROPIC_API_KEY=

================
File: backend/.gitignore
================
# Byte-compiled / optimized / DLL files
__pycache__/
*.py[cod]
*$py.class

# C extensions
*.so

# Distribution / packaging
.Python
build/
develop-eggs/
dist/
downloads/
eggs/
.eggs/
lib/
lib64/
parts/
sdist/
var/
wheels/
share/python-wheels/
*.egg-info/
.installed.cfg
*.egg
MANIFEST

# PyInstaller
#  Usually these files are written by a python script from a template
#  before PyInstaller builds the exe, so as to inject date/other infos into it.
*.manifest
*.spec

# Installer logs
pip-log.txt
pip-delete-this-directory.txt

# Unit test / coverage reports
htmlcov/
.tox/
.nox/
.coverage
.coverage.*
.cache
nosetests.xml
coverage.xml
*.cover
*.py,cover
.hypothesis/
.pytest_cache/
cover/

# Translations
*.mo
*.pot

# Django stuff:
*.log
local_settings.py
db.sqlite3
db.sqlite3-journal

# Flask stuff:
instance/
.webassets-cache

# Scrapy stuff:
.scrapy

# Sphinx documentation
docs/_build/

# PyBuilder
.pybuilder/
target/

# Jupyter Notebook
.ipynb_checkpoints

# IPython
profile_default/
ipython_config.py

# pyenv
#   For a library or package, you might want to ignore these files since the code is
#   intended to run in multiple environments; otherwise, check them in:
# .python-version

# pipenv
#   According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control.
#   However, in case of collaboration, if having platform-specific dependencies or dependencies
#   having no cross-platform support, pipenv may install dependencies that don't work, or not
#   install all needed dependencies.
#Pipfile.lock

# UV
#   Similar to Pipfile.lock, it is generally recommended to include uv.lock in version control.
#   This is especially recommended for binary packages to ensure reproducibility, and is more
#   commonly ignored for libraries.
#uv.lock

# poetry
#   Similar to Pipfile.lock, it is generally recommended to include poetry.lock in version control.
#   This is especially recommended for binary packages to ensure reproducibility, and is more
#   commonly ignored for libraries.
#   https://python-poetry.org/docs/basic-usage/#commit-your-poetrylock-file-to-version-control
#poetry.lock

# pdm
#   Similar to Pipfile.lock, it is generally recommended to include pdm.lock in version control.
#pdm.lock
#   pdm stores project-wide configurations in .pdm.toml, but it is recommended to not include it
#   in version control.
#   https://pdm.fming.dev/latest/usage/project/#working-with-version-control
.pdm.toml
.pdm-python
.pdm-build/

# PEP 582; used by e.g. github.com/David-OConnor/pyflow and github.com/pdm-project/pdm
__pypackages__/

# Celery stuff
celerybeat-schedule
celerybeat.pid

# SageMath parsed files
*.sage.py

# Environments
.env
.venv
env/
venv/
ENV/
env.bak/
venv.bak/

# Spyder project settings
.spyderproject
.spyproject

# Rope project settings
.ropeproject

# mkdocs documentation
/site

# mypy
.mypy_cache/
.dmypy.json
dmypy.json

# Pyre type checker
.pyre/

# pytype static type analyzer
.pytype/

# Cython debug symbols
cython_debug/

# PyCharm
#  JetBrains specific template is maintained in a separate JetBrains.gitignore that can
#  be found at https://github.com/github/gitignore/blob/main/Global/JetBrains.gitignore
#  and can be added to the global gitignore or merged into this file.  For a more nuclear
#  option (not recommended) you can uncomment the following to ignore the entire idea folder.
#.idea/

# Ruff stuff:
.ruff_cache/

# PyPI configuration file
.pypirc

.DS_Store

================
File: backend/app.py
================
import os
import json
import random
import logging
from flask import Flask, jsonify, request
from dotenv import load_dotenv

load_dotenv()

app = Flask(__name__)
logging.basicConfig(level=logging.INFO)

# Endpoint to mimic GET requests for a list of games.
# Mimics functionality in frontend/src/app/api/games/route.ts
@app.route("/api/games", methods=["GET"])
def get_games():
    try:
        print("Getting games")
        # Get the number of games to return from query parameters, default to 10
        limit = request.args.get("limit", default=10, type=int)
        sort_by = request.args.get("sort_by", default="start_time", type=str)

        # Load the game index
        game_index_path = os.path.join(os.getcwd(), "completed_games", "game_index.json")
        with open(game_index_path, "r", encoding="utf-8") as f:
            game_index = json.load(f)

        # Sort the index based on the sort_by parameter
        if sort_by == "start_time":
            sorted_index = sorted(game_index, key=lambda x: x["start_time"], reverse=True)
        elif sort_by == "total_score":
            sorted_index = sorted(game_index, key=lambda x: x["total_score"], reverse=True)
        elif sort_by == "actual_rounds":
            sorted_index = sorted(game_index, key=lambda x: x["actual_rounds"], reverse=True)
        else:
            # For random order, just take random sample directly from index
            selected_games_index = random.sample(game_index, min(limit, len(game_index)))
            sorted_index = None

        # For sorted queries, take only the top N records we need
        if sorted_index is not None:
            selected_games_index = sorted_index[:min(limit, len(sorted_index))]

        # Only load the specific games we need
        valid_games = []
        games_dir = os.path.join(os.getcwd(), "completed_games")
        for record in selected_games_index:
            file_path = os.path.join(games_dir, record["filename"])
            try:
                with open(file_path, "r", encoding="utf-8") as f:
                    game_data = json.load(f)
                    valid_games.append(game_data)
            except Exception as e:
                logging.error(f"Error reading or parsing file {file_path}: {e}")
                continue

        print(f"Returning {len(valid_games)} games")
        return jsonify({"games": valid_games})
    
    except Exception as error:
        logging.error(f"Error reading game index or files: {error}")
        return jsonify({"error": "Failed to load game list"}), 500


# Endpoint to mimic the stats API.
# Mimics functionality in frontend/src/app/api/stats/route.ts
@app.route("/api/stats", methods=["GET"])
def get_stats():
    # Get the query parameters: simple for summary stats,
    # model for full stats for a single model
    simple = request.args.get("simple", default=False, type=bool)
    model = request.args.get("model", default=None, type=str)

    if simple:
        # This branch returns the simple version
        stats_path = os.path.join(os.getcwd(), "completed_games", "stats_simple.json")
        try:
            with open(stats_path, "r", encoding="utf-8") as f:
                stats_data = json.load(f)
        except Exception as e:
            logging.error(f"Error loading simple stats data: {e}")
            stats_data = {}
        return jsonify({
            "totalGames": 0,  # You could update this if available in stats_data
            "aggregatedData": stats_data
        })

    # For full stats, we require a model parameter.
    if model is None:
        return jsonify({"error": "Please provide a model parameter for full stats."}), 400

    stats_path = os.path.join(os.getcwd(), "completed_games", "stats.json")
    try:
        with open(stats_path, "r", encoding="utf-8") as f:
            stats_data = json.load(f)
    except Exception as e:
        logging.error(f"Error loading full stats data: {e}")
        return jsonify({"error": "Failed to load stats data."}), 500

    model_stats = stats_data.get(model)
    if model_stats is None:
        return jsonify({"error": f"Stats for model '{model}' not found."}), 404

    # Since the full stats already include wins/losses, simply return the model's stats.
    total_games = model_stats.get("wins", 0) + model_stats.get("losses", 0) + model_stats.get("ties", 0)
    return jsonify({
        "totalGames": total_games,
        "aggregatedData": {model: model_stats}
    })


# Endpoint to get details for a single game by id.
# Mimics functionality in frontend/src/app/api/games/[gameId]/route.ts
@app.route("/api/matches/<match_id>", methods=["GET"])
def get_game_by_id(match_id):
    try:
        # Construct the file path using the game_id.
        match_filename = f"snake_game_{match_id}.json"
        match_file_path = os.path.join(os.getcwd(), "completed_games", match_filename)

        with open(match_file_path, "r", encoding="utf-8") as f:
            match_data = json.load(f)
        
        return jsonify(match_data)
    
    except Exception as error:
        logging.error(f"Error reading match data for match id {match_id}: {error}")
        return jsonify({"error": "Failed to load match data"}), 500

if __name__ == "__main__":
    # Run the Flask app in debug mode.
    app.run(debug=os.getenv("FLASK_DEBUG"))

================
File: backend/backend.railway.json
================
{
    "$schema": "https://railway.app/railway.schema.json",
    "build": {
      "builder": "NIXPACKS",
      "buildCommand": "pip3 install -r requirements.txt",
      "watchPatterns": [
        "backend/*"
      ]
    },
    "deploy": {
      "startCommand": "gunicorn app:app",
      "restartPolicyType": "ON_FAILURE",
      "restartPolicyMaxRetries": 3
    }
}

================
File: backend/elo_tracker.py
================
#!/usr/bin/env python3
import os
import json
import glob
from datetime import datetime
import argparse
import math

# Elo parameters
K = 32
INITIAL_RATING = 1500

# Define a ranking for game result strings.
RESULT_RANK = {"won": 2, "tied": 1, "lost": 0}

def get_pair_result(result_i, result_j):
    """
    Given the result strings (e.g., "won", "lost", "tie") for two players,
    return a tuple (S_i, S_j) representing the head-to-head score:
      - S = 1 means win, 0 means loss, 0.5 means tie.
    If both players have the same result (e.g., both "won"), treat it as a tie.
    """
    rank_i = RESULT_RANK.get(result_i, 1)
    rank_j = RESULT_RANK.get(result_j, 1)
    if rank_i > rank_j:
        return 1, 0
    elif rank_i < rank_j:
        return 0, 1
    else:
        return 0.5, 0.5

def expected_score(rating_i, rating_j):
    """Compute the expected score for player i vs. player j."""
    return 1 / (1 + 10 ** ((rating_j - rating_i) / 400))

def process_game(game_data, ratings):
    """
    Process one game and update the 'ratings' dictionary (for Elo).
    Returns updated ratings.
    """
    metadata = game_data.get("metadata", {})
    models = metadata.get("models", {})          # {player_id: model_name}
    game_result = metadata.get("game_result", {})  # {player_id: "won"/"lost"/"tie"}
    player_ids = list(models.keys())
    n = len(player_ids)
    
    # Ensure all models exist in our ratings dictionary
    for pid in player_ids:
        model = models[pid]
        if model not in ratings:
            ratings[model] = INITIAL_RATING

    # For each model (player) in this game, accumulate actual/expected scores
    score_sum = { models[pid]: 0 for pid in player_ids }
    expected_sum = { models[pid]: 0 for pid in player_ids }
    
    # Loop over all unordered pairs of players
    for i in range(n):
        for j in range(i+1, n):
            pid_i = player_ids[i]
            pid_j = player_ids[j]
            model_i = models[pid_i]
            model_j = models[pid_j]
            res_i = game_result.get(pid_i, "tie")
            res_j = game_result.get(pid_j, "tie")
            
            # Determine the head-to-head result
            S_i, S_j = get_pair_result(res_i, res_j)
            
            # Compute expected scores from the current ratings
            R_i = ratings[model_i]
            R_j = ratings[model_j]
            E_i = expected_score(R_i, R_j)
            E_j = expected_score(R_j, R_i)
            
            # Accumulate results
            score_sum[model_i] += S_i
            score_sum[model_j] += S_j
            expected_sum[model_i] += E_i
            expected_sum[model_j] += E_j

    # Update each player's rating
    for pid in player_ids:
        model = models[pid]
        delta = (K / (n - 1)) * (score_sum[model] - expected_sum[model]) if (n > 1) else 0
        ratings[model] += delta

    return ratings

### ADDED FOR STATS ###
def update_model_stats(game_data, stats, ratings):
    """
    Updates stats for each model after one game:
      - Increments wins/losses/ties
      - Adds to total apples eaten
      - Syncs the Elo rating from 'ratings'
      - Appends a game history record with details including:
          game_id, my_score, opponent_score, opponent_model, result,
          and, if applicable, death_info.
    """
    metadata = game_data.get("metadata", {})
    game_id = metadata.get("game_id")
    models = metadata.get("models", {})          # {player_id: model_name}
    game_result = metadata.get("game_result", {})  # {player_id: "won"/"lost"/"tie"}
    final_scores = metadata.get("final_scores", {}) # {player_id: score}
    death_info = metadata.get("death_info", {})    # {player_id: death info dictionary}
    
    # For each player in the game...
    for pid, model_name in models.items():
        # Ensure this model is in stats
        if model_name not in stats:
            stats[model_name] = {
                "wins": 0,
                "losses": 0,
                "ties": 0,
                "apples_eaten": 0,
                "elo": INITIAL_RATING,
                "games": []  # New field for game history tracking
            }
        
        # Update W/L/T counts
        result = game_result.get(pid, "tie")
        if result == "won":
            stats[model_name]["wins"] += 1
        elif result == "lost":
            stats[model_name]["losses"] += 1
        else:
            stats[model_name]["ties"] += 1
        
        # Update apples eaten
        apples = final_scores.get(pid, 0)
        stats[model_name]["apples_eaten"] += apples
        
        # Update current Elo rating
        stats[model_name]["elo"] = ratings[model_name]
        
        # Determine opponent's score and opponent's model.
        if len(models) == 2:
            opponent_pid = [other for other in models if other != pid][0]
            opponent_score = final_scores.get(opponent_pid, 0)
            opponent_model = models.get(opponent_pid)
        else:
            opponent_score = None
            opponent_model = None
        
        # Build game history record for this model
        game_record = {
            "game_id": game_id,
            "my_score": final_scores.get(pid, 0),
            "opponent_score": opponent_score,
            "opponent_model": opponent_model,
            "opponent_elo": ratings.get(opponent_model, INITIAL_RATING),
            "result": result,
            "start_time": metadata.get("start_time"),
            "end_time": metadata.get("end_time")
        }
        
        # Include death_info if this model died in this game.
        if pid in death_info:
            game_record["death_info"] = death_info[pid]
        
        # Append the record to the model's game history list.
        stats[model_name]["games"].append(game_record)

def summarize_game_results(models, game_result):
    """
    Summarizes both the overall game result and the pairwise matchups.
    Returns a tuple of strings for (overall_summary, matchup_summary)
    """
    # Sort by rank (won>tie>lost) just for display
    results = []
    for pid, model in models.items():
        result = game_result.get(pid, "tie")
        rank = RESULT_RANK.get(result, 1)
        results.append((rank, result, model))
    
    results.sort(reverse=True)
    overall = "Overall result:\n"
    for _, result, model in results:
        overall += f"  {model}: {result}\n"
    
    # Pairwise
    matchups = "Pairwise matchups:\n"
    player_ids = list(models.keys())
    for i in range(len(player_ids)):
        for j in range(i+1, len(player_ids)):
            pid_i = player_ids[i]
            pid_j = player_ids[j]
            model_i = models[pid_i]
            model_j = models[pid_j]
            res_i = game_result.get(pid_i, "tie")
            res_j = game_result.get(pid_j, "tie")
            score_i, score_j = get_pair_result(res_i, res_j)
            if score_i == 0.5:
                result_str = "ties"
            elif score_i == 1:
                result_str = "wins against"
            else:
                result_str = "loses to"
            matchups += f"  {model_i} {result_str} {model_j}\n"
    
    return overall, matchups

def main():
    parser = argparse.ArgumentParser(
        description="Calculate Elo ratings and gather stats from a folder of game result JSON files."
    )
    parser.add_argument("folder", help="Path to folder containing game result JSON files.")
    parser.add_argument("--output", required=True, help="Path to output folder for stats.json")
    args = parser.parse_args()

    # Find all JSON files
    files = [f for f in glob.glob(os.path.join(args.folder, "*.json")) if not f.endswith("game_index.json")]
    games = []

    for filename in files:
        try:
            with open(filename, "r") as f:
                data = json.load(f)
                # We sort by end_time so we process in chronological order
                end_time_str = data.get("metadata", {}).get("end_time")
                if end_time_str:
                    end_time = datetime.fromisoformat(end_time_str)
                else:
                    end_time = datetime.min
                games.append((end_time, data))
        except Exception as e:
            print(f"Error reading {filename}: {e}")

    # Sort the games by their end_time
    games.sort(key=lambda tup: tup[0])

    # Elo ratings dict: model -> rating
    ratings = {}
    # Stats dict: model -> {"wins", "losses", "ties", "apples_eaten", "elo"}
    stats = {}

    # print("Initial Elo ratings:")
    # print(f"  (New models start at {INITIAL_RATING})")
    # print("-" * 40)
    # print("\nProcessing games in chronological order...\n")

    for end_time, game_data in games:
        metadata = game_data.get("metadata", {})
        models = metadata.get("models", {})
        game_result = metadata.get("game_result", {})

        overall_summary, matchup_summary = summarize_game_results(models, game_result)
        # print(overall_summary)
        # print(matchup_summary)
        
        # Update ratings
        ratings = process_game(game_data, ratings)

        # Update stats (wins, losses, ties, apples, Elo)
        update_model_stats(game_data, stats, ratings)

    print("Updated Elo ratings:")
    for model, rating in sorted(ratings.items(), key=lambda x: x[1], reverse=True):
        print(f"  {model}: {rating:.2f}")
    print("-" * 40)

    ### ADDED FOR STATS: SAVE stats.json ###
    # Write out stats aggregated across all games
    output_path = os.path.join(args.output, "stats.json")
    with open(output_path, "w") as f:
        json.dump(stats, f, indent=2)

    print(f"\nAggregated stats saved to {output_path}")

    # Additionally, write out a version of stats that excludes game history.
    # This mirrors stats.json but without the "games" list for each model.
    model_stats = { 
        model: {k: v for k, v in data.items() if k != "games"} 
        for model, data in stats.items() 
    }
    
    # Add first and last game timestamps and top score for each model
    for model, data in stats.items():
        if "games" in data and data["games"]:
            # Sort games by start_time to ensure correct ordering
            sorted_games = sorted(data["games"], key=lambda g: g.get("start_time", ""))
            
            # Get first and last game timestamps
            first_game = sorted_games[0].get("start_time", "")
            last_game = sorted_games[-1].get("start_time", "")
            
            # Find the highest score across all games
            top_score = max([game.get("my_score", 0) for game in data["games"]])
            
            # Add to model_stats
            model_stats[model]["first_game_time"] = first_game
            model_stats[model]["last_game_time"] = last_game
            model_stats[model]["top_score"] = top_score
    
    simple_output_path = os.path.join(args.output, "stats_simple.json")
    with open(simple_output_path, "w") as f:
        json.dump(model_stats, f, indent=2)

    print(f"\nModel-only stats saved to {simple_output_path}")

    ### NEW FUNCTIONALITY: BUILD AND SAVE A GAME INDEX ###
    # Build a lightweight index for game metadata to speed up future queries.
    game_index = []
    for end_time, game_data in games:
        metadata = game_data.get("metadata", {})
        game_id = metadata.get("game_id")
        if not game_id:
            continue
        # Use known keys; here we compute total_score from final_scores.
        final_scores = metadata.get("final_scores", {})
        total_score = sum(final_scores.values()) if final_scores else 0
        start_time = metadata.get("start_time", "")
        actual_rounds = metadata.get("actual_rounds", 0)

        # Construct the filename from the game_id using your naming convention.
        filename = f"snake_game_{game_id}.json"
        game_index.append({
            "game_id": game_id,
            "filename": filename,
            "start_time": start_time,
            "total_score": total_score,
            "actual_rounds": actual_rounds
        })

    # Save the game index into the same folder as the game files.
    index_path = os.path.join(args.folder, "game_index.json")
    with open(index_path, "w") as f:
        json.dump(game_index, f, indent=2)
    
    print(f"\nGame index saved to {index_path}")

if __name__ == "__main__":
    main()

================
File: backend/llm_providers.py
================
import os
from openai import OpenAI
import anthropic
import google.generativeai as genai  # Add this import
from together import Together
from ollama import chat
from ollama import ChatResponse

class LLMProviderInterface:
    """
    A common interface for LLM calls.
    """
    def get_response(self, model: str, prompt: str) -> str:
        raise NotImplementedError("Subclasses should implement this method.")


class OpenAIProvider(LLMProviderInterface):
    def __init__(self, api_key: str):
        self.client = OpenAI(api_key=api_key)
        
    def get_response(self, model: str, prompt: str) -> str:
        response = self.client.chat.completions.create(
            model=model,
            messages=[{"role": "user", "content": prompt}],
            max_completion_tokens=4096,
        )
        return response.choices[0].message.content.strip()


class AnthropicProvider(LLMProviderInterface):
    def __init__(self, api_key: str):
        self.client = anthropic.Anthropic(api_key=api_key)
    
    def get_response(self, model: str, prompt: str) -> str:
        # According to Anthropic docs, this is one way to call the API.
        response = self.client.messages.create(
            model=model,
            max_tokens=4096,
            messages=[{"role": "user", "content": prompt}],
        )
        return response.content[0].text.strip()
    
class GeminiProvider(LLMProviderInterface):
    def __init__(self, api_key: str):
        genai.configure(api_key=api_key)
        
    def get_response(self, model: str, prompt: str) -> str:
        model = genai.GenerativeModel(model)
        response = model.generate_content(
            contents=prompt,
            generation_config={
                "max_output_tokens": 4096,
            },
            stream=False
        )
        return response.text.strip()
    

class TogetherProvider(LLMProviderInterface):
    def __init__(self, api_key: str):
        self.client = Together(api_key=api_key)

    def get_response(self, model: str, prompt: str) -> str:
        response = self.client.chat.completions.create(
            model=model,
            messages=[{"role": "user", "content": prompt}],
            max_tokens=20000,
        )
        return response.choices[0].message.content.strip()

class OllamaProvider(LLMProviderInterface):
    def __init__(self, url: str = "http://localhost:11434"):
        self.url = url

    def get_response(self, model: str, prompt: str) -> str:
        model = model[len("ollama-"):] if model.lower().startswith("ollama-") else model
        response: ChatResponse = chat(model=model, messages=[
        {
            'role': 'user',
            'content': prompt,
        },
        ])
        return response.message.content.strip()

def create_llm_provider(model: str) -> LLMProviderInterface:
    """
    Factory function for creating an LLM provider instance.
    If any substring in the openai_substrings list is found in the model name (case-insensitive),
    returns an instance of OpenAIProvider.
    If any substring in the anthropic_substrings list is found, returns an instance of AnthropicProvider.
    Otherwise, raises a ValueError.
    """
    model_lower = model.lower()
    openai_substrings = ["gpt-", "o1-", "o3-"]
    anthropic_substrings = ["claude"]
    gemini_substrings = ["gemini"]
    together_substrings = ["meta-llama", "deepseek", "Gryphe", "microsoft", "mistralai", "NousResearch", "nvidia", "Qwen", "upstage"]
    ollama_substrings = ["ollama-"]

    if any(substr.lower() in model_lower for substr in openai_substrings):
        if not os.getenv("OPENAI_API_KEY"):
            raise ValueError("OPENAI_API_KEY is not set in the environment variables.")
        return OpenAIProvider(api_key=os.getenv("OPENAI_API_KEY"))
    elif any(substr.lower() in model_lower for substr in anthropic_substrings):
        if not os.getenv("ANTHROPIC_API_KEY"):
            raise ValueError("ANTHROPIC_API_KEY is not set in the environment variables.")
        return AnthropicProvider(api_key=os.getenv("ANTHROPIC_API_KEY"))
    elif any(substr.lower() in model_lower for substr in gemini_substrings):
        if not os.getenv("GOOGLE_API_KEY"):
            raise ValueError("GOOGLE_API_KEY is not set in the environment variables.")
        return GeminiProvider(api_key=os.getenv("GOOGLE_API_KEY"))
    elif any(substr.lower() in model_lower for substr in ollama_substrings):
        return OllamaProvider(url=os.getenv("OLLAMA_URL", "http://localhost:11434"))
    elif any(substr.lower() in model_lower for substr in together_substrings):
        if not os.getenv("TOGETHERAI_API_KEY"):
            raise ValueError("TOGETHERAI_API_KEY is not set in the environment variables.")
        return TogetherProvider(api_key=os.getenv("TOGETHERAI_API_KEY"))
    else:
        raise ValueError(f"Unsupported model: {model}")

================
File: backend/main.py
================
import random
from collections import deque
from typing import List, Tuple, Dict, Set, Optional
import time
from datetime import datetime
import os
from dotenv import load_dotenv
from openai import OpenAI
import json
import uuid
import argparse
from llm_providers import create_llm_provider
from concurrent.futures import ThreadPoolExecutor, as_completed

load_dotenv()

# Directions
UP = "UP"
DOWN = "DOWN"
LEFT = "LEFT"
RIGHT = "RIGHT"
VALID_MOVES = {UP, DOWN, LEFT, RIGHT}


class Snake:
    """
    Represents a snake on the board.
    positions: deque of (x, y) from head at index 0 to tail at the end
    alive: whether this snake is still alive
    """
    def __init__(self, positions: List[Tuple[int, int]]):
        self.positions = deque(positions)
        self.alive = True
        self.death_reason = None   # e.g., 'wall', 'self', 'collision'
        self.death_round = None    # The round number when the snake died

    @property
    def head(self) -> Tuple[int, int]:
        return self.positions[0]


class GameState:
    """
    A snapshot of the game at a specific point in time:
      - round_number: which round we are in (0-based)
      - snake_positions: dict of snake_id -> list of (x, y)
      - alive: dict of snake_id -> bool
      - scores: dict of snake_id -> int
      - width, height: board dimensions
      - apples: list of (x, y) positions of all apples on the board
      - move_history: list of dicts (one per round), each mapping snake_id -> move
    """
    def __init__(self,
                 round_number: int,
                 snake_positions: Dict[str, List[Tuple[int, int]]],
                 alive: Dict[str, bool],
                 scores: Dict[str, int],
                 width: int,
                 height: int,
                 apples: List[Tuple[int, int]],
                 move_history: List[Dict[str, str]]):
        self.round_number = round_number
        self.snake_positions = snake_positions
        self.alive = alive
        self.scores = scores
        self.width = width
        self.height = height
        self.apples = apples
        self.move_history = move_history

    def print_board(self) -> str:
        """
        Returns a string representation of the board with:
        . = empty space
        A = apple
        T = snake tail
        1,2,3... = snake head (showing player number)
        Now with (0,0) at bottom left and x-axis labels at bottom
        """
        # Create empty board
        board = [['.' for _ in range(self.width)] for _ in range(self.height)]
        
        # Place apples
        for ax, ay in self.apples:
            board[ay][ax] = 'A'
            
        # Place snakes
        for i, (snake_id, positions) in enumerate(self.snake_positions.items(), start=1):
            if not self.alive[snake_id]:
                continue
            
            # Place snake body
            for pos_idx, (x, y) in enumerate(positions):
                if pos_idx == 0:  # Head
                    board[y][x] = str(i)  # Use snake number (1, 2, 3...) for head
                else:  # Body/tail
                    board[y][x] = 'T'
        
        # Build the string representation
        result = []
        # Print rows in reverse order (bottom to top)
        for y in range(self.height - 1, -1, -1):
            result.append(f"{y:2d} {' '.join(board[y])}")
        
        # Add x-axis labels at the bottom
        result.append("   " + " ".join(str(i) for i in range(self.width)))
        
        return "\n".join(result)

    def __repr__(self):
        return (
            f"<GameState round={self.round_number}, apples={self.apples}, "
            f"snakes={len(self.snake_positions)}, scores={self.scores}>"
        )

class Player:
    """
    Base class/interface for player logic.
    Each player is responsible for returning a move for its snake_id 
    given the current game state.
    """
    def __init__(self, snake_id: str):
        self.snake_id = snake_id

    def get_move(self, game_state: GameState) -> str:
        raise NotImplementedError


class RandomPlayer(Player):
    """
    Example: a random AI that picks a valid direction that avoids walls and self-collisions.
    """
    def get_move(self, game_state: GameState) -> str:
        snake_positions = game_state.snake_positions[self.snake_id]
        head_x, head_y = snake_positions[0]
        
        # Calculate all possible next positions
        possible_moves = {
            UP:    (head_x, head_y + 1),  # Up => y + 1
            DOWN:  (head_x, head_y - 1),  # Down => y - 1
            LEFT:  (head_x - 1, head_y),
            RIGHT: (head_x + 1, head_y)
        }
        
        # Filter out moves that:
        # 1. Hit walls
        # 2. Hit own body (except tail, which will move)
        valid_moves = []
        for move, (new_x, new_y) in possible_moves.items():
            # Check wall collisions
            if (new_x < 0 or new_x >= game_state.width or 
                new_y < 0 or new_y >= game_state.height):
                continue
                
            # Check self collisions (excluding tail which will move)
            if (new_x, new_y) in snake_positions[:-1]:
                continue
                
            valid_moves.append(move)
        
        # If no valid moves, just return a random move (we'll die anyway)
        if not valid_moves:
            return random.choice(list(VALID_MOVES))
            
        return random.choice(valid_moves)


class LLMPlayer(Player):
    """
    LLM-based player that delegates the API call details to the provider abstraction.
    """
    def __init__(self, snake_id: str, model: str = "gpt-4o-mini"):
        super().__init__(snake_id)
        self.model = model
        self.move_history = []
        # Instantiate the correct provider based on the model name.
        self.provider = create_llm_provider(model)

    def get_direction_from_response(self, response: str) -> Optional[str]:
        # Convert response to uppercase for case-insensitive comparison.
        response = response.upper()
        # Starting from the end, find the last occurrence of any valid move.
        for i in range(len(response) - 1, -1, -1):
            for move in VALID_MOVES:
                if response[i:].startswith(move):
                    return move.upper()
        return None

    def get_move(self, game_state: GameState) -> str:
        """
        Construct the prompt, call the generic provider, and then parse the response.
        """
        prompt = self._construct_prompt(game_state)

        # Use the abstracted provider to get the response.
        response_text = self.provider.get_response(self.model, prompt)
        direction = self.get_direction_from_response(response_text)

        if direction is None:
            print(f"Player {self.snake_id} returned an invalid direction. Choosing a random move.")
            direction = random.choice(list(VALID_MOVES))
            response_text += f"\n\nThis is a random move: {direction}"

        move_data = {
            "direction": direction,
            "rationale": response_text
        }

        self.move_history.append({self.snake_id: move_data})
        return move_data

    def _construct_prompt(self, game_state: GameState) -> str:
        # Summarize the multiple apples
        apples_str = ", ".join(str(a) for a in game_state.apples)
        prompt = (
            f"You are controlling a snake in a multi-apple Snake game. "
            f"The board size is {game_state.width}x{game_state.height}. Normal X,Y coordinates are used. Coordinates range from (0,0) at bottom left to ({game_state.width-1},{game_state.height-1}) at top right.\n"
            f"Apples at: {apples_str}\n\n"
            f"Your snake ID: {self.snake_id} which is currently positioned at {game_state.snake_positions[self.snake_id][0]} with body at {game_state.snake_positions[self.snake_id][1:]}\n\n"
            f"Enemy snakes positions:\n" + 
            "\n".join([f"* Snake #{sid} is at position {pos[0]} with body at {pos[1:]}" for sid, pos in game_state.snake_positions.items() if sid != self.snake_id]) + "\n\n"
            f"Board state:\n"
            f"{game_state.print_board()}\n\n"
            f"--Your last move information:--\n\n"
            f"Direction: {self.move_history[-1][self.snake_id]['direction'] if self.move_history else 'None'}\n"
            f"Rationale: {self.move_history[-1][self.snake_id]['rationale'] if self.move_history else 'None'}\n\n"
            f"--End of your last move information.--\n\n"
            "Rules:\n"
            "1) If you move onto an apple, you grow and gain 1 point.\n"
            "2) If you run into a wall (outside the range of the listed coordinates), another snake, or yourself (like go backwards), you die.\n"
            "3) The goal is to have the most points by the end.\n\n"
            "Decreasing your x coordinate is to the left, increasing your x coordinate is to the right.\n"
            "Decreasing your y coordinate is down, increasing your y coordinate is up.\n"
            "You may think out loud first then respond with the direction.\n"
            "You may also state a strategy you want to tell yourself next turn.\n"
            "End your response with your decided next move: UP, DOWN, LEFT, or RIGHT.\n"
        )
        print(f"----------Prompt:\n\n {prompt}\n\n------------")
        return prompt

class SnakeGame:
    """
    Manages:
      - Board (width, height)
      - Snakes
      - Players
      - Multiple apples
      - Scores
      - Rounds
      - History for replay
    """
    def __init__(self, width: int, height: int, max_rounds: int = 20, num_apples: int = 3, game_id: str = None):
        self.width = width
        self.height = height
        self.snakes: Dict[str, Snake] = {}
        self.players: Dict[str, Player] = {}
        self.scores: Dict[str, int] = {}
        self.round_number = 0
        self.max_rounds = max_rounds
        self.game_over = False
        self.start_time = time.time()
        self.game_result = None 

        if game_id is None:
            self.game_id = str(uuid.uuid4())
        else:
            self.game_id = game_id
        print(f"Game ID: {self.game_id}")

        # Store how many apples we want to keep on the board at all times
        self.num_apples = num_apples
        
        # We store multiple apples as a set of (x, y) or a list.
        # Here, let's keep them as a list to preserve GameState JSON-friendliness.
        self.apples: List[Tuple[int,int]] = []

        # For replay or for the LLM context
        self.move_history: List[Dict[str, str]] = []
        self.history: List[GameState] = []

        # Place initial apples
        for _ in range(self.num_apples):
            cell = self._random_free_cell()
            self.apples.append(cell)

    def add_snake(self, snake_id: str, player: Player):
        if snake_id in self.snakes:
            raise ValueError(f"Snake with id {snake_id} already exists.")
        
        positions = self._random_free_cell()

        self.snakes[snake_id] = Snake([positions])
        self.players[snake_id] = player
        self.scores[snake_id] = 0
        print(f"Added snake '{snake_id}' ({player.model if hasattr(player, 'model') else player.__class__.__name__}) at {positions}.")

    def set_apples(self, apple_positions: List[Tuple[int,int]]):
        """
        Initialize the board with multiple apples at specified positions.
        If you want random generation, you can do that here.
        """
        for (ax, ay) in apple_positions:
            if not (0 <= ax < self.width and 0 <= ay < self.height):
                raise ValueError(f"Apple out of bounds at {(ax, ay)}.")
        self.apples = list(apple_positions)
        print(f"Set {len(self.apples)} apples on the board: {self.apples}")

    def _random_free_cell(self) -> Tuple[int,int]:
        """
        Return a random cell (x, y) not occupied by any snake or apple.
        We'll do a simple loop to find one. 
        """
        while True:
            x = random.randint(0, self.width - 1)
            y = random.randint(0, self.height - 1)
            # Check if occupied by a snake
            occupied_by_snake = any((x, y) in snake.positions for snake in self.snakes.values())
            # Check if there's already an apple here
            occupied_by_apple = (x, y) in self.apples

            if not occupied_by_snake and not occupied_by_apple:
                return (x, y)
    
    def get_current_state(self) -> GameState:
        """
        Return a snapshot of the current board as a GameState.
        """
        snake_positions = {}
        alive_dict = {}
        for sid, snake in self.snakes.items():
            snake_positions[sid] = list(snake.positions)
            alive_dict[sid] = snake.alive

        return GameState(
            round_number=self.round_number,
            snake_positions=snake_positions,
            alive=alive_dict,
            scores=self.scores.copy(),
            width=self.width,
            height=self.height,
            apples=self.apples.copy(),
            move_history=list(self.move_history)
        )

    def gather_moves_in_parallel(self, game):
        """
        Gathers each snake's move in parallel using threads.
        game: the SnakeGame instance
        Returns a dictionary: { snake_id: { "move": ..., "rationale": ... }, ... }
        """
        round_moves = {}
        # Take one snapshot of the state to pass to each player
        state_snapshot = game.get_current_state()
        
        # We'll limit max_workers to the number of alive snakes (or just len of all snakes).
        # If you have many snakes, you can set a higher or lower limit based on preference.
        alive_snakes = [sid for sid, s in game.snakes.items() if s.alive]

        with ThreadPoolExecutor(max_workers=len(alive_snakes)) as executor:
            # Schedule all get_move calls
            futures = {}
            for snake_id in alive_snakes:
                player = game.players[snake_id]
                futures[executor.submit(player.get_move, state_snapshot)] = snake_id
            
            # Collect results as they complete
            for future in as_completed(futures):
                snake_id = futures[future]
                move_data = future.result()  # This is the dict returned by LLMPlayer.get_move
                round_moves[snake_id] = {
                    "move": move_data["direction"],
                    "rationale": move_data["rationale"]
                }
                print(f"Player {snake_id} chose move: {move_data['direction']}")

        return round_moves

    def run_round(self):
        """
        Execute one round:
          1) If game is over, do nothing
          2) Ask each alive snake for their move
          3) Apply moves simultaneously
          4) Handle apple-eating (grow + score)
          5) Check collisions
          6) Possibly end game if round limit reached or 1 snake left, etc.
        """
        if self.game_over:
            print("Game is already over. No more rounds.")
            return
        
        self.print_board()

        # --- PARALLEL GATHER OF MOVES ---
        round_moves = self.gather_moves_in_parallel(self)
        # Store the moves of this round
        self.move_history.append(round_moves)

        self.record_history()

        # The rest of your original code remains the same ...
        # 2) Compute new heads
        new_heads: Dict[str, Optional[Tuple[int,int]]] = {}
        for sid, move_data in round_moves.items():
            snake = self.snakes[sid]
            if not snake.alive or move_data is None:
                new_heads[sid] = None
                continue

            move = move_data["move"]
            hx, hy = snake.head
            if move == UP:
                hy += 1
            elif move == DOWN:
                hy -= 1
            elif move == LEFT:
                hx -= 1
            elif move == RIGHT:
                hx += 1
            new_heads[sid] = (hx, hy)

        # 3) Check collisions: walls, bodies (including tails), and head-to-head collisions.
        # First, build a dictionary for head-to-head collisions.
        cell_counts: Dict[Tuple[int,int], List[str]] = {}
        for sid, head_pos in new_heads.items():
            if head_pos is not None:
                cell_counts.setdefault(head_pos, []).append(sid)

        # Check wall collisions and collisions with any snake body (including tails).
        # Here, we use the current board state (i.e. each snake’s full positions list) as the source of occupied cells.
        for sid, head_pos in new_heads.items():
            snake = self.snakes[sid]
            if not snake.alive or head_pos is None:
                continue

            x, y = head_pos
            # 3a. Wall collision:
            if x < 0 or x >= self.width or y < 0 or y >= self.height:
                snake.alive = False
                snake.death_reason = 'wall'
                snake.death_round = self.round_number
                continue

            # 3b. Collision with any snake's body, including tails.
            # (Note: We do not exclude any part of the body now.)
            for other_id, other_snake in self.snakes.items():
                # If the new head lands on any occupied cell from the current state, it’s a collision.
                if head_pos in other_snake.positions:
                    snake.alive = False
                    snake.death_reason = 'body_collision'
                    snake.death_round = self.round_number
                    break  # No need to check further.

        # 3c. Head-to-head collisions: if two or more snake heads land on the same cell.
        for sid, head_pos in new_heads.items():
            snake = self.snakes[sid]
            if not snake.alive or head_pos is None:
                continue

            if len(cell_counts[head_pos]) > 1:
                snake.alive = False
                snake.death_reason = 'head_collision'
                snake.death_round = self.round_number

        # 3d) Figure out how many died this round and decide the outcome immediately
        snakes_died_this_round = [
            sid for sid, s in self.snakes.items()
            if not s.alive and s.death_round == self.round_number
        ]

        if len(snakes_died_this_round) > 0:
            # Example if you have exactly two snakes total:
            if len(snakes_died_this_round) == 1 and len(self.snakes) == 2:
                # Exactly one of the two snakes died => the other wins immediately
                surviving_snakes = [sid for sid, s in self.snakes.items() if s.alive]
                self.game_over = True
                self.game_result = {sid: "lost" for sid in self.snakes}
                for sid in surviving_snakes:
                    self.game_result[sid] = "won"

                print(f"Game Over: Snake(s) {snakes_died_this_round} died. "
                    f"Survivor(s) {surviving_snakes} win(s).")
                self.round_number += 1
                self.record_history()
                return

            elif len(snakes_died_this_round) >= 2 and len(self.snakes) == 2:
                # Both died simultaneously => tie
                self.game_over = True
                self.game_result = {sid: "tied" for sid in self.snakes}
                print("Game Over: Both snakes died this round. It's a tie!")
                self.round_number += 1
                self.record_history()
                return

            # If you have more than 2 snakes, you can generalize:
            # e.g. if len(snakes_died_this_round) == len(self.snakes), then all died => tie
            # if len(snakes_died_this_round) == len(self.snakes) - 1 => one snake left => that snake wins
            # etc.

        # 4) Move snakes & handle apple eating/growth
        for sid, snake in self.snakes.items():
            if snake.alive and new_heads[sid] is not None:
                head_pos = new_heads[sid]
                # If the head is on any apple, grow + score
                if head_pos in self.apples:
                    snake.positions.appendleft(head_pos)
                    self.scores[sid] += 1
                    # Remove that apple from the list
                    self.apples.remove(head_pos)
                    # Spawn a new apple so we always have `num_apples`
                    new_apple = self._random_free_cell()
                    self.apples.append(new_apple)
                else:
                    # Normal move: add new head, pop tail
                    snake.positions.appendleft(head_pos)
                    snake.positions.pop()

        # 5) End round, record state, check round limit
        # self.record_history()
        self.round_number += 1

        if self.round_number >= self.max_rounds:
            self.end_game("Reached max rounds.")
        else:
            alive_snakes = [s_id for s_id in self.snakes if self.snakes[s_id].alive]
            if len(alive_snakes) <= 1:
                self.end_game("All but one snake are dead.")

        print(f"Finished round {self.round_number}. Alive: {alive_snakes}, Scores: {self.scores}")
        time.sleep(.3)

    def serialize_history(self, history):
        """
        Convert the list of GameState objects to a JSON-serializable list of dicts.
        """
        output = []
        for state in history:
            # Build a dictionary representation
            state_dict = {
                "round_number": state.round_number,
                "snake_positions": {
                    sid: positions  # positions is already a list of (x, y)
                    for sid, positions in state.snake_positions.items()
                },
                "alive": state.alive,         # dict of snake_id -> bool
                "scores": state.scores,       # dict of snake_id -> int
                "width": state.width,
                "height": state.height,
                "apples": state.apples,       # list of (x, y)
                "move_history": state.move_history
            }
            # Note: If any data is in tuples, it's okay because JSON
            # can store them as lists. But Python's json library will 
            # automatically convert (x, y) to [x, y].
            output.append(state_dict)
        return output
    
    def clean_model_name(self, model_name: str) -> str:
        # Check if the model name contains a provider prefix (e.g., "mistral/")
        if '/' in model_name:
            # Return everything after the last '/'
            return model_name.split('/')[-1]
        # If no provider prefix, return the original name
        return model_name


    def save_history_to_json(self, filename=None):
        if filename is None:
            filename = f"snake_game_{self.game_id}.json"

        model_names = {
            sid: self.clean_model_name(player.model if hasattr(player, "model") else player.__class__.__name__)
            for sid, player in self.players.items()
        }
        
        # Build metadata for the game
        metadata = {
            "game_id": self.game_id,
            "start_time": datetime.fromtimestamp(self.start_time).isoformat(),
            "end_time": datetime.fromtimestamp(time.time()).isoformat(),
            "models": model_names,
            "game_result": self.game_result,
            "final_scores": self.scores,
            "death_info": {
                sid: {
                    "reason": snake.death_reason,
                    "round": snake.death_round
            }
            for sid, snake in self.snakes.items()
            if not snake.alive  # you could record info for dead snakes only
        },
            "max_rounds": self.max_rounds,
            "actual_rounds": self.round_number
        }
        
        data = {
            "metadata": metadata,
            "rounds": self.serialize_history(self.history)
        }
        
        # Ensure the output directory exists
        os.makedirs('completed_games', exist_ok=True)
        
        with open(f'completed_games/{filename}', "w") as f:
            json.dump(data, f, indent=2)
    
    def print_board(self):
        """
        Prints a visual representation of the current board state.
        """
        print("\n" + self.get_current_state().print_board() + "\n")

    def end_game(self, reason: str):
        self.game_over = True
        print(f"Game Over: {reason}")
        # Decide winner by highest score
        top_score = max(self.scores.values()) if self.scores else 0
        winners = [sid for sid, sc in self.scores.items() if sc == top_score]
        
        # Record the game result per snake
        self.game_result = {}
        for sid in self.scores:
            if sid in winners:
                self.game_result[sid] = "tied" if len(winners) > 1 else "won"
            else:
                self.game_result[sid] = "lost"
        
        if len(winners) == 1:
            print(f"The winner is {winners[0]} with score {top_score}.")
        else:
            print(f"Tie! Winners: {winners} with score {top_score}.")

    def record_history(self):
        state = self.get_current_state()
        self.history.append(state)


# -------------------------------
# Example Usage
# -------------------------------
def main():
    # Parse command line arguments for model ids for each snake
    parser = argparse.ArgumentParser(
        description="Run Snake Game with two distinctive LLM models as players."
    )
    parser.add_argument("--models", type=str, nargs='+', required=True,
                        help="2 or more model IDs for each snake (e.g. 'gpt-4o-mini-2024-07-18 llama3-8b-8192')")
    parser.add_argument("--width", type=int, required=False, default=10,
                        help="Width of the board from 0 to N")
    parser.add_argument("--height", type=int, required=False, default=10,
                        help="Height of the board from 0 to N")
    parser.add_argument("--max_rounds", type=int, required=False, default=100,
                        help="Maximum number of rounds")
    parser.add_argument("--num_apples", type=int, required=False, default=5,
                        help="Number of apples on the board")
                        

    args = parser.parse_args()

    if len(args.models) < 2:
        raise ValueError("At least two models must be provided.")

    # Create a game with a 5x5 board and 100 rounds (you can adjust these as needed)
    game = SnakeGame(width=args.width, height=args.height, max_rounds=args.max_rounds, num_apples=args.num_apples)

    # Add two snakes with LLM players using the specified models
    for i, model in enumerate(args.models, start=1):
        game.add_snake(
            snake_id=str(i),
            player=LLMPlayer(str(i), model=model)
        )

    # Run the game
    while not game.game_over:
        game.run_round()

    print("\nFinal Scores:", game.scores)
    print(f"Game history (ID: {game.game_id}):")

    game.save_history_to_json()

if __name__ == "__main__":
    main()

================
File: backend/requirements.txt
================
aiohappyeyeballs==2.4.6
aiohttp==3.11.12
aiosignal==1.3.2
annotated-types==0.7.0
anthropic==0.45.2
anyio==4.8.0
attrs==25.1.0
blinker==1.9.0
cachetools==5.5.1
certifi==2025.1.31
charset-normalizer==3.4.1
click==8.1.8
contourpy==1.3.1
cycler==0.12.1
decorator==4.4.2
distro==1.9.0
eval_type_backport==0.2.2
filelock==3.17.0
Flask==3.1.0
fonttools==4.55.8
frozenlist==1.5.0
google-ai-generativelanguage==0.6.15
google-api-core==2.24.1
google-api-python-client==2.161.0
google-auth==2.38.0
google-auth-httplib2==0.2.0
google-genai==1.2.0
google-generativeai==0.8.4
googleapis-common-protos==1.67.0
grpcio==1.70.0
grpcio-status==1.70.0
gunicorn==23.0.0
h11==0.14.0
httpcore==1.0.7
httplib2==0.22.0
httpx==0.28.1
idna==3.10
imageio==2.37.0
imageio-ffmpeg==0.6.0
itsdangerous==2.2.0
Jinja2==3.1.5
jiter==0.8.2
kiwisolver==1.4.8
markdown-it-py==3.0.0
MarkupSafe==3.0.2
matplotlib==3.10.0
mdurl==0.1.2
moviepy==1.0.3
multidict==6.1.0
numpy==2.2.2
ollama==0.4.7
openai==1.61.0
packaging==24.2
pillow==11.1.0
proglog==0.1.10
propcache==0.2.1
proto-plus==1.26.0
protobuf==5.29.3
pyarrow==19.0.0
pyasn1==0.6.1
pyasn1_modules==0.4.1
pydantic==2.10.6
pydantic_core==2.27.2
Pygments==2.19.1
pyparsing==3.2.1
python-dateutil==2.9.0.post0
python-dotenv==1.0.1
requests==2.32.3
rich==13.9.4
rsa==4.9
shellingham==1.5.4
six==1.17.0
sniffio==1.3.1
tabulate==0.9.0
together==1.4.1
tqdm==4.67.1
typer==0.15.1
typing_extensions==4.12.2
uritemplate==4.1.1
urllib3==2.3.0
websockets==14.2
Werkzeug==3.1.3
yarl==1.18.3

================
File: backend/video.py
================
import json
import numpy as np
import matplotlib.pyplot as plt
from moviepy.editor import ImageSequenceClip
import os
# Replace this with the JSON string you have, or read from file if you prefer

def draw_frame(round_data, metadata, frame_index):
    """
    Draw a single frame showing the board with:
      - Grid
      - Apples
      - Snake positions (in different colors)
      - Labels for snakes by their model names
      - Title showing the round number (and possibly state info)
    Returns a NumPy array (RGB) suitable for making a video frame.
    """
    width = round_data["width"]
    height = round_data["height"]
    snake_positions = round_data["snake_positions"]
    apples = round_data["apples"]
    alive_info = round_data["alive"]
    
    # Model names (for labeling)
    snake1_name = metadata["models"]["1"]
    snake2_name = metadata["models"]["2"]
    
    # Decide on colors: if a snake is dead, color it gray
    snake1_color = 'red' if alive_info.get("1", False) else 'gray'
    snake2_color = 'blue' if alive_info.get("2", False) else 'gray'
    
    # Create a figure
    fig, ax = plt.subplots(figsize=(6, 6))
    ax.set_xlim(-0.5, width - 0.5)
    ax.set_ylim(-0.5, height - 0.5)
    ax.set_aspect("equal")
    ax.set_xticks(range(width))
    ax.set_yticks(range(height))
    
    # Plot apples (green circles)
    for (x, y) in apples:
        ax.scatter(x, y, c='green', s=100, marker='o', edgecolors='black')
    
    # Plot snake 1
    if "1" in snake_positions:
        for (x, y) in snake_positions["1"]:
            ax.scatter(x, y, c=snake1_color, s=200, marker='s', edgecolors='black')
        # Label near its head (0th segment)
        if snake_positions["1"]:
            head_x, head_y = snake_positions["1"][0]
            ax.text(head_x + 0.2, head_y, snake1_name, color=snake1_color, fontsize=9, ha='left', va='center')
    
    # Plot snake 2
    if "2" in snake_positions:
        for (x, y) in snake_positions["2"]:
            ax.scatter(x, y, c=snake2_color, s=200, marker='s', edgecolors='black')
        # Label near its head (0th segment)
        if snake_positions["2"]:
            head_x, head_y = snake_positions["2"][0]
            ax.text(head_x + 0.2, head_y, snake2_name, color=snake2_color, fontsize=9, ha='left', va='center')
    
    # Set a title
    round_number = round_data["round_number"]
    ax.set_title(f"Round {round_number} — Frame {frame_index}\nGame ID: {metadata['game_id']}")
    
    # Render the figure, then convert from ARGB to RGB
    fig.canvas.draw()
    dpi = fig.get_dpi()
    width_px = int(fig.get_figwidth() * dpi)
    height_px = int(fig.get_figheight() * dpi)
    
    argb_buffer = fig.canvas.tostring_argb()
    argb_array = np.frombuffer(argb_buffer, dtype='uint8').reshape(height_px, width_px, 4)
    frame_image = argb_array[..., 1:]  # Discards the alpha channel
    
    plt.close(fig)
    return frame_image


def main():
    """
    Main function for looping through all JSON game files in completed_games/.
    Creates a video for each JSON game if it doesn't already exist in videos/.
    The video filename will be the same as the JSON filename with .mp4 extension.
    """
    json_dir = "completed_games"
    video_dir = "videos"

    # Ensure the output directory exists
    os.makedirs(video_dir, exist_ok=True)

    # Loop through every .json file in the completed_games directory
    for json_file in os.listdir(json_dir):
        if not json_file.endswith(".json"):
            continue

        base_name = os.path.splitext(json_file)[0]
        video_filename = base_name + ".mp4"
        video_path = os.path.join(video_dir, video_filename)

        # Skip if video already exists
        if os.path.exists(video_path):
            print(f"Skipping {video_filename} as it already exists.")
            continue

        json_path = os.path.join(json_dir, json_file)
        print(f"Processing {json_path}...")

        # Load the game JSON data
        with open(json_path, "r") as f:
            game_data = json.load(f)

        metadata = game_data["metadata"]
        rounds = game_data["rounds"]

        frames = []
        for i, round_data in enumerate(rounds):
            frame = draw_frame(round_data, metadata, i)
            frames.append(frame)

        # Create a video at 1 frame per second from these frames
        clip = ImageSequenceClip(frames, fps=1)
        clip.write_videofile(video_path, codec="libx264")
        print(f"Video saved to {video_path}\n")

if __name__ == "__main__":
    main()

================
File: frontend/public/file.svg
================
<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>

================
File: frontend/public/globe.svg
================
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>

================
File: frontend/public/next.svg
================
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

================
File: frontend/public/vercel.svg
================
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>

================
File: frontend/public/window.svg
================
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>

================
File: frontend/src/app/about/page.tsx
================
export const runtime = 'nodejs';

export default function AboutPage() {
  return (
    <div className="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
      <div className="font-mono max-w-[800px] mx-auto text-sm">
        <section className="mb-10">
          <h1 className="text-2xl font-bold mb-6">Findings & Reflections</h1>
          
          <div className="mb-8">
            <h2 className="text-lg font-bold mb-3">Key Observations</h2>
            <ul className="space-y-4">
              <li>• LLMs often misinterpreted the board layout provided in text format. This led to cases where models incorrectly believed where their snake&apos;s head was or caused the snake to run into their own tail.</li>
              <li>• Lower-tier models (including GPT-3.5 Turbo and Haiku) struggled significantly, while GPT-4, Gemini 2.0, and o3-mini showed a baseline performance that allowed for an interesting game.</li>
              <li>• Context is key, you need to load the LLM up with a lot of information for it to make a good choice. Board position, apple location, other snakes position, etc.</li>
            </ul>
          </div>

          <div className="border-t border-gray-200 pt-8 mb-8">
            <h2 className="text-lg font-bold mb-3">Methodology</h2>
            <ul className="space-y-4">
              <li>• The board was provided in a textual format. This required the prompt to be explicit about the XY coordinate system. Without a true 2D representation, spatial reasoning was often lost in translation.</li>
              <li>• Each LLM took turns simultaneously. The turn-based mechanics highlighted internal chain-of-thought processes. I saved the model responses for analysis.</li>
            </ul>
          </div>

          <div className="border-t border-gray-200 pt-8 mb-8">
            <h2 className="text-lg font-bold mb-3">Analysis</h2>
            <ul className="space-y-4">
              <li>• The text-based board representation proved challenging for LLMs. Since the board is treated as tokens rather than a true 2D map, models often misjudged positions and made erroneous moves, such as running into walls or colliding with themselves.</li>
              <li>• While one idea was to restrict models to only legal moves to prevent such errors, doing so might narrow their strategic playing field, effectively handicapping their natural decision-making.</li>
            </ul>
          </div>

          <div className="border-t border-gray-200 pt-8 mb-8">
            <h2 className="text-lg font-bold mb-3">Future Work</h2>
            <ul className="space-y-4">
              <li>• With better models, use bigger board sizes.</li>
              <li>• Add more snakes, more apples, and add walls to the game.</li>
            </ul>
          </div>

          <div className="border-t border-gray-200 pt-8 mb-8">
            <h2 className="text-lg font-bold mb-3">Other Notes</h2>
            <ul className="space-y-4">
              <li>• Google models experienced unexpected rate limits despite being on a paid tier, resulting in fewer results and prompting a deeper dive into GCP settings.</li>
            </ul>
          </div>

          <div className="border-t border-gray-200 pt-8 mb-8">
            <h2 className="text-lg font-bold mb-3">Prompt Example</h2>
            <div className="bg-gray-50 p-4 rounded-md overflow-auto">
              <pre className="whitespace-pre-wrap break-words text-sm">
                {`You are controlling a snake in a multi-apple Snake game.The board size is 10x10. Normal X,Y coordinates are used. Coordinates range from (0,0) at bottom left to (9,9) at top right.

Apples at: (9, 6), (0, 2), (5, 9), (1, 7), (9, 7)

Your snake ID: 1 which is currently positioned at (5, 1)

Enemy snakes positions:
* Snake #2 is at position (7, 1) with body at []

Board state:

9 . . . . . A . . . .
8 . . . . . . . . . .
7 . A . . . . . . . A
6 . . . . . . . . . A
5 . . . . . . . . . .
4 . . . . . . . . . .
3 . . . . . . . . . .
2 A . . . . . . . . .
1 . . . . . 1 . 2 . .
0 . . . . . . . . . .
  0 1 2 3 4 5 6 7 8 9

--Your last move information:--

Direction: LEFT

Rationale: I'm noticing that (0,2) is the closest apple from our head at (6,1) (it's 7 steps away by Manhattan distance), and it's away from the enemy snake at (7,0). Right now our immediate options are:

• UP → goes to (6,2)
• RIGHT → goes to (7,1) (closer to the enemy snake's territory)
• LEFT → goes to (5,1)
• DOWN → goes to (6,0)

Moving RIGHT or DOWN brings us closer to the enemy snake at (7,0) or even out of safe bounds. Moving UP would work, but LEFT starts guiding us toward (0,2). Thus, I decide to move LEFT.

Strategy for future turns: I'll aim to continue left and then maneuver upward to reach the apple at (0,2) while remaining mindful of potential enemy moves.

My decided next move: LEFT.

--End of your last move information.--

Rules:
1) If you move onto an apple, you grow and gain 1 point.
    
2) If you run into a wall (outside the range of the listed coordinates), another snake, or yourself (like go backwards), you die.

3) The goal is to have the most points by the end.

Decreasing your x coordinate is to the left, increasing your x coordinate is to the right.

Decreasing your y coordinate is down, increasing your y coordinate is up.

You may think out loud first then respond with the direction.

You may also state a strategy you want to tell yourself next turn.

End your response with your decided next move: UP, DOWN, LEFT, or RIGHT.`}
              </pre>
            </div>
          </div>
        </section>
      </div>
    </div>
  );
}

================
File: frontend/src/app/match/[id]/page.tsx
================
import { notFound } from 'next/navigation'
import MatchInfo from '@/components/match/MatchInfo'
import GameViewer from '@/components/match/GameViewer'

// Use the same type definitions as in GameViewer.tsx
type Position = [number, number];

interface MoveHistory {
  [modelId: string]: {
    move: string;
    rationale: string;
  };
}

interface RoundData {
  round_number: number;
  move_history?: MoveHistory[];
  snake_positions: {
    [modelId: string]: Position[];
  };
  alive: {
    [modelId: string]: boolean;
  };
  scores: {
    [modelId: string]: number;
  };
  apples: Position[];
  width: number;
  height: number;
}

interface GameMetadata {
  game_id: string;
  start_time: string;
  end_time: string;
  models: Record<string, string>;
  game_result: Record<string, string>;
  final_scores: Record<string, number>;
  death_info: Record<string, { reason: string, round?: number }>;
  max_rounds: number;
  actual_rounds: number;
}

interface GameData {
  rounds: RoundData[];
  metadata: GameMetadata;
}

interface PageProps {
  params: Promise<{
    id: string;
  }>;
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
}

export default async function MatchPage(props: PageProps) {
  const params = await props.params;
  const { id } = params;

  const gamesResponse = await fetch(`${process.env.FLASK_URL}/api/matches/${id}`, { next: { revalidate: 300 } }); // revalidate every 5 minutes

  // If not found or error
  if (!gamesResponse.ok) {
    notFound();
  }

  // Parse the JSON
  const gameData: GameData = await gamesResponse.json();

  // Format date for display
  const startTime = new Date(gameData.metadata.start_time);
  const formattedDate = startTime.toLocaleDateString('en-US', {
    month: 'long',
    day: 'numeric',
    year: 'numeric',
  });
  const formattedTime = startTime.toLocaleTimeString('en-US', {
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
  });

  // Get model names for display
  const modelIds = Object.keys(gameData.metadata.models);
  const modelNames = modelIds.map(id => gameData.metadata.models[id]);

  return (
    <div className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
      <div className="px-4 py-6 sm:px-0">
        <MatchInfo 
          modelNames={modelNames}
          date={formattedDate}
          time={formattedTime}
        />
        
        <GameViewer 
          gameData={gameData}
          modelIds={modelIds}
          modelNames={modelNames}
        />
      </div>
    </div>
  )
}

================
File: frontend/src/app/models/[id]/page.tsx
================
import Link from 'next/link';

interface Game {
  game_id: string;
  my_score: number;
  opponent_score: number;
  opponent_model: string;
  start_time: string;
  opponent_elo: number;
  end_time: string;
  result: string;
  death_info?: {
    reason: string;
    round: number;
  };
}

interface ModelStats {
  wins: number;
  losses: number;
  ties: number;
  apples_eaten: number;
  elo: number;
  games: Game[];
}

export default async function ModelDetailsPage({ params }: { params: Promise<{ id: string }> }) {
  // Await the params object
  const { id: modelId } = await params;
  
  // Fetch the full stats
  const response = await fetch(`${process.env.FLASK_URL}/api/stats?model=${modelId}`, { next: { revalidate: 300 } });
  const stats = await response.json();

  // Use the awaited modelId
  const modelStats: ModelStats = stats['aggregatedData'][modelId];

  if (!modelStats) {
    return (
      <div className="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
        <div className="text-center">
          <h1 className="text-3xl font-extrabold text-gray-900 sm:text-4xl">
            Model Not Found
          </h1>
          <p className="mt-3 max-w-2xl mx-auto text-xl text-gray-500 sm:mt-4">
            Model &quot;{modelId}&quot; could not be found in our database.
          </p>
          <div className="mt-5">
            <Link href="/" className="text-indigo-600 hover:text-indigo-500">
              Return to home page
            </Link>
          </div>
        </div>
      </div>
    );
  }

  const games = [...(modelStats.games || [])].sort((a, b) => (b.opponent_elo || 0) - (a.opponent_elo || 0));
  
  // Calculate win rate percentage
  const totalGames = modelStats.wins + modelStats.losses + modelStats.ties;
  const winRate = totalGames > 0 ? ((modelStats.wins / totalGames) * 100).toFixed(1) : "0.0";

  return (
    <div className="bg-white">
      {/* Model Header Section */}
      <div className="bg-gray-50 py-12">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center">
            <h1 className="text-3xl font-extrabold text-gray-900 sm:text-4xl">
              {modelId}
            </h1>
            <p className="mt-3 max-w-2xl mx-auto text-xl text-gray-500 sm:mt-4">
              Performance statistics and match history
            </p>
          </div>
        </div>
      </div>

      {/* Model Stats Section */}
      <div className="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
          <div className="bg-white overflow-hidden shadow rounded-lg">
            <div className="px-4 py-5 sm:p-6">
              <dt className="text-sm font-medium text-gray-500 truncate">
                Total Matches
              </dt>
              <dd className="mt-1 text-3xl font-semibold text-gray-900">
                {totalGames}
              </dd>
            </div>
          </div>
          
          <div className="bg-white overflow-hidden shadow rounded-lg">
            <div className="px-4 py-5 sm:p-6">
              <dt className="text-sm font-medium text-gray-500 truncate">
                Win Rate
              </dt>
              <dd className="mt-1 text-3xl font-semibold text-gray-900">
                {winRate}%
              </dd>
            </div>
          </div>
          
          <div className="bg-white overflow-hidden shadow rounded-lg">
            <div className="px-4 py-5 sm:p-6">
              <dt className="text-sm font-medium text-gray-500 truncate">
                ELO Rating
              </dt>
              <dd className="mt-1 text-3xl font-semibold text-gray-900">
                {Math.round(modelStats.elo).toLocaleString()}
              </dd>
            </div>
          </div>
          
          <div className="bg-white overflow-hidden shadow rounded-lg">
            <div className="px-4 py-5 sm:p-6">
              <dt className="text-sm font-medium text-gray-500 truncate">
                Apples Eaten
              </dt>
              <dd className="mt-1 text-3xl font-semibold text-gray-900">
                {modelStats.apples_eaten}
              </dd>
            </div>
          </div>
        </div>
      </div>

      {/* Match History Section */}
      <div className="max-w-7xl mx-auto pb-12 px-4 sm:px-6 lg:px-8">
        <h2 className="text-2xl font-bold text-gray-900 mb-6">Match History</h2>
        <div className="flex flex-col">
          <div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
            <div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
              <div className="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
                <table className="min-w-full divide-y divide-gray-200">
                  <thead className="bg-gray-50">
                    <tr>
                      <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Opponent
                      </th>
                      <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Start Time
                      </th>
                      <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Duration
                      </th>
                      <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Outcome
                      </th>
                      <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Loss Reason
                      </th>
                      <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Score
                      </th>
                      <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Actions
                      </th>
                    </tr>
                  </thead>
                  <tbody className="bg-white divide-y divide-gray-200">
                    {games.map((game, index) => {
                      // For a lost game, show the loss reason (if available)
                      const lossReason = game.result === "lost" && game.death_info ? game.death_info.reason : "";
                      
                      // Format the date
                      const formattedDate = new Date(game.start_time).toLocaleString('en-US', {
                        year: 'numeric',
                        month: '2-digit', 
                        day: '2-digit',
                        hour: 'numeric',
                        minute: '2-digit',
                        hour12: true
                      }).replace(',','');
                      
                      // Calculate duration
                      const start = new Date(game.start_time);
                      const end = new Date(game.end_time);
                      const diffMs = end.getTime() - start.getTime();
                      const minutes = Math.floor(diffMs / 60000);
                      const seconds = Math.floor((diffMs % 60000) / 1000);
                      const duration = `${minutes}min ${seconds}sec`;
                      
                      // Determine outcome styling
                      let outcomeClass = "";
                      if (game.result === "won") {
                        outcomeClass = "bg-green-100 text-green-800";
                      } else if (game.result === "lost") {
                        outcomeClass = "bg-red-100 text-red-800";
                      } else {
                        outcomeClass = "bg-gray-100 text-gray-800";
                      }
                      
                      return (
                        <tr key={game.game_id || index}>
                          <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                            <Link href={`/models/${game.opponent_model}`} className="text-indigo-600 hover:text-indigo-900">
                              {game.opponent_model}
                            </Link>
                          </td>
                          <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            {formattedDate}
                          </td>
                          <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            {duration}
                          </td>
                          <td className="px-6 py-4 whitespace-nowrap">
                            <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${outcomeClass}`}>
                              {game.result.charAt(0).toUpperCase() + game.result.slice(1)}
                            </span>
                          </td>
                          <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            {lossReason}
                          </td>
                          <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            {game.my_score} - {game.opponent_score}
                          </td>
                          <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
                            <Link href={`/match/${game.game_id}`} className="text-indigo-600 hover:text-indigo-900">
                              View Match
                            </Link>
                          </td>
                        </tr>
                      );
                    })}
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <div className="max-w-7xl mx-auto pb-12 px-4 sm:px-6 lg:px-8">
        <p className="text-center text-sm text-gray-500">
          Last updated: {new Date().toLocaleString()}
        </p>
      </div>
    </div>
  );
}

================
File: frontend/src/app/error.tsx
================
'use client';

import { useEffect } from 'react';

export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  useEffect(() => {
    console.error(error);
  }, [error]);

  return (
    <div style={{ fontFamily: "monospace", maxWidth: "800px", margin: "0 auto", padding: "20px" }}>
      <h2>Something went wrong!</h2>
      <button
        onClick={() => reset()}
        style={{
          padding: "8px 16px",
          backgroundColor: "#f0f0f0",
          border: "1px solid #ddd",
          borderRadius: "4px",
          cursor: "pointer"
        }}
      >
        Try again
      </button>
    </div>
  );
}

================
File: frontend/src/app/globals.css
================
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;
    --primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;
    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;
    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 0 0% 3.9%;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;
    --card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 0 0% 9%;
    --secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;
    --accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 0 0% 83.1%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
  }

  * {
    @apply border-[hsl(var(--border))];
  }
  
  body {
    @apply bg-background text-foreground;
  }
}



@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}

================
File: frontend/src/app/layout.tsx
================
import { ReactNode } from 'react'
import Navbar from "@/components/layout/Navbar"
import Footer from "@/components/layout/Footer"
import './globals.css'
import { PostHogProvider } from "./providers";
import { Press_Start_2P } from "next/font/google"

// Initialize the Press Start 2P font
const pressStart2P = Press_Start_2P({
  subsets: ["latin"],
  weight: "400",
  variable: "--font-press-start-2p",
})

export const metadata = {
  title: 'Snake AI Arena',
  description: 'Watch AI models compete in Snake battles',
}

export default function RootLayout({
  children,
}: {
  children: ReactNode
}) {
  return (
    <html lang="en">
      <body className={`${pressStart2P.variable} font-sans min-h-screen flex flex-col bg-gray-50`}>
        <PostHogProvider>
          <Navbar />
          <main className="flex-1">
            {children}
          </main>
          <Footer />
        </PostHogProvider>
      </body>
    </html>
  )
}

================
File: frontend/src/app/page.tsx
================
import HeroSection from "@/components/home/HeroSection";
import StatsSection from "@/components/home/StatsSection";
import LeaderboardSection from "@/components/home/LeaderboardSection";

export default function LandingPage() {
  return (
    <>
      <HeroSection />
      
      <div className="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
        <StatsSection />
        <LeaderboardSection />
      </div>
    </>
  );
}

================
File: frontend/src/app/PostHogPageView.tsx
================
'use client'

import { usePathname, useSearchParams } from "next/navigation"
import { useEffect, Suspense } from "react"
import { usePostHog } from 'posthog-js/react'

function PostHogPageView() : null {
  const pathname = usePathname()
  const searchParams = useSearchParams()
  const posthog = usePostHog()

  // Track pageviews
  useEffect(() => {
    if (pathname && posthog) {
      let url = window.origin + pathname
      if (searchParams.toString()) {
        url = url + `?${searchParams.toString()}`
      }

      posthog.capture('$pageview', { '$current_url': url })
    }
  }, [pathname, searchParams, posthog])
  
  return null
}

// Wrap this in Suspense to avoid the `useSearchParams` usage above
// from de-opting the whole app into client-side rendering
// See: https://nextjs.org/docs/messages/deopted-into-client-rendering
export default function SuspendedPostHogPageView() {
  return <Suspense fallback={null}>
    <PostHogPageView />
  </Suspense>
}

================
File: frontend/src/app/providers.tsx
================
'use client'

import posthog from 'posthog-js'
import { PostHogProvider as PHProvider } from 'posthog-js/react'
import { useEffect } from 'react'
import PostHogPageView from "./PostHogPageView"

export function PostHogProvider({ children }: { children: React.ReactNode }) {
    useEffect(() => {
      posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY || '', {
        api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST || '',
        capture_pageview: false // Disable automatic pageview capture, as we capture manually
      })
  }, [])

  return (
    <PHProvider client={posthog}>
      <PostHogPageView />
      {children}
    </PHProvider>
  )
}

================
File: frontend/src/components/home/HeroSection.tsx
================
"use client";

import Link from "next/link";
import { ArrowRight } from "lucide-react";
import { Button } from "@/components/ui/button";
import { useEffect, useRef } from "react";

export default function HeroSection() {
  const canvasRef = useRef<HTMLCanvasElement>(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;

    const ctx = canvas.getContext("2d");
    if (!ctx) return;

    // Set canvas dimensions to match parent container
    const resizeCanvas = () => {
      const container = canvas.parentElement;
      if (container) {
        canvas.width = container.offsetWidth;
        canvas.height = container.offsetHeight;
      }
    };

    resizeCanvas();
    window.addEventListener("resize", resizeCanvas);

    // Snake class
    class Snake {
      x: number;
      y: number;
      size: number;
      color: string;
      direction: number;
      speed: number;
      tail: { x: number; y: number }[];
      maxLength: number;

      constructor(x: number, y: number) {
        this.x = x;
        this.y = y;
        this.size = 12;
        this.color = ["#4ade80", "#60a5fa", "#f97316", "#8b5cf6", "#000000"][
          Math.floor(Math.random() * 5)
        ];
        this.direction = Math.floor(Math.random() * 4); // 0: right, 1: down, 2: left, 3: up
        this.speed = 1 + Math.random() * 1.5;
        this.tail = [{ x, y }];
        this.maxLength = 30 + Math.floor(Math.random() * 15);
      }

      update(canvasWidth: number, canvasHeight: number) {
        // Change direction randomly
        if (Math.random() < 0.02) {
          this.direction = Math.floor(Math.random() * 4);
        }

        // Move based on direction
        switch (this.direction) {
          case 0:
            this.x += this.speed;
            break; // right
          case 1:
            this.y += this.speed;
            break; // down
          case 2:
            this.x -= this.speed;
            break; // left
          case 3:
            this.y -= this.speed;
            break; // up
        }

        // Wrap around edges
        if (this.x < 0) this.x = canvasWidth;
        if (this.x > canvasWidth) this.x = 0;
        if (this.y < 0) this.y = canvasHeight;
        if (this.y > canvasHeight) this.y = 0;

        // Add current position to tail
        this.tail.push({ x: this.x, y: this.y });

        // Limit tail length
        if (this.tail.length > this.maxLength) {
          this.tail.shift();
        }
      }

      draw(ctx: CanvasRenderingContext2D) {
        // Draw tail segments
        for (let i = 0; i < this.tail.length; i++) {
          const segment = this.tail[i];
          const alpha = i / this.tail.length; // Fade out the tail
          ctx.fillStyle =
            this.color +
            Math.floor(alpha * 255)
              .toString(16)
              .padStart(2, "0");
          ctx.fillRect(segment.x, segment.y, this.size, this.size);
        }
      }
    }

    // Create snakes
    const snakes: Snake[] = [];
    const SNAKE_COUNT = 20; // Adjust this number up or down for more or fewer snakes
    
    for (let i = 0; i < SNAKE_COUNT; i++) {
      snakes.push(
        new Snake(Math.random() * canvas.width, Math.random() * canvas.height)
      );
    }

    // Animation loop
    const animate = () => {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      snakes.forEach((snake) => {
        snake.update(canvas.width, canvas.height);
        snake.draw(ctx);
      });

      requestAnimationFrame(animate);
    };

    animate();

    // Cleanup
    return () => {
      window.removeEventListener("resize", resizeCanvas);
    };
  }, []);

  return (
    <div className="bg-white border-b border-gray-200 relative overflow-hidden">
      <canvas
        ref={canvasRef}
        className="absolute top-0 left-0 w-full h-full pointer-events-none opacity-30"
      />
      <div className="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8 relative z-10">
        <div className="text-center">
          <h1 className="text-4xl font-press-start text-gray-900 sm:text-5xl sm:tracking-tight lg:text-6xl">
            LLMs Battle Snake
          </h1>
          <p className="mt-4 max-w-2xl mx-auto text-xl text-gray-500 font-mono">
            Watch AI models compete in real-time snake battles. Strategic
            thinking, path-finding, and decision-making on display.
          </p>
          <div className="mt-8 flex justify-center font-mono">
            <Button asChild className="font-mono">
              <Link href={`/match/${process.env.NEXT_PUBLIC_TOP_MATCH_ID}`}>
                Watch Top Match
                <ArrowRight className="ml-2 h-4 w-4" />
              </Link>
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
}

================
File: frontend/src/components/home/LeaderboardSection.tsx
================
type LeaderboardItem = {
  rank: number;
  model: string;
  wins: number;
  losses: number;
  winRate: number;
  elo: number;
  top_score: number;
};

type StatsData = {
  totalGames: number;
  aggregatedData: {
    [key: string]: {
      wins: number;
      losses: number;
      ties: number;
      apples_eaten: number;
      elo: number;
      first_game_time: string;
      last_game_time: string;
      top_score: number;
    };
  };
};

// Function to fetch and transform leaderboard data
async function getLeaderboardData(): Promise<LeaderboardItem[]> {
  try {
    const response = await fetch(`${process.env.FLASK_URL}/api/stats?simple=true`);
    
    if (!response.ok) {
      throw new Error('Failed to fetch leaderboard data');
    }
    
    const data: StatsData = await response.json();
    
    // Transform the API data into our leaderboard format
    const transformedData = Object.entries(data.aggregatedData)
      .map(([model, stats]) => ({
        model,
        wins: stats.wins,
        losses: stats.losses,
        top_score: stats.top_score,
        winRate: stats.wins + stats.losses > 0 
          ? Number(((stats.wins / (stats.wins + stats.losses)) * 100).toFixed(1)) 
          : 0,
        elo: stats.elo,
      }))
      .filter(item => item.wins + item.losses >= 20) // Only include models with at least 20 games
      .sort((a, b) => b.elo - a.elo) // Sort by ELO
      .map((item, index) => ({
        ...item,
        rank: index + 1,
      }))
      .slice(0, 25); // Take top 10
    
    return transformedData;
  } catch (err) {
    console.error('Error fetching leaderboard data:', err);
    return [];
  }
}

export default async function LeaderboardSection() {
  const leaderboardData = await getLeaderboardData();
  
  if (leaderboardData.length === 0) {
    return (
      <div className="bg-white shadow rounded-lg overflow-hidden p-6">
        <h2 className="text-lg font-press-start text-gray-900">Global Leaderboard</h2>
        <p className="mt-1 text-sm font-mono text-red-500">Failed to load leaderboard data</p>
      </div>
    );
  }

  return (
    <div className="bg-white shadow rounded-lg overflow-hidden">
      <div className="px-4 py-5 border-b border-gray-200 sm:px-6">
        <div className="flex items-center">
          <h2 className="text-lg font-press-start text-gray-900">Global Leaderboard</h2>
          <div className="flex items-center ml-3">
            <div className="relative mr-1">
              <div className="h-2 w-2 rounded-full bg-red-500 absolute animate-ping"></div>
              <div className="h-2 w-2 rounded-full bg-red-500 relative"></div>
            </div>
            <span className="text-xs font-mono uppercase tracking-wider text-red-500">LIVE</span>
          </div>
        </div>
        <p className="mt-1 text-sm font-mono text-gray-500">Updated in real-time based on match results</p>
      </div>
      <div className="px-4 sm:px-6 py-4">
        <div className="flex flex-col">
          <div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
            <div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
              <div className="overflow-hidden">
                <table className="min-w-full divide-y divide-gray-200">
                  <thead className="bg-gray-50">
                    <tr>
                      <th
                        scope="col"
                        className="px-6 py-3 text-left text-xs font-mono text-gray-500 uppercase tracking-wider"
                      >
                        Rank
                      </th>
                      <th
                        scope="col"
                        className="px-6 py-3 text-left text-xs font-mono text-gray-500 uppercase tracking-wider"
                      >
                        Model
                      </th>
                      <th
                        scope="col"
                        className="px-6 py-3 text-left text-xs font-mono text-gray-500 uppercase tracking-wider"
                      >
                        W/L
                      </th>
                      <th
                        scope="col"
                        className="px-6 py-3 text-left text-xs font-mono text-gray-500 uppercase tracking-wider"
                      >
                        Top Score
                      </th>
                      <th
                        scope="col"
                        className="px-6 py-3 text-left text-xs font-mono text-gray-500 uppercase tracking-wider"
                      >
                        Win Rate
                      </th>
                      <th
                        scope="col"
                        className="px-6 py-3 text-left text-xs font-mono text-gray-500 uppercase tracking-wider"
                      >
                        ELO
                      </th>
                    </tr>
                  </thead>
                  <tbody className="bg-white divide-y divide-gray-200">
                    {leaderboardData.map((item) => (
                      <tr key={item.model} className="hover:bg-gray-50">
                        <td className="px-6 py-4 whitespace-nowrap text-sm font-mono text-gray-900">
                          #{item.rank}
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <a href={`/models/${item.model}`} className="font-mono text-sm text-blue-600 hover:text-blue-800 hover:underline">
                            {item.model}
                          </a>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <div className="font-mono text-sm text-gray-900">
                            {item.wins}/{item.losses}
                          </div>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <div className="font-mono text-sm text-gray-900">{item.top_score}</div>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <div className="font-mono text-sm text-gray-900">{item.winRate}%</div>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <div className="font-mono text-sm text-gray-900">
                            {Math.round(item.elo)}
                          </div>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

================
File: frontend/src/components/home/StatsSection.tsx
================
// Import the type from LeaderboardSection or define it here
type StatsData = {
  totalGames: number;
  aggregatedData: {
    [key: string]: {
      wins: number;
      losses: number;
      ties: number;
      apples_eaten: number;
      elo: number;
      first_game_time: string;
      last_game_time: string;
      top_score: number;
    };
  };
};

async function getStats() {
  // Fetch the stats from the backend
  const response = await fetch(`${process.env.FLASK_URL}/api/stats?simple=true`, {
    cache: 'no-store' // Ensures fresh data on each request
  });
  
  if (!response.ok) {
    throw new Error('Failed to fetch stats');
  }
  
  const data = await response.json();
  return data;
}

export default async function StatsSection() {
  const stats = await getStats();
  
  // Check if stats has the expected structure
  const statsData = stats as StatsData;
  
  // Use totalGames from the API if available, otherwise calculate it
  const totalMatches = statsData.totalGames || Object.values(statsData.aggregatedData || {}).reduce((sum: number, model) => {
    const wins = Number(model.wins) || 0;
    const losses = Number(model.losses) || 0;
    const ties = Number(model.ties) || 0;
    return sum + wins + losses + ties;
  }, 0);
  
  // Count active models (models with at least one game)
  const activeModels = Object.keys(statsData.aggregatedData || {}).length;
  
  // Calculate maximum apples that were gained per game
  const maxApplesPerGame = totalMatches > 0 ? Math.max(...Object.values(statsData.aggregatedData || {}).map(model => Number(model.top_score || 0))) : 0;

  return (
    <>

      <div className="grid grid-cols-1 gap-5 sm:grid-cols-3 mb-12">
        <div className="bg-white overflow-hidden shadow rounded-lg">
          <div className="px-4 py-5 sm:p-6">
            <dt className="text-sm font-mono text-gray-500 truncate">Total Snake Matches</dt>
            <dd className="mt-1 text-3xl font-press-start text-gray-900">{totalMatches.toLocaleString()}</dd>
          </div>
        </div>
        <div className="bg-white overflow-hidden shadow rounded-lg">
          <div className="px-4 py-5 sm:p-6">
            <dt className="text-sm font-mono text-gray-500 truncate">Models Competing</dt>
            <dd className="mt-1 text-3xl font-press-start text-gray-900">{activeModels}</dd>
          </div>
        </div>
        <div className="bg-white overflow-hidden shadow rounded-lg">
          <div className="px-4 py-5 sm:p-6">
            <dt className="text-sm font-mono text-gray-500 truncate">Top Score</dt>
            <dd className="mt-1 text-3xl font-press-start text-gray-900">{maxApplesPerGame}</dd>
          </div>
        </div>
      </div>
    </>
  );
}

================
File: frontend/src/components/layout/Footer.tsx
================
export default function Footer() {
  return (
    <footer className="bg-white border-t border-gray-200">
      <div className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between items-center">
        <p className="text-sm text-gray-500 font-mono">© {new Date().getFullYear()} SnakeBench. MIT License. Code available <a href="https://github.com/gkamradt/SnakeBench" className="text-gray-400 hover:text-gray-500 font-mono">here</a>. Made with ❤️ by <a href="https://x.com/gregkamradt" className="text-gray-400 hover:text-gray-500 font-mono">Greg Kamradt</a> as a side quest for <a href="https://www.arcprize.org/" className="text-gray-400 hover:text-gray-500 font-mono">ARC Prize Foundation</a>.</p>
          <div className="flex space-x-6">
            <a href="https://github.com/gkamradt/SnakeBench" className="text-gray-400 hover:text-gray-500 font-mono">
              GitHub
            </a>
            <a href="https://twitter.com/gregkamradt" className="text-gray-400 hover:text-gray-500 font-mono">
              Twitter
            </a>
          </div>
        </div>
      </div>
    </footer>
  );
}

================
File: frontend/src/components/layout/Navbar.tsx
================
import Link from "next/link";

export default function Navbar() {
  return (
    <nav className="bg-white border-b border-gray-200">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between h-16">
          <div className="flex">
            <div className="flex-shrink-0 flex items-center">
              <Link href="/" className="text-2xl font-press-start text-gray-900">🐍 SnakeBench</Link>
            </div>
            <div className="hidden sm:ml-6 sm:flex sm:space-x-8">
              <a
                href={`/match/${process.env.NEXT_PUBLIC_TOP_MATCH_ID}`}
                className="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-mono"
              >
                Top Match
              </a>
              <a
                href="/about"
                className="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-mono"
              >
                About
              </a>
            </div>
          </div>
        </div>
      </div>
    </nav>
  );
}

================
File: frontend/src/components/match/GameCanvas.tsx
================
"use client"

import { useRef, useEffect } from "react"

interface GameCanvasProps {
  snakePositions: {
    [key: string]: [number, number][];
  };
  apples: [number, number][];
  width: number;
  height: number;
  modelIds: string[];
  colorConfig?: { [key: string]: string };
}

export default function GameCanvas({ snakePositions, apples, width, height, modelIds, colorConfig = {} }: GameCanvasProps) {
  const canvasRef = useRef<HTMLCanvasElement>(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;

    const ctx = canvas.getContext("2d");
    if (!ctx) return;

    // Handle high DPI displays
    const dpr = window.devicePixelRatio || 1;
    const rect = canvas.getBoundingClientRect();
    
    // Set the canvas dimensions accounting for device pixel ratio
    canvas.width = rect.width * dpr;
    canvas.height = rect.height * dpr;
    
    // Scale the context to ensure correct drawing
    ctx.scale(dpr, dpr);
    
    // Set CSS size
    canvas.style.width = `${rect.width}px`;
    canvas.style.height = `${rect.height}px`;
    
    // Adjust cell size based on available space
    const scaledCellSize = (rect.width / width);

    // Clear canvas
    ctx.fillStyle = "#FFFFFF";
    ctx.fillRect(0, 0, width * scaledCellSize, height * scaledCellSize);

    // Draw grid
    ctx.strokeStyle = "#E5E7EB";
    for (let i = 0; i <= width; i++) {
      ctx.beginPath();
      ctx.moveTo(i * scaledCellSize, 0);
      ctx.lineTo(i * scaledCellSize, height * scaledCellSize);
      ctx.stroke();
    }

    for (let i = 0; i <= height; i++) {
      ctx.beginPath();
      ctx.moveTo(0, i * scaledCellSize);
      ctx.lineTo(width * scaledCellSize, i * scaledCellSize);
      ctx.stroke();
    }

    // Draw snakes
    const colors = ["#3B82F6", "#8B5CF6"]; // Blue for first snake, purple for second
    
    modelIds.forEach((modelId, index) => {
      const snake = snakePositions[modelId];
      if (!snake) return;
      
      const snakeColor = colorConfig[modelId] || colors[index % colors.length];
      ctx.fillStyle = snakeColor;
      
      // Draw snake body
      for (let i = 1; i < snake.length; i++) {
        const [x, y] = snake[i];
        // Flip the y-coordinate to match the game's coordinate system
        // where (0,0) is at the bottom-left
        const flippedY = height - 1 - y;
        ctx.fillRect(x * scaledCellSize + 1, flippedY * scaledCellSize + 1, scaledCellSize - 2, scaledCellSize - 2);
      }
      
      // Draw snake head with a darker shade and slightly larger
      if (snake.length > 0) {
        const [headX, headY] = snake[0];
        const flippedHeadY = height - 1 - headY;
        
        // Draw a slightly larger rectangle for the head
        ctx.fillStyle = darkenColor(snakeColor, 0.3); // Darker version of snake color
        ctx.fillRect(
          headX * scaledCellSize, 
          flippedHeadY * scaledCellSize, 
          scaledCellSize, 
          scaledCellSize
        );
        
        // Add eyes to make the head more distinctive
        ctx.fillStyle = "#FFFFFF";
        const eyeSize = scaledCellSize / 5;
        ctx.fillRect(
          headX * scaledCellSize + scaledCellSize / 4, 
          flippedHeadY * scaledCellSize + scaledCellSize / 3, 
          eyeSize, 
          eyeSize
        );
        ctx.fillRect(
          headX * scaledCellSize + scaledCellSize * 3/4 - eyeSize, 
          flippedHeadY * scaledCellSize + scaledCellSize / 3, 
          eyeSize, 
          eyeSize
        );
      }
    });

    // Helper function to darken a color
    function darkenColor(color: string, amount: number): string {
      // Remove the # if present
      color = color.replace('#', '');
      
      // Parse the color components
      const r = parseInt(color.substring(0, 2), 16);
      const g = parseInt(color.substring(2, 4), 16);
      const b = parseInt(color.substring(4, 6), 16);
      
      // Darken each component
      const darkenedR = Math.max(0, Math.floor(r * (1 - amount)));
      const darkenedG = Math.max(0, Math.floor(g * (1 - amount)));
      const darkenedB = Math.max(0, Math.floor(b * (1 - amount)));
      
      // Convert back to hex
      return `#${darkenedR.toString(16).padStart(2, '0')}${darkenedG.toString(16).padStart(2, '0')}${darkenedB.toString(16).padStart(2, '0')}`;
    }

    // Draw apples
    ctx.fillStyle = "#EA2014"; // Red color
    apples.forEach(([x, y]) => {
      // Flip the y-coordinate for apples too
      const flippedY = height - 1 - y;
      ctx.fillRect(x * scaledCellSize + 1, flippedY * scaledCellSize + 1, scaledCellSize - 2, scaledCellSize - 2);
    });
  }, [snakePositions, apples, width, height, modelIds, colorConfig]);

  return (
    <div className="bg-white rounded-lg border border-gray-200 shadow-sm flex items-center justify-center aspect-square border-t-2">
      <canvas
        ref={canvasRef}
        className="w-[90%] h-[90%] border-4 border-gray-200 rounded"
      />
    </div>
  );
}

================
File: frontend/src/components/match/GameControls.tsx
================
"use client"

import { Play, SkipBack, SkipForward, ChevronsLeft, ChevronsRight, Pause } from "lucide-react"
import { Button } from "@/components/ui/button"

interface GameControlsProps {
  currentRound: number;
  totalRounds: number;
  isPlaying: boolean;
  onPlay: () => void;
  onNext: () => void;
  onPrev: () => void;
  onStart: () => void;
  onEnd: () => void;
}

export default function GameControls({
  currentRound,
  totalRounds,
  isPlaying,
  onPlay,
  onNext,
  onPrev,
  onStart,
  onEnd
}: GameControlsProps) {
  const progressPercentage = (currentRound / (totalRounds - 1)) * 100;
  
  return (
    <div className="mt-6 flex flex-col items-center gap-4">
      {/* Progress bar */}
      <div className="w-full max-w-md h-1 bg-gray-100 rounded-full overflow-hidden">
        <div 
          className="h-full bg-blue-500 rounded-full" 
          style={{ width: `${progressPercentage}%` }}
        />
      </div>

      {/* Control buttons */}
      <div className="flex items-center gap-2">
        <Button variant="outline" size="icon" className="h-8 w-8" onClick={onStart}>
          <ChevronsLeft className="h-4 w-4" />
          <span className="sr-only">Start</span>
        </Button>
        <Button variant="outline" size="icon" className="h-8 w-8" onClick={onPrev}>
          <SkipBack className="h-4 w-4" />
          <span className="sr-only">Previous</span>
        </Button>
        <Button variant="outline" size="icon" className="h-8 w-8" onClick={onPlay}>
          {isPlaying ? (
            <Pause className="h-4 w-4" />
          ) : (
            <Play className="h-4 w-4" />
          )}
          <span className="sr-only">{isPlaying ? 'Pause' : 'Play'}</span>
        </Button>
        <Button variant="outline" size="icon" className="h-8 w-8" onClick={onNext}>
          <SkipForward className="h-4 w-4" />
          <span className="sr-only">Next</span>
        </Button>
        <Button variant="outline" size="icon" className="h-8 w-8" onClick={onEnd}>
          <ChevronsRight className="h-4 w-4" />
          <span className="sr-only">End</span>
        </Button>
      </div>

      {/* Move counter */}
      <p className="font-mono text-[10px] text-gray-500">
        Round {currentRound + 1} / {totalRounds}
      </p>
    </div>
  );
}

================
File: frontend/src/components/match/GameViewer.tsx
================
"use client"

import { useState, useEffect } from "react"
import { Copy } from "lucide-react"
import { Button } from "@/components/ui/button"
import GameCanvas from "./GameCanvas"
import PlayerThoughts from "./PlayerThoughts"
import GameControls from "./GameControls"

// Define color configuration types
interface PlayerColorScheme {
  main: string;       // Main color for the snake
  border: string;     // Border color for the thoughts panel
  shadow: string;     // Shadow color for the thoughts panel
  title_background: string;      // Title text color
}

interface ColorConfig {
  player1: PlayerColorScheme;
  player2: PlayerColorScheme;
}

// Define the game data structure types
type Position = [number, number];

interface MoveHistory {
  [modelId: string]: {
    move: string;
    rationale: string;
  };
}

interface RoundData {
  round_number: number;
  move_history?: MoveHistory[];
  snake_positions: {
    [modelId: string]: Position[];
  };
  alive: {
    [modelId: string]: boolean;
  };
  scores: {
    [modelId: string]: number;
  };
  apples: Position[];
  width: number;
  height: number;
}

interface GameMetadata {
  game_id: string;
  start_time: string;
  end_time: string;
  models: Record<string, string>;
  game_result: Record<string, string>;
  final_scores: Record<string, number>;
  death_info: Record<string, { reason: string, round?: number }>;
  max_rounds: number;
  actual_rounds: number;
}

interface GameData {
  rounds: RoundData[];
  metadata: GameMetadata;
}

interface GameViewerProps {
  gameData: GameData;
  modelIds: string[];
  modelNames: string[];
  colorConfig?: ColorConfig; // Optional custom color config
}

// Default color configuration
const defaultColorConfig: ColorConfig = {
  player1: {
    main: "#4F7022",
    border: "border-blue-500/20",
    shadow: "shadow-[0_0_15px_rgba(59,130,246,0.1)]",
    title_background: "bg-[#4F7022]"
  },
  player2: {
    main: "#036C8E",
    border: "border-purple-500/20",
    shadow: "shadow-[0_0_15px_rgba(147,51,234,0.1)]",
    title_background: "bg-[#036C8E]"
  }
};

export default function GameViewer({ 
  gameData, 
  modelIds, 
  modelNames,
  colorConfig = defaultColorConfig 
}: GameViewerProps) {
  const [currentRound, setCurrentRound] = useState(0);
  const [isPlaying, setIsPlaying] = useState(true);
  const playbackSpeed = 1;
  
  const totalRounds = gameData.rounds.length;
  const currentRoundData = gameData.rounds[currentRound];
  
  // Extract thoughts for current round
  const getThoughtsForModel = (modelId: string) => {
    if (currentRoundData && currentRoundData.move_history) {
      // If move_history is an array, get the last entry
      if (Array.isArray(currentRoundData.move_history) && currentRoundData.move_history.length > 0) {
        // Get the last move in the array
        const lastMove = currentRoundData.move_history[currentRoundData.move_history.length - 1];
        
        if (lastMove && lastMove[modelId] && lastMove[modelId].rationale) {
          const thoughts = lastMove[modelId].rationale.split('\n').filter(Boolean);
          return thoughts;
        }
      }
    }
    
    return ["No thoughts available for this round"];
  };

  // Auto-play functionality
  useEffect(() => {
    if (!isPlaying) return;
    
    const interval = setInterval(() => {
      setCurrentRound(prev => {
        if (prev >= totalRounds - 1) {
          setIsPlaying(false);
          return prev;
        }
        return prev + 1;
      });
    }, 500 / playbackSpeed);
    
    return () => clearInterval(interval);
  }, [isPlaying, totalRounds, playbackSpeed]);

  // Handle controls
  const handlePlay = () => setIsPlaying(!isPlaying);
  const handleNext = () => setCurrentRound(prev => Math.min(prev + 1, totalRounds - 1));
  const handlePrev = () => setCurrentRound(prev => Math.max(prev - 1, 0));
  const handleStart = () => setCurrentRound(0);
  const handleEnd = () => setCurrentRound(totalRounds - 1);
  
  const copyGameId = () => {
    navigator.clipboard.writeText(`${process.env.NEXT_PUBLIC_FRONTEND_URL}/match/${gameData.metadata.game_id}`);
  };

  return (
    <>
      <div className="grid grid-cols-[1fr_min-content_1fr] gap-4">
        {/* Left AI Thoughts */}
        <PlayerThoughts 
          modelName={modelNames[0]} 
          thoughts={getThoughtsForModel(modelIds[0])}
          score={currentRoundData.scores[modelIds[0]] || 0}
          isAlive={currentRoundData.alive[modelIds[0]] || false}
          color="player1"
          colorScheme={colorConfig.player1}
        />

        {/* Game Canvas */}
        <GameCanvas 
          snakePositions={currentRoundData.snake_positions}
          apples={currentRoundData.apples}
          width={currentRoundData.width}
          height={currentRoundData.height}
          modelIds={modelIds}
          colorConfig={{
            [modelIds[0]]: colorConfig.player1.main,
            [modelIds[1]]: colorConfig.player2.main
          }}
        />

        {/* Right AI Thoughts */}
        <PlayerThoughts 
          modelName={modelNames[1]} 
          thoughts={getThoughtsForModel(modelIds[1])}
          score={currentRoundData.scores[modelIds[1]] || 0}
          isAlive={currentRoundData.alive[modelIds[1]] || false}
          color="player2"
          colorScheme={colorConfig.player2}
        />
      </div>

      {/* Game controls */}
      <GameControls 
        currentRound={currentRound}
        totalRounds={totalRounds}
        isPlaying={isPlaying}
        onPlay={handlePlay}
        onNext={handleNext}
        onPrev={handlePrev}
        onStart={handleStart}
        onEnd={handleEnd}
      />

      {/* Game ID */}
      <div className="mt-4 flex justify-center">
        <Button
          variant="outline"
          size="sm"
          className="text-sm text-gray-500 flex items-center gap-2 font-mono"
          onClick={copyGameId}
        >
          <span>Game ID: {gameData.metadata.game_id}</span>
          <Copy className="h-4 w-4" />
        </Button>
      </div>
    </>
  )
}

================
File: frontend/src/components/match/MatchInfo.tsx
================
interface MatchInfoProps {
  modelNames: string[];
  date: string;
  time: string;
}

export default function MatchInfo({ modelNames, date, time }: MatchInfoProps) {
  return (
    <>

      {/* Title */}
      <div className="text-center mb-6">
        <h1 className="font-press-start text-lg text-gray-800">{modelNames.join(' vs ')}</h1>
        <p className="font-mono text-[10px] text-gray-500 italic mt-2">
          Match run on {date} at {time}
        </p>
      </div>
    </>
  )
}

================
File: frontend/src/components/match/Modal.tsx
================
'use client';

interface ModalProps {
  isOpen: boolean;
  onClose: () => void;
  title: string;
  children: React.ReactNode;
}

export default function Modal({ isOpen, onClose, title, children }: ModalProps) {
  if (!isOpen) return null;

  return (
    <div 
      className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4"
      onClick={onClose}
    >
      <div 
        className="bg-gray-800 rounded-lg max-w-2xl w-full max-h-[90vh] flex flex-col"
        onClick={e => e.stopPropagation()}
      >
        <div className="flex justify-between items-center p-4 border-b border-gray-700">
          <h2 className="text-xl font-bold">{title}</h2>
          <button
            onClick={onClose}
            className="text-gray-400 hover:text-white"
          >
            ✕
          </button>
        </div>
        <div className="p-4 overflow-y-auto">
          {children}
        </div>
      </div>
    </div>
  );
}

================
File: frontend/src/components/match/PlayerThoughts.tsx
================
"use client"

import { useRef, useEffect } from "react"

interface PlayerThoughtsProps {
  modelName: string;
  thoughts: string[];
  score: number;
  isAlive: boolean;
  color: string;
  colorScheme: {
    border: string;
    shadow: string;
    title_background: string;
  };
}

export default function PlayerThoughts({ 
  modelName, 
  thoughts, 
  score, 
  isAlive, 
  color,
  colorScheme 
}: PlayerThoughtsProps) {
  const thoughtsRef = useRef<HTMLDivElement>(null);
  
  // Auto-scroll to the bottom when thoughts update
  useEffect(() => {
    if (thoughtsRef.current) {
      thoughtsRef.current.scrollTop = thoughtsRef.current.scrollHeight;
    }
  }, [thoughts]);
  
  // Format thoughts to highlight tool usage
  const formattedThoughts = thoughts.map(thought => {
    if (thought.includes("Using tool:") || thought.includes("tool:")) {
      return { text: thought, isToolUsage: true };
    }
    return { text: thought, isToolUsage: false };
  });

  return (
    <div className={`h-[400px] bg-white rounded-lg border ${colorScheme.border} ${colorScheme.shadow} overflow-hidden`}>
      <div className="h-full flex flex-col">
        <div className={`p-3 border-b border-gray-100 backdrop-blur-sm sticky top-0 z-10 text-center ${colorScheme.title_background} bg-opacity-50`}>
          <h2 className="font-mono leading-none text-sm text-gray-800 px-2 py-1 inline-block rounded">{modelName}</h2>
        </div>
        <div className="flex-1 p-4 overflow-auto">
          <div
            ref={thoughtsRef}
            className="font-mono text-[10px] leading-[1.15] tracking-[-0.01em] text-gray-800 space-y-1"
          >
            {formattedThoughts.map((thought, i) => 
              thought.isToolUsage ? (
                <div
                  key={i}
                  className="bg-[#3B2F1D] text-[#FFA940] px-2 py-1 font-mono text-[10px] leading-none my-1"
                >
                  {thought.text}
                </div>
              ) : (
                <p key={i} className="leading-tight">
                  {thought.text}
                </p>
              )
            )}
          </div>
        </div>
        <div className="p-3 border-t border-gray-100 flex justify-between items-center">
          <div className="flex items-center gap-2 text-blue-500 font-mono leading-none text-[10px]">
            {isAlive ? (
              <>
              </>
            ) : (
              <span className="text-red-500 font-bold text-sm">&lt;Eliminated&gt;</span>
            )}
          </div>
          <div className={`flex items-center gap-1 font-mono text-[15px] ${color === "player1" ? "justify-start" : "justify-end"} ${color === "player1" ? "order-first" : "order-last"}`}>
            {color === "player1" ? (
              <>
                {/* Always show score number */}
                <span className="text-gray-400 mr-1">{score}</span>
                {/* Green apples for tens (left side for player1) */}
                {Array.from({ length: Math.floor(score / 10) }).map((_, i) => (
                  <span key={`green-${i}`} className="text-green-500">🍏</span>
                ))}
                {/* Red apples for ones */}
                {Array.from({ length: score % 10 }).map((_, i) => (
                  <span key={`red-${i}`} className="text-red-500">🍎</span>
                ))}
              </>
            ) : (
              <>
                {/* Red apples for ones */}
                {Array.from({ length: score % 10 }).map((_, i) => (
                  <span key={`red-${i}`} className="text-red-500">🍎</span>
                ))}
                {/* Green apples for tens (right side for player2) */}
                {Array.from({ length: Math.floor(score / 10) }).map((_, i) => (
                  <span key={`green-${i}`} className="text-green-500">🍏</span>
                ))}
                {/* Always show score number */}
                <span className="text-gray-400 ml-1">{score}</span>
              </>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

================
File: frontend/src/components/match/ScorePanel.tsx
================
'use client';

import { useState } from 'react';
import Modal from './Modal';

interface GameRound {
  round_number: number;
  move_history?: {
    [modelId: string]: {
      move: string;
      rationale: string;
    };
  }[];
  snake_positions: {
    [key: string]: [number, number][];
  };
  alive: {
    [key: string]: boolean;
  };
  scores: {
    [key: string]: number;
  };
  width: number;
  height: number;
  apples: [number, number][];
}

interface ScorePanelProps {
  metadata: {
    models: Record<string, string>;
    game_result: Record<string, string>;
    final_scores: Record<string, number>;
    death_info: Record<string, { reason: string; round: number }>;
  };
  currentRound: GameRound;
  nextMoves?: {
    [modelId: string]: {
      move: string;
      rationale: string;
    };
  };
}

export default function ScorePanel({ metadata, currentRound, nextMoves }: ScorePanelProps) {
  const [modalContent, setModalContent] = useState<{
    isOpen: boolean;
    title: string;
    content: string;
  }>({
    isOpen: false,
    title: '',
    content: ''
  });

  const renderPlayerInfo = (playerId: string) => {
    const isAlive = currentRound.alive[playerId];
    const score = currentRound.scores[playerId];
    const modelName = metadata.models[playerId];
    const deathInfo = metadata.death_info[playerId];
    const justDied = deathInfo?.round === currentRound.round_number;

    const upcomingMove = nextMoves?.[playerId];
    
    const bgColor = playerId === '1' ? 'bg-green-900' : 'bg-blue-900';
    const borderColor = playerId === '1' ? 'border-green-500' : 'border-blue-500';

    return (
      <div className={`${bgColor} border-2 ${borderColor} rounded-lg p-4 mb-4`}>
        <div className="flex justify-between items-center mb-2">
          <h3 className="text-lg font-bold">{modelName}</h3>
          <div className="flex items-center gap-2">
            <span className={`w-3 h-3 rounded-full ${isAlive ? 'bg-green-500' : 'bg-red-500'}`} />
            <span className="text-sm">{isAlive ? 'Active' : 'Dead'}</span>
          </div>
        </div>
        
        <div className="mb-2">
          <span className="text-gray-400">Score: </span>
          <span className="text-xl font-bold">{score}</span>
        </div>

        {justDied && (
          <div className="text-red-400 text-sm mb-2 animate-fade-in">
            Died from: {deathInfo.reason}
          </div>
        )}

        {upcomingMove && isAlive && (
          <div className="mt-4">
            <div className="flex justify-between items-center text-sm text-gray-400 mb-1">
              <span>Next Move: {upcomingMove.move}</span>
              <button
                onClick={() => setModalContent({
                  isOpen: true,
                  title: `${modelName}'s Next Move`,
                  content: upcomingMove.rationale
                })}
                className="px-2 py-1 bg-gray-700 hover:bg-gray-600 rounded text-xs"
              >
                Expand
              </button>
            </div>
            <div className="text-sm bg-black bg-opacity-30 p-2 rounded max-h-32 overflow-y-auto">
              {upcomingMove.rationale}
            </div>
          </div>
        )}
      </div>
    );
  };

  return (
    <>
      <div className="bg-gray-800 rounded-lg p-6">
        <h2 className="text-xl font-bold mb-4">Game Stats</h2>
        {renderPlayerInfo('1')}
        {renderPlayerInfo('2')}
      </div>

      <Modal
        isOpen={modalContent.isOpen}
        onClose={() => setModalContent(prev => ({ ...prev, isOpen: false }))}
        title={modalContent.title}
      >
        <div className="whitespace-pre-wrap">
          {modalContent.content}
        </div>
      </Modal>
    </>
  );
}

================
File: frontend/src/components/ui/button.tsx
================
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const buttonVariants = cva(
  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
  {
    variants: {
      variant: {
        default:
          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
        destructive:
          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
        outline:
          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
        secondary:
          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
        ghost: "hover:bg-accent hover:text-accent-foreground",
        link: "text-primary underline-offset-4 hover:underline",
      },
      size: {
        default: "h-9 px-4 py-2",
        sm: "h-8 rounded-md px-3 text-xs",
        lg: "h-10 rounded-md px-8",
        icon: "h-9 w-9",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  asChild?: boolean
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, asChild = false, ...props }, ref) => {
    const Comp = asChild ? Slot : "button"
    return (
      <Comp
        className={cn(buttonVariants({ variant, size, className }))}
        ref={ref}
        {...props}
      />
    )
  }
)
Button.displayName = "Button"

export { Button, buttonVariants }

================
File: frontend/src/components/ui/table.tsx
================
import * as React from "react";

import { cn } from "@/lib/utils";

const Table = React.forwardRef<
  HTMLTableElement,
  React.HTMLAttributes<HTMLTableElement>
>(({ className, ...props }, ref) => (
  <div className="relative w-full overflow-auto">
    <table
      ref={ref}
      className={cn("w-full caption-bottom text-sm", className)}
      {...props}
    />
  </div>
));
Table.displayName = "Table";

const TableHeader = React.forwardRef<
  HTMLTableSectionElement,
  React.HTMLAttributes<HTMLTableSectionElement>
>(({ className, ...props }, ref) => (
  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
));
TableHeader.displayName = "TableHeader";

const TableBody = React.forwardRef<
  HTMLTableSectionElement,
  React.HTMLAttributes<HTMLTableSectionElement>
>(({ className, ...props }, ref) => (
  <tbody
    ref={ref}
    className={cn("[&_tr:last-child]:border-0", className)}
    {...props}
  />
));
TableBody.displayName = "TableBody";

const TableFooter = React.forwardRef<
  HTMLTableSectionElement,
  React.HTMLAttributes<HTMLTableSectionElement>
>(({ className, ...props }, ref) => (
  <tfoot
    ref={ref}
    className={cn(
      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
      className
    )}
    {...props}
  />
));
TableFooter.displayName = "TableFooter";

const TableRow = React.forwardRef<
  HTMLTableRowElement,
  React.HTMLAttributes<HTMLTableRowElement>
>(({ className, ...props }, ref) => (
  <tr
    ref={ref}
    className={cn(
      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
      className
    )}
    {...props}
  />
));
TableRow.displayName = "TableRow";

const TableHead = React.forwardRef<
  HTMLTableCellElement,
  React.ThHTMLAttributes<HTMLTableCellElement>
>(({ className, ...props }, ref) => (
  <th
    ref={ref}
    className={cn(
      "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
      className
    )}
    {...props}
  />
));
TableHead.displayName = "TableHead";

const TableCell = React.forwardRef<
  HTMLTableCellElement,
  React.TdHTMLAttributes<HTMLTableCellElement>
>(({ className, ...props }, ref) => (
  <td
    ref={ref}
    className={cn(
      "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
      className
    )}
    {...props}
  />
));
TableCell.displayName = "TableCell";

const TableCaption = React.forwardRef<
  HTMLTableCaptionElement,
  React.HTMLAttributes<HTMLTableCaptionElement>
>(({ className, ...props }, ref) => (
  <caption
    ref={ref}
    className={cn("mt-4 text-sm text-muted-foreground", className)}
    {...props}
  />
));
TableCaption.displayName = "TableCaption";

export {
  Table,
  TableHeader,
  TableBody,
  TableFooter,
  TableHead,
  TableRow,
  TableCell,
  TableCaption,
};

================
File: frontend/src/lib/utils.ts
================
import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

================
File: frontend/.gitignore
================
# 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

.DS_Store

================
File: frontend/components.json
================
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.ts",
    "css": "src/app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "iconLibrary": "lucide"
}

================
File: frontend/eslint.config.mjs
================
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", "next/typescript"),
];

export default eslintConfig;

================
File: frontend/frontend.railway.json
================
{
    "$schema": "https://railway.app/railway.schema.json",
    "build": {
        "builder": "NIXPACKS",
        "buildCommand": "npm run build",
        "nixpacksConfigPath": "./nixpacks.toml",
        "watchPatterns": [
            "frontend/**/*"
        ]
    },
    "deploy": {
        "startCommand": "npm start",
        "restartPolicyType": "ON_FAILURE",
        "restartPolicyMaxRetries": 3
    }
}

================
File: frontend/next.config.ts
================
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  /* config options here */
};

export default nextConfig;

================
File: frontend/nixpacks.toml
================
[phases.install]
cmds = ['npm install']

================
File: frontend/package.json
================
{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@next/font": "^14.2.15",
    "@radix-ui/react-slot": "^1.1.2",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "lucide-react": "^0.474.0",
    "next": "15.1.6",
    "next-themes": "^0.4.4",
    "posthog-js": "^1.219.6",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "tailwind-merge": "^3.0.1",
    "tailwindcss-animate": "^1.0.7"
  },
  "devDependencies": {
    "@eslint/eslintrc": "^3",
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "eslint": "^9",
    "eslint-config-next": "15.1.6",
    "postcss": "^8",
    "tailwindcss": "^3.4.1",
    "typescript": "^5"
  }
}

================
File: frontend/postcss.config.mjs
================
/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: {
    tailwindcss: {},
  },
};

export default config;

================
File: frontend/tailwind.config.js
================
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      fontFamily: {
        "press-start": ["var(--font-press-start-2p)"],
        mono: ["ui-monospace", "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", "monospace"],
      },
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
    },
  },
  plugins: [],
};

================
File: frontend/tailwind.config.ts
================
import type { Config } from "tailwindcss";

export default {
    darkMode: ["class"],
    content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
  	extend: {
  		colors: {
  			background: 'hsl(var(--background))',
  			foreground: 'hsl(var(--foreground))',
  			card: {
  				DEFAULT: 'hsl(var(--card))',
  				foreground: 'hsl(var(--card-foreground))'
  			},
  			popover: {
  				DEFAULT: 'hsl(var(--popover))',
  				foreground: 'hsl(var(--popover-foreground))'
  			},
  			primary: {
  				DEFAULT: 'hsl(var(--primary))',
  				foreground: 'hsl(var(--primary-foreground))'
  			},
  			secondary: {
  				DEFAULT: 'hsl(var(--secondary))',
  				foreground: 'hsl(var(--secondary-foreground))'
  			},
  			muted: {
  				DEFAULT: 'hsl(var(--muted))',
  				foreground: 'hsl(var(--muted-foreground))'
  			},
  			accent: {
  				DEFAULT: 'hsl(var(--accent))',
  				foreground: 'hsl(var(--accent-foreground))'
  			},
  			destructive: {
  				DEFAULT: 'hsl(var(--destructive))',
  				foreground: 'hsl(var(--destructive-foreground))'
  			},
  			border: 'hsl(var(--border))',
  			input: 'hsl(var(--input))',
  			ring: 'hsl(var(--ring))',
  			chart: {
  				'1': 'hsl(var(--chart-1))',
  				'2': 'hsl(var(--chart-2))',
  				'3': 'hsl(var(--chart-3))',
  				'4': 'hsl(var(--chart-4))',
  				'5': 'hsl(var(--chart-5))'
  			}
  		},
  		borderRadius: {
  			lg: 'var(--radius)',
  			md: 'calc(var(--radius) - 2px)',
  			sm: 'calc(var(--radius) - 4px)'
  		}
  	}
  },
  plugins: [require("tailwindcss-animate")],
} satisfies Config;

================
File: frontend/tsconfig.json
================
{
  "compilerOptions": {
    "target": "ES2017",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

================
File: .gitignore
================
.DS_Store
.DS_Store?
._*

================
File: .startsession
================
#!/bin/bash

# Start a new tmux session named "dev-session" with a window called "dev"
tmux new-session -d -s dev-session -n dev

# Split the window vertically
tmux split-window -v -t dev-session:dev

# Send commands to the top pane to start the frontend
tmux send-keys -t dev-session:dev.0 'cd backend && source venv/bin/activate && python3 -m app' C-m

# Send commands to the bottom pane to start the backend
tmux send-keys -t dev-session:dev.1 'cd frontend && nvm use node && npm run dev' C-m

# Attach to the tmux session
tmux attach-session -t dev-session

================
File: README.md
================
# LLM Snake Arena

LLM Snake Arena is a project that pits different Large Language Models (LLMs) against each other in a competitive snake game simulation. Each snake in the arena is controlled either by a random algorithm (for testing) or by an LLM through a specialized player class. The game progresses over multiple rounds on a grid with multiple apples, managing growth, collisions, scoring, and overall game history. Meanwhile, a Next.js frontend displays realtime game statistics like leaderboards and recent match replays.

---

## Project Overview

### Backend: Game Simulation (`backend/main.py`)

- **Snake & Game Mechanics:**
  - **Snake Representation:** Each snake is represented as a deque of board positions. The game handles moving the snake's head, updating the tail, and managing growth when an apple is eaten.
  - **Collision Logic:** The game checks for collisions—with walls, with snake bodies (including self-collisions), and with head-to-head moves [if two or more snake heads land on the same cell].
  - **Rounds and Game-Over:** The simulation proceeds round-by-round. Rounds end when one snake remains or when a maximum round count is reached. The game then records the outcome (score, win/loss/tie, history) and saves the complete game state as a JSON file.

- **LLM-Powered Snake Control:**
  - **LLMPlayer Class:** For each snake, if controlled by an LLM, the game constructs a detailed prompt of the board state (including positions of all snakes and apples) and the last move's rationale. This prompt is sent to an LLM provider, which returns a recommendation for the next direction.
  - **Fallback Mechanism:** If the response from the LLM is unclear, the snake falls back to selecting a random valid move.

### Frontend: Visualization & Dashboard (`frontend/src/app/page.tsx`)

- **Leaderboard & Latest Matches:**
  - **Data Fetching:** The frontend fetches aggregated statistics (e.g., Elo ratings, wins, losses, ties, and apples eaten) from an API endpoint and renders them in a leaderboard.
  - **Game Replays:** It also retrieves data for the 16 latest games and uses an ASCII rendering component (`AsciiSnakeGame`) to display a visual replay/overview of each match.
  
- **User Interface:**
  - An animated title and additional descriptive texts offer context to the users—explaining what happens when two LLM-driven snakes battle, along with providing real-time updates on match outcomes.

---

## Command-Line & Batch Execution (from the original README)

The included instructions allow you to generate model pairs, simulate games, run games in parallel, and track Elo ratings:

1. **Generate Model Pairs:**

   ```bash
   # Generate all possible matchups, 3 rounds each
   python cli/generate_matchups.py --rounds 3

   # Same thing but with custom input and output files
   python cli/generate_matchups.py --rounds 3 --input my_models.txt --output my_matchups.txt

   # Generate matchups for gemini-2.0-flash against all other models, 2 rounds each
   python cli/generate_matchups.py --mode single --model gemini-2.0-flash --rounds 2

   # Same thing but with custom input and output files
   python cli/generate_matchups.py --mode single --model gemini-2.0-flash --rounds 2 --input my_models.txt --output gpt4_matchups.txt
   ```

2. **Run a Single Game:**

   ```bash
   cd backend
   python3 main.py --models gpt-3.5-turbo-0125 claude-3-haiku-20240307
   ```

   to use ollama, add ollama- to the model name:

   ```bash
   cd backend
   python3 main.py --models ollama-llama3.2 ollama-llama3.3 
   ```

3. **Run Many Games in Parallel:**

   ```bash
   cd backend
   parallel --colsep ' ' --jobs 30 --progress python3 main.py --models {1} {2} :::: model_lists/model_pairs.txt
   ```

4. **Run Elo Tracker:**

   ```bash
   cd backend
   python3 elo_tracker.py completed_games --output completed_games
   ```

---

## Quick Start

1. **Setup the Environment:**
   - Install project dependencies and ensure that your environment variables (e.g., API keys for your LLM provider) are configured via the `.env` file.

2. **Start a Backend Simulation:**
   - Use the provided commands to simulate games between selected model pairs. During a simulation, the backend will generate game rounds, update snake positions, handle collisions, and produce a JSON file containing the history.

3. **Launch the Frontend Application:**
   - Start the Next.js development server to see the leaderboard and replays.
   ```bash
   npm run dev
   # or
   yarn dev
   # or
   pnpm dev
   # or
   bun dev
   ```

---

## Architecture Summary

- **Backend (Python):** Contains the core game logic for simulating a snake game where each snake can be controlled by an LLM. It tracks game state, records round-by-round history, manages collisions and apple spawning, and decides game outcomes.
  
- **Frontend (Next.js):** Provides a visual dashboard for game results. It pulls data via APIs to render leaderboards and ASCII-based match replays clearly showing the state of the board.

---

Made with ❤️ by [Greg Kamradt](https://www.x.com/gregkamradt)

```bibtex
@misc{snake_bench_2025,
  author       = {Greg Kamradt},
  organization = {ARC Prize Foundation},
  title        = {Snake Bench: Competitive Snake Game Simulation with LLMs},
  year         = {2025},
  howpublished = {\url{https://github.com/gkamradt/SnakeBench}},
  note         = {Accessed on: Month Day, Year}
}
```

================
File: run_repomix.sh
================
repomix --ignore "backend/completed_games,backend/model_lists,frontend/.next" -o llms.txt



================================================================
End of Codebase
================================================================