voyageai-cli 1.20.6 → 1.22.0

package/src/playground/index.html

@@ -660,6 +660,48 @@ select:focus { outline: none; border-color: var(--accent); }
   font-size: 12px;
 }
 
+/* Subtabs - segmented control style */
+.subtabs {
+  display: flex;
+  background: var(--card);
+  border-radius: var(--radius);
+  padding: 4px;
+  gap: 4px;
+  margin-bottom: 20px;
+  border: 1px solid var(--accent-dim);
+}
+.subtab {
+  flex: 1;
+  background: transparent;
+  color: var(--text-secondary);
+  border: none;
+  padding: 10px 20px;
+  border-radius: calc(var(--radius) - 2px);
+  font-size: 14px;
+  font-weight: 500;
+  font-family: var(--font);
+  cursor: pointer;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+.subtab:hover {
+  color: var(--text);
+  background: rgba(0, 237, 100, 0.05);
+}
+.subtab.active {
+  background: var(--accent);
+  color: var(--green-dark);
+  font-weight: 600;
+}
+.subtab svg {
+  width: 16px;
+  height: 16px;
+}
+[data-theme="light"] .subtab.active { color: #FFFFFF; }
+
 .options-row {
   display: flex;
   gap: 12px;
@@ -2297,6 +2339,9 @@ select:focus { outline: none; border-color: var(--accent); }
   <symbol id="lg-config" viewBox="0 0 16 16">
     <path fill-rule="evenodd" clip-rule="evenodd" d="M6.5 1.5A.5.5 0 0 1 7 1h2a.5.5 0 0 1 .5.5v1.05a5 5 0 0 1 1.37.57l.74-.74a.5.5 0 0 1 .7 0l1.42 1.42a.5.5 0 0 1 0 .7l-.74.74c.25.43.44.89.57 1.37H14.5a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5h-1.05a5 5 0 0 1-.57 1.37l.74.74a.5.5 0 0 1 0 .7l-1.42 1.42a.5.5 0 0 1-.7 0l-.74-.74a5 5 0 0 1-1.37.57V14.5a.5.5 0 0 1-.5.5H7a.5.5 0 0 1-.5-.5v-1.05a5 5 0 0 1-1.37-.57l-.74.74a.5.5 0 0 1-.7 0L2.27 12.2a.5.5 0 0 1 0-.7l.74-.74a5 5 0 0 1-.57-1.37H1.5A.5.5 0 0 1 1 9V7a.5.5 0 0 1 .5-.5h1.05c.13-.48.32-.94.57-1.37l-.74-.74a.5.5 0 0 1 0-.7L3.8 2.27a.5.5 0 0 1 .7 0l.74.74A5 5 0 0 1 6.6 2.44V1.5zM8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5z" fill="currentColor"/>
   </symbol>
+  <symbol id="lg-code" viewBox="0 0 16 16">
+    <path fill="currentColor" d="M5.854 4.146a.5.5 0 0 1 0 .708L2.707 8l3.147 3.146a.5.5 0 0 1-.708.708l-3.5-3.5a.5.5 0 0 1 0-.708l3.5-3.5a.5.5 0 0 1 .708 0zm4.292 0a.5.5 0 0 0 0 .708L13.293 8l-3.147 3.146a.5.5 0 0 0 .708.708l3.5-3.5a.5.5 0 0 0 0-.708l-3.5-3.5a.5.5 0 0 0-.708 0z"/>
+  </symbol>
 </svg>
 
 <div class="app-shell">
@@ -2315,10 +2360,11 @@ select:focus { outline: none; border-color: var(--accent); }
       <button class="tab-btn" data-tab="compare" role="tab" aria-selected="false" aria-controls="tab-compare" id="tab-btn-compare"><span class="tab-btn-icon" aria-hidden="true"><svg><use href="#lg-arrows"/></svg></span><span>Compare</span></button>
       <button class="tab-btn" data-tab="search" role="tab" aria-selected="false" aria-controls="tab-search" id="tab-btn-search"><span class="tab-btn-icon" aria-hidden="true"><svg><use href="#lg-search"/></svg></span><span>Search</span></button>
       <button class="tab-btn" data-tab="multimodal" role="tab" aria-selected="false" aria-controls="tab-multimodal" id="tab-btn-multimodal"><span class="tab-btn-icon" aria-hidden="true"><svg><use href="#lg-image"/></svg></span><span>Multimodal</span></button>
+      <button class="tab-btn" data-tab="generate" role="tab" aria-selected="false" aria-controls="tab-generate" id="tab-btn-generate"><span class="tab-btn-icon" aria-hidden="true"><svg><use href="#lg-code"/></svg></span><span>Generate</span></button>
     </div>
     <div class="sidebar-nav-divider"></div>
-    <div class="sidebar-nav-group" role="tablist" aria-label="Resources">
-      <div class="sidebar-nav-label" id="nav-resources-label">Resources</div>
+    <div class="sidebar-nav-group" role="tablist" aria-label="Learn">
+      <div class="sidebar-nav-label" id="nav-learn-label">Learn</div>
       <button class="tab-btn" data-tab="benchmark" role="tab" aria-selected="false" aria-controls="tab-benchmark" id="tab-btn-benchmark"><span class="tab-btn-icon" aria-hidden="true"><svg><use href="#lg-gauge"/></svg></span><span>Benchmark</span></button>
       <button class="tab-btn" data-tab="explore" role="tab" aria-selected="false" aria-controls="tab-explore" id="tab-btn-explore"><span class="tab-btn-icon" aria-hidden="true"><svg><use href="#lg-bulb"/></svg></span><span>Explore</span></button>
       <button class="tab-btn" data-tab="about" role="tab" aria-selected="false" aria-controls="tab-about" id="tab-btn-about"><span class="tab-btn-icon" aria-hidden="true"><svg><use href="#lg-info"/></svg></span><span>About</span></button>
@@ -3214,6 +3260,179 @@ Reranking models rescore initial search results to improve relevance ordering.</
   </div>
 </div>
 
+<!-- ========== GENERATE TAB ========== -->
+<div class="tab-panel" id="tab-generate" role="tabpanel" aria-labelledby="tab-btn-generate" tabindex="0">
+  <div class="page-header">
+    <h2 class="page-header-title">Generate</h2>
+    <p class="page-header-subtitle">Generate code and scaffold projects</p>
+  </div>
+
+  <!-- Mode Toggle -->
+  <div class="subtabs" role="tablist">
+    <button class="subtab active" id="genModeCode" onclick="setGenerateMode('code')" role="tab" aria-selected="true">
+      <svg viewBox="0 0 16 16"><path fill="currentColor" d="M5.854 4.854a.5.5 0 1 0-.708-.708l-3.5 3.5a.5.5 0 0 0 0 .708l3.5 3.5a.5.5 0 0 0 .708-.708L2.707 8l3.147-3.146zm4.292 0a.5.5 0 0 1 .708-.708l3.5 3.5a.5.5 0 0 1 0 .708l-3.5 3.5a.5.5 0 0 1-.708-.708L13.293 8l-3.147-3.146z"/></svg>
+      Generate Code
+    </button>
+    <button class="subtab" id="genModeScaffold" onclick="setGenerateMode('scaffold')" role="tab" aria-selected="false">
+      <svg viewBox="0 0 16 16"><path fill="currentColor" d="M14.5 3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h13zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13z"/><path fill="currentColor" d="M5 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 5 8zm0-2.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0 5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-1-5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zM4 8a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zm0 2.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0z"/></svg>
+      Scaffold Project
+    </button>
+  </div>
+
+  <!-- Generate Code Panel -->
+  <div id="generateCodePanel" style="display:block;">
+    <div class="card">
+      <div class="card-header"><h3>Generate Code Snippet</h3></div>
+      <div class="card-body">
+        <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px;">
+          <label>
+            <span style="display:block;margin-bottom:4px;font-weight:500;">Target Framework</span>
+            <select id="genTarget" onchange="updateGenComponents()" style="width:100%;">
+              <option value="vanilla">Node.js + Express</option>
+              <option value="nextjs">Next.js + MUI</option>
+              <option value="python">Python + Flask</option>
+            </select>
+          </label>
+          <label>
+            <span style="display:block;margin-bottom:4px;font-weight:500;">Component</span>
+            <select id="genComponent" style="width:100%;">
+              <option value="client">API Client</option>
+              <option value="connection">MongoDB Connection</option>
+              <option value="retrieval">RAG Retrieval</option>
+              <option value="ingest">Document Ingest</option>
+              <option value="search-api">Search API</option>
+            </select>
+          </label>
+        </div>
+        
+        <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:16px;">
+          <label>
+            <span style="display:block;margin-bottom:4px;font-weight:500;">Model</span>
+            <select id="genModel" style="width:100%;">
+              <option value="voyage-4-large">voyage-4-large</option>
+              <option value="voyage-4">voyage-4</option>
+              <option value="voyage-4-lite">voyage-4-lite</option>
+              <option value="voyage-3-large">voyage-3-large</option>
+            </select>
+          </label>
+          <label>
+            <span style="display:block;margin-bottom:4px;font-weight:500;">Database</span>
+            <input type="text" id="genDb" value="myapp" style="width:100%;">
+          </label>
+          <label>
+            <span style="display:block;margin-bottom:4px;font-weight:500;">Collection</span>
+            <input type="text" id="genCollection" value="documents" style="width:100%;">
+          </label>
+        </div>
+
+        <label style="display:flex;align-items:center;gap:8px;margin-bottom:16px;">
+          <input type="checkbox" id="genRerank" checked>
+          <span>Include reranking</span>
+        </label>
+
+        <button class="btn btn-primary" onclick="generateCode()" id="genCodeBtn">
+          Generate Code
+        </button>
+      </div>
+    </div>
+
+    <!-- Generated Code Output -->
+    <div class="card" id="genOutputCard" style="margin-top:16px;display:none;">
+      <div class="card-header" style="display:flex;justify-content:space-between;align-items:center;">
+        <h3 id="genOutputFilename">Generated Code</h3>
+        <button class="btn btn-outline" onclick="copyGeneratedCode()" style="padding:4px 12px;">Copy</button>
+      </div>
+      <div class="card-body" style="padding:0;">
+        <pre id="genOutputCode" style="margin:0;padding:16px;overflow:auto;max-height:500px;background:var(--surface-darker);border-radius:0 0 8px 8px;font-size:13px;"></pre>
+      </div>
+    </div>
+  </div>
+
+  <!-- Scaffold Project Panel -->
+  <div id="scaffoldPanel" style="display:none;">
+    <div class="card">
+      <div class="card-header"><h3>Scaffold New Project</h3></div>
+      <div class="card-body">
+        <p style="margin-bottom:16px;color:var(--text-dim);">Create a complete, ready-to-run project with all files pre-configured.</p>
+        
+        <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px;">
+          <label>
+            <span style="display:block;margin-bottom:4px;font-weight:500;">Project Name</span>
+            <input type="text" id="scaffoldName" value="my-rag-app" placeholder="my-rag-app" style="width:100%;">
+          </label>
+          <label>
+            <span style="display:block;margin-bottom:4px;font-weight:500;">Target Framework</span>
+            <select id="scaffoldTarget" onchange="updateScaffoldPreview()" style="width:100%;">
+              <option value="vanilla">Node.js + Express (9 files)</option>
+              <option value="nextjs">Next.js + MUI (13 files)</option>
+              <option value="python">Python + Flask (8 files)</option>
+            </select>
+          </label>
+        </div>
+
+        <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:16px;">
+          <label>
+            <span style="display:block;margin-bottom:4px;font-weight:500;">Model</span>
+            <select id="scaffoldModel" style="width:100%;">
+              <option value="voyage-4-large">voyage-4-large</option>
+              <option value="voyage-4">voyage-4</option>
+              <option value="voyage-4-lite">voyage-4-lite</option>
+            </select>
+          </label>
+          <label>
+            <span style="display:block;margin-bottom:4px;font-weight:500;">Database</span>
+            <input type="text" id="scaffoldDb" value="myapp" style="width:100%;">
+          </label>
+          <label>
+            <span style="display:block;margin-bottom:4px;font-weight:500;">Collection</span>
+            <input type="text" id="scaffoldCollection" value="documents" style="width:100%;">
+          </label>
+        </div>
+
+        <!-- Location Picker (Electron only) -->
+        <div id="scaffoldLocationSection" style="margin-bottom:16px;display:none;">
+          <span style="display:block;margin-bottom:4px;font-weight:500;">Location</span>
+          <div style="display:flex;gap:8px;">
+            <input type="text" id="scaffoldPath" readonly placeholder="Choose a folder..." style="flex:1;background:var(--surface-darker);">
+            <button class="btn btn-outline" onclick="pickScaffoldDirectory()">Browse...</button>
+          </div>
+        </div>
+
+        <!-- Web Mode: Download ZIP -->
+        <div id="scaffoldWebSection" style="margin-bottom:16px;display:none;">
+          <div style="padding:12px;background:var(--surface-darker);border-radius:8px;margin-bottom:12px;">
+            <p style="margin:0;font-size:14px;">📦 <strong>Web Mode</strong> — Download as ZIP or use CLI</p>
+            <p style="margin:8px 0 0;font-size:13px;color:var(--text-dim);">
+              CLI: <code style="padding:4px 8px;background:var(--surface);border-radius:4px;">vai scaffold <span id="scaffoldCliName">my-rag-app</span> --target <span id="scaffoldCliTarget">vanilla</span></code>
+            </p>
+          </div>
+        </div>
+
+        <!-- Buttons: different for Electron vs Web -->
+        <div id="scaffoldElectronButtons" style="display:none;">
+          <button class="btn btn-primary" onclick="createScaffold()" id="scaffoldBtn" disabled>
+            Create Project
+          </button>
+        </div>
+        <div id="scaffoldWebButtons" style="display:none;">
+          <button class="btn btn-primary" onclick="downloadScaffoldZip()" id="scaffoldDownloadBtn">
+            <svg width="16" height="16" viewBox="0 0 16 16" style="margin-right:6px;"><path fill="currentColor" d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/><path fill="currentColor" d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/></svg>
+            Download ZIP
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Scaffold Progress/Result -->
+    <div class="card" id="scaffoldResultCard" style="margin-top:16px;display:none;">
+      <div class="card-header"><h3>Project Created</h3></div>
+      <div class="card-body">
+        <div id="scaffoldResult"></div>
+      </div>
+    </div>
+  </div>
+</div>
+
 <!-- ========== EXPLORE TAB ========== -->
 <div class="tab-panel" id="tab-explore" role="tabpanel" aria-labelledby="tab-btn-explore" tabindex="0">
   <div class="page-header">
@@ -4114,6 +4333,261 @@ function createResultItem(rank, result, maxScore, movement) {
 }
 
 // ── Explore ──
+// ── Generate & Scaffold ──
+
+let generateMode = 'code';
+
+function setGenerateMode(mode) {
+  generateMode = mode;
+  const codeBtn = document.getElementById('genModeCode');
+  const scaffoldBtn = document.getElementById('genModeScaffold');
+  codeBtn.classList.toggle('active', mode === 'code');
+  codeBtn.setAttribute('aria-selected', mode === 'code');
+  scaffoldBtn.classList.toggle('active', mode === 'scaffold');
+  scaffoldBtn.setAttribute('aria-selected', mode === 'scaffold');
+  document.getElementById('generateCodePanel').style.display = mode === 'code' ? 'block' : 'none';
+  document.getElementById('scaffoldPanel').style.display = mode === 'scaffold' ? 'block' : 'none';
+}
+
+function updateGenComponents() {
+  const target = document.getElementById('genTarget').value;
+  const select = document.getElementById('genComponent');
+  const components = {
+    vanilla: ['client', 'connection', 'retrieval', 'ingest', 'search-api'],
+    nextjs: ['client', 'connection', 'retrieval', 'ingest', 'search-page'],
+    python: ['client', 'connection', 'retrieval', 'ingest'],
+  };
+  const labels = {
+    client: 'API Client',
+    connection: 'MongoDB Connection',
+    retrieval: 'RAG Retrieval',
+    ingest: 'Document Ingest',
+    'search-api': 'Search API',
+    'search-page': 'Search Page (MUI)',
+  };
+  select.innerHTML = (components[target] || []).map(c =>
+    `<option value="${c}">${labels[c] || c}</option>`
+  ).join('');
+}
+
+async function generateCode() {
+  const btn = document.getElementById('genCodeBtn');
+  const outputCard = document.getElementById('genOutputCard');
+  
+  btn.disabled = true;
+  btn.textContent = 'Generating...';
+  
+  try {
+    const config = {
+      model: document.getElementById('genModel').value,
+      db: document.getElementById('genDb').value,
+      collection: document.getElementById('genCollection').value,
+      rerank: document.getElementById('genRerank').checked,
+    };
+    
+    const target = document.getElementById('genTarget').value;
+    const component = document.getElementById('genComponent').value;
+    
+    // Check if running in Electron with vai.generate
+    if (window.vai && window.vai.generate) {
+      const result = await window.vai.generate.code({ target, component, config });
+      if (result.error) throw new Error(result.error);
+      
+      document.getElementById('genOutputFilename').textContent = result.filename;
+      document.getElementById('genOutputCode').textContent = result.code;
+      outputCard.style.display = 'block';
+    } else {
+      // Web fallback - call the API
+      const res = await fetch('/api/generate', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ target, component, config }),
+      });
+      const result = await res.json();
+      if (result.error) throw new Error(result.error);
+      
+      document.getElementById('genOutputFilename').textContent = result.filename || `${component}.js`;
+      document.getElementById('genOutputCode').textContent = result.code;
+      outputCard.style.display = 'block';
+    }
+  } catch (err) {
+    alert('Error generating code: ' + err.message);
+  } finally {
+    btn.disabled = false;
+    btn.textContent = 'Generate Code';
+  }
+}
+
+function copyGeneratedCode() {
+  const code = document.getElementById('genOutputCode').textContent;
+  navigator.clipboard.writeText(code);
+  // Brief feedback
+  const btn = event.target;
+  btn.textContent = 'Copied!';
+  setTimeout(() => { btn.textContent = 'Copy'; }, 1500);
+}
+
+// Scaffold functions
+function initScaffold() {
+  const isElectron = window.vai && window.vai.scaffold;
+  
+  // Show/hide mode-specific sections
+  document.getElementById('scaffoldLocationSection').style.display = isElectron ? 'block' : 'none';
+  document.getElementById('scaffoldWebSection').style.display = isElectron ? 'none' : 'block';
+  document.getElementById('scaffoldElectronButtons').style.display = isElectron ? 'block' : 'none';
+  document.getElementById('scaffoldWebButtons').style.display = isElectron ? 'none' : 'block';
+  
+  // Update CLI command preview on input
+  document.getElementById('scaffoldName').addEventListener('input', updateScaffoldPreview);
+  document.getElementById('scaffoldTarget').addEventListener('change', updateScaffoldPreview);
+}
+
+function updateScaffoldPreview() {
+  const name = document.getElementById('scaffoldName').value || 'my-rag-app';
+  const target = document.getElementById('scaffoldTarget').value;
+  document.getElementById('scaffoldCliName').textContent = name;
+  document.getElementById('scaffoldCliTarget').textContent = target;
+}
+
+async function downloadScaffoldZip() {
+  const btn = document.getElementById('scaffoldDownloadBtn');
+  const projectName = document.getElementById('scaffoldName').value || 'my-rag-app';
+  const target = document.getElementById('scaffoldTarget').value;
+  const config = {
+    model: document.getElementById('scaffoldModel').value,
+    db: document.getElementById('scaffoldDb').value,
+    collection: document.getElementById('scaffoldCollection').value,
+  };
+  
+  btn.disabled = true;
+  btn.innerHTML = '<span style="margin-right:6px;">⏳</span> Generating...';
+  
+  try {
+    const res = await fetch('/api/scaffold', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ projectName, target, config }),
+    });
+    
+    if (!res.ok) {
+      const err = await res.json();
+      throw new Error(err.error || 'Failed to generate scaffold');
+    }
+    
+    // Download the ZIP
+    const blob = await res.blob();
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `${projectName}.zip`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+    
+    // Show success
+    btn.innerHTML = '<span style="margin-right:6px;">✓</span> Downloaded!';
+    setTimeout(() => {
+      btn.innerHTML = '<svg width="16" height="16" viewBox="0 0 16 16" style="margin-right:6px;"><path fill="currentColor" d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/><path fill="currentColor" d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/></svg> Download ZIP';
+      btn.disabled = false;
+    }, 2000);
+  } catch (err) {
+    alert('Error: ' + err.message);
+    btn.innerHTML = '<svg width="16" height="16" viewBox="0 0 16 16" style="margin-right:6px;"><path fill="currentColor" d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/><path fill="currentColor" d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/></svg> Download ZIP';
+    btn.disabled = false;
+  }
+}
+
+async function pickScaffoldDirectory() {
+  if (!window.vai || !window.vai.scaffold) return;
+  
+  const result = await window.vai.scaffold.pickDirectory();
+  if (!result.canceled) {
+    document.getElementById('scaffoldPath').value = result.path;
+    document.getElementById('scaffoldBtn').disabled = false;
+  }
+}
+
+async function createScaffold() {
+  if (!window.vai || !window.vai.scaffold) return;
+  
+  const btn = document.getElementById('scaffoldBtn');
+  const resultCard = document.getElementById('scaffoldResultCard');
+  const resultDiv = document.getElementById('scaffoldResult');
+  
+  const dirPath = document.getElementById('scaffoldPath').value;
+  const projectName = document.getElementById('scaffoldName').value || 'my-rag-app';
+  const target = document.getElementById('scaffoldTarget').value;
+  
+  if (!dirPath) {
+    alert('Please choose a location first.');
+    return;
+  }
+  
+  btn.disabled = true;
+  btn.textContent = 'Creating...';
+  resultCard.style.display = 'none';
+  
+  try {
+    // Check if directory exists
+    const check = await window.vai.scaffold.checkDirectory({ dirPath, projectName });
+    if (check.exists && check.fileCount > 0) {
+      const confirm = await window.vai.scaffold.confirmOverwrite({ projectName });
+      if (!confirm.confirmed) {
+        btn.disabled = false;
+        btn.textContent = 'Create Project';
+        return;
+      }
+    }
+    
+    // Listen for progress
+    const cleanup = window.vai.scaffold.onProgress((data) => {
+      resultDiv.innerHTML = `<p>Creating: ${data.file} (${data.current}/${data.total})</p>`;
+      resultCard.style.display = 'block';
+    });
+    
+    // Create the project
+    const config = {
+      model: document.getElementById('scaffoldModel').value,
+      db: document.getElementById('scaffoldDb').value,
+      collection: document.getElementById('scaffoldCollection').value,
+    };
+    
+    const result = await window.vai.scaffold.create({ dirPath, projectName, target, config });
+    cleanup();
+    
+    if (result.error) throw new Error(result.error);
+    
+    // Show success
+    resultDiv.innerHTML = `
+      <p style="color:var(--primary);">✓ Created ${result.files.length} files in <code>${projectName}/</code></p>
+      <div style="margin:12px 0;padding:12px;background:var(--surface-darker);border-radius:8px;">
+        <p style="margin:0 0 8px;font-weight:500;">Next steps:</p>
+        <code style="display:block;margin-bottom:4px;">cd ${projectName}</code>
+        <code style="display:block;margin-bottom:4px;">cp .env.example .env</code>
+        <code style="display:block;margin-bottom:4px;">${result.postInstall}</code>
+        <code style="display:block;">${result.startCommand}</code>
+      </div>
+      <button class="btn btn-outline" onclick="window.vai.scaffold.openDirectory({ dirPath: '${result.projectDir.replace(/'/g, "\\'")}' })">
+        Open in Finder
+      </button>
+    `;
+    resultCard.style.display = 'block';
+    
+  } catch (err) {
+    resultDiv.innerHTML = `<p style="color:var(--error);">Error: ${err.message}</p>`;
+    resultCard.style.display = 'block';
+  } finally {
+    btn.disabled = false;
+    btn.textContent = 'Create Project';
+  }
+}
+
+// Initialize scaffold on load
+document.addEventListener('DOMContentLoaded', () => {
+  setTimeout(initScaffold, 100);
+});
+
 // ── Explore: icons and tab mappings per concept ──
 const CONCEPT_META = {
   embeddings:          { icon: '🧮', tab: 'embed' },
@@ -4139,6 +4613,10 @@ const CONCEPT_META = {
   'modality-gap':          { icon: '🕳️', tab: 'multimodal' },
   'multimodal-rag':        { icon: '📄', tab: 'multimodal' },
   'provider-comparison':   { icon: '⚖️', tab: 'explore' },
+  // Code generation & scaffolding
+  'code-generation':   { icon: '💻', tab: 'explore' },
+  scaffolding:         { icon: '🏗️', tab: 'explore' },
+  'eval-comparison':   { icon: '📊', tab: 'benchmark' },
 };
 
 let exploreConcepts = {};
@@ -5598,7 +6076,7 @@ function initOnboarding() {
       target: null, // welcome card, no spotlight
       icon: '🚀',
       title: 'Welcome to Vai',
-      body: 'Explore embeddings, compare text similarity, and search with vector models — all from one playground.',
+      body: 'Explore embeddings, build RAG pipelines, generate production code — all from one playground.',
     },
     {
       target: '[data-tab="settings"]',
@@ -5629,6 +6107,35 @@ function initOnboarding() {
       body: 'Run <strong>vector search</strong> against a set of documents and optionally <strong>rerank</strong> results for higher precision. Great for building RAG pipelines.',
       arrow: 'left',
     },
+    {
+      target: '[data-tab="multimodal"]',
+      icon: '🖼️',
+      title: 'Multimodal',
+      body: 'Embed <strong>images and text</strong> in the same vector space. Search images with text queries, or find similar images across your collection.',
+      arrow: 'left',
+    },
+    {
+      target: '[data-tab="generate"]',
+      icon: '💻',
+      title: 'Generate & Scaffold',
+      body: '<strong>Generate code snippets</strong> for retrieval, ingestion, and API routes — or <strong>scaffold entire projects</strong> with Next.js, Express, or Flask.' +
+        (isElectron ? ' Create projects directly on disk.' : ' Download as ZIP.'),
+      arrow: 'left',
+    },
+    {
+      target: '[data-tab="benchmark"]',
+      icon: '⏱️',
+      title: 'Benchmark',
+      body: 'Compare model <strong>latency, throughput, and cost</strong>. Test embedding speeds, reranking quality, and quantization trade-offs.',
+      arrow: 'left',
+    },
+    {
+      target: '[data-tab="explore"]',
+      icon: '💡',
+      title: 'Explore & Learn',
+      body: 'Dive into <strong>25 interactive explainers</strong> covering embeddings, vector search, RAG, reranking, and more. Each topic links to live demos.',
+      arrow: 'left',
+    },
   ];
 
   let currentStep = 0;
@@ -6519,6 +7026,15 @@ function startVSI(canvas, onExit) {
   loop();
 }
 
+// ── Expose functions to global scope for onclick handlers ──
+window.setGenerateMode = setGenerateMode;
+window.copyGeneratedCode = copyGeneratedCode;
+window.generateCode = generateCode;
+window.updateGenComponents = updateGenComponents;
+window.createScaffold = createScaffold;
+window.pickScaffoldDirectory = pickScaffoldDirectory;
+window.downloadScaffoldZip = downloadScaffoldZip;
+
 // ── Start ──
 init();
 })();
@@ -6607,5 +7123,194 @@ init();
   <canvas id="vsiCanvas" width="600" height="500" style="border:1px solid #3D4F58;border-radius:8px;image-rendering:pixelated;"></canvas>
   <div style="color:#889397;font-size:11px;font-family:monospace;text-align:center;">← → move &nbsp;|&nbsp; SPACE shoot &nbsp;|&nbsp; ESC exit</div>
 </div>
+
+<!-- 🐛 Bug Reporter -->
+<style>
+.bug-floating-button{position:fixed;bottom:20px;right:20px;width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#ff6b6b,#ee5a5a);border:none;cursor:pointer;font-size:24px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(238,90,90,0.4);transition:all .2s;z-index:9998}
+.bug-floating-button:hover{transform:scale(1.1);box-shadow:0 6px 16px rgba(238,90,90,0.5)}
+.bug-reporter-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:9999}
+.bug-reporter-modal{background:var(--bg-surface);border-radius:12px;width:90%;max-width:500px;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,0.5)}
+.bug-reporter-header{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--border)}
+.bug-reporter-header h2{flex:1;margin:0;font-size:18px;font-weight:600;color:var(--accent-text)}
+.bug-reporter-header .close-btn{background:none;border:none;color:var(--text-muted);font-size:24px;cursor:pointer;padding:4px 8px;border-radius:4px}
+.bug-reporter-header .close-btn:hover{background:rgba(255,255,255,0.1);color:var(--text)}
+.bug-reporter-form{padding:20px}
+.bug-reporter-form .form-group{margin-bottom:16px}
+.bug-reporter-form label{display:block;font-size:13px;font-weight:500;color:var(--text-muted);margin-bottom:6px}
+.bug-reporter-form input,.bug-reporter-form textarea{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--bg-input);color:var(--text);font-size:14px;font-family:inherit}
+.bug-reporter-form input:focus,.bug-reporter-form textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
+.bug-reporter-form textarea{resize:vertical;min-height:80px}
+.bug-env-info{padding:12px;background:var(--accent-glow);border-radius:8px;font-size:12px;margin-bottom:16px;color:var(--accent)}
+.bug-env-info code{color:var(--text-muted);font-size:11px}
+.bug-error{padding:10px 12px;background:rgba(255,107,107,0.15);border:1px solid rgba(255,107,107,0.3);border-radius:8px;color:var(--error);font-size:13px;margin-bottom:16px}
+.bug-actions{display:flex;gap:12px}
+.bug-actions button{flex:1;padding:12px 16px;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;border:none}
+.bug-actions .primary{background:linear-gradient(135deg,var(--accent),#00c853);color:#000}
+.bug-actions .primary:hover{box-shadow:0 4px 12px rgba(0,237,100,0.4)}
+.bug-actions .primary:disabled{opacity:0.6;cursor:not-allowed}
+.bug-actions .secondary{background:rgba(255,255,255,0.1);color:var(--text);border:1px solid var(--border)}
+.bug-actions .secondary:hover{background:rgba(255,255,255,0.15)}
+.bug-success{padding:40px 20px;text-align:center}
+.bug-success .icon{width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#00c853);color:#000;font-size:32px;display:flex;align-items:center;justify-content:center;margin:0 auto 20px}
+.bug-success h3{margin:0 0 12px;color:var(--accent-text);font-size:20px}
+.bug-success p{margin:8px 0;color:var(--text-muted)}
+.bug-success code{background:rgba(255,255,255,0.1);padding:4px 8px;border-radius:4px;font-size:12px;color:var(--accent)}
+</style>
+
+<button class="bug-floating-button" id="bugButton" title="Report a Bug">🐛</button>
+
+<div class="bug-reporter-overlay" id="bugOverlay" style="display:none">
+  <div class="bug-reporter-modal">
+    <div class="bug-reporter-header">
+      <span style="font-size:28px">🐛</span>
+      <h2>Report a Bug</h2>
+      <button class="close-btn" id="bugClose">×</button>
+    </div>
+    <div class="bug-reporter-form" id="bugForm">
+      <div class="form-group">
+        <label>Title *</label>
+        <input type="text" id="bugTitle" placeholder="Brief description of the bug" maxlength="200">
+      </div>
+      <div class="form-group">
+        <label>Description *</label>
+        <textarea id="bugDescription" placeholder="What happened? What did you expect?" rows="4" maxlength="5000"></textarea>
+      </div>
+      <div class="form-group">
+        <label>Steps to Reproduce</label>
+        <textarea id="bugSteps" placeholder="1. Go to...&#10;2. Click on...&#10;3. See error" rows="3" maxlength="2000"></textarea>
+      </div>
+      <div class="form-group">
+        <label>Email (optional, for follow-up)</label>
+        <input type="email" id="bugEmail" placeholder="your@email.com">
+      </div>
+      <div class="bug-env-info">
+        <span>📋 Environment will be included:</span><br>
+        <code id="bugEnvInfo">Loading...</code>
+      </div>
+      <div class="bug-error" id="bugError" style="display:none"></div>
+      <div class="bug-actions">
+        <button class="primary" id="bugSubmit">Submit Bug Report</button>
+        <button class="secondary" id="bugGithub">Open GitHub Issue</button>
+      </div>
+    </div>
+    <div class="bug-success" id="bugSuccess" style="display:none">
+      <div class="icon">✓</div>
+      <h3>Bug Reported!</h3>
+      <p>Bug ID: <code id="bugResultId"></code></p>
+      <p>Thank you for helping improve Vai!</p>
+      <div class="bug-actions" style="justify-content:center;margin-top:24px">
+        <button class="primary" id="bugSuccessClose">Close</button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+(function() {
+  const BUG_API = 'https://vai.mlynn.org/api/bugs';
+  const GITHUB_URL = 'https://github.com/mrlynn/voyageai-cli/issues/new';
+  
+  function getEnv() {
+    const env = { platform: navigator.platform, source: 'desktop-app' };
+    if (window.electronAPI) {
+      env.appVersion = window.electronAPI.appVersion || 'unknown';
+      env.cliVersion = window.electronAPI.cliVersion || 'unknown';
+      env.electronVersion = window.electronAPI.electronVersion || 'unknown';
+    }
+    env.currentScreen = document.querySelector('.tab-btn.active')?.textContent || 'unknown';
+    return env;
+  }
+  
+  function showBugReporter() {
+    const env = getEnv();
+    document.getElementById('bugEnvInfo').textContent = 
+      `${env.platform} • App v${env.appVersion || '?'} • ${env.currentScreen}`;
+    document.getElementById('bugOverlay').style.display = 'flex';
+    document.getElementById('bugForm').style.display = 'block';
+    document.getElementById('bugSuccess').style.display = 'none';
+    document.getElementById('bugError').style.display = 'none';
+    document.getElementById('bugTitle').value = '';
+    document.getElementById('bugDescription').value = '';
+    document.getElementById('bugSteps').value = '';
+    document.getElementById('bugEmail').value = '';
+  }
+  
+  function hideBugReporter() {
+    document.getElementById('bugOverlay').style.display = 'none';
+  }
+  
+  async function submitBug() {
+    const title = document.getElementById('bugTitle').value.trim();
+    const description = document.getElementById('bugDescription').value.trim();
+    const steps = document.getElementById('bugSteps').value.trim();
+    const email = document.getElementById('bugEmail').value.trim();
+    
+    if (!title || title.length < 5) {
+      document.getElementById('bugError').textContent = 'Title is required (min 5 characters)';
+      document.getElementById('bugError').style.display = 'block';
+      return;
+    }
+    if (!description || description.length < 10) {
+      document.getElementById('bugError').textContent = 'Description is required (min 10 characters)';
+      document.getElementById('bugError').style.display = 'block';
+      return;
+    }
+    
+    document.getElementById('bugSubmit').disabled = true;
+    document.getElementById('bugSubmit').textContent = 'Submitting...';
+    document.getElementById('bugError').style.display = 'none';
+    
+    try {
+      const env = getEnv();
+      const res = await fetch(BUG_API, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          title, description, stepsToReproduce: steps || null, email: email || null,
+          ...env
+        })
+      });
+      
+      if (!res.ok) {
+        const err = await res.json().catch(() => ({}));
+        throw new Error(err.error || `HTTP ${res.status}`);
+      }
+      
+      const data = await res.json();
+      document.getElementById('bugResultId').textContent = data.bugId;
+      document.getElementById('bugForm').style.display = 'none';
+      document.getElementById('bugSuccess').style.display = 'block';
+    } catch (err) {
+      document.getElementById('bugError').textContent = err.message;
+      document.getElementById('bugError').style.display = 'block';
+    } finally {
+      document.getElementById('bugSubmit').disabled = false;
+      document.getElementById('bugSubmit').textContent = 'Submit Bug Report';
+    }
+  }
+  
+  function openGithub() {
+    const title = document.getElementById('bugTitle').value.trim() || 'Bug Report';
+    const description = document.getElementById('bugDescription').value.trim();
+    const steps = document.getElementById('bugSteps').value.trim();
+    const env = getEnv();
+    
+    const body = `## Description\n${description}\n\n## Steps to Reproduce\n${steps || '1. \\n2. \\n3. '}\n\n## Environment\n- **App Version:** ${env.appVersion || 'N/A'}\n- **Platform:** ${env.platform}\n- **Screen:** ${env.currentScreen}`;
+    const url = `${GITHUB_URL}?title=${encodeURIComponent('[Bug] ' + title)}&body=${encodeURIComponent(body)}&labels=bug`;
+    window.open(url, '_blank');
+  }
+  
+  // Event listeners
+  document.getElementById('bugButton').addEventListener('click', showBugReporter);
+  document.getElementById('bugClose').addEventListener('click', hideBugReporter);
+  document.getElementById('bugOverlay').addEventListener('click', (e) => {
+    if (e.target.id === 'bugOverlay') hideBugReporter();
+  });
+  document.getElementById('bugSubmit').addEventListener('click', submitBug);
+  document.getElementById('bugGithub').addEventListener('click', openGithub);
+  document.getElementById('bugSuccessClose').addEventListener('click', hideBugReporter);
+})();
+</script>
+
 </body>
 </html>