quiver-cli 0.5.0 → 0.7.0

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

@@ -57,6 +57,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 PICK_CURSOR_STYLE_ID = PREFIX + '-pick-cursor-style';
   const MANUAL_APPLY_STATE_TTL_MS = 15 * 60 * 1000;
   const sessionState = window.__IMPECCABLE_LIVE_SESSION__?.createLiveBrowserSessionState({
     prefix: PREFIX,
@@ -81,45 +82,24 @@
     'html', 'head', 'body', 'script', 'style', 'link', 'meta', 'noscript', 'br', 'wbr',
   ]);
 
-  // SVG icons stack above each chip label. All strokes use currentColor so the
-  // icon recolors to C.brand when its chip is selected. 20x20 render, 24-viewBox,
-  // 1.5 stroke - visually consistent with the Foundation grid on the homepage.
-  const ICON_ATTRS = 'width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="display:block"';
-  const ICONS = {
-    impeccable: `<svg ${ICON_ATTRS}><path d="M4 20l4-1L18 9l-3-3L5 16z"/><path d="M14 7l3 3"/></svg>`,
-    bolder:     `<svg ${ICON_ATTRS}><rect x="6" y="12" width="4" height="7" rx="0.5"/><rect x="14" y="5" width="4" height="14" rx="0.5"/></svg>`,
-    quieter:    `<svg ${ICON_ATTRS}><rect x="6" y="5" width="4" height="14" rx="0.5"/><rect x="14" y="12" width="4" height="7" rx="0.5"/></svg>`,
-    distill:    `<svg ${ICON_ATTRS}><path d="M4 5h16l-6 8v7l-4-2v-5z"/></svg>`,
-    polish:     `<svg ${ICON_ATTRS}><path d="M15 3l1 3 3 1-3 1-1 3-1-3-3-1 3-1z"/><path d="M7 13l0.6 1.8 1.8 0.6-1.8 0.6-0.6 1.8-0.6-1.8-1.8-0.6 1.8-0.6z"/></svg>`,
-    typeset:    `<svg ${ICON_ATTRS}><path d="M5 6h14" stroke-width="2.6"/><path d="M5 12h9" stroke-width="1.9"/><path d="M5 18h5" stroke-width="1.3"/></svg>`,
-    colorize:   `<svg ${ICON_ATTRS}><circle cx="9" cy="10" r="5"/><circle cx="15" cy="10" r="5"/><circle cx="12" cy="15" r="5"/></svg>`,
-    layout:     `<svg ${ICON_ATTRS}><rect x="3" y="4" width="8" height="16" rx="0.5"/><rect x="13" y="4" width="8" height="7" rx="0.5"/><rect x="13" y="13" width="8" height="7" rx="0.5"/></svg>`,
-    adapt:      `<svg ${ICON_ATTRS}><rect x="2.5" y="5" width="12" height="11" rx="1"/><line x1="2.5" y1="19" x2="14.5" y2="19"/><rect x="16.5" y="8" width="5" height="11" rx="1"/></svg>`,
-    animate:    `<svg ${ICON_ATTRS}><path d="M3 18c4-4 6-10 10-10"/><path d="M13 8c3 0 5 5 8 10"/><circle cx="13" cy="8" r="1.6" fill="currentColor" stroke="none"/></svg>`,
-    delight:    `<svg ${ICON_ATTRS}><path d="M12 3l2 6 6 2-6 2-2 6-2-6-6-2 6-2z"/></svg>`,
-    overdrive:  `<svg ${ICON_ATTRS}><path d="M13 3L5 13h5l-1 8 9-12h-6z"/></svg>`,
-  };
-
-  const ACTIONS = [
-    { value: 'impeccable', label: 'Freeform' },
-    { value: 'bolder',     label: 'Bolder' },
-    { value: 'quieter',    label: 'Quieter' },
-    { value: 'distill',    label: 'Distill' },
-    { value: 'polish',     label: 'Polish' },
-    { value: 'typeset',    label: 'Typeset' },
-    { value: 'colorize',   label: 'Colorize' },
-    { value: 'layout',     label: 'Layout' },
-    { value: 'adapt',      label: 'Adapt' },
-    { value: 'animate',    label: 'Animate' },
-    { value: 'delight',    label: 'Delight' },
-    { value: 'overdrive',  label: 'Overdrive' },
-  ];
+  // Command vocabulary (values + labels + icons) comes from the canonical source,
+  // skill/scripts/live/vocabulary.mjs, which live-server.mjs serializes into
+  // window.__IMPECCABLE_VOCAB__ when it serves /live.js (same injection path as
+  // the token/port above, so it is always present here). The icons stack above
+  // each chip label and recolor to C.brand when selected (strokes use
+  // currentColor). ACTIONS drives the picker grid; ICONS maps value -> svg.
+  const VOCAB = Array.isArray(window.__IMPECCABLE_VOCAB__) ? window.__IMPECCABLE_VOCAB__ : [];
+  const ICONS = {};
+  const ACTIONS = VOCAB.map((c) => {
+    ICONS[c.value] = c.icon;
+    return { value: c.value, label: c.label };
+  });
 
   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: 'pending-copy-edit-dock', ids: [PREFIX + '-pending-dock'] },
-    { key: 'element-selection-chrome', ids: [PREFIX + '-highlight', PREFIX + '-tooltip', PREFIX + '-bar', PREFIX + '-configure-input-wrap', PREFIX + '-input', PREFIX + '-configure-voice'] },
+    { 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'] },
     { key: 'edit-chrome', ids: [PREFIX + '-edit-badge'] },
     { key: 'generating-row', ids: [PREFIX + '-bar', PREFIX + '-shader'] },
@@ -152,6 +132,8 @@
   let currentPreviewFile = null;
   let currentPreviewMode = null;
   let recoveryWaitingForAnchor = false;
+  let pickedAnchorSnapshot = null;
+  let pendingVariantAnchorRetryObserver = null;
   let pendingAcceptedSession = null;
   let variantObserver = null;
   let variantSelectionInFlight = false;
@@ -170,6 +152,7 @@
   let scrollLockTargetY = null;
   let scrollLockRaf = null;
   let scrollLockAbort = null;
+  const SCROLL_ANCHOR_LOCK_ID = 'impeccable-scroll-anchor-lock';
 
   // Dedicated key for scroll position - SEPARATE from LS_KEY so that
   // saveSession's state updates don't clobber a carefully-captured scrollY.
@@ -216,93 +199,31 @@
   // Helpers
   //
 
-  function own(el) {
-    return el && (el.id?.startsWith(PREFIX) || el.closest?.('[id^="' + PREFIX + '"]'));
-  }
-
-  function pickable(el) {
-    if (!el || el.nodeType !== 1) return false;
-    if (SKIP_TAGS.has(el.tagName.toLowerCase())) return false;
-    if (own(el)) return false;
-    const r = el.getBoundingClientRect();
-    return r.width >= 20 && r.height >= 20;
-  }
-
-  function desc(el) {
-    if (!el) return '';
-    let s = el.tagName.toLowerCase();
-    if (el.id) s += '#' + el.id;
-    else if (el.classList.length) s += '.' + [...el.classList].slice(0, 2).join('.');
-    return s;
-  }
-
-  function rectIsUsableAnchor(rect) {
-    return !!rect && rect.width > 0.5 && rect.height > 0.5;
-  }
-
-  function makeFrozenAnchor(el) {
-    if (!el || !el.getBoundingClientRect) return null;
-    const r = el.getBoundingClientRect();
-    if (!rectIsUsableAnchor(r)) return null;
-    const rect = {
-      x: r.x, y: r.y,
-      top: r.top, left: r.left,
-      right: r.right, bottom: r.bottom,
-      width: r.width, height: r.height,
-    };
-    return {
-      __impeccableFrozenAnchor: true,
-      tagName: el.tagName || 'DIV',
-      id: el.id || '',
-      classList: el.classList ? [...el.classList] : [],
-      hasAttribute: () => false,
-      getBoundingClientRect: () => rect,
-    };
-  }
-
-  function id8() { return crypto.randomUUID().replace(/-/g, '').slice(0, 8); }
-
-  function cssId(id) {
-    if (window.CSS?.escape) return CSS.escape(id);
-    return String(id).replace(/([ !"#$%&'()*+,./:;<=>?@[\\\]^`{|}~])/g, '\\$1');
-  }
-
-  function liveUiRoot() {
-    const root = window.__IMPECCABLE_LIVE_UI_ROOT__;
-    if (root && typeof root.appendChild === 'function') return root;
-    return document.body;
-  }
-
-  function uiAppend(el) {
-    liveUiRoot().appendChild(el);
-    return el;
-  }
-
-  function uiAppendStyle(styleEl) {
-    const root = liveUiRoot();
-    if (root && root !== document.body) root.appendChild(styleEl);
-    else document.head.appendChild(styleEl);
-    return styleEl;
-  }
-
-  function uiGetById(id) {
-    const root = liveUiRoot();
-    if (root?.getElementById) {
-      const found = root.getElementById(id);
-      if (found) return found;
-    }
-    if (root?.querySelector) {
-      const found = root.querySelector('#' + cssId(id));
-      if (found) return found;
-    }
-    return document.getElementById(id);
-  }
-
-  function activeElementDeep() {
-    let active = document.activeElement;
-    while (active?.shadowRoot?.activeElement) active = active.shadowRoot.activeElement;
-    return active;
+  const domHelpers = window.__IMPECCABLE_LIVE_DOM__?.createLiveBrowserDomHelpers({
+    prefix: PREFIX,
+    skipTags: SKIP_TAGS,
+    document,
+  });
+  if (!domHelpers) {
+    console.error('[impeccable] live-browser-dom.js was not loaded. Live mode cannot start safely.');
+    window.__IMPECCABLE_LIVE_INIT__ = false;
+    return;
   }
+  const {
+    own,
+    pickable,
+    desc,
+    rectIsUsableAnchor,
+    makeFrozenAnchor,
+    id8,
+    cssId,
+    liveUiRoot,
+    uiAppend,
+    uiAppendStyle,
+    uiGetById,
+    activeElementDeep,
+    defangOutsideHandlers,
+  } = domHelpers;
 
   window.__IMPECCABLE_LIVE_CHROME_CORE__ = {
     version: 1,
@@ -335,45 +256,6 @@
     }),
   };
 
-  // Modal-aware chrome: keep our floating UI clickable inside Radix /
-  // Headless UI / vaul portals.
-  //
-  // Two host-page behaviors break us when the picked element lives inside a
-  // modal dialog:
-  //
-  //   1. Modal scroll-lock disables outside pointer events. Radix's
-  //      `DismissableLayer` sets `document.body.style.pointerEvents = 'none'`
-  //      while a modal is open and only restores `auto` on the layer. Our
-  //      chrome inherits `none` from <body> and becomes unclickable.
-  //   2. The dialog's outside-interaction handler (Radix's
-  //      `usePointerDownOutside`) listens at document level and dismisses
-  //      the dialog whenever a `pointerdown` lands outside the layer node.
-  //      Our chrome is a sibling of <body>, so Radix classifies our clicks
-  //      as outside and tears the dialog down mid-task.
-  //
-  // We can't reliably re-parent our chrome into the dialog subtree (z-index
-  // stacking, scroll containers, theming all become host-page concerns), so
-  // we defang both behaviors at our root:
-  //
-  //   - `pointer-events: auto !important` overrides the inherited `none`.
-  //   - Stop `pointerdown` / `mousedown` propagation so the document-level
-  //     dismiss listener never fires for our clicks.
-  //   - Stop `focusin` propagation so any focus shifts inside our chrome
-  //     don't read as "focus moved outside the dialog" to focus traps.
-  //
-  // Click events still bubble normally - only the early pointer/focus
-  // signals that drive outside-interaction detection are silenced.
-  function defangOutsideHandlers(rootEl, { setPointerEvents = true } = {}) {
-    if (!rootEl) return;
-    if (setPointerEvents) {
-      rootEl.style.setProperty('pointer-events', 'auto', 'important');
-    }
-    const stop = (e) => e.stopPropagation();
-    rootEl.addEventListener('pointerdown', stop);
-    rootEl.addEventListener('mousedown', stop);
-    rootEl.addEventListener('focusin', stop);
-  }
-
   //
   // Highlight overlay
   //
@@ -405,31 +287,53 @@
     uiAppend(tooltipEl);
   }
 
+  function shouldShowHighlightTagTooltip() {
+    // Configure/edit carry the tag in the bar selection pill, so keep only the outline.
+    return state !== 'CONFIGURING' && state !== 'EDITING';
+  }
+
+  function hideHighlightTagTooltip() {
+    if (!tooltipEl) return;
+    tooltipEl.style.opacity = '0';
+    tooltipEl.style.display = 'none';
+  }
+
   function showHighlight(el) {
     if (!el || !highlightEl) return;
     if (el.hasAttribute?.('data-impeccable-insert-placeholder')) return;
     const r = el.getBoundingClientRect();
     const top = (r.top - 2) + 'px', left = (r.left - 2) + 'px';
     const width = (r.width + 4) + 'px', height = (r.height + 4) + 'px';
-    const tipTop = r.top - 20;
-    const tipY = (tipTop < 4 ? r.bottom + 4 : tipTop) + 'px';
-    const tipX = Math.max(4, r.left) + 'px';
-    tooltipEl.textContent = desc(el);
+    const showTagTooltip = shouldShowHighlightTagTooltip();
 
     const hiWasHidden = highlightEl.style.display === 'none' || highlightEl.style.opacity === '0';
     if (hiWasHidden) {
       // Snap to first target without animating from (0,0), then fade in.
       highlightEl.style.transition = 'none';
       Object.assign(highlightEl.style, { top, left, width, height, display: 'block' });
-      tooltipEl.style.transition = 'none';
-      Object.assign(tooltipEl.style, { top: tipY, left: tipX, display: 'block' });
       void highlightEl.offsetWidth;
       highlightEl.style.transition = HIGHLIGHT_TRANSITION;
       highlightEl.style.opacity = '1';
+    } else {
+      Object.assign(highlightEl.style, { top, left, width, height, display: 'block', opacity: '1' });
+    }
+
+    if (!showTagTooltip) {
+      hideHighlightTagTooltip();
+      return;
+    }
+
+    const tipTop = r.top - 20;
+    const tipY = (tipTop < 4 ? r.bottom + 4 : tipTop) + 'px';
+    const tipX = Math.max(4, r.left) + 'px';
+    tooltipEl.textContent = desc(el);
+    if (hiWasHidden) {
+      tooltipEl.style.transition = 'none';
+      Object.assign(tooltipEl.style, { top: tipY, left: tipX, display: 'block' });
+      void tooltipEl.offsetWidth;
       tooltipEl.style.transition = TOOLTIP_TRANSITION;
       tooltipEl.style.opacity = '1';
     } else {
-      Object.assign(highlightEl.style, { top, left, width, height, display: 'block', opacity: '1' });
       Object.assign(tooltipEl.style, { top: tipY, left: tipX, display: 'block', opacity: '1' });
     }
   }
@@ -1132,8 +1036,8 @@
       boxShadow: BP.shadow,
       transition: 'box-shadow 0.2s ease, opacity 0.25s ' + EASE + ', transform 0.3s ' + EASE,
       fontFamily: FONT, fontSize: '13px', color: BP.text,
-      padding: '6px',
-      maxWidth: '520px', minWidth: '320px',
+      padding: '5px',
+      maxWidth: '560px', minWidth: '340px',
     });
     uiAppend(barEl);
     defangOutsideHandlers(barEl);
@@ -1141,14 +1045,29 @@
 
   function positionBar() {
     if (!barEl) return;
-    const anchor = resolveBarAnchor();
-    if (!anchor) return;
-    const r = anchor.getBoundingClientRect();
     const barH = barEl.offsetHeight || 44;
     const barW = barEl.offsetWidth || 380;
     const GLOBAL_BAR_RESERVE = 64; // global bar height + bottom margin + breathing room
     const GAP = 8;
 
+    // Recovery pins to document.body when the picked element is off-screen or
+    // missing. Center the generating bar above the global bar instead of
+    // stacking a duplicate toast in the same slot.
+    if (recoveryWaitingForAnchor) {
+      const barRect = globalBarEl?.getBoundingClientRect();
+      const reserve = barRect && barRect.height > 0
+        ? Math.max(GLOBAL_BAR_RESERVE, window.innerHeight - barRect.top + 12)
+        : GLOBAL_BAR_RESERVE;
+      const top = window.innerHeight - barH - reserve;
+      const left = Math.max(GAP, (window.innerWidth - barW) / 2);
+      Object.assign(barEl.style, { top: top + 'px', left: left + 'px' });
+      return;
+    }
+
+    const anchor = resolveBarAnchor();
+    if (!anchor) return;
+    const r = anchor.getBoundingClientRect();
+
     // Prefer below the element; fall back to above; if neither fits (element
     // taller than viewport), pin to a stable viewport anchor so the bar
     // doesn't teleport between top and bottom as the user scrolls.
@@ -1176,8 +1095,14 @@
     if (mode === 'configure') {
       barEl.appendChild(configureKind === 'insert' ? buildInsertConfigureRow() : buildConfigureRow());
       if (configureKind === 'insert') syncInsertCreateButton();
-    } else if (mode === 'generating') barEl.appendChild(buildGeneratingRow());
-    else if (mode === 'cycling') barEl.appendChild(buildCyclingRow());
+      applyConfigureBarChrome();
+    } else {
+      restorePickerBarChrome();
+      if (mode === 'generating') {
+        if (recoveryWaitingForAnchor) dismissToast();
+        barEl.appendChild(buildGeneratingRow());
+      } else if (mode === 'cycling') barEl.appendChild(buildCyclingRow());
+    }
     barEl.style.display = 'block';
     positionBar();
     requestAnimationFrame(() => {
@@ -1197,6 +1122,7 @@
     setTimeout(() => { if (barEl && hideSeq === barHideSeq) barEl.style.display = 'none'; }, 250);
     hideActionPicker();
     closeTunePopover();
+    hideConfigureBarTooltip();
     if (state === 'EDITING') restoreInlineEditDrafts();
     disableInlineEdit();
   }
@@ -1205,39 +1131,475 @@
     if (!barEl || barEl.style.display === 'none') return;
     if (mode === 'cycling' && !ensureCyclingRenderable('update-bar')) return;
     barEl.innerHTML = '';
-    // Reset bar styling to the kinpaku picker palette
-    barEl.style.background = BP.surface;
-    barEl.style.border = '1px solid ' + BP.border;
-    barEl.style.boxShadow = BP.shadow;
     if (mode === 'configure') {
       barEl.appendChild(configureKind === 'insert' ? buildInsertConfigureRow() : buildConfigureRow());
       if (configureKind === 'insert') syncInsertCreateButton();
-    } else if (mode === 'generating') barEl.appendChild(buildGeneratingRow());
-    else if (mode === 'cycling') barEl.appendChild(buildCyclingRow());
-    else if (mode === 'saving') barEl.appendChild(buildSavingRow());
-    else if (mode === 'confirmed') {
-      barEl.appendChild(buildConfirmedRow());
-      barEl.style.background = 'oklch(95% 0.05 145)';
-      barEl.style.border = '1px solid oklch(75% 0.12 145 / 0.4)';
+      applyConfigureBarChrome();
+    } else {
+      restorePickerBarChrome();
+      if (mode === 'generating') barEl.appendChild(buildGeneratingRow());
+      else if (mode === 'cycling') barEl.appendChild(buildCyclingRow());
+      else if (mode === 'saving') barEl.appendChild(buildSavingRow());
+      else if (mode === 'confirmed') {
+        barEl.appendChild(buildConfirmedRow());
+        barEl.style.background = 'oklch(95% 0.05 145)';
+        barEl.style.border = '1px solid oklch(75% 0.12 145 / 0.4)';
+      }
     }
     syncPageChatFocus('update-bar-content');
   }
 
-  // Configure row
+  // Configure row: the floating bar surface IS the input; modifier pills sit left of the field.
+
+  const CONFIGURE_BAR_H = '36px';
+  // Compact selection pill + 7px inset balances vertical centering in the 36px bar.
+  const CONFIGURE_BAR_INSET = '7px';
+  const CONFIGURE_PILL_RADIUS = '7px';
+  const CONFIGURE_SELECTION_PILL_BORDER = '1px solid oklch(70% 0.12 188)';
+  const CONFIGURE_SELECTION_PILL_PAD = '1px 4px';
+  const CONFIGURE_ROW_FONT_SIZE = '12px';
+  const CONFIGURE_ROW_TRACK_H = '18px';
+  const CONFIGURE_PILL_PAD_Y = '3px';
+  const CONFIGURE_BAR_SURFACE = 'oklch(15% 0.008 95)';
+  const CONFIGURE_PILL_TEXT = 'oklch(94% 0.02 82)';
+  const ICON_CONFIGURE_SUBMIT =
+    '<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>';
+
+  function applyConfigureBarChrome() {
+    if (!barEl) return;
+    barEl.dataset.configureSurface = 'true';
+    barEl.style.padding = '0';
+    barEl.style.background = CONFIGURE_BAR_SURFACE;
+    barEl.style.overflow = 'hidden';
+    syncConfigureInputChrome();
+  }
+
+  function restorePickerBarChrome() {
+    if (!barEl) return;
+    barEl.dataset.configureSurface = 'false';
+    barEl.removeAttribute('data-input-focused');
+    barEl.removeAttribute('data-voice-listening');
+    barEl.style.padding = '5px';
+    barEl.style.background = BP.surface;
+    barEl.style.overflow = '';
+    barEl.style.border = '1px solid ' + BP.border;
+    barEl.style.borderColor = BP.border;
+    barEl.style.boxShadow = BP.shadow;
+  }
 
   function syncConfigureInputChrome() {
-    const wrap = uiGetById(PREFIX + '-configure-input-wrap');
-    const input = uiGetById(PREFIX + '-input');
-    if (!wrap || !input) return;
+    const input = uiGetById(PREFIX + '-input') || uiGetById(PREFIX + '-insert-input');
+    const surface = barEl?.dataset.configureSurface === 'true' ? barEl : null;
+    if (!surface || !input) return;
     const focused = activeElementDeep() === input;
-    wrap.dataset.inputFocused = focused ? 'true' : 'false';
-    wrap.dataset.voiceListening = (voiceListening && voiceCtx?.mode === 'configure') ? 'true' : 'false';
-    wrap.style.borderColor = (voiceListening && voiceCtx?.mode === 'configure')
+    const listening = voiceListening && voiceCtx?.mode === 'configure';
+    surface.dataset.inputFocused = focused ? 'true' : 'false';
+    surface.dataset.voiceListening = listening ? 'true' : 'false';
+    surface.style.borderColor = listening
       ? BP.patinaSoft
-      : (focused ? BP.accentSoft : BP.hairline);
+      : (focused ? BP.accentSoft : BP.border);
+    surface.style.boxShadow = BP.shadow;
+  }
+
+  function configureBarPalette() {
+    return BP || barPaletteForTheme(detectPageTheme());
+  }
+
+  function configureRowTextMetrics(extra = {}) {
+    return {
+      fontFamily: FONT,
+      fontSize: CONFIGURE_ROW_FONT_SIZE,
+      fontWeight: '500',
+      lineHeight: CONFIGURE_ROW_TRACK_H,
+      ...extra,
+    };
+  }
+
+  function configureInputFieldStyle(extra = {}) {
+    return {
+      flex: '1', minWidth: '0', width: '100%',
+      padding: '0', margin: '0',
+      border: 'none', background: 'transparent',
+      boxSizing: 'border-box',
+      height: CONFIGURE_ROW_TRACK_H,
+      color: CONFIGURE_PILL_TEXT,
+      caretColor: CONFIGURE_PILL_TEXT,
+      outline: 'none',
+      ...configureRowTextMetrics(),
+      ...extra,
+    };
+  }
+
+  function configureInputShellStyle() {
+    return {
+      display: 'flex', alignItems: 'center', gap: '6px',
+      flex: '1', minWidth: '0', height: '100%',
+      padding: '0 6px 0 ' + CONFIGURE_BAR_INSET,
+    };
+  }
+
+  function configureSelectionPillStyle(extra = {}) {
+    const P = configureBarPalette();
+    return {
+      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
+      gap: '2px', height: 'auto', flexShrink: '0',
+      padding: CONFIGURE_SELECTION_PILL_PAD,
+      boxSizing: 'border-box',
+      border: CONFIGURE_SELECTION_PILL_BORDER,
+      borderRadius: CONFIGURE_PILL_RADIUS,
+      background: 'transparent',
+      color: P.patina,
+      cursor: 'pointer',
+      transition: 'background 0.15s ease, color 0.15s ease, border-color 0.15s ease',
+      whiteSpace: 'nowrap',
+      ...configureRowTextMetrics({
+        fontFamily: MONO, fontWeight: '600', letterSpacing: '-0.01em',
+      }),
+      ...extra,
+    };
+  }
+
+  function configureModifierPillStyle(extra = {}) {
+    const P = configureBarPalette();
+    return {
+      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
+      gap: '2px', height: 'auto', minHeight: CONFIGURE_ROW_TRACK_H,
+      padding: CONFIGURE_PILL_PAD_Y + ' 8px', flexShrink: '0',
+      boxSizing: 'border-box',
+      border: '1px solid transparent',
+      borderRadius: CONFIGURE_PILL_RADIUS,
+      background: 'transparent',
+      color: P.textDim, cursor: 'pointer',
+      transition: 'background 0.15s ease, color 0.15s ease, border-color 0.15s ease',
+      whiteSpace: 'nowrap',
+      ...configureRowTextMetrics(),
+      ...extra,
+    };
+  }
+
+  function configureInlineControlStyle(extra = {}) {
+    const P = configureBarPalette();
+    return {
+      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
+      gap: '2px', height: CONFIGURE_ROW_TRACK_H, flexShrink: '0',
+      padding: '0', margin: '0',
+      boxSizing: 'border-box',
+      border: 'none', borderRadius: '0',
+      background: 'transparent',
+      color: P.textDim, cursor: 'pointer',
+      transition: 'color 0.12s ease, background 0.12s ease',
+      whiteSpace: 'nowrap',
+      ...configureRowTextMetrics(),
+      ...extra,
+    };
+  }
+
+  function bindConfigureInlineControlHover(btn, controlsLocked) {
+    btn.addEventListener('mouseenter', () => {
+      if (controlsLocked) return;
+      const P = configureBarPalette();
+      btn.style.color = P.text;
+    });
+    btn.addEventListener('mouseleave', () => {
+      if (controlsLocked) return;
+      btn.style.color = configureBarPalette().textDim;
+    });
+  }
+
+  function bindConfigureModifierPillHover(btn, controlsLocked) {
+    btn.addEventListener('mouseenter', () => {
+      if (controlsLocked) return;
+      const P = configureBarPalette();
+      btn.style.color = P.text;
+      btn.style.background = P.toggleActive;
+    });
+    btn.addEventListener('mouseleave', () => {
+      if (controlsLocked) return;
+      const P = configureBarPalette();
+      btn.style.color = P.textDim;
+      btn.style.background = 'transparent';
+    });
   }
 
-  // Insert mode helpers (mirrors skill/scripts/live-insert-ui.mjs)
+  let configureBarTooltipEl = null;
+
+  function ensureConfigureBarTooltip() {
+    if (configureBarTooltipEl) return configureBarTooltipEl;
+    const P = configureBarPalette();
+    configureBarTooltipEl = el('div', {
+      position: 'fixed',
+      display: 'none',
+      zIndex: String(Z.bar + 7),
+      pointerEvents: 'none',
+      maxWidth: 'min(360px, calc(100vw - 16px))',
+      padding: '6px 9px',
+      borderRadius: '7px',
+      background: P.chatSurface,
+      border: '1px solid ' + P.hairline,
+      boxShadow: P.shadow,
+      color: P.text,
+      fontFamily: FONT,
+      fontSize: '11px',
+      fontWeight: '500',
+      lineHeight: '1.35',
+      letterSpacing: '0.01em',
+      whiteSpace: 'normal',
+      wordBreak: 'break-word',
+    });
+    configureBarTooltipEl.id = PREFIX + '-configure-bar-tooltip';
+    uiAppend(configureBarTooltipEl);
+    return configureBarTooltipEl;
+  }
+
+  function showConfigureBarTooltip(anchor, message) {
+    if (!anchor || !message) return;
+    const tip = ensureConfigureBarTooltip();
+    tip.textContent = message;
+    tip.style.transition = 'none';
+    tip.style.display = 'block';
+    tip.style.opacity = '1';
+    const r = anchor.getBoundingClientRect();
+    const tipW = tip.offsetWidth;
+    const tipH = tip.offsetHeight;
+    const left = Math.max(8, Math.min(window.innerWidth - tipW - 8, r.left + r.width / 2 - tipW / 2));
+    const top = Math.max(8, r.top - tipH - 8);
+    tip.style.left = left + 'px';
+    tip.style.top = top + 'px';
+  }
+
+  function hideConfigureBarTooltip() {
+    if (!configureBarTooltipEl) return;
+    configureBarTooltipEl.style.display = 'none';
+    configureBarTooltipEl.style.opacity = '0';
+  }
+
+  function selectionTagLabel(el) {
+    if (!el) return '';
+    if (el.hasAttribute?.('data-impeccable-insert-placeholder')) return 'slot';
+    return el.tagName.toLowerCase();
+  }
+
+  function elementPath(el, maxDepth = 8) {
+    if (!el) return '';
+    const parts = [];
+    let node = el;
+    while (node && node.nodeType === 1 && node !== document.body) {
+      let part = node.tagName.toLowerCase();
+      if (node.id) part += '#' + node.id;
+      else if (node.classList?.length) part += '.' + [...node.classList].slice(0, 2).join('.');
+      parts.unshift(part);
+      node = node.parentElement;
+      if (parts.length >= maxDepth) break;
+    }
+    return parts.join(' \u203a ');
+  }
+
+  function variantCountTooltipText(count) {
+    const n = Number(count) || selectedCount;
+    const word = n === 1 ? 'variant' : 'variants';
+    return 'Click to change \u00b7 ' + n + ' ' + word;
+  }
+
+  function removeConfigureSelection() {
+    hideConfigureBarTooltip();
+    if (configureKind === 'insert') {
+      cancelInsertConfigure();
+      return;
+    }
+    selectedElement = null;
+    exitConfigureToPicking('selection-pill-remove', { clearHover: true });
+  }
+
+  function buildSelectionPill({ el: targetEl, controlsLocked }) {
+    const tag = selectionTagLabel(targetEl);
+    const path = elementPath(targetEl);
+    const P = configureBarPalette();
+    const pill = el('button', configureSelectionPillStyle({ minWidth: '32px' }));
+    pill.id = PREFIX + '-selection-pill';
+    pill.type = 'button';
+    pill.setAttribute('aria-label', 'Selected element: ' + tag);
+    pill.disabled = controlsLocked;
+    pill.style.cursor = controlsLocked ? 'not-allowed' : 'pointer';
+    pill.style.opacity = controlsLocked ? '0.58' : '1';
+    pill.style.flexShrink = '0';
+
+    const faceStack = el('span', {
+      display: 'grid', placeItems: 'center',
+      width: '100%', minWidth: '1.25em',
+      lineHeight: CONFIGURE_ROW_TRACK_H,
+    });
+    const tagFace = el('span', {
+      gridArea: '1 / 1',
+      transition: 'opacity 0.12s ease',
+      color: P.patina,
+    });
+    const clearFace = el('span', {
+      gridArea: '1 / 1',
+      opacity: '0',
+      transition: 'opacity 0.12s ease',
+      color: 'oklch(58% 0.15 35)',
+    });
+    tagFace.textContent = tag;
+    clearFace.textContent = '\u00D7';
+    faceStack.appendChild(tagFace);
+    faceStack.appendChild(clearFace);
+    pill.appendChild(faceStack);
+
+    const setArmed = (armed) => {
+      tagFace.style.opacity = armed ? '0' : '1';
+      clearFace.style.opacity = armed ? '1' : '0';
+      pill.style.background = armed ? P.toggleActive : 'transparent';
+      pill.style.border = CONFIGURE_SELECTION_PILL_BORDER;
+      pill.setAttribute('aria-label', armed ? 'Clear selection' : 'Selected element: ' + tag);
+    };
+    const arm = () => {
+      if (controlsLocked) {
+        showConfigureBarTooltip(pill, 'Apply is still running');
+        return;
+      }
+      setArmed(true);
+      if (path) showConfigureBarTooltip(pill, path);
+    };
+    const disarm = () => {
+      hideConfigureBarTooltip();
+      setArmed(false);
+    };
+    pill.addEventListener('mouseenter', arm);
+    pill.addEventListener('mouseleave', disarm);
+    pill.addEventListener('focus', arm);
+    pill.addEventListener('blur', disarm);
+    pill.addEventListener('click', (e) => {
+      e.stopPropagation();
+      if (controlsLocked) { showManualApplyBusyToast(); return; }
+      removeConfigureSelection();
+    });
+    return pill;
+  }
+
+  function bindConfigureCountPillTooltip(count, controlsLocked) {
+    count.removeAttribute('title');
+    count.addEventListener('mouseenter', () => {
+      if (controlsLocked) {
+        showConfigureBarTooltip(count, 'Apply is still running');
+        return;
+      }
+      showConfigureBarTooltip(count, variantCountTooltipText(selectedCount));
+    });
+    count.addEventListener('mouseleave', hideConfigureBarTooltip);
+  }
+
+  function buildConfigureActionControl({ controlsLocked, onClick }) {
+    const control = el('button', configureInlineControlStyle());
+    const label = document.createElement('span');
+    label.textContent = actionLabel();
+    const caret = el('span', {
+      fontSize: '10px', lineHeight: '1',
+      marginLeft: '2px', pointerEvents: 'none',
+      color: 'inherit',
+    });
+    caret.textContent = '\u25BE';
+    caret.setAttribute('aria-hidden', 'true');
+    control.appendChild(label);
+    control.appendChild(caret);
+    control.disabled = controlsLocked;
+    control.style.cursor = controlsLocked ? 'not-allowed' : 'pointer';
+    control.style.opacity = controlsLocked ? '0.58' : '1';
+    bindConfigureInlineControlHover(control, controlsLocked);
+    control.addEventListener('click', onClick);
+    return control;
+  }
+
+  const VARIANT_COUNT_MIN = 1;
+  const VARIANT_COUNT_MAX = 4;
+
+  function cycleSelectedCount() {
+    if (selectedCount >= VARIANT_COUNT_MAX) selectedCount = VARIANT_COUNT_MIN;
+    else selectedCount += 1;
+    return selectedCount;
+  }
+
+  function buildConfigureCountControl({ controlsLocked, onClick }) {
+    const count = el('button', configureInlineControlStyle({
+      fontFamily: MONO, fontWeight: '600', letterSpacing: '0',
+    }));
+    count.textContent = '\u00D7' + selectedCount;
+    count.disabled = controlsLocked;
+    count.style.cursor = controlsLocked ? 'not-allowed' : 'pointer';
+    count.style.opacity = controlsLocked ? '0.58' : '1';
+    bindConfigureInlineControlHover(count, controlsLocked);
+    bindConfigureCountPillTooltip(count, controlsLocked);
+    count.addEventListener('click', onClick);
+    return count;
+  }
+
+  function buildConfigureVoiceButton({ id, controlsLocked, onClick }) {
+    const voiceBtn = el('button', {
+      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
+      boxSizing: 'border-box',
+      width: CONFIGURE_BAR_H, height: '100%', flexShrink: '0',
+      padding: '0', margin: '0',
+      border: 'none', borderRight: '1px solid ' + BP.hairline,
+      borderRadius: '0', background: 'transparent',
+      color: BP.textDim, cursor: 'pointer',
+      transition: 'color 0.12s ease, background 0.12s ease',
+    });
+    voiceBtn.id = id;
+    voiceBtn.type = 'button';
+    voiceBtn.setAttribute('aria-label', 'Voice input');
+    voiceBtn.innerHTML = ICON_PAGE_VOICE;
+    voiceBtn.disabled = controlsLocked;
+    voiceBtn.style.cursor = controlsLocked ? 'not-allowed' : 'pointer';
+    voiceBtn.style.opacity = controlsLocked ? '0.58' : '1';
+    voiceBtn.addEventListener('mousedown', (e) => e.stopPropagation());
+    voiceBtn.addEventListener('click', onClick);
+    return voiceBtn;
+  }
+
+  function buildConfigureTrailingCluster(controls, voiceBtn, submitBtn) {
+    const cluster = el('div', {
+      display: 'inline-flex', alignItems: 'stretch', flexShrink: '0',
+      height: '100%', borderLeft: '1px solid ' + BP.hairline,
+    });
+    if (controls.length) {
+      const controlsWrap = el('div', {
+        display: 'inline-flex', alignItems: 'center', gap: '8px',
+        padding: '0 10px', flexShrink: '0', height: '100%',
+      });
+      controls.forEach((control) => controlsWrap.appendChild(control));
+      cluster.appendChild(controlsWrap);
+    }
+    voiceBtn.style.borderLeft = '1px solid ' + BP.hairline;
+    cluster.appendChild(voiceBtn);
+    cluster.appendChild(submitBtn);
+    return cluster;
+  }
+
+  function buildConfigureSubmitButton({ controlsLocked, onClick, ariaLabel }) {
+    const btn = el('button', {
+      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
+      boxSizing: 'border-box', width: CONFIGURE_BAR_H, height: CONFIGURE_BAR_H,
+      padding: '0', flexShrink: '0',
+      border: 'none', borderLeft: '1px solid ' + BP.hairline,
+      borderRadius: '0',
+      background: BP.accent, color: C.ink,
+      cursor: controlsLocked ? 'not-allowed' : 'pointer',
+      transition: 'filter 0.12s ease, transform 0.1s ease',
+    });
+    btn.type = 'button';
+    btn.setAttribute('aria-label', ariaLabel);
+    btn.innerHTML = ICON_CONFIGURE_SUBMIT;
+    btn.disabled = controlsLocked;
+    btn.style.opacity = controlsLocked ? '0.58' : '1';
+    if (controlsLocked) btn.title = 'Apply is still running';
+    btn.addEventListener('mouseenter', () => { if (!controlsLocked) btn.style.filter = 'brightness(1.1)'; });
+    btn.addEventListener('mouseleave', () => btn.style.filter = 'none');
+    btn.addEventListener('mousedown', () => { if (!controlsLocked) btn.style.transform = 'scale(0.97)'; });
+    btn.addEventListener('mouseup', () => btn.style.transform = 'scale(1)');
+    btn.addEventListener('click', onClick);
+    return btn;
+  }
+
+  // Insert mode helpers (mirrors skill/scripts/live/insert-ui.mjs)
 
   function detectInsertAxisFromStyle(style) {
     const display = style?.display || 'block';
@@ -1554,21 +1916,55 @@
     syncPageInteractionCursor();
   }
 
-  let pageInteractionCursorActive = false;
+  /**
+   * Drive the page-level pick / insert cursor through the textContent of one
+   * injected <style>, never by mutating <html> (className or inline style).
+   * Frameworks that server-render the <html>/<body> roots (Next.js App Router)
+   * report a React 19 hydration mismatch when the client adds an attribute the
+   * server HTML never emitted, so a `class`/inline `style` toggled on
+   * `document.documentElement` trips "a tree hydrated but some attributes ...
+   * didn't match" on the next Fast-Refresh re-render. Keying the cursor off a
+   * stable-id <style> keeps the effect off the hydrated host elements (same
+   * shape as the scroll-anchor lock). A falsy cursor clears the rule.
+   */
+  function setPageInteractionCursor(cursor) {
+    let style = document.getElementById(PICK_CURSOR_STYLE_ID);
+    if (!cursor) {
+      if (style) style.textContent = '';
+      return;
+    }
+    if (!style) {
+      style = document.createElement('style');
+      style.id = PICK_CURSOR_STYLE_ID;
+      // Styles the host page, not the chrome - inside the adapter's shadow UI
+      // root (uiAppendStyle's target) these selectors would match nothing.
+      (document.head || document.documentElement).appendChild(style);
+    }
+    style.textContent =
+      '* { cursor: ' + cursor + ' !important; }\n'
+      + '[id^="' + PREFIX + '"],\n'
+      + '[id^="' + PREFIX + '"] * { cursor: revert !important; }';
+  }
 
-  /** Page-level cursor while insert mode is choosing a before/after edge. */
+  /** Page-level cursor while pick or insert mode is targeting page elements. */
   function syncPageInteractionCursor() {
-    let next = '';
-    if (state === 'PICKING' && insertActive) {
-      next = insertHoverAnchor ? cursorForInsertAxis(insertHoverAxis || 'column') : '';
-    }
-    if (next) {
-      document.documentElement.style.cursor = next;
-      pageInteractionCursorActive = true;
-    } else if (pageInteractionCursorActive) {
-      document.documentElement.style.cursor = '';
-      pageInteractionCursorActive = false;
+    let cursor = '';
+    if (state === 'PICKING' && pickActive && !insertActive) {
+      cursor = 'crosshair';
+    } else if (state === 'PICKING' && insertActive && insertHoverAnchor) {
+      cursor = cursorForInsertAxis(insertHoverAxis || 'column');
     }
+    setPageInteractionCursor(cursor);
+  }
+
+  /**
+   * Single entry point for interaction-state transitions. The pick-mode
+   * crosshair is derived from `state`, so a bare `state = ...` assignment
+   * leaves the page cursor out of sync with the mode it advertises.
+   */
+  function setLiveState(next) {
+    state = next;
+    syncPageInteractionCursor();
   }
 
   /** Element used to position the floating bar / shader during a session. */
@@ -1889,69 +2285,35 @@
     }
   }
 
+  /** Stylesheet shared by the replace and insert configure rows. */
+  function ensureConfigureInputStyle() {
+    if (uiGetById(PREFIX + '-configure-input-style')) return;
+    const s = document.createElement('style');
+    s.id = PREFIX + '-configure-input-style';
+    s.textContent =
+      '@keyframes impeccable-configure-voice-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }' +
+      '#' + PREFIX + '-input, #' + PREFIX + '-insert-input { box-sizing: border-box; height: ' + CONFIGURE_ROW_TRACK_H + '; line-height: ' + CONFIGURE_ROW_TRACK_H + '; padding: 0; margin: 0; caret-color: ' + CONFIGURE_PILL_TEXT + '; }' +
+      '#' + PREFIX + '-input::placeholder, #' + PREFIX + '-insert-input::placeholder { color: ' + BP.textDim + '; opacity: 1; }' +
+      '#' + PREFIX + '-configure-voice[data-listening="true"] svg, #' + PREFIX + '-insert-voice[data-listening="true"] svg { animation: impeccable-configure-voice-pulse 1.1s ease-in-out infinite; }' +
+      '@media (prefers-reduced-motion: reduce) { #' + PREFIX + '-configure-voice[data-listening="true"] svg, #' + PREFIX + '-insert-voice[data-listening="true"] svg { animation: none; opacity: 1; } }' +
+      '#' + PREFIX + '-configure-voice:hover, #' + PREFIX + '-insert-voice:hover { background: oklch(27% 0 0); color: ' + BP.accent + '; }';
+    uiAppendStyle(s);
+  }
+
   function buildConfigureRow() {
     const controlsLocked = pendingApplyInFlight === true;
     const row = el('div', {
-      display: 'flex', alignItems: 'center', gap: '6px',
+      display: 'flex', alignItems: 'stretch', width: '100%', height: CONFIGURE_BAR_H,
     });
 
-    // Action pill - dark graphite chip (matches kinpaku-kit .live-demo-ctx-pill)
-    const pill = el('button', {
-      display: 'inline-flex', alignItems: 'center', gap: '4px',
-      padding: '5px 10px', borderRadius: '6px',
-      background: BP.chatSurface, color: BP.text,
-      fontFamily: FONT, fontSize: '12px', fontWeight: '500',
-      border: '1px solid ' + BP.hairline, cursor: 'pointer',
-      transition: 'background 0.12s ease, border-color 0.12s ease, transform 0.1s ease',
-      whiteSpace: 'nowrap', flexShrink: '0',
-    });
-    pill.textContent = actionLabel() + ' \u25BE';
-    pill.disabled = controlsLocked;
-    pill.style.cursor = controlsLocked ? 'not-allowed' : 'pointer';
-    pill.style.opacity = controlsLocked ? '0.58' : '1';
-    if (controlsLocked) pill.title = 'Apply is still running';
-    pill.addEventListener('mouseenter', () => {
-      if (controlsLocked) return;
-      pill.style.background = BP.accentSoft;
-      pill.style.borderColor = BP.accent;
-    });
-    pill.addEventListener('mouseleave', () => {
-      if (controlsLocked) return;
-      pill.style.background = BP.chatSurface;
-      pill.style.borderColor = BP.hairline;
-    });
-    pill.addEventListener('mousedown', () => { if (!controlsLocked) pill.style.transform = 'scale(0.97)'; });
-    pill.addEventListener('mouseup', () => pill.style.transform = 'scale(1)');
-    pill.addEventListener('click', (e) => {
-      e.stopPropagation();
-      if (controlsLocked) { showManualApplyBusyToast(); return; }
-      toggleActionPicker();
-    });
-    row.appendChild(pill);
-
-    // Prompt field - same chat-surface chrome as the bottom Steer bar
-    const inputWrap = el('div', {
-      display: 'inline-flex', alignItems: 'center',
-      flex: '1', minWidth: '0', height: '28px',
-      borderRadius: '7px',
-      background: BP.chatSurface,
-      border: '1px solid ' + BP.hairline,
-      overflow: 'hidden',
-      transition: 'border-color 0.15s ease',
-    });
-    inputWrap.id = PREFIX + '-configure-input-wrap';
+    const inputShell = el('div', configureInputShellStyle());
 
     const input = document.createElement('input');
     input.id = PREFIX + '-input';
     input.type = 'text';
-    input.placeholder = selectedAction === 'impeccable' ? 'describe what you want…' : 'refine further (optional)…';
+    input.placeholder = '';
     input.setAttribute('aria-label', 'Describe the change');
-    Object.assign(input.style, {
-      flex: '1', minWidth: '0', width: '100%',
-      padding: '0 6px', border: 'none', background: 'transparent',
-      fontFamily: FONT, fontSize: '11.5px', color: BP.text,
-      outline: 'none',
-    });
+    Object.assign(input.style, configureInputFieldStyle());
     input.disabled = controlsLocked;
     if (controlsLocked) {
       input.placeholder = 'apply is running...';
@@ -1959,33 +2321,31 @@
       input.style.opacity = '0.58';
     }
 
-    const voiceBtn = el('button', {
-      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
-      padding: '0', boxSizing: 'border-box',
-      width: '28px', height: '28px', flexShrink: '0',
-      border: 'none', background: 'transparent',
-      color: BP.textDim, cursor: 'pointer',
-      transition: 'color 0.12s ease, background 0.12s ease',
+    const action = buildConfigureActionControl({
+      controlsLocked,
+      onClick: (e) => {
+        e.stopPropagation();
+        if (controlsLocked) { showManualApplyBusyToast(); return; }
+        toggleActionPicker();
+      },
     });
-    voiceBtn.id = PREFIX + '-configure-voice';
-    voiceBtn.type = 'button';
-    voiceBtn.setAttribute('aria-label', 'Voice input');
-    voiceBtn.innerHTML = ICON_PAGE_VOICE;
-    voiceBtn.disabled = controlsLocked;
-    voiceBtn.style.cursor = controlsLocked ? 'not-allowed' : 'pointer';
-    voiceBtn.style.opacity = controlsLocked ? '0.58' : '1';
 
-    if (!uiGetById(PREFIX + '-configure-input-style')) {
-      const s = document.createElement('style');
-      s.id = PREFIX + '-configure-input-style';
-      s.textContent =
-        '@keyframes impeccable-configure-voice-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }' +
-        '#' + PREFIX + '-input::placeholder { color: ' + BP.textDim + '; opacity: 1; }' +
-        '#' + PREFIX + '-configure-voice[data-listening="true"] svg { animation: impeccable-configure-voice-pulse 1.1s ease-in-out infinite; }' +
-        '@media (prefers-reduced-motion: reduce) { #' + PREFIX + '-configure-voice[data-listening="true"] svg { animation: none; opacity: 1; } }' +
-        '#' + PREFIX + '-configure-voice:hover { background: oklch(78% 0.12 82 / 0.12); }';
-      uiAppendStyle(s);
-    }
+    const count = buildConfigureCountControl({
+      controlsLocked,
+      onClick: (e) => {
+        e.stopPropagation();
+        if (controlsLocked) { showManualApplyBusyToast(); return; }
+        count.textContent = '\u00D7' + cycleSelectedCount();
+        if (count.matches(':hover')) {
+          showConfigureBarTooltip(count, variantCountTooltipText(selectedCount));
+        }
+      },
+    });
+
+    inputShell.appendChild(buildSelectionPill({ el: selectedElement, controlsLocked }));
+    inputShell.appendChild(input);
+
+    ensureConfigureInputStyle();
 
     input.addEventListener('focus', () => syncConfigureInputChrome());
     input.addEventListener('blur', () => syncConfigureInputChrome());
@@ -1995,81 +2355,33 @@
         e.stopPropagation();
         e.preventDefault();
         input.blur();
-        disableInlineEdit();
-        hideBar();
-        renderEditBadge('hidden');
-        state = 'PICKING';
-        syncPageChatFocus('configure-input-escape');
+        exitConfigureToPicking('configure-input-escape');
         return;
       }
-      // Let arrow keys pass through to the element picker when the input is empty
       if ((e.key === 'ArrowUp' || e.key === 'ArrowDown') && !input.value) return;
       e.stopPropagation();
     });
 
-    voiceBtn.addEventListener('mousedown', (e) => e.stopPropagation());
-    voiceBtn.addEventListener('click', (e) => {
-      e.stopPropagation();
-      if (controlsLocked) { showManualApplyBusyToast(); return; }
-      toggleConfigureVoice();
+    const voiceBtn = buildConfigureVoiceButton({
+      id: PREFIX + '-configure-voice',
+      controlsLocked,
+      onClick: (e) => {
+        e.stopPropagation();
+        if (controlsLocked) { showManualApplyBusyToast(); return; }
+        toggleConfigureVoice();
+      },
     });
 
-    inputWrap.appendChild(input);
-    inputWrap.appendChild(voiceBtn);
-    row.appendChild(inputWrap);
-    syncConfigureInputChrome();
-
-    // Variant count toggle
-    const count = el('button', {
-      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
-      boxSizing: 'border-box', height: '28px', padding: '0 6px',
-      borderRadius: '5px',
-      border: '1px solid ' + BP.hairline, background: 'transparent',
-      fontFamily: MONO, fontSize: '11px', fontWeight: '600',
-      color: BP.textDim, cursor: 'pointer',
-      transition: 'color 0.12s ease, border-color 0.12s ease',
-      flexShrink: '0', whiteSpace: 'nowrap',
+    const go = buildConfigureSubmitButton({
+      controlsLocked,
+      ariaLabel: 'Generate variants',
+      onClick: (e) => { e.stopPropagation(); handleGo(); },
     });
-    count.textContent = '\u00D7' + selectedCount;
-    count.title = 'Variants: click to change';
-    count.disabled = controlsLocked;
-    count.style.cursor = controlsLocked ? 'not-allowed' : 'pointer';
-    count.style.opacity = controlsLocked ? '0.58' : '1';
-    if (controlsLocked) count.title = 'Apply is still running';
-    count.addEventListener('mouseenter', () => { if (!controlsLocked) { count.style.color = BP.text; count.style.borderColor = BP.text; } });
-    count.addEventListener('mouseleave', () => { if (!controlsLocked) { count.style.color = BP.textDim; count.style.borderColor = BP.hairline; } });
-    count.addEventListener('click', (e) => {
-      e.stopPropagation();
-      if (controlsLocked) { showManualApplyBusyToast(); return; }
-      selectedCount = selectedCount >= 4 ? 2 : selectedCount + 1;
-      count.textContent = '\u00D7' + selectedCount;
-    });
-    row.appendChild(count);
 
-    // Go button
-    const go = el('button', {
-      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
-      boxSizing: 'border-box', height: '28px', padding: '0 12px',
-      borderRadius: '6px',
-      border: 'none', background: BP.accent, color: C.ink,
-      fontFamily: FONT, fontSize: '12px', fontWeight: '600',
-      cursor: 'pointer',
-      transition: 'filter 0.12s ease, transform 0.1s ease',
-      flexShrink: '0', whiteSpace: 'nowrap',
-    });
-    go.textContent = 'Go \u2192';
-    go.disabled = controlsLocked;
-    go.style.cursor = controlsLocked ? 'not-allowed' : 'pointer';
-    go.style.opacity = controlsLocked ? '0.58' : '1';
-    if (controlsLocked) go.title = 'Apply is still running';
-    go.addEventListener('mouseenter', () => { if (!controlsLocked) go.style.filter = 'brightness(1.1)'; });
-    go.addEventListener('mouseleave', () => go.style.filter = 'none');
-    go.addEventListener('mousedown', () => { if (!controlsLocked) go.style.transform = 'scale(0.97)'; });
-    go.addEventListener('mouseup', () => go.style.transform = 'scale(1)');
-    go.addEventListener('click', (e) => { e.stopPropagation(); handleGo(); });
-    row.appendChild(go);
-
-    // Auto-focus input after a beat
+    row.appendChild(inputShell);
+    row.appendChild(buildConfigureTrailingCluster([action, count], voiceBtn, go));
+    syncConfigureInputChrome();
+
     if (!controlsLocked) setTimeout(() => input.focus(), 60);
 
     return row;
@@ -2078,34 +2390,20 @@
   function buildInsertConfigureRow() {
     const controlsLocked = pendingApplyInFlight === true;
     const row = el('div', {
-      display: 'flex', alignItems: 'center', gap: '6px',
+      display: 'flex', alignItems: 'stretch', width: '100%', height: CONFIGURE_BAR_H,
     });
+    row.addEventListener('pointerdown', (e) => e.stopPropagation());
+    row.addEventListener('mousedown', (e) => e.stopPropagation());
+    row.addEventListener('click', (e) => e.stopPropagation());
 
-    const inputWrap = el('div', {
-      display: 'inline-flex', alignItems: 'center',
-      flex: '1', minWidth: '0', height: '28px',
-      borderRadius: '7px',
-      background: BP.chatSurface,
-      border: '1px solid ' + BP.hairline,
-      overflow: 'hidden',
-      transition: 'border-color 0.15s ease',
-    });
-    inputWrap.id = PREFIX + '-insert-input-wrap';
-    inputWrap.addEventListener('pointerdown', (e) => e.stopPropagation());
-    inputWrap.addEventListener('mousedown', (e) => e.stopPropagation());
-    inputWrap.addEventListener('click', (e) => e.stopPropagation());
+    const inputShell = el('div', configureInputShellStyle());
 
     const input = document.createElement('input');
     input.id = PREFIX + '-insert-input';
     input.type = 'text';
-    input.placeholder = 'describe what to insert…';
+    input.placeholder = '';
     input.setAttribute('aria-label', 'Describe the new element');
-    Object.assign(input.style, {
-      flex: '1', minWidth: '0', width: '100%',
-      padding: '0 6px', border: 'none', background: 'transparent',
-      fontFamily: FONT, fontSize: '11.5px', color: BP.text,
-      outline: 'none',
-    });
+    Object.assign(input.style, configureInputFieldStyle());
     input.disabled = controlsLocked;
     if (controlsLocked) {
       input.placeholder = 'apply is running...';
@@ -2113,20 +2411,22 @@
       input.style.opacity = '0.58';
     }
 
-    const voiceBtn = el('button', {
-      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
-      padding: '0', boxSizing: 'border-box',
-      width: '28px', height: '28px', flexShrink: '0',
-      border: 'none', background: 'transparent',
-      color: BP.textDim, cursor: 'pointer',
+    const count = buildConfigureCountControl({
+      controlsLocked,
+      onClick: (e) => {
+        e.stopPropagation();
+        if (controlsLocked) { showManualApplyBusyToast(); return; }
+        count.textContent = '\u00D7' + cycleSelectedCount();
+        if (count.matches(':hover')) {
+          showConfigureBarTooltip(count, variantCountTooltipText(selectedCount));
+        }
+      },
     });
-    voiceBtn.id = PREFIX + '-insert-voice';
-    voiceBtn.type = 'button';
-    voiceBtn.setAttribute('aria-label', 'Voice input');
-    voiceBtn.innerHTML = ICON_PAGE_VOICE;
-    voiceBtn.disabled = controlsLocked;
-    voiceBtn.style.cursor = controlsLocked ? 'not-allowed' : 'pointer';
-    voiceBtn.style.opacity = controlsLocked ? '0.58' : '1';
+
+    inputShell.appendChild(buildSelectionPill({ el: selectedElement, controlsLocked }));
+    inputShell.appendChild(input);
+
+    ensureConfigureInputStyle();
 
     input.addEventListener('input', () => syncInsertCreateButton());
     input.addEventListener('pointerdown', (e) => e.stopPropagation());
@@ -2148,48 +2448,31 @@
       }
       e.stopPropagation();
     });
-    voiceBtn.addEventListener('mousedown', (e) => e.stopPropagation());
-    voiceBtn.addEventListener('click', (e) => {
-      e.stopPropagation();
-      if (controlsLocked) { showManualApplyBusyToast(); return; }
-      toggleConfigureVoice();
-    });
-
-    inputWrap.appendChild(input);
-    inputWrap.appendChild(voiceBtn);
-    row.appendChild(inputWrap);
+    input.addEventListener('focus', () => syncConfigureInputChrome());
+    input.addEventListener('blur', () => syncConfigureInputChrome());
 
-    const count = el('button', {
-      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
-      boxSizing: 'border-box', height: '28px', padding: '0 6px',
-      borderRadius: '5px',
-      border: '1px solid ' + BP.hairline, background: 'transparent',
-      fontFamily: MONO, fontSize: '11px', fontWeight: '600',
-      color: BP.textDim, cursor: 'pointer', flexShrink: '0', whiteSpace: 'nowrap',
-    });
-    count.textContent = '\u00D7' + selectedCount;
-    count.disabled = controlsLocked;
-    count.style.cursor = controlsLocked ? 'not-allowed' : 'pointer';
-    count.style.opacity = controlsLocked ? '0.58' : '1';
-    count.addEventListener('click', (e) => {
-      e.stopPropagation();
-      if (controlsLocked) { showManualApplyBusyToast(); return; }
-      selectedCount = selectedCount >= 4 ? 2 : selectedCount + 1;
-      count.textContent = '\u00D7' + selectedCount;
+    const voiceBtn = buildConfigureVoiceButton({
+      id: PREFIX + '-insert-voice',
+      controlsLocked,
+      onClick: (e) => {
+        e.stopPropagation();
+        if (controlsLocked) { showManualApplyBusyToast(); return; }
+        toggleConfigureVoice();
+      },
     });
-    row.appendChild(count);
 
-    const create = el('button', {
-      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
-      boxSizing: 'border-box', height: '28px', padding: '0 12px',
-      borderRadius: '6px',
-      border: 'none', background: BP.accent, color: C.ink,
-      fontFamily: FONT, fontSize: '12px', fontWeight: '600',
-      flexShrink: '0', whiteSpace: 'nowrap',
+    const create = buildConfigureSubmitButton({
+      controlsLocked,
+      ariaLabel: 'Create variants',
+      onClick: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (controlsLocked) { showManualApplyBusyToast(); return; }
+        if (!isInsertCreateEnabled(create)) return;
+        handleInsertCreate();
+      },
     });
     create.id = PREFIX + '-insert-create';
-    create.textContent = 'Create \u2192';
-    create.disabled = controlsLocked;
     create.addEventListener('mouseenter', () => {
       if (controlsLocked) return;
       if (isInsertCreateEnabled(create)) {
@@ -2199,15 +2482,10 @@
       showInsertCreateTooltip(create, insertCreateDisabledReason(insertCreateGateState(input)));
     });
     create.addEventListener('mouseleave', hideInsertCreateTooltip);
-    create.addEventListener('click', (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-      if (controlsLocked) { showManualApplyBusyToast(); return; }
-      if (!isInsertCreateEnabled(create)) return;
-      handleInsertCreate();
-    });
-    row.appendChild(create);
+    row.appendChild(inputShell);
+    row.appendChild(buildConfigureTrailingCluster([count], voiceBtn, create));
     syncInsertCreateButton(create, input);
+    syncConfigureInputChrome();
     if (!controlsLocked) setTimeout(() => input.focus(), 60);
     return row;
   }
@@ -2404,12 +2682,12 @@
     });
     const check = el('span', {
       fontSize: '15px', lineHeight: '1', flexShrink: '0',
-      color: 'oklch(45% 0.15 145)',
+      color: 'oklch(45% 0.18 145)',
     });
     check.textContent = '\u2713';
     row.appendChild(check);
     const label = el('span', {
-      fontSize: '12px', color: 'oklch(35% 0.1 145)', fontWeight: '600',
+      fontSize: '12px', color: 'oklch(49% 0.08 188)', fontWeight: '600',
     });
     label.textContent = 'Variant applied';
     row.appendChild(label);
@@ -2497,7 +2775,7 @@
       position: 'fixed', zIndex: Z.picker,
       display: 'none', opacity: '0',
       transform: 'scale(0.96) translateY(4px)',
-      transformOrigin: 'bottom left',
+      transformOrigin: 'bottom right',
       transition: 'opacity 0.18s ' + EASE + ', transform 0.2s ' + EASE,
       background: P.surface,
       border: '1px solid ' + P.border,
@@ -2573,14 +2851,18 @@
       chip.style.background = isActive ? P.accentSoft : 'transparent';
       chip.style.color = isActive ? P.accent : P.text;
     });
-    // Position above the bar
+    // Position above the bar, right-aligned to the configure bar edge.
     const barRect = barEl.getBoundingClientRect();
     const pickerH = 170; // approximate; grows with icon + label rows
     let top = barRect.top - pickerH - 6;
     if (top < 8) top = barRect.bottom + 6;
+    pickerEl.style.display = 'block';
+    const pickerW = pickerEl.offsetWidth;
+    let left = barRect.right - pickerW;
+    left = Math.max(8, Math.min(left, window.innerWidth - pickerW - 8));
     Object.assign(pickerEl.style, {
-      top: top + 'px', left: barRect.left + 'px',
-      display: 'block',
+      top: top + 'px',
+      left: left + 'px',
     });
     requestAnimationFrame(() => {
       pickerEl.style.opacity = '1';
@@ -3063,7 +3345,7 @@
 
   function enterEditingMode() {
     if (pendingApplyInFlight) { showManualApplyBusyToast(); return; }
-    state = 'EDITING';
+    setLiveState('EDITING');
     hideBar();
     hideAnnotOverlay();
     renderEditBadge('editing');
@@ -3096,7 +3378,7 @@
   function cancelEditing() {
     restoreInlineEditDrafts();
     disableInlineEdit();
-    state = 'CONFIGURING';
+    setLiveState('CONFIGURING');
     showBar('configure');
     showAnnotOverlay(selectedElement);
     renderEditBadge('idle');
@@ -3110,12 +3392,33 @@
     hideAnnotOverlay();
     clearAnnotations();
     renderEditBadge('hidden');
-    state = 'PICKING';
+    setLiveState('PICKING');
     hoveredElement = null;
     hideHighlight();
     syncPageChatFocus('editing-outside-click');
   }
 
+  function teardownConfigureChrome() {
+    hideConfigureBarTooltip();
+    // hideBar() restores unsaved EDITING drafts before it disables inline
+    // edit; disabling here first would wipe the draft metadata it needs.
+    hideBar();
+    stopScrollTracking();
+    hideAnnotOverlay();
+    clearAnnotations();
+    renderEditBadge('hidden');
+  }
+
+  function exitConfigureToPicking(reason, opts = {}) {
+    teardownConfigureChrome();
+    setLiveState('PICKING');
+    if (opts.clearHover) {
+      hoveredElement = null;
+      hideHighlight();
+    }
+    syncPageChatFocus(reason);
+  }
+
   // Prefer the leaf's own id/class; if it has neither (e.g. a bare <em>),
   // climb to the nearest ancestor with one. The CLI uses tag+class together,
   // so tag must come from the same node as the locator.
@@ -3337,7 +3640,7 @@
       updatePendingCounter(stashResult.pendingCount || 0);
       maybeShowFirstSaveToast();
       disableInlineEdit();
-      state = 'CONFIGURING';
+      setLiveState('CONFIGURING');
       showBar('configure');
       showAnnotOverlay(selectedElement);
       renderEditBadge('idle');
@@ -4017,6 +4320,12 @@
   // Edit content badge - floating button at element top-right to enter EDITING mode
   //
 
+  const EDIT_COPY_LABEL = 'Edit copy';
+  const EDIT_COPY_ICON =
+    '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">' +
+    '<path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/>' +
+    '</svg>';
+
   function usesShadowChromeRoot() {
     const root = liveUiRoot();
     return root && root !== document.body && root.host && root.host.id === PREFIX + '-root';
@@ -4167,7 +4476,7 @@
         editBadgeProxyRoot.appendChild(proxy);
         editBadgeProxyByTarget.set(target, proxy);
       }
-      proxy.title = target.title || target.textContent || 'Edit copy';
+      proxy.title = target.title || target.getAttribute('aria-label') || target.textContent || EDIT_COPY_LABEL;
       styleEditBadgeProxy(proxy, target);
     }
   }
@@ -4207,13 +4516,16 @@
     }
     const r = selectedElement.getBoundingClientRect();
     const bw = editBadgeEl.offsetWidth;
+    // Match showHighlight's 2px outset so the badge right edge lines up with the outline.
+    const outlineRight = r.right + 2;
     editBadgeEl.style.top = Math.max(4, r.top - 28) + 'px';
-    editBadgeEl.style.left = Math.min(window.innerWidth - bw - 4, r.right - bw) + 'px';
+    editBadgeEl.style.left = Math.min(window.innerWidth - bw - 4, outlineRight - bw) + 'px';
     syncEditBadgeHitProxies();
   }
 
   function renderEditBadge(mode) {
     if (mode === 'hidden' || !editBadgeEl) {
+      hideConfigureBarTooltip();
       if (editBadgeEl) editBadgeEl.style.display = 'none';
       syncEditBadgeHitProxies();
       return;
@@ -4251,16 +4563,36 @@
       const disabled = mode === 'idle-disabled';
       editBadgeEl.innerHTML = '';
       const btn = document.createElement('button');
-      btn.textContent = 'Edit copy';
-      Object.assign(btn.style, calloutStyle(disabled ? MUTED : ACCENT, disabled ? HAIRLINE : ACCENT));
+      btn.type = 'button';
+      btn.innerHTML = EDIT_COPY_ICON;
+      btn.setAttribute('aria-label', EDIT_COPY_LABEL);
+      Object.assign(btn.style, calloutStyle(
+        disabled ? MUTED : PRIMARY_TEXT,
+        disabled ? HAIRLINE : ACCENT,
+      ));
+      Object.assign(btn.style, {
+        padding: '4px',
+        minWidth: '22px',
+        width: '22px',
+        height: '22px',
+        minHeight: '22px',
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        lineHeight: '0',
+        letterSpacing: '0',
+        background: disabled ? SURFACE : ACCENT,
+      });
       if (disabled) {
         btn.style.cursor = 'not-allowed';
         btn.style.opacity = '0.55';
         btn.disabled = true;
-        btn.title = 'Edit copy is disabled while the current copy edit is applying';
+        const disabledTip = EDIT_COPY_LABEL + ' is disabled while the current copy edit is applying';
+        btn.addEventListener('mouseenter', () => showConfigureBarTooltip(btn, disabledTip));
+        btn.addEventListener('mouseleave', hideConfigureBarTooltip);
       } else {
-        btn.addEventListener('mouseenter', () => { btn.style.background = ACCENT; btn.style.color = PRIMARY_TEXT; });
-        btn.addEventListener('mouseleave', () => { btn.style.background = SURFACE; btn.style.color = ACCENT; });
+        btn.addEventListener('mouseenter', () => showConfigureBarTooltip(btn, EDIT_COPY_LABEL));
+        btn.addEventListener('mouseleave', hideConfigureBarTooltip);
         btn.onclick = enterEditingMode;
       }
       editBadgeEl.appendChild(btn);
@@ -4276,9 +4608,8 @@
       cancel.onclick = cancelEditing;
       const save = document.createElement('button');
       save.textContent = 'Save';
-      Object.assign(save.style, calloutStyle(ACCENT));
-      save.addEventListener('mouseenter', () => { save.style.background = ACCENT; save.style.color = PRIMARY_TEXT; });
-      save.addEventListener('mouseleave', () => { save.style.background = SURFACE; save.style.color = ACCENT; });
+      Object.assign(save.style, calloutStyle(PRIMARY_TEXT, ACCENT));
+      save.style.background = ACCENT;
       save.onclick = applyEditing;
       editBadgeEl.append(cancel, save);
     }
@@ -4514,29 +4845,142 @@
     return doc.getElementById('impeccable-anchor')?.firstElementChild || null;
   }
 
+  function normalizeElementClassName(el) {
+    if (!el) return '';
+    const raw = el.getAttribute?.('class');
+    if (typeof raw === 'string') return raw.trim();
+    if (el.className != null) {
+      const cls = el.className;
+      if (typeof cls === 'string') return cls.trim();
+      if (typeof cls.baseVal === 'string') return cls.baseVal.trim();
+    }
+    return '';
+  }
+
+  function buildPickedAnchorSnapshot(el) {
+    if (!el || el.nodeType !== 1) return null;
+    return {
+      tag: el.tagName,
+      id: el.id || '',
+      classes: [...el.classList],
+      text: (el.textContent || '').trim().slice(0, 120),
+    };
+  }
+
+  function isUsableInjectionAnchor(el) {
+    return !!el
+      && el.parentElement
+      && document.body.contains(el)
+      && !own(el)
+      && !el.closest?.('[data-impeccable-variants]');
+  }
+
+  function elementMatchesOriginalMarkup(liveEl, origContent) {
+    if (!isUsableInjectionAnchor(liveEl) || !origContent) return false;
+    // A matching id is decisive on its own: ids are unique, while the source
+    // tag and class names may not survive the build (component tags, hashed
+    // CSS-module class names).
+    if (origContent.id) return liveEl.id === origContent.id;
+    if (liveEl.tagName !== origContent.tagName) return false;
+
+    const origClasses = normalizeElementClassName(origContent).split(/\s+/).filter(Boolean)
+      .filter((name) => /^[A-Za-z_-][\w-]*$/.test(name));
+    if (origClasses.length > 0 && !origClasses.every((name) => liveEl.classList.contains(name))) return false;
+
+    const origText = (origContent.textContent || '').trim();
+    if (origClasses.length === 0 && origText.length >= 4) {
+      const liveText = (liveEl.textContent || '').trim();
+      const needle = origText.slice(0, Math.min(40, origText.length));
+      if (!liveText.includes(needle) && !(liveText.length >= 4 && origText.includes(liveText.slice(0, 40)))) return false;
+    }
+    return true;
+  }
+
+  function findLiveElementFromAnchorSnapshot(snapshot) {
+    if (!snapshot) return null;
+    const tag = String(snapshot.tag || '').toLowerCase();
+    if (!tag) return null;
+    if (snapshot.id) {
+      const byId = document.getElementById(snapshot.id);
+      if (isUsableInjectionAnchor(byId)) return byId;
+    }
+    const classes = (snapshot.classes || []).filter((name) => /^[A-Za-z_-][\w-]*$/.test(name));
+    const needle = (snapshot.text || '').trim();
+    const candidates = [...document.getElementsByTagName(tag)];
+    for (const c of candidates) {
+      if (!isUsableInjectionAnchor(c)) continue;
+      if (classes.length > 0 && !classes.every((name) => c.classList.contains(name))) continue;
+      if (!snapshot.id && classes.length === 0 && needle.length >= 4) {
+        const text = (c.textContent || '').trim();
+        if (!text.includes(needle.slice(0, 40)) && !(text.length >= 4 && needle.includes(text.slice(0, 40)))) continue;
+      }
+      return c;
+    }
+    return null;
+  }
+
   function findLiveElementForOriginalMarkup(originalMarkup) {
     const origContent = parseOriginalMarkupElement(originalMarkup);
     if (!origContent) return null;
 
     const tag = origContent.tagName.toLowerCase();
-    const cls = origContent.className;
-    let liveEl = null;
+    const cls = normalizeElementClassName(origContent);
+    const candidates = [...document.getElementsByTagName(tag)];
+
     if (origContent.id) {
-      liveEl = document.getElementById(origContent.id);
-    } else if (cls) {
-      const candidates = document.querySelectorAll(tag + '.' + cls.split(' ')[0]);
-      for (const c of candidates) {
-        if (c.className === cls && !own(c)) { liveEl = c; break; }
-      }
-      if (!liveEl) {
-        const expectedClasses = String(cls).split(/\s+/).filter(Boolean);
+      const byId = document.getElementById(origContent.id);
+      if (elementMatchesOriginalMarkup(byId, origContent)) return byId;
+    }
+
+    if (cls) {
+      const expectedClasses = cls.split(/\s+/).filter((name) => /^[A-Za-z_-][\w-]*$/.test(name));
+      if (expectedClasses.length > 0) {
         for (const c of candidates) {
-          if (own(c)) continue;
-          if (expectedClasses.every((name) => c.classList.contains(name))) { liveEl = c; break; }
+          if (!isUsableInjectionAnchor(c)) continue;
+          if (expectedClasses.every((name) => c.classList.contains(name))) return c;
         }
       }
     }
-    return liveEl;
+
+    const origText = (origContent.textContent || '').trim();
+    if (origText.length >= 4) {
+      const needle = origText.slice(0, 40);
+      let best = null;
+      let bestLen = Infinity;
+      for (const c of candidates) {
+        if (!isUsableInjectionAnchor(c)) continue;
+        const text = (c.textContent || '').trim();
+        if (!text.includes(needle) && !(text.length >= 4 && origText.includes(text.slice(0, 40)))) continue;
+        if (text.length < bestLen) { best = c; bestLen = text.length; }
+      }
+      if (best) return best;
+    }
+
+    return null;
+  }
+
+  function resolveLiveInjectionAnchor(originalMarkup) {
+    const origContent = parseOriginalMarkupElement(originalMarkup);
+    if (!origContent) return null;
+
+    const attempts = [
+      selectedElement,
+      findLiveElementFromAnchorSnapshot(pickedAnchorSnapshot),
+      findLiveElementForOriginalMarkup(originalMarkup),
+    ];
+    for (const candidate of attempts) {
+      if (elementMatchesOriginalMarkup(candidate, origContent)) return candidate;
+    }
+
+    if (isUsableInjectionAnchor(selectedElement) && selectedElement.tagName === origContent.tagName) {
+      const origClasses = normalizeElementClassName(origContent).split(/\s+/).filter(Boolean);
+      if (origContent.id && selectedElement.id === origContent.id) return selectedElement;
+      if (origClasses.length === 0) return selectedElement;
+      const overlap = origClasses.filter((name) => selectedElement.classList.contains(name));
+      if (overlap.length >= 1) return selectedElement;
+    }
+
+    return null;
   }
 
   function isSvelteInsertManifest(manifest) {
@@ -4548,7 +4992,45 @@
       const anchor = findInsertAnchorInDom();
       if (anchor?.parentElement) return anchor;
     }
-    return findLiveElementForOriginalMarkup(manifest?.originalMarkup || manifest?.anchorMarkup || '');
+    return resolveLiveInjectionAnchor(manifest?.originalMarkup || manifest?.anchorMarkup || '');
+  }
+
+  function waitForVariantAnchorAndRetry({ filePath, sessionId, srcWrapper, checkpointReason }) {
+    if (pendingVariantAnchorRetryObserver) pendingVariantAnchorRetryObserver.disconnect();
+    const origContent = srcWrapper?.querySelector('[data-impeccable-variant="original"] > :first-child');
+    if (!origContent) return;
+    const originalMarkup = origContent.outerHTML;
+
+    pendingVariantAnchorRetryObserver = new MutationObserver(() => {
+      // Retry once either the anchor element or the session wrapper shows up.
+      // A wrapper can land incomplete ("wrap HMR landed, variant insert did
+      // not"); injectVariantsFromSource owns both cases - it replaces an
+      // existing wrapper from source and clears recoveryWaitingForAnchor.
+      const wrapperLanded = !!document.querySelector('[data-impeccable-variants="' + sessionId + '"]');
+      if (!wrapperLanded) {
+        const liveEl = resolveLiveInjectionAnchor(originalMarkup);
+        if (!liveEl?.parentElement) return;
+      }
+      pendingVariantAnchorRetryObserver.disconnect();
+      pendingVariantAnchorRetryObserver = null;
+      injectVariantsFromSource(filePath, sessionId);
+    });
+    pendingVariantAnchorRetryObserver.observe(document.body, { childList: true, subtree: true });
+    if (checkpointReason) queueCheckpoint(checkpointReason);
+  }
+
+  function enterRecoveryWaitingForAnchor({ filePath, sessionId, srcWrapper, checkpointReason, trackScroll }) {
+    recoveryWaitingForAnchor = true;
+    selectedElement = document.body;
+    setLiveState('GENERATING');
+    showBar('generating');
+    if (trackScroll !== false) startScrollTracking();
+    saveSession();
+    if (srcWrapper && filePath && sessionId) {
+      waitForVariantAnchorAndRetry({ filePath, sessionId, srcWrapper, checkpointReason });
+    } else if (checkpointReason) {
+      queueCheckpoint(checkpointReason);
+    }
   }
 
   function loadSvelteRuntime(runtimeModule) {
@@ -4584,6 +5066,157 @@
     }
   }
 
+  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;
+  }
+
+  function removeSvelteComponentVariantStyle(session = svelteComponentSession) {
+    const style = session?.styleEl;
+    if (style?.parentNode) style.parentNode.removeChild(style);
+    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 = '';
+    let i = 0;
+    while (i < css.length) {
+      const open = css.indexOf('{', i);
+      if (open === -1) {
+        out += css.slice(i);
+        break;
+      }
+      const semi = css.indexOf(';', i);
+      if (semi !== -1 && semi < open) {
+        out += css.slice(i, semi + 1);
+        i = semi + 1;
+        continue;
+      }
+      const prelude = css.slice(i, open).trim();
+      const close = findMatchingCssBrace(css, open);
+      if (close === -1) {
+        out += css.slice(i);
+        break;
+      }
+      const body = css.slice(open + 1, close);
+      if (shouldScopeNestedCssAtRule(prelude)) {
+        out += prelude + ' {\n' + scopeCssBlock(body, prefix) + '\n}';
+      } else if (prelude.startsWith('@')) {
+        out += prelude + ' {' + body + '}';
+      } else {
+        out += prefixCssSelectors(prelude, prefix) + ' {' + body + '}';
+      }
+      i = close + 1;
+    }
+    return out;
+  }
+
+  function shouldScopeNestedCssAtRule(prelude) {
+    return /^@(media|supports|container|layer)\b/i.test(prelude || '');
+  }
+
+  function findMatchingCssBrace(css, openIndex) {
+    let depth = 0;
+    let quote = '';
+    for (let i = openIndex; i < css.length; i++) {
+      const ch = css[i];
+      const prev = css[i - 1];
+      if (quote) {
+        if (ch === quote && prev !== '\\') quote = '';
+        continue;
+      }
+      if (ch === '"' || ch === "'") {
+        quote = ch;
+      } else if (ch === '{') {
+        depth++;
+      } else if (ch === '}') {
+        depth--;
+        if (depth === 0) return i;
+      }
+    }
+    return -1;
+  }
+
+  function prefixCssSelectors(prelude, prefix) {
+    return splitCssSelectorList(prelude)
+      .map((selector) => {
+        const s = unwrapSvelteGlobalSelector(selector.trim());
+        if (!s) return '';
+        if (s.startsWith(prefix.trim())) return s;
+        if (s.startsWith(':host')) return s.replace(/^:host\b/, prefix.trim());
+        return prefix + s;
+      })
+      .filter(Boolean)
+      .join(', ');
+  }
+
+  function splitCssSelectorList(selectorList) {
+    const selectors = [];
+    let start = 0;
+    let depth = 0;
+    let quote = '';
+    for (let i = 0; i < selectorList.length; i++) {
+      const ch = selectorList[i];
+      const prev = selectorList[i - 1];
+      if (quote) {
+        if (ch === quote && prev !== '\\') quote = '';
+        continue;
+      }
+      if (ch === '"' || ch === "'") {
+        quote = ch;
+      } else if (ch === '(' || ch === '[') {
+        depth++;
+      } else if ((ch === ')' || ch === ']') && depth > 0) {
+        depth--;
+      } else if (ch === ',' && depth === 0) {
+        selectors.push(selectorList.slice(start, i));
+        start = i + 1;
+      }
+    }
+    selectors.push(selectorList.slice(start));
+    return selectors;
+  }
+
+  function unwrapSvelteGlobalSelector(selector) {
+    return selector.replace(/:global\(([^()]*)\)/g, '$1');
+  }
+
   function buildSveltePropValuesFromLiveElement(liveEl, manifest) {
     const contract = manifest?.propContract || [];
     const values = {};
@@ -4620,6 +5253,7 @@
       });
       svelteComponentSession.mountedVariant = variantNum;
       svelteComponentSession.runtime = runtime;
+      await applySvelteComponentVariantStyle(variantNum);
       if (state === 'CYCLING') syncCyclingControls();
       const nextAnchor = getMountedSvelteComponentAnchor(svelteComponentSession);
       if (nextAnchor) {
@@ -4653,6 +5287,7 @@
   function teardownSvelteComponentSession(restoreOriginal) {
     if (!svelteComponentSession) return;
     const { wrapperEl, detachedOriginal, runtime, mountedInstance } = svelteComponentSession;
+    removeSvelteComponentVariantStyle(svelteComponentSession);
     if (mountedInstance && runtime?.unmount) {
       try { runtime.unmount(mountedInstance); } catch { /* non-fatal */ }
     }
@@ -4692,6 +5327,7 @@
     if (mountedInstance && runtime?.unmount) {
       try { runtime.unmount(mountedInstance); } catch { /* non-fatal */ }
     }
+    removeSvelteComponentVariantStyle(svelteComponentSession);
     wrapperEl.parentElement.replaceChild(committed, wrapperEl);
     svelteComponentSession = null;
     svelteRuntimePromise = null;
@@ -4715,7 +5351,7 @@
         previewFile: manifestPath,
         previewMode: 'svelte-component',
       });
-      if (state !== 'CYCLING') state = 'GENERATING';
+      if (state !== 'CYCLING') setLiveState('GENERATING');
 
       const existingWrapper = document.querySelector('[data-impeccable-variants="' + sessionId + '"]');
       if (existingWrapper && svelteComponentSession?.sessionId === sessionId) {
@@ -4725,7 +5361,7 @@
         expectedVariants = arrivedVariants;
         visibleVariant = visibleVariant > 0 && visibleVariant <= arrivedVariants ? visibleVariant : 1;
         await mountSvelteComponentVariant(visibleVariant || 1);
-        state = 'CYCLING';
+        setLiveState('CYCLING');
         showOrUpdateCyclingBar();
         saveSession();
         return;
@@ -4741,15 +5377,8 @@
         visibleVariant = visibleVariant > 0 && visibleVariant <= arrivedVariants
           ? visibleVariant
           : (savedVisibleVariant > 0 && savedVisibleVariant <= arrivedVariants ? savedVisibleVariant : 1);
-        selectedElement = document.body;
-        state = 'GENERATING';
-        recoveryWaitingForAnchor = true;
-        showBar('generating');
-        startScrollTracking();
-        saveSession();
-        queueCheckpoint('svelte_component_anchor_missing');
+        enterRecoveryWaitingForAnchor({ checkpointReason: 'svelte_component_anchor_missing', trackScroll: true });
         waitForSvelteComponentTargetAndRetry({ manifestPath, sessionId, manifest });
-        showToast('Variants ready. Reveal the selected element to resume.', 15000);
         return;
       }
 
@@ -4812,7 +5441,7 @@
       }
 
       selectedElement = mountTarget.firstElementChild || mountTarget;
-      state = 'CYCLING';
+      setLiveState('CYCLING');
       recoveryWaitingForAnchor = false;
       hideShaderOverlay();
       showOrUpdateCyclingBar();
@@ -4861,6 +5490,7 @@
     hideShaderOverlay();
     if (variantObserver) { variantObserver.disconnect(); variantObserver = null; }
     if (pendingSvelteComponentRetryObserver) { pendingSvelteComponentRetryObserver.disconnect(); pendingSvelteComponentRetryObserver = null; }
+    if (pendingVariantAnchorRetryObserver) { pendingVariantAnchorRetryObserver.disconnect(); pendingVariantAnchorRetryObserver = null; }
     stopScrollLock();
     clearSession();
     clearHandled();
@@ -4870,7 +5500,7 @@
     arrivedVariants = 0;
     visibleVariant = 0;
     selectedElement = null;
-    state = 'PICKING';
+    setLiveState('PICKING');
     hideBar();
     if (message) showToast(message, 5000);
   }
@@ -4901,7 +5531,7 @@
         const block = startIdx !== -1 && endIdx !== -1 && endIdx > startIdx
           ? html.slice(startIdx + startMark.length, endIdx).trim()
           : html;
-        const doc = parser.parseFromString(block, 'text/html');
+        const doc = parser.parseFromString(normalizeSourceFallbackBlock(block, filePath), 'text/html');
         srcWrapper = doc.querySelector('[data-impeccable-variants="' + sessionId + '"]');
         if (!srcWrapper) {
           console.warn('[impeccable] Variant wrapper not found in source file.');
@@ -4919,21 +5549,26 @@
           const origContent = srcWrapper.querySelector('[data-impeccable-variant="original"] > :first-child');
           if (!origContent) return;
 
-          const liveEl = findLiveElementForOriginalMarkup(origContent.outerHTML);
+          const liveEl = resolveLiveInjectionAnchor(origContent.outerHTML);
           if (!liveEl) {
             console.warn('[impeccable] Could not find original element in live DOM.');
-            selectedElement = document.body;
-            recoveryWaitingForAnchor = true;
-            state = 'GENERATING';
-            showBar('generating');
-            saveSession();
-            showToast('Variants ready. Reveal the selected element to resume.', 15000);
+            enterRecoveryWaitingForAnchor({
+              filePath,
+              sessionId,
+              srcWrapper,
+              checkpointReason: 'variant_anchor_missing',
+              trackScroll: false,
+            });
             return;
           }
 
           liveEl.parentElement.replaceChild(wrapper, liveEl);
         }
         recoveryWaitingForAnchor = false;
+        if (pendingVariantAnchorRetryObserver) {
+          pendingVariantAnchorRetryObserver.disconnect();
+          pendingVariantAnchorRetryObserver = null;
+        }
 
         // Update state: count variants, preserving the user's current variant
         // when a late HMR/source reinjection lands after they have cycled.
@@ -4954,7 +5589,7 @@
         // Update selectedElement to the visible variant's content
         selectedElement = pickVariantContent(wrapper, visibleVariant) || wrapper.parentElement;
 
-        state = 'CYCLING';
+        setLiveState('CYCLING');
         recoveryWaitingForAnchor = false;
         hideShaderOverlay();
         showOrUpdateCyclingBar();
@@ -4970,6 +5605,44 @@
       });
   }
 
+  function normalizeSourceFallbackBlock(block, filePath) {
+    if (!/\.[cm]?[jt]sx$/i.test(String(filePath || ''))) return block;
+    return String(block)
+      .replace(
+        /<style\b([^>]*)>\s*\{\s*`([\s\S]*?)`\s*\}\s*<\/style>/g,
+        (_match, attrs, css) => '<style' + attrs + '>' + css + '</style>',
+      )
+      .replace(/\bclassName\s*=\s*\{\s*`([^`]*?)`\s*\}/g, (_match, value) => {
+        const literalClasses = value.replace(/\$\{[^}]*\}/g, ' ').replace(/\s+/g, ' ').trim();
+        return literalClasses ? 'class="' + escapeHtml(literalClasses) + '"' : '';
+      })
+      .replace(/\bclassName\s*=/g, 'class=')
+      .replace(/\sstyle=\{\{([\s\S]*?)\}\}/g, (_match, body) => {
+        const css = jsxStyleObjectToCss(body);
+        return css ? ' style="' + escapeHtml(css) + '"' : '';
+      });
+  }
+
+  function jsxStyleObjectToCss(body) {
+    const declarations = [];
+    const re = /(["'][^"']+["']|[A-Za-z_$][\w$-]*)\s*:\s*(?:"([^"]*)"|'([^']*)'|(-?\d+(?:\.\d+)?))/g;
+    let match;
+    while ((match = re.exec(String(body || '')))) {
+      const prop = jsxStylePropToCss(match[1]);
+      const value = match[2] ?? match[3] ?? match[4] ?? '';
+      if (!prop || value === '') continue;
+      declarations.push(prop + ': ' + value);
+    }
+    return declarations.join('; ');
+  }
+
+  function jsxStylePropToCss(prop) {
+    let out = String(prop || '').trim().replace(/^["']|["']$/g, '');
+    if (!out) return '';
+    if (out.startsWith('--')) return out;
+    return out.replace(/[A-Z]/g, (ch) => '-' + ch.toLowerCase()).replace(/^-ms-/, '-ms-');
+  }
+
   function buildSvelteExpressionTextMap(sourceOriginal, liveOriginal) {
     const map = new Map();
     if (!sourceOriginal || !liveOriginal) return map;
@@ -5143,10 +5816,22 @@
 
     try { history.scrollRestoration = 'manual'; } catch {}
 
-    const prevHtmlAnchor = document.documentElement.style.overflowAnchor;
-    const prevBodyAnchor = document.body.style.overflowAnchor;
-    document.documentElement.style.overflowAnchor = 'none';
-    document.body.style.overflowAnchor = 'none';
+    // Suppress the browser's scroll-anchoring on the scroll root so it can't
+    // fight our manual scroll correction. Apply this as a stylesheet rule, not
+    // as inline `style` on <html>/<body>: those elements are server-rendered by
+    // frameworks like Next.js App Router, and mutating their inline style makes
+    // React 19 report a hydration mismatch on the next Fast-Refresh re-render.
+    // A <style> rule has the same computed effect without touching any hydrated
+    // element's attributes. Like the inline version, it is recreated on every
+    // startScrollLock call, so reload survival (driven by the persisted scroll
+    // key) is unaffected.
+    let anchorLockStyle = document.getElementById(SCROLL_ANCHOR_LOCK_ID);
+    if (!anchorLockStyle) {
+      anchorLockStyle = document.createElement('style');
+      anchorLockStyle.id = SCROLL_ANCHOR_LOCK_ID;
+      anchorLockStyle.textContent = 'html,body{overflow-anchor:none !important;}';
+      (document.head || document.documentElement).appendChild(anchorLockStyle);
+    }
 
     const correct = (why) => {
       scrollLockRaf = null;
@@ -5181,8 +5866,7 @@
 
     scrollLockAbort = new AbortController();
     scrollLockAbort.signal.addEventListener('abort', () => {
-      document.documentElement.style.overflowAnchor = prevHtmlAnchor;
-      document.body.style.overflowAnchor = prevBodyAnchor;
+      document.getElementById(SCROLL_ANCHOR_LOCK_ID)?.remove();
     }, { once: true });
     const sig = { signal: scrollLockAbort.signal };
     // Track whether the most recent scroll came from a user gesture. We
@@ -5322,7 +6006,7 @@
       if (expected > 0) expectedVariants = expected;
 
       if (arrivedVariants >= expectedVariants && expectedVariants > 0) {
-        state = 'CYCLING';
+        setLiveState('CYCLING');
         recoveryWaitingForAnchor = false;
         hideShaderOverlay();
         if (wrapper.dataset.impeccableMode === 'insert') finalizeInsertSession();
@@ -5408,7 +6092,8 @@
           syncAgentPollingUi(!!msg.agentPolling);
           startAgentStatusPoll();
           restoreFromActiveSessions(msg.activeSessions, 'sse_connected');
-          if (state === 'IDLE' && (pickActive || insertActive)) state = 'PICKING';
+          if (state === 'IDLE' && (pickActive || insertActive)) setLiveState('PICKING');
+          syncPageInteractionCursor();
           syncPageChatFocus('sse-connected');
           break;
         case 'agent_polling':
@@ -5434,7 +6119,7 @@
           // Variants already arrived via HMR → normal transition.
           if (arrivedVariants >= expectedVariants && expectedVariants > 0) {
             if (state === 'GENERATING') {
-              state = 'CYCLING';
+              setLiveState('CYCLING');
               showOrUpdateCyclingBar();
               disableInlineEdit();
               refreshParamsPanel();
@@ -5443,7 +6128,11 @@
           }
           // Source fallback when HMR did not land variants in this tab.
           if (msg.file && msg.id && state === 'GENERATING' && msg.id === currentSessionId) {
-            injectVariantsFromSource(msg.file, msg.id);
+            setTimeout(() => {
+              if (arrivedVariants >= expectedVariants && expectedVariants > 0) return;
+              if (state !== 'GENERATING' || msg.id !== currentSessionId) return;
+              injectVariantsFromSource(msg.file, msg.id);
+            }, 750);
             break;
           }
           // Variants are in source but not in the DOM yet. Common when the
@@ -5480,7 +6169,7 @@
         case 'error':
           if (pendingAcceptedSession?.id && msg.id === pendingAcceptedSession.id) {
             pendingAcceptedSession = null;
-            state = 'CYCLING';
+            setLiveState('CYCLING');
             updateBarContent('cycling');
             showToast('Could not complete accept cleanup. Try Accept again.', 5000);
             break;
@@ -5490,7 +6179,7 @@
           showToast('Error: ' + msg.message, 5000);
           hideBar();
           renderEditBadge('hidden');
-          state = 'PICKING';
+          setLiveState('PICKING');
           break;
       }
     };
@@ -5528,15 +6217,18 @@
     // transient disconnect as an explicit discard.
     selectedElement = null;
     selectedAction = 'impeccable';
-    state = recoveryState;
+    setLiveState(recoveryState);
     if (currentSessionId) saveSession();
   }
 
   function sendEvent(msg, opts) {
     msg.token = TOKEN;
     function handleFailure(err) {
-      console.error('[impeccable] Failed to send event:', err);
-      if (opts && opts.throwOnError) throw err;
+      if (opts && opts.throwOnError) {
+        console.error('[impeccable] Failed to send event:', err);
+        throw err;
+      }
+      console.debug('[impeccable] Dropped optional live event:', err);
       return null;
     }
     return fetch('http://localhost:' + PORT + '/events', {
@@ -5667,15 +6359,7 @@
       && !selectedElement.contains(e.target)
     ) {
       if (configureKind === 'insert') { cancelInsertConfigure(); return; }
-      hideBar();
-      stopScrollTracking();
-      hideAnnotOverlay();
-      clearAnnotations();
-      renderEditBadge('hidden');
-      state = 'PICKING';
-      hoveredElement = null;
-      hideHighlight();
-      syncPageChatFocus('configure-outside-click');
+      exitConfigureToPicking('configure-outside-click', { clearHover: true });
       return;
     }
     if (state === 'PICKING' && insertActive) {
@@ -5692,13 +6376,12 @@
       hideInsertLine();
       configureKind = 'insert';
       selectedElement = placeholder;
-      state = 'CONFIGURING';
+      setLiveState('CONFIGURING');
       hideHighlight();
       clearAnnotations();
       showAnnotOverlay(placeholder);
       showBar('configure');
       startScrollTracking();
-      syncPageInteractionCursor();
       return;
     }
     if (state !== 'PICKING' || !pickActive) return;
@@ -5711,7 +6394,7 @@
     e.preventDefault();
     e.stopPropagation();
     selectedElement = hoveredElement;
-    state = 'CONFIGURING';
+    setLiveState('CONFIGURING');
     showHighlight(selectedElement);
     clearAnnotations();
     showAnnotOverlay(selectedElement);
@@ -5796,6 +6479,16 @@
     sendEvent({ type: 'prefetch', pageUrl: path });
   }
 
+  function shouldPassthroughElementNav(deepActive, e) {
+    if (!deepActive || !own(deepActive)) return false;
+    if (e.key !== 'ArrowUp' && e.key !== 'ArrowDown') return false;
+    if (!/^(INPUT|TEXTAREA)$/.test(deepActive.tagName || '')) return false;
+    if (deepActive.value) return false;
+    if (deepActive.id === PREFIX + '-input' && state === 'CONFIGURING') return true;
+    if (deepActive.id === PREFIX + '-page-chat-input' && state === 'PICKING') return true;
+    return false;
+  }
+
   function handleKeyDown(e) {
     // When the annotation input is focused, let it handle its own keys.
     if (annotEditing && annotEditing.input && e.target === annotEditing.input) return;
@@ -5804,13 +6497,17 @@
       deepActive
       && own(deepActive)
       && /^(INPUT|TEXTAREA|SELECT)$/.test(deepActive.tagName || '')
+      && !shouldPassthroughElementNav(deepActive, e)
     ) {
       return;
     }
+    if (isPageEditableElement(deepActive) && !isInlineEditActive(deepActive)) {
+      return;
+    }
     // While a contenteditable text-leaf is focused, let the browser handle
     // all keys except Escape. Escape cancels the current edit (restores
     // original text) and blurs without saving, staying in CONFIGURING.
-    if (e.target.isContentEditable && inlineEditRows.some((r) => r.el === e.target)) {
+    if (e.target.isContentEditable && isInlineEditActive(e.target)) {
       if (e.key !== 'Escape') return;
       e.preventDefault();
       e.stopPropagation();
@@ -5842,14 +6539,15 @@
       if (state === 'EDITING') { cancelEditing(); return; }
       if (state === 'CONFIGURING') {
         if (configureKind === 'insert') { cancelInsertConfigure(); return; }
-        disableInlineEdit(); hideBar(); stopScrollTracking(); hideAnnotOverlay(); clearAnnotations(); renderEditBadge('hidden'); state = 'PICKING'; syncPageChatFocus('escape-from-configure'); return;
+        exitConfigureToPicking('escape-from-configure');
+        return;
       }
       if (state === 'CYCLING') { handleDiscard(); return; }
       if (state === 'SAVING' || state === 'CONFIRMED') return; // don't interrupt
       if (state === 'PICKING') {
         if (insertActive) toggleInsert();
         else if (pickActive) togglePick();
-        else { hideHighlight(); state = 'IDLE'; }
+        else { hideHighlight(); setLiveState('IDLE'); }
         return;
       }
     }
@@ -5873,7 +6571,7 @@
       } else if (e.key === 'Enter') {
         e.preventDefault();
         selectedElement = hoveredElement;
-        state = 'CONFIGURING';
+        setLiveState('CONFIGURING');
         showHighlight(selectedElement);
         clearAnnotations();
         showAnnotOverlay(selectedElement);
@@ -5934,6 +6632,7 @@
     // screenshot is uploaded (or capture fails - we still emit, just without
     // screenshotPath).
     const elForCapture = selectedElement;
+    pickedAnchorSnapshot = buildPickedAnchorSnapshot(elForCapture);
     const captureRect = elForCapture.getBoundingClientRect();
     const snapshot = {
       comments: annotState.comments.map(c => ({ x: c.x, y: c.y, text: c.text })),
@@ -5954,7 +6653,7 @@
     hideAnnotOverlay();
     clearAnnotations();
 
-    state = 'GENERATING';
+    setLiveState('GENERATING');
     // Disable the Edit badge: starting a manual text edit mid-generation would
     // conflict with the variant wrap that's about to land in the same DOM
     // region. Only swap if the badge was visible - picked elements with no
@@ -5979,7 +6678,7 @@
     clearInsertPicking();
     configureKind = 'replace';
     selectedElement = null;
-    state = insertActive ? 'PICKING' : 'IDLE';
+    setLiveState(insertActive ? 'PICKING' : 'IDLE');
     hideHighlight();
     syncPageChatFocus('insert-configure-cancel');
   }
@@ -6029,7 +6728,7 @@
     hideAnnotOverlay();
     clearAnnotations();
 
-    state = 'GENERATING';
+    setLiveState('GENERATING');
     showBar('generating');
     startScrollTracking();
     saveSession();
@@ -6787,7 +7486,7 @@ void main() {
       || acceptWrapper?.dataset?.impeccablePreview === 'svelte-component';
     const acceptedSnapshot = snapshotAcceptedVariantDom(acceptedSessionId, acceptedVariant);
 
-    state = 'SAVING';
+    setLiveState('SAVING');
     updateBarContent('saving');
     pendingAcceptedSession = {
       id: acceptedSessionId,
@@ -6802,7 +7501,7 @@ void main() {
       .then(() => {})
       .catch(() => {
         if (pendingAcceptedSession?.id === acceptedSessionId) pendingAcceptedSession = null;
-        state = 'CYCLING';
+        setLiveState('CYCLING');
         showOrUpdateCyclingBar();
         showToast('Could not confirm accept with the live server. Session kept for recovery; try Accept again.', 5000);
       });
@@ -6821,7 +7520,7 @@ void main() {
     if (pending.isSvelteComponent) {
       commitAcceptedSvelteComponentToDom(pending.id);
     }
-    state = 'CONFIRMED';
+    setLiveState('CONFIRMED');
     updateBarContent('confirmed');
     scheduleAcceptCleanup(pending);
     return true;
@@ -6829,7 +7528,14 @@ void main() {
 
   function scheduleAcceptCleanup(accepted) {
     setTimeout(function() {
-      if (!accepted?.isSvelteComponent) ensureAcceptedDomClean(accepted);
+      if (!accepted?.isSvelteComponent && !acceptedDomAlreadyClean(accepted)) {
+        setTimeout(function() {
+          if (pendingAcceptedSession?.id !== accepted?.id) return;
+          if (!accepted?.isSvelteComponent) ensureAcceptedDomClean(accepted);
+          cleanupAcceptedSession();
+        }, 1800);
+        return;
+      }
       cleanupAcceptedSession();
     }, 1200);
   }
@@ -6858,29 +7564,42 @@ void main() {
   function acceptedDomAlreadyClean(pending) {
     if (!pending?.acceptedSelector) return false;
     const matches = [...document.querySelectorAll(pending.acceptedSelector)];
-    return matches.some((el) => !el.closest('[data-impeccable-variants],[data-impeccable-variant]'));
+    return matches.length > 0
+      && matches.every((el) => !el.closest('[data-impeccable-variants],[data-impeccable-variant],[data-impeccable-carbonize]'));
   }
 
   function ensureAcceptedDomClean(pending) {
+    if (acceptedDomAlreadyClean(pending)) return;
     const sessionId = pending?.id;
     const variantId = pending?.variant;
-    const wrapper = document.querySelector('[data-impeccable-variants="' + sessionId + '"]');
-    const accepted = wrapper?.querySelector?.('[data-impeccable-variant="' + variantId + '"]');
-    if (!wrapper) {
+    const wrappers = findAcceptedRuntimeWrappers(sessionId);
+    if (wrappers.length === 0) {
       restoreAcceptedDomFromSnapshot(pending);
       return;
     }
-    if (!accepted) {
+    for (const wrapper of wrappers) {
+      if (!wrapper?.isConnected) continue;
+      const accepted = wrapper.querySelector?.('[data-impeccable-variant="' + variantId + '"]');
+      if (!accepted) {
+        wrapper.remove();
+        continue;
+      }
+      const parent = wrapper.parentElement;
+      if (!parent) continue;
+      while (accepted.firstChild) {
+        parent.insertBefore(accepted.firstChild, wrapper);
+      }
       wrapper.remove();
-      restoreAcceptedDomFromSnapshot(pending);
-      return;
     }
-    const parent = wrapper.parentElement;
-    if (!parent) return;
-    while (accepted.firstChild) {
-      parent.insertBefore(accepted.firstChild, wrapper);
-    }
-    wrapper.remove();
+    if (!acceptedDomAlreadyClean(pending)) restoreAcceptedDomFromSnapshot(pending);
+  }
+
+  function findAcceptedRuntimeWrappers(sessionId) {
+    if (!sessionId) return [];
+    return [...new Set([
+      ...document.querySelectorAll('[data-impeccable-variants="' + sessionId + '"]'),
+      ...document.querySelectorAll('[data-impeccable-carbonize="' + sessionId + '"]'),
+    ])];
   }
 
   function restoreAcceptedDomFromSnapshot(pending) {
@@ -6925,7 +7644,7 @@ void main() {
     selectedAction = 'impeccable';
     pendingAcceptedSession = null;
     renderEditBadge('hidden');
-    state = 'PICKING';
+    setLiveState('PICKING');
   }
 
   function commitAcceptedVariantToDom(sessionId, variantId) {
@@ -6977,6 +7696,7 @@ void main() {
     currentPreviewFile = null;
     currentPreviewMode = null;
     recoveryWaitingForAnchor = false;
+    pickedAnchorSnapshot = null;
   }
 
   function rememberSessionFileMeta(meta = {}) {
@@ -7001,6 +7721,7 @@ void main() {
     if (!saved) return;
     rememberSessionFileMeta(saved);
     if (saved.insertPlaceholder) insertPlaceholderSnapshot = saved.insertPlaceholder;
+    if (saved.pickedAnchor) pickedAnchorSnapshot = saved.pickedAnchor;
     if (saved.action) selectedAction = saved.action;
     if (saved.count) selectedCount = saved.count;
     if (saved.previewMode) currentPreviewMode = saved.previewMode;
@@ -7067,9 +7788,10 @@ void main() {
       || clampVariantIndex(serverSession?.visibleVariant, arrivedVariants || expectedVariants)
       || (arrivedVariants > 0 ? 1 : 0);
 
-    selectedElement = document.body;
-    state = 'GENERATING';
-    recoveryWaitingForAnchor = true;
+    const restoredAnchor = findLiveElementFromAnchorSnapshot(pickedAnchorSnapshot);
+    selectedElement = restoredAnchor || document.body;
+    setLiveState('GENERATING');
+    recoveryWaitingForAnchor = !restoredAnchor;
     showBar('generating');
     startScrollTracking();
     if (variantObserver) variantObserver.disconnect();
@@ -7085,7 +7807,6 @@ void main() {
       return true;
     }
 
-    showToast('Variants ready. Reveal the selected element to resume.', 15000);
     return true;
   }
 
@@ -7114,6 +7835,7 @@ void main() {
       pageUrl: location.pathname,
       paramValues: { ...paramsCurrentValues },
       insertPlaceholder: insertPlaceholderSnapshot || undefined,
+      pickedAnchor: pickedAnchorSnapshot || undefined,
     });
   }
 
@@ -7173,6 +7895,7 @@ void main() {
     hideHighlight();
     stopScrollTracking();
     if (variantObserver) { variantObserver.disconnect(); variantObserver = null; }
+    if (pendingVariantAnchorRetryObserver) { pendingVariantAnchorRetryObserver.disconnect(); pendingVariantAnchorRetryObserver = null; }
     stopScrollLock();
     clearScrollY();
     finalizeInsertSession();
@@ -7182,15 +7905,21 @@ void main() {
     currentSessionId = null;
     selectedAction = 'impeccable';
     renderEditBadge('hidden');
-    state = 'PICKING';
+    setLiveState('PICKING');
   }
 
   //
   // Toast
   //
 
+  function dismissToast() {
+    if (!toastEl) return;
+    toastEl.remove();
+    toastEl = null;
+  }
+
   function showToast(message, duration) {
-    if (toastEl) toastEl.remove();
+    dismissToast();
     // Stack the toast above the global bar (which sits at bottom:14px) so
     // the two never overlap. Read the bar's actual rect - its height varies
     // with hover-expanded labels - and fall back to a sensible default
@@ -7279,7 +8008,7 @@ void main() {
         : (savedVisibleVariant > 0 && savedVisibleVariant <= arrivedVariants ? savedVisibleVariant : 1);
       selectedElement = resolveSvelteComponentAnchor()
         || wrapper.parentElement;
-      state = 'CYCLING';
+      setLiveState('CYCLING');
       hideShaderOverlay();
       showBar('cycling');
       startScrollTracking();
@@ -7315,7 +8044,7 @@ void main() {
     const isInsert = wrapper.dataset.impeccableMode === 'insert';
     const visEl = visibleVariant > 0 ? pickVariantContent(wrapper, visibleVariant) : null;
     const origEl = pickVariantContent(wrapper, 'original');
-    state = resumedState;
+    setLiveState(resumedState);
     if (isInsert && resumedState === 'GENERATING' && arrivedVariants === 0) {
       selectedElement = ensureInsertPlaceholder() || findInsertAnchorInDom() || wrapper;
     } else {
@@ -7472,16 +8201,18 @@ void main() {
   let voiceInterimBase = '';
   /** @type {{ mode: 'steer'|'configure', input: HTMLInputElement, submit: () => void, beforeStart?: () => void } | null} */
   let voiceCtx = null;
-  const PAGE_CHAT_COLLAPSED_W = '88px';
+  const PAGE_CHAT_COLLAPSED_W = '104px';
   const PAGE_CHAT_PROCESSING_W = '76px';
+  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(56% 0.032 82 / 0.78)';
+  const AGENT_DISCONNECTED_MARK = 'oklch(62% 0 0 / 0.78)';
   const AGENT_DISCONNECTED_TIP = 'Agent disconnected - run live-poll.mjs to connect';
   const GLOBAL_BAR_SECTION_GAP = 8;
   const GLOBAL_BAR_INNER_GAP = 2;
   const GLOBAL_BAR_INNER_PAD_LEFT = 2;
-  const PAGE_CHAT_EXPANDED_W = 'min(280px, 38vw)';
+  const PAGE_CHAT_EXPANDED_MAX_W = 280;
   const ICON_PAGE_CHAT =
     '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>';
   const ICON_PAGE_VOICE =
@@ -7543,8 +8274,8 @@ void main() {
       // Neutral hairline for internal control borders / dividers (was a warm
       // gold rule that read as muddy champagne edges on the pill / input / count).
       hairline: 'oklch(92% 0 0 / 0.12)',
-      text: 'oklch(84% 0.035 82)',
-      textDim: 'oklch(63% 0.024 82)',
+      text: 'oklch(91% 0 0)',
+      textDim: 'oklch(72% 0 0)',
       accent: C.brand,
       accentSoft: C.brandSoft,
       exitHover: 'oklch(58% 0.15 35 / 0.18)',
@@ -7561,16 +8292,65 @@ void main() {
     return barPaletteForTheme(globalBarEl?.dataset.theme || detectPageTheme());
   }
 
+  function globalBarModeToggles() {
+    return [
+      uiGetById(PREFIX + '-pick-toggle'),
+      uiGetById(PREFIX + '-insert-toggle'),
+      uiGetById(PREFIX + '-detect-toggle'),
+      uiGetById(PREFIX + '-design-toggle'),
+    ].filter(Boolean);
+  }
+
+  function applyGlobalBarLabelState(expandInactive, forceCollapse = false) {
+    globalBarModeToggles().forEach((toggle) => {
+      if (forceCollapse) toggle._collapseLabel?.(true);
+      else if (expandInactive || toggle.dataset.active === 'true') toggle._expandLabel?.();
+      else toggle._collapseLabel?.();
+    });
+  }
+
+  function syncGlobalBarExpandedLabels(expanded = globalBarEl?.matches(':hover')) {
+    const expandInactive = !!(expanded && !pageChatExpanded);
+    applyGlobalBarLabelState(expandInactive, pageChatExpanded);
+
+    if (expandInactive && globalBarEl && globalBarEl.scrollWidth > window.innerWidth - 16) {
+      applyGlobalBarLabelState(false);
+    }
+  }
+
+  function pageChatCollapsedWidthPx() {
+    const parsed = parseFloat(PAGE_CHAT_COLLAPSED_W);
+    return Number.isFinite(parsed) ? parsed : 104;
+  }
+
+  function pageChatExpandedWidth() {
+    if (!pageChatEl || !globalBarEl) return PAGE_CHAT_EXPANDED_MAX_W + 'px';
+    const currentChatWidth = pageChatEl.getBoundingClientRect().width || pageChatCollapsedWidthPx();
+    const barWidth = Math.max(globalBarEl.getBoundingClientRect().width || 0, globalBarEl.scrollWidth || 0);
+    const nonChatWidth = Math.max(0, barWidth - currentChatWidth);
+    const available = window.innerWidth - 16 - nonChatWidth;
+    const next = Math.max(pageChatCollapsedWidthPx(), Math.min(PAGE_CHAT_EXPANDED_MAX_W, available));
+    return Math.round(next) + 'px';
+  }
+
+  function syncPageChatExpandedWidth() {
+    if (!pageChatEl || !pageChatExpanded) return;
+    pageChatEl.style.width = pageChatExpandedWidth();
+  }
+
   function syncPageChatChrome() {
     if (!pageChatEl) return;
     const P = pageChatPalette();
+    const inputFocused = pageChatInput && activeElementDeep() === pageChatInput;
     pageChatEl.style.background = P.chatSurface;
-    pageChatEl.style.borderColor = steerLocked
-      ? P.patinaSoft
-      : (pageChatExpanded ? P.accentSoft : P.hairline);
+    pageChatEl.style.borderColor = 'transparent';
     if (pageChatHint) pageChatHint.style.color = steerLocked ? P.patinaPale : P.textDim;
     const chatIcon = pageChatEl?.firstElementChild;
-    if (chatIcon) chatIcon.style.color = steerLocked ? P.patinaPale : P.textDim;
+    if (chatIcon) {
+      chatIcon.style.color = steerLocked
+        ? P.patinaPale
+        : (inputFocused || pageChatExpanded ? P.text : P.textDim);
+    }
     if (pageChatInput) pageChatInput.style.color = P.text;
     if (pageChatVoiceBtn) {
       const listening = pageChatVoiceBtn.dataset.listening === 'true';
@@ -7593,6 +8373,21 @@ void main() {
       && !steerLocked;
   }
 
+  function isPageEditableElement(el) {
+    if (!el || own(el)) return false;
+    if (/^(INPUT|TEXTAREA|SELECT)$/.test(el.tagName || '')) return true;
+    return !!el.isContentEditable;
+  }
+
+  function isInlineEditActive(el) {
+    return !!el && inlineEditRows.some((r) => r.el === el);
+  }
+
+  function isPageEditableActive() {
+    const active = activeElementDeep();
+    return isPageEditableElement(active) && !isInlineEditActive(active);
+  }
+
   function pageHasHostTextSelection() {
     const sel = window.getSelection?.();
     if (!sel || sel.isCollapsed) return false;
@@ -7606,6 +8401,7 @@ void main() {
   function shouldSteerAutoFocus() {
     return shouldFocusSteerChat()
       && !steerFocusSuspended
+      && !isPageEditableActive()
       && performance.now() >= steerFocusPauseUntil;
   }
 
@@ -7741,24 +8537,44 @@ void main() {
   function syncPageChatFocusRing() {
     if (!pageChatEl || !pageChatInput) return;
     const focused = activeElementDeep() === pageChatInput;
+    const typingReady = focused && !steerLocked;
     pageChatEl.dataset.inputFocused = focused ? 'true' : 'false';
-    const P = pageChatPalette();
-    pageChatEl.style.borderColor = steerLocked
-      ? P.patinaSoft
-      : (pageChatExpanded ? P.accentSoft : P.hairline);
     pageChatEl.style.boxShadow = 'none';
-    if (pageChatHint) {
-      pageChatHint.style.color = steerLocked
-        ? P.patinaPale
-        : ((!pageChatExpanded && focused) ? P.patinaPale : P.textDim);
+
+    if (pageChatExpanded) {
+      pageChatInput.placeholder = PAGE_CHAT_PLACEHOLDER_EXPANDED;
+      pageChatInput.style.width = '';
+      pageChatInput.style.padding = '0 6px';
+      pageChatInput.style.opacity = steerLocked ? '0.72' : '1';
+      pageChatInput.style.pointerEvents = steerLocked ? 'none' : 'auto';
+      return;
     }
-    if (!pageChatExpanded) {
-      pageChatInput.style.width = '0';
-      pageChatInput.style.padding = '0';
-      pageChatInput.style.opacity = '0';
-      pageChatInput.style.pointerEvents = focused ? 'auto' : 'none';
-      if (pageChatHint) pageChatHint.style.visibility = '';
+
+    if (typingReady) {
+      // Collapsed type-to-steer: show the real input + caret instead of a
+      // truncated patina "Steer" label with an invisible focused field.
+      pageChatInput.placeholder = PAGE_CHAT_PLACEHOLDER_COLLAPSED;
+      if (pageChatHint) {
+        pageChatHint.style.display = 'none';
+        pageChatHint.style.opacity = '0';
+      }
+      pageChatInput.style.width = '';
+      pageChatInput.style.padding = '0 4px';
+      pageChatInput.style.opacity = '1';
+      pageChatInput.style.pointerEvents = 'auto';
+      return;
+    }
+
+    pageChatInput.placeholder = PAGE_CHAT_PLACEHOLDER_COLLAPSED;
+    if (pageChatHint) {
+      pageChatHint.style.display = '';
+      pageChatHint.style.opacity = '1';
+      pageChatHint.style.visibility = '';
     }
+    pageChatInput.style.width = '0';
+    pageChatInput.style.padding = '0';
+    pageChatInput.style.opacity = '0';
+    pageChatInput.style.pointerEvents = 'none';
   }
 
   function focusSteerChat(reason) {
@@ -7778,6 +8594,7 @@ void main() {
     try { window.focus(); } catch { /* embed may block */ }
     try { pageChatInput.focus({ preventScroll: true }); } catch { pageChatInput.focus(); }
     syncPageChatFocusRing();
+    syncPageChatChrome();
     steerFocusLog('focusSteerChat result', {
       reason,
       before: steerFocusTargetLabel(before),
@@ -7822,8 +8639,10 @@ void main() {
     if (!pageChatEl || !pageChatInput) return false;
     pageChatExpanded = true;
     pageChatEl.dataset.expanded = 'true';
-    pageChatEl.style.width = PAGE_CHAT_EXPANDED_W;
+    syncGlobalBarExpandedLabels(false);
+    pageChatEl.style.width = pageChatExpandedWidth();
     pageChatEl.style.cursor = steerLocked ? 'default' : 'text';
+    pageChatInput.placeholder = PAGE_CHAT_PLACEHOLDER_EXPANDED;
     if (pageChatHint) {
       pageChatHint.style.display = 'none';
       pageChatHint.style.opacity = '0';
@@ -7835,6 +8654,20 @@ void main() {
     return true;
   }
 
+  function armPageChatForTyping(opts = {}) {
+    if (!pageChatEl || !pageChatInput || steerLocked) return false;
+    const expand = opts.expand !== false;
+    const focus = opts.focus !== false;
+    if (expand && !pageChatExpanded) {
+      preparePageChatInputForTyping();
+      syncPageChatChrome();
+    }
+    if (focus) return focusPageChatInput('arm-page-chat');
+    syncPageChatFocusRing();
+    syncPageChatChrome();
+    return true;
+  }
+
   function focusPageChatInput(reason) {
     if (!preparePageChatInputForTyping() || steerLocked) return false;
     try { pageChatInput.focus({ preventScroll: true }); } catch { pageChatInput.focus(); }
@@ -7902,7 +8735,7 @@ void main() {
     pageChatEl.setAttribute('aria-label', 'Steer the page');
     pageChatExpanded = keepExpanded;
     pageChatEl.dataset.expanded = keepExpanded ? 'true' : 'false';
-    pageChatEl.style.width = keepExpanded ? PAGE_CHAT_EXPANDED_W : PAGE_CHAT_COLLAPSED_W;
+    pageChatEl.style.width = keepExpanded ? pageChatExpandedWidth() : PAGE_CHAT_COLLAPSED_W;
     pageChatEl.style.cursor = 'pointer';
     if (pageChatInput) {
       pageChatInput.disabled = false;
@@ -7993,7 +8826,9 @@ void main() {
       if (pageChatEl) pageChatEl.dataset.voiceListening = listening ? 'true' : 'false';
       syncPageChatChrome();
     } else if (voiceCtx?.mode === 'configure') {
-      const voiceBtn = uiGetById(PREFIX + '-configure-voice');
+      // The bar shows either the replace row's voice button or the insert
+      // row's - both run voice through the 'configure' mode.
+      const voiceBtn = uiGetById(PREFIX + '-configure-voice') || uiGetById(PREFIX + '-insert-voice');
       if (voiceBtn) {
         voiceBtn.dataset.active = listening ? 'true' : 'false';
         voiceBtn.dataset.listening = listening ? 'true' : 'false';
@@ -8214,6 +9049,7 @@ void main() {
     pageChatEl.dataset.expanded = 'false';
     pageChatEl.style.width = PAGE_CHAT_COLLAPSED_W;
     pageChatEl.style.cursor = 'pointer';
+    syncGlobalBarExpandedLabels(globalBarEl?.matches(':hover'));
     if (blur) {
       pageChatInput.blur();
       pageChatInput.style.pointerEvents = 'none';
@@ -8235,7 +9071,7 @@ void main() {
       height: '28px', margin: '0 4px 0 ' + (GLOBAL_BAR_SECTION_GAP - GLOBAL_BAR_INNER_GAP) + 'px',
       borderRadius: '7px',
       background: P.chatSurface,
-      border: '1px solid ' + P.hairline,
+      border: '1px solid transparent',
       overflow: 'hidden',
       cursor: 'pointer',
       flexShrink: '0',
@@ -8266,13 +9102,14 @@ void main() {
     pageChatInput = document.createElement('input');
     pageChatInput.id = PREFIX + '-page-chat-input';
     pageChatInput.type = 'text';
-    pageChatInput.placeholder = 'Steer the page…';
+    pageChatInput.placeholder = PAGE_CHAT_PLACEHOLDER_COLLAPSED;
     pageChatInput.setAttribute('aria-label', 'Steer the page');
     Object.assign(pageChatInput.style, {
       flex: '1', minWidth: '0', width: '0',
       padding: '0', border: 'none', background: 'transparent',
       fontFamily: FONT, fontSize: '11.5px', color: P.text,
       outline: 'none', opacity: '0', pointerEvents: 'none',
+      caretColor: P.accent,
       transition: 'opacity 0.15s ease',
     });
 
@@ -8306,19 +9143,24 @@ void main() {
         '#' + PREFIX + '-page-chat[data-voice-listening="true"] { border-color: oklch(70% 0.12 188 / 0.45); }' +
         '#' + PREFIX + '-page-chat-voice[data-listening="true"] svg { animation: impeccable-voice-pulse 1.1s ease-in-out infinite; }' +
         '@media (prefers-reduced-motion: reduce) { #' + PREFIX + '-page-chat-voice[data-listening="true"] svg { animation: none; opacity: 1; } }' +
-        '#' + PREFIX + '-page-chat-input::placeholder { color: oklch(63% 0.024 82); opacity: 1; }' +
+        '#' + PREFIX + '-page-chat-input::placeholder { color: oklch(72% 0 0); opacity: 1; }' +
+        '#' + PREFIX + '-page-chat-input { caret-color: oklch(84% 0.19 80.46); }' +
+        '#' + PREFIX + '-page-chat[data-input-focused="true"]:not([data-expanded="true"]) #' + PREFIX + '-page-chat-input::placeholder { color: oklch(72% 0 0); }' +
         '#' + PREFIX + '-page-chat-voice:hover { background: oklch(78% 0.12 82 / 0.12); }';
       uiAppendStyle(s);
     }
 
-    pageChatEl.addEventListener('pointerdown', keepSteerPointerInside);
+    pageChatEl.addEventListener('pointerdown', (e) => {
+      keepSteerPointerInside(e);
+      if (steerLocked || pageChatVoiceBtn.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;
-      expandPageChat({ focus: false });
-      focusPageChatInput('page-chat-click');
+      armPageChatForTyping({ expand: true, focus: true });
     });
 
     pageChatVoiceBtn.addEventListener('pointerdown', keepSteerPointerInside);
@@ -8341,7 +9183,9 @@ void main() {
     });
 
     pageChatInput.addEventListener('focus', () => {
+      steerInputWasFocused = true;
       syncPageChatFocusRing();
+      syncPageChatChrome();
     });
 
     pageChatInput.addEventListener('blur', () => {
@@ -8505,6 +9349,7 @@ void main() {
       zIndex: Z.bar + 5,
       display: 'flex', alignItems: 'stretch',
       gap: '0',
+      width: 'max-content',
       background: P.surface,
       border: '1px solid ' + P.border,
       borderRadius: '8px',
@@ -8512,6 +9357,8 @@ void main() {
       fontFamily: FONT, fontSize: '12px', lineHeight: '1',
       opacity: '0',
       overflow: 'hidden',          // clip the full-bleed brand mark to the bar radius
+      maxWidth: 'calc(100vw - 16px)',
+      boxSizing: 'border-box',
       transition: 'opacity 0.3s ' + EASE + ', transform 0.3s ' + EASE,
     });
     globalBarEl.id = PREFIX + '-global-bar';
@@ -8541,7 +9388,7 @@ void main() {
     const agentDot = el('span', {
       position: 'absolute', right: '-1px', bottom: '7px',
       width: '6px', height: '6px', borderRadius: '50%',
-      background: 'oklch(78% 0.14 75)',
+      background: 'oklch(77% 0.13 82)',
       boxShadow: '0 0 0 2px ' + P.surface,
       display: 'none', pointerEvents: 'none',
     });
@@ -8560,6 +9407,7 @@ void main() {
     const inner = el('div', {
       display: 'flex', alignItems: 'center',
       padding: '4px 5px 4px ' + GLOBAL_BAR_INNER_PAD_LEFT + 'px', gap: GLOBAL_BAR_INNER_GAP + 'px',
+      flex: '0 0 auto',
     });
     inner.id = PREFIX + '-global-bar-inner';
     globalBarEl.appendChild(inner);
@@ -8568,7 +9416,10 @@ void main() {
     function makeIconBtn({ id, svg, label, ariaLabel, labelFont, onClick }) {
       const b = el('button', {
         position: 'relative',
-        display: 'inline-flex', alignItems: 'center',
+        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
+        boxSizing: 'border-box',
+        flex: '0 0 auto',
+        minWidth: '30px',
         padding: '6px 8px', borderRadius: '7px',
         border: 'none', background: 'transparent',
         color: P.textDim, fontFamily: FONT, fontSize: '11.5px', fontWeight: '500',
@@ -8587,8 +9438,8 @@ void main() {
         if (!labelEl) return;
         labelEl.style.maxWidth = '120px'; labelEl.style.opacity = '1'; labelEl.style.marginLeft = '6px'; labelEl.style.transform = 'translateX(0)';
       };
-      const collapse = () => {
-        if (!labelEl || b.dataset.active === 'true') return;
+      const collapse = (force = false) => {
+        if (!labelEl || (!force && b.dataset.active === 'true')) return;
         labelEl.style.maxWidth = '0'; labelEl.style.opacity = '0'; labelEl.style.marginLeft = '0'; labelEl.style.transform = 'translateX(-4px)';
       };
       // Per-button hover only changes color (no layout). The label expand/
@@ -8643,11 +9494,11 @@ void main() {
     // DESIGN.md panel toggle - quartet of color squares as the mark.
     const designBtn = makeIconBtn({
       id: PREFIX + '-design-toggle',
-      svg: `<span style="display:inline-grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;width:14px;height:14px;border-radius:3px;overflow:hidden;box-shadow:inset 0 0 0 1px oklch(58% 0.065 82 / 0.55);flex-shrink:0">
+      svg: `<span style="display:inline-grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;width:14px;height:14px;border-radius:3px;overflow:hidden;box-shadow:inset 0 0 0 1px oklch(92% 0 0 / 0.13);flex-shrink:0">
         <span style="background:oklch(84% 0.19 80.46)"></span>
         <span style="background:oklch(70% 0.12 188)"></span>
-        <span style="background:oklch(84% 0.035 82)"></span>
-        <span style="background:oklch(34% 0.014 82)"></span>
+        <span style="background:oklch(91% 0 0)"></span>
+        <span style="background:oklch(34% 0 0)"></span>
       </span>`,
       label: 'DESIGN.md',
       ariaLabel: 'Toggle DESIGN.md panel',
@@ -8839,6 +9690,7 @@ void main() {
       width: '1px', height: '18px',
       background: P.hairline,
       margin: '0 4px 0 2px',
+      flexShrink: '0',
     });
     inner.appendChild(divider);
 
@@ -8855,6 +9707,7 @@ void main() {
       display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
       padding: '0', boxSizing: 'border-box',
       width: '24px', height: '24px', borderRadius: '6px',
+      flexShrink: '0',
       border: 'none', background: 'transparent',
       color: P.textDim, fontFamily: FONT, fontSize: '0', lineHeight: '0',
       cursor: 'pointer', transition: 'color 0.12s ease, background 0.12s ease',
@@ -8867,16 +9720,16 @@ void main() {
     exitBtn.addEventListener('click', () => { sendEvent({ type: 'exit' }); teardown(); });
     inner.appendChild(exitBtn);
 
-    // Bar-level hover: expand every toggle's label at once; collapse on leave.
+    // Bar-level hover: expand mode labels unless Steer is using the space.
     // Buttons with dataset.active="true" ignore collapse (their label stays).
-    const toggles = [pickBtn, insertBtn, detectBtn, designBtn];
     globalBarEl.addEventListener('mouseenter', () => {
-      toggles.forEach((t) => t._expandLabel && t._expandLabel());
+      syncGlobalBarExpandedLabels(true);
+      syncPageChatExpandedWidth();
       schedulePendingDockPosition();
       setTimeout(schedulePendingDockPosition, 260);
     });
     globalBarEl.addEventListener('mouseleave', () => {
-      toggles.forEach((t) => t._collapseLabel && t._collapseLabel());
+      syncGlobalBarExpandedLabels(false);
       schedulePendingDockPosition();
       setTimeout(schedulePendingDockPosition, 260);
     });
@@ -8894,6 +9747,7 @@ void main() {
       pendingDockResizeObserver.observe(globalBarEl);
     }
     window.addEventListener('resize', positionPendingDock);
+    window.addEventListener('resize', syncPageChatExpandedWidth);
 
     requestAnimationFrame(() => {
       globalBarEl.style.opacity = '1';
@@ -8940,9 +9794,7 @@ void main() {
     // If the bar is currently under the cursor, keep all labels expanded -
     // otherwise clicking a toggle that deactivates (e.g. closing DESIGN.md)
     // would collapse its label while the user's mouse is still on the bar.
-    if (globalBarEl && globalBarEl.matches(':hover')) {
-      [pickToggle, insertToggle, detectToggle, designToggle].forEach((t) => t?._expandLabel?.());
-    }
+    syncGlobalBarExpandedLabels(globalBarEl && globalBarEl.matches(':hover'));
 
     if (detectBadge) {
       detectBadge.style.display = (detectActive && detectCount > 0) ? 'inline' : 'none';
@@ -9008,14 +9860,15 @@ void main() {
         cancelInsertConfigure();
         return;
       }
+      teardownConfigureChrome();
       hideHighlight();
-      hideBar();
       hideActionPicker();
       selectedElement = null;
+      hoveredElement = null;
       configureKind = 'replace';
-      if (state === 'PICKING' || state === 'CONFIGURING') state = 'IDLE';
+      if (state === 'PICKING' || state === 'CONFIGURING') setLiveState('IDLE');
     } else {
-      if (state === 'IDLE') state = 'PICKING';
+      if (state === 'IDLE') setLiveState('PICKING');
     }
     syncPageChatFocus('toggle-pick');
   }
@@ -9031,10 +9884,10 @@ void main() {
       selectedElement = null;
       configureKind = 'replace';
       if (state === 'CONFIGURING') cancelInsertConfigure();
-      else if (state === 'IDLE' || state === 'PICKING') state = 'PICKING';
+      else if (state === 'IDLE' || state === 'PICKING') setLiveState('PICKING');
     } else {
       clearInsertPicking();
-      if (state === 'PICKING' && !pickActive) state = 'IDLE';
+      if (state === 'PICKING' && !pickActive) setLiveState('IDLE');
     }
     saveInteractionPrefs();
     updateGlobalBarState();
@@ -9115,6 +9968,7 @@ void main() {
     pageChatVoiceBtn = null;
     pageChatExpanded = false;
     if (insertCreateTooltipEl) { insertCreateTooltipEl.remove(); insertCreateTooltipEl = null; }
+    if (configureBarTooltipEl) { configureBarTooltipEl.remove(); configureBarTooltipEl = null; }
     if (highlightEl) { highlightEl.remove(); highlightEl = null; }
     if (tooltipEl) { tooltipEl.remove(); tooltipEl = null; }
     if (barEl) { barEl.remove(); barEl = null; }
@@ -9128,7 +9982,8 @@ void main() {
     window.removeEventListener('message', onDetectMessage);
     // Remove detection overlays
     window.postMessage({ source: 'impeccable-command', action: 'remove' }, '*');
-    state = 'IDLE';
+    setLiveState('IDLE');
+    document.getElementById(PICK_CURSOR_STYLE_ID)?.remove();
     window.__IMPECCABLE_LIVE_INIT__ = false;
     console.log('[impeccable] Live mode exited.');
   }
@@ -9228,8 +10083,8 @@ void main() {
     meta:     'oklch(55% 0 0)',
     hairline: 'oklch(88% 0 0)',
     hairlineSoft: 'oklch(92% 0 0)',
-    amber:    'oklch(70% 0.13 65)',         // stale-hint accent
-    amberBg:  'oklch(95% 0.05 80)',
+    amber:    'oklch(77% 0.13 82)',         // stale-hint accent
+    amberBg:  'oklch(89% 0.055 84)',
   };
 
   function designPanelCss(BP) {
@@ -9320,7 +10175,7 @@ void main() {
       }
       .empty strong { color: ${DP.ink}; display: block; margin-bottom: 6px; font-size: 14px; }
       .empty code { font-family: ${MONO}; background: ${DP.canvas}; padding: 1px 6px; border-radius: 4px; font-size: 12px; color: ${DP.ink}; }
-      .error { color: oklch(45% 0.15 25); }
+      .error { color: oklch(58% 0.15 35); }
 
       /* Stale hint */
       .stale {
@@ -9472,8 +10327,8 @@ void main() {
         content: ''; position: absolute; left: 4px; top: 13px;
         width: 8px; height: 8px; border-radius: 50%;
       }
-      .coll .do::before { background: oklch(62% 0.16 145); }
-      .coll .dont::before { background: oklch(58% 0.22 25); }
+      .coll .do::before { background: oklch(45% 0.18 145); }
+      .coll .dont::before { background: oklch(58% 0.15 35); }
 
       .coll .overview-body {
         font-size: 12px; line-height: 1.55; color: ${DP.ink2};
@@ -10305,6 +11160,8 @@ void main() {
       console.log('[impeccable] Resumed active variant session ' + currentSessionId + ' (' + arrivedVariants + '/' + expectedVariants + ' variants).');
     }
 
+    if (state === 'IDLE' && (pickActive || insertActive)) setLiveState('PICKING');
+    syncPageInteractionCursor();
     syncPageChatFocus('init-complete');
   }