voyageai-cli 1.21.0 → 1.22.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "voyageai-cli",
-  "version": "1.21.0",
+  "version": "1.22.1",
   "description": "CLI for Voyage AI embeddings, reranking, and MongoDB Atlas Vector Search",
   "bin": {
     "vai": "./src/cli.js"
@@ -37,9 +37,10 @@
     "test": "node --test test/**/*.test.js"
   },
   "engines": {
-    "node": ">=18.0.0"
+    "node": ">=20.0.0"
   },
   "dependencies": {
+    "@clack/prompts": "^1.0.0",
     "commander": "^12.0.0",
     "dotenv": "^17.2.3",
     "mongodb": "^6.0.0",

package/src/cli.js

@@ -34,6 +34,7 @@ const { registerApp } = require('./commands/app');
 const { registerAbout } = require('./commands/about');
 const { register: registerDoctor } = require('./commands/doctor');
 const { register: registerQuickstart } = require('./commands/quickstart');
+const { registerBug } = require('./commands/bug');
 const { showBanner, showQuickStart, getVersion } = require('./lib/banner');
 
 const version = getVersion();
@@ -72,6 +73,7 @@ registerApp(program);
 registerAbout(program);
 registerDoctor(program);
 registerQuickstart(program);
+registerBug(program);
 
 // Append disclaimer to all help output
 program.addHelpText('after', `

package/src/commands/bug.js

@@ -0,0 +1,249 @@
+'use strict';
+
+const os = require('os');
+const pc = require('picocolors');
+const ui = require('../lib/ui');
+const { send: sendTelemetry } = require('../lib/telemetry');
+
+// Try to get package version safely
+function getVersion() {
+  try {
+    return require('../../package.json').version;
+  } catch {
+    return 'unknown';
+  }
+}
+
+const GITHUB_ISSUES_URL = 'https://github.com/mrlynn/voyageai-cli/issues/new';
+const BUG_API_URL = 'https://vai.mlynn.org/api/bugs';
+
+/**
+ * Generate a GitHub issue URL with pre-filled template
+ */
+function generateGitHubUrl(title, description, context = {}) {
+  const issueTitle = encodeURIComponent(`[Bug] ${title || 'Bug Report'}`);
+  
+  const body = `## Description
+${description || 'Describe the bug here...'}
+
+## Steps to Reproduce
+1. 
+2. 
+3. 
+
+## Expected Behavior
+
+
+## Actual Behavior
+
+
+## Environment
+- **CLI Version:** ${context.cliVersion || getVersion()}
+- **Node Version:** ${process.version}
+- **Platform:** ${os.platform()} ${os.release()}
+- **Arch:** ${os.arch()}
+${context.command ? `- **Command:** \`${context.command}\`` : ''}
+
+## Additional Context
+${context.errorMessage ? `### Error\n\`\`\`\n${context.errorMessage}\n\`\`\`` : 'Add any other context here.'}
+`;
+
+  return `${GITHUB_ISSUES_URL}?title=${issueTitle}&body=${encodeURIComponent(body)}&labels=bug`;
+}
+
+/**
+ * Submit bug report to API
+ */
+async function submitBugReport(data) {
+  try {
+    const response = await fetch(BUG_API_URL, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        ...data,
+        source: 'cli',
+        cliVersion: getVersion(),
+        platform: os.platform(),
+        arch: os.arch(),
+        nodeVersion: process.version,
+      }),
+    });
+
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({}));
+      throw new Error(error.error || `HTTP ${response.status}`);
+    }
+
+    return await response.json();
+  } catch (error) {
+    throw new Error(`Failed to submit bug report: ${error.message}`);
+  }
+}
+
+/**
+ * Open URL in default browser
+ */
+function openUrl(url) {
+  const { exec } = require('child_process');
+  const command = os.platform() === 'darwin' ? 'open' :
+                  os.platform() === 'win32' ? 'start' : 'xdg-open';
+  exec(`${command} "${url}"`);
+}
+
+/**
+ * Interactive bug report (when no arguments provided)
+ */
+async function interactiveBugReport() {
+  const readline = require('readline');
+  const rl = readline.createInterface({
+    input: process.stdin,
+    output: process.stdout,
+  });
+
+  const question = (prompt) => new Promise((resolve) => {
+    rl.question(prompt, resolve);
+  });
+
+  console.log(ui.info('🐛 Bug Reporter'));
+  console.log(ui.dim('Report issues with the Vai CLI\n'));
+
+  try {
+    const title = await question(ui.label('Title', 'Brief description of the bug') + '\n> ');
+    if (!title.trim()) {
+      console.log(ui.warn('Bug report cancelled.'));
+      rl.close();
+      return;
+    }
+
+    const description = await question(ui.label('Description', 'What happened?') + '\n> ');
+    const steps = await question(ui.label('Steps to Reproduce', 'Optional, press Enter to skip') + '\n> ');
+    const email = await question(ui.label('Email', 'Optional, for follow-up') + '\n> ');
+
+    console.log('');
+    const method = await question('Submit to:\n  [1] Bug tracker (anonymous)\n  [2] GitHub Issues (public)\n  [3] Both\n> ');
+
+    rl.close();
+
+    const bugData = {
+      title: title.trim(),
+      description: description.trim(),
+      stepsToReproduce: steps.trim() || null,
+      email: email.trim() || null,
+    };
+
+    if (method === '1' || method === '3') {
+      console.log(ui.dim('\nSubmitting to bug tracker...'));
+      try {
+        const result = await submitBugReport(bugData);
+        console.log(ui.success(`Bug submitted! ID: ${result.bugId}`));
+      } catch (error) {
+        console.log(ui.error(error.message));
+      }
+    }
+
+    if (method === '2' || method === '3') {
+      const url = generateGitHubUrl(bugData.title, bugData.description, {
+        cliVersion: getVersion(),
+      });
+      console.log(ui.dim('\nOpening GitHub...'));
+      openUrl(url);
+      console.log(ui.success('GitHub issue page opened in browser'));
+    }
+
+    if (!['1', '2', '3'].includes(method)) {
+      console.log(ui.warn('No submission method selected.'));
+    }
+
+  } catch (error) {
+    rl.close();
+    console.error(ui.error(`Error: ${error.message}`));
+  }
+}
+
+/**
+ * Main bug command
+ */
+async function bugCommand(args, flags) {
+  // --github flag: open GitHub issues directly
+  if (flags.github || flags.g) {
+    const title = args.join(' ');
+    const url = generateGitHubUrl(title, '', { cliVersion: getVersion() });
+    console.log(ui.info('Opening GitHub Issues...'));
+    openUrl(url);
+    return;
+  }
+
+  // --quick flag: quick submit with just title
+  if (flags.quick || flags.q) {
+    const title = args.join(' ');
+    if (!title) {
+      console.error(ui.error('Please provide a bug title: vai bug --quick "Something broke"'));
+      process.exit(1);
+    }
+
+    console.log(ui.dim('Submitting quick bug report...'));
+    try {
+      const result = await submitBugReport({
+        title,
+        description: title,
+      });
+      console.log(ui.success(`Bug submitted! ID: ${result.bugId}`));
+      console.log(ui.dim(`Create GitHub issue: ${result.githubIssueUrl}`));
+    } catch (error) {
+      console.error(ui.error(error.message));
+      process.exit(1);
+    }
+    return;
+  }
+
+  // If title provided as argument, use quick mode
+  if (args.length > 0) {
+    const title = args.join(' ');
+    console.log(ui.dim('Submitting bug report...'));
+    try {
+      const result = await submitBugReport({
+        title,
+        description: title,
+      });
+      console.log(ui.success(`Bug submitted! ID: ${result.bugId}`));
+      console.log(ui.dim('To create a GitHub issue with more details:'));
+      console.log(ui.dim(`  ${result.githubIssueUrl.slice(0, 80)}...`));
+    } catch (error) {
+      console.error(ui.error(error.message));
+      process.exit(1);
+    }
+    return;
+  }
+
+  // No arguments: interactive mode
+  await interactiveBugReport();
+}
+
+/**
+ * Register the bug command with Commander
+ */
+function registerBug(program) {
+  program
+    .command('bug [title...]')
+    .description('Report a bug or issue with the Vai CLI')
+    .option('-g, --github', 'Open GitHub Issues in browser')
+    .option('-q, --quick', 'Quick submit (title only, no interaction)')
+    .action(async (titleParts, options) => {
+      sendTelemetry('bug', { 
+        method: options.github ? 'github' : options.quick ? 'quick' : 'interactive' 
+      });
+      
+      const args = titleParts || [];
+      const flags = {
+        github: options.github,
+        g: options.github,
+        quick: options.quick,
+        q: options.quick,
+      };
+      
+      await bugCommand(args, flags);
+    });
+}
+
+module.exports = { registerBug };
+module.exports.bugCommand = bugCommand;

package/src/lib/codegen.js

@@ -3,6 +3,32 @@
 const fs = require('fs');
 const path = require('path');
 
+/**
+ * Safely get the CLI version, handling both development and packaged Electron app.
+ * @returns {string} The version string or 'unknown'
+ */
+function getCliVersion() {
+  // Try multiple paths to find package.json
+  const possiblePaths = [
+    path.join(__dirname, '..', '..', 'package.json'),  // Development: src/lib -> root
+    path.join(process.resourcesPath || '', 'cli-package.json'),  // Packaged Electron app
+    path.join(__dirname, '..', 'package.json'),  // Alternative structure
+  ];
+  
+  for (const pkgPath of possiblePaths) {
+    try {
+      if (fs.existsSync(pkgPath)) {
+        const pkg = require(pkgPath);
+        if (pkg.version) return pkg.version;
+      }
+    } catch {
+      // Try next path
+    }
+  }
+  
+  return 'unknown';
+}
+
 /**
  * Lightweight template engine for code generation.
  * 
@@ -295,7 +321,7 @@ function buildContext(project, options = {}) {
 
     // Metadata
     generatedAt: new Date().toISOString(),
-    vaiVersion: require('../../package.json').version,
+    vaiVersion: getCliVersion(),
   };
 
   return context;

package/src/lib/explanations.js

@@ -1151,6 +1151,175 @@ const concepts = {
     ],
   },
 
+  'auto-embedding': {
+    title: 'MongoDB Auto-Embedding',
+    summary: 'Automatic vector embedding generation in Atlas Vector Search',
+    content: [
+      `${pc.bold('What is Auto-Embedding?')}`,
+      `${pc.cyan('Auto-Embedding')} is a MongoDB Atlas Vector Search feature (currently in Preview)`,
+      `that automatically generates vector embeddings for text fields using Voyage AI`,
+      `models — no embedding code required.`,
+      ``,
+      `${pc.bold('How it works:')}`,
+      `  ${pc.dim('1.')} Configure your vector search index with ${pc.cyan('autoEmbed')} type`,
+      `  ${pc.dim('2.')} Specify which text field to embed and which Voyage AI model to use`,
+      `  ${pc.dim('3.')} MongoDB automatically generates embeddings when documents are inserted/updated`,
+      `  ${pc.dim('4.')} At query time, pass natural language text — MongoDB embeds it automatically`,
+      ``,
+      `${pc.bold('Supported models:')}`,
+      `  ${pc.cyan('voyage-4-lite')}   — High-volume, cost-sensitive applications`,
+      `  ${pc.cyan('voyage-4')}        — Balanced performance (recommended)`,
+      `  ${pc.cyan('voyage-4-large')}  — Maximum accuracy for complex relationships`,
+      `  ${pc.cyan('voyage-code-3')}   — Code search and technical documentation`,
+      ``,
+      `${pc.bold('Index definition example:')}`,
+      `  ${pc.dim('{')}`,
+      `    ${pc.dim('"mappings": {')}`,
+      `      ${pc.dim('"fields": {')}`,
+      `        ${pc.cyan('"summary"')}: ${pc.dim('{')}`,
+      `          ${pc.dim('"type": "')}${pc.cyan('autoEmbed')}${pc.dim('",')}`,
+      `          ${pc.dim('"model": "voyage-4"')}`,
+      `        ${pc.dim('}')}`,
+      `      ${pc.dim('}')}`,
+      `    ${pc.dim('}')}`,
+      `  ${pc.dim('}')}`,
+      ``,
+      `${pc.bold('Query syntax:')} Use ${pc.cyan('query.text')} in $vectorSearch instead of ${pc.cyan('queryVector')}:`,
+      `  ${pc.dim('$vectorSearch: {')}`,
+      `    ${pc.dim('index: "myIndex",')}`,
+      `    ${pc.dim('path: "summary",')}`,
+      `    ${pc.cyan('query: { text: "properties near amusement parks" }')},`,
+      `    ${pc.dim('numCandidates: 100,')}`,
+      `    ${pc.dim('limit: 10')}`,
+      `  ${pc.dim('}')}`,
+      ``,
+      `${pc.bold('API keys:')}`,
+      `Auto-Embedding uses Voyage AI API keys configured during mongot deployment.`,
+      `Best practice: use separate keys for indexing vs. querying to avoid rate limit`,
+      `conflicts. Keys can be created from Atlas (AI Models section) or Voyage AI directly.`,
+      ``,
+      `${pc.bold('Current limitations (Preview):')}`,
+      `  ${pc.dim('•')} ${pc.yellow('Not yet available')} on Atlas clusters (only self-managed Community Edition)`,
+      `  ${pc.dim('•')} Not available on local Atlas deployments via Atlas CLI`,
+      `  ${pc.dim('•')} Not available on MongoDB Enterprise Edition`,
+      `  ${pc.dim('•')} Available via Docker, tarball, package manager, or Kubernetes with 8.2+ CE`,
+      ``,
+      `${pc.bold('When to use Auto-Embedding:')}`,
+      `  ${pc.dim('•')} Simple use cases where you want zero embedding code`,
+      `  ${pc.dim('•')} Single-field text embedding scenarios`,
+      `  ${pc.dim('•')} When your data changes frequently and you want automatic sync`,
+      `  ${pc.dim('•')} Self-managed MongoDB deployments`,
+      ``,
+      `${pc.bold('When to use vai (manual embedding) instead:')}`,
+      `  ${pc.dim('•')} Atlas clusters (auto-embedding not yet available)`,
+      `  ${pc.dim('•')} Custom chunking strategies needed`,
+      `  ${pc.dim('•')} Multi-field or multi-collection embeddings`,
+      `  ${pc.dim('•')} Reranking pipelines (auto-embedding doesn't include reranking)`,
+      `  ${pc.dim('•')} Quantization (int8/binary) for storage optimization`,
+      `  ${pc.dim('•')} Multimodal embeddings (images + text)`,
+    ].join('\n'),
+    links: [
+      'https://www.mongodb.com/docs/atlas/atlas-vector-search/crud-embeddings/create-embeddings-automatic/',
+      'https://www.mongodb.com/docs/voyageai/management/api-keys/',
+    ],
+    tryIt: [
+      'vai explain vai-vs-auto-embedding',
+      'vai explain vector-search',
+      'vai models --type embedding',
+    ],
+  },
+
+  'vai-vs-auto-embedding': {
+    title: 'VAI vs Auto-Embedding — When to Use Each',
+    summary: 'Choosing between manual embedding pipelines and MongoDB auto-embedding',
+    content: [
+      `Both ${pc.cyan('vai')} (manual embedding) and ${pc.cyan('MongoDB Auto-Embedding')} use the same`,
+      `Voyage AI models, but they serve different use cases and deployment scenarios.`,
+      ``,
+      `${pc.bold('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━')}`,
+      ``,
+      `${pc.bold(pc.cyan('VAI (Manual Embedding Pipeline)'))}`,
+      ``,
+      `You embed text explicitly using ${pc.cyan('vai embed')}, ${pc.cyan('vai pipeline')}, or ${pc.cyan('vai store')},`,
+      `then store the vectors in any database. Full control over every step.`,
+      ``,
+      `${pc.bold('Use vai when:')}`,
+      `  ${pc.green('✓')} Using ${pc.cyan('MongoDB Atlas clusters')} (auto-embedding not available yet)`,
+      `  ${pc.green('✓')} Using ${pc.cyan('any vector database')} (Pinecone, Weaviate, Qdrant, etc.)`,
+      `  ${pc.green('✓')} You need ${pc.cyan('custom chunking')} (sentence, paragraph, semantic, sliding window)`,
+      `  ${pc.green('✓')} You need ${pc.cyan('reranking')} (vai supports two-stage retrieval pipelines)`,
+      `  ${pc.green('✓')} You want ${pc.cyan('quantization')} (int8, binary) for storage optimization`,
+      `  ${pc.green('✓')} You need ${pc.cyan('multimodal embeddings')} (images + text)`,
+      `  ${pc.green('✓')} You need ${pc.cyan('flexible dimensions')} (256, 512, 1024, 2048)`,
+      `  ${pc.green('✓')} You want to ${pc.cyan('mix models')} (embed docs with -large, query with -lite)`,
+      `  ${pc.green('✓')} You need ${pc.cyan('batch processing')} with custom concurrency/rate limiting`,
+      `  ${pc.green('✓')} You're building ${pc.cyan('RAG pipelines')} with custom retrieval logic`,
+      ``,
+      `${pc.dim('Workflow:')}`,
+      `  ${pc.cyan('vai chunk')} → ${pc.cyan('vai embed')} → ${pc.cyan('vai store')} → ${pc.cyan('vai search')} → ${pc.cyan('vai rerank')}`,
+      ``,
+      `${pc.bold('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━')}`,
+      ``,
+      `${pc.bold(pc.cyan('MongoDB Auto-Embedding'))}`,
+      ``,
+      `MongoDB automatically generates embeddings when you insert/update documents.`,
+      `No embedding code needed — just configure your index and insert data.`,
+      ``,
+      `${pc.bold('Use Auto-Embedding when:')}`,
+      `  ${pc.green('✓')} Using ${pc.cyan('self-managed MongoDB Community Edition')} (8.2+)`,
+      `  ${pc.green('✓')} You want ${pc.cyan('zero embedding code')} — simplest possible setup`,
+      `  ${pc.green('✓')} You're embedding a ${pc.cyan('single text field')} per collection`,
+      `  ${pc.green('✓')} Your data ${pc.cyan('changes frequently')} and you want automatic sync`,
+      `  ${pc.green('✓')} You don't need reranking, quantization, or multimodal`,
+      `  ${pc.green('✓')} Standard chunking is sufficient (or you pre-chunk your data)`,
+      ``,
+      `${pc.dim('Workflow:')}`,
+      `  ${pc.cyan('db.collection.insertOne({text: "..."})')} → embeddings auto-generated`,
+      `  ${pc.cyan('$vectorSearch: {query: {text: "..."}}')} → query auto-embedded`,
+      ``,
+      `${pc.bold('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━')}`,
+      ``,
+      `${pc.bold('FEATURE COMPARISON')}`,
+      ``,
+      `${pc.dim('Feature                    vai           Auto-Embedding')}`,
+      `${pc.dim('─────────────────────────────────────────────────────────────────')}`,
+      `Atlas clusters             ${pc.green('Yes')}           ${pc.yellow('Not yet')}`,
+      `Self-managed CE 8.2+       ${pc.green('Yes')}           ${pc.green('Yes')}`,
+      `Other vector DBs           ${pc.green('Yes')}           ${pc.dim('No')}`,
+      `Custom chunking            ${pc.green('Yes')}           ${pc.dim('No')}`,
+      `Reranking                  ${pc.green('Yes')}           ${pc.dim('No')}`,
+      `Quantization               ${pc.green('Yes')}           ${pc.dim('No')}`,
+      `Multimodal                 ${pc.green('Yes')}           ${pc.dim('No')}`,
+      `Flexible dimensions        ${pc.green('Yes')}           ${pc.dim('No')}`,
+      `Mix query/doc models       ${pc.green('Yes')}           ${pc.dim('No')}`,
+      `Auto-sync on update        ${pc.dim('Manual')}        ${pc.green('Yes')}`,
+      `Zero code setup            ${pc.dim('No')}            ${pc.green('Yes')}`,
+      ``,
+      `${pc.bold('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━')}`,
+      ``,
+      `${pc.bold('RECOMMENDATION')}`,
+      ``,
+      `${pc.dim('•')} For ${pc.cyan('Atlas users')}: Use vai — auto-embedding isn't available yet`,
+      `${pc.dim('•')} For ${pc.cyan('production RAG')}: Use vai — you'll want reranking and custom chunking`,
+      `${pc.dim('•')} For ${pc.cyan('quick prototypes')} on self-managed CE: Auto-embedding is faster to set up`,
+      `${pc.dim('•')} For ${pc.cyan('complex pipelines')}: vai gives you full control over every step`,
+      ``,
+      `${pc.bold('Migration path:')} Start with auto-embedding for simplicity, then migrate to`,
+      `vai when you need advanced features. The models are the same — your embeddings`,
+      `will be compatible.`,
+    ].join('\n'),
+    links: [
+      'https://www.mongodb.com/docs/atlas/atlas-vector-search/crud-embeddings/create-embeddings-automatic/',
+      'https://www.mongodb.com/docs/atlas/atlas-vector-search/vector-search-stage/',
+    ],
+    tryIt: [
+      'vai explain auto-embedding',
+      'vai pipeline --help',
+      'vai chunk --help',
+      'vai rerank --help',
+    ],
+  },
+
   'eval-comparison': {
     title: 'Evaluation Comparison — vai eval compare',
     summary: 'Compare configurations and track quality over time',
@@ -1320,6 +1489,23 @@ const aliases = {
   'save-results': 'eval-comparison',
   'a-b-test': 'eval-comparison',
   regression: 'eval-comparison',
+  // Auto-embedding aliases
+  'auto-embedding': 'auto-embedding',
+  'auto-embed': 'auto-embedding',
+  autoembed: 'auto-embedding',
+  'autoEmbed': 'auto-embedding',
+  'automatic-embedding': 'auto-embedding',
+  'automatic-embeddings': 'auto-embedding',
+  'atlas-auto-embed': 'auto-embedding',
+  'mongodb-auto-embedding': 'auto-embedding',
+  'zero-code': 'auto-embedding',
+  // VAI vs Auto-embedding aliases
+  'vai-vs-auto-embedding': 'vai-vs-auto-embedding',
+  'vai-vs-autoembedding': 'vai-vs-auto-embedding',
+  'manual-vs-auto': 'vai-vs-auto-embedding',
+  'auto-vs-manual': 'vai-vs-auto-embedding',
+  'which-approach': 'vai-vs-auto-embedding',
+  'embedding-approach': 'vai-vs-auto-embedding',
   // Provider comparison aliases
   'provider-comparison': 'provider-comparison',
   providers: 'provider-comparison',

package/src/playground/index.html

@@ -7123,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>