Initial deployment of Mini World game

.gitignore

@@ -0,0 +1,6 @@
+.parcel-cache
+dist
+node_modules
+.aider*
+.env
+messages.json

CLAUDE.md

@@ -0,0 +1,82 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Commands
+
+```bash
+# Install dependencies
+bun install
+
+# Start the server (requires HF_TOKEN env var)
+HF_TOKEN=<your-token> bun server.ts
+
+# Or using npm script
+HF_TOKEN=<your-token> bun start
+```
+
+The server runs at http://localhost:7860 (or set `PORT` env var)
+
+## Architecture
+
+This is a real-time AI-powered exploration game where an AI agent navigates a procedurally-generated 2D emoji world.
+
+### Core Files
+
+- **server.ts** - HTTP server using Bun's native `serve()`. Handles SSE streaming via `/game-stream` endpoint and static file serving. Contains the main AI loop that calls `AIService.getNextAction()` every 1 second.
+
+- **aiService.ts** - AI inference layer using OpenAI SDK with HuggingFace router (`https://router.huggingface.co/v1`). Manages system prompts, message history (limited to last 15 entries), and action validation. Returns `{ action: "move"|"pick", detail: "up"|"down"|"left"|"right" }`.
+
+- **gameState.ts** - Game world and state management. Creates a 600x600 grid using Perlin noise for terrain generation (trees, rocks, empty spaces). Handles character movement, object picking, and broadcasts state updates to all connected SSE clients.
+
+- **index.html** - Frontend using vanilla JS + Tailwind CSS. Connects via EventSource to `/game-stream` and renders the map, inventory, and action history in real-time.
+
+### Data Flow
+
+```
+Client connects → /game-stream SSE
+    ↓
+GameState.sendUpdate() broadcasts current state
+    ↓
+Every 1 second: runAI() → AIService.getNextAction()
+    ↓
+AI returns JSON action → GameState.handleAction()
+    ↓
+State update broadcast to all clients
+```
+
+### Environment Variables
+
+- `HF_TOKEN` (required) - HuggingFace API token for model access
+- `HF_MODEL` or `OPENAI_MODEL` (optional) - Override default model (`zai-org/GLM-4.7-Flash:novita`)
+
+### Map Symbols
+
+- 🚶 Character (player)
+- 💎 Diamond (collectible)
+- 🌳 Tree (obstacle)
+- 🪨 Rock (obstacle)
+- ⬜ Empty space (walkable)
+
+## Testing
+
+The AI loop only starts when a client connects to `/game-stream`. To test:
+
+```bash
+# Start server in background
+HF_TOKEN=<token> bun server.ts &
+
+# Test config endpoint
+curl http://localhost:3000/config
+
+# Connect to game stream (triggers AI loop)
+curl http://localhost:3000/game-stream
+```
+
+Server logs show `Raw AI response:` for each AI action and `Rendering around character at (x, y)` for position updates.
+
+### AI Response Handling
+
+- AI may return JSON wrapped in markdown code blocks (``` ```json...``` ```) - this is stripped automatically
+- Invalid/malformed responses fall back to `{"action":"move","detail":"right"}`
+- Valid actions: `move` or `pick` with direction `up`, `down`, `left`, or `right`

Dockerfile

@@ -0,0 +1,33 @@
+# Use official Bun image
+FROM oven/bun:1-alpine AS base
+
+# Set up user with ID 1000 (required by Hugging Face Spaces)
+RUN adduser -D -u 1000 user
+
+# Switch to the user
+USER user
+
+# Set environment
+ENV HOME=/home/user \
+    PATH=/home/user/.local/bin:$PATH
+
+# Set working directory
+WORKDIR $HOME/app
+
+# Copy package files first for better caching
+COPY --chown=user package.json bun.lockb ./
+
+# Install dependencies
+RUN bun install --frozen-lockfile --production
+
+# Copy application files
+COPY --chown=user . .
+
+# Expose port 7860 (Hugging Face Spaces default)
+EXPOSE 7860
+
+# Set default port for Hugging Face Spaces
+ENV PORT=7860
+
+# Run the server
+CMD ["bun", "server.ts"]

README.md

@@ -1,10 +1,44 @@
 ---
 title: Mini World
-emoji: 🌖
-colorFrom: indigo
-colorTo: gray
+emoji: 🌍
+colorFrom: green
+colorTo: blue
 sdk: docker
-pinned: false
+app_port: 7860
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Mini World
+
+A real-time AI-powered exploration game where an AI agent navigates a procedurally-generated 2D emoji world.
+
+## Features
+
+- 🚶 AI agent that autonomously explores a 600x600 world
+- 💎 Collectible diamonds scattered across the map
+- 🌳🪨 Procedurally generated terrain using Perlin noise
+- Real-time updates via Server-Sent Events (SSE)
+
+## Environment Variables
+
+Set these in your Hugging Face Space settings:
+
+- `HF_TOKEN` (required) - Your Hugging Face API token for model access
+
+## Local Development
+
+```bash
+# Install dependencies
+bun install
+
+# Start the server
+HF_TOKEN=<your-token> bun server.ts
+```
+
+The server runs at http://localhost:7860 (or set `PORT` env var)
+
+## Architecture
+
+- **server.ts** - HTTP server with SSE streaming
+- **aiService.ts** - AI inference using OpenAI SDK with HuggingFace router
+- **gameState.ts** - Game world and state management
+- **index.html** - Frontend UI

aiService.ts

@@ -0,0 +1,129 @@
+import { OpenAI } from "openai";
+
+// Configuration - use specified model with fallback to env vars
+export const MODEL =
+  process.env.HF_MODEL ||
+  process.env.OPENAI_MODEL ||
+  "zai-org/GLM-4.7-Flash:novita";
+
+const HF_TOKEN = process.env.HF_TOKEN;
+if (!HF_TOKEN) {
+  throw new Error(
+    "HF_TOKEN environment variable is required for Hugging Face Router authentication."
+  );
+}
+
+const SYS_PROMPT = `
+# Welcome to the you own exploration game
+
+You are acting as an explorer in a 2D world game seen from a top-down perspective. Everything in this world, including objects and landmarks, is represented by emoji.
+The most important emoji is 🚶 (it's you).
+
+## Important concepts
+
+### Turn-based
+
+You can take one action per turn, then you'll get the result of your action before you can take another action.
+
+### Goals
+
+Your primary goal is to collect as many diamonds (💎) as possible. A good strategy is to explore efficiently and avoid revisiting the same tiles while searching for diamonds.
+
+## Available Actions
+
+You must respond your next action in JSON format with what action you want to take. Give no explanations just return the JSON.
+
+### Move
+
+This action allows you to move one emoji away from your current location, choosing between the four available direct tiles around you (🚶): "up", "right", "down", or "left".
+You are only allowed to move on the empty ⬜ square, so always make sure that your target square is a ⬜.
+
+{ "action": "move", "detail": move direction, can be "up", "right", "down", or "left" }
+
+### Pick
+
+This action allows you to pick up an object from an adjacent tile (up, right, down, or left).
+The object will be added to your inventory and removed from the map.
+
+{ "action": "pick", "detail": direction of the object to pick, can be "up", "right", "down", or "left" }`;
+
+// OpenAI client configured for HuggingFace router
+const client = new OpenAI({
+  baseURL: "https://router.huggingface.co/v1",
+  apiKey: HF_TOKEN,
+});
+
+export class AIService {
+  /**
+   * Get the next action from the AI agent
+   * Returns a validated action object { action: "move"|"pick", detail: "up"|"down"|"left"|"right" }
+   */
+  static async getNextAction(
+    map: string,
+    history: any[]
+  ): Promise<{ action: string; detail: string }> {
+    const messages: OpenAI.ChatCompletionMessageParam[] = [
+      {
+        role: "system",
+        content: SYS_PROMPT,
+      },
+      ...history.slice(-15),
+      {
+        role: "user",
+        content: `Please decide on what action to do next and provide the corresponding JSON response. Here is the current map:
+${map}
+`,
+      },
+    ];
+
+    // Log messages for debugging
+    Bun.write("messages.json", JSON.stringify(messages, null, 2));
+
+    try {
+      const chatCompletion = await client.chat.completions.create({
+        model: MODEL,
+        messages,
+        temperature: 0.7,
+      });
+
+      let content = chatCompletion.choices[0].message.content?.trim() ?? "";
+      console.log("Raw AI response:", content);
+
+      // Strip markdown code blocks if present
+      if (content.startsWith("```")) {
+        content = content.replace(/^```(?:json)?\s*/i, "").replace(/\s*```$/, "");
+      }
+
+      // Parse and validate the response
+      const parsed = JSON.parse(content);
+
+      if (this.isValidAction(parsed)) {
+        return {
+          action: parsed.action,
+          detail: parsed.detail.toLowerCase(),
+        };
+      }
+
+      throw new Error("Invalid action format");
+    } catch (error) {
+      console.error("Error getting AI action:", error);
+      // Return a safe fallback action if anything fails
+      return { action: "move", detail: "right" };
+    }
+  }
+
+  private static isValidAction(obj: any): boolean {
+    if (!obj || typeof obj !== "object" || typeof obj.action !== "string") {
+      return false;
+    }
+
+    if (obj.action === "move" || obj.action === "pick") {
+      return (
+        typeof obj.detail === "string" &&
+        ["up", "down", "left", "right"].includes(obj.detail.toLowerCase())
+      );
+    }
+
+    return false;
+  }
+}

gameState.ts

@@ -0,0 +1,401 @@
+export const emojis = {
+  tree: "🌳",
+  rock: "🪨",
+  character: "🚶",
+  blank: "⬜",
+  diamond: "💎",
+};
+
+type World = {
+  width: number;
+  height: number;
+  data: string[];
+};
+
+type GameObject = {
+  x: number;
+  y: number;
+  emoji: string;
+};
+
+type Character = GameObject & {
+  inventory: GameObject[];
+};
+
+export class GameState {
+  private world: World;
+  private character: Character;
+  private objects: GameObject[] = [];
+  private controllers: Set<ReadableStreamDefaultController<string>> = new Set();
+  private history: any[] = [];
+
+  constructor() {
+    this.initializeGame();
+  }
+
+  private initializeGame() {
+    const worldWidth = 600;
+    const worldHeight = 600;
+    this.world = this.createWorld(worldWidth, worldHeight);
+    this.world = this.generateTerrain(
+      this.world,
+      [
+        { emoji: "🌳", threshold: 0.4 },
+        { emoji: "🪨", threshold: 0.5 },
+      ],
+      0.1
+    );
+
+    const emptyLocation = this.getRandomEmptyLocation(this.world);
+    this.character = {
+      ...emptyLocation,
+      emoji: emojis.character,
+      inventory: [],
+    };
+
+    // Spawn 500 diamonds at random locations
+    for (let i = 0; i < 500; i++) {
+      this.spawnAtRandom(emojis.diamond);
+    }
+  }
+
+  setController(controller: ReadableStreamDefaultController<string>) {
+    this.controllers.add(controller);
+    try {
+      // Send initial state immediately when controller is set
+      this.sendUpdate();
+    } catch (error) {
+      console.error("Error sending initial state:", error);
+      this.controllers.delete(controller);
+    }
+  }
+
+  removeController(controller: ReadableStreamDefaultController<string>) {
+    this.controllers.delete(controller);
+  }
+
+  getState() {
+    return {
+      map: this.renderAround(this.world, [this.character, ...this.objects], 6),
+      inventory: this.character.inventory.map((item) => item.emoji),
+      history: this.history,
+    };
+  }
+
+  async handleAction(action: any) {
+    try {
+      if (action.action === "move") {
+        this.moveObject(this.character, action.detail, this.world);
+        this.history.push({
+          role: "assistant",
+          content: JSON.stringify(action),
+        });
+        this.history.push({
+          role: "user",
+          content: `valid action - input your next action in JSON.\nCurrent map:\n\n${this.renderAround(
+            this.world,
+            [this.character, ...this.objects],
+            5
+          )}\n\nInventory: ${this.character.inventory
+            .map((item) => item.emoji)
+            .join(", ")}`,
+        });
+      } else if (action.action === "pick") {
+        this.pickObject(action.detail);
+        this.history.push({
+          role: "assistant",
+          content: JSON.stringify(action),
+        });
+        this.history.push({
+          role: "user",
+          content: `valid action - input your next action in JSON.\nCurrent map:\n\n${this.renderAround(
+            this.world,
+            [this.character, ...this.objects],
+            3
+          )}\n\nInventory: ${this.character.inventory
+            .map((item) => item.emoji)
+            .join(", ")}`,
+        });
+      }
+    } catch (err) {
+      this.history.push({
+        role: "user",
+        content: "This action is invalid. Please try something else.",
+      });
+    }
+
+    this.sendUpdate();
+  }
+
+  private sendUpdate() {
+    if (this.controllers.size === 0) return;
+
+    const state = this.getState();
+    const data = `data: ${JSON.stringify(state)}\n\n`;
+
+    for (const controller of this.controllers) {
+      try {
+        controller.enqueue(data);
+      } catch (error) {
+        console.error("Error sending update to client:", error);
+        this.controllers.delete(controller);
+      }
+    }
+  }
+
+  // Helper functions moved from main.js
+  private createWorld(width: number, height: number): World {
+    return {
+      width,
+      height,
+      data: new Array(width * height).fill(emojis.blank),
+    };
+  }
+
+  private getIndex(world: World, x: number, y: number): number {
+    return y * world.width + x;
+  }
+
+  private setTile(world: World, x: number, y: number, tile: string): World {
+    const newWorld = { ...world };
+    newWorld.data[this.getIndex(newWorld, x, y)] = tile;
+    return newWorld;
+  }
+
+  private getTile(world: World, x: number, y: number): string {
+    return world.data[this.getIndex(world, x, y)];
+  }
+
+  private isEmpty(world: World, x: number, y: number): boolean {
+    if (x < 0 || y < 0 || x >= world.width || y >= world.height) {
+      return false;
+    }
+    return this.getTile(world, x, y) === emojis.blank;
+  }
+
+  private getRandomEmptyLocation(world: World) {
+    let x = Math.floor(Math.random() * world.width);
+    let y = Math.floor(Math.random() * world.height);
+
+    while (!this.isEmpty(world, x, y)) {
+      x = Math.floor(Math.random() * world.width);
+      y = Math.floor(Math.random() * world.height);
+    }
+
+    return { x, y };
+  }
+
+  private moveObject(object: Character, direction: string, world: World) {
+    const moveMapping: Record<string, { dx: number; dy: number }> = {
+      up: { dx: 0, dy: -1 },
+      down: { dx: 0, dy: 1 },
+      left: { dx: -1, dy: 0 },
+      right: { dx: 1, dy: 0 },
+    };
+
+    const movement = moveMapping[direction];
+    if (
+      movement &&
+      this.isEmpty(world, object.x + movement.dx, object.y + movement.dy)
+    ) {
+      object.x += movement.dx;
+      object.y += movement.dy;
+    } else {
+      throw new Error("invalid action");
+    }
+  }
+
+  private generateTerrain(
+    world: World,
+    emojiThresholds: Array<{ emoji: string; threshold: number }>,
+    noiseScale: number
+  ): World {
+    const permutations = this.generatePermutations();
+    let newWorld = { ...world };
+
+    for (let y = 0; y < newWorld.height; y++) {
+      for (let x = 0; x < newWorld.width; x++) {
+        const noiseValue =
+          (this.perlin2d(x * noiseScale, y * noiseScale, permutations) + 1) / 2;
+
+        let found = false;
+        for (const { emoji, threshold } of emojiThresholds) {
+          if (noiseValue < threshold) {
+            newWorld = this.setTile(newWorld, x, y, emoji);
+            found = true;
+            break;
+          }
+        }
+
+        if (!found) {
+          newWorld = this.setTile(newWorld, x, y, emojis.blank);
+        }
+      }
+    }
+    return newWorld;
+  }
+
+  private generatePermutations(): number[] {
+    const p = new Array(256);
+    for (let i = 0; i < 256; i++) {
+      p[i] = Math.floor(Math.random() * 256);
+    }
+    return p.concat(p);
+  }
+
+  private fade(t: number): number {
+    return t * t * t * (t * (t * 6 - 15) + 10);
+  }
+
+  private lerp(t: number, a: number, b: number): number {
+    return a + t * (b - a);
+  }
+
+  private grad(hash: number, x: number, y: number): number {
+    const h = hash & 3;
+    const u = h < 2 ? x : y;
+    const v = h < 2 ? y : x;
+    return (h & 1 ? -u : u) + (h & 2 ? -2 * v : 2 * v);
+  }
+
+  private perlin2d(x: number, y: number, permutations: number[]): number {
+    const X = Math.floor(x) & 255;
+    const Y = Math.floor(y) & 255;
+
+    x -= Math.floor(x);
+    y -= Math.floor(y);
+
+    const u = this.fade(x);
+    const v = this.fade(y);
+
+    const A = permutations[X] + Y;
+    const B = permutations[X + 1] + Y;
+
+    return this.lerp(
+      v,
+      this.lerp(
+        u,
+        this.grad(permutations[A], x, y),
+        this.grad(permutations[B], x - 1, y)
+      ),
+      this.lerp(
+        u,
+        this.grad(permutations[A + 1], x, y - 1),
+        this.grad(permutations[B + 1], x - 1, y - 1)
+      )
+    );
+  }
+
+  private renderAround(
+    world: World,
+    objects: GameObject[],
+    distance: number
+  ): string {
+    if (!objects.length) return "No objects to render";
+    const mainObject = objects[0]; // Use first object (character) as reference point
+    console.log(
+      `Rendering around character at (${mainObject.x}, ${mainObject.y}) with ${objects.length} total objects`
+    );
+    const startPosition = {
+      x: mainObject.x - distance,
+      y: mainObject.y - distance,
+    };
+
+    const areaWidth = 2 * distance + 1;
+    const areaHeight = 2 * distance + 1;
+
+    return this.render(world, objects, startPosition, areaWidth, areaHeight);
+  }
+
+  public spawnObject(x: number, y: number, emoji: string): GameObject {
+    if (!this.isEmpty(this.world, x, y)) {
+      throw new Error("Cannot spawn object on non-empty space");
+    }
+
+    const newObject: GameObject = { x, y, emoji };
+    this.objects.push(newObject);
+    this.sendUpdate();
+    return newObject;
+  }
+
+  public spawnAtRandom(emoji: string): GameObject {
+    const location = this.getRandomEmptyLocation(this.world);
+    const obj = this.spawnObject(location.x, location.y, emoji);
+    console.log(
+      `Spawned ${emoji} at (${obj.x}, ${obj.y}). Total objects: ${this.objects.length}`
+    );
+    return obj;
+  }
+
+  private getAdjacentObject(
+    x: number,
+    y: number,
+    direction: string
+  ): GameObject | null {
+    const moveMapping: Record<string, { dx: number; dy: number }> = {
+      up: { dx: 0, dy: -1 },
+      down: { dx: 0, dy: 1 },
+      left: { dx: -1, dy: 0 },
+      right: { dx: 1, dy: 0 },
+    };
+
+    const movement = moveMapping[direction];
+    if (!movement) return null;
+
+    const targetX = x + movement.dx;
+    const targetY = y + movement.dy;
+
+    return (
+      this.objects.find((obj) => obj.x === targetX && obj.y === targetY) || null
+    );
+  }
+
+  private pickObject(direction: string) {
+    const object = this.getAdjacentObject(
+      this.character.x,
+      this.character.y,
+      direction
+    );
+
+    if (!object) {
+      throw new Error("No object found in that direction");
+    }
+
+    // Add to inventory
+    this.character.inventory.push(object);
+
+    // Remove from world objects
+    this.objects = this.objects.filter((obj) => obj !== object);
+  }
+
+  private render(
+    world: World,
+    objects: Character[] = [],
+    startPosition = { x: 0, y: 0 },
+    areaWidth = world.width,
+    areaHeight = world.height
+  ): string {
+    let output = "";
+
+    for (let y = startPosition.y; y < startPosition.y + areaHeight; y++) {
+      for (let x = startPosition.x; x < startPosition.x + areaWidth; x++) {
+        if (x >= 0 && y >= 0 && x < world.width && y < world.height) {
+          const objectAtPosition = objects.find(
+            (obj) => obj.x === x && obj.y === y
+          );
+
+          if (objectAtPosition) {
+            output += objectAtPosition.emoji;
+          } else {
+            output += this.getTile(world, x, y);
+          }
+        } else {
+          output += "🪨";
+        }
+      }
+      output += "\n";
+    }
+
+    return output;
+  }
+}

index.html

@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en" style="display: flex; align-items: center; justify-items: center; width: 100vw">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Mini World</title>
+    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" />
+</head>
+<body class="flex gap-4 items-start p-12">
+    <div class="flex flex-col gap-4">
+        <div id="world-container" class="text-3xl flex-none whitespace-nowrap leading-none"></div>
+        <div id="inventory-container" class="text-2xl"></div>
+    </div>
+    <div class="flex flex-col pt-1 gap-4">
+        <p class="font-mono rounded-lg">
+            model: <span id="model-display" class="text-blue-600">loading…</span>
+        </p>
+        <div class="gap-2 flex flex-col">
+            Agent
+            <div class="flex items-center gap-2 rounded-lg border bg-gray-50 px-3 py-2">
+                <span class="text-3xl">🚶</span>
+                <span class="text-sm text-gray-600">Explorer</span>
+            </div>
+        </div>
+        <p>Goal: Explore as much as possible</p>
+        <div id="history-container" class="flex max-w-sm flex-wrap gap-2 pt-2"></div>
+    </div>
+    <script>
+        // Fetch runtime config (model name) and reflect in UI
+        fetch('/config')
+          .then(r => r.json())
+          .then(cfg => {
+            const el = document.getElementById('model-display');
+            if (el && cfg?.model) el.textContent = cfg.model;
+          })
+          .catch(() => {});
+
+        const eventSource = new EventSource('/game-stream');
+        
+        eventSource.onmessage = (event) => {
+            const state = JSON.parse(event.data);
+            document.getElementById('world-container').innerText = state.map;
+            document.getElementById('inventory-container').innerText = 
+                `Inventory: ${state.inventory.join(' ')}`;
+            
+            const history = state.history
+                .filter(({ role }) => role === "assistant")
+                .map(({ content }) => {
+                    const parsed = JSON.parse(content);
+                    return `
+                        <div class="flex text-sm">
+                            <div class="flex items-baseline gap-2 rounded-full border bg-gray-100 px-2 py-1">
+                                <div class="h-2 w-2 flex-none rounded-full bg-green-500"></div>
+                                ${parsed.action}: <span class="text-gray-500">${parsed.detail}</span>
+                            </div>
+                        </div>`;
+                })
+                .join("");
+            
+            document.getElementById('history-container').innerHTML = history;
+        };
+
+        // Clean up when the page is closed
+        window.addEventListener('beforeunload', () => {
+            eventSource.close();
+        });
+    </script>
+</body>
+</html>

package.json

@@ -0,0 +1,14 @@
+{
+  "name": "mini-world",
+  "version": "1.0.0",
+  "author": "",
+  "main": "main.js",
+  "dependencies": {
+    "openai": "^5.18.0"
+  },
+  "description": "",
+  "license": "ISC",
+  "scripts": {
+    "start": "bun server.ts"
+  }
+}

server.ts

@@ -0,0 +1,103 @@
+import { serve } from "bun";
+import { readFile } from "fs/promises";
+import { join } from "path";
+import { GameState } from "./gameState";
+import { AIService, MODEL } from "./aiService";
+
+const PORT = parseInt(process.env.PORT || "7860");
+const ROOT_DIR = import.meta.dir;
+const gameState = new GameState(); // Single shared game state
+
+const mimeTypes: Record<string, string> = {
+  ".html": "text/html",
+  ".js": "application/javascript",
+  ".css": "text/css",
+  ".map": "application/octet-stream",
+  ".ico": "image/x-icon",
+  ".png": "image/png",
+  ".jpg": "image/jpeg",
+  ".jpeg": "image/jpeg",
+  ".gif": "image/gif",
+  ".svg": "image/svg+xml",
+  ".webp": "image/webp",
+  ".json": "application/json",
+};
+
+serve({
+  port: PORT,
+  async fetch(req) {
+    const url = new URL(req.url);
+    const pathname = url.pathname;
+
+    // Simple config endpoint to expose runtime info to the UI
+    if (pathname === "/config") {
+      return new Response(JSON.stringify({ model: MODEL }), {
+        headers: { "Content-Type": "application/json" },
+      });
+    }
+
+    // Handle SSE connection
+    if (pathname === "/game-stream") {
+      const stream = new ReadableStream<string>({
+        start(controller) {
+          gameState.setController(controller);
+          gameState.sendUpdate();
+
+          // Initial state will be sent by gameState
+
+          // Start AI agent loop
+          const runAI = async () => {
+            const state = gameState.getState();
+            const action = await AIService.getNextAction(
+              state.map,
+              state.history
+            );
+            await gameState.handleAction(action);
+
+            // Schedule next AI action
+            setTimeout(runAI, 1000);
+          };
+
+          runAI();
+        },
+        cancel() {
+          // No need to cleanup since we're using a shared state
+        },
+      });
+
+      return new Response(stream, {
+        headers: {
+          "Content-Type": "text/event-stream",
+          "Cache-Control": "no-cache",
+          Connection: "keep-alive",
+        },
+      });
+    }
+
+    // Serve static files
+    if (pathname === "/" || pathname === "/index.html") {
+      const data = await readFile(join(ROOT_DIR, "index.html"));
+      return new Response(data, {
+        headers: { "Content-Type": "text/html" },
+      });
+    }
+
+    const filePath = join(ROOT_DIR, pathname);
+    try {
+      const data = await readFile(filePath);
+      const ext = filePath.slice(filePath.lastIndexOf("."));
+      const mimeType = mimeTypes[ext] || "application/octet-stream";
+
+      return new Response(data, {
+        status: 200,
+        headers: {
+          "Content-Type": mimeType,
+        },
+      });
+    } catch (error) {
+      return new Response("Not Found", { status: 404 });
+    }
+  },
+});
+
+console.log(`Server is running at http://localhost:${PORT}`);