ocb-cli 1.0.0 → 1.0.2

package/dist/proxy.js

@@ -115,6 +115,9 @@ app.use((req, res, next) => {
     next();
 });
 app.get("/", (req, res) => res.send(generateHTML()));
+app.get("/health", (req, res) => {
+    res.json({ status: "ok", timestamp: Date.now(), models: availableModels.length, providers: Object.keys(providers).length });
+});
 app.get("/api/status", (req, res) => {
     res.json({
         proxyPort: PROXY_PORT,
@@ -132,11 +135,7 @@ app.get("/api/models", (req, res) => {
             grouped[model.provider] = [];
         grouped[model.provider].push(model);
     }
-    res.json({
-        models: availableModels,
-        grouped,
-        providers: Object.entries(providers).map(([id, p]) => ({ id, ...p }))
-    });
+    res.json({ models: availableModels, grouped, providers: Object.entries(providers).map(([id, p]) => ({ id, ...p })) });
 });
 app.post("/api/model", (req, res) => {
     const { modelId } = req.body;
@@ -165,332 +164,337 @@ 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) => 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.post("/v1/messages", async (req, res) => {
     try {
         if (req.body?.max_tokens === undefined && req.body?.messages) {
-            const messages = req.body.messages;
             let totalTokens = 0;
-            for (const msg of messages) {
-                const content = extractTextFromContent(msg.content);
-                totalTokens += Math.ceil(content.length / 4);
+            for (const msg of req.body.messages) {
+                totalTokens += Math.ceil(extractTextFromContent(msg.content).length / 4);
             }
             return res.json({ tokens: totalTokens });
         }
-        const { messages, model } = req.body;
-        if (!currentSessionId) {
+        if (!currentSessionId)
             currentSessionId = await createSession(process.cwd());
-        }
-        const { text, tokens } = await sendMessage(currentSessionId, messages);
+        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(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: currentModel, 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) {
-        console.error("Error:", error);
         res.status(500).json({ error: { type: "api_error", message: error instanceof Error ? error.message : String(error) } });
     }
 });
 app.post("/v1/messages/count_tokens", (req, res) => {
-    const { messages } = req.body;
     let totalTokens = 0;
-    for (const msg of messages || []) {
-        const content = extractTextFromContent(msg.content);
-        totalTokens += Math.ceil(content.length / 4);
-    }
+    for (const msg of req.body.messages || [])
+        totalTokens += Math.ceil(extractTextFromContent(msg.content).length / 4);
     res.json({ tokens: totalTokens });
 });
+const PORT = PROXY_PORT;
 function generateHTML() {
     return `<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>OpenCode Bridge</title>
+  <title>OCB - OpenCode Bridge</title>
   <script src="https://cdn.tailwindcss.com"></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">
   <style>
     * { box-sizing: border-box; margin: 0; padding: 0; }
-    body { font-family: 'Inter', -apple-system, sans-serif; background: #0a0a0f; color: #e4e4e7; min-height: 100vh; }
-    
-    .app-container { display: flex; height: 100vh; }
-    
-    /* Sidebar */
-    .sidebar { width: 280px; background: #121218; border-right: 1px solid #27272a; display: flex; flex-direction: column; }
-    .sidebar-header { padding: 20px; border-bottom: 1px solid #27272a; }
-    .logo { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 16px; }
-    .logo-icon { width: 28px; height: 28px; background: linear-gradient(135deg, #6366f1, #8b5cf6); border-radius: 6px; display: flex; align-items: center; justify-content: center; }
-    
-    /* Search */
-    .search-box { padding: 16px 20px; }
-    .search-input { width: 100%; padding: 10px 12px; background: #1a1a20; border: 1px solid #27272a; border-radius: 8px; color: #e4e4e7; font-size: 13px; outline: none; transition: border-color 0.2s; }
-    .search-input:focus { border-color: #6366f1; }
-    .search-input::placeholder { color: #71717a; }
-    
-    /* Provider List */
-    .provider-list { flex: 1; overflow-y: auto; padding: 8px; }
-    .provider-item { padding: 10px 12px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; font-size: 13px; transition: background 0.15s; }
-    .provider-item:hover { background: #1f1f26; }
-    .provider-item.active { background: #6366f1/15; color: #a5b4fc; }
-    .provider-name { display: flex; align-items: center; gap: 8px; }
-    .provider-count { font-size: 11px; color: #71717a; background: #27272a; padding: 2px 6px; border-radius: 4px; }
-    
-    /* Main Content */
-    .main-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
-    
-    /* Header */
-    .main-header { padding: 16px 24px; border-bottom: 1px solid #27272a; display: flex; align-items: center; justify-content: space-between; background: #121218; }
-    .header-left { display: flex; align-items: center; gap: 16px; }
-    .current-model-badge { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: #6366f1/15; border: 1px solid #6366f1/30; border-radius: 8px; font-size: 13px; }
-    .status-dot { width: 8px; height: 8px; background: #22c55e; border-radius: 50%; }
-    .status-dot.inactive { background: #ef4444; }
-    
-    /* Model List */
-    .model-list-container { flex: 1; overflow-y: auto; padding: 16px 24px; }
-    .model-list-header { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: #71717a; margin-bottom: 12px; padding: 0 8px; }
-    .model-item { padding: 12px 16px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; transition: all 0.15s; border: 1px solid transparent; margin-bottom: 4px; }
-    .model-item:hover { background: #1f1f26; }
-    .model-item.selected { background: #6366f1/15; border-color: #6366f1/40; }
-    .model-info { display: flex; flex-direction: column; gap: 2px; }
-    .model-name { font-size: 14px; font-weight: 500; }
-    .model-id { font-size: 11px; color: #71717a; font-family: 'JetBrains Mono', monospace; }
-    .model-cost { font-size: 11px; color: #a1a1aa; text-align: right; }
-    .model-cost span { display: block; }
-    
-    /* Footer Stats */
-    .footer { padding: 12px 24px; border-top: 1px solid #27272a; display: flex; gap: 24px; background: #121218; }
-    .stat-item { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #a1a1aa; }
-    .stat-value { color: #e4e4e7; font-weight: 500; }
-    
-    /* Scrollbar */
+    body { font-family: 'Inter', -apple-system, sans-serif; background: #0f0f11; color: #fafafa; min-height: 100vh; }
     ::-webkit-scrollbar { width: 6px; }
     ::-webkit-scrollbar-track { background: transparent; }
     ::-webkit-scrollbar-thumb { background: #3f3f46; border-radius: 3px; }
-    ::-webkit-scrollbar-thumb:hover { background: #52525b; }
-    
-    /* Buttons */
-    .btn { padding: 8px 14px; border-radius: 6px; font-size: 12px; font-weight: 500; cursor: pointer; transition: all 0.15s; border: none; }
-    .btn-primary { background: #6366f1; color: white; }
-    .btn-primary:hover { background: #4f46e5; }
-    .btn-secondary { background: #27272a; color: #a1a1aa; }
-    .btn-secondary:hover { background: #3f3f46; color: #e4e4e7; }
+    .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); }
   </style>
 </head>
 <body>
-  <div class="app-container">
-    <!-- Sidebar -->
-    <div class="sidebar">
-      <div class="sidebar-header">
-        <div class="logo">
-          <div class="logo-icon">⚡</div>
-          <span>OpenCode Bridge</span>
+  <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>
       </div>
-      
-      <div class="search-box">
-        <input type="text" class="search-input" placeholder="Search models..." id="searchInput" oninput="filterModels()">
+    </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="provider-list" id="providerList">
-        <!-- Providers loaded here -->
+    </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>
       </div>
-    </div>
-    
-    <!-- Main Content -->
-    <div class="main-content">
-      <div class="main-header">
-        <div class="header-left">
-          <div class="current-model-badge">
-            <div class="status-dot" id="statusDot"></div>
-            <span id="currentModelName">Loading...</span>
+
+      <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>
+          </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>
+          </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>
           </div>
         </div>
-        <div style="display: flex; gap: 8px;">
-          <button class="btn btn-secondary" onclick="resetSession()">↻ Session</button>
-          <button class="btn btn-secondary" onclick="resetStats()">📊 Reset</button>
+        <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>
         </div>
-      </div>
-      
-      <div class="model-list-container">
-        <div class="model-list-header" id="modelListHeader">All Models</div>
-        <div id="modelList">
-          <!-- Models loaded here -->
+        <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>
-      
-      <div class="footer">
-        <div class="stat-item">
-          <span>Requests:</span>
-          <span class="stat-value" id="totalRequests">0</span>
+
+      <div id="settings-view" class="hidden space-y-6">
+        <div class="bg-[#18181b] rounded-2xl border border-zinc-800 p-6">
+          <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>
+          </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>
         </div>
-        <div class="stat-item">
-          <span>Tokens:</span>
-          <span class="stat-value" id="totalTokens">0</span>
+        <div class="bg-[#18181b] rounded-2xl border border-zinc-800 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>
         </div>
-        <div class="stat-item">
-          <span>Models:</span>
-          <span class="stat-value" id="totalModels">0</span>
+      </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>
-    </div>
+    </footer>
   </div>
-
   <script>
-    const PROXY_PORT = ${PROXY_PORT};
     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 providers = Object.entries(groupedModels);
-      
-      let html = \`<div class="provider-item \${currentProvider === 'all' ? 'active' : ''}" onclick="selectProvider('all')">
-        <span class="provider-name">🏠 All Models</span>
-        <span class="provider-count">\${allModels.length}</span>
-      </div>\`;
-      
-      for (const [provider, models] of providers) {
-        html += \`<div class="provider-item \${currentProvider === provider ? 'active' : ''}" onclick="selectProvider('\${provider}')">
-          <span class="provider-name">📦 \${provider}</span>
-          <span class="provider-count">\${models.length}</span>
-        </div>\`;
+      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();
-      
-      const models = provider === 'all' ? allModels : groupedModels[provider] || [];
-      document.getElementById('modelListHeader').textContent = provider === 'all' ? 'All Models' : provider;
-      renderModels(models);
+      renderModels(provider === 'all' ? allModels : (groupedModels[provider] || []));
     }
-    
+
     function renderModels(models) {
-      const container = document.getElementById('modelList');
+      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) ||
-          m.provider.toLowerCase().includes(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 style="text-align: center; color: #71717a; padding: 40px;">No models found</div>';
+        container.innerHTML = '<div class="col-span-full text-center text-zinc-500 py-12">No models found</div>';
         return;
       }
-      
-      let html = '';
-      for (const model of filtered) {
-        const isSelected = model.id === currentModelId;
-        const costInfo = model.cost ? \`<span>$\${model.cost.input}/M in</span><span>$\${model.cost.output}/M out</span>\` : '';
-        
-        html += \`<div class="model-item \${isSelected ? 'selected' : ''}" onclick="selectModel('\${model.id}')">
-          <div class="model-info">
-            <div class="model-name">\${model.name}</div>
-            <div class="model-id">\${model.id}</div>
-          </div>
-          <div class="model-cost">\${costInfo}</div>
-        </div>\`;
-      }
-      
-      container.innerHTML = html;
+      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 filterModels() {
-      const models = currentProvider === 'all' ? allModels : groupedModels[currentProvider] || [];
-      renderModels(models);
+
+    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 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();
-        const models = currentProvider === 'all' ? allModels : groupedModels[currentProvider] || [];
-        renderModels(models);
+        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('currentModelName').textContent = model ? model.name : data.currentModel;
-      
-      const statusDot = document.getElementById('statusDot');
-      if (data.sessionId === 'active') {
-        statusDot.classList.remove('inactive');
-      } else {
-        statusDot.classList.add('inactive');
-      }
-      
+      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('totalModels').textContent = allModels.length.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 resetStats() {
-      await fetch('/api/reset-stats', { method: 'POST' });
-      loadStatus();
+
+    async function refreshModels() {
+      await fetch('/api/refresh-models', { method: 'POST' });
+      loadModels();
     }
-    
-    // Initialize
+
+    function updateStats() {
+      document.getElementById('totalModelsDisplay').textContent = allModels.length + ' models from ' + Object.keys(groupedModels).length + ' providers';
+    }
+
     loadModels();
     loadStatus();
     setInterval(loadStatus, 3000);
@@ -498,7 +502,7 @@ function generateHTML() {
 </body>
 </html>`;
 }
-app.listen(PROXY_PORT, () => {
-    console.error(`OpenCode Bridge running on http://localhost:${PROXY_PORT}`);
-    console.error(`Dashboard: http://localhost:${PROXY_PORT}`);
+app.listen(PORT, () => {
+    console.error(`OpenCode Bridge running on http://localhost:${PORT}`);
+    console.error(`Dashboard: http://localhost:${PORT}`);
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ocb-cli",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "OpenCode Bridge - Use OpenCode AI models in Claude Code",
   "type": "module",
   "main": "dist/proxy.js",

package/src/proxy.ts

@@ -143,6 +143,10 @@ app.use((req, res, next) => {
 
 app.get("/", (req, res) => res.send(generateHTML()));
 
+app.get("/health", (req, res) => {
+  res.json({ status: "ok", timestamp: Date.now(), models: availableModels.length, providers: Object.keys(providers).length });
+});
+
 app.get("/api/status", (req, res) => {
   res.json({
     proxyPort: PROXY_PORT,
@@ -160,11 +164,7 @@ app.get("/api/models", (req, res) => {
     if (!grouped[model.provider]) grouped[model.provider] = [];
     grouped[model.provider].push(model);
   }
-  res.json({ 
-    models: availableModels,
-    grouped,
-    providers: Object.entries(providers).map(([id, p]) => ({ id, ...p }))
-  });
+  res.json({ models: availableModels, grouped, providers: Object.entries(providers).map(([id, p]) => ({ id, ...p })) });
 });
 
 app.post("/api/model", (req, res) => {
@@ -198,340 +198,338 @@ 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) => 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.post("/v1/messages", async (req, res) => {
   try {
     if (req.body?.max_tokens === undefined && req.body?.messages) {
-      const messages = req.body.messages;
       let totalTokens = 0;
-      for (const msg of messages) {
-        const content = extractTextFromContent(msg.content);
-        totalTokens += Math.ceil(content.length / 4);
+      for (const msg of req.body.messages) {
+        totalTokens += Math.ceil(extractTextFromContent(msg.content).length / 4);
       }
       return res.json({ tokens: totalTokens });
     }
-
-    const { messages, model } = req.body;
-
-    if (!currentSessionId) {
-      currentSessionId = await createSession(process.cwd());
-    }
-
-    const { text, tokens } = await sendMessage(currentSessionId, messages);
-    
+    if (!currentSessionId) currentSessionId = await createSession(process.cwd());
+    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(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: currentModel, 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) {
-    console.error("Error:", error);
     res.status(500).json({ error: { type: "api_error", message: error instanceof Error ? error.message : String(error) } });
   }
 });
 
 app.post("/v1/messages/count_tokens", (req, res) => {
-  const { messages } = req.body;
   let totalTokens = 0;
-  for (const msg of messages || []) {
-    const content = extractTextFromContent(msg.content);
-    totalTokens += Math.ceil(content.length / 4);
-  }
+  for (const msg of req.body.messages || []) totalTokens += Math.ceil(extractTextFromContent(msg.content).length / 4);
   res.json({ tokens: totalTokens });
 });
 
-function generateHTML(): string {
+const PORT = PROXY_PORT;
+
+function generateHTML() {
   return `<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>OpenCode Bridge</title>
+  <title>OCB - OpenCode Bridge</title>
   <script src="https://cdn.tailwindcss.com"></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">
   <style>
     * { box-sizing: border-box; margin: 0; padding: 0; }
-    body { font-family: 'Inter', -apple-system, sans-serif; background: #0a0a0f; color: #e4e4e7; min-height: 100vh; }
-    
-    .app-container { display: flex; height: 100vh; }
-    
-    /* Sidebar */
-    .sidebar { width: 280px; background: #121218; border-right: 1px solid #27272a; display: flex; flex-direction: column; }
-    .sidebar-header { padding: 20px; border-bottom: 1px solid #27272a; }
-    .logo { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 16px; }
-    .logo-icon { width: 28px; height: 28px; background: linear-gradient(135deg, #6366f1, #8b5cf6); border-radius: 6px; display: flex; align-items: center; justify-content: center; }
-    
-    /* Search */
-    .search-box { padding: 16px 20px; }
-    .search-input { width: 100%; padding: 10px 12px; background: #1a1a20; border: 1px solid #27272a; border-radius: 8px; color: #e4e4e7; font-size: 13px; outline: none; transition: border-color 0.2s; }
-    .search-input:focus { border-color: #6366f1; }
-    .search-input::placeholder { color: #71717a; }
-    
-    /* Provider List */
-    .provider-list { flex: 1; overflow-y: auto; padding: 8px; }
-    .provider-item { padding: 10px 12px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; font-size: 13px; transition: background 0.15s; }
-    .provider-item:hover { background: #1f1f26; }
-    .provider-item.active { background: #6366f1/15; color: #a5b4fc; }
-    .provider-name { display: flex; align-items: center; gap: 8px; }
-    .provider-count { font-size: 11px; color: #71717a; background: #27272a; padding: 2px 6px; border-radius: 4px; }
-    
-    /* Main Content */
-    .main-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
-    
-    /* Header */
-    .main-header { padding: 16px 24px; border-bottom: 1px solid #27272a; display: flex; align-items: center; justify-content: space-between; background: #121218; }
-    .header-left { display: flex; align-items: center; gap: 16px; }
-    .current-model-badge { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: #6366f1/15; border: 1px solid #6366f1/30; border-radius: 8px; font-size: 13px; }
-    .status-dot { width: 8px; height: 8px; background: #22c55e; border-radius: 50%; }
-    .status-dot.inactive { background: #ef4444; }
-    
-    /* Model List */
-    .model-list-container { flex: 1; overflow-y: auto; padding: 16px 24px; }
-    .model-list-header { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: #71717a; margin-bottom: 12px; padding: 0 8px; }
-    .model-item { padding: 12px 16px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; transition: all 0.15s; border: 1px solid transparent; margin-bottom: 4px; }
-    .model-item:hover { background: #1f1f26; }
-    .model-item.selected { background: #6366f1/15; border-color: #6366f1/40; }
-    .model-info { display: flex; flex-direction: column; gap: 2px; }
-    .model-name { font-size: 14px; font-weight: 500; }
-    .model-id { font-size: 11px; color: #71717a; font-family: 'JetBrains Mono', monospace; }
-    .model-cost { font-size: 11px; color: #a1a1aa; text-align: right; }
-    .model-cost span { display: block; }
-    
-    /* Footer Stats */
-    .footer { padding: 12px 24px; border-top: 1px solid #27272a; display: flex; gap: 24px; background: #121218; }
-    .stat-item { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #a1a1aa; }
-    .stat-value { color: #e4e4e7; font-weight: 500; }
-    
-    /* Scrollbar */
+    body { font-family: 'Inter', -apple-system, sans-serif; background: #0f0f11; color: #fafafa; min-height: 100vh; }
     ::-webkit-scrollbar { width: 6px; }
     ::-webkit-scrollbar-track { background: transparent; }
     ::-webkit-scrollbar-thumb { background: #3f3f46; border-radius: 3px; }
-    ::-webkit-scrollbar-thumb:hover { background: #52525b; }
-    
-    /* Buttons */
-    .btn { padding: 8px 14px; border-radius: 6px; font-size: 12px; font-weight: 500; cursor: pointer; transition: all 0.15s; border: none; }
-    .btn-primary { background: #6366f1; color: white; }
-    .btn-primary:hover { background: #4f46e5; }
-    .btn-secondary { background: #27272a; color: #a1a1aa; }
-    .btn-secondary:hover { background: #3f3f46; color: #e4e4e7; }
+    .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); }
   </style>
 </head>
 <body>
-  <div class="app-container">
-    <!-- Sidebar -->
-    <div class="sidebar">
-      <div class="sidebar-header">
-        <div class="logo">
-          <div class="logo-icon">⚡</div>
-          <span>OpenCode Bridge</span>
+  <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>
       </div>
-      
-      <div class="search-box">
-        <input type="text" class="search-input" placeholder="Search models..." id="searchInput" oninput="filterModels()">
+    </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="provider-list" id="providerList">
-        <!-- Providers loaded here -->
+    </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>
       </div>
-    </div>
-    
-    <!-- Main Content -->
-    <div class="main-content">
-      <div class="main-header">
-        <div class="header-left">
-          <div class="current-model-badge">
-            <div class="status-dot" id="statusDot"></div>
-            <span id="currentModelName">Loading...</span>
+
+      <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>
+          </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>
+          </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>
           </div>
         </div>
-        <div style="display: flex; gap: 8px;">
-          <button class="btn btn-secondary" onclick="resetSession()">↻ Session</button>
-          <button class="btn btn-secondary" onclick="resetStats()">📊 Reset</button>
+        <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>
         </div>
-      </div>
-      
-      <div class="model-list-container">
-        <div class="model-list-header" id="modelListHeader">All Models</div>
-        <div id="modelList">
-          <!-- Models loaded here -->
+        <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>
-      
-      <div class="footer">
-        <div class="stat-item">
-          <span>Requests:</span>
-          <span class="stat-value" id="totalRequests">0</span>
+
+      <div id="settings-view" class="hidden space-y-6">
+        <div class="bg-[#18181b] rounded-2xl border border-zinc-800 p-6">
+          <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>
+          </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>
         </div>
-        <div class="stat-item">
-          <span>Tokens:</span>
-          <span class="stat-value" id="totalTokens">0</span>
+        <div class="bg-[#18181b] rounded-2xl border border-zinc-800 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>
         </div>
-        <div class="stat-item">
-          <span>Models:</span>
-          <span class="stat-value" id="totalModels">0</span>
+      </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>
-    </div>
+    </footer>
   </div>
-
   <script>
-    const PROXY_PORT = ${PROXY_PORT};
     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 providers = Object.entries(groupedModels);
-      
-      let html = \`<div class="provider-item \${currentProvider === 'all' ? 'active' : ''}" onclick="selectProvider('all')">
-        <span class="provider-name">🏠 All Models</span>
-        <span class="provider-count">\${allModels.length}</span>
-      </div>\`;
-      
-      for (const [provider, models] of providers) {
-        html += \`<div class="provider-item \${currentProvider === provider ? 'active' : ''}" onclick="selectProvider('\${provider}')">
-          <span class="provider-name">📦 \${provider}</span>
-          <span class="provider-count">\${models.length}</span>
-        </div>\`;
+      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();
-      
-      const models = provider === 'all' ? allModels : groupedModels[provider] || [];
-      document.getElementById('modelListHeader').textContent = provider === 'all' ? 'All Models' : provider;
-      renderModels(models);
+      renderModels(provider === 'all' ? allModels : (groupedModels[provider] || []));
     }
-    
+
     function renderModels(models) {
-      const container = document.getElementById('modelList');
+      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) ||
-          m.provider.toLowerCase().includes(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 style="text-align: center; color: #71717a; padding: 40px;">No models found</div>';
+        container.innerHTML = '<div class="col-span-full text-center text-zinc-500 py-12">No models found</div>';
         return;
       }
-      
-      let html = '';
-      for (const model of filtered) {
-        const isSelected = model.id === currentModelId;
-        const costInfo = model.cost ? \`<span>$\${model.cost.input}/M in</span><span>$\${model.cost.output}/M out</span>\` : '';
-        
-        html += \`<div class="model-item \${isSelected ? 'selected' : ''}" onclick="selectModel('\${model.id}')">
-          <div class="model-info">
-            <div class="model-name">\${model.name}</div>
-            <div class="model-id">\${model.id}</div>
-          </div>
-          <div class="model-cost">\${costInfo}</div>
-        </div>\`;
-      }
-      
-      container.innerHTML = html;
+      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 filterModels() {
-      const models = currentProvider === 'all' ? allModels : groupedModels[currentProvider] || [];
-      renderModels(models);
+
+    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 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();
-        const models = currentProvider === 'all' ? allModels : groupedModels[currentProvider] || [];
-        renderModels(models);
+        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('currentModelName').textContent = model ? model.name : data.currentModel;
-      
-      const statusDot = document.getElementById('statusDot');
-      if (data.sessionId === 'active') {
-        statusDot.classList.remove('inactive');
-      } else {
-        statusDot.classList.add('inactive');
-      }
-      
+      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('totalModels').textContent = allModels.length.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 resetStats() {
-      await fetch('/api/reset-stats', { method: 'POST' });
-      loadStatus();
+
+    async function refreshModels() {
+      await fetch('/api/refresh-models', { method: 'POST' });
+      loadModels();
     }
-    
-    // Initialize
+
+    function updateStats() {
+      document.getElementById('totalModelsDisplay').textContent = allModels.length + ' models from ' + Object.keys(groupedModels).length + ' providers';
+    }
+
     loadModels();
     loadStatus();
     setInterval(loadStatus, 3000);
@@ -540,7 +538,7 @@ function generateHTML(): string {
 </html>`;
 }
 
-app.listen(PROXY_PORT, () => {
-  console.error(`OpenCode Bridge running on http://localhost:${PROXY_PORT}`);
-  console.error(`Dashboard: http://localhost:${PROXY_PORT}`);
+app.listen(PORT, () => {
+  console.error(`OpenCode Bridge running on http://localhost:${PORT}`);
+  console.error(`Dashboard: http://localhost:${PORT}`);
 });