skydive-cli 0.1.0-beta.260 → 0.1.0-beta.286

package/dist/js/{boot-C5ztfr8K.mjs → boot-D23rGRlW.mjs}

@@ -1,18 +1,19 @@
 #!/usr/bin/env node
-import { A as getSavedTheme, C as themesForMode, D as DEFAULT_API_URL, E as setActiveWorkspace, M as saveTheme, O as DEFAULT_APP_URL, S as themeVersion, T as listWorkspaces, _ as noColorRequested, a as parseOauthConnectParams, b as themeMode, c as parseConnectCard, d as HttpError, f as createRestClient, g as monoTheme, h as findTheme, i as parseExternalOauthConnectParams, j as resolveWebUrl, k as getConfigPath, l as errorMessage, m as applyTheme, n as MASK_CHAR, o as reconcileMaskedInput, p as DEFAULT_THEME_ID, r as cardActionErrorMessage, s as resolveConnectUrl, t as resolveAgent, u as isRecord, v as theme, w as getActiveWorkspaceId, x as themeModeFromColorFgBg, y as themeForMode } from "./bin.mjs";
-import path, { basename, isAbsolute, join, win32 } from "node:path";
+import { A as themesForMode, C as monoTheme, D as themeMode, E as themeForMode, F as DEFAULT_APP_URL, I as getConfigPath, L as getSavedTheme, M as listWorkspaces, N as setActiveWorkspace, O as themeModeFromColorFgBg, P as DEFAULT_API_URL, R as resolveWebUrl, S as findTheme, T as theme, _ as isRecord, b as DEFAULT_THEME_ID, c as resolveAgent, d as parseExternalOauthConnectParams, f as parseOauthConnectParams, g as errorMessage, h as parseConnectCard, j as getActiveWorkspaceId, k as themeVersion, l as MASK_CHAR, m as resolveConnectUrl, p as reconcileMaskedInput, u as cardActionErrorMessage, v as HttpError, w as noColorRequested, x as applyTheme, y as createRestClient, z as saveTheme } from "./bin.mjs";
+import { t as PortalClient } from "./client-_OL8-XGH.mjs";
+import path, { basename, extname, isAbsolute, join, win32 } from "node:path";
 import { z } from "zod";
 import open from "open";
 import { execFile, spawn } from "node:child_process";
 import { createHash } from "node:crypto";
 import { constants } from "node:fs";
+import * as os$1 from "node:os";
+import { homedir, platform, release, tmpdir } from "node:os";
 import { MarkdownRenderable, RenderableEvents, SyntaxStyle, createCliRenderer, decodePasteBytes, detectLinks } from "@opentui/core";
 import { createRoot, extend, useKeyboard, usePaste, useRenderer, useTerminalDimensions } from "@opentui/react";
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { create } from "zustand";
 import { WebSocket } from "ws";
-import * as os$1 from "node:os";
-import os, { homedir, platform, release, tmpdir } from "node:os";
 import { createConnection } from "node:net";
 import { access, appendFile, mkdir, mkdtemp, readFile, rm, stat, writeFile } from "node:fs/promises";
 import { Fragment, jsx, jsxs } from "@opentui/react/jsx-runtime";
@@ -158,448 +159,6 @@ async function resolveInitialScreen({ rest, agentSelector }) {
 	};
 }
 
-//#endregion
-//#region ../portal-protocol/src/index.ts
-const MAX_WS_FRAME_BYTES = 16 * 1024 * 1024;
-const T_DATA = 1;
-const T_CTRL = 2;
-const STREAM = {
-	stdout: 0,
-	stderr: 1,
-	stdin: 2
-};
-const uuidToBytes = (id) => Buffer.from(id.replace(/-/g, ""), "hex");
-const bytesToUuid = (b) => {
-	const h = b.toString("hex");
-	return `${h.slice(0, 8)}-${h.slice(8, 12)}-${h.slice(12, 16)}-${h.slice(16, 20)}-${h.slice(20, 32)}`;
-};
-function encodeData(id, stream, seq, payload) {
-	const head = Buffer.allocUnsafe(22);
-	head[0] = T_DATA;
-	uuidToBytes(id).copy(head, 1);
-	head[17] = stream;
-	head.writeUInt32BE(seq >>> 0, 18);
-	return Buffer.concat([head, payload]);
-}
-const ctrlMessageSchema = z.discriminatedUnion("t", [
-	z.object({
-		t: z.literal("open"),
-		argv: z.array(z.string()),
-		env: z.record(z.string()).nullable()
-	}),
-	z.object({ t: z.literal("stdin_eof") }),
-	z.object({ t: z.literal("pause") }),
-	z.object({ t: z.literal("resume") }),
-	z.object({ t: z.literal("cancel") }),
-	z.object({
-		t: z.literal("close"),
-		exitCode: z.number()
-	}),
-	z.object({
-		t: z.literal("error"),
-		message: z.string()
-	})
-]);
-function encodeCtrl(id, obj) {
-	const head = Buffer.allocUnsafe(17);
-	head[0] = T_CTRL;
-	uuidToBytes(id).copy(head, 1);
-	return Buffer.concat([head, Buffer.from(JSON.stringify(obj), "utf8")]);
-}
-function decodeFrame(frame) {
-	const id = bytesToUuid(frame.subarray(1, 17));
-	if (frame[0] === T_DATA) return {
-		kind: "data",
-		id,
-		stream: frame[17] ?? 0,
-		seq: frame.readUInt32BE(18),
-		payload: frame.subarray(22)
-	};
-	return {
-		kind: "ctrl",
-		id,
-		obj: ctrlMessageSchema.parse(JSON.parse(frame.subarray(17).toString("utf8")))
-	};
-}
-
-//#endregion
-//#region src/chat/portal/machine.ts
-/**
-* Identity this machine registers under when the CLI shares it via the portal.
-*
-* The `-cli` suffix / `(CLI)` label keep a CLI-shared machine a DISTINCT portal
-* device from the same host's Skydive Desktop app. `portal_device` is unique on
-* (org, user, machineName), and directives route to whichever socket holds the
-* device — if the CLI and desktop registered the same name they'd share a
-* device row and both execute every directive. Distinct names also make the
-* grant UI unambiguous about which surface is being authorized.
-*/
-function machineIdentity() {
-	const host = (os.hostname() || "machine").trim().replace(/\.local$/i, "") || "machine";
-	return {
-		machineName: `${host}-cli`,
-		friendlyName: `${host} (CLI)`
-	};
-}
-const INHERITED_ENV = [
-	"HOME",
-	"USER",
-	"LOGNAME",
-	"SHELL",
-	"LANG",
-	"LC_ALL",
-	"TMPDIR",
-	"TERM",
-	"PATH"
-];
-function buildEnv(extra) {
-	const env = {};
-	for (const key of INHERITED_ENV) {
-		const value = process.env[key];
-		if (value !== void 0) env[key] = value;
-	}
-	if (extra) for (const [key, value] of Object.entries(extra)) env[key] = value;
-	return env;
-}
-/**
-* Build the desktop-portal WebSocket URL from the chat origin. Mirrors the Rust
-* desktop client: http→ws, https→wss, scheme-less defaults to wss, and the
-* machine/label ride as query pairs (percent-encoded by URL).
-*/
-function portalWsUrl(appUrl, machine, label) {
-	const base = appUrl.replace(/\/+$/, "");
-	let wsBase;
-	if (base.startsWith("https://")) wsBase = `wss://${base.slice(8)}`;
-	else if (base.startsWith("http://")) wsBase = `ws://${base.slice(7)}`;
-	else wsBase = `wss://${base}`;
-	const url = new URL(`${wsBase}/api/v1/portal/desktop`);
-	url.searchParams.set("machine", machine);
-	url.searchParams.set("label", label);
-	return url.toString();
-}
-
-//#endregion
-//#region src/chat/portal/exec.ts
-/**
-* Runs portal `exec` directives locally. Each `open` spawns a child process
-* whose stdout/stderr stream back as data frames and whose stdin is fed by
-* inbound data frames, with pause/resume backpressure and cancel/teardown that
-* kill the child. This is the TypeScript counterpart of the desktop's Rust
-* `portal/mod.rs` job machinery, minus the connection supervision (which lives
-* in the client).
-*/
-var JobManager = class {
-	jobs = /* @__PURE__ */ new Map();
-	constructor(opts) {
-		this.opts = opts;
-	}
-	handleFrame(raw) {
-		let decoded;
-		try {
-			decoded = decodeFrame(raw);
-		} catch (_error) {
-			return;
-		}
-		if (decoded.kind === "ctrl") this.handleCtrl(decoded.id, decoded.obj);
-		else if (decoded.stream === STREAM.stdin) this.jobs.get(decoded.id)?.child.stdin.write(decoded.payload);
-	}
-	killAll() {
-		for (const job of this.jobs.values()) {
-			job.settled = true;
-			job.child.kill("SIGKILL");
-		}
-		this.jobs.clear();
-	}
-	handleCtrl(id, msg) {
-		switch (msg.t) {
-			case "open":
-				this.startJob(id, msg.argv, msg.env);
-				return;
-			case "stdin_eof":
-				this.jobs.get(id)?.child.stdin.end();
-				return;
-			case "pause":
-				this.setPaused(id, true);
-				return;
-			case "resume":
-				this.setPaused(id, false);
-				return;
-			case "cancel":
-				this.jobs.get(id)?.child.kill("SIGKILL");
-				return;
-			case "close":
-			case "error": return;
-			default: return msg;
-		}
-	}
-	setPaused(id, paused) {
-		const job = this.jobs.get(id);
-		if (!job) return;
-		if (paused) {
-			job.child.stdout.pause();
-			job.child.stderr.pause();
-		} else {
-			job.child.stdout.resume();
-			job.child.stderr.resume();
-		}
-	}
-	startJob(id, argv, env) {
-		const [program, ...args] = argv;
-		if (!program) {
-			this.opts.send(encodeCtrl(id, {
-				t: "error",
-				message: "empty argv"
-			}));
-			return;
-		}
-		let child;
-		try {
-			child = spawn(program, args, {
-				cwd: this.opts.cwd,
-				env: buildEnv(env),
-				stdio: [
-					"pipe",
-					"pipe",
-					"pipe"
-				]
-			});
-		} catch (err) {
-			this.opts.send(encodeCtrl(id, {
-				t: "error",
-				message: `spawn failed: ${errorMessage(err)}`
-			}));
-			return;
-		}
-		const job = {
-			child,
-			seq: 0,
-			settled: false
-		};
-		this.jobs.set(id, job);
-		child.on("error", (err) => {
-			if (job.settled) return;
-			job.settled = true;
-			this.jobs.delete(id);
-			this.opts.send(encodeCtrl(id, {
-				t: "error",
-				message: `spawn failed: ${errorMessage(err)}`
-			}));
-		});
-		child.stdout.on("data", (chunk) => this.sendData(job, id, STREAM.stdout, chunk));
-		child.stderr.on("data", (chunk) => this.sendData(job, id, STREAM.stderr, chunk));
-		child.on("close", (code) => {
-			if (job.settled) return;
-			job.settled = true;
-			this.jobs.delete(id);
-			this.opts.send(encodeCtrl(id, {
-				t: "close",
-				exitCode: code ?? -1
-			}));
-		});
-	}
-	sendData(job, id, stream, chunk) {
-		if (job.settled) return;
-		this.opts.send(encodeData(id, stream, job.seq, chunk));
-		job.seq = job.seq + 1 >>> 0;
-	}
-};
-
-//#endregion
-//#region src/chat/portal/client.ts
-const deviceTokenSchema = z.object({ token: z.string().min(1) });
-const devicesSchema = z.object({ devices: z.array(z.object({
-	id: z.string(),
-	machineName: z.string(),
-	grantedAgentIds: z.array(z.string())
-})) });
-const INITIAL_BACKOFF_MS = 500;
-const MAX_BACKOFF_MS = 1e4;
-/**
-* Shares the local machine with agents over the portal: dials OUT to the api's
-* desktop-portal WebSocket (authenticating with a short-lived device token
-* minted from the CLI session), then runs inbound `exec` directives via a
-* `JobManager`. Reconnects with backoff while enabled; disabling drops presence
-* and kills any in-flight children. No inbound port is ever opened.
-*
-* Access stays default-deny: connecting only makes the machine reachable — an
-* agent can't run anything until the user grants it (`grantAgent`).
-*/
-var PortalClient = class {
-	enabled = false;
-	disposed = false;
-	ws = null;
-	jobs = null;
-	status = "off";
-	error = null;
-	deviceId = null;
-	granted = /* @__PURE__ */ new Set();
-	machineName;
-	friendlyName;
-	constructor(opts) {
-		this.opts = opts;
-		const identity = machineIdentity();
-		this.machineName = identity.machineName;
-		this.friendlyName = identity.friendlyName;
-	}
-	isEnabled() {
-		return this.enabled;
-	}
-	isGranted(agentId) {
-		return this.granted.has(agentId);
-	}
-	enable() {
-		if (this.enabled || this.disposed) return;
-		this.enabled = true;
-		this.error = null;
-		this.connectLoop();
-	}
-	disable() {
-		if (!this.enabled) return;
-		this.enabled = false;
-		this.jobs?.killAll();
-		this.ws?.close();
-		this.ws = null;
-		this.deviceId = null;
-		this.granted = /* @__PURE__ */ new Set();
-		this.setStatus("off");
-	}
-	/**
-	* Tear down for good (app quit). Kills children synchronously and closes the
-	* socket so it stops holding the event loop open — otherwise the process
-	* would hang after the TUI is destroyed.
-	*/
-	dispose() {
-		this.disposed = true;
-		this.enabled = false;
-		this.jobs?.killAll();
-		this.jobs = null;
-		this.ws?.close();
-		this.ws = null;
-	}
-	/** Grant one agent access to this machine (default-deny; user-initiated). */
-	async grantAgent(agentId) {
-		const deviceId = await this.ensureDeviceId();
-		const res = await this.fetchJson(`/api/v1/portal/devices/${encodeURIComponent(deviceId)}/grants`, {
-			method: "POST",
-			body: JSON.stringify({ agentId })
-		});
-		if (!res.ok) throw new Error(`grant failed (${res.status}): ${await shortBody(res)}`);
-		this.granted.add(agentId);
-		this.emit();
-	}
-	setStatus(status, error = null) {
-		this.status = status;
-		this.error = error;
-		this.emit();
-	}
-	emit() {
-		this.opts.onState({
-			status: this.status,
-			machineName: this.machineName,
-			friendlyName: this.friendlyName,
-			error: this.error,
-			grantedAgentIds: [...this.granted]
-		});
-	}
-	async connectLoop() {
-		let backoff = INITIAL_BACKOFF_MS;
-		while (this.enabled && !this.disposed) {
-			this.setStatus("connecting");
-			try {
-				const token = await this.mintDeviceToken();
-				await this.runConnection(token);
-				backoff = INITIAL_BACKOFF_MS;
-			} catch (err) {
-				if (!this.enabled || this.disposed) break;
-				this.setStatus("error", errorMessage(err));
-			}
-			if (!this.enabled || this.disposed) break;
-			await sleep(backoff);
-			backoff = Math.min(backoff * 2, MAX_BACKOFF_MS);
-		}
-	}
-	runConnection(token) {
-		return new Promise((resolve) => {
-			const ws = new WebSocket(portalWsUrl(this.opts.appUrl, this.machineName, this.friendlyName), {
-				headers: { authorization: `Bearer ${token}` },
-				maxPayload: MAX_WS_FRAME_BYTES
-			});
-			this.ws = ws;
-			const jobs = new JobManager({
-				cwd: this.opts.cwd,
-				send: (frame) => {
-					if (ws.readyState === WebSocket.OPEN) ws.send(frame);
-				}
-			});
-			this.jobs = jobs;
-			ws.on("open", () => {
-				this.setStatus("connected");
-				this.refreshDevice();
-			});
-			ws.on("message", (data, isBinary) => {
-				if (isBinary) jobs.handleFrame(toBuffer$1(data));
-			});
-			ws.on("error", (err) => {
-				this.error = errorMessage(err);
-			});
-			ws.on("close", () => {
-				jobs.killAll();
-				if (this.jobs === jobs) this.jobs = null;
-				if (this.ws === ws) this.ws = null;
-				resolve();
-			});
-		});
-	}
-	async mintDeviceToken() {
-		const res = await this.fetchJson("/api/v1/portal/device-token", { method: "POST" });
-		if (!res.ok) throw new Error(`device-token failed (${res.status}): ${await shortBody(res)}`);
-		return deviceTokenSchema.parse(await res.json()).token;
-	}
-	async ensureDeviceId() {
-		if (this.deviceId) return this.deviceId;
-		for (let attempt = 0; attempt < 10; attempt += 1) {
-			await this.refreshDevice();
-			if (this.deviceId) return this.deviceId;
-			await sleep(300);
-		}
-		throw new Error("this machine is not connected yet");
-	}
-	async refreshDevice() {
-		try {
-			const res = await this.fetchJson("/api/v1/portal/devices", { method: "GET" });
-			if (!res.ok) return;
-			const { devices } = devicesSchema.parse(await res.json());
-			const mine = devices.find((device) => device.machineName === this.machineName);
-			if (!mine) return;
-			this.deviceId = mine.id;
-			this.granted = new Set(mine.grantedAgentIds);
-			this.emit();
-		} catch (_error) {}
-	}
-	fetchJson(path, init) {
-		return fetch(`${this.opts.appUrl}${path}`, {
-			method: init.method,
-			headers: {
-				authorization: `Bearer ${this.opts.sessionToken}`,
-				accept: "application/json",
-				...init.body ? { "content-type": "application/json" } : {}
-			},
-			...init.body ? { body: init.body } : {}
-		});
-	}
-};
-function toBuffer$1(data) {
-	if (Buffer.isBuffer(data)) return data;
-	if (Array.isArray(data)) return Buffer.concat(data);
-	return Buffer.from(data);
-}
-function shortBody(res) {
-	return res.text().then((text) => text.slice(0, 120)).catch(() => "");
-}
-function sleep(ms) {
-	return new Promise((resolve) => setTimeout(resolve, ms));
-}
-
 //#endregion
 //#region src/chat/portal/use-portal.ts
 /**
@@ -2000,7 +1559,7 @@ function parseDroppedPaths(text) {
 			i += 1;
 			continue;
 		}
-		if (/\s/.test(ch)) {
+		if (ch === " " || ch === "	") {
 			if (current) {
 				tokens.push(current);
 				current = "";
@@ -2026,6 +1585,28 @@ function parseDroppedPaths(text) {
 	}
 	return paths;
 }
+const TEXT_MIME_BY_EXT = {
+	".txt": "text/plain",
+	".md": "text/markdown",
+	".markdown": "text/markdown",
+	".csv": "text/csv",
+	".tsv": "text/tab-separated-values",
+	".json": "application/json",
+	".yaml": "application/yaml",
+	".yml": "application/yaml",
+	".xml": "application/xml",
+	".html": "text/html",
+	".htm": "text/html",
+	".css": "text/css",
+	".js": "text/javascript",
+	".ts": "text/plain",
+	".tsx": "text/plain",
+	".jsx": "text/plain",
+	".py": "text/x-python",
+	".sh": "text/x-shellscript",
+	".log": "text/plain",
+	".svg": "image/svg+xml"
+};
 /** Decide how to handle a paste. `kind: 'binary'` events carry the mime of
 * bytes the terminal forwarded; text events carry the decoded paste text.
 *
@@ -2051,25 +1632,30 @@ function routePaste(input) {
 	return { kind: "text" };
 }
 /**
-* Resolve path candidates into images using the filesystem and file magic,
-* not extensions. The whole batch must be regular image files; otherwise the
-* caller should restore the original paste as text.
+* Resolve path candidates into attachable files. Every path must be an
+* existing regular file; otherwise the caller should restore the original
+* paste as text (an all-or-nothing rule so a paste meant as text — which
+* merely *looks* path-shaped — is never partially eaten).
+*
+* Any file type attaches. The mediaType comes from magic bytes when
+* detectable, an extension map for the plain-text formats magic can't see,
+* and application/octet-stream as the last resort — the attachments API
+* accepts any mediaType (100MB cap enforced server-side at presign).
 */
-async function resolveDroppedImages(paths) {
+async function resolveDroppedFiles(paths) {
 	try {
-		const images = await Promise.all(paths.map(async (path) => {
+		const files = await Promise.all(paths.map(async (path) => {
 			if (!(await stat(path)).isFile()) return null;
 			const data = new Uint8Array(await readFile(path));
-			const detected = await fileTypeFromBuffer(data);
-			if (!detected?.mime.startsWith("image/")) return null;
+			const mediaType = (await fileTypeFromBuffer(data))?.mime ?? TEXT_MIME_BY_EXT[extname(path).toLowerCase()] ?? "application/octet-stream";
 			return {
 				fileName: basename(path),
-				mediaType: detected.mime,
+				mediaType,
 				data
 			};
 		}));
-		if (!images.every((image) => image !== null)) return null;
-		return images;
+		if (!files.every((file) => file !== null)) return null;
+		return files;
 	} catch (_error) {
 		return null;
 	}
@@ -3215,12 +2801,15 @@ function Row({ barColor, children }) {
 }
 function RenderItem({ item }) {
 	switch (item.kind) {
-		case "user": return /* @__PURE__ */ jsx(Row, {
+		case "user": return /* @__PURE__ */ jsxs(Row, {
 			barColor: theme.accent,
-			children: /* @__PURE__ */ jsx("text", {
+			children: [item.text ? /* @__PURE__ */ jsx("text", {
 				fg: theme.user,
 				children: item.text
-			})
+			}) : null, item.attachments && item.attachments.length > 0 ? /* @__PURE__ */ jsxs("text", {
+				fg: theme.muted,
+				children: ["⎘ ", item.attachments.join(" · ")]
+			}) : null]
 		});
 		case "pending-steer": return /* @__PURE__ */ jsx(Row, {
 			barColor: theme.dim,
@@ -3641,10 +3230,15 @@ function uiMessagesToItems(messages) {
 	for (const m of messages) {
 		if (m.role === "user") {
 			const text = m.parts.map((p) => p.type === "text" ? p.text : "").join("").trim();
-			if (text) out.push({
+			const attachments = m.parts.filter((p) => p.type === "data-anyone-attachment").map((p) => {
+				const data = isRecord(p) && "data" in p && isRecord(p.data) ? p.data : null;
+				return data && typeof data.fileName === "string" ? data.fileName : "file";
+			});
+			if (text || attachments.length > 0) out.push({
 				kind: "user",
 				id: m.id,
-				text
+				text,
+				...attachments.length > 0 ? { attachments } : {}
 			});
 			continue;
 		}
@@ -5380,6 +4974,7 @@ const composerKeyBindings = [
 ];
 /** Cap composer growth; past this the textarea scrolls its content instead. */
 const maxComposerRows = 8;
+const maxAttachments = 10;
 function isNewConversation(c) {
 	return "kind" in c && c.kind === "new";
 }
@@ -5388,12 +4983,13 @@ function formatBytes(bytes) {
 	if (bytes < 1024 * 1024) return `${Math.round(bytes / 1024)} KB`;
 	return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
 }
-/**
-* Builds the transcript bubble text for a sent user message: the typed text
-* plus a line per attachment, so an image-only send still shows something.
-*/
-function userItemText(text, attachments) {
-	return [text, ...attachments.map((a) => `📎 ${a.fileName}`)].filter((line) => line.length > 0).join("\n");
+/** Status glyph for a staged attachment chip: uploading / ready / failed. */
+function attachmentGlyph(a) {
+	switch (a.status) {
+		case "uploading": return "↑";
+		case "ready": return "✓";
+		case "error": return `✗ ${a.errorText ?? "upload failed"}`;
+	}
 }
 /**
 * Open a URL in the user's local browser. Best-effort: over SSH there may be
@@ -5435,14 +5031,16 @@ function ChatScreen({ agent, conversation }) {
 	const [helpOpen, setHelpOpen] = useState(false);
 	const [ctrlCArmed, setCtrlCArmed] = useState(false);
 	const [composerRows, setComposerRows] = useState(1);
-	const [pending, setPending] = useState([]);
-	const [uploading, setUploading] = useState(false);
+	const [attachments, setAttachments] = useState([]);
+	const uploadsRef = useRef(/* @__PURE__ */ new Map());
 	const [credPrompt, setCredPrompt] = useState(null);
 	const credPromptOpen = credPrompt !== null;
 	const runRef = useRef(run);
 	runRef.current = run;
 	const itemsRef = useRef(items);
 	itemsRef.current = items;
+	const attachmentsRef = useRef(attachments);
+	attachmentsRef.current = attachments;
 	const inputRef = useRef(input);
 	inputRef.current = input;
 	const credPromptRef = useRef(credPrompt);
@@ -5462,8 +5060,8 @@ function ChatScreen({ agent, conversation }) {
 	const scrollRef = useRef(null);
 	const composerRef = useRef(null);
 	const composerBoxHeight = composerRows + 2;
-	const pendingVisible = !grantPrompt && !credPrompt && (pending.length > 0 || uploading);
-	const pendingRows = pendingVisible ? pending.length + 2 : 0;
+	const pendingVisible = !grantPrompt && !credPrompt && attachments.length > 0;
+	const pendingRows = pendingVisible ? attachments.length + 2 : 0;
 	const credPromptHeight = 4 + (credPrompt && (credPrompt.error || credPrompt.submitting) ? 1 : 0);
 	const bottomBoxHeight = credPrompt ? credPromptHeight : composerBoxHeight;
 	const scrollHeight = Math.max(3, height - 5 - bottomBoxHeight - pendingRows);
@@ -5599,34 +5197,64 @@ function ChatScreen({ agent, conversation }) {
 			cancelled = true;
 		};
 	}, []);
-	const sendContent = useCallback(async (content, attachments, opts) => {
+	const sendContent = useCallback(async (content, staged, opts) => {
 		if (!rest) return;
 		const trimmed = content.trim();
-		if (!trimmed && attachments.length === 0) return;
+		if (!trimmed && staged.length === 0) return;
 		const echo = opts?.echo !== false;
 		const optimisticId = crypto.randomUUID();
+		const stagedNames = staged.map((a) => a.fileName);
 		if (echo) setItems((prev) => [...prev, {
 			kind: "user",
 			id: optimisticId,
-			text: userItemText(trimmed, attachments)
+			text: trimmed,
+			...stagedNames.length > 0 ? { attachments: stagedNames } : {}
 		}]);
 		const wasStreaming = runRef.current.kind === "streaming";
 		if (!wasStreaming) setRun({ kind: "sending" });
 		try {
+			const attachmentIds = [];
+			const restorable = [];
+			const settled = await Promise.allSettled(staged.map((a) => uploadsRef.current.get(a.tempId)));
+			for (const [i, result] of settled.entries()) {
+				const row = staged[i];
+				if (!row) continue;
+				if (result.status === "fulfilled" && result.value) {
+					attachmentIds.push(result.value.id);
+					restorable.push({
+						...row,
+						status: "ready",
+						errorText: null
+					});
+				} else {
+					uploadsRef.current.delete(row.tempId);
+					setItems((prev) => [...prev, {
+						kind: "error",
+						id: crypto.randomUUID(),
+						text: `attachment failed: ${row.fileName}${result.status === "rejected" ? ` (${errorMessage(result.reason)})` : ""}`
+					}]);
+				}
+			}
+			if (!trimmed && attachmentIds.length === 0) {
+				setItems((prev) => prev.filter((m) => m.id !== optimisticId));
+				if (!wasStreaming) setRun({ kind: "idle" });
+				return;
+			}
 			const result = await rest.sendMessage({
 				agentId: agent.id,
 				conversationId,
 				content: trimmed,
-				attachmentIds: attachments.map((a) => a.id),
+				attachmentIds,
 				clientSurface: "tui"
 			});
+			for (const row of restorable) uploadsRef.current.delete(row.tempId);
 			if (result.isNewConversation) setConversationId(result.conversationId);
 			if (result.steered) {
 				const directiveId = result.directive?.id;
 				if (directiveId) setItems((prev) => prev.map((m) => m.id === optimisticId ? {
 					kind: "pending-steer",
 					id: directiveId,
-					text: userItemText(trimmed, attachments)
+					text: trimmed
 				} : m));
 				const current = runRef.current;
 				if (!(current.kind === "streaming" && current.runId === result.runId)) attachToRun(result.runId);
@@ -5639,10 +5267,13 @@ function ChatScreen({ agent, conversation }) {
 				id: crypto.randomUUID(),
 				text: errorMessage(err)
 			}]);
-			if (echo) {
-				setInput((existing) => existing ? existing : trimmed);
-				setPending((prev) => prev.length > 0 ? prev : attachments);
-			}
+			if (echo) setInput((existing) => existing ? existing : trimmed);
+			const restore = staged.filter((a) => uploadsRef.current.has(a.tempId));
+			if (restore.length > 0) setAttachments((prev) => [...restore.map((a) => ({
+				...a,
+				status: "ready",
+				errorText: null
+			})), ...prev]);
 			if (!wasStreaming) setRun({ kind: "idle" });
 		}
 	}, [
@@ -5942,8 +5573,8 @@ function ChatScreen({ agent, conversation }) {
 	]);
 	const submit = useCallback(() => {
 		const content = input.trim();
-		const attachments = pending;
-		if (!content && attachments.length === 0) return;
+		const staged = attachments.filter((a) => a.status !== "error");
+		if (!content && staged.length === 0) return;
 		const routed = routeInput(content);
 		if (routed.kind !== "message") {
 			history.append(content);
@@ -5960,11 +5591,11 @@ function ChatScreen({ agent, conversation }) {
 		setInput("");
 		composerRef.current?.clear();
 		setComposerRows(1);
-		setPending([]);
-		sendContent(content, attachments);
+		setAttachments([]);
+		sendContent(content, staged);
 	}, [
 		input,
-		pending,
+		attachments,
 		sendContent,
 		history,
 		runLocalShell,
@@ -5978,38 +5609,58 @@ function ChatScreen({ agent, conversation }) {
 		setInput(composer.plainText);
 		setComposerRows(Math.min(Math.max(composer.editorView.getTotalVirtualLineCount(), 1), maxComposerRows));
 	}, []);
-	const stageImages = useCallback(async (images) => {
-		if (!rest || uploading || images.length === 0) return;
-		setUploading(true);
-		try {
-			for (const image of images) {
-				const uploaded = await rest.uploadAttachment({
-					agentId: agent.id,
-					fileName: image.fileName,
-					mediaType: image.mediaType,
-					data: image.data
-				});
-				setPending((prev) => [...prev, uploaded]);
-			}
-		} catch (err) {
+	/**
+	* Stage a pasted/dropped file in the composer tray and start its upload
+	* immediately (the web composer's behavior). Submit awaits the in-flight
+	* uploads and carries the resulting attachment ids; the composer never
+	* blocks while an upload runs.
+	*/
+	const stageAttachment = useCallback(({ fileName, mediaType, data }) => {
+		if (!rest) return;
+		if (attachmentsRef.current.length >= maxAttachments) {
 			setItems((prev) => [...prev, {
 				kind: "error",
 				id: crypto.randomUUID(),
-				text: `couldn't attach image: ${errorMessage(err)}`
+				text: `attachment limit reached (${maxAttachments}) — ${fileName} skipped`
 			}]);
-		} finally {
-			setUploading(false);
+			return;
 		}
-	}, [
-		rest,
-		uploading,
-		agent.id
-	]);
+		const tempId = crypto.randomUUID();
+		setAttachments((prev) => [...prev, {
+			tempId,
+			fileName,
+			sizeBytes: data.byteLength,
+			status: "uploading",
+			errorText: null
+		}]);
+		const promise = rest.uploadAttachment({
+			agentId: agent.id,
+			fileName,
+			mediaType,
+			data
+		});
+		uploadsRef.current.set(tempId, promise);
+		promise.then(() => {
+			setAttachments((prev) => prev.map((a) => a.tempId === tempId ? {
+				...a,
+				status: "ready"
+			} : a));
+		}).catch((err) => {
+			setAttachments((prev) => prev.map((a) => a.tempId === tempId ? {
+				...a,
+				status: "error",
+				errorText: errorMessage(err)
+			} : a));
+		});
+	}, [rest, agent.id]);
+	const stageFiles = useCallback((files) => {
+		for (const file of files) stageAttachment(file);
+	}, [stageAttachment]);
 	const pasteImage = useCallback(async () => {
 		const image = await readClipboardImage();
 		if (!image) return;
-		await stageImages([image]);
-	}, [stageImages]);
+		stageAttachment(image);
+	}, [stageAttachment]);
 	usePaste((event) => {
 		if (modelPickerOpen || themePickerOpen || helpOpen || credPromptOpen || grantPrompt) return;
 		const text = event.metadata?.kind === "binary" ? "" : decodePasteBytes(event.bytes);
@@ -6022,7 +5673,7 @@ function ChatScreen({ agent, conversation }) {
 			case "binary-image": {
 				event.preventDefault();
 				const ext = route.mediaType.split("/")[1]?.split("+")[0] ?? "png";
-				stageImages([{
+				stageFiles([{
 					fileName: `pasted-image-${(/* @__PURE__ */ new Date()).toISOString().replace(/[:.]/g, "-")}.${ext}`,
 					mediaType: route.mediaType,
 					data: event.bytes
@@ -6035,9 +5686,9 @@ function ChatScreen({ agent, conversation }) {
 				return;
 			case "dropped-paths":
 				event.preventDefault();
-				resolveDroppedImages(route.paths).then((images) => {
-					if (images) {
-						stageImages(images);
+				resolveDroppedFiles(route.paths).then((files) => {
+					if (files) {
+						stageFiles(files);
 						return;
 					}
 					composerRef.current?.insertText(route.text);
@@ -6227,8 +5878,12 @@ function ChatScreen({ agent, conversation }) {
 			pasteImage();
 			return;
 		}
-		if (key.name === "x" && key.ctrl) {
-			setPending((prev) => prev.slice(0, -1));
+		if (key.name === "x" && key.ctrl || key.name === "backspace" && attachmentsRef.current.length > 0 && !composerRef.current?.plainText) {
+			const last = attachmentsRef.current.at(-1);
+			if (last) {
+				uploadsRef.current.delete(last.tempId);
+				setAttachments((prev) => prev.filter((a) => a.tempId !== last.tempId));
+			}
 			return;
 		}
 		if (key.name === "l" && key.ctrl) openInBrowser();
@@ -6347,19 +6002,17 @@ function ChatScreen({ agent, conversation }) {
 					marginTop: 1,
 					flexDirection: "column"
 				},
-				children: [pending.map((a) => /* @__PURE__ */ jsxs("text", {
-					fg: theme.muted,
+				children: [attachments.map((a) => /* @__PURE__ */ jsxs("text", {
+					fg: a.status === "error" ? theme.error : theme.muted,
 					children: [
 						"📎 ",
 						a.fileName,
 						" (",
 						formatBytes(a.sizeBytes),
-						")"
+						") ",
+						attachmentGlyph(a)
 					]
-				}, a.id)), uploading ? /* @__PURE__ */ jsx("text", {
-					fg: theme.dim,
-					children: "uploading image…"
-				}) : /* @__PURE__ */ jsx("text", {
+				}, a.tempId)), /* @__PURE__ */ jsx("text", {
 					fg: theme.dim,
 					children: "ctrl+x remove last"
 				})]