@office-kit/pptx-dev 0.5.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
@@ -75,6 +88,20 @@ CLI. Navigation while Claude is replying does not change that turn's context.
 Stale input is rejected with a retry message. If your Claude settings or managed
 policy disable hooks, automatic context attachment is unavailable; enable the
 preview hook in Claude Code to use it. No project settings file is rewritten.
+
+Use **Shift+Enter** to insert a newline in the embedded Claude prompt. On completion,
+the preview checks the actual deck build. Build errors are returned to Claude's
+Stop hook or to the Codex conversation for up to three repair attempts per user
+request. If repair fails, the error stays visible and the last successful preview
+is retained. Stopping the agent cancels further repair attempts.
+
+Both agents receive guidance to check text against its actual background, including
+inherited theme colors, and to use native `Text` paragraphs or mapped rows for lists
+and agendas. `Bullets` and `TableOfContents` are not built-in DSL components; define
+or import project helpers if using those names. See the
+[TSX authoring reference](../../skill/references/tsx.md#lists-and-tables-of-contents)
+for a complete agenda example. Contrast guidance still requires visual review;
+a successful build is not a visual accessibility check.
 Dependency paths are source candidates, not an exact slide-to-file mapping.
 “This slide” requests a focused patch; requests about another slide or the
 whole deck can edit other files or shared styling.
@@ -126,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='';
@@ -308,10 +468,17 @@ byId('chat-provider').onchange();
 void refreshChat();
 <\/script><script type="module" src="/terminal.js"><\/script></html>`;
 //#endregion
+//#region src/authoring-guidance.ts
+/** Shared guidance for agents editing a deck through the preview. */
+const authoringGuidance = `For lists and tables of contents, use Text paragraphs/bullets or mapped Text rows. Bullets and TableOfContents are not built-in DSL components: inspect installed exports, import existing local helpers or define them. Do not use Raw for these layouts.
+Choose foreground and actual background colors together. Explicitly set readable text colors on slides, cards, tables, chart labels and footnotes; check inherited theme styles. Aim for 4.5:1 contrast for normal text and 3:1 for large text (18pt or 14pt bold). Use a solid backing over images or gradients if needed. Inspect rendered slides; compilation alone cannot verify contrast.`;
+//#endregion
 //#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 = "") {
+function createTerminal(entry, busy = () => false, base = "", verify = async () => null, review) {
+	let repairs = 0;
+	let working = false;
 	let process;
 	let owner = "";
 	let output = "";
@@ -352,17 +519,69 @@ function createTerminal(entry, busy = () => false, base = "") {
 			response.writeHead(code, { "Content-Type": "application/json" });
 			response.end(JSON.stringify(value));
 		};
-		if (request.url === "/terminal/context") {
+		if (request.url === "/terminal/context" || request.url === "/terminal/verify") {
 			if (request.method !== "POST" || request.headers.authorization !== `Bearer ${token}`) {
 				json(403, { error: "Invalid hook credentials" });
 				return;
 			}
 			request.resume();
+			if (request.url === "/terminal/verify") {
+				if (closing || stopping || !process) {
+					json(200, {});
+					return;
+				}
+				let error;
+				try {
+					error = await verify();
+				} catch (cause) {
+					error = cause instanceof Error ? cause.message : String(cause);
+				}
+				if (closing || stopping || !process) {
+					json(200, {});
+					return;
+				}
+				if (error && repairs < 3) {
+					repairs++;
+					status = `Repairing preview (${repairs}/3)…`;
+					json(200, {
+						decision: "block",
+						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 {
+					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)}.
 Read the project's authoring instructions. Make focused source patches and preserve unrelated work.
-The preview rebuilds on save; do not start another dev server.
+The preview rebuilds on save; do not start another dev server. A Stop hook checks the actual build and returns errors for repair.
+${authoringGuidance}
 The focused slide is context, NOT a restriction. For "this slide", edit only its relevant source. For other slides or deck-wide requests, locate the relevant source or shared theme.
 Slide numbers are 1-based. Verify source before editing; dependency paths are candidates, not an exact slide-to-file mapping.
 Preview context captured with the latest terminal input: ${JSON.stringify(context)}`
@@ -423,12 +642,20 @@ Preview context captured with the latest terminal input: ${JSON.stringify(contex
 						}
 						const pty = await import("node-pty");
 						if (process || closing) throw new Error("Terminal state changed. Try again.");
-						const settings = { hooks: { UserPromptSubmit: [{ hooks: [{
-							type: "http",
-							url: `${origin}${base}/terminal/context`,
-							headers: { Authorization: `Bearer ${token}` },
-							timeout: 5
-						}] }] } };
+						const settings = { hooks: {
+							Stop: [{ hooks: [{
+								type: "http",
+								url: `${origin}${base}/terminal/verify`,
+								headers: { Authorization: `Bearer ${token}` },
+								timeout: 120
+							}] }],
+							UserPromptSubmit: [{ hooks: [{
+								type: "http",
+								url: `${origin}${base}/terminal/context`,
+								headers: { Authorization: `Bearer ${token}` },
+								timeout: 5
+							}] }]
+						} };
 						const env = { ...globalThis.process.env };
 						delete env.CLAUDECODE;
 						process = pty.spawn("claude", ["--settings", JSON.stringify(settings)], {
@@ -451,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();
@@ -495,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) {
+function createChat(entry, notify, busy = () => false, verify = async () => null, review, reviewImages = () => []) {
 	let messages = [];
 	let provider = "codex";
 	let child;
@@ -517,6 +759,10 @@ function createChat(entry, notify, busy = () => false) {
 		stopping = true;
 		status = "Stopping…";
 		const processToStop = child;
+		if (processToStop.exitCode !== null || processToStop.signalCode !== null) {
+			notify();
+			return;
+		}
 		const kill = (signal) => {
 			try {
 				if (process.platform !== "win32" && processToStop.pid) process.kill(-processToStop.pid, signal);
@@ -527,7 +773,8 @@ function createChat(entry, notify, busy = () => false) {
 		killTimer = setTimeout(() => kill("SIGKILL"), 2e3);
 		notify();
 	}
-	function start(text, selected, context) {
+	function start(text, selected, context, repairs = 0, images = [], reviewing = false) {
+		if (!repairs && !reviewing) review?.begin();
 		provider = selected;
 		const user = {
 			role: "user",
@@ -541,6 +788,7 @@ function createChat(entry, notify, busy = () => false) {
 		const prompt = `You are editing a local PowerPoint TSX project in ${dirname(resolve(entry))}.
 Read the project's authoring instructions. Make focused patches to the TSX source, preserving unrelated work.
 The preview rebuilds automatically on save; do not start another dev server.
+${authoringGuidance}
 The attached focus is context, NOT a restriction: use it for references such as "this slide". For other slides or deck-wide requests, find the relevant source or shared theme instead. Do not rewrite the whole deck for a local edit.
 Slide numbers are 1-based and refer to the last successful preview at send time. Source may have changed since then; verify it before editing. Files are dependency candidates, not an exact slide-to-source mapping.
 Respond in the user's language, briefly describing edits or answering their question. If permissions prevent an action, explain that instead of claiming success.
@@ -555,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",
@@ -616,10 +866,44 @@ Current request and preview context (JSON): ${JSON.stringify(user)}`;
 			running.on("error", (error) => {
 				failure = `Could not run ${selected}. Install it and log in from your terminal first. ${error.message}`;
 			});
-			running.on("close", (code) => {
+			running.on("close", async (code) => {
 				if (buffer.trim()) consume(buffer);
 				clearTimeout(killTimer);
 				status = stopping ? "Stopped. Saved edits remain in the preview." : failure || (code !== 0 ? stderr || `${selected} exited with code ${code}` : !sawResult ? "CLI exited without a completed result." : "Done");
+				if (status === "Done") {
+					status = "Verifying preview…";
+					notify();
+					let buildError;
+					try {
+						buildError = await verify();
+					} catch (cause) {
+						buildError = cause instanceof Error ? cause.message : String(cause);
+					}
+					if (!stopping && buildError && repairs < 3) {
+						child = void 0;
+						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, [], reviewing);
+						await completion;
+						done();
+						return;
+					}
+					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;
 				notify();
@@ -685,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" });
@@ -713,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());
-			const terminal = createTerminal(entry, () => chat.isRunning(), id ? "/agents/" + id : "");
+			}, () => terminal.isRunning(), verify, review, (prompt) => capturedReviews.get(prompt) ?? []);
+			const terminal = createTerminal(entry, () => chat.isRunning(), id ? "/agents/" + id : "", verify, review);
 			result = {
 				chat,
 				terminal,
@@ -729,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}`) {
@@ -736,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)|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}`) {
@@ -840,6 +1167,15 @@ async function serveDeck(entry, port = 4173) {
 			response.end(page);
 		} else response.writeHead(404).end();
 	});
+	async function verify() {
+		rebuild();
+		const deadline = Date.now() + 3e4;
+		while (!closed && (building || timer || pending)) {
+			if (Date.now() >= deadline) return "Preview verification timed out. Inspect the build before claiming success.";
+			await new Promise((done) => setTimeout(done, 50));
+		}
+		return closed ? "Preview server closed." : error;
+	}
 	async function rebuild() {
 		if (closed) return;
 		if (building) {
@@ -935,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");