diff --git a/apps/staged/src/lib/features/branches/BranchCard.svelte b/apps/staged/src/lib/features/branches/BranchCard.svelte
index fd987928a..fd3751dcd 100644
--- a/apps/staged/src/lib/features/branches/BranchCard.svelte
+++ b/apps/staged/src/lib/features/branches/BranchCard.svelte
@@ -62,7 +62,8 @@
   import NoteModal from '../notes/NoteModal.svelte';
   import WriteNoteModal from '../notes/WriteNoteModal.svelte';
   import { splitNoteMarkdown } from '../notes/noteMarkdown';
-  import { attachBasename } from '../sessions/attachErrors';
+  import { attachBasename, formatAttachErrors } from '../sessions/attachErrors';
+  import { fileToBase64 } from '../sessions/attachmentData';
   import * as AlertDialog from '$lib/components/ui/alert-dialog';
   import { Button } from '$lib/components/ui/button';
   import {
@@ -81,6 +82,13 @@
   import BranchCardHeaderInfo from './BranchCardHeaderInfo.svelte';
   import BranchCardActionsBar from './BranchCardActionsBar.svelte';
   import BranchCardPrButton from './BranchCardPrButton.svelte';
+  import BranchImagePicker from './BranchImagePicker.svelte';
+  import {
+    pruneLandedImages,
+    storeTimelineImages,
+    type PendingAdd,
+    type TimelineImageUpload,
+  } from './timelineImages';
   import BranchCardSessionManager from './BranchCardSessionManager.svelte';
   import {
     addPendingSession,
@@ -551,6 +559,18 @@
   /** Session IDs that were just pruned from pendingItems because the real timeline item arrived. */
   let prunedSessionIds = $state<Set<string>>(new Set());
 
+  /**
+   * "adding..." rows for dropped text files and dropped or picked images.
+   * Declared before the cache hydration below, which prunes it.
+   */
+  let pendingAdds = $state<PendingAdd[]>([]);
+
+  /** Drops the placeholders whose real rows are in `next`, in the same update. */
+  function prunePlaceholders(next: BranchTimelineData) {
+    prunedSessionIds = prunePendingSessionItems(branch.id, next);
+    pendingAdds = pruneLandedImages(pendingAdds, next);
+  }
+
   // Confirm delete dialog
   let confirmDelete = $state<{
     title: string;
@@ -572,6 +592,8 @@
 
   let requestedTimelineKey: string | null = null;
   let timelineLoadVersion = 0;
+  /** The newest `loadTimeline()` run, which `timelineLoadsSettled` follows. */
+  let latestTimelineLoad: Promise<void> = Promise.resolve();
   let revalidationVersion = 0;
   let gitRefreshVersion = 0;
 
@@ -618,7 +640,7 @@
     timeline = cached;
     loadedTimelineKey = timelineKey;
     loading = false;
-    prunedSessionIds = prunePendingSessionItems(branch.id, cached);
+    prunePlaceholders(cached);
     if (fresh) {
       const version = ++revalidationVersion;
       fresh
@@ -629,7 +651,7 @@
           error = null;
           timeline = next;
           loadedTimelineKey = timelineKey;
-          prunedSessionIds = prunePendingSessionItems(branch.id, next);
+          prunePlaceholders(next);
         })
         .catch((e) => {
           if (version !== revalidationVersion || branchTimelineReadyKey(branch) !== timelineKey) {
@@ -816,7 +838,27 @@
     return () => window.removeEventListener('cache-stale', handler);
   });
 
-  async function loadTimeline({
+  function loadTimeline(options?: { timelineKey?: string | null; force?: boolean }) {
+    const load = runTimelineLoad(options);
+    latestTimelineLoad = load;
+    return load;
+  }
+
+  /**
+   * Resolves once the newest timeline load has settled. A load that a newer
+   * one supersedes returns early, before anything it fetched is shown, so
+   * awaiting a `loadTimeline()` does not mean its rows are on screen. This
+   * follows on to whichever load started last.
+   */
+  async function timelineLoadsSettled() {
+    let load: Promise<void>;
+    do {
+      load = latestTimelineLoad;
+      await load;
+    } while (load !== latestTimelineLoad);
+  }
+
+  async function runTimelineLoad({
     timelineKey = branchTimelineReadyKey(branch),
     force = false,
   }: { timelineKey?: string | null; force?: boolean } = {}) {
@@ -850,7 +892,7 @@
       if (!isCurrentTimelineLoad(loadVersion, timelineKey)) return;
       timeline = nextTimeline;
       loadedTimelineKey = timelineKey;
-      prunedSessionIds = prunePendingSessionItems(branch.id, nextTimeline);
+      prunePlaceholders(nextTimeline);
     } catch (e) {
       if (!isCurrentTimelineLoad(loadVersion, timelineKey)) return;
       error = e instanceof Error ? e.message : String(e);
@@ -1662,8 +1704,6 @@
   let shouldMountInterior = $state(false);
   let interiorEl: HTMLDivElement | undefined = $state();
 
-  let pendingDropNotes = $state<{ key: string; title: string }[]>([]);
-
   function handleFileDrop(paths: string[]) {
     const textPaths = paths.filter(isMaybeTextFile);
     const imagePaths = paths.filter(isImageAttachmentFile);
@@ -1672,8 +1712,9 @@
       const placeholders = textPaths.map((filePath) => ({
         key: `drop-${Date.now()}-${filePath}`,
         title: fileNameFromPath(filePath),
+        type: 'generating-note' as const,
       }));
-      pendingDropNotes = [...pendingDropNotes, ...placeholders];
+      pendingAdds = [...pendingAdds, ...placeholders];
 
       Promise.all(
         textPaths.map(async (filePath, i) => {
@@ -1692,7 +1733,7 @@
               description: `Could not read "${fileNameFromPath(filePath)}" \u2014 ${detail}`,
             });
           } finally {
-            pendingDropNotes = pendingDropNotes.filter((p) => p.key !== placeholders[i].key);
+            pendingAdds = pendingAdds.filter((p) => p.key !== placeholders[i].key);
           }
         })
       ).then(() => {
@@ -1701,28 +1742,100 @@
     }
 
     if (imagePaths.length > 0) {
-      Promise.all(
-        imagePaths.map(async (filePath) => {
-          try {
-            await commands.createImage(branch.id, branch.projectId, filePath);
-          } catch (e) {
-            console.error('Failed to create image from drop:', e);
-            // Same shape as the text path, so a rejected PDF or oversized
-            // image ("could not open PDF", "media exceeds 10 MB limit") is
-            // not a silent no-op. The extension stays in the name, as in the
-            // composer's attach errors: it is what explains a PDF failure.
-            const reason = e instanceof Error ? e.message : typeof e === 'string' ? e : null;
-            toast.error('Error', {
-              description: `Could not attach "${attachBasename(filePath)}"${reason ? ` \u2014 ${reason}` : ''}`,
-            });
-          }
-        })
-      ).then(() => {
-        loadTimeline();
+      addImagePaths(imagePaths);
+    }
+  }
+
+  // =========================================================================
+  // Images → timeline (drop, or the "…" menu's "Add image")
+  // =========================================================================
+
+  let imagePicker: BranchImagePicker | undefined = $state();
+  let nextPendingImageId = 0;
+
+  /**
+   * Stores images straight onto the timeline — not pending on a session. A
+   * drop and "Add image" both land here, so a picked image ends up exactly
+   * where a dropped one does.
+   *
+   * Batches go through `storeTimelineImages`, one queue shared by every card,
+   * so only one file is stored at a time. Every image gets an "adding..." row
+   * up front, even when its batch queues behind another, since a multi-photo
+   * upload from iOS can take seconds.
+   * Each store publishes a branch change, and the reload it triggers brings in
+   * that image's real row. The placeholder carries the stored image's ID, so
+   * `prunePlaceholders` swaps one for the other in that reload's update.
+   */
+  async function addTimelineImages(images: TimelineImageUpload[]) {
+    // Keyed by counter, not name: iOS can hand back several "image.jpg"s.
+    const placeholders = images.map(({ name }) => ({
+      key: `image-${nextPendingImageId++}`,
+      title: name,
+      type: 'pending-image' as const,
+    }));
+    const removePlaceholders = (keys: string[]) => {
+      pendingAdds = pendingAdds.filter((p) => !keys.includes(p.key));
+    };
+    pendingAdds = [...pendingAdds, ...placeholders];
+
+    try {
+      const rejections = await storeTimelineImages(images, {
+        onStored: (i, image) => {
+          const { key } = placeholders[i];
+          pendingAdds = pendingAdds.map((p) => (p.key === key ? { ...p, imageId: image.id } : p));
+          // In case the change-feed reload landed before the store returned.
+          if (timeline) pendingAdds = pruneLandedImages(pendingAdds, timeline);
+        },
+        onRejected: (i) => removePlaceholders([placeholders[i].key]),
       });
+      // One toast for the batch, like the composer's attach errors, so a
+      // rejected PDF or oversized image is not a silent no-op. The extension
+      // stays in each name: it is what explains a PDF failure.
+      const message = formatAttachErrors(rejections);
+      if (message) toast.error('Error', { description: message });
+
+      // Wait for the newest load, not just this one: a change-feed reload
+      // that supersedes it makes it return early, and dropping the rows below
+      // before that reload lands would blink them out.
+      void loadTimeline();
+      await timelineLoadsSettled();
+    } catch (e) {
+      notifyError('Could not add images', e);
+    } finally {
+      // Fallback for a stored image whose row never arrives (the refresh
+      // failed, or it was deleted meanwhile), and for every row after a batch
+      // that failed outright, so no spinner can stay forever.
+      removePlaceholders(placeholders.map((p) => p.key));
     }
   }
 
+  /** Desktop: files dropped on the card or picked in the open panel. */
+  function addImagePaths(paths: string[]) {
+    void addTimelineImages(
+      paths.map((filePath) => ({
+        name: attachBasename(filePath),
+        store: () => commands.createImage(branch.id, branch.projectId, filePath),
+      }))
+    );
+  }
+
+  /** Web: files picked through the file input (on iOS, Photo Library or Files). */
+  function addImageFiles(files: File[]) {
+    void addTimelineImages(
+      files.map((file) => ({
+        name: file.name,
+        store: async () =>
+          commands.createImageFromData(
+            branch.id,
+            branch.projectId,
+            file.name,
+            file.type,
+            await fileToBase64(file)
+          ),
+      }))
+    );
+  }
+
   $effect(() => {
     if (!isLocal) return;
 
@@ -1937,7 +2050,7 @@
               timeline={timeline ?? emptyTimeline}
               repoDir={branch.worktreePath}
               {hashtagItems}
-              pendingDropNotes={isLocal ? pendingDropNotes : undefined}
+              {pendingAdds}
               pendingItems={getPendingSessionItems(branch.id)}
               {prunedSessionIds}
               {error}
@@ -1994,6 +2107,7 @@
                 ? (e) => sessionMgr.openNewSession('review', e)
                 : undefined}
               onWriteNote={() => (openWriteNote = { note: null })}
+              onAddImage={() => imagePicker?.open()}
               onPullOrigin={handlePullOrigin}
               onPushOrigin={handlePushOrigin}
               onOpenPushSession={pushSessionId && pushSessionId !== '__pending__'
@@ -2077,6 +2191,15 @@
   {/if}
 </div>
 
+<!-- Outside the "…" menu, whose content unmounts as it closes: the web
+     build's file input has to outlive the tap that opened it. -->
+<BranchImagePicker
+  bind:this={imagePicker}
+  onPickPaths={addImagePaths}
+  onPickFiles={addImageFiles}
+  onError={(e) => notifyError('Could not open the image picker', e)}
+/>
+
 {#if openNote}
   <NoteModal
     open={true}
diff --git a/apps/staged/src/lib/features/branches/BranchImagePicker.svelte b/apps/staged/src/lib/features/branches/BranchImagePicker.svelte
new file mode 100644
index 000000000..91eeec894
--- /dev/null
+++ b/apps/staged/src/lib/features/branches/BranchImagePicker.svelte
@@ -0,0 +1,68 @@
+<!--
+  BranchImagePicker.svelte - The branch card's "Add image" picker
+
+  Call `open()` from the user's tap/click. Desktop (Tauri) shows the native
+  open panel filtered to images and hands back file paths; the web build (iOS
+  Safari) clicks a hidden file input, so iOS presents its own source sheet —
+  Photo Library or Files — and hands back `File`s. Cancelling either picker
+  reports nothing.
+
+  Props:
+    onPickPaths — desktop: the picked file paths
+    onPickFiles — web: the picked files
+    onError     — the desktop panel could not be opened
+-->
+<script lang="ts">
+  import { isTauri } from '../../transport';
+  import { IMAGE_ACCEPT } from '../sessions/attachErrors';
+  import { pickImagePaths } from './branchImagePicker';
+
+  interface Props {
+    onPickPaths: (paths: string[]) => void;
+    onPickFiles: (files: File[]) => void;
+    onError: (error: unknown) => void;
+  }
+
+  let { onPickPaths, onPickFiles, onError }: Props = $props();
+
+  let fileInput: HTMLInputElement | undefined = $state();
+
+  /**
+   * Must run synchronously inside the user's gesture: iOS only opens a file
+   * input's picker while the tap is still being handled.
+   */
+  export function open() {
+    if (!isTauri) {
+      fileInput?.click();
+      return;
+    }
+    pickImagePaths().then((paths) => {
+      if (paths.length > 0) onPickPaths(paths);
+    }, onError);
+  }
+
+  function handleChange(e: Event) {
+    const input = e.currentTarget as HTMLInputElement;
+    const files = Array.from(input.files ?? []);
+    // Cleared so picking the same file again still fires `change`.
+    input.value = '';
+    if (files.length > 0) onPickFiles(files);
+  }
+</script>
+
+{#if !isTauri}
+  <input
+    bind:this={fileInput}
+    type="file"
+    accept={IMAGE_ACCEPT}
+    multiple
+    class="file-input-hidden"
+    onchange={handleChange}
+  />
+{/if}
+
+<style>
+  .file-input-hidden {
+    display: none;
+  }
+</style>
diff --git a/apps/staged/src/lib/features/branches/branchCardHelpers.ts b/apps/staged/src/lib/features/branches/branchCardHelpers.ts
index 1c8b6df9e..326b69c7c 100644
--- a/apps/staged/src/lib/features/branches/branchCardHelpers.ts
+++ b/apps/staged/src/lib/features/branches/branchCardHelpers.ts
@@ -2,7 +2,7 @@ import type { PullState } from '../../stores/pullState.svelte';
 import type { PushState } from '../../stores/pushState.svelte';
 import type { Branch, BranchGitState, PipelineExecution } from '../../types';
 
-const IMAGE_EXTENSIONS = ['.png', '.jpg', '.jpeg', '.gif', '.webp'];
+export const IMAGE_EXTENSIONS = ['.png', '.jpg', '.jpeg', '.gif', '.webp'];
 // Stored through the image attachment store too, as a PDF.
 const PDF_EXTENSIONS = ['.pdf'];
 
diff --git a/apps/staged/src/lib/features/branches/branchImagePicker.test.ts b/apps/staged/src/lib/features/branches/branchImagePicker.test.ts
new file mode 100644
index 000000000..b02a28812
--- /dev/null
+++ b/apps/staged/src/lib/features/branches/branchImagePicker.test.ts
@@ -0,0 +1,49 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+const { open } = vi.hoisted(() => ({ open: vi.fn() }));
+vi.mock('@tauri-apps/plugin-dialog', () => ({ open }));
+
+import { IMAGE_PICKER_FILTER, pickImagePaths } from './branchImagePicker';
+import { isImageAttachmentFile, isImageFile } from './branchCardHelpers';
+
+describe('pickImagePaths', () => {
+  beforeEach(() => {
+    open.mockReset();
+  });
+
+  it('opens a multi-select file panel filtered to images', async () => {
+    open.mockResolvedValue([]);
+    await pickImagePaths();
+    expect(open).toHaveBeenCalledWith({
+      title: 'Add image',
+      multiple: true,
+      directory: false,
+      filters: [{ name: 'Images', extensions: ['png', 'jpg', 'jpeg', 'gif', 'webp'] }],
+    });
+  });
+
+  it('returns the picked paths', async () => {
+    open.mockResolvedValue(['/Users/me/shot.png', '/Users/me/photo.jpg']);
+    expect(await pickImagePaths()).toEqual(['/Users/me/shot.png', '/Users/me/photo.jpg']);
+  });
+
+  it('returns no paths when the user cancels', async () => {
+    open.mockResolvedValue(null);
+    expect(await pickImagePaths()).toEqual([]);
+  });
+
+  it('surfaces a panel failure to the caller', async () => {
+    open.mockRejectedValue(new Error('dialog.open not allowed'));
+    await expect(pickImagePaths()).rejects.toThrow('dialog.open not allowed');
+  });
+});
+
+describe('IMAGE_PICKER_FILTER', () => {
+  it('offers exactly the image files a branch-card drop stores', () => {
+    for (const ext of IMAGE_PICKER_FILTER.extensions) {
+      expect(isImageFile(`photo.${ext}`)).toBe(true);
+      expect(isImageAttachmentFile(`photo.${ext}`)).toBe(true);
+    }
+    expect(IMAGE_PICKER_FILTER.extensions).not.toContain('pdf');
+  });
+});
diff --git a/apps/staged/src/lib/features/branches/branchImagePicker.ts b/apps/staged/src/lib/features/branches/branchImagePicker.ts
new file mode 100644
index 000000000..ba9eeb5df
--- /dev/null
+++ b/apps/staged/src/lib/features/branches/branchImagePicker.ts
@@ -0,0 +1,25 @@
+import { IMAGE_EXTENSIONS } from './branchCardHelpers';
+
+/** The open panel's filter: the image formats the image store keeps. */
+export const IMAGE_PICKER_FILTER = {
+  name: 'Images',
+  extensions: IMAGE_EXTENSIONS.map((ext) => ext.slice(1)),
+};
+
+/**
+ * Desktop (Tauri) "Add image": the native open panel, filtered to images.
+ * Resolves to the picked paths — empty when the user cancels.
+ *
+ * The dialog plugin rather than a file `<input>`: wry's open panel ignores
+ * the input's `accept`, so it could not be filtered to images.
+ */
+export async function pickImagePaths(): Promise<string[]> {
+  const { open } = await import('@tauri-apps/plugin-dialog');
+  const paths = await open({
+    title: 'Add image',
+    multiple: true,
+    directory: false,
+    filters: [IMAGE_PICKER_FILTER],
+  });
+  return paths ?? [];
+}
diff --git a/apps/staged/src/lib/features/branches/timelineImages.test.ts b/apps/staged/src/lib/features/branches/timelineImages.test.ts
new file mode 100644
index 000000000..0ff8bb12d
--- /dev/null
+++ b/apps/staged/src/lib/features/branches/timelineImages.test.ts
@@ -0,0 +1,223 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import type { ImageTimelineItem } from '../../types';
+import { formatAttachErrors } from '../sessions/attachErrors';
+import {
+  createImageStoreQueue,
+  pruneLandedImages,
+  storeImagesInOrder,
+  type PendingAdd,
+} from './timelineImages';
+
+function deferred() {
+  let resolve!: () => void;
+  const promise = new Promise<void>((r) => (resolve = r));
+  return { promise, resolve };
+}
+
+/** A store that waits for `gate` (if any), logs `id` to `order`, and returns it. */
+function storeAs(id: string, order: string[], gate?: Promise<void>) {
+  return vi.fn(async () => {
+    order.push(`start ${id}`);
+    await gate;
+    order.push(`end ${id}`);
+    return { id };
+  });
+}
+
+describe('storeImagesInOrder', () => {
+  beforeEach(() => {
+    vi.spyOn(console, 'error').mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('starts each store only after the previous one settles', async () => {
+    const order: string[] = [];
+    const first = deferred();
+    const second = deferred();
+    const storeFirst = storeAs('a', order, first.promise);
+    const storeSecond = storeAs('b', order, second.promise);
+
+    const done = storeImagesInOrder([
+      { name: 'a.png', store: storeFirst },
+      { name: 'b.png', store: storeSecond },
+    ]);
+
+    await vi.waitFor(() => expect(storeFirst).toHaveBeenCalled());
+    expect(storeSecond).not.toHaveBeenCalled();
+
+    first.resolve();
+    await vi.waitFor(() => expect(storeSecond).toHaveBeenCalled());
+
+    second.resolve();
+    expect(await done).toEqual([]);
+  });
+
+  it('keeps going past a rejection, reporting each image by index', async () => {
+    const order: string[] = [];
+    const onStored = vi.fn();
+    const onRejected = vi.fn();
+    const store = (name: string, error?: unknown) => async () => {
+      order.push(name);
+      if (error !== undefined) throw error;
+      return { id: `id-${name}` };
+    };
+
+    const rejections = await storeImagesInOrder(
+      [
+        { name: 'big.png', store: store('big.png', new Error('media exceeds 10 MB limit')) },
+        { name: 'ok.png', store: store('ok.png') },
+        { name: 'bad.gif', store: store('bad.gif', 'unsupported image format') },
+      ],
+      { onStored, onRejected }
+    );
+
+    expect(order).toEqual(['big.png', 'ok.png', 'bad.gif']);
+    expect(rejections).toEqual([
+      { name: 'big.png', reason: 'media exceeds 10 MB limit' },
+      { name: 'bad.gif', reason: 'unsupported image format' },
+    ]);
+    expect(onStored.mock.calls).toEqual([[1, { id: 'id-ok.png' }]]);
+    expect(onRejected.mock.calls).toEqual([[0], [2]]);
+  });
+
+  it('reports a batch of rejections as one message', async () => {
+    const tooBig = async (): Promise<{ id: string }> => {
+      throw new Error('media exceeds 10 MB limit');
+    };
+
+    const rejections = await storeImagesInOrder([
+      { name: 'one.jpg', store: tooBig },
+      { name: 'two.jpg', store: tooBig },
+    ]);
+
+    expect(formatAttachErrors(rejections)).toBe(
+      'Could not attach 2 files (one.jpg, two.jpg): media exceeds 10 MB limit'
+    );
+  });
+});
+
+describe('createImageStoreQueue', () => {
+  beforeEach(() => {
+    vi.spyOn(console, 'error').mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('holds a second batch until the first has stored every image', async () => {
+    const order: string[] = [];
+    const a1 = deferred();
+    const a2 = deferred();
+    const storeImages = createImageStoreQueue();
+
+    const firstBatch = storeImages([
+      { name: 'a1.jpg', store: storeAs('a1', order, a1.promise) },
+      { name: 'a2.jpg', store: storeAs('a2', order, a2.promise) },
+    ]);
+    const storeB1 = storeAs('b1', order);
+    const secondBatch = storeImages([
+      { name: 'b1.jpg', store: storeB1 },
+      { name: 'b2.jpg', store: storeAs('b2', order) },
+    ]);
+
+    a1.resolve();
+    await vi.waitFor(() => expect(order).toContain('start a2'));
+    expect(storeB1).not.toHaveBeenCalled();
+
+    a2.resolve();
+    await Promise.all([firstBatch, secondBatch]);
+    expect(order).toEqual([
+      'start a1',
+      'end a1',
+      'start a2',
+      'end a2',
+      'start b1',
+      'end b1',
+      'start b2',
+      'end b2',
+    ]);
+  });
+
+  it('returns each batch its own rejections, and a rejection does not stall the queue', async () => {
+    const storeImages = createImageStoreQueue();
+    const rejected = async (): Promise<{ id: string }> => {
+      throw new Error('could not open PDF');
+    };
+
+    const [first, second] = await Promise.all([
+      storeImages([{ name: 'scan.pdf', store: rejected }]),
+      storeImages([{ name: 'ok.png', store: async () => ({ id: 'ok' }) }]),
+    ]);
+
+    expect(first).toEqual([{ name: 'scan.pdf', reason: 'could not open PDF' }]);
+    expect(second).toEqual([]);
+  });
+
+  it('keeps running batches after a handler throws', async () => {
+    const storeImages = createImageStoreQueue();
+    const store = async () => ({ id: 'x' });
+
+    const first = storeImages([{ name: 'a.png', store }], {
+      onStored: () => {
+        throw new Error('handler bug');
+      },
+    });
+    const second = storeImages([{ name: 'b.png', store }]);
+
+    await expect(first).rejects.toThrow('handler bug');
+    expect(await second).toEqual([]);
+  });
+});
+
+describe('pruneLandedImages', () => {
+  function timelineWith(...ids: string[]) {
+    return {
+      images: ids.map((id): ImageTimelineItem => ({
+        id,
+        filename: `${id}.png`,
+        mimeType: 'image/png',
+        sizeBytes: 1,
+        sessionId: null,
+        sessionStatus: null,
+        completionReason: null,
+        createdAt: 0,
+      })),
+    };
+  }
+
+  function note(key: string): PendingAdd {
+    return { key, title: `${key}.md`, type: 'generating-note' };
+  }
+
+  function image(key: string, imageId?: string): PendingAdd {
+    return { key, title: `${key}.png`, type: 'pending-image', imageId };
+  }
+
+  it('drops rows whose stored image is on the timeline', () => {
+    const adds = [
+      note('note'),
+      image('landed', 'img-1'),
+      image('stored', 'img-2'),
+      image('storing'),
+    ];
+
+    expect(pruneLandedImages(adds, timelineWith('img-1', 'other')).map((a) => a.key)).toEqual([
+      'note',
+      'stored',
+      'storing',
+    ]);
+  });
+
+  it('returns the same rows when nothing has landed', () => {
+    const adds = [image('stored', 'img-2'), image('storing')];
+
+    const unstored = [note('note'), image('storing')];
+
+    expect(pruneLandedImages(adds, timelineWith('img-1'))).toBe(adds);
+    expect(pruneLandedImages(unstored, timelineWith())).toBe(unstored);
+  });
+});
diff --git a/apps/staged/src/lib/features/branches/timelineImages.ts b/apps/staged/src/lib/features/branches/timelineImages.ts
new file mode 100644
index 000000000..ee05e6442
--- /dev/null
+++ b/apps/staged/src/lib/features/branches/timelineImages.ts
@@ -0,0 +1,99 @@
+import type { BranchTimeline, Image } from '../../types';
+import { attachErrorReason, type AttachRejection } from '../sessions/attachErrors';
+
+/**
+ * An "adding..." row for an item headed straight onto a branch timeline: a
+ * note from a dropped text file, or a dropped or picked image. An image's row
+ * gets `imageId` once it is stored.
+ */
+export interface PendingAdd {
+  key: string;
+  title: string;
+  type: 'generating-note' | 'pending-image';
+  imageId?: string;
+}
+
+/** One image headed straight onto a branch timeline (dropped or picked). */
+export interface TimelineImageUpload {
+  name: string;
+  store: () => Promise<Pick<Image, 'id'>>;
+}
+
+export interface StoreImageHandlers {
+  /** The image at `index` was stored as `image`. */
+  onStored?: (index: number, image: Pick<Image, 'id'>) => void;
+  /** The image at `index` was rejected; its reason is in the returned list. */
+  onRejected?: (index: number) => void;
+}
+
+/**
+ * Stores a batch of images one at a time, in the order given. A web store
+ * holds the whole file in memory several times over (bytes, base64, request
+ * body), so going one by one keeps a large Photo Library pick in mobile
+ * Safari to one file's worth. It also keeps the batch in pick order: an
+ * image's timeline position is when the store inserted it.
+ *
+ * A rejection does not stop the batch. Each is reported through `onRejected`
+ * as it happens and returned with the rest, so the caller can report the
+ * whole batch in one message.
+ */
+export async function storeImagesInOrder(
+  images: TimelineImageUpload[],
+  { onStored, onRejected }: StoreImageHandlers = {}
+): Promise<AttachRejection[]> {
+  const rejections: AttachRejection[] = [];
+  for (const [index, { name, store }] of images.entries()) {
+    let image: Pick<Image, 'id'>;
+    try {
+      image = await store();
+    } catch (e) {
+      console.error('Failed to add image:', e);
+      rejections.push({ name, reason: attachErrorReason(e) });
+      onRejected?.(index);
+      continue;
+    }
+    onStored?.(index, image);
+  }
+  return rejections;
+}
+
+/**
+ * Returns a `storeImagesInOrder` that runs each batch only after every earlier
+ * one has finished. A pick or drop made while a batch is still storing then
+ * waits its turn, so across batches too only one file is stored at a time,
+ * and batches land on the timeline in the order they were made instead of
+ * interleaving.
+ */
+export function createImageStoreQueue() {
+  let tail: Promise<unknown> = Promise.resolve();
+  return (images: TimelineImageUpload[], handlers?: StoreImageHandlers) => {
+    const batch = tail.then(() => storeImagesInOrder(images, handlers));
+    tail = batch.catch(() => {});
+    return batch;
+  };
+}
+
+/**
+ * The queue every branch card stores its images through. It is shared, not
+ * per card, so the one-file-at-a-time guarantee holds across cards and
+ * survives a card remounting mid-upload (on a project switch, say), when the
+ * old instance's batch is still storing.
+ */
+export const storeTimelineImages = createImageStoreQueue();
+
+/**
+ * Drops the "adding..." rows whose stored image is already in `timeline`.
+ * Every stored image publishes a branch change, and the reload it triggers
+ * brings in the image's real row; pruning in that same update swaps the row
+ * for the image instead of showing both. Returns `adds` itself when nothing
+ * has landed.
+ */
+export function pruneLandedImages(
+  adds: PendingAdd[],
+  timeline: Pick<BranchTimeline, 'images'>
+): PendingAdd[] {
+  if (!adds.some((add) => add.imageId)) return adds;
+  const landed = new Set(timeline.images.map((image) => image.id));
+  const next = adds.filter((add) => !add.imageId || !landed.has(add.imageId));
+  return next.length === adds.length ? adds : next;
+}
diff --git a/apps/staged/src/lib/features/sessions/ImageAttachment.svelte b/apps/staged/src/lib/features/sessions/ImageAttachment.svelte
index 5f991c221..4f9bb7db1 100644
--- a/apps/staged/src/lib/features/sessions/ImageAttachment.svelte
+++ b/apps/staged/src/lib/features/sessions/ImageAttachment.svelte
@@ -34,6 +34,7 @@
   import type { TextSnippet } from './sessionModalHelpers';
   import AttachmentThumb from './AttachmentThumb.svelte';
   import { localPreview, type AttachmentPreview } from './attachmentPreview';
+  import { fileToBase64 } from './attachmentData';
   import {
     ATTACHMENT_ACCEPT,
     attachErrorReason,
@@ -117,16 +118,8 @@
 
   /** Stores one file, returning the rejection reason or null on success. */
   async function addImageFile(file: File): Promise<string | null> {
-    const buffer = await file.arrayBuffer();
-    const bytes = new Uint8Array(buffer);
-    // Convert to base64 using chunked approach to avoid O(n²) string concatenation
-    const chunks = [];
-    for (let i = 0; i < bytes.length; i += 8192) {
-      chunks.push(String.fromCharCode(...bytes.subarray(i, i + 8192)));
-    }
-    const base64 = btoa(chunks.join(''));
-
     try {
+      const base64 = await fileToBase64(file);
       const image = await createImageFromData(
         branchId,
         projectId,
diff --git a/apps/staged/src/lib/features/sessions/SessionChatPane.svelte b/apps/staged/src/lib/features/sessions/SessionChatPane.svelte
index 745ada78f..6b1e6585d 100644
--- a/apps/staged/src/lib/features/sessions/SessionChatPane.svelte
+++ b/apps/staged/src/lib/features/sessions/SessionChatPane.svelte
@@ -130,6 +130,7 @@
   import { hasXmlBlocks, sessionEndMessage, XML_BLOCK_TAGS } from './sessionModalHelpers';
   import AttachmentThumb from './AttachmentThumb.svelte';
   import { localPreview, type AttachmentPreview } from './attachmentPreview';
+  import { fileToBase64 } from './attachmentData';
   import {
     attachBasename,
     attachErrorReason,
@@ -566,14 +567,8 @@
   /** Stores one file, returning the rejection reason or null on success. */
   async function addImageFile(file: File): Promise<string | null> {
     if (!projectId) return null;
-    const buffer = await file.arrayBuffer();
-    const bytes = new Uint8Array(buffer);
-    const chunks: string[] = [];
-    for (let i = 0; i < bytes.length; i += 8192) {
-      chunks.push(String.fromCharCode(...bytes.subarray(i, i + 8192)));
-    }
-    const base64 = btoa(chunks.join(''));
     try {
+      const base64 = await fileToBase64(file);
       const image = await createImageFromData(
         branchId ?? null,
         projectId,
diff --git a/apps/staged/src/lib/features/sessions/attachErrors.test.ts b/apps/staged/src/lib/features/sessions/attachErrors.test.ts
index f834c642b..b75103eea 100644
--- a/apps/staged/src/lib/features/sessions/attachErrors.test.ts
+++ b/apps/staged/src/lib/features/sessions/attachErrors.test.ts
@@ -1,6 +1,7 @@
 import { describe, expect, it } from 'vitest';
 import {
   ATTACHMENT_ACCEPT,
+  IMAGE_ACCEPT,
   attachBasename,
   attachErrorReason,
   formatAttachErrors,
@@ -71,4 +72,11 @@ describe('isAttachableClipboardType', () => {
     expect(ATTACHMENT_ACCEPT.split(',')).toContain('application/pdf');
     expect(ATTACHMENT_ACCEPT.split(',')).toContain('image/png');
   });
+
+  it('offers only image types in the image-only picker', () => {
+    const types = IMAGE_ACCEPT.split(',');
+    expect(types).toEqual(['image/png', 'image/jpeg', 'image/gif', 'image/webp']);
+    expect(types.every(isAttachableClipboardType)).toBe(true);
+    expect(ATTACHMENT_ACCEPT.split(',')).toEqual([...types, 'application/pdf']);
+  });
 });
diff --git a/apps/staged/src/lib/features/sessions/attachErrors.ts b/apps/staged/src/lib/features/sessions/attachErrors.ts
index a6e7e57fa..4fcdbe5f1 100644
--- a/apps/staged/src/lib/features/sessions/attachErrors.ts
+++ b/apps/staged/src/lib/features/sessions/attachErrors.ts
@@ -4,12 +4,19 @@ export interface AttachRejection {
   reason: string;
 }
 
+/**
+ * File-picker `accept` list for the image formats the image store keeps.
+ * Spelled out rather than `image/*` so pickers (the iOS Files browser too)
+ * only offer formats the store accepts — no HEIC, SVG, or TIFF.
+ */
+export const IMAGE_ACCEPT = 'image/png,image/jpeg,image/gif,image/webp';
+
 /**
  * File-picker `accept` list for the image store. A PDF is accepted alongside
  * images: it is stored as a PDF, previewed through a rendering of its first
  * page, and opened in the native PDF viewer.
  */
-export const ATTACHMENT_ACCEPT = 'image/png,image/jpeg,image/gif,image/webp,application/pdf';
+export const ATTACHMENT_ACCEPT = `${IMAGE_ACCEPT},application/pdf`;
 
 /** Whether a pasted clipboard item can be attached through the image store. */
 export function isAttachableClipboardType(type: string): boolean {
diff --git a/apps/staged/src/lib/features/sessions/attachmentData.test.ts b/apps/staged/src/lib/features/sessions/attachmentData.test.ts
new file mode 100644
index 000000000..2aa0cdaab
--- /dev/null
+++ b/apps/staged/src/lib/features/sessions/attachmentData.test.ts
@@ -0,0 +1,23 @@
+import { describe, expect, it } from 'vitest';
+import { fileToBase64 } from './attachmentData';
+
+function decode(base64: string): number[] {
+  return Array.from(atob(base64), (c) => c.charCodeAt(0));
+}
+
+describe('fileToBase64', () => {
+  it('encodes an empty file as an empty string', async () => {
+    expect(await fileToBase64(new Blob([]))).toBe('');
+  });
+
+  it('encodes binary bytes, not text', async () => {
+    const png = new Uint8Array([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a, 0x00, 0xff]);
+    expect(await fileToBase64(new Blob([png]))).toBe('iVBORw0KGgoA/w==');
+  });
+
+  it('round-trips a file spanning several chunks', async () => {
+    const bytes = new Uint8Array(8192 * 2 + 17).map((_, i) => (i * 31) % 256);
+    const encoded = await fileToBase64(new File([bytes], 'photo.jpg', { type: 'image/jpeg' }));
+    expect(decode(encoded)).toEqual(Array.from(bytes));
+  });
+});
diff --git a/apps/staged/src/lib/features/sessions/attachmentData.ts b/apps/staged/src/lib/features/sessions/attachmentData.ts
new file mode 100644
index 000000000..73b469df9
--- /dev/null
+++ b/apps/staged/src/lib/features/sessions/attachmentData.ts
@@ -0,0 +1,13 @@
+/**
+ * A browser `File`'s bytes as base64, the payload `create_image_from_data`
+ * takes. Converted in chunks to avoid O(n²) string concatenation and the
+ * argument-count limit of a single `String.fromCharCode` call.
+ */
+export async function fileToBase64(file: Blob): Promise<string> {
+  const bytes = new Uint8Array(await file.arrayBuffer());
+  const chunks: string[] = [];
+  for (let i = 0; i < bytes.length; i += 8192) {
+    chunks.push(String.fromCharCode(...bytes.subarray(i, i + 8192)));
+  }
+  return btoa(chunks.join(''));
+}
diff --git a/apps/staged/src/lib/features/timeline/BranchTimeline.svelte b/apps/staged/src/lib/features/timeline/BranchTimeline.svelte
index 050b5dd8b..739166b6a 100644
--- a/apps/staged/src/lib/features/timeline/BranchTimeline.svelte
+++ b/apps/staged/src/lib/features/timeline/BranchTimeline.svelte
@@ -16,6 +16,7 @@
   import Plus from '@lucide/svelte/icons/plus';
   import MoreHorizontal from '@lucide/svelte/icons/more-horizontal';
   import PencilLine from '@lucide/svelte/icons/pencil-line';
+  import ImagePlus from '@lucide/svelte/icons/image-plus';
   import { isResumableReason } from '../../types';
   import type {
     BranchGitState,
@@ -25,6 +26,7 @@
     UpstreamRelation,
   } from '../../types';
   import type { NoteClickInfo } from '../sessions/noteFreshness';
+  import type { PendingAdd } from '../branches/timelineImages';
   import TimelineRow from './TimelineRow.svelte';
   import TimelineContextMenu, {
     type TimelineContextMenuAction,
@@ -64,8 +66,12 @@
     timeline: BranchTimelineData;
     /** Repo base directory — tool call paths within it are shown as relative in hints. */
     repoDir?: string | null;
-    /** Placeholder items for notes being created from drag-and-drop. */
-    pendingDropNotes?: { key: string; title: string }[];
+    /**
+     * Placeholder rows for items the user is adding directly: notes from
+     * dropped text files, and dropped or picked images (with `imageId` once
+     * stored).
+     */
+    pendingAdds?: PendingAdd[];
     /** Placeholder items for newly started sessions before timeline persistence catches up. */
     pendingItems?: PendingItem[];
     /** Session IDs that were just pruned from pendingItems because the real timeline item arrived. */
@@ -91,6 +97,8 @@
     onNewReview?: (e?: MouseEvent) => void;
     /** Open the editor for a note the user writes themselves (no agent session). */
     onWriteNote?: () => void;
+    /** Pick image files to add straight to the timeline. */
+    onAddImage?: () => void;
     onPullOrigin?: () => void;
     onPushOrigin?: () => void;
     onRebaseBranch?: () => void;
@@ -156,7 +164,7 @@
   let {
     timeline,
     repoDir,
-    pendingDropNotes = [],
+    pendingAdds = [],
     pendingItems = [],
     prunedSessionIds = new Set(),
     deletingItems = [],
@@ -176,6 +184,7 @@
     onNewCommit,
     onNewReview,
     onWriteNote,
+    onAddImage,
     onPullOrigin,
     onPushOrigin,
     onRebaseBranch,
@@ -233,6 +242,18 @@
     return slide(node, { duration: 200 });
   }
 
+  /**
+   * The same for an "adding..." image row: when it leaves because its image
+   * is now on the timeline, the image row replaces it in place. Rows that go
+   * for any other reason (a rejected image, a finished text drop) slide out.
+   */
+  function maybeSlideAdd(node: Element, params: { imageId?: string }) {
+    if (params.imageId && timeline.images.some((image) => image.id === params.imageId)) {
+      return { duration: 0 };
+    }
+    return slide(node, { duration: 200 });
+  }
+
   let liveSessionHints = $state<Record<string, string>>({});
   let liveSessionTitles = $state<Record<string, string>>({});
   const liveSessionHintPoller = createLiveSessionHints(
@@ -908,12 +929,17 @@
     return actions;
   });
   let actionFooterVisible = $derived(
-    !!onNewNote || !!onNewCommit || !!onNewReview || !!onWriteNote || !!footerActions
+    !!onNewNote ||
+      !!onNewCommit ||
+      !!onNewReview ||
+      !!onWriteNote ||
+      !!onAddImage ||
+      !!footerActions
   );
 
   /** True when the timeline has no content and action buttons should be enlarged. */
   let actionButtonsEnlarged = $derived(
-    items.length === 0 && pendingDropNotes.length === 0 && pendingItems.length === 0
+    items.length === 0 && pendingAdds.length === 0 && pendingItems.length === 0
   );
 
   // ── Footer overflow ───────────────────────────────────────────────────
@@ -1090,7 +1116,7 @@
   }
 </script>
 
-{#if items.length === 0 && !actionFooterVisible && pendingDropNotes.length === 0 && pendingItems.length === 0}
+{#if items.length === 0 && !actionFooterVisible && pendingAdds.length === 0 && pendingItems.length === 0}
   <p class="no-items">No commits or notes yet</p>
 {:else}
   <!-- Unified timeline (vertical) -->
@@ -1129,7 +1155,7 @@
             discardChangesDisabledReason={item.discardChangesDisabledReason}
             deleting={item.deleting}
             isLast={index === normalItems.length - 1 &&
-              pendingDropNotes.length === 0 &&
+              pendingAdds.length === 0 &&
               pendingItems.length === 0 &&
               gitFooterItems.length === 0 &&
               !error &&
@@ -1149,13 +1175,13 @@
           />
         </div>
       {/each}
-      {#each pendingDropNotes as drop, index (drop.key)}
-        <div transition:slide={{ duration: 200 }}>
+      {#each pendingAdds as add, index (add.key)}
+        <div in:slide={{ duration: 200 }} out:maybeSlideAdd={{ imageId: add.imageId }}>
           <TimelineRow
-            type="generating-note"
-            title={drop.title}
+            type={add.type}
+            title={add.title}
             secondaryMeta="adding..."
-            isLast={index === pendingDropNotes.length - 1 &&
+            isLast={index === pendingAdds.length - 1 &&
               pendingItems.length === 0 &&
               gitFooterItems.length === 0 &&
               !error &&
@@ -1370,8 +1396,8 @@
             {/if}
             <!-- The menu is the only way to reach an overflowed button, so it
                  renders whenever something overflowed — not just when there is
-                 a "Write note" action to hang off it. -->
-            {#if onWriteNote || overflowMenuActions.length > 0}
+                 a manual action to hang off it. -->
+            {#if onWriteNote || onAddImage || overflowMenuActions.length > 0}
               <DropdownMenu.Root>
                 <DropdownMenu.Trigger
                   class={buttonVariants({ variant: 'outline', size: 'icon-sm' })}
@@ -1383,7 +1409,7 @@
                 <DropdownMenu.Content align="start" sideOffset={4} class="min-w-[180px]">
                   <!-- Overflowed buttons lead, in their footer order, so the menu
                        reads as a continuation of the button row; the manual
-                       "Write note" action sits below them. -->
+                       "Write note" and "Add image" actions sit below them. -->
                   {#each overflowMenuActions as action (action)}
                     {#if action === 'note'}
                       <DropdownMenu.Item
@@ -1410,14 +1436,21 @@
                       </DropdownMenu.Item>
                     {/if}
                   {/each}
+                  {#if (onWriteNote || onAddImage) && overflowMenuActions.length > 0}
+                    <DropdownMenu.Separator />
+                  {/if}
                   {#if onWriteNote}
-                    {#if overflowMenuActions.length > 0}
-                      <DropdownMenu.Separator />
-                    {/if}
                     <DropdownMenu.Item onSelect={() => onWriteNote?.()}>
                       <PencilLine size={14} /> Write note
                     </DropdownMenu.Item>
                   {/if}
+                  {#if onAddImage}
+                    <!-- Called straight from the select so the picker opens
+                         inside the tap, as iOS requires. -->
+                    <DropdownMenu.Item onSelect={() => onAddImage?.()}>
+                      <ImagePlus size={14} /> Add image
+                    </DropdownMenu.Item>
+                  {/if}
                 </DropdownMenu.Content>
               </DropdownMenu.Root>
             {/if}
diff --git a/apps/staged/src/lib/features/timeline/TimelineRow.svelte b/apps/staged/src/lib/features/timeline/TimelineRow.svelte
index d0db2defe..480da2b47 100644
--- a/apps/staged/src/lib/features/timeline/TimelineRow.svelte
+++ b/apps/staged/src/lib/features/timeline/TimelineRow.svelte
@@ -34,6 +34,7 @@
     | 'queued-review'
     | 'failed-review'
     | 'image'
+    | 'pending-image'
     | 'git-info'
     | 'git-warning'
     | 'git-merge'
@@ -152,7 +153,7 @@
       type === 'queued-review' ||
       type === 'failed-review'
   );
-  let isImage = $derived(type === 'image');
+  let isImage = $derived(type === 'image' || type === 'pending-image');
   let isGitState = $derived(
     type === 'git-info' ||
       type === 'git-warning' ||
@@ -171,6 +172,7 @@
       type === 'pending-commit' ||
       type === 'generating-note' ||
       type === 'generating-review' ||
+      type === 'pending-image' ||
       type === 'provisioning'
   );
   let isFailed = $derived(