From 7eae5213fe7470a4850cf3985af9f51678b67a71 Mon Sep 17 00:00:00 2001
From: Denis Mikhailov <notxcain@gmail.com>
Date: Tue, 14 Jul 2026 19:33:06 +0200
Subject: [PATCH] feat(annotate): support annotating live localhost design
 previews

Add `plannotator annotate http://localhost:PORT/path`, which renders a live
frontend dev-server page (as an HTML artifact) for annotation instead of
converting it to markdown.

- Per-session reverse proxy forwards to the dev server, proxies its HMR
  websocket, and injects the annotation bridge into HTML responses. Loopback
  only (isLoopbackUrl guard), bound to 127.0.0.1. Bun impl in
  packages/server/preview-proxy.ts; node:http mirror in
  apps/pi-extension/server/previewProxy.ts.
- The editor renders an <iframe src> at the proxy origin (additive optional
  `src` prop on HtmlViewer) so the real ES-module graph loads with no
  null-origin CORS problem; annotation works via the existing postMessage
  bridge. The srcDoc path is unchanged when `src` is absent.
- The live-preview iframe renders like a real browser tab: an opaque white
  canvas with color-scheme:normal, so an unstyled/transparent page shows
  black-on-white instead of bleeding through to the host surface.
- Thread livePreviewUrl through the annotate /api/plan and CLI dispatch across
  all three runtimes (Claude Code, OpenCode, Pi), carrying the target path onto
  the iframe URL.
- Live-preview sessions disable URL sharing, version history, and host-theme
  token injection.
---
 AGENTS.md                                     |   8 +-
 apps/hook/server/index.ts                     |  27 ++-
 apps/opencode-plugin/commands.ts              |  27 ++-
 apps/pi-extension/index.ts                    |  58 ++++-
 apps/pi-extension/plannotator-browser.ts      |   2 +
 apps/pi-extension/server/previewProxy.ts      | 225 ++++++++++++++++++
 apps/pi-extension/server/serverAnnotate.ts    |   7 +
 apps/pi-extension/vendor.sh                   |  12 +
 packages/editor/App.tsx                       |   9 +-
 packages/server/annotate.ts                   |   8 +
 packages/server/package.json                  |   4 +-
 packages/server/preview-proxy.test.ts         |  26 ++
 packages/server/preview-proxy.ts              | 144 +++++++++++
 packages/shared/url-to-markdown.test.ts       |  21 +-
 packages/shared/url-to-markdown.ts            |  24 +-
 .../ui/components/html-viewer/HtmlViewer.tsx  |  36 ++-
 .../html-viewer/livePreviewInjection.test.ts  |  11 +
 .../html-viewer/livePreviewInjection.ts       |  11 +
 packages/ui/package.json                      |   1 +
 19 files changed, 625 insertions(+), 36 deletions(-)
 create mode 100644 apps/pi-extension/server/previewProxy.ts
 create mode 100644 packages/server/preview-proxy.test.ts
 create mode 100644 packages/server/preview-proxy.ts
 create mode 100644 packages/ui/components/html-viewer/livePreviewInjection.test.ts
 create mode 100644 packages/ui/components/html-viewer/livePreviewInjection.ts

diff --git a/AGENTS.md b/AGENTS.md
index 55a117994..e9a7b2f8d 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -254,6 +254,12 @@ Input type detected:
                deliberately excluded — it commonly holds secrets and annotate history
                copies file contents; source-code extensions stay with code review)
   .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://   → fetched via Jina Reader (default) or fetch+Turndown (--no-jina)
   folder/    → file browser opened, files converted on demand
         ↓
@@ -372,7 +378,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 2df24c7cc..28b2a583a 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";
@@ -925,11 +925,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 {
@@ -1047,6 +1069,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 d40a6757d..e512aecd6 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";
@@ -227,12 +228,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 {
@@ -330,6 +351,7 @@ export async function handleAnnotateCommand(
     sourceConverted,
     rawHtml,
     renderHtml: !!rawHtml,
+    livePreviewUrl,
     convertHtml: renderMarkdownFlag,
     sharingEnabled: await getSharingEnabled(),
     shareBaseUrl: getShareBaseUrl(),
@@ -346,6 +368,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 259df4dfd..6f81f4b65 100644
--- a/apps/pi-extension/index.ts
+++ b/apps/pi-extension/index.ts
@@ -551,24 +551,50 @@ 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) {
-				const useJina = resolveUseJina(noJina, loadConfig());
-				ctx.ui.notify(`Fetching: ${filePath}${useJina ? " (via Jina Reader)" : " (via fetch+Turndown)"}...`, "info");
-				try {
-					const { isConvertedSource, urlToMarkdown } = await import("./generated/url-to-markdown.js");
-					const result = await urlToMarkdown(filePath, { useJina });
-					markdown = result.markdown;
-					sourceConverted = isConvertedSource(result.source);
-				} catch (err) {
-					ctx.ui.notify(`Failed to fetch URL: ${err instanceof Error ? err.message : String(err)}`, "error");
-					return;
+				// Lazy-load the URL helper (keeps the heavy Turndown graph off startup,
+				// matching this file's lazy-import discipline).
+				const { isLoopbackUrl } = await import("./generated/url-to-markdown.js");
+				if (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("./server/previewProxy.js");
+					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 {
+					const useJina = resolveUseJina(noJina, loadConfig());
+					ctx.ui.notify(`Fetching: ${filePath}${useJina ? " (via Jina Reader)" : " (via fetch+Turndown)"}...`, "info");
+					try {
+						const { isConvertedSource, urlToMarkdown } = await import("./generated/url-to-markdown.js");
+						const result = await urlToMarkdown(filePath, { useJina });
+						markdown = result.markdown;
+						sourceConverted = isConvertedSource(result.source);
+					} catch (err) {
+						ctx.ui.notify(`Failed to fetch URL: ${err instanceof Error ? err.message : String(err)}`, "error");
+						return;
+					}
+					absolutePath = filePath;
+					sourceInfo = filePath;
 				}
-				absolutePath = filePath;
-				sourceInfo = filePath;
 			} else {
 				// Pick the interpretation of the user input that actually exists:
 				// stripped form first (reference-mode primary), literal as fallback
@@ -644,6 +670,8 @@ export default function plannotator(pi: ExtensionAPI): void {
 					rawHtml,
 					!!rawHtml,
 					renderMarkdownFlag,
+					undefined,
+					livePreviewUrl,
 				);
 				ctx.ui.notify(sessionOpenedMessage("Annotation opened", session.url), "info");
 				void session
@@ -680,8 +708,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 d955bca83..c11a45e7e 100644
--- a/apps/pi-extension/plannotator-browser.ts
+++ b/apps/pi-extension/plannotator-browser.ts
@@ -523,6 +523,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) {
 		throw new Error("Plannotator annotation browser is unavailable in this session.");
@@ -557,6 +558,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 1b0f5503b..b3b8efc29 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 696c5c338..ca28cf0e3 100755
--- a/apps/pi-extension/vendor.sh
+++ b/apps/pi-extension/vendor.sh
@@ -94,3 +94,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 15f693f9c..d68394f30 100644
--- a/packages/editor/App.tsx
+++ b/packages/editor/App.tsx
@@ -397,6 +397,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
@@ -2251,7 +2252,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
@@ -2271,9 +2272,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('');
@@ -4362,6 +4364,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 69655e652..0505f3497 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;
@@ -148,6 +154,7 @@ export async function startAnnotateServer(
     gate = false,
     rawHtml,
     renderHtml = false,
+    livePreviewUrl,
     convertHtml = false,
     agentCwd,
     project,
@@ -390,6 +397,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 a2e3b9462..ff0b83a51 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 07ad8e002..5f693a478 100644
--- a/packages/ui/components/html-viewer/HtmlViewer.tsx
+++ b/packages/ui/components/html-viewer/HtmlViewer.tsx
@@ -69,6 +69,9 @@ export interface HtmlViewerProps {
   onAskAI?: CommentAskAIHandler;
   /** Accessible iframe title. */
   title?: string;
+  /** 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>(
@@ -92,6 +95,7 @@ export const HtmlViewer = forwardRef<ViewerHandle, HtmlViewerProps>(
       onToggleDiff,
       onAskAI,
       title = "HTML Plan Viewer",
+      src,
     },
     ref,
   ) => {
@@ -279,18 +283,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={title}
-          />
+              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={title}
+            />
           </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 22b890569..c52586305 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",