Fix cursor flicker from a resizing modal; retire the bundled examples

The stage was a vertically centred dialog whose content changes every
second, so each height delta moved ALL of its content by half — which
reads as the pointer flashing between hand and arrow as buttons slide
under it. The dialog is now anchored near the top so growth only
extends downward, the log and text rows have reserved heights, and the
progress bar is always present (sweeping during warm-up) instead of
toggling hidden and shifting everything by 22px. Verified: no
cursor-flapping points across a 680x760 grid over a full lifecycle.

Examples: the bundled scripts predate the current app, so they no
longer load; the chip row hides itself and the empty-state copy points
at Write with AI and import instead. Loader and files are left intact
behind a flag for a future curated set.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

app.py

@@ -455,7 +455,11 @@ def _build_examples_index() -> list[dict]:
     return index
 
 
-EXAMPLES_INDEX = _build_examples_index()
+# Examples retired 2026-08-22 (Josh) — the bundled scripts predate the current
+# app and no longer fit it. The loader and text_examples/ files are left intact
+# so restoring a curated set is a one-line change.
+SHOW_BUNDLED_EXAMPLES = False
+EXAMPLES_INDEX = _build_examples_index() if SHOW_BUNDLED_EXAMPLES else []
 
 
 # --- Modal Connection ---

static/app.js

@@ -1061,7 +1061,7 @@ function renderTurns() {
     empty.id = "emptyTurns";
     empty.innerHTML =
       '<div class="empty-title">No scene yet</div>' +
-      "Type a scenario above and click <strong>Write with AI</strong>, pick an example, or start typing your own line below.";
+      "Describe a scenario above and click <strong>Write with AI</strong>, import a script, or start typing your own line below.";
     el.turnsList.append(empty);
     updateMeta();
     return;
@@ -1170,6 +1170,7 @@ function loadScriptResult(result, titleFallback, summary) {
 /* ---------------- Examples ---------------- */
 function renderExamplePills() {
   el.examplePills.innerHTML = "";
+  el.examplePills.hidden = !state.examples.length;  // no empty gap when unset
   state.examples.forEach((example) => {
     const btn = document.createElement("button");
     btn.type = "button";
@@ -1703,7 +1704,12 @@ function paintProgress() {
   let pctText = "Starting…";
   if (!progress.genStartedAt) {
     // Still warming up — say so plainly instead of ticking a generation clock.
+    // The bar stays present and sweeping: hiding it would resize the dialog.
     el.progressMeta.hidden = false;
+    el.progressTrack.hidden = false;
+    el.genStageTrack.hidden = false;
+    el.progressTrack.classList.add("indeterminate");
+    el.genStageTrack.classList.add("indeterminate");
     const warm = `GPU warming up · ${formatMinutes(elapsed) || "0s"}`;
     el.progressMeta.textContent = warm;
     el.genStagePct.textContent = "Warming up…";
@@ -1768,7 +1774,8 @@ function showStagePane(which) {
 function openGenerateStage(title) {
   el.genStageTitle.textContent = (title || "Untitled conversation").toUpperCase();
   el.genStagePct.textContent = "Starting…";
-  el.genStageTrack.hidden = true;
+  el.genStageTrack.hidden = false;
+  el.genStageTrack.classList.add("indeterminate");
   el.genStageFill.style.width = "0%";
   el.genStageLog.textContent = "";
   showStagePane("generating");
@@ -1789,9 +1796,9 @@ function startProgress() {
   progress.genStartedAt = 0;
   progress.warmupSecs = 0;
   el.progressFill.style.width = "0%";
-  el.progressTrack.classList.remove("indeterminate");
-  el.genStageTrack.classList.remove("indeterminate");
-  el.progressTrack.hidden = true;
+  el.progressTrack.classList.add("indeterminate");
+  el.genStageTrack.classList.add("indeterminate");
+  el.progressTrack.hidden = false;
   clearInterval(progress.ticker);
   progress.ticker = setInterval(paintProgress, 1000);
   paintProgress();

static/index.html

@@ -129,8 +129,8 @@
           <div id="turnsList">
             <div class="empty-transcript" id="emptyTurns">
               <div class="empty-title">No scene yet</div>
-              Type a scenario above and click <strong>Write with AI</strong>, pick an example, or
-              start typing your own line below.
+              Describe a scenario above and click <strong>Write with AI</strong>, import a script,
+              or start typing your own line below.
             </div>
           </div>
           <button class="add-turn" id="addTurnBtn" type="button">+ Add a line</button>

static/styles.css

@@ -845,6 +845,11 @@ dialog::backdrop { background: rgba(42, 32, 22, 0.45); }
   border-radius: 24px;
   max-height: 90vh;
   overflow-y: auto;
+  /* Anchored near the top rather than centred: the generating view changes
+     height every second, and a centred dialog would shift ALL its content by
+     half of every delta — which reads as the pointer flickering. */
+  margin-top: 5vh;
+  margin-bottom: auto;
 }
 .player-stage::backdrop { background: rgba(42, 32, 22, 0.55); }
 .stage-body { padding: 36px 36px 30px; }
@@ -889,20 +894,23 @@ body.is-generating .canvas { opacity: 0.6; transition: opacity 0.2s; }
   font-variant-numeric: tabular-nums;
 }
 .gen-track { height: 10px; margin-bottom: 12px; }
+/* Fixed heights so per-second text changes can't resize the dialog. */
 .gen-stage-meta {
   text-align: center;
   font-size: 0.9rem;
   font-weight: 700;
   color: var(--ink);
   font-variant-numeric: tabular-nums;
+  min-height: 1.4em;
 }
 .gen-stage-desc {
   text-align: center;
   font-size: 0.84rem;
   color: var(--ink-faint);
   margin-top: 6px;
-  min-height: 1.2em;
+  min-height: 2.6em;
 }
+.gen-stage-log { height: 260px; }
 .gen-stage-log {
   margin-top: 18px;
   background: var(--paper-soft);