ocb-cli 1.0.3 → 1.0.5

package/src/proxy.ts

@@ -139,7 +139,8 @@ app.use(express.json());
 app.use((req, res, next) => {
   res.header("Access-Control-Allow-Origin", "*");
   res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
-  res.header("Access-Control-Allow-Headers", "Content-Type, Authorization");
+  res.header("Access-Control-Allow-Headers", "Content-Type, Authorization, x-api-key");
+  res.header("Content-Type", "application/json");
   if (req.method === "OPTIONS") return res.sendStatus(200);
   next();
 });
@@ -187,12 +188,46 @@ app.post("/api/refresh-models", async (req, res) => {
   res.json({ success: true, count: availableModels.length });
 });
 
+app.post("/api/apply-claude-config", async (req, res) => {
+  try {
+    const { readFileSync, writeFileSync, existsSync, mkdirSync } = await import("fs");
+    const { join, dirname } = await import("path");
+    const homedir = process.env.USERPROFILE || process.env.HOME || process.env.HOMEPATH || "";
+    const settingsPath = join(homedir, ".claude", "settings.json");
+    const settingsDir = dirname(settingsPath);
+    if (!existsSync(settingsDir)) mkdirSync(settingsDir, { recursive: true });
+    let settings: any = {};
+    if (existsSync(settingsPath)) settings = JSON.parse(readFileSync(settingsPath, "utf-8"));
+    settings.env = settings.env || {};
+    settings.env.ANTHROPIC_BASE_URL = "http://localhost:8300";
+    settings.env.ANTHROPIC_API_KEY = "test";
+    settings.env.ANTHROPIC_MODEL = currentModel;
+    writeFileSync(settingsPath, JSON.stringify(settings, null, 2));
+    res.json({ success: true });
+  } catch (e) {
+    res.status(500).json({ success: false, error: e instanceof Error ? e.message : String(e) });
+  }
+});
+
 app.post("/api/reset-stats", (req, res) => {
   totalTokensUsed = 0;
   totalRequests = 0;
   res.json({ success: true });
 });
 
+const modelAliases: Record<string, string> = {
+  "claude-opus-4-5": "opencode/minimax-m2.5-free",
+  "claude-opus-4-5-thinking": "opencode/minimax-m2.5-free",
+  "claude-opus-4-6": "opencode/minimax-m2.5-free",
+  "claude-opus-4-6-thinking": "opencode/minimax-m2.5-free",
+  "claude-sonnet-4-5": "opencode/minimax-m2.5-free",
+  "claude-sonnet-4-5-thinking": "opencode/minimax-m2.5-free",
+  "claude-sonnet-4-5-20250929": "opencode/minimax-m2.5-free",
+  "claude-sonnet-4-5-20250929-thinking": "opencode/minimax-m2.5-free",
+  "claude-haiku-4-5": "opencode/minimax-m2.5-free",
+  "claude-haiku-4-5-20251001": "opencode/minimax-m2.5-free",
+};
+
 app.post("/api/reset-session", async (req, res) => {
   currentSessionId = await createSession(process.cwd());
   res.json({ success: true, sessionId: currentSessionId });
@@ -201,11 +236,62 @@ app.post("/api/reset-session", async (req, res) => {
 app.get("/v1/authenticate", (req, res) => res.json({ type: "authentication", authenticated: true }));
 app.get("/v1/whoami", (req, res) => res.json({ type: "user", id: "opencode-user", email: "opencode@local" }));
 
-app.get("/v1/models", (req, res) => res.json({ data: availableModels.map(m => ({ id: m.id, type: "model", name: m.name, supports_cached_previews: true, supports_system_instructions: true })) }));
-app.get("/v1/models/list", (req, res) => res.json({ data: availableModels.map(m => ({ id: m.id, type: "model", name: m.name, supports_cached_previews: true, supports_system_instructions: true })) }));
+app.get("/v1/models", (req, res) => {
+  const aliasModels = Object.keys(modelAliases).map(id => ({ 
+    id, 
+    type: "model" as const, 
+    name: id, 
+    display_name: id,
+    supports_cached_previews: true, 
+    supports_system_instructions: true,
+    supports_reasoning: true,
+    supports_vision: false
+  }));
+  const allModels = [...aliasModels, ...availableModels.map(m => ({ 
+    id: m.id, 
+    type: "model" as const, 
+    name: m.name,
+    display_name: m.name,
+    supports_cached_previews: true, 
+    supports_system_instructions: true,
+    supports_reasoning: true,
+    supports_vision: false
+  }))];
+  res.json({ data: allModels });
+});
+app.get("/v1/models/list", (req, res) => {
+  const aliasModels = Object.keys(modelAliases).map(id => ({ 
+    id, 
+    type: "model" as const, 
+    name: id,
+    display_name: id,
+    supports_cached_previews: true, 
+    supports_system_instructions: true,
+    supports_reasoning: true,
+    supports_vision: false
+  }));
+  const allModels = [...aliasModels, ...availableModels.map(m => ({ 
+    id: m.id, 
+    type: "model" as const, 
+    name: m.name,
+    display_name: m.name,
+    supports_cached_previews: true, 
+    supports_system_instructions: true,
+    supports_reasoning: true,
+    supports_vision: false
+  }))];
+  res.json({ data: allModels });
+});
 
 app.post("/v1/messages", async (req, res) => {
   try {
+    const requestedModel = req.body?.model || currentModel;
+    const actualModel = modelAliases[requestedModel] || requestedModel;
+    
+    if (modelAliases[requestedModel]) {
+      currentModel = modelAliases[requestedModel];
+    }
+    
     if (req.body?.max_tokens === undefined && req.body?.messages) {
       let totalTokens = 0;
       for (const msg of req.body.messages) {
@@ -217,7 +303,7 @@ app.post("/v1/messages", async (req, res) => {
     const { text, tokens } = await sendMessage(currentSessionId, req.body.messages);
     totalRequests++;
     totalTokensUsed += tokens;
-    res.json({ id: `msg_${Date.now()}`, type: "message", role: "assistant", content: [{ type: "text", text }], model: currentModel, stop_reason: "end_turn", usage: { input_tokens: Math.ceil(JSON.stringify(req.body.messages).length / 4), output_tokens: Math.ceil(text.length / 4) } });
+    res.json({ id: `msg_${Date.now()}`, type: "message", role: "assistant", content: [{ type: "text", text }], model: actualModel, stop_reason: "end_turn", usage: { input_tokens: Math.ceil(JSON.stringify(req.body.messages).length / 4), output_tokens: Math.ceil(text.length / 4) } });
   } catch (error) {
     res.status(500).json({ error: { type: "api_error", message: error instanceof Error ? error.message : String(error) } });
   }
@@ -233,309 +319,232 @@ const PORT = PROXY_PORT;
 
 function generateHTML() {
   return `<!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-theme="dark" class="dark">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>OCB - OpenCode Bridge</title>
   <script src="https://cdn.tailwindcss.com"></script>
+  <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
   <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+  <script>
+    tailwind.config = {
+      theme: {
+        extend: {
+          colors: {
+            space: { 950: '#0a0a0f', 900: '#121218', 800: '#1a1a24', 700: '#24242e', border: '#2a2a38' },
+            neon: { purple: '#a855f7', cyan: '#22d3ee', green: '#22c55e', pink: '#ec4899' }
+          },
+          fontFamily: { sans: ['Inter', 'sans-serif'], mono: ['JetBrains Mono', 'monospace'] }
+        }
+      }
+    }
+  </script>
   <style>
     * { box-sizing: border-box; margin: 0; padding: 0; }
-    body { font-family: 'Inter', -apple-system, sans-serif; background: #0f0f11; color: #fafafa; min-height: 100vh; }
+    body { font-family: 'Inter', -apple-system, sans-serif; background: #0a0a0f; color: #e4e4e7; min-height: 100vh; }
+    [x-cloak] { display: none !important; }
     ::-webkit-scrollbar { width: 6px; }
     ::-webkit-scrollbar-track { background: transparent; }
     ::-webkit-scrollbar-thumb { background: #3f3f46; border-radius: 3px; }
-    .tab-active { background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); color: white; }
-    .model-card:hover { transform: translateY(-2px); box-shadow: 0 8px 25px -5px rgba(99, 102, 241, 0.3); }
+    .nav-item { transition: all 0.2s; }
+    .nav-item.active { background: linear-gradient(90deg, rgba(168,85,247,0.2) 0%, transparent 100%); border-left: 2px solid #a855f7; color: white; }
   </style>
 </head>
-<body>
-  <div class="min-h-screen flex flex-col">
-    <header class="bg-[#18181b] border-b border-zinc-800 px-6 py-4">
-      <div class="max-w-7xl mx-auto flex items-center justify-between">
-        <div class="flex items-center gap-4">
-          <div class="w-12 h-12 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-2xl flex items-center justify-center text-2xl shadow-lg shadow-indigo-500/20">⚡</div>
-          <div>
-            <h1 class="text-2xl font-bold bg-gradient-to-r from-white to-zinc-400 bg-clip-text text-transparent">OCB</h1>
-            <p class="text-xs text-zinc-500 font-medium">OpenCode Bridge</p>
-          </div>
-          <div class="ml-8 flex items-center gap-2 px-4 py-2 bg-zinc-900 rounded-xl border border-zinc-800">
-            <div id="healthDot" class="w-2.5 h-2.5 bg-green-500 rounded-full animate-pulse"></div>
-            <span id="connectionStatus" class="text-sm text-zinc-300">Connected</span>
-          </div>
-        </div>
-        <div class="flex items-center gap-3">
-          <div class="text-right mr-4">
-            <p class="text-xs text-zinc-500">Current Model</p>
-            <p id="currentModelDisplay" class="text-sm font-medium text-white">Loading...</p>
-          </div>
-          <button onclick="refreshModels()" class="p-2.5 bg-zinc-800 hover:bg-zinc-700 rounded-xl transition text-zinc-300 hover:text-white" title="Refresh Models">
-            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path></svg>
-          </button>
-        </div>
+<body class="overflow-hidden" x-data="app()" x-init="init()">
+  <div class="h-14 border-b border-space-border flex items-center px-4 justify-between bg-space-900/80 backdrop-blur-md">
+    <div class="flex items-center gap-3">
+      <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-neon-purple to-blue-600 flex items-center justify-center text-white font-bold shadow-lg shadow-neon-purple/20">OC</div>
+      <div class="flex flex-col">
+        <span class="text-sm font-bold tracking-wide text-white">OCB</span>
+        <span class="text-[10px] text-gray-500 font-mono">OPENCODE BRIDGE</span>
       </div>
-    </header>
-
-    <nav class="bg-[#18181b] border-b border-zinc-800 px-6">
-      <div class="max-w-7xl mx-auto flex gap-1">
-        <button onclick="switchTab('models')" id="tab-models" class="px-5 py-3 text-sm font-medium rounded-t-xl transition-all tab-active">Models</button>
-        <button onclick="switchTab('status')" id="tab-status" class="px-5 py-3 text-sm font-medium rounded-t-xl transition-all text-zinc-400 hover:bg-zinc-800">Status</button>
-        <button onclick="switchTab('settings')" id="tab-settings" class="px-5 py-3 text-sm font-medium rounded-t-xl transition-all text-zinc-400 hover:bg-zinc-800">Settings</button>
+    </div>
+    <div class="flex items-center gap-4">
+      <div class="flex items-center gap-2 px-3 py-1 rounded-full text-xs font-mono border transition-all" :class="connected ? 'bg-neon-green/10 border-neon-green/20 text-neon-green' : 'bg-red-500/10 border-red-500/20 text-red-400'">
+        <div class="w-1.5 h-1.5 rounded-full" :class="connected ? 'bg-neon-green shadow-lg shadow-neon-green/50' : 'bg-red-400'"></div>
+        <span x-text="connected ? 'Connected' : 'Disconnected'"></span>
       </div>
-    </nav>
-
-    <main class="flex-1 max-w-7xl mx-auto w-full p-6">
-      <div id="models-view" class="flex gap-6 h-[calc(100vh-220px)]">
-        <aside class="w-72 bg-[#18181b] rounded-2xl border border-zinc-800 flex flex-col overflow-hidden">
-          <div class="p-4 border-b border-zinc-800">
-            <div class="relative">
-              <input type="text" id="searchInput" placeholder="Search models..." oninput="filterData()" class="w-full px-4 py-2.5 bg-zinc-900 border border-zinc-700 rounded-xl text-sm text-white placeholder-zinc-500 focus:outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20">
-            </div>
-          </div>
-          <div id="providerList" class="flex-1 overflow-y-auto p-2"></div>
-        </aside>
-        <section class="flex-1 overflow-y-auto">
-          <div class="flex items-center justify-between mb-4">
-            <h2 id="sectionTitle" class="text-lg font-semibold text-white">All Models</h2>
-            <span id="modelCount" class="text-sm text-zinc-500"></span>
-          </div>
-          <div id="modelGrid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"></div>
-        </section>
+      <button @click="refresh()" class="p-2 hover:bg-white/5 rounded-lg transition text-gray-400">
+        <svg class="w-4 h-4" :class="{'animate-spin': loading}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path></svg>
+      </button>
+    </div>
+  </div>
+  <div class="flex h-[calc(100vh-56px)]">
+    <nav class="w-56 bg-space-900 border-r border-space-border flex flex-col">
+      <div class="p-4 space-y-1">
+        <button @click="tab='dashboard'" class="nav-item w-full flex items-center gap-3 px-4 py-2.5 rounded-lg text-sm font-medium" :class="tab==='dashboard'?'active':''">
+          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path></svg>
+          Dashboard
+        </button>
+        <button @click="tab='models'" class="nav-item w-full flex items-center gap-3 px-4 py-2.5 rounded-lg text-sm font-medium" :class="tab==='models'?'active':''">
+          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path></svg>
+          Models
+        </button>
+        <button @click="tab='settings'" class="nav-item w-full flex items-center gap-3 px-4 py-2.5 rounded-lg text-sm font-medium" :class="tab==='settings'?'active':''">
+          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
+          Settings
+        </button>
       </div>
-
-      <div id="status-view" class="hidden space-y-6">
-        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-          <div class="bg-[#18181b] rounded-2xl border border-zinc-800 p-6">
-            <div class="flex items-center gap-3 mb-4">
-              <div class="w-10 h-10 bg-indigo-500/20 rounded-xl flex items-center justify-center text-indigo-400">📊</div>
-              <div>
-                <p class="text-xs text-zinc-500">Total Requests</p>
-                <p id="totalRequests" class="text-2xl font-bold text-white">0</p>
-              </div>
+      <div class="mt-auto p-4 border-t border-space-border">
+        <div class="text-xs text-gray-500 font-mono">
+          <div class="flex justify-between mb-1"><span>Port:</span><span class="text-gray-400">8300</span></div>
+          <div class="flex justify-between"><span>OpenCode:</span><span class="text-neon-green">localhost:4096</span></div>
+        </div>
+      </div>
+    </nav>
+    <main class="flex-1 overflow-auto bg-space-950 p-6">
+      <div x-show="tab==='dashboard'" x-transition>
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
+          <div class="bg-space-900 rounded-xl border border-space-border p-5">
+            <div class="flex items-center gap-3 mb-3">
+              <div class="w-10 h-10 bg-neon-purple/20 rounded-xl flex items-center justify-center text-neon-purple">📊</div>
+              <div><p class="text-xs text-gray-500">Total Requests</p><p class="text-2xl font-bold text-white" x-text="stats.requests.toLocaleString()">0</p></div>
             </div>
           </div>
-          <div class="bg-[#18181b] rounded-2xl border border-zinc-800 p-6">
-            <div class="flex items-center gap-3 mb-4">
-              <div class="w-10 h-10 bg-purple-500/20 rounded-xl flex items-center justify-center text-purple-400">🎯</div>
-              <div>
-                <p class="text-xs text-zinc-500">Total Tokens</p>
-                <p id="totalTokens" class="text-2xl font-bold text-white">0</p>
-              </div>
+          <div class="bg-space-900 rounded-xl border border-space-border p-5">
+            <div class="flex items-center gap-3 mb-3">
+              <div class="w-10 h-10 bg-neon-cyan/20 rounded-xl flex items-center justify-center text-neon-cyan">🎯</div>
+              <div><p class="text-xs text-gray-500">Total Tokens</p><p class="text-2xl font-bold text-white" x-text="stats.tokens.toLocaleString()">0</p></div>
             </div>
           </div>
-          <div class="bg-[#18181b] rounded-2xl border border-zinc-800 p-6">
-            <div class="flex items-center gap-3 mb-4">
-              <div class="w-10 h-10 bg-green-500/20 rounded-xl flex items-center justify-center text-green-400">🔗</div>
-              <div>
-                <p class="text-xs text-zinc-500">Session</p>
-                <p id="sessionStatus" class="text-lg font-semibold text-green-400">Active</p>
-              </div>
+          <div class="bg-space-900 rounded-xl border border-space-border p-5">
+            <div class="flex items-center gap-3 mb-3">
+              <div class="w-10 h-10 bg-neon-green/20 rounded-xl flex items-center justify-center text-neon-green">🤖</div>
+              <div><p class="text-xs text-gray-500">Active Model</p><p class="text-lg font-semibold text-white truncate" x-text="currentModelName">-</p></div>
             </div>
           </div>
         </div>
-        <div class="bg-[#18181b] rounded-2xl border border-zinc-800 p-6">
-          <h3 class="text-lg font-semibold text-white mb-4">Model Usage</h3>
-          <div class="space-y-3">
-            <div class="flex justify-between items-center py-2 border-b border-zinc-800">
-              <span class="text-zinc-400">Active Model</span>
-              <span id="activeModelName" class="text-white font-medium">-</span>
-            </div>
-            <div class="flex justify-between items-center py-2 border-b border-zinc-800">
-              <span class="text-zinc-400">Available Models</span>
-              <span id="totalModelsDisplay" class="text-white font-medium">-</span>
-            </div>
-            <div class="flex justify-between items-center py-2 border-b border-zinc-800">
-              <span class="text-zinc-400">Providers</span>
-              <span id="totalProviders" class="text-white font-medium">-</span>
-            </div>
-            <div class="flex justify-between items-center py-2">
-              <span class="text-zinc-400">OpenCode Server</span>
-              <span class="text-green-400 font-medium">localhost:4096</span>
-            </div>
+        <div class="bg-space-900 rounded-xl border border-space-border p-5">
+          <h3 class="text-lg font-semibold text-white mb-4">Current Session</h3>
+          <div class="grid grid-cols-2 gap-4 text-sm">
+            <div class="flex justify-between py-2 border-b border-space-border"><span class="text-gray-500">Session ID</span><span class="text-gray-300 font-mono text-xs" x-text="stats.sessionId || 'inactive'">-</span></div>
+            <div class="flex justify-between py-2 border-b border-space-border"><span class="text-gray-500">Status</span><span class="text-neon-green" x-text="stats.sessionId ? 'Active' : 'Inactive'">-</span></div>
+            <div class="flex justify-between py-2 border-b border-space-border"><span class="text-gray-500">Models Available</span><span class="text-gray-300" x-text="stats.models">0</span></div>
+            <div class="flex justify-between py-2 border-b border-space-border"><span class="text-gray-500">Providers</span><span class="text-gray-300" x-text="stats.providers">0</span></div>
+          </div>
+          <div class="mt-4 flex gap-3">
+            <button @click="resetSession()" class="px-4 py-2 bg-space-700 hover:bg-space-600 rounded-lg text-sm transition">Reset Session</button>
+            <button @click="refreshModels()" class="px-4 py-2 bg-space-700 hover:bg-space-600 rounded-lg text-sm transition">Refresh Models</button>
           </div>
         </div>
-        <div class="flex gap-4">
-          <button onclick="resetSession()" class="px-6 py-3 bg-zinc-800 hover:bg-zinc-700 rounded-xl text-white font-medium transition">Reset Session</button>
-          <button onclick="resetStats()" class="px-6 py-3 bg-zinc-800 hover:bg-zinc-700 rounded-xl text-white font-medium transition">Reset Stats</button>
+      </div>
+      <div x-show="tab==='models'" x-transition style="display:none;">
+        <div class="mb-4 flex gap-4">
+          <input type="text" x-model="search" @input="filterModels()" placeholder="Search models..." class="flex-1 px-4 py-2.5 bg-space-900 border border-space-border rounded-xl text-white placeholder-gray-500 focus:outline-none focus:border-neon-purple">
+          <select x-model="selectedProvider" @change="filterModels()" class="px-4 py-2.5 bg-space-900 border border-space-border rounded-xl text-white focus:outline-none">
+            <option value="all">All Providers</option>
+            <template x-for="p in providers" :key="p"><option :value="p" x-text="p"></option></template>
+          </select>
+        </div>
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3 max-h-[calc(100vh-220px)] overflow-y-auto">
+          <template x-for="m in filteredModels" :key="m.id">
+            <div @click="selectModel(m.id)" class="p-4 rounded-xl border cursor-pointer transition-all hover:scale-[1.02]" :class="m.id===currentModel?'bg-neon-purple/20 border-neon-purple':'bg-space-900 border-space-border hover:border-space-700'">
+              <div class="flex items-start justify-between mb-2">
+                <h3 class="font-semibold text-white truncate" x-text="m.name"></h3>
+                <span x-show="m.id===currentModel" class="text-xs bg-neon-purple text-white px-2 py-0.5 rounded">Active</span>
+              </div>
+              <p class="text-xs text-gray-500 font-mono truncate mb-2" x-text="m.id"></p>
+              <p class="text-xs text-gray-600" x-text="m.provider"></p>
+            </div>
+          </template>
         </div>
       </div>
-
-      <div id="settings-view" class="hidden space-y-6">
-        <div class="bg-[#18181b] rounded-2xl border border-zinc-800 p-6">
+      <div x-show="tab==='settings'" x-transition style="display:none;">
+        <div class="bg-space-900 rounded-xl border border-space-border p-6 mb-4">
           <h3 class="text-lg font-semibold text-white mb-4">Claude Code Configuration</h3>
-          <p class="text-zinc-400 text-sm mb-4">Add this to your Claude Code settings to use OCB:</p>
-          <div class="bg-zinc-950 rounded-xl p-4 font-mono text-sm text-zinc-300 overflow-x-auto">
-            <pre id="configJson">{
-  "env": {
-    "ANTHROPIC_BASE_URL": "http://localhost:8300/v1",
-    "ANTHROPIC_AUTH_TOKEN": "test",
-    "ANTHROPIC_MODEL": "minimax-m2.5-free"
-  }
-}</pre>
+          <p class="text-gray-400 text-sm mb-4">Configure Claude Code to use OCB as the API endpoint:</p>
+          <div class="bg-space-950 rounded-xl p-4 font-mono text-sm text-gray-300 overflow-x-auto mb-4">
+            <pre x-text="configJson"></pre>
           </div>
-          <button onclick="copyConfig()" class="mt-4 px-6 py-2.5 bg-indigo-600 hover:bg-indigo-500 rounded-xl text-white font-medium transition flex items-center gap-2">
-            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg>
-            Copy Config
+          <button @click="applyToClaude()" class="px-6 py-2.5 bg-neon-purple hover:bg-neon-purple/80 rounded-xl text-white font-medium transition flex items-center gap-2">
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
+            Apply to Claude Code
           </button>
         </div>
-        <div class="bg-[#18181b] rounded-2xl border border-zinc-800 p-6">
+        <div class="bg-space-900 rounded-xl border border-space-border p-6">
           <h3 class="text-lg font-semibold text-white mb-4">API Endpoints</h3>
           <div class="space-y-2 font-mono text-sm">
-            <div class="flex justify-between py-2 border-b border-zinc-800"><span class="text-zinc-400">Health</span><span class="text-indigo-400">http://localhost:8300/health</span></div>
-            <div class="flex justify-between py-2 border-b border-zinc-800"><span class="text-zinc-400">Status</span><span class="text-indigo-400">http://localhost:8300/api/status</span></div>
-            <div class="flex justify-between py-2 border-b border-zinc-800"><span class="text-zinc-400">Models</span><span class="text-indigo-400">http://localhost:8300/api/models</span></div>
-            <div class="flex justify-between py-2 border-b border-zinc-800"><span class="text-zinc-400">Set Model</span><span class="text-indigo-400">POST /api/model</span></div>
-            <div class="flex justify-between py-2"><span class="text-zinc-400">Messages</span><span class="text-indigo-400">http://localhost:8300/v1/messages</span></div>
+            <div class="flex justify-between py-2 border-b border-space-border"><span class="text-gray-500">Health</span><span class="text-neon-cyan">/health</span></div>
+            <div class="flex justify-between py-2 border-b border-space-border"><span class="text-gray-500">Status</span><span class="text-neon-cyan">/api/status</span></div>
+            <div class="flex justify-between py-2 border-b border-space-border"><span class="text-gray-500">Models</span><span class="text-neon-cyan">/v1/models</span></div>
+            <div class="flex justify-between py-2 border-b border-space-border"><span class="text-gray-500">Messages</span><span class="text-neon-cyan">/v1/messages</span></div>
           </div>
         </div>
       </div>
     </main>
-
-    <footer class="bg-[#18181b] border-t border-zinc-800 px-6 py-3">
-      <div class="max-w-7xl mx-auto flex items-center justify-between text-sm text-zinc-500">
-        <div class="flex items-center gap-6">
-          <span>OCB v1.0.1</span>
-          <span>Proxy Port: <span class="text-white">8300</span></span>
-        </div>
-        <span>OpenCode Bridge for Claude Code</span>
-      </div>
-    </footer>
   </div>
   <script>
-    let allModels = [];
-    let groupedModels = {};
-    let currentProvider = 'all';
-    let currentModelId = null;
-
-    function switchTab(tab) {
-      document.querySelectorAll('[id^="tab-"]').forEach(el => {
-        el.classList.remove('tab-active');
-        el.classList.add('text-zinc-400', 'hover:bg-zinc-800');
-      });
-      document.getElementById('tab-' + tab).classList.add('tab-active');
-      document.getElementById('tab-' + tab).classList.remove('text-zinc-400', 'hover:bg-zinc-800');
-      
-      document.getElementById('models-view').classList.add('hidden');
-      document.getElementById('status-view').classList.add('hidden');
-      document.getElementById('settings-view').classList.add('hidden');
-      document.getElementById(tab + '-view').classList.remove('hidden');
-    }
-
-    function copyConfig() {
-      const config = document.getElementById('configJson').textContent;
-      navigator.clipboard.writeText(config);
-      alert('Config copied to clipboard!');
-    }
-
-    async function resetStats() {
-      await fetch('/api/reset-stats', { method: 'POST' });
-      loadStatus();
-    }
-
-    async function loadModels() {
-      const res = await fetch('/api/models');
-      const data = await res.json();
-      allModels = data.models || [];
-      groupedModels = data.grouped || {};
-      renderProviders();
-      renderModels(allModels);
-      updateStats();
-    }
-
-    function renderProviders() {
-      const container = document.getElementById('providerList');
-      const searchTerm = document.getElementById('searchInput').value.toLowerCase();
-      let providersToShow = Object.entries(groupedModels);
-      if (searchTerm) {
-        providersToShow = providersToShow.filter(([name, models]) => name.toLowerCase().includes(searchTerm) || models.some(m => m.name.toLowerCase().includes(searchTerm)));
-      }
-      let html = '<div onclick="selectProvider('all')" class="px-3 py-2.5 rounded-xl cursor-pointer flex items-center justify-between text-sm mb-1 ' + (currentProvider === 'all' ? 'bg-indigo-600 text-white' : 'text-zinc-400 hover:bg-zinc-800') + '"><span>🏠 All Models</span><span class="text-xs opacity-60 bg-zinc-800 px-2 py-0.5 rounded-full">' + allModels.length + '</span></div>';
-      for (const [provider, models] of providersToShow) {
-        html += '<div onclick="selectProvider(\\'' + provider.replace(/'/g, "\\\\'") + '\\')" class="px-3 py-2.5 rounded-xl cursor-pointer flex items-center justify-between text-sm mb-1 ' + (currentProvider === provider ? 'bg-indigo-600 text-white' : 'text-zinc-400 hover:bg-zinc-800') + '"><span class="truncate">' + provider + '</span><span class="text-xs opacity-60 bg-zinc-800 px-2 py-0.5 rounded-full">' + models.length + '</span></div>';
-      }
-      container.innerHTML = html;
-    }
-
-    function selectProvider(provider) {
-      currentProvider = provider;
-      document.getElementById('sectionTitle').textContent = provider === 'all' ? 'All Models' : provider;
-      renderProviders();
-      renderModels(provider === 'all' ? allModels : (groupedModels[provider] || []));
-    }
-
-    function renderModels(models) {
-      const container = document.getElementById('modelGrid');
-      const searchTerm = document.getElementById('searchInput').value.toLowerCase();
-      let filtered = models;
-      if (searchTerm) {
-        filtered = models.filter(m => m.name.toLowerCase().includes(searchTerm) || m.id.toLowerCase().includes(searchTerm));
-      }
-      document.getElementById('modelCount').textContent = filtered.length + ' models';
-      if (filtered.length === 0) {
-        container.innerHTML = '<div class="col-span-full text-center text-zinc-500 py-12">No models found</div>';
-        return;
-      }
-      container.innerHTML = filtered.slice(0, 100).map(m => '<div onclick="selectModel(\\'' + m.id.replace(/'/g, "\\\\'") + '\\')" class="model-card p-5 rounded-2xl border cursor-pointer transition-all ' + (m.id === currentModelId ? 'bg-indigo-600/20 border-indigo-500 shadow-lg shadow-indigo-500/20' : 'bg-[#18181b] border-zinc-800 hover:border-zinc-700') + '"><div class="flex items-start justify-between mb-3"><h3 class="font-semibold text-white truncate text-base">' + m.name + '</h3>' + (m.id === currentModelId ? '<span class="text-xs bg-indigo-500 text-white px-3 py-1 rounded-full font-medium">Active</span>' : '') + '</div><p class="text-xs text-zinc-500 font-mono truncate mb-3">' + m.id + '</p>' + (m.cost ? '<div class="flex items-center gap-2 text-xs text-zinc-400"><span class="bg-zinc-800 px-2 py-1 rounded">$' + m.cost.input + '/M</span><span>→</span><span class="bg-zinc-800 px-2 py-1 rounded">$' + m.cost.output + '/M</span></div>' : '<div class="text-xs text-zinc-600">Free</div>') + '</div>').join('');
-    }
-
-    function filterData() {
-      const searchTerm = document.getElementById('searchInput').value.toLowerCase();
-      if (searchTerm) {
-        const filtered = allModels.filter(m => m.name.toLowerCase().includes(searchTerm) || m.id.toLowerCase().includes(searchTerm));
-        document.getElementById('sectionTitle').textContent = 'Search Results (' + filtered.length + ')';
-        renderModels(filtered);
-        renderProviders();
-      } else {
-        selectProvider(currentProvider);
-      }
-    }
-
-    async function selectModel(modelId) {
-      const res = await fetch('/api/model', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ modelId }) });
-      const data = await res.json();
-      if (data.success) {
-        currentModelId = modelId;
-        loadStatus();
-        renderModels(currentProvider === 'all' ? allModels : (groupedModels[currentProvider] || []));
-        document.getElementById('configJson').textContent = JSON.stringify({ env: { ANTHROPIC_BASE_URL: "http://localhost:8300/v1", ANTHROPIC_AUTH_TOKEN: "test", ANTHROPIC_MODEL: modelId } }, null, 2);
-      }
-    }
-
-    async function loadStatus() {
-      const res = await fetch('/api/status');
-      const data = await res.json();
-      const model = allModels.find(m => m.id === data.currentModel);
-      document.getElementById('currentModelDisplay').textContent = model?.name || data.currentModel;
-      document.getElementById('healthDot').className = 'w-2.5 h-2.5 rounded-full animate-pulse ' + (data.sessionId === 'active' ? 'bg-green-500' : 'bg-red-500');
-      document.getElementById('connectionStatus').textContent = data.sessionId === 'active' ? 'Connected' : 'Disconnected';
-      document.getElementById('totalRequests').textContent = data.totalRequests.toLocaleString();
-      document.getElementById('totalTokens').textContent = data.totalTokensUsed.toLocaleString();
-      document.getElementById('sessionStatus').textContent = data.sessionId === 'active' ? 'Active' : 'Inactive';
-      document.getElementById('sessionStatus').className = 'text-lg font-semibold ' + (data.sessionId === 'active' ? 'text-green-400' : 'text-red-400');
-      document.getElementById('activeModelName').textContent = model?.name || data.currentModel;
-      document.getElementById('totalModelsDisplay').textContent = allModels.length + ' models';
-      document.getElementById('totalProviders').textContent = Object.keys(groupedModels).length + ' providers';
-      currentModelId = data.currentModel;
-    }
-
-    async function resetSession() {
-      await fetch('/api/reset-session', { method: 'POST' });
-      loadStatus();
-    }
-
-    async function refreshModels() {
-      await fetch('/api/refresh-models', { method: 'POST' });
-      loadModels();
-    }
-
-    function updateStats() {
-      document.getElementById('totalModelsDisplay').textContent = allModels.length + ' models from ' + Object.keys(groupedModels).length + ' providers';
+    function app() {
+      return {
+        tab: 'dashboard',
+        loading: false,
+        connected: false,
+        search: '',
+        selectedProvider: 'all',
+        models: [],
+        providers: [],
+        filteredModels: [],
+        currentModel: '',
+        currentModelName: '',
+        stats: { requests: 0, tokens: 0, sessionId: '', models: 0, providers: 0 },
+        configJson: '',
+        async init() {
+          await this.refresh();
+          setInterval(() => this.refresh(), 3000);
+        },
+        async refresh() {
+          this.loading = true;
+          try {
+            const [statusRes, modelsRes] = await Promise.all([fetch('/api/status'), fetch('/api/models')]);
+            const status = await statusRes.json();
+            const modelsData = await modelsRes.json();
+            this.connected = status.sessionId === 'active';
+            this.stats = { requests: status.totalRequests, tokens: status.totalTokensUsed, sessionId: status.sessionId, models: modelsData.models?.length || 0, providers: modelsData.providers?.length || 0 };
+            this.currentModel = status.currentModel;
+            this.models = modelsData.models || [];
+            this.providers = [...new Set(this.models.map(m => m.provider))].sort();
+            const current = this.models.find(m => m.id === this.currentModel);
+            this.currentModelName = current?.name || this.currentModel;
+            this.filterModels();
+            this.updateConfig();
+          } catch (e) { console.error(e); }
+          this.loading = false;
+        },
+        filterModels() {
+          let filtered = this.models;
+          if (this.selectedProvider !== 'all') filtered = filtered.filter(m => m.provider === this.selectedProvider);
+          if (this.search) {
+            const s = this.search.toLowerCase();
+            filtered = filtered.filter(m => m.name.toLowerCase().includes(s) || m.id.toLowerCase().includes(s));
+          }
+          this.filteredModels = filtered.slice(0, 100);
+        },
+        async selectModel(modelId) {
+          await fetch('/api/model', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ modelId }) });
+          this.currentModel = modelId;
+          this.refresh();
+        },
+        async resetSession() {
+          await fetch('/api/reset-session', { method: 'POST' });
+          this.refresh();
+        },
+        async refreshModels() {
+          await fetch('/api/refresh-models', { method: 'POST' });
+          this.refresh();
+        },
+        updateConfig() {
+          this.configJson = JSON.stringify({ env: { ANTHROPIC_BASE_URL: 'http://localhost:8300', ANTHROPIC_API_KEY: 'test', ANTHROPIC_MODEL: this.currentModel } }, null, 2);
+        },
+        async applyToClaude() {
+          try {
+            const response = await fetch('/api/apply-claude-config', { method: 'POST' });
+            const data = await response.json();
+            alert(data.success ? 'Applied to Claude Code! Restart Claude Code to use.' : 'Failed: ' + data.error);
+          } catch (e) { alert('Error: ' + e.message); }
+        }
+      };
     }
-
-    loadModels();
-    loadStatus();
-    setInterval(loadStatus, 3000);
   </script>
 </body>
 </html>`;