From 9b8673a653365d0bba112a0bd20ea42557c60d27 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                                     |  16 +-
 apps/hook/server/index.ts                     |  27 ++-
 apps/opencode-plugin/commands.ts              |  27 ++-
 apps/pi-extension/index.ts                    |  33 ++-
 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, 614 insertions(+), 30 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 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",