Update app.py

app.py

@@ -1,736 +1,429 @@
-"""
-Unified AI Proxy — main.py
-Single-file FastAPI app: proxy + dashboard + auth + DB
-"""
-
 import os
-import secrets
+import re
+import json
 import time
-import logging
+import secrets
 from contextlib import asynccontextmanager
 from datetime import datetime
-from typing import AsyncGenerator, Optional
+from typing import AsyncGenerator
 
 import httpx
-from fastapi import FastAPI, Request, HTTPException, Depends
+from fastapi import FastAPI, Depends, HTTPException, Request
 from fastapi.middleware.cors import CORSMiddleware
-from fastapi.responses import HTMLResponse, StreamingResponse, JSONResponse
-from fastapi.staticfiles import StaticFiles
+from fastapi.responses import HTMLResponse, JSONResponse, StreamingResponse, Response
+from pydantic import BaseModel
 from sqlalchemy import (
-    create_engine, Column, String, Boolean, Integer, DateTime, Float, Text
+    Column, String, Boolean, Integer, DateTime, Float, Text,
+    create_engine, select, update, delete
 )
-from sqlalchemy.orm import declarative_base, sessionmaker, Session
-from sqlalchemy.sql import func
+from sqlalchemy.orm import DeclarativeBase, sessionmaker
+from sqlalchemy.ext.asyncio import create_async_engine, async_sessionmaker
 
-logging.basicConfig(level=logging.INFO)
-logger = logging.getLogger(__name__)
+# ── Database ──────────────────────────────────────────────────────────────────
 
-# ---------------------------------------------------------------------------
-# Database setup
-# ---------------------------------------------------------------------------
+if os.path.isdir("/data"):
+    ASYNC_DB  = "sqlite+aiosqlite:////data/db.sqlite"
+    SYNC_DB   = "sqlite:////data/db.sqlite"
+else:
+    ASYNC_DB  = "sqlite+aiosqlite:///./db.sqlite"
+    SYNC_DB   = "sqlite:///./db.sqlite"
 
-_DATA_DIR = "/data" if os.path.isdir("/data") else "."
-DATABASE_URL = f"sqlite:///{_DATA_DIR}/db.sqlite"
 
-engine = create_engine(DATABASE_URL, connect_args={"check_same_thread": False})
-SessionLocal = sessionmaker(autocommit=False, autoflush=False, bind=engine)
-Base = declarative_base()
+class Base(DeclarativeBase):
+    pass
 
 
 class Provider(Base):
     __tablename__ = "providers"
-    id = Column(Integer, primary_key=True, index=True)
-    name = Column(String, unique=True, nullable=False)
-    base_url = Column(String, nullable=False)
-    api_key = Column(String, nullable=False)
-    enabled = Column(Boolean, default=True)
+    id         = Column(Integer, primary_key=True, autoincrement=True)
+    name       = Column(String(100), unique=True, nullable=False)
+    base_url   = Column(String(500), nullable=False)
+    api_key    = Column(String(500), nullable=False)
+    enabled    = Column(Boolean, default=True)
     is_default = Column(Boolean, default=False)
     created_at = Column(DateTime, default=datetime.utcnow)
 
 
-class Setting(Base):
-    __tablename__ = "settings"
-    key = Column(String, primary_key=True)
-    value = Column(String, nullable=False)
-
-
 class RequestLog(Base):
     __tablename__ = "request_logs"
-    id = Column(Integer, primary_key=True, index=True)
-    timestamp = Column(DateTime, default=datetime.utcnow)
-    provider = Column(String)
-    model = Column(String)
-    status_code = Column(Integer)
-    latency_ms = Column(Float)
-    endpoint = Column(String)
-
+    id            = Column(Integer, primary_key=True, autoincrement=True)
+    timestamp     = Column(DateTime, default=datetime.utcnow)
+    provider_name = Column(String(100))
+    model         = Column(String(200))
+    status_code   = Column(Integer)
+    latency_ms    = Column(Float)
+    path          = Column(String(200))
+    streaming     = Column(Boolean, default=False)
 
-Base.metadata.create_all(bind=engine)
 
-
-def get_db():
-    db = SessionLocal()
-    try:
-        yield db
-    finally:
-        db.close()
-
-
-# ---------------------------------------------------------------------------
-# Auth helpers
-# ---------------------------------------------------------------------------
-
-def get_master_key(db: Session) -> str:
-    row = db.query(Setting).filter(Setting.key == "master_key").first()
-    if row:
-        return row.value
-    new_key = "sk-proxy-" + secrets.token_urlsafe(32)
-    db.add(Setting(key="master_key", value=new_key))
-    db.commit()
-    logger.info("=" * 60)
-    logger.info(f"  MASTER API KEY: {new_key}")
-    logger.info("  Save this — it won't be shown again.")
-    logger.info("=" * 60)
-    return new_key
-
-
-def verify_master_key(request: Request, db: Session = Depends(get_db)) -> bool:
-    auth = request.headers.get("Authorization", "")
-    if not auth.startswith("Bearer "):
-        raise HTTPException(status_code=401, detail="Missing or invalid Authorization header")
-    token = auth[len("Bearer "):]
-    master = get_master_key(db)
-    if not secrets.compare_digest(token, master):
-        raise HTTPException(status_code=401, detail="Invalid master API key")
-    return True
-
-
-# ---------------------------------------------------------------------------
-# Provider routing helpers
-# ---------------------------------------------------------------------------
-
-def parse_model(model_str: str, db: Session):
-    """
-    Split 'providerName/real-model-name' into (provider_row, real_model).
-    If no slash prefix, return (default_provider, model_str).
-    Handles nested slashes like 'together/meta-llama/Llama-3-70b'.
-    """
-    if "/" in model_str:
-        prefix, rest = model_str.split("/", 1)
-        provider = (
-            db.query(Provider)
-            .filter(func.lower(Provider.name) == prefix.lower(), Provider.enabled == True)
-            .first()
-        )
-        if provider:
-            return provider, rest
-
-    # fallback to default
-    provider = db.query(Provider).filter(Provider.is_default == True, Provider.enabled == True).first()
-    if not provider:
-        provider = db.query(Provider).filter(Provider.enabled == True).first()
-    if not provider:
-        raise HTTPException(status_code=503, detail="No enabled providers configured")
-    return provider, model_str
-
-
-def log_request(db: Session, provider_name: str, model: str, status: int, latency: float, endpoint: str):
-    db.add(RequestLog(
-        provider=provider_name,
-        model=model,
-        status_code=status,
-        latency_ms=latency,
-        endpoint=endpoint,
-    ))
-    db.commit()
-    # Truncate to 500 rows
-    count = db.query(RequestLog).count()
-    if count > 500:
-        oldest_ids = (
-            db.query(RequestLog.id)
-            .order_by(RequestLog.timestamp.asc())
-            .limit(count - 500)
-            .all()
-        )
-        ids = [r.id for r in oldest_ids]
-        db.query(RequestLog).filter(RequestLog.id.in_(ids)).delete(synchronize_session=False)
-        db.commit()
-
-
-# ---------------------------------------------------------------------------
-# Startup: seed providers from env vars
-# ---------------------------------------------------------------------------
-
-def seed_providers_from_env(db: Session):
-    """
-    Auto-import providers from PROVIDER_<NAME>_URL + PROVIDER_<NAME>_KEY env vars.
-    """
-    seen: dict[str, dict] = {}
-    for key, val in os.environ.items():
-        if key.startswith("PROVIDER_") and key.endswith("_URL"):
-            name = key[len("PROVIDER_"):-len("_URL")].replace("_", " ").title()
-            seen.setdefault(name, {})["url"] = val
-        elif key.startswith("PROVIDER_") and key.endswith("_KEY"):
-            name = key[len("PROVIDER_"):-len("_KEY")].replace("_", " ").title()
-            seen.setdefault(name, {})["key"] = val
-
-    for name, cfg in seen.items():
-        if "url" not in cfg or "key" not in cfg:
-            continue
-        exists = db.query(Provider).filter(func.lower(Provider.name) == name.lower()).first()
-        if not exists:
-            db.add(Provider(name=name, base_url=cfg["url"], api_key=cfg["key"]))
-            logger.info(f"Seeded provider '{name}' from environment")
-    db.commit()
-
-
-# ---------------------------------------------------------------------------
-# Lifespan
-# ---------------------------------------------------------------------------
+class Settings(Base):
+    __tablename__ = "settings"
+    key   = Column(String(100), primary_key=True)
+    value = Column(Text, nullable=False)
+
+
+def init_db():
+    engine = create_engine(SYNC_DB, connect_args={"check_same_thread": False})
+    Base.metadata.create_all(engine)
+    Session = sessionmaker(bind=engine)
+    with Session() as s:
+        existing = s.get(Settings, "master_key")
+        if not existing:
+            key = f"umk-{secrets.token_urlsafe(32)}"
+            s.add(Settings(key="master_key", value=key))
+            s.commit()
+            print(f"\n{'='*60}\n  MASTER API KEY (save this):\n  {key}\n{'='*60}\n")
+        else:
+            print(f"[startup] Master key ends: ...{existing.value[-4:]}")
+        # Auto-seed from env: PROVIDER_<NAME>_URL + PROVIDER_<NAME>_KEY
+        for env_k, env_v in os.environ.items():
+            m = re.match(r"^PROVIDER_([A-Z0-9_]+)_URL$", env_k)
+            if m:
+                pname   = m.group(1).capitalize()
+                key_env = f"PROVIDER_{m.group(1)}_KEY"
+                pkey    = os.environ.get(key_env, "")
+                if pkey and not s.query(Provider).filter_by(name=pname).first():
+                    s.add(Provider(name=pname, base_url=env_v, api_key=pkey))
+                    print(f"[startup] Seeded provider: {pname}")
+        s.commit()
+
+
+# ── Lifespan ──────────────────────────────────────────────────────────────────
 
 @asynccontextmanager
-async def lifespan(app: FastAPI) -> AsyncGenerator:
-    db = SessionLocal()
-    try:
-        get_master_key(db)
-        seed_providers_from_env(db)
-    finally:
-        db.close()
+async def lifespan(app: FastAPI):
+    init_db()
+    engine = create_async_engine(ASYNC_DB)
+    app.state.db = async_sessionmaker(engine, expire_on_commit=False)
     yield
+    await engine.dispose()
 
 
-# ---------------------------------------------------------------------------
-# App
-# ---------------------------------------------------------------------------
-
 app = FastAPI(title="Unified AI Proxy", lifespan=lifespan)
+app.add_middleware(CORSMiddleware, allow_origins=["*"], allow_methods=["*"], allow_headers=["*"])
 
-app.add_middleware(
-    CORSMiddleware,
-    allow_origins=["*"],
-    allow_credentials=True,
-    allow_methods=["*"],
-    allow_headers=["*"],
-)
+TIMEOUT = httpx.Timeout(120.0, connect=10.0)
+
+# ── Auth helper ───────────────────────────────────────────────────────────────
+
+async def verify_key(request: Request):
+    auth = request.headers.get("Authorization", "")
+    if not auth.startswith("Bearer "):
+        raise HTTPException(401, "Missing Authorization header")
+    token = auth.removeprefix("Bearer ").strip()
+    async with request.app.state.db() as s:
+        row = await s.get(Settings, "master_key")
+        if not row or row.value != token:
+            raise HTTPException(401, "Invalid master key")
+
+# ── Health ────────────────────────────────────────────────────────────────────
 
+@app.get("/health")
+async def health(request: Request):
+    async with request.app.state.db() as s:
+        result = await s.execute(select(Provider).where(Provider.enabled == True))
+        n = len(result.scalars().all())
+    return {"status": "ok", "providers": n}
 
-# ---------------------------------------------------------------------------
-# Dashboard (served from embedded HTML)
-# ---------------------------------------------------------------------------
+# ── Dashboard ─────────────────────────────────────────────────────────────────
 
 DASHBOARD_HTML = r"""<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8"/>
-<meta name="viewport" content="width=device-width,initial-scale=1"/>
+<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
 <title>Unified AI Proxy</title>
 <link rel="preconnect" href="https://fonts.googleapis.com"/>
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"/>
 <style>
-  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
-  :root{
-    --bg:#0d1117;--surface:#161b22;--border:#30363d;
-    --accent:#58a6ff;--accent-dim:#1f6feb;
-    --text:#e6edf3;--muted:#8b949e;--danger:#f85149;
-    --success:#3fb950;--warning:#d29922;
-    --mono:'JetBrains Mono',monospace;--sans:'Inter',sans-serif;
-  }
-  body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:14px;min-height:100vh}
-  a{color:var(--accent);text-decoration:none}
-
-  /* Layout */
-  .topbar{display:flex;align-items:center;gap:12px;padding:14px 24px;background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100}
-  .topbar .logo{font-family:var(--mono);font-size:15px;font-weight:500;color:var(--accent)}
-  .topbar .subtitle{color:var(--muted);font-size:12px}
-  .topbar .spacer{flex:1}
-  .status-dot{width:8px;height:8px;border-radius:50%;background:var(--success)}
-
-  .tabs{display:flex;gap:2px;padding:0 24px;background:var(--surface);border-bottom:1px solid var(--border)}
-  .tab{padding:10px 18px;cursor:pointer;color:var(--muted);font-size:13px;font-weight:500;border-bottom:2px solid transparent;transition:all .15s}
-  .tab.active{color:var(--accent);border-bottom-color:var(--accent)}
-  .tab:hover:not(.active){color:var(--text)}
-
-  .main{padding:24px;max-width:1100px;margin:0 auto}
-  .panel{display:none}.panel.active{display:block}
-
-  /* Cards */
-  .card{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:20px;margin-bottom:16px}
-  .card-title{font-size:13px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:16px}
-
-  /* Forms */
-  .form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:12px}
-  label{display:block;font-size:12px;color:var(--muted);margin-bottom:4px;font-weight:500}
-  input[type=text],input[type=password],input[type=url]{
-    width:100%;background:#0d1117;border:1px solid var(--border);border-radius:6px;
-    padding:8px 10px;color:var(--text);font-family:var(--mono);font-size:13px;outline:none;
-    transition:border-color .15s
-  }
-  input:focus{border-color:var(--accent)}
-  .input-wrap{position:relative}
-  .input-wrap input{padding-right:36px}
-  .toggle-vis{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--muted);font-size:12px;padding:2px 4px}
-  .toggle-vis:hover{color:var(--text)}
-
-  /* Buttons */
-  .btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;border:none;transition:all .15s}
-  .btn-primary{background:var(--accent-dim);color:#fff}.btn-primary:hover{background:var(--accent)}
-  .btn-ghost{background:transparent;color:var(--muted);border:1px solid var(--border)}.btn-ghost:hover{color:var(--text);border-color:var(--text)}
-  .btn-danger{background:transparent;color:var(--danger);border:1px solid var(--danger)}.btn-danger:hover{background:var(--danger);color:#fff}
-  .btn-sm{padding:4px 10px;font-size:12px}
-  .btn:disabled{opacity:.5;cursor:not-allowed}
-
-  /* Table */
-  .table-wrap{overflow-x:auto}
-  table{width:100%;border-collapse:collapse;font-size:13px}
-  th{text-align:left;padding:8px 12px;color:var(--muted);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--border)}
-  td{padding:10px 12px;border-bottom:1px solid #21262d;vertical-align:middle}
-  tr:last-child td{border-bottom:none}
-  tr:hover td{background:rgba(255,255,255,.02)}
-  .mono{font-family:var(--mono);font-size:12px}
-  .badge{display:inline-block;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:500}
-  .badge-green{background:#0d1f12;color:var(--success);border:1px solid #1a3a1f}
-  .badge-red{background:#1f0d0d;color:var(--danger);border:1px solid #3a1a1a}
-  .badge-blue{background:#0d1420;color:var(--accent);border:1px solid #1a2a40}
-
-  /* Toggle switch */
-  .toggle{position:relative;display:inline-block;width:36px;height:20px}
-  .toggle input{opacity:0;width:0;height:0}
-  .slider{position:absolute;cursor:pointer;inset:0;background:#30363d;border-radius:20px;transition:.2s}
-  .slider::before{content:'';position:absolute;width:14px;height:14px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.2s}
-  input:checked+.slider{background:var(--accent-dim)}
-  input:checked+.slider::before{transform:translateX(16px)}
-
-  /* Login */
-  .login-wrap{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--bg)}
-  .login-box{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:40px;width:380px}
-  .login-box h1{font-family:var(--mono);font-size:18px;color:var(--accent);margin-bottom:8px}
-  .login-box p{color:var(--muted);font-size:13px;margin-bottom:24px}
-
-  /* Hint box */
-  .hint{background:#0d1420;border:1px solid #1a2a40;border-radius:8px;overflow:hidden;margin-bottom:16px}
-  .hint-header{display:flex;align-items:center;gap:8px;padding:10px 16px;cursor:pointer;user-select:none}
-  .hint-header span{color:var(--accent);font-size:13px;font-weight:500;flex:1}
-  .hint-chevron{color:var(--muted);transition:.2s;font-size:11px}
-  .hint-body{padding:0 16px 16px;display:none}
-  .hint-body.open{display:block}
-  pre{background:#080d14;border:1px solid var(--border);border-radius:6px;padding:12px;overflow-x:auto;font-family:var(--mono);font-size:12px;color:#a5d6ff;line-height:1.6;margin-top:8px}
-
-  /* Alerts */
-  .alert{padding:10px 14px;border-radius:6px;font-size:13px;margin-bottom:12px}
-  .alert-error{background:#1f0d0d;border:1px solid var(--danger);color:var(--danger)}
-  .alert-success{background:#0d1f12;border:1px solid var(--success);color:var(--success)}
-
-  /* Settings */
-  .setting-row{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--border)}
-  .setting-row:last-child{border-bottom:none}
-  .setting-info{flex:1}
-  .setting-info h3{font-size:14px;font-weight:500;margin-bottom:2px}
-  .setting-info p{font-size:12px;color:var(--muted)}
-  .key-display{font-family:var(--mono);font-size:12px;background:#080d14;border:1px solid var(--border);border-radius:6px;padding:8px 12px;color:var(--accent);flex:1;word-break:break-all}
-
-  .empty-state{text-align:center;padding:40px;color:var(--muted)}
-  .empty-state .icon{font-size:32px;margin-bottom:12px}
-
-  /* Log table specifics */
-  .latency{color:var(--warning)}
-  .status-2{color:var(--success)}.status-4{color:var(--danger)}.status-5{color:var(--danger)}
-
-  #toast{position:fixed;bottom:24px;right:24px;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:12px 18px;font-size:13px;transform:translateY(80px);opacity:0;transition:.3s;z-index:999;pointer-events:none}
-  #toast.show{transform:translateY(0);opacity:1}
+*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
+:root{--bg:#0d1117;--surface:#161b22;--surface2:#1c2128;--border:#30363d;--accent:#58a6ff;--accent-dim:#1f3a5f;--green:#3fb950;--red:#f85149;--yellow:#d29922;--text:#e6edf3;--text-dim:#8b949e;--mono:'JetBrains Mono',monospace;--sans:'Inter',system-ui,sans-serif}
+body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:14px;min-height:100vh}
+#login-screen{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px}
+.login-box{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:36px 32px;width:100%;max-width:400px}
+.login-box h1{font-size:20px;font-weight:600;margin-bottom:6px}
+.login-box p{color:var(--text-dim);margin-bottom:24px;font-size:13px}
+.err{color:var(--red);font-size:13px;margin-top:10px;display:none}
+#app{display:none;flex-direction:column;min-height:100vh}
+header{background:var(--surface);border-bottom:1px solid var(--border);padding:0 24px;display:flex;align-items:center;gap:16px;height:52px;position:sticky;top:0;z-index:10}
+.logo{font-family:var(--mono);font-size:15px;font-weight:500;color:var(--accent)}
+.logo span{color:var(--text-dim)}
+nav{display:flex;gap:2px;margin-left:8px}
+nav button{background:none;border:none;color:var(--text-dim);cursor:pointer;padding:6px 14px;border-radius:6px;font-size:13px;font-family:var(--sans);transition:all .15s}
+nav button:hover{background:var(--surface2);color:var(--text)}
+nav button.active{background:var(--accent-dim);color:var(--accent)}
+.spacer{flex:1}
+.hstatus{font-size:12px;color:var(--text-dim);font-family:var(--mono)}
+main{flex:1;padding:24px;max-width:1100px;margin:0 auto;width:100%}
+.tab{display:none}.tab.active{display:block}
+.sh{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
+.sh h2{font-size:16px;font-weight:600}
+.card{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:20px;margin-bottom:16px}
+.card-title{font-size:13px;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:.06em;margin-bottom:16px}
+.form-row{display:grid;gap:12px;margin-bottom:12px}
+.cols-3{grid-template-columns:1fr 1fr 1fr}
+.cols-2{grid-template-columns:1fr 1fr}
+label{display:block;font-size:12px;color:var(--text-dim);margin-bottom:5px;font-weight:500}
+input[type=text],input[type=password]{width:100%;background:var(--bg);border:1px solid var(--border);color:var(--text);border-radius:6px;padding:8px 12px;font-family:var(--mono);font-size:13px;transition:border-color .15s;outline:none}
+input:focus{border-color:var(--accent)}
+.iw{position:relative}.iw input{padding-right:40px}
+.tv{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--text-dim);font-size:12px;padding:2px 4px}
+.tv:hover{color:var(--text)}
+.btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:6px;font-size:13px;font-family:var(--sans);font-weight:500;cursor:pointer;border:1px solid transparent;transition:all .15s;line-height:1}
+.bp{background:var(--accent);color:#000;border-color:var(--accent)}.bp:hover{background:#79b8ff}
+.bs{background:var(--surface2);color:var(--text);border-color:var(--border)}.bs:hover{border-color:var(--accent);color:var(--accent)}
+.bd{background:transparent;color:var(--red);border-color:var(--border)}.bd:hover{background:rgba(248,81,73,.1);border-color:var(--red)}
+.sm{padding:4px 10px;font-size:12px}
+.tw{overflow-x:auto}
+table{width:100%;border-collapse:collapse}
+th{text-align:left;font-size:11px;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:.06em;padding:0 12px 10px;border-bottom:1px solid var(--border)}
+td{padding:11px 12px;border-bottom:1px solid var(--border);font-size:13px;vertical-align:middle}
+tr:last-child td{border-bottom:none}
+tr:hover td{background:var(--surface2)}
+.mono{font-family:var(--mono);font-size:12px}
+.pill{display:inline-block;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:500}
+.pg{background:rgba(63,185,80,.15);color:var(--green)}
+.pr{background:rgba(248,81,73,.15);color:var(--red)}
+.pb{background:var(--accent-dim);color:var(--accent)}
+.py{background:rgba(210,153,34,.15);color:var(--yellow)}
+.toggle{position:relative;display:inline-block;width:36px;height:20px}
+.toggle input{opacity:0;width:0;height:0}
+.slider{position:absolute;inset:0;background:var(--border);border-radius:20px;cursor:pointer;transition:.2s}
+.slider::before{content:'';position:absolute;width:14px;height:14px;left:3px;top:3px;background:var(--text-dim);border-radius:50%;transition:.2s}
+input:checked+.slider{background:var(--accent)}
+input:checked+.slider::before{transform:translateX(16px);background:#000}
+.ub{background:var(--surface2);border:1px solid var(--border);border-radius:8px;margin-bottom:16px;overflow:hidden}
+.ubh{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;cursor:pointer;user-select:none}
+.ubh span{font-size:12px;color:var(--text-dim);font-weight:500}
+.chev{color:var(--text-dim);transition:transform .2s}
+.ubh.open .chev{transform:rotate(180deg)}
+.ubc{display:none;padding:0 16px 16px}
+.ubc.open{display:block}
+pre{background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:12px 14px;font-family:var(--mono);font-size:12px;color:var(--text);overflow-x:auto;line-height:1.6;margin-top:8px}
+.empty{text-align:center;padding:40px;color:var(--text-dim);font-size:13px}
+#flash{position:fixed;bottom:24px;right:24px;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:12px 18px;font-size:13px;box-shadow:0 4px 20px rgba(0,0,0,.5);opacity:0;transform:translateY(8px);transition:all .2s;pointer-events:none;z-index:99;max-width:320px}
+#flash.show{opacity:1;transform:translateY(0)}
+#flash.ok{border-left:3px solid var(--green)}
+#flash.err{border-left:3px solid var(--red)}
+@media(max-width:680px){.cols-3,.cols-2{grid-template-columns:1fr}.hstatus{display:none}}
 </style>
 </head>
 <body>
-
-<div id="login-screen" style="display:none">
-  <div class="login-wrap">
-    <div class="login-box">
-      <h1>🔀 AI Proxy</h1>
-      <p>Enter your master API key to access the dashboard.</p>
-      <div style="margin-bottom:12px">
-        <label>Master API Key</label>
-        <div class="input-wrap">
-          <input type="password" id="login-key" placeholder="sk-proxy-..." onkeydown="if(event.key==='Enter')doLogin()"/>
-          <button class="toggle-vis" onclick="toggleVis('login-key')">👁</button>
-        </div>
-      </div>
-      <div id="login-error" class="alert alert-error" style="display:none"></div>
-      <button class="btn btn-primary" style="width:100%" onclick="doLogin()">Unlock Dashboard</button>
+<div id="login-screen">
+  <div class="login-box">
+    <h1>🔀 Unified AI Proxy</h1>
+    <p>Enter your master API key to continue.</p>
+    <div><label>Master API Key</label>
+      <div class="iw"><input type="password" id="lk" placeholder="umk-..."/><button class="tv" onclick="tv('lk',this)">show</button></div>
     </div>
+    <button class="btn bp" style="margin-top:14px;width:100%" onclick="doLogin()">Sign In</button>
+    <div class="err" id="lerr">Invalid key — check Space logs on first launch.</div>
   </div>
 </div>
 
-<div id="app-screen" style="display:none">
-  <div class="topbar">
-    <span class="logo">🔀 Unified AI Proxy</span>
-    <span class="subtitle">OpenAI-compatible multi-provider gateway</span>
+<div id="app">
+  <header>
+    <div class="logo">🔀 <span>unified-ai-proxy</span></div>
+    <nav>
+      <button class="active" onclick="showTab('providers',this)">Providers</button>
+      <button onclick="showTab('logs',this)">Logs</button>
+      <button onclick="showTab('settings',this)">Settings</button>
+    </nav>
     <div class="spacer"></div>
-    <div class="status-dot" id="status-dot"></div>
-    <span style="font-size:12px;color:var(--muted)" id="status-label">checking...</span>
-    <button class="btn btn-ghost btn-sm" onclick="doLogout()">Logout</button>
-  </div>
-
-  <div class="tabs">
-    <div class="tab active" onclick="switchTab('providers',this)">Providers</div>
-    <div class="tab" onclick="switchTab('logs',this)">Logs</div>
-    <div class="tab" onclick="switchTab('settings',this)">Settings</div>
-  </div>
-
-  <div class="main">
+    <div class="hstatus" id="hs">● connecting…</div>
+  </header>
+  <main>
 
     <!-- PROVIDERS -->
-    <div id="panel-providers" class="panel active">
-      <div class="card">
-        <div class="card-title">Add Provider</div>
-        <div class="form-row">
-          <div>
-            <label>Name</label>
-            <input type="text" id="p-name" placeholder="Groq"/>
-          </div>
-          <div>
-            <label>Base URL</label>
-            <input type="url" id="p-url" placeholder="https://api.groq.com/openai/v1"/>
-          </div>
-          <div>
-            <label>API Key</label>
-            <div class="input-wrap">
-              <input type="password" id="p-key" placeholder="sk-..."/>
-              <button class="toggle-vis" onclick="toggleVis('p-key')">👁</button>
-            </div>
-          </div>
+    <div class="tab active" id="tab-providers">
+      <div class="ub">
+        <div class="ubh" onclick="this.classList.toggle('open');this.nextElementSibling.classList.toggle('open')">
+          <span>📖 How to use the proxy</span><span class="chev">▾</span>
         </div>
-        <div id="add-error" class="alert alert-error" style="display:none"></div>
-        <button class="btn btn-primary" onclick="addProvider()">+ Add Provider</button>
-      </div>
-
-      <div class="hint">
-        <div class="hint-header" onclick="toggleHint()">
-          <span>📖 Usage examples</span>
-          <span class="hint-chevron" id="hint-chevron">▼</span>
-        </div>
-        <div class="hint-body" id="hint-body">
-          <p style="color:var(--muted);font-size:12px">Route to a specific provider by prefixing the model name with <code style="color:var(--accent)">providerName/</code>:</p>
-          <pre id="hint-pre">Loading...</pre>
+        <div class="ubc">
+          <p style="color:var(--text-dim);font-size:12px">Route to a specific provider using <code style="font-family:var(--mono);color:var(--accent)">providerName/modelName</code>:</p>
+          <pre>curl https://YOUR-SPACE.hf.space/v1/chat/completions \
+  -H "Authorization: Bearer YOUR_MASTER_KEY" \
+  -H "Content-Type: application/json" \
+  -d '{"model":"groq/llama3-8b-8192","messages":[{"role":"user","content":"Hello!"}]}'</pre>
         </div>
       </div>
-
       <div class="card">
-        <div class="card-title">Configured Providers</div>
-        <div class="table-wrap">
-          <table>
-            <thead><tr>
-              <th>Name</th><th>Base URL</th><th>API Key</th><th>Default</th><th>Enabled</th><th>Actions</th>
-            </tr></thead>
-            <tbody id="providers-tbody">
-              <tr><td colspan="6" class="empty-state"><div class="icon">🔌</div><div>No providers yet. Add one above.</div></td></tr>
-            </tbody>
-          </table>
+        <div class="card-title">Add Provider</div>
+        <div class="form-row cols-3">
+          <div><label>Name</label><input type="text" id="an" placeholder="Groq"/></div>
+          <div><label>Base URL</label><input type="text" id="au" placeholder="https://api.groq.com/openai/v1"/></div>
+          <div><label>API Key</label><div class="iw"><input type="password" id="ak" placeholder="sk-..."/><button class="tv" onclick="tv('ak',this)">show</button></div></div>
         </div>
+        <button class="btn bp" onclick="addProvider()">+ Add Provider</button>
+      </div>
+      <div class="card" style="padding:0">
+        <div class="tw"><table>
+          <thead><tr><th>Name</th><th>Base URL</th><th>Key</th><th>Default</th><th>Enabled</th><th>Actions</th></tr></thead>
+          <tbody id="ptb"><tr><td colspan="6" class="empty">Loading…</td></tr></tbody>
+        </table></div>
       </div>
     </div>
 
     <!-- LOGS -->
-    <div id="panel-logs" class="panel">
-      <div class="card">
-        <div class="card-title" style="display:flex;align-items:center;gap:8px">
-          Request Logs
-          <span style="color:var(--muted);font-weight:400;font-size:11px">Last 200 · auto-refresh 5s</span>
-          <div class="spacer"></div>
-          <button class="btn btn-ghost btn-sm" onclick="loadLogs()">↻ Refresh</button>
-        </div>
-        <div class="table-wrap">
-          <table>
-            <thead><tr>
-              <th>Time</th><th>Provider</th><th>Model</th><th>Endpoint</th><th>Status</th><th>Latency</th>
-            </tr></thead>
-            <tbody id="logs-tbody">
-              <tr><td colspan="6" class="empty-state"><div>No requests logged yet.</div></td></tr>
-            </tbody>
-          </table>
-        </div>
+    <div class="tab" id="tab-logs">
+      <div class="sh"><h2>Request Logs</h2><span style="font-size:12px;color:var(--text-dim)">Auto-refreshes every 5s · last 200</span></div>
+      <div class="card" style="padding:0">
+        <div class="tw"><table>
+          <thead><tr><th>Time</th><th>Provider</th><th>Model</th><th>Path</th><th>Status</th><th>Latency</th><th>Stream</th></tr></thead>
+          <tbody id="ltb"><tr><td colspan="7" class="empty">No requests yet.</td></tr></tbody>
+        </table></div>
       </div>
     </div>
 
     <!-- SETTINGS -->
-    <div id="panel-settings" class="panel">
+    <div class="tab" id="tab-settings">
       <div class="card">
-        <div class="card-title">Settings</div>
-        <div class="setting-row">
-          <div class="setting-info">
-            <h3>Master API Key</h3>
-            <p>Use this as the Bearer token for all proxy requests.</p>
-          </div>
-          <div class="key-display" id="master-key-display">••••••••••••••••</div>
-          <button class="btn btn-ghost btn-sm" onclick="toggleShowKey()">Show</button>
-          <button class="btn btn-ghost btn-sm" onclick="copyKey()">Copy</button>
-        </div>
-        <div class="setting-row">
-          <div class="setting-info">
-            <h3>Regenerate Master Key</h3>
-            <p>Invalidates the current key immediately. You'll be logged out.</p>
-          </div>
-          <button class="btn btn-danger btn-sm" onclick="regenKey()">Regenerate</button>
-        </div>
-        <div class="setting-row">
-          <div class="setting-info">
-            <h3>Default Provider</h3>
-            <p>Used when no <code style="color:var(--accent)">providerName/</code> prefix is given.</p>
-          </div>
-          <select id="default-provider-select" onchange="setDefault(this.value)"
-            style="background:#0d1117;border:1px solid var(--border);border-radius:6px;padding:6px 10px;color:var(--text);font-family:var(--mono);font-size:13px">
-            <option value="">Loading...</option>
-          </select>
+        <div class="card-title">Master API Key</div>
+        <p style="color:var(--text-dim);font-size:13px;margin-bottom:14px">Authenticates all proxy requests and dashboard access.</p>
+        <div style="display:flex;gap:10px;align-items:center;flex-wrap:wrap">
+          <code class="mono" id="kd" style="background:var(--bg);border:1px solid var(--border);padding:8px 14px;border-radius:6px">loading…</code>
+          <button class="btn bs sm" onclick="copyKey()">Copy Key</button>
+          <button class="btn bd sm" onclick="regenKey()">Regenerate</button>
         </div>
+        <p style="color:var(--text-dim);font-size:12px;margin-top:10px">⚠ Regenerating invalidates the current key immediately.</p>
+      </div>
+      <div class="card">
+        <div class="card-title">Default Provider</div>
+        <p style="color:var(--text-dim);font-size:13px;margin-bottom:10px">Requests without a <code class="mono" style="font-size:12px">providerName/</code> prefix route here. Set via the Default toggle in Providers.</p>
+        <div id="defp" style="font-family:var(--mono);color:var(--accent);font-size:13px">loading…</div>
+      </div>
+      <div class="card">
+        <div class="card-title">Base Endpoint</div>
+        <code class="mono" id="burl" style="background:var(--bg);border:1px solid var(--border);padding:8px 14px;border-radius:6px;font-size:12px;display:block"></code>
       </div>
     </div>
 
-  </div>
+  </main>
 </div>
-
-<div id="toast"></div>
-
+<div id="flash"></div>
 <script>
-const API = '';
-let masterKey = '';
-let keyVisible = false;
-let logsInterval = null;
-
-// ---------- Auth ----------
-function getKey(){return sessionStorage.getItem('master_key')||''}
-function setKey(k){sessionStorage.setItem('master_key',k)}
-function clearKey(){sessionStorage.removeItem('master_key')}
-
-function headers(extra={}){return{Authorization:'Bearer '+getKey(),'Content-Type':'application/json',...extra}}
-
-async function doLogin(){
-  const k=document.getElementById('login-key').value.trim();
-  if(!k)return;
-  setKey(k);
-  const ok=await checkAuth();
-  if(ok){showApp()}
-  else{clearKey();document.getElementById('login-error').textContent='Invalid key';document.getElementById('login-error').style.display='block'}
+let masterKey = sessionStorage.getItem('mk') || '';
+let fullKey = '';
+
+async function apiFetch(path, {key, method='GET', body}={}) {
+  const k = key||masterKey;
+  const opts = {method, headers:{'Authorization':`Bearer ${k}`,'Content-Type':'application/json'}};
+  if(body) opts.body = JSON.stringify(body);
+  return fetch(path, opts);
 }
 
-async function checkAuth(){
-  try{const r=await fetch('/api/me',{headers:headers()});return r.ok}catch{return false}
+async function doLogin() {
+  const k = document.getElementById('lk').value.trim();
+  if(!k) return;
+  const r = await apiFetch('/api/providers',{key:k}).catch(()=>null);
+  if(r&&r.ok) { masterKey=k; sessionStorage.setItem('mk',k); showApp(); }
+  else document.getElementById('lerr').style.display='block';
 }
+document.getElementById('lk').addEventListener('keydown',e=>{ if(e.key==='Enter') doLogin(); });
 
-function doLogout(){clearKey();location.reload()}
-
-function showApp(){
+function showApp() {
   document.getElementById('login-screen').style.display='none';
-  document.getElementById('app-screen').style.display='block';
-  init();
+  document.getElementById('app').style.display='flex';
+  document.getElementById('burl').textContent = location.origin+'/v1';
+  loadAll(); setInterval(loadLogs,5000); setInterval(updateStatus,10000); updateStatus();
 }
 
-window.onload=async()=>{
-  if(getKey()&&await checkAuth()){showApp()}
-  else{document.getElementById('login-screen').style.display='block'}
-}
+if(masterKey) apiFetch('/api/providers').then(r=>{ if(r.ok) showApp(); else { masterKey=''; sessionStorage.removeItem('mk'); } }).catch(()=>{});
 
-// ---------- Init ----------
-function init(){
-  loadProviders();
-  loadStatus();
-  buildHint();
-  setInterval(loadStatus,15000);
+function flash(msg,type='ok') {
+  const el=document.getElementById('flash');
+  el.textContent=msg; el.className=`show ${type}`;
+  clearTimeout(el._t); el._t=setTimeout(()=>el.className='',3000);
 }
 
-// ---------- Tabs ----------
-function switchTab(name,el){
-  document.querySelectorAll('.panel').forEach(p=>p.classList.remove('active'));
+function showTab(name,btn) {
   document.querySelectorAll('.tab').forEach(t=>t.classList.remove('active'));
-  document.getElementById('panel-'+name).classList.add('active');
-  el.classList.add('active');
-  if(name==='logs'){loadLogs();if(!logsInterval)logsInterval=setInterval(loadLogs,5000)}
-  else{clearInterval(logsInterval);logsInterval=null}
-  if(name==='settings')loadSettings();
-}
-
-// ---------- Status ----------
-async function loadStatus(){
-  try{
-    const r=await fetch('/health');
-    const d=await r.json();
-    document.getElementById('status-dot').style.background=r.ok?'var(--success)':'var(--danger)';
-    document.getElementById('status-label').textContent=`${d.providers} provider${d.providers!==1?'s':''} active`;
-  }catch{document.getElementById('status-dot').style.background='var(--danger)'}
+  document.querySelectorAll('nav button').forEach(b=>b.classList.remove('active'));
+  document.getElementById(`tab-${name}`).classList.add('active');
+  btn.classList.add('active');
+  if(name==='logs') loadLogs();
+  if(name==='settings') loadSettings();
 }
 
-// ---------- Providers ----------
-async function loadProviders(){
-  const r=await fetch('/api/providers',{headers:headers()});
-  if(!r.ok)return;
-  const providers=await r.json();
-  renderProviders(providers);
-  // also update settings dropdown
-  const sel=document.getElementById('default-provider-select');
-  sel.innerHTML='<option value="">None</option>'+providers.map(p=>`<option value="${p.id}" ${p.is_default?'selected':''}>${p.name}</option>`).join('');
+async function loadProviders() {
+  const r = await apiFetch('/api/providers');
+  if(!r.ok) return;
+  const list = await r.json();
+  const tb = document.getElementById('ptb');
+  if(!list.length) { tb.innerHTML='<tr><td colspan="6" class="empty">No providers yet.</td></tr>'; return; }
+  tb.innerHTML = list.map(p=>`<tr>
+    <td><strong>${e(p.name)}</strong>${p.is_default?' <span class="pill pb">default</span>':''}</td>
+    <td class="mono" style="max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" title="${e(p.base_url)}">${e(p.base_url)}</td>
+    <td class="mono" style="color:var(--text-dim)">${e(p.key_preview)}</td>
+    <td><label class="toggle"><input type="checkbox" ${p.is_default?'checked':''} onchange="setDefault(${p.id},this.checked)"/><span class="slider"></span></label></td>
+    <td><label class="toggle"><input type="checkbox" ${p.enabled?'checked':''} onchange="setEnabled(${p.id},this.checked)"/><span class="slider"></span></label></td>
+    <td style="display:flex;gap:6px;flex-wrap:wrap">
+      <button class="btn bs sm" onclick="editUrl(${p.id},'${e(p.base_url)}')">Edit URL</button>
+      <button class="btn bs sm" onclick="editKey(${p.id})">Edit Key</button>
+      <button class="btn bd sm" onclick="delProvider(${p.id},'${e(p.name)}')">Delete</button>
+    </td></tr>`).join('');
 }
 
-function renderProviders(providers){
-  const tb=document.getElementById('providers-tbody');
-  if(!providers.length){
-    tb.innerHTML='<tr><td colspan="6" style="text-align:center;padding:40px;color:var(--muted)"><div style="font-size:32px;margin-bottom:12px">🔌</div><div>No providers yet. Add one above.</div></td></tr>';
-    return;
-  }
-  tb.innerHTML=providers.map(p=>`
-    <tr>
-      <td><span class="mono">${esc(p.name)}</span>${p.is_default?'<span class="badge badge-blue" style="margin-left:8px">default</span>':''}</td>
-      <td><span class="mono" style="color:var(--muted)">${esc(p.base_url)}</span></td>
-      <td><span class="mono" style="color:var(--muted)">••••${esc(p.key_tail)}</span></td>
-      <td>
-        <label class="toggle"><input type="checkbox" ${p.is_default?'checked':''} onchange="setProviderDefault(${p.id})"/><span class="slider"></span></label>
-      </td>
-      <td>
-        <label class="toggle"><input type="checkbox" ${p.enabled?'checked':''} onchange="toggleProvider(${p.id},this.checked)"/><span class="slider"></span></label>
-      </td>
-      <td style="display:flex;gap:6px">
-        <button class="btn btn-ghost btn-sm" onclick="editProvider(${p.id},'${esc(p.name)}','${esc(p.base_url)}')">Edit</button>
-        <button class="btn btn-danger btn-sm" onclick="deleteProvider(${p.id})">Delete</button>
-      </td>
-    </tr>
-  `).join('');
+async function addProvider() {
+  const name=document.getElementById('an').value.trim();
+  const url=document.getElementById('au').value.trim();
+  const key=document.getElementById('ak').value.trim();
+  if(!name||!url||!key){flash('All fields required','err');return;}
+  const r=await apiFetch('/api/providers',{method:'POST',body:{name,base_url:url,api_key:key}});
+  if(r.ok){flash(`Provider "${name}" added`);document.getElementById('an').value='';document.getElementById('au').value='';document.getElementById('ak').value='';loadProviders();}
+  else{const d=await r.json().catch(()=>({}));flash(d.detail||'Failed','err');}
 }
 
-async function addProvider(){
-  const name=document.getElementById('p-name').value.trim();
-  const url=document.getElementById('p-url').value.trim();
-  const key=document.getElementById('p-key').value.trim();
-  const errEl=document.getElementById('add-error');
-  errEl.style.display='none';
-  if(!name||!url||!key){errEl.textContent='All fields required';errEl.style.display='block';return}
-  const r=await fetch('/api/providers',{method:'POST',headers:headers(),body:JSON.stringify({name,base_url:url,api_key:key})});
-  if(!r.ok){const e=await r.json();errEl.textContent=e.detail||'Error';errEl.style.display='block';return}
-  document.getElementById('p-name').value='';
-  document.getElementById('p-url').value='';
-  document.getElementById('p-key').value='';
-  toast('Provider added ✓');
-  loadProviders();
+async function delProvider(id,name){
+  if(!confirm(`Delete "${name}"?`)) return;
+  const r=await apiFetch(`/api/providers/${id}`,{method:'DELETE'});
+  if(r.ok){flash(`Deleted "${name}"`);loadProviders();}else flash('Delete failed','err');
 }
+async function setEnabled(id,enabled){await apiFetch(`/api/providers/${id}`,{method:'PATCH',body:{enabled}});loadProviders();}
+async function setDefault(id,is_default){await apiFetch(`/api/providers/${id}`,{method:'PATCH',body:{is_default}});loadProviders();loadSettings();}
+async function editUrl(id,cur){const u=prompt('New Base URL:',cur);if(!u)return;const r=await apiFetch(`/api/providers/${id}`,{method:'PATCH',body:{base_url:u.trim()}});if(r.ok){flash('URL updated');loadProviders();}else flash('Failed','err');}
+async function editKey(id){const k=prompt('New API Key:');if(!k)return;const r=await apiFetch(`/api/providers/${id}`,{method:'PATCH',body:{api_key:k.trim()}});if(r.ok){flash('Key updated');loadProviders();}else flash('Failed','err');}
 
-async function deleteProvider(id){
-  if(!confirm('Delete this provider?'))return;
-  await fetch(`/api/providers/${id}`,{method:'DELETE',headers:headers()});
-  loadProviders();
-  toast('Provider deleted');
-}
-
-async function toggleProvider(id,enabled){
-  await fetch(`/api/providers/${id}`,{method:'PATCH',headers:headers(),body:JSON.stringify({enabled})});
-  loadProviders();
-}
-
-async function setProviderDefault(id){
-  await fetch(`/api/providers/${id}`,{method:'PATCH',headers:headers(),body:JSON.stringify({is_default:true})});
-  loadProviders();
-  toast('Default provider updated');
-}
-
-function editProvider(id,name,url){
-  const newUrl=prompt('Base URL:',url);
-  if(newUrl===null)return;
-  const newKey=prompt('New API Key (leave blank to keep current):','');
-  const body={base_url:newUrl};
-  if(newKey)body.api_key=newKey;
-  fetch(`/api/providers/${id}`,{method:'PATCH',headers:headers(),body:JSON.stringify(body)})
-    .then(()=>{loadProviders();toast('Provider updated')});
-}
-
-// ---------- Logs ----------
 async function loadLogs(){
-  const r=await fetch('/api/logs',{headers:headers()});
-  if(!r.ok)return;
+  const r=await apiFetch('/api/logs');if(!r.ok)return;
   const logs=await r.json();
-  const tb=document.getElementById('logs-tbody');
-  if(!logs.length){tb.innerHTML='<tr><td colspan="6" style="text-align:center;padding:40px;color:var(--muted)">No requests logged yet.</td></tr>';return}
+  const tb=document.getElementById('ltb');
+  if(!logs.length){tb.innerHTML='<tr><td colspan="7" class="empty">No requests yet.</td></tr>';return;}
   tb.innerHTML=logs.map(l=>{
-    const sc=l.status_code;
-    const cls=sc<300?'status-2':sc<500?'status-4':'status-5';
-    const ts=new Date(l.timestamp+'Z').toLocaleTimeString();
-    return`<tr>
-      <td class="mono" style="color:var(--muted);font-size:11px">${ts}</td>
-      <td><span class="badge badge-blue">${esc(l.provider||'?')}</span></td>
-      <td class="mono" style="font-size:11px">${esc(l.model||'')}</td>
-      <td class="mono" style="color:var(--muted);font-size:11px">${esc(l.endpoint||'')}</td>
-      <td class="${cls} mono">${sc}</td>
-      <td class="latency mono">${l.latency_ms?l.latency_ms.toFixed(0)+'ms':'—'}</td>
-    </tr>`;
+    const ok=l.status_code&&l.status_code<400;
+    const ts=l.timestamp?new Date(l.timestamp+'Z').toLocaleTimeString():'—';
+    return `<tr><td class="mono">${ts}</td><td><span class="pill pb">${e(l.provider_name||'—')}</span></td><td class="mono" style="max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${e(l.model||'—')}</td><td class="mono" style="color:var(--text-dim)">${e(l.path||'—')}</td><td><span class="pill ${ok?'pg':'pr'}">${l.status_code||'—'}</span></td><td class="mono">${l.latency_ms!=null?l.latency_ms+' ms':'—'}</td><td>${l.streaming?'<span class="pill py">SSE</span>':'—'}</td></tr>`;
   }).join('');
 }
 
-// ---------- Settings ----------
 async function loadSettings(){
-  const r=await fetch('/api/settings',{headers:headers()});
-  if(!r.ok)return;
-  const d=await r.json();
-  masterKey=d.master_key;
-  document.getElementById('master-key-display').textContent=keyVisible?masterKey:'••••••••••••••••';
-}
-
-async function setDefault(id){
-  if(!id)return;
-  await fetch(`/api/providers/${id}`,{method:'PATCH',headers:headers(),body:JSON.stringify({is_default:true})});
-  loadProviders();
-  toast('Default provider updated');
-}
-
-function toggleShowKey(){
-  keyVisible=!keyVisible;
-  document.getElementById('master-key-display').textContent=keyVisible?masterKey:'••••••••••••••••';
-}
-
-function copyKey(){
-  navigator.clipboard.writeText(masterKey).then(()=>toast('Key copied to clipboard'));
+  const r=await apiFetch('/api/settings/key');if(!r.ok)return;
+  const d=await r.json();fullKey=d.full_key;
+  document.getElementById('kd').textContent=d.key_preview;
+  const pr=await apiFetch('/api/providers');
+  if(pr.ok){const ps=await pr.json();const def=ps.find(p=>p.is_default);
+    document.getElementById('defp').textContent=def?`${def.name}  →  ${def.base_url}`:'No default set.';}
 }
 
+function copyKey(){if(!fullKey)return;navigator.clipboard.writeText(fullKey).then(()=>flash('Key copied'));}
 async function regenKey(){
-  if(!confirm('Regenerate master key? You will be logged out.'))return;
-  const r=await fetch('/api/settings/regen-key',{method:'POST',headers:headers()});
-  if(r.ok){clearKey();location.reload()}
-}
-
-// ---------- Hint ----------
-function buildHint(){
-  const origin=location.origin;
-  document.getElementById('hint-pre').textContent=`# Route to a specific provider (prefix with providerName/)
-curl ${origin}/v1/chat/completions \\
-  -H "Authorization: Bearer YOUR_MASTER_KEY" \\
-  -H "Content-Type: application/json" \\
-  -d '{
-    "model": "groq/llama3-8b-8192",
-    "messages": [{"role":"user","content":"Hello!"}]
-  }'
-
-# Use default provider (no prefix)
-curl ${origin}/v1/chat/completions \\
-  -H "Authorization: Bearer YOUR_MASTER_KEY" \\
-  -d '{"model":"gpt-4o","messages":[{"role":"user","content":"Hi"}]}'
-
-# List all models across all providers
-curl ${origin}/v1/models \\
-  -H "Authorization: Bearer YOUR_MASTER_KEY"`;
-}
-
-function toggleHint(){
-  const body=document.getElementById('hint-body');
-  const ch=document.getElementById('hint-chevron');
-  const open=body.classList.toggle('open');
-  ch.textContent=open?'▲':'▼';
+  if(!confirm('Regenerate master key? All clients will break immediately.')) return;
+  const r=await apiFetch('/api/settings/key/regenerate',{method:'POST'});
+  if(r.ok){const d=await r.json();fullKey=d.key;masterKey=d.key;sessionStorage.setItem('mk',d.key);
+    document.getElementById('kd').textContent=`...${d.key.slice(-8)}`;flash('Key regenerated — copy it now!');}
+  else flash('Failed','err');
 }
 
-// ---------- Utils ----------
-function esc(s){if(!s)return'';return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;')}
-
-function toggleVis(id){
-  const el=document.getElementById(id);
-  el.type=el.type==='password'?'text':'password';
+async function updateStatus(){
+  try{const r=await fetch('/health');if(r.ok){const d=await r.json();
+    document.getElementById('hs').innerHTML=`<span style="color:var(--green)">●</span> ${d.providers} provider${d.providers!==1?'s':''}`;}}
+  catch{document.getElementById('hs').innerHTML='<span style="color:var(--red)">●</span> offline';}
 }
 
-function toast(msg){
-  const t=document.getElementById('toast');
-  t.textContent=msg;t.classList.add('show');
-  setTimeout(()=>t.classList.remove('show'),2500);
-}
+function e(s){return String(s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');}
+function tv(id,btn){const el=document.getElementById(id);if(el.type==='password'){el.type='text';btn.textContent='hide';}else{el.type='password';btn.textContent='show';}}
+function loadAll(){loadProviders();loadLogs();loadSettings();}
 </script>
 </body>
 </html>"""
@@ -738,275 +431,214 @@ function toast(msg){
 
 @app.get("/", response_class=HTMLResponse)
 async def dashboard():
-    return HTMLResponse(content=DASHBOARD_HTML)
-
+    return DASHBOARD_HTML
+
+
+# ── Provider CRUD ─────────────────────────────────────────────────────────────
+
+class ProviderCreate(BaseModel):
+    name: str; base_url: str; api_key: str
+
+class ProviderPatch(BaseModel):
+    base_url: str | None = None
+    api_key: str | None = None
+    enabled: bool | None = None
+    is_default: bool | None = None
+
+
+@app.get("/api/providers", dependencies=[Depends(verify_key)])
+async def get_providers(request: Request):
+    async with request.app.state.db() as s:
+        res = await s.execute(select(Provider).order_by(Provider.id))
+        ps  = res.scalars().all()
+    return [{"id":p.id,"name":p.name,"base_url":p.base_url,
+             "key_preview":f"...{p.api_key[-4:]}" if len(p.api_key)>=4 else "****",
+             "enabled":p.enabled,"is_default":p.is_default} for p in ps]
+
+
+@app.post("/api/providers", dependencies=[Depends(verify_key)])
+async def create_provider(body: ProviderCreate, request: Request):
+    async with request.app.state.db() as s:
+        ex = await s.execute(select(Provider).where(Provider.name == body.name))
+        if ex.scalar(): raise HTTPException(400, f"Provider '{body.name}' already exists")
+        p = Provider(name=body.name, base_url=body.base_url, api_key=body.api_key)
+        s.add(p); await s.commit(); await s.refresh(p)
+        return {"id": p.id, "name": p.name}
+
+
+@app.patch("/api/providers/{pid}", dependencies=[Depends(verify_key)])
+async def patch_provider(pid: int, body: ProviderPatch, request: Request):
+    async with request.app.state.db() as s:
+        p = await s.get(Provider, pid)
+        if not p: raise HTTPException(404, "Not found")
+        if body.base_url  is not None: p.base_url   = body.base_url
+        if body.api_key   is not None: p.api_key    = body.api_key
+        if body.enabled   is not None: p.enabled    = body.enabled
+        if body.is_default is not None:
+            if body.is_default:
+                await s.execute(update(Provider).where(Provider.id != pid).values(is_default=False))
+            p.is_default = body.is_default
+        await s.commit()
+    return {"ok": True}
 
-# ---------------------------------------------------------------------------
-# Internal dashboard API routes
-# ---------------------------------------------------------------------------
 
-@app.get("/api/me")
-async def me(_: bool = Depends(verify_master_key)):
+@app.delete("/api/providers/{pid}", dependencies=[Depends(verify_key)])
+async def delete_provider(pid: int, request: Request):
+    async with request.app.state.db() as s:
+        p = await s.get(Provider, pid)
+        if not p: raise HTTPException(404, "Not found")
+        await s.delete(p); await s.commit()
     return {"ok": True}
 
 
-@app.get("/api/providers")
-async def list_providers(_: bool = Depends(verify_master_key), db: Session = Depends(get_db)):
-    providers = db.query(Provider).order_by(Provider.created_at).all()
-    return [
-        {
-            "id": p.id,
-            "name": p.name,
-            "base_url": p.base_url,
-            "key_tail": p.api_key[-4:] if p.api_key else "????",
-            "enabled": p.enabled,
-            "is_default": p.is_default,
-        }
-        for p in providers
-    ]
-
-
-@app.post("/api/providers", status_code=201)
-async def create_provider(
-    body: dict,
-    _: bool = Depends(verify_master_key),
-    db: Session = Depends(get_db),
-):
-    name = body.get("name", "").strip()
-    base_url = body.get("base_url", "").strip().rstrip("/")
-    api_key = body.get("api_key", "").strip()
-    if not name or not base_url or not api_key:
-        raise HTTPException(400, "name, base_url, and api_key are required")
-    exists = db.query(Provider).filter(func.lower(Provider.name) == name.lower()).first()
-    if exists:
-        raise HTTPException(409, f"Provider '{name}' already exists")
-    is_first = db.query(Provider).count() == 0
-    p = Provider(name=name, base_url=base_url, api_key=api_key, is_default=is_first)
-    db.add(p)
-    db.commit()
-    db.refresh(p)
-    return {"id": p.id, "name": p.name}
-
-
-@app.patch("/api/providers/{provider_id}")
-async def update_provider(
-    provider_id: int,
-    body: dict,
-    _: bool = Depends(verify_master_key),
-    db: Session = Depends(get_db),
-):
-    p = db.query(Provider).filter(Provider.id == provider_id).first()
-    if not p:
-        raise HTTPException(404, "Provider not found")
-    if "base_url" in body:
-        p.base_url = body["base_url"].strip().rstrip("/")
-    if "api_key" in body:
-        p.api_key = body["api_key"].strip()
-    if "enabled" in body:
-        p.enabled = bool(body["enabled"])
-    if body.get("is_default"):
-        # Clear other defaults
-        db.query(Provider).filter(Provider.id != provider_id).update({"is_default": False})
-        p.is_default = True
-    db.commit()
-    return {"ok": True}
+# ── Logs ──────────────────────────────────────────────────────────────────────
 
+@app.get("/api/logs", dependencies=[Depends(verify_key)])
+async def get_logs(request: Request):
+    async with request.app.state.db() as s:
+        res = await s.execute(select(RequestLog).order_by(RequestLog.id.desc()).limit(200))
+        logs = res.scalars().all()
+    return [{"id":l.id,"timestamp":l.timestamp.isoformat() if l.timestamp else None,
+             "provider_name":l.provider_name,"model":l.model,"status_code":l.status_code,
+             "latency_ms":round(l.latency_ms,1) if l.latency_ms else None,
+             "path":l.path,"streaming":l.streaming} for l in logs]
 
-@app.delete("/api/providers/{provider_id}")
-async def delete_provider(
-    provider_id: int,
-    _: bool = Depends(verify_master_key),
-    db: Session = Depends(get_db),
-):
-    p = db.query(Provider).filter(Provider.id == provider_id).first()
-    if not p:
-        raise HTTPException(404, "Provider not found")
-    db.delete(p)
-    db.commit()
-    return {"ok": True}
 
+# ── Settings ──────────────────────────────────────────────────────────────────
 
-@app.get("/api/logs")
-async def get_logs(_: bool = Depends(verify_master_key), db: Session = Depends(get_db)):
-    logs = (
-        db.query(RequestLog)
-        .order_by(RequestLog.timestamp.desc())
-        .limit(200)
-        .all()
-    )
-    return [
-        {
-            "timestamp": r.timestamp.isoformat() if r.timestamp else None,
-            "provider": r.provider,
-            "model": r.model,
-            "status_code": r.status_code,
-            "latency_ms": r.latency_ms,
-            "endpoint": r.endpoint,
-        }
-        for r in logs
-    ]
-
-
-@app.get("/api/settings")
-async def get_settings(_: bool = Depends(verify_master_key), db: Session = Depends(get_db)):
-    return {"master_key": get_master_key(db)}
-
-
-@app.post("/api/settings/regen-key")
-async def regen_key(_: bool = Depends(verify_master_key), db: Session = Depends(get_db)):
-    new_key = "sk-proxy-" + secrets.token_urlsafe(32)
-    row = db.query(Setting).filter(Setting.key == "master_key").first()
-    if row:
-        row.value = new_key
-    else:
-        db.add(Setting(key="master_key", value=new_key))
-    db.commit()
-    logger.info(f"Master key regenerated: {new_key}")
-    return {"ok": True}
+@app.get("/api/settings/key", dependencies=[Depends(verify_key)])
+async def get_key(request: Request):
+    async with request.app.state.db() as s:
+        row = await s.get(Settings, "master_key")
+    k = row.value if row else ""
+    return {"key_preview": f"...{k[-8:]}" if len(k)>=8 else "****", "full_key": k}
 
 
-# ---------------------------------------------------------------------------
-# Health
-# ---------------------------------------------------------------------------
+@app.post("/api/settings/key/regenerate", dependencies=[Depends(verify_key)])
+async def regen_key(request: Request):
+    new_key = f"umk-{secrets.token_urlsafe(32)}"
+    async with request.app.state.db() as s:
+        row = await s.get(Settings, "master_key")
+        if row: row.value = new_key
+        else: s.add(Settings(key="master_key", value=new_key))
+        await s.commit()
+    return {"key": new_key}
 
-@app.get("/health")
-async def health(db: Session = Depends(get_db)):
-    n = db.query(Provider).filter(Provider.enabled == True).count()
-    return {"status": "ok", "providers": n}
 
+# ── Proxy helpers ─────────────────────────────────────────────────────────────
+
+async def _log(session, provider_name, model, status_code, latency_ms, path, streaming):
+    session.add(RequestLog(timestamp=datetime.utcnow(), provider_name=provider_name,
+                           model=model, status_code=status_code, latency_ms=latency_ms,
+                           path=path, streaming=streaming))
+    await session.commit()
+    # Prune to 500 rows
+    res = await session.execute(select(RequestLog.id).order_by(RequestLog.id.desc()).offset(500))
+    old = res.scalars().all()
+    if old:
+        await session.execute(delete(RequestLog).where(RequestLog.id.in_(old)))
+        await session.commit()
 
-# ---------------------------------------------------------------------------
-# Model listing — aggregate from all enabled providers
-# ---------------------------------------------------------------------------
 
-@app.get("/v1/models")
-async def list_models(_: bool = Depends(verify_master_key), db: Session = Depends(get_db)):
-    providers = db.query(Provider).filter(Provider.enabled == True).all()
+def _parse_provider(model: str, providers):
+    if "/" in model:
+        prefix, real = model.split("/", 1)
+        for p in providers:
+            if p.name.lower() == prefix.lower():
+                return p, real
+    return None, model
+
+
+# ── Models aggregation ────────────────────────────────────────────────────────
+
+@app.get("/v1/models", dependencies=[Depends(verify_key)])
+async def list_models(request: Request):
+    async with request.app.state.db() as s:
+        res = await s.execute(select(Provider).where(Provider.enabled == True))
+        providers = res.scalars().all()
     all_models = []
-    async with httpx.AsyncClient(timeout=10) as client:
+    async with httpx.AsyncClient(timeout=httpx.Timeout(10.0)) as client:
         for p in providers:
             try:
-                r = await client.get(
-                    f"{p.base_url}/models",
-                    headers={"Authorization": f"Bearer {p.api_key}"},
-                )
-                if r.is_success:
-                    data = r.json()
-                    for m in data.get("data", []):
-                        m["id"] = f"{p.name}/{m['id']}"
+                r = await client.get(f"{p.base_url.rstrip('/')}/models",
+                                     headers={"Authorization": f"Bearer {p.api_key}"})
+                if r.status_code == 200:
+                    for m in r.json().get("data", []):
+                        m["id"] = f"{p.name.lower()}/{m['id']}"
                         all_models.append(m)
-            except Exception as exc:
-                logger.warning(f"Could not fetch models from {p.name}: {exc}")
-    return {"object": "list", "data": all_models}
+            except Exception:
+                pass
+    return JSONResponse({"object": "list", "data": all_models})
 
 
-# ---------------------------------------------------------------------------
-# Core proxy — /v1/* catch-all
-# ---------------------------------------------------------------------------
+# ── Generic proxy ─────────────────────────────────────────────────────────────
 
-@app.api_route("/v1/{path:path}", methods=["GET", "POST", "PUT", "DELETE", "PATCH", "OPTIONS"])
-async def proxy(path: str, request: Request, db: Session = Depends(get_db)):
-    # Auth
-    auth = request.headers.get("Authorization", "")
-    if not auth.startswith("Bearer "):
-        raise HTTPException(401, "Missing Authorization header")
-    token = auth[len("Bearer "):]
-    master = get_master_key(db)
-    if not secrets.compare_digest(token, master):
-        raise HTTPException(401, "Invalid master API key")
-
-    # Parse body (if any)
+@app.api_route("/v1/{path:path}", methods=["GET","POST","PUT","DELETE","PATCH"],
+               dependencies=[Depends(verify_key)])
+async def proxy(request: Request, path: str):
     body_bytes = await request.body()
-    body_json: Optional[dict] = None
-    model_str = ""
-    try:
-        if body_bytes:
-            body_json = __import__("json").loads(body_bytes)
-            model_str = body_json.get("model", "")
-    except Exception:
-        pass
-
-    # Route
-    provider, real_model = parse_model(model_str, db)
-
-    # Rewrite model in body
-    downstream_body = body_bytes
-    if body_json is not None and model_str:
+    body_json  = None
+    model_raw  = ""
+    if body_bytes:
+        try:
+            body_json = json.loads(body_bytes)
+            model_raw = body_json.get("model", "")
+        except Exception:
+            pass
+
+    async with request.app.state.db() as s:
+        res       = await s.execute(select(Provider).where(Provider.enabled == True))
+        providers = res.scalars().all()
+        if not providers:
+            raise HTTPException(503, "No providers configured")
+
+        provider, real_model = _parse_provider(model_raw, providers)
+        if provider is None:
+            for p in providers:
+                if p.is_default: provider = p; break
+            if provider is None:
+                provider = providers[0]
+
+    # Rewrite model name in body
+    if body_json is not None and model_raw:
         body_json["model"] = real_model
-        downstream_body = __import__("json").dumps(body_json).encode()
+        body_bytes = json.dumps(body_json).encode()
 
-    # Forward headers (strip host + auth)
-    skip = {"host", "authorization", "content-length"}
-    forward_headers = {
-        k: v for k, v in request.headers.items() if k.lower() not in skip
+    is_streaming = bool(body_json and body_json.get("stream"))
+    target_url   = f"{provider.base_url.rstrip('/')}/{path.lstrip('/')}"
+    headers      = {
+        "Authorization": f"Bearer {provider.api_key}",
+        "Content-Type":  request.headers.get("Content-Type", "application/json"),
     }
-    forward_headers["Authorization"] = f"Bearer {provider.api_key}"
-
-    url = f"{provider.base_url}/{path}"
-    if request.query_params:
-        url += "?" + str(request.query_params)
 
-    is_streaming = body_json.get("stream", False) if body_json else False
-    start = time.perf_counter()
-    status_code = 200
+    start = time.time()
 
     if is_streaming:
-        async def stream_gen():
-            nonlocal status_code
-            try:
-                async with httpx.AsyncClient(timeout=None) as client:
-                    async with client.stream(
-                        request.method,
-                        url,
-                        headers=forward_headers,
-                        content=downstream_body,
-                    ) as resp:
-                        status_code = resp.status_code
-                        async for chunk in resp.aiter_bytes():
-                            yield chunk
-            except Exception as exc:
-                logger.error(f"Stream error: {exc}")
-                yield b"data: [DONE]\n\n"
-            finally:
-                latency = (time.perf_counter() - start) * 1000
-                _log_async(db, provider.name, model_str or real_model, status_code, latency, f"/v1/{path}")
-
-        return StreamingResponse(
-            stream_gen(),
-            media_type="text/event-stream",
-            headers={
-                "Cache-Control": "no-cache",
-                "X-Accel-Buffering": "no",
-            },
-        )
-    else:
-        try:
-            async with httpx.AsyncClient(timeout=60) as client:
-                resp = await client.request(
-                    request.method,
-                    url,
-                    headers=forward_headers,
-                    content=downstream_body,
-                )
-            status_code = resp.status_code
-            latency = (time.perf_counter() - start) * 1000
-            log_request(db, provider.name, model_str or real_model, status_code, latency, f"/v1/{path}")
-
-            content_type = resp.headers.get("content-type", "application/json")
-            return JSONResponse(
-                content=resp.json() if "json" in content_type else {"raw": resp.text},
-                status_code=status_code,
-            )
-        except httpx.TimeoutException:
-            raise HTTPException(504, "Upstream provider timed out")
-        except Exception as exc:
-            logger.error(f"Proxy error: {exc}")
-            raise HTTPException(502, f"Proxy error: {exc}")
-
-
-def _log_async(db: Session, *args):
-    """Fire-and-forget log — called from streaming context after response."""
+        logged = False
+        async def generate() -> AsyncGenerator[bytes, None]:
+            nonlocal logged
+            async with httpx.AsyncClient(timeout=TIMEOUT) as client:
+                async with client.stream(request.method, target_url,
+                                         headers=headers, content=body_bytes) as resp:
+                    latency = (time.time() - start) * 1000
+                    if not logged:
+                        logged = True
+                        async with request.app.state.db() as ls:
+                            await _log(ls, provider.name, real_model,
+                                       resp.status_code, latency, path, True)
+                    async for chunk in resp.aiter_bytes():
+                        yield chunk
+        return StreamingResponse(generate(), media_type="text/event-stream")
+
+    async with httpx.AsyncClient(timeout=TIMEOUT) as client:
+        resp = await client.request(request.method, target_url,
+                                    headers=headers, content=body_bytes)
+    latency = (time.time() - start) * 1000
+    async with request.app.state.db() as s:
+        await _log(s, provider.name, real_model, resp.status_code, latency, path, False)
+
     try:
-        log_request(db, *args)
-    except Exception as exc:
-        logger.warning(f"Log write failed: {exc}")
+        return JSONResponse(content=resp.json(), status_code=resp.status_code)
+    except Exception:
+        return Response(content=resp.content, status_code=resp.status_code,
+                        media_type=resp.headers.get("content-type","application/octet-stream"))