feat(chat): paste-to-attach images/PDFs with model capability check

Add multimodal image/PDF input to the chat box via clipboard paste, gated by a
graceful per-model capability check.

UX: a pasted image/PDF inserts an inline token (【image:…】 / 【pdf:…】) into the
draft, so attachments have ORDER relative to typed text and can be referenced
positionally. The token is the only handle — deleting it (atomic Backspace/
Delete, or selection overlap) detaches the file; an input-reconciliation safety
net detaches any attachment whose token is no longer intact. No preview strip.

Capability check: resolveModelCapabilities reads models.dev modalities.input
(new GET /models/capabilities, mirrors /context-limit). The input blocks Send
(no tokens spent) only on a definitive 'no'; unknown capability (catalog offline
/ unmapped provider) stays permissive. Attachments require a fresh turn — Send is
blocked while generating and /chat rejects content mid-turn (409).

Attachments are EPHEMERAL: forwarded to the model for the turn via ordered AI SDK
ImagePart/FilePart content, but never persisted (history keeps the text with
[image]/[pdf] markers). Text-only turns serialize byte-identically to before.

Limits (Anthropic-aligned, enforced at paste + re-validated server-side):
PNG/JPEG/WebP/GIF/PDF; image ≤5MB, PDF ≤32MB, ≤20 attachments, ≤32MB total.

core: UserContentPart types, models/attachments validator, capability resolver,
agent.run+toModelMessages thread ordered content. api: /chat content validation +
passthrough. frontend: attachment-tokens helper, ChatInput paste/token/gating,
per-tab staged attachments, App.svelte capability fetch. +44 tests.

1 files changed, 63 insertions, 0 deletions

diff --git a/packages/api/tests/routes.test.ts b/packages/api/tests/routes.test.ts
index 37c19ca..7cfd8a7 100644
--- a/packages/api/tests/routes.test.ts
+++ b/packages/api/tests/routes.test.ts
@@ -219,6 +219,16 @@ vi.mock("@dispatch/core", () => ({
 			typeof value === "string" && ["none", "low", "medium", "high", "xhigh", "max"].includes(value)
 		);
 	},
+	// Lightweight stand-in for the real validator: accept the supported media
+	// types, reject everything else. Enough to exercise the /chat attachment
+	// validation branch (the real validator is unit-tested in core).
+	validateUserContent(content: Array<{ type: string; mediaType?: string }>) {
+		const accepted = ["image/png", "image/jpeg", "image/webp", "image/gif", "application/pdf"];
+		const errors = content
+			.filter((p) => p.type === "attachment" && !accepted.includes(p.mediaType ?? ""))
+			.map((p) => ({ code: "unsupported-type", mediaType: p.mediaType }));
+		return { ok: errors.length === 0, errors };
+	},
 	listOpenTabs() {
 		return [...fakeOpenTabs];
 	},
@@ -449,6 +459,59 @@ describe("POST /chat", () => {
 		expect(await res.json()).toEqual({ status: "ok" });
 	});
 
+	it("accepts a valid image attachment and starts a turn", async () => {
+		const res = await app.request("/chat", {
+			method: "POST",
+			headers: { "Content-Type": "application/json" },
+			body: JSON.stringify({
+				tabId: "tab-img-ok",
+				message: "look: [image]",
+				content: [
+					{ type: "text", text: "look: " },
+					{ type: "attachment", mediaType: "image/png", data: "QQ==" },
+				],
+			}),
+		});
+		expect(res.status).toBe(200);
+		expect(await res.json()).toEqual({ status: "ok" });
+	});
+
+	it("returns 400 for an unsupported attachment media type", async () => {
+		const res = await app.request("/chat", {
+			method: "POST",
+			headers: { "Content-Type": "application/json" },
+			body: JSON.stringify({
+				tabId: "tab-img-bad",
+				message: "look: [image]",
+				content: [{ type: "attachment", mediaType: "image/svg+xml", data: "QQ==" }],
+			}),
+		});
+		expect(res.status).toBe(400);
+		const body = await res.json();
+		expect(body.error).toBe("invalid attachments");
+	});
+
+	it("returns 409 when attaching while the agent is generating", async () => {
+		// Kick off a turn so the tab is running.
+		await app.request("/chat", {
+			method: "POST",
+			headers: { "Content-Type": "application/json" },
+			body: JSON.stringify({ tabId: "tab-img-busy", message: "first" }),
+		});
+		await new Promise<void>((r) => setTimeout(r, 20));
+
+		const res = await app.request("/chat", {
+			method: "POST",
+			headers: { "Content-Type": "application/json" },
+			body: JSON.stringify({
+				tabId: "tab-img-busy",
+				message: "second [image]",
+				content: [{ type: "attachment", mediaType: "image/png", data: "QQ==" }],
+			}),
+		});
+		expect(res.status).toBe(409);
+	});
+
 	it("returns 400 with empty message", async () => {
 		const res = await app.request("/chat", {
 			method: "POST",