LLM Arena: side-by-side model comparison app using Concentrate AI

Features:
- 89 models across 10+ providers with real-time streaming
- Adjustable parameters (temperature, max tokens, top-p)
- PDF/DOCX/TXT document upload for context-aware prompts
- Markdown + LaTeX rendering, per-model stats comparison
- FastAPI backend (SSE proxy) + React/Vite/Tailwind frontend

Made-with: Cursor

.gitignore

@@ -0,0 +1,21 @@
+# Python
+backend/venv/
+backend/__pycache__/
+backend/.env
+*.pyc
+
+# Node
+frontend/node_modules/
+frontend/dist/
+
+# IDE
+.idea/
+.vscode/
+*.swp
+.DS_Store
+
+# Agent tools
+agent-tools/
+
+# Private docs
+WRITEUP.md

FINDINGS.md

@@ -0,0 +1,96 @@
+# My Findings -- Concentrate AI Developer Experience
+
+**Name:** Shiva
+**Assignment:** Use the Concentrate AI APIs to build something and share feedback.
+
+---
+
+## What I Built
+
+I built an "LLM Arena" -- a tool where you pick two models, type a prompt, and watch both respond side-by-side in real-time. The idea was to stress-test the core promise of Concentrate AI: one API, many providers, same behavior. A comparison tool is a good way to surface any inconsistencies because you're literally looking at two providers next to each other.
+
+The app is a FastAPI backend proxying SSE streams from the Concentrate API, with a React frontend rendering both streams. It also supports document upload (PDF/DOCX), tunable parameters (temperature, top-p, max tokens), and tracks stats like time-to-first-token and token counts.
+
+I used AI assistance to build the tool itself, but all the findings below are from my own experience integrating with and testing the API.
+
+---
+
+## The Good Stuff
+
+**The unified format genuinely works.** This was the thing I was most skeptical about going in. Every AI gateway claims "one API for all providers" but the normalization usually breaks down somewhere -- different error formats, inconsistent token counting, streaming quirks. With Concentrate, I was able to swap `openai/gpt-5.2` for `anthropic/claude-opus-4-6` and literally nothing in my code changed. The request body is the same, the streaming events are the same shape, the usage object comes back with the same fields. That's not easy to pull off and it's clearly where a lot of engineering effort went.
+
+**Streaming is rock solid.** I ran dozens of side-by-side comparisons across OpenAI, Anthropic, and Google models. Never saw a dropped event, never got an out-of-order sequence, never had a stream just hang. The event types are well-named and the lifecycle makes sense once you understand it. The `response.completed` event reliably carries the `usage` object, which made building the stats panel straightforward.
+
+**The auto-routing idea is really compelling.** I didn't build auto-routing into my app, but reading through the docs, the `model: "auto"` with strategy/metric configuration is something I haven't seen elsewhere. Being able to say "give me the cheapest model right now" or "give me the lowest p50 latency" at the request level is a genuinely useful primitive. I'd love to build an explorer tool around this.
+
+**The pricing data in the models API is a hidden gem.** The `/v1/models` endpoint returns per-provider pricing (input/output/cache costs per million tokens) which is incredibly useful. I only discovered this by inspecting the raw API response. More on that below.
+
+---
+
+## Where I Got Stuck
+
+### The `/v1/models` endpoint was my biggest blocker
+
+This cost me the most time and was the most frustrating part of the integration. Here's what happened:
+
+The docs show examples like `model: "openai/gpt-4o"` throughout, so I assumed the models endpoint would return objects with an `id` field in that same format. I wrote my parser expecting `{ id: "openai/gpt-4o", ... }`. Instead, the endpoint returns a flat array with a completely different shape:
+
+```json
+{
+  "slug": "gpt-5.2",
+  "name": "ChatGPT 5.2",
+  "author": { "slug": "openai" },
+  "providers": {
+    "openai": { "pricing": {...}, ... }
+  }
+}
+```
+
+There's no `id` field. There's no `data` wrapper. The model identifier is `slug`, not `id`. And to construct the string that the `/v1/responses` endpoint actually accepts (like `openai/gpt-5.2`), you have to iterate the `providers` object and concatenate `provider_key + "/" + slug` yourself.
+
+My dropdown was completely empty until I figured this out by `curl`-ing the endpoint directly and reading the raw JSON.
+
+**My suggestion:** Add an example response to the List Models docs page. Even better, include a ready-to-use `id` field in each model object so developers don't have to reverse-engineer the ID format.
+
+### Some providers fail with opaque errors
+
+Several models (e.g., `huggingface/qwen3.5-27b`) return a `response.failed` event with `"code": "server_error"` and `"message": "Internal Server Error"` -- no additional detail. Since the request goes through Concentrate's proxy, it's unclear whether the issue is on the provider side, a configuration problem, or a Concentrate routing issue. There's nothing actionable a developer can do with "Internal Server Error."
+
+**My suggestion:** Surface more context in provider errors when possible -- even something like "upstream provider returned HTTP 500" would help developers know it's not their fault and they should try a different model.
+
+### No way to tell what parameters were silently dropped
+
+Some parameters (like `search_context_size` for web search) are silently ignored for certain providers. I only know this because the docs mention it in a small note. In practice, if I send a parameter and it gets dropped, there's no way to tell from the response. A response header like `X-Ignored-Params: search_context_size` would make debugging much easier.
+
+---
+
+## Suggestions for the Docs
+
+These are things that would have saved me time:
+
+1. **Show the actual `/v1/models` response body.** The List Models page has no response example. This was the single biggest source of confusion.
+
+2. **Add a streaming quick-reference.** The streaming docs are thorough but hard to scan. A one-liner showing the event order (`created → output_item.added → content_part.added → delta* → text.done → completed`) at the top of the page would be really helpful.
+
+3. **Document the pricing fields.** The models API returns detailed pricing that's super useful for building cost-aware apps, but the docs don't mention it.
+
+4. **Add a "Building a Streaming Client" guide.** The trickiest part of the integration was correctly parsing SSE (buffering partial chunks, handling the `event:` vs `data:` lines). A copy-paste streaming helper for Python and TypeScript would save every developer 30+ minutes.
+
+5. **Document input size limits.** I sent ~20K character prompts (extracted from PDFs) with no issues, but I had no idea what the limit was. The `context_window` field exists in the model metadata but the docs don't explain how it relates to input size.
+
+---
+
+## Ideas for Features I'd Love to See
+
+- **Native document input** -- An `input_document` type (like the existing `input_image`) that accepts base64 PDF data and extracts text server-side. Right now every developer building document Q&A needs to bring their own extraction library.
+- **Auto-routing fallback** -- If the selected provider fails, automatically try the next best option instead of returning a 424.
+- **Streaming guardrails** -- Output redaction currently only works for non-streamed responses, but streaming is the default for chat UIs. Finding a way to make guardrails work with streaming would be a big deal for enterprise customers.
+- **A lightweight SDK** -- Even a minimal Python/TypeScript client that handles SSE parsing and types the response objects would make the onboarding much smoother.
+
+---
+
+## Closing Thoughts
+
+The core product is strong. The unified API format works, the streaming is reliable, and the model coverage is impressive. Most of my friction was with the docs and discoverability rather than the API itself -- which is a good sign because docs are fixable. The auto-routing and multi-provider abstraction are genuinely differentiated features that I think will matter a lot as teams start running AI workloads at scale.
+
+I'd be excited to work on improving the developer experience from the inside -- whether that's the docs, SDKs, or the API surface itself.

README.md

@@ -0,0 +1,92 @@
+# LLM Arena
+
+Side-by-side LLM comparison app powered by [Concentrate AI](https://concentrate.ai). Pick any two models from 70+ providers, send the same prompt, and watch both responses stream in real-time with latency, token, and cost stats.
+
+## Features
+
+- **Side-by-side streaming** -- two models respond to the same prompt simultaneously
+- **89 models** across 10+ providers (OpenAI, Anthropic, Google, xAI, Mistral, Cohere, etc.)
+- **Adjustable parameters** -- temperature, max output tokens, top-p via UI sliders
+- **Document upload** -- attach a PDF, DOCX, or TXT file as context for your prompt
+- **Markdown + LaTeX** -- responses render with full math support (KaTeX)
+- **Live stats** -- time-to-first-token, total time, input/output token counts with winner highlighting
+
+## Prerequisites
+
+- Python 3.10+
+- Node.js 18+
+- A Concentrate AI API key ([get one here](https://app.concentrate.ai))
+
+## Setup
+
+### 1. Backend
+
+```bash
+cd backend
+python -m venv venv
+source venv/bin/activate   # Windows: venv\Scripts\activate
+pip install -r requirements.txt
+
+# Create your .env file
+cp .env.example .env
+# Edit .env and set your CONCENTRATE_API_KEY
+```
+
+Start the backend:
+
+```bash
+uvicorn main:app --reload --port 8000
+```
+
+### 2. Frontend
+
+```bash
+cd frontend
+npm install
+npm run dev
+```
+
+The frontend runs at `http://localhost:5173` and proxies `/api/*` requests to the backend at `localhost:8000`.
+
+## Usage
+
+1. Open `http://localhost:5173`
+2. Pick two models from the dropdowns (e.g. `openai/gpt-5.2` vs `anthropic/claude-sonnet-4`)
+3. (Optional) Upload a PDF/DOCX/TXT document as context
+4. (Optional) Adjust temperature, max tokens, or top-p
+5. Type a prompt and click **Battle!**
+6. Watch both responses stream side-by-side
+7. Compare stats in the comparison bar at the bottom
+
+## Project Structure
+
+```
+backend/
+  main.py              FastAPI server with streaming proxy + file upload
+  requirements.txt     Python dependencies
+  .env.example         API key placeholder
+
+frontend/
+  src/
+    App.tsx             Main layout
+    components/
+      ModelPicker.tsx   Model selection dropdown (grouped by provider)
+      ParamsPanel.tsx   Temperature / max tokens / top-p sliders
+      FileUpload.tsx    PDF/DOCX/TXT upload with text extraction
+      PromptInput.tsx   Prompt textarea + example prompts
+      StreamPanel.tsx   Streaming response display with Markdown + LaTeX
+      StatsBar.tsx      Side-by-side stats comparison
+    hooks/
+      useStream.ts      SSE streaming hook (POST-based)
+    lib/
+      api.ts            API helper functions
+```
+
+## API Endpoints
+
+| Endpoint | Method | Description |
+|---|---|---|
+| `/api/models` | GET | Lists available models (cached 5 min) |
+| `/api/stream` | POST | SSE stream proxying Concentrate AI responses |
+| `/api/upload` | POST | Extracts text from PDF, DOCX, or TXT files |
+| `/api/health` | GET | Health check |

backend/.env.example

@@ -0,0 +1 @@
+CONCENTRATE_API_KEY=sk-cn-your-api-key-here

backend/main.py

@@ -0,0 +1,258 @@
+import io
+import json
+import os
+import time
+from typing import Optional
+
+import httpx
+import pdfplumber
+from docx import Document as DocxDocument
+from dotenv import load_dotenv
+from fastapi import FastAPI, HTTPException, UploadFile
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.responses import StreamingResponse
+from pydantic import BaseModel, Field
+
+load_dotenv()
+
+CONCENTRATE_API_KEY = os.getenv("CONCENTRATE_API_KEY", "")
+CONCENTRATE_BASE_URL = "https://api.concentrate.ai/v1"
+
+app = FastAPI(title="LLM Arena Backend")
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["http://localhost:5173", "http://127.0.0.1:5173"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+# ── Model list cache ──────────────────────────────────────────────────────────
+
+_models_cache: dict = {"data": None, "fetched_at": 0.0}
+CACHE_TTL_SECONDS = 300
+
+
+def _headers() -> dict[str, str]:
+    return {
+        "Authorization": f"Bearer {CONCENTRATE_API_KEY}",
+        "Content-Type": "application/json",
+    }
+
+
+@app.get("/api/models")
+async def list_models():
+    """Return available models, cached for 5 minutes."""
+    now = time.time()
+    if _models_cache["data"] and now - _models_cache["fetched_at"] < CACHE_TTL_SECONDS:
+        return _models_cache["data"]
+
+    if not CONCENTRATE_API_KEY:
+        raise HTTPException(status_code=500, detail="CONCENTRATE_API_KEY not set")
+
+    async with httpx.AsyncClient(timeout=15) as client:
+        resp = await client.get(f"{CONCENTRATE_BASE_URL}/models", headers=_headers())
+
+    if resp.status_code != 200:
+        raise HTTPException(status_code=resp.status_code, detail=resp.text)
+
+    raw = resp.json()
+    models_list = raw.get("data", raw) if isinstance(raw, dict) else raw
+
+    simplified = []
+    for m in models_list:
+        slug = m.get("slug", "")
+        display_name = m.get("name", slug)
+        author = m.get("author", {}).get("slug", "unknown")
+        providers = m.get("providers", {})
+
+        if providers:
+            for provider_slug in providers:
+                model_id = f"{provider_slug}/{slug}"
+                simplified.append({"id": model_id, "name": display_name, "provider": provider_slug})
+        else:
+            simplified.append({"id": slug, "name": display_name, "provider": author})
+
+    simplified.sort(key=lambda x: (x["provider"], x["name"]))
+    _models_cache["data"] = simplified
+    _models_cache["fetched_at"] = now
+    return simplified
+
+
+# ── File upload ───────────────────────────────────────────────────────────────
+
+MAX_FILE_SIZE = 10 * 1024 * 1024  # 10 MB
+ALLOWED_EXTENSIONS = {".pdf", ".docx", ".doc", ".txt", ".md"}
+
+
+def _extract_text_pdf(data: bytes) -> str:
+    with pdfplumber.open(io.BytesIO(data)) as pdf:
+        pages = []
+        for page in pdf.pages:
+            text = page.extract_text()
+            if text:
+                pages.append(text)
+        return "\n\n".join(pages)
+
+
+def _extract_text_docx(data: bytes) -> str:
+    doc = DocxDocument(io.BytesIO(data))
+    return "\n\n".join(p.text for p in doc.paragraphs if p.text.strip())
+
+
+def _extract_text_plain(data: bytes) -> str:
+    return data.decode("utf-8", errors="replace")
+
+
+@app.post("/api/upload")
+async def upload_file(file: UploadFile):
+    """Extract text from an uploaded PDF, DOCX, or TXT file."""
+    if not file.filename:
+        raise HTTPException(status_code=400, detail="No filename provided")
+
+    ext = os.path.splitext(file.filename)[1].lower()
+    if ext not in ALLOWED_EXTENSIONS:
+        raise HTTPException(
+            status_code=400,
+            detail=f"Unsupported file type '{ext}'. Allowed: {', '.join(sorted(ALLOWED_EXTENSIONS))}",
+        )
+
+    data = await file.read()
+    if len(data) > MAX_FILE_SIZE:
+        raise HTTPException(status_code=400, detail="File exceeds 10 MB limit")
+
+    try:
+        if ext == ".pdf":
+            text = _extract_text_pdf(data)
+        elif ext in (".docx", ".doc"):
+            text = _extract_text_docx(data)
+        else:
+            text = _extract_text_plain(data)
+    except Exception as e:
+        raise HTTPException(status_code=422, detail=f"Failed to extract text: {e}")
+
+    if not text.strip():
+        raise HTTPException(status_code=422, detail="No readable text found in file")
+
+    char_count = len(text)
+    word_count = len(text.split())
+
+    return {
+        "filename": file.filename,
+        "text": text,
+        "char_count": char_count,
+        "word_count": word_count,
+    }
+
+
+# ── Streaming proxy ───────────────────────────────────────────────────────────
+
+
+class StreamRequest(BaseModel):
+    model: str
+    prompt: str
+    document_text: Optional[str] = None
+    temperature: Optional[float] = Field(None, ge=0, le=2)
+    max_output_tokens: Optional[int] = Field(None, ge=1, le=16384)
+    top_p: Optional[float] = Field(None, ge=0, le=1)
+
+
+@app.post("/api/stream")
+async def stream_response(req: StreamRequest):
+    """SSE proxy: streams a Concentrate AI response back to the browser."""
+    if not CONCENTRATE_API_KEY:
+        raise HTTPException(status_code=500, detail="CONCENTRATE_API_KEY not set")
+
+    if req.document_text:
+        full_input = (
+            f"The user has provided the following document for context:\n\n"
+            f"---\n{req.document_text}\n---\n\n"
+            f"User's question/instruction: {req.prompt}"
+        )
+    else:
+        full_input = req.prompt
+
+    body: dict = {
+        "model": req.model,
+        "input": full_input,
+        "stream": True,
+    }
+    if req.temperature is not None:
+        body["temperature"] = req.temperature
+    if req.max_output_tokens is not None:
+        body["max_output_tokens"] = req.max_output_tokens
+    if req.top_p is not None:
+        body["top_p"] = req.top_p
+
+    async def event_generator():
+        start_time = time.time()
+        first_token_time: float | None = None
+
+        async with httpx.AsyncClient(timeout=httpx.Timeout(connect=10, read=120, write=10, pool=10)) as client:
+            async with client.stream(
+                "POST",
+                f"{CONCENTRATE_BASE_URL}/responses",
+                headers=_headers(),
+                json=body,
+            ) as resp:
+                if resp.status_code != 200:
+                    error_body = await resp.aread()
+                    yield f"event: error\ndata: {json.dumps({'error': error_body.decode()})}\n\n"
+                    return
+
+                async for raw_line in resp.aiter_lines():
+                    if not raw_line.strip():
+                        continue
+
+                    if raw_line.startswith("event: "):
+                        yield raw_line + "\n"
+                        continue
+
+                    if raw_line.startswith("data: "):
+                        data_str = raw_line[6:]
+                        try:
+                            event = json.loads(data_str)
+                        except json.JSONDecodeError:
+                            yield raw_line + "\n\n"
+                            continue
+
+                        event_type = event.get("type", "")
+
+                        if event_type == "response.output_text.delta" and first_token_time is None:
+                            first_token_time = time.time()
+
+                        yield raw_line + "\n\n"
+
+                        if event_type in ("response.completed", "response.failed", "response.incomplete"):
+                            end_time = time.time()
+                            stats = {
+                                "type": "arena.stats",
+                                "total_time_ms": round((end_time - start_time) * 1000),
+                                "time_to_first_token_ms": (
+                                    round((first_token_time - start_time) * 1000)
+                                    if first_token_time
+                                    else None
+                                ),
+                            }
+                            if event_type == "response.completed":
+                                usage = event.get("response", {}).get("usage", {})
+                                stats["usage"] = usage
+                            yield f"event: arena.stats\ndata: {json.dumps(stats)}\n\n"
+                    else:
+                        yield raw_line + "\n\n"
+
+    return StreamingResponse(
+        event_generator(),
+        media_type="text/event-stream",
+        headers={
+            "Cache-Control": "no-cache",
+            "Connection": "keep-alive",
+            "X-Accel-Buffering": "no",
+        },
+    )
+
+
+@app.get("/api/health")
+async def health():
+    return {"status": "ok"}

backend/requirements.txt

@@ -0,0 +1,7 @@
+fastapi
+uvicorn[standard]
+httpx
+python-dotenv
+pdfplumber
+python-docx
+python-multipart

frontend/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

frontend/eslint.config.js

@@ -0,0 +1,23 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+])

frontend/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>LLM Arena</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

frontend/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "katex": "^0.16.38",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-markdown": "^10.1.0",
+    "rehype-katex": "^7.0.1",
+    "remark-math": "^6.0.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.4",
+    "@tailwindcss/vite": "^4.2.1",
+    "@types/node": "^24.12.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.0",
+    "eslint": "^9.39.4",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^17.4.0",
+    "tailwindcss": "^4.2.1",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.56.1",
+    "vite": "^8.0.0"
+  }
+}

frontend/src/App.tsx

@@ -0,0 +1,147 @@
+import { useCallback, useEffect, useState } from "react";
+import { fetchModels, type Model } from "./lib/api";
+import { useStream, type LLMParams } from "./hooks/useStream";
+import FileUpload, { type UploadedFile } from "./components/FileUpload";
+import ModelPicker from "./components/ModelPicker";
+import ParamsPanel from "./components/ParamsPanel";
+import PromptInput from "./components/PromptInput";
+import StreamPanel from "./components/StreamPanel";
+import StatsBar from "./components/StatsBar";
+
+const DEFAULT_PARAMS: LLMParams = {
+  temperature: null,
+  maxOutputTokens: null,
+  topP: null,
+};
+
+export default function App() {
+  const [models, setModels] = useState<Model[]>([]);
+  const [modelsError, setModelsError] = useState<string | null>(null);
+  const [modelA, setModelA] = useState("");
+  const [modelB, setModelB] = useState("");
+  const [llmParams, setLlmParams] = useState<LLMParams>(DEFAULT_PARAMS);
+  const [uploadedFile, setUploadedFile] = useState<UploadedFile | null>(null);
+
+  const streamA = useStream();
+  const streamB = useStream();
+
+  const isStreaming =
+    streamA.status === "streaming" || streamB.status === "streaming";
+
+  useEffect(() => {
+    fetchModels()
+      .then(setModels)
+      .catch((err) => setModelsError(err.message));
+  }, []);
+
+  const handleBattle = useCallback(
+    (prompt: string) => {
+      if (!modelA || !modelB) return;
+      const docText = uploadedFile?.text ?? null;
+      streamA.start(modelA, prompt, llmParams, docText);
+      streamB.start(modelB, prompt, llmParams, docText);
+    },
+    [modelA, modelB, streamA, streamB, llmParams, uploadedFile],
+  );
+
+  return (
+    <div className="min-h-screen flex flex-col">
+      {/* Header */}
+      <header className="border-b border-arena-border bg-arena-surface/50 backdrop-blur-sm sticky top-0 z-10">
+        <div className="max-w-7xl mx-auto px-4 py-3 flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <h1 className="text-lg font-bold tracking-tight">
+              <span className="text-arena-accent">LLM</span> Arena
+            </h1>
+            <span className="text-[10px] text-arena-muted border border-arena-border rounded px-1.5 py-0.5">
+              powered by Concentrate AI
+            </span>
+          </div>
+          <div className="flex items-center gap-4 text-xs text-arena-muted">
+            <span>{models.length} models available</span>
+          </div>
+        </div>
+      </header>
+
+      {/* Main content */}
+      <main className="flex-1 max-w-7xl w-full mx-auto px-4 py-6 flex flex-col gap-6">
+        {/* Error state */}
+        {modelsError && (
+          <div className="bg-arena-red/10 border border-arena-red/30 rounded-xl p-4 text-sm text-arena-red">
+            Failed to load models: {modelsError}. Make sure the backend is
+            running at <code className="font-mono">localhost:8000</code>.
+          </div>
+        )}
+
+        {/* Model pickers */}
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+          <ModelPicker
+            models={models}
+            value={modelA}
+            onChange={setModelA}
+            label="Model A (Left)"
+            disabled={isStreaming}
+          />
+          <ModelPicker
+            models={models}
+            value={modelB}
+            onChange={setModelB}
+            label="Model B (Right)"
+            disabled={isStreaming}
+          />
+        </div>
+
+        {/* LLM parameters */}
+        <ParamsPanel
+          params={llmParams}
+          onChange={setLlmParams}
+          disabled={isStreaming}
+        />
+
+        {/* File upload */}
+        <FileUpload
+          file={uploadedFile}
+          onFileChange={setUploadedFile}
+          disabled={isStreaming}
+        />
+
+        {/* Prompt input */}
+        <PromptInput
+          onSubmit={handleBattle}
+          disabled={isStreaming || !modelA || !modelB}
+        />
+
+        {/* Stream panels */}
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 flex-1">
+          <StreamPanel
+            modelId={modelA}
+            text={streamA.text}
+            status={streamA.status}
+            stats={streamA.stats}
+          />
+          <StreamPanel
+            modelId={modelB}
+            text={streamB.text}
+            status={streamB.status}
+            stats={streamB.stats}
+          />
+        </div>
+
+        {/* Stats comparison bar */}
+        <StatsBar
+          modelA={modelA}
+          modelB={modelB}
+          statsA={streamA.stats}
+          statsB={streamB.stats}
+          statusA={streamA.status}
+          statusB={streamB.status}
+        />
+      </main>
+
+      {/* Footer */}
+      <footer className="border-t border-arena-border py-3 text-center text-[11px] text-arena-muted">
+        LLM Arena &middot; Testing Concentrate AI&apos;s unified model API
+      </footer>
+    </div>
+  );
+}

frontend/src/components/FileUpload.tsx

@@ -0,0 +1,127 @@
+import { useCallback, useRef, useState } from "react";
+
+export interface UploadedFile {
+  filename: string;
+  text: string;
+  charCount: number;
+  wordCount: number;
+}
+
+interface FileUploadProps {
+  file: UploadedFile | null;
+  onFileChange: (file: UploadedFile | null) => void;
+  disabled: boolean;
+}
+
+export default function FileUpload({ file, onFileChange, disabled }: FileUploadProps) {
+  const [uploading, setUploading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const handleUpload = useCallback(
+    async (e: React.ChangeEvent<HTMLInputElement>) => {
+      const selected = e.target.files?.[0];
+      if (!selected) return;
+
+      setError(null);
+      setUploading(true);
+
+      try {
+        const formData = new FormData();
+        formData.append("file", selected);
+
+        const res = await fetch("/api/upload", {
+          method: "POST",
+          body: formData,
+        });
+
+        if (!res.ok) {
+          const data = await res.json().catch(() => ({ detail: res.statusText }));
+          throw new Error(data.detail || `Upload failed (${res.status})`);
+        }
+
+        const data = await res.json();
+        onFileChange({
+          filename: data.filename,
+          text: data.text,
+          charCount: data.char_count,
+          wordCount: data.word_count,
+        });
+      } catch (err: unknown) {
+        setError(err instanceof Error ? err.message : String(err));
+      } finally {
+        setUploading(false);
+        if (inputRef.current) inputRef.current.value = "";
+      }
+    },
+    [onFileChange],
+  );
+
+  const handleRemove = () => {
+    onFileChange(null);
+    setError(null);
+  };
+
+  return (
+    <div className="border border-arena-border rounded-xl bg-arena-surface p-4">
+      <div className="flex items-center justify-between mb-2">
+        <h3 className="text-xs font-semibold text-arena-muted uppercase tracking-wider">
+          Document Context
+        </h3>
+        <span className="text-[10px] text-arena-muted">PDF, DOCX, TXT (max 10 MB)</span>
+      </div>
+
+      {!file ? (
+        <div className="flex flex-col items-center gap-2">
+          <label
+            className={`w-full flex items-center justify-center gap-2 px-4 py-3 border-2 border-dashed
+                        border-arena-border rounded-lg cursor-pointer transition-colors
+                        hover:border-arena-accent/50 hover:bg-arena-accent/5
+                        ${disabled || uploading ? "opacity-50 pointer-events-none" : ""}`}
+          >
+            <svg className="w-5 h-5 text-arena-muted" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M12 16.5V9.75m0 0 3 3m-3-3-3 3M6.75 19.5a4.5 4.5 0 0 1-1.41-8.775 5.25 5.25 0 0 1 10.233-2.33 3 3 0 0 1 3.758 3.848A3.752 3.752 0 0 1 18 19.5H6.75Z" />
+            </svg>
+            <span className="text-sm text-arena-muted">
+              {uploading ? "Extracting text..." : "Upload a document"}
+            </span>
+            <input
+              ref={inputRef}
+              type="file"
+              accept=".pdf,.docx,.doc,.txt,.md"
+              onChange={handleUpload}
+              disabled={disabled || uploading}
+              className="hidden"
+            />
+          </label>
+          {error && (
+            <p className="text-xs text-arena-red">{error}</p>
+          )}
+        </div>
+      ) : (
+        <div className="flex items-center gap-3 bg-arena-bg rounded-lg px-3 py-2">
+          <svg className="w-5 h-5 text-arena-accent shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+            <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
+          </svg>
+          <div className="flex-1 min-w-0">
+            <p className="text-sm font-medium text-arena-text truncate">{file.filename}</p>
+            <p className="text-[11px] text-arena-muted">
+              {file.wordCount.toLocaleString()} words &middot; {file.charCount.toLocaleString()} chars
+            </p>
+          </div>
+          <button
+            onClick={handleRemove}
+            disabled={disabled}
+            className="p-1 rounded hover:bg-arena-border transition-colors text-arena-muted hover:text-arena-red
+                       disabled:opacity-50 disabled:cursor-not-allowed"
+            title="Remove file"
+          >
+            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/components/ModelPicker.tsx

@@ -0,0 +1,75 @@
+import type { Model } from "../lib/api";
+
+interface ModelPickerProps {
+  models: Model[];
+  value: string;
+  onChange: (modelId: string) => void;
+  label: string;
+  disabled?: boolean;
+}
+
+const PROVIDER_COLORS: Record<string, string> = {
+  openai: "bg-green-600",
+  anthropic: "bg-orange-600",
+  google: "bg-blue-600",
+  xai: "bg-purple-600",
+  mistral: "bg-cyan-600",
+  cohere: "bg-pink-600",
+  aws: "bg-yellow-600",
+  azure: "bg-sky-600",
+  cloudflare: "bg-amber-600",
+};
+
+function providerColor(provider: string): string {
+  return PROVIDER_COLORS[provider] ?? "bg-gray-600";
+}
+
+export default function ModelPicker({
+  models,
+  value,
+  onChange,
+  label,
+  disabled,
+}: ModelPickerProps) {
+  const grouped = models.reduce<Record<string, Model[]>>((acc, m) => {
+    (acc[m.provider] ??= []).push(m);
+    return acc;
+  }, {});
+
+  const providers = Object.keys(grouped).sort();
+
+  return (
+    <div className="flex flex-col gap-1.5">
+      <label className="text-xs font-medium text-arena-muted uppercase tracking-wider">
+        {label}
+      </label>
+      <select
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        disabled={disabled}
+        className="bg-arena-surface border border-arena-border rounded-lg px-3 py-2.5 text-sm
+                   text-arena-text focus:outline-none focus:border-arena-accent
+                   disabled:opacity-50 disabled:cursor-not-allowed appearance-none
+                   cursor-pointer"
+      >
+        <option value="">Select a model...</option>
+        {providers.map((provider) => (
+          <optgroup key={provider} label={provider.toUpperCase()}>
+            {grouped[provider].map((m) => (
+              <option key={m.id} value={m.id}>
+                {m.name}
+              </option>
+            ))}
+          </optgroup>
+        ))}
+      </select>
+      {value && (
+        <span
+          className={`inline-flex self-start items-center px-2 py-0.5 rounded text-[10px] font-semibold uppercase text-white ${providerColor(value.split("/")[0])}`}
+        >
+          {value.split("/")[0]}
+        </span>
+      )}
+    </div>
+  );
+}

frontend/src/components/ParamsPanel.tsx

@@ -0,0 +1,117 @@
+import type { LLMParams } from "../hooks/useStream";
+
+interface ParamsPanelProps {
+  params: LLMParams;
+  onChange: (params: LLMParams) => void;
+  disabled: boolean;
+}
+
+function Slider({
+  label,
+  value,
+  defaultValue,
+  min,
+  max,
+  step,
+  onChange,
+  disabled,
+  format,
+}: {
+  label: string;
+  value: number | null;
+  defaultValue: number;
+  min: number;
+  max: number;
+  step: number;
+  onChange: (v: number | null) => void;
+  disabled: boolean;
+  format?: (v: number) => string;
+}) {
+  const active = value != null;
+  const displayValue = value ?? defaultValue;
+  const fmt = format ?? ((v: number) => String(v));
+
+  return (
+    <div className="flex flex-col gap-1.5">
+      <div className="flex items-center justify-between">
+        <label className="flex items-center gap-2">
+          <input
+            type="checkbox"
+            checked={active}
+            onChange={(e) => onChange(e.target.checked ? defaultValue : null)}
+            disabled={disabled}
+            className="rounded border-arena-border bg-arena-surface text-arena-accent
+                       focus:ring-arena-accent focus:ring-offset-0 w-3.5 h-3.5"
+          />
+          <span className="text-xs text-arena-muted">{label}</span>
+        </label>
+        {active && (
+          <span className="text-xs font-mono text-arena-text">
+            {fmt(displayValue)}
+          </span>
+        )}
+      </div>
+      {active && (
+        <input
+          type="range"
+          min={min}
+          max={max}
+          step={step}
+          value={displayValue}
+          onChange={(e) => onChange(parseFloat(e.target.value))}
+          disabled={disabled}
+          className="w-full h-1.5 rounded-full appearance-none cursor-pointer
+                     bg-arena-border accent-arena-accent
+                     disabled:opacity-50 disabled:cursor-not-allowed"
+        />
+      )}
+    </div>
+  );
+}
+
+export default function ParamsPanel({
+  params,
+  onChange,
+  disabled,
+}: ParamsPanelProps) {
+  return (
+    <div className="border border-arena-border rounded-xl bg-arena-surface p-4">
+      <h3 className="text-xs font-semibold text-arena-muted uppercase tracking-wider mb-3">
+        Parameters
+      </h3>
+      <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+        <Slider
+          label="Temperature"
+          value={params.temperature}
+          defaultValue={1.0}
+          min={0}
+          max={2}
+          step={0.05}
+          onChange={(v) => onChange({ ...params, temperature: v })}
+          disabled={disabled}
+        />
+        <Slider
+          label="Max Output Tokens"
+          value={params.maxOutputTokens}
+          defaultValue={2048}
+          min={64}
+          max={16384}
+          step={64}
+          onChange={(v) => onChange({ ...params, maxOutputTokens: v != null ? Math.round(v) : null })}
+          disabled={disabled}
+          format={(v) => v.toLocaleString()}
+        />
+        <Slider
+          label="Top P"
+          value={params.topP}
+          defaultValue={1.0}
+          min={0}
+          max={1}
+          step={0.05}
+          onChange={(v) => onChange({ ...params, topP: v })}
+          disabled={disabled}
+        />
+      </div>
+    </div>
+  );
+}

frontend/src/components/PromptInput.tsx

@@ -0,0 +1,82 @@
+import { useState } from "react";
+
+interface PromptInputProps {
+  onSubmit: (prompt: string) => void;
+  disabled: boolean;
+}
+
+const EXAMPLE_PROMPTS = [
+  "Explain quantum entanglement to a 10-year-old",
+  "Write a Python function to find the longest palindromic substring",
+  "Compare the pros and cons of microservices vs monoliths",
+  "Write a short poem about artificial intelligence",
+  "Explain how a transformer neural network works",
+];
+
+export default function PromptInput({ onSubmit, disabled }: PromptInputProps) {
+  const [prompt, setPrompt] = useState("");
+
+  const handleSubmit = () => {
+    const trimmed = prompt.trim();
+    if (!trimmed) return;
+    onSubmit(trimmed);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+      e.preventDefault();
+      handleSubmit();
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="relative">
+        <textarea
+          value={prompt}
+          onChange={(e) => setPrompt(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder="Enter your prompt here..."
+          disabled={disabled}
+          rows={3}
+          className="w-full bg-arena-surface border border-arena-border rounded-xl px-4 py-3
+                     text-sm text-arena-text placeholder:text-arena-muted/50
+                     focus:outline-none focus:border-arena-accent resize-none
+                     disabled:opacity-50 disabled:cursor-not-allowed"
+        />
+        <div className="absolute bottom-2 right-2 flex items-center gap-2">
+          <span className="text-[10px] text-arena-muted hidden sm:inline">
+            {navigator.platform.includes("Mac") ? "Cmd" : "Ctrl"}+Enter
+          </span>
+          <button
+            onClick={handleSubmit}
+            disabled={disabled || !prompt.trim()}
+            className="px-4 py-1.5 bg-arena-accent hover:bg-arena-accent-dim rounded-lg
+                       text-xs font-semibold text-white transition-colors
+                       disabled:opacity-40 disabled:cursor-not-allowed"
+          >
+            {disabled ? "Streaming..." : "Battle!"}
+          </button>
+        </div>
+      </div>
+
+      <div className="flex flex-wrap gap-2">
+        <span className="text-[10px] text-arena-muted uppercase tracking-wider self-center">
+          Try:
+        </span>
+        {EXAMPLE_PROMPTS.map((ex) => (
+          <button
+            key={ex}
+            onClick={() => setPrompt(ex)}
+            disabled={disabled}
+            className="text-[11px] px-2.5 py-1 rounded-full border border-arena-border
+                       text-arena-muted hover:text-arena-text hover:border-arena-accent/50
+                       transition-colors disabled:opacity-40 truncate max-w-[200px]"
+          >
+            {ex}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}

frontend/src/components/StatsBar.tsx

@@ -0,0 +1,132 @@
+import type { StreamStats, StreamStatus } from "../hooks/useStream";
+
+interface StatsBarProps {
+  modelA: string;
+  modelB: string;
+  statsA: StreamStats;
+  statsB: StreamStats;
+  statusA: StreamStatus;
+  statusB: StreamStatus;
+}
+
+function Metric({
+  label,
+  valueA,
+  valueB,
+  format,
+  lowerIsBetter = true,
+}: {
+  label: string;
+  valueA: number | null;
+  valueB: number | null;
+  format: (v: number) => string;
+  lowerIsBetter?: boolean;
+}) {
+  if (valueA == null && valueB == null) return null;
+
+  let winnerA = false;
+  let winnerB = false;
+
+  if (valueA != null && valueB != null) {
+    if (lowerIsBetter) {
+      winnerA = valueA < valueB;
+      winnerB = valueB < valueA;
+    } else {
+      winnerA = valueA > valueB;
+      winnerB = valueB > valueA;
+    }
+  }
+
+  return (
+    <div className="flex flex-col items-center gap-1 min-w-[120px]">
+      <span className="text-[10px] text-arena-muted uppercase tracking-wider">
+        {label}
+      </span>
+      <div className="flex items-center gap-4">
+        <span
+          className={`text-sm font-mono font-semibold ${winnerA ? "text-arena-green" : "text-arena-text"}`}
+        >
+          {valueA != null ? format(valueA) : "-"}
+          {winnerA && " *"}
+        </span>
+        <span className="text-arena-border text-xs">vs</span>
+        <span
+          className={`text-sm font-mono font-semibold ${winnerB ? "text-arena-green" : "text-arena-text"}`}
+        >
+          {valueB != null ? format(valueB) : "-"}
+          {winnerB && " *"}
+        </span>
+      </div>
+    </div>
+  );
+}
+
+export default function StatsBar({
+  modelA,
+  modelB,
+  statsA,
+  statsB,
+  statusA,
+  statusB,
+}: StatsBarProps) {
+  const bothDone = statusA === "done" && statusB === "done";
+  const anyStarted = statusA !== "idle" || statusB !== "idle";
+
+  if (!anyStarted) return null;
+
+  return (
+    <div className="border border-arena-border rounded-xl bg-arena-surface p-4">
+      <div className="flex items-center justify-between mb-3">
+        <h3 className="text-xs font-semibold text-arena-muted uppercase tracking-wider">
+          Comparison
+        </h3>
+        {bothDone && (
+          <span className="text-[10px] text-arena-green font-medium">
+            * = winner in category
+          </span>
+        )}
+      </div>
+
+      <div className="flex items-center justify-between mb-2 px-4">
+        <span className="text-xs font-medium text-arena-accent w-[120px] text-center truncate">
+          {modelA.split("/").pop()}
+        </span>
+        <div className="flex-1" />
+        <span className="text-xs font-medium text-arena-accent w-[120px] text-center truncate">
+          {modelB.split("/").pop()}
+        </span>
+      </div>
+
+      <div className="flex flex-wrap justify-center gap-6">
+        <Metric
+          label="Time to First Token"
+          valueA={statsA.timeToFirstTokenMs}
+          valueB={statsB.timeToFirstTokenMs}
+          format={(v) => `${v}ms`}
+          lowerIsBetter
+        />
+        <Metric
+          label="Total Time"
+          valueA={statsA.totalTimeMs}
+          valueB={statsB.totalTimeMs}
+          format={(v) => `${(v / 1000).toFixed(1)}s`}
+          lowerIsBetter
+        />
+        <Metric
+          label="Output Tokens"
+          valueA={statsA.outputTokens}
+          valueB={statsB.outputTokens}
+          format={(v) => `${v}`}
+          lowerIsBetter={false}
+        />
+        <Metric
+          label="Total Tokens"
+          valueA={statsA.totalTokens}
+          valueB={statsB.totalTokens}
+          format={(v) => `${v}`}
+          lowerIsBetter
+        />
+      </div>
+    </div>
+  );
+}

frontend/src/components/StreamPanel.tsx

@@ -0,0 +1,123 @@
+import { useMemo } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkMath from "remark-math";
+import rehypeKatex from "rehype-katex";
+import "katex/dist/katex.min.css";
+import type { StreamStatus, StreamStats } from "../hooks/useStream";
+
+/** Normalize all LaTeX delimiter styles to $/$$ so remark-math can parse them. */
+function normalizeLatex(text: string): string {
+  // \[ ... \]  →  $$ ... $$  (display math)
+  let result = text.replace(/\\\[([\s\S]*?)\\\]/g, (_match, inner) => `$$${inner}$$`);
+  // \( ... \)  →  $ ... $    (inline math)
+  result = result.replace(/\\\(([\s\S]*?)\\\)/g, (_match, inner) => `$${inner}$`);
+  return result;
+}
+
+interface StreamPanelProps {
+  modelId: string;
+  text: string;
+  status: StreamStatus;
+  stats: StreamStats;
+}
+
+function StatusBadge({ status }: { status: StreamStatus }) {
+  const config: Record<StreamStatus, { label: string; className: string }> = {
+    idle: { label: "Ready", className: "bg-arena-border text-arena-muted" },
+    streaming: {
+      label: "Streaming",
+      className: "bg-arena-accent/20 text-arena-accent",
+    },
+    done: {
+      label: "Complete",
+      className: "bg-arena-green/20 text-arena-green",
+    },
+    error: { label: "Error", className: "bg-arena-red/20 text-arena-red" },
+  };
+
+  const { label, className } = config[status];
+
+  return (
+    <span
+      className={`inline-flex items-center gap-1.5 px-2 py-0.5 rounded text-[11px] font-medium ${className}`}
+    >
+      {status === "streaming" && (
+        <span className="w-1.5 h-1.5 rounded-full bg-arena-accent animate-pulse-dot" />
+      )}
+      {label}
+    </span>
+  );
+}
+
+export default function StreamPanel({
+  modelId,
+  text,
+  status,
+  stats,
+}: StreamPanelProps) {
+  const provider = modelId.split("/")[0] || "";
+  const modelName = modelId.split("/").slice(1).join("/") || modelId;
+  const normalizedText = useMemo(() => normalizeLatex(text), [text]);
+
+  return (
+    <div className="flex flex-col h-full border border-arena-border rounded-xl bg-arena-surface overflow-hidden">
+      {/* Header */}
+      <div className="flex items-center justify-between px-4 py-3 border-b border-arena-border bg-arena-surface/50">
+        <div className="flex items-center gap-2">
+          <span className="font-semibold text-sm">{modelName || "No model"}</span>
+          {provider && (
+            <span className="text-[10px] text-arena-muted uppercase tracking-wide">
+              {provider}
+            </span>
+          )}
+        </div>
+        <StatusBadge status={status} />
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 overflow-y-auto p-4 min-h-[300px]">
+        {status === "idle" && !text && (
+          <p className="text-arena-muted text-sm italic">
+            Select a model and enter a prompt to begin...
+          </p>
+        )}
+        {text && (
+          <div className="markdown-body text-sm leading-relaxed">
+            <ReactMarkdown remarkPlugins={[remarkMath]} rehypePlugins={[rehypeKatex]}>
+              {normalizedText}
+            </ReactMarkdown>
+          </div>
+        )}
+        {status === "streaming" && (
+          <span className="inline-block w-2 h-4 bg-arena-accent animate-pulse-dot ml-0.5 align-text-bottom" />
+        )}
+      </div>
+
+      {/* Stats footer */}
+      {status !== "idle" && (
+        <div className="flex items-center gap-4 px-4 py-2 border-t border-arena-border text-[11px] text-arena-muted">
+          {stats.timeToFirstTokenMs != null && (
+            <span>
+              TTFT: <strong className="text-arena-text">{stats.timeToFirstTokenMs}ms</strong>
+            </span>
+          )}
+          {stats.totalTimeMs != null && (
+            <span>
+              Total: <strong className="text-arena-text">{(stats.totalTimeMs / 1000).toFixed(1)}s</strong>
+            </span>
+          )}
+          {stats.inputTokens != null && (
+            <span>
+              In: <strong className="text-arena-text">{stats.inputTokens}</strong>
+            </span>
+          )}
+          {stats.outputTokens != null && (
+            <span>
+              Out: <strong className="text-arena-text">{stats.outputTokens}</strong>
+            </span>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/hooks/useStream.ts

@@ -0,0 +1,149 @@
+import { useCallback, useRef, useState } from "react";
+
+export type StreamStatus = "idle" | "streaming" | "done" | "error";
+
+export interface StreamStats {
+  timeToFirstTokenMs: number | null;
+  totalTimeMs: number | null;
+  inputTokens: number | null;
+  outputTokens: number | null;
+  totalTokens: number | null;
+}
+
+const EMPTY_STATS: StreamStats = {
+  timeToFirstTokenMs: null,
+  totalTimeMs: null,
+  inputTokens: null,
+  outputTokens: null,
+  totalTokens: null,
+};
+
+export interface LLMParams {
+  temperature: number | null;
+  maxOutputTokens: number | null;
+  topP: number | null;
+}
+
+export function useStream() {
+  const [text, setText] = useState("");
+  const [status, setStatus] = useState<StreamStatus>("idle");
+  const [stats, setStats] = useState<StreamStats>(EMPTY_STATS);
+  const abortRef = useRef<AbortController | null>(null);
+
+  const stop = useCallback(() => {
+    abortRef.current?.abort();
+    abortRef.current = null;
+  }, []);
+
+  const start = useCallback(
+    (model: string, prompt: string, llmParams?: LLMParams, documentText?: string | null) => {
+    stop();
+
+    setText("");
+    setStatus("streaming");
+    setStats(EMPTY_STATS);
+
+    const controller = new AbortController();
+    abortRef.current = controller;
+
+    const body: Record<string, unknown> = { model, prompt };
+    if (documentText) body.document_text = documentText;
+    if (llmParams?.temperature != null) body.temperature = llmParams.temperature;
+    if (llmParams?.maxOutputTokens != null) body.max_output_tokens = llmParams.maxOutputTokens;
+    if (llmParams?.topP != null) body.top_p = llmParams.topP;
+
+    (async () => {
+      try {
+        const res = await fetch("/api/stream", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(body),
+          signal: controller.signal,
+        });
+
+        if (!res.ok || !res.body) {
+          const errText = await res.text();
+          setText(`Error ${res.status}: ${errText}`);
+          setStatus("error");
+          return;
+        }
+
+        const reader = res.body.getReader();
+        const decoder = new TextDecoder();
+        let buffer = "";
+
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+
+          buffer += decoder.decode(value, { stream: true });
+          const lines = buffer.split("\n");
+          buffer = lines.pop() ?? "";
+
+          for (const line of lines) {
+            if (!line.startsWith("data: ")) continue;
+            const dataStr = line.slice(6);
+
+            let event: Record<string, unknown>;
+            try {
+              event = JSON.parse(dataStr);
+            } catch {
+              continue;
+            }
+
+            const type = event.type as string;
+
+            if (type === "response.output_text.delta") {
+              const delta = event.delta as string;
+              setText((prev) => prev + delta);
+            }
+
+            if (type === "response.failed" || type === "error") {
+              const resp = event.response as Record<string, unknown> | undefined;
+              const errObj = resp?.error as Record<string, unknown> | undefined;
+              const code = errObj?.code ?? (event.code as string | undefined) ?? "unknown";
+              const msg = errObj?.message
+                ?? (event.message as string | undefined)
+                ?? "Request failed";
+              const model = (resp?.model ?? event.model ?? "") as string;
+              setText((prev) =>
+                prev + `\n\n**Error (${code}):** ${msg}` + (model ? `\n\nModel: \`${model}\`` : ""),
+              );
+              setStatus("error");
+            }
+
+            if (type === "arena.stats") {
+              const usage = (event.usage ?? {}) as Record<string, number>;
+              setStats({
+                timeToFirstTokenMs:
+                  (event.time_to_first_token_ms as number) ?? null,
+                totalTimeMs: (event.total_time_ms as number) ?? null,
+                inputTokens: usage.input_tokens ?? null,
+                outputTokens: usage.output_tokens ?? null,
+                totalTokens: usage.total_tokens ?? null,
+              });
+            }
+
+            if (
+              type === "response.completed" ||
+              type === "response.incomplete"
+            ) {
+              setStatus("done");
+            }
+          }
+        }
+
+        setStatus((prev) => (prev === "streaming" ? "done" : prev));
+      } catch (err: unknown) {
+        if (err instanceof DOMException && err.name === "AbortError") {
+          setStatus("done");
+          return;
+        }
+        setText(`Connection error: ${err}`);
+        setStatus("error");
+      }
+    })();
+  }, [stop]);
+
+  return { text, status, stats, start, stop };
+}

frontend/src/index.css

@@ -0,0 +1,83 @@
+@import "tailwindcss";
+
+@theme {
+  --color-arena-bg: #0f1117;
+  --color-arena-surface: #1a1d27;
+  --color-arena-border: #2a2d3a;
+  --color-arena-accent: #6366f1;
+  --color-arena-accent-dim: #4f46e5;
+  --color-arena-green: #22c55e;
+  --color-arena-red: #ef4444;
+  --color-arena-text: #e2e8f0;
+  --color-arena-muted: #94a3b8;
+}
+
+body {
+  background-color: var(--color-arena-bg);
+  color: var(--color-arena-text);
+  font-family: "Inter", system-ui, -apple-system, sans-serif;
+}
+
+@keyframes pulse-dot {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+}
+
+.animate-pulse-dot {
+  animation: pulse-dot 1.2s ease-in-out infinite;
+}
+
+.markdown-body h1, .markdown-body h2, .markdown-body h3 {
+  font-weight: 600;
+  margin-top: 1em;
+  margin-bottom: 0.5em;
+}
+
+.markdown-body p {
+  margin-bottom: 0.75em;
+  line-height: 1.7;
+}
+
+.markdown-body code {
+  background: var(--color-arena-border);
+  padding: 0.15em 0.4em;
+  border-radius: 4px;
+  font-size: 0.875em;
+}
+
+.markdown-body pre {
+  background: var(--color-arena-bg);
+  padding: 1em;
+  border-radius: 8px;
+  overflow-x: auto;
+  margin-bottom: 1em;
+}
+
+.markdown-body pre code {
+  background: none;
+  padding: 0;
+}
+
+.markdown-body ul, .markdown-body ol {
+  padding-left: 1.5em;
+  margin-bottom: 0.75em;
+}
+
+.markdown-body li {
+  margin-bottom: 0.25em;
+}
+
+.markdown-body .katex-display {
+  margin: 1em 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.markdown-body .katex {
+  color: var(--color-arena-text);
+  font-size: 1.1em;
+}
+
+.markdown-body .katex-display > .katex {
+  font-size: 1.21em;
+}

frontend/src/lib/api.ts

@@ -0,0 +1,13 @@
+export interface Model {
+  id: string;
+  name: string;
+  provider: string;
+}
+
+export async function fetchModels(): Promise<Model[]> {
+  const res = await fetch("/api/models");
+  if (!res.ok) {
+    throw new Error(`Failed to fetch models: ${res.status}`);
+  }
+  return res.json();
+}

frontend/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "./index.css";
+import App from "./App";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);

frontend/tsconfig.app.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2023",
+    "useDefineForClassFields": true,
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

frontend/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

frontend/tsconfig.node.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

frontend/vite.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  server: {
+    proxy: {
+      '/api': 'http://localhost:8000',
+    },
+  },
+})