voyageai-cli 1.10.0 → 1.12.0

package/src/playground/index.html

@@ -551,6 +551,83 @@ select:focus { outline: none; border-color: var(--accent); }
 .rank-differ { border-left-color: var(--yellow); }
 .rank-arrow { text-align: center; color: var(--text-muted); font-size: 18px; padding-top: 4px; }
 
+/* Quantization charts */
+.quant-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
+@media (max-width: 768px) { .quant-charts { grid-template-columns: 1fr; } }
+
+.quant-bar-group { margin-bottom: 14px; }
+.quant-bar-label {
+  display: flex; justify-content: space-between; align-items: baseline;
+  margin-bottom: 4px; font-size: 13px;
+}
+.quant-bar-label .dtype-name { color: var(--accent); font-weight: 600; font-family: var(--mono); }
+.quant-bar-label .dtype-value { color: var(--text-dim); font-family: var(--mono); font-size: 12px; }
+.quant-bar-track {
+  height: 32px; background: var(--bg-input); border-radius: 6px;
+  overflow: hidden; position: relative;
+}
+.quant-bar-fill {
+  height: 100%; border-radius: 6px;
+  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;
+}
+.quant-bar-fill.storage { background: linear-gradient(90deg, #00d4aa, #4ecdc4); }
+.quant-bar-fill.latency { background: linear-gradient(90deg, #45b7d1, #82aaff); }
+.quant-bar-badge {
+  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
+  font-size: 12px; color: var(--text-dim); font-family: var(--mono);
+}
+
+.quant-quality-meter { margin-bottom: 14px; }
+.quant-meter-header {
+  display: flex; justify-content: space-between; align-items: center;
+  margin-bottom: 6px;
+}
+.quant-meter-header .dtype-name { color: var(--accent); font-weight: 600; font-family: var(--mono); font-size: 13px; }
+.quant-meter-header .verdict-badge {
+  font-size: 12px; padding: 2px 8px; border-radius: 10px; font-weight: 600;
+}
+.quant-meter-header .verdict-badge.perfect { background: rgba(0,212,170,0.15); color: var(--green); }
+.quant-meter-header .verdict-badge.good { background: rgba(255,217,61,0.15); color: var(--yellow); }
+.quant-meter-header .verdict-badge.degraded { background: rgba(255,107,107,0.15); color: var(--red); }
+.quant-meter-track {
+  height: 10px; background: var(--bg-input); border-radius: 5px; overflow: hidden;
+}
+.quant-meter-fill {
+  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-detail { font-size: 11px; color: var(--text-muted); margin-top: 4px; font-family: var(--mono); }
+
+.quant-rank-cols {
+  display: grid; gap: 12px;
+}
+.quant-rank-col-header {
+  font-weight: 600; color: var(--accent); font-size: 13px; font-family: var(--mono);
+  margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border);
+}
+.quant-rank-item {
+  padding: 8px 10px; margin-bottom: 4px; border-radius: 6px;
+  font-size: 12px; position: relative; border-left: 3px solid transparent;
+  transition: background 0.2s;
+}
+.quant-rank-item:hover { background: rgba(255,255,255,0.03); }
+.quant-rank-item.match { border-left-color: var(--green); background: rgba(0,212,170,0.06); }
+.quant-rank-item.differ { border-left-color: var(--red); background: rgba(255,107,107,0.06); }
+.quant-rank-item.baseline { border-left-color: var(--border); background: var(--bg-input); }
+.quant-rank-pos {
+  display: inline-block; width: 22px; height: 22px; line-height: 22px;
+  text-align: center; border-radius: 50%; background: var(--bg-surface);
+  color: var(--accent); font-weight: 700; font-size: 11px; font-family: var(--mono);
+  margin-right: 8px;
+}
+.quant-rank-score { color: var(--text-muted); font-size: 11px; font-family: var(--mono); margin-top: 3px; }
+
 /* Cost calculator */
 .cost-slider-row {
   display: flex;
@@ -680,6 +757,57 @@ select:focus { outline: none; border-color: var(--accent); }
   margin-top: 4px;
 }
 
+/* About page */
+.about-container { max-width: 680px; margin: 0 auto; }
+.about-header { display: flex; gap: 24px; align-items: center; margin-bottom: 24px; }
+.about-avatar {
+  width: 120px; height: 120px;
+  border-radius: 50%;
+  border: 3px solid var(--accent);
+  box-shadow: 0 0 20px var(--accent-glow);
+  flex-shrink: 0;
+}
+.about-name { font-size: 24px; font-weight: 700; color: var(--text); }
+.about-role { font-size: 14px; color: var(--accent); margin-top: 4px; }
+.about-links { display: flex; gap: 12px; margin-top: 8px; }
+.about-links a {
+  color: var(--text-dim);
+  font-size: 13px;
+  text-decoration: none;
+  transition: color 0.2s;
+}
+.about-links a:hover { color: var(--accent); }
+.about-section { margin-bottom: 24px; }
+.about-section-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--accent);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  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:hover { text-decoration: underline; }
+.about-disclaimer {
+  background: rgba(255, 215, 61, 0.08);
+  border: 1px solid rgba(255, 215, 61, 0.2);
+  border-radius: var(--radius);
+  padding: 16px 20px;
+  margin-top: 24px;
+}
+.about-disclaimer-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--warning);
+  margin-bottom: 6px;
+}
+.about-disclaimer-text {
+  font-size: 13px;
+  line-height: 1.7;
+  color: var(--text-dim);
+}
+
 @media (max-width: 768px) {
   .compare-grid, .search-results { grid-template-columns: 1fr; }
   .nav { padding: 0 12px; }
@@ -711,6 +839,7 @@ select:focus { outline: none; border-color: var(--accent); }
   <button class="tab-btn" data-tab="search">🔍 Search</button>
   <button class="tab-btn" data-tab="benchmark">⏱ Benchmark</button>
   <button class="tab-btn" data-tab="explore">📚 Explore</button>
+  <button class="tab-btn" data-tab="about">ℹ️ About</button>
 </div>
 
 <div class="main">
@@ -745,6 +874,16 @@ select:focus { outline: none; border-color: var(--accent); }
         <option value="2048">2048</option>
       </select>
     </div>
+    <div class="option-group">
+      <span class="option-label">Output Type</span>
+      <select id="embedOutputDtype">
+        <option value="float">float (32-bit)</option>
+        <option value="int8">int8 (4× smaller)</option>
+        <option value="uint8">uint8 (4× smaller)</option>
+        <option value="binary">binary (32× smaller)</option>
+        <option value="ubinary">ubinary (32× smaller)</option>
+      </select>
+    </div>
     <button class="btn" id="embedBtn" onclick="doEmbed()">⚡ Embed</button>
   </div>
 
@@ -864,6 +1003,7 @@ Semantic search understands meaning beyond keyword matching</textarea>
   <div class="bench-panels">
     <button class="bench-panel-btn active" data-bench="latency">⚡ Latency</button>
     <button class="bench-panel-btn" data-bench="ranking">🏆 Ranking</button>
+    <button class="bench-panel-btn" data-bench="quantization">⚗️ Quantization</button>
     <button class="bench-panel-btn" data-bench="cost">💰 Cost</button>
     <button class="bench-panel-btn" data-bench="history">📊 History</button>
   </div>
@@ -956,6 +1096,91 @@ Reranking models rescore initial search results to improve relevance ordering.</
     </div>
   </div>
 
+  <!-- ── Quantization Panel ── -->
+  <div class="bench-view" id="bench-quantization">
+    <div class="card">
+      <div class="card-title">Quantization Benchmark</div>
+      <p style="color:var(--text-dim);font-size:13px;margin-bottom:12px;">
+        Compare how different output data types (float, int8, binary) affect storage size and ranking quality.
+        Embeds the same corpus with each dtype and measures the tradeoff.
+      </p>
+      <div class="options-row" style="flex-wrap:wrap;">
+        <div class="option-group">
+          <span class="option-label">Model</span>
+          <select id="quantModel"></select>
+        </div>
+        <div class="option-group">
+          <span class="option-label">Dimensions</span>
+          <select id="quantDimensions">
+            <option value="">Default</option>
+            <option value="256">256</option>
+            <option value="512">512</option>
+            <option value="1024">1024</option>
+            <option value="2048">2048</option>
+          </select>
+        </div>
+        <div class="option-group">
+          <span class="option-label">Data Types</span>
+          <div id="quantDtypeChecks" style="display:flex;gap:8px;flex-wrap:wrap;">
+            <label style="display:flex;align-items:center;gap:4px;font-size:13px;cursor:pointer;color:var(--text);">
+              <input type="checkbox" value="float" checked style="accent-color:var(--accent);">float
+            </label>
+            <label style="display:flex;align-items:center;gap:4px;font-size:13px;cursor:pointer;color:var(--text);">
+              <input type="checkbox" value="int8" checked style="accent-color:var(--accent);">int8
+            </label>
+            <label style="display:flex;align-items:center;gap:4px;font-size:13px;cursor:pointer;color:var(--text);">
+              <input type="checkbox" value="uint8" style="accent-color:var(--accent);">uint8
+            </label>
+            <label style="display:flex;align-items:center;gap:4px;font-size:13px;cursor:pointer;color:var(--text);">
+              <input type="checkbox" value="ubinary" checked style="accent-color:var(--accent);">ubinary
+            </label>
+            <label style="display:flex;align-items:center;gap:4px;font-size:13px;cursor:pointer;color:var(--text);">
+              <input type="checkbox" value="binary" style="accent-color:var(--accent);">binary
+            </label>
+          </div>
+        </div>
+      </div>
+      <div style="margin-top:12px;">
+        <span class="option-label">Query</span>
+        <input type="text" id="quantQuery" placeholder="Search query..." value="How do I search for similar documents using embeddings?" style="width:100%;margin-bottom:8px;">
+      </div>
+      <div>
+        <span class="option-label">Corpus (one document per line)</span>
+        <textarea id="quantCorpus" rows="5" placeholder="Documents to embed...">Vector search finds documents by computing similarity between embedding vectors in high-dimensional space.
+MongoDB Atlas Vector Search lets you index and query vector embeddings alongside your operational data.
+Traditional full-text search uses inverted indexes to match keyword terms in documents.
+Cosine similarity measures the angle between two vectors, commonly used for semantic search.
+Database sharding distributes data across multiple servers for horizontal scalability.
+Embedding models convert text into dense numerical vectors that capture meaning.
+Approximate nearest neighbor algorithms like HNSW enable fast similarity search at scale.
+Reranking models rescore initial search results to improve relevance ordering.</textarea>
+      </div>
+      <div style="margin-top:12px;">
+        <button class="btn" id="quantBtn" onclick="doBenchQuantization()">⚗️ Run Quantization Benchmark</button>
+      </div>
+    </div>
+
+    <div class="error-msg" id="quantError"></div>
+
+    <div class="result-section" id="quantResult">
+      <div class="quant-charts">
+        <div class="card">
+          <div class="card-title">📦 Storage per Vector</div>
+          <div id="quantStorageChart"></div>
+        </div>
+        <div class="card">
+          <div class="card-title">⏱ API Latency</div>
+          <div id="quantLatencyChart"></div>
+        </div>
+      </div>
+      <div class="card">
+        <div class="card-title">🎯 Ranking Quality vs Float Baseline</div>
+        <div id="quantQualityMeters" style="margin-bottom:16px;"></div>
+        <div id="quantRankGrid"></div>
+      </div>
+    </div>
+  </div>
+
   <!-- ── Cost Panel ── -->
   <div class="bench-view" id="bench-cost">
     <div class="card">
@@ -1001,6 +1226,73 @@ Reranking models rescore initial search results to improve relevance ordering.</
 
 </div>
 
+<!-- ========== ABOUT TAB ========== -->
+<div class="tab-panel" id="tab-about">
+  <div class="about-container">
+    <div class="card">
+      <div class="about-header">
+        <img src="https://avatars.githubusercontent.com/u/192552?v=4" alt="Michael Lynn" class="about-avatar">
+        <div>
+          <div class="about-name">Michael Lynn</div>
+          <div class="about-role">Principal Staff Developer Advocate · MongoDB</div>
+          <div class="about-links">
+            <a href="https://github.com/mrlynn" target="_blank" rel="noopener">🔗 GitHub</a>
+            <a href="https://mlynn.org" target="_blank" rel="noopener">🌐 mlynn.org</a>
+            <a href="https://www.npmjs.com/package/voyageai-cli" target="_blank" rel="noopener">📦 npm</a>
+          </div>
+        </div>
+      </div>
+
+      <div class="about-section">
+        <div class="about-section-title">About This Project</div>
+        <div class="about-text">
+          <strong>voyageai-cli</strong> (<code style="color:var(--accent);">vai</code>) is a community-built command-line tool for working with
+          <a href="https://www.mongodb.com/docs/voyageai/" target="_blank">Voyage AI</a> embeddings, reranking, and
+          <a href="https://www.mongodb.com/products/platform/atlas-vector-search" target="_blank">MongoDB Atlas Vector Search</a>.
+          It was created to make it easier for developers to explore, benchmark, and integrate
+          Voyage AI models into their applications — right from the terminal or this playground.
+        </div>
+      </div>
+
+      <div class="about-section">
+        <div class="about-section-title">About Michael</div>
+        <div class="about-text">
+          Michael Lynn is a Principal Staff Developer Advocate at MongoDB with 25+ years in enterprise
+          infrastructure and over a decade at MongoDB. He focuses on strategic developer relations,
+          creating educational content around Vector Search, AI enablement, and developer tooling.
+          He builds tools like this to help developers get hands-on with new technology faster.
+        </div>
+      </div>
+
+      <div class="about-section">
+        <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>🔍 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
+        </div>
+      </div>
+
+      <div class="about-disclaimer">
+        <div class="about-disclaimer-title">⚠️ Community Tool Disclaimer</div>
+        <div class="about-disclaimer-text">
+          This tool is <strong>not</strong> an official product of MongoDB, Inc. or Voyage AI.
+          It is independently built and maintained by Michael Lynn as a community resource.
+          It is not supported, endorsed, or guaranteed by either company. Use at your own discretion.
+          For official documentation, visit
+          <a href="https://www.mongodb.com/docs/voyageai/" target="_blank" style="color:var(--warning);">mongodb.com/docs/voyageai</a>.
+        </div>
+      </div>
+    </div>
+
+    <div style="text-align:center;margin-top:16px;font-size:12px;color:var(--text-muted);">
+      Made with ☕ and curiosity · <a href="https://github.com/mrlynn/voyageai-cli" target="_blank" style="color:var(--text-dim);">Source on GitHub</a>
+    </div>
+  </div>
+</div>
+
 <!-- ========== EXPLORE TAB ========== -->
 <div class="tab-panel" id="tab-explore">
   <div style="margin-bottom:16px;">
@@ -1119,6 +1411,12 @@ function populateModelSelects() {
 }
 
 // ── API Helpers ──
+function formatBytesUI(bytes) {
+  if (bytes >= 1024 * 1024) return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
+  if (bytes >= 1024) return (bytes / 1024).toFixed(1) + ' KB';
+  return bytes + ' B';
+}
+
 async function apiPost(url, body) {
   const res = await fetch(url, {
     method: 'POST',
@@ -1165,16 +1463,29 @@ window.doEmbed = async function() {
     const dims = document.getElementById('embedDimensions').value;
     const dimensions = dims ? parseInt(dims, 10) : undefined;
 
-    const data = await apiPost('/api/embed', { texts: [text], model, inputType, dimensions });
+    const outputDtype = document.getElementById('embedOutputDtype').value;
+    const body = { texts: [text], model, inputType, dimensions };
+    if (outputDtype && outputDtype !== 'float') body.output_dtype = outputDtype;
+
+    const data = await apiPost('/api/embed', body);
     const emb = data.data[0].embedding;
     lastEmbedding = emb;
 
     // Stats
+    const dtype = outputDtype || 'float';
+    const bytesPerDim = (dtype === 'binary' || dtype === 'ubinary') ? 0.125 : (dtype === 'int8' || dtype === 'uint8') ? 1 : 4;
+    const totalBytes = emb.length * bytesPerDim;
+    const storageLine = dtype !== 'float'
+      ? `<br><span style="color:var(--success)">📦 ${dtype}: ${formatBytesUI(totalBytes)}/vector (${(4 * emb.length / totalBytes).toFixed(0)}× smaller than float)</span>`
+      : '';
+
     const statsEl = document.getElementById('embedStats');
     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">${emb.length}</span></span>
       <span class="stat"><span class="stat-label">Tokens</span><span class="stat-value">${data.usage?.total_tokens || '—'}</span></span>
+      <span class="stat"><span class="stat-label">Type</span><span class="stat-value">${dtype}</span></span>
+      ${storageLine}
     `;
 
     // Vector preview
@@ -1410,6 +1721,7 @@ const CONCEPT_META = {
   'api-access':        { icon: '🌐', tab: 'embed' },
   'batch-processing':  { icon: '📦', tab: 'embed' },
   benchmarking:        { icon: '⏱', tab: 'benchmark' },
+  quantization:        { icon: '⚗️', tab: 'benchmark' },
 };
 
 let exploreConcepts = {};
@@ -1797,6 +2109,222 @@ function renderRankComparison(modelA, modelB, rankedA, rankedB, topK) {
   }
 }
 
+// ── Benchmark: Quantization ──
+function populateQuantModelSelect() {
+  const sel = document.getElementById('quantModel');
+  sel.innerHTML = '';
+  embedModels.forEach(m => {
+    const opt = document.createElement('option');
+    opt.value = m.name;
+    opt.textContent = m.name;
+    sel.appendChild(opt);
+  });
+  // Default to voyage-4-large if available
+  const preferred = embedModels.find(m => m.name === 'voyage-4-large');
+  if (preferred) sel.value = preferred.name;
+}
+
+function hammingSimUI(a, b) {
+  // For binary/ubinary packed embeddings, compute agreement via dot product
+  let dot = 0;
+  for (let i = 0; i < a.length; i++) dot += a[i] * b[i];
+  return dot;
+}
+
+window.doBenchQuantization = async function() {
+  hideError('quantError');
+  const model = document.getElementById('quantModel').value;
+  const dimsVal = document.getElementById('quantDimensions').value;
+  const dimensions = dimsVal ? parseInt(dimsVal, 10) : undefined;
+  const query = document.getElementById('quantQuery').value.trim();
+  const corpusText = document.getElementById('quantCorpus').value.trim();
+
+  if (!query) { showError('quantError', 'Enter a query'); return; }
+  if (!corpusText) { showError('quantError', 'Enter at least 2 documents'); return; }
+
+  const corpus = corpusText.split('\n').map(d => d.trim()).filter(Boolean);
+  if (corpus.length < 2) { showError('quantError', 'Enter at least 2 documents'); return; }
+
+  const checks = document.querySelectorAll('#quantDtypeChecks input:checked');
+  const dtypes = Array.from(checks).map(c => c.value);
+  if (dtypes.length === 0) { showError('quantError', 'Select at least one data type'); return; }
+
+  setLoading('quantBtn', true);
+
+  try {
+    const allTexts = [query, ...corpus];
+    const resultsByDtype = {};
+
+    for (const dtype of dtypes) {
+      const body = { texts: allTexts, model, inputType: 'document' };
+      if (dimensions) body.dimensions = dimensions;
+      if (dtype !== 'float') body.output_dtype = dtype;
+
+      const start = performance.now();
+      const data = await apiPost('/api/embed', body);
+      const elapsed = performance.now() - start;
+
+      const embeddings = data.data.map(d => d.embedding);
+      const queryEmbed = embeddings[0];
+      const dims = embeddings[0].length;
+      const isBinary = (dtype === 'binary' || dtype === 'ubinary');
+
+      // Rank corpus documents by similarity
+      const ranked = corpus.map((text, i) => {
+        const docEmbed = embeddings[i + 1];
+        let sim;
+        if (isBinary) {
+          sim = hammingSimUI(queryEmbed, docEmbed);
+        } else {
+          sim = cosineSim(queryEmbed, docEmbed);
+        }
+        return { index: i, text, similarity: sim };
+      }).sort((a, b) => b.similarity - a.similarity);
+
+      // Calculate storage
+      const actualDims = isBinary ? dims * 8 : dims;
+      let bytesPerVec;
+      if (dtype === 'float') bytesPerVec = dims * 4;
+      else if (dtype === 'int8' || dtype === 'uint8') bytesPerVec = dims * 1;
+      else bytesPerVec = dims; // binary/ubinary: dims is already 1/8th
+
+      resultsByDtype[dtype] = {
+        dtype, latency: elapsed, dims, actualDims, bytesPerVec,
+        tokens: data.usage?.total_tokens || 0, ranked,
+      };
+    }
+
+    const completed = Object.values(resultsByDtype);
+    if (completed.length === 0) {
+      showError('quantError', 'No data types completed successfully');
+      return;
+    }
+
+    // ── Render Charts ──
+    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' };
+
+    // ── Storage Bar Chart ──
+    let storageHTML = '';
+    for (const r of completed) {
+      const pct = Math.max(8, (r.bytesPerVec / maxBytes) * 100);
+      const totalMB = (r.bytesPerVec * 1_000_000) / (1024 * 1024);
+      const sizeStr = totalMB >= 1024 ? `${(totalMB / 1024).toFixed(1)} GB` : `${totalMB.toFixed(0)} MB`;
+      const savings = r.bytesPerVec < baseline.bytesPerVec
+        ? `${(baseline.bytesPerVec / r.bytesPerVec).toFixed(0)}× smaller`
+        : 'baseline';
+      const color = DTYPE_COLORS[r.dtype] || '#82aaff';
+      storageHTML += `<div class="quant-bar-group">
+        <div class="quant-bar-label">
+          <span class="dtype-name">${r.dtype}</span>
+          <span class="dtype-value">${formatBytesUI(r.bytesPerVec)}/vec · ${sizeStr} @ 1M</span>
+        </div>
+        <div class="quant-bar-track">
+          <div class="quant-bar-fill storage" style="width:${pct}%;background:linear-gradient(90deg, ${color}, ${color}cc);">${savings}</div>
+        </div>
+      </div>`;
+    }
+    document.getElementById('quantStorageChart').innerHTML = storageHTML;
+
+    // ── Latency Bar Chart ──
+    let latencyHTML = '';
+    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 badge = r.latency === minLatency ? ' ⚡' : '';
+      latencyHTML += `<div class="quant-bar-group">
+        <div class="quant-bar-label">
+          <span class="dtype-name">${r.dtype}</span>
+          <span class="dtype-value">${r.latency.toFixed(0)}ms${badge}</span>
+        </div>
+        <div class="quant-bar-track">
+          <div class="quant-bar-fill latency" style="width:${pct}%;background:linear-gradient(90deg, ${color}, ${color}cc);">${r.latency.toFixed(0)}ms</div>
+        </div>
+      </div>`;
+    }
+    document.getElementById('quantLatencyChart').innerHTML = latencyHTML;
+
+    // ── Quality Meters + Ranking Grid ──
+    const topK = Math.min(5, corpus.length);
+    const metersEl = document.getElementById('quantQualityMeters');
+    const gridEl = document.getElementById('quantRankGrid');
+    gridEl.innerHTML = '';
+    metersEl.innerHTML = '';
+
+    if (completed.length >= 2 && baseline) {
+      const baselineRanking = baseline.ranked.slice(0, topK).map(r => r.index);
+
+      // Quality meters for each non-baseline dtype
+      let metersHTML = '';
+      for (const r of completed) {
+        if (r.dtype === baseline.dtype) continue;
+        const otherRanking = r.ranked.slice(0, topK).map(x => x.index);
+        const overlap = baselineRanking.filter(idx => otherRanking.includes(idx)).length;
+        const overlapPct = (overlap / topK) * 100;
+        const exactMatch = baselineRanking.every((idx, pos) => otherRanking[pos] === idx);
+        const positionMatches = baselineRanking.filter((idx, pos) => otherRanking[pos] === idx).length;
+        const posMatchPct = (positionMatches / topK) * 100;
+
+        let grade, gradeLabel, detail;
+        if (exactMatch) {
+          grade = 'perfect'; gradeLabel = '✓ Perfect';
+          detail = `Identical ranking — all ${topK} positions match float baseline`;
+        } else if (overlap === topK) {
+          grade = 'good'; gradeLabel = '≈ Reordered';
+          detail = `Same ${topK} documents, ${positionMatches}/${topK} in same position`;
+        } else {
+          grade = overlap >= topK * 0.6 ? 'good' : 'degraded';
+          gradeLabel = `${overlapPct.toFixed(0)}% overlap`;
+          detail = `${overlap}/${topK} documents match, ${positionMatches}/${topK} positions match`;
+        }
+
+        metersHTML += `<div class="quant-quality-meter">
+          <div class="quant-meter-header">
+            <span class="dtype-name">${r.dtype}</span>
+            <span class="verdict-badge ${grade}">${gradeLabel}</span>
+          </div>
+          <div class="quant-meter-track">
+            <div class="quant-meter-fill ${grade}" style="width:${exactMatch ? 100 : posMatchPct}%"></div>
+          </div>
+          <div class="quant-meter-detail">${detail}</div>
+        </div>`;
+      }
+      metersEl.innerHTML = metersHTML;
+
+      // Side-by-side ranking columns
+      let rankHTML = `<div class="quant-rank-cols" style="grid-template-columns:repeat(${completed.length},1fr);">`;
+      for (const r of completed) {
+        rankHTML += `<div><div class="quant-rank-col-header">${r.dtype}${r === baseline ? ' (baseline)' : ''}</div>`;
+        r.ranked.slice(0, topK).forEach((item, pos) => {
+          const trunc = item.text.length > 55 ? item.text.slice(0, 52) + '…' : item.text;
+          let cls = 'baseline';
+          if (r !== baseline) {
+            cls = (baseline.ranked[pos] && item.index === baseline.ranked[pos].index) ? 'match' : 'differ';
+          }
+          rankHTML += `<div class="quant-rank-item ${cls}" title="${item.text.replace(/"/g, '&quot;')}">
+            <span class="quant-rank-pos">${pos + 1}</span>${trunc}
+            <div class="quant-rank-score">${item.similarity.toFixed(4)} · doc ${item.index}</div>
+          </div>`;
+        });
+        rankHTML += '</div>';
+      }
+      rankHTML += '</div>';
+      gridEl.innerHTML = rankHTML;
+    } else {
+      metersEl.innerHTML = '<span style="color:var(--text-dim)">Select multiple data types (including float) to compare rankings.</span>';
+    }
+
+    document.getElementById('quantResult').classList.add('visible');
+  } catch (err) {
+    showError('quantError', err.message);
+  } finally {
+    setLoading('quantBtn', false);
+  }
+};
+
 // ── Benchmark: Cost Calculator ──
 function initCostCalculator() {
   const tokSlider = document.getElementById('costTokens');
@@ -1936,6 +2464,7 @@ init = async function() {
   await _origInit();
   buildModelCheckboxes();
   populateBenchRankSelects();
+  populateQuantModelSelect();
   initCostCalculator();
   renderHistory();
 };

package/test/commands/about.test.js

@@ -0,0 +1,23 @@
+'use strict';
+
+const { describe, it } = require('node:test');
+const assert = require('node:assert/strict');
+const { Command } = require('commander');
+const { registerAbout } = require('../../src/commands/about');
+
+describe('about command', () => {
+  it('registers correctly on a program', () => {
+    const program = new Command();
+    registerAbout(program);
+    const aboutCmd = program.commands.find(c => c.name() === 'about');
+    assert.ok(aboutCmd, 'about command should be registered');
+  });
+
+  it('has --json option', () => {
+    const program = new Command();
+    registerAbout(program);
+    const aboutCmd = program.commands.find(c => c.name() === 'about');
+    const optionNames = aboutCmd.options.map(o => o.long);
+    assert.ok(optionNames.includes('--json'), 'should have --json option');
+  });
+});