voyageai-cli 1.22.0 → 1.23.0

package/src/playground/index.html

@@ -2058,6 +2058,330 @@ select:focus { outline: none; border-color: var(--accent); }
 .settings-api-key-missing { color: var(--warning); }
 .settings-row .settings-select, .settings-row .settings-input { text-align: right; }
 
+/* ── Settings two-column layout (Claude Desktop style) ── */
+.settings-layout {
+  display: flex;
+  height: 100%;
+  max-width: 960px;
+  margin: 0 auto;
+  gap: 0;
+}
+.settings-nav {
+  width: 200px;
+  min-width: 200px;
+  flex-shrink: 0;
+  padding: 24px 0;
+  border-right: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  position: sticky;
+  top: 0;
+  align-self: flex-start;
+}
+.settings-nav-header {
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--text);
+  padding: 0 16px 20px;
+  letter-spacing: -0.3px;
+}
+.settings-nav-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 10px 16px;
+  background: none;
+  border: none;
+  border-left: 3px solid transparent;
+  border-radius: 0 6px 6px 0;
+  color: var(--text-dim);
+  font-size: 13px;
+  font-weight: 500;
+  font-family: var(--font);
+  cursor: pointer;
+  transition: all 0.15s;
+  text-align: left;
+}
+.settings-nav-item:hover {
+  background: rgba(255,255,255,0.04);
+  color: var(--text);
+}
+[data-theme="light"] .settings-nav-item:hover {
+  background: rgba(0,30,43,0.04);
+}
+.settings-nav-item.active {
+  color: var(--accent);
+  border-left-color: var(--accent);
+  background: var(--accent-glow);
+}
+.settings-nav-item svg {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  color: inherit;
+}
+.settings-content {
+  flex: 1;
+  padding: 24px 32px;
+  overflow-y: auto;
+  max-width: 640px;
+}
+.settings-panel {
+  display: none;
+}
+.settings-panel.active {
+  display: block;
+}
+.settings-panel-header {
+  margin-bottom: 24px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid var(--border);
+}
+.settings-panel-title {
+  font-size: 22px;
+  font-weight: 700;
+  color: var(--text);
+  margin: 0 0 4px;
+  letter-spacing: -0.3px;
+}
+.settings-panel-subtitle {
+  font-size: 14px;
+  color: var(--text-dim);
+  margin: 0;
+  font-weight: 500;
+}
+/* Settings origin/provenance badge */
+.settings-origin {
+  display: inline-flex;
+  align-items: center;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  padding: 2px 7px;
+  border-radius: 4px;
+  margin-left: 6px;
+  white-space: nowrap;
+  vertical-align: middle;
+  line-height: 1;
+}
+.settings-origin:empty { display: none; }
+.settings-origin.origin-env {
+  background: rgba(4,152,236,0.12);
+  color: #0497EC;
+}
+[data-theme="light"] .settings-origin.origin-env {
+  background: rgba(4,120,190,0.10);
+  color: #016BF8;
+}
+.settings-origin.origin-config {
+  background: rgba(180,90,242,0.12);
+  color: #B45AF2;
+}
+[data-theme="light"] .settings-origin.origin-config {
+  background: rgba(140,60,200,0.10);
+  color: #7B3DB5;
+}
+.settings-origin.origin-project {
+  background: rgba(0,237,100,0.12);
+  color: var(--accent);
+}
+[data-theme="light"] .settings-origin.origin-project {
+  background: rgba(0,163,92,0.10);
+  color: #00A35C;
+}
+.settings-origin.origin-default {
+  background: rgba(136,147,151,0.12);
+  color: var(--text-muted);
+}
+/* Chat not-configured state */
+.chat-not-configured {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 48px 24px;
+  text-align: center;
+  color: var(--text-dim);
+  font-size: 14px;
+}
+.chat-not-configured-icon {
+  font-size: 40px;
+  opacity: 0.5;
+}
+.chat-not-configured .btn {
+  margin-top: 8px;
+  background: var(--accent);
+  color: var(--bg);
+  border: none;
+  padding: 8px 20px;
+  border-radius: var(--radius);
+  font-weight: 600;
+  font-size: 13px;
+  cursor: pointer;
+  font-family: var(--font);
+}
+.chat-not-configured .btn:hover {
+  filter: brightness(1.1);
+}
+/* Responsive: collapse settings nav on small screens */
+@media (max-width: 768px) {
+  .settings-layout {
+    flex-direction: column;
+  }
+  .settings-nav {
+    width: 100%;
+    min-width: 100%;
+    flex-direction: row;
+    overflow-x: auto;
+    border-right: none;
+    border-bottom: 1px solid var(--border);
+    padding: 12px 8px;
+    gap: 4px;
+    position: static;
+  }
+  .settings-nav-header { display: none; }
+  .settings-nav-item {
+    border-left: none;
+    border-bottom: 2px solid transparent;
+    border-radius: 6px;
+    padding: 8px 12px;
+    white-space: nowrap;
+    font-size: 12px;
+  }
+  .settings-nav-item.active {
+    border-left-color: transparent;
+    border-bottom-color: var(--accent);
+  }
+  .settings-content { padding: 16px; }
+}
+
+/* ── Chat Tab ── */
+.chat-container {
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - 140px);
+  max-width: 900px;
+  margin: 0 auto;
+}
+.chat-messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.chat-message {
+  max-width: 85%;
+  padding: 12px 16px;
+  border-radius: 12px;
+  line-height: 1.6;
+  font-size: 14px;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.chat-message.user {
+  align-self: flex-end;
+  background: var(--accent);
+  color: #fff;
+  border-bottom-right-radius: 4px;
+}
+.chat-message.assistant {
+  align-self: flex-start;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-bottom-left-radius: 4px;
+}
+.chat-message.system-msg {
+  align-self: center;
+  background: none;
+  color: var(--text-muted);
+  font-size: 12px;
+  padding: 4px 8px;
+}
+.chat-sources {
+  margin-top: 8px;
+  padding-top: 8px;
+  border-top: 1px solid var(--border);
+  font-size: 12px;
+  color: var(--text-muted);
+}
+.chat-sources summary { cursor: pointer; }
+.chat-sources ul { margin: 4px 0 0 16px; padding: 0; }
+.chat-sources li { margin: 2px 0; }
+.chat-input-area {
+  padding: 12px 16px;
+  border-top: 1px solid var(--border);
+  display: flex;
+  gap: 8px;
+  align-items: flex-end;
+}
+.chat-input {
+  flex: 1;
+  padding: 10px 14px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--bg-input);
+  color: var(--text);
+  font-size: 14px;
+  font-family: inherit;
+  resize: none;
+  min-height: 40px;
+  max-height: 120px;
+  outline: none;
+}
+.chat-input:focus { border-color: var(--accent); }
+.chat-send-btn {
+  padding: 10px 20px;
+  background: var(--accent);
+  color: #fff;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 600;
+}
+.chat-send-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+.chat-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 16px;
+  border-bottom: 1px solid var(--border);
+  font-size: 13px;
+  color: var(--text-muted);
+}
+.chat-header-status { display: flex; gap: 8px; align-items: center; }
+.chat-header-status span { opacity: 0.7; }
+.chat-config-toggle {
+  background: none; border: none; color: var(--text-muted);
+  cursor: pointer; padding: 4px 8px; border-radius: 4px; font-size: 14px;
+  display: flex; align-items: center; gap: 4px;
+}
+.chat-config-toggle:hover { background: rgba(255,255,255,0.06); color: var(--text); }
+[data-theme="light"] .chat-config-toggle:hover { background: rgba(0,0,0,0.04); }
+.chat-config-toggle.active { color: var(--accent); }
+/* chat-config-panel/bar removed — chat settings moved to Settings page */
+.chat-typing {
+  align-self: flex-start;
+  color: var(--text-muted);
+  font-size: 13px;
+  padding: 8px 16px;
+}
+.chat-typing::after {
+  content: '';
+  animation: chatDots 1.4s infinite;
+}
+@keyframes chatDots {
+  0%, 20% { content: '.'; }
+  40% { content: '..'; }
+  60%, 100% { content: '...'; }
+}
+
 /* ── Multimodal Tab ── */
 .mm-grid {
   display: grid;
@@ -2296,7 +2620,7 @@ select:focus { outline: none; border-color: var(--accent); }
   .mm-gallery-grid { grid-template-columns: repeat(3, 1fr); }
   .compare-grid, .search-results { grid-template-columns: 1fr; }
   .sidebar { width: 56px; min-width: 56px; }
-  .sidebar-title, .status-label { display: none; }
+  .sidebar-title, .status-label, .sidebar-bug-label { display: none; }
   .tab-btn { justify-content: center; padding: 10px; }
   .tab-btn span:not(.tab-btn-icon) { display: none; }
   .main { padding: 16px; }
@@ -2342,6 +2666,18 @@ select:focus { outline: none; border-color: var(--accent); }
   <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>
+  <symbol id="lg-palette" viewBox="0 0 16 16">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15C8.55228 15 9 14.5523 9 14V12.5C9 11.6716 9.67157 11 10.5 11H12C13.6569 11 15 9.65685 15 8C15 4.13401 11.866 1 8 1ZM4.5 9C5.32843 9 6 8.32843 6 7.5C6 6.67157 5.32843 6 4.5 6C3.67157 6 3 6.67157 3 7.5C3 8.32843 3.67157 9 4.5 9ZM7 5.5C7 6.32843 6.32843 7 5.5 7C4.67157 7 4 6.32843 4 5.5C4 4.67157 4.67157 4 5.5 4C6.32843 4 7 4.67157 7 5.5ZM9.5 6C10.3284 6 11 5.32843 11 4.5C11 3.67157 10.3284 3 9.5 3C8.67157 3 8 3.67157 8 4.5C8 5.32843 8.67157 6 9.5 6ZM13 7.5C13 8.32843 12.3284 9 11.5 9C10.6716 9 10 8.32843 10 7.5C10 6.67157 10.6716 6 11.5 6C12.3284 6 13 6.67157 13 7.5Z" fill="currentColor"/>
+  </symbol>
+  <symbol id="lg-cube" viewBox="0 0 16 16">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.35 1.18a.75.75 0 0 0-.7 0l-6 3.25A.75.75 0 0 0 1.25 5v6a.75.75 0 0 0 .4.66l6 3.25a.75.75 0 0 0 .7 0l6-3.25a.75.75 0 0 0 .4-.66V5a.75.75 0 0 0-.4-.66l-6-3.16zM8 3.2 3.47 5.65 8 7.82l4.53-2.17L8 3.2zM2.75 6.8v3.82L7.25 12.8V8.97L2.75 6.8zm5.5 6 4.5-2.18V6.8L8.25 8.97V12.8z" fill="currentColor"/>
+  </symbol>
+  <symbol id="lg-chat" viewBox="0 0 16 16">
+    <path d="M2 2h12v9H5l-3 3V2z" fill="none" stroke="currentColor" stroke-width="1.5"/>
+  </symbol>
+  <symbol id="lg-shield" viewBox="0 0 16 16">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.35 1.18a.75.75 0 0 0-.7 0l-5 2.7A.75.75 0 0 0 2.25 4.5V8c0 2.9 2.1 5.5 5.5 6.95a.75.75 0 0 0 .5 0C11.65 13.5 13.75 10.9 13.75 8V4.5a.75.75 0 0 0-.4-.62l-5-2.7zM8 3.2 3.75 5.5V8c0 2.2 1.6 4.2 4.25 5.45C10.65 12.2 12.25 10.2 12.25 8V5.5L8 3.2z" fill="currentColor"/>
+  </symbol>
 </svg>
 
 <div class="app-shell">
@@ -2361,6 +2697,7 @@ select:focus { outline: none; border-color: var(--accent); }
       <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>
+      <button class="tab-btn" data-tab="chat" role="tab" aria-selected="false" aria-controls="tab-chat" id="tab-btn-chat"><span class="tab-btn-icon" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 16 16"><path d="M2 2h12v9H5l-3 3V2z" fill="none" stroke="currentColor" stroke-width="1.5"/></svg></span><span>Chat</span></button>
     </div>
     <div class="sidebar-nav-divider"></div>
     <div class="sidebar-nav-group" role="tablist" aria-label="Learn">
@@ -2378,7 +2715,13 @@ select:focus { outline: none; border-color: var(--accent); }
       </div>
       <button class="theme-toggle" id="themeToggle" title="Toggle light/dark mode">🌙</button>
     </div>
-    <div id="appVersionLabel" style="font-size:10px;color:var(--text-muted);text-align:center;"></div>
+    <div style="display:flex;align-items:center;justify-content:space-between;">
+      <div id="appVersionLabel" style="font-size:10px;color:var(--text-muted);"></div>
+      <button class="sidebar-bug-link" id="bugButton" title="Report a Bug">
+        <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="8" cy="9" r="4.5"/><path d="M5.5 5.5L3 3M10.5 5.5L13 3M3 9H1M15 9h-2M5.5 12.5L4 15M10.5 12.5L12 15"/></svg>
+        <span class="sidebar-bug-label">Bug</span>
+      </button>
+    </div>
   </div>
 </aside>
 
@@ -3169,6 +3512,35 @@ Reranking models rescore initial search results to improve relevance ordering.</
 
 </div>
 
+<!-- ========== CHAT TAB ========== -->
+<div class="tab-panel" id="tab-chat" role="tabpanel" aria-labelledby="tab-btn-chat" tabindex="0">
+  <div class="chat-container">
+    <div class="chat-header">
+      <div class="chat-header-status" id="chatHeaderStatus">
+        <span id="chatStatusProvider">No provider</span>
+        <span>·</span>
+        <span id="chatStatusDb">No database</span>
+      </div>
+      <button class="chat-config-toggle" id="chatOpenSettings" onclick="openChatSettings()" title="Configure in Settings">
+        <svg width="14" height="14" viewBox="0 0 16 16"><use href="#lg-config"/></svg>
+        Configure
+      </button>
+    </div>
+    <div class="chat-not-configured" id="chatNotConfigured" style="display:none;">
+      <div class="chat-not-configured-icon">💬</div>
+      <p>Chat requires an LLM provider and database to be configured.</p>
+      <button class="btn" onclick="openChatSettings()">Open Chat Settings</button>
+    </div>
+    <div class="chat-messages" id="chatMessages">
+      <div class="chat-message system-msg">Chat with your knowledge base. Click <strong>Configure</strong> above to adjust your LLM provider and database.</div>
+    </div>
+    <div class="chat-input-area">
+      <textarea class="chat-input" id="chatInput" placeholder="Ask a question about your documents..." rows="1" onkeydown="chatInputKeydown(event)"></textarea>
+      <button class="chat-send-btn" id="chatSendBtn" onclick="sendChatMessage()">Send</button>
+    </div>
+  </div>
+</div>
+
 <!-- ========== ABOUT TAB ========== -->
 <div class="tab-panel" id="tab-about" role="tabpanel" aria-labelledby="tab-btn-about" tabindex="0">
   <div class="about-container">
@@ -3467,213 +3839,354 @@ Reranking models rescore initial search results to improve relevance ordering.</
 
 <!-- ========== SETTINGS TAB ========== -->
 <div class="tab-panel" id="tab-settings">
-  <div class="settings-container">
-    <div class="page-header">
-      <h2 class="page-header-title">Settings</h2>
-      <p class="page-header-subtitle">Configure appearance, models, and API access</p>
-    </div>
+  <div class="settings-layout">
+    <!-- Settings left nav -->
+    <nav class="settings-nav">
+      <div class="settings-nav-header">Settings</div>
+      <button class="settings-nav-item active" data-settings-section="general">
+        <svg width="16" height="16" viewBox="0 0 16 16"><use href="#lg-config"/></svg>
+        <span>General</span>
+      </button>
+      <button class="settings-nav-item" data-settings-section="appearance">
+        <svg width="16" height="16" viewBox="0 0 16 16"><use href="#lg-palette"/></svg>
+        <span>Appearance</span>
+      </button>
+      <button class="settings-nav-item" data-settings-section="models">
+        <svg width="16" height="16" viewBox="0 0 16 16"><use href="#lg-cube"/></svg>
+        <span>Models</span>
+      </button>
+      <button class="settings-nav-item" data-settings-section="chat">
+        <svg width="16" height="16" viewBox="0 0 16 16"><use href="#lg-chat"/></svg>
+        <span>Chat</span>
+      </button>
+      <button class="settings-nav-item" data-settings-section="benchmark">
+        <svg width="16" height="16" viewBox="0 0 16 16"><use href="#lg-gauge"/></svg>
+        <span>Benchmark</span>
+      </button>
+      <button class="settings-nav-item" data-settings-section="privacy">
+        <svg width="16" height="16" viewBox="0 0 16 16"><use href="#lg-shield"/></svg>
+        <span>Data &amp; Privacy</span>
+      </button>
+    </nav>
 
-    <div class="settings-section">
-      <div class="settings-section-title">Appearance</div>
-      <div class="settings-row">
-        <div class="settings-label">
-          <span class="settings-label-text">Theme</span>
-          <span class="settings-label-hint">Controls the color scheme of the interface</span>
-        </div>
-        <div class="settings-control">
-          <select class="settings-select" id="settingsTheme">
-            <option value="dark">Dark</option>
-            <option value="light">Light</option>
-          </select>
-        </div>
-      </div>
-      <div class="settings-row">
-        <div class="settings-label">
-          <span class="settings-label-text">Vector Heatmap Colors</span>
-          <span class="settings-label-hint">Color palette for embedding visualizations</span>
-        </div>
-        <div class="settings-control" style="display:flex;align-items:center;gap:8px;">
-          <select class="settings-select" id="settingsHeatmap">
-            <option value="viridis">Viridis</option>
-            <option value="plasma">Plasma</option>
-            <option value="inferno">Inferno</option>
-            <option value="magma">Magma</option>
-            <option value="cividis">Cividis</option>
-            <option value="turbo">Turbo</option>
-          </select>
-          <span class="heatmap-preview" id="heatmapPreview"></span>
-        </div>
-      </div>
-    </div>
+    <!-- Settings content panels -->
+    <div class="settings-content">
 
-    <div class="settings-section">
-      <div class="settings-section-title">Models</div>
-      <div class="settings-row">
-        <div class="settings-label">
-          <span class="settings-label-text">Default Embedding Model</span>
-          <span class="settings-label-hint">Pre-selected model for Embed and Compare tabs</span>
-        </div>
-        <div class="settings-control">
-          <select class="settings-select" id="settingsDefaultModel"></select>
-        </div>
-      </div>
-      <div class="settings-row">
-        <div class="settings-label">
-          <span class="settings-label-text">Default Input Type</span>
-          <span class="settings-label-hint">Pre-selected input type for embedding requests</span>
+      <!-- ── General ── -->
+      <div class="settings-panel active" id="settings-general">
+        <div class="settings-panel-header">
+          <h3 class="settings-panel-title">General</h3>
+          <p class="settings-panel-subtitle">API access and connection settings</p>
         </div>
-        <div class="settings-control">
-          <select class="settings-select" id="settingsInputType">
-            <option value="document">document</option>
-            <option value="query">query</option>
-          </select>
+        <div class="settings-section">
+          <div class="settings-api-banner" id="settingsApiBanner">
+            <span class="settings-api-banner-icon" id="settingsApiBannerIcon">⚠️</span>
+            <span id="settingsApiKeyMsg">No API key configured — add your key below to get started.</span>
+          </div>
+          <div class="settings-row">
+            <div class="settings-label">
+              <span class="settings-label-text">API Key <span class="settings-origin" data-origin-key="apiKey"></span></span>
+              <span class="settings-label-hint">Encrypted via OS keychain · <a href="https://dash.voyageai.com" target="_blank" class="settings-key-link">🔑 Get a key</a></span>
+            </div>
+            <div class="settings-control" style="min-width:260px;">
+              <div class="settings-api-field">
+                <input type="password" id="settingsApiKey" placeholder="pa-..." autocomplete="off" spellcheck="false">
+                <button type="button" id="settingsApiKeyToggle" title="Show/hide key">👁</button>
+                <button type="button" id="settingsApiKeySave" class="save-btn" title="Save key">Save</button>
+              </div>
+            </div>
+          </div>
+          <div class="settings-row">
+            <div class="settings-label">
+              <span class="settings-label-text">API Base URL <span class="settings-origin" data-origin-key="apiBase"></span></span>
+              <span class="settings-label-hint">Override the default endpoint (leave empty for default)</span>
+            </div>
+            <div class="settings-control">
+              <input type="text" class="settings-input" id="settingsApiBase" placeholder="https://api.voyageai.com/v1">
+            </div>
+          </div>
+          <div class="settings-row">
+            <div class="settings-label">
+              <span class="settings-label-text">Request Timeout</span>
+              <span class="settings-label-hint">Max seconds to wait for API responses</span>
+            </div>
+            <div class="settings-control">
+              <select class="settings-select" id="settingsTimeout">
+                <option value="15">15 seconds</option>
+                <option value="30" selected>30 seconds</option>
+                <option value="60">60 seconds</option>
+                <option value="120">120 seconds</option>
+              </select>
+            </div>
+          </div>
         </div>
       </div>
-    </div>
 
-    <div class="settings-section">
-      <div class="settings-section-title">API</div>
-      <div class="settings-api-banner" id="settingsApiBanner">
-        <span class="settings-api-banner-icon" id="settingsApiBannerIcon">⚠️</span>
-        <span id="settingsApiKeyMsg">No API key configured — add your key below to get started.</span>
-      </div>
-      <div class="settings-row">
-        <div class="settings-label">
-          <span class="settings-label-text">API Key</span>
-          <span class="settings-label-hint">Encrypted via OS keychain · <a href="https://dash.voyageai.com" target="_blank" class="settings-key-link">🔑 Get a key</a></span>
+      <!-- ── Appearance ── -->
+      <div class="settings-panel" id="settings-appearance">
+        <div class="settings-panel-header">
+          <h3 class="settings-panel-title">Appearance</h3>
+          <p class="settings-panel-subtitle">Theme and visualization options</p>
         </div>
-        <div class="settings-control" style="min-width:260px;">
-          <div class="settings-api-field">
-            <input type="password" id="settingsApiKey" placeholder="pa-..." autocomplete="off" spellcheck="false">
-            <button type="button" id="settingsApiKeyToggle" title="Show/hide key">👁</button>
-            <button type="button" id="settingsApiKeySave" class="save-btn" title="Save key">Save</button>
+        <div class="settings-section">
+          <div class="settings-row">
+            <div class="settings-label">
+              <span class="settings-label-text">Theme</span>
+              <span class="settings-label-hint">Controls the color scheme of the interface</span>
+            </div>
+            <div class="settings-control">
+              <select class="settings-select" id="settingsTheme">
+                <option value="dark">Dark</option>
+                <option value="light">Light</option>
+              </select>
+            </div>
+          </div>
+          <div class="settings-row">
+            <div class="settings-label">
+              <span class="settings-label-text">Vector Heatmap Colors</span>
+              <span class="settings-label-hint">Color palette for embedding visualizations</span>
+            </div>
+            <div class="settings-control" style="display:flex;align-items:center;gap:8px;">
+              <select class="settings-select" id="settingsHeatmap">
+                <option value="viridis">Viridis</option>
+                <option value="plasma">Plasma</option>
+                <option value="inferno">Inferno</option>
+                <option value="magma">Magma</option>
+                <option value="cividis">Cividis</option>
+                <option value="turbo">Turbo</option>
+              </select>
+              <span class="heatmap-preview" id="heatmapPreview"></span>
+            </div>
           </div>
         </div>
       </div>
-      <div class="settings-row">
-        <div class="settings-label">
-          <span class="settings-label-text">API Base URL</span>
-          <span class="settings-label-hint">Override the default endpoint (leave empty for default)</span>
-        </div>
-        <div class="settings-control">
-          <input type="text" class="settings-input" id="settingsApiBase" placeholder="https://api.voyageai.com/v1">
-        </div>
-      </div>
-      <div class="settings-row">
-        <div class="settings-label">
-          <span class="settings-label-text">Request Timeout</span>
-          <span class="settings-label-hint">Max seconds to wait for API responses</span>
+
+      <!-- ── Models ── -->
+      <div class="settings-panel" id="settings-models">
+        <div class="settings-panel-header">
+          <h3 class="settings-panel-title">Models</h3>
+          <p class="settings-panel-subtitle">Default embedding model preferences</p>
         </div>
-        <div class="settings-control">
-          <select class="settings-select" id="settingsTimeout">
-            <option value="15">15 seconds</option>
-            <option value="30" selected>30 seconds</option>
-            <option value="60">60 seconds</option>
-            <option value="120">120 seconds</option>
-          </select>
+        <div class="settings-section">
+          <div class="settings-row">
+            <div class="settings-label">
+              <span class="settings-label-text">Default Embedding Model</span>
+              <span class="settings-label-hint">Pre-selected model for Embed and Compare tabs</span>
+            </div>
+            <div class="settings-control">
+              <select class="settings-select" id="settingsDefaultModel"></select>
+            </div>
+          </div>
+          <div class="settings-row">
+            <div class="settings-label">
+              <span class="settings-label-text">Default Input Type</span>
+              <span class="settings-label-hint">Pre-selected input type for embedding requests</span>
+            </div>
+            <div class="settings-control">
+              <select class="settings-select" id="settingsInputType">
+                <option value="document">document</option>
+                <option value="query">query</option>
+              </select>
+            </div>
+          </div>
         </div>
       </div>
-    </div>
 
-    <div class="settings-section">
-      <div class="settings-section-title">Benchmark Defaults</div>
-      <div class="settings-row">
-        <div class="settings-label">
-          <span class="settings-label-text">Iterations per Model</span>
-          <span class="settings-label-hint">Number of runs when benchmarking latency</span>
+      <!-- ── Chat ── -->
+      <div class="settings-panel" id="settings-chat">
+        <div class="settings-panel-header">
+          <h3 class="settings-panel-title">Chat</h3>
+          <p class="settings-panel-subtitle">LLM provider and knowledge base configuration</p>
         </div>
-        <div class="settings-control">
-          <select class="settings-select" id="settingsBenchIter">
-            <option value="3">3 runs</option>
-            <option value="5" selected>5 runs</option>
-            <option value="10">10 runs</option>
-            <option value="20">20 runs</option>
-          </select>
+        <div class="settings-section">
+          <div class="settings-section-title">LLM Provider</div>
+          <div class="settings-row">
+            <div class="settings-label">
+              <span class="settings-label-text">Provider <span class="settings-origin" data-origin-key="provider"></span></span>
+              <span class="settings-label-hint">Which LLM to use for chat responses</span>
+            </div>
+            <div class="settings-control">
+              <select class="settings-select" id="chatProvider" onchange="chatProviderChanged()">
+                <option value="">Not configured</option>
+                <option value="anthropic">Anthropic</option>
+                <option value="openai">OpenAI</option>
+                <option value="ollama">Ollama</option>
+              </select>
+            </div>
+          </div>
+          <div class="settings-row">
+            <div class="settings-label">
+              <span class="settings-label-text">Model <span class="settings-origin" data-origin-key="model"></span></span>
+              <span class="settings-label-hint">LLM model for generating responses</span>
+            </div>
+            <div class="settings-control">
+              <select class="settings-select" id="chatModel" style="min-width:220px">
+                <option value="">Select provider first</option>
+              </select>
+            </div>
+          </div>
         </div>
-      </div>
-      <div class="settings-row">
-        <div class="settings-label">
-          <span class="settings-label-text">Show Detailed Timings</span>
-          <span class="settings-label-hint">Display p50/p95/p99 in benchmark results</span>
+        <div class="settings-section">
+          <div class="settings-section-title">Knowledge Base</div>
+          <div class="settings-row">
+            <div class="settings-label">
+              <span class="settings-label-text">Database <span class="settings-origin" data-origin-key="db"></span></span>
+              <span class="settings-label-hint">MongoDB database containing your documents</span>
+            </div>
+            <div class="settings-control">
+              <input type="text" class="settings-input" id="chatDb" placeholder="database">
+            </div>
+          </div>
+          <div class="settings-row">
+            <div class="settings-label">
+              <span class="settings-label-text">Collection <span class="settings-origin" data-origin-key="collection"></span></span>
+              <span class="settings-label-hint">Collection with vector-indexed documents</span>
+            </div>
+            <div class="settings-control">
+              <input type="text" class="settings-input" id="chatCollection" placeholder="collection">
+            </div>
+          </div>
+          <div class="settings-row">
+            <div class="settings-label">
+              <span class="settings-label-text">Max Context Documents</span>
+              <span class="settings-label-hint">How many documents to retrieve per query</span>
+            </div>
+            <div class="settings-control">
+              <input type="number" class="settings-input" id="chatMaxDocs" value="5" min="1" max="20" style="min-width:80px;width:80px;">
+            </div>
+          </div>
+          <div class="settings-row">
+            <div class="settings-label">
+              <span class="settings-label-text">Rerank Results</span>
+              <span class="settings-label-hint">Use Voyage reranker to improve retrieval quality</span>
+            </div>
+            <div class="settings-control">
+              <button class="settings-toggle active" id="chatRerank" type="button"></button>
+            </div>
+          </div>
         </div>
-        <div class="settings-control">
-          <button class="settings-toggle" id="settingsDetailedTimings" type="button"></button>
+        <div class="settings-section">
+          <div class="settings-section-title">Custom Instructions</div>
+          <div class="settings-row" style="flex-direction:column;align-items:stretch;gap:8px;">
+            <div class="settings-label">
+              <span class="settings-label-text">System Prompt</span>
+              <span class="settings-label-hint">Additional instructions appended to the base system prompt</span>
+            </div>
+            <textarea class="settings-input" id="chatSystemPrompt" rows="3" placeholder="e.g. You are a movie expert. Be enthusiastic about recommendations." style="min-width:100%;resize:vertical;font-family:var(--font);text-align:left;"></textarea>
+          </div>
         </div>
       </div>
-    </div>
 
-    <div class="settings-section">
-      <div class="settings-section-title">Help</div>
-      <div class="settings-row">
-        <div class="settings-label">
-          <span class="settings-label-text">Welcome Tour</span>
-          <span class="settings-label-hint">Replay the onboarding walkthrough</span>
+      <!-- ── Benchmark ── -->
+      <div class="settings-panel" id="settings-benchmark">
+        <div class="settings-panel-header">
+          <h3 class="settings-panel-title">Benchmark</h3>
+          <p class="settings-panel-subtitle">Benchmark iteration and display defaults</p>
         </div>
-        <div class="settings-control">
-          <button class="settings-reset-btn" id="settingsShowTour" style="background:var(--accent);color:var(--bg);">Show Welcome Tour</button>
+        <div class="settings-section">
+          <div class="settings-row">
+            <div class="settings-label">
+              <span class="settings-label-text">Iterations per Model</span>
+              <span class="settings-label-hint">Number of runs when benchmarking latency</span>
+            </div>
+            <div class="settings-control">
+              <select class="settings-select" id="settingsBenchIter">
+                <option value="3">3 runs</option>
+                <option value="5" selected>5 runs</option>
+                <option value="10">10 runs</option>
+                <option value="20">20 runs</option>
+              </select>
+            </div>
+          </div>
+          <div class="settings-row">
+            <div class="settings-label">
+              <span class="settings-label-text">Show Detailed Timings</span>
+              <span class="settings-label-hint">Display p50/p95/p99 in benchmark results</span>
+            </div>
+            <div class="settings-control">
+              <button class="settings-toggle" id="settingsDetailedTimings" type="button"></button>
+            </div>
+          </div>
         </div>
       </div>
-    </div>
 
-    <div class="settings-section">
-      <div class="settings-section-title">Data &amp; Privacy</div>
-      <div class="settings-row">
-        <div class="settings-label">
-          <span class="settings-label-text">Persist Embeddings Locally</span>
-          <span class="settings-label-hint">Cache embedding results in browser storage to avoid re-fetching</span>
+      <!-- ── Data & Privacy ── -->
+      <div class="settings-panel" id="settings-privacy">
+        <div class="settings-panel-header">
+          <h3 class="settings-panel-title">Data &amp; Privacy</h3>
+          <p class="settings-panel-subtitle">Caching, analytics, and data management</p>
         </div>
-        <div class="settings-control">
-          <button class="settings-toggle active" id="settingsCacheEmbeddings" type="button"></button>
-        </div>
-      </div>
-      <div class="settings-row">
-        <div class="settings-label">
-          <span class="settings-label-text">Clear Cached Data</span>
-          <span class="settings-label-hint">Remove all locally stored embeddings and preferences</span>
-        </div>
-        <div class="settings-control">
-          <button class="settings-reset-btn" id="settingsClearCache">Clear All Data</button>
+        <div class="settings-section">
+          <div class="settings-row">
+            <div class="settings-label">
+              <span class="settings-label-text">Persist Embeddings Locally</span>
+              <span class="settings-label-hint">Cache embedding results in browser storage to avoid re-fetching</span>
+            </div>
+            <div class="settings-control">
+              <button class="settings-toggle active" id="settingsCacheEmbeddings" type="button"></button>
+            </div>
+          </div>
+          <div class="settings-row">
+            <div class="settings-label">
+              <span class="settings-label-text">Clear Cached Data</span>
+              <span class="settings-label-hint">Remove all locally stored embeddings and preferences</span>
+            </div>
+            <div class="settings-control">
+              <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>
-      </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 class="settings-section">
+          <div class="settings-section-title">Help</div>
+          <div class="settings-row">
+            <div class="settings-label">
+              <span class="settings-label-text">Welcome Tour</span>
+              <span class="settings-label-hint">Replay the onboarding walkthrough</span>
+            </div>
+            <div class="settings-control">
+              <button class="settings-reset-btn" id="settingsShowTour" style="background:var(--accent);color:var(--bg);">Show Welcome Tour</button>
+            </div>
+          </div>
         </div>
-        <div class="settings-control">
-          <button class="settings-toggle active" id="settingsTelemetry" type="button"></button>
+        <!-- Version Info (visible in Electron only) -->
+        <div class="settings-section" id="settingsVersionSection" style="display:none;">
+          <div class="settings-section-title">Version</div>
+          <div class="settings-row">
+            <div class="settings-label">
+              <span class="settings-label-text">Vai Desktop</span>
+              <span class="settings-label-hint">Electron desktop application</span>
+            </div>
+            <div class="settings-control">
+              <span class="version-badge" id="settingsAppVersion">—</span>
+            </div>
+          </div>
+          <div class="settings-row">
+            <div class="settings-label">
+              <span class="settings-label-text">Vai CLI Engine</span>
+              <span class="settings-label-hint">Underlying CLI powering embeddings, search &amp; reranking</span>
+            </div>
+            <div class="settings-control">
+              <span class="version-badge" id="settingsCliVersion">—</span>
+            </div>
+          </div>
         </div>
       </div>
-    </div>
 
-    <!-- Version Info (visible in Electron only) -->
-    <div class="settings-section" id="settingsVersionSection" style="display:none;">
-      <div class="settings-section-title">Version</div>
-      <div class="settings-row">
-        <div class="settings-label">
-          <span class="settings-label-text">Vai Desktop</span>
-          <span class="settings-label-hint">Electron desktop application</span>
-        </div>
-        <div class="settings-control">
-          <span class="version-badge" id="settingsAppVersion">—</span>
-        </div>
+      <div style="text-align:center;padding:8px 0;">
+        <span class="settings-saved" id="settingsSavedMsg">✓ Saved</span>
       </div>
-      <div class="settings-row">
-        <div class="settings-label">
-          <span class="settings-label-text">Vai CLI Engine</span>
-          <span class="settings-label-hint">Underlying CLI powering embeddings, search &amp; reranking</span>
-        </div>
-        <div class="settings-control">
-          <span class="version-badge" id="settingsCliVersion">—</span>
-        </div>
-      </div>
-    </div>
 
-    <div style="text-align:center;padding:8px 0;">
-      <span class="settings-saved" id="settingsSavedMsg">✓ Saved</span>
-    </div>
-
-  </div>
+    </div><!-- .settings-content -->
+  </div><!-- .settings-layout -->
 </div>
 
 </div><!-- .main -->
@@ -4617,6 +5130,9 @@ const CONCEPT_META = {
   'code-generation':   { icon: '💻', tab: 'explore' },
   scaffolding:         { icon: '🏗️', tab: 'explore' },
   'eval-comparison':   { icon: '📊', tab: 'benchmark' },
+  // MongoDB Auto-Embedding
+  'auto-embedding':        { icon: '⚡', tab: 'explore' },
+  'vai-vs-auto-embedding': { icon: '🔄', tab: 'explore' },
 };
 
 let exploreConcepts = {};
@@ -5938,6 +6454,41 @@ function initSettings() {
     const embedType = document.getElementById('embedInputType');
     if (embedType) embedType.value = s.inputType;
   }
+
+  // ── Chat settings event listeners (fields now live in settings page) ──
+
+  // Rerank toggle (was checkbox, now settings-toggle button)
+  const rerankToggle = document.getElementById('chatRerank');
+  if (rerankToggle) {
+    rerankToggle.addEventListener('click', () => {
+      rerankToggle.classList.toggle('active');
+      saveChatSettings();
+    });
+  }
+
+  // Immediate save on select/toggle changes
+  const chatProvider = document.getElementById('chatProvider');
+  if (chatProvider) {
+    chatProvider.addEventListener('change', () => {
+      // chatProviderChanged() is called via onchange attr — save after a tick
+      setTimeout(saveChatSettings, 100);
+    });
+  }
+  const chatModel = document.getElementById('chatModel');
+  if (chatModel) chatModel.addEventListener('change', saveChatSettings);
+  const chatMaxDocs = document.getElementById('chatMaxDocs');
+  if (chatMaxDocs) chatMaxDocs.addEventListener('change', saveChatSettings);
+
+  // Debounced save on text input changes
+  const chatDb = document.getElementById('chatDb');
+  if (chatDb) chatDb.addEventListener('input', () => { updateChatStatus(); saveChatSettingsDebounced(); });
+  const chatCollection = document.getElementById('chatCollection');
+  if (chatCollection) chatCollection.addEventListener('input', () => { updateChatStatus(); saveChatSettingsDebounced(); });
+  const chatSystemPrompt = document.getElementById('chatSystemPrompt');
+  if (chatSystemPrompt) chatSystemPrompt.addEventListener('input', saveChatSettingsDebounced);
+
+  // Set up settings sub-navigation
+  setupSettingsNav();
 }
 
 // ── Update Checker ──
@@ -6122,6 +6673,13 @@ function initOnboarding() {
         (isElectron ? ' Create projects directly on disk.' : ' Download as ZIP.'),
       arrow: 'left',
     },
+    {
+      target: '[data-tab="chat"]',
+      icon: '💬',
+      title: 'RAG Chat',
+      body: '<strong>Chat with your knowledge base</strong> using retrieval-augmented generation. Voyage AI finds relevant documents, then your chosen LLM generates grounded answers with source citations.',
+      arrow: 'left',
+    },
     {
       target: '[data-tab="benchmark"]',
       icon: '⏱️',
@@ -6707,6 +7265,26 @@ function startVSI(canvas, onExit) {
   const W = canvas.width = 600;
   const H = canvas.height = 500;
 
+  // Helper function to draw a leaf shape
+  function drawLeaf(ctx, x, y, size, color) {
+    ctx.fillStyle = color;
+    ctx.beginPath();
+    // Leaf shape using bezier curves
+    ctx.moveTo(x, y - size);
+    ctx.quadraticCurveTo(x + size * 0.6, y - size * 0.3, x + size * 0.3, y + size * 0.5);
+    ctx.quadraticCurveTo(x, y + size * 0.3, x, y + size);
+    ctx.quadraticCurveTo(x, y + size * 0.3, x - size * 0.3, y + size * 0.5);
+    ctx.quadraticCurveTo(x - size * 0.6, y - size * 0.3, x, y - size);
+    ctx.fill();
+    // Central vein
+    ctx.strokeStyle = color === '#00ED64' ? '#00A35C' : color;
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.moveTo(x, y - size);
+    ctx.lineTo(x, y + size);
+    ctx.stroke();
+  }
+
   // Ship
   const ship = { x: W / 2, w: 40, h: 16, speed: 5 };
   const bullets = [];
@@ -6779,7 +7357,8 @@ function startVSI(canvas, onExit) {
     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 });
+      const isLeaf = i % 3 === 0; // Every 3rd particle is a leaf
+      particles.push({ x, y, dx: Math.cos(angle) * speed, dy: Math.sin(angle) * speed, life: 30, color, isLeaf });
     }
     explosionTexts.push({ x, y, text: sim.toFixed(2), life: 40, color });
   }
@@ -6902,24 +7481,17 @@ function startVSI(canvas, onExit) {
       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 (Voyage AI leaf)
+    drawLeaf(ctx, ship.x, H - 32, 12, '#00ED64');
     // Ship label
     ctx.fillStyle = '#00ED64';
     ctx.font = '9px monospace';
     ctx.textAlign = 'center';
-    ctx.fillText('query', ship.x, H - 14);
+    ctx.fillText('voyage', ship.x, H - 14);
 
-    // Bullets
-    ctx.fillStyle = '#00ED64';
+    // Bullets (small leaf shapes)
     for (const b of bullets) {
-      ctx.fillRect(b.x - 1, b.y, 2, 8);
+      drawLeaf(ctx, b.x, b.y, 3, '#00ED64');
     }
 
     // Boss
@@ -6953,11 +7525,15 @@ function startVSI(canvas, onExit) {
       ctx.fillText(e.text, e.x, e.y + 3);
     }
 
-    // Particles
+    // Particles (with occasional leaf shapes)
     for (const p of particles) {
       ctx.globalAlpha = p.life / 30;
-      ctx.fillStyle = p.color;
-      ctx.fillRect(p.x - 2, p.y - 2, 4, 4);
+      if (p.isLeaf) {
+        drawLeaf(ctx, p.x, p.y, 2, p.color);
+      } else {
+        ctx.fillStyle = p.color;
+        ctx.fillRect(p.x - 2, p.y - 2, 4, 4);
+      }
     }
     ctx.globalAlpha = 1;
 
@@ -6977,15 +7553,27 @@ function startVSI(canvas, onExit) {
     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
+    // Lives (leaf icons)
+    for (let i = 0; i < lives; i++) {
+      drawLeaf(ctx, W - 20 - (i * 18), 15, 6, '#00ED64');
+    }
+
+    // Title with Voyage AI branding
     ctx.fillStyle = '#00ED64';
     ctx.font = 'bold 10px monospace';
     ctx.textAlign = 'center';
     ctx.fillText('VECTOR SPACE INVADERS', W / 2, H - 4);
 
+    // Voyage AI watermark (top right corner)
+    ctx.globalAlpha = 0.3;
+    drawLeaf(ctx, W - 25, 25, 8, '#00ED64');
+    ctx.fillStyle = '#00ED64';
+    ctx.font = 'bold 9px monospace';
+    ctx.textAlign = 'right';
+    ctx.fillText('VOYAGE AI', W - 38, 28);
+    ctx.globalAlpha = 1;
+
     // Game over
     if (gameOver) {
       ctx.fillStyle = 'rgba(0,30,43,0.8)';
@@ -7026,6 +7614,400 @@ function startVSI(canvas, onExit) {
   loop();
 }
 
+// ── Settings Sub-Navigation ──
+
+function switchSettingsSection(section) {
+  document.querySelectorAll('.settings-nav-item').forEach(btn => {
+    btn.classList.toggle('active', btn.dataset.settingsSection === section);
+  });
+  document.querySelectorAll('.settings-panel').forEach(p => {
+    p.classList.toggle('active', p.id === 'settings-' + section);
+  });
+  // Scroll content area to top
+  const content = document.querySelector('.settings-content');
+  if (content) content.scrollTop = 0;
+}
+
+function openChatSettings() {
+  switchTab('settings');
+  switchSettingsSection('chat');
+}
+
+function setupSettingsNav() {
+  document.querySelectorAll('.settings-nav-item').forEach(btn => {
+    btn.addEventListener('click', () => {
+      switchSettingsSection(btn.dataset.settingsSection);
+    });
+  });
+}
+
+// ── Settings Origins (provenance badges) ──
+
+async function loadSettingsOrigins() {
+  try {
+    const res = await fetch('/api/settings/origins');
+    if (!res.ok) return;
+    const origins = await res.json();
+    const labels = { env: 'ENV', config: '~/.vai', project: '.vai.json', default: 'Default' };
+    const tooltips = {
+      env: 'Set via environment variable',
+      config: 'Set in ~/.vai/config.json',
+      project: 'Set in project .vai.json',
+      default: 'Using built-in default',
+    };
+    Object.entries(origins).forEach(([key, origin]) => {
+      const badge = document.querySelector(`[data-origin-key="${key}"]`);
+      if (badge) {
+        badge.className = `settings-origin origin-${origin}`;
+        badge.textContent = labels[origin] || origin;
+        badge.title = tooltips[origin] || '';
+      }
+    });
+  } catch { /* silently ignore */ }
+}
+
+// ── Save Chat Settings ──
+
+let _chatSaveTimer = null;
+
+function saveChatSettings() {
+  const settings = {
+    provider: document.getElementById('chatProvider').value,
+    model: document.getElementById('chatModel').value,
+    db: document.getElementById('chatDb').value,
+    collection: document.getElementById('chatCollection').value,
+    maxDocs: parseInt(document.getElementById('chatMaxDocs').value) || 5,
+    rerank: document.getElementById('chatRerank').classList.contains('active'),
+    systemPrompt: document.getElementById('chatSystemPrompt').value.trim(),
+  };
+  fetch('/api/chat/config', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(settings),
+  }).catch(() => {});
+  updateChatStatus();
+  // Update not-configured banner
+  const notConfigured = document.getElementById('chatNotConfigured');
+  if (notConfigured) {
+    notConfigured.style.display = (!settings.provider || !settings.db) ? 'flex' : 'none';
+  }
+  // Refresh origin badges after save
+  loadSettingsOrigins();
+  flashSaved();
+}
+
+function saveChatSettingsDebounced() {
+  clearTimeout(_chatSaveTimer);
+  _chatSaveTimer = setTimeout(saveChatSettings, 500);
+}
+
+// flashSaved() is defined earlier (near initSettings) — reused here
+
+// ── Chat Tab ──
+let chatSessionId = null;
+
+async function loadChatConfig() {
+  try {
+    const res = await fetch('/api/chat/config');
+    const data = await res.json();
+    if (data.provider) {
+      document.getElementById('chatProvider').value = data.provider;
+      await chatProviderChanged(); // Populate model dropdown
+      // After models load, select the configured model
+      if (data.model) {
+        const modelSelect = document.getElementById('chatModel');
+        const exists = Array.from(modelSelect.options).some(o => o.value === data.model);
+        if (exists) {
+          modelSelect.value = data.model;
+        }
+      }
+    }
+    if (data.db) document.getElementById('chatDb').value = data.db;
+    if (data.collection) document.getElementById('chatCollection').value = data.collection;
+    if (data.chat?.maxContextDocs) document.getElementById('chatMaxDocs').value = data.chat.maxContextDocs;
+    if (data.chat?.rerank === false) document.getElementById('chatRerank').classList.remove('active');
+    if (data.chat?.systemPrompt) document.getElementById('chatSystemPrompt').value = data.chat.systemPrompt;
+    updateChatStatus();
+    // Show not-configured banner if incomplete
+    const notConfigured = document.getElementById('chatNotConfigured');
+    if (notConfigured) {
+      notConfigured.style.display = (!data.provider || !data.db) ? 'flex' : 'none';
+    }
+  } catch {
+    // No config — show not-configured banner
+    const notConfigured = document.getElementById('chatNotConfigured');
+    if (notConfigured) notConfigured.style.display = 'flex';
+  }
+}
+
+function updateChatStatus() {
+  const provider = document.getElementById('chatProvider');
+  const db = document.getElementById('chatDb').value;
+  const collection = document.getElementById('chatCollection').value;
+  const providerLabel = provider.value
+    ? provider.options[provider.selectedIndex].text
+    : 'No provider';
+  document.getElementById('chatStatusProvider').textContent = providerLabel;
+  document.getElementById('chatStatusDb').textContent =
+    (db && collection) ? `${db}.${collection}` : 'No database';
+}
+
+async function chatProviderChanged() {
+  updateChatStatus();
+  const provider = document.getElementById('chatProvider').value;
+  const modelSelect = document.getElementById('chatModel');
+  
+  if (!provider) {
+    modelSelect.innerHTML = '<option value="">Select provider first</option>';
+    return;
+  }
+
+  modelSelect.innerHTML = '<option value="">Loading models...</option>';
+  modelSelect.disabled = true;
+
+  try {
+    const res = await fetch(`/api/chat/models?provider=${provider}`);
+    const data = await res.json();
+    const models = data.models || [];
+    const defaults = { anthropic: 'claude-sonnet-4-5-20250929', openai: 'gpt-4o', ollama: 'llama3.1' };
+    const defaultModel = defaults[provider];
+
+    modelSelect.innerHTML = '';
+
+    if (models.length === 0) {
+      if (provider === 'ollama') {
+        modelSelect.innerHTML = '<option value="">No models found — is Ollama running?</option>';
+      } else {
+        // Fallback to default
+        modelSelect.innerHTML = `<option value="${defaultModel}">${defaultModel}</option>`;
+      }
+    } else {
+      models.forEach(m => {
+        const opt = document.createElement('option');
+        opt.value = m.id;
+        let label = m.name || m.id;
+        if (m.context) label += ` (${m.context})`;
+        if (m.size) label += ` — ${m.size}`;
+        if (m.parameterSize) label += ` [${m.parameterSize}]`;
+        if (m.quantization) label += ` ${m.quantization}`;
+        opt.textContent = label;
+        if (m.id === defaultModel) opt.selected = true;
+        modelSelect.appendChild(opt);
+      });
+    }
+
+    // Always add a custom option
+    const customOpt = document.createElement('option');
+    customOpt.value = '__custom__';
+    customOpt.textContent = '✏️ Custom model...';
+    modelSelect.appendChild(customOpt);
+
+  } catch {
+    const defaults = { anthropic: 'claude-sonnet-4-5-20250929', openai: 'gpt-4o', ollama: 'llama3.1' };
+    modelSelect.innerHTML = `<option value="${defaults[provider] || ''}">${defaults[provider] || 'default'}</option>`;
+  }
+
+  modelSelect.disabled = false;
+}
+
+// Handle custom model selection
+document.getElementById('chatModel')?.addEventListener('change', function() {
+  if (this.value === '__custom__') {
+    const custom = prompt('Enter model name:');
+    if (custom) {
+      const opt = document.createElement('option');
+      opt.value = custom;
+      opt.textContent = custom;
+      // Insert before the custom option
+      this.insertBefore(opt, this.lastChild);
+      this.value = custom;
+    } else {
+      this.selectedIndex = 0;
+    }
+  }
+});
+
+function chatInputKeydown(e) {
+  if (e.key === 'Enter' && !e.shiftKey) {
+    e.preventDefault();
+    sendChatMessage();
+  }
+}
+
+function addChatMessage(role, content, sources) {
+  const container = document.getElementById('chatMessages');
+  const div = document.createElement('div');
+  div.className = `chat-message ${role}`;
+  const contentSpan = document.createElement('span');
+  contentSpan.className = 'chat-message-content';
+  contentSpan.textContent = content;
+  div.appendChild(contentSpan);
+
+  if (sources && sources.length > 0) {
+    const details = document.createElement('details');
+    details.className = 'chat-sources';
+    const summary = document.createElement('summary');
+    summary.textContent = `${sources.length} source${sources.length > 1 ? 's' : ''}`;
+    details.appendChild(summary);
+    const ul = document.createElement('ul');
+    sources.forEach(s => {
+      const li = document.createElement('li');
+      li.textContent = `${s.source} (${s.score?.toFixed(2) || 'N/A'})`;
+      ul.appendChild(li);
+    });
+    details.appendChild(ul);
+    div.appendChild(details);
+  }
+
+  container.appendChild(div);
+  container.scrollTop = container.scrollHeight;
+  return div;
+}
+
+async function sendChatMessage() {
+  const input = document.getElementById('chatInput');
+  const query = input.value.trim();
+  if (!query) return;
+
+  const provider = document.getElementById('chatProvider').value;
+  const modelVal = document.getElementById('chatModel').value;
+  const model = (modelVal && modelVal !== '__custom__') ? modelVal : undefined;
+  const db = document.getElementById('chatDb').value;
+  const collection = document.getElementById('chatCollection').value;
+  const maxDocs = parseInt(document.getElementById('chatMaxDocs').value) || 5;
+  const rerank = document.getElementById('chatRerank').classList.contains('active');
+  const systemPrompt = document.getElementById('chatSystemPrompt').value.trim() || undefined;
+
+  if (!provider) {
+    addChatMessage('system-msg', 'Please select an LLM provider in <a href="#" onclick="openChatSettings();return false;">Chat Settings</a>.');
+    return;
+  }
+  if (!db || !collection) {
+    addChatMessage('system-msg', 'Please configure a database and collection in <a href="#" onclick="openChatSettings();return false;">Chat Settings</a>.');
+    return;
+  }
+
+  // Show user message
+  addChatMessage('user', query);
+  input.value = '';
+  input.style.height = 'auto';
+
+  // Show typing indicator
+  const typing = document.createElement('div');
+  typing.className = 'chat-typing';
+  typing.textContent = 'Thinking';
+  document.getElementById('chatMessages').appendChild(typing);
+
+  // Disable input
+  const sendBtn = document.getElementById('chatSendBtn');
+  sendBtn.disabled = true;
+  input.disabled = true;
+
+  try {
+    const res = await fetch('/api/chat/message', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ query, db, collection, provider, model, maxDocs, rerank, systemPrompt }),
+    });
+
+    if (!res.ok) {
+      const err = await res.json();
+      typing.remove();
+      addChatMessage('system-msg', `Error: ${err.error || 'Request failed'}`);
+      return;
+    }
+
+    // Parse SSE stream
+    const reader = res.body.getReader();
+    const decoder = new TextDecoder();
+    let buffer = '';
+    let assistantDiv = null;
+    let fullText = '';
+    let sources = [];
+
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+
+      buffer += decoder.decode(value, { stream: true });
+      const lines = buffer.split('\n');
+      buffer = lines.pop() || '';
+
+      let currentEvent = null;
+      for (const line of lines) {
+        if (line.startsWith('event: ')) {
+          currentEvent = line.slice(7).trim();
+          continue;
+        }
+        if (line.startsWith('data: ')) {
+          const data = JSON.parse(line.slice(6));
+
+          if (currentEvent === 'retrieval') {
+            typing.textContent = `Retrieved ${data.docs?.length || 0} docs (${data.timeMs}ms)`;
+          }
+
+          if (currentEvent === 'chunk') {
+            if (!assistantDiv) {
+              typing.remove();
+              assistantDiv = addChatMessage('assistant', '');
+            }
+            fullText += data.text;
+            assistantDiv.querySelector('.chat-message-content').textContent = fullText;
+            document.getElementById('chatMessages').scrollTop = document.getElementById('chatMessages').scrollHeight;
+          }
+
+          if (currentEvent === 'done') {
+            sources = data.sources || [];
+            if (sources.length > 0 && assistantDiv) {
+              const details = document.createElement('details');
+              details.className = 'chat-sources';
+              const summary = document.createElement('summary');
+              summary.textContent = `${sources.length} source${sources.length > 1 ? 's' : ''}`;
+              details.appendChild(summary);
+              const ul = document.createElement('ul');
+              sources.forEach(s => {
+                const li = document.createElement('li');
+                li.textContent = `${s.source} (${s.score?.toFixed(2) || 'N/A'})`;
+                ul.appendChild(li);
+              });
+              details.appendChild(ul);
+              assistantDiv.appendChild(details);
+            }
+          }
+
+          if (currentEvent === 'error') {
+            typing.remove();
+            addChatMessage('system-msg', `Error: ${data.error}`);
+          }
+
+          currentEvent = null;
+        }
+      }
+    }
+
+    // Remove typing if still present
+    if (typing.parentNode) typing.remove();
+
+  } catch (err) {
+    if (typing.parentNode) typing.remove();
+    addChatMessage('system-msg', `Error: ${err.message}`);
+  } finally {
+    sendBtn.disabled = false;
+    input.disabled = false;
+    input.focus();
+  }
+}
+
+// Auto-resize chat input
+document.getElementById('chatInput')?.addEventListener('input', function() {
+  this.style.height = 'auto';
+  this.style.height = Math.min(this.scrollHeight, 120) + 'px';
+});
+
+// Load chat config and settings origins on init
+loadChatConfig();
+loadSettingsOrigins();
+
 // ── Expose functions to global scope for onclick handlers ──
 window.setGenerateMode = setGenerateMode;
 window.copyGeneratedCode = copyGeneratedCode;
@@ -7034,6 +8016,12 @@ window.updateGenComponents = updateGenComponents;
 window.createScaffold = createScaffold;
 window.pickScaffoldDirectory = pickScaffoldDirectory;
 window.downloadScaffoldZip = downloadScaffoldZip;
+window.sendChatMessage = sendChatMessage;
+window.openChatSettings = openChatSettings;
+window.switchSettingsSection = switchSettingsSection;
+window.updateChatStatus = updateChatStatus;
+window.chatInputKeydown = chatInputKeydown;
+window.chatProviderChanged = chatProviderChanged;
 
 // ── Start ──
 init();
@@ -7126,8 +8114,16 @@ init();
 
 <!-- 🐛 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)}
+.sidebar-bug-link{
+  display:flex;align-items:center;gap:6px;
+  background:none;border:none;cursor:pointer;
+  font-size:11px;color:var(--text-muted);
+  padding:4px 0;font-family:inherit;
+  transition:color .15s;
+}
+.sidebar-bug-link:hover{color:var(--text);}
+.sidebar-bug-link svg{width:12px;height:12px;flex-shrink:0;opacity:0.6;}
+.sidebar-bug-link:hover svg{opacity:1;}
 .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)}
@@ -7157,7 +8153,7 @@ init();
 .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>
+<!-- Bug button moved to sidebar footer -->
 
 <div class="bug-reporter-overlay" id="bugOverlay" style="display:none">
   <div class="bug-reporter-modal">