Add copy button, dynamic logprob range, base/logprob bg tints, examples-above-input layout

index.html

@@ -34,7 +34,19 @@
     text-transform: uppercase; letter-spacing: 2px; color: #444;
     margin-top: 24px; margin-bottom: 8px;
     border-bottom: 1px solid #ccc; padding-bottom: 4px;
+    display: flex; align-items: center; justify-content: space-between;
   }
+  .copy-btn {
+    font-family: "JetBrains Mono", monospace;
+    font-size: 9px; font-weight: 400;
+    padding: 2px 8px; border: 1px solid #ddd; border-radius: 3px;
+    background: #fff; color: #666; cursor: pointer;
+    text-transform: uppercase; letter-spacing: 1px;
+    transition: all 0.15s;
+  }
+  .copy-btn:hover { border-color: #888; color: #1a1a1a; }
+  .copy-btn:disabled { opacity: 0.4; cursor: not-allowed; }
+  .copy-btn.copied { background: #1a8a3a; color: #fff; border-color: #1a8a3a; }
 
   /* --- Examples --- */
   .examples {
@@ -262,7 +274,10 @@
 
 <div class="status" id="status"><span class="dot"></span><span id="status-text">idle</span></div>
 
-<div class="section-title">Sequence</div>
+<div class="section-title">
+  <span>Sequence</span>
+  <button id="copy-btn" class="copy-btn" disabled>copy</button>
+</div>
 
 <div class="output-row">
   <div>
@@ -298,6 +313,7 @@ const els = {
   stop: document.getElementById("stop-btn"),
   clear: document.getElementById("clear-btn"),
   modeBtns: document.getElementById("mode-btns"),
+  copy: document.getElementById("copy-btn"),
   seq: document.getElementById("seq"),
   meta: document.getElementById("meta"),
   status: document.getElementById("status"),
@@ -434,6 +450,7 @@ function rgbForBase(absIdx, base) {
 function renderSequence() {
   if (colorMode === "logprob") recomputeLpRange();
   const total = promptBases + genText;
+  els.copy.disabled = total.length === 0;
   if (!total) {
     els.seq.classList.add("empty");
     els.seq.textContent = "prompt + generated bases will stream here";
@@ -614,6 +631,22 @@ els.generate.addEventListener("click", generate);
 els.stop.addEventListener("click", stop);
 els.clear.addEventListener("click", clearAll);
 
+els.copy.addEventListener("click", async () => {
+  const text = promptBases + genText;
+  if (!text) return;
+  try {
+    await navigator.clipboard.writeText(text);
+    els.copy.classList.add("copied");
+    els.copy.textContent = "copied";
+  } catch {
+    els.copy.textContent = "failed";
+  }
+  setTimeout(() => {
+    els.copy.classList.remove("copied");
+    els.copy.textContent = "copy";
+  }, 1200);
+});
+
 els.prompt.addEventListener("keydown", e => {
   if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
     e.preventDefault();