diff --git a/package.json b/package.json
index ee253fc6e..44805b2ed 100644
--- a/package.json
+++ b/package.json
@@ -50,6 +50,7 @@
     "preview": "bun run build && wrangler pages dev",
     "deploy": "bun run build && wrangler pages deploy build/",
     "test": "bun test tests/build.test.js tests/detect-antipatterns.test.js && node --test tests/detect-antipatterns-fixtures.test.mjs && node --test tests/detect-antipatterns-browser.test.mjs && node --test tests/cleanup-deprecated.test.mjs && node --test tests/live-wrap.test.mjs && node --test tests/live-accept.test.mjs && node --test tests/live-inject.test.mjs && node --test tests/live-server.test.mjs && node --test tests/framework-fixtures.test.mjs",
+    "test:live-e2e": "node --test --test-timeout=600000 tests/live-e2e.test.mjs",
     "prepack": "cp README.md README.repo.md && cp README.npm.md README.md",
     "postpack": "cp README.repo.md README.md && rm README.repo.md",
     "screenshot": "bun run scripts/screenshot-antipatterns.js",
diff --git a/tests/framework-fixtures.test.mjs b/tests/framework-fixtures.test.mjs
index d447be059..84bb699ff 100644
--- a/tests/framework-fixtures.test.mjs
+++ b/tests/framework-fixtures.test.mjs
@@ -12,7 +12,7 @@
 import { describe, it } from 'node:test';
 import assert from 'node:assert/strict';
 import { execFileSync } from 'node:child_process';
-import { cpSync, mkdtempSync, readdirSync, readFileSync, rmSync, writeFileSync } from 'node:fs';
+import { cpSync, existsSync, mkdtempSync, readdirSync, readFileSync, rmSync, writeFileSync } from 'node:fs';
 import { tmpdir } from 'node:os';
 import { join, dirname } from 'node:path';
 import { fileURLToPath } from 'node:url';
@@ -27,6 +27,7 @@ const FIXTURES_DIR = join(__dirname, 'framework-fixtures');
 function listFixtures() {
   return readdirSync(FIXTURES_DIR, { withFileTypes: true })
     .filter((e) => e.isDirectory())
+    .filter((e) => existsSync(join(FIXTURES_DIR, e.name, 'fixture.json')))
     .map((e) => e.name);
 }
 
diff --git a/tests/framework-fixtures/README.md b/tests/framework-fixtures/README.md
index ad953f3d8..7f7865fcf 100644
--- a/tests/framework-fixtures/README.md
+++ b/tests/framework-fixtures/README.md
@@ -2,6 +2,8 @@
 
 Representative project shapes for exercising live mode against different framework conventions. Each fixture is a small directory tree that the test harness copies into a temp git repo, then drives `live-inject.mjs`, `live-wrap.mjs`, `live-accept.mjs`, and `is-generated.mjs` against.
 
+Fixtures can also opt into a **runtime E2E** pass that actually installs dependencies, boots the framework dev server, and drives a Playwright browser to verify the live handshake. See the `runtime` block below.
+
 ## Layout
 
 ```
@@ -32,12 +34,43 @@ Representative project shapes for exercising live mode against different framewo
     "signals": ["diagnostic hints — paths where CSP was detected"],
     "patchTarget": "which file the agent should modify",
     "expectedAfter": "filename of the reference post-patch output inside this fixture"
+  },
+  "runtime": {
+    "styling": "plain-css | tailwind-v4 | styled-components | ...",
+    "install": ["npm", "install"],
+    "devCommand": ["npm", "run", "dev"],
+    "scheme": "http",
+    "ignoreHTTPSErrors": false,
+    "readyPattern": "Local:\\s+https?://[^:]+:(\\d+)",
+    "readyTimeoutMs": 120000,
+    "pickSelector": "h1.hero-title",
+    "preActions": [
+      { "type": "click", "selector": "[data-testid='open-modal']" },
+      { "type": "goto",  "path": "/about" }
+    ],
+    "reloadProbe": {
+      "preActions": [{ "type": "click", "selector": "[data-testid='open-modal']" }],
+      "expectSelector": "h1.hero-title"
+    },
+    "probe": {
+      "expectLiveInit": true,
+      "expectConsoleClean": true
+    }
   }
 }
 ```
 
 The `expectedAfter` file lives alongside `fixture.json` (not inside `files/`) and is a human/agent-review reference — tests don't auto-apply the patch.
 
+The `runtime` block is optional. Fixtures without it only run the static unit checks (is-generated, inject, wrap, csp-detect). Fixtures *with* it additionally run the E2E suite in `tests/live-e2e.test.mjs` (`bun run test:live-e2e`), which:
+
+1. Stages the fixture into a tmp repo.
+2. Runs `runtime.install` to install real deps.
+3. Starts `live-server.mjs --background` and runs `live-inject.mjs --port` against it.
+4. Spawns `runtime.devCommand` and scrapes the port from stdout using `runtime.readyPattern` (the first capture group must be the port).
+5. Opens Playwright Chromium at the dev URL and asserts `window.__IMPECCABLE_LIVE_INIT__ === true` (the browser-side handshake oracle) within `runtime.readyTimeoutMs`.
+6. Tears everything down (Playwright close, dev server SIGTERM, live-server stop, tmp rm).
+
 ## Current fixtures
 
 | Fixture | Shape |
diff --git a/tests/framework-fixtures/astro-vite7/files/astro.config.mjs b/tests/framework-fixtures/astro-vite7/files/astro.config.mjs
new file mode 100644
index 000000000..fa5bcb799
--- /dev/null
+++ b/tests/framework-fixtures/astro-vite7/files/astro.config.mjs
@@ -0,0 +1,5 @@
+import { defineConfig } from 'astro/config';
+
+export default defineConfig({
+  server: { host: '127.0.0.1' },
+});
diff --git a/tests/framework-fixtures/astro-vite7/files/package.json b/tests/framework-fixtures/astro-vite7/files/package.json
new file mode 100644
index 000000000..33ba1a69d
--- /dev/null
+++ b/tests/framework-fixtures/astro-vite7/files/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "astro-vite7-fixture",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "astro dev --host 127.0.0.1",
+    "build": "astro build",
+    "preview": "astro preview"
+  },
+  "devDependencies": {
+    "astro": "^6.0.0"
+  }
+}
diff --git a/tests/framework-fixtures/astro-vite7/files/src/layouts/Layout.astro b/tests/framework-fixtures/astro-vite7/files/src/layouts/Layout.astro
new file mode 100644
index 000000000..1c5b88e85
--- /dev/null
+++ b/tests/framework-fixtures/astro-vite7/files/src/layouts/Layout.astro
@@ -0,0 +1,13 @@
+---
+const { title } = Astro.props;
+---
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>{title}</title>
+  </head>
+  <body>
+    <slot />
+  </body>
+</html>
diff --git a/tests/framework-fixtures/astro-vite7/files/src/pages/index.astro b/tests/framework-fixtures/astro-vite7/files/src/pages/index.astro
new file mode 100644
index 000000000..f77a49d83
--- /dev/null
+++ b/tests/framework-fixtures/astro-vite7/files/src/pages/index.astro
@@ -0,0 +1,16 @@
+---
+import Layout from '../layouts/Layout.astro';
+---
+<Layout title="Astro + Vite 7 Fixture">
+  <main class="page">
+    <h1 class="hero-title">Astro + Vite 7 Fixture</h1>
+    <p class="hero-hook">Static Astro page rendered server-side, hydrated nothing.</p>
+  </main>
+</Layout>
+
+<style>
+  body { margin: 0; font-family: system-ui, sans-serif; }
+  .page { padding: 2rem; }
+  .hero-title { font-size: 2rem; margin: 0 0 0.5rem; }
+  .hero-hook { color: #555; }
+</style>
diff --git a/tests/framework-fixtures/astro-vite7/fixture.json b/tests/framework-fixtures/astro-vite7/fixture.json
new file mode 100644
index 000000000..977d0b8cd
--- /dev/null
+++ b/tests/framework-fixtures/astro-vite7/fixture.json
@@ -0,0 +1,28 @@
+{
+  "name": "Astro 6 + Vite 7",
+  "config": {
+    "files": ["src/layouts/Layout.astro"],
+    "insertBefore": "</body>",
+    "commentSyntax": "html"
+  },
+  "sourceFiles": ["src/layouts/Layout.astro", "src/pages/index.astro", "astro.config.mjs"],
+  "generatedFiles": [],
+  "wrapCases": [
+    {
+      "name": "wraps hero in pages/index.astro",
+      "args": { "classes": "hero-title", "tag": "h1" },
+      "expectedFile": "src/pages/index.astro"
+    }
+  ],
+  "runtime": {
+    "styling": "plain-css",
+    "install": ["npm", "install", "--no-audit", "--no-fund", "--loglevel=error"],
+    "devCommand": ["npx", "astro", "dev", "--host", "127.0.0.1"],
+    "readyPattern": "Local\\s+https?://[^:\\s]+:(\\d+)",
+    "readyTimeoutMs": 180000,
+    "probe": {
+      "expectLiveInit": true,
+      "expectConsoleClean": true
+    }
+  }
+}
diff --git a/tests/framework-fixtures/astro-vite7/gitignore.txt b/tests/framework-fixtures/astro-vite7/gitignore.txt
new file mode 100644
index 000000000..84856e988
--- /dev/null
+++ b/tests/framework-fixtures/astro-vite7/gitignore.txt
@@ -0,0 +1,4 @@
+node_modules/
+.astro/
+dist/
+package-lock.json
diff --git a/tests/framework-fixtures/nextjs-app-router/files/app/layout.jsx b/tests/framework-fixtures/nextjs-app-router/files/app/layout.jsx
new file mode 100644
index 000000000..8be733679
--- /dev/null
+++ b/tests/framework-fixtures/nextjs-app-router/files/app/layout.jsx
@@ -0,0 +1,11 @@
+export const metadata = { title: 'Next.js App Router Fixture' };
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body>
+        {children}
+      </body>
+    </html>
+  );
+}
diff --git a/tests/framework-fixtures/nextjs-app-router/files/app/page.jsx b/tests/framework-fixtures/nextjs-app-router/files/app/page.jsx
new file mode 100644
index 000000000..648e5c2ae
--- /dev/null
+++ b/tests/framework-fixtures/nextjs-app-router/files/app/page.jsx
@@ -0,0 +1,10 @@
+'use client';
+
+export default function Page() {
+  return (
+    <main className="page" style={{padding: '2rem', fontFamily: 'system-ui, sans-serif'}}>
+      <h1 className="hero-title" style={{fontSize: '2rem', margin: '0 0 0.5rem'}}>Next.js App Router Fixture</h1>
+      <p className="hero-hook" style={{color: '#555'}}>Client component under Turbopack HMR.</p>
+    </main>
+  );
+}
diff --git a/tests/framework-fixtures/nextjs-app-router/files/next.config.js b/tests/framework-fixtures/nextjs-app-router/files/next.config.js
new file mode 100644
index 000000000..d918f8040
--- /dev/null
+++ b/tests/framework-fixtures/nextjs-app-router/files/next.config.js
@@ -0,0 +1,3 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+module.exports = nextConfig;
diff --git a/tests/framework-fixtures/nextjs-app-router/files/package.json b/tests/framework-fixtures/nextjs-app-router/files/package.json
new file mode 100644
index 000000000..4190c7b7e
--- /dev/null
+++ b/tests/framework-fixtures/nextjs-app-router/files/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "nextjs-app-router-fixture",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "next dev --hostname 127.0.0.1",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "^16.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  }
+}
diff --git a/tests/framework-fixtures/nextjs-app-router/fixture.json b/tests/framework-fixtures/nextjs-app-router/fixture.json
new file mode 100644
index 000000000..263c037dc
--- /dev/null
+++ b/tests/framework-fixtures/nextjs-app-router/fixture.json
@@ -0,0 +1,28 @@
+{
+  "name": "Next.js 16 + App Router (Turbopack)",
+  "config": {
+    "files": ["app/layout.jsx"],
+    "insertBefore": "</body>",
+    "commentSyntax": "jsx"
+  },
+  "sourceFiles": ["app/layout.jsx", "app/page.jsx", "next.config.js"],
+  "generatedFiles": [],
+  "wrapCases": [
+    {
+      "name": "wraps hero title in source JSX page",
+      "args": { "classes": "hero-title", "tag": "h1" },
+      "expectedFile": "app/page.jsx"
+    }
+  ],
+  "runtime": {
+    "styling": "plain-css",
+    "install": ["npm", "install", "--no-audit", "--no-fund", "--loglevel=error"],
+    "devCommand": ["npx", "next", "dev", "--hostname", "127.0.0.1"],
+    "readyPattern": "(?:Local|Network):?\\s+https?://[^:\\s]+:(\\d+)",
+    "readyTimeoutMs": 180000,
+    "probe": {
+      "expectLiveInit": true,
+      "expectConsoleClean": true
+    }
+  }
+}
diff --git a/tests/framework-fixtures/nextjs-app-router/gitignore.txt b/tests/framework-fixtures/nextjs-app-router/gitignore.txt
new file mode 100644
index 000000000..068ae1818
--- /dev/null
+++ b/tests/framework-fixtures/nextjs-app-router/gitignore.txt
@@ -0,0 +1,5 @@
+node_modules/
+.next/
+out/
+dist/
+package-lock.json
diff --git a/tests/framework-fixtures/nuxt-vite7/files/app.vue b/tests/framework-fixtures/nuxt-vite7/files/app.vue
new file mode 100644
index 000000000..80fbb63be
--- /dev/null
+++ b/tests/framework-fixtures/nuxt-vite7/files/app.vue
@@ -0,0 +1,10 @@
+<template>
+  <html lang="en">
+    <head>
+      <title>Nuxt + Vite 7 Fixture</title>
+    </head>
+    <body>
+      <NuxtPage />
+    </body>
+  </html>
+</template>
diff --git a/tests/framework-fixtures/nuxt-vite7/files/nuxt.config.ts b/tests/framework-fixtures/nuxt-vite7/files/nuxt.config.ts
new file mode 100644
index 000000000..e00a9dc6e
--- /dev/null
+++ b/tests/framework-fixtures/nuxt-vite7/files/nuxt.config.ts
@@ -0,0 +1,4 @@
+export default defineNuxtConfig({
+  devtools: { enabled: false },
+  ssr: false,
+});
diff --git a/tests/framework-fixtures/nuxt-vite7/files/package.json b/tests/framework-fixtures/nuxt-vite7/files/package.json
new file mode 100644
index 000000000..a9c64226f
--- /dev/null
+++ b/tests/framework-fixtures/nuxt-vite7/files/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "nuxt-vite7-fixture",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "nuxt dev --host 127.0.0.1",
+    "build": "nuxt build",
+    "preview": "nuxt preview"
+  },
+  "devDependencies": {
+    "nuxt": "^4.0.0",
+    "vue": "^3.5.0"
+  }
+}
diff --git a/tests/framework-fixtures/nuxt-vite7/files/pages/index.vue b/tests/framework-fixtures/nuxt-vite7/files/pages/index.vue
new file mode 100644
index 000000000..a9fe1951e
--- /dev/null
+++ b/tests/framework-fixtures/nuxt-vite7/files/pages/index.vue
@@ -0,0 +1,12 @@
+<template>
+  <main class="page">
+    <h1 class="hero-title">Nuxt + Vite 7 Fixture</h1>
+    <p class="hero-hook">Vue 3 SFC under Nuxt's dev server.</p>
+  </main>
+</template>
+
+<style scoped>
+.page { padding: 2rem; font-family: system-ui, sans-serif; }
+.hero-title { font-size: 2rem; margin: 0 0 0.5rem; }
+.hero-hook { color: #555; }
+</style>
diff --git a/tests/framework-fixtures/nuxt-vite7/fixture.json b/tests/framework-fixtures/nuxt-vite7/fixture.json
new file mode 100644
index 000000000..556521993
--- /dev/null
+++ b/tests/framework-fixtures/nuxt-vite7/fixture.json
@@ -0,0 +1,18 @@
+{
+  "name": "Nuxt 4 + Vue 3 (static fixture only — runtime inject unsupported)",
+  "config": {
+    "files": ["app.vue"],
+    "insertBefore": "</body>",
+    "commentSyntax": "html"
+  },
+  "sourceFiles": ["app.vue", "pages/index.vue", "nuxt.config.ts"],
+  "generatedFiles": [],
+  "wrapCases": [
+    {
+      "name": "wraps hero in pages/index.vue",
+      "args": { "classes": "hero-title", "tag": "h1" },
+      "expectedFile": "pages/index.vue"
+    }
+  ],
+  "_runtimeOmitted": "Nuxt's app.vue is a Vue template that compiles to a render function — a <script> tag inserted there renders as a DOM node but does not execute. Nuxt needs a config-based inject (nuxt.config.ts -> app.head.script), which live-inject.mjs does not currently support. Static checks (is-generated, inject syntax, wrap routing) still validate."
+}
diff --git a/tests/framework-fixtures/nuxt-vite7/gitignore.txt b/tests/framework-fixtures/nuxt-vite7/gitignore.txt
new file mode 100644
index 000000000..6e22e7e7a
--- /dev/null
+++ b/tests/framework-fixtures/nuxt-vite7/gitignore.txt
@@ -0,0 +1,5 @@
+node_modules/
+.nuxt/
+.output/
+dist/
+package-lock.json
diff --git a/tests/framework-fixtures/vite8-https/files/index.html b/tests/framework-fixtures/vite8-https/files/index.html
new file mode 100644
index 000000000..8773d07d4
--- /dev/null
+++ b/tests/framework-fixtures/vite8-https/files/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Vite 8 + HTTPS Fixture</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/tests/framework-fixtures/vite8-https/files/package.json b/tests/framework-fixtures/vite8-https/files/package.json
new file mode 100644
index 000000000..4674340c1
--- /dev/null
+++ b/tests/framework-fixtures/vite8-https/files/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "vite8-https-fixture",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host 127.0.0.1",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-basic-ssl": "^2.3.0",
+    "@vitejs/plugin-react": "^6.0.0",
+    "vite": "^8.0.0"
+  }
+}
diff --git a/tests/framework-fixtures/vite8-https/files/src/App.jsx b/tests/framework-fixtures/vite8-https/files/src/App.jsx
new file mode 100644
index 000000000..337be8c40
--- /dev/null
+++ b/tests/framework-fixtures/vite8-https/files/src/App.jsx
@@ -0,0 +1,12 @@
+export default function App() {
+  return (
+    <main className="page">
+      <h1 className="hero-title">Vite 8 + HTTPS Fixture</h1>
+      <p className="hero-hook">Self-signed HTTPS. http://localhost:PORT/live.js should be blocked as mixed content.</p>
+      <section id="features" className="feature-grid">
+        <article className="feature-card">One</article>
+        <article className="feature-card">Two</article>
+      </section>
+    </main>
+  );
+}
diff --git a/tests/framework-fixtures/vite8-https/files/src/main.jsx b/tests/framework-fixtures/vite8-https/files/src/main.jsx
new file mode 100644
index 000000000..f2baba283
--- /dev/null
+++ b/tests/framework-fixtures/vite8-https/files/src/main.jsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App.jsx';
+import './styles.css';
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);
diff --git a/tests/framework-fixtures/vite8-https/files/src/styles.css b/tests/framework-fixtures/vite8-https/files/src/styles.css
new file mode 100644
index 000000000..62fbb5e89
--- /dev/null
+++ b/tests/framework-fixtures/vite8-https/files/src/styles.css
@@ -0,0 +1,6 @@
+body { margin: 0; font-family: system-ui, sans-serif; }
+.page { padding: 2rem; }
+.hero-title { font-size: 2rem; }
+.hero-hook { color: #555; }
+.feature-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
+.feature-card { padding: 1rem; border: 1px solid #ddd; border-radius: 0.5rem; }
diff --git a/tests/framework-fixtures/vite8-https/files/vite.config.js b/tests/framework-fixtures/vite8-https/files/vite.config.js
new file mode 100644
index 000000000..e6505b961
--- /dev/null
+++ b/tests/framework-fixtures/vite8-https/files/vite.config.js
@@ -0,0 +1,8 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import basicSsl from '@vitejs/plugin-basic-ssl';
+
+export default defineConfig({
+  plugins: [react(), basicSsl()],
+  server: { host: '127.0.0.1', strictPort: false },
+});
diff --git a/tests/framework-fixtures/vite8-https/fixture.json b/tests/framework-fixtures/vite8-https/fixture.json
new file mode 100644
index 000000000..c5fac0cb9
--- /dev/null
+++ b/tests/framework-fixtures/vite8-https/fixture.json
@@ -0,0 +1,30 @@
+{
+  "name": "Vite 8 + React + HTTPS (self-signed)",
+  "config": {
+    "files": ["index.html"],
+    "insertBefore": "</body>",
+    "commentSyntax": "html"
+  },
+  "sourceFiles": ["index.html", "src/App.jsx", "src/main.jsx", "src/styles.css", "vite.config.js"],
+  "generatedFiles": [],
+  "wrapCases": [
+    {
+      "name": "wraps hero title in source JSX",
+      "args": { "classes": "hero-title", "tag": "h1" },
+      "expectedFile": "src/App.jsx"
+    }
+  ],
+  "runtime": {
+    "styling": "plain-css",
+    "install": ["npm", "install", "--no-audit", "--no-fund", "--loglevel=error"],
+    "devCommand": ["npx", "vite", "--host", "127.0.0.1"],
+    "scheme": "https",
+    "ignoreHTTPSErrors": true,
+    "readyPattern": "Local:\\s+https?://[^:]+:(\\d+)",
+    "readyTimeoutMs": 120000,
+    "probe": {
+      "expectLiveInit": true,
+      "expectConsoleClean": true
+    }
+  }
+}
diff --git a/tests/framework-fixtures/vite8-https/gitignore.txt b/tests/framework-fixtures/vite8-https/gitignore.txt
new file mode 100644
index 000000000..8cda9ad20
--- /dev/null
+++ b/tests/framework-fixtures/vite8-https/gitignore.txt
@@ -0,0 +1,4 @@
+node_modules/
+dist/
+.vite/
+package-lock.json
diff --git a/tests/framework-fixtures/vite8-react-base-path/files/index.html b/tests/framework-fixtures/vite8-react-base-path/files/index.html
new file mode 100644
index 000000000..6dd31e269
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-base-path/files/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Vite 8 + base path Fixture</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/tests/framework-fixtures/vite8-react-base-path/files/package.json b/tests/framework-fixtures/vite8-react-base-path/files/package.json
new file mode 100644
index 000000000..50e09be6d
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-base-path/files/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "vite8-react-base-path-fixture",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host 127.0.0.1",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^6.0.0",
+    "vite": "^8.0.0"
+  }
+}
diff --git a/tests/framework-fixtures/vite8-react-base-path/files/src/App.jsx b/tests/framework-fixtures/vite8-react-base-path/files/src/App.jsx
new file mode 100644
index 000000000..8afbc5d8b
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-base-path/files/src/App.jsx
@@ -0,0 +1,8 @@
+export default function App() {
+  return (
+    <main className="page">
+      <h1 className="hero-title">Vite 8 + base path Fixture</h1>
+      <p className="hero-hook">Served under base: '/app/'.</p>
+    </main>
+  );
+}
diff --git a/tests/framework-fixtures/vite8-react-base-path/files/src/main.jsx b/tests/framework-fixtures/vite8-react-base-path/files/src/main.jsx
new file mode 100644
index 000000000..f2baba283
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-base-path/files/src/main.jsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App.jsx';
+import './styles.css';
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);
diff --git a/tests/framework-fixtures/vite8-react-base-path/files/src/styles.css b/tests/framework-fixtures/vite8-react-base-path/files/src/styles.css
new file mode 100644
index 000000000..c16eeacc1
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-base-path/files/src/styles.css
@@ -0,0 +1,4 @@
+body { margin: 0; font-family: system-ui, sans-serif; }
+.page { padding: 2rem; }
+.hero-title { font-size: 2rem; }
+.hero-hook { color: #555; }
diff --git a/tests/framework-fixtures/vite8-react-base-path/files/vite.config.js b/tests/framework-fixtures/vite8-react-base-path/files/vite.config.js
new file mode 100644
index 000000000..057287d06
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-base-path/files/vite.config.js
@@ -0,0 +1,8 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  base: '/app/',
+  plugins: [react()],
+  server: { host: '127.0.0.1', strictPort: false },
+});
diff --git a/tests/framework-fixtures/vite8-react-base-path/fixture.json b/tests/framework-fixtures/vite8-react-base-path/fixture.json
new file mode 100644
index 000000000..ef8ec9144
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-base-path/fixture.json
@@ -0,0 +1,29 @@
+{
+  "name": "Vite 8 + React + base: '/app/'",
+  "config": {
+    "files": ["index.html"],
+    "insertBefore": "</body>",
+    "commentSyntax": "html"
+  },
+  "sourceFiles": ["index.html", "src/App.jsx", "src/main.jsx", "src/styles.css", "vite.config.js"],
+  "generatedFiles": [],
+  "wrapCases": [
+    {
+      "name": "wraps hero title in source JSX",
+      "args": { "classes": "hero-title", "tag": "h1" },
+      "expectedFile": "src/App.jsx"
+    }
+  ],
+  "runtime": {
+    "styling": "plain-css",
+    "install": ["npm", "install", "--no-audit", "--no-fund", "--loglevel=error"],
+    "devCommand": ["npx", "vite", "--host", "127.0.0.1"],
+    "readyPattern": "Local:\\s+https?://[^:]+:(\\d+)",
+    "readyTimeoutMs": 120000,
+    "preActions": [{ "type": "goto", "path": "/app/" }],
+    "probe": {
+      "expectLiveInit": true,
+      "expectConsoleClean": true
+    }
+  }
+}
diff --git a/tests/framework-fixtures/vite8-react-base-path/gitignore.txt b/tests/framework-fixtures/vite8-react-base-path/gitignore.txt
new file mode 100644
index 000000000..8cda9ad20
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-base-path/gitignore.txt
@@ -0,0 +1,4 @@
+node_modules/
+dist/
+.vite/
+package-lock.json
diff --git a/tests/framework-fixtures/vite8-react-csp-meta/files/index.html b/tests/framework-fixtures/vite8-react-csp-meta/files/index.html
new file mode 100644
index 000000000..900caaef9
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-csp-meta/files/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      http-equiv="Content-Security-Policy"
+      content="default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; connect-src 'self' ws: wss:; img-src 'self' data:;"
+    />
+    <title>Vite 8 + CSP meta Fixture</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/tests/framework-fixtures/vite8-react-csp-meta/files/package.json b/tests/framework-fixtures/vite8-react-csp-meta/files/package.json
new file mode 100644
index 000000000..44f920b9e
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-csp-meta/files/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "vite8-react-csp-meta-fixture",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host 127.0.0.1",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^6.0.0",
+    "vite": "^8.0.0"
+  }
+}
diff --git a/tests/framework-fixtures/vite8-react-csp-meta/files/src/App.jsx b/tests/framework-fixtures/vite8-react-csp-meta/files/src/App.jsx
new file mode 100644
index 000000000..6261ef9fb
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-csp-meta/files/src/App.jsx
@@ -0,0 +1,12 @@
+export default function App() {
+  return (
+    <main className="page">
+      <h1 className="hero-title">Vite 8 + CSP meta Fixture</h1>
+      <p className="hero-hook">CSP meta tag blocks cross-origin script-src.</p>
+      <section id="features" className="feature-grid">
+        <article className="feature-card">One</article>
+        <article className="feature-card">Two</article>
+      </section>
+    </main>
+  );
+}
diff --git a/tests/framework-fixtures/vite8-react-csp-meta/files/src/main.jsx b/tests/framework-fixtures/vite8-react-csp-meta/files/src/main.jsx
new file mode 100644
index 000000000..f2baba283
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-csp-meta/files/src/main.jsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App.jsx';
+import './styles.css';
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);
diff --git a/tests/framework-fixtures/vite8-react-csp-meta/files/src/styles.css b/tests/framework-fixtures/vite8-react-csp-meta/files/src/styles.css
new file mode 100644
index 000000000..62fbb5e89
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-csp-meta/files/src/styles.css
@@ -0,0 +1,6 @@
+body { margin: 0; font-family: system-ui, sans-serif; }
+.page { padding: 2rem; }
+.hero-title { font-size: 2rem; }
+.hero-hook { color: #555; }
+.feature-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
+.feature-card { padding: 1rem; border: 1px solid #ddd; border-radius: 0.5rem; }
diff --git a/tests/framework-fixtures/vite8-react-csp-meta/files/vite.config.js b/tests/framework-fixtures/vite8-react-csp-meta/files/vite.config.js
new file mode 100644
index 000000000..f7ad4b565
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-csp-meta/files/vite.config.js
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  server: { host: '127.0.0.1', strictPort: false },
+});
diff --git a/tests/framework-fixtures/vite8-react-csp-meta/fixture.json b/tests/framework-fixtures/vite8-react-csp-meta/fixture.json
new file mode 100644
index 000000000..f8213f630
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-csp-meta/fixture.json
@@ -0,0 +1,33 @@
+{
+  "name": "Vite 8 + React + CSP meta tag",
+  "config": {
+    "files": ["index.html"],
+    "insertBefore": "</body>",
+    "commentSyntax": "html"
+  },
+  "sourceFiles": ["index.html", "src/App.jsx", "src/main.jsx", "src/styles.css", "vite.config.js"],
+  "generatedFiles": [],
+  "wrapCases": [
+    {
+      "name": "wraps hero title in source JSX",
+      "args": { "classes": "hero-title", "tag": "h1" },
+      "expectedFile": "src/App.jsx"
+    }
+  ],
+  "csp": {
+    "shape": "meta-tag",
+    "signals": ["index.html"],
+    "patchTarget": "index.html"
+  },
+  "runtime": {
+    "styling": "plain-css",
+    "install": ["npm", "install", "--no-audit", "--no-fund", "--loglevel=error"],
+    "devCommand": ["npx", "vite", "--host", "127.0.0.1"],
+    "readyPattern": "Local:\\s+https?://[^:]+:(\\d+)",
+    "readyTimeoutMs": 120000,
+    "probe": {
+      "expectLiveInit": true,
+      "expectConsoleClean": true
+    }
+  }
+}
diff --git a/tests/framework-fixtures/vite8-react-csp-meta/gitignore.txt b/tests/framework-fixtures/vite8-react-csp-meta/gitignore.txt
new file mode 100644
index 000000000..8cda9ad20
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-csp-meta/gitignore.txt
@@ -0,0 +1,4 @@
+node_modules/
+dist/
+.vite/
+package-lock.json
diff --git a/tests/framework-fixtures/vite8-react-css-modules/files/index.html b/tests/framework-fixtures/vite8-react-css-modules/files/index.html
new file mode 100644
index 000000000..295a44479
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-css-modules/files/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Vite 8 + CSS Modules Fixture</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/tests/framework-fixtures/vite8-react-css-modules/files/package.json b/tests/framework-fixtures/vite8-react-css-modules/files/package.json
new file mode 100644
index 000000000..741825618
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-css-modules/files/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "vite8-react-css-modules-fixture",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host 127.0.0.1",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^6.0.0",
+    "vite": "^8.0.0"
+  }
+}
diff --git a/tests/framework-fixtures/vite8-react-css-modules/files/src/App.jsx b/tests/framework-fixtures/vite8-react-css-modules/files/src/App.jsx
new file mode 100644
index 000000000..1043047e3
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-css-modules/files/src/App.jsx
@@ -0,0 +1,14 @@
+import styles from './App.module.css';
+
+export default function App() {
+  return (
+    <main className={`page ${styles.page}`}>
+      <h1 className={`hero-title ${styles.heroTitle}`}>Vite 8 + CSS Modules Fixture</h1>
+      <p className={`hero-hook ${styles.heroHook}`}>CSS Modules via foo.module.css — hashed classNames at runtime.</p>
+      <section id="features" className={`feature-grid ${styles.featureGrid}`}>
+        <article className={`feature-card ${styles.featureCard}`}>One</article>
+        <article className={`feature-card ${styles.featureCard}`}>Two</article>
+      </section>
+    </main>
+  );
+}
diff --git a/tests/framework-fixtures/vite8-react-css-modules/files/src/App.module.css b/tests/framework-fixtures/vite8-react-css-modules/files/src/App.module.css
new file mode 100644
index 000000000..dfe1cef45
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-css-modules/files/src/App.module.css
@@ -0,0 +1,5 @@
+.page { padding: 2rem; font-family: system-ui, sans-serif; }
+.heroTitle { font-size: 2rem; }
+.heroHook { color: #555; }
+.featureGrid { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); margin-top: 1rem; }
+.featureCard { padding: 1rem; border: 1px solid #ddd; border-radius: 0.5rem; }
diff --git a/tests/framework-fixtures/vite8-react-css-modules/files/src/main.jsx b/tests/framework-fixtures/vite8-react-css-modules/files/src/main.jsx
new file mode 100644
index 000000000..6dab183de
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-css-modules/files/src/main.jsx
@@ -0,0 +1,9 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App.jsx';
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);
diff --git a/tests/framework-fixtures/vite8-react-css-modules/files/vite.config.js b/tests/framework-fixtures/vite8-react-css-modules/files/vite.config.js
new file mode 100644
index 000000000..f7ad4b565
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-css-modules/files/vite.config.js
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  server: { host: '127.0.0.1', strictPort: false },
+});
diff --git a/tests/framework-fixtures/vite8-react-css-modules/fixture.json b/tests/framework-fixtures/vite8-react-css-modules/fixture.json
new file mode 100644
index 000000000..2b743ced1
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-css-modules/fixture.json
@@ -0,0 +1,28 @@
+{
+  "name": "Vite 8 + React + CSS Modules",
+  "config": {
+    "files": ["index.html"],
+    "insertBefore": "</body>",
+    "commentSyntax": "html"
+  },
+  "sourceFiles": ["index.html", "src/App.jsx", "src/App.module.css", "src/main.jsx", "vite.config.js"],
+  "generatedFiles": [],
+  "wrapCases": [
+    {
+      "name": "wraps hero title in source JSX",
+      "args": { "classes": "hero-title", "tag": "h1" },
+      "expectedFile": "src/App.jsx"
+    }
+  ],
+  "runtime": {
+    "styling": "css-modules",
+    "install": ["npm", "install", "--no-audit", "--no-fund", "--loglevel=error"],
+    "devCommand": ["npx", "vite", "--host", "127.0.0.1"],
+    "readyPattern": "Local:\\s+https?://[^:]+:(\\d+)",
+    "readyTimeoutMs": 120000,
+    "probe": {
+      "expectLiveInit": true,
+      "expectConsoleClean": true
+    }
+  }
+}
diff --git a/tests/framework-fixtures/vite8-react-css-modules/gitignore.txt b/tests/framework-fixtures/vite8-react-css-modules/gitignore.txt
new file mode 100644
index 000000000..8cda9ad20
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-css-modules/gitignore.txt
@@ -0,0 +1,4 @@
+node_modules/
+dist/
+.vite/
+package-lock.json
diff --git a/tests/framework-fixtures/vite8-react-emotion/files/index.html b/tests/framework-fixtures/vite8-react-emotion/files/index.html
new file mode 100644
index 000000000..8e5008063
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-emotion/files/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Vite 8 + Emotion Fixture</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/tests/framework-fixtures/vite8-react-emotion/files/package.json b/tests/framework-fixtures/vite8-react-emotion/files/package.json
new file mode 100644
index 000000000..e690a3899
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-emotion/files/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "vite8-react-emotion-fixture",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host 127.0.0.1",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^6.0.0",
+    "vite": "^8.0.0"
+  }
+}
diff --git a/tests/framework-fixtures/vite8-react-emotion/files/src/App.jsx b/tests/framework-fixtures/vite8-react-emotion/files/src/App.jsx
new file mode 100644
index 000000000..f970d035e
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-emotion/files/src/App.jsx
@@ -0,0 +1,21 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+
+const pageStyle = css`padding: 2rem; font-family: system-ui, sans-serif;`;
+const titleStyle = css`font-size: 2rem;`;
+const hookStyle = css`color: #555;`;
+const gridStyle = css`display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); margin-top: 1rem;`;
+const cardStyle = css`padding: 1rem; border: 1px solid #ddd; border-radius: 0.5rem;`;
+
+export default function App() {
+  return (
+    <main css={pageStyle} className="page">
+      <h1 css={titleStyle} className="hero-title">Vite 8 + Emotion Fixture</h1>
+      <p css={hookStyle} className="hero-hook">Runtime CSS-in-JS via the Emotion css prop.</p>
+      <section css={gridStyle} id="features" className="feature-grid">
+        <article css={cardStyle} className="feature-card">One</article>
+        <article css={cardStyle} className="feature-card">Two</article>
+      </section>
+    </main>
+  );
+}
diff --git a/tests/framework-fixtures/vite8-react-emotion/files/src/main.jsx b/tests/framework-fixtures/vite8-react-emotion/files/src/main.jsx
new file mode 100644
index 000000000..6dab183de
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-emotion/files/src/main.jsx
@@ -0,0 +1,9 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App.jsx';
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);
diff --git a/tests/framework-fixtures/vite8-react-emotion/files/vite.config.js b/tests/framework-fixtures/vite8-react-emotion/files/vite.config.js
new file mode 100644
index 000000000..67f3c1fd9
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-emotion/files/vite.config.js
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react({ jsxImportSource: '@emotion/react' })],
+  server: { host: '127.0.0.1', strictPort: false },
+});
diff --git a/tests/framework-fixtures/vite8-react-emotion/fixture.json b/tests/framework-fixtures/vite8-react-emotion/fixture.json
new file mode 100644
index 000000000..cd3b4f261
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-emotion/fixture.json
@@ -0,0 +1,28 @@
+{
+  "name": "Vite 8 + React + Emotion",
+  "config": {
+    "files": ["index.html"],
+    "insertBefore": "</body>",
+    "commentSyntax": "html"
+  },
+  "sourceFiles": ["index.html", "src/App.jsx", "src/main.jsx", "vite.config.js"],
+  "generatedFiles": [],
+  "wrapCases": [
+    {
+      "name": "wraps hero title in source JSX",
+      "args": { "classes": "hero-title", "tag": "h1" },
+      "expectedFile": "src/App.jsx"
+    }
+  ],
+  "runtime": {
+    "styling": "emotion",
+    "install": ["npm", "install", "--no-audit", "--no-fund", "--loglevel=error"],
+    "devCommand": ["npx", "vite", "--host", "127.0.0.1"],
+    "readyPattern": "Local:\\s+https?://[^:]+:(\\d+)",
+    "readyTimeoutMs": 120000,
+    "probe": {
+      "expectLiveInit": true,
+      "expectConsoleClean": true
+    }
+  }
+}
diff --git a/tests/framework-fixtures/vite8-react-emotion/gitignore.txt b/tests/framework-fixtures/vite8-react-emotion/gitignore.txt
new file mode 100644
index 000000000..8cda9ad20
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-emotion/gitignore.txt
@@ -0,0 +1,4 @@
+node_modules/
+dist/
+.vite/
+package-lock.json
diff --git a/tests/framework-fixtures/vite8-react-mapped-list/files/index.html b/tests/framework-fixtures/vite8-react-mapped-list/files/index.html
new file mode 100644
index 000000000..e977b6b2b
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-mapped-list/files/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Vite 8 + Mapped List Fixture</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/tests/framework-fixtures/vite8-react-mapped-list/files/package.json b/tests/framework-fixtures/vite8-react-mapped-list/files/package.json
new file mode 100644
index 000000000..718a925fa
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-mapped-list/files/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "vite8-react-mapped-list-fixture",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host 127.0.0.1",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^6.0.0",
+    "vite": "^8.0.0"
+  }
+}
diff --git a/tests/framework-fixtures/vite8-react-mapped-list/files/src/App.jsx b/tests/framework-fixtures/vite8-react-mapped-list/files/src/App.jsx
new file mode 100644
index 000000000..11c34befc
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-mapped-list/files/src/App.jsx
@@ -0,0 +1,21 @@
+const ITEMS = [
+  { id: 'a', title: 'Alpha card' },
+  { id: 'b', title: 'Beta card' },
+  { id: 'c', title: 'Gamma card' },
+];
+
+export default function App() {
+  return (
+    <main className="page">
+      <p className="hero-hook">Three cards rendered from a single mapped template.</p>
+      <section className="grid">
+        {ITEMS.map((item) => (
+          <article key={item.id} className="card">
+            <h1 className="hero-title">{item.title}</h1>
+            <p>Body for {item.id}.</p>
+          </article>
+        ))}
+      </section>
+    </main>
+  );
+}
diff --git a/tests/framework-fixtures/vite8-react-mapped-list/files/src/main.jsx b/tests/framework-fixtures/vite8-react-mapped-list/files/src/main.jsx
new file mode 100644
index 000000000..f2baba283
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-mapped-list/files/src/main.jsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App.jsx';
+import './styles.css';
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);
diff --git a/tests/framework-fixtures/vite8-react-mapped-list/files/src/styles.css b/tests/framework-fixtures/vite8-react-mapped-list/files/src/styles.css
new file mode 100644
index 000000000..d0b6e81e5
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-mapped-list/files/src/styles.css
@@ -0,0 +1,6 @@
+body { margin: 0; font-family: system-ui, sans-serif; }
+.page { padding: 2rem; }
+.hero-hook { color: #555; }
+.grid { display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr); margin-top: 1rem; }
+.card { padding: 1rem; border: 1px solid #ddd; border-radius: 0.5rem; }
+.hero-title { font-size: 1.4rem; margin: 0 0 0.5rem; }
diff --git a/tests/framework-fixtures/vite8-react-mapped-list/files/vite.config.js b/tests/framework-fixtures/vite8-react-mapped-list/files/vite.config.js
new file mode 100644
index 000000000..f7ad4b565
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-mapped-list/files/vite.config.js
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  server: { host: '127.0.0.1', strictPort: false },
+});
diff --git a/tests/framework-fixtures/vite8-react-mapped-list/fixture.json b/tests/framework-fixtures/vite8-react-mapped-list/fixture.json
new file mode 100644
index 000000000..d9e1a1911
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-mapped-list/fixture.json
@@ -0,0 +1,28 @@
+{
+  "name": "Vite 8 + React + .map() instances (3 cards from one template)",
+  "config": {
+    "files": ["index.html"],
+    "insertBefore": "</body>",
+    "commentSyntax": "html"
+  },
+  "sourceFiles": ["index.html", "src/App.jsx", "src/main.jsx", "src/styles.css", "vite.config.js"],
+  "generatedFiles": [],
+  "wrapCases": [
+    {
+      "name": "wraps the mapped h1 template in source JSX",
+      "args": { "classes": "hero-title", "tag": "h1" },
+      "expectedFile": "src/App.jsx"
+    }
+  ],
+  "runtime": {
+    "styling": "plain-css",
+    "install": ["npm", "install", "--no-audit", "--no-fund", "--loglevel=error"],
+    "devCommand": ["npx", "vite", "--host", "127.0.0.1"],
+    "readyPattern": "Local:\\s+https?://[^:]+:(\\d+)",
+    "readyTimeoutMs": 120000,
+    "probe": {
+      "expectLiveInit": true,
+      "expectConsoleClean": true
+    }
+  }
+}
diff --git a/tests/framework-fixtures/vite8-react-mapped-list/gitignore.txt b/tests/framework-fixtures/vite8-react-mapped-list/gitignore.txt
new file mode 100644
index 000000000..8cda9ad20
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-mapped-list/gitignore.txt
@@ -0,0 +1,4 @@
+node_modules/
+dist/
+.vite/
+package-lock.json
diff --git a/tests/framework-fixtures/vite8-react-modal/files/index.html b/tests/framework-fixtures/vite8-react-modal/files/index.html
new file mode 100644
index 000000000..6d2fa5ebe
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-modal/files/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Vite 8 + Modal Fixture</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/tests/framework-fixtures/vite8-react-modal/files/package.json b/tests/framework-fixtures/vite8-react-modal/files/package.json
new file mode 100644
index 000000000..f9324fff5
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-modal/files/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "vite8-react-modal-fixture",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host 127.0.0.1",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^6.0.0",
+    "vite": "^8.0.0"
+  }
+}
diff --git a/tests/framework-fixtures/vite8-react-modal/files/src/App.jsx b/tests/framework-fixtures/vite8-react-modal/files/src/App.jsx
new file mode 100644
index 000000000..d7b89f1c8
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-modal/files/src/App.jsx
@@ -0,0 +1,24 @@
+import { useState } from 'react';
+
+export default function App() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <main className="page">
+      <button data-testid="open-modal" type="button" onClick={() => setOpen(true)}>
+        Open Modal
+      </button>
+      {open && (
+        <div className="modal-backdrop">
+          <div className="modal" role="dialog" aria-modal="true">
+            <h1 className="hero-title">Modal Heading</h1>
+            <p className="hero-hook">Conditionally rendered — only mounts on click.</p>
+            <button data-testid="close-modal" type="button" onClick={() => setOpen(false)}>
+              Close
+            </button>
+          </div>
+        </div>
+      )}
+    </main>
+  );
+}
diff --git a/tests/framework-fixtures/vite8-react-modal/files/src/main.jsx b/tests/framework-fixtures/vite8-react-modal/files/src/main.jsx
new file mode 100644
index 000000000..f2baba283
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-modal/files/src/main.jsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App.jsx';
+import './styles.css';
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);
diff --git a/tests/framework-fixtures/vite8-react-modal/files/src/styles.css b/tests/framework-fixtures/vite8-react-modal/files/src/styles.css
new file mode 100644
index 000000000..338b7f75f
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-modal/files/src/styles.css
@@ -0,0 +1,7 @@
+body { margin: 0; font-family: system-ui, sans-serif; }
+.page { padding: 2rem; }
+.hero-title { font-size: 2rem; margin: 0; }
+.hero-hook { color: #555; }
+.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.4); display: grid; place-items: center; }
+.modal { background: white; padding: 2rem; border-radius: 1rem; min-width: 320px; }
+button { padding: 0.5rem 1rem; border-radius: 0.5rem; cursor: pointer; }
diff --git a/tests/framework-fixtures/vite8-react-modal/files/vite.config.js b/tests/framework-fixtures/vite8-react-modal/files/vite.config.js
new file mode 100644
index 000000000..f7ad4b565
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-modal/files/vite.config.js
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  server: { host: '127.0.0.1', strictPort: false },
+});
diff --git a/tests/framework-fixtures/vite8-react-modal/fixture.json b/tests/framework-fixtures/vite8-react-modal/fixture.json
new file mode 100644
index 000000000..199b299ad
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-modal/fixture.json
@@ -0,0 +1,39 @@
+{
+  "name": "Vite 8 + React + conditional Modal",
+  "config": {
+    "files": ["index.html"],
+    "insertBefore": "</body>",
+    "commentSyntax": "html"
+  },
+  "sourceFiles": ["index.html", "src/App.jsx", "src/main.jsx", "src/styles.css", "vite.config.js"],
+  "generatedFiles": [],
+  "wrapCases": [
+    {
+      "name": "wraps modal heading in source JSX",
+      "args": { "classes": "hero-title", "tag": "h1" },
+      "expectedFile": "src/App.jsx"
+    }
+  ],
+  "runtime": {
+    "styling": "plain-css",
+    "install": ["npm", "install", "--no-audit", "--no-fund", "--loglevel=error"],
+    "devCommand": ["npx", "vite", "--host", "127.0.0.1"],
+    "readyPattern": "Local:\\s+https?://[^:]+:(\\d+)",
+    "readyTimeoutMs": 120000,
+    "preActions": [
+      { "type": "click", "selector": "[data-testid='open-modal']" },
+      { "type": "wait",  "selector": "h1.hero-title" }
+    ],
+    "reloadProbe": {
+      "preActions": [
+        { "type": "click", "selector": "[data-testid='open-modal']" },
+        { "type": "wait",  "selector": "h1.hero-title" }
+      ],
+      "expectSelector": "h1.hero-title"
+    },
+    "probe": {
+      "expectLiveInit": true,
+      "expectConsoleClean": true
+    }
+  }
+}
diff --git a/tests/framework-fixtures/vite8-react-modal/gitignore.txt b/tests/framework-fixtures/vite8-react-modal/gitignore.txt
new file mode 100644
index 000000000..8cda9ad20
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-modal/gitignore.txt
@@ -0,0 +1,4 @@
+node_modules/
+dist/
+.vite/
+package-lock.json
diff --git a/tests/framework-fixtures/vite8-react-plain/files/index.html b/tests/framework-fixtures/vite8-react-plain/files/index.html
new file mode 100644
index 000000000..d81098c94
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-plain/files/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Vite 8 + React Fixture</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/tests/framework-fixtures/vite8-react-plain/files/package.json b/tests/framework-fixtures/vite8-react-plain/files/package.json
new file mode 100644
index 000000000..d09089d66
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-plain/files/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "vite8-react-plain-fixture",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host 127.0.0.1",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^6.0.0",
+    "vite": "^8.0.0"
+  }
+}
diff --git a/tests/framework-fixtures/vite8-react-plain/files/src/App.jsx b/tests/framework-fixtures/vite8-react-plain/files/src/App.jsx
new file mode 100644
index 000000000..b2a87cf5c
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-plain/files/src/App.jsx
@@ -0,0 +1,12 @@
+export default function App() {
+  return (
+    <main className="page">
+      <h1 className="hero-title">Vite 8 Fixture</h1>
+      <p className="hero-hook">Minimal React tree for live-mode E2E tests.</p>
+      <section id="features" className="feature-grid">
+        <article className="feature-card">One</article>
+        <article className="feature-card">Two</article>
+      </section>
+    </main>
+  );
+}
diff --git a/tests/framework-fixtures/vite8-react-plain/files/src/main.jsx b/tests/framework-fixtures/vite8-react-plain/files/src/main.jsx
new file mode 100644
index 000000000..f2baba283
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-plain/files/src/main.jsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App.jsx';
+import './styles.css';
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);
diff --git a/tests/framework-fixtures/vite8-react-plain/files/src/styles.css b/tests/framework-fixtures/vite8-react-plain/files/src/styles.css
new file mode 100644
index 000000000..62fbb5e89
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-plain/files/src/styles.css
@@ -0,0 +1,6 @@
+body { margin: 0; font-family: system-ui, sans-serif; }
+.page { padding: 2rem; }
+.hero-title { font-size: 2rem; }
+.hero-hook { color: #555; }
+.feature-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
+.feature-card { padding: 1rem; border: 1px solid #ddd; border-radius: 0.5rem; }
diff --git a/tests/framework-fixtures/vite8-react-plain/files/vite.config.js b/tests/framework-fixtures/vite8-react-plain/files/vite.config.js
new file mode 100644
index 000000000..dd5cfa6f0
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-plain/files/vite.config.js
@@ -0,0 +1,10 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    host: '127.0.0.1',
+    strictPort: false,
+  },
+});
diff --git a/tests/framework-fixtures/vite8-react-plain/fixture.json b/tests/framework-fixtures/vite8-react-plain/fixture.json
new file mode 100644
index 000000000..9a7147d12
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-plain/fixture.json
@@ -0,0 +1,28 @@
+{
+  "name": "Vite 8 + React + plain CSS",
+  "config": {
+    "files": ["index.html"],
+    "insertBefore": "</body>",
+    "commentSyntax": "html"
+  },
+  "sourceFiles": ["index.html", "src/App.jsx", "src/main.jsx", "src/styles.css", "vite.config.js"],
+  "generatedFiles": [],
+  "wrapCases": [
+    {
+      "name": "wraps hero title in source JSX",
+      "args": { "classes": "hero-title", "tag": "h1" },
+      "expectedFile": "src/App.jsx"
+    }
+  ],
+  "runtime": {
+    "styling": "plain-css",
+    "install": ["npm", "install", "--no-audit", "--no-fund", "--loglevel=error"],
+    "devCommand": ["npx", "vite", "--host", "127.0.0.1"],
+    "readyPattern": "Local:\\s+https?://[^:]+:(\\d+)",
+    "readyTimeoutMs": 120000,
+    "probe": {
+      "expectLiveInit": true,
+      "expectConsoleClean": true
+    }
+  }
+}
diff --git a/tests/framework-fixtures/vite8-react-plain/gitignore.txt b/tests/framework-fixtures/vite8-react-plain/gitignore.txt
new file mode 100644
index 000000000..8cda9ad20
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-plain/gitignore.txt
@@ -0,0 +1,4 @@
+node_modules/
+dist/
+.vite/
+package-lock.json
diff --git a/tests/framework-fixtures/vite8-react-router-spa/files/index.html b/tests/framework-fixtures/vite8-react-router-spa/files/index.html
new file mode 100644
index 000000000..9773bc9f2
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-router-spa/files/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Vite 8 + React Router Fixture</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/tests/framework-fixtures/vite8-react-router-spa/files/package.json b/tests/framework-fixtures/vite8-react-router-spa/files/package.json
new file mode 100644
index 000000000..ee1d4c8eb
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-router-spa/files/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "vite8-react-router-spa-fixture",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host 127.0.0.1",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-router-dom": "^7.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^6.0.0",
+    "vite": "^8.0.0"
+  }
+}
diff --git a/tests/framework-fixtures/vite8-react-router-spa/files/src/main.jsx b/tests/framework-fixtures/vite8-react-router-spa/files/src/main.jsx
new file mode 100644
index 000000000..de215b63d
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-router-spa/files/src/main.jsx
@@ -0,0 +1,21 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
+import Home from './routes/Home.jsx';
+import About from './routes/About.jsx';
+import './styles.css';
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <BrowserRouter>
+      <nav className="nav">
+        <Link to="/">Home</Link>
+        <Link to="/about" data-testid="nav-about">About</Link>
+      </nav>
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/about" element={<About />} />
+      </Routes>
+    </BrowserRouter>
+  </StrictMode>,
+);
diff --git a/tests/framework-fixtures/vite8-react-router-spa/files/src/routes/About.jsx b/tests/framework-fixtures/vite8-react-router-spa/files/src/routes/About.jsx
new file mode 100644
index 000000000..ae4c31e15
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-router-spa/files/src/routes/About.jsx
@@ -0,0 +1,8 @@
+export default function About() {
+  return (
+    <main className="page">
+      <h1 className="hero-title">About Page Hero</h1>
+      <p className="hero-hook">Lives on the /about route — only mounts after navigation.</p>
+    </main>
+  );
+}
diff --git a/tests/framework-fixtures/vite8-react-router-spa/files/src/routes/Home.jsx b/tests/framework-fixtures/vite8-react-router-spa/files/src/routes/Home.jsx
new file mode 100644
index 000000000..3c022d03d
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-router-spa/files/src/routes/Home.jsx
@@ -0,0 +1,8 @@
+export default function Home() {
+  return (
+    <main className="page">
+      <h2>Home</h2>
+      <p>Welcome. The hero we'll edit lives on the About page.</p>
+    </main>
+  );
+}
diff --git a/tests/framework-fixtures/vite8-react-router-spa/files/src/styles.css b/tests/framework-fixtures/vite8-react-router-spa/files/src/styles.css
new file mode 100644
index 000000000..7d2c6e91f
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-router-spa/files/src/styles.css
@@ -0,0 +1,6 @@
+body { margin: 0; font-family: system-ui, sans-serif; }
+.nav { display: flex; gap: 1rem; padding: 1rem; border-bottom: 1px solid #eee; }
+.nav a { color: #111; text-decoration: none; }
+.page { padding: 2rem; }
+.hero-title { font-size: 2rem; margin: 0 0 0.5rem; }
+.hero-hook { color: #555; }
diff --git a/tests/framework-fixtures/vite8-react-router-spa/files/vite.config.js b/tests/framework-fixtures/vite8-react-router-spa/files/vite.config.js
new file mode 100644
index 000000000..f7ad4b565
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-router-spa/files/vite.config.js
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  server: { host: '127.0.0.1', strictPort: false },
+});
diff --git a/tests/framework-fixtures/vite8-react-router-spa/fixture.json b/tests/framework-fixtures/vite8-react-router-spa/fixture.json
new file mode 100644
index 000000000..67a73192e
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-router-spa/fixture.json
@@ -0,0 +1,46 @@
+{
+  "name": "Vite 8 + React Router 7 (multi-route SPA)",
+  "config": {
+    "files": ["index.html"],
+    "insertBefore": "</body>",
+    "commentSyntax": "html"
+  },
+  "sourceFiles": [
+    "index.html",
+    "src/main.jsx",
+    "src/routes/Home.jsx",
+    "src/routes/About.jsx",
+    "src/styles.css",
+    "vite.config.js"
+  ],
+  "generatedFiles": [],
+  "wrapCases": [
+    {
+      "name": "wraps About hero in routes/About.jsx",
+      "args": { "classes": "hero-title", "tag": "h1" },
+      "expectedFile": "src/routes/About.jsx"
+    }
+  ],
+  "runtime": {
+    "styling": "plain-css",
+    "install": ["npm", "install", "--no-audit", "--no-fund", "--loglevel=error"],
+    "devCommand": ["npx", "vite", "--host", "127.0.0.1"],
+    "readyPattern": "Local:\\s+https?://[^:]+:(\\d+)",
+    "readyTimeoutMs": 120000,
+    "preActions": [
+      { "type": "click", "selector": "[data-testid='nav-about']" },
+      { "type": "wait",  "selector": "h1.hero-title" }
+    ],
+    "reloadProbe": {
+      "preActions": [
+        { "type": "click", "selector": "[data-testid='nav-about']" },
+        { "type": "wait",  "selector": "h1.hero-title" }
+      ],
+      "expectSelector": "h1.hero-title"
+    },
+    "probe": {
+      "expectLiveInit": true,
+      "expectConsoleClean": true
+    }
+  }
+}
diff --git a/tests/framework-fixtures/vite8-react-router-spa/gitignore.txt b/tests/framework-fixtures/vite8-react-router-spa/gitignore.txt
new file mode 100644
index 000000000..8cda9ad20
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-router-spa/gitignore.txt
@@ -0,0 +1,4 @@
+node_modules/
+dist/
+.vite/
+package-lock.json
diff --git a/tests/framework-fixtures/vite8-react-styled-components/files/index.html b/tests/framework-fixtures/vite8-react-styled-components/files/index.html
new file mode 100644
index 000000000..50b2155b4
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-styled-components/files/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Vite 8 + styled-components Fixture</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/tests/framework-fixtures/vite8-react-styled-components/files/package.json b/tests/framework-fixtures/vite8-react-styled-components/files/package.json
new file mode 100644
index 000000000..cd6297789
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-styled-components/files/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "vite8-react-styled-components-fixture",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host 127.0.0.1",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "styled-components": "^6.1.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^6.0.0",
+    "vite": "^8.0.0"
+  }
+}
diff --git a/tests/framework-fixtures/vite8-react-styled-components/files/src/App.jsx b/tests/framework-fixtures/vite8-react-styled-components/files/src/App.jsx
new file mode 100644
index 000000000..bf28a9fd8
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-styled-components/files/src/App.jsx
@@ -0,0 +1,19 @@
+import styled from 'styled-components';
+
+const Page = styled.main`padding: 2rem; font-family: system-ui, sans-serif;`;
+const Hook = styled.p`color: #555;`;
+const Grid = styled.section`display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); margin-top: 1rem;`;
+const Card = styled.article`padding: 1rem; border: 1px solid #ddd; border-radius: 0.5rem;`;
+
+export default function App() {
+  return (
+    <Page className="page">
+      <h1 className="hero-title" style={{ fontSize: '2rem' }}>Vite 8 + styled-components Fixture</h1>
+      <Hook className="hero-hook">Runtime CSS-in-JS via styled-components v6.</Hook>
+      <Grid id="features" className="feature-grid">
+        <Card className="feature-card">One</Card>
+        <Card className="feature-card">Two</Card>
+      </Grid>
+    </Page>
+  );
+}
diff --git a/tests/framework-fixtures/vite8-react-styled-components/files/src/main.jsx b/tests/framework-fixtures/vite8-react-styled-components/files/src/main.jsx
new file mode 100644
index 000000000..6dab183de
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-styled-components/files/src/main.jsx
@@ -0,0 +1,9 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App.jsx';
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);
diff --git a/tests/framework-fixtures/vite8-react-styled-components/files/vite.config.js b/tests/framework-fixtures/vite8-react-styled-components/files/vite.config.js
new file mode 100644
index 000000000..f7ad4b565
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-styled-components/files/vite.config.js
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  server: { host: '127.0.0.1', strictPort: false },
+});
diff --git a/tests/framework-fixtures/vite8-react-styled-components/fixture.json b/tests/framework-fixtures/vite8-react-styled-components/fixture.json
new file mode 100644
index 000000000..52657f61c
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-styled-components/fixture.json
@@ -0,0 +1,28 @@
+{
+  "name": "Vite 8 + React + styled-components",
+  "config": {
+    "files": ["index.html"],
+    "insertBefore": "</body>",
+    "commentSyntax": "html"
+  },
+  "sourceFiles": ["index.html", "src/App.jsx", "src/main.jsx", "vite.config.js"],
+  "generatedFiles": [],
+  "wrapCases": [
+    {
+      "name": "wraps hero title in source JSX",
+      "args": { "classes": "hero-title", "tag": "h1" },
+      "expectedFile": "src/App.jsx"
+    }
+  ],
+  "runtime": {
+    "styling": "styled-components",
+    "install": ["npm", "install", "--no-audit", "--no-fund", "--loglevel=error"],
+    "devCommand": ["npx", "vite", "--host", "127.0.0.1"],
+    "readyPattern": "Local:\\s+https?://[^:]+:(\\d+)",
+    "readyTimeoutMs": 120000,
+    "probe": {
+      "expectLiveInit": true,
+      "expectConsoleClean": true
+    }
+  }
+}
diff --git a/tests/framework-fixtures/vite8-react-styled-components/gitignore.txt b/tests/framework-fixtures/vite8-react-styled-components/gitignore.txt
new file mode 100644
index 000000000..8cda9ad20
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-styled-components/gitignore.txt
@@ -0,0 +1,4 @@
+node_modules/
+dist/
+.vite/
+package-lock.json
diff --git a/tests/framework-fixtures/vite8-react-tabs/files/index.html b/tests/framework-fixtures/vite8-react-tabs/files/index.html
new file mode 100644
index 000000000..cb6757446
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-tabs/files/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Vite 8 + Tabs Fixture</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/tests/framework-fixtures/vite8-react-tabs/files/package.json b/tests/framework-fixtures/vite8-react-tabs/files/package.json
new file mode 100644
index 000000000..6719b2a08
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-tabs/files/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "vite8-react-tabs-fixture",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host 127.0.0.1",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^6.0.0",
+    "vite": "^8.0.0"
+  }
+}
diff --git a/tests/framework-fixtures/vite8-react-tabs/files/src/App.jsx b/tests/framework-fixtures/vite8-react-tabs/files/src/App.jsx
new file mode 100644
index 000000000..9ca039911
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-tabs/files/src/App.jsx
@@ -0,0 +1,41 @@
+import { useState } from 'react';
+
+export default function App() {
+  const [tab, setTab] = useState('overview');
+
+  return (
+    <main className="page">
+      <nav className="tabs" role="tablist">
+        <button
+          data-testid="tab-overview"
+          role="tab"
+          aria-selected={tab === 'overview'}
+          onClick={() => setTab('overview')}
+        >
+          Overview
+        </button>
+        <button
+          data-testid="tab-features"
+          role="tab"
+          aria-selected={tab === 'features'}
+          onClick={() => setTab('features')}
+        >
+          Features
+        </button>
+      </nav>
+
+      {tab === 'overview' && (
+        <section className="tab-panel" role="tabpanel">
+          <p>Default overview content. The hero lives in the Features tab.</p>
+        </section>
+      )}
+
+      {tab === 'features' && (
+        <section className="tab-panel" role="tabpanel">
+          <h1 className="hero-title">Features Hero</h1>
+          <p className="hero-hook">Lives in the non-default tab — only mounts when Features is active.</p>
+        </section>
+      )}
+    </main>
+  );
+}
diff --git a/tests/framework-fixtures/vite8-react-tabs/files/src/main.jsx b/tests/framework-fixtures/vite8-react-tabs/files/src/main.jsx
new file mode 100644
index 000000000..f2baba283
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-tabs/files/src/main.jsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App.jsx';
+import './styles.css';
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);
diff --git a/tests/framework-fixtures/vite8-react-tabs/files/src/styles.css b/tests/framework-fixtures/vite8-react-tabs/files/src/styles.css
new file mode 100644
index 000000000..842bd06a7
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-tabs/files/src/styles.css
@@ -0,0 +1,8 @@
+body { margin: 0; font-family: system-ui, sans-serif; }
+.page { padding: 2rem; }
+.tabs { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
+.tabs button { padding: 0.5rem 1rem; cursor: pointer; }
+.tabs button[aria-selected='true'] { background: #111; color: #fff; }
+.tab-panel { padding: 1rem; border: 1px solid #ddd; border-radius: 0.5rem; }
+.hero-title { font-size: 2rem; margin: 0 0 0.5rem; }
+.hero-hook { color: #555; }
diff --git a/tests/framework-fixtures/vite8-react-tabs/files/vite.config.js b/tests/framework-fixtures/vite8-react-tabs/files/vite.config.js
new file mode 100644
index 000000000..f7ad4b565
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-tabs/files/vite.config.js
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  server: { host: '127.0.0.1', strictPort: false },
+});
diff --git a/tests/framework-fixtures/vite8-react-tabs/fixture.json b/tests/framework-fixtures/vite8-react-tabs/fixture.json
new file mode 100644
index 000000000..b02859a6b
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-tabs/fixture.json
@@ -0,0 +1,39 @@
+{
+  "name": "Vite 8 + React + tabbed UI (hidden default)",
+  "config": {
+    "files": ["index.html"],
+    "insertBefore": "</body>",
+    "commentSyntax": "html"
+  },
+  "sourceFiles": ["index.html", "src/App.jsx", "src/main.jsx", "src/styles.css", "vite.config.js"],
+  "generatedFiles": [],
+  "wrapCases": [
+    {
+      "name": "wraps features-tab heading in source JSX",
+      "args": { "classes": "hero-title", "tag": "h1" },
+      "expectedFile": "src/App.jsx"
+    }
+  ],
+  "runtime": {
+    "styling": "plain-css",
+    "install": ["npm", "install", "--no-audit", "--no-fund", "--loglevel=error"],
+    "devCommand": ["npx", "vite", "--host", "127.0.0.1"],
+    "readyPattern": "Local:\\s+https?://[^:]+:(\\d+)",
+    "readyTimeoutMs": 120000,
+    "preActions": [
+      { "type": "click", "selector": "[data-testid='tab-features']" },
+      { "type": "wait",  "selector": "h1.hero-title" }
+    ],
+    "reloadProbe": {
+      "preActions": [
+        { "type": "click", "selector": "[data-testid='tab-features']" },
+        { "type": "wait",  "selector": "h1.hero-title" }
+      ],
+      "expectSelector": "h1.hero-title"
+    },
+    "probe": {
+      "expectLiveInit": true,
+      "expectConsoleClean": true
+    }
+  }
+}
diff --git a/tests/framework-fixtures/vite8-react-tabs/gitignore.txt b/tests/framework-fixtures/vite8-react-tabs/gitignore.txt
new file mode 100644
index 000000000..8cda9ad20
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-tabs/gitignore.txt
@@ -0,0 +1,4 @@
+node_modules/
+dist/
+.vite/
+package-lock.json
diff --git a/tests/framework-fixtures/vite8-react-tailwindv3/files/index.html b/tests/framework-fixtures/vite8-react-tailwindv3/files/index.html
new file mode 100644
index 000000000..f031559c3
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-tailwindv3/files/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Vite 8 + Tailwind v3 Fixture</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/tests/framework-fixtures/vite8-react-tailwindv3/files/package.json b/tests/framework-fixtures/vite8-react-tailwindv3/files/package.json
new file mode 100644
index 000000000..ee86006f0
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-tailwindv3/files/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "vite8-react-tailwindv3-fixture",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host 127.0.0.1",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^6.0.0",
+    "autoprefixer": "^10.4.0",
+    "postcss": "^8.4.0",
+    "tailwindcss": "^3.4.0",
+    "vite": "^8.0.0"
+  }
+}
diff --git a/tests/framework-fixtures/vite8-react-tailwindv3/files/postcss.config.js b/tests/framework-fixtures/vite8-react-tailwindv3/files/postcss.config.js
new file mode 100644
index 000000000..2aa7205d4
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-tailwindv3/files/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/tests/framework-fixtures/vite8-react-tailwindv3/files/src/App.jsx b/tests/framework-fixtures/vite8-react-tailwindv3/files/src/App.jsx
new file mode 100644
index 000000000..25247c6f4
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-tailwindv3/files/src/App.jsx
@@ -0,0 +1,12 @@
+export default function App() {
+  return (
+    <main className="page p-8">
+      <h1 className="hero-title text-4xl font-bold">Vite 8 + Tailwind v3 Fixture</h1>
+      <p className="hero-hook text-slate-600">Classic Tailwind via PostCSS.</p>
+      <section id="features" className="feature-grid grid grid-cols-2 gap-4 mt-4">
+        <article className="feature-card rounded border p-4">One</article>
+        <article className="feature-card rounded border p-4">Two</article>
+      </section>
+    </main>
+  );
+}
diff --git a/tests/framework-fixtures/vite8-react-tailwindv3/files/src/main.jsx b/tests/framework-fixtures/vite8-react-tailwindv3/files/src/main.jsx
new file mode 100644
index 000000000..f2baba283
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-tailwindv3/files/src/main.jsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App.jsx';
+import './styles.css';
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);
diff --git a/tests/framework-fixtures/vite8-react-tailwindv3/files/src/styles.css b/tests/framework-fixtures/vite8-react-tailwindv3/files/src/styles.css
new file mode 100644
index 000000000..b5c61c956
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-tailwindv3/files/src/styles.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/tests/framework-fixtures/vite8-react-tailwindv3/files/tailwind.config.js b/tests/framework-fixtures/vite8-react-tailwindv3/files/tailwind.config.js
new file mode 100644
index 000000000..694683097
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-tailwindv3/files/tailwind.config.js
@@ -0,0 +1,5 @@
+export default {
+  content: ['./index.html', './src/**/*.{js,jsx,ts,tsx}'],
+  theme: { extend: {} },
+  plugins: [],
+};
diff --git a/tests/framework-fixtures/vite8-react-tailwindv3/files/vite.config.js b/tests/framework-fixtures/vite8-react-tailwindv3/files/vite.config.js
new file mode 100644
index 000000000..f7ad4b565
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-tailwindv3/files/vite.config.js
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  server: { host: '127.0.0.1', strictPort: false },
+});
diff --git a/tests/framework-fixtures/vite8-react-tailwindv3/fixture.json b/tests/framework-fixtures/vite8-react-tailwindv3/fixture.json
new file mode 100644
index 000000000..06b2ee871
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-tailwindv3/fixture.json
@@ -0,0 +1,28 @@
+{
+  "name": "Vite 8 + React + Tailwind v3",
+  "config": {
+    "files": ["index.html"],
+    "insertBefore": "</body>",
+    "commentSyntax": "html"
+  },
+  "sourceFiles": ["index.html", "src/App.jsx", "src/main.jsx", "src/styles.css", "vite.config.js", "tailwind.config.js", "postcss.config.js"],
+  "generatedFiles": [],
+  "wrapCases": [
+    {
+      "name": "wraps hero title in source JSX",
+      "args": { "classes": "hero-title", "tag": "h1" },
+      "expectedFile": "src/App.jsx"
+    }
+  ],
+  "runtime": {
+    "styling": "tailwind-v3",
+    "install": ["npm", "install", "--no-audit", "--no-fund", "--loglevel=error"],
+    "devCommand": ["npx", "vite", "--host", "127.0.0.1"],
+    "readyPattern": "Local:\\s+https?://[^:]+:(\\d+)",
+    "readyTimeoutMs": 120000,
+    "probe": {
+      "expectLiveInit": true,
+      "expectConsoleClean": true
+    }
+  }
+}
diff --git a/tests/framework-fixtures/vite8-react-tailwindv3/gitignore.txt b/tests/framework-fixtures/vite8-react-tailwindv3/gitignore.txt
new file mode 100644
index 000000000..8cda9ad20
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-tailwindv3/gitignore.txt
@@ -0,0 +1,4 @@
+node_modules/
+dist/
+.vite/
+package-lock.json
diff --git a/tests/framework-fixtures/vite8-react-tailwindv4/files/index.html b/tests/framework-fixtures/vite8-react-tailwindv4/files/index.html
new file mode 100644
index 000000000..b9d8c2f2c
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-tailwindv4/files/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Vite 8 + Tailwind v4 Fixture</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/tests/framework-fixtures/vite8-react-tailwindv4/files/package.json b/tests/framework-fixtures/vite8-react-tailwindv4/files/package.json
new file mode 100644
index 000000000..c74861714
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-tailwindv4/files/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "vite8-react-tailwindv4-fixture",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host 127.0.0.1",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.2.0",
+    "@vitejs/plugin-react": "^6.0.0",
+    "tailwindcss": "^4.2.0",
+    "vite": "^8.0.0"
+  }
+}
diff --git a/tests/framework-fixtures/vite8-react-tailwindv4/files/src/App.jsx b/tests/framework-fixtures/vite8-react-tailwindv4/files/src/App.jsx
new file mode 100644
index 000000000..2f2202e35
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-tailwindv4/files/src/App.jsx
@@ -0,0 +1,12 @@
+export default function App() {
+  return (
+    <main className="page p-8">
+      <h1 className="hero-title text-4xl font-bold">Vite 8 + Tailwind v4 Fixture</h1>
+      <p className="hero-hook text-slate-600">Minimal React tree for live-mode E2E tests.</p>
+      <section id="features" className="feature-grid grid grid-cols-2 gap-4 mt-4">
+        <article className="feature-card rounded border p-4">One</article>
+        <article className="feature-card rounded border p-4">Two</article>
+      </section>
+    </main>
+  );
+}
diff --git a/tests/framework-fixtures/vite8-react-tailwindv4/files/src/main.jsx b/tests/framework-fixtures/vite8-react-tailwindv4/files/src/main.jsx
new file mode 100644
index 000000000..f2baba283
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-tailwindv4/files/src/main.jsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App.jsx';
+import './styles.css';
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);
diff --git a/tests/framework-fixtures/vite8-react-tailwindv4/files/src/styles.css b/tests/framework-fixtures/vite8-react-tailwindv4/files/src/styles.css
new file mode 100644
index 000000000..f1d8c73cd
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-tailwindv4/files/src/styles.css
@@ -0,0 +1 @@
+@import "tailwindcss";
diff --git a/tests/framework-fixtures/vite8-react-tailwindv4/files/vite.config.js b/tests/framework-fixtures/vite8-react-tailwindv4/files/vite.config.js
new file mode 100644
index 000000000..75e84866d
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-tailwindv4/files/vite.config.js
@@ -0,0 +1,8 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import tailwindcss from '@tailwindcss/vite';
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  server: { host: '127.0.0.1', strictPort: false },
+});
diff --git a/tests/framework-fixtures/vite8-react-tailwindv4/fixture.json b/tests/framework-fixtures/vite8-react-tailwindv4/fixture.json
new file mode 100644
index 000000000..85577e8f0
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-tailwindv4/fixture.json
@@ -0,0 +1,28 @@
+{
+  "name": "Vite 8 + React + Tailwind v4",
+  "config": {
+    "files": ["index.html"],
+    "insertBefore": "</body>",
+    "commentSyntax": "html"
+  },
+  "sourceFiles": ["index.html", "src/App.jsx", "src/main.jsx", "src/styles.css", "vite.config.js"],
+  "generatedFiles": [],
+  "wrapCases": [
+    {
+      "name": "wraps hero title in source JSX",
+      "args": { "classes": "hero-title", "tag": "h1" },
+      "expectedFile": "src/App.jsx"
+    }
+  ],
+  "runtime": {
+    "styling": "tailwind-v4",
+    "install": ["npm", "install", "--no-audit", "--no-fund", "--loglevel=error"],
+    "devCommand": ["npx", "vite", "--host", "127.0.0.1"],
+    "readyPattern": "Local:\\s+https?://[^:]+:(\\d+)",
+    "readyTimeoutMs": 120000,
+    "probe": {
+      "expectLiveInit": true,
+      "expectConsoleClean": true
+    }
+  }
+}
diff --git a/tests/framework-fixtures/vite8-react-tailwindv4/gitignore.txt b/tests/framework-fixtures/vite8-react-tailwindv4/gitignore.txt
new file mode 100644
index 000000000..8cda9ad20
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-tailwindv4/gitignore.txt
@@ -0,0 +1,4 @@
+node_modules/
+dist/
+.vite/
+package-lock.json
diff --git a/tests/framework-fixtures/vite8-react-ts/files/index.html b/tests/framework-fixtures/vite8-react-ts/files/index.html
new file mode 100644
index 000000000..e3d50d0e1
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-ts/files/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Vite 8 + React + TS Fixture</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/tests/framework-fixtures/vite8-react-ts/files/package.json b/tests/framework-fixtures/vite8-react-ts/files/package.json
new file mode 100644
index 000000000..3e6d7fdaf
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-ts/files/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "vite8-react-ts-fixture",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host 127.0.0.1",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^6.0.0",
+    "typescript": "^5.6.0",
+    "vite": "^8.0.0"
+  }
+}
diff --git a/tests/framework-fixtures/vite8-react-ts/files/src/App.tsx b/tests/framework-fixtures/vite8-react-ts/files/src/App.tsx
new file mode 100644
index 000000000..ce7e508e7
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-ts/files/src/App.tsx
@@ -0,0 +1,12 @@
+export default function App() {
+  return (
+    <main className="page">
+      <h1 className="hero-title">Vite 8 + TS Fixture</h1>
+      <p className="hero-hook">Minimal typed React tree for live-mode E2E tests.</p>
+      <section id="features" className="feature-grid">
+        <article className="feature-card">One</article>
+        <article className="feature-card">Two</article>
+      </section>
+    </main>
+  );
+}
diff --git a/tests/framework-fixtures/vite8-react-ts/files/src/main.tsx b/tests/framework-fixtures/vite8-react-ts/files/src/main.tsx
new file mode 100644
index 000000000..cf91907e6
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-ts/files/src/main.tsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App';
+import './styles.css';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);
diff --git a/tests/framework-fixtures/vite8-react-ts/files/src/styles.css b/tests/framework-fixtures/vite8-react-ts/files/src/styles.css
new file mode 100644
index 000000000..62fbb5e89
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-ts/files/src/styles.css
@@ -0,0 +1,6 @@
+body { margin: 0; font-family: system-ui, sans-serif; }
+.page { padding: 2rem; }
+.hero-title { font-size: 2rem; }
+.hero-hook { color: #555; }
+.feature-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
+.feature-card { padding: 1rem; border: 1px solid #ddd; border-radius: 0.5rem; }
diff --git a/tests/framework-fixtures/vite8-react-ts/files/tsconfig.json b/tests/framework-fixtures/vite8-react-ts/files/tsconfig.json
new file mode 100644
index 000000000..937d8a1b7
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-ts/files/tsconfig.json
@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "types": ["vite/client"]
+  },
+  "include": ["src", "vite.config.ts"]
+}
diff --git a/tests/framework-fixtures/vite8-react-ts/files/vite.config.ts b/tests/framework-fixtures/vite8-react-ts/files/vite.config.ts
new file mode 100644
index 000000000..f7ad4b565
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-ts/files/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  server: { host: '127.0.0.1', strictPort: false },
+});
diff --git a/tests/framework-fixtures/vite8-react-ts/fixture.json b/tests/framework-fixtures/vite8-react-ts/fixture.json
new file mode 100644
index 000000000..fdb0896a0
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-ts/fixture.json
@@ -0,0 +1,28 @@
+{
+  "name": "Vite 8 + React + TypeScript",
+  "config": {
+    "files": ["index.html"],
+    "insertBefore": "</body>",
+    "commentSyntax": "html"
+  },
+  "sourceFiles": ["index.html", "src/App.tsx", "src/main.tsx", "src/styles.css", "vite.config.ts", "tsconfig.json"],
+  "generatedFiles": [],
+  "wrapCases": [
+    {
+      "name": "wraps hero title in source TSX",
+      "args": { "classes": "hero-title", "tag": "h1" },
+      "expectedFile": "src/App.tsx"
+    }
+  ],
+  "runtime": {
+    "styling": "plain-css-ts",
+    "install": ["npm", "install", "--no-audit", "--no-fund", "--loglevel=error"],
+    "devCommand": ["npx", "vite", "--host", "127.0.0.1"],
+    "readyPattern": "Local:\\s+https?://[^:]+:(\\d+)",
+    "readyTimeoutMs": 120000,
+    "probe": {
+      "expectLiveInit": true,
+      "expectConsoleClean": true
+    }
+  }
+}
diff --git a/tests/framework-fixtures/vite8-react-ts/gitignore.txt b/tests/framework-fixtures/vite8-react-ts/gitignore.txt
new file mode 100644
index 000000000..8cda9ad20
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-ts/gitignore.txt
@@ -0,0 +1,4 @@
+node_modules/
+dist/
+.vite/
+package-lock.json
diff --git a/tests/framework-fixtures/vite8-react-unocss/files/index.html b/tests/framework-fixtures/vite8-react-unocss/files/index.html
new file mode 100644
index 000000000..6b52889fa
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-unocss/files/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Vite 8 + UnoCSS Fixture</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/tests/framework-fixtures/vite8-react-unocss/files/package.json b/tests/framework-fixtures/vite8-react-unocss/files/package.json
new file mode 100644
index 000000000..6c765379e
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-unocss/files/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "vite8-react-unocss-fixture",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host 127.0.0.1",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@unocss/vite": "^66.0.0",
+    "@vitejs/plugin-react": "^6.0.0",
+    "unocss": "^66.0.0",
+    "vite": "^8.0.0"
+  }
+}
diff --git a/tests/framework-fixtures/vite8-react-unocss/files/src/App.jsx b/tests/framework-fixtures/vite8-react-unocss/files/src/App.jsx
new file mode 100644
index 000000000..fd5a2763c
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-unocss/files/src/App.jsx
@@ -0,0 +1,12 @@
+export default function App() {
+  return (
+    <main className="page p-8 font-sans">
+      <h1 className="hero-title text-4xl font-bold">Vite 8 + UnoCSS Fixture</h1>
+      <p className="hero-hook text-gray-600">Atomic CSS on demand via the UnoCSS Vite plugin.</p>
+      <section id="features" className="feature-grid grid grid-cols-2 gap-4 mt-4">
+        <article className="feature-card rounded border p-4">One</article>
+        <article className="feature-card rounded border p-4">Two</article>
+      </section>
+    </main>
+  );
+}
diff --git a/tests/framework-fixtures/vite8-react-unocss/files/src/main.jsx b/tests/framework-fixtures/vite8-react-unocss/files/src/main.jsx
new file mode 100644
index 000000000..77c5dc865
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-unocss/files/src/main.jsx
@@ -0,0 +1,10 @@
+import 'virtual:uno.css';
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App.jsx';
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);
diff --git a/tests/framework-fixtures/vite8-react-unocss/files/uno.config.js b/tests/framework-fixtures/vite8-react-unocss/files/uno.config.js
new file mode 100644
index 000000000..4aa5d6e84
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-unocss/files/uno.config.js
@@ -0,0 +1,5 @@
+import { defineConfig, presetUno } from 'unocss';
+
+export default defineConfig({
+  presets: [presetUno()],
+});
diff --git a/tests/framework-fixtures/vite8-react-unocss/files/vite.config.js b/tests/framework-fixtures/vite8-react-unocss/files/vite.config.js
new file mode 100644
index 000000000..aafaf3aad
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-unocss/files/vite.config.js
@@ -0,0 +1,8 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import UnoCSS from 'unocss/vite';
+
+export default defineConfig({
+  plugins: [UnoCSS(), react()],
+  server: { host: '127.0.0.1', strictPort: false },
+});
diff --git a/tests/framework-fixtures/vite8-react-unocss/fixture.json b/tests/framework-fixtures/vite8-react-unocss/fixture.json
new file mode 100644
index 000000000..71cd4eb9d
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-unocss/fixture.json
@@ -0,0 +1,28 @@
+{
+  "name": "Vite 8 + React + UnoCSS",
+  "config": {
+    "files": ["index.html"],
+    "insertBefore": "</body>",
+    "commentSyntax": "html"
+  },
+  "sourceFiles": ["index.html", "src/App.jsx", "src/main.jsx", "vite.config.js", "uno.config.js"],
+  "generatedFiles": [],
+  "wrapCases": [
+    {
+      "name": "wraps hero title in source JSX",
+      "args": { "classes": "hero-title", "tag": "h1" },
+      "expectedFile": "src/App.jsx"
+    }
+  ],
+  "runtime": {
+    "styling": "unocss",
+    "install": ["npm", "install", "--no-audit", "--no-fund", "--loglevel=error"],
+    "devCommand": ["npx", "vite", "--host", "127.0.0.1"],
+    "readyPattern": "Local:\\s+https?://[^:]+:(\\d+)",
+    "readyTimeoutMs": 120000,
+    "probe": {
+      "expectLiveInit": true,
+      "expectConsoleClean": true
+    }
+  }
+}
diff --git a/tests/framework-fixtures/vite8-react-unocss/gitignore.txt b/tests/framework-fixtures/vite8-react-unocss/gitignore.txt
new file mode 100644
index 000000000..8cda9ad20
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-unocss/gitignore.txt
@@ -0,0 +1,4 @@
+node_modules/
+dist/
+.vite/
+package-lock.json
diff --git a/tests/framework-fixtures/vite8-react-vanilla-extract/files/index.html b/tests/framework-fixtures/vite8-react-vanilla-extract/files/index.html
new file mode 100644
index 000000000..61b1b20bd
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-vanilla-extract/files/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Vite 8 + vanilla-extract Fixture</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/tests/framework-fixtures/vite8-react-vanilla-extract/files/package.json b/tests/framework-fixtures/vite8-react-vanilla-extract/files/package.json
new file mode 100644
index 000000000..0e4a6c36c
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-vanilla-extract/files/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "vite8-react-vanilla-extract-fixture",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host 127.0.0.1",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@vanilla-extract/css": "^1.20.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@vanilla-extract/vite-plugin": "^5.2.0",
+    "@vitejs/plugin-react": "^6.0.0",
+    "vite": "^8.0.0"
+  }
+}
diff --git a/tests/framework-fixtures/vite8-react-vanilla-extract/files/src/App.jsx b/tests/framework-fixtures/vite8-react-vanilla-extract/files/src/App.jsx
new file mode 100644
index 000000000..37aa66c81
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-vanilla-extract/files/src/App.jsx
@@ -0,0 +1,14 @@
+import * as s from './styles.css.js';
+
+export default function App() {
+  return (
+    <main className={`page ${s.page}`}>
+      <h1 className={`hero-title ${s.heroTitle}`}>Vite 8 + vanilla-extract Fixture</h1>
+      <p className={`hero-hook ${s.heroHook}`}>Zero-runtime CSS-in-TS via a Vite plugin.</p>
+      <section id="features" className={`feature-grid ${s.featureGrid}`}>
+        <article className={`feature-card ${s.featureCard}`}>One</article>
+        <article className={`feature-card ${s.featureCard}`}>Two</article>
+      </section>
+    </main>
+  );
+}
diff --git a/tests/framework-fixtures/vite8-react-vanilla-extract/files/src/main.jsx b/tests/framework-fixtures/vite8-react-vanilla-extract/files/src/main.jsx
new file mode 100644
index 000000000..6dab183de
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-vanilla-extract/files/src/main.jsx
@@ -0,0 +1,9 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App.jsx';
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);
diff --git a/tests/framework-fixtures/vite8-react-vanilla-extract/files/src/styles.css.js b/tests/framework-fixtures/vite8-react-vanilla-extract/files/src/styles.css.js
new file mode 100644
index 000000000..64386687c
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-vanilla-extract/files/src/styles.css.js
@@ -0,0 +1,20 @@
+import { style } from '@vanilla-extract/css';
+
+export const page = style({
+  padding: '2rem',
+  fontFamily: 'system-ui, sans-serif',
+});
+
+export const heroTitle = style({ fontSize: '2rem' });
+export const heroHook = style({ color: '#555' });
+export const featureGrid = style({
+  display: 'grid',
+  gap: '1rem',
+  gridTemplateColumns: 'repeat(2, 1fr)',
+  marginTop: '1rem',
+});
+export const featureCard = style({
+  padding: '1rem',
+  border: '1px solid #ddd',
+  borderRadius: '0.5rem',
+});
diff --git a/tests/framework-fixtures/vite8-react-vanilla-extract/files/vite.config.js b/tests/framework-fixtures/vite8-react-vanilla-extract/files/vite.config.js
new file mode 100644
index 000000000..5469db8db
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-vanilla-extract/files/vite.config.js
@@ -0,0 +1,8 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
+
+export default defineConfig({
+  plugins: [react(), vanillaExtractPlugin()],
+  server: { host: '127.0.0.1', strictPort: false },
+});
diff --git a/tests/framework-fixtures/vite8-react-vanilla-extract/fixture.json b/tests/framework-fixtures/vite8-react-vanilla-extract/fixture.json
new file mode 100644
index 000000000..413314f8e
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-vanilla-extract/fixture.json
@@ -0,0 +1,28 @@
+{
+  "name": "Vite 8 + React + vanilla-extract",
+  "config": {
+    "files": ["index.html"],
+    "insertBefore": "</body>",
+    "commentSyntax": "html"
+  },
+  "sourceFiles": ["index.html", "src/App.jsx", "src/main.jsx", "src/styles.css.js", "vite.config.js"],
+  "generatedFiles": [],
+  "wrapCases": [
+    {
+      "name": "wraps hero title in source JSX",
+      "args": { "classes": "hero-title", "tag": "h1" },
+      "expectedFile": "src/App.jsx"
+    }
+  ],
+  "runtime": {
+    "styling": "vanilla-extract",
+    "install": ["npm", "install", "--no-audit", "--no-fund", "--loglevel=error"],
+    "devCommand": ["npx", "vite", "--host", "127.0.0.1"],
+    "readyPattern": "Local:\\s+https?://[^:]+:(\\d+)",
+    "readyTimeoutMs": 120000,
+    "probe": {
+      "expectLiveInit": true,
+      "expectConsoleClean": true
+    }
+  }
+}
diff --git a/tests/framework-fixtures/vite8-react-vanilla-extract/gitignore.txt b/tests/framework-fixtures/vite8-react-vanilla-extract/gitignore.txt
new file mode 100644
index 000000000..8cda9ad20
--- /dev/null
+++ b/tests/framework-fixtures/vite8-react-vanilla-extract/gitignore.txt
@@ -0,0 +1,4 @@
+node_modules/
+dist/
+.vite/
+package-lock.json
diff --git a/tests/framework-fixtures/vite8-sveltekit/files/package.json b/tests/framework-fixtures/vite8-sveltekit/files/package.json
new file mode 100644
index 000000000..0efe6f940
--- /dev/null
+++ b/tests/framework-fixtures/vite8-sveltekit/files/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "vite8-sveltekit-fixture",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite dev --host 127.0.0.1",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "^7.0.0",
+    "@sveltejs/kit": "^2.58.0",
+    "@sveltejs/vite-plugin-svelte": "^7.0.0",
+    "svelte": "^5.0.0",
+    "vite": "^8.0.0"
+  }
+}
diff --git a/tests/framework-fixtures/vite8-sveltekit/files/src/app.html b/tests/framework-fixtures/vite8-sveltekit/files/src/app.html
new file mode 100644
index 000000000..d4c1b17c6
--- /dev/null
+++ b/tests/framework-fixtures/vite8-sveltekit/files/src/app.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Vite 8 + SvelteKit Fixture</title>
+    %sveltekit.head%
+  </head>
+  <body data-sveltekit-preload-data="hover">
+    <div style="display: contents">%sveltekit.body%</div>
+  </body>
+</html>
diff --git a/tests/framework-fixtures/vite8-sveltekit/files/src/routes/+layout.svelte b/tests/framework-fixtures/vite8-sveltekit/files/src/routes/+layout.svelte
new file mode 100644
index 000000000..6466f5d07
--- /dev/null
+++ b/tests/framework-fixtures/vite8-sveltekit/files/src/routes/+layout.svelte
@@ -0,0 +1,5 @@
+<script>
+  let { children } = $props();
+</script>
+
+{@render children?.()}
diff --git a/tests/framework-fixtures/vite8-sveltekit/files/src/routes/+page.svelte b/tests/framework-fixtures/vite8-sveltekit/files/src/routes/+page.svelte
new file mode 100644
index 000000000..83e4c5545
--- /dev/null
+++ b/tests/framework-fixtures/vite8-sveltekit/files/src/routes/+page.svelte
@@ -0,0 +1,8 @@
+<main class="page">
+  <h1 class="hero-title">Vite 8 + SvelteKit Fixture</h1>
+  <p class="hero-hook">Minimal SvelteKit route for live-mode E2E tests.</p>
+  <section id="features" class="feature-grid">
+    <article class="feature-card">One</article>
+    <article class="feature-card">Two</article>
+  </section>
+</main>
diff --git a/tests/framework-fixtures/vite8-sveltekit/files/svelte.config.js b/tests/framework-fixtures/vite8-sveltekit/files/svelte.config.js
new file mode 100644
index 000000000..bbc8b7164
--- /dev/null
+++ b/tests/framework-fixtures/vite8-sveltekit/files/svelte.config.js
@@ -0,0 +1,7 @@
+import adapter from '@sveltejs/adapter-auto';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
+export default {
+  preprocess: vitePreprocess(),
+  kit: { adapter: adapter() },
+};
diff --git a/tests/framework-fixtures/vite8-sveltekit/files/vite.config.js b/tests/framework-fixtures/vite8-sveltekit/files/vite.config.js
new file mode 100644
index 000000000..05feadbc1
--- /dev/null
+++ b/tests/framework-fixtures/vite8-sveltekit/files/vite.config.js
@@ -0,0 +1,7 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  plugins: [sveltekit()],
+  server: { host: '127.0.0.1', strictPort: false },
+});
diff --git a/tests/framework-fixtures/vite8-sveltekit/fixture.json b/tests/framework-fixtures/vite8-sveltekit/fixture.json
new file mode 100644
index 000000000..656fca870
--- /dev/null
+++ b/tests/framework-fixtures/vite8-sveltekit/fixture.json
@@ -0,0 +1,28 @@
+{
+  "name": "Vite 8 + SvelteKit 2 + Svelte 5",
+  "config": {
+    "files": ["src/app.html"],
+    "insertBefore": "</body>",
+    "commentSyntax": "html"
+  },
+  "sourceFiles": ["src/app.html", "src/routes/+page.svelte", "src/routes/+layout.svelte", "svelte.config.js", "vite.config.js"],
+  "generatedFiles": [],
+  "wrapCases": [
+    {
+      "name": "wraps hero title in route source",
+      "args": { "classes": "hero-title", "tag": "h1" },
+      "expectedFile": "src/routes/+page.svelte"
+    }
+  ],
+  "runtime": {
+    "styling": "plain-css",
+    "install": ["npm", "install", "--no-audit", "--no-fund", "--loglevel=error"],
+    "devCommand": ["npx", "vite", "dev", "--host", "127.0.0.1"],
+    "readyPattern": "Local:\\s+https?://[^:]+:(\\d+)",
+    "readyTimeoutMs": 120000,
+    "probe": {
+      "expectLiveInit": true,
+      "expectConsoleClean": true
+    }
+  }
+}
diff --git a/tests/framework-fixtures/vite8-sveltekit/gitignore.txt b/tests/framework-fixtures/vite8-sveltekit/gitignore.txt
new file mode 100644
index 000000000..7645cd701
--- /dev/null
+++ b/tests/framework-fixtures/vite8-sveltekit/gitignore.txt
@@ -0,0 +1,5 @@
+node_modules/
+.svelte-kit/
+build/
+dist/
+package-lock.json
diff --git a/tests/live-e2e.test.mjs b/tests/live-e2e.test.mjs
new file mode 100644
index 000000000..46edecfe9
--- /dev/null
+++ b/tests/live-e2e.test.mjs
@@ -0,0 +1,405 @@
+/**
+ * End-to-end live-mode tests — full click-to-accept cycle.
+ *
+ * For every framework fixture with a `runtime` block in fixture.json, this
+ * runner exercises the entire user-visible chain:
+ *
+ *   1. Stage → install → start live-server + dev server → inject script tag
+ *   2. Open Playwright Chromium, assert the live handshake fires
+ *   3. Spawn a deterministic fake-agent polling loop in this same process
+ *   4. Drive the bar UI: pick element → Go → wait CYCLING → cycle → Accept
+ *   5. Assert source rewrite (variants block, then accepted-only after accept)
+ *   6. Assert DOM reflects the accepted variant via getComputedStyle
+ *   7. Tear down (browser, dev server, agent loop, live-server, tmp)
+ *
+ * The fake agent is pluggable — see tests/live-e2e/agent.mjs. A future
+ * LLM-backed agent slots in by implementing the same VariantAgent interface.
+ *
+ * Run with:  bun run test:live-e2e
+ */
+
+import { describe, it, before, after } from 'node:test';
+import assert from 'node:assert/strict';
+import { existsSync, readdirSync, readFileSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import { createFakeAgent } from './live-e2e/agent.mjs';
+import { bootFixtureSession, FIXTURES_DIR } from './live-e2e/session.mjs';
+import {
+  clickAccept,
+  clickGo,
+  clickNext,
+  getVisibleVariant,
+  pickElement,
+  waitForCycling,
+  waitForHandshake,
+} from './live-e2e/ui.mjs';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+// Discover fixtures that opt into the runtime E2E pass.
+function listRuntimeFixtures() {
+  const names = readdirSync(FIXTURES_DIR, { withFileTypes: true })
+    .filter((e) => e.isDirectory())
+    .map((e) => e.name);
+
+  const out = [];
+  for (const name of names) {
+    const fixturePath = join(FIXTURES_DIR, name, 'fixture.json');
+    if (!existsSync(fixturePath)) continue;
+    const fixture = JSON.parse(readFileSync(fixturePath, 'utf-8'));
+    if (fixture.runtime) out.push({ name, fixture });
+  }
+  return out;
+}
+
+const allFixtures = listRuntimeFixtures();
+
+// During development of the full-cycle test, a single fixture is much faster
+// to iterate on. Set IMPECCABLE_E2E_ONLY=<name> to scope the run.
+const onlyName = process.env.IMPECCABLE_E2E_ONLY;
+const fixtures = onlyName
+  ? allFixtures.filter((f) => f.name === onlyName)
+  : allFixtures;
+
+if (fixtures.length === 0) {
+  describe('live-e2e (no runtime fixtures registered)', () => {
+    it('is a no-op', () => assert.ok(true));
+  });
+}
+
+let playwright;
+let browser;
+
+before(async () => {
+  if (fixtures.length === 0) return;
+  try {
+    playwright = await import('playwright');
+  } catch (err) {
+    throw new Error(
+      `Playwright is required for live-e2e tests (${err.message}). Run: npx playwright install chromium`,
+    );
+  }
+  try {
+    browser = await playwright.chromium.launch({ headless: true });
+  } catch (err) {
+    throw new Error(`Failed to launch Chromium (${err.message}). Run: npx playwright install chromium`);
+  }
+});
+
+after(async () => {
+  if (browser) await browser.close();
+});
+
+for (const { name, fixture } of fixtures) {
+  describe(`live-e2e · ${name} (${fixture.runtime.styling || 'unknown-styling'})`, () => {
+    it('drives the full click → Go → cycle → accept cycle', async (t) => {
+      // Fixtures may declare `runtime.knownLimitation` to flag a scenario
+      // that exposes a genuine live-mode gap rather than a test bug. The
+      // test still attempts the full chain but does not fail the suite when
+      // the documented failure mode appears — it surfaces the diagnostic so
+      // the limitation is visible in the run output.
+      const knownLimitation = fixture.runtime.knownLimitation;
+
+      t.diagnostic(`Booting fixture ${name}`);
+      const session = await bootFixtureSession({
+        name,
+        fixture,
+        browser,
+        agent: createFakeAgent(),
+        log: (m) => t.diagnostic(m),
+      });
+
+      const { page, tmp, consoleErrors, teardown } = session;
+      const expectedCount = 3;
+      const pickSelector = fixture.runtime.pickSelector || 'h1.hero-title';
+
+      try {
+        // 1. Handshake
+        t.diagnostic('Waiting for live handshake');
+        await waitForHandshake(page);
+
+        // 2. preActions — fixtures with hidden/conditional content (modals,
+        //    tabs, routes) drive the page into the right state before pick.
+        if (fixture.runtime.preActions) {
+          t.diagnostic(`Running ${fixture.runtime.preActions.length} preAction(s)`);
+          await runPreActions(page, fixture.runtime.preActions);
+        }
+
+        // 3. Pick the target element
+        t.diagnostic(`Picking ${pickSelector}`);
+        await pickElement(page, pickSelector);
+
+        if (process.env.IMPECCABLE_E2E_DEBUG) {
+          const barText = await page.evaluate(() => {
+            const bar = document.querySelector('#impeccable-live-bar');
+            return bar ? { display: bar.style.display, text: bar.textContent || '', html: bar.innerHTML.slice(0, 500) } : null;
+          });
+          t.diagnostic(`Bar after pick: ${JSON.stringify(barText)}`);
+        }
+
+        // 3. Click Go (default action 'impeccable', default count 3 — fixture-stable)
+        t.diagnostic('Clicking Go');
+        await clickGo(page);
+
+        // 4. Wait for the agent's variants to land (HMR + MutationObserver).
+        //    For fixtures whose picked element lives inside a conditional
+        //    render (modal, tab, route), HMR can remount the parent and lose
+        //    the open/active state — the wrapper exists in source but isn't
+        //    in the DOM, so MutationObserver never fires. Live mode now
+        //    surfaces a toast asking the user to retrace the path; we mirror
+        //    that here by re-running preActions on the first short timeout.
+        t.diagnostic(`Waiting for CYCLING state with ${expectedCount} variants`);
+        let cyclingReached = false;
+        if (fixture.runtime.preActions) {
+          try {
+            await waitForCycling(page, expectedCount, { timeout: 5_000 });
+            cyclingReached = true;
+          } catch {
+            t.diagnostic('Cycling not reached in 5s — retracing preActions');
+            await runPreActions(page, fixture.runtime.preActions);
+          }
+        }
+        try {
+          if (!cyclingReached) await waitForCycling(page, expectedCount);
+        } catch (err) {
+          if (process.env.IMPECCABLE_E2E_DEBUG) {
+            const variantCount = await page.evaluate(() =>
+              document.querySelectorAll('[data-impeccable-variant]').length,
+            );
+            const barInfo = await page.evaluate(() => {
+              const bars = document.querySelectorAll('#impeccable-live-bar');
+              return {
+                count: bars.length,
+                bars: [...bars].map((bar) => ({
+                  display: bar.style.display,
+                  opacity: bar.style.opacity,
+                  text: bar.textContent || '',
+                  innerHtml: bar.innerHTML.slice(0, 600),
+                })),
+                __init: window.__IMPECCABLE_LIVE_INIT__,
+              };
+            });
+            t.diagnostic(`waitForCycling failed; variants in DOM: ${variantCount}`);
+            t.diagnostic(`Bar state: ${JSON.stringify(barInfo)}`);
+            t.diagnostic(`--- dev server tail ---\n${session.dev.log()}`);
+          }
+          throw err;
+        }
+
+        // 5. Source-side check: wrapper + style + variants are present
+        const sourceFile = await locateSessionFile(tmp);
+        const after = readFileSync(sourceFile, 'utf-8');
+        assert.match(after, /data-impeccable-variants="/, 'wrapper inserted');
+        assert.match(after, /<style data-impeccable-css="/, 'colocated <style> block present');
+        assert.match(after, /@scope \(\[data-impeccable-variant="1"\]\)/, 'scoped CSS for variant 1');
+        assert.match(after, /@scope \(\[data-impeccable-variant="2"\]\)/, 'scoped CSS for variant 2');
+        assert.match(after, /@scope \(\[data-impeccable-variant="3"\]\)/, 'scoped CSS for variant 3');
+        assert.match(after, /data-impeccable-params=/, 'data-impeccable-params manifest emitted');
+        // Sanity-check the param manifest covers all three kinds across the set.
+        for (const kind of ['range', 'steps', 'toggle']) {
+          assert.match(after, new RegExp(`"kind"\\s*:\\s*"${kind}"`), `param kind ${kind} present`);
+        }
+
+        // 6. Cycle to variant 2 (the bold one in the fake agent)
+        t.diagnostic('Cycling to variant 2');
+        await clickNext(page);
+        const visible = await getVisibleVariant(page);
+        assert.equal(visible, 2, 'variant 2 visible after one Next');
+
+        // 7. Accept variant 2
+        t.diagnostic('Accepting variant 2');
+        await clickAccept(page);
+
+        // 8. Wait for live-accept + the agent's carbonize cleanup to land.
+        //    File-side: wrapper, all variants, and carbonize markers gone;
+        //    only the accepted inner element survives.
+        t.diagnostic('Waiting for accept + carbonize cleanup to land');
+        const final = await waitForSourceClean(sourceFile, 20_000);
+        assert.doesNotMatch(final, /data-impeccable-variants="/,    'variants wrapper removed');
+        assert.doesNotMatch(final, /impeccable-variants-start/,      'variants-start marker removed');
+        assert.doesNotMatch(final, /impeccable-carbonize-start/,     'carbonize-start marker removed');
+        assert.doesNotMatch(final, /impeccable-carbonize-end/,       'carbonize-end marker removed');
+        assert.doesNotMatch(final, /data-impeccable-variant="/,      'no leftover variant scaffolding');
+        assert.match(final, /<h1[^>]*(class|className)="hero-title"/, 'accepted h1 survives');
+
+        // 9. DOM-side: at least one matching element, none inside any wrapper.
+        await page.waitForFunction(
+          (sel) => {
+            const all = document.querySelectorAll(sel);
+            if (all.length < 1) return false;
+            for (const el of all) {
+              if (el.closest('[data-impeccable-variants],[data-impeccable-variant]')) return false;
+            }
+            return true;
+          },
+          pickSelector,
+          { timeout: 20_000 },
+        );
+
+        // 9b. reloadProbe — fixtures with conditional render assert that the
+        //     accepted variant survives a full page reload. The picked element
+        //     may be hidden by default (closed modal, non-default tab); the
+        //     probe re-runs preActions to bring it back into the DOM.
+        if (fixture.runtime.reloadProbe) {
+          t.diagnostic('Running reloadProbe (reload + reach + assert)');
+          await page.reload({ waitUntil: 'domcontentloaded' });
+          if (fixture.runtime.reloadProbe.preActions) {
+            await runPreActions(page, fixture.runtime.reloadProbe.preActions);
+          }
+          const expectSelector = fixture.runtime.reloadProbe.expectSelector || pickSelector;
+          await page.waitForSelector(expectSelector, { timeout: 10_000 });
+        }
+
+        // 10. Console hygiene — no errors during the whole flow.
+        if (fixture.runtime.probe?.expectConsoleClean) {
+          const realErrors = consoleErrors.filter((e) =>
+            !/(Download the React DevTools|StrictMode|Failed to load resource: the server responded with a status of 404)/i.test(e),
+          );
+          if (realErrors.length > 0) {
+            t.diagnostic('--- console errors ---');
+            for (const e of realErrors) t.diagnostic(e);
+            t.diagnostic('--- final source ---');
+            t.diagnostic(readFileSync(sourceFile, 'utf-8'));
+          }
+          assert.equal(
+            realErrors.length,
+            0,
+            `expected clean console, got:\n${realErrors.join('\n')}`,
+          );
+        }
+      } catch (err) {
+        if (knownLimitation) {
+          t.diagnostic(`KNOWN LIMITATION: ${knownLimitation}`);
+          t.diagnostic(`Failure: ${err.message?.split('\n')[0] || err}`);
+          t.skip(`known limitation: ${knownLimitation}`);
+          return;
+        }
+        throw err;
+      } finally {
+        await teardown();
+      }
+    });
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+/**
+ * Drive a list of pre-pick / reload-probe actions. Used to set up tricky
+ * scenarios: open a modal, switch tabs, navigate routes.
+ *
+ * Live mode's element picker intercepts every page click in capture phase
+ * while `pickActive === true`, so any action that depends on the page's own
+ * click handler (open a modal, switch a tab) gets swallowed. We bracket the
+ * action sequence with two clicks of the global bar's pick toggle and leave
+ * the picker in its original state once preActions complete.
+ *
+ * Supported action shapes:
+ *   { "type": "click", "selector": "..." }
+ *   { "type": "goto",  "path": "/about" }
+ *   { "type": "wait",  "selector": "..." }
+ */
+async function runPreActions(page, actions) {
+  const PICK_TOGGLE = '#impeccable-live-pick-toggle';
+  const pickerToggle = await page.$(PICK_TOGGLE);
+  const wasActive = pickerToggle
+    ? await pickerToggle.evaluate((el) => el.dataset.active === 'true')
+    : false;
+  if (wasActive) await page.locator(PICK_TOGGLE).click();
+
+  try {
+    for (const a of actions) {
+      if (a.type === 'click') {
+        const loc = page.locator(a.selector);
+        await loc.first().waitFor({ state: 'visible', timeout: 5_000 });
+        await loc.first().click();
+        continue;
+      }
+      if (a.type === 'goto') {
+        const target = new URL(a.path, page.url()).href;
+        await page.goto(target, { waitUntil: 'domcontentloaded', timeout: 10_000 });
+        continue;
+      }
+      if (a.type === 'wait') {
+        await page.waitForSelector(a.selector, { timeout: 5_000 });
+        continue;
+      }
+      throw new Error(`unknown preAction type: ${a.type}`);
+    }
+  } finally {
+    if (wasActive) {
+      // Re-arm the picker. If the page navigated mid-action the toggle may
+      // belong to a freshly mounted bar — best-effort, no throw.
+      const after = await page.$(PICK_TOGGLE);
+      if (after) {
+        const isActive = await after.evaluate((el) => el.dataset.active === 'true');
+        if (!isActive) await page.locator(PICK_TOGGLE).click();
+      }
+    }
+  }
+}
+
+/**
+ * Poll the file until carbonize cleanup has landed: no variants wrapper, no
+ * carbonize markers, no leftover variant divs. Returns the final contents.
+ */
+async function waitForSourceClean(filePath, timeoutMs) {
+  const start = Date.now();
+  let last = '';
+  while (Date.now() - start < timeoutMs) {
+    last = readFileSync(filePath, 'utf-8');
+    const dirty =
+      last.includes('data-impeccable-variants=') ||
+      last.includes('impeccable-variants-start') ||
+      last.includes('impeccable-carbonize-start') ||
+      last.includes('data-impeccable-variant=');
+    if (!dirty) return last;
+    await new Promise((r) => setTimeout(r, 100));
+  }
+  throw new Error(`source not clean after ${timeoutMs}ms — last contents:\n${last}`);
+}
+
+/**
+ * Find the source file that received the wrapper. We look for any tracked
+ * file containing the variants marker — the agent always writes to exactly
+ * one file per session.
+ */
+async function locateSessionFile(tmp) {
+  const candidates = walkSources(tmp);
+  for (const f of candidates) {
+    const body = readFileSync(f, 'utf-8');
+    if (
+      body.includes('data-impeccable-variants=') ||
+      body.includes('impeccable-carbonize-start') ||
+      body.includes('impeccable-variants-start')
+    ) {
+      return f;
+    }
+  }
+  throw new Error('Could not locate session source file under ' + tmp);
+}
+
+function walkSources(root) {
+  const results = [];
+  const stack = [root];
+  const SKIP = new Set(['node_modules', '.git', '.svelte-kit', 'dist', '.vite', 'build', '.next']);
+  const EXTS = ['.html', '.jsx', '.tsx', '.svelte', '.astro', '.vue'];
+  while (stack.length) {
+    const dir = stack.pop();
+    let entries;
+    try { entries = readdirSync(dir, { withFileTypes: true }); } catch { continue; }
+    for (const e of entries) {
+      const full = join(dir, e.name);
+      if (e.isDirectory()) {
+        if (!SKIP.has(e.name)) stack.push(full);
+        continue;
+      }
+      if (EXTS.some((x) => e.name.endsWith(x))) results.push(full);
+    }
+  }
+  return results;
+}
diff --git a/tests/live-e2e/agent.mjs b/tests/live-e2e/agent.mjs
new file mode 100644
index 000000000..c33f012e4
--- /dev/null
+++ b/tests/live-e2e/agent.mjs
@@ -0,0 +1,496 @@
+/**
+ * Agent module for the live-mode E2E test suite.
+ *
+ * Two layers:
+ *
+ * 1. `runAgentLoop(opts)` — the deterministic wrapper around the live-mode
+ *    poll/wrap/write/accept protocol. This is identical for fake and real
+ *    agents; only the variant-content production step differs.
+ *
+ * 2. `createFakeAgent()` — produces canned variants in the EXACT format
+ *    `source/skills/impeccable/reference/live.md` describes: a colocated
+ *    `<style data-impeccable-css="ID">` block with `@scope ([data-impeccable-variant="N"])`
+ *    rules, a `data-impeccable-params` JSON manifest covering range + steps + toggle
+ *    kinds across the variant set, single top-level element per variant matching
+ *    the original tag.
+ *
+ * A future LLM-backed agent slots in by implementing the same VariantAgent
+ * interface (one method, `generateVariants(event, context)`), so the loop and
+ * harness stay unchanged.
+ */
+
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import { execFile } from 'node:child_process';
+import { promisify } from 'node:util';
+
+const execFileP = promisify(execFile);
+
+// ---------------------------------------------------------------------------
+// Variant-output schema
+// ---------------------------------------------------------------------------
+
+/**
+ * @typedef {Object} ParamSpec
+ * @property {string} id
+ * @property {'range' | 'steps' | 'toggle'} kind
+ * @property {string} label
+ * @property {*}      default
+ * @property {number=} min
+ * @property {number=} max
+ * @property {number=} step
+ * @property {Array<{value: string, label: string}>=} options
+ *
+ * @typedef {Object} VariantSpec
+ * @property {string}  innerHtml         Single top-level element matching the
+ *                                       original's tag (e.g. '<h1 ...>...</h1>').
+ * @property {ParamSpec[]=} params       Optional 0-4 param manifest.
+ *
+ * @typedef {Object} GenerateOutput
+ * @property {string}        scopedCss   Contents of the <style data-impeccable-css>
+ *                                       block — `@scope` rules per variant.
+ * @property {VariantSpec[]} variants
+ *
+ * @typedef {Object} VariantAgent
+ * @property {(event: object, context: object) => Promise<GenerateOutput>} generateVariants
+ */
+
+// ---------------------------------------------------------------------------
+// Fake agent — canned, format-faithful variants
+// ---------------------------------------------------------------------------
+
+/**
+ * Build a fake agent that produces deterministic variants for an `<h1 class="hero-title">`
+ * target. The exact CSS values are chosen so the test can later assert them
+ * via `getComputedStyle` — variant 1 → red, variant 2 → bold, variant 3 → uppercase.
+ *
+ * The output mirrors a real agent's write-back faithfully:
+ *   - <style data-impeccable-css="ID"> with @scope rules per variant
+ *   - data-impeccable-params manifest with range + steps + toggle kinds
+ *   - first variant visible (no display:none), rest hidden by the agent caller
+ *   - inner content = single <h1> per variant
+ */
+export function createFakeAgent() {
+  return {
+    /** @type {VariantAgent['generateVariants']} */
+    async generateVariants(event /*, context */) {
+      const text = extractText(event.element?.outerHTML) || 'Title';
+      const cls = 'hero-title';
+
+      // Variant 1 — red color, with a `range` param tuning hue lightness.
+      const variant1 = {
+        innerHtml: `<h1 class="${cls}">${text}</h1>`,
+        params: [
+          {
+            id: 'lightness',
+            kind: 'range',
+            min: 0.3,
+            max: 0.7,
+            step: 0.05,
+            default: 0.5,
+            label: 'Lightness',
+          },
+        ],
+      };
+
+      // Variant 2 — bold weight, with a `steps` param for serif/sans/mono.
+      const variant2 = {
+        innerHtml: `<h1 class="${cls}">${text}</h1>`,
+        params: [
+          {
+            id: 'face',
+            kind: 'steps',
+            default: 'sans',
+            label: 'Face',
+            options: [
+              { value: 'sans', label: 'Sans' },
+              { value: 'serif', label: 'Serif' },
+              { value: 'mono', label: 'Mono' },
+            ],
+          },
+        ],
+      };
+
+      // Variant 3 — uppercase, with a `toggle` param for italic.
+      const variant3 = {
+        innerHtml: `<h1 class="${cls}">${text}</h1>`,
+        params: [
+          {
+            id: 'italic',
+            kind: 'toggle',
+            default: false,
+            label: 'Italic',
+          },
+        ],
+      };
+
+      // Scoped CSS — `@scope ([data-impeccable-variant="N"])` per variant,
+      // wired against the params declared above.
+      const scopedCss = [
+        '@scope ([data-impeccable-variant="1"]) {',
+        '  :scope > h1 {',
+        '    color: oklch(var(--p-lightness, 0.5) 0.25 25);',
+        '  }',
+        '}',
+        '@scope ([data-impeccable-variant="2"]) {',
+        '  :scope > h1 { font-weight: 900; }',
+        '  :scope[data-p-face="serif"] > h1 { font-family: ui-serif, serif; }',
+        '  :scope[data-p-face="mono"]  > h1 { font-family: ui-monospace, monospace; }',
+        '}',
+        '@scope ([data-impeccable-variant="3"]) {',
+        '  :scope > h1 { text-transform: uppercase; letter-spacing: 0.04em; }',
+        '  :scope[data-p-italic] > h1 { font-style: italic; }',
+        '}',
+      ].join('\n');
+
+      return {
+        scopedCss,
+        variants: [variant1, variant2, variant3],
+      };
+    },
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function extractText(outerHTML) {
+  if (!outerHTML) return null;
+  const m = outerHTML.match(/>([^<]+)</);
+  return m ? m[1].trim() : null;
+}
+
+function attrEscape(str, { svelte = false } = {}) {
+  let s = String(str).replace(/&/g, '&amp;').replace(/'/g, '&apos;');
+  if (svelte) {
+    // Svelte parses `{` in attribute values as expression starters even
+    // inside quoted strings — see https://svelte.dev/e/expected_token .
+    // Escape with HTML numeric entities so the literal characters land in
+    // the rendered DOM attribute.
+    s = s.replace(/\{/g, '&#123;').replace(/\}/g, '&#125;');
+  }
+  return s;
+}
+
+/**
+ * Translate an HTML snippet to JSX. Currently: class= → className=, optionally
+ * preserves whitespace + tags. The fake agent writes innerHtml in HTML form;
+ * the orchestrator translates per the target file's syntax.
+ */
+function htmlToJsx(html) {
+  return html.replace(/\bclass=/g, 'className=');
+}
+
+/**
+ * Render the variants block in either HTML or JSX, depending on commentSyntax.
+ * In JSX:
+ *   - comments use {/​* ... *​/} (already what commentSyntax.open is)
+ *   - <style>{`@scope ... { ... }`}</style> wraps CSS in a template literal so JSX
+ *     doesn't choke on the {} in CSS
+ *   - non-default visible variants use style={{display: 'none'}}
+ *   - inner element class= becomes className=
+ *   - data-impeccable-params stays a single-quoted JSON string (JSX-legal)
+ */
+function renderVariantsBlock({ sessionId, indent, output, commentSyntax, file }) {
+  const isJsx = commentSyntax.open === '{/*';
+  const isSvelte = !!file && file.endsWith('.svelte');
+
+  const styleLines = isJsx
+    ? [
+        indent + '  <style data-impeccable-css="' + sessionId + '">{`',
+        ...output.scopedCss.split('\n').map((l) => indent + '    ' + l),
+        indent + '  `}</style>',
+      ]
+    : [
+        indent + '  <style data-impeccable-css="' + sessionId + '">',
+        ...output.scopedCss.split('\n').map((l) => indent + '    ' + l),
+        indent + '  </style>',
+      ];
+
+  const variantBlocks = output.variants.map((v, i) => {
+    const idx = i + 1;
+    const paramsAttr = v.params && v.params.length
+      ? " data-impeccable-params='" + attrEscape(JSON.stringify(v.params), { svelte: isSvelte }) + "'"
+      : '';
+    let styleAttr = '';
+    if (i !== 0) styleAttr = isJsx ? " style={{display: 'none'}}" : ' style="display: none"';
+    const inner = isJsx ? htmlToJsx(v.innerHtml) : v.innerHtml;
+    return [
+      indent + '  ' + commentSyntax.open + ' Variant ' + idx + ' ' + commentSyntax.close,
+      indent + '  <div data-impeccable-variant="' + idx + '"' + styleAttr + paramsAttr + '>',
+      indent + '    ' + inner,
+      indent + '  </div>',
+    ].join('\n');
+  });
+
+  return [...styleLines, ...variantBlocks].join('\n');
+}
+
+/**
+ * Read the wrapped file, find the "insert below this line" marker, splice in
+ * the rendered variants block, write back.
+ */
+async function spliceVariantsIntoWrapper({ tmp, wrapInfo, sessionId, output }) {
+  const filePath = path.join(tmp, wrapInfo.file);
+  const src = await fs.readFile(filePath, 'utf-8');
+  const lines = src.split('\n');
+
+  // Find the "Variants: insert below this line" comment line — definitive
+  // marker, robust to any indentation off-by-one. Matches in any comment
+  // style (HTML / JSX / Astro).
+  const markerIdx = lines.findIndex((l) =>
+    l.includes('Variants: insert below this line'),
+  );
+  if (markerIdx === -1) {
+    throw new Error('insert marker not found in ' + wrapInfo.file);
+  }
+
+  const indent = (lines[markerIdx].match(/^\s*/) || [''])[0];
+  // Indent INSIDE the wrapper is one level shallower (the marker is indented
+  // 2 spaces relative to the wrapper opening). Remove the 2-space comment
+  // indent to get the wrapper indent.
+  const wrapperIndent = indent.replace(/  $/, '');
+
+  const block = renderVariantsBlock({
+    sessionId,
+    indent: wrapperIndent,
+    output,
+    commentSyntax: wrapInfo.commentSyntax,
+    file: wrapInfo.file,
+  });
+
+  const next = [
+    ...lines.slice(0, markerIdx + 1),
+    block,
+    ...lines.slice(markerIdx + 1),
+  ];
+  await fs.writeFile(filePath, next.join('\n'), 'utf-8');
+}
+
+// ---------------------------------------------------------------------------
+// Poll loop — the "agent" runs this until aborted
+// ---------------------------------------------------------------------------
+
+/**
+ * @param {object} opts
+ * @param {string} opts.tmp        Project tmp dir (cwd for live-* scripts).
+ * @param {string} opts.scriptsDir Path to the impeccable scripts dir.
+ * @param {number} opts.port       live-server port.
+ * @param {string} opts.token      live-server token.
+ * @param {VariantAgent} opts.agent
+ * @param {AbortSignal} opts.signal
+ * @param {(msg: string) => void} [opts.log]
+ * @param {object} [opts.wrapTarget] Default target for live-wrap when an
+ *                                   element comes from the picker without an
+ *                                   id we can resolve. e.g. {classes:'hero-title', tag:'h1'}.
+ */
+export async function runAgentLoop({
+  tmp,
+  scriptsDir,
+  port,
+  token,
+  agent,
+  signal,
+  log = () => {},
+  wrapTarget = { classes: 'hero-title', tag: 'h1' },
+}) {
+  const base = `http://127.0.0.1:${port}`;
+
+  while (!signal.aborted) {
+    let event;
+    try {
+      const res = await fetch(`${base}/poll?token=${token}&timeout=5000`, { signal });
+      event = await res.json();
+    } catch (err) {
+      if (signal.aborted) return;
+      log('poll error: ' + err.message);
+      await new Promise((r) => setTimeout(r, 200));
+      continue;
+    }
+
+    if (event.type === 'timeout') continue;
+    if (event.type === 'exit') return;
+    if (event.type === 'prefetch') continue;
+    if (event.type === 'connected') continue;
+
+    if (event.type === 'generate') {
+      log(`generate id=${event.id} action=${event.action} count=${event.count}`);
+      try {
+        // 1. Wrap the original element in the variant scaffold (deterministic CLI)
+        const wrapInfo = await runWrap({
+          tmp,
+          scriptsDir,
+          id: event.id,
+          count: event.count,
+          ...wrapTarget,
+        });
+        log(`wrapped: ${wrapInfo.file} insertLine=${wrapInfo.insertLine}`);
+
+        // 2. Agent generates variant content (LLM-pluggable seam)
+        const output = await agent.generateVariants(event, { wrapTarget });
+        if (output.variants.length !== event.count) {
+          log(`warning: agent returned ${output.variants.length} variants, expected ${event.count}`);
+        }
+
+        // 3. Splice variants block into the wrapper (deterministic fs)
+        await spliceVariantsIntoWrapper({ tmp, wrapInfo, sessionId: event.id, output });
+        if (process.env.IMPECCABLE_E2E_DEBUG) {
+          const post = await fs.readFile(path.join(tmp, wrapInfo.file), 'utf-8');
+          log(`--- post-splice (variants written) ---\n${post}`);
+        }
+
+        // 4. Tell the server we're done (broadcasts SSE done → browser settles to CYCLING)
+        await fetch(`${base}/poll`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ token, type: 'done', id: event.id }),
+          signal,
+        });
+      } catch (err) {
+        if (signal.aborted) return;
+        log('generate failed: ' + err.message);
+        await fetch(`${base}/poll`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ token, type: 'error', id: event.id, message: err.message }),
+          signal,
+        }).catch(() => {});
+      }
+      continue;
+    }
+
+    if (event.type === 'accept') {
+      log(`accept id=${event.id} variantId=${event.variantId}`);
+      try {
+        const acceptResult = await runAccept({
+          tmp,
+          scriptsDir,
+          id: event.id,
+          variant: event.variantId,
+          paramValues: event.paramValues,
+        });
+
+        // Carbonize cleanup — required after accept per the live skill spec.
+        // For the fake agent, we perform a faithful but minimal cleanup:
+        // delete the carbonize block (markers + dead variants + inline <style>
+        // + param-values comment) and unwrap the temporary variant div around
+        // the accepted content. A real LLM agent would additionally migrate
+        // the @scope rules into the project's stylesheet — out of scope for
+        // a deterministic test.
+        if (acceptResult.handled === true && acceptResult.carbonize === true && acceptResult.file) {
+          if (process.env.IMPECCABLE_E2E_DEBUG) {
+            const post = await fs.readFile(path.join(tmp, acceptResult.file), 'utf-8');
+            log(`--- post-accept (pre-carbonize) ---\n${post}`);
+          }
+          await runCarbonizeCleanup({ tmp, file: acceptResult.file, sessionId: event.id, variant: event.variantId });
+          log(`carbonize cleanup done on ${acceptResult.file}`);
+        }
+
+        await fetch(`${base}/poll`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ token, type: 'accept', id: event.id, data: { _acceptResult: acceptResult } }),
+          signal,
+        });
+      } catch (err) {
+        if (signal.aborted) return;
+        log('accept failed: ' + err.message);
+      }
+      continue;
+    }
+
+    if (event.type === 'discard') {
+      log(`discard id=${event.id}`);
+      try {
+        const discardResult = await runAccept({ tmp, scriptsDir, id: event.id, discard: true });
+        await fetch(`${base}/poll`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ token, type: 'discard', id: event.id, data: { _acceptResult: discardResult } }),
+          signal,
+        });
+      } catch (err) {
+        if (signal.aborted) return;
+        log('discard failed: ' + err.message);
+      }
+      continue;
+    }
+
+    log(`unhandled event: ${event.type}`);
+  }
+}
+
+async function runWrap({ tmp, scriptsDir, id, count, classes, tag, elementId }) {
+  const args = [path.join(scriptsDir, 'live-wrap.mjs'), '--id', id, '--count', String(count)];
+  if (elementId) args.push('--element-id', elementId);
+  if (classes) args.push('--classes', classes);
+  if (tag) args.push('--tag', tag);
+  const { stdout } = await execFileP(process.execPath, args, { cwd: tmp });
+  const last = stdout.trim().split('\n').filter(Boolean).pop();
+  return JSON.parse(last);
+}
+
+/**
+ * Apply the post-accept carbonize cleanup to the given file. Mirrors the
+ * five-step rewrite the live skill expects of the agent:
+ *
+ *   1. Locate the carbonize block (bracketed by `impeccable-carbonize-start`
+ *      and `impeccable-carbonize-end`).
+ *   2. Step 2 ("move CSS into the project stylesheet") is skipped — that
+ *      requires per-project judgment about which file owns these styles.
+ *      The fake agent leaves CSS migration to the LLM-backed agent.
+ *   3-5. Strip the carbonize block entirely AND unwrap the temporary
+ *      `<div data-impeccable-variant="N" style="display: contents"|...>` wrapper
+ *      that holds the accepted content. The accepted inner element survives.
+ */
+async function runCarbonizeCleanup({ tmp, file, sessionId /* , variant */ }) {
+  const filePath = path.join(tmp, file);
+  let body = await fs.readFile(filePath, 'utf-8');
+
+  // 1. Strip the carbonize block. We match either comment style so this
+  // works for both HTML and JSX targets.
+  const startRe = new RegExp('[ \\t]*(?:<!--|\\{/\\*)\\s*impeccable-carbonize-start\\s+' + sessionId + '\\s*(?:-->|\\*/\\})\\n');
+  const endRe   = new RegExp('[ \\t]*(?:<!--|\\{/\\*)\\s*impeccable-carbonize-end\\s+' + sessionId + '\\s*(?:-->|\\*/\\})\\n?');
+  const startMatch = body.match(startRe);
+  const endMatch = body.match(endRe);
+  if (startMatch && endMatch && startMatch.index < endMatch.index) {
+    const startIdx = startMatch.index;
+    const endIdx = endMatch.index + endMatch[0].length;
+    body = body.slice(0, startIdx) + body.slice(endIdx);
+  }
+
+  // 2. Unwrap the temporary `<div data-impeccable-variant="N" ...>` placed
+  // around the accepted content. live-accept emits this wrapper with
+  // `style="display: contents"` so it doesn't affect layout. We strip the
+  // wrapper open/close lines and keep what's between.
+  // Match the opening div (any single line) followed by inner content
+  // followed by `</div>`, where the open carries data-impeccable-variant
+  // and is NOT inside a data-impeccable-variants wrapper (the variants
+  // wrapper has the trailing `s`).
+  body = body.replace(
+    /^([ \t]*)<div\b[^>]*\bdata-impeccable-variant="[^"]+"[^>]*>\n([\s\S]*?)\n[ \t]*<\/div>\n/m,
+    (match, indent, inner) => {
+      // Re-indent inner content to the wrapper's indent level.
+      const innerLines = inner.split('\n');
+      const innerIndent = (innerLines[0].match(/^\s*/) || [''])[0];
+      const dedented = innerLines.map((l) => {
+        if (l.startsWith(innerIndent)) return indent + l.slice(innerIndent.length);
+        return l;
+      }).join('\n');
+      return dedented + '\n';
+    },
+  );
+
+  await fs.writeFile(filePath, body, 'utf-8');
+}
+
+async function runAccept({ tmp, scriptsDir, id, variant, discard, paramValues }) {
+  const args = [path.join(scriptsDir, 'live-accept.mjs'), '--id', id];
+  if (discard) args.push('--discard');
+  else args.push('--variant', String(variant));
+  if (paramValues) args.push('--param-values', JSON.stringify(paramValues));
+  const { stdout } = await execFileP(process.execPath, args, { cwd: tmp });
+  const last = stdout.trim().split('\n').filter(Boolean).pop();
+  return JSON.parse(last);
+}
diff --git a/tests/live-e2e/session.mjs b/tests/live-e2e/session.mjs
new file mode 100644
index 000000000..743922aea
--- /dev/null
+++ b/tests/live-e2e/session.mjs
@@ -0,0 +1,250 @@
+/**
+ * Per-fixture session lifecycle for live-mode E2E tests.
+ *
+ * Composes:
+ *   - tmp staging (clones the fixture, git init, writes the inject config)
+ *   - npm install (the fixture's runtime.install command)
+ *   - live-server.mjs --background (returns {pid, port, token})
+ *   - live-inject.mjs --port (patches the framework HTML entry)
+ *   - the fixture's framework dev server (vite, vite dev, npx vite, ...)
+ *   - Playwright Chromium page
+ *   - the fake-agent poll loop (in this same node process)
+ *
+ * Returns handles + a single `teardown()` that cleans them all up in order.
+ */
+
+import { execFileSync, spawn } from 'node:child_process';
+import { cpSync, mkdtempSync, readFileSync, rmSync, writeFileSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { join, dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import { runAgentLoop } from './agent.mjs';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const REPO_ROOT = join(__dirname, '..', '..');
+const SCRIPTS_DIR = join(REPO_ROOT, 'source', 'skills', 'impeccable', 'scripts');
+const FIXTURES_DIR = join(REPO_ROOT, 'tests', 'framework-fixtures');
+
+export { SCRIPTS_DIR, FIXTURES_DIR, REPO_ROOT };
+
+// ---------------------------------------------------------------------------
+// Stage
+// ---------------------------------------------------------------------------
+
+export function stageFixture(name, fixture) {
+  const fixtureRoot = join(FIXTURES_DIR, name);
+  const gitignore = readFileSync(join(fixtureRoot, 'gitignore.txt'), 'utf-8');
+
+  const tmp = mkdtempSync(join(tmpdir(), 'impeccable-e2e-'));
+  cpSync(join(fixtureRoot, 'files'), tmp, { recursive: true });
+  writeFileSync(join(tmp, '.gitignore'), gitignore);
+  writeFileSync(join(tmp, 'impeccable-live.config.json'), JSON.stringify(fixture.config));
+
+  execFileSync('git', ['init', '-q'], { cwd: tmp });
+  execFileSync('git', ['config', 'user.email', 'test@example.com'], { cwd: tmp });
+  execFileSync('git', ['config', 'user.name', 'Fixture'], { cwd: tmp });
+  execFileSync('git', ['add', '-A'], { cwd: tmp });
+  execFileSync('git', ['commit', '-qm', 'fixture'], { cwd: tmp });
+
+  return tmp;
+}
+
+export function runInstall(tmp, command) {
+  const [cmd, ...args] = command;
+  execFileSync(cmd, args, { cwd: tmp, stdio: 'inherit' });
+}
+
+// ---------------------------------------------------------------------------
+// live-server (background mode prints {pid, port, token})
+// ---------------------------------------------------------------------------
+
+export function startLiveServer(tmp) {
+  const out = execFileSync(
+    process.execPath,
+    [join(SCRIPTS_DIR, 'live-server.mjs'), '--background'],
+    { cwd: tmp, encoding: 'utf-8' },
+  );
+  const jsonLine = out.trim().split('\n').filter(Boolean).pop();
+  const info = JSON.parse(jsonLine);
+  if (!info.port || !info.pid) {
+    throw new Error('live-server --background returned unexpected payload: ' + jsonLine);
+  }
+  return info;
+}
+
+export function stopLiveServer(tmp) {
+  try {
+    execFileSync(
+      process.execPath,
+      [join(SCRIPTS_DIR, 'live-server.mjs'), 'stop', '--keep-inject'],
+      { cwd: tmp, stdio: 'ignore' },
+    );
+  } catch { /* already gone */ }
+}
+
+export function runInject(tmp, port) {
+  const out = execFileSync(
+    process.execPath,
+    [join(SCRIPTS_DIR, 'live-inject.mjs'), '--port', String(port)],
+    {
+      cwd: tmp,
+      encoding: 'utf-8',
+      env: { ...process.env, IMPECCABLE_LIVE_CONFIG: join(tmp, 'impeccable-live.config.json') },
+    },
+  );
+  const last = out.trim().split('\n').filter(Boolean).pop();
+  return JSON.parse(last);
+}
+
+// ---------------------------------------------------------------------------
+// Framework dev server
+// ---------------------------------------------------------------------------
+
+export function startDevServer(tmp, runtime) {
+  const [cmd, ...args] = runtime.devCommand;
+  const child = spawn(cmd, args, {
+    cwd: tmp,
+    env: { ...process.env, FORCE_COLOR: '0', NO_COLOR: '1' },
+    stdio: ['ignore', 'pipe', 'pipe'],
+  });
+
+  const readyRe = new RegExp(runtime.readyPattern);
+  const bufLog = [];
+  const capture = (chunk) => {
+    const s = chunk.toString();
+    bufLog.push(s);
+    if (bufLog.length > 200) bufLog.shift();
+  };
+  child.stdout.on('data', capture);
+  child.stderr.on('data', capture);
+
+  const ready = new Promise((resolve, reject) => {
+    const timeout = setTimeout(() => {
+      reject(new Error(
+        `dev server ready timeout (${runtime.readyTimeoutMs}ms). Tail:\n${bufLog.join('')}`,
+      ));
+    }, runtime.readyTimeoutMs ?? 120_000);
+
+    const checkMatch = (buf) => {
+      const m = buf.toString().match(readyRe);
+      if (m && m[1]) {
+        clearTimeout(timeout);
+        resolve({ port: Number(m[1]) });
+      }
+    };
+    child.stdout.on('data', checkMatch);
+    child.stderr.on('data', checkMatch);
+    child.on('exit', (code) => {
+      clearTimeout(timeout);
+      reject(new Error(`dev server exited before ready (code=${code}). Tail:\n${bufLog.join('')}`));
+    });
+  });
+
+  return { child, ready, log: () => bufLog.join('') };
+}
+
+export async function stopDevServer(child) {
+  if (!child || child.killed) return;
+  const exited = new Promise((resolve) => child.once('exit', resolve));
+  child.kill('SIGTERM');
+  const timeoutPromise = new Promise((resolve) => setTimeout(resolve, 5_000));
+  await Promise.race([exited, timeoutPromise]);
+  if (!child.killed) child.kill('SIGKILL');
+}
+
+// ---------------------------------------------------------------------------
+// Composite: full stage → ready
+// ---------------------------------------------------------------------------
+
+/**
+ * Boots everything and returns the connected page + handles + teardown.
+ *
+ * @param {object} opts
+ * @param {string} opts.name              fixture name
+ * @param {object} opts.fixture           fixture.json contents
+ * @param {import('playwright').Browser} opts.browser   shared browser instance
+ * @param {object} opts.agent             VariantAgent (defaults to fake)
+ * @param {(msg: string) => void} [opts.log]
+ */
+export async function bootFixtureSession({ name, fixture, browser, agent, log = () => {} }) {
+  const runtime = fixture.runtime;
+  if (!runtime) throw new Error(`fixture ${name} has no runtime block`);
+
+  const tmp = stageFixture(name, fixture);
+  let live;
+  let dev;
+  let agentAbort;
+  let agentDone;
+  let ctx;
+
+  const teardown = async () => {
+    try { if (ctx) await ctx.close(); } catch {}
+    try { if (agentAbort) agentAbort.abort(); } catch {}
+    try { if (agentDone) await agentDone.catch(() => {}); } catch {}
+    try { if (dev?.child) await stopDevServer(dev.child); } catch {}
+    try { if (live) stopLiveServer(tmp); } catch {}
+    try { rmSync(tmp, { recursive: true, force: true }); } catch {}
+  };
+
+  try {
+    log(`installing deps`);
+    runInstall(tmp, runtime.install);
+
+    log(`starting live-server`);
+    live = startLiveServer(tmp);
+
+    log(`live-inject --port ${live.port}`);
+    const injectResult = runInject(tmp, live.port);
+    if (!injectResult.ok) throw new Error('live-inject failed: ' + JSON.stringify(injectResult));
+
+    log(`spawning dev server: ${runtime.devCommand.join(' ')}`);
+    dev = startDevServer(tmp, runtime);
+    const { port: devPort } = await dev.ready;
+    log(`dev server ready on ${devPort}`);
+
+    // Agent loop runs concurrently — abort on teardown.
+    agentAbort = new AbortController();
+    agentDone = runAgentLoop({
+      tmp,
+      scriptsDir: SCRIPTS_DIR,
+      port: live.port,
+      token: live.token,
+      agent,
+      signal: agentAbort.signal,
+      log: (m) => log('[agent] ' + m),
+    });
+
+    const scheme = runtime.scheme || 'http';
+    ctx = await browser.newContext({
+      ignoreHTTPSErrors: runtime.ignoreHTTPSErrors === true,
+    });
+    const page = await ctx.newPage();
+    const consoleErrors = [];
+    page.on('pageerror', (err) => {
+      consoleErrors.push(`pageerror: ${err.message}\n${err.stack || ''}`);
+    });
+    page.on('console', (msg) => {
+      if (msg.type() === 'error') consoleErrors.push(`console.error: ${msg.text()}`);
+    });
+
+    await page.goto(`${scheme}://127.0.0.1:${devPort}`, {
+      waitUntil: 'domcontentloaded',
+      timeout: 30_000,
+    });
+
+    return {
+      tmp,
+      page,
+      ctx,
+      dev,
+      live,
+      consoleErrors,
+      teardown,
+    };
+  } catch (err) {
+    if (dev?.log) err.message += `\n\n--- dev server tail ---\n${dev.log()}`;
+    await teardown();
+    throw err;
+  }
+}
diff --git a/tests/live-e2e/ui.mjs b/tests/live-e2e/ui.mjs
new file mode 100644
index 000000000..414a9f1b4
--- /dev/null
+++ b/tests/live-e2e/ui.mjs
@@ -0,0 +1,175 @@
+/**
+ * Playwright helpers that drive the live-mode bar UI exactly the way a user
+ * would: pick an element, configure, Go, cycle, accept.
+ *
+ * Selector strategy: live-browser.js uses deterministic ids (`impeccable-live-*`)
+ * for the global bar, per-element bar, action picker, and params panel. Buttons
+ * inside the per-element bar are matched by visible text or unicode glyph
+ * (`Go →`, `← / →`, `✓ Accept`, `✕`). All selectors below come from
+ * source/skills/impeccable/scripts/live-browser.js — keep this file in sync if
+ * the bar's text content changes.
+ */
+
+const BAR_ID = '#impeccable-live-bar';
+const GLOBAL_BAR_ID = '#impeccable-live-global-bar';
+const PICKER_ID = '#impeccable-live-picker';
+
+/**
+ * Wait for the live handshake to complete:
+ *   - window.__IMPECCABLE_LIVE_INIT__ set
+ *   - global bar mounted
+ *   - SSE connection established (state transitioned to PICKING)
+ *
+ * Times out generously since some frameworks delay first render.
+ */
+export async function waitForHandshake(page, { timeout = 20_000 } = {}) {
+  await page.waitForFunction(
+    () => window.__IMPECCABLE_LIVE_INIT__ === true,
+    { timeout },
+  );
+  await page.waitForSelector(GLOBAL_BAR_ID, { timeout });
+  // Wait for the picker mode to be active (live.js flips state PICKING after
+  // SSE 'connected' arrives). We can detect it via the global bar's pick
+  // toggle being in its ready state. Soft wait — fall through after a beat
+  // even if the toggle hasn't visibly shifted.
+  await page.waitForTimeout(250);
+}
+
+/**
+ * Click an in-page element to select it. live-browser.js's picker only acts
+ * when state === 'PICKING' AND pickActive is true; pickActive starts true on
+ * connect. The handler reads the hovered element from `mousemove`, so we
+ * dispatch a hover before the click.
+ */
+export async function pickElement(page, selector) {
+  const el = await page.waitForSelector(selector, { timeout: 5_000 });
+  await el.hover();
+  // Tiny settle: live-browser updates `hoveredElement` on mousemove, and the
+  // click handler reads from it.
+  await page.waitForTimeout(50);
+  await el.click();
+  // Per-element bar mounts on click → wait for it.
+  await page.waitForSelector(BAR_ID, { state: 'visible', timeout: 5_000 });
+  // Wait specifically for the Configure-row Go button to be in the bar.
+  // pickElement returning before that race-conditions with clickGo on
+  // fixtures whose framework re-renders right after pick (modal open, tab
+  // switch). Anchoring the wait on the Go button's text is robust: the bar
+  // can be visible-but-empty (state=PICKING) before showBar('configure')
+  // populates the row.
+  await page.waitForFunction(
+    (barSel) => {
+      const bar = document.querySelector(barSel);
+      if (!bar) return false;
+      const btns = [...bar.querySelectorAll('button')];
+      return btns.some((b) => /Go\b/.test(b.textContent || ''));
+    },
+    BAR_ID,
+    { timeout: 5_000 },
+  );
+}
+
+/**
+ * Set the variant count by clicking the count button (cycles 2 → 3 → 4 → 2).
+ * Default is 3. If the desired count is already showing, this is a no-op.
+ */
+export async function setCount(page, count) {
+  if (count < 2 || count > 4) throw new Error('count must be 2..4');
+  for (let i = 0; i < 4; i++) {
+    const current = await page.evaluate((barSel) => {
+      const bar = document.querySelector(barSel);
+      if (!bar) return null;
+      const btns = [...bar.querySelectorAll('button')];
+      const btn = btns.find((b) => /^×\d+$/.test((b.textContent || '').trim()));
+      if (!btn) return null;
+      return parseInt((btn.textContent || '').trim().slice(1), 10);
+    }, BAR_ID);
+    if (current === count) return;
+    await page.locator(`${BAR_ID} button`, { hasText: /^×\d+$/ }).click();
+  }
+  throw new Error(`could not cycle count to ${count}`);
+}
+
+/**
+ * Click Go. Browser POSTs the generate event; the agent picks it up.
+ */
+export async function clickGo(page) {
+  await page.locator(`${BAR_ID} button`, { hasText: /Go\b/ }).click();
+}
+
+/**
+ * Wait for the bar to enter CYCLING state — happens after the agent's
+ * variants land in the DOM via HMR and the MutationObserver counts them.
+ *
+ * The cycling row has the visible counter `N/M` in monospaced font; we
+ * detect it by content. The bar can also auto-reload if HMR was slow, so
+ * we give it a generous window.
+ */
+export async function waitForCycling(page, expectedCount, { timeout = 30_000 } = {}) {
+  await page.waitForFunction(
+    ({ barSel, expected }) => {
+      const bar = document.querySelector(barSel);
+      if (!bar) return false;
+      const text = bar.textContent || '';
+      // Counter format: "1/3", "2/3" etc. Look for any "i/N" with N matching.
+      const m = text.match(/(\d+)\s*\/\s*(\d+)/);
+      if (!m) return false;
+      return parseInt(m[2], 10) === expected;
+    },
+    { barSel: BAR_ID, expected: expectedCount },
+    { timeout },
+  );
+}
+
+/**
+ * Click the next variant button (right arrow).
+ */
+export async function clickNext(page) {
+  await page.locator(`${BAR_ID} button`, { hasText: '→' }).click();
+}
+
+export async function clickPrev(page) {
+  await page.locator(`${BAR_ID} button`, { hasText: '←' }).click();
+}
+
+/**
+ * Read the currently visible variant index (the "i" in "i/N").
+ */
+export async function getVisibleVariant(page) {
+  return page.evaluate((barSel) => {
+    const bar = document.querySelector(barSel);
+    if (!bar) return null;
+    const m = (bar.textContent || '').match(/(\d+)\s*\/\s*(\d+)/);
+    return m ? parseInt(m[1], 10) : null;
+  }, BAR_ID);
+}
+
+/**
+ * Click Accept — sends accept event with current variantId + paramValues.
+ * The bar transitions to a "Saving..." spinner, then a green confirmed row.
+ */
+export async function clickAccept(page) {
+  await page.locator(`${BAR_ID} button`, { hasText: /Accept/ }).click();
+}
+
+/**
+ * Click Discard — sends discard event. live-accept.mjs unwinds the wrapper
+ * and restores the original.
+ */
+export async function clickDiscard(page) {
+  // The discard button has just a "✕" glyph as text content.
+  await page.locator(`${BAR_ID} button`, { hasText: '✕' }).click();
+}
+
+/**
+ * Wait for the bar to go away (after accept/discard the bar hides on confirm).
+ */
+export async function waitForBarHidden(page, { timeout = 10_000 } = {}) {
+  await page.waitForFunction(
+    (barSel) => {
+      const bar = document.querySelector(barSel);
+      return !bar || bar.style.display === 'none';
+    },
+    BAR_ID,
+    { timeout },
+  );
+}