diff --git a/AGENTS.md b/AGENTS.md
index 5063b1ff4..7b3837899 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -239,10 +239,16 @@ Claude Code: plannotator annotate subcommand runs
 OpenCode/Pi: event handler intercepts command
         ↓
 Input type detected:
-  .md/.mdx   → file read from disk
-  .html/.htm → file read, rendered as raw HTML by default (or converted to markdown with --markdown)
-  https://   → fetched via Jina Reader (default) or fetch+Turndown (--no-jina)
-  folder/    → file browser opened, files converted on demand
+  .md/.mdx        → file read from disk
+  .html/.htm      → file read, rendered as raw HTML by default (or converted to markdown with --markdown)
+  http://localhost, 127.*, [::1]  → LIVE design preview: a per-session reverse proxy
+                     (packages/server/preview-proxy.ts) forwards to the dev server, proxies its
+                     HMR websocket, and injects the annotation bridge; the editor renders an
+                     <iframe src> at the proxy origin so the real page (Vite ES-module graph and
+                     all) loads and is annotated as HTML. Loopback-only. Non-goals: URL sharing,
+                     version history, and host-theme token injection are disabled for live sessions.
+  https:// (remote)→ fetched via Jina Reader (default) or fetch+Turndown (--no-jina)
+  folder/         → file browser opened, files converted on demand
         ↓
 Annotate server starts (reuses plan editor HTML with mode:"annotate")
         ↓
@@ -359,7 +365,7 @@ During normal plan review, an Archive sidebar tab provides the same browsing via
 
 | Endpoint              | Method | Purpose                                    |
 | --------------------- | ------ | ------------------------------------------ |
-| `/api/plan`           | GET    | Returns `{ plan, origin, mode: "annotate", filePath, sourceInfo?, gate, renderAs?, rawHtml?, previousPlan?, versionInfo?, diffCurrent?, diffHtml? }`. The last four power the per-file version diff: `previousPlan`/`versionInfo`/`diffCurrent` for the markdown diff, `diffHtml` (the previous→current page rendered with inline `<ins>`/`<del>`) for `--render-html` files. |
+| `/api/plan`           | GET    | Returns `{ plan, origin, mode: "annotate", filePath, sourceInfo?, gate, renderAs?, rawHtml?, livePreviewUrl?, previousPlan?, versionInfo?, diffCurrent?, diffHtml? }`. `livePreviewUrl` (with `renderAs: "html"`) is set for live localhost design previews — the editor renders an `<iframe src>` at that per-session reverse-proxy origin instead of markdown/raw HTML. The last four power the per-file version diff: `previousPlan`/`versionInfo`/`diffCurrent` for the markdown diff, `diffHtml` (the previous→current page rendered with inline `<ins>`/`<del>`) for `--render-html` files. |
 | `/api/plan/version`   | GET    | Fetch a specific stored version of the annotated file (`?v=N`) |
 | `/api/plan/versions`  | GET    | List all stored versions of the annotated file |
 | `/api/feedback`       | POST   | Submit annotations (body: feedback, annotations) |
diff --git a/apps/hook/server/index.ts b/apps/hook/server/index.ts
index 9e5b6536e..e0b30d50b 100644
--- a/apps/hook/server/index.ts
+++ b/apps/hook/server/index.ts
@@ -92,7 +92,7 @@ import {
 } from "@plannotator/shared/goal-setup";
 import { stripAtPrefix, resolveAtReference } from "@plannotator/shared/at-reference";
 import { htmlToMarkdown } from "@plannotator/shared/html-to-markdown";
-import { urlToMarkdown, isConvertedSource } from "@plannotator/shared/url-to-markdown";
+import { urlToMarkdown, isConvertedSource, isLoopbackUrl } from "@plannotator/shared/url-to-markdown";
 import { createWorktreePool, type WorktreePool, type PoolEntry } from "@plannotator/shared/worktree-pool";
 import { parsePRUrl, checkPRAuth, fetchPR, getCliName, getCliInstallUrl, getMRLabel, getMRNumberLabel, getDisplayRepo } from "@plannotator/server/pr";
 import { writeRemoteShareLink } from "@plannotator/server/share-url";
@@ -918,11 +918,33 @@ if (args[0] === "sessions") {
   let annotateMode: "annotate" | "annotate-folder" = "annotate";
   let sourceInfo: string | undefined;
   let sourceConverted = false;
+  let livePreviewUrl: string | undefined;
+  let previewProxy: { origin: string; stop: () => void } | undefined;
 
   // --- URL annotation ---
   const isUrl = /^https?:\/\//i.test(filePath);
 
-  if (isUrl) {
+  if (isUrl && isLoopbackUrl(filePath)) {
+    // Live design-preview: proxy the dev server so a real-origin iframe can
+    // render its module graph, and inject the annotation bridge.
+    const { startPreviewProxy } = await import("@plannotator/server/preview-proxy");
+    console.error(`Live preview: proxying ${filePath}`);
+    try {
+      previewProxy = await startPreviewProxy(filePath);
+    } catch (err) {
+      console.error(`Failed to start live preview proxy: ${err instanceof Error ? err.message : String(err)}`);
+      process.exit(1);
+    }
+    // The proxy owns the origin root and forwards every path; carry the target's
+    // path+query onto the proxy origin so the iframe loads the requested page,
+    // not the dev server's default route.
+    const targetUrl = new URL(filePath);
+    livePreviewUrl = previewProxy.origin + targetUrl.pathname + targetUrl.search;
+    process.on("exit", () => previewProxy?.stop());
+    markdown = "";
+    absolutePath = filePath;
+    sourceInfo = filePath;
+  } else if (isUrl) {
     const useJina = resolveUseJina(cliNoJina, loadConfig());
     console.error(`Fetching: ${filePath}${useJina ? " (via Jina Reader)" : " (via fetch+Turndown)"}`);
     try {
@@ -1036,6 +1058,7 @@ if (args[0] === "sessions") {
     gate: gateFlag,
     rawHtml,
     renderHtml: !!rawHtml,
+    livePreviewUrl,
     convertHtml: renderMarkdownFlag,
     agentCwd: projectRoot,
     project: annotateProject,
diff --git a/apps/opencode-plugin/commands.ts b/apps/opencode-plugin/commands.ts
index 78c99974c..c76195369 100644
--- a/apps/opencode-plugin/commands.ts
+++ b/apps/opencode-plugin/commands.ts
@@ -27,7 +27,8 @@ import { FILE_BROWSER_EXCLUDED } from "@plannotator/shared/reference-common";
 import { htmlToMarkdown } from "@plannotator/shared/html-to-markdown";
 import { parseAnnotateArgs } from "@plannotator/shared/annotate-args";
 import { parseReviewArgs } from "@plannotator/shared/review-args";
-import { urlToMarkdown, isConvertedSource } from "@plannotator/shared/url-to-markdown";
+import { urlToMarkdown, isConvertedSource, isLoopbackUrl } from "@plannotator/shared/url-to-markdown";
+import { startPreviewProxy } from "@plannotator/server/preview-proxy";
 import { buildLocalWorkspaceReview, type WorkspaceDiffType } from "@plannotator/server/review-workspace";
 import { statSync } from "fs";
 import path from "path";
@@ -224,12 +225,32 @@ export async function handleAnnotateCommand(
   let isFolder = false;
   let sourceInfo: string | undefined;
   let sourceConverted = false;
+  let livePreviewUrl: string | undefined;
+  let previewProxy: { origin: string; stop: () => void } | undefined;
   const agentCwd = directory || process.cwd();
 
   // --- URL annotation ---
   const isUrl = /^https?:\/\//i.test(filePath);
 
-  if (isUrl) {
+  if (isUrl && isLoopbackUrl(filePath)) {
+    // Live design-preview: proxy the dev server so a real-origin iframe can
+    // render its module graph, and inject the annotation bridge.
+    client.app.log({ level: "info", message: `Live preview: proxying ${filePath}...` });
+    try {
+      previewProxy = await startPreviewProxy(filePath);
+    } catch (err) {
+      client.app.log({ level: "error", message: `Failed to start live preview proxy: ${err instanceof Error ? err.message : String(err)}` });
+      return;
+    }
+    // The proxy owns the origin root and forwards every path; carry the
+    // target's path+query onto the proxy origin so the iframe loads the
+    // requested page, not the dev server's default route.
+    const targetUrl = new URL(filePath);
+    livePreviewUrl = previewProxy.origin + targetUrl.pathname + targetUrl.search;
+    markdown = "";
+    absolutePath = filePath;
+    sourceInfo = filePath;
+  } else if (isUrl) {
     const useJina = resolveUseJina(noJina, loadConfig());
     client.app.log({ level: "info", message: `Fetching: ${filePath}${useJina ? " (via Jina Reader)" : " (via fetch+Turndown)"}...` });
     try {
@@ -323,6 +344,7 @@ export async function handleAnnotateCommand(
     sourceConverted,
     rawHtml,
     renderHtml: !!rawHtml,
+    livePreviewUrl,
     convertHtml: renderMarkdownFlag,
     sharingEnabled: await getSharingEnabled(),
     shareBaseUrl: getShareBaseUrl(),
@@ -339,6 +361,7 @@ export async function handleAnnotateCommand(
   const result = await server.waitForDecision();
   await Bun.sleep(1500);
   server.stop();
+  previewProxy?.stop();
 
   // Both exit and approve are "no-op for the agent" — skip session injection.
   if (result.exit || result.approved) {
diff --git a/apps/pi-extension/index.ts b/apps/pi-extension/index.ts
index 36dbcdef0..7a3b6e0bf 100644
--- a/apps/pi-extension/index.ts
+++ b/apps/pi-extension/index.ts
@@ -34,7 +34,8 @@ import {
 import { hasMarkdownFiles, resolveUserPath } from "./generated/resolve-file.js";
 import { FILE_BROWSER_EXCLUDED } from "./generated/reference-common.js";
 import { htmlToMarkdown } from "./generated/html-to-markdown.js";
-import { urlToMarkdown, isConvertedSource } from "./generated/url-to-markdown.js";
+import { urlToMarkdown, isConvertedSource, isLoopbackUrl } from "./generated/url-to-markdown.js";
+import { startPreviewProxy } from "./server/previewProxy.js";
 import { loadConfig, resolveUseJina } from "./generated/config.js";
 import { readImprovementHook } from "./generated/improvement-hooks.js";
 import { composeImproveContext } from "./generated/pfm-reminder.js";
@@ -521,11 +522,31 @@ export default function plannotator(pi: ExtensionAPI): void {
 			let sourceInfo: string | undefined;
 			let sourceConverted = false;
 			let isFolder = false;
+			let livePreviewUrl: string | undefined;
+			let previewProxy: { origin: string; stop: () => void } | undefined;
 
 			// --- URL annotation ---
 			const isUrl = /^https?:\/\//i.test(filePath);
 
-			if (isUrl) {
+			if (isUrl && isLoopbackUrl(filePath)) {
+				// Live design-preview: proxy the dev server so a real-origin iframe can
+				// render its module graph, and inject the annotation bridge.
+				ctx.ui.notify(`Live preview: proxying ${filePath}...`, "info");
+				try {
+					previewProxy = await startPreviewProxy(filePath);
+				} catch (err) {
+					ctx.ui.notify(`Failed to start live preview proxy: ${err instanceof Error ? err.message : String(err)}`, "error");
+					return;
+				}
+				// The proxy owns the origin root and forwards every path; carry the
+				// target's path+query onto the proxy origin so the iframe loads the
+				// requested page, not the dev server's default route.
+				const targetUrl = new URL(filePath);
+				livePreviewUrl = previewProxy.origin + targetUrl.pathname + targetUrl.search;
+				markdown = "";
+				absolutePath = filePath;
+				sourceInfo = filePath;
+			} else if (isUrl) {
 				const useJina = resolveUseJina(noJina, loadConfig());
 				ctx.ui.notify(`Fetching: ${filePath}${useJina ? " (via Jina Reader)" : " (via fetch+Turndown)"}...`, "info");
 				try {
@@ -608,6 +629,8 @@ export default function plannotator(pi: ExtensionAPI): void {
 					rawHtml,
 					!!rawHtml,
 					renderMarkdownFlag,
+					undefined,
+					livePreviewUrl,
 				);
 				ctx.ui.notify(sessionOpenedMessage("Annotation opened", session.url), "info");
 				void session
@@ -643,8 +666,14 @@ export default function plannotator(pi: ExtensionAPI): void {
 					})
 					.catch((err) => {
 						reportBackgroundError(ctx, "Plannotator annotation session failed", err, origin);
+					})
+					.finally(() => {
+						// Pi is a persistent extension host, so the live-preview proxy
+						// must die with the session (not on process exit).
+						try { previewProxy?.stop(); } catch {}
 					});
 			} catch (err) {
+				try { previewProxy?.stop(); } catch {}
 				ctx.ui.notify(
 					`Failed to start annotation UI: ${getStartupErrorMessage(err)}`,
 					"error",
diff --git a/apps/pi-extension/plannotator-browser.ts b/apps/pi-extension/plannotator-browser.ts
index 272a21653..3dc48d920 100644
--- a/apps/pi-extension/plannotator-browser.ts
+++ b/apps/pi-extension/plannotator-browser.ts
@@ -526,6 +526,7 @@ export async function startMarkdownAnnotationSession(
 	renderHtml?: boolean,
 	convertHtml?: boolean,
 	recentMessages?: { messageId: string; text: string; timestamp?: string }[],
+	livePreviewUrl?: string,
 ): Promise<BrowserDecisionSession<{ feedback: string; exit?: boolean; approved?: boolean; selectedMessageId?: string; feedbackScope?: "message" | "messages" }>> {
 	if (!ctx.hasUI || !planHtmlContent) {
 		throw new Error("Plannotator annotation browser is unavailable in this session.");
@@ -556,6 +557,7 @@ export async function startMarkdownAnnotationSession(
 		rawHtml,
 		renderHtml,
 		convertHtml,
+		livePreviewUrl,
 		htmlContent: planHtmlContent,
 		sharingEnabled: resolveSharingEnabled(loadConfig()),
 		shareBaseUrl: process.env.PLANNOTATOR_SHARE_URL || undefined,
diff --git a/apps/pi-extension/server/previewProxy.ts b/apps/pi-extension/server/previewProxy.ts
new file mode 100644
index 000000000..061962183
--- /dev/null
+++ b/apps/pi-extension/server/previewProxy.ts
@@ -0,0 +1,225 @@
+// apps/pi-extension/server/previewProxy.ts
+//
+// Node (`node:http`) port of packages/server/preview-proxy.ts for the Pi
+// runtime. Same public interface — `startPreviewProxy(target)` → `{ origin,
+// stop() }` — but built on `http.request` + raw-socket WebSocket passthrough
+// instead of `Bun.serve` + `fetch`/client `WebSocket`. CLAUDE.md requires both
+// runtimes to carry equivalent annotate behavior.
+import http from "node:http";
+import https from "node:https";
+import net from "node:net";
+import tls from "node:tls";
+import type { AddressInfo } from "node:net";
+import type { Socket } from "node:net";
+
+import { isLoopbackUrl } from "../generated/url-to-markdown.js";
+import { buildLivePreviewInjection } from "../generated/livePreviewInjection.js";
+
+export interface PreviewProxy {
+	/** The proxy's own base origin, e.g. "http://localhost:53211". */
+	origin: string;
+	stop: () => void;
+}
+
+export function parseTarget(target: string): {
+	protocol: string;
+	host: string;
+	hostname: string;
+	port: number;
+	secure: boolean;
+} {
+	if (!isLoopbackUrl(target)) {
+		throw new Error(`Live preview target must be a loopback URL, got: ${target}`);
+	}
+	const u = new URL(target);
+	const secure = u.protocol === "https:";
+	return {
+		protocol: u.protocol,
+		host: u.host, // includes port
+		hostname: u.hostname,
+		port: u.port ? Number(u.port) : secure ? 443 : 80,
+		secure,
+	};
+}
+
+/**
+ * Rewrite the incoming request headers for forwarding to the target: force
+ * Host, canonicalize Origin/Referer to the target, force an identity body (Bun's
+ * `fetch` transparently decodes; `http.request` does not, so we ask upstream for
+ * an uncompressed body we can inject into and stream verbatim), and drop
+ * conditional headers so we always get the full HTML to inject into.
+ */
+export function rewriteRequestHeaders(
+	incoming: http.IncomingHttpHeaders,
+	targetHost: string,
+	httpBase: string,
+	pathname: string,
+): http.OutgoingHttpHeaders {
+	const h: http.OutgoingHttpHeaders = { ...incoming };
+	h.host = targetHost;
+	if (h.origin !== undefined) h.origin = httpBase;
+	if (h.referer !== undefined) h.referer = httpBase + pathname;
+	h["accept-encoding"] = "identity";
+	delete h["if-none-match"];
+	delete h["if-modified-since"];
+	return h;
+}
+
+export function injectBridge(html: string, block: string): string {
+	if (html.includes("<head>")) return html.replace("<head>", "<head>" + block);
+	return block + html;
+}
+
+/**
+ * Start a per-session reverse proxy in front of a loopback dev server.
+ * Forwards HTTP + the HMR WebSocket, and injects the annotation bridge into
+ * HTML responses. Bound to 127.0.0.1 (host-only). Throws on a non-loopback target.
+ */
+export async function startPreviewProxy(target: string): Promise<PreviewProxy> {
+	const { protocol, host, hostname, port, secure } = parseTarget(target);
+	const httpBase = `${protocol}//${host}`;
+	const block = buildLivePreviewInjection();
+	const requester = secure ? https : http;
+
+	// Track live sockets (WS passthrough pairs) so stop() can tear them down.
+	const openSockets = new Set<Socket>();
+
+	const server = http.createServer((req, res) => {
+		const inUrl = new URL(req.url || "/", "http://127.0.0.1");
+		const pathAndQuery = inUrl.pathname + inUrl.search;
+		const headers = rewriteRequestHeaders(req.headers, host, httpBase, inUrl.pathname);
+
+		const upstreamReq = requester.request(
+			{
+				protocol,
+				hostname,
+				port,
+				method: req.method,
+				path: pathAndQuery,
+				headers,
+			},
+			(upstreamRes) => {
+				const respHeaders: http.OutgoingHttpHeaders = { ...upstreamRes.headers };
+				delete respHeaders["content-encoding"];
+				delete respHeaders["content-length"];
+
+				// Only follow same-origin (loopback) redirects; strip cross-origin Location.
+				const loc = upstreamRes.headers["location"];
+				if (typeof loc === "string" && loc) {
+					try {
+						const abs = new URL(loc, httpBase);
+						if (abs.host !== host) delete respHeaders["location"];
+					} catch {
+						delete respHeaders["location"];
+					}
+				}
+
+				const ct = (upstreamRes.headers["content-type"] || "").toString();
+				if (ct.includes("text/html")) {
+					// We re-send a fixed buffer via res.end(), so drop any chunked
+					// framing the upstream used for the original body.
+					delete respHeaders["transfer-encoding"];
+					const chunks: Buffer[] = [];
+					upstreamRes.on("data", (c: Buffer) => chunks.push(c));
+					upstreamRes.on("end", () => {
+						const html = Buffer.concat(chunks).toString("utf-8");
+						const body = injectBridge(html, block);
+						res.writeHead(upstreamRes.statusCode || 200, respHeaders);
+						res.end(body);
+					});
+					upstreamRes.on("error", () => {
+						try {
+							res.destroy();
+						} catch {}
+					});
+				} else {
+					res.writeHead(upstreamRes.statusCode || 200, respHeaders);
+					upstreamRes.pipe(res);
+				}
+			},
+		);
+
+		upstreamReq.on("error", () => {
+			if (!res.headersSent) {
+				res.writeHead(502, { "content-type": "text/plain" });
+			}
+			try {
+				res.end("Live preview: dev server unreachable");
+			} catch {}
+		});
+
+		// Forward the request body (no-op for GET/HEAD).
+		req.pipe(upstreamReq);
+	});
+
+	// HMR WebSocket passthrough via a dependency-free raw-socket pipe.
+	server.on("upgrade", (req, clientSocket, head) => {
+		openSockets.add(clientSocket as Socket);
+		const connect = secure
+			? tls.connect({ host: hostname, port, servername: hostname, rejectUnauthorized: false })
+			: net.connect({ host: hostname, port });
+		const upstreamSocket = connect as Socket;
+		openSockets.add(upstreamSocket);
+
+		const cleanup = () => {
+			openSockets.delete(clientSocket as Socket);
+			openSockets.delete(upstreamSocket);
+			try {
+				clientSocket.destroy();
+			} catch {}
+			try {
+				upstreamSocket.destroy();
+			} catch {}
+		};
+
+		upstreamSocket.on("connect", () => {
+			// Re-send the upgrade request line + headers with Host rewritten, then
+			// forward any already-buffered bytes and pipe both directions. Upstream's
+			// "101 Switching Protocols" response flows back through the pipe.
+			let raw = `${req.method} ${req.url} HTTP/1.1\r\n`;
+			const outHeaders: http.IncomingHttpHeaders = { ...req.headers, host };
+			for (const [k, v] of Object.entries(outHeaders)) {
+				if (v === undefined) continue;
+				if (Array.isArray(v)) {
+					for (const vv of v) raw += `${k}: ${vv}\r\n`;
+				} else {
+					raw += `${k}: ${v}\r\n`;
+				}
+			}
+			raw += "\r\n";
+			upstreamSocket.write(raw);
+			if (head && head.length) upstreamSocket.write(head);
+			clientSocket.pipe(upstreamSocket);
+			upstreamSocket.pipe(clientSocket);
+		});
+
+		upstreamSocket.on("error", cleanup);
+		upstreamSocket.on("close", cleanup);
+		clientSocket.on("error", cleanup);
+		clientSocket.on("close", cleanup);
+	});
+
+	await new Promise<void>((resolveListen, rejectListen) => {
+		server.once("error", rejectListen);
+		server.listen(0, "127.0.0.1", () => {
+			server.removeListener("error", rejectListen);
+			resolveListen();
+		});
+	});
+
+	const address = server.address() as AddressInfo;
+	return {
+		origin: `http://localhost:${address.port}`,
+		stop: () => {
+			for (const s of openSockets) {
+				try {
+					s.destroy();
+				} catch {}
+			}
+			openSockets.clear();
+			try {
+				server.close();
+			} catch {}
+		},
+	};
+}
diff --git a/apps/pi-extension/server/serverAnnotate.ts b/apps/pi-extension/server/serverAnnotate.ts
index 045885754..caa5e2360 100644
--- a/apps/pi-extension/server/serverAnnotate.ts
+++ b/apps/pi-extension/server/serverAnnotate.ts
@@ -175,6 +175,12 @@ export async function startAnnotateServer(options: {
 	gate?: boolean;
 	rawHtml?: string;
 	renderHtml?: boolean;
+	/**
+	 * Live-preview proxy origin (e.g. "http://localhost:53211"). When set, the
+	 * editor renders a live <iframe src> pointed at this origin instead of
+	 * markdown/raw-HTML content. Sharing and version history are disabled.
+	 */
+	livePreviewUrl?: string;
 	convertHtml?: boolean;
 	agentCwd?: string;
 	/** Project name for keying per-file version history (powers the annotate version diff). */
@@ -419,6 +425,7 @@ export async function startAnnotateServer(options: {
 				renderAs: displayRawHtml ? 'html' : 'markdown',
 				...(displayRawHtml ? { rawHtml: displayRawHtml } : {}),
 				...(diffHtml ? { diffHtml } : {}),
+				...(options.livePreviewUrl ? { renderAs: "html" as const, livePreviewUrl: options.livePreviewUrl } : {}),
 				convertHtml: options.convertHtml ?? false,
 				...(annotateHistory
 					? {
diff --git a/apps/pi-extension/vendor.sh b/apps/pi-extension/vendor.sh
index 680c35fbf..1f79cf1de 100755
--- a/apps/pi-extension/vendor.sh
+++ b/apps/pi-extension/vendor.sh
@@ -93,3 +93,15 @@ for f in claude-agent-sdk codex-app-server opencode-sdk command-path pi-sdk pi-s
   src="../../packages/ai/providers/$f.ts"
   printf '// @generated — DO NOT EDIT. Source: packages/ai/providers/%s.ts\n' "$f" | cat - "$src" > "generated/ai/providers/$f.ts"
 done
+
+# Vendor the live-preview injection block from packages/ui/components/html-viewer.
+# These are browser-safe, zero-dependency string constants (highlight CSS + the
+# postMessage bridge) — kept as the single source of truth so the Pi live-preview
+# proxy injects byte-for-byte what the srcdoc client path does. bridge-script has
+# no imports; livePreviewInjection's ./bridge-script import is rewritten to .js.
+printf '// @generated — DO NOT EDIT. Source: packages/ui/components/html-viewer/bridge-script.ts\n' \
+  | cat - "../../packages/ui/components/html-viewer/bridge-script.ts" > "generated/bridge-script.ts"
+printf '// @generated — DO NOT EDIT. Source: packages/ui/components/html-viewer/livePreviewInjection.ts\n' \
+  | cat - "../../packages/ui/components/html-viewer/livePreviewInjection.ts" \
+  | sed 's|from "\./bridge-script"|from "./bridge-script.js"|' \
+  > "generated/livePreviewInjection.ts"
diff --git a/packages/editor/App.tsx b/packages/editor/App.tsx
index 056126839..60233d3bc 100644
--- a/packages/editor/App.tsx
+++ b/packages/editor/App.tsx
@@ -375,6 +375,7 @@ const App: React.FC = () => {
   // card-chromed markdown column. Branch the document-area containers on this.
   const isHtmlSurface = renderAs === 'html';
   const [rawHtml, setRawHtml] = useState('');
+  const [livePreviewUrl, setLivePreviewUrl] = useState<string | null>(null);
   const [htmlDiffHtml, setHtmlDiffHtml] = useState<string | null>(null);
   const [shareHtml, setShareHtml] = useState('');
   // Session-level force-markdown preference (`--markdown`). When set, folder/linked HTML
@@ -2213,7 +2214,7 @@ const App: React.FC = () => {
         if (!res.ok) throw new Error('Not in API mode');
         return res.json();
       })
-      .then((data: { plan: string; origin?: Origin; mode?: 'annotate' | 'annotate-last' | 'annotate-folder' | 'archive' | 'goal-setup'; goalSetup?: GoalSetupBundle; filePath?: string; sourceInfo?: string; sourceConverted?: boolean; sourceSave?: SourceSaveCapability; gate?: boolean; renderAs?: 'html' | 'markdown'; rawHtml?: string; shareHtml?: string; diffHtml?: string; convertHtml?: boolean; sharingEnabled?: boolean; shareBaseUrl?: string; pasteApiUrl?: string; repoInfo?: { display: string; branch?: string; host?: string }; previousPlan?: string | null; versionInfo?: { version: number; totalVersions: number; project: string }; archivePlans?: ArchivedPlan[]; projectRoot?: string; isWSL?: boolean; serverConfig?: { displayName?: string; gitUser?: string }; recentMessages?: PickerMessage[]; agentTerminal?: AgentTerminalCapability }) => {
+      .then((data: { plan: string; origin?: Origin; mode?: 'annotate' | 'annotate-last' | 'annotate-folder' | 'archive' | 'goal-setup'; goalSetup?: GoalSetupBundle; filePath?: string; sourceInfo?: string; sourceConverted?: boolean; sourceSave?: SourceSaveCapability; gate?: boolean; renderAs?: 'html' | 'markdown'; rawHtml?: string; livePreviewUrl?: string; shareHtml?: string; diffHtml?: string; convertHtml?: boolean; sharingEnabled?: boolean; shareBaseUrl?: string; pasteApiUrl?: string; repoInfo?: { display: string; branch?: string; host?: string }; previousPlan?: string | null; versionInfo?: { version: number; totalVersions: number; project: string }; archivePlans?: ArchivedPlan[]; projectRoot?: string; isWSL?: boolean; serverConfig?: { displayName?: string; gitUser?: string }; recentMessages?: PickerMessage[]; agentTerminal?: AgentTerminalCapability }) => {
         // Initialize config store with server-provided values (config file > cookie > default)
         configStore.init(data.serverConfig);
         // Session-level force-markdown preference (--markdown); threaded into folder/linked
@@ -2233,9 +2234,10 @@ const App: React.FC = () => {
           archive.fetchPlans();
           setSharingEnabled(false);
           sidebar.open('archive');
-        } else if (data.renderAs === 'html' && data.rawHtml) {
+        } else if (data.renderAs === 'html' && (data.rawHtml || data.livePreviewUrl)) {
           setRenderAs('html');
-          setRawHtml(data.rawHtml);
+          setRawHtml(data.rawHtml ?? '');
+          setLivePreviewUrl(data.livePreviewUrl ?? null);
           setShareHtml(data.shareHtml ?? '');
           setHtmlDiffHtml(data.diffHtml ?? null);
           setMarkdown('');
@@ -4320,6 +4322,7 @@ const App: React.FC = () => {
                     diffActive={isPlanDiffActive && !!htmlDiffHtml}
                     onToggleDiff={() => setIsPlanDiffActive((v) => !v)}
                     onAskAI={canUseDocumentAskAI ? handleAskAI : undefined}
+                    src={livePreviewUrl ?? undefined}
                   />
                 ) : isEditingMarkdown ? (
                   <MarkdownEditor
diff --git a/packages/server/annotate.ts b/packages/server/annotate.ts
index ed776a898..b378c8fef 100644
--- a/packages/server/annotate.ts
+++ b/packages/server/annotate.ts
@@ -88,6 +88,12 @@ export interface AnnotateServerOptions {
   rawHtml?: string;
   /** Render HTML as-is in an iframe. */
   renderHtml?: boolean;
+  /**
+   * Live-preview proxy origin (e.g. "http://localhost:53211"). When set, the
+   * editor renders a live <iframe src> pointed at this origin instead of
+   * markdown/raw-HTML content. Sharing and version history are disabled.
+   */
+  livePreviewUrl?: string;
   /** Session-level force-markdown preference (`--markdown`). Exposed in /api/plan so the
    *  frontend appends `&convert=1` when navigating folder/linked HTML files. */
   convertHtml?: boolean;
@@ -151,6 +157,7 @@ export async function startAnnotateServer(
     gate = false,
     rawHtml,
     renderHtml = false,
+    livePreviewUrl,
     convertHtml = false,
     agentCwd,
     project,
@@ -398,6 +405,7 @@ export async function startAnnotateServer(
               renderAs: displayRawHtml ? 'html' as const : 'markdown' as const,
               ...(displayRawHtml ? { rawHtml: displayRawHtml } : {}),
               ...(diffHtml ? { diffHtml } : {}),
+              ...(livePreviewUrl ? { renderAs: "html" as const, livePreviewUrl } : {}),
               convertHtml,
               ...(annotateHistory
                 ? {
diff --git a/packages/server/package.json b/packages/server/package.json
index 1a1fa2251..f0fd50b0c 100644
--- a/packages/server/package.json
+++ b/packages/server/package.json
@@ -23,7 +23,8 @@
     "./sessions": "./sessions.ts",
     "./project": "./project.ts",
     "./pr": "./pr.ts",
-    "./html-assets": "./html-assets.ts"
+    "./html-assets": "./html-assets.ts",
+    "./preview-proxy": "./preview-proxy.ts"
   },
   "files": [
     "*.ts",
@@ -34,6 +35,7 @@
     "@pierre/diffs": "1.2.8",
     "@plannotator/ai": "workspace:*",
     "@plannotator/shared": "workspace:*",
+    "@plannotator/ui": "workspace:*",
     "@plannotator/webtui": "0.1.0"
   },
   "peerDependencies": {
diff --git a/packages/server/preview-proxy.test.ts b/packages/server/preview-proxy.test.ts
new file mode 100644
index 000000000..a5e150915
--- /dev/null
+++ b/packages/server/preview-proxy.test.ts
@@ -0,0 +1,26 @@
+// packages/server/preview-proxy.test.ts
+import { describe, expect, it } from "bun:test";
+import { injectBridge, rewriteRequestHeaders, parseTarget } from "./preview-proxy";
+
+describe("preview-proxy helpers", () => {
+  it("parseTarget rejects non-loopback", () => {
+    expect(() => parseTarget("http://example.com")).toThrow();
+    expect(parseTarget("http://localhost:5176/pages/x").host).toBe("localhost:5176");
+  });
+
+  it("rewriteRequestHeaders forces Host to the target", () => {
+    const h = new Headers({ host: "localhost:9999", origin: "http://localhost:9999" });
+    const out = rewriteRequestHeaders(h, "localhost:5176", "http://localhost:5176", "/p");
+    expect(out.get("host")).toBe("localhost:5176");
+    expect(out.get("origin")).toBe("http://localhost:5176");
+  });
+
+  it("injectBridge inserts after <head>", () => {
+    const out = injectBridge("<html><head>\n<title>x</title></head><body></body></html>", "<b/>");
+    expect(out).toContain("<head><b/>");
+  });
+
+  it("injectBridge prepends when no <head>", () => {
+    expect(injectBridge("<body>hi</body>", "<b/>")).toBe("<b/><body>hi</body>");
+  });
+});
diff --git a/packages/server/preview-proxy.ts b/packages/server/preview-proxy.ts
new file mode 100644
index 000000000..9ac164b31
--- /dev/null
+++ b/packages/server/preview-proxy.ts
@@ -0,0 +1,144 @@
+// packages/server/preview-proxy.ts
+import { isLoopbackUrl } from "@plannotator/shared/url-to-markdown";
+import { buildLivePreviewInjection } from "@plannotator/ui/components/html-viewer/livePreviewInjection";
+
+export interface PreviewProxy {
+  /** The proxy's own base origin, e.g. "http://localhost:53211". */
+  origin: string;
+  stop: () => void;
+}
+
+/** Per-connection state for a proxied HMR WebSocket. */
+interface PreviewWsData {
+  path: string;
+  protocol: string;
+  /** Upstream socket to the dev server (opened on `open`). */
+  up?: WebSocket;
+  /** Messages received before the upstream socket is open. */
+  queue: (string | ArrayBufferLike | Uint8Array)[];
+}
+
+export function parseTarget(target: string): { httpBase: string; wsBase: string; host: string } {
+  if (!isLoopbackUrl(target)) {
+    throw new Error(`Live preview target must be a loopback URL, got: ${target}`);
+  }
+  const u = new URL(target);
+  const host = u.host; // includes port
+  return {
+    httpBase: `${u.protocol}//${host}`,
+    wsBase: `${u.protocol === "https:" ? "wss:" : "ws:"}//${host}`,
+    host,
+  };
+}
+
+export function rewriteRequestHeaders(
+  incoming: Headers,
+  targetHost: string,
+  httpBase: string,
+  pathname: string,
+): Headers {
+  const h = new Headers(incoming);
+  h.set("host", targetHost);
+  if (h.has("origin")) h.set("origin", httpBase);
+  if (h.has("referer")) h.set("referer", httpBase + pathname);
+  // We decode upstream bodies; drop conditional/range so we always get full HTML to inject into.
+  h.delete("if-none-match");
+  h.delete("if-modified-since");
+  return h;
+}
+
+export function injectBridge(html: string, block: string): string {
+  if (html.includes("<head>")) return html.replace("<head>", "<head>" + block);
+  return block + html;
+}
+
+/**
+ * Start a per-session reverse proxy in front of a loopback dev server.
+ * Forwards HTTP + the HMR WebSocket, and injects the annotation bridge into
+ * HTML responses. Bound to 127.0.0.1 (host-only). Throws on a non-loopback target.
+ */
+export async function startPreviewProxy(target: string): Promise<PreviewProxy> {
+  const { httpBase, wsBase, host } = parseTarget(target);
+  const block = buildLivePreviewInjection();
+
+  const server = Bun.serve<PreviewWsData>({
+    hostname: "127.0.0.1",
+    port: 0, // ephemeral
+    async fetch(req, srv) {
+      const inUrl = new URL(req.url);
+
+      // HMR WebSocket passthrough.
+      if ((req.headers.get("upgrade") || "").toLowerCase() === "websocket") {
+        const ok = srv.upgrade(req, {
+          data: {
+            path: inUrl.pathname + inUrl.search,
+            protocol: req.headers.get("sec-websocket-protocol") || "",
+            queue: [],
+          },
+        });
+        return ok ? undefined : new Response("ws upgrade failed", { status: 400 });
+      }
+
+      const outUrl = httpBase + inUrl.pathname + inUrl.search;
+      const headers = rewriteRequestHeaders(req.headers, host, httpBase, inUrl.pathname);
+
+      let upstream: Response;
+      try {
+        upstream = await fetch(outUrl, {
+          method: req.method,
+          headers,
+          body: req.method === "GET" || req.method === "HEAD" ? undefined : await req.arrayBuffer(),
+          redirect: "manual", // never follow a redirect off the loopback origin
+        });
+      } catch {
+        return new Response("Live preview: dev server unreachable", { status: 502 });
+      }
+
+      const respHeaders = new Headers(upstream.headers);
+      respHeaders.delete("content-encoding");
+      respHeaders.delete("content-length");
+
+      // Only follow same-origin (loopback) redirects; strip cross-origin Location.
+      const loc = respHeaders.get("location");
+      if (loc) {
+        try {
+          const abs = new URL(loc, httpBase);
+          if (abs.host !== host) respHeaders.delete("location");
+        } catch { respHeaders.delete("location"); }
+      }
+
+      const ct = upstream.headers.get("content-type") || "";
+      if (ct.includes("text/html")) {
+        const html = await upstream.text();
+        return new Response(injectBridge(html, block), { status: upstream.status, headers: respHeaders });
+      }
+      return new Response(upstream.body, { status: upstream.status, headers: respHeaders });
+    },
+    websocket: {
+      open(ws) {
+        const { path, protocol } = ws.data;
+        const protos = protocol ? protocol.split(",").map((s) => s.trim()).filter(Boolean) : undefined;
+        const up = protos ? new WebSocket(wsBase + path, protos) : new WebSocket(wsBase + path);
+        ws.data.up = up;
+        up.onopen = () => {
+          for (const m of ws.data.queue) up.send(m as string);
+          ws.data.queue.length = 0;
+        };
+        up.onmessage = (e) => { try { ws.send(e.data); } catch {} };
+        up.onclose = () => { try { ws.close(); } catch {} };
+        up.onerror = () => {};
+      },
+      message(ws, message) {
+        const up = ws.data.up;
+        if (up && up.readyState === 1) up.send(message as string);
+        else ws.data.queue.push(message);
+      },
+      close(ws) { try { ws.data.up?.close(); } catch {} },
+    },
+  });
+
+  return {
+    origin: `http://localhost:${server.port}`,
+    stop: () => server.stop(true),
+  };
+}
diff --git a/packages/shared/url-to-markdown.test.ts b/packages/shared/url-to-markdown.test.ts
index 15bc1cbd3..e54761796 100644
--- a/packages/shared/url-to-markdown.test.ts
+++ b/packages/shared/url-to-markdown.test.ts
@@ -1,5 +1,5 @@
-import { test, expect, mock, beforeEach, afterEach } from "bun:test";
-import { urlToMarkdown } from "./url-to-markdown";
+import { test, expect, mock, beforeEach, afterEach, describe, it } from "bun:test";
+import { urlToMarkdown, isLoopbackUrl } from "./url-to-markdown";
 
 // Track fetch calls to verify headers and URL selection
 let fetchCalls: { url: string; headers: Record<string, string> }[] = [];
@@ -175,3 +175,20 @@ test("raw .md URL: still takes priority over content negotiation", async () => {
   expect(result.source).toBe("fetch-raw");
   expect(result.markdown).toBe("# Raw markdown file");
 });
+
+describe("isLoopbackUrl", () => {
+  it("accepts loopback hosts", () => {
+    for (const u of ["http://localhost:5176/x", "http://127.0.0.1:3000", "http://[::1]:8080", "http://0.0.0.0:9"]) {
+      expect(isLoopbackUrl(u)).toBe(true);
+    }
+  });
+  it("rejects LAN and public hosts", () => {
+    for (const u of ["http://192.168.1.10:5176", "http://10.0.0.5", "http://example.com", "http://169.254.1.1"]) {
+      expect(isLoopbackUrl(u)).toBe(false);
+    }
+  });
+  it("rejects non-http(s) and malformed", () => {
+    expect(isLoopbackUrl("file:///etc/passwd")).toBe(false);
+    expect(isLoopbackUrl("not a url")).toBe(false);
+  });
+});
diff --git a/packages/shared/url-to-markdown.ts b/packages/shared/url-to-markdown.ts
index 19f68e92f..f36aff932 100644
--- a/packages/shared/url-to-markdown.ts
+++ b/packages/shared/url-to-markdown.ts
@@ -46,7 +46,7 @@ const PRIVATE_IPV4 = /^(10\.\d{1,3}|192\.168|172\.(1[6-9]|2\d|3[01])|169\.254)\.
 // Bracketed IPv6 private/reserved prefixes (matches WHATWG URL hostname getter output).
 // fc00::/7 covers fc00:: through fdff::, so match [fc or [fd prefix.
 const PRIVATE_IPV6 = /^\[(::1|::ffff:|fe80:|fc[0-9a-f]{2}:|fd[0-9a-f]{2}:)/i;
-function isLocalUrl(url: string): boolean {
+export function isLocalUrl(url: string): boolean {
   try {
     const { hostname } = new URL(url);
     if (
@@ -69,6 +69,28 @@ function isLocalUrl(url: string): boolean {
   }
 }
 
+/**
+ * Strict loopback check for the live-preview proxy allow-decision. Only the
+ * local machine's own loopback interface — NOT LAN/private ranges. Requires an
+ * http(s) URL.
+ */
+export function isLoopbackUrl(url: string): boolean {
+  try {
+    const u = new URL(url);
+    if (u.protocol !== "http:" && u.protocol !== "https:") return false;
+    const h = u.hostname;
+    return (
+      h === "localhost" ||
+      h === "::1" ||
+      h === "[::1]" ||
+      h === "0.0.0.0" ||
+      /^127\./.test(h)
+    );
+  } catch {
+    return false;
+  }
+}
+
 /**
  * Fetch a URL and return its content as markdown.
  *
diff --git a/packages/ui/components/html-viewer/HtmlViewer.tsx b/packages/ui/components/html-viewer/HtmlViewer.tsx
index d88119c48..0733b4487 100644
--- a/packages/ui/components/html-viewer/HtmlViewer.tsx
+++ b/packages/ui/components/html-viewer/HtmlViewer.tsx
@@ -67,6 +67,9 @@ export interface HtmlViewerProps {
   /** Toggle the diff-highlighted view on/off. */
   onToggleDiff?: () => void;
   onAskAI?: CommentAskAIHandler;
+  /** Live-preview mode: render <iframe src> at this origin instead of srcDoc.
+   *  The bridge + highlight CSS are injected server-side by the preview proxy. */
+  src?: string;
 }
 
 export const HtmlViewer = forwardRef<ViewerHandle, HtmlViewerProps>(
@@ -89,6 +92,7 @@ export const HtmlViewer = forwardRef<ViewerHandle, HtmlViewerProps>(
       diffActive,
       onToggleDiff,
       onAskAI,
+      src,
     },
     ref,
   ) => {
@@ -276,18 +280,26 @@ export const HtmlViewer = forwardRef<ViewerHandle, HtmlViewerProps>(
               </div>
             )}
             <iframe
-            ref={iframeRef}
-            srcDoc={srcdoc}
-            sandbox="allow-scripts"
-            style={{
-              width: "100%",
-              height: fullViewport ? "100%" : `${iframeHeight}px`,
-              border: "none",
-              display: "block",
-              colorScheme: "auto",
-            }}
-            title="HTML Plan Viewer"
-          />
+              ref={iframeRef}
+              {...(src
+                ? { src, sandbox: "allow-scripts allow-same-origin" }
+                : { srcDoc: srcdoc, sandbox: "allow-scripts" })}
+              style={{
+                width: "100%",
+                height: fullViewport ? "100%" : `${iframeHeight}px`,
+                border: "none",
+                display: "block",
+                // Live preview (src): render like a real browser tab — an opaque
+                // white canvas that doesn't inherit the host's color-scheme, so an
+                // unstyled/transparent page shows black-on-white instead of bleeding
+                // through to Plannotator's surface. A page with its own background
+                // paints over this. srcDoc path keeps its theme-following behavior.
+                ...(src
+                  ? { background: "#ffffff", colorScheme: "normal" as const }
+                  : { colorScheme: "auto" as const }),
+              }}
+              title="HTML Plan Viewer"
+            />
           </article>
         </div>
 
diff --git a/packages/ui/components/html-viewer/livePreviewInjection.test.ts b/packages/ui/components/html-viewer/livePreviewInjection.test.ts
new file mode 100644
index 000000000..52139acf3
--- /dev/null
+++ b/packages/ui/components/html-viewer/livePreviewInjection.test.ts
@@ -0,0 +1,11 @@
+import { describe, expect, it } from "bun:test";
+import { buildLivePreviewInjection } from "./livePreviewInjection";
+
+describe("buildLivePreviewInjection", () => {
+  it("emits a style + script block carrying the bridge", () => {
+    const out = buildLivePreviewInjection();
+    expect(out).toContain("<style");
+    expect(out).toContain("<script");
+    expect(out).toContain("plannotator-bridge-"); // the PREFIX the bridge uses
+  });
+});
diff --git a/packages/ui/components/html-viewer/livePreviewInjection.ts b/packages/ui/components/html-viewer/livePreviewInjection.ts
new file mode 100644
index 000000000..cc01e8487
--- /dev/null
+++ b/packages/ui/components/html-viewer/livePreviewInjection.ts
@@ -0,0 +1,11 @@
+import { ANNOTATION_HIGHLIGHT_CSS, BRIDGE_SCRIPT } from "./bridge-script";
+
+/**
+ * The block injected into a LIVE (proxied) HTML page: annotation highlight CSS
+ * + the postMessage bridge. Shared with the srcdoc path so annotation behaves
+ * identically. No theme tokens — a real dev app owns its styling and does not
+ * opt into host theming.
+ */
+export function buildLivePreviewInjection(): string {
+  return `<style>${ANNOTATION_HIGHLIGHT_CSS}</style><script>${BRIDGE_SCRIPT}</script>`;
+}
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 8c394e52b..d5b7a1985 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -10,6 +10,7 @@
     "./components/goal-setup/*": "./components/goal-setup/*.tsx",
     "./components/ImageAnnotator": "./components/ImageAnnotator/index.tsx",
     "./components/html-viewer": "./components/html-viewer/index.ts",
+    "./components/html-viewer/livePreviewInjection": "./components/html-viewer/livePreviewInjection.ts",
     "./components/sidebar/*": "./components/sidebar/*.tsx",
     "./components/plan-diff/*": "./components/plan-diff/*.tsx",
     "./utils/*": "./utils/*.ts",