`). Loose siblings (heading + paragraph + div as direct children of the variant div) break the outline tracking and the accept flow, which both assume one child.
+
+The first variant has no `display: none` (visible by default). All others do. If variants use only inline styles and no scoped CSS, omit the `' : ''));
+ if (paramValues && Object.keys(paramValues).length > 0) {
+ // Preserve the user's knob positions for the carbonize-cleanup agent
+ // to bake into the final CSS when it collapses scoped rules.
+ replacement.push(indent + commentSyntax.open + ' impeccable-param-values ' + id + ': ' + JSON.stringify(paramValues) + ' ' + commentSyntax.close);
+ }
+ replacement.push(indent + commentSyntax.open + ' impeccable-carbonize-end ' + id + ' ' + commentSyntax.close);
+ }
+
+ // Keep the `@scope ([data-impeccable-variant="N"])` selectors in the
+ // carbonize CSS block working visually by re-wrapping the accepted content
+ // in a data-impeccable-variant="N" div with `display: contents` (so layout
+ // isn't affected). The carbonize agent strips this attribute + wrapper when
+ // it moves the CSS to a proper stylesheet.
+ //
+ // Style attribute syntax has to follow the host file's flavor — JSX files
+ // need the object form, otherwise React 19 throws "Failed to set indexed
+ // property [0] on CSSStyleDeclaration" while parsing the string char-by-char.
+ if (cssContent) {
+ const isJsx = commentSyntax.open === '{/*';
+ const styleAttr = isJsx ? "style={{ display: 'contents' }}" : 'style="display: contents"';
+ replacement.push(indent + '');
+ replacement.push(...restored);
+ replacement.push(indent + '
');
+ } else {
+ replacement.push(...restored);
+ }
+
+ const newLines = [
+ ...lines.slice(0, block.start),
+ ...replacement,
+ ...lines.slice(block.end + 1),
+ ];
+ fs.writeFileSync(targetFile, newLines.join('\n'), 'utf-8');
+
+ return { carbonize: needsCarbonize };
+}
+
+// ---------------------------------------------------------------------------
+// Parsing helpers
+// ---------------------------------------------------------------------------
+
+/**
+ * Find the start/end marker lines for a session.
+ * Returns { start, end } (0-indexed line numbers) or null.
+ */
+function findMarkerBlock(id, lines) {
+ let start = -1;
+ let end = -1;
+ const startPattern = 'impeccable-variants-start ' + id;
+ const endPattern = 'impeccable-variants-end ' + id;
+
+ for (let i = 0; i < lines.length; i++) {
+ if (start === -1 && lines[i].includes(startPattern)) start = i;
+ if (lines[i].includes(endPattern)) { end = i; break; }
+ }
+
+ return (start !== -1 && end !== -1) ? { start, end } : null;
+}
+
+/**
+ * Join wrapper lines into a single string with `` to close on)
+ * - Same-line `` blocks
+ * - Multi-line `` blocks
+ */
+function stripStyleAndJoin(lines, block) {
+ const out = [];
+ let inStyle = false;
+ for (let i = block.start; i <= block.end; i++) {
+ let line = lines[i];
+
+ if (!inStyle) {
+ // Strip any complete .
+ const closeIdx = line.search(/<\/style\s*>/);
+ if (closeIdx !== -1) {
+ inStyle = false;
+ out.push(line.slice(closeIdx).replace(/<\/style\s*>/, ''));
+ }
+ // else: skip line entirely
+ }
+ }
+ return out.join('\n');
+}
+
+/**
+ * Find the inner content of `…` inside `text`,
+ * handling nested same-tag elements via depth counting. `attrMatch` is a
+ * regex source fragment that must appear inside the opener tag.
+ * Returns the inner string (may be empty), or null if not found.
+ */
+function extractInnerByAttr(text, attrMatch) {
+ const openerRe = new RegExp('<([A-Za-z][A-Za-z0-9]*)\\b[^>]*' + attrMatch + '[^>]*>');
+ const openMatch = text.match(openerRe);
+ if (!openMatch) return null;
+
+ const tagName = openMatch[1];
+ const innerStart = openMatch.index + openMatch[0].length;
+
+ // Match any opener or closer of this tag name after innerStart.
+ // (Does not match self-closing , which doesn't contribute to depth.)
+ const tagRe = new RegExp('<(?:/)?' + tagName + '\\b[^>]*>', 'g');
+ tagRe.lastIndex = innerStart;
+
+ let depth = 1;
+ let m;
+ while ((m = tagRe.exec(text))) {
+ const isClose = m[0].startsWith('$/.test(m[0]);
+ if (isClose) {
+ depth--;
+ if (depth === 0) return text.slice(innerStart, m.index);
+ } else if (!isSelfClose) {
+ depth++;
+ }
+ }
+ return null;
+}
+
+/**
+ * Extract the original element content from within the variant wrapper.
+ * Returns an array of lines.
+ */
+function extractOriginal(lines, block) {
+ const text = stripStyleAndJoin(lines, block);
+ const inner = extractInnerByAttr(text, 'data-impeccable-variant="original"');
+ if (inner === null) return [];
+ return inner.split('\n');
+}
+
+/**
+ * Extract a specific variant's inner content (stripping the wrapper div).
+ * Returns an array of lines, or null if not found.
+ */
+function extractVariant(lines, block, variantNum) {
+ const text = stripStyleAndJoin(lines, block);
+ const inner = extractInnerByAttr(text, 'data-impeccable-variant="' + variantNum + '"');
+ if (inner === null) return null;
+ const result = inner.split('\n');
+ // Collapse a lone empty leading/trailing line (common after string splice).
+ while (result.length > 1 && result[0].trim() === '') result.shift();
+ while (result.length > 1 && result[result.length - 1].trim() === '') result.pop();
+ return result.length > 0 ? result : null;
+}
+
+/**
+ * Extract the colocated ` — return the inner content.
+ * 3. Multi-line: `` on a later line — return
+ * the lines between them.
+ */
+function extractCss(lines, block, id) {
+ const styleAttr = 'data-impeccable-css="' + id + '"';
+ let inStyle = false;
+ const content = [];
+
+ for (let i = block.start; i <= block.end; i++) {
+ const line = lines[i];
+
+ if (!inStyle && line.includes(styleAttr)) {
+ // Self-closing: nothing to carbonize.
+ if (/]*\/\s*>/.test(line)) return null;
+ // Same-line open + close: extract inner text.
+ const sameLine = line.match(/]*>([\s\S]*?)<\/style\s*>/);
+ if (sameLine) {
+ const inner = sameLine[1];
+ return inner.length > 0 ? inner.split('\n') : null;
+ }
+ inStyle = true;
+ continue; // skip the anywhere on the line — JSX template-literal closes
+ // (`}`) put the close mid-line, and we don't want to absorb the
+ // template-literal punctuation as CSS content.
+ const closeIdx = line.indexOf('');
+ if (closeIdx !== -1) break;
+ content.push(line);
+ }
+ }
+
+ return content.length > 0 ? content : null;
+}
+
+/**
+ * De-indent content that was indented by live-wrap.mjs.
+ * The wrap script adds `indent + ' '` (4 extra spaces) to each line.
+ * We restore to just `indent` level.
+ */
+function deindentContent(contentLines, baseIndent) {
+ // Find the minimum indentation in the content to determine how much was added
+ let minIndent = Infinity;
+ for (const line of contentLines) {
+ if (line.trim() === '') continue;
+ const leadingSpaces = line.match(/^(\s*)/)[1].length;
+ minIndent = Math.min(minIndent, leadingSpaces);
+ }
+ if (minIndent === Infinity) minIndent = 0;
+
+ // Strip the extra indentation and re-add base indent
+ return contentLines.map(line => {
+ if (line.trim() === '') return '';
+ return baseIndent + line.slice(minIndent);
+ });
+}
+
+function detectCommentSyntax(filePath) {
+ const ext = path.extname(filePath).toLowerCase();
+ if (ext === '.jsx' || ext === '.tsx') {
+ return { open: '{/*', close: '*/}' };
+ }
+ return { open: '' };
+}
+
+// ---------------------------------------------------------------------------
+// File search (find the file containing session markers)
+// ---------------------------------------------------------------------------
+
+function findSessionFile(id, cwd) {
+ const marker = 'impeccable-variants-start ' + id;
+ const searchDirs = ['src', 'app', 'pages', 'components', 'public', 'views', 'templates', '.'];
+ const seen = new Set();
+
+ for (const dir of searchDirs) {
+ const absDir = path.join(cwd, dir);
+ if (!fs.existsSync(absDir)) continue;
+ const result = searchDir(absDir, marker, seen, 0);
+ if (result) {
+ const content = fs.readFileSync(result, 'utf-8');
+ return { file: result, content, lines: content.split('\n') };
+ }
+ }
+ return null;
+}
+
+function searchDir(dir, query, seen, depth) {
+ if (depth > 5) return null;
+ let realDir;
+ try { realDir = fs.realpathSync(dir); } catch { return null; }
+ if (seen.has(realDir)) return null;
+ seen.add(realDir);
+
+ let entries;
+ try { entries = fs.readdirSync(dir, { withFileTypes: true }); }
+ catch { return null; }
+
+ for (const entry of entries) {
+ if (!entry.isFile()) continue;
+ if (!EXTENSIONS.includes(path.extname(entry.name).toLowerCase())) continue;
+ const filePath = path.join(dir, entry.name);
+ try {
+ const content = fs.readFileSync(filePath, 'utf-8');
+ if (content.includes(query)) return filePath;
+ } catch { /* skip */ }
+ }
+
+ for (const entry of entries) {
+ if (!entry.isDirectory()) continue;
+ if (['node_modules', '.git', 'dist', 'build'].includes(entry.name)) continue;
+ const result = searchDir(path.join(dir, entry.name), query, seen, depth + 1);
+ if (result) return result;
+ }
+
+ return null;
+}
+
+// ---------------------------------------------------------------------------
+// Utilities
+// ---------------------------------------------------------------------------
+
+function argVal(args, flag) {
+ const idx = args.indexOf(flag);
+ return idx !== -1 && idx + 1 < args.length ? args[idx + 1] : null;
+}
+
+// Auto-execute when run directly
+const _running = process.argv[1];
+if (_running?.endsWith('live-accept.mjs') || _running?.endsWith('live-accept.mjs/')) {
+ acceptCli();
+}
+
+export { findMarkerBlock, extractOriginal, extractVariant, extractCss, deindentContent, detectCommentSyntax };
diff --git a/plugin/skills/impeccable/scripts/live-browser.js b/plugin/skills/impeccable/scripts/live-browser.js
new file mode 100644
index 000000000..66a54435a
--- /dev/null
+++ b/plugin/skills/impeccable/scripts/live-browser.js
@@ -0,0 +1,4684 @@
+/**
+ * Impeccable Live Variant Mode — Browser Script
+ *
+ * Injected into the user's page via \n' +
+ open + ' ' + MARKER_CLOSE_TEXT + ' ' + close + '\n'
+ );
+}
+
+function insertTag(content, config, port) {
+ const block = buildTagBlock(config.commentSyntax, port);
+ // insertBefore: match the LAST occurrence. Anchors like `