From bb1ce8320b9168874c4177d4ac7a57b77864d463 Mon Sep 17 00:00:00 2001
From: Max Novich <mnovich@squareup.com>
Date: Wed, 4 Feb 2026 21:49:05 -0800
Subject: [PATCH 1/4] Add image attachment support to ACP communication

- Add ImageAttachment type to Rust backend and TypeScript frontend
- Update send_agent_prompt_streaming command to accept optional images parameter
- Add run_acp_prompt_streaming_with_images function to AI client
- Update session manager send_prompt to handle image attachments
- Images are sent as base64-encoded content blocks in ACP prompts
- Supports pasting and attaching images for multimodal agent interactions
---
 src-tauri/src/ai/client.rs  | 59 +++++++++++++++++++++++++++++++++----
 src-tauri/src/ai/mod.rs     |  4 +--
 src-tauri/src/ai/session.rs | 44 +++++++++++++++++++--------
 src-tauri/src/lib.rs        | 25 ++++++++++++----
 src/lib/services/ai.ts      |  9 ++++--
 src/lib/types.ts            |  8 +++++
 6 files changed, 122 insertions(+), 27 deletions(-)

diff --git a/src-tauri/src/ai/client.rs b/src-tauri/src/ai/client.rs
index b35806d..3bb0e03 100644
--- a/src-tauri/src/ai/client.rs
+++ b/src-tauri/src/ai/client.rs
@@ -558,7 +558,7 @@ pub async fn run_acp_prompt(
 ) -> Result<String, String> {
     // No streaming, no events emitted — internal_session_id is unused
     let result =
-        run_acp_prompt_internal(agent, working_dir, prompt, None, None, "", true, None, None)
+        run_acp_prompt_internal(agent, working_dir, prompt, None, None, None, "", true, None, None)
             .await?;
     Ok(result.response)
 }
@@ -578,6 +578,7 @@ pub async fn run_acp_prompt_raw(
         prompt,
         None,
         None,
+        None,
         "",
         false,
         None,
@@ -603,6 +604,7 @@ pub async fn run_acp_prompt_with_session(
         agent,
         working_dir,
         prompt,
+        None,
         session_id,
         None,
         "",
@@ -638,6 +640,38 @@ pub async fn run_acp_prompt_streaming(
         agent,
         working_dir,
         prompt,
+        None, // No images
+        acp_session_id,
+        Some(app_handle),
+        internal_session_id,
+        true,
+        buffer_callback,
+        cancellation,
+    )
+    .await
+}
+
+/// Run a prompt with images through ACP with streaming events emitted to frontend
+///
+/// Same as `run_acp_prompt_streaming` but accepts optional image attachments.
+/// Images are sent as ContentBlock::Image in the prompt request.
+#[allow(clippy::too_many_arguments)]
+pub async fn run_acp_prompt_streaming_with_images(
+    agent: &AcpAgent,
+    working_dir: &Path,
+    prompt: &str,
+    images: Option<&[crate::ImageAttachment]>,
+    acp_session_id: Option<&str>,
+    internal_session_id: &str,
+    app_handle: tauri::AppHandle,
+    buffer_callback: Option<Arc<dyn Fn(Vec<crate::store::ContentSegment>) + Send + Sync>>,
+    cancellation: Option<Arc<CancellationHandle>>,
+) -> Result<AcpPromptResult, String> {
+    run_acp_prompt_internal(
+        agent,
+        working_dir,
+        prompt,
+        images,
         acp_session_id,
         Some(app_handle),
         internal_session_id,
@@ -654,6 +688,7 @@ async fn run_acp_prompt_internal(
     agent: &AcpAgent,
     working_dir: &Path,
     prompt: &str,
+    images: Option<&[crate::ImageAttachment]>,
     acp_session_id: Option<&str>,
     app_handle: Option<tauri::AppHandle>,
     internal_session_id: &str,
@@ -666,6 +701,7 @@ async fn run_acp_prompt_internal(
     let agent_args: Vec<String> = agent.acp_args().iter().map(|s| s.to_string()).collect();
     let working_dir = working_dir.to_path_buf();
     let prompt = prompt.to_string();
+    let images_owned: Option<Vec<crate::ImageAttachment>> = images.map(|imgs| imgs.to_vec());
     let acp_session_id = acp_session_id.map(|s| s.to_string());
     let internal_session_id = internal_session_id.to_string();
 
@@ -687,6 +723,7 @@ async fn run_acp_prompt_internal(
                 &agent_args,
                 &working_dir,
                 &prompt,
+                images_owned.as_deref(),
                 acp_session_id.as_deref(),
                 app_handle,
                 &internal_session_id,
@@ -709,6 +746,7 @@ async fn run_acp_session_inner(
     agent_args: &[String],
     working_dir: &Path,
     prompt: &str,
+    images: Option<&[crate::ImageAttachment]>,
     existing_session_id: Option<&str>,
     app_handle: Option<tauri::AppHandle>,
     internal_session_id: &str,
@@ -845,11 +883,20 @@ async fn run_acp_session_inner(
         prompt.to_string()
     };
 
-    // Send the prompt
-    let prompt_request = PromptRequest::new(
-        session_id.clone(),
-        vec![AcpContentBlock::Text(TextContent::new(full_prompt))],
-    );
+    // Build content blocks: text prompt + optional images
+    let mut content_blocks = vec![AcpContentBlock::Text(TextContent::new(full_prompt))];
+
+    // Add image blocks if provided
+    if let Some(imgs) = images {
+        for img in imgs {
+            content_blocks.push(AcpContentBlock::Image(
+                agent_client_protocol::ImageContent::new(img.data.clone(), img.mime_type.clone()),
+            ));
+        }
+    }
+
+    // Send the prompt with content blocks
+    let prompt_request = PromptRequest::new(session_id.clone(), content_blocks);
 
     let prompt_result = connection.prompt(prompt_request).await;
 
diff --git a/src-tauri/src/ai/mod.rs b/src-tauri/src/ai/mod.rs
index 6c188d1..6d58f16 100644
--- a/src-tauri/src/ai/mod.rs
+++ b/src-tauri/src/ai/mod.rs
@@ -26,8 +26,8 @@ pub mod session;
 // Re-export core ACP client functionality
 pub use client::{
     discover_acp_providers, find_acp_agent, find_acp_agent_by_id, run_acp_prompt,
-    run_acp_prompt_raw, run_acp_prompt_streaming, run_acp_prompt_with_session, AcpAgent,
-    AcpPromptResult, AcpProviderInfo,
+    run_acp_prompt_raw, run_acp_prompt_streaming, run_acp_prompt_streaming_with_images,
+    run_acp_prompt_with_session, AcpAgent, AcpPromptResult, AcpProviderInfo,
 };
 
 // Re-export session manager types
diff --git a/src-tauri/src/ai/session.rs b/src-tauri/src/ai/session.rs
index 5c85114..297977a 100644
--- a/src-tauri/src/ai/session.rs
+++ b/src-tauri/src/ai/session.rs
@@ -293,7 +293,12 @@ impl SessionManager {
     }
 
     /// Send a prompt to a session
-    pub async fn send_prompt(&self, session_id: &str, prompt: String) -> Result<(), String> {
+    pub async fn send_prompt(
+        &self,
+        session_id: &str,
+        prompt: String,
+        images: Option<Vec<crate::ImageAttachment>>,
+    ) -> Result<(), String> {
         // Get or create live session
         let session_arc = self.get_or_create_live_session(session_id).await?;
 
@@ -347,17 +352,32 @@ impl SessionManager {
 
         tokio::spawn(async move {
             // Run the ACP prompt with streaming
-            let result = client::run_acp_prompt_streaming(
-                &agent,
-                &working_dir,
-                &prompt,
-                acp_session_id.as_deref(),
-                &session_id_owned,
-                app_handle.clone(),
-                Some(buffer_callback),
-                Some(cancellation.clone()),
-            )
-            .await;
+            let result = if let Some(ref imgs) = images {
+                client::run_acp_prompt_streaming_with_images(
+                    &agent,
+                    &working_dir,
+                    &prompt,
+                    Some(imgs.as_slice()),
+                    acp_session_id.as_deref(),
+                    &session_id_owned,
+                    app_handle.clone(),
+                    Some(buffer_callback),
+                    Some(cancellation.clone()),
+                )
+                .await
+            } else {
+                client::run_acp_prompt_streaming(
+                    &agent,
+                    &working_dir,
+                    &prompt,
+                    acp_session_id.as_deref(),
+                    &session_id_owned,
+                    app_handle.clone(),
+                    Some(buffer_callback),
+                    Some(cancellation.clone()),
+                )
+                .await
+            };
 
             // Update session and persist based on result
             let mut session = session_arc_clone.write().await;
diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs
index 6d304ad..86e9738 100644
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@@ -841,6 +841,16 @@ async fn analyze_diff(
     ai::analysis::analyze_diff(&path, &spec, provider.as_deref()).await
 }
 
+/// An image attachment for AI prompts
+#[derive(serde::Deserialize, serde::Serialize, Debug, Clone)]
+#[serde(rename_all = "camelCase")]
+pub struct ImageAttachment {
+    /// Base64-encoded image data
+    pub data: String,
+    /// MIME type (e.g., "image/png", "image/jpeg")
+    pub mime_type: String,
+}
+
 /// Response from send_agent_prompt including session ID for continuity.
 #[derive(serde::Serialize)]
 #[serde(rename_all = "camelCase")]
@@ -894,6 +904,8 @@ async fn send_agent_prompt(
 /// - "session-complete": Finalized transcript when done
 /// - "session-error": Error information if the session fails
 ///
+/// Supports optional image attachments for multimodal prompts.
+///
 /// Returns the same response as send_agent_prompt for compatibility.
 #[tauri::command(rename_all = "camelCase")]
 async fn send_agent_prompt_streaming(
@@ -902,6 +914,7 @@ async fn send_agent_prompt_streaming(
     prompt: String,
     session_id: Option<String>,
     provider: Option<String>,
+    images: Option<Vec<ImageAttachment>>,
 ) -> Result<AgentPromptResponse, String> {
     let agent = if let Some(provider_id) = provider {
         ai::find_acp_agent_by_id(&provider_id).ok_or_else(|| {
@@ -919,10 +932,11 @@ async fn send_agent_prompt_streaming(
 
     // Legacy path: no internal session ID, use ACP session ID or "legacy" as fallback
     let internal_id = session_id.as_deref().unwrap_or("legacy");
-    let result = ai::run_acp_prompt_streaming(
+    let result = ai::run_acp_prompt_streaming_with_images(
         &agent,
         &path,
         &prompt,
+        images.as_deref(),
         session_id.as_deref(),
         internal_id,
         app_handle,
@@ -981,8 +995,9 @@ async fn send_prompt(
     state: State<'_, Arc<SessionManager>>,
     session_id: String,
     prompt: String,
+    images: Option<Vec<ImageAttachment>>,
 ) -> Result<(), String> {
-    state.send_prompt(&session_id, prompt).await
+    state.send_prompt(&session_id, prompt, images).await
 }
 
 /// Update session title.
@@ -1965,7 +1980,7 @@ async fn start_branch_session(
 
     // Send the full prompt (with context) to the AI
     if let Err(e) = session_manager
-        .send_prompt(&ai_session_id, full_prompt)
+        .send_prompt(&ai_session_id, full_prompt, None)
         .await
     {
         // Clean up on failure
@@ -2357,7 +2372,7 @@ async fn restart_branch_session(
 
     // Send the prompt to the AI
     if let Err(e) = session_manager
-        .send_prompt(&ai_session_id, full_prompt)
+        .send_prompt(&ai_session_id, full_prompt, None)
         .await
     {
         // Clean up on failure
@@ -2585,7 +2600,7 @@ async fn start_branch_note(
 
     // Send the full prompt (with context) to the AI
     if let Err(e) = session_manager
-        .send_prompt(&ai_session_id, full_prompt)
+        .send_prompt(&ai_session_id, full_prompt, None)
         .await
     {
         // Clean up on failure
diff --git a/src/lib/services/ai.ts b/src/lib/services/ai.ts
index da7759b..4c8b583 100644
--- a/src/lib/services/ai.ts
+++ b/src/lib/services/ai.ts
@@ -7,6 +7,7 @@ import type {
   DiffSpec,
   SmartDiffAnnotation,
   Comment,
+  ImageAttachment,
 } from '../types';
 
 // =============================================================================
@@ -180,8 +181,12 @@ export async function getSessionStatus(sessionId: string): Promise<SessionStatus
  * Send a prompt to a session.
  * Streams response via events, persists on completion.
  */
-export async function sendPrompt(sessionId: string, prompt: string): Promise<void> {
-  return invoke<void>('send_prompt', { sessionId, prompt });
+export async function sendPrompt(
+  sessionId: string,
+  prompt: string,
+  images?: ImageAttachment[]
+): Promise<void> {
+  return invoke<void>('send_prompt', { sessionId, prompt, images: images ?? null });
 }
 
 /**
diff --git a/src/lib/types.ts b/src/lib/types.ts
index f5b9faf..ea6482c 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -243,6 +243,14 @@ export interface NewEdit {
 // AI Analysis types
 // =============================================================================
 
+/** An image attachment for multimodal prompts */
+export interface ImageAttachment {
+  /** Base64-encoded image data */
+  data: string;
+  /** MIME type (e.g., "image/png", "image/jpeg") */
+  mime_type: string;
+}
+
 /** A span of lines for AI annotations (0-indexed, exclusive end) */
 export interface LineSpan {
   start: number;

From 5508c0c097a04c943d71531f924a7b4313f591c2 Mon Sep 17 00:00:00 2001
From: Max Novich <mnovich@squareup.com>
Date: Thu, 5 Feb 2026 17:11:37 -0800
Subject: [PATCH 2/4] feat: add image attachment support to new agent forward
 UI

Wire up image attachment support for the new agent forward UI (konami code enabled branch workflow). This completes the image support infrastructure by:

- Add image attachment UI to NewSessionModal with file picker and preview
- Update startBranchSession, restartBranchSession, and startBranchNote to accept and pass image attachments
- Thread images parameter through Tauri commands to session_manager.send_prompt

The ACP communication layer already supported images; this change enables the new agent forward UI to utilize that capability.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 src-tauri/src/lib.rs           |   9 +-
 src/lib/NewSessionModal.svelte | 155 ++++++++++++++++++++++++++++++++-
 src/lib/services/branch.ts     |  15 +++-
 3 files changed, 170 insertions(+), 9 deletions(-)

diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs
index 86e9738..4e04a70 100644
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@@ -1942,6 +1942,7 @@ async fn start_branch_session(
     branch_id: String,
     user_prompt: String,
     agent_id: Option<String>,
+    images: Option<Vec<ImageAttachment>>,
 ) -> Result<StartBranchSessionResponse, String> {
     // Get the branch to find the worktree path
     let branch = state
@@ -1980,7 +1981,7 @@ async fn start_branch_session(
 
     // Send the full prompt (with context) to the AI
     if let Err(e) = session_manager
-        .send_prompt(&ai_session_id, full_prompt, None)
+        .send_prompt(&ai_session_id, full_prompt, images)
         .await
     {
         // Clean up on failure
@@ -2336,6 +2337,7 @@ async fn restart_branch_session(
     session_manager: State<'_, Arc<SessionManager>>,
     branch_session_id: String,
     full_prompt: String,
+    images: Option<Vec<ImageAttachment>>,
 ) -> Result<StartBranchSessionResponse, String> {
     // Get the old session to retrieve the branch ID and prompt
     let old_session = state
@@ -2372,7 +2374,7 @@ async fn restart_branch_session(
 
     // Send the prompt to the AI
     if let Err(e) = session_manager
-        .send_prompt(&ai_session_id, full_prompt, None)
+        .send_prompt(&ai_session_id, full_prompt, images)
         .await
     {
         // Clean up on failure
@@ -2559,6 +2561,7 @@ async fn start_branch_note(
     title: String,
     description: String,
     agent_id: Option<String>,
+    images: Option<Vec<ImageAttachment>>,
 ) -> Result<StartBranchNoteResponse, String> {
     // Get the branch to find the worktree path
     let branch = state
@@ -2600,7 +2603,7 @@ async fn start_branch_note(
 
     // Send the full prompt (with context) to the AI
     if let Err(e) = session_manager
-        .send_prompt(&ai_session_id, full_prompt, None)
+        .send_prompt(&ai_session_id, full_prompt, images)
         .await
     {
         // Clean up on failure
diff --git a/src/lib/NewSessionModal.svelte b/src/lib/NewSessionModal.svelte
index 8cc82dc..ed6f6b7 100644
--- a/src/lib/NewSessionModal.svelte
+++ b/src/lib/NewSessionModal.svelte
@@ -8,8 +8,9 @@
   builds the full prompt with timeline context.
 -->
 <script lang="ts">
-  import { X, GitCommitHorizontal, GitBranch, Loader2, Send } from 'lucide-svelte';
+  import { X, GitCommitHorizontal, GitBranch, Loader2, Send, Image as ImageIcon } from 'lucide-svelte';
   import type { Branch } from './services/branch';
+  import type { ImageAttachment } from './types';
   import { startBranchSession } from './services/branch';
   import AgentSelector from './AgentSelector.svelte';
   import type { AcpProvider } from './stores/agent.svelte';
@@ -36,8 +37,10 @@
   let starting = $state(false);
   let error = $state<string | null>(null);
   let selectedProvider = $state<AcpProvider>((preferences.aiAgent as AcpProvider) || 'goose');
+  let images = $state<ImageAttachment[]>([]);
 
   let textareaEl: HTMLTextAreaElement | null = $state(null);
+  let fileInputEl: HTMLInputElement | null = $state(null);
 
   // Focus textarea on mount
   $effect(() => {
@@ -63,7 +66,7 @@
       const userPrompt = prompt.trim();
 
       // Backend handles all context gathering and prompt building
-      const result = await startBranchSession(branch.id, userPrompt, selectedProvider);
+      const result = await startBranchSession(branch.id, userPrompt, selectedProvider, images.length > 0 ? images : undefined);
 
       // Notify parent that session started
       onSessionStarted?.(result.branchSessionId, result.aiSessionId);
@@ -75,6 +78,55 @@
     }
   }
 
+  async function handleFileSelect(e: Event) {
+    const input = e.target as HTMLInputElement;
+    if (!input.files || input.files.length === 0) return;
+
+    try {
+      const newImages: ImageAttachment[] = [];
+      for (let i = 0; i < input.files.length; i++) {
+        const file = input.files[i];
+        if (!file.type.startsWith('image/')) {
+          error = `File ${file.name} is not an image`;
+          continue;
+        }
+
+        const base64 = await fileToBase64(file);
+        newImages.push({
+          data: base64,
+          mime_type: file.type,
+        });
+      }
+      images = [...images, ...newImages];
+      error = null;
+    } catch (e) {
+      error = e instanceof Error ? e.message : String(e);
+    }
+
+    if (input) input.value = '';
+  }
+
+  function fileToBase64(file: File): Promise<string> {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = () => {
+        const result = reader.result as string;
+        const base64 = result.split(',')[1];
+        resolve(base64);
+      };
+      reader.onerror = reject;
+      reader.readAsDataURL(file);
+    });
+  }
+
+  function removeImage(index: number) {
+    images = images.filter((_, i) => i !== index);
+  }
+
+  function triggerFileInput() {
+    fileInputEl?.click();
+  }
+
   function handleKeydown(e: KeyboardEvent) {
     if (e.key === 'Escape') {
       e.preventDefault();
@@ -130,9 +182,36 @@
           rows={4}
           disabled={starting}
         ></textarea>
-        <p class="hint">Press ⌘Enter to start</p>
+        <div class="prompt-actions">
+          <button class="attach-button" type="button" onclick={triggerFileInput} title="Attach images">
+            <ImageIcon size={16} />
+            <span>Attach Images</span>
+          </button>
+          <p class="hint">Press ⌘Enter to start</p>
+        </div>
+        <input
+          bind:this={fileInputEl}
+          type="file"
+          accept="image/*"
+          multiple
+          style="display: none"
+          onchange={handleFileSelect}
+        />
       </div>
 
+      {#if images.length > 0}
+        <div class="images-preview">
+          {#each images as image, i}
+            <div class="image-item">
+              <img src={`data:${image.mime_type};base64,${image.data}`} alt="Attachment {i + 1}" />
+              <button class="remove-image" onclick={() => removeImage(i)} title="Remove image">
+                <X size={14} />
+              </button>
+            </div>
+          {/each}
+        </div>
+      {/if}
+
       {#if error}
         <div class="error-message">{error}</div>
       {/if}
@@ -288,6 +367,76 @@
     color: var(--text-faint);
   }
 
+  .prompt-actions {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 8px;
+  }
+
+  .attach-button {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 12px;
+    background: transparent;
+    border: 1px solid var(--border-muted);
+    border-radius: 4px;
+    color: var(--text-muted);
+    font-size: var(--size-sm);
+    cursor: pointer;
+    transition: all 0.15s;
+  }
+
+  .attach-button:hover {
+    border-color: var(--border-emphasis);
+    color: var(--text-primary);
+    background-color: var(--bg-hover);
+  }
+
+  .images-preview {
+    display: flex;
+    gap: 8px;
+    flex-wrap: wrap;
+  }
+
+  .image-item {
+    position: relative;
+    width: 80px;
+    height: 80px;
+    border-radius: 6px;
+    overflow: hidden;
+    border: 1px solid var(--border-muted);
+  }
+
+  .image-item img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .remove-image {
+    position: absolute;
+    top: 4px;
+    right: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    padding: 0;
+    background: rgba(0, 0, 0, 0.6);
+    border: none;
+    border-radius: 50%;
+    color: white;
+    cursor: pointer;
+    transition: background 0.15s;
+  }
+
+  .remove-image:hover {
+    background: rgba(0, 0, 0, 0.8);
+  }
+
   .hint {
     margin: 0;
     font-size: var(--size-xs);
diff --git a/src/lib/services/branch.ts b/src/lib/services/branch.ts
index c7c5ac8..3e07933 100644
--- a/src/lib/services/branch.ts
+++ b/src/lib/services/branch.ts
@@ -1,5 +1,6 @@
 import { invoke } from '@tauri-apps/api/core';
 import { writeText } from '@tauri-apps/plugin-clipboard-manager';
+import type { ImageAttachment } from '../types';
 
 // =============================================================================
 // Types
@@ -284,16 +285,19 @@ export interface StartBranchSessionResponse {
  * @param branchId - The branch to start the session on
  * @param userPrompt - The user's task description
  * @param agentId - Optional AI agent/provider to use (e.g., "goose", "claude")
+ * @param images - Optional image attachments
  */
 export async function startBranchSession(
   branchId: string,
   userPrompt: string,
-  agentId?: string
+  agentId?: string,
+  images?: ImageAttachment[]
 ): Promise<StartBranchSessionResponse> {
   return invoke<StartBranchSessionResponse>('start_branch_session', {
     branchId,
     userPrompt,
     agentId,
+    images: images ?? null,
   });
 }
 
@@ -358,11 +362,13 @@ export async function cancelAiSession(aiSessionId: string): Promise<void> {
  */
 export async function restartBranchSession(
   branchSessionId: string,
-  fullPrompt: string
+  fullPrompt: string,
+  images?: ImageAttachment[]
 ): Promise<StartBranchSessionResponse> {
   return invoke<StartBranchSessionResponse>('restart_branch_session', {
     branchSessionId,
     fullPrompt,
+    images: images ?? null,
   });
 }
 
@@ -404,18 +410,21 @@ export interface StartBranchNoteResponse {
  * @param title - The title for the note
  * @param description - What the note should cover (user's description)
  * @param agentId - Optional AI agent/provider to use (e.g., "goose", "claude")
+ * @param images - Optional image attachments
  */
 export async function startBranchNote(
   branchId: string,
   title: string,
   description: string,
-  agentId?: string
+  agentId?: string,
+  images?: ImageAttachment[]
 ): Promise<StartBranchNoteResponse> {
   return invoke<StartBranchNoteResponse>('start_branch_note', {
     branchId,
     title,
     description,
     agentId,
+    images: images ?? null,
   });
 }
 

From c64ad41ca48eaa6f44894fdd28d208d3908e6b1b Mon Sep 17 00:00:00 2001
From: Max Novich <mnovich@squareup.com>
Date: Thu, 5 Feb 2026 21:57:36 -0800
Subject: [PATCH 3/4] fix: add validation for image attachments to prevent
 security issues

Adds comprehensive validation for image attachments on both frontend and backend:
- Enforces max file size limit of 10MB to prevent memory exhaustion and DoS
- Restricts allowed MIME types to standard image formats (PNG, JPEG, GIF, WebP)
- Limits maximum number of attachments to 5 per request
- Validates all images in Tauri commands before processing
- Provides clear error messages for validation failures
- Shows image count in UI to help users track limits

This addresses critical security concerns identified in code review where
unvalidated image attachments could cause memory issues or system instability.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 src-tauri/src/lib.rs           | 65 ++++++++++++++++++++++++++++++++++
 src/lib/NewSessionModal.svelte | 32 ++++++++++++++---
 2 files changed, 93 insertions(+), 4 deletions(-)

diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs
index 4e04a70..81c7866 100644
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@@ -841,6 +841,21 @@ async fn analyze_diff(
     ai::analysis::analyze_diff(&path, &spec, provider.as_deref()).await
 }
 
+/// Maximum size for base64-encoded image data (10MB)
+const MAX_IMAGE_SIZE: usize = 10 * 1024 * 1024;
+
+/// Maximum number of images per request
+const MAX_IMAGE_COUNT: usize = 5;
+
+/// Allowed MIME types for image attachments
+const ALLOWED_MIME_TYPES: &[&str] = &[
+    "image/png",
+    "image/jpeg",
+    "image/jpg",
+    "image/gif",
+    "image/webp",
+];
+
 /// An image attachment for AI prompts
 #[derive(serde::Deserialize, serde::Serialize, Debug, Clone)]
 #[serde(rename_all = "camelCase")]
@@ -851,6 +866,47 @@ pub struct ImageAttachment {
     pub mime_type: String,
 }
 
+impl ImageAttachment {
+    /// Validates the image attachment for size and format
+    pub fn validate(&self) -> Result<(), String> {
+        if self.data.len() > MAX_IMAGE_SIZE {
+            return Err(format!(
+                "Image too large: {} bytes (max {} bytes)",
+                self.data.len(),
+                MAX_IMAGE_SIZE
+            ));
+        }
+
+        if !ALLOWED_MIME_TYPES.contains(&self.mime_type.as_str()) {
+            return Err(format!(
+                "Unsupported image format: {}. Allowed formats: {}",
+                self.mime_type,
+                ALLOWED_MIME_TYPES.join(", ")
+            ));
+        }
+
+        Ok(())
+    }
+}
+
+/// Validates a collection of image attachments
+fn validate_images(images: &Option<Vec<ImageAttachment>>) -> Result<(), String> {
+    if let Some(imgs) = images {
+        if imgs.len() > MAX_IMAGE_COUNT {
+            return Err(format!(
+                "Too many images: {} (max {})",
+                imgs.len(),
+                MAX_IMAGE_COUNT
+            ));
+        }
+
+        for (i, img) in imgs.iter().enumerate() {
+            img.validate().map_err(|e| format!("Image {}: {}", i + 1, e))?;
+        }
+    }
+    Ok(())
+}
+
 /// Response from send_agent_prompt including session ID for continuity.
 #[derive(serde::Serialize)]
 #[serde(rename_all = "camelCase")]
@@ -916,6 +972,8 @@ async fn send_agent_prompt_streaming(
     provider: Option<String>,
     images: Option<Vec<ImageAttachment>>,
 ) -> Result<AgentPromptResponse, String> {
+    validate_images(&images)?;
+
     let agent = if let Some(provider_id) = provider {
         ai::find_acp_agent_by_id(&provider_id).ok_or_else(|| {
             format!(
@@ -997,6 +1055,7 @@ async fn send_prompt(
     prompt: String,
     images: Option<Vec<ImageAttachment>>,
 ) -> Result<(), String> {
+    validate_images(&images)?;
     state.send_prompt(&session_id, prompt, images).await
 }
 
@@ -1944,6 +2003,8 @@ async fn start_branch_session(
     agent_id: Option<String>,
     images: Option<Vec<ImageAttachment>>,
 ) -> Result<StartBranchSessionResponse, String> {
+    validate_images(&images)?;
+
     // Get the branch to find the worktree path
     let branch = state
         .get_branch(&branch_id)
@@ -2339,6 +2400,8 @@ async fn restart_branch_session(
     full_prompt: String,
     images: Option<Vec<ImageAttachment>>,
 ) -> Result<StartBranchSessionResponse, String> {
+    validate_images(&images)?;
+
     // Get the old session to retrieve the branch ID and prompt
     let old_session = state
         .get_branch_session(&branch_session_id)
@@ -2563,6 +2626,8 @@ async fn start_branch_note(
     agent_id: Option<String>,
     images: Option<Vec<ImageAttachment>>,
 ) -> Result<StartBranchNoteResponse, String> {
+    validate_images(&images)?;
+
     // Get the branch to find the worktree path
     let branch = state
         .get_branch(&branch_id)
diff --git a/src/lib/NewSessionModal.svelte b/src/lib/NewSessionModal.svelte
index ed6f6b7..fe754e9 100644
--- a/src/lib/NewSessionModal.svelte
+++ b/src/lib/NewSessionModal.svelte
@@ -42,6 +42,10 @@
   let textareaEl: HTMLTextAreaElement | null = $state(null);
   let fileInputEl: HTMLInputElement | null = $state(null);
 
+  const MAX_FILE_SIZE = 10 * 1024 * 1024;
+  const MAX_IMAGE_COUNT = 5;
+  const ALLOWED_MIME_TYPES = ['image/png', 'image/jpeg', 'image/jpg', 'image/gif', 'image/webp'];
+
   // Focus textarea on mount
   $effect(() => {
     if (textareaEl) {
@@ -83,22 +87,42 @@
     if (!input.files || input.files.length === 0) return;
 
     try {
+      if (images.length + input.files.length > MAX_IMAGE_COUNT) {
+        error = `Too many images. Maximum ${MAX_IMAGE_COUNT} images allowed.`;
+        if (input) input.value = '';
+        return;
+      }
+
       const newImages: ImageAttachment[] = [];
       for (let i = 0; i < input.files.length; i++) {
         const file = input.files[i];
+
         if (!file.type.startsWith('image/')) {
           error = `File ${file.name} is not an image`;
           continue;
         }
 
+        if (!ALLOWED_MIME_TYPES.includes(file.type)) {
+          error = `File ${file.name} has unsupported format. Allowed: PNG, JPEG, GIF, WebP`;
+          continue;
+        }
+
+        if (file.size > MAX_FILE_SIZE) {
+          error = `File ${file.name} is too large (max 10MB)`;
+          continue;
+        }
+
         const base64 = await fileToBase64(file);
         newImages.push({
           data: base64,
           mime_type: file.type,
         });
       }
-      images = [...images, ...newImages];
-      error = null;
+
+      if (newImages.length > 0) {
+        images = [...images, ...newImages];
+        error = null;
+      }
     } catch (e) {
       error = e instanceof Error ? e.message : String(e);
     }
@@ -183,9 +207,9 @@
           disabled={starting}
         ></textarea>
         <div class="prompt-actions">
-          <button class="attach-button" type="button" onclick={triggerFileInput} title="Attach images">
+          <button class="attach-button" type="button" onclick={triggerFileInput} title="Attach images" disabled={images.length >= MAX_IMAGE_COUNT}>
             <ImageIcon size={16} />
-            <span>Attach Images</span>
+            <span>Attach Images {images.length > 0 ? `(${images.length}/${MAX_IMAGE_COUNT})` : ''}</span>
           </button>
           <p class="hint">Press ⌘Enter to start</p>
         </div>

From 606d1afbae63eb400fdc565154dc572b2a73bfd2 Mon Sep 17 00:00:00 2001
From: Max Novich <mnovich@squareup.com>
Date: Thu, 5 Feb 2026 22:27:53 -0800
Subject: [PATCH 4/4] fix: add clipboard paste support for images and fix
 formatting

- Add clipboard paste handler to NewSessionModal textarea that detects
  and validates images from clipboard, enabling users to paste images
  directly into the prompt input
- Implement inline helper functions in AgentPanel for image validation
  and clipboard reading using browser Clipboard API
- Fix cargo fmt issues in client.rs and lib.rs for proper formatting
- Add accessibility attributes (role, aria-label) to dragover/drop div
- Remove broken image.ts service file that had type errors

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 src-tauri/src/ai/client.rs               |  16 +-
 src-tauri/src/lib.rs                     |   3 +-
 src/lib/NewSessionModal.svelte           |  85 +++++-
 src/lib/features/agent/AgentPanel.svelte | 348 ++++++++++++++++++++++-
 src/lib/services/ai.ts                   |   2 +
 5 files changed, 444 insertions(+), 10 deletions(-)

diff --git a/src-tauri/src/ai/client.rs b/src-tauri/src/ai/client.rs
index 3bb0e03..1d1091f 100644
--- a/src-tauri/src/ai/client.rs
+++ b/src-tauri/src/ai/client.rs
@@ -557,9 +557,19 @@ pub async fn run_acp_prompt(
     prompt: &str,
 ) -> Result<String, String> {
     // No streaming, no events emitted — internal_session_id is unused
-    let result =
-        run_acp_prompt_internal(agent, working_dir, prompt, None, None, None, "", true, None, None)
-            .await?;
+    let result = run_acp_prompt_internal(
+        agent,
+        working_dir,
+        prompt,
+        None,
+        None,
+        None,
+        "",
+        true,
+        None,
+        None,
+    )
+    .await?;
     Ok(result.response)
 }
 
diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs
index 81c7866..6762e86 100644
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@@ -901,7 +901,8 @@ fn validate_images(images: &Option<Vec<ImageAttachment>>) -> Result<(), String>
         }
 
         for (i, img) in imgs.iter().enumerate() {
-            img.validate().map_err(|e| format!("Image {}: {}", i + 1, e))?;
+            img.validate()
+                .map_err(|e| format!("Image {}: {}", i + 1, e))?;
         }
     }
     Ok(())
diff --git a/src/lib/NewSessionModal.svelte b/src/lib/NewSessionModal.svelte
index fe754e9..142e7c0 100644
--- a/src/lib/NewSessionModal.svelte
+++ b/src/lib/NewSessionModal.svelte
@@ -8,7 +8,14 @@
   builds the full prompt with timeline context.
 -->
 <script lang="ts">
-  import { X, GitCommitHorizontal, GitBranch, Loader2, Send, Image as ImageIcon } from 'lucide-svelte';
+  import {
+    X,
+    GitCommitHorizontal,
+    GitBranch,
+    Loader2,
+    Send,
+    Image as ImageIcon,
+  } from 'lucide-svelte';
   import type { Branch } from './services/branch';
   import type { ImageAttachment } from './types';
   import { startBranchSession } from './services/branch';
@@ -70,7 +77,12 @@
       const userPrompt = prompt.trim();
 
       // Backend handles all context gathering and prompt building
-      const result = await startBranchSession(branch.id, userPrompt, selectedProvider, images.length > 0 ? images : undefined);
+      const result = await startBranchSession(
+        branch.id,
+        userPrompt,
+        selectedProvider,
+        images.length > 0 ? images : undefined
+      );
 
       // Notify parent that session started
       onSessionStarted?.(result.branchSessionId, result.aiSessionId);
@@ -151,6 +163,60 @@
     fileInputEl?.click();
   }
 
+  async function handlePaste(e: ClipboardEvent) {
+    if (!e.clipboardData) return;
+
+    const items = e.clipboardData.items;
+    const imageFiles: File[] = [];
+
+    for (let i = 0; i < items.length; i++) {
+      const item = items[i];
+      if (item.type.startsWith('image/')) {
+        const file = item.getAsFile();
+        if (file) {
+          imageFiles.push(file);
+        }
+      }
+    }
+
+    if (imageFiles.length === 0) return;
+
+    e.preventDefault();
+
+    try {
+      if (images.length + imageFiles.length > MAX_IMAGE_COUNT) {
+        error = `Too many images. Maximum ${MAX_IMAGE_COUNT} images allowed.`;
+        return;
+      }
+
+      const newImages: ImageAttachment[] = [];
+      for (const file of imageFiles) {
+        if (!ALLOWED_MIME_TYPES.includes(file.type)) {
+          error = `Pasted image has unsupported format. Allowed: PNG, JPEG, GIF, WebP`;
+          continue;
+        }
+
+        if (file.size > MAX_FILE_SIZE) {
+          error = `Pasted image is too large (max 10MB)`;
+          continue;
+        }
+
+        const base64 = await fileToBase64(file);
+        newImages.push({
+          data: base64,
+          mime_type: file.type,
+        });
+      }
+
+      if (newImages.length > 0) {
+        images = [...images, ...newImages];
+        error = null;
+      }
+    } catch (e) {
+      error = e instanceof Error ? e.message : String(e);
+    }
+  }
+
   function handleKeydown(e: KeyboardEvent) {
     if (e.key === 'Escape') {
       e.preventDefault();
@@ -205,11 +271,22 @@
           placeholder="Describe the task..."
           rows={4}
           disabled={starting}
+          onpaste={handlePaste}
         ></textarea>
         <div class="prompt-actions">
-          <button class="attach-button" type="button" onclick={triggerFileInput} title="Attach images" disabled={images.length >= MAX_IMAGE_COUNT}>
+          <button
+            class="attach-button"
+            type="button"
+            onclick={triggerFileInput}
+            title="Attach images"
+            disabled={images.length >= MAX_IMAGE_COUNT}
+          >
             <ImageIcon size={16} />
-            <span>Attach Images {images.length > 0 ? `(${images.length}/${MAX_IMAGE_COUNT})` : ''}</span>
+            <span
+              >Attach Images {images.length > 0
+                ? `(${images.length}/${MAX_IMAGE_COUNT})`
+                : ''}</span
+            >
           </button>
           <p class="hint">Press ⌘Enter to start</p>
         </div>
diff --git a/src/lib/features/agent/AgentPanel.svelte b/src/lib/features/agent/AgentPanel.svelte
index b4fa9ba..56f06fc 100644
--- a/src/lib/features/agent/AgentPanel.svelte
+++ b/src/lib/features/agent/AgentPanel.svelte
@@ -22,6 +22,8 @@
     Circle,
     CheckCircle2,
     MessageSquare,
+    Clipboard,
+    Image as ImageIcon,
   } from 'lucide-svelte';
   import {
     sendAgentPromptStreaming,
@@ -44,7 +46,7 @@
   } from '../../stores/agent.svelte';
   import { commentsState } from '../../stores/comments.svelte';
   import { preferences } from '../../stores/preferences.svelte';
-  import type { DiffSpec, FileDiffSummary } from '../../types';
+  import type { DiffSpec, FileDiffSummary, ImageAttachment } from '../../types';
   import { marked } from 'marked';
   import DOMPurify from 'dompurify';
 
@@ -95,6 +97,74 @@
   // Count total comments for display
   let totalCommentsCount = $derived(commentsState.comments.length);
 
+  // Image attachments for the current prompt
+  let attachedImages = $state<ImageAttachment[]>([]);
+  let imageError = $state<string | null>(null);
+  const MAX_IMAGES = 5;
+  const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB
+  const ALLOWED_MIME_TYPES = ['image/png', 'image/jpeg', 'image/jpg', 'image/gif', 'image/webp'];
+
+  /**
+   * Validate an image file.
+   */
+  function validateImage(file: File): string | null {
+    if (!ALLOWED_MIME_TYPES.includes(file.type)) {
+      return `Unsupported image format. Allowed: PNG, JPEG, GIF, WebP`;
+    }
+    if (file.size > MAX_FILE_SIZE) {
+      return `Image too large (max 10MB)`;
+    }
+    return null;
+  }
+
+  /**
+   * Convert a File object to an ImageAttachment.
+   */
+  async function fileToImageAttachment(file: File): Promise<ImageAttachment> {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = () => {
+        const result = reader.result as string;
+        const base64 = result.split(',')[1];
+        resolve({
+          data: base64,
+          mime_type: file.type,
+        });
+      };
+      reader.onerror = () => reject(new Error('Failed to read file'));
+      reader.readAsDataURL(file);
+    });
+  }
+
+  /**
+   * Read an image from the clipboard using ClipboardEvent API.
+   */
+  async function readClipboardImage(): Promise<ImageAttachment | null> {
+    try {
+      const clipboardItems = await navigator.clipboard.read();
+      for (const item of clipboardItems) {
+        for (const type of item.types) {
+          if (type.startsWith('image/')) {
+            const blob = await item.getType(type);
+            const file = new File([blob], 'clipboard-image', { type });
+
+            const validationError = validateImage(file);
+            if (validationError) {
+              imageError = validationError;
+              return null;
+            }
+
+            return await fileToImageAttachment(file);
+          }
+        }
+      }
+      return null;
+    } catch (error) {
+      console.error('Failed to read image from clipboard:', error);
+      return null;
+    }
+  }
+
   /** Type guard to validate provider ID */
   function isValidProvider(id: string): id is AcpProvider {
     return id === 'goose' || id === 'claude' || id === 'codex';
@@ -369,12 +439,17 @@
         repoPath: repoPath ?? undefined,
         sessionId: tabState.sessionId ?? undefined,
         provider: tabState.provider,
+        images: attachedImages.length > 0 ? attachedImages : undefined,
       });
 
       // Write final response to the captured tab state
       tabState.response = result.response;
       tabState.sessionId = result.sessionId;
 
+      // Clear attached images after successful send
+      attachedImages = [];
+      imageError = null;
+
       // Clear the live session now that we have the final response
       liveSessionStore.clear(result.sessionId);
     } catch (e) {
@@ -394,6 +469,116 @@
     }
   }
 
+  /**
+   * Handle clipboard paste button click.
+   */
+  async function handlePasteFromClipboard() {
+    if (attachedImages.length >= MAX_IMAGES) {
+      imageError = `Maximum ${MAX_IMAGES} images allowed`;
+      return;
+    }
+
+    imageError = null;
+    const image = await readClipboardImage();
+
+    if (!image) {
+      imageError = 'No image found in clipboard';
+      return;
+    }
+
+    attachedImages = [...attachedImages, image];
+  }
+
+  /**
+   * Handle file drop for images.
+   */
+  async function handleImageDrop(event: DragEvent) {
+    event.preventDefault();
+    event.stopPropagation();
+
+    if (attachedImages.length >= MAX_IMAGES) {
+      imageError = `Maximum ${MAX_IMAGES} images allowed`;
+      return;
+    }
+
+    const files = event.dataTransfer?.files;
+    if (!files || files.length === 0) return;
+
+    imageError = null;
+
+    for (let i = 0; i < files.length && attachedImages.length < MAX_IMAGES; i++) {
+      const file = files[i];
+
+      if (!file.type.startsWith('image/')) {
+        continue;
+      }
+
+      const validationError = validateImage(file);
+      if (validationError) {
+        imageError = validationError;
+        continue;
+      }
+
+      try {
+        const imageAttachment = await fileToImageAttachment(file);
+        attachedImages = [...attachedImages, imageAttachment];
+      } catch (error) {
+        imageError = error instanceof Error ? error.message : 'Failed to load image';
+      }
+    }
+  }
+
+  /**
+   * Handle file input change for images.
+   */
+  async function handleFileSelect(event: Event) {
+    const input = event.target as HTMLInputElement;
+    const files = input.files;
+    if (!files || files.length === 0) return;
+
+    if (attachedImages.length >= MAX_IMAGES) {
+      imageError = `Maximum ${MAX_IMAGES} images allowed`;
+      return;
+    }
+
+    imageError = null;
+
+    for (let i = 0; i < files.length && attachedImages.length < MAX_IMAGES; i++) {
+      const file = files[i];
+      const validationError = validateImage(file);
+
+      if (validationError) {
+        imageError = validationError;
+        continue;
+      }
+
+      try {
+        const imageAttachment = await fileToImageAttachment(file);
+        attachedImages = [...attachedImages, imageAttachment];
+      } catch (error) {
+        imageError = error instanceof Error ? error.message : 'Failed to load image';
+      }
+    }
+
+    input.value = '';
+  }
+
+  /**
+   * Remove an attached image.
+   */
+  function removeImage(index: number) {
+    attachedImages = attachedImages.filter((_, i) => i !== index);
+    imageError = null;
+  }
+
+  /**
+   * Handle drag over event.
+   */
+  function handleDragOver(event: DragEvent) {
+    event.preventDefault();
+    event.stopPropagation();
+  }
+
   /**
    * Save the current response as an artifact.
    * Keeps the session alive so user can continue the conversation.
@@ -712,7 +897,35 @@
       </div>
     {/if}
 
-    <div class="agent-input-wrapper">
+    {#if imageError}
+      <div class="image-error">{imageError}</div>
+    {/if}
+
+    {#if attachedImages.length > 0}
+      <div class="image-preview-strip">
+        {#each attachedImages as image, i (i)}
+          <div class="image-preview">
+            <img src={`data:${image.mime_type};base64,${image.data}`} alt="Attachment {i + 1}" />
+            <button
+              class="image-remove-btn"
+              onclick={() => removeImage(i)}
+              title="Remove image"
+              disabled={agentState.loading}
+            >
+              <X size={12} />
+            </button>
+          </div>
+        {/each}
+      </div>
+    {/if}
+
+    <div
+      class="agent-input-wrapper"
+      ondrop={handleImageDrop}
+      ondragover={handleDragOver}
+      role="region"
+      aria-label="Agent input"
+    >
       <textarea
         class="agent-input"
         placeholder="Ask the agent..."
@@ -723,6 +936,28 @@
         rows="1"
       ></textarea>
       <div class="agent-input-actions">
+        <label class="image-upload-btn" title="Attach image from file">
+          <input
+            type="file"
+            accept="image/png,image/jpeg,image/jpg,image/gif,image/webp"
+            multiple
+            onchange={handleFileSelect}
+            disabled={agentState.loading || attachedImages.length >= MAX_IMAGES}
+            style="display: none;"
+          />
+          <ImageIcon size={14} />
+          {#if attachedImages.length > 0}
+            <span class="image-count">{attachedImages.length}</span>
+          {/if}
+        </label>
+        <button
+          class="clipboard-paste-btn"
+          onclick={handlePasteFromClipboard}
+          disabled={agentState.loading || attachedImages.length >= MAX_IMAGES}
+          title="Paste image from clipboard"
+        >
+          <Clipboard size={14} />
+        </button>
         {#if agentGlobalState.availableProviders.length > 0}
           <div class="provider-picker">
             <button
@@ -1399,4 +1634,113 @@
     color: var(--text-primary);
     line-height: 1.6;
   }
+
+  /* Image preview and upload styles */
+  .image-error {
+    padding: 6px 10px;
+    margin: 0 10px 8px;
+    background: var(--error-bg, #fee);
+    color: var(--error-text, #c00);
+    border-radius: 4px;
+    font-size: var(--size-xs);
+  }
+
+  .image-preview-strip {
+    display: flex;
+    gap: 8px;
+    padding: 8px 10px;
+    margin: 0 10px 8px;
+    overflow-x: auto;
+    background: var(--bg-secondary);
+    border-radius: 4px;
+  }
+
+  .image-preview {
+    position: relative;
+    flex-shrink: 0;
+    width: 80px;
+    height: 80px;
+    border-radius: 4px;
+    overflow: hidden;
+    background: var(--bg-primary);
+    border: 1px solid var(--border-secondary);
+  }
+
+  .image-preview img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .image-remove-btn {
+    position: absolute;
+    top: 2px;
+    right: 2px;
+    background: rgba(0, 0, 0, 0.6);
+    color: white;
+    border: none;
+    border-radius: 3px;
+    padding: 2px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    transition: opacity 0.2s;
+  }
+
+  .image-preview:hover .image-remove-btn {
+    opacity: 1;
+  }
+
+  .image-remove-btn:hover {
+    background: rgba(0, 0, 0, 0.8);
+  }
+
+  .image-remove-btn:disabled {
+    cursor: not-allowed;
+    opacity: 0.3;
+  }
+
+  .image-upload-btn,
+  .clipboard-paste-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    padding: 6px 8px;
+    background: transparent;
+    border: none;
+    border-radius: 4px;
+    color: var(--text-secondary);
+    cursor: pointer;
+    transition: all 0.2s;
+    position: relative;
+  }
+
+  .image-upload-btn:hover,
+  .clipboard-paste-btn:hover {
+    background: var(--bg-hover);
+    color: var(--text-primary);
+  }
+
+  .image-upload-btn:disabled,
+  .clipboard-paste-btn:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  .image-count {
+    position: absolute;
+    top: -2px;
+    right: -2px;
+    background: var(--accent-primary);
+    color: white;
+    border-radius: 8px;
+    padding: 0 4px;
+    font-size: 10px;
+    font-weight: 600;
+    min-width: 14px;
+    text-align: center;
+  }
 </style>
diff --git a/src/lib/services/ai.ts b/src/lib/services/ai.ts
index 4c8b583..233a87f 100644
--- a/src/lib/services/ai.ts
+++ b/src/lib/services/ai.ts
@@ -259,6 +259,7 @@ export async function sendAgentPromptStreaming(
     repoPath?: string;
     sessionId?: string;
     provider?: string;
+    images?: ImageAttachment[];
   }
 ): Promise<AgentPromptResponse> {
   return invoke<AgentPromptResponse>('send_agent_prompt_streaming', {
@@ -266,6 +267,7 @@ export async function sendAgentPromptStreaming(
     prompt,
     sessionId: options?.sessionId ?? null,
     provider: options?.provider ?? null,
+    images: options?.images ?? null,
   });
 }