feat: add native clipboard support for screenshot paste (#67)

## Summary
- Adds Tauri clipboard-manager plugin to read images from native clipboard
- Falls back to native clipboard when WebView clipboard API returns empty (fixes screenshot paste)
- Allows sending messages with just attachments (no text required)
- Logs attached files to output with 📎 emoji

## Test plan
- [ ] Build and run the app natively on Windows
- [ ] Copy a screenshot (Win+Shift+S) and paste in the chat input
- [ ] Verify the screenshot appears as an attachment preview
- [ ] Send the attachment and verify Claude receives the file path
- [ ] Test sending a message with only an attachment (no text)
- [ ] Verify the 📎 log line shows the attached filename

**Note:** Paste will not work in WSLg dev environment due to clipboard isolation - needs native Windows build to test.

✨ This PR was created with help from Hikari~ 🌸

Co-authored-by: Hikari <hikari@nhcarrigan.com>
Reviewed-on: #67
Co-authored-by: Naomi Carrigan <commits@nhcarrigan.com>
Co-committed-by: Naomi Carrigan <commits@nhcarrigan.com>

src/lib/components/AttachmentPreview.svelte

@@ -0,0 +1,209 @@
+<script lang="ts">
+  import type { Attachment } from "$lib/types/messages";
+
+  interface Props {
+    attachments: Attachment[];
+    onRemove: (id: string) => void;
+  }
+
+  let { attachments, onRemove }: Props = $props();
+
+  function formatFileSize(bytes: number): string {
+    if (bytes < 1024) return `${bytes} B`;
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+  }
+
+  function getFileIcon(type: Attachment["type"]): string {
+    switch (type) {
+      case "image":
+        return "🖼️";
+      case "document":
+        return "📄";
+      default:
+        return "📎";
+    }
+  }
+</script>
+
+{#if attachments.length > 0}
+  <div class="attachment-preview-container">
+    <div class="attachment-header">
+      <span class="attachment-count"
+        >{attachments.length} attachment{attachments.length !== 1 ? "s" : ""}</span
+      >
+    </div>
+    <div class="attachment-list">
+      {#each attachments as attachment (attachment.id)}
+        <div class="attachment-item" class:is-image={attachment.type === "image"}>
+          {#if attachment.type === "image" && attachment.previewUrl}
+            <div class="image-preview">
+              <img src={attachment.previewUrl} alt={attachment.filename} />
+            </div>
+          {:else}
+            <div class="file-icon">
+              {getFileIcon(attachment.type)}
+            </div>
+          {/if}
+          <div class="attachment-info">
+            <span class="attachment-filename" title={attachment.filename}>
+              {attachment.filename}
+            </span>
+            <span class="attachment-size">
+              {formatFileSize(attachment.size)}
+            </span>
+          </div>
+          <button
+            type="button"
+            class="remove-button"
+            onclick={() => onRemove(attachment.id)}
+            title="Remove attachment"
+          >
+            <svg
+              width="14"
+              height="14"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <line x1="18" y1="6" x2="6" y2="18"></line>
+              <line x1="6" y1="6" x2="18" y2="18"></line>
+            </svg>
+          </button>
+        </div>
+      {/each}
+    </div>
+  </div>
+{/if}
+
+<style>
+  .attachment-preview-container {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 8px;
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    margin-bottom: 8px;
+  }
+
+  .attachment-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .attachment-count {
+    font-size: 12px;
+    color: var(--text-secondary);
+  }
+
+  .attachment-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  .attachment-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 8px;
+    background: var(--bg-tertiary);
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
+    max-width: 200px;
+    position: relative;
+  }
+
+  .attachment-item.is-image {
+    flex-direction: column;
+    padding: 4px;
+    max-width: 120px;
+  }
+
+  .image-preview {
+    width: 100%;
+    max-width: 110px;
+    max-height: 80px;
+    border-radius: 4px;
+    overflow: hidden;
+    background: var(--bg-primary);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .image-preview img {
+    max-width: 100%;
+    max-height: 80px;
+    object-fit: contain;
+  }
+
+  .file-icon {
+    font-size: 24px;
+    flex-shrink: 0;
+  }
+
+  .attachment-info {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    overflow: hidden;
+    flex: 1;
+  }
+
+  .is-image .attachment-info {
+    width: 100%;
+    padding: 0 4px;
+  }
+
+  .attachment-filename {
+    font-size: 12px;
+    color: var(--text-primary);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .attachment-size {
+    font-size: 10px;
+    color: var(--text-secondary);
+  }
+
+  .remove-button {
+    position: absolute;
+    top: -6px;
+    right: -6px;
+    width: 20px;
+    height: 20px;
+    padding: 0;
+    background: var(--bg-primary);
+    border: 1px solid var(--border-color);
+    border-radius: 50%;
+    color: var(--text-secondary);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    transition:
+      opacity 0.2s,
+      background 0.2s,
+      color 0.2s;
+  }
+
+  .attachment-item:hover .remove-button {
+    opacity: 1;
+  }
+
+  .remove-button:hover {
+    background: var(--error-color, #ef4444);
+    border-color: var(--error-color, #ef4444);
+    color: white;
+  }
+</style>

src/lib/components/InputBar.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
   import { invoke } from "@tauri-apps/api/core";
+  import { open } from "@tauri-apps/plugin-dialog";
+  import { readImage } from "@tauri-apps/plugin-clipboard-manager";
   import { get } from "svelte/store";
   import { claudeStore, isClaudeProcessing } from "$lib/stores/claude";
   import { characterState } from "$lib/stores/character";
@@ -22,6 +24,8 @@
     isSlashCommand,
     type SlashCommand,
   } from "$lib/commands/slashCommands";
+  import AttachmentPreview from "$lib/components/AttachmentPreview.svelte";
+  import type { Attachment } from "$lib/types/messages";
 
   const INPUT_HISTORY_KEY = "hikari-input-history";
   const MAX_HISTORY_SIZE = 100;
@@ -33,6 +37,8 @@
   let showCommandMenu = $state(false);
   let matchingCommands = $state<SlashCommand[]>([]);
   let selectedCommandIndex = $state(0);
+  let attachments = $state<Attachment[]>([]);
+  let isDragging = $state(false);
 
   // Input history state
   let inputHistory = $state<string[]>([]);
@@ -112,6 +118,10 @@
     isProcessing = processing;
   });
 
+  claudeStore.attachments.subscribe((storedAttachments) => {
+    attachments = storedAttachments;
+  });
+
   function handleInputChange() {
     // If input is empty, allow history navigation again
     // Otherwise, mark that user has manually typed
@@ -156,10 +166,13 @@
     event.preventDefault();
 
     const message = inputValue.trim();
-    if (!message || isSubmitting) return;
+    const hasAttachments = attachments.length > 0;
+
+    // Need either a message or attachments to submit
+    if ((!message && !hasAttachments) || isSubmitting) return;
 
     // Check for slash commands first (these work even when disconnected)
-    if (isSlashCommand(message)) {
+    if (message && isSlashCommand(message)) {
       // Add slash commands to history too
       addToHistory(message);
       historyIndex = -1;
@@ -180,8 +193,10 @@
     // Regular messages require connection
     if (!isConnected) return;
 
-    // Add to history before clearing
-    addToHistory(message);
+    // Add to history before clearing (only if there's text)
+    if (message) {
+      addToHistory(message);
+    }
     historyIndex = -1;
     tempInput = "";
     userHasTyped = false;
@@ -189,12 +204,31 @@
     isSubmitting = true;
     inputValue = "";
 
-    // Apply mode prefix if needed
+    // Capture attachments before clearing
+    const currentAttachments = [...attachments];
+
+    // Apply mode prefix if needed (only if there's a message)
     const currentMode = getCurrentMode();
-    const formattedMessage = formatMessageWithMode(message, currentMode);
+    const formattedMessage = message ? formatMessageWithMode(message, currentMode) : "";
+
+    // Build message with attachments
+    let messageWithAttachments = formattedMessage;
+    if (currentAttachments.length > 0) {
+      const attachmentPaths = currentAttachments.map((a) => a.path).join("\n");
+      const attachmentPrefix = formattedMessage ? `${formattedMessage}\n\n` : "";
+      messageWithAttachments = `${attachmentPrefix}[Attached files - please read these files to see their contents:]\n${attachmentPaths}`;
+
+      // Log attached files to the output
+      for (const attachment of currentAttachments) {
+        claudeStore.addLine("system", `📎 Attached: ${attachment.filename} (${attachment.path})`);
+      }
+    }
+
+    // Clear attachments after capturing them
+    claudeStore.clearAttachments();
 
     // Check if we need to restore conversation history
-    let messageToSend = formattedMessage;
+    let messageToSend = messageWithAttachments;
     if (getShouldRestoreHistory()) {
       const savedHistory = getSavedHistory();
 
@@ -289,6 +323,300 @@ User: ${formattedMessage}`;
     }
   }
 
+  function handleRemoveAttachment(id: string) {
+    claudeStore.removeAttachment(id);
+  }
+
+  function getFileTypeFromExtension(extension: string): "image" | "document" | "other" {
+    const imageExtensions = ["png", "jpg", "jpeg", "gif", "webp", "svg", "bmp"];
+    const documentExtensions = ["pdf", "txt", "md", "doc", "docx", "csv", "json", "xml"];
+
+    if (imageExtensions.includes(extension)) {
+      return "image";
+    } else if (documentExtensions.includes(extension)) {
+      return "document";
+    }
+    return "other";
+  }
+
+  function handleDragEnter(event: DragEvent) {
+    event.preventDefault();
+    event.stopPropagation();
+    if (event.dataTransfer?.types.includes("Files")) {
+      isDragging = true;
+    }
+  }
+
+  function handleDragOver(event: DragEvent) {
+    event.preventDefault();
+    event.stopPropagation();
+    if (event.dataTransfer) {
+      event.dataTransfer.dropEffect = "copy";
+    }
+  }
+
+  function handleDragLeave(event: DragEvent) {
+    event.preventDefault();
+    event.stopPropagation();
+    // Only set isDragging to false if we're leaving the form element entirely
+    const relatedTarget = event.relatedTarget as Node | null;
+    const currentTarget = event.currentTarget as HTMLElement;
+    if (!relatedTarget || !currentTarget.contains(relatedTarget)) {
+      isDragging = false;
+    }
+  }
+
+  async function handleDrop(event: DragEvent) {
+    event.preventDefault();
+    event.stopPropagation();
+    isDragging = false;
+
+    const files = event.dataTransfer?.files;
+    if (!files || files.length === 0) return;
+
+    const conversationId = get(claudeStore.activeConversationId);
+
+    for (const file of files) {
+      const filename = file.name;
+      const extension = filename.split(".").pop()?.toLowerCase() || "";
+      const fileType = getFileTypeFromExtension(extension);
+
+      // Create attachment from dropped file
+      // Note: For dropped files, we create a preview URL for images
+      let previewUrl: string | undefined;
+      if (fileType === "image") {
+        previewUrl = URL.createObjectURL(file);
+      }
+
+      // Check if the file has a native path (from Tauri's file drop)
+      // If not, we need to save it to a temp file
+      let savedPath = (file as File & { path?: string }).path;
+
+      if (!savedPath && conversationId) {
+        try {
+          const arrayBuffer = await file.arrayBuffer();
+          const bytes = Array.from(new Uint8Array(arrayBuffer));
+          savedPath = await invoke<string>("save_temp_file", {
+            conversationId,
+            filename,
+            data: bytes,
+          });
+        } catch (error) {
+          console.error("Failed to save dropped file to temp:", error);
+          savedPath = file.name;
+        }
+      }
+
+      const attachment: Attachment = {
+        id: `attachment-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+        filename,
+        path: savedPath || file.name,
+        size: file.size,
+        type: fileType,
+        mimeType: file.type,
+        previewUrl,
+      };
+
+      claudeStore.addAttachment(attachment);
+    }
+  }
+
+  async function handleFilePicker() {
+    try {
+      const selected = await open({
+        multiple: true,
+        filters: [
+          {
+            name: "All Files",
+            extensions: ["*"],
+          },
+          {
+            name: "Images",
+            extensions: ["png", "jpg", "jpeg", "gif", "webp", "svg", "bmp"],
+          },
+          {
+            name: "Documents",
+            extensions: ["pdf", "txt", "md", "doc", "docx", "csv", "json", "xml"],
+          },
+          {
+            name: "Code",
+            extensions: [
+              "js",
+              "ts",
+              "jsx",
+              "tsx",
+              "py",
+              "rs",
+              "go",
+              "java",
+              "c",
+              "cpp",
+              "h",
+              "hpp",
+              "css",
+              "html",
+              "svelte",
+              "vue",
+            ],
+          },
+        ],
+      });
+
+      if (!selected) return;
+
+      // Handle both single and multiple file selection
+      const files = Array.isArray(selected) ? selected : [selected];
+
+      for (const filePath of files) {
+        const filename = filePath.split(/[/\\]/).pop() || "unknown";
+        const extension = filename.split(".").pop()?.toLowerCase() || "";
+        const fileType = getFileTypeFromExtension(extension);
+
+        // Get file size from Tauri
+        let fileSize = 0;
+        try {
+          fileSize = await invoke<number>("get_file_size", { filePath });
+        } catch (e) {
+          console.warn("Could not get file size:", e);
+        }
+
+        const attachment: Attachment = {
+          id: `attachment-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+          filename,
+          path: filePath,
+          size: fileSize,
+          type: fileType,
+        };
+
+        claudeStore.addAttachment(attachment);
+      }
+    } catch (error) {
+      console.error("Failed to open file picker:", error);
+    }
+  }
+
+  async function handlePaste(event: ClipboardEvent) {
+    // First, try the web clipboard API for files
+    const items = event.clipboardData?.items;
+    let handledFile = false;
+
+    if (items && items.length > 0) {
+      for (const item of items) {
+        if (item.kind === "file") {
+          const file = item.getAsFile();
+          if (!file) continue;
+
+          event.preventDefault();
+          handledFile = true;
+
+          const filename = file.name || `pasted-${Date.now()}.${file.type.split("/")[1] || "png"}`;
+          const extension = filename.split(".").pop()?.toLowerCase() || "";
+          const fileType = getFileTypeFromExtension(extension);
+
+          let previewUrl: string | undefined;
+          if (fileType === "image" || file.type.startsWith("image/")) {
+            previewUrl = URL.createObjectURL(file);
+          }
+
+          const conversationId = get(claudeStore.activeConversationId);
+          let savedPath = filename;
+
+          if (conversationId) {
+            try {
+              const arrayBuffer = await file.arrayBuffer();
+              const bytes = Array.from(new Uint8Array(arrayBuffer));
+              savedPath = await invoke<string>("save_temp_file", {
+                conversationId,
+                filename,
+                data: bytes,
+              });
+            } catch (error) {
+              console.error("Failed to save pasted file to temp:", error);
+            }
+          }
+
+          const attachment: Attachment = {
+            id: `attachment-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+            filename,
+            path: savedPath,
+            size: file.size,
+            type: file.type.startsWith("image/") ? "image" : fileType,
+            mimeType: file.type,
+            previewUrl,
+          };
+
+          claudeStore.addAttachment(attachment);
+        }
+      }
+    }
+
+    // If web clipboard didn't have files, try Tauri's native clipboard for images
+    if (!handledFile) {
+      try {
+        const image = await readImage();
+        const rgba = await image.rgba();
+        const size = await image.size();
+
+        if (rgba && rgba.length > 0) {
+          event.preventDefault();
+
+          const conversationId = get(claudeStore.activeConversationId);
+          const filename = `screenshot-${Date.now()}.png`;
+
+          // Convert RGBA to PNG using canvas
+          const canvas = document.createElement("canvas");
+          canvas.width = size.width;
+          canvas.height = size.height;
+          const ctx = canvas.getContext("2d");
+
+          if (ctx) {
+            const imgData = ctx.createImageData(size.width, size.height);
+            imgData.data.set(new Uint8ClampedArray(rgba));
+            ctx.putImageData(imgData, 0, 0);
+
+            // Create preview URL from canvas
+            const previewUrl = canvas.toDataURL("image/png");
+
+            // Convert to blob for saving
+            const blob = await new Promise<Blob | null>((resolve) =>
+              canvas.toBlob(resolve, "image/png")
+            );
+
+            let savedPath = filename;
+            if (blob && conversationId) {
+              try {
+                const arrayBuffer = await blob.arrayBuffer();
+                const bytes = Array.from(new Uint8Array(arrayBuffer));
+                savedPath = await invoke<string>("save_temp_file", {
+                  conversationId,
+                  filename,
+                  data: bytes,
+                });
+              } catch (error) {
+                console.error("Failed to save clipboard image to temp:", error);
+              }
+            }
+
+            const attachment: Attachment = {
+              id: `attachment-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+              filename,
+              path: savedPath,
+              size: blob?.size || 0,
+              type: "image",
+              mimeType: "image/png",
+              previewUrl,
+            };
+
+            claudeStore.addAttachment(attachment);
+          }
+        }
+      } catch (error) {
+        // No image in clipboard or clipboard read failed - that's fine, just ignore
+        console.log("No image in native clipboard:", error);
+      }
+    }
+  }
+
   function handleKeyDown(event: KeyboardEvent) {
     // Handle command menu navigation
     if (showCommandMenu && matchingCommands.length > 0) {
@@ -352,7 +680,17 @@ User: ${formattedMessage}`;
   }
 </script>
 
-<form onsubmit={handleSubmit} class="input-bar">
+<form
+  onsubmit={handleSubmit}
+  ondragenter={handleDragEnter}
+  ondragover={handleDragOver}
+  ondragleave={handleDragLeave}
+  ondrop={handleDrop}
+  class="input-bar"
+  class:is-dragging={isDragging}
+>
+  <AttachmentPreview {attachments} onRemove={handleRemoveAttachment} />
+
   <div class="input-controls flex gap-2 mb-2">
     <MessageModeSelector />
   </div>
@@ -370,6 +708,7 @@ User: ${formattedMessage}`;
         bind:value={inputValue}
         onkeydown={handleKeyDown}
         oninput={handleInputChange}
+        onpaste={handlePaste}
         placeholder={isConnected
           ? "Ask Hikari anything... (type / for commands)"
           : "Connect to Claude first..."}
@@ -384,6 +723,23 @@ User: ${formattedMessage}`;
     </div>
 
     <div class="button-wrapper">
+      <button type="button" onclick={handleFilePicker} class="attach-button" title="Attach files">
+        <svg
+          width="20"
+          height="20"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path
+            d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"
+          />
+        </svg>
+      </button>
+
       {#if isProcessing}
         <button
           type="button"
@@ -396,7 +752,9 @@ User: ${formattedMessage}`;
       {:else}
         <button
           type="submit"
-          disabled={!isConnected || isSubmitting || !inputValue.trim()}
+          disabled={!isConnected ||
+            isSubmitting ||
+            (!inputValue.trim() && attachments.length === 0)}
           class="send-button bg-[var(--accent-primary)] hover:bg-[var(--accent-secondary)]
                disabled:opacity-50 disabled:cursor-not-allowed"
         >
@@ -416,6 +774,35 @@ User: ${formattedMessage}`;
     display: flex;
     flex-direction: column;
     gap: 8px;
+    position: relative;
+    transition:
+      border-color 0.2s,
+      background 0.2s;
+  }
+
+  .input-bar.is-dragging {
+    background: var(--bg-secondary);
+    border: 2px dashed var(--accent-primary);
+    border-radius: 12px;
+    padding: 8px;
+  }
+
+  .input-bar.is-dragging::before {
+    content: "Drop files here";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 18px;
+    font-weight: 500;
+    color: var(--accent-primary);
+    pointer-events: none;
+    z-index: 10;
+  }
+
+  .input-bar.is-dragging > * {
+    opacity: 0.3;
+    pointer-events: none;
   }
 
   .input-controls {
@@ -469,6 +856,32 @@ User: ${formattedMessage}`;
     height: 100%;
   }
 
+  .attach-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 48px;
+    height: 48px;
+    padding: 0;
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    color: var(--text-secondary);
+    cursor: pointer;
+    transition: all 0.2s;
+  }
+
+  .attach-button:hover {
+    background: var(--bg-tertiary);
+    border-color: var(--accent-primary);
+    color: var(--accent-primary);
+    transform: scale(1.05);
+  }
+
+  .attach-button:active {
+    transform: scale(0.95);
+  }
+
   .send-button {
     padding: 0 24px;
     height: 48px;

src/lib/stores/claude.ts

@@ -25,6 +25,7 @@ export const claudeStore = {
   isProcessing: conversationsStore.isProcessing,
   grantedTools: conversationsStore.grantedTools,
   pendingRetryMessage: conversationsStore.pendingRetryMessage,
+  attachments: conversationsStore.attachments,
 
   // New conversation-aware subscriptions
   conversations: conversationsStore.conversations,
@@ -67,6 +68,12 @@ export const claudeStore = {
   saveScrollPosition: conversationsStore.saveScrollPosition,
   getScrollPosition: conversationsStore.getScrollPosition,
 
+  // Attachment management
+  addAttachment: conversationsStore.addAttachment,
+  removeAttachment: conversationsStore.removeAttachment,
+  clearAttachments: conversationsStore.clearAttachments,
+  getAttachments: conversationsStore.getAttachments,
+
   getGrantedTools: (): string[] => {
     let tools: string[] = [];
     conversationsStore.grantedTools.subscribe((t) => (tools = Array.from(t)))();
@@ -86,6 +93,7 @@ export const claudeStore = {
     conversationsStore.setWorkingDirectory("");
     conversationsStore.setProcessing(false);
     conversationsStore.revokeAllTools();
+    conversationsStore.clearAttachments();
     // Also clear history restoration
     clearHistoryRestore();
   },

src/lib/stores/conversations.ts

@@ -4,6 +4,7 @@ import type {
   ConnectionStatus,
   PermissionRequest,
   UserQuestionEvent,
+  Attachment,
 } from "$lib/types/messages";
 import type { CharacterState } from "$lib/types/states";
 import { cleanupConversationTracking } from "$lib/tauri";
@@ -24,6 +25,7 @@ export interface Conversation {
   scrollPosition: number;
   createdAt: Date;
   lastActivityAt: Date;
+  attachments: Attachment[];
 }
 
 function createConversationsStore() {
@@ -59,6 +61,7 @@ function createConversationsStore() {
       scrollPosition: -1, // -1 means "scroll to bottom" (auto-scroll)
       createdAt: new Date(),
       lastActivityAt: new Date(),
+      attachments: [],
     };
   }
 
@@ -109,6 +112,7 @@ function createConversationsStore() {
   );
   const pendingQuestion = derived(activeConversation, ($conv) => $conv?.pendingQuestion || null);
   const scrollPosition = derived(activeConversation, ($conv) => $conv?.scrollPosition ?? -1);
+  const attachments = derived(activeConversation, ($conv) => $conv?.attachments || []);
 
   return {
     // Expose derived stores for compatibility
@@ -122,6 +126,7 @@ function createConversationsStore() {
     grantedTools: { subscribe: grantedTools.subscribe },
     pendingRetryMessage: { subscribe: pendingRetryMessage.subscribe },
     scrollPosition: { subscribe: scrollPosition.subscribe },
+    attachments: { subscribe: attachments.subscribe },
 
     // New conversation-specific stores
     conversations: { subscribe: conversations.subscribe },
@@ -272,7 +277,7 @@ function createConversationsStore() {
       return newConv.id;
     },
 
-    deleteConversation: (id: string) => {
+    deleteConversation: async (id: string) => {
       ensureInitialized();
       const convs = get(conversations);
       const activeId = get(activeConversationId);
@@ -282,8 +287,8 @@ function createConversationsStore() {
         return false;
       }
 
-      // Clean up tracking for this conversation
-      cleanupConversationTracking(id);
+      // Clean up tracking for this conversation (including temp files)
+      await cleanupConversationTracking(id);
 
       conversations.update((c) => {
         c.delete(id);
@@ -571,6 +576,58 @@ function createConversationsStore() {
       return conv?.grantedTools.has(toolName) || false;
     },
 
+    // Attachment management
+    addAttachment: (attachment: Attachment) => {
+      const activeId = get(activeConversationId);
+      if (!activeId) return;
+
+      conversations.update((convs) => {
+        const conv = convs.get(activeId);
+        if (conv) {
+          conv.attachments.push(attachment);
+          conv.lastActivityAt = new Date();
+        }
+        return convs;
+      });
+    },
+
+    removeAttachment: (id: string) => {
+      const activeId = get(activeConversationId);
+      if (!activeId) return;
+
+      conversations.update((convs) => {
+        const conv = convs.get(activeId);
+        if (conv) {
+          conv.attachments = conv.attachments.filter((a) => a.id !== id);
+          conv.lastActivityAt = new Date();
+        }
+        return convs;
+      });
+    },
+
+    clearAttachments: () => {
+      const activeId = get(activeConversationId);
+      if (!activeId) return;
+
+      conversations.update((convs) => {
+        const conv = convs.get(activeId);
+        if (conv) {
+          conv.attachments = [];
+          conv.lastActivityAt = new Date();
+        }
+        return convs;
+      });
+    },
+
+    getAttachments: (): Attachment[] => {
+      const activeId = get(activeConversationId);
+      if (!activeId) return [];
+
+      const convs = get(conversations);
+      const conv = convs.get(activeId);
+      return conv?.attachments || [];
+    },
+
     // Add initialization helper
     initialize: () => {
       ensureInitialized();

src/lib/tauri.ts

@@ -107,8 +107,15 @@ interface WorkingDirectoryPayload {
   conversation_id?: string;
 }
 
-export function cleanupConversationTracking(conversationId: string) {
+export async function cleanupConversationTracking(conversationId: string) {
   connectedConversations.delete(conversationId);
+
+  // Clean up any temp files associated with this conversation
+  try {
+    await invoke("cleanup_temp_files", { conversationId });
+  } catch (error) {
+    console.error("Failed to cleanup temp files for conversation:", error);
+  }
 }
 
 export async function initializeTauriListeners() {

src/lib/types/messages.ts

@@ -142,6 +142,16 @@ export interface UserQuestionEvent {
 
 export type ConnectionStatus = "disconnected" | "connecting" | "connected" | "error";
 
+export interface Attachment {
+  id: string;
+  filename: string;
+  path: string;
+  size: number;
+  type: "image" | "document" | "other";
+  mimeType?: string;
+  previewUrl?: string; // For images, a data URL or object URL for preview
+}
+
 export interface UpdateInfo {
   current_version: string;
   latest_version: string;