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/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;