quiver-cli 0.8.0 → 1.1.0

package/template/.agents/skills/design/impeccable/scripts/live-browser.js

@@ -21,6 +21,7 @@
 
   const TOKEN = window.__IMPECCABLE_TOKEN__;
   const PORT = window.__IMPECCABLE_PORT__;
+  const APP_ROOT = window.__IMPECCABLE_APP_ROOT__ || null;
   if (!TOKEN || !PORT) {
     window.__IMPECCABLE_LIVE_INIT__ = false; // reset so the real load can init
     return;
@@ -57,6 +58,7 @@
   const Z = { highlight: 100001, bar: 100005, picker: 100007, toast: 100010 };
   const EASE = 'cubic-bezier(0.22, 1, 0.36, 1)'; // ease-out-quint
   const PREFIX = 'impeccable-live';
+  const IMPECCABLE_COMMAND = (window.__IMPECCABLE_COMMAND_PREFIX__ || '/') + 'impeccable';
   const PICK_CURSOR_STYLE_ID = PREFIX + '-pick-cursor-style';
   const MANUAL_APPLY_STATE_TTL_MS = 15 * 60 * 1000;
   const sessionState = window.__IMPECCABLE_LIVE_SESSION__?.createLiveBrowserSessionState({
@@ -97,7 +99,7 @@
 
   const LIVE_CHROME_MOUNT_CONTRACT = ['root', 'transport', 'state', 'actions'];
   const LIVE_UI_SURFACES = [
-    { key: 'global-bottom-bar', ids: [PREFIX + '-global-bar', PREFIX + '-global-bar-brand', PREFIX + '-pick-toggle', PREFIX + '-insert-toggle', PREFIX + '-detect-toggle', PREFIX + '-detect-badge', PREFIX + '-design-toggle', PREFIX + '-page-chat', PREFIX + '-page-chat-input', PREFIX + '-page-chat-voice'] },
+    { key: 'global-bottom-bar', ids: [PREFIX + '-global-bar', PREFIX + '-global-bar-brand', PREFIX + '-pick-toggle', PREFIX + '-insert-toggle', PREFIX + '-detect-toggle', PREFIX + '-detect-badge', PREFIX + '-design-toggle', PREFIX + '-page-chat', PREFIX + '-page-chat-input', PREFIX + '-page-chat-voice', PREFIX + '-page-chat-send'] },
     { key: 'pending-copy-edit-dock', ids: [PREFIX + '-pending-dock'] },
     { key: 'element-selection-chrome', ids: [PREFIX + '-highlight', PREFIX + '-tooltip', PREFIX + '-bar', PREFIX + '-selection-pill', PREFIX + '-input', PREFIX + '-configure-voice', PREFIX + '-configure-bar-tooltip'] },
     { key: 'action-picker', ids: [PREFIX + '-picker'] },
@@ -109,7 +111,7 @@
     { key: 'insert-mode-chrome', ids: [PREFIX + '-insert-line', PREFIX + '-insert-placeholder', PREFIX + '-placeholder-resize', PREFIX + '-insert-input', PREFIX + '-insert-voice', PREFIX + '-insert-create', PREFIX + '-insert-create-tooltip'] },
     { key: 'annotation-chrome', ids: [PREFIX + '-annot', PREFIX + '-annot-svg', PREFIX + '-annot-pins', PREFIX + '-annot-clear'] },
     { key: 'design-system-panel', ids: [PREFIX + '-design-host'] },
-    { key: 'toasts-and-errors', ids: [PREFIX + '-toast'] },
+    { key: 'toasts-and-errors', ids: [PREFIX + '-toast', PREFIX + '-mount-error'] },
     { key: 'css-isolation-boundary', ids: [PREFIX + '-root'] },
   ];
   const LIVE_UI_COMPONENT_IDS = [...new Set(LIVE_UI_SURFACES.flatMap((surface) => surface.ids))];
@@ -125,16 +127,69 @@
   let expectedVariants = 0;
   let arrivedVariants = 0;
   let visibleVariant = 0;
+  let generationPhase = null;
+  // Ascending order of the agent-generation lifecycle. The visible progress bar
+  // must never regress: a `browser_resumed`/behind checkpoint re-broadcasts an
+  // earlier phase (the server regresses the snapshot phase to `generating` on a
+  // behind checkpoint), and without this the bar jumps backward mid-generation.
+  // Unranked phases always pass so we never block a phase we do not model.
+  //
+  // Every `agent_phase` name here is emitted by recordAgentPhase() in
+  // live-server.mjs and listed in AGENT_PHASES in live/vocabulary.mjs, which the
+  // event validator enforces. This file is served raw and injected as an IIFE,
+  // so it cannot import that list; adding a phase means adding it in both.
+  // `queued`, `generating`, `variants_progress`, and `variants_ready` are set
+  // locally by this file and never arrive over the wire.
+  const PHASE_RANK = {
+    queued: 0,
+    picked_up: 1,
+    scaffolding: 2,
+    scaffold_fallback: 3,
+    source_ready: 4,
+    generation_ready: 5,
+    generating: 5,
+    variants_progress: 5,
+    first_reviewable: 8,
+    second_reviewable: 11,
+    all_variants_ready: 12,
+    variants_ready: 12,
+  };
+  function shouldAdvancePhase(current, next) {
+    if (!next || next === current) return false;
+    const nextRank = PHASE_RANK[next];
+    const currentRank = PHASE_RANK[current];
+    // Only block a known-lower phase from overwriting a known-higher one.
+    if (nextRank === undefined || currentRank === undefined) return true;
+    return nextRank >= currentRank;
+  }
+  let parameterGenerationState = 'idle';
+  let parameterReadyAnnouncedSession = null;
   let svelteComponentSession = null;
   let svelteRuntimePromise = null;
   let pendingSvelteComponentRetryObserver = null;
+  // The persistent mount-error card. A failed import/mount used to wipe local
+  // session state and flash a 5s toast, which destroyed the only handle the
+  // user had on a session the server still considered live. The card stays up
+  // until the variant mounts, the user retries, or a new cycle starts.
+  let mountErrorEl = null;
+  let mountErrorState = null;
+  let lastReportedMountFailure = null;
   let currentSourceFile = null;
   let currentPreviewFile = null;
   let currentPreviewMode = null;
   let recoveryWaitingForAnchor = false;
   let pickedAnchorSnapshot = null;
+  let pickedAnchorViewportTop = null;
   let pendingVariantAnchorRetryObserver = null;
   let pendingAcceptedSession = null;
+  // Survives cleanupAcceptedSession on purpose: the id of an accept whose
+  // POST was acknowledged (intent durable, epoch fenced) but whose actual
+  // source promotion hasn't reported back yet. Accept is optimistic, so the
+  // teardown nulls pendingAcceptedSession long before live-accept.mjs runs;
+  // this marker is what lets the SSE 'error' branch still recognize a late
+  // accept failure and say the variant was not saved (issue #384). Released
+  // when the real accept result arrives or a new session starts.
+  let awaitingAcceptResult = null;
   let variantObserver = null;
   let variantSelectionInFlight = false;
   let variantSelectionPromise = null;
@@ -150,9 +205,12 @@
   // startScrollLock / stopScrollLock below.
   let scrollLockObserver = null;
   let scrollLockTargetY = null;
+  let scrollLockAnchorTop = null;
   let scrollLockRaf = null;
   let scrollLockAbort = null;
   const SCROLL_ANCHOR_LOCK_ID = 'impeccable-scroll-anchor-lock';
+  const VARIANT_STATE_STYLE_ID = 'impeccable-variant-state';
+  const DISCARD_STATE_STYLE_ID = 'impeccable-discard-state';
 
   // Dedicated key for scroll position - SEPARATE from LS_KEY so that
   // saveSession's state updates don't clobber a carefully-captured scrollY.
@@ -250,6 +308,13 @@
       barConnected: !!barEl?.isConnected,
       hasSvelteComponentSession: !!svelteComponentSession,
       mountedSvelteVariant: svelteComponentSession?.mountedVariant || 0,
+      pickActive,
+      pendingApplyInFlight,
+      hoveredElement: hoveredElement ? {
+        tag: hoveredElement.tagName,
+        classes: hoveredElement.className,
+        pickable: pickable(hoveredElement),
+      } : null,
       pendingSvelteComponentRetry: !!pendingSvelteComponentRetryObserver,
       recoveryWaitingForAnchor,
       evtSourceReadyState: evtSource ? evtSource.readyState : null,
@@ -1112,14 +1177,15 @@
     });
   }
 
-  function hideBar() {
+  function hideBar(instant) {
     if (!barEl) return;
     const hideSeq = ++barHideSeq;
     stopVoice({ suppressSubmit: true });
     if (configureKind === 'insert') clearInsertPicking();
     barEl.style.opacity = '0';
-    barEl.style.transform = 'translateY(6px)';
-    setTimeout(() => { if (barEl && hideSeq === barHideSeq) barEl.style.display = 'none'; }, 250);
+    barEl.style.transform = instant ? 'translateY(0)' : 'translateY(6px)';
+    if (instant) barEl.style.display = 'none';
+    else setTimeout(() => { if (barEl && hideSeq === barHideSeq) barEl.style.display = 'none'; }, 250);
     hideActionPicker();
     closeTunePopover();
     hideConfigureBarTooltip();
@@ -1964,7 +2030,11 @@
    */
   function setLiveState(next) {
     state = next;
+    window.__IMPECCABLE_LIVE_STATE__ = next;
     syncPageInteractionCursor();
+    // Whether a queued steer is still behind a generation is a function of this
+    // state, so the hint has to move with it, not only with the 5s poll.
+    syncSteerQueueHint();
   }
 
   /** Element used to position the floating bar / shader during a session. */
@@ -2514,22 +2584,53 @@
       fontSize: '11px', color: BP.textDim, whiteSpace: 'nowrap',
       marginLeft: 'auto',
     });
-    // Variants currently arrive atomically in a single file edit, so a
-    // per-variant counter would lie. Say what's true.
     status.textContent = recoveryWaitingForAnchor
       ? 'Variants ready. Reveal the selected element to resume.'
-      : (arrivedVariants < expectedVariants
-        ? 'Generating ' + expectedVariants + ' variants...'
-        : 'Done');
+      : generationStatusText();
     row.appendChild(status);
 
     return row;
   }
 
+  function generationStatusText() {
+    if (arrivedVariants >= expectedVariants && expectedVariants > 0) return 'Done';
+    if (generationPhase === 'picked_up') return 'Agent picked up the request...';
+    if (generationPhase === 'scaffolding') return 'Finding the source...';
+    if (generationPhase === 'source_ready') return 'Source ready. Generating...';
+    if (generationPhase === 'scaffold_fallback') return 'Agent is locating the source...';
+    if (generationPhase === 'first_reviewable') return 'First variant is ready. Exploring more...';
+    if (generationPhase === 'second_reviewable') return 'Checking the remaining variants...';
+    return 'Generating ' + expectedVariants + ' variants...';
+  }
+
   // Cycling row
 
   const TUNE_ICON_SVG = '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" style="flex-shrink:0"><line x1="4" y1="8" x2="20" y2="8"/><circle cx="14" cy="8" r="2.4" fill="currentColor" stroke="none"/><line x1="4" y1="16" x2="20" y2="16"/><circle cx="10" cy="16" r="2.4" fill="currentColor" stroke="none"/></svg>';
 
+  /**
+   * Which variant the user is actually looking at. For component previews the
+   * mounted component is the truth; `visibleVariant` is the intent, and the two
+   * differ while a mount is in flight.
+   */
+  function cyclingShownVariant() {
+    return svelteComponentSession?.sessionId === currentSessionId && svelteComponentSession.mountedVariant > 0
+      ? svelteComponentSession.mountedVariant
+      : visibleVariant;
+  }
+
+  /**
+   * The single counter string. It is built here rather than at each call site
+   * because the row builder and the incremental sync used to disagree on the
+   * denominator: one showed the planned count, the other the arrived count, so
+   * "2/3" turned into "2/2" on the next sync without anything changing on
+   * screen. Arrived wins once anything has arrived; expected covers the window
+   * before the first variant lands.
+   */
+  function cyclingCounterText() {
+    const total = arrivedVariants > 0 ? arrivedVariants : expectedVariants;
+    return cyclingShownVariant() + '/' + total;
+  }
+
   function buildCyclingRow() {
     if (!ensureCyclingRenderable('build-cycling-row')) {
       return el('div', { display: 'none' });
@@ -2543,7 +2644,7 @@
     const prev = navBtn('\u2190');
     prev.id = PREFIX + '-variant-prev';
     prev.addEventListener('click', (e) => { e.stopPropagation(); cycleVariant(-1); });
-    if (visibleVariant <= 1) prev.style.opacity = '0.3';
+    if (cyclingShownVariant() <= 1) prev.style.opacity = '0.3';
     row.appendChild(prev);
 
     // Dots (clickable)
@@ -2555,20 +2656,22 @@
       color: BP.textDim, minWidth: '24px', textAlign: 'center',
     });
     counter.id = PREFIX + '-variant-counter';
-    counter.textContent = visibleVariant + '/' + arrivedVariants;
+    counter.textContent = cyclingCounterText();
     row.appendChild(counter);
 
     // Next
     const next = navBtn('\u2192');
     next.id = PREFIX + '-variant-next';
     next.addEventListener('click', (e) => { e.stopPropagation(); cycleVariant(1); });
-    if (visibleVariant >= arrivedVariants) next.style.opacity = '0.3';
+    if (cyclingShownVariant() >= arrivedVariants) next.style.opacity = '0.3';
     row.appendChild(next);
 
-    // Tune chip - only when the visible variant exposes params
+    // Tune chip stays visible while the deferred parameter phase is running,
+    // then becomes interactive as soon as this variant exposes controls.
     const visParams = parseVariantParams(getVisibleVariantEl());
     const hasParams = visParams.length > 0;
-    if (hasParams) {
+    const paramsPending = !hasParams && (parameterGenerationState === 'pending' || parameterGenerationState === 'loading');
+    if (hasParams || paramsPending) {
       const tune = el('button', {
         display: 'inline-flex', alignItems: 'center', gap: '6px',
         padding: '4px 10px', borderRadius: '5px',
@@ -2576,35 +2679,54 @@
         background: tuneOpen ? BP.accentSoft : 'transparent',
         color: tuneOpen ? BP.accent : BP.text,
         fontFamily: FONT, fontSize: '11px', fontWeight: '500',
-        cursor: 'pointer',
+        cursor: paramsPending ? 'wait' : 'pointer',
         transition: 'color 0.12s ease, background 0.12s ease',
         whiteSpace: 'nowrap',
       });
-      tune.innerHTML = TUNE_ICON_SVG;
+      if (paramsPending) {
+        const spinner = el('span', {
+          width: '11px', height: '11px', borderRadius: '50%',
+          border: '1.5px solid ' + BP.hairline,
+          borderTopColor: BP.accent,
+          animation: 'impeccable-spin 0.6s linear infinite',
+          boxSizing: 'border-box', flexShrink: '0',
+        });
+        spinner.setAttribute('aria-hidden', 'true');
+        tune.appendChild(spinner);
+      } else {
+        tune.innerHTML = TUNE_ICON_SVG;
+      }
       const tuneLabel = document.createElement('span');
       tuneLabel.textContent = 'Tune';
       tune.appendChild(tuneLabel);
-      const tuneBadge = document.createElement('span');
-      Object.assign(tuneBadge.style, {
-        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
-        minWidth: '16px', height: '16px', padding: '0 4px',
-        borderRadius: '999px',
-        background: tuneOpen ? C.brand : BP.hairline,
-        color: tuneOpen ? 'oklch(98% 0 0)' : 'inherit',
-        fontFamily: MONO, fontSize: '9.5px', fontWeight: '600',
-        lineHeight: '1',
-        boxSizing: 'border-box',
-      });
-      tuneBadge.textContent = String(visParams.length);
-      tune.appendChild(tuneBadge);
-      tune.title = 'Tune this variant (' + visParams.length + ' knob' + (visParams.length === 1 ? '' : 's') + ')';
-      tune.addEventListener('mouseenter', () => {
-        if (!tuneOpen) tune.style.background = BP.accentSoft;
-      });
-      tune.addEventListener('mouseleave', () => {
-        if (!tuneOpen) tune.style.background = 'transparent';
-      });
-      tune.addEventListener('click', (e) => { e.stopPropagation(); toggleTunePopover(); });
+      if (hasParams) {
+        const tuneBadge = document.createElement('span');
+        Object.assign(tuneBadge.style, {
+          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
+          minWidth: '16px', height: '16px', padding: '0 4px',
+          borderRadius: '999px',
+          background: tuneOpen ? C.brand : BP.hairline,
+          color: tuneOpen ? C.ink : 'inherit',
+          fontFamily: MONO, fontSize: '9.5px', fontWeight: '600',
+          lineHeight: '1',
+          boxSizing: 'border-box',
+        });
+        tuneBadge.textContent = String(visParams.length);
+        tune.appendChild(tuneBadge);
+        tune.title = 'Tune this variant (' + visParams.length + ' knob' + (visParams.length === 1 ? '' : 's') + ')';
+        tune.addEventListener('mouseenter', () => {
+          if (!tuneOpen) tune.style.background = BP.accentSoft;
+        });
+        tune.addEventListener('mouseleave', () => {
+          if (!tuneOpen) tune.style.background = 'transparent';
+        });
+        tune.addEventListener('click', (e) => { e.stopPropagation(); toggleTunePopover(); });
+      } else {
+        tune.disabled = true;
+        tune.setAttribute('aria-label', 'Tune controls are still being prepared');
+        tune.title = 'Tune controls are still being prepared';
+        tune.style.opacity = '0.72';
+      }
       tune.dataset.iceqTune = '1';
       row.appendChild(tune);
     }
@@ -2612,6 +2734,15 @@
     // Spacer
     row.appendChild(el('div', { flex: '1' }));
 
+    if (arrivedVariants < expectedVariants) {
+      const remaining = expectedVariants - arrivedVariants;
+      const progress = el('span', {
+        fontSize: '11px', color: BP.textDim, whiteSpace: 'nowrap',
+      });
+      progress.textContent = remaining + ' more arriving...';
+      row.appendChild(progress);
+    }
+
     // Accept - primary action, kinpaku gold + lacquer-deep (matches demo .live-demo-ctx-accept)
     const accept = el('button', {
       padding: '5px 14px', borderRadius: '5px',
@@ -2626,7 +2757,11 @@
     accept.addEventListener('mousedown', () => accept.style.transform = 'scale(0.97)');
     accept.addEventListener('mouseup', () => accept.style.transform = 'scale(1)');
     accept.addEventListener('click', (e) => { e.stopPropagation(); handleAccept(); });
-    if (arrivedVariants === 0) { accept.style.opacity = '0.3'; accept.style.pointerEvents = 'none'; }
+    if (arrivedVariants === 0) {
+      accept.style.opacity = '0.3';
+      accept.style.pointerEvents = 'none';
+      accept.title = 'Accept becomes available when the first variant arrives';
+    }
     row.appendChild(accept);
 
     // Discard
@@ -2893,7 +3028,7 @@
       console.warn('[impeccable] Refusing to render empty variant cycling state:', reason);
       const message = 'No variants were mounted. Please try again.';
       if (svelteComponentSession?.sessionId === currentSessionId) {
-        abortSvelteComponentInjection(currentSessionId, message);
+        resetSvelteComponentSession(currentSessionId, message);
         return;
       }
       cleanup();
@@ -3035,16 +3170,26 @@
   function applyParamValue(variantEl, param, value) {
     if (!variantEl) return;
     const attr = 'data-p-' + param.id;
-    if (param.kind === 'range') {
-      variantEl.style.setProperty('--p-' + param.id, String(value));
-    } else if (param.kind === 'toggle') {
+    if (param.kind === 'toggle') {
       const on = !!value;
-      variantEl.style.setProperty('--p-' + param.id, on ? '1' : '0');
       if (on) variantEl.setAttribute(attr, 'on');
       else variantEl.removeAttribute(attr);
     } else if (param.kind === 'steps') {
       variantEl.setAttribute(attr, String(value));
     }
+    // Svelte component variants are client-mounted into
+    // [data-impeccable-component-mount] with no [data-impeccable-variant="N"]
+    // wrapper for the state stylesheet to target, and the element is not SSR'd,
+    // so there is no React hydration to mismatch. Drive range/toggle --p-* inline
+    // on the mounted element so scoped preview CSS resolves them.
+    if (svelteComponentSession?.sessionId === currentSessionId) {
+      if (param.kind === 'range') variantEl.style.setProperty('--p-' + param.id, String(value));
+      else if (param.kind === 'toggle') variantEl.style.setProperty('--p-' + param.id, value ? '1' : '0');
+      return;
+    }
+    // range/toggle --p-* custom properties are driven through the injected
+    // variant-state stylesheet so we never mutate inline style on SSR'd divs.
+    updateVariantStateStylesheet(currentSessionId, visibleVariant);
   }
 
   function applyParamDefaults(variantEl, params) {
@@ -3119,7 +3264,7 @@
           position: 'absolute', top: '2px',
           left: initial ? '18px' : '2px',
           width: '16px', height: '16px', borderRadius: '50%',
-          background: 'oklch(98% 0 0)',
+          background: C.ink,
           transition: 'left 0.18s ' + EASE,
           boxShadow: '0 1px 2px oklch(0% 0 0 / 0.2)',
         });
@@ -3153,7 +3298,7 @@
           const b = el('button', {
             padding: '5px 4px', border: 'none', borderRadius: '3px',
             background: active ? C.brand : 'transparent',
-            color: active ? 'oklch(98% 0 0)' : P.text,
+            color: active ? C.ink : P.text,
             fontFamily: FONT, fontSize: '10.5px', fontWeight: '500',
             cursor: 'pointer', whiteSpace: 'nowrap',
             transition: 'background 0.1s ease, color 0.1s ease',
@@ -3166,7 +3311,7 @@
             segBtns.forEach(({ btn, val }) => {
               const on = val === o.value;
               btn.style.background = on ? C.brand : 'transparent';
-              btn.style.color = on ? 'oklch(98% 0 0)' : P.text;
+              btn.style.color = on ? C.ink : P.text;
             });
             applyParamValue(variantEl, p, o.value);
             queueCheckpoint('param_changed');
@@ -4714,6 +4859,7 @@
       paramsCurrentValues = {};
       tuneOpen = false;
       hideParamsPanel();
+      if (currentSessionId && visibleVariant) updateVariantStateStylesheet(currentSessionId, visibleVariant);
       return;
     }
     applyParamDefaults(variantEl, params);
@@ -4730,6 +4876,32 @@
     }
   }
 
+  function mountedParameterCount() {
+    if (svelteComponentSession?.sessionId === currentSessionId) {
+      return Object.values(svelteComponentSession.paramsByVariant || {})
+        .reduce((total, params) => total + (Array.isArray(params) ? params.length : 0), 0);
+    }
+    const wrapper = document.querySelector('[data-impeccable-variants="' + currentSessionId + '"]');
+    if (!wrapper) return 0;
+    return [...wrapper.querySelectorAll('[data-impeccable-variant]:not([data-impeccable-variant="original"])')]
+      .reduce((total, variant) => total + parseVariantParams(variant).length, 0);
+  }
+
+  function completeParameterPublication() {
+    if (!currentSessionId) return;
+    const ready = mountedParameterCount() > 0;
+    parameterGenerationState = ready ? 'ready' : 'none';
+    if (ready && parameterReadyAnnouncedSession !== currentSessionId) {
+      parameterReadyAnnouncedSession = currentSessionId;
+      showToast('Tune controls are ready.', 3000);
+    }
+    if (state === 'CYCLING') {
+      refreshParamsPanel();
+      showOrUpdateCyclingBar();
+    }
+    saveSession();
+  }
+
   function toggleTunePopover() {
     if (pendingApplyInFlight) { showManualApplyBusyToast(); return; }
     if (tuneOpen) { closeTunePopover(); return; }
@@ -4771,20 +4943,7 @@
 
   function isVariantShown(el) {
     if (!el) return false;
-    if (el.hidden) return false;
-    if (el.style?.display === 'none') return false;
-    return true;
-  }
-
-  function setVariantShown(el, shown) {
-    if (!el) return;
-    if (shown) {
-      el.removeAttribute('hidden');
-      el.style.display = '';
-    } else {
-      el.setAttribute('hidden', '');
-      el.style.display = 'none';
-    }
+    return getComputedStyle(el).display !== 'none';
   }
 
   function scheduleCyclingBarSync(sessionId, variantNum) {
@@ -4799,11 +4958,9 @@
   }
 
   function syncCyclingControls() {
-    const shown = svelteComponentSession?.sessionId === currentSessionId && svelteComponentSession.mountedVariant > 0
-      ? svelteComponentSession.mountedVariant
-      : visibleVariant;
+    const shown = cyclingShownVariant();
     const counter = uiGetById(PREFIX + '-variant-counter');
-    if (counter && arrivedVariants > 0) counter.textContent = shown + '/' + arrivedVariants;
+    if (counter) counter.textContent = cyclingCounterText();
     const prev = uiGetById(PREFIX + '-variant-prev');
     const next = uiGetById(PREFIX + '-variant-next');
     if (prev) prev.style.opacity = shown <= 1 ? '0.3' : '1';
@@ -4823,11 +4980,7 @@
     }
     const wrapper = document.querySelector('[data-impeccable-variants="' + sessionId + '"]');
     if (!wrapper) return false;
-    for (const child of wrapper.children) {
-      const v = child.dataset ? child.dataset.impeccableVariant : null;
-      if (!v) continue;
-      setVariantShown(child, v === String(num));
-    }
+    updateVariantStateStylesheet(sessionId, num);
     // Unconditional refresh - covers first-reveal (no-op if state isn't
     // CYCLING yet, the subsequent CYCLING transition triggers its own
     // refresh) and every cycle step.
@@ -4839,6 +4992,10 @@
     return String(filePath || '').endsWith('manifest.json');
   }
 
+  function isFrameworkComponentPreviewMode(mode) {
+    return mode === 'svelte-component';
+  }
+
   function parseOriginalMarkupElement(originalMarkup) {
     const parser = new DOMParser();
     const doc = parser.parseFromString('<div id="impeccable-anchor">' + originalMarkup + '</div>', 'text/html');
@@ -5033,11 +5190,74 @@
     }
   }
 
-  function loadSvelteRuntime(runtimeModule) {
+  // The dev server may serve under a non-root base (vite `base`) or a root
+  // that differs from where the helper wrote the preview tree. Root-relative
+  // URLs are tried against the detected base first; the /@fs/ absolute form
+  // is the fallback that works regardless of base and root, as long as the
+  // path is inside the server's fs.allow.
+  let detectedDevBase = null;
+  function detectDevServerBase() {
+    if (detectedDevBase !== null) return detectedDevBase;
+    detectedDevBase = '/';
+    const scripts = document.querySelectorAll('script[type="module"][src]');
+    for (const script of scripts) {
+      const src = script.getAttribute('src') || '';
+      const idx = src.indexOf('/@vite/client');
+      if (idx > 0) { detectedDevBase = src.slice(0, idx) + '/'; break; }
+      if (idx === 0) { detectedDevBase = '/'; break; }
+    }
+    return detectedDevBase;
+  }
+
+  function componentModuleCandidates(manifest, modulePath, absPath) {
+    const base = detectDevServerBase();
+    const rel = String(modulePath || '').replace(/^\/+/, '');
+    const candidates = [new URL(base + rel, location.origin).href];
+    if (base !== '/') candidates.push(new URL('/' + rel, location.origin).href);
+    if (absPath) {
+      const fsRel = '@fs/' + String(absPath).replace(/^\/+/, '');
+      candidates.push(new URL(base + fsRel, location.origin).href);
+      // Vite versions differ on whether @fs is served under base or at the
+      // server root; with a non-root base, try both.
+      if (base !== '/') candidates.push(new URL('/' + fsRel, location.origin).href);
+    }
+    return candidates;
+  }
+
+  async function importFirstReachable(candidates, bust) {
+    let lastErr = null;
+    for (const candidate of candidates) {
+      try {
+        const url = bust ? candidate + (candidate.includes('?') ? '&' : '?') + 't=' + Date.now() : candidate;
+        const mod = await import(/* @vite-ignore */ url);
+        return { mod, url: candidate };
+      } catch (err) {
+        lastErr = err;
+      }
+    }
+    throw Object.assign(lastErr || new Error('no module candidates'), {
+      impeccableTriedUrls: candidates,
+    });
+  }
+
+  // Distinguishes "this variant is broken" from "the preview tree is not
+  // reachable from the dev server at all" (wrong root, unserved directory).
+  async function probePreviewTree(manifest) {
+    if (!manifest?.probeModule) return { ok: true, skipped: true };
+    const candidates = componentModuleCandidates(manifest, manifest.probeModule, manifest.probeModuleAbs);
+    try {
+      await importFirstReachable(candidates, false);
+      return { ok: true };
+    } catch (err) {
+      return { ok: false, tried: err.impeccableTriedUrls || candidates };
+    }
+  }
+
+  function loadSvelteRuntime(runtimeModule, manifest) {
     const modulePath = runtimeModule || '/src/lib/impeccable/__runtime.js';
-    const url = new URL(modulePath, location.origin).href;
     if (!svelteRuntimePromise) {
-      svelteRuntimePromise = import(/* @vite-ignore */ url);
+      const candidates = componentModuleCandidates(manifest, modulePath, manifest?.runtimeModuleAbs);
+      svelteRuntimePromise = importFirstReachable(candidates, false).then((r) => r.mod);
     }
     return svelteRuntimePromise;
   }
@@ -5047,7 +5267,7 @@
   // attribute with JSON braces can't survive the Svelte compiler. Returns a map of
   // { "1": [...params], "2": [...] }; an empty object when the agent declared none.
   async function loadSvelteComponentParams(manifest) {
-    const dir = String(manifest?.componentDir || '').replace(/^\/+/, '');
+    const dir = String(manifest?.revisionDir || manifest?.componentDir || '').replace(/^\/+/, '');
     if (!dir) return {};
     const paramsPath = dir + '/params.json';
     const url = 'http://localhost:' + PORT + '/source?token=' + TOKEN + '&path=' + encodeURIComponent(paramsPath);
@@ -5066,41 +5286,14 @@
     }
   }
 
-  async function loadSvelteComponentVariantSource(manifest, variantNum) {
-    const dir = String(manifest?.componentDir || '').replace(/^\/+/, '');
-    if (!dir || !variantNum) return '';
-    const sourcePath = dir + '/v' + variantNum + '.svelte';
-    const url = 'http://localhost:' + PORT + '/source?token=' + TOKEN + '&path=' + encodeURIComponent(sourcePath);
-    try {
-      const res = await fetch(url);
-      if (!res.ok) return '';
-      return await res.text();
-    } catch {
-      return '';
-    }
-  }
 
-  function extractSvelteComponentStyle(source) {
-    const match = String(source || '').match(/<style\b[^>]*>([\s\S]*?)<\/style\s*>/i);
-    return match ? match[1].trim() : '';
-  }
 
-  async function applySvelteComponentVariantStyle(variantNum) {
-    if (!svelteComponentSession || !variantNum) return;
-    const { manifest, sessionId } = svelteComponentSession;
-    const source = await loadSvelteComponentVariantSource(manifest, variantNum);
-    const css = extractSvelteComponentStyle(source);
-    removeSvelteComponentVariantStyle(svelteComponentSession);
-    if (!css) return;
-    const scopedCss = scopeCssToSveltePreview(css, sessionId);
-    if (!scopedCss) return;
-    const style = document.createElement('style');
-    style.dataset.impeccableSvelteComponentStyle = sessionId;
-    style.dataset.impeccableVariant = String(variantNum);
-    style.textContent = scopedCss;
-    document.head.appendChild(style);
-    svelteComponentSession.styleEl = style;
-  }
+  // NOTE: the compiled component imported from the dev server already carries
+  // its own scoped styles (vite-plugin-svelte injects them on module
+  // evaluation). The old second injection re-fetched the raw source through
+  // the helper and re-prefixed every selector un-hashed, so the same rules
+  // applied twice with different specificity: preview and accepted cascades
+  // disagreed. The single compiled copy is the truth now.
 
   function removeSvelteComponentVariantStyle(session = svelteComponentSession) {
     const style = session?.styleEl;
@@ -5108,10 +5301,6 @@
     if (session) session.styleEl = null;
   }
 
-  function scopeCssToSveltePreview(css, sessionId) {
-    const prefix = '[data-impeccable-variants="' + String(sessionId).replace(/"/g, '\\"') + '"] ';
-    return scopeCssBlock(String(css || ''), prefix).trim();
-  }
 
   function scopeCssBlock(css, prefix) {
     let out = '';
@@ -5221,26 +5410,212 @@
     const contract = manifest?.propContract || [];
     const values = {};
     if (!liveEl || contract.length === 0) return values;
+    if (Number(manifest.contractVersion) === 2) {
+      return buildSveltePropValuesV2(liveEl, manifest);
+    }
     const sourceOriginal = parseOriginalMarkupElement(manifest.originalMarkup || '');
     if (!sourceOriginal) return values;
     const map = buildSvelteExpressionTextMap(sourceOriginal, liveEl);
     for (const entry of contract) {
-      const token = '{' + entry.expr + '}';
+      const token = entry.previewToken || ('{' + entry.expr + '}');
       values[entry.prop] = map.get(token) || '';
     }
     return values;
   }
 
+  // Contract v2 hydration. The scaffolder preserved control flow, so props
+  // come in kinds: `collection` hydrates from the live DOM's rendered items
+  // (count by the item root selector, texts by slot order), `condition` from
+  // whether the branch's probe element is currently rendered, `text` from the
+  // v1 index-zip run over the markup WITH control-flow regions stripped and
+  // the live tree WITH item elements excluded, so loop tokens can never shift
+  // slots again. `handler` props keep their no-op defaults.
+  function buildSveltePropValuesV2(liveEl, manifest) {
+    const contract = manifest.propContract || [];
+    const values = {};
+    const itemElsByProp = new Map();
+
+    for (const entry of contract) {
+      if (entry.kind === 'collection' && entry.item && entry.item.rootTag) {
+        const selector = entry.item.rootTag + (entry.item.rootClasses || []).map((c) => '.' + cssEscapeIdent(c)).join('');
+        let matches = [];
+        try { matches = Array.from(liveEl.querySelectorAll(selector)); } catch { matches = []; }
+        itemElsByProp.set(entry.prop, matches);
+        const statics = new Set((entry.item.staticTexts || []).map((t) => String(t).trim()));
+        const slots = entry.item.textSlots || [];
+        values[entry.prop] = matches.map((itemEl, index) => {
+          const texts = collectVisibleTexts(itemEl).filter((t) => !statics.has(t));
+          const item = {};
+          slots.forEach((slot, i) => { item[slot.key] = texts[i] != null ? texts[i] : ''; });
+          // Attribute-bound values (href={link.href}) hydrate from the
+          // rendered attribute on the live item element or a descendant.
+          for (const slot of entry.item.attrSlots || []) {
+            if (item[slot.key] != null || !slot.tag) continue;
+            const sel = slot.tag + (slot.classes || []).map((c) => '.' + cssEscapeIdent(c)).join('');
+            let el = null;
+            try { el = itemEl.matches(sel) ? itemEl : itemEl.querySelector(sel); } catch { el = null; }
+            const value = el ? el.getAttribute(slot.attr) : null;
+            if (value != null) item[slot.key] = value;
+          }
+          // Keyed each: the key field is never rendered, so hydrate it with a
+          // unique per-index value or Svelte throws each_key_duplicate.
+          if (entry.item.keyField && item[entry.item.keyField] == null) {
+            item[entry.item.keyField] = 'impeccable-live-' + index;
+          }
+          return item;
+        });
+      } else if (entry.kind === 'condition') {
+        if (entry.probe && entry.probe.tag) {
+          const selector = entry.probe.tag + (entry.probe.classes || []).map((c) => '.' + cssEscapeIdent(c)).join('');
+          try { values[entry.prop] = !!liveEl.querySelector(selector); } catch { /* keep default */ }
+        } else if (entry.probe && entry.probe.className) {
+          // class:name directive: the live DOM answers directly, either on
+          // the picked element itself or on a descendant carrying the class.
+          try {
+            values[entry.prop] = liveEl.classList.contains(entry.probe.className)
+              || !!liveEl.querySelector('.' + cssEscapeIdent(entry.probe.className));
+          } catch { /* keep default */ }
+        }
+      }
+    }
+
+    // Text props outside control flow: strip block regions from the source
+    // markup, exclude live text nodes inside any hydrated item element, then
+    // run the existing zip.
+    const textEntries = contract.filter((e) => e.kind === 'text' || e.kind === 'raw');
+    if (textEntries.length > 0) {
+      const strippedMarkup = stripSvelteBlockRegions(manifest.originalMarkup || '');
+      const sourceOriginal = parseOriginalMarkupElement(strippedMarkup);
+      if (sourceOriginal) {
+        const excluded = [];
+        for (const els of itemElsByProp.values()) excluded.push(...els);
+        const filteredLive = cloneWithoutElements(liveEl, excluded);
+        const map = buildSvelteExpressionTextMap(sourceOriginal, filteredLive);
+        for (const entry of textEntries) {
+          const token = '{' + entry.expr + '}';
+          if (map.has(token)) values[entry.prop] = map.get(token) || '';
+        }
+      }
+    }
+    return values;
+  }
+
+  function cssEscapeIdent(value) {
+    try { return CSS.escape(value); } catch { return String(value).replace(/[^a-zA-Z0-9_-]/g, ''); }
+  }
+
+  function collectVisibleTexts(rootEl) {
+    const texts = [];
+    const walker = document.createTreeWalker(rootEl, NodeFilter.SHOW_TEXT);
+    let node;
+    while ((node = walker.nextNode())) {
+      const trimmed = String(node.textContent || '').trim();
+      if (trimmed) texts.push(trimmed);
+    }
+    return texts;
+  }
+
+  // Remove balanced {#each}...{/each} and {#if}...{/if} regions (including
+  // the delimiters) from a markup string. Nesting-aware. {#key} blocks keep
+  // their CONTENT (it always renders) but lose their delimiter tokens, which
+  // would otherwise consume live text slots in the zip and shift every
+  // following expression.
+  function stripSvelteBlockRegions(markup) {
+    let out = String(markup || '');
+    out = stripSvelteKeyDelimiters(out);
+    for (const kind of ['each', 'if']) {
+      const open = '{#' + kind;
+      const close = '{/' + kind + '}';
+      for (;;) {
+        const start = out.indexOf(open);
+        if (start === -1) break;
+        let depth = 0;
+        let i = start;
+        let end = -1;
+        while (i < out.length) {
+          if (out.startsWith(open, i)) { depth++; i += open.length; continue; }
+          if (out.startsWith(close, i)) {
+            depth--;
+            i += close.length;
+            if (depth === 0) { end = i; break; }
+            continue;
+          }
+          i++;
+        }
+        if (end === -1) break;
+        out = out.slice(0, start) + out.slice(end);
+      }
+    }
+    return out;
+  }
+
+  function stripSvelteKeyDelimiters(markup) {
+    let out = String(markup || '');
+    for (;;) {
+      const start = out.indexOf('{#key');
+      if (start === -1) break;
+      // The opening tag runs to its matching close brace (expressions inside
+      // may nest braces).
+      let depth = 0;
+      let i = start;
+      let openEnd = -1;
+      while (i < out.length) {
+        if (out[i] === '{') depth++;
+        else if (out[i] === '}') {
+          depth--;
+          if (depth === 0) { openEnd = i + 1; break; }
+        }
+        i++;
+      }
+      if (openEnd === -1) break;
+      out = out.slice(0, start) + out.slice(openEnd);
+    }
+    return out.split('{/key}').join('');
+  }
+
+  function cloneWithoutElements(rootEl, excludedEls) {
+    if (!excludedEls || excludedEls.length === 0) return rootEl;
+    const excludedSet = new Set(excludedEls);
+    // Mark originals, clone, then strip marked clones: identity does not
+    // survive cloneNode, attributes do.
+    const MARK = 'data-impeccable-hydration-excluded';
+    for (const el of excludedSet) { try { el.setAttribute(MARK, '1'); } catch { /* detached */ } }
+    let clone;
+    try {
+      clone = rootEl.cloneNode(true);
+      clone.querySelectorAll('[' + MARK + ']').forEach((el) => el.remove());
+    } finally {
+      for (const el of excludedSet) { try { el.removeAttribute(MARK); } catch { /* detached */ } }
+    }
+    return clone || rootEl;
+  }
+
   async function mountSvelteComponentVariant(variantNum) {
     if (!svelteComponentSession || !variantNum) return false;
     const { manifest, mountTargetEl, sessionId } = svelteComponentSession;
+    // Resolved before the first await so the failure report can name the module
+    // the browser could not reach, whichever step threw.
+    const extension = manifest.componentExtension || 'svelte';
+    // Prefer the server-stamped revision dir: its path changes on every
+    // publish, which is what defeats stale transform caches for files the
+    // dev server does not watch.
+    const dirRel = manifest.revisionDir || manifest.componentDir || '';
+    const dirAbs = manifest.revisionDirAbs || manifest.componentDirAbs || null;
+    const moduleBase = manifest.componentModuleBase
+      || ('/' + String(dirRel).replace(/^\/+/, ''));
+    const modulePath = String(moduleBase).replace(/\/+$/, '') + '/v' + variantNum + '.' + extension;
+    const moduleAbs = dirAbs
+      ? String(dirAbs).replace(/\/+$/, '') + '/v' + variantNum + '.' + extension
+      : null;
+    const candidates = componentModuleCandidates(manifest, modulePath, moduleAbs);
+    let moduleUrl = candidates[0];
     try {
       const previousAnchor = getMountedSvelteComponentAnchor(svelteComponentSession) || selectedElement;
       svelteComponentSession.swapAnchor = makeFrozenAnchor(previousAnchor) || svelteComponentSession.swapAnchor || null;
-      const runtime = await loadSvelteRuntime(manifest.runtimeModule);
-      const modulePath = '/' + String(manifest.componentDir || '').replace(/^\/+/, '') + '/v' + variantNum + '.svelte';
-      const moduleUrl = new URL(modulePath, location.origin).href + '?t=' + Date.now();
-      const mod = await import(/* @vite-ignore */ moduleUrl);
+      const runtime = await loadSvelteRuntime(manifest.runtimeModule, manifest);
+      const imported = await importFirstReachable(candidates, true);
+      moduleUrl = imported.url;
+      const mod = imported.mod;
       const Component = mod.default;
       if (svelteComponentSession.mountedInstance && runtime.unmount) {
         await runtime.unmount(svelteComponentSession.mountedInstance);
@@ -5253,7 +5628,7 @@
       });
       svelteComponentSession.mountedVariant = variantNum;
       svelteComponentSession.runtime = runtime;
-      await applySvelteComponentVariantStyle(variantNum);
+      removeSvelteComponentVariantStyle(svelteComponentSession);
       if (state === 'CYCLING') syncCyclingControls();
       const nextAnchor = getMountedSvelteComponentAnchor(svelteComponentSession);
       if (nextAnchor) {
@@ -5274,16 +5649,44 @@
           selectedElement = settledAnchor;
         });
       }
+      // Render truth, not publish truth: this is the only point in the whole
+      // pipeline that proves the user can see variant N.
+      reportVariantMounted(sessionId, variantNum, moduleUrl);
+      if (mountErrorState?.sessionId === sessionId && mountErrorState.variant === variantNum) {
+        clearMountErrorCard();
+      }
       return true;
     } catch (err) {
       if (svelteComponentSession?.sessionId === sessionId) {
         svelteComponentSession.swapAnchor = null;
       }
-      console.error('[impeccable] Failed to mount Svelte variant ' + variantNum + ' for ' + sessionId + ':', err);
+      console.error('[impeccable] Failed to mount component variant ' + variantNum + ' for ' + sessionId + ':', err);
+      reportVariantMountFailed(sessionId, variantNum, moduleUrl, err);
+      // Every mount failure gets the card, so the variant-switch path (which
+      // used to revert with no feedback whatsoever) says what broke too.
+      showMountErrorCard(sessionId, {
+        variant: variantNum,
+        url: moduleUrl,
+        message: await describeMountFailure(manifest, err),
+      });
       return false;
     }
   }
 
+  // Distinguishes a broken variant from an unreachable preview tree; the
+  // recovery differs (fix the component vs fix the root/dev-server pair).
+  async function describeMountFailure(manifest, err) {
+    try {
+      const probe = await probePreviewTree(manifest);
+      if (probe.ok === false) {
+        return 'The preview tree is not reachable from the dev server (probe failed on '
+          + (probe.tried || []).join(', ')
+          + '). The resolved app root and the dev server root likely disagree; restart live from the app the dev server serves.';
+      }
+    } catch { /* probe is best-effort */ }
+    return 'The compiled component could not be imported or mounted. ' + (err?.message || 'Unknown error');
+  }
+
   function teardownSvelteComponentSession(restoreOriginal) {
     if (!svelteComponentSession) return;
     const { wrapperEl, detachedOriginal, runtime, mountedInstance } = svelteComponentSession;
@@ -5336,48 +5739,78 @@
   }
 
   async function injectSvelteComponentsFromManifest(manifestPath, sessionId) {
+    // Every (re)injection is a fresh attempt: reset the failure dedupe so a
+    // republish that is STILL broken at the same URL reports again instead of
+    // being swallowed while the agent believes the repair landed.
+    lastReportedMountFailure = null;
     const url = 'http://localhost:' + PORT + '/source?token=' + TOKEN + '&path=' + encodeURIComponent(manifestPath);
     try {
       const res = await fetch(url);
       if (!res.ok) throw new Error(String(res.status));
       const manifest = JSON.parse(await res.text());
-      if (manifest.id !== sessionId) return;
+      if (manifest.id !== sessionId) {
+        // A manifest at the expected path belonging to a different session is
+        // an agent-side publish error. Left as a bare return it stranded the
+        // bar in GENERATING with no explanation and no event.
+        const mismatch = 'Manifest at ' + manifestPath + ' belongs to session ' + (manifest.id || 'unknown') + ', not ' + sessionId + '.';
+        reportVariantMountFailed(sessionId, visibleVariant || 1, manifestPath, mismatch);
+        showMountErrorCard(sessionId, {
+          variant: visibleVariant || 0,
+          url: manifestPath,
+          message: 'The variant manifest is for a different session. Ask the agent to republish.',
+          previewFile: manifestPath,
+        });
+        return;
+      }
 
       const paramsByVariant = await loadSvelteComponentParams(manifest);
+      const availableVariants = Number(manifest.arrivedVariants) || Number(manifest.count) || 1;
+      const componentPreviewMode = isFrameworkComponentPreviewMode(manifest.previewMode)
+        ? manifest.previewMode
+        : 'svelte-component';
       currentSessionId = sessionId;
       expectedVariants = Number(manifest.count) || expectedVariants || 1;
       rememberSessionFileMeta({
         sourceFile: manifest.sourceFile,
         previewFile: manifestPath,
-        previewMode: 'svelte-component',
+        previewMode: componentPreviewMode,
       });
       if (state !== 'CYCLING') setLiveState('GENERATING');
 
       const existingWrapper = document.querySelector('[data-impeccable-variants="' + sessionId + '"]');
       if (existingWrapper && svelteComponentSession?.sessionId === sessionId) {
         recoveryWaitingForAnchor = false;
+        svelteComponentSession.manifest = manifest;
         svelteComponentSession.paramsByVariant = paramsByVariant;
-        arrivedVariants = Number(manifest.count) || expectedVariants || 1;
-        expectedVariants = arrivedVariants;
+        arrivedVariants = availableVariants;
+        expectedVariants = Number(manifest.count) || expectedVariants || arrivedVariants;
         visibleVariant = visibleVariant > 0 && visibleVariant <= arrivedVariants ? visibleVariant : 1;
-        await mountSvelteComponentVariant(visibleVariant || 1);
+        const remounted = await mountSvelteComponentVariant(visibleVariant || 1);
+        if (!remounted) {
+          // The mount already reported the failure and raised the card.
+          // Advancing to CYCLING here would show a bar claiming variants are
+          // ready over a page where nothing rendered.
+          saveSession();
+          return;
+        }
         setLiveState('CYCLING');
         showOrUpdateCyclingBar();
         saveSession();
+        if (parameterGenerationState === 'loading') completeParameterPublication();
         return;
       }
 
       const liveEl = findLiveElementForSvelteManifest(manifest);
       if (!liveEl?.parentElement) {
         console.warn('[impeccable] Could not find original element in live DOM.');
-        arrivedVariants = Number(manifest.count) || expectedVariants || 1;
-        expectedVariants = arrivedVariants;
+        arrivedVariants = availableVariants;
+        expectedVariants = Number(manifest.count) || expectedVariants || arrivedVariants;
         const saved = loadSession();
         const savedVisibleVariant = saved && saved.id === sessionId ? saved.visible : 0;
         visibleVariant = visibleVariant > 0 && visibleVariant <= arrivedVariants
           ? visibleVariant
           : (savedVisibleVariant > 0 && savedVisibleVariant <= arrivedVariants ? savedVisibleVariant : 1);
-        enterRecoveryWaitingForAnchor({ checkpointReason: 'svelte_component_anchor_missing', trackScroll: true });
+        enterRecoveryWaitingForAnchor({ checkpointReason: 'component_preview_anchor_missing', trackScroll: true });
         waitForSvelteComponentTargetAndRetry({ manifestPath, sessionId, manifest });
         return;
       }
@@ -5385,7 +5818,7 @@
       const wrapper = document.createElement('div');
       wrapper.dataset.impeccableVariants = sessionId;
       wrapper.dataset.impeccableVariantCount = String(manifest.count || expectedVariants || 1);
-      wrapper.dataset.impeccablePreview = 'svelte-component';
+      wrapper.dataset.impeccablePreview = componentPreviewMode;
       wrapper.style.display = 'contents';
 
       const mountTarget = document.createElement('div');
@@ -5423,8 +5856,8 @@
       recoveryWaitingForAnchor = false;
 
       const previousVisibleVariant = currentSessionId === sessionId ? visibleVariant : 0;
-      arrivedVariants = Number(manifest.count) || expectedVariants || 1;
-      expectedVariants = arrivedVariants;
+      arrivedVariants = availableVariants;
+      expectedVariants = Number(manifest.count) || expectedVariants || arrivedVariants;
       const saved = loadSession();
       const savedVisibleVariant = saved && saved.id === sessionId ? saved.visible : 0;
       visibleVariant = previousVisibleVariant > 0 && previousVisibleVariant <= arrivedVariants
@@ -5434,9 +5867,11 @@
       const mounted = await mountSvelteComponentVariant(visibleVariant);
       if (!mounted) {
         // The compiled component threw (e.g. a Svelte compile error in the
-        // variant file). Don't strand the bar in an empty CYCLING state; restore
-        // the original element and reset to PICKING so the user can retry.
-        abortSvelteComponentInjection(sessionId, 'A variant failed to compile. Fix the component and re-run.');
+        // variant file). mountSvelteComponentVariant already reported the
+        // failure and raised the card; tear the half-built preview down but
+        // keep the session so Retry and a republish still have something to
+        // act on.
+        abortSvelteComponentInjection(sessionId);
         return;
       }
 
@@ -5449,10 +5884,19 @@
       refreshParamsPanel();
       positionBar();
       saveSession();
-      console.log('[impeccable] Mounted ' + arrivedVariants + ' Svelte component variants.');
+      if (parameterGenerationState === 'loading') completeParameterPublication();
+      console.log('[impeccable] Mounted ' + arrivedVariants + ' ' + manifest.framework + ' component variants.');
     } catch (err) {
-      console.error('[impeccable] Failed to mount Svelte component variants:', err);
-      abortSvelteComponentInjection(sessionId, 'Could not load variants. Fix the error and re-run.');
+      console.error('[impeccable] Failed to mount component-preview variants:', err);
+      // Report the manifest PATH, never the fetch URL: that URL carries the
+      // live helper token and this string is journaled.
+      reportVariantMountFailed(sessionId, visibleVariant || 1, manifestPath, err);
+      abortSvelteComponentInjection(sessionId, {
+        variant: visibleVariant || 0,
+        url: manifestPath,
+        message: 'Could not read the variant manifest. ' + (err?.message || 'Unknown error'),
+        previewFile: manifestPath,
+      });
     }
   }
 
@@ -5473,10 +5917,187 @@
     pendingSvelteComponentRetryObserver.observe(document.body, { childList: true, subtree: true });
   }
 
-  // Reset cleanly when a Svelte component session can't mount: tear the wrapper
-  // down (restoring the original element), clear persisted session state, and
-  // return the bar to PICKING. Avoids the stuck 0/0 CYCLING bar.
-  function abortSvelteComponentInjection(sessionId, message) {
+  //
+  // Mount acknowledgements
+  //
+  // The agent's `done` says it published files. Only the browser knows whether
+  // the import resolved and the component reached the DOM. These two events
+  // carry that answer back, so the journal, `live-status`, and `live-resume`
+  // can tell "the user is comparing variants" from "nothing ever rendered".
+
+  // Mirror of the caps in live/event-validation.mjs. Trimming here keeps a
+  // stack-trace-sized error from being rejected outright and lost.
+  const MOUNT_URL_MAX = 2000;
+  const MOUNT_ERROR_MAX = 1000;
+
+  function reportVariantMounted(sessionId, variantNum, moduleUrl) {
+    const variant = Math.floor(Number(variantNum) || 0);
+    if (!sessionId || variant < 1) return;
+    sendEvent({
+      type: 'variant_mounted',
+      id: sessionId,
+      variant,
+      url: moduleUrl ? String(moduleUrl).slice(0, MOUNT_URL_MAX) : undefined,
+    });
+  }
+
+  function reportVariantMountFailed(sessionId, variantNum, moduleUrl, error) {
+    if (!sessionId) return;
+    const parsed = Math.floor(Number(variantNum) || 0);
+    const variant = parsed >= 1 ? parsed : 1;
+    const url = String(moduleUrl || 'unknown').slice(0, MOUNT_URL_MAX);
+    const message = String(error?.message || error || 'Unknown mount error').slice(0, MOUNT_ERROR_MAX);
+    // Progressive delivery and the Retry button both re-enter the same failure.
+    // Report each distinct one once so the agent's poll queue and the journal
+    // stay readable; a genuinely new failure (different variant, URL, or
+    // message) still gets through.
+    const key = sessionId + '|' + variant + '|' + url + '|' + message;
+    if (lastReportedMountFailure === key) return;
+    lastReportedMountFailure = key;
+    sendEvent({ type: 'variant_mount_failed', id: sessionId, variant, url, error: message });
+  }
+
+  function truncateMiddle(value, max) {
+    const text = String(value || '');
+    if (text.length <= max) return text;
+    const head = Math.ceil((max - 1) / 2);
+    const tail = max - 1 - head;
+    return text.slice(0, head) + '…' + text.slice(text.length - tail);
+  }
+
+  /**
+   * Persistent failure surface. Replaces the old 5s toast: a toast that
+   * disappears while the session is unusable is indistinguishable from no
+   * feedback at all, and the wipe that came with it deleted the only handle on
+   * a session the server still considered live.
+   */
+  function showMountErrorCard(sessionId, details) {
+    mountErrorState = {
+      sessionId: sessionId || currentSessionId || null,
+      variant: Math.floor(Number(details?.variant) || 0),
+      url: details?.url ? String(details.url) : '',
+      message: details?.message || 'A variant failed to load.',
+      previewFile: details?.previewFile || currentPreviewFile || null,
+    };
+    renderMountErrorCard();
+  }
+
+  function clearMountErrorCard() {
+    mountErrorState = null;
+    if (mountErrorEl) {
+      mountErrorEl.remove();
+      mountErrorEl = null;
+    }
+  }
+
+  function mountErrorCardBottomOffset() {
+    const barRect = globalBarEl?.getBoundingClientRect();
+    return barRect && barRect.height > 0
+      ? Math.max(16, window.innerHeight - barRect.top + 12)
+      : 16;
+  }
+
+  function renderMountErrorCard() {
+    if (!mountErrorState) return;
+    if (mountErrorEl) mountErrorEl.remove();
+    const P = BP || barPaletteForTheme(detectPageTheme());
+    const card = el('div', {
+      position: 'fixed', bottom: mountErrorCardBottomOffset() + 'px', left: '50%',
+      transform: 'translateX(-50%)',
+      display: 'flex', flexDirection: 'column', gap: '6px',
+      background: P.surface, color: P.text,
+      border: '1px solid oklch(65% 0.18 30 / 0.55)',
+      borderRadius: '8px', padding: '10px 12px',
+      fontFamily: FONT, fontSize: '12px',
+      boxShadow: P.shadow, zIndex: Z.toast,
+      maxWidth: 'min(520px, calc(100vw - 32px))',
+      pointerEvents: 'auto', textAlign: 'left',
+    });
+    card.id = PREFIX + '-mount-error';
+
+    const head = el('div', { display: 'flex', alignItems: 'center', gap: '8px' });
+    const glyph = el('span', { fontSize: '13px', lineHeight: '1', color: 'oklch(62% 0.19 30)', flexShrink: '0' });
+    glyph.textContent = '⚠';
+    head.appendChild(glyph);
+    const title = el('span', { fontWeight: '600', flex: '1' });
+    title.textContent = mountErrorState.variant > 0
+      ? 'Variant ' + mountErrorState.variant + ' failed to load'
+      : 'Variants failed to load';
+    head.appendChild(title);
+    const dismiss = el('button', {
+      border: 'none', background: 'transparent', color: P.textDim,
+      cursor: 'pointer', fontFamily: FONT, fontSize: '14px', lineHeight: '1',
+      padding: '0 2px', flexShrink: '0',
+    });
+    dismiss.textContent = '×';
+    dismiss.setAttribute('aria-label', 'Dismiss');
+    dismiss.addEventListener('click', (e) => {
+      e.stopPropagation();
+      clearMountErrorCard();
+      // The card was the only recovery affordance while the bar is hidden;
+      // dismissing it must hand the user back a usable surface. PICKING
+      // reactivates the global mark and the picker. The saved session and
+      // server truth survive, so a later republish (SSE `done`) still
+      // resurrects the comparison through the normal handlers.
+      if (state === 'GENERATING') setLiveState('PICKING');
+    });
+    head.appendChild(dismiss);
+    card.appendChild(head);
+
+    const body = el('div', { color: P.textDim, lineHeight: '1.4' });
+    body.textContent = mountErrorState.message;
+    card.appendChild(body);
+
+    if (mountErrorState.url) {
+      const urlLine = el('div', {
+        fontFamily: MONO, fontSize: '11px', color: P.textDim,
+        wordBreak: 'break-all', opacity: '0.85',
+      });
+      urlLine.textContent = truncateMiddle(mountErrorState.url, 72);
+      urlLine.title = mountErrorState.url;
+      card.appendChild(urlLine);
+    }
+
+    const actions = el('div', { display: 'flex', gap: '8px', marginTop: '2px' });
+    const retry = el('button', {
+      border: '1px solid ' + P.hairline, background: 'transparent',
+      color: P.text, fontFamily: FONT, fontSize: '12px', fontWeight: '500',
+      borderRadius: '5px', padding: '4px 10px', cursor: 'pointer',
+    });
+    retry.textContent = 'Retry';
+    retry.dataset.impeccableMountRetry = 'true';
+    retry.addEventListener('click', (e) => { e.stopPropagation(); retryMountErrorCard(); });
+    actions.appendChild(retry);
+    card.appendChild(actions);
+
+    mountErrorEl = card;
+    uiAppend(card);
+    defangOutsideHandlers(card);
+  }
+
+  function retryMountErrorCard() {
+    const info = mountErrorState;
+    if (!info) return;
+    const sessionId = info.sessionId || currentSessionId;
+    const manifestPath = info.previewFile || currentPreviewFile;
+    clearMountErrorCard();
+    if (!sessionId || !manifestPath) {
+      showToast('No variant manifest to retry. Ask the agent to republish.', 5000);
+      return;
+    }
+    // A retry must be able to report the same failure again, otherwise a second
+    // attempt against an unchanged broken module would look silent.
+    lastReportedMountFailure = null;
+    if (state !== 'CYCLING') setLiveState('GENERATING');
+    injectSvelteComponentsFromManifest(manifestPath, sessionId);
+  }
+
+  // Tear down a component preview that could not mount, WITHOUT touching
+  // session identity. The old version cleared localStorage, nulled
+  // currentSessionId, and reset to PICKING, which orphaned a session the server
+  // still had in its journal and made every recovery path unreachable. The DOM
+  // teardown and observer cleanup are still right; the state wipe never was.
+  function abortSvelteComponentInjection(sessionId, details) {
     try {
       if (svelteComponentSession?.sessionId === sessionId) {
         teardownSvelteComponentSession(true);
@@ -5488,14 +6109,52 @@
       console.warn('[impeccable] Svelte component abort cleanup failed:', err);
     }
     hideShaderOverlay();
+    if (pendingSvelteComponentRetryObserver) { pendingSvelteComponentRetryObserver.disconnect(); pendingSvelteComponentRetryObserver = null; }
+    if (pendingVariantAnchorRetryObserver) { pendingVariantAnchorRetryObserver.disconnect(); pendingVariantAnchorRetryObserver = null; }
+    // The generate submit armed a scroll lock and a variant observer; a page
+    // the user cannot scroll, watched by a stale observer, is exactly the
+    // wrong place to show a card asking them to act.
+    stopScrollLock();
+    if (variantObserver) { variantObserver.disconnect(); variantObserver = null; }
+    removeVariantStateStylesheet();
+    hideBar(true);
+    // currentSessionId, the saved session, and the file metadata all survive on
+    // purpose: Retry, a republish from the agent, and a page reload all need
+    // them. saveSession keeps the localStorage cache in step with the server.
+    saveSession();
+    if (details) showMountErrorCard(sessionId, details);
+    else if (!mountErrorState) {
+      showMountErrorCard(sessionId, { message: 'Variants could not be mounted. Retry, or ask the agent to republish.' });
+    }
+  }
+
+  // Hard reset for the one case that is not a mount failure: a cycling state
+  // with nothing to cycle. There is no variant to retry and no URL to report,
+  // so the session really is over.
+  function resetSvelteComponentSession(sessionId, message) {
+    try {
+      if (svelteComponentSession?.sessionId === sessionId) {
+        teardownSvelteComponentSession(true);
+      } else {
+        const orphan = document.querySelector('[data-impeccable-variants="' + sessionId + '"]');
+        if (orphan) orphan.remove();
+      }
+    } catch (err) {
+      console.warn('[impeccable] Svelte component reset cleanup failed:', err);
+    }
+    hideShaderOverlay();
     if (variantObserver) { variantObserver.disconnect(); variantObserver = null; }
     if (pendingSvelteComponentRetryObserver) { pendingSvelteComponentRetryObserver.disconnect(); pendingSvelteComponentRetryObserver = null; }
     if (pendingVariantAnchorRetryObserver) { pendingVariantAnchorRetryObserver.disconnect(); pendingVariantAnchorRetryObserver = null; }
     stopScrollLock();
+    removeVariantStateStylesheet();
+    clearMountErrorCard();
     clearSession();
     clearHandled();
     resetSessionFileMeta();
     currentSessionId = null;
+    parameterGenerationState = 'idle';
+    parameterReadyAnnouncedSession = null;
     expectedVariants = 0;
     arrivedVariants = 0;
     visibleVariant = 0;
@@ -5505,12 +6164,40 @@
     if (message) showToast(message, 5000);
   }
 
+  // How many delayed re-reads a completion-driven source fallback gets when
+  // the fetched source still shows only the preflight scaffold, before the
+  // failure is surfaced via recoverEmptyCycling.
+  const COMPLETED_SOURCE_FALLBACK_RETRIES = 3;
+  const COMPLETED_SOURCE_FALLBACK_RETRY_MS = 1200;
+
+  /**
+   * Terminal recovery for a session whose source-side scaffolding no longer
+   * exists. The discard event is best-effort: with no agent polling it parks
+   * the durable session in discard_requested, which no resume path adopts;
+   * with an agent attached it triggers the normal discard finalization.
+   */
+  function discardOrphanedSession(reason) {
+    const sessionId = currentSessionId;
+    if (!sessionId) return;
+    console.warn('[impeccable] Discarding orphaned session ' + sessionId + ': ' + reason);
+    sendEvent({ type: 'discard', id: sessionId, orphaned: true }).catch(() => {});
+    markSessionHandled();
+    cleanup({ instantChrome: true });
+    showToast('The previous live session no longer matches the source file, so it was discarded. Pick an element to start fresh.', 6000);
+  }
+
   /**
    * No-HMR fallback: fetch the raw source file from the live server,
    * parse it, extract the variant wrapper, and inject it into the live DOM.
    * This works even when the dev server caches HTML (Bun, static servers).
+   *
+   * opts.generationCompleted marks callers that KNOW the agent finished (a
+   * `done` arrived or the server reported a completed generation). For them an
+   * empty read is a stale source view and no further event is coming, so the
+   * read retries a few times and then surfaces recovery. Callers without the
+   * flag may be mid-generation and wait indefinitely for the real completion.
    */
-  function injectVariantsFromSource(filePath, sessionId) {
+  function injectVariantsFromSource(filePath, sessionId, opts = {}) {
     if (isSvelteComponentManifestPath(filePath)) {
       injectSvelteComponentsFromManifest(filePath, sessionId);
       return;
@@ -5535,6 +6222,25 @@
         srcWrapper = doc.querySelector('[data-impeccable-variants="' + sessionId + '"]');
         if (!srcWrapper) {
           console.warn('[impeccable] Variant wrapper not found in source file.');
+          // A resumed cycling session whose wrapper is gone from source is an
+          // ORPHAN: the file was edited or regenerated out from under it, so
+          // no reload, HMR push, or server restart can ever complete it, and
+          // the frozen picker it leaves behind used to need a manual
+          // live-complete --discarded. Retry a few reads first (an agent
+          // rewrite or HMR patch may be mid-flight), then self-discard and
+          // hand the surface back to the picker.
+          if (opts.orphanDiscard && sessionId === currentSessionId) {
+            const attempt = opts._orphanAttempt || 0;
+            if (attempt < COMPLETED_SOURCE_FALLBACK_RETRIES) {
+              setTimeout(() => {
+                if (sessionId !== currentSessionId) return;
+                if (state !== 'GENERATING' && state !== 'CYCLING') return;
+                injectVariantsFromSource(filePath, sessionId, { ...opts, _orphanAttempt: attempt + 1 });
+              }, COMPLETED_SOURCE_FALLBACK_RETRY_MS);
+            } else {
+              discardOrphanedSession('variant wrapper missing from source');
+            }
+          }
           return;
         }
 
@@ -5576,6 +6282,32 @@
         arrivedVariants = variants.length;
         expectedVariants = parseInt(wrapper.dataset.impeccableVariantCount || arrivedVariants);
         if (arrivedVariants <= 0) {
+          if (state === 'GENERATING') {
+            // Mid-generation the source legitimately holds a scaffold wrapper
+            // with no variants yet (the server-side preflight wraps before the
+            // agent writes). Tearing the session down here would destroy an
+            // in-flight generation; stay in GENERATING — the variant observer
+            // is armed and the server re-delivers a missed `done`.
+            if (!opts.generationCompleted) {
+              console.log('[impeccable] Source has scaffold but no variants yet; still generating.');
+              return;
+            }
+            // Generation finished, yet the read shows only the scaffold: the
+            // source view is stale and no further event will fire. Re-read a
+            // few times before surfacing recovery — a single silent return
+            // here would strand the tab in GENERATING forever.
+            const attempt = opts.attempt || 0;
+            if (attempt < COMPLETED_SOURCE_FALLBACK_RETRIES) {
+              console.log('[impeccable] Generation is done but source shows no variants yet; retrying read ('
+                + (attempt + 1) + '/' + COMPLETED_SOURCE_FALLBACK_RETRIES + ').');
+              setTimeout(() => {
+                if (state !== 'GENERATING' || currentSessionId !== sessionId) return;
+                if (arrivedVariants > 0) return;
+                injectVariantsFromSource(filePath, sessionId, { ...opts, attempt: attempt + 1 });
+              }, COMPLETED_SOURCE_FALLBACK_RETRY_MS);
+              return;
+            }
+          }
           recoverEmptyCycling('source-fallback-empty');
           return;
         }
@@ -5597,6 +6329,7 @@
         refreshParamsPanel();
         positionBar();
         saveSession();
+        if (parameterGenerationState === 'loading') completeParameterPublication();
         console.log('[impeccable] Injected ' + arrivedVariants + ' variants from source file.');
       })
       .catch(err => {
@@ -5806,13 +6539,98 @@
     return variantDiv;
   }
 
+  // Variant visibility and range/toggle params are expressed through ONE
+  // injected stylesheet, never inline attributes on the variant divs. Those
+  // divs are scaffolded into page source, so SSR frameworks (Next.js App
+  // Router) server-render them; toggling their `hidden` / inline `style` /
+  // `--p-*` client-side trips a React 19 hydration mismatch on the next
+  // Fast-Refresh re-render — the same failure mode the scroll-anchor (#276)
+  // and pick-cursor (#286) fixes address. A stylesheet rule has the same
+  // computed effect without mutating any hydrated element's attributes.
+  // (steps params keep driving `data-p-*` attributes, matching scoped CSS.)
+  const VARIANT_HIDE_DECL = 'display: none !important;';
+  const VARIANT_SHOW_DECL = 'display: block !important;';
+
+  // Build a direct-child variant selector for a session. With `num`, targets a
+  // single variant (`… > [data-impeccable-variant="N"]`); without it, targets
+  // every variant via the bare `[data-impeccable-variant]` attribute.
+  function variantStateSelector(sessionId, num) {
+    const wrapper = '[data-impeccable-variants="' + sessionId + '"]';
+    const variant = num == null
+      ? '[data-impeccable-variant]'
+      : '[data-impeccable-variant="' + num + '"]';
+    return wrapper + ' > ' + variant;
+  }
+
+  // Serialize the visible variant's knob values into `--p-<id>` custom-property
+  // declarations. Only range (number) and toggle (boolean) values become a
+  // custom property; steps params drive `data-p-*` attributes instead.
+  function variantParamDecls(values) {
+    return Object.entries(values || {})
+      .map(([id, val]) => {
+        if (typeof val === 'number') return ' --p-' + id + ': ' + val + ';';
+        if (typeof val === 'boolean') return ' --p-' + id + ': ' + (val ? '1' : '0') + ';';
+        return '';
+      })
+      .join('');
+  }
+
+  function updateVariantStateStylesheet(sessionId, num) {
+    if (!sessionId || num == null || num < 1) return;
+
+    let styleEl = document.getElementById(VARIANT_STATE_STYLE_ID);
+    if (!styleEl) {
+      styleEl = document.createElement('style');
+      styleEl.id = VARIANT_STATE_STYLE_ID;
+      (document.head || document.documentElement).appendChild(styleEl);
+    }
+
+    // Hide every variant except the visible one (incl. the SSR'd "original").
+    const hideOthers = variantStateSelector(sessionId)
+      + ':not([data-impeccable-variant="' + num + '"]) { ' + VARIANT_HIDE_DECL + ' }';
+
+    // Force-show the visible variant (beats the source inline display:none on
+    // v2/v3) and apply its knob values as custom properties.
+    const showVisible = variantStateSelector(sessionId, num)
+      + ' { ' + VARIANT_SHOW_DECL + variantParamDecls(paramsCurrentValues) + ' }';
+
+    styleEl.textContent = hideOthers + '\n' + showVisible + '\n';
+  }
+
+  function removeVariantStateStylesheet() {
+    document.getElementById(VARIANT_STATE_STYLE_ID)?.remove();
+  }
+
+  function showOriginalDuringDiscard(sessionId) {
+    if (!sessionId) return;
+    let styleEl = document.getElementById(DISCARD_STATE_STYLE_ID);
+    if (!styleEl) {
+      styleEl = document.createElement('style');
+      styleEl.id = DISCARD_STATE_STYLE_ID;
+      (document.head || document.documentElement).appendChild(styleEl);
+    }
+    const wrapper = '[data-impeccable-variants="' + sessionId + '"]';
+    styleEl.textContent = wrapper + ' > [data-impeccable-variant]:not([data-impeccable-variant="original"]) { display:none !important; }\n'
+      + wrapper + ' > [data-impeccable-variant="original"] { display:block !important; }';
+  }
+
+  function resolveScrollLockAnchorTop() {
+    const anchor = resolveBarAnchor();
+    if (!anchor?.isConnected) return null;
+    const top = anchor.getBoundingClientRect().top;
+    return Number.isFinite(top) ? top : null;
+  }
+
   // Hold window.scrollY at a fixed value across DOM mutations inside the
   // session's wrapper (HMR patches, variant inserts, cycle swaps).
-  function startScrollLock(sessionId, initialTargetY) {
+  function startScrollLock(sessionId, initialTargetY, initialAnchorTop) {
     stopScrollLock();
     scrollLockTargetY = typeof initialTargetY === 'number' && isFinite(initialTargetY)
       ? initialTargetY
       : window.scrollY;
+    scrollLockAnchorTop = typeof initialAnchorTop === 'number' && isFinite(initialAnchorTop)
+      ? initialAnchorTop
+      : resolveScrollLockAnchorTop();
 
     try { history.scrollRestoration = 'manual'; } catch {}
 
@@ -5836,6 +6654,17 @@
     const correct = (why) => {
       scrollLockRaf = null;
       if (scrollLockTargetY == null) return;
+      const anchor = resolveBarAnchor();
+      if (anchor?.isConnected && typeof scrollLockAnchorTop === 'number' && isFinite(scrollLockAnchorTop)) {
+        const anchorTop = anchor.getBoundingClientRect().top;
+        const anchorDelta = anchorTop - scrollLockAnchorTop;
+        if (Math.abs(anchorDelta) >= 0.5) {
+          window.scrollTo({ top: window.scrollY + anchorDelta, left: window.scrollX, behavior: 'instant' });
+          scrollLockTargetY = window.scrollY;
+          writeScrollY(scrollLockTargetY);
+          return;
+        }
+      }
       const before = window.scrollY;
       const delta = before - scrollLockTargetY;
       if (Math.abs(delta) < 0.5) {
@@ -5880,6 +6709,7 @@
       if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; }
       const prevTarget = scrollLockTargetY;
       scrollLockTargetY = window.scrollY;
+      scrollLockAnchorTop = resolveScrollLockAnchorTop();
       writeScrollY(scrollLockTargetY);
     };
     const markGesture = (why) => {
@@ -5917,6 +6747,7 @@
     if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; }
     if (scrollLockAbort) { scrollLockAbort.abort(); scrollLockAbort = null; }
     scrollLockTargetY = null;
+    scrollLockAnchorTop = null;
     // NOTE: do NOT clear the persistent scroll key here. startScrollLock
     // calls us as a reset, and clearing the key would nuke the Go-time
     // scrollY that the next resume needs to read.
@@ -5990,6 +6821,7 @@
 
       updating = true;
       arrivedVariants = count;
+      generationPhase = arrivedVariants >= expectedVariants ? 'variants_ready' : 'variants_progress';
       if (visibleVariant === 0 && arrivedVariants > 0) {
         const saved = loadSession();
         const savedVisibleVariant = saved && saved.id === sessionId ? saved.visible : 0;
@@ -6005,7 +6837,7 @@
       const expected = parseInt(wrapper.dataset.impeccableVariantCount || '0');
       if (expected > 0) expectedVariants = expected;
 
-      if (arrivedVariants >= expectedVariants && expectedVariants > 0) {
+      if (arrivedVariants > 0) {
         setLiveState('CYCLING');
         recoveryWaitingForAnchor = false;
         hideShaderOverlay();
@@ -6013,13 +6845,18 @@
         updateSelectedElement();
         showOrUpdateCyclingBar();
         disableInlineEdit();
-        refreshParamsPanel();
+        if (arrivedVariants >= expectedVariants && expectedVariants > 0) refreshParamsPanel();
+        else hideParamsPanel();
         positionBar();
       } else if (state === 'GENERATING') {
         updateBarContent('generating');
       }
       saveSession();
-      queueCheckpoint(state === 'CYCLING' ? 'variants_ready' : 'variants_progress');
+      sendCheckpoint(
+        arrivedVariants >= expectedVariants && expectedVariants > 0
+          ? 'variants_ready'
+          : 'variants_progress',
+      );
       updating = false;
     });
 
@@ -6087,11 +6924,12 @@
       switch (msg.type) {
         case 'connected':
           hasProjectContext = !!msg.hasProjectContext;
-          if (!hasProjectContext) showToast('No PRODUCT.md found. Variants will be brand-agnostic. Run /impeccable init to generate one.', 7000);
+          if (!hasProjectContext) showToast(`No PRODUCT.md found. Variants will be brand-agnostic. Run ${IMPECCABLE_COMMAND} init to generate one.`, 7000);
           console.log('[impeccable] Live mode connected.');
           syncAgentPollingUi(!!msg.agentPolling);
           startAgentStatusPoll();
           restoreFromActiveSessions(msg.activeSessions, 'sse_connected');
+          recoverMissedGenerationCompletion(msg.activeSessions);
           if (state === 'IDLE' && (pickActive || insertActive)) setLiveState('PICKING');
           syncPageInteractionCursor();
           syncPageChatFocus('sse-connected');
@@ -6099,6 +6937,38 @@
         case 'agent_polling':
           syncAgentPollingUi(!!msg.connected);
           break;
+        case 'agent_phase':
+          if (msg.id === currentSessionId && (state === 'GENERATING' || state === 'CYCLING')) {
+            // Advance the visible phase monotonically. A behind/resumed
+            // checkpoint may carry an earlier phase for internal bookkeeping,
+            // but the bar must not move backward.
+            if (shouldAdvancePhase(generationPhase, msg.phase)) generationPhase = msg.phase;
+            // The deferred parameter pass reports through `variant_progress`
+            // with publicationKind 'params', not through agent_phase.
+            updateBarContent(state === 'CYCLING' ? 'cycling' : 'generating');
+            saveSession();
+          }
+          break;
+        case 'variant_progress':
+          if (msg.id === currentSessionId) {
+            if (msg.publicationKind === 'params') parameterGenerationState = 'loading';
+            rememberSessionFileMeta(msg);
+            if (isFrameworkComponentPreviewMode(msg.previewMode) && msg.previewFile) {
+              // Component-preview (Svelte/Vue) progressive delivery: the browser
+              // mounts compiled components, so there is no framework-owned DOM
+              // to race. Keep streaming each checkpoint into the preview.
+              injectSvelteComponentsFromManifest(msg.previewFile, msg.id);
+            }
+            // Source-preview targets: do NOT source-inject per checkpoint.
+            // Immediate injection races framework (React/Vue) ownership mid-
+            // generation and triggers removeChild errors on the next HMR
+            // commit. Let HMR own reconciliation while variants stream in;
+            // source injection runs only on the final `done` (which keeps its
+            // 750ms settle + retry ladder for non-HMR harnesses like Cursor).
+            // The visible progress count still advances from the variant
+            // MutationObserver as HMR lands each variant.
+          }
+          break;
         case 'steer_done':
           maybeCompleteSteer(msg);
           break;
@@ -6116,6 +6986,10 @@
         case 'done':
           if (maybeCompleteSteer(msg)) break;
           rememberSessionFileMeta(msg);
+          if (msg.id === currentSessionId && isFrameworkComponentPreviewMode(currentPreviewMode) && currentPreviewFile) {
+            injectSvelteComponentsFromManifest(currentPreviewFile, msg.id);
+            break;
+          }
           // Variants already arrived via HMR → normal transition.
           if (arrivedVariants >= expectedVariants && expectedVariants > 0) {
             if (state === 'GENERATING') {
@@ -6131,7 +7005,7 @@
             setTimeout(() => {
               if (arrivedVariants >= expectedVariants && expectedVariants > 0) return;
               if (state !== 'GENERATING' || msg.id !== currentSessionId) return;
-              injectVariantsFromSource(msg.file, msg.id);
+              injectVariantsFromSource(msg.file, msg.id, { generationCompleted: true });
             }, 750);
             break;
           }
@@ -6153,12 +7027,21 @@
           break;
         case 'complete':
         case 'accept':
+          // The real accept result arrived: the awaited failure window closed.
+          if (awaitingAcceptResult?.id && msg.id === awaitingAcceptResult.id) awaitingAcceptResult = null;
           if (maybeCompleteAcceptedSession(msg)) break;
           break;
         case 'agent_done':
-          // Carbonize accepts are not terminal until live-complete.mjs sends
-          // the final complete event. Keep the browser in its recoverable
-          // saving state while the source cleanup is still in flight.
+          // The deterministic accept has already committed the reviewed DOM
+          // and fenced generation. Carbonize may continue in the background;
+          // it must not hold the foreground picker hostage.
+          // Only a carbonize agent_done is provably accept-side: accept
+          // unlocks at the first variant, so a late generation agent_done
+          // for the same session id can still arrive after Accept and must
+          // not close the awaited failure window early (the SSE broadcast
+          // carries no sourceEventType to tell the two apart).
+          if (msg.data?.carbonize === true && awaitingAcceptResult?.id && msg.id === awaitingAcceptResult.id) awaitingAcceptResult = null;
+          if (msg.data?.carbonize === true && maybeCompleteAcceptedSession(msg)) break;
           break;
         case 'discarded':
           if (msg.id && msg.id === currentSessionId) {
@@ -6169,14 +7052,43 @@
         case 'error':
           if (pendingAcceptedSession?.id && msg.id === pendingAcceptedSession.id) {
             pendingAcceptedSession = null;
+            awaitingAcceptResult = null;
             setLiveState('CYCLING');
             updateBarContent('cycling');
             showToast('Could not complete accept cleanup. Try Accept again.', 5000);
             break;
           }
+          // The optimistic teardown already released the session, so the
+          // CYCLING recovery above can no longer match; without this branch
+          // the failure fell through to the generic toast and the user had
+          // no hint their variant was never written (issue #384).
+          if (awaitingAcceptResult?.id && msg.id === awaitingAcceptResult.id) {
+            awaitingAcceptResult = null;
+            console.error('[impeccable] Accept failed after teardown:', msg.message);
+            // Hedged on purpose: a carbonize-phase failure raises this same
+            // error after the source WAS promoted, so "was not saved" would
+            // overclaim. Normalize the server message's terminal punctuation
+            // so the two sentences don't run together.
+            const acceptFailDetail = String(msg.message || 'unknown error').trim().replace(/[.!?]?$/, '.');
+            showToast('Accept failed: ' + acceptFailDetail + ' The variant may not have been saved. If the change is missing, pick the element and generate again.', 8000);
+            break;
+          }
           if (maybeCompleteSteer(msg)) break;
           console.error('[impeccable] Error:', msg.message);
           showToast('Error: ' + msg.message, 5000);
+          // An agent error reply is terminal for the session it names: tear
+          // it down exactly like 'discarded' (cleanup includes clearSession),
+          // or the durable localStorage checkpoint survives and every reload
+          // resurrects a GENERATING bar for a session the server no longer
+          // knows about (issue #362).
+          if (msg.id && msg.id === currentSessionId) {
+            markSessionHandled();
+            cleanup();
+            break;
+          }
+          // A stored-but-not-current checkpoint naming the errored session
+          // (the error raced a reload) must not resurrect either.
+          if (msg.id && loadSession()?.id === msg.id) clearSession();
           hideBar();
           renderEditBadge('hidden');
           setLiveState('PICKING');
@@ -6202,7 +7114,7 @@
   function handleServerLost() {
     const recoveryState = currentSessionId ? state : 'IDLE';
     if (state === 'GENERATING' || state === 'CYCLING' || state === 'SAVING') {
-      showToast('Live server disconnected. Session ended.', 5000);
+      showToast('Live server connection lost. Your session is saved; reopen this page or restart live-poll.mjs to continue.', 6000);
     }
     hideBar();
     hideHighlight();
@@ -6221,6 +7133,13 @@
     if (currentSessionId) saveSession();
   }
 
+  // Progress events must never overtake the event that CREATES their session:
+  // the Go-time checkpoint and the generate POST are concurrent fetches, and
+  // when the checkpoint lands first the server rightly refuses it as
+  // unknown_session — which must mean "foreign leftovers", not "you raced
+  // your own Go click". The gate serializes creation before progress.
+  let sessionCreationGate = Promise.resolve();
+
   function sendEvent(msg, opts) {
     msg.token = TOKEN;
     function handleFailure(err) {
@@ -6231,15 +7150,42 @@
       console.debug('[impeccable] Dropped optional live event:', err);
       return null;
     }
-    return fetch('http://localhost:' + PORT + '/events', {
+    const doSend = () => fetch('http://localhost:' + PORT + '/events', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify(msg),
     }).then(async res => {
       if (res.ok) return res;
       const body = await res.json().catch(() => ({}));
+      // The server refused to journal progress for a session it has never
+      // seen: this browser is carrying state from another project or a
+      // wiped store (two apps sharing a localhost port). Continuing to
+      // report it would freeze the picker behind a session that can never
+      // complete, so drop the local state and hand the surface back.
+      if (body.error === 'unknown_session' && msg.type === 'checkpoint'
+          && msg.id && msg.id === currentSessionId) {
+        abandonForeignSession(msg.id);
+        return null;
+      }
       return handleFailure(new Error(body.error || ('HTTP ' + res.status + ' ' + res.statusText)));
     }).catch(handleFailure);
+
+    if (msg.type === 'generate' || msg.type === 'steer') {
+      const creation = doSend();
+      sessionCreationGate = creation.then(() => {}, () => {});
+      return creation;
+    }
+    return sessionCreationGate.then(doSend);
+  }
+
+  let abandonedForeignSessionId = null;
+  function abandonForeignSession(sessionId) {
+    if (abandonedForeignSessionId === sessionId || sessionId !== currentSessionId) return;
+    abandonedForeignSessionId = sessionId;
+    console.warn('[impeccable] The live server has no record of session ' + sessionId + '; clearing stale local state.');
+    markSessionHandled();
+    cleanup({ instantChrome: true });
+    showToast('A saved live session belonged to a different project, so it was cleared. Pick an element to start fresh.', 6000);
   }
 
   function checkpointPayload(reason) {
@@ -6247,6 +7193,7 @@
       type: 'checkpoint',
       id: currentSessionId,
       revision: sessionState.nextCheckpointRevision(),
+      revisionDomain: 'browser',
       owner: browserOwner,
       phase: String(state || '').toLowerCase(),
       reason,
@@ -6272,6 +7219,7 @@
       type: 'checkpoint',
       id,
       revision: sessionState.nextCheckpointRevision(),
+      revisionDomain: 'browser',
       owner: browserOwner,
       phase: 'steer',
       reason,
@@ -6620,11 +7568,21 @@
     disableInlineEdit();
     stripManualEditRuntimeState(selectedElement);
 
+    // A new cycle publishes new modules, so the previous cycle's mount failure
+    // is about files that no longer matter.
+    clearMountErrorCard();
+    lastReportedMountFailure = null;
     pendingAcceptedSession = null;
+    // A new session supersedes any accept still awaiting its result; a late
+    // failure toast for the previous session would only mislead here.
+    awaitingAcceptResult = null;
     currentSessionId = id8();
     expectedVariants = selectedCount;
     arrivedVariants = 0;
     visibleVariant = 0;
+    generationPhase = 'queued';
+    parameterGenerationState = 'pending';
+    parameterReadyAnnouncedSession = null;
     resetSessionFileMeta();
 
     // Flip to GENERATING immediately so the bar morphs without waiting on
@@ -6634,6 +7592,7 @@
     const elForCapture = selectedElement;
     pickedAnchorSnapshot = buildPickedAnchorSnapshot(elForCapture);
     const captureRect = elForCapture.getBoundingClientRect();
+    pickedAnchorViewportTop = captureRect.top;
     const snapshot = {
       comments: annotState.comments.map(c => ({ x: c.x, y: c.y, text: c.text })),
       strokes: annotState.strokes.map(s => ({ points: s.points.map(p => [p[0], p[1]]) })),
@@ -6665,7 +7624,7 @@
     writeScrollY(window.scrollY);
     if (variantObserver) variantObserver.disconnect();
     variantObserver = startVariantObserver(currentSessionId);
-    startScrollLock(currentSessionId);
+    startScrollLock(currentSessionId, window.scrollY, pickedAnchorViewportTop);
 
     captureAndEmit(elForCapture, basePayload, snapshot, captureRect);
   }
@@ -6695,17 +7654,28 @@
     if (!canCreateInsert({ prompt, comments: snapshot.comments, strokes: snapshot.strokes })) return;
 
     stopVoice({ suppressSubmit: true });
+    // A new cycle publishes new modules, so the previous cycle's mount failure
+    // is about files that no longer matter.
+    clearMountErrorCard();
+    lastReportedMountFailure = null;
     pendingAcceptedSession = null;
+    // A new session supersedes any accept still awaiting its result; a late
+    // failure toast for the previous session would only mislead here.
+    awaitingAcceptResult = null;
     currentSessionId = id8();
     expectedVariants = selectedCount;
     arrivedVariants = 0;
     visibleVariant = 0;
+    generationPhase = 'queued';
+    parameterGenerationState = 'pending';
+    parameterReadyAnnouncedSession = null;
     resetSessionFileMeta();
     selectedElement = placeholderElement;
     insertPlaceholderSnapshot = buildInsertPlaceholderSnapshotFromDom(insertAnchorElement, placeholderElement);
 
     const elForCapture = placeholderElement;
     const captureRect = elForCapture.getBoundingClientRect();
+    pickedAnchorViewportTop = captureRect.top;
     const basePayload = {
       type: 'generate',
       mode: 'insert',
@@ -6736,7 +7706,7 @@
     writeScrollY(window.scrollY);
     if (variantObserver) variantObserver.disconnect();
     variantObserver = startVariantObserver(currentSessionId);
-    startScrollLock(currentSessionId);
+    startScrollLock(currentSessionId, window.scrollY, pickedAnchorViewportTop);
     captureAndEmit(elForCapture, basePayload, snapshot, captureRect);
   }
 
@@ -6916,9 +7886,9 @@
     // preview mounts are covered by the same shader regression checks.
     const adapter = String(window.__IMPECCABLE_LIVE_ADAPTER__ || '').toLowerCase();
     if (adapter === 'svelte' || adapter === 'sveltekit') return true;
-    if (currentPreviewMode === 'svelte-component' || svelteComponentSession) return true;
+    if (isFrameworkComponentPreviewMode(currentPreviewMode) || svelteComponentSession) return true;
     const wrapper = el?.closest?.('[data-impeccable-variants]');
-    return wrapper?.dataset?.impeccablePreview === 'svelte-component';
+    return isFrameworkComponentPreviewMode(wrapper?.dataset?.impeccablePreview);
   }
 
   function paintsShaderProxySurface(node) {
@@ -7046,6 +8016,17 @@
   }
 
   async function captureAndEmit(el, basePayload, snapshot, rect) {
+    const hasAnnotations = snapshot && (snapshot.comments.length > 0 || snapshot.strokes.length > 0);
+
+    // Plain requests do not send a screenshot to the agent, so capture is
+    // presentation-only. Wait only for the helper to accept the event before
+    // starting CPU-heavy capture; this yields the browser task and prevents
+    // rasterization from delaying the fetch itself.
+    if (!hasAnnotations) {
+      basePayload.clientSentAt = Date.now();
+      await sendEvent(basePayload);
+    }
+
     let screenshotPath;
     let blob;
     let paper;
@@ -7063,7 +8044,6 @@
     // are present. Without annotations the image is pure visual anchoring -
     // it biases the model toward the current rendering and works against the
     // three-distinct-directions brief.
-    const hasAnnotations = snapshot && (snapshot.comments.length > 0 || snapshot.strokes.length > 0);
     if (blob && hasAnnotations) {
       try {
         const uploadRes = await fetch(
@@ -7081,7 +8061,12 @@
         console.warn('[impeccable] annotation upload failed:', err);
       }
     }
-    sendEvent(screenshotPath ? { ...basePayload, screenshotPath } : basePayload);
+    // Annotated requests must wait for capture + upload because the screenshot
+    // is semantic input. Plain requests were already dispatched above.
+    if (hasAnnotations) {
+      basePayload.clientSentAt = Date.now();
+      sendEvent(screenshotPath ? { ...basePayload, screenshotPath } : basePayload);
+    }
   }
 
   //
@@ -7461,7 +8446,6 @@ void main() {
     if (variantSelectionPromise) {
       try { await variantSelectionPromise; } catch { /* failed selection falls back below */ }
     }
-    if (!currentSessionId || arrivedVariants === 0) return;
     const domVisibleVariant = readVisibleVariantFromDOM(currentSessionId);
     if (domVisibleVariant > 0) visibleVariant = domVisibleVariant;
     const acceptPayload = {
@@ -7469,7 +8453,9 @@ void main() {
       id: currentSessionId,
       variantId: String(visibleVariant),
       pageUrl: location.pathname,
+      clientSentAt: Date.now(),
     };
+    if (!currentSessionId || arrivedVariants === 0) return;
     const acceptWrapper = document.querySelector('[data-impeccable-variants="' + currentSessionId + '"]');
     if (Object.keys(paramsCurrentValues).length > 0) {
       acceptPayload.paramValues = { ...paramsCurrentValues };
@@ -7483,7 +8469,7 @@ void main() {
     const acceptedSessionId = currentSessionId;
     const acceptedVariant = visibleVariant;
     const acceptedIsSvelteComponent = svelteComponentSession?.sessionId === acceptedSessionId
-      || acceptWrapper?.dataset?.impeccablePreview === 'svelte-component';
+      || isFrameworkComponentPreviewMode(acceptWrapper?.dataset?.impeccablePreview);
     const acceptedSnapshot = snapshotAcceptedVariantDom(acceptedSessionId, acceptedVariant);
 
     setLiveState('SAVING');
@@ -7498,7 +8484,18 @@ void main() {
     saveSession();
 
     sendEvent(acceptPayload, { throwOnError: true })
-      .then(() => {})
+      .then(() => {
+        const pending = pendingAcceptedSession;
+        if (!pending || pending.id !== acceptedSessionId) return;
+        // POST /events returns only after the accept intent is durable and the
+        // generation epoch is fenced. Source promotion/carbonize can finish in
+        // the background; the foreground picker is free immediately.
+        markSessionHandled();
+        setLiveState('CONFIRMED');
+        document.documentElement.dataset.impeccableAcceptToPickingMs = String(Date.now() - acceptPayload.clientSentAt);
+        awaitingAcceptResult = { id: acceptedSessionId };
+        scheduleAcceptCleanup(pending);
+      })
       .catch(() => {
         if (pendingAcceptedSession?.id === acceptedSessionId) pendingAcceptedSession = null;
         setLiveState('CYCLING');
@@ -7527,17 +8524,26 @@ void main() {
   }
 
   function scheduleAcceptCleanup(accepted) {
-    setTimeout(function() {
-      if (!accepted?.isSvelteComponent && !acceptedDomAlreadyClean(accepted)) {
-        setTimeout(function() {
-          if (pendingAcceptedSession?.id !== accepted?.id) return;
-          if (!accepted?.isSvelteComponent) ensureAcceptedDomClean(accepted);
-          cleanupAcceptedSession();
-        }, 1800);
-        return;
+    queueMicrotask(function() {
+      if (pendingAcceptedSession?.id !== accepted?.id) return;
+      // Svelte previews live in an adapter-owned mount rather than in source
+      // wrapper markup. Promote the mounted variant before releasing the
+      // session so the old adapter instance cannot linger behind the next
+      // Pick → Go loop while carbonize finishes in the background.
+      if (accepted?.isSvelteComponent) {
+        commitAcceptedSvelteComponentToDom(accepted.id);
       }
       cleanupAcceptedSession();
-    }, 1200);
+    });
+    // Let React/Vue/Svelte own the HMR reconciliation. Mutating their DOM in
+    // the same turn as the source update causes removeChild/NotFoundError
+    // races. Static servers still need a fallback, but it must not keep Live
+    // in SAVING or block the user's next pick.
+    if (!accepted?.isSvelteComponent) {
+      setTimeout(function() {
+        if (!acceptedDomAlreadyClean(accepted)) ensureAcceptedDomClean(accepted);
+      }, 1200);
+    }
   }
 
   function snapshotAcceptedVariantDom(sessionId, variantId) {
@@ -7636,11 +8642,16 @@ void main() {
     stopScrollTracking();
     if (variantObserver) { variantObserver.disconnect(); variantObserver = null; }
     stopScrollLock();
+    removeVariantStateStylesheet();
     clearScrollY();
     clearSession();
     resetSessionFileMeta();
     selectedElement = null;
+    hoveredElement = null;
+    pagePickSkipClick = false;
     currentSessionId = null;
+    parameterGenerationState = 'idle';
+    parameterReadyAnnouncedSession = null;
     selectedAction = 'impeccable';
     pendingAcceptedSession = null;
     renderEditBadge('hidden');
@@ -7675,7 +8686,7 @@ void main() {
     sendEvent({ type: 'discard', id: currentSessionId }, { throwOnError: true })
       .then(() => {
         markSessionHandled();
-        cleanup();
+        cleanup({ restoreOriginal: true, instantChrome: true });
       })
       .catch(() => showToast('Could not confirm discard with the live server. Session kept for recovery.', 5000));
   }
@@ -7697,6 +8708,7 @@ void main() {
     currentPreviewMode = null;
     recoveryWaitingForAnchor = false;
     pickedAnchorSnapshot = null;
+    pickedAnchorViewportTop = null;
   }
 
   function rememberSessionFileMeta(meta = {}) {
@@ -7705,8 +8717,8 @@ void main() {
     const previewFile = normalizeSessionPath(meta.previewFile);
     const previewMode = meta.previewMode || (isSvelteComponentManifestPath(previewFile || file) ? 'svelte-component' : null);
 
-    if (previewMode === 'svelte-component' || isSvelteComponentManifestPath(file)) {
-      currentPreviewMode = 'svelte-component';
+    if (isFrameworkComponentPreviewMode(previewMode) || isSvelteComponentManifestPath(file)) {
+      currentPreviewMode = isFrameworkComponentPreviewMode(previewMode) ? previewMode : 'svelte-component';
       currentPreviewFile = previewFile || (isSvelteComponentManifestPath(file) ? file : currentPreviewFile);
       currentSourceFile = sourceFile || currentSourceFile;
       return;
@@ -7722,12 +8734,15 @@ void main() {
     rememberSessionFileMeta(saved);
     if (saved.insertPlaceholder) insertPlaceholderSnapshot = saved.insertPlaceholder;
     if (saved.pickedAnchor) pickedAnchorSnapshot = saved.pickedAnchor;
+    if (Number.isFinite(saved.pickedAnchorViewportTop)) pickedAnchorViewportTop = saved.pickedAnchorViewportTop;
     if (saved.action) selectedAction = saved.action;
     if (saved.count) selectedCount = saved.count;
     if (saved.previewMode) currentPreviewMode = saved.previewMode;
     if (saved.paramValues && typeof saved.paramValues === 'object') {
       paramsCurrentValues = { ...saved.paramValues };
     }
+    if (saved.parameterState) parameterGenerationState = saved.parameterState;
+    if (saved.generationPhase) generationPhase = saved.generationPhase;
   }
 
   function normalizePagePath(value) {
@@ -7765,8 +8780,62 @@ void main() {
     return Math.floor(num);
   }
 
+  /**
+   * A durable server session this page can adopt when the browser has no local
+   * record of it. Requires an explicit pageUrl match: a summary with no page is
+   * not evidence that it belongs to THIS page, and adopting it would hijack an
+   * unrelated route.
+   */
+  // Phases in which the user is (or should be) comparing variants. Only these
+  // are adoptable by a browser with no local record. Steer and manual-edit
+  // sessions have no wrapper to restore, and accept/carbonize phases are
+  // agent-side work: a reload mid-carbonize must not resurrect the bar over a
+  // page whose comparison is already decided (a slow-CI reload hit exactly
+  // that window and left the bar stranded after accept).
+  const ADOPTABLE_SESSION_PHASES = new Set([
+    'generate_requested', 'variants_ready', 'generating', 'cycling',
+  ]);
+
+  function findAdoptableServerSession(activeSessions) {
+    if (!Array.isArray(activeSessions)) return null;
+    return activeSessions.find((session) => (
+      session?.id
+      && !isTerminalSessionSummary(session)
+      && !isSessionHandled(session.id)
+      && session.pageUrl
+      && pageMatchesCurrent(session.pageUrl)
+      && (session.previewFile || session.sourceFile)
+      && Number(session.expectedVariants) > 0
+      && ADOPTABLE_SESSION_PHASES.has(String(session.phase || ''))
+    )) || null;
+  }
+
+  // Shape a server summary like a saved local session so one restore path
+  // serves both. The server has no browser state machine, so an adopted session
+  // always re-enters GENERATING and lets the injection settle the final state.
+  function serverSessionAsSavedShape(session) {
+    return {
+      id: session.id,
+      state: 'GENERATING',
+      expected: Number(session.expectedVariants) || 0,
+      arrived: Number(session.arrivedVariants) || 0,
+      visible: Number(session.visibleVariant) || 0,
+      sourceFile: session.sourceFile || undefined,
+      previewFile: session.previewFile || undefined,
+      previewMode: session.previewMode || undefined,
+      pageUrl: session.pageUrl || undefined,
+      paramValues: session.paramValues && typeof session.paramValues === 'object' ? session.paramValues : {},
+    };
+  }
+
   function restoreSessionWithoutWrapper(reason, activeSessions) {
-    const saved = loadSession();
+    const cached = loadSession();
+    // localStorage is a cache, not a gate. A cleared tab, a second browser
+    // profile, or a teardown that dropped local state all leave the durable
+    // server session as the only record of work in progress; adopt it instead
+    // of stranding a session the server still considers live.
+    const adopted = cached?.id ? null : findAdoptableServerSession(activeSessions);
+    const saved = cached?.id ? cached : (adopted ? serverSessionAsSavedShape(adopted) : null);
     if (!saved?.id || isSessionHandled(saved.id)) return false;
     const savedState = String(saved.state || '').toUpperCase();
     if (savedState !== 'GENERATING' && savedState !== 'CYCLING') return false;
@@ -7799,11 +8868,18 @@ void main() {
     saveSession();
     queueCheckpoint(reason || 'browser_restore_without_wrapper');
 
-    const restoreFile = currentPreviewMode === 'svelte-component'
+    const restoreFile = isFrameworkComponentPreviewMode(currentPreviewMode)
       ? currentPreviewFile
       : (currentSourceFile || currentPreviewFile);
     if (restoreFile) {
-      injectVariantsFromSource(restoreFile, currentSessionId);
+      // A restored CYCLING session promises variants already written into
+      // source; if they are not there (after retries), the session is an
+      // orphan and must self-discard instead of freezing the picker (#439).
+      // GENERATING restores make no such promise: deferred-wrapper flows
+      // legitimately have no wrapper in source until the agent's write lands.
+      injectVariantsFromSource(restoreFile, currentSessionId, {
+        orphanDiscard: savedState === 'CYCLING' && !isFrameworkComponentPreviewMode(currentPreviewMode),
+      });
       return true;
     }
 
@@ -7812,17 +8888,48 @@ void main() {
 
   function restoreFromActiveSessions(activeSessions, reason) {
     const wrapper = document.querySelector('[data-impeccable-variants]');
-    if (wrapper && wrapper.dataset.impeccablePreview !== 'svelte-component') return false;
+    if (wrapper && !isFrameworkComponentPreviewMode(wrapper.dataset.impeccablePreview)) return false;
     if (svelteComponentSession?.sessionId === currentSessionId) return false;
     return restoreSessionWithoutWrapper(reason || 'sse_connected', activeSessions);
   }
 
+  // Self-heal on SSE (re)connect. The preflight scaffold write triggers a
+  // framework full-reload (Astro reloads pages for any .astro edit); if the
+  // agent's variant write + `done` broadcast land while this page is
+  // mid-reload, both the done SSE and the second HMR reload are missed and
+  // the resumed page would wait in GENERATING at 0/N forever. The server's
+  // session summary carries the durable generationCompletedAt marker, so on
+  // every connect compare it against our own progress and pull the finished
+  // variants from source when behind. Mirrors the `done` handler's source
+  // fallback, including its give-HMR-the-first-chance settle delay.
+  function recoverMissedGenerationCompletion(activeSessions) {
+    if (!currentSessionId || state !== 'GENERATING') return;
+    if (!Array.isArray(activeSessions)) return;
+    const summary = activeSessions.find((session) => session?.id === currentSessionId);
+    if (!summary?.generationCompletedAt || summary.generationCanceled) return;
+    if (isTerminalSessionSummary(summary)) return;
+    if (arrivedVariants > 0 && arrivedVariants >= expectedVariants) return;
+    rememberSessionFileMeta(summary);
+    const sessionId = currentSessionId;
+    const file = isFrameworkComponentPreviewMode(currentPreviewMode)
+      ? currentPreviewFile
+      : (summary.sourceFile || summary.previewFile || currentSourceFile || currentPreviewFile);
+    if (!file) return;
+    console.log('[impeccable] Reconnected after generation completed; recovering variants from source.');
+    setTimeout(() => {
+      if (sessionId !== currentSessionId || state !== 'GENERATING') return;
+      if (arrivedVariants > 0 && arrivedVariants >= expectedVariants) return;
+      injectVariantsFromSource(file, sessionId, { generationCompleted: true });
+    }, 750);
+  }
+
   function saveSession() {
     if (!currentSessionId) return;
     // NOTE: scrollY is stored under a separate key (writeScrollY). Storing
     // it here would overwrite the Go-time value every time state changes.
     sessionState.saveSession({
       id: currentSessionId,
+      appRoot: APP_ROOT || undefined,
       state,
       action: selectedAction,
       count: selectedCount,
@@ -7834,13 +8941,27 @@ void main() {
       previewMode: currentPreviewMode || undefined,
       pageUrl: location.pathname,
       paramValues: { ...paramsCurrentValues },
+      parameterState: parameterGenerationState,
       insertPlaceholder: insertPlaceholderSnapshot || undefined,
       pickedAnchor: pickedAnchorSnapshot || undefined,
+      pickedAnchorViewportTop: Number.isFinite(pickedAnchorViewportTop) ? pickedAnchorViewportTop : undefined,
+      pageHash: location.hash || undefined,
+      pageSearch: location.search || undefined,
     });
   }
 
   function loadSession() {
-    return sessionState.loadSession();
+    const saved = sessionState.loadSession();
+    // localStorage is per-origin, and two projects routinely reuse the same
+    // localhost port. A saved session stamped with another project's appRoot
+    // is that project's leftover, never a session this server can complete;
+    // resuming it freezes the picker behind an unfinishable banner.
+    if (saved?.appRoot && APP_ROOT && saved.appRoot !== APP_ROOT) {
+      console.warn('[impeccable] Ignoring saved live session from another project (' + saved.appRoot + ').');
+      sessionState.clearSession();
+      return null;
+    }
+    return saved;
   }
 
   function clearSession() {
@@ -7863,20 +8984,28 @@ void main() {
     sessionState.clearHandled();
   }
 
-  function cleanup() {
+  function cleanup(options) {
+    const restoreOriginal = options?.restoreOriginal === true;
+    const instantChrome = options?.instantChrome === true;
     const cleanupSessionId = currentSessionId;
+    clearMountErrorCard();
+    lastReportedMountFailure = null;
     if (svelteComponentSession?.sessionId === cleanupSessionId) {
       teardownSvelteComponentSession(true);
     } else if (cleanupSessionId) {
-      // Hide the wrapper immediately so variants disappear. DON'T structurally
-      // mutate the DOM yet - HMR from the agent's source rewrite is on its way,
+      // Switch visibility immediately without structurally mutating the DOM.
+      // HMR from the agent's source rewrite may still be on its way,
       // and a manual replaceChild under React causes NotFoundError when the
       // reconciler later tries to remove a wrapper we already removed.
       // Schedule a 2s fallback that does the manual swap only if HMR hasn't
       // replaced the wrapper by then (keeps static-server / no-HMR flows alive).
       const wrapper = document.querySelector('[data-impeccable-variants="' + cleanupSessionId + '"]');
-      if (wrapper) wrapper.style.display = 'none';
+      if (wrapper) {
+        if (restoreOriginal) showOriginalDuringDiscard(cleanupSessionId);
+        else wrapper.style.display = 'none';
+      }
       setTimeout(function() {
+        document.getElementById(DISCARD_STATE_STYLE_ID)?.remove();
         if (!cleanupSessionId) return;
         const lateWrapper = document.querySelector('[data-impeccable-variants="' + cleanupSessionId + '"]');
         if (!lateWrapper) return;
@@ -7891,18 +9020,23 @@ void main() {
         lateWrapper.remove();
       }, 2000);
     }
-    hideBar();
+    hideBar(instantChrome);
     hideHighlight();
     stopScrollTracking();
     if (variantObserver) { variantObserver.disconnect(); variantObserver = null; }
     if (pendingVariantAnchorRetryObserver) { pendingVariantAnchorRetryObserver.disconnect(); pendingVariantAnchorRetryObserver = null; }
     stopScrollLock();
+    removeVariantStateStylesheet();
     clearScrollY();
     finalizeInsertSession();
     clearSession();
     resetSessionFileMeta();
     selectedElement = null;
+    hoveredElement = null;
+    pagePickSkipClick = false;
     currentSessionId = null;
+    parameterGenerationState = 'idle';
+    parameterReadyAnnouncedSession = null;
     selectedAction = 'impeccable';
     renderEditBadge('hidden');
     setLiveState('PICKING');
@@ -7928,7 +9062,7 @@ void main() {
     const barTopFromBottom = barRect && barRect.height > 0
       ? Math.max(16, window.innerHeight - barRect.top + 12)
       : 16;
-    toastEl = el('div', {
+    const currentToast = el('div', {
       position: 'fixed', bottom: barTopFromBottom + 'px', left: '50%',
       transform: 'translateX(-50%) translateY(8px)',
       background: C.ink, color: C.white,
@@ -7938,19 +9072,24 @@ void main() {
       transition: 'opacity 0.25s ' + EASE + ', transform 0.25s ' + EASE,
       pointerEvents: 'none', maxWidth: '420px', textAlign: 'center',
     });
-    toastEl.id = PREFIX + '-toast';
-    toastEl.textContent = message;
-    uiAppend(toastEl);
+    toastEl = currentToast;
+    currentToast.id = PREFIX + '-toast';
+    currentToast.textContent = message;
+    uiAppend(currentToast);
     requestAnimationFrame(() => {
-      toastEl.style.opacity = '1';
-      toastEl.style.transform = 'translateX(-50%) translateY(0)';
+      if (toastEl !== currentToast) return;
+      currentToast.style.opacity = '1';
+      currentToast.style.transform = 'translateX(-50%) translateY(0)';
     });
     setTimeout(() => {
-      if (toastEl) {
-        toastEl.style.opacity = '0';
-        toastEl.style.transform = 'translateX(-50%) translateY(8px)';
-        setTimeout(() => { if (toastEl) { toastEl.remove(); toastEl = null; } }, 250);
-      }
+      if (toastEl !== currentToast) return;
+      currentToast.style.opacity = '0';
+      currentToast.style.transform = 'translateX(-50%) translateY(8px)';
+      setTimeout(() => {
+        if (toastEl !== currentToast) return;
+        currentToast.remove();
+        toastEl = null;
+      }, 250);
     }, duration);
   }
 
@@ -7981,7 +9120,7 @@ void main() {
     // would strand the bar in CYCLING at 0/0. If there's no live in-memory mount
     // for this wrapper, it's an orphan (reload / failed mount): drop it and let
     // the live-server's SSE re-inject the manifest if the session is still live.
-    if (wrapper.dataset.impeccablePreview === 'svelte-component'
+    if (isFrameworkComponentPreviewMode(wrapper.dataset.impeccablePreview)
         && svelteComponentSession?.sessionId !== sessionId) {
       wrapper.remove();
       if (restoreSessionWithoutWrapper('browser_resumed_svelte_orphan_wrapper')) return true;
@@ -7990,7 +9129,7 @@ void main() {
       return false;
     }
 
-    if (wrapper.dataset.impeccablePreview === 'svelte-component') {
+    if (isFrameworkComponentPreviewMode(wrapper.dataset.impeccablePreview)) {
       if (!svelteComponentSession?.mountedVariant) {
         return true;
       }
@@ -8038,7 +9177,7 @@ void main() {
       insertPlaceholderSnapshot = saved.insertPlaceholder;
     }
 
-    const resumedState = arrivedVariants >= expectedVariants ? 'CYCLING' : 'GENERATING';
+    const resumedState = arrivedVariants > 0 ? 'CYCLING' : 'GENERATING';
 
     // Find the visible variant's content element for highlight positioning.
     const isInsert = wrapper.dataset.impeccableMode === 'insert';
@@ -8062,7 +9201,11 @@ void main() {
     // hid. Now that state is CYCLING, re-fire.
     if (state === 'CYCLING') refreshParamsPanel();
     saveSession();
-    queueCheckpoint('browser_resumed');
+    if (arrivedVariants > 0 && arrivedVariants < expectedVariants) {
+      sendCheckpoint('variants_progress');
+    } else {
+      queueCheckpoint('browser_resumed');
+    }
 
     // Start observing for more variants AFTER initial setup
     if (variantObserver) variantObserver.disconnect();
@@ -8070,7 +9213,7 @@ void main() {
 
     // Hold the target at its saved viewport top through any subsequent
     // HMR patches, variant inserts, or cycle swaps.
-    startScrollLock(currentSessionId, readScrollY());
+    startScrollLock(currentSessionId, readScrollY(), pickedAnchorViewportTop);
 
     // If we reloaded mid-generation (Bun's HTML HMR destroys the shader
     // canvas), re-capture the original's content and restart the shader so
@@ -8105,6 +9248,7 @@ void main() {
   let globalBarBrandEl = null;
   let agentPollTooltipEl = null;
   let agentPollingConnected = false;
+  let agentStatusMessage = null;
   let agentStatusPollTimer = null;
   let steerFocusSuspended = false;
   let steerFocusPauseUntil = 0;
@@ -8188,6 +9332,8 @@ void main() {
   let pageChatInput = null;
   let pageChatHint = null;
   let pageChatVoiceBtn = null;
+  let pageChatSendBtn = null;
+  let pageChatQueueHintEl = null;
   let pageChatExpanded = false;
   let steerLocked = false;
   let steerRequestId = null;
@@ -8202,13 +9348,24 @@ void main() {
   /** @type {{ mode: 'steer'|'configure', input: HTMLInputElement, submit: () => void, beforeStart?: () => void } | null} */
   let voiceCtx = null;
   const PAGE_CHAT_COLLAPSED_W = '104px';
-  const PAGE_CHAT_PROCESSING_W = '76px';
+  const PAGE_CHAT_QUEUED_W = '212px';
   const PAGE_CHAT_PLACEHOLDER_COLLAPSED = 'Steer…';
   const PAGE_CHAT_PLACEHOLDER_EXPANDED = 'Steer the page…';
   const STEER_AWAIT_TIMEOUT_MS = 120000;
   const AGENT_STATUS_POLL_MS = 5000;
   const AGENT_DISCONNECTED_MARK = 'oklch(62% 0 0 / 0.78)';
   const AGENT_DISCONNECTED_TIP = 'Agent disconnected - run live-poll.mjs to connect';
+  // The indicator tracks whether a poll is parked, which is what decides if
+  // steering can reach the agent right now. That goes quiet two ways, and they
+  // need different copy: nobody is polling at all, or the agent took the work
+  // and is busy with it. Under one-shot foreground polling the second case is
+  // every normal generation, and telling the user to start a poll loop then is
+  // wrong advice about a healthy session.
+  const AGENT_BUSY_TIP = 'Agent is working - steering resumes when it finishes';
+  // Same distinction, said where the steer request is waiting. A submitted
+  // steer that lands while a generate holds the poll lease is not stuck, it is
+  // second in line, and the pulsing dots alone read as "nothing is happening".
+  const STEER_QUEUED_HINT = 'Queued behind current generation';
   const GLOBAL_BAR_SECTION_GAP = 8;
   const GLOBAL_BAR_INNER_GAP = 2;
   const GLOBAL_BAR_INNER_PAD_LEFT = 2;
@@ -8361,10 +9518,85 @@ void main() {
   }
 
   function syncPageChatVisual() {
-    if (!pageChatInput || steerLocked) return;
+    if (!pageChatInput || steerLocked) {
+      syncPageChatSendButton();
+      return;
+    }
     const hasText = pageChatInput.value.length > 0;
     if (hasText && !pageChatExpanded) expandPageChat({ focus: false });
     else if (!hasText && pageChatExpanded) collapsePageChat();
+    syncPageChatSendButton();
+  }
+
+  /**
+   * Send is visible once the pill is open for typing and enabled once there is
+   * something to send. It disappears entirely while a steer is in flight, the
+   * same way the mic does: a second submit during the lock has nowhere to go.
+   */
+  function syncPageChatSendButton() {
+    if (!pageChatSendBtn) return;
+    const P = pageChatPalette();
+    const hasText = !!pageChatInput?.value.trim();
+    const focused = pageChatInput && activeElementDeep() === pageChatInput;
+    const visible = !steerLocked && (pageChatExpanded || hasText || focused);
+    pageChatSendBtn.style.display = visible ? 'inline-flex' : 'none';
+    pageChatSendBtn.disabled = !visible || !hasText;
+    pageChatSendBtn.style.background = P.accent;
+    pageChatSendBtn.style.color = C.ink;
+    pageChatSendBtn.style.borderLeft = '1px solid ' + P.hairline;
+    pageChatSendBtn.style.opacity = pageChatSendBtn.disabled ? '0.42' : '1';
+    pageChatSendBtn.style.cursor = pageChatSendBtn.disabled ? 'not-allowed' : 'pointer';
+    pageChatSendBtn.title = pageChatSendBtn.disabled ? 'Type what to change first' : 'Send (Enter)';
+  }
+
+  /**
+   * A submitted steer is queued, not ignored, whenever no poll is parked and
+   * the browser knows a generation is in flight: the agent holds the lease and
+   * will not see the steer until it finishes. Saying so beats three dots that
+   * look identical to a lost request.
+   */
+  function steerQueuedBehindGeneration() {
+    return steerLocked && !agentPollingConnected && agentHasWorkInFlight();
+  }
+
+  function buildSteerQueueHint() {
+    const P = pageChatPalette();
+    const hint = el('span', {
+      display: 'inline-flex', alignItems: 'center', justifyContent: 'flex-end',
+      flex: '1', minWidth: '0', marginLeft: 'auto',
+      padding: '0 10px 0 6px',
+      fontFamily: FONT, fontSize: '10.5px', fontWeight: '500',
+      color: P.patinaPale,
+      whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
+      pointerEvents: 'none',
+    });
+    hint.id = PREFIX + '-page-chat-queue';
+    return hint;
+  }
+
+  function syncSteerQueueHint() {
+    if (!pageChatEl) return;
+    const queued = steerQueuedBehindGeneration();
+    if (queued) {
+      if (!pageChatQueueHintEl) {
+        pageChatQueueHintEl = buildSteerQueueHint();
+        pageChatEl.appendChild(pageChatQueueHintEl);
+      }
+      pageChatQueueHintEl.textContent = STEER_QUEUED_HINT;
+      if (pageChatDotsEl) pageChatDotsEl.style.display = 'none';
+      pageChatEl.style.width = PAGE_CHAT_QUEUED_W;
+      pageChatEl.setAttribute('aria-label', STEER_QUEUED_HINT);
+      return;
+    }
+    if (pageChatQueueHintEl?.parentNode) {
+      pageChatQueueHintEl.remove();
+      pageChatQueueHintEl = null;
+      if (steerLocked) {
+        pageChatEl.style.width = pageChatExpanded ? pageChatExpandedWidth() : PAGE_CHAT_COLLAPSED_W;
+        pageChatEl.setAttribute('aria-label', 'Processing steer request');
+      }
+    }
+    if (pageChatDotsEl) pageChatDotsEl.style.display = '';
   }
 
   function shouldFocusSteerChat() {
@@ -8536,6 +9768,7 @@ void main() {
 
   function syncPageChatFocusRing() {
     if (!pageChatEl || !pageChatInput) return;
+    syncPageChatSendButton();
     const focused = activeElementDeep() === pageChatInput;
     const typingReady = focused && !steerLocked;
     pageChatEl.dataset.inputFocused = focused ? 'true' : 'false';
@@ -8612,9 +9845,9 @@ void main() {
   function buildSteerProcessingDots() {
     const P = pageChatPalette();
     const wrap = el('span', {
-      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
-      gap: '5px', flex: '1', minWidth: '0',
-      padding: '0 12px 0 2px',
+      display: 'inline-flex', alignItems: 'center', justifyContent: 'flex-end',
+      gap: '5px', flex: '0 0 auto', minWidth: '0', marginLeft: 'auto',
+      padding: '0 12px 0 8px',
       pointerEvents: 'none',
     });
     wrap.setAttribute('aria-hidden', 'true');
@@ -8689,12 +9922,28 @@ void main() {
     steerAwaitTimer = setTimeout(() => {
       if (!steerLocked || steerRequestId !== id) return;
       unlockSteerChat({
-        error: 'Steer timed out waiting for the agent. Check that live-poll is running and replies with steer_done.',
+        error: steerTimeoutMessage(),
         restoreMessage: steerPendingMessage,
       });
     }, STEER_AWAIT_TIMEOUT_MS);
   }
 
+  /**
+   * Two minutes of silence has three different causes and only one of them is
+   * "live-poll is not running". Naming the wrong one sends the user to restart
+   * a poll loop that was never the problem.
+   */
+  function steerTimeoutMessage() {
+    const head = 'Steer timed out after 2 minutes. ';
+    if (steerQueuedBehindGeneration()) {
+      return head + 'The agent is still busy with the current generation - your message was not lost, but it never got picked up. Send it again once the variants land.';
+    }
+    if (!agentPollingConnected) {
+      return head + 'No agent is polling right now. Run live-poll.mjs, then send it again.';
+    }
+    return head + 'The agent picked it up but never replied with steer_done. Check the agent session for a stalled or failed steer.';
+  }
+
   function lockSteerChat() {
     if (!pageChatEl || !pageChatInput) return;
     stopVoice({ suppressSubmit: true });
@@ -8718,6 +9967,7 @@ void main() {
       pageChatDotsEl = buildSteerProcessingDots();
       pageChatEl.appendChild(pageChatDotsEl);
     }
+    syncSteerQueueHint();
     syncPageChatFocusRing();
     syncPageChatChrome();
   }
@@ -8759,6 +10009,10 @@ void main() {
       pageChatDotsEl.remove();
       pageChatDotsEl = null;
     }
+    if (pageChatQueueHintEl?.parentNode) {
+      pageChatQueueHintEl.remove();
+      pageChatQueueHintEl = null;
+    }
     steerPendingMessage = keepExpanded ? restoreMessage : '';
     steerInputWasFocused = false;
     syncPageChatChrome();
@@ -8997,10 +10251,11 @@ void main() {
     const id = id8();
     steerRequestId = id;
     steerPendingMessage = text;
-    if (steerInputWasFocused) sendSteerCheckpoint(id, 'steer_input_focused', { focused: true });
     lockSteerChat();
     scheduleSteerAwaitTimeout(id);
-    sendSteerCheckpoint(id, 'steer_submitted', { message: text, pageUrl: location.href });
+    // Checkpoints follow the steer event, never precede it: the steer event
+    // is what creates the session journal server-side, and a checkpoint for
+    // a not-yet-created session is rejected as unknown_session.
     sendEvent({
       type: 'steer',
       id,
@@ -9008,9 +10263,11 @@ void main() {
       pageUrl: location.href,
     }).then((res) => {
       if (!res) {
-        sendSteerCheckpoint(id, 'steer_send_failed', { message: text });
         unlockSteerChat({ error: 'Could not reach live server', restoreMessage: text });
+        return;
       }
+      if (steerInputWasFocused) sendSteerCheckpoint(id, 'steer_input_focused', { focused: true });
+      sendSteerCheckpoint(id, 'steer_submitted', { message: text, pageUrl: location.href });
     });
   }
 
@@ -9126,10 +10383,41 @@ void main() {
     pageChatVoiceBtn.setAttribute('aria-label', 'Voice input');
     pageChatVoiceBtn.innerHTML = ICON_PAGE_VOICE;
 
+    // Visible Send, same affordance the element-level Go bar gets from
+    // buildConfigureSubmitButton. Enter still submits; the button exists so a
+    // typed steer does not look like a dead-end text field.
+    pageChatSendBtn = el('button', {
+      display: 'none', alignItems: 'center', justifyContent: 'center',
+      padding: '0', boxSizing: 'border-box',
+      width: '28px', height: '28px', flexShrink: '0',
+      border: 'none', borderLeft: '1px solid ' + P.hairline,
+      borderRadius: '0',
+      background: P.accent, color: C.ink,
+      cursor: 'pointer',
+      transition: 'filter 0.12s ease, opacity 0.12s ease',
+    });
+    pageChatSendBtn.id = PREFIX + '-page-chat-send';
+    pageChatSendBtn.type = 'button';
+    pageChatSendBtn.setAttribute('aria-label', 'Send steer message');
+    pageChatSendBtn.innerHTML = ICON_CONFIGURE_SUBMIT;
+    pageChatSendBtn.addEventListener('pointerdown', keepSteerPointerInside);
+    pageChatSendBtn.addEventListener('mousedown', keepSteerPointerInside);
+    pageChatSendBtn.addEventListener('mouseenter', () => {
+      if (!pageChatSendBtn.disabled) pageChatSendBtn.style.filter = 'brightness(1.1)';
+    });
+    pageChatSendBtn.addEventListener('mouseleave', () => { pageChatSendBtn.style.filter = 'none'; });
+    pageChatSendBtn.addEventListener('click', (e) => {
+      e.stopPropagation();
+      keepSteerPointerInside(e);
+      if (steerLocked || pageChatSendBtn.disabled) return;
+      submitSteerMessage();
+    });
+
     pageChatEl.appendChild(chatIcon);
     pageChatEl.appendChild(pageChatHint);
     pageChatEl.appendChild(pageChatInput);
     pageChatEl.appendChild(pageChatVoiceBtn);
+    pageChatEl.appendChild(pageChatSendBtn);
 
     if (!uiGetById(PREFIX + '-page-chat-style')) {
       const s = document.createElement('style');
@@ -9152,14 +10440,14 @@ void main() {
 
     pageChatEl.addEventListener('pointerdown', (e) => {
       keepSteerPointerInside(e);
-      if (steerLocked || pageChatVoiceBtn.contains(e.target)) return;
+      if (steerLocked || pageChatVoiceBtn.contains(e.target) || pageChatSendBtn.contains(e.target)) return;
       armPageChatForTyping({ expand: true, focus: false });
     });
     pageChatEl.addEventListener('mousedown', keepSteerPointerInside);
     pageChatEl.addEventListener('click', (e) => {
       keepSteerPointerInside(e);
       if (steerLocked) return;
-      if (pageChatVoiceBtn.contains(e.target)) return;
+      if (pageChatVoiceBtn.contains(e.target) || pageChatSendBtn.contains(e.target)) return;
       armPageChatForTyping({ expand: true, focus: true });
     });
 
@@ -9180,6 +10468,7 @@ void main() {
 
     pageChatInput.addEventListener('input', () => {
       syncPageChatVisual();
+      syncPageChatSendButton();
     });
 
     pageChatInput.addEventListener('focus', () => {
@@ -9229,24 +10518,47 @@ void main() {
     </svg>`;
   }
 
+  /**
+   * True while the browser is waiting on work it already handed to the agent.
+   * In these states a quiet poll indicator means "busy", not "absent".
+   */
+  function agentHasWorkInFlight() {
+    return state === 'GENERATING' || state === 'SAVING';
+  }
+
+  /**
+   * Derived at read time, not cached: which of the two reasons applies depends on
+   * the live state, which moves between the 5s status polls. The truthiness is
+   * the same either way, so the indicator's visuals can stay driven by the
+   * cached value while the wording stays current.
+   */
+  function agentStatusText() {
+    if (agentPollingConnected) return null;
+    return agentHasWorkInFlight() ? AGENT_BUSY_TIP : AGENT_DISCONNECTED_TIP;
+  }
+
   function syncAgentPollingUi(connected) {
     agentPollingConnected = !!connected;
+    syncSteerQueueHint();
     if (!globalBarBrandEl) return;
     const P = barPaletteForTheme(globalBarEl?.dataset.theme || detectPageTheme());
+    agentStatusMessage = agentStatusText();
     globalBarBrandEl.dataset.agentConnected = connected ? 'true' : 'false';
-    globalBarBrandEl.setAttribute('aria-label', connected
-      ? 'Impeccable live mode'
-      : 'Impeccable live mode - agent not polling');
+    // The tooltip is mouse-only, so carry the same distinction in the label or
+    // screen-reader users are left with the vaguer of the two readings.
+    globalBarBrandEl.setAttribute('aria-label', agentStatusMessage
+      ? 'Impeccable live mode - ' + (agentHasWorkInFlight() ? 'agent is working' : 'agent not polling')
+      : 'Impeccable live mode');
     globalBarBrandEl.removeAttribute('title');
-    globalBarBrandEl.style.cursor = connected ? 'default' : 'help';
+    globalBarBrandEl.style.cursor = agentStatusMessage ? 'help' : 'default';
     const mark = globalBarBrandEl.querySelector('[data-brand-mark]');
     if (mark) {
       mark.innerHTML = brandMarkSvg(connected ? P.accent : AGENT_DISCONNECTED_MARK, 18);
       mark.style.opacity = '1';
     }
     const dot = globalBarBrandEl.querySelector('[data-agent-dot]');
-    if (dot) dot.style.display = connected ? 'none' : 'block';
-    if (connected) hideAgentPollTooltip();
+    if (dot) dot.style.display = agentStatusMessage ? 'block' : 'none';
+    if (!agentStatusMessage) hideAgentPollTooltip();
   }
 
   function ensureAgentPollTooltip() {
@@ -9273,14 +10585,17 @@ void main() {
       whiteSpace: 'normal',
     });
     agentPollTooltipEl.id = PREFIX + '-agent-poll-tooltip';
-    agentPollTooltipEl.textContent = AGENT_DISCONNECTED_TIP;
+    agentPollTooltipEl.textContent = agentStatusText() || AGENT_DISCONNECTED_TIP;
     uiAppend(agentPollTooltipEl);
     return agentPollTooltipEl;
   }
 
   function showAgentPollTooltip(anchor) {
-    if (agentPollingConnected || !anchor) return;
+    if (!agentStatusMessage || !anchor) return;
     const tip = ensureAgentPollTooltip();
+    // Re-derive rather than reuse the cached copy: the live state may have moved
+    // since the last status poll set it.
+    tip.textContent = agentStatusText() || AGENT_DISCONNECTED_TIP;
     tip.style.transition = 'none';
     tip.style.display = 'block';
     tip.style.opacity = '1';
@@ -9310,7 +10625,9 @@ void main() {
     fetch('http://localhost:' + PORT + '/status?token=' + TOKEN, { cache: 'no-store' })
       .then((res) => (res.ok ? res.json() : null))
       .then((data) => {
-        if (data && typeof data.agentPolling === 'boolean') syncAgentPollingUi(data.agentPolling);
+        if (data && typeof data.agentPolling === 'boolean') {
+          syncAgentPollingUi(data.agentPolling);
+        }
       })
       .catch(() => { /* server loss handled elsewhere */ });
   }
@@ -9984,6 +11301,7 @@ void main() {
     window.postMessage({ source: 'impeccable-command', action: 'remove' }, '*');
     setLiveState('IDLE');
     document.getElementById(PICK_CURSOR_STYLE_ID)?.remove();
+    removeVariantStateStylesheet();
     window.__IMPECCABLE_LIVE_INIT__ = false;
     console.log('[impeccable] Live mode exited.');
   }
@@ -10472,7 +11790,7 @@ void main() {
     if (designState.present === false) {
       const empty = document.createElement('div');
       empty.className = 'empty';
-      empty.innerHTML = `<strong>No DESIGN.md yet</strong>Create one by running <code>/impeccable document</code> in your terminal, then re-open this panel.`;
+      empty.innerHTML = `<strong>No DESIGN.md yet</strong>Create one by running <code>${IMPECCABLE_COMMAND} document</code> in your terminal, then re-open this panel.`;
       body.appendChild(empty);
       return;
     }
@@ -10502,7 +11820,7 @@ void main() {
     box.className = 'stale';
     box.innerHTML = `
       <span class="stale-dot"></span>
-      <span class="stale-text"><strong>DESIGN.md is newer than .impeccable/design.json.</strong> Run <code>/impeccable document</code> to refresh the sidecar.</span>
+      <span class="stale-text"><strong>DESIGN.md is newer than .impeccable/design.json.</strong> Run <code>${IMPECCABLE_COMMAND} document</code> to refresh the sidecar.</span>
     `;
     return box;
   }
@@ -10510,13 +11828,34 @@ void main() {
   function renderParsedMdCta() {
     const box = document.createElement('div');
     box.className = 'parsed-md-cta';
-    box.innerHTML = `<strong>Basic view</strong>This panel reads the tokens in your <code>DESIGN.md</code> frontmatter. Running <code>/impeccable document</code> also generates a <code>.impeccable/design.json</code> sidecar with your project's actual component snippets (button, input, nav) and tonal ramps, rendered live below the tokens.`;
+    box.innerHTML = `<strong>Basic view</strong>This panel reads the tokens in your <code>DESIGN.md</code> frontmatter. Running <code>${IMPECCABLE_COMMAND} document</code> also generates a <code>.impeccable/design.json</code> sidecar with your project's actual component snippets (button, input, nav) and tonal ramps, rendered live below the tokens.`;
     return box;
   }
 
   // Unified render: merge parsed DESIGN.md frontmatter with sidecar v2
 
+  /**
+   * The empty state has to say which emptiness it is. `present:false` (no
+   * DESIGN.md at all) is handled upstream in renderDesignBody; everything here
+   * means the helper found a design system and this panel found nothing in it
+   * worth drawing. Telling that user "no design system data" reads as "your
+   * DESIGN.md is missing" and sends them to write a file they already have.
+   */
+  function designEmptyMessage() {
+    if (designState.hasMd && !designState.hasSidecar) {
+      return 'DESIGN.md found, no structured tokens to display. Run ' + IMPECCABLE_COMMAND + ' document to generate the .impeccable/design.json sidecar.';
+    }
+    if (designState.hasMd) {
+      return 'DESIGN.md and its sidecar were found, but neither carries colors, type, radii, or components to display.';
+    }
+    return 'No design system data available.';
+  }
+
   function renderDesignVisual(body, parsed, sidecar) {
+    // Count only what this function draws: renderDesignBody may already have
+    // appended a stale-sidecar hint or the basic-view CTA, and those must not
+    // pass for token content.
+    const beforeCount = body.childElementCount;
     const frontmatter = parsed?.frontmatter || {};
     const extensions = sidecar?.extensions || {};
     const proseColors = parsed?.colors || null;
@@ -10544,8 +11883,8 @@ void main() {
       body.appendChild(renderOverviewCollapsible(narrative));
     }
 
-    if (body.childElementCount === 0) {
-      body.appendChild(msgDiv('empty', 'No design system data available.'));
+    if (body.childElementCount === beforeCount) {
+      body.appendChild(msgDiv('empty', designEmptyMessage()));
     }
   }