voyageai-cli 1.20.0 → 1.20.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "voyageai-cli",
-  "version": "1.20.0",
+  "version": "1.20.1",
   "description": "CLI for Voyage AI embeddings, reranking, and MongoDB Atlas Vector Search",
   "bin": {
     "vai": "./src/cli.js"

package/src/cli.js

@@ -67,6 +67,9 @@ ${pc.dim('Community tool — not an official MongoDB or Voyage AI product.')}
 ${pc.dim('Docs: https://www.mongodb.com/docs/voyageai/')}
 `);
 
+// Anonymous telemetry (fire-and-forget, non-blocking)
+const telemetry = require('./lib/telemetry');
+
 // If no args (just `vai`), show banner + quick start + help
 if (process.argv.length <= 2) {
   showBanner();
@@ -75,4 +78,10 @@ if (process.argv.length <= 2) {
   process.exit(0);
 }
 
+// Track command usage after parsing
+program.hook('preAction', (thisCommand) => {
+  const cmd = thisCommand.args?.[0] || thisCommand.name();
+  telemetry.send('cli_command', { command: cmd });
+});
+
 program.parse();

package/src/commands/playground.js

@@ -149,6 +149,17 @@ function createPlaygroundServer() {
 
       // Parse JSON body for POST routes
       if (req.method === 'POST') {
+        // Check for API key before processing any API calls
+        const apiKeyConfigured = !!(process.env.VOYAGE_API_KEY || getConfigValue('apiKey'));
+        if (!apiKeyConfigured) {
+          res.writeHead(401, { 'Content-Type': 'application/json' });
+          res.end(JSON.stringify({
+            error: 'No API key configured. Run: vai config set api-key <your-key>',
+            code: 'NO_API_KEY',
+          }));
+          return;
+        }
+
         const body = await readBody(req);
         let parsed;
         try {

package/src/lib/explanations.js

@@ -816,7 +816,10 @@ const concepts = {
       'https://arxiv.org/abs/2203.02053',
       'https://blog.voyageai.com/2024/11/12/voyage-multimodal-3/',
     ],
-    tryIt: [],
+    tryIt: [
+      'vai explain multimodal-embeddings',
+      'vai explain cross-modal-search',
+    ],
   },
 
   'multimodal-rag': {

package/src/lib/telemetry.js

@@ -0,0 +1,72 @@
+'use strict';
+
+/**
+ * Anonymous telemetry for Vai CLI.
+ * Sends minimal, non-identifying data to help improve the tool.
+ * Respects: VAI_TELEMETRY=0 env var or `vai config set telemetry false`
+ *
+ * No API keys, no file contents, no PII. Just:
+ * - command name, version, platform, locale
+ */
+
+const TELEMETRY_URL = 'https://vai.mlynn.org/api/telemetry';
+const TIMEOUT_MS = 3000;
+
+/**
+ * Check if telemetry is enabled.
+ * Disabled by: VAI_TELEMETRY=0, or config telemetry=false
+ */
+function isEnabled() {
+  // Env var override (highest priority)
+  if (process.env.VAI_TELEMETRY === '0' || process.env.VAI_TELEMETRY === 'false') {
+    return false;
+  }
+  // Config file check
+  try {
+    const { getConfigValue } = require('./config');
+    const val = getConfigValue('telemetry');
+    if (val === false || val === 'false') return false;
+  } catch { /* config not available, default to enabled */ }
+  return true;
+}
+
+/**
+ * Send a telemetry event. Fire-and-forget, never throws.
+ * @param {string} event - Event name (e.g., 'cli_command')
+ * @param {object} [extra] - Additional fields
+ */
+function send(event, extra = {}) {
+  if (!isEnabled()) return;
+
+  const { getVersion } = require('./banner');
+
+  const payload = JSON.stringify({
+    event,
+    version: getVersion(),
+    context: 'cli',
+    platform: `${process.platform}-${process.arch}`,
+    locale: Intl.DateTimeFormat().resolvedOptions().locale || undefined,
+    ...extra,
+  });
+
+  try {
+    // Use native https, fire-and-forget
+    const { request } = require('https');
+    const url = new URL(TELEMETRY_URL);
+    const req = request({
+      hostname: url.hostname,
+      path: url.pathname,
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Content-Length': Buffer.byteLength(payload),
+      },
+      timeout: TIMEOUT_MS,
+    });
+    req.on('error', () => {}); // swallow
+    req.on('timeout', () => req.destroy());
+    req.end(payload);
+  } catch { /* telemetry should never break the CLI */ }
+}
+
+module.exports = { send, isEnabled };

package/src/playground/index.html

@@ -141,6 +141,11 @@ body {
   padding: 0 4px;
 }
 .update-banner-dismiss:hover { color: var(--text); }
+.update-progress { display: flex; align-items: center; gap: 8px; flex: 1; }
+.update-progress-bar { flex: 1; height: 6px; background: rgba(255,255,255,0.15); border-radius: 3px; overflow: hidden; }
+[data-theme="light"] .update-progress-bar { background: rgba(0,0,0,0.1); }
+.update-progress-fill { height: 100%; background: var(--accent); border-radius: 3px; transition: width 0.3s ease; width: 0%; }
+.update-progress-label { font-size: 12px; font-family: var(--mono); color: var(--accent); min-width: 40px; text-align: right; }
 
 /* ── Onboarding Walkthrough ── */
 .onboarding-overlay {
@@ -357,6 +362,12 @@ body {
   align-items: center;
   gap: 10px;
 }
+body:not(.is-electron) .sidebar-drag-region {
+  height: auto;
+  min-height: auto;
+  padding-top: 16px;
+  padding-bottom: 12px;
+}
 
 .sidebar-logo {
   width: 28px;
@@ -372,8 +383,27 @@ body {
   color: var(--accent-text);
   white-space: nowrap;
   letter-spacing: -0.2px;
+  flex: 1;
 }
 
+.sidebar-settings-btn {
+  -webkit-app-region: no-drag;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--text-muted);
+  padding: 4px;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.15s;
+  flex-shrink: 0;
+}
+.sidebar-settings-btn:hover { color: var(--text); background: rgba(255,255,255,0.06); }
+.sidebar-settings-btn.active { color: var(--accent); }
+[data-theme="light"] .sidebar-settings-btn:hover { background: rgba(0,0,0,0.04); }
+
 .sidebar-nav {
   flex: 1;
   overflow-y: auto;
@@ -537,6 +567,10 @@ body {
   flex-shrink: 0;
 }
 
+/* Web mode: hide Electron-only elements */
+body:not(.is-electron) .content-drag-region { display: none; }
+body:not(.is-electron) .update-banner { display: none !important; }
+
 /* Main */
 .main { padding: 24px; max-width: 1200px; margin: 0 auto; width: 100%; }
 
@@ -2261,7 +2295,7 @@ select:focus { outline: none; border-color: var(--accent); }
     <path fill-rule="evenodd" clip-rule="evenodd" d="M2 3C2 2.44772 2.44772 2 3 2H13C13.5523 2 14 2.44772 14 3V13C14 13.5523 13.5523 14 13 14H3C2.44772 14 2 13.5523 2 13V3ZM4 4V9.586L5.793 7.793C6.183 7.403 6.817 7.403 7.207 7.793L8.5 9.086L10.293 7.293C10.683 6.903 11.317 6.903 11.707 7.293L12 7.586V4H4ZM12 10.414L10.5 8.914L8.207 11.207C7.817 11.597 7.183 11.597 6.793 11.207L5.5 9.914L4 11.414V12H12V10.414ZM10 5.5C10 6.328 10.672 7 11.5 7C11.776 7 12 6.776 12 6.5V5C12 4.724 11.776 4.5 11.5 4.5H10.5C10.224 4.5 10 4.724 10 5V5.5Z" fill="currentColor"/>
   </symbol>
   <symbol id="lg-config" viewBox="0 0 16 16">
-    <path d="M12.7 2.56989C12.41 2.56989 12.17 2.80989 12.17 3.09989V4.34989L11.32 3.49989C9.21 1.39989 5.75 1.51989 3.78 3.75989C2.65 5.03989 2.23 6.82989 2.68 8.48989C3.24 10.5299 4.98 12.0099 7.08 12.2299L8.1 12.3399C8.42 13.2799 9.3 13.9499 10.34 13.9499C11.65 13.9499 12.71 12.8899 12.71 11.5799C12.71 10.2699 11.65 9.20989 10.34 9.20989C9.14 9.20989 8.16 10.0999 8 11.2599L7.19 11.1799C5.53 11.0099 4.14 9.82989 3.7 8.21989C3.34 6.90989 3.67 5.48989 4.58 4.46989C6.15 2.68989 8.9 2.59989 10.57 4.26989L11.42 5.11989H10.17C9.88 5.11989 9.64 5.35989 9.64 5.64989C9.64 5.93989 9.88 6.17989 10.17 6.17989H12.71C13 6.17989 13.24 5.93989 13.24 5.64989V3.09989C13.24 2.80989 13 2.56989 12.71 2.56989H12.7ZM10.34 10.3099C11.04 10.3099 11.6 10.8799 11.6 11.5699C11.6 12.2599 11.03 12.8299 10.34 12.8299C9.65 12.8299 9.08 12.2599 9.08 11.5699C9.08 10.8799 9.65 10.3099 10.34 10.3099Z" fill="currentColor"/>
+    <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>
 </svg>
 
@@ -2272,6 +2306,7 @@ select:focus { outline: none; border-color: var(--accent); }
   <div class="sidebar-drag-region">
     <img class="sidebar-logo" id="sidebarLogo" src="/icons/dark/64.png" alt="Vai">
     <span class="sidebar-title">Vai</span>
+    <button class="sidebar-settings-btn" data-tab="settings" title="Settings"><svg width="16" height="16" viewBox="0 0 16 16"><use href="#lg-config"/></svg></button>
   </div>
   <nav class="sidebar-nav">
     <div class="sidebar-nav-group">
@@ -2288,8 +2323,6 @@ select:focus { outline: none; border-color: var(--accent); }
       <button class="tab-btn" data-tab="explore"><span class="tab-btn-icon"><svg><use href="#lg-bulb"/></svg></span><span>Explore</span></button>
       <button class="tab-btn" data-tab="about"><span class="tab-btn-icon"><svg><use href="#lg-info"/></svg></span><span>About</span></button>
     </div>
-    <div class="sidebar-nav-divider"></div>
-    <button class="tab-btn" data-tab="settings"><span class="tab-btn-icon"><svg><use href="#lg-config"/></svg></span><span>Settings</span></button>
   </nav>
   <div class="sidebar-footer">
     <div style="display:flex;align-items:center;gap:8px;justify-content:space-between;">
@@ -2308,11 +2341,16 @@ select:focus { outline: none; border-color: var(--accent); }
   <div class="content-drag-region"></div>
   <div class="update-banner" id="updateBanner">
     <span class="update-banner-icon">🚀</span>
-    <span class="update-banner-text">
+    <span class="update-banner-text" id="updateBannerText">
       <strong>Vai <span id="updateVersion"></span></strong> is available.
       You're on <span id="currentVersion"></span>.
     </span>
-    <button class="update-banner-btn" id="updateDownloadBtn">Download</button>
+    <div class="update-progress" id="updateProgress" style="display:none;">
+      <div class="update-progress-bar"><div class="update-progress-fill" id="updateProgressFill"></div></div>
+      <span class="update-progress-label" id="updateProgressLabel">0%</span>
+    </div>
+    <button class="update-banner-btn" id="updateDownloadBtn">Download &amp; Install</button>
+    <button class="update-banner-btn" id="updateInstallBtn" style="display:none;">Restart &amp; Update</button>
     <button class="update-banner-dismiss" id="updateDismissBtn" title="Dismiss">×</button>
   </div>
   <div class="main">
@@ -2966,8 +3004,20 @@ Reranking models rescore initial search results to improve relevance ordering.</
           <strong>⚡ Embed</strong> — Generate vector embeddings for any text<br>
           <strong>⚖️ Compare</strong> — Measure similarity with cosine, dot product &amp; euclidean distance<br>
           <strong>🔍 Search</strong> — Semantic search with optional reranking<br>
+          <strong>🔮 Multimodal</strong> — Compare images and text in the same vector space with voyage-multimodal-3.5<br>
           <strong>⏱ Benchmark</strong> — Compare model latency, ranking quality, and costs<br>
-          <strong>📚 Explore</strong> — Learn about embeddings, vector search, RAG, and more
+          <strong>📚 Explore</strong> — Learn about embeddings, vector search, multimodal, RAG, and more
+        </div>
+      </div>
+
+      <div class="about-section">
+        <div class="about-section-title">Supported Models</div>
+        <div class="about-text" style="font-size:13px;">
+          <strong style="color:var(--accent);">Text Embeddings</strong> — voyage-4-large, voyage-4, voyage-4-lite, voyage-code-3, voyage-finance-2, voyage-law-2<br>
+          <strong style="color:var(--accent);">Multimodal</strong> — voyage-multimodal-3.5 (text + images + video in one vector space)<br>
+          <strong style="color:var(--accent);">Reranking</strong> — rerank-2.5, rerank-2.5-lite<br><br>
+          All models are accessible via the <a href="https://docs.voyageai.com/" target="_blank" style="color:var(--blue);">Voyage AI API</a>
+          or through <a href="https://www.mongodb.com/docs/atlas/atlas-vector-search/" target="_blank" style="color:var(--blue);">MongoDB Atlas Vector Search</a>.
         </div>
       </div>
 
@@ -2983,8 +3033,20 @@ Reranking models rescore initial search results to improve relevance ordering.</
       </div>
     </div>
 
+    <div class="card" style="margin-top:16px;">
+      <div class="about-section" style="padding-bottom:0;">
+        <div class="about-section-title">What's New</div>
+        <div class="about-text" style="font-size:13px;">
+          <strong>v1.2</strong> — Multimodal tab (image ↔ text similarity, cross-modal gallery search),
+          4 new Explore concepts (multimodal embeddings, cross-modal search, modality gap, multimodal RAG),
+          auto-update with in-app download &amp; restart, and a hidden easter egg 🕹️
+        </div>
+      </div>
+    </div>
+
     <div style="text-align:center;margin-top:16px;font-size:12px;color:var(--text-muted);">
       Made with ☕ and curiosity · <a href="https://github.com/mrlynn/voyageai-cli" target="_blank" style="color:var(--text-dim);">Source on GitHub</a>
+      · <a href="https://github.com/mrlynn/voyageai-cli/releases" target="_blank" style="color:var(--text-dim);">Releases</a>
     </div>
   </div>
 </div>
@@ -3191,6 +3253,15 @@ Reranking models rescore initial search results to improve relevance ordering.</
           <button class="settings-reset-btn" id="settingsClearCache">Clear All Data</button>
         </div>
       </div>
+      <div class="settings-row">
+        <div class="settings-label">
+          <span class="settings-label-text">Anonymous Usage Analytics</span>
+          <span class="settings-label-hint">Help improve Vai by sharing anonymous usage data (version, platform, features used). No API keys or personal data.</span>
+        </div>
+        <div class="settings-control">
+          <button class="settings-toggle active" id="settingsTelemetry" type="button"></button>
+        </div>
+      </div>
     </div>
 
     <!-- Version Info (visible in Electron only) -->
@@ -3313,24 +3384,85 @@ let rerankModels = [];
 let lastEmbedding = null;
 
 // ── Init ──
+// ── Anonymous Telemetry ──
+const TELEMETRY_URL = 'https://vai.mlynn.org/api/telemetry';
+const TELEMETRY_KEY = 'vai-telemetry-enabled';
+
+function isTelemetryEnabled() {
+  const stored = localStorage.getItem(TELEMETRY_KEY);
+  return stored === null ? true : stored === 'true'; // default on
+}
+
+function sendTelemetry(event, extra = {}) {
+  if (!isTelemetryEnabled()) return;
+  try {
+    const isElectron = !!(window.vai && window.vai.isElectron);
+    const payload = {
+      event,
+      version: document.getElementById('appVersionLabel')?.textContent?.replace('v','') || 'web',
+      context: isElectron ? 'electron' : 'web',
+      platform: navigator.platform || undefined,
+      locale: navigator.language || undefined,
+      ...extra,
+    };
+    // Use sendBeacon for fire-and-forget (survives page unload)
+    if (navigator.sendBeacon) {
+      navigator.sendBeacon(TELEMETRY_URL, JSON.stringify(payload));
+    } else {
+      fetch(TELEMETRY_URL, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(payload),
+        keepalive: true,
+      }).catch(() => {});
+    }
+  } catch { /* telemetry should never break the app */ }
+}
+
+function initTelemetryToggle() {
+  const toggle = document.getElementById('settingsTelemetry');
+  if (!toggle) return;
+  const enabled = isTelemetryEnabled();
+  toggle.classList.toggle('active', enabled);
+  toggle.addEventListener('click', () => {
+    const nowEnabled = !toggle.classList.contains('active');
+    toggle.classList.toggle('active', nowEnabled);
+    localStorage.setItem(TELEMETRY_KEY, String(nowEnabled));
+    showSettingsSaved();
+  });
+}
+
 async function init() {
+  // Mark body for Electron vs Web styling
+  if (window.vai && window.vai.isElectron) {
+    document.body.classList.add('is-electron');
+  }
   setupTabs();
   await loadConfig();
   await Promise.all([loadModels(), loadConcepts()]);
   populateModelSelects();
   buildExploreCards();
+
+  // Telemetry
+  initTelemetryToggle();
+  sendTelemetry('app_launch');
 }
 
 // ── Tabs ──
 function setupTabs() {
   document.querySelectorAll('.tab-btn').forEach(btn => {
     btn.addEventListener('click', () => {
-      document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
-      document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));
-      btn.classList.add('active');
-      document.getElementById('tab-' + btn.dataset.tab).classList.add('active');
+      switchTab(btn.dataset.tab);
     });
   });
+
+  // Settings cog in header
+  const settingsCog = document.querySelector('.sidebar-settings-btn');
+  if (settingsCog) {
+    settingsCog.addEventListener('click', () => {
+      switchTab(settingsCog.dataset.tab);
+    });
+  }
 }
 
 function switchTab(tab) {
@@ -3340,6 +3472,11 @@ function switchTab(tab) {
   document.querySelectorAll('.tab-panel').forEach(p => {
     p.classList.toggle('active', p.id === 'tab-' + tab);
   });
+  // Sync settings cog highlight
+  const settingsBtn = document.querySelector('.sidebar-settings-btn');
+  if (settingsBtn) settingsBtn.classList.toggle('active', tab === 'settings');
+  // Track tab views
+  sendTelemetry('tab_view', { tab });
 }
 // Expose globally so Electron main process can call it
 window.switchTab = switchTab;
@@ -3419,13 +3556,23 @@ function formatBytesUI(bytes) {
 }
 
 async function apiPost(url, body) {
-  const res = await fetch(url, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify(body),
-  });
+  let res;
+  try {
+    res = await fetch(url, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(body),
+    });
+  } catch (fetchErr) {
+    throw new Error('Failed to connect to server. Is the playground still running?');
+  }
   const data = await res.json();
-  if (!res.ok) throw new Error(data.error || data.detail || 'API error');
+  if (!res.ok) {
+    if (data.code === 'NO_API_KEY') {
+      throw new Error('🔑 No API key configured. Open Settings (⚙) to add your Voyage AI API key, or run: vai config set api-key <your-key>');
+    }
+    throw new Error(data.error || data.detail || 'API error');
+  }
   return data;
 }
 
@@ -3456,6 +3603,7 @@ window.doEmbed = async function() {
   hideError('embedError');
   const text = document.getElementById('embedInput').value.trim();
   if (!text) { showError('embedError', 'Enter some text to embed'); return; }
+  sendTelemetry('api_call', { endpoint: 'embed', model: document.getElementById('embedModel').value });
 
   setLoading('embedBtn', true);
   try {
@@ -3538,6 +3686,7 @@ function buildHeatmap(vec, container) {
 // ── Compare ──
 window.doCompare = async function() {
   hideError('compareError');
+  sendTelemetry('api_call', { endpoint: 'compare', model: document.getElementById('compareModel').value });
   const a = document.getElementById('compareA').value.trim();
   const b = document.getElementById('compareB').value.trim();
   if (!a || !b) { showError('compareError', 'Enter text in both fields'); return; }
@@ -3630,6 +3779,7 @@ window.doCompare = async function() {
 // ── Search ──
 window.doSearch = async function(withRerank) {
   hideError('searchError');
+  sendTelemetry('api_call', { endpoint: withRerank ? 'rerank' : 'search' });
   const query = document.getElementById('searchQuery').value.trim();
   const docsText = document.getElementById('searchDocs').value.trim();
   if (!query || !docsText) { showError('searchError', 'Enter a query and documents'); return; }
@@ -5095,15 +5245,12 @@ function checkForAppUpdate() {
   // Show version in sidebar + settings page
   window.vai.getVersion().then(v => {
     if (!v) return;
-    // v can be string (old) or { app, cli } (new)
     const appVer = typeof v === 'object' ? v.app : v;
     const cliVer = typeof v === 'object' ? v.cli : null;
 
-    // Sidebar label
     const label = document.getElementById('appVersionLabel');
     if (label && appVer) label.textContent = 'v' + appVer;
 
-    // Settings version section
     const section = document.getElementById('settingsVersionSection');
     const appBadge = document.getElementById('settingsAppVersion');
     const cliBadge = document.getElementById('settingsCliVersion');
@@ -5117,7 +5264,43 @@ function checkForAppUpdate() {
   const dismissed = localStorage.getItem(DISMISS_KEY);
   if (dismissed) {
     const dismissedAt = parseInt(dismissed, 10);
-    if (Date.now() - dismissedAt < 3600000) return; // 1 hour cooldown
+    if (Date.now() - dismissedAt < 3600000) return;
+  }
+
+  // Listen for real-time update events from electron-updater
+  if (window.vai.updates.onEvent) {
+    window.vai.updates.onEvent((data) => {
+      const banner = document.getElementById('updateBanner');
+      const progressWrap = document.getElementById('updateProgress');
+      const progressFill = document.getElementById('updateProgressFill');
+      const progressLabel = document.getElementById('updateProgressLabel');
+      const bannerText = document.getElementById('updateBannerText');
+      const downloadBtn = document.getElementById('updateDownloadBtn');
+      const installBtn = document.getElementById('updateInstallBtn');
+
+      if (data.event === 'download-progress') {
+        const pct = Math.round(data.percent || 0);
+        progressFill.style.width = pct + '%';
+        const mbTransferred = (data.transferred / 1048576).toFixed(1);
+        const mbTotal = (data.total / 1048576).toFixed(1);
+        progressLabel.textContent = `${pct}% (${mbTransferred}/${mbTotal} MB)`;
+      }
+
+      if (data.event === 'update-downloaded') {
+        progressWrap.style.display = 'none';
+        bannerText.innerHTML = `<strong>Vai v${data.latestVersion}</strong> is ready to install.`;
+        bannerText.style.display = '';
+        downloadBtn.style.display = 'none';
+        installBtn.style.display = '';
+      }
+
+      if (data.event === 'update-error') {
+        progressWrap.style.display = 'none';
+        bannerText.innerHTML = `Update failed: ${data.message}. <a href="#" onclick="window.vai.updates.openRelease('https://github.com/mrlynn/voyageai-cli/releases');return false;" style="color:var(--accent);">Download manually</a>`;
+        bannerText.style.display = '';
+        downloadBtn.style.display = 'none';
+      }
+    });
   }
 
   window.vai.updates.check().then(result => {
@@ -5127,7 +5310,10 @@ function checkForAppUpdate() {
     const versionEl = document.getElementById('updateVersion');
     const currentEl = document.getElementById('currentVersion');
     const downloadBtn = document.getElementById('updateDownloadBtn');
+    const installBtn = document.getElementById('updateInstallBtn');
     const dismissBtn = document.getElementById('updateDismissBtn');
+    const bannerText = document.getElementById('updateBannerText');
+    const progressWrap = document.getElementById('updateProgress');
 
     if (!banner) return;
 
@@ -5136,7 +5322,24 @@ function checkForAppUpdate() {
     banner.classList.add('show');
 
     downloadBtn.addEventListener('click', () => {
-      window.vai.updates.openRelease(result.releaseUrl);
+      // Start auto-download
+      if (window.vai.updates.download) {
+        downloadBtn.style.display = 'none';
+        bannerText.style.display = 'none';
+        progressWrap.style.display = 'flex';
+        window.vai.updates.download().catch(() => {
+          // Fallback to manual download
+          window.vai.updates.openRelease(result.releaseUrl);
+        });
+      } else {
+        window.vai.updates.openRelease(result.releaseUrl);
+      }
+    });
+
+    installBtn.addEventListener('click', () => {
+      installBtn.textContent = 'Restarting...';
+      installBtn.disabled = true;
+      window.vai.updates.install();
     });
 
     dismissBtn.addEventListener('click', () => {
@@ -5466,6 +5669,7 @@ window.clearMultimodalImage = function() {
 
 window.doMultimodalCompare = async function() {
   hideError('mmError');
+  sendTelemetry('api_call', { endpoint: 'multimodal-compare', model: document.getElementById('mmModel').value });
   const text = document.getElementById('mmText').value.trim();
   if (!mmImageData) { showError('mmError', 'Upload an image first'); return; }
   if (!text) { showError('mmError', 'Enter text to compare against the image'); return; }
@@ -5617,6 +5821,7 @@ window.setMmSearchMode = function(mode) {
 
 window.doMultimodalSearch = async function() {
   hideError('mmSearchError');
+  sendTelemetry('api_call', { endpoint: 'multimodal-search', model: document.getElementById('mmModel').value });
 
   const corpusText = document.getElementById('mmCorpusText').value.trim();
   const textItems = corpusText ? corpusText.split('\n').map(t => t.trim()).filter(Boolean) : [];
@@ -5732,6 +5937,365 @@ init = async function() {
   initOnboarding();
 };
 
+// ── Start ──
+init();
+
+// ── 🕹️ Vector Space Invaders (Easter Egg) ──
+// Trigger: Konami code (↑↑↓↓←→←→BA) or 7 rapid clicks on sidebar logo
+(function initEasterEgg() {
+  const KONAMI = ['ArrowUp','ArrowUp','ArrowDown','ArrowDown','ArrowLeft','ArrowRight','ArrowLeft','ArrowRight','b','a'];
+  let konamiIdx = 0;
+  let logoClicks = [];
+
+  document.addEventListener('keydown', (e) => {
+    if (document.getElementById('vsiOverlay')?.style.display === 'flex') return;
+    if (e.key === KONAMI[konamiIdx]) { konamiIdx++; if (konamiIdx === KONAMI.length) { konamiIdx = 0; launchVSI(); } }
+    else { konamiIdx = 0; }
+  });
+
+  const logo = document.getElementById('sidebarLogo');
+  if (logo) {
+    logo.addEventListener('click', () => {
+      const now = Date.now();
+      logoClicks.push(now);
+      logoClicks = logoClicks.filter(t => now - t < 2000);
+      if (logoClicks.length >= 7) { logoClicks = []; launchVSI(); }
+    });
+  }
+
+  function launchVSI() {
+    const overlay = document.getElementById('vsiOverlay');
+    const canvas = document.getElementById('vsiCanvas');
+    if (!overlay || !canvas) return;
+    overlay.style.display = 'flex';
+    startVSI(canvas, () => { overlay.style.display = 'none'; });
+  }
+})();
+
+function startVSI(canvas, onExit) {
+  const ctx = canvas.getContext('2d');
+  const W = canvas.width = 600;
+  const H = canvas.height = 500;
+
+  // Ship
+  const ship = { x: W / 2, w: 40, h: 16, speed: 5 };
+  const bullets = [];
+  const particles = [];
+  const explosionTexts = [];
+
+  // Enemies — vectors descending
+  const VECTORS = [
+    '[.23,-.41]', '[.95, .12]', '[-.56,.78]',
+    '[.44,-.71]', '[.01,-.99]', '[-.88,.35]',
+    '[.67, .91]', '[-.12,.84]', '[.33, .33]',
+    '[.77,-.64]', '[-.45,.78]', '[.91,-.42]',
+  ];
+  const BOSS_VEC = 'CLIP-ViT-L/14-336';
+
+  let enemies = [];
+  let wave = 1;
+  let score = 0;
+  let lives = 3;
+  let gameOver = false;
+  let bossMode = false;
+  let boss = null;
+  let frame = 0;
+  let lastShot = 0;
+  let waveQueued = false;
+
+  const keys = {};
+  const keyDown = (e) => { keys[e.key] = true; if (['ArrowLeft','ArrowRight',' ','Escape'].includes(e.key)) e.preventDefault(); if (e.key === 'Escape') { cleanup(); onExit(); } };
+  const keyUp = (e) => { keys[e.key] = false; };
+  document.addEventListener('keydown', keyDown);
+  document.addEventListener('keyup', keyUp);
+
+  function cleanup() { document.removeEventListener('keydown', keyDown); document.removeEventListener('keyup', keyUp); gameOver = true; }
+
+  function spawnWave() {
+    enemies = [];
+    if (wave % 5 === 0) {
+      // Boss wave every 5 waves
+      bossMode = true;
+      boss = { x: W / 2, y: 50, w: 180, h: 30, hp: 10 + wave, maxHp: 10 + wave, dx: 2, text: BOSS_VEC };
+    } else {
+      bossMode = false;
+      boss = null;
+      const rows = Math.min(3, 1 + Math.floor(wave / 2));
+      const cols = Math.min(6, 3 + Math.floor(wave / 3));
+      for (let r = 0; r < rows; r++) {
+        for (let c = 0; c < cols; c++) {
+          enemies.push({
+            x: 60 + c * 90,
+            y: 40 + r * 40,
+            w: 78, h: 22,
+            hp: 1 + Math.floor(wave / 4),
+            text: VECTORS[(r * cols + c) % VECTORS.length],
+            dx: 1 + wave * 0.3,
+            dir: 1,
+          });
+        }
+      }
+    }
+  }
+
+  function shoot() {
+    if (frame - lastShot < 10) return;
+    lastShot = frame;
+    bullets.push({ x: ship.x, y: H - 40, dy: -7 });
+  }
+
+  function addExplosion(x, y, sim) {
+    const color = sim > 0.7 ? '#00ED64' : sim > 0.4 ? '#FFC010' : '#FF6960';
+    for (let i = 0; i < 8; i++) {
+      const angle = (Math.PI * 2 / 8) * i + Math.random() * 0.5;
+      const speed = 1.5 + Math.random() * 2;
+      particles.push({ x, y, dx: Math.cos(angle) * speed, dy: Math.sin(angle) * speed, life: 30, color });
+    }
+    explosionTexts.push({ x, y, text: sim.toFixed(2), life: 40, color });
+  }
+
+  function update() {
+    // Move ship
+    if (keys['ArrowLeft'] || keys['a'])  ship.x = Math.max(ship.w / 2, ship.x - ship.speed);
+    if (keys['ArrowRight'] || keys['d']) ship.x = Math.min(W - ship.w / 2, ship.x + ship.speed);
+    if (keys[' ']) shoot();
+
+    // Move bullets
+    for (let i = bullets.length - 1; i >= 0; i--) {
+      bullets[i].y += bullets[i].dy;
+      if (bullets[i].y < -10) bullets.splice(i, 1);
+    }
+
+    // Boss logic
+    if (bossMode && boss) {
+      boss.x += boss.dx;
+      if (boss.x < boss.w / 2 || boss.x > W - boss.w / 2) boss.dx *= -1;
+      // Boss drops enemy vectors periodically
+      if (frame % 60 === 0) {
+        enemies.push({ x: boss.x, y: boss.y + 30, w: 78, h: 22, hp: 1, text: VECTORS[frame % VECTORS.length], dx: 0, dir: 0, dropping: true, dy: 2 });
+      }
+      // Bullet-boss collision
+      for (let i = bullets.length - 1; i >= 0; i--) {
+        const b = bullets[i];
+        if (b.x > boss.x - boss.w / 2 && b.x < boss.x + boss.w / 2 && b.y > boss.y - boss.h / 2 && b.y < boss.y + boss.h / 2) {
+          boss.hp--;
+          bullets.splice(i, 1);
+          const sim = 0.1 + Math.random() * 0.3;
+          addExplosion(b.x, b.y, sim);
+          score += 50;
+          if (boss.hp <= 0) {
+            addExplosion(boss.x, boss.y, 0.99);
+            score += 500;
+            boss = null;
+            bossMode = false;
+            wave++;
+            waveQueued = true;
+            setTimeout(() => { waveQueued = false; spawnWave(); }, 1000);
+          }
+        }
+      }
+    }
+
+    // Move enemies
+    let edgeHit = false;
+    for (const e of enemies) {
+      if (e.dropping) {
+        e.y += e.dy || 2;
+      } else {
+        e.x += e.dx * e.dir;
+        if (e.x < 30 || e.x > W - 30) edgeHit = true;
+      }
+    }
+    if (edgeHit) {
+      for (const e of enemies) {
+        if (!e.dropping) { e.dir *= -1; e.y += 15; }
+      }
+    }
+
+    // Bullet-enemy collision
+    for (let i = bullets.length - 1; i >= 0; i--) {
+      for (let j = enemies.length - 1; j >= 0; j--) {
+        const b = bullets[i], e = enemies[j];
+        if (!b) break;
+        if (b.x > e.x - e.w / 2 && b.x < e.x + e.w / 2 && b.y > e.y - e.h / 2 && b.y < e.y + e.h / 2) {
+          e.hp--;
+          bullets.splice(i, 1);
+          const sim = 0.5 + Math.random() * 0.5;
+          addExplosion(b.x, b.y, sim);
+          if (e.hp <= 0) {
+            enemies.splice(j, 1);
+            score += 100;
+          }
+          break;
+        }
+      }
+    }
+
+    // Enemy reaching bottom = lose life
+    for (let i = enemies.length - 1; i >= 0; i--) {
+      if (enemies[i].y > H - 50) {
+        enemies.splice(i, 1);
+        lives--;
+        if (lives <= 0) gameOver = true;
+      }
+    }
+
+    // Next wave
+    if (!bossMode && enemies.length === 0 && !gameOver && !waveQueued) {
+      wave++;
+      waveQueued = true;
+      setTimeout(() => { waveQueued = false; spawnWave(); }, 800);
+    }
+
+    // Particles
+    for (let i = particles.length - 1; i >= 0; i--) {
+      const p = particles[i];
+      p.x += p.dx; p.y += p.dy; p.life--;
+      if (p.life <= 0) particles.splice(i, 1);
+    }
+    for (let i = explosionTexts.length - 1; i >= 0; i--) {
+      explosionTexts[i].y -= 0.5;
+      explosionTexts[i].life--;
+      if (explosionTexts[i].life <= 0) explosionTexts.splice(i, 1);
+    }
+  }
+
+  function draw() {
+    ctx.fillStyle = '#001E2B';
+    ctx.fillRect(0, 0, W, H);
+
+    // Stars
+    ctx.fillStyle = 'rgba(255,255,255,0.3)';
+    for (let i = 0; i < 40; i++) {
+      const sx = (i * 137 + frame * 0.1) % W;
+      const sy = (i * 97 + frame * 0.05) % H;
+      ctx.fillRect(sx, sy, 1, 1);
+    }
+
+    // Ship (triangle)
+    ctx.fillStyle = '#00ED64';
+    ctx.beginPath();
+    ctx.moveTo(ship.x, H - 40);
+    ctx.lineTo(ship.x - ship.w / 2, H - 24);
+    ctx.lineTo(ship.x + ship.w / 2, H - 24);
+    ctx.closePath();
+    ctx.fill();
+    // Ship label
+    ctx.fillStyle = '#00ED64';
+    ctx.font = '9px monospace';
+    ctx.textAlign = 'center';
+    ctx.fillText('query', ship.x, H - 14);
+
+    // Bullets
+    ctx.fillStyle = '#00ED64';
+    for (const b of bullets) {
+      ctx.fillRect(b.x - 1, b.y, 2, 8);
+    }
+
+    // Boss
+    if (boss) {
+      const hpPct = boss.hp / boss.maxHp;
+      ctx.fillStyle = hpPct > 0.5 ? '#FF6960' : '#FFC010';
+      ctx.strokeStyle = '#FF6960';
+      ctx.lineWidth = 2;
+      ctx.strokeRect(boss.x - boss.w / 2, boss.y - boss.h / 2, boss.w, boss.h);
+      ctx.fillStyle = '#FF6960';
+      ctx.font = 'bold 13px monospace';
+      ctx.textAlign = 'center';
+      ctx.fillText(boss.text, boss.x, boss.y + 5);
+      // HP bar
+      ctx.fillStyle = '#3D4F58';
+      ctx.fillRect(boss.x - boss.w / 2, boss.y - boss.h / 2 - 8, boss.w, 4);
+      ctx.fillStyle = '#FF6960';
+      ctx.fillRect(boss.x - boss.w / 2, boss.y - boss.h / 2 - 8, boss.w * hpPct, 4);
+    }
+
+    // Enemies
+    for (const e of enemies) {
+      ctx.fillStyle = 'rgba(61,79,88,0.6)';
+      ctx.fillRect(e.x - e.w / 2, e.y - e.h / 2, e.w, e.h);
+      ctx.strokeStyle = '#0498EC';
+      ctx.lineWidth = 1;
+      ctx.strokeRect(e.x - e.w / 2, e.y - e.h / 2, e.w, e.h);
+      ctx.fillStyle = '#E8EDEB';
+      ctx.font = '9px monospace';
+      ctx.textAlign = 'center';
+      ctx.fillText(e.text, e.x, e.y + 3);
+    }
+
+    // Particles
+    for (const p of particles) {
+      ctx.globalAlpha = p.life / 30;
+      ctx.fillStyle = p.color;
+      ctx.fillRect(p.x - 2, p.y - 2, 4, 4);
+    }
+    ctx.globalAlpha = 1;
+
+    // Explosion texts (similarity scores)
+    for (const et of explosionTexts) {
+      ctx.globalAlpha = et.life / 40;
+      ctx.fillStyle = et.color;
+      ctx.font = 'bold 14px monospace';
+      ctx.textAlign = 'center';
+      ctx.fillText(et.text, et.x, et.y);
+    }
+    ctx.globalAlpha = 1;
+
+    // HUD
+    ctx.fillStyle = '#E8EDEB';
+    ctx.font = '13px monospace';
+    ctx.textAlign = 'left';
+    ctx.fillText(`SCORE: ${score}`, 12, 20);
+    ctx.fillText(`WAVE: ${wave}`, 12, 38);
+    ctx.textAlign = 'right';
+    ctx.fillText('❤️'.repeat(lives), W - 12, 20);
+
+    // Title
+    ctx.fillStyle = '#00ED64';
+    ctx.font = 'bold 10px monospace';
+    ctx.textAlign = 'center';
+    ctx.fillText('VECTOR SPACE INVADERS', W / 2, H - 4);
+
+    // Game over
+    if (gameOver) {
+      ctx.fillStyle = 'rgba(0,30,43,0.8)';
+      ctx.fillRect(0, 0, W, H);
+      ctx.fillStyle = '#00ED64';
+      ctx.font = 'bold 28px monospace';
+      ctx.textAlign = 'center';
+      ctx.fillText('GAME OVER', W / 2, H / 2 - 30);
+      ctx.fillStyle = '#E8EDEB';
+      ctx.font = '16px monospace';
+      ctx.fillText(`Final Score: ${score}  |  Wave: ${wave}`, W / 2, H / 2 + 10);
+      ctx.fillStyle = '#889397';
+      ctx.font = '12px monospace';
+      ctx.fillText('Press SPACE to play again  |  ESC to exit', W / 2, H / 2 + 40);
+
+      if (keys[' ']) {
+        // Restart
+        score = 0; wave = 1; lives = 3; gameOver = false; waveQueued = false;
+        enemies = []; bullets.length = 0; particles.length = 0; explosionTexts.length = 0;
+        boss = null; bossMode = false; ship.x = W / 2;
+        spawnWave();
+      }
+    }
+  }
+
+  function loop() {
+    if (!document.getElementById('vsiOverlay') || document.getElementById('vsiOverlay').style.display === 'none') {
+      cleanup();
+      return;
+    }
+    frame++;
+    update();
+    draw();
+    requestAnimationFrame(loop);
+  }
+
+  spawnWave();
+  loop();
+}
+
 // ── Start ──
 init();
 })();
@@ -5815,5 +6379,10 @@ init();
     </p>
   </div>
 </div>
+<!-- 🕹️ Vector Space Invaders -->
+<div id="vsiOverlay" style="display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,30,43,0.92);z-index:99999;align-items:center;justify-content:center;flex-direction:column;gap:12px;">
+  <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>
 </body>
 </html>