voyageai-cli 1.18.0 → 1.19.2

package/src/playground/index.html

@@ -8,27 +8,85 @@
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
 :root {
-  --bg: #1a1a2e;
-  --bg-surface: #16213e;
-  --bg-card: #1e2a47;
-  --bg-input: #0f1629;
-  --accent: #00d4aa;
-  --accent-dim: #00a88a;
-  --accent-glow: rgba(0, 212, 170, 0.15);
-  --text: #e0e0e0;
-  --text-dim: #8892a4;
-  --text-muted: #5a6478;
-  --border: #2a3550;
-  --error: #ff6b6b;
-  --warning: #ffd93d;
-  --success: #00d4aa;
-  --red: #ff6b6b;
-  --yellow: #ffd93d;
-  --green: #00d4aa;
+  /* MongoDB Design System — Dark Mode Palette (default) */
+  --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 */
+  --accent-dim: #00A35C;    /* Green Dark 1 */
+  --accent-glow: rgba(0, 237, 100, 0.12);
+  --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 */
+  --red: #FF6960;           /* Red Light 1 */
+  --yellow: #FFC010;        /* Yellow Base */
+  --green: #00ED64;         /* Green Base */
+  --blue: #0498EC;          /* Blue Light 1 (links) */
+  --purple: #B45AF2;        /* Purple Base */
+  --green-dark: #023430;    /* Green Dark 3 */
   --radius: 8px;
-  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
-  --mono: 'SF Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
-}
+  --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 */
+[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 (better contrast on white) */
+  --accent-dim: #00684A;     /* Green Dark 2 */
+  --accent-glow: rgba(0, 163, 92, 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 */
+  --red: #DB3030;            /* Red Base */
+  --yellow: #944F01;         /* Yellow Dark 2 */
+  --green: #00684A;          /* Green Dark 2 */
+  --blue: #016BF8;           /* Blue Base */
+  --purple: #5E0C9E;         /* Purple Dark 2 */
+  --green-dark: #023430;     /* Green Dark 3 */
+}
+/* Light mode shadow + card adjustments */
+[data-theme="light"] .explore-card,
+[data-theme="light"] .card,
+[data-theme="light"] .cost-strategy,
+[data-theme="light"] .cost-summary-card {
+  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);
+}
+[data-theme="light"] .cost-modal,
+[data-theme="light"] .explore-modal {
+  box-shadow: 0 20px 60px rgba(0, 30, 43, 0.2);
+}
+[data-theme="light"] .cost-modal-overlay,
+[data-theme="light"] .explore-modal-overlay {
+  background: rgba(0, 30, 43, 0.4);
+}
+[data-theme="light"] .nav {
+  box-shadow: 0 1px 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-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; }
 
 html, body { height: 100%; }
 
@@ -63,6 +121,24 @@ body {
 
 .nav-spacer { flex: 1; }
 
+.theme-toggle {
+  background: none;
+  border: 1px solid var(--border);
+  border-radius: 20px;
+  padding: 5px 10px;
+  cursor: pointer;
+  font-size: 16px;
+  line-height: 1;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.theme-toggle:hover {
+  border-color: var(--accent);
+  background: var(--accent-glow);
+}
+
 .status-dot {
   width: 8px; height: 8px;
   border-radius: 50%;
@@ -168,7 +244,7 @@ select:focus { outline: none; border-color: var(--accent); }
 
 .btn {
   background: var(--accent);
-  color: #0a0a1a;
+  color: var(--green-dark);
   border: none;
   padding: 10px 24px;
   border-radius: var(--radius);
@@ -181,12 +257,12 @@ select:focus { outline: none; border-color: var(--accent); }
   align-items: center;
   gap: 8px;
 }
-.btn:hover { background: #00eabb; transform: translateY(-1px); }
+.btn:hover { background: #71F6BA; transform: translateY(-1px); }
 .btn:active { transform: translateY(0); }
 .btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
 
 .btn-secondary {
-  background: var(--bg-input);
+  background: transparent;
   color: var(--accent);
   border: 1px solid var(--accent-dim);
 }
@@ -319,6 +395,65 @@ select:focus { outline: none; border-color: var(--accent); }
   border-radius: 4px;
   transition: width 0.6s ease, background 0.6s ease;
 }
+.metrics-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16px;
+  margin-top: 24px;
+}
+.metric-card {
+  background: var(--bg-input);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 20px 16px;
+  text-align: center;
+  transition: border-color 0.2s;
+}
+.metric-card.primary {
+  border-color: var(--accent);
+  background: var(--accent-glow);
+}
+.metric-card-value {
+  font-family: var(--mono);
+  font-size: 28px;
+  font-weight: 700;
+  line-height: 1;
+}
+.metric-card-name {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text);
+  margin-top: 10px;
+}
+.metric-card-desc {
+  font-size: 11px;
+  color: var(--text-muted);
+  margin-top: 4px;
+  line-height: 1.4;
+}
+.metric-bar {
+  width: 100%;
+  height: 6px;
+  background: var(--bg);
+  border-radius: 3px;
+  margin-top: 12px;
+  overflow: hidden;
+}
+.metric-bar-fill {
+  height: 100%;
+  border-radius: 3px;
+  transition: width 0.6s ease, background 0.6s ease;
+}
+.metric-note {
+  text-align: center;
+  font-size: 12px;
+  color: var(--text-muted);
+  margin-top: 16px;
+  padding: 10px 16px;
+  background: var(--bg-input);
+  border-radius: 8px;
+  line-height: 1.6;
+}
 
 /* Search tab */
 .search-results {
@@ -400,11 +535,10 @@ 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, 212, 170, 0.1);
+  box-shadow: 0 4px 20px rgba(0, 237, 100, 0.1);
 }
 .explore-card.expanded {
-  grid-column: 1 / -1;
-  cursor: default;
+  border-color: var(--accent);
 }
 
 .explore-card-icon {
@@ -423,20 +557,136 @@ select:focus { outline: none; border-color: var(--accent); }
 }
 .explore-card-content {
   display: none;
-  margin-top: 16px;
+}
+.explore-card-actions {
+  display: none;
+}
+
+/* Explore modal */
+.explore-modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.7);
+  backdrop-filter: blur(4px);
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.25s ease;
+}
+.explore-modal-overlay.open {
+  opacity: 1;
+  pointer-events: auto;
+}
+.explore-modal {
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  max-width: 720px;
+  width: 92%;
+  max-height: 85vh;
+  overflow-y: auto;
+  padding: 0;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+  position: relative;
+  animation: exploreModalIn 0.2s ease-out;
+}
+@keyframes exploreModalIn {
+  from { opacity: 0; transform: scale(0.95) translateY(10px); }
+  to { opacity: 1; transform: scale(1) translateY(0); }
+}
+.explore-modal::-webkit-scrollbar { width: 6px; }
+.explore-modal::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+.explore-modal-header {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 24px 28px 16px;
+  border-bottom: 1px solid var(--border);
+}
+.explore-modal-icon { font-size: 32px; }
+.explore-modal-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--text);
+}
+.explore-modal-summary {
+  font-size: 13px;
+  color: var(--text-dim);
+  margin-top: 2px;
+}
+.explore-modal-close {
+  position: absolute;
+  top: 16px; right: 18px;
+  background: none;
+  border: none;
+  color: var(--text-dim);
+  font-size: 22px;
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: 6px;
+  transition: all 0.15s;
+  z-index: 1;
+}
+.explore-modal-close:hover { background: rgba(255,255,255,0.05); color: var(--text); }
+.explore-modal-body {
+  padding: 20px 28px 24px;
   font-size: 14px;
-  line-height: 1.7;
+  line-height: 1.75;
   color: var(--text);
   white-space: pre-wrap;
 }
-.explore-card.expanded .explore-card-content { display: block; }
-
-.explore-card-actions {
-  display: none;
+.explore-modal-links {
   margin-top: 16px;
+  padding-top: 14px;
+  border-top: 1px solid var(--border);
+}
+.explore-modal-links-title {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--accent);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-bottom: 6px;
+}
+.explore-modal-links a {
+  display: block;
+  color: var(--blue);
+  font-size: 12px;
+  word-break: break-all;
+  margin-bottom: 4px;
+  text-decoration: none;
+}
+.explore-modal-links a:hover { text-decoration: underline; }
+.explore-modal-tryit {
+  margin-top: 14px;
+  padding-top: 14px;
+  border-top: 1px solid var(--border);
+}
+.explore-modal-tryit-title {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--accent);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-bottom: 8px;
+}
+.explore-modal-tryit-cmd {
+  font-family: var(--mono);
+  font-size: 12px;
+  color: var(--text-dim);
+  background: var(--bg);
+  padding: 6px 10px;
+  border-radius: 5px;
+  margin-bottom: 4px;
+}
+.explore-modal-actions {
+  display: flex;
   gap: 8px;
+  padding: 0 28px 24px;
 }
-.explore-card.expanded .explore-card-actions { display: flex; }
 
 /* Benchmark tab */
 .bench-panels { display: flex; gap: 8px; margin-bottom: 16px; }
@@ -490,7 +740,7 @@ select:focus { outline: none; border-color: var(--accent); }
   padding: 0 10px;
   font-family: var(--mono);
   font-size: 12px;
-  color: #0a0a1a;
+  color: var(--green-dark);
   font-weight: 600;
   white-space: nowrap;
 }
@@ -571,10 +821,10 @@ select:focus { outline: none; border-color: var(--accent); }
   transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
   display: flex; align-items: center; padding: 0 10px;
   font-family: var(--mono); font-size: 12px; font-weight: 600;
-  color: #0a0a1a; white-space: nowrap; min-width: fit-content;
+  color: var(--green-dark); white-space: nowrap; min-width: fit-content;
 }
-.quant-bar-fill.storage { background: linear-gradient(90deg, #00d4aa, #4ecdc4); }
-.quant-bar-fill.latency { background: linear-gradient(90deg, #45b7d1, #82aaff); }
+.quant-bar-fill.storage { background: linear-gradient(90deg, #00ED64, #71F6BA); }
+.quant-bar-fill.latency { background: linear-gradient(90deg, #0498EC, #016BF8); }
 .quant-bar-badge {
   position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
   font-size: 12px; color: var(--text-dim); font-family: var(--mono);
@@ -599,9 +849,9 @@ 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, #00d4aa, #00e4ba); }
-.quant-meter-fill.good { background: linear-gradient(90deg, #ffd93d, #ffe066); }
-.quant-meter-fill.degraded { background: linear-gradient(90deg, #ff6b6b, #ff8e8e); }
+.quant-meter-fill.perfect { background: linear-gradient(90deg, #00ED64, #71F6BA); }
+.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); }
 
 .quant-rank-cols {
@@ -629,16 +879,22 @@ select:focus { outline: none; border-color: var(--accent); }
 .quant-rank-score { color: var(--text-muted); font-size: 11px; font-family: var(--mono); margin-top: 3px; }
 
 /* Cost calculator */
+.cost-controls {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px 32px;
+  margin-bottom: 20px;
+}
+.cost-controls-full { grid-column: 1 / -1; }
 .cost-slider-row {
   display: flex;
   align-items: center;
-  gap: 16px;
-  margin-bottom: 16px;
+  gap: 12px;
 }
 .cost-slider-label {
-  font-size: 13px;
+  font-size: 12px;
   color: var(--text-dim);
-  min-width: 130px;
+  min-width: 110px;
 }
 .cost-slider {
   flex: 1;
@@ -659,12 +915,155 @@ select:focus { outline: none; border-color: var(--accent); }
 }
 .cost-slider-value {
   font-family: var(--mono);
-  font-size: 14px;
+  font-size: 13px;
   color: var(--accent);
-  min-width: 80px;
+  min-width: 70px;
   text-align: right;
   font-weight: 600;
 }
+.cost-mode-toggle {
+  display: flex;
+  gap: 0;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  overflow: hidden;
+  width: fit-content;
+}
+.cost-mode-btn {
+  padding: 8px 20px;
+  background: transparent;
+  border: none;
+  color: var(--text-dim);
+  font-size: 13px;
+  cursor: pointer;
+  transition: all 0.2s;
+  font-family: var(--mono);
+}
+.cost-mode-btn.active {
+  background: var(--accent);
+  color: var(--bg);
+  font-weight: 600;
+}
+.cost-mode-btn:hover:not(.active) {
+  background: rgba(0, 237, 100, 0.1);
+  color: var(--text);
+}
+.cost-select {
+  background: var(--bg-input);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  color: var(--text);
+  font-family: var(--mono);
+  font-size: 12px;
+  padding: 6px 10px;
+  min-width: 160px;
+}
+.cost-select:focus { border-color: var(--accent); outline: none; }
+.cost-model-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+.cost-model-label {
+  font-size: 12px;
+  color: var(--text-dim);
+  min-width: 110px;
+}
+.cost-summary {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 12px;
+  margin-bottom: 20px;
+}
+.cost-summary-card {
+  background: var(--bg-input);
+  border-radius: 8px;
+  padding: 14px 16px;
+  border: 1px solid var(--border);
+}
+.cost-summary-label {
+  font-size: 11px;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-bottom: 4px;
+}
+.cost-summary-value {
+  font-family: var(--mono);
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--accent);
+}
+.cost-summary-detail {
+  font-size: 11px;
+  color: var(--text-dim);
+  margin-top: 4px;
+  font-family: var(--mono);
+}
+.cost-strategy-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  gap: 16px;
+  margin-top: 16px;
+}
+.cost-strategy {
+  background: var(--bg-input);
+  border-radius: 10px;
+  padding: 18px;
+  border: 1px solid var(--border);
+  transition: border-color 0.2s, box-shadow 0.2s;
+  position: relative;
+}
+.cost-strategy.recommended {
+  border-color: var(--accent);
+  box-shadow: 0 0 16px var(--accent-glow);
+}
+.cost-strategy-badge {
+  position: absolute;
+  top: -10px;
+  right: 16px;
+  background: var(--accent);
+  color: var(--bg);
+  font-size: 10px;
+  font-weight: 700;
+  padding: 3px 10px;
+  border-radius: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+.cost-strategy-name {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text);
+  margin-bottom: 12px;
+}
+.cost-strategy-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 4px 0;
+  font-size: 12px;
+}
+.cost-strategy-row-label { color: var(--text-dim); }
+.cost-strategy-row-value { font-family: var(--mono); color: var(--text); font-weight: 500; }
+.cost-strategy-total {
+  border-top: 1px solid var(--border);
+  margin-top: 10px;
+  padding-top: 10px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.cost-strategy-total-label { font-size: 13px; font-weight: 600; color: var(--text); }
+.cost-strategy-total-value { font-family: var(--mono); font-size: 18px; font-weight: 700; color: var(--accent); }
+.cost-savings {
+  font-size: 11px;
+  color: var(--success);
+  font-weight: 600;
+  margin-top: 6px;
+  text-align: right;
+}
 .cost-table {
   width: 100%;
   border-collapse: collapse;
@@ -686,7 +1085,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, 212, 170, 0.03); }
+.cost-table tr:hover { background: rgba(0, 237, 100, 0.03); }
 .cost-highlight {
   color: var(--accent);
   font-weight: 600;
@@ -701,6 +1100,148 @@ select:focus { outline: none; border-color: var(--accent); }
   border-radius: 3px;
   transition: width 0.4s ease;
 }
+.cost-section-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text);
+  margin: 20px 0 8px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.cost-tip {
+  font-size: 12px;
+  color: var(--text-muted);
+  background: rgba(0, 237, 100, 0.05);
+  border-left: 3px solid var(--accent);
+  padding: 10px 14px;
+  border-radius: 0 6px 6px 0;
+  margin-top: 16px;
+}
+.cost-help-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px; height: 22px;
+  border-radius: 50%;
+  border: 1.5px solid var(--accent);
+  background: transparent;
+  color: var(--accent);
+  font-size: 13px;
+  font-weight: 700;
+  cursor: pointer;
+  margin-left: 8px;
+  transition: all 0.2s;
+  vertical-align: middle;
+  font-family: var(--mono);
+  line-height: 1;
+}
+.cost-help-btn:hover {
+  background: var(--accent);
+  color: var(--bg);
+  box-shadow: 0 0 10px var(--accent-glow);
+}
+.cost-modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.7);
+  backdrop-filter: blur(4px);
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.25s ease;
+}
+.cost-modal-overlay.open {
+  opacity: 1;
+  pointer-events: auto;
+}
+.cost-modal {
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  max-width: 680px;
+  width: 90%;
+  max-height: 85vh;
+  overflow-y: auto;
+  padding: 32px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+  position: relative;
+}
+.cost-modal::-webkit-scrollbar { width: 6px; }
+.cost-modal::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+.cost-modal-close {
+  position: absolute;
+  top: 14px; right: 16px;
+  background: none;
+  border: none;
+  color: var(--text-dim);
+  font-size: 22px;
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: 6px;
+  transition: all 0.15s;
+}
+.cost-modal-close:hover { background: rgba(255,255,255,0.05); color: var(--text); }
+.cost-modal h2 {
+  font-size: 18px;
+  color: var(--text);
+  margin: 0 0 20px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.cost-modal h3 {
+  font-size: 14px;
+  color: var(--accent);
+  margin: 22px 0 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+.cost-modal p, .cost-modal li {
+  font-size: 13px;
+  color: var(--text-dim);
+  line-height: 1.7;
+}
+.cost-modal ul { padding-left: 20px; margin: 6px 0; }
+.cost-modal li { margin-bottom: 4px; }
+.cost-modal code {
+  background: var(--bg-input);
+  padding: 2px 7px;
+  border-radius: 4px;
+  font-size: 12px;
+  color: var(--accent);
+  font-family: var(--mono);
+}
+.cost-modal .formula {
+  background: var(--bg-input);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 14px 18px;
+  margin: 10px 0;
+  font-family: var(--mono);
+  font-size: 13px;
+  color: var(--text);
+  line-height: 1.8;
+}
+.cost-modal .formula .label {
+  color: var(--text-muted);
+  font-size: 11px;
+}
+.cost-modal .formula .accent { color: var(--accent); font-weight: 600; }
+.cost-modal .example {
+  background: rgba(0, 237, 100, 0.05);
+  border-left: 3px solid var(--accent);
+  border-radius: 0 8px 8px 0;
+  padding: 12px 16px;
+  margin: 12px 0;
+  font-size: 12px;
+  color: var(--text-dim);
+  font-family: var(--mono);
+  line-height: 1.8;
+}
 
 /* History chart */
 .history-empty {
@@ -787,7 +1328,7 @@ select:focus { outline: none; border-color: var(--accent); }
   margin-bottom: 8px;
 }
 .about-text { font-size: 14px; line-height: 1.8; color: var(--text); }
-.about-text a { color: var(--accent); text-decoration: none; }
+.about-text a { color: var(--blue); text-decoration: none; }
 .about-text a:hover { text-decoration: underline; }
 .about-disclaimer {
   background: rgba(255, 215, 61, 0.08);
@@ -826,6 +1367,7 @@ select:focus { outline: none; border-color: var(--accent); }
     <span class="option-label">Default Model</span>
     <select id="globalModel" class="nav-model-select"></select>
   </div>
+  <button class="theme-toggle" id="themeToggle" title="Toggle light/dark mode">🌙</button>
   <div style="display:flex;align-items:center;gap:6px;">
     <div class="status-dot" id="statusDot"></div>
     <span class="status-label" id="statusLabel">Checking...</span>
@@ -945,7 +1487,9 @@ select:focus { outline: none; border-color: var(--accent); }
           <div class="similarity-bar-inner" id="simBar" style="width:0%"></div>
         </div>
       </div>
-      <div id="compareStats" style="text-align:center;"></div>
+      <div class="metrics-grid" id="metricsGrid"></div>
+      <div class="metric-note" id="metricNote"></div>
+      <div id="compareStats" style="text-align:center;margin-top:16px;"></div>
     </div>
   </div>
 </div>
@@ -1184,30 +1728,116 @@ Reranking models rescore initial search results to improve relevance ordering.</
   <!-- ── Cost Panel ── -->
   <div class="bench-view" id="bench-cost">
     <div class="card">
-      <div class="card-title">Cost Calculator</div>
-      <div class="cost-slider-row">
-        <span class="cost-slider-label">Tokens per query</span>
-        <input type="range" class="cost-slider" id="costTokens" min="50" max="5000" value="500" step="50">
-        <span class="cost-slider-value" id="costTokensValue">500</span>
+      <div class="card-title">💰 RAG Cost Calculator <button class="cost-help-btn" id="costHelpBtn" title="How the math works">?</button></div>
+
+      <!-- Mode toggle -->
+      <div style="margin-bottom: 20px;">
+        <div class="cost-mode-toggle">
+          <button class="cost-mode-btn active" data-mode="simple" id="costModeSimple">Simple</button>
+          <button class="cost-mode-btn" data-mode="rag" id="costModeRag">RAG Planner</button>
+        </div>
+      </div>
+
+      <!-- Simple mode (query cost comparison) -->
+      <div id="costSimpleMode">
+        <div class="cost-controls cost-controls-full">
+          <div class="cost-slider-row">
+            <span class="cost-slider-label">Tokens / query</span>
+            <input type="range" class="cost-slider" id="costTokens" min="50" max="5000" value="500" step="50">
+            <span class="cost-slider-value" id="costTokensValue">500</span>
+          </div>
+          <div class="cost-slider-row">
+            <span class="cost-slider-label">Queries / day</span>
+            <input type="range" class="cost-slider" id="costQueries" min="10" max="500000" value="1000" step="10">
+            <span class="cost-slider-value" id="costQueriesValue">1,000</span>
+          </div>
+        </div>
+        <table class="cost-table" id="costTable">
+          <thead>
+            <tr>
+              <th>Model</th>
+              <th>Type</th>
+              <th>$/1M tokens</th>
+              <th>Daily Cost</th>
+              <th>Monthly Cost</th>
+              <th style="width:30%">Relative</th>
+            </tr>
+          </thead>
+          <tbody id="costTableBody"></tbody>
+        </table>
       </div>
-      <div class="cost-slider-row">
-        <span class="cost-slider-label">Queries per day</span>
-        <input type="range" class="cost-slider" id="costQueries" min="10" max="500000" value="1000" step="10">
-        <span class="cost-slider-value" id="costQueriesValue">1,000</span>
+
+      <!-- RAG Planner mode (full TCO) -->
+      <div id="costRagMode" style="display:none;">
+        <div class="cost-section-title">📄 Documents (one-time ingestion)</div>
+        <div class="cost-controls">
+          <div class="cost-slider-row">
+            <span class="cost-slider-label">Documents</span>
+            <input type="range" class="cost-slider" id="ragDocs" min="1000" max="10000000" value="100000" step="1000">
+            <span class="cost-slider-value" id="ragDocsValue">100K</span>
+          </div>
+          <div class="cost-slider-row">
+            <span class="cost-slider-label">Tokens / doc</span>
+            <input type="range" class="cost-slider" id="ragDocTokens" min="50" max="5000" value="500" step="50">
+            <span class="cost-slider-value" id="ragDocTokensValue">500</span>
+          </div>
+        </div>
+
+        <div class="cost-section-title">🔍 Queries (recurring)</div>
+        <div class="cost-controls">
+          <div class="cost-slider-row">
+            <span class="cost-slider-label">Queries / month</span>
+            <input type="range" class="cost-slider" id="ragQueries" min="1000" max="50000000" value="1000000" step="1000">
+            <span class="cost-slider-value" id="ragQueriesValue">1M</span>
+          </div>
+          <div class="cost-slider-row">
+            <span class="cost-slider-label">Tokens / query</span>
+            <input type="range" class="cost-slider" id="ragQueryTokens" min="10" max="500" value="30" step="5">
+            <span class="cost-slider-value" id="ragQueryTokensValue">30</span>
+          </div>
+        </div>
+
+        <div class="cost-section-title">⚙️ Configuration</div>
+        <div class="cost-controls">
+          <div class="cost-model-row">
+            <span class="cost-model-label">Doc model</span>
+            <select class="cost-select" id="ragDocModel"></select>
+          </div>
+          <div class="cost-model-row">
+            <span class="cost-model-label">Query model</span>
+            <select class="cost-select" id="ragQueryModel"></select>
+          </div>
+          <div class="cost-slider-row">
+            <span class="cost-slider-label">Projection</span>
+            <input type="range" class="cost-slider" id="ragMonths" min="1" max="36" value="12" step="1">
+            <span class="cost-slider-value" id="ragMonthsValue">12 mo</span>
+          </div>
+        </div>
+
+        <!-- Summary cards -->
+        <div class="cost-summary" id="ragSummary"></div>
+
+        <!-- Strategy comparison -->
+        <div class="cost-section-title">📊 Strategy Comparison</div>
+        <div class="cost-strategy-cards" id="ragStrategies"></div>
+
+        <!-- Per-model table -->
+        <div class="cost-section-title">📋 Per-Model Breakdown</div>
+        <table class="cost-table" id="ragTable">
+          <thead>
+            <tr>
+              <th>Model</th>
+              <th>Doc Cost</th>
+              <th>Query $/mo</th>
+              <th>Total (projected)</th>
+              <th style="width:25%">Relative</th>
+            </tr>
+          </thead>
+          <tbody id="ragTableBody"></tbody>
+        </table>
+
+        <div class="cost-tip" id="ragTip"></div>
       </div>
-      <table class="cost-table" id="costTable">
-        <thead>
-          <tr>
-            <th>Model</th>
-            <th>Type</th>
-            <th>$/1M tokens</th>
-            <th>Daily Cost</th>
-            <th>Monthly Cost</th>
-            <th style="width:30%">Relative</th>
-          </tr>
-        </thead>
-        <tbody id="costTableBody"></tbody>
-      </table>
     </div>
   </div>
 
@@ -1268,7 +1898,7 @@ Reranking models rescore initial search results to improve relevance ordering.</
         <div class="about-section-title">What You Can Do Here</div>
         <div class="about-text">
           <strong>⚡ Embed</strong> — Generate vector embeddings for any text<br>
-          <strong>⚖️ Compare</strong> — Measure cosine similarity between texts<br>
+          <strong>⚖️ Compare</strong> — Measure similarity with cosine, dot product &amp; euclidean distance<br>
           <strong>🔍 Search</strong> — Semantic search with optional reranking<br>
           <strong>⏱ Benchmark</strong> — Compare model latency, ranking quality, and costs<br>
           <strong>📚 Explore</strong> — Learn about embeddings, vector search, RAG, and more
@@ -1301,12 +1931,61 @@ Reranking models rescore initial search results to improve relevance ordering.</
   <div class="explore-grid" id="exploreGrid"></div>
 </div>
 
+<!-- Explore Concept Modal -->
+<div class="explore-modal-overlay" id="exploreModal">
+  <div class="explore-modal">
+    <button class="explore-modal-close" id="exploreModalClose">&times;</button>
+    <div class="explore-modal-header">
+      <div class="explore-modal-icon" id="exploreModalIcon"></div>
+      <div>
+        <div class="explore-modal-title" id="exploreModalTitle"></div>
+        <div class="explore-modal-summary" id="exploreModalSummary"></div>
+      </div>
+    </div>
+    <div class="explore-modal-body" id="exploreModalBody"></div>
+    <div class="explore-modal-actions" id="exploreModalActions"></div>
+  </div>
+</div>
+
 </div><!-- .main -->
 
+<script>
+// Apply saved theme immediately to prevent flash
+(function() {
+  var t = localStorage.getItem('vai-theme') || 'dark';
+  if (t === 'light') document.documentElement.setAttribute('data-theme', 'light');
+})();
+</script>
 <script>
 (function() {
 'use strict';
 
+// ── Theme Toggle ──
+function initThemeToggle() {
+  const toggle = document.getElementById('themeToggle');
+  const saved = localStorage.getItem('vai-theme') || 'dark';
+  let current = saved;
+
+  function applyTheme(theme) {
+    current = theme;
+    if (theme === 'light') {
+      document.documentElement.setAttribute('data-theme', 'light');
+      toggle.textContent = '☀️';
+      toggle.title = 'Switch to dark mode';
+    } else {
+      document.documentElement.removeAttribute('data-theme');
+      toggle.textContent = '🌙';
+      toggle.title = 'Switch to light mode';
+    }
+    localStorage.setItem('vai-theme', theme);
+  }
+
+  applyTheme(current);
+  toggle.addEventListener('click', () => {
+    applyTheme(current === 'dark' ? 'light' : 'dark');
+  });
+}
+
 // ── State ──
 let allModels = [];
 let embedModels = [];
@@ -1548,27 +2227,73 @@ window.doCompare = async function() {
     const dimensions = dims ? parseInt(dims, 10) : undefined;
 
     const data = await apiPost('/api/similarity', { texts: [a, b], model, dimensions });
-    const sim = data.matrix[0][1];
-    const pct = Math.max(0, sim * 100);
 
-    // Color
-    let color;
-    if (sim > 0.7) color = 'var(--green)';
-    else if (sim > 0.4) color = 'var(--yellow)';
-    else color = 'var(--red)';
+    // Get raw embeddings for all metrics
+    const vecA = data.embeddings[0].embedding;
+    const vecB = data.embeddings[1].embedding;
+
+    const cosine = cosineSim(vecA, vecB);
+    const dot = dotProduct(vecA, vecB);
+    const euclid = euclideanDist(vecA, vecB);
+
+    // Hero display — cosine similarity
+    const cosinePct = Math.max(0, cosine * 100);
+    let cosineColor;
+    if (cosine > 0.7) cosineColor = 'var(--green)';
+    else if (cosine > 0.4) cosineColor = 'var(--yellow)';
+    else cosineColor = 'var(--red)';
 
     const scoreEl = document.getElementById('simScore');
-    scoreEl.textContent = sim.toFixed(4);
-    scoreEl.style.color = color;
+    scoreEl.textContent = cosine.toFixed(4);
+    scoreEl.style.color = cosineColor;
 
     const barEl = document.getElementById('simBar');
-    barEl.style.width = pct + '%';
-    barEl.style.background = color;
+    barEl.style.width = cosinePct + '%';
+    barEl.style.background = cosineColor;
+
+    // Metric cards — all three
+    const dotColor = dot > 0.7 ? 'var(--green)' : dot > 0.4 ? 'var(--yellow)' : 'var(--red)';
+    // Euclidean: 0 = identical, ~2 = max for normalized vectors. Invert for color.
+    const euclidColor = euclid < 0.6 ? 'var(--green)' : euclid < 1.0 ? 'var(--yellow)' : 'var(--red)';
+    // For euclidean bar, invert: 0 dist = 100% bar, 2.0 dist = 0%
+    const euclidPct = Math.max(0, Math.min(100, (1 - euclid / 2) * 100));
+
+    const metricsEl = document.getElementById('metricsGrid');
+    metricsEl.innerHTML = `
+      <div class="metric-card primary">
+        <div class="metric-card-value" style="color:${cosineColor}">${cosine.toFixed(4)}</div>
+        <div class="metric-card-name">Cosine Similarity</div>
+        <div class="metric-card-desc">Angle between vectors (−1 to 1). Standard for semantic search.</div>
+        <div class="metric-bar"><div class="metric-bar-fill" style="width:${cosinePct}%;background:${cosineColor}"></div></div>
+      </div>
+      <div class="metric-card">
+        <div class="metric-card-value" style="color:${dotColor}">${dot.toFixed(4)}</div>
+        <div class="metric-card-name">Dot Product</div>
+        <div class="metric-card-desc">Sum of element-wise products. Equals cosine for normalized vectors.</div>
+        <div class="metric-bar"><div class="metric-bar-fill" style="width:${Math.max(0, dot * 100)}%;background:${dotColor}"></div></div>
+      </div>
+      <div class="metric-card">
+        <div class="metric-card-value" style="color:${euclidColor}">${euclid.toFixed(4)}</div>
+        <div class="metric-card-name">Euclidean Distance</div>
+        <div class="metric-card-desc">Straight-line distance (0 = identical). Lower is more similar.</div>
+        <div class="metric-bar"><div class="metric-bar-fill" style="width:${euclidPct}%;background:${euclidColor}"></div></div>
+      </div>
+    `;
+
+    // Insight note
+    const noteEl = document.getElementById('metricNote');
+    const diff = Math.abs(cosine - dot);
+    if (diff < 0.001) {
+      noteEl.innerHTML = '💡 <strong>Cosine ≈ Dot Product</strong> — these vectors are L2-normalized (as Voyage AI models produce), so cosine similarity and dot product give identical results. Euclidean distance is <code>√(2 − 2·cosine)</code> for normalized vectors.';
+    } else {
+      noteEl.innerHTML = '💡 Cosine and dot product differ because these vectors are not perfectly L2-normalized. Atlas Vector Search uses cosine by default.';
+    }
 
     // Stats
     const statsEl = document.getElementById('compareStats');
     statsEl.innerHTML = `
       <span class="stat"><span class="stat-label">Model</span><span class="stat-value">${data.model}</span></span>
+      <span class="stat"><span class="stat-label">Dimensions</span><span class="stat-value">${vecA.length}</span></span>
       <span class="stat"><span class="stat-label">Tokens</span><span class="stat-value">${data.usage?.total_tokens || '—'}</span></span>
     `;
 
@@ -1645,6 +2370,18 @@ function cosineSim(a, b) {
   return dot / (Math.sqrt(normA) * Math.sqrt(normB));
 }
 
+function dotProduct(a, b) {
+  let sum = 0;
+  for (let i = 0; i < a.length; i++) sum += a[i] * b[i];
+  return sum;
+}
+
+function euclideanDist(a, b) {
+  let sum = 0;
+  for (let i = 0; i < a.length; i++) sum += (a[i] - b[i]) ** 2;
+  return Math.sqrt(sum);
+}
+
 function renderSearchResults(embResults, rerankResults) {
   const grid = document.getElementById('searchResultGrid');
   grid.innerHTML = '';
@@ -1750,40 +2487,64 @@ function buildExploreCards() {
     card.className = 'explore-card';
     card.dataset.key = key;
 
-    // Build links HTML
-    let linksHtml = '';
-    if (concept.links && concept.links.length > 0) {
-      linksHtml = '<div style="margin-top:12px;"><strong style="color:var(--accent);font-size:12px;">LEARN MORE</strong><br>' +
-        concept.links.map(url => `<a href="${escapeHtml(url)}" target="_blank" rel="noopener" style="color:var(--accent);font-size:12px;word-break:break-all;">${escapeHtml(url)}</a>`).join('<br>') +
-        '</div>';
-    }
-
-    // Build try-it HTML
-    let tryItHtml = '';
-    if (concept.tryIt && concept.tryIt.length > 0) {
-      tryItHtml = '<div style="margin-top:12px;"><strong style="color:var(--accent);font-size:12px;">TRY IT</strong>' +
-        concept.tryIt.map(cmd => `<div style="font-family:var(--mono);font-size:12px;color:var(--text-dim);background:var(--bg);padding:4px 8px;border-radius:4px;margin-top:4px;">$ ${escapeHtml(cmd)}</div>`).join('') +
-        '</div>';
-    }
-
     card.innerHTML = `
       <div class="explore-card-icon">${meta.icon}</div>
       <div class="explore-card-title">${escapeHtml(concept.title)}</div>
       <div class="explore-card-summary">${escapeHtml(concept.summary)}</div>
-      <div class="explore-card-content">${escapeHtml(concept.content)}${linksHtml}${tryItHtml}</div>
-      <div class="explore-card-actions">
-        <button class="btn btn-small" onclick="tryTopic('${escapeHtml(key)}')">Try it in playground →</button>
-        <button class="btn btn-secondary btn-small" onclick="collapseTopic(this)">Collapse</button>
-      </div>
     `;
-    card.addEventListener('click', function(e) {
-      if (e.target.tagName === 'BUTTON' || e.target.tagName === 'A') return;
-      if (!this.classList.contains('expanded')) {
-        this.classList.add('expanded');
-      }
-    });
+    card.addEventListener('click', () => openExploreModal(key));
     grid.appendChild(card);
   }
+
+  // Modal close handlers
+  const modal = document.getElementById('exploreModal');
+  document.getElementById('exploreModalClose').addEventListener('click', closeExploreModal);
+  modal.addEventListener('click', (e) => { if (e.target === modal) closeExploreModal(); });
+}
+
+function openExploreModal(key) {
+  const concept = exploreConcepts[key];
+  if (!concept) return;
+  const meta = CONCEPT_META[key] || { icon: '📚', tab: 'embed' };
+
+  document.getElementById('exploreModalIcon').textContent = meta.icon;
+  document.getElementById('exploreModalTitle').textContent = concept.title;
+  document.getElementById('exploreModalSummary').textContent = concept.summary;
+
+  // Build body: content + links + tryIt
+  let bodyHtml = escapeHtml(concept.content);
+
+  if (concept.links && concept.links.length > 0) {
+    bodyHtml += '<div class="explore-modal-links">' +
+      '<div class="explore-modal-links-title">Learn More</div>' +
+      concept.links.map(url =>
+        `<a href="${escapeHtml(url)}" target="_blank" rel="noopener">${escapeHtml(url)}</a>`
+      ).join('') + '</div>';
+  }
+
+  if (concept.tryIt && concept.tryIt.length > 0) {
+    bodyHtml += '<div class="explore-modal-tryit">' +
+      '<div class="explore-modal-tryit-title">Try It</div>' +
+      concept.tryIt.map(cmd =>
+        `<div class="explore-modal-tryit-cmd">$ ${escapeHtml(cmd)}</div>`
+      ).join('') + '</div>';
+  }
+
+  document.getElementById('exploreModalBody').innerHTML = bodyHtml;
+
+  // Actions
+  const actionsEl = document.getElementById('exploreModalActions');
+  actionsEl.innerHTML = `<button class="btn btn-small" id="exploreModalTry">Try it in playground →</button>`;
+  actionsEl.querySelector('#exploreModalTry').addEventListener('click', () => {
+    closeExploreModal();
+    if (meta.tab) switchTab(meta.tab);
+  });
+
+  document.getElementById('exploreModal').classList.add('open');
+}
+
+function closeExploreModal() {
+  document.getElementById('exploreModal').classList.remove('open');
 }
 
 window.tryTopic = function(key) {
@@ -1791,10 +2552,6 @@ window.tryTopic = function(key) {
   if (meta) switchTab(meta.tab);
 };
 
-window.collapseTopic = function(btn) {
-  btn.closest('.explore-card').classList.remove('expanded');
-};
-
 window.filterExplore = function() {
   const q = document.getElementById('exploreSearch').value.toLowerCase().trim();
   document.querySelectorAll('#exploreGrid .explore-card').forEach(card => {
@@ -1862,8 +2619,8 @@ const BENCH_SAMPLE_TEXTS = [
 ];
 
 const MODEL_COLORS = [
-  '#00d4aa', '#4ecdc4', '#45b7d1', '#96ceb4', '#ffd93d',
-  '#ff6b6b', '#c792ea', '#f78c6c', '#82aaff', '#c3e88d',
+  '#00ED64', '#71F6BA', '#0498EC', '#B45AF2', '#FFC010',
+  '#FF6960', '#B45AF2', '#FFC010', '#016BF8', '#C0FAE6',
 ];
 
 window.doBenchLatency = async function() {
@@ -2204,7 +2961,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: '#00d4aa', int8: '#4ecdc4', uint8: '#45b7d1', ubinary: '#ffd93d', binary: '#ff6b6b' };
+    const DTYPE_COLORS = { float: '#00ED64', int8: '#71F6BA', uint8: '#0498EC', ubinary: '#FFC010', binary: '#FF6960' };
 
     // ── Storage Bar Chart ──
     let storageHTML = '';
@@ -2215,7 +2972,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] || '#82aaff';
+      const color = DTYPE_COLORS[r.dtype] || '#0498EC';
       storageHTML += `<div class="quant-bar-group">
         <div class="quant-bar-label">
           <span class="dtype-name">${r.dtype}</span>
@@ -2233,7 +2990,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] || '#82aaff';
+      const color = DTYPE_COLORS[r.dtype] || '#0498EC';
       const badge = r.latency === minLatency ? ' ⚡' : '';
       latencyHTML += `<div class="quant-bar-group">
         <div class="quant-bar-label">
@@ -2326,7 +3083,65 @@ window.doBenchQuantization = async function() {
 };
 
 // ── Benchmark: Cost Calculator ──
+// ── Cost Calculator: Shared Helpers ──
+
+function costFormatDollars(n) {
+  if (n === 0) return '$0.00';
+  if (n < 0.01 && n > 0) return '$' + n.toFixed(4);
+  if (n < 1) return '$' + n.toFixed(2);
+  return '$' + n.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+}
+
+function costShortNum(n) {
+  if (n >= 1e9) return (n / 1e9).toFixed(n % 1e9 === 0 ? 0 : 1) + 'B';
+  if (n >= 1e6) return (n / 1e6).toFixed(n % 1e6 === 0 ? 0 : 1) + 'M';
+  if (n >= 1e3) return (n / 1e3).toFixed(n % 1e3 === 0 ? 0 : 1) + 'K';
+  return String(n);
+}
+
+function costGetPricePerM(model) {
+  const match = model.price.match(/\$([0-9.]+)\/1M/);
+  return match ? parseFloat(match[1]) : null;
+}
+
+function costGetV4Models() {
+  return allModels.filter(m => !m.legacy && !m.unreleased && costGetPricePerM(m) !== null);
+}
+
+// ── Cost Mode Toggle ──
+
+let currentCostMode = 'simple';
+
+function setCostMode(mode) {
+  currentCostMode = mode;
+  document.querySelectorAll('.cost-mode-btn').forEach(btn => {
+    btn.classList.toggle('active', btn.dataset.mode === mode);
+  });
+  document.getElementById('costSimpleMode').style.display = mode === 'simple' ? '' : 'none';
+  document.getElementById('costRagMode').style.display = mode === 'rag' ? '' : 'none';
+  if (mode === 'rag') updateRagCalculator();
+}
+
+// ── Simple Mode (query-only comparison) ──
+
 function initCostCalculator() {
+  // Mode toggle buttons
+  document.getElementById('costModeSimple').addEventListener('click', () => setCostMode('simple'));
+  document.getElementById('costModeRag').addEventListener('click', () => setCostMode('rag'));
+
+  // Help modal
+  const helpModal = document.getElementById('costHelpModal');
+  document.getElementById('costHelpBtn').addEventListener('click', () => helpModal.classList.add('open'));
+  document.getElementById('costHelpClose').addEventListener('click', () => helpModal.classList.remove('open'));
+  helpModal.addEventListener('click', (e) => { if (e.target === helpModal) helpModal.classList.remove('open'); });
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') {
+      helpModal.classList.remove('open');
+      closeExploreModal();
+    }
+  });
+
+  // Simple mode sliders
   const tokSlider = document.getElementById('costTokens');
   const qSlider = document.getElementById('costQueries');
   const tokValue = document.getElementById('costTokensValue');
@@ -2342,22 +3157,22 @@ function initCostCalculator() {
 
   tokSlider.addEventListener('input', updateCost);
   qSlider.addEventListener('input', updateCost);
-
-  // Initialize
   updateCost();
+
+  // RAG mode init
+  initRagCalculator();
 }
 
 function renderCostTable(tokensPerQuery, queriesPerDay) {
   const tbody = document.getElementById('costTableBody');
   tbody.innerHTML = '';
 
-  const models = allModels.filter(m => !m.legacy);
+  const models = allModels.filter(m => !m.legacy && !m.unreleased);
   const rows = [];
 
   models.forEach(m => {
-    const match = m.price.match(/\$([0-9.]+)\/1M/);
-    if (!match) return;
-    const pricePerM = parseFloat(match[1]);
+    const pricePerM = costGetPricePerM(m);
+    if (pricePerM === null) return;
     const dailyTokens = tokensPerQuery * queriesPerDay;
     const dailyCost = (dailyTokens / 1_000_000) * pricePerM;
     const monthlyCost = dailyCost * 30;
@@ -2388,6 +3203,234 @@ function renderCostTable(tokensPerQuery, queriesPerDay) {
   });
 }
 
+// ── RAG Planner Mode (full TCO with strategies) ──
+
+function initRagCalculator() {
+  // Populate model dropdowns
+  const embeddingModels = allModels.filter(m =>
+    m.type === 'embedding' && !m.legacy && !m.unreleased && costGetPricePerM(m) !== null
+  );
+
+  const docSelect = document.getElementById('ragDocModel');
+  const querySelect = document.getElementById('ragQueryModel');
+
+  embeddingModels.forEach(m => {
+    const pricePerM = costGetPricePerM(m);
+    const opt1 = document.createElement('option');
+    opt1.value = m.name;
+    opt1.textContent = `${m.name} ($${pricePerM.toFixed(2)}/1M)`;
+    docSelect.appendChild(opt1);
+
+    const opt2 = document.createElement('option');
+    opt2.value = m.name;
+    opt2.textContent = `${m.name} ($${pricePerM.toFixed(2)}/1M)`;
+    querySelect.appendChild(opt2);
+  });
+
+  // Set defaults: voyage-4-large for docs, voyage-4-lite for queries
+  docSelect.value = 'voyage-4-large';
+  querySelect.value = 'voyage-4-lite';
+
+  // Bind all sliders and selects
+  const ids = ['ragDocs', 'ragDocTokens', 'ragQueries', 'ragQueryTokens', 'ragMonths'];
+  ids.forEach(id => {
+    document.getElementById(id).addEventListener('input', updateRagCalculator);
+  });
+  docSelect.addEventListener('change', updateRagCalculator);
+  querySelect.addEventListener('change', updateRagCalculator);
+
+  updateRagCalculator();
+}
+
+function updateRagCalculator() {
+  const numDocs = parseInt(document.getElementById('ragDocs').value, 10);
+  const docTokens = parseInt(document.getElementById('ragDocTokens').value, 10);
+  const numQueries = parseInt(document.getElementById('ragQueries').value, 10);
+  const queryTokens = parseInt(document.getElementById('ragQueryTokens').value, 10);
+  const months = parseInt(document.getElementById('ragMonths').value, 10);
+  const docModelName = document.getElementById('ragDocModel').value;
+  const queryModelName = document.getElementById('ragQueryModel').value;
+
+  // Update slider display values
+  document.getElementById('ragDocsValue').textContent = costShortNum(numDocs);
+  document.getElementById('ragDocTokensValue').textContent = docTokens.toLocaleString();
+  document.getElementById('ragQueriesValue').textContent = costShortNum(numQueries);
+  document.getElementById('ragQueryTokensValue').textContent = queryTokens.toLocaleString();
+  document.getElementById('ragMonthsValue').textContent = months + ' mo';
+
+  const docTotalTokens = numDocs * docTokens;
+  const queryTotalTokensPerMonth = numQueries * queryTokens;
+
+  // Get model prices
+  const docModel = allModels.find(m => m.name === docModelName);
+  const queryModel = allModels.find(m => m.name === queryModelName);
+  const docPrice = docModel ? costGetPricePerM(docModel) : 0;
+  const queryPrice = queryModel ? costGetPricePerM(queryModel) : 0;
+
+  // ── Build strategies (same logic as CLI) ──
+  const strategies = [];
+  const v4Embedding = allModels.filter(m =>
+    m.type === 'embedding' && !m.legacy && !m.unreleased &&
+    (m.sharedSpace === 'voyage-4' || m.name.startsWith('voyage-4')) &&
+    costGetPricePerM(m) !== null && costGetPricePerM(m) > 0
+  );
+
+  // Strategy group 1: Symmetric with each V4 model
+  v4Embedding.forEach(m => {
+    const price = costGetPricePerM(m);
+    const docCost = (docTotalTokens / 1e6) * price;
+    const queryCostPerMonth = (queryTotalTokensPerMonth / 1e6) * price;
+    const totalCost = docCost + (queryCostPerMonth * months);
+    strategies.push({
+      name: `Symmetric: ${m.name}`,
+      type: 'symmetric',
+      docModel: m.name,
+      queryModel: m.name,
+      docCost,
+      queryCostPerMonth,
+      totalCost,
+      months,
+    });
+  });
+
+  // Strategy 2: Asymmetric — user-selected combo
+  const asymDocCost = (docTotalTokens / 1e6) * docPrice;
+  const asymQueryCostPerMonth = (queryTotalTokensPerMonth / 1e6) * queryPrice;
+  const asymTotalCost = asymDocCost + (asymQueryCostPerMonth * months);
+
+  // Only add if it's actually asymmetric (different models)
+  if (docModelName !== queryModelName) {
+    strategies.push({
+      name: `Asymmetric: ${docModelName} + ${queryModelName}`,
+      type: 'asymmetric',
+      docModel: docModelName,
+      queryModel: queryModelName,
+      docCost: asymDocCost,
+      queryCostPerMonth: asymQueryCostPerMonth,
+      totalCost: asymTotalCost,
+      months,
+      recommended: true,
+    });
+  }
+
+  // Strategy 3: Asymmetric with nano (local, free queries)
+  strategies.push({
+    name: `Asymmetric: ${docModelName} + nano (local)`,
+    type: 'asymmetric-local',
+    docModel: docModelName,
+    queryModel: 'voyage-4-nano',
+    docCost: asymDocCost,
+    queryCostPerMonth: 0,
+    totalCost: asymDocCost,
+    months,
+    localNote: 'Query cost = $0 (runs locally via HuggingFace)',
+  });
+
+  strategies.sort((a, b) => a.totalCost - b.totalCost);
+  const maxCost = Math.max(...strategies.map(s => s.totalCost), 0.01);
+
+  // ── Render summary cards ──
+  const summaryEl = document.getElementById('ragSummary');
+  summaryEl.innerHTML = `
+    <div class="cost-summary-card">
+      <div class="cost-summary-label">Document tokens</div>
+      <div class="cost-summary-value">${costShortNum(docTotalTokens)}</div>
+      <div class="cost-summary-detail">${costShortNum(numDocs)} docs × ${docTokens.toLocaleString()} tok</div>
+    </div>
+    <div class="cost-summary-card">
+      <div class="cost-summary-label">Query tokens / mo</div>
+      <div class="cost-summary-value">${costShortNum(queryTotalTokensPerMonth)}</div>
+      <div class="cost-summary-detail">${costShortNum(numQueries)} queries × ${queryTokens} tok</div>
+    </div>
+    <div class="cost-summary-card">
+      <div class="cost-summary-label">Best ${months}-mo total</div>
+      <div class="cost-summary-value">${costFormatDollars(strategies[0].totalCost)}</div>
+      <div class="cost-summary-detail">${strategies[0].name}</div>
+    </div>
+    <div class="cost-summary-card">
+      <div class="cost-summary-label">Max potential savings</div>
+      <div class="cost-summary-value" style="color:var(--success)">${maxCost > 0 ? ((1 - strategies[0].totalCost / maxCost) * 100).toFixed(0) + '%' : '0%'}</div>
+      <div class="cost-summary-detail">vs ${strategies[strategies.length - 1].name.split(':')[1]?.trim() || 'most expensive'}</div>
+    </div>
+  `;
+
+  // ── Render strategy cards ──
+  const stratEl = document.getElementById('ragStrategies');
+  stratEl.innerHTML = strategies.map(s => {
+    const savings = maxCost > 0 ? ((1 - s.totalCost / maxCost) * 100) : 0;
+    const savingsHtml = savings > 0 ? `<div class="cost-savings">↓ ${savings.toFixed(0)}% savings</div>` : '';
+    const badgeHtml = s.recommended ? '<div class="cost-strategy-badge">★ Recommended</div>' : '';
+    const localHtml = s.localNote ? `<div style="font-size:11px;color:var(--text-muted);margin-top:6px;">⚡ ${s.localNote}</div>` : '';
+
+    return `
+      <div class="cost-strategy${s.recommended ? ' recommended' : ''}">
+        ${badgeHtml}
+        <div class="cost-strategy-name">${s.name}</div>
+        <div class="cost-strategy-row">
+          <span class="cost-strategy-row-label">Doc embedding</span>
+          <span class="cost-strategy-row-value">${costFormatDollars(s.docCost)} <span style="color:var(--text-muted);font-size:11px">(one-time)</span></span>
+        </div>
+        <div class="cost-strategy-row">
+          <span class="cost-strategy-row-label">Query cost</span>
+          <span class="cost-strategy-row-value">${costFormatDollars(s.queryCostPerMonth)}/mo</span>
+        </div>
+        <div class="cost-strategy-total">
+          <span class="cost-strategy-total-label">${s.months}-month total</span>
+          <span class="cost-strategy-total-value">${costFormatDollars(s.totalCost)}</span>
+        </div>
+        ${savingsHtml}
+        ${localHtml}
+      </div>
+    `;
+  }).join('');
+
+  // ── Render per-model table ──
+  const ragTbody = document.getElementById('ragTableBody');
+  ragTbody.innerHTML = '';
+
+  const allEmbedding = allModels.filter(m =>
+    m.type === 'embedding' && !m.legacy && !m.unreleased && costGetPricePerM(m) !== null && costGetPricePerM(m) > 0
+  );
+
+  const tableRows = allEmbedding.map(m => {
+    const price = costGetPricePerM(m);
+    const dCost = (docTotalTokens / 1e6) * price;
+    const qCostMo = (queryTotalTokensPerMonth / 1e6) * price;
+    const total = dCost + (qCostMo * months);
+    return { name: m.name, dCost, qCostMo, total };
+  }).sort((a, b) => a.total - b.total);
+
+  const maxTable = Math.max(...tableRows.map(r => r.total), 0.01);
+
+  tableRows.forEach(r => {
+    const tr = document.createElement('tr');
+    const barPct = Math.max(2, (r.total / maxTable) * 100);
+    tr.innerHTML = `
+      <td style="color:var(--text)">${r.name}</td>
+      <td>${costFormatDollars(r.dCost)}</td>
+      <td>${costFormatDollars(r.qCostMo)}</td>
+      <td class="cost-highlight">${costFormatDollars(r.total)}</td>
+      <td class="cost-bar-cell" style="position:relative;padding-left:8px;">
+        <div class="cost-bar" style="width:${barPct}%;"></div>
+        <span style="position:relative;z-index:1;font-size:12px;color:var(--text-dim);">${costFormatDollars(r.total)}</span>
+      </td>
+    `;
+    ragTbody.appendChild(tr);
+  });
+
+  // ── Tip ──
+  const bestSym = strategies.find(s => s.type === 'symmetric' && s.docModel === 'voyage-4-large');
+  const bestAsym = strategies.find(s => s.recommended);
+  const tipEl = document.getElementById('ragTip');
+  if (bestSym && bestAsym && bestSym.totalCost > bestAsym.totalCost) {
+    const saved = bestSym.totalCost - bestAsym.totalCost;
+    const pct = ((saved / bestSym.totalCost) * 100).toFixed(0);
+    tipEl.innerHTML = `💡 <strong>Asymmetric retrieval saves ${costFormatDollars(saved)} (${pct}%)</strong> over symmetric voyage-4-large — same document quality, lower query costs. The shared embedding space makes this possible. <code>vai explain shared-space</code>`;
+  } else {
+    tipEl.innerHTML = '💡 Try selecting different doc and query models to see asymmetric cost savings. <code>vai explain shared-space</code>';
+  }
+}
+
 // ── Benchmark: History ──
 const HISTORY_KEY = 'vai-bench-history';
 
@@ -2462,6 +3505,7 @@ window.clearHistory = function() {
 const _origInit = init;
 init = async function() {
   await _origInit();
+  initThemeToggle();
   buildModelCheckboxes();
   populateBenchRankSelects();
   populateQuantModelSelect();
@@ -2473,5 +3517,84 @@ init = async function() {
 init();
 })();
 </script>
+<!-- Cost Help Modal -->
+<div class="cost-modal-overlay" id="costHelpModal">
+  <div class="cost-modal">
+    <button class="cost-modal-close" id="costHelpClose">&times;</button>
+
+    <h2>📐 How the Cost Calculator Works</h2>
+
+    <p>Voyage AI charges per <strong>million tokens</strong> processed. A token is roughly ¾ of a word.
+    The calculator estimates your total embedding cost based on how many documents you embed
+    and how many queries you run over time.</p>
+
+    <h3>💡 Simple Mode</h3>
+    <p>Compares the per-model query cost for a given volume. Useful for quick "which model is cheapest?" checks.</p>
+    <div class="formula">
+      <span class="label">Daily cost =</span><br>
+      <span class="accent">tokens_per_query</span> × <span class="accent">queries_per_day</span> ÷ 1,000,000 × <span class="accent">price_per_M_tokens</span><br><br>
+      <span class="label">Monthly cost =</span> daily cost × 30
+    </div>
+
+    <h3>📊 RAG Planner Mode</h3>
+    <p>Models the full cost of a Retrieval-Augmented Generation (RAG) pipeline, separating
+    the <strong>one-time</strong> document ingestion cost from the <strong>recurring</strong> query cost.</p>
+
+    <div class="formula">
+      <span class="label">Document embedding (one-time):</span><br>
+      <span class="accent">doc_cost</span> = num_docs × tokens_per_doc ÷ 1,000,000 × <span class="accent">doc_model_price</span><br><br>
+      <span class="label">Query embedding (monthly):</span><br>
+      <span class="accent">query_cost/mo</span> = queries_per_month × tokens_per_query ÷ 1,000,000 × <span class="accent">query_model_price</span><br><br>
+      <span class="label">Projected total:</span><br>
+      <span class="accent">total</span> = doc_cost + (query_cost/mo × <span class="accent">months</span>)
+    </div>
+
+    <h3>⚖️ Three Strategies Compared</h3>
+    <ul>
+      <li><strong>Symmetric</strong> — same model for documents and queries. Simple but expensive at scale,
+      because query-heavy workloads pay the full model price on every request.</li>
+      <li><strong>Asymmetric (★ Recommended)</strong> — use a high-quality model (e.g. <code>voyage-4-large</code>)
+      for documents and a cheaper model (e.g. <code>voyage-4-lite</code>) for queries.
+      This works because Voyage 4 models share the same embedding space — vectors from different
+      models are directly comparable.</li>
+      <li><strong>Asymmetric + Local</strong> — embed documents via the API, but run queries locally using
+      <code>voyage-4-nano</code> on HuggingFace (free). Query cost drops to $0.</li>
+    </ul>
+
+    <h3>🔗 Shared Embedding Space</h3>
+    <p>The Voyage 4 family (<code>voyage-4-large</code>, <code>voyage-4</code>, <code>voyage-4-lite</code>,
+    <code>voyage-4-nano</code>) all produce vectors in the <em>same geometric space</em>.
+    A document embedded with <code>voyage-4-large</code> can be searched with a query embedded by
+    <code>voyage-4-lite</code> — cosine similarity still works correctly. This is what makes
+    asymmetric strategies possible.</p>
+
+    <div class="example">
+      <strong>Example:</strong> 100K docs × 500 tok = 50M doc tokens<br>
+      1M queries/mo × 30 tok = 30M query tokens/mo<br><br>
+      <strong>Symmetric</strong> (voyage-4-large @ $0.18/1M):<br>
+      &nbsp;&nbsp;Docs: $9.00 + Queries: $5.40/mo × 12 = <strong>$73.80</strong><br><br>
+      <strong>Asymmetric</strong> (large docs + lite queries @ $0.05/1M):<br>
+      &nbsp;&nbsp;Docs: $9.00 + Queries: $1.50/mo × 12 = <strong>$27.00</strong><br><br>
+      &nbsp;&nbsp;Savings: <strong>63%</strong> — same document quality, cheaper queries.
+    </div>
+
+    <h3>📋 Per-Model Table</h3>
+    <p>The bottom table shows what it would cost to use each model symmetrically (same model for
+    docs and queries). The relative bar shows cost compared to the most expensive option.
+    Use this to understand the price spread across the full model lineup.</p>
+
+    <h3>🎯 Key Assumptions</h3>
+    <ul>
+      <li>Token counts are estimates — actual counts depend on your text. Use <code>vai chunk --stats</code> to measure real token counts.</li>
+      <li>Document embedding is a one-time cost (you embed once, search many times).</li>
+      <li>Re-embedding (e.g. updated docs) is not modeled — add a buffer if your corpus changes frequently.</li>
+      <li>Reranking costs are separate and not included here. Reranking is priced per query pair, not per token.</li>
+    </ul>
+
+    <p style="margin-top:20px;font-size:12px;color:var(--text-muted);">
+      CLI equivalent: <code>vai estimate --docs 100K --queries 1M --doc-model voyage-4-large --query-model voyage-4-lite</code>
+    </p>
+  </div>
+</div>
 </body>
 </html>