@office-kit/pptx-dev 0.6.0 → 0.8.1

package/dist/cli.mjs

@@ -1,13 +1,328 @@
 #!/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, lstat, mkdir, readFile, readdir, realpath, stat, unlink, 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/history.ts
+const SNAPSHOT_LIMIT = 64 * 1024 * 1024;
+const HISTORY_LIMIT = 128 * 1024 * 1024;
+const ENTRY_LIMIT = 50;
+const ignored = new Set([
+	"node_modules",
+	".git",
+	"dist",
+	".office-kit"
+]);
+const historyFile = (name) => !name.split(sep).some((part) => ignored.has(part)) && /\.([cm]?[jt]sx?|json|css|md|ya?ml|pptx|png|jpe?g|gif|bmp|tiff?|emf|wmf|svg)$/i.test(name);
+const equal = (a, b) => a === b || !!a && !!b && a.equals(b);
+/** Session-local project history. Overlapping agent turns form one transaction. */
+async function createHistory(directory, notify = () => {}) {
+	const root = await realpath(directory);
+	let baseline = /* @__PURE__ */ new Map();
+	let initialized = false;
+	const past = [], future = [];
+	const active = /* @__PURE__ */ new Set();
+	let label = "";
+	let error = null;
+	let queue = Promise.resolve();
+	let restoring = false;
+	function serial(action) {
+		const result = queue.then(action);
+		queue = result.then(() => {}, () => {});
+		return result.catch((cause) => {
+			error = cause instanceof Error ? cause.message : String(cause);
+			throw cause;
+		}).finally(notify);
+	}
+	async function snapshot() {
+		const files = /* @__PURE__ */ new Map();
+		let bytes = 0;
+		async function visit(dir) {
+			const entries = await readdir(dir, { withFileTypes: true });
+			await Promise.all(entries.map(async (item) => {
+				if (ignored.has(item.name) || item.isSymbolicLink()) return;
+				const file = join(dir, item.name);
+				if (item.isDirectory()) return visit(file);
+				if (!item.isFile() || !historyFile(file)) return;
+				const info = await lstat(file);
+				bytes += info.size;
+				if (bytes > SNAPSHOT_LIMIT) throw new Error("Undo history exceeds 64 MiB of project source/assets. Move unused assets outside the deck folder.");
+				if (info.isSymbolicLink() || await realpath(file) !== file) throw new Error("Project paths changed while recording history. Try again.");
+				const content = await readFile(file);
+				files.set(relative(root, file), content);
+			}));
+		}
+		await visit(root);
+		return files;
+	}
+	function record(next, description) {
+		if (!initialized) {
+			baseline = next;
+			initialized = true;
+			error = null;
+			return;
+		}
+		const changes = [];
+		for (const file of new Set([...baseline.keys(), ...next.keys()])) {
+			const before = baseline.get(file), after = next.get(file);
+			if (!equal(before, after)) changes.push({
+				file,
+				before,
+				after
+			});
+		}
+		if (changes.length) {
+			past.push({
+				label: description,
+				changes
+			});
+			future.length = 0;
+			const size = () => past.reduce((sum, item) => sum + item.changes.reduce((n, change) => n + (change.before?.length ?? 0) + (change.after?.length ?? 0), 0), 0);
+			while (past.length > ENTRY_LIMIT || past.length > 1 && size() > HISTORY_LIMIT) past.shift();
+		}
+		baseline = next;
+		error = null;
+	}
+	async function contents(file) {
+		const path = join(root, file);
+		let parent = dirname(path);
+		while (true) try {
+			if (await realpath(parent) !== parent) throw new Error("Undo refused: a project directory is now a symbolic link.");
+			break;
+		} catch (cause) {
+			if (cause.code !== "ENOENT") throw cause;
+			parent = dirname(parent);
+		}
+		try {
+			const info = await lstat(path);
+			if (!info.isFile() || info.isSymbolicLink()) throw new Error("Undo refused: a project file changed type.");
+			return await readFile(path);
+		} catch (cause) {
+			if (cause.code === "ENOENT") return void 0;
+			throw cause;
+		}
+	}
+	async function replace(change, expected, next) {
+		if (!equal(await contents(change.file), expected)) throw new Error(`History conflict in ${change.file}. Newer changes were preserved.`);
+		const file = join(root, change.file);
+		if (next) {
+			await mkdir(dirname(file), { recursive: true });
+			await writeFile(file, next);
+		} else await unlink(file);
+	}
+	try {
+		record(await snapshot(), "Initial state");
+	} catch (cause) {
+		error = cause instanceof Error ? cause.message : String(cause);
+	}
+	return {
+		state: () => ({
+			undo: past.at(-1)?.label ?? null,
+			redo: future.at(-1)?.label ?? null,
+			busy: active.size > 0 || restoring,
+			error
+		}),
+		capture: () => serial(async () => {
+			if (!active.size && !restoring) record(await snapshot(), "Source edit");
+		}),
+		begin: (id, description) => serial(async () => {
+			if (active.has(id)) return;
+			if (!active.size) {
+				record(await snapshot(), "Source edit");
+				label = description;
+			} else label = "Concurrent edits";
+			active.add(id);
+		}),
+		end: (id) => serial(async () => {
+			if (!active.delete(id) || active.size) return;
+			record(await snapshot(), label);
+		}),
+		move: (direction) => serial(async () => {
+			if (active.size) throw new Error("Wait for all agents and text edits to finish before using Undo or Redo.");
+			record(await snapshot(), "Source edit");
+			const from = direction === "undo" ? past : future;
+			const to = direction === "undo" ? future : past;
+			const item = from.at(-1);
+			if (!item) throw new Error(`Nothing to ${direction}.`);
+			const before = (c) => direction === "undo" ? c.after : c.before;
+			const after = (c) => direction === "undo" ? c.before : c.after;
+			const applied = [];
+			restoring = true;
+			try {
+				await Promise.all(item.changes.map(async (change) => {
+					if (!equal(await contents(change.file), before(change))) throw new Error(`History conflict in ${change.file}. Newer changes were preserved.`);
+				}));
+				for (const change of item.changes) {
+					await replace(change, before(change), after(change));
+					applied.push(change);
+				}
+				for (const change of item.changes) {
+					const content = after(change);
+					if (content) baseline.set(change.file, content);
+					else baseline.delete(change.file);
+				}
+				from.pop();
+				to.push(item);
+				error = null;
+			} catch (cause) {
+				const failures = [];
+				for (const change of applied.reverse()) try {
+					await replace(change, after(change), before(change));
+				} catch (rollback) {
+					failures.push(String(rollback));
+				}
+				if (failures.length) throw new Error(`${String(cause)}; rollback incomplete: ${failures.join("; ")}`);
+				throw cause;
+			} finally {
+				restoring = false;
+			}
+		})
+	};
+}
+//#endregion
+//#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;
+	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.");
+			} catch (error) {
+				await restore(change);
+				await verify();
+				throw error;
+			}
+		} 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 +392,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{align-items:center;flex-wrap:wrap}.slide-edit-tools span{font-size:11px;color:#625873;flex:1}.slide-edit-tools small{font-size:11px;color:#634396}.slide-hover{position:fixed;border:1px solid #b094ff;pointer-events:none;z-index:19;border-radius:2px}.slide-text-input{position:fixed;z-index:22;resize:none;background:#202438;color:#fff;border:2px solid #b094ff;border-radius:3px;padding:0;box-shadow:0 0 0 3px #b094ff30;line-height:1.15}.slide-text-input[hidden],.slide-hover[hidden]{display:none}.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 +404,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;
@@ -236,7 +553,7 @@ async function refresh(){
   catch{if(id===refreshId)byId('status').textContent='Reconnecting…';}
 }
 byId('toggle-chat').onclick=()=>{const hidden=document.body.classList.toggle('chat-hidden');byId('toggle-chat').setAttribute('aria-expanded',String(!hidden));resize();};
-const events=new EventSource('/events');events.onmessage=event=>{if(event.data==='chat'){window.dispatchEvent(new Event('agent-chat'));return;}if(event.data==='ready'){delete state.revision;}void refresh();};events.onerror=()=>{byId('status').textContent='Reconnecting…'};refresh();
+const events=new EventSource('/events');events.onmessage=event=>{if(event.data==='history'){window.dispatchEvent(new Event('agent-history'));return;}if(event.data==='chat'){window.dispatchEvent(new Event('agent-chat'));return;}if(event.data==='ready'){delete state.revision;}void refresh();};events.onerror=()=>{byId('status').textContent='Reconnecting…'};refresh();
 <\/script><script type="module" src="/terminal.js"><\/script></html>`;
 //#endregion
 //#region src/agent-page.ts
@@ -257,6 +574,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 +637,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, history) {
 	let repairs = 0;
+	let working = false;
 	let process;
 	let owner = "";
 	let output = "";
@@ -387,13 +709,45 @@ 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);
+					}
+					try {
+						await history?.end();
+					} catch (cause) {
+						error = "History: " + String(cause);
+					}
+					working = false;
+					status = error ? "Preview verification incomplete: " + error : "Preview build verified";
 					json(200, {});
 				}
 				emit("state", snapshot());
 				return;
 			}
+			try {
+				await history?.begin();
+			} catch (cause) {
+				json(409, { error: String(cause) });
+				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 +819,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",
@@ -494,19 +848,53 @@ Preview context captured with the latest terminal input: ${JSON.stringify(contex
 						output = (output + data).slice(-2e6);
 						emit("output", data);
 					});
-					completion = new Promise((done) => process.onExit(({ exitCode }) => {
+					completion = new Promise((done) => process.onExit(async ({ exitCode }) => {
 						process = void 0;
+						working = false;
 						stopping = false;
 						status = `Claude Code exited (${exitCode}). Start to open a new session.`;
+						try {
+							await history?.end();
+						} catch (cause) {
+							status += " History: " + String(cause);
+						}
 						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;
+				try {
+					await history?.begin();
+				} catch (cause) {
+					working = false;
+					throw cause;
+				}
+				if (!process || closing || stopping) {
+					await history?.end();
+					working = false;
+					throw new Error("Claude Code stopped before submitting.");
+				}
+				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();
 				process.write(value.data);
+				if (value.data.includes("")) {
+					working = false;
+					await history?.end();
+				}
 			} else if (request.url === "/terminal/resize") {
 				size();
 				process?.resize(value.cols, value.rows);
@@ -540,7 +928,9 @@ 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 = () => [], history) {
+	let starting = false;
+	let closing = false;
 	let messages = [];
 	let provider = "codex";
 	let child;
@@ -554,7 +944,7 @@ function createChat(entry, notify, busy = () => false, verify = async () => null
 			...message.role === "assistant" ? { html: markdown.render(message.text) } : {}
 		})),
 		provider,
-		running: !!child,
+		running: starting || !!child,
 		status
 	});
 	function stop() {
@@ -576,14 +966,15 @@ 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",
 			text,
 			context
 		};
-		const history = messages.slice(-12).map((message) => ({
+		const conversation = messages.slice(-12).map((message) => ({
 			...message,
 			text: message.text.slice(-12e3)
 		}));
@@ -594,7 +985,7 @@ ${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.
-Recent conversation (JSON): ${JSON.stringify(history)}
+Recent conversation (JSON): ${JSON.stringify(conversation)}
 Current request and preview context (JSON): ${JSON.stringify(user)}`;
 		messages.push(user);
 		const answer = {
@@ -605,14 +996,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 +1077,30 @@ 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";
+				}
+				try {
+					await history?.end();
+				} catch (cause) {
+					status = "History: " + String(cause);
 				}
 				if (status !== "Done") append(status);
 				child = void 0;
@@ -732,7 +1143,7 @@ Current request and preview context (JSON): ${JSON.stringify(user)}`;
 				json(200, snapshot());
 				return;
 			}
-			if (child) {
+			if (child || starting || closing) {
 				json(409, { error: "An edit is already running" });
 				return;
 			}
@@ -756,7 +1167,17 @@ Current request and preview context (JSON): ${JSON.stringify(user)}`;
 				return;
 			}
 			const context = focus(value.slide, value.revision);
-			start(value.message.trim(), value.provider, context);
+			starting = true;
+			try {
+				await history?.begin();
+				if (closing) {
+					await history?.end();
+					throw new Error("Agent is closing");
+				}
+				start(value.message.trim(), value.provider, context, 0, reviewImages(value.message.trim()));
+			} finally {
+				starting = false;
+			}
 			json(202, snapshot());
 		} catch (cause) {
 			json(400, { error: cause instanceof Error ? cause.message : "Invalid request" });
@@ -764,8 +1185,9 @@ Current request and preview context (JSON): ${JSON.stringify(user)}`;
 	}
 	return {
 		handle,
-		isRunning: () => !!child,
+		isRunning: () => starting || !!child,
 		async close() {
+			closing = true;
 			stop();
 			await completion;
 		}
@@ -784,13 +1206,23 @@ async function serveDeck(entry, port = 4173) {
 	let closed = false;
 	const clients = /* @__PURE__ */ new Set();
 	const sessions = /* @__PURE__ */ new Map();
+	const history = await createHistory(dirname(resolve(entry)), () => {
+		for (const client of clients) client.write("data: history\n\n");
+	});
+	let textEdits = 0;
+	const capturedReviews = /* @__PURE__ */ new Map();
 	function session(id) {
 		let result = sessions.get(id);
 		if (!result) {
+			const review = createVisualReviewer(resolve(entry), () => latest?.slides ?? []);
+			const turnHistory = {
+				begin: () => history.begin("agent:" + id, "AI edit"),
+				end: () => history.end("agent:" + id)
+			};
 			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) ?? [], turnHistory);
+			const terminal = createTerminal(entry, () => chat.isRunning(), id ? "/agents/" + id : "", verify, review, turnHistory);
 			result = {
 				chat,
 				terminal,
@@ -800,6 +1232,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 +1246,63 @@ 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 === "/history" && request.method === "GET") {
+			response.writeHead(200, { "Content-Type": "application/json" }).end(JSON.stringify(history.state()));
+			return;
+		}
+		if (request.url === "/text-edit" || request.url === "/history/undo" || request.url === "/history/redo") {
+			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");
+				}
+				if (request.url !== "/text-edit") {
+					await history.move(request.url === "/history/undo" ? "undo" : "redo");
+					const buildError = await verify();
+					response.writeHead(200, { "Content-Type": "application/json" }).end(JSON.stringify({
+						...history.state(),
+						buildError
+					}));
+					return;
+				}
+				const manualReview = createVisualReviewer(resolve(entry), () => latest?.slides ?? []);
+				manualReview.begin();
+				const editId = "text:" + ++textEdits;
+				await history.begin(editId, "Text edit");
+				try {
+					await textEditor.edit(JSON.parse(body));
+				} finally {
+					await history.end(editId);
+				}
+				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}`) {
@@ -944,6 +1435,7 @@ async function serveDeck(entry, port = 4173) {
 			if (started === generation) error = cause instanceof Error ? cause.stack ?? cause.message : String(cause);
 		} finally {
 			building = false;
+			history.capture().catch(() => {});
 			for (const client of clients) client.write("data: updated\n\n");
 			if (pending && !timer) {
 				pending = false;
@@ -959,7 +1451,7 @@ async function serveDeck(entry, port = 4173) {
 			"dist",
 			".office-kit"
 		].includes(part))) return;
-		if (!/\.([cm]?[jt]sx?|json|pptx|png|jpe?g|gif|bmp|tiff?|emf|wmf|svg)$/i.test(filename)) return;
+		if (!historyFile(filename)) return;
 		generation++;
 		builder.cancel();
 		clearTimeout(timer);
@@ -1015,7 +1507,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");