@bastani/atomic 0.9.11-alpha.1 → 0.9.11-alpha.11

package/dist/builtin/workflows/skills/impeccable/scripts/live-browser.js

@@ -126,6 +126,44 @@
   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 (params sidecar flow, unknown values) always pass so we
+  // never block a phase we do not model.
+  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_variant_generating: 6,
+    first_variant_validating: 7,
+    first_reviewable: 8,
+    remaining_variants_generating: 9,
+    remaining_variants_validating: 10,
+    second_reviewable: 11,
+    all_variants_ready: 12,
+    variants_ready: 12,
+    variant_parameters_generating: 13,
+    variant_parameters_validating: 14,
+    parameters_ready: 15,
+  };
+  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;
@@ -134,8 +172,17 @@
   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;
@@ -151,10 +198,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.
@@ -252,6 +301,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,
@@ -1114,14 +1170,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();
@@ -1966,6 +2023,7 @@
    */
   function setLiveState(next) {
     state = next;
+    window.__IMPECCABLE_LIVE_STATE__ = next;
     syncPageInteractionCursor();
   }
 
@@ -2516,18 +2574,27 @@
       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_variant_generating') return 'Designing the first variant...';
+    if (generationPhase === 'first_variant_validating') return 'Checking the first variant...';
+    if (generationPhase === 'remaining_variants_generating') return 'Exploring two more directions...';
+    if (generationPhase === 'remaining_variants_validating') 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>';
@@ -2557,7 +2624,7 @@
       color: BP.textDim, minWidth: '24px', textAlign: 'center',
     });
     counter.id = PREFIX + '-variant-counter';
-    counter.textContent = visibleVariant + '/' + arrivedVariants;
+    counter.textContent = visibleVariant + '/' + expectedVariants;
     row.appendChild(counter);
 
     // Next
@@ -2567,10 +2634,12 @@
     if (visibleVariant >= 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',
@@ -2578,35 +2647,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);
     }
@@ -2614,6 +2702,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',
@@ -2628,7 +2725,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
@@ -3131,7 +3232,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)',
         });
@@ -3165,7 +3266,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',
@@ -3178,7 +3279,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');
@@ -4743,6 +4844,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; }
@@ -4835,6 +4962,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');
@@ -5029,9 +5160,13 @@
     }
   }
 
-  function loadSvelteRuntime(runtimeModule) {
+  function resolveComponentModuleUrl(manifest, modulePath) {
+    return new URL(String(modulePath || ''), location.origin).href;
+  }
+
+  function loadSvelteRuntime(runtimeModule, manifest) {
     const modulePath = runtimeModule || '/src/lib/impeccable/__runtime.js';
-    const url = new URL(modulePath, location.origin).href;
+    const url = resolveComponentModuleUrl(manifest, modulePath);
     if (!svelteRuntimePromise) {
       svelteRuntimePromise = import(/* @vite-ignore */ url);
     }
@@ -5065,7 +5200,8 @@
   async function loadSvelteComponentVariantSource(manifest, variantNum) {
     const dir = String(manifest?.componentDir || '').replace(/^\/+/, '');
     if (!dir || !variantNum) return '';
-    const sourcePath = dir + '/v' + variantNum + '.svelte';
+    const extension = manifest.componentExtension || 'svelte';
+    const sourcePath = dir + '/v' + variantNum + '.' + extension;
     const url = 'http://localhost:' + PORT + '/source?token=' + TOKEN + '&path=' + encodeURIComponent(sourcePath);
     try {
       const res = await fetch(url);
@@ -5221,7 +5357,7 @@
     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;
@@ -5233,9 +5369,12 @@
     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 runtime = await loadSvelteRuntime(manifest.runtimeModule, manifest);
+      const extension = manifest.componentExtension || 'svelte';
+      const moduleBase = manifest.componentModuleBase
+        || ('/' + String(manifest.componentDir || '').replace(/^\/+/, ''));
+      const modulePath = String(moduleBase).replace(/\/+$/, '') + '/v' + variantNum + '.' + extension;
+      const moduleUrl = resolveComponentModuleUrl(manifest, modulePath) + '?t=' + Date.now();
       const mod = await import(/* @vite-ignore */ moduleUrl);
       const Component = mod.default;
       if (svelteComponentSession.mountedInstance && runtime.unmount) {
@@ -5275,7 +5414,7 @@
       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);
       return false;
     }
   }
@@ -5340,40 +5479,46 @@
       if (manifest.id !== sessionId) 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);
         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;
       }
@@ -5381,7 +5526,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');
@@ -5419,8 +5564,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
@@ -5445,9 +5590,10 @@
       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);
+      console.error('[impeccable] Failed to mount component-preview variants:', err);
       abortSvelteComponentInjection(sessionId, 'Could not load variants. Fix the error and re-run.');
     }
   }
@@ -5493,6 +5639,8 @@
     clearHandled();
     resetSessionFileMeta();
     currentSessionId = null;
+    parameterGenerationState = 'idle';
+    parameterReadyAnnouncedSession = null;
     expectedVariants = 0;
     arrivedVariants = 0;
     visibleVariant = 0;
@@ -5502,12 +5650,24 @@
     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;
+
   /**
    * 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;
@@ -5573,6 +5733,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;
         }
@@ -5594,6 +5780,7 @@
         refreshParamsPanel();
         positionBar();
         saveSession();
+        if (parameterGenerationState === 'loading') completeParameterPublication();
         console.log('[impeccable] Injected ' + arrivedVariants + ' variants from source file.');
       })
       .catch(err => {
@@ -5865,13 +6052,36 @@
     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 {}
 
@@ -5895,6 +6105,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) {
@@ -5939,6 +6160,7 @@
       if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; }
       const prevTarget = scrollLockTargetY;
       scrollLockTargetY = window.scrollY;
+      scrollLockAnchorTop = resolveScrollLockAnchorTop();
       writeScrollY(scrollLockTargetY);
     };
     const markGesture = (why) => {
@@ -5976,6 +6198,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.
@@ -6049,6 +6272,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;
@@ -6064,7 +6288,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();
@@ -6072,13 +6296,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;
     });
 
@@ -6151,6 +6380,7 @@
           syncAgentPollingUi(!!msg.agentPolling);
           startAgentStatusPoll();
           restoreFromActiveSessions(msg.activeSessions, 'sse_connected');
+          recoverMissedGenerationCompletion(msg.activeSessions);
           if (state === 'IDLE' && (pickActive || insertActive)) setLiveState('PICKING');
           syncPageInteractionCursor();
           syncPageChatFocus('sse-connected');
@@ -6158,6 +6388,42 @@
         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;
+            if (msg.phase === 'variant_parameters_generating' || msg.phase === 'variant_parameters_validating') {
+              parameterGenerationState = 'loading';
+            }
+            if (msg.phase === 'parameters_ready' && parameterGenerationState !== 'ready') {
+              parameterGenerationState = 'loading';
+            }
+            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).
+            // The visible progress count still advances from the variant
+            // MutationObserver as HMR lands each variant.
+          }
+          break;
         case 'steer_done':
           maybeCompleteSteer(msg);
           break;
@@ -6175,6 +6441,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') {
@@ -6190,7 +6460,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;
           }
@@ -6212,12 +6482,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) {
@@ -6228,14 +6507,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');
@@ -6261,7 +6569,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();
@@ -6306,6 +6614,7 @@
       type: 'checkpoint',
       id: currentSessionId,
       revision: sessionState.nextCheckpointRevision(),
+      revisionDomain: 'browser',
       owner: browserOwner,
       phase: String(state || '').toLowerCase(),
       reason,
@@ -6331,6 +6640,7 @@
       type: 'checkpoint',
       id,
       revision: sessionState.nextCheckpointRevision(),
+      revisionDomain: 'browser',
       owner: browserOwner,
       phase: 'steer',
       reason,
@@ -6680,10 +6990,16 @@
     stripManualEditRuntimeState(selectedElement);
 
     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
@@ -6693,6 +7009,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]]) })),
@@ -6724,7 +7041,7 @@
     writeScrollY(window.scrollY);
     if (variantObserver) variantObserver.disconnect();
     variantObserver = startVariantObserver(currentSessionId);
-    startScrollLock(currentSessionId);
+    startScrollLock(currentSessionId, window.scrollY, pickedAnchorViewportTop);
 
     captureAndEmit(elForCapture, basePayload, snapshot, captureRect);
   }
@@ -6755,16 +7072,23 @@
 
     stopVoice({ suppressSubmit: true });
     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',
@@ -6795,7 +7119,7 @@
     writeScrollY(window.scrollY);
     if (variantObserver) variantObserver.disconnect();
     variantObserver = startVariantObserver(currentSessionId);
-    startScrollLock(currentSessionId);
+    startScrollLock(currentSessionId, window.scrollY, pickedAnchorViewportTop);
     captureAndEmit(elForCapture, basePayload, snapshot, captureRect);
   }
 
@@ -6975,9 +7299,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) {
@@ -7105,6 +7429,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;
@@ -7122,7 +7457,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(
@@ -7140,7 +7474,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);
+    }
   }
 
   //
@@ -7520,7 +7859,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 = {
@@ -7528,7 +7866,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 };
@@ -7542,7 +7882,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');
@@ -7557,7 +7897,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');
@@ -7586,17 +7937,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) {
@@ -7700,7 +8060,11 @@ void main() {
     clearSession();
     resetSessionFileMeta();
     selectedElement = null;
+    hoveredElement = null;
+    pagePickSkipClick = false;
     currentSessionId = null;
+    parameterGenerationState = 'idle';
+    parameterReadyAnnouncedSession = null;
     selectedAction = 'impeccable';
     pendingAcceptedSession = null;
     renderEditBadge('hidden');
@@ -7735,7 +8099,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));
   }
@@ -7757,6 +8121,7 @@ void main() {
     currentPreviewMode = null;
     recoveryWaitingForAnchor = false;
     pickedAnchorSnapshot = null;
+    pickedAnchorViewportTop = null;
   }
 
   function rememberSessionFileMeta(meta = {}) {
@@ -7765,8 +8130,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;
@@ -7782,12 +8147,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) {
@@ -7859,7 +8227,7 @@ void main() {
     saveSession();
     queueCheckpoint(reason || 'browser_restore_without_wrapper');
 
-    const restoreFile = currentPreviewMode === 'svelte-component'
+    const restoreFile = isFrameworkComponentPreviewMode(currentPreviewMode)
       ? currentPreviewFile
       : (currentSourceFile || currentPreviewFile);
     if (restoreFile) {
@@ -7872,11 +8240,41 @@ 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
@@ -7894,8 +8292,12 @@ 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,
     });
   }
 
@@ -7923,20 +8325,26 @@ void main() {
     sessionState.clearHandled();
   }
 
-  function cleanup() {
+  function cleanup(options) {
+    const restoreOriginal = options?.restoreOriginal === true;
+    const instantChrome = options?.instantChrome === true;
     const cleanupSessionId = currentSessionId;
     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;
@@ -7951,7 +8359,7 @@ void main() {
         lateWrapper.remove();
       }, 2000);
     }
-    hideBar();
+    hideBar(instantChrome);
     hideHighlight();
     stopScrollTracking();
     if (variantObserver) { variantObserver.disconnect(); variantObserver = null; }
@@ -7963,7 +8371,11 @@ void main() {
     clearSession();
     resetSessionFileMeta();
     selectedElement = null;
+    hoveredElement = null;
+    pagePickSkipClick = false;
     currentSessionId = null;
+    parameterGenerationState = 'idle';
+    parameterReadyAnnouncedSession = null;
     selectedAction = 'impeccable';
     renderEditBadge('hidden');
     setLiveState('PICKING');
@@ -8047,7 +8459,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;
@@ -8056,7 +8468,7 @@ void main() {
       return false;
     }
 
-    if (wrapper.dataset.impeccablePreview === 'svelte-component') {
+    if (isFrameworkComponentPreviewMode(wrapper.dataset.impeccablePreview)) {
       if (!svelteComponentSession?.mountedVariant) {
         return true;
       }
@@ -8104,7 +8516,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';
@@ -8128,7 +8540,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();
@@ -8136,7 +8552,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
@@ -8171,6 +8587,7 @@ void main() {
   let globalBarBrandEl = null;
   let agentPollTooltipEl = null;
   let agentPollingConnected = false;
+  let agentStatusMessage = null;
   let agentStatusPollTimer = null;
   let steerFocusSuspended = false;
   let steerFocusPauseUntil = 0;
@@ -8275,6 +8692,13 @@ void main() {
   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';
   const GLOBAL_BAR_SECTION_GAP = 8;
   const GLOBAL_BAR_INNER_GAP = 2;
   const GLOBAL_BAR_INNER_PAD_LEFT = 2;
@@ -8678,9 +9102,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');
@@ -8848,14 +9272,13 @@ void main() {
   function isEmbeddedPreviewBrowser() {
     const ua = navigator.userAgent || '';
     if (/Electron/i.test(ua)) return true;
-    if (/Cursor/i.test(ua)) return true;
     try {
-      return !!(window.cursor || window.__CURSOR__ || window.__GLASS_BROWSER__);
+      return !!window.__GLASS_BROWSER__;
     } catch { return false; }
   }
 
   function steerVoiceUnavailableMessage() {
-    return 'Voice input works in Chrome or Safari. Cursor\'s preview browser cannot reach speech services.';
+    return 'Voice input works in Chrome or Safari. This embedded preview browser cannot reach speech services.';
   }
 
   function steerVoiceErrorMessage(code) {
@@ -9295,24 +9718,46 @@ 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;
     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() {
@@ -9339,14 +9784,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';
@@ -9376,7 +9824,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 */ });
   }