sync: update from-scratch/web_ui/static/js/main_v2.js

from-scratch/web_ui/static/js/main_v2.js

@@ -10,9 +10,11 @@ let authToken = window.localStorage.getItem("neural_token");
 let currentUser = null;
 let currentConversationId = null;
 let isStreaming = false;
+let abortStream = false;
+let lastSeen = {};
 let conversation = [];
 let attachedFiles = {};
-let uplinkEnabled = true;
+let uplinkEnabled = false;
 let termSid = null;
 let termPoll = null;
 let authMode = "login";
@@ -283,6 +285,7 @@ async function createNewConversation() {
 
 async function loadConversation(id) {
   currentConversationId = id;
+  lastSeen[id] = new Date().toISOString();
   try {
     const res = await fetch(`/api/conversations/${id}`, {
       headers: { 'Authorization': `Bearer ${authToken}` }
@@ -333,16 +336,22 @@ async function renameConversation(id) {
 function renderConversationList(convs) {
   const list = document.getElementById('sidebarHistoryList');
   if (!list) return;
-  list.innerHTML = convs.map(c => `
+  list.innerHTML = convs.map(c => {
+    const isUnread = c.id !== currentConversationId && c.updated_at && lastSeen[c.id] && c.updated_at > lastSeen[c.id];
+    return `
     <div class="history-item ${currentConversationId === c.id ? 'active' : ''}" onclick="loadConversation('${c.id}')">
       <span class="history-item-text">${escHtml(c.title)}</span>
+      ${isUnread ? '<span class="unread-badge">NEW</span>' : ''}
       <div class="history-item-actions">
         <button class="history-item-rename" onclick="event.stopPropagation(); renameConversation('${c.id}')">✏️</button>
         <button class="history-item-delete" onclick="event.stopPropagation(); deleteConversation('${c.id}')">&times;</button>
       </div>
     </div>
-  `).join('') || '<p style="font-size:12px;color:#555;padding:10px;">No logs found.</p>';
-  
+  `}).join('') || '<p style="font-size:12px;color:#555;padding:10px;">No logs found.</p>';
+
+  // Track last-seen timestamps for unread detection
+  convs.forEach(c => { if (!lastSeen[c.id]) lastSeen[c.id] = c.updated_at; });
+
   // Update dropdown too
   const dropList = document.getElementById('historyDropdownList');
   if (dropList) {
@@ -365,6 +374,33 @@ async function sendMessage(textOverride = null) {
     console.warn("SendMessage: No text to send");
     return;
   }
+
+  // Intent detection: trigger image/code "upon request" instead of a composer button
+  const lower = text.toLowerCase();
+  // Image intent: a generation verb + a subject, OR any explicit image noun.
+  // Covers "generate a dog", "make a cat", "draw a sunset", "image of a car", etc.
+  const imageVerb = /(generat|creat|make|draw|render|paint|produce|show me|give me|design)/.test(lower);
+  const imageNoun = /\b(image|picture|photo|drawing|render|painting|pic|gif|meme)\b/.test(lower);
+  const imageIntent = (imageVerb && lower.length > 3) || imageNoun;
+  const codeIntent = /\b(run|execute|eval|compute|calculate|code|python|script|function|def |print\()/.test(lower) && /(run|execute|this|code|script|calculate|compute)/.test(lower);
+  if (imageIntent && !lower.includes('chat') && !lower.includes('explain')) {
+    if (!textOverride && input) input.value = '';
+    generateImageFromPrompt(text);
+    return;
+  }
+  if (codeIntent) {
+    const modal = document.getElementById('codeModal');
+    const editor = document.getElementById('codeEditor');
+    if (modal && editor) {
+      // Extract a fenced code block if present, else use the whole prompt
+      const fence = text.match(/```(?:python)?\s*([\s\S]*?)```/i);
+      editor.value = fence ? fence[1].trim() : text.replace(/run (this )?code:?/i, '').trim();
+      modal.classList.remove('hidden');
+      editor.focus();
+      if (!textOverride && input) input.value = '';
+      return;
+    }
+  }
   
   if (isStreaming) {
     console.warn("SendMessage: Already streaming");
@@ -403,12 +439,16 @@ async function sendMessage(textOverride = null) {
   const assistantMsg = addMsg('assistant', '');
   const bubble = assistantMsg.querySelector('.msg-bubble');
   bubble.innerHTML = '<div class="thinking-dots"><span></span><span></span><span></span></div>';
+  const typingLabel = assistantMsg.querySelector('.typing-label');
+  if (typingLabel) typingLabel.style.display = 'block';
+  abortStream = false;
+  showStopButton(true);
 
   try {
     const res = await fetch('/api/chat', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${authToken}` },
-      body: JSON.stringify({ prompt: text, conversation_id: currentConversationId, messages: conversation })
+      body: JSON.stringify({ prompt: text, conversation_id: currentConversationId, messages: conversation, use_uplink: uplinkEnabled })
     });
     
     if (!res.ok) {
@@ -419,9 +459,18 @@ async function sendMessage(textOverride = null) {
     const reader = res.body.getReader();
     const decoder = new TextDecoder();
     let full = '';
+    let firstToken = true;
     bubble.innerHTML = '';
 
     while (true) {
+      if (abortStream) {
+        await fetch('/api/chat/stop', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${authToken}` },
+          body: JSON.stringify({ conversation_id: currentConversationId })
+        }).catch(() => {});
+        break;
+      }
       const { done, value } = await reader.read();
       if (done) break;
       const chunk = decoder.decode(value);
@@ -433,8 +482,17 @@ async function sendMessage(textOverride = null) {
           try {
             const data = JSON.parse(raw);
             if (data.content) {
+              if (firstToken) {
+                firstToken = false;
+                if (typingLabel) typingLabel.style.display = 'none';
+              }
               full += data.content;
-              bubble.innerHTML = fmt(full);
+              // Render tool-cards when an uplink agent emits a 🔧 marker
+              if (data.content.includes('🔧') || full.includes('🔧 NeuralAI is processing tool')) {
+                bubble.innerHTML = renderToolCard(full);
+              } else {
+                bubble.innerHTML = fmt(full);
+              }
               const msgs = document.getElementById('messages');
               msgs.scrollTop = msgs.scrollHeight;
             }
@@ -466,6 +524,8 @@ async function sendMessage(textOverride = null) {
     bubble.innerHTML = `<span style="color:#ff6b6b">Generation failed: ${e.message}</span>`;
   } finally {
     isStreaming = false;
+    abortStream = false;
+    showStopButton(false);
     const sendBtn = document.getElementById('sendBtn');
     if (sendBtn) {
       sendBtn.disabled = false;
@@ -474,6 +534,78 @@ async function sendMessage(textOverride = null) {
   }
 }
 
+function showStopButton(show) {
+  const stopBtn = document.getElementById('stopBtn');
+  if (stopBtn) stopBtn.style.display = show ? 'inline-flex' : 'none';
+}
+
+async function generateImageFromPrompt(prompt) {
+  if (isStreaming) return;
+  showToast('Generating image…', 'info');
+  try {
+    const res = await fetch('/api/image', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${authToken}` },
+      body: JSON.stringify({ prompt })
+    });
+    const data = await res.json();
+    if (data.success && data.image_url) {
+      const badge = data.placeholder
+        ? `\n\n> ⚠️ *Concept placeholder — AI image generation is unavailable on this host, so this is **not** a real AI image.*`
+        : `\n\n> 🤖 *AI-generated image${data.provider ? ' (' + data.provider + ')' : ''}*`;
+      addMsg('assistant', `🖼️ **${escHtml(prompt)}**\n\n![generated](${data.image_url})${badge}`);
+      showToast(data.placeholder ? 'Placeholder shown (no AI image)' : 'Image ready', data.placeholder ? 'info' : 'success');
+    } else {
+      showToast('Image generation failed: ' + (data.error || 'unknown'), 'error');
+    }
+  } catch (e) {
+    showToast('Image generation failed: ' + e.message, 'error');
+  }
+}
+
+async function runCodeSnippet(code) {
+  if (isStreaming) return;
+  showToast('Running code…', 'info');
+  try {
+    const res = await fetch('/api/execute/code', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${authToken}` },
+      body: JSON.stringify({ code, language: 'python' })
+    });
+    const data = await res.json();
+    const out = data.success ? data.output : (data.error || 'No output');
+    addMsg('assistant', '```python\n' + out + '\n```');
+  } catch (e) {
+    showToast('Code execution failed: ' + e.message, 'error');
+  }
+}
+
+function renderToolCard(text) {
+  // Extract the 🔧 processing line and render a styled tool-card
+  const lines = text.split('\n');
+  const toolLine = lines.find(l => l.includes('🔧'));
+  if (toolLine) {
+    const label = toolLine.replace('🔧', '').replace('NeuralAI is processing tool:', '').trim();
+    return `<div class="tool-card"><span class="tool-icon">🔧</span><span class="tool-text">Processing tool: ${escHtml(label)}</span></div>` + fmt(lines.filter(l => l !== toolLine).join('\n'));
+  }
+  return fmt(text);
+}
+
+function updateModelStatus() {
+  fetch('/api/health').then(r => r.json()).then(d => {
+    const dot = document.getElementById('uplinkDot');
+    const label = document.getElementById('uplinkLabel');
+    const isLocal = d.llm_backend && d.llm_backend !== 'zo';
+    if (dot) dot.className = 'status-dot ' + (d.status === 'ready' ? 'online' : 'offline');
+    if (label) label.textContent = d.status === 'ready' ? (isLocal ? 'Ready (Local)' : 'Ready (External)') : (d.status || 'Offline');
+  }).catch(() => {
+    const dot = document.getElementById('uplinkDot');
+    const label = document.getElementById('uplinkLabel');
+    if (dot) dot.className = 'status-dot offline';
+    if (label) label.textContent = 'Offline';
+  });
+}
+
 function addMsg(role, content) {
   const container = document.getElementById('messages');
   if (!container) return document.createElement('div');
@@ -482,6 +614,7 @@ function addMsg(role, content) {
   const time = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
   div.innerHTML = `
     <div class="msg-meta"><span>${role === 'assistant' ? 'NeuralAI' : 'You'}</span><span class="msg-timestamp">${time}</span></div>
+    ${role === 'assistant' ? '<div class="typing-label" style="display:none;font-size:12px;color:#8a8a9a;margin-bottom:4px;">NeuralAI is typing…</div>' : ''}
     <div class="msg-bubble">${content ? fmt(content) : ''}</div>
   `;
   container.appendChild(div);
@@ -525,19 +658,12 @@ async function initLiveSession() {
       const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
       const host = window.location.hostname;
       
-      // Robust Voice Host Detection
-      let voiceHost = host.replace('neuralai-', 'neural-voice-');
-      if (host === 'localhost' || host === '127.0.0.1') {
-        voiceHost = `${host}:5001`;
-      } else if (!host.includes('neural-voice-')) {
-        const parts = host.split('.');
-        if (parts.length >= 3) {
-          const handle = parts[0].replace('neuralai-', '');
-          voiceHost = `neural-voice-${handle}.zocomputer.io`;
-        }
-      }
-
-      console.log(`[Voice] Connecting to: ${voiceHost}`);
+      // Voice WebSocket connects through the main service proxy at /voice/ws
+      // This works universally: localhost, ZO Computer, Cloudflare, etc.
+      const voiceOrigin = window.location.origin.replace('https:', 'wss:').replace('http:', 'ws:');
+      const voiceUrl = `${voiceOrigin}/voice/ws`;
+      
+      console.log(`[Voice] Connecting to: ${voiceUrl}`);
       showToast('Connecting to NeuralVoice Engine...', 'info');
       
       if (voiceWS) {
@@ -546,7 +672,7 @@ async function initLiveSession() {
       }
       
       try {
-        voiceWS = new WebSocket(`${protocol}//${voiceHost}/ws`);
+        voiceWS = new WebSocket(voiceUrl);
       } catch (wsErr) {
         console.error("[Voice] WebSocket constructor failed:", wsErr);
         throw new Error("Failed to create connection: " + wsErr.message);
@@ -983,7 +1109,8 @@ async function loadFiles() {
     const res = await fetch("/api/files", { headers: { "Authorization": `Bearer ${authToken}` } });
     if (!res.ok) throw new Error(`HTTP ${res.status}`);
     const data = await res.json();
-    window.neuralFiles = data.files || [];
+    // Backend returns either a raw array or {files: [...]} — handle both
+    window.neuralFiles = Array.isArray(data) ? data : (data.files || []);
     renderFiles(window.neuralFiles);
   } catch (err) { 
     console.error("NeuralDrive access error:", err);
@@ -995,20 +1122,28 @@ function renderFiles(files) {
   const container = document.getElementById("filesGrid");
   if (!container) return;
   if (!files || files.length === 0) {
-    container.innerHTML = '<div class="empty-state">NeuralDrive is empty.</div>';
+    container.innerHTML = '<div class="empty-state">NeuralDrive is empty. Drag a file here or use Upload.</div>';
     return;
   }
-  container.innerHTML = files.map(f => `
-    <div class="file-card" onclick="previewFile('${f.type}', '${f.name}')">
+  container.innerHTML = files.map(f => {
+    const isImage = f.type === 'image';
+    const icon = isImage ? '🖼️' : (f.type === 'dir' ? '📁' : '📄');
+    const thumb = isImage ? `<img class="file-thumb" src="/api/files/${encodeURIComponent(f.name)}" loading="lazy" alt="${escHtml(f.name)}">` : `<div class="file-icon">${icon}</div>`;
+    const sizeStr = f.is_dir ? 'folder' : (f.size > 1048576 ? (f.size/1048576).toFixed(1)+' MB' : f.size > 1024 ? (f.size/1024).toFixed(1)+' KB' : f.size+' B');
+    return `
+    <div class="file-card" onclick="previewFile('${encodeURIComponent(f.name)}')">
+      <div class="file-preview">${thumb}</div>
       <div class="file-info">
-        <div class="file-icon">${f.name.endsWith('.png') || f.name.endsWith('.jpg') ? '🖼️' : '📄'}</div>
-        <div class="file-name">${f.name}</div>
+        <div class="file-name" title="${escHtml(f.name)}">${escHtml(f.name)}</div>
+        <div class="file-meta">${sizeStr}</div>
       </div>
       <div class="file-actions">
-        <button class="file-action-btn" onclick="event.stopPropagation(); window.open('/api/files/${f.type}/${f.name}', '_blank')">⬇️</button>
+        <button class="file-action-btn" title="Download" onclick="event.stopPropagation(); window.open('/api/files/${encodeURIComponent(f.name)}', '_blank')">⬇️</button>
+        <button class="file-action-btn" title="Delete" onclick="event.stopPropagation(); deleteFile('${encodeURIComponent(f.name)}')">🗑️</button>
       </div>
     </div>
-  `).join('');
+  `;
+  }).join('');
 }
 
 function filterFiles() {
@@ -1017,13 +1152,47 @@ function filterFiles() {
   renderFiles(filtered);
 }
 
-function previewFile(folder, filename) {
-  const url = `/api/files/${folder}/${filename}`;
+function previewFile(filename) {
+  const url = `/api/files/${filename}`;
   window.open(url, '_blank');
 }
 
+async function deleteFile(filename) {
+  if (!confirm(`Delete ${decodeURIComponent(filename)}?`)) return;
+  try {
+    const res = await fetch(`/api/files/${filename}`, { method: 'DELETE', headers: { 'Authorization': `Bearer ${authToken}` } });
+    const data = await res.json().catch(() => ({}));
+    if (data.success) {
+      showToast('Deleted', 'success');
+      loadFiles();
+    } else {
+      showToast('Delete failed: ' + (data.error || 'unknown'), 'error');
+    }
+  } catch (e) {
+    showToast('Delete failed: ' + e.message, 'error');
+  }
+}
+
 // Upload Logic
 function initUploadListeners() {
+  const newFolderBtn = document.getElementById("newFolderBtn");
+  if (newFolderBtn) {
+    newFolderBtn.addEventListener("click", async () => {
+      const name = prompt("New folder name:");
+      if (!name || !name.trim()) return;
+      try {
+        const res = await fetch("/api/files/mkdir", {
+          method: "POST",
+          headers: { "Content-Type": "application/json", "Authorization": `Bearer ${authToken}` },
+          body: JSON.stringify({ name: name.trim() })
+        });
+        const data = await res.json().catch(() => ({}));
+        if (data.success) { showToast("Folder created", "success"); loadFiles(); }
+        else showToast("Failed: " + (data.error || "unknown"), "error");
+      } catch (e) { showToast("Failed: " + e.message, "error"); }
+    });
+  }
+
   const uploadBtn = document.getElementById("uploadBtn");
   const fileInput = document.getElementById("fileInputHidden");
   const dropZone = document.getElementById("dropZone");
@@ -1104,6 +1273,10 @@ async function loadUserProfile() {
       if (document.getElementById('userBioInput')) document.getElementById('userBioInput').value = data.user.bio || '';
       const initial = document.getElementById('profileInitial');
       if (initial) initial.textContent = (data.user.username || 'U')[0].toUpperCase();
+      // Reveal founder-only self-update control
+      if (data.user.is_founder && document.getElementById('selfUpdateArea')) {
+        document.getElementById('selfUpdateArea').style.display = 'block';
+      }
     }
     loadBio();
     loadMemoryList();
@@ -1208,6 +1381,72 @@ async function loadBio() {
   } catch {}
 }
 
+// ========================================
+// DEVELOPER / API ACCESS (BYO API)
+// ========================================
+async function generateApiKey() {
+  try {
+    showToast('Generating API key...', 'info');
+    const res = await fetch('/api/settings/api-key', {
+      method: 'POST',
+      headers: { 'Authorization': `Bearer ${authToken}` }
+    });
+    const data = await res.json();
+    if (!data.success || !data.api_key) throw new Error(data.error || 'Failed to generate key');
+    document.getElementById('apiKeyField').value = data.api_key;
+    document.getElementById('apiKeyResult').classList.remove('hidden');
+    document.getElementById('revokeApiKeyBtn').style.display = 'inline-block';
+    showToast('API key generated — copy it now (shown once)', 'success');
+  } catch (e) {
+    showToast(`Key generation failed: ${e.message}`, 'error');
+  }
+}
+
+async function revokeApiKey() {
+  try {
+    const res = await fetch('/api/settings/api-key', {
+      method: 'DELETE',
+      headers: { 'Authorization': `Bearer ${authToken}` }
+    });
+    const data = await res.json();
+    if (!data.success) throw new Error(data.error || 'Revoke failed');
+    document.getElementById('apiKeyResult').classList.add('hidden');
+    document.getElementById('revokeApiKeyBtn').style.display = 'none';
+    showToast('API key revoked', 'success');
+  } catch (e) {
+    showToast(`Revoke failed: ${e.message}`, 'error');
+  }
+}
+
+function copyApiKey() {
+  const f = document.getElementById('apiKeyField');
+  if (f) { f.select(); navigator.clipboard.writeText(f.value); showToast('API key copied', 'success'); }
+}
+
+function copyApiEndpoint() {
+  const f = document.getElementById('apiEndpointField');
+  if (f) { f.select(); navigator.clipboard.writeText(f.value); showToast('Endpoint copied', 'success'); }
+}
+
+async function selfUpdate() {
+  if (!confirm('Pull latest code from GitHub and restart the service?')) return;
+  try {
+    showToast('Updating & restarting…', 'info');
+    const res = await fetch('/api/admin/update', {
+      method: 'POST',
+      headers: { 'Authorization': `Bearer ${authToken}` }
+    });
+    if (res.status === 403) { showToast('Founder access required', 'error'); return; }
+    // On success the process re-execs; the connection drops. Reload after a beat.
+    showToast('Update triggered — reloading…', 'success');
+    setTimeout(() => location.reload(), 2500);
+  } catch {
+    // Expected: the old process is gone after re-exec, so the fetch may abort.
+    showToast('Update triggered — reloading…', 'success');
+    setTimeout(() => location.reload(), 2500);
+  }
+}
+
 async function addMemoryFromTab() {
   const input = document.getElementById('memoryInput');
   const fact = input?.value.trim();
@@ -1368,6 +1607,32 @@ function showToast(msg, type = 'info') {
   setTimeout(() => t.remove(), 4000);
 }
 
+async function openReleaseNotes() {
+  const modal = document.getElementById('releaseNotesModal');
+  const body = document.getElementById('releaseNotesBody');
+  const title = document.getElementById('releaseNotesTitle');
+  if (!modal || !body) return;
+  body.innerHTML = '<div class="rn-meta">Loading…</div>';
+  modal.classList.remove('hidden');
+  try {
+    const res = await fetch('/api/release-notes', { headers: { 'Authorization': `Bearer ${authToken}` } });
+    if (!res.ok) throw new Error('HTTP ' + res.status);
+    const data = await res.json();
+    title.textContent = data.title || '✨ What\'s New';
+    let html = '';
+    if (data.released) html += `<div class="rn-meta">Released ${escHtml(data.released)} · ${escHtml(data.version || '')}</div>`;
+    (data.notes || []).forEach(n => {
+      const tag = escHtml(n.tag || 'New');
+      const t = escHtml(n.title || '');
+      const b = escHtml(n.body || '');
+      html += `<div class="rn-item"><div class="rn-item-head"><span class="rn-tag ${tag}">${tag}</span><span class="rn-item-title">${t}</span></div><div class="rn-item-body">${b}</div></div>`;
+    });
+    body.innerHTML = html || '<div class="rn-meta">No release notes available.</div>';
+  } catch (e) {
+    body.innerHTML = '<div class="rn-meta">Failed to load release notes.</div>';
+  }
+}
+
 function escHtml(text) {
   if (!text) return '';
   const p = document.createElement('p');
@@ -1376,10 +1641,33 @@ function escHtml(text) {
 }
 
 function fmt(text) {
-  let out = escHtml(text);
+  if (!text) return '';
+  // First, extract and render markdown images ![alt](url) as real <img> tags.
+  // We build the HTML in a safe way: escape everything, then swap image tokens.
+  const imagePlaceholders = [];
+  let escaped = escHtml(text);
+  // Find markdown image syntax in the ORIGINAL text (before escaping) to get raw URLs
+  const imgRegex = /!\[([^\]]*)\]\(([^)\s]+)(?:\s+"[^"]*")?\)/g;
+  let m;
+  while ((m = imgRegex.exec(text)) !== null) {
+    const alt = m[1] || 'image';
+    const url = m[2];
+    // Only allow http(s) and same-origin relative paths (no javascript: etc.)
+    if (/^(https?:\/\/|\/)/i.test(url)) {
+      const token = `\u0000IMG${imagePlaceholders.length}\u0000`;
+      imagePlaceholders.push(`<img class="gen-image" src="${escHtml(url)}" alt="${escHtml(alt)}" style="max-width:100%;border-radius:12px;margin:8px 0;">`);
+      // Replace the markdown in the escaped string with the token
+      const escapedMd = escHtml(m[0]);
+      escaped = escaped.split(escapedMd).join(token);
+    }
+  }
+  // Convert remaining markdown
+  let out = escaped;
   out = out.replace(/\n/g, '<br>');
   out = out.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
   out = out.replace(/`([^`]+)`/g, '<code>$1</code>');
+  // Restore image placeholders
+  out = out.replace(/\u0000IMG(\d+)\u0000/g, (_, i) => imagePlaceholders[Number(i)] || '');
   return out;
 }
 
@@ -1396,6 +1684,15 @@ function closeOnboarding() {
 // ========================================
 document.addEventListener('DOMContentLoaded', () => {
   console.log("NeuralAI Core UI Initializing...");
+  // Restore saved theme (default to dark to match the app's design language)
+  try {
+    const saved = window.localStorage.getItem('neural_theme');
+    if (saved === 'light') {
+      document.body.classList.remove('dark-mode');
+    } else {
+      document.body.classList.add('dark-mode');
+    }
+  } catch (e) { document.body.classList.add('dark-mode'); }
   initAuth();
   initUploadListeners();
   
@@ -1403,7 +1700,19 @@ document.addEventListener('DOMContentLoaded', () => {
   document.getElementById('maestroSubmit')?.addEventListener('click', handleMaestroAuth);
   document.getElementById('guestSubmit')?.addEventListener('click', handleGuestAuth);
   
-  // Wire chat send button and enter key
+  // Wire top search bar (Google-style) — Ask button + Enter key
+  document.getElementById('searchBtn')?.addEventListener('click', () => {
+    console.log("Search Ask button clicked");
+    handleSearch();
+  });
+  document.getElementById('queryInput')?.addEventListener('keydown', e => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      handleSearch();
+    }
+  });
+
+  // Wire bottom chat send button and enter key
   document.getElementById('sendBtn')?.addEventListener('click', () => {
     console.log("Send button clicked");
     sendMessage();
@@ -1485,6 +1794,60 @@ document.addEventListener('DOMContentLoaded', () => {
       sendMessage(card.dataset.prompt);
     });
   });
+
+  // Stop button (appears during streaming)
+  document.getElementById('stopBtn')?.addEventListener('click', () => {
+    abortStream = true;
+  });
+
+  // Code editor modal wiring (triggered on request, not a composer button)
+  document.getElementById('closeCodeModal')?.addEventListener('click', () => {
+    document.getElementById('codeModal')?.classList.add('hidden');
+  });
+
+  // Release Notes modal wiring
+  document.getElementById('closeReleaseNotes')?.addEventListener('click', () => {
+    document.getElementById('releaseNotesModal')?.classList.add('hidden');
+  });
+  document.getElementById('releaseNotesModal')?.addEventListener('click', (e) => {
+    if (e.target.id === 'releaseNotesModal') e.target.classList.add('hidden');
+  });
+  document.getElementById('runCodeBtn')?.addEventListener('click', async () => {
+    const editor = document.getElementById('codeEditor');
+    const out = document.getElementById('codeOutput');
+    if (!editor || !out) return;
+    const code = editor.value;
+    out.textContent = 'Running…';
+    try {
+      const res = await fetch('/api/execute/code', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${authToken}` },
+        body: JSON.stringify({ code, language: 'python' })
+      });
+      const data = await res.json();
+      out.textContent = data.success ? data.output : (data.error || 'No output');
+      // Also drop the result into the chat
+      addMsg('assistant', '```python\n' + (data.success ? data.output : (data.error || 'No output')) + '\n```');
+    } catch (e) {
+      out.textContent = 'Error: ' + e.message;
+    }
+  });
+
+  // Uplink toggle
+  const uplinkToggle = document.getElementById('uplinkToggle');
+  if (uplinkToggle) {
+    uplinkToggle.checked = uplinkEnabled;
+    uplinkToggle.addEventListener('change', e => {
+      uplinkEnabled = e.target.checked;
+      window.localStorage.setItem('neural_uplink', uplinkEnabled ? '1' : '0');
+    });
+  }
+  const savedUplink = window.localStorage.getItem('neural_uplink');
+  if (savedUplink !== null) uplinkEnabled = savedUplink === '1';
+
+  // Model status polling
+  updateModelStatus();
+  setInterval(updateModelStatus, 30000);
 });
 
 // Global Exports