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) {