@narumitw/pi-image-drop 0.18.0

package/src/vendor.d.ts

@@ -0,0 +1,30 @@
+declare module "bmp-js" {
+	interface DecodedBmp {
+		data: Buffer;
+		width: number;
+		height: number;
+	}
+	export function decode(buffer: Buffer, withAlpha?: boolean): DecodedBmp;
+}
+
+declare module "heic-decode" {
+	interface DecodedImage {
+		width: number;
+		height: number;
+		data: Uint8ClampedArray;
+	}
+	interface DeferredImage {
+		width: number;
+		height: number;
+		decode(): Promise<DecodedImage>;
+	}
+	interface DeferredImages extends Array<DeferredImage> {
+		dispose(): void;
+	}
+	interface Decode {
+		(options: { buffer: Uint8Array }): Promise<DecodedImage>;
+		all(options: { buffer: Uint8Array }): Promise<DeferredImages>;
+	}
+	const decode: Decode;
+	export default decode;
+}

package/src/web/app.js

@@ -0,0 +1,403 @@
+import {
+	canMutate,
+	formatBytes,
+	moveItem,
+	moveItemBefore,
+	preferNewestState,
+	summarizeBatch,
+} from "/state.js";
+
+const $ = (selector) => document.querySelector(selector);
+const ui = {
+	session: $("#session-label"),
+	cwd: $("#cwd"),
+	drop: $("#drop-zone"),
+	choose: $("#choose-files"),
+	input: $("#file-input"),
+	status: $("#status"),
+	clear: $("#clear-all"),
+	error: $("#error-banner"),
+	grid: $("#grid"),
+	overlay: $("#connection-overlay"),
+	connectionTitle: $("#connection-title"),
+	connectionMessage: $("#connection-message"),
+	dialog: $("#clear-dialog"),
+};
+const clientId = crypto.randomUUID();
+const pendingFiles = new Map();
+let state;
+let draggedId;
+let highlightedId;
+let reconnectTimer;
+
+wire();
+void start();
+
+async function start() {
+	try {
+		state = await request("/api/lease", { method: "POST", json: { clientId } });
+		render();
+		connectEvents();
+	} catch (error) {
+		connectionFailure("Could not connect", errorMessage(error));
+	}
+}
+
+function wire() {
+	ui.choose.addEventListener("click", () => ui.input.click());
+	ui.input.addEventListener("change", () => {
+		void addFiles([...ui.input.files]);
+		ui.input.value = "";
+	});
+	document.addEventListener("paste", (event) => {
+		const files = [...(event.clipboardData?.items ?? [])]
+			.filter((item) => item.kind === "file")
+			.map((item) => item.getAsFile())
+			.filter(Boolean);
+		if (files.length === 0) return;
+		event.preventDefault();
+		void addFiles(files);
+	});
+	for (const name of ["dragenter", "dragover"])
+		document.addEventListener(name, (event) => {
+			if (!hasFiles(event)) return;
+			event.preventDefault();
+			ui.drop.classList.add("drag-active");
+		});
+	for (const name of ["dragleave", "drop"])
+		document.addEventListener(name, (event) => {
+			if (!hasFiles(event)) return;
+			event.preventDefault();
+			ui.drop.classList.remove("drag-active");
+			if (name === "drop") void addFiles([...event.dataTransfer.files]);
+		});
+	ui.clear.addEventListener("click", () => {
+		ui.dialog.returnValue = "cancel";
+		ui.dialog.showModal();
+	});
+	ui.dialog.addEventListener("close", () => {
+		if (ui.dialog.returnValue === "confirm") void clearAll();
+	});
+}
+
+function connectEvents() {
+	const events = new EventSource(`/api/events?client=${encodeURIComponent(clientId)}`);
+	events.addEventListener("state", (event) => {
+		clearTimeout(reconnectTimer);
+		applyState(JSON.parse(event.data));
+		reconcileFiles();
+		render();
+	});
+	events.addEventListener("stale", (event) => {
+		events.close();
+		connectionFailure("Opened in another tab", JSON.parse(event.data).message);
+	});
+	events.addEventListener("session-ended", (event) => {
+		events.close();
+		connectionFailure("Pi session ended", JSON.parse(event.data).message);
+	});
+	events.onerror = () => {
+		clearTimeout(reconnectTimer);
+		reconnectTimer = setTimeout(async () => {
+			try {
+				applyState(await request("/api/state"));
+				render();
+			} catch {
+				events.close();
+				connectionFailure("Connection lost", "Run /image-drop in Pi for a new link.");
+			}
+		}, 2000);
+	};
+}
+
+async function addFiles(files) {
+	if (!state || files.length === 0) return;
+	if (!canMutate(state.batch)) return showError("This batch is already queued with Pi.");
+	clearError();
+	const items = files.map((file) => ({
+		id: crypto.randomUUID(),
+		name: file.name || "pasted-image",
+		size: file.size,
+		file,
+	}));
+	try {
+		applyState(
+			await request("/api/items", {
+				method: "POST",
+				json: {
+					revision: state.batch.revision,
+					items: items.map(({ id, name, size }) => ({ id, name, size })),
+				},
+			}),
+		);
+		for (const item of items) pendingFiles.set(item.id, item.file);
+		render();
+		await mapConcurrent(items, 4, upload);
+	} catch (error) {
+		showError(errorMessage(error));
+	}
+}
+
+async function upload(item) {
+	try {
+		const response = await request(`/api/items/${item.id}/content`, {
+			method: "PUT",
+			body: item.file,
+			headers: { "content-type": "application/octet-stream" },
+		});
+		applyState(response);
+		if (response.duplicateOf) highlight(response.duplicateOf);
+		if (
+			!state.batch.items.some(
+				(candidate) => candidate.id === item.id && candidate.status === "error",
+			)
+		)
+			pendingFiles.delete(item.id);
+		render();
+	} catch (error) {
+		try {
+			if (!(error instanceof ApiError) || error.status === 413) {
+				applyState(
+					await request(`/api/items/${item.id}/fail`, {
+						method: "POST",
+						json: { error: `Upload failed: ${errorMessage(error)}` },
+					}),
+				);
+			} else {
+				applyState(await request("/api/state"));
+			}
+			render();
+		} catch {
+			/* The session may be disconnected. */
+		}
+		showError(errorMessage(error));
+	}
+}
+
+async function retry(id) {
+	try {
+		const file = pendingFiles.get(id);
+		const response = file
+			? await request(`/api/items/${id}/content`, {
+					method: "PUT",
+					body: file,
+					headers: { "content-type": "application/octet-stream" },
+				})
+			: await request(`/api/items/${id}/retry`, { method: "POST" });
+		applyState(response);
+		if (response.duplicateOf) highlight(response.duplicateOf);
+		if (!state.batch.items.some((item) => item.id === id && item.status === "error"))
+			pendingFiles.delete(id);
+		clearError();
+		render();
+	} catch (error) {
+		showError(
+			`${errorMessage(error)} Delete and choose the image again if its source is unavailable.`,
+		);
+	}
+}
+
+async function remove(id) {
+	await mutate(`/api/items/${id}?revision=${state.batch.revision}`, { method: "DELETE" });
+	pendingFiles.delete(id);
+}
+
+async function reorder(ids) {
+	if (ids.every((id, index) => state.batch.items[index]?.id === id)) return;
+	await mutate("/api/order", { method: "PUT", json: { revision: state.batch.revision, ids } });
+}
+
+async function clearAll() {
+	await mutate("/api/clear", { method: "POST", json: { revision: state.batch.revision } });
+	pendingFiles.clear();
+}
+
+async function mutate(path, options) {
+	try {
+		applyState(await request(path, options));
+		clearError();
+		render();
+	} catch (error) {
+		showError(errorMessage(error));
+	}
+}
+
+function render() {
+	if (!state) return;
+	document.title = `${state.projectName} · Pi Image Drop`;
+	ui.session.textContent = state.sessionName
+		? `${state.projectName} · ${state.sessionName}`
+		: state.projectName;
+	ui.cwd.textContent = state.cwd;
+	const summary = summarizeBatch(state.batch);
+	ui.status.textContent = `${summary.label} · ${formatBytes(summary.bytes)}`;
+	const mutable = canMutate(state.batch);
+	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)));
+}
+
+function card(item, index, mutable) {
+	const article = document.createElement("article");
+	article.className = `image-card status-${item.status}${item.id === highlightedId ? " duplicate-highlight" : ""}`;
+	article.dataset.id = item.id;
+	article.draggable = mutable;
+	article.tabIndex = 0;
+	article.setAttribute("aria-label", `${index + 1}. ${item.name}, ${item.status}`);
+	article.addEventListener("dragstart", () => {
+		draggedId = item.id;
+	});
+	article.addEventListener("dragover", (event) => {
+		if (mutable && draggedId) event.preventDefault();
+	});
+	article.addEventListener("drop", (event) => {
+		event.preventDefault();
+		if (draggedId) void reorder(moveItemBefore(ids(), draggedId, item.id));
+		draggedId = undefined;
+	});
+
+	const preview = element("div", "preview");
+	if (item.status === "ready") {
+		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 {
+		const placeholder = element("span", "placeholder", item.status === "error" ? "!" : "…");
+		placeholder.setAttribute("aria-hidden", "true");
+		preview.append(placeholder);
+	}
+	article.append(preview);
+
+	const body = element("div", "card-body");
+	body.append(element("h3", "", item.name));
+	const dimensions = item.width && item.height ? ` · ${item.width}×${item.height}` : "";
+	body.append(
+		element("p", "meta", `${index + 1} · ${formatBytes(item.size)}${dimensions} · ${item.status}`),
+	);
+	if (item.sourceFormat && item.sourceFormat !== item.outputFormat)
+		body.append(
+			element(
+				"p",
+				"conversion",
+				`${item.sourceFormat.toUpperCase()} → ${item.outputFormat.toUpperCase()}`,
+			),
+		);
+	for (const note of item.notes ?? []) body.append(element("p", "note", note));
+	if (item.error) body.append(element("p", "item-error", item.error));
+	article.append(body);
+
+	const actions = element("div", "card-actions");
+	actions.append(
+		button("Move backward", "←", !mutable || index === 0, () =>
+			reorder(moveItem(ids(), item.id, -1)),
+		),
+		button("Move forward", "→", !mutable || index === state.batch.items.length - 1, () =>
+			reorder(moveItem(ids(), item.id, 1)),
+		),
+	);
+	if (item.status === "error")
+		actions.append(button("Retry", "Retry", !mutable, () => retry(item.id)));
+	actions.append(button("Delete", "Delete", !mutable, () => remove(item.id), "delete"));
+	article.append(actions);
+	return article;
+}
+
+function button(label, text, disabled, action, className = "") {
+	const result = element("button", className, text);
+	result.type = "button";
+	result.disabled = disabled;
+	result.setAttribute("aria-label", label);
+	result.addEventListener("click", () => void action());
+	return result;
+}
+
+async function request(path, options = {}) {
+	const headers = new Headers(options.headers);
+	headers.set("x-image-drop-client", clientId);
+	let body = options.body;
+	if (options.json !== undefined) {
+		headers.set("content-type", "application/json");
+		body = JSON.stringify(options.json);
+	}
+	const response = await fetch(path, { method: options.method, headers, body });
+	const data = (response.headers.get("content-type") ?? "").includes("application/json")
+		? await response.json()
+		: undefined;
+	if (!response.ok) {
+		throw new ApiError(
+			response.status,
+			data?.error ?? `Image Drop request failed (${response.status})`,
+		);
+	}
+	return data;
+}
+
+class ApiError extends Error {
+	constructor(status, message) {
+		super(message);
+		this.status = status;
+	}
+}
+
+function element(tag, className, text) {
+	const result = document.createElement(tag);
+	if (className) result.className = className;
+	if (text !== undefined) result.textContent = text;
+	return result;
+}
+function ids() {
+	return state.batch.items.map((item) => item.id);
+}
+function hasFiles(event) {
+	return [...(event.dataTransfer?.types ?? [])].includes("Files");
+}
+function showError(text) {
+	ui.error.textContent = text;
+	ui.error.hidden = false;
+}
+function clearError() {
+	ui.error.hidden = true;
+	ui.error.textContent = "";
+}
+function errorMessage(error) {
+	return error instanceof Error ? error.message : String(error);
+}
+function connectionFailure(title, text) {
+	ui.connectionTitle.textContent = title;
+	ui.connectionMessage.textContent = text;
+	ui.overlay.hidden = false;
+}
+function reconcileFiles() {
+	for (const id of pendingFiles.keys())
+		if (!state.batch.items.some((item) => item.id === id)) pendingFiles.delete(id);
+}
+function highlight(id) {
+	highlightedId = id;
+	render();
+	requestAnimationFrame(() => document.querySelector(`[data-id="${CSS.escape(id)}"]`)?.focus());
+	setTimeout(() => {
+		highlightedId = undefined;
+		document
+			.querySelector(`[data-id="${CSS.escape(id)}"]`)
+			?.classList.remove("duplicate-highlight");
+	}, 1800);
+}
+function applyState(next) {
+	state = preferNewestState(state, next);
+}
+async function mapConcurrent(values, limit, task) {
+	let cursor = 0;
+	await Promise.all(
+		Array.from({ length: Math.min(limit, values.length) }, async () => {
+			while (cursor < values.length) {
+				const value = values[cursor++];
+				await task(value);
+			}
+		}),
+	);
+}

package/src/web/index.html

@@ -0,0 +1,74 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<meta name="color-scheme" content="light dark" />
+		<title>Pi Image Drop</title>
+		<link rel="stylesheet" href="/styles.css" />
+	</head>
+	<body>
+		<header class="page-header">
+			<div>
+				<p class="eyebrow">Pi local image staging</p>
+				<h1>Image Drop</h1>
+				<p id="session-label" class="session-label">Connecting to Pi…</p>
+			</div>
+			<details>
+				<summary>Details</summary>
+				<dl>
+					<dt>Working directory</dt>
+					<dd id="cwd">—</dd>
+				</dl>
+			</details>
+		</header>
+
+		<main>
+			<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>
+					<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">
+				<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>
+					</div>
+					<button id="clear-all" class="danger-secondary" type="button" 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>
+
+			<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.
+			</p>
+		</main>
+
+		<div id="connection-overlay" class="connection-overlay" role="alert" hidden>
+			<div>
+				<h2 id="connection-title">Connection lost</h2>
+				<p id="connection-message">Run <code>/image-drop</code> in Pi for a new link.</p>
+			</div>
+		</div>
+
+		<dialog id="clear-dialog">
+			<form method="dialog">
+				<h2>Clear every staged image?</h2>
+				<p>This removes the current batch from Pi memory.</p>
+				<div class="dialog-actions">
+					<button type="submit" value="cancel">Cancel</button>
+					<button type="submit" class="danger" value="confirm">Clear all</button>
+				</div>
+			</form>
+		</dialog>
+
+		<script type="module" src="/app.js"></script>
+	</body>
+</html>

package/src/web/state.js

@@ -0,0 +1,61 @@
+export function summarizeBatch(batch) {
+	const counts = { ready: 0, uploading: 0, error: 0 };
+	for (const item of batch.items ?? []) {
+		if (item.status === "ready") counts.ready += 1;
+		else if (item.status === "error") counts.error += 1;
+		else counts.uploading += 1;
+	}
+	return {
+		...counts,
+		total: (batch.items ?? []).length,
+		bytes: Number(batch.totalSourceBytes ?? 0),
+		label: statusLabel(batch.phase, counts, (batch.items ?? []).length),
+	};
+}
+
+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`;
+	const parts = [`${counts.ready}/${total} ready`];
+	if (counts.uploading > 0) parts.push(`${counts.uploading} uploading`);
+	if (counts.error > 0) parts.push(`${counts.error} need attention`);
+	return parts.join(" · ");
+}
+
+export function moveItem(ids, id, direction) {
+	const from = ids.indexOf(id);
+	if (from === -1) return [...ids];
+	const to = Math.max(0, Math.min(ids.length - 1, from + direction));
+	if (to === from) return [...ids];
+	const next = [...ids];
+	next.splice(from, 1);
+	next.splice(to, 0, id);
+	return next;
+}
+
+export function moveItemBefore(ids, id, targetId) {
+	if (id === targetId || !ids.includes(id) || !ids.includes(targetId)) return [...ids];
+	const next = ids.filter((candidate) => candidate !== id);
+	next.splice(next.indexOf(targetId), 0, id);
+	return next;
+}
+
+export function canMutate(batch) {
+	return batch.phase !== "reserved" && batch.phase !== "closed";
+}
+
+export function preferNewestState(current, next) {
+	if (!current || next.batch.revision >= current.batch.revision) return next;
+	return current;
+}
+
+export function formatBytes(value) {
+	const bytes = Math.max(0, Number(value) || 0);
+	if (bytes < 1024) return `${bytes} B`;
+	if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(bytes < 10 * 1024 ? 1 : 0)} KB`;
+	return `${(bytes / (1024 * 1024)).toFixed(bytes < 10 * 1024 * 1024 ? 1 : 0)} MB`;
+}
+
+function plural(count, noun) {
+	return count === 1 ? noun : `${noun}s`;
+}