feat: add drag-and-drop image upload and improve image previews

- Add FileDropZone component with overlay for web drag-and-drop
- Add useFileDropZone hook using native addEventListener for web
- Wire up drag-drop to agent screen to add images to input
- Improve image preview styling with visible border
- Show X button on hover with dark overlay for removal

🤖 Generated with [Claude Code](https://claude.com/claude-code)

packages/app/src/components/agent-input-area.tsx

@@ -46,6 +46,8 @@ interface AgentInputAreaProps {
   onChangeText?: (text: string) => void;
   /** When true, auto-focuses the text input on web. */
   autoFocus?: boolean;
+  /** Callback to expose the addImages function to parent components */
+  onAddImages?: (addImages: (images: ImageAttachment[]) => void) => void;
 }
 
 const EMPTY_ARRAY: readonly QueuedMessage[] = [];
@@ -68,6 +70,7 @@ export function AgentInputArea({
   value,
   onChangeText,
   autoFocus = false,
+  onAddImages,
 }: AgentInputAreaProps) {
   const { theme } = useUnistyles();
   const insets = useSafeAreaInsets();
@@ -130,6 +133,15 @@ export function AgentInputArea({
   const sendAgentMessageRef = useRef(sendAgentMessage);
   const onSubmitMessageRef = useRef(onSubmitMessage);
 
+  // Expose addImages function to parent for drag-and-drop support
+  const addImages = useCallback((images: ImageAttachment[]) => {
+    setSelectedImages((prev) => [...prev, ...images]);
+  }, []);
+
+  useEffect(() => {
+    onAddImages?.(addImages);
+  }, [addImages, onAddImages]);
+
   const submitMessage = useCallback(
     async (text: string, images?: ImageAttachment[]) => {
       if (onSubmitMessageRef.current) {

packages/app/src/components/file-drop-zone.tsx

@@ -0,0 +1,95 @@
+import { View, Text, Platform } from "react-native";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import Animated, {
+  useAnimatedStyle,
+  withTiming,
+  useSharedValue,
+} from "react-native-reanimated";
+import { useEffect } from "react";
+import { Upload } from "lucide-react-native";
+import { useFileDropZone } from "@/hooks/use-file-drop-zone";
+import type { ImageAttachment } from "./message-input";
+
+interface FileDropZoneProps {
+  children: React.ReactNode;
+  onFilesDropped: (files: ImageAttachment[]) => void;
+  disabled?: boolean;
+}
+
+const IS_WEB = Platform.OS === "web";
+
+export function FileDropZone({
+  children,
+  onFilesDropped,
+  disabled = false,
+}: FileDropZoneProps) {
+  const { theme } = useUnistyles();
+  const { isDragging, containerRef } = useFileDropZone({
+    onFilesDropped,
+    disabled,
+  });
+
+  const overlayOpacity = useSharedValue(0);
+
+  useEffect(() => {
+    overlayOpacity.value = withTiming(isDragging ? 1 : 0, { duration: 150 });
+  }, [isDragging, overlayOpacity]);
+
+  const overlayAnimatedStyle = useAnimatedStyle(() => ({
+    opacity: overlayOpacity.value,
+    pointerEvents: overlayOpacity.value > 0 ? "auto" : "none",
+  }));
+
+  // On non-web platforms, just render children
+  if (!IS_WEB) {
+    return <>{children}</>;
+  }
+
+  return (
+    <View
+      // Cast ref for web - View renders as div on web
+      ref={containerRef as unknown as React.RefObject<View>}
+      style={styles.container}
+    >
+      {children}
+
+      {/* Drop overlay */}
+      <Animated.View style={[styles.overlay, overlayAnimatedStyle]}>
+        {/* Backdrop */}
+        <View style={styles.backdrop} />
+        {/* Content */}
+        <View style={styles.overlayContent}>
+          <Upload size={32} color={theme.colors.primary} />
+          <Text style={styles.overlayText}>Drop images here</Text>
+        </View>
+      </Animated.View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create((theme) => ({
+  container: {
+    flex: 1,
+    position: "relative",
+  },
+  overlay: {
+    ...StyleSheet.absoluteFillObject,
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 1000,
+  },
+  backdrop: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: theme.colors.background,
+    opacity: 0.7,
+  },
+  overlayContent: {
+    alignItems: "center",
+    gap: theme.spacing[2],
+  },
+  overlayText: {
+    fontSize: theme.fontSize.base,
+    fontWeight: theme.fontWeight.medium,
+    color: theme.colors.foreground,
+  },
+}));

packages/app/src/components/message-input.tsx

@@ -426,20 +426,30 @@ export function MessageInput({
         {hasImages && (
           <View style={styles.imagePreviewContainer}>
             {images.map((image, index) => (
-              <View key={`${image.uri}-${index}`} style={styles.imagePill}>
-                <Image
-                  source={{ uri: image.uri }}
-                  style={styles.imageThumbnail}
-                />
-                {onRemoveImage && (
-                  <Pressable
-                    onPress={() => onRemoveImage(index)}
-                    style={styles.removeImageButton}
-                  >
-                    <X size={16} color={theme.colors.foreground} />
-                  </Pressable>
+              <Pressable
+                key={`${image.uri}-${index}`}
+                style={styles.imagePill}
+                onPress={onRemoveImage ? () => onRemoveImage(index) : undefined}
+              >
+                {({ hovered }) => (
+                  <>
+                    <Image
+                      source={{ uri: image.uri }}
+                      style={styles.imageThumbnail}
+                    />
+                    {onRemoveImage && (
+                      <View
+                        style={[
+                          styles.removeImageButton,
+                          (hovered || !IS_WEB) && styles.removeImageButtonVisible,
+                        ]}
+                      >
+                        <X size={16} color="white" />
+                      </View>
+                    )}
+                  </>
                 )}
-              </View>
+              </Pressable>
             ))}
           </View>
         )}
@@ -591,23 +601,40 @@ const styles = StyleSheet.create(((theme: any) => ({
     flexWrap: "wrap",
   },
   imagePill: {
-    flexDirection: "row",
-    alignItems: "center",
-    backgroundColor: theme.colors.muted,
-    borderRadius: theme.borderRadius.lg,
-    padding: theme.spacing[1],
-    gap: theme.spacing[2],
+    position: "relative",
+    borderRadius: theme.borderRadius.md,
+    borderWidth: 1,
+    borderColor: theme.colors.accentBorder,
+    overflow: "hidden",
+    ...(IS_WEB
+      ? {
+          cursor: "pointer",
+        }
+      : {}),
   },
   imageThumbnail: {
-    width: 40,
-    height: 40,
-    borderRadius: theme.borderRadius.md,
+    width: 48,
+    height: 48,
   },
   removeImageButton: {
-    width: 24,
-    height: 24,
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
     alignItems: "center",
     justifyContent: "center",
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    opacity: 0,
+    ...(IS_WEB
+      ? {
+          transitionProperty: "opacity",
+          transitionDuration: "150ms",
+        }
+      : {}),
+  },
+  removeImageButtonVisible: {
+    opacity: 1,
   },
   textInput: {
     width: "100%",