diffing 0.17.0 → 0.18.0

package/dist/{server-CEbp7K-k.mjs → server-CiE24vh-.mjs}

@@ -1,17 +1,17 @@
 import { C as listRepoFiles, D as toSafeRelativePath, E as isSafePath, S as isGitRepo, T as revertHunk, _ as getShowDiff, a as getCommitSeriesSummary, b as getUntrackedFilePathsAsync, d as getMergeStatus, f as getProjectStorageDir, h as getRepoRoot, l as getGitDiffAsync, m as getRepoMetadataAsync, o as getCustomGitDiffAsync, s as getFileContent, u as getHunkHistory, x as gitAddFile, y as getTabSizeForFilesAsync } from "./git-BGj31GX-.mjs";
 import { a as searchFiles, i as searchContent, o as searchSymbols, r as searchAll, s as trackSelection, t as getSearchStatus } from "./search-3R2E5xxr.mjs";
 import { i as loadSettings, s as saveSettings } from "./settings-DkPDB_hS.mjs";
-import { t as formatComments } from "./comment-format-B85NHZnG.mjs";
-import { n as formatPlanReview, r as sectionTitleForLine, t as extractPlanLines } from "./plan-format-BwJh5JSE.mjs";
+import { a as MOCKUP_MAX_SCREEN_BYTES, c as defaultScreenLabel, d as normalizeSubmitScreens, i as sectionTitleForLine, l as isMockupViewport, n as extractPlanLines, o as MOCKUP_SCREEN_ID_RE, r as formatPlanReview, s as commentViewport, t as formatMockupReview, u as normalizeMockupViewport } from "./mockup-format-CM3ivHHX.mjs";
+import { t as formatComments } from "./comment-format-D4mCqr7T.mjs";
 import { g as createServerAuthMiddleware, h as buildSessionTokenSetCookieValue, v as injectSessionTokenIntoHtml } from "./server-lock-CdaUNZyX.mjs";
-import { D as setPrReviewThreadResolved, E as resolvedFromSession, O as submitReview, S as parsePrRef, a as detectCwdRepo, i as deletePrReviewComment, k as updatePrReviewComment, l as fetchExistingCommentsViaGh, p as fetchPrFileContentViaGh, t as buildPrSession, u as fetchExistingReviewsViaGh, w as refreshPrSession } from "./github-CToLsvPu.mjs";
+import { D as setPrReviewThreadResolved, E as resolvedFromSession, O as submitReview, i as deletePrReviewComment, k as updatePrReviewComment, l as fetchExistingCommentsViaGh, p as fetchPrFileContentViaGh, t as buildPrSession, u as fetchExistingReviewsViaGh, w as refreshPrSession } from "./github-CToLsvPu.mjs";
 import { execFileSync } from "node:child_process";
 import { createHash } from "node:crypto";
 import { fileURLToPath } from "node:url";
 import { dirname, extname, join, resolve } from "node:path";
 import { existsSync, mkdirSync, readFileSync, watch } from "node:fs";
 import { parseArgs } from "node:util";
-import { mkdir, readFile, readdir, rename, rm, stat, writeFile } from "node:fs/promises";
+import { mkdir, readFile, readdir, rename, rm, stat, unlink, writeFile } from "node:fs/promises";
 import { homedir } from "node:os";
 import { Hono } from "hono";
 import { streamSSE } from "hono/streaming";
@@ -1446,7 +1446,7 @@ function isReviewCommentSide(value) {
 function planSourceFilePath(storageDir, planId) {
 	return join(storageDir, "plan-sources", `${planId}.md`);
 }
-function newId() {
+function newId$1() {
 	return crypto.randomUUID();
 }
 /**
@@ -1486,7 +1486,7 @@ function markBackfilled(plan) {
 	plan.__backfilledVersions = true;
 }
 /** Shared mutation helpers so both stores behave identically. */
-function applyUpsert(plans, input, now) {
+function applyUpsert$1(plans, input, now) {
 	if (input.id) {
 		const existing = plans.find((p) => p.id === input.id);
 		if (existing) {
@@ -1512,7 +1512,7 @@ function applyUpsert(plans, input, now) {
 		}
 	}
 	const plan = {
-		id: input.id || newId(),
+		id: input.id || newId$1(),
 		title: input.title,
 		body: input.body,
 		source: input.source,
@@ -1539,7 +1539,7 @@ function applyUpsert(plans, input, now) {
 * fields after a non-resubmit edit (PUT). Doesn't add a new entry — that only
 * happens via `upsert` (the resubmit flow).
 */
-function syncCurrentVersion(plan) {
+function syncCurrentVersion$1(plan) {
 	if (!plan.versions || plan.versions.length === 0) plan.versions = [];
 	if (plan.versions.length === 0) {
 		plan.versions.push({
@@ -1638,7 +1638,7 @@ var FilePlanStore = class {
 	}
 	async upsert(input) {
 		const plans = await this.getAll();
-		const plan = applyUpsert(plans, input, Date.now());
+		const plan = applyUpsert$1(plans, input, Date.now());
 		backfillPlan(plan);
 		await this.writeSourceMirror(plan);
 		await this.save(plans);
@@ -1653,7 +1653,7 @@ var FilePlanStore = class {
 		if (fields.source !== void 0) plan.source = fields.source;
 		if (fields.model !== void 0) plan.model = fields.model;
 		plan.updatedAt = Date.now();
-		syncCurrentVersion(plan);
+		syncCurrentVersion$1(plan);
 		backfillPlan(plan);
 		if (fields.body !== void 0) await this.writeSourceMirror(plan);
 		await this.save(plans);
@@ -1744,6 +1744,1029 @@ var FilePlanStore = class {
 	}
 };
 //#endregion
+//#region src/lib/mockups.ts
+function mockupSourceDir(storageDir, mockupId) {
+	return join(storageDir, "mockup-sources", mockupId);
+}
+function newId() {
+	return crypto.randomUUID();
+}
+function snapshotScreens(screens) {
+	return screens.map((s) => ({
+		id: s.id,
+		label: s.label,
+		html: s.html
+	}));
+}
+function backfillMockup(mockup) {
+	const currentVersion = mockup.version ?? 1;
+	const have = Array.isArray(mockup.versions) ? mockup.versions.length : 0;
+	if (!mockup.versions || have === 0 || have < currentVersion) {
+		const createdAt = mockup.updatedAt ?? mockup.createdAt ?? Date.now();
+		const haveEntries = Array.isArray(mockup.versions) ? mockup.versions : [];
+		const next = [];
+		for (let i = 1; i <= currentVersion; i++) {
+			const existing = haveEntries.find((v) => v.version === i);
+			next.push(existing ?? {
+				version: i,
+				title: mockup.title,
+				screens: snapshotScreens(mockup.screens ?? []),
+				source: mockup.source,
+				model: mockup.model,
+				createdAt
+			});
+		}
+		mockup.versions = next.filter((v) => v.version >= 1 && v.version <= currentVersion);
+	}
+	if (!mockup.screens) mockup.screens = [];
+	if (!mockup.comments) mockup.comments = [];
+	for (const c of mockup.comments) {
+		if (typeof c.createdAtMockupVersion !== "number") c.createdAtMockupVersion = mockup.version ?? 1;
+		if (!c.replies) c.replies = [];
+	}
+}
+function applyUpsert(mockups, input, now) {
+	if (input.id) {
+		const existing = mockups.find((m) => m.id === input.id);
+		if (existing) {
+			existing.title = input.title;
+			existing.screens = snapshotScreens(input.screens);
+			if (input.source !== void 0) existing.source = input.source;
+			if (input.model !== void 0) existing.model = input.model;
+			existing.version += 1;
+			existing.updatedAt = now;
+			if (!existing.versions) existing.versions = [];
+			existing.versions.push({
+				version: existing.version,
+				title: existing.title,
+				screens: snapshotScreens(existing.screens),
+				source: existing.source,
+				model: existing.model,
+				createdAt: now
+			});
+			existing.decision = "pending";
+			existing.decisionComment = void 0;
+			existing.decidedAt = void 0;
+			return existing;
+		}
+	}
+	const mockup = {
+		id: input.id || newId(),
+		title: input.title,
+		screens: snapshotScreens(input.screens),
+		source: input.source,
+		model: input.model,
+		createdAt: now,
+		updatedAt: now,
+		version: 1,
+		decision: "pending",
+		comments: [],
+		versions: [{
+			version: 1,
+			title: input.title,
+			screens: snapshotScreens(input.screens),
+			source: input.source,
+			model: input.model,
+			createdAt: now
+		}]
+	};
+	mockups.push(mockup);
+	return mockup;
+}
+function syncCurrentVersion(mockup) {
+	if (!mockup.versions || mockup.versions.length === 0) mockup.versions = [];
+	if (mockup.versions.length === 0) {
+		mockup.versions.push({
+			version: mockup.version,
+			title: mockup.title,
+			screens: snapshotScreens(mockup.screens),
+			source: mockup.source,
+			model: mockup.model,
+			createdAt: mockup.updatedAt
+		});
+		return;
+	}
+	const last = mockup.versions[mockup.versions.length - 1];
+	last.title = mockup.title;
+	last.screens = snapshotScreens(mockup.screens);
+	last.source = mockup.source;
+	last.model = mockup.model;
+}
+function versionMismatch(expected, current) {
+	if (expected === void 0) return void 0;
+	if (expected !== current) return {
+		expectedVersion: expected,
+		currentVersion: current
+	};
+}
+function bumpMockupVersion(mockup, now) {
+	mockup.version += 1;
+	mockup.updatedAt = now;
+	if (!mockup.versions) mockup.versions = [];
+	mockup.versions.push({
+		version: mockup.version,
+		title: mockup.title,
+		screens: snapshotScreens(mockup.screens),
+		source: mockup.source,
+		model: mockup.model,
+		createdAt: now
+	});
+}
+function applyScreenUpsert(mockup, screen, now) {
+	const html = screen.html.replace(/\r\n/g, "\n");
+	const existing = mockup.screens.find((s) => s.id === screen.id);
+	if (existing) {
+		existing.html = html;
+		if (screen.label?.trim()) existing.label = screen.label.trim();
+	} else mockup.screens.push({
+		id: screen.id,
+		label: screen.label?.trim() || defaultScreenLabel(screen.id),
+		html
+	});
+	bumpMockupVersion(mockup, now);
+}
+function applyScreenPatch(screen, patch) {
+	const idx = screen.html.indexOf(patch.expectedText);
+	if (idx === -1) return 0;
+	const count = screen.html.split(patch.expectedText).length - 1;
+	screen.html = screen.html.slice(0, idx) + patch.replacement + screen.html.slice(idx + patch.expectedText.length);
+	return count;
+}
+/** Validate every op against the mockup before applying any (all-or-nothing). */
+function validateThreadBatch(mockup, ops) {
+	const comments = mockup.comments ?? [];
+	for (let i = 0; i < ops.length; i++) {
+		const item = ops[i];
+		const c = comments.find((x) => x.id === item.commentId);
+		if (!c) return `operations[${i}]: comment ${item.commentId} not found`;
+		if ((item.op === "edit" || item.op === "delete") && item.replyId && !(c.replies ?? []).some((r) => r.id === item.replyId)) return `operations[${i}]: reply ${item.replyId} not found on comment ${item.commentId}`;
+	}
+	return null;
+}
+/** Apply ops after validation passed — every lookup is guaranteed to hit. */
+function applyThreadOps(mockup, ops, now) {
+	const results = [];
+	for (const item of ops) {
+		const c = mockup.comments.find((x) => x.id === item.commentId);
+		switch (item.op) {
+			case "reply": {
+				const reply = {
+					id: crypto.randomUUID(),
+					body: item.body,
+					createdAt: now,
+					role: item.role === "agent" ? "agent" : item.role === "user" ? "user" : item.model ? "agent" : "user",
+					model: item.model
+				};
+				if (typeof c.createdAtMockupVersion === "number") reply.createdAtPlanVersion = c.createdAtMockupVersion;
+				if (!c.replies) c.replies = [];
+				c.replies.push(reply);
+				results.push({
+					op: "reply",
+					commentId: item.commentId,
+					replyId: reply.id,
+					ok: true
+				});
+				break;
+			}
+			case "edit":
+				if (item.replyId) {
+					const r = c.replies.find((x) => x.id === item.replyId);
+					r.body = item.body;
+				} else c.body = item.body;
+				results.push({
+					op: "edit",
+					commentId: item.commentId,
+					replyId: item.replyId,
+					ok: true
+				});
+				break;
+			case "delete":
+				if (item.replyId) {
+					const idx = c.replies.findIndex((x) => x.id === item.replyId);
+					c.replies.splice(idx, 1);
+					results.push({
+						op: "delete",
+						commentId: item.commentId,
+						replyId: item.replyId,
+						ok: true
+					});
+				} else {
+					const idx = mockup.comments.findIndex((x) => x.id === item.commentId);
+					mockup.comments.splice(idx, 1);
+					results.push({
+						op: "delete",
+						commentId: item.commentId,
+						ok: true
+					});
+				}
+				break;
+			case "resolve":
+				c.status = "resolved";
+				results.push({
+					op: "resolve",
+					commentId: item.commentId,
+					ok: true
+				});
+				break;
+			case "unresolve":
+				c.status = "open";
+				results.push({
+					op: "unresolve",
+					commentId: item.commentId,
+					ok: true
+				});
+				break;
+		}
+	}
+	return results;
+}
+/**
+* Shared HTTP/CLI/MCP shape for the atomic thread batch. Validates every op's
+* shape before any store mutation; errors carry the offending op index.
+*/
+function normalizeThreadOperations(raw) {
+	if (!Array.isArray(raw) || raw.length === 0) return {
+		ok: false,
+		error: "operations[] is required"
+	};
+	const ops = [];
+	for (let i = 0; i < raw.length; i++) {
+		const item = raw[i];
+		if (!item || typeof item !== "object") return {
+			ok: false,
+			error: `operations[${i}] must be an object`,
+			index: i
+		};
+		const op = item.op;
+		const commentId = typeof item.commentId === "string" ? item.commentId : "";
+		if (!commentId) return {
+			ok: false,
+			error: `operations[${i}].commentId is required`,
+			index: i
+		};
+		switch (op) {
+			case "reply": {
+				const body = typeof item.body === "string" ? item.body : "";
+				if (!body.trim()) return {
+					ok: false,
+					error: `operations[${i}].body is required`,
+					index: i
+				};
+				ops.push({
+					op: "reply",
+					commentId,
+					body,
+					role: typeof item.role === "string" ? item.role : void 0,
+					model: typeof item.model === "string" ? item.model : void 0
+				});
+				break;
+			}
+			case "edit": {
+				const replyId = typeof item.replyId === "string" ? item.replyId : "";
+				const body = typeof item.body === "string" ? item.body : "";
+				if (!body.trim()) return {
+					ok: false,
+					error: `operations[${i}].body is required`,
+					index: i
+				};
+				ops.push({
+					op: "edit",
+					commentId,
+					replyId: replyId || void 0,
+					body
+				});
+				break;
+			}
+			case "delete": {
+				const replyId = typeof item.replyId === "string" ? item.replyId : void 0;
+				ops.push({
+					op: "delete",
+					commentId,
+					replyId
+				});
+				break;
+			}
+			case "resolve":
+			case "unresolve":
+				ops.push({
+					op,
+					commentId
+				});
+				break;
+			default: return {
+				ok: false,
+				error: `operations[${i}].op must be reply|edit|delete|resolve|unresolve`,
+				index: i
+			};
+		}
+	}
+	return {
+		ok: true,
+		ops
+	};
+}
+var FileMockupStore = class {
+	dirPath;
+	filePath;
+	constructor(storageDir) {
+		this.dirPath = storageDir ?? getProjectStorageDir();
+		this.filePath = join(this.dirPath, "mockups.json");
+	}
+	async getAll() {
+		try {
+			const data = await readFile(this.filePath, "utf-8");
+			const mockups = JSON.parse(data);
+			let anyHealed = false;
+			for (const m of mockups) {
+				backfillMockup(m);
+				if (!m.sourcePath) {
+					m.sourcePath = mockupSourceDir(this.dirPath, m.id);
+					anyHealed = true;
+				}
+			}
+			if (anyHealed) try {
+				await this.save(mockups);
+			} catch {}
+			return mockups;
+		} catch {
+			return [];
+		}
+	}
+	async get(id) {
+		return (await this.getAll()).find((m) => m.id === id) ?? null;
+	}
+	async getVersion(id, version) {
+		const mockup = await this.get(id);
+		if (!mockup) return null;
+		return mockup.versions.find((v) => v.version === version) ?? null;
+	}
+	async save(mockups) {
+		try {
+			await mkdir(this.dirPath, { recursive: true });
+			try {
+				const repoRoot = getRepoRoot();
+				await writeFile(join(this.dirPath, "repo_path.txt"), repoRoot, "utf-8");
+			} catch {}
+			await writeFile(this.filePath, JSON.stringify(mockups, null, 2), "utf-8");
+		} catch (err) {
+			console.error("Failed to save mockups to file:", err);
+		}
+	}
+	async writeSourceMirror(mockup) {
+		try {
+			const dir = mockupSourceDir(this.dirPath, mockup.id);
+			await mkdir(dir, { recursive: true });
+			for (const screen of mockup.screens) await writeFile(join(dir, `${screen.id}.html`), screen.html, "utf-8");
+			mockup.sourcePath = dir;
+		} catch (err) {
+			console.error("Failed to write mockup source mirror:", err);
+		}
+	}
+	async upsert(input) {
+		const mockups = await this.getAll();
+		const mockup = applyUpsert(mockups, input, Date.now());
+		backfillMockup(mockup);
+		await this.writeSourceMirror(mockup);
+		await this.save(mockups);
+		return mockup;
+	}
+	async update(id, fields) {
+		const mockups = await this.getAll();
+		const mockup = mockups.find((m) => m.id === id);
+		if (!mockup) return null;
+		if (fields.title !== void 0) mockup.title = fields.title;
+		if (fields.screens !== void 0) mockup.screens = snapshotScreens(fields.screens);
+		if (fields.source !== void 0) mockup.source = fields.source;
+		if (fields.model !== void 0) mockup.model = fields.model;
+		mockup.updatedAt = Date.now();
+		syncCurrentVersion(mockup);
+		backfillMockup(mockup);
+		if (fields.screens !== void 0) await this.writeSourceMirror(mockup);
+		await this.save(mockups);
+		return mockup;
+	}
+	async remove(id) {
+		const mockups = await this.getAll();
+		const idx = mockups.findIndex((m) => m.id === id);
+		if (idx === -1) return false;
+		mockups.splice(idx, 1);
+		await this.save(mockups);
+		try {
+			await rm(mockupSourceDir(this.dirPath, id), {
+				recursive: true,
+				force: true
+			});
+		} catch {}
+		return true;
+	}
+	async setDecision(id, decision, decisionComment) {
+		const mockups = await this.getAll();
+		const mockup = mockups.find((m) => m.id === id);
+		if (!mockup) return null;
+		mockup.decision = decision;
+		mockup.decisionComment = decisionComment?.trim() || void 0;
+		mockup.decidedAt = Date.now();
+		mockup.updatedAt = mockup.decidedAt;
+		await this.save(mockups);
+		return mockup;
+	}
+	async mutate(mockupId, fn) {
+		const mockups = await this.getAll();
+		const mockup = mockups.find((m) => m.id === mockupId);
+		if (!mockup) return null;
+		if (!mockup.comments) mockup.comments = [];
+		if (!fn(mockup)) return null;
+		backfillMockup(mockup);
+		await this.save(mockups);
+		return mockup;
+	}
+	async addComment(mockupId, comment) {
+		return this.mutate(mockupId, (mockup) => {
+			if (typeof comment.createdAtMockupVersion !== "number") comment.createdAtMockupVersion = mockup.version ?? 1;
+			mockup.comments.push(comment);
+			return true;
+		});
+	}
+	async updateComment(mockupId, commentId, fields) {
+		return this.mutate(mockupId, (mockup) => {
+			const c = mockup.comments.find((x) => x.id === commentId);
+			if (!c) return false;
+			if (fields.body !== void 0) c.body = fields.body;
+			if (fields.status !== void 0) c.status = fields.status;
+			return true;
+		});
+	}
+	async removeComment(mockupId, commentId) {
+		return this.mutate(mockupId, (mockup) => {
+			const idx = mockup.comments.findIndex((x) => x.id === commentId);
+			if (idx === -1) return false;
+			mockup.comments.splice(idx, 1);
+			return true;
+		});
+	}
+	async addReply(mockupId, commentId, reply) {
+		return this.mutate(mockupId, (mockup) => {
+			const c = mockup.comments.find((x) => x.id === commentId);
+			if (!c) return false;
+			if (typeof c.createdAtMockupVersion === "number" && typeof reply.createdAtPlanVersion !== "number") reply.createdAtPlanVersion = c.createdAtMockupVersion;
+			if (!c.replies) c.replies = [];
+			c.replies.push(reply);
+			return true;
+		});
+	}
+	async removeReply(mockupId, commentId, replyId) {
+		return this.mutate(mockupId, (mockup) => {
+			const c = mockup.comments.find((x) => x.id === commentId);
+			if (!c) return false;
+			const idx = c.replies.findIndex((r) => r.id === replyId);
+			if (idx === -1) return false;
+			c.replies.splice(idx, 1);
+			return true;
+		});
+	}
+	async updateReply(mockupId, commentId, replyId, body) {
+		return this.mutate(mockupId, (mockup) => {
+			const c = mockup.comments.find((x) => x.id === commentId);
+			if (!c) return false;
+			const reply = c.replies.find((r) => r.id === replyId);
+			if (!reply) return false;
+			reply.body = body;
+			return true;
+		});
+	}
+	async upsertScreen(id, screen, opts) {
+		const mockups = await this.getAll();
+		const mockup = mockups.find((m) => m.id === id);
+		if (!mockup) return {
+			mockup: null,
+			error: "Mockup not found"
+		};
+		const vm = versionMismatch(opts?.expectedVersion, mockup.version);
+		if (vm) return {
+			mockup: null,
+			versionMismatch: vm
+		};
+		applyScreenUpsert(mockup, screen, Date.now());
+		await this.writeSourceMirror(mockup);
+		await this.save(mockups);
+		return { mockup };
+	}
+	async removeScreen(id, screenId, opts) {
+		const mockups = await this.getAll();
+		const mockup = mockups.find((m) => m.id === id);
+		if (!mockup) return {
+			mockup: null,
+			error: "Mockup not found"
+		};
+		const vm = versionMismatch(opts?.expectedVersion, mockup.version);
+		if (vm) return {
+			mockup: null,
+			versionMismatch: vm
+		};
+		const idx = mockup.screens.findIndex((s) => s.id === screenId);
+		if (idx === -1) return {
+			mockup: null,
+			error: `Screen ${screenId} not found`
+		};
+		if (mockup.screens.length <= 1) return {
+			mockup: null,
+			error: "Cannot remove the last screen"
+		};
+		mockup.screens.splice(idx, 1);
+		bumpMockupVersion(mockup, Date.now());
+		try {
+			await unlink(join(mockupSourceDir(this.dirPath, id), `${screenId}.html`));
+		} catch {}
+		await this.save(mockups);
+		return { mockup };
+	}
+	async patchScreen(id, screenId, patch, opts) {
+		const mockups = await this.getAll();
+		const mockup = mockups.find((m) => m.id === id);
+		if (!mockup) return {
+			mockup: null,
+			error: "Mockup not found"
+		};
+		const vm = versionMismatch(opts?.expectedVersion, mockup.version);
+		if (vm) return {
+			mockup: null,
+			versionMismatch: vm
+		};
+		const screen = mockup.screens.find((s) => s.id === screenId);
+		if (!screen) return {
+			mockup: null,
+			error: `Screen ${screenId} not found`
+		};
+		if (!patch.expectedText) return {
+			mockup: null,
+			error: "expectedText is required"
+		};
+		if (patch.replacement === void 0) return {
+			mockup: null,
+			error: "replacement is required"
+		};
+		const occurrences = applyScreenPatch(screen, patch);
+		if (occurrences === 0) return {
+			mockup: null,
+			error: "Exact text not found"
+		};
+		bumpMockupVersion(mockup, Date.now());
+		await this.writeSourceMirror(mockup);
+		await this.save(mockups);
+		return {
+			mockup,
+			occurrences
+		};
+	}
+	async applyThreadBatch(mockupId, ops) {
+		const mockups = await this.getAll();
+		const mockup = mockups.find((m) => m.id === mockupId);
+		if (!mockup) return {
+			mockup: null,
+			error: "Mockup not found",
+			results: []
+		};
+		backfillMockup(mockup);
+		const error = validateThreadBatch(mockup, ops);
+		if (error) return {
+			mockup: null,
+			error,
+			results: []
+		};
+		const results = applyThreadOps(mockup, ops, Date.now());
+		await this.save(mockups);
+		return {
+			mockup,
+			results
+		};
+	}
+};
+/** Shared by HTTP/CLI so submit shapes stay one path. */
+function screensFromSubmitBody(body) {
+	return normalizeSubmitScreens({
+		html: typeof body.html === "string" ? body.html : void 0,
+		screens: Array.isArray(body.screens) ? body.screens.map((item) => {
+			const rec = item;
+			return {
+				id: typeof rec.id === "string" ? rec.id : void 0,
+				label: typeof rec.label === "string" ? rec.label : void 0,
+				html: typeof rec.html === "string" ? rec.html : ""
+			};
+		}) : void 0
+	});
+}
+//#endregion
+//#region src/lib/mockup-review-session.ts
+var MockupReviewSession = class {
+	round = 0;
+	lastDecidedAt = null;
+	lastPayload = null;
+	waiters = /* @__PURE__ */ new Set();
+	onStatusChange;
+	constructor(onStatusChange) {
+		this.onStatusChange = onStatusChange;
+	}
+	await(opts) {
+		const { sinceRound, timeoutMs, signal } = opts;
+		if (sinceRound !== void 0 && sinceRound < this.round && this.lastPayload) return Promise.resolve({
+			status: "released",
+			payload: this.lastPayload
+		});
+		if (signal?.aborted) return Promise.resolve({
+			status: "keep-waiting",
+			round: this.round
+		});
+		return new Promise((resolve) => {
+			const waiter = {
+				resolve,
+				timer: setTimeout(() => {
+					this.removeWaiter(waiter);
+					resolve({
+						status: "keep-waiting",
+						round: this.round
+					});
+				}, timeoutMs),
+				cleanup: () => {}
+			};
+			if (signal) {
+				const onAbort = () => {
+					this.removeWaiter(waiter);
+					resolve({
+						status: "keep-waiting",
+						round: this.round
+					});
+				};
+				signal.addEventListener("abort", onAbort, { once: true });
+				waiter.cleanup = () => signal.removeEventListener("abort", onAbort);
+			}
+			this.waiters.add(waiter);
+			this.emitStatus();
+		});
+	}
+	decide(input) {
+		this.round += 1;
+		this.lastDecidedAt = Date.now();
+		const payload = {
+			round: this.round,
+			sentAt: this.lastDecidedAt,
+			mockupId: input.mockup.id,
+			decision: input.decision,
+			decisionComment: input.decisionComment,
+			reviewXml: input.reviewXml,
+			openCommentCount: input.openCommentCount,
+			mockup: input.mockup,
+			mode: input.mode ?? "standard"
+		};
+		this.lastPayload = payload;
+		for (const waiter of [...this.waiters]) {
+			this.removeWaiter(waiter);
+			waiter.resolve({
+				status: "released",
+				payload
+			});
+		}
+		this.emitStatus();
+		return payload;
+	}
+	snapshot() {
+		return {
+			round: this.round,
+			waiters: this.waiters.size,
+			lastDecidedAt: this.lastDecidedAt
+		};
+	}
+	removeWaiter(waiter) {
+		clearTimeout(waiter.timer);
+		waiter.cleanup();
+		this.waiters.delete(waiter);
+		this.emitStatus();
+	}
+	emitStatus() {
+		this.onStatusChange?.(this.snapshot());
+	}
+};
+//#endregion
+//#region src/lib/mockup-document.ts
+/**
+* Inject a selection probe into stored mockup HTML.
+* The stored source is never mutated — only the served document.
+*/
+const MOCKUP_PROBE_FLAG = "data-diffing-probe";
+/**
+* Build the probe script for one served document. The script is parameterized
+* with the document nonce + viewport so every posted event carries them.
+*/
+function buildMockupProbeScript(opts = {}) {
+	const nonce = opts.nonce ?? "";
+	const viewport = opts.viewport ?? "desktop";
+	return `(() => {
+  if (window.__diffingMockupProbe) return;
+  window.__diffingMockupProbe = true;
+  const NONCE = ${JSON.stringify(nonce)};
+  const VIEWPORT = ${JSON.stringify(viewport)};
+  const BLOCK = 'H1,H2,H3,H4,H5,H6,BUTTON,A,INPUT,TEXTAREA,SELECT,IMG,LI,P,SECTION,ARTICLE,HEADER,TR,TD,LABEL,NAV,ASIDE,FOOTER,FIGURE';
+  let tool = 'block';
+  let drag = null;
+  let shield = null;
+
+  function post(event, extra) {
+    try {
+      parent.postMessage(Object.assign({ type: 'diffing-mockup', event: event, nonce: NONCE, viewport: VIEWPORT }, extra || {}), '*');
+    } catch (_) {}
+  }
+
+  function pctRect(el) {
+    const r = el.getBoundingClientRect();
+    const w = Math.max(document.documentElement.clientWidth, 1);
+    const h = Math.max(document.documentElement.clientHeight, 1);
+    return {
+      x: (r.left / w) * 100,
+      y: (r.top / h) * 100,
+      w: (r.width / w) * 100,
+      h: (r.height / h) * 100,
+    };
+  }
+
+  function pointPct(ev) {
+    const w = Math.max(document.documentElement.clientWidth, 1);
+    const h = Math.max(document.documentElement.clientHeight, 1);
+    return { x: (ev.clientX / w) * 100, y: (ev.clientY / h) * 100 };
+  }
+
+  function cssEscape(s) {
+    if (window.CSS && CSS.escape) return CSS.escape(s);
+    return String(s).replace(/[^a-zA-Z0-9_-]/g, '\\\\$&');
+  }
+
+  function shortSelector(el) {
+    if (!el || el === document.documentElement || el === document.body) return 'body';
+    const parts = [];
+    let node = el;
+    for (let i = 0; i < 6 && node && node !== document.body; i++) {
+      if (node.getAttribute && node.getAttribute('data-diffing')) {
+        parts.unshift('[data-diffing="' + node.getAttribute('data-diffing') + '"]');
+        break;
+      }
+      if (node.id) { parts.unshift('#' + cssEscape(node.id)); break; }
+      const tag = node.tagName.toLowerCase();
+      const parent = node.parentElement;
+      if (!parent) { parts.unshift(tag); break; }
+      const cls = (node.className && typeof node.className === 'string')
+        ? node.className.trim().split(/\\s+/).filter(Boolean)[0]
+        : '';
+      const same = Array.from(parent.children).filter((c) => c.tagName === node.tagName);
+      const idx = same.indexOf(node) + 1;
+      const bit = cls ? tag + '.' + cssEscape(cls) : (same.length > 1 ? tag + ':nth-of-type(' + idx + ')' : tag);
+      parts.unshift(bit);
+      node = parent;
+    }
+    return parts.join('>');
+  }
+
+  // Stable selector for a block measured from its nearest named section root:
+  // '[data-diffing="hero"] > div.row > button.pay:nth-of-type(2)'. Nodes above
+  // the section never appear, so edits elsewhere in the document cannot change it.
+  function sectionRelativeSelector(el, section) {
+    const name = section.getAttribute('data-diffing');
+    const root = '[data-diffing="' + name + '"]';
+    if (!el || el === section) return root;
+    const parts = [];
+    let node = el;
+    while (node && node !== section) {
+      const tag = node.tagName.toLowerCase();
+      const parent = node.parentElement;
+      let bit = tag;
+      if (node.id) {
+        bit += '#' + cssEscape(node.id);
+      } else {
+        const cls = (node.className && typeof node.className === 'string')
+          ? node.className.trim().split(/\\s+/).filter(Boolean)[0]
+          : '';
+        if (cls) bit += '.' + cssEscape(cls);
+        if (parent) {
+          const same = Array.from(parent.children).filter((c) => c.tagName === node.tagName);
+          if (same.length > 1) bit += ':nth-of-type(' + (same.indexOf(node) + 1) + ')';
+        }
+      }
+      parts.unshift(bit);
+      node = parent;
+    }
+    return root + ' > ' + parts.join(' > ');
+  }
+
+  // Stable digest of a DOM path. Purely structural — class renames on the
+  // block itself change it, but viewport/layout shifts do not.
+  function fingerprintOf(path) {
+    let h = 5381;
+    for (let i = 0; i < path.length; i++) {
+      h = ((h << 5) + h + path.charCodeAt(i)) | 0;
+    }
+    return 'fp:' + (h >>> 0).toString(16);
+  }
+
+  function clipHtml(el, max) {
+    if (!el || !el.cloneNode) return undefined;
+    const clone = el.cloneNode(true);
+    if (clone.querySelectorAll) {
+      clone.querySelectorAll('script').forEach(function (s) { s.remove(); });
+    }
+    let html = clone.outerHTML || '';
+    if (html.length > max) html = html.slice(0, max) + '\u2026';
+    return html;
+  }
+
+  function isBlock(el) {
+    if (!el || el === document.body || el === document.documentElement) return false;
+    if (el.hasAttribute('data-diffing')) return true;
+    if (el.id || (el.className && String(el.className).trim())) return true;
+    if (el.getAttribute('role')) return true;
+    return BLOCK.split(',').includes(el.tagName);
+  }
+
+  function deepestBlock(start) {
+    let el = start;
+    while (el && el !== document.body && !isBlock(el)) el = el.parentElement;
+    return el && el !== document.body ? el : start;
+  }
+
+  function payloadFor(el, ev, kindOverride) {
+    // Nearest named [data-diffing] ancestor only — sections never nest deeper.
+    const section = el && el.closest ? el.closest('[data-diffing]') : null;
+    const kind = kindOverride || (tool === 'pin' ? 'point' : tool === 'section' && section ? 'section' : 'block');
+    const hitEl = deepestBlock(el);
+    const outlineEl = kind === 'section' && section ? section : hitEl;
+    const pt = ev ? pointPct(ev) : { x: 0, y: 0 };
+    let sectionX, sectionY;
+    if (section && ev) {
+      const sr = section.getBoundingClientRect();
+      if (sr.width > 0 && sr.height > 0) {
+        sectionX = Math.round(((ev.clientX - sr.left) / sr.width) * 1000) / 10;
+        sectionY = Math.round(((ev.clientY - sr.top) / sr.height) * 1000) / 10;
+      }
+    }
+    const base = {
+      kind: kind,
+      target: section ? section.getAttribute('data-diffing') : undefined,
+      x: Math.round(pt.x * 10) / 10,
+      y: Math.round(pt.y * 10) / 10,
+      sectionX: sectionX,
+      sectionY: sectionY,
+      rect: outlineEl ? pctRect(outlineEl) : undefined,
+    };
+    if (kind === 'section' && section) {
+      const sel = '[data-diffing="' + section.getAttribute('data-diffing') + '"]';
+      return Object.assign(base, {
+        selector: sel,
+        fingerprint: fingerprintOf(sel),
+        html: clipHtml(section, 2000),
+        contextHtml: clipHtml(section, 4000),
+        snapshot: String(section.innerText || '').trim().slice(0, 240),
+      });
+    }
+    if (kind === 'point') {
+      // Pin: coordinate + nearby context. The coordinates are the locator;
+      // no deep selector/fingerprint is recorded.
+      return Object.assign(base, {
+        html: clipHtml(hitEl, 2000),
+        contextHtml: clipHtml(section || (hitEl && hitEl.parentElement) || hitEl, 4000),
+        snapshot: hitEl ? String(hitEl.innerText || '').trim().slice(0, 240) : undefined,
+      });
+    }
+    // block
+    if (section) {
+      const sel = sectionRelativeSelector(hitEl, section);
+      return Object.assign(base, {
+        selector: sel,
+        fingerprint: fingerprintOf(sel),
+        html: clipHtml(hitEl, 2000),
+        contextHtml: clipHtml(section, 4000),
+        snapshot: hitEl ? String(hitEl.innerText || '').trim().slice(0, 240) : undefined,
+      });
+    }
+    const sel = hitEl ? shortSelector(hitEl) : undefined;
+    return Object.assign(base, {
+      selector: sel,
+      fingerprint: sel ? fingerprintOf(sel) : undefined,
+      html: clipHtml(hitEl, 2000),
+      contextHtml: clipHtml(hitEl && hitEl.parentElement, 4000),
+      snapshot: hitEl ? String(hitEl.innerText || '').trim().slice(0, 240) : undefined,
+    });
+  }
+
+  function sections() {
+    return Array.from(document.querySelectorAll('[data-diffing]')).map((el) => ({
+      name: el.getAttribute('data-diffing'),
+      rect: pctRect(el),
+    }));
+  }
+
+  window.addEventListener('message', (ev) => {
+    const d = ev.data;
+    if (!d || d.type !== 'diffing-mockup') return;
+    if (d.event === 'set-tool' && d.tool) tool = d.tool;
+  });
+
+  function targetAt(ev) {
+    if (!shield) return document.body;
+    shield.style.pointerEvents = 'none';
+    try {
+      return document.elementFromPoint(ev.clientX, ev.clientY) || document.body;
+    } finally {
+      shield.style.pointerEvents = 'auto';
+    }
+  }
+
+  function installShield() {
+    if (shield || !document.body) return;
+    const stabilityStyle = document.createElement('style');
+    stabilityStyle.setAttribute('data-diffing-stability', '1');
+    stabilityStyle.textContent = 'html { scrollbar-gutter: stable; }';
+    (document.head || document.documentElement).appendChild(stabilityStyle);
+
+    shield = document.createElement('div');
+    shield.setAttribute('data-diffing-inspection-shield', '1');
+    shield.setAttribute('aria-hidden', 'true');
+    shield.style.cssText = 'position:fixed;inset:0;background:transparent;z-index:2147483647;pointer-events:auto;cursor:crosshair;';
+    document.body.appendChild(shield);
+
+    shield.addEventListener('mousemove', (ev) => {
+      const target = targetAt(ev);
+      if (tool === 'pin') {
+        post('hover', Object.assign(payloadFor(target, ev, 'point'), { kind: 'point' }));
+        return;
+      }
+      if (tool === 'section') {
+        const section = target && target.closest ? target.closest('[data-diffing]') : null;
+        if (!section) {
+          post('hover-miss');
+          return;
+        }
+        post('hover', payloadFor(section, ev, 'section'));
+        return;
+      }
+      post('hover', payloadFor(target, ev));
+    }, true);
+
+    shield.addEventListener('mousedown', (ev) => {
+      if (ev.button !== 0) return;
+      drag = { x: ev.clientX, y: ev.clientY, target: targetAt(ev) };
+      ev.preventDefault();
+    }, true);
+
+    shield.addEventListener('mouseup', (ev) => {
+      if (ev.button !== 0 || !drag) return;
+      const target = targetAt(ev);
+      const dx = ev.clientX - drag.x;
+      const dy = ev.clientY - drag.y;
+      const dist = Math.hypot(dx, dy);
+      drag = null;
+      if (tool === 'pin') {
+        post('click', payloadFor(target, ev, 'point'));
+        return;
+      }
+      if (tool === 'section') {
+        const section = target && target.closest ? target.closest('[data-diffing]') : null;
+        if (!section) {
+          post('section-miss');
+          return;
+        }
+        post(dist >= 8 ? 'dragend' : 'click', payloadFor(section, ev, 'section'));
+        return;
+      }
+      post(dist >= 8 ? 'dragend' : 'click', payloadFor(target, ev));
+    }, true);
+
+    shield.addEventListener('click', (ev) => {
+      ev.preventDefault();
+      ev.stopPropagation();
+    }, true);
+    post('ready', { sections: sections() });
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', installShield, { once: true });
+  } else {
+    installShield();
+  }
+})();`;
+}
+buildMockupProbeScript();
+function injectMockupProbe(html, opts = {}) {
+	const script = `<script ${MOCKUP_PROBE_FLAG}="1">${buildMockupProbeScript(opts)}<\/script>`;
+	const lower = html.toLowerCase();
+	const headIdx = lower.indexOf("<head");
+	if (headIdx !== -1) {
+		const close = html.indexOf(">", headIdx);
+		if (close !== -1) return html.slice(0, close + 1) + script + html.slice(close + 1);
+	}
+	const htmlIdx = lower.indexOf("<html");
+	if (htmlIdx !== -1) {
+		const close = html.indexOf(">", htmlIdx);
+		if (close !== -1) return html.slice(0, close + 1) + script + html.slice(close + 1);
+	}
+	return script + html;
+}
+//#endregion
 //#region src/lib/state.ts
 var FileUiStateStore = class {
 	dirPath;
@@ -3199,17 +4222,57 @@ function collectPrAvatarUrls(session) {
 function isCustomMode(opts) {
 	return opts.revisions.length > 0 || opts.pathspecs.length > 0 || opts.showMode;
 }
+/**
+* Compact comment serializer for bounded inspect views. `context` controls how
+* much anchor data is included: none → metadata only; anchor → locator fields
+* (target/selector/fingerprint/coords/html/snapshot); source → + contextHtml.
+*/
+function serializeMockupCommentSummary(comment, context, opts = {}) {
+	const out = {
+		id: comment.id,
+		screenId: comment.screenId,
+		viewport: commentViewport(comment),
+		kind: comment.kind,
+		status: comment.status,
+		createdAt: comment.createdAt,
+		createdAtMockupVersion: comment.createdAtMockupVersion
+	};
+	out.body = opts.truncateBody && comment.body.length > opts.truncateBody ? comment.body.slice(0, opts.truncateBody) + "…" : comment.body;
+	if (comment.severity && comment.severity !== "none") out.severity = comment.severity;
+	if (comment.threadKind) out.threadKind = comment.threadKind;
+	if (context === "none") return out;
+	if (comment.target) out.target = comment.target;
+	if (comment.selector) out.selector = comment.selector;
+	if (comment.fingerprint) out.fingerprint = comment.fingerprint;
+	if (comment.x !== void 0) out.x = comment.x;
+	if (comment.y !== void 0) out.y = comment.y;
+	if (comment.sectionX !== void 0) out.sectionX = comment.sectionX;
+	if (comment.sectionY !== void 0) out.sectionY = comment.sectionY;
+	if (comment.html) out.html = comment.html;
+	if (comment.snapshot) out.snapshot = comment.snapshot;
+	out.replies = (comment.replies ?? []).map((r) => ({
+		id: r.id,
+		body: r.body,
+		createdAt: r.createdAt,
+		role: r.role,
+		model: r.model
+	}));
+	if (context === "anchor") return out;
+	if (comment.contextHtml) out.contextHtml = comment.contextHtml;
+	return out;
+}
 function createApp(clientDir, diffOptsInput = DEFAULTS, commentStore, planStore, prSessionStore, prMode = false, security = {
 	bindHost: "127.0.0.1",
 	authToken: null,
 	insecureNoAuth: true
-}) {
+}, mockupStore) {
 	const app = new Hono();
 	app.use("*", createServerAuthMiddleware(security));
 	let diffOpts = { ...diffOptsInput };
 	const customMode = isCustomMode(diffOpts);
 	const store = commentStore ?? new FileCommentStore();
 	const plans = planStore ?? new FilePlanStore();
+	const mockups = mockupStore ?? new FileMockupStore();
 	const prStore = prSessionStore ?? new FilePrSessionStore();
 	const agentDiffCache = new AgentDiffIndexCache();
 	const uiStateStore = new FileUiStateStore();
@@ -3233,17 +4296,37 @@ function createApp(clientDir, diffOptsInput = DEFAULTS, commentStore, planStore,
 		agents: agentsSnapshot()
 	})));
 	const planReviewSession = new PlanReviewSession((snapshot) => broadcast("plan-review-status", JSON.stringify(snapshot)));
+	const mockupReviewSession = new MockupReviewSession((snapshot) => broadcast("mockup-review-status", JSON.stringify(snapshot)));
+	const NONCE_TTL_MS = 3600 * 1e3;
+	const mockupNonces = /* @__PURE__ */ new Map();
+	const registerMockupNonce = (nonce, entry) => {
+		const now = Date.now();
+		if (mockupNonces.size > 500) {
+			for (const [key, value] of mockupNonces) if (value.expiresAt < now) mockupNonces.delete(key);
+		}
+		mockupNonces.set(nonce, {
+			...entry,
+			expiresAt: now + NONCE_TTL_MS
+		});
+	};
+	const validateMockupNonce = (nonce, mockupId, screenId) => {
+		const entry = mockupNonces.get(nonce);
+		if (!entry || entry.expiresAt < Date.now()) return "Stale mockup document (nonce expired or unknown) — reload the screen and retry.";
+		if (entry.mockupId !== mockupId || entry.screenId !== screenId) return "Mockup nonce does not match this mockup/screen — reload the screen and retry.";
+		return null;
+	};
 	let repoRoot;
 	try {
 		repoRoot = getRepoRoot();
 	} catch {
 		repoRoot = process.cwd();
 	}
-	if (!commentStore && !planStore) try {
+	if (!commentStore && !planStore && !mockupStore) try {
 		const storageDir = getProjectStorageDir();
 		mkdirSync(storageDir, { recursive: true });
 		let commentsDebounce = null;
 		let plansDebounce = null;
+		let mockupsDebounce = null;
 		let prSessionDebounce = null;
 		watch(storageDir, (_eventType, filename) => {
 			if (!filename) return;
@@ -3253,6 +4336,9 @@ function createApp(clientDir, diffOptsInput = DEFAULTS, commentStore, planStore,
 			} else if (filename.startsWith("plans.json")) {
 				if (plansDebounce) clearTimeout(plansDebounce);
 				plansDebounce = setTimeout(() => broadcast("plans", Date.now().toString()), 120);
+			} else if (filename.startsWith("mockups.json")) {
+				if (mockupsDebounce) clearTimeout(mockupsDebounce);
+				mockupsDebounce = setTimeout(() => broadcast("mockups", Date.now().toString()), 120);
 			} else if (filename.startsWith("pr-session.json")) {
 				if (prSessionDebounce) clearTimeout(prSessionDebounce);
 				prSessionDebounce = setTimeout(() => broadcast("pr-session", Date.now().toString()), 120);
@@ -3263,7 +4349,7 @@ function createApp(clientDir, diffOptsInput = DEFAULTS, commentStore, planStore,
 	}
 	let debounceTimeout = null;
 	try {
-		watch(repoRoot, { recursive: true }, (eventType, filename) => {
+		watch(repoRoot, { recursive: true }, (_eventType, filename) => {
 			if (!filename) return;
 			const parts = filename.split(/[/\\]/);
 			const isGit = parts.includes(".git");
@@ -4295,7 +5381,6 @@ function createApp(clientDir, diffOptsInput = DEFAULTS, commentStore, planStore,
 		const ref = typeof body?.ref === "string" ? body.ref : "";
 		if (!ref.trim()) return c.json({ error: "ref is required" }, 400);
 		try {
-			parsePrRef(ref, await detectCwdRepo() ?? void 0);
 			const session = await buildPrSession(ref);
 			await prStore.set(session);
 			return c.json({
@@ -4477,7 +5562,7 @@ function createApp(clientDir, diffOptsInput = DEFAULTS, commentStore, planStore,
 				submittedAt: Date.now(),
 				submittedReviewId: result.reviewId,
 				submittedReviewUrl: result.reviewUrl,
-				authSource: result.authSource
+				authSource: result.authSource === "none" ? void 0 : result.authSource
 			};
 			await prStore.set(next);
 		}
@@ -4763,6 +5848,472 @@ function createApp(clientDir, diffOptsInput = DEFAULTS, commentStore, planStore,
 	app.get("/api/plan-review/status", (c) => {
 		return c.json(planReviewSession.snapshot());
 	});
+	const summarizeMockup = (mockup, includeComments = false) => ({
+		id: mockup.id,
+		title: mockup.title,
+		screens: mockup.screens.map(({ id, label }) => ({
+			id,
+			label
+		})),
+		source: mockup.source,
+		model: mockup.model,
+		createdAt: mockup.createdAt,
+		updatedAt: mockup.updatedAt,
+		version: mockup.version,
+		decision: mockup.decision,
+		decidedAt: mockup.decidedAt,
+		versionCount: mockup.versions.length,
+		commentCounts: {
+			total: mockup.comments.length,
+			open: mockup.comments.filter((comment) => comment.status === "open").length,
+			resolved: mockup.comments.filter((comment) => comment.status === "resolved").length
+		},
+		...includeComments ? { comments: mockup.comments } : {}
+	});
+	app.get("/api/mockups", async (c) => {
+		const all = await mockups.getAll();
+		if (c.req.query("include") === "full") return c.json(all);
+		const includeComments = c.req.query("include") === "comments";
+		return c.json(all.map((mockup) => summarizeMockup(mockup, includeComments)));
+	});
+	app.get("/api/mockups/:id", async (c) => {
+		const mockup = await mockups.get(c.req.param("id"));
+		if (!mockup) return c.json({ error: "Mockup not found" }, 404);
+		return c.json(mockup);
+	});
+	app.get("/api/mockups/:id/versions", async (c) => {
+		const mockup = await mockups.get(c.req.param("id"));
+		if (!mockup) return c.json({ error: "Mockup not found" }, 404);
+		return c.json((mockup.versions ?? []).map((version) => ({
+			version: version.version,
+			title: version.title,
+			source: version.source,
+			model: version.model,
+			createdAt: version.createdAt,
+			screens: version.screens.map(({ id, label }) => ({
+				id,
+				label
+			}))
+		})));
+	});
+	app.get("/api/mockups/:id/versions/:n", async (c) => {
+		const id = c.req.param("id");
+		const n = Number(c.req.param("n"));
+		if (!Number.isFinite(n) || n < 1) return c.json({ error: "version must be a positive integer" }, 400);
+		const mockup = await mockups.get(id);
+		if (!mockup) return c.json({ error: "Mockup not found" }, 404);
+		const version = (mockup.versions ?? []).find((v) => v.version === n);
+		if (!version) return c.json({ error: `Version ${n} not found` }, 404);
+		return c.json({
+			version,
+			mockup: {
+				id: mockup.id,
+				title: mockup.title,
+				decision: mockup.decision,
+				currentVersion: mockup.version
+			}
+		});
+	});
+	app.get("/api/mockups/:id/screens/:screenId/document", async (c) => {
+		const mockup = await mockups.get(c.req.param("id"));
+		if (!mockup) return c.text("Mockup not found", 404);
+		const versionRaw = c.req.query("version");
+		const versionN = versionRaw ? Number(versionRaw) : mockup.version;
+		const snap = versionN === mockup.version ? mockup : (mockup.versions ?? []).find((v) => v.version === versionN);
+		if (!snap) return c.text("Version not found", 404);
+		const screen = snap.screens.find((s) => s.id === c.req.param("screenId"));
+		if (!screen) return c.text("Screen not found", 404);
+		const viewport = normalizeMockupViewport(c.req.query("viewport"));
+		const nonce = crypto.randomUUID();
+		registerMockupNonce(nonce, {
+			mockupId: mockup.id,
+			screenId: screen.id,
+			version: versionN,
+			viewport
+		});
+		return c.html(injectMockupProbe(screen.html, {
+			nonce,
+			viewport
+		}), 200, {
+			"Content-Security-Policy": "default-src 'none'; style-src 'unsafe-inline' https: data:; img-src data: blob: https:; font-src https: data:; script-src 'unsafe-inline';",
+			"X-Content-Type-Options": "nosniff",
+			"X-Diffing-Mockup-Nonce": nonce,
+			"X-Diffing-Mockup-Viewport": viewport
+		});
+	});
+	app.get("/api/mockups/:id/inspect", async (c) => {
+		const mockup = await mockups.get(c.req.param("id"));
+		if (!mockup) return c.json({ error: "Mockup not found" }, 404);
+		const view = c.req.query("view") || "summary";
+		if (view !== "summary" && view !== "comments" && view !== "comment" && view !== "screen") return c.json({ error: "view must be summary|comments|comment|screen" }, 400);
+		const status = c.req.query("status");
+		if (status !== void 0 && status !== "open" && status !== "resolved") return c.json({ error: "status must be open or resolved" }, 400);
+		const screenFilter = c.req.query("screen");
+		const viewportRaw = c.req.query("viewport");
+		if (viewportRaw !== void 0 && !isMockupViewport(viewportRaw)) return c.json({ error: "viewport must be desktop|tablet|mobile" }, 400);
+		const versionRaw = c.req.query("version");
+		if (versionRaw !== void 0 && (!Number.isFinite(Number(versionRaw)) || Number(versionRaw) < 1)) return c.json({ error: "version must be a positive integer" }, 400);
+		const contextRaw = c.req.query("context") || "anchor";
+		if (contextRaw !== "none" && contextRaw !== "anchor" && contextRaw !== "source") return c.json({ error: "context must be none|anchor|source" }, 400);
+		const context = contextRaw;
+		const cursorRaw = c.req.query("cursor");
+		const cursor = cursorRaw === void 0 ? 0 : Number(cursorRaw);
+		if (!Number.isFinite(cursor) || cursor < 0) return c.json({ error: "cursor must be a non-negative integer" }, 400);
+		const limitRaw = c.req.query("limit");
+		const limit = limitRaw === void 0 ? 50 : Math.min(Math.max(Number(limitRaw) || 50, 1), 200);
+		const allComments = mockup.comments ?? [];
+		if (view === "summary") {
+			const byViewport = {
+				desktop: 0,
+				tablet: 0,
+				mobile: 0
+			};
+			for (const c2 of allComments) byViewport[commentViewport(c2)] += 1;
+			return c.json({
+				view: "summary",
+				id: mockup.id,
+				title: mockup.title,
+				version: mockup.version,
+				decision: mockup.decision,
+				decidedAt: mockup.decidedAt ?? null,
+				createdAt: mockup.createdAt,
+				updatedAt: mockup.updatedAt,
+				source: mockup.source,
+				model: mockup.model,
+				screens: mockup.screens.map((s) => ({
+					id: s.id,
+					label: s.label
+				})),
+				versions: (mockup.versions ?? []).length,
+				commentCounts: {
+					total: allComments.length,
+					open: allComments.filter((c2) => c2.status === "open").length,
+					resolved: allComments.filter((c2) => c2.status === "resolved").length,
+					byViewport
+				}
+			});
+		}
+		if (view === "comment") {
+			const id = c.req.query("id");
+			if (!id) return c.json({ error: "id is required for view=comment" }, 400);
+			const comment = allComments.find((c2) => c2.id === id);
+			if (!comment) return c.json({ error: `Comment ${id} not found` }, 404);
+			return c.json({
+				view: "comment",
+				mockupId: mockup.id,
+				version: mockup.version,
+				comment: serializeMockupCommentSummary(comment, context)
+			});
+		}
+		if (view === "screen") {
+			const requestedVersion = versionRaw === void 0 ? mockup.version : Number(versionRaw);
+			const snapshot = requestedVersion === mockup.version ? mockup : mockup.versions.find((version) => version.version === requestedVersion);
+			if (!snapshot) return c.json({ error: `Version ${requestedVersion} not found` }, 404);
+			if (screenFilter) {
+				const screen = snapshot.screens.find((item) => item.id === screenFilter);
+				if (!screen) return c.json({ error: "Screen not found" }, 404);
+				return c.json({
+					view: "screen",
+					mockupId: mockup.id,
+					version: requestedVersion,
+					screen: {
+						id: screen.id,
+						label: screen.label,
+						htmlBytes: Buffer.byteLength(screen.html, "utf8"),
+						...context === "source" ? { html: screen.html } : {}
+					}
+				});
+			}
+			const start = Math.min(cursor, snapshot.screens.length);
+			const page = snapshot.screens.slice(start, start + limit);
+			return c.json({
+				view: "screen",
+				mockupId: mockup.id,
+				version: requestedVersion,
+				cursor: start,
+				limit,
+				nextCursor: start + page.length < snapshot.screens.length ? start + page.length : null,
+				screens: page.map((screen) => ({
+					id: screen.id,
+					label: screen.label,
+					htmlBytes: Buffer.byteLength(screen.html, "utf8")
+				}))
+			});
+		}
+		const versionN = versionRaw === void 0 ? void 0 : Number(versionRaw);
+		const filtered = allComments.filter((c2) => {
+			if (status !== void 0 && c2.status !== status) return false;
+			if (screenFilter !== void 0 && c2.screenId !== screenFilter) return false;
+			if (viewportRaw !== void 0 && commentViewport(c2) !== viewportRaw) return false;
+			if (versionN !== void 0 && c2.createdAtMockupVersion !== versionN) return false;
+			return true;
+		});
+		const start = Math.min(cursor, filtered.length);
+		const page = filtered.slice(start, start + limit);
+		return c.json({
+			view: "comments",
+			mockupId: mockup.id,
+			version: mockup.version,
+			cursor: start,
+			limit,
+			nextCursor: start + page.length < filtered.length ? start + page.length : null,
+			comments: page.map((c2) => serializeMockupCommentSummary(c2, context, { truncateBody: 400 }))
+		});
+	});
+	const screenOpError = (c, result) => {
+		if (result.versionMismatch) return c.json({
+			error: `Mockup is at version ${result.versionMismatch.currentVersion}, expected ${result.versionMismatch.expectedVersion} — pass the current version and retry.`,
+			code: "version-mismatch",
+			currentVersion: result.versionMismatch.currentVersion,
+			expectedVersion: result.versionMismatch.expectedVersion
+		}, 409);
+		if (result.error === "Exact text not found") return c.json({
+			error: result.error,
+			code: "exact-text-not-found"
+		}, 409);
+		if (result.error === "Mockup not found" || result.error?.endsWith("not found")) return c.json({ error: result.error }, 404);
+		return c.json({ error: result.error ?? "Screen operation failed" }, 400);
+	};
+	app.put("/api/mockups/:id/screens/:screenId", async (c) => {
+		const mockupId = c.req.param("id");
+		const screenId = c.req.param("screenId");
+		if (!MOCKUP_SCREEN_ID_RE.test(screenId)) return c.json({ error: `Invalid screen id "${screenId}"` }, 400);
+		const body = await c.req.json().catch(() => ({}));
+		if (typeof body.html !== "string" || !body.html.trim()) return c.json({ error: "html is required" }, 400);
+		if (Buffer.byteLength(body.html, "utf8") > 1572864) return c.json({ error: `Each screen must be ≤ ${MOCKUP_MAX_SCREEN_BYTES} bytes` }, 400);
+		const expectedVersion = Number.isFinite(body.expectedVersion) ? Number(body.expectedVersion) : void 0;
+		const label = typeof body.label === "string" && body.label.trim() ? body.label.trim() : void 0;
+		const result = await mockups.upsertScreen(mockupId, {
+			id: screenId,
+			label,
+			html: body.html
+		}, { expectedVersion });
+		if (!result.mockup) return screenOpError(c, result);
+		return c.json(result.mockup, 200);
+	});
+	app.patch("/api/mockups/:id/screens/:screenId", async (c) => {
+		const mockupId = c.req.param("id");
+		const screenId = c.req.param("screenId");
+		const body = await c.req.json().catch(() => ({}));
+		const expectedText = typeof body.expectedText === "string" ? body.expectedText : "";
+		const replacement = typeof body.replacement === "string" ? body.replacement : "";
+		if (!expectedText) return c.json({ error: "expectedText is required" }, 400);
+		if (typeof body.replacement !== "string") return c.json({ error: "replacement is required" }, 400);
+		const expectedVersion = Number.isFinite(body.expectedVersion) ? Number(body.expectedVersion) : void 0;
+		const result = await mockups.patchScreen(mockupId, screenId, {
+			expectedText,
+			replacement
+		}, { expectedVersion });
+		if (!result.mockup) return screenOpError(c, result);
+		return c.json({
+			mockup: result.mockup,
+			occurrences: result.occurrences
+		}, 200);
+	});
+	app.delete("/api/mockups/:id/screens/:screenId", async (c) => {
+		const mockupId = c.req.param("id");
+		const screenId = c.req.param("screenId");
+		const body = await c.req.json().catch(() => ({}));
+		const expectedVersion = Number.isFinite(body.expectedVersion) ? Number(body.expectedVersion) : c.req.query("expectedVersion") !== void 0 ? Number(c.req.query("expectedVersion")) : void 0;
+		const result = await mockups.removeScreen(mockupId, screenId, { expectedVersion });
+		if (!result.mockup) return screenOpError(c, result);
+		return c.json(result.mockup, 200);
+	});
+	app.post("/api/mockups/:id/threads/batch", async (c) => {
+		const mockupId = c.req.param("id");
+		const normalized = normalizeThreadOperations((await c.req.json().catch(() => ({}))).operations);
+		if (!normalized.ok) return c.json({
+			error: normalized.error,
+			index: normalized.index
+		}, 400);
+		const result = await mockups.applyThreadBatch(mockupId, normalized.ops);
+		if (!result.mockup) return c.json({
+			error: result.error ?? "Thread batch failed",
+			results: result.results
+		}, result.error === "Mockup not found" ? 404 : 409);
+		return c.json({
+			ok: true,
+			applied: result.results.length,
+			results: result.results,
+			mockup: result.mockup
+		});
+	});
+	app.post("/api/mockups", async (c) => {
+		const body = await c.req.json().catch(() => ({}));
+		const normalized = screensFromSubmitBody(body);
+		if (!normalized.ok) return c.json({ error: normalized.error }, 400);
+		const title = typeof body.title === "string" && body.title.trim() ? body.title.trim() : "Untitled mockup";
+		const mockup = await mockups.upsert({
+			id: typeof body.id === "string" && body.id ? body.id : void 0,
+			title,
+			screens: normalized.screens,
+			source: typeof body.source === "string" ? body.source : void 0,
+			model: typeof body.model === "string" ? body.model : void 0
+		});
+		return c.json(mockup, 201);
+	});
+	app.put("/api/mockups/:id", async (c) => {
+		const id = c.req.param("id");
+		const body = await c.req.json().catch(() => ({}));
+		let screens;
+		if (body.html !== void 0 || body.screens !== void 0) {
+			const normalized = screensFromSubmitBody(body);
+			if (!normalized.ok) return c.json({ error: normalized.error }, 400);
+			screens = normalized.screens;
+		}
+		const updated = await mockups.update(id, {
+			title: typeof body.title === "string" ? body.title : void 0,
+			screens,
+			source: typeof body.source === "string" ? body.source : void 0,
+			model: typeof body.model === "string" ? body.model : void 0
+		});
+		if (!updated) return c.json({ error: "Mockup not found" }, 404);
+		return c.json(updated);
+	});
+	app.delete("/api/mockups/:id", async (c) => {
+		if (!await mockups.remove(c.req.param("id"))) return c.json({ error: "Mockup not found" }, 404);
+		return c.json({ ok: true });
+	});
+	app.post("/api/mockups/:id/comments", async (c) => {
+		const mockupId = c.req.param("id");
+		const mockup = await mockups.get(mockupId);
+		if (!mockup) return c.json({ error: "Mockup not found" }, 404);
+		const body = await c.req.json().catch(() => ({}));
+		const kind = body.kind;
+		if (kind !== "section" && kind !== "block" && kind !== "point") return c.json({ error: "kind must be section, block, or point" }, 400);
+		const screenId = typeof body.screenId === "string" ? body.screenId : "";
+		if (!mockup.screens.some((s) => s.id === screenId)) return c.json({ error: "Unknown screenId" }, 400);
+		if (typeof body.nonce === "string" && body.nonce) {
+			const nonceError = validateMockupNonce(body.nonce, mockupId, screenId);
+			if (nonceError) return c.json({
+				error: nonceError,
+				code: "invalid-nonce"
+			}, 409);
+		}
+		if (typeof body.body !== "string" || !body.body.trim()) return c.json({ error: "body is required" }, 400);
+		const viewport = normalizeMockupViewport(body.viewport);
+		const severityRaw = body.severity;
+		const severity = severityRaw === "blocking" || severityRaw === "nit" || severityRaw === "question" || severityRaw === "praise" || severityRaw === "none" ? severityRaw : void 0;
+		const rect = body.rect && typeof body.rect === "object" ? body.rect : void 0;
+		const comment = {
+			id: crypto.randomUUID(),
+			screenId,
+			kind,
+			target: typeof body.target === "string" ? body.target : void 0,
+			selector: typeof body.selector === "string" ? body.selector : void 0,
+			fingerprint: typeof body.fingerprint === "string" ? body.fingerprint : void 0,
+			html: typeof body.html === "string" ? body.html : void 0,
+			contextHtml: typeof body.contextHtml === "string" ? body.contextHtml : void 0,
+			x: Number.isFinite(body.x) ? Number(body.x) : void 0,
+			y: Number.isFinite(body.y) ? Number(body.y) : void 0,
+			sectionX: Number.isFinite(body.sectionX) ? Number(body.sectionX) : void 0,
+			sectionY: Number.isFinite(body.sectionY) ? Number(body.sectionY) : void 0,
+			snapshot: typeof body.snapshot === "string" ? body.snapshot : void 0,
+			rect: rect && Number.isFinite(rect.x) && Number.isFinite(rect.y) && Number.isFinite(rect.w) && Number.isFinite(rect.h) ? {
+				x: Number(rect.x),
+				y: Number(rect.y),
+				w: Number(rect.w),
+				h: Number(rect.h)
+			} : void 0,
+			body: String(body.body),
+			status: "open",
+			createdAt: Date.now(),
+			createdAtMockupVersion: Number.isFinite(body.createdAtMockupVersion) ? Number(body.createdAtMockupVersion) : mockup.version,
+			viewport,
+			replies: [],
+			...severity && severity !== "none" ? { severity } : {}
+		};
+		const updated = await mockups.addComment(mockupId, comment);
+		if (!updated) return c.json({ error: "Mockup not found" }, 404);
+		return c.json(updated, 201);
+	});
+	app.put("/api/mockups/:id/comments/:commentId", async (c) => {
+		const { body, status } = await c.req.json();
+		const updated = await mockups.updateComment(c.req.param("id"), c.req.param("commentId"), {
+			body,
+			status
+		});
+		if (!updated) return c.json({ error: "Mockup or comment not found" }, 404);
+		return c.json(updated);
+	});
+	app.delete("/api/mockups/:id/comments/:commentId", async (c) => {
+		const updated = await mockups.removeComment(c.req.param("id"), c.req.param("commentId"));
+		if (!updated) return c.json({ error: "Mockup or comment not found" }, 404);
+		return c.json(updated);
+	});
+	app.post("/api/mockups/:id/comments/:commentId/replies", async (c) => {
+		const { body, role, model } = await c.req.json();
+		const reply = {
+			id: crypto.randomUUID(),
+			body,
+			createdAt: Date.now(),
+			role: role || (model ? "agent" : "user"),
+			model: model || void 0
+		};
+		const updated = await mockups.addReply(c.req.param("id"), c.req.param("commentId"), reply);
+		if (!updated) return c.json({ error: "Mockup or comment not found" }, 404);
+		return c.json(updated);
+	});
+	app.put("/api/mockups/:id/comments/:commentId/replies/:replyId", async (c) => {
+		const { body } = await c.req.json();
+		if (!body) return c.json({ error: "Body is required" }, 400);
+		const updated = await mockups.updateReply(c.req.param("id"), c.req.param("commentId"), c.req.param("replyId"), body);
+		if (!updated) return c.json({ error: "Mockup, comment, or reply not found" }, 404);
+		return c.json(updated);
+	});
+	app.delete("/api/mockups/:id/comments/:commentId/replies/:replyId", async (c) => {
+		const updated = await mockups.removeReply(c.req.param("id"), c.req.param("commentId"), c.req.param("replyId"));
+		if (!updated) return c.json({ error: "Mockup, comment, or reply not found" }, 404);
+		return c.json(updated);
+	});
+	app.post("/api/mockups/:id/decision", async (c) => {
+		const mockupId = c.req.param("id");
+		const body = await c.req.json().catch(() => ({}));
+		const decision = body.decision;
+		if (decision !== "approved" && decision !== "rejected" && decision !== "changes-requested" && decision !== "comment-only") return c.json({ error: "decision must be one of: approved, rejected, changes-requested, comment-only" }, 400);
+		const decisionComment = typeof body.decisionComment === "string" ? body.decisionComment : void 0;
+		const mode = body?.mode === "comment-only" || body?.mode === "standard" ? body.mode : "standard";
+		const focusedScreen = typeof body.screen === "string" ? body.screen : void 0;
+		const focusedViewport = isMockupViewport(body.viewport) ? body.viewport : void 0;
+		const mockup = await mockups.setDecision(mockupId, decision, decisionComment);
+		if (!mockup) return c.json({ error: "Mockup not found" }, 404);
+		const openCommentCount = (mockup.comments ?? []).filter((x) => x.status === "open").length;
+		const payload = mockupReviewSession.decide({
+			mockup,
+			decision,
+			decisionComment: mockup.decisionComment,
+			reviewXml: formatMockupReview(mockup, {
+				mode,
+				focusedScreen,
+				focusedViewport
+			}),
+			openCommentCount,
+			mode
+		});
+		return c.json({
+			ok: true,
+			round: payload.round,
+			decision,
+			mode: payload.mode,
+			openCommentCount,
+			waiters: mockupReviewSession.snapshot().waiters
+		});
+	});
+	app.get("/api/mockup-review/await", async (c) => {
+		const sinceRaw = c.req.query("sinceRound");
+		const sinceRound = sinceRaw !== void 0 && sinceRaw !== "" ? Number(sinceRaw) : void 0;
+		const requested = Number(c.req.query("timeoutMs")) || 25e3;
+		const timeoutMs = Math.min(Math.max(requested, 1e3), 5e4);
+		const result = await mockupReviewSession.await({
+			sinceRound: Number.isNaN(sinceRound) ? void 0 : sinceRound,
+			timeoutMs,
+			signal: c.req.raw.signal
+		});
+		return c.json(result);
+	});
+	app.get("/api/mockup-review/status", (c) => {
+		return c.json(mockupReviewSession.snapshot());
+	});
 	app.post("/api/attachments", async (c) => {
 		const file = (await c.req.parseBody())["file"];
 		if (!file || !(file instanceof File)) return c.json({ error: "No file uploaded" }, 400);
@@ -4839,6 +6390,7 @@ async function newestActivityMs(projectDir) {
 	for (const name of [
 		"comments.json",
 		"plans.json",
+		"mockups.json",
 		"pr-session.json"
 	]) {
 		const file = join(projectDir, name);