fix: pure FastAPI serving, auto-load model, rich MCP catalog with 18 servers

app.py

@@ -1,9 +1,9 @@
 """SoniCoder v2 — Entry point.
 
-gradio.Server (Gradio 6.x) serves index.html from project root
-with Gradio's queuing, concurrency, and API infrastructure.
+Uses FastAPI directly (not gradio.Server) so our custom index.html
+is always served at / without Gradio overriding the root route.
 
-Blog: https://huggingface.co/blog/introducing-gradio-server
+Model is loaded BLOCKING before server starts — no lazy loading.
 """
 
 from __future__ import annotations
@@ -27,15 +27,21 @@ logger = logging.getLogger(__name__)
 def main():
     logger.info("SoniCoder v2 starting...")
 
-    # Start loading default model in background
-    from sonicoder.model.loader import start_background_load
-    start_background_load()
-    logger.info("Background model loading started")
-
-    # Set up MCP servers from config
-    from sonicoder.mcp import get_mcp_manager
+    # ── BLOCKING model load — model must be ready BEFORE server starts ──
+    from sonicoder.model.loader import load_model
     from sonicoder.config import load_settings
     settings = load_settings()
+    model_key = settings.default_model
+    logger.info(f"Loading model {model_key} (blocking)...")
+    try:
+        load_model(model_key)
+        logger.info("Model loaded successfully — ready to serve")
+    except Exception as e:
+        logger.error(f"Failed to load model: {e}")
+        logger.info("Server will start anyway — model can be loaded later via API")
+
+    # ── Set up MCP servers from config ─────────────────────────────────
+    from sonicoder.mcp import get_mcp_manager
     if settings.mcp_servers:
         mcp = get_mcp_manager()
         mcp.configure(settings.mcp_servers)
@@ -46,12 +52,13 @@ def main():
             else:
                 logger.info(f"MCP server '{name}' connected")
 
-    # Create the server (gradio.Server — custom HTML + Gradio backend)
+    # ── Create the FastAPI server ──────────────────────────────────────
     from sonicoder.server import create_app
     app = create_app()
 
-    logger.info("Launching...")
-    app.launch(show_error=True)
+    logger.info("Launching on 0.0.0.0:7860...")
+    import uvicorn
+    uvicorn.run(app, host="0.0.0.0", port=7860, log_level="info")
 
 
 if __name__ == "__main__":

index.html

@@ -195,17 +195,46 @@ a:hover{text-decoration:underline;text-shadow:var(--glow-cyan)}
 #file-viewer pre{margin:0;font-size:11px;line-height:1.5;color:var(--code-text)}
 .file-line-num{color:var(--gray-dim);display:inline-block;width:50px;text-align:right;margin-right:12px;user-select:none;border-right:1px solid var(--border);padding-right:8px}
 
-/* MCP */
-#pane-mcp{padding:16px;gap:12px;overflow-y:auto}
-.mcp-server{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:8px}
-.mcp-server-header{display:flex;align-items:center;gap:8px;padding:8px 12px;background:rgba(30,42,58,.5);border-bottom:1px solid var(--border);font-size:12px}
-.mcp-server-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
-.mcp-server-dot.connected{background:var(--success);box-shadow:0 0 6px var(--success)}
-.mcp-server-dot.disconnected{background:var(--red);box-shadow:0 0 6px var(--red)}
-.mcp-server-name{font-weight:600;color:var(--gray-light);flex:1}
-.mcp-tools{padding:8px 12px;display:flex;flex-wrap:wrap;gap:4px}
-.mcp-tool-tag{padding:2px 8px;background:rgba(0,212,255,.08);border:1px solid rgba(0,212,255,.2);border-radius:10px;font-size:10px;color:var(--cyan)}
-.mcp-empty{color:var(--gray-dim);font-size:12px;text-align:center;padding:40px 20px}
+/* ═══ MCP TAB — Rich Catalog UI ═══ */
+#pane-mcp{overflow-y:auto;flex:1}
+.mcp-tab-bar{display:flex;border-bottom:1px solid var(--border);background:rgba(13,17,23,.6);flex-shrink:0;padding:0 8px;gap:2px;overflow-x:auto}
+.mcp-cat-tab{background:transparent;border:none;border-bottom:2px solid transparent;color:var(--gray-dim);font-family:var(--font-mono);font-size:10px;padding:8px 10px;cursor:pointer;transition:all var(--transition);letter-spacing:.5px;text-transform:uppercase;white-space:nowrap}
+.mcp-cat-tab:hover{color:var(--gray-mid)}
+.mcp-cat-tab.active{color:var(--purple);border-bottom-color:var(--purple);text-shadow:var(--glow-purple)}
+.mcp-catalog{padding:10px;display:flex;flex-direction:column;gap:8px}
+.mcp-card{border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-deep);overflow:hidden;transition:border-color var(--transition)}
+.mcp-card:hover{border-color:var(--border-focus)}
+.mcp-card-head{display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:default}
+.mcp-card-icon{font-size:18px;flex-shrink:0;width:24px;text-align:center}
+.mcp-card-info{flex:1;min-width:0}
+.mcp-card-name{font-weight:600;color:var(--gray-light);font-size:12px;margin-bottom:2px}
+.mcp-card-desc{color:var(--gray-dim);font-size:11px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.mcp-card-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
+.mcp-card-status{width:7px;height:7px;border-radius:50%;flex-shrink:0}
+.mcp-card-status.on{background:var(--success);box-shadow:0 0 6px var(--success)}
+.mcp-card-status.off{background:var(--gray-dim)}
+.mcp-toggle{position:relative;width:34px;height:18px;flex-shrink:0}
+.mcp-toggle input{opacity:0;width:0;height:0;position:absolute}
+.mcp-toggle-slider{position:absolute;inset:0;background:var(--border);border-radius:9px;cursor:pointer;transition:background var(--transition)}
+.mcp-toggle-slider::before{content:'';position:absolute;left:2px;top:2px;width:14px;height:14px;background:var(--gray-dim);border-radius:50%;transition:all var(--transition)}
+.mcp-toggle input:checked+.mcp-toggle-slider{background:rgba(57,255,20,.3);border:1px solid var(--green-dim)}
+.mcp-toggle input:checked+.mcp-toggle-slider::before{transform:translateX(16px);background:var(--green);box-shadow:0 0 6px var(--green)}
+.mcp-card-details{display:none;padding:0 12px 10px;border-top:1px solid var(--border);margin-top:0;padding-top:8px}
+.mcp-card.open .mcp-card-details{display:block}
+.mcp-detail-row{display:flex;align-items:flex-start;gap:8px;margin-bottom:4px;font-size:11px}
+.mcp-detail-label{color:var(--gray-dim);flex-shrink:0;min-width:60px}
+.mcp-detail-value{color:var(--gray-mid);word-break:break-all}
+.mcp-card-tools{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
+.mcp-tool-chip{padding:2px 8px;background:rgba(0,212,255,.08);border:1px solid rgba(0,212,255,.2);border-radius:10px;font-size:10px;color:var(--cyan)}
+.mcp-card-error{color:var(--red);font-size:11px;margin-top:4px}
+.mcp-card-expand{background:transparent;border:none;color:var(--gray-dim);font-family:var(--font-mono);font-size:10px;cursor:pointer;padding:2px 6px;border-radius:3px;transition:color var(--transition)}
+.mcp-card-expand:hover{color:var(--cyan)}
+.mcp-connecting{color:var(--amber);font-size:10px;animation:pulse 1s ease infinite}
+.mcp-stats-bar{display:flex;align-items:center;gap:12px;padding:8px 12px;border-bottom:1px solid var(--border);background:rgba(30,42,58,.3);font-size:11px;flex-shrink:0}
+.mcp-stat{color:var(--gray-dim)}
+.mcp-stat strong{color:var(--gray-light);font-weight:600}
+.mcp-stat .green{color:var(--green)}
+.mcp-stat .red{color:var(--red)}
 
 /* ═══ STATUS BAR ═══ */
 #status-bar{display:flex;align-items:center;gap:8px;padding:5px 16px;border-top:1px solid var(--border);background:var(--bg-panel);font-size:11px;flex-shrink:0}
@@ -261,7 +290,7 @@ a:hover{text-decoration:underline;text-shadow:var(--glow-cyan)}
         <span id="model-pill-text">Loading...</span>
       </div>
       <select id="model-select" title="Switch AI model"></select>
-      <div class="pill mcp-pill" id="mcp-pill">
+      <div class="pill mcp-pill" id="mcp-pill" onclick="switchTab('mcp')" style="cursor:pointer" title="Open MCP panel">
         <span class="dot disconnected" id="mcp-dot"></span>
         <span id="mcp-pill-text">MCP</span>
       </div>
@@ -338,7 +367,25 @@ a:hover{text-decoration:underline;text-shadow:var(--glow-cyan)}
           <div id="file-viewer"><pre id="file-content"></pre></div>
         </div>
         <div class="tab-pane" id="pane-mcp">
-          <div id="mcp-content"><div class="mcp-empty">Loading MCP status...</div></div>
+          <div class="mcp-stats-bar" id="mcp-stats-bar">
+            <span class="mcp-stat">Servers: <strong id="mcp-total-count">0</strong></span>
+            <span class="mcp-stat">Connected: <strong class="green" id="mcp-connected-count">0</strong></span>
+            <span class="mcp-stat">Tools: <strong id="mcp-tools-count">0</strong></span>
+          </div>
+          <div class="mcp-tab-bar" id="mcp-tab-bar">
+            <button class="mcp-cat-tab active" data-cat="all" onclick="filterMcpCat('all')">All</button>
+            <button class="mcp-cat-tab" data-cat="core" onclick="filterMcpCat('core')">Core</button>
+            <button class="mcp-cat-tab" data-cat="reasoning" onclick="filterMcpCat('reasoning')">Reasoning</button>
+            <button class="mcp-cat-tab" data-cat="dev-tools" onclick="filterMcpCat('dev-tools')">Dev Tools</button>
+            <button class="mcp-cat-tab" data-cat="database" onclick="filterMcpCat('database')">Database</button>
+            <button class="mcp-cat-tab" data-cat="search" onclick="filterMcpCat('search')">Search</button>
+            <button class="mcp-cat-tab" data-cat="browser" onclick="filterMcpCat('browser')">Browser</button>
+            <button class="mcp-cat-tab" data-cat="integrations" onclick="filterMcpCat('integrations')">Integrations</button>
+            <button class="mcp-cat-tab" data-cat="utilities" onclick="filterMcpCat('utilities')">Utilities</button>
+          </div>
+          <div class="mcp-catalog" id="mcp-catalog">
+            <div class="mcp-empty" style="color:var(--gray-dim);font-size:12px;text-align:center;padding:40px 20px">Loading MCP catalog...</div>
+          </div>
         </div>
       </div>
     </div>
@@ -367,6 +414,7 @@ var state = {
   isGenerating: false,
   modelReady: false,
   activeTab: 'preview',
+  activeMcpCat: 'all',
   toolCalls: {},
   currentStreamDiv: null,
   lastCode: '',
@@ -374,6 +422,7 @@ var state = {
   consoleStdout: '',
   consoleStderr: '',
   generatedFiles: [],
+  mcpServers: [],
 };
 
 // ═══ INIT ═══
@@ -381,7 +430,7 @@ document.addEventListener('DOMContentLoaded', function() {
   loadConfig();
   pollModelStatus();
   refreshWorkspace();
-  loadMcpStatus();
+  loadMcpCatalog();
 
   var input = document.getElementById('chat-input');
   input.addEventListener('input', autoResize);
@@ -410,6 +459,7 @@ async function loadConfig() {
     var config = await resp.json();
     var sel = document.getElementById('model-select');
     sel.innerHTML = '';
+
     (config.models || []).forEach(function(m) {
       var opt = document.createElement('option');
       opt.value = m.key;
@@ -417,6 +467,7 @@ async function loadConfig() {
       if (m.key === config.default_model) opt.selected = true;
       sel.appendChild(opt);
     });
+
     sel.addEventListener('change', function() { switchModel(sel.value); });
     renderExamples(config);
   } catch(e) { console.error('Config load failed:', e); }
@@ -477,46 +528,139 @@ async function refreshWorkspace() {
   } catch(e) { console.error(e); }
 }
 
-async function loadMcpStatus() {
+// ═══ MCP CATALOG (Rich UI) ═══
+
+async function loadMcpCatalog() {
   try {
-    var resp = await fetch('/api/mcp_status');
+    var resp = await fetch('/api/mcp_catalog');
     var data = await resp.json();
-    var dot = document.getElementById('mcp-dot');
-    var text = document.getElementById('mcp-pill-text');
-    var content = document.getElementById('mcp-content');
-    var servers = data.servers || {};
-    var keys = Object.keys(servers);
-    if (keys.length === 0) {
-      dot.className = 'dot disconnected';
-      text.textContent = 'MCP';
-      content.innerHTML = '<div class="mcp-empty">No MCP servers configured.<br><br>Add MCP servers in your config to extend SoniCoder with external tools.</div>';
-      return;
+    state.mcpServers = data.servers || [];
+    renderMcpCatalog();
+    updateMcpPill();
+  } catch(e) {
+    document.getElementById('mcp-catalog').innerHTML = '<div class="mcp-empty">MCP catalog unavailable.</div>';
+  }
+}
+
+function updateMcpPill() {
+  var servers = state.mcpServers;
+  var connected = servers.filter(function(s) { return s.connected; });
+  var dot = document.getElementById('mcp-dot');
+  var text = document.getElementById('mcp-pill-text');
+  dot.className = connected.length > 0 ? 'dot connected' : 'dot disconnected';
+  text.textContent = 'MCP ' + (connected.length > 0 ? '(' + connected.length + ')' : '');
+}
+
+function filterMcpCat(cat) {
+  state.activeMcpCat = cat;
+  document.querySelectorAll('.mcp-cat-tab').forEach(function(t) {
+    t.classList.toggle('active', t.dataset.cat === cat);
+  });
+  renderMcpCatalog();
+}
+
+function renderMcpCatalog() {
+  var cat = state.activeMcpCat;
+  var servers = state.mcpServers.filter(function(s) {
+    return cat === 'all' || s.category === cat;
+  });
+
+  // Update stats
+  var totalServers = state.mcpServers.length;
+  var connectedServers = state.mcpServers.filter(function(s) { return s.connected; }).length;
+  var totalTools = state.mcpServers.reduce(function(sum, s) { return sum + (s.tool_count || 0); }, 0);
+  document.getElementById('mcp-total-count').textContent = totalServers;
+  document.getElementById('mcp-connected-count').textContent = connectedServers;
+  document.getElementById('mcp-tools-count').textContent = totalTools;
+
+  if (servers.length === 0) {
+    document.getElementById('mcp-catalog').innerHTML = '<div class="mcp-empty">No servers in this category.</div>';
+    return;
+  }
+
+  var html = '';
+  servers.forEach(function(s) {
+    var isOn = s.connected;
+    html += '<div class="mcp-card" id="mcp-card-' + escHtml(s.key) + '">';
+    html += '<div class="mcp-card-head">';
+    html += '<span class="mcp-card-icon">' + (s.icon || '') + '</span>';
+    html += '<div class="mcp-card-info">';
+    html += '<div class="mcp-card-name">' + escHtml(s.name) + '</div>';
+    html += '<div class="mcp-card-desc">' + escHtml(s.description) + '</div>';
+    html += '</div>';
+    html += '<div class="mcp-card-actions">';
+    html += '<span class="mcp-card-status ' + (isOn ? 'on' : 'off') + '" id="mcp-status-' + escHtml(s.key) + '"></span>';
+    html += '<label class="mcp-toggle" title="' + (isOn ? 'Disable' : 'Enable') + ' ' + escHtml(s.name) + '">';
+    html += '<input type="checkbox" ' + (isOn ? 'checked' : '') + ' onchange="toggleMcpServer(\'' + escHtml(s.key) + '\', this.checked)">';
+    html += '<span class="mcp-toggle-slider"></span>';
+    html += '</label>';
+    html += '<button class="mcp-card-expand" onclick="toggleMcpCard(\'' + escHtml(s.key) + '\')">&#9660; Info</button>';
+    html += '</div>';
+    html += '</div>';
+    html += '<div class="mcp-card-details" id="mcp-details-' + escHtml(s.key) + '">';
+    if (s.install_hint) {
+      html += '<div class="mcp-detail-row"><span class="mcp-detail-label">Install:</span><span class="mcp-detail-value" style="color:var(--cyan)">' + escHtml(s.install_hint) + '</span></div>';
     }
-    var anyConnected = keys.some(function(k) { return servers[k].status === 'connected'; });
-    dot.className = anyConnected ? 'dot connected' : 'dot disconnected';
-    text.textContent = 'MCP (' + keys.length + ')';
-    var html = '';
-    keys.forEach(function(name) {
-      var s = servers[name];
-      var isConn = s.status === 'connected';
-      html += '<div class="mcp-server">';
-      html += '<div class="mcp-server-header">';
-      html += '<span class="mcp-server-dot ' + (isConn ? 'connected' : 'disconnected') + '"></span>';
-      html += '<span class="mcp-server-name">' + escHtml(name) + '</span>';
-      html += '<span class="tool-badge ' + (isConn ? 'success' : 'error') + '">' + s.status + '</span>';
-      html += '</div>';
-      if (s.tools && s.tools.length > 0) {
-        html += '<div class="mcp-tools">';
-        s.tools.forEach(function(t) { html += '<span class="mcp-tool-tag">' + escHtml(t) + '</span>'; });
-        html += '</div>';
-      }
-      html += '</div>';
+    html += '<div class="mcp-detail-row"><span class="mcp-detail-label">Transport:</span><span class="mcp-detail-value">' + escHtml(s.transport) + '</span></div>';
+    if (s.command) {
+      html += '<div class="mcp-detail-row"><span class="mcp-detail-label">Command:</span><span class="mcp-detail-value">' + escHtml(s.command + ' ' + (s.args || []).join(' ')) + '</span></div>';
+    }
+    if (s.repo_url) {
+      html += '<div class="mcp-detail-row"><span class="mcp-detail-label">Repo:</span><span class="mcp-detail-value"><a href="' + escHtml(s.repo_url) + '" target="_blank" rel="noopener">' + escHtml(s.repo_url) + '</a></span></div>';
+    }
+    if (s.tool_count > 0) {
+      html += '<div class="mcp-card-tools"><span class="mcp-tool-chip">' + s.tool_count + ' tools</span></div>';
+    }
+    html += '<div id="mcp-error-' + escHtml(s.key) + '"></div>';
+    html += '</div>';
+    html += '</div>';
+  });
+
+  document.getElementById('mcp-catalog').innerHTML = html;
+}
+
+function toggleMcpCard(key) {
+  var card = document.getElementById('mcp-card-' + key);
+  if (card) card.classList.toggle('open');
+}
+
+async function toggleMcpServer(key, enabled) {
+  var errorEl = document.getElementById('mcp-error-' + key);
+  var statusEl = document.getElementById('mcp-status-' + key);
+  if (errorEl) errorEl.innerHTML = '<span class="mcp-connecting">' + (enabled ? 'Connecting...' : 'Disconnecting...') + '</span>';
+
+  try {
+    var resp = await fetch('/api/mcp_toggle', {
+      method: 'POST',
+      headers: {'Content-Type': 'application/json'},
+      body: JSON.stringify({ server_key: key, enabled: enabled }),
     });
-    content.innerHTML = html;
+    var data = await resp.json();
+    if (data.error) {
+      if (errorEl) errorEl.innerHTML = '<div class="mcp-card-error">' + escHtml(data.error) + '</div>';
+      // Revert toggle
+      var card = document.getElementById('mcp-card-' + key);
+      if (card) {
+        var cb = card.querySelector('input[type=checkbox]');
+        if (cb) cb.checked = !enabled;
+      }
+      if (statusEl) statusEl.className = 'mcp-card-status off';
+    } else {
+      if (errorEl) errorEl.innerHTML = '';
+      if (statusEl) statusEl.className = 'mcp-card-status ' + (enabled ? 'on' : 'off');
+      // Refresh to get updated tool counts
+      setTimeout(loadMcpCatalog, 1500);
+    }
   } catch(e) {
-    document.getElementById('mcp-dot').className = 'dot disconnected';
-    document.getElementById('mcp-content').innerHTML = '<div class="mcp-empty">MCP status unavailable.</div>';
+    if (errorEl) errorEl.innerHTML = '<div class="mcp-card-error">Connection failed: ' + escHtml(e.message) + '</div>';
+    var card = document.getElementById('mcp-card-' + key);
+    if (card) {
+      var cb = card.querySelector('input[type=checkbox]');
+      if (cb) cb.checked = !enabled;
+    }
+    if (statusEl) statusEl.className = 'mcp-card-status off';
   }
+  updateMcpPill();
 }
 
 function renderExamples(config) {
@@ -552,6 +696,7 @@ function switchTab(tab) {
   document.querySelectorAll('.tab-pane').forEach(function(p) {
     p.classList.toggle('active', p.id === 'pane-' + tab);
   });
+  if (tab === 'mcp') loadMcpCatalog();
 }
 
 // ═══ FULLSCREEN ═══
@@ -587,7 +732,7 @@ function addMessage(role, content, extra) {
   var bodyClass = role === 'assistant' ? '<div class="msg-body">' : '';
   var bodyClose = role === 'assistant' ? '</div>' : '';
   var iterationHtml = extra.iteration ? '<div class="iteration-badge">Iteration ' + extra.iteration + '/' + extra.max_iterations + '</div>' : '';
-  div.innerHTML = iterationHtml + prefix + '<span class="msg-content">' + renderMd(content) + '</span>' + bodyClose + bodyClose;
+  div.innerHTML = iterationHtml + prefix + '<span class="msg-content">' + renderMd(content) + '</span>' + bodyClass + bodyClose;
   container.appendChild(div);
   container.scrollTop = container.scrollHeight;
   return div;
@@ -596,7 +741,6 @@ function addMessage(role, content, extra) {
 function renderMd(text) {
   if (!text) return '';
   text = escHtml(text);
-  // Code blocks
   text = text.replace(/```(\w*)\n([\s\S]*?)```/g, function(_, lang, code) {
     var id = 'cb_' + Date.now() + Math.random().toString(36).substr(2,4);
     return '<div class="code-block-wrap"><div class="code-block-header"><span class="code-lang">' + (lang||'code') + '</span><button class="btn-copy" onclick="copyBlock(\'' + id + '\')">&#128203; Copy</button></div><pre><code id="' + id + '">' + code.trim() + '</code></pre></div>';
@@ -640,6 +784,7 @@ function addToolCall(toolName, args) {
   var div = document.createElement('div');
   div.className = 'tool-block open';
   div.id = id;
+
   var argsStr = '';
   if (args) {
     Object.entries(args).forEach(function(e) {
@@ -647,6 +792,7 @@ function addToolCall(toolName, args) {
       argsStr += escHtml(e[0] + ': ' + v) + '\n';
     });
   }
+
   div.innerHTML =
     '<div class="tool-header">' +
       '<span class="tool-icon">&#9889;</span>' +
@@ -655,6 +801,7 @@ function addToolCall(toolName, args) {
     '</div>' +
     '<div class="tool-args">' + argsStr + '</div>' +
     '<div class="tool-result"></div>';
+
   container.appendChild(div);
   container.scrollTop = container.scrollHeight;
   state.toolCalls[id] = div;
@@ -666,6 +813,7 @@ function updateToolCall(id, success, output) {
   if (!div) return;
   var badge = div.querySelector('.tool-badge');
   var result = div.querySelector('.tool-result');
+
   if (success) {
     badge.className = 'tool-badge success';
     badge.textContent = 'DONE';
@@ -673,6 +821,7 @@ function updateToolCall(id, success, output) {
     badge.className = 'tool-badge error';
     badge.textContent = 'ERROR';
   }
+
   if (output) {
     result.textContent = output;
     result.className = success ? 'tool-result' : 'tool-result error-output';
@@ -726,15 +875,18 @@ async function handleSend() {
       body: JSON.stringify({ message: message, session_id: state.sessionId }),
     });
     if (!resp.ok) throw new Error('HTTP ' + resp.status);
+
     var reader = resp.body.getReader();
     var decoder = new TextDecoder();
     var buffer = '';
+
     while (true) {
       var result = await reader.read();
       if (result.done) break;
       buffer += decoder.decode(result.value, {stream: true});
       var lines = buffer.split('\n');
       buffer = lines.pop() || '';
+
       for (var i = 0; i < lines.length; i++) {
         var line = lines[i];
         if (!line.trim()) continue;
@@ -757,7 +909,6 @@ async function handleSend() {
                   break;
                 }
               }
-              // Capture code for Code tab
               if (ev.result.output && (ev.result.output.includes('<!DOCTYPE') || ev.result.output.includes('<html'))) {
                 showPreview(ev.result.output);
               }
@@ -790,6 +941,7 @@ async function handleSend() {
       setStatus('status-error', 'CONNECTION ERROR');
     }
   }
+
   state.isGenerating = false;
   document.getElementById('btn-send').style.display = 'flex';
   document.getElementById('btn-stop').style.display = 'none';

requirements.txt

@@ -1,6 +1,8 @@
 # SoniCoder v2 — Optimized AI Code Agent
 # Architecture inspired by Gemini CLI and Claude Code
 
+fastapi>=0.115.0
+uvicorn[standard]>=0.30.0
 gradio==6.19.0
 transformers>=4.45.0
 torch>=2.1.0
@@ -10,8 +12,8 @@ requests>=2.31.0
 beautifulsoup4>=4.12.0
 Pillow>=10.0
 
-# MCP support
-mcp>=1.0.0
+# MCP support (optional — servers work without it)
+# mcp>=1.0.0
 
 # Optional: VLM support
 # torchvision>=0.16.0

sonicoder/config/__init__.py

@@ -163,6 +163,236 @@ MODEL_REGISTRY: dict[str, ModelConfig] = {
 }
 
 
+# ── MCP Server Catalog ─────────────────────────────────────────────────
+# Pre-configured MCP servers users can enable from the UI.
+
+MCP_CATALOG: list[dict[str, Any]] = [
+    {
+        "key": "filesystem",
+        "name": "Filesystem",
+        "description": "Read, write, and manage files on the server. Full file system access with safe path resolution.",
+        "category": "core",
+        "icon": "📁",
+        "transport": "stdio",
+        "command": "npx",
+        "args": ["-y", "@anthropic/mcp-filesystem", "."],
+        "install_hint": "npx -y @anthropic/mcp-filesystem",
+        "repo_url": "https://github.com/anthropics/mcp-filesystem",
+    },
+    {
+        "key": "fetch",
+        "name": "Fetch / HTTP",
+        "description": "Make HTTP requests to any URL. Fetch web pages, APIs, and resources for the agent to read.",
+        "category": "core",
+        "icon": "🌐",
+        "transport": "stdio",
+        "command": "npx",
+        "args": ["-y", "@anthropic/mcp-fetch"],
+        "install_hint": "npx -y @anthropic/mcp-fetch",
+        "repo_url": "https://github.com/anthropics/mcp-fetch",
+    },
+    {
+        "key": "memory",
+        "name": "Memory / Knowledge Graph",
+        "description": "Persistent knowledge graph memory. Store and retrieve facts, entities, and relationships across sessions.",
+        "category": "core",
+        "icon": "🧠",
+        "transport": "stdio",
+        "command": "npx",
+        "args": ["-y", "@anthropic/mcp-memory"],
+        "install_hint": "npx -y @anthropic/mcp-memory",
+        "repo_url": "https://github.com/anthropics/mcp-memory",
+    },
+    {
+        "key": "sequential-thinking",
+        "name": "Sequential Thinking",
+        "description": "Dynamic thinking and reflection. Break down complex problems into ordered reasoning steps.",
+        "category": "reasoning",
+        "icon": "💭",
+        "transport": "stdio",
+        "command": "npx",
+        "args": ["-y", "@anthropic/mcp-sequential-thinking"],
+        "install_hint": "npx -y @anthropic/mcp-sequential-thinking",
+        "repo_url": "https://github.com/anthropics/mcp-sequential-thinking",
+    },
+    {
+        "key": "github",
+        "name": "GitHub",
+        "description": "Search repos, manage issues/PRs, create branches, and interact with the GitHub API directly.",
+        "category": "dev-tools",
+        "icon": "🐙",
+        "transport": "stdio",
+        "command": "npx",
+        "args": ["-y", "@anthropic/mcp-github"],
+        "env": {"GITHUB_TOKEN": ""},
+        "install_hint": "Set GITHUB_TOKEN env var first, then: npx -y @anthropic/mcp-github",
+        "repo_url": "https://github.com/anthropics/mcp-github",
+    },
+    {
+        "key": "git",
+        "name": "Git",
+        "description": "Git operations: diff, log, status, branch management, and commit history analysis.",
+        "category": "dev-tools",
+        "icon": "🔀",
+        "transport": "stdio",
+        "command": "npx",
+        "args": ["-y", "@anthropic/mcp-git"],
+        "install_hint": "npx -y @anthropic/mcp-git",
+        "repo_url": "https://github.com/anthropics/mcp-git",
+    },
+    {
+        "key": "docker",
+        "name": "Docker",
+        "description": "Manage Docker containers, images, and compose stacks. Build, run, and inspect containers.",
+        "category": "dev-tools",
+        "icon": "🐳",
+        "transport": "stdio",
+        "command": "npx",
+        "args": ["-y", "@anthropic/mcp-docker"],
+        "install_hint": "npx -y @anthropic/mcp-docker (requires Docker daemon)",
+        "repo_url": "https://github.com/anthropics/mcp-docker",
+    },
+    {
+        "key": "postgres",
+        "name": "PostgreSQL",
+        "description": "Read/write PostgreSQL databases. Run queries, inspect schemas, and manage tables.",
+        "category": "database",
+        "icon": "🐘",
+        "transport": "stdio",
+        "command": "npx",
+        "args": ["-y", "@anthropic/mcp-postgres"],
+        "env": {"DATABASE_URL": "postgresql://localhost:5432/mydb"},
+        "install_hint": "Set DATABASE_URL, then: npx -y @anthropic/mcp-postgres",
+        "repo_url": "https://github.com/anthropics/mcp-postgres",
+    },
+    {
+        "key": "sqlite",
+        "name": "SQLite",
+        "description": "Read/write SQLite databases. Query tables, inspect schemas, run migrations.",
+        "category": "database",
+        "icon": "🗃️",
+        "transport": "stdio",
+        "command": "npx",
+        "args": ["-y", "@anthropic/mcp-sqlite", "--db-path", "./workspace/data.db"],
+        "install_hint": "npx -y @anthropic/mcp-sqlite --db-path ./data.db",
+        "repo_url": "https://github.com/anthropics/mcp-sqlite",
+    },
+    {
+        "key": "redis",
+        "name": "Redis",
+        "description": "Redis cache and data structure operations. Get/set keys, manage lists, sets, and hashes.",
+        "category": "database",
+        "icon": "🔴",
+        "transport": "stdio",
+        "command": "npx",
+        "args": ["-y", "@anthropic/mcp-redis"],
+        "env": {"REDIS_URL": "redis://localhost:6379"},
+        "install_hint": "Set REDIS_URL, then: npx -y @anthropic/mcp-redis",
+        "repo_url": "https://github.com/anthropics/mcp-redis",
+    },
+    {
+        "key": "brave-search",
+        "name": "Brave Search",
+        "description": "Web search powered by Brave. Search the web, get AI summaries, and fetch page contents.",
+        "category": "search",
+        "icon": "🔍",
+        "transport": "stdio",
+        "command": "npx",
+        "args": ["-y", "@anthropic/mcp-brave-search"],
+        "env": {"BRAVE_API_KEY": ""},
+        "install_hint": "Set BRAVE_API_KEY, then: npx -y @anthropic/mcp-brave-search",
+        "repo_url": "https://github.com/anthropics/mcp-brave-search",
+    },
+    {
+        "key": "puppeteer",
+        "name": "Puppeteer / Browser",
+        "description": "Headless browser automation. Navigate pages, take screenshots, extract content, and fill forms.",
+        "category": "browser",
+        "icon": "🎭",
+        "transport": "stdio",
+        "command": "npx",
+        "args": ["-y", "@anthropic/mcp-puppeteer"],
+        "install_hint": "npx -y @anthropic/mcp-puppeteer (requires Chromium)",
+        "repo_url": "https://github.com/anthropics/mcp-puppeteer",
+    },
+    {
+        "key": "slack",
+        "name": "Slack",
+        "description": "Send messages, read channels, and manage Slack workspaces via the Slack API.",
+        "category": "integrations",
+        "icon": "💬",
+        "transport": "stdio",
+        "command": "npx",
+        "args": ["-y", "@anthropic/mcp-slack"],
+        "env": {"SLACK_BOT_TOKEN": "", "SLACK_TEAM_ID": ""},
+        "install_hint": "Set SLACK_BOT_TOKEN + SLACK_TEAM_ID, then: npx -y @anthropic/mcp-slack",
+        "repo_url": "https://github.com/anthropics/mcp-slack",
+    },
+    {
+        "key": "context7",
+        "name": "Context7 / Docs",
+        "description": "Look up library documentation. Get up-to-date docs for npm packages, Python libs, and more.",
+        "category": "search",
+        "icon": "📚",
+        "transport": "stdio",
+        "command": "npx",
+        "args": ["-y", "@anthropic/mcp-context7"],
+        "install_hint": "npx -y @anthropic/mcp-context7",
+        "repo_url": "https://github.com/anthropics/mcp-context7",
+    },
+    {
+        "key": "everything",
+        "name": "Everything (Meta)",
+        "description": "Combines multiple MCP tools into one server: filesystem, fetch, memory, and more.",
+        "category": "core",
+        "icon": "⚡",
+        "transport": "stdio",
+        "command": "npx",
+        "args": ["-y", "@anthropic/mcp-everything"],
+        "install_hint": "npx -y @anthropic/mcp-everything",
+        "repo_url": "https://github.com/anthropics/mcp-everything",
+    },
+    {
+        "key": "sentry",
+        "name": "Sentry",
+        "description": "Query Sentry for error tracking. List issues, get stack traces, and manage projects.",
+        "category": "integrations",
+        "icon": "🛡️",
+        "transport": "stdio",
+        "command": "npx",
+        "args": ["-y", "@anthropic/mcp-sentry"],
+        "env": {"SENTRY_TOKEN": "", "SENTRY_ORG": "", "SENTRY_PROJECT": ""},
+        "install_hint": "Set SENTRY_TOKEN/ORG/PROJECT, then: npx -y @anthropic/mcp-sentry",
+        "repo_url": "https://github.com/anthropics/mcp-sentry",
+    },
+    {
+        "key": "google-maps",
+        "name": "Google Maps",
+        "description": "Search places, get directions, geocode addresses, and embed maps via Google Maps API.",
+        "category": "integrations",
+        "icon": "🗺️",
+        "transport": "stdio",
+        "command": "npx",
+        "args": ["-y", "@anthropic/mcp-google-maps"],
+        "env": {"GOOGLE_MAPS_API_KEY": ""},
+        "install_hint": "Set GOOGLE_MAPS_API_KEY, then: npx -y @anthropic/mcp-google-maps",
+        "repo_url": "https://github.com/anthropics/mcp-google-maps",
+    },
+    {
+        "key": "time",
+        "name": "Time / Timezone",
+        "description": "Get current time in any timezone. Convert between timezones and calculate time differences.",
+        "category": "utilities",
+        "icon": "⏰",
+        "transport": "stdio",
+        "command": "npx",
+        "args": ["-y", "@anthropic/mcp-time"],
+        "install_hint": "npx -y @anthropic/mcp-time",
+        "repo_url": "https://github.com/anthropics/mcp-time",
+    },
+]
+
+
 def get_available_models() -> dict[str, ModelConfig]:
     """Return all registered models."""
     return MODEL_REGISTRY.copy()

sonicoder/server/__init__.py

@@ -1,13 +1,9 @@
-"""Server routes — using gradio.Server (Gradio 6.x).
+"""Server routes — pure FastAPI with custom HTML frontend.
 
-Blog: https://huggingface.co/blog/introducing-gradio-server
+Uses FastAPI directly (not gradio.Server) to guarantee our custom
+index.html is served at / without Gradio's default UI taking over.
 
-Pattern:
-  - from gradio import Server  →  app = Server()
-  - @app.get("/") serves index.html from project root
-  - All API endpoints use raw FastAPI routes (Server extends FastAPI)
-  - Streaming chat uses StreamingResponse (text/event-stream)
-  - Frontend uses plain fetch() — no @gradio/client needed
+Frontend uses plain fetch() — no @gradio/client needed.
 """
 
 from __future__ import annotations
@@ -18,12 +14,12 @@ import uuid
 from pathlib import Path
 from typing import Any, Generator
 
-from fastapi import Request
+from fastapi import FastAPI, Request
 from fastapi.responses import HTMLResponse, StreamingResponse, JSONResponse
 
 from ..config import (
     Settings, get_available_models, load_settings,
-    WORKSPACE_ROOT, CONFIG_DIR,
+    WORKSPACE_ROOT, CONFIG_DIR, MCP_CATALOG,
 )
 from ..model.loader import (
     get_model_status, start_background_load, switch_model as switch_model_fn,
@@ -87,15 +83,12 @@ def _json_str(data) -> JSONResponse:
 # ── Create App ────────────────────────────────────────────────────────
 
 def create_app():
-    """Create and return a gradio.Server with custom HTML frontend.
+    """Create and return a FastAPI app with custom HTML frontend.
 
-    Blog: https://huggingface.co/blog/introducing-gradio-server
-    Server extends FastAPI, so standard @app.get/post routes work.
-    @app.get("/") serves index.html from project root.
+    Uses FastAPI directly (not gradio.Server) so our custom index.html
+    is always served at / without being overridden by Gradio's routes.
     """
-    from gradio import Server
-
-    app = Server()
+    app = FastAPI(title="SoniCoder v2", docs_url=None, redoc_url=None)
 
     # ── Serve index.html from project root ─────────────────────────────
 
@@ -275,6 +268,90 @@ def create_app():
     async def mcp_status():
         return _json(get_mcp_manager().get_status())
 
+    # ── MCP catalog (available servers to enable) ──────────────────────
+
+    @app.get("/api/mcp_catalog")
+    async def mcp_catalog():
+        """Return all available MCP servers from the catalog, with their current status."""
+        manager = get_mcp_manager()
+        status = manager.get_status()
+        catalog = []
+        for server in MCP_CATALOG:
+            key = server["key"]
+            s = status.get(key, {"connected": False, "tool_count": 0})
+            catalog.append({
+                "key": key,
+                "name": server["name"],
+                "description": server["description"],
+                "category": server["category"],
+                "icon": server.get("icon", ""),
+                "transport": server["transport"],
+                "command": server.get("command", ""),
+                "args": server.get("args", []),
+                "connected": s.get("connected", False),
+                "enabled": key in status,
+                "tool_count": s.get("tool_count", 0),
+                "install_hint": server.get("install_hint", ""),
+                "repo_url": server.get("repo_url", ""),
+            })
+        return JSONResponse(content={"servers": catalog})
+
+    # ── MCP toggle (enable/disable a server) ───────────────────────────
+
+    @app.post("/api/mcp_toggle")
+    async def mcp_toggle(request: Request):
+        body = await request.json()
+        server_key = body.get("server_key", "")
+        enabled = body.get("enabled", False)
+
+        # Find in catalog
+        server_cfg = None
+        for s in MCP_CATALOG:
+            if s["key"] == server_key:
+                server_cfg = s
+                break
+
+        if not server_cfg:
+            return JSONResponse(content={"error": f"Unknown MCP server: {server_key}"})
+
+        manager = get_mcp_manager()
+
+        if not enabled:
+            # Disable: remove from manager
+            manager.remove_server(server_key)
+            return JSONResponse(content={"status": "disabled", "server": server_key})
+        else:
+            # Enable: add and connect
+            from ..config import MCPServerConfig
+            config = MCPServerConfig(
+                name=server_key,
+                transport=server_cfg["transport"],
+                command=server_cfg.get("command"),
+                args=server_cfg.get("args", []),
+                env=server_cfg.get("env", {}),
+                enabled=True,
+            )
+            manager.add_server(config)
+            error = None
+            if config.transport == "stdio" and config.command:
+                try:
+                    error = manager.connect_all().get(server_key)
+                except Exception as e:
+                    error = str(e)
+            return JSONResponse(content={
+                "status": "enabled" if not error else "error",
+                "server": server_key,
+                "error": error,
+            })
+
+    # ── MCP connect all ────────────────────────────────────────────────
+
+    @app.post("/api/mcp_connect_all")
+    async def mcp_connect_all():
+        manager = get_mcp_manager()
+        results = manager.connect_all()
+        return JSONResponse(content={"results": results})
+
     # ── Policy status ──────────────────────────────────────────────────
 
     @app.get("/api/policy_status")