feat: add OpenAI-compatible API proxy with NVIDIA and Google integration

- Created .env.example for environment variable configuration
- Added .gitignore to exclude sensitive files and directories
- Implemented OpenCode plugin for knowledge graph reminders
- Documented agent behavior and product details in AGENTS.md and PRODUCT.md
- Defined design principles and layout in DESIGN.md
- Configured application settings in config.py
- Developed main application entry point in main.py
- Established proxy authentication and request handling in auth.py and client.py
- Registered providers and their configurations in providers.py
- Set up FastAPI router with endpoints for chat completions and health checks in router.py
- Included requirements.txt for dependency management
- Built static HTML dashboard for user interface

.env.example

@@ -0,0 +1,16 @@
+# Real provider API keys (keep these secret)
+REAL_NVIDIA_KEY=nvapi-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+REAL_GOOGLE_KEY=AIzaxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+
+# Proxy keys your client apps will use
+# Generate with: python -c "import secrets; print('sk-nvidia-' + secrets.token_urlsafe(32))"
+SK_NVIDIA_KEY=sk-nvidia-xxxxxxxxxxxxxxxxxxxx
+SK_GOOGLE_KEY=sk-google-xxxxxxxxxxxxxxxxxxxx
+
+# Server
+HOST=127.0.0.1
+PORT=8000
+
+# NVIDIA async polling (when a 202 response is returned)
+POLL_INTERVAL_SECONDS=2
+POLL_MAX_ATTEMPTS=60

.gitignore

@@ -0,0 +1,30 @@
+# Secrets
+.env
+
+# Python
+__pycache__/
+*.pyc
+*.pyo
+*.pyd
+*.egg-info/
+dist/
+build/
+.eggs/
+
+# Virtual env
+.venv/
+venv/
+
+# Graphify
+graphify-out/
+.graphify_*.json
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# OS
+.DS_Store
+Thumbs.db

.opencode/opencode.json

@@ -0,0 +1,5 @@
+{
+  "plugin": [
+    ".opencode/plugins/graphify.js"
+  ]
+}

.opencode/plugins/graphify.js

@@ -0,0 +1,28 @@
+// graphify OpenCode plugin
+// Injects a knowledge graph reminder before bash tool calls when the graph exists.
+//
+// IMPORTANT: keep the reminder string free of backticks and $(...) constructs.
+// The hook prepends `echo "<reminder>" && <cmd>` to the user's bash command;
+// backticks inside the double-quoted echo trigger bash command substitution,
+// which both corrupts tool output and silently executes the very graphify
+// command we are only suggesting. Plain words render fine in opencode's TUI.
+import { existsSync } from "fs";
+import { join } from "path";
+
+export const GraphifyPlugin = async ({ directory }) => {
+  let reminded = false;
+
+  return {
+    "tool.execute.before": async (input, output) => {
+      if (reminded) return;
+      if (!existsSync(join(directory, "graphify-out", "graph.json"))) return;
+
+      if (input.tool === "bash") {
+        output.args.command =
+          'echo "[graphify] knowledge graph at graphify-out/. For focused questions, run graphify query with your question (scoped subgraph, usually much smaller than GRAPH_REPORT.md) instead of grepping raw files. Read GRAPH_REPORT.md only for broad architecture context." && ' +
+          output.args.command;
+        reminded = true;
+      }
+    },
+  };
+};

AGENTS.md

@@ -0,0 +1,43 @@
+## graphify
+
+This project has a knowledge graph at graphify-out/ with god nodes, community structure, and cross-file relationships.
+
+When the user types `/graphify`, invoke the `skill` tool with `skill: "graphify"` before doing anything else.
+
+Rules:
+- For codebase questions, first run `graphify query "<question>"` when graphify-out/graph.json exists. Use `graphify path "<A>" "<B>"` for relationships and `graphify explain "<concept>"` for focused concepts. These return a scoped subgraph, usually much smaller than GRAPH_REPORT.md or raw grep output.
+- Dirty graphify-out/ files are expected after hooks or incremental updates; dirty graph files are not a reason to skip graphify. Only skip graphify if the task is about stale or incorrect graph output, or the user explicitly says not to use it.
+- If graphify-out/wiki/index.md exists, use it for broad navigation instead of raw source browsing.
+- Read graphify-out/GRAPH_REPORT.md only for broad architecture review or when query/path/explain do not surface enough context.
+- After modifying code, run `graphify update .` to keep the graph current (AST-only, no API cost).
+
+## OpenAI API Proxy
+
+FastAPI proxy that routes OpenAI-compatible chat requests to NVIDIA NIM or Google AI Studio based on which `sk-{provider}` key the client uses.
+
+### Setup & run
+- Install: `pip install -r requirements.txt`
+- Copy `.env.example` to `.env` and fill in real provider API keys + proxy keys
+- Run: `python main.py` (uvicorn, http://127.0.0.1:8000)
+- Client calls `POST /v1/chat/completions` with `Authorization: Bearer sk-{provider}-...`
+
+### Architecture
+- `config.py` — loads `.env`, exposes `PROVIDER_KEYS` (proxy→real key mapping) and `REAL_KEYS`
+- `proxy/providers.py` — `Provider` dataclass registry; adds `env_real_key` field name, `auth_header`, `handles_202` flag
+- `proxy/auth.py` — `resolve_provider()` matches Bearer token against `PROVIDER_KEYS`; `get_real_key()` reads the real API key from env
+- `proxy/client.py` — `forward_request()` streams or polls upstream; NVIDIA returns HTTP 202 then polls `/v1/status/{id}`
+- `proxy/router.py` — FastAPI router with `/v1/models`, `/v1/chat/completions`, `/v1/health`, `/v1/keys`; `create_app()` factory mounts static files
+
+### Provider quirks
+- **NVIDIA**: Bearer token auth, async (202→poll), base URL `https://integrate.api.nvidia.com`
+- **Google**: `x-goog-api-key` header (no Bearer), no 202 handling, base URL `https://generativelanguage.googleapis.com/v1beta/openai`
+
+### Adding a new provider
+1. Add `Provider(...)` to `proxy/providers.py:PROVIDERS` dict
+2. Add `REAL_*_KEY` and `SK_*_KEY` env vars in `config.py` and `.env.example`
+3. Add model list to `MODELS` dict in `proxy/router.py`
+
+### Constraints
+- No tests, no CI, no linter/formatter config — not yet set up
+- No database — pure HTTP proxy
+- Timeouts: connect=10s, read=180s; NVIDIA poll interval=2s, max 60 attempts

DESIGN.md

@@ -0,0 +1,49 @@
+# Design
+
+## Theme
+
+Dark-mode personal devtool dashboard. Mood: "precise switchboard at night."
+
+## Color strategy
+
+Restrained: near-black surface, off-white text, one warm primary, one cool functional accent.
+
+```css
+:root {
+  --bg: oklch(0.08 0 0);          /* deep void, not pure black */
+  --surface: oklch(0.12 0 0);      /* cards, panels */
+  --surface-2: oklch(0.16 0 0);    /* hovered/elevated cards */
+  --ink: oklch(0.94 0 0);          /* primary text */
+  --muted: oklch(0.62 0 0);        /* secondary text */
+  --primary: oklch(0.68 0.13 38);  /* warm coral — links, active states */
+  --primary-text: oklch(1 0 0);    /* white text on primary fills */
+  --accent: oklch(0.72 0.12 175);  /* teal — status, success, online */
+  --warning: oklch(0.76 0.12 85);  /* amber — caution states */
+  --danger: oklch(0.62 0.16 25);   /* red-orange — errors */
+  --border: oklch(0.22 0 0);       /* subtle dividers */
+}
+```
+
+## Typography
+
+- **Body/UI**: system-ui, sans-serif
+- **Code/keys/endpoints**: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace
+- **Scale**: tight, functional. Page title is the only large type; everything else is small-to-base.
+
+## Layout
+
+- Single-column centered container, max-width 720px.
+- Generous vertical rhythm between sections.
+- Cards are rare; prefer grouped rows with clear labels.
+- One prominent hero section at top: status indicator + endpoint URL.
+
+## Components
+
+- **Status pill**: small rounded badge with dot + label.
+- **Key row**: label + masked key + copy/visibility toggles.
+- **Provider card**: compact block with provider name, configured flag, sample model.
+- **Code block**: dark panel with monospace text and copy button.
+
+## Motion
+
+Low intensity. Subtle hover transitions on interactive elements (150ms ease-out). No entrance animations that gate content. Respect `prefers-reduced-motion`.

PRODUCT.md

@@ -0,0 +1,36 @@
+# Product
+
+## Register
+
+product
+
+## Users
+
+A single technical user (the owner) running this proxy locally or on cheap personal hosting. They are comfortable editing `.env`, reading logs, and pointing client apps at a custom base URL. Context: personal experimentation, not production operations.
+
+## Product Purpose
+
+A lightweight OpenAI-compatible API gateway that forwards chat/completion requests to the right AI provider based on which `sk-` proxy key the client uses. One server, one set of routes, multiple backends (NVIDIA NIM, Google AI Studio, extensible to more). It makes apps that only accept OpenAI-style keys work with non-OpenAI providers.
+
+## Brand Personality
+
+Minimal, capable, unobtrusive. The interface should feel like a well-organized shelf — everything in its place, nothing shouting.
+
+## Anti-references
+
+- Generic admin dashboards with dense data tables and sidebar navigation.
+- AI-purple gradients, neon glows, or glassmorphism used decoratively.
+- Bootstrap-style gray cards with identical spacing repeated endlessly.
+- Landing-page hero sections with big marketing copy.
+
+## Design Principles
+
+1. **Clarity first**: the most important state (is the proxy running? which providers are configured?) should be visible at a glance.
+2. **No noise**: show only what the owner needs to verify setup. No analytics charts, no user management, no feature lists.
+3. **Respect the user's time**: copy-paste ready examples, masked keys, one-click visibility toggles.
+4. **Information should be scannable**: use typography and spacing to group related facts, not borders and boxes.
+5. **Personal, not corporate**: this is a single-user tool; the UI can be calm and opinionated rather than neutral-by-committee.
+
+## Accessibility & Inclusion
+
+WCAG AA contrast as a floor. Keyboard navigable. Respects `prefers-reduced-motion`. No essential information conveyed by color alone.

config.py

@@ -0,0 +1,32 @@
+import os
+import secrets
+from pathlib import Path
+
+from dotenv import load_dotenv
+
+load_dotenv()
+
+ROOT = Path(__file__).parent
+
+HOST = os.getenv("HOST", "127.0.0.1")
+PORT = int(os.getenv("PORT", "8000"))
+POLL_INTERVAL = float(os.getenv("POLL_INTERVAL_SECONDS", "2"))
+POLL_MAX_ATTEMPTS = int(os.getenv("POLL_MAX_ATTEMPTS", "60"))
+
+PROVIDER_KEYS = {
+    "nvidia": os.getenv("SK_NVIDIA_KEY", ""),
+    "google": os.getenv("SK_GOOGLE_KEY", ""),
+}
+
+REAL_KEYS = {
+    "nvidia": os.getenv("REAL_NVIDIA_KEY", ""),
+    "google": os.getenv("REAL_GOOGLE_KEY", ""),
+}
+
+
+def _strip_prefix(key: str, prefix: str) -> str:
+    return key[len(prefix):] if key.startswith(prefix) else key
+
+
+def generate_proxy_key(provider: str) -> str:
+    return f"sk-{provider}-" + secrets.token_urlsafe(32)

main.py

@@ -0,0 +1,15 @@
+import logging
+import uvicorn
+
+from config import HOST, PORT
+from proxy.router import create_app
+
+logging.basicConfig(
+    level=logging.INFO,
+    format="%(asctime)s [%(levelname)s] %(name)s: %(message)s",
+)
+
+app = create_app()
+
+if __name__ == "__main__":
+    uvicorn.run("main:app", host=HOST, port=PORT, reload=False)

proxy/auth.py

@@ -0,0 +1,38 @@
+from fastapi import HTTPException, Request
+
+from config import PROVIDER_KEYS
+from proxy.providers import PROVIDERS, Provider
+
+
+def _match_provider(token: str) -> tuple[str, str] | None:
+    """Return (provider_name, configured_proxy_key) if token matches a known provider key."""
+    for name, configured_key in PROVIDER_KEYS.items():
+        if configured_key and token == configured_key:
+            return name, configured_key
+    return None
+
+
+def resolve_provider(request: Request) -> Provider:
+    auth = request.headers.get("Authorization", "")
+    parts = auth.split(" ", 1)
+    if len(parts) != 2 or parts[0].lower() != "bearer":
+        raise HTTPException(status_code=401, detail="Missing or invalid Authorization header. Expected 'Bearer sk-{provider}-...'")
+
+    token = parts[1]
+    match = _match_provider(token)
+    if match is None:
+        raise HTTPException(status_code=401, detail="Unknown proxy key")
+
+    provider_name, _ = match
+    return PROVIDERS[provider_name]
+
+
+def get_real_key(provider: Provider) -> str:
+    import os
+    key = os.getenv(provider.env_real_key, "")
+    if not key:
+        raise HTTPException(
+            status_code=500,
+            detail=f"Provider '{provider.name}' is configured in .env but its real API key ({provider.env_real_key}) is missing"
+        )
+    return key

proxy/client.py

@@ -0,0 +1,98 @@
+import asyncio
+import json
+import logging
+from typing import Any, AsyncIterator
+
+import httpx
+from fastapi import HTTPException
+from fastapi.responses import StreamingResponse
+from starlette.requests import Request
+
+from config import POLL_INTERVAL, POLL_MAX_ATTEMPTS
+from proxy.providers import Provider
+
+logger = logging.getLogger(__name__)
+
+_TIMEOUT = httpx.Timeout(10.0, connect=10.0, read=180.0)
+
+
+def _build_headers(provider: Provider, real_key: str, incoming_headers: dict[str, str]) -> dict[str, str]:
+    headers = {k: v for k, v in incoming_headers.items() if k.lower() not in ("host", "authorization", "content-length")}
+    headers[provider.auth_header] = provider.auth_value(real_key)
+    headers.setdefault("Accept", "application/json")
+    headers.setdefault("Content-Type", "application/json")
+    return headers
+
+
+def _extract_request_id(response: httpx.Response) -> str | None:
+    try:
+        data = response.json()
+        if isinstance(data, dict):
+            return data.get("requestId") or data.get("id") or data.get("request_id")
+    except Exception:
+        pass
+    return response.headers.get("Location", "").rstrip("/").split("/")[-1] or None
+
+
+async def _poll_nvidia(client: httpx.AsyncClient, provider: Provider, request_id: str) -> httpx.Response:
+    status_url = f"{provider.base_url}/v1/status/{request_id}"
+    logger.info("NVIDIA returned 202; polling %s", status_url)
+
+    for attempt in range(1, POLL_MAX_ATTEMPTS + 1):
+        await asyncio.sleep(POLL_INTERVAL)
+        poll_resp = await client.get(status_url, timeout=_TIMEOUT)
+        logger.debug("Poll attempt %d: status %d", attempt, poll_resp.status_code)
+
+        if poll_resp.status_code == 200:
+            return poll_resp
+        if poll_resp.status_code == 202:
+            continue
+        poll_resp.raise_for_status()
+
+    raise HTTPException(status_code=504, detail=f"NVIDIA async job {request_id} timed out after polling")
+
+
+async def _stream_chunks(response: httpx.Response) -> AsyncIterator[bytes]:
+    async for chunk in response.aiter_raw():
+        yield chunk
+
+
+async def forward_request(provider: Provider, real_key: str, request: Request, body: dict[str, Any]) -> Any:
+    target_url = f"{provider.base_url}/v1/chat/completions"
+    headers = _build_headers(provider, real_key, dict(request.headers))
+    stream = bool(body.get("stream"))
+
+    async with httpx.AsyncClient(timeout=_TIMEOUT, follow_redirects=True) as client:
+        try:
+            upstream = await client.post(target_url, headers=headers, json=body, stream=stream)
+        except httpx.TimeoutException as exc:
+            logger.warning("Upstream timeout for %s: %s", provider.name, exc)
+            raise HTTPException(status_code=504, detail="Upstream provider timed out")
+        except httpx.RequestError as exc:
+            logger.warning("Upstream request error for %s: %s", provider.name, exc)
+            raise HTTPException(status_code=502, detail=f"Could not reach provider '{provider.name}': {exc}")
+
+        if provider.handles_202 and upstream.status_code == 202:
+            request_id = _extract_request_id(upstream)
+            if not request_id:
+                raise HTTPException(status_code=502, detail="Provider returned 202 but no requestId was found")
+            upstream = await _poll_nvidia(client, provider, request_id)
+
+        if upstream.status_code >= 400:
+            content = await upstream.aread()
+            logger.warning("Upstream error from %s: %d %s", provider.name, upstream.status_code, content[:500])
+            raise HTTPException(status_code=upstream.status_code, detail=content.decode("utf-8", errors="replace"))
+
+        if stream:
+            return StreamingResponse(
+                _stream_chunks(upstream),
+                status_code=upstream.status_code,
+                media_type=upstream.headers.get("content-type", "text/event-stream"),
+                headers={k: v for k, v in upstream.headers.items() if k.lower() in ("cache-control", "x-request-id")},
+            )
+
+        return {
+            "status_code": upstream.status_code,
+            "headers": dict(upstream.headers),
+            "content": upstream.content,
+        }

proxy/providers.py

@@ -0,0 +1,32 @@
+from dataclasses import dataclass
+from typing import Callable
+
+
+@dataclass
+class Provider:
+    name: str
+    base_url: str
+    auth_header: str
+    auth_value: Callable[[str], str]
+    handles_202: bool
+    env_real_key: str
+
+
+PROVIDERS: dict[str, Provider] = {
+    "nvidia": Provider(
+        name="nvidia",
+        base_url="https://integrate.api.nvidia.com",
+        auth_header="Authorization",
+        auth_value=lambda key: f"Bearer {key}",
+        handles_202=True,
+        env_real_key="REAL_NVIDIA_KEY",
+    ),
+    "google": Provider(
+        name="google",
+        base_url="https://generativelanguage.googleapis.com/v1beta/openai",
+        auth_header="x-goog-api-key",
+        auth_value=lambda key: key,
+        handles_202=False,
+        env_real_key="REAL_GOOGLE_KEY",
+    ),
+}

proxy/router.py

@@ -0,0 +1,121 @@
+import json
+import logging
+from typing import Any
+
+from fastapi import APIRouter, Depends, FastAPI, Request
+from fastapi.responses import HTMLResponse, JSONResponse, Response
+from fastapi.staticfiles import StaticFiles
+from starlette.exceptions import HTTPException as StarletteHTTPException
+
+from config import HOST, PORT, PROVIDER_KEYS, ROOT
+from proxy.auth import get_real_key, resolve_provider
+from proxy.client import forward_request
+from proxy.providers import PROVIDERS
+
+logger = logging.getLogger(__name__)
+
+api = APIRouter(prefix="/v1")
+
+
+MODELS = {
+    "nvidia": [
+        "deepseek-ai/deepseek-v4-pro",
+        "deepseek-ai/deepseek-v4-flash",
+        "moonshotai/kimi-k2.6",
+        "moonshotai/kimi-k2.5",
+        "google/gemma-4-31b-it",
+        "google/gemma-3-27b-it",
+    ],
+    "google": [
+        "gemini-2.0-flash-001",
+        "gemini-2.0-flash-lite-001",
+        "gemini-1.5-pro-001",
+        "gemini-1.5-flash-001",
+    ],
+}
+
+
+@api.get("/models")
+async def list_models() -> JSONResponse:
+    data = {
+        "object": "list",
+        "data": [
+            {
+                "id": model,
+                "object": "model",
+                "owned_by": provider,
+            }
+            for provider, models in MODELS.items()
+            for model in models
+        ],
+    }
+    return JSONResponse(content=data)
+
+
+@api.post("/chat/completions")
+async def chat_completions(request: Request) -> Response:
+    provider = resolve_provider(request)
+    real_key = get_real_key(provider)
+
+    try:
+        body = await request.json()
+    except Exception as exc:
+        raise StarletteHTTPException(status_code=400, detail=f"Invalid JSON body: {exc}") from exc
+
+    if not isinstance(body, dict):
+        raise StarletteHTTPException(status_code=400, detail="Request body must be a JSON object")
+
+    logger.info("Proxying request to provider=%s model=%s", provider.name, body.get("model", "default"))
+
+    result = await forward_request(provider, real_key, request, body)
+
+    if isinstance(result, Response):
+        return result
+
+    return Response(
+        content=result["content"],
+        status_code=result["status_code"],
+        headers={k: v for k, v in result["headers"].items() if k.lower() not in ("content-encoding", "transfer-encoding", "content-length")},
+    )
+
+
+@api.get("/health")
+async def health() -> JSONResponse:
+    return JSONResponse({"status": "ok", "providers": list(PROVIDERS.keys())})
+
+
+@api.get("/keys")
+async def proxy_keys() -> JSONResponse:
+    masked = {}
+    for name, key in PROVIDER_KEYS.items():
+        if key:
+            visible = key[:8] + "..." if len(key) > 11 else key
+            masked[name] = visible
+    return JSONResponse(masked)
+
+
+def _dashboard_html() -> str:
+    try:
+        return (ROOT / "static" / "index.html").read_text(encoding="utf-8")
+    except FileNotFoundError:
+        return "<h1>Dashboard not built yet</h1>"
+
+
+def create_app() -> FastAPI:
+    app = FastAPI(title="OpenAI-Compatible API Proxy", version="1.0.0")
+
+    static_dir = ROOT / "static"
+    if static_dir.exists():
+        app.mount("/static", StaticFiles(directory=static_dir), name="static")
+
+    app.include_router(api)
+
+    @app.get("/", response_class=HTMLResponse)
+    async def dashboard() -> str:
+        return _dashboard_html()
+
+    @app.exception_handler(StarletteHTTPException)
+    async def http_exception_handler(_request: Request, exc: StarletteHTTPException) -> JSONResponse:
+        return JSONResponse(status_code=exc.status_code, content={"error": {"message": exc.detail, "type": "proxy_error"}})
+
+    return app

requirements.txt

@@ -0,0 +1,4 @@
+fastapi>=0.110.0
+uvicorn[standard]>=0.29.0
+httpx>=0.27.0
+python-dotenv>=1.0.0

static/index.html

@@ -0,0 +1,536 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>API Proxy</title>
+<style>
+  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+  html { -webkit-font-smoothing: antialiased; }
+
+  :root {
+    --bg: oklch(0.08 0 0);
+    --surface: oklch(0.11 0 0);
+    --surface-2: oklch(0.15 0 0);
+    --ink: oklch(0.94 0 0);
+    --muted: oklch(0.58 0 0);
+    --faint: oklch(0.32 0 0);
+    --border: oklch(0.20 0 0);
+    --primary: oklch(0.68 0.13 38);
+    --primary-text: oklch(1 0 0);
+    --accent: oklch(0.68 0.12 175);
+    --warning: oklch(0.74 0.12 85);
+    --danger: oklch(0.62 0.16 25);
+  }
+
+  body {
+    background: var(--bg);
+    color: var(--ink);
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    font-size: 14px;
+    line-height: 1.5;
+  }
+
+  .page {
+    max-width: 680px;
+    margin: 0 auto;
+    padding: 48px 24px 80px;
+  }
+
+  /* --- Section headers --- */
+  .section-header {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 20px;
+  }
+  .section-label {
+    font-size: 11px;
+    font-weight: 600;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: var(--muted);
+  }
+
+  /* --- Hero --- */
+  .hero {
+    padding: 36px 0 48px;
+  }
+  .hero-status {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 13px;
+    font-weight: 500;
+    padding: 6px 14px;
+    border-radius: 20px;
+    margin-bottom: 24px;
+    background: var(--surface);
+    border: 1px solid var(--border);
+    transition: background 150ms ease;
+  }
+  .hero-status .dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--accent);
+  }
+  .hero-status .dot.offline { background: var(--danger); }
+  .hero-status .dot.checking { background: var(--warning); }
+  .hero-title {
+    font-size: 28px;
+    font-weight: 600;
+    letter-spacing: -0.02em;
+    line-height: 1.2;
+    margin-bottom: 10px;
+  }
+  .hero-sub {
+    font-size: 14px;
+    color: var(--muted);
+    max-width: 48ch;
+  }
+
+  /* --- Endpoint --- */
+  .endpoint {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-top: 28px;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    font-size: 13px;
+    padding: 12px 16px;
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    word-break: break-all;
+  }
+  .endpoint .method {
+    font-weight: 600;
+    color: var(--primary);
+    font-size: 11px;
+    letter-spacing: 0.04em;
+    flex-shrink: 0;
+  }
+  .endpoint .path {
+    color: var(--ink);
+    opacity: 0.85;
+  }
+  .endpoint .copy-btn {
+    margin-left: auto;
+    flex-shrink: 0;
+    background: var(--surface-2);
+    border: 1px solid var(--border);
+    color: var(--muted);
+    cursor: pointer;
+    font-size: 11px;
+    font-weight: 500;
+    padding: 4px 10px;
+    border-radius: 5px;
+    font-family: system-ui, sans-serif;
+    transition: background 150ms ease, color 150ms ease;
+  }
+  .endpoint .copy-btn:hover {
+    background: var(--faint);
+    color: var(--ink);
+  }
+  .endpoint .copy-btn.copied {
+    color: var(--accent);
+  }
+
+  /* --- Provider cards --- */
+  .provider-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+  .provider-card {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 10px;
+    padding: 18px 20px;
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 16px;
+    transition: background 150ms ease, border-color 150ms ease;
+  }
+  .provider-card:hover {
+    background: var(--surface-2);
+    border-color: var(--faint);
+  }
+  .provider-left {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    min-width: 0;
+  }
+  .provider-name {
+    font-size: 15px;
+    font-weight: 600;
+    letter-spacing: -0.01em;
+  }
+  .provider-models {
+    font-size: 12px;
+    color: var(--muted);
+    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    word-break: break-word;
+    line-height: 1.6;
+  }
+  .provider-right {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 6px;
+    flex-shrink: 0;
+  }
+  .provider-status {
+    font-size: 11px;
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    padding: 4px 10px;
+    border-radius: 12px;
+    background: var(--surface-2);
+    color: var(--muted);
+    border: 1px solid var(--border);
+  }
+  .provider-status.configured {
+    color: var(--accent);
+    border-color: oklch(0.30 0.05 175);
+    background: oklch(0.15 0.02 175);
+  }
+
+  /* --- Key row --- */
+  .key-section {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+  .key-row {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    padding: 12px 14px;
+  }
+  .key-provider-label {
+    font-size: 12px;
+    font-weight: 600;
+    letter-spacing: 0.03em;
+    text-transform: uppercase;
+    color: var(--muted);
+    min-width: 72px;
+    flex-shrink: 0;
+  }
+  .key-value {
+    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    font-size: 13px;
+    color: var(--ink);
+    opacity: 0.7;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    user-select: all;
+  }
+  .key-value.masked {
+    opacity: 0.4;
+    filter: blur(4px);
+    transition: filter 200ms ease, opacity 200ms ease;
+    user-select: none;
+  }
+  .key-toggle {
+    flex-shrink: 0;
+    background: none;
+    border: 1px solid var(--border);
+    color: var(--muted);
+    cursor: pointer;
+    font-size: 11px;
+    font-weight: 500;
+    padding: 4px 10px;
+    border-radius: 5px;
+    font-family: system-ui, sans-serif;
+    transition: background 150ms ease, color 150ms ease;
+  }
+  .key-toggle:hover { background: var(--surface-2); color: var(--ink); }
+
+  /* --- Code blocks --- */
+  .code-section {
+    margin-top: 48px;
+  }
+  .code-block {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 10px;
+    padding: 16px 18px;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    font-size: 13px;
+    line-height: 1.7;
+    color: var(--ink);
+    overflow-x: auto;
+    position: relative;
+    margin-bottom: 10px;
+  }
+  .code-block .c { color: var(--muted); }
+  .code-block .k { color: var(--primary); }
+  .code-block .v { color: var(--accent); }
+  .code-copy {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    background: var(--surface-2);
+    border: 1px solid var(--border);
+    color: var(--muted);
+    cursor: pointer;
+    font-size: 11px;
+    font-weight: 500;
+    padding: 4px 10px;
+    border-radius: 5px;
+    font-family: system-ui, sans-serif;
+    transition: background 150ms ease, color 150ms ease;
+  }
+  .code-copy:hover { background: var(--faint); color: var(--ink); }
+  .code-copy.copied { color: var(--accent); }
+
+  /* --- Divider --- */
+  .divider {
+    border: none;
+    border-top: 1px solid var(--border);
+    margin: 40px 0;
+  }
+
+  /* --- Responsive --- */
+  @media (max-width: 520px) {
+    .page { padding: 32px 16px 60px; }
+    .hero-title { font-size: 24px; }
+    .provider-card {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+    .provider-right {
+      flex-direction: row;
+      width: 100%;
+    }
+    .key-row { flex-wrap: wrap; }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    *, *::before, *::after { transition: none !important; }
+  }
+</style>
+</head>
+<body>
+<div class="page">
+
+  <!-- Hero -->
+  <header class="hero">
+    <div class="hero-status" id="status-badge">
+      <span class="dot checking"></span>
+      <span id="status-text">checking</span>
+    </div>
+    <h1 class="hero-title">API Proxy</h1>
+    <p class="hero-sub">
+      A personal gateway that routes OpenAI-compatible chat requests to NVIDIA NIM and Google AI Studio — based on which <code>sk-</code> key your app uses.
+    </p>
+    <div class="endpoint">
+      <span class="method">POST</span>
+      <span class="path" id="endpoint-url">http://localhost:8000/v1/chat/completions</span>
+      <button class="copy-btn" data-copy="endpoint-url">Copy URL</button>
+    </div>
+  </header>
+
+  <!-- Providers -->
+  <section>
+    <div class="section-header">
+      <span class="section-label">Providers</span>
+    </div>
+    <div class="provider-grid" id="provider-list">
+      <div class="provider-card" data-provider="nvidia">
+        <div class="provider-left">
+          <span class="provider-name">NVIDIA NIM</span>
+          <span class="provider-models">deepseek-ai/deepseek-v4-flash, moonshotai/kimi-k2.6, google/gemma-4-31b-it</span>
+        </div>
+        <div class="provider-right">
+          <span class="provider-status" id="nvidia-status">checking</span>
+        </div>
+      </div>
+      <div class="provider-card" data-provider="google">
+        <div class="provider-left">
+          <span class="provider-name">Google AI Studio</span>
+          <span class="provider-models">gemini-2.0-flash-001, gemini-1.5-pro-001, gemini-1.5-flash-001</span>
+        </div>
+        <div class="provider-right">
+          <span class="provider-status" id="google-status">checking</span>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <hr class="divider">
+
+  <!-- Keys -->
+  <section>
+    <div class="section-header">
+      <span class="section-label">Proxy keys</span>
+    </div>
+    <div class="key-section" id="key-list">
+      <div class="key-row">
+        <span class="key-provider-label">NVIDIA</span>
+        <span class="key-value masked" id="key-nvidia" data-full="">loading...</span>
+        <button class="key-toggle" data-key="key-nvidia">Show</button>
+      </div>
+      <div class="key-row">
+        <span class="key-provider-label">GOOGLE</span>
+        <span class="key-value masked" id="key-google" data-full="">loading...</span>
+        <button class="key-toggle" data-key="key-google">Show</button>
+      </div>
+    </div>
+  </section>
+
+  <!-- Usage examples -->
+  <div class="code-section">
+    <div class="section-header">
+      <span class="section-label">Usage</span>
+    </div>
+    <div class="code-block" id="curl-nvidia">
+      <button class="code-copy" data-copy="curl-nvidia">Copy</button>
+      <span class="c"># NVIDIA (deepseek-v4-flash)</span><br>
+      curl <span class="v">http://localhost:8000/v1/chat/completions</span> \<br>
+      &nbsp;&nbsp;-H <span class="v">"Content-Type: application/json"</span> \<br>
+      &nbsp;&nbsp;-H <span class="v">"Authorization: Bearer <span id="curl-nv-key">sk-nvidia-...</span>"</span> \<br>
+      &nbsp;&nbsp;-d <span class="v">'{"model":"deepseek-ai/deepseek-v4-flash","messages":[{"role":"user","content":"hello"}]}'</span>
+    </div>
+    <div class="code-block" id="curl-google">
+      <button class="code-copy" data-copy="curl-google">Copy</button>
+      <span class="c"># Google (gemini-2.0-flash)</span><br>
+      curl <span class="v">http://localhost:8000/v1/chat/completions</span> \<br>
+      &nbsp;&nbsp;-H <span class="v">"Content-Type: application/json"</span> \<br>
+      &nbsp;&nbsp;-H <span class="v">"Authorization: Bearer <span id="curl-gc-key">sk-google-...</span>"</span> \<br>
+      &nbsp;&nbsp;-d <span class="v">'{"model":"gemini-2.0-flash-001","messages":[{"role":"user","content":"hello"}]}'</span>
+    </div>
+  </div>
+
+</div>
+
+<script>
+  const HOST = window.location.host;
+
+  function copyText(el, text) {
+    navigator.clipboard.writeText(text).then(() => {
+      el.classList.add('copied');
+      el.textContent = 'Copied';
+      setTimeout(() => {
+        el.classList.remove('copied');
+        el.textContent = 'Copy URL';
+      }, 1800);
+    });
+  }
+
+  document.querySelectorAll('[data-copy]').forEach(btn => {
+    btn.addEventListener('click', () => {
+      const id = btn.dataset.copy;
+      if (id === 'endpoint-url') {
+        const url = document.getElementById('endpoint-url').textContent;
+        copyText(btn, url);
+      } else {
+        const block = document.getElementById(id);
+        const text = block.textContent.replace(/^\s+/gm, '') || '';
+        copyText(btn, text.trim());
+      }
+    });
+  });
+
+  // Key visibility toggle
+  document.querySelectorAll('.key-toggle').forEach(btn => {
+    btn.addEventListener('click', () => {
+      const keyId = btn.dataset.key;
+      const el = document.getElementById(keyId);
+      if (el.classList.contains('masked')) {
+        el.classList.remove('masked');
+        btn.textContent = 'Hide';
+      } else {
+        el.classList.add('masked');
+        btn.textContent = 'Show';
+      }
+    });
+  });
+
+  // Health check
+  async function checkHealth() {
+    const badge = document.getElementById('status-badge');
+    const text = document.getElementById('status-text');
+    const dot = badge.querySelector('.dot');
+
+    try {
+      const res = await fetch('/v1/health');
+      if (res.ok) {
+        dot.className = 'dot';
+        text.textContent = 'running';
+        return true;
+      }
+    } catch {}
+    dot.className = 'dot offline';
+    text.textContent = 'unreachable';
+    return false;
+  }
+
+  // Key info
+  async function loadKeys() {
+    try {
+      const res = await fetch('/v1/health');
+      const data = await res.json();
+      const providers = data.providers || [];
+
+      const nvKey = document.getElementById('key-nvidia');
+      const gcKey = document.getElementById('key-google');
+      const curlNvKey = document.getElementById('curl-nv-key');
+      const curlGcKey = document.getElementById('curl-gc-key');
+
+      // Update status badges
+      if (providers.includes('nvidia')) {
+        const s = document.getElementById('nvidia-status');
+        s.textContent = 'configured';
+        s.classList.add('configured');
+      }
+      if (providers.includes('google')) {
+        const s = document.getElementById('google-status');
+        s.textContent = 'configured';
+        s.classList.add('configured');
+      }
+
+      // Keys from server
+      try {
+        const ks = await fetch('/v1/keys');
+        if (ks.ok) {
+          const kd = await ks.json();
+          if (kd.nvidia) {
+            const nv = kd.nvidia;
+            nvKey.textContent = nv;
+            nvKey.dataset.full = nv;
+            curlNvKey.textContent = nv;
+          }
+          if (kd.google) {
+            const gc = kd.google;
+            gcKey.textContent = gc;
+            gcKey.dataset.full = gc;
+            curlGcKey.textContent = gc;
+          }
+        }
+      } catch {}
+    } catch {
+      document.getElementById('nvidia-status').textContent = 'offline';
+      document.getElementById('google-status').textContent = 'offline';
+    }
+  }
+
+  // Update endpoint URL
+  document.getElementById('endpoint-url').textContent =
+    window.location.origin + '/v1/chat/completions';
+
+  checkHealth();
+  loadKeys();
+</script>
+</body>
+</html>