@office-kit/pptx-dev 0.6.0 → 0.7.0

package/README.md

@@ -16,11 +16,24 @@ npm install
 npm run dev
 ```
 
+For a single-command first launch (macOS/Linux):
+
+```sh
+npx --yes @office-kit/pptx-dev@latest init my-slides && cd my-slides && npm install && npm run dev
+```
+
+The built-in `init` is the starter generator: no separate `degit` checkout is
+needed, and it selects compatible package versions. For an existing project,
+start development with `npm run dev` or `npx office-pptx dev deck.tsx`.
+If you prefer the bare `office-pptx dev deck.tsx` command, install the CLI once
+with `npm install --global @office-kit/pptx-dev@latest`. The local npm script
+continues to use the project's installed version.
+
 Open the local URL printed by the server. Save a slide file, `theme.ts` or `deck.tsx` to rebuild. The viewer
 has a vertical thumbnail strip, a large slide canvas and an AI chat panel on the right. Click a thumbnail or use
 arrow keys, Page Up/Down, Home/End to navigate. Fit/zoom and Present (Escape to
-exit) are viewing controls; the canvas has no editing, dragging or resize handles.
-Changes are made only in TSX, including when an AI agent edits the presentation.
+exit) are viewing controls. Select an area for an AI instruction or use **Edit text**
+to save a literal directly. All edits are persisted in TSX.
 Keep the server running throughout the edit/review loop. Saving updates only the
 changed thumbnails and slide view, preserving zoom, scroll position and presentation
 mode. The previous slide stays visible until its replacement is ready. Rapid edits
@@ -140,6 +153,40 @@ References: [Claude Code commands](https://code.claude.com/docs/en/commands),
 [Claude Code hooks](https://code.claude.com/docs/en/hooks), and
 [Codex non-interactive mode](https://developers.openai.com/codex/noninteractive).
 
+## Edit from the slide
+
+Use **Select area** and drag a rectangle, then enter an instruction such as
+“Move this down a little.” Choose an agent pane and click **Apply with AI**.
+The request includes the slide, preview revision, relative bounds and intersecting
+text. Start Claude Code in that pane first; Codex starts when you send.
+Selection is cleared when the preview or selected slide changes. Shift+Enter
+inserts a newline; Cmd/Ctrl+Enter sends the request.
+
+Use **Edit text**, click a paragraph, and **Save text** to update its TSX source
+without waiting for an agent. Direct saves require a unique source literal within
+the entry directory and verify that other slides did not change. Computed text,
+shared values and ambiguous matches use **Apply with AI** instead. **Undo text**
+restores the last direct edit only if its file has not changed since. **Undo with
+AI** asks the agent to reverse its previous selection edit while preserving newer
+work; it is not a source snapshot restore.
+
+After each successful agent edit or direct text save/undo, the dev server captures
+all changed slides, including slides offscreen. Codex receives PNG attachments;
+Claude Code receives local PNG paths through its Stop hook and is instructed to
+read them. The agent checks overlap, clipping, alignment, spacing and contrast,
+and can make up to two correction passes followed by a final inspection. This is
+AI-assisted review, not a guarantee of pixel-perfect rendering. The preview updates
+as soon as the build finishes, independently of screenshot review.
+
+Screenshot capture uses an installed Chrome, or falls back to Playwright Chromium.
+Set `PLAYWRIGHT_CHANNEL` to use another installed Chromium channel. If neither is
+available, install Chrome and restart the dev server. Capture failures are shown
+explicitly; saved edits remain available. If the chosen agent is busy or not started,
+use **Retry visual review** after making it available. Screenshots and review prompts
+are stored locally under `.office-kit/reviews/`; new projects ignore this directory.
+Add `.office-kit/` to `.gitignore` in existing projects. Images are provided to the
+selected AI agent using its existing login and provider settings.
+
 ## Edit only what changed
 
 New projects separate slide order, content and shared styling:

package/dist/cli.mjs

@@ -1,13 +1,167 @@
 #!/usr/bin/env node
-import { a as createDeckBuilder, i as initProject, n as exportDeck, r as inspectTemplate } from "./src-CShdm4G1.mjs";
+import { a as createDeckBuilder, i as initProject, n as exportDeck, r as inspectTemplate } from "./src-CdlqA8pS.mjs";
 import { createRequire } from "node:module";
-import { chmod, readFile, stat } from "node:fs/promises";
-import { dirname, join, resolve, sep } from "node:path";
+import { chmod, mkdir, readFile, realpath, stat, writeFile } from "node:fs/promises";
+import { dirname, extname, isAbsolute, join, relative, resolve, sep } from "node:path";
 import { watch } from "node:fs";
+import ts from "typescript";
+import { randomBytes, randomUUID } from "node:crypto";
+import { chromium } from "playwright";
 import { createServer } from "node:http";
-import { randomBytes } from "node:crypto";
 import MarkdownIt from "markdown-it";
 import { spawn } from "node:child_process";
+//#region src/text-edit.ts
+/** Literal edits are deliberately conservative: computed and ambiguous text goes to the agent. */
+function createTextEditor(entry, preview, verify) {
+	let busy = false;
+	let undo;
+	async function restore(change) {
+		if (await realpath(change.file) !== change.file || await readFile(change.file, "utf8") !== change.after) throw new Error("Source changed during editing. Your newer changes were preserved.");
+		await writeFile(change.file, change.before);
+	}
+	return {
+		async edit(value) {
+			if (busy) throw new Error("A text edit is already running.");
+			busy = true;
+			try {
+				const current = preview();
+				if (value.revision !== current.revision) throw new Error("Preview changed. Select the text again.");
+				if (!Number.isInteger(value.slide) || !current.slides[value.slide] || typeof value.before !== "string" || !value.before.trim() || value.before.length > 12e3 || typeof value.after !== "string" || value.after.length > 12e3 || value.after === value.before) throw new Error("Invalid text edit.");
+				if (current.slideTexts[value.slide].split(value.before).length !== 2) throw new Error("Text cannot be located uniquely on this slide. Use Apply with AI.");
+				const root = await realpath(dirname(entry));
+				const files = await Promise.all([...new Set(current.dependencies)].filter((file) => /\.[cm]?[jt]sx?$/.test(file)).map(async (file) => {
+					const path = await realpath(file), local = relative(root, path);
+					if (local.startsWith("..") || isAbsolute(local) || local.split(/[\\/]/).includes("node_modules")) return null;
+					return {
+						file: path,
+						before: await readFile(path, "utf8")
+					};
+				}));
+				const candidates = [];
+				for (const item of files) {
+					if (!item) continue;
+					const source = ts.createSourceFile(item.file, item.before, ts.ScriptTarget.Latest, true, /[jt]sx$/.test(extname(item.file)) ? ts.ScriptKind.TSX : ts.ScriptKind.TS);
+					const visit = (node) => {
+						if ((ts.isJsxText(node) ? node.text.split(/\r\n|\n|\r/).map((line, index, lines) => {
+							let value = line.replaceAll("	", " ");
+							if (index) value = value.trimStart();
+							if (index < lines.length - 1) value = value.trimEnd();
+							return value;
+						}).filter(Boolean).join(" ") : ts.isStringLiteral(node) || ts.isNoSubstitutionTemplateLiteral(node) ? node.text : void 0) === value.before) {
+							const replacement = ts.isJsxText(node) || ts.isJsxAttribute(node.parent) ? "{" + JSON.stringify(value.after) + "}" : JSON.stringify(value.after);
+							const start = ts.isJsxText(node) ? node.pos : node.getStart(source);
+							candidates.push({
+								...item,
+								after: item.before.slice(0, start) + replacement + item.before.slice(node.end)
+							});
+						}
+						ts.forEachChild(node, visit);
+					};
+					visit(source);
+				}
+				if (candidates.length !== 1) throw new Error("Text is computed or has multiple source matches. Use Apply with AI.");
+				const change = candidates[0];
+				if (preview().revision !== current.revision || await realpath(change.file) !== change.file || await readFile(change.file, "utf8") !== change.before) throw new Error("Source changed. Select the text again.");
+				await writeFile(change.file, change.after);
+				try {
+					if (await verify()) throw new Error("The text change did not build.");
+					const next = preview();
+					if (next.slides.length !== current.slides.length || next.slides.some((svg, index) => index !== value.slide && svg !== current.slides[index]) || next.slideTexts[value.slide] !== current.slideTexts[value.slide].replace(value.before, value.after)) throw new Error("This source affects other text or slides. Use Apply with AI for a local edit.");
+					if (await realpath(change.file) !== change.file || await readFile(change.file, "utf8") !== change.after) throw new Error("Source changed during editing.");
+					undo = change;
+				} catch (error) {
+					await restore(change);
+					await verify();
+					throw error;
+				}
+			} finally {
+				busy = false;
+			}
+		},
+		async undo() {
+			if (busy) throw new Error("A text edit is already running.");
+			if (!undo) throw new Error("No direct text edit to undo.");
+			busy = true;
+			try {
+				await restore(undo);
+				undo = void 0;
+				if (await verify()) throw new Error("Text restored, but the project has build errors.");
+			} finally {
+				busy = false;
+			}
+		}
+	};
+}
+//#endregion
+//#region src/visual-review.ts
+/** Each session compares against its own turn's preview, including offscreen slides. */
+function createVisualReviewer(entry, slides) {
+	let before = [];
+	let rounds = 0;
+	return {
+		begin() {
+			before = slides().slice();
+			rounds = 0;
+		},
+		async next() {
+			const current = slides().slice();
+			const changed = current.flatMap((svg, index) => svg !== before[index] ? [{
+				svg,
+				index
+			}] : []);
+			if (!changed.length) return;
+			if (rounds >= 3) throw new Error("Visual review reached its correction limit. Review the latest slide manually before continuing.");
+			const round = rounds + 1;
+			let browser;
+			try {
+				browser = await chromium.launch({
+					channel: process.env.PLAYWRIGHT_CHANNEL || "chrome",
+					headless: true
+				});
+			} catch {
+				try {
+					browser = await chromium.launch({ headless: true });
+				} catch {
+					throw new Error("Visual review needs Chrome or a Playwright Chromium installation. Install Chrome and retry. The source edit was saved; visual review was not completed.");
+				}
+			}
+			try {
+				const directory = join(dirname(entry), ".office-kit", "reviews", randomUUID());
+				await mkdir(directory, { recursive: true });
+				const page = await browser.newPage({
+					viewport: {
+						width: 1600,
+						height: 1e3
+					},
+					deviceScaleFactor: 1
+				});
+				await page.route("**/*", (route) => route.abort());
+				const images = [];
+				for (const { svg, index } of changed) {
+					await page.setContent("<meta http-equiv=\"Content-Security-Policy\" content=\"default-src 'none'; style-src 'unsafe-inline'; img-src data: blob:; font-src data:\"><style>html,body{margin:0}svg{display:block;width:1600px;height:auto}</style>" + svg);
+					await page.evaluate(() => document.fonts.ready.then(() => void 0));
+					const file = join(directory, `slide-${index + 1}.png`);
+					await page.locator("svg").first().screenshot({
+						path: file,
+						timeout: 15e3
+					});
+					images.push(file);
+				}
+				const prompt = `Visual review after the edit (round ${round}/3). Open every attached screenshot (or read each local PNG path below) before finishing. Check clipping, overlap, alignment, spacing, legibility and foreground/background contrast. ${round === 3 ? "This is the final review: do not edit further; report any remaining defects to the user." : "Fix concrete design defects only on these affected slides;"} preserve the user's exact text and unrelated work. Do not claim visual verification unless you inspected the images. If there are no defects, finish without edits. Screenshots: ${JSON.stringify(images)}`;
+				await writeFile(join(directory, "review.txt"), prompt);
+				before = current;
+				rounds = round;
+				return {
+					prompt,
+					images
+				};
+			} finally {
+				await browser.close();
+			}
+		}
+	};
+}
+//#endregion
 //#region src/styles.ts
 const previewStyles = `*{box-sizing:border-box}
 body{margin:0;height:100dvh;overflow:hidden;background:#e9eaf4;color:#dce1f1;font:13px system-ui;display:grid;grid-template-rows:60px minmax(0,1fr) 42px}
@@ -77,6 +231,8 @@ const page = `<!doctype html>
 <link rel="stylesheet" href="/terminal.css">
 <style>
 ${previewStyles}
+.slide-edit-tools{display:flex;gap:6px;padding:8px 14px;flex-shrink:0}.slide-edit-tools button[aria-pressed=true]{background:#6850b8;border-color:#b8a1ff}.slide-selection{position:fixed;border:2px solid #b094ff;background:#a080ff18;pointer-events:none;z-index:20;box-shadow:0 0 0 1px #201632}.slide-edit-panel{position:fixed;z-index:21;width:min(380px,calc(100vw - 16px));padding:14px;background:#202438;border:1px solid #776591;border-radius:14px;box-shadow:0 16px 50px #0008;display:flex;flex-direction:column;gap:12px}.slide-edit-panel[hidden],.slide-selection[hidden]{display:none}.selection-heading,.selection-actions{display:flex;align-items:center;gap:8px}.selection-heading strong{flex:1}.slide-edit-panel textarea{width:100%;min-height:90px;max-height:35vh;resize:vertical;background:#141a2b;color:#f4efff;border:1px solid #514969;border-radius:8px;padding:10px;font:inherit}.selection-actions{flex-wrap:wrap}.selection-actions select{min-width:80px;flex:1}.slide-edit-panel small{color:#d1c9e3;line-height:1.5}.presenting .slide-edit-tools{display:none}
+
 #agent-workspace{position:relative;flex:1;min-height:0;min-width:0;display:flex;overflow:auto}.agent-pane{position:absolute;padding:3px 5px;display:flex;flex-direction:column;flex:1;min-width:0;min-height:0;overflow:hidden}.agent-pane iframe{border:0;width:100%;flex:1;min-height:0;border-radius:0 0 9px 9px}.agent-tools{display:flex;gap:4px;align-items:center;flex-wrap:wrap;padding:6px;background:#20253a;border:1px solid #34334e;border-radius:9px 9px 0 0}.agent-tools span{flex:1;font-size:10px;letter-spacing:.04em;color:#b3abc9}.agent-tools svg{width:14px;height:14px}.agent-pane:focus-within .agent-tools{border-color:#8b6ed577;background:#29243e}.agent-tools button{font-size:11px;padding:5px;background:transparent;border:0;display:grid;place-items:center}.agent-divider{position:absolute;z-index:2;background:#101422;cursor:col-resize;touch-action:none}.agent-divider.vertical{cursor:row-resize}.agent-divider:hover,.agent-divider:focus-visible{background:#9b87ff}.splitting-agents iframe,.resizing-chat iframe{pointer-events:none}
 </style>
 <header><span class="brand"><svg viewBox="0 0 36 36" aria-hidden="true"><defs><linearGradient id="brand-gradient" x2="1" y2="1"><stop stop-color="#c39aff"/><stop offset="1" stop-color="#7165f4"/></linearGradient></defs><rect x="2" y="2" width="32" height="32" rx="10" fill="url(#brand-gradient)"/><path d="M11 10h9l6 6v10H11z" fill="none" stroke="white" stroke-width="1.8" stroke-linejoin="round"/><path d="M20 10v7h6M15 21h7M15 25h4" fill="none" stroke="white" stroke-width="1.8" stroke-linecap="round"/><path d="m28 3 1.2 3.8L33 8l-3.8 1.2L28 13l-1.2-3.8L23 8l3.8-1.2z" fill="#e7dbff"/></svg>Office <em>Kit</em></span><span class="badge">Studio</span><span id="status" role="status">Building…</span><button id="toggle-chat" aria-expanded="true" aria-controls="chat">✦ Agents</button><button id="present" disabled>Present</button><a class="download" href="/deck.pptx">Download PPTX</a></header>
@@ -87,7 +243,7 @@ ${previewStyles}
 <div id="chat-resizer" role="separator" tabindex="0" aria-label="Chat width" aria-orientation="vertical" aria-controls="chat" title="Drag to resize · Double-click to reset"></div>
 <div class="workspace-heading"><span>✦ AI WORKSPACE</span><b>LOCAL</b></div><div id="agent-workspace"></div><div id="chat-context" hidden></div></aside>
 </div>
-<footer><span id="count" aria-live="polite">No slides</span><span class="hint">Changes appear automatically · Text can be selected and copied</span><button id="prev" aria-label="Previous slide" disabled>‹</button><button id="next" aria-label="Next slide" disabled>›</button><label for="zoom">Zoom</label><select id="zoom"><option value="fit">Fit</option><option value="0.5">50%</option><option value="0.75">75%</option><option value="1">100%</option><option value="1.25">125%</option><option value="1.5">150%</option><option value="2">200%</option></select></footer>
+<footer><span id="count" aria-live="polite">No slides</span><span class="hint">Select an area to ask AI · Edit text directly</span><button id="prev" aria-label="Previous slide" disabled>‹</button><button id="next" aria-label="Next slide" disabled>›</button><label for="zoom">Zoom</label><select id="zoom"><option value="fit">Fit</option><option value="0.5">50%</option><option value="0.75">75%</option><option value="1">100%</option><option value="1.25">125%</option><option value="1.5">150%</option><option value="2">200%</option></select></footer>
 <div id="presentation-controls"><button id="present-prev" aria-label="Previous slide">‹</button><span id="present-count"></span><button id="present-next" aria-label="Next slide">›</button><button id="exit-present">Exit · Esc</button></div>
 <script>
 let state={slides:[],error:null,aspectRatio:16/9},index=0,urls=[],presenting=false;
@@ -257,6 +413,10 @@ window.addEventListener('message',event=>{
  if(event.origin!==location.origin||event.source!==parent)return;
  if(event.data?.type==='focus'){focus=event.data.focus;byId('chat-context').dataset.focus=JSON.stringify(focus);byId('chat-context').textContent=event.data.label;}
  if(event.data?.type==='chat')void refreshChat();
+ if(event.data?.type==='inline-edit'&&byId('chat-provider').value==='codex'){
+  void (async()=>{try{if(chatBusy)throw new Error('This agent is working. Wait for it to finish.');await chatAction('/chat',{message:event.data.message,provider:'codex',...event.data.focus});parent.postMessage({type:'inline-result',id:event.data.id},location.origin);}catch(error){parent.postMessage({type:'inline-result',id:event.data.id,error:error.message},location.origin);}})();
+ }
+
 });
 parent.postMessage({type:'agent-ready'},location.origin);
 let chatRequest=0,chatBusy=false,lastMessages='';
@@ -316,8 +476,9 @@ Choose foreground and actual background colors together. Explicitly set readable
 //#region src/terminal.ts
 const REQUEST_LIMIT = 128e3;
 /** A real interactive Claude session, shared across reloads of its owning tab. */
-function createTerminal(entry, busy = () => false, base = "", verify = async () => null) {
+function createTerminal(entry, busy = () => false, base = "", verify = async () => null, review) {
 	let repairs = 0;
+	let working = false;
 	let process;
 	let owner = "";
 	let output = "";
@@ -387,13 +548,34 @@ function createTerminal(entry, busy = () => false, base = "", verify = async ()
 						reason: `The actual preview build failed. Repair the source before finishing (attempt ${repairs}/3). Preserve unrelated edits, inspect the installed DSL exports and local components before changing imports. Do not hide the error or remove requested content. No Raw is needed for lists or an agenda: use Text paragraphs/bullets or mapped Text rows. Build error:\n${error.slice(0, 16e3)}`
 					});
 				} else {
-					status = error ? "Preview still has errors after 3 repair attempts." : "Preview build verified";
+					if (!error && review) try {
+						const visual = await review.next();
+						if (closing || stopping || !process) {
+							json(200, {});
+							return;
+						}
+						if (visual) {
+							status = "Reviewing slide screenshots…";
+							json(200, {
+								decision: "block",
+								reason: visual.prompt
+							});
+							emit("state", snapshot());
+							return;
+						}
+					} catch (cause) {
+						error = cause instanceof Error ? cause.message : String(cause);
+					}
+					working = false;
+					status = error ? "Preview verification incomplete: " + error : "Preview build verified";
 					json(200, {});
 				}
 				emit("state", snapshot());
 				return;
 			}
 			repairs = 0;
+			working = true;
+			review?.begin();
 			json(200, { hookSpecificOutput: {
 				hookEventName: "UserPromptSubmit",
 				additionalContext: `You are editing the local PowerPoint TSX project at ${resolve(entry)}.
@@ -465,7 +647,7 @@ Preview context captured with the latest terminal input: ${JSON.stringify(contex
 								type: "http",
 								url: `${origin}${base}/terminal/verify`,
 								headers: { Authorization: `Bearer ${token}` },
-								timeout: 40
+								timeout: 120
 							}] }],
 							UserPromptSubmit: [{ hooks: [{
 								type: "http",
@@ -496,16 +678,31 @@ Preview context captured with the latest terminal input: ${JSON.stringify(contex
 					});
 					completion = new Promise((done) => process.onExit(({ exitCode }) => {
 						process = void 0;
+						working = false;
 						stopping = false;
 						status = `Claude Code exited (${exitCode}). Start to open a new session.`;
 						emit("state", snapshot());
 						done();
 					}));
 				}
+			} else if (request.url === "/terminal/prompt") {
+				if (!process) throw new Error("Start Claude Code in the selected agent pane first.");
+				if (working) throw new Error("Claude Code is working. Wait for the current turn to finish.");
+				if (typeof value.message !== "string" || !value.message.trim() || value.message.length > 16e3 || [...value.message].some((character) => {
+					const code = character.charCodeAt(0);
+					return code < 32 && code !== 9 && code !== 10 || code === 127;
+				})) throw new Error("Invalid inline prompt");
+				updateFocus();
+				working = true;
+				process.write("\x1B[200~" + value.message + "\x1B[201~");
+				await new Promise((done) => setTimeout(done, 100));
+				if (!process || stopping) throw new Error("Claude Code stopped before submitting.");
+				process.write("\r");
 			} else if (request.url === "/terminal/input") {
 				if (!process) throw new Error("Start Claude Code first");
 				if (typeof value.data !== "string" || value.data.length > 32e3) throw new Error("Invalid terminal input");
 				updateFocus();
+				if (value.data.includes("")) working = false;
 				process.write(value.data);
 			} else if (request.url === "/terminal/resize") {
 				size();
@@ -540,7 +737,7 @@ const markdown = new MarkdownIt({
 });
 markdown.renderer.rules.image = (tokens, index) => markdown.utils.escapeHtml(tokens[index]?.content ?? "");
 /** One shared conversation and one editing process per dev server. */
-function createChat(entry, notify, busy = () => false, verify = async () => null) {
+function createChat(entry, notify, busy = () => false, verify = async () => null, review, reviewImages = () => []) {
 	let messages = [];
 	let provider = "codex";
 	let child;
@@ -576,7 +773,8 @@ function createChat(entry, notify, busy = () => false, verify = async () => null
 		killTimer = setTimeout(() => kill("SIGKILL"), 2e3);
 		notify();
 	}
-	function start(text, selected, context, repairs = 0) {
+	function start(text, selected, context, repairs = 0, images = [], reviewing = false) {
+		if (!repairs && !reviewing) review?.begin();
 		provider = selected;
 		const user = {
 			role: "user",
@@ -605,14 +803,16 @@ Current request and preview context (JSON): ${JSON.stringify(user)}`;
 		if (messages.length > 100) messages = messages.slice(-100);
 		status = "Working…";
 		stopping = false;
-		child = spawn(selected, [
+		const args = [
 			"exec",
 			"--json",
 			"--sandbox",
 			"workspace-write",
 			"--skip-git-repo-check",
 			"-"
-		], {
+		];
+		for (const image of images) args.splice(args.length - 1, 0, "--image", image);
+		child = spawn(selected, args, {
 			cwd: dirname(resolve(entry)),
 			stdio: [
 				"pipe",
@@ -684,12 +884,25 @@ Current request and preview context (JSON): ${JSON.stringify(user)}`;
 						start(`The actual preview build failed. Repair the source and preserve unrelated work (attempt ${repairs + 1}/3). Do not remove requested content or hide the error.\n${buildError.slice(0, 16e3)}`, selected, {
 							...context,
 							buildError
-						}, repairs + 1);
+						}, repairs + 1, [], reviewing);
 						await completion;
 						done();
 						return;
 					}
-					status = stopping ? "Stopped. Saved edits remain in the preview." : buildError ? "Preview still has errors after 3 repair attempts.\n" + buildError.slice(0, 16e3) : "Done";
+					let reviewFailure = "";
+					if (!stopping && !buildError && review) try {
+						const visual = await review.next();
+						if (!stopping && visual) {
+							child = void 0;
+							start(visual.prompt, selected, context, 0, visual.images, true);
+							await completion;
+							done();
+							return;
+						}
+					} catch (error) {
+						reviewFailure = error instanceof Error ? error.message : String(error);
+					}
+					status = stopping ? "Stopped. Saved edits remain in the preview." : buildError ? "Preview still has errors after 3 repair attempts.\n" + buildError.slice(0, 16e3) : reviewFailure || "Done";
 				}
 				if (status !== "Done") append(status);
 				child = void 0;
@@ -756,7 +969,7 @@ Current request and preview context (JSON): ${JSON.stringify(user)}`;
 				return;
 			}
 			const context = focus(value.slide, value.revision);
-			start(value.message.trim(), value.provider, context);
+			start(value.message.trim(), value.provider, context, 0, reviewImages(value.message.trim()));
 			json(202, snapshot());
 		} catch (cause) {
 			json(400, { error: cause instanceof Error ? cause.message : "Invalid request" });
@@ -784,13 +997,15 @@ async function serveDeck(entry, port = 4173) {
 	let closed = false;
 	const clients = /* @__PURE__ */ new Set();
 	const sessions = /* @__PURE__ */ new Map();
+	const capturedReviews = /* @__PURE__ */ new Map();
 	function session(id) {
 		let result = sessions.get(id);
 		if (!result) {
+			const review = createVisualReviewer(resolve(entry), () => latest?.slides ?? []);
 			const chat = createChat(entry, () => {
 				for (const client of clients) client.write("data: chat\n\n");
-			}, () => terminal.isRunning(), verify);
-			const terminal = createTerminal(entry, () => chat.isRunning(), id ? "/agents/" + id : "", verify);
+			}, () => terminal.isRunning(), verify, review, (prompt) => capturedReviews.get(prompt) ?? []);
+			const terminal = createTerminal(entry, () => chat.isRunning(), id ? "/agents/" + id : "", verify, review);
 			result = {
 				chat,
 				terminal,
@@ -800,6 +1015,13 @@ async function serveDeck(entry, port = 4173) {
 		}
 		return result;
 	}
+	const textEditor = createTextEditor(resolve(entry), () => {
+		if (!latest || building || pending || timer || error) throw new Error("Wait for a successful preview build.");
+		return {
+			...latest,
+			revision
+		};
+	}, verify);
 	const server = createServer((request, response) => {
 		const host = request.headers.host;
 		if (host !== `127.0.0.1:${actualPort}` && host !== `localhost:${actualPort}`) {
@@ -807,11 +1029,45 @@ async function serveDeck(entry, port = 4173) {
 			return;
 		}
 		response.setHeader("Cache-Control", "no-store");
-		const match = request.url?.match(/^\/agents\/([\w-]{1,64})(\/(?:chat(?:\/(?:stop|reset))?|terminal\/(?:start|input|resize|stop|events|context|verify)|close))?$/);
+		const match = request.url?.match(/^\/agents\/([\w-]{1,64})(\/(?:chat(?:\/(?:stop|reset))?|terminal\/(?:start|input|prompt|resize|stop|events|context|verify)|close))?$/);
 		if (request.url?.startsWith("/agents/") && !match) {
 			response.writeHead(404).end();
 			return;
 		}
+		if (request.url === "/text-edit" || request.url === "/text-edit/undo") {
+			if (request.method !== "POST" || request.headers.origin !== `http://${host}` || request.headers["content-type"] !== "application/json") {
+				response.writeHead(403).end();
+				return;
+			}
+			(async () => {
+				let body = "";
+				request.setEncoding("utf8");
+				for await (const chunk of request) {
+					body += chunk;
+					if (Buffer.byteLength(body) > 1e5) throw new Error("Request too large");
+				}
+				const manualReview = createVisualReviewer(resolve(entry), () => latest?.slides ?? []);
+				manualReview.begin();
+				if (request.url === "/text-edit/undo") await textEditor.undo();
+				else await textEditor.edit(JSON.parse(body));
+				let review;
+				let reviewError;
+				try {
+					review = await manualReview.next();
+					if (review) {
+						capturedReviews.set(review.prompt, review.images);
+						if (capturedReviews.size > 64) capturedReviews.delete(capturedReviews.keys().next().value);
+					}
+				} catch (cause) {
+					reviewError = cause instanceof Error ? cause.message : String(cause);
+				}
+				response.writeHead(200, { "Content-Type": "application/json" }).end(JSON.stringify({
+					review,
+					reviewError
+				}));
+			})().catch((cause) => response.writeHead(400, { "Content-Type": "application/json" }).end(JSON.stringify({ error: cause instanceof Error ? cause.message : String(cause) })));
+			return;
+		}
 		const id = match?.[1] ?? "";
 		if (match) {
 			if (request.headers["sec-fetch-site"] === "cross-site" || request.headers.origin && request.headers.origin !== `http://${host}`) {
@@ -1015,7 +1271,7 @@ try {
 		if (args.length && (args.length !== 2 || !option || args[0] !== option || !args[1])) throw new Error(`Unexpected arguments: ${args.join(" ")}\n${usage}`);
 		if (command === "init") {
 			const directory = await initProject(entry);
-			console.log(`Created ${directory}\nRun npm install, then npm run dev inside that directory.`);
+			console.log(`Created ${directory}\nInside that directory, run npm install once.\nStart development: npm run dev (or npx office-pptx dev deck.tsx).`);
 		} else if (command === "inspect") console.log(JSON.stringify(await inspectTemplate(entry), null, 2));
 		else if (command === "build") {
 			const output = resolve(args[1] ?? "deck.pptx");