@narumitw/pi-image-drop 0.20.1 → 0.25.0

package/README.md

@@ -1,12 +1,22 @@
 # 🖼️ pi-image-drop — Browser Image Staging for Pi
 
-[![npm](https://img.shields.io/npm/v/@narumitw/pi-image-drop)](https://www.npmjs.com/package/@narumitw/pi-image-drop) [![License: MIT](https://img.shields.io/badge/license-MIT-green.svg)](./LICENSE)
+[![npm](https://img.shields.io/npm/v/@narumitw/pi-image-drop)](https://www.npmjs.com/package/@narumitw/pi-image-drop) [![Pi extension](https://img.shields.io/badge/Pi-extension-blue)](https://pi.dev) [![License: MIT](https://img.shields.io/badge/license-MIT-green.svg)](./LICENSE)
 
 `@narumitw/pi-image-drop` adds one `/image-drop` command to the latest [Pi Coding Agent](https://pi.dev). It serves a private loopback page where you can paste, drop, choose, preview, reorder, retry, and remove local images. The ordered batch is attached to your next non-empty interactive Pi message.
 
 The page never contains a prompt or Attach button: Pi remains the only place where messages are written and sent.
 
-## Install
+## ✨ Features
+
+- Stages pasted, dropped, or selected images on a private loopback page.
+- Preserves an ordered batch for the next non-empty interactive Pi message.
+- Previews, reorders, retries, and removes images before submission.
+- Supports PNG, JPEG, WebP, GIF, BMP, TIFF, HEIC/HEIF, and AVIF input.
+- Applies orientation, strips private metadata, and enforces Pi-compatible image limits.
+- Keeps bounded sent-image history for explicit re-attachment during the live session.
+- Reports batch state above Pi's editor and can start automatically with each session.
+
+## 📦 Install
 
 ```bash
 pi install npm:@narumitw/pi-image-drop
@@ -22,19 +32,20 @@ just try image-drop
 
 This package targets the latest Pi release and uses its `agent_settled` lifecycle event. Older Pi releases are not supported.
 
-## Workflow
+## 🚀 Workflow
 
-1. Run `/image-drop` in an interactive Pi session.
-2. Pi prints and displays a clickable one-time `http://127.0.0.1:<port>/...` link. The extension does **not** open a browser.
+1. Run `/image-drop` in an interactive Pi session. You can instead set `startOnSessionStart: true` to start the service with every Pi session.
+2. Pi prints and displays a clickable one-time `http://127.0.0.1:<port>/...` link. The extension does **not** open a browser, including when session startup is enabled.
 3. Open the link. Paste images anywhere, drop files, or select **Choose images**.
 4. Review previews and processing details. Drag to reorder, use the keyboard-accessible arrow buttons, retry failures, delete individual items, or use confirmed **Clear all**.
 5. Write and submit a non-empty message in Pi. The ready images are appended after any attachments already on that message, in browser order.
+6. After Pi records that user message, the sent images move to **Previously sent**. They are not attached to later prompts unless you explicitly choose **Add again**. You can preview, re-add, delete, or clear retained images from the browser page.
 
 The `🖼️` widget above Pi's editor reports ready, uploading, error, and queued counts. Uploading or failed items block the whole batch and preserve the Pi editor text. Image-only messages are not supported.
 
-Each `/image-drop` invocation rotates the unused one-time link. A browser refresh keeps the current in-memory batch. Opening the authenticated page in another tab gives the new tab the editing lease and makes the old tab stale.
+By default, the loopback service starts lazily when you run `/image-drop`. With `startOnSessionStart: true`, it starts after each Pi session initializes and displays the link in Pi automatically. Each later `/image-drop` invocation reuses the service and rotates the unused one-time link. A browser refresh keeps the current in-memory batch and sent-image history. Opening the authenticated page in another tab gives the new tab the editing lease and makes the old tab stale. Reloading, replacing, forking, or shutting down the Pi session releases both the draft and all retained history.
 
-## Supported images
+## 🖼️ Supported images
 
 | Input | Provider-ready output |
 | --- | --- |
@@ -51,7 +62,7 @@ Detection uses file signatures, not filenames or browser MIME types. SVG, HTML,
 
 The processor applies orientation and removes EXIF (including GPS), XMP, IPTC, comments, and other sensitive metadata. It retains an ICC color profile and animated GIF timing where the output format supports them. With Pi's `images.autoResize` enabled (the default), output is reduced to fit Pi's 2,000-pixel and approximately 4.5 MiB Base64 inline limits. With it disabled, output that exceeds either limit fails visibly instead of being resized.
 
-## Configuration
+## ⚙️ Configuration
 
 Image Drop has one optional **global-only** JSON file:
 
@@ -63,36 +74,48 @@ Example:
 
 ```json
 {
+  "startOnSessionStart": true,
   "maxImages": 8,
   "maxImageBytes": 10485760,
   "maxBatchBytes": 41943040,
-  "maxImagePixels": 50000000
+  "maxImagePixels": 50000000,
+  "maxRetainedImages": 128,
+  "maxRetainedBytes": 536870912
 }
 ```
 
-| Setting | Safe default | Hard ceiling |
+| Setting | Default | Behavior |
+| --- | --- | --- |
+| `startOnSessionStart` | `false` | Start the loopback service and display a link after each Pi session initializes. This never opens a browser. |
+
+| Limit setting | Safe default | Hard ceiling |
 | --- | ---: | ---: |
 | `maxImages` | 8 | 32 |
 | `maxImageBytes` | 10 MiB | 50 MiB |
 | `maxBatchBytes` | 40 MiB | 200 MiB |
 | `maxImagePixels` | 50 megapixels | 100 megapixels |
+| `maxRetainedImages` | 128 | 256 |
+| `maxRetainedBytes` | 512 MiB | 1 GiB |
+
+`maxRetainedImages` and `maxRetainedBytes` govern how much sent history can coexist with the current draft, using combined image-count and resident-byte accounting. When either limit is reached, Image Drop removes the oldest sent-history entries first until the new draft fits. It never automatically removes the active or queued draft and does not reject a new image merely because retained history is full; the draft remains independently bounded by the batch limits above.
 
-Values are positive integer counts/bytes/pixels. `maxImageBytes` cannot exceed `maxBatchBytes`. Unknown fields, malformed JSON, invalid values, symlinks, or values above a hard ceiling cause the **whole file** to be ignored with one warning and safe defaults to be used. Values above a safe default but within a hard ceiling produce a memory/provider-limit warning.
+Limit values are positive integer counts/bytes/pixels, and `startOnSessionStart` must be a boolean. `maxImageBytes` cannot exceed `maxBatchBytes`. Unknown fields, malformed JSON, invalid values, symlinks, or values above a hard ceiling cause the **whole file** to be ignored with one warning and safe defaults to be used. Limit values above a safe default but within a hard ceiling produce a memory/provider-limit warning.
 
 At upload and submission time, the extension also re-reads Pi's documented global and trusted-project `images.autoResize` and `images.blockImages` settings. `blockImages: true` or a text-only current model blocks processing/submission without discarding the draft.
 
-## Security and privacy
+## 🔐 Security and privacy
 
 - The HTTP listener binds only to a random `127.0.0.1` port.
 - A rotating bootstrap token is exchanged once for an HttpOnly, `SameSite=Strict` session cookie, then removed from the URL.
 - Exact Host, mutation Origin, session-cookie, and active-client checks are enforced. No permissive CORS headers are sent.
 - Pages use a restrictive Content Security Policy plus no-store, no-referrer, MIME-sniffing, and frame-denial headers.
-- Raw request bodies, decoded pixels, source bytes, previews, and provider-ready bytes are bounded and stay in the Pi process memory. The extension creates no image cache or temporary image files.
-- Bytes are released after Pi records the matching user message, after Delete/Clear all, and on reload, session replacement/fork, or shutdown. Once Pi records a message, normal Pi/provider retention rules apply.
+- Raw request bodies, decoded pixels, source bytes, previews, and provider-ready bytes are bounded and stay in the Pi process memory. The extension creates no image cache, temporary image files, browser storage, or session-file entries.
+- After Pi records the matching user message, only sanitized provider-ready bytes and display metadata move to sent history; original uploaded source bytes are released. History remains available for preview and explicit re-adding until you delete it, FIFO retention limits remove it, or the Pi session reaches reload, replacement/fork, or shutdown.
+- Once Pi records a message, normal Pi/provider retention rules apply independently of deleting Image Drop's in-process history.
 
 A loopback page is local to your operating-system network namespace. Do not expose the port to a LAN or public interface.
 
-## Platforms, browsers, and remote environments
+## 🖥️ Platforms, browsers, and remote environments
 
 The supported local targets are current macOS, Windows, desktop Linux, and WSL with current stable Chrome, Edge, Firefox, or Safari where those browsers are available. Native `sharp` packages are installed for the current platform; HEVC-backed HEIC and BMP use bounded portable decoders because the patent-safe prebuilt `sharp`/libvips bundle omits them.
 
@@ -104,20 +127,21 @@ ssh -L 45678:127.0.0.1:45678 user@remote-host
 
 Then open the unchanged `http://127.0.0.1:45678/...` link locally. Image Drop does not provide a cloud relay or remote upload endpoint.
 
-## Limitations
+## 🚧 Limitations
 
 - Only `/image-drop` is registered; there is no `/image-drop clear` command.
 - A non-empty interactive Pi message is required. RPC, extension-generated, slash-command, and image-only inputs do not consume the batch.
 - All items must be ready. One uploading or failed item blocks submission until it is retried or deleted.
 - Provider aggregate request limits vary. Raising the defaults to the hard ceilings does not guarantee that a provider accepts the final multi-image request.
-- Batches are intentionally not persisted or shown as recent history.
+- Sent history exists only for the current live Pi session. It is not reconstructed from the transcript, persisted across sessions, or shared with another Pi process.
+- FIFO retention can remove the oldest sent images automatically at the configured count or memory limit; the browser displays the current usage and limit.
 
-## Package layout
+## 🗂️ Package layout
 
 ```text
 src/image-drop.ts       Pi extension entrypoint
 src/runtime.ts          Pi lifecycle and message orchestration
-src/batch.ts            in-memory batch state machine
+src/batch.ts            in-memory draft and sent-history state machine
 src/images.ts           bounded image processing
 src/server.ts           authenticated loopback HTTP/SSE server
 src/settings.ts         extension settings
@@ -125,7 +149,7 @@ src/pi-settings.ts      effective Pi image settings adapter
 src/web/                framework-free browser page
 ```
 
-## Development
+## 🧪 Development
 
 From the repository root:
 
@@ -138,7 +162,7 @@ just pack image-drop
 
 The dry-run package must contain the manifest, license, README, TypeScript sources, and static web assets, but no tests, fixtures, image bytes, or `node_modules`.
 
-## Publishing
+## 🚀 Publishing
 
 The first publication is intentionally a maintainer action:
 
@@ -147,3 +171,11 @@ npm publish --workspace @narumitw/pi-image-drop --access public
 ```
 
 `just npm-public` only changes visibility after a scoped package already exists. Do not publish from an implementation or verification run.
+
+## 🔎 Keywords
+
+Pi extension, Pi Coding Agent, browser image staging, image prompt, local image upload, metadata removal, local-first AI coding agent.
+
+## 📄 License
+
+MIT. See [`LICENSE`](./LICENSE).

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@narumitw/pi-image-drop",
-	"version": "0.20.1",
+	"version": "0.25.0",
 	"description": "Pi extension for staging browser images and attaching them to the next message.",
 	"type": "module",
 	"license": "MIT",

package/src/batch.ts

@@ -34,6 +34,13 @@ interface BatchItem extends ItemReservation {
 	error?: string;
 }
 
+interface HistoryItem {
+	id: string;
+	name: string;
+	processed: ProcessedImage;
+	processedAutoResize?: boolean;
+}
+
 export interface PublicBatchItem extends ItemReservation {
 	status: ItemStatus;
 	error?: string;
@@ -55,6 +62,39 @@ export interface PublicBatchState {
 	totalSourceBytes: number;
 }
 
+export interface PublicHistoryItem {
+	id: string;
+	name: string;
+	size: number;
+	mimeType: string;
+	width: number;
+	height: number;
+	originalWidth: number;
+	originalHeight: number;
+	sourceFormat: string;
+	outputFormat: string;
+	resized: boolean;
+	notes: string[];
+}
+
+export interface PublicHistoryState {
+	revision: number;
+	items: PublicHistoryItem[];
+	totalBytes: number;
+	maxImages: number;
+	maxBytes: number;
+}
+
+export interface HistoryRestageInput {
+	historyId: string;
+	id: string;
+}
+
+export interface HistoryRestageResult {
+	addedIds: string[];
+	duplicates: Array<{ historyId: string; existingId: string }>;
+}
+
 export interface MessageReservation {
 	id: string;
 	text: string;
@@ -77,6 +117,7 @@ export class BatchError extends Error {
 
 export class BatchStore {
 	private items: BatchItem[] = [];
+	private history: HistoryItem[] = [];
 	private revision = 0;
 	private reservation?: MessageReservation;
 	private closed = false;
@@ -107,6 +148,29 @@ export class BatchStore {
 		};
 	}
 
+	publicHistoryState(): PublicHistoryState {
+		return {
+			revision: this.revision,
+			items: this.history.map((item) => ({
+				id: item.id,
+				name: item.name,
+				size: item.processed.bytes.byteLength,
+				mimeType: item.processed.mimeType,
+				width: item.processed.width,
+				height: item.processed.height,
+				originalWidth: item.processed.originalWidth,
+				originalHeight: item.processed.originalHeight,
+				sourceFormat: item.processed.sourceFormat,
+				outputFormat: item.processed.outputFormat,
+				resized: item.processed.resized,
+				notes: [...item.processed.notes],
+			})),
+			totalBytes: this.historyBytes(),
+			maxImages: this.settings.maxRetainedImages,
+			maxBytes: this.settings.maxRetainedBytes,
+		};
+	}
+
 	reserveItems(inputs: readonly ItemReservation[], expectedRevision = this.revision): number {
 		this.assertMutable(expectedRevision);
 		if (inputs.length === 0) throw new BatchError("No images supplied", "invalid");
@@ -136,6 +200,7 @@ export class BatchStore {
 			throw new BatchError("Batch exceeds the byte limit", "limit");
 		}
 		this.items.push(...inputs.map((input) => ({ ...input, status: "uploading" as const })));
+		this.evictHistoryToBudget();
 		return this.bump();
 	}
 
@@ -172,6 +237,7 @@ export class BatchStore {
 		const earlier = duplicates.find(({ index }) => index < itemIndex);
 		if (earlier) {
 			this.items = this.items.filter((candidate) => candidate.id !== id);
+			this.evictHistoryToBudget();
 			this.bump();
 			return { kind: "duplicate", existingId: earlier.candidate.id };
 		}
@@ -183,9 +249,11 @@ export class BatchStore {
 		if (duplicates.length > 0) {
 			const laterIds = new Set(duplicates.map(({ candidate }) => candidate.id));
 			this.items = this.items.filter((candidate) => !laterIds.has(candidate.id));
+			this.evictHistoryToBudget();
 			this.bump();
 			return { kind: "duplicate", existingId: item.id };
 		}
+		this.evictHistoryToBudget();
 		this.bump();
 		return { kind: "ready" };
 	}
@@ -323,6 +391,7 @@ export class BatchStore {
 			preflightStarted: false,
 		};
 		this.reservation = reservation;
+		this.evictHistoryToBudget();
 		this.bump();
 		return cloneReservation(reservation);
 	}
@@ -342,10 +411,101 @@ export class BatchStore {
 		return { bytes: Buffer.from(processed.bytes), mimeType: processed.mimeType };
 	}
 
+	historyPreview(id: string): { bytes: Buffer; mimeType: string } {
+		this.assertOpen();
+		const processed = this.historyItem(id).processed;
+		return { bytes: Buffer.from(processed.bytes), mimeType: processed.mimeType };
+	}
+
+	restageHistory(
+		inputs: readonly HistoryRestageInput[],
+		expectedRevision = this.revision,
+	): HistoryRestageResult {
+		this.assertMutable(expectedRevision);
+		if (inputs.length === 0) throw new BatchError("No history images supplied", "invalid");
+		if (new Set(inputs.map((input) => input.historyId)).size !== inputs.length) {
+			throw new BatchError("History selection contains duplicates", "invalid");
+		}
+		const draftIds = new Set(this.items.map((item) => item.id));
+		const draftHashes = new Map(
+			this.items.flatMap((item) =>
+				item.processed ? [[item.processed.hash, item.id] as const] : [],
+			),
+		);
+		const additions: BatchItem[] = [];
+		const duplicates: HistoryRestageResult["duplicates"] = [];
+		for (const input of inputs) {
+			if (!isSafeIdentifier(input.id) || draftIds.has(input.id)) {
+				throw new BatchError("Image id is invalid or duplicated", "invalid");
+			}
+			draftIds.add(input.id);
+			const history = this.historyItem(input.historyId);
+			const existingId = draftHashes.get(history.processed.hash);
+			if (existingId) {
+				duplicates.push({ historyId: input.historyId, existingId });
+				continue;
+			}
+			const processed = cloneProcessed(history.processed);
+			additions.push({
+				id: input.id,
+				name: history.name,
+				size: processed.bytes.byteLength,
+				status: "ready",
+				source: Buffer.from(processed.bytes),
+				processed,
+				processedAutoResize: history.processedAutoResize,
+			});
+			draftHashes.set(processed.hash, input.id);
+		}
+		if (this.items.length + additions.length > this.settings.maxImages) {
+			throw new BatchError("Batch exceeds the image-count limit", "limit");
+		}
+		const currentBytes = this.items.reduce((sum, item) => sum + item.size, 0);
+		const addedBytes = additions.reduce((sum, item) => sum + item.size, 0);
+		if (currentBytes + addedBytes > this.settings.maxBatchBytes) {
+			throw new BatchError("Batch exceeds the byte limit", "limit");
+		}
+		if (additions.length > 0) {
+			this.items.push(...additions);
+			this.evictHistoryToBudget();
+			this.bump();
+		}
+		return { addedIds: additions.map((item) => item.id), duplicates };
+	}
+
+	deleteHistory(id: string, expectedRevision = this.revision): number {
+		this.assertHistoryMutation(expectedRevision);
+		const before = this.history.length;
+		this.history = this.history.filter((item) => item.id !== id);
+		if (this.history.length === before)
+			throw new BatchError("History image not found", "not-found");
+		return this.bump();
+	}
+
+	clearHistory(expectedRevision = this.revision): number {
+		this.assertHistoryMutation(expectedRevision);
+		if (this.history.length === 0) return this.revision;
+		this.history = [];
+		return this.bump();
+	}
+
 	commitReservation(digest: string): boolean {
 		if (!this.reservation || this.reservation.digest !== digest) return false;
+		for (const [index, item] of this.items.entries()) {
+			if (!item.processed) continue;
+			this.history = this.history.filter(
+				(history) => history.processed.hash !== item.processed?.hash,
+			);
+			this.history.push({
+				id: historyId(this.revision, index, item.processed.hash),
+				name: item.name,
+				processed: cloneProcessed(item.processed),
+				processedAutoResize: item.processedAutoResize,
+			});
+		}
 		this.reservation = undefined;
 		this.items = [];
+		this.evictHistoryToBudget();
 		this.bump();
 		return true;
 	}
@@ -363,6 +523,7 @@ export class BatchStore {
 		this.closed = true;
 		this.reservation = undefined;
 		this.items = [];
+		this.history = [];
 		this.bump();
 	}
 
@@ -380,8 +541,12 @@ export class BatchStore {
 	}
 
 	private assertMutable(expectedRevision: number): void {
-		this.assertOpen();
+		this.assertHistoryMutation(expectedRevision);
 		if (this.reservation) throw new BatchError("Batch is frozen", "frozen");
+	}
+
+	private assertHistoryMutation(expectedRevision: number): void {
+		this.assertOpen();
 		if (expectedRevision !== this.revision)
 			throw new BatchError("Batch revision is stale", "stale");
 	}
@@ -392,6 +557,37 @@ export class BatchStore {
 		return item;
 	}
 
+	private historyItem(id: string): HistoryItem {
+		const item = this.history.find((candidate) => candidate.id === id);
+		if (!item) throw new BatchError("History image not found", "not-found");
+		return item;
+	}
+
+	private historyBytes(): number {
+		return this.history.reduce((sum, item) => sum + item.processed.bytes.byteLength, 0);
+	}
+
+	private draftResidentBytes(): number {
+		const itemBytes = this.items.reduce(
+			(sum, item) =>
+				sum + (item.source?.byteLength ?? item.size) + (item.processed?.bytes.byteLength ?? 0),
+			0,
+		);
+		const queuedBase64Bytes =
+			this.reservation?.images.reduce((sum, image) => sum + Buffer.byteLength(image.data), 0) ?? 0;
+		return itemBytes + queuedBase64Bytes;
+	}
+
+	private evictHistoryToBudget(): void {
+		while (
+			this.history.length > 0 &&
+			(this.history.length + this.items.length > this.settings.maxRetainedImages ||
+				this.historyBytes() + this.draftResidentBytes() > this.settings.maxRetainedBytes)
+		) {
+			this.history.shift();
+		}
+	}
+
 	private bump(): number {
 		this.revision += 1;
 		return this.revision;
@@ -439,6 +635,13 @@ function isSafeIdentifier(id: string): boolean {
 	return /^[A-Za-z0-9_-]{1,80}$/.test(id);
 }
 
+function historyId(revision: number, index: number, hash: string): string {
+	return createHash("sha256")
+		.update(`history\0${revision}\0${index}\0${hash}`)
+		.digest("hex")
+		.slice(0, 24);
+}
+
 function cryptoId(revision: number, images: readonly ImageContent[]): string {
 	return createHash("sha256")
 		.update(`${revision}\0${Date.now()}\0${digestImages(images)}`)

package/src/runtime.ts

@@ -63,14 +63,7 @@ export class ImageDropRuntime {
 				this.context = ctx;
 				await this.recoverOrphanedReservation(ctx);
 				try {
-					const server = await this.ensureServer(ctx);
-					const link = server.issueLink();
-					if (this.batch?.publicState().phase === "empty") {
-						ctx.ui.setWidget(WIDGET_KEY, [`🖼️ Image Drop: ${link}`]);
-					} else {
-						this.updateWidget(ctx);
-					}
-					ctx.ui.notify(`Image Drop: ${link}`, "info");
+					await this.presentLink(ctx);
 				} catch (error) {
 					ctx.ui.notify(`Image Drop could not start: ${formatError(error)}`, "error");
 				}
@@ -110,6 +103,13 @@ export class ImageDropRuntime {
 			ctx.ui.notify(warning ?? "Image Drop settings ignored.", "warning");
 		}
 		this.updateWidget(ctx);
+		if (!result.settings.startOnSessionStart) return;
+		try {
+			await this.presentLink(ctx);
+		} catch (error) {
+			if (generation !== this.generation || this.closed) return;
+			ctx.ui.notify(`Image Drop could not start: ${formatError(error)}`, "error");
+		}
 	}
 
 	async shutdown(ctx: ExtensionContext): Promise<void> {
@@ -259,6 +259,17 @@ export class ImageDropRuntime {
 		return true;
 	}
 
+	private async presentLink(ctx: ExtensionContext): Promise<void> {
+		const server = await this.ensureServer(ctx);
+		const link = server.issueLink();
+		if (this.batch?.publicState().phase === "empty") {
+			ctx.ui.setWidget(WIDGET_KEY, [`🖼️ Image Drop: ${link}`]);
+		} else {
+			this.updateWidget(ctx);
+		}
+		ctx.ui.notify(`Image Drop: ${link}`, "info");
+	}
+
 	private async ensureServer(ctx: ExtensionContext): Promise<ServerControl> {
 		if (this.closed || !this.batch || !this.settings || !this.processor) {
 			throw new Error("the Pi session is not ready");

package/src/server.ts

@@ -176,9 +176,15 @@ export class ImageDropServer {
 			const previewMatch = /^\/api\/items\/([A-Za-z0-9_-]{1,80})\/preview$/.exec(url.pathname);
 			if (request.method === "GET" && previewMatch) {
 				const preview = this.options.batch.preview(previewMatch[1] as string);
-				response.setHeader("Content-Type", preview.mimeType);
-				response.setHeader("Content-Length", preview.bytes.byteLength);
-				response.writeHead(200).end(preview.bytes);
+				this.image(response, preview);
+				return;
+			}
+			const historyPreviewMatch = /^\/api\/history\/([A-Za-z0-9_-]{1,80})\/preview$/.exec(
+				url.pathname,
+			);
+			if (request.method === "GET" && historyPreviewMatch) {
+				const preview = this.options.batch.historyPreview(historyPreviewMatch[1] as string);
+				this.image(response, preview);
 				return;
 			}
 			if (request.method === "POST" && url.pathname === "/api/lease") {
@@ -195,6 +201,31 @@ export class ImageDropServer {
 			}
 			this.assertMutation(request);
 			const lease = this.assertActiveClient(request);
+			if (request.method === "POST" && url.pathname === "/api/history/restage") {
+				const body = await readJson(request, JSON_LIMIT);
+				this.assertLease(lease);
+				const items = arrayField(body, "items").map((item) => {
+					if (!isRecord(item)) throw new HttpError(400, "Invalid history restage item");
+					return { historyId: stringField(item, "historyId"), id: stringField(item, "id") };
+				});
+				const restage = this.options.batch.restageHistory(items, integerField(body, "revision"));
+				this.broadcastState();
+				this.json(response, 200, { ...this.statePayload(), restage });
+				return;
+			}
+			const historyMatch = /^\/api\/history\/([A-Za-z0-9_-]{1,80})$/.exec(url.pathname);
+			if (request.method === "DELETE" && historyMatch) {
+				this.options.batch.deleteHistory(historyMatch[1] as string, queryInteger(url, "revision"));
+				this.respondWithState(response);
+				return;
+			}
+			if (request.method === "POST" && url.pathname === "/api/history/clear") {
+				const body = await readJson(request, JSON_LIMIT);
+				this.assertLease(lease);
+				this.options.batch.clearHistory(integerField(body, "revision"));
+				this.respondWithState(response);
+				return;
+			}
 			if (request.method === "POST" && url.pathname === "/api/items") {
 				const body = await readJson(request, JSON_LIMIT);
 				this.assertLease(lease);
@@ -406,9 +437,16 @@ export class ImageDropServer {
 			cwd: this.options.cwd,
 			activeClientId: this.activeClientId,
 			batch: this.options.batch.publicState(),
+			history: this.options.batch.publicHistoryState(),
 		};
 	}
 
+	private image(response: ServerResponse, image: { bytes: Buffer; mimeType: string }): void {
+		response.setHeader("Content-Type", image.mimeType);
+		response.setHeader("Content-Length", image.bytes.byteLength);
+		response.writeHead(200).end(image.bytes);
+	}
+
 	private respondWithState(response: ServerResponse): void {
 		this.broadcastState();
 		this.json(response, 200, this.statePayload());

package/src/settings.ts

@@ -5,11 +5,17 @@ import { getAgentDir } from "@earendil-works/pi-coding-agent";
 export const SETTINGS_FILE = "pi-image-drop.json";
 const MIB = 1024 * 1024;
 
-export interface ImageDropSettings {
+export interface ImageDropLimits {
 	maxImages: number;
 	maxImageBytes: number;
 	maxBatchBytes: number;
 	maxImagePixels: number;
+	maxRetainedImages: number;
+	maxRetainedBytes: number;
+}
+
+export interface ImageDropSettings extends ImageDropLimits {
+	startOnSessionStart: boolean;
 }
 
 export const DEFAULT_SETTINGS: Readonly<ImageDropSettings> = Object.freeze({
@@ -17,21 +23,29 @@ export const DEFAULT_SETTINGS: Readonly<ImageDropSettings> = Object.freeze({
 	maxImageBytes: 10 * MIB,
 	maxBatchBytes: 40 * MIB,
 	maxImagePixels: 50_000_000,
+	maxRetainedImages: 128,
+	maxRetainedBytes: 512 * MIB,
+	startOnSessionStart: false,
 });
 
-export const HARD_LIMITS: Readonly<ImageDropSettings> = Object.freeze({
+export const HARD_LIMITS: Readonly<ImageDropLimits> = Object.freeze({
 	maxImages: 32,
 	maxImageBytes: 50 * MIB,
 	maxBatchBytes: 200 * MIB,
 	maxImagePixels: 100_000_000,
+	maxRetainedImages: 256,
+	maxRetainedBytes: 1024 * MIB,
 });
 
-const SETTING_KEYS = new Set<keyof ImageDropSettings>([
+const LIMIT_KEYS = new Set<keyof ImageDropLimits>([
 	"maxImages",
 	"maxImageBytes",
 	"maxBatchBytes",
 	"maxImagePixels",
+	"maxRetainedImages",
+	"maxRetainedBytes",
 ]);
+const SETTING_KEYS = new Set<keyof ImageDropSettings>([...LIMIT_KEYS, "startOnSessionStart"]);
 
 export type SettingsLoadResult =
 	| { kind: "missing"; settings: ImageDropSettings }
@@ -43,7 +57,7 @@ export function normalizeSettings(value: unknown): ImageDropSettings | undefined
 		return undefined;
 	}
 	const settings: ImageDropSettings = { ...DEFAULT_SETTINGS };
-	for (const key of SETTING_KEYS) {
+	for (const key of LIMIT_KEYS) {
 		if (!Object.hasOwn(value, key)) continue;
 		const candidate = Reflect.get(value, key);
 		if (
@@ -56,6 +70,10 @@ export function normalizeSettings(value: unknown): ImageDropSettings | undefined
 		}
 		settings[key] = candidate;
 	}
+	if (Object.hasOwn(value, "startOnSessionStart")) {
+		if (typeof value.startOnSessionStart !== "boolean") return undefined;
+		settings.startOnSessionStart = value.startOnSessionStart;
+	}
 	if (settings.maxImageBytes > settings.maxBatchBytes) return undefined;
 	return settings;
 }
@@ -79,15 +97,13 @@ export async function loadSettings(
 	try {
 		const settings = normalizeSettings(JSON.parse(text) as unknown);
 		if (!settings) return invalid(path, "invalid settings shape or value");
-		const raised = (Object.keys(DEFAULT_SETTINGS) as Array<keyof ImageDropSettings>).filter(
-			(key) => settings[key] > DEFAULT_SETTINGS[key],
-		);
+		const raised = [...LIMIT_KEYS].filter((key) => settings[key] > DEFAULT_SETTINGS[key]);
 		return {
 			kind: "loaded",
 			settings,
 			warning:
 				raised.length > 0
-					? `${SETTINGS_FILE} raises ${raised.join(", ")} above the safe defaults; large provider requests may fail.`
+					? `${SETTINGS_FILE} raises ${raised.join(", ")} above the safe defaults; memory use or provider request size may increase.`
 					: undefined,
 		};
 	} catch (error) {

package/src/web/app.js

@@ -1,11 +1,14 @@
 import {
 	attemptMutation,
 	canMutate,
+	draftPresentation,
 	formatBytes,
 	moveItem,
 	moveItemBefore,
 	preferNewestState,
 	summarizeBatch,
+	summarizeHistory,
+	visibleItemNotes,
 } from "/state.js";
 
 const $ = (selector) => document.querySelector(selector);
@@ -16,13 +19,23 @@ const ui = {
 	choose: $("#choose-files"),
 	input: $("#file-input"),
 	status: $("#status"),
+	nextStep: $("#next-step"),
 	clear: $("#clear-all"),
 	error: $("#error-banner"),
 	grid: $("#grid"),
+	historyStatus: $("#history-status"),
+	historyRetention: $("#history-retention"),
+	historyClear: $("#clear-history"),
+	historyGrid: $("#history-grid"),
 	overlay: $("#connection-overlay"),
 	connectionTitle: $("#connection-title"),
 	connectionMessage: $("#connection-message"),
 	dialog: $("#clear-dialog"),
+	historyDialog: $("#clear-history-dialog"),
+	previewDialog: $("#image-preview-dialog"),
+	previewTitle: $("#image-preview-title"),
+	previewDismiss: $("#image-preview-dismiss"),
+	previewImage: $("#image-preview"),
 };
 const clientId = crypto.randomUUID();
 const pendingFiles = new Map();
@@ -79,6 +92,20 @@ function wire() {
 	ui.dialog.addEventListener("close", () => {
 		if (ui.dialog.returnValue === "confirm") void clearAll();
 	});
+	ui.historyClear.addEventListener("click", () => {
+		ui.historyDialog.returnValue = "cancel";
+		ui.historyDialog.showModal();
+	});
+	ui.historyDialog.addEventListener("close", () => {
+		if (ui.historyDialog.returnValue === "confirm") void clearHistory();
+	});
+	ui.previewDismiss.addEventListener("click", closePreview);
+	ui.previewDialog.addEventListener("click", (event) => {
+		if (event.target === ui.previewDialog) closePreview();
+	});
+	ui.previewDialog.addEventListener("close", () => {
+		ui.previewImage.removeAttribute("src");
+	});
 }
 
 function connectEvents() {
@@ -215,6 +242,36 @@ async function clearAll() {
 	}
 }
 
+async function restageHistory(historyId) {
+	try {
+		const response = await request("/api/history/restage", {
+			method: "POST",
+			json: {
+				revision: state.batch.revision,
+				items: [{ historyId, id: crypto.randomUUID() }],
+			},
+		});
+		applyState(response);
+		clearError();
+		render();
+		const target = response.restage.addedIds[0] ?? response.restage.duplicates[0]?.existingId;
+		if (target) highlight(target);
+	} catch (error) {
+		showError(errorMessage(error));
+	}
+}
+
+async function deleteHistory(id) {
+	await mutate(`/api/history/${id}?revision=${state.batch.revision}`, { method: "DELETE" });
+}
+
+async function clearHistory() {
+	await mutate("/api/history/clear", {
+		method: "POST",
+		json: { revision: state.batch.revision },
+	});
+}
+
 async function mutate(path, options) {
 	const result = await attemptMutation(() => request(path, options));
 	if (!result.ok) {
@@ -235,14 +292,26 @@ function render() {
 		: state.projectName;
 	ui.cwd.textContent = state.cwd;
 	const summary = summarizeBatch(state.batch);
-	ui.status.textContent = `${summary.label} · ${formatBytes(summary.bytes)}`;
+	const presentation = draftPresentation(state.batch);
+	ui.status.textContent = presentation.status;
+	ui.status.hidden = presentation.status === "";
+	ui.nextStep.textContent = presentation.guidance;
 	const mutable = canMutate(state.batch);
+	ui.clear.hidden = summary.total === 0;
 	ui.clear.disabled = !mutable || summary.total === 0;
 	ui.choose.disabled = !mutable;
 	ui.input.disabled = !mutable;
 	ui.drop.classList.toggle("disabled", !mutable);
 	ui.drop.setAttribute("aria-disabled", String(!mutable));
 	ui.grid.replaceChildren(...state.batch.items.map((item, index) => card(item, index, mutable)));
+	const history = summarizeHistory(state.history);
+	ui.historyStatus.textContent = history.label;
+	ui.historyRetention.textContent = history.usage;
+	ui.historyClear.hidden = history.total === 0;
+	ui.historyClear.disabled = history.total === 0;
+	ui.historyGrid.replaceChildren(
+		...(state.history?.items ?? []).map((item, index) => historyCard(item, index, mutable)),
+	);
 }
 
 function card(item, index, mutable) {
@@ -264,14 +333,19 @@ function card(item, index, mutable) {
 		draggedId = undefined;
 	});
 
-	const preview = element("div", "preview");
+	let preview;
 	if (item.status === "ready") {
+		preview = element("button", "preview preview-button");
+		preview.type = "button";
+		preview.setAttribute("aria-label", `Enlarge preview of ${item.name}`);
+		preview.addEventListener("click", () => openPreview(item, "items"));
 		const image = document.createElement("img");
 		image.src = `/api/items/${item.id}/preview?revision=${state.batch.revision}`;
 		image.alt = `Preview of ${item.name}`;
 		image.loading = "lazy";
 		preview.append(image);
 	} else {
+		preview = element("div", "preview");
 		const placeholder = element("span", "placeholder", item.status === "error" ? "!" : "…");
 		placeholder.setAttribute("aria-hidden", "true");
 		preview.append(placeholder);
@@ -292,7 +366,7 @@ function card(item, index, mutable) {
 				`${item.sourceFormat.toUpperCase()} → ${item.outputFormat.toUpperCase()}`,
 			),
 		);
-	for (const note of item.notes ?? []) body.append(element("p", "note", note));
+	for (const note of visibleItemNotes(item.notes)) body.append(element("p", "note", note));
 	if (item.error) body.append(element("p", "item-error", item.error));
 	article.append(body);
 
@@ -307,11 +381,66 @@ function card(item, index, mutable) {
 	);
 	if (item.status === "error")
 		actions.append(button("Retry", "Retry", !mutable, () => retry(item.id)));
-	actions.append(button("Delete", "Delete", !mutable, () => remove(item.id), "delete"));
+	actions.append(
+		button("Delete", "Delete", !mutable, () => remove(item.id), "danger-secondary"),
+	);
+	article.append(actions);
+	return article;
+}
+
+function historyCard(item, index, mutable) {
+	const article = document.createElement("article");
+	article.className = "image-card history-card";
+	article.tabIndex = 0;
+	article.setAttribute("aria-label", `${index + 1}. ${item.name}, sent this session`);
+
+	const preview = element("button", "preview preview-button");
+	preview.type = "button";
+	preview.setAttribute("aria-label", `Enlarge preview of ${item.name}`);
+	preview.addEventListener("click", () => openPreview(item, "history"));
+	const image = document.createElement("img");
+	image.src = `/api/history/${item.id}/preview?revision=${state.batch.revision}`;
+	image.alt = `Preview of sent image ${item.name}`;
+	image.loading = "lazy";
+	preview.append(image);
+	article.append(preview);
+
+	const body = element("div", "card-body");
+	body.append(element("h3", "", item.name));
+	body.append(
+		element("p", "meta", `${index + 1} · ${formatBytes(item.size)} · ${item.width}×${item.height}`),
+	);
+	for (const note of visibleItemNotes(item.notes)) body.append(element("p", "note", note));
+	article.append(body);
+
+	const actions = element("div", "card-actions");
+	actions.append(
+		button("Add sent image to the next Pi message", "Add again", !mutable, () =>
+			restageHistory(item.id),
+		),
+		button(
+			"Delete sent image from session history",
+			"Delete",
+			false,
+			() => deleteHistory(item.id),
+			"danger-secondary",
+		),
+	);
 	article.append(actions);
 	return article;
 }
 
+function openPreview(item, collection) {
+	ui.previewTitle.textContent = item.name;
+	ui.previewImage.src = `/api/${collection}/${item.id}/preview?revision=${state.batch.revision}`;
+	ui.previewImage.alt = `Enlarged preview of ${item.name}`;
+	ui.previewDialog.showModal();
+}
+
+function closePreview() {
+	ui.previewDialog.close();
+}
+
 function button(label, text, disabled, action, className = "") {
 	const result = element("button", className, text);
 	result.type = "button";

package/src/web/index.html

@@ -14,8 +14,8 @@
 				<h1>Image Drop</h1>
 				<p id="session-label" class="session-label">Connecting to Pi…</p>
 			</div>
-			<details>
-				<summary>Details</summary>
+			<details class="session-details">
+				<summary>Session details</summary>
 				<dl>
 					<dt>Working directory</dt>
 					<dd id="cwd">—</dd>
@@ -27,27 +27,44 @@
 			<section id="drop-zone" class="drop-zone" aria-labelledby="drop-title">
 				<div class="drop-copy">
 					<span class="drop-icon" aria-hidden="true">🖼️</span>
-					<h2 id="drop-title">Paste or drop images anywhere</h2>
-					<p>Use Ctrl+V or Command+V, drag files here, or choose files.</p>
+					<div>
+						<h2 id="drop-title">Add images</h2>
+						<p>Paste anywhere, drop files here, or choose images.</p>
+					</div>
 					<button id="choose-files" class="primary" type="button">Choose images</button>
 					<input id="file-input" type="file" multiple accept="image/png,image/jpeg,image/webp,image/gif,image/bmp,image/tiff,image/heic,image/heif,image/avif,.bmp,.tif,.tiff,.heic,.heif,.avif" hidden />
 				</div>
 			</section>
 
-			<section class="batch" aria-labelledby="batch-title">
+			<p class="collection-note">Sensitive image metadata removed from processed images.</p>
+
+			<section class="batch draft" aria-labelledby="batch-title">
 				<div class="batch-toolbar">
 					<div>
-						<h2 id="batch-title">Next Pi message</h2>
-						<p id="status" role="status" aria-live="polite">No images staged</p>
+						<h2 id="batch-title">Ready for next message</h2>
+						<p id="status" hidden></p>
+						<p id="next-step" class="next-step" role="status" aria-live="polite">Choose images to add them to your next Pi message.</p>
 					</div>
-					<button id="clear-all" class="danger-secondary" type="button" disabled>Clear all</button>
+					<button id="clear-all" class="danger-secondary" type="button" hidden disabled>Clear all</button>
 				</div>
 				<div id="error-banner" class="banner error" role="alert" hidden></div>
 				<div id="grid" class="image-grid" aria-live="polite"></div>
 			</section>
 
+			<section class="history" aria-labelledby="history-title">
+				<header class="history-toolbar">
+					<div class="history-summary">
+						<h2 id="history-title">Previously sent</h2>
+						<p id="history-status" role="status" aria-live="polite">No images sent yet</p>
+						<p class="history-note"><span id="history-retention">0 images retained</span>. Images here are not attached again unless you choose <strong>Add again</strong>. The oldest are removed at the configured memory limit, and all are cleared when this Pi session ends.</p>
+					</div>
+					<button id="clear-history" class="danger-secondary" type="button" hidden disabled>Clear history</button>
+				</header>
+				<div id="history-grid" class="image-grid" aria-live="polite"></div>
+			</section>
+
 			<p class="privacy">
-				Images stay in this Pi process until you submit a Pi message. They are then sent to your configured model provider with that message.
+				Draft and previously sent images stay in this Pi process until removed, evicted at the retention limit, or the session ends. Sending a Pi message sends its staged images to your configured model provider; deleting local history does not retract images already sent.
 			</p>
 		</main>
 
@@ -69,6 +86,30 @@
 			</form>
 		</dialog>
 
+		<dialog id="clear-history-dialog">
+			<form method="dialog">
+				<h2>Clear sent image history?</h2>
+				<p>This releases every retained image from this Pi session. Images already sent to Pi or a model provider are unaffected.</p>
+				<div class="dialog-actions">
+					<button type="submit" value="cancel">Cancel</button>
+					<button type="submit" class="danger" value="confirm">Clear history</button>
+				</div>
+			</form>
+		</dialog>
+
+		<dialog id="image-preview-dialog" class="image-preview-dialog" aria-labelledby="image-preview-title">
+			<div class="image-preview-content">
+				<header>
+					<h2 id="image-preview-title">Image preview</h2>
+				</header>
+				<div class="image-preview-stage">
+					<button id="image-preview-dismiss" class="image-preview-dismiss" type="button" aria-label="Close enlarged image">
+						<img id="image-preview" alt="" />
+					</button>
+				</div>
+			</div>
+		</dialog>
+
 		<script type="module" src="/app.js"></script>
 	</body>
 </html>

package/src/web/state.js

@@ -13,6 +13,47 @@ export function summarizeBatch(batch) {
 	};
 }
 
+export function summarizeHistory(history) {
+	const total = (history?.items ?? []).length;
+	const bytes = Number(history?.totalBytes ?? 0);
+	const maxImages = Number(history?.maxImages ?? 0);
+	const maxBytes = Number(history?.maxBytes ?? 0);
+	return {
+		total,
+		bytes,
+		maxImages,
+		maxBytes,
+		label: total === 0 ? "No images sent yet" : `${total} ${plural(total, "image")} · ${formatBytes(bytes)}`,
+		usage: `${total}/${maxImages} images · ${formatBytes(bytes)} of ${formatBytes(maxBytes)}`,
+	};
+}
+
+const SHARED_METADATA_NOTE = "Sensitive image metadata removed";
+
+export function draftPresentation(batch) {
+	const summary = summarizeBatch(batch);
+	return {
+		status: summary.total === 0 ? "" : `${summary.label} · ${formatBytes(summary.bytes)}`,
+		guidance: draftGuidance(batch),
+	};
+}
+
+export function draftGuidance(batch) {
+	const summary = summarizeBatch(batch);
+	if (batch.phase === "closed") return "This Pi session is no longer accepting images.";
+	if (batch.phase === "reserved") {
+		return "Queued with Pi. These images will be attached when Pi sends this message.";
+	}
+	if (summary.total === 0) return "Choose images to add them to your next Pi message.";
+	if (summary.error > 0) {
+		return `Fix or delete ${summary.error} ${plural(summary.error, "image")} that ${summary.error === 1 ? "needs" : "need"} attention before sending from Pi.`;
+	}
+	if (summary.uploading > 0) {
+		return `Wait for ${summary.uploading} ${plural(summary.uploading, "image")} to finish processing before sending from Pi.`;
+	}
+	return `Return to Pi and send a non-empty message. ${summary.ready} ready ${plural(summary.ready, "image")} will be attached automatically.`;
+}
+
 export function statusLabel(phase, counts, total) {
 	if (phase === "empty" || total === 0) return "No images staged";
 	if (phase === "reserved") return `${total} ${plural(total, "image")} queued with Pi`;
@@ -22,6 +63,10 @@ export function statusLabel(phase, counts, total) {
 	return parts.join(" · ");
 }
 
+export function visibleItemNotes(notes) {
+	return Array.isArray(notes) ? notes.filter((note) => note !== SHARED_METADATA_NOTE) : [];
+}
+
 export function moveItem(ids, id, direction) {
 	const from = ids.indexOf(id);
 	if (from === -1) return [...ids];

package/src/web/styles.css

@@ -61,14 +61,17 @@ button.primary {
 button.primary:hover:not(:disabled) {
 	background: var(--accent-strong);
 }
-button.danger,
-button.delete {
+button.danger {
 	border-color: var(--danger);
 	color: white;
 	background: var(--danger);
 }
 button.danger-secondary {
+	border-color: transparent;
+	background: transparent;
 	color: var(--danger);
+}
+button.danger-secondary:hover:not(:disabled) {
 	border-color: color-mix(in srgb, var(--danger) 45%, var(--line));
 }
 
@@ -104,6 +107,9 @@ h1 {
 details {
 	max-width: min(28rem, 100%);
 }
+.session-details {
+	align-self: center;
+}
 summary {
 	min-height: 44px;
 	padding: 0.6rem;
@@ -129,14 +135,13 @@ main {
 }
 .drop-zone {
 	display: grid;
-	min-height: 260px;
+	min-height: 160px;
 	place-items: center;
 	border: 2px dashed #9da7ba;
 	border-radius: 18px;
-	padding: 2rem;
+	padding: 1.5rem 2rem;
 	background: var(--surface);
 	box-shadow: var(--shadow);
-	text-align: center;
 	transition:
 		border-color 0.15s,
 		background 0.15s,
@@ -151,21 +156,38 @@ main {
 	opacity: 0.66;
 }
 .drop-copy {
-	max-width: 36rem;
+	display: grid;
+	width: min(48rem, 100%);
+	grid-template-columns: auto minmax(0, 1fr) auto;
+	align-items: center;
+	gap: 1rem;
 }
 .drop-copy h2 {
-	margin: 0.4rem 0;
+	margin: 0;
 }
 .drop-copy p {
-	margin: 0.25rem 0 1.25rem;
+	margin: 0.15rem 0 0;
 	color: var(--muted);
 }
 .drop-icon {
-	font-size: 2.6rem;
+	font-size: 2.2rem;
 }
 
+.collection-note {
+	margin: 1rem 0 0;
+	color: var(--muted);
+	font-size: 0.9rem;
+}
 .batch {
-	margin-top: 1.5rem;
+	margin-top: 0.75rem;
+}
+.history {
+	margin-top: 2rem;
+	border-top: 1px solid var(--line);
+	padding-top: 1.5rem;
+}
+.history h2 {
+	font-size: 1.25rem;
 }
 .batch-toolbar {
 	display: flex;
@@ -181,6 +203,37 @@ main {
 .batch-toolbar p {
 	color: var(--muted);
 }
+.batch-toolbar .next-step {
+	max-width: 48rem;
+	margin-top: 0.2rem;
+	color: var(--text);
+	font-weight: 600;
+}
+.history-toolbar {
+	display: flex;
+	align-items: start;
+	justify-content: flex-start;
+	gap: 1rem;
+	margin-bottom: 0.8rem;
+}
+.history-summary {
+	min-width: 0;
+	max-width: 58rem;
+}
+.history-summary h2,
+.history-summary p {
+	margin: 0;
+}
+.history-summary > p {
+	color: var(--muted);
+}
+.history-note {
+	margin-top: 0.35rem;
+	font-size: 0.9rem;
+}
+.history .image-card {
+	box-shadow: none;
+}
 .banner {
 	margin: 0.75rem 0;
 	border-radius: 10px;
@@ -193,7 +246,7 @@ main {
 }
 .image-grid {
 	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(min(100%, 245px), 1fr));
+	grid-template-columns: repeat(auto-fit, minmax(min(100%, 245px), 1fr));
 	gap: 1rem;
 }
 .image-card {
@@ -206,6 +259,9 @@ main {
 	background: var(--surface);
 	box-shadow: 0 4px 16px rgb(19 33 68 / 7%);
 }
+.image-card:only-child {
+	max-width: 360px;
+}
 .image-card.status-error {
 	border-color: color-mix(in srgb, var(--danger) 55%, var(--line));
 }
@@ -223,6 +279,18 @@ main {
 	height: 100%;
 	object-fit: contain;
 }
+.preview-button {
+	width: 100%;
+	min-height: 0;
+	border: 0;
+	border-radius: 0;
+	padding: 0;
+	background: var(--surface-alt);
+	cursor: zoom-in;
+}
+.preview-button:hover:not(:disabled) {
+	border-color: transparent;
+}
 .placeholder {
 	display: grid;
 	width: 3rem;
@@ -312,6 +380,67 @@ dialog {
 dialog::backdrop {
 	background: rgb(11 17 30 / 60%);
 }
+.image-preview-dialog {
+	width: min(96vw, 1400px);
+	max-width: none;
+	height: 94dvh;
+	max-height: none;
+	overflow: hidden;
+	padding: 0;
+}
+.image-preview-dialog::backdrop {
+	background: rgb(11 17 30 / 88%);
+}
+.image-preview-content {
+	display: grid;
+	height: 100%;
+	grid-template-rows: auto minmax(0, 1fr);
+}
+.image-preview-content header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 1rem;
+	border-bottom: 1px solid var(--line);
+	padding: 0.75rem 1rem;
+}
+.image-preview-content h2 {
+	margin: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	font-size: 1rem;
+}
+.image-preview-stage {
+	display: grid;
+	min-height: 0;
+	place-items: center;
+	padding: 1rem;
+	background: var(--surface-alt);
+}
+.image-preview-dismiss {
+	display: grid;
+	width: 100%;
+	height: 100%;
+	min-height: 0;
+	place-items: center;
+	border: 0;
+	border-radius: 0;
+	padding: 0;
+	background: transparent;
+	pointer-events: none;
+}
+.image-preview-dismiss:hover:not(:disabled) {
+	border-color: transparent;
+}
+.image-preview-dismiss img {
+	width: 100%;
+	height: 100%;
+	min-height: 0;
+	cursor: zoom-out;
+	object-fit: contain;
+	pointer-events: auto;
+}
 .dialog-actions {
 	display: flex;
 	justify-content: flex-end;
@@ -365,9 +494,21 @@ dialog::backdrop {
 	.drop-zone {
 		min-height: 210px;
 		padding: 1rem;
+		text-align: center;
+	}
+	.drop-copy {
+		grid-template-columns: 1fr;
+		justify-items: center;
+		gap: 0.65rem;
 	}
 	.batch-toolbar {
 		align-items: start;
+		flex-direction: column;
+		gap: 0.5rem;
+	}
+	.history-toolbar {
+		flex-direction: column;
+		gap: 0.5rem;
 	}
 	.image-grid {
 		grid-template-columns: 1fr;