Upload attachments immediately with progress

docs/screenshot-input.md

@@ -121,14 +121,17 @@ same paste/drop behavior:
   for several) as its text. Image-only server delivery retains the more specific
   `screenshot` wording.
 - At most five files may be attached to one prompt.
-- The send button is disabled while an upload is active.
-- A failed upload leaves the draft and pending files intact and names the
-  failure next to the affected chip.
-
-Pending files remain browser `File` objects until the operator submits. This
-means abandoning or editing a draft does not create server-side orphan files.
-`URL.createObjectURL()` supplies local previews and is revoked when a chip is
-removed or the component unmounts.
+- Choosing, pasting, or dropping a file starts its upload immediately. Each
+  chip shows transferred bytes, percentage, and server-confirmed success.
+- The send button is disabled until every upload has succeeded.
+- A failed upload leaves the draft and pending files intact, names the exact
+  server/connection failure next to the affected chip, and offers retry when
+  retrying the same bytes can help.
+
+Pending files remain browser `File` objects for retry even after the server has
+stored them. `URL.createObjectURL()` supplies local previews and is revoked when
+a chip is removed or the component unmounts. Successful files are session-owned
+and follow that session's existing deletion/pruning lifecycle.
 
 ### 5.2 Rendered terminal reader
 
@@ -149,7 +152,8 @@ xterm owns the visible composer, so Agent Manager cannot reliably place its own
 persistent attachment chips inside it. File paste/drop therefore behaves as a
 short transaction:
 
-1. Show `uploading file…` over the bottom of the pane.
+1. Show `uploading file · 0%` over the bottom of the pane and update it as bytes
+   transfer.
 2. Upload the file without sending a prompt.
 3. On success, attach it through the harness adapter or paste a formatted path
    reference into the CLI composer.
@@ -235,9 +239,11 @@ session's own directory, and never join an arbitrary browser-supplied filename.
 
 ### 6.3 Lifecycle
 
-- Composer files are uploaded only on submit.
-- Terminal files are uploaded immediately because xterm needs a server path to
-  insert.
+- Composer and terminal files are uploaded immediately on attachment. Prompt
+  delivery only reuses server-confirmed attachment ids; it never starts an
+  upload.
+- Quick creation first allocates a stopped session because attachment ids are
+  session-scoped, then immediately uploads into it without launching the CLI.
 - Successful attachments remain while the session exists, including while it
   is stopped.
 - Deleting a session removes its managed attachment directory. It does not
@@ -415,13 +421,14 @@ file.
 ### 8.3 First prompt without a boot race
 
 The quickstart path currently places an initial prompt on the CLI launch command
-because typing into a booting TUI could lose it. Attachment quickstart needs a
-two-step browser flow—create the session, then upload to its attachment scope—so
-`deliver()` must preserve that property:
+because typing into a booting TUI could lose it. On the first attachment it uses
+a two-step browser flow—create a stopped session, then upload to its attachment
+scope—so `deliver()` must preserve that property:
 
 1. `POST /api/sessions` without a prompt creates a stopped session.
-2. Upload all pending files to the returned session id.
-3. `POST /api/sessions/:id/input` with text and attachment ids.
+2. Upload each file immediately to the returned session id, with byte progress.
+3. When the operator launches, `POST /api/sessions/:id/input` with text and the
+   already-uploaded attachment ids.
 4. If the session has never started and its CLI has `withPrompt`, store the
    fully formatted prompt as `pendingPrompt`; for Codex, also retain the
    validated image paths as `pendingImagePaths`; then call `ensureRunning()`.
@@ -467,7 +474,7 @@ Add a small module, `web/src/lib/attachments.ts`, containing:
 - `transferMayContainFile(DataTransfer)`;
 - duplicate suppression across `items` and `files`;
 - local preview creation/revocation; and
-- sequential or bounded-concurrency upload helpers.
+- sequential upload helpers that report progress and preserve per-file errors.
 
 Use sequential uploads initially. Five files is the maximum, bucket writes are
 the bottleneck, and simpler ordering makes chip status deterministic.
@@ -479,10 +486,10 @@ Expected file changes:
 
 | File | Change |
 |---|---|
-| `web/src/api.ts` | attachment types, upload, preview URL, `sendInput(..., attachmentIds)` |
+| `web/src/api.ts` | attachment types, progress-aware XHR upload, preview URL, `sendInput(..., attachmentIds)` |
 | `web/src/lib/attachments.ts` | clipboard/drop extraction and pending-file lifecycle |
 | `web/src/components/Attachments.tsx` | image previews, file badges, picker, progress/error states |
-| `web/src/components/Sidebar.tsx` | quickstart paste/drop and two-step submit |
+| `web/src/components/Sidebar.tsx` | quickstart paste/drop, stopped-target creation, and immediate upload |
 | `web/src/components/Overview.tsx` | reply attachments and file-only send |
 | `web/src/components/TerminalPane.tsx` | capture-phase file paste/drop and mobile file paste |
 | `web/src/components/conversation/ConversationView.tsx` | rendered-reader attachments and structured send |
@@ -568,7 +575,8 @@ Markdown logs, and needlessly injects binary material into traces.
 |---|---|---|
 | clipboard contains no file | ordinary text paste continues, or no-op | no |
 | file larger than limit | chip says `too large (100 MB max)` | no |
-| network/write failure | chip or terminal overlay says upload failed | no |
+| interrupted/offline connection | chip or terminal overlay names the connection failure and offers retry | no |
+| non-JSON proxy rejection | chip classifies the HTTP status (including proxy `413`) | no |
 | one of several uploads fails | successful files remain, all chips stay for retry | no |
 | attachment id missing at send | `attachment no longer exists`; retain draft | no |
 | terminal socket closes after upload | say file was saved but not inserted; offer retry | no |
@@ -576,8 +584,8 @@ Markdown logs, and needlessly injects binary material into traces.
 | CLI cannot inspect path | agent sees explicit path and can report the limitation | yes |
 
 For multi-file composer sends, atomicity applies to delivery, not storage: files
-may upload one by one, but `/input` runs only after all have succeeded. A retry
-may reuse already uploaded ids while uploading only failed files.
+start uploading when attached, but `/input` runs only after all have succeeded.
+A retry reuses already uploaded ids and transfers only failed files.
 
 ## 13. Testing
 
@@ -607,8 +615,12 @@ may reuse already uploaded ids while uploading only failed files.
   chip.
 - Plain-text paste is unchanged.
 - Removing a chip revokes its preview and excludes it from upload.
-- A multi-file submission waits for every upload before `/input`.
-- Every chip mutation remains disabled for the complete multi-file send.
+- Upload starts when a file is attached, before `/input` or launch.
+- Progress exposes transferred bytes/percentage and waits for server confirmation
+  at 100%.
+- Interrupted connections and non-JSON proxy errors remain actionable at the
+  affected chip, with retry where appropriate.
+- A multi-file submission remains disabled until every upload succeeds.
 - Terminal paste receives a server acknowledgement and inserts without Return.
 - A terminal stopped after upload reports saved-but-not-inserted, disables new
   attachments, and can retry the stored attachment after restart.

server/screenshot-input.test.mjs

@@ -7,6 +7,7 @@
  *   - attachment chips cannot mutate an in-flight send;
  *   - one clipboard image stays one chip across browser DataTransfer views;
  *   - document files stay inert downloads and can be sent beside images;
+ *   - attachment-time uploads expose progress and actionable transport errors;
  *   - both rendered reader and Overview composers send structured attachments;
  *   - the creation dialog has no redundant file picker.
  *
@@ -24,7 +25,8 @@ const HERE = path.dirname(fileURLToPath(import.meta.url));
 const ROOT = path.dirname(HERE);
 const DATA_DIR = fs.mkdtempSync(path.join(os.tmpdir(), 'am-screenshot-ui-'));
 const PUBLIC_DIR = process.env.SCREENSHOT_PUBLIC_DIR || path.join(DATA_DIR, 'public');
-const API = 'http://127.0.0.1:7896';
+const PORT = process.env.SCREENSHOT_PORT || '7896';
+const API = `http://127.0.0.1:${PORT}`;
 const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
 
 const png = Buffer.alloc(45);
@@ -32,6 +34,9 @@ Buffer.from([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a]).copy(png);
 png.writeUInt32BE(13, 8); Buffer.from('IHDR').copy(png, 12);
 png.writeUInt32BE(1, 16); png.writeUInt32BE(1, 20);
 Buffer.from('IEND').copy(png, 37);
+const progressPng = Buffer.alloc(2 * 1024 * 1024);
+png.subarray(0, png.length - 12).copy(progressPng);
+png.subarray(png.length - 12).copy(progressPng, progressPng.length - 12);
 const pdf = Buffer.from('%PDF-1.7\nopaque pdf data');
 const docx = Buffer.from('PK\x03\x04opaque office data');
 
@@ -73,7 +78,7 @@ const backend = spawn('node', ['src/index.js'], {
   cwd: HERE,
   env: {
     ...BASE_ENV,
-    PORT: '7896', DATA_DIR, PUBLIC_DIR, AM_BASHRC: '/nonexistent', SPACE_HOST: '',
+    PORT, DATA_DIR, PUBLIC_DIR, AM_BASHRC: '/nonexistent', SPACE_HOST: '',
     AM_ALLOW_MISSING_ORIGIN: '1',
     AM_TEST_REPAINT_CMD: 'bash --noprofile --norc',
   },
@@ -226,9 +231,11 @@ try {
   await watcher.locator('.sidebar .row[title^="screenshot-e2e"]').first().click();
   await watcher.locator('.pane-head .ph-image').waitFor({ state: 'visible' });
   await waitFor(() => watcher.locator('.pane-head .ph-image').isDisabled());
+  const watcherPickerDisabled = await watcher.locator('.pane-head .ph-image').isDisabled();
+  const watcherPickerTitle = await watcher.locator('.pane-head .ph-image').getAttribute('title');
   check('a shared-terminal watcher cannot inject into the controller composer',
-    await watcher.locator('.pane-head .ph-image').isDisabled()
-      && (await watcher.locator('.pane-head .ph-image').getAttribute('title'))?.includes('take control'));
+    watcherPickerDisabled && !!watcherPickerTitle?.includes('take control'),
+    JSON.stringify({ watcherPickerDisabled, watcherPickerTitle }));
   await watcher.close();
 
   // Reader mode is an overlay above the mounted terminal. Its own composer must
@@ -267,8 +274,80 @@ try {
     await page.locator('.pane-head .ph-image').isVisible()
       && await page.locator('.pane-reader .image-pick').count() === 0
       && await page.locator('.pane-reader .image-file-input').count() === 1);
-  await readerPicker.setInputFiles({ name: 'reader.png', mimeType: 'image/png', buffer: png });
-  await page.locator('.pane-reader .image-chip').waitFor({ state: 'visible' });
+
+  // The failure that motivated immediate uploads: once the HTTP connection is
+  // cut, fetch used to surface only "Failed to fetch" after Send. The XHR
+  // transport must classify it at attachment time and keep a retry beside it.
+  await page.route(`**/api/sessions/${id}/attachments`, (route) => route.abort('connectionreset'), { times: 1 });
+  await readerPicker.setInputFiles({
+    name: 'interrupted.bin', mimeType: 'application/octet-stream', buffer: Buffer.alloc(256 * 1024),
+  });
+  const interruptedChip = page.locator('.pane-reader .image-chip', { hasText: 'interrupted.bin' });
+  await interruptedChip.filter({ has: page.locator('.image-chip-retry') }).waitFor({ state: 'visible' });
+  const interruptedText = await interruptedChip.locator('.image-chip-meta').textContent();
+  check('an interrupted upload fails immediately with a reason and retry',
+    !!interruptedText?.includes('connection was interrupted')
+      && await interruptedChip.locator('.image-chip-retry').isVisible(),
+    JSON.stringify({ interruptedText }));
+  await interruptedChip.locator('.image-chip-retry').click();
+  await interruptedChip.filter({ has: page.locator('.image-chip-meta', { hasText: 'uploaded' }) }).waitFor();
+  await interruptedChip.getByRole('button', { name: 'Remove interrupted.bin' }).click();
+
+  // Hugging Face's ingress may answer before Express with an HTML error page.
+  // Preserve the status as a useful diagnosis instead of reducing it to "413".
+  await page.route(`**/api/sessions/${id}/attachments`, (route) => route.fulfill({
+    status: 413, contentType: 'text/html', body: '<h1>Payload Too Large</h1>',
+  }), { times: 1 });
+  await readerPicker.setInputFiles({
+    name: 'proxy-limit.bin', mimeType: 'application/octet-stream', buffer: Buffer.alloc(1024),
+  });
+  const proxyChip = page.locator('.pane-reader .image-chip', { hasText: 'proxy-limit.bin' });
+  await proxyChip.filter({ has: page.locator('.image-chip-retry') }).waitFor();
+  const proxyText = await proxyChip.locator('.image-chip-meta').textContent();
+  check('a non-JSON proxy rejection keeps an actionable HTTP reason',
+    !!proxyText?.includes('proxy rejected this file as too large') && proxyText.includes('HTTP 413'),
+    JSON.stringify({ proxyText }));
+  await proxyChip.getByRole('button', { name: 'Remove proxy-limit.bin' }).click();
+
+  // Client-side size rejection happens at attachment time and never offers a
+  // futile retry. The server separately exercises its streaming 100 MiB cap.
+  const tooLargePath = path.join(DATA_DIR, 'too-large.bin');
+  fs.writeFileSync(tooLargePath, '');
+  fs.truncateSync(tooLargePath, 101 * 1024 * 1024);
+  await readerPicker.setInputFiles(tooLargePath);
+  const tooLargeChip = page.locator('.pane-reader .image-chip', { hasText: 'too-large.bin' });
+  await tooLargeChip.filter({ has: page.locator('.image-chip-meta', { hasText: 'too large' }) }).waitFor();
+  check('a large file is rejected before upload with its 100 MB limit',
+    (await tooLargeChip.locator('.image-chip-meta').textContent())?.includes('100 MB max')
+      && await tooLargeChip.locator('.image-chip-retry').count() === 0);
+  await tooLargeChip.getByRole('button', { name: 'Remove too-large.bin' }).click();
+
+  // Hold the intercepted request lifecycle so the progress surface can be
+  // inspected before the response changes the chip to server-confirmed success.
+  let releaseReaderUpload;
+  let sawReaderUpload;
+  const readerUploadReached = new Promise((resolve) => { sawReaderUpload = resolve; });
+  const readerUploadHold = new Promise((resolve) => { releaseReaderUpload = resolve; });
+  await page.route(`**/api/sessions/${id}/attachments`, async (route) => {
+    const response = await route.fetch();
+    sawReaderUpload();
+    await readerUploadHold;
+    await route.fulfill({ response });
+  }, { times: 1 });
+  await readerPicker.setInputFiles({ name: 'reader.png', mimeType: 'image/png', buffer: progressPng });
+  await Promise.race([
+    readerUploadReached,
+    sleep(10_000).then(() => { throw new Error('reader upload did not start on attachment'); }),
+  ]);
+  const readerChip = page.locator('.pane-reader .image-chip', { hasText: 'reader.png' });
+  await readerChip.locator('.image-chip-progress').waitFor({ state: 'visible' });
+  const readerProgress = await readerChip.locator('.image-chip-progress').getAttribute('aria-valuenow');
+  const readerProgressText = await readerChip.locator('.image-chip-meta').textContent();
+  check('reader upload starts before Send and reports byte progress',
+    readerProgress != null && !!readerProgressText?.includes('%') && readerProgressText.includes('/'),
+    JSON.stringify({ readerProgress, readerProgressText }));
+  releaseReaderUpload();
+  await readerChip.filter({ has: page.locator('.image-chip-meta', { hasText: 'uploaded' }) }).waitFor();
   let readerInput;
   let sawReaderInput;
   const readerInputReached = new Promise((resolve) => { sawReaderInput = resolve; });
@@ -291,11 +370,13 @@ try {
   await page.locator('.sidebar .ov-row').click();
   await page.locator('.ovt-tile').filter({
     has: page.locator('.ovt-name', { hasText: /^screenshot-e2e$/ }),
-  }).click();
+  }).last().click();
   const overviewPicker = page.locator('.ovw-win .image-file-input');
   await overviewPicker.waitFor({ state: 'attached' });
   await overviewPicker.setInputFiles({ name: 'overview.png', mimeType: 'image/png', buffer: png });
-  await page.locator('.ovw-win .image-chip').waitFor({ state: 'visible' });
+  const overviewChip = page.locator('.ovw-win .image-chip', { hasText: 'overview.png' });
+  await overviewChip.filter({ has: page.locator('.image-chip-meta', { hasText: 'uploaded' }) }).waitFor();
+  check('Overview uploads a file when attached, before Send', await overviewChip.isVisible());
   let overviewInput;
   let sawOverviewInput;
   const overviewInputReached = new Promise((resolve) => { sawOverviewInput = resolve; });
@@ -322,9 +403,22 @@ try {
       && await page.locator('.quick .image-file-input').count() === 0);
   await page.locator('.quick-cli[title="Repaint fixture"]').click();
 
-  // Hold the second upload. Once the first
-  // chip says uploaded, every attachment mutation must remain disabled until
-  // the single logical send transaction finishes.
+  // Quick creation has to allocate its stopped session first, but attachment
+  // selection still starts both uploads before the operator launches it. Hold
+  // the second request to make that ordering and the progress lock observable.
+  let releaseSecond;
+  let sawSecond;
+  const secondReached = new Promise((resolve) => { sawSecond = resolve; });
+  const secondHold = new Promise((resolve) => { releaseSecond = resolve; });
+  let uploadCount = 0;
+  await page.route('**/api/sessions/*/attachments', async (route) => {
+    uploadCount += 1;
+    if (uploadCount === 2) {
+      sawSecond();
+      await secondHold;
+    }
+    await route.continue();
+  });
   await page.locator('.quick-prompt').fill('inspect both files');
   await page.locator('.quick-prompt').evaluate((element, bytes) => {
     const raw = atob(bytes);
@@ -358,30 +452,22 @@ try {
   check('DOCX paste creates a generic file chip beside the image',
     await page.locator('.quick .image-chip').count() === 2
       && await page.locator('.quick .image-chip-placeholder', { hasText: 'DOCX' }).count() === 1);
-  let releaseSecond;
-  let sawSecond;
-  const secondReached = new Promise((resolve) => { sawSecond = resolve; });
-  const secondHold = new Promise((resolve) => { releaseSecond = resolve; });
-  let uploadCount = 0;
-  await page.route('**/api/sessions/*/attachments', async (route) => {
-    uploadCount += 1;
-    if (uploadCount === 2) {
-      sawSecond();
-      await secondHold;
-    }
-    await route.continue();
-  });
-  await page.locator('.quick-prompt').press('Enter');
   await Promise.race([
     secondReached,
-    sleep(20_000).then(() => { throw new Error('second upload did not start'); }),
+    sleep(20_000).then(() => { throw new Error('second upload did not start on attachment'); }),
   ]);
-  const removeButtons = page.locator('.quick .image-chip > button');
-  check('attachment removal stays locked for the full send transaction',
-    await removeButtons.nth(0).isDisabled()
-      && await removeButtons.nth(1).isDisabled());
+  const quickChips = page.locator('.quick .image-chip');
+  await quickChips.nth(0).filter({ has: page.locator('.image-chip-meta', { hasText: 'uploaded' }) }).waitFor();
+  check('quick creation uploads before launch and shows progress while pending',
+    uploadCount === 2
+      && await quickChips.nth(1).locator('.image-chip-progress').isVisible()
+      && await quickChips.nth(1).getByRole('button', { name: 'Remove requirements.docx' }).isDisabled());
   releaseSecond();
+  await quickChips.nth(1).filter({ has: page.locator('.image-chip-meta', { hasText: 'uploaded' }) }).waitFor();
+  const uploadsBeforeLaunch = uploadCount;
+  await page.locator('.quick-prompt').press('Enter');
   await page.locator('.controls').waitFor({ state: 'hidden', timeout: 30_000 });
+  check('launch reuses already-uploaded attachment ids', uploadCount === uploadsBeforeLaunch);
 } finally {
   try { await browser?.close(); } catch {}
   backend.kill('SIGKILL');

web/src/App.tsx

@@ -22,7 +22,6 @@ import { useReaderBatch } from './lib/readerBatch';
 import { paneOwnsBack } from './lib/mobileBack';
 import { isPassive, isRemote, isShareable } from './types';
 import { EyeGlyph, EyeOffGlyph, GridGlyph, ListGlyph, SortGlyph } from './components/icons';
-import { uploadPendingAttachments } from './lib/attachments';
 
 // `?vvdebug=1` — a phone has no devtools, and the keyboard layout is a guess
 // when the app is embedded cross-origin. Read once: it never changes mid-run,
@@ -628,28 +627,32 @@ export default function App() {
   };
   // Quickstart: server boots the agent and types the prompt; we jump straight
   // to the new pane so you watch it happen.
+  const prepareQuickStart = async (cli: string, name = '', path = '.') => {
+    const created = await api.createSession(name, cli, undefined, path);
+    rememberPath(created.path);
+    await refresh();
+    return created;
+  };
   const quickStart = async (cli: string, prompt: string, name = '', path = '.', attachmentOptions?: QuickStartAttachmentOptions) => {
     try {
       let sessionId: string;
       let sessionPath: string | null = path;
-      if (attachmentOptions?.attachments.length) {
+      if (attachmentOptions && (attachmentOptions.sessionId || attachmentOptions.attachments.length)) {
         if (attachmentOptions.sessionId) {
           sessionId = attachmentOptions.sessionId;
         } else {
-          // Attachments are session-scoped, so create the stopped session first,
-          // then upload. If an upload fails the session remains visible and the
-          // sidebar retains its id for a retry.
-          const created = await api.createSession(name, cli, undefined, path);
+          // Defensive fallback for a submit racing the target-creation render.
+          // Normal attachment uploads create this stopped target immediately.
+          const created = await prepareQuickStart(cli, name, path);
           sessionId = created.id;
           sessionPath = created.path;
           attachmentOptions.onSessionCreated(created.id);
-          rememberPath(created.path);
-          await refresh();
         }
-        const attachments = await uploadPendingAttachments(
-          sessionId, attachmentOptions.attachments, attachmentOptions.onAttachmentUpdate,
-        );
-        await api.sendInput(sessionId, prompt, attachments.map((image) => image.id));
+        if (attachmentOptions.attachments.some((attachment) => !attachment.attachment)) {
+          throw new Error('Wait for every file to finish uploading, or retry/remove the failed file.');
+        }
+        await api.sendInput(sessionId, prompt,
+          attachmentOptions.attachments.map((attachment) => attachment.attachment!.id));
       } else {
         const created = await api.quickStart(cli, prompt, name, path);
         sessionId = created.id;
@@ -1066,6 +1069,7 @@ export default function App() {
         theme={theme}
         onToggleTheme={toggleTheme}
         onQuickStart={quickStart}
+        onPrepareQuickStart={prepareQuickStart}
         archived={archivedIds}
         showArchived={showArchived}
         onToggleArchived={() => setShowArchived((v) => !v)}

web/src/api.ts

@@ -207,19 +207,63 @@ export interface Attachment {
   insertText: string;
 }
 
-export const uploadAttachment = async (id: string, file: File): Promise<Attachment> => {
-  const headers: Record<string, string> = {
-    'x-file-name': encodeURIComponent(file.name || 'Attachment'),
-  };
-  if (file.type) headers['content-type'] = file.type;
-  const response = await fetch(`/api/sessions/${id}/attachments`, {
-    method: 'POST',
-    headers,
-    body: file,
-  });
-  return jsonOrError(response);
+export interface AttachmentUploadProgress { loaded: number; total: number }
+
+const attachmentUploadError = (request: XMLHttpRequest) => {
+  let detail = '';
+  try {
+    const body = JSON.parse(request.responseText || '{}');
+    if (typeof body?.error === 'string') detail = body.error;
+  } catch { /* An ingress/proxy error can be HTML. Classify it by status below. */ }
+  if (detail) return detail;
+  if (request.status === 413) return 'The server or its proxy rejected this file as too large (HTTP 413). Try a smaller file.';
+  if (request.status === 408 || request.status === 504) return `The upload timed out (HTTP ${request.status}). Check the connection and retry.`;
+  if (request.status === 429) return 'Too many uploads at once (HTTP 429). Wait a minute, then retry.';
+  if (request.status >= 500) return `The upload server failed (HTTP ${request.status}). Retry in a moment.`;
+  return `Upload failed (HTTP ${request.status}${request.statusText ? ` ${request.statusText}` : ''}).`;
 };
 
+/** XMLHttpRequest is intentional: fetch has no browser upload-progress API. */
+export const uploadAttachment = (
+  id: string,
+  file: File,
+  onProgress?: (progress: AttachmentUploadProgress) => void,
+): Promise<Attachment> => new Promise((resolve, reject) => {
+  const request = new XMLHttpRequest();
+  request.open('POST', `/api/sessions/${encodeURIComponent(id)}/attachments`);
+  request.setRequestHeader('x-am-origin', 'operator');
+  request.setRequestHeader('x-file-name', encodeURIComponent(file.name || 'Attachment'));
+  if (file.type) request.setRequestHeader('content-type', file.type);
+  request.upload.onprogress = (event) => onProgress?.({
+    loaded: event.loaded,
+    total: event.lengthComputable && event.total ? event.total : file.size,
+  });
+  // Some browsers coalesce every progress event for a fast/small body. The
+  // upload-side load event still fires before the response, so 100% means
+  // "bytes sent, awaiting server confirmation", not prematurely "stored".
+  request.upload.onload = () => onProgress?.({ loaded: file.size, total: file.size });
+  request.onload = () => {
+    if (request.status < 200 || request.status >= 300) {
+      reject(new Error(attachmentUploadError(request)));
+      return;
+    }
+    try {
+      resolve(JSON.parse(request.responseText) as Attachment);
+    } catch {
+      reject(new Error('The upload completed, but the server returned an unreadable response. Retry the file.'));
+    }
+  };
+  request.onerror = () => reject(new Error(
+    typeof navigator !== 'undefined' && navigator.onLine === false
+      ? 'Upload stopped because this device is offline. Reconnect and retry.'
+      : 'Upload connection was interrupted before the server confirmed the file. Check the connection and retry.',
+  ));
+  request.onabort = () => reject(new Error('Upload was canceled before it completed. Retry the file.'));
+  request.ontimeout = () => reject(new Error('Upload timed out before it completed. Check the connection and retry.'));
+  onProgress?.({ loaded: 0, total: file.size });
+  request.send(file);
+});
+
 export const insertAttachments = (
   id: string,
   attachmentIds: string[],

web/src/components/Attachments.tsx

@@ -1,8 +1,9 @@
 import { useId, useRef } from 'react';
+import { attachmentFileError } from '../lib/attachments';
 import type { PendingAttachment } from '../lib/attachments';
 
 const fmtBytes = (bytes: number) => bytes < 1024 * 1024
-  ? `${Math.max(1, Math.round(bytes / 1024))} KB`
+  ? `${bytes ? Math.max(1, Math.round(bytes / 1024)) : 0} KB`
   : `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
 
 const fileLabel = (name: string) => {
@@ -10,13 +11,14 @@ const fileLabel = (name: string) => {
   return extension && extension !== name ? extension.slice(0, 4).toUpperCase() : 'FILE';
 };
 
-export default function Attachments({ attachments, disabled, disabledReason, showPicker = true, onFiles, onRemove }: {
+export default function Attachments({ attachments, disabled, disabledReason, showPicker = true, onFiles, onRemove, onRetry }: {
   attachments: PendingAttachment[];
   disabled?: boolean;
   disabledReason?: string;
   showPicker?: boolean;
   onFiles: (files: File[]) => void;
   onRemove: (key: string) => void;
+  onRetry?: (key: string) => void;
 }) {
   const picker = useRef<HTMLInputElement>(null);
   const reasonId = useId();
@@ -53,25 +55,45 @@ export default function Attachments({ attachments, disabled, disabledReason, sho
         </>
       )}
       {showReason && <span id={reasonId} className="image-attachments-note">{disabledReason}</span>}
-      {attachments.map((attachment) => (
-        <div key={attachment.key} className={`image-chip ${attachment.status}`}>
-          {attachment.previewUrl ? (
-            <a className="image-chip-preview" href={attachment.previewUrl} target="_blank" rel="noreferrer" title={`Preview ${attachment.file.name || 'image'}`}>
-              <img src={attachment.previewUrl} alt="" />
-            </a>
-          ) : (
-            <span className="image-chip-placeholder mono" aria-hidden="true">{fileLabel(attachment.file.name || '')}</span>
-          )}
-          <span className="image-chip-copy">
-            <span className="image-chip-name">{attachment.file.name || 'Attachment'}</span>
-            <span className="image-chip-meta" aria-live="polite">
-              {attachment.status === 'uploading' ? 'uploading…'
-                : attachment.error || (attachment.status === 'uploaded' ? 'uploaded' : fmtBytes(attachment.file.size))}
+      {attachments.map((attachment) => {
+        const loaded = Math.min(attachment.file.size, attachment.uploadedBytes || 0);
+        const progress = attachment.file.size ? Math.round((loaded / attachment.file.size) * 100) : 0;
+        const retryable = attachment.status === 'error' && !attachmentFileError(attachment.file) && !!onRetry;
+        return (
+          <div key={attachment.key} className={`image-chip ${attachment.status}`}>
+            {attachment.previewUrl ? (
+              <a className="image-chip-preview" href={attachment.previewUrl} target="_blank" rel="noreferrer" title={`Preview ${attachment.file.name || 'image'}`}>
+                <img src={attachment.previewUrl} alt="" />
+              </a>
+            ) : (
+              <span className="image-chip-placeholder mono" aria-hidden="true">{fileLabel(attachment.file.name || '')}</span>
+            )}
+            <span className="image-chip-copy">
+              <span className="image-chip-name">{attachment.file.name || 'Attachment'}</span>
+              <span className="image-chip-meta" aria-live="polite" title={attachment.error}>
+                {attachment.status === 'uploading' ? `${progress}% · ${fmtBytes(loaded)} / ${fmtBytes(attachment.file.size)}`
+                  : attachment.error || (attachment.status === 'uploaded' ? 'uploaded' : fmtBytes(attachment.file.size))}
+              </span>
+              {attachment.status === 'uploading' && (
+                <span
+                  className="image-chip-progress"
+                  role="progressbar"
+                  aria-label={`Uploading ${attachment.file.name || 'file'}`}
+                  aria-valuemin={0}
+                  aria-valuemax={100}
+                  aria-valuenow={progress}
+                >
+                  <span style={{ width: `${progress}%` }} />
+                </span>
+              )}
             </span>
-          </span>
-          <button type="button" onClick={() => onRemove(attachment.key)} disabled={disabled || attachment.status === 'uploading'} aria-label={`Remove ${attachment.file.name || 'file'}`}>×</button>
-        </div>
-      ))}
+            {retryable && (
+              <button type="button" className="image-chip-retry" onClick={() => onRetry(attachment.key)} disabled={disabled} aria-label={`Retry ${attachment.file.name || 'file'}`}>retry</button>
+            )}
+            <button type="button" onClick={() => onRemove(attachment.key)} disabled={disabled || attachment.status === 'uploading'} aria-label={`Remove ${attachment.file.name || 'file'}`}>×</button>
+          </div>
+        );
+      })}
     </div>
   );
 }

web/src/components/FolderPicker.tsx

@@ -83,20 +83,21 @@ function Level({ path, depth, value, onPick }: {
  * workspace root. Picking a not-yet-existing folder is fine: the server
  * creates it when the agent is created.
  */
-export default function FolderPicker({ value, onChange }: {
+export default function FolderPicker({ value, onChange, disabled = false }: {
   value: string;
   onChange: (p: string) => void;
+  disabled?: boolean;
 }) {
   const [open, setOpen] = useState(false);
   const root = isRoot(value);
   return (
     <div className="fp">
-      <button className="fp-current" onClick={() => setOpen((o) => !o)} title="Choose where this agent runs">
+      <button className="fp-current" disabled={disabled} onClick={() => setOpen((o) => !o)} title="Choose where this agent runs">
         <FolderGlyph className="fp-ico" open={open || root} />
         <span className="fp-path">{root ? 'workspaces' : value}</span>
         <span className="fp-toggle">{open ? '▾' : '▸'}</span>
       </button>
-      {open && (
+      {open && !disabled && (
         <div className="fp-tree">
           <button className={`fp-row fp-root${root ? ' picked' : ''}`} onClick={() => onChange(ROOT)}>
             <FolderGlyph className="fp-ico" open />

web/src/components/Overview.tsx

@@ -171,6 +171,9 @@ export function Card({ s, color, group, pending, isMobile, onOpen, onClose }: {
     imagesRef.current = merged;
     setImages(merged);
     setImageError(next.error);
+    void uploadPendingAttachments(s.id, next.attachments, updateImage).catch(() => {
+      // The affected chip owns the persistent, actionable error and retry.
+    });
   };
   const removeImage = (key: string) => {
     if (sending) return;
@@ -190,6 +193,11 @@ export function Card({ s, color, group, pending, isMobile, onOpen, onClose }: {
       return next;
     });
   };
+  const retryImage = (key: string) => {
+    const image = imagesRef.current.find((item) => item.key === key);
+    if (!image || sending) return;
+    void uploadPendingAttachments(s.id, [image], updateImage).catch(() => {});
+  };
 
   // After you send (or when the transcript shows a prompt newer than the last
   // answer), the old answer is stale — a spinner takes its place.
@@ -219,6 +227,7 @@ export function Card({ s, color, group, pending, isMobile, onOpen, onClose }: {
     const text = draft.trim();
     const batch = imagesRef.current;
     if ((!text && !batch.length) || sending) return;
+    if (batch.some((image) => !image.attachment)) return;
     const optimisticText = text || defaultAttachmentPrompt(batch.length);
     setSending(true);
     setFailed(null);
@@ -227,8 +236,7 @@ export function Card({ s, color, group, pending, isMobile, onOpen, onClose }: {
     setHistIdx(0);
     if (inputRef.current) { inputRef.current.style.height = 'auto'; inputRef.current.blur(); }
     try {
-      const attachments = await uploadPendingAttachments(s.id, batch, updateImage);
-      await api.sendInput(s.id, text, attachments.map((image) => image.id));
+      await api.sendInput(s.id, text, batch.map((image) => image.attachment!.id));
       revokePendingAttachments(batch);
       imagesRef.current = [];
       setImages([]);
@@ -371,13 +379,15 @@ export function Card({ s, color, group, pending, isMobile, onOpen, onClose }: {
         sending={sending}
         isMobile={isMobile}
         inputRef={inputRef}
-        canSend={!!draft.trim() || images.length > 0}
+        canSend={(!!draft.trim() || images.length > 0)
+          && images.every((image) => !!image.attachment)}
         above={<Attachments
           attachments={images}
           disabled={sending || !allowAttachments}
           disabledReason={!allowAttachments ? 'Files are not available for remote agents yet — that agent cannot read files stored on this Space.' : undefined}
           onFiles={addImages}
           onRemove={removeImage}
+          onRetry={retryImage}
         />}
         onChange={setDraft}
         onSend={send}

web/src/components/Sidebar.tsx

@@ -1,13 +1,13 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 import type { Cli, MoveTarget, Group, Session, Tree } from '../types';
 import { STATE_LABEL, REMOTE_STATE_LABEL, isPassive, isRemote, isShareable } from '../types';
-import { hiddenSessionIds } from '../lib/overviewHidden';
 import Logo from './Logo';
 import NewSession from './NewSession';
 import FolderPicker from './FolderPicker';
 import Attachments from './Attachments';
 import {
-  filesFromTransfer, pendingAttachmentsFromFiles, revokePendingAttachments, transferMayContainFile,
+  attachmentFileError, filesFromTransfer, pendingAttachmentsFromFiles, revokePendingAttachments,
+  transferMayContainFile, uploadPendingAttachments,
 } from '../lib/attachments';
 import type { PendingAttachment } from '../lib/attachments';
 import { SlidersGlyph, SunGlyph, MoonGlyph, CloseGlyph, PencilGlyph, StopGlyph, PlayGlyph, GridGlyph, PlusGlyph, AmMark, ShareGlyph, HandoverGlyph, ListGlyph, EyeGlyph, EyeOffGlyph } from './icons';
@@ -19,7 +19,6 @@ export interface QuickStartAttachmentOptions {
   sessionId: string | null;
   attachments: PendingAttachment[];
   onSessionCreated: (id: string) => void;
-  onAttachmentUpdate: (key: string, patch: Partial<PendingAttachment>) => void;
 }
 
 // Folded groups, remembered across reloads.
@@ -38,6 +37,7 @@ export default function Sidebar({
   clis, tree, activeRef, focusedId, defaultPath, ages,
   onActivate, onOpenSession, onNewSession, onNewGroup, onRenameGroup, onRenameSession, onDeleteGroup,
   onStopSession, onSetRemotePaused, onDeleteSession, onShareSession, onShareTrace, onTraceHandover, onOpenTrace, onMove, onDragState, onOpenSettings, theme, onToggleTheme, onQuickStart,
+  onPrepareQuickStart,
   archived, showArchived, onToggleArchived,
   overviewHidden, onToggleOverviewHidden,
 }: {
@@ -67,6 +67,7 @@ export default function Sidebar({
   theme: 'light' | 'dark';
   onToggleTheme: () => void;
   onQuickStart: (cli: string, prompt: string, name?: string, path?: string, attachmentOptions?: QuickStartAttachmentOptions) => Promise<void>;
+  onPrepareQuickStart: (cli: string, name?: string, path?: string) => Promise<Session>;
   archived: Set<string>;
   showArchived: boolean;
   onToggleArchived: () => void;
@@ -87,6 +88,9 @@ export default function Sidebar({
   const [quickImages, setQuickImages] = useState<PendingAttachment[]>([]);
   const quickImagesRef = useRef<PendingAttachment[]>([]);
   const [quickSessionId, setQuickSessionId] = useState<string | null>(null);
+  const quickSessionIdRef = useRef<string | null>(null);
+  const quickPrepareRef = useRef<Promise<Session> | null>(null);
+  const quickGenerationRef = useRef(0);
   const [quickSending, setQuickSending] = useState(false);
   const [quickDrop, setQuickDrop] = useState(false);
   // When creation was launched from a group's + the new agent lands there.
@@ -114,9 +118,16 @@ export default function Sidebar({
   const sessById = useMemo(() => Object.fromEntries(tree.sessions.map((s) => [s.id, s])), [tree.sessions]);
   const groupById = useMemo(() => Object.fromEntries(tree.groups.map((g) => [g.id, g])), [tree.groups]);
   const colorOf = useMemo(() => Object.fromEntries(clis.map((c) => [c.id, c.color])), [clis]);
+  const quickFilesBlocked = quickImages.some((image) => !image.attachment);
+
   useEffect(() => { quickImagesRef.current = quickImages; }, [quickImages]);
   useEffect(() => () => revokePendingAttachments(quickImagesRef.current), []);
 
+  const rememberQuickSession = (id: string | null) => {
+    quickSessionIdRef.current = id;
+    setQuickSessionId(id);
+  };
+
   const updateQuickImage = (key: string, patch: Partial<PendingAttachment>) => {
     setQuickImages((current) => {
       const next = current.map((image) => image.key === key ? { ...image, ...patch } : image);
@@ -124,6 +135,46 @@ export default function Sidebar({
       return next;
     });
   };
+  const prepareQuickTarget = async (generation: number) => {
+    if (quickSessionIdRef.current) return quickSessionIdRef.current;
+    if (!quickCli || isRemote(quickCli)) throw new Error('Choose a local agent before attaching files.');
+    if (!quickPrepareRef.current) {
+      quickPrepareRef.current = onPrepareQuickStart(
+        quickCli, quickMore ? quickName.trim() : '', quickMore ? quickLoc : '.',
+      );
+    }
+    const preparing = quickPrepareRef.current;
+    try {
+      const created = await preparing;
+      if (generation === quickGenerationRef.current) rememberQuickSession(created.id);
+      return created.id;
+    } catch (error) {
+      if (quickPrepareRef.current === preparing) quickPrepareRef.current = null;
+      throw error;
+    }
+  };
+  const startQuickUploads = (attachments: PendingAttachment[]) => {
+    const uploadable = attachments.filter((attachment) => !attachmentFileError(attachment.file));
+    if (!uploadable.length) return;
+    const generation = quickGenerationRef.current;
+    void (async () => {
+      let sessionId: string;
+      try {
+        sessionId = await prepareQuickTarget(generation);
+      } catch (error) {
+        if (generation !== quickGenerationRef.current) return;
+        const message = error instanceof Error ? error.message : 'Could not prepare an agent for this upload.';
+        for (const attachment of uploadable) updateQuickImage(attachment.key, { status: 'error', error: message });
+        setQuickError(message);
+        return;
+      }
+      if (generation !== quickGenerationRef.current) return;
+      setQuickError(null);
+      await uploadPendingAttachments(sessionId, uploadable, updateQuickImage).catch(() => {
+        // Each failed chip keeps the exact server or connection error and retry action.
+      });
+    })();
+  };
   const addQuickImages = (files: File[]) => {
     if (quickSending) return;
     const next = pendingAttachmentsFromFiles(files, quickImagesRef.current.length);
@@ -131,6 +182,7 @@ export default function Sidebar({
     quickImagesRef.current = merged;
     setQuickImages(merged);
     setQuickError(next.error);
+    startQuickUploads(next.attachments);
   };
   const removeQuickImage = (key: string) => {
     if (quickSending) return;
@@ -143,10 +195,17 @@ export default function Sidebar({
     });
     setQuickError(null);
   };
+  const retryQuickImage = (key: string) => {
+    const image = quickImagesRef.current.find((item) => item.key === key);
+    if (!image || quickSending) return;
+    startQuickUploads([image]);
+  };
   // A retry may reuse uploaded ids only while it still targets the same
   // server-created session. Changing its identity starts a fresh target.
   const resetQuickTarget = () => {
-    setQuickSessionId(null);
+    quickGenerationRef.current += 1;
+    quickPrepareRef.current = null;
+    rememberQuickSession(null);
     setQuickImages((current) => {
       const next = current.map((image) => image.attachment
         ? { ...image, attachment: undefined, status: 'pending' as const, error: undefined }
@@ -162,10 +221,12 @@ export default function Sidebar({
   const bump = (id: string, d: number) => setCart((c) => ({ ...c, [id]: Math.max(0, (c[id] || 0) + d) }));
   const closePanel = () => {
     if (panel === 'quick') {
+      quickGenerationRef.current += 1;
       revokePendingAttachments(quickImagesRef.current);
       quickImagesRef.current = [];
       setQuickImages([]);
-      setQuickSessionId(null);
+      quickPrepareRef.current = null;
+      rememberQuickSession(null);
       setQuickSending(false);
       setQuickDrop(false);
     }
@@ -181,9 +242,11 @@ export default function Sidebar({
   const quickable = clis.filter((c) => c.id !== 'shell' && !isPassive(c.id) && !isRemote(c.id));
   const remoteCli = clis.find((c) => isRemote(c.id)) || null;
   const openQuick = () => {
+    quickGenerationRef.current += 1;
     setQuickError(null);
     setQuickName('');
-    setQuickSessionId(null);
+    quickPrepareRef.current = null;
+    rememberQuickSession(null);
     setQuickCli((q) => q ?? (quickable.find((c) => c.available && c.ready)?.id || quickable.find((c) => c.available)?.id || null));
     setQuickMode('agent');
     setQuickLoc(defaultPath || '.');
@@ -212,6 +275,7 @@ export default function Sidebar({
   const submitQuick = async () => {
     const p = quickPrompt.trim();
     if (!quickCli || quickSending) return;
+    if (quickImagesRef.current.some((image) => !image.attachment)) return;
     // A remote agent names itself like any other agent when unnamed
     // (remote-agent-1, -2, …); its "location" is always its own message folder,
     // never the picker's.
@@ -231,11 +295,10 @@ export default function Sidebar({
     try {
       await onQuickStart(
         quickCli, p, quickMore ? quickName.trim() : '', quickMore ? quickLoc : '.',
-        quickImages.length ? {
+        quickSessionId || quickImages.length ? {
           sessionId: quickSessionId,
           attachments: quickImages,
-          onSessionCreated: setQuickSessionId,
-          onAttachmentUpdate: updateQuickImage,
+          onSessionCreated: rememberQuickSession,
         } : undefined,
       );
       setQuickPrompt('');
@@ -500,7 +563,7 @@ export default function Sidebar({
                   key={c.id}
                   className={`quick-cli${quickMode === 'agent' && quickCli === c.id ? ' on' : ''}${c.available ? '' : ' off'}`}
                   title={c.available ? c.label : `${c.label} (not installed)`}
-                  disabled={!c.available || quickSending}
+                  disabled={!c.available || quickSending || quickImages.length > 0}
                   style={quickMode === 'agent' && quickCli === c.id ? { borderColor: c.color } : undefined}
                   onClick={() => { setQuickMode('agent'); if (quickCli !== c.id) resetQuickTarget(); setQuickCli(c.id); }}
                 ><Logo cli={c.id} size={14} /></button>
@@ -509,7 +572,7 @@ export default function Sidebar({
               <button
                 className={`quick-cli quick-grp${quickMode === 'group' ? ' on' : ''}`}
                 title="New group"
-                disabled={quickSending}
+                disabled={quickSending || quickImages.length > 0}
                 onClick={() => setQuickMode('group')}
               >
                 <span className="grp-mini">
@@ -523,10 +586,11 @@ export default function Sidebar({
                 <button
                   className={`quick-cli${quickMode === 'agent' && quickCli === 'remote' ? ' on' : ''}`}
                   title="Remote agent — an agent on another machine"
-                  disabled={quickSending}
+                  disabled={quickSending || quickImages.length > 0}
                   style={quickMode === 'agent' && quickCli === 'remote' ? { borderColor: remoteCli.color } : undefined}
                   onClick={() => {
-                    setQuickMode('agent'); setQuickCli('remote'); setQuickSessionId(null);
+                    setQuickMode('agent'); setQuickCli('remote'); quickGenerationRef.current += 1;
+                    quickPrepareRef.current = null; rememberQuickSession(null);
                     revokePendingAttachments(quickImagesRef.current); quickImagesRef.current = []; setQuickImages([]); setQuickError(null);
                   }}
                 ><Logo cli="remote" size={14} /></button>
@@ -541,6 +605,15 @@ export default function Sidebar({
                     The agent was created. Retry will reuse it; delete it from the agent row if you want to start over.
                   </div>
                 )}
+                {!quickError && quickSessionId && quickImages.length > 0 && (
+                  <div className="quick-recovery mono">
+                    {quickImages.every((image) => !!image.attachment)
+                      ? 'Files are uploaded to this stopped agent; launch will reuse them.'
+                      : quickImages.some((image) => image.status === 'error')
+                        ? 'A file needs attention before this stopped agent can launch.'
+                        : 'Files are uploading to this stopped agent now; launch waits until they are ready.'}
+                  </div>
+                )}
                 <textarea
                   autoFocus
                   rows={1}
@@ -566,25 +639,26 @@ export default function Sidebar({
                   showPicker={false}
                   onFiles={addQuickImages}
                   onRemove={removeQuickImage}
+                  onRetry={retryQuickImage}
                 />
                 {quickMore && (
                   <>
                     <input
                       placeholder="Name (optional)"
                       value={quickName}
-                      disabled={quickSending}
+                      disabled={quickSending || quickImages.length > 0}
                       onChange={(e) => { resetQuickTarget(); setQuickName(e.target.value); }}
                       onKeyDown={(e) => { if (e.key === 'Enter') submitQuick(); if (e.key === 'Escape') closePanel(); }}
                     />
-                    <FolderPicker value={quickLoc} onChange={(value) => { resetQuickTarget(); setQuickLoc(value); }} />
+                    <FolderPicker disabled={quickSending || quickImages.length > 0} value={quickLoc} onChange={(value) => { resetQuickTarget(); setQuickLoc(value); }} />
                     <div className="widget-actions">
-                      <button className="btn-primary" onClick={submitQuick} disabled={quickSending}>{quickSending ? 'Uploading…' : `Create${quickPrompt.trim() || quickImages.length ? ' & send' : ''}`}</button>
+                      <button className="btn-primary" onClick={submitQuick} disabled={quickSending || quickFilesBlocked}>{quickSending ? 'Starting…' : `Create${quickPrompt.trim() || quickImages.length ? ' & send' : ''}`}</button>
                       <button className="btn-ghost" onClick={closePanel} disabled={quickSending}>Cancel</button>
                     </div>
                   </>
                 )}
                 <div className="quick-foot">
-                  <button className="quick-more" onClick={() => setQuickMore((v) => !v)} disabled={quickSending}>{quickMore ? '▴ less' : '▾ more options'}</button>
+                  <button className="quick-more" onClick={() => setQuickMore((v) => !v)} disabled={quickSending || quickImages.length > 0}>{quickMore ? '▴ less' : '▾ more options'}</button>
                   <span className="quick-hint mono">↵ launch · ⇧↵ newline</span>
                 </div>
               </>

web/src/components/TerminalPane.tsx

@@ -385,18 +385,23 @@ export default function TerminalPane({
       const attachments: Attachment[] = [];
       try {
         for (let index = 0; index < images.length; index += 1) {
-          showImageStatus({ kind: 'uploading', text: `uploading file${images.length > 1 ? ` ${index + 1}/${images.length}` : ''}…` });
-          const attachment = await api.uploadAttachment(session.id, images[index]);
+          const fileLabel = `file${images.length > 1 ? ` ${index + 1}/${images.length}` : ''}`;
+          showImageStatus({ kind: 'uploading', text: `uploading ${fileLabel} · 0%` });
+          const attachment = await api.uploadAttachment(session.id, images[index], ({ loaded, total }) => {
+            const progress = total ? Math.min(100, Math.round((loaded / total) * 100)) : 0;
+            showImageStatus({ kind: 'uploading', text: `uploading ${fileLabel} · ${progress}%` });
+          });
           attachments.push(attachment);
         }
         showImageStatus({ kind: 'uploading', text: `inserting file${images.length === 1 ? '' : 's'}…` });
         await insertTerminalAttachments(attachments);
       } catch (error) {
         if (attachments.length) {
+          const reason = error instanceof Error ? error.message : 'upload failed';
           setPendingInsert(attachments);
           showImageStatus({
             kind: 'error',
-            text: `${attachments.length} file${attachments.length === 1 ? '' : 's'} saved; another failed to upload`,
+            text: `${attachments.length} file${attachments.length === 1 ? '' : 's'} saved; another failed: ${reason}`,
           });
         } else {
           showImageStatus({ kind: 'error', text: error instanceof Error ? error.message : 'file upload failed' }, 5000);

web/src/components/conversation/ConversationView.tsx

@@ -106,6 +106,9 @@ export default function ConversationView({
     attachmentsRef.current = merged;
     setAttachments(merged);
     setAttachmentError(next.error);
+    void uploadPendingAttachments(session.id, next.attachments, updateAttachment).catch(() => {
+      // The affected chip owns the persistent, actionable error and retry.
+    });
   };
   const removeAttachment = (key: string) => {
     if (sending) return;
@@ -125,6 +128,11 @@ export default function ConversationView({
       return next;
     });
   };
+  const retryAttachment = (key: string) => {
+    const attachment = attachmentsRef.current.find((item) => item.key === key);
+    if (!attachment || sending) return;
+    void uploadPendingAttachments(session.id, [attachment], updateAttachment).catch(() => {});
+  };
 
   // Closing the search CLEARS it. A query filters the reader to matching turns,
   // so a hidden box with a live filter is a reader that looks broken — a
@@ -196,14 +204,14 @@ export default function ConversationView({
     const text = draft.trim();
     const batch = attachmentsRef.current;
     if ((!text && !batch.length) || sending) return;
+    if (batch.some((attachment) => !attachment.attachment)) return;
     const optimisticText = text || defaultAttachmentPrompt(batch.length);
     setSending(true); setFailed(null);
     setDraft(''); setSent({ text: optimisticText, at: Date.now() });
     if (inputRef.current) { inputRef.current.style.height = 'auto'; inputRef.current.blur(); }
     stick.current = true;
     try {
-      const uploaded = await uploadPendingAttachments(session.id, batch, updateAttachment);
-      await api.sendInput(session.id, text, uploaded.map((attachment) => attachment.id));
+      await api.sendInput(session.id, text, batch.map((attachment) => attachment.attachment!.id));
       revokePendingAttachments(batch);
       attachmentsRef.current = [];
       setAttachments([]);
@@ -562,7 +570,8 @@ export default function ConversationView({
           sending={sending}
           isMobile={isMobile}
           inputRef={inputRef}
-          canSend={!!draft.trim() || attachments.length > 0}
+          canSend={(!!draft.trim() || attachments.length > 0)
+            && attachments.every((attachment) => !!attachment.attachment)}
           above={<Attachments
             showPicker={false}
             attachments={attachments}
@@ -570,6 +579,7 @@ export default function ConversationView({
             disabledReason={!allowAttachments ? 'Files are not available for remote agents yet — that agent cannot read files stored on this Space.' : undefined}
             onFiles={addAttachments}
             onRemove={removeAttachment}
+            onRetry={retryAttachment}
           />}
           onChange={setDraft}
           onSend={send}

web/src/lib/attachments.ts

@@ -12,6 +12,7 @@ export interface PendingAttachment {
   file: File;
   previewUrl?: string;
   status: PendingAttachmentStatus;
+  uploadedBytes?: number;
   error?: string;
   attachment?: Attachment;
 }
@@ -136,24 +137,33 @@ export async function uploadPendingAttachments(
   update: (key: string, patch: Partial<PendingAttachment>) => void,
 ) {
   const uploaded: Attachment[] = [];
+  let firstFailure: Error | null = null;
   for (const attachment of attachments) {
     if (attachment.attachment) {
       uploaded.push(attachment.attachment);
       continue;
     }
-    if (attachmentFileError(attachment.file)) {
-      throw new Error(attachment.error || 'invalid file');
+    const invalid = attachmentFileError(attachment.file);
+    if (invalid) {
+      update(attachment.key, { status: 'error', error: invalid });
+      firstFailure ??= new Error(invalid);
+      continue;
     }
-    update(attachment.key, { status: 'uploading', error: undefined });
+    update(attachment.key, { status: 'uploading', uploadedBytes: 0, error: undefined });
     try {
-      const stored = await api.uploadAttachment(sessionId, attachment.file);
-      update(attachment.key, { status: 'uploaded', attachment: stored });
+      const stored = await api.uploadAttachment(sessionId, attachment.file, ({ loaded }) => {
+        update(attachment.key, { uploadedBytes: loaded });
+      });
+      update(attachment.key, {
+        status: 'uploaded', uploadedBytes: attachment.file.size, attachment: stored,
+      });
       uploaded.push(stored);
     } catch (error) {
       const message = error instanceof Error ? error.message : 'upload failed';
       update(attachment.key, { status: 'error', error: message });
-      throw error;
+      firstFailure ??= error instanceof Error ? error : new Error(message);
     }
   }
+  if (firstFailure) throw firstFailure;
   return uploaded;
 }

web/src/styles.css

@@ -195,19 +195,22 @@ body {
 .image-pick:disabled { opacity: 0.38; cursor: not-allowed; }
 .image-pick svg { width: 15px; height: 15px; }
 .image-attachments-note { min-width: 0; color: var(--muted); font-size: 10px; line-height: 1.3; }
-.image-chip { min-width: 0; max-width: 205px; height: 36px; display: flex; align-items: center; gap: 6px; padding: 3px 5px 3px 3px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--panel); }
-.image-chip.error { border-color: color-mix(in srgb, var(--danger) 48%, var(--border)); }
+.image-chip { min-width: 0; max-width: 250px; height: 38px; display: flex; align-items: center; gap: 6px; padding: 3px 5px 3px 3px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--panel); }
+.image-chip.error { max-width: min(100%, 360px); height: auto; min-height: 38px; border-color: color-mix(in srgb, var(--danger) 48%, var(--border)); }
 .image-chip.uploading { border-color: color-mix(in srgb, var(--accent) 42%, var(--border)); }
 .image-chip-preview { flex: none; width: 29px; height: 28px; border-radius: 3px; overflow: hidden; background: var(--panel-2); }
 .image-chip-preview:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
 .image-chip img { display: block; width: 29px; height: 28px; object-fit: cover; }
 .image-chip-placeholder { flex: none; width: 29px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 3px; background: var(--panel-2); color: var(--muted); font-size: 8px; }
-.image-chip-copy { min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
+.image-chip-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
 .image-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; font-weight: 600; }
 .image-chip-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; color: var(--muted); font: 9.5px var(--font-mono); }
-.image-chip.error .image-chip-meta { color: var(--danger); }
-.image-chip.uploading .image-chip-meta { color: var(--accent); animation: breathe 1.2s ease-in-out infinite; }
+.image-chip.error .image-chip-meta { overflow: visible; text-overflow: clip; white-space: normal; color: var(--danger); line-height: 1.25; }
+.image-chip.uploading .image-chip-meta { color: var(--accent); }
+.image-chip-progress { display: block; width: 100%; height: 2px; margin-top: 3px; overflow: hidden; border-radius: 1px; background: color-mix(in srgb, var(--accent) 16%, var(--panel-2)); }
+.image-chip-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width 120ms linear; }
 .image-chip > button { flex: none; padding: 1px; border: none; background: transparent; color: var(--muted); font: 13px/1 var(--font-sans); cursor: pointer; }
+.image-chip > .image-chip-retry { color: var(--danger); font-size: 9px; font-weight: 650; }
 .image-chip > button:hover:not(:disabled) { color: var(--text); }
 .image-chip > button:disabled { opacity: 0.35; cursor: default; }
 .quick .image-attachments { align-items: flex-start; }
@@ -240,6 +243,7 @@ body {
 .fp { display: flex; flex-direction: column; gap: 4px; }
 .fp-current { display: flex; align-items: center; gap: 7px; width: 100%; padding: 7px 10px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md); color: var(--text); font: inherit; font-size: 12.5px; cursor: pointer; text-align: left; }
 .fp-current:hover { border-color: var(--border-strong); }
+.fp-current:disabled { opacity: 0.5; cursor: not-allowed; }
 .fp-ico { flex: none; width: 14px; height: 14px; color: var(--muted); }
 .fp-row .fp-ico { width: 13px; height: 13px; margin-right: 4px; }
 .fp-path { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
@@ -892,7 +896,7 @@ body {
 .term-image-status { position: absolute; z-index: 8; left: 50%; bottom: 10px; transform: translateX(-50%); max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 5px 8px; border: 1px solid var(--border); border-radius: var(--r-sm); background: color-mix(in srgb, var(--term-bg) 92%, transparent); color: var(--muted); box-shadow: 0 4px 14px rgb(0 0 0 / 0.12); font-size: 10.5px; pointer-events: none; }
 .term-image-status.uploading { color: var(--accent); animation: breathe 1.2s ease-in-out infinite; }
 .term-image-status.success { color: var(--go); }
-.term-image-status.error { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); }
+.term-image-status.error { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); white-space: normal; text-overflow: clip; }
 .term-image-status.has-action { display: flex; align-items: center; gap: 8px; pointer-events: auto; }
 .term-image-status button { padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
 .term-image-status button:disabled { opacity: 0.45; cursor: default; }