@narumitw/pi-webui 0.21.0 → 0.25.0

package/src/web/app.js

@@ -1,15 +1,25 @@
+import { createImageDragController } from "./image-drag.js";
 import {
+	acknowledgeDraftText,
+	applyAttachments,
 	applyConversationEvent,
+	applyDraft,
+	applyImageLimits,
 	applyLease,
+	applySentImages,
 	applySnapshot,
 	busyLabel,
 	canSend,
 	completeSend,
 	deliveryNotice,
+	editDraftText,
 	failSend,
 	followLatest,
 	initialState,
 	invalidateSendAttempt,
+	moveImage,
+	moveImageAfter,
+	moveImageBefore,
 	noteUnseenUpdate,
 	prepareSend,
 	setNearBottom,
@@ -25,8 +35,27 @@ let snapshotRefresh;
 let snapshotTarget = 0;
 let transcriptFrame;
 let transcriptAnnouncement = "";
+let lastAttachmentAnnouncement = "";
 let dragDepth = 0;
 let previewReturnFocus;
+let mutatingAttachments = false;
+let draftSaveTimer;
+let draftSaveQueue = Promise.resolve();
+const retryFiles = new Map();
+const uploadProgress = new Map();
+
+const SUPPORTED_IMAGE_TYPES = new Set([
+	"image/png",
+	"image/jpeg",
+	"image/webp",
+	"image/gif",
+	"image/bmp",
+	"image/x-ms-bmp",
+	"image/tiff",
+	"image/heic",
+	"image/heif",
+	"image/avif",
+]);
 
 const ui = {
 	project: document.querySelector("#project-name"),
@@ -44,8 +73,12 @@ const ui = {
 	input: document.querySelector("#message-input"),
 	imageInput: document.querySelector("#image-input"),
 	addImages: document.querySelector('label[for="image-input"]'),
+	clearAttachments: document.querySelector("#clear-attachments"),
+	clearDialog: document.querySelector("#clear-attachments-dialog"),
+	clearMessage: document.querySelector("#clear-attachments-message"),
 	previews: document.querySelector("#image-previews"),
-	attachmentStatus: document.querySelector("#attachment-status"),
+	attachmentSummary: document.querySelector("#attachment-summary"),
+	attachmentAnnouncement: document.querySelector("#attachment-announcement"),
 	status: document.querySelector("#composer-status"),
 	error: document.querySelector("#composer-error"),
 	send: document.querySelector("#send-next"),
@@ -57,10 +90,26 @@ const ui = {
 	previewDismiss: document.querySelector("#image-preview-dismiss"),
 };
 
-const transcriptRenderer = createTranscriptRenderer({ documentRef: document, list: ui.transcript });
+const imageDrag = createImageDragController(ui.previews, {
+	isLocked: composerLocked,
+	onDrop: ({ sourceId, targetId, after }) => {
+		const images = after
+			? moveImageAfter(model.images, sourceId, targetId)
+			: moveImageBefore(model.images, sourceId, targetId);
+		void reorderImages(images, sourceId);
+	},
+});
+
+const transcriptRenderer = createTranscriptRenderer({
+	documentRef: document,
+	list: ui.transcript,
+	onReattach: (id) => void reattachSentImage(id),
+	onForget: (id) => void forgetSentImage(id),
+});
 
 ui.input.addEventListener("input", () => {
-	model = invalidateSendAttempt({ ...model, text: ui.input.value, error: "" });
+	model = editDraftText(model, ui.input.value);
+	scheduleDraftSave();
 	resizeInput();
 	renderComposer();
 });
@@ -73,6 +122,19 @@ ui.imageInput.addEventListener("change", () => {
 	void addFiles(ui.imageInput.files);
 	ui.imageInput.value = "";
 });
+ui.clearAttachments.addEventListener("click", () => {
+	if (composerLocked() || model.images.length < 2) return;
+	ui.clearDialog.returnValue = "cancel";
+	ui.clearMessage.textContent = `Remove all ${model.images.length} unsent image attachments? Message text will be kept.`;
+	ui.clearDialog.showModal();
+});
+ui.clearDialog.addEventListener("close", () => {
+	if (ui.clearDialog.returnValue !== "confirm") {
+		requestAnimationFrame(() => ui.clearAttachments.focus());
+		return;
+	}
+	void clearAttachments();
+});
 ui.input.addEventListener("keydown", (event) => {
 	if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
 		event.preventDefault();
@@ -95,9 +157,7 @@ window.addEventListener(
 	{ passive: true },
 );
 document.addEventListener("paste", (event) => {
-	const files = [...(event.clipboardData?.files ?? [])].filter((file) =>
-		file.type.startsWith("image/"),
-	);
+	const files = [...(event.clipboardData?.files ?? [])].filter(isSupportedImageFile);
 	if (files.length === 0 || composerLocked()) return;
 	event.preventDefault();
 	void addFiles(files);
@@ -119,9 +179,7 @@ ui.composer.addEventListener("dragleave", () => {
 ui.composer.addEventListener("drop", (event) => {
 	dragDepth = 0;
 	ui.composer.classList.remove("drag-active");
-	const files = [...(event.dataTransfer?.files ?? [])].filter((file) =>
-		file.type.startsWith("image/"),
-	);
+	const files = [...(event.dataTransfer?.files ?? [])].filter(isSupportedImageFile);
 	if (files.length === 0 || composerLocked()) return;
 	event.preventDefault();
 	void addFiles(files);
@@ -130,6 +188,7 @@ ui.previewClose.addEventListener("click", () => ui.previewDialog.close());
 ui.previewDismiss.addEventListener("click", () => ui.previewDialog.close());
 ui.previewDialog.addEventListener("close", () => {
 	ui.previewImage.removeAttribute("src");
+	delete ui.previewImage.dataset.imageId;
 	ui.previewImage.alt = "";
 	if (previewReturnFocus?.isConnected) previewReturnFocus.focus();
 	previewReturnFocus = undefined;
@@ -178,6 +237,7 @@ async function claimLease() {
 	});
 	if (!response.ok) throw new Error(await responseError(response));
 	model = applyLease(model, await response.json(), clientId, true);
+	if (model.textDirty) scheduleDraftSave();
 	render();
 }
 
@@ -188,6 +248,7 @@ function connectEvents() {
 	events.addEventListener("open", () => {
 		reconnectDelay = 500;
 		model = { ...model, connected: true, error: "" };
+		if (model.textDirty) scheduleDraftSave();
 		render();
 	});
 	events.addEventListener("conversation", (event) => {
@@ -210,6 +271,22 @@ function connectEvents() {
 		model = applyLease(model, JSON.parse(event.data), clientId);
 		render();
 	});
+	events.addEventListener("draft", (event) => {
+		model = applyDraft(model, JSON.parse(event.data));
+		renderComposer();
+	});
+	events.addEventListener("attachments", (event) => {
+		model = applyAttachments(model, JSON.parse(event.data));
+		render();
+	});
+	events.addEventListener("image-limits", (event) => {
+		model = applyImageLimits(model, JSON.parse(event.data));
+		renderComposer();
+	});
+	events.addEventListener("sent-images", (event) => {
+		model = applySentImages(model, JSON.parse(event.data));
+		render({ updateKey: "sent-images" });
+	});
 	events.addEventListener("session-ended", () => {
 		model = { ...model, closed: true, activity: "ended", connected: false };
 		events?.close();
@@ -246,15 +323,22 @@ function connectionFailure(error) {
 }
 
 async function send(steer) {
-	if (!canSend(model)) return;
+	if (composerLocked() || !canSend(model)) return;
+	try {
+		await flushDraftText();
+	} catch (error) {
+		model = { ...model, error: errorMessage(error) };
+		render();
+		return;
+	}
+	if (composerLocked() || !canSend(model) || model.textDirty) return;
 	const prepared = prepareSend(model, crypto.randomUUID(), steer ? "steer" : "next");
 	const attempt = prepared.attempt;
 	model = prepared.state;
 	renderComposer();
 	const payload = {
 		requestId: attempt.requestId,
-		text: attempt.text,
-		images: attempt.images.map(({ name, mimeType, data }) => ({ name, mimeType, data })),
+		draftRevision: attempt.draftRevision,
 		delivery: attempt.delivery,
 	};
 	try {
@@ -269,10 +353,13 @@ async function send(steer) {
 			throw new Error(message);
 		}
 		const accepted = await response.json();
-		for (const image of attempt.images) URL.revokeObjectURL(image.previewUrl);
-		if (attempt.images.some((image) => image.previewUrl === ui.previewImage.src)) {
+		if (accepted.draft) model = applyDraft(model, accepted.draft);
+		if (accepted.attachments) model = applyAttachments(model, accepted.attachments);
+		if (accepted.sentImages) model = applySentImages(model, accepted.sentImages);
+		if (attempt.attachmentIds.includes(ui.previewImage.dataset.imageId)) {
 			ui.previewDialog.close();
 		}
+		for (const id of attempt.attachmentIds) retryFiles.delete(id);
 		model = completeSend(model, attempt, accepted.delivery);
 		render();
 		ui.input.focus();
@@ -283,94 +370,350 @@ async function send(steer) {
 }
 
 async function addFiles(fileList) {
-	if (composerLocked()) return;
-	const supported = new Set(["image/png", "image/jpeg", "image/webp", "image/gif"]);
+	if (composerLocked() || model.readingImages > 0) return;
 	const files = [...(fileList ?? [])];
-	if (model.images.length + files.length > 8) {
-		model = { ...model, error: "You can attach at most 8 images." };
+	if (files.length === 0) return;
+	const limits = model.imageLimits;
+	if (!limits) {
+		model = { ...model, error: "Effective image limits are still loading." };
+		render();
+		return;
+	}
+	if (model.images.length + files.length > limits.maxImages) {
+		model = { ...model, error: `You can attach at most ${limits.maxImages} images.` };
 		render();
 		return;
 	}
-	model = { ...model, readingImages: model.readingImages + 1 };
+	for (const file of files) {
+		if (!isSupportedImageFile(file)) {
+			model = { ...model, error: `${file.name || "Image"} is not a supported image.` };
+			render();
+			return;
+		}
+		if (file.size > limits.maxImageBytes) {
+			model = {
+				...model,
+				error: `${file.name || "Image"} is larger than ${formatMib(limits.maxImageBytes)}.`,
+			};
+			render();
+			return;
+		}
+	}
+	const batchBytes =
+		model.images.reduce((total, image) => total + (image.size ?? 0), 0) +
+		files.reduce((total, file) => total + file.size, 0);
+	if (batchBytes > limits.maxBatchBytes) {
+		model = {
+			...model,
+			error: `Combined image input is larger than ${formatMib(limits.maxBatchBytes)}.`,
+		};
+		render();
+		return;
+	}
+	const pending = files.map((file) => ({ id: crypto.randomUUID(), file }));
+	try {
+		mutatingAttachments = true;
+		renderComposer();
+		const response = await attachmentMutation("/api/attachments/reserve", {
+			method: "POST",
+			body: JSON.stringify({
+				revision: model.attachmentRevision,
+				items: pending.map(({ id, file }) => ({
+					id,
+					name: file.name || "Pasted image",
+					size: file.size,
+					mimeType: file.type,
+				})),
+			}),
+		});
+		model = applyAttachments(model, response);
+		for (const { id, file } of pending) retryFiles.set(id, file);
+		render();
+		for (const { id, file } of pending) await uploadFile(id, file);
+	} catch (error) {
+		model = { ...model, error: errorMessage(error) };
+		render();
+	} finally {
+		mutatingAttachments = false;
+		renderComposer();
+	}
+}
+
+async function uploadFile(id, file) {
+	uploadProgress.set(id, { loaded: 0, total: file.size });
 	renderComposer();
 	try {
-		for (const file of files) {
-			if (model.images.length >= 8) {
-				model = { ...model, error: "You can attach at most 8 images." };
-				break;
-			}
-			if (!supported.has(file.type)) {
-				model = { ...model, error: `${file.name || "Image"} is not a supported image.` };
-				continue;
-			}
-			if (file.size > 10 * 1024 * 1024) {
-				model = { ...model, error: `${file.name || "Image"} is larger than 10 MB.` };
-				continue;
-			}
-			try {
-				const data = await readBase64(file);
-				model = invalidateSendAttempt({
-					...model,
-					images: [
-						...model.images,
-						{
-							id: crypto.randomUUID(),
-							name: file.name || "Pasted image",
-							mimeType: file.type,
-							data,
-							previewUrl: URL.createObjectURL(file),
-						},
-					],
-					error: "",
-				});
-			} catch (error) {
-				model = { ...model, error: errorMessage(error) };
+		const state = await uploadAttachment(
+			`/api/attachments/${encodeURIComponent(id)}/upload?revision=${model.attachmentRevision}`,
+			file,
+			(progress) => {
+				uploadProgress.set(id, progress);
+				renderComposer();
+			},
+		);
+		retryFiles.delete(id);
+		model = applyAttachments(model, state);
+		render();
+	} finally {
+		uploadProgress.delete(id);
+		renderComposer();
+	}
+}
+
+function uploadAttachment(path, file, onProgress) {
+	return new Promise((resolve, reject) => {
+		const request = new XMLHttpRequest();
+		request.open("POST", path);
+		request.responseType = "json";
+		request.setRequestHeader("Content-Type", "application/octet-stream");
+		request.setRequestHeader("X-Pi-Web-Client", clientId);
+		request.upload.addEventListener("progress", (event) => {
+			if (event.lengthComputable) onProgress({ loaded: event.loaded, total: event.total });
+		});
+		request.addEventListener("load", () => {
+			if (request.status >= 200 && request.status < 300) {
+				resolve(request.response);
+				return;
 			}
+			reject(new Error(request.response?.error || `Request failed (${request.status}).`));
+		});
+		request.addEventListener("error", () => reject(new Error("Image upload failed.")));
+		request.addEventListener("abort", () => reject(new Error("Image upload was cancelled.")));
+		request.send(file);
+	});
+}
+
+async function retryImage(id) {
+	if (composerLocked()) return;
+	mutatingAttachments = true;
+	renderComposer();
+	try {
+		const file = retryFiles.get(id);
+		if (file) {
+			await uploadFile(id, file);
+		} else {
+			const response = await attachmentMutation(
+				`/api/attachments/${encodeURIComponent(id)}/retry`,
+				{
+					method: "POST",
+					body: JSON.stringify({ revision: model.attachmentRevision }),
+				},
+			);
+			model = applyAttachments(model, response);
 			render();
 		}
+	} catch (error) {
+		model = { ...model, error: errorMessage(error) };
+		render();
+	} finally {
+		mutatingAttachments = false;
+		renderComposer();
+	}
+}
+
+function scheduleDraftSave() {
+	clearTimeout(draftSaveTimer);
+	if (!model.textDirty || model.closed || model.stale || !model.connected) return;
+	draftSaveTimer = setTimeout(() => {
+		draftSaveTimer = undefined;
+		void flushDraftText().catch((error) => {
+			model = { ...model, error: errorMessage(error) };
+			render();
+		});
+	}, 180);
+}
+
+function flushDraftText() {
+	clearTimeout(draftSaveTimer);
+	draftSaveTimer = undefined;
+	draftSaveQueue = draftSaveQueue
+		.catch(() => undefined)
+		.then(async () => {
+			while (model.textDirty) {
+				if (model.closed || model.stale || !model.connected) {
+					throw new Error("Reconnect the active tab to save this draft.");
+				}
+				const submittedText = model.text;
+				const response = await fetch("/api/draft", {
+					method: "POST",
+					headers: { "Content-Type": "application/json", "X-Pi-Web-Client": clientId },
+					body: JSON.stringify({
+						requestId: crypto.randomUUID(),
+						revision: model.draftRevision,
+						text: submittedText,
+					}),
+				});
+				if (response.status === 409) {
+					await refreshSnapshot();
+					continue;
+				}
+				if (!response.ok) throw new Error(await responseError(response));
+				model = acknowledgeDraftText(model, await response.json(), submittedText);
+				renderComposer();
+			}
+		});
+	return draftSaveQueue;
+}
+
+function isSupportedImageFile(file) {
+	return (
+		SUPPORTED_IMAGE_TYPES.has(file.type) ||
+		/\.(?:bmp|tif|tiff|heic|heif|avif)$/i.test(file.name || "")
+	);
+}
+
+async function reattachSentImage(retainedImageId) {
+	if (composerLocked() || !retainedImageId) return;
+	if (model.attachmentPhase !== "empty" && model.attachmentPhase !== "ready") {
+		model = { ...model, error: "Wait for current images to finish before attaching again." };
+		render();
+		return;
+	}
+	mutatingAttachments = true;
+	renderComposer();
+	try {
+		const response = await attachmentMutation("/api/sent-images/reattach", {
+			method: "POST",
+			body: JSON.stringify({
+				revision: model.attachmentRevision,
+				items: [{ retainedId: retainedImageId, id: crypto.randomUUID() }],
+			}),
+		});
+		model = applyDraft(model, response.draft);
+		model = applyAttachments(model, response.attachments);
+		model = applySentImages(model, response.sentImages);
+		model = { ...model, error: "" };
+		render();
+	} catch (error) {
+		model = { ...model, error: errorMessage(error) };
+		render();
 	} finally {
-		model = { ...model, readingImages: Math.max(0, model.readingImages - 1) };
+		mutatingAttachments = false;
 		renderComposer();
 	}
 }
 
-function removeImage(id) {
-	if (model.pending) return;
-	const removed = model.images.find((image) => image.id === id);
-	if (removed) {
-		if (ui.previewImage.src === removed.previewUrl) ui.previewDialog.close();
-		URL.revokeObjectURL(removed.previewUrl);
+async function forgetSentImage(retainedImageId) {
+	if (composerLocked() || !retainedImageId) return;
+	if (!window.confirm("Forget this retained image? This does not retract provider content."))
+		return;
+	try {
+		const response = await attachmentMutation(
+			`/api/sent-images/${encodeURIComponent(retainedImageId)}?revision=${model.sentImages.revision}`,
+			{ method: "DELETE" },
+		);
+		model = applySentImages(model, response);
+		render({ updateKey: "sent-images" });
+	} catch (error) {
+		model = { ...model, error: errorMessage(error) };
+		render();
 	}
-	model = invalidateSendAttempt({
-		...model,
-		images: model.images.filter((image) => image.id !== id),
+}
+
+async function clearAttachments() {
+	if (composerLocked() || model.images.length < 2) return;
+	const clearedIds = model.images.map((image) => image.id);
+	if (clearedIds.includes(ui.previewImage.dataset.imageId)) ui.previewDialog.close();
+	const state = await mutateAttachmentState("/api/attachments/clear", {
+		method: "POST",
+		body: JSON.stringify({ revision: model.attachmentRevision }),
 	});
-	render();
+	if (!state) return;
+	for (const id of clearedIds) retryFiles.delete(id);
+	ui.input.focus();
+}
+
+async function reorderImages(images, focusId) {
+	if (composerLocked()) return;
+	if (images.every((image, index) => image.id === model.images[index]?.id)) {
+		imageDrag.focus(focusId);
+		return;
+	}
+	const previousImages = model.images;
+	const previousRevision = model.attachmentRevision;
+	model = { ...model, images };
+	mutatingAttachments = true;
+	renderComposer();
+	imageDrag.focus(focusId);
+	ui.previews.setAttribute("aria-busy", "true");
+	try {
+		const state = await attachmentMutation("/api/attachments/reorder", {
+			method: "POST",
+			body: JSON.stringify({
+				revision: previousRevision,
+				ids: images.map((image) => image.id),
+			}),
+		});
+		model = applyAttachments(model, state);
+		model = { ...model, error: "" };
+	} catch (error) {
+		if (model.attachmentRevision === previousRevision) {
+			model = { ...model, images: previousImages };
+		}
+		model = { ...model, error: errorMessage(error) };
+	} finally {
+		mutatingAttachments = false;
+		ui.previews.removeAttribute("aria-busy");
+		render();
+		imageDrag.focus(focusId);
+	}
+}
+
+async function removeImage(id) {
+	if (composerLocked()) return;
+	if (ui.previewImage.dataset.imageId === id) ui.previewDialog.close();
+	const state = await mutateAttachmentState(
+		`/api/attachments/${encodeURIComponent(id)}?revision=${model.attachmentRevision}`,
+		{ method: "DELETE", headers: { "Content-Type": "application/json" } },
+	);
+	if (state) {
+		retryFiles.delete(id);
+		uploadProgress.delete(id);
+	}
+}
+
+async function mutateAttachmentState(path, options) {
+	if (composerLocked()) return;
+	mutatingAttachments = true;
+	renderComposer();
+	try {
+		const state = await attachmentMutation(path, options);
+		model = applyAttachments(model, state);
+		model = { ...model, error: "" };
+		render();
+		return state;
+	} catch (error) {
+		model = { ...model, error: errorMessage(error) };
+		render();
+	} finally {
+		mutatingAttachments = false;
+		renderComposer();
+	}
+}
+
+async function attachmentMutation(path, options) {
+	const response = await fetch(path, {
+		...options,
+		headers: {
+			"Content-Type": "application/json",
+			"X-Pi-Web-Client": clientId,
+			...options.headers,
+		},
+	});
+	if (!response.ok) throw new Error(await responseError(response));
+	return response.json();
 }
 
 function openImagePreview(image) {
+	if (image.status !== "ready") return;
 	previewReturnFocus = document.activeElement;
 	ui.previewTitle.textContent = image.name;
-	ui.previewImage.src = image.previewUrl;
+	ui.previewImage.src = `/api/attachments/${encodeURIComponent(image.id)}/preview?v=${model.attachmentRevision}`;
+	ui.previewImage.dataset.imageId = image.id;
 	ui.previewImage.alt = image.name;
 	ui.previewDialog.showModal();
 }
 
-function readBase64(file) {
-	return new Promise((resolve, reject) => {
-		const reader = new FileReader();
-		reader.addEventListener("error", () => reject(new Error(`Could not read ${file.name}.`)));
-		reader.addEventListener("load", () => {
-			if (typeof reader.result !== "string") {
-				reject(new Error(`Could not read ${file.name}.`));
-				return;
-			}
-			resolve(reader.result.slice(reader.result.indexOf(",") + 1));
-		});
-		reader.readAsDataURL(file);
-	});
-}
-
 function render(options = {}) {
 	renderHeader();
 	queueTranscriptRender(options.updateKey, options.announcement);
@@ -395,7 +738,7 @@ function queueTranscriptRender(updateKey, announcement) {
 	if (transcriptFrame) return;
 	transcriptFrame = requestAnimationFrame(() => {
 		transcriptFrame = undefined;
-		transcriptRenderer.render(model.messages, model.tools);
+		transcriptRenderer.render(model.messages, model.tools, model.sentImages);
 		ui.empty.hidden = model.messages.length > 0;
 		if (transcriptAnnouncement) {
 			ui.transcriptStatus.textContent = transcriptAnnouncement;
@@ -412,53 +755,135 @@ function renderComposer() {
 	const locked = composerLocked();
 	ui.composer.classList.toggle("locked", locked);
 	ui.send.textContent = busyLabel(model);
-	ui.send.disabled = !canSend(model);
+	ui.send.disabled = locked || !canSend(model);
 	ui.steer.hidden = model.activity !== "running";
-	ui.steer.disabled = !canSend(model);
-	ui.input.disabled = locked;
-	ui.imageInput.disabled = locked;
-	ui.addImages.classList.toggle("disabled", locked);
-	ui.addImages.setAttribute("aria-disabled", String(locked));
+	ui.steer.disabled = locked || !canSend(model);
+	ui.input.disabled = model.closed || model.stale;
+	const admissionLocked = locked || model.readingImages > 0;
+	ui.imageInput.disabled = admissionLocked;
+	ui.addImages.classList.toggle("disabled", admissionLocked);
+	ui.addImages.setAttribute("aria-disabled", String(admissionLocked));
+	ui.clearAttachments.hidden = model.images.length < 2;
+	ui.clearAttachments.disabled = locked;
 	ui.status.textContent = composerStatus();
 	ui.error.hidden = !model.error;
 	ui.error.textContent = model.error;
-	ui.attachmentStatus.hidden = model.images.length === 0;
-	const attachmentStatus =
-		model.images.length === 0
-			? ""
-			: `${model.images.length} of 8 images attached · Sensitive metadata is removed before sending.`;
-	if (ui.attachmentStatus.textContent !== attachmentStatus) {
-		ui.attachmentStatus.textContent = attachmentStatus;
+	const maximum = model.imageLimits?.maxImages ?? model.images.length;
+	ui.attachmentSummary.hidden = model.images.length === 0;
+	ui.attachmentSummary.textContent = model.images.length
+		? `${model.images.length}/${maximum} images attached · Sensitive metadata is removed before sending.`
+		: "";
+	const attachmentAnnouncement = model.images.length
+		? `Attachment state: ${attachmentPhaseLabel(model.attachmentPhase)}.`
+		: "";
+	if (attachmentAnnouncement !== lastAttachmentAnnouncement) {
+		lastAttachmentAnnouncement = attachmentAnnouncement;
+		ui.attachmentAnnouncement.textContent = attachmentAnnouncement;
 	}
 	ui.previews.replaceChildren();
-	for (const image of model.images) {
+	for (const [index, image] of model.images.entries()) {
 		const item = document.createElement("li");
 		item.className = "image-preview-item";
+		item.dataset.imageId = image.id;
+		const retryable = image.status === "error" && (image.retryable || retryFiles.has(image.id));
+		const orderingLocked = locked || model.attachmentPhase !== "ready";
+		const reorderable = model.images.length > 1 && image.status === "ready";
+		item.draggable = model.images.length > 1 && image.status === "ready" && !orderingLocked;
+		if (reorderable) {
+			item.tabIndex = 0;
+			item.setAttribute(
+				"aria-label",
+				`${image.name}, image ${index + 1} of ${model.images.length}. Drag to reorder or press Alt plus Up or Down Arrow.`,
+			);
+			item.setAttribute("aria-keyshortcuts", "Alt+ArrowUp Alt+ArrowDown");
+		}
+		item.addEventListener("keydown", (event) => {
+			if (
+				event.target !== item ||
+				composerLocked() ||
+				orderingLocked ||
+				!event.altKey ||
+				event.ctrlKey ||
+				event.metaKey
+			)
+				return;
+			const direction = event.key === "ArrowUp" ? -1 : event.key === "ArrowDown" ? 1 : 0;
+			if (direction === 0 || index + direction < 0 || index + direction >= model.images.length)
+				return;
+			event.preventDefault();
+			void reorderImages(moveImage(model.images, image.id, direction), image.id);
+		});
+		imageDrag.bind(item, { id: image.id, orderingLocked });
 		const previewButton = document.createElement("button");
 		previewButton.type = "button";
 		previewButton.className = "attachment-preview";
 		previewButton.setAttribute("aria-label", `Preview image ${image.name}`);
-		previewButton.disabled = model.pending;
+		previewButton.disabled = locked || image.status !== "ready";
 		previewButton.addEventListener("click", () => openImagePreview(image));
 		const preview = document.createElement("img");
-		preview.src = image.previewUrl;
+		if (image.status === "ready") {
+			preview.src = `/api/attachments/${encodeURIComponent(image.id)}/preview?v=${model.attachmentRevision}`;
+		}
 		preview.alt = "";
+		preview.draggable = false;
 		previewButton.append(preview);
+		const details = document.createElement("span");
+		details.className = "attachment-details";
 		const name = document.createElement("span");
 		name.textContent = image.name;
+		const itemStatus = document.createElement("span");
+		itemStatus.className = `attachment-item-status ${image.status}`;
+		itemStatus.textContent = attachmentItemLabel(image, uploadProgress.get(image.id));
+		details.append(name, itemStatus);
+		if (Array.isArray(image.notes) && image.notes.length > 0) {
+			const summary = document.createElement("span");
+			summary.className = "attachment-conversion-summary";
+			summary.textContent = image.notes.join(" · ");
+			details.append(summary);
+		}
+		if (model.images.length > 1) {
+			const order = document.createElement("span");
+			order.className = "attachment-order-context";
+			order.textContent = `Order ${index + 1} of ${model.images.length}`;
+			details.append(order);
+		}
+		const actions = document.createElement("div");
+		actions.className = "image-actions";
 		const remove = document.createElement("button");
 		remove.type = "button";
 		remove.className = "remove-image";
-		remove.textContent = "Remove";
-		remove.disabled = model.pending;
+		remove.disabled = locked;
 		remove.setAttribute("aria-label", `Remove image ${image.name}`);
-		remove.addEventListener("click", () => removeImage(image.id));
-		item.append(previewButton, name, remove);
+		remove.title = `Remove ${image.name}`;
+		remove.append(createTrashIcon());
+		remove.addEventListener("click", () => void removeImage(image.id));
+		if (retryable) {
+			const retry = document.createElement("button");
+			retry.type = "button";
+			retry.className = "retry-image";
+			retry.textContent = "Retry";
+			retry.disabled = locked;
+			retry.setAttribute("aria-label", `Retry image ${image.name}`);
+			retry.addEventListener("click", () => void retryImage(image.id));
+			actions.append(retry);
+		}
+		actions.append(remove);
+		item.append(previewButton, details, actions);
 		ui.previews.append(item);
 	}
 	document.documentElement.style.setProperty("--composer-height", `${ui.composer.offsetHeight}px`);
 }
 
+function createTrashIcon() {
+	const icon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+	icon.setAttribute("viewBox", "0 0 24 24");
+	icon.setAttribute("aria-hidden", "true");
+	const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+	path.setAttribute("d", "M3 6h18M8 6V4h8v2m-9 0 1 14h8l1-14M10 10v6m4-6v6");
+	icon.append(path);
+	return icon;
+}
+
 function renderBlocking() {
 	ui.blocking.hidden = !model.closed && !model.stale;
 	if (model.closed) {
@@ -482,8 +907,31 @@ function resizeInput() {
 	ui.input.style.height = `${Math.min(ui.input.scrollHeight, window.innerHeight * 0.32)}px`;
 }
 
+function attachmentPhaseLabel(phase) {
+	if (phase === "uploading") return "Uploading";
+	if (phase === "processing") return "Processing";
+	if (phase === "blocked") return "Needs attention";
+	if (phase === "reserved") return "Submitting";
+	return "Ready";
+}
+
+function attachmentItemLabel(image, progress) {
+	if (image.status === "uploading" && progress?.total > 0) {
+		const percent = Math.min(100, Math.round((progress.loaded / progress.total) * 100));
+		return `Uploading · ${percent}%`;
+	}
+	if (image.status === "uploading") return "Uploading…";
+	if (image.status === "processing") return "Processing…";
+	if (image.status === "error") return image.error || "Needs attention";
+	const dimensions =
+		Number.isSafeInteger(image.width) && Number.isSafeInteger(image.height)
+			? ` · ${image.width}×${image.height}`
+			: "";
+	return `Ready${dimensions}`;
+}
+
 function composerStatus() {
-	if (model.readingImages > 0) return "Preparing images…";
+	if (model.readingImages > 0) return "Staging images on this Pi session…";
 	if (model.pending) return "Submitting message…";
 	const notice = deliveryNotice(model);
 	if (notice) return notice;
@@ -512,7 +960,13 @@ function conversationAnnouncement(event) {
 }
 
 function composerLocked() {
-	return model.closed || model.stale || model.pending;
+	return (
+		model.closed ||
+		model.stale ||
+		model.pending ||
+		mutatingAttachments ||
+		model.attachmentPhase === "reserved"
+	);
 }
 
 function hasDraggedFile(event) {
@@ -532,6 +986,10 @@ async function responseError(response) {
 	}
 }
 
+function formatMib(bytes) {
+	return `${bytes / (1024 * 1024)} MiB`;
+}
+
 function errorMessage(error) {
 	return error instanceof Error ? error.message : String(error);
 }