Implement replay mode enhancements and run-locally instructions

- Updated `app.js` to allow sending prompts in replay mode while providing a hint for running the server locally.
- Added a new `run-locally` section in `index.html` with instructions and buttons for copying commands and dismissing the hint.
- Enhanced `style.css` to style the run-locally callout and added visual cues for replay-locked buttons.
- Improved user experience by keeping the textarea editable in replay mode while disabling actual submissions.

web/app.js

@@ -81,11 +81,18 @@ function setMode(mode) {
     ui.connection.textContent = "replay";
     ui.connection.classList.remove("offline");
     ui.connection.classList.add("replay");
-    ui.send.disabled = true;
-    ui.sendTwice.disabled = true;
-    ui.prompt.disabled = true;
+    // Keep textarea editable — feels alive — but the Send buttons can't
+    // really submit, so they open the run-locally hint instead.
+    ui.send.disabled = false;
+    ui.sendTwice.disabled = false;
+    ui.prompt.disabled = false;
+    ui.send.classList.add("replay-locked");
+    ui.sendTwice.classList.add("replay-locked");
+    ui.send.title = "Replay mode — click to see how to run live locally";
+    ui.sendTwice.title = ui.send.title;
+    ui.prompt.placeholder = "Recorded demo — typing won't submit. Run the server locally to use your own prompts.";
     setBanner(
-      "REPLAY MODE — this is a pre-recorded session. Run the server locally to send your own prompts.",
+      "REPLAY MODE — this is a pre-recorded session. Send buttons show local-run instructions instead.",
       "replay-banner",
     );
     if (ui.speed) ui.speed.style.display = "";
@@ -412,15 +419,42 @@ async function sendPrompt(prompt) {
   }
 }
 
-ui.send.addEventListener("click", () => sendPrompt(ui.prompt.value));
-ui.sendTwice.addEventListener("click", async () => {
+function showRunLocally() {
+  const el = $("run-locally");
+  if (!el) return;
+  el.hidden = false;
+  el.scrollIntoView({ behavior: "smooth", block: "nearest" });
+}
+
+function trySend(handler) {
+  if (state.mode !== "live") { showRunLocally(); return; }
+  handler();
+}
+
+ui.send.addEventListener("click", () => trySend(() => sendPrompt(ui.prompt.value)));
+ui.sendTwice.addEventListener("click", () => trySend(async () => {
   const p = ui.prompt.value;
   await sendPrompt(p);
   await new Promise(r => setTimeout(r, 200));
   await sendPrompt(p);
-});
+}));
 ui.prompt.addEventListener("keydown", (e) => {
-  if ((e.metaKey || e.ctrlKey) && e.key === "Enter") sendPrompt(e.target.value);
+  if ((e.metaKey || e.ctrlKey) && e.key === "Enter") trySend(() => sendPrompt(e.target.value));
+});
+
+// Run-locally callout controls.
+const rlClose = $("rl-close");
+if (rlClose) rlClose.addEventListener("click", () => { $("run-locally").hidden = true; });
+const rlCopy = $("rl-copy");
+if (rlCopy) rlCopy.addEventListener("click", async () => {
+  const cmd = $("run-locally").querySelector("pre").innerText.trim();
+  try {
+    await navigator.clipboard.writeText(cmd);
+    rlCopy.textContent = "Copied ✓";
+    setTimeout(() => { rlCopy.textContent = "Copy command"; }, 1500);
+  } catch {
+    rlCopy.textContent = "Copy failed";
+  }
 });
 
 if (ui.speed) ui.speed.addEventListener("change", () => {

web/index.html

@@ -58,6 +58,18 @@
       <button id="restart" style="display:none" class="ghost">Restart</button>
     </span>
   </div>
+
+  <div id="run-locally" class="run-locally" hidden>
+    <div class="rl-head">This is a <b>recorded</b> session — to send live prompts, run the server locally.</div>
+    <pre><code>git clone https://github.com/surajsharan/tiny_vLLM
+cd tiny_vLLM &amp;&amp; pip install -r requirements.txt
+python -m tiny_vllm.server --model Qwen/Qwen2.5-0.5B-Instruct
+# then open http://localhost:8000</code></pre>
+    <div class="rl-foot">
+      <button id="rl-copy" class="ghost">Copy command</button>
+      <button id="rl-close" class="ghost">Dismiss</button>
+    </div>
+  </div>
 </section>
 
 <main>
@@ -94,7 +106,7 @@
 </main>
 
 <footer>
-  Subscribed to <code>/engine/events</code> · Source on <a href="https://github.com/surajsharan/tiny_vLLM" target="_blank" rel="noopener">github.com/surajsharan/tiny_vLLM</a> · Designed to match <a href="https://surajsharan.github.io/">surajsharan.github.io</a>.
+  Subscribed to <code>/engine/events</code> · Source on <a href="https://github.com/surajsharan/tiny_vLLM" target="_blank" rel="noopener">github.com/surajsharan/tiny_vLLM</a>
 </footer>
 
 <script src="app.js"></script>

web/style.css

@@ -183,7 +183,12 @@ button {
   transition: all 0.12s ease;
 }
 button:hover { background: var(--accent-dim); border-color: var(--accent-dim); }
-button:disabled { opacity: 0.35; cursor: not-allowed; background: var(--bg-elev); color: var(--muted); border-color: var(--border); }
+button:disabled { opacity: 0.55; cursor: not-allowed; background: var(--bg-elev); color: var(--muted); border-color: var(--border); }
+/* Replay-mode "soft disable": looks clickable, but Send opens the run-locally
+ * hint instead of submitting. We mark it with a class so the cursor and
+ * tooltip read as intentional, not broken. */
+button.replay-locked { cursor: help; }
+button.replay-locked::after { content: " ✦"; color: var(--purple); }
 button.ghost {
   background: transparent;
   border: 1px solid var(--border-strong);
@@ -198,6 +203,36 @@ button.ghost:hover { border-color: var(--accent); color: var(--accent); }
 
 textarea:disabled { opacity: 0.5; }
 
+/* ---------- run-locally callout (replay mode) ---------- */
+.run-locally {
+  margin-top: 4px;
+  background: var(--bg);
+  border: 1px solid var(--border-strong);
+  border-left: 2px solid var(--purple);
+  border-radius: var(--radius);
+  padding: 12px 14px;
+  font-family: var(--mono);
+  font-size: 12px;
+}
+.run-locally[hidden] { display: none; }
+.run-locally .rl-head {
+  color: var(--fg);
+  font-size: 12px;
+  margin-bottom: 8px;
+}
+.run-locally .rl-head b { color: var(--purple); font-weight: 600; }
+.run-locally pre {
+  margin: 0 0 10px;
+  padding: 10px 12px;
+  background: var(--bg-elev2);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  font-family: var(--mono); font-size: 12px;
+  color: var(--accent);
+  overflow-x: auto;
+}
+.run-locally .rl-foot { display: flex; gap: 8px; }
+
 .replay-controls { margin-left: auto; display: flex; gap: 6px; align-items: center; }
 .replay-controls select {
   background: var(--bg); color: var(--fg);