Add per-token logprob sparkline under the legend, gradient-stroked to match colormap

index.html

@@ -221,6 +221,10 @@
     border-radius: 1px;
   }
   .legend-row { display: flex; justify-content: space-between; }
+  .lp-chart {
+    display: block; width: 100%; height: 40px;
+    margin-top: 8px;
+  }
 
   ::-webkit-scrollbar { width: 8px; height: 8px; }
   ::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }
@@ -299,6 +303,7 @@
       <div>token logprob</div>
       <div class="legend-bar" id="legend-bar"></div>
       <div class="legend-row"><span id="lp-min">—</span><span id="lp-mid">—</span><span id="lp-max">—</span></div>
+      <svg id="lp-chart" class="lp-chart" preserveAspectRatio="none"></svg>
     </div>
   </div>
 </div>
@@ -380,14 +385,62 @@ function updateLegend() {
   if (!lpRange) {
     minEl.textContent = midEl.textContent = maxEl.textContent = "—";
     bar.style.background = "linear-gradient(to right, #d83a2a, #888, #1a1a1a)";
+  } else {
+    const { min, mid, max } = lpRange;
+    minEl.textContent = min.toFixed(1);
+    midEl.textContent = mid.toFixed(1);
+    maxEl.textContent = max.toFixed(1);
+    const midPct = max > min ? ((mid - min) / (max - min)) * 100 : 50;
+    bar.style.background = `linear-gradient(to right, #d83a2a 0%, #888 ${midPct.toFixed(1)}%, #1a1a1a 100%)`;
+  }
+  updateLpChart();
+}
+
+function updateLpChart() {
+  const svg = document.getElementById("lp-chart");
+  if (!svg) return;
+  if (!lpRange || genTokens.length < 2) {
+    svg.innerHTML = "";
     return;
   }
+  const W = 200, H = 40, pad = 2;
   const { min, mid, max } = lpRange;
-  minEl.textContent = min.toFixed(1);
-  midEl.textContent = mid.toFixed(1);
-  maxEl.textContent = max.toFixed(1);
+  const yTop = pad, yBot = H - pad;
+  const yScale = (lp) => yTop + (1 - (lp - min) / Math.max(1e-9, max - min)) * (yBot - yTop);
+
+  // Subsample to ~W points so the path stays cheap to draw at long sequences.
+  const n = genTokens.length;
+  const step = Math.max(1, Math.ceil(n / W));
+  const xScale = (i) => (n === 1 ? W / 2 : pad + (i / (n - 1)) * (W - 2 * pad));
+
+  let d = "";
+  let started = false;
+  for (let i = 0; i < n; i += step) {
+    const lp = genTokens[i].logprob;
+    if (lp == null || isNaN(lp)) continue;
+    d += (started ? "L" : "M") + xScale(i).toFixed(1) + " " + yScale(lp).toFixed(1);
+    started = true;
+  }
+  // Always anchor the very last token, even if subsampling skipped it.
+  if ((n - 1) % step !== 0) {
+    const lp = genTokens[n - 1].logprob;
+    if (lp != null && !isNaN(lp)) {
+      d += "L" + xScale(n - 1).toFixed(1) + " " + yScale(lp).toFixed(1);
+    }
+  }
+
   const midPct = max > min ? ((mid - min) / (max - min)) * 100 : 50;
-  bar.style.background = `linear-gradient(to right, #d83a2a 0%, #888 ${midPct.toFixed(1)}%, #1a1a1a 100%)`;
+  svg.setAttribute("viewBox", `0 0 ${W} ${H}`);
+  svg.innerHTML = `
+    <defs>
+      <linearGradient id="lp-grad" gradientUnits="userSpaceOnUse" x1="0" y1="${yBot}" x2="0" y2="${yTop}">
+        <stop offset="0%" stop-color="#d83a2a"/>
+        <stop offset="${midPct.toFixed(1)}%" stop-color="#888"/>
+        <stop offset="100%" stop-color="#1a1a1a"/>
+      </linearGradient>
+    </defs>
+    <path d="${d}" fill="none" stroke="url(#lp-grad)" stroke-width="1.2" stroke-linejoin="round" stroke-linecap="round"/>
+  `;
 }
 function logprobRgb(lp) {
   if (lp == null || isNaN(lp) || !lpRange) return DARK_RGB;