rewrite: use gradio.Server + @app .api() + custom HTML (proper Gradio 6.x pattern)

index.html

@@ -4,11 +4,6 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>SoniCoder v2 — AI Code Agent</title>
-<!-- Gradio JS Client — talks to @app.api() endpoints through Gradio's queue -->
-<script type="module">
-import { Client } from "https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js";
-window.__gradio_client = { Client };
-</script>
 <style>
   :root {
     --bg-primary: #0f0f13;
@@ -34,14 +29,12 @@ window.__gradio_client = { Client };
   * { margin:0; padding:0; box-sizing:border-box; }
   body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background:var(--bg-primary); color:var(--text-primary); height:100vh; overflow:hidden; }
 
-  /* Layout */
   .app { display:flex; height:100vh; }
   .sidebar { width:280px; background:var(--bg-secondary); border-right:1px solid var(--border); display:flex; flex-direction:column; flex-shrink:0; }
   .main { flex:1; display:flex; flex-direction:column; min-width:0; }
   .workspace-panel { width:300px; background:var(--bg-secondary); border-left:1px solid var(--border); display:flex; flex-direction:column; flex-shrink:0; transition:width 0.3s; overflow:hidden; }
   .workspace-panel.collapsed { width:0; border-left:none; }
 
-  /* Sidebar */
   .sidebar-header { padding:20px; border-bottom:1px solid var(--border); }
   .logo { font-size:20px; font-weight:700; background:linear-gradient(135deg, #7c6ef0, #a78bfa, #60a5fa); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
   .logo-sub { font-size:11px; color:var(--text-muted); margin-top:2px; letter-spacing:1px; text-transform:uppercase; }
@@ -62,11 +55,9 @@ window.__gradio_client = { Client };
   .sidebar-section h3 { font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:12px; }
   .sidebar-info { font-size:12px; color:var(--text-secondary); line-height:1.6; }
   .sidebar-info code { background:var(--bg-tertiary); padding:2px 6px; border-radius:4px; font-size:11px; color:var(--accent); }
-
   .new-chat-btn { margin:16px 20px; padding:10px; background:var(--accent); color:white; border:none; border-radius:var(--radius-sm); font-size:13px; font-weight:600; cursor:pointer; transition:all 0.2s; }
   .new-chat-btn:hover { background:var(--accent-hover); transform:translateY(-1px); }
 
-  /* Chat Area */
   .chat-header { padding:16px 24px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
   .chat-header h2 { font-size:15px; font-weight:600; }
   .header-actions { display:flex; gap:8px; }
@@ -95,7 +86,6 @@ window.__gradio_client = { Client };
   .message-body ul, .message-body ol { padding-left:20px; margin:8px 0; }
   .message-body li { margin:4px 0; }
 
-  /* Tool Calls */
   .tool-call { background:var(--bg-tertiary); border:1px solid var(--border); border-radius:var(--radius-sm); margin:12px 0; padding:12px 16px; }
   .tool-call-header { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
   .tool-icon { font-size:14px; }
@@ -108,11 +98,8 @@ window.__gradio_client = { Client };
   .tool-result { font-size:12px; background:var(--bg-primary); border-radius:6px; padding:8px 12px; max-height:300px; overflow-y:auto; white-space:pre-wrap; word-break:break-all; font-family:'JetBrains Mono',monospace; line-height:1.5; color:var(--text-secondary); }
   .tool-result::-webkit-scrollbar { width:4px; }
   .tool-result::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }
-
-  /* Iteration Badge */
   .iteration-badge { display:inline-flex; align-items:center; gap:4px; font-size:11px; color:var(--text-muted); background:var(--bg-tertiary); padding:2px 10px; border-radius:10px; margin-bottom:8px; }
 
-  /* Input Area */
   .chat-input { padding:16px 24px 24px; border-top:1px solid var(--border); }
   .input-wrapper { display:flex; align-items:flex-end; gap:12px; background:var(--bg-tertiary); border:1px solid var(--border); border-radius:var(--radius); padding:12px 16px; transition:border-color 0.2s; }
   .input-wrapper:focus-within { border-color:var(--accent); }
@@ -124,34 +111,22 @@ window.__gradio_client = { Client };
   .stop-btn { padding:8px 20px; background:var(--error); color:white; border:none; border-radius:var(--radius-sm); font-size:13px; font-weight:600; cursor:pointer; }
   .input-hint { font-size:11px; color:var(--text-muted); margin-top:8px; text-align:center; }
 
-  /* Workspace Panel */
   .ws-header { padding:16px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
   .ws-header h3 { font-size:13px; font-weight:600; }
   .ws-tree { flex:1; overflow-y:auto; padding:12px 16px; font-family:'JetBrains Mono',monospace; font-size:12px; line-height:1.8; color:var(--text-secondary); white-space:pre; }
   .ws-tree::-webkit-scrollbar { width:4px; }
   .ws-tree::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }
 
-  /* Typing indicator */
   .typing-indicator { display:flex; gap:4px; padding:8px 0; }
   .typing-dot { width:6px; height:6px; border-radius:50%; background:var(--accent); animation:typingBounce 1.4s infinite; }
   .typing-dot:nth-child(2) { animation-delay:0.2s; }
   .typing-dot:nth-child(3) { animation-delay:0.4s; }
   @keyframes typingBounce { 0%,60%,100%{transform:translateY(0)} 30%{transform:translateY(-6px)} }
 
-  /* Example prompts */
   .examples { padding:16px 20px; }
   .example-btn { display:block; width:100%; text-align:left; padding:10px 12px; background:var(--bg-tertiary); color:var(--text-secondary); border:1px solid var(--border); border-radius:var(--radius-sm); font-size:12px; margin-bottom:8px; cursor:pointer; transition:all 0.2s; line-height:1.4; }
   .example-btn:hover { background:var(--bg-hover); color:var(--text-primary); border-color:var(--accent); }
 
-  /* Loading overlay */
-  .loading-overlay { position:fixed; inset:0; background:var(--bg-primary); display:flex; align-items:center; justify-content:center; z-index:9999; transition:opacity 0.3s; }
-  .loading-overlay.hidden { opacity:0; pointer-events:none; }
-  .loading-spinner { text-align:center; }
-  .loading-spinner .spinner { width:32px; height:32px; border:3px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:spin 0.8s linear infinite; margin:0 auto 12px; }
-  @keyframes spin { to{transform:rotate(360deg)} }
-  .loading-spinner p { color:var(--text-secondary); font-size:13px; }
-
-  /* Responsive */
   @media (max-width:900px) {
     .sidebar { display:none; }
     .workspace-panel { display:none; }
@@ -159,42 +134,27 @@ window.__gradio_client = { Client };
 </style>
 </head>
 <body>
-
-<!-- Loading overlay while Gradio client connects -->
-<div class="loading-overlay" id="loadingOverlay">
-  <div class="loading-spinner">
-    <div class="spinner"></div>
-    <p>Connecting to SoniCoder...</p>
-  </div>
-</div>
-
 <div class="app">
-  <!-- Sidebar -->
   <aside class="sidebar">
     <div class="sidebar-header">
       <div class="logo">SoniCoder v2</div>
       <div class="logo-sub">AI Code Agent</div>
     </div>
-
     <div class="model-selector">
       <label>Model</label>
       <select id="modelSelect"></select>
     </div>
-
     <div class="model-status">
       <span class="status-dot unknown" id="statusDot"></span>
-      <span class="status-text" id="statusText">Connecting...</span>
+      <span class="status-text" id="statusText">Loading...</span>
     </div>
-
     <button class="new-chat-btn" id="newChatBtn">+ New Chat</button>
-
     <div class="sidebar-section">
       <h3>Quick Start</h3>
       <div class="sidebar-info">
-        Ask me to build anything — a web app, API, script, or full-stack project. I'll create the files and verify they work.
+        Ask me to build anything &mdash; a web app, API, script, or full-stack project. I'll create the files and verify they work.
       </div>
     </div>
-
     <div class="examples" id="examplesPanel">
       <div class="example-btn" data-example="Build a Flask REST API with user CRUD endpoints">Build a Flask REST API with user CRUD endpoints</div>
       <div class="example-btn" data-example="Create a React todo app with localStorage persistence">Create a React todo app with localStorage persistence</div>
@@ -204,7 +164,6 @@ window.__gradio_client = { Client };
     </div>
   </aside>
 
-  <!-- Main Chat -->
   <div class="main">
     <div class="chat-header">
       <h2>Chat</h2>
@@ -213,7 +172,6 @@ window.__gradio_client = { Client };
         <button class="header-btn" id="refreshWsBtn">Refresh</button>
       </div>
     </div>
-
     <div class="chat-messages" id="chatMessages">
       <div class="message" id="welcomeMsg" style="text-align:center; padding:60px 20px;">
         <div style="font-size:28px; margin-bottom:12px; opacity:0.6;">SoniCoder v2</div>
@@ -222,7 +180,6 @@ window.__gradio_client = { Client };
         </div>
       </div>
     </div>
-
     <div class="chat-input">
       <div class="input-wrapper">
         <textarea id="chatInput" placeholder="Describe what you want to build..." rows="1"></textarea>
@@ -232,148 +189,120 @@ window.__gradio_client = { Client };
     </div>
   </div>
 
-  <!-- Workspace Panel -->
   <div class="workspace-panel" id="workspacePanel">
-    <div class="ws-header">
-      <h3>Workspace</h3>
-    </div>
+    <div class="ws-header"><h3>Workspace</h3></div>
     <div class="ws-tree" id="wsTree">Loading...</div>
   </div>
 </div>
 
-<script type="module">
-// ── Gradio JS Client ──────────────────────────────────────────────────
-// All non-streaming API calls go through @gradio/client → Gradio queue.
-// Only the streaming /chat endpoint uses raw fetch (FastAPI StreamingResponse).
-
-import { Client } from "https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js";
-
-let client = null;   // Gradio JS Client instance
-let sessionId = '';
-let isStreaming = false;
-let currentToolCalls = {};
-
-// ── Init: connect Gradio client, then load UI ────────────��───────────
-
-async function init() {
-  try {
-    client = await Client.connect(window.location.origin);
-    console.log('Gradio client connected');
-
-    // Load config + model list
-    await loadConfig();
-    // Start polling model status
-    pollModelStatus();
-    // Load workspace tree
-    await refreshWorkspace();
-    // Hide loading overlay
-    document.getElementById('loadingOverlay').classList.add('hidden');
-  } catch (e) {
-    console.error('Init failed:', e);
-    document.querySelector('.loading-spinner p').textContent =
-      'Connection failed. Retrying...';
-    setTimeout(init, 3000);
-  }
-}
+<script>
+// ── State ──────────────────────────────────────────────────────────────
+var sessionId = '';
+var isStreaming = false;
+var currentToolCalls = {};
+var currentStreamDiv = null;
+
+// ── Init ──────────────────────────────────────────────────────────────
+document.addEventListener('DOMContentLoaded', function() {
+  loadConfig();
+  pollModelStatus();
+  refreshWorkspace();
+});
 
-// ── Config: load model list via @app.api("get_config") ────────────────
+// ── API calls (plain fetch to FastAPI routes on gradio.Server) ────────
 
 async function loadConfig() {
-  const result = await client.predict('/get_config', {});
-  // @app.api() wraps return in result.data[0]
-  const config = JSON.parse(result.data[0]);
-
-  const select = document.getElementById('modelSelect');
-  select.innerHTML = '';
-  (config.models || []).forEach(m => {
-    const opt = document.createElement('option');
-    opt.value = m.key;
-    opt.textContent = `${m.name} (${m.size_gb}GB)`;
-    if (m.key === config.default_model) opt.selected = true;
-    select.appendChild(opt);
-  });
-
-  select.addEventListener('change', () => switchModel(select.value));
+  try {
+    var resp = await fetch('/api/get_config');
+    var config = await resp.json();
+
+    var select = document.getElementById('modelSelect');
+    select.innerHTML = '';
+    (config.models || []).forEach(function(m) {
+      var opt = document.createElement('option');
+      opt.value = m.key;
+      opt.textContent = m.name + ' (' + m.size_gb + 'GB)';
+      if (m.key === config.default_model) opt.selected = true;
+      select.appendChild(opt);
+    });
+    select.addEventListener('change', function() { switchModel(select.value); });
+  } catch (e) { console.error('Config load failed:', e); }
 }
 
-// ── Model status: poll via @app.api("model_status") ──────────────────
-
 async function pollModelStatus() {
   try {
-    const result = await client.predict('/model_status', {});
-    const status = JSON.parse(result.data[0]);
-    const dot = document.getElementById('statusDot');
-    const text = document.getElementById('statusText');
-
+    var resp = await fetch('/api/model_status');
+    var status = await resp.json();
+    var dot = document.getElementById('statusDot');
+    var text = document.getElementById('statusText');
     dot.className = 'status-dot ' + (status.status || 'unknown');
-    const names = { ready:'Ready', loading:'Loading...', error:'Error', unknown:'Unknown' };
+    var names = { ready:'Ready', loading:'Loading...', error:'Error', unknown:'Unknown' };
     text.textContent = status.model_name || names[status.status] || 'Unknown';
-
-    if (status.status === 'loading') {
-      setTimeout(pollModelStatus, 3000);
-    }
-  } catch (e) {
-    setTimeout(pollModelStatus, 5000);
-  }
+    if (status.status === 'loading') setTimeout(pollModelStatus, 3000);
+  } catch (e) { setTimeout(pollModelStatus, 5000); }
 }
 
-// ── Switch model: @app.api("switch_model") ───────────────────────────
-
 async function switchModel(key) {
   try {
-    await client.predict('/switch_model', { model_key: key });
+    await fetch('/api/switch_model', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ model_key: key }),
+    });
     document.getElementById('statusDot').className = 'status-dot loading';
     document.getElementById('statusText').textContent = 'Switching...';
     setTimeout(pollModelStatus, 2000);
   } catch (e) { console.error(e); }
 }
 
-// ── Workspace tree: @app.api("workspace_tree") ───────────────────────
-
 async function refreshWorkspace() {
   try {
-    const result = await client.predict('/workspace_tree', { max_depth: 3 });
-    const data = JSON.parse(result.data[0]);
+    var resp = await fetch('/api/workspace_tree?max_depth=3');
+    var data = await resp.json();
     document.getElementById('wsTree').textContent = data.tree || '(empty)';
   } catch (e) { console.error(e); }
 }
 
-// ── Reset session: @app.api("reset_session") ─────────────────────────
-
 async function resetSession() {
   if (sessionId) {
     try {
-      await client.predict('/reset_session', { session_id: sessionId });
+      await fetch('/api/reset_session', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ session_id: sessionId }),
+      });
     } catch (e) { /* ignore */ }
   }
   sessionId = '';
-  document.getElementById('chatMessages').innerHTML = `
-    <div class="message" id="welcomeMsg" style="text-align:center; padding:60px 20px;">
-      <div style="font-size:28px; margin-bottom:12px; opacity:0.6;">SoniCoder v2</div>
-      <div style="color:var(--text-secondary); font-size:14px;">New session started. What would you like to build?</div>
-    </div>`;
+  document.getElementById('chatMessages').innerHTML =
+    '<div class="message" id="welcomeMsg" style="text-align:center; padding:60px 20px;">' +
+    '<div style="font-size:28px; margin-bottom:12px; opacity:0.6;">SoniCoder v2</div>' +
+    '<div style="color:var(--text-secondary); font-size:14px;">New session started. What would you like to build?</div>' +
+    '</div>';
 }
 
 // ── Message Rendering ────────────────────────────────────────────────
 
-function appendMessage(role, content, extra = {}) {
-  const container = document.getElementById('chatMessages');
-  const div = document.createElement('div');
+function appendMessage(role, content, extra) {
+  extra = extra || {};
+  var container = document.getElementById('chatMessages');
+  var div = document.createElement('div');
   div.className = 'message';
   div.id = extra.msgId || '';
 
-  const time = new Date().toLocaleTimeString([], {hour:'2-digit', minute:'2-digit'});
-  const avatarClass = role === 'user' ? 'user' : 'agent';
-  const avatarText = role === 'user' ? 'Y' : 'SC';
+  var time = new Date().toLocaleTimeString([], {hour:'2-digit', minute:'2-digit'});
+  var avatarClass = role === 'user' ? 'user' : 'agent';
+  var avatarText = role === 'user' ? 'Y' : 'SC';
+  var iterationHtml = extra.iteration ? '<span class="iteration-badge">Iteration ' + extra.iteration + '</span>' : '';
 
-  div.innerHTML = `
-    <div class="message-header">
-      <div class="message-avatar ${avatarClass}">${avatarText}</div>
-      <span class="message-role">${role === 'user' ? 'You' : 'SoniCoder'}</span>
-      <span class="message-time">${time}</span>
-      ${extra.iteration ? `<span class="iteration-badge">Iteration ${extra.iteration}</span>` : ''}
-    </div>
-    <div class="message-body">${formatContent(content)}</div>`;
+  div.innerHTML =
+    '<div class="message-header">' +
+      '<div class="message-avatar ' + avatarClass + '">' + avatarText + '</div>' +
+      '<span class="message-role">' + (role === 'user' ? 'You' : 'SoniCoder') + '</span>' +
+      '<span class="message-time">' + time + '</span>' +
+      iterationHtml +
+    '</div>' +
+    '<div class="message-body">' + formatContent(content) + '</div>';
 
   container.appendChild(div);
   container.scrollTop = container.scrollHeight;
@@ -382,8 +311,8 @@ function appendMessage(role, content, extra = {}) {
 
 function formatContent(text) {
   if (!text) return '';
-  text = text.replace(/```(\w*)\n([\s\S]*?)```/g, (_, lang, code) => {
-    return `<pre><code class="language-${lang}">${escapeHtml(code.trim())}</code></pre>`;
+  text = text.replace(/```(\w*)\n([\s\S]*?)```/g, function(_, lang, code) {
+    return '<pre><code class="language-' + lang + '">' + escapeHtml(code.trim()) + '</code></pre>';
   });
   text = text.replace(/`([^`]+)`/g, '<code>$1</code>');
   text = text.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
@@ -394,7 +323,7 @@ function formatContent(text) {
 }
 
 function escapeHtml(text) {
-  const d = document.createElement('div');
+  var d = document.createElement('div');
   d.textContent = text;
   return d.innerHTML;
 }
@@ -402,19 +331,19 @@ function escapeHtml(text) {
 // ── Tool Call UI ─────────────────────────────────────────────────────
 
 function addToolCall(toolName, args) {
-  const container = document.getElementById('chatMessages');
-  const id = 'tc_' + Date.now();
-  const div = document.createElement('div');
+  var container = document.getElementById('chatMessages');
+  var id = 'tc_' + Date.now();
+  var div = document.createElement('div');
   div.className = 'tool-call';
   div.id = id;
-  div.innerHTML = `
-    <div class="tool-call-header">
-      <span class="tool-icon">&#9889;</span>
-      <span class="tool-name">${escapeHtml(toolName)}</span>
-      <span class="tool-status running">Running</span>
-    </div>
-    <div class="tool-args">${formatToolArgs(args)}</div>
-    <div class="tool-result" style="display:none;"></div>`;
+  div.innerHTML =
+    '<div class="tool-call-header">' +
+      '<span class="tool-icon">&#9889;</span>' +
+      '<span class="tool-name">' + escapeHtml(toolName) + '</span>' +
+      '<span class="tool-status running">Running</span>' +
+    '</div>' +
+    '<div class="tool-args">' + formatToolArgs(args) + '</div>' +
+    '<div class="tool-result" style="display:none;"></div>';
   container.appendChild(div);
   container.scrollTop = container.scrollHeight;
   currentToolCalls[id] = div;
@@ -422,10 +351,10 @@ function addToolCall(toolName, args) {
 }
 
 function updateToolCall(id, success, output) {
-  const div = currentToolCalls[id];
+  var div = currentToolCalls[id];
   if (!div) return;
-  const status = div.querySelector('.tool-status');
-  const result = div.querySelector('.tool-result');
+  var status = div.querySelector('.tool-status');
+  var result = div.querySelector('.tool-result');
   status.className = 'tool-status ' + (success ? 'success' : 'error');
   status.textContent = success ? 'Done' : 'Error';
   if (output) {
@@ -438,57 +367,52 @@ function updateToolCall(id, success, output) {
 
 function formatToolArgs(args) {
   if (!args) return '';
-  const lines = Object.entries(args).map(([k, v]) => {
-    const val = typeof v === 'string' ? (v.length > 60 ? v.slice(0, 60) + '...' : v) : JSON.stringify(v);
-    return `${k}: ${val}`;
+  var lines = Object.entries(args).map(function(entry) {
+    var k = entry[0], v = entry[1];
+    var val = typeof v === 'string' ? (v.length > 60 ? v.slice(0, 60) + '...' : v) : JSON.stringify(v);
+    return k + ': ' + val;
   });
   return escapeHtml(lines.join('\n'));
 }
 
 // ── Streaming UI ─────────────────────────────────────────────────────
 
-let currentStreamDiv = null;
-
 function startStreaming() {
-  // Remove welcome message if present
-  const welcome = document.getElementById('welcomeMsg');
+  var welcome = document.getElementById('welcomeMsg');
   if (welcome) welcome.remove();
-
   currentStreamDiv = appendMessage('agent', '', {});
-  const body = currentStreamDiv.querySelector('.message-body');
+  var body = currentStreamDiv.querySelector('.message-body');
   body.innerHTML = '<div class="typing-indicator"><div class="typing-dot"></div><div class="typing-dot"></div><div class="typing-dot"></div></div>';
 }
 
 function updateStreaming(text) {
   if (!currentStreamDiv) return;
-  const body = currentStreamDiv.querySelector('.message-body');
-  body.innerHTML = formatContent(text) ||
-    '<div class="typing-indicator"><div class="typing-dot"></div><div class="typing-dot"></div><div class="typing-dot"></div></div>';
+  var body = currentStreamDiv.querySelector('.message-body');
+  var formatted = formatContent(text);
+  body.innerHTML = formatted || '<div class="typing-indicator"><div class="typing-dot"></div><div class="typing-dot"></div><div class="typing-dot"></div></div>';
   document.getElementById('chatMessages').scrollTop =
     document.getElementById('chatMessages').scrollHeight;
 }
 
 function finalizeStream(text) {
   if (!currentStreamDiv) return;
-  const body = currentStreamDiv.querySelector('.message-body');
+  var body = currentStreamDiv.querySelector('.message-body');
   body.innerHTML = formatContent(text);
   currentStreamDiv = null;
 }
 
-// ── Send Message ─────────────────────────────────────────────────────
-// Uses raw fetch to POST /chat (FastAPI StreamingResponse).
-// This is NOT @app.api() — it's a raw FastAPI route for SSE streaming.
+// ── Send Message (POST /chat → StreamingResponse) ────────────────────
 
 async function sendMessage() {
-  const input = document.getElementById('chatInput');
-  const message = input.value.trim();
+  var input = document.getElementById('chatInput');
+  var message = input.value.trim();
   if (!message || isStreaming) return;
 
   input.value = '';
   input.style.height = 'auto';
   isStreaming = true;
 
-  const sendBtn = document.getElementById('sendBtn');
+  var sendBtn = document.getElementById('sendBtn');
   sendBtn.textContent = 'Stop';
   sendBtn.className = 'stop-btn';
 
@@ -496,93 +420,76 @@ async function sendMessage() {
   startStreaming();
 
   try {
-    const resp = await fetch('/chat', {
+    var resp = await fetch('/chat', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({
-        message: message,
-        session_id: sessionId,
-      }),
+      body: JSON.stringify({ message: message, session_id: sessionId }),
     });
 
-    if (!resp.ok) {
-      throw new Error(`HTTP ${resp.status}: ${resp.statusText}`);
-    }
+    if (!resp.ok) throw new Error('HTTP ' + resp.status);
 
-    const reader = resp.body.getReader();
-    const decoder = new TextDecoder();
-    let buffer = '';
+    var reader = resp.body.getReader();
+    var decoder = new TextDecoder();
+    var buffer = '';
 
     while (true) {
-      const { done, value } = await reader.read();
-      if (done) break;
-
-      buffer += decoder.decode(value, { stream: true });
-      const lines = buffer.split('\n');
+      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 (const line of lines) {
+      for (var i = 0; i < lines.length; i++) {
+        var line = lines[i];
         if (!line.trim()) continue;
         try {
-          const event = JSON.parse(line);
-
+          var event = JSON.parse(line);
           switch (event.type) {
             case 'streaming':
-              const display = (event.content || '').replace(/```tool[\s\S]*?```/g, '').trim();
+              var display = (event.content || '').replace(/```tool[\s\S]*?```/g, '').trim();
               updateStreaming(display);
               break;
-
             case 'tool_call':
               addToolCall(event.tool, event.args);
               break;
-
             case 'tool_result':
-              const tcIds = Object.keys(currentToolCalls).reverse();
-              for (const tcId of tcIds) {
-                const tcDiv = currentToolCalls[tcId];
+              var tcIds = Object.keys(currentToolCalls).reverse();
+              for (var j = 0; j < tcIds.length; j++) {
+                var tcDiv = currentToolCalls[tcIds[j]];
                 if (tcDiv && tcDiv.querySelector('.tool-status.running')) {
-                  updateToolCall(tcId, event.result.success, event.result.output || event.result.error);
+                  updateToolCall(tcIds[j], event.result.success, event.result.output || event.result.error);
                   break;
                 }
               }
               break;
-
             case 'status':
               if (event.iteration && currentStreamDiv) {
-                const header = currentStreamDiv.querySelector('.message-header');
+                var header = currentStreamDiv.querySelector('.message-header');
                 if (header) {
-                  let badge = header.querySelector('.iteration-badge');
+                  var badge = header.querySelector('.iteration-badge');
                   if (!badge) {
                     badge = document.createElement('span');
                     badge.className = 'iteration-badge';
                     header.appendChild(badge);
                   }
-                  badge.textContent = `Iteration ${event.iteration}/${event.max_iterations}`;
+                  badge.textContent = 'Iteration ' + event.iteration + '/' + event.max_iterations;
                 }
               }
-              if (event.session_id && !sessionId) {
-                sessionId = event.session_id;
-              }
+              if (event.session_id && !sessionId) sessionId = event.session_id;
               break;
-
             case 'complete':
               finalizeStream(event.content || 'Done.');
-              if (event.iterations) {
-                setTimeout(refreshWorkspace, 500);
-              }
+              if (event.iterations) setTimeout(refreshWorkspace, 500);
               break;
-
             case 'error':
-              finalizeStream(`Error: ${event.error}`);
+              finalizeStream('Error: ' + event.error);
               break;
           }
-        } catch (e) { /* skip malformed lines */ }
+        } catch (e) { /* skip malformed */ }
       }
     }
   } catch (e) {
-    if (e.name !== 'AbortError') {
-      finalizeStream(`Connection error: ${e.message}`);
-    }
+    if (e.name !== 'AbortError') finalizeStream('Connection error: ' + e.message);
   }
 
   isStreaming = false;
@@ -590,39 +497,27 @@ async function sendMessage() {
   sendBtn.className = 'send-btn';
 }
 
-// ── Wire up event listeners ──────────────────────────────────────────
+// ── Event Listeners ──────────────────────────────────────────────────
 
 document.getElementById('sendBtn').addEventListener('click', sendMessage);
-
-document.getElementById('chatInput').addEventListener('keydown', (e) => {
-  if (e.key === 'Enter' && !e.shiftKey) {
-    e.preventDefault();
-    sendMessage();
-  }
+document.getElementById('chatInput').addEventListener('keydown', function(e) {
+  if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendMessage(); }
 });
-
 document.getElementById('chatInput').addEventListener('input', function() {
   this.style.height = 'auto';
   this.style.height = Math.min(this.scrollHeight, 200) + 'px';
 });
-
 document.getElementById('newChatBtn').addEventListener('click', resetSession);
-
-document.getElementById('toggleWsBtn').addEventListener('click', () => {
+document.getElementById('toggleWsBtn').addEventListener('click', function() {
   document.getElementById('workspacePanel').classList.toggle('collapsed');
 });
-
 document.getElementById('refreshWsBtn').addEventListener('click', refreshWorkspace);
-
-document.getElementById('examplesPanel').addEventListener('click', (e) => {
-  const btn = e.target.closest('.example-btn');
+document.getElementById('examplesPanel').addEventListener('click', function(e) {
+  var btn = e.target.closest('.example-btn');
   if (!btn) return;
   document.getElementById('chatInput').value = btn.dataset.example;
   sendMessage();
 });
-
-// ── Boot ─────────────────────────────────────────────────────────────
-init();
 </script>
 </body>
 </html>

sonicoder/server/__init__.py

@@ -3,24 +3,23 @@
 Blog: https://huggingface.co/blog/introducing-gradio-server
 
 Pattern:
-  - from gradio import Server  (NOT gradio.Server())
-  - @app.api(name="...") for backend endpoints  →  gets Gradio queuing + concurrency
-  - @app.post("/chat") raw FastAPI route for SSE streaming
-  - @app.get("/", response_class=HTMLResponse) serves index.html from project root
-  - Frontend uses @gradio/client JS for non-streaming, raw fetch for streaming
+  - 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
 """
 
 from __future__ import annotations
 
 import json
 import logging
-import os
 import uuid
 from pathlib import Path
 from typing import Any, Generator
 
 from fastapi import Request
-from fastapi.responses import HTMLResponse, StreamingResponse
+from fastapi.responses import HTMLResponse, StreamingResponse, JSONResponse
 
 from ..config import (
     Settings, get_available_models, load_settings,
@@ -75,243 +74,229 @@ def _get_or_create_session(session_id: str = "") -> tuple[str, AgentSession]:
     return session_id, _sessions[session_id]
 
 
-# ── API Handlers (pure functions, called by @app.api or raw routes) ────
+# ── JSON helpers ───────────────────────────────────────────────────────
 
-def api_chat(
-    message: str,
-    session_id: str = "",
-    image_url: str | None = None,
-) -> Generator[str, None, None]:
-    """Main chat endpoint — streams events as newline-delimited JSON."""
-    if not message or not message.strip():
-        yield json.dumps({"type": "error", "error": "Empty message"})
-        return
+def _json(data) -> JSONResponse:
+    return JSONResponse(content=data if isinstance(data, dict | list) else json.loads(data))
 
-    sid, session = _get_or_create_session(session_id)
 
-    try:
-        for event in session.run(message, session_id=sid, image_url=image_url):
-            yield json.dumps(event, ensure_ascii=False)
-    except Exception as e:
-        logger.error(f"Chat error: {e}", exc_info=True)
-        yield json.dumps({"type": "error", "error": str(e)})
+def _json_str(data) -> JSONResponse:
+    return JSONResponse(content=json.loads(data) if isinstance(data, str) else data)
 
 
-def api_model_status() -> str:
-    return json.dumps(get_model_status())
-
-
-def api_switch_model(model_key: str) -> str:
-    switch_model_fn(model_key)
-    return json.dumps({"status": "switching", "model": model_key})
-
-
-def api_list_models() -> str:
-    models = get_available_models()
-    current = get_model_status().get("model_key", "")
-    result = []
-    for key, config in models.items():
-        result.append({
-            "key": key,
-            "name": config.name,
-            "model_type": config.model_type,
-            "size_gb": config.size_gb,
-            "description": config.description,
-            "current": key == current,
-        })
-    return json.dumps(result, ensure_ascii=False)
-
-
-def api_workspace_tree(max_depth: int = 3) -> str:
-    tree = []
-
-    def walk(path: Path, prefix: str = "", depth: int = 0):
-        if depth >= max_depth:
-            return
-        try:
-            items = sorted(path.iterdir(), key=lambda p: (not p.is_dir(), p.name.lower()))
-        except PermissionError:
-            return
-        skip = {".git", "node_modules", "__pycache__", ".venv", "venv", "dist", "build", ".sonicoder"}
-        for i, item in enumerate(items):
-            if item.name.startswith(".") or item.name in skip:
-                continue
-            is_last = i == len(items) - 1
-            connector = "└── " if is_last else "├── "
-            if item.is_dir():
-                tree.append(f"{prefix}{connector}{item.name}/")
-                extension = "    " if is_last else "│   "
-                walk(item, prefix + extension, depth + 1)
-            else:
-                tree.append(f"{prefix}{connector}{item.name}")
-
-    if WORKSPACE_ROOT.exists():
-        walk(WORKSPACE_ROOT)
-
-    return json.dumps({
-        "tree": "\n".join(tree) if tree else "(empty workspace)",
-        "root": str(WORKSPACE_ROOT),
-    })
-
-
-def api_workspace_read(path: str, offset: int = 1, limit: int = 500) -> str:
-    from ..tools.fs import _resolve_safe
-    try:
-        resolved = _resolve_safe(path)
-        if not resolved.exists():
-            return json.dumps({"error": f"File not found: {path}"})
-        content = resolved.read_text(encoding="utf-8", errors="replace")
-        lines = content.splitlines()
-        total = len(lines)
-        start = max(0, offset - 1)
-        end = min(total, start + limit)
-        selected = lines[start:end]
-        numbered = [f"  {i + start + 1:>6}\t{line}" for i, line in enumerate(selected)]
-        return json.dumps({
-            "content": "\n".join(numbered),
-            "total_lines": total,
-            "truncated": end < total,
-        })
-    except Exception as e:
-        return json.dumps({"error": str(e)})
-
-
-def api_workspace_write(path: str, content: str) -> str:
-    from ..tools.fs import _resolve_safe
-    try:
-        resolved = _resolve_safe(path)
-        resolved.parent.mkdir(parents=True, exist_ok=True)
-        resolved.write_text(content, encoding="utf-8")
-        return json.dumps({"success": True, "path": path})
-    except Exception as e:
-        return json.dumps({"error": str(e)})
-
-
-def api_workspace_bash(command: str) -> str:
-    from ..tools.bash import BashBuilder
-    builder = BashBuilder()
-    errors = builder.validate({"command": command})
-    if errors:
-        return json.dumps({"error": "; ".join(errors)})
-    invocation = builder.create_invocation({"command": command})
-    result = invocation.execute()
-    return json.dumps(result.to_dict())
-
-
-def api_web_search(query: str) -> str:
-    from ..tools.web import WebSearchBuilder
-    builder = WebSearchBuilder()
-    invocation = builder.create_invocation({"query": query})
-    result = invocation.execute()
-    return json.dumps(result.to_dict(), ensure_ascii=False)
-
-
-def api_mcp_status() -> str:
-    return json.dumps(get_mcp_manager().get_status())
-
-
-def api_policy_status() -> str:
-    engine = get_policy_engine()
-    return json.dumps({"mode": engine.approval_mode, "rules": engine.get_rules()})
-
-
-def api_reset_session(session_id: str = "") -> str:
-    if session_id in _sessions:
-        _sessions[session_id].clear_history()
-    return json.dumps({"success": True})
-
-
-def api_get_config() -> str:
-    models = get_available_models()
-    model_list = []
-    for key, config in models.items():
-        model_list.append({
-            "key": key,
-            "name": config.name,
-            "model_type": config.model_type,
-            "size_gb": config.size_gb,
-            "description": config.description,
-        })
-    return json.dumps({
-        "models": model_list,
-        "default_model": _get_settings().default_model,
-        "workspace": str(WORKSPACE_ROOT),
-        "version": "2.0.0",
-    }, ensure_ascii=False)
-
-
-# ── Build App (gradio.Server) ─────────────────────────────────────────
+# ── Create App ────────────────────────────────────────────────────────
 
 def create_app():
     """Create and return a gradio.Server with custom HTML frontend.
 
-    Follows the blog pattern exactly:
-      https://huggingface.co/blog/introducing-gradio-server
-
-    - @app.api(name="...") for backend endpoints (gets Gradio queuing + concurrency)
-    - @app.post("/chat") raw FastAPI StreamingResponse for SSE streaming
-    - @app.get("/") serves index.html from project root
-    - Frontend uses @gradio/client for non-streaming, raw fetch for streaming
+    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.
     """
     from gradio import Server
 
     app = Server()
 
-    # ── Backend API endpoints via @app.api() (Gradio queuing) ─────────
-
-    @app.api(name="get_config")
-    def get_config():
-        return api_get_config()
-
-    @app.api(name="model_status")
-    def model_status():
-        return api_model_status()
-
-    @app.api(name="switch_model")
-    def switch_model_api(model_key: str):
-        return api_switch_model(model_key)
-
-    @app.api(name="list_models")
-    def list_models():
-        return api_list_models()
+    # ── Serve index.html from project root ─────────────────────────────
 
-    @app.api(name="workspace_tree")
-    def workspace_tree(max_depth: int = 3):
-        return api_workspace_tree(max_depth)
-
-    @app.api(name="workspace_read")
-    def workspace_read(path: str, offset: int = 1, limit: int = 500):
-        return api_workspace_read(path, offset, limit)
-
-    @app.api(name="workspace_write")
-    def workspace_write(path: str, content: str):
-        return api_workspace_write(path, content)
-
-    @app.api(name="workspace_bash")
-    def workspace_bash(command: str):
-        return api_workspace_bash(command)
+    @app.get("/", response_class=HTMLResponse)
+    async def homepage():
+        html_path = Path(__file__).parent.parent.parent / "index.html"
+        if not html_path.exists():
+            return HTMLResponse(
+                "<h1>SoniCoder v2</h1><p>index.html not found at project root</p>",
+                status_code=500,
+            )
+        with open(html_path, "r", encoding="utf-8") as f:
+            return f.read()
 
-    @app.api(name="web_search")
-    def web_search(query: str):
-        return api_web_search(query)
+    # ── Config ─────────────────────────────────────────────────────────
+
+    @app.get("/api/get_config")
+    async def get_config():
+        models = get_available_models()
+        model_list = []
+        for key, config in models.items():
+            model_list.append({
+                "key": key,
+                "name": config.name,
+                "model_type": config.model_type,
+                "size_gb": config.size_gb,
+                "description": config.description,
+            })
+        return JSONResponse(content={
+            "models": model_list,
+            "default_model": _get_settings().default_model,
+            "workspace": str(WORKSPACE_ROOT),
+            "version": "2.0.0",
+        })
 
-    @app.api(name="mcp_status")
-    def mcp_status():
-        return api_mcp_status()
+    # ── Model status ───────────────────────────────────────────────────
+
+    @app.get("/api/model_status")
+    async def model_status():
+        return _json(get_model_status())
+
+    # ── Switch model ───────────────────────────────────────────────────
+
+    @app.post("/api/switch_model")
+    async def switch_model(request: Request):
+        body = await request.json()
+        model_key = body.get("model_key", "")
+        switch_model_fn(model_key)
+        return JSONResponse(content={"status": "switching", "model": model_key})
+
+    # ── List models ────────────────────────────────────────────────────
+
+    @app.get("/api/list_models")
+    async def list_models():
+        models = get_available_models()
+        current = get_model_status().get("model_key", "")
+        result = []
+        for key, config in models.items():
+            result.append({
+                "key": key,
+                "name": config.name,
+                "model_type": config.model_type,
+                "size_gb": config.size_gb,
+                "description": config.description,
+                "current": key == current,
+            })
+        return JSONResponse(content=result)
+
+    # ── Workspace tree ─────────────────────────────────────────────────
+
+    @app.get("/api/workspace_tree")
+    async def workspace_tree(max_depth: int = 3):
+        tree = []
+
+        def walk(path: Path, prefix: str = "", depth: int = 0):
+            if depth >= max_depth:
+                return
+            try:
+                items = sorted(path.iterdir(), key=lambda p: (not p.is_dir(), p.name.lower()))
+            except PermissionError:
+                return
+            skip = {".git", "node_modules", "__pycache__", ".venv", "venv", "dist", "build", ".sonicoder"}
+            for i, item in enumerate(items):
+                if item.name.startswith(".") or item.name in skip:
+                    continue
+                is_last = i == len(items) - 1
+                connector = "\u2514\u2500\u2500 " if is_last else "\u251c\u2500\u2500 "
+                if item.is_dir():
+                    tree.append(f"{prefix}{connector}{item.name}/")
+                    extension = "    " if is_last else "\u2502   "
+                    walk(item, prefix + extension, depth + 1)
+                else:
+                    tree.append(f"{prefix}{connector}{item.name}")
+
+        if WORKSPACE_ROOT.exists():
+            walk(WORKSPACE_ROOT)
+
+        return JSONResponse(content={
+            "tree": "\n".join(tree) if tree else "(empty workspace)",
+            "root": str(WORKSPACE_ROOT),
+        })
 
-    @app.api(name="policy_status")
-    def policy_status():
-        return api_policy_status()
+    # ── Workspace read ─────────────────────────────────────────────────
 
-    @app.api(name="reset_session")
-    def reset_session(session_id: str = ""):
-        return api_reset_session(session_id)
+    @app.post("/api/workspace_read")
+    async def workspace_read(request: Request):
+        body = await request.json()
+        path = body.get("path", "")
+        offset = body.get("offset", 1)
+        limit = body.get("limit", 500)
+        from ..tools.fs import _resolve_safe
+        try:
+            resolved = _resolve_safe(path)
+            if not resolved.exists():
+                return JSONResponse(content={"error": f"File not found: {path}"})
+            content = resolved.read_text(encoding="utf-8", errors="replace")
+            lines = content.splitlines()
+            total = len(lines)
+            start = max(0, offset - 1)
+            end = min(total, start + limit)
+            selected = lines[start:end]
+            numbered = [f"  {i + start + 1:>6}\t{line}" for i, line in enumerate(selected)]
+            return JSONResponse(content={
+                "content": "\n".join(numbered),
+                "total_lines": total,
+                "truncated": end < total,
+            })
+        except Exception as e:
+            return JSONResponse(content={"error": str(e)})
+
+    # ── Workspace write ────────────────────────────────────────────────
+
+    @app.post("/api/workspace_write")
+    async def workspace_write(request: Request):
+        body = await request.json()
+        path = body.get("path", "")
+        content = body.get("content", "")
+        from ..tools.fs import _resolve_safe
+        try:
+            resolved = _resolve_safe(path)
+            resolved.parent.mkdir(parents=True, exist_ok=True)
+            resolved.write_text(content, encoding="utf-8")
+            return JSONResponse(content={"success": True, "path": path})
+        except Exception as e:
+            return JSONResponse(content={"error": str(e)})
+
+    # ── Workspace bash ─────────────────────────────────────────────────
+
+    @app.post("/api/workspace_bash")
+    async def workspace_bash(request: Request):
+        body = await request.json()
+        command = body.get("command", "")
+        from ..tools.bash import BashBuilder
+        builder = BashBuilder()
+        errors = builder.validate({"command": command})
+        if errors:
+            return JSONResponse(content={"error": "; ".join(errors)})
+        invocation = builder.create_invocation({"command": command})
+        result = invocation.execute()
+        return JSONResponse(content=result.to_dict())
+
+    # ── Web search ─────────────────────────────────────────────────────
+
+    @app.post("/api/web_search")
+    async def web_search(request: Request):
+        body = await request.json()
+        query = body.get("query", "")
+        from ..tools.web import WebSearchBuilder
+        builder = WebSearchBuilder()
+        invocation = builder.create_invocation({"query": query})
+        result = invocation.execute()
+        return JSONResponse(content=result.to_dict())
+
+    # ── MCP status ─────────────────────────────────────────────────────
+
+    @app.get("/api/mcp_status")
+    async def mcp_status():
+        return _json(get_mcp_manager().get_status())
+
+    # ── Policy status ──────────────────────────────────────────────────
+
+    @app.get("/api/policy_status")
+    async def policy_status():
+        engine = get_policy_engine()
+        return JSONResponse(content={"mode": engine.approval_mode, "rules": engine.get_rules()})
+
+    # ── Reset session ──────────────────────────────────────────────────
+
+    @app.post("/api/reset_session")
+    async def reset_session(request: Request):
+        body = await request.json()
+        session_id = body.get("session_id", "")
+        if session_id in _sessions:
+            _sessions[session_id].clear_history()
+        return JSONResponse(content={"success": True})
 
-    # ── Streaming chat: raw FastAPI route (SSE) ───────────────────────
+    # ── Streaming chat ─────────────────────────────────────────────────
 
     @app.post("/chat")
     async def chat_stream(request: Request):
-        """Streaming chat via raw FastAPI — returns newline-delimited JSON."""
+        """Streaming chat — returns newline-delimited JSON via StreamingResponse."""
         try:
             body = await request.json()
         except Exception:
@@ -348,18 +333,4 @@ def create_app():
             },
         )
 
-    # ── Serve custom HTML frontend from project root ──────────────────
-
-    @app.get("/", response_class=HTMLResponse)
-    async def homepage():
-        """Serve the custom SPA frontend — index.html at project root."""
-        html_path = Path(__file__).parent.parent.parent / "index.html"
-        if not html_path.exists():
-            return HTMLResponse(
-                "<h1>SoniCoder v2</h1><p>index.html not found at project root</p>",
-                status_code=500,
-            )
-        with open(html_path, "r", encoding="utf-8") as f:
-            return f.read()
-
     return app