§1: replace prefix/gen pills with three draggable handles

Two dark-grey handles bracket the prompt window (drag ▼ on top, ▲ on
bottom); a third green ▼ handle on top of the gen-region sets where
generation stops. Removes the prefix-length and generate-size pill rows
in favor of direct manipulation on the gene track.

Also drops the reference sequence block — generated bases are now
underlined green (match) or red (mismatch) inline. Legend redrawn as
mini-glyphs (exon shape, intron shape, full widget) with instant
:hover tooltips. Takeaway prompts the user to try the green window on
exons vs introns.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

demo.html

@@ -427,11 +427,63 @@
     width: 100%; height: 28px; display: block;
     margin: 4px 0 8px;
   }
+  .gene-track.draggable { height: 40px; touch-action: none; }
   .gene-track .exon { fill: #317f3f; }
   .gene-track .intron { stroke: #aaa; stroke-width: 1; }
   .gene-track .playhead { stroke: #bc2e25; stroke-width: 2; }
-  .gene-track .gen-region { fill: #bc2e25; opacity: 0.10; }
+  .gene-track .gen-region { fill: #317f3f; opacity: 0.15; }
+  .gene-track .prompt-region { fill: #1f1f1d; opacity: 0.04; }
+  .gene-track .handle { cursor: ew-resize; }
+  .gene-track .handle line { stroke: #1f1f1d; stroke-width: 1.5; }
+  .gene-track .handle polygon { fill: #1f1f1d; }
+  .gene-track .handle:hover line,
+  .gene-track .handle.dragging line { stroke: #000; stroke-width: 2; }
+  .gene-track .handle:hover polygon,
+  .gene-track .handle.dragging polygon { fill: #000; }
+  .gene-track .handle.gen line { stroke: #317f3f; }
+  .gene-track .handle.gen polygon { fill: #317f3f; }
+  .gene-track .handle.gen:hover line,
+  .gene-track .handle.gen.dragging line { stroke: #1f5024; stroke-width: 2; }
+  .gene-track .handle.gen:hover polygon,
+  .gene-track .handle.gen.dragging polygon { fill: #1f5024; }
   .gene-track text { font-family: "JetBrains Mono", monospace; font-size: 9px; fill: #888; }
+
+  /* Instant tooltips (no native-title delay) for legend items. */
+  .legend-tip { position: relative; }
+  .legend-tip:hover::after {
+    content: attr(data-tip);
+    position: absolute;
+    bottom: calc(100% + 8px);
+    left: 50%;
+    transform: translateX(-50%);
+    background: #1f1f1d;
+    color: #f7f5ee;
+    padding: 6px 10px;
+    border-radius: 3px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    font-family: 'Inter', sans-serif;
+    font-size: 11px;
+    font-weight: 400;
+    letter-spacing: normal;
+    text-transform: none;
+    white-space: normal;
+    width: max-content;
+    max-width: 260px;
+    line-height: 1.4;
+    z-index: 10;
+    pointer-events: none;
+  }
+  .legend-tip:hover::before {
+    content: "";
+    position: absolute;
+    bottom: calc(100% + 2px);
+    left: 50%;
+    transform: translateX(-50%);
+    border: 4px solid transparent;
+    border-top-color: #1f1f1d;
+    z-index: 10;
+    pointer-events: none;
+  }
   .track-axis-label {
     font-family: "JetBrains Mono", monospace; font-size: 9px;
     color: #888; text-transform: uppercase; letter-spacing: 1px;
@@ -1219,39 +1271,59 @@
       <span>gene</span>
       <span id="d1-pills" class="pills"></span>
       <span class="spacer"></span>
-      <span>prefix</span>
-      <span id="d1-prefix-pills" class="pills">
-        <button class="pill" data-prefix="50">50</button>
-        <button class="pill active" data-prefix="200">200</button>
-        <button class="pill" data-prefix="400">400</button>
-        <button class="pill" data-prefix="600">600</button>
-      </span>
-      <span>generate</span>
-      <span id="d1-gen-pills" class="pills">
-        <button class="pill active" data-gen="60">60</button>
-        <button class="pill" data-gen="300">300</button>
-        <button class="pill" data-gen="600">600</button>
-      </span>
       <button id="d1-go" class="action primary">▶ generate</button>
       <button id="d1-stop" class="action" disabled>stop</button>
       <span class="status" id="d1-status"><span class="dot"></span><span>idle</span></span>
     </div>
 
     <div class="gene-info" id="d1-info">loading genes…</div>
-    <svg class="gene-track" id="d1-track" viewBox="0 0 1000 28" preserveAspectRatio="none"></svg>
-    <div class="track-axis-label">
-      <span><span class="legend-swatch" style="background:#317f3f"></span>exon</span>
-      <span><span class="legend-swatch" style="background:#aaa;height:2px;border-radius:0"></span>intron</span>
-      <span><span class="legend-swatch" style="background:rgba(188,46,37,0.20)"></span>generated region</span>
-      <span style="color:#bc2e25">│ prompt end</span>
+    <svg class="gene-track draggable" id="d1-track" viewBox="0 0 1000 40" preserveAspectRatio="none"></svg>
+    <div class="track-axis-label" style="justify-content:flex-end;gap:20px;align-items:center">
+      <span class="legend-tip"
+            data-tip="Exon — coding segment of the gene. Stays in the mature mRNA and gets translated into protein."
+            style="display:inline-flex;align-items:center;gap:6px">
+        <svg width="44" height="12" viewBox="0 0 44 12" style="overflow:visible">
+          <line x1="0"  y1="6" x2="14" y2="6" stroke="#aaa" stroke-width="1"/>
+          <rect x="14" y="0" width="16" height="12" fill="#317f3f"/>
+          <line x1="30" y1="6" x2="44" y2="6" stroke="#aaa" stroke-width="1"/>
+        </svg>
+        exon
+      </span>
+      <span class="legend-tip"
+            data-tip="Intron — non-coding stretch between exons. Spliced out of the pre-mRNA before translation."
+            style="display:inline-flex;align-items:center;gap:6px">
+        <svg width="44" height="12" viewBox="0 0 44 12" style="overflow:visible">
+          <rect x="0"  y="0" width="6"  height="12" fill="#317f3f"/>
+          <line x1="6"  y1="6" x2="38" y2="6" stroke="#aaa" stroke-width="1"/>
+          <rect x="38" y="0" width="6"  height="12" fill="#317f3f"/>
+        </svg>
+        intron
+      </span>
+      <span class="legend-tip"
+            data-tip="Drag the dark ▼ and ▲ markers to set the DNA window fed to the model (the prompt). Drag the green ▼ marker to set where generation stops. The model fills in the green region."
+            style="display:inline-flex;align-items:center;gap:6px">
+        <svg width="100" height="20" viewBox="0 0 100 20" style="overflow:visible">
+          <!-- prompt-region (faint dark) between start and end -->
+          <rect x="10" y="4" width="30" height="12" fill="#1f1f1d" opacity="0.06"/>
+          <!-- gen-region (muted green) between end and gen-end -->
+          <rect x="40" y="4" width="50" height="12" fill="#317f3f" opacity="0.15"/>
+          <!-- start handle: ▼ on top, line through body -->
+          <line x1="10" y1="4" x2="10" y2="16" stroke="#1f1f1d" stroke-width="1.5"/>
+          <polygon points="7,0 13,0 10,4" fill="#1f1f1d"/>
+          <!-- end handle: ▲ on bottom, line through body -->
+          <line x1="40" y1="4" x2="40" y2="16" stroke="#1f1f1d" stroke-width="1.5"/>
+          <polygon points="40,16 37,20 43,20" fill="#1f1f1d"/>
+          <!-- gen-end handle: ▼ on top, GREEN, line through body -->
+          <line x1="90" y1="4" x2="90" y2="16" stroke="#317f3f" stroke-width="1.5"/>
+          <polygon points="87,0 93,0 90,4" fill="#317f3f"/>
+        </svg>
+        prompt → generated
+      </span>
     </div>
 
-    <div class="seq-label">model output  ·  <span style="color:#aaa">prompt in gray</span>  ·  <span>generated colored by logprob (red=uncertain)</span></div>
+    <div class="seq-label">model output  ·  <span style="color:#aaa">prompt in gray</span>  ·  <span>generated colored by logprob (red = uncertain)</span>  ·  <span><span style="color:#317f3f;font-weight:600">_</span> match</span>  ·  <span><span style="color:#b00020;font-weight:600">_</span> mismatch</span></div>
     <div class="seq-block" id="d1-seq">— pick a gene and hit generate —</div>
 
-    <div class="seq-label">reference  ·  <span style="color:#b00020">mismatches highlighted</span></div>
-    <div class="seq-block" id="d1-ref">—</div>
-
     <div class="stat-row" id="d1-stats">
       <div class="stat-pair"><span class="stat-pair-label">identity</span><span class="stat-pair-val muted" id="d1-id">—</span></div>
       <div class="stat-pair"><span class="stat-pair-label">in-exon</span><span class="stat-pair-val muted" id="d1-id-exon">—</span></div>
@@ -1264,9 +1336,12 @@
 
   <div class="takeaway">
     <strong>What to look for</strong>
-    The boundaries between high- and low-confidence stretches in Carbon's output tend to fall
-    near real exon/intron edges — even though the model has never seen a single annotation.
-    For shorter genes (HBB, INS), Carbon often nails the exon/intron structure outright.
+    Try dragging the prompt window so the green generated region lands on an exon (the dark
+    green blocks) and see how many green underlines you get — exons are under selection
+    pressure, so getting them right takes real biological understanding, not just DNA
+    statistics. Then try the same length over an intron and compare. Boundaries between
+    high- and low-confidence stretches in Carbon's output also tend to fall near real
+    exon/intron edges, even though the model has never seen a single annotation.
   </div>
 </section>
 
@@ -2064,12 +2139,9 @@ function loadGenes() {
 (function initDemo1() {
   const els = {
     pills:   document.getElementById("d1-pills"),
-    prefixPills: document.getElementById("d1-prefix-pills"),
-    genPills: document.getElementById("d1-gen-pills"),
     info:    document.getElementById("d1-info"),
     track:   document.getElementById("d1-track"),
     seq:     document.getElementById("d1-seq"),
-    ref:     document.getElementById("d1-ref"),
     go:      document.getElementById("d1-go"),
     stop:    document.getElementById("d1-stop"),
     status:  document.getElementById("d1-status"),
@@ -2083,9 +2155,14 @@ function loadGenes() {
   };
 
   let gene = null;
-  let prefixLen = 200;
-  let genLen = 60;
+  let prefixStart = 0;
+  let prefixEnd = 200;
+  let genEnd = 260;              // end of generated region (genLen = genEnd - prefixEnd)
+  const MIN_PROMPT_BP = 6;       // at least one BPE token's worth
+  const MIN_GEN_BP = 6;
+  const DEFAULT_GEN_BP = 60;
   let abortCtrl = null;
+  let dragging = null;           // "start" | "end" | "genend" | null
 
   let promptBases = "";
   let genText = "";
@@ -2098,30 +2175,62 @@ function loadGenes() {
   }
 
   function renderTrack() {
-    const W = 1000, H = 28;
+    const W = 1000, H = 40;
     if (!gene) { els.track.innerHTML = ""; return; }
     const scaleX = (bp) => (bp / gene.length) * W;
+    // Track body sits y=8..32; arrows live at y=0..8 (start, top) and y=32..40 (end, bottom).
+    const TRACK_TOP = 8, TRACK_BOT = 32, INTRON_Y = 20, EXON_Y = 14, EXON_H = 12;
     let svg = "";
     // Background line through introns
-    svg += `<line class="intron" x1="0" y1="${H/2}" x2="${W}" y2="${H/2}"/>`;
+    svg += `<line class="intron" x1="0" y1="${INTRON_Y}" x2="${W}" y2="${INTRON_Y}"/>`;
     // Exon rectangles
     for (const e of gene.exons) {
       const x = scaleX(e.start);
       const w = Math.max(1, scaleX(e.end - e.start));
-      svg += `<rect class="exon" x="${x.toFixed(1)}" y="6" width="${w.toFixed(1)}" height="16"/>`;
+      svg += `<rect class="exon" x="${x.toFixed(1)}" y="${EXON_Y}" width="${w.toFixed(1)}" height="${EXON_H}"/>`;
     }
-    // Generated region (faint red box)
-    const genStart = scaleX(prefixLen);
-    const genEnd = scaleX(Math.min(gene.length, prefixLen + genLen));
-    svg += `<rect class="gen-region" x="${genStart.toFixed(1)}" y="0" width="${(genEnd - genStart).toFixed(1)}" height="${H}"/>`;
-    // Prompt-end playhead
-    svg += `<line class="playhead" x1="${genStart.toFixed(1)}" y1="0" x2="${genStart.toFixed(1)}" y2="${H}"/>`;
+    // Selected prompt region (very faint, between handles)
+    const xStart = scaleX(prefixStart);
+    const xEnd   = scaleX(prefixEnd);
+    svg += `<rect class="prompt-region" x="${xStart.toFixed(1)}" y="${TRACK_TOP}" width="${(xEnd - xStart).toFixed(1)}" height="${TRACK_BOT - TRACK_TOP}"/>`;
+    // Generated region (muted green box, between prompt-end and gen-end handles)
+    const xGenEnd = scaleX(genEnd);
+    svg += `<rect class="gen-region" x="${xEnd.toFixed(1)}" y="${TRACK_TOP}" width="${(xGenEnd - xEnd).toFixed(1)}" height="${TRACK_BOT - TRACK_TOP}"/>`;
+    // START handle: vertical line through the track body + downward triangle on top.
+    svg += `<g class="handle${dragging === "start" ? " dragging" : ""}" data-role="start" transform="translate(${xStart.toFixed(1)},0)">`
+        +    `<line x1="0" y1="${TRACK_TOP}" x2="0" y2="${TRACK_BOT}"/>`
+        +    `<polygon points="-4,0 4,0 0,${TRACK_TOP}"/>`
+        +    `<rect x="-8" y="0" width="16" height="${H}" fill="transparent"/>`
+        + `</g>`;
+    // END handle (prompt end / gen start): vertical line + upward triangle on bottom.
+    svg += `<g class="handle${dragging === "end" ? " dragging" : ""}" data-role="end" transform="translate(${xEnd.toFixed(1)},0)">`
+        +    `<line x1="0" y1="${TRACK_TOP}" x2="0" y2="${TRACK_BOT}"/>`
+        +    `<polygon points="0,${TRACK_BOT} -4,${H} 4,${H}"/>`
+        +    `<rect x="-8" y="0" width="16" height="${H}" fill="transparent"/>`
+        + `</g>`;
+    // GEN-END handle: vertical line + downward triangle on top, green.
+    svg += `<g class="handle gen${dragging === "genend" ? " dragging" : ""}" data-role="genend" transform="translate(${xGenEnd.toFixed(1)},0)">`
+        +    `<line x1="0" y1="${TRACK_TOP}" x2="0" y2="${TRACK_BOT}"/>`
+        +    `<polygon points="-4,0 4,0 0,${TRACK_TOP}"/>`
+        +    `<rect x="-8" y="0" width="16" height="${H}" fill="transparent"/>`
+        + `</g>`;
     els.track.innerHTML = svg;
   }
 
+  function bpFromClientX(clientX) {
+    if (!gene) return 0;
+    const rect = els.track.getBoundingClientRect();
+    const frac = (clientX - rect.left) / rect.width;
+    return Math.max(0, Math.min(gene.length, Math.round(frac * gene.length)));
+  }
+
   function renderInfo() {
     if (!gene) { els.info.textContent = "loading genes…"; return; }
-    els.info.innerHTML = `<strong>${gene.symbol}</strong> · ${gene.blurb} · <span style="color:#888">${gene.length.toLocaleString("en-US")} bp</span>`;
+    const promptLen = prefixEnd - prefixStart;
+    const genLen = genEnd - prefixEnd;
+    els.info.innerHTML = `<strong>${gene.symbol}</strong> · ${gene.blurb} · <span style="color:#888">${gene.length.toLocaleString("en-US")} bp</span>`
+      + ` · <span style="color:#888">prompt: ${prefixStart}–${prefixEnd} (${promptLen} bp)</span>`
+      + ` · <span style="color:#317f3f">generate: ${prefixEnd}–${genEnd} (${genLen} bp)</span>`;
   }
 
   function basesPerLine() {
@@ -2151,33 +2260,27 @@ function loadGenes() {
     const total = prompt + genText;
     const lpRange = lpRangeOf(genTokens);
 
-    // Output: prompt in gray, generated colored by logprob
-    const colorOutput = (absIdx) => {
+    // Output: prompt in gray; generated colored by logprob, underlined green/red by ref match.
+    const colorOutput = (absIdx, base) => {
       if (absIdx < prompt.length) {
         return { style: `color:rgb(${PROMPT_RGB.join(",")})` };
       }
-      const tok = genTokens[genTokenAtBase[absIdx - prompt.length]];
+      const genIdx = absIdx - prompt.length;
+      const tok = genTokens[genTokenAtBase[genIdx]];
       const [r, g, b] = logprobRgb(tok ? tok.logprob : null, lpRange);
-      return { style: `color:rgb(${r},${g},${b})` };
+      const refBase = gene ? gene.seq[prefixEnd + genIdx] : undefined;
+      const ulColor = refBase == null
+        ? "transparent"
+        : (base === refBase ? "#317f3f" : "#b00020");
+      return {
+        style: `color:rgb(${r},${g},${b});`
+             + `text-decoration:underline;`
+             + `text-decoration-color:${ulColor};`
+             + `text-decoration-thickness:1.5px;`
+             + `text-underline-offset:2px`
+      };
     };
     renderSeq(els.seq, total, bpl, colorOutput);
-
-    // Reference: same window, but colored by match status (against generated bases)
-    if (!gene) { els.ref.classList.add("empty"); els.ref.textContent = "—"; return; }
-    const refEnd = Math.min(gene.length, prompt.length + genLen);
-    const refSeq = gene.seq.slice(0, refEnd);
-    const colorRef = (absIdx, base) => {
-      if (absIdx < prompt.length) {
-        return { style: `color:rgb(${PROMPT_RGB.join(",")})` };
-      }
-      const genIdx = absIdx - prompt.length;
-      if (genIdx >= genText.length) return { style: "color:#ccc" };  // not yet generated
-      const matches = genText[genIdx] === base;
-      return matches
-        ? { style: "color:#bbb" }
-        : { style: "color:#b00020;background:rgba(188,46,37,0.18)" };
-    };
-    renderSeq(els.ref, refSeq, bpl, colorRef);
   }
 
   function updateStats() {
@@ -2187,7 +2290,7 @@ function loadGenes() {
       });
       return;
     }
-    const refSlice = gene.seq.slice(promptBases.length, promptBases.length + genText.length);
+    const refSlice = gene.seq.slice(prefixEnd, prefixEnd + genText.length);
     let match = 0, total = 0;
     let exonMatch = 0, exonTotal = 0;
     let intronMatch = 0, intronTotal = 0;
@@ -2196,7 +2299,7 @@ function loadGenes() {
       total++;
       const ok = genText[i] === refSlice[i];
       if (ok) match++;
-      const ann = annotationAt(promptBases.length + i);
+      const ann = annotationAt(prefixEnd + i);
       if (ann === "exon") { exonTotal++; if (ok) exonMatch++; }
       else if (ann === "intron") { intronTotal++; if (ok) intronMatch++; }
     }
@@ -2212,10 +2315,11 @@ function loadGenes() {
   }
 
   function reset() {
-    promptBases = gene ? gene.seq.slice(0, prefixLen) : "";
+    promptBases = gene ? gene.seq.slice(prefixStart, prefixEnd) : "";
     genText = "";
     genTokens = [];
     genTokenAtBase = [];
+    renderInfo();
     renderTrack();
     renderSequenceAndRef();
     updateStats();
@@ -2229,6 +2333,8 @@ function loadGenes() {
     els.stop.disabled = false;
     setStatus("connecting…", "streaming");
 
+    const genLen = genEnd - prefixEnd;
+
     try {
       const resp = await fetch("/generate", {
         method: "POST",
@@ -2297,8 +2403,11 @@ function loadGenes() {
     const g = GENES.find(x => x.symbol === symbol);
     if (!g) return;
     gene = g;
+    // Reset prompt + generate windows to defaults, clamped to this gene's length.
+    prefixStart = 0;
+    prefixEnd = Math.min(200, Math.max(MIN_PROMPT_BP, gene.length - DEFAULT_GEN_BP));
+    genEnd = Math.min(gene.length, prefixEnd + DEFAULT_GEN_BP);
     els.pills.querySelectorAll(".pill").forEach(p => p.classList.toggle("active", p.dataset.gene === symbol));
-    renderInfo();
     reset();
   }
 
@@ -2323,11 +2432,39 @@ function loadGenes() {
     els.info.textContent = "failed to load genes: " + e.message;
   });
 
-  bindPills(els.prefixPills, "prefix", (v) => { prefixLen = +v; reset(); });
-  bindPills(els.genPills,    "gen",    (v) => { genLen = +v; reset(); });
   els.go.addEventListener("click", generate);
   els.stop.addEventListener("click", stop);
 
+  // Drag handles on the track to set the prompt range.
+  els.track.addEventListener("pointerdown", (e) => {
+    const target = e.target.closest(".handle");
+    if (!target || !gene) return;
+    dragging = target.dataset.role;
+    els.track.setPointerCapture(e.pointerId);
+    renderTrack();           // re-render so the picked handle shows its `.dragging` style
+    e.preventDefault();
+  });
+  els.track.addEventListener("pointermove", (e) => {
+    if (!dragging || !gene) return;
+    const bp = bpFromClientX(e.clientX);
+    if (dragging === "start") {
+      prefixStart = Math.max(0, Math.min(bp, prefixEnd - MIN_PROMPT_BP));
+    } else if (dragging === "end") {
+      prefixEnd = Math.max(prefixStart + MIN_PROMPT_BP, Math.min(bp, genEnd - MIN_GEN_BP));
+    } else if (dragging === "genend") {
+      genEnd = Math.max(prefixEnd + MIN_GEN_BP, Math.min(bp, gene.length));
+    }
+    reset();
+  });
+  const endDrag = (e) => {
+    if (!dragging) return;
+    dragging = null;
+    try { els.track.releasePointerCapture(e.pointerId); } catch (_) {}
+    renderTrack();
+  };
+  els.track.addEventListener("pointerup", endDrag);
+  els.track.addEventListener("pointercancel", endDrag);
+
   window.addEventListener("resize", () => {
     if (gene) renderSequenceAndRef();
   });