voyageai-cli 1.24.0 → 1.26.1

package/src/playground/index.html

@@ -10,56 +10,56 @@
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
 :root {
-  /* MongoDB Design System — Dark Mode Palette (default) */
+  /* Vai Dark Mode Palette (default) — Teal/Cyan brand */
   --bg: #001E2B;            /* MDB Black */
   --bg-surface: #112733;    /* Gray Dark 4 */
   --bg-card: #1C2D38;       /* Gray Dark 3 */
   --bg-input: #112733;      /* Gray Dark 4 */
-  --accent: #00ED64;        /* Green Base — interactive elements only */
+  --accent: #00D4AA;        /* Teal — interactive elements */
   --accent-text: #FFFFFF;   /* Bright white — headings/labels in dark mode */
-  --accent-dim: #00A35C;    /* Green Dark 1 */
-  --accent-glow: rgba(0, 237, 100, 0.12);
+  --accent-dim: #009E80;    /* Teal Dark */
+  --accent-glow: rgba(0, 212, 170, 0.10);
   --text: #E8EDEB;          /* Gray Light 2 */
   --text-dim: #C1C7C6;      /* Gray Light 1 */
   --text-muted: #889397;    /* Gray Base */
   --border: #3D4F58;        /* Gray Dark 2 */
   --error: #FF6960;         /* Red Light 1 */
   --warning: #FFC010;       /* Yellow Base */
-  --success: #00ED64;       /* Green Base */
+  --success: #00D4AA;       /* Teal */
   --red: #FF6960;           /* Red Light 1 */
   --yellow: #FFC010;        /* Yellow Base */
-  --green: #00ED64;         /* Green Base */
-  --blue: #0498EC;          /* Blue Light 1 (links) */
+  --green: #00D4AA;         /* Teal */
+  --blue: #40E0FF;          /* Cyan (links) */
   --purple: #B45AF2;        /* Purple Base */
-  --green-dark: #023430;    /* Green Dark 3 */
+  --green-dark: #00241E;    /* Teal Dark 3 */
   --radius: 8px;
   --font: 'Euclid Circular A', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
   --mono: 'Source Code Pro', 'SF Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
 }
 
-/* MongoDB Design System — Light Mode Palette */
+/* Vai Light Mode Palette — Teal/Cyan brand */
 [data-theme="light"] {
   --bg: #FFFFFF;             /* White */
   --bg-surface: #F9FBFA;    /* Gray Light 3 */
   --bg-card: #FFFFFF;        /* White */
   --bg-input: #F9FBFA;      /* Gray Light 3 */
-  --accent: #00A35C;         /* Green Dark 1 — interactive elements */
+  --accent: #009E80;         /* Teal Dark — interactive elements */
   --accent-text: #001E2B;   /* MDB Black — headings/labels in light mode */
-  --accent-dim: #00684A;     /* Green Dark 2 */
-  --accent-glow: rgba(0, 163, 92, 0.08);
+  --accent-dim: #007A63;     /* Teal Darker */
+  --accent-glow: rgba(0, 158, 128, 0.08);
   --text: #001E2B;           /* MDB Black */
   --text-dim: #5C6C75;       /* Gray Dark 1 */
   --text-muted: #889397;     /* Gray Base */
   --border: #E8EDEB;         /* Gray Light 2 */
   --error: #DB3030;          /* Red Base */
   --warning: #944F01;        /* Yellow Dark 2 */
-  --success: #00684A;        /* Green Dark 2 */
+  --success: #009E80;        /* Teal Dark */
   --red: #DB3030;            /* Red Base */
   --yellow: #944F01;         /* Yellow Dark 2 */
-  --green: #00684A;          /* Green Dark 2 */
-  --blue: #016BF8;           /* Blue Base */
+  --green: #009E80;          /* Teal Dark */
+  --blue: #0088CC;           /* Cyan Dark (links) */
   --purple: #5E0C9E;         /* Purple Dark 2 */
-  --green-dark: #023430;     /* Green Dark 3 */
+  --green-dark: #00241E;     /* Teal Dark 3 */
 }
 /* Light mode shadow + card adjustments */
 [data-theme="light"] .explore-card,
@@ -69,7 +69,7 @@
   box-shadow: 0 1px 4px rgba(0, 30, 43, 0.08);
 }
 [data-theme="light"] .explore-card:hover {
-  box-shadow: 0 4px 16px rgba(0, 163, 92, 0.12);
+  box-shadow: 0 4px 16px rgba(0, 158, 128, 0.12);
 }
 [data-theme="light"] .cost-modal,
 [data-theme="light"] .explore-modal {
@@ -83,14 +83,14 @@
   box-shadow: 1px 0 3px rgba(0, 30, 43, 0.06);
 }
 /* Light mode gradient overrides */
-[data-theme="light"] .quant-bar-fill.storage { background: linear-gradient(90deg, #00A35C, #00ED64); }
-[data-theme="light"] .quant-bar-fill.latency { background: linear-gradient(90deg, #016BF8, #0498EC); }
-[data-theme="light"] .quant-meter-fill.perfect { background: linear-gradient(90deg, #00A35C, #00ED64); }
+[data-theme="light"] .quant-bar-fill.storage { background: linear-gradient(90deg, #009E80, #00D4AA); }
+[data-theme="light"] .quant-bar-fill.latency { background: linear-gradient(90deg, #0088CC, #40E0FF); }
+[data-theme="light"] .quant-meter-fill.perfect { background: linear-gradient(90deg, #009E80, #00D4AA); }
 [data-theme="light"] .quant-meter-fill.good { background: linear-gradient(90deg, #944F01, #FFC010); }
 [data-theme="light"] .quant-meter-fill.degraded { background: linear-gradient(90deg, #DB3030, #FF6960); }
 /* Light mode button text */
 [data-theme="light"] .btn { color: #FFFFFF; }
-[data-theme="light"] .btn:hover { background: #00684A; }
+[data-theme="light"] .btn:hover { background: #007A63; }
 
 html, body { height: 100%; }
 
@@ -108,8 +108,8 @@ body {
   align-items: center;
   gap: 10px;
   padding: 8px 16px;
-  background: linear-gradient(135deg, rgba(0,163,92,0.12), rgba(4,152,236,0.12));
-  border-bottom: 1px solid rgba(0,237,100,0.2);
+  background: linear-gradient(135deg, rgba(0,158,128,0.12), rgba(4,152,236,0.12));
+  border-bottom: 1px solid rgba(0,212,170,0.2);
   font-size: 13px;
   color: var(--text);
   flex-shrink: 0;
@@ -178,7 +178,7 @@ body {
   padding: 24px 28px 20px;
   width: 380px;
   max-width: 90vw;
-  box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(0,237,100,0.15);
+  box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(0,212,170,0.15);
   transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
   opacity: 0;
   transform: translateY(10px);
@@ -296,7 +296,7 @@ body {
   width: 460px;
   max-width: 90vw;
   text-align: center;
-  box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 80px rgba(0,237,100,0.08);
+  box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 80px rgba(0,212,170,0.08);
   pointer-events: auto;
   opacity: 0;
   transform: scale(0.95);
@@ -324,10 +324,10 @@ body {
   margin-bottom: 28px;
 }
 [data-theme="light"] .onboarding-tooltip {
-  box-shadow: 0 12px 40px rgba(0,30,43,0.15), 0 0 0 1px rgba(0,163,92,0.2);
+  box-shadow: 0 12px 40px rgba(0,30,43,0.15), 0 0 0 1px rgba(0,158,128,0.2);
 }
 [data-theme="light"] .onboarding-welcome-card {
-  box-shadow: 0 20px 60px rgba(0,30,43,0.18), 0 0 80px rgba(0,163,92,0.06);
+  box-shadow: 0 20px 60px rgba(0,30,43,0.18), 0 0 80px rgba(0,158,128,0.06);
 }
 [data-theme="light"] .onboarding-backdrop {
   background: rgba(0,30,43,0.45);
@@ -480,7 +480,7 @@ body:not(.is-electron) .sidebar-drag-region {
   height: 16px;
 }
 [data-theme="light"] .tab-btn:hover { background: rgba(0,30,43,0.04); }
-[data-theme="light"] .tab-btn.active { background: rgba(0,163,92,0.08); }
+[data-theme="light"] .tab-btn.active { background: rgba(0,158,128,0.08); }
 
 .sidebar-footer {
   padding: 12px 16px;
@@ -558,6 +558,27 @@ body:not(.is-electron) .sidebar-drag-region {
   overflow-y: auto;
   display: flex;
   flex-direction: column;
+  position: relative;
+}
+
+.content-area::after {
+  content: '';
+  position: fixed;
+  bottom: 2rem;
+  right: 2rem;
+  width: 200px;
+  height: 200px;
+  background-image: url('/icons/watermark.png');
+  background-size: contain;
+  background-repeat: no-repeat;
+  opacity: 0.05;
+  pointer-events: none;
+  z-index: 0;
+  filter: invert(1);
+}
+
+[data-theme="light"] .content-area::after {
+  filter: none;
 }
 
 .content-drag-region {
@@ -644,7 +665,7 @@ select:focus { outline: none; border-color: var(--accent); }
   align-items: center;
   gap: 8px;
 }
-.btn:hover { background: #71F6BA; transform: translateY(-1px); }
+.btn:hover { background: #5CE8CC; transform: translateY(-1px); }
 .btn:active { transform: translateY(0); }
 .btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
 
@@ -689,7 +710,7 @@ select:focus { outline: none; border-color: var(--accent); }
 }
 .subtab:hover {
   color: var(--text);
-  background: rgba(0, 237, 100, 0.05);
+  background: rgba(0, 212, 170, 0.05);
 }
 .subtab.active {
   background: var(--accent);
@@ -964,7 +985,7 @@ select:focus { outline: none; border-color: var(--accent); }
 .explore-card:hover {
   border-color: var(--accent);
   transform: translateY(-2px);
-  box-shadow: 0 4px 20px rgba(0, 237, 100, 0.1);
+  box-shadow: 0 4px 20px rgba(0, 212, 170, 0.1);
 }
 .explore-card.expanded {
   border-color: var(--accent);
@@ -1252,8 +1273,8 @@ select:focus { outline: none; border-color: var(--accent); }
   font-family: var(--mono); font-size: 12px; font-weight: 600;
   color: var(--green-dark); white-space: nowrap; min-width: fit-content;
 }
-.quant-bar-fill.storage { background: linear-gradient(90deg, #00ED64, #71F6BA); }
-.quant-bar-fill.latency { background: linear-gradient(90deg, #0498EC, #016BF8); }
+.quant-bar-fill.storage { background: linear-gradient(90deg, #00D4AA, #5CE8CC); }
+.quant-bar-fill.latency { background: linear-gradient(90deg, #40E0FF, #0088CC); }
 .quant-bar-badge {
   position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
   font-size: 12px; color: var(--text-dim); font-family: var(--mono);
@@ -1278,7 +1299,7 @@ select:focus { outline: none; border-color: var(--accent); }
   height: 100%; border-radius: 5px;
   transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
 }
-.quant-meter-fill.perfect { background: linear-gradient(90deg, #00ED64, #71F6BA); }
+.quant-meter-fill.perfect { background: linear-gradient(90deg, #00D4AA, #5CE8CC); }
 .quant-meter-fill.good { background: linear-gradient(90deg, #FFC010, #FFEC9E); }
 .quant-meter-fill.degraded { background: linear-gradient(90deg, #FF6960, #FFCDC7); }
 .quant-meter-detail { font-size: 11px; color: var(--text-muted); margin-top: 4px; font-family: var(--mono); }
@@ -1374,7 +1395,7 @@ select:focus { outline: none; border-color: var(--accent); }
   font-weight: 600;
 }
 .cost-mode-btn:hover:not(.active) {
-  background: rgba(0, 237, 100, 0.1);
+  background: rgba(0, 212, 170, 0.1);
   color: var(--text);
 }
 .cost-select {
@@ -1514,7 +1535,7 @@ select:focus { outline: none; border-color: var(--accent); }
   border-bottom: 1px solid rgba(42, 53, 80, 0.3);
   font-family: var(--mono);
 }
-.cost-table tr:hover { background: rgba(0, 237, 100, 0.03); }
+.cost-table tr:hover { background: rgba(0, 212, 170, 0.03); }
 .cost-highlight {
   color: var(--accent-text);
   font-weight: 600;
@@ -1541,7 +1562,7 @@ select:focus { outline: none; border-color: var(--accent); }
 .cost-tip {
   font-size: 12px;
   color: var(--text-muted);
-  background: rgba(0, 237, 100, 0.05);
+  background: rgba(0, 212, 170, 0.05);
   border-left: 3px solid var(--accent);
   padding: 10px 14px;
   border-radius: 0 6px 6px 0;
@@ -1661,7 +1682,7 @@ select:focus { outline: none; border-color: var(--accent); }
 }
 .cost-modal .formula .accent { color: var(--accent); font-weight: 600; }
 .cost-modal .example {
-  background: rgba(0, 237, 100, 0.05);
+  background: rgba(0, 212, 170, 0.05);
   border-left: 3px solid var(--accent);
   border-radius: 0 8px 8px 0;
   padding: 12px 16px;
@@ -1843,8 +1864,8 @@ select:focus { outline: none; border-color: var(--accent); }
   line-height: 1.5;
 }
 .settings-api-banner.success {
-  background: rgba(0,237,100,0.06);
-  border-color: rgba(0,237,100,0.2);
+  background: rgba(0,212,170,0.06);
+  border-color: rgba(0,212,170,0.2);
   color: var(--success);
 }
 [data-theme="light"] .settings-api-banner {
@@ -1932,8 +1953,8 @@ select:focus { outline: none; border-color: var(--accent); }
   font-size: 13px;
   font-weight: 600;
   color: var(--accent);
-  background: rgba(0,237,100,0.08);
-  border: 1px solid rgba(0,237,100,0.2);
+  background: rgba(0,212,170,0.08);
+  border: 1px solid rgba(0,212,170,0.2);
   border-radius: 6px;
   padding: 4px 12px;
   letter-spacing: 0.3px;
@@ -1941,7 +1962,7 @@ select:focus { outline: none; border-color: var(--accent); }
 [data-theme="light"] .version-badge {
   background: rgba(0,104,74,0.06);
   border-color: rgba(0,104,74,0.2);
-  color: #00684A;
+  color: #007A63;
 }
 .settings-api-field .save-btn {
   color: var(--accent);
@@ -2174,7 +2195,7 @@ select:focus { outline: none; border-color: var(--accent); }
 }
 [data-theme="light"] .settings-origin.origin-env {
   background: rgba(4,120,190,0.10);
-  color: #016BF8;
+  color: #0088CC;
 }
 .settings-origin.origin-config {
   background: rgba(180,90,242,0.12);
@@ -2185,12 +2206,12 @@ select:focus { outline: none; border-color: var(--accent); }
   color: #7B3DB5;
 }
 .settings-origin.origin-project {
-  background: rgba(0,237,100,0.12);
+  background: rgba(0,212,170,0.12);
   color: var(--accent);
 }
 [data-theme="light"] .settings-origin.origin-project {
-  background: rgba(0,163,92,0.10);
-  color: #00A35C;
+  background: rgba(0,158,128,0.10);
+  color: #009E80;
 }
 .settings-origin.origin-default {
   background: rgba(136,147,151,0.12);
@@ -2313,6 +2334,108 @@ select:focus { outline: none; border-color: var(--accent); }
 .chat-sources summary { cursor: pointer; }
 .chat-sources ul { margin: 4px 0 0 16px; padding: 0; }
 .chat-sources li { margin: 2px 0; }
+/* Markdown rendering in assistant messages */
+.chat-message.assistant .chat-message-content.rendered {
+  white-space: normal;
+}
+.chat-message.assistant .chat-message-content.rendered p {
+  margin: 0 0 8px 0;
+}
+.chat-message.assistant .chat-message-content.rendered p:last-child {
+  margin-bottom: 0;
+}
+.chat-message.assistant .chat-message-content.rendered h1,
+.chat-message.assistant .chat-message-content.rendered h2,
+.chat-message.assistant .chat-message-content.rendered h3,
+.chat-message.assistant .chat-message-content.rendered h4 {
+  margin: 12px 0 6px 0;
+  font-weight: 600;
+  color: var(--accent-text, #fff);
+}
+.chat-message.assistant .chat-message-content.rendered h1 { font-size: 1.3em; }
+.chat-message.assistant .chat-message-content.rendered h2 { font-size: 1.15em; }
+.chat-message.assistant .chat-message-content.rendered h3 { font-size: 1.05em; }
+.chat-message.assistant .chat-message-content.rendered code {
+  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
+  font-size: 0.9em;
+  background: var(--bg-input, #112733);
+  padding: 2px 5px;
+  border-radius: 4px;
+}
+.chat-message.assistant .chat-message-content.rendered pre {
+  background: var(--bg-input, #112733);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 12px;
+  margin: 8px 0;
+  overflow-x: auto;
+  white-space: pre;
+}
+.chat-message.assistant .chat-message-content.rendered pre code {
+  background: none;
+  padding: 0;
+  border-radius: 0;
+  font-size: 13px;
+  line-height: 1.5;
+}
+.chat-message.assistant .chat-message-content.rendered ul,
+.chat-message.assistant .chat-message-content.rendered ol {
+  margin: 6px 0;
+  padding-left: 20px;
+}
+.chat-message.assistant .chat-message-content.rendered li {
+  margin: 3px 0;
+}
+.chat-message.assistant .chat-message-content.rendered blockquote {
+  border-left: 3px solid var(--accent, #00D4AA);
+  margin: 8px 0;
+  padding: 4px 12px;
+  color: var(--text-muted);
+}
+.chat-message.assistant .chat-message-content.rendered a {
+  color: var(--accent, #00D4AA);
+  text-decoration: none;
+}
+.chat-message.assistant .chat-message-content.rendered a:hover {
+  text-decoration: underline;
+}
+.chat-message.assistant .chat-message-content.rendered table {
+  border-collapse: collapse;
+  margin: 8px 0;
+  font-size: 13px;
+  width: 100%;
+}
+.chat-message.assistant .chat-message-content.rendered th,
+.chat-message.assistant .chat-message-content.rendered td {
+  border: 1px solid var(--border);
+  padding: 6px 10px;
+  text-align: left;
+}
+.chat-message.assistant .chat-message-content.rendered th {
+  background: var(--bg-input, #112733);
+  font-weight: 600;
+}
+.chat-message.assistant .chat-message-content.rendered hr {
+  border: none;
+  border-top: 1px solid var(--border);
+  margin: 12px 0;
+}
+
+.chat-tool-calls {
+  display: flex; flex-direction: column; gap: 4px;
+  margin-bottom: 4px; align-self: flex-start; max-width: 85%;
+}
+.chat-tool-call {
+  font-size: 12px; color: var(--text-muted);
+  padding: 6px 12px; border-radius: 8px;
+  background: var(--bg-card); border: 1px dashed var(--border);
+  display: flex; align-items: center; gap: 6px;
+}
+.chat-tool-call .tool-icon { opacity: 0.5; font-size: 11px; }
+.chat-tool-call .tool-name { font-weight: 600; }
+.chat-tool-call .tool-time { opacity: 0.5; }
+.chat-tool-call.error { border-color: #e74c3c; }
+.chat-tool-call .tool-error { color: #e74c3c; font-size: 11px; }
 .chat-input-area {
   padding: 12px 16px;
   border-top: 1px solid var(--border);
@@ -4025,6 +4148,39 @@ Reranking models rescore initial search results to improve relevance ordering.</
               </select>
             </div>
           </div>
+          <div class="settings-row" id="chatApiKeyRow" style="display:none">
+            <div class="settings-label">
+              <span class="settings-label-text">API Key</span>
+              <span class="settings-label-hint">Provider API key (stored securely in OS keychain)</span>
+            </div>
+            <div class="settings-control" style="display:flex;gap:8px;align-items:center">
+              <input
+                type="password"
+                class="settings-input"
+                id="chatApiKey"
+                placeholder="Enter your API key"
+                style="flex:1;font-family:monospace;font-size:13px"
+              >
+              <button
+                class="btn btn-secondary"
+                id="chatApiKeyToggle"
+                onclick="toggleChatApiKeyVisibility()"
+                title="Show/hide API key"
+                style="padding:8px 12px;min-width:auto"
+              >
+                👁️
+              </button>
+              <button
+                class="btn"
+                id="chatApiKeySave"
+                onclick="saveChatApiKey()"
+                title="Save API key"
+                style="padding:8px 12px;min-width:auto"
+              >
+                💾
+              </button>
+            </div>
+          </div>
         </div>
         <div class="settings-section">
           <div class="settings-section-title">Knowledge Base</div>
@@ -4064,6 +4220,18 @@ Reranking models rescore initial search results to improve relevance ordering.</
               <button class="settings-toggle active" id="chatRerank" type="button"></button>
             </div>
           </div>
+          <div class="settings-row">
+            <div class="settings-label">
+              <span class="settings-label-text">Chat Mode</span>
+              <span class="settings-label-hint">Pipeline: fixed RAG retrieval. Agent: LLM chooses which tools to call.</span>
+            </div>
+            <div class="settings-control">
+              <select class="settings-select" id="chatMode">
+                <option value="pipeline">Pipeline (fixed RAG)</option>
+                <option value="agent">Agent (tool-calling)</option>
+              </select>
+            </div>
+          </div>
         </div>
         <div class="settings-section">
           <div class="settings-section-title">Custom Instructions</div>
@@ -4280,7 +4448,7 @@ let lastEmbedding = null;
 
 // ── Init ──
 // ── Anonymous Telemetry ──
-const TELEMETRY_URL = 'https://vai.mlynn.org/api/telemetry';
+const TELEMETRY_URL = 'https://vaicli.com/api/telemetry';
 const TELEMETRY_KEY = 'vai-telemetry-enabled';
 
 function isTelemetryEnabled() {
@@ -5318,8 +5486,8 @@ const BENCH_SAMPLE_TEXTS = [
 ];
 
 const MODEL_COLORS = [
-  '#00ED64', '#71F6BA', '#0498EC', '#B45AF2', '#FFC010',
-  '#FF6960', '#B45AF2', '#FFC010', '#016BF8', '#C0FAE6',
+  '#00D4AA', '#5CE8CC', '#40E0FF', '#B45AF2', '#FFC010',
+  '#FF6960', '#B45AF2', '#FFC010', '#0088CC', '#A8F0E0',
 ];
 
 window.doBenchLatency = async function() {
@@ -5660,7 +5828,7 @@ window.doBenchQuantization = async function() {
     const baseline = completed.find(r => r.dtype === 'float') || completed[0];
     const maxBytes = Math.max(...completed.map(r => r.bytesPerVec));
     const maxLatency = Math.max(...completed.map(r => r.latency));
-    const DTYPE_COLORS = { float: '#00ED64', int8: '#71F6BA', uint8: '#0498EC', ubinary: '#FFC010', binary: '#FF6960' };
+    const DTYPE_COLORS = { float: '#00D4AA', int8: '#5CE8CC', uint8: '#40E0FF', ubinary: '#FFC010', binary: '#FF6960' };
 
     // ── Storage Bar Chart ──
     let storageHTML = '';
@@ -5671,7 +5839,7 @@ window.doBenchQuantization = async function() {
       const savings = r.bytesPerVec < baseline.bytesPerVec
         ? `${(baseline.bytesPerVec / r.bytesPerVec).toFixed(0)}× smaller`
         : 'baseline';
-      const color = DTYPE_COLORS[r.dtype] || '#0498EC';
+      const color = DTYPE_COLORS[r.dtype] || '#40E0FF';
       storageHTML += `<div class="quant-bar-group">
         <div class="quant-bar-label">
           <span class="dtype-name">${r.dtype}</span>
@@ -5689,7 +5857,7 @@ window.doBenchQuantization = async function() {
     const minLatency = Math.min(...completed.map(r => r.latency));
     for (const r of completed) {
       const pct = Math.max(8, (r.latency / maxLatency) * 100);
-      const color = DTYPE_COLORS[r.dtype] || '#0498EC';
+      const color = DTYPE_COLORS[r.dtype] || '#40E0FF';
       const badge = r.latency === minLatency ? ' ⚡' : '';
       latencyHTML += `<div class="quant-bar-group">
         <div class="quant-bar-label">
@@ -6476,6 +6644,8 @@ function initSettings() {
   }
   const chatModel = document.getElementById('chatModel');
   if (chatModel) chatModel.addEventListener('change', saveChatSettings);
+  const chatMode = document.getElementById('chatMode');
+  if (chatMode) chatMode.addEventListener('change', saveChatSettings);
   const chatMaxDocs = document.getElementById('chatMaxDocs');
   if (chatMaxDocs) chatMaxDocs.addEventListener('change', saveChatSettings);
 
@@ -6487,6 +6657,23 @@ function initSettings() {
   const chatSystemPrompt = document.getElementById('chatSystemPrompt');
   if (chatSystemPrompt) chatSystemPrompt.addEventListener('input', saveChatSettingsDebounced);
 
+  // API key input listeners
+  const chatApiKey = document.getElementById('chatApiKey');
+  if (chatApiKey) {
+    // Mark as modified when user types
+    chatApiKey.addEventListener('input', () => {
+      delete chatApiKey.dataset.isMasked;
+      delete chatApiKey.dataset.actualKey;
+    });
+    // Save on Enter key
+    chatApiKey.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        saveChatApiKey();
+      }
+    });
+  }
+
   // Set up settings sub-navigation
   setupSettingsNav();
 }
@@ -6860,10 +7047,29 @@ function initMultimodal() {
   const dropZone = document.getElementById('mmDropZone');
   const fileInput = document.getElementById('mmFileInput');
 
-  // Click to browse
-  dropZone.addEventListener('click', () => fileInput.click());
+  // Click to browse — in Electron, use native dialog (more reliable);
+  // in browser, use <input type="file"> with a re-trigger guard.
+  let fileDialogOpen = false;
+  dropZone.addEventListener('click', async () => {
+    if (fileDialogOpen) return;
+    fileDialogOpen = true;
+    try {
+      if (window.vai && window.vai.isElectron && window.vai.openImageDialog) {
+        const result = await window.vai.openImageDialog();
+        if (!result.canceled && result.dataUrl) {
+          handleMultimodalImageFromData(result.dataUrl, result.name, result.size);
+        }
+      } else {
+        fileInput.click();
+      }
+    } finally {
+      setTimeout(() => { fileDialogOpen = false; }, 300);
+    }
+  });
   fileInput.addEventListener('change', (e) => {
+    fileDialogOpen = false;
     if (e.target.files && e.target.files[0]) handleMultimodalImage(e.target.files[0]);
+    fileInput.value = '';
   });
 
   // Drag and drop
@@ -6915,6 +7121,23 @@ function initMultimodal() {
   });
 }
 
+// Handle image from Electron native dialog (already has dataUrl)
+function handleMultimodalImageFromData(dataUrl, name, size) {
+  mmImageData = dataUrl;
+  const img = document.getElementById('mmPreviewImg');
+  img.src = mmImageData;
+  img.onload = () => {
+    const info = document.getElementById('mmFileInfo');
+    const sizeStr = size > 1024 * 1024
+      ? (size / (1024 * 1024)).toFixed(1) + ' MB'
+      : (size / 1024).toFixed(0) + ' KB';
+    info.textContent = `${name} · ${img.naturalWidth}×${img.naturalHeight} · ${sizeStr}`;
+  };
+  document.getElementById('mmDropZone').style.display = 'none';
+  document.getElementById('mmPreview').classList.add('visible');
+  hideError('mmError');
+}
+
 function handleMultimodalImage(file) {
   const VALID_TYPES = ['image/png', 'image/jpeg', 'image/webp', 'image/gif'];
   if (!VALID_TYPES.includes(file.type)) {
@@ -7052,13 +7275,33 @@ function renderGalleryGrid() {
     const addSlot = document.createElement('div');
     addSlot.className = 'mm-gallery-slot';
     addSlot.innerHTML = '<span class="mm-slot-add">+</span>';
-    addSlot.addEventListener('click', () => {
-      document.getElementById('mmGalleryFileInput').click();
+    addSlot.addEventListener('click', async () => {
+      if (window._galleryDialogOpen) return;
+      window._galleryDialogOpen = true;
+      try {
+        if (window.vai && window.vai.isElectron && window.vai.openImageDialog) {
+          const result = await window.vai.openImageDialog();
+          if (!result.canceled && result.dataUrl) {
+            addGalleryImageFromData(result.dataUrl, result.name, result.size);
+          }
+        } else {
+          document.getElementById('mmGalleryFileInput').click();
+        }
+      } finally {
+        setTimeout(() => { window._galleryDialogOpen = false; }, 300);
+      }
     });
     grid.appendChild(addSlot);
   }
 }
 
+// Add gallery image from Electron native dialog (already has dataUrl)
+function addGalleryImageFromData(dataUrl, name, size) {
+  if (mmGalleryImages.length >= 6) return;
+  mmGalleryImages.push({ dataUrl, name, size });
+  renderGalleryGrid();
+}
+
 function addGalleryImage(file) {
   const VALID_TYPES = ['image/png', 'image/jpeg', 'image/webp', 'image/gif'];
   if (!VALID_TYPES.includes(file.type)) return;
@@ -7229,7 +7472,22 @@ init = async function() {
 // ── Start ──
 init();
  
-// ──  Vector Space Invaders (Easter Egg) ──    
+// ──  Vector Space Invaders (Easter Egg) ──
+
+// VSI Telemetry helper
+function sendVSITelemetry(event, extra) {
+  try {
+    fetch('https://vaicli.com/api/telemetry', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ event, ...extra, sentAt: new Date().toISOString() }),
+    }).catch(() => {});
+  } catch (_) {}
+}
+
+let _vsiGameStartTime = 0;
+let _vsiGameTrigger = 'unknown';
+
 (function initEasterEgg() {
   const KONAMI = ['ArrowUp','ArrowUp','ArrowDown','ArrowDown','ArrowLeft','ArrowRight','ArrowLeft','ArrowRight','b','a'];
   let konamiIdx = 0;
@@ -7237,7 +7495,7 @@ init();
 
   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(); } }
+    if (e.key === KONAMI[konamiIdx]) { konamiIdx++; if (konamiIdx === KONAMI.length) { konamiIdx = 0; _vsiGameTrigger = 'konami'; launchVSI(); } }
     else { konamiIdx = 0; }
   });
 
@@ -7247,7 +7505,7 @@ init();
       const now = Date.now();
       logoClicks.push(now);
       logoClicks = logoClicks.filter(t => now - t < 2000);
-      if (logoClicks.length >= 7) { logoClicks = []; launchVSI(); }
+      if (logoClicks.length >= 7) { logoClicks = []; _vsiGameTrigger = 'logo_click'; launchVSI(); }
     });
   }
 
@@ -7256,6 +7514,22 @@ init();
     const canvas = document.getElementById('vsiCanvas');
     if (!overlay || !canvas) return;
     overlay.style.display = 'flex';
+    _vsiGameStartTime = Date.now();
+
+    // Detect version from page
+    const versionEl = document.querySelector('.version-label, [data-version]');
+    const version = versionEl ? (versionEl.dataset?.version || versionEl.textContent?.trim()) : 'unknown';
+    const ua = navigator.userAgent;
+    const platform = /Mac/.test(ua) ? 'macOS' : /Win/.test(ua) ? 'Windows' : /Linux/.test(ua) ? 'Linux' : /Android/.test(ua) ? 'Android' : /iPhone|iPad/.test(ua) ? 'iOS' : 'unknown';
+
+    sendVSITelemetry('vsi_game_start', {
+      version,
+      context: 'playground',
+      platform,
+      locale: navigator.language || 'unknown',
+      trigger: _vsiGameTrigger,
+    });
+
     startVSI(canvas, () => { overlay.style.display = 'none'; });
   }
 })();
@@ -7277,7 +7551,7 @@ function startVSI(canvas, onExit) {
     ctx.quadraticCurveTo(x - size * 0.6, y - size * 0.3, x, y - size);
     ctx.fill();
     // Central vein
-    ctx.strokeStyle = color === '#00ED64' ? '#00A35C' : color;
+    ctx.strokeStyle = color === '#00D4AA' ? '#009E80' : color;
     ctx.lineWidth = 1;
     ctx.beginPath();
     ctx.moveTo(x, y - size);
@@ -7312,7 +7586,7 @@ function startVSI(canvas, onExit) {
   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 keyDown = (e) => { keys[e.key] = true; if (['ArrowLeft','ArrowRight',' ','Escape'].includes(e.key)) e.preventDefault(); if (e.key === 'Escape') { sendVSITelemetry('vsi_game_over', { score, wave, durationMs: Date.now() - _vsiGameStartTime, livesRemaining: lives, exitReason: 'esc' }); cleanup(); onExit(); } };
   const keyUp = (e) => { keys[e.key] = false; };
   document.addEventListener('keydown', keyDown);
   document.addEventListener('keyup', keyUp);
@@ -7353,7 +7627,7 @@ function startVSI(canvas, onExit) {
   }
 
   function addExplosion(x, y, sim) {
-    const color = sim > 0.7 ? '#00ED64' : sim > 0.4 ? '#FFC010' : '#FF6960';
+    const color = sim > 0.7 ? '#00D4AA' : 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;
@@ -7445,7 +7719,7 @@ function startVSI(canvas, onExit) {
       if (enemies[i].y > H - 50) {
         enemies.splice(i, 1);
         lives--;
-        if (lives <= 0) gameOver = true;
+        if (lives <= 0) { gameOver = true; sendVSITelemetry('vsi_game_over', { score, wave, durationMs: Date.now() - _vsiGameStartTime, livesRemaining: 0, exitReason: 'death' }); }
       }
     }
 
@@ -7482,16 +7756,16 @@ function startVSI(canvas, onExit) {
     }
 
     // Ship (Voyage AI leaf)
-    drawLeaf(ctx, ship.x, H - 32, 12, '#00ED64');
+    drawLeaf(ctx, ship.x, H - 32, 12, '#00D4AA');
     // Ship label
-    ctx.fillStyle = '#00ED64';
+    ctx.fillStyle = '#00D4AA';
     ctx.font = '9px monospace';
     ctx.textAlign = 'center';
     ctx.fillText('voyage', ship.x, H - 14);
 
     // Bullets (small leaf shapes)
     for (const b of bullets) {
-      drawLeaf(ctx, b.x, b.y, 3, '#00ED64');
+      drawLeaf(ctx, b.x, b.y, 3, '#00D4AA');
     }
 
     // Boss
@@ -7516,7 +7790,7 @@ function startVSI(canvas, onExit) {
     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.strokeStyle = '#40E0FF';
       ctx.lineWidth = 1;
       ctx.strokeRect(e.x - e.w / 2, e.y - e.h / 2, e.w, e.h);
       ctx.fillStyle = '#E8EDEB';
@@ -7556,19 +7830,19 @@ function startVSI(canvas, onExit) {
 
     // Lives (leaf icons)
     for (let i = 0; i < lives; i++) {
-      drawLeaf(ctx, W - 20 - (i * 18), 15, 6, '#00ED64');
+      drawLeaf(ctx, W - 20 - (i * 18), 15, 6, '#00D4AA');
     }
 
     // Title with Voyage AI branding
-    ctx.fillStyle = '#00ED64';
+    ctx.fillStyle = '#00D4AA';
     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';
+    drawLeaf(ctx, W - 25, 25, 8, '#00D4AA');
+    ctx.fillStyle = '#00D4AA';
     ctx.font = 'bold 9px monospace';
     ctx.textAlign = 'right';
     ctx.fillText('VOYAGE AI', W - 38, 28);
@@ -7578,7 +7852,7 @@ function startVSI(canvas, onExit) {
     if (gameOver) {
       ctx.fillStyle = 'rgba(0,30,43,0.8)';
       ctx.fillRect(0, 0, W, H);
-      ctx.fillStyle = '#00ED64';
+      ctx.fillStyle = '#00D4AA';
       ctx.font = 'bold 28px monospace';
       ctx.textAlign = 'center';
       ctx.fillText('GAME OVER', W / 2, H / 2 - 30);
@@ -7679,6 +7953,7 @@ function saveChatSettings() {
     maxDocs: parseInt(document.getElementById('chatMaxDocs').value) || 5,
     rerank: document.getElementById('chatRerank').classList.contains('active'),
     systemPrompt: document.getElementById('chatSystemPrompt').value.trim(),
+    mode: document.getElementById('chatMode').value,
   };
   fetch('/api/chat/config', {
     method: 'POST',
@@ -7727,6 +8002,7 @@ async function loadChatConfig() {
     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;
+    if (data.mode || data.chat?.mode) document.getElementById('chatMode').value = data.mode || data.chat?.mode || 'pipeline';
     updateChatStatus();
     // Show not-configured banner if incomplete
     const notConfigured = document.getElementById('chatNotConfigured');
@@ -7740,23 +8016,137 @@ async function loadChatConfig() {
   }
 }
 
+// ── Chat API Key Management ──
+
+async function loadChatApiKey() {
+  if (!window.vai?.llmKey) return;
+  const apiKeyInput = document.getElementById('chatApiKey');
+  if (!apiKeyInput) return;
+
+  try {
+    const key = await window.vai.llmKey.get();
+    if (key) {
+      // Mask the key by default (show first 4 + last 4)
+      const masked = key.slice(0, 4) + '•'.repeat(Math.max(0, key.length - 8)) + key.slice(-4);
+      apiKeyInput.value = masked;
+      apiKeyInput.dataset.actualKey = key;
+      apiKeyInput.dataset.isMasked = 'true';
+      apiKeyInput.type = 'password';
+    } else {
+      apiKeyInput.value = '';
+      delete apiKeyInput.dataset.actualKey;
+      delete apiKeyInput.dataset.isMasked;
+    }
+  } catch (err) {
+    console.error('Failed to load LLM API key:', err);
+  }
+}
+
+function toggleChatApiKeyVisibility() {
+  const apiKeyInput = document.getElementById('chatApiKey');
+  const toggleBtn = document.getElementById('chatApiKeyToggle');
+  if (!apiKeyInput || !toggleBtn) return;
+
+  if (apiKeyInput.dataset.isMasked === 'true' && apiKeyInput.dataset.actualKey) {
+    // Show actual key
+    apiKeyInput.value = apiKeyInput.dataset.actualKey;
+    apiKeyInput.type = 'text';
+    apiKeyInput.dataset.isMasked = 'false';
+    toggleBtn.textContent = '🙈';
+    toggleBtn.title = 'Hide API key';
+  } else if (apiKeyInput.dataset.actualKey) {
+    // Re-mask the key
+    const key = apiKeyInput.dataset.actualKey;
+    const masked = key.slice(0, 4) + '•'.repeat(Math.max(0, key.length - 8)) + key.slice(-4);
+    apiKeyInput.value = masked;
+    apiKeyInput.type = 'password';
+    apiKeyInput.dataset.isMasked = 'true';
+    toggleBtn.textContent = '👁️';
+    toggleBtn.title = 'Show API key';
+  } else {
+    // No stored key, just toggle between text/password for new input
+    apiKeyInput.type = apiKeyInput.type === 'password' ? 'text' : 'password';
+    toggleBtn.textContent = apiKeyInput.type === 'password' ? '👁️' : '🙈';
+    toggleBtn.title = apiKeyInput.type === 'password' ? 'Show API key' : 'Hide API key';
+  }
+}
+
+async function saveChatApiKey() {
+  if (!window.vai?.llmKey) return;
+  const apiKeyInput = document.getElementById('chatApiKey');
+  const toggleBtn = document.getElementById('chatApiKeyToggle');
+  if (!apiKeyInput) return;
+
+  let key = apiKeyInput.value.trim();
+
+  // If showing masked value and it hasn't been modified, no need to save
+  if (apiKeyInput.dataset.isMasked === 'true' && apiKeyInput.dataset.actualKey) {
+    const currentMasked = apiKeyInput.dataset.actualKey.slice(0, 4) + '•'.repeat(Math.max(0, apiKeyInput.dataset.actualKey.length - 8)) + apiKeyInput.dataset.actualKey.slice(-4);
+    if (key === currentMasked) {
+      flashSaved();
+      return;
+    }
+  }
+
+  if (!key) {
+    // Delete the key if empty
+    try {
+      await window.vai.llmKey.delete();
+      delete apiKeyInput.dataset.actualKey;
+      delete apiKeyInput.dataset.isMasked;
+      flashSaved();
+    } catch (err) {
+      console.error('Failed to delete LLM API key:', err);
+      alert('Failed to delete API key: ' + err.message);
+    }
+    return;
+  }
+
+  try {
+    await window.vai.llmKey.set(key);
+    // Mask the newly saved key
+    const masked = key.slice(0, 4) + '•'.repeat(Math.max(0, key.length - 8)) + key.slice(-4);
+    apiKeyInput.value = masked;
+    apiKeyInput.dataset.actualKey = key;
+    apiKeyInput.dataset.isMasked = 'true';
+    apiKeyInput.type = 'password';
+    toggleBtn.textContent = '👁️';
+    toggleBtn.title = 'Show API key';
+    flashSaved();
+  } catch (err) {
+    console.error('Failed to save LLM API key:', err);
+    alert('Failed to save API key: ' + err.message);
+  }
+}
+
 function updateChatStatus() {
   const provider = document.getElementById('chatProvider');
   const db = document.getElementById('chatDb').value;
   const collection = document.getElementById('chatCollection').value;
+  const mode = document.getElementById('chatMode')?.value || 'pipeline';
   const providerLabel = provider.value
     ? provider.options[provider.selectedIndex].text
     : 'No provider';
-  document.getElementById('chatStatusProvider').textContent = providerLabel;
+  const modeLabel = mode === 'agent' ? 'Agent' : 'Pipeline';
+  document.getElementById('chatStatusProvider').textContent = `${providerLabel} (${modeLabel})`;
   document.getElementById('chatStatusDb').textContent =
-    (db && collection) ? `${db}.${collection}` : 'No database';
+    (db && collection) ? `${db}.${collection}` : (mode === 'agent' ? 'Agent discovers' : 'No database');
 }
 
 async function chatProviderChanged() {
   updateChatStatus();
   const provider = document.getElementById('chatProvider').value;
   const modelSelect = document.getElementById('chatModel');
-  
+  const apiKeyRow = document.getElementById('chatApiKeyRow');
+
+  // Show/hide API key row based on provider (not needed for Ollama)
+  if (apiKeyRow) {
+    apiKeyRow.style.display = (provider === 'anthropic' || provider === 'openai') ? 'flex' : 'none';
+    if (provider === 'anthropic' || provider === 'openai') {
+      await loadChatApiKey();
+    }
+  }
+
   if (!provider) {
     modelSelect.innerHTML = '<option value="">Select provider first</option>';
     return;
@@ -7834,6 +8224,123 @@ function chatInputKeydown(e) {
   }
 }
 
+/**
+ * Lightweight markdown-to-HTML renderer for assistant chat messages.
+ * Handles: fenced code blocks, inline code, headings, bold, italic,
+ * links, images, unordered/ordered lists, blockquotes, tables, and <hr>.
+ * No external dependencies.
+ */
+function renderMarkdown(md) {
+  // Escape HTML to prevent XSS, then selectively render markdown
+  function esc(s) {
+    return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+  }
+
+  // Extract fenced code blocks first (preserve content as-is)
+  const codeBlocks = [];
+  let text = md.replace(/```(\w*)\n([\s\S]*?)```/g, (_, lang, code) => {
+    const idx = codeBlocks.length;
+    codeBlocks.push(`<pre><code${lang ? ' data-lang="' + esc(lang) + '"' : ''}>${esc(code.replace(/\n$/, ''))}</code></pre>`);
+    return '\x00CB' + idx + '\x00';
+  });
+
+  // Escape remaining HTML
+  text = esc(text);
+
+  // Restore code block placeholders
+  text = text.replace(/\x00CB(\d+)\x00/g, (_, i) => codeBlocks[i]);
+
+  // Inline code (must come after escape but before other inline formatting)
+  text = text.replace(/`([^`\n]+)`/g, '<code>$1</code>');
+
+  // Headings (must be at line start)
+  text = text.replace(/^#### (.+)$/gm, '<h4>$1</h4>');
+  text = text.replace(/^### (.+)$/gm, '<h3>$1</h3>');
+  text = text.replace(/^## (.+)$/gm, '<h2>$1</h2>');
+  text = text.replace(/^# (.+)$/gm, '<h1>$1</h1>');
+
+  // Horizontal rule
+  text = text.replace(/^---+$/gm, '<hr>');
+
+  // Bold and italic
+  text = text.replace(/\*\*\*(.+?)\*\*\*/g, '<strong><em>$1</em></strong>');
+  text = text.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
+  text = text.replace(/\*(.+?)\*/g, '<em>$1</em>');
+
+  // Links and images
+  text = text.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, '<img alt="$1" src="$2" style="max-width:100%;border-radius:4px;">');
+  text = text.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener">$1</a>');
+
+  // Tables (pipe-delimited)
+  text = text.replace(/((?:^\|.+\|$\n?)+)/gm, (block) => {
+    const rows = block.trim().split('\n').filter(r => r.trim());
+    if (rows.length < 2) return block;
+    // Check if second row is separator
+    const sep = rows[1];
+    if (!/^\|[\s:-]+\|$/.test(sep.trim().replace(/\|/g, '|'))) return block;
+    const headerCells = rows[0].split('|').filter(c => c.trim() !== '').map(c => c.trim());
+    let html = '<table><thead><tr>' + headerCells.map(c => '<th>' + c + '</th>').join('') + '</tr></thead><tbody>';
+    for (let i = 2; i < rows.length; i++) {
+      const cells = rows[i].split('|').filter(c => c.trim() !== '').map(c => c.trim());
+      html += '<tr>' + cells.map(c => '<td>' + c + '</td>').join('') + '</tr>';
+    }
+    html += '</tbody></table>';
+    return html;
+  });
+
+  // Blockquotes
+  text = text.replace(/^&gt; (.+)$/gm, '<blockquote>$1</blockquote>');
+  // Merge adjacent blockquotes
+  text = text.replace(/<\/blockquote>\n<blockquote>/g, '\n');
+
+  // Unordered lists (lines starting with - or *)
+  text = text.replace(/((?:^[\s]*[-*] .+$\n?)+)/gm, (block) => {
+    const items = block.trim().split('\n').map(line => {
+      const content = line.replace(/^[\s]*[-*] /, '');
+      return '<li>' + content + '</li>';
+    });
+    return '<ul>' + items.join('') + '</ul>';
+  });
+
+  // Ordered lists (lines starting with number.)
+  text = text.replace(/((?:^[\s]*\d+\. .+$\n?)+)/gm, (block) => {
+    const items = block.trim().split('\n').map(line => {
+      const content = line.replace(/^[\s]*\d+\. /, '');
+      return '<li>' + content + '</li>';
+    });
+    return '<ol>' + items.join('') + '</ol>';
+  });
+
+  // Paragraphs: wrap remaining text lines that aren't already wrapped in block elements
+  const blockTags = ['<h1', '<h2', '<h3', '<h4', '<hr', '<pre', '<ul', '<ol', '<table', '<blockquote'];
+  const lines = text.split('\n');
+  const result = [];
+  let paraLines = [];
+
+  function flushPara() {
+    if (paraLines.length > 0) {
+      const content = paraLines.join('\n').trim();
+      if (content) result.push('<p>' + content + '</p>');
+      paraLines = [];
+    }
+  }
+
+  for (const line of lines) {
+    const trimmed = line.trim();
+    if (trimmed === '') {
+      flushPara();
+    } else if (blockTags.some(tag => trimmed.startsWith(tag))) {
+      flushPara();
+      result.push(line);
+    } else {
+      paraLines.push(line);
+    }
+  }
+  flushPara();
+
+  return result.join('\n');
+}
+
 function addChatMessage(role, content, sources) {
   const container = document.getElementById('chatMessages');
   const div = document.createElement('div');
@@ -7877,12 +8384,14 @@ async function sendChatMessage() {
   const maxDocs = parseInt(document.getElementById('chatMaxDocs').value) || 5;
   const rerank = document.getElementById('chatRerank').classList.contains('active');
   const systemPrompt = document.getElementById('chatSystemPrompt').value.trim() || undefined;
+  const mode = document.getElementById('chatMode')?.value || 'pipeline';
+  const isAgent = mode === 'agent';
 
   if (!provider) {
     addChatMessage('system-msg', 'Please select an LLM provider in <a href="#" onclick="openChatSettings();return false;">Chat Settings</a>.');
     return;
   }
-  if (!db || !collection) {
+  if (!isAgent && (!db || !collection)) {
     addChatMessage('system-msg', 'Please configure a database and collection in <a href="#" onclick="openChatSettings();return false;">Chat Settings</a>.');
     return;
   }
@@ -7895,7 +8404,7 @@ async function sendChatMessage() {
   // Show typing indicator
   const typing = document.createElement('div');
   typing.className = 'chat-typing';
-  typing.textContent = 'Thinking';
+  typing.textContent = isAgent ? 'Agent working' : 'Thinking';
   document.getElementById('chatMessages').appendChild(typing);
 
   // Disable input
@@ -7907,7 +8416,7 @@ async function sendChatMessage() {
     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 }),
+      body: JSON.stringify({ query, db, collection, provider, model, maxDocs, rerank, systemPrompt, mode }),
     });
 
     if (!res.ok) {
@@ -7924,6 +8433,7 @@ async function sendChatMessage() {
     let assistantDiv = null;
     let fullText = '';
     let sources = [];
+    let toolCallsDiv = null;
 
     while (true) {
       const { done, value } = await reader.read();
@@ -7946,6 +8456,37 @@ async function sendChatMessage() {
             typing.textContent = `Retrieved ${data.docs?.length || 0} docs (${data.timeMs}ms)`;
           }
 
+          if (currentEvent === 'tool_call') {
+            if (!toolCallsDiv) {
+              toolCallsDiv = document.createElement('div');
+              toolCallsDiv.className = 'chat-tool-calls';
+              document.getElementById('chatMessages').appendChild(toolCallsDiv);
+            }
+            const tc = document.createElement('div');
+            tc.className = 'chat-tool-call' + (data.error ? ' error' : '');
+            const icon = document.createElement('span');
+            icon.className = 'tool-icon';
+            icon.textContent = '\u2699';
+            tc.appendChild(icon);
+            const nameSpan = document.createElement('span');
+            nameSpan.className = 'tool-name';
+            nameSpan.textContent = data.name;
+            tc.appendChild(nameSpan);
+            const timeSpan = document.createElement('span');
+            timeSpan.className = 'tool-time';
+            timeSpan.textContent = (data.timeMs || 0) + 'ms';
+            tc.appendChild(timeSpan);
+            if (data.error) {
+              const errSpan = document.createElement('span');
+              errSpan.className = 'tool-error';
+              errSpan.textContent = data.error;
+              tc.appendChild(errSpan);
+            }
+            toolCallsDiv.appendChild(tc);
+            typing.textContent = 'Calling ' + data.name + '...';
+            document.getElementById('chatMessages').scrollTop = document.getElementById('chatMessages').scrollHeight;
+          }
+
           if (currentEvent === 'chunk') {
             if (!assistantDiv) {
               typing.remove();
@@ -7957,6 +8498,12 @@ async function sendChatMessage() {
           }
 
           if (currentEvent === 'done') {
+            // Render accumulated text as markdown for assistant messages
+            if (assistantDiv && fullText) {
+              const contentEl = assistantDiv.querySelector('.chat-message-content');
+              contentEl.innerHTML = renderMarkdown(fullText);
+              contentEl.classList.add('rendered');
+            }
             sources = data.sources || [];
             if (sources.length > 0 && assistantDiv) {
               const details = document.createElement('details');
@@ -8022,6 +8569,9 @@ window.switchSettingsSection = switchSettingsSection;
 window.updateChatStatus = updateChatStatus;
 window.chatInputKeydown = chatInputKeydown;
 window.chatProviderChanged = chatProviderChanged;
+window.loadChatApiKey = loadChatApiKey;
+window.toggleChatApiKeyVisibility = toggleChatApiKeyVisibility;
+window.saveChatApiKey = saveChatApiKey;
 
 // ── Start ──
 init();
@@ -8141,13 +8691,13 @@ init();
 .bug-error{padding:10px 12px;background:rgba(255,107,107,0.15);border:1px solid rgba(255,107,107,0.3);border-radius:8px;color:var(--error);font-size:13px;margin-bottom:16px}
 .bug-actions{display:flex;gap:12px}
 .bug-actions button{flex:1;padding:12px 16px;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;border:none}
-.bug-actions .primary{background:linear-gradient(135deg,var(--accent),#00c853);color:#000}
-.bug-actions .primary:hover{box-shadow:0 4px 12px rgba(0,237,100,0.4)}
+.bug-actions .primary{background:linear-gradient(135deg,var(--accent),#5CE8CC);color:#000}
+.bug-actions .primary:hover{box-shadow:0 4px 12px rgba(0,212,170,0.4)}
 .bug-actions .primary:disabled{opacity:0.6;cursor:not-allowed}
 .bug-actions .secondary{background:rgba(255,255,255,0.1);color:var(--text);border:1px solid var(--border)}
 .bug-actions .secondary:hover{background:rgba(255,255,255,0.15)}
 .bug-success{padding:40px 20px;text-align:center}
-.bug-success .icon{width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#00c853);color:#000;font-size:32px;display:flex;align-items:center;justify-content:center;margin:0 auto 20px}
+.bug-success .icon{width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#5CE8CC);color:#000;font-size:32px;display:flex;align-items:center;justify-content:center;margin:0 auto 20px}
 .bug-success h3{margin:0 0 12px;color:var(--accent-text);font-size:20px}
 .bug-success p{margin:8px 0;color:var(--text-muted)}
 .bug-success code{background:rgba(255,255,255,0.1);padding:4px 8px;border-radius:4px;font-size:12px;color:var(--accent)}
@@ -8203,7 +8753,7 @@ init();
 
 <script>
 (function() {
-  const BUG_API = 'https://vai.mlynn.org/api/bugs';
+  const BUG_API = 'https://vaicli.com/api/bugs';
   const GITHUB_URL = 'https://github.com/mrlynn/voyageai-cli/issues/new';
   
   function getEnv() {