ocb-cli 1.0.0 → 1.0.1

package/dist/proxy.js

@@ -132,11 +132,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 +161,194 @@ 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">
+  <link href="https://fonts.googleapis.com/css2?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 */
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body { font-family: 'Inter', -apple-system, sans-serif; background: #09090b; 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; }
   </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>
-      </div>
-      
-      <div class="search-box">
-        <input type="text" class="search-input" placeholder="Search models..." id="searchInput" oninput="filterModels()">
-      </div>
-      
-      <div class="provider-list" id="providerList">
-        <!-- Providers loaded here -->
-      </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 class="min-h-screen flex flex-col">
+    <header class="bg-zinc-900 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-3">
+          <div class="w-10 h-10 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-xl flex items-center justify-center text-xl font-bold">⚡</div>
+          <div>
+            <h1 class="text-xl font-semibold text-white">OCB</h1>
+            <p class="text-xs text-zinc-500">OpenCode Bridge</p>
           </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>
-      </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 items-center gap-3">
+          <div class="flex items-center gap-2 px-3 py-1.5 bg-zinc-800 rounded-lg">
+            <div id="statusDot" class="w-2 h-2 bg-green-500 rounded-full"></div>
+            <span id="currentModelDisplay" class="text-sm text-zinc-300">Loading...</span>
+          </div>
+          <button onclick="refreshModels()" class="px-3 py-1.5 text-sm bg-zinc-800 hover:bg-zinc-700 text-zinc-300 rounded-lg transition">↻</button>
+          <button onclick="resetSession()" class="px-3 py-1.5 text-sm bg-zinc-800 hover:bg-zinc-700 text-zinc-300 rounded-lg transition">Reset</button>
         </div>
       </div>
-      
-      <div class="footer">
-        <div class="stat-item">
-          <span>Requests:</span>
-          <span class="stat-value" id="totalRequests">0</span>
+    </header>
+    <main class="flex-1 flex max-w-7xl mx-auto w-full">
+      <aside class="w-64 bg-zinc-900 border-r border-zinc-800 flex flex-col">
+        <div class="p-4">
+          <input type="text" id="searchInput" placeholder="Search models..." oninput="filterData()" class="w-full px-3 py-2 bg-zinc-800 border border-zinc-700 rounded-lg text-sm text-white placeholder-zinc-500 focus:outline-none focus:border-indigo-500">
         </div>
-        <div class="stat-item">
-          <span>Tokens:</span>
-          <span class="stat-value" id="totalTokens">0</span>
+        <div id="providerList" class="flex-1 overflow-y-auto px-2 pb-4"></div>
+      </aside>
+      <section class="flex-1 p-6 overflow-y-auto">
+        <div class="flex items-center justify-between mb-4">
+          <h2 id="sectionTitle" class="text-lg font-medium text-white">All Models</h2>
+          <span id="modelCount" class="text-sm text-zinc-500"></span>
         </div>
-        <div class="stat-item">
-          <span>Models:</span>
-          <span class="stat-value" id="totalModels">0</span>
+        <div id="modelGrid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3"></div>
+      </section>
+    </main>
+    <footer class="bg-zinc-900 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>Requests: <span id="totalRequests" class="text-white font-medium">0</span></span>
+          <span>Tokens: <span id="totalTokens" class="text-white font-medium">0</span></span>
         </div>
+        <span id="totalModelsDisplay">Loading...</span>
       </div>
-    </div>
+    </footer>
   </div>
-
   <script>
-    const PROXY_PORT = ${PROXY_PORT};
     let allModels = [];
     let groupedModels = {};
     let currentProvider = 'all';
     let currentModelId = null;
-    
+
     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 rounded-lg 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</span><span class="text-xs opacity-60">' + allModels.length + '</span></div>';
+      for (const [provider, models] of providersToShow) {
+        html += '<div onclick="selectProvider(\\'' + provider + '\\')" class="px-3 py-2 rounded-lg 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">' + 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.map(m => '<div onclick="selectModel(\\'' + m.id + '\\')" class="p-4 rounded-xl border cursor-pointer transition-all hover:scale-[1.02] ' + (m.id === currentModelId ? 'bg-indigo-600/20 border-indigo-500' : 'bg-zinc-900 border-zinc-800 hover:border-zinc-700') + '"><div class="flex items-start justify-between mb-2"><h3 class="font-medium text-white truncate">' + m.name + '</h3>' + (m.id === currentModelId ? '<span class="text-xs bg-indigo-500 text-white px-2 py-0.5 rounded">Active</span>' : '') + '</div><p class="text-xs text-zinc-500 font-mono truncate mb-2">' + m.id + '</p>' + (m.cost ? '<p class="text-xs text-zinc-400">$' + m.cost.input + '/M → $' + m.cost.output + '/M</p>' : '') + '</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';
+        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] || []));
       }
     }
-    
+
     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('statusDot').className = 'w-2 h-2 rounded-full ' + (data.sessionId === 'active' ? 'bg-green-500' : 'bg-red-500');
       document.getElementById('totalRequests').textContent = data.totalRequests.toLocaleString();
       document.getElementById('totalTokens').textContent = data.totalTokensUsed.toLocaleString();
-      document.getElementById('totalModels').textContent = allModels.length.toLocaleString();
-      
+      document.getElementById('totalModelsDisplay').textContent = allModels.length + ' models from ' + 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
+
     loadModels();
     loadStatus();
     setInterval(loadStatus, 3000);
@@ -498,7 +356,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.1",
   "description": "OpenCode Bridge - Use OpenCode AI models in Claude Code",
   "type": "module",
   "main": "dist/proxy.js",

package/src/proxy.ts

@@ -160,11 +160,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 +194,195 @@ 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">
+  <link href="https://fonts.googleapis.com/css2?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 */
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body { font-family: 'Inter', -apple-system, sans-serif; background: #09090b; 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; }
   </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>
-      </div>
-      
-      <div class="search-box">
-        <input type="text" class="search-input" placeholder="Search models..." id="searchInput" oninput="filterModels()">
-      </div>
-      
-      <div class="provider-list" id="providerList">
-        <!-- Providers loaded here -->
-      </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 class="min-h-screen flex flex-col">
+    <header class="bg-zinc-900 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-3">
+          <div class="w-10 h-10 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-xl flex items-center justify-center text-xl font-bold">⚡</div>
+          <div>
+            <h1 class="text-xl font-semibold text-white">OCB</h1>
+            <p class="text-xs text-zinc-500">OpenCode Bridge</p>
           </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>
-      </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 items-center gap-3">
+          <div class="flex items-center gap-2 px-3 py-1.5 bg-zinc-800 rounded-lg">
+            <div id="statusDot" class="w-2 h-2 bg-green-500 rounded-full"></div>
+            <span id="currentModelDisplay" class="text-sm text-zinc-300">Loading...</span>
+          </div>
+          <button onclick="refreshModels()" class="px-3 py-1.5 text-sm bg-zinc-800 hover:bg-zinc-700 text-zinc-300 rounded-lg transition">↻</button>
+          <button onclick="resetSession()" class="px-3 py-1.5 text-sm bg-zinc-800 hover:bg-zinc-700 text-zinc-300 rounded-lg transition">Reset</button>
         </div>
       </div>
-      
-      <div class="footer">
-        <div class="stat-item">
-          <span>Requests:</span>
-          <span class="stat-value" id="totalRequests">0</span>
+    </header>
+    <main class="flex-1 flex max-w-7xl mx-auto w-full">
+      <aside class="w-64 bg-zinc-900 border-r border-zinc-800 flex flex-col">
+        <div class="p-4">
+          <input type="text" id="searchInput" placeholder="Search models..." oninput="filterData()" class="w-full px-3 py-2 bg-zinc-800 border border-zinc-700 rounded-lg text-sm text-white placeholder-zinc-500 focus:outline-none focus:border-indigo-500">
         </div>
-        <div class="stat-item">
-          <span>Tokens:</span>
-          <span class="stat-value" id="totalTokens">0</span>
+        <div id="providerList" class="flex-1 overflow-y-auto px-2 pb-4"></div>
+      </aside>
+      <section class="flex-1 p-6 overflow-y-auto">
+        <div class="flex items-center justify-between mb-4">
+          <h2 id="sectionTitle" class="text-lg font-medium text-white">All Models</h2>
+          <span id="modelCount" class="text-sm text-zinc-500"></span>
         </div>
-        <div class="stat-item">
-          <span>Models:</span>
-          <span class="stat-value" id="totalModels">0</span>
+        <div id="modelGrid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3"></div>
+      </section>
+    </main>
+    <footer class="bg-zinc-900 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>Requests: <span id="totalRequests" class="text-white font-medium">0</span></span>
+          <span>Tokens: <span id="totalTokens" class="text-white font-medium">0</span></span>
         </div>
+        <span id="totalModelsDisplay">Loading...</span>
       </div>
-    </div>
+    </footer>
   </div>
-
   <script>
-    const PROXY_PORT = ${PROXY_PORT};
     let allModels = [];
     let groupedModels = {};
     let currentProvider = 'all';
     let currentModelId = null;
-    
+
     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 rounded-lg 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</span><span class="text-xs opacity-60">' + allModels.length + '</span></div>';
+      for (const [provider, models] of providersToShow) {
+        html += '<div onclick="selectProvider(\\'' + provider + '\\')" class="px-3 py-2 rounded-lg 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">' + 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.map(m => '<div onclick="selectModel(\\'' + m.id + '\\')" class="p-4 rounded-xl border cursor-pointer transition-all hover:scale-[1.02] ' + (m.id === currentModelId ? 'bg-indigo-600/20 border-indigo-500' : 'bg-zinc-900 border-zinc-800 hover:border-zinc-700') + '"><div class="flex items-start justify-between mb-2"><h3 class="font-medium text-white truncate">' + m.name + '</h3>' + (m.id === currentModelId ? '<span class="text-xs bg-indigo-500 text-white px-2 py-0.5 rounded">Active</span>' : '') + '</div><p class="text-xs text-zinc-500 font-mono truncate mb-2">' + m.id + '</p>' + (m.cost ? '<p class="text-xs text-zinc-400">$' + m.cost.input + '/M → $' + m.cost.output + '/M</p>' : '') + '</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';
+        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] || []));
       }
     }
-    
+
     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('statusDot').className = 'w-2 h-2 rounded-full ' + (data.sessionId === 'active' ? 'bg-green-500' : 'bg-red-500');
       document.getElementById('totalRequests').textContent = data.totalRequests.toLocaleString();
       document.getElementById('totalTokens').textContent = data.totalTokensUsed.toLocaleString();
-      document.getElementById('totalModels').textContent = allModels.length.toLocaleString();
-      
+      document.getElementById('totalModelsDisplay').textContent = allModels.length + ' models from ' + 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
+
     loadModels();
     loadStatus();
     setInterval(loadStatus, 3000);
@@ -540,7 +391,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}`);
 });